@cyberskill/design 2.2.0 → 2.3.0

package/_ds_manifest.json

@@ -3195,7 +3195,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 112,
-      "sourceLine": 71
+      "sourceLine": 70
     },
     {
       "name": "--cs-heading-weight-strong",
@@ -3204,7 +3204,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 113,
-      "sourceLine": 72
+      "sourceLine": 71
     },
     {
       "name": "--cs-heading-weight",
@@ -3213,7 +3213,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 114,
-      "sourceLine": 73
+      "sourceLine": 72
     },
     {
       "name": "--cs-heading-tracking",
@@ -3222,7 +3222,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 115,
-      "sourceLine": 74
+      "sourceLine": 73
     },
     {
       "name": "--cs-icon-sm",
@@ -3231,7 +3231,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 116,
-      "sourceLine": 77
+      "sourceLine": 76
     },
     {
       "name": "--cs-icon-md",
@@ -3240,7 +3240,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 117,
-      "sourceLine": 78
+      "sourceLine": 77
     },
     {
       "name": "--cs-icon-lg",
@@ -3249,7 +3249,7 @@
       "definedIn": "tokens/typography.css",
       "important": false,
       "declarationOrder": 118,
-      "sourceLine": 79
+      "sourceLine": 78
     },
     {
       "name": "--cs-space-0",
@@ -5750,7 +5750,7 @@
       "scope": ".cs-display-face",
       "important": false,
       "declarationOrder": 1050,
-      "sourceLine": 20
+      "sourceLine": 24
     },
     {
       "name": "--cs-term-border",
@@ -5858,8 +5858,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1063,
-      "sourceLine": 12
+      "declarationOrder": 1066,
+      "sourceLine": 15
     },
     {
       "name": "--cs-glass-whisper-border",
@@ -5867,8 +5867,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1064,
-      "sourceLine": 13
+      "declarationOrder": 1067,
+      "sourceLine": 16
     },
     {
       "name": "--cs-glass-light-bg",
@@ -5876,8 +5876,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1065,
-      "sourceLine": 14
+      "declarationOrder": 1068,
+      "sourceLine": 17
     },
     {
       "name": "--cs-glass-light-border",
@@ -5885,8 +5885,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1066,
-      "sourceLine": 15
+      "declarationOrder": 1069,
+      "sourceLine": 18
     },
     {
       "name": "--cs-glass-standard-bg",
@@ -5894,8 +5894,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1067,
-      "sourceLine": 16
+      "declarationOrder": 1070,
+      "sourceLine": 19
     },
     {
       "name": "--cs-glass-standard-border",
@@ -5903,8 +5903,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1068,
-      "sourceLine": 17
+      "declarationOrder": 1071,
+      "sourceLine": 20
     },
     {
       "name": "--cs-glass-heavy-bg",
@@ -5912,8 +5912,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1069,
-      "sourceLine": 18
+      "declarationOrder": 1072,
+      "sourceLine": 21
     },
     {
       "name": "--cs-glass-heavy-border",
@@ -5921,8 +5921,8 @@
       "kind": "css-expression",
       "definedIn": "base/glass.css",
       "important": false,
-      "declarationOrder": 1070,
-      "sourceLine": 19
+      "declarationOrder": 1073,
+      "sourceLine": 22
     },
     {
       "name": "--cs-color-border-default",
@@ -5937,7 +5937,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1071,
+      "declarationOrder": 1074,
       "sourceLine": 144
     },
     {
@@ -5953,7 +5953,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1072,
+      "declarationOrder": 1075,
       "sourceLine": 144
     },
     {
@@ -5969,7 +5969,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1073,
+      "declarationOrder": 1076,
       "sourceLine": 145
     },
     {
@@ -5985,7 +5985,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1074,
+      "declarationOrder": 1077,
       "sourceLine": 145
     },
     {
@@ -6001,7 +6001,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1075,
+      "declarationOrder": 1078,
       "sourceLine": 150
     },
     {
@@ -6017,7 +6017,7 @@
         }
       ],
       "important": false,
