@cyberskill/design 2.4.0 → 2.5.0

package/_ds_manifest.json

@@ -5760,7 +5760,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1053,
-      "sourceLine": 347
+      "sourceLine": 355
     },
     {
       "name": "--cs-term-bar",
@@ -5770,7 +5770,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1054,
-      "sourceLine": 348
+      "sourceLine": 356
     },
     {
       "name": "--cs-term-dot",
@@ -5780,7 +5780,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1055,
-      "sourceLine": 349
+      "sourceLine": 357
     },
     {
       "name": "--cs-term-bg",
@@ -5790,7 +5790,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1056,
-      "sourceLine": 350
+      "sourceLine": 358
     },
     {
       "name": "--cs-term-fg",
@@ -5800,7 +5800,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1057,
-      "sourceLine": 351
+      "sourceLine": 359
     },
     {
       "name": "--cs-term-muted",
@@ -5810,7 +5810,7 @@
       "scope": ".cs-terminal",
       "important": false,
       "declarationOrder": 1058,
-      "sourceLine": 352
+      "sourceLine": 360
     },
     {
       "name": "--cs-code-bg",

package/_esm/cs.mjs

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

package/base/a11y.css

@@ -111,7 +111,7 @@
     background: radial-gradient(circle, var(--cs-color-border-default) 4.5px, transparent 5px);
   }
   .cs-carousel__dots button[aria-current="true"] {
-    background: radial-gradient(circle, var(--cs-accent) 4.5px, transparent 5px);
+    background: radial-gradient(circle, var(--cs-color-text-accent) 4.5px, transparent 5px);
   }
   .cs-carousel__dots button::before { content: none; }
   /* The container's two 1px borders must not clip a short requested divider. */

package/base/ai.css

@@ -4,6 +4,7 @@
 
 /* PromptInput */
 .cs-prompt { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); padding: 10px 12px; display: grid; gap: 8px; }
+.cs-prompt.is-invalid, .is-invalid .cs-prompt, .cs-prompt[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-prompt:focus-within {
   border-color: var(--cs-color-text-primary);
   outline: 2px solid var(--cs-color-text-primary);
@@ -22,14 +23,14 @@
 .cs-chat-msg--user { flex-direction: row-reverse; }
 .cs-chat-msg__avatar { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
 .cs-chat-msg--lumi .cs-chat-msg__avatar { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
-.cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
+.cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
 .cs-chat-msg__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
 .cs-chat-msg__col { display: grid; gap: 3px; max-inline-size: 80%; }
 .cs-chat-msg--user .cs-chat-msg__col { justify-items: end; }
 .cs-chat-msg__name { font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-color-text-muted); }
 .cs-chat-msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
 .cs-chat-msg--lumi .cs-chat-msg__bubble { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-end-start-radius: 4px; color: var(--cs-color-text-primary); }
-.cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-end-end-radius: 4px; }
+.cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-end-end-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
 
 /* ConfidenceMeter */
 .cs-confidence { display: grid; gap: 6px; font-family: var(--cs-font-family-ui); }

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-accent); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
+.cs-item.is-selected { border-color: var(--cs-color-text-accent); background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
 .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; }

package/base/components.css

@@ -124,7 +124,7 @@
   padding-inline: var(--cs-component-textfield-paddingX, 12px);
 }
 .cs-field__control::placeholder { color: var(--cs-color-text-muted, #3f2d21); opacity: 0.7; }
-.cs-field.is-invalid .cs-field__control { border-color: var(--cs-color-semantic-danger, #b42318); }
+.cs-field.is-invalid .cs-field__control, .cs-field__control.is-invalid, .cs-field__control[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
 .cs-field__error { color: var(--cs-color-semantic-danger-text, #4b0502); font-size: 0.875rem; }
 
 /* ---- Dialog ---- */

package/base/controls.css

@@ -2,6 +2,7 @@
 
 /* SearchField */
 .cs-search { display: flex; align-items: center; gap: var(--cs-space-2); border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-full); padding: 0 14px; min-height: 44px; background: var(--cs-color-surface-panel); }
+.cs-search.is-invalid, .is-invalid .cs-search, .cs-search[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-search:focus-within {
   border-color: var(--cs-color-text-primary);
   outline: 2px solid var(--cs-color-text-primary);
@@ -16,6 +17,7 @@
 
 /* NumberField / stepper */
 .cs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
+.cs-stepper.is-invalid, .is-invalid .cs-stepper, .cs-stepper[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-stepper:focus-within {
   border-color: var(--cs-color-text-primary);
   outline: 2px solid var(--cs-color-text-primary);
@@ -65,11 +67,12 @@
 .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-accent); }
+.cs-rating button.on { color: var(--cs-color-text-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; }
 .cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); 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); }
+.cs-otp.is-invalid input, .is-invalid .cs-otp input, .cs-otp input.is-invalid, .cs-otp input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-otp input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; border-color: var(--cs-accent); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-otp input:disabled { opacity: .5; cursor: not-allowed; background: var(--cs-color-surface-raised); }
 .cs-btngroup { display: inline-flex; }
@@ -81,7 +84,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); }
+.is-invalid .cs-combobox input, .cs-combobox.is-invalid input, .cs-combobox input.is-invalid, .cs-combobox[aria-invalid="true"] 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; }
@@ -90,6 +93,7 @@
 .cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { 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-primary))var(--_cs-dark, var(--cs-accent-bright)); }
 .cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
 .cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }
