@taprootio/espalier 4.13.0 → 4.13.2

package/custom-elements.json

@@ -32988,6 +32988,17 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "promotedToggleFrame",
+              "privacy": "private",
+              "default": "new RafThrottle(() => this.positionPromotedToggle())"
+            },
+            {
+              "kind": "field",
+              "name": "handlePromotedViewportResize",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "lastDrawerBrandKey",
@@ -33055,7 +33066,7 @@
                   "text": "void"
                 }
               },
-              "description": "Lift the menu toggle into the top layer as a manual popover positioned\nat the rectangle it occupies in the header, so the burger animates to\nits X in place above a full-screen drawer. The header's flow closes up\nbehind it, which the drawer hides."
+              "description": "Lift the menu toggle into the top layer as a manual popover positioned\nat its header rectangle when visible, constrained to the viewport when\nthe header has scrolled away. The header's flow closes up behind it,\nwhich the drawer hides."
             },
             {
               "kind": "method",
@@ -33068,6 +33079,48 @@
               },
               "description": "Keep a promoted toggle where it belongs while the viewport changes:\nat the inline end of the buttons section, which the section itself\nstill reports because only the toggle left the flow."
             },
+            {
+              "kind": "method",
+              "name": "setPromotedTogglePosition",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "toggle",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "left",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "top",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "width",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "height",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "demoteMenuToggle",
@@ -63679,203 +63732,274 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/progress/esp-progress.js",
+      "path": "dist/radio-button/esp-radio-button-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A progress indicator that supports both determinate and\nindeterminate modes, rendered as a linear bar or a circle.\n\nIn **determinate** mode, set `value` and optionally `max` to\nshow a fill bar representing progress toward completion:\n\n```html\n<esp-progress value=\"42\" show-value label=\"Upload progress\"></esp-progress>\n```\n\nIn **indeterminate** mode (the default when no `value` is set),\nan animated bar communicates that work is happening\nwithout a known endpoint:\n\n```html\n<esp-progress label=\"Loading data...\"></esp-progress>\n```\n\nThe three size presets:\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-small);\">\n  <esp-progress value=\"60\" label=\"Small\" size=\"small\"></esp-progress>\n  <esp-progress value=\"60\" label=\"Medium\" size=\"medium\"></esp-progress>\n  <esp-progress value=\"60\" label=\"Large\" size=\"large\" show-value></esp-progress>\n</div>\n```\n\nIntent colors match the design system:\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-padding);\">\n  <esp-progress value=\"80\" label=\"Primary\" show-value></esp-progress>\n  <esp-progress value=\"60\" label=\"Success\" intent=\"success\" show-value></esp-progress>\n  <esp-progress value=\"40\" label=\"Warning\" intent=\"warning\" show-value></esp-progress>\n  <esp-progress value=\"20\" label=\"Danger\" intent=\"danger\" show-value></esp-progress>\n</div>\n```\n\nClick the button to watch the progress bar fill over ten seconds:\n\n```html\n<esp-box>\n  <esp-progress id=\"demo-progress\" value=\"0\" label=\"Demo progress\" intent=\"success\" size=\"large\" show-value></esp-progress>\n  <div style=\"display: flex; gap: var(--esp-size-small); margin-top: var(--esp-size-small);\">\n    <esp-button id=\"start-btn\" label=\"Start\" collapsed></esp-button>\n    <esp-button id=\"reset-btn\" label=\"Reset\" collapsed></esp-button>\n  </div>\n</esp-box>\n<script>\n  const progress = findById(\"demo-progress\");\n  const startBtn = findById(\"start-btn\");\n  const resetBtn = findById(\"reset-btn\");\n  let running = false;\n  startBtn.addEventListener(\"esp-clicked\", () => {\n    if (running) return;\n    running = true;\n    progress.value = 0;\n    const start = performance.now();\n    const duration = 10000;\n    function step(now) {\n      const elapsed = now - start;\n      progress.value = Math.min((elapsed / duration) * 100, 100);\n      if (elapsed < duration) {\n        requestAnimationFrame(step);\n      } else {\n        running = false;\n        showToast({ message: \"Complete!\", intent: \"success\", icon: \"bread\" });\n      }\n    }\n    requestAnimationFrame(step);\n  });\n  resetBtn.addEventListener(\"esp-clicked\", () => {\n    running = false;\n    progress.value = 0;\n  });\n</script>\n```\n\nIndeterminate mode with different intents:\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-small);\">\n  <esp-progress label=\"Primary loading\"></esp-progress>\n  <esp-progress label=\"Success loading\" intent=\"success\"></esp-progress>\n  <esp-progress label=\"Warning loading\" intent=\"warning\"></esp-progress>\n  <esp-progress label=\"Danger loading\" intent=\"danger\"></esp-progress>\n</div>\n```\n\nCircle mode displays a ring that fills clockwise. Set\n`mode=\"circle\"` and optionally `show-value` to display\nthe percentage in the center:\n\n```html\n<div style=\"display: flex; gap: var(--esp-size-padding); align-items: center; flex-wrap: wrap;\">\n  <esp-progress mode=\"circle\" value=\"80\" label=\"Primary\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Success\" intent=\"success\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"40\" label=\"Warning\" intent=\"warning\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"20\" label=\"Danger\" intent=\"danger\" show-value></esp-progress>\n</div>\n```\n\nCircle size presets:\n\n```html\n<div style=\"display: flex; gap: var(--esp-size-padding); align-items: center;\">\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Small\" size=\"small\"></esp-progress>\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Medium\" size=\"medium\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Large\" size=\"large\" show-value></esp-progress>\n</div>\n```\n\nIndeterminate circle mode:\n\n```html\n<div style=\"display: flex; gap: var(--esp-size-padding); align-items: center;\">\n  <esp-progress mode=\"circle\" label=\"Primary loading\"></esp-progress>\n  <esp-progress mode=\"circle\" label=\"Success loading\" intent=\"success\"></esp-progress>\n</div>\n```\n\nClick the button to watch the circle fill over ten seconds:\n\n```html\n<esp-box>\n  <div style=\"display: flex; align-items: center; gap: var(--esp-size-padding);\">\n    <esp-progress id=\"demo-circle\" mode=\"circle\" value=\"0\" label=\"Circle demo\" intent=\"success\" size=\"large\" show-value></esp-progress>\n    <div style=\"display: flex; gap: var(--esp-size-small);\">\n      <esp-button id=\"start-circle-btn\" label=\"Start\" collapsed></esp-button>\n      <esp-button id=\"reset-circle-btn\" label=\"Reset\" collapsed></esp-button>\n    </div>\n  </div>\n</esp-box>\n<script>\n  const circleProgress = findById(\"demo-circle\");\n  const startCircleBtn = findById(\"start-circle-btn\");\n  const resetCircleBtn = findById(\"reset-circle-btn\");\n  let circleRunning = false;\n  startCircleBtn.addEventListener(\"esp-clicked\", () => {\n    if (circleRunning) return;\n    circleRunning = true;\n    circleProgress.value = 0;\n    const start = performance.now();\n    const duration = 10000;\n    function step(now) {\n      const elapsed = now - start;\n      circleProgress.value = Math.min((elapsed / duration) * 100, 100);\n      if (elapsed < duration) {\n        requestAnimationFrame(step);\n      } else {\n        circleRunning = false;\n        showToast({ message: \"Complete!\", intent: \"success\", icon: \"bread\" });\n      }\n    }\n    requestAnimationFrame(step);\n  });\n  resetCircleBtn.addEventListener(\"esp-clicked\", () => {\n    circleRunning = false;\n    circleProgress.value = 0;\n  });\n</script>\n```",
-          "name": "EspalierProgress",
-          "cssProperties": [
-            {
-              "description": "Border color of the track outline. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-progress-border-color"
-            },
-            {
-              "description": "Border radius of the track and fill. Defaults to `var(--esp-size-border-radius)`.",
-              "name": "--esp-progress-border-radius"
-            },
-            {
-              "description": "Diameter of the circular progress ring in circle mode. Automatically set by the `size` attribute.",
-              "name": "--esp-progress-circle-size"
-            },
-            {
-              "description": "Color of the progress fill. Defaults to the active action hue at the semantic muted lightness so the filled and unfilled portions remain distinguishable in light and dark themes.",
-              "name": "--esp-progress-fill-color"
-            },
-            {
-              "description": "Font size for the value text. Defaults to `var(--esp-type-small)`.",
-              "name": "--esp-progress-font-size"
-            },
-            {
-              "description": "Height of the progress bar track. Automatically set by the `size` attribute.",
-              "name": "--esp-progress-height"
-            },
+          "description": "Groups multiple [esp-radio-button](/components/radio-button)\ncomponents and ensures only one can be selected at a time.\nWorks with [esp-form-item](/components/form-item) for label\nand error message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Choose a size\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"small\">Small</esp-radio-button>\n      <esp-radio-button value=\"medium\" checked>Medium</esp-radio-button>\n      <esp-radio-button value=\"large\">Large</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-radio-button-group disabled>\n      <esp-radio-button value=\"a\">Option A</esp-radio-button>\n      <esp-radio-button value=\"b\" checked>Option B</esp-radio-button>\n      <esp-radio-button value=\"c\">Option C</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```",
+          "name": "EspalierRadioButtonGroup",
+          "slots": [
             {
-              "description": "Color of the percentage text in both bar and circle modes. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-progress-text-color"
-            },
+              "description": "Place `esp-radio-button` elements in the default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
-              "name": "--esp-field-background",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
             },
             {
-              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-field-border-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "kind": "field",
+              "name": "internals",
+              "privacy": "private"
             },
             {
-              "description": "Border width of the shared field shell. Defaults to `1px`.",
-              "name": "--esp-field-border-width",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "kind": "field",
+              "name": "formCtrl",
+              "privacy": "private",
+              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => this.value || null, getValidity: () => { if (this.required && !this.value) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please select an option.\", }; } return null; }, onReset: () => { for (const rb of this.getRadioButtons()) { rb.checked = false; } }, onRestore: (state: string) => { for (const rb of this.getRadioButtons()) { rb.checked = rb.value === state; } }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
             },
             {
-              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-field-text-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "kind": "field",
+              "name": "itemsSlot",
+              "privacy": "private"
             },
             {
-              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-hover-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "kind": "field",
+              "name": "formItemDescription",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
             },
             {
-              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-focus-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "kind": "field",
+              "name": "describedRadios",
+              "privacy": "private",
+              "default": "new Set<EspalierRadioButton>()"
             },
-            {
-              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-field-focus-shadow",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "name",
               "type": {
-                "text": "number | null"
+                "text": "string"
               },
               "privacy": "public",
-              "default": "null",
-              "description": "The current progress value. Set to `null` (or omit) for\nindeterminate mode. Values are clamped to `0..max`.",
-              "attribute": "value"
+              "default": "\"\"",
+              "description": "The name used when the group participates in a `<form>`.",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "max",
+              "name": "required",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
               "privacy": "public",
-              "default": "100",
-              "description": "The maximum value. Defaults to `100`.",
-              "attribute": "max"
+              "default": "false",
+              "description": "When true, one radio button must be selected before the\nform can be submitted.",
+              "attribute": "required",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "requiredMessage",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "An accessible label describing what the progress bar\nrepresents. Required for screen readers.",
-              "attribute": "label"
+              "description": "A custom message to display when the group is required but no\nradio button is selected. Defaults to\n`\"Please select an option.\"` when not set.",
+              "attribute": "required-message"
             },
             {
               "kind": "field",
-              "name": "showValue",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Show the percentage value as text. In bar mode the text\nappears below the track; in circle mode it appears in the\ncenter of the ring.",
-              "attribute": "show-value"
+              "description": "Disables all child radio buttons in the group.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "value",
               "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
+                "text": "string"
               },
               "privacy": "public",
-              "default": "\"medium\"",
-              "description": "Size preset for the progress indicator.\n\nIn bar mode:\n- `small` — 6px\n- `medium` — 12px (default)\n- `large` — 20px\n\nIn circle mode:\n- `small` — 48px diameter\n- `medium` — 80px diameter (default)\n- `large` — 120px diameter",
-              "attribute": "size",
-              "reflects": true
+              "description": "Returns the value of the currently selected radio button,\nor an empty string if none is selected.",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "\"bar\" | \"circle\""
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focus the checked radio button, or the first non-disabled\nradio button if none is checked."
+            },
+            {
+              "kind": "method",
+              "name": "validate",
               "privacy": "public",
-              "default": "\"bar\"",
-              "description": "Display mode for the progress indicator.\n\n- `bar` — linear progress bar (default)\n- `circle` — circular SVG ring",
-              "attribute": "mode",
-              "reflects": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Re-run constraint validation and dispatch `esp-validity-changed`."
             },
             {
-              "kind": "field",
-              "name": "isIndeterminate",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "checkValidity",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
+              "description": "Check whether the current state is valid (delegates to ElementInternals)."
+            },
+            {
+              "kind": "method",
+              "name": "getRadioButtons",
               "privacy": "private",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "EspalierRadioButton[]"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "clampedValue",
-              "type": {
-                "text": "number"
-              },
+              "kind": "method",
+              "name": "applyDisabledState",
               "privacy": "private",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyFormItemDescription",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "field",
-              "name": "percentage",
-              "type": {
-                "text": "number"
+              "name": "handleItemsSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleChildChanged",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
               "privacy": "private",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderBar",
-              "privacy": "private"
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called by the browser when the owning `<form>` is reset."
             },
             {
               "kind": "method",
-              "name": "renderCircle",
-              "privacy": "private"
+              "name": "formStateRestoreCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Called by the browser to restore form state (bfcache, etc.)."
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "isDisabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
             },
             {
               "kind": "field",
@@ -64602,60 +64726,58 @@
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "value",
               "type": {
-                "text": "number | null"
+                "text": "CustomEvent<string>"
               },
-              "default": "null",
-              "description": "The current progress value. Set to `null` (or omit) for\nindeterminate mode. Values are clamped to `0..max`.",
-              "fieldName": "value"
+              "description": "Fired when the selected radio button changes. The detail is the value of the newly selected radio button.",
+              "name": "esp-value-changed"
             },
             {
-              "name": "max",
               "type": {
-                "text": "number"
+                "text": "CustomEvent<{ valid: boolean; message: string }>"
               },
-              "default": "100",
-              "description": "The maximum value. Defaults to `100`.",
-              "fieldName": "max"
-            },
+              "description": "Fired whenever constraint validation runs.",
+              "name": "esp-validity-changed"
+            }
+          ],
+          "attributes": [
             {
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "An accessible label describing what the progress bar\nrepresents. Required for screen readers.",
-              "fieldName": "label"
+              "description": "The name used when the group participates in a `<form>`.",
+              "fieldName": "name"
             },
             {
-              "name": "show-value",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Show the percentage value as text. In bar mode the text\nappears below the track; in circle mode it appears in the\ncenter of the ring.",
-              "fieldName": "showValue"
+              "description": "When true, one radio button must be selected before the\nform can be submitted.",
+              "fieldName": "required"
             },
             {
-              "name": "size",
+              "name": "required-message",
               "type": {
-                "text": "\"small\" | \"medium\" | \"large\""
+                "text": "string"
               },
-              "default": "\"medium\"",
-              "description": "Size preset for the progress indicator.\n\nIn bar mode:\n- `small` — 6px\n- `medium` — 12px (default)\n- `large` — 20px\n\nIn circle mode:\n- `small` — 48px diameter\n- `medium` — 80px diameter (default)\n- `large` — 120px diameter",
-              "fieldName": "size"
+              "default": "\"\"",
+              "description": "A custom message to display when the group is required but no\nradio button is selected. Defaults to\n`\"Please select an option.\"` when not set.",
+              "fieldName": "requiredMessage"
             },
             {
-              "name": "mode",
+              "name": "disabled",
               "type": {
-                "text": "\"bar\" | \"circle\""
+                "text": "boolean"
               },
-              "default": "\"bar\"",
-              "description": "Display mode for the progress indicator.\n\n- `bar` — linear progress bar (default)\n- `circle` — circular SVG ring",
-              "fieldName": "mode"
+              "default": "false",
+              "description": "Disables all child radio buttons in the group.",
+              "fieldName": "disabled"
             },
             {
               "name": "scheme",
@@ -64700,142 +64822,211 @@
             "module": "dist/shared/esp-element-base.js"
           },
           "docPageTitle": {
-            "name": "Progress",
-            "description": ""
+            "name": "Radio",
+            "description": "Button Group"
           },
           "docUrl": {
-            "name": "/components/progress",
+            "name": "/components/radio-button/group",
             "description": ""
           },
           "menuGroup": {
-            "name": "Feedback",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Progress",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "progress",
-            "description": ""
+            "name": "Form",
+            "description": "Controls"
           },
-          "tagName": "esp-progress",
+          "tagName": "esp-radio-button-group",
           "customElement": true,
-          "events": []
-        },
-        {
-          "kind": "variable",
-          "name": "indeterminate"
+          "cssProperties": [
+            {
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierProgress",
+          "name": "EspalierRadioButtonGroup",
           "declaration": {
-            "name": "EspalierProgress",
-            "module": "dist/progress/esp-progress.js"
+            "name": "EspalierRadioButtonGroup",
+            "module": "dist/radio-button/esp-radio-button-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-progress",
+          "name": "esp-radio-button-group",
           "declaration": {
-            "name": "EspalierProgress",
-            "module": "dist/progress/esp-progress.js"
+            "name": "EspalierRadioButtonGroup",
+            "module": "dist/radio-button/esp-radio-button-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/radio-button/esp-radio-button-group.js",
+      "path": "dist/radio-button/esp-radio-button.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Groups multiple [esp-radio-button](/components/radio-button)\ncomponents and ensures only one can be selected at a time.\nWorks with [esp-form-item](/components/form-item) for label\nand error message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Choose a size\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"small\">Small</esp-radio-button>\n      <esp-radio-button value=\"medium\" checked>Medium</esp-radio-button>\n      <esp-radio-button value=\"large\">Large</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-radio-button-group disabled>\n      <esp-radio-button value=\"a\">Option A</esp-radio-button>\n      <esp-radio-button value=\"b\" checked>Option B</esp-radio-button>\n      <esp-radio-button value=\"c\">Option C</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```",
-          "name": "EspalierRadioButtonGroup",
-          "slots": [
+          "description": "A radio button control for choosing one option from a set.\nUses Tabler SVG icons for selected and unselected states.\nShould be used inside an\n[esp-radio-button-group](/components/radio-button/group)\nfor single-select behavior.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Favorite color\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"red\">Red</esp-radio-button>\n      <esp-radio-button value=\"green\">Green</esp-radio-button>\n      <esp-radio-button value=\"blue\">Blue</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-radio-button-group>\n    <esp-radio-button checked value=\"small\">Small</esp-radio-button>\n    <esp-radio-button value=\"medium\">Medium</esp-radio-button>\n    <esp-radio-button disabled value=\"large\">Large</esp-radio-button>\n  </esp-radio-button-group>\n</esp-box>\n```",
+          "name": "EspalierRadioButton",
+          "cssProperties": [
             {
-              "description": "Place `esp-radio-button` elements in the default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "The width and height of the radio icon. Defaults to `var(--esp-size-normal-to-medium)`.",
+              "name": "--esp-radio-button-size"
+            },
             {
-              "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "true"
+              "description": "The stroke color of the radio icon. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-radio-button-icon-color"
             },
             {
-              "kind": "field",
-              "name": "internals",
-              "privacy": "private"
+              "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-radio-button-focus-shadow"
             },
             {
-              "kind": "field",
-              "name": "formCtrl",
-              "privacy": "private",
-              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => this.value || null, getValidity: () => { if (this.required && !this.value) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please select an option.\", }; } return null; }, onReset: () => { for (const rb of this.getRadioButtons()) { rb.checked = false; } }, onRestore: (state: string) => { for (const rb of this.getRadioButtons()) { rb.checked = rb.value === state; } }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "itemsSlot",
-              "privacy": "private"
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "formItemDescription",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "describedRadios",
-              "privacy": "private",
-              "default": "new Set<EspalierRadioButton>()"
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
+            {
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "description": "The label text for the radio button.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The name used when the group participates in a `<form>`.",
-              "attribute": "name",
-              "reflects": true
+              "name": "formItemDescription",
+              "privacy": "private",
+              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".radio-control\"), })"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "When true, one radio button must be selected before the\nform can be submitted.",
-              "attribute": "required",
+              "description": "Whether the radio button is in the selected state.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "requiredMessage",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "A custom message to display when the group is required but no\nradio button is selected. Defaults to\n`\"Please select an option.\"` when not set.",
-              "attribute": "required-message"
+              "description": "The value associated with this radio button. Used by\n[esp-radio-button-group](/components/radio-button/group) to\ntrack which option is selected.",
+              "attribute": "value"
             },
             {
               "kind": "field",
@@ -64845,20 +65036,10 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Disables all child radio buttons in the group.",
+              "description": "Controls whether the radio button is disabled.",
               "attribute": "disabled",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "description": "Returns the value of the currently selected radio button,\nor an empty string if none is selected.",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "focus",
@@ -64877,53 +65058,11 @@
                   }
                 }
               ],
-              "description": "Focus the checked radio button, or the first non-disabled\nradio button if none is checked."
-            },
-            {
-              "kind": "method",
-              "name": "validate",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Re-run constraint validation and dispatch `esp-validity-changed`."
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Check whether the current state is valid (delegates to ElementInternals)."
-            },
-            {
-              "kind": "method",
-              "name": "getRadioButtons",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "EspalierRadioButton[]"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "applyDisabledState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "Focus the radio button control."
             },
             {
               "kind": "method",
-              "name": "applyFormItemDescription",
+              "name": "select",
               "privacy": "private",
               "return": {
                 "type": {
@@ -64931,29 +65070,6 @@
                 }
               }
             },
-            {
-              "kind": "field",
-              "name": "handleItemsSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleChildChanged",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "handleKeyDown",
@@ -64972,52 +65088,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "formResetCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Called by the browser when the owning `<form>` is reset."
-            },
-            {
-              "kind": "method",
-              "name": "formStateRestoreCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "state",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Called by the browser to restore form state (bfcache, etc.)."
-            },
-            {
-              "kind": "method",
-              "name": "formDisabledCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "isDisabled",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
-            },
             {
               "kind": "field",
               "name": "seedColorBacker",
@@ -65746,46 +65816,30 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<string>"
+                "text": "CustomEvent<{ checked: boolean; value: string }>"
               },
-              "description": "Fired when the selected radio button changes. The detail is the value of the newly selected radio button.",
+              "description": "Fired when the radio button is selected. The detail contains the new `checked` state and the radio button `value`.",
               "name": "esp-value-changed"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{ valid: boolean; message: string }>"
-              },
-              "description": "Fired whenever constraint validation runs.",
-              "name": "esp-validity-changed"
             }
           ],
           "attributes": [
             {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name used when the group participates in a `<form>`.",
-              "fieldName": "name"
-            },
-            {
-              "name": "required",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, one radio button must be selected before the\nform can be submitted.",
-              "fieldName": "required"
+              "description": "Whether the radio button is in the selected state.",
+              "fieldName": "checked"
             },
             {
-              "name": "required-message",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "A custom message to display when the group is required but no\nradio button is selected. Defaults to\n`\"Please select an option.\"` when not set.",
-              "fieldName": "requiredMessage"
+              "description": "The value associated with this radio button. Used by\n[esp-radio-button-group](/components/radio-button/group) to\ntrack which option is selected.",
+              "fieldName": "value"
             },
             {
               "name": "disabled",
@@ -65793,7 +65847,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables all child radio buttons in the group.",
+              "description": "Controls whether the radio button is disabled.",
               "fieldName": "disabled"
             },
             {
@@ -65840,117 +65894,83 @@
           },
           "docPageTitle": {
             "name": "Radio",
-            "description": "Button Group"
+            "description": "Button"
           },
           "docUrl": {
-            "name": "/components/radio-button/group",
+            "name": "/components/radio-button",
             "description": ""
           },
           "menuGroup": {
             "name": "Form",
             "description": "Controls"
           },
-          "tagName": "esp-radio-button-group",
-          "customElement": true,
-          "cssProperties": [
-            {
-              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
-              "name": "--esp-field-background",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-field-border-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border width of the shared field shell. Defaults to `1px`.",
-              "name": "--esp-field-border-width",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-field-text-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-hover-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-focus-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-field-focus-shadow",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ]
+          "menuLabel": {
+            "name": "Radio",
+            "description": "Button"
+          },
+          "menuIcon": {
+            "name": "circle-dot",
+            "description": ""
+          },
+          "tagName": "esp-radio-button",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierRadioButtonGroup",
+          "name": "EspalierRadioButton",
           "declaration": {
-            "name": "EspalierRadioButtonGroup",
-            "module": "dist/radio-button/esp-radio-button-group.js"
+            "name": "EspalierRadioButton",
+            "module": "dist/radio-button/esp-radio-button.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-radio-button-group",
+          "name": "esp-radio-button",
           "declaration": {
-            "name": "EspalierRadioButtonGroup",
-            "module": "dist/radio-button/esp-radio-button-group.js"
+            "name": "EspalierRadioButton",
+            "module": "dist/radio-button/esp-radio-button.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/radio-button/esp-radio-button.js",
+      "path": "dist/progress/esp-progress.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A radio button control for choosing one option from a set.\nUses Tabler SVG icons for selected and unselected states.\nShould be used inside an\n[esp-radio-button-group](/components/radio-button/group)\nfor single-select behavior.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Favorite color\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"red\">Red</esp-radio-button>\n      <esp-radio-button value=\"green\">Green</esp-radio-button>\n      <esp-radio-button value=\"blue\">Blue</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-radio-button-group>\n    <esp-radio-button checked value=\"small\">Small</esp-radio-button>\n    <esp-radio-button value=\"medium\">Medium</esp-radio-button>\n    <esp-radio-button disabled value=\"large\">Large</esp-radio-button>\n  </esp-radio-button-group>\n</esp-box>\n```",
-          "name": "EspalierRadioButton",
+          "description": "A progress indicator that supports both determinate and\nindeterminate modes, rendered as a linear bar or a circle.\n\nIn **determinate** mode, set `value` and optionally `max` to\nshow a fill bar representing progress toward completion:\n\n```html\n<esp-progress value=\"42\" show-value label=\"Upload progress\"></esp-progress>\n```\n\nIn **indeterminate** mode (the default when no `value` is set),\nan animated bar communicates that work is happening\nwithout a known endpoint:\n\n```html\n<esp-progress label=\"Loading data...\"></esp-progress>\n```\n\nThe three size presets:\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-small);\">\n  <esp-progress value=\"60\" label=\"Small\" size=\"small\"></esp-progress>\n  <esp-progress value=\"60\" label=\"Medium\" size=\"medium\"></esp-progress>\n  <esp-progress value=\"60\" label=\"Large\" size=\"large\" show-value></esp-progress>\n</div>\n```\n\nIntent colors match the design system:\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-padding);\">\n  <esp-progress value=\"80\" label=\"Primary\" show-value></esp-progress>\n  <esp-progress value=\"60\" label=\"Success\" intent=\"success\" show-value></esp-progress>\n  <esp-progress value=\"40\" label=\"Warning\" intent=\"warning\" show-value></esp-progress>\n  <esp-progress value=\"20\" label=\"Danger\" intent=\"danger\" show-value></esp-progress>\n</div>\n```\n\nClick the button to watch the progress bar fill over ten seconds:\n\n```html\n<esp-box>\n  <esp-progress id=\"demo-progress\" value=\"0\" label=\"Demo progress\" intent=\"success\" size=\"large\" show-value></esp-progress>\n  <div style=\"display: flex; gap: var(--esp-size-small); margin-top: var(--esp-size-small);\">\n    <esp-button id=\"start-btn\" label=\"Start\" collapsed></esp-button>\n    <esp-button id=\"reset-btn\" label=\"Reset\" collapsed></esp-button>\n  </div>\n</esp-box>\n<script>\n  const progress = findById(\"demo-progress\");\n  const startBtn = findById(\"start-btn\");\n  const resetBtn = findById(\"reset-btn\");\n  let running = false;\n  startBtn.addEventListener(\"esp-clicked\", () => {\n    if (running) return;\n    running = true;\n    progress.value = 0;\n    const start = performance.now();\n    const duration = 10000;\n    function step(now) {\n      const elapsed = now - start;\n      progress.value = Math.min((elapsed / duration) * 100, 100);\n      if (elapsed < duration) {\n        requestAnimationFrame(step);\n      } else {\n        running = false;\n        showToast({ message: \"Complete!\", intent: \"success\", icon: \"bread\" });\n      }\n    }\n    requestAnimationFrame(step);\n  });\n  resetBtn.addEventListener(\"esp-clicked\", () => {\n    running = false;\n    progress.value = 0;\n  });\n</script>\n```\n\nIndeterminate mode with different intents:\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-small);\">\n  <esp-progress label=\"Primary loading\"></esp-progress>\n  <esp-progress label=\"Success loading\" intent=\"success\"></esp-progress>\n  <esp-progress label=\"Warning loading\" intent=\"warning\"></esp-progress>\n  <esp-progress label=\"Danger loading\" intent=\"danger\"></esp-progress>\n</div>\n```\n\nCircle mode displays a ring that fills clockwise. Set\n`mode=\"circle\"` and optionally `show-value` to display\nthe percentage in the center:\n\n```html\n<div style=\"display: flex; gap: var(--esp-size-padding); align-items: center; flex-wrap: wrap;\">\n  <esp-progress mode=\"circle\" value=\"80\" label=\"Primary\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Success\" intent=\"success\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"40\" label=\"Warning\" intent=\"warning\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"20\" label=\"Danger\" intent=\"danger\" show-value></esp-progress>\n</div>\n```\n\nCircle size presets:\n\n```html\n<div style=\"display: flex; gap: var(--esp-size-padding); align-items: center;\">\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Small\" size=\"small\"></esp-progress>\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Medium\" size=\"medium\" show-value></esp-progress>\n  <esp-progress mode=\"circle\" value=\"60\" label=\"Large\" size=\"large\" show-value></esp-progress>\n</div>\n```\n\nIndeterminate circle mode:\n\n```html\n<div style=\"display: flex; gap: var(--esp-size-padding); align-items: center;\">\n  <esp-progress mode=\"circle\" label=\"Primary loading\"></esp-progress>\n  <esp-progress mode=\"circle\" label=\"Success loading\" intent=\"success\"></esp-progress>\n</div>\n```\n\nClick the button to watch the circle fill over ten seconds:\n\n```html\n<esp-box>\n  <div style=\"display: flex; align-items: center; gap: var(--esp-size-padding);\">\n    <esp-progress id=\"demo-circle\" mode=\"circle\" value=\"0\" label=\"Circle demo\" intent=\"success\" size=\"large\" show-value></esp-progress>\n    <div style=\"display: flex; gap: var(--esp-size-small);\">\n      <esp-button id=\"start-circle-btn\" label=\"Start\" collapsed></esp-button>\n      <esp-button id=\"reset-circle-btn\" label=\"Reset\" collapsed></esp-button>\n    </div>\n  </div>\n</esp-box>\n<script>\n  const circleProgress = findById(\"demo-circle\");\n  const startCircleBtn = findById(\"start-circle-btn\");\n  const resetCircleBtn = findById(\"reset-circle-btn\");\n  let circleRunning = false;\n  startCircleBtn.addEventListener(\"esp-clicked\", () => {\n    if (circleRunning) return;\n    circleRunning = true;\n    circleProgress.value = 0;\n    const start = performance.now();\n    const duration = 10000;\n    function step(now) {\n      const elapsed = now - start;\n      circleProgress.value = Math.min((elapsed / duration) * 100, 100);\n      if (elapsed < duration) {\n        requestAnimationFrame(step);\n      } else {\n        circleRunning = false;\n        showToast({ message: \"Complete!\", intent: \"success\", icon: \"bread\" });\n      }\n    }\n    requestAnimationFrame(step);\n  });\n  resetCircleBtn.addEventListener(\"esp-clicked\", () => {\n    circleRunning = false;\n    circleProgress.value = 0;\n  });\n</script>\n```",
+          "name": "EspalierProgress",
           "cssProperties": [
             {
-              "description": "The width and height of the radio icon. Defaults to `var(--esp-size-normal-to-medium)`.",
-              "name": "--esp-radio-button-size"
+              "description": "Border color of the track outline. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-progress-border-color"
             },
             {
-              "description": "The stroke color of the radio icon. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-radio-button-icon-color"
+              "description": "Border radius of the track and fill. Defaults to `var(--esp-size-border-radius)`.",
+              "name": "--esp-progress-border-radius"
             },
             {
-              "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-radio-button-focus-shadow"
+              "description": "Diameter of the circular progress ring in circle mode. Automatically set by the `size` attribute.",
+              "name": "--esp-progress-circle-size"
+            },
+            {
+              "description": "Color of the progress fill. Defaults to the active action hue at the semantic muted lightness so the filled and unfilled portions remain distinguishable in light and dark themes.",
+              "name": "--esp-progress-fill-color"
+            },
+            {
+              "description": "Font size for the value text. Defaults to `var(--esp-type-small)`.",
+              "name": "--esp-progress-font-size"
+            },
+            {
+              "description": "Height of the progress bar track. Automatically set by the `size` attribute.",
+              "name": "--esp-progress-height"
+            },
+            {
+              "description": "Color of the percentage text in both bar and circle modes. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-progress-text-color"
             },
             {
               "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
@@ -66009,101 +66029,111 @@
               }
             }
           ],
-          "slots": [
-            {
-              "description": "The label text for the radio button.",
-              "name": ""
-            }
-          ],
           "members": [
             {
               "kind": "field",
-              "name": "formItemDescription",
-              "privacy": "private",
-              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".radio-control\"), })"
+              "name": "value",
+              "type": {
+                "text": "number | null"
+              },
+              "privacy": "public",
+              "default": "null",
+              "description": "The current progress value. Set to `null` (or omit) for\nindeterminate mode. Values are clamped to `0..max`.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "Whether the radio button is in the selected state.",
-              "attribute": "checked",
-              "reflects": true
+              "default": "100",
+              "description": "The maximum value. Defaults to `100`.",
+              "attribute": "max"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "The value associated with this radio button. Used by\n[esp-radio-button-group](/components/radio-button/group) to\ntrack which option is selected.",
-              "attribute": "value"
+              "description": "An accessible label describing what the progress bar\nrepresents. Required for screen readers.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "showValue",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Controls whether the radio button is disabled.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "Show the percentage value as text. In bar mode the text\nappears below the track; in circle mode it appears in the\ncenter of the ring.",
+              "attribute": "show-value"
             },
             {
-              "kind": "method",
-              "name": "focus",
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | \"large\""
+              },
               "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "default": "\"medium\"",
+              "description": "Size preset for the progress indicator.\n\nIn bar mode:\n- `small` — 6px\n- `medium` — 12px (default)\n- `large` — 20px\n\nIn circle mode:\n- `small` — 48px diameter\n- `medium` — 80px diameter (default)\n- `large` — 120px diameter",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "\"bar\" | \"circle\""
               },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Focus the radio button control."
+              "privacy": "public",
+              "default": "\"bar\"",
+              "description": "Display mode for the progress indicator.\n\n- `bar` — linear progress bar (default)\n- `circle` — circular SVG ring",
+              "attribute": "mode",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "select",
+              "kind": "field",
+              "name": "isIndeterminate",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "readonly": true
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
+              "kind": "field",
+              "name": "clampedValue",
+              "type": {
+                "text": "number"
+              },
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "percentage",
+              "type": {
+                "text": "number"
               },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderBar",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderCircle",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -66830,42 +66860,60 @@
               }
             }
           ],
-          "events": [
+          "attributes": [
             {
+              "name": "value",
               "type": {
-                "text": "CustomEvent<{ checked: boolean; value: string }>"
+                "text": "number | null"
               },
-              "description": "Fired when the radio button is selected. The detail contains the new `checked` state and the radio button `value`.",
-              "name": "esp-value-changed"
-            }
-          ],
-          "attributes": [
+              "default": "null",
+              "description": "The current progress value. Set to `null` (or omit) for\nindeterminate mode. Values are clamped to `0..max`.",
+              "fieldName": "value"
+            },
             {
-              "name": "checked",
+              "name": "max",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false",
-              "description": "Whether the radio button is in the selected state.",
-              "fieldName": "checked"
+              "default": "100",
+              "description": "The maximum value. Defaults to `100`.",
+              "fieldName": "max"
             },
             {
-              "name": "value",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The value associated with this radio button. Used by\n[esp-radio-button-group](/components/radio-button/group) to\ntrack which option is selected.",
-              "fieldName": "value"
+              "description": "An accessible label describing what the progress bar\nrepresents. Required for screen readers.",
+              "fieldName": "label"
             },
             {
-              "name": "disabled",
+              "name": "show-value",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the radio button is disabled.",
-              "fieldName": "disabled"
+              "description": "Show the percentage value as text. In bar mode the text\nappears below the track; in circle mode it appears in the\ncenter of the ring.",
+              "fieldName": "showValue"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | \"large\""
+              },
+              "default": "\"medium\"",
+              "description": "Size preset for the progress indicator.\n\nIn bar mode:\n- `small` — 6px\n- `medium` — 12px (default)\n- `large` — 20px\n\nIn circle mode:\n- `small` — 48px diameter\n- `medium` — 80px diameter (default)\n- `large` — 120px diameter",
+              "fieldName": "size"
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "\"bar\" | \"circle\""
+              },
+              "default": "\"bar\"",
+              "description": "Display mode for the progress indicator.\n\n- `bar` — linear progress bar (default)\n- `circle` — circular SVG ring",
+              "fieldName": "mode"
             },
             {
               "name": "scheme",
@@ -66910,44 +66958,49 @@
             "module": "dist/shared/esp-element-base.js"
           },
           "docPageTitle": {
-            "name": "Radio",
-            "description": "Button"
+            "name": "Progress",
+            "description": ""
           },
           "docUrl": {
-            "name": "/components/radio-button",
+            "name": "/components/progress",
             "description": ""
           },
           "menuGroup": {
-            "name": "Form",
-            "description": "Controls"
+            "name": "Feedback",
+            "description": ""
           },
           "menuLabel": {
-            "name": "Radio",
-            "description": "Button"
+            "name": "Progress",
+            "description": ""
           },
           "menuIcon": {
-            "name": "circle-dot",
+            "name": "progress",
             "description": ""
           },
-          "tagName": "esp-radio-button",
-          "customElement": true
+          "tagName": "esp-progress",
+          "customElement": true,
+          "events": []
+        },
+        {
+          "kind": "variable",
+          "name": "indeterminate"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierRadioButton",
+          "name": "EspalierProgress",
           "declaration": {
-            "name": "EspalierRadioButton",
-            "module": "dist/radio-button/esp-radio-button.js"
+            "name": "EspalierProgress",
+            "module": "dist/progress/esp-progress.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-radio-button",
+          "name": "esp-progress",
           "declaration": {
-            "name": "EspalierRadioButton",
-            "module": "dist/radio-button/esp-radio-button.js"
+            "name": "EspalierProgress",
+            "module": "dist/progress/esp-progress.js"
           }
         }
       ]
@@ -84352,60 +84405,40 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/switch/esp-switch.js",
+      "path": "dist/tabs/esp-tab-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A toggle switch for boolean on/off values. Uses a CSS-only\ntrack-and-thumb design with a smooth sliding transition.\nFunctionally equivalent to a checkbox but visually communicates\nan immediate state change rather than a deferred selection.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Notifications\">\n    <esp-switch value=\"notifications\">\n      Enable notifications\n    </esp-switch>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-switch checked value=\"dark-mode\">\n    Dark mode\n  </esp-switch>\n  <esp-switch disabled value=\"disabled-opt\">\n    Disabled option\n  </esp-switch>\n</esp-box>\n```\n\n### Text mode\n\nSet `mode=\"text\"` with `off-label` and `on-label` to render a\ntwo-option text toggle instead of a track and thumb. This is\nideal for binary choices like a billing-period selector:\n\n```html\n<esp-box>\n  <esp-switch\n    mode=\"text\"\n    off-label=\"Monthly\"\n    on-label=\"Annual\"\n    value=\"annual\"\n  >Billing period</esp-switch>\n</esp-box>\n```\n\nThe slotted text is visually hidden in text mode and folded\ninto the control's accessible label together with the current\nselected option. Screen readers will announce both the label\nand the active choice while the `off-label` / `on-label`\ntext is presented visually.",
-          "name": "EspalierSwitch",
+          "description": "A tabbed interface that groups multiple\n[esp-tab](/components/tabs) elements. The tab strip is\ngenerated automatically from each child's `label` attribute.\nOnly one tab panel is visible at a time.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Overview\">\n    <p>Overview content goes here.</p>\n  </esp-tab>\n  <esp-tab label=\"Details\">\n    <p>Detailed information lives here.</p>\n  </esp-tab>\n  <esp-tab label=\"Settings\">\n    <p>Configuration options.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet `active` on a child `esp-tab` to make it the initially\nvisible panel:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Alpha\">\n    <p>Alpha panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Beta\" active>\n    <p>Beta starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\nIndividual tabs can be disabled:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Available\">\n    <p>You can select this tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Locked\" disabled>\n    <p>This tab cannot be reached.</p>\n  </esp-tab>\n  <esp-tab label=\"Also available\">\n    <p>This tab works too.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled group\n\nSet `disabled` on the group to disable all tabs at once:\n\n```html\n<esp-tab-group disabled>\n  <esp-tab label=\"One\">\n    <p>All tabs are disabled.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\">\n    <p>Cannot switch to this.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Zone theming\n\nTab groups pick up zone theming from a `context` attribute:\n\n```html\n<esp-tab-group context=\"quiet\">\n  <esp-tab label=\"First\">\n    <p>Zone-correct content.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>More content.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Listening for tab changes\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Tab 1\">\n    <p>First panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Tab 2\">\n    <p>Second panel.</p>\n  </esp-tab>\n</esp-tab-group>\n<script>\n  const tabs = findByTagName(\"esp-tab-group\")[0];\n  tabs.addEventListener(\"esp-tab-group-changed\", (ev) => {\n    console.log(\"Switched to:\", ev.detail.label, \"at index\", ev.detail.index);\n  });\n</script>\n```",
+          "name": "EspalierTabGroup",
           "cssProperties": [
             {
-              "description": "The width of the switch track. Defaults to `calc(var(--esp-size-normal-to-medium) * 1.75)`.",
-              "name": "--esp-switch-width"
-            },
-            {
-              "description": "The height of the switch track. Defaults to `var(--esp-size-normal-to-medium)`.",
-              "name": "--esp-switch-height"
-            },
-            {
-              "description": "The diameter of the thumb. Defaults to `calc(var(--esp-switch-height) - 4px)`.",
-              "name": "--esp-switch-thumb-size"
-            },
-            {
-              "description": "The track background color when the switch is off. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-switch-track-color"
-            },
-            {
-              "description": "The track background color when the switch is on. Defaults to `var(--esp-color-action-background)`.",
-              "name": "--esp-switch-track-color-on"
-            },
-            {
-              "description": "The thumb color. Defaults to `var(--esp-color-layer-1)`.",
-              "name": "--esp-switch-thumb-color"
+              "description": "Border color of the tab group container.",
+              "name": "--esp-tab-color-border"
             },
             {
-              "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-switch-focus-shadow"
+              "description": "Background color of the overall component.",
+              "name": "--esp-tab-color-background"
             },
             {
-              "description": "Padding inside each text-mode label cell. Defaults to `var(--esp-size-tiny) var(--esp-size-small)`.",
-              "name": "--esp-switch-text-padding"
+              "description": "Background color of the tab strip.",
+              "name": "--esp-tab-color-strip-background"
             },
             {
-              "description": "Font size for text-mode labels. Defaults to `var(--esp-size-font)`.",
-              "name": "--esp-switch-text-font-size"
+              "description": "Tab button hover background.",
+              "name": "--esp-tab-color-button-hover"
             },
             {
-              "description": "Text color of the active label in text mode. Defaults to `var(--esp-color-action-text)`.",
-              "name": "--esp-switch-text-active-color"
+              "description": "Active tab button background.",
+              "name": "--esp-tab-color-button-active"
             },
             {
-              "description": "Text color of the inactive label in text mode. Defaults to `var(--esp-color-layer-1)`.",
-              "name": "--esp-switch-text-inactive-color"
+              "description": "Text color for tab buttons.",
+              "name": "--esp-tab-color-text"
             },
             {
-              "description": "Background color of the sliding highlight in text mode. Defaults to `var(--esp-color-action-background)`.",
-              "name": "--esp-switch-text-highlight-color"
+              "description": "Padding inside the panel area and tab buttons.",
+              "name": "--esp-tab-size-padding"
             },
             {
               "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
@@ -84464,194 +84497,108 @@
               }
             }
           ],
+          "cssParts": [
+            {
+              "description": "The tab strip container.",
+              "name": "tab-list"
+            },
+            {
+              "description": "Each individual tab button in the strip.",
+              "name": "tab-button"
+            },
+            {
+              "description": "The panel area below the tab strip.",
+              "name": "panels"
+            }
+          ],
           "slots": [
             {
-              "description": "The label text for the switch. In default mode this renders beside the track; in text mode it is visually hidden and included in the control's accessible label.",
+              "description": "Place `esp-tab` elements in the default slot.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "internals",
+              "name": "panelsSlot",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "formCtrl",
-              "privacy": "private",
-              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => (this.checked ? this.value || \"on\" : null), getValidity: () => { if (this.required && !this.checked) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please toggle this switch to continue.\", }; } return null; }, onReset: () => { this.checked = false; }, onRestore: (state: string) => { this.checked = state === \"on\" || state === this.value; }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
-            },
-            {
-              "kind": "field",
-              "name": "formItemDescription",
-              "privacy": "private",
-              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".switch-control\"), })"
-            },
-            {
-              "kind": "field",
-              "name": "mode",
-              "type": {
-                "text": "\"switch\" | \"text\""
-              },
-              "privacy": "public",
-              "default": "\"switch\"",
-              "description": "The visual presentation of the switch.\n- `\"switch\"` (default) renders a track-and-thumb toggle.\n- `\"text\"` renders two side-by-side text labels with a\n  sliding highlight behind the active one.",
-              "attribute": "mode",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "offLabel",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Label shown for the unchecked (off) state when\n`mode=\"text\"`.",
-              "attribute": "off-label"
-            },
-            {
-              "kind": "field",
-              "name": "onLabel",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Label shown for the checked (on) state when\n`mode=\"text\"`.",
-              "attribute": "on-label"
-            },
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the switch is in the on state.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
-              "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The name used when the switch participates in a `<form>`.",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "required",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "When true, the switch must be on before the form can\nbe submitted.",
-              "attribute": "required",
+              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "requiredMessage",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "A custom message to display when the switch is required but\nnot on. Defaults to `\"Please toggle this switch to continue.\"`\nwhen not set.\n\n```html\n<esp-switch required required-message=\"You must accept the terms.\">\n  I accept\n</esp-switch>\n```",
-              "attribute": "required-message"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
+              "name": "tabData",
               "type": {
-                "text": "boolean"
+                "text": "TabData[]"
               },
-              "privacy": "public",
-              "default": "false",
-              "description": "Controls whether the switch is disabled.",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "method",
-              "name": "focus",
-              "privacy": "public",
+              "name": "getTabs",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
+                  "text": "EspalierTab[]"
                 }
-              ],
-              "description": "Focus the switch control."
+              }
             },
             {
               "kind": "method",
-              "name": "validate",
-              "privacy": "public",
+              "name": "syncTabData",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "description": "Re-run constraint validation and dispatch `esp-validity-changed`."
+              }
             },
             {
               "kind": "method",
-              "name": "checkValidity",
-              "privacy": "public",
+              "name": "activateTab",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "void"
                 }
               },
