@signal9/era-ui 4.6.0 → 4.7.0

package/dist/generated-docs/llms-full.txt

@@ -40,6 +40,7 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `truncate` — single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.
 - `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.
 - `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-xs · h-xxs · h-sm · h-md · h-lg` — 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-*).
 - `min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg` — minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
 - `size-xs · size-xxs · size-sm · size-md · size-lg` — a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.
@@ -147,6 +148,7 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `truncate` | single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders. |
 | `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text. |
 | `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-xs` `h-xxs` `h-sm` `h-md` `h-lg` | 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-*). |
 | `min-h-xs` `min-h-xxs` `min-h-sm` `min-h-md` `min-h-lg` | minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg). |
 | `size-xs` `size-xxs` `size-sm` `size-md` `size-lg` | a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face. |
@@ -354,6 +356,39 @@ Declared in `index.css`.
 }
 ```
 
+## era-collapse
+
+**Use it for:** the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
+
+The open/close animation for a bits-ui Collapsible.Content — the height
+sweep every disclosure in the library uses (a Step's body, an error panel's
+detail, a swarm node's children).
+
+It has to be a keyframe animation rather than a transition because the
+natural height is only knowable at open time: bits measures the content and
+publishes `--bits-collapsible-content-height`, which the `to` frame reads.
+The class also owns `overflow: hidden` — animating height without it just
+spills the content out of the shrinking box.
+
+Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
+`extra` stretches it, for free. Three components had a byte-identical copy of
+these keyframes under three different names before this existed; the panel
+that needs different motion should override `animation`, not re-declare it.
+
+Declared in `index.css`.
+
+```css
+@utility era-collapse {
+	overflow: hidden;
+	&[data-state='open'] {
+		animation: era-collapse-open var(--era-duration) var(--era-ease);
+	}
+	&[data-state='closed'] {
+		animation: era-collapse-close var(--era-duration) var(--era-ease);
+	}
+}
+```
+
 ## h-xs · h-xxs · h-sm · h-md · h-lg
 
 **Use it for:** 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-*).
@@ -551,22 +586,29 @@ Declared in `index.css`.
 ## p-content
 
 A content panel always follows a section header ROW, and that row already
-contributes its own slack: an h-lg bar holding one line of 16px text leaves
-~5px between the glyphs and the bottom of the bar. Padding the panel evenly
-on top of that spends the gap twice — measured 22px under a heading against
-20px above it, so the header floated between the section above and the
-paragraph it introduces rather than binding to it.
-
-The block-start is therefore one gap unit shorter, which is what makes a
-heading read as belonging to the text beneath it. Scales with density like
-everything else, since both terms do.
+contributes its own slack: the heading's text sits in an h-lg bar, so there
+is (h-lg − text)/2 of empty bar under its glyphs before the panel even
+starts. Padding the panel evenly on top of that spends the space twice — the
+header ends up floating between the section above and the paragraph it
+introduces rather than binding to it.
+
+So the block-start pays only the REMAINDER. The target is the indent: the
+space under a heading should measure the same as the space beside the text,
+which is --era-content-p. The header row already supplies (h-lg − text)/2 of
+it, so the panel adds what's left, and heading-to-paragraph reads equal to
+the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
+the header's slack unaccounted for and the heading still detached.
+
+Both terms are density-derived, so the equality holds at every mode; the
+max() is the floor for a hypothetical mode where the row's slack would
+exceed the inset outright.
 
 Declared in `index.css`.
 
 ```css
 @utility p-content {
 	padding: var(--era-content-p);
-	padding-top: calc(var(--era-content-p) - var(--era-gap));
+	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));
 }
 ```
 
@@ -642,7 +684,7 @@ Release history — every version, grouped by change type.
 
 # LLM Shell
 
-A full chat console — conversation rail, streaming, tools, approvals.
+A full chat console — conversation rail, streaming, tools, swarms.
 
 <!-- end: llm-shell -->
 

package/dist/generated-docs/llms.txt

@@ -44,6 +44,7 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `truncate` — single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders.
 - `era-text-trim-caps` — the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text.
 - `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-xs · h-xxs · h-sm · h-md · h-lg` — 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-*).
 - `min-h-xs · min-h-xxs · min-h-sm · min-h-md · min-h-lg` — minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg).
 - `size-xs · size-xxs · size-sm · size-md · size-lg` — a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face.

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": 4810,
+      "tokenEstimate": 5277,
       "sections": [
         "Overview",
         "era-interactive",
@@ -54,6 +54,7 @@
         "truncate",
         "era-text-trim-caps",
         "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",
@@ -97,8 +98,8 @@
     {
       "slug": "llm-shell",
       "title": "LLM Shell",
-      "summary": "A full chat console — conversation rail, streaming, tools, approvals.",
-      "tokenEstimate": 21,
+      "summary": "A full chat console — conversation rail, streaming, tools, swarms.",
+      "tokenEstimate": 20,
       "sections": [],
       "file": "llm-shell.md"
     },
@@ -1029,6 +1030,16 @@
       "description": "In-progress text shimmer — a bright sweep through muted text (the standard\n\"working…\" label treatment in streaming UIs). Timing derives from the motion\naxis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the\nduration is 0s and the sweep freezes on its base frame — plain muted text —\nso reduced-motion and data-motion=\"instant\" both kill it for free.",
       "css": "@utility era-shimmer {\n\tbackground: linear-gradient(\n\t\t110deg,\n\t\tvar(--color-muted) 0% 43%,\n\t\tvar(--color-bright) 50%,\n\t\tvar(--color-muted) 57% 100%\n\t);\n\tbackground-size: 200% 100%;\n\tbackground-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tanimation: era-shimmer calc(var(--era-duration) * 10) cubic-bezier(0.7, 0, 1, 0.4) infinite;\n}"
     },
+    {
+      "name": "era-collapse",
+      "names": [
+        "era-collapse"
+      ],
+      "file": "index.css",
+      "useCase": "the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).",
+      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Three components had a byte-identical copy of\nthese keyframes under three different names before this existed; the panel\nthat needs different motion should override `animation`, not re-declare it.",
+      "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",
       "names": [
@@ -1152,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: an h-lg bar holding one line of 16px text leaves\n~5px between the glyphs and the bottom of the bar. Padding the panel evenly\non top of that spends the gap twice — measured 22px under a heading against\n20px above it, so the header floated between the section above and the\nparagraph it introduces rather than binding to it.\n\nThe block-start is therefore one gap unit shorter, which is what makes a\nheading read as belonging to the text beneath it. Scales with density like\neverything else, since both terms do.",
-      "css": "@utility p-content {\n\tpadding: var(--era-content-p);\n\tpadding-top: calc(var(--era-content-p) - var(--era-gap));\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-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}"
     },
     {
       "name": "p-menu",

package/dist/generated-docs/utilities.json

@@ -70,6 +70,16 @@
       "description": "In-progress text shimmer — a bright sweep through muted text (the standard\n\"working…\" label treatment in streaming UIs). Timing derives from the motion\naxis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the\nduration is 0s and the sweep freezes on its base frame — plain muted text —\nso reduced-motion and data-motion=\"instant\" both kill it for free.",
       "css": "@utility era-shimmer {\n\tbackground: linear-gradient(\n\t\t110deg,\n\t\tvar(--color-muted) 0% 43%,\n\t\tvar(--color-bright) 50%,\n\t\tvar(--color-muted) 57% 100%\n\t);\n\tbackground-size: 200% 100%;\n\tbackground-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tanimation: era-shimmer calc(var(--era-duration) * 10) cubic-bezier(0.7, 0, 1, 0.4) infinite;\n}"
     },
+    {
+      "name": "era-collapse",
+      "names": [
+        "era-collapse"
+      ],
+      "file": "index.css",
+      "useCase": "the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).",
+      "description": "The open/close animation for a bits-ui Collapsible.Content — the height\nsweep every disclosure in the library uses (a Step's body, an error panel's\ndetail, a swarm node's children).\n\nIt has to be a keyframe animation rather than a transition because the\nnatural height is only knowable at open time: bits measures the content and\npublishes `--bits-collapsible-content-height`, which the `to` frame reads.\nThe class also owns `overflow: hidden` — animating height without it just\nspills the content out of the shrinking box.\n\nTiming rides the motion axis, so `instant` collapses it to a cut (0s) and\n`extra` stretches it, for free. Three components had a byte-identical copy of\nthese keyframes under three different names before this existed; the panel\nthat needs different motion should override `animation`, not re-declare it.",
+      "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",
       "names": [
@@ -193,8 +203,8 @@
         "p-content"
       ],
       "file": "index.css",
-      "description": "A content panel always follows a section header ROW, and that row already\ncontributes its own slack: an h-lg bar holding one line of 16px text leaves\n~5px between the glyphs and the bottom of the bar. Padding the panel evenly\non top of that spends the gap twice — measured 22px under a heading against\n20px above it, so the header floated between the section above and the\nparagraph it introduces rather than binding to it.\n\nThe block-start is therefore one gap unit shorter, which is what makes a\nheading read as belonging to the text beneath it. Scales with density like\neverything else, since both terms do.",
-      "css": "@utility p-content {\n\tpadding: var(--era-content-p);\n\tpadding-top: calc(var(--era-content-p) - var(--era-gap));\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-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}"
     },
     {
       "name": "p-menu",

package/dist/generated-docs/utilities.md

@@ -45,6 +45,7 @@ enough to stay var-form — `min-w-(--era-h-md)` etc. remain the escape hatch.
 | `truncate` | single-line horizontal truncation with an ellipsis — safe inside a trimmed or leading-none row; it will not clip ascenders or descenders. |
 | `era-text-trim-caps` | the era-text-trim variant for ALL-CAPS single-line strings (kbd hints, acronym badges) — never use it for mixed-case text. |
 | `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-xs` `h-xxs` `h-sm` `h-md` `h-lg` | 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-*). |
 | `min-h-xs` `min-h-xxs` `min-h-sm` `min-h-md` `min-h-lg` | minimum tier height for containers that may grow — a bar that is at least lg-tier but can wrap (min-h-lg). |
 | `size-xs` `size-xxs` `size-sm` `size-md` `size-lg` | a tier-sized square — size-xs is THE icon size (a Lucide glyph beside body text), size-md a square control face. |
@@ -252,6 +253,39 @@ Declared in `index.css`.
 }
 ```
 
