@signal9/era-ui 30.8.0 → 32.0.0

package/dist/generated-docs/llms.txt

@@ -101,9 +101,13 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
 - `era-token-ink` — 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.
 - `era-label-ink` — 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).
-- `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
-- `rounded-row` — the radius for a row inside a container that pads it by the gutter — a nav rail, a command list, any scrolling list of controls. For a row in a menu PANEL, whose inset is the surface-owned frame rather than the gutter, use rounded-menu-item.
+- `surface-backdrop` — the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
+- `material-popover` — a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
+- `material-panel` — a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
+- `pressable` — the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
+- `tier-icon · tier-pill · tier-chip · tier-control · tier-bar` — BOUNDED GEOMETRY — height and radius are one decision.
 - `h-line` — the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box.
+- `era-track-well` — instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.
 - `era-skeleton-pulse` — Skeleton's pulse, on the MOTION AXIS.
 - `era-shimmer` — the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.
 - `era-collapse` — the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
@@ -124,11 +128,11 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)` — Surface fills — bg-well is the surface's own resting fill (pairs with
 - `p-gutter · px-gutter · py-gutter · gap-gutter · p-panel · px-panel · py-panel · gap-panel · … (24 in all)` — THE SPACING SCALE — one entry per token, from which Tailwind derives the
 - `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)` — 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.
-- `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 · … (36 in all)` — 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.
+- `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 · … (40 in all)` — 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.
 - `p-glyph-icon · px-glyph-icon · py-glyph-icon · gap-glyph-icon · p-glyph-pill · px-glyph-pill · py-glyph-pill · gap-glyph-pill` — 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).
 - `bg-field · text-field · border-field · bg-field-highlight · text-field-highlight · border-field-highlight` — the recessed field fill — bg-field is a text input's resting well, bg-field-highlight its focused/hovered face.
 - `ease-base` — Motion — bare transition utilities default to the motion axis, so
 - `bg-divider · text-divider · border-divider · bg-divider-faded · text-divider-faded · border-divider-faded · bg-background · text-background · … (66 in all)` — Surface divider colors: border-divider, bg-divider-faded, …
-- `bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (33 in all)` — The standing pill fill — --era-fill, the latched counterpart of the
+- `bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (39 in all)` — The standing pill fill — --era-fill, the latched counterpart of the
 
 Full reference (what each emits, when to use it): `{{ORIGIN}}/utilities.md`. Machine-readable list: `{{ORIGIN}}/utilities.json`.

package/dist/generated-docs/manifest.json

@@ -52,7 +52,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 13166,
+      "tokenEstimate": 13846,
       "sections": [
         "Overview",
         "era-interactive",
@@ -64,9 +64,13 @@
         "era-ink-center",
         "era-token-ink",
         "era-label-ink",
-        "glass-blur",
-        "rounded-row",
+        "surface-backdrop",
+        "material-popover",
+        "material-panel",
+        "pressable",
+        "tier-icon · tier-pill · tier-chip · tier-control · tier-bar",
         "h-line",
+        "era-track-well",
         "era-skeleton-pulse",
         "era-shimmer",
         "era-collapse",
@@ -87,12 +91,12 @@
         "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 · … (36 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 · … (40 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)"
+        "bg-fill · text-fill · border-fill · bg-link · text-link · border-link · bg-primary · text-primary · … (39 in all)"
       ],
       "file": "utilities.md"
     },
@@ -158,7 +162,7 @@
       "slug": "badge",
       "title": "Badge",
       "summary": "A small label for status or categorization.",
