@taprootio/espalier 4.1.0 → 4.2.0

package/espalier.css-data.json

@@ -2,873 +2,2020 @@
   "version": 1.1,
   "properties": [
     {
-      "name": "--esp-scheme",
-      "description": "The active color scheme — \"light\" or \"dark\"."
+      "name": "--esp-action-menu-background",
+      "description": "Menu surface background. Defaults to `var(--esp-color-layer-1)`."
     },
     {
-      "name": "--esp-seed-color",
-      "description": "The OKLCH seed color string that drives the entire palette."
+      "name": "--esp-action-menu-border",
+      "description": "Menu border. Defaults to `1px solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-action-menu-item-focus-shadow",
+      "description": "Focus ring applied to keyboard-focused items. Defaults to `0 0 0 2px var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-action-menu-item-gap",
+      "description": "Space between the optional icon and label. Defaults to `var(--esp-size-tiny)`."
+    },
+    {
+      "name": "--esp-action-menu-item-hover-background",
+      "description": "Background used when an enabled item is hovered or focused. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-action-menu-item-icon-background",
+      "description": "Background used behind right-positioned icons. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-action-menu-item-icon-border-color",
+      "description": "Divider color used before right-positioned icons. Defaults to `var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-action-menu-item-icon-hover-background",
+      "description": "Background used behind right-positioned icons when an enabled item is hovered or focused. Defaults to `var(--esp-color-layer-3)`."
+    },
+    {
+      "name": "--esp-action-menu-item-padding",
+      "description": "Padding inside each menu item. Defaults to `var(--esp-size-tiny) var(--esp-size-small)`."
+    },
+    {
+      "name": "--esp-action-menu-min-width",
+      "description": "Minimum menu width. Defaults to `12rem`."
+    },
+    {
+      "name": "--esp-action-menu-shadow",
+      "description": "Menu shadow. Defaults to `2px 2px 4px var(--esp-color-shadow)`."
+    },
+    {
+      "name": "--esp-avatar-border-radius",
+      "description": "Border radius of the image and initials fallback. Defaults to `50%`."
+    },
+    {
+      "name": "--esp-avatar-size",
+      "description": "Width and height of the avatar. Automatically set by the `size` attribute."
+    },
+    {
+      "name": "--esp-badge-border-radius",
+      "description": "Border radius of the badge shell. Defaults to `999px`."
+    },
+    {
+      "name": "--esp-box-background",
+      "description": "Adds a layer in the background of the box. Intended for background images or gradients."
+    },
+    {
+      "name": "--esp-box-background-image",
+      "description": ""
+    },
+    {
+      "name": "--esp-box-background-image-opacity",
+      "description": ""
+    },
+    {
+      "name": "--esp-box-background-opacity",
+      "description": "The opacity of the background layer."
+    },
+    {
+      "name": "--esp-box-shadow",
+      "description": "The box's drop shadow. Defaults to the theme's `--esp-shadow-1` elevation."
+    },
+    {
+      "name": "--esp-breadcrumb-color",
+      "description": "The text color of the breadcrumb link."
+    },
+    {
+      "name": "--esp-breadcrumb-hover-color",
+      "description": "The text color on hover."
+    },
+    {
+      "name": "--esp-breadcrumb-separator-color",
+      "description": "Set the color of the separator. It defaults to the semantic heading color so navigation structure stays visible in light and dark themes."
+    },
+    {
+      "name": "--esp-button-group-divider",
+      "description": "The border style between grouped buttons. Defaults to `1px dotted var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-button-incognito-padding",
+      "description": "The padding for the incognito button style."
+    },
+    {
+      "name": "--esp-button-padding",
+      "description": "The padding inside the button label and icon areas."
+    },
+    {
+      "name": "--esp-card-min",
+      "description": ""
+    },
+    {
+      "name": "--esp-checkbox-focus-shadow",
+      "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`."
+    },
+    {
+      "name": "--esp-checkbox-icon-color",
+      "description": "The stroke color of the checkbox icon. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-checkbox-size",
+      "description": "The width and height of the checkbox icon. Defaults to `var(--esp-size-normal-to-medium)`."
+    },
+    {
+      "name": "--esp-color-action-background",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-action-text",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-analogous-left",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-analogous-right",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-background",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-border",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-box-background",
+      "description": "The background color of the box."
+    },
+    {
+      "name": "--esp-color-burger",
+      "description": "The color of the burger lines when closed."
+    },
+    {
+      "name": "--esp-color-burger-hover",
+      "description": "The hover color of the burger lines when closed."
+    },
+    {
+      "name": "--esp-color-burger-opened",
+      "description": "The color of the burger lines when open."
+    },
+    {
+      "name": "--esp-color-burger-opened-hover",
+      "description": "The hover color of the burger lines when open."
+    },
+    {
+      "name": "--esp-color-complementary",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-danger",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-danger-text",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-dialog-bg",
+      "description": "The background color of the dialog overlay."
+    },
+    {
+      "name": "--esp-color-headings",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-headings-hover",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-info",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-input-caret",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-input-selection",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-input-selection-bg",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-layer-1",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-layer-2",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-layer-3",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-layer-4",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-link",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-link-hover",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-link-hover-bg",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-picker-bg",
+      "description": "The background color of the picker menu items."
+    },
+    {
+      "name": "--esp-color-picker-bg-alt",
+      "description": "The alternate background color for picker menu items."
+    },
+    {
+      "name": "--esp-color-picker-bg-alt-hover",
+      "description": "The hover background color of alternating picker menu items."
+    },
+    {
+      "name": "--esp-color-picker-bg-hover",
+      "description": "The hover background color of regular picker menu items."
+    },
+    {
+      "name": "--esp-color-primary",
+      "description": ""
     },
     {
       "name": "--esp-color-series-1",
       "description": "First categorical data-series color."
     },
+    {
+      "name": "--esp-color-series-1-ink",
+      "description": "First series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
+    },
+    {
+      "name": "--esp-color-series-1-tint",
+      "description": "First series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
+    },
+    {
+      "name": "--esp-color-series-1-wash",
+      "description": "First series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
+    },
     {
       "name": "--esp-color-series-2",
       "description": "Second categorical data-series color."
     },
+    {
+      "name": "--esp-color-series-2-ink",
+      "description": "Second series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
+    },
+    {
+      "name": "--esp-color-series-2-tint",
+      "description": "Second series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
+    },
+    {
+      "name": "--esp-color-series-2-wash",
+      "description": "Second series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
+    },
     {
       "name": "--esp-color-series-3",
       "description": "Third categorical data-series color."
     },
+    {
+      "name": "--esp-color-series-3-ink",
+      "description": "Third series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
+    },
+    {
+      "name": "--esp-color-series-3-tint",
+      "description": "Third series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
+    },
+    {
+      "name": "--esp-color-series-3-wash",
+      "description": "Third series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
+    },
     {
       "name": "--esp-color-series-4",
       "description": "Fourth categorical data-series color."
     },
+    {
+      "name": "--esp-color-series-4-ink",
+      "description": "Fourth series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
+    },
+    {
+      "name": "--esp-color-series-4-tint",
+      "description": "Fourth series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
+    },
+    {
+      "name": "--esp-color-series-4-wash",
+      "description": "Fourth series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
+    },
     {
       "name": "--esp-color-series-5",
       "description": "Fifth categorical data-series color."
     },
+    {
+      "name": "--esp-color-series-5-ink",
+      "description": "Fifth series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
+    },
+    {
+      "name": "--esp-color-series-5-tint",
+      "description": "Fifth series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
+    },
+    {
+      "name": "--esp-color-series-5-wash",
+      "description": "Fifth series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
+    },
     {
       "name": "--esp-color-series-6",
       "description": "Sixth categorical data-series color."
     },
+    {
+      "name": "--esp-color-series-6-ink",
+      "description": "Sixth series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
+    },
+    {
+      "name": "--esp-color-series-6-tint",
+      "description": "Sixth series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
+    },
+    {
+      "name": "--esp-color-series-6-wash",
+      "description": "Sixth series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
+    },
     {
       "name": "--esp-color-series-7",
       "description": "Seventh categorical data-series color."
     },
+    {
+      "name": "--esp-color-series-7-ink",
+      "description": "Seventh series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
+    },
+    {
+      "name": "--esp-color-series-7-tint",
+      "description": "Seventh series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
+    },
+    {
+      "name": "--esp-color-series-7-wash",
+      "description": "Seventh series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
+    },
     {
       "name": "--esp-color-series-8",
       "description": "Eighth categorical data-series color."
     },
-
     {
-      "name": "--esp-color-primary",
-      "description": "The seed color, gamut-mapped to sRGB."
+      "name": "--esp-color-series-8-ink",
+      "description": "Eighth series pushed to the text contrast tier against the local background (best-contrast pole when a mid-lightness surface makes the tier unreachable)."
     },
     {
-      "name": "--esp-color-analogous-left",
-      "description": "Analogous variant (seed hue minus the analogous angle)."
+      "name": "--esp-color-series-8-tint",
+      "description": "Eighth series tinted over the local background (12% identity in OKLab) for grounds behind ordinary text; theme zones re-emit it against their own canvas."
     },
     {
-      "name": "--esp-color-analogous-right",
-      "description": "Analogous variant (seed hue plus the analogous angle)."
+      "name": "--esp-color-series-8-wash",
+      "description": "Eighth series washed toward the local background (75% identity in OKLab) for large fills; theme zones re-emit it against their own canvas."
     },
     {
-      "name": "--esp-color-complementary",
-      "description": "Complementary variant (seed hue plus 180°)."
+      "name": "--esp-color-shadow",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-split-complementary-left",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-split-complementary-right",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-success",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-text",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-triadic-left",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-triadic-right",
+      "description": ""
+    },
+    {
+      "name": "--esp-color-type-caption",
+      "description": "Caption ink enforced to Lc 90 against the local background."
+    },
+    {
+      "name": "--esp-color-type-label",
+      "description": "Label ink enforced to Lc 75 against the local background."
+    },
+    {
+      "name": "--esp-color-type-lead",
+      "description": "Lead-paragraph ink enforced to Lc 75 against the local background."
+    },
+    {
+      "name": "--esp-color-type-overline",
+      "description": "Overline ink enforced to Lc 90 against the local background."
+    },
+    {
+      "name": "--esp-color-warning",
+      "description": ""
+    },
+    {
+      "name": "--esp-details-color-background",
+      "description": "The background color."
+    },
+    {
+      "name": "--esp-details-color-border",
+      "description": "The border color."
+    },
+    {
+      "name": "--esp-details-color-indicator",
+      "description": "The color of the open/close indicator."
+    },
+    {
+      "name": "--esp-details-color-summary-background",
+      "description": "The summary row background color."
+    },
+    {
+      "name": "--esp-details-color-summary-background-active",
+      "description": "The summary row background when the details element is open."
+    },
+    {
+      "name": "--esp-details-color-summary-hover-background",
+      "description": "The summary row background on hover."
+    },
+    {
+      "name": "--esp-details-group-color-border",
+      "description": "The border color of the group container."
+    },
+    {
+      "name": "--esp-details-size-padding",
+      "description": "The padding inside the content area and summary row."
+    },
+    {
+      "name": "--esp-dialog-bg-opacity",
+      "description": "The opacity of the dialog overlay background."
+    },
+    {
+      "name": "--esp-field-background",
+      "description": "Background color of the shared field shell. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-field-border-color",
+      "description": "Border color of the shared field shell. Defaults to `var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-field-border-width",
+      "description": "Border width of the shared field shell. Defaults to `1px`."
+    },
+    {
+      "name": "--esp-field-focus-bg",
+      "description": "Focus background color of the shared field shell. Derived from `--esp-field-background`."
+    },
+    {
+      "name": "--esp-field-focus-shadow",
+      "description": "Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`."
+    },
+    {
+      "name": "--esp-field-hover-bg",
+      "description": "Hover background color of the shared field shell. Derived from `--esp-field-background`."
+    },
+    {
+      "name": "--esp-field-text-color",
+      "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-flyout-background",
+      "description": "The background color of the panel. Defaults to `var(--esp-color-background)`."
+    },
+    {
+      "name": "--esp-flyout-border",
+      "description": "The border on the panel's leading edge. Defaults to the tear-off perforation, `1px dotted var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-flyout-padding",
+      "description": "Padding inside the panel's header and content regions. Defaults to `var(--esp-size-padding)`."
+    },
+    {
+      "name": "--esp-flyout-radius",
+      "description": "The radius of the panel's trailing corners. Defaults to `var(--esp-size-border-radius)`; the overlay drawer squares them."
+    },
+    {
+      "name": "--esp-flyout-shadow",
+      "description": "The panel's shadow. Defaults to `none` in the gutter/docked modes (the perforation does the separating) and to a drawer shadow in overlay mode."
+    },
+    {
+      "name": "--esp-flyout-z-index",
+      "description": "Stack order of the overlay-drawer mode. Defaults to `3000` — above page chrome, below the dialog drop zone (4000). Set it on the `esp-page` (or an ancestor), not on the flyout itself: the page reads the same token to hoist the drawer's aside above its header."
+    },
+    {
+      "name": "--esp-focus-picker-focus-outline",
+      "description": "Marker focus-visible outline."
+    },
+    {
+      "name": "--esp-focus-picker-gap",
+      "description": "Gap between the stage and previews."
+    },
+    {
+      "name": "--esp-focus-picker-marker-border",
+      "description": "Focal marker border."
+    },
+    {
+      "name": "--esp-focus-picker-marker-color",
+      "description": "Focal marker fill."
+    },
+    {
+      "name": "--esp-focus-picker-marker-shadow",
+      "description": "Focal marker shadow."
+    },
+    {
+      "name": "--esp-focus-picker-marker-size",
+      "description": "Focal marker diameter."
+    },
+    {
+      "name": "--esp-focus-picker-stage-background",
+      "description": "Empty/loading stage color."
+    },
+    {
+      "name": "--esp-font-body",
+      "description": ""
+    },
+    {
+      "name": "--esp-font-brand",
+      "description": ""
+    },
+    {
+      "name": "--esp-font-headings",
+      "description": ""
+    },
+    {
+      "name": "--esp-font-monospace",
+      "description": ""
+    },
+    {
+      "name": "--esp-font-weight-body",
+      "description": ""
+    },
+    {
+      "name": "--esp-font-weight-brand",
+      "description": ""
+    },
+    {
+      "name": "--esp-font-weight-headings",
+      "description": ""
+    },
+    {
+      "name": "--esp-font-weight-monospace",
+      "description": ""
+    },
+    {
+      "name": "--esp-footer-background",
+      "description": "Base footer color. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-footer-background-blend-mode",
+      "description": "Decorative layer blend mode. Defaults to `normal`."
+    },
+    {
+      "name": "--esp-footer-background-image",
+      "description": "Decorative image or gradient layer. Defaults to `none`."
+    },
+    {
+      "name": "--esp-footer-background-image-opacity",
+      "description": "Decorative layer opacity. Defaults to `1`."
+    },
+    {
+      "name": "--esp-footer-background-position",
+      "description": "Decorative layer position. Defaults to `0 0`."
+    },
+    {
+      "name": "--esp-footer-background-repeat",
+      "description": "Decorative layer repeat behavior. Defaults to `repeat`."
+    },
+    {
+      "name": "--esp-footer-background-size",
+      "description": "Decorative layer size. Defaults to `auto`."
+    },
+    {
+      "name": "--esp-footer-border",
+      "description": "Block-start footer border. Defaults to `1px solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-footer-brand-logo-max-width",
+      "description": "Configured logo maximum inline size. Defaults to `12rem`."
+    },
+    {
+      "name": "--esp-footer-brand-logo-size",
+      "description": "Configured logo block size. Defaults to `3rem`."
+    },
+    {
+      "name": "--esp-footer-color",
+      "description": "Body text color. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-footer-column-gap",
+      "description": "Gap between link-group columns and major primary regions. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-content-lead",
+      "description": "Fraction of surplus placed before content (`0`, `0.5`, or `1`). Defaults to `0`."
+    },
+    {
+      "name": "--esp-footer-content-max-width",
+      "description": "Surface-alignment cap published by `esp-page`. Defaults to `100%`."
+    },
+    {
+      "name": "--esp-footer-focus-outline",
+      "description": "Focus-visible outline. Defaults to `2px solid var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-footer-heading-color",
+      "description": "Heading and configured-brand color. Defaults to `var(--esp-color-headings)`."
+    },
+    {
+      "name": "--esp-footer-link-color",
+      "description": "Link color. Defaults to `var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-footer-link-group-gap",
+      "description": "Space between a link-group heading and its links. Defaults to `var(--esp-size-small)`."
+    },
+    {
+      "name": "--esp-footer-link-group-min-width",
+      "description": "Intrinsic minimum link-group column width. Defaults to `10rem`."
+    },
+    {
+      "name": "--esp-footer-link-hover-color",
+      "description": "Hovered link color. Defaults to `var(--esp-color-link-hover)`."
+    },
+    {
+      "name": "--esp-footer-padding-block",
+      "description": "Content block padding. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-padding-inline",
+      "description": "Content inline padding. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-row-gap",
+      "description": "Vertical gap between footer grid rows and link groups stacked in `esp-footer-column`. Defaults to `var(--esp-size-big)`."
+    },
+    {
+      "name": "--esp-footer-section-gap",
+      "description": "Gap between media, primary, and bottom regions. Defaults to `var(--esp-size-big)`."
+    },
+    {
+      "name": "--esp-form-item-error-background",
+      "description": "The background color of the visible error badge."
+    },
+    {
+      "name": "--esp-form-item-error-color",
+      "description": "The color of the visible error badge text."
+    },
+    {
+      "name": "--esp-form-item-error-field-background",
+      "description": "The background color applied to slotted fields while an error is shown."
+    },
+    {
+      "name": "--esp-form-item-error-field-border-color",
+      "description": "The border color applied to slotted fields while an error is shown."
+    },
+    {
+      "name": "--esp-form-item-error-field-focus-shadow",
+      "description": "The focus shadow color applied to slotted fields while an error is shown."
+    },
+    {
+      "name": "--esp-form-item-error-field-text-color",
+      "description": "The text color applied to slotted fields while an error is shown."
+    },
+    {
+      "name": "--esp-form-item-font",
+      "description": "The font family for the form item."
+    },
+    {
+      "name": "--esp-form-item-font-size",
+      "description": "The font size for the form item."
+    },
+    {
+      "name": "--esp-form-item-hint-color",
+      "description": "The color of the hint text. Defaults to a muted variant of the body text color."
+    },
+    {
+      "name": "--esp-form-item-hint-font-size",
+      "description": "The font size of the hint text. Defaults to `var(--esp-type-tiny)`."
+    },
+    {
+      "name": "--esp-form-item-label-color",
+      "description": "The color of the label text."
+    },
+    {
+      "name": "--esp-form-item-warning-background",
+      "description": "The background color of the visible warning badge."
+    },
+    {
+      "name": "--esp-form-item-warning-color",
+      "description": "The color of the visible warning badge text."
+    },
+    {
+      "name": "--esp-form-item-warning-field-background",
+      "description": "The background color applied to slotted fields while a warning is shown."
+    },
+    {
+      "name": "--esp-form-item-warning-field-border-color",
+      "description": "The border color applied to slotted fields while a warning is shown."
+    },
+    {
+      "name": "--esp-form-item-warning-field-focus-shadow",
+      "description": "The focus shadow color applied to slotted fields while a warning is shown."
+    },
+    {
+      "name": "--esp-form-item-warning-field-text-color",
+      "description": "The text color applied to slotted fields while a warning is shown."
+    },
+    {
+      "name": "--esp-grid-background",
+      "description": "Background color of the grid container. Defaults to `var(--esp-color-layer-1)`."
+    },
+    {
+      "name": "--esp-grid-border-inner",
+      "description": "Border style of the grid's internal section separators. Defaults to `2px solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-grid-border-outer",
+      "description": "Border style of the grid's outer edge. Defaults to `2px solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-grid-cell-border-color",
+      "description": "Cell divider color used throughout the grid. Defaults to `var(--esp-color-layer-3)`."
+    },
+    {
+      "name": "--esp-grid-header-active-background",
+      "description": "Background color used for sorted or hovered sortable headers. Defaults to `var(--esp-color-layer-3)`."
+    },
+    {
+      "name": "--esp-grid-header-background",
+      "description": "Background color of header rows and pinned header cells. Defaults to `var(--esp-color-layer-4)`."
+    },
+    {
+      "name": "--esp-grid-link-color",
+      "description": "Link color used inside grid cells. Defaults to `var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-grid-link-hover-color",
+      "description": "Link hover decoration color used inside grid cells. Defaults to `var(--esp-color-link-hover)`."
+    },
+    {
+      "name": "--esp-grid-row-background-even",
+      "description": "Background color of even rows. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-grid-row-background-odd",
+      "description": "Background color of odd rows. Defaults to `var(--esp-color-layer-1)`."
+    },
+    {
+      "name": "--esp-grid-row-hover-background",
+      "description": "Background color of hovered rows. Defaults to `var(--esp-color-layer-3)`."
+    },
+    {
+      "name": "--esp-grid-row-hover-border-color",
+      "description": "Divider color used while rows are hovered. Defaults to `var(--esp-color-layer-4)`."
+    },
+    {
+      "name": "--esp-grid-text-color",
+      "description": "Text color used by the grid. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-header-background",
+      "description": "The background color of the header bar. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-header-border",
+      "description": "The border style of the header. Defaults to `solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-header-border-width",
+      "description": "The border width of the header. Defaults to `0 0 1px 0`."
+    },
+    {
+      "name": "--esp-header-brand-color",
+      "description": "The configured brand text/logo color. Defaults to `var(--esp-color-headings)`."
+    },
+    {
+      "name": "--esp-header-brand-font-family",
+      "description": "The configured brand font family. Defaults to `var(--esp-font-brand, var(--esp-font-headings))`."
+    },
+    {
+      "name": "--esp-header-brand-font-size",
+      "description": "The configured brand text size. Defaults to `var(--esp-type-medium)`."
+    },
+    {
+      "name": "--esp-header-brand-font-weight",
+      "description": "The configured brand font weight. Defaults to `var(--esp-font-weight-brand, var(--esp-font-weight-headings))`."
+    },
+    {
+      "name": "--esp-header-brand-gap",
+      "description": "Space between a configured logo and brand text. Defaults to `var(--esp-size-tiny-to-small)`."
+    },
+    {
+      "name": "--esp-header-brand-hover-background",
+      "description": "The configured brand hover background. Defaults to `transparent`."
+    },
+    {
+      "name": "--esp-header-brand-hover-color",
+      "description": "The configured brand hover color. Defaults to `var(--esp-color-headings-hover)`."
+    },
+    {
+      "name": "--esp-header-brand-hover-decoration",
+      "description": "The configured brand hover text decoration. Defaults to `none`."
+    },
+    {
+      "name": "--esp-header-brand-inline-placement",
+      "description": "The CSS `justify-content` value for the brand container. Defaults to `start`."
+    },
+    {
+      "name": "--esp-header-brand-logo-max-width",
+      "description": "The configured logo maximum inline size. Defaults to `12rem`."
+    },
+    {
+      "name": "--esp-header-brand-logo-size",
+      "description": "The configured logo block size. Defaults to `calc(0.72 * var(--esp-header-height, calc(4.5 * var(--esp-size-small))))`."
+    },
+    {
+      "name": "--esp-header-brand-max-width",
+      "description": "The maximum inline size of configured brand content. Defaults to `min(36ch, 45vw)`."
+    },
+    {
+      "name": "--esp-header-brand-padding-inline",
+      "description": "Inline padding for the brand container. Defaults to `var(--esp-size-small)`."
+    },
+    {
+      "name": "--esp-header-brand-placement",
+      "description": "The CSS `place-content` value for the brand container. Defaults to `center`."
+    },
+    {
+      "name": "--esp-header-button-background",
+      "description": "The background color of the button. Defaults to `var(--esp-color-layer-3)`."
+    },
+    {
+      "name": "--esp-header-button-background-hover",
+      "description": "The background color of the button on hover. Defaults to `var(--esp-color-layer-4)`."
+    },
+    {
+      "name": "--esp-header-button-border-left",
+      "description": "The left border of the button. Defaults to `1px dotted var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-header-button-box-shadow",
+      "description": "The box shadow of the button. Defaults to `0px 0px 3px 0px var(--esp-color-shadow)`."
+    },
+    {
+      "name": "--esp-header-button-closed-color",
+      "description": "The color of the burger button when the menu is closed. Defaults to `var(--esp-color-headings)`."
+    },
+    {
+      "name": "--esp-header-button-closed-hover-color",
+      "description": "The hover color of the burger button when the menu is closed. Defaults to `var(--esp-color-headings-hover)`."
+    },
+    {
+      "name": "--esp-header-button-color",
+      "description": "The text and icon color of the button. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-header-button-open-color",
+      "description": "The color of the burger button when the menu is open. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-header-button-open-hover-color",
+      "description": "The hover color of the burger button when the menu is open. Defaults to `var(--esp-color-headings-hover)`."
+    },
+    {
+      "name": "--esp-header-button-stroke-width",
+      "description": "The stroke width of the burger button lines. Defaults to `0.45rem`."
+    },
+    {
+      "name": "--esp-header-color",
+      "description": "The text/icon color inherited by header controls. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-header-compact-height",
+      "description": "The height of compact scroll-reactive headers. Defaults to `max(44px, calc(3.5 * var(--esp-size-small)))`."
+    },
+    {
+      "name": "--esp-header-content-lead",
+      "description": "Surface-alignment contract set by `esp-page`: the fraction of the leftover width placed before the content, aligning it (`0` = start, `0.5` = center, `1` = end). Defaults to `0`."
+    },
+    {
+      "name": "--esp-header-content-max-width",
+      "description": "Surface-alignment contract set by `esp-page`: the maximum width the bar content is constrained to (the bar background stays full-bleed). Defaults to `100%` (no constraint). `esp-page` sets this to its resolved content cap."
+    },
+    {
+      "name": "--esp-header-extended-menu-border",
+      "description": "The border between the primary row and second-row menu in extended layouts. Defaults to `1px solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-header-extended-menu-height",
+      "description": "The second-row menu height for extended layouts. Defaults to `calc(3.5 * var(--esp-size-small))`."
+    },
+    {
+      "name": "--esp-header-height",
+      "description": "The height of the header bar. Defaults to `calc(4.5 * var(--esp-size-small))`."
+    },
+    {
+      "name": "--esp-header-progress-background",
+      "description": "Background color of the optional scroll progress bar. Defaults to `var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-header-progress-height",
+      "description": "Height of the optional scroll progress bar. Defaults to `3px`."
+    },
+    {
+      "name": "--esp-header-progress-track-background",
+      "description": "Track background of the optional scroll progress bar. Defaults to `transparent`."
+    },
+    {
+      "name": "--esp-header-scrolled-shadow",
+      "description": "Box shadow used by elevated scroll headers. Defaults to `0 2px 8px var(--esp-color-shadow)`."
+    },
+    {
+      "name": "--esp-header-shadow",
+      "description": "The box shadow of the header. Defaults to `0 0 2px var(--esp-color-shadow)`."
+    },
+    {
+      "name": "--esp-header-topbar-height",
+      "description": "The maximum height reserved for the optional topbar row. Defaults to `8rem`."
+    },
+    {
+      "name": "--esp-header-transparent-background",
+      "description": "Background used before scroll for transparent headers. Defaults to `transparent`."
+    },
+    {
+      "name": "--esp-header-transparent-color",
+      "description": "Brand/action color used before scroll for transparent headers. Defaults to `var(--esp-color-headings)`."
+    },
+    {
+      "name": "--esp-header-z-index",
+      "description": "The z-index of the header host. Defaults to `20`."
+    },
+    {
+      "name": "--esp-image-border",
+      "description": "Border; defaults to `2px solid var(--esp-color-border)` or none in banner mode."
+    },
+    {
+      "name": "--esp-image-border-radius",
+      "description": "Corner radius; defaults to `var(--esp-size-border-radius)` or zero in banner mode."
+    },
+    {
+      "name": "--esp-image-compact-width",
+      "description": "Component-width threshold; defaults to `40rem`."
+    },
+    {
+      "name": "--esp-image-duotone-highlight-color",
+      "description": "Duotone highlight stop; defaults to a light stop derived from the theme complementary."
+    },
+    {
+      "name": "--esp-image-duotone-shadow-color",
+      "description": "Duotone shadow stop; defaults to a dark stop derived from the theme primary."
+    },
+    {
+      "name": "--esp-image-object-position",
+      "description": "Final object-position override."
+    },
+    {
+      "name": "--esp-image-overlay-color",
+      "description": "Overlay text color; defaults to the theme heading color when the banner polarity matches the scheme."
+    },
+    {
+      "name": "--esp-image-overlay-padding",
+      "description": "Overlay content padding."
+    },
+    {
+      "name": "--esp-image-overlay-text-shadow",
+      "description": "Overlay text shadow; defaults to a soft polarity-matched halo. Set to `none` to disable."
+    },
+    {
+      "name": "--esp-image-preview-border-color",
+      "description": "The border color of the preview."
+    },
+    {
+      "name": "--esp-image-preview-overlay-text",
+      "description": "The text color used by upload and failure overlays."
+    },
+    {
+      "name": "--esp-image-preview-remove-color",
+      "description": "The text color of the remove button."
+    },
+    {
+      "name": "--esp-image-scrim-color",
+      "description": "Scrim ink; defaults to the theme background when the banner polarity matches the scheme, else a polarity-pinned derivation."
+    },
+    {
+      "name": "--esp-image-scrim-opacity",
+      "description": "Scrim-strength opacity override."
+    },
+    {
+      "name": "--esp-image-texture-blend-mode",
+      "description": "Texture blend-mode override."
+    },
+    {
+      "name": "--esp-image-texture-color",
+      "description": "Procedural texture ink; defaults to a theme-derived color following `banner-scheme`."
+    },
+    {
+      "name": "--esp-image-texture-image",
+      "description": "Consumer-supplied texture background image."
+    },
+    {
+      "name": "--esp-image-texture-image-opacity",
+      "description": "Consumer texture opacity."
+    },
+    {
+      "name": "--esp-image-texture-opacity",
+      "description": "Procedural texture opacity override."
+    },
+    {
+      "name": "--esp-image-texture-position",
+      "description": "Consumer texture position."
+    },
+    {
+      "name": "--esp-image-texture-repeat",
+      "description": "Consumer texture repeat."
+    },
+    {
+      "name": "--esp-image-texture-scale",
+      "description": "CSS-gradient texture pitch override."
+    },
+    {
+      "name": "--esp-image-texture-size",
+      "description": "Consumer texture size."
+    },
+    {
+      "name": "--esp-image-upload-preview-background",
+      "description": "The background color of the image preview area."
+    },
+    {
+      "name": "--esp-info-color-background",
+      "description": "The background color of the info box."
+    },
+    {
+      "name": "--esp-info-color-border",
+      "description": "The border color of the info box."
+    },
+    {
+      "name": "--esp-info-color-text",
+      "description": "The text color of the info box"
+    },
+    {
+      "name": "--esp-l-accent",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-border",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-ink",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-muted",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-raised-1",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-raised-2",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-raised-3",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-raised-4",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-shadow",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-surface",
+      "description": ""
+    },
+    {
+      "name": "--esp-l-text",
+      "description": ""
+    },
+    {
+      "name": "--esp-lightbox-bg",
+      "description": "The background color of the lightbox overlay (falls through to --esp-vellum-background, then --esp-color-layer-3)."
+    },
+    {
+      "name": "--esp-lightbox-bg-opacity",
+      "description": "The opacity of the overlay background (falls through to --esp-vellum-opacity, default: 0.85)."
+    },
+    {
+      "name": "--esp-measure",
+      "description": ""
+    },
+    {
+      "name": "--esp-measure-wide",
+      "description": ""
+    },
+    {
+      "name": "--esp-menu-background",
+      "description": "Background color of vertical and drawer menus."
+    },
+    {
+      "name": "--esp-menu-border-color",
+      "description": "Border color of menu rails and drawers."
+    },
+    {
+      "name": "--esp-menu-drawer-shadow",
+      "description": "Box shadow for the drawer overlay."
+    },
+    {
+      "name": "--esp-menu-drawer-width",
+      "description": "Drawer width. Defaults to `min(22rem, 86vw)`."
+    },
+    {
+      "name": "--esp-menu-group-background",
+      "description": "Background color of the group header."
+    },
+    {
+      "name": "--esp-menu-group-border-color",
+      "description": "Border color of the group."
+    },
+    {
+      "name": "--esp-menu-group-color",
+      "description": "Text color of the group header."
+    },
+    {
+      "name": "--esp-menu-group-hover-background",
+      "description": "Hover background color of the group header."
+    },
+    {
+      "name": "--esp-menu-group-icon-background",
+      "description": "Background color of the icon rail."
+    },
+    {
+      "name": "--esp-menu-group-icon-min-width",
+      "description": "Minimum width of the icon rail."
+    },
+    {
+      "name": "--esp-menu-group-icon-padding",
+      "description": "Padding inside the icon rail."
+    },
+    {
+      "name": "--esp-menu-group-icon-size",
+      "description": "Size of generated and slotted group icons."
+    },
+    {
+      "name": "--esp-menu-group-indicator-color",
+      "description": "Color of the expand/collapse indicator."
+    },
+    {
+      "name": "--esp-menu-group-panel-background",
+      "description": "Background color of horizontal disclosure panels."
+    },
+    {
+      "name": "--esp-menu-group-panel-shadow",
+      "description": "Box shadow of horizontal disclosure panels."
+    },
+    {
+      "name": "--esp-menu-horizontal-justify-content",
+      "description": "Main-axis alignment for horizontal menu items. Defaults to `flex-start`."
+    },
+    {
+      "name": "--esp-menu-item-active-background",
+      "description": "Background color of the active item."
+    },
+    {
+      "name": "--esp-menu-item-active-color",
+      "description": "Text color of the active item."
+    },
+    {
+      "name": "--esp-menu-item-active-font-weight",
+      "description": "Font weight of the active item. Defaults to `var(--esp-font-weight-headings)`."
+    },
+    {
+      "name": "--esp-menu-item-background",
+      "description": "Background color."
+    },
+    {
+      "name": "--esp-menu-item-border-color",
+      "description": "Border color."
+    },
+    {
+      "name": "--esp-menu-item-color",
+      "description": "Text color."
+    },
+    {
+      "name": "--esp-menu-item-hover-background",
+      "description": "Hover background color."
+    },
+    {
+      "name": "--esp-menu-item-hover-color",
+      "description": "Hover text color."
+    },
+    {
+      "name": "--esp-menu-item-icon-background",
+      "description": "Icon area background color."
+    },
+    {
+      "name": "--esp-menu-item-icon-min-width",
+      "description": "Minimum width of the icon rail."
+    },
+    {
+      "name": "--esp-menu-item-icon-padding",
+      "description": "Padding inside the icon rail."
+    },
+    {
+      "name": "--esp-menu-item-icon-size",
+      "description": "Size of generated and slotted item icons."
+    },
+    {
+      "name": "--esp-menu-item-padding",
+      "description": "Padding around the item label."
+    },
+    {
+      "name": "--esp-menu-scrim-color",
+      "description": "Scrim color when the drawer is open."
     },
     {
-      "name": "--esp-color-split-complementary-left",
-      "description": "Split-complementary variant (complement minus offset)."
+      "name": "--esp-menu-top-offset",
+      "description": "Top offset for drawers below fixed headers."
     },
     {
-      "name": "--esp-color-split-complementary-right",
-      "description": "Split-complementary variant (complement plus offset)."
+      "name": "--esp-page-background",
+      "description": "The background color of the page. Fills both the surface and the canvas gutters; the canvas tokens paint over it in the gutters only. Defaults to `var(--esp-color-background)`."
     },
     {
-      "name": "--esp-color-triadic-left",
-      "description": "Triadic variant (seed hue plus 120°)."
+      "name": "--esp-page-background-image",
+      "description": "The background image to display behind page content. Defaults to `none`."
     },
     {
-      "name": "--esp-color-triadic-right",
-      "description": "Triadic variant (seed hue plus 240°)."
+      "name": "--esp-page-background-image-opacity",
+      "description": "The opacity of the background image layer. Defaults to `1`."
     },
     {
-      "name": "--esp-color-danger",
-      "description": "Fixed semantic hue for errors and destructive actions (red-orange, hue 27)."
+      "name": "--esp-page-canvas-background",
+      "description": "The background color of the canvas gutters (the outer regions revealed when the viewport exceeds the cap). Defaults to `transparent`, so gutters match the page until styled and narrow viewports are unaffected."
     },
     {
-      "name": "--esp-color-success",
-      "description": "Fixed semantic hue for success states (green, hue 150)."
+      "name": "--esp-page-canvas-background-image",
+      "description": "A background image for the canvas gutters, mirroring the page background-image knob. Defaults to `none`."
     },
     {
-      "name": "--esp-color-warning",
-      "description": "Fixed semantic hue for warnings (yellow-green, hue 90)."
+      "name": "--esp-page-canvas-background-image-opacity",
+      "description": "The opacity of the canvas gutter image layer. Defaults to `1`."
     },
-
     {
-      "name": "--esp-color-background",
-      "description": "Main page background surface."
+      "name": "--esp-page-fixed-header-offset",
+      "description": "Offset reserved for fixed headers. Defaults to `var(--esp-header-height)`."
     },
     {
-      "name": "--esp-color-layer-1",
-      "description": "First raised layer (slightly elevated surfaces)."
+      "name": "--esp-page-flyout-default-width",
+      "description": "Initial automatic in-grid help target, clamped between the help minimum and maximum. When unset, the established flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target."
     },
     {
-      "name": "--esp-color-layer-2",
-      "description": "Second raised layer (form fields, input backgrounds)."
+      "name": "--esp-page-flyout-max-width",
+      "description": "Maximum help width and overlay drawer cap before the `85vw` viewport cap. Defaults to `30rem`."
     },
     {
-      "name": "--esp-color-layer-3",
-      "description": "Third raised layer (cards, raised buttons)."
+      "name": "--esp-page-flyout-min-width",
+      "description": "Minimum in-grid help width. Defaults to `20rem`."
     },
     {
-      "name": "--esp-color-layer-4",
-      "description": "Fourth raised layer (hover states, elevated controls)."
+      "name": "--esp-page-flyout-width",
+      "description": "Legacy fixed-width alias that pins both help bounds."
     },
-
     {
-      "name": "--esp-color-text",
-      "description": "Standard body text. APCA Lc ≥ 75 against background."
+      "name": "--esp-page-header-z-index",
+      "description": "Z-index for fixed/sticky header regions. Defaults to `20`."
     },
     {
-      "name": "--esp-color-headings",
-      "description": "Heading text (muted contrast). APCA Lc ≥ 60 against background."
+      "name": "--esp-page-main-background",
+      "description": "The background of the main content well. Defaults to `transparent` (the well shows the page background). Set it to give the content well its own card color, or pair the transparent default with `--esp-page-surface-shadow: none` for content that floats directly on the page with no frame."
     },
     {
-      "name": "--esp-color-headings-hover",
-      "description": "Heading text with emphasis. APCA Lc ≥ 60 against background."
+      "name": "--esp-page-main-max-width",
+      "description": "Maximum width of the main content well. Defaults from `kind`: `1536px` (wide), `768px` (narrow), or unbounded (full). An explicit value overrides every kind default, including `full` — except `site`, whose main region is always unbounded because sections own their wells. Surplus width beyond it becomes canvas gutters."
     },
     {
-      "name": "--esp-color-danger-text",
-      "description": "Error and danger message text. APCA Lc ≥ 75 against background."
+      "name": "--esp-page-main-min-width",
+      "description": "Minimum width of the main content well while preview or in-grid help competes for space. Defaults to `30rem`."
     },
-
     {
-      "name": "--esp-color-link",
-      "description": "Link text in normal state (accent color). APCA Lc ≥ 75 against background."
+      "name": "--esp-page-max-width",
+      "description": "Legacy fallback for `--esp-page-main-max-width`."
     },
     {
-      "name": "--esp-color-link-hover",
-      "description": "Link text on hover (high contrast). APCA Lc ≥ 75 against background."
+      "name": "--esp-page-preview-background",
+      "description": "Background of the persistent preview surface. Defaults to the main background, then the page background."
     },
     {
-      "name": "--esp-color-link-hover-bg",
-      "description": "Link hover background highlight."
+      "name": "--esp-page-preview-border",
+      "description": "Leading tear-off edge between main and preview. Defaults to `1px dotted var(--esp-color-border)`."
     },
-
     {
-      "name": "--esp-color-action-background",
-      "description": "Action button background (typically layer-3)."
+      "name": "--esp-page-preview-default-width",
+      "description": "Initial automatic preview target, clamped between the preview minimum and maximum. When unset, the established preview-first flexible allocation remains in effect. A retained pointer or keyboard resize preference supersedes this target."
     },
     {
-      "name": "--esp-color-action-text",
-      "description": "Action button text (high-contrast ink). APCA Lc ≥ 75 against action background."
+      "name": "--esp-page-preview-max-width",
+      "description": "Maximum preview width. Defaults to `48rem`. Preview receives flexible trailing space before help grows."
     },
     {
-      "name": "--esp-color-input-caret",
-      "description": "Text cursor / caret color. APCA Lc ≥ 60 against layer-2."
+      "name": "--esp-page-preview-min-main-width",
+      "description": "Legacy fallback for `--esp-page-main-min-width`."
     },
     {
-      "name": "--esp-color-input-selection",
-      "description": "Selected text color. APCA Lc ≥ 60 against selection background."
+      "name": "--esp-page-preview-min-width",
+      "description": "Minimum preview width. Defaults to `22.5rem` (360px, a reasonable mobile-device surface)."
     },
     {
-      "name": "--esp-color-input-selection-bg",
-      "description": "Selected text background color."
+      "name": "--esp-page-preview-shadow",
+      "description": "Shadow cast from the preview's trailing edge. Defaults to the page surface edge shadow. Set to `none` for a flat additive surface."
     },
-
     {
-      "name": "--esp-color-border",
-      "description": "Border lines and dividers."
+      "name": "--esp-page-preview-width",
+      "description": "Legacy fixed-width alias that pins both preview bounds."
     },
     {
-      "name": "--esp-color-shadow",
-      "description": "Drop shadow color."
+      "name": "--esp-page-resize-focus-outline",
+      "description": "Keyboard-focus line drawn along the focused seam, spanning the visible dotted edge up to one viewport height. Defaults to `2px dashed var(--esp-color-link)`."
     },
-
     {
-      "name": "--esp-l-surface",
-      "description": "Lightness (percentage) for the main background surface."
+      "name": "--esp-page-resize-focus-shadow",
+      "description": "Glow cast by the focused seam line, in the line's color. Defaults to `0 0 0.75rem var(--esp-color-link)`."
     },
     {
-      "name": "--esp-l-raised-1",
-      "description": "Lightness (percentage) for the first elevation level."
+      "name": "--esp-page-resize-handle-hit-size",
+      "description": "Transparent inline hit target centered on each dotted seam. Defaults to `2.75rem`."
     },
     {
-      "name": "--esp-l-raised-2",
-      "description": "Lightness (percentage) for the second elevation level."
+      "name": "--esp-page-resize-large-step",
+      "description": "Shift+Arrow resize step. Defaults to `4rem`."
     },
     {
-      "name": "--esp-l-raised-3",
-      "description": "Lightness (percentage) for the third elevation level."
+      "name": "--esp-page-resize-step",
+      "description": "Arrow-key resize step. Defaults to `1rem`."
     },
     {
-      "name": "--esp-l-raised-4",
-      "description": "Lightness (percentage) for the fourth elevation level."
+      "name": "--esp-page-sticky-header-top",
+      "description": "Top inset for sticky headers. Defaults to `0`."
     },
     {
-      "name": "--esp-l-accent",
-      "description": "Lightness (percentage) for accent and link colors."
+      "name": "--esp-page-surface-border",
+      "description": "An optional border on the inline edges of the surface, for themes preferring a hairline over a shadow. Defaults to `none` (e.g. `1px solid var(--esp-color-border)`). Combine with `--esp-page-surface-shadow: none` to switch the content frame from a drop shadow to a hairline, or turn both off for no frame."
     },
     {
-      "name": "--esp-l-muted",
-      "description": "Lightness (percentage) for muted / heading text."
+      "name": "--esp-page-surface-shadow",
+      "description": "The box shadow drawn on the left and right edges of the content surface. On by default; casts into the gutters and is clipped away when the surface fills the viewport, so it only shows above the cap. Set to `none` to remove it."
     },
     {
-      "name": "--esp-l-text",
-      "description": "Lightness (percentage) for body text."
+      "name": "--esp-page-well-max-width",
+      "description": "The shared content-column width in `kind=\"site\"`: the header and footer alignment contract and every `esp-section` well default to it. Defaults to `72rem`."
     },
     {
-      "name": "--esp-l-border",
-      "description": "Lightness (percentage) for border lines."
+      "name": "--esp-progress-border-color",
+      "description": "Border color of the track outline. Defaults to `var(--esp-color-border)`."
     },
     {
-      "name": "--esp-l-ink",
-      "description": "Lightness (percentage) for high-contrast ink (action text)."
+      "name": "--esp-progress-border-radius",
+      "description": "Border radius of the track and fill. Defaults to `var(--esp-size-border-radius)`."
     },
     {
-      "name": "--esp-l-shadow",
-      "description": "Lightness (percentage) for shadows."
+      "name": "--esp-progress-circle-size",
+      "description": "Diameter of the circular progress ring in circle mode. Automatically set by the `size` attribute."
     },
-
     {
-      "name": "--esp-type-tiny",
-      "description": "Type scale: smallest text size (captions, subscripts). Fluid clamp() value."
+      "name": "--esp-progress-fill-color",
+      "description": "Color of the progress fill. Defaults to the active action hue at the semantic muted lightness so the filled and unfilled portions remain distinguishable in light and dark themes."
     },
     {
-      "name": "--esp-type-small",
-      "description": "Type scale: small text size. Fluid clamp() value."
+      "name": "--esp-progress-font-size",
+      "description": "Font size for the value text. Defaults to `var(--esp-type-small)`."
     },
     {
-      "name": "--esp-type-normal",
-      "description": "Type scale: body text size (base step, 1.125rem at 16px root). Fluid clamp() value."
+      "name": "--esp-progress-height",
+      "description": "Height of the progress bar track. Automatically set by the `size` attribute."
     },
     {
-      "name": "--esp-type-medium",
-      "description": "Type scale: medium text size. Fluid clamp() value."
+      "name": "--esp-progress-text-color",
+      "description": "Color of the percentage text in both bar and circle modes. Defaults to `var(--esp-color-text)`."
     },
     {
-      "name": "--esp-type-big",
-      "description": "Type scale: large text size. Fluid clamp() value."
+      "name": "--esp-radio-button-focus-shadow",
+      "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`."
     },
     {
-      "name": "--esp-type-large",
-      "description": "Type scale: extra-large text size. Fluid clamp() value."
+      "name": "--esp-radio-button-icon-color",
+      "description": "The stroke color of the radio icon. Defaults to `var(--esp-color-text)`."
     },
     {
-      "name": "--esp-type-huge",
-      "description": "Type scale: largest text size (hero headings). Fluid clamp() value."
+      "name": "--esp-radio-button-size",
+      "description": "The width and height of the radio icon. Defaults to `var(--esp-size-normal-to-medium)`."
     },
-
     {
-      "name": "--esp-size-tiny",
-      "description": "Spacing scale: smallest spacing unit. Fluid clamp() value."
+      "name": "--esp-repeater-background",
+      "description": "Background of the repeater container."
     },
     {
-      "name": "--esp-size-small",
-      "description": "Spacing scale: small spacing. Fluid clamp() value."
+      "name": "--esp-repeater-border",
+      "description": "Border of the repeater container."
     },
     {
-      "name": "--esp-size-normal",
-      "description": "Spacing scale: standard spacing unit. Fluid clamp() value."
+      "name": "--esp-repeater-border-radius",
+      "description": "Border radius of the repeater container."
     },
     {
-      "name": "--esp-size-medium",
-      "description": "Spacing scale: medium spacing. Fluid clamp() value."
+      "name": "--esp-repeater-content-padding",
+      "description": "Padding inside the virtualized content region. Defaults to `0`."
     },
     {
-      "name": "--esp-size-big",
-      "description": "Spacing scale: large spacing. Fluid clamp() value."
+      "name": "--esp-repeater-gap",
+      "description": "Space between repeated items."
     },
     {
-      "name": "--esp-size-large",
-      "description": "Spacing scale: extra-large spacing. Fluid clamp() value."
+      "name": "--esp-repeater-grid-column-gap",
+      "description": "Horizontal gap between grid columns."
     },
     {
-      "name": "--esp-size-huge",
-      "description": "Spacing scale: largest spacing unit. Fluid clamp() value."
+      "name": "--esp-repeater-grid-columns",
+      "description": "Grid column count when `layout=\"grid\"`. Supports media-query overrides."
     },
-
     {
-      "name": "--esp-size-tiny-to-small",
-      "description": "Cross-step fluid size: tiny (min) to small (max)."
+      "name": "--esp-repeater-grid-row-gap",
+      "description": "Vertical gap between grid rows."
     },
     {
-      "name": "--esp-size-small-to-normal",
-      "description": "Cross-step fluid size: small (min) to normal (max)."
+      "name": "--esp-repeater-padding",
+      "description": "Padding used by repeater state panels and the loading/error footer."
     },
     {
-      "name": "--esp-size-normal-to-medium",
-      "description": "Cross-step fluid size: normal (min) to medium (max)."
+      "name": "--esp-row-gap",
+      "description": "Overrides the gap between children. Defaults to the `gap` attribute's step, `normal` when unset."
     },
     {
-      "name": "--esp-size-medium-to-big",
-      "description": "Cross-step fluid size: medium (min) to big (max)."
+      "name": "--esp-scheme",
+      "description": ""
     },
     {
-      "name": "--esp-size-big-to-large",
-      "description": "Cross-step fluid size: big (min) to large (max)."
+      "name": "--esp-search-active-background",
+      "description": "Background color of the active result row. Defaults to `var(--esp-color-layer-2)`."
     },
     {
-      "name": "--esp-size-large-to-huge",
-      "description": "Cross-step fluid size: large (min) to huge (max)."
+      "name": "--esp-search-backdrop",
+      "description": "Backdrop color behind the panel. Defaults to `oklch(0.15 0 0 / 0.6)`."
     },
-
     {
-      "name": "--esp-size-font",
-      "description": "Alias for --esp-type-normal. Standard font size."
+      "name": "--esp-search-border-color",
+      "description": "Divider and loading-track color used by the search panel. Defaults to `var(--esp-color-border)`."
     },
     {
-      "name": "--esp-size-padding",
-      "description": "Alias for --esp-size-tiny-to-small. Default component internal padding."
+      "name": "--esp-search-highlight-background",
+      "description": "Background color applied to `<mark>` highlights inside excerpts."
     },
     {
-      "name": "--esp-size-padding-page",
-      "description": "Alias for --esp-size-small-to-normal. Page-level section padding."
+      "name": "--esp-search-loading-indicator-color",
+      "description": "Accent color of the loading spinner. Defaults to `var(--esp-color-primary)`."
     },
     {
-      "name": "--esp-size-border-radius",
-      "description": "Global border radius. Static rem value."
+      "name": "--esp-search-loading-indicator-track-color",
+      "description": "Track color of the loading spinner. Defaults to `var(--esp-search-border-color)`."
     },
-
     {
-      "name": "--esp-font-body",
-      "description": "Font family for body and UI text."
+      "name": "--esp-search-max-height",
+      "description": "Maximum height of the results list. Defaults to `60vh`."
     },
     {
-      "name": "--esp-font-headings",
-      "description": "Font family for headings."
+      "name": "--esp-search-max-width",
+      "description": "Maximum width of the search panel. Defaults to `40rem`."
     },
     {
-      "name": "--esp-font-monospace",
-      "description": "Font family for code and monospace text."
+      "name": "--esp-search-muted-color",
+      "description": "Muted text color for placeholders, excerpts, and empty states."
     },
-
     {
-      "name": "--esp-page-background-image",
-      "description": "CSS background-image value for the page surface. Defaults to none."
+      "name": "--esp-search-panel-background",
+      "description": "Background color of the search panel. Defaults to `var(--esp-color-layer-1)`."
     },
     {
-      "name": "--esp-page-background-image-opacity",
-      "description": "Opacity of the page background image (0–1). Defaults to 1."
+      "name": "--esp-search-panel-shadow",
+      "description": "Box shadow of the search panel."
     },
     {
-      "name": "--esp-box-background-image",
-      "description": "CSS background-image value for esp-box surfaces."
+      "name": "--esp-search-text-color",
+      "description": "Main text color used by the search UI. Defaults to `var(--esp-color-text)`."
     },
     {
-      "name": "--esp-box-background-image-opacity",
-      "description": "Opacity of the box background image (0–1)."
+      "name": "--esp-search-title-color",
+      "description": "Title color for result rows. Defaults to `var(--esp-color-headings)`."
     },
-
     {
-      "name": "--esp-avatar-border-radius",
-      "description": "[esp-avatar] Border radius of the image and initials fallback."
+      "name": "--esp-section-background",
+      "description": "The band's background. Defaults to the local `--esp-color-background`, which inside a `context` zone is the zone's canvas."
     },
     {
-      "name": "--esp-avatar-size",
-      "description": "[esp-avatar] Width and height of the avatar."
+      "name": "--esp-section-decoration-color",
+      "description": "Semantic tint applied through the mask. Defaults to the local `--esp-color-headings`."
     },
-
     {
-      "name": "--esp-color-box-background",
-      "description": "[esp-box] Background color of the box."
+      "name": "--esp-section-decoration-image",
+      "description": "Raster alpha mask painted behind the well. Defaults to `none`."
     },
     {
-      "name": "--esp-box-background",
-      "description": "[esp-box] Background layer for images or gradients."
+      "name": "--esp-section-decoration-opacity",
+      "description": "Decoration opacity from `0` through `1`. Defaults to `1`."
     },
     {
-      "name": "--esp-box-background-opacity",
-      "description": "[esp-box] Opacity of the background layer."
+      "name": "--esp-section-decoration-position",
+      "description": "Mask position, including responsive or bleeding values. Defaults to `center`."
     },
     {
-      "name": "--esp-size-box-padding",
-      "description": "[esp-box] Padding inside the box."
+      "name": "--esp-section-decoration-size",
+      "description": "Mask size. Defaults to `contain`."
     },
-
     {
-      "name": "--esp-button-padding",
-      "description": "[esp-button] Padding inside the button label and icon areas."
+      "name": "--esp-section-max-width",
+      "description": "The content well's cap. Defaults to `var(--esp-page-well-max-width, 72rem)`; `none` lets content span the band."
     },
     {
-      "name": "--esp-button-incognito-padding",
-      "description": "[esp-button] Padding for the incognito (borderless) button style."
+      "name": "--esp-section-padding-block",
+      "description": "Vertical rhythm above and below the well. Defaults to `var(--esp-size-section)`."
     },
-
     {
-      "name": "--esp-page-background",
-      "description": "[esp-page] Background color of the page. Defaults to var(--esp-color-background)."
+      "name": "--esp-section-padding-inline",
+      "description": "Horizontal breathing room inside the band at narrow viewports. Defaults to `var(--esp-size-medium)`."
     },
     {
-      "name": "--esp-page-max-width",
-      "description": "[esp-page] Maximum width of the main content area. Set automatically by the kind attribute: 1536px (wide), 768px (narrow), or none (full)."
+      "name": "--esp-seed-color",
+      "description": ""
     },
     {
-      "name": "--esp-header-height",
-      "description": "[esp-header] Height of the header bar. Defaults to calc(4.5 * var(--esp-size-small)). Consumed by esp-page, esp-header-button, and esp-burger via use-site fallbacks."
+      "name": "--esp-shadow-1",
+      "description": ""
     },
-
     {
-      "name": "--esp-header-background",
-      "description": "[esp-header] Background color of the header bar. Defaults to var(--esp-color-layer-2)."
+      "name": "--esp-shadow-2",
+      "description": ""
     },
     {
-      "name": "--esp-header-border-width",
-      "description": "[esp-header] Border width of the header. Defaults to 0 0 1px 0."
+      "name": "--esp-shadow-3",
+      "description": ""
     },
     {
-      "name": "--esp-header-border",
-      "description": "[esp-header] Border style of the header. Defaults to solid var(--esp-color-border)."
+      "name": "--esp-size-big",
+      "description": ""
     },
     {
-      "name": "--esp-header-shadow",
-      "description": "[esp-header] Box shadow of the header. Defaults to 0 0 2px var(--esp-color-shadow)."
+      "name": "--esp-size-big-to-large",
+      "description": ""
     },
     {
-      "name": "--esp-header-brand-placement",
-      "description": "[esp-header] CSS place-content value for the brand container. Defaults to center."
+      "name": "--esp-size-border-radius",
+      "description": ""
     },
     {
-      "name": "--esp-header-button-closed-color",
-      "description": "[esp-header] Burger button color when menu is closed. Defaults to var(--esp-color-headings)."
+      "name": "--esp-size-box-padding",
+      "description": "The padding inside the box."
     },
     {
-      "name": "--esp-header-button-closed-hover-color",
-      "description": "[esp-header] Burger button hover color when menu is closed. Defaults to var(--esp-color-headings-hover)."
+      "name": "--esp-size-burger-stroke",
+      "description": "The stroke width of the burger lines."
     },
     {
-      "name": "--esp-header-button-open-color",
-      "description": "[esp-header] Burger button color when menu is open. Defaults to var(--esp-color-text)."
+      "name": "--esp-size-color-picker-border-width",
+      "description": "The border width of the color picker."
     },
     {
-      "name": "--esp-header-button-open-hover-color",
-      "description": "[esp-header] Burger button hover color when menu is open. Defaults to var(--esp-color-headings-hover)."
+      "name": "--esp-size-font",
+      "description": ""
     },
     {
-      "name": "--esp-header-button-stroke-width",
-      "description": "[esp-header] Stroke width of the burger button lines. Defaults to 0.45rem."
+      "name": "--esp-size-huge",
+      "description": ""
     },
-
     {
-      "name": "--esp-header-button-background",
-      "description": "[esp-header-button] Background color. Defaults to var(--esp-color-layer-3)."
+      "name": "--esp-size-large",
+      "description": ""
     },
     {
-      "name": "--esp-header-button-background-hover",
-      "description": "[esp-header-button] Hover background color. Defaults to var(--esp-color-layer-4)."
+      "name": "--esp-size-large-to-huge",
+      "description": ""
     },
     {
-      "name": "--esp-header-button-box-shadow",
-      "description": "[esp-header-button] Box shadow. Defaults to 0px 0px 3px 0px var(--esp-color-shadow)."
+      "name": "--esp-size-medium",
+      "description": ""
     },
     {
-      "name": "--esp-header-button-border-left",
-      "description": "[esp-header-button] Left border. Defaults to 1px dotted var(--esp-color-border)."
+      "name": "--esp-size-medium-to-big",
+      "description": ""
     },
     {
-      "name": "--esp-header-button-color",
-      "description": "[esp-header-button] Text and icon color. Defaults to var(--esp-color-text)."
+      "name": "--esp-size-normal",
+      "description": ""
     },
-
     {
-      "name": "--esp-menu-background",
-      "description": "[esp-menu] Background color of vertical and drawer menus. Defaults to var(--esp-color-layer-1)."
+      "name": "--esp-size-normal-to-medium",
+      "description": ""
     },
     {
-      "name": "--esp-menu-border-color",
-      "description": "[esp-menu] Border color of menu rails and drawers. Defaults to var(--esp-color-border)."
+      "name": "--esp-size-padding",
+      "description": ""
     },
     {
-      "name": "--esp-menu-scrim-color",
-      "description": "[esp-menu] Scrim color when the drawer is open."
+      "name": "--esp-size-padding-page",
+      "description": ""
     },
     {
-      "name": "--esp-menu-drawer-shadow",
-      "description": "[esp-menu] Box shadow for the drawer overlay. Defaults to 2px 0 8px var(--esp-color-shadow)."
+      "name": "--esp-size-section",
+      "description": ""
     },
     {
-      "name": "--esp-menu-drawer-width",
-      "description": "[esp-menu] Drawer width. Defaults to min(22rem, 86vw)."
+      "name": "--esp-size-small",
+      "description": ""
     },
     {
-      "name": "--esp-menu-top-offset",
-      "description": "[esp-menu] Top offset for drawers below fixed headers. Defaults to 0px."
+      "name": "--esp-size-small-to-normal",
+      "description": ""
     },
-
     {
-      "name": "--esp-menu-group-color",
-      "description": "[esp-menu-group] Text color of the group header. Defaults to var(--esp-color-headings)."
+      "name": "--esp-size-tiny",
+      "description": ""
     },
     {
-      "name": "--esp-menu-group-background",
-      "description": "[esp-menu-group] Background color of the group header. Defaults to var(--esp-color-layer-1)."
+      "name": "--esp-size-tiny-to-small",
+      "description": ""
     },
     {
-      "name": "--esp-menu-group-hover-background",
-      "description": "[esp-menu-group] Hover background color of the group header. Defaults to var(--esp-color-layer-2)."
+      "name": "--esp-slider-focus-shadow",
+      "description": "Color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`."
     },
     {
-      "name": "--esp-menu-group-indicator-color",
-      "description": "[esp-menu-group] Color of the expand/collapse indicator. Defaults to var(--esp-color-headings)."
+      "name": "--esp-slider-thumb-border-color",
+      "description": "Border color of the thumb. Defaults to `var(--esp-color-border)`."
     },
     {
-      "name": "--esp-menu-group-border-color",
-      "description": "[esp-menu-group] Border color of the group. Defaults to var(--esp-color-border)."
+      "name": "--esp-slider-thumb-color",
+      "description": "Fill color of the thumb. Defaults to `var(--esp-color-layer-1)`."
     },
     {
-      "name": "--esp-menu-group-panel-background",
-      "description": "[esp-menu-group] Background color of horizontal disclosure panels. Defaults to var(--esp-color-layer-1)."
+      "name": "--esp-slider-thumb-shadow",
+      "description": "Box shadow of the thumb. Defaults to `0 1px 3px oklch(0 0 0 / 0.2)`."
     },
     {
-      "name": "--esp-menu-group-panel-shadow",
-      "description": "[esp-menu-group] Box shadow of horizontal disclosure panels. Defaults to 0 4px 12px var(--esp-color-shadow)."
+      "name": "--esp-slider-thumb-size",
+      "description": "Diameter of the thumb. Defaults to `var(--esp-size-normal-to-medium)`."
     },
     {
-      "name": "--esp-menu-group-icon-min-width",
-      "description": "[esp-menu-group] Minimum width of the icon rail. Defaults to calc(1 * var(--esp-size-font))."
+      "name": "--esp-slider-track-border-radius",
+      "description": "Border radius of the track. Defaults to `calc(var(--esp-slider-track-height, 6px) / 2)`."
     },
     {
-      "name": "--esp-menu-group-icon-padding",
-      "description": "[esp-menu-group] Padding inside the icon rail. Defaults to var(--esp-size-padding)."
+      "name": "--esp-slider-track-color",
+      "description": "Background color of the unfilled portion of the track. Defaults to `var(--esp-color-border)`."
     },
     {
-      "name": "--esp-menu-group-icon-background",
-      "description": "[esp-menu-group] Background color of the icon rail. Defaults to var(--esp-color-layer-2)."
+      "name": "--esp-slider-track-fill-color",
+      "description": "Background color of the filled portion of the track. Defaults to `var(--esp-color-action-background)`."
     },
     {
-      "name": "--esp-menu-group-icon-size",
-      "description": "[esp-menu-group] Size of generated and slotted group icons. Defaults to calc(1 * var(--esp-size-font))."
+      "name": "--esp-slider-track-height",
+      "description": "Height of the slider track. Defaults to `6px`."
     },
-
     {
-      "name": "--esp-menu-item-color",
-      "description": "[esp-menu-item] Text color. Defaults to var(--esp-color-text)."
+      "name": "--esp-stack-gap",
+      "description": "Overrides the gap between children. Defaults to the `gap` attribute's step, `normal` when unset."
     },
     {
-      "name": "--esp-menu-item-background",
-      "description": "[esp-menu-item] Background color."
+      "name": "--esp-status-indicator-border-radius",
+      "description": ""
     },
     {
-      "name": "--esp-menu-item-border-color",
-      "description": "[esp-menu-item] Border color. Defaults to var(--esp-color-border)."
+      "name": "--esp-status-indicator-height",
+      "description": ""
     },
     {
-      "name": "--esp-menu-item-hover-color",
-      "description": "[esp-menu-item] Hover text color. Defaults to var(--esp-color-headings-hover)."
+      "name": "--esp-status-indicator-popover-max-width",
+      "description": ""
     },
     {
-      "name": "--esp-menu-item-hover-background",
-      "description": "[esp-menu-item] Hover background color. Defaults to var(--esp-color-layer-2)."
+      "name": "--esp-status-indicator-width",
+      "description": ""
     },
     {
-      "name": "--esp-menu-item-icon-background",
-      "description": "[esp-menu-item] Icon area background color. Defaults to var(--esp-color-layer-2)."
+      "name": "--esp-switch-focus-shadow",
+      "description": "The color of the focus ring shadow. Defaults to `var(--esp-color-shadow)`."
     },
     {
-      "name": "--esp-menu-item-active-color",
-      "description": "[esp-menu-item] Text color of the active item. Defaults to var(--esp-color-link)."
+      "name": "--esp-switch-height",
+      "description": "The height of the switch track. Defaults to `var(--esp-size-normal-to-medium)`."
     },
     {
-      "name": "--esp-menu-item-active-background",
-      "description": "[esp-menu-item] Background color of the active item. Defaults to var(--esp-color-layer-2)."
+      "name": "--esp-switch-text-active-color",
+      "description": "Text color of the active label in text mode. Defaults to `var(--esp-color-action-text)`."
     },
     {
-      "name": "--esp-menu-item-padding",
-      "description": "[esp-menu-item] Padding around the item label. Defaults to var(--esp-size-small) var(--esp-size-padding)."
+      "name": "--esp-switch-text-font-size",
+      "description": "Font size for text-mode labels. Defaults to `var(--esp-size-font)`."
     },
     {
-      "name": "--esp-menu-item-icon-min-width",
-      "description": "[esp-menu-item] Minimum width of the icon rail. Defaults to calc(1 * var(--esp-size-font))."
+      "name": "--esp-switch-text-highlight-color",
+      "description": "Background color of the sliding highlight in text mode. Defaults to `var(--esp-color-action-background)`."
     },
     {
-      "name": "--esp-menu-item-icon-padding",
-      "description": "[esp-menu-item] Padding inside the icon rail. Defaults to var(--esp-size-padding)."
+      "name": "--esp-switch-text-inactive-color",
+      "description": "Text color of the inactive label in text mode. Defaults to `var(--esp-color-layer-1)`."
     },
     {
-      "name": "--esp-menu-item-icon-size",
-      "description": "[esp-menu-item] Size of generated and slotted item icons. Defaults to calc(1 * var(--esp-size-font))."
+      "name": "--esp-switch-text-padding",
+      "description": "Padding inside each text-mode label cell. Defaults to `var(--esp-size-tiny) var(--esp-size-small)`."
     },
-
     {
-      "name": "--esp-color-burger",
-      "description": "[esp-burger] Line color when closed."
+      "name": "--esp-switch-thumb-color",
+      "description": "The thumb color. Defaults to `var(--esp-color-layer-1)`."
     },
     {
-      "name": "--esp-color-burger-hover",
-      "description": "[esp-burger] Hover line color when closed."
+      "name": "--esp-switch-thumb-size",
+      "description": "The diameter of the thumb. Defaults to `calc(var(--esp-switch-height) - 4px)`."
     },
     {
-      "name": "--esp-color-burger-opened",
-      "description": "[esp-burger] Line color when open."
+      "name": "--esp-switch-track-color",
+      "description": "The track background color when the switch is off. Defaults to `var(--esp-color-border)`."
     },
     {
-      "name": "--esp-color-burger-opened-hover",
-      "description": "[esp-burger] Hover line color when open."
+      "name": "--esp-switch-track-color-on",
+      "description": "The track background color when the switch is on. Defaults to `var(--esp-color-action-background)`."
     },
     {
-      "name": "--esp-size-burger-stroke",
-      "description": "[esp-burger] Stroke width of the burger lines."
+      "name": "--esp-switch-width",
+      "description": "The width of the switch track. Defaults to `calc(var(--esp-size-normal-to-medium) * 1.75)`."
     },
-
     {
-      "name": "--esp-tab-color-border",
-      "description": "[esp-tab-group] Border color of the tab group container."
+      "name": "--esp-tab-color-background",
+      "description": "Background color of the overall component."
     },
     {
-      "name": "--esp-tab-color-background",
-      "description": "[esp-tab-group] Background color of the tab group."
+      "name": "--esp-tab-color-border",
+      "description": "Border color of the tab group container."
     },
     {
-      "name": "--esp-tab-color-strip-background",
-      "description": "[esp-tab-group] Background color of the active tab indicator strip."
+      "name": "--esp-tab-color-button-active",
+      "description": "Active tab button background."
     },
     {
       "name": "--esp-tab-color-button-hover",
-      "description": "[esp-tab-group] Tab button hover color."
+      "description": "Tab button hover background."
     },
     {
-      "name": "--esp-tab-color-button-active",
-      "description": "[esp-tab-group] Active tab button color."
+      "name": "--esp-tab-color-strip-background",
+      "description": "Background color of the tab strip."
     },
     {
       "name": "--esp-tab-color-text",
-      "description": "[esp-tab-group] Text color for tab buttons."
+      "description": "Text color for tab buttons."
     },
     {
       "name": "--esp-tab-size-padding",
-      "description": "[esp-tab-group, esp-tab] Padding inside tab panels."
-    },
-
-    {
-      "name": "--esp-checkbox-size",
-      "description": "[esp-checkbox] Width and height of the checkbox."
+      "description": "Padding inside the panel area."
     },
     {
-      "name": "--esp-checkbox-icon-color",
-      "description": "[esp-checkbox] Stroke color of the checkmark icon."
+      "name": "--esp-toaster-gap",
+      "description": "Gap between stacked toasts. Defaults to `var(--esp-size-tiny-to-small)`."
     },
     {
-      "name": "--esp-checkbox-focus-shadow",
-      "description": "[esp-checkbox] Color of the focus ring shadow."
+      "name": "--esp-toaster-padding",
+      "description": "Padding around the toaster container. Defaults to `var(--esp-size-padding)`."
     },
-
     {
-      "name": "--esp-radio-button-size",
-      "description": "[esp-radio-button] Width and height of the radio button."
+      "name": "--esp-toaster-z-index",
+      "description": "Stack order of the toaster container. Defaults to `5000`."
     },
     {
-      "name": "--esp-radio-button-icon-color",
-      "description": "[esp-radio-button] Stroke color of the radio indicator."
+      "name": "--esp-tooltip-background",
+      "description": "Background color of the tooltip. Defaults to `var(--esp-color-layer-1)`."
     },
     {
-      "name": "--esp-radio-button-focus-shadow",
-      "description": "[esp-radio-button] Color of the focus ring shadow."
+      "name": "--esp-tooltip-border",
+      "description": "Border of the tooltip. Defaults to `1px solid var(--esp-color-border)`."
     },
-
     {
-      "name": "--esp-switch-width",
-      "description": "[esp-switch] Width of the switch track."
+      "name": "--esp-tooltip-border-radius",
+      "description": "Border radius of the tooltip. Defaults to `var(--esp-size-border-radius)`."
     },
     {
-      "name": "--esp-switch-height",
-      "description": "[esp-switch] Height of the switch track."
+      "name": "--esp-tooltip-color",
+      "description": "Text color inside the tooltip. Defaults to `var(--esp-color-text)`."
     },
     {
-      "name": "--esp-switch-thumb-size",
-      "description": "[esp-switch] Diameter of the thumb."
+      "name": "--esp-tooltip-focus-outline",
+      "description": "Outline used when the trigger receives keyboard focus. Defaults to `2px solid var(--esp-color-link)`."
     },
     {
-      "name": "--esp-switch-track-color",
-      "description": "[esp-switch] Track background color when off."
+      "name": "--esp-tooltip-font-size",
+      "description": "Font size of tooltip text. Defaults to `var(--esp-type-small)`."
     },
     {
-      "name": "--esp-switch-track-color-on",
-      "description": "[esp-switch] Track background color when on."
+      "name": "--esp-tooltip-max-width",
+      "description": "Maximum width of the tooltip. Defaults to `40ch`."
     },
     {
-      "name": "--esp-switch-thumb-color",
-      "description": "[esp-switch] Thumb color."
+      "name": "--esp-tooltip-padding",
+      "description": "Padding inside the tooltip. Defaults to `var(--esp-size-tiny) var(--esp-size-small)`."
     },
     {
-      "name": "--esp-switch-focus-shadow",
-      "description": "[esp-switch] Color of the focus ring shadow."
+      "name": "--esp-tooltip-shadow",
+      "description": "Box shadow for the tooltip. Defaults to `2px 2px 4px var(--esp-color-shadow)`."
     },
-
     {
-      "name": "--esp-toaster-z-index",
-      "description": "[esp-toaster] Stack order of the toaster container."
+      "name": "--esp-tree-action-bg",
+      "description": "Background color of the expand/collapse action rail. Defaults to a derived layer color."
     },
     {
-      "name": "--esp-toaster-gap",
-      "description": "[esp-toaster] Gap between stacked toasts."
+      "name": "--esp-tree-action-hover-bg",
+      "description": "Hover background color of the expand/collapse action rail. Defaults to `var(--esp-color-layer-2)`."
     },
     {
-      "name": "--esp-toaster-padding",
-      "description": "[esp-toaster] Padding around the toaster container."
+      "name": "--esp-tree-action-size",
+      "description": "Hit target size for tree icon actions. Defaults to `1.75rem`."
     },
-
     {
-      "name": "--esp-tooltip-background",
-      "description": "[esp-tooltip] Background color of the tooltip."
+      "name": "--esp-tree-guide-color",
+      "description": "Color of the branch guide path. Defaults to `var(--esp-color-border)`."
     },
     {
-      "name": "--esp-tooltip-border",
-      "description": "[esp-tooltip] Border of the tooltip."
+      "name": "--esp-tree-hover-bg",
+      "description": "Background color of a node row on hover. Defaults to `var(--esp-color-layer-2)`."
     },
     {
-      "name": "--esp-tooltip-border-radius",
-      "description": "[esp-tooltip] Border radius of the tooltip."
+      "name": "--esp-tree-icon-color",
+      "description": "Color of the expand/collapse action and node icons. Defaults to `var(--esp-color-headings)`."
     },
     {
-      "name": "--esp-tooltip-color",
-      "description": "[esp-tooltip] Text color inside the tooltip."
+      "name": "--esp-tree-indent-step",
+      "description": "Horizontal indent added per nesting level. Defaults to `1.25rem`."
     },
     {
-      "name": "--esp-tooltip-font-size",
-      "description": "[esp-tooltip] Font size of tooltip text."
+      "name": "--esp-tree-node-padding",
+      "description": "Vertical padding of each node row. Defaults to `var(--esp-size-small)`."
     },
     {
-      "name": "--esp-tooltip-max-width",
-      "description": "[esp-tooltip] Maximum width of the tooltip."
+      "name": "--esp-tree-row-bg",
+      "description": "Background color of an unselected row. Defaults to `var(--esp-color-layer-1)`."
     },
     {
-      "name": "--esp-tooltip-padding",
-      "description": "[esp-tooltip] Padding inside the tooltip."
+      "name": "--esp-tree-row-border-color",
+      "description": "Border color of an unselected row. Defaults to `var(--esp-color-border)`."
     },
     {
-      "name": "--esp-tooltip-shadow",
-      "description": "[esp-tooltip] Box shadow for the tooltip."
+      "name": "--esp-tree-selected-bg",
+      "description": "Background color of the selected node row. Defaults to `var(--esp-color-layer-3)`."
     },
-
     {
-      "name": "--esp-progress-border-radius",
-      "description": "[esp-progress] Border radius of the track and fill."
+      "name": "--esp-type-big",
+      "description": ""
     },
     {
-      "name": "--esp-progress-circle-size",
-      "description": "[esp-progress] Diameter of the circular progress ring in circle mode."
+      "name": "--esp-type-caption-color",
+      "description": "Context-local color alias for captions."
     },
     {
-      "name": "--esp-progress-fill-color",
-      "description": "[esp-progress] Color of the progress fill."
+      "name": "--esp-type-caption-font-size",
+      "description": "Fluid font size for captions."
     },
     {
-      "name": "--esp-progress-font-size",
-      "description": "[esp-progress] Font size for the value text."
+      "name": "--esp-type-caption-font-weight",
+      "description": "Font weight for captions."
     },
     {
-      "name": "--esp-progress-height",
-      "description": "[esp-progress] Height of the progress bar track."
+      "name": "--esp-type-caption-letter-spacing",
+      "description": "Letter spacing for captions."
     },
     {
-      "name": "--esp-progress-border-color",
-      "description": "[esp-progress] Border color of the track outline."
+      "name": "--esp-type-display-color",
+      "description": "Context-local heading-color alias for opt-in display text."
     },
-
     {
-      "name": "--esp-color-dialog-bg",
-      "description": "[esp-dialog] Background color of the dialog overlay."
+      "name": "--esp-type-display-font-family",
+      "description": "Heading font family for opt-in display text."
     },
     {
-      "name": "--esp-dialog-bg-opacity",
-      "description": "[esp-dialog] Opacity of the dialog overlay background."
+      "name": "--esp-type-display-font-size",
+      "description": "Fluid display size spanning the large mobile floor through the huge desktop ceiling."
     },
-
     {
-      "name": "--esp-form-item-label-color",
-      "description": "[esp-form-item] Color of the label text."
+      "name": "--esp-type-display-font-weight",
+      "description": "Heading font weight for opt-in display text."
     },
     {
-      "name": "--esp-form-item-error-color",
-      "description": "[esp-form-item] Color of the error message text."
+      "name": "--esp-type-display-letter-spacing",
+      "description": "Letter spacing for opt-in display text."
     },
     {
-      "name": "--esp-form-item-font",
-      "description": "[esp-form-item] Font family for the form item."
+      "name": "--esp-type-display-line-height",
+      "description": "Line height for opt-in display text."
     },
     {
-      "name": "--esp-form-item-font-size",
-      "description": "[esp-form-item] Font size for the form item."
+      "name": "--esp-type-huge",
+      "description": ""
     },
-
     {
-      "name": "--esp-details-color-border",
-      "description": "[esp-details] Border color."
+      "name": "--esp-type-label-color",
+      "description": "Context-local color alias for label text."
     },
     {
-      "name": "--esp-details-color-background",
-      "description": "[esp-details] Background color."
+      "name": "--esp-type-label-font-size",
+      "description": "Fluid font size for label text."
     },
     {
-      "name": "--esp-details-color-summary-background",
-      "description": "[esp-details] Summary section background."
+      "name": "--esp-type-label-font-weight",
+      "description": "Font weight for label text."
     },
     {
-      "name": "--esp-details-color-summary-hover-background",
-      "description": "[esp-details] Summary section hover background."
+      "name": "--esp-type-label-letter-spacing",
+      "description": "Letter spacing for label text."
     },
     {
-      "name": "--esp-details-color-summary-background-active",
-      "description": "[esp-details] Summary section background when open."
+      "name": "--esp-type-large",
+      "description": ""
     },
     {
-      "name": "--esp-details-color-indicator",
-      "description": "[esp-details] Color of the expand / collapse indicator."
+      "name": "--esp-type-lead-color",
+      "description": "Context-local color alias for lead paragraphs."
     },
     {
-      "name": "--esp-details-size-padding",
-      "description": "[esp-details] Padding inside the details panel."
+      "name": "--esp-type-lead-font-size",
+      "description": "Fluid font size for lead paragraphs."
     },
-
     {
-      "name": "--esp-details-group-color-border",
-      "description": "[esp-details-group] Border color for the group container."
+      "name": "--esp-type-lead-font-weight",
+      "description": "Font weight for lead paragraphs."
     },
-
     {
-      "name": "--esp-info-color-border",
-      "description": "[esp-info] Border color."
+      "name": "--esp-type-lead-letter-spacing",
+      "description": "Letter spacing for lead paragraphs."
     },
     {
-      "name": "--esp-info-color-background",
-      "description": "[esp-info] Background color."
+      "name": "--esp-type-medium",
+      "description": ""
     },
     {
-      "name": "--esp-info-color-text",
-      "description": "[esp-info] Text color."
+      "name": "--esp-type-normal",
+      "description": ""
     },
-
     {
-      "name": "--esp-breadcrumb-separator-color",
-      "description": "[esp-breadcrumbs] Color of the separator between breadcrumbs."
+      "name": "--esp-type-overline-color",
+      "description": "Context-local color alias for overline text."
     },
     {
-      "name": "--esp-breadcrumb-color",
-      "description": "[esp-breadcrumb] Link text color."
+      "name": "--esp-type-overline-font-size",
+      "description": "Fluid font size for overline text."
     },
     {
-      "name": "--esp-breadcrumb-hover-color",
-      "description": "[esp-breadcrumb] Link hover text color."
+      "name": "--esp-type-overline-font-weight",
+      "description": "Font weight for overline text."
     },
-
     {
-      "name": "--esp-image-border",
-      "description": "[esp-image] Border property of the image."
+      "name": "--esp-type-overline-letter-spacing",
+      "description": "Letter spacing for overline text."
     },
-
     {
-      "name": "--esp-image-upload-preview-background",
-      "description": "[esp-image-upload] Background color of the image preview area."
+      "name": "--esp-type-overline-text-transform",
+      "description": "Text transform for overline text."
     },
     {
-      "name": "--esp-image-preview-border-color",
-      "description": "[esp-image-preview] Border color of the preview."
+      "name": "--esp-type-small",
+      "description": ""
     },
     {
-      "name": "--esp-image-preview-remove-color",
-      "description": "[esp-image-preview] Text color of the remove button."
+      "name": "--esp-type-tiny",
+      "description": ""
     },
-
     {
-      "name": "--esp-color-picker-bg",
-      "description": "[esp-picker-menu] Background color of picker menu items."
+      "name": "--esp-vellum-background",
+      "description": "Shared overlay background hook consumed as a fallback by overlay components."
     },
     {
-      "name": "--esp-color-picker-bg-alt",
-      "description": "[esp-picker-menu] Alternate background color for picker menu items."
+      "name": "--esp-vellum-background-image",
+      "description": "Optional repeating background image for the overlay (default: none)."
     },
-
     {
-      "name": "--esp-size-color-picker-border-width",
-      "description": "[esp-color-picker] Border width of the color picker."
+      "name": "--esp-vellum-background-image-opacity",
+      "description": "Opacity of the background image layer (default: 0.3)."
     },
-
     {
-      "name": "--esp-grid-border",
-      "description": "[esp-grid] Border style of the grid."
+      "name": "--esp-vellum-opacity",
+      "description": ""
     }
   ]
 }