+.cs-igroup.is-invalid, .is-invalid .cs-igroup, .cs-igroup[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-igroup:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }
 .cs-igroup > input:focus { outline: none; }
@@ -98,6 +102,7 @@
 .cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }
 .cs-igroup__btn:hover { color: var(--cs-color-text-primary); }
 .cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px var(--cs-space-2); min-block-size: 44px; box-sizing: border-box; }
+.cs-taginput.is-invalid, .is-invalid .cs-taginput, .cs-taginput[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-taginput:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px var(--cs-space-1); }
 .cs-taginput > input:focus { outline: none; }
@@ -114,16 +119,18 @@
 .cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }
 .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.today { box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); }
 .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; }
+.cs-datepicker.is-invalid .cs-datepicker__field, .is-invalid .cs-datepicker__field, .cs-datepicker__field.is-invalid, .cs-datepicker__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-datepicker__field: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__field .ph { color: var(--cs-color-text-muted); }
 .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: max-content; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); }
 .cs-datepicker__pop .cs-cal { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; overflow-x: auto; }
 .cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
+.cs-timepicker.is-invalid, .is-invalid .cs-timepicker, .cs-timepicker[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-timepicker:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }
 .cs-timepicker select:focus { outline: none; }
@@ -145,7 +152,7 @@
 .cs-fab--static .cs-fab__dial, .cs-fab__dial--static { flex-direction: row; }
 .cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }
 .cs-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; }
-.cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--cs-accent-tint); color: var(--cs-color-text-accent); }
+.cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); color: var(--cs-color-text-accent); }
 .cs-result--success .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-success) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-success-text); }
 .cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger-text); }
 .cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning-text); }
@@ -199,7 +206,7 @@
 .cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }
 .cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: 468px; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); box-sizing: border-box; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; 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-md); padding: 10px; }
 .cs-navmenu__card { min-inline-size: 0; overflow-wrap: anywhere; display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
-.cs-navmenu__card:hover { background: var(--cs-accent-tint); }
+.cs-navmenu__card:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
 .cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
 .cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }
 .cs-carousel { display: grid; gap: 10px; }
@@ -215,7 +222,7 @@
 .cs-carousel__dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
 .cs-carousel__dots button { inline-size: 24px; block-size: 24px; flex: 0 0 24px; border-radius: 999px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }
 .cs-carousel__dots button::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 9px; block-size: 9px; border-radius: inherit; background: var(--cs-color-border-default); pointer-events: none; }
-.cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-accent); }
+.cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-color-text-accent); }
 @media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }
 .cs-comment { display: flex; gap: 10px; }
 .cs-comment__main { flex: 1; min-inline-size: 0; }
@@ -242,7 +249,7 @@
 .cs-formfield__label em { color: var(--cs-color-semantic-danger-text); font-style: normal; }
 .cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
 .cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger-text); font-weight: 600; }