-      "declarationOrder": 1076,
+      "declarationOrder": 1079,
       "sourceLine": 150
     }
   ],

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.2.0).
+// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.3.0).
 // No build step: import this module directly in a browser. It loads the pinned umd-react@19.2.8
 // distribution; its retained React and ReactDOM files report runtime version 19.2.4.
 // (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
@@ -33,7 +33,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
 export const CS = g[found()];
 if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
 export default CS;
-export const VERSION = "2.2.0";
+export const VERSION = "2.3.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/base/components.css

@@ -129,7 +129,7 @@
 
 /* ---- Dialog ---- */
 .cs-dialog-layer { inset: 0; position: fixed; z-index: var(--cs-depth-modal); }
-.cs-dialog__overlay { background: rgba(31, 19, 11, 0.42); inset: 0; position: absolute; }
+.cs-dialog__overlay { background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); inset: 0; position: absolute; }
 .cs-dialog {
   background: var(--cs-color-surface-panel, #ffffff);
   border-radius: var(--cs-radius-md, 8px);
@@ -190,9 +190,14 @@
 .cs-table-wrap--status { padding: var(--cs-space-4, 16px) 0; }
 .cs-table { border-collapse: collapse; color: var(--cs-color-text-primary, #45210e); inline-size: 100%; }
 .cs-table th, .cs-table td {
-  border-block-end: 1px solid rgba(69, 33, 14, 0.18);
+  border-block-end: 1px solid var(--cs-color-border-subtle, var(--_cs-border-subtle));
   padding: 0.625rem 0.75rem; text-align: start;
 }
+.cs-table th.cs-table__cell--numeric,
+.cs-table td.cs-table__cell--numeric {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
 .cs-table thead th {
   font-size: var(--cs-font-size-xs, 0.75rem); text-transform: uppercase;
   letter-spacing: var(--cs-letter-spacing-caps, 0.08em); color: var(--cs-color-text-muted, #3f2d21);
@@ -210,7 +215,7 @@
 .cs-ai-disclosure__panel {
   background: var(--cs-color-surface-panel, #ffffff);
   color: var(--cs-color-text-primary, #45210e);
-  border: 1px solid rgba(69, 33, 14, 0.18); border-radius: var(--cs-radius-md, 8px);
+  border: 1px solid var(--cs-color-border-subtle, var(--_cs-border-subtle)); border-radius: var(--cs-radius-md, 8px);
   box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(31, 19, 11, 0.08));
   display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
   min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);

package/base/controls.css

@@ -175,7 +175,7 @@
 @keyframes cs-img-shimmer { from { opacity: .55; } to { opacity: .9; } }
 .cs-image.is-zoomable { cursor: zoom-in; }
 .cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }
-.cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }
+.cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 82%, transparent); display: grid; place-items: center; cursor: zoom-out; }
 .cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }
 .cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; /* on-dark-chrome ink */ font-size: var(--cs-font-size-base); cursor: pointer; }
 .cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }
@@ -287,8 +287,8 @@
 .cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-colorpicker__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }
-.cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }
-.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
+.cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); }
+.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
 .cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }
 .cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }
@@ -304,7 +304,7 @@
 .cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }
 .cs-splitter__bar:hover { background: var(--cs-accent-tint); }
 .cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
-.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }
+.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); display: grid; place-items: center; }
 .cs-hotkeys__card { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }
 .cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }

package/base/data.css

@@ -3,6 +3,8 @@
 /* Card */
 .cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }
 .cs-card--flat { box-shadow: none; }
+.cs-card--raised { background: var(--cs-color-surface-raised); }
+.cs-card--featured { background: var(--_cs-light, var(--cs-color-surface-raised))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 12%, var(--cs-color-surface-panel))); border-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); box-shadow: var(--cs-shadow-md); }
 .cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
 .cs-card--interactive:hover { border-color: var(--cs-accent); box-shadow: var(--cs-shadow-md); }
 .cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }

