@taprootio/espalier 2.8.1 → 2.10.0

package/custom-elements.json

@@ -159,6 +159,22 @@
             "module": "dist/form-item/esp-form-item.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/help/esp-help-button.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/help/esp-help-provider.js"
+          }
+        },
         {
           "kind": "js",
           "name": "*",
@@ -631,6 +647,30 @@
             "module": "./shared/flyout-events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "requestHelp",
+          "declaration": {
+            "name": "requestHelp",
+            "module": "./shared/help-events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HelpRequest",
+          "declaration": {
+            "name": "HelpRequest",
+            "module": "./shared/help-events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HelpState",
+          "declaration": {
+            "name": "HelpState",
+            "module": "./shared/help-events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "getEspBus",
@@ -671,6 +711,14 @@
             "module": "./shared/bus-events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelpEvents",
+          "declaration": {
+            "name": "HelpEvents",
+            "module": "./shared/bus-events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PopoverEvents",
@@ -6953,147 +7001,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/burger/esp-burger.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
-          "name": "EspalierBurger",
-          "cssProperties": [
-            {
-              "description": "The color of the burger lines when closed.",
-              "name": "--esp-color-burger"
-            },
-            {
-              "description": "The hover color of the burger lines when closed.",
-              "name": "--esp-color-burger-hover"
-            },
-            {
-              "description": "The color of the burger lines when open.",
-              "name": "--esp-color-burger-opened"
-            },
-            {
-              "description": "The hover color of the burger lines when open.",
-              "name": "--esp-color-burger-opened-hover"
-            },
-            {
-              "description": "The stroke width of the burger lines.",
-              "name": "--esp-size-burger-stroke"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "menuOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether or not the burger indicates an open state.",
-              "attribute": "menu-open"
-            },
-            {
-              "kind": "field",
-              "name": "presentationOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
-              "attribute": "presentation-only"
-            },
-            {
-              "kind": "method",
-              "name": "toggleMenu"
-            }
-          ],
-          "events": [
-            {
-              "name": "opened",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the button is clicked and the image changes from a burger to an X."
-            },
-            {
-              "name": "closed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the button is clicked and the image changes from an X to a burger. ```html <esp-burger></esp-burger> <script> const theBurger = findByTagName(\"esp-burger\")[0]; theBurger.addEventListener(\"opened\", () => { showToast({ message: \"It would be a good time to show the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); theBurger.addEventListener(\"closed\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "menu-open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether or not the burger indicates an open state.",
-              "fieldName": "menuOpen"
-            },
-            {
-              "name": "presentation-only",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
-              "fieldName": "presentationOnly"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "docPageTitle": {
-            "name": "Burger",
-            "description": ""
-          },
-          "docUrl": {
-            "name": "/components/burger",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Interaction",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Burger",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "burger",
-            "description": ""
-          },
-          "tagName": "esp-burger",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EspalierBurger",
-          "declaration": {
-            "name": "EspalierBurger",
-            "module": "dist/burger/esp-burger.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "esp-burger",
-          "declaration": {
-            "name": "EspalierBurger",
-            "module": "dist/burger/esp-burger.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/button/action-state-lightness.js",
@@ -8259,6 +8166,10 @@
             {
               "name": "tabindex"
             },
+            {
+              "name": "aria-pressed",
+              "description": "Forwards a toggle's pressed state to the inner native button. Use `\"true\"` while the controlled content is active and `\"false\"` otherwise."
+            },
             {
               "description": "Renders the button with a borderless, transparent treatment for\nquiet icon or inline actions.\n\n```html\n<esp-button incognito icon-only icon=\"edit\" aria-label=\"Edit\"></esp-button>\n```",
               "name": "incognito",
@@ -8440,6 +8351,147 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/burger/esp-burger.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
+          "name": "EspalierBurger",
+          "cssProperties": [
+            {
+              "description": "The color of the burger lines when closed.",
+              "name": "--esp-color-burger"
+            },
+            {
+              "description": "The hover color of the burger lines when closed.",
+              "name": "--esp-color-burger-hover"
+            },
+            {
+              "description": "The color of the burger lines when open.",
+              "name": "--esp-color-burger-opened"
+            },
+            {
+              "description": "The hover color of the burger lines when open.",
+              "name": "--esp-color-burger-opened-hover"
+            },
+            {
+              "description": "The stroke width of the burger lines.",
+              "name": "--esp-size-burger-stroke"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "menuOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether or not the burger indicates an open state.",
+              "attribute": "menu-open"
+            },
+            {
+              "kind": "field",
+              "name": "presentationOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
+              "attribute": "presentation-only"
+            },
+            {
+              "kind": "method",
+              "name": "toggleMenu"
+            }
+          ],
+          "events": [
+            {
+              "name": "opened",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when the button is clicked and the image changes from a burger to an X."
+            },
+            {
+              "name": "closed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when the button is clicked and the image changes from an X to a burger. ```html <esp-burger></esp-burger> <script> const theBurger = findByTagName(\"esp-burger\")[0]; theBurger.addEventListener(\"opened\", () => { showToast({ message: \"It would be a good time to show the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); theBurger.addEventListener(\"closed\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "menu-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether or not the burger indicates an open state.",
+              "fieldName": "menuOpen"
+            },
+            {
+              "name": "presentation-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
+              "fieldName": "presentationOnly"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "docPageTitle": {
+            "name": "Burger",
+            "description": ""
+          },
+          "docUrl": {
+            "name": "/components/burger",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Interaction",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Burger",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "burger",
+            "description": ""
+          },
+          "tagName": "esp-burger",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EspalierBurger",
+          "declaration": {
+            "name": "EspalierBurger",
+            "module": "dist/burger/esp-burger.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-burger",
+          "declaration": {
+            "name": "EspalierBurger",
+            "module": "dist/burger/esp-burger.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/checkbox/esp-checkbox-group.js",
@@ -16224,7 +16276,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A transient panel for help, more-info, and preview content that\nclaims designed spare width before ever covering the page.\n\nPlace one `esp-flyout` in an `esp-page`'s `flyout` slot. The panel\nlives on the canvas, outside the content surface. The page decides\nwhere it 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** — below the mobile threshold (`50em`, the\n   same one 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.\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`, and opening it never steals focus. In the overlay-drawer\nmode (4) it is a true modal: `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-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(\"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-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(\"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(\"clicked\", () => dockedFlyout.toggle());\n</script>\n```\n\nBelow the `50em` viewport threshold 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(\"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. Overlay drawers stay viewport-fixed.\n\nThe bus is a global broadcast, so every listening flyout on the\npage answers a `showFlyout()` call. The demos above are each driven\nby their own toggle button, so they are marked `standalone` to opt\nout of the bus — leaving this one flyout as the page's shared\nsurface. In a real app you typically have a single flyout and need\nno attribute at all.\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(\"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(\"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, more-info, and preview content that\nclaims designed spare width before ever covering the page.\n\nPlace one `esp-flyout` in an `esp-page`'s `flyout` slot. The panel\nlives on the canvas, outside the content surface. The page decides\nwhere it 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** — below the mobile threshold (`50em`, the\n   same one 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.\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`, and opening it never steals focus. In the overlay-drawer\nmode (4) it is a true modal: `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-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(\"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-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(\"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(\"clicked\", () => dockedFlyout.toggle());\n</script>\n```\n\nBelow the `50em` viewport threshold 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(\"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(\"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(\"clicked\", () => {\n    showFlyout({\n      heading: \"Pears\",\n      content: pearsDescription.content.cloneNode(true),\n      anchor: pearsButton,\n    });\n  });\n</script>\n```",
           "name": "EspalierFlyout",
           "cssProperties": [
             {
@@ -16371,7 +16423,19 @@
                 "text": "HTMLElement | undefined"
               },
               "privacy": "public",
-              "description": "Triggering element whose block-start edge the in-grid panel should\nalign with. Anchored panels stay in normal page flow, shift upward\nonly while needed to fit the visible scrollport, and return to their\nnatural alignment as the page scrolls. Oversized content scrolls\ninside the panel. Overlay drawers ignore this geometry and remain\nfixed to the viewport."
+              "description": "Triggering element whose block-start edge the in-grid panel should\nalign with. Anchored panels size to their content when it fits, shift\nonly enough to remain visible when it does not, and keep an edge\nmarker aligned with the trigger. Overlay drawers ignore this geometry\nand remain fixed to the viewport."
+            },
+            {
+              "kind": "field",
+              "name": "fullHeight",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Fill the visible block-size in gutter and docked modes. The content\nregion scrolls independently. Overlay drawers already fill the viewport.",
+              "attribute": "full-height",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -16393,10 +16457,22 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Whether this flyout ignores the shared `showFlyout()` /\n`closeFlyout()` bus and is driven only through its own\n`show()` / `close()` / `toggle()` API.\n\nBy default a flyout services the bus, so a single flyout in a\npage \"just works\" as the target of `showFlyout()` — the same\nzero-config model as `<esp-toaster>` and `showToast()`. Because\nthe bus is a global broadcast, **every** listening flyout on the\npage answers a `showFlyout()` call; set `standalone` on any\nflyout you drive directly so only your one designated help\nsurface responds.",
+              "description": "Whether this flyout ignores the shared `showFlyout()` /\n`closeFlyout()` bus and is driven only through its own\n`show()` / `close()` / `toggle()` API.\n\nBy default a flyout services the bus, so a single flyout in a\npage \"just works\" as the target of `showFlyout()` — the same\nzero-config model as `<esp-toaster>` and `showToast()`. Anchored\nrequests resolve to one page scope according to `scope`; set\n`standalone` on flyouts that should never answer the bus.",
               "attribute": "standalone",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "scope",
+              "type": {
+                "text": "\"outermost\" | \"nearest\""
+              },
+              "privacy": "public",
+              "default": "\"outermost\"",
+              "description": "Which containing page owns anchored bus requests.\n\n- `\"outermost\"` (default) routes to the flyout in the outermost\n  `esp-page` containing the request trigger.\n- `\"nearest\"` explicitly gives this flyout precedence for requests\n  originating in its own page or nested descendants.\n\nA `scope=\"nearest\"` flyout must be a light-DOM descendant of the\n`esp-page` whose requests it owns so that page can discover it.\n\nRequests without an `anchor` or `returnFocusTo` have no local context,\nso only outermost page flyouts service them. Use the instance API for\na directly controlled nested flyout.",
+              "attribute": "scope",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "returnFocusTo",
@@ -16450,6 +16526,11 @@
               "name": "boundAnchorViewportChange",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "boundFullHeightRequest",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "anchorPositionRaf",
@@ -16627,6 +16708,60 @@
               ],
               "description": "Service a `\"show-flyout\"` bus request: swap in the requested\nheading/content (never stacking) and open."
             },
+            {
+              "kind": "method",
+              "name": "shouldHandleShowRequest",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "FlyoutConfig"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getPageChain",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "from",
+                  "type": {
+                    "text": "Element"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "hasNearestScopeFlyout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "page",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleKeydown",
@@ -16664,7 +16799,7 @@
                   "text": "void"
                 }
               },
-              "description": "Position an anchored in-grid flyout at the trigger's natural\nblock-start, then shift it upward only enough to keep its bottom in\nthe visible scrollport. The shift is recalculated during scrolling,\nso it returns to zero when the panel fits at its natural top."
+              "description": "Position an anchored in-grid flyout at the trigger. Content-height\npanels shift upward only when they would overflow; explicitly\nfull-height panels use the complete scrollport. The leading-edge\nmarker remains aligned with the trigger for contextual help and is\nomitted from the full-height reading surface."
             },
             {
               "kind": "method",
@@ -17335,6 +17470,15 @@
               "description": "Placement behavior.\n\n- `\"auto\"` (default) — the page's placement ladder: gutter,\n  docked sidebar, then overlay drawer below the `50em` viewport\n  threshold.\n- `\"overlay\"` — always the fixed overlay drawer, at any width.\n  The page never reserves a grid track for an overlay-mode\n  flyout.",
               "fieldName": "mode"
             },
+            {
+              "name": "full-height",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Fill the visible block-size in gutter and docked modes. The content\nregion scrolls independently. Overlay drawers already fill the viewport.",
+              "fieldName": "fullHeight"
+            },
             {
               "name": "match-surface",
               "type": {
@@ -17350,9 +17494,18 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this flyout ignores the shared `showFlyout()` /\n`closeFlyout()` bus and is driven only through its own\n`show()` / `close()` / `toggle()` API.\n\nBy default a flyout services the bus, so a single flyout in a\npage \"just works\" as the target of `showFlyout()` — the same\nzero-config model as `<esp-toaster>` and `showToast()`. Because\nthe bus is a global broadcast, **every** listening flyout on the\npage answers a `showFlyout()` call; set `standalone` on any\nflyout you drive directly so only your one designated help\nsurface responds.",
+              "description": "Whether this flyout ignores the shared `showFlyout()` /\n`closeFlyout()` bus and is driven only through its own\n`show()` / `close()` / `toggle()` API.\n\nBy default a flyout services the bus, so a single flyout in a\npage \"just works\" as the target of `showFlyout()` — the same\nzero-config model as `<esp-toaster>` and `showToast()`. Anchored\nrequests resolve to one page scope according to `scope`; set\n`standalone` on flyouts that should never answer the bus.",
               "fieldName": "standalone"
             },
+            {
+              "name": "scope",
+              "type": {
+                "text": "\"outermost\" | \"nearest\""
+              },
+              "default": "\"outermost\"",
+              "description": "Which containing page owns anchored bus requests.\n\n- `\"outermost\"` (default) routes to the flyout in the outermost\n  `esp-page` containing the request trigger.\n- `\"nearest\"` explicitly gives this flyout precedence for requests\n  originating in its own page or nested descendants.\n\nA `scope=\"nearest\"` flyout must be a light-DOM descendant of the\n`esp-page` whose requests it owns so that page can discover it.\n\nRequests without an `anchor` or `returnFocusTo` have no local context,\nso only outermost page flyouts service them. Use the instance API for\na directly controlled nested flyout.",
+              "fieldName": "scope"
+            },
             {
               "name": "scheme",
               "type": {
@@ -22166,6 +22319,14 @@
               "name": "fieldSlot",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "fieldElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "theField",
@@ -22361,6 +22522,28 @@
               "description": "Identifies this form item's field. Serves two purposes:\n1. Filters errors from the bound `errorPool` to show only\n   errors whose `fieldName` matches.\n2. Propagates as the `name` attribute on the slotted form\n   field, so there is no need to set `name` separately.",
               "attribute": "field-name"
             },
+            {
+              "kind": "field",
+              "name": "helpUrl",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Per-field help document override. A URL fragment selects the topic;\notherwise `field-name` supplies the anchor. When omitted, the nearest\ncomposed-tree ancestor's `help-src` is used.\n\n```html\n<esp-form-item\n  label=\"Email address\"\n  field-name=\"email\"\n  help-url=\"/help/account.html#contact-email\">\n  <esp-input type=\"email\"></esp-input>\n</esp-form-item>\n```",
+              "attribute": "help-url"
+            },
+            {
+              "kind": "field",
+              "name": "helpTitleSource",
+              "type": {
+                "text": "\"field\" | \"document\""
+              },
+              "privacy": "public",
+              "default": "\"field\"",
+              "description": "Chooses the flyout title for form-context help. The default, `field`,\nuses this form item's visible `label`. Set `document` to adopt the text\nof the matched heading in the help document instead.",
+              "attribute": "help-title-source"
+            },
             {
               "kind": "field",
               "name": "errorPool",
@@ -22530,6 +22713,24 @@
               "description": "Identifies this form item's field. Serves two purposes:\n1. Filters errors from the bound `errorPool` to show only\n   errors whose `fieldName` matches.\n2. Propagates as the `name` attribute on the slotted form\n   field, so there is no need to set `name` separately.",
               "fieldName": "fieldName"
             },
+            {
+              "name": "help-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Per-field help document override. A URL fragment selects the topic;\notherwise `field-name` supplies the anchor. When omitted, the nearest\ncomposed-tree ancestor's `help-src` is used.\n\n```html\n<esp-form-item\n  label=\"Email address\"\n  field-name=\"email\"\n  help-url=\"/help/account.html#contact-email\">\n  <esp-input type=\"email\"></esp-input>\n</esp-form-item>\n```",
+              "fieldName": "helpUrl"
+            },
+            {
+              "name": "help-title-source",
+              "type": {
+                "text": "\"field\" | \"document\""
+              },
+              "default": "\"field\"",
+              "description": "Chooses the flyout title for form-context help. The default, `field`,\nuses this form item's visible `label`. Set `document` to adopt the text\nof the matched heading in the help document instead.",
+              "fieldName": "helpTitleSource"
+            },
             {
               "name": "error-pool",
               "type": {
@@ -26119,206 +26320,1962 @@
               }
             }
           ],
-          "events": [
-            {
-              "type": {
-                "text": "CustomEvent<EspThemeToggleEventDetail>"
-              },
-              "description": "Fired after the built-in theme toggle changes the nearest `esp-root`. Bubbles and crosses the shadow boundary.",
-              "name": "esp-theme-toggle"
-            },
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<EspThemeToggleEventDetail>"
+              },
+              "description": "Fired after the built-in theme toggle changes the nearest `esp-root`. Bubbles and crosses the shadow boundary.",
+              "name": "esp-theme-toggle"
+            },
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "show-burger",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Force the burger button to be visible regardless of the\nmenu width. Use this when the burger controls an external\nelement (e.g. a sidebar drawer) instead of the built-in\n`<esp-menu>` overlay.",
+              "fieldName": "showBurger"
+            },
+            {
+              "name": "layout",
+              "type": {
+                "text": "HeaderLayout"
+              },
+              "description": "Header layout style.\n\n- `standard` places brand, menu, and actions on one row.\n- `centered-brand` centers the brand between left navigation and actions.\n- `extended` puts navigation on a second row on wide screens.\n- `extended-centered` centers the brand and second-row navigation.\n- `minimal` keeps only brand/actions inline and uses the drawer menu.\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-padding);\">\n  <esp-header\n    brand-logo=\"/assets/favicon.svg\"\n    brand-text=\"Espalier\"\n    brand-href=\"#\"\n    brand-alt=\"Espalier logo\"\n    layout=\"standard\"\n    theme-toggle=\"visible\">\n    <esp-menu slot=\"menu\" mode=\"horizontal\">\n      <esp-menu-item label=\"Components\" url=\"#components\"></esp-menu-item>\n      <esp-menu-item label=\"Guides\" url=\"#guides\"></esp-menu-item>\n    </esp-menu>\n  </esp-header>\n\n  <div\n    style=\"\n      display: grid;\n      gap: var(--esp-size-small);\n    \">\n    <esp-form-item label=\"Header layout\">\n      <esp-pick-one>\n        <esp-picker-item text=\"Standard\" value=\"standard\" selected></esp-picker-item>\n        <esp-picker-item text=\"Centered brand\" value=\"centered-brand\"></esp-picker-item>\n        <esp-picker-item text=\"Extended\" value=\"extended\"></esp-picker-item>\n        <esp-picker-item text=\"Extended centered\" value=\"extended-centered\"></esp-picker-item>\n        <esp-picker-item text=\"Minimal\" value=\"minimal\"></esp-picker-item>\n      </esp-pick-one>\n    </esp-form-item>\n  </div>\n</div>\n<script>\n  const header = findByTagName(\"esp-header\")[0];\n  const picker = findByTagName(\"esp-pick-one\")[0];\n\n  function applyLayout(event) {\n    header.layout = event.detail?.value || picker.value || \"standard\";\n  }\n\n  picker.addEventListener(\"value-changed\", applyLayout);\n</script>\n```",
+              "default": "\"standard\"",
+              "fieldName": "layout"
+            },
+            {
+              "name": "brand-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand text used when the `brand` slot is empty.",
+              "fieldName": "brandText"
+            },
+            {
+              "name": "brand-logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand logo URL used when the `brand` slot is empty.",
+              "fieldName": "brandLogo"
+            },
+            {
+              "name": "light-brand-logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in light scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "fieldName": "lightBrandLogo"
+            },
+            {
+              "name": "dark-brand-logo",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand logo URL used in dark scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
+              "fieldName": "darkBrandLogo"
+            },
+            {
+              "name": "brand-href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Optional brand link used by configured logo/text branding.",
+              "fieldName": "brandHref"
+            },
+            {
+              "name": "brand-alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Accessible text for a logo-only configured brand. When brand text\nis also present, the logo is decorative unless this is set.",
+              "fieldName": "brandAlt"
+            },
+            {
+              "name": "brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Optional configured brand color. Prefer theme fields for\nproduct-wide brand typography and this property for a local\nheader override.",
+              "fieldName": "brandColor"
+            },
+            {
+              "name": "light-brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand color used in light scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
+              "fieldName": "lightBrandColor"
+            },
+            {
+              "name": "dark-brand-color",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Configured brand color used in dark scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
+              "fieldName": "darkBrandColor"
+            },
+            {
+              "name": "brand-align",
+              "type": {
+                "text": "HeaderBrandAlign"
+              },
+              "description": "Horizontal placement of the brand content inside its grid area.",
+              "default": "\"start\"",
+              "fieldName": "brandAlign"
+            },
+            {
+              "name": "brand-wrap",
+              "type": {
+                "text": "HeaderBrandWrap"
+              },
+              "description": "Long-brand behavior for configured brand text.",
+              "default": "\"truncate\"",
+              "fieldName": "brandWrap"
+            },
+            {
+              "name": "menu-display",
+              "type": {
+                "text": "HeaderMenuDisplay"
+              },
+              "description": "Navigation display intent. `auto` tries inline navigation before\nusing a drawer, `drawer` always uses the burger/drawer pattern,\nand `inline` leaves overflow handling to the slotted menu.",
+              "default": "\"auto\"",
+              "fieldName": "menuDisplay"
+            },
+            {
+              "name": "theme-toggle",
+              "type": {
+                "text": "HeaderThemeToggle"
+              },
+              "description": "Whether the header renders its built-in light/dark toggle.\nConsumers can still provide their own control in the `buttons`\nslot when this is `hidden`.",
+              "default": "\"hidden\"",
+              "fieldName": "themeToggle"
+            },
+            {
+              "name": "scroll-behavior",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"none\"",
+              "description": "Space-separated scroll behavior tokens. Supported tokens:\n`compact`, `elevate`, `transparent`, `reveal`, `dock`,\n`collapse-topbar`, and `progress`.",
+              "fieldName": "scrollBehavior"
+            },
+            {
+              "name": "scroll-threshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "16",
+              "description": "Scroll distance in pixels before scroll-reactive behavior applies.",
+              "fieldName": "scrollThreshold"
+            },
+            {
+              "name": "dock-offset",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Scroll distance in pixels before `scroll-behavior=\"dock\"` applies.\nThis is commonly set to the hero height when a transparent header\nshould dock after the first section.",
+              "fieldName": "dockOffset"
+            },
+            {
+              "name": "drawer-target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Optional ID of an external drawer-capable menu controlled by the\nheader burger. When set, burger open/close events call\n`openDrawer()` / `closeDrawer()` on that element instead of the\nmenu slotted into the header.",
+              "fieldName": "drawerTarget"
+            },
+            {
+              "name": "full-bleed-content",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Opt out of surface alignment. When an `esp-header` is slotted into an\n`esp-page`, it constrains its bar content to the page's content\nsurface by default (the bar background stays full-bleed). Set this to\nlet the content span the full width instead, as it did before the\npage grew alignment modes. Standalone headers (outside `esp-page`) are\nalready full-bleed and unaffected.",
+              "fieldName": "fullBleedContent"
+            },
+            {
+              "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": "variant",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "description": "The [color variant](/guides/color/variants) of the element.",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "EspalierElementBase",
+            "module": "dist/shared/esp-element-base.js"
+          },
+          "tagName": "esp-header",
+          "customElement": true,
+          "docPageTitle": {
+            "name": "Header",
+            "description": ""
+          },
+          "docUrl": {
+            "name": "/components/header",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Navigation",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Header",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "layout-navbar",
+            "description": ""
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EspalierHeader",
+          "declaration": {
+            "name": "EspalierHeader",
+            "module": "dist/header/esp-header.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-header",
+          "declaration": {
+            "name": "EspalierHeader",
+            "module": "dist/header/esp-header.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/header/esp-menu-group.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/menu/esp-menu-group.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/header/esp-menu-item.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/menu/esp-menu-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/header/esp-menu.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/menu/esp-menu.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/header/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/burger/esp-burger.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/menu/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/header/esp-header-button.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "dist/header/esp-header.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/help/esp-help-button.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An icon-only trigger for URL-addressable help. Set `help-url` directly or\nplace the button beneath an ancestor carrying `help-src`; `anchor` selects\na stable heading id inside that document. The provider keeps the button's\npressed state synchronized while its topic is showing.\n\n```html\n<section help-src=\"/help/billing.html\">\n  <h2>\n    Billing\n    <esp-help-button anchor=\"billing\" label=\"Help for billing\"></esp-help-button>\n  </h2>\n</section>\n\n<esp-help-button\n  help-url=\"/help/exporting.html#csv\"\n  label=\"Help with CSV exports\"\n  title=\"Export help\">\n</esp-help-button>\n```",
+          "name": "EspalierHelpButton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "helpUrl",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Per-trigger help document override. May include a topic fragment. When\nomitted, the nearest composed-tree ancestor's `help-src` is used.",
+              "attribute": "help-url"
+            },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Stable heading id inside the resolved help document.",
+              "attribute": "anchor"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"Help\"",
+              "description": "Accessible label for the icon-only button.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "helpTitle",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Optional flyout heading. Topic/document headings are used when omitted.",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "placementTarget",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "public",
+              "description": "Element the contextual flyout should point at. Form items set this to\ntheir field control while the help button remains the focus-return target."
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether this button's exact help topic is currently showing.",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "boundHelpStateChanged",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "resolvedTarget",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Forward focus to the composed native control."
+            },
+            {
+              "kind": "field",
+              "name": "handleActivation",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "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": "variantTokenOriginalValues",
+              "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": "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": "variantBacker",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "privacy": "protected",
+              "default": "\"primary\"",
+              "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": "variant",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "privacy": "public",
+              "description": "The [color variant](/guides/color/variants) of the element.",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncRootFromDom",
+              "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": "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": "textContrast",
+              "type": {
+                "text": "Partial<\n    Record<SemanticColorName, { bg: SemanticColorName; targetLc: number }>\n  >"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "{ text: { bg: \"background\", targetLc: 75 }, dangerText: { bg: \"background\", targetLc: 75 }, headings: { bg: \"background\", targetLc: 60 }, headingsHover: { bg: \"background\", targetLc: 60 }, link: { bg: \"background\", targetLc: 75 }, linkHover: { bg: \"background\", targetLc: 75 }, actionText: { bg: \"actionBackground\", targetLc: 75 }, inputCaret: { bg: \"layer2\", targetLc: 60 }, inputSelection: { bg: \"inputSelectionBg\", targetLc: 60 }, }",
+              "description": "Text tokens that require APCA contrast enforcement.\n\nEach entry maps a text-bearing semantic token to:\n  - `bg`: the semantic token it sits on (reference color)\n  - `targetLc`: the minimum |Lc| the text must achieve",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "statusVariantSources",
+              "type": {
+                "text": "ReadonlySet<ColorSource>"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new Set<ColorSource>([ \"danger\", \"success\", \"warning\", ])",
+              "description": "Variant color sources whose meaning is carried by a fixed hue rather\nthan the brand seed — the destructive / positive / warning status\nfamilies (ADR-004). For these variants the filled-action tokens are\npinned to the variant's own color so a theme cannot make them look\nlike an ordinary brand action. See task 098.",
+              "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. For a\nstatus variant these always derive from the variant's own color, so\nthe Taproot \"Buttons\" semantic group (which re-points\n`actionBackground` / `actionText` to a brand source) cannot rotate a\ndestructive / warning / positive action off its semantic hue. See\ntask 098.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyVariantTokens",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "effectiveVariantTokenSource",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ColorSource"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "SemanticColorName"
+                  }
+                },
+                {
+                  "name": "mappedSource",
+                  "type": {
+                    "text": "ColorSource"
+                  }
+                },
+                {
+                  "name": "isStatusVariant",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Resolve the color source used to derive a semantic token for the\nactive variant.\n\nNormally this is the theme's mapping source, so the variant performs a\nfull palette shift relative to its own color. The exception is the\nmeaning-bearing status variants (`danger`, `success`, `warning`): their\nfilled-action tokens (`actionBackground`, `actionText`) are pinned to\nthe variant's own color — the `primary` entry of the sub-variant\npalette, which is the variant color itself — so a theme that re-points\nthe Buttons semantic group to a brand source cannot rotate a\ndestructive / warning / positive action off its semantic hue. Ordinary\nbrand and primary variants keep full theme customization. See task 098.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getVariantColorSource",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "ColorSource | \"\""
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setVariantTokenProperty",
+              "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": "clearVariantTokens",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "help-url",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Per-trigger help document override. May include a topic fragment. When\nomitted, the nearest composed-tree ancestor's `help-src` is used.",
+              "fieldName": "helpUrl"
+            },
+            {
+              "name": "anchor",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Stable heading id inside the resolved help document.",
+              "fieldName": "anchor"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Help\"",
+              "description": "Accessible label for the icon-only button.",
+              "fieldName": "label"
+            },
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Optional flyout heading. Topic/document headings are used when omitted.",
+              "fieldName": "helpTitle"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether this button's exact help topic is currently showing.",
+              "fieldName": "active"
+            },
+            {
+              "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": "variant",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "description": "The [color variant](/guides/color/variants) of the element.",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "EspalierElementBase",
+            "module": "dist/shared/esp-element-base.js"
+          },
+          "docPageTitle": {
+            "name": "Help",
+            "description": "Button"
+          },
+          "docUrl": {
+            "name": "/components/help/button",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Interaction",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Help",
+            "description": "Button"
+          },
+          "menuIcon": {
+            "name": "info",
+            "description": ""
+          },
+          "tagName": "esp-help-button",
+          "customElement": true,
+          "cssProperties": [
+            {
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EspalierHelpButton",
+          "declaration": {
+            "name": "EspalierHelpButton",
+            "module": "dist/help/esp-help-button.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-help-button",
+          "declaration": {
+            "name": "EspalierHelpButton",
+            "module": "dist/help/esp-help-button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/help/esp-help-provider.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Headless provider for URL-addressable help documents. Place one provider\ninside the same `<esp-root>` as the page's shared `<esp-flyout>`. It\nservices `requestHelp()` calls, fetches and normalizes the document, and\nswaps an internal help view into the generic flyout surface.\n\nSuccessful documents are cached by absolute source URL. A newer request\naborts an older in-flight fetch, so help always reflects the most recent\ntrigger. If no flyout services the provider's presentation request, the\noriginal URL opens in a new tab. Fetch failures stay in the flyout and\noffer an explicit \"Open help document\" action.\n\n```html\n<esp-root>\n  <esp-help-provider></esp-help-provider>\n  <esp-page help-src=\"/help/account.html\">\n    <esp-flyout slot=\"flyout\"></esp-flyout>\n    <!-- page content -->\n  </esp-page>\n</esp-root>\n```",
+          "name": "EspalierHelpProvider",
+          "members": [
+            {
+              "kind": "field",
+              "name": "cache",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Map<string, NormalizedHelpDocument>()"
+            },
+            {
+              "kind": "field",
+              "name": "warnedMissingAnchors",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Set<string>()"
+            },
+            {
+              "kind": "field",
+              "name": "activeRequest",
+              "type": {
+                "text": "HelpRequest | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "activeController",
+              "type": {
+                "text": "AbortController | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "activeContent",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "contentObserver",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new MutationObserver(() => { if (this.activeContent && !this.activeContent.isConnected) { this.endActiveRequest(); } })"
+            },
+            {
+              "kind": "field",
+              "name": "requestSequence",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "subscribed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "boundRequest",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "boundCloseRequest",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "boundFlyoutClosed",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleRequest",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "request",
+                  "type": {
+                    "text": "HelpRequest"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "fetchDocument",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<NormalizedHelpDocument>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "request",
+                  "type": {
+                    "text": "HelpRequest"
+                  }
+                },
+                {
+                  "name": "controller",
+                  "type": {
+                    "text": "AbortController"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "showInFlyout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "request",
+                  "type": {
+                    "text": "HelpRequest"
+                  }
+                },
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "FlyoutConfig"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "publishState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "request",
+                  "type": {
+                    "text": "HelpRequest"
+                  }
+                },
+                {
+                  "name": "open",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "publishClosedState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "endActiveRequest",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "warnForMissingAnchor",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "request",
+                  "type": {
+                    "text": "HelpRequest"
+                  }
+                },
+                {
+                  "name": "anchorFound",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "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": "variantTokenOriginalValues",
+              "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": "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": "variantBacker",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "privacy": "protected",
+              "default": "\"primary\"",
+              "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": "variant",
+              "type": {
+                "text": "EspalierVariant"
+              },
+              "privacy": "public",
+              "description": "The [color variant](/guides/color/variants) of the element.",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "syncRootFromDom",
+              "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": "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": "textContrast",
+              "type": {
+                "text": "Partial<\n    Record<SemanticColorName, { bg: SemanticColorName; targetLc: number }>\n  >"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "{ text: { bg: \"background\", targetLc: 75 }, dangerText: { bg: \"background\", targetLc: 75 }, headings: { bg: \"background\", targetLc: 60 }, headingsHover: { bg: \"background\", targetLc: 60 }, link: { bg: \"background\", targetLc: 75 }, linkHover: { bg: \"background\", targetLc: 75 }, actionText: { bg: \"actionBackground\", targetLc: 75 }, inputCaret: { bg: \"layer2\", targetLc: 60 }, inputSelection: { bg: \"inputSelectionBg\", targetLc: 60 }, }",
+              "description": "Text tokens that require APCA contrast enforcement.\n\nEach entry maps a text-bearing semantic token to:\n  - `bg`: the semantic token it sits on (reference color)\n  - `targetLc`: the minimum |Lc| the text must achieve",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "statusVariantSources",
+              "type": {
+                "text": "ReadonlySet<ColorSource>"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new Set<ColorSource>([ \"danger\", \"success\", \"warning\", ])",
+              "description": "Variant color sources whose meaning is carried by a fixed hue rather\nthan the brand seed — the destructive / positive / warning status\nfamilies (ADR-004). For these variants the filled-action tokens are\npinned to the variant's own color so a theme cannot make them look\nlike an ordinary brand action. See task 098.",
+              "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. For a\nstatus variant these always derive from the variant's own color, so\nthe Taproot \"Buttons\" semantic group (which re-points\n`actionBackground` / `actionText` to a brand source) cannot rotate a\ndestructive / warning / positive action off its semantic hue. See\ntask 098.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyVariantTokens",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "effectiveVariantTokenSource",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "ColorSource"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "SemanticColorName"
+                  }
+                },
+                {
+                  "name": "mappedSource",
+                  "type": {
+                    "text": "ColorSource"
+                  }
+                },
+                {
+                  "name": "isStatusVariant",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Resolve the color source used to derive a semantic token for the\nactive variant.\n\nNormally this is the theme's mapping source, so the variant performs a\nfull palette shift relative to its own color. The exception is the\nmeaning-bearing status variants (`danger`, `success`, `warning`): their\nfilled-action tokens (`actionBackground`, `actionText`) are pinned to\nthe variant's own color — the `primary` entry of the sub-variant\npalette, which is the variant color itself — so a theme that re-points\nthe Buttons semantic group to a brand source cannot rotate a\ndestructive / warning / positive action off its semantic hue. Ordinary\nbrand and primary variants keep full theme customization. See task 098.",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getVariantColorSource",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "ColorSource | \"\""
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setVariantTokenProperty",
+              "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": "clearVariantTokens",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "EspalierElementBase",
+            "module": "dist/shared/esp-element-base.js"
+          },
+          "docPageTitle": {
+            "name": "Help",
+            "description": "Provider"
+          },
+          "docUrl": {
+            "name": "/components/help/provider",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Feedback",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Help",
+            "description": "Provider"
+          },
+          "menuIcon": {
+            "name": "info",
+            "description": ""
+          },
+          "tagName": "esp-help-provider",
+          "customElement": true,
+          "cssProperties": [
             {
-              "name": "value-changed",
-              "type": {
-                "text": "CustomEvent"
-              },
+              "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"
               }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "show-burger",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Force the burger button to be visible regardless of the\nmenu width. Use this when the burger controls an external\nelement (e.g. a sidebar drawer) instead of the built-in\n`<esp-menu>` overlay.",
-              "fieldName": "showBurger"
-            },
-            {
-              "name": "layout",
-              "type": {
-                "text": "HeaderLayout"
-              },
-              "description": "Header layout style.\n\n- `standard` places brand, menu, and actions on one row.\n- `centered-brand` centers the brand between left navigation and actions.\n- `extended` puts navigation on a second row on wide screens.\n- `extended-centered` centers the brand and second-row navigation.\n- `minimal` keeps only brand/actions inline and uses the drawer menu.\n\n```html\n<div style=\"display: grid; gap: var(--esp-size-padding);\">\n  <esp-header\n    brand-logo=\"/assets/favicon.svg\"\n    brand-text=\"Espalier\"\n    brand-href=\"#\"\n    brand-alt=\"Espalier logo\"\n    layout=\"standard\"\n    theme-toggle=\"visible\">\n    <esp-menu slot=\"menu\" mode=\"horizontal\">\n      <esp-menu-item label=\"Components\" url=\"#components\"></esp-menu-item>\n      <esp-menu-item label=\"Guides\" url=\"#guides\"></esp-menu-item>\n    </esp-menu>\n  </esp-header>\n\n  <div\n    style=\"\n      display: grid;\n      gap: var(--esp-size-small);\n    \">\n    <esp-form-item label=\"Header layout\">\n      <esp-pick-one>\n        <esp-picker-item text=\"Standard\" value=\"standard\" selected></esp-picker-item>\n        <esp-picker-item text=\"Centered brand\" value=\"centered-brand\"></esp-picker-item>\n        <esp-picker-item text=\"Extended\" value=\"extended\"></esp-picker-item>\n        <esp-picker-item text=\"Extended centered\" value=\"extended-centered\"></esp-picker-item>\n        <esp-picker-item text=\"Minimal\" value=\"minimal\"></esp-picker-item>\n      </esp-pick-one>\n    </esp-form-item>\n  </div>\n</div>\n<script>\n  const header = findByTagName(\"esp-header\")[0];\n  const picker = findByTagName(\"esp-pick-one\")[0];\n\n  function applyLayout(event) {\n    header.layout = event.detail?.value || picker.value || \"standard\";\n  }\n\n  picker.addEventListener(\"value-changed\", applyLayout);\n</script>\n```",
-              "default": "\"standard\"",
-              "fieldName": "layout"
-            },
-            {
-              "name": "brand-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Configured brand text used when the `brand` slot is empty.",
-              "fieldName": "brandText"
-            },
-            {
-              "name": "brand-logo",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Configured brand logo URL used when the `brand` slot is empty.",
-              "fieldName": "brandLogo"
-            },
-            {
-              "name": "light-brand-logo",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Configured brand logo URL used in light scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
-              "fieldName": "lightBrandLogo"
-            },
-            {
-              "name": "dark-brand-logo",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Configured brand logo URL used in dark scheme. A non-empty value\noverrides `brand-logo`; an empty value falls back to it.",
-              "fieldName": "darkBrandLogo"
             },
             {
-              "name": "brand-href",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Optional brand link used by configured logo/text branding.",
-              "fieldName": "brandHref"
-            },
-            {
-              "name": "brand-alt",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Accessible text for a logo-only configured brand. When brand text\nis also present, the logo is decorative unless this is set.",
-              "fieldName": "brandAlt"
-            },
-            {
-              "name": "brand-color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Optional configured brand color. Prefer theme fields for\nproduct-wide brand typography and this property for a local\nheader override.",
-              "fieldName": "brandColor"
-            },
-            {
-              "name": "light-brand-color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Configured brand color used in light scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
-              "fieldName": "lightBrandColor"
-            },
-            {
-              "name": "dark-brand-color",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Configured brand color used in dark scheme. A non-empty value\noverrides `brand-color`; an empty value falls back to it and then\n`--esp-header-brand-color`.",
-              "fieldName": "darkBrandColor"
-            },
-            {
-              "name": "brand-align",
-              "type": {
-                "text": "HeaderBrandAlign"
-              },
-              "description": "Horizontal placement of the brand content inside its grid area.",
-              "default": "\"start\"",
-              "fieldName": "brandAlign"
-            },
-            {
-              "name": "brand-wrap",
-              "type": {
-                "text": "HeaderBrandWrap"
-              },
-              "description": "Long-brand behavior for configured brand text.",
-              "default": "\"truncate\"",
-              "fieldName": "brandWrap"
-            },
-            {
-              "name": "menu-display",
-              "type": {
-                "text": "HeaderMenuDisplay"
-              },
-              "description": "Navigation display intent. `auto` tries inline navigation before\nusing a drawer, `drawer` always uses the burger/drawer pattern,\nand `inline` leaves overflow handling to the slotted menu.",
-              "default": "\"auto\"",
-              "fieldName": "menuDisplay"
-            },
-            {
-              "name": "theme-toggle",
-              "type": {
-                "text": "HeaderThemeToggle"
-              },
-              "description": "Whether the header renders its built-in light/dark toggle.\nConsumers can still provide their own control in the `buttons`\nslot when this is `hidden`.",
-              "default": "\"hidden\"",
-              "fieldName": "themeToggle"
+              "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"
+              }
             },
             {
-              "name": "scroll-behavior",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"none\"",
-              "description": "Space-separated scroll behavior tokens. Supported tokens:\n`compact`, `elevate`, `transparent`, `reveal`, `dock`,\n`collapse-topbar`, and `progress`.",
-              "fieldName": "scrollBehavior"
+              "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"
+              }
             },
             {
-              "name": "scroll-threshold",
-              "type": {
-                "text": "number"
-              },
-              "default": "16",
-              "description": "Scroll distance in pixels before scroll-reactive behavior applies.",
-              "fieldName": "scrollThreshold"
+              "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"
+              }
             },
             {
-              "name": "dock-offset",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Scroll distance in pixels before `scroll-behavior=\"dock\"` applies.\nThis is commonly set to the hero height when a transparent header\nshould dock after the first section.",
-              "fieldName": "dockOffset"
+              "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"
+              }
             },
             {
-              "name": "drawer-target",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "Optional ID of an external drawer-capable menu controlled by the\nheader burger. When set, burger open/close events call\n`openDrawer()` / `closeDrawer()` on that element instead of the\nmenu slotted into the header.",
-              "fieldName": "drawerTarget"
+              "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"
+              }
             },
             {
-              "name": "full-bleed-content",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Opt out of surface alignment. When an `esp-header` is slotted into an\n`esp-page`, it constrains its bar content to the page's content\nsurface by default (the bar background stays full-bleed). Set this to\nlet the content span the full width instead, as it did before the\npage grew alignment modes. Standalone headers (outside `esp-page`) are\nalready full-bleed and unaffected.",
-              "fieldName": "fullBleedContent"
-            },
+              "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"
+              }
+            }
+          ],
+          "attributes": [
             {
               "name": "scheme",
               "type": {
@@ -26345,136 +28302,44 @@
               }
             }
           ],
-          "superclass": {
-            "name": "EspalierElementBase",
-            "module": "dist/shared/esp-element-base.js"
-          },
-          "tagName": "esp-header",
-          "customElement": true,
-          "docPageTitle": {
-            "name": "Header",
-            "description": ""
-          },
-          "docUrl": {
-            "name": "/components/header",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Navigation",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Header",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "layout-navbar",
-            "description": ""
-          }
+          "events": [
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierHeader",
+          "name": "EspalierHelpProvider",
           "declaration": {
-            "name": "EspalierHeader",
-            "module": "dist/header/esp-header.js"
+            "name": "EspalierHelpProvider",
+            "module": "dist/help/esp-help-provider.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-header",
+          "name": "esp-help-provider",
           "declaration": {
-            "name": "EspalierHeader",
-            "module": "dist/header/esp-header.js"
+            "name": "EspalierHelpProvider",
+            "module": "dist/help/esp-help-provider.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/header/esp-menu-group.js",
+      "path": "dist/help/help-document.js",
       "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/menu/esp-menu-group.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/header/esp-menu-item.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/menu/esp-menu-item.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/header/esp-menu.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/menu/esp-menu.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/header/index.js",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/burger/esp-burger.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/menu/index.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/header/esp-header-button.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "dist/header/esp-header.js"
-          }
-        }
-      ]
+      "exports": []
     },
     {
       "kind": "javascript-module",
@@ -38199,6 +40064,14 @@
               "description": "The width of the open flyout track (and of the `esp-flyout` overlay drawer). Defaults to `20rem`.",
               "name": "--esp-page-flyout-width"
             },
+            {
+              "description": "Width of the persistent preview panel. Defaults to `20rem`.",
+              "name": "--esp-page-preview-width"
+            },
+            {
+              "description": "Optional minimum width of the main content well while preview is reclaiming canvas/surface space. Unset by default, so preview uses spare canvas only. Set a length such as `900px` to opt into reclaim behavior.",
+              "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"
@@ -38278,13 +40151,21 @@
               "name": "canvas"
             },
             {
-              "description": "The surface backdrop carrying the edge shadow/border. ```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 surface backdrop carrying the edge shadow/border.",
               "name": "surface"
+            },
+            {
+              "description": "The persistent preview complementary landmark.",
+              "name": "preview"
+            },
+            {
+              "description": "The sticky wrapper around preview content. ```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> ```",
+              "name": "preview-content"
             }
           ],
           "slots": [
             {
-              "description": "Global navigation content (typically an `esp-header`). ```html <esp-page class=\"docs\"> <esp-header slot=\"header\"> <a href=\"#\" slot=\"brand\" class=\"nav-logo\"> <svg> <use href=\"/assets/icons.svg#taproot-logo\" /> </svg> </a> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Mammals\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Reptiles\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Amphibians\" url=\"#\"></esp-menu-item> </esp-menu> <esp-header-button slot=\"buttons\" icon=\"cog\" aria-label=\"Settings\"></esp-header-button> </esp-header> <esp-menu slot=\"sidebar\" mode=\"drawer\"></esp-menu> <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": "Global navigation content (typically an `esp-header`). ```html <esp-page class=\"docs\"> <esp-header slot=\"header\"> <a href=\"#\" slot=\"brand\" class=\"nav-logo\"> <svg> <use href=\"/assets/icons.svg#taproot-logo\" /> </svg> </a> <esp-menu slot=\"menu\" mode=\"horizontal\"> <esp-menu-item label=\"Mammals\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Reptiles\" url=\"#\"></esp-menu-item> <esp-menu-item label=\"Amphibians\" url=\"#\"></esp-menu-item> </esp-menu> <esp-header-button slot=\"buttons\" icon=\"cog\" aria-label=\"Settings\"></esp-header-button> </esp-header> <esp-menu slot=\"sidebar\" mode=\"drawer\"></esp-menu> <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> ``` A persistent preview uses spare trailing canvas first. Set a main-well floor to let it reclaim surface width, and opt into collapsing a directly paired header/sidebar navigation to its accessible burger/drawer mode: ```html <esp-page preview-open preview-collapse-sidebar style=\"--esp-page-preview-width: 20rem; --esp-page-preview-min-main-width: 900px;\" > <esp-header slot=\"header\" drawer-target=\"site-nav\"></esp-header> <esp-menu id=\"site-nav\" slot=\"sidebar\" mode=\"vertical\"></esp-menu> <article>Primary content</article> <aside slot=\"preview\">Preview content</aside> </esp-page> ```",
               "name": "header"
             },
             {
@@ -38295,6 +40176,10 @@
               "description": "Content to place in the right aside.",
               "name": "right"
             },
+            {
+              "description": "Persistent preview content that uses spare right canvas width first, then optionally reclaims navigation and main-well width down to `--esp-page-preview-min-main-width`. Unlike flyout content, preview content is never replaced by the flyout request bus.",
+              "name": "preview"
+            },
             {
               "description": "A transient `esp-flyout` panel that lives on the canvas, outside the content surface. Closed it costs no width; open it claims the right canvas gutter first — the surface keeps its alignment weighting and shifts only as far as the flyout's width requires — then docks as a width-competing right sidebar when no gutter exists, and becomes an overlay drawer on small viewports. The persistent `right` aside and the transient flyout are complementary, not alternatives. A flyout opened with an `anchor` aligns to that trigger and stays in the same document scroll flow.",
               "name": "flyout"
@@ -38324,6 +40209,101 @@
               "name": "footerSlot",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "previewSlot",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previewSpace",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previewWidthProbe",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previewMainMinProbe",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previewResizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previewObservedWidths",
+              "privacy": "private",
+              "default": "new WeakMap<Element, number>()"
+            },
+            {
+              "kind": "field",
+              "name": "previewMediaQuery",
+              "type": {
+                "text": "MediaQueryList | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previewSyncRaf",
+              "type": {
+                "text": "number | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "previewSyncGeneration",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "previewSyncTask",
+              "type": {
+                "text": "Promise<void>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "previewHeader",
+              "type": {
+                "text": "PreviewCompactHeader | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "previewMenu",
+              "type": {
+                "text": "PreviewCompactMenu | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "previewCollapsedSidebarWidth",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
             {
               "kind": "field",
               "name": "footerWrapperIsLandmark",
@@ -38353,6 +40333,148 @@
               ],
               "description": "Mirror the slotted flyout's open, overlay, and anchor state onto\nhost attributes read by the grid CSS. State is recomputed from the\nslot so multiple flyouts and slot changes stay correct."
             },
+            {
+              "kind": "method",
+              "name": "previewHasContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getPreviewNavigationPair",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    header: PreviewCompactHeader;\n    menu: PreviewCompactMenu;\n  } | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setPreviewNavigationCollapse",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "requested",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "previewTokenIsConfigured",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setPreviewLayoutState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "visible",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "reclaiming",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "previewFitsWithinPage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "minMainWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "previewWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "syncPreviewLayout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "generation",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "schedulePreviewLayout",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onPreviewMediaChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onPreviewResize",
+              "type": {
+                "text": "ResizeObserverCallback"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setupPreviewLayoutObserver",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "footerElementProvidesLandmark",
@@ -38442,6 +40564,99 @@
               "attribute": "fixed-menus",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "previewOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the persistent preview is logically open. The page may keep the\npreview hidden while space is unavailable; `preview-visible` reflects its\nactual presentation and the preview restores automatically when room returns.",
+              "attribute": "preview-open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "previewLabel",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"Preview\"",
+              "description": "Accessible name for the preview's complementary landmark.",
+              "attribute": "preview-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "previewCollapseSidebar",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Allow a directly slotted, safely linked vertical menu/header pair to\ncollapse to its burger/drawer presentation when preview needs more room.",
+              "attribute": "preview-collapse-sidebar",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "previewVisible",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether preview content is currently rendered. Managed by the page's\nspace negotiation; consumers should treat this reflected property as read-only.",
+              "attribute": "preview-visible",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "previewReclaiming",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether preview is currently reserving width and allowing the main well\nto shrink toward `--esp-page-preview-min-main-width`. Managed by the page.",
+              "attribute": "preview-reclaiming",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "showPreview",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Request the persistent preview without moving focus."
+            },
+            {
+              "kind": "method",
+              "name": "closePreview",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Close the persistent preview without moving focus."
+            },
+            {
+              "kind": "method",
+              "name": "togglePreview",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Toggle the persistent preview without moving focus."
+            },
             {
               "kind": "method",
               "name": "AddDialog",
@@ -38996,6 +41211,51 @@
               "description": "Compatibility alias for the original fixed header/sidebar behavior.\nPrefer `header-position=\"fixed\"` for new code.",
               "fieldName": "fixedMenus"
             },
+            {
+              "name": "preview-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the persistent preview is logically open. The page may keep the\npreview hidden while space is unavailable; `preview-visible` reflects its\nactual presentation and the preview restores automatically when room returns.",
+              "fieldName": "previewOpen"
+            },
+            {
+              "name": "preview-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Preview\"",
+              "description": "Accessible name for the preview's complementary landmark.",
+              "fieldName": "previewLabel"
+            },
+            {
+              "name": "preview-collapse-sidebar",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allow a directly slotted, safely linked vertical menu/header pair to\ncollapse to its burger/drawer presentation when preview needs more room.",
+              "fieldName": "previewCollapseSidebar"
+            },
+            {
+              "name": "preview-visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether preview content is currently rendered. Managed by the page's\nspace negotiation; consumers should treat this reflected property as read-only.",
+              "fieldName": "previewVisible"
+            },
+            {
+              "name": "preview-reclaiming",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether preview is currently reserving width and allowing the main well\nto shrink toward `--esp-page-preview-min-main-width`. Managed by the page.",
+              "fieldName": "previewReclaiming"
+            },
             {
               "name": "scheme",
               "type": {
@@ -51135,7 +53395,7 @@
               "privacy": "public",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "number"
                 }
               },
               "parameters": [
@@ -52381,6 +54641,22 @@
             "module": "./flyout-events.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "HelpRequest",
+          "declaration": {
+            "name": "HelpRequest",
+            "module": "./help-events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HelpState",
+          "declaration": {
+            "name": "HelpState",
+            "module": "./help-events.js"
+          }
+        },
         {
           "kind": "js",
           "name": "PickerItem",
@@ -52469,7 +54745,7 @@
               "description": "Flyout configuration."
             }
           ],
-          "description": "Open the page's flyout surface. Publishes a `\"show-flyout\"`\nevent on `EspBus` which is picked up by `<esp-flyout>`.\n\n```ts\nimport { showFlyout } from \"@taprootio/espalier\";\n\nshowFlyout({ heading: \"Details\", content: detailsFragment });\n```\n\nIf no `<esp-flyout>` is connected, the event goes unserviced —\ncallers that need a fallback (e.g. opening a URL in a new tab)\nshould check for a connected flyout themselves."
+          "description": "Open the page's flyout surface. Publishes a `\"show-flyout\"`\nevent on `EspBus` which is picked up by `<esp-flyout>`.\n\n```ts\nimport { showFlyout } from \"@taprootio/espalier\";\n\nshowFlyout({ heading: \"Details\", content: detailsFragment });\n```\n\nAnchored requests target the outermost containing `esp-page` by\ndefault; a nested flyout with `scope=\"nearest\"` explicitly overrides\nthat routing. The nearest-scope flyout must be a light-DOM descendant\nof the page whose requests it owns. If no eligible `<esp-flyout>` is\nconnected, the event goes unserviced — callers that need a fallback\n(e.g. opening a URL in a new tab) should check for a connected flyout\nthemselves."
         },
         {
           "kind": "function",
@@ -53004,6 +55280,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/shared/help-events.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "requestHelp",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "config",
+              "type": {
+                "text": "HelpRequest"
+              },
+              "description": "Help document, topic, title, and optional placement/focus targets."
+            }
+          ],
+          "description": "Request help through the shared provider. Relative `src` values are\nresolved against the current document; a fragment becomes `anchor`\nunless the explicit property wins. When no provider is connected,\nthe resolved topic opens in a new tab.\n\n```ts\nimport { requestHelp } from \"@taprootio/espalier\";\n\nrequestHelp({\n  src: \"/help/account.html\",\n  anchor: \"display-name\",\n  title: \"Account help\",\n  placementTarget: document.querySelector<HTMLElement>(\"#display-name\") ?? undefined,\n  trigger: document.querySelector(\"#account-help\") ?? undefined,\n});\n```"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "requestHelp",
+          "declaration": {
+            "name": "requestHelp",
+            "module": "dist/shared/help-events.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/shared/image-texture-registry.js",