@taprootio/espalier 2.4.0 → 2.5.0

package/custom-elements.json

@@ -18406,7 +18406,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A responsive site footer with structured spaces for branding, feature\nartwork, link groups, supporting actions, and legal or utility content.\nIts background remains full-bleed while its content automatically aligns\nto the surface of a containing [`<esp-page>`](/components/page/).\n\nUse [`<esp-footer-link-group>`](/components/footer/link-group/) children for\nordinary navigation columns. `columns` is a maximum: the grid always drops\ncolumns when they no longer fit.\n\n```html\n<esp-footer\n  brand-logo=\"/assets/favicon.svg\"\n  brand-text=\"Espalier\"\n  brand-href=\"/\"\n  brand-alt=\"Espalier logo\"\n  columns=\"3\">\n  <esp-footer-link-group heading=\"Explore\">\n    <a href=\"/components\">Components</a>\n    <a href=\"/api\">API</a>\n  </esp-footer-link-group>\n  <esp-footer-link-group heading=\"Learn\">\n    <a href=\"/guides/getting-started\">Getting started</a>\n    <a href=\"/guides/styling\">Styling</a>\n  </esp-footer-link-group>\n  <p slot=\"aside\">Themeable web components built on web standards.</p>\n  <div slot=\"bottom\">Copyright 2026 Example Organization</div>\n</esp-footer>\n```\n\nA slotted brand replaces configured branding, while the media slot accepts\na responsive `picture`, native image, or `esp-image`. Media spans the\nsurface-aligned content well; use the decorative background layer for\nedge-to-edge artwork:\n\n```html\n<esp-footer columns=\"4\">\n  <picture slot=\"media\">\n    <source media=\"(prefers-color-scheme: dark)\" srcset=\"/assets/canvas-bg-dark.jpg\" />\n    <img\n      src=\"/assets/canvas-bg.jpg\"\n      alt=\"A colorful floral pattern\"\n      style=\"display: block; width: 100%; height: auto;\" />\n  </picture>\n  <a slot=\"brand\" href=\"/\" aria-label=\"Espalier home\">\n    <img src=\"/assets/espalier-logo.svg\" alt=\"Espalier\" />\n  </a>\n  <esp-footer-link-group heading=\"Product\">\n    <a href=\"/components\">Components</a>\n  </esp-footer-link-group>\n</esp-footer>\n```\n\nDecorative art uses an image layer independent of the base color. The same\nAPI supports a repeating landscape band or one large cover image:\n\n```html\n<style>\n  esp-footer.mountains {\n    --esp-footer-background: oklch(0.48 0.12 145);\n    --esp-footer-background-image-opacity: 0.55;\n    --esp-footer-background-image:\n      linear-gradient(to bottom, transparent 8rem, oklch(0.48 0.12 145)),\n      url(\"/assets/espalier-geometric-texture.png\");\n    --esp-footer-background-repeat: no-repeat, repeat-x;\n    --esp-footer-background-position: 0 0, top;\n    --esp-footer-background-size: 100% 100%, auto 10rem;\n    --esp-footer-padding-block: 6rem;\n  }\n\n  esp-footer.photo {\n    --esp-footer-background: oklch(0.2 0.04 216);\n    --esp-footer-heading-color: white;\n    --esp-footer-background-image:\n      linear-gradient(oklch(0.1 0 0 / 0.55), oklch(0.1 0 0 / 0.55)),\n      url(\"/assets/canvas-bg.jpg\");\n    --esp-footer-background-repeat: no-repeat;\n    --esp-footer-background-position: center;\n    --esp-footer-background-size: cover;\n  }\n</style>\n<esp-footer class=\"mountains\" brand-text=\"Mountain Studio\"></esp-footer>\n<esp-footer class=\"photo\" brand-text=\"Photo Studio\"></esp-footer>\n```\n\nSurface alignment is automatic inside `esp-page`; opt out only when the\nfooter's content should also span the entire bar:\n\n```html\n<esp-page align=\"center\" style=\"--esp-page-max-width: 36rem;\">\n  <main>Surface-aligned page content</main>\n  <esp-footer slot=\"footer\" brand-text=\"Aligned Studio\" columns=\"3\">\n    <esp-footer-link-group heading=\"Explore\">\n      <a href=\"/work\">Work</a>\n      <a href=\"/about\">About</a>\n    </esp-footer-link-group>\n  </esp-footer>\n</esp-page>\n\n<esp-footer full-bleed-content brand-text=\"Full-width Studio\"></esp-footer>\n```",
+          "description": "A responsive site footer with structured spaces for branding, feature\nartwork, link groups, supporting actions, and legal or utility content.\nIts background remains full-bleed while its content automatically aligns\nto the surface of a containing [`<esp-page>`](/components/page/).\n\nUse [`<esp-footer-link-group>`](/components/footer/link-group/) children for\nordinary navigation columns. `columns` is a maximum: the grid always drops\ncolumns when they no longer fit.\n\n```html\n<esp-footer\n  light-brand-logo=\"/assets/logo-light.svg\"\n  dark-brand-logo=\"/assets/logo-dark.svg\"\n  brand-text=\"Espalier\"\n  brand-href=\"/\"\n  brand-alt=\"Espalier logo\"\n  light-brand-color=\"oklch(0.35 0.12 216)\"\n  dark-brand-color=\"oklch(0.9 0.08 216)\"\n  columns=\"3\">\n  <esp-footer-link-group heading=\"Explore\">\n    <a href=\"/components\">Components</a>\n    <a href=\"/api\">API</a>\n  </esp-footer-link-group>\n  <esp-footer-link-group heading=\"Learn\">\n    <a href=\"/guides/getting-started\">Getting started</a>\n    <a href=\"/guides/styling\">Styling</a>\n  </esp-footer-link-group>\n  <p slot=\"aside\">Themeable web components built on web standards.</p>\n  <div slot=\"bottom\">Copyright 2026 Example Organization</div>\n</esp-footer>\n```\n\nA slotted brand replaces configured branding, while the media slot accepts\na responsive `picture`, native image, or `esp-image`. Media spans the\nsurface-aligned content well; use the decorative background layer for\nedge-to-edge artwork:\n\n```html\n<esp-footer columns=\"4\">\n  <picture slot=\"media\">\n    <source media=\"(prefers-color-scheme: dark)\" srcset=\"/assets/canvas-bg-dark.jpg\" />\n    <img\n      src=\"/assets/canvas-bg.jpg\"\n      alt=\"A colorful floral pattern\"\n      style=\"display: block; width: 100%; height: auto;\" />\n  </picture>\n  <a slot=\"brand\" href=\"/\" aria-label=\"Espalier home\">\n    <img src=\"/assets/espalier-logo.svg\" alt=\"Espalier\" />\n  </a>\n  <esp-footer-link-group heading=\"Product\">\n    <a href=\"/components\">Components</a>\n  </esp-footer-link-group>\n</esp-footer>\n```\n\nDecorative art uses an image layer independent of the base color. The same\nAPI supports a repeating landscape band or one large cover image:\n\n```html\n<style>\n  esp-footer.mountains {\n    --esp-footer-background: oklch(0.48 0.12 145);\n    --esp-footer-background-image-opacity: 0.55;\n    --esp-footer-background-image:\n      linear-gradient(to bottom, transparent 8rem, oklch(0.48 0.12 145)),\n      url(\"/assets/espalier-geometric-texture.png\");\n    --esp-footer-background-repeat: no-repeat, repeat-x;\n    --esp-footer-background-position: 0 0, top;\n    --esp-footer-background-size: 100% 100%, auto 10rem;\n    --esp-footer-padding-block: 6rem;\n  }\n\n  esp-footer.photo {\n    --esp-footer-background: oklch(0.2 0.04 216);\n    --esp-footer-heading-color: white;\n    --esp-footer-background-image:\n      linear-gradient(oklch(0.1 0 0 / 0.55), oklch(0.1 0 0 / 0.55)),\n      url(\"/assets/canvas-bg.jpg\");\n    --esp-footer-background-repeat: no-repeat;\n    --esp-footer-background-position: center;\n    --esp-footer-background-size: cover;\n  }\n</style>\n<esp-footer class=\"mountains\" brand-text=\"Mountain Studio\"></esp-footer>\n<esp-footer class=\"photo\" brand-text=\"Photo Studio\"></esp-footer>\n```\n\nSurface alignment is automatic inside `esp-page`; opt out only when the\nfooter's content should also span the entire bar:\n\n```html\n<esp-page align=\"center\" style=\"--esp-page-max-width: 36rem;\">\n  <main>Surface-aligned page content</main>\n  <esp-footer slot=\"footer\" brand-text=\"Aligned Studio\" columns=\"3\">\n    <esp-footer-link-group heading=\"Explore\">\n      <a href=\"/work\">Work</a>\n      <a href=\"/about\">About</a>\n    </esp-footer-link-group>\n  </esp-footer>\n</esp-page>\n\n<esp-footer full-bleed-content brand-text=\"Full-width Studio\"></esp-footer>\n```",
           "name": "EspalierFooter",
           "cssProperties": [
             {
@@ -18654,6 +18654,28 @@
               "description": "Configured brand logo URL used when the `brand` slot is empty.",
               "attribute": "brand-logo"
             },
+            {
+              "kind": "field",
+              "name": "lightBrandLogo",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in light scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "attribute": "light-brand-logo"
+            },
+            {
+              "kind": "field",
+              "name": "darkBrandLogo",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in dark scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "attribute": "dark-brand-logo"
+            },
             {
               "kind": "field",
               "name": "brandHref",
@@ -18676,6 +18698,39 @@
               "description": "Accessible text for a configured logo.",
               "attribute": "brand-alt"
             },
+            {
+              "kind": "field",
+              "name": "brandColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Optional configured brand color. Scheme-specific colors override it;\nwhen all configured colors are empty, `--esp-footer-heading-color`\nremains the fallback.",
+              "attribute": "brand-color"
+            },
+            {
+              "kind": "field",
+              "name": "lightBrandColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand color used in light scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-footer-heading-color`.",
+              "attribute": "light-brand-color"
+            },
+            {
+              "kind": "field",
+              "name": "darkBrandColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand color used in dark scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-footer-heading-color`.",
+              "attribute": "dark-brand-color"
+            },
             {
               "kind": "field",
               "name": "columns",
@@ -19212,6 +19267,24 @@
               "description": "Configured brand logo URL used when the `brand` slot is empty.",
               "fieldName": "brandLogo"
             },
+            {
+              "name": "light-brand-logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in light scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "fieldName": "lightBrandLogo"
+            },
+            {
+              "name": "dark-brand-logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in dark scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "fieldName": "darkBrandLogo"
+            },
             {
               "name": "brand-href",
               "type": {
@@ -19230,6 +19303,33 @@
               "description": "Accessible text for a configured logo.",
               "fieldName": "brandAlt"
             },
+            {
+              "name": "brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Optional configured brand color. Scheme-specific colors override it;\nwhen all configured colors are empty, `--esp-footer-heading-color`\nremains the fallback.",
+              "fieldName": "brandColor"
+            },
+            {
+              "name": "light-brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand color used in light scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-footer-heading-color`.",
+              "fieldName": "lightBrandColor"
+            },
+            {
+              "name": "dark-brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand color used in dark scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-footer-heading-color`.",
+              "fieldName": "darkBrandColor"
+            },
             {
               "name": "columns",
               "type": {
@@ -22578,11 +22678,11 @@
               "name": "brand"
             },
             {
-              "description": "Place site navigation here. The `menu` slot should be populated with an [`<esp-menu>`](/components/menu/) containing [`<esp-menu-item>`](/components/menu/item/) children: ```html <esp-header> <div slot=\"brand\" style=\"background-color: red;\" class=\"header-example\">brand</div> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Mammals\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Reptiles\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Amphibians\" url=\"#\"></esp-menu-item> </esp-menu> <div slot=\"buttons\" style=\"background-color: yellow;\" class=\"header-example\">buttons</div> </esp-header> ``` When there are too many `<esp-menu-item>`s on the screen, a burger button automatically appears that slides the full menu into view. Resize the screen to see the responsive behavior: ```html <esp-header> <div slot=\"brand\" style=\"background-color: red;\" class=\"header-example\">brand</div> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Primates\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Carnivora\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Rodentia\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Chiroptera\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Cetacea\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Artiodactyla\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Perissodactyla\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Lagomorpha\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Sirenia\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Proboscidea\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Marsupialia\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Monotremata\" url=\"#\"></esp-menu-item> </esp-menu> <div slot=\"buttons\" style=\"background-color: yellow;\" class=\"header-example\">buttons</div> </esp-header> ``` Published-site headers can be configured without custom brand markup. Pair `layout`, `menu-display`, `theme-toggle`, and `scroll-behavior` with `esp-page header-position` when the shell should stay fixed or sticky: ```html <esp-page header-position=\"fixed\"> <esp-header slot=\"header\" layout=\"centered-brand\" brand-logo=\"/assets/favicon.svg\" brand-text=\"Espalier\" brand-href=\"/\" brand-alt=\"Espalier logo\" brand-align=\"center\" menu-display=\"auto\" theme-toggle=\"visible\" scroll-behavior=\"compact elevate progress\"> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Shop\" url=\"/shop\"></esp-menu-item> <esp-menu-item label=\"About\" url=\"/about\"></esp-menu-item> </esp-menu> </esp-header> </esp-page> ```",
+              "description": "Place site navigation here. The `menu` slot should be populated with an [`<esp-menu>`](/components/menu/) containing [`<esp-menu-item>`](/components/menu/item/) children: ```html <esp-header> <div slot=\"brand\" style=\"background-color: red;\" class=\"header-example\">brand</div> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Mammals\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Reptiles\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Amphibians\" url=\"#\"></esp-menu-item> </esp-menu> <div slot=\"buttons\" style=\"background-color: yellow;\" class=\"header-example\">buttons</div> </esp-header> ``` When there are too many `<esp-menu-item>`s on the screen, a burger button automatically appears that slides the full menu into view. Resize the screen to see the responsive behavior: ```html <esp-header> <div slot=\"brand\" style=\"background-color: red;\" class=\"header-example\">brand</div> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Primates\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Carnivora\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Rodentia\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Chiroptera\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Cetacea\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Artiodactyla\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Perissodactyla\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Lagomorpha\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Sirenia\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Proboscidea\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Marsupialia\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Monotremata\" url=\"#\"></esp-menu-item> </esp-menu> <div slot=\"buttons\" style=\"background-color: yellow;\" class=\"header-example\">buttons</div> </esp-header> ``` Published-site headers can be configured without custom brand markup. Pair `layout`, `menu-display`, `theme-toggle`, and `scroll-behavior` with `esp-page header-position` when the shell should stay fixed or sticky: ```html <esp-page header-position=\"fixed\"> <esp-header slot=\"header\" layout=\"centered-brand\" light-brand-logo=\"/assets/logo-light.svg\" dark-brand-logo=\"/assets/logo-dark.svg\" brand-text=\"Espalier\" brand-href=\"/\" brand-alt=\"Espalier logo\" light-brand-color=\"oklch(0.35 0.12 216)\" dark-brand-color=\"oklch(0.9 0.08 216)\" brand-align=\"center\" menu-display=\"auto\" theme-toggle=\"visible\" scroll-behavior=\"compact elevate progress\"> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Shop\" url=\"/shop\"></esp-menu-item> <esp-menu-item label=\"About\" url=\"/about\"></esp-menu-item> </esp-menu> </esp-header> </esp-page> ```",
               "name": "menu"
             },
             {
-              "description": "Place icon buttons for global actions here. The `buttons` slot should contain [`<esp-header-button>`](/components/header/button/) instances. Each button can reference the configured SVG sprite with `icon` and fires a `clicked` event when activated: ```html <esp-header> <div slot=\"brand\" style=\"background-color: red;\" class=\"header-example\">brand</div> <esp-menu slot=\"menu\" mode=\"horizontal\" style=\"background-color: green;\"> <esp-menu-item label=\"menu\" url=\"#\"></esp-menu-item> </esp-menu> <esp-header-button slot=\"buttons\" icon=\"cog\" aria-label=\"Settings\"></esp-header-button> <esp-header-button slot=\"buttons\" icon=\"user-circle\" aria-label=\"Profile\"></esp-header-button> </esp-header> ```",
+              "description": "Place icon buttons for global actions here. The `buttons` slot should contain [`<esp-header-button>`](/components/header/button/) instances. Each button can reference the configured SVG sprite with `icon` and fires a `clicked` event when activated: ```html <esp-header> <div slot=\"brand\" style=\"background-color: red;\" class=\"header-example\">brand</div> <esp-menu slot=\"menu\" mode=\"horizontal\" style=\"background-color: green;\"> <esp-menu-item label=\"menu\" url=\"#\"></esp-menu-item> </esp-menu> <esp-header-button slot=\"buttons\" icon=\"cog\" aria-label=\"Settings\"></esp-header-button> <esp-header-button slot=\"buttons\" icon=\"user-circle\" aria-label=\"Profile\"></esp-header-button> </esp-header> ``` The built-in theme toggle emits `esp-theme-toggle` only for a visitor activation, so a host can persist explicit choices without treating automatic scheme resolution as intent: ```js const root = document.querySelector(\"esp-root\"); root.addEventListener(\"esp-theme-toggle\", (event) => { localStorage.setItem(\"scheme\", event.detail.scheme); }); ```",
               "name": "buttons"
             }
           ],
@@ -22659,8 +22759,8 @@
                 "text": "HeaderLayout"
               },
               "privacy": "public",
-              "default": "\"standard\"",
               "description": "Header layout style.\n\n- `standard` places brand, menu, and actions on one row.\n- `centered-brand` centers the brand between left navigation and actions.\n- `extended` puts navigation on a second row on wide screens.\n- `extended-centered` centers the brand and second-row navigation.\n- `minimal` keeps only brand/actions inline and uses the drawer menu.\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-padding);\">\n  <esp-header\n    brand-logo=\"/assets/favicon.svg\"\n    brand-text=\"Espalier\"\n    brand-href=\"#\"\n    brand-alt=\"Espalier logo\"\n    layout=\"standard\"\n    theme-toggle=\"visible\">\n    <esp-menu slot=\"menu\" mode=\"horizontal\">\n      <esp-menu-item label=\"Components\" url=\"#components\"></esp-menu-item>\n      <esp-menu-item label=\"Guides\" url=\"#guides\"></esp-menu-item>\n    </esp-menu>\n  </esp-header>\n\n  <div\n    style=\"\n      display: grid;\n      gap: var(--esp-size-small);\n    \">\n    <esp-form-item label=\"Header layout\">\n      <esp-pick-one>\n        <esp-picker-item text=\"Standard\" value=\"standard\" selected></esp-picker-item>\n        <esp-picker-item text=\"Centered brand\" value=\"centered-brand\"></esp-picker-item>\n        <esp-picker-item text=\"Extended\" value=\"extended\"></esp-picker-item>\n        <esp-picker-item text=\"Extended centered\" value=\"extended-centered\"></esp-picker-item>\n        <esp-picker-item text=\"Minimal\" value=\"minimal\"></esp-picker-item>\n      </esp-pick-one>\n    </esp-form-item>\n  </div>\n</div>\n<script>\n  const header = findByTagName(\"esp-header\")[0];\n  const picker = findByTagName(\"esp-pick-one\")[0];\n\n  function applyLayout(event) {\n    header.layout = event.detail?.value || picker.value || \"standard\";\n  }\n\n  picker.addEventListener(\"value-changed\", applyLayout);\n</script>\n```",
+              "default": "\"standard\"",
               "attribute": "layout",
               "reflects": true
             },
