@taprootio/espalier 4.20.2 → 6.0.0

package/custom-elements.json

@@ -311,6 +311,14 @@
             "module": "dist/image/image-focus.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/video/esp-video.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -887,14 +895,6 @@
             "module": "./shared/justified-layout.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "calculatePhotoLayout",
-          "declaration": {
-            "name": "calculatePhotoLayout",
-            "module": "./shared/justified-layout.js"
-          }
-        },
         {
           "kind": "js",
           "name": "DEFAULT_ALBUM_MAX_ROW_HEIGHT_VH",
@@ -951,14 +951,6 @@
             "module": "./shared/justified-layout.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "PhotoRow",
-          "declaration": {
-            "name": "PhotoRow",
-            "module": "./shared/justified-layout.js"
-          }
-        },
         {
           "kind": "js",
           "name": "TypeaheadFetchItems",
@@ -11288,7 +11280,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Groups multiple [esp-checkbox](/components/checkbox)\ncomponents and manages their collective state. Works with\n[esp-form-item](/components/form-item) for label and\nerror message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Select toppings\">\n    <esp-checkbox-group>\n      <esp-checkbox value=\"cheese\">Cheese</esp-checkbox>\n      <esp-checkbox value=\"pepperoni\">Pepperoni</esp-checkbox>\n      <esp-checkbox value=\"mushrooms\">Mushrooms</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-checkbox-group disabled>\n      <esp-checkbox value=\"a\">Option A</esp-checkbox>\n      <esp-checkbox value=\"b\" checked>Option B</esp-checkbox>\n      <esp-checkbox value=\"c\">Option C</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```",
+          "description": "Groups multiple [esp-checkbox](/components/checkbox)\ncomponents and manages their collective state. Works with\n[esp-form-item](/components/form-item) for label and\nerror message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Select toppings\">\n    <esp-checkbox-group>\n      <esp-checkbox value=\"cheese\">Cheese</esp-checkbox>\n      <esp-checkbox value=\"pepperoni\">Pepperoni</esp-checkbox>\n      <esp-checkbox value=\"mushrooms\">Mushrooms</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-checkbox-group disabled>\n      <esp-checkbox value=\"a\">Option A</esp-checkbox>\n      <esp-checkbox value=\"b\" checked>Option B</esp-checkbox>\n      <esp-checkbox value=\"c\">Option C</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```\n\nInside an `esp-form-item`, the group's `group` element takes the form\nitem's `label` as its accessible name and its hint as its description.\nWhile the form item shows an error, that element is `aria-invalid=\"true\"`\nand the error joins its description after the hint. Each option keeps its\nown label and is not described separately.",
           "name": "EspalierCheckboxGroup",
           "slots": [
             {
@@ -11324,18 +11316,15 @@
             },
             {
               "kind": "field",
-              "name": "formItemDescription",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
+              "name": "groupElement",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "describedCheckboxes",
+              "name": "formItemDescription",
               "privacy": "private",
-              "default": "new Set<EspalierCheckbox>()"
+              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.groupElement.value, })",
+              "description": "The wrapping form item names, describes, and marks invalid the\n`group` element itself, so its label, hint, and error are read\nonce for the group rather than once per option (ESP0232)."
             },
             {
               "kind": "field",
@@ -11456,16 +11445,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "applyFormItemDescription",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "field",
               "name": "handleItemsSlotChange",
@@ -12454,7 +12433,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A checkbox control for toggling boolean values. Uses Tabler\nSVG icons for checked, unchecked, and indeterminate states.\nWorks standalone or inside an\n[esp-checkbox-group](/components/checkbox/group) for multi-select.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Terms and conditions\">\n    <esp-checkbox value=\"agree\">\n      I agree to the terms\n    </esp-checkbox>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-checkbox checked value=\"newsletter\">\n    Subscribe to newsletter\n  </esp-checkbox>\n  <esp-checkbox disabled value=\"disabled-opt\">\n    Disabled option\n  </esp-checkbox>\n  <esp-checkbox indeterminate value=\"partial\">\n    Indeterminate state\n  </esp-checkbox>\n</esp-box>\n```",
+          "description": "A checkbox control for toggling boolean values. Uses Tabler\nSVG icons for checked, unchecked, and indeterminate states.\nWorks standalone or inside an\n[esp-checkbox-group](/components/checkbox/group) for multi-select.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Terms and conditions\">\n    <esp-checkbox value=\"agree\">\n      I agree to the terms\n    </esp-checkbox>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-checkbox checked value=\"newsletter\">\n    Subscribe to newsletter\n  </esp-checkbox>\n  <esp-checkbox disabled value=\"disabled-opt\">\n    Disabled option\n  </esp-checkbox>\n  <esp-checkbox indeterminate value=\"partial\">\n    Indeterminate state\n  </esp-checkbox>\n</esp-box>\n```\n\n### Errors\n\nInside an `esp-form-item`, a checkbox that shows an error is\n`aria-invalid=\"true\"`, the error joins its description after any hint,\nand the error is announced once. In an `esp-checkbox-group`, the group\ncarries all of this instead, and takes the form item's `label` as its\naccessible name. Checking or unchecking clears an error set through the\nform item's `error` or `errorPool`; a `required` checkbox or group raises\nits own error again when it is left empty.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Terms\" error=\"Accept the terms to continue.\">\n    <esp-checkbox value=\"agree\">I agree to the terms</esp-checkbox>\n  </esp-form-item>\n  <esp-form-item label=\"Pizza toppings\" hint=\"Pick up to three.\" error=\"Choose at least one topping.\">\n    <esp-checkbox-group required>\n      <esp-checkbox value=\"cheese\">Cheese</esp-checkbox>\n      <esp-checkbox value=\"basil\">Basil</esp-checkbox>\n    </esp-checkbox-group>\n  </esp-form-item>\n</esp-box>\n```",
           "name": "EspalierCheckbox",
           "cssProperties": [
             {
@@ -21428,7 +21407,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A transient panel for help and more-info content that claims designed spare\nwidth before ever covering the page.\n\nPlace one `esp-flyout` in an `esp-page`'s `flyout` slot. The panel\nlives on the canvas after any persistent preview, outside the content\nsurface. It negotiates between `--esp-page-flyout-min-width` and\n`--esp-page-flyout-max-width`; preview receives flexible room first. The page\ndecides where help goes, from widest viewport to narrowest:\n\n1. **Gutter** — the panel occupies the right canvas gutter. When the\n   gutter already has room, it claims existing spare canvas and the\n   main content does not move at all, on any alignment.\n2. **Shift** — when the gutter is not quite wide enough, the surface\n   slides toward `start` by exactly the shortfall (no more) to free\n   the difference.\n3. **Docked sidebar** — once the gutter is gone, the panel competes\n   for width with the main well; content narrows but is never\n   covered.\n4. **Overlay drawer** — when the complete sidebar + main + help\n   minimums do not fit, or below `COMPACT_VIEWPORT_MEDIA_QUERY` (the\n   same breakpoint the `esp-menu` drawer uses), the panel becomes a fixed\n   drawer over a vellum backdrop. Set `mode=\"overlay\"` to get this\n   presentation at every width.\n\nThe panel is styled as a tear-off piece: a dotted perforation on\nits leading edge, rounded trailing corners, and no shadow — all\noverridable through the `--esp-flyout-*` tokens below.\nAn anchored panel shown with preview keeps its caret at the main/preview\nedge and receives a non-interactive dotted bridge across preview from the\npage. A short, thick terminus on the preview/help seam completes that\nconnection; no consumer positioning is required.\n\nA11y follows the presentation. In the in-grid modes (1–3) the\nflyout is a non-modal `complementary` landmark named by its\n`heading`, opening it never steals focus, and boundary scrolling chains\nback to the main document. In the overlay-drawer mode (4) it is a true\nmodal: `role=\"dialog\"` + `aria-modal`, the\nbackground goes inert, scroll is locked, focus moves into the drawer\nand is trapped, and focus is restored on close. `Escape` closes it\nin every mode.\n\n```html\n<style>\nesp-page.flyout-demo {\n  --esp-page-main-max-width: 420px;\n  --esp-page-canvas-background: var(--esp-color-layer-1);\n  &::part(wrapper) {\n    min-height: 320px;\n    height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-demo\" align=\"center\">\n  <esp-flyout slot=\"flyout\" heading=\"More info\" id=\"demo-flyout\" standalone>\n    <p>Spare width claimed; the well shifted only enough to make room.</p>\n  </esp-flyout>\n  <div>\n    <esp-button id=\"toggle-flyout\" label=\"Toggle flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const flyout = findById(\"demo-flyout\");\n  findById(\"toggle-flyout\").addEventListener(\"esp-clicked\", () => flyout.toggle());\n</script>\n```\n\nBy default the panel is a tear-off — a dotted perforation on its\nleading edge, rounded trailing corners, no shadow. Add\n`match-surface` to lift the trailing edge with the page's surface\nedge shadow, so the flyout reads as a raised peer of the content it\nflies out from while staying attached at the leading perforation:\n\n```html\n<style>\nesp-page.flyout-match-demo {\n  --esp-page-main-max-width: 420px;\n  &::part(wrapper) {\n    min-height: 320px;\n    height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-match-demo\" align=\"center\">\n  <esp-flyout slot=\"flyout\" heading=\"More info\" id=\"match-flyout\" match-surface standalone>\n    <p>Attached at the perforation, trailing edge raised like the surface.</p>\n  </esp-flyout>\n  <div>\n    <esp-button id=\"toggle-match\" label=\"Toggle flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const matchFlyout = findById(\"match-flyout\");\n  findById(\"toggle-match\").addEventListener(\"esp-clicked\", () => matchFlyout.toggle());\n</script>\n```\n\nWhen the page has no spare width to claim — a `kind=\"full\"` page,\nor a capped page on a viewport at the cap — the open flyout docks\nas a right sidebar and the content makes room:\n\n```html\n<style>\nesp-page.flyout-docked-demo {\n  &::part(wrapper) {\n    min-height: 320px;\n    height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-docked-demo\" kind=\"full\">\n  <esp-flyout slot=\"flyout\" heading=\"Docked\" id=\"docked-flyout\" standalone>\n    <p>No gutter to claim, so the content narrows instead.</p>\n  </esp-flyout>\n  <div>\n    <p>A <code>kind=\"full\"</code> page has no canvas gutters at any\n    width — the flyout squeezes the main well and never covers it.</p>\n    <esp-button id=\"toggle-docked\" label=\"Toggle flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const dockedFlyout = findById(\"docked-flyout\");\n  findById(\"toggle-docked\").addEventListener(\"esp-clicked\", () => dockedFlyout.toggle());\n</script>\n```\n\nBelow `COMPACT_VIEWPORT_MEDIA_QUERY` every flyout becomes a fixed\noverlay drawer over a vellum — there is no room for a side-by-side\nsplit on a phone. `mode=\"overlay\"` forces that presentation at any\nwidth (try it here; `Escape` or the vellum closes it):\n\n```html\n<style>\nesp-page.flyout-overlay-demo {\n  &::part(wrapper) {\n    min-height: 160px;\n    height: 160px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-overlay-demo\">\n  <esp-flyout slot=\"flyout\" heading=\"Overlay drawer\" mode=\"overlay\" id=\"overlay-flyout\" standalone>\n    <p>A fixed drawer over a vellum — what every flyout becomes on\n    small viewports.</p>\n  </esp-flyout>\n  <div>\n    <esp-button id=\"open-overlay\" label=\"Open overlay flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const overlayFlyout = findById(\"overlay-flyout\");\n  findById(\"open-overlay\").addEventListener(\"esp-clicked\", () => overlayFlyout.toggle());\n</script>\n```\n\nComponents that cannot know where the flyout lives can request it\nover the bus with `showFlyout()` — the same pattern `showToast()`\nuses. A second request swaps the content in place; it never\nstacks. Content passed as a string renders as plain text; pass a\n`Node` for rich content. Pass the triggering element as `anchor` to\nalign the in-grid panel with that control and keep both in the same\nscroll flow. If the panel would cross the visible viewport's bottom,\nit shifts up only far enough to fit and returns to its natural trigger\nalignment as the page scrolls. Content taller than the viewport\nscrolls inside the panel. Pass `fullHeight: true` (or set the\n`full-height` attribute) when a reading surface should fill the visible\nblock-size even when its content is short. Overlay drawers stay\nviewport-fixed.\n\nBus requests anchored inside nested pages are presented by the\noutermost containing page's flyout by default. This keeps previews,\nembedded tools, and nested layouts from trapping application-level\nhelp or detail panels. Set `scope=\"nearest\"` on a nested flyout when\nthat page should explicitly own requests originating inside it.\nThe demos above are each driven by their own toggle button, so they\nare marked `standalone` to opt out of the bus entirely.\n\n```html\n<style>\nesp-page.flyout-bus-demo {\n  --esp-page-max-width: 420px;\n  &::part(wrapper) {\n    min-height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n  .flyout-demo-copy {\n    max-inline-size: 42ch;\n  }\n}\n</style>\n<esp-page class=\"flyout-bus-demo\">\n  <esp-flyout slot=\"flyout\"></esp-flyout>\n  <div>\n    <esp-button id=\"show-apples\" label=\"Apples\" collapsed></esp-button>\n    <div class=\"flyout-demo-copy\">\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua.</p>\n      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi\n      ut aliquip ex ea commodo consequat.</p>\n      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum\n      dolore eu fugiat nulla pariatur.</p>\n    </div>\n    <esp-button id=\"show-pears\" label=\"Pears\" collapsed></esp-button>\n    <template id=\"pears-description\">\n      <p>Ripen pears at room temperature until the neck yields gently to\n      pressure, then refrigerate them to slow further ripening.</p>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer\n      nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>\n      <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis\n      sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper\n      porta.</p>\n      <p>Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent\n      taciti sociosqu ad litora torquent per conubia nostra.</p>\n      <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.\n      Curabitur tortor. Pellentesque nibh. Aenean quam.</p>\n      <p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis\n      tristique sem. Proin ut ligula vel nunc egestas porttitor.</p>\n      <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non,\n      massa. Fusce ac turpis quis ligula lacinia aliquet.</p>\n      <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,\n      euismod in, nibh. Quisque volutpat condimentum velit.</p>\n    </template>\n    <div class=\"flyout-demo-copy\">\n      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\n      deserunt mollit anim id est laborum.</p>\n      <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, nullam\n      varius, turpis et commodo pharetra.</p>\n    </div>\n  </div>\n</esp-page>\n<script>\n  const applesButton = findById(\"show-apples\");\n  applesButton.addEventListener(\"esp-clicked\", () => {\n    showFlyout({ heading: \"Apples\", content: \"Crisp. Store cold.\", anchor: applesButton });\n  });\n  const pearsButton = findById(\"show-pears\");\n  const pearsDescription = findById(\"pears-description\");\n  pearsButton.addEventListener(\"esp-clicked\", () => {\n    showFlyout({\n      heading: \"Pears\",\n      content: pearsDescription.content.cloneNode(true),\n      anchor: pearsButton,\n    });\n  });\n</script>\n```",
+          "description": "A transient panel for help and more-info content that claims designed spare\nwidth before ever covering the page.\n\nPlace one `esp-flyout` in an `esp-page`'s `flyout` slot. The panel\nlives on the canvas after any persistent preview, outside the content\nsurface. It negotiates between `--esp-page-flyout-min-width` and\n`--esp-page-flyout-max-width`; preview receives flexible room first. The page\ndecides where help goes, from widest viewport to narrowest:\n\n1. **Gutter** — the panel occupies the right canvas gutter. When the\n   gutter already has room, it claims existing spare canvas and the\n   main content does not move at all, on any alignment.\n2. **Shift** — when the gutter is not quite wide enough, the surface\n   slides toward `start` by exactly the shortfall (no more) to free\n   the difference.\n3. **Docked sidebar** — once the gutter is gone, the panel competes\n   for width with the main well; content narrows but is never\n   covered.\n4. **Overlay drawer** — when the complete sidebar + main + help\n   minimums do not fit, or below `COMPACT_VIEWPORT_MEDIA_QUERY` (the\n   same breakpoint the `esp-menu` drawer uses), the panel becomes a fixed\n   drawer over a vellum backdrop. Set `mode=\"overlay\"` to get this\n   presentation at every width.\n\nThe panel is styled as a tear-off piece: a dotted perforation on\nits leading edge, rounded trailing corners, and no shadow — all\noverridable through the `--esp-flyout-*` tokens below.\nAn anchored panel shown with preview keeps its caret at the main/preview\nedge and receives a non-interactive dotted bridge across preview from the\npage. A short, thick terminus on the preview/help seam completes that\nconnection; no consumer positioning is required.\n\nA11y follows the presentation. In the in-grid modes (1–3) the\nflyout is a non-modal `complementary` landmark named by its\n`heading`, opening it never steals focus, and boundary scrolling chains\nback to the main document. In the overlay-drawer mode (4) it is a true\nmodal: `role=\"dialog\"` + `aria-modal`, the\nbackground goes inert, scroll is locked, focus moves into the drawer\nand is trapped, and focus is restored on close. `Escape` closes it\nin every mode.\n\n```html\n<style>\nesp-page.flyout-demo {\n  --esp-page-main-max-width: 420px;\n  --esp-page-canvas-background: var(--esp-color-layer-1);\n  &::part(wrapper) {\n    min-height: 320px;\n    height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-demo\" align=\"center\">\n  <esp-flyout slot=\"flyout\" heading=\"More info\" id=\"demo-flyout\" standalone>\n    <p>Spare width claimed; the well shifted only enough to make room.</p>\n  </esp-flyout>\n  <div>\n    <esp-button id=\"toggle-flyout\" label=\"Toggle flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const flyout = findById(\"demo-flyout\");\n  findById(\"toggle-flyout\").addEventListener(\"esp-clicked\", () => flyout.toggle());\n</script>\n```\n\nBy default the panel is a tear-off — a dotted perforation on its\nleading edge, rounded trailing corners, no shadow. Add\n`match-surface` to lift the trailing edge with the page's surface\nedge shadow, so the flyout reads as a raised peer of the content it\nflies out from while staying attached at the leading perforation:\n\n```html\n<style>\nesp-page.flyout-match-demo {\n  --esp-page-main-max-width: 420px;\n  &::part(wrapper) {\n    min-height: 320px;\n    height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-match-demo\" align=\"center\">\n  <esp-flyout slot=\"flyout\" heading=\"More info\" id=\"match-flyout\" match-surface standalone>\n    <p>Attached at the perforation, trailing edge raised like the surface.</p>\n  </esp-flyout>\n  <div>\n    <esp-button id=\"toggle-match\" label=\"Toggle flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const matchFlyout = findById(\"match-flyout\");\n  findById(\"toggle-match\").addEventListener(\"esp-clicked\", () => matchFlyout.toggle());\n</script>\n```\n\nWhen the page has no spare width to claim — a `kind=\"full\"` page,\nor a capped page on a viewport at the cap — the open flyout docks\nas a right sidebar and the content makes room:\n\n```html\n<style>\nesp-page.flyout-docked-demo {\n  &::part(wrapper) {\n    min-height: 320px;\n    height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-docked-demo\" kind=\"full\">\n  <esp-flyout slot=\"flyout\" heading=\"Docked\" id=\"docked-flyout\" standalone>\n    <p>No gutter to claim, so the content narrows instead.</p>\n  </esp-flyout>\n  <div>\n    <p>A <code>kind=\"full\"</code> page has no canvas gutters at any\n    width — the flyout squeezes the main well and never covers it.</p>\n    <esp-button id=\"toggle-docked\" label=\"Toggle flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const dockedFlyout = findById(\"docked-flyout\");\n  findById(\"toggle-docked\").addEventListener(\"esp-clicked\", () => dockedFlyout.toggle());\n</script>\n```\n\nBelow `COMPACT_VIEWPORT_MEDIA_QUERY` every flyout becomes a fixed\noverlay drawer over a vellum — there is no room for a side-by-side\nsplit on a phone. `mode=\"overlay\"` forces that presentation at any\nwidth (try it here; `Escape` or the vellum closes it):\n\n```html\n<style>\nesp-page.flyout-overlay-demo {\n  &::part(wrapper) {\n    min-height: 160px;\n    height: 160px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n}\n</style>\n<esp-page class=\"flyout-overlay-demo\">\n  <esp-flyout slot=\"flyout\" heading=\"Overlay drawer\" mode=\"overlay\" id=\"overlay-flyout\" standalone>\n    <p>A fixed drawer over a vellum — what every flyout becomes on\n    small viewports.</p>\n  </esp-flyout>\n  <div>\n    <esp-button id=\"open-overlay\" label=\"Open overlay flyout\" collapsed></esp-button>\n  </div>\n</esp-page>\n<script>\n  const overlayFlyout = findById(\"overlay-flyout\");\n  findById(\"open-overlay\").addEventListener(\"esp-clicked\", () => overlayFlyout.toggle());\n</script>\n```\n\nComponents that cannot know where the flyout lives can request it\nover the bus with `showFlyout()` — the same pattern `showToast()`\nuses. A second request swaps the content in place; it never\nstacks. Content passed as a string renders as plain text; pass a\n`Node` for rich content. Pass the triggering element as `anchor` to\nalign the in-grid panel with that control and keep both in the same\nscroll flow. If the panel would cross the visible viewport's bottom,\nit shifts up only far enough to fit and returns to its natural trigger\nalignment as the page scrolls. Content taller than the viewport\nscrolls inside the panel. Pass `fullHeight: true` (or set the\n`full-height` attribute) when a reading surface should fill the visible\nblock-size even when its content is short. Overlay drawers stay\nviewport-fixed.\n\nBus requests anchored inside nested pages are presented by the\noutermost containing page's flyout by default. This keeps previews,\nembedded tools, and nested layouts from trapping application-level\nhelp or detail panels. Set `scope=\"nearest\"` on a nested flyout when\nthat page should explicitly own requests originating inside it.\nThe demos above are each driven by their own toggle button, so they\nare marked `standalone` to opt out of the bus entirely.\n\n```html\n<style>\nesp-page.flyout-bus-demo {\n  --esp-page-main-max-width: 420px;\n  &::part(wrapper) {\n    min-height: 320px;\n  }\n  > div {\n    padding: var(--esp-size-padding);\n  }\n  .flyout-demo-copy {\n    max-inline-size: 42ch;\n  }\n}\n</style>\n<esp-page class=\"flyout-bus-demo\">\n  <esp-flyout slot=\"flyout\"></esp-flyout>\n  <div>\n    <esp-button id=\"show-apples\" label=\"Apples\" collapsed></esp-button>\n    <div class=\"flyout-demo-copy\">\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod\n      tempor incididunt ut labore et dolore magna aliqua.</p>\n      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi\n      ut aliquip ex ea commodo consequat.</p>\n      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum\n      dolore eu fugiat nulla pariatur.</p>\n    </div>\n    <esp-button id=\"show-pears\" label=\"Pears\" collapsed></esp-button>\n    <template id=\"pears-description\">\n      <p>Ripen pears at room temperature until the neck yields gently to\n      pressure, then refrigerate them to slow further ripening.</p>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer\n      nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>\n      <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis\n      sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper\n      porta.</p>\n      <p>Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent\n      taciti sociosqu ad litora torquent per conubia nostra.</p>\n      <p>Curabitur sodales ligula in libero. Sed dignissim lacinia nunc.\n      Curabitur tortor. Pellentesque nibh. Aenean quam.</p>\n      <p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis\n      tristique sem. Proin ut ligula vel nunc egestas porttitor.</p>\n      <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non,\n      massa. Fusce ac turpis quis ligula lacinia aliquet.</p>\n      <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed,\n      euismod in, nibh. Quisque volutpat condimentum velit.</p>\n    </template>\n    <div class=\"flyout-demo-copy\">\n      <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\n      deserunt mollit anim id est laborum.</p>\n      <p>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio, nullam\n      varius, turpis et commodo pharetra.</p>\n    </div>\n  </div>\n</esp-page>\n<script>\n  const applesButton = findById(\"show-apples\");\n  applesButton.addEventListener(\"esp-clicked\", () => {\n    showFlyout({ heading: \"Apples\", content: \"Crisp. Store cold.\", anchor: applesButton });\n  });\n  const pearsButton = findById(\"show-pears\");\n  const pearsDescription = findById(\"pears-description\");\n  pearsButton.addEventListener(\"esp-clicked\", () => {\n    showFlyout({\n      heading: \"Pears\",\n      content: pearsDescription.content.cloneNode(true),\n      anchor: pearsButton,\n    });\n  });\n</script>\n```",
           "name": "EspalierFlyout",
           "cssProperties": [
             {
@@ -24157,21 +24136,9 @@
             },
             {
               "kind": "field",
-              "name": "formItemDescription",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "formItemLabel",
-              "type": {
-                "text": "string | null"
-              },
+              "name": "formItemRelay",
               "privacy": "private",
-              "default": "null"
+              "default": "new FormItemRelay(() => this.shadowRoot?.querySelector(\"esp-pick-one\") as EspalierFormField | undefined)"
             },
             {
               "kind": "field",
@@ -24265,16 +24232,6 @@
               },
               "description": "Focus the picker input."
             },
-            {
-              "kind": "method",
-              "name": "syncFormItemDescription",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "getUpdateComplete",
@@ -27311,7 +27268,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/).\nThe decorative background uses the same internal visual-layer primitive as\n`esp-image` banners; the footer's public background tokens are unchanged.\n\nUse bare [`<esp-footer-link-group>`](/components/footer/link-group/) children\nwhen navigation groups should auto-flow independently through the grid.\n`columns` is a maximum: the grid always drops columns 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\nFor creator-controlled columns, wrap each ordered stack of groups in\n[`<esp-footer-column>`](/components/footer/column/). Each wrapper is one grid\nitem at wide sizes; below the footer's compact container breakpoint, the\ncolumns become full-width rows in their slotted order. `columns` remains the\nmaximum number of grid items per row:\n\n```html\n<esp-footer columns=\"3\">\n  <esp-footer-column>\n    <esp-footer-link-group heading=\"Product\">\n      <a href=\"/features\">Features</a>\n      <a href=\"/pricing\">Pricing</a>\n    </esp-footer-link-group>\n    <esp-footer-link-group heading=\"Company\">\n      <a href=\"/about\">About</a>\n      <a href=\"/careers\">Careers</a>\n    </esp-footer-link-group>\n  </esp-footer-column>\n  <esp-footer-column>\n    <esp-footer-link-group heading=\"Resources\">\n      <a href=\"/docs\">Documentation</a>\n      <a href=\"/support\">Support</a>\n    </esp-footer-link-group>\n  </esp-footer-column>\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/).\nThe decorative background uses the same internal visual-layer primitive as\n`esp-image` banners; the footer's public background tokens are unchanged.\n\nUse bare [`<esp-footer-link-group>`](/components/footer/link-group/) children\nwhen navigation groups should auto-flow independently through the grid.\n`columns` is a maximum: the grid always drops columns 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\nFor creator-controlled columns, wrap each ordered stack of groups in\n[`<esp-footer-column>`](/components/footer/column/). Each wrapper is one grid\nitem at wide sizes; below the footer's compact container breakpoint, the\ncolumns become full-width rows in their slotted order. `columns` remains the\nmaximum number of grid items per row:\n\n```html\n<esp-footer columns=\"3\">\n  <esp-footer-column>\n    <esp-footer-link-group heading=\"Product\">\n      <a href=\"/features\">Features</a>\n      <a href=\"/pricing\">Pricing</a>\n    </esp-footer-link-group>\n    <esp-footer-link-group heading=\"Company\">\n      <a href=\"/about\">About</a>\n      <a href=\"/careers\">Careers</a>\n    </esp-footer-link-group>\n  </esp-footer-column>\n  <esp-footer-column>\n    <esp-footer-link-group heading=\"Resources\">\n      <a href=\"/docs\">Documentation</a>\n      <a href=\"/support\">Support</a>\n    </esp-footer-link-group>\n  </esp-footer-column>\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-main-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": [
             {
@@ -29017,7 +28974,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Wraps fields with label and error message functionality. For more\ninformation about forms, read our\n[guide for working with forms](/espalier-guides/#forms).\n\nExactly one element belongs in the default slot. That control may be\nreplaced or moved to another `esp-form-item` after render: the old binding\nis removed before the new one is applied, including form-item-owned name,\ndescription, accessible-label, validation-listener, and help-target state.\nConsumer-authored name and description values are preserved. An empty or\nmulti-control default slot is reported asynchronously from the queued\nslotchange reconciliation, after synchronous DOM moves have settled; the\nerror cannot be caught around the mutation itself. The same invalid initial\nassignment is reported synchronously from `firstUpdated` and rejects the\ncomponent's first `updateComplete` promise.\n\n```html\n<style>\nesp-box.demo-form::part(box) {\n  display: grid;\n  gap: var(--esp-size-tiny-to-small);\n}\n</style>\n<esp-box class=\"demo-form\">\n  <esp-form-item label=\"Form item\" autofocus>\n    <esp-input></esp-input>\n  </esp-form-item>\n  <esp-button label=\"Form Things\"></esp-button>\n</esp-box>\n```",
+          "description": "Wraps fields with label and error message functionality. For more\ninformation about forms, read our\n[guide for working with forms](/espalier-guides/#forms).\n\nExactly one element belongs in the default slot. That control may be\nreplaced or moved to another `esp-form-item` after render: the old binding\nis removed before the new one is applied, including form-item-owned name,\ndescription, accessible-label, validation-listener, and help-target state.\nConsumer-authored name and description values are preserved. An empty or\nmulti-control default slot is reported asynchronously from the queued\nslotchange reconciliation, after synchronous DOM moves have settled; the\nerror cannot be caught around the mutation itself. The same invalid initial\nassignment is reported synchronously from `firstUpdated` and rejects the\ncomponent's first `updateComplete` promise.\n\n```html\n<style>\nesp-box.demo-form::part(box) {\n  display: grid;\n  gap: var(--esp-size-tiny-to-small);\n}\n</style>\n<esp-box class=\"demo-form\">\n  <esp-form-item label=\"Form item\" autofocus>\n    <esp-input></esp-input>\n  </esp-form-item>\n  <esp-button label=\"Form Things\"></esp-button>\n</esp-box>\n```\n\n### Errors and assistive technology\n\nWhile an error shows — from `error`, the bound `errorPool`, or the\ncontrol's own validation — the control's real focus target carries\n`aria-invalid=\"true\"` and the error joins its accessible description,\nafter the hint. A new or changed error is announced once through a polite\nstatus message; re-renders and clearing the error announce nothing. A\nwarning joins the description the same way, without `aria-invalid` or an\nannouncement. None of this changes how the error looks, and the required\nmarker is unchanged.\n\nChoice controls (the radio-button and checkbox groups, `esp-checkbox`,\n`esp-switch`, and the pickers) clear an error from `error` or `errorPool`\nas soon as the visitor changes them, because the change answers the\nquestion the error asked. Text controls, the date picker, and the slider\nkeep it until its owner changes it.\n\n```html\n<esp-box class=\"demo-form\">\n  <esp-form-item\n    label=\"Employer ID\"\n    hint=\"Use the format XX-XXXXXXX.\"\n    error=\"Enter the ID in the format XX-XXXXXXX.\">\n    <esp-input value=\"12345\"></esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\nA screen reader on that field hears its name, \"Employer ID\", that it is\ninvalid, and the description \"Use the format XX-XXXXXXX. Enter the ID in\nthe format XX-XXXXXXX.\" Plain native fields get the same treatment\nthrough IDREFs in their own tree; Espalier controls get it on the element\ninside their shadow root that takes focus.",
           "name": "EspalierFormItem",
           "cssProperties": [
             {
@@ -29146,6 +29103,39 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "handleFieldValueChanged",
+              "privacy": "private",
+              "readonly": true,
+              "description": "A visitor's change to a choice control answers the question an error\nfrom `error` or `errorPool` asked, and a radio choice can never be taken\nback, so the error clears at once. A native error is left alone: the\ncontrol revalidated before announcing the change, so it is already\ncurrent (an emptied required checkbox group raises its error again)."
+            },
+            {
+              "kind": "field",
+              "name": "errorAssignments",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Consumer writes to `error` and `errorPool` that leave an error, counted."
+            },
+            {
+              "kind": "field",
+              "name": "errorAssignmentsAtChange",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "-1",
+              "description": "The count when the field's change event reached this item, capturing."
+            },
+            {
+              "kind": "field",
+              "name": "captureFieldValueChanged",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "handleFieldInvalid",
@@ -29253,6 +29243,53 @@
               "default": "[]",
               "description": "The describedby tokens this component added on the last sync."
             },
+            {
+              "kind": "field",
+              "name": "messageId",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`esp-form-item-message-${++messageIdCounter}`",
+              "description": "A hidden light-DOM span carrying the visible error or warning text, so a\nplain native field can reference it the way it references the hint. It\nis assigned to a visually hidden slot so it stays in the flat tree, and\nis `hidden` itself, so it never paints or reads twice. Espalier controls\nreceive the same text through `setFormItemDescription` instead."
+            },
+            {
+              "kind": "field",
+              "name": "managedMessageEl",
+              "type": {
+                "text": "HTMLSpanElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "invalidField",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The plain field this item set `aria-invalid` on, if any."
+            },
+            {
+              "kind": "field",
+              "name": "announcement",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\"",
+              "description": "Text of the polite status region. Set when an error appears or changes,\nemptied when it clears, and untouched by unrelated re-renders, so each\nnew error is announced exactly once."
+            },
+            {
+              "kind": "field",
+              "name": "silentRestoreMessage",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The stashed native message being restored after a same-task move. The\nstash clears the error and the restore sets it again, which would\notherwise read as a new error and be announced a second time. Keyed on\nthe message, not the path: a control's own revalidation may report it\nback before the stash restore runs."
+            },
             {
               "kind": "field",
               "name": "hintContentObserver",
@@ -29565,6 +29602,68 @@
               },
               "description": "Mirror the hint onto the slotted field as its accessible\ndescription, preserving any consumer-set `aria-describedby`\ntokens (the same merge `esp-tooltip` performs on its trigger)."
             },
+            {
+              "kind": "field",
+              "name": "message",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "description": "The visible message: the error, or the warning when there is no error.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "fieldDescriptionText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string | null"
+                }
+              },
+              "description": "The hint followed by the visible error or warning, for a control's own mirror."
+            },
+            {
+              "kind": "method",
+              "name": "syncManagedMessage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "description": "Keep the hidden light-DOM message span current and return its id while\nthere is a message to describe."
+            },
+            {
+              "kind": "method",
+              "name": "syncFieldInvalid",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Mark the field invalid while an error shows. An Espalier control applies\nit to its own focus target through the handshake; a plain field gets the\nattribute directly, unless its author already set one."
+            },
+            {
+              "kind": "method",
+              "name": "removeFieldInvalid",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "field",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Remove only the invalid state this form item applied."
+            },
             {
               "kind": "method",
               "name": "removeFieldDescription",
@@ -36630,24 +36729,6 @@
       "kind": "javascript-module",
       "path": "dist/image/esp-image.js",
       "declarations": [
-        {
-          "kind": "function",
-          "name": "parseImageRatio",
-          "return": {
-            "type": {
-              "text": "string | null"
-            }
-          },
-          "parameters": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Resolve a supported CSS aspect-ratio string, or null when it is invalid."
-        },
         {
           "kind": "class",
           "description": "A responsive image with a native `<picture>` and an optional\nfocal-point-aware banner mode.\n\n`esp-image` accepts two authoring shapes:\n\n1. **Project a light-DOM `<picture>`** — the recommended form for published /\n   server-rendered markup. Provide a real `<picture>` (or a bare `<img>`) as\n   a child and `esp-image` projects it through a `<slot>`, adding only the\n   layout box, border, and lightbox wiring. Because the image lives in the\n   served HTML it is discoverable by the preload scanner and visible to\n   crawlers, and it is fetched exactly once.\n2. **Declare [esp-image-option](/components/image/image-option) children** —\n   the editor / fallback form. `esp-image` builds a shadow `<picture>` and\n   `srcset` from them. Use `local-image` when an editor needs a blob preview.\n\nSource precedence is `local-image` → a projected `<picture>` / `<img>` →\n`esp-image-option` children. In every mode the host reserves its layout box\nup front from `original-width` / `original-height`, when supplied.\n\n```html\n<!-- Projected native <picture> — published markup, crawlable + preloadable -->\n<esp-image original-width=\"1200\" original-height=\"800\" caption=\"A scenic mountain lake\">\n  <picture>\n    <source\n      srcset=\"https://picsum.photos/600/400 400w, https://picsum.photos/900/600 800w, https://picsum.photos/1200/800 1200w\"\n      sizes=\"100vw\"\n    />\n    <img src=\"https://picsum.photos/1200/800\" alt=\"A scenic mountain lake\" />\n  </picture>\n</esp-image>\n```\n\n```html\n<!-- esp-image-option children — editor / fallback form -->\n<esp-image\n  original-width=\"1200\"\n  original-height=\"800\"\n  low-res=\"https://picsum.photos/300/200\"\n  caption=\"A scenic mountain lake\"\n  sizes=\"100vw\"\n>\n  <esp-image-option width=\"400\" url=\"https://picsum.photos/600/400\"></esp-image-option>\n  <esp-image-option width=\"800\" url=\"https://picsum.photos/900/600\"></esp-image-option>\n  <esp-image-option width=\"1200\" url=\"https://picsum.photos/1200/800\"></esp-image-option>\n</esp-image>\n```\n\nOnce upgraded, the component measures its own width and updates `sizes` so a\ncard or gallery column does not over-fetch. The `sizes` attribute covers the\nserver-rendered initial fetch and the brief window before measurement:\n\n```html\n<esp-image\n  original-width=\"1200\"\n  original-height=\"800\"\n  low-res=\"https://picsum.photos/300/200\"\n  sizes=\"(max-width: 600px) 100vw, 320px\"\n  style=\"max-width: 320px;\"\n>\n  <esp-image-option width=\"320\" url=\"https://picsum.photos/640/427\"></esp-image-option>\n  <esp-image-option width=\"640\" url=\"https://picsum.photos/960/640\"></esp-image-option>\n</esp-image>\n```\n\nFor a long projected lazy-image list, `defer-offscreen` keeps the served\n`sizes` hint until an image approaches the viewport. This avoids replacing a\nsmall fallback selection with a larger candidate before the image can be\nseen. Eager projected images and every non-projected source keep the normal\nimmediate measured-size behavior.\n\nBanner mode gives all three source modes the same focal position, scrim,\ntexture, and semantic overlay stack. `ratio` applies at wide widths and\n`compact-ratio` below the component-relative compact threshold.\n\n```html\n<esp-image\n  banner\n  ratio=\"3/1\"\n  compact-ratio=\"3/2\"\n  focus=\"0.65 0.4\"\n  scrim=\"auto\"\n  scrim-strength=\"medium\"\n  content-position=\"bottom-start\"\n>\n  <img src=\"/assets/focus-picker-unsplash.jpg\" alt=\"A woman standing in a sunlit field with her back to the camera\" />\n  <h2 slot=\"overlay\">Grow somewhere wonderful</h2>\n</esp-image>\n```\n\n`banner-scheme` sets the banner's polarity and defaults to the active\nscheme: a light page lightens the image behind dark text, a dark page\ndarkens it behind light text. Fix either polarity explicitly when a banner\nmust not follow the page scheme:\n\n```html\n<esp-image banner ratio=\"3/1\" banner-scheme=\"light\" focus=\"0.65 0.4\">\n  <img src=\"/assets/focus-picker-unsplash.jpg\" alt=\"A woman standing in a sunlit field with her back to the camera\" />\n  <h2 slot=\"overlay\">Light banner: dark ink on a lifted image</h2>\n</esp-image>\n<esp-image banner ratio=\"3/1\" banner-scheme=\"dark\" focus=\"0.65 0.4\">\n  <img src=\"/assets/focus-picker-unsplash.jpg\" alt=\"A woman standing in a sunlit field with her back to the camera\" />\n  <h2 slot=\"overlay\">Dark banner: light ink on a deepened image</h2>\n</esp-image>\n```\n\n### The scrim follows its content\n\nA directional scrim holds full strength over at least the first 20% of the\nframe, and further when the overlay content reaches past it, so every line\nof a long heading on a short card cover sits on the full-strength scrim. A\nradial scrim grows an opaque core that covers centered content. Overlays\nthat already fit the 20% band render exactly as before.\n\n```html\n<div style=\"max-width: 24rem\">\n  <esp-image banner ratio=\"3/1\" compact-ratio=\"16/9\" focus=\"0.65 0.4\">\n    <img src=\"/assets/focus-picker-unsplash.jpg\" alt=\"A woman standing in a sunlit field with her back to the camera\" />\n    <h3 slot=\"overlay\">A three-line title stays on the scrim however short the cover gets</h3>\n  </esp-image>\n</div>\n```\n\n### Meeting an adjoining band\n\nA directional scrim is capped by `scrim-strength`, so even `strong` leaves\nroughly a quarter of the photograph showing at the very edge it is anchored\nto. `scrim-edge=\"flush\"` paints that edge at full alpha and relaxes to the\nordinary strength over `--esp-image-scrim-edge-depth` (12% of the gradient\naxis by default), so a banner dissolves into a section band directly beneath\nit with no seam. Above that band the scrim is unchanged — `flush` is an edge\ntreatment, not a heavier veil over the subject.\n\nThe join is exact because both sides paint the same token: when\n`banner-scheme` resolves to the page scheme the scrim ink *is*\n`--esp-color-background`, which is what [esp-section](/components/section)\npaints its band with. Put the banner in a section with no padding, directly\nabove a section in the same context:\n\n```html\n<esp-section style=\"--esp-section-max-width: none; --esp-section-padding-inline: 0; --esp-section-padding-block: 0;\">\n  <esp-image banner ratio=\"3/1\" scrim=\"bottom\" scrim-strength=\"strong\" scrim-edge=\"flush\" focus=\"0.65 0.4\">\n    <img src=\"/assets/focus-picker-unsplash.jpg\" alt=\"A woman standing in a sunlit field with her back to the camera\" />\n    <h2 slot=\"overlay\">Grow somewhere wonderful</h2>\n  </esp-image>\n</esp-section>\n<esp-section>\n  <p>The banner's bottom edge and this band are the same color, so the photograph fades into the page rather than stopping at a line.</p>\n</esp-section>\n```\n\n`flush` is inert unless the *resolved* scrim is directional — an `auto`\nscrim that resolves to `top` or `bottom` picks it up, while `none`, `flat`,\nand `radial` ignore it, having no anchored edge for it to close.\n\nIt is its own attribute rather than a fourth `scrim-strength` because the two\nare independent: `scrim-strength` is how much veil sits over the subject,\n`scrim-edge` is whether the anchored edge completes. A light veil with a\nclosed edge is exactly the composition this exists for, and a strength step\ncould not express it.\n\nA seamless tile can bleed across the join too — any `background-image` value,\na tile the application serves, a data URI, or a gradient. Hand the edge the\nsame background the adjoining section paints and it tiles up over the\nphotograph, fading out over the same band:\n\n```html\n<esp-image\n  banner\n  ratio=\"3/1\"\n  scrim=\"bottom\"\n  scrim-edge=\"flush\"\n  style=\"--esp-image-scrim-edge-image: repeating-linear-gradient(45deg, oklch(0.55 0.08 255 / 0.18) 0 6px, transparent 6px 18px); --esp-image-scrim-edge-size: 18px 18px; --esp-image-scrim-edge-depth: 22%;\"\n>\n  <img src=\"/assets/focus-picker-unsplash.jpg\" alt=\"A woman standing in a sunlit field with her back to the camera\" />\n</esp-image>\n```\n\nThe component anchors its own side of the tile to the scrim's edge, so the\nbanner's last tile row ends exactly at the join. Continuity into the section\nbelow is the consumer's half of the contract: the same `background-size`,\nand a `top`-anchored `background-position` on the adjoining band.\n\nEvery procedural preset supports `fine`, `medium`, and `coarse` scales.\n\n### Dots\n\nA uniform tiled ink screen (shown at `fine`):\n\n```html\n<esp-image banner ratio=\"3/1\" texture=\"dots\" texture-scale=\"fine\"><img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" /></esp-image>\n```\n\n### Halftone\n\nThe dot screen ramping toward the content edge (shown at `medium`):\n\n```html\n<esp-image banner ratio=\"3/1\" texture=\"halftone\" texture-scale=\"medium\"><img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" /></esp-image>\n```\n\n### Paper\n\nSoft fractal-noise mottle, like printed stock (shown at `coarse`):\n\n```html\n<esp-image banner ratio=\"3/1\" texture=\"paper\" texture-scale=\"coarse\"><img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" /></esp-image>\n```\n\n### Grain\n\nHigh-frequency film grain that also kills banding (shown at `fine`):\n\n```html\n<esp-image banner ratio=\"3/1\" texture=\"grain\" texture-scale=\"fine\"><img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" /></esp-image>\n```\n\n### Grunge\n\nThresholded turbulence, a distressed ink wash (shown at `medium`):\n\n```html\n<esp-image banner ratio=\"3/1\" texture=\"grunge\" texture-scale=\"medium\"><img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" /></esp-image>\n```\n\n### Scanlines\n\nHairline rules along the block axis (shown at `coarse`):\n\n```html\n<esp-image banner ratio=\"3/1\" texture=\"scanlines\" texture-scale=\"coarse\"><img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" /></esp-image>\n```\n\n### Duotone\n\nThe photo mapped onto two theme-derived hues:\n\n```html\n<esp-image banner ratio=\"3/1\" texture=\"duotone\"><img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" /></esp-image>\n```\n\n### Consumer texture tokens\n\nAny `background-image` value — a tile the application serves, a data URI,\nor a gradient — can be wired directly through the public consumer-image\ntoken path (the optional `@taprootio/espalier/textures/banner-textures.css`\nstylesheet ships `.esp-texture-paper`/`-grain`/`-grunge` classes with the\ntiles inlined as data URIs, so nothing needs asset configuration):\n\n```html\n<esp-image\n  banner\n  ratio=\"3/1\"\n  style=\"--esp-image-texture-image: repeating-linear-gradient(45deg, oklch(0.1 0 0 / 0.2) 0 2px, transparent 2px 7px); --esp-image-texture-blend-mode: multiply;\"\n>\n  <img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" />\n</esp-image>\n```\n\n### Registered textures\n\nWiring those tokens on every banner is verbose and not reusable. The\napplication's texture vocabulary lives on [esp-root](/components/root):\nregister the look once — `registerImageTexture(name, definition)` from\nthe module, or the root's `registerTexture` static in script-only\ncontexts — and any banner under the root selects it by name. Live\nbanners re-render on registration, so markup order and registration\norder never race, and the root's `registeredTextures()` enumerates the\npresets for an editor's texture picker:\n\n```html\n<esp-image id=\"registered-texture-banner\" banner ratio=\"3/1\" texture=\"pressed-paper\">\n  <img src=\"/assets/canvas-bg.jpg\" alt=\"A colorful floral pattern\" />\n</esp-image>\n<script>\n  const banner = findById(\"registered-texture-banner\");\n  const root = banner.closest(\"esp-root\");\n  root.constructor.registerTexture(\"pressed-paper\", {\n    image:\n      \"repeating-linear-gradient(-45deg, oklch(1 0 0 / 0.3) 0 3px, transparent 3px 9px)\",\n    blendMode: \"soft-light\",\n    opacity: 0.9,\n  });\n</script>\n```",
@@ -38560,6 +38641,40 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/image/image-ratio.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseImageRatio",
+          "return": {
+            "type": {
+              "text": "string | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string | null | undefined"
+              }
+            }
+          ],
+          "description": "Resolve a supported CSS aspect-ratio string, or null when it is invalid.\nA removed attribute arrives as `null` and is invalid like an empty one."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseImageRatio",
+          "declaration": {
+            "name": "parseImageRatio",
+            "module": "dist/image/image-ratio.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/image/image-texture-filters.js",
@@ -38823,21 +38938,9 @@
             },
             {
               "kind": "field",
-              "name": "formItemDescription",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "formItemLabel",
-              "type": {
-                "text": "string | null"
-              },
+              "name": "formItemRelay",
               "privacy": "private",
-              "default": "null"
+              "default": "new FormItemRelay(() => this.picker as EspalierFormField | undefined)"
             },
             {
               "kind": "field",
@@ -39115,16 +39218,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "syncFormItemDescription",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "field",
               "name": "handlePickerValueChanged",
@@ -43900,7 +43993,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Wraps a standard HTML input field,\nproviding value binding, input validation, and programmatic\nfocus for Espalier forms and UIs. It supports several input\ntypes, and has an `icon` attribute plus a slotted icon escape\nhatch.\n\n```html\n<esp-box>\n  <h2>esp-input example</h2>\n  <p>Hello from the input!</p>\n  <esp-input\n    value=\"Hello from the input!\"\n    icon=\"user-circle\"\n    icon-label=\"Open user details\">\n  </esp-input>\n</esp-box>\n<script>\n  const theInput = findByTagName(\"esp-input\")[0];\n  const theP = findByTagName(\"p\")[0];\n  theInput.addEventListener(\"esp-value-changed\", (ev) => {\n    theP.innerText = ev.detail.length ? ev.detail : \"The input is empty...\";\n  });\n</script>\n```\n\nInputs pick up zone theming from an ancestor's `context` attribute —\nsee the [theming guide](/espalier-guides/) for theme-defined contexts:\n\n```html\n<esp-box context=\"quiet\">\n  <esp-input label=\"Inside the quiet zone\"></esp-input>\n</esp-box>\n```\n\n### Email validation\n\nSet `input-type=\"email\"` to get built-in email validation. You\ncan customize the error message with `validation-message`:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Email address\">\n    <esp-input name=\"email\" input-type=\"email\" required\n      validation-message=\"Please enter a valid work email.\">\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\n### Number input with min/max\n\n```html\n<esp-box>\n  <esp-form-item label=\"Quantity (1-100)\">\n    <esp-input name=\"qty\" input-type=\"number\"\n      min=\"1\" max=\"100\" step=\"1\" required>\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\n### Telephone with locale-aware formatting\n\nThe `tel` type uses phone localities to parse and format phone\nnumbers on blur. The value is submitted as E.164 (e.g.\n`\"+15551234567\"`). Use `tel-localities` to specify which regions\nare accepted (space-separated region codes); when omitted, a\nsensible default set of 10 common regions is used.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Phone number\">\n    <esp-input name=\"phone\" input-type=\"tel\"\n      tel-localities=\"US CA GB\">\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\n### Date input with locale-aware mask\n\nThe `date` type displays a placeholder based on the user's\nlocale (e.g. \"MM/DD/YYYY\"). The user types freely and the\ninput parses the date on blur, submitting the value as\nISO 8601 (`2025-01-15`).\n\n```html\n<esp-box>\n  <esp-form-item label=\"Start date\">\n    <esp-input name=\"startDate\" input-type=\"date\" required>\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```",
+          "description": "Wraps a standard HTML input field,\nproviding value binding, input validation, and programmatic\nfocus for Espalier forms and UIs. It supports several input\ntypes, and has an `icon` attribute plus a slotted icon escape\nhatch.\n\n```html\n<esp-box>\n  <h2>esp-input example</h2>\n  <p>Hello from the input!</p>\n  <esp-input\n    value=\"Hello from the input!\"\n    icon=\"user-circle\"\n    icon-label=\"Open user details\">\n  </esp-input>\n</esp-box>\n<script>\n  const theInput = findByTagName(\"esp-input\")[0];\n  const theP = findByTagName(\"p\")[0];\n  theInput.addEventListener(\"esp-value-changed\", (ev) => {\n    theP.innerText = ev.detail.length ? ev.detail : \"The input is empty...\";\n  });\n</script>\n```\n\nInputs pick up zone theming from an ancestor's `context` attribute —\nsee the [theming guide](/espalier-guides/) for theme-defined contexts:\n\n```html\n<esp-box context=\"quiet\">\n  <esp-input label=\"Inside the quiet zone\"></esp-input>\n</esp-box>\n```\n\n### Email validation\n\nSet `input-type=\"email\"` to get built-in email validation. You\ncan customize the error message with `validation-message`:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Email address\">\n    <esp-input name=\"email\" input-type=\"email\" required\n      validation-message=\"Please enter a valid work email.\">\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\n### Number input with min/max\n\n```html\n<esp-box>\n  <esp-form-item label=\"Quantity (1-100)\">\n    <esp-input name=\"qty\" input-type=\"number\"\n      min=\"1\" max=\"100\" step=\"1\" required>\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\n### Decimal numbers\n\nA number input's native step defaults to `1`, which rejects every decimal.\nSet `step=\"any\"` to accept any decimal, or a numeric step such as `0.01`\nto limit precision.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Weight (kg)\" hint=\"Any decimal, such as 2.75.\">\n    <esp-input input-type=\"number\" step=\"any\" min=\"0\"></esp-input>\n  </esp-form-item>\n  <esp-form-item label=\"Price\" hint=\"To the cent.\">\n    <esp-input input-type=\"number\" step=\"0.01\" min=\"0\"></esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\n### Telephone with locale-aware formatting\n\nThe `tel` type uses phone localities to parse and format phone\nnumbers on blur. The value is submitted as E.164 (e.g.\n`\"+15551234567\"`). Use `tel-localities` to specify which regions\nare accepted (space-separated region codes); when omitted, a\nsensible default set of 10 common regions is used.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Phone number\">\n    <esp-input name=\"phone\" input-type=\"tel\"\n      tel-localities=\"US CA GB\">\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```\n\n### Date input with locale-aware mask\n\nThe `date` type displays a placeholder based on the user's\nlocale (e.g. \"MM/DD/YYYY\"). The user types freely and the\ninput parses the date on blur, submitting the value as\nISO 8601 (`2025-01-15`).\n\n```html\n<esp-box>\n  <esp-form-item label=\"Start date\">\n    <esp-input name=\"startDate\" input-type=\"date\" required>\n    </esp-input>\n  </esp-form-item>\n</esp-box>\n```",
           "name": "EspalierInput",
           "slots": [
             {
@@ -43938,7 +44031,7 @@
               "kind": "field",
               "name": "formCtrl",
               "privacy": "private",
-              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => this.value || null, getValidity: () => this._getValidity(), getValidationAnchor: (): HTMLElement => this.theInput.value ?? this, onReset: () => { this.value = \"\"; this._dateDisplayText = \"\"; this._dateManaged = false; this._telDisplayText = \"\"; this._telManaged = false; this._hasVisibleError = false; }, onRestore: (state: string) => { this.value = state; if (this.inputType === \"date\" && state) { this._restoreDateDisplay(state); } if (this.inputType === \"tel\" && state) { this._restoreTelDisplay(state); } }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
+              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => this.value || null, getValidity: () => this._getValidity(), getValidationAnchor: (): HTMLElement => this.theInput.value ?? this, onReset: () => { this.value = \"\"; this._dateDisplayText = \"\"; this._telDisplayText = \"\"; this._hasVisibleError = false; }, onRestore: (state: string) => { this.value = state; if (this.inputType === \"date\" && state) { this._restoreDateDisplay(state); } if (this.inputType === \"tel\" && state) { this._restoreTelDisplay(state); } }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
             },
             {
               "kind": "field",
@@ -43975,12 +44068,13 @@
             },
             {
               "kind": "field",
-              "name": "_dateManaged",
+              "name": "_ownValue",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
               "privacy": "private",
-              "default": "false"
+              "default": "null",
+              "description": "The value this input last produced itself, from typing or blur\nfinalization. A date or tel `value` that differs from it came from code,\nso its display text is recomputed — even when the host sets it from the\nvery `esp-value-changed` the blur emitted, before that update runs."
             },
             {
               "kind": "method",
@@ -44010,15 +44104,6 @@
               "privacy": "private",
               "default": "\"\""
             },
-            {
-              "kind": "field",
-              "name": "_telManaged",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
-            },
             {
               "kind": "method",
               "name": "_getPhoneLocalities",
@@ -44229,10 +44314,10 @@
               "kind": "field",
               "name": "step",
               "type": {
-                "text": "number | undefined"
+                "text": "number | \"any\" | undefined"
               },
               "privacy": "public",
-              "description": "Step value for `input-type=\"number\"`.",
+              "description": "Step value for `input-type=\"number\"`. `\"any\"` (as an attribute or the\nproperty) allows any decimal: without it the native default step of `1`\nflags every decimal as a step mismatch. Numeric steps are passed through\nunchanged.\n\n```html\n<esp-form-item label=\"Weight (kg)\">\n  <esp-input input-type=\"number\" step=\"any\" min=\"0\"></esp-input>\n</esp-form-item>\n```",
               "attribute": "step"
             },
             {
@@ -45467,9 +45552,9 @@
             {
               "name": "step",
               "type": {
-                "text": "number | undefined"
+                "text": "number | \"any\" | undefined"
               },
-              "description": "Step value for `input-type=\"number\"`.",
+              "description": "Step value for `input-type=\"number\"`. `\"any\"` (as an attribute or the\nproperty) allows any decimal: without it the native default step of `1`\nflags every decimal as a step mismatch. Numeric steps are passed through\nunchanged.\n\n```html\n<esp-form-item label=\"Weight (kg)\">\n  <esp-input input-type=\"number\" step=\"any\" min=\"0\"></esp-input>\n</esp-form-item>\n```",
               "fieldName": "step"
             },
             {
@@ -50676,16 +50761,6 @@
               "description": "Compatibility hook used by `esp-header` when inline navigation\nbecomes too wide. Prefer `mode`/`overflow` in application code.",
               "attribute": "sliding"
             },
-            {
-              "kind": "field",
-              "name": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "description": "Compatibility alias for the old vertical menu drawer state.",
-              "attribute": "collapsed"
-            },
             {
               "kind": "field",
               "name": "drawerOpen",
@@ -50831,17 +50906,6 @@
               ],
               "description": "Toggle the drawer overlay open or closed."
             },
-            {
-              "kind": "method",
-              "name": "toggleOpened",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Compatibility alias used by the old header menu integration."
-            },
             {
               "kind": "field",
               "name": "isDrawerOpen",
@@ -52088,14 +52152,6 @@
               "description": "Compatibility hook used by `esp-header` when inline navigation\nbecomes too wide. Prefer `mode`/`overflow` in application code.",
               "fieldName": "sliding"
             },
-            {
-              "name": "collapsed",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Compatibility alias for the old vertical menu drawer state.",
-              "fieldName": "collapsed"
-            },
             {
               "name": "scheme",
               "type": {
@@ -53042,7 +53098,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A Lit ReactiveController that implements bi-directional sticky behavior\nfor sidebar elements. Short sidebars stick below the header. Tall sidebars\n(taller than viewport) stick to the bottom when scrolling down, stick to\nthe top when scrolling up, and scroll naturally when direction reverses.\n\nUses only `position: sticky` (never `absolute`) so the element always\nremains in normal flow, preserving `min-content` grid column widths.\n\nWhen the header is not fixed (no `fixed-menus` attribute on `esp-page`),\nthe effective top offset tracks the header's visible bottom edge. As the\nheader scrolls out of view, the offset decreases from `headerHeight` to\n`0`, so the sidebar smoothly rises to the top of the viewport with no gap.",
+          "description": "A Lit ReactiveController that implements bi-directional sticky behavior\nfor sidebar elements. Short sidebars stick below the header. Tall sidebars\n(taller than viewport) stick to the bottom when scrolling down, stick to\nthe top when scrolling up, and scroll naturally when direction reverses.\n\nUses only `position: sticky` (never `absolute`) so the element always\nremains in normal flow, preserving `min-content` grid column widths.\n\nWhen the header is not fixed (`esp-page`'s `header-position` is not `fixed`),\nthe effective top offset tracks the header's visible bottom edge. As the\nheader scrolls out of view, the offset decreases from `headerHeight` to\n`0`, so the sidebar smoothly rises to the top of the viewport with no gap.",
           "name": "BiDirectionalStickyController",
           "members": [
             {
@@ -53226,7 +53282,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[ ...EspalierElementBase.styles, css` :host { --_esp-page-resolved-max-width: var( --esp-page-main-max-width, var(--esp-page-max-width, 1536px) ); --_esp-page-main-min-width: var( --esp-page-main-min-width, var(--esp-page-preview-min-main-width, 30rem) ); --_esp-page-preview-resolved-min-width: var( --esp-page-preview-width, var(--esp-page-preview-min-width, 22.5rem) ); --_esp-page-preview-resolved-max-width: var( --esp-page-preview-width, var(--esp-page-preview-max-width, 48rem) ); --_esp-page-flyout-resolved-min-width: var( --esp-page-flyout-width, var(--esp-page-flyout-min-width, 20rem) ); --_esp-page-flyout-resolved-max-width: var( --esp-page-flyout-width, var(--esp-page-flyout-max-width, 30rem) ); --_esp-page-preview-used-width: 0px; --_esp-page-flyout-used-width: 0px; --_esp-page-workspace-track: minmax( calc(var(--_esp-page-flyout-min) + var(--_esp-page-preview-min)), calc(var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width)) ); /* The cap sizes the main content *well*: the main track maxes at the cap and the surplus beyond the surface becomes canvas gutters. (Contract preserved from v2.1.0.) */ --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width)); /* Canvas gutter weights (physical left/right in LTR). The flexible gutters claim only the space left once the main track reaches its cap, so they appear exactly when the surface exceeds the cap — at any cap, with no viewport breakpoint (ADR-011). The start default keeps no leading gutter and lets all surplus collect trailing. Empty asides collapse to zero because the header and footer regions are inline-size-contained and no longer leak their min-content into the aside tracks (see the .esp-page-top / .esp-page-footer rules). The fr weights are written as 0fr/1fr (never bare 0) so the track list stays pairwise-interpolable and the flyout open/close can animate via grid track interpolation where supported. */ --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 1fr; /* Help and preview share an exact auxiliary workspace track before the outer trailing gutter. Opening help raises that track's safe minimum; the allocator supplies its concrete used width. */ --_esp-page-flyout-min: 0px; /* Preview starts at the surface edge before help. Reclaiming raises this minimum so the auxiliary track reserves both pane floors while the main track retains its own floor. */ --_esp-page-preview-min: 0px; /* A raised surface edge's drop shadow, cast in the trailing (inline-end) direction. The surface mirrors it onto both inline edges; a match-surface flyout casts only this trailing edge, so it lifts off the canvas while staying attached at its leading perforation (no shadow bleeding over the content it flies out from). */ --_esp-page-surface-edge-shadow: 0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow); /* Resolve the surface shadow/border once (public override plus the built-in default) so the value is readable downstream — the surface layer and the match-surface flyout contract both consume it, and it stays a single source of truth. */ --_esp-page-surface-shadow: var( --esp-page-surface-shadow, -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow), var(--_esp-page-surface-edge-shadow) ); --_esp-page-surface-border: var(--esp-page-surface-border, none); --_esp-page-fixed-header-offset: var( --esp-page-fixed-header-offset, var(--esp-header-height, calc(4.5 * var(--esp-size-small))) ); display: block; } :host([kind=\"narrow\"]) { --_esp-page-resolved-max-width: var( --esp-page-main-max-width, var(--esp-page-max-width, 768px) ); } :host([align=\"center\"]) { --_esp-page-gutter-left: 1fr; --_esp-page-gutter-right: 1fr; } :host([align=\"end\"]) { --_esp-page-gutter-left: 1fr; --_esp-page-gutter-right: 0fr; } /* Full is unbounded only while the consumer has not supplied the explicit main maximum. The internal marker is synchronized from the computed public token before workspace allocation, allowing a finite full-kind authoring surface to retain normal alignment gutters. */ :host([kind=\"full\"]) { --_esp-page-resolved-max-width: var( --esp-page-main-max-width, var(--esp-page-max-width, none) ); } :host([kind=\"full\"]:not([data-main-max-configured])) { --_esp-page-main-track: 1fr; --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 0fr; } /* Site: the marketing shell (ESP0174). The main region is always unbounded — slotted esp-section bands own their centered wells — so this is the unconfigured-full geometry, unconditionally, and align's gutter weights do not apply. Declared after the align rules so it wins on order. */ :host([kind=\"site\"]) { --_esp-page-resolved-max-width: none; --_esp-page-main-track: 1fr; --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 0fr; } /* Flyout placement ladder (ESP0111). Preview and help occupy an exact auxiliary track between the main surface and the outer gutter: 1. spare canvas is converted into the allocated auxiliary track while main remains at its natural maximum 2. help and preview contract to their floors 3. an eligible linked navigation rail yields before the main track narrows toward its minimum 4. if the complete main + preview + help minimums do not fit, JS requests the flyout's existing modal overlay presentation 5. mobile → the media query below releases the minimum and esp-flyout itself becomes a fixed overlay drawer. The flyout-open host attribute is maintained by syncFlyoutState (Blink cannot match :has() inside :host(), so the state is mirrored instead). Declared after the align/kind rules so the open state wins. */ :host([flyout-open]) { --_esp-page-flyout-min: var(--_esp-page-flyout-resolved-min-width); } :host([preview-reclaiming]) { --_esp-page-preview-min: var(--_esp-page-preview-resolved-min-width); } /* Configured defaults and retained drag/keyboard choices participate in the same grid minima as automatic allocation. This lets a target that must reclaim main do so instead of overflowing the gutter, while the allocator still clamps private used widths before they reach Grid. */ :host([flyout-open][data-workspace-targeted]) { --_esp-page-flyout-min: var(--_esp-page-flyout-used-width); } :host([preview-reclaiming][data-workspace-targeted]) { --_esp-page-preview-min: var(--_esp-page-preview-used-width); } :host([flyout-open]), :host([preview-reclaiming]) { --_esp-page-main-track: minmax( var(--_esp-page-main-min-width), var(--_esp-page-resolved-max-width) ); } :host([kind=\"full\"]:not([data-main-max-configured])[flyout-open]), :host([kind=\"full\"]:not([data-main-max-configured])[preview-reclaiming]), :host([kind=\"site\"][flyout-open]), :host([kind=\"site\"][preview-reclaiming]) { --_esp-page-main-track: minmax(var(--_esp-page-main-min-width), 1fr); } /* Deliberate ADR-011 exception: like the esp-menu drawer (same 50em threshold), the flyout's overlay rung is a genuinely viewport-level decision — below it the flyout leaves the grid for a fixed drawer, so the gutter must release the minimum it was reserving. */ @media ${unsafeCSS(COMPACT_VIEWPORT_MEDIA_QUERY)} { :host([flyout-open]) { --_esp-page-flyout-min: 0px; } :host([preview-reclaiming]) { --_esp-page-preview-min: 0px; } :host([flyout-open]), :host([preview-reclaiming]) { --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width)); } :host([kind=\"full\"]:not([data-main-max-configured])[flyout-open]), :host([kind=\"full\"]:not([data-main-max-configured])[preview-reclaiming]), :host([kind=\"site\"][flyout-open]), :host([kind=\"site\"][preview-reclaiming]) { --_esp-page-main-track: 1fr; } .esp-page > .esp-page-preview-space, .esp-page > .esp-page-workspace-resize-handles { display: none; } } /* A forced mode=\"overlay\" flyout is a fixed drawer at any viewport width, so its aside needs the same above-the-header hoist the sub-50em media rule gives the auto-mode drawer — without this the desktop drawer paints beneath the header (aside z 5 vs header z 20). Keyed off the flyout-overlay-open state attribute maintained by syncFlyoutState. */ :host([flyout-overlay-open]) .esp-page > div.esp-page-flyout { z-index: var(--esp-flyout-z-index, 3000); } /* A nested page's fixed drawer still participates in this page's main stacking context. Raise that complete context while the descendant modal is open so the drawer and vellum paint above this page's header instead of trapping their close control beneath it. */ :host([descendant-flyout-overlay-open]) .esp-page > div.esp-page-main { z-index: var(--esp-flyout-z-index, 3000); overflow: visible; } /* Trigger-anchored panels belong to the same document flow as their initiator. BiDirectionalStickyController can keep updating the wrapper's inline top, but position: static deliberately makes it inert until the anchored panel closes. */ :host([flyout-anchored]:not([flyout-full-height])) .esp-page > div.esp-page-flyout > .sticky-wrapper { position: static; } /* Full-document help owns the visible block-size rather than following one field. Span header through footer so the page footer cannot push a viewport-height panel out of view at the document boundary; the sticky controller pins this presentation to the viewport top. */ :host([flyout-full-height]) .esp-page > div.esp-page-flyout { grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 2); } /* Anchored help connects back to its trigger across a visible preview. Raise only the sized help wrapper above the preview surface; the bridge itself is non-interactive inside esp-flyout. */ :host([flyout-anchored][preview-visible]) .esp-page > div.esp-page-flyout { z-index: calc(var(--esp-page-header-z-index, 20) + 2); } slot[name=\"flyout\"]::slotted(esp-flyout) { --_esp-flyout-used-width: var(--_esp-page-flyout-used-width); --_esp-flyout-preview-bridge-width: 0px; --_esp-flyout-preview-anchor-display: none; } :host([preview-visible]) slot[name=\"flyout\"]::slotted(esp-flyout) { --_esp-flyout-preview-bridge-width: var(--_esp-page-preview-used-width); --_esp-flyout-preview-anchor-display: block; } /* Flyout surface-match contract. A slotted esp-flyout with match-surface lifts its trailing edge with the surface's edge shadow, so the panel reads as a raised peer of the content surface rather than the shadowless tear-off. The leading edge keeps its perforation (the border is not overridden) and casts no shadow, so it stays attached at the tear line instead of floating over the content it flies out from. Opt-in and page-scoped: a standalone flyout has no surface to match and is unaffected. */ slot[name=\"flyout\"]::slotted(esp-flyout[match-surface]) { --esp-flyout-shadow: var(--_esp-page-surface-edge-shadow); } /* Header alignment contract. Published on the slotted esp-header (not :host) so it never shadows an inherited or author override and only the header-slot header adopts it — see the host-token-defaults architecture rule and ADR-005. max-width is the resolved cap; lead is the fraction of surplus placed before the content (0 = start, .5 = center, 1 = end). */ slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: var(--_esp-page-resolved-max-width); --esp-header-content-lead: 0; } :host([align=\"center\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-lead: 0.5; } :host([align=\"end\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-lead: 1; } /* full has no cap; publish 100% (not none) so the header contract calc resolves to zero surplus and leaves the header full-bleed. */ :host([kind=\"full\"]:not([data-main-max-configured])) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: 100%; } /* Footer alignment mirrors the header behavior with footer-owned contract names. The full-bleed footer paints its own background; only its internal content adopts the page's cap and lead fraction. */ slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: var(--_esp-page-resolved-max-width); --esp-footer-content-lead: 0; } :host([align=\"center\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-lead: 0.5; } :host([align=\"end\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-lead: 1; } :host([kind=\"full\"]:not([data-main-max-configured])) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: 100%; } /* Site: bar content aligns with the section wells, not a main cap. One public token governs the header, the footer, and every esp-section well, and the well is centered — declared after the align lead rules so the centered site column wins on order. */ :host([kind=\"site\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: var(--esp-page-well-max-width, 72rem); --esp-header-content-lead: 0.5; } :host([kind=\"site\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: var(--esp-page-well-max-width, 72rem); --esp-footer-content-lead: 0.5; } /* Contained shell: the header and footer ride the surface instead of the full viewport, so the whole page reads as one band on the canvas. Only their column placement changes — the full-height canvas and surface layers already do the rest. */ :host([contained]) .esp-page > div.esp-page-top, :host([contained]) .esp-page > div.esp-page-footer { grid-column: surface; } /* On the surface the bar already spans the content width, so the header fills it (no content padding) and drops its own shadow — the continuous surface edge shadow does the framing. */ :host([contained]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-shadow: none; } /* The 100% contract belongs to the capped kinds, where the surface column IS the content width. A contained site keeps the shared well column (ESP0174) — sections and chrome must not split columns just because the shell is contained. */ :host([contained]:not([kind=\"site\"])) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: 100%; } :host([contained]:not([kind=\"site\"])) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: 100%; } :host([kind=\"narrow\"]) .esp-page > div.esp-page-main { /* The golden reading measure, from the shared token (ESP0174); 66ch remains the fallback and the default emission. */ > ::slotted(*) { max-inline-size: var(--esp-measure, 66ch); } } #dialog-drop-zone { z-index: 4000; position: absolute; } :host([preview-visible]) .esp-page > div.esp-page-preview-space > .esp-page-preview { display: block; } :host([workspace-resizable][preview-visible]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle, :host([workspace-resizable][flyout-open]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle { display: block; } :host([workspace-resizable]:not([data-workspace-resize-ready])) .esp-page > .esp-page-workspace-resize-handles { display: none; } :host([workspace-resizable][data-workspace-trailing-edge-exposed]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle, :host([workspace-resizable][data-workspace-position-held]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle { display: block; } /* Pointer-owned resizing controls the logical leading gutter. It stays fixed for zero-sum pane trades and yields as an outward drag consumes centered outside canvas, keeping the active separator under the pointer in both cases. On release JS moves this pixel track to the aligned target; the normal grid transition supplies the glide before the intrinsic fr gutter contract resumes. */ :host([data-workspace-position-held]) { --_esp-page-gutter-left: var(--_esp-page-resize-leading-gutter-width, 0px); --_esp-page-gutter-right: 1fr; } :host([data-workspace-resizing]) { cursor: col-resize; user-select: none; } /* The grid-track glide that makes programmatic open/close feel animated reads as cursor lag while a pointer owns the seam, and a mid-glide grid feeds stale geometry into the clamp ranges of the next keyboard step. Track changes must be immediate for the whole resize session, pointer or keyboard. */ :host([data-workspace-resizing]) .esp-page, :host([data-workspace-keyboard-adjusting]) .esp-page { transition: none; } /* The linked menu switches its rail to a fixed drawer, but light-DOM menu content can still contribute an intrinsic width to the page's sidebar track. Collapse the owning aside only after the validated header/menu handshake is active, so unmatched navigation remains visible and reachable. */ :host([data-preview-navigation-collapsed]) .esp-page > aside.esp-page-left { inline-size: 0; min-inline-size: 0; } :host([data-preview-measuring]) .esp-page { transition: none; } /* New preview layouts are validated against visible geometry before presentation. Keep that candidate surface non-visible so a rejected measurement can never flash on screen. */ :host([data-preview-validating]) .esp-page-preview { visibility: hidden; } .esp-page { /* dvh keeps the shell within the visible mobile viewport; 100vh is the fallback for browsers without dvh (dvh === vh on desktop). */ min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: [full-start canvas-left-start] var(--_esp-page-gutter-left) [canvas-left-end surface-start left-start] min-content [left-end main-start] var(--_esp-page-main-track) [main-end right-start] min-content [right-end surface-end canvas-right-start flyout-start] var(--_esp-page-workspace-track) [flyout-end] var(--_esp-page-gutter-right) [canvas-right-end full-end]; /* Animate the flyout claiming/releasing its track (and the gutter rebalance) via grid track interpolation where supported; elsewhere the modes still apply, just without the glide. Keep this 0.25s duration synchronized with WORKSPACE_RECENTER_DURATION in workspace-resize-session.ts. */ transition: grid-template-columns 0.25s ease; grid-template-rows: [top-start] min-content [top-end content-start] 1fr [content-end footer-start] min-content [footer-end]; overflow-x: clip; background: var(--esp-page-background, var(--esp-color-background)); line-height: 1.5; font-family: var( --_esp-font-body-effective, var(--esp-font-body, var(--_esp-font-body-fallback)) ); font-size: var(--esp-type-normal); color: var(--esp-color-text); position: relative; &:before { content: \" \"; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: var(--esp-page-background-image-opacity, 1); background-image: var(--esp-page-background-image, none); z-index: 1; } > div.esp-page-top { z-index: var(--esp-page-header-z-index, 20); grid-column: full; grid-row: top; position: relative; /* The header spans every column, so without inline-size containment its content's min-content would be distributed into the aside tracks and inflate them below the cap (the asides would never collapse). Contain it like the main well so it takes its width from the grid, not the grid from it. */ contain: inline-size; } /* Sidebar containers — act as the \"track\" for sticky positioning */ aside.esp-page-left, aside.esp-page-right { z-index: 5; grid-row: content; position: relative; /* No explicit height — grid stretch fills the 1fr row, and the aside's bottom edge constrains sticky children. */ } > aside.esp-page-left { grid-column: left; } > div.esp-page-main { z-index: 5; grid-column: main; grid-row: content; position: relative; /* Clip oversized content without becoming a scroll container. A hidden-overflow wrapper traps descendant view timelines (and sticky positioning) on this non-scrolling main well. */ overflow: clip; /* The main well's own background. Defaults to transparent, so the well shows the page background exactly as before; set it to give the content well a distinct card color, or leave it transparent (with --esp-page-surface-shadow: none) for content that floats directly on the page/canvas. */ background: var(--esp-page-main-background, transparent); /* The cap now lives in the main track (minmax(0, cap)); the element fills its column. contain: inline-size still holds because the track gives a definite inline size. */ contain: inline-size; } > aside.esp-page-right { grid-column: right; } /* A neutral div, unlike the left/right asides: the slotted esp-flyout is itself the complementary landmark, and an aside wrapper would nest a second, empty landmark around it. */ > div.esp-page-flyout { /* Sits after preview inside the exact auxiliary track and sizes to the allocated help width. Outer surplus remains in the following gutter rather than under an empty stretched wrapper. */ grid-column: flyout; justify-self: start; grid-row: content; z-index: 5; position: relative; inline-size: var(--_esp-page-flyout-used-width); min-inline-size: 0; margin-inline-start: var(--_esp-page-preview-used-width); /* In the drawer rung the fixed esp-flyout paints inside this wrapper's stacking context, so the wrapper itself must rise above the header (z 20) while staying below the dialog drop zone (4000). Uses the same token as the drawer — set it on the page (or higher) to move both together. */ @media ${unsafeCSS(COMPACT_VIEWPORT_MEDIA_QUERY)} { z-index: var(--esp-flyout-z-index, 3000); } } /* Preview begins at the surface edge and help is offset after its resolved width, producing the logical order main → preview → help inside their exact shared auxiliary track. */ > div.esp-page-preview-space { grid-column: flyout; grid-row: content; z-index: 4; position: relative; min-inline-size: 0; > .esp-page-preview { display: none; box-sizing: border-box; inline-size: var(--_esp-page-preview-used-width); position: relative; background: var( --esp-page-preview-background, var(--esp-page-main-background, var(--esp-page-background, var(--esp-color-background))) ); border-inline-start: var(--esp-page-preview-border, 1px dotted var(--esp-color-border)); box-shadow: var(--esp-page-preview-shadow, var(--_esp-page-surface-edge-shadow)); } } /* A transparent interaction layer keeps the complete hit target above main, preview, and anchored help without raising either painted surface (which would hide the help bridge). */ > div.esp-page-workspace-resize-handles { grid-column: flyout; grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 3); position: relative; min-inline-size: 0; pointer-events: none; } > div.esp-page-workspace-resize-handles > .esp-page-workspace-resize-handle { display: none; box-sizing: border-box; position: absolute; inset-block: 0; z-index: 3; inline-size: var(--esp-page-resize-handle-hit-size, 2.75rem); margin-inline-start: calc(-0.5 * var(--esp-page-resize-handle-hit-size, 2.75rem)); border: 0; outline: 0; background: transparent; cursor: col-resize; pointer-events: auto; touch-action: none; /* The target spans the seam so it remains reachable during document scroll. Focus draws a dashed line along the seam itself — the visible height of the dotted tear-off edge, capped at one viewport — kept in view by sticky positioning while the page scrolls. */ &::after { content: \"\"; display: block; position: sticky; inset-block-start: 0; box-sizing: border-box; inline-size: 0; margin-inline: auto; block-size: 100dvh; max-block-size: 100%; pointer-events: none; } &:focus-visible::after { border-inline-start: var( --esp-page-resize-focus-outline, 2px dashed var(--esp-color-link) ); /* Glow in the line's own color so the focused seam reads as one deliberate highlight rather than a neutral drop shadow. */ box-shadow: var(--esp-page-resize-focus-shadow, 0 0 0.75rem var(--esp-color-link)); } } > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle { inset-inline-start: 0; } > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle { inset-inline-start: var(--_esp-page-preview-used-width); } > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle { inset-inline-start: calc( var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width) ); } /* Keep token-sized probes outside the width-constrained gutter. If they lived inside a zero-width preview space, layout would clamp their rectangles to zero before JS could decide whether the reclaim rung should be activated. */ > .esp-page-preview-min-width-probe, > .esp-page-preview-default-width-probe, > .esp-page-preview-max-width-probe, > .esp-page-flyout-min-width-probe, > .esp-page-flyout-default-width-probe, > .esp-page-flyout-max-width-probe, > .esp-page-main-min-width-probe, > .esp-page-main-configured-max-width-probe, > .esp-page-main-max-width-probe, > .esp-page-resize-step-probe, > .esp-page-resize-large-step-probe { position: absolute; block-size: 0; visibility: hidden; pointer-events: none; contain: strict; } > .esp-page-preview-min-width-probe { inline-size: var(--_esp-page-preview-resolved-min-width); } > .esp-page-preview-max-width-probe { inline-size: var(--_esp-page-preview-resolved-max-width); } > .esp-page-preview-default-width-probe { inline-size: var(--esp-page-preview-default-width, 0px); } > .esp-page-flyout-min-width-probe { inline-size: var(--_esp-page-flyout-resolved-min-width); } > .esp-page-flyout-max-width-probe { inline-size: var(--_esp-page-flyout-resolved-max-width); } > .esp-page-flyout-default-width-probe { inline-size: var(--esp-page-flyout-default-width, 0px); } > .esp-page-main-min-width-probe { inline-size: var(--_esp-page-main-min-width); } > .esp-page-main-configured-max-width-probe { inline-size: var(--esp-page-main-max-width, 0px); } > .esp-page-main-max-width-probe { inline-size: var(--_esp-page-resolved-max-width); } > .esp-page-resize-step-probe { inline-size: var(--esp-page-resize-step, 1rem); } > .esp-page-resize-large-step-probe { inline-size: var(--esp-page-resize-large-step, 4rem); } /* Canvas: the outer gutter regions promoted to a styleable layer. They only have width once the viewport exceeds the cap, so with the transparent defaults they are invisible and narrow pages are unchanged. Painted below the content (z-index 5) and below the surface shadow. */ > .esp-page-canvas { /* Full height: the canvas runs top-to-bottom. In the default full-bleed chrome the header/footer span the gutters and cover it there, so only the content-band gutters show; in contained mode the header/footer sit on the surface and the canvas shows full height beside them. */ grid-row: top-start / footer-end; z-index: 1; position: relative; pointer-events: none; background-color: var(--esp-page-canvas-background, transparent); /* Image layer mirrors the page background-image knobs: a separate layer so its opacity does not fade the color. */ &::before { content: \"\"; position: absolute; inset: 0; background-image: var(--esp-page-canvas-background-image, none); opacity: var(--esp-page-canvas-background-image-opacity, 1); } } > .esp-page-canvas--left { grid-column: canvas-left; } > .esp-page-canvas--right { /* The canvas spans both the auxiliary workspace and the independent outer gutter beneath it. */ grid-column: canvas-right; } /* Surface: a transparent backdrop spanning the surface cluster (left aside + main + right aside). It carries the surface edge shadow (on by default) and an optional hairline border. The shadow casts outward into the gutters; when there are no gutters the surface fills the viewport and overflow-x: clip on .esp-page trims the shadow away — so it is visible only above the cap with no container query needed. */ > .esp-page-surface { grid-column: surface; /* Full height so the edge shadow is one continuous line from the header through the content to the footer — no fade at the region joins. */ grid-row: top-start / footer-end; z-index: 2; pointer-events: none; box-shadow: var(--_esp-page-surface-shadow); border-inline: var(--_esp-page-surface-border); } /* Internal wrapper manipulated by BiDirectionalStickyController */ .sticky-wrapper { will-change: top; display: block; width: 100%; position: sticky; top: 0; } > div.esp-page-footer { grid-column: full; grid-row: footer; z-index: 10; background: var(--esp-page-background, var(--esp-color-background)); /* Spans every column; contain it so its content does not inflate the aside tracks (see the header note above). */ contain: inline-size; } &.sticky-header { slot[name=\"header\"]::slotted(esp-header), slot[name=\"sidebar\"]::slotted(esp-menu), slot[name=\"right\"]::slotted(esp-menu) { --esp-menu-top-offset: var(--_esp-page-fixed-header-offset); } > div.esp-page-top { position: sticky; top: var(--esp-page-sticky-header-top, 0); } } &.fixed-header { slot[name=\"header\"]::slotted(esp-header), slot[name=\"sidebar\"]::slotted(esp-menu), slot[name=\"right\"]::slotted(esp-menu) { --esp-menu-top-offset: var(--_esp-page-fixed-header-offset); } > div.esp-page-top { position: fixed; top: 0; left: 0; right: 0; } > div.esp-page-main, > aside.esp-page-left, > aside.esp-page-right, > div.esp-page-flyout, > .esp-page-surface, > .esp-page-canvas { margin-top: var(--_esp-page-fixed-header-offset); } } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font-family: inherit; font-size: inherit; } /* Make sure text areas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } } .esp-page:has(esp-dialog[is-open=\"true\"]) { overflow: hidden; } /* Main and preview are additive surfaces. Once preview owns the trailing edge, move elevation there so no shadow appears at the internal join; the surface resumes its normal frame when preview is hidden. */ :host([preview-visible]) .esp-page > .esp-page-surface { box-shadow: none; } /* The preview's outer grid item and landmark span the complete page so the sticky wrapper's containing block has enough travel to remain pinned throughout a tall document. Its dynamic-viewport block size and vertical overflow keep its scroll position independent from the main document. It paints above full-bleed header chrome only in the preview's negotiated gutter track; overlay flyouts still take precedence by hiding preview presentation. */ .esp-page > div.esp-page-preview-space { grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 1); pointer-events: none; > .esp-page-preview { position: absolute; inset-block: 0; inset-inline-start: 0; pointer-events: auto; > .sticky-wrapper { block-size: 100vh; block-size: 100dvh; overflow-y: auto; /* Scroll preview first, then hand wheel/trackpad motion back to the document at either boundary (or when no overflow exists). */ overscroll-behavior-y: auto; } } } @media (prefers-reduced-motion: reduce) { .esp-page { transition: none; } } `, ]"
+          "default": "[ ...EspalierElementBase.styles, css` :host { --_esp-page-resolved-max-width: var(--esp-page-main-max-width, 1536px); --_esp-page-main-min-width: var(--esp-page-main-min-width, 30rem); --_esp-page-preview-resolved-min-width: var(--esp-page-preview-min-width, 22.5rem); --_esp-page-preview-resolved-max-width: var(--esp-page-preview-max-width, 48rem); --_esp-page-flyout-resolved-min-width: var(--esp-page-flyout-min-width, 20rem); --_esp-page-flyout-resolved-max-width: var(--esp-page-flyout-max-width, 30rem); --_esp-page-preview-used-width: 0px; --_esp-page-flyout-used-width: 0px; --_esp-page-workspace-track: minmax( calc(var(--_esp-page-flyout-min) + var(--_esp-page-preview-min)), calc(var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width)) ); /* The cap sizes the main content *well*: the main track maxes at the cap and the surplus beyond the surface becomes canvas gutters. (Contract preserved from v2.1.0.) */ --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width)); /* Canvas gutter weights (physical left/right in LTR). The flexible gutters claim only the space left once the main track reaches its cap, so they appear exactly when the surface exceeds the cap — at any cap, with no viewport breakpoint (ADR-011). The start default keeps no leading gutter and lets all surplus collect trailing. Empty asides collapse to zero because the header and footer regions are inline-size-contained and no longer leak their min-content into the aside tracks (see the .esp-page-top / .esp-page-footer rules). The fr weights are written as 0fr/1fr (never bare 0) so the track list stays pairwise-interpolable and the flyout open/close can animate via grid track interpolation where supported. */ --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 1fr; /* Help and preview share an exact auxiliary workspace track before the outer trailing gutter. Opening help raises that track's safe minimum; the allocator supplies its concrete used width. */ --_esp-page-flyout-min: 0px; /* Preview starts at the surface edge before help. Reclaiming raises this minimum so the auxiliary track reserves both pane floors while the main track retains its own floor. */ --_esp-page-preview-min: 0px; /* A raised surface edge's drop shadow, cast in the trailing (inline-end) direction. The surface mirrors it onto both inline edges; a match-surface flyout casts only this trailing edge, so it lifts off the canvas while staying attached at its leading perforation (no shadow bleeding over the content it flies out from). */ --_esp-page-surface-edge-shadow: 0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow); /* Resolve the surface shadow/border once (public override plus the built-in default) so the value is readable downstream — the surface layer and the match-surface flyout contract both consume it, and it stays a single source of truth. */ --_esp-page-surface-shadow: var( --esp-page-surface-shadow, -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow), var(--_esp-page-surface-edge-shadow) ); --_esp-page-surface-border: var(--esp-page-surface-border, none); --_esp-page-fixed-header-offset: var( --esp-page-fixed-header-offset, var(--esp-header-height, calc(4.5 * var(--esp-size-small))) ); display: block; } :host([kind=\"narrow\"]) { --_esp-page-resolved-max-width: var(--esp-page-main-max-width, 768px); } :host([align=\"center\"]) { --_esp-page-gutter-left: 1fr; --_esp-page-gutter-right: 1fr; } :host([align=\"end\"]) { --_esp-page-gutter-left: 1fr; --_esp-page-gutter-right: 0fr; } /* Full is unbounded only while the consumer has not supplied the explicit main maximum. The internal marker is synchronized from the computed public token before workspace allocation, allowing a finite full-kind authoring surface to retain normal alignment gutters. */ :host([kind=\"full\"]) { --_esp-page-resolved-max-width: var(--esp-page-main-max-width, none); } :host([kind=\"full\"]:not([data-main-max-configured])) { --_esp-page-main-track: 1fr; --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 0fr; } /* Site: the marketing shell (ESP0174). The main region is always unbounded — slotted esp-section bands own their centered wells — so this is the unconfigured-full geometry, unconditionally, and align's gutter weights do not apply. Declared after the align rules so it wins on order. */ :host([kind=\"site\"]) { --_esp-page-resolved-max-width: none; --_esp-page-main-track: 1fr; --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 0fr; } /* Flyout placement ladder (ESP0111). Preview and help occupy an exact auxiliary track between the main surface and the outer gutter: 1. spare canvas is converted into the allocated auxiliary track while main remains at its natural maximum 2. help and preview contract to their floors 3. an eligible linked navigation rail yields before the main track narrows toward its minimum 4. if the complete main + preview + help minimums do not fit, JS requests the flyout's existing modal overlay presentation 5. mobile → the media query below releases the minimum and esp-flyout itself becomes a fixed overlay drawer. The flyout-open host attribute is maintained by syncFlyoutState (Blink cannot match :has() inside :host(), so the state is mirrored instead). Declared after the align/kind rules so the open state wins. */ :host([flyout-open]) { --_esp-page-flyout-min: var(--_esp-page-flyout-resolved-min-width); } :host([preview-reclaiming]) { --_esp-page-preview-min: var(--_esp-page-preview-resolved-min-width); } /* Configured defaults and retained drag/keyboard choices participate in the same grid minima as automatic allocation. This lets a target that must reclaim main do so instead of overflowing the gutter, while the allocator still clamps private used widths before they reach Grid. */ :host([flyout-open][data-workspace-targeted]) { --_esp-page-flyout-min: var(--_esp-page-flyout-used-width); } :host([preview-reclaiming][data-workspace-targeted]) { --_esp-page-preview-min: var(--_esp-page-preview-used-width); } :host([flyout-open]), :host([preview-reclaiming]) { --_esp-page-main-track: minmax( var(--_esp-page-main-min-width), var(--_esp-page-resolved-max-width) ); } :host([kind=\"full\"]:not([data-main-max-configured])[flyout-open]), :host([kind=\"full\"]:not([data-main-max-configured])[preview-reclaiming]), :host([kind=\"site\"][flyout-open]), :host([kind=\"site\"][preview-reclaiming]) { --_esp-page-main-track: minmax(var(--_esp-page-main-min-width), 1fr); } /* Deliberate ADR-011 exception: like the esp-menu drawer (same 50em threshold), the flyout's overlay rung is a genuinely viewport-level decision — below it the flyout leaves the grid for a fixed drawer, so the gutter must release the minimum it was reserving. */ @media ${unsafeCSS(COMPACT_VIEWPORT_MEDIA_QUERY)} { :host([flyout-open]) { --_esp-page-flyout-min: 0px; } :host([preview-reclaiming]) { --_esp-page-preview-min: 0px; } :host([flyout-open]), :host([preview-reclaiming]) { --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width)); } :host([kind=\"full\"]:not([data-main-max-configured])[flyout-open]), :host([kind=\"full\"]:not([data-main-max-configured])[preview-reclaiming]), :host([kind=\"site\"][flyout-open]), :host([kind=\"site\"][preview-reclaiming]) { --_esp-page-main-track: 1fr; } .esp-page > .esp-page-preview-space, .esp-page > .esp-page-workspace-resize-handles { display: none; } } /* A forced mode=\"overlay\" flyout is a fixed drawer at any viewport width, so its aside needs the same above-the-header hoist the sub-50em media rule gives the auto-mode drawer — without this the desktop drawer paints beneath the header (aside z 5 vs header z 20). Keyed off the flyout-overlay-open state attribute maintained by syncFlyoutState. */ :host([flyout-overlay-open]) .esp-page > div.esp-page-flyout { z-index: var(--esp-flyout-z-index, 3000); } /* A nested page's fixed drawer still participates in this page's main stacking context. Raise that complete context while the descendant modal is open so the drawer and vellum paint above this page's header instead of trapping their close control beneath it. */ :host([descendant-flyout-overlay-open]) .esp-page > div.esp-page-main { z-index: var(--esp-flyout-z-index, 3000); overflow: visible; } /* Trigger-anchored panels belong to the same document flow as their initiator. BiDirectionalStickyController can keep updating the wrapper's inline top, but position: static deliberately makes it inert until the anchored panel closes. */ :host([flyout-anchored]:not([flyout-full-height])) .esp-page > div.esp-page-flyout > .sticky-wrapper { position: static; } /* Full-document help owns the visible block-size rather than following one field. Span header through footer so the page footer cannot push a viewport-height panel out of view at the document boundary; the sticky controller pins this presentation to the viewport top. */ :host([flyout-full-height]) .esp-page > div.esp-page-flyout { grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 2); } /* Anchored help connects back to its trigger across a visible preview. Raise only the sized help wrapper above the preview surface; the bridge itself is non-interactive inside esp-flyout. */ :host([flyout-anchored][preview-visible]) .esp-page > div.esp-page-flyout { z-index: calc(var(--esp-page-header-z-index, 20) + 2); } slot[name=\"flyout\"]::slotted(esp-flyout) { --_esp-flyout-used-width: var(--_esp-page-flyout-used-width); --_esp-flyout-preview-bridge-width: 0px; --_esp-flyout-preview-anchor-display: none; } :host([preview-visible]) slot[name=\"flyout\"]::slotted(esp-flyout) { --_esp-flyout-preview-bridge-width: var(--_esp-page-preview-used-width); --_esp-flyout-preview-anchor-display: block; } /* Flyout surface-match contract. A slotted esp-flyout with match-surface lifts its trailing edge with the surface's edge shadow, so the panel reads as a raised peer of the content surface rather than the shadowless tear-off. The leading edge keeps its perforation (the border is not overridden) and casts no shadow, so it stays attached at the tear line instead of floating over the content it flies out from. Opt-in and page-scoped: a standalone flyout has no surface to match and is unaffected. */ slot[name=\"flyout\"]::slotted(esp-flyout[match-surface]) { --esp-flyout-shadow: var(--_esp-page-surface-edge-shadow); } /* Header alignment contract. Published on the slotted esp-header (not :host) so it never shadows an inherited or author override and only the header-slot header adopts it — see the host-token-defaults architecture rule and ADR-005. max-width is the resolved cap; lead is the fraction of surplus placed before the content (0 = start, .5 = center, 1 = end). */ slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: var(--_esp-page-resolved-max-width); --esp-header-content-lead: 0; } :host([align=\"center\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-lead: 0.5; } :host([align=\"end\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-lead: 1; } /* full has no cap; publish 100% (not none) so the header contract calc resolves to zero surplus and leaves the header full-bleed. */ :host([kind=\"full\"]:not([data-main-max-configured])) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: 100%; } /* Footer alignment mirrors the header behavior with footer-owned contract names. The full-bleed footer paints its own background; only its internal content adopts the page's cap and lead fraction. */ slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: var(--_esp-page-resolved-max-width); --esp-footer-content-lead: 0; } :host([align=\"center\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-lead: 0.5; } :host([align=\"end\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-lead: 1; } :host([kind=\"full\"]:not([data-main-max-configured])) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: 100%; } /* Site: bar content aligns with the section wells, not a main cap. One public token governs the header, the footer, and every esp-section well, and the well is centered — declared after the align lead rules so the centered site column wins on order. */ :host([kind=\"site\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: var(--esp-page-well-max-width, 72rem); --esp-header-content-lead: 0.5; } :host([kind=\"site\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: var(--esp-page-well-max-width, 72rem); --esp-footer-content-lead: 0.5; } /* Contained shell: the header and footer ride the surface instead of the full viewport, so the whole page reads as one band on the canvas. Only their column placement changes — the full-height canvas and surface layers already do the rest. */ :host([contained]) .esp-page > div.esp-page-top, :host([contained]) .esp-page > div.esp-page-footer { grid-column: surface; } /* On the surface the bar already spans the content width, so the header fills it (no content padding) and drops its own shadow — the continuous surface edge shadow does the framing. */ :host([contained]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-shadow: none; } /* The 100% contract belongs to the capped kinds, where the surface column IS the content width. A contained site keeps the shared well column (ESP0174) — sections and chrome must not split columns just because the shell is contained. */ :host([contained]:not([kind=\"site\"])) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: 100%; } :host([contained]:not([kind=\"site\"])) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: 100%; } :host([kind=\"narrow\"]) .esp-page > div.esp-page-main { /* The golden reading measure, from the shared token (ESP0174); 66ch remains the fallback and the default emission. */ > ::slotted(*) { max-inline-size: var(--esp-measure, 66ch); } } #dialog-drop-zone { z-index: 4000; position: absolute; } :host([preview-visible]) .esp-page > div.esp-page-preview-space > .esp-page-preview { display: block; } :host([workspace-resizable][preview-visible]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle, :host([workspace-resizable][flyout-open]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle { display: block; } :host([workspace-resizable]:not([data-workspace-resize-ready])) .esp-page > .esp-page-workspace-resize-handles { display: none; } :host([workspace-resizable][data-workspace-trailing-edge-exposed]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle, :host([workspace-resizable][data-workspace-position-held]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle { display: block; } /* Pointer-owned resizing controls the logical leading gutter. It stays fixed for zero-sum pane trades and yields as an outward drag consumes centered outside canvas, keeping the active separator under the pointer in both cases. On release JS moves this pixel track to the aligned target; the normal grid transition supplies the glide before the intrinsic fr gutter contract resumes. */ :host([data-workspace-position-held]) { --_esp-page-gutter-left: var(--_esp-page-resize-leading-gutter-width, 0px); --_esp-page-gutter-right: 1fr; } :host([data-workspace-resizing]) { cursor: col-resize; user-select: none; } /* The grid-track glide that makes programmatic open/close feel animated reads as cursor lag while a pointer owns the seam, and a mid-glide grid feeds stale geometry into the clamp ranges of the next keyboard step. Track changes must be immediate for the whole resize session, pointer or keyboard. */ :host([data-workspace-resizing]) .esp-page, :host([data-workspace-keyboard-adjusting]) .esp-page { transition: none; } /* The linked menu switches its rail to a fixed drawer, but light-DOM menu content can still contribute an intrinsic width to the page's sidebar track. Collapse the owning aside only after the validated header/menu handshake is active, so unmatched navigation remains visible and reachable. */ :host([data-preview-navigation-collapsed]) .esp-page > aside.esp-page-left { inline-size: 0; min-inline-size: 0; } :host([data-preview-measuring]) .esp-page { transition: none; } /* New preview layouts are validated against visible geometry before presentation. Keep that candidate surface non-visible so a rejected measurement can never flash on screen. */ :host([data-preview-validating]) .esp-page-preview { visibility: hidden; } .esp-page { /* dvh keeps the shell within the visible mobile viewport; 100vh is the fallback for browsers without dvh (dvh === vh on desktop). */ min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: [full-start canvas-left-start] var(--_esp-page-gutter-left) [canvas-left-end surface-start left-start] min-content [left-end main-start] var(--_esp-page-main-track) [main-end right-start] min-content [right-end surface-end canvas-right-start flyout-start] var(--_esp-page-workspace-track) [flyout-end] var(--_esp-page-gutter-right) [canvas-right-end full-end]; /* Animate the flyout claiming/releasing its track (and the gutter rebalance) via grid track interpolation where supported; elsewhere the modes still apply, just without the glide. Keep this 0.25s duration synchronized with WORKSPACE_RECENTER_DURATION in workspace-resize-session.ts. */ transition: grid-template-columns 0.25s ease; grid-template-rows: [top-start] min-content [top-end content-start] 1fr [content-end footer-start] min-content [footer-end]; overflow-x: clip; background: var(--esp-page-background, var(--esp-color-background)); line-height: 1.5; font-family: var( --_esp-font-body-effective, var(--esp-font-body, var(--_esp-font-body-fallback)) ); font-size: var(--esp-type-normal); color: var(--esp-color-text); position: relative; &:before { content: \" \"; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: var(--esp-page-background-image-opacity, 1); background-image: var(--esp-page-background-image, none); z-index: 1; } > div.esp-page-top { z-index: var(--esp-page-header-z-index, 20); grid-column: full; grid-row: top; position: relative; /* The header spans every column, so without inline-size containment its content's min-content would be distributed into the aside tracks and inflate them below the cap (the asides would never collapse). Contain it like the main well so it takes its width from the grid, not the grid from it. */ contain: inline-size; } /* Sidebar containers — act as the \"track\" for sticky positioning */ aside.esp-page-left, aside.esp-page-right { z-index: 5; grid-row: content; position: relative; /* No explicit height — grid stretch fills the 1fr row, and the aside's bottom edge constrains sticky children. */ } > aside.esp-page-left { grid-column: left; } > div.esp-page-main { z-index: 5; grid-column: main; grid-row: content; position: relative; /* Clip oversized content without becoming a scroll container. A hidden-overflow wrapper traps descendant view timelines (and sticky positioning) on this non-scrolling main well. */ overflow: clip; /* The main well's own background. Defaults to transparent, so the well shows the page background exactly as before; set it to give the content well a distinct card color, or leave it transparent (with --esp-page-surface-shadow: none) for content that floats directly on the page/canvas. */ background: var(--esp-page-main-background, transparent); /* The cap now lives in the main track (minmax(0, cap)); the element fills its column. contain: inline-size still holds because the track gives a definite inline size. */ contain: inline-size; } > aside.esp-page-right { grid-column: right; } /* A neutral div, unlike the left/right asides: the slotted esp-flyout is itself the complementary landmark, and an aside wrapper would nest a second, empty landmark around it. */ > div.esp-page-flyout { /* Sits after preview inside the exact auxiliary track and sizes to the allocated help width. Outer surplus remains in the following gutter rather than under an empty stretched wrapper. */ grid-column: flyout; justify-self: start; grid-row: content; z-index: 5; position: relative; inline-size: var(--_esp-page-flyout-used-width); min-inline-size: 0; margin-inline-start: var(--_esp-page-preview-used-width); /* In the drawer rung the fixed esp-flyout paints inside this wrapper's stacking context, so the wrapper itself must rise above the header (z 20) while staying below the dialog drop zone (4000). Uses the same token as the drawer — set it on the page (or higher) to move both together. */ @media ${unsafeCSS(COMPACT_VIEWPORT_MEDIA_QUERY)} { z-index: var(--esp-flyout-z-index, 3000); } } /* Preview begins at the surface edge and help is offset after its resolved width, producing the logical order main → preview → help inside their exact shared auxiliary track. */ > div.esp-page-preview-space { grid-column: flyout; grid-row: content; z-index: 4; position: relative; min-inline-size: 0; > .esp-page-preview { display: none; box-sizing: border-box; inline-size: var(--_esp-page-preview-used-width); position: relative; background: var( --esp-page-preview-background, var(--esp-page-main-background, var(--esp-page-background, var(--esp-color-background))) ); border-inline-start: var(--esp-page-preview-border, 1px dotted var(--esp-color-border)); box-shadow: var(--esp-page-preview-shadow, var(--_esp-page-surface-edge-shadow)); } } /* A transparent interaction layer keeps the complete hit target above main, preview, and anchored help without raising either painted surface (which would hide the help bridge). */ > div.esp-page-workspace-resize-handles { grid-column: flyout; grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 3); position: relative; min-inline-size: 0; pointer-events: none; } > div.esp-page-workspace-resize-handles > .esp-page-workspace-resize-handle { display: none; box-sizing: border-box; position: absolute; inset-block: 0; z-index: 3; inline-size: var(--esp-page-resize-handle-hit-size, 2.75rem); margin-inline-start: calc(-0.5 * var(--esp-page-resize-handle-hit-size, 2.75rem)); border: 0; outline: 0; background: transparent; cursor: col-resize; pointer-events: auto; touch-action: none; /* The target spans the seam so it remains reachable during document scroll. Focus draws a dashed line along the seam itself — the visible height of the dotted tear-off edge, capped at one viewport — kept in view by sticky positioning while the page scrolls. */ &::after { content: \"\"; display: block; position: sticky; inset-block-start: 0; box-sizing: border-box; inline-size: 0; margin-inline: auto; block-size: 100dvh; max-block-size: 100%; pointer-events: none; } &:focus-visible::after { border-inline-start: var( --esp-page-resize-focus-outline, 2px dashed var(--esp-color-link) ); /* Glow in the line's own color so the focused seam reads as one deliberate highlight rather than a neutral drop shadow. */ box-shadow: var(--esp-page-resize-focus-shadow, 0 0 0.75rem var(--esp-color-link)); } } > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle { inset-inline-start: 0; } > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle { inset-inline-start: var(--_esp-page-preview-used-width); } > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle { inset-inline-start: calc( var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width) ); } /* Keep token-sized probes outside the width-constrained gutter. If they lived inside a zero-width preview space, layout would clamp their rectangles to zero before JS could decide whether the reclaim rung should be activated. */ > .esp-page-preview-min-width-probe, > .esp-page-preview-default-width-probe, > .esp-page-preview-max-width-probe, > .esp-page-flyout-min-width-probe, > .esp-page-flyout-default-width-probe, > .esp-page-flyout-max-width-probe, > .esp-page-main-min-width-probe, > .esp-page-main-configured-max-width-probe, > .esp-page-main-max-width-probe, > .esp-page-resize-step-probe, > .esp-page-resize-large-step-probe { position: absolute; block-size: 0; visibility: hidden; pointer-events: none; contain: strict; } > .esp-page-preview-min-width-probe { inline-size: var(--_esp-page-preview-resolved-min-width); } > .esp-page-preview-max-width-probe { inline-size: var(--_esp-page-preview-resolved-max-width); } > .esp-page-preview-default-width-probe { inline-size: var(--esp-page-preview-default-width, 0px); } > .esp-page-flyout-min-width-probe { inline-size: var(--_esp-page-flyout-resolved-min-width); } > .esp-page-flyout-max-width-probe { inline-size: var(--_esp-page-flyout-resolved-max-width); } > .esp-page-flyout-default-width-probe { inline-size: var(--esp-page-flyout-default-width, 0px); } > .esp-page-main-min-width-probe { inline-size: var(--_esp-page-main-min-width); } > .esp-page-main-configured-max-width-probe { inline-size: var(--esp-page-main-max-width, 0px); } > .esp-page-main-max-width-probe { inline-size: var(--_esp-page-resolved-max-width); } > .esp-page-resize-step-probe { inline-size: var(--esp-page-resize-step, 1rem); } > .esp-page-resize-large-step-probe { inline-size: var(--esp-page-resize-large-step, 4rem); } /* Canvas: the outer gutter regions promoted to a styleable layer. They only have width once the viewport exceeds the cap, so with the transparent defaults they are invisible and narrow pages are unchanged. Painted below the content (z-index 5) and below the surface shadow. */ > .esp-page-canvas { /* Full height: the canvas runs top-to-bottom. In the default full-bleed chrome the header/footer span the gutters and cover it there, so only the content-band gutters show; in contained mode the header/footer sit on the surface and the canvas shows full height beside them. */ grid-row: top-start / footer-end; z-index: 1; position: relative; pointer-events: none; background-color: var(--esp-page-canvas-background, transparent); /* Image layer mirrors the page background-image knobs: a separate layer so its opacity does not fade the color. */ &::before { content: \"\"; position: absolute; inset: 0; background-image: var(--esp-page-canvas-background-image, none); opacity: var(--esp-page-canvas-background-image-opacity, 1); } } > .esp-page-canvas--left { grid-column: canvas-left; } > .esp-page-canvas--right { /* The canvas spans both the auxiliary workspace and the independent outer gutter beneath it. */ grid-column: canvas-right; } /* Surface: a transparent backdrop spanning the surface cluster (left aside + main + right aside). It carries the surface edge shadow (on by default) and an optional hairline border. The shadow casts outward into the gutters; when there are no gutters the surface fills the viewport and overflow-x: clip on .esp-page trims the shadow away — so it is visible only above the cap with no container query needed. */ > .esp-page-surface { grid-column: surface; /* Full height so the edge shadow is one continuous line from the header through the content to the footer — no fade at the region joins. */ grid-row: top-start / footer-end; z-index: 2; pointer-events: none; box-shadow: var(--_esp-page-surface-shadow); border-inline: var(--_esp-page-surface-border); } /* Internal wrapper manipulated by BiDirectionalStickyController */ .sticky-wrapper { will-change: top; display: block; width: 100%; position: sticky; top: 0; } > div.esp-page-footer { grid-column: full; grid-row: footer; z-index: 10; background: var(--esp-page-background, var(--esp-color-background)); /* Spans every column; contain it so its content does not inflate the aside tracks (see the header note above). */ contain: inline-size; } &.sticky-header { slot[name=\"header\"]::slotted(esp-header), slot[name=\"sidebar\"]::slotted(esp-menu), slot[name=\"right\"]::slotted(esp-menu) { --esp-menu-top-offset: var(--_esp-page-fixed-header-offset); } > div.esp-page-top { position: sticky; top: var(--esp-page-sticky-header-top, 0); } } &.fixed-header { slot[name=\"header\"]::slotted(esp-header), slot[name=\"sidebar\"]::slotted(esp-menu), slot[name=\"right\"]::slotted(esp-menu) { --esp-menu-top-offset: var(--_esp-page-fixed-header-offset); } > div.esp-page-top { position: fixed; top: 0; left: 0; right: 0; } > div.esp-page-main, > aside.esp-page-left, > aside.esp-page-right, > div.esp-page-flyout, > .esp-page-surface, > .esp-page-canvas { margin-top: var(--_esp-page-fixed-header-offset); } } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font-family: inherit; font-size: inherit; } /* Make sure text areas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } } .esp-page:has(esp-dialog[is-open=\"true\"]) { overflow: hidden; } /* Main and preview are additive surfaces. Once preview owns the trailing edge, move elevation there so no shadow appears at the internal join; the surface resumes its normal frame when preview is hidden. */ :host([preview-visible]) .esp-page > .esp-page-surface { box-shadow: none; } /* The preview's outer grid item and landmark span the complete page so the sticky wrapper's containing block has enough travel to remain pinned throughout a tall document. Its dynamic-viewport block size and vertical overflow keep its scroll position independent from the main document. It paints above full-bleed header chrome only in the preview's negotiated gutter track; overlay flyouts still take precedence by hiding preview presentation. */ .esp-page > div.esp-page-preview-space { grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 1); pointer-events: none; > .esp-page-preview { position: absolute; inset-block: 0; inset-inline-start: 0; pointer-events: auto; > .sticky-wrapper { block-size: 100vh; block-size: 100dvh; overflow-y: auto; /* Scroll preview first, then hand wheel/trackpad motion back to the document at either boundary (or when no overflow exists). */ overscroll-behavior-y: auto; } } } @media (prefers-reduced-motion: reduce) { .esp-page { transition: none; } } `, ]"
         }
       ],
       "exports": [
@@ -53265,10 +53321,6 @@
               "description": "The shared content-column width in `kind=\"site\"`: the header and footer alignment contract and every `esp-section` well default to it. Defaults to `72rem`.",
               "name": "--esp-page-well-max-width"
             },
-            {
-              "description": "Legacy fallback for `--esp-page-main-max-width`.",
-              "name": "--esp-page-max-width"
-            },
             {
               "description": "The background image to display behind page content. Defaults to `none`.",
               "name": "--esp-page-background-image"
@@ -53357,18 +53409,6 @@
               "description": "Glow cast by the focused seam line, in the line's color. Defaults to `0 0 0.75rem var(--esp-color-link)`.",
               "name": "--esp-page-resize-focus-shadow"
             },
-            {
-              "description": "Legacy fixed-width alias that pins both preview bounds.",
-              "name": "--esp-page-preview-width"
-            },
-            {
-              "description": "Legacy fixed-width alias that pins both help bounds.",
-              "name": "--esp-page-flyout-width"
-            },
-            {
-              "description": "Legacy fallback for `--esp-page-main-min-width`.",
-              "name": "--esp-page-preview-min-main-width"
-            },
             {
               "description": "Offset reserved for fixed headers. Defaults to `var(--esp-header-height)`.",
               "name": "--esp-page-fixed-header-offset"
@@ -53476,7 +53516,7 @@
               "name": "preview-end-resize-handle"
             },
             {
-              "description": "The exposed trailing edge of in-grid flyout/help while help is the last auxiliary pane. ```html <style> esp-page.with-background { --esp-page-background-image: url(/assets/espalier-paper-texture.png); --esp-page-background-image-opacity: .5; } </style> <esp-page class=\"docs with-background\"> <div slot=\"header\" style=\"background-color: red;\">header</div> <div slot=\"sidebar\" style=\"background-color: green;\">sidebar</div> <div slot=\"right\" style=\"background-color: purple;\">right</div> <esp-footer slot=\"footer\" brand-text=\"Espalier\"></esp-footer> <div style=\"overflow: hidden;\"> <h2>With background image</h2> </div> </esp-page> ``` Use `align` to place the surface within the page once it hits its cap, and the canvas tokens to style the gutters. A low `--esp-page-max-width` is set here only so the gutters are visible inside the narrow demo frame; the surface edge shadow is on by default. ```html <style> esp-page.align-demo { --esp-page-max-width: 520px; --esp-page-canvas-background: var(--esp-color-layer-1); } </style> <esp-page class=\"docs align-demo\" align=\"center\"> <div slot=\"header\" style=\"background-color: red;\">header</div> <div slot=\"sidebar\" style=\"background-color: green;\">sidebar</div> <div slot=\"right\" style=\"background-color: purple;\">right</div> <esp-footer slot=\"footer\" brand-text=\"Espalier\"></esp-footer> <div style=\"background-color: black; overflow: hidden;\"> content </div> </esp-page> ```",
+              "description": "The exposed trailing edge of in-grid flyout/help while help is the last auxiliary pane. ```html <style> esp-page.with-background { --esp-page-background-image: url(/assets/espalier-paper-texture.png); --esp-page-background-image-opacity: .5; } </style> <esp-page class=\"docs with-background\"> <div slot=\"header\" style=\"background-color: red;\">header</div> <div slot=\"sidebar\" style=\"background-color: green;\">sidebar</div> <div slot=\"right\" style=\"background-color: purple;\">right</div> <esp-footer slot=\"footer\" brand-text=\"Espalier\"></esp-footer> <div style=\"overflow: hidden;\"> <h2>With background image</h2> </div> </esp-page> ``` Use `align` to place the surface within the page once it hits its cap, and the canvas tokens to style the gutters. A low `--esp-page-main-max-width` is set here only so the gutters are visible inside the narrow demo frame; the surface edge shadow is on by default. ```html <style> esp-page.align-demo { --esp-page-main-max-width: 520px; --esp-page-canvas-background: var(--esp-color-layer-1); } </style> <esp-page class=\"docs align-demo\" align=\"center\"> <div slot=\"header\" style=\"background-color: red;\">header</div> <div slot=\"sidebar\" style=\"background-color: green;\">sidebar</div> <div slot=\"right\" style=\"background-color: purple;\">right</div> <esp-footer slot=\"footer\" brand-text=\"Espalier\"></esp-footer> <div style=\"background-color: black; overflow: hidden;\"> content </div> </esp-page> ```",
               "name": "flyout-end-resize-handle"
             }
           ],
@@ -54905,22 +54945,10 @@
               },
               "privacy": "public",
               "default": "\"normal\"",
-              "description": "Header positioning behavior for the `header` slot.\n\n- `normal` lets the header scroll with content.\n- `sticky` keeps the header stuck to the top after it reaches it.\n- `fixed` pins the header to the viewport and offsets page content.\n\n`fixed-menus` remains as a compatibility alias for `fixed`.",
+              "description": "Header positioning behavior for the `header` slot.\n\n- `normal` lets the header scroll with content.\n- `sticky` keeps the header stuck to the top after it reaches it.\n- `fixed` pins the header to the viewport and offsets page content.",
               "attribute": "header-position",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "fixedMenus",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Compatibility alias for the original fixed header/sidebar behavior.\nPrefer `header-position=\"fixed\"` for new code.",
-              "attribute": "fixed-menus",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "previewOpen",
@@ -55863,18 +55891,9 @@
                 "text": "HeaderPosition"
               },
               "default": "\"normal\"",
-              "description": "Header positioning behavior for the `header` slot.\n\n- `normal` lets the header scroll with content.\n- `sticky` keeps the header stuck to the top after it reaches it.\n- `fixed` pins the header to the viewport and offsets page content.\n\n`fixed-menus` remains as a compatibility alias for `fixed`.",
+              "description": "Header positioning behavior for the `header` slot.\n\n- `normal` lets the header scroll with content.\n- `sticky` keeps the header stuck to the top after it reaches it.\n- `fixed` pins the header to the viewport and offsets page content.",
               "fieldName": "headerPosition"
             },
-            {
-              "name": "fixed-menus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Compatibility alias for the original fixed header/sidebar behavior.\nPrefer `header-position=\"fixed\"` for new code.",
-              "fieldName": "fixedMenus"
-            },
             {
               "name": "preview-open",
               "type": {
@@ -56782,7 +56801,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Component for selecting a single option from a list of\noptions. For selecting multiple options, see\n[esp-pick-some](/components/pickers/pick-some/).\n\n```html\n<esp-box>\n  <esp-form-item label=\"Pick a fruit\">\n    <esp-pick-one>\n      <esp-picker-item text=\"Apple\" value=\"apple\" icon=\"apple\"></esp-picker-item>\n      <esp-picker-item text=\"Cherry\" value=\"cherry\" icon=\"cherry\"></esp-picker-item>\n      <esp-picker-item text=\"Lemon\" value=\"lemon\" icon=\"lemon\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n```\n\n### Initial state\n\nSet the initially selected item using the `selected` attribute\non the `esp-picker-item`:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Pick a fruit\">\n    <esp-pick-one>\n      <esp-picker-item text=\"Apple\" value=\"apple\" icon=\"apple\"></esp-picker-item>\n      <esp-picker-item text=\"Cherry\" value=\"cherry\" icon=\"cherry\"></esp-picker-item>\n      <esp-picker-item text=\"Lemon\" value=\"lemon\" icon=\"lemon\" selected></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n```\n\n### Variable-height items\n\nItems with longer text wrap naturally. The menu sizes itself\nto fit the actual content height of each item:\n\n```html\n<div style=\"width: 260px\">\n  <esp-box>\n    <esp-form-item label=\"Pick a plan\">\n      <esp-pick-one>\n        <esp-picker-item\n          text=\"Basic - includes core features only\"\n          value=\"basic\">\n        </esp-picker-item>\n        <esp-picker-item\n          text=\"Pro - adds analytics, priority support, and advanced integrations for growing teams\"\n          value=\"pro\">\n        </esp-picker-item>\n        <esp-picker-item\n          text=\"Enterprise - everything in Pro plus SSO, audit logs, dedicated account management, and custom SLAs\"\n          value=\"enterprise\">\n        </esp-picker-item>\n        <esp-picker-item\n          text=\"Starter\"\n          value=\"starter\">\n        </esp-picker-item>\n      </esp-pick-one>\n    </esp-form-item>\n  </esp-box>\n</div>\n```\n\n### Typeahead (local filtering)\n\nAdd the `typeahead` attribute to let the user type to filter\nthe option list. The input becomes editable and the picker\nswitches to a filter icon on focus:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Pick a fruit\">\n    <esp-pick-one typeahead>\n      <esp-picker-item text=\"Apple\" value=\"apple\"></esp-picker-item>\n      <esp-picker-item text=\"Cherry\" value=\"cherry\"></esp-picker-item>\n      <esp-picker-item text=\"Lemon\" value=\"lemon\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n```\n\n### Typeahead (remote filtering)\n\nSet the `fetchItems` property to a callback that returns\nmatching items from a server. The picker debounces input\n(300 ms by default) and shows a loading indicator while\nthe request is in flight. Use the provided `AbortSignal`\nto cancel stale requests:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Search users\">\n    <esp-pick-one typeahead placeholder=\"Type a name\\u2026\">\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n<script>\n  const picker = findByTagName(\"esp-pick-one\")[0];\n  picker.fetchItems = async (query, signal) => {\n    const res = await fetch(\"/assets/data/grid-data.json\", { signal });\n    const all = await res.json();\n    const q = query.toLowerCase();\n    return all\n      .filter(u =>\n        u.first_name.toLowerCase().includes(q) ||\n        u.last_name.toLowerCase().includes(q))\n      .slice(0, 20)\n      .map(u => ({\n        text: `${u.first_name} ${u.last_name}`,\n        value: String(u.id),\n      }));\n  };\n</script>\n```",
+          "description": "Component for selecting a single option from a list of\noptions. For selecting multiple options, see\n[esp-pick-some](/components/pickers/pick-some/).\n\n```html\n<esp-box>\n  <esp-form-item label=\"Pick a fruit\">\n    <esp-pick-one>\n      <esp-picker-item text=\"Apple\" value=\"apple\" icon=\"apple\"></esp-picker-item>\n      <esp-picker-item text=\"Cherry\" value=\"cherry\" icon=\"cherry\"></esp-picker-item>\n      <esp-picker-item text=\"Lemon\" value=\"lemon\" icon=\"lemon\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n```\n\n### Initial state\n\nSet the initially selected item using the `selected` attribute\non the `esp-picker-item`:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Pick a fruit\">\n    <esp-pick-one>\n      <esp-picker-item text=\"Apple\" value=\"apple\" icon=\"apple\"></esp-picker-item>\n      <esp-picker-item text=\"Cherry\" value=\"cherry\" icon=\"cherry\"></esp-picker-item>\n      <esp-picker-item text=\"Lemon\" value=\"lemon\" icon=\"lemon\" selected></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n```\n\nAn item's `text`, `icon`, and `styles` may change after it is selected (a\nplaceholder label replaced once its data loads, say), and the picker shows\nthe new label; the selection follows the item's `value`.\n\n### Variable-height items\n\nItems with longer text wrap naturally. The menu sizes itself\nto fit the actual content height of each item:\n\n```html\n<div style=\"width: 260px\">\n  <esp-box>\n    <esp-form-item label=\"Pick a plan\">\n      <esp-pick-one>\n        <esp-picker-item\n          text=\"Basic - includes core features only\"\n          value=\"basic\">\n        </esp-picker-item>\n        <esp-picker-item\n          text=\"Pro - adds analytics, priority support, and advanced integrations for growing teams\"\n          value=\"pro\">\n        </esp-picker-item>\n        <esp-picker-item\n          text=\"Enterprise - everything in Pro plus SSO, audit logs, dedicated account management, and custom SLAs\"\n          value=\"enterprise\">\n        </esp-picker-item>\n        <esp-picker-item\n          text=\"Starter\"\n          value=\"starter\">\n        </esp-picker-item>\n      </esp-pick-one>\n    </esp-form-item>\n  </esp-box>\n</div>\n```\n\n### Typeahead (local filtering)\n\nAdd the `typeahead` attribute to let the user type to filter\nthe option list. The input becomes editable and the picker\nswitches to a filter icon on focus:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Pick a fruit\">\n    <esp-pick-one typeahead>\n      <esp-picker-item text=\"Apple\" value=\"apple\"></esp-picker-item>\n      <esp-picker-item text=\"Cherry\" value=\"cherry\"></esp-picker-item>\n      <esp-picker-item text=\"Lemon\" value=\"lemon\"></esp-picker-item>\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n```\n\n### Typeahead (remote filtering)\n\nSet the `fetchItems` property to a callback that returns\nmatching items from a server. The picker debounces input\n(300 ms by default) and shows a loading indicator while\nthe request is in flight. Use the provided `AbortSignal`\nto cancel stale requests:\n\n```html\n<esp-box>\n  <esp-form-item label=\"Search users\">\n    <esp-pick-one typeahead placeholder=\"Type a name\\u2026\">\n    </esp-pick-one>\n  </esp-form-item>\n</esp-box>\n<script>\n  const picker = findByTagName(\"esp-pick-one\")[0];\n  picker.fetchItems = async (query, signal) => {\n    const res = await fetch(\"/assets/data/grid-data.json\", { signal });\n    const all = await res.json();\n    const q = query.toLowerCase();\n    return all\n      .filter(u =>\n        u.first_name.toLowerCase().includes(q) ||\n        u.last_name.toLowerCase().includes(q))\n      .slice(0, 20)\n      .map(u => ({\n        text: `${u.first_name} ${u.last_name}`,\n        value: String(u.id),\n      }));\n  };\n</script>\n```",
           "name": "EspalierPickOne",
           "members": [
             {
@@ -57788,6 +57807,28 @@
                 "module": "dist/pickers/esp-picker-base.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "extractedElements",
+              "privacy": "private",
+              "default": "new WeakMap<EspalierPickerItem, { index: number; value: string }>()",
+              "description": "The elements of the latest extraction, each with the position and value\nits record was filed under. Each extraction replaces the map, so an\nelement from an earlier one is retired and its changes are ignored.",
+              "inheritedFrom": {
+                "name": "EspalierPickerBase",
+                "module": "dist/pickers/esp-picker-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "recordElements",
+              "privacy": "private",
+              "default": "new WeakMap<PickerItem, EspalierPickerItem>()",
+              "description": "The element behind each record extraction produced, and behind the\npicker's own copies of those records (see copyPickerItem). A\nrecord the host assigned has none, so an element never patches it.",
+              "inheritedFrom": {
+                "name": "EspalierPickerBase",
+                "module": "dist/pickers/esp-picker-base.js"
+              }
+            },
             {
               "kind": "method",
               "name": "extractSlotItems",
@@ -59012,6 +59053,24 @@
                 "module": "dist/pickers/esp-picker-base.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "seenDisplay",
+              "privacy": "private",
+              "default": "new Map<string, Pick<PickerItem, \"text\" | \"icon\" | \"styles\">>()",
+              "description": "The text, icon, and styles last seen on the item carrying each value."
+            },
+            {
+              "kind": "method",
+              "name": "followSelectedDisplay",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "A chip follows its item when that item's text, icon, or styles change (a\nplaceholder row replaced by the loaded one, or an item that first arrives\nafter its value was picked from remote results). A chip is left alone\nwhen no item carries its value, when it already shows the item's label,\nor when the item still shows what it showed last time: a re-flag of\n`selected` (from `setSelectedItems`) is not a change, so it never\noverwrites the label of a picked remote result. Nothing is reassigned\nwhen no chip moved."
+            },
             {
               "kind": "method",
               "name": "setSelectedItems",
@@ -59022,8 +59081,13 @@
                   "type": {
                     "text": "Array<PickerItem>"
                   }
+                },
+                {
+                  "name": "{ visitor = true }",
+                  "default": "{}"
                 }
-              ]
+              ],
+              "description": "Apply a new selection. A visitor's change validates, emits\n`esp-value-changed`, and keeps focus on the picker; a programmatic item\nupdate (`visitor: false`) syncs the form value quietly, as a\nprogrammatic `value` set does."
             },
             {
               "kind": "field",
@@ -59851,6 +59915,28 @@
                 "module": "dist/pickers/esp-picker-base.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "extractedElements",
+              "privacy": "private",
+              "default": "new WeakMap<EspalierPickerItem, { index: number; value: string }>()",
+              "description": "The elements of the latest extraction, each with the position and value\nits record was filed under. Each extraction replaces the map, so an\nelement from an earlier one is retired and its changes are ignored.",
+              "inheritedFrom": {
+                "name": "EspalierPickerBase",
+                "module": "dist/pickers/esp-picker-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "recordElements",
+              "privacy": "private",
+              "default": "new WeakMap<PickerItem, EspalierPickerItem>()",
+              "description": "The element behind each record extraction produced, and behind the\npicker's own copies of those records (see copyPickerItem). A\nrecord the host assigned has none, so an element never patches it.",
+              "inheritedFrom": {
+                "name": "EspalierPickerBase",
+                "module": "dist/pickers/esp-picker-base.js"
+              }
+            },
             {
               "kind": "method",
               "name": "extractSlotItems",
@@ -61567,6 +61653,20 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "extractedElements",
+              "privacy": "private",
+              "default": "new WeakMap<EspalierPickerItem, { index: number; value: string }>()",
+              "description": "The elements of the latest extraction, each with the position and value\nits record was filed under. Each extraction replaces the map, so an\nelement from an earlier one is retired and its changes are ignored."
+            },
+            {
+              "kind": "field",
+              "name": "recordElements",
+              "privacy": "private",
+              "default": "new WeakMap<PickerItem, EspalierPickerItem>()",
+              "description": "The element behind each record extraction produced, and behind the\npicker's own copies of those records (see copyPickerItem). A\nrecord the host assigned has none, so an element never patches it."
+            },
             {
               "kind": "method",
               "name": "extractSlotItems",
@@ -62504,6 +62604,14 @@
             }
           ],
           "events": []
+        },
+        {
+          "kind": "variable",
+          "name": "slotNodes"
+        },
+        {
+          "kind": "variable",
+          "name": "value"
         }
       ],
       "exports": [
@@ -62747,6 +62855,15 @@
               "default": "null",
               "description": "Scroll position owned by the current internal pick and its parent echo."
             },
+            {
+              "kind": "field",
+              "name": "visitorPicking",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "lastPoolFingerprint",
@@ -62999,6 +63116,19 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "applyPick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "pickerItem",
+                  "type": {
+                    "text": "PickerItem"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "selectItemByIndex",
@@ -63742,6 +63872,16 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_showingRemoteResults",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "The last list emitted came from `fetchItems`, not the canonical items."
+            },
             {
               "kind": "method",
               "name": "hostConnected",
@@ -63776,7 +63916,7 @@
                   }
                 }
               ],
-              "description": "Store the canonical (unfiltered) items. Re-filters if a query is active."
+              "description": "Store the canonical (unfiltered) items and re-emit them, re-filtered if a\nquery is active. While a remote result set is shown, only store them: the\ncanonical items must not replace the server's results."
             },
             {
               "kind": "method",
@@ -63794,7 +63934,7 @@
                   }
                 }
               ],
-              "description": "Set or clear the remote fetch callback."
+              "description": "Set or clear the remote fetch callback. A different callback cancels the\nold one's pending request and clears loading, so a late response cannot\nrestore results from a source that is gone; a new callback re-runs an\nactive query."
             },
             {
               "kind": "method",
@@ -63861,6 +64001,15 @@
               "description": "The current search text.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "showingRemoteResults",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Whether the shown items are a remote result set rather than canonical ones.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "isRemote",
@@ -63910,6 +64059,25 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "emit",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "PickerItem[]"
+                  }
+                }
+              ],
+              "description": "Emit a canonical (or locally filtered) list."
+            },
             {
               "kind": "method",
               "name": "runRemoteFetch",
@@ -65507,7 +65675,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Groups multiple [esp-radio-button](/components/radio-button)\ncomponents and ensures only one can be selected at a time.\nWorks with [esp-form-item](/components/form-item) for label\nand error message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Choose a size\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"small\">Small</esp-radio-button>\n      <esp-radio-button value=\"medium\" checked>Medium</esp-radio-button>\n      <esp-radio-button value=\"large\">Large</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-radio-button-group disabled>\n      <esp-radio-button value=\"a\">Option A</esp-radio-button>\n      <esp-radio-button value=\"b\" checked>Option B</esp-radio-button>\n      <esp-radio-button value=\"c\">Option C</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```",
+          "description": "Groups multiple [esp-radio-button](/components/radio-button)\ncomponents and ensures only one can be selected at a time.\nWorks with [esp-form-item](/components/form-item) for label\nand error message integration.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Choose a size\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"small\">Small</esp-radio-button>\n      <esp-radio-button value=\"medium\" checked>Medium</esp-radio-button>\n      <esp-radio-button value=\"large\">Large</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-form-item label=\"Disabled group\">\n    <esp-radio-button-group disabled>\n      <esp-radio-button value=\"a\">Option A</esp-radio-button>\n      <esp-radio-button value=\"b\" checked>Option B</esp-radio-button>\n      <esp-radio-button value=\"c\">Option C</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\nInside an `esp-form-item`, the group's `radiogroup` element takes the form\nitem's `label` as its accessible name and its hint as its description.\nWhile the form item shows an error, that element is `aria-invalid=\"true\"`\nand the error joins its description after the hint. Each option keeps its\nown label and is not described separately.",
           "name": "EspalierRadioButtonGroup",
           "slots": [
             {
@@ -65543,18 +65711,15 @@
             },
             {
               "kind": "field",
-              "name": "formItemDescription",
-              "type": {
-                "text": "string | null"
-              },
-              "privacy": "private",
-              "default": "null"
+              "name": "groupElement",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "describedRadios",
+              "name": "formItemDescription",
               "privacy": "private",
-              "default": "new Set<EspalierRadioButton>()"
+              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.groupElement.value, })",
+              "description": "The wrapping form item names, describes, and marks invalid the\n`radiogroup` element itself, so its label, hint, and error are read\nonce for the group rather than once per option (ESP0232)."
             },
             {
               "kind": "field",
@@ -65675,16 +65840,6 @@
                 }
               }
             },
