@signal9/era-ui 10.1.0 → 12.0.0

package/dist/generated-docs/manifest.json

@@ -44,7 +44,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 7162,
+      "tokenEstimate": 10357,
       "sections": [
         "Overview",
         "era-interactive",
@@ -60,15 +60,26 @@
         "era-collapse",
         "h-icon · h-pill · h-chip · h-control · h-bar",
         "min-h-icon · min-h-pill · min-h-chip · min-h-control · min-h-bar",
+        "w-icon · w-pill · w-chip · w-control · w-bar",
+        "min-w-icon · min-w-pill · min-w-chip · min-w-control · min-w-bar",
         "size-icon · size-pill · size-chip · size-control · size-bar",
-        "gap-gutter · p-gutter · px-gutter · py-gutter",
-        "p-inset-pill · p-inset-chip · p-inset-control · px-inset-pill · px-inset-chip · px-inset-control · py-inset-pill · py-inset-chip · py-inset-control",
-        "px-pill · px-chip",
-        "px-field",
-        "p-panel · p-card",
-        "p-content",
-        "p-menu",
+        "px-pill · px-chip · pl-pill · pr-pill · pl-chip · pr-chip",
+        "p-section",
         "duration-base",
+        "text-body",
+        "leading-body",
+        "rounded-icon · rounded-pill · rounded-chip · rounded-control · rounded-bar · rounded-menu-item",
+        "shadow",
+        "shadow-sm · shadow-lg · shadow-well · shadow-pressed · shadow-highlight",
+        "bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)",
+        "p-gutter · px-gutter · py-gutter · gap-gutter · p-panel · px-panel · py-panel · gap-panel · … (24 in all)",
+        "p-inset-pill · px-inset-pill · py-inset-pill · gap-inset-pill · p-inset-chip · px-inset-chip · py-inset-chip · gap-inset-chip · … (12 in all)",
+        "p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (32 in all)",
+        "p-glyph-icon · px-glyph-icon · py-glyph-icon · gap-glyph-icon · p-glyph-pill · px-glyph-pill · py-glyph-pill · gap-glyph-pill",
+        "bg-field · text-field · border-field · bg-field-highlight · text-field-highlight · border-field-highlight",
+        "ease-base",
+        "bg-divider · text-divider · border-divider · bg-divider-faded · text-divider-faded · border-divider-faded · bg-background · text-background · … (66 in all)",
+        "bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (33 in all)",
         "glass-blur"
       ],
       "file": "utilities.md"
@@ -1101,6 +1112,34 @@
       "description": "",
       "css": "@utility min-h-icon {\n\tmin-height: var(--era-h-icon);\n}\n@utility min-h-pill {\n\tmin-height: var(--era-h-pill);\n}\n@utility min-h-chip {\n\tmin-height: var(--era-h-chip);\n}\n@utility min-h-control {\n\tmin-height: var(--era-h-control);\n}\n@utility min-h-bar {\n\tmin-height: var(--era-h-bar);\n}"
     },