@@ -22686,6 +22786,28 @@
               "description": "Configured brand logo URL used when the `brand` slot is empty.",
               "attribute": "brand-logo"
             },
+            {
+              "kind": "field",
+              "name": "lightBrandLogo",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in light scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "attribute": "light-brand-logo"
+            },
+            {
+              "kind": "field",
+              "name": "darkBrandLogo",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in dark scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "attribute": "dark-brand-logo"
+            },
             {
               "kind": "field",
               "name": "brandHref",
@@ -22719,6 +22841,28 @@
               "description": "Optional configured brand color. Prefer theme fields for\nproduct-wide brand typography and this property for a local\nheader override.",
               "attribute": "brand-color"
             },
+            {
+              "kind": "field",
+              "name": "lightBrandColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand color used in light scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
+              "attribute": "light-brand-color"
+            },
+            {
+              "kind": "field",
+              "name": "darkBrandColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Configured brand color used in dark scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
+              "attribute": "dark-brand-color"
+            },
             {
               "kind": "field",
               "name": "brandAlign",
@@ -22726,8 +22870,8 @@
                 "text": "HeaderBrandAlign"
               },
               "privacy": "public",
-              "default": "\"start\"",
               "description": "Horizontal placement of the brand content inside its grid area.",
