@taprootio/espalier 2.12.1 → 2.13.1

package/custom-elements.json

@@ -40061,7 +40061,7 @@
               "name": "--esp-page-main-min-width"
             },
             {
-              "description": "Maximum width of the main content well. Defaults from `kind`: `1536px` (wide), `768px` (narrow), or unbounded (full). Surplus width beyond it becomes canvas gutters.",
+              "description": "Maximum width of the main content well. Defaults from `kind`: `1536px` (wide), `768px` (narrow), or unbounded (full). An explicit value overrides every kind default, including `full`. Surplus width beyond it becomes canvas gutters.",
               "name": "--esp-page-main-max-width"
             },
             {
@@ -40116,6 +40116,10 @@
               "description": "Minimum preview width. Defaults to `22.5rem` (360px, a reasonable mobile-device surface).",
               "name": "--esp-page-preview-min-width"
             },
+            {
+              "description": "Initial automatic preview target, clamped between the preview minimum and maximum. When unset, the established preview-first flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target.",
+              "name": "--esp-page-preview-default-width"
+            },
             {
               "description": "Maximum preview width. Defaults to `48rem`. Preview receives flexible trailing space before help grows.",
               "name": "--esp-page-preview-max-width"
@@ -40124,6 +40128,10 @@
               "description": "Minimum in-grid help width. Defaults to `20rem`.",
               "name": "--esp-page-flyout-min-width"
             },
+            {
+              "description": "Initial automatic in-grid help target, clamped between the help minimum and maximum. When unset, the established flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target.",
+              "name": "--esp-page-flyout-default-width"
+            },
             {
               "description": "Maximum help width and overlay drawer cap before the `85vw` viewport cap. Defaults to `30rem`.",
               "name": "--esp-page-flyout-max-width"
@@ -40277,11 +40285,11 @@
               "name": "right"
             },
             {
-              "description": "Persistent preview content placed after the main surface and before help. It grows from `--esp-page-preview-min-width` to `--esp-page-preview-max-width`, starts at viewport top, and gives its content an independent `100dvh` vertical scroller. At either scroll boundary, wheel and trackpad motion chains back to the main document. Unlike flyout content, preview content is never replaced by the flyout request bus.",
+              "description": "Persistent preview content placed after the main surface and before help. It grows from `--esp-page-preview-min-width` to `--esp-page-preview-max-width`, starting at `--esp-page-preview-default-width` when that token is set. It starts at viewport top and gives its content an independent `100dvh` vertical scroller. At either scroll boundary, wheel and trackpad motion chains back to the main document. 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 after preview. Closed it costs no width; open it grows from `--esp-page-flyout-min-width` to `--esp-page-flyout-max-width` after preview receives flexible space, 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. When a preview is visible, its caret and non-interactive dotted bridge cross the preview back to the anchor, ending at a short thick marker on the preview/help seam.",
+              "description": "A transient `esp-flyout` panel that lives on the canvas after preview. Closed it costs no width; open it grows from `--esp-page-flyout-min-width` to `--esp-page-flyout-max-width`, starting at `--esp-page-flyout-default-width` when that token is set. It receives remaining flexible space after preview when no default is set, 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. When a preview is visible, its caret and non-interactive dotted bridge cross the preview back to the anchor, ending at a short thick marker on the preview/help seam.",
               "name": "flyout"
             },
             {
@@ -40324,6 +40332,11 @@
               "name": "previewMinWidthProbe",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "previewDefaultWidthProbe",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "previewMaxWidthProbe",
@@ -40334,6 +40347,11 @@
               "name": "flyoutMinWidthProbe",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "flyoutDefaultWidthProbe",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "flyoutMaxWidthProbe",
@@ -40344,6 +40362,11 @@
               "name": "mainMinWidthProbe",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "mainConfiguredMaxWidthProbe",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "mainMaxWidthProbe",
@@ -40791,7 +40814,7 @@
                   }
                 },
                 {
-                  "name": "enforcePreference",
+                  "name": "enforceTarget",
                   "default": "false"
                 }
               ]
@@ -40828,100 +40851,97 @@
             },
             {
               "kind": "method",
-              "name": "workspaceUsesPreference",
+              "name": "visiblePageInlineBounds",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": "{ left: number; right: number; width: number }"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "probeWidth",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "previewRequested",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "flyoutOpen",
+                  "name": "probe",
                   "type": {
-                    "text": "boolean"
+                    "text": "ReturnType<typeof createRef<HTMLDivElement>>"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "preferredWorkspaceWidth",
+              "name": "optionalWidth",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "number"
+                  "text": "number | null"
                 }
               },
               "parameters": [
                 {
-                  "name": "previewRequested",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "flyoutOpen",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "previewMinWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "previewMaxWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "flyoutMinWidth",
+                  "name": "propertyName",
                   "type": {
-                    "text": "number"
+                    "text": "string"
                   }
                 },
                 {
-                  "name": "flyoutMaxWidth",
+                  "name": "probe",
                   "type": {
-                    "text": "number"
+                    "text": "ReturnType<typeof createRef<HTMLDivElement>>"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "visiblePageInlineBounds",
+              "name": "syncMainMaximumConfiguration",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "{ left: number; right: number; width: number }"
+                  "text": "void"
                 }
               }
             },
             {
               "kind": "method",
-              "name": "visibleSpaceWidth",
+              "name": "workspaceWidthCapacity",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "number"
+                  "text": "WorkspaceWidthCapacity"
                 }
               },
-              "description": "The gutter's layout box can extend past the visible page bounds — most\ncommonly a page laid out wider than the visual viewport beside a classic\nscrollbar. Allocation must draw from the same visible geometry the fit\nchecks validate against, or a scrollbar-sized overhang makes the\nallocated widths permanently unfittable and help is promoted to a modal\ndrawer over a sliver of hidden canvas."
+              "parameters": [
+                {
+                  "name": "minMainWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "maxMainWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "reservedInlineWidth",
+                  "default": "0"
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "probeWidth",
+              "name": "workspaceTargetWidth",
               "privacy": "private",
               "return": {
                 "type": {
@@ -40930,9 +40950,21 @@
               },
               "parameters": [
                 {
-                  "name": "probe",
+                  "name": "capacity",
                   "type": {
-                    "text": "ReturnType<typeof createRef<HTMLDivElement>>"
+                    "text": "WorkspaceWidthCapacity"
+                  }
+                },
+                {
+                  "name": "minimumWorkspaceWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "preferredWorkspaceTargetWidth",
+                  "type": {
+                    "text": "number"
                   }
                 }
               ]
@@ -40988,6 +41020,20 @@
                   "type": {
                     "text": "number"
                   }
+                },
+                {
+                  "name": "previewDefaultWidth",
+                  "default": "null",
+                  "type": {
+                    "text": "number | null"
+                  }
+                },
+                {
+                  "name": "flyoutDefaultWidth",
+                  "default": "null",
+                  "type": {
+                    "text": "number | null"
+                  }
                 }
               ]
             },
@@ -41337,36 +41383,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "preferredWorkspaceFitsWithNavigation",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "minMainWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "requestedWorkspaceWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "collapsedSidebarWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "workspaceGeometrySample",
@@ -41589,7 +41605,7 @@
               },
               "privacy": "public",
               "default": "\"wide\"",
-              "description": "The layout mode of the page.\n\n- `wide` (default) — constrains the main content well to 1536px.\n  Optimized for high-density dashboards and complex data grids.\n- `narrow` — constrains the main content well to 768px and applies\n  a `max-inline-size: 66ch` reading measure. Optimized for\n  long-form reading content.\n- `full` — no max-width constraint; the content well spans the\n  full available space. Optimized for immersive canvases like\n  maps or design tools.",
+              "description": "The layout mode of the page.\n\n- `wide` (default) — constrains the main content well to 1536px.\n  Optimized for high-density dashboards and complex data grids.\n- `narrow` — constrains the main content well to 768px and applies\n  a `max-inline-size: 66ch` reading measure. Optimized for\n  long-form reading content.\n- `full` — no max-width constraint unless\n  `--esp-page-main-max-width` is explicitly configured. Optimized for\n  immersive canvases like maps or design tools and finite authoring\n  workspaces that opt back into a cap.",
               "attribute": "kind",
               "reflects": true
             },
@@ -41601,7 +41617,7 @@
               },
               "privacy": "public",
               "default": "\"start\"",
-              "description": "Horizontal alignment of the content **surface** (left aside + main\nwell + right aside) within the page once the viewport is wider than\nthe content cap. The surplus width becomes styleable **canvas**\ngutters on the outer edges, weighted by this attribute.\n\n- `start` (default) — the surface hugs the leading edge; all spare\n  width collects in the trailing gutter. This reproduces today's\n  layout.\n- `center` — spare width is split evenly into both gutters, centering\n  the surface.\n- `end` — the surface hugs the trailing edge; spare width collects in\n  the leading gutter.\n\nHas no effect when `kind=\"full\"` (no cap means no gutters) or on\nviewports narrower than the cap (the surface already fills the width).",
+              "description": "Horizontal alignment of the content **surface** (left aside + main\nwell + right aside) within the page once the viewport is wider than\nthe content cap. The surplus width becomes styleable **canvas**\ngutters on the outer edges, weighted by this attribute.\n\n- `start` (default) — the surface hugs the leading edge; all spare\n  width collects in the trailing gutter. This reproduces today's\n  layout.\n- `center` — spare width is split evenly into both gutters, centering\n  the surface.\n- `end` — the surface hugs the trailing edge; spare width collects in\n  the leading gutter.\n\nHas no effect when an unconfigured `kind=\"full\"` leaves main unbounded,\nor on viewports narrower than the complete visible workspace cap.",
               "attribute": "align",
               "reflects": true
             },
