@cyberskill/design 2.3.1 → 2.4.0

package/_ds_manifest.json

@@ -5750,7 +5750,7 @@
       "scope": ".cs-display-face",
       "important": false,
       "declarationOrder": 1050,
-      "sourceLine": 24
+      "sourceLine": 25
     },
     {
       "name": "--cs-term-border",
@@ -5760,7 +5760,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1053,
-      "sourceLine": 346
+      "sourceLine": 347
     },
     {
       "name": "--cs-term-bar",
@@ -5770,7 +5770,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1054,
-      "sourceLine": 347
+      "sourceLine": 348
     },
     {
       "name": "--cs-term-dot",
@@ -5780,7 +5780,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1055,
-      "sourceLine": 348
+      "sourceLine": 349
     },
     {
       "name": "--cs-term-bg",
@@ -5790,7 +5790,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1056,
-      "sourceLine": 349
+      "sourceLine": 350
     },
     {
       "name": "--cs-term-fg",
@@ -5800,7 +5800,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1057,
-      "sourceLine": 350
+      "sourceLine": 351
     },
     {
       "name": "--cs-term-muted",
@@ -5810,7 +5810,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1058,
-      "sourceLine": 351
+      "sourceLine": 352
     },
     {
       "name": "--cs-code-bg",
@@ -5857,6 +5857,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1066,
       "sourceLine": 15
@@ -5866,6 +5867,7 @@
       "value": "transparent",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1067,
       "sourceLine": 16
@@ -5875,6 +5877,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1068,
       "sourceLine": 17
@@ -5884,6 +5887,7 @@
       "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 50%, transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1069,
       "sourceLine": 18
@@ -5893,6 +5897,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-standard-opacity, 80%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1070,
       "sourceLine": 19
@@ -5902,6 +5907,7 @@
       "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 60%, transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1071,
       "sourceLine": 20
@@ -5911,6 +5917,7 @@
       "value": "color-mix(in oklab, var(--cs-color-surface-raised, #fbf4e9) var(--cs-glass-heavy-opacity, 90%), transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1072,
       "sourceLine": 21
@@ -5920,6 +5927,7 @@
       "value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 80%, transparent)",
       "kind": "css-expression",
       "definedIn": "base/glass.css",
+      "scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
       "important": false,
       "declarationOrder": 1073,
       "sourceLine": 22

package/_esm/cs.mjs

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

package/base/collections.css

@@ -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-accent-bright); color: var(--cs-color-brand-umber); }
+.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
 .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); }

package/base/components.css

@@ -91,8 +91,8 @@
 .cs-button--full { inline-size: 100%; }
 
 .cs-button.is-disabled,
-.cs-button.is-loading,
 .cs-field.is-disabled { opacity: 0.58; cursor: not-allowed; }
+.cs-button.is-loading { opacity: 0.88; cursor: progress; }
 
 .cs-button__spinner {
   inline-size: 1em; block-size: 1em; border-radius: 999px;
@@ -132,7 +132,7 @@
 .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);
+  border-radius: var(--cs-radius-lg, 14px);
   box-shadow: var(--cs-shadow-xl, 0 24px 80px rgba(31, 19, 11, 0.26));
   color: var(--cs-color-text-primary, #45210e);
   left: 0;

package/base/controls.css

@@ -81,6 +81,7 @@
 /* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */
 .cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
 .cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px var(--cs-space-3); min-block-size: 44px; }
+.is-invalid .cs-combobox input, .cs-combobox input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
 .cs-combobox input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }
 .cs-combobox__popup { color: var(--cs-color-text-primary); position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; }
@@ -114,7 +115,7 @@
 .cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
 .cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }
-.cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; }
+.cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
 .cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }
 .cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }
@@ -137,7 +138,7 @@
 .cs-ctxmenu-zone { position: relative; }
 .cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
 .cs-fab--static { position: static; align-items: flex-start; }