-            {
-              "kind": "method",
-              "name": "applyFormItemDescription",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
             {
               "kind": "field",
               "name": "handleItemsSlotChange",
@@ -66691,7 +66846,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A radio button control for choosing one option from a set.\nUses Tabler SVG icons for selected and unselected states.\nShould be used inside an\n[esp-radio-button-group](/components/radio-button/group)\nfor single-select behavior.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Favorite color\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"red\">Red</esp-radio-button>\n      <esp-radio-button value=\"green\">Green</esp-radio-button>\n      <esp-radio-button value=\"blue\">Blue</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-radio-button-group>\n    <esp-radio-button checked value=\"small\">Small</esp-radio-button>\n    <esp-radio-button value=\"medium\">Medium</esp-radio-button>\n    <esp-radio-button disabled value=\"large\">Large</esp-radio-button>\n  </esp-radio-button-group>\n</esp-box>\n```",
+          "description": "A radio button control for choosing one option from a set.\nUses Tabler SVG icons for selected and unselected states.\nShould be used inside an\n[esp-radio-button-group](/components/radio-button/group)\nfor single-select behavior.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Favorite color\">\n    <esp-radio-button-group>\n      <esp-radio-button value=\"red\">Red</esp-radio-button>\n      <esp-radio-button value=\"green\">Green</esp-radio-button>\n      <esp-radio-button value=\"blue\">Blue</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```\n\n```html\n<esp-box>\n  <esp-radio-button-group>\n    <esp-radio-button checked value=\"small\">Small</esp-radio-button>\n    <esp-radio-button value=\"medium\">Medium</esp-radio-button>\n    <esp-radio-button disabled value=\"large\">Large</esp-radio-button>\n  </esp-radio-button-group>\n</esp-box>\n```\n\n### Group name and errors\n\nInside an `esp-form-item`, the group's `radiogroup` takes the form item's\n`label` as its accessible name and its hint as its description, so no\nwrapper `role=\"group\"` or `aria-labelledby` is needed. While the form item\nshows an error, the `radiogroup` is `aria-invalid=\"true\"`, the error joins\nits description after the hint, and the error is announced once. Each\nradio button keeps its own label. A choice clears an error set through the\nform item's `error` or `errorPool`, since a radio choice cannot be undone;\npick an option below to see it.\n\n```html\n<esp-box>\n  <esp-form-item label=\"Delivery speed\" hint=\"Express ships the same day.\" error=\"Choose a delivery speed.\">\n    <esp-radio-button-group required>\n      <esp-radio-button value=\"standard\">Standard</esp-radio-button>\n      <esp-radio-button value=\"express\">Express</esp-radio-button>\n    </esp-radio-button-group>\n  </esp-form-item>\n</esp-box>\n```",
           "name": "EspalierRadioButton",
           "cssProperties": [
             {
@@ -70605,7 +70760,7 @@
                   }
                 }
               ],
-              "description": "Inject (or replace) a Google Fonts `<link>` for a given slot.\n\nEach slot (`body`, `headings`, `brand`, `monospace`) gets at most one\n`<link>` scoped to this root instance by its correlationId,\nidentified by `data-esp-font=\"<correlationId>-<slot>\"`.\nThis ensures multiple `<esp-root>` instances on the same page\ndo not overwrite each other's font links."
+              "description": "Inject (or replace) a Google Fonts `<link>` for a given slot.\n\nEach slot (`body`, `headings`, `brand`, `monospace`) gets at most one\n`<link>` scoped to this root instance by its correlationId,\nowned by the key `root:<correlationId>-<slot>` (`data-esp-google-font-owner`).\nThis ensures multiple `<esp-root>` instances on the same page\ndo not overwrite each other's font links."
             },
             {
               "kind": "method",
@@ -77099,6 +77254,46 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/shared/enum-converter.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "enumConverter",
+          "return": {
+            "type": {
+              "text": "ComplexAttributeConverter<T>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "values",
+              "type": {
+                "text": "ReadonlySet<T>"
+              }
+            },
+            {
+              "name": "fallback",
+              "type": {
+                "text": "T"
+              }
+            }
+          ],
+          "description": "An attribute converter for a closed vocabulary: a value outside `values`\n(or a removed attribute) reads as `fallback`, and only members are\nreflected. Pair it with a `willUpdate` check for values set as properties."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "enumConverter",
+          "declaration": {
+            "name": "enumConverter",
+            "module": "dist/shared/enum-converter.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/shared/esp-bus.js",
@@ -77869,9 +78064,9 @@
           "kind": "variable",
           "name": "ESP_EVENTS",
           "type": {
-            "text": "{\n  // ── Shared cross-control protocols ──────────────────────────\n  VALUE_CHANGED: \"esp-value-changed\",\n  VALIDITY_CHANGED: VALIDITY_CHANGED_EVENT,\n  CLICKED: \"esp-clicked\",\n\n  // ── Action menu ─────────────────────────────────────────────\n  ACTION_MENU_SELECT: \"esp-action-menu-select\",\n\n  // ── Burger ──────────────────────────────────────────────────\n  BURGER_OPENED: \"esp-burger-opened\",\n  BURGER_CLOSED: \"esp-burger-closed\",\n\n  // ── Details ─────────────────────────────────────────────────\n  DETAILS_TOGGLE: \"esp-details-toggle\",\n  DETAILS_GROUP_CHANGE: \"esp-details-group-change\",\n\n  // ── Dialog ──────────────────────────────────────────────────\n  DIALOG_OPENED: \"esp-dialog-opened\",\n  DIALOG_CLOSING: \"esp-dialog-closing\",\n  DIALOG_CLOSED: \"esp-dialog-closed\",\n\n  // ── File upload ─────────────────────────────────────────────\n  FILE_UPLOAD_FILES_SELECTED: \"esp-file-upload-files-selected\",\n\n  // ── Flyout ──────────────────────────────────────────────────\n  FLYOUT_OPENED: \"esp-flyout-opened\",\n  FLYOUT_CLOSED: \"esp-flyout-closed\",\n  FLYOUT_STATE_CHANGED: \"esp-flyout-state-changed\",\n\n  // ── Focus picker ────────────────────────────────────────────\n  FOCUS_PICKER_CHANGED: \"esp-focus-picker-changed\",\n\n  // ── Form ────────────────────────────────────────────────────\n  FORM_DIALOG_CLOSE_REQUESTED: \"esp-form-dialog-close-requested\",\n  FORM_SUBMIT: \"esp-form-submit\",\n  FORM_SUBMIT_RESPONSE: \"esp-form-submit-response\",\n  FORM_SUBMIT_ERROR: \"esp-form-submit-error\",\n\n  // ── Grid ────────────────────────────────────────────────────\n  GRID_EVENT: \"esp-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  // ── Header ──────────────────────────────────────────────────\n  HEADER_THEME_TOGGLE: \"esp-header-theme-toggle\",\n\n  // ── Image upload ────────────────────────────────────────────\n  IMAGE_UPLOAD_FILE_SELECTED: \"esp-image-upload-file-selected\",\n  IMAGE_UPLOAD_FILE_REMOVED: \"esp-image-upload-file-removed\",\n  IMAGE_UPLOAD_FILES_REJECTED: \"esp-image-upload-files-rejected\",\n  IMAGE_UPLOAD_RETRY: \"esp-image-upload-retry\",\n  IMAGE_UPLOAD_IMAGES_REORDERED: \"esp-image-upload-images-reordered\",\n\n  // ── Info / input / lightbox ─────────────────────────────────\n  INFO_DESTROY: \"esp-info-destroy\",\n  INPUT_ICON_CLICKED: \"esp-input-icon-clicked\",\n  LIGHTBOX_CHANGED: \"esp-lightbox-changed\",\n\n  // ── Menu ────────────────────────────────────────────────────\n  MENU_GROUP_TOGGLE: \"esp-menu-group-toggle\",\n  MENU_DRAWER_OPENED: \"esp-menu-drawer-opened\",\n  MENU_DRAWER_CLOSED: \"esp-menu-drawer-closed\",\n  MENU_DRAWER_PRESENTED: \"esp-menu-drawer-presented\",\n\n  // ── Page / picker menu / popover ────────────────────────────\n  PAGE_WORKSPACE_RESIZE: \"esp-page-workspace-resize\",\n  PICKER_MENU_SELECTION_CHANGED: \"esp-picker-menu-selection-changed\",\n  PICKER_MENU_CLOSE_REQUESTED: \"esp-picker-menu-close-requested\",\n  PICKER_MENU_DISMISS_REQUESTED: \"esp-picker-menu-dismiss-requested\",\n  PICKER_MENU_RANGE_CHANGED: \"esp-picker-menu-range-changed\",\n  POPOVER_OPENED: \"esp-popover-opened\",\n  POPOVER_CLOSED: \"esp-popover-closed\",\n\n  // ── Search ──────────────────────────────────────────────────\n  SEARCH_REQUESTED: \"esp-search-requested\",\n  SEARCH_RESULT_SELECTED: \"esp-search-result-selected\",\n  SEARCH_CLOSED: \"esp-search-closed\",\n\n  // ── Tabs ────────────────────────────────────────────────────\n  TAB_GROUP_CHANGED: \"esp-tab-group-changed\",\n\n  // ── Tree ────────────────────────────────────────────────────\n  TREE_SELECT: \"esp-tree-select\",\n  TREE_TOGGLE: \"esp-tree-toggle\",\n  TREE_GRAFT_REQUEST: \"esp-tree-graft-request\",\n  TREE_GRAFT: \"esp-tree-graft\",\n  TREE_EDIT: \"esp-tree-edit\",\n  TREE_DELETE: \"esp-tree-delete\",\n  TREE_MOVE_UP: \"esp-tree-move-up\",\n  TREE_MOVE_DOWN: \"esp-tree-move-down\",\n  TREE_CUT: \"esp-tree-cut\",\n  TREE_PASTE_CHILD: \"esp-tree-paste-child\",\n  TREE_GRAFT_INPUT: \"esp-tree-graft-input\",\n}"
+            "text": "{\n  // ── Shared cross-control protocols ──────────────────────────\n  VALUE_CHANGED: \"esp-value-changed\",\n  VALIDITY_CHANGED: VALIDITY_CHANGED_EVENT,\n  CLICKED: \"esp-clicked\",\n\n  // ── Action menu ─────────────────────────────────────────────\n  ACTION_MENU_SELECT: \"esp-action-menu-select\",\n\n  // ── Burger ──────────────────────────────────────────────────\n  BURGER_OPENED: \"esp-burger-opened\",\n  BURGER_CLOSED: \"esp-burger-closed\",\n\n  // ── Details ─────────────────────────────────────────────────\n  DETAILS_TOGGLE: \"esp-details-toggle\",\n  DETAILS_GROUP_CHANGE: \"esp-details-group-change\",\n\n  // ── Dialog ──────────────────────────────────────────────────\n  DIALOG_OPENED: \"esp-dialog-opened\",\n  DIALOG_CLOSING: \"esp-dialog-closing\",\n  DIALOG_CLOSED: \"esp-dialog-closed\",\n\n  // ── File upload ─────────────────────────────────────────────\n  FILE_UPLOAD_FILES_SELECTED: \"esp-file-upload-files-selected\",\n\n  // ── Flyout ──────────────────────────────────────────────────\n  FLYOUT_OPENED: \"esp-flyout-opened\",\n  FLYOUT_CLOSED: \"esp-flyout-closed\",\n  FLYOUT_STATE_CHANGED: \"esp-flyout-state-changed\",\n\n  // ── Focus picker ────────────────────────────────────────────\n  FOCUS_PICKER_CHANGED: \"esp-focus-picker-changed\",\n\n  // ── Form ────────────────────────────────────────────────────\n  FORM_DIALOG_CLOSE_REQUESTED: \"esp-form-dialog-close-requested\",\n  FORM_SUBMIT: \"esp-form-submit\",\n  FORM_SUBMIT_RESPONSE: \"esp-form-submit-response\",\n  FORM_SUBMIT_ERROR: \"esp-form-submit-error\",\n\n  // ── Grid ────────────────────────────────────────────────────\n  GRID_EVENT: \"esp-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  // ── Header ──────────────────────────────────────────────────\n  HEADER_THEME_TOGGLE: \"esp-header-theme-toggle\",\n\n  // ── Image upload ────────────────────────────────────────────\n  IMAGE_UPLOAD_FILE_SELECTED: \"esp-image-upload-file-selected\",\n  IMAGE_UPLOAD_FILE_REMOVED: \"esp-image-upload-file-removed\",\n  IMAGE_UPLOAD_FILES_REJECTED: \"esp-image-upload-files-rejected\",\n  IMAGE_UPLOAD_RETRY: \"esp-image-upload-retry\",\n  IMAGE_UPLOAD_IMAGES_REORDERED: \"esp-image-upload-images-reordered\",\n\n  // ── Info / input / lightbox ─────────────────────────────────\n  INFO_DESTROY: \"esp-info-destroy\",\n  INPUT_ICON_CLICKED: \"esp-input-icon-clicked\",\n  LIGHTBOX_CHANGED: \"esp-lightbox-changed\",\n\n  // ── Menu ────────────────────────────────────────────────────\n  MENU_GROUP_TOGGLE: \"esp-menu-group-toggle\",\n  MENU_DRAWER_OPENED: \"esp-menu-drawer-opened\",\n  MENU_DRAWER_CLOSED: \"esp-menu-drawer-closed\",\n  MENU_DRAWER_PRESENTED: \"esp-menu-drawer-presented\",\n\n  // ── Page / picker menu / popover ────────────────────────────\n  PAGE_WORKSPACE_RESIZE: \"esp-page-workspace-resize\",\n  PICKER_MENU_SELECTION_CHANGED: \"esp-picker-menu-selection-changed\",\n  PICKER_MENU_CLOSE_REQUESTED: \"esp-picker-menu-close-requested\",\n  PICKER_MENU_DISMISS_REQUESTED: \"esp-picker-menu-dismiss-requested\",\n  PICKER_MENU_RANGE_CHANGED: \"esp-picker-menu-range-changed\",\n  POPOVER_OPENED: \"esp-popover-opened\",\n  POPOVER_CLOSED: \"esp-popover-closed\",\n\n  // ── Search ──────────────────────────────────────────────────\n  SEARCH_REQUESTED: \"esp-search-requested\",\n  SEARCH_RESULT_SELECTED: \"esp-search-result-selected\",\n  SEARCH_CLOSED: \"esp-search-closed\",\n\n  // ── Tabs ────────────────────────────────────────────────────\n  TAB_GROUP_CHANGED: \"esp-tab-group-changed\",\n\n  // ── Tree ────────────────────────────────────────────────────\n  TREE_SELECT: \"esp-tree-select\",\n  TREE_TOGGLE: \"esp-tree-toggle\",\n  TREE_GRAFT_REQUEST: \"esp-tree-graft-request\",\n  TREE_GRAFT: \"esp-tree-graft\",\n  TREE_EDIT: \"esp-tree-edit\",\n  TREE_DELETE: \"esp-tree-delete\",\n  TREE_MOVE_UP: \"esp-tree-move-up\",\n  TREE_MOVE_DOWN: \"esp-tree-move-down\",\n  TREE_CUT: \"esp-tree-cut\",\n  TREE_PASTE_CHILD: \"esp-tree-paste-child\",\n  TREE_GRAFT_INPUT: \"esp-tree-graft-input\",\n\n  // ── Video ───────────────────────────────────────────────────\n  VIDEO_READY: \"esp-video-ready\",\n  VIDEO_PLAY: \"esp-video-play\",\n  VIDEO_ERROR: \"esp-video-error\",\n}"
           },
-          "default": "{ // ── Shared cross-control protocols ────────────────────────── VALUE_CHANGED: \"esp-value-changed\", VALIDITY_CHANGED: VALIDITY_CHANGED_EVENT, CLICKED: \"esp-clicked\", // ── Action menu ───────────────────────────────────────────── ACTION_MENU_SELECT: \"esp-action-menu-select\", // ── Burger ────────────────────────────────────────────────── BURGER_OPENED: \"esp-burger-opened\", BURGER_CLOSED: \"esp-burger-closed\", // ── Details ───────────────────────────────────────────────── DETAILS_TOGGLE: \"esp-details-toggle\", DETAILS_GROUP_CHANGE: \"esp-details-group-change\", // ── Dialog ────────────────────────────────────────────────── DIALOG_OPENED: \"esp-dialog-opened\", DIALOG_CLOSING: \"esp-dialog-closing\", DIALOG_CLOSED: \"esp-dialog-closed\", // ── File upload ───────────────────────────────────────────── FILE_UPLOAD_FILES_SELECTED: \"esp-file-upload-files-selected\", // ── Flyout ────────────────────────────────────────────────── FLYOUT_OPENED: \"esp-flyout-opened\", FLYOUT_CLOSED: \"esp-flyout-closed\", FLYOUT_STATE_CHANGED: \"esp-flyout-state-changed\", // ── Focus picker ──────────────────────────────────────────── FOCUS_PICKER_CHANGED: \"esp-focus-picker-changed\", // ── Form ──────────────────────────────────────────────────── FORM_DIALOG_CLOSE_REQUESTED: \"esp-form-dialog-close-requested\", FORM_SUBMIT: \"esp-form-submit\", FORM_SUBMIT_RESPONSE: \"esp-form-submit-response\", FORM_SUBMIT_ERROR: \"esp-form-submit-error\", // ── Grid ──────────────────────────────────────────────────── GRID_EVENT: \"esp-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\", // ── Header ────────────────────────────────────────────────── HEADER_THEME_TOGGLE: \"esp-header-theme-toggle\", // ── Image upload ──────────────────────────────────────────── IMAGE_UPLOAD_FILE_SELECTED: \"esp-image-upload-file-selected\", IMAGE_UPLOAD_FILE_REMOVED: \"esp-image-upload-file-removed\", IMAGE_UPLOAD_FILES_REJECTED: \"esp-image-upload-files-rejected\", IMAGE_UPLOAD_RETRY: \"esp-image-upload-retry\", IMAGE_UPLOAD_IMAGES_REORDERED: \"esp-image-upload-images-reordered\", // ── Info / input / lightbox ───────────────────────────────── INFO_DESTROY: \"esp-info-destroy\", INPUT_ICON_CLICKED: \"esp-input-icon-clicked\", LIGHTBOX_CHANGED: \"esp-lightbox-changed\", // ── Menu ──────────────────────────────────────────────────── MENU_GROUP_TOGGLE: \"esp-menu-group-toggle\", MENU_DRAWER_OPENED: \"esp-menu-drawer-opened\", MENU_DRAWER_CLOSED: \"esp-menu-drawer-closed\", MENU_DRAWER_PRESENTED: \"esp-menu-drawer-presented\", // ── Page / picker menu / popover ──────────────────────────── PAGE_WORKSPACE_RESIZE: \"esp-page-workspace-resize\", PICKER_MENU_SELECTION_CHANGED: \"esp-picker-menu-selection-changed\", PICKER_MENU_CLOSE_REQUESTED: \"esp-picker-menu-close-requested\", PICKER_MENU_DISMISS_REQUESTED: \"esp-picker-menu-dismiss-requested\", PICKER_MENU_RANGE_CHANGED: \"esp-picker-menu-range-changed\", POPOVER_OPENED: \"esp-popover-opened\", POPOVER_CLOSED: \"esp-popover-closed\", // ── Search ────────────────────────────────────────────────── SEARCH_REQUESTED: \"esp-search-requested\", SEARCH_RESULT_SELECTED: \"esp-search-result-selected\", SEARCH_CLOSED: \"esp-search-closed\", // ── Tabs ──────────────────────────────────────────────────── TAB_GROUP_CHANGED: \"esp-tab-group-changed\", // ── Tree ──────────────────────────────────────────────────── TREE_SELECT: \"esp-tree-select\", TREE_TOGGLE: \"esp-tree-toggle\", TREE_GRAFT_REQUEST: \"esp-tree-graft-request\", TREE_GRAFT: \"esp-tree-graft\", TREE_EDIT: \"esp-tree-edit\", TREE_DELETE: \"esp-tree-delete\", TREE_MOVE_UP: \"esp-tree-move-up\", TREE_MOVE_DOWN: \"esp-tree-move-down\", TREE_CUT: \"esp-tree-cut\", TREE_PASTE_CHILD: \"esp-tree-paste-child\", TREE_GRAFT_INPUT: \"esp-tree-graft-input\", }",
+          "default": "{ // ── Shared cross-control protocols ────────────────────────── VALUE_CHANGED: \"esp-value-changed\", VALIDITY_CHANGED: VALIDITY_CHANGED_EVENT, CLICKED: \"esp-clicked\", // ── Action menu ───────────────────────────────────────────── ACTION_MENU_SELECT: \"esp-action-menu-select\", // ── Burger ────────────────────────────────────────────────── BURGER_OPENED: \"esp-burger-opened\", BURGER_CLOSED: \"esp-burger-closed\", // ── Details ───────────────────────────────────────────────── DETAILS_TOGGLE: \"esp-details-toggle\", DETAILS_GROUP_CHANGE: \"esp-details-group-change\", // ── Dialog ────────────────────────────────────────────────── DIALOG_OPENED: \"esp-dialog-opened\", DIALOG_CLOSING: \"esp-dialog-closing\", DIALOG_CLOSED: \"esp-dialog-closed\", // ── File upload ───────────────────────────────────────────── FILE_UPLOAD_FILES_SELECTED: \"esp-file-upload-files-selected\", // ── Flyout ────────────────────────────────────────────────── FLYOUT_OPENED: \"esp-flyout-opened\", FLYOUT_CLOSED: \"esp-flyout-closed\", FLYOUT_STATE_CHANGED: \"esp-flyout-state-changed\", // ── Focus picker ──────────────────────────────────────────── FOCUS_PICKER_CHANGED: \"esp-focus-picker-changed\", // ── Form ──────────────────────────────────────────────────── FORM_DIALOG_CLOSE_REQUESTED: \"esp-form-dialog-close-requested\", FORM_SUBMIT: \"esp-form-submit\", FORM_SUBMIT_RESPONSE: \"esp-form-submit-response\", FORM_SUBMIT_ERROR: \"esp-form-submit-error\", // ── Grid ──────────────────────────────────────────────────── GRID_EVENT: \"esp-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\", // ── Header ────────────────────────────────────────────────── HEADER_THEME_TOGGLE: \"esp-header-theme-toggle\", // ── Image upload ──────────────────────────────────────────── IMAGE_UPLOAD_FILE_SELECTED: \"esp-image-upload-file-selected\", IMAGE_UPLOAD_FILE_REMOVED: \"esp-image-upload-file-removed\", IMAGE_UPLOAD_FILES_REJECTED: \"esp-image-upload-files-rejected\", IMAGE_UPLOAD_RETRY: \"esp-image-upload-retry\", IMAGE_UPLOAD_IMAGES_REORDERED: \"esp-image-upload-images-reordered\", // ── Info / input / lightbox ───────────────────────────────── INFO_DESTROY: \"esp-info-destroy\", INPUT_ICON_CLICKED: \"esp-input-icon-clicked\", LIGHTBOX_CHANGED: \"esp-lightbox-changed\", // ── Menu ──────────────────────────────────────────────────── MENU_GROUP_TOGGLE: \"esp-menu-group-toggle\", MENU_DRAWER_OPENED: \"esp-menu-drawer-opened\", MENU_DRAWER_CLOSED: \"esp-menu-drawer-closed\", MENU_DRAWER_PRESENTED: \"esp-menu-drawer-presented\", // ── Page / picker menu / popover ──────────────────────────── PAGE_WORKSPACE_RESIZE: \"esp-page-workspace-resize\", PICKER_MENU_SELECTION_CHANGED: \"esp-picker-menu-selection-changed\", PICKER_MENU_CLOSE_REQUESTED: \"esp-picker-menu-close-requested\", PICKER_MENU_DISMISS_REQUESTED: \"esp-picker-menu-dismiss-requested\", PICKER_MENU_RANGE_CHANGED: \"esp-picker-menu-range-changed\", POPOVER_OPENED: \"esp-popover-opened\", POPOVER_CLOSED: \"esp-popover-closed\", // ── Search ────────────────────────────────────────────────── SEARCH_REQUESTED: \"esp-search-requested\", SEARCH_RESULT_SELECTED: \"esp-search-result-selected\", SEARCH_CLOSED: \"esp-search-closed\", // ── Tabs ──────────────────────────────────────────────────── TAB_GROUP_CHANGED: \"esp-tab-group-changed\", // ── Tree ──────────────────────────────────────────────────── TREE_SELECT: \"esp-tree-select\", TREE_TOGGLE: \"esp-tree-toggle\", TREE_GRAFT_REQUEST: \"esp-tree-graft-request\", TREE_GRAFT: \"esp-tree-graft\", TREE_EDIT: \"esp-tree-edit\", TREE_DELETE: \"esp-tree-delete\", TREE_MOVE_UP: \"esp-tree-move-up\", TREE_MOVE_DOWN: \"esp-tree-move-down\", TREE_CUT: \"esp-tree-cut\", TREE_PASTE_CHILD: \"esp-tree-paste-child\", TREE_GRAFT_INPUT: \"esp-tree-graft-input\", // ── Video ─────────────────────────────────────────────────── VIDEO_READY: \"esp-video-ready\", VIDEO_PLAY: \"esp-video-play\", VIDEO_ERROR: \"esp-video-error\", }",
           "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```"
         }
       ],
