@signal9/era-ui 7.0.0 → 9.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": 6197,
+      "tokenEstimate": 6147,
       "sections": [
         "Overview",
         "era-interactive",
@@ -56,13 +56,12 @@
         "era-token-ink · era-ink-center",
         "era-shimmer",
         "era-collapse",
-        "h-xs · h-xxs · h-sm · h-md · h-lg",
-        "min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg",
-        "size-xs · size-xxs · size-sm · size-md · size-lg",
-        "px-sm · px-md · px-lg",
+        "h-icon · h-pill · h-chip · h-control · h-bar",
+        "min-h-icon · min-h-pill · min-h-chip · min-h-control · min-h-bar",
+        "size-icon · size-pill · size-chip · size-control · size-bar",
         "gap-gutter · p-gutter · px-gutter · py-gutter",
-        "p-inset-xxs · p-inset-sm · p-inset-md · px-inset-xxs · px-inset-sm · px-inset-md · py-inset-xxs · py-inset-sm · py-inset-md",
-        "px-pill-xxs · px-pill-sm",
+        "p-inset-pill · p-inset-chip · p-inset-control · px-inset-pill · px-inset-chip · px-inset-control · py-inset-pill · py-inset-chip · py-inset-control",
+        "px-pill · px-chip",
         "px-field",
         "p-panel · p-card",
         "p-content",
@@ -160,7 +159,7 @@
       "slug": "bar",
       "title": "Bar",
       "summary": "A flex container for toolbars and headers, in three heights.",
-      "tokenEstimate": 207,
+      "tokenEstimate": 206,
       "sections": [
         "Import",
         "Props"
@@ -1054,58 +1053,46 @@
       "css": "@utility era-collapse {\n\toverflow: hidden;\n\t&[data-state='open'] {\n\t\tanimation: era-collapse-open var(--era-duration) var(--era-ease);\n\t}\n\t&[data-state='closed'] {\n\t\tanimation: era-collapse-close var(--era-duration) var(--era-ease);\n\t}\n}"
     },
     {
-      "name": "h-xs",
+      "name": "h-icon",
       "names": [
-        "h-xs",
-        "h-xxs",
-        "h-sm",
-        "h-md",
-        "h-lg"
+        "h-icon",
+        "h-pill",
+        "h-chip",
+        "h-control",
+        "h-bar"
       ],
       "file": "index.css",
-      "useCase": "the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).",
+      "useCase": "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-*).",
       "description": "",
-      "css": "@utility h-xs {\n\theight: var(--era-h-xs);\n}\n@utility h-xxs {\n\theight: var(--era-h-xxs);\n}\n@utility h-sm {\n\theight: var(--era-h-sm);\n}\n@utility h-md {\n\theight: var(--era-h-md);\n}\n@utility h-lg {\n\theight: var(--era-h-lg);\n}"
+      "css": "@utility h-icon {\n\theight: var(--era-h-icon);\n}\n@utility h-pill {\n\theight: var(--era-h-pill);\n}\n@utility h-chip {\n\theight: var(--era-h-chip);\n}\n@utility h-control {\n\theight: var(--era-h-control);\n}\n@utility h-bar {\n\theight: var(--era-h-bar);\n}"
     },
     {
-      "name": "min-h-xs",
+      "name": "min-h-icon",
       "names": [
-        "min-h-xs",
-        "min-h-xxs",
-        "min-h-sm",
-        "min-h-md",
-        "min-h-lg"
+        "min-h-icon",
+        "min-h-pill",
+        "min-h-chip",
+        "min-h-control",
+        "min-h-bar"
       ],
       "file": "index.css",
-      "useCase": "minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).",
+      "useCase": "minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar).",
       "description": "",
-      "css": "@utility min-h-xs {\n\tmin-height: var(--era-h-xs);\n}\n@utility min-h-xxs {\n\tmin-height: var(--era-h-xxs);\n}\n@utility min-h-sm {\n\tmin-height: var(--era-h-sm);\n}\n@utility min-h-md {\n\tmin-height: var(--era-h-md);\n}\n@utility min-h-lg {\n\tmin-height: var(--era-h-lg);\n}"
+      "css": "@utility min-h-icon {\n\tmin-height: var(--era-h-icon);\n}\n@utility min-h-pill {\n\tmin-height: var(--era-h-pill);\n}\n@utility min-h-chip {\n\tmin-height: var(--era-h-chip);\n}\n@utility min-h-control {\n\tmin-height: var(--era-h-control);\n}\n@utility min-h-bar {\n\tmin-height: var(--era-h-bar);\n}"
     },
     {
-      "name": "size-xs",
+      "name": "size-icon",
       "names": [
-        "size-xs",
-        "size-xxs",
-        "size-sm",
-        "size-md",
-        "size-lg"
+        "size-icon",
+        "size-pill",
+        "size-chip",
+        "size-control",
+        "size-bar"
       ],
       "file": "index.css",
-      "useCase": "a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.",
+      "useCase": "a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face.",
       "description": "",
-      "css": "@utility size-xs {\n\twidth: var(--era-h-xs);\n\theight: var(--era-h-xs);\n}\n@utility size-xxs {\n\twidth: var(--era-h-xxs);\n\theight: var(--era-h-xxs);\n}\n@utility size-sm {\n\twidth: var(--era-h-sm);\n\theight: var(--era-h-sm);\n}\n@utility size-md {\n\twidth: var(--era-h-md);\n\theight: var(--era-h-md);\n}\n@utility size-lg {\n\twidth: var(--era-h-lg);\n\theight: var(--era-h-lg);\n}"
-    },
-    {
-      "name": "px-sm",
-      "names": [
-        "px-sm",
-        "px-md",
-        "px-lg"
-      ],
-      "file": "index.css",
-      "useCase": "tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).",
-      "description": "",
-      "css": "@utility px-sm {\n\tpadding-inline: var(--era-px-sm);\n}\n@utility px-md {\n\tpadding-inline: var(--era-px-md);\n}\n@utility px-lg {\n\tpadding-inline: var(--era-px-lg);\n}"
+      "css": "@utility size-icon {\n\twidth: var(--era-h-icon);\n\theight: var(--era-h-icon);\n}\n@utility size-pill {\n\twidth: var(--era-h-pill);\n\theight: var(--era-h-pill);\n}\n@utility size-chip {\n\twidth: var(--era-h-chip);\n\theight: var(--era-h-chip);\n}\n@utility size-control {\n\twidth: var(--era-h-control);\n\theight: var(--era-h-control);\n}\n@utility size-bar {\n\twidth: var(--era-h-bar);\n\theight: var(--era-h-bar);\n}"
     },
     {
       "name": "gap-gutter",
@@ -1121,33 +1108,33 @@
       "css": "@utility gap-gutter {\n\tgap: var(--era-gap);\n}\n@utility p-gutter {\n\tpadding: var(--era-gap);\n}\n@utility px-gutter {\n\tpadding-inline: var(--era-gap);\n}\n@utility py-gutter {\n\tpadding-block: var(--era-gap);\n}"
     },
     {
-      "name": "p-inset-xxs",
+      "name": "p-inset-pill",
       "names": [
-        "p-inset-xxs",
-        "p-inset-sm",
-        "p-inset-md",
-        "px-inset-xxs",
-        "px-inset-sm",
-        "px-inset-md",
-        "py-inset-xxs",
-        "py-inset-sm",
-        "py-inset-md"
+        "p-inset-pill",
+        "p-inset-chip",
+        "p-inset-control",
+        "px-inset-pill",
+        "px-inset-chip",
+        "px-inset-control",
+        "py-inset-pill",
+        "py-inset-chip",
+        "py-inset-control"
       ],
       "file": "index.css",
-      "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.",
+      "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.",
       "description": "",
-      "css": "@utility p-inset-xxs {\n\tpadding: var(--era-inset-xxs);\n}\n@utility p-inset-sm {\n\tpadding: var(--era-inset-sm);\n}\n@utility p-inset-md {\n\tpadding: var(--era-inset-md);\n}\n@utility px-inset-xxs {\n\tpadding-inline: var(--era-inset-xxs);\n}\n@utility px-inset-sm {\n\tpadding-inline: var(--era-inset-sm);\n}\n@utility px-inset-md {\n\tpadding-inline: var(--era-inset-md);\n}\n@utility py-inset-xxs {\n\tpadding-block: var(--era-inset-xxs);\n}\n@utility py-inset-sm {\n\tpadding-block: var(--era-inset-sm);\n}\n@utility py-inset-md {\n\tpadding-block: var(--era-inset-md);\n}"
+      "css": "@utility p-inset-pill {\n\tpadding: var(--era-inset-pill);\n}\n@utility p-inset-chip {\n\tpadding: var(--era-inset-chip);\n}\n@utility p-inset-control {\n\tpadding: var(--era-inset-control);\n}\n@utility px-inset-pill {\n\tpadding-inline: var(--era-inset-pill);\n}\n@utility px-inset-chip {\n\tpadding-inline: var(--era-inset-chip);\n}\n@utility px-inset-control {\n\tpadding-inline: var(--era-inset-control);\n}\n@utility py-inset-pill {\n\tpadding-block: var(--era-inset-pill);\n}\n@utility py-inset-chip {\n\tpadding-block: var(--era-inset-chip);\n}\n@utility py-inset-control {\n\tpadding-block: var(--era-inset-control);\n}"
     },
     {
-      "name": "px-pill-xxs",
+      "name": "px-pill",
       "names": [
-        "px-pill-xxs",
-        "px-pill-sm"
+        "px-pill",
+        "px-chip"
       ],
       "file": "index.css",
       "useCase": "pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).",
       "description": "",
-      "css": "@utility px-pill-xxs {\n\tpadding-inline: var(--era-pill-xxs);\n}\n@utility px-pill-sm {\n\tpadding-inline: var(--era-pill-sm);\n}"
+      "css": "@utility px-pill {\n\tpadding-inline: var(--era-pill-px);\n}\n@utility px-chip {\n\tpadding-inline: var(--era-chip-px);\n}"
     },
     {
       "name": "px-field",
@@ -1155,7 +1142,7 @@
         "px-field"
       ],
       "file": "index.css",
-      "useCase": "text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).",
+      "useCase": "text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px).",
       "description": "",
       "css": "@utility px-field {\n\tpadding-inline: var(--era-field-px);\n}"
     },
