auto-claude: 5.3 - Add explanations to details/summary, progress/mete

lessons/27-html-dialog.json

@@ -17,6 +17,10 @@
 			"initialCode": "",
 			"solution": "<dialog open>\n  <h2>Welcome!</h2>\n  <p>This is a native HTML dialog element.</p>\n  <form method=\"dialog\">\n    <button>Close</button>\n  </form>\n</dialog>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "The dialog element is a native modal/popup that the browser manages entirely—it handles backdrop rendering, focus trapping, Escape key closing, and scroll locking on the body without any JavaScript. When opened with showModal(), the browser creates an ::backdrop pseudo-element (styled by CSS), traps keyboard focus inside the dialog (Tab cycles through dialog elements only), and prevents interaction with background content. The form method=\"dialog\" pattern leverages native form submission to close the dialog: any button inside submits the form, which closes the dialog and returns the button's value via the dialog's returnValue property. This replaces thousands of lines of modal library code with semantic HTML.",
+				"diagram": "Dialog Mechanics\n\nNative Modal Features:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n✓ Backdrop rendering\n✓ Focus trapping (Tab loops)\n✓ Escape key closes\n✓ Body scroll lock\n✓ Top-layer rendering\n✓ Screen reader isolation\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nDialog Opening Methods:\n\nshowModal() → Modal dialog\n  ↓\n  ┌─────────────────────┐\n  │ [Backdrop overlay]  │\n  │  ┌───────────────┐  │\n  │  │ <dialog>      │  │\n  │  │   Content     │  │\n  │  └───────────────┘  │\n  └─────────────────────┘\n  Focus trapped, Esc closes\n\nshow() → Non-modal dialog\n  ↓\n  ┌───────────────┐\n  │ <dialog>      │\n  │   Content     │  ← Floats above\n  └───────────────┘\n  Can interact with background\n\nForm Method=\"dialog\":\n<form method=\"dialog\">\n  <button value=\"cancel\">Cancel</button>\n  <button value=\"ok\">OK</button>\n</form>\n  ↓ Clicking either button\n  1. Submits form\n  2. Closes dialog\n  3. Sets dialog.returnValue"
+			},
 			"validations": [
 				{
 					"type": "element_exists",
@@ -56,6 +60,10 @@
 			"initialCode": "",
 			"solution": "<dialog open>\n  <h2>Confirm Delete</h2>\n  <p>Are you sure you want to delete this item?</p>\n  <form method=\"dialog\">\n    <button value=\"cancel\">Cancel</button>\n    <button value=\"delete\">Delete</button>\n  </form>\n</dialog>",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "The combination of dialog + form method=\"dialog\" creates a confirmation pattern where button values become the dialog's return value, letting you distinguish which button was clicked. When a user clicks a button in a method=\"dialog\" form, three things happen atomically: the form submits (triggering submit event), the dialog closes (triggering close event), and dialog.returnValue is set to the clicked button's value attribute. This pattern is perfect for yes/no confirmations or multi-choice prompts where you need to know the user's decision. Unlike window.confirm() which blocks the entire page and looks dated, dialog provides a customizable, non-blocking, accessible alternative that fits modern design systems.",
+				"diagram": "Dialog Return Values\n\nHTML:\n<dialog id=\"confirm\">\n  <form method=\"dialog\">\n    <button value=\"cancel\">Cancel</button>\n    <button value=\"delete\">Delete</button>\n  </form>\n</dialog>\n\nExecution Flow:\n\nUser clicks \"Delete\" button\n  ↓\n1. Form submits\n   (submit event fires)\n  ↓\n2. Dialog closes\n   (close event fires)\n  ↓\n3. returnValue set\n   dialog.returnValue = \"delete\"\n\nJavaScript Usage:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nconst dialog = document.querySelector('#confirm');\ndialog.showModal();\n\ndialog.addEventListener('close', () => {\n  if (dialog.returnValue === 'delete') {\n    // User confirmed\n    deleteItem();\n  } else {\n    // User cancelled\n  }\n});\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nvs window.confirm():\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nwindow.confirm()  → Blocks page\n                  → Ugly native UI\n                  → No customization\n\n<dialog>          → Non-blocking\n                  → Styleable\n                  → Accessible"
+			},
 			"validations": [
 				{
 					"type": "element_exists",