@@ -78044,6 +78239,46 @@
             "module": "../header/esp-header.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "VideoErrorDetail",
+          "declaration": {
+            "name": "VideoErrorDetail",
+            "module": "../video/esp-video.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VideoErrorReason",
+          "declaration": {
+            "name": "VideoErrorReason",
+            "module": "../video/esp-video.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VideoPlayDetail",
+          "declaration": {
+            "name": "VideoPlayDetail",
+            "module": "../video/esp-video.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VideoReadyDetail",
+          "declaration": {
+            "name": "VideoReadyDetail",
+            "module": "../video/esp-video.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VideoSourceMode",
+          "declaration": {
+            "name": "VideoSourceMode",
+            "module": "../video/esp-video.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PageWorkspaceResizeDetail",
@@ -79015,7 +79250,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Mirrors `esp-form-item` text into the same shadow root as a form\ncontrol's real focus target. ARIA ID references do not cross shadow\nboundaries, so neither the form item's hint nor its visible label can\nreach an inner input, textarea, or ARIA control from outside.\n\nTwo mirrors are maintained:\n\n- the hint, as a hidden span referenced from the target's\n  `aria-describedby` (accessible description), and\n- the label, written directly as the target's `aria-label`\n  (accessible name), so role/label queries — assistive technology and\n  Playwright's `getByLabel`/`getByRole(..., { name })` alike — resolve\n  the control without shadow-DOM knowledge (ESP0156).\n\nA name the component authored on its own target is never overwritten:\nonly an `aria-label` this controller wrote is updated or removed.",
+          "description": "Mirrors `esp-form-item` text into the same shadow root as a form\ncontrol's real focus target. ARIA ID references do not cross shadow\nboundaries, so neither the form item's hint nor its visible label can\nreach an inner input, textarea, or ARIA control from outside.\n\nThree mirrors are maintained:\n\n- the description (the hint, followed by any error or warning), as a\n  hidden span referenced from the target's `aria-describedby`,\n- the label, written directly as the target's `aria-label`\n  (accessible name), so role/label queries — assistive technology and\n  Playwright's `getByLabel`/`getByRole(..., { name })` alike — resolve\n  the control without shadow-DOM knowledge (ESP0156), and\n- the error state, as `aria-invalid=\"true\"` on the target while the\n  form item shows an error (ESP0232).\n\nA name or invalid state the component authored on its own target is\nnever overwritten: only attributes this controller wrote are updated or\nremoved.",
           "name": "FormFieldDescriptionController",
           "members": [
             {
@@ -79061,6 +79296,25 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "invalidTarget",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The target this controller set `aria-invalid` on, if any."
+            },
             {
               "kind": "field",
               "name": "target",
@@ -79133,6 +79387,24 @@
               ],
               "description": "Set or clear the accessible name supplied by the wrapping form item."
             },
+            {
+              "kind": "method",
+              "name": "setInvalid",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "invalid",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Mark the target invalid while the wrapping form item shows an error."
+            },
             {
               "kind": "method",
               "name": "sync",
@@ -79143,6 +79415,27 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "syncInvalid",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Write `aria-invalid=\"true\"` while invalid. A value the component set on\nits own target is left alone, and only a value this controller wrote is\nremoved."
+            },
+            {
+              "kind": "method",
+              "name": "removeAppliedInvalid",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "syncDescription",
@@ -79233,6 +79526,117 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/shared/form-item-relay.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Passes what a wrapping `esp-form-item` hands a composite control (its\ndescription, label, and invalid state) on to the inner control that takes\nfocus, and re-delivers it whenever that inner control is re-rendered.\n`esp-font-picker` and `esp-image-picker` each wrap an `esp-pick-one`.",
+          "name": "FormItemRelay",
+          "members": [
+            {
+              "kind": "field",
+              "name": "description",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "setDescription",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "description",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setLabel",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setInvalid",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "invalid",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "apply",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Deliver the current state to the inner control, if it exists yet."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormItemRelay",
+          "declaration": {
+            "name": "FormItemRelay",
+            "module": "dist/shared/form-item-relay.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/shared/help-events.js",
@@ -79694,64 +80098,6 @@
           ],
           "description": "Resolve a consumer-provided image-row ceiling to a usable positive integer.\nValues outside `1…maximum`, including non-numbers and non-finite values,\nreturn `fallback`. The default fallback and maximum leave row lengths\nunlimited."
         },
-        {
-          "kind": "function",
-          "name": "calculatePhotoLayout",
-          "return": {
-            "type": {
-              "text": "PhotoRow<T>[]"
-            }
-          },
-          "parameters": [
-            {
-              "name": "images",
-              "type": {
-                "text": "T[]"
-              },
-              "description": "Items with intrinsic `width`/`height` (extra fields preserved)"
-            },
-            {
-              "name": "containerWidth",
-              "type": {
-                "text": "number"
-              },
-              "description": "Available width in px that each row must fill"
-            },
-            {
-              "name": "targetRowHeight",
-              "default": "220",
-              "type": {
-                "text": "number"
-              },
-              "description": "Preferred row height in px before scaling"
-            },
-            {
-              "name": "gap",
-              "default": "8",
-              "type": {
-                "text": "number"
-              },
-              "description": "Horizontal gap in px between images within a row"
-            },
-            {
-              "name": "maxRowHeight",
-              "default": "Number.POSITIVE_INFINITY",
-              "type": {
-                "text": "number"
-              },
-              "description": "Ceiling for row heights — keeps a stretched final row\n(or a single image) from ballooning past e.g. half the viewport height"
-            },
-            {
-              "name": "maxImagesPerRow",
-              "default": "Number.POSITIVE_INFINITY",
-              "type": {
-                "text": "number"
-              },
-              "description": "Optional positive-integer ceiling for the number of\nimages in each row. Omit it, or pass an invalid value, for an unlimited row\nlength."
-            }
-          ],
-          "description": "Compute justified layout rows for a list of images.\n\nAlgorithm:\n1. Add images to a row one at a time, scaled to the target row height\n2. When the combined width overflows the container, the row breaks either\n   before or after the overflowing image — whichever leaves the row height\n   closer to the target. Keeping the image shrinks the row slightly below\n   target; pushing it to the next row stretches the row above target.\n3. Scale the finished row so it fills the container width exactly.\n\nEvery row — including the last — is scaled to fill `containerWidth`\nexactly, except rows clamped by `maxRowHeight`: those keep their aspect\nratios at the clamped height and no longer span the full width. Items are\nreturned by reference in their original order."
-        },
         {
           "kind": "function",
           "name": "calculateAlbumLayout",
@@ -79774,7 +80120,7 @@
               }
             }
           ],
-          "description": "Compute bounded album geometry with explicit cell widths.\n\nThis is the opt-in counterpart to calculatePhotoLayout. Completed\nrows always span the available width. When their justified height exceeds\n`maxRowHeight`, their cells retain their relative widths while expanding to\nthe row width at the ceiling; a renderer can use `object-fit: cover` to crop\nthe resulting cells. A final row below a finite `maxImagesPerRow` instead\nremains partial and preserves its image proportions. Its height is capped by\nthe tallest preceding row (or the target height when it is the only row) and\nby `maxRowHeight`.\n\nWith an omitted or invalid `maxImagesPerRow`, every row remains completed.\nThat preserves the legacy unlimited-row distribution for callers that have\nnot opted into bounded albums."
+          "description": "Compute justified album rows with explicit cell widths.\n\nAlgorithm:\n1. Add images to a row one at a time, scaled to the target row height.\n2. When the combined width overflows the container, the row breaks either\n   before or after the overflowing image — whichever leaves the row height\n   closer to the target. Keeping the image shrinks the row slightly below\n   target; pushing it to the next row stretches the row above target.\n3. Scale the finished row so it fills the container width exactly.\n\nCompleted rows always span the available width. When their justified height exceeds\n`maxRowHeight`, their cells retain their relative widths while expanding to\nthe row width at the ceiling; a renderer can use `object-fit: cover` to crop\nthe resulting cells. A final row below a finite `maxImagesPerRow` instead\nremains partial and preserves its image proportions. Its height is capped by\nthe tallest preceding row (or the target height when it is the only row) and\nby `maxRowHeight`.\n\nWith an omitted or invalid `maxImagesPerRow`, rows are unlimited in length\nand every row is completed."
         }
       ],
       "exports": [
@@ -79802,14 +80148,6 @@
             "module": "dist/shared/justified-layout.js"
           }
         },
-        {
-          "kind": "js",
-          "name": "calculatePhotoLayout",
-          "declaration": {
-            "name": "calculatePhotoLayout",
-            "module": "dist/shared/justified-layout.js"
-          }
-        },
         {
           "kind": "js",
           "name": "calculateAlbumLayout",
@@ -96288,206 +96626,2051 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<EspTreeSelectDetail>"
-              },
-              "description": "Fired when a node is selected.",
-              "name": "esp-tree-select"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<EspTreeToggleDetail>"
-              },
-              "description": "Fired when a branch is expanded or collapsed.",
-              "name": "esp-tree-toggle"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<EspTreeGraftRequestDetail>"
+                "text": "CustomEvent<EspTreeSelectDetail>"
+              },
+              "description": "Fired when a node is selected.",
+              "name": "esp-tree-select"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeToggleDetail>"
+              },
+              "description": "Fired when a branch is expanded or collapsed.",
+              "name": "esp-tree-toggle"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeGraftRequestDetail>"
+              },
+              "description": "Cancelable event fired before the default graft dialog opens.",
+              "name": "esp-tree-graft-request"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeGraftDetail>"
+              },
+              "description": "Fired when a new branch is committed.",
+              "name": "esp-tree-graft"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeEditDetail>"
+              },
+              "description": "Fired when an editable node's edit affordance is invoked.",
+              "name": "esp-tree-edit"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeNodeActionDetail>"
+              },
+              "description": "Fired when a deletable node's delete action is invoked.",
+              "name": "esp-tree-delete"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeNodeActionDetail>"
+              },
+              "description": "Fired when a movable-up node's move-up action is invoked.",
+              "name": "esp-tree-move-up"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeNodeActionDetail>"
+              },
+              "description": "Fired when a movable-down node's move-down action is invoked.",
+              "name": "esp-tree-move-down"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeNodeActionDetail>"
+              },
+              "description": "Fired when a cuttable node's cut action is invoked.",
+              "name": "esp-tree-cut"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeNodeActionDetail>"
+              },
+              "description": "Fired when a paste child target node's paste-as-child action is invoked.",
+              "name": "esp-tree-paste-child"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<EspTreeGraftInputDetail>"
+              },
+              "description": "Fired live as the graft input changes.",
+              "name": "esp-tree-graft-input"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{ valid: boolean; message: string }>"
+              },
+              "description": "Fired whenever constraint validation runs.",
+              "name": "esp-validity-changed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "nodes",
+              "type": {
+                "text": "Array<EspTreeNode>"
+              },
+              "default": "[]",
+              "description": "The hierarchy to display, as the primary data-driven API. When\nnon-empty this takes precedence over slotted `esp-tree-item`\nchildren.",
+              "fieldName": "nodes"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The selected node's full path (segments joined by `/`), or the\nempty string when nothing is selected. This is also the form\nsubmission value.",
+              "fieldName": "value"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name used when the tree participates in a `<form>`.",
+              "fieldName": "name"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, a selection must be made before the form can submit.",
+              "fieldName": "required"
+            },
+            {
+              "name": "required-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "A custom message shown when the tree is required but nothing is\nselected. Defaults to `\"Please select an option.\"`.",
+              "fieldName": "requiredMessage"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the tree is disabled and cannot be interacted with.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "allow-graft",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, an inline `+` affordance is shown on every node and at\nthe root for grafting a new child branch.",
+              "fieldName": "allowGraft"
+            },
+            {
+              "name": "root-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"/\"",
+              "description": "Label shown for the always-rendered root ancestor row.",
+              "fieldName": "rootLabel"
+            },
+            {
+              "name": "root-path",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"/\"",
+              "description": "Path submitted when the root row is selected. Defaults to `/`.",
+              "fieldName": "rootPath"
+            },
+            {
+              "name": "root-selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether the root row can be selected. Defaults to true. Set\n`root-selectable=\"false\"` to make it navigation-only.",
+              "fieldName": "rootSelectable"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "An accessible name for the tree. Usually unnecessary inside an\n`esp-form-item`, which provides the label; set it for standalone\nuse.",
+              "fieldName": "label"
+            },
+            {
+              "name": "graft-error",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "A consumer-supplied error for the in-progress graft, shown inline\nand blocking commit until cleared. Set it with `setGraftError`,\ntypically in response to an `esp-tree-graft-input` event after an\nasync check. Mirrored as the `graft-error` attribute.",
+              "fieldName": "graftError"
+            },
+            {
+              "name": "keep-expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Keep already-expanded branches open when selecting a row outside of\nthe selected branch. By default, selecting outside an open selected\nbranch collapses that branch.",
+              "fieldName": "keepExpanded"
+            },
+            {
+              "name": "scheme",
+              "type": {
+                "text": "\"dark\" | \"light\""
+              },
+              "default": "\"light\"",
+              "description": "The scheme to use for the component. This property is used internally\nto control the light/dark scheme so it matches the scheme of\n[esp-root](/components/root). It should not be set manually, it\nexists as an attribute for styling purposes.",
+              "fieldName": "scheme",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "name": "intent",
+              "type": {
+                "text": "EspalierIntentVariant"
+              },
+              "description": "The element's [intent](/espalier-guides/) — its meaning: `neutral`\n(no pin), or `success`, `warning`, `danger`, `info` — each pinned\nto its fixed status family (blue for `info`), retunable per theme\nvia `intents`. On token-emitting controls a non-neutral intent pins the\nfilled-action pair to that family, derived over the governing\nzone's theme; class-styled chrome (badges, callouts, status pills)\nopts out of inline emission and renders its treatment from CSS\nclasses instead. An intent never repaints the surrounding zone,\nwhich is what contexts are for. Removing the attribute restores\nthe element's own default intent.",
+              "fieldName": "intent",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "name": "context",
+              "type": {
+                "text": "string"
+              },
+              "description": "A theme-defined color zone. The selected context rebinds designer-facing\nroles and emits a complete, contrast-enforced semantic token table on this\nhost for descendants to inherit.",
+              "fieldName": "context",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "EspalierElementBase",
+            "module": "dist/shared/esp-element-base.js"
+          },
+          "docPageTitle": {
+            "name": "Tree",
+            "description": ""
+          },
+          "docUrl": {
+            "name": "/components/tree",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Form",
+            "description": "Controls"
+          },
+          "menuLabel": {
+            "name": "Tree",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "sitemap",
+            "description": ""
+          },
+          "tagName": "esp-tree",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "id"
+        },
+        {
+          "kind": "variable",
+          "name": "selected"
+        },
+        {
+          "kind": "variable",
+          "name": "segment"
+        },
+        {
+          "kind": "variable",
+          "name": "selectable"
+        },
+        {
+          "kind": "variable",
+          "name": "hasChildren"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "normalizeSegment",
+          "declaration": {
+            "name": "normalizeSegment",
+            "module": "dist/tree/esp-tree.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "buildWebTreePath",
+          "declaration": {
+            "name": "buildWebTreePath",
+            "module": "dist/tree/esp-tree.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EspalierTree",
+          "declaration": {
+            "name": "EspalierTree",
+            "module": "dist/tree/esp-tree.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-tree",
+          "declaration": {
+            "name": "EspalierTree",
+            "module": "dist/tree/esp-tree.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/video/esp-video.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "HLS_MEDIA_TYPE",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"application/vnd.apple.mpegurl\"",
+          "description": "The HLS master-playlist media type, and the default `type`."
+        },
+        {
+          "kind": "variable",
+          "name": "DEFAULT_VIDEO_ASPECT_RATIO",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"16 / 9\"",
+          "description": "The `aspect-ratio` used when the attribute is absent or invalid."
+        },
+        {
+          "kind": "class",
+          "description": "A native video player: a `<video>` element with a lazy poster, a fixed\naspect ratio, captions, native controls, and visible loading and error\nstates. It is never an iframe and never loads a third-party player.\n\nNothing but the poster loads until the visitor presses play, so a page of\nvideos costs one image request each. The play affordance over the poster is\na real button named from `label` or `poster-alt`.\n\n```html\n<esp-video\n  src=\"/assets/esp-video/espalier-sample.mp4\"\n  type=\"video/mp4\"\n  poster=\"/assets/esp-video/espalier-sample-poster.jpg\"\n  poster-alt=\"Espalier's palette drifting across a trellis grid\"\n  playsinline\n></esp-video>\n```\n\n### Sources\n\nThe element plays `src` only where the browser reports it can play `type`.\n`type` is an HLS master playlist by default, which Safari, iOS, and current\nChrome play natively; elsewhere `fallback-src` (an MP4) plays instead.\nEspalier attaches no streaming library, so for a source every browser can\nplay, set `type=\"video/mp4\"`.\n\n### Captions\n\nGive the element `<track>` children. A media element only reads its own\nchild tracks, so the element mirrors them into its video when it attaches\nthe source; `kind`, `srclang`, `label`, and `default` carry through. With\nthe default `preload=\"none\"`, no caption file loads before the visitor\npresses play.\n\n```html\n<esp-video\n  src=\"/assets/esp-video/espalier-sample.mp4\"\n  type=\"video/mp4\"\n  poster=\"/assets/esp-video/espalier-sample-poster.jpg\"\n  poster-alt=\"The trellis sample, with English captions\"\n  aspect-ratio=\"21 / 9\"\n>\n  <track kind=\"captions\" src=\"/assets/esp-video/espalier-sample.en.vtt\" srclang=\"en\" label=\"English\" default />\n</esp-video>\n```\n\n### Autoplay\n\n`autoplay` starts playback once the element is admitted (immediately, or\nnear the viewport with `defer-offscreen`). It always plays muted: while\n`autoplay` is set the video stays muted whatever `muted` says, so a page\nnever starts sound unprompted. It does not start for a visitor who prefers\nreduced motion, or where the browser blocks it; the poster and play button\nremain.",
+          "name": "EspalierVideo",
+          "cssProperties": [
+            {
+              "description": "Background behind the video and an absent poster. Defaults to a near-black derived from `--esp-color-text`.",
+              "name": "--esp-video-surface"
+            },
+            {
+              "description": "Corner radius. Defaults to `var(--esp-size-border-radius)`.",
+              "name": "--esp-video-border-radius"
+            },
+            {
+              "description": "How the video fills its box. Defaults to `contain`; the poster always covers.",
+              "name": "--esp-video-object-fit"
+            },
+            {
+              "description": "`accent-color` for the native controls, where the browser honors it. Defaults to `var(--esp-color-primary)`.",
+              "name": "--esp-video-accent"
+            },
+            {
+              "description": "Focus-visible outline on the play button, the video, and the error message. Defaults to `3px solid var(--esp-color-link)`.",
+              "name": "--esp-video-focus-outline"
+            },
+            {
+              "description": "Diameter of the play disc. Defaults to `var(--esp-size-huge)`.",
+              "name": "--esp-video-play-size"
+            },
+            {
+              "description": "Fill of the play disc. Defaults to `var(--esp-color-background)` at 90% opacity.",
+              "name": "--esp-video-play-background"
+            },
+            {
+              "description": "Play glyph and loading-indicator color. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-video-play-color"
+            },
+            {
+              "description": "Error message background. Defaults to `var(--esp-color-background)`.",
+              "name": "--esp-video-message-background"
+            },
+            {
+              "description": "Error message text color. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-video-message-color"
+            },
+            {
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The element's full box.",
+              "name": "frame"
+            },
+            {
+              "description": "The native `<video>` element.",
+              "name": "video"
+            },
+            {
+              "description": "The layer over the video holding the poster, play button, and messages.",
+              "name": "poster"
+            },
+            {
+              "description": "The poster `<img>`.",
+              "name": "poster-image"
+            },
+            {
+              "description": "The play `<button>`, which covers the poster.",
+              "name": "play"
+            },
+            {
+              "description": "The visible play disc inside the button.",
+              "name": "play-icon"
+            },
+            {
+              "description": "The error message.",
+              "name": "message"
+            }
+          ],
+          "slots": [
+            {
+              "description": "`<track>` elements for captions, subtitles, descriptions, and chapters.",
+              "name": ""
+            },
+            {
+              "description": "Replaces the error message shown over the poster.",
+              "name": "error"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The media URL: an HLS master playlist by default, or a file matching `type`.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"application/vnd.apple.mpegurl\"",
+              "description": "The media type of `src`, checked with `canPlayType` to choose between\n`src` and `fallback-src`. `video/mp4` plays as a plain file.",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "poster",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Poster image URL, shown until playback starts and behind error messages.",
+              "attribute": "poster"
+            },
+            {
+              "kind": "field",
+              "name": "posterAlt",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Describes the poster; names the play button when `label` is unset.",
+              "attribute": "poster-alt"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The play button's accessible name. Defaults to `Play video: <poster-alt>`,\nor `Play video` with no poster text.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "aspectRatio",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"16 / 9\"",
+              "description": "The box's aspect ratio, as a positive number or `number / number`. Invalid\nvalues fall back to `16 / 9`.",
+              "attribute": "aspect-ratio"
+            },
+            {
+              "kind": "field",
+              "name": "preload",
+              "type": {
+                "text": "VideoPreload"
+              },
+              "privacy": "public",
+              "default": "\"none\"",
+              "description": "How much media to load before play intent. `none` (the default) loads\nonly the poster. `metadata` and `auto` apply where the browser plays\n`type`; the choice of the fallback over it still waits for play intent.\nA preloaded source that fails switches to `fallback-src` at once.",
+              "attribute": "preload",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Start muted playback once admitted. Implies `muted`.",
+              "attribute": "autoplay"
+            },
+            {
+              "kind": "field",
+              "name": "muted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Start muted. Always on while `autoplay` is set. Clearing it (or\n`autoplay`) unmutes only a paused video; a playing one stays muted until\nthe visitor unmutes it.",
+              "attribute": "muted"
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Restart from the beginning when playback ends.",
+              "attribute": "loop"
+            },
+            {
+              "kind": "field",
+              "name": "playsinline",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Play inline on iOS rather than entering full screen. Needed for inline autoplay there.",
+              "attribute": "playsinline"
+            },
+            {
+              "kind": "field",
+              "name": "controls",
+              "type": {
+                "text": "VideoControls"
+              },
+              "privacy": "public",
+              "default": "\"native\"",
+              "description": "`native` (the default) shows the browser's controls once playback starts.\n`none` shows none; use it only for short decorative loops, since a visitor\nthen has no way to pause.",
+              "attribute": "controls",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "deferOffscreen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Defer everything — the poster, `preload`, and `autoplay` — until the\nelement is within 200px of the viewport. The poster is not rendered\nbefore then, so the browser's own lazy-loading distance cannot fetch it\nearly.",
+              "attribute": "defer-offscreen"
+            },
+            {
+              "kind": "field",
+              "name": "fallbackSrc",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "An MP4 played when the browser cannot play `type`, and tried once when\nthe primary source fails.",
+              "attribute": "fallback-src"
+            },
+            {
+              "kind": "field",
+              "name": "crossOrigin",
+              "type": {
+                "text": "VideoCrossOrigin"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "CORS mode for the video's requests, as on `<video crossorigin>`. Needed\nfor caption tracks served from another origin.",
+              "attribute": "crossorigin"
+            },
+            {
+              "kind": "field",
+              "name": "phase",
+              "type": {
+                "text": "VideoPhase"
+              },
+              "privacy": "private",
+              "default": "\"idle\""
+            },
+            {
+              "kind": "field",
+              "name": "started",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Playback has begun at least once for this source, so the poster is dismissed."
+            },
+            {
+              "kind": "field",
+              "name": "offscreenAdmitted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "attached",
+              "type": {
+                "text": "{ mode: VideoSourceMode } | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "mutedVideo",
+              "type": {
+                "text": "HTMLVideoElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The video element `syncMuted` last applied the muted state to."
+            },
+            {
+              "kind": "field",
+              "name": "generation",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Bumped whenever the source resets, so late async work can tell it is stale."
+            },
+            {
+              "kind": "field",
+              "name": "triedFallback",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "readyEmitted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "playIntent",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "autoplayAttempted",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "intentAutoplay",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the current play intent came from `autoplay` rather than the visitor."
+            },
+            {
+              "kind": "field",
+              "name": "autoplayPending",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the next `play` event was started by `autoplay`."
+            },
+            {
+              "kind": "field",
+              "name": "playAttempt",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Counts `play()` calls, so a superseded rejection cannot touch a newer attempt."
+            },
+            {
+              "kind": "field",
+              "name": "pendingPlay",
+              "type": {
+                "text": "{ autoplay: boolean } | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "A `play` event awaiting its `playing`. `play` fires as soon as `play()` is\ncalled, before anything is decoded, so `esp-video-play` waits for\n`playing` and a source that fails first never reports a play."
+            },
+            {
+              "kind": "field",
+              "name": "focusMessageOnError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "The play button held focus when the element failed; hand it to the message."
+            },
+            {
+              "kind": "field",
+              "name": "offscreenObserver",
+              "type": {
+                "text": "IntersectionObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "video",
+              "type": {
+                "text": "HTMLVideoElement | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "canPlayNatively",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "video",
+                  "type": {
+                    "text": "HTMLVideoElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "playLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncOffscreenDeferral",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncMuted",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues"
+                  }
+                }
+              ],
+              "description": "Keep the video muted while `muted` or `autoplay` is set. Clearing them\nunmutes only a paused video: a playing one stays muted until the visitor\nunmutes it, so a page never starts sound unprompted."
+            },
+            {
+              "kind": "method",
+              "name": "requestPlayback",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "autoplay",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Run the play intent: attach the source if it is not attached yet, then\nplay. `autoplay` marks intents that did not come from the visitor."
+            },
+            {
+              "kind": "method",
+              "name": "startPlayback",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "video",
+                  "type": {
+                    "text": "HTMLVideoElement"
+                  }
+                },
+                {
+                  "name": "generation",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "attachSource",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "video",
+                  "type": {
+                    "text": "HTMLVideoElement"
+                  }
+                },
+                {
+                  "name": "early",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Choose and attach the source: `src` where the browser can play `type`,\notherwise `fallback-src`. An early (preload) attach only ever attaches\n`src`; the fallback waits for play intent."
+            },
+            {
+              "kind": "method",
+              "name": "useSource",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "video",
+                  "type": {
+                    "text": "HTMLVideoElement"
+                  }
+                },
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "VideoSourceMode"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "failOver",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "video",
+                  "type": {
+                    "text": "HTMLVideoElement"
+                  }
+                },
+                {
+                  "name": "reason",
+                  "type": {
+                    "text": "VideoErrorReason"
+                  }
+                },
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "The primary source failed. Report it and try `fallback-src` once; with nothing left to try, show the error state."
+            },
+            {
+              "kind": "method",
+              "name": "emitError",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "VideoSourceMode | null"
+                  }
+                },
+                {
+                  "name": "reason",
+                  "type": {
+                    "text": "VideoErrorReason"
+                  }
+                },
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fallback",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "fail",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "VideoSourceMode | null"
+                  }
+                },
+                {
+                  "name": "reason",
+                  "type": {
+                    "text": "VideoErrorReason"
+                  }
+                },
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "enterError",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Show the error state. The message replaces the play button, so a visitor\nwho pressed it from the keyboard keeps focus there instead of on the\ndocument."
+            },
+            {
+              "kind": "method",
+              "name": "resetSource",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Forget the attached source and return to the poster."
+            },
+            {
+              "kind": "method",
+              "name": "mirrorTracks",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "video",
+                  "type": {
+                    "text": "HTMLVideoElement"
+                  }
+                }
+              ],
+              "description": "A media element only reads its own child `<track>`s, so slotting cannot\nreach the shadow `<video>`. Mirror the light-DOM tracks into it instead."
+            },
+            {
+              "kind": "field",
+              "name": "handleTrackSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePlayClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleLoadedMetadata",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "emitReady",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "video",
+                  "type": {
+                    "text": "HTMLVideoElement"
+                  }
+                }
+              ],
+              "description": "Fire `esp-video-ready` once for the attached source."
+            },
+            {
+              "kind": "field",
+              "name": "handlePlay",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handlePlaying",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleVideoError",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderPosterContent",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "seedColorBacker",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"oklch(0.7 0.125 216)\"",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "espRoot",
+              "type": {
+                "text": "EspalierRoot | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "contextBacker",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "\"\"",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "scopedTokenOriginalValues",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map< string, { generatedPriority: string; generatedValue: string; originalPriority: string; originalValue: string | null; } >()",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "warnedUnknownContexts",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "pendingInitialThemeRoot",
+              "type": {
+                "text": "EspalierRoot | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rootEventSubscriptionsActive",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "subscribedRoot",
+              "type": {
+                "text": "EspalierRoot | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "rootEventUnsubscribers",
+              "type": {
+                "text": "Array<() => void>"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "intentBacker",
+              "type": {
+                "text": "EspalierIntentVariant"
+              },
+              "privacy": "protected",
+              "default": "\"neutral\"",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "intentEmitsTokens",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "protected",
+              "default": "true",
+              "description": "Whether a non-neutral intent emits its inline tokens\n(`--esp-color-primary` and the filled-action pair). Interactive\ncontrols need them; chrome whose intent treatment is class-based\n(badges, callouts, status pills — see `intentSurfaceTokens`) opts\nout so a decorative intent never rewrites inherited tokens for\nslotted content.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "warnedUnknownIntents",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "seedColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "correlationId",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focusResolvedElementAfterUpdate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "resolveTarget",
+                  "type": {
+                    "text": "() => HTMLElement | null | undefined"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "focusShadowElementAfterUpdate",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selector",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emitValueChanged",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "detail",
+                  "type": {
+                    "text": "T"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "scheme",
+              "type": {
+                "text": "\"dark\" | \"light\""
+              },
+              "privacy": "public",
+              "default": "\"light\"",
+              "description": "The scheme to use for the component. This property is used internally\nto control the light/dark scheme so it matches the scheme of\n[esp-root](/components/root). It should not be set manually, it\nexists as an attribute for styling purposes.",
+              "attribute": "scheme",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "intent",
+              "type": {
+                "text": "EspalierIntentVariant"
+              },
+              "privacy": "public",
+              "description": "The element's [intent](/espalier-guides/) — its meaning: `neutral`\n(no pin), or `success`, `warning`, `danger`, `info` — each pinned\nto its fixed status family (blue for `info`), retunable per theme\nvia `intents`. On token-emitting controls a non-neutral intent pins the\nfilled-action pair to that family, derived over the governing\nzone's theme; class-styled chrome (badges, callouts, status pills)\nopts out of inline emission and renders its treatment from CSS\nclasses instead. An intent never repaints the surrounding zone,\nwhich is what contexts are for. Removing the attribute restores\nthe element's own default intent.",
+              "attribute": "intent",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "context",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "description": "A theme-defined color zone. The selected context rebinds designer-facing\nroles and emits a complete, contrast-enforced semantic token table on this\nhost for descendants to inherit.",
+              "attribute": "context",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "refreshDescendantIntentDerivations",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "A zone rebinding must reach descendants whose intent pairs derive\nover it. Root-level changes arrive over the bus, but the context\nattribute is plain DOM state with no bus event, so the zone host\nwalks its FLATTENED subtree — crossing open shadow roots and\nfollowing slot assignment, the tree its table cascades along — and\nlets each Espalier descendant re-apply against the current\nancestry. Idempotent for hosts this zone doesn't govern; the\nvisited set guards the slot/light diamond (a host's light children\nare also its slots' assigned elements).",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "flattenedParent",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Node | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "Node"
+                  }
+                }
+              ],
+              "description": "The flattened-tree parent: through the assigned slot, out of shadow roots.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveAncestorZoneTheme",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "EspalierTheme | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "activeTheme",
+                  "type": {
+                    "text": "EspalierTheme"
+                  }
+                }
+              ],
+              "description": "The nearest ancestor zone the active theme can actually compile,\nwalking the flattened tree — through assigned slots and out of\nshadow roots — because that is the tree the zone's emitted table\ncascades along: a consumer shell may declare its zone around a\n`<slot>` inside its own shadow. A zone host with an unresolvable\ncontext emits nothing and inherits the next zone out, so unknown\nnames are skipped rather than collapsed to the root theme. Bounded\nby this element's esp-root.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncRootFromDom",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "EspalierRoot | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "throwIfMissing",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyTokensWhenRootReady",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Apply scoped tokens now, or defer until the active root's initial theme is ready.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyTokensAfterInitialRootUpdate",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "EspalierRoot"
+                  }
+                }
+              ],
+              "description": "Apply initial scoped tokens once the exact root this host found is ready.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "subscribeToRootEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "EspalierRoot"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "unsubscribeFromRootEvents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleSeedColorChanged",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleSchemeChanged",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleThemeChanged",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleIconSpriteUrlChanged",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "traverseToClosest",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "selector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The selector of the element to look for"
+                }
+              ],
+              "description": "Traverse up the DOM tree to find the closest element that\nmatches the selector. This method is aware of shadow DOM\nboundaries and will traverse through them to find the element.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "intentColorSources",
+              "type": {
+                "text": "Readonly<\n    Record<EspalierIntentVariant, ColorSource | \"\">\n  >"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "{ danger: \"danger\", info: \"info\", neutral: \"\", success: \"success\", warning: \"warning\", }",
+              "description": "Intent color sources: the meaning-bearing families an intent pins\nthe filled-action pair to. `neutral` pins nothing; each other\nintent maps to its own fixed status family (ESP0172 gave `info` a\nreal blue family, replacing the complementary borrow the retired\nvariant system used), and a theme's `intents` field retunes the\nfamily colors themselves.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "semanticActionTokens",
+              "type": {
+                "text": "ReadonlySet<SemanticColorName>"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new Set<SemanticColorName>([\"actionBackground\", \"actionText\"])",
+              "description": "Semantic tokens that paint a control's filled action surface — the\npair an intent recolors. Everything else inherits the zone cascade,\nwhich is the ESP0166 fix: under the SHY fitted theme the retired\nvariant re-seeding painted a danger callout's *background* mint\ngreen; an intent leaves the zone's surfaces alone and pins only the\naction pair (plus `--esp-color-primary` for state derivations) to\nthe intent's own status family — fixed hues by default, retunable\nper theme via `intents`. Task 098's\nguarantee survives structurally: the\npin is by source, so no theme mapping can rotate a destructive /\nwarning / positive action off its semantic hue.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyScopedColorTokens",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Compute and apply context- and intent-specific semantic color tokens.\n\nWith no context and a `neutral` intent, all semantic tokens cascade\nfrom `<esp-root>` and previous overrides are cleared. A context\nemits the zone's complete twenty-three-token table; a non-neutral intent\nthen overlays the filled-action pair, derived over the governing\nzone's theme — this host's own context, or the nearest ancestor\nzone's — so its APCA enforcement runs against the zone's actual\naction surface.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveContextTheme",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{ applied: boolean; theme: EspalierTheme }"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "theme",
+                  "type": {
+                    "text": "EspalierTheme"
+                  }
+                }
+              ],
+              "description": "Resolve this host's own context name over the active root theme.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "warnUnknownContextWhenSettled",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Warn about an unknown context only once the root's theme has\nsettled (ESP0177).\n\nA script-mounted theme lands after its descendants first render, so\na zone naming a context the theme *does* define would otherwise\nwarn about a state that was never rendered to anyone. Waiting for\nthe root to settle — an author theme resolved, or the pre-theme\nwindow closed with none — makes the warning describe the settled\ntheme instead of a transient one. It is deferred, never dropped: a\ngenuinely missing context still warns, just after the window.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resolveNamedContextTheme",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "EspalierTheme | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "theme",
+                  "type": {
+                    "text": "EspalierTheme"
+                  }
+                },
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Compile a named context's theme, or null when the theme doesn't\ndefine it. Delegates to the exported compiler so a DOM-less consumer\n(the fit-report suite, a check script) inspects exactly the theme a\nzone host renders — the drift this shared path exists to prevent\n(ESP0175).",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyScopedTokenProperties",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "properties",
+                  "type": {
+                    "text": "Record<string, string>"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setScopedTokenProperty",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "restoreScopedTokenProperty",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clearScopedTokens",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<VideoReadyDetail>"
               },
-              "description": "Cancelable event fired before the default graft dialog opens.",
-              "name": "esp-tree-graft-request"
+              "description": "Bubbles across shadow boundaries once the attached source has loaded its metadata; `detail` is `{ src, mode, duration }`. Fires once per attached source.",
+              "name": "esp-video-ready"
             },
             {
               "type": {
-                "text": "CustomEvent<EspTreeGraftDetail>"
+                "text": "CustomEvent<VideoPlayDetail>"
               },
-              "description": "Fired when a new branch is committed.",
-              "name": "esp-tree-graft"
+              "description": "Bubbles across shadow boundaries each time playback starts, or resumes after a pause, on the media's `playing`. Recovery from buffering or a seek is not reported, and a source that fails first reports no play; `detail` is `{ src, mode, currentTime, autoplay }`.",
+              "name": "esp-video-play"
             },
             {
               "type": {
-                "text": "CustomEvent<EspTreeEditDetail>"
+                "text": "CustomEvent<VideoErrorDetail>"
               },
-              "description": "Fired when an editable node's edit affordance is invoked.",
-              "name": "esp-tree-edit"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<EspTreeNodeActionDetail>"
-              },
-              "description": "Fired when a deletable node's delete action is invoked.",
-              "name": "esp-tree-delete"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<EspTreeNodeActionDetail>"
-              },
-              "description": "Fired when a movable-up node's move-up action is invoked.",
-              "name": "esp-tree-move-up"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<EspTreeNodeActionDetail>"
-              },
-              "description": "Fired when a movable-down node's move-down action is invoked.",
-              "name": "esp-tree-move-down"
-            },
+              "description": "Bubbles across shadow boundaries when a source fails; `detail` is `{ src, mode, reason, message, fallback }`. When `fallback` is true the element is already trying `fallback-src`.",
+              "name": "esp-video-error"
+            }
+          ],
+          "attributes": [
             {
+              "name": "src",
               "type": {
-                "text": "CustomEvent<EspTreeNodeActionDetail>"
+                "text": "string"
               },
-              "description": "Fired when a cuttable node's cut action is invoked.",
-              "name": "esp-tree-cut"
+              "default": "\"\"",
+              "description": "The media URL: an HLS master playlist by default, or a file matching `type`.",
+              "fieldName": "src"
             },
             {
+              "name": "type",
               "type": {
-                "text": "CustomEvent<EspTreeNodeActionDetail>"
+                "text": "string"
               },
-              "description": "Fired when a paste child target node's paste-as-child action is invoked.",
-              "name": "esp-tree-paste-child"
+              "default": "\"application/vnd.apple.mpegurl\"",
+              "description": "The media type of `src`, checked with `canPlayType` to choose between\n`src` and `fallback-src`. `video/mp4` plays as a plain file.",
+              "fieldName": "type"
             },
             {
+              "name": "poster",
               "type": {
-                "text": "CustomEvent<EspTreeGraftInputDetail>"
+                "text": "string"
               },
-              "description": "Fired live as the graft input changes.",
-              "name": "esp-tree-graft-input"
+              "default": "\"\"",
+              "description": "Poster image URL, shown until playback starts and behind error messages.",
+              "fieldName": "poster"
             },
             {
+              "name": "poster-alt",
               "type": {
-                "text": "CustomEvent<{ valid: boolean; message: string }>"
-              },
-              "description": "Fired whenever constraint validation runs.",
-              "name": "esp-validity-changed"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "nodes",
-              "type": {
-                "text": "Array<EspTreeNode>"
+                "text": "string"
               },
-              "default": "[]",
-              "description": "The hierarchy to display, as the primary data-driven API. When\nnon-empty this takes precedence over slotted `esp-tree-item`\nchildren.",
-              "fieldName": "nodes"
+              "default": "\"\"",
+              "description": "Describes the poster; names the play button when `label` is unset.",
+              "fieldName": "posterAlt"
             },
             {
-              "name": "value",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The selected node's full path (segments joined by `/`), or the\nempty string when nothing is selected. This is also the form\nsubmission value.",
-              "fieldName": "value"
+              "description": "The play button's accessible name. Defaults to `Play video: <poster-alt>`,\nor `Play video` with no poster text.",
+              "fieldName": "label"
             },
             {
-              "name": "name",
+              "name": "aspect-ratio",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "The name used when the tree participates in a `<form>`.",
-              "fieldName": "name"
+              "default": "\"16 / 9\"",
+              "description": "The box's aspect ratio, as a positive number or `number / number`. Invalid\nvalues fall back to `16 / 9`.",
+              "fieldName": "aspectRatio"
             },
             {
-              "name": "required",
+              "name": "preload",
               "type": {
-                "text": "boolean"
+                "text": "VideoPreload"
               },
-              "default": "false",
-              "description": "When true, a selection must be made before the form can submit.",
-              "fieldName": "required"
+              "default": "\"none\"",
+              "description": "How much media to load before play intent. `none` (the default) loads\nonly the poster. `metadata` and `auto` apply where the browser plays\n`type`; the choice of the fallback over it still waits for play intent.\nA preloaded source that fails switches to `fallback-src` at once.",
+              "fieldName": "preload"
             },
             {
-              "name": "required-message",
+              "name": "autoplay",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "A custom message shown when the tree is required but nothing is\nselected. Defaults to `\"Please select an option.\"`.",
-              "fieldName": "requiredMessage"
+              "default": "false",
+              "description": "Start muted playback once admitted. Implies `muted`.",
+              "fieldName": "autoplay"
             },
             {
-              "name": "disabled",
+              "name": "muted",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the tree is disabled and cannot be interacted with.",
-              "fieldName": "disabled"
+              "description": "Start muted. Always on while `autoplay` is set. Clearing it (or\n`autoplay`) unmutes only a paused video; a playing one stays muted until\nthe visitor unmutes it.",
+              "fieldName": "muted"
             },
             {
-              "name": "allow-graft",
+              "name": "loop",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, an inline `+` affordance is shown on every node and at\nthe root for grafting a new child branch.",
-              "fieldName": "allowGraft"
+              "description": "Restart from the beginning when playback ends.",
+              "fieldName": "loop"
             },
             {
-              "name": "root-label",
+              "name": "playsinline",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"/\"",
-              "description": "Label shown for the always-rendered root ancestor row.",
-              "fieldName": "rootLabel"
+              "default": "false",
+              "description": "Play inline on iOS rather than entering full screen. Needed for inline autoplay there.",
+              "fieldName": "playsinline"
             },
             {
-              "name": "root-path",
+              "name": "controls",
               "type": {
-                "text": "string"
+                "text": "VideoControls"
               },
-              "default": "\"/\"",
-              "description": "Path submitted when the root row is selected. Defaults to `/`.",
-              "fieldName": "rootPath"
+              "default": "\"native\"",
+              "description": "`native` (the default) shows the browser's controls once playback starts.\n`none` shows none; use it only for short decorative loops, since a visitor\nthen has no way to pause.",
+              "fieldName": "controls"
             },
             {
-              "name": "root-selectable",
+              "name": "defer-offscreen",
               "type": {
                 "text": "boolean"
               },
-              "default": "true",
-              "description": "Whether the root row can be selected. Defaults to true. Set\n`root-selectable=\"false\"` to make it navigation-only.",
-              "fieldName": "rootSelectable"
+              "default": "false",
+              "description": "Defer everything — the poster, `preload`, and `autoplay` — until the\nelement is within 200px of the viewport. The poster is not rendered\nbefore then, so the browser's own lazy-loading distance cannot fetch it\nearly.",
+              "fieldName": "deferOffscreen"
             },
             {
-              "name": "label",
+              "name": "fallback-src",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "An accessible name for the tree. Usually unnecessary inside an\n`esp-form-item`, which provides the label; set it for standalone\nuse.",
-              "fieldName": "label"
-            },
-            {
-              "name": "graft-error",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "A consumer-supplied error for the in-progress graft, shown inline\nand blocking commit until cleared. Set it with `setGraftError`,\ntypically in response to an `esp-tree-graft-input` event after an\nasync check. Mirrored as the `graft-error` attribute.",
-              "fieldName": "graftError"
+              "description": "An MP4 played when the browser cannot play `type`, and tried once when\nthe primary source fails.",
+              "fieldName": "fallbackSrc"
             },
             {
-              "name": "keep-expanded",
+              "name": "crossorigin",
               "type": {
-                "text": "boolean"
+                "text": "VideoCrossOrigin"
               },
-              "default": "false",
-              "description": "Keep already-expanded branches open when selecting a row outside of\nthe selected branch. By default, selecting outside an open selected\nbranch collapses that branch.",
-              "fieldName": "keepExpanded"
+              "default": "\"\"",
+              "description": "CORS mode for the video's requests, as on `<video crossorigin>`. Needed\nfor caption tracks served from another origin.",
+              "fieldName": "crossOrigin"
             },
             {
               "name": "scheme",
@@ -96532,80 +98715,361 @@
             "module": "dist/shared/esp-element-base.js"
           },
           "docPageTitle": {
-            "name": "Tree",
+            "name": "Video",
             "description": ""
           },
           "docUrl": {
-            "name": "/components/tree",
+            "name": "/components/video",
             "description": ""
           },
           "menuGroup": {
-            "name": "Form",
-            "description": "Controls"
+            "name": "Media",
+            "description": ""
           },
           "menuLabel": {
-            "name": "Tree",
+            "name": "Video",
             "description": ""
           },
           "menuIcon": {
-            "name": "sitemap",
+            "name": "photo",
             "description": ""
           },
-          "tagName": "esp-tree",
+          "tagName": "esp-video",
           "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "HLS_MEDIA_TYPE",
+          "declaration": {
+            "name": "HLS_MEDIA_TYPE",
+            "module": "dist/video/esp-video.js"
+          }
         },
         {
-          "kind": "variable",
-          "name": "id"
+          "kind": "js",
+          "name": "DEFAULT_VIDEO_ASPECT_RATIO",
+          "declaration": {
+            "name": "DEFAULT_VIDEO_ASPECT_RATIO",
+            "module": "dist/video/esp-video.js"
+          }
         },
         {
-          "kind": "variable",
-          "name": "selected"
+          "kind": "js",
+          "name": "EspalierVideo",
+          "declaration": {
+            "name": "EspalierVideo",
+            "module": "dist/video/esp-video.js"
+          }
         },
         {
-          "kind": "variable",
-          "name": "segment"
+          "kind": "custom-element-definition",
+          "name": "esp-video",
+          "declaration": {
+            "name": "EspalierVideo",
+            "module": "dist/video/esp-video.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/compute-semantic-properties.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "computeSemanticProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            },
+            {
+              "name": "variants",
+              "type": {
+                "text": "Record<ColorSource, OklchColor>"
+              }
+            },
+            {
+              "name": "options",
+              "default": "{}",
+              "type": {
+                "text": "ComputeSemanticPropertiesOptions"
+              }
+            }
+          ],
+          "description": "Derive the complete twenty-three-token semantic table for a resolved theme.\n\nRoot output, context scopes, and intent overlays all use\nthis function so their APCA pairings cannot drift apart."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "computeSemanticProperties",
+          "declaration": {
+            "name": "computeSemanticProperties",
+            "module": "dist/root/helpers/compute-semantic-properties.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/compute-theme-properties.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "dataSeriesProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            },
+            {
+              "name": "seed",
+              "type": {
+                "text": "OklchColor"
+              }
+            },
+            {
+              "name": "resolve",
+              "type": {
+                "text": "(source: unknown, label: string) => string"
+              }
+            },
+            {
+              "description": "Optional sink for the theme fit report (ESP0163). When\nsupplied, each semantic derivation is appended as it is emitted —\nthe emitted value read back out of the property record, and the\npre-enforcement value taken from the derivation itself — so a report\ndescribes this run rather than re-deriving it. When omitted the\npipeline does no reporting work at all.",
+              "name": "trace"
+            }
+          ],
+          "description": "Emit the categorical series identities from a theme's data palette.\n\nShared between the root emission and the zone-table path (the zone\ncompanions need the identities without re-emitting them), so the two\ncan never resolve a palette differently."
+        },
+        {
+          "kind": "function",
+          "name": "computeThemeProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            },
+            {
+              "name": "scheme",
+              "type": {
+                "text": "\"light\" | \"dark\""
+              }
+            },
+            {
+              "name": "trace",
+              "optional": true,
+              "type": {
+                "text": "ThemeFitTraceEntry[]"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "dataSeriesProperties",
+          "declaration": {
+            "name": "dataSeriesProperties",
+            "module": "dist/root/helpers/compute-theme-properties.js"
+          }
         },
+        {
+          "kind": "js",
+          "name": "computeThemeProperties",
+          "declaration": {
+            "name": "computeThemeProperties",
+            "module": "dist/root/helpers/compute-theme-properties.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/compute-variants.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "computeVariants",
+          "declaration": {
+            "name": "computeVariants",
+            "module": "../../shared/variant-engine.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "resolveMappingSource",
+          "declaration": {
+            "name": "resolveMappingSource",
+            "module": "../../shared/variant-engine.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/data-companion-properties.js",
+      "declarations": [
         {
           "kind": "variable",
-          "name": "selectable"
+          "name": "DATA_WASH_SERIES_SHARE",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.75",
+          "description": "The series' share of the wash mix — the documented fill recipe."
         },
         {
           "kind": "variable",
-          "name": "hasChildren"
+          "name": "DATA_TINT_SERIES_SHARE",
+          "type": {
+            "text": "number"
+          },
+          "default": "0.12",
+          "description": "The series' share of the subtle tint mix behind ordinary copy."
+        },
+        {
+          "kind": "function",
+          "name": "dataCompanionProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "properties",
+              "type": {
+                "text": "Record<string, string>"
+              }
+            },
+            {
+              "name": "inheritedSeries",
+              "optional": true,
+              "type": {
+                "text": "Record<string, string>"
+              }
+            }
+          ],
+          "description": "Compute the wash, tint, and ink companions for every series token\npresent in an emitted property table, against that table's own background.\n\nReads the *emitted* strings — the same read-back principle as the fit\nreport — so a companion can never disagree with the identity token or\nthe background it composes with. Zone tables pass their own table and\nget zone-correct companions; tables without series tokens (a zone\ntable, which inherits the root's identities) take them from\n`inheritedSeries`, the root-emitted table."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "normalizeSegment",
+          "name": "DATA_WASH_SERIES_SHARE",
           "declaration": {
-            "name": "normalizeSegment",
-            "module": "dist/tree/esp-tree.js"
+            "name": "DATA_WASH_SERIES_SHARE",
+            "module": "dist/root/helpers/data-companion-properties.js"
           }
         },
         {
           "kind": "js",
-          "name": "buildWebTreePath",
+          "name": "DATA_TINT_SERIES_SHARE",
           "declaration": {
-            "name": "buildWebTreePath",
-            "module": "dist/tree/esp-tree.js"
+            "name": "DATA_TINT_SERIES_SHARE",
+            "module": "dist/root/helpers/data-companion-properties.js"
           }
         },
         {
           "kind": "js",
-          "name": "EspalierTree",
+          "name": "dataCompanionProperties",
           "declaration": {
-            "name": "EspalierTree",
-            "module": "dist/tree/esp-tree.js"
+            "name": "dataCompanionProperties",
+            "module": "dist/root/helpers/data-companion-properties.js"
           }
-        },
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/lightness-key-to-css.js",
+      "declarations": [
         {
-          "kind": "custom-element-definition",
-          "name": "esp-tree",
+          "kind": "function",
+          "name": "lightnessKeyToCSS",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "key",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Map a camelCase import(\"../../shared/theme.js\").LightnessKey\nto its CSS custom-property name.\n\n```\nraised1 → --esp-l-raised-1\nsurface → --esp-l-surface\n```"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "lightnessKeyToCSS",
           "declaration": {
-            "name": "EspalierTree",
-            "module": "dist/tree/esp-tree.js"
+            "name": "lightnessKeyToCSS",
+            "module": "dist/root/helpers/lightness-key-to-css.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/helpers/lightness-ramp-properties.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "lightnessRampProperties",
+          "return": {
+            "type": {
+              "text": "Record<string, string>"
+            }
+          },
+          "parameters": [
+            {
+              "name": "theme",
+              "type": {
+                "text": "EspalierTheme"
+              }
+            }
+          ],
+          "description": "The `--esp-l-*` ramp custom properties for a theme, in the percentage\nformat consumers expect inside relative color syntax — for example\n`oklch(from var(--esp-color-danger) var(--esp-l-raised-2) c h)`.\n\nEmitted by `<esp-root>` for the page and re-emitted by context zones\nfrom their merged theme, so ramp-derived styling — the `.intent-*`\nsurface classes, component chrome — re-derives against the zone's\nactual ramp instead of the root's. Without the zone emission a dark\nzone's class-styled chrome mixes provenance: a surface placed by the\nroot's light ramp under ink drawn from the zone's dark-surface table."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "lightnessRampProperties",
+          "declaration": {
+            "name": "lightnessRampProperties",
+            "module": "dist/root/helpers/lightness-ramp-properties.js"
           }
         }
       ]
@@ -97255,307 +99719,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/compute-semantic-properties.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "computeSemanticProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            },
-            {
-              "name": "variants",
-              "type": {
-                "text": "Record<ColorSource, OklchColor>"
-              }
-            },
-            {
-              "name": "options",
-              "default": "{}",
-              "type": {
-                "text": "ComputeSemanticPropertiesOptions"
-              }
-            }
-          ],
-          "description": "Derive the complete twenty-three-token semantic table for a resolved theme.\n\nRoot output, context scopes, and intent overlays all use\nthis function so their APCA pairings cannot drift apart."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "computeSemanticProperties",
-          "declaration": {
-            "name": "computeSemanticProperties",
-            "module": "dist/root/helpers/compute-semantic-properties.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/compute-theme-properties.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "dataSeriesProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            },
-            {
-              "name": "seed",
-              "type": {
-                "text": "OklchColor"
-              }
-            },
-            {
-              "name": "resolve",
-              "type": {
-                "text": "(source: unknown, label: string) => string"
-              }
-            },
-            {
-              "description": "Optional sink for the theme fit report (ESP0163). When\nsupplied, each semantic derivation is appended as it is emitted —\nthe emitted value read back out of the property record, and the\npre-enforcement value taken from the derivation itself — so a report\ndescribes this run rather than re-deriving it. When omitted the\npipeline does no reporting work at all.",
-              "name": "trace"
-            }
-          ],
-          "description": "Emit the categorical series identities from a theme's data palette.\n\nShared between the root emission and the zone-table path (the zone\ncompanions need the identities without re-emitting them), so the two\ncan never resolve a palette differently."
-        },
-        {
-          "kind": "function",
-          "name": "computeThemeProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            },
-            {
-              "name": "scheme",
-              "type": {
-                "text": "\"light\" | \"dark\""
-              }
-            },
-            {
-              "name": "trace",
-              "optional": true,
-              "type": {
-                "text": "ThemeFitTraceEntry[]"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "dataSeriesProperties",
-          "declaration": {
-            "name": "dataSeriesProperties",
-            "module": "dist/root/helpers/compute-theme-properties.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "computeThemeProperties",
-          "declaration": {
-            "name": "computeThemeProperties",
-            "module": "dist/root/helpers/compute-theme-properties.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/compute-variants.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "computeVariants",
-          "declaration": {
-            "name": "computeVariants",
-            "module": "../../shared/variant-engine.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "resolveMappingSource",
-          "declaration": {
-            "name": "resolveMappingSource",
-            "module": "../../shared/variant-engine.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/data-companion-properties.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "DATA_WASH_SERIES_SHARE",
-          "type": {
-            "text": "number"
-          },
-          "default": "0.75",
-          "description": "The series' share of the wash mix — the documented fill recipe."
-        },
-        {
-          "kind": "variable",
-          "name": "DATA_TINT_SERIES_SHARE",
-          "type": {
-            "text": "number"
-          },
-          "default": "0.12",
-          "description": "The series' share of the subtle tint mix behind ordinary copy."
-        },
-        {
-          "kind": "function",
-          "name": "dataCompanionProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "properties",
-              "type": {
-                "text": "Record<string, string>"
-              }
-            },
-            {
-              "name": "inheritedSeries",
-              "optional": true,
-              "type": {
-                "text": "Record<string, string>"
-              }
-            }
-          ],
-          "description": "Compute the wash, tint, and ink companions for every series token\npresent in an emitted property table, against that table's own background.\n\nReads the *emitted* strings — the same read-back principle as the fit\nreport — so a companion can never disagree with the identity token or\nthe background it composes with. Zone tables pass their own table and\nget zone-correct companions; tables without series tokens (a zone\ntable, which inherits the root's identities) take them from\n`inheritedSeries`, the root-emitted table."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DATA_WASH_SERIES_SHARE",
-          "declaration": {
-            "name": "DATA_WASH_SERIES_SHARE",
-            "module": "dist/root/helpers/data-companion-properties.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "DATA_TINT_SERIES_SHARE",
-          "declaration": {
-            "name": "DATA_TINT_SERIES_SHARE",
-            "module": "dist/root/helpers/data-companion-properties.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "dataCompanionProperties",
-          "declaration": {
-            "name": "dataCompanionProperties",
-            "module": "dist/root/helpers/data-companion-properties.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/lightness-key-to-css.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "lightnessKeyToCSS",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "key",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Map a camelCase import(\"../../shared/theme.js\").LightnessKey\nto its CSS custom-property name.\n\n```\nraised1 → --esp-l-raised-1\nsurface → --esp-l-surface\n```"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "lightnessKeyToCSS",
-          "declaration": {
-            "name": "lightnessKeyToCSS",
-            "module": "dist/root/helpers/lightness-key-to-css.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/root/helpers/lightness-ramp-properties.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "lightnessRampProperties",
-          "return": {
-            "type": {
-              "text": "Record<string, string>"
-            }
-          },
-          "parameters": [
-            {
-              "name": "theme",
-              "type": {
-                "text": "EspalierTheme"
-              }
-            }
-          ],
-          "description": "The `--esp-l-*` ramp custom properties for a theme, in the percentage\nformat consumers expect inside relative color syntax — for example\n`oklch(from var(--esp-color-danger) var(--esp-l-raised-2) c h)`.\n\nEmitted by `<esp-root>` for the page and re-emitted by context zones\nfrom their merged theme, so ramp-derived styling — the `.intent-*`\nsurface classes, component chrome — re-derives against the zone's\nactual ramp instead of the root's. Without the zone emission a dark\nzone's class-styled chrome mixes provenance: a surface placed by the\nroot's light ramp under ink drawn from the zone's dark-surface table."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "lightnessRampProperties",
-          "declaration": {
-            "name": "lightnessRampProperties",
-            "module": "dist/root/helpers/lightness-ramp-properties.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/shared/svgs/calendar-icon.js",