@cyberskill/design 2.1.0 → 2.2.0

package/_ds_manifest.json

@@ -4479,7 +4479,7 @@
     },
     {
       "name": "--cs-accent-strong",
-      "value": "#916D10",
+      "value": "#916D11",
       "kind": "color",
       "definedIn": "tokens/elements.css",
       "important": false,
@@ -4551,7 +4551,7 @@
     },
     {
       "name": "--cs-accent-grad-b",
-      "value": "#F3B958",
+      "value": "#C4B78F",
       "kind": "color",
       "definedIn": "tokens/elements.css",
       "important": false,

package/_esm/cs.mjs

@@ -1,4 +1,4 @@
-// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.1.0).
+// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.2.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.1.0";
+export const VERSION = "2.2.0";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;

package/base/collections.css

@@ -27,7 +27,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
   .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
 }
 .cs-item--interactive: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-item.is-selected { border-color: var(--cs-color-brand-ochre); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
+.cs-item.is-selected { border-color: var(--cs-accent); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
 .cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
 /* Static Item text remains information, rather than an inactive control. */
 div.cs-item.is-disabled { opacity: 1; }
@@ -47,7 +47,7 @@ div.cs-item.is-disabled { opacity: 1; }
 .cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }
 .cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }
 .cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }
-.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
+.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); }
 .cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }
 .cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
 .cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }
@@ -92,7 +92,7 @@ div.cs-item.is-disabled { opacity: 1; }
 
 /* EmptyState */
 .cs-empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; }
-.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 24%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); margin-block-end: 6px; }
+.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 24%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); margin-block-end: 6px; }
 .cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }
 .cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }
 .cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }

package/base/components.css

@@ -38,8 +38,8 @@
 
 .cs-button--secondary {
   background: var(--cs-color-surface-panel, #ffffff);
-  border-color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-brand-ochre));
-  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-brand-ochre));
+  border-color: var(--_cs-light, var(--cs-accent-strong, #45210e))var(--_cs-dark, var(--cs-accent, #f4ba17));
+  color: var(--_cs-light, var(--cs-color-text-accent, #45210e))var(--_cs-dark, var(--cs-color-text-accent, #f4ba17));
 }
 .cs-button--secondary:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
 

package/base/controls.css

@@ -29,12 +29,12 @@
 .cs-stepper input::-webkit-outer-spin-button, .cs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 
 /* Slider (native range) */
-.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); block-size: 22px; cursor: pointer; }
+.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); block-size: 22px; cursor: pointer; }
 .cs-slider:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 4px; border-radius: var(--cs-radius-full); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 
 /* FileUpload / dropzone */
 .cs-dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; border: 2px dashed var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 24px; background: var(--cs-color-surface-raised); cursor: pointer; color: var(--cs-color-text-primary); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), background var(--cs-duration-fast) var(--cs-ease-standard); }
-.cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-color-brand-ochre); background: color-mix(in oklab, var(--cs-color-brand-ochre) 8%, var(--cs-color-surface-panel)); }
+.cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-accent); background: color-mix(in oklab, var(--cs-accent) 8%, var(--cs-color-surface-panel)); }
 .cs-dropzone__icon { color: var(--cs-color-text-accent); }
 .cs-dropzone__title { font-weight: 700; }
 .cs-dropzone__hint { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
@@ -42,7 +42,7 @@
 /* SegmentedControl (matches Status Hub lens switcher) */
 .cs-segmented { display: inline-flex; gap: 4px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
 .cs-segmented button { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
-.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse))var(--_cs-dark, var(--cs-color-brand-umber)); }
+.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { 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)); }
 
 /* StatusIndicator */
 .cs-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; color: var(--cs-color-text-primary); }
@@ -65,7 +65,7 @@
 .cs-toggle:disabled { opacity: .5; cursor: not-allowed; }
 .cs-rating { display: inline-flex; gap: 4px; }
 .cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }
