@signal9/era-ui 10.0.0 → 11.0.0

package/dist/generated-docs/utilities.json

@@ -61,15 +61,34 @@
       "css": "@utility era-text-trim-caps {\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
     },
     {
-      "name": "era-token-ink",
+      "name": "era-ink-center",
       "names": [
-        "era-token-ink",
         "era-ink-center"
       ],
       "file": "index.css",
-      "useCase": "the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box; it needs no icon sibling (with one the box must stay flex, and the general trim applies).",
+      "useCase": "on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.",
+      "description": "The EDITABLE counterpart of era-text-trim — for native <input>s, which the\ntrim is forbidden on (it collapses the UA's inner editor box and slices the\nglyphs; see typography/collapsed-text-trim).\n\nWithout help, a tier-height input centres its text by FONT BOX, and the ui\nstacks' font box is deeply asymmetric: ascent ≈1.07em against descent\n≈0.29em. Centring that box parks the visible band (caps, x-height) ~0.115em\nLOW — so a field's text sat visibly below the trimmed label beside it.\n\nThe value is OPTICAL, not the derivation's: pure x-band centring computes\nto ~0.23em of padding, but pixel-measured against real Title-Case text it\nover-lifts — the eye weighs the cap-to-baseline mass, which x-band\ncentring parks ~2px high (caps 2.75px off the top against 5.7px of air\nunder the baseline, measured at dense). 0.08em splits the difference\nbetween the x-band ideal and the cap-band ideal, landing caps ~3.7px in an\n18px field with ~4.7px under the baseline — the reading where neither\nband's partisans win and neither complains.\n\nThe lift is padding, not a translateY: an icon-less Input paints the field\nchrome itself, and a transform would drag the field along with the ink.\npadding-bottom shrinks the content box from below, and a single-line input\nre-centres its line box in what remains — the ink rises by exactly half the\npadding, the chrome doesn't move, and the caret and selection follow the\ntext. In em on purpose: the correction is a fraction of the type, so it\nholds across every density and text size with one value.",
+      "css": "@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+    },
+    {
+      "name": "era-token-ink",
+      "names": [
+        "era-token-ink"
+      ],
+      "file": "index.css",
+      "useCase": "the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.",
       "description": "TOKEN INK — the ink centring for a pill whose content is a TOKEN: an id, a\ncount, a status, a tag. Font-independent, unlike everything it replaces.\n\nTHE BUG IT FIXES, which had been shipping library-wide and invisibly:\n`text-box-trim` DOES NOTHING ON A FLEX CONTAINER. Era's controls are all\nflex, and a flex container's bare text becomes an ANONYMOUS flex item — a box\nno selector can reach and no non-inherited property can touch. So\n`era-text-trim` on a Badge, a Chip, a Button or a Bar contributed exactly one\nthing: `line-height: 1`. The ink was then centred by `align-items: center`\non the LINE BOX, which is precisely the font-metric-dependent centring the\ntrim exists to eliminate. Measured on the shipped mono stack: a badge reading\n\"AC-2.1\" sat 2px high in an 18px pill, and no amount of tuning the trim's\nBAND changed it, because the trim was never running.\n\nThe mechanism here restores it: a BLOCK box (where text-box-trim does apply)\nwhose trimmed line box is then centred by `align-content` — block-container\nalignment, so no flex formatting context and no anonymous item. The browser\ncomputes the band from the font's own metrics, which is what makes it hold\nacross ui-monospace, system-ui and ui-serif instead of needing a constant\nper stack.\n\nCAP band, not the x-height band the general trim uses, because the content\nclass is different: a token is caps and digits (both cap-height), and\ncentring the x-band parks them high by (cap − x)/2. Measured on the shipped\nstacks, cap-band centring takes an id/count/status from −2.0px to 0.0.\nProse and sentence-case labels keep era-text-trim; this is for tokens.",
-      "css": "@utility era-token-ink {\n\tdisplay: block;\n\talign-content: center;\n\ttext-align: center;\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}\n\n@utility era-ink-center {\n\tpadding-bottom: 0.08em;\n}"
+      "css": "@utility era-token-ink {\n\tdisplay: block;\n\talign-content: center;\n\ttext-align: center;\n\tline-height: 1;\n\ttext-box: trim-both cap alphabetic;\n}"
+    },
+    {
+      "name": "era-label-ink",
+      "names": [
+        "era-label-ink"
+      ],
+      "file": "index.css",
+      "useCase": "the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).",
+      "description": "LABEL INK — era-token-ink's mixed-case sibling, and the general answer to\n\"this fixed-height control holds one line of text\".\n\nSame mechanism, same reason: `text-box-trim` needs a BLOCK box, so the row\nbecomes one and `align-content` (block-container alignment) does the\ncentring. What differs is the band and the alignment, because the content\nclass differs — a label is sentence case, so the x-height band is the visual\nmass to centre (cap-band reads low on \"System\"), and it is laid out against\nthe row's padding rather than centred in it.\n\nWHY IT EXISTS AT ALL: era's controls are flex, and a flex container's bare\ntext is an ANONYMOUS flex item — a box no selector reaches and no\nnon-inherited property touches. So `era-text-trim` on a flex row is inert,\ncontributing only its `line-height: 1`, and the ink falls back to line-box\ncentring by font metrics. era-token-ink already fixed that for centred\ntokens; this fixes it for everything else.\n\nTHE ICON CASE IS NOT SOLVED, and cannot be from CSS: an icon beside the text\nneeds the box to stay flex, which re-creates the anonymous item. A component\nwhose children are an opaque slot therefore guards it —\n`not-has-[svg]:era-label-ink` — and ink-centres the text-only case while\nleaving the icon case on line-box centring. Splitting icon and label into\nseparate slots is what would close it; typography/inert-trim reports every\nsite still on the fallback.",
+      "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
     {
       "name": "era-shimmer",
@@ -119,6 +138,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": [
@@ -134,96 +181,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",