@@ -42280,7 +42296,7 @@
                 "text": "\"wide\" | \"narrow\" | \"full\""
               },
               "default": "\"wide\"",
-              "description": "The layout mode of the page.\n\n- `wide` (default) — constrains the main content well to 1536px.\n  Optimized for high-density dashboards and complex data grids.\n- `narrow` — constrains the main content well to 768px and applies\n  a `max-inline-size: 66ch` reading measure. Optimized for\n  long-form reading content.\n- `full` — no max-width constraint; the content well spans the\n  full available space. Optimized for immersive canvases like\n  maps or design tools.",
+              "description": "The layout mode of the page.\n\n- `wide` (default) — constrains the main content well to 1536px.\n  Optimized for high-density dashboards and complex data grids.\n- `narrow` — constrains the main content well to 768px and applies\n  a `max-inline-size: 66ch` reading measure. Optimized for\n  long-form reading content.\n- `full` — no max-width constraint unless\n  `--esp-page-main-max-width` is explicitly configured. Optimized for\n  immersive canvases like maps or design tools and finite authoring\n  workspaces that opt back into a cap.",
               "fieldName": "kind"
             },
             {
@@ -42289,7 +42305,7 @@
                 "text": "\"start\" | \"center\" | \"end\""
               },
               "default": "\"start\"",
-              "description": "Horizontal alignment of the content **surface** (left aside + main\nwell + right aside) within the page once the viewport is wider than\nthe content cap. The surplus width becomes styleable **canvas**\ngutters on the outer edges, weighted by this attribute.\n\n- `start` (default) — the surface hugs the leading edge; all spare\n  width collects in the trailing gutter. This reproduces today's\n  layout.\n- `center` — spare width is split evenly into both gutters, centering\n  the surface.\n- `end` — the surface hugs the trailing edge; spare width collects in\n  the leading gutter.\n\nHas no effect when `kind=\"full\"` (no cap means no gutters) or on\nviewports narrower than the cap (the surface already fills the width).",
+              "description": "Horizontal alignment of the content **surface** (left aside + main\nwell + right aside) within the page once the viewport is wider than\nthe content cap. The surplus width becomes styleable **canvas**\ngutters on the outer edges, weighted by this attribute.\n\n- `start` (default) — the surface hugs the leading edge; all spare\n  width collects in the trailing gutter. This reproduces today's\n  layout.\n- `center` — spare width is split evenly into both gutters, centering\n  the surface.\n- `end` — the surface hugs the trailing edge; spare width collects in\n  the leading gutter.\n\nHas no effect when an unconfigured `kind=\"full\"` leaves main unbounded,\nor on viewports narrower than the complete visible workspace cap.",
               "fieldName": "align"
             },
             {
@@ -52229,132 +52245,136 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/root/esp-root.js",
+      "path": "dist/search/esp-search.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Root container for the Espalier design system.\n\nProvides the full design-token pipeline — colors, scales, and\nfonts — to every descendant component.  All tokens are\nJS-computed from a pair of Base64-encoded theme objects and\nemitted as CSS custom properties on the host element.\n\n### Theme API\n\nSupply a `light-theme` and/or `dark-theme` attribute containing\na **Base64-encoded JSON** partial theme.  Fields you omit fall\nback to built-in defaults.  Switch between them with `scheme`.\n\n```html\n<esp-root\n  light-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4yIDE1NSkifQ==\"\n  scheme=\"light\">\n  <esp-box>\n    <h2>Themed content</h2>\n  </esp-box>\n</esp-root>\n```\n\n### Nested theme previews and scoped events\n\nA nested root creates a scoped theme for its descendants. It does not create\na separate event bus: every root publishes theme changes through the same\nEspalier singleton. Subscribe through the root whose changes you own so a\nnested preview cannot be mistaken for an application-level theme change.\n\n```ts\nconst applicationRoot = document.querySelector<EspalierRoot>(\"#application-theme\")!;\n\nconst unsubscribe = applicationRoot.subscribeScoped(\"scheme-changed\", ({ scheme }) => {\n  localStorage.setItem(\"scheme\", scheme);\n});\n\n// Initial state is read directly; scoped events report later changes only.\nrenderScheme(applicationRoot.scheme);\n\n// Call when the owning integration is disposed.\nunsubscribe();\n```\n\nThis contract covers `scheme-changed`, `seed-color-changed`,\n`theme-changed`, and `icon-sprite-url-changed`. Components derived from\n`EspalierElementBase` use the same closest-root filter internally.\n\nThe root also owns the application's banner-texture vocabulary:\n`EspalierRoot.registerTexture(name, definition)` registers an\nimage-backed texture preset that any\n[esp-image](/components/image) banner in the application selects with\n`texture=\"<name>\"`, and `EspalierRoot.registeredTextures()` enumerates\nthe presets for building texture pickers.",
-          "name": "EspalierRoot",
-          "slots": [
+          "description": "Modal search overlay with a Cmd+K / Ctrl+K interaction pattern.\n\n`<esp-search>` is a pure UI shell with no search-engine dependency.\nConsumers wire it to any search backend (Pagefind, MiniSearch, API,\netc.) by listening for `search-requested` events and calling\n`setResults()` with the matches.",
+          "name": "EspalierSearch",
+          "cssProperties": [
             {
-              "description": "Place Espalier components and content here.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "Maximum width of the search panel. Defaults to `40rem`.",
+              "name": "--esp-search-max-width"
+            },
             {
-              "kind": "method",
-              "name": "registerTexture",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "definition",
-                  "type": {
-                    "text": "ImageTextureDefinition"
-                  }
-                }
-              ],
-              "description": "Register (or replace) a named, image-backed banner-texture preset.\nAny `esp-image` banner under a root selects it with `texture=\"<name>\"`;\nbanners already pointing at the name re-render, so registration at\nmount and markup order never race. Static delegate to\n`registerImageTexture` so script-only contexts (docs demos, published\nsites) can reach it from the root element without module imports."
+              "description": "Maximum height of the results list. Defaults to `60vh`.",
+              "name": "--esp-search-max-height"
             },
             {
-              "kind": "method",
-              "name": "registeredTextures",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "Map<string, Readonly<ImageTextureDefinition>>"
-                }
-              },
-              "description": "Snapshot of the registered texture presets, for building pickers."
+              "description": "Backdrop color behind the panel. Defaults to `oklch(0.15 0 0 / 0.6)`.",
+              "name": "--esp-search-backdrop"
             },
             {
-              "kind": "field",
-              "name": "schemeBacker",
-              "type": {
-                "text": "\"light\" | \"dark\" | \"\""
-              },
-              "privacy": "private",
-              "default": "\"\""
+              "description": "Background color of the search panel. Defaults to `var(--esp-color-layer-1)`.",
+              "name": "--esp-search-panel-background"
             },
             {
-              "kind": "field",
-              "name": "schemeExplicitlySet",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "description": "Box shadow of the search panel.",
+              "name": "--esp-search-panel-shadow"
             },
             {
-              "kind": "field",
-              "name": "resolvingDefaultScheme",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "description": "Divider and loading-track color used by the search panel. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-search-border-color"
             },
             {
-              "kind": "field",
-              "name": "themeEventsReady",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "description": "Main text color used by the search UI. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-search-text-color"
             },
             {
-              "kind": "field",
-              "name": "systemSchemeQuery",
-              "type": {
-                "text": "MediaQueryList | null"
-              },
-              "privacy": "private",
-              "default": "null"
+              "description": "Muted text color for placeholders, excerpts, and empty states.",
+              "name": "--esp-search-muted-color"
             },
             {
-              "kind": "field",
-              "name": "lastSeedColor",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "private",
-              "default": "\"\""
+              "description": "Title color for result rows. Defaults to `var(--esp-color-headings)`.",
+              "name": "--esp-search-title-color"
             },
             {
-              "kind": "field",
-              "name": "resolvedLightTheme",
-              "type": {
-                "text": "EspalierTheme"
-              },
-              "privacy": "private",
-              "default": "{ ...DEFAULT_LIGHT_THEME }"
+              "description": "Background color of the active result row. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-search-active-background"
+            },
+            {
+              "description": "Background color applied to `<mark>` highlights inside excerpts.",
+              "name": "--esp-search-highlight-background"
+            },
+            {
+              "description": "Accent color of the loading spinner. Defaults to `var(--esp-color-primary)`.",
+              "name": "--esp-search-loading-indicator-color"
+            },
+            {
+              "description": "Track color of the loading spinner. Defaults to `var(--esp-search-border-color)`.",
+              "name": "--esp-search-loading-indicator-track-color"
+            },
+            {
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
+            {
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "resolvedDarkTheme",
+              "name": "placeholder",
               "type": {
-                "text": "EspalierTheme"
+                "text": "string"
               },
-              "privacy": "private",
-              "default": "{ ...DEFAULT_DARK_THEME }"
+              "default": "\"Search\\u2026\"",
+              "description": "Placeholder text for the search input.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "documentClickRegistrationActive",
+              "name": "isOpen",
               "type": {
                 "text": "boolean"
               },
@@ -52363,178 +52383,114 @@
             },
             {
               "kind": "field",
-              "name": "connectedRootCount",
+              "name": "results",
               "type": {
-                "text": "number"
+                "text": "SearchResult[]"
               },
               "privacy": "private",
-              "static": true,
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "handleDocumentClick",
-              "privacy": "private",
-              "static": true,
-              "readonly": true
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "correlationId",
-              "privacy": "public",
-              "description": "Unique ID for correlating bus events across multiple roots."
-            },
-            {
-              "kind": "method",
-              "name": "subscribeScoped",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "() => void"
-                }
+              "name": "loading",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "K"
-                  },
-                  "description": "Root-scoped theme event to observe."
-                },
-                {
-                  "name": "handler",
-                  "type": {
-                    "text": "(payload: SchemeEvents[K]) => void"
-                  },
-                  "description": "Callback invoked with that event's typed payload."
-                }
-              ],
-              "description": "Subscribe to a theme event published by this root only.\n\nAll roots share Espalier's global bus. This method filters foreign and\nnested-root payloads by `correlationId` and returns a cleanup function.\nIt reports changes after mount; read initial state from this root."
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "lightThemeAttr",
+              "name": "query",
               "type": {
                 "text": "string"
               },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Base64-encoded JSON partial theme for the **light** scheme.\n\nOnly fields you wish to override need to be present — all\nothers inherit from the built-in light defaults.\n\n```html\n<esp-root\n  light-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"light\">\n  <esp-box><h2>Purple light theme</h2></esp-box>\n</esp-root>\n```",