-      "tokenEstimate": 279,
+      "tokenEstimate": 282,
       "sections": [
         "Import",
         "Props",
@@ -184,7 +188,7 @@
       "slug": "bar",
       "title": "Bar",
       "summary": "A flex container for toolbars and headers, in three heights.",
-      "tokenEstimate": 211,
+      "tokenEstimate": 500,
       "sections": [
         "Import",
         "Props"
@@ -195,7 +199,7 @@
       "slug": "nav",
       "title": "Nav",
       "summary": "A navigation landmark and its items — the current one announces itself, and that announcement is what paints it.",
-      "tokenEstimate": 825,
+      "tokenEstimate": 955,
       "sections": [
         "Import",
         "Nav.Bar",
@@ -207,7 +211,7 @@
       "slug": "button",
       "title": "Button",
       "summary": "A flexible button or link element.",
-      "tokenEstimate": 1070,
+      "tokenEstimate": 1625,
       "sections": [
         "Import",
         "Props",
@@ -242,7 +246,7 @@
       "slug": "card",
       "title": "Card",
       "summary": "A surface container that can behave as a link or button.",
-      "tokenEstimate": 285,
+      "tokenEstimate": 725,
       "sections": [
         "Import",
         "Props"
@@ -253,7 +257,7 @@
       "slug": "chip",
       "title": "Chip",
       "summary": "An interactive, optionally dismissible token.",
-      "tokenEstimate": 329,
+      "tokenEstimate": 593,
       "sections": [
         "Import",
         "Props",
@@ -310,7 +314,7 @@
       "slug": "separator",
       "title": "Separator",
       "summary": "A visual divider between content.",
-      "tokenEstimate": 218,
+      "tokenEstimate": 531,
       "sections": [
         "Import",
         "Props",
@@ -752,7 +756,7 @@
       "slug": "meter",
       "title": "Meter",
       "summary": "Displays a value within a known range.",
-      "tokenEstimate": 188,
+      "tokenEstimate": 1469,
       "sections": [
         "Import",
         "Props"
@@ -1119,24 +1123,57 @@
       "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": "glass-blur",
+      "name": "surface-backdrop",
       "names": [
-        "glass-blur"
+        "surface-backdrop"
       ],
       "file": "index.css",
-      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
-      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.\n\nIt lives HERE rather than in surfaces/glass.css, where a surface's own\nchrome would naturally sit, because glass.css is imported into a cascade\nlayer and `@utility` cannot be nested inside one. Surface-scoped RULES stay\nin their surface file; surface-scoped UTILITIES have to come out.",
-      "css": "@utility` cannot be nested inside one. Surface-scoped RULES stay\n * in their surface file; surface-scoped UTILITIES have to come out.\n *\n * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it\n * applies only inside a data-surface=\"glass\" subtree and is inert elsewhere,\n * so it is safe to leave on a panel that renders under every surface. */\n@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
+      "useCase": "the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.",
+      "description": "",
+      "css": "@utility surface-backdrop {\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-popover",
+      "names": [
+        "material-popover"
+      ],
+      "file": "index.css",
+      "useCase": "a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-popover {\n\tbackground-color: var(--era-surface-bg-elevated);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-panel",
+      "names": [
+        "material-panel"
+      ],
+      "file": "index.css",
+      "useCase": "a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-panel {\n\tbackground-color: var(--era-surface-bg);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "pressable",
+      "names": [
+        "pressable"
+      ],
+      "file": "index.css",
+      "useCase": "the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.",
+      "description": "",
+      "css": "@utility pressable {\n\t&:active {\n\t\tbox-shadow: var(--era-shadow-pressed);\n\t}\n\n\t&:active > [data-era-press-content] {\n\t\ttranslate: var(--era-press-effective-x, var(--era-press-sink-x))\n\t\t\tvar(--era-press-effective-y, var(--era-press-sink-y));\n\t}\n}"
     },
     {
-      "name": "rounded-row",
+      "name": "tier-icon",
       "names": [
-        "rounded-row"
+        "tier-icon",
+        "tier-pill",
+        "tier-chip",
+        "tier-control",
+        "tier-bar"
       ],
       "file": "index.css",
-      "useCase": "the radius for a row inside a container that pads it by the gutter — a nav rail, a command list, any scrolling list of controls. For a row in a menu PANEL, whose inset is the surface-owned frame rather than the gutter, use rounded-menu-item.",
-      "description": "THE ROW RADIUS — concentricity for a row that is inset, WITH its inset intact.\n\nThe law is rd_outer − rd_inner = gap. A row inside a container that pads it by\nthe gutter therefore takes the container's radius MINUS the gutter — and no\ntier radius equals that at more than one density, which is why reaching for\n`rounded-control` and hoping looks wrong: in a control-radius pane the row and\nthe pane end up with identical curvature separated by 5px of gap, two arcs at\none corner with no relationship.\n\nThe alternative — deleting the gap so equal radii become legal — is the wrong\ntrade and was briefly shipped. The ladder exists so a gap and concentric\ncorners COEXIST; spending one to buy the other gives up the thing it is for.\n\nThe calc runs on the ROW, not on the container, which is what makes it\nautomatic: `--era-container-rd` is inherited, so a container that is not\ncontrol-radius publishes its own and every row inside re-derives. era's\ncommand palette does exactly that — it is rd-bar, so its rows resolve to\nrd-bar − gap, which IS rd-control (control-inset-bar is the gutter), and the\npalette's geometry is unchanged by this.",
-      "css": "@utility rounded-row {\n\tborder-radius: max(0px, calc(var(--era-container-rd, var(--era-rd-control)) - var(--era-gap)));\n}"
+      "description": "BOUNDED GEOMETRY — height and radius are one decision.\n\nA tier is a geometric type, not two classes a caller must remember to keep in\nsync. `tier-control` establishes h-control AND rd-control; the radius ladder\nthen guarantees rd_outer − rd_inner = (h_outer − h_inner)/2 for every pair.\nWidth remains the component's decision: a row stretches, a button adds\nmin-w-control, and a square control adds w-control.",
+      "css": "@utility tier-icon {\n\theight: var(--era-h-icon);\n\tborder-radius: var(--era-rd-icon);\n}\n\n@utility tier-pill {\n\theight: var(--era-h-pill);\n\tborder-radius: var(--era-rd-pill);\n}\n\n@utility tier-chip {\n\theight: var(--era-h-chip);\n\tborder-radius: var(--era-rd-chip);\n}\n\n@utility tier-control {\n\theight: var(--era-h-control);\n\tborder-radius: var(--era-rd-control);\n}\n\n@utility tier-bar {\n\theight: var(--era-h-bar);\n\tborder-radius: var(--era-rd-bar);\n}"
     },
     {
       "name": "h-line",
@@ -1148,6 +1185,16 @@
       "description": "One LINE BOX tall — the height of the text this stands in for.\n\nSkeleton's `line` used h-(--era-text), which is the body FONT SIZE: never the\nheight of a rendered line (that is font-size x leading), and wrong again by\nthe ladder's ratio for any rung other than body. `1lh` resolves against the\nelement's OWN computed line-height, so putting a text-* class on the skeleton\nmakes it match that tier exactly, at every density, and it follows a leading\nchange for free.",
       "css": "@utility h-line {\n\theight: 1lh;\n}"
     },
+    {
+      "name": "era-track-well",
+      "names": [
+        "era-track-well"
+      ],
+      "file": "index.css",
+      "useCase": "instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.",
+      "description": "A WELL THAT SURVIVES BEING FILLED.\n\n`shadow-well` is an INSET shadow, and an inset shadow belongs to the\nelement's background layer — it paints under the element's own descendants.\nThat is invisible on a well holding text (a checkbox, a code block: the\nchrome runs around the content) and wrong the moment something paints the\nwhole box. Meter, Progress and the Slider track all do exactly that: an\nopaque child, `translateX`-ed to the value. So the well survived only where\nthe track was EMPTY — a half-full meter on bevel had a chisel to the right\nof the value and none to the left, which reads as a hole with a sticker\nover it rather than a level inside a well.\n\nThe fix is painting order, not geometry: the same `--era-shadow-well` on a\npseudo-element that is the element's LAST child, so it lands above the fill.\nThe fill still spans the full box — nothing is inset, no radius is\nre-derived, and 0% and 100% keep their exact ends. The `position: relative`\nis load-bearing (the overlay resolves against this box) and `inherit` on the\nradius keeps it honest under `data-corners=\"square\"`.\n\nSurface-agnostic on purpose. It reads the same token every well reads, so\nglass's hairline rim is restored by the same line that restores bevel's\nchisel, and flat — where the token is `none` — renders exactly as before.\nReported against bevel by a consumer; it was never a bevel bug.",
+      "css": "@utility era-track-well {\n\tposition: relative;\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tbox-shadow: var(--era-shadow-well);\n\t\tpointer-events: none;\n\t}\n}"
+    },
     {
       "name": "era-skeleton-pulse",
       "names": [
@@ -1367,7 +1414,7 @@
         "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.",
+      "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier,\nbg-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}"
     },
     {
@@ -1461,12 +1508,16 @@
         "p-chip-inset-bar",
         "px-chip-inset-bar",
         "py-chip-inset-bar",
-        "gap-chip-inset-bar"
+        "gap-chip-inset-bar",
+        "p-control-inset-bar",
+        "px-control-inset-bar",
+        "py-control-inset-bar",
+        "gap-control-inset-bar"
       ],
       "file": "index.css",
       "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": "@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-pill-inset-bar: var(--era-pill-inset-bar);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\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-pill-inset-bar: var(--era-pill-inset-bar);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n\t--spacing-control-inset-bar: var(--era-control-inset-bar);\n}"
     },
     {
       "name": "p-glyph-icon",
@@ -1618,11 +1669,17 @@
         "border-warning",
         "bg-warning-fg",
         "text-warning-fg",
-        "border-warning-fg"
+        "border-warning-fg",
+        "bg-info",
+        "text-info",
+        "border-info",
+        "bg-info-fg",
+        "text-info-fg",
+        "border-info-fg"
       ],
       "file": "index.css",
       "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}"
+      "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\t--color-info: var(--color-info);\n\t--color-info-fg: var(--color-info-fg);\n}"
     }
   ]
 }

package/dist/generated-docs/meter.md

@@ -14,10 +14,88 @@ Inherits all props from `Meter.RootProps`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning'` | `'default'` | The band this reading falls in. Tone is the fill's colour only — the
+| `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning' \| 'info'` | `'default'` | The band this reading falls in. Tone is the fill's colour only — the
 track stays neutral, because the well belongs to the control and the
 fill belongs to the value.
 Tone carries no semantics on its own: a meter in the destructive band
 still needs an accessible label saying what has run out. Pair it with
 `aria-label` / a visible label, never rely on the hue alone. |
+| `threshold?` | `number` | — | A BOUNDARY INSIDE THE RANGE — in the same units as `value`, not a
+percentage. A quota with a soft limit before the hard one; a plan that
+includes 30 hours of the 50 it bills against; a temperature that is
+fine until it is not. The bar fills against `max`, and the mark says
+where the number the reader is actually deciding about sits.
+WHY THE MARK HAS NO COLOUR OF ITS OWN. It has to read against both
+sides of itself: over the empty track before the value reaches it, and
+over the fill afterwards. One token cannot do that — a colour tuned
+against the track disappears into the fill the moment the value
+crosses, which is exactly what a consumer hit hand-rolling this. So
+the mark is painted in the colour of the side it is NOT on: the fill's
+paint while the value is short of it, the track's fill once the value
+has passed. That contrast is not a new promise — it is the meter's
+own. A fill that did not stand out from its track would not be a
+meter, so borrowing the pair is the one choice that cannot be wrong in
+a theme, a tone, or a surface era has not seen.
+IT IS DECORATION, and silent on purpose. There is no `role` and
+nothing to announce: a screen reader gets `value`/`min`/`max` and the
+meter's own accessible name, and a boundary it cannot position adds
+nothing. If the threshold is part of the reading — it usually is —
+put the figure in `aria-label` and in a caption, where it is a number
+rather than a position.
+PASS `aria-valuetext` IF YOUR STORED UNIT IS NOT YOUR DISPLAYED ONE.
+`value`, `max` and `threshold` all have to sit in one unit for this
+arithmetic to work, and `aria-valuenow` is `value` verbatim — so a bar
+stored in minutes and read in hours announces "2640 of 3000", a figure
+the customer was never quoted. Converting the props is not available
+to you (it would move the mark), which makes `aria-valuetext` the only
+lever; it passes through `restProps` onto the same element. Reported
+by a consumer billing minutes and quoting hours.
+Outside `[min, max]` it renders NOTHING rather than clamping to an
+end, because a mark pinned to the edge of the bar would claim a
+boundary that is not in the range. |
+| `buffer?` | `number` | — | A REGION FROM `min` THAT IS A DIFFERENT KIND OF QUANTITY — painted
+under the fill, over the track, in the same units as `value`.
+The media player's buffered-progress shape, and the name is borrowed
+from it, but the reading is more general: some of the range is already
+accounted for. A plan whose first 30 of 50 hours are included in the
+monthly minimum is not "24 hours into a bill", it is "24 of 30 hours
+you have already paid for" — money spent against money that will be
+spent, which is a distinction the bar could not draw.
+NO COLOUR OF ITS OWN, for the reason `threshold` has none: it has to
+be legible over the track while never competing with the fill that
+crosses it, and a token tuned for one of those is wrong for the other.
+It is the fill's own paint at 30%, so it cannot be wrong in a theme,
+a tone or a surface era has not seen, and it is the same 30% Slider's
+`progress` has used for a seek bar's buffer since it shipped.
+UNDER the fill, so it disappears as the value consumes it. That is the
+reading, not a limitation: once you are past your included hours, the
+included region IS spent, and `threshold` is what goes on marking
+where it ended.
+CLAMPED to the range rather than dropped, which is where it differs
+from `threshold`. A region can be honestly truncated — a buffer past
+`max` means the whole visible bar is accounted for, and painting it
+all says exactly that. A point cannot: a mark pinned to the edge would
+claim a boundary that is not in the range, so an out-of-range
+`threshold` renders nothing instead.
+Silent, like the mark. `aria-valuetext` already carries the reading,
+and a second region a screen reader cannot position adds nothing.
+(Slider spells its equivalent `progress` and takes a 0–1 FRACTION.
+Here every positional prop is in the value's own units — `value`,
+`max`, `threshold`, `buffer` — because a component that mixed the two
+would be a bug generator. The names differ because on a Meter
+`progress` would be a synonym for `value`.) |
+| `start?` | `Snippet` | — | Captions under the two ends of the bar — what the range MEANS.
+A meter states a proportion and leaves the reader to work out what of.
+"0m used" on the left and "50h before approval" on the right is not
+decoration, it is the reading; every consumer of a bare meter ends up
+hand-rolling the same flex row underneath it, which is where this came
+from. `start` is left, `end` is right, either may stand alone.
+NOT ANNOUNCED. They are captions, so a screen reader gets the meter's
+value and its own `aria-label`, not these. If the range needs saying
+out loud, say it in the label too — the same rule `tone` carries.
+THE DOM IS UNCHANGED WITHOUT THEM. With neither snippet this renders
+exactly the element it always did, so `class` still lands on the track
+and the geometry audits still walk the same box. Passing one wraps the
+track in a column, and `class` still lands on the track. |
+| `end?` | `Snippet` | — | — |
 | `ref?` | `(forwarded)` | `null` | bindable |

package/dist/generated-docs/nav.md

@@ -21,7 +21,7 @@ Inherits all props from `HTMLAttributes<HTMLElement>`.
 |------|------|---------|-------|
 | `ref?` | `HTMLElement \| null` | `null` | bindable |
 | `size?` | `'chip' \| 'control' \| 'bar'` | `'bar'` | Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. |
-| `content?` | `'tier' \| 'pill'` | `'tier'` | Tier of the items inside, so the wall stays concentric to them. |
+| `content?` | `BarContent` | — | Tier of the items inside, so the wall stays concentric to them. |
 | `divider?` | `boolean` | `false` | Draw Bar's flush cap-a-panel rule beneath the bar. Off by default,
 because a nav that sits in a page already has whatever separation the
 layout gives it — and a link-variant nav in particular reads as text,
@@ -46,6 +46,13 @@ Inherits all props from `HTMLAnchorAttributes`.
 drops the chrome entirely and renders running text, for a primary nav
 that should read as links rather than a row of raised keycaps. Existing
 bars are byte-identical. |
+| `currentCue?` | `'thickness' \| 'ink' \| 'none'` | `'thickness'` | WHAT MARKS THE CURRENT ITEM. `thickness` (default) is the three-state
+decoration — portable across every theme and font because it is one
+ink at three strengths. `ink` brightens the current item instead, and
+is theme-dependent by construction: era's default themes point
+--color-link at --color-bright, so its delta there is zero. `none`
+silences era's cue entirely, for a consumer painting their own.
+See navItemVariants above for the measurements behind each. |
 | `current?` | `boolean` | `false` | Whether this item points at the page you are on.
 There is deliberately no `active` prop beside this one. `active` would
 be a second source of truth for one fact, and the two drift the moment

package/dist/generated-docs/separator.md

@@ -15,6 +15,24 @@ Inherits all props from `Separator.RootProps`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `variant?` | `'line' \| 'slant'` | `'line'` | Use `slant` for inline dividers in breadcrumbs, titles, and compact metadata. |
+| `size?` | `keyof typeof SIZES` | — | Give a VERTICAL rule a height of its own, from the tier ladder, instead
+of stretching to whatever line it lands in. Ignored when horizontal.
+WHY YOU WOULD WANT IT. A stretched rule is a passenger: it has no
+intrinsic height, so it measures whatever its neighbours measure and
+contributes nothing back. That is right inside a Bar, whose height is
+already fixed — and it is why a rule in an auto-height row cannot hold
+that row's height steady. A consumer whose site header gained and lost
+a qualifier between pages watched the chrome resize, and pinned a
+`min-h-[calc(...)]` on the header to stop it. Sizing the rule removes
+that calc: it becomes the piece that stands the row up.
+(For the record, since the report named the wrong mechanism: a
+stretched rule does not GROW its row. Measured in an 18px auto-height
+row, adding one leaves the row at 18px and the rule resolves to 10px —
+the line minus its two gutter margins. It can only ever be shorter
+than the row it divides, which is the whole problem here.)
+A sized rule drops the gutter margins with the stretch: the height is
+now a deliberate number, and silently adding 2 x gutter to it would
+make it the one element on the page you cannot reason about. |
 | `ref?` | `(forwarded)` | `null` | bindable |
 
 ## Usage

package/dist/generated-docs/utilities.json

@@ -91,24 +91,57 @@
       "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": "glass-blur",
+      "name": "surface-backdrop",
       "names": [
-        "glass-blur"
+        "surface-backdrop"
       ],
       "file": "index.css",
-      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
-      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.\n\nIt lives HERE rather than in surfaces/glass.css, where a surface's own\nchrome would naturally sit, because glass.css is imported into a cascade\nlayer and `@utility` cannot be nested inside one. Surface-scoped RULES stay\nin their surface file; surface-scoped UTILITIES have to come out.",
-      "css": "@utility` cannot be nested inside one. Surface-scoped RULES stay\n * in their surface file; surface-scoped UTILITIES have to come out.\n *\n * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it\n * applies only inside a data-surface=\"glass\" subtree and is inert elsewhere,\n * so it is safe to leave on a panel that renders under every surface. */\n@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
+      "useCase": "the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.",
+      "description": "",
+      "css": "@utility surface-backdrop {\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-popover",
+      "names": [
+        "material-popover"
+      ],
+      "file": "index.css",
+      "useCase": "a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-popover {\n\tbackground-color: var(--era-surface-bg-elevated);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-panel",
+      "names": [
+        "material-panel"
+      ],
+      "file": "index.css",
+      "useCase": "a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-panel {\n\tbackground-color: var(--era-surface-bg);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "pressable",
+      "names": [
+        "pressable"
+      ],
+      "file": "index.css",
+      "useCase": "the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.",
+      "description": "",
+      "css": "@utility pressable {\n\t&:active {\n\t\tbox-shadow: var(--era-shadow-pressed);\n\t}\n\n\t&:active > [data-era-press-content] {\n\t\ttranslate: var(--era-press-effective-x, var(--era-press-sink-x))\n\t\t\tvar(--era-press-effective-y, var(--era-press-sink-y));\n\t}\n}"
     },
     {
-      "name": "rounded-row",
+      "name": "tier-icon",
       "names": [
-        "rounded-row"
+        "tier-icon",
+        "tier-pill",
+        "tier-chip",
+        "tier-control",
+        "tier-bar"
       ],
       "file": "index.css",
-      "useCase": "the radius for a row inside a container that pads it by the gutter — a nav rail, a command list, any scrolling list of controls. For a row in a menu PANEL, whose inset is the surface-owned frame rather than the gutter, use rounded-menu-item.",
-      "description": "THE ROW RADIUS — concentricity for a row that is inset, WITH its inset intact.\n\nThe law is rd_outer − rd_inner = gap. A row inside a container that pads it by\nthe gutter therefore takes the container's radius MINUS the gutter — and no\ntier radius equals that at more than one density, which is why reaching for\n`rounded-control` and hoping looks wrong: in a control-radius pane the row and\nthe pane end up with identical curvature separated by 5px of gap, two arcs at\none corner with no relationship.\n\nThe alternative — deleting the gap so equal radii become legal — is the wrong\ntrade and was briefly shipped. The ladder exists so a gap and concentric\ncorners COEXIST; spending one to buy the other gives up the thing it is for.\n\nThe calc runs on the ROW, not on the container, which is what makes it\nautomatic: `--era-container-rd` is inherited, so a container that is not\ncontrol-radius publishes its own and every row inside re-derives. era's\ncommand palette does exactly that — it is rd-bar, so its rows resolve to\nrd-bar − gap, which IS rd-control (control-inset-bar is the gutter), and the\npalette's geometry is unchanged by this.",
-      "css": "@utility rounded-row {\n\tborder-radius: max(0px, calc(var(--era-container-rd, var(--era-rd-control)) - var(--era-gap)));\n}"
+      "description": "BOUNDED GEOMETRY — height and radius are one decision.\n\nA tier is a geometric type, not two classes a caller must remember to keep in\nsync. `tier-control` establishes h-control AND rd-control; the radius ladder\nthen guarantees rd_outer − rd_inner = (h_outer − h_inner)/2 for every pair.\nWidth remains the component's decision: a row stretches, a button adds\nmin-w-control, and a square control adds w-control.",
+      "css": "@utility tier-icon {\n\theight: var(--era-h-icon);\n\tborder-radius: var(--era-rd-icon);\n}\n\n@utility tier-pill {\n\theight: var(--era-h-pill);\n\tborder-radius: var(--era-rd-pill);\n}\n\n@utility tier-chip {\n\theight: var(--era-h-chip);\n\tborder-radius: var(--era-rd-chip);\n}\n\n@utility tier-control {\n\theight: var(--era-h-control);\n\tborder-radius: var(--era-rd-control);\n}\n\n@utility tier-bar {\n\theight: var(--era-h-bar);\n\tborder-radius: var(--era-rd-bar);\n}"
     },
     {
       "name": "h-line",
@@ -120,6 +153,16 @@
       "description": "One LINE BOX tall — the height of the text this stands in for.\n\nSkeleton's `line` used h-(--era-text), which is the body FONT SIZE: never the\nheight of a rendered line (that is font-size x leading), and wrong again by\nthe ladder's ratio for any rung other than body. `1lh` resolves against the\nelement's OWN computed line-height, so putting a text-* class on the skeleton\nmakes it match that tier exactly, at every density, and it follows a leading\nchange for free.",
       "css": "@utility h-line {\n\theight: 1lh;\n}"
     },
+    {
+      "name": "era-track-well",
+      "names": [
+        "era-track-well"
+      ],
+      "file": "index.css",
+      "useCase": "instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.",
+      "description": "A WELL THAT SURVIVES BEING FILLED.\n\n`shadow-well` is an INSET shadow, and an inset shadow belongs to the\nelement's background layer — it paints under the element's own descendants.\nThat is invisible on a well holding text (a checkbox, a code block: the\nchrome runs around the content) and wrong the moment something paints the\nwhole box. Meter, Progress and the Slider track all do exactly that: an\nopaque child, `translateX`-ed to the value. So the well survived only where\nthe track was EMPTY — a half-full meter on bevel had a chisel to the right\nof the value and none to the left, which reads as a hole with a sticker\nover it rather than a level inside a well.\n\nThe fix is painting order, not geometry: the same `--era-shadow-well` on a\npseudo-element that is the element's LAST child, so it lands above the fill.\nThe fill still spans the full box — nothing is inset, no radius is\nre-derived, and 0% and 100% keep their exact ends. The `position: relative`\nis load-bearing (the overlay resolves against this box) and `inherit` on the\nradius keeps it honest under `data-corners=\"square\"`.\n\nSurface-agnostic on purpose. It reads the same token every well reads, so\nglass's hairline rim is restored by the same line that restores bevel's\nchisel, and flat — where the token is `none` — renders exactly as before.\nReported against bevel by a consumer; it was never a bevel bug.",
+      "css": "@utility era-track-well {\n\tposition: relative;\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tborder-radius: inherit;\n\t\tbox-shadow: var(--era-shadow-well);\n\t\tpointer-events: none;\n\t}\n}"
+    },
     {
       "name": "era-skeleton-pulse",
       "names": [
@@ -339,7 +382,7 @@
         "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.",
+      "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier,\nbg-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}"
     },
     {
@@ -433,12 +476,16 @@
         "p-chip-inset-bar",
         "px-chip-inset-bar",
         "py-chip-inset-bar",
-        "gap-chip-inset-bar"
+        "gap-chip-inset-bar",
+        "p-control-inset-bar",
+        "px-control-inset-bar",
+        "py-control-inset-bar",
+        "gap-control-inset-bar"
       ],
       "file": "index.css",
       "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": "@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-pill-inset-bar: var(--era-pill-inset-bar);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\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-pill-inset-bar: var(--era-pill-inset-bar);\n\t--spacing-chip-inset-control: var(--era-chip-inset-control);\n\t--spacing-chip-inset-bar: var(--era-chip-inset-bar);\n\t--spacing-control-inset-bar: var(--era-control-inset-bar);\n}"
     },
     {
       "name": "p-glyph-icon",
@@ -590,11 +637,17 @@
         "border-warning",
         "bg-warning-fg",
         "text-warning-fg",
-        "border-warning-fg"
+        "border-warning-fg",
+        "bg-info",
+        "text-info",
+        "border-info",
+        "bg-info-fg",
+        "text-info-fg",
+        "border-info-fg"
       ],
       "file": "index.css",
       "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}"
+      "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\t--color-info: var(--color-info);\n\t--color-info-fg: var(--color-info-fg);\n}"
     }
   ]
 }