package/base/feedback.css

@@ -1,7 +1,7 @@
 /* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. */
 
 /* Badge — compact status label */
-.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
+.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
 .cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); }
 .cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
 [data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--solid { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); }

package/base/glass.css

@@ -9,6 +9,9 @@
 
 /* ---- 1. Composition from token scalars ---- */
 :root {
+  --_cs-border-subtle: var(--_cs-light, color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 18%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 82%, transparent));
+  --_cs-border-strong: var(--_cs-light, color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e)))var(--_cs-dark, color-mix(in oklab, var(--cs-color-border-default, #4a3a2c) 65%, var(--cs-color-text-primary, #f5ead9)));
+  --_cs-surface-scrim: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 48%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-surface-page, #1a1108) 72%, transparent));
   --cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
   --cs-glass-whisper-border: transparent;
   --cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);

package/base/interaction.css

@@ -12,7 +12,7 @@
 }
 .cs-button--primary:hover:not(.is-disabled),
 .cs-button--danger:hover:not(.is-disabled) {
-  box-shadow: 0 8px 20px rgba(69, 33, 14, 0.24);
+  box-shadow: var(--_cs-light, 0 8px 20px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 24%, transparent))var(--_cs-dark, var(--cs-shadow-md));
   transform: translateY(-1px);
 }
 .cs-button--primary:active:not(.is-disabled),

package/base/navigation.css

@@ -17,7 +17,7 @@
 .cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }
 
 /* Pagination */
-.cs-pagination { display: inline-flex; align-items: center; gap: 4px; }
+.cs-pagination { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
 .cs-pagination button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); cursor: pointer; display: inline-grid; place-items: center; }
 .cs-pagination button:hover:not(:disabled) { border-color: var(--cs-accent); }
 .cs-pagination button[aria-current="page"] { background: var(--_cs-light, var(--cs-component-button-primary-bg))var(--_cs-dark, var(--cs-component-button-primary-bg)); color: var(--_cs-light, var(--cs-component-button-primary-fg))var(--_cs-dark, var(--cs-component-button-primary-fg)); border-color: transparent; }

package/base/responsive.css

@@ -37,10 +37,14 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
 @media screen and (max-width: 768px) {
   .cs-desk { padding: 24px 10px !important; }
   .cs-sheet { padding: 40px 40px !important; }
+  .cs-display:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-4xl); }
+  .cs-h1:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-2xl); }
 }
 @media screen and (max-width: 640px) {
   .cs-desk { padding: 12px 6px !important; }
   .cs-sheet { padding: 26px 20px !important; border-radius: 8px !important; }
+  .cs-display:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-3xl); }
+  .cs-h1:where(:not(.cs-canvas-desk *)) { font-size: var(--cs-font-size-xl); }
 }
 @media screen and (max-width: 360px) {
   .cs-sheet { padding: 20px 15px !important; }

package/base/shell.css

@@ -27,9 +27,9 @@
 .cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
 
 /* Drawer */
-.cs-drawer-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); }
-.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: -18px 0 48px rgba(31, 19, 11, 0.22); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
-.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: 18px 0 48px rgba(31, 19, 11, 0.22); animation-name: cs-drawer-in-left; }
+.cs-drawer-scrim { position: fixed; inset: 0; background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); z-index: var(--cs-depth-modal); }
+.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: var(--_cs-light, -18px 0 48px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 22%, transparent))var(--_cs-dark, var(--cs-shadow-xl)); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }
+.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: var(--_cs-light, 18px 0 48px color-mix(in srgb, var(--cs-color-brand-umber, #45210e) 22%, transparent))var(--_cs-dark, var(--cs-shadow-xl)); animation-name: cs-drawer-in-left; }
 .cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }
 .cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }
 .cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }
@@ -41,7 +41,7 @@
 @media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }
 
 /* CommandPalette */