-              "attribute": "light-theme"
+              "privacy": "private",
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "darkThemeAttr",
+              "name": "activeIndex",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Base64-encoded JSON partial theme for the **dark** scheme.\n\n```html\n<esp-root\n  dark-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"dark\">\n  <esp-box><h2>Purple dark theme</h2></esp-box>\n</esp-root>\n```",
-              "attribute": "dark-theme"
+              "privacy": "private",
+              "default": "-1"
             },
             {
               "kind": "field",
-              "name": "fontCSSRoot",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"/css/fonts/\"",
-              "description": "Root path for locally-cached font CSS files used by\n`<esp-font-picker>` to load font previews.\n\nThe directory must contain the individual font CSS files\ngenerated by `npm run build-fonts`.  These files must be\nserved at stable, predictable paths (no filename hashing)\nbecause the picker constructs URLs by font family name.",
-              "attribute": "font-css-root"
+              "name": "vellumRef",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "fontDefinitionsUrl",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "Full URL to the `font-definitions.json` catalog used by\n`<esp-font-picker>`.\n\nWhen set, the picker fetches from this URL instead of\n`{fontCSSRoot}font-definitions.json`.  This allows the JSON\nto be served through a cache-busting asset pipeline while\nthe individual font CSS files remain at stable paths.",
-              "attribute": "font-definitions-url"
+              "name": "inputRef",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "googleFontLoading",
-              "type": {
-                "text": "\"auto\" | \"none\""
-              },
-              "privacy": "public",
-              "default": "\"auto\"",
-              "description": "Controls whether Espalier may inject runtime Google Fonts CDN\nstylesheet links for selected Google Fonts.\n\n`auto` preserves the default behavior: theme font families and\nselected Google font-picker values may load full fonts from\n`fonts.googleapis.com`.  `none` prevents those runtime Google\nFonts links, leaving local preview CSS and web-safe font stacks\navailable for locked-down, offline, or strict-CSP environments.",
-              "attribute": "google-font-loading"
+              "name": "resultsRef",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "iconSpriteUrl",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"/assets/icons.svg\"",
-              "description": "Full URL to the SVG sprite used by component-owned `icon`\nattributes.\n\nComponents append the validated icon name as a fragment, so\nthis should point to the sprite file itself, without `#icon`.\nUse this when your application serves the sprite from a\nsubpath, CDN, or cache-busted asset pipeline. Set it to an\nempty string to disable generated sprite icon URLs for this root.\n\n```html\n<esp-root icon-sprite-url=\"/dist/icons.abc123.svg\">\n  <esp-button icon=\"save\" label=\"Save\"></esp-button>\n</esp-root>\n```",
-              "attribute": "icon-sprite-url"
+              "name": "idPrefix",
+              "privacy": "private",
+              "readonly": true,
+              "default": "`esp-search-${this.correlationId}`",
+              "description": "Per-instance ID prefix for ARIA id attributes (listbox + options)."
             },
             {
               "kind": "field",
-              "name": "defaultScheme",
-              "type": {
-                "text": "\"light\" | \"dark\" | \"system\""
-              },
-              "privacy": "public",
-              "default": "\"light\"",
-              "description": "Initial color scheme to apply when `scheme` is not set.\n\nUse `light` or `dark` for a fixed published-site default, or\n`system` to follow the visitor's `prefers-color-scheme` before\nthey toggle the active `scheme`.",
-              "attribute": "default-scheme",
-              "reflects": true
+              "name": "_overlay",
+              "privacy": "private",
+              "default": "new OverlayController({ host: this, getFocusTrapContainer: () => this.vellumRef.value ?? null, getFocusFallback: () => this.inputRef.value ?? null, })"
             },
             {
-              "kind": "field",
-              "name": "scheme",
-              "type": {
-                "text": "\"dark\" | \"light\""
-              },
+              "kind": "method",
+              "name": "show",
               "privacy": "public",
-              "description": "The active color scheme.\n\nLight scheme\n\n```html\n<esp-root scheme=\"light\">\n  <esp-box>\n    <h2>Light Scheme</h2>\n    <esp-button label=\"I am light\"></esp-button>\n  </esp-box>\n</esp-root>\n```\n\nDark scheme\n\n```html\n<esp-root scheme=\"dark\">\n  <esp-box>\n    <h2>Dark Scheme</h2>\n    <esp-button label=\"I am dark\"></esp-button>\n  </esp-box>\n</esp-root>\n```",
-              "default": "\"light\"",
-              "attribute": "scheme",
-              "reflects": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Open the search overlay and focus the input."
             },
             {
-              "kind": "field",
-              "name": "seedColor",
-              "type": {
-                "text": "string"
-              },
+              "kind": "method",
+              "name": "hide",
               "privacy": "public",
-              "description": "The effective seed color from the active theme.\n\nRead-only — supply a theme attribute with a different\n`seedColor` value to change.",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Close the search overlay and restore focus."
             },
             {
               "kind": "method",
-              "name": "extractFamily",
-              "privacy": "private",
-              "static": true,
+              "name": "setResults",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": "string"
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "cssValue",
+                  "name": "results",
                   "type": {
-                    "text": "string"
+                    "text": "SearchResult[]"
                   }
                 }
               ],
-              "description": "Extract the bare font family name from a CSS `font-family`\nvalue like `\"Roboto\", sans-serif` → `Roboto`."
+              "description": "Update the displayed search results."
             },
             {
               "kind": "method",
-              "name": "injectGoogleFontLink",
-              "privacy": "private",
+              "name": "setLoading",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
@@ -52542,88 +52498,89 @@
               },
               "parameters": [
                 {
-                  "name": "slot",
-                  "type": {
-                    "text": "\"body\" | \"headings\" | \"brand\" | \"monospace\""
-                  }
-                },
-                {
-                  "name": "family",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "weight",
-                  "optional": true,
+                  "name": "loading",
                   "type": {
-                    "text": "string"
+                    "text": "boolean"
                   }
                 }
               ],