+## era-collapse
+
+**Use it for:** the height sweep for a bits-ui Collapsible.Content — put it on the Content element itself (it carries its own overflow: hidden).
+
+The open/close animation for a bits-ui Collapsible.Content — the height
+sweep every disclosure in the library uses (a Step's body, an error panel's
+detail, a swarm node's children).
+
+It has to be a keyframe animation rather than a transition because the
+natural height is only knowable at open time: bits measures the content and
+publishes `--bits-collapsible-content-height`, which the `to` frame reads.
+The class also owns `overflow: hidden` — animating height without it just
+spills the content out of the shrinking box.
+
+Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
+`extra` stretches it, for free. Three components had a byte-identical copy of
+these keyframes under three different names before this existed; the panel
+that needs different motion should override `animation`, not re-declare it.
+
+Declared in `index.css`.
+
+```css
+@utility era-collapse {
+	overflow: hidden;
+	&[data-state='open'] {
+		animation: era-collapse-open var(--era-duration) var(--era-ease);
+	}
+	&[data-state='closed'] {
+		animation: era-collapse-close var(--era-duration) var(--era-ease);
+	}
+}
+```
+
 ## h-xs · h-xxs · h-sm · h-md · h-lg
 
 **Use it for:** 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-*).
@@ -449,22 +483,29 @@ Declared in `index.css`.
 ## p-content
 
 A content panel always follows a section header ROW, and that row already