-.cs-cmdk-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }
+.cs-cmdk-scrim { position: fixed; inset: 0; background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }
 .cs-cmdk { inline-size: min(560px, 92vw); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); overflow: hidden; }
 .cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }
 .cs-cmdk__search svg { color: var(--cs-color-text-muted); }

package/base/typography.css

@@ -2,7 +2,9 @@
  * weight + tracking so consumers write intent (.cs-h1) not magic numbers.
  * Built on the semantic aliases in tokens/typography.css. */
 .cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
+.cs-display--fluid { font-family: var(--cs-heading-family); font-size: clamp(2.25rem, 1.5rem + 3.5vw, var(--cs-text-display)); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
+.cs-h1--fluid { font-family: var(--cs-heading-family); font-size: clamp(1.75rem, 1.25rem + 2vw, var(--cs-text-h1)); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
 .cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); overflow-wrap: break-word; }
 .cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }
@@ -12,6 +14,8 @@
 .cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
 .cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }
 .cs-mono { font-family: var(--cs-font-family-mono); }
+.cs-tabular { font-variant-numeric: tabular-nums; }
+.cs-prose { max-inline-size: var(--cs-prose-measure, 45rem); line-height: var(--cs-font-lineHeight-body, 1.5); }
 /* Opt in to the display face for a subtree — retargets --cs-heading-family so
  * .cs-display/.cs-h1…h4 and bare headings follow, body copy stays on the UI
  * face. Space Grotesk tops out at 700, so --cs-heading-weight-strong (800)

package/components/api-discovery.json

@@ -3,7 +3,7 @@
   "interpretation": "Discovery projection: every public export and authored prop definition, with inherited prop counts. Inherited native props, full signatures, support evidence/history and compiler metadata remain in components/api-index.json. Declarations remain authoritative; this projection does not establish runtime, semantic or human acceptance.",
   "completeIndex": {
     "path": "components/api-index.json",
-    "sha256": "8e876f2a86a03a7380c9126c252eb1190becc020b4b59d0b6bf48ca33d7806d4"
+    "sha256": "468afbb6e09f78a1be6fe2b2b06bbd6ea30f4fa06abb835c191eb6490082854a"
   },
   "exports": [
     {

package/components/api-index.json

@@ -14,7 +14,7 @@
     "scripts/catalog-source.json": "f12045fb1cccf19df8a2469dba096c582bc1885c8be464e2fc3df9aec06b89e9",
     "scripts/lib/component-support.mjs": "6626078ffaaa91cb3a43d87858577fc5d405e5bfb474e7519abf50d4797b2eb1",
     "_esm/react.d.ts": "56e221d6eb875cf7c3a4de841372ba0b70389836957d8538b1d5a276848db95d",
-    "components/lifecycle.json": "b8999f80d07a706f4555ddbe8c5690fc99631cc1fdee1728b5af52a5fd8ab2dc"
+    "components/lifecycle.json": "fdf434c3f13023b81cfcb4b491efa7b8f1ef490e7fc40c70c8cd6482924faf84"
   },
   "propDefinitions": {
     "p-0003926b4717c94d": {
@@ -18980,7 +18980,7 @@
           },
           {
             "path": "stories/Accordion.stories.jsx",
-            "sha256": "1630a32254a92fa261c6e4cb497630366432573541591a3d598d3e4423349d5a",
+            "sha256": "a603e154ff73ae2d9e7a0967edf7310c4970c8370f106edcd11f4c47ada0d3f8",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -26864,7 +26864,7 @@
           },
           {
             "path": "stories/Breadcrumb.stories.jsx",
-            "sha256": "f4939fee959b954e5aee9698d9019fd46612b7f9731edfcd06da8d0991fc13a0",
+            "sha256": "cdf1a8c5aaf4db97287c453fe3d424e8722e9d99ab696fb61b3044a71609961a",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -37865,7 +37865,7 @@
           },
           {
             "path": "stories/CitationList.stories.jsx",
-            "sha256": "dfb9621b466a98f04976ebb85f8d5660badcd08b8db855dc8251ba2911ddc694",
+            "sha256": "46a0d90eb742369470749be61762ef40671484d12f3558bdc178dfc095f0e8c6",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -40945,7 +40945,7 @@
           },
           {
             "path": "stories/DescriptionList.stories.jsx",
-            "sha256": "150c6cb17a105929da1d13fbd166800dbae9883bf372008f10844dfea205b8c6",
+            "sha256": "b0ab9fe6080497f9712fda02cb179fa149da7555221db96f044d2787dfb01c11",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -44697,7 +44697,7 @@
           },
           {
             "path": "stories/Dock.stories.jsx",
-            "sha256": "be1f631a8e6b0f223ada75af2db3ed663cd8d9722dfbe236684e9406a7db40e2",
+            "sha256": "6365160effe502352aaefcee71717497cd97ea22d295bbc337401303e7242648",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -66853,7 +66853,7 @@
           },
           {
             "path": "stories/NavigationMenu.stories.jsx",
-            "sha256": "dcd6502abad3513d81b2a9ba93053c3d295da496af2c6f62027a215797ba50e4",
+            "sha256": "e94cf969f9f71545bd6f72ef452105e8984cc3b39283c1fb431fb1a93b48ec62",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -71425,7 +71425,7 @@
           },
           {
             "path": "stories/PromptSuggestions.stories.jsx",
-            "sha256": "bca40b689f7bee576a26ec7dd845168628d7d09d92010eebff9addf3bbc380bf",
+            "sha256": "b5f189211e33bc0e681e5cc573cb89824078f3aa72dc965df8e492c0c6ba65ee",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -71693,7 +71693,7 @@
           },
           {
             "path": "stories/RadioGroup.stories.jsx",
-            "sha256": "7dfa556cfc4e1e491cce2f1bc53e3823263c2154798e11a0a791cc0831c0f68e",
+            "sha256": "46b321c7ac19c224758e2fc358d44e2999ef80fb61669258d495433b0d23e648",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -73047,7 +73047,7 @@
           },
           {
             "path": "stories/RadioGroup.stories.jsx",
-            "sha256": "7dfa556cfc4e1e491cce2f1bc53e3823263c2154798e11a0a791cc0831c0f68e",
+            "sha256": "46b321c7ac19c224758e2fc358d44e2999ef80fb61669258d495433b0d23e648",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -77319,7 +77319,7 @@
           },
           {
             "path": "stories/Select.stories.jsx",
-            "sha256": "da1541f6f267141b7fa35825680dd6b233e544342d7baec65fa1dc7e9ff54638",
+            "sha256": "8e90a784ba35bd49c45443a17a6386e45a5b44e9a1fa7de17d671070dda72752",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -81319,7 +81319,7 @@
           },
           {
             "path": "stories/Sortable.stories.jsx",
-            "sha256": "b316051536fcac4352dc0f6beb2843ad89d1832f23d9560399df86cc0a74ce3d",
+            "sha256": "a1ce13d84e450a168f8da8b59794d5ed40b87f460b756331eafe093e8e50ff4b",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -90535,7 +90535,7 @@
           },
           {
             "path": "stories/TagInput.stories.jsx",
-            "sha256": "471e377999616133c27c20275dc67d85d3297e821a262758b1c17ac85e24b203",
+            "sha256": "c7dc22346768cab5fe3493a09b3136a8de12b33ddf967dd2e09ebc84b46bb05f",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }
@@ -93661,7 +93661,7 @@
           },
           {
             "path": "stories/Timeline.stories.jsx",
-            "sha256": "751b1374999a7b619407da0abbf365ad297902f6be0d92a5f52d10a12cd74e1d",
+            "sha256": "3715dffb952d9ea60ca40b108d21e5a1102c3ff731f3229965182676e37ada19",
             "scope": "Authored Storybook CSF story and declared matrix mount surface; not execution or all-state acceptance",
             "checkedAt": "2026-10-21T12:08:13.113Z"
           }