-              "description": "Inject (or replace) a Google Fonts `<link>` for a given slot.\n\nEach slot (`body`, `headings`, `brand`, `monospace`) gets at most one\n`<link>` scoped to this root instance by its correlationId,\nidentified by `data-esp-font=\"<correlationId>-<slot>\"`.\nThis ensures multiple `<esp-root>` instances on the same page\ndo not overwrite each other's font links."
+              "description": "Show or hide the loading indicator."
             },
             {
               "kind": "method",
-              "name": "syncGoogleFontLinks",
+              "name": "handleInput",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Ensure Google Font `<link>` tags match the active theme's\nfont families.  Called from `willUpdate()` after theme\nresolution."
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "removeRuntimeGoogleFontLinks",
+              "name": "selectResult",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "activeTheme",
-              "type": {
-                "text": "EspalierTheme"
               },
-              "privacy": "public",
-              "description": "Returns the resolved theme for the active scheme.",
-              "readonly": true
+              "parameters": [
+                {
+                  "name": "result",
+                  "type": {
+                    "text": "SearchResult"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "resolveThemes",
+              "name": "handleKeyDown",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Re-merge default → theme-attribute for both schemes.\nCalled in `willUpdate()` whenever any input property changes."
-            },
-            {
-              "kind": "field",
-              "name": "resizeObserver",
-              "privacy": "private",
-              "default": "new ResizeObserver(() => { getEspBus().publish(\"window-resized\", { emWidth: window.innerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize), emHeight: window.innerHeight / parseFloat(getComputedStyle(document.documentElement).fontSize), pxWidth: window.innerWidth, pxHeight: window.innerHeight, }); })"
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "registerDocumentClickBridge",
+              "name": "handleBackdropClick",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "unregisterDocumentClickBridge",
+              "name": "scrollActiveIntoView",
               "privacy": "private",
               "return": {
                 "type": {
@@ -52632,479 +52589,500 @@
               }
             },
             {
-              "kind": "method",
-              "name": "applyDefaultScheme",
+              "kind": "field",
+              "name": "hasListbox",
+              "type": {
+                "text": "boolean"
+              },
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "Whether the listbox is currently rendered in the DOM.",
+              "readonly": true
             },
             {
-              "kind": "method",
-              "name": "resolveDefaultScheme",
+              "kind": "field",
+              "name": "listboxId",
+              "type": {
+                "text": "string"
+              },
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "\"light\" | \"dark\""
-                }
-              }
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "syncSystemSchemeListener",
+              "name": "optionId",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "string"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "handleSystemSchemeChange",
+              "kind": "method",
+              "name": "renderResults",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "lightDomStyles",
-              "static": true,
-              "default": "` /* ── Base typography ──────────────────────────────────── */ esp-root { font-family: var(--esp-font-body); font-weight: var(--esp-font-weight-body); line-height: 1.5; font-size: var(--esp-type-normal); color: var(--esp-color-text); } /* ── Lists ────────────────────────────────────────────── */ esp-root ul[role=\"list\"], esp-root ol[role=\"list\"] { list-style: none; } esp-root ul li::marker, esp-root ol li::marker { font-weight: bold; } /* ── Form controls ────────────────────────────────────── */ esp-root input, esp-root select, esp-root button { font-family: var(--esp-font-body); } /* ── Links ────────────────────────────────────────────── */ esp-root a:not([class]) { text-decoration-skip-ink: auto; font-weight: bold; color: var(--esp-color-link); } esp-root a { text-decoration: underline; text-decoration-skip-ink: auto; color: var(--esp-color-link); } esp-root a:hover { background-color: var(--esp-color-link-hover-bg); color: var(--esp-color-link-hover); text-decoration: none; } /* ── Inherited text styles ────────────────────────────── */ esp-root input, esp-root button, esp-root textarea, esp-root select, esp-root p, esp-root ul, esp-root li { font-family: var(--esp-font-body); color: var(--esp-color-text); font-size: inherit; } esp-root textarea:not([rows]) { min-height: 10em; } /* ── Headings ─────────────────────────────────────────── */ esp-root h1, esp-root h2, esp-root h3, esp-root h4, esp-root h5 { font-family: var(--esp-font-headings); font-weight: var(--esp-font-weight-headings); color: var(--esp-color-headings); margin: var(--esp-size-small-to-normal) 0 var(--esp-size-tiny-to-small); } esp-root h5 { font-size: var(--esp-type-small); line-height: 1.4; } esp-root h4 { font-size: var(--esp-type-medium); line-height: 1.3; } esp-root h3 { font-size: var(--esp-type-big); line-height: 1.2; } esp-root h2 { font-size: var(--esp-type-large); line-height: 1.15; } esp-root h1 { font-size: var(--esp-type-huge); line-height: 1.1; } /* ── Code / Pre ───────────────────────────────────────── */ esp-root pre, esp-root code { font-family: var(--esp-font-monospace); font-weight: var(--esp-font-weight-monospace); } esp-root code { font-size: var(--esp-type-small); background: var(--esp-color-layer-1); border-radius: var(--esp-size-border-radius); padding: 0 0.35em; display: inline-block; border: 1px dotted var(--esp-color-border); } esp-root pre { background-color: var(--esp-color-layer-1); border-radius: var(--esp-size-border-radius); border: 1px dotted var(--esp-color-border); } esp-root pre > code { font-size: var(--esp-type-tiny); display: block; background: none; border: none; hyphens: none; tab-size: 2; white-space: pre; padding: var(--esp-size-padding); overflow: auto; line-height: 1.8; } /* ── Images ────────────────────────────────────────────── */ esp-root img, esp-root picture { max-width: 100%; display: block; } `",
-              "description": "Light-DOM styles injected into `document.head` so that\nslotted content (headings, links, code blocks, lists, etc.)\ninherits the design-system tokens defined on `:host`.\nSelectors are scoped to `esp-root` descendants to avoid\nleaking into content outside the root."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "light-theme",
+              "name": "seedColorBacker",
               "type": {
                 "text": "string"
               },
-              "default": "\"\"",
-              "description": "Base64-encoded JSON partial theme for the **light** scheme.\n\nOnly fields you wish to override need to be present — all\nothers inherit from the built-in light defaults.\n\n```html\n<esp-root\n  light-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"light\">\n  <esp-box><h2>Purple light theme</h2></esp-box>\n</esp-root>\n```",
-              "fieldName": "lightThemeAttr"
+              "privacy": "private",
+              "default": "\"oklch(0.7 0.125 216)\"",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "name": "dark-theme",
+              "kind": "field",
+              "name": "espRoot",
               "type": {
-                "text": "string"
+                "text": "EspalierRoot | null"
               },
-              "default": "\"\"",
-              "description": "Base64-encoded JSON partial theme for the **dark** scheme.\n\n```html\n<esp-root\n  dark-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"dark\">\n  <esp-box><h2>Purple dark theme</h2></esp-box>\n</esp-root>\n```",
-              "fieldName": "darkThemeAttr"
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "name": "font-css-root",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"/css/fonts/\"",
-              "description": "Root path for locally-cached font CSS files used by\n`<esp-font-picker>` to load font previews.\n\nThe directory must contain the individual font CSS files\ngenerated by `npm run build-fonts`.  These files must be\nserved at stable, predictable paths (no filename hashing)\nbecause the picker constructs URLs by font family name.",
-              "fieldName": "fontCSSRoot"
+              "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"
+              }
             },
             {
-              "name": "font-definitions-url",
+              "kind": "field",
+              "name": "rootEventSubscriptionsActive",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\"",
-              "description": "Full URL to the `font-definitions.json` catalog used by\n`<esp-font-picker>`.\n\nWhen set, the picker fetches from this URL instead of\n`{fontCSSRoot}font-definitions.json`.  This allows the JSON\nto be served through a cache-busting asset pipeline while\nthe individual font CSS files remain at stable paths.",
-              "fieldName": "fontDefinitionsUrl"
+              "privacy": "private",
+              "default": "false",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "name": "google-font-loading",
+              "kind": "field",
+              "name": "subscribedRoot",
               "type": {
-                "text": "\"auto\" | \"none\""
+                "text": "EspalierRoot | null"
               },
-              "default": "\"auto\"",
-              "description": "Controls whether Espalier may inject runtime Google Fonts CDN\nstylesheet links for selected Google Fonts.\n\n`auto` preserves the default behavior: theme font families and\nselected Google font-picker values may load full fonts from\n`fonts.googleapis.com`.  `none` prevents those runtime Google\nFonts links, leaving local preview CSS and web-safe font stacks\navailable for locked-down, offline, or strict-CSP environments.",
-              "fieldName": "googleFontLoading"
+              "privacy": "private",
+              "default": "null",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "name": "icon-sprite-url",
+              "kind": "field",
+              "name": "rootEventUnsubscribers",
               "type": {
-                "text": "string"
+                "text": "Array<() => void>"
               },
-              "default": "\"/assets/icons.svg\"",
-              "description": "Full URL to the SVG sprite used by component-owned `icon`\nattributes.\n\nComponents append the validated icon name as a fragment, so\nthis should point to the sprite file itself, without `#icon`.\nUse this when your application serves the sprite from a\nsubpath, CDN, or cache-busted asset pipeline. Set it to an\nempty string to disable generated sprite icon URLs for this root.\n\n```html\n<esp-root icon-sprite-url=\"/dist/icons.abc123.svg\">\n  <esp-button icon=\"save\" label=\"Save\"></esp-button>\n</esp-root>\n```",
-              "fieldName": "iconSpriteUrl"
+              "privacy": "private",
+              "default": "[]",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "name": "default-scheme",
+              "kind": "field",
+              "name": "variantBacker",
               "type": {
-                "text": "\"light\" | \"dark\" | \"system\""
+                "text": "EspalierVariant"
               },
-              "default": "\"light\"",
-              "description": "Initial color scheme to apply when `scheme` is not set.\n\nUse `light` or `dark` for a fixed published-site default, or\n`system` to follow the visitor's `prefers-color-scheme` before\nthey toggle the active `scheme`.",
-              "fieldName": "defaultScheme"
+              "privacy": "protected",
+              "default": "\"primary\"",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "name": "scheme",
+              "kind": "field",
+              "name": "seedColor",
               "type": {
-                "text": "\"dark\" | \"light\""
+                "text": "string"
               },
-              "description": "The active color scheme.\n\nLight scheme\n\n```html\n<esp-root scheme=\"light\">\n  <esp-box>\n    <h2>Light Scheme</h2>\n    <esp-button label=\"I am light\"></esp-button>\n  </esp-box>\n</esp-root>\n```\n\nDark scheme\n\n```html\n<esp-root scheme=\"dark\">\n  <esp-box>\n    <h2>Dark Scheme</h2>\n    <esp-button label=\"I am dark\"></esp-button>\n  </esp-box>\n</esp-root>\n```",
-              "default": "\"light\"",
-              "fieldName": "scheme"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "esp-root",
-          "customElement": true,
-          "docPageTitle": {
-            "name": "Root",
-            "description": ""
-          },
-          "docUrl": {
-            "name": "/components/root",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Structure",
-            "description": ""
-          },
-          "menuOrder": {
-            "name": "1",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Root",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "building",
-            "description": ""
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerImageTexture",
-          "declaration": {
-            "name": "registerImageTexture",
-            "module": "../shared/image-texture-registry.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registeredImageTextures",
-          "declaration": {
-            "name": "registeredImageTextures",
-            "module": "../shared/image-texture-registry.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BUILT_IN_IMAGE_TEXTURES",
-          "declaration": {
-            "name": "BUILT_IN_IMAGE_TEXTURES",
-            "module": "../shared/image-texture-registry.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ImageTextureDefinition",
-          "declaration": {
-            "name": "ImageTextureDefinition",
-            "module": "../shared/image-texture-registry.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SchemeEvents",
-          "declaration": {
-            "name": "SchemeEvents",
-            "module": "../shared/bus-events.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "EspalierRoot",
-          "declaration": {
-            "name": "EspalierRoot",
-            "module": "dist/root/esp-root.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "esp-root",
-          "declaration": {
-            "name": "EspalierRoot",
-            "module": "dist/root/esp-root.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/search/esp-search.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Modal search overlay with a Cmd+K / Ctrl+K interaction pattern.\n\n`<esp-search>` is a pure UI shell with no search-engine dependency.\nConsumers wire it to any search backend (Pagefind, MiniSearch, API,\netc.) by listening for `search-requested` events and calling\n`setResults()` with the matches.",
-          "name": "EspalierSearch",
-          "cssProperties": [
-            {
-              "description": "Maximum width of the search panel. Defaults to `40rem`.",
-              "name": "--esp-search-max-width"
-            },
-            {
-              "description": "Maximum height of the results list. Defaults to `60vh`.",
-              "name": "--esp-search-max-height"
-            },
-            {
-              "description": "Backdrop color behind the panel. Defaults to `oklch(0.15 0 0 / 0.6)`.",
-              "name": "--esp-search-backdrop"
-            },
-            {
-              "description": "Background color of the search panel. Defaults to `var(--esp-color-layer-1)`.",
-              "name": "--esp-search-panel-background"
-            },
-            {
-              "description": "Box shadow of the search panel.",
-              "name": "--esp-search-panel-shadow"
-            },
-            {
-              "description": "Divider and loading-track color used by the search panel. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-search-border-color"
-            },
-            {
-              "description": "Main text color used by the search UI. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-search-text-color"
-            },
-            {
-              "description": "Muted text color for placeholders, excerpts, and empty states.",
-              "name": "--esp-search-muted-color"
-            },
-            {
-              "description": "Title color for result rows. Defaults to `var(--esp-color-headings)`.",
-              "name": "--esp-search-title-color"
-            },
-            {
-              "description": "Background color of the active result row. Defaults to `var(--esp-color-layer-2)`.",
-              "name": "--esp-search-active-background"
-            },
-            {
-              "description": "Background color applied to `<mark>` highlights inside excerpts.",
-              "name": "--esp-search-highlight-background"
-            },
-            {
-              "description": "Accent color of the loading spinner. Defaults to `var(--esp-color-primary)`.",
-              "name": "--esp-search-loading-indicator-color"
-            },
-            {
-              "description": "Track color of the loading spinner. Defaults to `var(--esp-search-border-color)`.",
-              "name": "--esp-search-loading-indicator-track-color"
-            },
-            {
-              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
-              "name": "--esp-field-background",
+              "privacy": "public",
               "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",
+              "kind": "field",
+              "name": "correlationId",
+              "privacy": "public",
               "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",
+              "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"
               }
             },
             {
-              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-field-text-color",
+              "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"
               }
             },
             {
-              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-hover-bg",
+              "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"
               }
             },
             {
-              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-focus-bg",
+              "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"
               }
             },
             {
-              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-field-focus-shadow",
+              "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"
               }
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"Search\\u2026\"",
-              "description": "Placeholder text for the search input.",
-              "attribute": "placeholder"
             },
             {
-              "kind": "field",
-              "name": "isOpen",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "syncRootFromDom",
               "privacy": "private",
-              "default": "false"
+              "return": {
+                "type": {
+                  "text": "EspalierRoot | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "throwIfMissing",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "results",
-              "type": {
-                "text": "SearchResult[]"
-              },
+              "kind": "method",
+              "name": "subscribeToRootEvents",
               "privacy": "private",
-              "default": "[]"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "EspalierRoot"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean"
-              },
+              "kind": "method",
+              "name": "unsubscribeFromRootEvents",
               "privacy": "private",
-              "default": "false"
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "field",
-              "name": "query",
-              "type": {
-                "text": "string"
-              },
+              "name": "handleSeedColorChanged",
               "privacy": "private",
-              "default": "\"\""
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "field",
-              "name": "activeIndex",
-              "type": {
-                "text": "number"
-              },
+              "name": "handleSchemeChanged",
               "privacy": "private",
-              "default": "-1"
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "field",
-              "name": "vellumRef",
-              "privacy": "private"
+              "name": "handleThemeChanged",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "field",
-              "name": "inputRef",
-              "privacy": "private"
+              "name": "handleIconSpriteUrlChanged",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "resultsRef",
-              "privacy": "private"
+              "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": "idPrefix",
+              "name": "textContrast",
+              "type": {
+                "text": "Partial<\n    Record<SemanticColorName, { bg: SemanticColorName; targetLc: number }>\n  >"
+              },
               "privacy": "private",
+              "static": true,
               "readonly": true,
-              "default": "`esp-search-${this.correlationId}`",
-              "description": "Per-instance ID prefix for ARIA id attributes (listbox + options)."
+              "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": "_overlay",
+              "name": "statusVariantSources",
+              "type": {
+                "text": "ReadonlySet<ColorSource>"
+              },
               "privacy": "private",
-              "default": "new OverlayController({ host: this, getFocusTrapContainer: () => this.vellumRef.value ?? null, getFocusFallback: () => this.inputRef.value ?? null, })"
+              "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": "method",
-              "name": "show",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "semanticActionTokens",
+              "type": {
+                "text": "ReadonlySet<SemanticColorName>"
               },
-              "description": "Open the search overlay and focus the input."
+              "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": "hide",
-              "privacy": "public",
+              "name": "applyVariantTokens",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Close the search overlay and restore focus."
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setResults",
-              "privacy": "public",
+              "name": "effectiveVariantTokenSource",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "ColorSource"
                 }
               },
               "parameters": [
                 {
-                  "name": "results",
+                  "name": "name",
                   "type": {
-                    "text": "SearchResult[]"
+                    "text": "SemanticColorName"
+                  }
+                },
+                {
+                  "name": "mappedSource",
+                  "type": {
+                    "text": "ColorSource"
+                  }
+                },
+                {
+                  "name": "isStatusVariant",
+                  "type": {
+                    "text": "boolean"
                   }
                 }
               ],
-              "description": "Update the displayed search results."
+              "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": "setLoading",
-              "privacy": "public",
+              "name": "getVariantColorSource",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "ColorSource | \"\""
                 }
               },
-              "parameters": [
-                {
-                  "name": "loading",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Show or hide the loading indicator."
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "setVariantTokenProperty",
               "privacy": "private",
               "return": {
                 "type": {
@@ -53113,35 +53091,175 @@
               },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "name",
                   "type": {
-                    "text": "Event"
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
                   }
                 }
-              ]
+              ],
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
             },
             {
               "kind": "method",
-              "name": "selectResult",
+              "name": "clearVariantTokens",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "result",
-                  "type": {
-                    "text": "SearchResult"
-                  }
-                }
-              ]
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "The user changed the query input. Fires on every keystroke (not debounced) so consumers can track the latest query and discard stale async results. Consumers that need debouncing should apply it themselves (e.g. Pagefind's `debouncedSearch()`). `detail: { query: string }`",
+              "name": "search-requested"
+            },
+            {
+              "description": "The user chose a result. `detail: { url: string }`",
+              "name": "result-selected"
+            },
+            {
+              "description": "The overlay was closed (Escape, backdrop click, or result selection). Consumers should use this to cancel in-flight searches or discard pending results. `detail: {}`",
+              "name": "search-closed"
+            },
+            {
+              "name": "value-changed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"Search\\u2026\"",
+              "description": "Placeholder text for the search input.",
+              "fieldName": "placeholder"
+            },
+            {
+              "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"
+          },
+          "docUrl": {
+            "name": "/components/search",
+            "description": ""
+          },
+          "docPageTitle": {
+            "name": "Search",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Search",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Interaction",
+            "description": ""
+          },
+          "menuOrder": {
+            "name": "5",
+            "description": ""
+          },
+          "docSections": {
+            "name": "examples,properties,events,cssprops",
+            "description": ""
+          },
+          "tagName": "esp-search",
+          "customElement": true,
+          "examples": [
+            {
+              "title": "Basic search (consumer wiring not shown)",
+              "body": "```html\n<esp-search placeholder=\"Search docs...\"></esp-search>\n```"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EspalierSearch",
+          "declaration": {
+            "name": "EspalierSearch",
+            "module": "dist/search/esp-search.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-search",
+          "declaration": {
+            "name": "EspalierSearch",
+            "module": "dist/search/esp-search.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/root/esp-root.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Root container for the Espalier design system.\n\nProvides the full design-token pipeline — colors, scales, and\nfonts — to every descendant component.  All tokens are\nJS-computed from a pair of Base64-encoded theme objects and\nemitted as CSS custom properties on the host element.\n\n### Theme API\n\nSupply a `light-theme` and/or `dark-theme` attribute containing\na **Base64-encoded JSON** partial theme.  Fields you omit fall\nback to built-in defaults.  Switch between them with `scheme`.\n\n```html\n<esp-root\n  light-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4yIDE1NSkifQ==\"\n  scheme=\"light\">\n  <esp-box>\n    <h2>Themed content</h2>\n  </esp-box>\n</esp-root>\n```\n\n### Nested theme previews and scoped events\n\nA nested root creates a scoped theme for its descendants. It does not create\na separate event bus: every root publishes theme changes through the same\nEspalier singleton. Subscribe through the root whose changes you own so a\nnested preview cannot be mistaken for an application-level theme change.\n\n```ts\nconst applicationRoot = document.querySelector<EspalierRoot>(\"#application-theme\")!;\n\nconst unsubscribe = applicationRoot.subscribeScoped(\"scheme-changed\", ({ scheme }) => {\n  localStorage.setItem(\"scheme\", scheme);\n});\n\n// Initial state is read directly; scoped events report later changes only.\nrenderScheme(applicationRoot.scheme);\n\n// Call when the owning integration is disposed.\nunsubscribe();\n```\n\nThis contract covers `scheme-changed`, `seed-color-changed`,\n`theme-changed`, and `icon-sprite-url-changed`. Components derived from\n`EspalierElementBase` use the same closest-root filter internally.\n\nThe root also owns the application's banner-texture vocabulary:\n`EspalierRoot.registerTexture(name, definition)` registers an\nimage-backed texture preset that any\n[esp-image](/components/image) banner in the application selects with\n`texture=\"<name>\"`, and `EspalierRoot.registeredTextures()` enumerates\nthe presets for building texture pickers.",
+          "name": "EspalierRoot",
+          "slots": [
+            {
+              "description": "Place Espalier components and content here.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              "name": "registerTexture",
+              "privacy": "public",
+              "static": true,
               "return": {
                 "type": {
                   "text": "void"
@@ -53149,272 +53267,240 @@
               },
               "parameters": [
                 {
-                  "name": "ev",
+                  "name": "name",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "string"
                   }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleBackdropClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
+                },
                 {
-                  "name": "ev",
+                  "name": "definition",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "ImageTextureDefinition"
                   }
                 }
-              ]
+              ],
+              "description": "Register (or replace) a named, image-backed banner-texture preset.\nAny `esp-image` banner under a root selects it with `texture=\"<name>\"`;\nbanners already pointing at the name re-render, so registration at\nmount and markup order never race. Static delegate to\n`registerImageTexture` so script-only contexts (docs demos, published\nsites) can reach it from the root element without module imports."
             },
             {
               "kind": "method",
-              "name": "scrollActiveIntoView",
-              "privacy": "private",
+              "name": "registeredTextures",
+              "privacy": "public",
+              "static": true,
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Map<string, Readonly<ImageTextureDefinition>>"
                 }
-              }
+              },
+              "description": "Snapshot of the registered texture presets, for building pickers."
             },
             {
               "kind": "field",
-              "name": "hasListbox",
+              "name": "schemeBacker",
               "type": {
-                "text": "boolean"
+                "text": "\"light\" | \"dark\" | \"\""
               },
               "privacy": "private",
-              "description": "Whether the listbox is currently rendered in the DOM.",
-              "readonly": true
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "listboxId",
+              "name": "schemeExplicitlySet",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
               "privacy": "private",
-              "readonly": true
+              "default": "false"
             },
             {
-              "kind": "method",
-              "name": "optionId",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "kind": "field",
+              "name": "resolvingDefaultScheme",
+              "type": {
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderResults",
-              "privacy": "private"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "seedColorBacker",
+              "name": "themeEventsReady",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
               "privacy": "private",
-              "default": "\"oklch(0.7 0.125 216)\"",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "espRoot",
+              "name": "systemSchemeQuery",
               "type": {
-                "text": "EspalierRoot | null"
+                "text": "MediaQueryList | null"
               },
               "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "variantTokenOriginalValues",
+              "name": "lastSeedColor",
+              "type": {
+                "text": "string"
+              },
               "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"
-              }
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "rootEventSubscriptionsActive",
+              "name": "resolvedLightTheme",
               "type": {
-                "text": "boolean"
+                "text": "EspalierTheme"
               },
               "privacy": "private",
-              "default": "false",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "default": "{ ...DEFAULT_LIGHT_THEME }"
             },
             {
               "kind": "field",
-              "name": "subscribedRoot",
+              "name": "resolvedDarkTheme",
               "type": {
-                "text": "EspalierRoot | null"
+                "text": "EspalierTheme"
               },
               "privacy": "private",
-              "default": "null",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "default": "{ ...DEFAULT_DARK_THEME }"
             },
             {
               "kind": "field",
-              "name": "rootEventUnsubscribers",
+              "name": "documentClickRegistrationActive",
               "type": {
-                "text": "Array<() => void>"
+                "text": "boolean"
               },
               "privacy": "private",
-              "default": "[]",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "variantBacker",
+              "name": "connectedRootCount",
               "type": {
-                "text": "EspalierVariant"
+                "text": "number"
               },
-              "privacy": "protected",
-              "default": "\"primary\"",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "privacy": "private",
+              "static": true,
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "seedColor",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "name": "handleDocumentClick",
+              "privacy": "private",
+              "static": true,
+              "readonly": true
             },
             {
               "kind": "field",
               "name": "correlationId",
               "privacy": "public",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "description": "Unique ID for correlating bus events across multiple roots."
             },
             {
               "kind": "method",
-              "name": "focusResolvedElementAfterUpdate",
-              "privacy": "protected",
+              "name": "subscribeScoped",
+              "privacy": "public",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "() => void"
                 }
               },
               "parameters": [
                 {
-                  "name": "resolveTarget",
+                  "name": "event",
                   "type": {
-                    "text": "() => HTMLElement | null | undefined"
-                  }
+                    "text": "K"
+                  },
+                  "description": "Root-scoped theme event to observe."
                 },
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "handler",
                   "type": {
-                    "text": "FocusOptions"
-                  }
+                    "text": "(payload: SchemeEvents[K]) => void"
+                  },
+                  "description": "Callback invoked with that event's typed payload."
                 }
               ],
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "description": "Subscribe to a theme event published by this root only.\n\nAll roots share Espalier's global bus. This method filters foreign and\nnested-root payloads by `correlationId` and returns a cleanup function.\nIt reports changes after mount; read initial state from this root."
+            },
+            {
+              "kind": "field",
+              "name": "lightThemeAttr",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Base64-encoded JSON partial theme for the **light** scheme.\n\nOnly fields you wish to override need to be present — all\nothers inherit from the built-in light defaults.\n\n```html\n<esp-root\n  light-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"light\">\n  <esp-box><h2>Purple light theme</h2></esp-box>\n</esp-root>\n```",
+              "attribute": "light-theme"
+            },
+            {
+              "kind": "field",
+              "name": "darkThemeAttr",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Base64-encoded JSON partial theme for the **dark** scheme.\n\n```html\n<esp-root\n  dark-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"dark\">\n  <esp-box><h2>Purple dark theme</h2></esp-box>\n</esp-root>\n```",
+              "attribute": "dark-theme"
+            },
+            {
+              "kind": "field",
+              "name": "fontCSSRoot",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"/css/fonts/\"",
+              "description": "Root path for locally-cached font CSS files used by\n`<esp-font-picker>` to load font previews.\n\nThe directory must contain the individual font CSS files\ngenerated by `npm run build-fonts`.  These files must be\nserved at stable, predictable paths (no filename hashing)\nbecause the picker constructs URLs by font family name.",
+              "attribute": "font-css-root"
+            },
+            {
+              "kind": "field",
+              "name": "fontDefinitionsUrl",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "Full URL to the `font-definitions.json` catalog used by\n`<esp-font-picker>`.\n\nWhen set, the picker fetches from this URL instead of\n`{fontCSSRoot}font-definitions.json`.  This allows the JSON\nto be served through a cache-busting asset pipeline while\nthe individual font CSS files remain at stable paths.",
+              "attribute": "font-definitions-url"
+            },
+            {
+              "kind": "field",
+              "name": "googleFontLoading",
+              "type": {
+                "text": "\"auto\" | \"none\""
+              },
+              "privacy": "public",
+              "default": "\"auto\"",
+              "description": "Controls whether Espalier may inject runtime Google Fonts CDN\nstylesheet links for selected Google Fonts.\n\n`auto` preserves the default behavior: theme font families and\nselected Google font-picker values may load full fonts from\n`fonts.googleapis.com`.  `none` prevents those runtime Google\nFonts links, leaving local preview CSS and web-safe font stacks\navailable for locked-down, offline, or strict-CSP environments.",
+              "attribute": "google-font-loading"
             },
             {
-              "kind": "method",
-              "name": "focusShadowElementAfterUpdate",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "iconSpriteUrl",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "selector",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "FocusOptions"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "privacy": "public",
+              "default": "\"/assets/icons.svg\"",
+              "description": "Full URL to the SVG sprite used by component-owned `icon`\nattributes.\n\nComponents append the validated icon name as a fragment, so\nthis should point to the sprite file itself, without `#icon`.\nUse this when your application serves the sprite from a\nsubpath, CDN, or cache-busted asset pipeline. Set it to an\nempty string to disable generated sprite icon URLs for this root.\n\n```html\n<esp-root icon-sprite-url=\"/dist/icons.abc123.svg\">\n  <esp-button icon=\"save\" label=\"Save\"></esp-button>\n</esp-root>\n```",
+              "attribute": "icon-sprite-url"
             },
             {
-              "kind": "method",
-              "name": "emitValueChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "defaultScheme",
+              "type": {
+                "text": "\"light\" | \"dark\" | \"system\""
               },
-              "parameters": [
-                {
-                  "name": "detail",
-                  "type": {
-                    "text": "T"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "privacy": "public",
+              "default": "\"light\"",
+              "description": "Initial color scheme to apply when `scheme` is not set.\n\nUse `light` or `dark` for a fixed published-site default, or\n`system` to follow the visitor's `prefers-color-scheme` before\nthey toggle the active `scheme`.",
+              "attribute": "default-scheme",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -53423,55 +53509,44 @@
                 "text": "\"dark\" | \"light\""
               },
               "privacy": "public",
+              "description": "The active color scheme.\n\nLight scheme\n\n```html\n<esp-root scheme=\"light\">\n  <esp-box>\n    <h2>Light Scheme</h2>\n    <esp-button label=\"I am light\"></esp-button>\n  </esp-box>\n</esp-root>\n```\n\nDark scheme\n\n```html\n<esp-root scheme=\"dark\">\n  <esp-box>\n    <h2>Dark Scheme</h2>\n    <esp-button label=\"I am dark\"></esp-button>\n  </esp-box>\n</esp-root>\n```",
               "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"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "seedColor",
               "type": {
-                "text": "EspalierVariant"
+                "text": "string"
               },
               "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"
-              }
+              "description": "The effective seed color from the active theme.\n\nRead-only — supply a theme attribute with a different\n`seedColor` value to change.",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "syncRootFromDom",
+              "name": "extractFamily",
               "privacy": "private",
+              "static": true,
               "return": {
                 "type": {
-                  "text": "EspalierRoot | null"
+                  "text": "string"
                 }
               },
               "parameters": [
                 {
-                  "name": "throwIfMissing",
+                  "name": "cssValue",
                   "type": {
-                    "text": "boolean"
+                    "text": "string"
                   }
                 }
               ],
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "description": "Extract the bare font family name from a CSS `font-family`\nvalue like `\"Roboto\", sans-serif` → `Roboto`."
             },
             {
               "kind": "method",
-              "name": "subscribeToRootEvents",
+              "name": "injectGoogleFontLink",
               "privacy": "private",
               "return": {
                 "type": {
@@ -53480,358 +53555,299 @@
               },
               "parameters": [
                 {
-                  "name": "root",
+                  "name": "slot",
                   "type": {
-                    "text": "EspalierRoot"
+                    "text": "\"body\" | \"headings\" | \"brand\" | \"monospace\""
+                  }
+                },
+                {
+                  "name": "family",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "weight",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
                   }
                 }
               ],
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "description": "Inject (or replace) a Google Fonts `<link>` for a given slot.\n\nEach slot (`body`, `headings`, `brand`, `monospace`) gets at most one\n`<link>` scoped to this root instance by its correlationId,\nidentified by `data-esp-font=\"<correlationId>-<slot>\"`.\nThis ensures multiple `<esp-root>` instances on the same page\ndo not overwrite each other's font links."
             },
             {
               "kind": "method",
-              "name": "unsubscribeFromRootEvents",
+              "name": "syncGoogleFontLinks",
               "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"
-              }
+              "description": "Ensure Google Font `<link>` tags match the active theme's\nfont families.  Called from `willUpdate()` after theme\nresolution."
             },
             {
               "kind": "method",
-              "name": "traverseToClosest",
-              "privacy": "public",
+              "name": "removeRuntimeGoogleFontLinks",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "selector",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The selector of the element to look for"
+                  "text": "void"
                 }