-contributes its own slack: an h-lg bar holding one line of 16px text leaves
-~5px between the glyphs and the bottom of the bar. Padding the panel evenly
-on top of that spends the gap twice — measured 22px under a heading against
-20px above it, so the header floated between the section above and the
-paragraph it introduces rather than binding to it.
-
-The block-start is therefore one gap unit shorter, which is what makes a
-heading read as belonging to the text beneath it. Scales with density like
-everything else, since both terms do.
+contributes its own slack: the heading's text sits in an h-lg bar, so there
+is (h-lg − text)/2 of empty bar under its glyphs before the panel even
+starts. Padding the panel evenly on top of that spends the space twice — the
+header ends up floating between the section above and the paragraph it
+introduces rather than binding to it.
+
+So the block-start pays only the REMAINDER. The target is the indent: the
+space under a heading should measure the same as the space beside the text,
+which is --era-content-p. The header row already supplies (h-lg − text)/2 of
+it, so the panel adds what's left, and heading-to-paragraph reads equal to
+the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
+the header's slack unaccounted for and the heading still detached.
+
+Both terms are density-derived, so the equality holds at every mode; the
+max() is the floor for a hypothetical mode where the row's slack would
+exceed the inset outright.
 
 Declared in `index.css`.
 
 ```css
 @utility p-content {
 	padding: var(--era-content-p);
-	padding-top: calc(var(--era-content-p) - var(--era-gap));
+	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));
 }
 ```
 