+              "default": "\"start\"",
               "attribute": "brand-align",
               "reflects": true
             },
@@ -22738,8 +22882,8 @@
                 "text": "HeaderBrandWrap"
               },
               "privacy": "public",
-              "default": "\"truncate\"",
               "description": "Long-brand behavior for configured brand text.",
+              "default": "\"truncate\"",
               "attribute": "brand-wrap",
               "reflects": true
             },
@@ -22750,8 +22894,8 @@
                 "text": "HeaderMenuDisplay"
               },
               "privacy": "public",
-              "default": "\"auto\"",
               "description": "Navigation display intent. `auto` tries inline navigation before\nusing a drawer, `drawer` always uses the burger/drawer pattern,\nand `inline` leaves overflow handling to the slotted menu.",
+              "default": "\"auto\"",
               "attribute": "menu-display",
               "reflects": true
             },
@@ -22762,8 +22906,8 @@
                 "text": "HeaderThemeToggle"
               },
               "privacy": "public",
-              "default": "\"hidden\"",
               "description": "Whether the header renders its built-in light/dark toggle.\nConsumers can still provide their own control in the `buttons`\nslot when this is `hidden`.",
+              "default": "\"hidden\"",
               "attribute": "theme-toggle",
               "reflects": true
             },
@@ -23662,6 +23806,25 @@
               }
             }
           ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<EspThemeToggleEventDetail>"