-.cs-rating button.on { color: var(--cs-color-brand-ochre); }
+.cs-rating button.on { color: var(--cs-accent); }
 .cs-rating[data-readonly="true"] button { cursor: default; }
 .cs-rating button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-otp { display: inline-flex; gap: 8px; }

package/base/data.css

@@ -4,7 +4,7 @@
 .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--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-color-brand-ochre); box-shadow: var(--cs-shadow-md); }
+.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); }
 .cs-card--flat.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-card--interactive:active { transform: translateY(1px); }
@@ -27,7 +27,7 @@
 .cs-stat__delta--flat { color: var(--cs-color-text-muted); }
 
 /* Avatar */
-.cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-color-brand-umber); color: var(--cs-color-brand-ochre); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }
+.cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }
 .cs-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
 .cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--cs-font-size-xs); }
 .cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--cs-font-size-sm); }

package/base/feedback.css

@@ -4,6 +4,8 @@
 .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--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); }
+[data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--ochre { background: var(--cs-accent-tint); color: var(--cs-color-text-accent); border-color: color-mix(in oklab, var(--cs-accent) 55%, transparent); }
 .cs-badge--success { background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg); border-color: transparent; }
 .cs-badge--danger { background: var(--cs-color-semantic-danger); color: var(--cs-color-semantic-danger-fg); border-color: transparent; }
 .cs-badge--warning { background: var(--cs-color-semantic-warning); color: var(--cs-color-semantic-warning-fg); border-color: transparent; }
@@ -49,12 +51,12 @@
 @media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }
 
 /* Spinner */
-.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); animation: cs-spin 0.62s linear infinite; }
+.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-accent-strong) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-accent-strong) 22%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); animation: cs-spin 0.62s linear infinite; }
 @media (prefers-reduced-motion: reduce) { .cs-spinner { animation: none; } }
 
 /* Progress bar */
 .cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }
-.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-color-brand-ochre); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
+.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
 .cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); }
 .cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); }
 

package/base/forms.css

@@ -17,7 +17,7 @@
 
 /* Checkbox + Radio — native, brand accent */
 .cs-check, .cs-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); line-height: 1.4; }
-.cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); cursor: pointer; }
+.cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); cursor: pointer; }
 .cs-check.is-disabled, .cs-radio.is-disabled { opacity: 0.55; cursor: not-allowed; }
 .cs-check__text, .cs-radio__text { display: grid; gap: 2px; }
 .cs-check__desc, .cs-radio__desc { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }
@@ -29,7 +29,7 @@
 .cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
 .cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }
 .cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
-.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
+.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); }
 .cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }
 .cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-switch:focus-within { outline-style: solid; outline-width: 2px; outline-color: var(--cs-color-text-primary); outline-offset: 4px; border-radius: 6px; }

package/base/glass.css

@@ -107,8 +107,8 @@
 .cs-aurora {
   background-color: var(--cs-color-brand-umber);
   background-image:
-    radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-color-brand-ochre) 46%, transparent), transparent 55%),
-    radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, #ffcf5c 32%, transparent), transparent 60%),
+    radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-accent, var(--cs-color-brand-ochre)) 46%, transparent), transparent 55%),
+    radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, var(--cs-accent-grad-b, #ffcf5c) 32%, transparent), transparent 60%),
     radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
   color: #fff; /* on-aurora wash */
 }

package/base/navigation.css

@@ -4,7 +4,7 @@
 .cs-tabs { display: flex; gap: 4px; overflow-x: auto; border-block-end: 1px solid var(--cs-color-border-default); }
 .cs-tab { flex-shrink: 0; appearance: none; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); padding: 10px 14px; cursor: pointer; position: relative; border-block-end: 2px solid transparent; margin-block-end: 0; display: inline-flex; align-items: center; gap: 7px; }
 .cs-tab:hover { color: var(--cs-color-text-primary); }