@@ -1168,7 +1155,7 @@
       "file": "index.css",
       "useCase": "optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.",
       "description": "",
-      "css": "@utility p-panel {\n\tpadding: var(--era-pad-sm);\n}\n@utility p-card {\n\tpadding: var(--era-pad-md);\n}"
+      "css": "@utility p-panel {\n\tpadding: var(--era-pad-panel);\n}\n@utility p-card {\n\tpadding: var(--era-pad-card);\n}"
     },
     {
       "name": "p-content",
@@ -1176,8 +1163,8 @@
         "p-content"
       ],
       "file": "index.css",
-      "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: the heading's text sits in an h-lg bar, so there\nis (h-lg − text)/2 of empty bar under its glyphs before the panel even\nstarts. Padding the panel evenly on top of that spends the space twice — the\nheader ends up floating between the section above and the paragraph it\nintroduces rather than binding to it.\n\nSo the block-start pays only the REMAINDER. The target is the indent: the\nspace under a heading should measure the same as the space beside the text,\nwhich is --era-content-p. The header row already supplies (h-lg − text)/2 of\nit, so the panel adds what's left, and heading-to-paragraph reads equal to\nthe paragraph's own inset. Subtracting one --era-gap (the previous rule) left\nthe header's slack unaccounted for and the heading still detached.\n\nBoth terms are density-derived, so the equality holds at every mode; the\nmax() is the floor for a hypothetical mode where the row's slack would\nexceed the inset outright.",
-      "css": "@utility p-content {\n\tpadding: var(--era-content-p);\n\tpadding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));\n}"
+      "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: the heading's text sits in an h-bar bar, so there\nis (h-bar − text)/2 of empty bar under its glyphs before the panel even\nstarts. Padding the panel evenly on top of that spends the space twice — the\nheader ends up floating between the section above and the paragraph it\nintroduces rather than binding to it.\n\nSo the block-start pays only the REMAINDER. The target is the indent: the\nspace under a heading should measure the same as the space beside the text,\nwhich is --era-content-p. The header row already supplies (h-bar − text)/2 of\nit, so the panel adds what's left, and heading-to-paragraph reads equal to\nthe paragraph's own inset. Subtracting one --era-gap (the previous rule) left\nthe header's slack unaccounted for and the heading still detached.\n\nBoth terms are density-derived, so the equality holds at every mode; the\nmax() is the floor for a hypothetical mode where the row's slack would\nexceed the inset outright.",
+      "css": "@utility p-content {\n\tpadding: var(--era-content-p);\n\tpadding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));\n}"
     },
     {
       "name": "p-menu",
@@ -1185,7 +1172,7 @@
         "p-menu"
       ],
       "file": "index.css",