-              ],
-              "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",
+              "name": "activeTheme",
               "type": {
-                "text": "Partial<\n    Record<SemanticColorName, { bg: SemanticColorName; targetLc: number }>\n  >"
+                "text": "EspalierTheme"
               },
-              "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"
-              }
+              "privacy": "public",
+              "description": "Returns the resolved theme for the active scheme.",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "statusVariantSources",
-              "type": {
-                "text": "ReadonlySet<ColorSource>"
-              },
+              "kind": "method",
+              "name": "resolveThemes",
               "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"
-              }
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Re-merge default → theme-attribute for both schemes.\nCalled in `willUpdate()` whenever any input property changes."
             },
             {
               "kind": "field",
-              "name": "semanticActionTokens",
-              "type": {
-                "text": "ReadonlySet<SemanticColorName>"
-              },
+              "name": "resizeObserver",
               "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"
-              }
+              "default": "new ResizeObserver(() => { getEspBus().publish(\"window-resized\", { emWidth: window.innerWidth / parseFloat(getComputedStyle(document.documentElement).fontSize), emHeight: window.innerHeight / parseFloat(getComputedStyle(document.documentElement).fontSize), pxWidth: window.innerWidth, pxHeight: window.innerHeight, }); })"
             },
             {
               "kind": "method",
-              "name": "applyVariantTokens",
-              "privacy": "protected",
+              "name": "registerDocumentClickBridge",
+              "privacy": "private",
               "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
               "kind": "method",
-              "name": "effectiveVariantTokenSource",
+              "name": "unregisterDocumentClickBridge",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "ColorSource"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "SemanticColorName"
-                  }
-                },
-                {
-                  "name": "mappedSource",
-                  "type": {
-                    "text": "ColorSource"
-                  }
-                },
-                {
-                  "name": "isStatusVariant",
-                  "type": {
-                    "text": "boolean"
-                  }
+                  "text": "void"
                 }