-.cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }
+.cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select, .cs-formfield.is-invalid input, .cs-formfield.is-invalid textarea, .cs-formfield.is-invalid select, .cs-formfield input[aria-invalid="true"], .cs-formfield textarea[aria-invalid="true"], .cs-formfield select[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }
 .cs-tree ul { list-style: none; margin: 0; padding: 0; }
 .cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }
@@ -257,6 +264,7 @@
 /* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
 .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
 .cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; 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: 8px 12px; cursor: pointer; box-sizing: border-box; }
+.cs-treeselect.is-invalid .cs-treeselect__field, .cs-cascader.is-invalid .cs-treeselect__field, .is-invalid .cs-treeselect__field, .cs-treeselect__field.is-invalid, .cs-treeselect__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 .cs-treeselect__field: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-treeselect__field .ph { color: var(--cs-color-text-muted); }
 .cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; 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: 8px; min-inline-size: 100%; }
@@ -303,7 +311,7 @@
 .cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
 .cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }
 .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:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
 .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: 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; }
@@ -312,7 +320,7 @@
 .cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }
 .cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }
-.cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-accent); }
+.cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-color-text-accent); }
 @media (prefers-reduced-motion: reduce) { .cs-dock__item { transition: none; } }
 
 /* ---- v3 Batch 7b (Jul 2026): DataGrid · TreeTable · Sortable ---- */

package/base/data.css

@@ -23,6 +23,7 @@
 .cs-stat { display: grid; gap: 3px; }
 .cs-stat__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
 .cs-stat__value { font-size: var(--cs-font-size-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--cs-letter-spacing-tight); font-variant-numeric: tabular-nums; }
+.cs-stat__value:lang(vi) { line-height: 1.22; }
 .cs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cs-font-size-sm); font-weight: 700; }
 .cs-stat__delta--up { color: var(--cs-color-semantic-success-text); }
 .cs-stat__delta--down { color: var(--cs-color-semantic-danger-text); }

package/base/feedback.css

@@ -2,7 +2,7 @@
 
 /* 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.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--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
 .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); }
@@ -56,9 +56,9 @@
 
 /* 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-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); }
+.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
+.cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
+.cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); box-shadow: none; }
 
 /* Skeleton */
 .cs-skeleton { display: block; border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-color-surface-raised) 25%, color-mix(in oklab, var(--cs-color-surface-raised) 55%, var(--cs-color-surface-panel)) 37%, var(--cs-color-surface-raised) 63%); background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite; }

package/base/glass.css

@@ -11,7 +11,7 @@
 :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, color-mix(in oklab, var(--cs-color-brand-umber, #45210e) 45%, #050403) 58%, transparent);
+  --_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) 25%, #050403) 68%, transparent); /* light: umber-led veil · dark: near-black veil so modals dim dark surfaces (v2.4.0 audit D2) */
   --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

@@ -16,7 +16,7 @@
 .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-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--done:not(:last-child)::after { background: var(--cs-color-text-accent); }
 .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,7 +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; }
+:is(.cs-display, .cs-display--fluid):lang(vi) { line-height: 1.22; } /* element's own language: EN display inside a VI page keeps 1.15 */
 .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": "9b086742b366b68bb6204a620127bfce931749b56a0291dcf216679fb2296204",
+    "_ds_manifest.json": "8f7b007bfb71572e3846ba9540fce7f104ea146a476100723c62c4b7a42e8a0e",
     "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.1",
+  "baselineVersion": "2.4.0",
   "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": "9b086742b366b68bb6204a620127bfce931749b56a0291dcf216679fb2296204",
+    "_ds_manifest.json": "8f7b007bfb71572e3846ba9540fce7f104ea146a476100723c62c4b7a42e8a0e",
     "components/_i18n/i18n.js": "ea69f4f438162cf0e9770d529ec3b9f1107183885c71aa83f2ceff3763a34d2f",
     "components/_i18n/strings.js": "ffedd19ed9eacd22223e1387ab7eedca5cb385182d9a4ada469ef2711a0bae73",
     "components/_utils/cx.js": "ad6a747ea116bb2521a5cfa094580d2259d841ac9965d10310e83e8e839bab42",