-.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
+.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), var(--cs-shadow-lg); }
 .cs-fab__main:hover { filter: brightness(1.05); }
 .cs-fab__main:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md); }
 .cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }

package/base/data.css

@@ -41,7 +41,7 @@
 
 /* Tooltip */
 .cs-tooltip { position: relative; display: inline-flex; }
-.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
+.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: normal; inline-size: max-content; max-inline-size: 240px; overflow-wrap: break-word; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent), var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
 .cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }
 .cs-tooltip:not([data-managed]):hover .cs-tooltip__bubble, .cs-tooltip:not([data-managed]):focus-within .cs-tooltip__bubble, .cs-tooltip[data-open="true"] .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
 

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; 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 { 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.2; padding: 3px 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

@@ -8,10 +8,10 @@
  */
 
 /* ---- 1. Composition from token scalars ---- */
-:root {
+:root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast] {
   --_cs-border-subtle: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 76%, transparent);
   --_cs-border-strong: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e));
-  --_cs-surface-scrim: color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 52%, transparent);
+  --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 45%, #050403) 58%, 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/shell.css

@@ -17,7 +17,7 @@
 .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-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-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
+.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), 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/base/typography.css

@@ -3,6 +3,7 @@
  * 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; }
+:lang(vi) :is(.cs-display, .cs-display--fluid) { line-height: 1.22; }
 .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; }

package/components/prompt-api.json

@@ -4,7 +4,7 @@
   "sourceHashes": {
     "components/api-index.json": "468afbb6e09f78a1be6fe2b2b06bbd6ea30f4fa06abb835c191eb6490082854a",
     "components/contracts.json": "e4ebe085e32dc639dea36cb032155c6aa557e61411bec7fa800691dd61a2ce03",
-    "_ds_manifest.json": "2ff3ac9bd9fd509669b188c7c249aa73e90a4a35b90acc9024f05d33f4629da5",
+    "_ds_manifest.json": "9b086742b366b68bb6204a620127bfce931749b56a0291dcf216679fb2296204",
     "scripts/generate-component-contracts.mjs": "a94d0d58b3d0b6f629bf2cdc2a53bdfc8b43b8fa1479434b770f0cd8dc53187c",
     "scripts/lib/component-export.mjs": "9f6fd3df4a9e0366fef8c384a0926e050bd8fbcb3887bf5e6ffaed5c0622cd15",
     "scripts/generate-prompt-api.mjs": "e67709ad813a46330d2825912334244050422c16f05021890cc6b41b73acd602"

package/components/release-compatibility.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "baselineVersion": "2.3.0",
+  "baselineVersion": "2.3.1",
   "policy": {
     "versioning": "semver",
     "breakingChangesRequireMajor": true,

package/components/specifications.json

@@ -5,7 +5,7 @@
   "sourceHashes": {
     "_audit/a11y-gate.html": "68c798ba1261c5bca4da7eefd67a045ba3048711a5f8a9fe9d35eacb4e8b06da",
     "_audit/component-behavior-test.html": "5d1a1dafba237dcec4144e2dd0059f7fdce54306d9b42bc7af09030d11fbcb5b",
-    "_ds_manifest.json": "2ff3ac9bd9fd509669b188c7c249aa73e90a4a35b90acc9024f05d33f4629da5",
+    "_ds_manifest.json": "9b086742b366b68bb6204a620127bfce931749b56a0291dcf216679fb2296204",
     "components/_i18n/i18n.js": "ea69f4f438162cf0e9770d529ec3b9f1107183885c71aa83f2ceff3763a34d2f",
     "components/_i18n/strings.js": "ffedd19ed9eacd22223e1387ab7eedca5cb385182d9a4ada469ef2711a0bae73",
     "components/_utils/cx.js": "ad6a747ea116bb2521a5cfa094580d2259d841ac9965d10310e83e8e839bab42",