-              ],
-              "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",
+              "name": "applyDefaultScheme",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "ColorSource | \"\""
+                  "text": "void"
                 }
-              },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
               }
             },
             {
               "kind": "method",
-              "name": "setVariantTokenProperty",
+              "name": "resolveDefaultScheme",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  }
+                  "text": "\"light\" | \"dark\""
                 }
-              ],
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
               }
             },
             {
               "kind": "method",
-              "name": "clearVariantTokens",
+              "name": "syncSystemSchemeListener",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
               }
+            },
+            {
+              "kind": "field",
+              "name": "handleSystemSchemeChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lightDomStyles",
+              "static": true,
+              "default": "` /* ── Base typography ──────────────────────────────────── */ esp-root { font-family: var(--esp-font-body); font-weight: var(--esp-font-weight-body); line-height: 1.5; font-size: var(--esp-type-normal); color: var(--esp-color-text); } /* ── Lists ────────────────────────────────────────────── */ esp-root ul[role=\"list\"], esp-root ol[role=\"list\"] { list-style: none; } esp-root ul li::marker, esp-root ol li::marker { font-weight: bold; } /* ── Form controls ────────────────────────────────────── */ esp-root input, esp-root select, esp-root button { font-family: var(--esp-font-body); } /* ── Links ────────────────────────────────────────────── */ esp-root a:not([class]) { text-decoration-skip-ink: auto; font-weight: bold; color: var(--esp-color-link); } esp-root a { text-decoration: underline; text-decoration-skip-ink: auto; color: var(--esp-color-link); } esp-root a:hover { background-color: var(--esp-color-link-hover-bg); color: var(--esp-color-link-hover); text-decoration: none; } /* ── Inherited text styles ────────────────────────────── */ esp-root input, esp-root button, esp-root textarea, esp-root select, esp-root p, esp-root ul, esp-root li { font-family: var(--esp-font-body); color: var(--esp-color-text); font-size: inherit; } esp-root textarea:not([rows]) { min-height: 10em; } /* ── Headings ─────────────────────────────────────────── */ esp-root h1, esp-root h2, esp-root h3, esp-root h4, esp-root h5 { font-family: var(--esp-font-headings); font-weight: var(--esp-font-weight-headings); color: var(--esp-color-headings); margin: var(--esp-size-small-to-normal) 0 var(--esp-size-tiny-to-small); } esp-root h5 { font-size: var(--esp-type-small); line-height: 1.4; } esp-root h4 { font-size: var(--esp-type-medium); line-height: 1.3; } esp-root h3 { font-size: var(--esp-type-big); line-height: 1.2; } esp-root h2 { font-size: var(--esp-type-large); line-height: 1.15; } esp-root h1 { font-size: var(--esp-type-huge); line-height: 1.1; } /* ── Code / Pre ───────────────────────────────────────── */ esp-root pre, esp-root code { font-family: var(--esp-font-monospace); font-weight: var(--esp-font-weight-monospace); } esp-root code { font-size: var(--esp-type-small); background: var(--esp-color-layer-1); border-radius: var(--esp-size-border-radius); padding: 0 0.35em; display: inline-block; border: 1px dotted var(--esp-color-border); } esp-root pre { background-color: var(--esp-color-layer-1); border-radius: var(--esp-size-border-radius); border: 1px dotted var(--esp-color-border); } esp-root pre > code { font-size: var(--esp-type-tiny); display: block; background: none; border: none; hyphens: none; tab-size: 2; white-space: pre; padding: var(--esp-size-padding); overflow: auto; line-height: 1.8; } /* ── Images ────────────────────────────────────────────── */ esp-root img, esp-root picture { max-width: 100%; display: block; } `",
+              "description": "Light-DOM styles injected into `document.head` so that\nslotted content (headings, links, code blocks, lists, etc.)\ninherits the design-system tokens defined on `:host`.\nSelectors are scoped to `esp-root` descendants to avoid\nleaking into content outside the root."
             }
           ],