package/dist/styles/index.css

@@ -223,6 +223,53 @@
 	}
 }
 
+/* The open/close animation for a bits-ui Collapsible.Content — the height
+ * sweep every disclosure in the library uses (a Step's body, an error panel's
+ * detail, a swarm node's children).
+ *
+ * It has to be a keyframe animation rather than a transition because the
+ * natural height is only knowable at open time: bits measures the content and
+ * publishes `--bits-collapsible-content-height`, which the `to` frame reads.
+ * The class also owns `overflow: hidden` — animating height without it just
+ * spills the content out of the shrinking box.
+ *
+ * Timing rides the motion axis, so `instant` collapses it to a cut (0s) and
+ * `extra` stretches it, for free. Three components had a byte-identical copy of
+ * these keyframes under three different names before this existed; the panel
+ * that needs different motion should override `animation`, not re-declare it.
+ *
+ * @use the height sweep for a bits-ui Collapsible.Content — put it on the
+ * Content element itself (it carries its own overflow: hidden). */
+@utility era-collapse {
+	overflow: hidden;
+	&[data-state='open'] {
+		animation: era-collapse-open var(--era-duration) var(--era-ease);
+	}
+	&[data-state='closed'] {
+		animation: era-collapse-close var(--era-duration) var(--era-ease);
+	}
+}
+@keyframes era-collapse-open {
+	from {
+		height: 0;
+		opacity: 0;
+	}
+	to {
+		height: var(--bits-collapsible-content-height);
+		opacity: 1;
+	}
+}
+@keyframes era-collapse-close {
+	from {
+		height: var(--bits-collapsible-content-height);
+		opacity: 1;
+	}
+	to {
+		height: 0;
+		opacity: 0;
+	}
+}
+
 /* ------------------------------------------------------------------ */
 /* THE PUBLIC CLASS API                                               */
 /*                                                                    */
