@signal9/era-ui 16.0.1 → 18.0.0

package/dist/generated-docs/manifest.json

@@ -44,7 +44,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 11478,
+      "tokenEstimate": 11937,
       "sections": [
         "Overview",
         "era-interactive",
@@ -57,6 +57,7 @@
         "era-token-ink",
         "era-label-ink",
         "glass-blur",
+        "rounded-row",
         "era-shimmer",
         "era-collapse",
         "h-icon · h-pill · h-chip · h-control · h-bar",
@@ -1075,6 +1076,16 @@
       "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}"
     },
+    {
+      "name": "rounded-row",
+      "names": [
+        "rounded-row"
+      ],
+      "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}"
+    },
     {
       "name": "era-shimmer",
       "names": [

package/dist/generated-docs/utilities.json

@@ -100,6 +100,16 @@
       "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}"
     },
+    {
+      "name": "rounded-row",
+      "names": [
+        "rounded-row"
+      ],
+      "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}"
+    },
     {
       "name": "era-shimmer",
       "names": [

package/dist/generated-docs/utilities.md

@@ -70,6 +70,7 @@ source uses it where a name exists.
 | `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. |
 | `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). |
 | `h-icon` `h-pill` `h-chip` `h-control` `h-bar` | the tier-height ladder — h-icon (icon) · h-pill (nested pill) · h-chip (standalone pill) · h-control (control) · h-bar (bar); the named form of h-(--era-h-*). |
@@ -421,6 +422,38 @@ Declared in `index.css`.
 }
 ```
 
+## rounded-row
+
+**Use it for:** 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.
+
+THE ROW RADIUS — concentricity for a row that is inset, WITH its inset intact.
+
+The law is rd_outer − rd_inner = gap. A row inside a container that pads it by
+the gutter therefore takes the container's radius MINUS the gutter — and no
+tier radius equals that at more than one density, which is why reaching for
+`rounded-control` and hoping looks wrong: in a control-radius pane the row and
+the pane end up with identical curvature separated by 5px of gap, two arcs at
+one corner with no relationship.
+
+The alternative — deleting the gap so equal radii become legal — is the wrong
+trade and was briefly shipped. The ladder exists so a gap and concentric
+corners COEXIST; spending one to buy the other gives up the thing it is for.
+
+The calc runs on the ROW, not on the container, which is what makes it
+automatic: `--era-container-rd` is inherited, so a container that is not
+control-radius publishes its own and every row inside re-derives. era's
+command palette does exactly that — it is rd-bar, so its rows resolve to
+rd-bar − gap, which IS rd-control (control-inset-bar is the gutter), and the
+palette's geometry is unchanged by this.
+
+Declared in `index.css`.
+
+```css
+@utility rounded-row {
+	border-radius: max(0px, calc(var(--era-container-rd, var(--era-rd-control)) - var(--era-gap)));
+}
+```
+
 ## era-shimmer
 
 **Use it for:** the in-progress text treatment — put it on a "working…" / "thinking…" label while a task streams, instead of a spinner beside the text.

package/dist/styles/density.css

@@ -411,6 +411,21 @@
 	--era-mask-glyph: square;
 }
 
+/* THE AXIS HAS TO GO BOTH WAYS. Only `square` had a rule: the rounded value
+ * lived on :root alone, so a subtree could be squared and never un-squared —
+ * a `data-corners="rounded"` island inside a square page had nothing to restore
+ * the scale with, and inherited 0. Every other axis can be overridden in either
+ * direction on any subtree, and this one silently could not.
+ *
+ * No specificity fight here, unlike the font axis: these set a custom property
+ * on the element that CARRIES the attribute, and descendants resolve it by
+ * inheritance. The nearest ancestor wins because that is what inheritance does,
+ * regardless of which value era declares last. */
+[data-corners='rounded'] {
+	--era-roundness-scale: 1;
+	--era-mask-glyph: disc;
+}
+
 /* Animate the roundness scale itself — not border-radius. sp changes snap
    instantly (responsive scrub); the corners toggle animates scale 1 ↔ 0,
    which cascades through the rd-* calc chain to every element at 60 fps.

package/dist/styles/index.css

@@ -406,6 +406,34 @@
 	}
 }
 
+/* THE ROW RADIUS — concentricity for a row that is inset, WITH its inset intact.
+ *
+ * The law is rd_outer − rd_inner = gap. A row inside a container that pads it by
+ * the gutter therefore takes the container's radius MINUS the gutter — and no
+ * tier radius equals that at more than one density, which is why reaching for
+ * `rounded-control` and hoping looks wrong: in a control-radius pane the row and
+ * the pane end up with identical curvature separated by 5px of gap, two arcs at
+ * one corner with no relationship.
+ *
+ * The alternative — deleting the gap so equal radii become legal — is the wrong
+ * trade and was briefly shipped. The ladder exists so a gap and concentric
+ * corners COEXIST; spending one to buy the other gives up the thing it is for.
+ *
+ * The calc runs on the ROW, not on the container, which is what makes it
+ * automatic: `--era-container-rd` is inherited, so a container that is not
+ * control-radius publishes its own and every row inside re-derives. era's
+ * command palette does exactly that — it is rd-bar, so its rows resolve to
+ * rd-bar − gap, which IS rd-control (control-inset-bar is the gutter), and the
+ * palette's geometry is unchanged by this.
+ *
+ * @use 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. */
+@utility rounded-row {
+	border-radius: max(0px, calc(var(--era-container-rd, var(--era-rd-control)) - var(--era-gap)));
+}
+
 /* In-progress text shimmer — a bright sweep through muted text (the standard
  * "working…" label treatment in streaming UIs). Timing derives from the motion
  * axis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the

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

@@ -8,7 +8,7 @@
 <Command.Item
 	bind:ref
 	class={cn(
-		'flex h-control cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-fg outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
+		'flex h-control cursor-pointer items-center gap-gutter rounded-row px-inset-control text-body leading-none text-fg outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
 		className
 	)}
 	{...restProps}

package/dist/ui/command/command-link-item.svelte

@@ -8,7 +8,7 @@
 <Command.LinkItem
 	bind:ref
 	class={cn(
-		'flex h-control cursor-pointer items-center gap-gutter rounded-control px-inset-control text-body leading-none text-fg no-underline outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
+		'flex h-control cursor-pointer items-center gap-gutter rounded-row px-inset-control text-body leading-none text-fg no-underline outline-none select-none not-has-[svg]:era-label-ink data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[selected]:bg-highlight',
 		className
 	)}
 	{...restProps}

package/dist/ui/command/command-root.svelte

@@ -24,7 +24,11 @@
 		// glass-blur, like every other floating panel (menus, dialogs, pickers):
 		// inert on opaque surfaces, blurs the backdrop when the palette floats.
 		!bare &&
-			'overflow-hidden rounded-bar border border-(color:--era-border-color) bg-well p-gutter shadow-lg glass-blur',
+			// [--era-container-rd:…] publishes this panel's own radius, so the rows
+			// inside re-derive against rd-bar rather than the rd-control default.
+			// rd-bar − gutter IS rd-control, so the palette renders unchanged; what
+			// changes is that the rows now say WHY they are that radius.
+			'overflow-hidden rounded-bar border border-(color:--era-border-color) bg-well p-gutter shadow-lg glass-blur [--era-container-rd:var(--era-rd-bar)]',
 		className
 	)}
 	{...restProps}

package/dist/utils/tw-merge-config.js

@@ -111,7 +111,7 @@ const spacingGroups = Object.fromEntries(SPACING_PREFIXES.map((prefix) => [
 ]));
 const radiusGroups = Object.fromEntries(RADIUS_SIDES.map((side) => [
     `rounded-${side}`,
-    [{ [`rounded-${side}`]: [...TIERS, 'menu-item'] }]
+    [{ [`rounded-${side}`]: [...TIERS, 'menu-item', 'row'] }]
 ]));
 export const twMergeConfig = {
     extend: {
@@ -124,7 +124,7 @@ export const twMergeConfig = {
             'font-size': [{ text: ['body', 'micro', 'lede', 'heading', 'title', 'display'] }],
             leading: [{ leading: ['body'] }],
             // era's radius rungs. rounded-sm/md/lg are Tailwind's own and already known.
-            rounded: [{ rounded: [...TIERS, 'menu-item'] }],
+            rounded: [{ rounded: [...TIERS, 'menu-item', 'row'] }],
             shadow: [{ shadow: ['well', 'pressed', 'highlight'] }],
             z: [{ z: ['chrome', 'drawer', 'overlay', 'toast', 'debug'] }],
             ease: [{ ease: ['base'] }],

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "16.0.1",
+	"version": "18.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -32,6 +32,7 @@
 	"files": [
 		"dist",
 		"skill",
+		"CHANGELOG.md",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],

package/skill/SKILL.md

@@ -39,9 +39,24 @@ a review finding.
 | Font    | `data-font`    | `mono` (default) `sans` `serif`       |
 | Motion  | `data-motion`  | `instant` `normal` `extra`            |
 
-Set them on `<html>` (portalled content inherits) or any subtree. A monospace
-root needs `html { font-size: 16px }` (browser quirk: monospace roots default
-to ~13px, silently shrinking every rem-derived token).
+**SET EVERY AXIS ON `<html>`.** A subtree override works for everything
+rendered inside that subtree — and does NOT reach anything that portals.
+Dialog, AlertDialog, Sheet, DropdownMenu, ContextMenu, Menubar, Tooltip and
+LinkPreview render at `document.body`, so they take the ROOT's axes, not the
+ones on the wrapper their trigger sits in.
+
+Measured: a `<Card>` inside a `data-surface="bevel"` div resolves to bevel and
+gets the chisel; a `<Dialog.Content>` opened from that same div resolves to
+`flat` and gets flat's chrome. Two surfaces in one screen, and nothing errors.
+
+So a subtree override is for a REGION you want to look different — a settings
+panel that is deliberately denser. If you want the whole app on bevel, set it
+at the root and never on a wrapper. The same applies to `data-mode`: a
+`data-mode="spacious"` section will open balanced menus if the root is
+balanced.
+
+A monospace root needs `html { font-size: 16px }` (browser quirk: monospace
+roots default to ~13px, silently shrinking every rem-derived token).
 
 ## The tier ladder