@taprootio/espalier 4.15.0 → 4.16.0

package/custom-elements.json

@@ -8499,12 +8499,24 @@
           "name": "EspalierBreadcrumb",
           "cssProperties": [
             {
-              "description": "The text color of the breadcrumb link.",
+              "description": "The text color of the breadcrumb link. Defaults to `var(--esp-color-link)`, so a trail reads as navigation in the same ink as the links in the surrounding content.",
               "name": "--esp-breadcrumb-color"
             },
             {
-              "description": "The text color on hover.",
+              "description": "The text color on hover. Defaults to `var(--esp-color-link-hover)`.",
               "name": "--esp-breadcrumb-hover-color"
+            },
+            {
+              "description": "The background behind a hovered link. Defaults to `var(--esp-color-link-hover-bg)`.",
+              "name": "--esp-breadcrumb-hover-background"
+            },
+            {
+              "description": "The text color of the current-page crumb, which is not a link. Defaults to `--esp-breadcrumb-color` when that is set, then to `var(--esp-color-headings)`, keeping the current page distinct from the links beside it.",
+              "name": "--esp-breadcrumb-current-color"
+            },
+            {
+              "description": "The color of the separator icons. Defaults to `oklch(from var(--esp-color-link) l c calc(h + 90))`, an accent that takes the link ink's scheme-adapted lightness and chroma at a different hue, so the arrows are their own color rather than the heading color. Set it on `esp-breadcrumbs` to recolor a whole trail, or on one `esp-breadcrumb` to recolor a single arrow.",
+              "name": "--esp-breadcrumb-separator-color"
             }
           ],
           "members": [
@@ -8549,13 +8561,14 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Used internally to render the item using a label\ninstead of a link.",
+              "description": "Marks this crumb as the end of the trail. The parent\n`esp-breadcrumbs` sets it to pick the down-arrow separator and\nthe current-crumb styling. It does not decide link versus label —\na crumb that carries a `url` stays clickable wherever it sits, so\na trail can end at its deepest folder.",
               "attribute": "is-last-element"
             },
             {
               "kind": "method",
               "name": "_renderLink",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "A crumb points somewhere or it is the current page. Only the\nlatter renders as a label.\n\nThis replaced an older rule where the *last* crumb was always a\nlabel regardless of its `url`, so the same markup can render\ndifferently than it did before 4.16.0. That shipped as a minor\nbump on purpose, and reviewers have asked about it: the public\nsurface is additive — no property, attribute, event, slot, or\ncustom property was removed or renamed — and the previous\nrendering stays reachable by omitting `url`, which is what a\ncurrent-page crumb should do anyway. See ESP0215 for the full\nrationale before re-litigating it."
             }
           ],
           "attributes": [
@@ -8592,7 +8605,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Used internally to render the item using a label\ninstead of a link.",
+              "description": "Marks this crumb as the end of the trail. The parent\n`esp-breadcrumbs` sets it to pick the down-arrow separator and\nthe current-crumb styling. It does not decide link versus label —\na crumb that carries a `url` stays clickable wherever it sits, so\na trail can end at its deepest folder.",
               "fieldName": "isLastElement"
             }
           ],
