@signal9/era-ui 26.1.1 → 28.0.0

package/dist/generated-docs/manifest.json

@@ -8,6 +8,14 @@
       "sections": [],
       "file": "getting-started.md"
     },
+    {
+      "slug": "todo",
+      "title": "Todo",
+      "summary": "An agent's plan board — a collapsible checklist whose header still shows the active item.",
+      "tokenEstimate": 25,
+      "sections": [],
+      "file": "todo.md"
+    },
     {
       "slug": "spacing",
       "title": "Spacing",
@@ -44,7 +52,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 12355,
+      "tokenEstimate": 12389,
       "sections": [
         "Overview",
         "era-interactive",
@@ -79,7 +87,7 @@
         "bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)",
         "p-gutter · px-gutter · py-gutter · gap-gutter · p-panel · px-panel · py-panel · gap-panel · … (24 in all)",
         "p-inset-pill · px-inset-pill · py-inset-pill · gap-inset-pill · p-inset-chip · px-inset-chip · py-inset-chip · gap-inset-chip · … (12 in all)",
-        "p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (32 in all)",
+        "p-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-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",
@@ -183,6 +191,18 @@
       ],
       "file": "bar.md"
     },
+    {
+      "slug": "nav",
+      "title": "Nav",
+      "summary": "A navigation landmark and its items — the current one announces itself, and that announcement is what paints it.",
+      "tokenEstimate": 739,
+      "sections": [
+        "Import",
+        "Nav.Bar",
+        "Nav.Item"
+      ],
+      "file": "nav.md"
+    },
     {
       "slug": "button",
       "title": "Button",
@@ -346,7 +366,7 @@
       "slug": "accordion",
       "title": "Accordion",
       "summary": "Collapsible content sections.",
-      "tokenEstimate": 309,
+      "tokenEstimate": 311,
       "sections": [
         "Import",
         "Accordion.Root",
@@ -361,9 +381,10 @@
       "slug": "alert-dialog",
       "title": "Alert Dialog",
       "summary": "A modal confirmation before destructive actions.",
-      "tokenEstimate": 522,
+      "tokenEstimate": 585,
       "sections": [
         "Import",
+        "AlertDialog.Root",
         "AlertDialog.Trigger",
         "AlertDialog.Content",
         "AlertDialog.Overlay",
@@ -425,7 +446,7 @@
       "slug": "combobox",
       "title": "Combobox",
       "summary": "Search and select from a filtered list of options.",
-      "tokenEstimate": 415,
+      "tokenEstimate": 416,
       "sections": [
         "Import",
         "Combobox.Input",
@@ -472,7 +493,7 @@
       "slug": "step",
       "title": "Step",
       "summary": "Expandable inline step — tool calls, thinking, agent actions.",
-      "tokenEstimate": 316,
+      "tokenEstimate": 318,
       "sections": [
         "Import",
         "Step.Root",
@@ -486,9 +507,10 @@
       "slug": "context-menu",
       "title": "Context Menu",
       "summary": "Options and actions triggered by right-click.",
-      "tokenEstimate": 579,
+      "tokenEstimate": 644,
       "sections": [
         "Import",
+        "ContextMenu.Root",
         "ContextMenu.Trigger",
         "ContextMenu.Content",
         "ContextMenu.Item",
@@ -519,7 +541,7 @@
       "slug": "date-picker",
       "title": "Date Picker",
       "summary": "Date input with a calendar popover.",
-      "tokenEstimate": 1100,
+      "tokenEstimate": 1101,
       "sections": [
         "Import",
         "DatePicker.Root",
@@ -561,7 +583,7 @@
       "slug": "date-range-picker",
       "title": "Date Range Picker",
       "summary": "Date range input with a calendar popover.",
-      "tokenEstimate": 1173,
+      "tokenEstimate": 1174,
       "sections": [
         "Import",
         "DateRangePicker.Root",
@@ -589,9 +611,10 @@
       "slug": "dialog",
       "title": "Dialog",
       "summary": "A modal window for content or user input.",
-      "tokenEstimate": 578,
+      "tokenEstimate": 637,
       "sections": [
         "Import",
+        "Dialog.Root",
         "Dialog.Trigger",
         "Dialog.Content",
         "Dialog.Overlay",
@@ -606,9 +629,10 @@
       "slug": "dropdown-menu",
       "title": "Dropdown Menu",
       "summary": "A menu of selectable items.",
-      "tokenEstimate": 585,
+      "tokenEstimate": 652,
       "sections": [
         "Import",
+        "DropdownMenu.Root",
         "DropdownMenu.Trigger",
         "DropdownMenu.Content",
         "DropdownMenu.Item",
@@ -663,9 +687,10 @@
       "slug": "link-preview",
       "title": "Link Preview",
       "summary": "Shows rich preview content when hovering a link.",
-      "tokenEstimate": 169,
+      "tokenEstimate": 232,
       "sections": [
         "Import",
+        "LinkPreview.Root",
         "LinkPreview.Trigger",
         "LinkPreview.Content"
       ],
@@ -707,7 +732,7 @@
       "slug": "menubar",
       "title": "Menubar",
       "summary": "A horizontal bar of dropdown menus.",
-      "tokenEstimate": 598,
+      "tokenEstimate": 613,
       "sections": [
         "Import",
         "Menubar.Root",
@@ -727,7 +752,7 @@
       "slug": "meter",
       "title": "Meter",
       "summary": "Displays a value within a known range.",
-      "tokenEstimate": 72,
+      "tokenEstimate": 188,
       "sections": [
         "Import",
         "Props"
@@ -843,7 +868,7 @@
       "slug": "select",
       "title": "Select",
       "summary": "A dropdown select menu.",
-      "tokenEstimate": 373,
+      "tokenEstimate": 376,
       "sections": [
         "Import",
         "Select.Trigger",
@@ -935,7 +960,7 @@
       "slug": "toggle-group",
       "title": "Toggle Group",
       "summary": "A set of toggle buttons with single or multiple selection.",
-      "tokenEstimate": 164,
+      "tokenEstimate": 178,
       "sections": [
         "Import",
         "ToggleGroup.Root",
@@ -943,6 +968,30 @@
       ],
       "file": "toggle-group.md"
     },
+    {
+      "slug": "timeline",
+      "title": "Timeline",
+      "summary": "A staged progress bar where each segment's width is how long that step took.",
+      "tokenEstimate": 203,
+      "sections": [
+        "Import",
+        "Timeline.Root",
+        "Timeline.Step"
+      ],
+      "file": "timeline.md"
+    },
+    {
+      "slug": "tree",
+      "title": "Tree",
+      "summary": "A disclosure hierarchy with real tree semantics — roving focus, and selection separate from expansion.",
+      "tokenEstimate": 303,
+      "sections": [
+        "Import",
+        "Tree.Root",
+        "Tree.Item"
+      ],
+      "file": "tree.md"
+    },
     {
       "slug": "toolbar",
       "title": "Toolbar",
@@ -968,9 +1017,10 @@
       "slug": "tooltip",
       "title": "Tooltip",
       "summary": "Supplementary info on hover or focus.",
-      "tokenEstimate": 154,
+      "tokenEstimate": 214,
       "sections": [
         "Import",
+        "Tooltip.Root",
         "Tooltip.Trigger",
         "Tooltip.Content"
       ],
@@ -1400,6 +1450,10 @@
         "px-pill-inset-control",
         "py-pill-inset-control",
         "gap-pill-inset-control",
+        "p-pill-inset-bar",
+        "px-pill-inset-bar",
+        "py-pill-inset-bar",
+        "gap-pill-inset-bar",
         "p-chip-inset-control",
         "px-chip-inset-control",
         "py-chip-inset-control",
@@ -1412,7 +1466,7 @@
       "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-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}"
     },
     {
       "name": "p-glyph-icon",

package/dist/generated-docs/menubar.md

@@ -28,6 +28,7 @@ Inherits all props from `Menubar.RootProps`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | `ref?` | `(forwarded)` | `null` | bindable |
+| `value?` | `(forwarded)` | `''` | bindable |
 
 ## Menubar.Trigger
 
@@ -39,7 +40,7 @@ Inherits all props from `PartProps<Menubar.TriggerProps>`.
 
 ## Menubar.Content
 
-Inherits all props from `PartProps<Menubar.ContentProps>`.
+Inherits all props from `OwnedPartProps<Menubar.ContentProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
@@ -80,7 +81,7 @@ Inherits all props from `Menubar.SeparatorProps`.
 
 ## Menubar.SubTrigger
 
-Inherits all props from `PartProps<Menubar.SubTriggerProps>`.
+Inherits all props from `OwnedPartProps<Menubar.SubTriggerProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
@@ -88,7 +89,7 @@ Inherits all props from `PartProps<Menubar.SubTriggerProps>`.
 
 ## Menubar.SubContent
 
-Inherits all props from `PartProps<Menubar.SubContentProps>`.
+Inherits all props from `OwnedPartProps<Menubar.SubContentProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|

package/dist/generated-docs/meter.md

@@ -14,4 +14,10 @@ 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
+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. |
 | `ref?` | `(forwarded)` | `null` | bindable |

package/dist/generated-docs/nav.md

@@ -0,0 +1,61 @@
+# Nav
+
+A navigation landmark and its items — the current one announces itself, and that announcement is what paints it.
+
+## Import
+
+```ts
+import * as Nav from "@signal9/era-ui/nav";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Nav.Bar`
+- `Nav.Item`
+
+## Nav.Bar
+
+Inherits all props from `HTMLAttributes<HTMLElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `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. |
+| `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,
+where an unasked-for rule is chrome. Turn it on rather than reaching for
+a Separator underneath, so the line is the bar's own and stays with it. |
+| `label?` | `string` | `'Main'` | The accessible name for this landmark. A page may hold several
+navigations (primary, breadcrumb, pagination, footer) and a screen
+reader lists them all by name — unnamed, they read as "navigation",
+"navigation", "navigation". Defaults to "Main" rather than nothing so
+the common case is named without anyone having to know this. |
+| `children?` | `Snippet` | — | — |
+
+## Nav.Item
+
+Inherits all props from `HTMLAnchorAttributes`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLAnchorElement \| null` | `null` | bindable |
+| `href` | `string` | — | — |
+| `variant?` | `'filled' \| 'link'` | `'filled'` | `filled` (default) is a control on a rung — a bar of buttons. `link`
+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. |
+| `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
+a route changes and someone updates the styling flag but not the
+announcement — leaving a tab that LOOKS current to sighted users and
+announces nothing to a screen reader, or the reverse. This sets
+`aria-current="page"`, and the styling below keys off that attribute,
+so the look and the announcement cannot disagree: there is one fact
+and it is the accessible one. |
+| `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | Tier, matching Button's rungs so an item nests in a bar the same way. |
+| `lead?` | `Snippet` | — | Icon before the label, outside it — same contract as Button's. |
+| `trail?` | `Snippet` | — | Icon after the label, outside it. |
+| `children?` | `Snippet` | — | — |

package/dist/generated-docs/select.md

@@ -19,7 +19,7 @@ Composed from sub-components — compose explicitly at the call site:
 
 ## Select.Trigger
 
-Inherits all props from `PartProps<Select.TriggerProps>`.
+Inherits all props from `OwnedPartProps<Select.TriggerProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
@@ -36,7 +36,7 @@ Inherits all props from `WithoutChildrenOrChild<Select.ValueProps>`.
 
 ## Select.Content
 
-Inherits all props from `PartProps<Select.ContentProps>`.
+Inherits all props from `OwnedPartProps<Select.ContentProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|

package/dist/generated-docs/step.md

@@ -27,7 +27,7 @@ Inherits all props from `Collapsible.RootProps`.
 
 ## Step.Summary
 
-Inherits all props from `PartProps<Collapsible.TriggerProps>`.
+Inherits all props from `OwnedPartProps<Collapsible.TriggerProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
@@ -35,7 +35,7 @@ Inherits all props from `PartProps<Collapsible.TriggerProps>`.
 
 ## Step.Content
 
-Inherits all props from `PartProps<Collapsible.ContentProps>`.
+Inherits all props from `OwnedPartProps<Collapsible.ContentProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|

package/dist/generated-docs/timeline.md

@@ -0,0 +1,32 @@
+# Timeline
+
+A staged progress bar where each segment's width is how long that step took.
+
+## Import
+
+```ts
+import * as Timeline from "@signal9/era-ui/timeline";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Timeline.Root`
+- `Timeline.Step`
+
+## Timeline.Root
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `steps?` | `TimelineStep[]` | `[]` | — |
+| `tick?` | `number` | `100` | Live counter interval in ms. 0 stops the clock (the counter freezes). |
+| `showClock?` | `boolean` | `true` | — |
+| `children?` | `Snippet` | — | — |
+| `class?` | `string` | — | — |
+
+## Timeline.Step
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `step` | `TimelineStep` | — | — |
+| `showClock?` | `boolean` | `true` | — |
+| `class?` | `string` | — | — |

package/dist/generated-docs/todo.md

@@ -0,0 +1,3 @@
+# Todo
+
+An agent's plan board — a collapsible checklist whose header still shows the active item.

package/dist/generated-docs/toggle-group.md

@@ -19,6 +19,7 @@ Inherits all props from `PartProps<ToggleGroup.RootProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
+| `variant?` | `ToggleGroupVariant` | `'plain'` | — |
 | `ref?` | `(forwarded)` | `null` | bindable |
 
 ## ToggleGroup.Item

package/dist/generated-docs/tooltip.md

@@ -10,9 +10,19 @@ import * as Tooltip from "@signal9/era-ui/tooltip";
 
 Composed from sub-components — compose explicitly at the call site:
 
+- `Tooltip.Root`
 - `Tooltip.Trigger`
 - `Tooltip.Content`
 
+## Tooltip.Root
+
+Inherits all props from `Tooltip.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `children?` | `Snippet` | — | — |
+| `open?` | `(forwarded)` | `false` | bindable |
+
 ## Tooltip.Trigger
 
 Inherits all props from `Tooltip.TriggerProps`.
@@ -23,7 +33,7 @@ Inherits all props from `Tooltip.TriggerProps`.
 
 ## Tooltip.Content
 
-Inherits all props from `PartProps<Tooltip.ContentProps>`.
+Inherits all props from `OwnedPartProps<Tooltip.ContentProps>`.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|

package/dist/generated-docs/tree.md

@@ -0,0 +1,36 @@
+# Tree
+
+A disclosure hierarchy with real tree semantics — roving focus, and selection separate from expansion.
+
+## Import
+
+```ts
+import * as Tree from "@signal9/era-ui/tree";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Tree.Root`
+- `Tree.Item`
+
+## Tree.Root
+
+Inherits all props from `HTMLAttributes<HTMLUListElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `HTMLUListElement \| null` | `null` | bindable |
+| `nodes?` | `TreeNode[]` | `[]` | — |
+| `expanded?` | `string[]` | `[]` | bindable — Controlled: bind it, or drive it from the URL. |
+| `selected?` | `string \| null` | `null` | bindable |
+| `label?` | `string` | `'Tree'` | Accessible name for the tree landmark. |
+| `item?` | `Snippet<[FlatNode]>` | — | Render your own row. Omitted, the default row is used. |
+| `trailing?` | `Snippet<[FlatNode]>` | — | End-of-row slot on the default row — a count badge, a status dot. |
+
+## Tree.Item
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `item` | `FlatNode` | — | — |
+| `trailing?` | `Snippet<[FlatNode]>` | — | Rendered at the end of the row — a count badge, a status dot. |
+| `class?` | `string` | — | — |

package/dist/generated-docs/utilities.json

@@ -422,6 +422,10 @@
         "px-pill-inset-control",
         "py-pill-inset-control",
         "gap-pill-inset-control",
+        "p-pill-inset-bar",
+        "px-pill-inset-bar",
+        "py-pill-inset-bar",
+        "gap-pill-inset-bar",
         "p-chip-inset-control",
         "px-chip-inset-control",
         "py-chip-inset-control",
@@ -434,7 +438,7 @@
       "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-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}"
     },
     {
       "name": "p-glyph-icon",

package/dist/generated-docs/utilities.md

@@ -92,7 +92,7 @@ source uses it where a name exists.
 | `bg-well` `text-well` `border-well` `bg-elevated` `text-elevated` `border-elevated` `bg-highlight` `text-highlight` `border-highlight` `bg-overlay` `text-overlay` `border-overlay` | — |
 | `p-gutter` `px-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` | — |
 | `p-inset-pill` `px-inset-pill` `py-inset-pill` `gap-inset-pill` `p-inset-chip` `px-inset-chip` `py-inset-chip` `gap-inset-chip` `p-inset-control` `px-inset-control` `py-inset-control` `gap-inset-control` | 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` `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` | 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` `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-pill-inset-bar` `px-pill-inset-bar` `py-pill-inset-bar` `gap-pill-inset-bar` `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` | 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` | — |
@@ -966,7 +966,7 @@ Declared in `index.css`.
 }
 ```
 
-## p-icon-inset-pill · px-icon-inset-pill · py-icon-inset-pill · gap-icon-inset-pill · p-icon-inset-chip · px-icon-inset-chip · py-icon-inset-chip · gap-icon-inset-chip · … (32 in all)
+## p-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)
 
 **Use it for:** 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.
 
@@ -980,6 +980,7 @@ Declared in `index.css`.
 	--spacing-icon-inset-bar: var(--era-icon-inset-bar);
 	--spacing-pill-inset-chip: var(--era-pill-inset-chip);
 	--spacing-pill-inset-control: var(--era-pill-inset-control);
+	--spacing-pill-inset-bar: var(--era-pill-inset-bar);
 	--spacing-chip-inset-control: var(--era-chip-inset-control);
 	--spacing-chip-inset-bar: var(--era-chip-inset-bar);
 }

package/dist/ui/nav/nav-item.svelte

@@ -8,40 +8,56 @@
 	 * `filled` is the raised control: bg-fill and the pressed shadow, held on
 	 * hover so it does not spring back up on bevel. Unchanged.
 	 *
-	 * `link` needed a different answer, and two obvious ones are wrong.
+	 * `link` is DECORATION ONLY. The current item is not bolder, and not a
+	 * different colour. Both of those were tried; here is why neither is here.
 	 *
-	 * A full-strength underline alone is the HOVER state — era-link is already
-	 * underlined at rest (currentColor at 30%) and hover resolves it to full ink,
-	 * so a current item painted that way reads as permanently hovered.
+	 * COLOUR CANNOT CARRY IT. `text-bright` is a zero delta — --color-link IS
+	 * --color-bright in the default theme — and on themes pointing link at
+	 * --color-primary or --color-10 it REVERSES the emphasis, turning the
+	 * current item neutral while its neighbours stay coloured.
 	 *
-	 * `text-bright` does nothing. --color-link IS --color-bright in the default
-	 * theme, so the delta is zero — measured, after writing it. Worse, themes
-	 * that point link at --color-primary or --color-10 would have it REVERSE the
-	 * emphasis: the current item goes neutral while its neighbours stay coloured.
+	 * Knocking the OTHER items back so the current one can read as brighter is
+	 * the obvious repair, and it does not survive the theme set either. Measured
+	 * as composited contrast against --color-1, a 70% knock-back leaves
+	 * sand/light at 3.59:1 — under the 4.5 floor — while every other theme sits
+	 * between 4.74 and 7.86. The binding constraint is not whether a theme's
+	 * link hue is muted (signalnine's --color-10 survives fine); it is how much
+	 * headroom that theme's link had to begin with, and sand's light pair starts
+	 * at 6.90:1. The deepest knock-back legal everywhere is around 88%, which is
+	 * not a cue anyone would notice. A consumer who wants it on a theme with the
+	 * headroom can do it in one line, since the decoration derives from
+	 * currentColor and follows.
 	 *
-	 * So the current face uses the two axes that are independent of whatever hue
-	 * a theme gives links: decoration WEIGHT (2px, which no other state uses) and
-	 * font weight. Both survive every theme, and hover keeps its own meaning for
-	 * the items that are not current.
+	 * WEIGHT WAS HERE AND IS NOT ANY MORE. It went in as a second axis beside
+	 * the decoration, then had to be raised 500 -> 600 (012eeed) because in a
+	 * monospace face 400 -> 500 keeps the advance width and reads as almost
+	 * nothing — and era's default font axis is mono. That fix was correct about
+	 * its own facts and wrong about the conclusion: an axis that has to be
+	 * retuned per font stack is not a second axis, it is a liability with a
+	 * setting. At 600 it is unmistakable in mono and heavy-handed in sans, which
+	 * is how the next consumer came to report the opposite complaint — that the
+	 * current item should not go bold at all.
 	 *
-	 * THE FONT WEIGHT IS 600, NOT 500, AND THAT IS THE WHOLE POINT OF IT. era's
-	 * default font axis is mono, and in a monospace face 400 -> 500 is very
-	 * nearly nothing: the glyphs keep their advance width, so there is no shape
-	 * change to notice and only a trace more ink. Rendered at 8x in the shipped
-	 * stack, 400 and 500 are hard to tell apart and 600 is unmistakable. At 500
-	 * the "two axes" were one axis for most consumers, since most of them are on
-	 * the default. Reported by a consumer running a mono nav, who could see the
-	 * decoration doing all the work.
+	 * The report behind 012eeed already contained the answer: "all the signal
+	 * was coming from the 2px decoration." That was offered as the problem. It
+	 * is the solution. The decoration is three-way distinct on its own, in every
+	 * font and every theme, because it is the same ink at three strengths:
 	 *
-	 * 600 costs no layout: measured across weights, the advance width is
-	 * identical in mono, so the bar does not reflow when the route changes.
+	 *   at rest   auto thickness, currentColor at 30%   (era-link's whisper)
+	 *   hover     auto thickness, currentColor at 100%
+	 *   current   2px thickness,  currentColor at 100%
+	 *
+	 * So a current item cannot read as "permanently hovered" — hover is thin and
+	 * current is thick, and the two are told apart by the axis neither shares
+	 * with colour. Dropping the weight also removes the last thing in this
+	 * variant that could reflow a bar on a route change.
 	 */
 	export const navItemVariants = tv({
 		variants: {
 			variant: {
 				filled:
 					'no-underline aria-[current=page]:bg-fill aria-[current=page]:text-bright aria-[current=page]:shadow-pressed aria-[current=page]:hover:shadow-pressed',
-				link: 'aria-[current=page]:font-semibold aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]'
+				link: 'aria-[current=page]:decoration-2 aria-[current=page]:[text-decoration-color:currentColor]'
 			}
 		},
 		defaultVariants: { variant: 'filled' }