-      "useCase": "menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.",
+      "useCase": "menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows.",
       "description": "",
       "css": "@utility p-menu {\n\tpadding: var(--era-panel-inset);\n}"
     },

package/dist/generated-docs/utilities.json

@@ -92,58 +92,46 @@
       "css": "@utility era-collapse {\n\toverflow: hidden;\n\t&[data-state='open'] {\n\t\tanimation: era-collapse-open var(--era-duration) var(--era-ease);\n\t}\n\t&[data-state='closed'] {\n\t\tanimation: era-collapse-close var(--era-duration) var(--era-ease);\n\t}\n}"
     },
     {
-      "name": "h-xs",
+      "name": "h-icon",
       "names": [
-        "h-xs",
-        "h-xxs",
-        "h-sm",
-        "h-md",
-        "h-lg"
+        "h-icon",
+        "h-pill",
+        "h-chip",
+        "h-control",
+        "h-bar"
       ],
       "file": "index.css",
-      "useCase": "the tier-height ladder — h-xs (icon) · h-xxs (nested pill) · h-sm (standalone pill) · h-md (control) · h-lg (bar); the named form of h-(--era-h-*).",
+      "useCase": "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-*).",
       "description": "",
-      "css": "@utility h-xs {\n\theight: var(--era-h-xs);\n}\n@utility h-xxs {\n\theight: var(--era-h-xxs);\n}\n@utility h-sm {\n\theight: var(--era-h-sm);\n}\n@utility h-md {\n\theight: var(--era-h-md);\n}\n@utility h-lg {\n\theight: var(--era-h-lg);\n}"
+      "css": "@utility h-icon {\n\theight: var(--era-h-icon);\n}\n@utility h-pill {\n\theight: var(--era-h-pill);\n}\n@utility h-chip {\n\theight: var(--era-h-chip);\n}\n@utility h-control {\n\theight: var(--era-h-control);\n}\n@utility h-bar {\n\theight: var(--era-h-bar);\n}"
     },
     {
-      "name": "min-h-xs",
+      "name": "min-h-icon",
       "names": [
-        "min-h-xs",
-        "min-h-xxs",
-        "min-h-sm",
-        "min-h-md",
-        "min-h-lg"
+        "min-h-icon",
+        "min-h-pill",
+        "min-h-chip",
+        "min-h-control",
+        "min-h-bar"
       ],
       "file": "index.css",
-      "useCase": "minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).",
+      "useCase": "minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-bar).",
       "description": "",
-      "css": "@utility min-h-xs {\n\tmin-height: var(--era-h-xs);\n}\n@utility min-h-xxs {\n\tmin-height: var(--era-h-xxs);\n}\n@utility min-h-sm {\n\tmin-height: var(--era-h-sm);\n}\n@utility min-h-md {\n\tmin-height: var(--era-h-md);\n}\n@utility min-h-lg {\n\tmin-height: var(--era-h-lg);\n}"
+      "css": "@utility min-h-icon {\n\tmin-height: var(--era-h-icon);\n}\n@utility min-h-pill {\n\tmin-height: var(--era-h-pill);\n}\n@utility min-h-chip {\n\tmin-height: var(--era-h-chip);\n}\n@utility min-h-control {\n\tmin-height: var(--era-h-control);\n}\n@utility min-h-bar {\n\tmin-height: var(--era-h-bar);\n}"
     },
     {
-      "name": "size-xs",
+      "name": "size-icon",
       "names": [
-        "size-xs",
-        "size-xxs",
-        "size-sm",
-        "size-md",
-        "size-lg"
+        "size-icon",
+        "size-pill",
+        "size-chip",
+        "size-control",
+        "size-bar"
       ],
       "file": "index.css",
-      "useCase": "a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.",
+      "useCase": "a tier-sized square — size-icon is THE icon size (a Lucide glyph beside body text), size-control a square control face.",
       "description": "",
-      "css": "@utility size-xs {\n\twidth: var(--era-h-xs);\n\theight: var(--era-h-xs);\n}\n@utility size-xxs {\n\twidth: var(--era-h-xxs);\n\theight: var(--era-h-xxs);\n}\n@utility size-sm {\n\twidth: var(--era-h-sm);\n\theight: var(--era-h-sm);\n}\n@utility size-md {\n\twidth: var(--era-h-md);\n\theight: var(--era-h-md);\n}\n@utility size-lg {\n\twidth: var(--era-h-lg);\n\theight: var(--era-h-lg);\n}"
-    },
-    {
-      "name": "px-sm",
-      "names": [
-        "px-sm",
-        "px-md",
-        "px-lg"
-      ],
-      "file": "index.css",
-      "useCase": "tier-to-tier nesting padding (sp/2) — the horizontal padding of a bar or row that holds tiered controls; the named form of px-(--era-px-*).",
-      "description": "",
-      "css": "@utility px-sm {\n\tpadding-inline: var(--era-px-sm);\n}\n@utility px-md {\n\tpadding-inline: var(--era-px-md);\n}\n@utility px-lg {\n\tpadding-inline: var(--era-px-lg);\n}"
+      "css": "@utility size-icon {\n\twidth: var(--era-h-icon);\n\theight: var(--era-h-icon);\n}\n@utility size-pill {\n\twidth: var(--era-h-pill);\n\theight: var(--era-h-pill);\n}\n@utility size-chip {\n\twidth: var(--era-h-chip);\n\theight: var(--era-h-chip);\n}\n@utility size-control {\n\twidth: var(--era-h-control);\n\theight: var(--era-h-control);\n}\n@utility size-bar {\n\twidth: var(--era-h-bar);\n\theight: var(--era-h-bar);\n}"
     },
     {
       "name": "gap-gutter",
@@ -159,33 +147,33 @@
       "css": "@utility gap-gutter {\n\tgap: var(--era-gap);\n}\n@utility p-gutter {\n\tpadding: var(--era-gap);\n}\n@utility px-gutter {\n\tpadding-inline: var(--era-gap);\n}\n@utility py-gutter {\n\tpadding-block: var(--era-gap);\n}"
     },
     {
-      "name": "p-inset-xxs",
+      "name": "p-inset-pill",
       "names": [
-        "p-inset-xxs",
-        "p-inset-sm",
-        "p-inset-md",
-        "px-inset-xxs",
-        "px-inset-sm",
-        "px-inset-md",
-        "py-inset-xxs",
-        "py-inset-sm",
-        "py-inset-md"
+        "p-inset-pill",
+        "p-inset-chip",
+        "p-inset-control",
+        "px-inset-pill",
+        "px-inset-chip",
+        "px-inset-control",
+        "py-inset-pill",
+        "py-inset-chip",
+        "py-inset-control"
       ],
       "file": "index.css",
-      "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-md is a text button's side padding, p-inset-md a code block's.",
+      "useCase": "text-symmetric content padding — (tier − text)/2, the inset that vertically centers body text in its tier; px-inset-control is a text button's side padding, p-inset-control a code block's.",
       "description": "",
-      "css": "@utility p-inset-xxs {\n\tpadding: var(--era-inset-xxs);\n}\n@utility p-inset-sm {\n\tpadding: var(--era-inset-sm);\n}\n@utility p-inset-md {\n\tpadding: var(--era-inset-md);\n}\n@utility px-inset-xxs {\n\tpadding-inline: var(--era-inset-xxs);\n}\n@utility px-inset-sm {\n\tpadding-inline: var(--era-inset-sm);\n}\n@utility px-inset-md {\n\tpadding-inline: var(--era-inset-md);\n}\n@utility py-inset-xxs {\n\tpadding-block: var(--era-inset-xxs);\n}\n@utility py-inset-sm {\n\tpadding-block: var(--era-inset-sm);\n}\n@utility py-inset-md {\n\tpadding-block: var(--era-inset-md);\n}"
+      "css": "@utility p-inset-pill {\n\tpadding: var(--era-inset-pill);\n}\n@utility p-inset-chip {\n\tpadding: var(--era-inset-chip);\n}\n@utility p-inset-control {\n\tpadding: var(--era-inset-control);\n}\n@utility px-inset-pill {\n\tpadding-inline: var(--era-inset-pill);\n}\n@utility px-inset-chip {\n\tpadding-inline: var(--era-inset-chip);\n}\n@utility px-inset-control {\n\tpadding-inline: var(--era-inset-control);\n}\n@utility py-inset-pill {\n\tpadding-block: var(--era-inset-pill);\n}\n@utility py-inset-chip {\n\tpadding-block: var(--era-inset-chip);\n}\n@utility py-inset-control {\n\tpadding-block: var(--era-inset-control);\n}"
     },
     {
-      "name": "px-pill-xxs",
+      "name": "px-pill",
       "names": [
-        "px-pill-xxs",
-        "px-pill-sm"
+        "px-pill",
+        "px-chip"
       ],
       "file": "index.css",
       "useCase": "pill side padding — the wider-than-vertical horizontal breathing room badge/chip text wants (glyph-advance derived, ~2× the vertical inset).",
       "description": "",
-      "css": "@utility px-pill-xxs {\n\tpadding-inline: var(--era-pill-xxs);\n}\n@utility px-pill-sm {\n\tpadding-inline: var(--era-pill-sm);\n}"
+      "css": "@utility px-pill {\n\tpadding-inline: var(--era-pill-px);\n}\n@utility px-chip {\n\tpadding-inline: var(--era-chip-px);\n}"
     },
     {
       "name": "px-field",
@@ -193,7 +181,7 @@
         "px-field"
       ],
       "file": "index.css",
