@taprootio/espalier 6.3.0 → 6.4.0

package/custom-elements.json

@@ -7716,7 +7716,7 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box>\n  <h2>Box things</h2>\n  <esp-box>\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"esp-clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```",
+              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box>\n  <h2>Box things</h2>\n  <esp-box>\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"esp-clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```\n\nA full-screen box fills the viewport. Inside a\n[bounded dialog](/components/dialog) it fills exactly the dialog's\nrectangle instead: it takes its position and size from the same\n`--esp-dialog-inset-*` custom properties, set on the `esp-dialog` or any\nancestor of the box.\n\n```html\n<style>\n  esp-dialog.bounded-box {\n    --esp-dialog-inset-block-start: 6rem;\n    --esp-dialog-inset-inline-start: 3rem;\n    --esp-dialog-inset-inline-end: 3rem;\n    --esp-dialog-inset-block-end: 2rem;\n  }\n</style>\n<esp-dialog class=\"bounded-box\" full-screen>\n  <esp-box full-screen>\n    <h2>Box in a bounded dialog</h2>\n    <p>This box fills the rectangle the dialog is bounded to.</p>\n    <esp-button intent=\"danger\" label=\"Close\"></esp-button>\n  </esp-box>\n</esp-dialog>\n<esp-button label=\"Show Dialog\"></esp-button>\n<script>\n  const theDialog = findByTagName(\"esp-dialog\")[0];\n  const buttons = findByTagName(\"esp-button\");\n  buttons[0].addEventListener(\"esp-clicked\", () => {\n    theDialog.toggleOpen();\n  });\n  buttons[1].addEventListener(\"esp-clicked\", () => {\n    theDialog.toggleOpen();\n  });\n</script>\n```",
               "attribute": "full-screen"
             },
             {
@@ -8451,7 +8451,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box>\n  <h2>Box things</h2>\n  <esp-box>\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"esp-clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```",
+              "description": "Whether the box should take up the full screen. Useful when\ndisplaying a dialog in full-screen mode.\n\n```html\n<esp-box>\n  <h2>Box things</h2>\n  <esp-box>\n    <h2>Box in box</h2>\n    <esp-button label=\"Toggle full screen\"></esp-button>\n  </esp-box>\n</esp-box>\n<script>\n  let fullScreen = false;\n  const theBox = findByTagName(\"esp-box\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"esp-clicked\", () => {\n    fullScreen = !fullScreen;\n\n    if(fullScreen) {\n      theBox.setAttribute(\"full-screen\", true);\n    } else {\n      theBox.removeAttribute(\"full-screen\");\n    }\n  });\n</script>\n```\n\nA full-screen box fills the viewport. Inside a\n[bounded dialog](/components/dialog) it fills exactly the dialog's\nrectangle instead: it takes its position and size from the same\n`--esp-dialog-inset-*` custom properties, set on the `esp-dialog` or any\nancestor of the box.\n\n```html\n<style>\n  esp-dialog.bounded-box {\n    --esp-dialog-inset-block-start: 6rem;\n    --esp-dialog-inset-inline-start: 3rem;\n    --esp-dialog-inset-inline-end: 3rem;\n    --esp-dialog-inset-block-end: 2rem;\n  }\n</style>\n<esp-dialog class=\"bounded-box\" full-screen>\n  <esp-box full-screen>\n    <h2>Box in a bounded dialog</h2>\n    <p>This box fills the rectangle the dialog is bounded to.</p>\n    <esp-button intent=\"danger\" label=\"Close\"></esp-button>\n  </esp-box>\n</esp-dialog>\n<esp-button label=\"Show Dialog\"></esp-button>\n<script>\n  const theDialog = findByTagName(\"esp-dialog\")[0];\n  const buttons = findByTagName(\"esp-button\");\n  buttons[0].addEventListener(\"esp-clicked\", () => {\n    theDialog.toggleOpen();\n  });\n  buttons[1].addEventListener(\"esp-clicked\", () => {\n    theDialog.toggleOpen();\n  });\n</script>\n```",
               "fieldName": "fullScreen"
             },
             {
@@ -19417,7 +19417,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Shows content in a modal dialog. By default, on large screens the\ndialog content is centered horizontally near the top of the\nscreen. On small screens, the content always tries to take up\nthe full screen width.\n\nA field fills one layer above the surface it sits on.\nUse `surface-layer=\"1|2|3|4\"` to select the default painted layer.\n\nWhen opened, the dialog:\n- Moves focus to the first `[autofocus]` element inside the slotted\n  content, then the first focusable element (or the dialog container\n  itself if none is found).\n- Traps focus so that `Tab` and `Shift+Tab` cycle only through\n  elements inside the dialog.\n- Closes when the user presses `Escape`.\n- Marks all sibling content as `inert` to prevent screen reader\n  and keyboard access to the page behind the overlay.\n- Restores focus to the element that was focused before the\n  dialog was opened.",
+          "description": "Shows content in a modal dialog. By default, on large screens the\ndialog content is centered horizontally near the top of the\nscreen. On small screens, the content always tries to take up\nthe full screen width.\n\nA field fills one layer above the surface it sits on.\nUse `surface-layer=\"1|2|3|4\"` to select the default painted layer.\n\nWhen opened, the dialog:\n- Moves focus to the first `[autofocus]` element inside the slotted\n  content, then the first focusable element (or the dialog container\n  itself if none is found).\n- Traps focus so that `Tab` and `Shift+Tab` cycle only through\n  elements inside the dialog.\n- Closes when the user presses `Escape`.\n- Marks all sibling content as `inert` to prevent screen reader\n  and keyboard access to the page behind the overlay.\n- Restores focus to the element that was focused before the\n  dialog was opened.\n\n### Bounded dialog\n\nA dialog covers the whole viewport by default. Set the four inset custom\nproperties on the `esp-dialog` host to confine it to a rectangle and leave\nthe rest of the page visible, for example to keep a header or a live preview\non screen while a full-screen editor is open. The vellum (the dialog's\nscrolling surface) and its backdrop paint only inside the rectangle, and a\nslotted `esp-box full-screen` fills exactly that rectangle.\n\nThe insets are lengths (`0px`, `4rem`, `var(--header-height)`), not unitless\nnumbers, and they are measured from the viewport edges. They are logical, so\n\"inline start\" is the left edge in left-to-right text and the right edge in\nright-to-left text. Because custom properties inherit, a dialog nested inside\na bounded dialog's markup is bounded the same way unless it sets its own\ninsets.\n\nBounds change only where the dialog paints. What stays reachable is decided\nby the same rules as an unbounded dialog:\n\n- The dialog has no click-outside dismissal, bounded or not. It closes on\n  `Escape`, an `esp-form-dialog-close-requested` event, or `toggleOpen()`, so\n  a click on the uncovered region never counts as an \"outside\" click.\n- The dialog marks `inert` the siblings of its anchor element, not the\n  regions its bounds leave uncovered. The anchor is `esp-page`'s dialog drop\n  zone when the dialog sits in the page's markup, so there the page's\n  internal tracks (header, menus, preview, help, footer) are inert and not\n  clickable even where the dialog does not cover them. A dialog that is a\n  direct child of another component's shadow root is anchored on the nearest\n  ancestor host that has a light-DOM parent, and only that host's siblings\n  go inert; the page around it stays live. A dialog wrapped in an element\n  inside that shadow root is anchored on itself, so its siblings in the\n  wrapper go inert instead.\n- A region that is not inert receives clicks and keyboard focus. The focus\n  trap wraps `Tab` and `Shift+Tab` at the dialog's first and last focusable\n  elements, and `Escape` is handled on the dialog, both only while focus is\n  inside it. A click on an uncovered control moves focus there, and from then\n  on `Tab` continues through the page and `Escape` no longer closes the\n  dialog. Set `inert` on the uncovered regions that must not be reachable\n  while the dialog is open (an inert region is also skipped by screen\n  readers).\n- Bounds assume a horizontal writing mode: the insets are logical, but the\n  dialog's width and height are physical.\n\n```html\n<style>\n  esp-dialog.bounded {\n    --esp-dialog-inset-block-start: 6rem;\n    --esp-dialog-inset-inline-start: 3rem;\n    --esp-dialog-inset-inline-end: 3rem;\n    --esp-dialog-inset-block-end: 2rem;\n  }\n</style>\n<esp-dialog class=\"bounded\" full-screen>\n  <esp-box full-screen>\n    <h2>Bounded dialog</h2>\n    <p>The page above and around this box stays visible.</p>\n    <esp-button intent=\"danger\" label=\"Close\"></esp-button>\n  </esp-box>\n</esp-dialog>\n<esp-button label=\"Show Dialog\"></esp-button>\n<script>\n  const theDialog = findByTagName(\"esp-dialog\")[0];\n  const buttons = findByTagName(\"esp-button\");\n  buttons[0].addEventListener(\"esp-clicked\", () => {\n    theDialog.toggleOpen();\n  });\n  buttons[1].addEventListener(\"esp-clicked\", () => {\n    theDialog.toggleOpen();\n  });\n</script>\n```",
           "name": "EspalierDialog",
           "cssProperties": [
             {
@@ -19427,6 +19427,22 @@
             {
               "description": "The opacity of the dialog overlay background.",
               "name": "--esp-dialog-bg-opacity"
+            },
+            {
+              "description": "The top edge of the area the dialog covers, as a length from the viewport top. Defaults to `0px`.",
+              "name": "--esp-dialog-inset-block-start"
+            },
+            {
+              "description": "The leading edge (left in left-to-right text) of the area the dialog covers, as a length from the viewport edge. Defaults to `0px`.",
+              "name": "--esp-dialog-inset-inline-start"
+            },
+            {
+              "description": "The trailing edge (right in left-to-right text) of the area the dialog covers, as a length from the viewport edge. Defaults to `0px`.",
+              "name": "--esp-dialog-inset-inline-end"
+            },
+            {
+              "description": "The bottom edge of the area the dialog covers, as a length from the viewport bottom. Defaults to `0px`.",
+              "name": "--esp-dialog-inset-block-end"
             }
           ],
           "slots": [
@@ -86617,60 +86633,40 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/switch/esp-switch.js",
+      "path": "dist/tabs/esp-tab-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "An on/off switch for settings that take effect immediately. Use a\ncheckbox when the choice should be applied with a later form submission.\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\nA field fills one layer above the surface it sits on.\nUse `surface-layer=\"1|2|3|4\"` to select the default painted layer.\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 one layer above the nearest declared surface, capped at `var(--esp-color-layer-4)`, or `var(--esp-color-layer-2)` without a declared surface. An explicit override wins.",
@@ -86729,194 +86725,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",
@@ -86938,7 +86848,7 @@
             },
             {
               "kind": "method",
-              "name": "handleLabelSlotChange",
+              "name": "handleChildUpdated",
               "privacy": "private",
               "return": {
                 "type": {
@@ -86948,69 +86858,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",
@@ -87740,99 +87594,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"
             },
             {
@@ -87888,84 +87663,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\nA field fills one layer above the surface it sits on.\nUse `surface-layer=\"1|2|3|4\"` to select the default painted layer.\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"
             },
             {
@@ -88027,144 +87778,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",
@@ -88891,23 +88549,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"
             },
             {
@@ -88963,61 +88631,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": "An on/off switch for settings that take effect immediately. Use a\ncheckbox when the choice should be applied with a later form submission.\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 one layer above the nearest declared surface, capped at `var(--esp-color-layer-4)`, or `var(--esp-color-layer-2)` without a declared surface. An explicit override wins.",
@@ -89076,42 +88780,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",
@@ -89120,10 +88913,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",
@@ -89849,25 +89788,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",
@@ -89875,7 +89883,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this tab is disabled (cannot be selected).",
+              "description": "Controls whether the switch is disabled.",
               "fieldName": "disabled"
             },
             {
@@ -89931,37 +89939,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"
           }
         }
       ]