@taprootio/espalier 4.3.0 → 4.5.0

package/custom-elements.json

@@ -1327,6 +1327,190 @@
             "module": "./shared/font-helpers.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "googleFontStylesheetUrl",
+          "declaration": {
+            "name": "googleFontStylesheetUrl",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isLocalFontFamily",
+          "declaration": {
+            "name": "isLocalFontFamily",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "normalizeFontFaceWeight",
+          "declaration": {
+            "name": "normalizeFontFaceWeight",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "removeRuntimeGoogleFontLink",
+          "declaration": {
+            "name": "removeRuntimeGoogleFontLink",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "removeRuntimeGoogleFontLinks",
+          "declaration": {
+            "name": "removeRuntimeGoogleFontLinks",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "syncRuntimeGoogleFontLink",
+          "declaration": {
+            "name": "syncRuntimeGoogleFontLink",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RUNTIME_GOOGLE_FONT_OWNER_ATTR",
+          "declaration": {
+            "name": "RUNTIME_GOOGLE_FONT_OWNER_ATTR",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RuntimeGoogleFontLinkOptions",
+          "declaration": {
+            "name": "RuntimeGoogleFontLinkOptions",
+            "module": "./shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "compileFontPlan",
+          "declaration": {
+            "name": "compileFontPlan",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fontFallbackAliases",
+          "declaration": {
+            "name": "fontFallbackAliases",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fontFallbackBaseIndexes",
+          "declaration": {
+            "name": "fontFallbackBaseIndexes",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fontFaceRequestKey",
+          "declaration": {
+            "name": "fontFaceRequestKey",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CompileFontPlanOptions",
+          "declaration": {
+            "name": "CompileFontPlanOptions",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CompiledFontPlan",
+          "declaration": {
+            "name": "CompiledFontPlan",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontFaceRequest",
+          "declaration": {
+            "name": "FontFaceRequest",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontFallbackCatalog",
+          "declaration": {
+            "name": "FontFallbackCatalog",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontFallbackProfile",
+          "declaration": {
+            "name": "FontFallbackProfile",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontPlanProfileMiss",
+          "declaration": {
+            "name": "FontPlanProfileMiss",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontPlanScheme",
+          "declaration": {
+            "name": "FontPlanScheme",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontPlanSlot",
+          "declaration": {
+            "name": "FontPlanSlot",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontPlanStyle",
+          "declaration": {
+            "name": "FontPlanStyle",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "FontPlanTheme",
+          "declaration": {
+            "name": "FontPlanTheme",
+            "module": "./shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ResolvedFontSource",
+          "declaration": {
+            "name": "ResolvedFontSource",
+            "module": "./shared/font-plan.js"
+          }
+        },
         {
           "kind": "js",
           "name": "getGoogleFonts",
@@ -7338,7 +7522,7 @@
           ],
           "cssParts": [
             {
-              "description": "The box element. The default style is a padded element displayed as a box. Style the CSS part to create cards, forms, and other UI elements. Here is a card style: ```html <style> esp-box.card-box::part(box) { display: grid; grid-template-rows: min-content min-content; gap: var(--esp-size-padding); padding: 0; } esp-box.card-box header { background: oklch(from var(--esp-color-complementary) var(--esp-l-text) c h); color: oklch(from var(--esp-color-complementary) var(--esp-l-surface) c h); font-size: var(--esp-size-big-to-large); padding: var(--esp-size-padding); line-height: 1.1; font-family: var(--esp-font-headings); } esp-box.card-box div { padding: var(--esp-size-padding); } </style> <esp-box class=\"card-box\"> <header>Box as a card</header> <div> <p>Card content.</p> </div> </esp-box> ```",
+              "description": "The box element. The default style is a padded element displayed as a box. Style the CSS part to create cards, forms, and other UI elements. Here is a card style: ```html <style> esp-box.card-box::part(box) { display: grid; grid-template-rows: min-content min-content; gap: var(--esp-size-padding); padding: 0; } esp-box.card-box header { background: oklch(from var(--esp-color-complementary) var(--esp-l-text) c h); color: oklch(from var(--esp-color-complementary) var(--esp-l-surface) c h); font-size: var(--esp-size-big-to-large); padding: var(--esp-size-padding); line-height: 1.1; font-family: var(--esp-font-headings, var(--esp-font-body, system-ui, sans-serif)); } esp-box.card-box div { padding: var(--esp-size-padding); } </style> <esp-box class=\"card-box\"> <header>Box as a card</header> <div> <p>Card content.</p> </div> </esp-box> ```",
               "name": "box"
             }
           ],
@@ -18421,7 +18605,7 @@
               "type": {
                 "text": "CustomEvent<{ open: boolean }>"
               },
-              "description": "Fired when the details element is opened or closed. ```html <esp-details summary=\"Toggle me\"> <p>Watch the console for toggle events.</p> </esp-details> <script> const details = findByTagName(\"esp-details\")[0]; details.addEventListener(\"esp-details-toggle\", (ev) => { console.log(\"Open:\", ev.detail.open); }); </script> ``` ### Scroll-stability regression harness ```html <esp-info intent=\"warning\" icon=\"info-i\"> <strong>Manual verification (Firefox):</strong> <ol> <li>Scroll so the details summary and top of the grid are both visible.</li> <li>Open and close the details panel several times — the window should stay put.</li> <li>Leave the panel open and click a sortable grid header — the window should not jump.</li> <li>Toggle a checkbox, click Apply, and repeat the sort — the viewport should remain stable.</li> </ol> </esp-info> <div style=\"height:40vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body);\"> &uarr; Spacer &mdash; scroll down to reach the filter panel &uarr; </div> <esp-details summary=\"Advanced filters\"> <div style=\"display:flex; flex-direction:column; gap:var(--esp-size-small);\"> <label style=\"display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body); color:var(--esp-color-text);\"> <input type=\"checkbox\" value=\"active\" /> Active only </label> <label style=\"display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body); color:var(--esp-color-text);\"> <input type=\"checkbox\" value=\"flagged\" /> Flagged </label> <esp-button id=\"scroll-test-apply\" label=\"Apply filters\"></esp-button> </div> </esp-details> <esp-grid page-size=\"30\" grid-height=\"50vh\" style=\"margin-top:var(--esp-size-small);\"> <esp-grid-column header=\"Row\" field-name=\"id\" sortable sort-type=\"number\" width=\"80px\"></esp-grid-column> <esp-grid-column header=\"Title\" field-name=\"title\" sortable width=\"200px\" grow></esp-grid-column> <esp-grid-column header=\"Status\" field-name=\"status\" width=\"120px\"></esp-grid-column> </esp-grid> <div style=\"height:60vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body);\"> &darr; Spacer &mdash; extra page length below the grid &darr; </div> <script> const allRows = Array.from({ length: 200 }, (_, i) => ({ id: i + 1, title: \"Page \" + (i + 1), status: i % 3 === 0 ? \"active\" : i % 3 === 1 ? \"flagged\" : \"archived\", })); let activeFilters = []; const grid = findByTagName(\"esp-grid\")[0]; function applyFetchPage() { grid.fetchPage = async ({ cursor, limit, sortField, sortOrder }) => { await new Promise(r => setTimeout(r, 80)); let data = activeFilters.length ? allRows.filter(r => activeFilters.includes(r.status)) : [...allRows]; if (sortField) { data.sort((a, b) => { const dir = sortOrder === \"desc\" ? -1 : 1; return a[sortField] > b[sortField] ? dir : -dir; }); } const start = cursor ? parseInt(cursor) : 0; const items = data.slice(start, start + limit); const next = start + limit; return { items, nextCursor: next < data.length ? String(next) : null }; }; } applyFetchPage(); findById(\"scroll-test-apply\") .addEventListener(\"click\", () => { activeFilters = Array.from( findByTagName(\"input\") ).filter(cb => cb.checked).map(cb => cb.value); applyFetchPage(); grid.reload(); }); </script> ```",
+              "description": "Fired when the details element is opened or closed. ```html <esp-details summary=\"Toggle me\"> <p>Watch the console for toggle events.</p> </esp-details> <script> const details = findByTagName(\"esp-details\")[0]; details.addEventListener(\"esp-details-toggle\", (ev) => { console.log(\"Open:\", ev.detail.open); }); </script> ``` ### Scroll-stability regression harness ```html <esp-info intent=\"warning\" icon=\"info-i\"> <strong>Manual verification (Firefox):</strong> <ol> <li>Scroll so the details summary and top of the grid are both visible.</li> <li>Open and close the details panel several times — the window should stay put.</li> <li>Leave the panel open and click a sortable grid header — the window should not jump.</li> <li>Toggle a checkbox, click Apply, and repeat the sort — the viewport should remain stable.</li> </ol> </esp-info> <div style=\"height:40vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body,system-ui,sans-serif);\"> &uarr; Spacer &mdash; scroll down to reach the filter panel &uarr; </div> <esp-details summary=\"Advanced filters\"> <div style=\"display:flex; flex-direction:column; gap:var(--esp-size-small);\"> <label style=\"display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body,system-ui,sans-serif); color:var(--esp-color-text);\"> <input type=\"checkbox\" value=\"active\" /> Active only </label> <label style=\"display:flex; align-items:center; gap:var(--esp-size-tiny); font-family:var(--esp-font-body,system-ui,sans-serif); color:var(--esp-color-text);\"> <input type=\"checkbox\" value=\"flagged\" /> Flagged </label> <esp-button id=\"scroll-test-apply\" label=\"Apply filters\"></esp-button> </div> </esp-details> <esp-grid page-size=\"30\" grid-height=\"50vh\" style=\"margin-top:var(--esp-size-small);\"> <esp-grid-column header=\"Row\" field-name=\"id\" sortable sort-type=\"number\" width=\"80px\"></esp-grid-column> <esp-grid-column header=\"Title\" field-name=\"title\" sortable width=\"200px\" grow></esp-grid-column> <esp-grid-column header=\"Status\" field-name=\"status\" width=\"120px\"></esp-grid-column> </esp-grid> <div style=\"height:60vh; background:repeating-linear-gradient(180deg,var(--esp-color-layer-2) 0 1px,transparent 1px 2rem); display:flex; align-items:center; justify-content:center; color:oklch(from var(--esp-color-text) l c h / 0.5); font-family:var(--esp-font-body,system-ui,sans-serif);\"> &darr; Spacer &mdash; extra page length below the grid &darr; </div> <script> const allRows = Array.from({ length: 200 }, (_, i) => ({ id: i + 1, title: \"Page \" + (i + 1), status: i % 3 === 0 ? \"active\" : i % 3 === 1 ? \"flagged\" : \"archived\", })); let activeFilters = []; const grid = findByTagName(\"esp-grid\")[0]; function applyFetchPage() { grid.fetchPage = async ({ cursor, limit, sortField, sortOrder }) => { await new Promise(r => setTimeout(r, 80)); let data = activeFilters.length ? allRows.filter(r => activeFilters.includes(r.status)) : [...allRows]; if (sortField) { data.sort((a, b) => { const dir = sortOrder === \"desc\" ? -1 : 1; return a[sortField] > b[sortField] ? dir : -dir; }); } const start = cursor ? parseInt(cursor) : 0; const items = data.slice(start, start + limit); const next = start + limit; return { items, nextCursor: next < data.length ? String(next) : null }; }; } applyFetchPage(); findById(\"scroll-test-apply\") .addEventListener(\"click\", () => { activeFilters = Array.from( findByTagName(\"input\") ).filter(cb => cb.checked).map(cb => cb.value); applyFetchPage(); grid.reload(); }); </script> ```",
               "name": "esp-details-toggle"
             }
           ],
@@ -23399,6 +23583,23 @@
           ],
           "description": "Build the CSS `font-family` value used by picker items.\nConsumers should reference this when setting `styles.fontFamily`\non picker items to match the preview `@font-face` name."
         },
+        {
+          "kind": "function",
+          "name": "getFontPreviewFamily",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "font",
+              "type": {
+                "text": "FontPickerFont"
+              }
+            }
+          ]
+        },
         {
           "kind": "class",
           "description": "Font picker component backed by the Google Fonts catalog by default.\n\nThe font catalog is loaded at runtime from a build-generated\n`font-definitions.json` file served alongside the individual font CSS\nfiles.  Run `npm run build-fonts` to generate both assets.\n\nSet `font-source=\"web-safe\"` for email editors or other places where\nthe picker should offer only CSS font stacks that do not need font\ndownloads.\n\n**Required setup:**\n1. Serve the `css/fonts/` directory under a public path.\n2. Point `<esp-root font-css-root=\"/your/path/\">` at that path.\n\n```html\n<esp-root font-css-root=\"/css/fonts/\">\n  <esp-form-item label=\"Pick a font\">\n    <esp-font-picker></esp-font-picker>\n  </esp-form-item>\n</esp-root>\n```\n\n```html\n<esp-form-item label=\"Email font\">\n  <esp-font-picker font-source=\"web-safe\"></esp-font-picker>\n</esp-form-item>\n```",
@@ -24528,6 +24729,14 @@
             "module": "dist/font-picker/esp-font-picker.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "getFontPreviewFamily",
+          "declaration": {
+            "name": "getFontPreviewFamily",
+            "module": "dist/font-picker/esp-font-picker.js"
+          }
+        },
         {
           "kind": "js",
           "name": "EspalierFontPicker",
@@ -31063,7 +31272,7 @@
               "name": "--esp-header-brand-color"
             },
             {
-              "description": "The configured brand font family. Defaults to `var(--esp-font-brand, var(--esp-font-headings))`.",
+              "description": "The configured brand font family. Defaults through `--esp-font-brand` and `--esp-font-headings` to `--esp-font-body`.",
               "name": "--esp-header-brand-font-family"
             },
             {
@@ -31102,6 +31311,10 @@
               "description": "The configured brand hover text decoration. Defaults to `none`.",
               "name": "--esp-header-brand-hover-decoration"
             },
+            {
+              "description": "The configured brand hover transform. Defaults to `none`.",
+              "name": "--esp-header-brand-hover-transform"
+            },
             {
               "description": "Background used before scroll for transparent headers. Defaults to `transparent`.",
               "name": "--esp-header-transparent-background"
@@ -48965,6 +49178,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/page/esp-page.styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "pageStyles",
+          "type": {
+            "text": "array"
+          },
+          "default": "[ ...EspalierElementBase.styles, css` :host { --_esp-page-resolved-max-width: var( --esp-page-main-max-width, var(--esp-page-max-width, 1536px) ); --_esp-page-main-min-width: var( --esp-page-main-min-width, var(--esp-page-preview-min-main-width, 30rem) ); --_esp-page-preview-resolved-min-width: var( --esp-page-preview-width, var(--esp-page-preview-min-width, 22.5rem) ); --_esp-page-preview-resolved-max-width: var( --esp-page-preview-width, var(--esp-page-preview-max-width, 48rem) ); --_esp-page-flyout-resolved-min-width: var( --esp-page-flyout-width, var(--esp-page-flyout-min-width, 20rem) ); --_esp-page-flyout-resolved-max-width: var( --esp-page-flyout-width, var(--esp-page-flyout-max-width, 30rem) ); --_esp-page-preview-used-width: 0px; --_esp-page-flyout-used-width: 0px; --_esp-page-workspace-track: minmax( calc(var(--_esp-page-flyout-min) + var(--_esp-page-preview-min)), calc(var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width)) ); /* The cap sizes the main content *well*: the main track maxes at the cap and the surplus beyond the surface becomes canvas gutters. (Contract preserved from v2.1.0.) */ --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width)); /* Canvas gutter weights (physical left/right in LTR). The flexible gutters claim only the space left once the main track reaches its cap, so they appear exactly when the surface exceeds the cap — at any cap, with no viewport breakpoint (ADR-011). The start default keeps no leading gutter and lets all surplus collect trailing. Empty asides collapse to zero because the header and footer regions are inline-size-contained and no longer leak their min-content into the aside tracks (see the .esp-page-top / .esp-page-footer rules). The fr weights are written as 0fr/1fr (never bare 0) so the track list stays pairwise-interpolable and the flyout open/close can animate via grid track interpolation where supported. */ --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 1fr; /* Help and preview share an exact auxiliary workspace track before the outer trailing gutter. Opening help raises that track's safe minimum; the allocator supplies its concrete used width. */ --_esp-page-flyout-min: 0px; /* Preview starts at the surface edge before help. Reclaiming raises this minimum so the auxiliary track reserves both pane floors while the main track retains its own floor. */ --_esp-page-preview-min: 0px; /* A raised surface edge's drop shadow, cast in the trailing (inline-end) direction. The surface mirrors it onto both inline edges; a match-surface flyout casts only this trailing edge, so it lifts off the canvas while staying attached at its leading perforation (no shadow bleeding over the content it flies out from). */ --_esp-page-surface-edge-shadow: 0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow); /* Resolve the surface shadow/border once (public override plus the built-in default) so the value is readable downstream — the surface layer and the match-surface flyout contract both consume it, and it stays a single source of truth. */ --_esp-page-surface-shadow: var( --esp-page-surface-shadow, -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow), var(--_esp-page-surface-edge-shadow) ); --_esp-page-surface-border: var(--esp-page-surface-border, none); --_esp-page-fixed-header-offset: var( --esp-page-fixed-header-offset, var(--esp-header-height, calc(4.5 * var(--esp-size-small))) ); display: block; } :host([kind=\"narrow\"]) { --_esp-page-resolved-max-width: var( --esp-page-main-max-width, var(--esp-page-max-width, 768px) ); } :host([align=\"center\"]) { --_esp-page-gutter-left: 1fr; --_esp-page-gutter-right: 1fr; } :host([align=\"end\"]) { --_esp-page-gutter-left: 1fr; --_esp-page-gutter-right: 0fr; } /* Full is unbounded only while the consumer has not supplied the explicit main maximum. The internal marker is synchronized from the computed public token before workspace allocation, allowing a finite full-kind authoring surface to retain normal alignment gutters. */ :host([kind=\"full\"]) { --_esp-page-resolved-max-width: var( --esp-page-main-max-width, var(--esp-page-max-width, none) ); } :host([kind=\"full\"]:not([data-main-max-configured])) { --_esp-page-main-track: 1fr; --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 0fr; } /* Site: the marketing shell (ESP0174). The main region is always unbounded — slotted esp-section bands own their centered wells — so this is the unconfigured-full geometry, unconditionally, and align's gutter weights do not apply. Declared after the align rules so it wins on order. */ :host([kind=\"site\"]) { --_esp-page-resolved-max-width: none; --_esp-page-main-track: 1fr; --_esp-page-gutter-left: 0fr; --_esp-page-gutter-right: 0fr; } /* Flyout placement ladder (ESP0111). Preview and help occupy an exact auxiliary track between the main surface and the outer gutter: 1. spare canvas is converted into the allocated auxiliary track while main remains at its natural maximum 2. help and preview contract to their floors 3. an eligible linked navigation rail yields before the main track narrows toward its minimum 4. if the complete main + preview + help minimums do not fit, JS requests the flyout's existing modal overlay presentation 5. mobile → the media query below releases the minimum and esp-flyout itself becomes a fixed overlay drawer. The flyout-open host attribute is maintained by syncFlyoutState (Blink cannot match :has() inside :host(), so the state is mirrored instead). Declared after the align/kind rules so the open state wins. */ :host([flyout-open]) { --_esp-page-flyout-min: var(--_esp-page-flyout-resolved-min-width); } :host([preview-reclaiming]) { --_esp-page-preview-min: var(--_esp-page-preview-resolved-min-width); } /* Configured defaults and retained drag/keyboard choices participate in the same grid minima as automatic allocation. This lets a target that must reclaim main do so instead of overflowing the gutter, while the allocator still clamps private used widths before they reach Grid. */ :host([flyout-open][data-workspace-targeted]) { --_esp-page-flyout-min: var(--_esp-page-flyout-used-width); } :host([preview-reclaiming][data-workspace-targeted]) { --_esp-page-preview-min: var(--_esp-page-preview-used-width); } :host([flyout-open]), :host([preview-reclaiming]) { --_esp-page-main-track: minmax( var(--_esp-page-main-min-width), var(--_esp-page-resolved-max-width) ); } :host([kind=\"full\"]:not([data-main-max-configured])[flyout-open]), :host([kind=\"full\"]:not([data-main-max-configured])[preview-reclaiming]), :host([kind=\"site\"][flyout-open]), :host([kind=\"site\"][preview-reclaiming]) { --_esp-page-main-track: minmax(var(--_esp-page-main-min-width), 1fr); } /* Deliberate ADR-011 exception: like the esp-menu drawer (same 50em threshold), the flyout's overlay rung is a genuinely viewport-level decision — below it the flyout leaves the grid for a fixed drawer, so the gutter must release the minimum it was reserving. */ @media (max-width: 50em) { :host([flyout-open]) { --_esp-page-flyout-min: 0px; } :host([preview-reclaiming]) { --_esp-page-preview-min: 0px; } :host([flyout-open]), :host([preview-reclaiming]) { --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width)); } :host([kind=\"full\"]:not([data-main-max-configured])[flyout-open]), :host([kind=\"full\"]:not([data-main-max-configured])[preview-reclaiming]), :host([kind=\"site\"][flyout-open]), :host([kind=\"site\"][preview-reclaiming]) { --_esp-page-main-track: 1fr; } .esp-page > .esp-page-preview-space, .esp-page > .esp-page-workspace-resize-handles { display: none; } } /* A forced mode=\"overlay\" flyout is a fixed drawer at any viewport width, so its aside needs the same above-the-header hoist the sub-50em media rule gives the auto-mode drawer — without this the desktop drawer paints beneath the header (aside z 5 vs header z 20). Keyed off the flyout-overlay-open state attribute maintained by syncFlyoutState. */ :host([flyout-overlay-open]) .esp-page > div.esp-page-flyout { z-index: var(--esp-flyout-z-index, 3000); } /* A nested page's fixed drawer still participates in this page's main stacking context. Raise that complete context while the descendant modal is open so the drawer and vellum paint above this page's header instead of trapping their close control beneath it. */ :host([descendant-flyout-overlay-open]) .esp-page > div.esp-page-main { z-index: var(--esp-flyout-z-index, 3000); overflow: visible; } /* Trigger-anchored panels belong to the same document flow as their initiator. BiDirectionalStickyController can keep updating the wrapper's inline top, but position: static deliberately makes it inert until the anchored panel closes. */ :host([flyout-anchored]:not([flyout-full-height])) .esp-page > div.esp-page-flyout > .sticky-wrapper { position: static; } /* Full-document help owns the visible block-size rather than following one field. Span header through footer so the page footer cannot push a viewport-height panel out of view at the document boundary; the sticky controller pins this presentation to the viewport top. */ :host([flyout-full-height]) .esp-page > div.esp-page-flyout { grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 2); } /* Anchored help connects back to its trigger across a visible preview. Raise only the sized help wrapper above the preview surface; the bridge itself is non-interactive inside esp-flyout. */ :host([flyout-anchored][preview-visible]) .esp-page > div.esp-page-flyout { z-index: calc(var(--esp-page-header-z-index, 20) + 2); } slot[name=\"flyout\"]::slotted(esp-flyout) { --_esp-flyout-used-width: var(--_esp-page-flyout-used-width); --_esp-flyout-preview-bridge-width: 0px; --_esp-flyout-preview-anchor-display: none; } :host([preview-visible]) slot[name=\"flyout\"]::slotted(esp-flyout) { --_esp-flyout-preview-bridge-width: var(--_esp-page-preview-used-width); --_esp-flyout-preview-anchor-display: block; } /* Flyout surface-match contract. A slotted esp-flyout with match-surface lifts its trailing edge with the surface's edge shadow, so the panel reads as a raised peer of the content surface rather than the shadowless tear-off. The leading edge keeps its perforation (the border is not overridden) and casts no shadow, so it stays attached at the tear line instead of floating over the content it flies out from. Opt-in and page-scoped: a standalone flyout has no surface to match and is unaffected. */ slot[name=\"flyout\"]::slotted(esp-flyout[match-surface]) { --esp-flyout-shadow: var(--_esp-page-surface-edge-shadow); } /* Header alignment contract. Published on the slotted esp-header (not :host) so it never shadows an inherited or author override and only the header-slot header adopts it — see the host-token-defaults architecture rule and ADR-005. max-width is the resolved cap; lead is the fraction of surplus placed before the content (0 = start, .5 = center, 1 = end). */ slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: var(--_esp-page-resolved-max-width); --esp-header-content-lead: 0; } :host([align=\"center\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-lead: 0.5; } :host([align=\"end\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-lead: 1; } /* full has no cap; publish 100% (not none) so the header contract calc resolves to zero surplus and leaves the header full-bleed. */ :host([kind=\"full\"]:not([data-main-max-configured])) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: 100%; } /* Footer alignment mirrors the header behavior with footer-owned contract names. The full-bleed footer paints its own background; only its internal content adopts the page's cap and lead fraction. */ slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: var(--_esp-page-resolved-max-width); --esp-footer-content-lead: 0; } :host([align=\"center\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-lead: 0.5; } :host([align=\"end\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-lead: 1; } :host([kind=\"full\"]:not([data-main-max-configured])) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: 100%; } /* Site: bar content aligns with the section wells, not a main cap. One public token governs the header, the footer, and every esp-section well, and the well is centered — declared after the align lead rules so the centered site column wins on order. */ :host([kind=\"site\"]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: var(--esp-page-well-max-width, 72rem); --esp-header-content-lead: 0.5; } :host([kind=\"site\"]) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: var(--esp-page-well-max-width, 72rem); --esp-footer-content-lead: 0.5; } /* Contained shell: the header and footer ride the surface instead of the full viewport, so the whole page reads as one band on the canvas. Only their column placement changes — the full-height canvas and surface layers already do the rest. */ :host([contained]) .esp-page > div.esp-page-top, :host([contained]) .esp-page > div.esp-page-footer { grid-column: surface; } /* On the surface the bar already spans the content width, so the header fills it (no content padding) and drops its own shadow — the continuous surface edge shadow does the framing. */ :host([contained]) slot[name=\"header\"]::slotted(esp-header) { --esp-header-shadow: none; } /* The 100% contract belongs to the capped kinds, where the surface column IS the content width. A contained site keeps the shared well column (ESP0174) — sections and chrome must not split columns just because the shell is contained. */ :host([contained]:not([kind=\"site\"])) slot[name=\"header\"]::slotted(esp-header) { --esp-header-content-max-width: 100%; } :host([contained]:not([kind=\"site\"])) slot[name=\"footer\"]::slotted(esp-footer) { --esp-footer-content-max-width: 100%; } :host([kind=\"narrow\"]) .esp-page > div.esp-page-main { /* The golden reading measure, from the shared token (ESP0174); 66ch remains the fallback and the default emission. */ > ::slotted(*) { max-inline-size: var(--esp-measure, 66ch); } } #dialog-drop-zone { z-index: 4000; position: absolute; } :host([preview-visible]) .esp-page > div.esp-page-preview-space > .esp-page-preview { display: block; } :host([workspace-resizable][preview-visible]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle, :host([workspace-resizable][flyout-open]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle { display: block; } :host([workspace-resizable]:not([data-workspace-resize-ready])) .esp-page > .esp-page-workspace-resize-handles { display: none; } :host([workspace-resizable][data-workspace-trailing-edge-exposed]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle, :host([workspace-resizable][data-workspace-position-held]:not([flyout-overlay-open])) .esp-page > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle { display: block; } /* Pointer-owned resizing controls the logical leading gutter. It stays fixed for zero-sum pane trades and yields as an outward drag consumes centered outside canvas, keeping the active separator under the pointer in both cases. On release JS moves this pixel track to the aligned target; the normal grid transition supplies the glide before the intrinsic fr gutter contract resumes. */ :host([data-workspace-position-held]) { --_esp-page-gutter-left: var(--_esp-page-resize-leading-gutter-width, 0px); --_esp-page-gutter-right: 1fr; } :host([data-workspace-resizing]) { cursor: col-resize; user-select: none; } /* The grid-track glide that makes programmatic open/close feel animated reads as cursor lag while a pointer owns the seam, and a mid-glide grid feeds stale geometry into the clamp ranges of the next keyboard step. Track changes must be immediate for the whole resize session, pointer or keyboard. */ :host([data-workspace-resizing]) .esp-page, :host([data-workspace-keyboard-adjusting]) .esp-page { transition: none; } /* The linked menu switches its rail to a fixed drawer, but light-DOM menu content can still contribute an intrinsic width to the page's sidebar track. Collapse the owning aside only after the validated header/menu handshake is active, so unmatched navigation remains visible and reachable. */ :host([data-preview-navigation-collapsed]) .esp-page > aside.esp-page-left { inline-size: 0; min-inline-size: 0; } :host([data-preview-measuring]) .esp-page { transition: none; } /* New preview layouts are validated against visible geometry before presentation. Keep that candidate surface non-visible so a rejected measurement can never flash on screen. */ :host([data-preview-validating]) .esp-page-preview { visibility: hidden; } .esp-page { /* dvh keeps the shell within the visible mobile viewport; 100vh is the fallback for browsers without dvh (dvh === vh on desktop). */ min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: [full-start canvas-left-start] var(--_esp-page-gutter-left) [canvas-left-end surface-start left-start] min-content [left-end main-start] var(--_esp-page-main-track) [main-end right-start] min-content [right-end surface-end canvas-right-start flyout-start] var(--_esp-page-workspace-track) [flyout-end] var(--_esp-page-gutter-right) [canvas-right-end full-end]; /* Animate the flyout claiming/releasing its track (and the gutter rebalance) via grid track interpolation where supported; elsewhere the modes still apply, just without the glide. Keep this 0.25s duration synchronized with WORKSPACE_RECENTER_DURATION in workspace-resize-session.ts. */ transition: grid-template-columns 0.25s ease; grid-template-rows: [top-start] min-content [top-end content-start] 1fr [content-end footer-start] min-content [footer-end]; overflow-x: clip; background: var(--esp-page-background, var(--esp-color-background)); line-height: 1.5; font-family: var( --_esp-font-body-effective, var(--esp-font-body, var(--_esp-font-body-fallback)) ); font-size: var(--esp-type-normal); color: var(--esp-color-text); position: relative; &:before { content: \" \"; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: var(--esp-page-background-image-opacity, 1); background-image: var(--esp-page-background-image, none); z-index: 1; } > div.esp-page-top { z-index: var(--esp-page-header-z-index, 20); grid-column: full; grid-row: top; position: relative; /* The header spans every column, so without inline-size containment its content's min-content would be distributed into the aside tracks and inflate them below the cap (the asides would never collapse). Contain it like the main well so it takes its width from the grid, not the grid from it. */ contain: inline-size; } /* Sidebar containers — act as the \"track\" for sticky positioning */ aside.esp-page-left, aside.esp-page-right { z-index: 5; grid-row: content; position: relative; /* No explicit height — grid stretch fills the 1fr row, and the aside's bottom edge constrains sticky children. */ } > aside.esp-page-left { grid-column: left; } > div.esp-page-main { z-index: 5; grid-column: main; grid-row: content; position: relative; overflow: hidden; /* The main well's own background. Defaults to transparent, so the well shows the page background exactly as before; set it to give the content well a distinct card color, or leave it transparent (with --esp-page-surface-shadow: none) for content that floats directly on the page/canvas. */ background: var(--esp-page-main-background, transparent); /* The cap now lives in the main track (minmax(0, cap)); the element fills its column. contain: inline-size still holds because the track gives a definite inline size. */ contain: inline-size; } > aside.esp-page-right { grid-column: right; } /* A neutral div, unlike the left/right asides: the slotted esp-flyout is itself the complementary landmark, and an aside wrapper would nest a second, empty landmark around it. */ > div.esp-page-flyout { /* Sits after preview inside the exact auxiliary track and sizes to the allocated help width. Outer surplus remains in the following gutter rather than under an empty stretched wrapper. */ grid-column: flyout; justify-self: start; grid-row: content; z-index: 5; position: relative; inline-size: var(--_esp-page-flyout-used-width); min-inline-size: 0; margin-inline-start: var(--_esp-page-preview-used-width); /* In the drawer rung the fixed esp-flyout paints inside this wrapper's stacking context, so the wrapper itself must rise above the header (z 20) while staying below the dialog drop zone (4000). Uses the same token as the drawer — set it on the page (or higher) to move both together. */ @media (max-width: 50em) { z-index: var(--esp-flyout-z-index, 3000); } } /* Preview begins at the surface edge and help is offset after its resolved width, producing the logical order main → preview → help inside their exact shared auxiliary track. */ > div.esp-page-preview-space { grid-column: flyout; grid-row: content; z-index: 4; position: relative; min-inline-size: 0; > .esp-page-preview { display: none; box-sizing: border-box; inline-size: var(--_esp-page-preview-used-width); position: relative; background: var( --esp-page-preview-background, var(--esp-page-main-background, var(--esp-page-background, var(--esp-color-background))) ); border-inline-start: var(--esp-page-preview-border, 1px dotted var(--esp-color-border)); box-shadow: var(--esp-page-preview-shadow, var(--_esp-page-surface-edge-shadow)); } } /* A transparent interaction layer keeps the complete hit target above main, preview, and anchored help without raising either painted surface (which would hide the help bridge). */ > div.esp-page-workspace-resize-handles { grid-column: flyout; grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 3); position: relative; min-inline-size: 0; pointer-events: none; } > div.esp-page-workspace-resize-handles > .esp-page-workspace-resize-handle { display: none; box-sizing: border-box; position: absolute; inset-block: 0; z-index: 3; inline-size: var(--esp-page-resize-handle-hit-size, 2.75rem); margin-inline-start: calc(-0.5 * var(--esp-page-resize-handle-hit-size, 2.75rem)); border: 0; outline: 0; background: transparent; cursor: col-resize; pointer-events: auto; touch-action: none; /* The target spans the seam so it remains reachable during document scroll. Focus draws a dashed line along the seam itself — the visible height of the dotted tear-off edge, capped at one viewport — kept in view by sticky positioning while the page scrolls. */ &::after { content: \"\"; display: block; position: sticky; inset-block-start: 0; box-sizing: border-box; inline-size: 0; margin-inline: auto; block-size: 100dvh; max-block-size: 100%; pointer-events: none; } &:focus-visible::after { border-inline-start: var( --esp-page-resize-focus-outline, 2px dashed var(--esp-color-link) ); /* Glow in the line's own color so the focused seam reads as one deliberate highlight rather than a neutral drop shadow. */ box-shadow: var(--esp-page-resize-focus-shadow, 0 0 0.75rem var(--esp-color-link)); } } > div.esp-page-workspace-resize-handles > .esp-page-main-preview-resize-handle { inset-inline-start: 0; } > div.esp-page-workspace-resize-handles > .esp-page-preview-flyout-resize-handle { inset-inline-start: var(--_esp-page-preview-used-width); } > div.esp-page-workspace-resize-handles > .esp-page-workspace-end-resize-handle { inset-inline-start: calc( var(--_esp-page-preview-used-width) + var(--_esp-page-flyout-used-width) ); } /* Keep token-sized probes outside the width-constrained gutter. If they lived inside a zero-width preview space, layout would clamp their rectangles to zero before JS could decide whether the reclaim rung should be activated. */ > .esp-page-preview-min-width-probe, > .esp-page-preview-default-width-probe, > .esp-page-preview-max-width-probe, > .esp-page-flyout-min-width-probe, > .esp-page-flyout-default-width-probe, > .esp-page-flyout-max-width-probe, > .esp-page-main-min-width-probe, > .esp-page-main-configured-max-width-probe, > .esp-page-main-max-width-probe, > .esp-page-resize-step-probe, > .esp-page-resize-large-step-probe { position: absolute; block-size: 0; visibility: hidden; pointer-events: none; contain: strict; } > .esp-page-preview-min-width-probe { inline-size: var(--_esp-page-preview-resolved-min-width); } > .esp-page-preview-max-width-probe { inline-size: var(--_esp-page-preview-resolved-max-width); } > .esp-page-preview-default-width-probe { inline-size: var(--esp-page-preview-default-width, 0px); } > .esp-page-flyout-min-width-probe { inline-size: var(--_esp-page-flyout-resolved-min-width); } > .esp-page-flyout-max-width-probe { inline-size: var(--_esp-page-flyout-resolved-max-width); } > .esp-page-flyout-default-width-probe { inline-size: var(--esp-page-flyout-default-width, 0px); } > .esp-page-main-min-width-probe { inline-size: var(--_esp-page-main-min-width); } > .esp-page-main-configured-max-width-probe { inline-size: var(--esp-page-main-max-width, 0px); } > .esp-page-main-max-width-probe { inline-size: var(--_esp-page-resolved-max-width); } > .esp-page-resize-step-probe { inline-size: var(--esp-page-resize-step, 1rem); } > .esp-page-resize-large-step-probe { inline-size: var(--esp-page-resize-large-step, 4rem); } /* Canvas: the outer gutter regions promoted to a styleable layer. They only have width once the viewport exceeds the cap, so with the transparent defaults they are invisible and narrow pages are unchanged. Painted below the content (z-index 5) and below the surface shadow. */ > .esp-page-canvas { /* Full height: the canvas runs top-to-bottom. In the default full-bleed chrome the header/footer span the gutters and cover it there, so only the content-band gutters show; in contained mode the header/footer sit on the surface and the canvas shows full height beside them. */ grid-row: top-start / footer-end; z-index: 1; position: relative; pointer-events: none; background-color: var(--esp-page-canvas-background, transparent); /* Image layer mirrors the page background-image knobs: a separate layer so its opacity does not fade the color. */ &::before { content: \"\"; position: absolute; inset: 0; background-image: var(--esp-page-canvas-background-image, none); opacity: var(--esp-page-canvas-background-image-opacity, 1); } } > .esp-page-canvas--left { grid-column: canvas-left; } > .esp-page-canvas--right { /* The canvas spans both the auxiliary workspace and the independent outer gutter beneath it. */ grid-column: canvas-right; } /* Surface: a transparent backdrop spanning the surface cluster (left aside + main + right aside). It carries the surface edge shadow (on by default) and an optional hairline border. The shadow casts outward into the gutters; when there are no gutters the surface fills the viewport and overflow-x: clip on .esp-page trims the shadow away — so it is visible only above the cap with no container query needed. */ > .esp-page-surface { grid-column: surface; /* Full height so the edge shadow is one continuous line from the header through the content to the footer — no fade at the region joins. */ grid-row: top-start / footer-end; z-index: 2; pointer-events: none; box-shadow: var(--_esp-page-surface-shadow); border-inline: var(--_esp-page-surface-border); } /* Internal wrapper manipulated by BiDirectionalStickyController */ .sticky-wrapper { will-change: top; display: block; width: 100%; position: sticky; top: 0; } > div.esp-page-footer { grid-column: full; grid-row: footer; z-index: 10; background: var(--esp-page-background, var(--esp-color-background)); /* Spans every column; contain it so its content does not inflate the aside tracks (see the header note above). */ contain: inline-size; } &.sticky-header { slot[name=\"header\"]::slotted(esp-header), slot[name=\"sidebar\"]::slotted(esp-menu), slot[name=\"right\"]::slotted(esp-menu) { --esp-menu-top-offset: var(--_esp-page-fixed-header-offset); } > div.esp-page-top { position: sticky; top: var(--esp-page-sticky-header-top, 0); } } &.fixed-header { slot[name=\"header\"]::slotted(esp-header), slot[name=\"sidebar\"]::slotted(esp-menu), slot[name=\"right\"]::slotted(esp-menu) { --esp-menu-top-offset: var(--_esp-page-fixed-header-offset); } > div.esp-page-top { position: fixed; top: 0; left: 0; right: 0; } > div.esp-page-main, > aside.esp-page-left, > aside.esp-page-right, > div.esp-page-flyout, > .esp-page-surface, > .esp-page-canvas { margin-top: var(--_esp-page-fixed-header-offset); } } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font-family: inherit; font-size: inherit; } /* Make sure text areas without a rows attribute are not tiny */ textarea:not([rows]) { min-height: 10em; } /* Anything that has been anchored to should have extra scroll margin */ :target { scroll-margin-block: 5ex; } } .esp-page:has(esp-dialog[is-open=\"true\"]) { overflow: hidden; } /* Main and preview are additive surfaces. Once preview owns the trailing edge, move elevation there so no shadow appears at the internal join; the surface resumes its normal frame when preview is hidden. */ :host([preview-visible]) .esp-page > .esp-page-surface { box-shadow: none; } /* The preview's outer grid item and landmark span the complete page so the sticky wrapper's containing block has enough travel to remain pinned throughout a tall document. Its dynamic-viewport block size and vertical overflow keep its scroll position independent from the main document. It paints above full-bleed header chrome only in the preview's negotiated gutter track; overlay flyouts still take precedence by hiding preview presentation. */ .esp-page > div.esp-page-preview-space { grid-row: top-start / footer-end; z-index: calc(var(--esp-page-header-z-index, 20) + 1); pointer-events: none; > .esp-page-preview { position: absolute; inset-block: 0; inset-inline-start: 0; pointer-events: auto; > .sticky-wrapper { block-size: 100vh; block-size: 100dvh; overflow-y: auto; /* Scroll preview first, then hand wheel/trackpad motion back to the document at either boundary (or when no overflow exists). */ overscroll-behavior-y: auto; } } } @media (prefers-reduced-motion: reduce) { .esp-page { transition: none; } } `, ]"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "pageStyles",
+          "declaration": {
+            "name": "pageStyles",
+            "module": "dist/page/esp-page.styles.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/page/esp-page.js",
@@ -49478,49 +49715,6 @@
               "privacy": "private",
               "default": "false"
             },
-            {
-              "kind": "field",
-              "name": "resizeSession",
-              "type": {
-                "text": "WorkspaceResizeSession | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "workspaceKeyboardSettlementTimer",
-              "type": {
-                "text": "ReturnType<typeof setTimeout> | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "workspaceRecenteringFrame",
-              "privacy": "private",
-              "default": "new RafThrottle(() => this.applyWorkspaceRecentering())"
-            },
-            {
-              "kind": "field",
-              "name": "pendingRecenterLeading",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "default": "0",
-              "description": "Leading gutter the pending recentering frame should settle on."
-            },
-            {
-              "kind": "field",
-              "name": "workspaceRecenteringTimer",
-              "type": {
-                "text": "ReturnType<typeof setTimeout> | null"
-              },
-              "privacy": "private",
-              "default": "null"
-            },
             {
               "kind": "field",
               "name": "footerWrapperIsLandmark",
@@ -49685,28 +49879,45 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "workspaceResizeController",
+              "type": {
+                "text": "WorkspaceResizeSessionController | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "workspaceResizeControllerLoad",
+              "type": {
+                "text": "Promise<void> | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "method",
-              "name": "scheduleWorkspaceSettlement",
+              "name": "createWorkspaceResizeHost",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "WorkspaceResizeHost"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "focusTarget",
-                  "default": "null",
-                  "type": {
-                    "text": "HTMLElement | null"
-                  }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "createWorkspaceResizeGeometry",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "WorkspaceGeometrySource"
                 }
-              ]
+              }
             },
             {
               "kind": "method",
-              "name": "clearWorkspaceKeyboardSettlementTimer",
+              "name": "ensureWorkspaceResizeController",
               "privacy": "private",
               "return": {
                 "type": {
@@ -49714,6 +49925,15 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "resizeSession",
+              "type": {
+                "text": "WorkspaceResizeState | null"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "finishWorkspaceKeyboardResize",
@@ -49732,7 +49952,7 @@
             },
             {
               "kind": "method",
-              "name": "deferWorkspaceKeyboardSettlement",
+              "name": "endWorkspaceResize",
               "privacy": "private",
               "return": {
                 "type": {
@@ -49742,7 +49962,7 @@
             },
             {
               "kind": "method",
-              "name": "suspendPreviewLayoutForWorkspaceResize",
+              "name": "clearWorkspaceRecenteringState",
               "privacy": "private",
               "return": {
                 "type": {
@@ -49750,6 +49970,31 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizePointerDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizePointerMove",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizePointerEnd",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizeBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizeKeyDown",
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "setPreviewLayoutState",
@@ -49802,36 +50047,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "clampWidth",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "minimum",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "maximum",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "visiblePageInlineBounds",
@@ -49922,66 +50137,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "workspaceWidthCapacityForAvailable",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "WorkspaceWidthCapacity"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "availableWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "minMainWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "maxMainWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "workspaceTargetWidth",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "capacity",
-                  "type": {
-                    "text": "WorkspaceWidthCapacity"
-                  }
-                },
-                {
-                  "name": "minimumWorkspaceWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "preferredWorkspaceTargetWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "allocateWorkspaceWidths",
@@ -50280,217 +50435,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "applyWorkspaceResize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "separator",
-                  "type": {
-                    "text": "PageWorkspaceSeparator"
-                  }
-                },
-                {
-                  "name": "physicalDelta",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "source",
-                  "type": {
-                    "text": "PageWorkspaceResizeSource"
-                  }
-                },
-                {
-                  "name": "startPreviewWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "startFlyoutWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "startMainWidth",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "startNavigationAllowance",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "startOuterGrowthCapacity",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "trailingExpansionScale",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "direction",
-                  "type": {
-                    "text": "1 | -1"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "appliedSeparatorInlineDelta",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "session",
-                  "type": {
-                    "text": "WorkspaceResizeSession"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "clearWorkspaceRecenteringState",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "holdWorkspacePosition",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "trackWorkspaceResizePointer",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "session",
-                  "type": {
-                    "text": "WorkspaceResizeSession"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "seedWorkspaceResizeLeadingGutter",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "session",
-                  "type": {
-                    "text": "WorkspaceResizeSession"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "finishWorkspaceRecentering",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "beginWorkspaceRecentering",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "applyWorkspaceRecentering",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "onWorkspaceResizePointerDown",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "onWorkspaceResizePointerMove",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "onWorkspaceResizePointerEnd",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "endWorkspaceResize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "onWorkspaceResizeBlur",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "onWorkspaceResizeKeyDown",
-              "privacy": "private"
-            },
             {
               "kind": "method",
               "name": "previewFitsWithinPage",
@@ -51015,6 +50959,16 @@
               ],
               "description": "Inject an element into a div with the highest z-index so dialogs are\nrendered on top of everything else."
             },
+            {
+              "kind": "method",
+              "name": "getUpdateComplete",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "Promise<boolean>"
+                }
+              }
+            },
             {
               "kind": "field",
               "name": "warnedSiteRails",
@@ -51968,10 +51922,510 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/page/workspace-geometry.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "workspaceWidthCapacityForAvailable",
+          "return": {
+            "type": {
+              "text": "WorkspaceWidthCapacity"
+            }
+          },
+          "parameters": [
+            {
+              "name": "availableWidth",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "minMainWidth",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "maxMainWidth",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "workspaceTargetWidth",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "capacity",
+              "type": {
+                "text": "WorkspaceWidthCapacity"
+              }
+            },
+            {
+              "name": "minimumWorkspaceWidth",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "preferredWorkspaceTargetWidth",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "clampWorkspaceWidth",
+          "return": {
+            "type": {
+              "text": "number"
+            }
+          },
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "minimum",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "maximum",
+              "type": {
+                "text": "number"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "workspaceWidthCapacityForAvailable",
+          "declaration": {
+            "name": "workspaceWidthCapacityForAvailable",
+            "module": "dist/page/workspace-geometry.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "workspaceTargetWidth",
+          "declaration": {
+            "name": "workspaceTargetWidth",
+            "module": "dist/page/workspace-geometry.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "clampWorkspaceWidth",
+          "declaration": {
+            "name": "clampWorkspaceWidth",
+            "module": "dist/page/workspace-geometry.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/page/workspace-resize-session.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "WorkspaceResizeSessionController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "resizeSession",
+              "type": {
+                "text": "WorkspaceResizeState | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "workspaceKeyboardSettlementTimer",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "workspaceRecenteringFrame",
+              "type": {
+                "text": "RafThrottle"
+              },
+              "privacy": "private",
+              "default": "new RafThrottle(() => this.applyWorkspaceRecentering())"
+            },
+            {
+              "kind": "field",
+              "name": "pendingRecenterLeading",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "workspaceRecenteringTimer",
+              "type": {
+                "text": "ReturnType<typeof setTimeout> | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "element",
+              "type": {
+                "text": "HTMLElement & ReactiveControllerHost"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "currentSession",
+              "type": {
+                "text": "WorkspaceResizeState | null"
+              },
+              "privacy": "public",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "scheduleWorkspaceSettlement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "focusTarget",
+                  "default": "null",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "clearWorkspaceKeyboardSettlementTimer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "finishWorkspaceKeyboardResize",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "settle",
+                  "default": "true"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "deferWorkspaceKeyboardSettlement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "suspendPreviewLayoutForWorkspaceResize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyWorkspaceResize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "separator",
+                  "type": {
+                    "text": "PageWorkspaceSeparator"
+                  }
+                },
+                {
+                  "name": "physicalDelta",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "source",
+                  "type": {
+                    "text": "PageWorkspaceResizeSource"
+                  }
+                },
+                {
+                  "name": "startPreviewWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "startFlyoutWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "startMainWidth",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "startNavigationAllowance",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "startOuterGrowthCapacity",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "trailingExpansionScale",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "1 | -1"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "appliedSeparatorInlineDelta",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "session",
+                  "type": {
+                    "text": "WorkspaceResizeState"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "clearWorkspaceRecenteringState",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "holdWorkspacePosition",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "trackWorkspaceResizePointer",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "session",
+                  "type": {
+                    "text": "WorkspaceResizeState"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "seedWorkspaceResizeLeadingGutter",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "session",
+                  "type": {
+                    "text": "WorkspaceResizeState"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "finishWorkspaceRecentering",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "beginWorkspaceRecentering",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "applyWorkspaceRecentering",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizePointerDown",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizePointerMove",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizePointerEnd",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "endWorkspaceResize",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizeBlur",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "onWorkspaceResizeKeyDown",
+              "privacy": "public"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "WorkspaceResizeSessionController",
+          "declaration": {
+            "name": "WorkspaceResizeSessionController",
+            "module": "dist/page/workspace-resize-session.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/page/workspace-width.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "PREVIEW_LAYOUT_EPSILON",
+          "type": {
+            "text": "number"
+          },
+          "default": "1",
+          "description": "Shared tolerance for browser layout measurements that differ by subpixels."
+        },
         {
           "kind": "class",
           "description": "An inclusive width range in CSS pixels, guaranteed to be well-formed:\n`min` is never negative and `max` is never below `min`.",
@@ -52156,6 +52610,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "PREVIEW_LAYOUT_EPSILON",
+          "declaration": {
+            "name": "PREVIEW_LAYOUT_EPSILON",
+            "module": "dist/page/workspace-width.js"
+          }
+        },
         {
           "kind": "js",
           "name": "WidthRange",
@@ -57788,6 +58250,26 @@
               "default": "null",
               "description": "The pool array `pickItem` is about to install. A pick replaces the\npool with a clone of the SAME items purely to trigger rendering;\n`updated()` recognizes the marked clone and skips the resize /\nhighlight flow for it — pickItem owns highlight and scroll for its\nown pick, while every consumer-supplied pool update (new items, or\nthe same items with a different selection) keeps the full flow."
             },
+            {
+              "kind": "field",
+              "name": "internalPoolFingerprint",
+              "type": {
+                "text": "string[] | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "Selection fingerprint for the clone above. A parent may echo the picked\npool synchronously, coalescing both assignments into one Lit update; the\nfinal array then loses clone identity even though it carries the same\ninternal pick. The fingerprint preserves that marker across coalescing."
+            },
+            {
+              "kind": "field",
+              "name": "internalPickScrollTop",
+              "type": {
+                "text": "number | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "Scroll position owned by the current internal pick and its parent echo."
+            },
             {
               "kind": "field",
               "name": "lastPoolFingerprint",
@@ -64656,6 +65138,22 @@
           "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",
           "cssProperties": [
+            {
+              "description": "Always-emitted family for body and UI text. Defaults to `system-ui, sans-serif` when `fontBody` is omitted or empty.",
+              "name": "--esp-font-body"
+            },
+            {
+              "description": "Consumer-authored heading family. Emitted only when configured; heading recipes otherwise fall back to `--esp-font-body`.",
+              "name": "--esp-font-headings"
+            },
+            {
+              "description": "Consumer-authored brand family. Emitted only when configured; brand recipes otherwise fall back through headings to `--esp-font-body`.",
+              "name": "--esp-font-brand"
+            },
+            {
+              "description": "Family for code and monospace text. Defaults to `monospace`.",
+              "name": "--esp-font-monospace"
+            },
             {
               "description": "First categorical data-series color.",
               "name": "--esp-color-series-1"
@@ -65145,7 +65643,7 @@
               },
               "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.",
+              "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.\nStatic generators should compile the resolved light/dark themes with\n`compileFontPlan()`, embed its CSS in the page head, and set this policy\nto `none`; the predeclared target and metric-matched fallback faces then\nparticipate in first layout without any runtime catalog request.",
               "attribute": "google-font-loading"
             },
             {
@@ -65289,26 +65787,6 @@
               "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": "extractFamily",
-              "privacy": "private",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "cssValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Extract the bare font family name from a CSS `font-family`\nvalue like `\"Roboto\", sans-serif` → `Roboto`."
-            },
             {
               "kind": "method",
               "name": "injectGoogleFontLink",
@@ -65470,7 +65948,7 @@
               "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; } `",
+              "default": "` /* ── Base typography ──────────────────────────────────── */ esp-root { font-family: var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif)); 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-effective, var(--esp-font-body, system-ui, sans-serif)); } /* ── 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-effective, var(--esp-font-body, system-ui, sans-serif)); 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-effective, var( --esp-font-headings, var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif)) ) ); 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-effective, var(--esp-font-monospace, 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."
             }
           ],
@@ -65517,7 +65995,7 @@
                 "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.",
+              "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.\nStatic generators should compile the resolved light/dark themes with\n`compileFontPlan()`, embed its CSS in the page head, and set this policy\nto `none`; the predeclared target and metric-matched fallback faces then\nparticipate in first layout without any runtime catalog request.",
               "fieldName": "googleFontLoading"
             },
             {
@@ -72778,6 +73256,31 @@
           ],
           "description": "Normalize a CSS `font-weight` keyword to its numeric equivalent.\n\n- `\"bold\"` → `\"700\"`\n- `\"normal\"` → `\"400\"`\n- Falsy / `undefined` → `defaultWeight`\n- Everything else passes through unchanged."
         },
+        {
+          "kind": "function",
+          "name": "normalizeFontFaceWeight",
+          "return": {
+            "type": {
+              "text": "number | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "weight",
+              "type": {
+                "text": "string | number | undefined"
+              }
+            },
+            {
+              "name": "defaultWeight",
+              "optional": true,
+              "type": {
+                "text": "string | number"
+              }
+            }
+          ],
+          "description": "Normalize a face weight to the numeric range accepted by Google Fonts and font plans."
+        },
         {
           "kind": "function",
           "name": "bestAvailableWeight",
@@ -72822,6 +73325,24 @@
           ],
           "description": "Extract the first family name from a CSS `font-family` string,\nstripping both single and double quotes and whitespace."
         },
+        {
+          "kind": "function",
+          "name": "isLocalFontFamily",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "family",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Whether a first-family name is a generic, platform, or conventional web-safe local face."
+        },
         {
           "kind": "function",
           "name": "getFallbackFont",
@@ -72839,6 +73360,93 @@
             }
           ],
           "description": "Return the generic CSS fallback for a Google Font category.\n\n- `\"serif\"` → `\"serif\"`\n- `\"monospace\"` → `\"monospace\"`\n- `\"handwriting\"` → `\"cursive\"`\n- Everything else (including `\"sans-serif\"`, `\"display\"`) →\n  `\"sans-serif\"`"
+        },
+        {
+          "kind": "variable",
+          "name": "RUNTIME_GOOGLE_FONT_OWNER_ATTR",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"data-esp-google-font-owner\""
+        },
+        {
+          "kind": "function",
+          "name": "googleFontStylesheetUrl",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "family",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "weight",
+              "optional": true,
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Build the canonical Google Fonts CSS2 URL used by roots and pickers."
+        },
+        {
+          "kind": "function",
+          "name": "syncRuntimeGoogleFontLink",
+          "return": {
+            "type": {
+              "text": "HTMLLinkElement | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "RuntimeGoogleFontLinkOptions"
+              }
+            }
+          ],
+          "description": "Create, update, or remove one document-global Google Fonts stylesheet link.\nThe caller owns only its stable key, so unrelated roots and picker instances\ncannot replace or clean up one another's links."
+        },
+        {
+          "kind": "function",
+          "name": "removeRuntimeGoogleFontLink",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "owner",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Remove one shared runtime font link by its exact owner key."
+        },
+        {
+          "kind": "function",
+          "name": "removeRuntimeGoogleFontLinks",
+          "return": {
+            "type": {
+              "text": "void"
+            }
+          },
+          "parameters": [
+            {
+              "name": "ownerPrefix",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Remove all shared runtime font links whose owner begins with `ownerPrefix`."
         }
       ],
       "exports": [
@@ -72866,6 +73474,14 @@
             "module": "dist/shared/font-helpers.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "normalizeFontFaceWeight",
+          "declaration": {
+            "name": "normalizeFontFaceWeight",
+            "module": "dist/shared/font-helpers.js"
+          }
+        },
         {
           "kind": "js",
           "name": "bestAvailableWeight",
@@ -72882,6 +73498,14 @@
             "module": "dist/shared/font-helpers.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "isLocalFontFamily",
+          "declaration": {
+            "name": "isLocalFontFamily",
+            "module": "dist/shared/font-helpers.js"
+          }
+        },
         {
           "kind": "js",
           "name": "getFallbackFont",
@@ -72889,6 +73513,195 @@
             "name": "getFallbackFont",
             "module": "dist/shared/font-helpers.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "RUNTIME_GOOGLE_FONT_OWNER_ATTR",
+          "declaration": {
+            "name": "RUNTIME_GOOGLE_FONT_OWNER_ATTR",
+            "module": "dist/shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "googleFontStylesheetUrl",
+          "declaration": {
+            "name": "googleFontStylesheetUrl",
+            "module": "dist/shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "syncRuntimeGoogleFontLink",
+          "declaration": {
+            "name": "syncRuntimeGoogleFontLink",
+            "module": "dist/shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "removeRuntimeGoogleFontLink",
+          "declaration": {
+            "name": "removeRuntimeGoogleFontLink",
+            "module": "dist/shared/font-helpers.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "removeRuntimeGoogleFontLinks",
+          "declaration": {
+            "name": "removeRuntimeGoogleFontLinks",
+            "module": "dist/shared/font-helpers.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/shared/font-plan.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "fontFaceRequestKey",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "family",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "weight",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "style",
+              "default": "\"normal\"",
+              "type": {
+                "text": "FontPlanStyle"
+              }
+            }
+          ],
+          "description": "Return the stable source-map key for a requested target face."
+        },
+        {
+          "kind": "function",
+          "name": "fontFallbackBaseIndexes",
+          "return": {
+            "type": {
+              "text": "readonly number[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "category",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Return the fallback base indexes used for one Google Fonts category."
+        },
+        {
+          "kind": "function",
+          "name": "fontFallbackAliases",
+          "return": {
+            "type": {
+              "text": "string[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "family",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "weight",
+              "type": {
+                "text": "string | number"
+              }
+            },
+            {
+              "name": "category",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "style",
+              "default": "\"normal\"",
+              "type": {
+                "text": "FontPlanStyle"
+              }
+            }
+          ],
+          "description": "Return the deterministic profile aliases a runtime font stack may reference\nwithout loading the build-time profile catalog in the browser."
+        },
+        {
+          "kind": "function",
+          "name": "compileFontPlan",
+          "return": {
+            "type": {
+              "text": "CompiledFontPlan"
+            }
+          },
+          "parameters": [
+            {
+              "name": "options",
+              "type": {
+                "text": "CompileFontPlanOptions"
+              }
+            }
+          ],
+          "description": "Compile a complete, first-paint font plan from two resolved themes.\n\nCall once without `sources` to discover `requests`, resolve those assets in\nthe host build, then call again with the keyed source map for final CSS."
+        },
+        {
+          "kind": "variable",
+          "name": "usesByKey",
+          "default": "new Map<string, CollectedUse>()"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "fontFaceRequestKey",
+          "declaration": {
+            "name": "fontFaceRequestKey",
+            "module": "dist/shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fontFallbackBaseIndexes",
+          "declaration": {
+            "name": "fontFallbackBaseIndexes",
+            "module": "dist/shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fontFallbackAliases",
+          "declaration": {
+            "name": "fontFallbackAliases",
+            "module": "dist/shared/font-plan.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "compileFontPlan",
+          "declaration": {
+            "name": "compileFontPlan",
+            "module": "dist/shared/font-plan.js"
+          }
         }
       ]
     },
@@ -74557,7 +75370,7 @@
           "type": {
             "text": "Readonly<Record<string, string>>"
           },
-          "default": "{ \"--esp-type-overline-font-size\": \"var(--esp-type-tiny)\", \"--esp-type-overline-font-weight\": \"var(--esp-font-weight-headings)\", \"--esp-type-overline-letter-spacing\": \"0.08em\", \"--esp-type-overline-text-transform\": \"uppercase\", \"--esp-type-label-font-size\": \"var(--esp-type-normal)\", \"--esp-type-label-font-weight\": \"var(--esp-font-weight-headings)\", \"--esp-type-label-letter-spacing\": \"0.01em\", \"--esp-type-lead-font-size\": \"var(--esp-type-medium)\", \"--esp-type-lead-font-weight\": \"var(--esp-font-weight-body)\", \"--esp-type-lead-letter-spacing\": \"normal\", \"--esp-type-caption-font-size\": \"var(--esp-type-small)\", \"--esp-type-caption-font-weight\": \"var(--esp-font-weight-body)\", \"--esp-type-caption-letter-spacing\": \"normal\", \"--esp-type-display-font-family\": \"var(--esp-font-headings)\", \"--esp-type-display-font-weight\": \"var(--esp-font-weight-headings)\", \"--esp-type-display-line-height\": \"1.1\", \"--esp-type-display-letter-spacing\": \"normal\", ...TYPE_ROLE_COLOR_PROPERTIES, }",
+          "default": "{ \"--esp-type-overline-font-size\": \"var(--esp-type-tiny)\", \"--esp-type-overline-font-weight\": \"var(--esp-font-weight-headings)\", \"--esp-type-overline-letter-spacing\": \"0.08em\", \"--esp-type-overline-text-transform\": \"uppercase\", \"--esp-type-label-font-size\": \"var(--esp-type-normal)\", \"--esp-type-label-font-weight\": \"var(--esp-font-weight-headings)\", \"--esp-type-label-letter-spacing\": \"0.01em\", \"--esp-type-lead-font-size\": \"var(--esp-type-medium)\", \"--esp-type-lead-font-weight\": \"var(--esp-font-weight-body)\", \"--esp-type-lead-letter-spacing\": \"normal\", \"--esp-type-caption-font-size\": \"var(--esp-type-small)\", \"--esp-type-caption-font-weight\": \"var(--esp-font-weight-body)\", \"--esp-type-caption-letter-spacing\": \"normal\", \"--esp-type-display-font-family\": \"var(--_esp-font-headings-effective, var(--esp-font-headings, var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif))))\", \"--esp-type-display-font-weight\": \"var(--esp-font-weight-headings)\", \"--esp-type-display-line-height\": \"1.1\", \"--esp-type-display-letter-spacing\": \"normal\", ...TYPE_ROLE_COLOR_PROPERTIES, }",
           "description": "Complete typography recipes for recurring content roles and display headings."
         },
         {
@@ -75575,6 +76388,24 @@
           "default": "{ background: { source: \"primary\", lightness: \"surface\" }, layer1: { source: \"primary\", lightness: \"raised1\" }, layer2: { source: \"primary\", lightness: \"raised2\" }, layer3: { source: \"primary\", lightness: \"raised3\" }, layer4: { source: \"primary\", lightness: \"raised4\" }, actionBackground: { source: \"primary\", lightness: \"raised3\" }, actionText: { source: \"primary\", lightness: \"ink\" }, border: { source: \"primary\", lightness: \"border\" }, shadow: { source: \"primary\", lightness: \"shadow\" }, text: { source: \"primary\", lightness: \"text\" }, typeOverline: { source: \"primary\", lightness: \"text\" }, typeLabel: { source: \"primary\", lightness: \"text\" }, typeLead: { source: \"primary\", lightness: \"text\" }, typeCaption: { source: \"primary\", lightness: \"text\" }, dangerText: { source: \"danger\", lightness: \"text\" }, headings: { source: \"primary\", lightness: \"muted\" }, headingsHover: { source: \"primary\", lightness: \"text\" }, link: { source: \"complementary\", lightness: \"accent\" }, linkHover: { source: \"complementary\", lightness: \"text\" }, linkHoverBg: { source: \"triadic-left\", lightness: \"raised2\" }, inputCaret: { source: \"triadic-right\", lightness: \"ink\" }, inputSelection: { source: \"complementary\", lightness: \"text\" }, inputSelectionBg: { source: \"triadic-left\", lightness: \"raised2\" }, }",
           "description": "Default semantic color mappings that match the existing CSS.\n\nEach entry tells the color engine which variant supplies the\nhue and which lightness key sets the perceived brightness."
         },
+        {
+          "kind": "variable",
+          "name": "DEFAULT_BODY_FONT_FAMILY",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"system-ui, sans-serif\"",
+          "description": "Built-in authored stack for body and UI text."
+        },
+        {
+          "kind": "variable",
+          "name": "DEFAULT_MONOSPACE_FONT_FAMILY",
+          "type": {
+            "text": "string"
+          },
+          "default": "\"monospace\"",
+          "description": "Built-in authored family for code and monospace text."
+        },
         {
           "kind": "variable",
           "name": "DEFAULT_LIGHT_THEME",
@@ -76041,6 +76872,22 @@
             "module": "dist/shared/theme.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "DEFAULT_BODY_FONT_FAMILY",
+          "declaration": {
+            "name": "DEFAULT_BODY_FONT_FAMILY",
+            "module": "dist/shared/theme.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DEFAULT_MONOSPACE_FONT_FAMILY",
+          "declaration": {
+            "name": "DEFAULT_MONOSPACE_FONT_FAMILY",
+            "module": "dist/shared/theme.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DEFAULT_LIGHT_THEME",
@@ -77716,7 +78563,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A compact, keyboard-accessible status icon that reveals explanatory\ncontent in an `esp-popover` on hover, focus, or tap.\n\n```html\n<esp-status-indicator\n  intent=\"warning\"\n  label=\"Image processing delayed\"\n  placement=\"right\">\n  The image is still queued. It will retry automatically.\n</esp-status-indicator>\n\n<esp-status-indicator intent=\"success\" label=\"Published\">\n  This page is live and visible to visitors.\n</esp-status-indicator>\n```\n\n### Chrome modes\n\nThe `chrome` attribute controls the chip treatment around the icon.\n`pill` (the default) renders the filled circular background, `outline`\nkeeps only the border, and `none` drops both — leaving just the\nintent-colored icon and its popover affordance. `chrome=\"none\"` is the\nright choice when the indicator sits inside dense metadata rows where\na full pill would feel heavy.\n\n```html\n<esp-box style=\"display: flex; gap: var(--esp-size-normal); align-items: center;\">\n  <esp-status-indicator intent=\"success\" label=\"Pill (default)\">\n    Pill chrome wraps the icon in a filled circle.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"outline\" intent=\"success\" label=\"Outline\">\n    Outline chrome keeps the border but drops the fill.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"none\" intent=\"success\" label=\"None\">\n    None drops the chrome entirely — just the intent-colored icon.\n  </esp-status-indicator>\n</esp-box>\n```\n\n### Wide chip with a non-square SVG\n\nThe built-in `icon` attribute pulls from the Espalier sprite, which is\nauthored for **square** glyphs at the chip's default size. When you\nneed a non-square mark — a file-type badge, a short token of text, a\npill of dimensions — slot your own SVG into the `icon` slot and size\nthe chip through the three CSS hooks: `--esp-status-indicator-width`,\n`--esp-status-indicator-height`, and `--esp-status-indicator-border-radius`.\n\nThe slotted SVG fills the chip, so give it a matching `viewBox` and\nuse `chrome=\"none\"` if you don't want the chip's pill background\nfighting your art.\n\n```html\n<style>\n  .file-type-indicator {\n    --esp-status-indicator-width: calc(var(--esp-size-big-to-large) * 2.5);\n    --esp-status-indicator-height: var(--esp-size-big-to-large);\n    --esp-status-indicator-border-radius: var(--esp-size-border-radius);\n    color: var(--esp-color-link);\n  }\n\n  .file-type-indicator svg text {\n    fill: var(--esp-color-background);\n    font-family: var(--esp-font-body);\n    font-size: 14px;\n    font-weight: 600;\n    text-anchor: middle;\n  }\n</style>\n\n<esp-status-indicator\n  class=\"file-type-indicator\"\n  chrome=\"none\"\n  label=\"Original file type\">\n  <svg slot=\"icon\" viewBox=\"0 0 72 32\" aria-hidden=\"true\">\n    <rect x=\"0\" y=\"0\" width=\"72\" height=\"32\" rx=\"6\" ry=\"6\" fill=\"currentColor\"/>\n    <text x=\"36\" y=\"21\">JPG</text>\n  </svg>\n  <strong>Original file type</strong>\n  <p>Uploaded as a JPEG; responsive variants are generated on demand.</p>\n</esp-status-indicator>\n```\n\n### Rich popover content\n\nThe default slot accepts any HTML, not just plain text. Small blocks\nof structured content — a heading, a list of values, a definition\nlist — render inside the popover and are clamped by\n`--esp-status-indicator-popover-max-width` (default `32ch`). Raise the\nhook when the content needs more room.\n\n```html\n<style>\n  .responsive-layers-indicator {\n    --esp-status-indicator-popover-max-width: 24rem;\n  }\n\n  .responsive-layers-indicator ul {\n    margin: var(--esp-size-tiny) 0 0;\n    padding-left: var(--esp-size-normal);\n  }\n</style>\n\n<esp-status-indicator\n  class=\"responsive-layers-indicator\"\n  intent=\"success\"\n  icon=\"layers-intersect\"\n  label=\"Responsive layers ready\">\n  <strong>Responsive layers ready</strong>\n  <ul>\n    <li>320w &mdash; mobile</li>\n    <li>640w &mdash; tablet</li>\n    <li>1280w &mdash; desktop</li>\n    <li>1920w &mdash; large desktop</li>\n  </ul>\n</esp-status-indicator>\n```",
+          "description": "A compact, keyboard-accessible status icon that reveals explanatory\ncontent in an `esp-popover` on hover, focus, or tap.\n\n```html\n<esp-status-indicator\n  intent=\"warning\"\n  label=\"Image processing delayed\"\n  placement=\"right\">\n  The image is still queued. It will retry automatically.\n</esp-status-indicator>\n\n<esp-status-indicator intent=\"success\" label=\"Published\">\n  This page is live and visible to visitors.\n</esp-status-indicator>\n```\n\n### Chrome modes\n\nThe `chrome` attribute controls the chip treatment around the icon.\n`pill` (the default) renders the filled circular background, `outline`\nkeeps only the border, and `none` drops both — leaving just the\nintent-colored icon and its popover affordance. `chrome=\"none\"` is the\nright choice when the indicator sits inside dense metadata rows where\na full pill would feel heavy.\n\n```html\n<esp-box style=\"display: flex; gap: var(--esp-size-normal); align-items: center;\">\n  <esp-status-indicator intent=\"success\" label=\"Pill (default)\">\n    Pill chrome wraps the icon in a filled circle.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"outline\" intent=\"success\" label=\"Outline\">\n    Outline chrome keeps the border but drops the fill.\n  </esp-status-indicator>\n\n  <esp-status-indicator chrome=\"none\" intent=\"success\" label=\"None\">\n    None drops the chrome entirely — just the intent-colored icon.\n  </esp-status-indicator>\n</esp-box>\n```\n\n### Wide chip with a non-square SVG\n\nThe built-in `icon` attribute pulls from the Espalier sprite, which is\nauthored for **square** glyphs at the chip's default size. When you\nneed a non-square mark — a file-type badge, a short token of text, a\npill of dimensions — slot your own SVG into the `icon` slot and size\nthe chip through the three CSS hooks: `--esp-status-indicator-width`,\n`--esp-status-indicator-height`, and `--esp-status-indicator-border-radius`.\n\nThe slotted SVG fills the chip, so give it a matching `viewBox` and\nuse `chrome=\"none\"` if you don't want the chip's pill background\nfighting your art.\n\n```html\n<style>\n  .file-type-indicator {\n    --esp-status-indicator-width: calc(var(--esp-size-big-to-large) * 2.5);\n    --esp-status-indicator-height: var(--esp-size-big-to-large);\n    --esp-status-indicator-border-radius: var(--esp-size-border-radius);\n    color: var(--esp-color-link);\n  }\n\n  .file-type-indicator svg text {\n    fill: var(--esp-color-background);\n    font-family: var(--esp-font-body, system-ui, sans-serif);\n    font-size: 14px;\n    font-weight: 600;\n    text-anchor: middle;\n  }\n</style>\n\n<esp-status-indicator\n  class=\"file-type-indicator\"\n  chrome=\"none\"\n  label=\"Original file type\">\n  <svg slot=\"icon\" viewBox=\"0 0 72 32\" aria-hidden=\"true\">\n    <rect x=\"0\" y=\"0\" width=\"72\" height=\"32\" rx=\"6\" ry=\"6\" fill=\"currentColor\"/>\n    <text x=\"36\" y=\"21\">JPG</text>\n  </svg>\n  <strong>Original file type</strong>\n  <p>Uploaded as a JPEG; responsive variants are generated on demand.</p>\n</esp-status-indicator>\n```\n\n### Rich popover content\n\nThe default slot accepts any HTML, not just plain text. Small blocks\nof structured content — a heading, a list of values, a definition\nlist — render inside the popover and are clamped by\n`--esp-status-indicator-popover-max-width` (default `32ch`). Raise the\nhook when the content needs more room.\n\n```html\n<style>\n  .responsive-layers-indicator {\n    --esp-status-indicator-popover-max-width: 24rem;\n  }\n\n  .responsive-layers-indicator ul {\n    margin: var(--esp-size-tiny) 0 0;\n    padding-left: var(--esp-size-normal);\n  }\n</style>\n\n<esp-status-indicator\n  class=\"responsive-layers-indicator\"\n  intent=\"success\"\n  icon=\"layers-intersect\"\n  label=\"Responsive layers ready\">\n  <strong>Responsive layers ready</strong>\n  <ul>\n    <li>320w &mdash; mobile</li>\n    <li>640w &mdash; tablet</li>\n    <li>1280w &mdash; desktop</li>\n    <li>1920w &mdash; large desktop</li>\n  </ul>\n</esp-status-indicator>\n```",
           "name": "EspalierStatusIndicator",
           "cssProperties": [
             {
@@ -80136,244 +80983,187 @@
     },
     {
       "kind": "javascript-module",
-      "path": "dist/textarea/esp-textarea.js",
+      "path": "dist/tabs/esp-tab-group.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Wraps a standard HTML textarea element, providing value\nbinding, input validation, and programmatic focus for\nEspalier forms and UIs.\n\n```html\n<esp-box>\n  <h2>esp-textarea example</h2>\n  <p>Start typing...</p>\n  <esp-textarea value=\"Hello from the textarea!\"></esp-textarea>\n</esp-box>\n<script>\n  const theTextarea = findByTagName(\"esp-textarea\")[0];\n  const theP = findByTagName(\"p\")[0];\n  theTextarea.addEventListener(\"esp-value-changed\", (ev) => {\n    theP.innerText = ev.detail.length\n      ? ev.detail\n      : \"The textarea is empty...\";\n  });\n</script>\n```\n\nTextareas pick up zone theming from an ancestor's `context`\nattribute — see the [theming guide](/espalier-guides/):\n\n```html\n<esp-box context=\"quiet\">\n  <esp-textarea label=\"Inside the quiet zone\"></esp-textarea>\n</esp-box>\n```\n\n### Validation with minlength and maxlength\n\n```html\n<esp-box>\n  <esp-form-item label=\"Bio (10-500 characters)\">\n    <esp-textarea name=\"bio\" required minlength=\"10\" maxlength=\"500\"\n      rows=\"4\" placeholder=\"Tell us about yourself...\">\n    </esp-textarea>\n  </esp-form-item>\n</esp-box>\n```\n\n### Disabled textarea\n\n```html\n<esp-box>\n  <esp-form-item label=\"Read-only notes\">\n    <esp-textarea disabled value=\"This textarea is disabled.\"></esp-textarea>\n  </esp-form-item>\n</esp-box>\n```",
-          "name": "EspalierTextarea",
-          "members": [
+          "description": "A tabbed interface that groups multiple\n[esp-tab](/components/tabs) elements. The tab strip is\ngenerated automatically from each child's `label` attribute.\nOnly one tab panel is visible at a time.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Overview\">\n    <p>Overview content goes here.</p>\n  </esp-tab>\n  <esp-tab label=\"Details\">\n    <p>Detailed information lives here.</p>\n  </esp-tab>\n  <esp-tab label=\"Settings\">\n    <p>Configuration options.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet `active` on a child `esp-tab` to make it the initially\nvisible panel:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Alpha\">\n    <p>Alpha panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Beta\" active>\n    <p>Beta starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\nIndividual tabs can be disabled:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Available\">\n    <p>You can select this tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Locked\" disabled>\n    <p>This tab cannot be reached.</p>\n  </esp-tab>\n  <esp-tab label=\"Also available\">\n    <p>This tab works too.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled group\n\nSet `disabled` on the group to disable all tabs at once:\n\n```html\n<esp-tab-group disabled>\n  <esp-tab label=\"One\">\n    <p>All tabs are disabled.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\">\n    <p>Cannot switch to this.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Zone theming\n\nTab groups pick up zone theming from a `context` attribute:\n\n```html\n<esp-tab-group context=\"quiet\">\n  <esp-tab label=\"First\">\n    <p>Zone-correct content.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>More content.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Listening for tab changes\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Tab 1\">\n    <p>First panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Tab 2\">\n    <p>Second panel.</p>\n  </esp-tab>\n</esp-tab-group>\n<script>\n  const tabs = findByTagName(\"esp-tab-group\")[0];\n  tabs.addEventListener(\"esp-tab-group-changed\", (ev) => {\n    console.log(\"Switched to:\", ev.detail.label, \"at index\", ev.detail.index);\n  });\n</script>\n```",
+          "name": "EspalierTabGroup",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "formAssociated",
-              "type": {
-                "text": "boolean"
-              },
-              "static": true,
-              "default": "true"
+              "description": "Border color of the tab group container.",
+              "name": "--esp-tab-color-border"
             },
             {
-              "kind": "field",
-              "name": "internals",
-              "privacy": "private"
+              "description": "Background color of the overall component.",
+              "name": "--esp-tab-color-background"
             },
             {
-              "kind": "field",
-              "name": "theTextarea",
-              "privacy": "private"
+              "description": "Background color of the tab strip.",
+              "name": "--esp-tab-color-strip-background"
             },
             {
-              "kind": "field",
-              "name": "formCtrl",
-              "privacy": "private",
-              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => this.value || null, getValidity: () => this._getValidity(), getValidationAnchor: (): HTMLElement => this.theTextarea.value ?? this, onReset: () => { this.value = \"\"; this._hasVisibleError = false; }, onRestore: (state: string) => { this.value = state; }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
+              "description": "Tab button hover background.",
+              "name": "--esp-tab-color-button-hover"
             },
             {
-              "kind": "field",
-              "name": "formItemDescription",
-              "privacy": "private",
-              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.theTextarea.value, })"
+              "description": "Active tab button background.",
+              "name": "--esp-tab-color-button-active"
             },
             {
-              "kind": "field",
-              "name": "_hasVisibleError",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private",
-              "default": "false"
+              "description": "Text color for tab buttons.",
+              "name": "--esp-tab-color-text"
             },
             {
-              "kind": "field",
-              "name": "fieldName",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "A string value used for the id of the textarea.\n\n```html\n<esp-textarea field-name=\"comments\"></esp-textarea>\n```",
-              "attribute": "field-name"
+              "description": "Padding inside the panel area and tab buttons.",
+              "name": "--esp-tab-size-padding"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The value of the textarea.\n\n```html\n<esp-textarea value=\"Some text\"></esp-textarea>\n```",
-              "attribute": "value"
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The name used when the textarea participates in a `<form>`.\n\n```html\n<form>\n  <esp-textarea name=\"comments\" value=\"Hello\"></esp-textarea>\n</form>\n```",
-              "attribute": "name",
-              "reflects": true
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "When true, the field must have a value before the form can be\nsubmitted.\n\n```html\n<esp-textarea required></esp-textarea>\n```",
-              "attribute": "required",
-              "reflects": true
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "requiredMessage",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "A custom message to display when the field is required but empty.\nDefaults to `\"Please fill out this field.\"` when not set.\n\n```html\n<esp-textarea required required-message=\"Comments are required!\"></esp-textarea>\n```",
-              "attribute": "required-message"
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "A custom message to display when validation fails (e.g.\nminlength not met). Overrides the default friendly message.\n\n```html\n<esp-textarea minlength=\"10\"\n  validation-message=\"Please write at least 10 characters.\">\n</esp-textarea>\n```",
-              "attribute": "validation-message"
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "When true, the textarea is disabled and cannot be\ninteracted with.\n\n```html\n<esp-textarea disabled></esp-textarea>\n```",
-              "attribute": "disabled",
-              "reflects": true
+              "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"
+              }
             },
             {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "public",
-              "description": "Placeholder text shown when the textarea is empty.\n\n```html\n<esp-textarea placeholder=\"Enter your message...\"></esp-textarea>\n```",
-              "attribute": "placeholder"
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The tab strip container.",
+              "name": "tab-list"
             },
             {
-              "kind": "field",
-              "name": "rows",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "public",
-              "description": "The visible number of text lines.\n\n```html\n<esp-textarea rows=\"6\"></esp-textarea>\n```",
-              "attribute": "rows"
+              "description": "Each individual tab button in the strip.",
+              "name": "tab-button"
             },
+            {
+              "description": "The panel area below the tab strip.",
+              "name": "panels"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Place `esp-tab` elements in the default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "public",
-              "description": "The visible width in average character widths.\n\n```html\n<esp-textarea cols=\"40\"></esp-textarea>\n```",
-              "attribute": "cols"
+              "name": "panelsSlot",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "minlength",
+              "name": "disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
               "privacy": "public",
-              "description": "Minimum number of characters.",
-              "attribute": "minlength"
+              "default": "false",
+              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxlength",
+              "name": "tabData",
               "type": {
-                "text": "number | undefined"
+                "text": "TabData[]"
               },
-              "privacy": "public",
-              "description": "Maximum number of characters.",
-              "attribute": "maxlength"
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ]
+              "default": "[]"
             },
             {
               "kind": "method",
-              "name": "_syncInput",
+              "name": "getTabs",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "EspalierTab[]"
                 }
-              },
-              "description": "Sync the form value and fire `esp-value-changed`. If the field\nis already showing an error, validate eagerly so the error\nclears immediately when the user fixes it. Otherwise just\nsync silently — errors will appear on blur."
-            },
-            {
-              "kind": "method",
-              "name": "_handleBlur",
-              "privacy": "private"
+              }
             },
             {
               "kind": "method",
-              "name": "_getValidity",
+              "name": "syncTabData",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "{\n    flags: ValidityStateFlags;\n    message: string;\n  } | null"
+                  "text": "void"
                 }
               }
             },
             {
               "kind": "method",
-              "name": "_getFriendlyMessage",
+              "name": "activateTab",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "string"
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "flags",
+                  "name": "index",
                   "type": {
-                    "text": "ValidityStateFlags"
+                    "text": "number"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "focus",
-              "privacy": "public",
+              "name": "handleTabClick",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -80381,87 +81171,50 @@
               },
               "parameters": [
                 {
-                  "name": "options",
-                  "optional": true,
+                  "name": "index",
                   "type": {
-                    "text": "FocusOptions"
+                    "text": "number"
                   }
                 }
-              ],
-              "description": "Focus the textarea element.\n\n```html\n<div class=\"textarea-with-button\">\n  <esp-textarea value=\"Click to focus -->\"></esp-textarea>\n  <esp-button label=\"Focus\" icon=\"arrow-big-left\"></esp-button>\n</div>\n<script>\n  const theTextarea = findByTagName(\"esp-textarea\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"esp-clicked\", () => {\n    theTextarea.focus();\n  });\n</script>\n```"
+              ]
             },
             {
               "kind": "method",
-              "name": "validate",
-              "privacy": "public",
+              "name": "handleKeyDown",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Re-run constraint validation and dispatch `esp-validity-changed`."
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "description": "Check whether the current state is valid (delegates to ElementInternals)."
-            },
-            {
-              "kind": "method",
-              "name": "formResetCallback",
-              "return": {
-                "type": {
-                  "text": "void"
+              "parameters": [
+                {
+                  "name": "ev",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
                 }
-              },
-              "description": "Called by the browser when the owning `<form>` is reset."
+              ]
             },
             {
               "kind": "method",
-              "name": "formStateRestoreCallback",
+              "name": "handleChildUpdated",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "state",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Called by the browser to restore form state (bfcache, etc.)."
+              }
             },
             {
               "kind": "method",
-              "name": "formDisabledCallback",
+              "name": "handleSlotChange",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
-              "parameters": [
-                {
-                  "name": "isDisabled",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ],
-              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
-            },
-            {
-              "kind": "field",
-              "name": "_trackVisibleError",
-              "privacy": "private"
+              }
             },
             {
               "kind": "field",
@@ -81191,123 +81944,22 @@
           "events": [
             {
               "type": {
-                "text": "CustomEvent<string>"
-              },
-              "description": "Emitted when the textarea value changes.",
-              "name": "esp-value-changed"
-            },
-            {
-              "type": {
-                "text": "CustomEvent<{ valid: boolean; message: string }>"
+                "text": "CustomEvent<{ index: number; label: string }>"
               },
-              "description": "Emitted whenever constraint validation runs. ```html <esp-box> <p>Start typing...</p> <esp-textarea></esp-textarea> </esp-box> <script> const theTextarea = findByTagName(\"esp-textarea\")[0]; const theP = findByTagName(\"p\")[0]; theTextarea.addEventListener(\"esp-value-changed\", (ev) => { theP.innerText = ev.detail.length ? ev.detail : \"The textarea is empty...\"; }); </script> ```",
-              "name": "esp-validity-changed"
+              "description": "Fired when the active tab changes. The detail contains the `index` and `label` of the newly active tab.",
+              "name": "esp-tab-group-changed"
             }
           ],
           "attributes": [
-            {
-              "name": "field-name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "A string value used for the id of the textarea.\n\n```html\n<esp-textarea field-name=\"comments\"></esp-textarea>\n```",
-              "fieldName": "fieldName"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The value of the textarea.\n\n```html\n<esp-textarea value=\"Some text\"></esp-textarea>\n```",
-              "fieldName": "value"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The name used when the textarea participates in a `<form>`.\n\n```html\n<form>\n  <esp-textarea name=\"comments\" value=\"Hello\"></esp-textarea>\n</form>\n```",
-              "fieldName": "name"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When true, the field must have a value before the form can be\nsubmitted.\n\n```html\n<esp-textarea required></esp-textarea>\n```",
-              "fieldName": "required"
-            },
-            {
-              "name": "required-message",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "A custom message to display when the field is required but empty.\nDefaults to `\"Please fill out this field.\"` when not set.\n\n```html\n<esp-textarea required required-message=\"Comments are required!\"></esp-textarea>\n```",
-              "fieldName": "requiredMessage"
-            },
-            {
-              "name": "validation-message",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "A custom message to display when validation fails (e.g.\nminlength not met). Overrides the default friendly message.\n\n```html\n<esp-textarea minlength=\"10\"\n  validation-message=\"Please write at least 10 characters.\">\n</esp-textarea>\n```",
-              "fieldName": "validationMessage"
-            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the textarea is disabled and cannot be\ninteracted with.\n\n```html\n<esp-textarea disabled></esp-textarea>\n```",
+              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
               "fieldName": "disabled"
             },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Placeholder text shown when the textarea is empty.\n\n```html\n<esp-textarea placeholder=\"Enter your message...\"></esp-textarea>\n```",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "rows",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The visible number of text lines.\n\n```html\n<esp-textarea rows=\"6\"></esp-textarea>\n```",
-              "fieldName": "rows"
-            },
-            {
-              "name": "cols",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The visible width in average character widths.\n\n```html\n<esp-textarea cols=\"40\"></esp-textarea>\n```",
-              "fieldName": "cols"
-            },
-            {
-              "name": "minlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Minimum number of characters.",
-              "fieldName": "minlength"
-            },
-            {
-              "name": "maxlength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Maximum number of characters.",
-              "fieldName": "maxlength"
-            },
             {
               "name": "scheme",
               "type": {
@@ -81350,142 +82002,60 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
-          "tagName": "esp-textarea",
+          "tagName": "esp-tab-group",
           "customElement": true,
           "docPageTitle": {
-            "name": "Textarea",
-            "description": ""
+            "name": "Tab",
+            "description": "Group"
           },
           "docUrl": {
-            "name": "/components/textarea",
+            "name": "/components/tabs",
             "description": ""
           },
           "menuGroup": {
-            "name": "Form",
-            "description": "Controls"
+            "name": "Navigation",
+            "description": ""
           },
           "menuLabel": {
-            "name": "Textarea",
-            "description": ""
+            "name": "Tab",
+            "description": "Group"
           },
           "menuIcon": {
-            "name": "forms",
+            "name": "layout-navbar",
             "description": ""
-          },
-          "cssProperties": [
-            {
-              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
-              "name": "--esp-field-background",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
-              "name": "--esp-field-border-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Border width of the shared field shell. Defaults to `1px`.",
-              "name": "--esp-field-border-width",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
-              "name": "--esp-field-text-color",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-hover-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
-              "name": "--esp-field-focus-bg",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            },
-            {
-              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-field-focus-shadow",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ]
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierTextarea",
+          "name": "EspalierTabGroup",
           "declaration": {
-            "name": "EspalierTextarea",
-            "module": "dist/textarea/esp-textarea.js"
+            "name": "EspalierTabGroup",
+            "module": "dist/tabs/esp-tab-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-textarea",
+          "name": "esp-tab-group",
           "declaration": {
-            "name": "EspalierTextarea",
-            "module": "dist/textarea/esp-textarea.js"
+            "name": "EspalierTabGroup",
+            "module": "dist/tabs/esp-tab-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/tabs/esp-tab-group.js",
+      "path": "dist/tabs/esp-tab.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A tabbed interface that groups multiple\n[esp-tab](/components/tabs) elements. The tab strip is\ngenerated automatically from each child's `label` attribute.\nOnly one tab panel is visible at a time.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Overview\">\n    <p>Overview content goes here.</p>\n  </esp-tab>\n  <esp-tab label=\"Details\">\n    <p>Detailed information lives here.</p>\n  </esp-tab>\n  <esp-tab label=\"Settings\">\n    <p>Configuration options.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet `active` on a child `esp-tab` to make it the initially\nvisible panel:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Alpha\">\n    <p>Alpha panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Beta\" active>\n    <p>Beta starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\nIndividual tabs can be disabled:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Available\">\n    <p>You can select this tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Locked\" disabled>\n    <p>This tab cannot be reached.</p>\n  </esp-tab>\n  <esp-tab label=\"Also available\">\n    <p>This tab works too.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled group\n\nSet `disabled` on the group to disable all tabs at once:\n\n```html\n<esp-tab-group disabled>\n  <esp-tab label=\"One\">\n    <p>All tabs are disabled.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\">\n    <p>Cannot switch to this.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Zone theming\n\nTab groups pick up zone theming from a `context` attribute:\n\n```html\n<esp-tab-group context=\"quiet\">\n  <esp-tab label=\"First\">\n    <p>Zone-correct content.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>More content.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Listening for tab changes\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Tab 1\">\n    <p>First panel.</p>\n  </esp-tab>\n  <esp-tab label=\"Tab 2\">\n    <p>Second panel.</p>\n  </esp-tab>\n</esp-tab-group>\n<script>\n  const tabs = findByTagName(\"esp-tab-group\")[0];\n  tabs.addEventListener(\"esp-tab-group-changed\", (ev) => {\n    console.log(\"Switched to:\", ev.detail.label, \"at index\", ev.detail.index);\n  });\n</script>\n```",
-          "name": "EspalierTabGroup",
+          "description": "A single tab panel used inside\n[esp-tab-group](/components/tabs). Each tab provides a\n`label` that appears in the generated tab strip and a default\nslot for the panel content.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"First\">\n    <p>Content for the first tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>Content for the second tab.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet the `active` attribute to make a tab active on load:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"One\">\n    <p>Not active by default.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\" active>\n    <p>This tab starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Enabled\">\n    <p>This tab works normally.</p>\n  </esp-tab>\n  <esp-tab label=\"Disabled\" disabled>\n    <p>Cannot reach this panel.</p>\n  </esp-tab>\n</esp-tab-group>\n```",
+          "name": "EspalierTab",
           "cssProperties": [
             {
-              "description": "Border color of the tab group container.",
-              "name": "--esp-tab-color-border"
-            },
-            {
-              "description": "Background color of the overall component.",
-              "name": "--esp-tab-color-background"
-            },
-            {
-              "description": "Background color of the tab strip.",
-              "name": "--esp-tab-color-strip-background"
-            },
-            {
-              "description": "Tab button hover background.",
-              "name": "--esp-tab-color-button-hover"
-            },
-            {
-              "description": "Active tab button background.",
-              "name": "--esp-tab-color-button-active"
-            },
-            {
-              "description": "Text color for tab buttons.",
-              "name": "--esp-tab-color-text"
-            },
-            {
-              "description": "Padding inside the panel area and tab buttons.",
+              "description": "Padding inside the panel area.",
               "name": "--esp-tab-size-padding"
             },
             {
@@ -81547,144 +82117,51 @@
           ],
           "cssParts": [
             {
-              "description": "The tab strip container.",
-              "name": "tab-list"
-            },
-            {
-              "description": "Each individual tab button in the strip.",
-              "name": "tab-button"
-            },
-            {
-              "description": "The panel area below the tab strip.",
-              "name": "panels"
+              "description": "The panel wrapper element.",
+              "name": "panel"
             }
           ],
           "slots": [
             {
-              "description": "Place `esp-tab` elements in the default slot.",
+              "description": "The default slot holds the panel content displayed when this tab is active. Label, active-state, and disabled-state updates are reported through a private coordination event consumed by the parent tab group.",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "panelsSlot",
-              "privacy": "private"
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The text displayed in the tab button within the tab strip.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "active",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
-              "attribute": "disabled",
+              "description": "Whether this tab is currently active (its panel is visible).",
+              "attribute": "active",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tabData",
+              "name": "disabled",
               "type": {
-                "text": "TabData[]"
-              },
-              "privacy": "private",
-              "default": "[]"
-            },
-            {
-              "kind": "method",
-              "name": "getTabs",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "EspalierTab[]"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "syncTabData",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "activateTab",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleTabClick",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+                "text": "boolean"
               },
-              "parameters": [
-                {
-                  "name": "ev",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleChildUpdated",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleSlotChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether this tab is disabled (cannot be selected).",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -82411,23 +82888,33 @@
               }
             }
           ],
-          "events": [
+          "events": [],
+          "attributes": [
             {
+              "name": "label",
               "type": {
-                "text": "CustomEvent<{ index: number; label: string }>"
+                "text": "string"
               },
-              "description": "Fired when the active tab changes. The detail contains the `index` and `label` of the newly active tab.",
-              "name": "esp-tab-group-changed"
-            }
-          ],
-          "attributes": [
+              "default": "\"\"",
+              "description": "The text displayed in the tab button within the tab strip.",
+              "fieldName": "label"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether this tab is currently active (its panel is visible).",
+              "fieldName": "active"
+            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables all tabs in the group, preventing any tab from\nbeing selected.",
+              "description": "Whether this tab is disabled (cannot be selected).",
               "fieldName": "disabled"
             },
             {
@@ -82472,155 +82959,158 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
-          "tagName": "esp-tab-group",
+          "tagName": "esp-tab",
           "customElement": true,
           "docPageTitle": {
             "name": "Tab",
-            "description": "Group"
+            "description": ""
           },
           "docUrl": {
-            "name": "/components/tabs",
+            "name": "/components/tabs/tab",
             "description": ""
           },
           "menuGroup": {
             "name": "Navigation",
             "description": ""
-          },
-          "menuLabel": {
-            "name": "Tab",
-            "description": "Group"
-          },
-          "menuIcon": {
-            "name": "layout-navbar",
-            "description": ""
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierTabGroup",
+          "name": "EspalierTab",
           "declaration": {
-            "name": "EspalierTabGroup",
-            "module": "dist/tabs/esp-tab-group.js"
+            "name": "EspalierTab",
+            "module": "dist/tabs/esp-tab.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-tab-group",
+          "name": "esp-tab",
           "declaration": {
-            "name": "EspalierTabGroup",
-            "module": "dist/tabs/esp-tab-group.js"
+            "name": "EspalierTab",
+            "module": "dist/tabs/esp-tab.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "dist/tabs/esp-tab.js",
+      "path": "dist/textarea/esp-textarea.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A single tab panel used inside\n[esp-tab-group](/components/tabs). Each tab provides a\n`label` that appears in the generated tab strip and a default\nslot for the panel content.\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"First\">\n    <p>Content for the first tab.</p>\n  </esp-tab>\n  <esp-tab label=\"Second\">\n    <p>Content for the second tab.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Pre-selected tab\n\nSet the `active` attribute to make a tab active on load:\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"One\">\n    <p>Not active by default.</p>\n  </esp-tab>\n  <esp-tab label=\"Two\" active>\n    <p>This tab starts active.</p>\n  </esp-tab>\n</esp-tab-group>\n```\n\n### Disabled tab\n\n```html\n<esp-tab-group>\n  <esp-tab label=\"Enabled\">\n    <p>This tab works normally.</p>\n  </esp-tab>\n  <esp-tab label=\"Disabled\" disabled>\n    <p>Cannot reach this panel.</p>\n  </esp-tab>\n</esp-tab-group>\n```",
-          "name": "EspalierTab",
-          "cssProperties": [
+          "description": "Wraps a standard HTML textarea element, providing value\nbinding, input validation, and programmatic focus for\nEspalier forms and UIs.\n\n```html\n<esp-box>\n  <h2>esp-textarea example</h2>\n  <p>Start typing...</p>\n  <esp-textarea value=\"Hello from the textarea!\"></esp-textarea>\n</esp-box>\n<script>\n  const theTextarea = findByTagName(\"esp-textarea\")[0];\n  const theP = findByTagName(\"p\")[0];\n  theTextarea.addEventListener(\"esp-value-changed\", (ev) => {\n    theP.innerText = ev.detail.length\n      ? ev.detail\n      : \"The textarea is empty...\";\n  });\n</script>\n```\n\nTextareas pick up zone theming from an ancestor's `context`\nattribute — see the [theming guide](/espalier-guides/):\n\n```html\n<esp-box context=\"quiet\">\n  <esp-textarea label=\"Inside the quiet zone\"></esp-textarea>\n</esp-box>\n```\n\n### Validation with minlength and maxlength\n\n```html\n<esp-box>\n  <esp-form-item label=\"Bio (10-500 characters)\">\n    <esp-textarea name=\"bio\" required minlength=\"10\" maxlength=\"500\"\n      rows=\"4\" placeholder=\"Tell us about yourself...\">\n    </esp-textarea>\n  </esp-form-item>\n</esp-box>\n```\n\n### Disabled textarea\n\n```html\n<esp-box>\n  <esp-form-item label=\"Read-only notes\">\n    <esp-textarea disabled value=\"This textarea is disabled.\"></esp-textarea>\n  </esp-form-item>\n</esp-box>\n```",
+          "name": "EspalierTextarea",
+          "members": [
             {
-              "description": "Padding inside the panel area.",
-              "name": "--esp-tab-size-padding"
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "internals",
+              "privacy": "private"
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "theTextarea",
+              "privacy": "private"
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "formCtrl",
+              "privacy": "private",
+              "default": "new FormFieldController({ host: this, internals: this.internals, getFormValue: () => this.value || null, getValidity: () => this._getValidity(), getValidationAnchor: (): HTMLElement => this.theTextarea.value ?? this, onReset: () => { this.value = \"\"; this._hasVisibleError = false; }, onRestore: (state: string) => { this.value = state; }, onDisabled: (isDisabled: boolean) => { this.disabled = isDisabled; }, })"
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "formItemDescription",
+              "privacy": "private",
+              "default": "new FormFieldDescriptionController({ host: this, getTarget: () => this.theTextarea.value, })"
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "_hasVisibleError",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "fieldName",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "A string value used for the id of the textarea.\n\n```html\n<esp-textarea field-name=\"comments\"></esp-textarea>\n```",
+              "attribute": "field-name"
             },
             {
-              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
-              "name": "--esp-field-focus-shadow",
-              "inheritedFrom": {
-                "name": "EspalierElementBase",
-                "module": "dist/shared/esp-element-base.js"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The panel wrapper element.",
-              "name": "panel"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot holds the panel content displayed when this tab is active. Label, active-state, and disabled-state updates are reported through a private coordination event consumed by the parent tab group.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The value of the textarea.\n\n```html\n<esp-textarea value=\"Some text\"></esp-textarea>\n```",
+              "attribute": "value"
+            },
             {
               "kind": "field",
-              "name": "label",
+              "name": "name",
               "type": {
                 "text": "string"
               },
               "privacy": "public",
               "default": "\"\"",
-              "description": "The text displayed in the tab button within the tab strip.",
-              "attribute": "label"
+              "description": "The name used when the textarea participates in a `<form>`.\n\n```html\n<form>\n  <esp-textarea name=\"comments\" value=\"Hello\"></esp-textarea>\n</form>\n```",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "privacy": "public",
               "default": "false",
-              "description": "Whether this tab is currently active (its panel is visible).",
-              "attribute": "active",
+              "description": "When true, the field must have a value before the form can be\nsubmitted.\n\n```html\n<esp-textarea required></esp-textarea>\n```",
+              "attribute": "required",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "requiredMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "A custom message to display when the field is required but empty.\nDefaults to `\"Please fill out this field.\"` when not set.\n\n```html\n<esp-textarea required required-message=\"Comments are required!\"></esp-textarea>\n```",
+              "attribute": "required-message"
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "A custom message to display when validation fails (e.g.\nminlength not met). Overrides the default friendly message.\n\n```html\n<esp-textarea minlength=\"10\"\n  validation-message=\"Please write at least 10 characters.\">\n</esp-textarea>\n```",
+              "attribute": "validation-message"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -82629,10 +83119,210 @@
               },
               "privacy": "public",
               "default": "false",
-              "description": "Whether this tab is disabled (cannot be selected).",
+              "description": "When true, the textarea is disabled and cannot be\ninteracted with.\n\n```html\n<esp-textarea disabled></esp-textarea>\n```",
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "public",
+              "description": "Placeholder text shown when the textarea is empty.\n\n```html\n<esp-textarea placeholder=\"Enter your message...\"></esp-textarea>\n```",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "rows",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "public",
+              "description": "The visible number of text lines.\n\n```html\n<esp-textarea rows=\"6\"></esp-textarea>\n```",
+              "attribute": "rows"
+            },
+            {
+              "kind": "field",
+              "name": "cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "public",
+              "description": "The visible width in average character widths.\n\n```html\n<esp-textarea cols=\"40\"></esp-textarea>\n```",
+              "attribute": "cols"
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "public",
+              "description": "Minimum number of characters.",
+              "attribute": "minlength"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "public",
+              "description": "Maximum number of characters.",
+              "attribute": "maxlength"
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_syncInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Sync the form value and fire `esp-value-changed`. If the field\nis already showing an error, validate eagerly so the error\nclears immediately when the user fixes it. Otherwise just\nsync silently — errors will appear on blur."
+            },
+            {
+              "kind": "method",
+              "name": "_handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getValidity",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "{\n    flags: ValidityStateFlags;\n    message: string;\n  } | null"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_getFriendlyMessage",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "flags",
+                  "type": {
+                    "text": "ValidityStateFlags"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "focus",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  }
+                }
+              ],
+              "description": "Focus the textarea element.\n\n```html\n<div class=\"textarea-with-button\">\n  <esp-textarea value=\"Click to focus -->\"></esp-textarea>\n  <esp-button label=\"Focus\" icon=\"arrow-big-left\"></esp-button>\n</div>\n<script>\n  const theTextarea = findByTagName(\"esp-textarea\")[0];\n  const theButton = findByTagName(\"esp-button\")[0];\n  theButton.addEventListener(\"esp-clicked\", () => {\n    theTextarea.focus();\n  });\n</script>\n```"
+            },
+            {
+              "kind": "method",
+              "name": "validate",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Re-run constraint validation and dispatch `esp-validity-changed`."
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Check whether the current state is valid (delegates to ElementInternals)."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called by the browser when the owning `<form>` is reset."
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Called by the browser to restore form state (bfcache, etc.)."
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "isDisabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Called by the browser when a parent `<fieldset>` is enabled or disabled."
+            },
+            {
+              "kind": "field",
+              "name": "_trackVisibleError",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "seedColorBacker",
@@ -83358,25 +84048,76 @@
               }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent<string>"
+              },
+              "description": "Emitted when the textarea value changes.",
+              "name": "esp-value-changed"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{ valid: boolean; message: string }>"
+              },
+              "description": "Emitted whenever constraint validation runs. ```html <esp-box> <p>Start typing...</p> <esp-textarea></esp-textarea> </esp-box> <script> const theTextarea = findByTagName(\"esp-textarea\")[0]; const theP = findByTagName(\"p\")[0]; theTextarea.addEventListener(\"esp-value-changed\", (ev) => { theP.innerText = ev.detail.length ? ev.detail : \"The textarea is empty...\"; }); </script> ```",
+              "name": "esp-validity-changed"
+            }
+          ],
           "attributes": [
             {
-              "name": "label",
+              "name": "field-name",
               "type": {
                 "text": "string"
               },
               "default": "\"\"",
-              "description": "The text displayed in the tab button within the tab strip.",
-              "fieldName": "label"
+              "description": "A string value used for the id of the textarea.\n\n```html\n<esp-textarea field-name=\"comments\"></esp-textarea>\n```",
+              "fieldName": "fieldName"
             },
             {
-              "name": "active",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The value of the textarea.\n\n```html\n<esp-textarea value=\"Some text\"></esp-textarea>\n```",
+              "fieldName": "value"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The name used when the textarea participates in a `<form>`.\n\n```html\n<form>\n  <esp-textarea name=\"comments\" value=\"Hello\"></esp-textarea>\n</form>\n```",
+              "fieldName": "name"
+            },
+            {
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this tab is currently active (its panel is visible).",
-              "fieldName": "active"
+              "description": "When true, the field must have a value before the form can be\nsubmitted.\n\n```html\n<esp-textarea required></esp-textarea>\n```",
+              "fieldName": "required"
+            },
+            {
+              "name": "required-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "A custom message to display when the field is required but empty.\nDefaults to `\"Please fill out this field.\"` when not set.\n\n```html\n<esp-textarea required required-message=\"Comments are required!\"></esp-textarea>\n```",
+              "fieldName": "requiredMessage"
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "A custom message to display when validation fails (e.g.\nminlength not met). Overrides the default friendly message.\n\n```html\n<esp-textarea minlength=\"10\"\n  validation-message=\"Please write at least 10 characters.\">\n</esp-textarea>\n```",
+              "fieldName": "validationMessage"
             },
             {
               "name": "disabled",
@@ -83384,9 +84125,49 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Whether this tab is disabled (cannot be selected).",
+              "description": "When true, the textarea is disabled and cannot be\ninteracted with.\n\n```html\n<esp-textarea disabled></esp-textarea>\n```",
               "fieldName": "disabled"
             },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Placeholder text shown when the textarea is empty.\n\n```html\n<esp-textarea placeholder=\"Enter your message...\"></esp-textarea>\n```",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The visible number of text lines.\n\n```html\n<esp-textarea rows=\"6\"></esp-textarea>\n```",
+              "fieldName": "rows"
+            },
+            {
+              "name": "cols",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The visible width in average character widths.\n\n```html\n<esp-textarea cols=\"40\"></esp-textarea>\n```",
+              "fieldName": "cols"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Minimum number of characters.",
+              "fieldName": "minlength"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum number of characters.",
+              "fieldName": "maxlength"
+            },
             {
               "name": "scheme",
               "type": {
@@ -83429,37 +84210,103 @@
             "name": "EspalierElementBase",
             "module": "dist/shared/esp-element-base.js"
           },
-          "tagName": "esp-tab",
+          "tagName": "esp-textarea",
           "customElement": true,
           "docPageTitle": {
-            "name": "Tab",
+            "name": "Textarea",
             "description": ""
           },
           "docUrl": {
-            "name": "/components/tabs/tab",
+            "name": "/components/textarea",
             "description": ""
           },
           "menuGroup": {
-            "name": "Navigation",
+            "name": "Form",
+            "description": "Controls"
+          },
+          "menuLabel": {
+            "name": "Textarea",
             "description": ""
-          }
+          },
+          "menuIcon": {
+            "name": "forms",
+            "description": ""
+          },
+          "cssProperties": [
+            {
+              "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`.",
+              "name": "--esp-field-background",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`.",
+              "name": "--esp-field-border-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Border width of the shared field shell. Defaults to `1px`.",
+              "name": "--esp-field-border-width",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`.",
+              "name": "--esp-field-text-color",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-hover-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`.",
+              "name": "--esp-field-focus-bg",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            },
+            {
+              "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.",
+              "name": "--esp-field-focus-shadow",
+              "inheritedFrom": {
+                "name": "EspalierElementBase",
+                "module": "dist/shared/esp-element-base.js"
+              }
+            }
+          ]
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "EspalierTab",
+          "name": "EspalierTextarea",
           "declaration": {
-            "name": "EspalierTab",
-            "module": "dist/tabs/esp-tab.js"
+            "name": "EspalierTextarea",
+            "module": "dist/textarea/esp-textarea.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "esp-tab",
+          "name": "esp-textarea",
           "declaration": {
-            "name": "EspalierTab",
-            "module": "dist/tabs/esp-tab.js"
+            "name": "EspalierTextarea",
+            "module": "dist/textarea/esp-textarea.js"
           }
         }
       ]
@@ -85648,462 +86495,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/calendar-grid.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "parseDateBound",
-          "return": {
-            "type": {
-              "text": "Temporal.PlainDate | null"
-            }
-          },
-          "parameters": [
-            {
-              "name": "iso",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "Safely parse an ISO date string, returning `null` on failure."
-        },
-        {
-          "kind": "function",
-          "name": "isDateDisabled",
-          "return": {
-            "type": {
-              "text": "boolean"
-            }
-          },
-          "parameters": [
-            {
-              "name": "date",
-              "type": {
-                "text": "Temporal.PlainDate"
-              }
-            },
-            {
-              "name": "min",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "max",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            }
-          ],
-          "description": "Return `true` if the date falls outside the min/max range."
-        },
-        {
-          "kind": "function",
-          "name": "getSelectedDate",
-          "return": {
-            "type": {
-              "text": "Temporal.PlainDate | null"
-            }
-          },
-          "parameters": [
-            {
-              "name": "parsed",
-              "type": {
-                "text": "ParsedValue"
-              }
-            }
-          ],
-          "description": "Extract the single selected date from a parsed value (date / datetime only)."
-        },
-        {
-          "kind": "function",
-          "name": "getEffectiveRange",
-          "return": {
-            "type": {
-              "text": "{ start: Temporal.PlainDate | null; end: Temporal.PlainDate | null }"
-            }
-          },
-          "parameters": [
-            {
-              "name": "mode",
-              "type": {
-                "text": "DatePickerMode"
-              }
-            },
-            {
-              "name": "parsed",
-              "type": {
-                "text": "ParsedValue"
-              }
-            },
-            {
-              "name": "rangeAnchor",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "rangePreview",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            }
-          ],
-          "description": "Compute the effective start/end for range grid highlighting.\n\nDuring the `start` phase (anchor set, waiting for second click),\nthe preview hover date is used as the tentative end. The pair\nis always normalised so start <= end."
-        },
-        {
-          "kind": "function",
-          "name": "generateCalendarGrid",
-          "return": {
-            "type": {
-              "text": "CalendarDay[]"
-            }
-          },
-          "parameters": [
-            {
-              "name": "month",
-              "type": {
-                "text": "Temporal.PlainYearMonth"
-              }
-            },
-            {
-              "name": "selectedDate",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "rangeStart",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "rangeEnd",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "minDate",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            },
-            {
-              "name": "maxDate",
-              "type": {
-                "text": "Temporal.PlainDate | null"
-              }
-            }
-          ],
-          "description": "Generate a 6x7 calendar grid for the given month. Each cell\ncarries flags for rendering (today, selected, range, disabled,\noutside-month, etc.)."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "parseDateBound",
-          "declaration": {
-            "name": "parseDateBound",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "isDateDisabled",
-          "declaration": {
-            "name": "isDateDisabled",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getSelectedDate",
-          "declaration": {
-            "name": "getSelectedDate",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "getEffectiveRange",
-          "declaration": {
-            "name": "getEffectiveRange",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "generateCalendarGrid",
-          "declaration": {
-            "name": "generateCalendarGrid",
-            "module": "dist/date-picker/helpers/calendar-grid.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/constants.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "GRID_ROWS",
-          "type": {
-            "text": "number"
-          },
-          "default": "6"
-        },
-        {
-          "kind": "variable",
-          "name": "GRID_COLS",
-          "type": {
-            "text": "number"
-          },
-          "default": "7"
-        },
-        {
-          "kind": "variable",
-          "name": "GRID_SIZE"
-        },
-        {
-          "kind": "variable",
-          "name": "WEEKDAY_LABELS",
-          "type": {
-            "text": "array"
-          },
-          "default": "[\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"]",
-          "description": "Monday-start day-of-week headers."
-        },
-        {
-          "kind": "variable",
-          "name": "MONTH_NAMES",
-          "type": {
-            "text": "array"
-          },
-          "default": "[ \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", ]",
-          "description": "Month names for the header."
-        },
-        {
-          "kind": "variable",
-          "name": "HOURS_12",
-          "description": "Hours 1–12 for the 12-hour clock picker."
-        },
-        {
-          "kind": "variable",
-          "name": "MINUTES_60",
-          "description": "Minutes 0–59 for the minute picker."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "GRID_ROWS",
-          "declaration": {
-            "name": "GRID_ROWS",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GRID_COLS",
-          "declaration": {
-            "name": "GRID_COLS",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "GRID_SIZE",
-          "declaration": {
-            "name": "GRID_SIZE",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "WEEKDAY_LABELS",
-          "declaration": {
-            "name": "WEEKDAY_LABELS",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MONTH_NAMES",
-          "declaration": {
-            "name": "MONTH_NAMES",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "HOURS_12",
-          "declaration": {
-            "name": "HOURS_12",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MINUTES_60",
-          "declaration": {
-            "name": "MINUTES_60",
-            "module": "dist/date-picker/helpers/constants.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/parsing.js",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "parseValue",
-          "return": {
-            "type": {
-              "text": "ParsedValue"
-            }
-          },
-          "parameters": [
-            {
-              "name": "raw",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "mode",
-              "type": {
-                "text": "DatePickerMode"
-              }
-            }
-          ],
-          "description": "Parse a raw ISO 8601 value string into a structured `ParsedValue`\nbased on the picker mode. Returns `{ kind: \"none\" }` for empty or\nunparseable input."
-        },
-        {
-          "kind": "function",
-          "name": "formatDate",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "d",
-              "type": {
-                "text": "Temporal.PlainDate"
-              }
-            }
-          ],
-          "description": "Format a `PlainDate` as \"Month Day, Year\"."
-        },
-        {
-          "kind": "function",
-          "name": "formatTime",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "t",
-              "type": {
-                "text": "Temporal.PlainTime"
-              }
-            }
-          ],
-          "description": "Format a `PlainTime` as \"H:MM AM/PM\"."
-        },
-        {
-          "kind": "function",
-          "name": "displayValue",
-          "return": {
-            "type": {
-              "text": "string"
-            }
-          },
-          "parameters": [
-            {
-              "name": "parsed",
-              "type": {
-                "text": "ParsedValue"
-              }
-            }
-          ],
-          "description": "Build the human-readable display string for the input field\nfrom a parsed value."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "parseValue",
-          "declaration": {
-            "name": "parseValue",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "formatDate",
-          "declaration": {
-            "name": "formatDate",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "formatTime",
-          "declaration": {
-            "name": "formatTime",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "displayValue",
-          "declaration": {
-            "name": "displayValue",
-            "module": "dist/date-picker/helpers/parsing.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/styles.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "datePickerStyles",
-          "default": "css` /* ── Error state ─────────────────────────────────── */ .temporal-error { font-family: var(--esp-font-body); font-size: var(--esp-type-small); color: var(--esp-color-danger-text); padding: var(--esp-size-padding); } /* ── Trigger field ───────────────────────────────── */ .esp-field { display: grid; grid-template-columns: 1fr min-content; cursor: pointer; > input.esp-input { cursor: pointer; width: auto; } > .field-icon { display: grid; place-content: center; cursor: pointer; > svg { height: calc(1.2 * var(--esp-size-font)); width: calc(1.2 * var(--esp-size-font)); margin: 0 var(--esp-size-tiny); } } } /* ── Popover shell (native top-layer) ────────────── */ .picker-popover { position: fixed; inset: unset; margin: 0; padding: var(--esp-size-small); border-radius: var(--esp-size-border-radius); border: 1px solid var(--esp-color-border); background: var(--esp-color-layer-1); box-shadow: 0 4px 16px var(--esp-color-shadow); color: var(--esp-color-text); font-family: var(--esp-font-body); font-size: var(--esp-size-font); opacity: 0; transition: opacity 150ms ease-in; overflow: visible; } .picker-popover.visible { opacity: 1; } /* ── Calendar ────────────────────────────────────── */ .calendar { display: flex; flex-direction: column; gap: var(--esp-size-tiny); user-select: none; overflow: hidden; } .cal-body { will-change: transform; } .cal-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--esp-size-tiny); } .cal-title { font-weight: bold; font-size: var(--esp-type-normal); color: var(--esp-color-headings); } .nav-btn { display: grid; place-content: center; background: none; border: none; cursor: pointer; padding: var(--esp-size-tiny); border-radius: var(--esp-size-border-radius); color: var(--esp-color-text); transition: background-color 120ms ease; > svg { height: var(--esp-size-normal); width: var(--esp-size-normal); } &:hover { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; } } /* ── Weekday labels ──────────────────────────────── */ .weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .weekday-label { font-size: var(--esp-type-tiny); font-weight: 600; color: var(--esp-color-headings); text-decoration: none; padding: var(--esp-size-tiny) 0; } /* ── Day grid ────────────────────────────────────── */ .day-grid { display: flex; flex-direction: column; } /* Show the focused-day ring only when the grid itself contains focus, so it disappears when the user tabs to the nav arrows or time picker. */ .day-grid:focus-within .day-cell.focused { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } .day-row { display: grid; grid-template-columns: repeat(7, 1fr); } /* ── Day cell ────────────────────────────────────── */ .day-cell { --_cell-size: 2.4em; position: relative; display: grid; place-content: center; width: var(--_cell-size); height: var(--_cell-size); border: none; border-radius: var(--esp-size-border-radius); background: none; cursor: pointer; font-family: inherit; font-size: inherit; color: var(--esp-color-text); transition: background-color 100ms ease, color 100ms ease; &:hover:not(.disabled):not(.selected) { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } /* Outside month — dim */ &.outside-month { opacity: 0.38; } /* Today ring */ &.today { font-weight: bold; box-shadow: inset 0 0 0 1px var(--esp-color-border); border-radius: var(--esp-size-border-radius); } /* Selected / range endpoints */ &.selected { background-color: var(--esp-color-layer-3); color: var(--esp-color-action-text); font-weight: bold; } /* Range span highlight — washed-out brand colour */ &.in-range { background-color: oklch(from var(--esp-color-layer-3) calc(l + 0.15) calc(c * 0.4) h); border-radius: 0; } &.range-start { border-radius: var(--esp-size-border-radius) 0 0 var(--esp-size-border-radius); } &.range-end { border-radius: 0 var(--esp-size-border-radius) var(--esp-size-border-radius) 0; } /* Disabled */ &.disabled { opacity: 0.3; cursor: not-allowed; } } /* ── Time picker ─────────────────────────────────── */ .time-picker { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--esp-size-tiny); padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); white-space: nowrap; /* Push the action buttons to the right edge */ > esp-button:first-of-type { margin-left: auto; } } /* Only-time mode: no top border */ :host([mode=\"time\"]) .time-picker { border-top: none; margin-top: 0; padding-top: 0; } .popover-actions { display: flex; gap: var(--esp-size-tiny); align-items: center; justify-content: flex-end; padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); } .time-sep { font-size: var(--esp-type-medium); font-weight: bold; color: var(--esp-color-headings); padding: 0 2px; } `",
-          "description": "Component-specific styles for `esp-date-picker`."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "datePickerStyles",
-          "declaration": {
-            "name": "datePickerStyles",
-            "module": "dist/date-picker/helpers/styles.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "dist/date-picker/helpers/types.js",
-      "declarations": [],
-      "exports": []
-    },
     {
       "kind": "javascript-module",
       "path": "dist/tree/esp-tree-item.js",
@@ -90508,6 +90899,462 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/calendar-grid.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseDateBound",
+          "return": {
+            "type": {
+              "text": "Temporal.PlainDate | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "iso",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "Safely parse an ISO date string, returning `null` on failure."
+        },
+        {
+          "kind": "function",
+          "name": "isDateDisabled",
+          "return": {
+            "type": {
+              "text": "boolean"
+            }
+          },
+          "parameters": [
+            {
+              "name": "date",
+              "type": {
+                "text": "Temporal.PlainDate"
+              }
+            },
+            {
+              "name": "min",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "max",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            }
+          ],
+          "description": "Return `true` if the date falls outside the min/max range."
+        },
+        {
+          "kind": "function",
+          "name": "getSelectedDate",
+          "return": {
+            "type": {
+              "text": "Temporal.PlainDate | null"
+            }
+          },
+          "parameters": [
+            {
+              "name": "parsed",
+              "type": {
+                "text": "ParsedValue"
+              }
+            }
+          ],
+          "description": "Extract the single selected date from a parsed value (date / datetime only)."
+        },
+        {
+          "kind": "function",
+          "name": "getEffectiveRange",
+          "return": {
+            "type": {
+              "text": "{ start: Temporal.PlainDate | null; end: Temporal.PlainDate | null }"
+            }
+          },
+          "parameters": [
+            {
+              "name": "mode",
+              "type": {
+                "text": "DatePickerMode"
+              }
+            },
+            {
+              "name": "parsed",
+              "type": {
+                "text": "ParsedValue"
+              }
+            },
+            {
+              "name": "rangeAnchor",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "rangePreview",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            }
+          ],
+          "description": "Compute the effective start/end for range grid highlighting.\n\nDuring the `start` phase (anchor set, waiting for second click),\nthe preview hover date is used as the tentative end. The pair\nis always normalised so start <= end."
+        },
+        {
+          "kind": "function",
+          "name": "generateCalendarGrid",
+          "return": {
+            "type": {
+              "text": "CalendarDay[]"
+            }
+          },
+          "parameters": [
+            {
+              "name": "month",
+              "type": {
+                "text": "Temporal.PlainYearMonth"
+              }
+            },
+            {
+              "name": "selectedDate",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "rangeStart",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "rangeEnd",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "minDate",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            },
+            {
+              "name": "maxDate",
+              "type": {
+                "text": "Temporal.PlainDate | null"
+              }
+            }
+          ],
+          "description": "Generate a 6x7 calendar grid for the given month. Each cell\ncarries flags for rendering (today, selected, range, disabled,\noutside-month, etc.)."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseDateBound",
+          "declaration": {
+            "name": "parseDateBound",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "isDateDisabled",
+          "declaration": {
+            "name": "isDateDisabled",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getSelectedDate",
+          "declaration": {
+            "name": "getSelectedDate",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "getEffectiveRange",
+          "declaration": {
+            "name": "getEffectiveRange",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "generateCalendarGrid",
+          "declaration": {
+            "name": "generateCalendarGrid",
+            "module": "dist/date-picker/helpers/calendar-grid.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/constants.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "GRID_ROWS",
+          "type": {
+            "text": "number"
+          },
+          "default": "6"
+        },
+        {
+          "kind": "variable",
+          "name": "GRID_COLS",
+          "type": {
+            "text": "number"
+          },
+          "default": "7"
+        },
+        {
+          "kind": "variable",
+          "name": "GRID_SIZE"
+        },
+        {
+          "kind": "variable",
+          "name": "WEEKDAY_LABELS",
+          "type": {
+            "text": "array"
+          },
+          "default": "[\"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\", \"Su\"]",
+          "description": "Monday-start day-of-week headers."
+        },
+        {
+          "kind": "variable",
+          "name": "MONTH_NAMES",
+          "type": {
+            "text": "array"
+          },
+          "default": "[ \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\", ]",
+          "description": "Month names for the header."
+        },
+        {
+          "kind": "variable",
+          "name": "HOURS_12",
+          "description": "Hours 1–12 for the 12-hour clock picker."
+        },
+        {
+          "kind": "variable",
+          "name": "MINUTES_60",
+          "description": "Minutes 0–59 for the minute picker."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "GRID_ROWS",
+          "declaration": {
+            "name": "GRID_ROWS",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GRID_COLS",
+          "declaration": {
+            "name": "GRID_COLS",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GRID_SIZE",
+          "declaration": {
+            "name": "GRID_SIZE",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "WEEKDAY_LABELS",
+          "declaration": {
+            "name": "WEEKDAY_LABELS",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MONTH_NAMES",
+          "declaration": {
+            "name": "MONTH_NAMES",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HOURS_12",
+          "declaration": {
+            "name": "HOURS_12",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "MINUTES_60",
+          "declaration": {
+            "name": "MINUTES_60",
+            "module": "dist/date-picker/helpers/constants.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/parsing.js",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "parseValue",
+          "return": {
+            "type": {
+              "text": "ParsedValue"
+            }
+          },
+          "parameters": [
+            {
+              "name": "raw",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "mode",
+              "type": {
+                "text": "DatePickerMode"
+              }
+            }
+          ],
+          "description": "Parse a raw ISO 8601 value string into a structured `ParsedValue`\nbased on the picker mode. Returns `{ kind: \"none\" }` for empty or\nunparseable input."
+        },
+        {
+          "kind": "function",
+          "name": "formatDate",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "d",
+              "type": {
+                "text": "Temporal.PlainDate"
+              }
+            }
+          ],
+          "description": "Format a `PlainDate` as \"Month Day, Year\"."
+        },
+        {
+          "kind": "function",
+          "name": "formatTime",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "t",
+              "type": {
+                "text": "Temporal.PlainTime"
+              }
+            }
+          ],
+          "description": "Format a `PlainTime` as \"H:MM AM/PM\"."
+        },
+        {
+          "kind": "function",
+          "name": "displayValue",
+          "return": {
+            "type": {
+              "text": "string"
+            }
+          },
+          "parameters": [
+            {
+              "name": "parsed",
+              "type": {
+                "text": "ParsedValue"
+              }
+            }
+          ],
+          "description": "Build the human-readable display string for the input field\nfrom a parsed value."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "parseValue",
+          "declaration": {
+            "name": "parseValue",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "formatDate",
+          "declaration": {
+            "name": "formatDate",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "formatTime",
+          "declaration": {
+            "name": "formatTime",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "displayValue",
+          "declaration": {
+            "name": "displayValue",
+            "module": "dist/date-picker/helpers/parsing.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/styles.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "datePickerStyles",
+          "default": "css` /* ── Error state ─────────────────────────────────── */ .temporal-error { font-family: var( --_esp-font-body-effective, var(--esp-font-body, var(--_esp-font-body-fallback)) ); font-size: var(--esp-type-small); color: var(--esp-color-danger-text); padding: var(--esp-size-padding); } /* ── Trigger field ───────────────────────────────── */ .esp-field { display: grid; grid-template-columns: 1fr min-content; cursor: pointer; > input.esp-input { cursor: pointer; width: auto; } > .field-icon { display: grid; place-content: center; cursor: pointer; > svg { height: calc(1.2 * var(--esp-size-font)); width: calc(1.2 * var(--esp-size-font)); margin: 0 var(--esp-size-tiny); } } } /* ── Popover shell (native top-layer) ────────────── */ .picker-popover { position: fixed; inset: unset; margin: 0; padding: var(--esp-size-small); border-radius: var(--esp-size-border-radius); border: 1px solid var(--esp-color-border); background: var(--esp-color-layer-1); box-shadow: 0 4px 16px var(--esp-color-shadow); color: var(--esp-color-text); font-family: var( --_esp-font-body-effective, var(--esp-font-body, var(--_esp-font-body-fallback)) ); font-size: var(--esp-size-font); opacity: 0; transition: opacity 150ms ease-in; overflow: visible; } .picker-popover.visible { opacity: 1; } /* ── Calendar ────────────────────────────────────── */ .calendar { display: flex; flex-direction: column; gap: var(--esp-size-tiny); user-select: none; overflow: hidden; } .cal-body { will-change: transform; } .cal-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--esp-size-tiny); } .cal-title { font-weight: bold; font-size: var(--esp-type-normal); color: var(--esp-color-headings); } .nav-btn { display: grid; place-content: center; background: none; border: none; cursor: pointer; padding: var(--esp-size-tiny); border-radius: var(--esp-size-border-radius); color: var(--esp-color-text); transition: background-color 120ms ease; > svg { height: var(--esp-size-normal); width: var(--esp-size-normal); } &:hover { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; } } /* ── Weekday labels ──────────────────────────────── */ .weekday-row { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .weekday-label { font-size: var(--esp-type-tiny); font-weight: 600; color: var(--esp-color-headings); text-decoration: none; padding: var(--esp-size-tiny) 0; } /* ── Day grid ────────────────────────────────────── */ .day-grid { display: flex; flex-direction: column; } /* Show the focused-day ring only when the grid itself contains focus, so it disappears when the user tabs to the nav arrows or time picker. */ .day-grid:focus-within .day-cell.focused { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } .day-row { display: grid; grid-template-columns: repeat(7, 1fr); } /* ── Day cell ────────────────────────────────────── */ .day-cell { --_cell-size: 2.4em; position: relative; display: grid; place-content: center; width: var(--_cell-size); height: var(--_cell-size); border: none; border-radius: var(--esp-size-border-radius); background: none; cursor: pointer; font-family: inherit; font-size: inherit; color: var(--esp-color-text); transition: background-color 100ms ease, color 100ms ease; &:hover:not(.disabled):not(.selected) { background-color: var(--esp-color-layer-3); } &:focus-visible { outline: 2px solid var(--esp-color-action-text); outline-offset: -2px; z-index: 1; } /* Outside month — dim */ &.outside-month { opacity: 0.38; } /* Today ring */ &.today { font-weight: bold; box-shadow: inset 0 0 0 1px var(--esp-color-border); border-radius: var(--esp-size-border-radius); } /* Selected / range endpoints */ &.selected { background-color: var(--esp-color-layer-3); color: var(--esp-color-action-text); font-weight: bold; } /* Range span highlight — washed-out brand colour */ &.in-range { background-color: oklch(from var(--esp-color-layer-3) calc(l + 0.15) calc(c * 0.4) h); border-radius: 0; } &.range-start { border-radius: var(--esp-size-border-radius) 0 0 var(--esp-size-border-radius); } &.range-end { border-radius: 0 var(--esp-size-border-radius) var(--esp-size-border-radius) 0; } /* Disabled */ &.disabled { opacity: 0.3; cursor: not-allowed; } } /* ── Time picker ─────────────────────────────────── */ .time-picker { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--esp-size-tiny); padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); white-space: nowrap; /* Push the action buttons to the right edge */ > esp-button:first-of-type { margin-left: auto; } } /* Only-time mode: no top border */ :host([mode=\"time\"]) .time-picker { border-top: none; margin-top: 0; padding-top: 0; } .popover-actions { display: flex; gap: var(--esp-size-tiny); align-items: center; justify-content: flex-end; padding-top: var(--esp-size-small); border-top: 1px solid var(--esp-color-border); margin-top: var(--esp-size-small); } .time-sep { font-size: var(--esp-type-medium); font-weight: bold; color: var(--esp-color-headings); padding: 0 2px; } `",
+          "description": "Component-specific styles for `esp-date-picker`."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "datePickerStyles",
+          "declaration": {
+            "name": "datePickerStyles",
+            "module": "dist/date-picker/helpers/styles.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/date-picker/helpers/types.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "dist/root/helpers/compute-semantic-properties.js",