-          "events": [
+          "attributes": [
             {
-              "description": "The user changed the query input. Fires on every keystroke (not debounced) so consumers can track the latest query and discard stale async results. Consumers that need debouncing should apply it themselves (e.g. Pagefind's `debouncedSearch()`). `detail: { query: string }`",
-              "name": "search-requested"
+              "name": "light-theme",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Base64-encoded JSON partial theme for the **light** scheme.\n\nOnly fields you wish to override need to be present — all\nothers inherit from the built-in light defaults.\n\n```html\n<esp-root\n  light-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"light\">\n  <esp-box><h2>Purple light theme</h2></esp-box>\n</esp-root>\n```",
+              "fieldName": "lightThemeAttr"
             },
             {
-              "description": "The user chose a result. `detail: { url: string }`",
-              "name": "result-selected"
+              "name": "dark-theme",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "Base64-encoded JSON partial theme for the **dark** scheme.\n\n```html\n<esp-root\n  dark-theme=\"eyJzZWVkQ29sb3IiOiJva2xjaCgwLjcgMC4xNSAyODUpIn0=\"\n  scheme=\"dark\">\n  <esp-box><h2>Purple dark theme</h2></esp-box>\n</esp-root>\n```",
+              "fieldName": "darkThemeAttr"
             },
             {
-              "description": "The overlay was closed (Escape, backdrop click, or result selection). Consumers should use this to cancel in-flight searches or discard pending results. `detail: {}`",
-              "name": "search-closed"
+              "name": "font-css-root",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"/css/fonts/\"",
+              "description": "Root path for locally-cached font CSS files used by\n`<esp-font-picker>` to load font previews.\n\nThe directory must contain the individual font CSS files\ngenerated by `npm run build-fonts`.  These files must be\nserved at stable, predictable paths (no filename hashing)\nbecause the picker constructs URLs by font family name.",
+              "fieldName": "fontCSSRoot"
             },
             {
-              "name": "value-changed",
+              "name": "font-definitions-url",
               "type": {
-                "text": "CustomEvent"
+                "text": "string"
               },
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ],
-          "attributes": [
+              "default": "\"\"",
+              "description": "Full URL to the `font-definitions.json` catalog used by\n`<esp-font-picker>`.\n\nWhen set, the picker fetches from this URL instead of\n`{fontCSSRoot}font-definitions.json`.  This allows the JSON\nto be served through a cache-busting asset pipeline while\nthe individual font CSS files remain at stable paths.",
+              "fieldName": "fontDefinitionsUrl"
+            },
             {
-              "name": "placeholder",
+              "name": "google-font-loading",
+              "type": {
+                "text": "\"auto\" | \"none\""
+              },
+              "default": "\"auto\"",
+              "description": "Controls whether Espalier may inject runtime Google Fonts CDN\nstylesheet links for selected Google Fonts.\n\n`auto` preserves the default behavior: theme font families and\nselected Google font-picker values may load full fonts from\n`fonts.googleapis.com`.  `none` prevents those runtime Google\nFonts links, leaving local preview CSS and web-safe font stacks\navailable for locked-down, offline, or strict-CSP environments.",
+              "fieldName": "googleFontLoading"
+            },
+            {
+              "name": "icon-sprite-url",
               "type": {
                 "text": "string"
               },
-              "default": "\"Search\\u2026\"",
-              "description": "Placeholder text for the search input.",
-              "fieldName": "placeholder"
+              "default": "\"/assets/icons.svg\"",
+              "description": "Full URL to the SVG sprite used by component-owned `icon`\nattributes.\n\nComponents append the validated icon name as a fragment, so\nthis should point to the sprite file itself, without `#icon`.\nUse this when your application serves the sprite from a\nsubpath, CDN, or cache-busted asset pipeline. Set it to an\nempty string to disable generated sprite icon URLs for this root.\n\n```html\n<esp-root icon-sprite-url=\"/dist/icons.abc123.svg\">\n  <esp-button icon=\"save\" label=\"Save\"></esp-button>\n</esp-root>\n```",
+              "fieldName": "iconSpriteUrl"
             },
             {
-              "name": "scheme",
+              "name": "default-scheme",
               "type": {
-                "text": "\"dark\" | \"light\""
+                "text": "\"light\" | \"dark\" | \"system\""
               },
               "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"
-              }
+              "description": "Initial color scheme to apply when `scheme` is not set.\n\nUse `light` or `dark` for a fixed published-site default, or\n`system` to follow the visitor's `prefers-color-scheme` before\nthey toggle the active `scheme`.",
+              "fieldName": "defaultScheme"
             },
             {
-              "name": "variant",
+              "name": "scheme",
               "type": {
-                "text": "EspalierVariant"
+                "text": "\"dark\" | \"light\""
               },
-              "description": "The [color variant](/guides/color/variants) of the element.",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
+              "description": "The active color scheme.\n\nLight scheme\n\n```html\n<esp-root scheme=\"light\">\n  <esp-box>\n    <h2>Light Scheme</h2>\n    <esp-button label=\"I am light\"></esp-button>\n  </esp-box>\n</esp-root>\n```\n\nDark scheme\n\n```html\n<esp-root scheme=\"dark\">\n  <esp-box>\n    <h2>Dark Scheme</h2>\n    <esp-button label=\"I am dark\"></esp-button>\n  </esp-box>\n</esp-root>\n```",
+              "default": "\"light\"",
+              "fieldName": "scheme"
             }
           ],
           "superclass": {
-            "name": "EspalierElementBase",
-            "module": "dist/shared/esp-element-base.js"
-          },
-          "docUrl": {
-            "name": "/components/search",
-            "description": ""
+            "name": "LitElement",
+            "package": "lit"
           },