-.cs-tab[aria-selected="true"] { color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); border-block-end-color: var(--cs-color-brand-ochre); }
+.cs-tab[aria-selected="true"] { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); border-block-end-color: var(--cs-accent); }
 .cs-tab:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; border-radius: var(--cs-radius-sm); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-tab__count { font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-full); padding: 1px 7px; }
 
@@ -19,8 +19,8 @@
 /* Pagination */
 .cs-pagination { display: inline-flex; align-items: center; gap: 4px; }
 .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-color-brand-ochre); }
-.cs-pagination button[aria-current="page"] { background: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse))var(--_cs-dark, var(--cs-color-brand-umber)); border-color: transparent; }
+.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; }
 .cs-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
 .cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }
 

package/base/shell.css

@@ -6,8 +6,8 @@
 .cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }
 .cs-nav-item:hover { background: var(--cs-color-surface-raised); }
 .cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-nav-item.is-active { background: color-mix(in oklab, var(--cs-color-brand-ochre) 22%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
-.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
+.cs-nav-item.is-active { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }
+.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }
 .cs-nav-item__trail { margin-inline-start: auto; }
 
 /* Steps */
@@ -15,9 +15,9 @@
 .cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }
 .cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
 .cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
-.cs-step--done .cs-step__marker { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-color: transparent; }
-.cs-step--done:not(:last-child)::after { background: var(--cs-color-brand-umber); }
-.cs-step--active .cs-step__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-color-brand-ochre) 28%, transparent); }
+.cs-step--done .cs-step__marker { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); border-color: transparent; }
+.cs-step--done:not(:last-child)::after { background: var(--cs-accent-strong); }
+.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
 .cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
 .cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
 

package/components/prompt-api.json

@@ -4,7 +4,7 @@
   "sourceHashes": {
     "components/api-index.json": "8e876f2a86a03a7380c9126c252eb1190becc020b4b59d0b6bf48ca33d7806d4",
     "components/contracts.json": "e4ebe085e32dc639dea36cb032155c6aa557e61411bec7fa800691dd61a2ce03",
-    "_ds_manifest.json": "aa7c859299ef367e7df3aee45706ab58836d7fe0274c32c117b7c0534159ff37",
+    "_ds_manifest.json": "1afe81a2bfb18fc8455860acef45cac88927bf852a9b3142921ede4096fd8ab8",
     "scripts/generate-component-contracts.mjs": "a94d0d58b3d0b6f629bf2cdc2a53bdfc8b43b8fa1479434b770f0cd8dc53187c",
     "scripts/lib/component-export.mjs": "9f6fd3df4a9e0366fef8c384a0926e050bd8fbcb3887bf5e6ffaed5c0622cd15",
     "scripts/generate-prompt-api.mjs": "e67709ad813a46330d2825912334244050422c16f05021890cc6b41b73acd602"

package/components/specifications.json

@@ -5,7 +5,7 @@
   "sourceHashes": {
     "_audit/a11y-gate.html": "48f27d8d35ebf2d4094c6161641cb74e50c512929b2a4fb886fd4d0f46218f49",
     "_audit/component-behavior-test.html": "bc5f24b76962114d3d605f9baeca6f0ef0bdeeb446beaa90370740118e4a0f04",
-    "_ds_manifest.json": "aa7c859299ef367e7df3aee45706ab58836d7fe0274c32c117b7c0534159ff37",
+    "_ds_manifest.json": "1afe81a2bfb18fc8455860acef45cac88927bf852a9b3142921ede4096fd8ab8",
     "components/_i18n/i18n.js": "ea69f4f438162cf0e9770d529ec3b9f1107183885c71aa83f2ceff3763a34d2f",
     "components/_i18n/strings.js": "ffedd19ed9eacd22223e1387ab7eedca5cb385182d9a4ada469ef2711a0bae73",
     "components/_utils/cx.js": "ad6a747ea116bb2521a5cfa094580d2259d841ac9965d10310e83e8e839bab42",