+    {
+      "name": "w-icon",
+      "names": [
+        "w-icon",
+        "w-pill",
+        "w-chip",
+        "w-control",
+        "w-bar"
+      ],
+      "file": "index.css",
+      "useCase": "a tier-sized WIDTH — the horizontal twin of the h-* ladder, for a rail or a column measured in tiers rather than in content.",
+      "description": "",
+      "css": "@utility w-icon {\n\twidth: var(--era-h-icon);\n}\n@utility w-pill {\n\twidth: var(--era-h-pill);\n}\n@utility w-chip {\n\twidth: var(--era-h-chip);\n}\n@utility w-control {\n\twidth: var(--era-h-control);\n}\n@utility w-bar {\n\twidth: var(--era-h-bar);\n}"
+    },
+    {
+      "name": "min-w-icon",
+      "names": [
+        "min-w-icon",
+        "min-w-pill",
+        "min-w-chip",
+        "min-w-control",
+        "min-w-bar"
+      ],
+      "file": "index.css",
+      "useCase": "a minimum tier WIDTH — the floor that makes a single-glyph control render as a square rather than a skinny pill (min-w-control on an icon button, min-w-pill on a badge). These could not exist before the ladder was renamed: the old rungs were sm/md/lg, and Tailwind's container scale already owns min-w-md and min-w-lg, so the names collided and every call site had to write min-w-(--era-h-control) by hand. icon/pill/chip/control/bar collide with nothing.",
+      "description": "",
+      "css": "@utility min-w-icon {\n\tmin-width: var(--era-h-icon);\n}\n@utility min-w-pill {\n\tmin-width: var(--era-h-pill);\n}\n@utility min-w-chip {\n\tmin-width: var(--era-h-chip);\n}\n@utility min-w-control {\n\tmin-width: var(--era-h-control);\n}\n@utility min-w-bar {\n\tmin-width: var(--era-h-bar);\n}"
+    },
     {
       "name": "size-icon",
       "names": [
@@ -1116,96 +1155,363 @@
       "css": "@utility size-icon {\n\twidth: var(--era-h-icon);\n\theight: var(--era-h-icon);\n}\n@utility size-pill {\n\twidth: var(--era-h-pill);\n\theight: var(--era-h-pill);\n}\n@utility size-chip {\n\twidth: var(--era-h-chip);\n\theight: var(--era-h-chip);\n}\n@utility size-control {\n\twidth: var(--era-h-control);\n\theight: var(--era-h-control);\n}\n@utility size-bar {\n\twidth: var(--era-h-bar);\n\theight: var(--era-h-bar);\n}"
     },
     {
-      "name": "gap-gutter",
+      "name": "px-pill",
+      "names": [
+        "px-pill",
+        "px-chip",
+        "pl-pill",
+        "pr-pill",
+        "pl-chip",
+        "pr-chip"
+      ],
+      "file": "index.css",
+      "useCase": "pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).",
+      "description": "",
+      "css": "@utility px-pill {\n\tpadding-inline: var(--era-pill-px);\n}\n@utility px-chip {\n\tpadding-inline: var(--era-chip-px);\n}\n@utility pl-pill {\n\tpadding-left: var(--era-pill-px);\n}\n@utility pr-pill {\n\tpadding-right: var(--era-pill-px);\n}\n@utility pl-chip {\n\tpadding-left: var(--era-chip-px);\n}\n@utility pr-chip {\n\tpadding-right: var(--era-chip-px);\n}"
+    },
+    {
+      "name": "p-section",
+      "names": [
+        "p-section"
+      ],
+      "file": "index.css",
+      "useCase": "padding for a content panel that sits UNDER a section header row — the even-padding exception, and the reason it is not called p-section: it deliberately under-pays the block start. For an evenly padded content panel use p-section, which is the plain token.",
+      "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: the heading's text sits in an h-bar bar, so there\nis (h-bar − text)/2 of empty bar under its glyphs before the panel even\nstarts. Padding the panel evenly on top of that spends the space twice — the\nheader ends up floating between the section above and the paragraph it\nintroduces rather than binding to it.\n\nSo the block-start pays only the REMAINDER. The target is the indent: the\nspace under a heading should measure the same as the space beside the text,\nwhich is --era-pad-content. The header row already supplies (h-bar − text)/2 of\nit, so the panel adds what's left, and heading-to-paragraph reads equal to\nthe paragraph's own inset. Subtracting one --era-gap (the previous rule) left\nthe header's slack unaccounted for and the heading still detached.\n\nBoth terms are density-derived, so the equality holds at every mode; the\nmax() is the floor for a hypothetical mode where the row's slack would\nexceed the inset outright.",
+      "css": "@utility p-section {\n\tpadding: var(--era-pad-content);\n\tpadding-top: max(0px, calc(var(--era-pad-content) - (var(--era-h-bar) - var(--era-text)) / 2));\n}"
+    },
+    {
+      "name": "duration-base",
+      "names": [
+        "duration-base"
+      ],
+      "file": "index.css",
+      "useCase": "the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion=\"instant\", longer at \"extra\".",
+      "description": "",
+      "css": "@utility duration-base {\n\ttransition-duration: var(--era-duration);\n}"
+    },
+    {
+      "name": "text-body",
+      "names": [
+        "text-body"
+      ],
+      "file": "index.css",
+      "description": "Density-derived body size: `text-body` replaces text-[length:var(--era-text)]",
+      "css": "@theme inline {\n\t--text-body: var(--era-text);\n}"
+    },
+    {
+      "name": "leading-body",
+      "names": [
+        "leading-body"
+      ],
+      "file": "index.css",
+      "description": "Prose leading — `leading-body` is the pair to `text-body`, and every piece\nof text in the library that can wrap to a second line carries it. Enforced\nat runtime by typography/prose-leading.",
+      "css": "@theme inline {\n\t--leading-body: var(--era-leading);\n}"
+    },
+    {
+      "name": "rounded-icon",
+      "names": [
+        "rounded-icon",
+        "rounded-pill",
+        "rounded-chip",
+        "rounded-control",
+        "rounded-bar",
+        "rounded-menu-item"
+      ],
+      "file": "index.css",
+      "description": "Radius ladder — Tailwind's own rounded-* names now walk era's concentric\nladder (rd-T = rd-xs + (h-T − h-icon)/2), ride the corners toggle, and\ncollapse to 0 on square. rounded-menu-item is the menu-row radius\n(rd-md − panel-inset) that keeps rows concentric inside a rounded-control\npanel on every surface.",
+      "css": "@theme inline {\n\t--radius-icon: var(--era-rd-icon);\n\t--radius-pill: var(--era-rd-pill);\n\t--radius-chip: var(--era-rd-chip);\n\t--radius-control: var(--era-rd-control);\n\t--radius-bar: var(--era-rd-bar);\n\t--radius-menu-item: var(--era-item-rd);\n}"
+    },
+    {
+      "name": "shadow",
+      "names": [
+        "shadow"
+      ],
+      "file": "index.css",
+      "description": "Surface chrome — bare `shadow` is the resting control edge, shadow-lg the\nfloating panel, shadow-well the recessed container, shadow-pressed the\nactive/latched face, shadow-highlight the material half of hover feedback.\nFlat renders them as none, bevel as chisels, glass as frosted rims — the\nclass stays the same.",
+      "css": "@theme inline {\n\t--shadow: var(--era-shadow);\n}"
+    },
+    {
+      "name": "shadow-sm",
+      "names": [
+        "shadow-sm",
+        "shadow-lg",
+        "shadow-well",
+        "shadow-pressed",
+        "shadow-highlight"
+      ],
+      "file": "index.css",
+      "description": "v4 marks bare `shadow` a deprecated spelling of shadow-sm, and lints\nauto-fix one to the other — alias both to the control edge so either\nspelling renders era chrome.",
+      "css": "@theme inline {\n\t--shadow-sm: var(--era-shadow);\n\t--shadow-lg: var(--era-shadow-lg);\n\t--shadow-well: var(--era-shadow-well);\n\t--shadow-pressed: var(--era-shadow-pressed);\n\t--shadow-highlight: var(--era-highlight-shadow);\n}"
+    },
+    {
+      "name": "bg-well",
+      "names": [
+        "bg-well",
+        "text-well",
+        "border-well",
+        "bg-elevated",
+        "text-elevated",
+        "border-elevated",
+        "bg-highlight",
+        "text-highlight",
+        "border-highlight",
+        "bg-overlay",
+        "text-overlay",
+        "border-overlay"
+      ],
+      "file": "index.css",
+      "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier (pairs with\nshadow-lg + glass-blur for floating chrome), bg-highlight the transient\nhover/focus/keyboard wash (pairs with shadow-highlight; latched states\nstay on opaque bg-hover), bg-overlay the modal scrim.",
+      "css": "@theme inline {\n\t--color-well: var(--era-surface-bg);\n\t--color-elevated: var(--era-surface-bg-elevated);\n\t--color-highlight: var(--era-highlight);\n\t--color-overlay: var(--era-overlay-bg);\n}"
+    },
+    {
+      "name": "p-gutter",
       "names": [
-        "gap-gutter",
         "p-gutter",
         "px-gutter",
-        "py-gutter"
+        "py-gutter",
+        "gap-gutter",
+        "p-panel",
+        "px-panel",
+        "py-panel",
+        "gap-panel",
+        "p-card",
+        "px-card",
+        "py-card",
+        "gap-card",
+        "p-content",
+        "px-content",
+        "py-content",
+        "gap-content",
+        "p-menu",
+        "px-menu",
+        "py-menu",
+        "gap-menu",
+        "p-field",
+        "px-field",
+        "py-field",
+        "gap-field"
       ],
       "file": "index.css",
-      "useCase": "the inter-element gap (sp/2) — flex/grid gap between sibling controls, and the matching gutter padding a scrollable list or rail owes its rows on all four sides (p-gutter on the rail = gap-gutter between its rows).",
-      "description": "",
-      "css": "@utility gap-gutter {\n\tgap: var(--era-gap);\n}\n@utility p-gutter {\n\tpadding: var(--era-gap);\n}\n@utility px-gutter {\n\tpadding-inline: var(--era-gap);\n}\n@utility py-gutter {\n\tpadding-block: var(--era-gap);\n}"
+      "description": "THE SPACING SCALE — one entry per token, from which Tailwind derives the\nWHOLE directional family: p/px/py/pt/pr/pb/pl/ps/pe, every margin, gap and\ngap-x/y, inset/top/right/bottom/left, translate, and the sizing prefixes.\n\nThese were hand-written `@utility` blocks, which could only ever cover the\nspellings someone remembered to write: `px-gutter` existed and `mt-gutter`\ndid not, `p-inset-control` existed and `pl-inset-control` did not, so the\nlibrary fell back to `mt-(--era-gap)` in exactly the places the named API\nwas supposed to cover. One line here replaces twenty blocks and leaves no\nspelling missing.\n\nONLY genuine spacing belongs here. The namespace is shared across\nh/w/p/m/gap, so a name registered here means the same length in ALL of\nthem — true of a gap or an inset, false of a TIER HEIGHT. Tiers stay\nhand-written per prefix below, and the two vocabularies deliberately share\nno word: icon/pill/chip/control/bar are heights; gutter, card, panel,\ncontent, menu, field and the inset-* names are spacing. Registering a tier\nname here would silently make `px-control` mean 24px of side padding.",
+      "css": "@theme inline {\n\t--spacing-gutter: var(--era-gap);\n\t--spacing-panel: var(--era-pad-panel);\n\t--spacing-card: var(--era-pad-card);\n\t--spacing-content: var(--era-pad-content);\n\t--spacing-menu: var(--era-panel-inset);\n\t--spacing-field: var(--era-field-px);\n}"
     },
     {
       "name": "p-inset-pill",
       "names": [
         "p-inset-pill",
-        "p-inset-chip",
-        "p-inset-control",
         "px-inset-pill",
-        "px-inset-chip",
-        "px-inset-control",
         "py-inset-pill",
+        "gap-inset-pill",
+        "p-inset-chip",
+        "px-inset-chip",
         "py-inset-chip",
-        "py-inset-control"
+        "gap-inset-chip",
+        "p-inset-control",
+        "px-inset-control",
+        "py-inset-control",
+        "gap-inset-control"
       ],
       "file": "index.css",
-      "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.",
+      "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centres body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.",
       "description": "",
-      "css": "@utility p-inset-pill {\n\tpadding: var(--era-inset-pill);\n}\n@utility p-inset-chip {\n\tpadding: var(--era-inset-chip);\n}\n@utility p-inset-control {\n\tpadding: var(--era-inset-control);\n}\n@utility px-inset-pill {\n\tpadding-inline: var(--era-inset-pill);\n}\n@utility px-inset-chip {\n\tpadding-inline: var(--era-inset-chip);\n}\n@utility px-inset-control {\n\tpadding-inline: var(--era-inset-control);\n}\n@utility py-inset-pill {\n\tpadding-block: var(--era-inset-pill);\n}\n@utility py-inset-chip {\n\tpadding-block: var(--era-inset-chip);\n}\n@utility py-inset-control {\n\tpadding-block: var(--era-inset-control);\n}"
+      "css": "@theme inline {\n\t--spacing-inset-pill: var(--era-inset-pill);\n\t--spacing-inset-chip: var(--era-inset-chip);\n\t--spacing-inset-control: var(--era-inset-control);\n}"
     },
     {
-      "name": "px-pill",
+      "name": "p-icon-inset-pill",
       "names": [
-        "px-pill",
-        "px-chip"
+        "p-icon-inset-pill",
+        "px-icon-inset-pill",
+        "py-icon-inset-pill",
+        "gap-icon-inset-pill",
+        "p-icon-inset-chip",
+        "px-icon-inset-chip",
+        "py-icon-inset-chip",
+        "gap-icon-inset-chip",
+        "p-icon-inset-control",
+        "px-icon-inset-control",
+        "py-icon-inset-control",
+        "gap-icon-inset-control",
+        "p-icon-inset-bar",
+        "px-icon-inset-bar",
+        "py-icon-inset-bar",
+        "gap-icon-inset-bar",
+        "p-pill-inset-chip",
+        "px-pill-inset-chip",
+        "py-pill-inset-chip",
+        "gap-pill-inset-chip",
+        "p-pill-inset-control",
+        "px-pill-inset-control",
+        "py-pill-inset-control",
+        "gap-pill-inset-control",
+        "p-chip-inset-control",
+        "px-chip-inset-control",
+        "py-chip-inset-control",
+        "gap-chip-inset-control",
+        "p-chip-inset-bar",
+        "px-chip-inset-bar",
+        "py-chip-inset-bar",
+        "gap-chip-inset-bar"
       ],
       "file": "index.css",
-      "useCase": "pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).",
+      "useCase": "the concentric inset for a nested pair — (h-container − h-child)/2, the gap that makes a child control sit evenly inside its container, and the radius step that keeps their corners concentric. Named for the pair it joins: gap-icon-inset-control seats an icon in a control.",
       "description": "",
-      "css": "@utility px-pill {\n\tpadding-inline: var(--era-pill-px);\n}\n@utility px-chip {\n\tpadding-inline: var(--era-chip-px);\n}"
+      "css": "@theme inline {\n\t--spacing-icon-inset-pill: var(--era-icon-inset-pill);\n\t--spacing-icon-inset-chip: var(--era-icon-inset-chip);\n\t--spacing-icon-inset-control: var(--era-icon-inset-control);\n\t--spacing-icon-inset-bar: var(--era-icon-inset-bar);\n\t--spacing-pill-inset-chip: var(--era-pill-inset-chip);\n\t--spacing-pill-inset-control: var(--era-pill-inset-control);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n}"
     },
     {
-      "name": "px-field",
+      "name": "p-glyph-icon",
       "names": [
-        "px-field"
+        "p-glyph-icon",
+        "px-glyph-icon",
+        "py-glyph-icon",
+        "gap-glyph-icon",
+        "p-glyph-pill",
+        "px-glyph-pill",
+        "py-glyph-pill",
+        "gap-glyph-pill"
       ],
       "file": "index.css",
-      "useCase": "text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px).",
+      "useCase": "the glyph size for a tier — the INK inside the box, not the box (size-glyph-pill is the dismiss × in a pill, size-pill is the pill).",
       "description": "",
-      "css": "@utility px-field {\n\tpadding-inline: var(--era-field-px);\n}"
+      "css": "@theme inline {\n\t--spacing-glyph-icon: var(--era-glyph-icon);\n\t--spacing-glyph-pill: var(--era-glyph-pill);\n}"
     },
     {
-      "name": "p-panel",
+      "name": "bg-field",
       "names": [
-        "p-panel",
-        "p-card"
+        "bg-field",
+        "text-field",
+        "border-field",
+        "bg-field-highlight",
+        "text-field-highlight",
+        "border-field-highlight"
       ],
       "file": "index.css",
-      "useCase": "optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.",
+      "useCase": "the recessed field fill — bg-field is a text input's resting well, bg-field-highlight its focused/hovered face.",
       "description": "",
-      "css": "@utility p-panel {\n\tpadding: var(--era-pad-panel);\n}\n@utility p-card {\n\tpadding: var(--era-pad-card);\n}"
+      "css": "@theme inline {\n\t--color-field: var(--era-field-bg);\n\t--color-field-highlight: var(--era-field-highlight);\n}"
     },
     {
-      "name": "p-content",
+      "name": "ease-base",
       "names": [
-        "p-content"
+        "ease-base"
       ],
       "file": "index.css",
-      "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: the heading's text sits in an h-bar bar, so there\nis (h-bar − text)/2 of empty bar under its glyphs before the panel even\nstarts. Padding the panel evenly on top of that spends the space twice — the\nheader ends up floating between the section above and the paragraph it\nintroduces rather than binding to it.\n\nSo the block-start pays only the REMAINDER. The target is the indent: the\nspace under a heading should measure the same as the space beside the text,\nwhich is --era-content-p. The header row already supplies (h-bar − text)/2 of\nit, so the panel adds what's left, and heading-to-paragraph reads equal to\nthe paragraph's own inset. Subtracting one --era-gap (the previous rule) left\nthe header's slack unaccounted for and the heading still detached.\n\nBoth terms are density-derived, so the equality holds at every mode; the\nmax() is the floor for a hypothetical mode where the row's slack would\nexceed the inset outright.",
-      "css": "@utility p-content {\n\tpadding: var(--era-content-p);\n\tpadding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));\n}"
+      "description": "Motion — bare transition utilities default to the motion axis, so\n`transition-colors` alone is on-design (0s at instant, longer at extra).\nease-base/duration-base name the axis explicitly for overrides.",
+      "css": "@theme inline {\n\t--default-transition-duration: var(--era-duration);\n\t--default-transition-timing-function: var(--era-ease);\n\t--ease-base: var(--era-ease);\n}"
     },
     {
-      "name": "p-menu",
+      "name": "bg-divider",
       "names": [
-        "p-menu"
+        "bg-divider",
+        "text-divider",
+        "border-divider",
+        "bg-divider-faded",
+        "text-divider-faded",
+        "border-divider-faded",
+        "bg-background",
+        "text-background",
+        "border-background",
+        "bg-foreground",
+        "text-foreground",
+        "border-foreground",
+        "bg-1",
+        "text-1",
+        "border-1",
+        "bg-2",
+        "text-2",
+        "border-2",
+        "bg-3",
+        "text-3",
+        "border-3",
+        "bg-4",
+        "text-4",
+        "border-4",
+        "bg-5",
+        "text-5",
+        "border-5",
+        "bg-6",
+        "text-6",
+        "border-6",
+        "bg-7",
+        "text-7",
+        "border-7",
+        "bg-8",
+        "text-8",
+        "border-8",
+        "bg-9",
+        "text-9",
+        "border-9",
+        "bg-10",
+        "text-10",
+        "border-10",
+        "bg-11",
+        "text-11",
+        "border-11",
+        "bg-12",
+        "text-12",
+        "border-12",
+        "bg-border",
+        "text-border",
+        "border-border",
+        "bg-surface",
+        "text-surface",
+        "border-surface",
+        "bg-hover",
+        "text-hover",
+        "border-hover",
+        "bg-fg",
+        "text-fg",
+        "border-fg",
+        "bg-bright",
+        "text-bright",
+        "border-bright",
+        "bg-muted",
+        "text-muted",
+        "border-muted"
       ],
       "file": "index.css",
-      "useCase": "menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows.",
-      "description": "",
-      "css": "@utility p-menu {\n\tpadding: var(--era-panel-inset);\n}"
+      "description": "Surface divider colors: border-divider, bg-divider-faded, …",
+      "css": "@theme inline {\n\t--color-divider: var(--era-divider-color);\n\t--color-divider-faded: var(--era-divider-faded);\n\t--color-background: var(--color-1);\n\t--color-foreground: var(--color-fg);\n\t--color-1: var(--color-1);\n\t--color-2: var(--color-2);\n\t--color-3: var(--color-3);\n\t--color-4: var(--color-4);\n\t--color-5: var(--color-5);\n\t--color-6: var(--color-6);\n\t--color-7: var(--color-7);\n\t--color-8: var(--color-8);\n\t--color-9: var(--color-9);\n\t--color-10: var(--color-10);\n\t--color-11: var(--color-11);\n\t--color-12: var(--color-12);\n\t--color-border: var(--color-border);\n\t--color-surface: var(--color-surface);\n\t--color-hover: var(--color-hover);\n\t--color-fg: var(--color-fg);\n\t--color-bright: var(--color-bright);\n\t--color-muted: var(--color-muted);\n}"
     },
     {
-      "name": "duration-base",
+      "name": "bg-fill",
       "names": [
-        "duration-base"
+        "bg-fill",
+        "text-fill",
+        "border-fill",
+        "bg-link",
+        "text-link",
+        "border-link",
+        "bg-primary",
+        "text-primary",
+        "border-primary",
+        "bg-primary-fg",
+        "text-primary-fg",
+        "border-primary-fg",
+        "bg-primary-hover",
+        "text-primary-hover",
+        "border-primary-hover",
+        "bg-destructive",
+        "text-destructive",
+        "border-destructive",
+        "bg-destructive-fg",
+        "text-destructive-fg",
+        "border-destructive-fg",
+        "bg-success",
+        "text-success",
+        "border-success",
+        "bg-success-fg",
+        "text-success-fg",
+        "border-success-fg",
+        "bg-warning",
+        "text-warning",
+        "border-warning",
+        "bg-warning-fg",
+        "text-warning-fg",
+        "border-warning-fg"
       ],
       "file": "index.css",
-      "useCase": "the motion axis as an explicit transition-duration — for the rare case a utility (not the transition-* default) needs to name it; 0s at data-motion=\"instant\", longer at \"extra\".",
-      "description": "",
-      "css": "@utility duration-base {\n\ttransition-duration: var(--era-duration);\n}"
+      "description": "The standing pill fill — --era-fill, the latched counterpart of the\ntransient highlight. Surface-owned: a composing wash on flat/bevel, the\nopaque swatch on glass.",
+      "css": "@theme inline {\n\t--color-fill: var(--era-fill);\n\t--color-link: var(--color-link);\n\t--color-primary: var(--color-primary);\n\t--color-primary-fg: var(--color-primary-fg);\n\t--color-primary-hover: var(--color-primary-hover);\n\t--color-destructive: var(--color-destructive);\n\t--color-destructive-fg: var(--color-destructive-fg);\n\t--color-success: var(--color-success);\n\t--color-success-fg: var(--color-success-fg);\n\t--color-warning: var(--color-warning);\n\t--color-warning-fg: var(--color-warning-fg);\n}"
     },
     {
       "name": "glass-blur",