+          "tagName": "esp-root",
+          "customElement": true,
           "docPageTitle": {
-            "name": "Search",
+            "name": "Root",
             "description": ""
           },
-          "menuLabel": {
-            "name": "Search",
+          "docUrl": {
+            "name": "/components/root",
             "description": ""
           },
           "menuGroup": {
-            "name": "Interaction",
+            "name": "Structure",
             "description": ""
           },
           "menuOrder": {
-            "name": "5",
+            "name": "1",
             "description": ""
           },
-          "docSections": {
-            "name": "examples,properties,events,cssprops",
+          "menuLabel": {
+            "name": "Root",
             "description": ""
           },
-          "tagName": "esp-search",
-          "customElement": true,
-          "examples": [
-            {
-              "title": "Basic search (consumer wiring not shown)",
-              "body": "```html\n<esp-search placeholder=\"Search docs...\"></esp-search>\n```"
-            }
-          ]
+          "menuIcon": {
+            "name": "building",
+            "description": ""
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierSearch",
+          "name": "registerImageTexture",
           "declaration": {
-            "name": "EspalierSearch",
-            "module": "dist/search/esp-search.js"
+            "name": "registerImageTexture",
+            "module": "../shared/image-texture-registry.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registeredImageTextures",
+          "declaration": {
+            "name": "registeredImageTextures",
+            "module": "../shared/image-texture-registry.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "BUILT_IN_IMAGE_TEXTURES",
+          "declaration": {
+            "name": "BUILT_IN_IMAGE_TEXTURES",
+            "module": "../shared/image-texture-registry.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ImageTextureDefinition",
+          "declaration": {
+            "name": "ImageTextureDefinition",
+            "module": "../shared/image-texture-registry.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SchemeEvents",
+          "declaration": {
+            "name": "SchemeEvents",
+            "module": "../shared/bus-events.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EspalierRoot",
+          "declaration": {
+            "name": "EspalierRoot",
+            "module": "dist/root/esp-root.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-search",
+          "name": "esp-root",
           "declaration": {
-            "name": "EspalierSearch",
-            "module": "dist/search/esp-search.js"
+            "name": "EspalierRoot",
+            "module": "dist/root/esp-root.js"
           }
         }
       ]