@@ -478,18 +525,25 @@
 	padding: var(--era-pad-md);
 }
 /* A content panel always follows a section header ROW, and that row already
- * contributes its own slack: an h-lg bar holding one line of 16px text leaves
- * ~5px between the glyphs and the bottom of the bar. Padding the panel evenly
- * on top of that spends the gap twice — measured 22px under a heading against
- * 20px above it, so the header floated between the section above and the
- * paragraph it introduces rather than binding to it.
+ * contributes its own slack: the heading's text sits in an h-lg bar, so there
+ * is (h-lg − text)/2 of empty bar under its glyphs before the panel even
+ * starts. Padding the panel evenly on top of that spends the space twice — the
+ * header ends up floating between the section above and the paragraph it
+ * introduces rather than binding to it.
+ *
+ * So the block-start pays only the REMAINDER. The target is the indent: the
+ * space under a heading should measure the same as the space beside the text,
+ * which is --era-content-p. The header row already supplies (h-lg − text)/2 of
+ * it, so the panel adds what's left, and heading-to-paragraph reads equal to
+ * the paragraph's own inset. Subtracting one --era-gap (the previous rule) left
+ * the header's slack unaccounted for and the heading still detached.
  *
- * The block-start is therefore one gap unit shorter, which is what makes a
- * heading read as belonging to the text beneath it. Scales with density like
- * everything else, since both terms do. */
+ * Both terms are density-derived, so the equality holds at every mode; the
+ * max() is the floor for a hypothetical mode where the row's slack would
+ * exceed the inset outright. */
 @utility p-content {
 	padding: var(--era-content-p);
-	padding-top: calc(var(--era-content-p) - var(--era-gap));
+	padding-top: max(0px, calc(var(--era-content-p) - (var(--era-h-lg) - var(--era-text)) / 2));
 }
 
 /* @use menu-panel padding — the surface-owned inset (0 on flat, 2px on

package/dist/styles/themes.css

@@ -496,9 +496,21 @@
 /* counterpart on the page and are harmonised, not      */
 /* sampled.                                             */
 /*                                                      */