@@ -8641,11 +8654,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Used to display breadcrumb navigation. By default, the breadcrumbs\nwill be separated by right-arrows, with the final item having a\ndown-arrow after it.\n[esp-breadcrumb](/components/breadcrumbs/breadcrumb) instances\nshould be placed in the default slot to build out the navigation.\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"></esp-breadcrumb>\n</esp-breadcrumbs>\n```\n\nCustom separators can be specified in the `<esp-breadcrumb>`:\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\">\n  </esp-breadcrumb>\n</esp-breadcrumbs>\n```",
+          "description": "Used to display breadcrumb navigation. By default, the breadcrumbs\nwill be separated by right-arrows, with the final item having a\ndown-arrow after it.\n[esp-breadcrumb](/components/breadcrumbs/breadcrumb) instances\nshould be placed in the default slot to build out the navigation.\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"></esp-breadcrumb>\n</esp-breadcrumbs>\n```\n\nEvery crumb with a `url` is a link, including the last one — a trail\nmay end at the deepest folder rather than at the current page. Leave\n`url` off a crumb to render it as the italic current-page label:\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"Code\" url=\"/code\"></esp-breadcrumb>\n  <esp-breadcrumb label=\"This page\"></esp-breadcrumb>\n</esp-breadcrumbs>\n```\n\nCustom separators can be specified in the `<esp-breadcrumb>`:\n\n```html\n<esp-breadcrumbs>\n  <esp-breadcrumb label=\"One\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Two\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\">\n  </esp-breadcrumb>\n  <esp-breadcrumb label=\"Three\" url=\"#\"\n    separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\">\n  </esp-breadcrumb>\n</esp-breadcrumbs>\n```",
           "name": "EspalierBreadcrumbs",
           "cssProperties": [
             {
-              "description": "Set the color of the separator. It defaults to the semantic heading color so navigation structure stays visible in light and dark themes. ```html <style> esp-breadcrumbs#custom-crumb { --esp-breadcrumb-separator-color: red; } </style> <esp-breadcrumbs id=\"custom-crumb\"> <esp-breadcrumb label=\"One\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Two\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Three\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\"> </esp-breadcrumb> </esp-breadcrumbs> ```",
+              "description": "The color of the separator icons. Defaults to `oklch(from var(--esp-color-link) l c calc(h + 90))`, an accent that takes the link ink's scheme-adapted lightness and chroma at a different hue, so the arrows are their own color rather than the heading color. Set it on `esp-breadcrumbs` to recolor a whole trail, or on one `esp-breadcrumb` to recolor a single arrow. ```html <style> esp-breadcrumbs#custom-crumb { --esp-breadcrumb-separator-color: red; } </style> <esp-breadcrumbs id=\"custom-crumb\"> <esp-breadcrumb label=\"One\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Two\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#rocket' /></svg>\"> </esp-breadcrumb> <esp-breadcrumb label=\"Three\" url=\"#\" separator=\"<svg><use href='/assets/icons.svg#flower' /></svg>\"> </esp-breadcrumb> </esp-breadcrumbs> ```",
               "name": "--esp-breadcrumb-separator-color"
             },
             {
@@ -8717,6 +8730,17 @@
               "name": "itemsSlot",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "assignSeparators",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Point every crumb's arrow at the next one and mark the end of the\ntrail.\n\n`isLastElement` is set for every crumb, including one that supplies\nits own separator — that flag drives the current-crumb styling, not\njust the arrow, so skipping it left a custom-separator crumb unable\nto end a trail. Only the arrow itself defers to a custom separator.\n\nA crumb already carrying one of the two arrows below is one this\nelement wrote, so re-pointing it is safe; anything else is the\nconsumer's and is left alone, whenever they set it.\n\nThe emptiness test is a truthiness check rather than a length: Lit\nsets a `type: String` property to `null` when its attribute is\nremoved, and reading `.length` off that throws — reachable as soon\nas this runs again on a slot change."
+            },
             {
               "kind": "field",
               "name": "seedColorBacker",
@@ -84934,60 +84958,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)`.",
@@ -85046,194 +85050,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",
@@ -85255,7 +85173,7 @@
             },
             {
               "kind": "method",
-              "name": "handleLabelSlotChange",
+              "name": "handleChildUpdated",
               "privacy": "private",
               "return": {
                 "type": {
@@ -85265,69 +85183,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",
@@ -86057,99 +85919,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"
             },
             {
@@ -86194,84 +85977,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"
             },
             {
@@ -86333,144 +86092,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",
@@ -87197,23 +86863,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"
             },
             {
@@ -87258,61 +86934,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)`.",
@@ -87371,42 +87083,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",
@@ -87415,10 +87216,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",
@@ -88144,25 +88091,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",
@@ -88170,7 +88186,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this tab is disabled (cannot be selected).",
+              "description": "Controls whether the switch is disabled.",
               "fieldName": "disabled"
             },
             {
@@ -88215,37 +88231,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"
           }
         }
       ]
