@signal9/era-ui 30.7.0 → 31.0.0

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": 13623,
       "sections": [
         "Overview",
         "era-interactive",
@@ -65,8 +65,9 @@
         "era-token-ink",
         "era-label-ink",
         "glass-blur",
-        "rounded-row",
+        "tier-icon · tier-pill · tier-chip · tier-control · tier-bar",
         "h-line",
+        "era-track-well",
         "era-skeleton-pulse",
         "era-shimmer",
         "era-collapse",
@@ -87,12 +88,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 +159,7 @@
       "slug": "badge",
       "title": "Badge",
       "summary": "A small label for status or categorization.",
-      "tokenEstimate": 279,
+      "tokenEstimate": 282,
       "sections": [
         "Import",
         "Props",
@@ -184,7 +185,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 +196,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 +208,7 @@
       "slug": "button",
       "title": "Button",
       "summary": "A flexible button or link element.",
-      "tokenEstimate": 1070,
+      "tokenEstimate": 1625,
       "sections": [
         "Import",
         "Props",
@@ -242,7 +243,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 +254,7 @@
       "slug": "chip",
       "title": "Chip",
       "summary": "An interactive, optionally dismissible token.",
-      "tokenEstimate": 329,
+      "tokenEstimate": 593,
       "sections": [
         "Import",
         "Props",
@@ -310,7 +311,7 @@
       "slug": "separator",
       "title": "Separator",
       "summary": "A visual divider between content.",
-      "tokenEstimate": 218,
+      "tokenEstimate": 531,
       "sections": [
         "Import",
         "Props",
@@ -752,7 +753,7 @@
       "slug": "meter",
       "title": "Meter",
       "summary": "Displays a value within a known range.",
-      "tokenEstimate": 188,
+      "tokenEstimate": 1469,
       "sections": [
         "Import",
         "Props"
@@ -1129,14 +1130,17 @@
       "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}"
     },
     {
-      "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 +1152,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": [
@@ -1461,12 +1475,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 +1636,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

@@ -101,14 +101,17 @@
       "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}"
     },
     {
-      "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 +123,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": [
@@ -433,12 +446,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 +607,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}"
     }
   ]
 }