-/* Border contrast is 2.11:1 against the page — below   */
-/* the 2.49–4.05 the other light themes sit at, but     */
-/* that IS Yahoo's rule colour, specified exactly.      */
+/* The blues are then all taken one small step DARKER   */
+/* than the sample — L-0.02 on the chrome steps, -0.04  */
+/* on the ink ones (7, 10, primary), with chroma nudged */
+/* up to hold the hue's saturation at the lower         */
+/* lightness. Yahoo's palette is tuned for its own type */
+/* at its own size; against era's text it read washed   */
+/* out. Every step keeps its measured hue and its place */
+/* in the ramp, so the theme still reads as the sampled */
+/* one — it just carries more ink.                      */
+/*                                                      */
+/* What that buys: muted text 3.50 -> 4.08:1 (body copy */
+/* now clears AA at large sizes), link 10.17 -> 11.40,  */
+/* primary 4.22 -> 4.79, border 2.10 -> 2.27 against    */
+/* the page — still under the 2.49-4.05 the other light */
+/* themes sit at, because it is still Yahoo's rule.     */
 /* -------------------------------------------------- */
 @media (prefers-color-scheme: light) {
 	:root[data-theme='signalnine']:not(.dark) {
@@ -508,12 +520,12 @@
 		--color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe  card fill */
 		--color-3: oklch(0.887 0.0368 265.13); /* #cedaf3  border */
 		--color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
-		--color-5: oklch(0.7667 0.0612 261.83); /* #9eb4db  the measured dominant rule */
-		--color-6: oklch(0.7 0.074 263);
-		--color-7: oklch(0.631 0.0915 260.33); /* #698ac1  muted text */
-		--color-8: oklch(0.57 0.12 262);
+		--color-5: oklch(0.745 0.0645 261.83); /* #96add6  the measured rule, darkened */
+		--color-6: oklch(0.676 0.078 263);
+		--color-7: oklch(0.593 0.0975 260.33); /* #5c7eb8  muted text, darkened */
+		--color-8: oklch(0.545 0.126 262);
 		--color-9: oklch(0.51 0 0); /* #666666 */
-		--color-10: oklch(0.3855 0.1534 266.07); /* #1d3994  link text */
+		--color-10: oklch(0.358 0.1534 266.07); /* #17318b  link text, darkened */
 		--color-11: oklch(0.16 0.008 266);
 		--color-12: oklch(0 0 0); /* #000000  body text */
 
@@ -532,7 +544,7 @@
 		/* Cards read --era-surface-bg, which the surface contract defines as
 		 * --color-2 — so the card fill follows from the scale, no override. */
 
-		--color-primary: oklch(0.596 0.22 265.8); /* #4070ff */
+		--color-primary: oklch(0.566 0.222 265.8); /* #3766f6  the CTA blue, darkened */
 		--color-primary-fg: oklch(1 0 0);
 		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 		--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
@@ -551,12 +563,12 @@
 	--color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe  card fill */
 	--color-3: oklch(0.887 0.0368 265.13); /* #cedaf3  border */
 	--color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
-	--color-5: oklch(0.7667 0.0612 261.83); /* #9eb4db  the measured dominant rule */
-	--color-6: oklch(0.7 0.074 263);
-	--color-7: oklch(0.631 0.0915 260.33); /* #698ac1  muted text */
-	--color-8: oklch(0.57 0.12 262);
+	--color-5: oklch(0.745 0.0645 261.83); /* #96add6  the measured rule, darkened */
+	--color-6: oklch(0.676 0.078 263);
+	--color-7: oklch(0.593 0.0975 260.33); /* #5c7eb8  muted text, darkened */
+	--color-8: oklch(0.545 0.126 262);
 	--color-9: oklch(0.51 0 0); /* #666666 */
-	--color-10: oklch(0.3855 0.1534 266.07); /* #1d3994  link text */
+	--color-10: oklch(0.358 0.1534 266.07); /* #17318b  link text, darkened */
 	--color-11: oklch(0.16 0.008 266);
 	--color-12: oklch(0 0 0); /* #000000  body text */
 
@@ -575,7 +587,7 @@
 	/* Cards read --era-surface-bg, which the surface contract defines as
 	 * --color-2 — so the card fill follows from the scale, no override. */
 
-	--color-primary: oklch(0.596 0.22 265.8); /* #4070ff */
+	--color-primary: oklch(0.566 0.222 265.8); /* #3766f6  the CTA blue, darkened */
 	--color-primary-fg: oklch(1 0 0);
 	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 	--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */

package/dist/ui/step/step-content.svelte

@@ -10,11 +10,11 @@
 	}: PartProps<Collapsible.ContentProps> = $props();
 </script>
 
-<!-- Height animates on the outer (padding-free) element via bits' measured
-     content-height var — padding lives on the inner well so the animation
-     never fights box metrics. The well is recessed (shadow-well): payload the
-     step produced, not raised chrome. -->
-<Collapsible.Content bind:ref data-era-step-content class="overflow-hidden" {...restProps}>
+<!-- Height animates on the outer (padding-free) element via era-collapse, which
+     reads bits' measured content-height var — padding lives on the inner well
+     so the animation never fights box metrics. The well is recessed
+     (shadow-well): payload the step produced, not raised chrome. -->
+<Collapsible.Content bind:ref class="era-collapse" {...restProps}>
 	<div
 		class={cn(
 			'mt-(--era-gap) mb-(--era-gap) flex min-w-0 flex-col gap-(--era-pad-sm) rounded-(--era-rd-md) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow-well)',
@@ -24,32 +24,3 @@
 		{@render children?.()}
 	</div>
 </Collapsible.Content>
-
-<style>
-	:global([data-era-step-content][data-state='open']) {
-		animation: era-step-expand var(--era-duration) var(--era-ease);
-	}
-	:global([data-era-step-content][data-state='closed']) {
-		animation: era-step-collapse var(--era-duration) var(--era-ease);
-	}
-	@keyframes -global-era-step-expand {
-		from {
-			height: 0;
-			opacity: 0;
-		}
-		to {
-			height: var(--bits-collapsible-content-height);
-			opacity: 1;
-		}
-	}
-	@keyframes -global-era-step-collapse {
-		from {
-			height: var(--bits-collapsible-content-height);
-			opacity: 1;
-		}
-		to {
-			height: 0;
-			opacity: 0;
-		}
-	}
-</style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.6.0",
+	"version": "4.7.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",