-      "useCase": "text-field side padding — where typed text starts in an md-tier input; the named form of px-(--era-field-px).",
+      "useCase": "text-field side padding — where typed text starts in a control-tier input; the named form of px-(--era-field-px).",
       "description": "",
       "css": "@utility px-field {\n\tpadding-inline: var(--era-field-px);\n}"
     },
@@ -206,7 +194,7 @@
       "file": "index.css",
       "useCase": "optical padding for unbounded containers — p-panel for compact shells and menu-adjacent chrome, p-card for cards/dialogs/popovers, p-content for full content panels. Grows super-linearly with density so whitespace holds its perceived share as controls loosen.",
       "description": "",
-      "css": "@utility p-panel {\n\tpadding: var(--era-pad-sm);\n}\n@utility p-card {\n\tpadding: var(--era-pad-md);\n}"
+      "css": "@utility p-panel {\n\tpadding: var(--era-pad-panel);\n}\n@utility p-card {\n\tpadding: var(--era-pad-card);\n}"
     },
     {
       "name": "p-content",
@@ -214,8 +202,8 @@
         "p-content"
       ],
       "file": "index.css",
-      "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: the heading's text sits in an h-lg bar, so there\nis (h-lg − text)/2 of empty bar under its glyphs before the panel even\nstarts. Padding the panel evenly on top of that spends the space twice — the\nheader ends up floating between the section above and the paragraph it\nintroduces rather than binding to it.\n\nSo the block-start pays only the REMAINDER. The target is the indent: the\nspace under a heading should measure the same as the space beside the text,\nwhich is --era-content-p. The header row already supplies (h-lg − text)/2 of\nit, so the panel adds what's left, and heading-to-paragraph reads equal to\nthe paragraph's own inset. Subtracting one --era-gap (the previous rule) left\nthe header's slack unaccounted for and the heading still detached.\n\nBoth terms are density-derived, so the equality holds at every mode; the\nmax() is the floor for a hypothetical mode where the row's slack would\nexceed the inset outright.",
-      "css": "@utility p-content {\n\tpadding: var(--era-content-p);\n\tpadding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));\n}"
+      "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: the heading's text sits in an h-bar bar, so there\nis (h-bar − text)/2 of empty bar under its glyphs before the panel even\nstarts. Padding the panel evenly on top of that spends the space twice — the\nheader ends up floating between the section above and the paragraph it\nintroduces rather than binding to it.\n\nSo the block-start pays only the REMAINDER. The target is the indent: the\nspace under a heading should measure the same as the space beside the text,\nwhich is --era-content-p. The header row already supplies (h-bar − text)/2 of\nit, so the panel adds what's left, and heading-to-paragraph reads equal to\nthe paragraph's own inset. Subtracting one --era-gap (the previous rule) left\nthe header's slack unaccounted for and the heading still detached.\n\nBoth terms are density-derived, so the equality holds at every mode; the\nmax() is the floor for a hypothetical mode where the row's slack would\nexceed the inset outright.",
+      "css": "@utility p-content {\n\tpadding: var(--era-content-p);\n\tpadding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-bar) - var(--era-text)) / 2));\n}"
     },
     {
       "name": "p-menu",
@@ -223,7 +211,7 @@
         "p-menu"
       ],
       "file": "index.css",
-      "useCase": "menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-item on the rows.",
+      "useCase": "menu-panel padding — the surface-owned inset (0 on flat, 2px on glass/bevel) that keeps row highlights inside a floating panel's frame; pairs with rounded-menu-item on the rows.",
       "description": "",
       "css": "@utility p-menu {\n\tpadding: var(--era-panel-inset);\n}"
     },