-              "description": "Check whether the current state is valid (delegates to ElementInternals)."
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "toggle",
+              "name": "handleTabClick",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -84673,7 +84620,7 @@
             },
             {
               "kind": "method",
-              "name": "handleLabelSlotChange",
+              "name": "handleChildUpdated",
               "privacy": "private",
               "return": {
                 "type": {
@@ -84683,69 +84630,13 @@
             },
             {
               "kind": "method",
-              "name": "getCurrentTextModeLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getTextModeAriaLabel",
+              "name": "handleSlotChange",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "formResetCallback",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "description": "Called by the browser when the owning `<form>` is reset."
-            },
-            {
-              "kind": "method",
-              "name": "formStateRestoreCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "state",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Called by the browser to restore form state (bfcache, etc.)."
-            },
-            {
-              "kind": "method",
-              "name": "formDisabledCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "isDisabled",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
+              }
             },
             {
               "kind": "field",
@@ -85475,99 +85366,20 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<{ checked: boolean; value: string }>"
-              },
-              "description": "Fired when the switch is toggled. The detail contains the new `checked` state and the switch `value`.",
-              "name": "esp-value-changed"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{ valid: boolean; message: string }>"
+                "text": "CustomEvent<{ index: number; label: string }>"
               },
-              "description": "Fired whenever constraint validation runs.",
-              "name": "esp-validity-changed"
+              "description": "Fired when the active tab changes. The detail contains the `index` and `label` of the newly active tab.",
+              "name": "esp-tab-group-changed"
             }
           ],
           "attributes": [
-            {
-              "name": "mode",
-              "type": {
-                "text": "\"switch\" | \"text\""
-              },
-              "default": "\"switch\"",
-              "description": "The visual presentation of the switch.\n- `\"switch\"` (default) renders a track-and-thumb toggle.\n- `\"text\"` renders two side-by-side text labels with a\n  sliding highlight behind the active one.",
-              "fieldName": "mode"
-            },
-            {
-              "name": "off-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label shown for the unchecked (off) state when\n`mode=\"text\"`.",
-              "fieldName": "offLabel"
-            },
-            {
-              "name": "on-label",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Label shown for the checked (on) state when\n`mode=\"text\"`.",
-              "fieldName": "onLabel"
-            },
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the switch is in the on state.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
-              "fieldName": "value"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name used when the switch participates in a `<form>`.",
-              "fieldName": "name"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the switch must be on before the form can\nbe submitted.",
-              "fieldName": "required"
-            },
-            {
-              "name": "required-message",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "A custom message to display when the switch is required but\nnot on. Defaults to `\"Please toggle this switch to continue.\"`\nwhen not set.\n\n```html\n<esp-switch required required-message=\"You must accept the terms.\">\n  I accept\n</esp-switch>\n```",
-              "fieldName": "requiredMessage"
-            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls whether the switch is disabled.",
+              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
               "fieldName": "disabled"
             },
             {
@@ -85612,84 +85424,60 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
+          "tagName": "esp-tab-group",
+          "customElement": true,
           "docPageTitle": {
-            "name": "Switch",
-            "description": ""
+            "name": "Tab",
+            "description": "Group"
           },
           "docUrl": {
-            "name": "/components/switch",
+            "name": "/components/tabs",
             "description": ""
           },
           "menuGroup": {
-            "name": "Form",
-            "description": "Controls"
+            "name": "Navigation",
+            "description": ""
           },
           "menuLabel": {
-            "name": "Switch",
-            "description": ""
+            "name": "Tab",
+            "description": "Group"
           },
           "menuIcon": {
-            "name": "button",
+            "name": "layout-navbar",
             "description": ""
-          },
-          "tagName": "esp-switch",
-          "customElement": true
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierSwitch",
+          "name": "EspalierTabGroup",
           "declaration": {
-            "name": "EspalierSwitch",
-            "module": "dist/switch/esp-switch.js"
+            "name": "EspalierTabGroup",
+            "module": "dist/tabs/esp-tab-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-switch",
+          "name": "esp-tab-group",
           "declaration": {
-            "name": "EspalierSwitch",
-            "module": "dist/switch/esp-switch.js"
+            "name": "EspalierTabGroup",
+            "module": "dist/tabs/esp-tab-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/tabs/esp-tab-group.js",
+      "path": "dist/tabs/esp-tab.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A tabbed interface that groups multiple\n[esp-tab](/components/tabs) elements. The tab strip is\ngenerated automatically from each child's `label` attribute.\nOnly one tab panel is visible at a time.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Overview\">\n    <p>Overview content goes here.</p>\n  </esp-tab>\n  <esp-tab label=\"Details\">\n    <p>Detailed information lives here.</p>\n  </esp-tab>\n  <esp-tab label=\"Settings\">\n    <p>Configuration options.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet `active` on a child `esp-tab` to make it the initially\nvisible panel:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Alpha\">\n    <p>Alpha panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Beta\" active>\n    <p>Beta starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\nIndividual tabs can be disabled:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Available\">\n    <p>You can select this tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Locked\" disabled>\n    <p>This tab cannot be reached.</p>\n  </esp-tab>\n  <esp-tab label=\"Also available\">\n    <p>This tab works too.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled group\n\nSet `disabled` on the group to disable all tabs at once:\n\n```html\n<esp-tab-group disabled>\n  <esp-tab label=\"One\">\n    <p>All tabs are disabled.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\">\n    <p>Cannot switch to this.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Zone theming\n\nTab groups pick up zone theming from a `context` attribute:\n\n```html\n<esp-tab-group context=\"quiet\">\n  <esp-tab label=\"First\">\n    <p>Zone-correct content.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>More content.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Listening for tab changes\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Tab 1\">\n    <p>First panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Tab 2\">\n    <p>Second panel.</p>\n  </esp-tab>\n</esp-tab-group>\n<script>\n  const tabs = findByTagName(\"esp-tab-group\")[0];\n  tabs.addEventListener(\"esp-tab-group-changed\", (ev) => {\n    console.log(\"Switched to:\", ev.detail.label, \"at index\", ev.detail.index);\n  });\n</script>\n```",
-          "name": "EspalierTabGroup",
+          "description": "A single tab panel used inside\n[esp-tab-group](/components/tabs). Each tab provides a\n`label` that appears in the generated tab strip and a default\nslot for the panel content.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"First\">\n    <p>Content for the first tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>Content for the second tab.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet the `active` attribute to make a tab active on load:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"One\">\n    <p>Not active by default.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\" active>\n    <p>This tab starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Enabled\">\n    <p>This tab works normally.</p>\n  </esp-tab>\n  <esp-tab label=\"Disabled\" disabled>\n    <p>Cannot reach this panel.</p>\n  </esp-tab>\n</esp-tab-group>\n```",
+          "name": "EspalierTab",
           "cssProperties": [
             {
-              "description": "Border color of the tab group container.",
-              "name": "--esp-tab-color-border"
-            },
-            {
-              "description": "Background color of the overall component.",
-              "name": "--esp-tab-color-background"
-            },
-            {
-              "description": "Background color of the tab strip.",
-              "name": "--esp-tab-color-strip-background"
-            },
-            {
-              "description": "Tab button hover background.",
-              "name": "--esp-tab-color-button-hover"
-            },
-            {
-              "description": "Active tab button background.",
-              "name": "--esp-tab-color-button-active"
-            },
-            {
-              "description": "Text color for tab buttons.",
-              "name": "--esp-tab-color-text"
-            },
-            {
-              "description": "Padding inside the panel area and tab buttons.",
+              "description": "Padding inside the panel area.",
               "name": "--esp-tab-size-padding"
             },
             {
@@ -85751,144 +85539,51 @@
           ],
           "cssParts": [
             {
-              "description": "The tab strip container.",
-              "name": "tab-list"
-            },
-            {
-              "description": "Each individual tab button in the strip.",
-              "name": "tab-button"
-            },
-            {
-              "description": "The panel area below the tab strip.",
-              "name": "panels"
+              "description": "The panel wrapper element.",
+              "name": "panel"
             }
           ],
           "slots": [
             {
-              "description": "Place `esp-tab` elements in the default slot.",
+              "description": "The default slot holds the panel content displayed when this tab is active. Label, active-state, and disabled-state updates are reported through a private coordination event consumed by the parent tab group.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "panelsSlot",
-              "privacy": "private"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The text displayed in the tab button within the tab strip.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
-              "attribute": "disabled",
+              "description": "Whether this tab is currently active (its panel is visible).",
+              "attribute": "active",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tabData",
+              "name": "disabled",
               "type": {
-                "text": "TabData[]"
-              },
-              "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "method",
-              "name": "getTabs",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "EspalierTab[]"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "syncTabData",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "activateTab",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleTabClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleChildUpdated",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether this tab is disabled (cannot be selected).",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -86615,23 +86310,33 @@
               }
             }
           ],
-          "events": [
+          "events": [],
+          "attributes": [
             {
+              "name": "label",
               "type": {
-                "text": "CustomEvent<{ index: number; label: string }>"
+                "text": "string"
               },
-              "description": "Fired when the active tab changes. The detail contains the `index` and `label` of the newly active tab.",
-              "name": "esp-tab-group-changed"
-            }
-          ],
-          "attributes": [
+              "default": "\"\"",
+              "description": "The text displayed in the tab button within the tab strip.",
+              "fieldName": "label"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether this tab is currently active (its panel is visible).",
+              "fieldName": "active"
+            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
+              "description": "Whether this tab is disabled (cannot be selected).",
               "fieldName": "disabled"
             },
             {
@@ -86676,61 +86381,97 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
-          "tagName": "esp-tab-group",
+          "tagName": "esp-tab",
           "customElement": true,
           "docPageTitle": {
             "name": "Tab",
-            "description": "Group"
+            "description": ""
           },
           "docUrl": {
-            "name": "/components/tabs",
+            "name": "/components/tabs/tab",
             "description": ""
           },
           "menuGroup": {
             "name": "Navigation",
             "description": ""
-          },
-          "menuLabel": {
-            "name": "Tab",
-            "description": "Group"
-          },
-          "menuIcon": {
-            "name": "layout-navbar",
-            "description": ""
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierTabGroup",
+          "name": "EspalierTab",
           "declaration": {
-            "name": "EspalierTabGroup",
-            "module": "dist/tabs/esp-tab-group.js"
+            "name": "EspalierTab",
+            "module": "dist/tabs/esp-tab.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-tab-group",
+          "name": "esp-tab",
           "declaration": {
-            "name": "EspalierTabGroup",
-            "module": "dist/tabs/esp-tab-group.js"
+            "name": "EspalierTab",
+            "module": "dist/tabs/esp-tab.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/tabs/esp-tab.js",
+      "path": "dist/switch/esp-switch.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A single tab panel used inside\n[esp-tab-group](/components/tabs). Each tab provides a\n`label` that appears in the generated tab strip and a default\nslot for the panel content.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"First\">\n    <p>Content for the first tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>Content for the second tab.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet the `active` attribute to make a tab active on load:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"One\">\n    <p>Not active by default.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\" active>\n    <p>This tab starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Enabled\">\n    <p>This tab works normally.</p>\n  </esp-tab>\n  <esp-tab label=\"Disabled\" disabled>\n    <p>Cannot reach this panel.</p>\n  </esp-tab>\n</esp-tab-group>\n```",
-          "name": "EspalierTab",
+          "description": "A toggle switch for boolean on/off values. Uses a CSS-only\ntrack-and-thumb design with a smooth sliding transition.\nFunctionally equivalent to a checkbox but visually communicates\nan immediate state change rather than a deferred selection.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Notifications\">\n    <esp-switch value=\"notifications\">\n      Enable notifications\n    </esp-switch>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-switch checked value=\"dark-mode\">\n    Dark mode\n  </esp-switch>\n  <esp-switch disabled value=\"disabled-opt\">\n    Disabled option\n  </esp-switch>\n</esp-box>\n```\n\n### Text mode\n\nSet `mode=\"text\"` with `off-label` and `on-label` to render a\ntwo-option text toggle instead of a track and thumb. This is\nideal for binary choices like a billing-period selector:\n\n```html\n<esp-box>\n  <esp-switch\n    mode=\"text\"\n    off-label=\"Monthly\"\n    on-label=\"Annual\"\n    value=\"annual\"\n  >Billing period</esp-switch>\n</esp-box>\n```\n\nThe slotted text is visually hidden in text mode and folded\ninto the control's accessible label together with the current\nselected option. Screen readers will announce both the label\nand the active choice while the `off-label` / `on-label`\ntext is presented visually.",
+          "name": "EspalierSwitch",
           "cssProperties": [
             {
-              "description": "Padding inside the panel area.",
-              "name": "--esp-tab-size-padding"
+              "description": "The width of the switch track. Defaults to `calc(var(--esp-size-normal-to-medium) * 1.75)`.",
+              "name": "--esp-switch-width"
+            },
+            {
+              "description": "The height of the switch track. Defaults to `var(--esp-size-normal-to-medium)`.",
+              "name": "--esp-switch-height"
+            },
+            {
+              "description": "The diameter of the thumb. Defaults to `calc(var(--esp-switch-height) - 4px)`.",
+              "name": "--esp-switch-thumb-size"
+            },
+            {
+              "description": "The track background color when the switch is off. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-switch-track-color"
+            },
+            {
+              "description": "The track background color when the switch is on. Defaults to `var(--esp-color-action-background)`.",
+              "name": "--esp-switch-track-color-on"
+            },
+            {
+              "description": "The thumb color. Defaults to `var(--esp-color-layer-1)`.",
+              "name": "--esp-switch-thumb-color"
+            },
+            {
+              "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-switch-focus-shadow"
+            },
+            {
+              "description": "Padding inside each text-mode label cell. Defaults to `var(--esp-size-tiny) var(--esp-size-small)`.",
+              "name": "--esp-switch-text-padding"
+            },
+            {
+              "description": "Font size for text-mode labels. Defaults to `var(--esp-size-font)`.",
+              "name": "--esp-switch-text-font-size"
+            },
+            {
+              "description": "Text color of the active label in text mode. Defaults to `var(--esp-color-action-text)`.",
+              "name": "--esp-switch-text-active-color"
+            },
+            {
+              "description": "Text color of the inactive label in text mode. Defaults to `var(--esp-color-layer-1)`.",
+              "name": "--esp-switch-text-inactive-color"
+            },
+            {
+              "description": "Background color of the sliding highlight in text mode. Defaults to `var(--esp-color-action-background)`.",
+              "name": "--esp-switch-text-highlight-color"
             },
             {
               "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
@@ -86789,42 +86530,131 @@
               }
             }
           ],
-          "cssParts": [
-            {
-              "description": "The panel wrapper element.",
-              "name": "panel"
-            }
-          ],
           "slots": [
             {
-              "description": "The default slot holds the panel content displayed when this tab is active. Label, active-state, and disabled-state updates are reported through a private coordination event consumed by the parent tab group.",
+              "description": "The label text for the switch. In default mode this renders beside the track; in text mode it is visually hidden and included in the control's accessible label.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "label",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "internals",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "formCtrl",
+              "privacy": "private",
+              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => (this.checked ? this.value || \"on\" : null), getValidity: () => { if (this.required && !this.checked) { return { flags: { valueMissing: true }, message: this.requiredMessage || \"Please toggle this switch to continue.\", }; } return null; }, onReset: () => { this.checked = false; }, onRestore: (state: string) => { this.checked = state === \"on\" || state === this.value; }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
+            },
+            {
+              "kind": "field",
+              "name": "formItemDescription",
+              "privacy": "private",
+              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".switch-control\"), })"
+            },
+            {
+              "kind": "field",
+              "name": "mode",
+              "type": {
+                "text": "\"switch\" | \"text\""
+              },
+              "privacy": "public",
+              "default": "\"switch\"",
+              "description": "The visual presentation of the switch.\n- `\"switch\"` (default) renders a track-and-thumb toggle.\n- `\"text\"` renders two side-by-side text labels with a\n  sliding highlight behind the active one.",
+              "attribute": "mode",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "offLabel",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "The text displayed in the tab button within the tab strip.",
-              "attribute": "label"
+              "description": "Label shown for the unchecked (off) state when\n`mode=\"text\"`.",
+              "attribute": "off-label"
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "onLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Label shown for the checked (on) state when\n`mode=\"text\"`.",
+              "attribute": "on-label"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Whether this tab is currently active (its panel is visible).",
-              "attribute": "active",
+              "description": "Whether the switch is in the on state.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The name used when the switch participates in a `<form>`.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "When true, the switch must be on before the form can\nbe submitted.",
+              "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "requiredMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "A custom message to display when the switch is required but\nnot on. Defaults to `\"Please toggle this switch to continue.\"`\nwhen not set.\n\n```html\n<esp-switch required required-message=\"You must accept the terms.\">\n  I accept\n</esp-switch>\n```",
+              "attribute": "required-message"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -86833,10 +86663,156 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Whether this tab is disabled (cannot be selected).",
+              "description": "Controls whether the switch is disabled.",
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focus the switch control."
+            },
+            {
+              "kind": "method",
+              "name": "validate",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Re-run constraint validation and dispatch `esp-validity-changed`."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Check whether the current state is valid (delegates to ElementInternals)."
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLabelSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentTextModeLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getTextModeAriaLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called by the browser when the owning `<form>` is reset."
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Called by the browser to restore form state (bfcache, etc.)."
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "isDisabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
+            },
             {
               "kind": "field",
               "name": "seedColorBacker",
@@ -87562,25 +87538,94 @@
               }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<{ checked: boolean; value: string }>"
+              },
+              "description": "Fired when the switch is toggled. The detail contains the new `checked` state and the switch `value`.",
+              "name": "esp-value-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{ valid: boolean; message: string }>"
+              },
+              "description": "Fired whenever constraint validation runs.",
+              "name": "esp-validity-changed"
+            }
+          ],
           "attributes": [
             {
-              "name": "label",
+              "name": "mode",
+              "type": {
+                "text": "\"switch\" | \"text\""
+              },
+              "default": "\"switch\"",
+              "description": "The visual presentation of the switch.\n- `\"switch\"` (default) renders a track-and-thumb toggle.\n- `\"text\"` renders two side-by-side text labels with a\n  sliding highlight behind the active one.",
+              "fieldName": "mode"
+            },
+            {
+              "name": "off-label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The text displayed in the tab button within the tab strip.",
-              "fieldName": "label"
+              "description": "Label shown for the unchecked (off) state when\n`mode=\"text\"`.",
+              "fieldName": "offLabel"
             },
             {
-              "name": "active",
+              "name": "on-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Label shown for the checked (on) state when\n`mode=\"text\"`.",
+              "fieldName": "onLabel"
+            },
+            {
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this tab is currently active (its panel is visible).",
-              "fieldName": "active"
+              "description": "Whether the switch is in the on state.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
+              "fieldName": "value"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name used when the switch participates in a `<form>`.",
+              "fieldName": "name"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the switch must be on before the form can\nbe submitted.",
+              "fieldName": "required"
+            },
+            {
+              "name": "required-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "A custom message to display when the switch is required but\nnot on. Defaults to `\"Please toggle this switch to continue.\"`\nwhen not set.\n\n```html\n<esp-switch required required-message=\"You must accept the terms.\">\n  I accept\n</esp-switch>\n```",
+              "fieldName": "requiredMessage"
             },
             {
               "name": "disabled",
@@ -87588,7 +87633,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this tab is disabled (cannot be selected).",
+              "description": "Controls whether the switch is disabled.",
               "fieldName": "disabled"
             },
             {
@@ -87633,37 +87678,45 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
-          "tagName": "esp-tab",
-          "customElement": true,
           "docPageTitle": {
-            "name": "Tab",
+            "name": "Switch",
             "description": ""
           },
           "docUrl": {
-            "name": "/components/tabs/tab",
+            "name": "/components/switch",
             "description": ""
           },
           "menuGroup": {
-            "name": "Navigation",
+            "name": "Form",
+            "description": "Controls"
+          },
+          "menuLabel": {
+            "name": "Switch",
             "description": ""
-          }
+          },
+          "menuIcon": {
+            "name": "button",
+            "description": ""
+          },
+          "tagName": "esp-switch",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierTab",
+          "name": "EspalierSwitch",
           "declaration": {
-            "name": "EspalierTab",
-            "module": "dist/tabs/esp-tab.js"
+            "name": "EspalierSwitch",
+            "module": "dist/switch/esp-switch.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-tab",
+          "name": "esp-switch",
           "declaration": {
-            "name": "EspalierTab",
-            "module": "dist/tabs/esp-tab.js"
+            "name": "EspalierSwitch",
+            "module": "dist/switch/esp-switch.js"
           }
         }
       ]