+              },
+              "description": "Fired after the built-in theme toggle changes the nearest `esp-root`. Bubbles and crosses the shadow boundary.",
+              "name": "esp-theme-toggle"
+            },
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
           "attributes": [
             {
               "name": "show-burger",
@@ -23677,8 +23840,8 @@
               "type": {
                 "text": "HeaderLayout"
               },
-              "default": "\"standard\"",
               "description": "Header layout style.\n\n- `standard` places brand, menu, and actions on one row.\n- `centered-brand` centers the brand between left navigation and actions.\n- `extended` puts navigation on a second row on wide screens.\n- `extended-centered` centers the brand and second-row navigation.\n- `minimal` keeps only brand/actions inline and uses the drawer menu.\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-padding);\">\n  <esp-header\n    brand-logo=\"/assets/favicon.svg\"\n    brand-text=\"Espalier\"\n    brand-href=\"#\"\n    brand-alt=\"Espalier logo\"\n    layout=\"standard\"\n    theme-toggle=\"visible\">\n    <esp-menu slot=\"menu\" mode=\"horizontal\">\n      <esp-menu-item label=\"Components\" url=\"#components\"></esp-menu-item>\n      <esp-menu-item label=\"Guides\" url=\"#guides\"></esp-menu-item>\n    </esp-menu>\n  </esp-header>\n\n  <div\n    style=\"\n      display: grid;\n      gap: var(--esp-size-small);\n    \">\n    <esp-form-item label=\"Header layout\">\n      <esp-pick-one>\n        <esp-picker-item text=\"Standard\" value=\"standard\" selected></esp-picker-item>\n        <esp-picker-item text=\"Centered brand\" value=\"centered-brand\"></esp-picker-item>\n        <esp-picker-item text=\"Extended\" value=\"extended\"></esp-picker-item>\n        <esp-picker-item text=\"Extended centered\" value=\"extended-centered\"></esp-picker-item>\n        <esp-picker-item text=\"Minimal\" value=\"minimal\"></esp-picker-item>\n      </esp-pick-one>\n    </esp-form-item>\n  </div>\n</div>\n<script>\n  const header = findByTagName(\"esp-header\")[0];\n  const picker = findByTagName(\"esp-pick-one\")[0];\n\n  function applyLayout(event) {\n    header.layout = event.detail?.value || picker.value || \"standard\";\n  }\n\n  picker.addEventListener(\"value-changed\", applyLayout);\n</script>\n```",
+              "default": "\"standard\"",
               "fieldName": "layout"
             },
             {
@@ -23699,6 +23862,24 @@
               "description": "Configured brand logo URL used when the `brand` slot is empty.",
               "fieldName": "brandLogo"
             },
+            {
+              "name": "light-brand-logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in light scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "fieldName": "lightBrandLogo"
+            },
+            {
+              "name": "dark-brand-logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in dark scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "fieldName": "darkBrandLogo"
+            },
             {
               "name": "brand-href",
               "type": {
@@ -23726,13 +23907,31 @@
               "description": "Optional configured brand color. Prefer theme fields for\nproduct-wide brand typography and this property for a local\nheader override.",
               "fieldName": "brandColor"
             },
+            {
+              "name": "light-brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand color used in light scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
+              "fieldName": "lightBrandColor"
+            },
+            {
+              "name": "dark-brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand color used in dark scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
+              "fieldName": "darkBrandColor"
+            },
             {
               "name": "brand-align",
               "type": {
                 "text": "HeaderBrandAlign"
               },
-              "default": "\"start\"",
               "description": "Horizontal placement of the brand content inside its grid area.",
+              "default": "\"start\"",
               "fieldName": "brandAlign"
             },
             {
@@ -23740,8 +23939,8 @@
               "type": {
                 "text": "HeaderBrandWrap"
               },
-              "default": "\"truncate\"",
               "description": "Long-brand behavior for configured brand text.",
+              "default": "\"truncate\"",
               "fieldName": "brandWrap"
             },
             {
@@ -23749,8 +23948,8 @@
               "type": {
                 "text": "HeaderMenuDisplay"
               },
-              "default": "\"auto\"",
               "description": "Navigation display intent. `auto` tries inline navigation before\nusing a drawer, `drawer` always uses the burger/drawer pattern,\nand `inline` leaves overflow handling to the slotted menu.",
+              "default": "\"auto\"",
               "fieldName": "menuDisplay"
             },
             {
@@ -23758,8 +23957,8 @@
               "type": {
                 "text": "HeaderThemeToggle"
               },
-              "default": "\"hidden\"",
               "description": "Whether the header renders its built-in light/dark toggle.\nConsumers can still provide their own control in the `buttons`\nslot when this is `hidden`.",
+              "default": "\"hidden\"",
               "fieldName": "themeToggle"
             },
             {
@@ -23858,19 +24057,7 @@
           "menuIcon": {
             "name": "layout-navbar",
             "description": ""
-          },
-          "events": [
-            {
-              "name": "value-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ]
+          }
         }
       ],
       "exports": [
@@ -47039,6 +47226,24 @@
       "kind": "javascript-module",
       "path": "dist/shared/configured-brand.js",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "resolveConfiguredBrand",
+          "return": {
+            "type": {
+              "text": "ResolvedConfiguredBrand"
+            }
+          },
+          "parameters": [
+            {
+              "name": "{\n  scheme,\n  brandLogo,\n  brandColor,\n  lightBrandLogo,\n  darkBrandLogo,\n  lightBrandColor,\n  darkBrandColor,\n}",
+              "type": {
+                "text": "ConfiguredBrandConfiguration"
+              }
+            }
+          ],
+          "description": "Resolve the configured-brand logo and color for the active scheme.\nNon-empty scheme values take precedence over generic values. Empty\nscheme values are treated as absent so generic configuration and the\nconsuming component's CSS-token defaults remain available."
+        },
         {
           "kind": "function",
           "name": "renderConfiguredBrand",
@@ -47054,6 +47259,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "resolveConfiguredBrand",
+          "declaration": {
+            "name": "resolveConfiguredBrand",
+            "module": "dist/shared/configured-brand.js"
+          }
+        },
         {
           "kind": "js",
           "name": "renderConfiguredBrand",
@@ -48231,9 +48444,9 @@
           "kind": "variable",
           "name": "ESP_EVENTS",
           "type": {
-            "text": "{\n  // ── Form value events ───────────────────────────────────────\n  VALUE_CHANGED: \"value-changed\",\n  VALIDITY_CHANGED: \"validity-changed\",\n\n  // ── Click events ────────────────────────────────────────────\n  CLICKED: \"clicked\",\n\n  // ── Form submission events ──────────────────────────────────\n  ESP_SUBMIT: \"esp-submit\",\n  ESP_SUBMIT_RESPONSE: \"esp-submit-response\",\n  ESP_SUBMIT_ERROR: \"esp-submit-error\",\n\n  // ── Navigation / layout events ──────────────────────────────\n  ESP_TAB_CHANGED: \"esp-tab-changed\",\n  ESP_TAB_UPDATED: \"esp-tab-updated\",\n  ESP_TOGGLE: \"esp-toggle\",\n  ESP_ACCORDION_CHANGE: \"esp-accordion-change\",\n  DRAWER_OPENED: \"drawer-opened\",\n  DRAWER_CLOSED: \"drawer-closed\",\n  FLYOUT_OPENED: \"flyout-opened\",\n  FLYOUT_CLOSED: \"flyout-closed\",\n  FLYOUT_STATE_CHANGED: \"flyout-state-changed\",\n\n  // ── Popover DOM events ──────────────────────────────────────\n  POPOVER_OPENED: \"popover-opened\",\n  POPOVER_CLOSED: \"popover-closed\",\n\n  // ── Grid events ─────────────────────────────────────────────\n  GRID_EVENT: \"grid-event\",\n  GRID_LOAD_START: \"esp-grid-load-start\",\n  GRID_LOAD_SUCCESS: \"esp-grid-load-success\",\n  GRID_LOAD_ERROR: \"esp-grid-load-error\",\n  GRID_ITEMS_CHANGED: \"esp-grid-items-changed\",\n\n  // ── Info events ─────────────────────────────────────────────\n  DESTROY: \"destroy\",\n\n  // ── Upload events ───────────────────────────────────────────\n  FILE_SELECTED: \"file-selected\",\n  FILE_REMOVED: \"file-removed\",\n  FILES_SELECTED: \"files-selected\",\n  FILES_REJECTED: \"files-rejected\",\n  UPLOAD_RETRY: \"upload-retry\",\n  RETRY_UPLOAD: \"retry-upload\",\n  IMAGES_REORDERED: \"images-reordered\",\n\n  // ── Search events ───────────────────────────────────────────\n  SEARCH_REQUESTED: \"search-requested\",\n  RESULT_SELECTED: \"result-selected\",\n  SEARCH_CLOSED: \"search-closed\",\n\n  // ── Picker internal events ──────────────────────────────────\n  SELECTION_CHANGED: \"selection-changed\",\n  CLOSE_MENU: \"close-menu\",\n  REMOVE_IMAGE: \"remove-image\",\n}"
+            "text": "{\n  // ── Form value events ───────────────────────────────────────\n  VALUE_CHANGED: \"value-changed\",\n  VALIDITY_CHANGED: \"validity-changed\",\n\n  // ── Click events ────────────────────────────────────────────\n  CLICKED: \"clicked\",\n\n  // ── Form submission events ──────────────────────────────────\n  ESP_SUBMIT: \"esp-submit\",\n  ESP_SUBMIT_RESPONSE: \"esp-submit-response\",\n  ESP_SUBMIT_ERROR: \"esp-submit-error\",\n\n  // ── Navigation / layout events ──────────────────────────────\n  ESP_TAB_CHANGED: \"esp-tab-changed\",\n  ESP_TAB_UPDATED: \"esp-tab-updated\",\n  ESP_TOGGLE: \"esp-toggle\",\n  ESP_ACCORDION_CHANGE: \"esp-accordion-change\",\n  DRAWER_OPENED: \"drawer-opened\",\n  DRAWER_CLOSED: \"drawer-closed\",\n  ESP_THEME_TOGGLE: \"esp-theme-toggle\",\n  FLYOUT_OPENED: \"flyout-opened\",\n  FLYOUT_CLOSED: \"flyout-closed\",\n  FLYOUT_STATE_CHANGED: \"flyout-state-changed\",\n\n  // ── Popover DOM events ──────────────────────────────────────\n  POPOVER_OPENED: \"popover-opened\",\n  POPOVER_CLOSED: \"popover-closed\",\n\n  // ── Grid events ─────────────────────────────────────────────\n  GRID_EVENT: \"grid-event\",\n  GRID_LOAD_START: \"esp-grid-load-start\",\n  GRID_LOAD_SUCCESS: \"esp-grid-load-success\",\n  GRID_LOAD_ERROR: \"esp-grid-load-error\",\n  GRID_ITEMS_CHANGED: \"esp-grid-items-changed\",\n\n  // ── Info events ─────────────────────────────────────────────\n  DESTROY: \"destroy\",\n\n  // ── Upload events ───────────────────────────────────────────\n  FILE_SELECTED: \"file-selected\",\n  FILE_REMOVED: \"file-removed\",\n  FILES_SELECTED: \"files-selected\",\n  FILES_REJECTED: \"files-rejected\",\n  UPLOAD_RETRY: \"upload-retry\",\n  RETRY_UPLOAD: \"retry-upload\",\n  IMAGES_REORDERED: \"images-reordered\",\n\n  // ── Search events ───────────────────────────────────────────\n  SEARCH_REQUESTED: \"search-requested\",\n  RESULT_SELECTED: \"result-selected\",\n  SEARCH_CLOSED: \"search-closed\",\n\n  // ── Picker internal events ──────────────────────────────────\n  SELECTION_CHANGED: \"selection-changed\",\n  CLOSE_MENU: \"close-menu\",\n  REMOVE_IMAGE: \"remove-image\",\n}"
           },
-          "default": "{ // ── Form value events ─────────────────────────────────────── VALUE_CHANGED: \"value-changed\", VALIDITY_CHANGED: \"validity-changed\", // ── Click events ──────────────────────────────────────────── CLICKED: \"clicked\", // ── Form submission events ────────────────────────────────── ESP_SUBMIT: \"esp-submit\", ESP_SUBMIT_RESPONSE: \"esp-submit-response\", ESP_SUBMIT_ERROR: \"esp-submit-error\", // ── Navigation / layout events ────────────────────────────── ESP_TAB_CHANGED: \"esp-tab-changed\", ESP_TAB_UPDATED: \"esp-tab-updated\", ESP_TOGGLE: \"esp-toggle\", ESP_ACCORDION_CHANGE: \"esp-accordion-change\", DRAWER_OPENED: \"drawer-opened\", DRAWER_CLOSED: \"drawer-closed\", FLYOUT_OPENED: \"flyout-opened\", FLYOUT_CLOSED: \"flyout-closed\", FLYOUT_STATE_CHANGED: \"flyout-state-changed\", // ── Popover DOM events ────────────────────────────────────── POPOVER_OPENED: \"popover-opened\", POPOVER_CLOSED: \"popover-closed\", // ── Grid events ───────────────────────────────────────────── GRID_EVENT: \"grid-event\", GRID_LOAD_START: \"esp-grid-load-start\", GRID_LOAD_SUCCESS: \"esp-grid-load-success\", GRID_LOAD_ERROR: \"esp-grid-load-error\", GRID_ITEMS_CHANGED: \"esp-grid-items-changed\", // ── Info events ───────────────────────────────────────────── DESTROY: \"destroy\", // ── Upload events ─────────────────────────────────────────── FILE_SELECTED: \"file-selected\", FILE_REMOVED: \"file-removed\", FILES_SELECTED: \"files-selected\", FILES_REJECTED: \"files-rejected\", UPLOAD_RETRY: \"upload-retry\", RETRY_UPLOAD: \"retry-upload\", IMAGES_REORDERED: \"images-reordered\", // ── Search events ─────────────────────────────────────────── SEARCH_REQUESTED: \"search-requested\", RESULT_SELECTED: \"result-selected\", SEARCH_CLOSED: \"search-closed\", // ── Picker internal events ────────────────────────────────── SELECTION_CHANGED: \"selection-changed\", CLOSE_MENU: \"close-menu\", REMOVE_IMAGE: \"remove-image\", }",
+          "default": "{ // ── Form value events ─────────────────────────────────────── VALUE_CHANGED: \"value-changed\", VALIDITY_CHANGED: \"validity-changed\", // ── Click events ──────────────────────────────────────────── CLICKED: \"clicked\", // ── Form submission events ────────────────────────────────── ESP_SUBMIT: \"esp-submit\", ESP_SUBMIT_RESPONSE: \"esp-submit-response\", ESP_SUBMIT_ERROR: \"esp-submit-error\", // ── Navigation / layout events ────────────────────────────── ESP_TAB_CHANGED: \"esp-tab-changed\", ESP_TAB_UPDATED: \"esp-tab-updated\", ESP_TOGGLE: \"esp-toggle\", ESP_ACCORDION_CHANGE: \"esp-accordion-change\", DRAWER_OPENED: \"drawer-opened\", DRAWER_CLOSED: \"drawer-closed\", ESP_THEME_TOGGLE: \"esp-theme-toggle\", FLYOUT_OPENED: \"flyout-opened\", FLYOUT_CLOSED: \"flyout-closed\", FLYOUT_STATE_CHANGED: \"flyout-state-changed\", // ── Popover DOM events ────────────────────────────────────── POPOVER_OPENED: \"popover-opened\", POPOVER_CLOSED: \"popover-closed\", // ── Grid events ───────────────────────────────────────────── GRID_EVENT: \"grid-event\", GRID_LOAD_START: \"esp-grid-load-start\", GRID_LOAD_SUCCESS: \"esp-grid-load-success\", GRID_LOAD_ERROR: \"esp-grid-load-error\", GRID_ITEMS_CHANGED: \"esp-grid-items-changed\", // ── Info events ───────────────────────────────────────────── DESTROY: \"destroy\", // ── Upload events ─────────────────────────────────────────── FILE_SELECTED: \"file-selected\", FILE_REMOVED: \"file-removed\", FILES_SELECTED: \"files-selected\", FILES_REJECTED: \"files-rejected\", UPLOAD_RETRY: \"upload-retry\", RETRY_UPLOAD: \"retry-upload\", IMAGES_REORDERED: \"images-reordered\", // ── Search events ─────────────────────────────────────────── SEARCH_REQUESTED: \"search-requested\", RESULT_SELECTED: \"result-selected\", SEARCH_CLOSED: \"search-closed\", // ── Picker internal events ────────────────────────────────── SELECTION_CHANGED: \"selection-changed\", CLOSE_MENU: \"close-menu\", REMOVE_IMAGE: \"remove-image\", }",
           "description": "Canonical event name strings for every CustomEvent in the library.\n\nUse these instead of raw strings to catch typos at compile time:\n\n```ts\nel.addEventListener(ESP_EVENTS.VALUE_CHANGED, handler);\n```"
         }
       ],
@@ -48382,6 +48595,14 @@
             "module": "../font-picker/esp-font-picker.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "EspThemeToggleEventDetail",
+          "declaration": {
+            "name": "EspThemeToggleEventDetail",
+            "module": "../header/esp-header.js"
+          }
+        },
         {
           "kind": "js",
           "name": "UploadEventDetail",
@@ -51990,32 +52211,60 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/status-indicator/esp-status-indicator.js",
+      "path": "dist/switch/esp-switch.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A compact, keyboard-accessible status icon that reveals explanatory\ncontent in an `esp-popover` on hover, focus, or tap.\n\n```html\n<esp-status-indicator\n  variant=\"warning\"\n  label=\"Image processing delayed\"\n  placement=\"right\">\n  The image is still queued. It will retry automatically.\n</esp-status-indicator>\n\n<esp-status-indicator variant=\"success\" label=\"Published\">\n  This page is live and visible to visitors.\n</esp-status-indicator>\n```\n\n### Chrome modes\n\nThe `chrome` attribute controls the chip treatment around the icon.\n`pill` (the default) renders the filled circular background, `outline`\nkeeps only the border, and `none` drops both — leaving just the\nvariant-colored icon and its popover affordance. `chrome=\"none\"` is the\nright choice when the indicator sits inside dense metadata rows where\na full pill would feel heavy.\n\n```html\n<esp-box style=\"display: flex; gap: var(--esp-size-normal); align-items: center;\">\n  <esp-status-indicator variant=\"success\" label=\"Pill (default)\">\n    Pill chrome wraps the icon in a filled circle.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"outline\" variant=\"success\" label=\"Outline\">\n    Outline chrome keeps the border but drops the fill.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"none\" variant=\"success\" label=\"None\">\n    None drops the chrome entirely — just the variant-colored icon.\n  </esp-status-indicator>\n</esp-box>\n```\n\n### Wide chip with a non-square SVG\n\nThe built-in `icon` attribute pulls from the Espalier sprite, which is\nauthored for **square** glyphs at the chip's default size. When you\nneed a non-square mark — a file-type badge, a short token of text, a\npill of dimensions — slot your own SVG into the `icon` slot and size\nthe chip through the three CSS hooks: `--esp-status-indicator-width`,\n`--esp-status-indicator-height`, and `--esp-status-indicator-border-radius`.\n\nThe slotted SVG fills the chip, so give it a matching `viewBox` and\nuse `chrome=\"none\"` if you don't want the chip's pill background\nfighting your art.\n\n```html\n<style>\n  .file-type-indicator {\n    --esp-status-indicator-width: calc(var(--esp-size-big-to-large) * 2.5);\n    --esp-status-indicator-height: var(--esp-size-big-to-large);\n    --esp-status-indicator-border-radius: var(--esp-size-border-radius);\n    color: var(--esp-color-link);\n  }\n\n  .file-type-indicator svg text {\n    fill: var(--esp-color-background);\n    font-family: var(--esp-font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-anchor: middle;\n  }\n</style>\n\n<esp-status-indicator\n  class=\"file-type-indicator\"\n  chrome=\"none\"\n  label=\"Original file type\">\n  <svg slot=\"icon\" viewBox=\"0 0 72 32\" aria-hidden=\"true\">\n    <rect x=\"0\" y=\"0\" width=\"72\" height=\"32\" rx=\"6\" ry=\"6\" fill=\"currentColor\"/>\n    <text x=\"36\" y=\"21\">JPG</text>\n  </svg>\n  <strong>Original file type</strong>\n  <p>Uploaded as a JPEG; responsive variants are generated on demand.</p>\n</esp-status-indicator>\n```\n\n### Rich popover content\n\nThe default slot accepts any HTML, not just plain text. Small blocks\nof structured content — a heading, a list of values, a definition\nlist — render inside the popover and are clamped by\n`--esp-status-indicator-popover-max-width` (default `32ch`). Raise the\nhook when the content needs more room.\n\n```html\n<style>\n  .responsive-layers-indicator {\n    --esp-status-indicator-popover-max-width: 24rem;\n  }\n\n  .responsive-layers-indicator ul {\n    margin: var(--esp-size-tiny) 0 0;\n    padding-left: var(--esp-size-normal);\n  }\n</style>\n\n<esp-status-indicator\n  class=\"responsive-layers-indicator\"\n  variant=\"success\"\n  icon=\"layers-intersect\"\n  label=\"Responsive layers ready\">\n  <strong>Responsive layers ready</strong>\n  <ul>\n    <li>320w &mdash; mobile</li>\n    <li>640w &mdash; tablet</li>\n    <li>1280w &mdash; desktop</li>\n    <li>1920w &mdash; large desktop</li>\n  </ul>\n</esp-status-indicator>\n```",
-          "name": "EspalierStatusIndicator",
+          "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": "Width of the indicator chip. Override on the host to render a non-square indicator (for example, a file-type badge).",
-              "name": "--esp-status-indicator-width",
-              "default": "var(--esp-size-normal-to-medium)"
+              "description": "The width of the switch track. Defaults to `calc(var(--esp-size-normal-to-medium) * 1.75)`.",
+              "name": "--esp-switch-width"
             },
             {
-              "description": "Height of the indicator chip. Defaults to the width so the chip stays square.",
-              "name": "--esp-status-indicator-height",
-              "default": "var(--esp-status-indicator-width)"
+              "description": "The height of the switch track. Defaults to `var(--esp-size-normal-to-medium)`.",
+              "name": "--esp-switch-height"
             },
             {
-              "description": "Corner radius of the indicator chip. Lower it (for example, to `var(--esp-size-border-radius)`) for a rounded-rectangle chip.",
-              "name": "--esp-status-indicator-border-radius",
-              "default": "999px"
+              "description": "The diameter of the thumb. Defaults to `calc(var(--esp-switch-height) - 4px)`.",
+              "name": "--esp-switch-thumb-size"
             },
             {
-              "description": "Maximum width of the popover body. Raise this when slotting structured content such as a `<ul>` of values.",
-              "name": "--esp-status-indicator-popover-max-width",
-              "default": "32ch"
+              "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)`.",
@@ -52076,144 +52325,186 @@
           ],
           "slots": [
             {
-              "description": "Body of the popover that opens when the indicator is hovered, focused, or tapped. Accepts plain text or arbitrary HTML — small blocks of structured content (lists, key/value pairs) render inside the popover at `--esp-status-indicator-popover-max-width`.",
+              "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": ""
-            },
-            {
-              "description": "Optional custom status icon. When provided, it overrides both the `icon` attribute and built-in variant icon.",
-              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "popoverRef",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "internals",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "iconSlot",
+              "name": "formCtrl",
               "privacy": "private",
-              "default": "new SlottedIconController(this)"
+              "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": "placementBacker",
-              "type": {
-                "text": "EspalierStatusIndicatorPlacement"
-              },
+              "name": "formItemDescription",
               "privacy": "private",
-              "default": "\"top\""
+              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".switch-control\"), })"
             },
             {
               "kind": "field",
-              "name": "chromeBacker",
+              "name": "mode",
               "type": {
-                "text": "EspalierStatusIndicatorChrome"
+                "text": "\"switch\" | \"text\""
               },
-              "privacy": "private",
-              "default": "\"pill\""
+              "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": "descriptionId",
-              "privacy": "private",
-              "readonly": true,
-              "default": "`esp-status-indicator-${++statusIndicatorIdCounter}`"
+              "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": "open",
+              "name": "onLabel",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Label shown for the checked (on) state when\n`mode=\"text\"`.",
+              "attribute": "on-label"
             },
             {
               "kind": "field",
-              "name": "popoverPinned",
+              "name": "checked",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "private",
-              "default": "false"
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the switch is in the on state.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "value",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "Optional icon name from the Espalier SVG sprite.",
-              "attribute": "icon"
+              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "Accessible label for the indicator button.",
-              "attribute": "label"
+              "description": "The name used when the switch participates in a `<form>`.",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "required",
               "type": {
-                "text": "EspalierStatusIndicatorPlacement"
+                "text": "boolean"
               },
               "privacy": "public",
-              "description": "Preferred popover placement.",
-              "attribute": "placement",
+              "default": "false",
+              "description": "When true, the switch must be on before the form can\nbe submitted.",
+              "attribute": "required",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "chrome",
+              "name": "requiredMessage",
               "type": {
-                "text": "EspalierStatusIndicatorChrome"
+                "text": "string"
               },
               "privacy": "public",
-              "description": "Visual chrome around the status icon. `pill` renders the filled\ncircular treatment, `outline` keeps only the border, and `none`\nrenders the variant-colored icon alone.",
-              "attribute": "chrome",
-              "reflects": true
+              "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": "attach",
+              "name": "disabled",
               "type": {
-                "text": "\"left\" | \"right\" | \"above\" | \"below\""
+                "text": "boolean"
               },
-              "privacy": "private",
-              "readonly": true
+              "privacy": "public",
+              "default": "false",
+              "description": "Controls whether the switch is disabled.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "accessibleLabel",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "privacy": "private",
-              "readonly": true
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focus the switch control."
             },
             {
               "kind": "method",
-              "name": "syncPlacementAttribute",
-              "privacy": "private",
+              "name": "validate",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Re-run constraint validation and dispatch `validity-changed`."
             },
             {
               "kind": "method",
-              "name": "syncChromeAttribute",
+              "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": {
@@ -52222,18 +52513,26 @@
               }
             },
             {
-              "kind": "field",
-              "name": "handlePopoverOpened",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handlePopoverClosed",
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "pinPopoverOpen",
+              "name": "handleLabelSlotChange",
               "privacy": "private",
               "return": {
                 "type": {
@@ -52241,67 +52540,71 @@
                 }
               }
             },
-            {
-              "kind": "field",
-              "name": "handleClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "handleKeydown",
-              "privacy": "private"
-            },
             {
               "kind": "method",
-              "name": "renderDefaultIcon",
-              "privacy": "private"
+              "name": "getCurrentTextModeLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "renderIcon",
-              "privacy": "private"
+              "name": "getTextModeAriaLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
             },
             {
-              "kind": "field",
-              "name": "intentVariantBacker",
-              "type": {
-                "text": "EspalierIntentVariant"
+              "kind": "method",
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "privacy": "protected",
-              "default": "\"neutral\"",
-              "inheritedFrom": {
-                "name": "EspalierIntentElementBase",
-                "module": "dist/shared/esp-intent-element-base.js"
-              }
+              "description": "Called by the browser when the owning `<form>` is reset."
             },
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "EspalierVariant"
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "privacy": "public",
-              "description": "Semantic visual treatment. One of `neutral`, `success`, `warning`, `danger`, `info`.",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Called by the browser to restore form state (bfcache, etc.)."
             },
             {
               "kind": "method",
-              "name": "getVariantColorSource",
-              "privacy": "protected",
+              "name": "formDisabledCallback",
               "return": {
                 "type": {
-                  "text": "\"\""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "parameters": [
+                {
+                  "name": "isDisabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
             },
             {
               "kind": "field",
@@ -52483,6 +52786,21 @@
                 "module": "dist/shared/esp-element-base.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "privacy": "public",
+              "description": "The [color variant](/guides/color/variants) of the element.",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
             {
               "kind": "method",
               "name": "syncRootFromDom",
@@ -52690,6 +53008,20 @@
                 "module": "dist/shared/esp-element-base.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "getVariantColorSource",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "ColorSource | \"\""
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setVariantTokenProperty",
@@ -52733,52 +53065,100 @@
               }
             }
           ],
+          "events": [
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the switch is toggled. The detail contains the new `checked` state and the switch `value`.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
           "attributes": [
             {
-              "name": "icon",
+              "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": "Optional icon name from the Espalier SVG sprite.",
-              "fieldName": "icon"
+              "description": "Label shown for the unchecked (off) state when\n`mode=\"text\"`.",
+              "fieldName": "offLabel"
             },
             {
-              "name": "label",
+              "name": "on-label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "Accessible label for the indicator button.",
-              "fieldName": "label"
+              "description": "Label shown for the checked (on) state when\n`mode=\"text\"`.",
+              "fieldName": "onLabel"
             },
             {
-              "name": "placement",
+              "name": "checked",
               "type": {
-                "text": "EspalierStatusIndicatorPlacement"
+                "text": "boolean"
               },
-              "description": "Preferred popover placement.",
-              "fieldName": "placement"
+              "default": "false",
+              "description": "Whether the switch is in the on state.",
+              "fieldName": "checked"
             },
             {
-              "name": "chrome",
+              "name": "value",
               "type": {
-                "text": "EspalierStatusIndicatorChrome"
+                "text": "string"
               },
-              "description": "Visual chrome around the status icon. `pill` renders the filled\ncircular treatment, `outline` keeps only the border, and `none`\nrenders the variant-colored icon alone.",
-              "fieldName": "chrome"
+              "default": "\"\"",
+              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
+              "fieldName": "value"
             },
             {
-              "name": "variant",
+              "name": "name",
               "type": {
-                "text": "EspalierVariant"
+                "text": "string"
               },
-              "description": "Semantic visual treatment. One of `neutral`, `success`, `warning`, `danger`, `info`.",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "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.",
+              "fieldName": "disabled"
             },
             {
               "name": "scheme",
@@ -52792,123 +53172,95 @@
                 "name": "EspalierElementBase",
                 "module": "dist/shared/esp-element-base.js"
               }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "description": "The [color variant](/guides/color/variants) of the element.",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             }
           ],
           "superclass": {
-            "name": "EspalierIntentElementBase",
-            "module": "dist/shared/esp-intent-element-base.js"
+            "name": "EspalierElementBase",
+            "module": "dist/shared/esp-element-base.js"
           },
           "docPageTitle": {
-            "name": "Status",
-            "description": "Indicator"
+            "name": "Switch",
+            "description": ""
           },
           "docUrl": {
-            "name": "/components/status-indicator",
+            "name": "/components/switch",
             "description": ""
           },
           "menuGroup": {
-            "name": "Feedback",
-            "description": ""
+            "name": "Form",
+            "description": "Controls"
           },
           "menuLabel": {
-            "name": "Status",
-            "description": "Indicator"
+            "name": "Switch",
+            "description": ""
           },
           "menuIcon": {
-            "name": "info",
+            "name": "button",
             "description": ""
           },
-          "tagName": "esp-status-indicator",
-          "customElement": true,
-          "events": [
-            {
-              "name": "value-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ]
+          "tagName": "esp-switch",
+          "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierStatusIndicator",
+          "name": "EspalierSwitch",
           "declaration": {
-            "name": "EspalierStatusIndicator",
-            "module": "dist/status-indicator/esp-status-indicator.js"
+            "name": "EspalierSwitch",
+            "module": "dist/switch/esp-switch.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-status-indicator",
+          "name": "esp-switch",
           "declaration": {
-            "name": "EspalierStatusIndicator",
-            "module": "dist/status-indicator/esp-status-indicator.js"
+            "name": "EspalierSwitch",
+            "module": "dist/switch/esp-switch.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/switch/esp-switch.js",
+      "path": "dist/status-indicator/esp-status-indicator.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 compact, keyboard-accessible status icon that reveals explanatory\ncontent in an `esp-popover` on hover, focus, or tap.\n\n```html\n<esp-status-indicator\n  variant=\"warning\"\n  label=\"Image processing delayed\"\n  placement=\"right\">\n  The image is still queued. It will retry automatically.\n</esp-status-indicator>\n\n<esp-status-indicator variant=\"success\" label=\"Published\">\n  This page is live and visible to visitors.\n</esp-status-indicator>\n```\n\n### Chrome modes\n\nThe `chrome` attribute controls the chip treatment around the icon.\n`pill` (the default) renders the filled circular background, `outline`\nkeeps only the border, and `none` drops both — leaving just the\nvariant-colored icon and its popover affordance. `chrome=\"none\"` is the\nright choice when the indicator sits inside dense metadata rows where\na full pill would feel heavy.\n\n```html\n<esp-box style=\"display: flex; gap: var(--esp-size-normal); align-items: center;\">\n  <esp-status-indicator variant=\"success\" label=\"Pill (default)\">\n    Pill chrome wraps the icon in a filled circle.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"outline\" variant=\"success\" label=\"Outline\">\n    Outline chrome keeps the border but drops the fill.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"none\" variant=\"success\" label=\"None\">\n    None drops the chrome entirely — just the variant-colored icon.\n  </esp-status-indicator>\n</esp-box>\n```\n\n### Wide chip with a non-square SVG\n\nThe built-in `icon` attribute pulls from the Espalier sprite, which is\nauthored for **square** glyphs at the chip's default size. When you\nneed a non-square mark — a file-type badge, a short token of text, a\npill of dimensions — slot your own SVG into the `icon` slot and size\nthe chip through the three CSS hooks: `--esp-status-indicator-width`,\n`--esp-status-indicator-height`, and `--esp-status-indicator-border-radius`.\n\nThe slotted SVG fills the chip, so give it a matching `viewBox` and\nuse `chrome=\"none\"` if you don't want the chip's pill background\nfighting your art.\n\n```html\n<style>\n  .file-type-indicator {\n    --esp-status-indicator-width: calc(var(--esp-size-big-to-large) * 2.5);\n    --esp-status-indicator-height: var(--esp-size-big-to-large);\n    --esp-status-indicator-border-radius: var(--esp-size-border-radius);\n    color: var(--esp-color-link);\n  }\n\n  .file-type-indicator svg text {\n    fill: var(--esp-color-background);\n    font-family: var(--esp-font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-anchor: middle;\n  }\n</style>\n\n<esp-status-indicator\n  class=\"file-type-indicator\"\n  chrome=\"none\"\n  label=\"Original file type\">\n  <svg slot=\"icon\" viewBox=\"0 0 72 32\" aria-hidden=\"true\">\n    <rect x=\"0\" y=\"0\" width=\"72\" height=\"32\" rx=\"6\" ry=\"6\" fill=\"currentColor\"/>\n    <text x=\"36\" y=\"21\">JPG</text>\n  </svg>\n  <strong>Original file type</strong>\n  <p>Uploaded as a JPEG; responsive variants are generated on demand.</p>\n</esp-status-indicator>\n```\n\n### Rich popover content\n\nThe default slot accepts any HTML, not just plain text. Small blocks\nof structured content — a heading, a list of values, a definition\nlist — render inside the popover and are clamped by\n`--esp-status-indicator-popover-max-width` (default `32ch`). Raise the\nhook when the content needs more room.\n\n```html\n<style>\n  .responsive-layers-indicator {\n    --esp-status-indicator-popover-max-width: 24rem;\n  }\n\n  .responsive-layers-indicator ul {\n    margin: var(--esp-size-tiny) 0 0;\n    padding-left: var(--esp-size-normal);\n  }\n</style>\n\n<esp-status-indicator\n  class=\"responsive-layers-indicator\"\n  variant=\"success\"\n  icon=\"layers-intersect\"\n  label=\"Responsive layers ready\">\n  <strong>Responsive layers ready</strong>\n  <ul>\n    <li>320w &mdash; mobile</li>\n    <li>640w &mdash; tablet</li>\n    <li>1280w &mdash; desktop</li>\n    <li>1920w &mdash; large desktop</li>\n  </ul>\n</esp-status-indicator>\n```",
+          "name": "EspalierStatusIndicator",
           "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": "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": "Width of the indicator chip. Override on the host to render a non-square indicator (for example, a file-type badge).",
+              "name": "--esp-status-indicator-width",
+              "default": "var(--esp-size-normal-to-medium)"
             },
             {
-              "description": "Text color of the active label in text mode. Defaults to `var(--esp-color-action-text)`.",
-              "name": "--esp-switch-text-active-color"
+              "description": "Height of the indicator chip. Defaults to the width so the chip stays square.",
+              "name": "--esp-status-indicator-height",
+              "default": "var(--esp-status-indicator-width)"
             },
             {
-              "description": "Text color of the inactive label in text mode. Defaults to `var(--esp-color-layer-1)`.",
-              "name": "--esp-switch-text-inactive-color"
+              "description": "Corner radius of the indicator chip. Lower it (for example, to `var(--esp-size-border-radius)`) for a rounded-rectangle chip.",
+              "name": "--esp-status-indicator-border-radius",
+              "default": "999px"
             },
             {
-              "description": "Background color of the sliding highlight in text mode. Defaults to `var(--esp-color-action-background)`.",
-              "name": "--esp-switch-text-highlight-color"
+              "description": "Maximum width of the popover body. Raise this when slotting structured content such as a `<ul>` of values.",
+              "name": "--esp-status-indicator-popover-max-width",
+              "default": "32ch"
             },
             {
               "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
@@ -52969,186 +53321,144 @@
           ],
           "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": "Body of the popover that opens when the indicator is hovered, focused, or tapped. Accepts plain text or arbitrary HTML — small blocks of structured content (lists, key/value pairs) render inside the popover at `--esp-status-indicator-popover-max-width`.",
               "name": ""
+            },
+            {
+              "description": "Optional custom status icon. When provided, it overrides both the `icon` attribute and built-in variant icon.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "internals",
+              "name": "popoverRef",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "formCtrl",
+              "name": "iconSlot",
               "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; }, })"
+              "default": "new SlottedIconController(this)"
             },
             {
               "kind": "field",
-              "name": "formItemDescription",
+              "name": "placementBacker",
+              "type": {
+                "text": "EspalierStatusIndicatorPlacement"
+              },
               "privacy": "private",
-              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.shadowRoot?.querySelector<HTMLElement>(\".switch-control\"), })"
+              "default": "\"top\""
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "chromeBacker",
               "type": {
-                "text": "\"switch\" | \"text\""
+                "text": "EspalierStatusIndicatorChrome"
               },
-              "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
+              "privacy": "private",
+              "default": "\"pill\""
             },
             {
               "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"
+              "name": "descriptionId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`esp-status-indicator-${++statusIndicatorIdCounter}`"
             },
             {
               "kind": "field",
-              "name": "onLabel",
+              "name": "open",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Label shown for the checked (on) state when\n`mode=\"text\"`.",
-              "attribute": "on-label"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "popoverPinned",
               "type": {
                 "text": "boolean"
               },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the switch is in the on state.",
-              "attribute": "checked",
-              "reflects": true
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "icon",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
-              "attribute": "value"
+              "description": "Optional icon name from the Espalier SVG sprite.",
+              "attribute": "icon"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "The name used when the switch participates in a `<form>`.",
-              "attribute": "name",
-              "reflects": true
+              "description": "Accessible label for the indicator button.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "EspalierStatusIndicatorPlacement"
               },
               "privacy": "public",
-              "default": "false",
-              "description": "When true, the switch must be on before the form can\nbe submitted.",
-              "attribute": "required",
+              "description": "Preferred popover placement.",
+              "attribute": "placement",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "requiredMessage",
+              "name": "chrome",
               "type": {
-                "text": "string"
+                "text": "EspalierStatusIndicatorChrome"
               },
               "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"
+              "description": "Visual chrome around the status icon. `pill` renders the filled\ncircular treatment, `outline` keeps only the border, and `none`\nrenders the variant-colored icon alone.",
+              "attribute": "chrome",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "attach",
               "type": {
-                "text": "boolean"
+                "text": "\"left\" | \"right\" | \"above\" | \"below\""
               },
-              "privacy": "public",
-              "default": "false",
-              "description": "Controls whether the switch is disabled.",
-              "attribute": "disabled",
-              "reflects": true
+              "privacy": "private",
+              "readonly": true
             },
             {
-              "kind": "method",
-              "name": "focus",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "accessibleLabel",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "description": "Focus the switch control."
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "validate",
-              "privacy": "public",
+              "name": "syncPlacementAttribute",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "description": "Re-run constraint validation and dispatch `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",
+              "name": "syncChromeAttribute",
               "privacy": "private",
               "return": {
                 "type": {
@@ -53157,26 +53467,18 @@
               }
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "handlePopoverOpened",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePopoverClosed",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleLabelSlotChange",
+              "name": "pinPopoverOpen",
               "privacy": "private",
               "return": {
                 "type": {
@@ -53185,70 +53487,66 @@
               }
             },
             {
-              "kind": "method",
-              "name": "getCurrentTextModeLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleKeydown",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "getTextModeAriaLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              }
+              "name": "renderDefaultIcon",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "formResetCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "renderIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "intentVariantBacker",
+              "type": {
+                "text": "EspalierIntentVariant"
               },
-              "description": "Called by the browser when the owning `<form>` is reset."
+              "privacy": "protected",
+              "default": "\"neutral\"",
+              "inheritedFrom": {
+                "name": "EspalierIntentElementBase",
+                "module": "dist/shared/esp-intent-element-base.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "formStateRestoreCallback",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "EspalierVariant"
               },
-              "parameters": [
-                {
-                  "name": "state",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Called by the browser to restore form state (bfcache, etc.)."
+              "privacy": "public",
+              "description": "Semantic visual treatment. One of `neutral`, `success`, `warning`, `danger`, `info`.",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "method",
-              "name": "formDisabledCallback",
+              "name": "getVariantColorSource",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "\"\""
                 }
               },
-              "parameters": [
-                {
-                  "name": "isDisabled",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "field",
@@ -53430,21 +53728,6 @@
                 "module": "dist/shared/esp-element-base.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "EspalierVariant"
-              },
-              "privacy": "public",
-              "description": "The [color variant](/guides/color/variants) of the element.",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
             {
               "kind": "method",
               "name": "syncRootFromDom",
@@ -53652,20 +53935,6 @@
                 "module": "dist/shared/esp-element-base.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "getVariantColorSource",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "ColorSource | \"\""
-                }
-              },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
             {
               "kind": "method",
               "name": "setVariantTokenProperty",
@@ -53709,100 +53978,52 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "value-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Fired when the switch is toggled. The detail contains the new `checked` state and the switch `value`.",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ],
           "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",
+              "name": "icon",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The value associated with this switch. Submitted with the\nform when the switch is on.",
-              "fieldName": "value"
+              "description": "Optional icon name from the Espalier SVG sprite.",
+              "fieldName": "icon"
             },
             {
-              "name": "name",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The name used when the switch participates in a `<form>`.",
-              "fieldName": "name"
+              "description": "Accessible label for the indicator button.",
+              "fieldName": "label"
             },
             {
-              "name": "required",
+              "name": "placement",
               "type": {
-                "text": "boolean"
+                "text": "EspalierStatusIndicatorPlacement"
               },
-              "default": "false",
-              "description": "When true, the switch must be on before the form can\nbe submitted.",
-              "fieldName": "required"
+              "description": "Preferred popover placement.",
+              "fieldName": "placement"
             },
             {
-              "name": "required-message",
+              "name": "chrome",
               "type": {
-                "text": "string"
+                "text": "EspalierStatusIndicatorChrome"
               },
-              "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"
+              "description": "Visual chrome around the status icon. `pill` renders the filled\ncircular treatment, `outline` keeps only the border, and `none`\nrenders the variant-colored icon alone.",
+              "fieldName": "chrome"
             },
             {
-              "name": "disabled",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "EspalierVariant"
               },
-              "default": "false",
-              "description": "Controls whether the switch is disabled.",
-              "fieldName": "disabled"
+              "description": "Semantic visual treatment. One of `neutral`, `success`, `warning`, `danger`, `info`.",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "name": "scheme",
@@ -53816,63 +54037,63 @@
                 "name": "EspalierElementBase",
                 "module": "dist/shared/esp-element-base.js"
               }
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "EspalierVariant"
-              },
-              "description": "The [color variant](/guides/color/variants) of the element.",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
             }
           ],
           "superclass": {
-            "name": "EspalierElementBase",
-            "module": "dist/shared/esp-element-base.js"
+            "name": "EspalierIntentElementBase",
+            "module": "dist/shared/esp-intent-element-base.js"
           },
           "docPageTitle": {
-            "name": "Switch",
-            "description": ""
+            "name": "Status",
+            "description": "Indicator"
           },
           "docUrl": {
-            "name": "/components/switch",
+            "name": "/components/status-indicator",
             "description": ""
           },
           "menuGroup": {
-            "name": "Form",
-            "description": "Controls"
+            "name": "Feedback",
+            "description": ""
           },
           "menuLabel": {
-            "name": "Switch",
-            "description": ""
+            "name": "Status",
+            "description": "Indicator"
           },
           "menuIcon": {
-            "name": "button",
+            "name": "info",
             "description": ""
           },
-          "tagName": "esp-switch",
-          "customElement": true
+          "tagName": "esp-status-indicator",
+          "customElement": true,
+          "events": [
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierSwitch",
+          "name": "EspalierStatusIndicator",
           "declaration": {
-            "name": "EspalierSwitch",
-            "module": "dist/switch/esp-switch.js"
+            "name": "EspalierStatusIndicator",
+            "module": "dist/status-indicator/esp-status-indicator.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-switch",
+          "name": "esp-status-indicator",
           "declaration": {
-            "name": "EspalierSwitch",
-            "module": "dist/switch/esp-switch.js"
+            "name": "EspalierStatusIndicator",
+            "module": "dist/status-indicator/esp-status-indicator.js"
           }
         }
       ]