@@ -96800,307 +96824,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/compute-semantic-properties.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "computeSemanticProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            },
-            {
-              "name": "variants",
-              "type": {
-                "text": "Record<ColorSource, OklchColor>"
-              }
-            },
-            {
-              "name": "options",
-              "default": "{}",
-              "type": {
-                "text": "ComputeSemanticPropertiesOptions"
-              }
-            }
-          ],
-          "description": "Derive the complete twenty-three-token semantic table for a resolved theme.\n\nRoot output, context scopes, and intent overlays all use\nthis function so their APCA pairings cannot drift apart."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "computeSemanticProperties",
-          "declaration": {
-            "name": "computeSemanticProperties",
-            "module": "dist/root/helpers/compute-semantic-properties.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/compute-theme-properties.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "dataSeriesProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            },
-            {
-              "name": "seed",
-              "type": {
-                "text": "OklchColor"
-              }
-            },
-            {
-              "name": "resolve",
-              "type": {
-                "text": "(source: unknown, label: string) => string"
-              }
-            },
-            {
-              "description": "Optional sink for the theme fit report (ESP0163). When\nsupplied, each semantic derivation is appended as it is emitted —\nthe emitted value read back out of the property record, and the\npre-enforcement value taken from the derivation itself — so a report\ndescribes this run rather than re-deriving it. When omitted the\npipeline does no reporting work at all.",
-              "name": "trace"
-            }
-          ],
-          "description": "Emit the categorical series identities from a theme's data palette.\n\nShared between the root emission and the zone-table path (the zone\ncompanions need the identities without re-emitting them), so the two\ncan never resolve a palette differently."
-        },
-        {
-          "kind": "function",
-          "name": "computeThemeProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            },
-            {
-              "name": "scheme",
-              "type": {
-                "text": "\"light\" | \"dark\""
-              }
-            },
-            {
-              "name": "trace",
-              "optional": true,
-              "type": {
-                "text": "ThemeFitTraceEntry[]"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "dataSeriesProperties",
-          "declaration": {
-            "name": "dataSeriesProperties",
-            "module": "dist/root/helpers/compute-theme-properties.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "computeThemeProperties",
-          "declaration": {
-            "name": "computeThemeProperties",
-            "module": "dist/root/helpers/compute-theme-properties.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/compute-variants.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "computeVariants",
-          "declaration": {
-            "name": "computeVariants",
-            "module": "../../shared/variant-engine.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "resolveMappingSource",
-          "declaration": {
-            "name": "resolveMappingSource",
-            "module": "../../shared/variant-engine.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/data-companion-properties.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "DATA_WASH_SERIES_SHARE",
-          "type": {
-            "text": "number"
-          },
-          "default": "0.75",
-          "description": "The series' share of the wash mix — the documented fill recipe."
-        },
-        {
-          "kind": "variable",
-          "name": "DATA_TINT_SERIES_SHARE",
-          "type": {
-            "text": "number"
-          },
-          "default": "0.12",
-          "description": "The series' share of the subtle tint mix behind ordinary copy."
-        },
-        {
-          "kind": "function",
-          "name": "dataCompanionProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "properties",
-              "type": {
-                "text": "Record<string, string>"
-              }
-            },
-            {
-              "name": "inheritedSeries",
-              "optional": true,
-              "type": {
-                "text": "Record<string, string>"
-              }
-            }
-          ],
-          "description": "Compute the wash, tint, and ink companions for every series token\npresent in an emitted property table, against that table's own background.\n\nReads the *emitted* strings — the same read-back principle as the fit\nreport — so a companion can never disagree with the identity token or\nthe background it composes with. Zone tables pass their own table and\nget zone-correct companions; tables without series tokens (a zone\ntable, which inherits the root's identities) take them from\n`inheritedSeries`, the root-emitted table."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DATA_WASH_SERIES_SHARE",
-          "declaration": {
-            "name": "DATA_WASH_SERIES_SHARE",
-            "module": "dist/root/helpers/data-companion-properties.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DATA_TINT_SERIES_SHARE",
-          "declaration": {
-            "name": "DATA_TINT_SERIES_SHARE",
-            "module": "dist/root/helpers/data-companion-properties.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "dataCompanionProperties",
-          "declaration": {
-            "name": "dataCompanionProperties",
-            "module": "dist/root/helpers/data-companion-properties.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/lightness-key-to-css.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "lightnessKeyToCSS",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "key",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Map a camelCase import(\"../../shared/theme.js\").LightnessKey\nto its CSS custom-property name.\n\n```\nraised1 → --esp-l-raised-1\nsurface → --esp-l-surface\n```"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "lightnessKeyToCSS",
-          "declaration": {
-            "name": "lightnessKeyToCSS",
-            "module": "dist/root/helpers/lightness-key-to-css.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/lightness-ramp-properties.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "lightnessRampProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            }
-          ],
-          "description": "The `--esp-l-*` ramp custom properties for a theme, in the percentage\nformat consumers expect inside relative color syntax — for example\n`oklch(from var(--esp-color-danger) var(--esp-l-raised-2) c h)`.\n\nEmitted by `<esp-root>` for the page and re-emitted by context zones\nfrom their merged theme, so ramp-derived styling — the `.intent-*`\nsurface classes, component chrome — re-derives against the zone's\nactual ramp instead of the root's. Without the zone emission a dark\nzone's class-styled chrome mixes provenance: a surface placed by the\nroot's light ramp under ink drawn from the zone's dark-surface table."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "lightnessRampProperties",
-          "declaration": {
-            "name": "lightnessRampProperties",
-            "module": "dist/root/helpers/lightness-ramp-properties.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/shared/svgs/calendar-icon.js",
@@ -97500,6 +97223,307 @@
           }
         }
       ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/compute-semantic-properties.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "computeSemanticProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            },
+            {
+              "name": "variants",
+              "type": {
+                "text": "Record<ColorSource, OklchColor>"
+              }
+            },
+            {
+              "name": "options",
+              "default": "{}",
+              "type": {
+                "text": "ComputeSemanticPropertiesOptions"
+              }
+            }
+          ],
+          "description": "Derive the complete twenty-three-token semantic table for a resolved theme.\n\nRoot output, context scopes, and intent overlays all use\nthis function so their APCA pairings cannot drift apart."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "computeSemanticProperties",
+          "declaration": {
+            "name": "computeSemanticProperties",
+            "module": "dist/root/helpers/compute-semantic-properties.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/compute-theme-properties.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "dataSeriesProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            },
+            {
+              "name": "seed",
+              "type": {
+                "text": "OklchColor"
+              }
+            },
+            {
+              "name": "resolve",
+              "type": {
+                "text": "(source: unknown, label: string) => string"
+              }
+            },
+            {
+              "description": "Optional sink for the theme fit report (ESP0163). When\nsupplied, each semantic derivation is appended as it is emitted —\nthe emitted value read back out of the property record, and the\npre-enforcement value taken from the derivation itself — so a report\ndescribes this run rather than re-deriving it. When omitted the\npipeline does no reporting work at all.",
+              "name": "trace"
+            }
+          ],
+          "description": "Emit the categorical series identities from a theme's data palette.\n\nShared between the root emission and the zone-table path (the zone\ncompanions need the identities without re-emitting them), so the two\ncan never resolve a palette differently."
+        },
+        {
+          "kind": "function",
+          "name": "computeThemeProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            },
+            {
+              "name": "scheme",
+              "type": {
+                "text": "\"light\" | \"dark\""
+              }
+            },
+            {
+              "name": "trace",
+              "optional": true,
+              "type": {
+                "text": "ThemeFitTraceEntry[]"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dataSeriesProperties",
+          "declaration": {
+            "name": "dataSeriesProperties",
+            "module": "dist/root/helpers/compute-theme-properties.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "computeThemeProperties",
+          "declaration": {
+            "name": "computeThemeProperties",
+            "module": "dist/root/helpers/compute-theme-properties.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/compute-variants.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "computeVariants",
+          "declaration": {
+            "name": "computeVariants",
+            "module": "../../shared/variant-engine.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveMappingSource",
+          "declaration": {
+            "name": "resolveMappingSource",
+            "module": "../../shared/variant-engine.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/data-companion-properties.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DATA_WASH_SERIES_SHARE",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.75",
+          "description": "The series' share of the wash mix — the documented fill recipe."
+        },
+        {
+          "kind": "variable",
+          "name": "DATA_TINT_SERIES_SHARE",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.12",
+          "description": "The series' share of the subtle tint mix behind ordinary copy."
+        },
+        {
+          "kind": "function",
+          "name": "dataCompanionProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "properties",
+              "type": {
+                "text": "Record<string, string>"
+              }
+            },
+            {
+              "name": "inheritedSeries",
+              "optional": true,
+              "type": {
+                "text": "Record<string, string>"
+              }
+            }
+          ],
+          "description": "Compute the wash, tint, and ink companions for every series token\npresent in an emitted property table, against that table's own background.\n\nReads the *emitted* strings — the same read-back principle as the fit\nreport — so a companion can never disagree with the identity token or\nthe background it composes with. Zone tables pass their own table and\nget zone-correct companions; tables without series tokens (a zone\ntable, which inherits the root's identities) take them from\n`inheritedSeries`, the root-emitted table."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DATA_WASH_SERIES_SHARE",
+          "declaration": {
+            "name": "DATA_WASH_SERIES_SHARE",
+            "module": "dist/root/helpers/data-companion-properties.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DATA_TINT_SERIES_SHARE",
+          "declaration": {
+            "name": "DATA_TINT_SERIES_SHARE",
+            "module": "dist/root/helpers/data-companion-properties.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "dataCompanionProperties",
+          "declaration": {
+            "name": "dataCompanionProperties",
+            "module": "dist/root/helpers/data-companion-properties.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/lightness-key-to-css.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "lightnessKeyToCSS",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "key",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Map a camelCase import(\"../../shared/theme.js\").LightnessKey\nto its CSS custom-property name.\n\n```\nraised1 → --esp-l-raised-1\nsurface → --esp-l-surface\n```"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "lightnessKeyToCSS",
+          "declaration": {
+            "name": "lightnessKeyToCSS",
+            "module": "dist/root/helpers/lightness-key-to-css.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/lightness-ramp-properties.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "lightnessRampProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            }
+          ],
+          "description": "The `--esp-l-*` ramp custom properties for a theme, in the percentage\nformat consumers expect inside relative color syntax — for example\n`oklch(from var(--esp-color-danger) var(--esp-l-raised-2) c h)`.\n\nEmitted by `<esp-root>` for the page and re-emitted by context zones\nfrom their merged theme, so ramp-derived styling — the `.intent-*`\nsurface classes, component chrome — re-derives against the zone's\nactual ramp instead of the root's. Without the zone emission a dark\nzone's class-styled chrome mixes provenance: a surface placed by the\nroot's light ramp under ink drawn from the zone's dark-surface table."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "lightnessRampProperties",
+          "declaration": {
+            "name": "lightnessRampProperties",
+            "module": "dist/root/helpers/lightness-ramp-properties.js"
+          }
+        }
+      ]
     }
   ]
 }