@cyberskill/design 2.4.0 → 2.6.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",
@@ -5931,102 +5931,6 @@
       "important": false,
       "declarationOrder": 1073,
       "sourceLine": 22
-    },
-    {
-      "name": "--cs-color-border-default",
-      "value": "#9a8060",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"light\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  [data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  :root:where(:not([data-cs-contrast=\"standard\"]))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1074,
-      "sourceLine": 144
-    },
-    {
-      "name": "--cs-color-text-muted",
-      "value": "#45210e",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"light\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  [data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *)),\n  :root:where(:not([data-cs-contrast=\"standard\"]))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1075,
-      "sourceLine": 144
-    },
-    {
-      "name": "--cs-color-border-default",
-      "value": "#7a6450",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"dark\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1076,
-      "sourceLine": 145
-    },
-    {
-      "name": "--cs-color-text-muted",
-      "value": "#f5ead9",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"dark\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1077,
-      "sourceLine": 145
-    },
-    {
-      "name": "--cs-color-border-default",
-      "value": "#7a6450",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-color-scheme: dark) and (prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1078,
-      "sourceLine": 150
-    },
-    {
-      "name": "--cs-color-text-muted",
-      "value": "#f5ead9",
-      "kind": "color",
-      "definedIn": "base/a11y.css",
-      "scope": "[data-theme=\"system\"]:where(:not([data-cs-contrast=\"standard\"], [data-cs-contrast=\"standard\"] *))",
-      "conditions": [
-        {
-          "name": "media",
-          "params": "(prefers-color-scheme: dark) and (prefers-contrast: more)"
-        }
-      ],
-      "important": false,
-      "declarationOrder": 1079,
-      "sourceLine": 150
     }
   ],
   "themes": [

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.6.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.6.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. */
@@ -138,17 +138,12 @@
  * warm hairline border and muted text (both are intentionally soft by default).
  * Only activates on user request; anchors (Umber/Ochre) and focus rings are
  * already high-contrast and untouched. ---- */
-@media (prefers-contrast: more) {
-  [data-theme="light"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)),
-  [data-theme="system"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)),
-  :root:where(:not([data-cs-contrast="standard"])) { --cs-color-border-default: #9a8060; --cs-color-text-muted: #45210e; }
-  [data-theme="dark"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)) { --cs-color-border-default: #7a6450; --cs-color-text-muted: #f5ead9; }
-}
-
-/* System dark gets stronger contrast only when the user requests it, just like explicit dark. */
-@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
-  [data-theme="system"]:where(:not([data-cs-contrast="standard"], [data-cs-contrast="standard"] *)) { --cs-color-border-default: #7a6450; --cs-color-text-muted: #f5ead9; }
-}
+/* The values live in tokens/elements.css: the scope resolver derives
+ * --cs-color-border-default / --cs-color-text-muted from the --_cs-standard /
+ * --_cs-high channel toggles, which flip to high under prefers-contrast: more
+ * (light #9a8060 / #45210e · dark #7a6450 / #f5ead9) unless a scope sets
+ * data-cs-contrast explicitly. The former contextual overrides here were
+ * already superseded by that resolver's higher specificity. */
 
 /* Forced colors removes authored backgrounds and shadows. State must survive
  * that substitution using real borders, system colors and knob position. */

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/ai/ai-conversation.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — AI-native — conversation</title>
 <meta name="description" content="AI-native — conversation: PromptInput, ChatMessage (Lumi), ConfidenceMeter" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 660px; align-items: start; }

package/components/ai/ai-lumi.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — AI-native — Lumi conversation</title>
 <meta name="description" content="AI-native — Lumi conversation: PromptSuggestions, TypingIndicator, CitationList" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 10px; }

package/components/ai/ai.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — AI-native — Disclosure & Review Gate</title>
 <meta name="description" content="AI-native — Disclosure & Review Gate: Explainable AI badge + human-in-the-loop approval" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .stack { display: grid; gap: 18px; max-width: 560px; }

package/components/brand/brand.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — LumiAvatar</title>
 <meta name="description" content="LumiAvatar: Golden-genie mascot avatar — sizes + ring" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .row { display: flex; align-items: center; gap: 24px; }

package/components/button/buttons.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Button</title>
 <meta name="description" content="Button: Variants, sizes, states — Umber primary, composite focus" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }

package/components/data/collections.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — Collections & content</title>
 <meta name="description" content="Collections & content: List, Item, DescriptionList, Timeline, Accordion, Collapsible, Kbd, CodeBlock" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }

package/components/data/data.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Data & layout</title>
 <meta name="description" content="Data & layout: Card, Stat, Avatar, Tooltip, Divider, ScrollArea, AspectRatio" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; max-width: 640px; align-items: start; }

package/components/datatable/datatable.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — DataTable</title>
 <meta name="description" content="DataTable: Caption, scoped headers, idle / loading / error / empty" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .wrap { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 6px 16px 10px; background: var(--cs-color-surface-panel); max-width: 640px; }

package/components/dialog/dialog.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Dialog</title>
 <meta name="description" content="Dialog: Modal overlay + panel with footer actions" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   /* Scope the fixed dialog layer to the preview frame so it renders inline in the card. */

package/components/feedback/feedback-2.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — Status & empty state</title>
 <meta name="description" content="Status & empty state: StatusIndicator, EmptyState" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; }

package/components/feedback/feedback.card.html

@@ -6,13 +6,13 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Feedback & status</title>
 <meta name="description" content="Feedback & status: Badge, Tag, Alert, Toast, Spinner, Progress, Skeleton" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .stack { display: grid; gap: 18px; max-width: 620px; }
   .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
   .lbl { width: 100%; font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); }
-  .frame { position: relative; height: 96px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); }
+  .frame { position: relative; flex: 1 1 100%; min-width: 0; height: 96px; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); }
   .frame .cs-toast-stack { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; }
 </style>
 <script src="../../_vendor/react/react.production.min.js"></script>

package/components/forms/forms-2.card.html

@@ -5,7 +5,7 @@
 <title>CyberSkill — Form controls II</title>
 <meta name="description" content="Form controls II: Search, NumberField, Slider, FileUpload, SegmentedControl" />
 <meta charset="utf-8" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .stack { display: grid; gap: 18px; max-width: 620px; }

package/components/forms/forms.card.html

@@ -6,7 +6,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>CyberSkill — Form controls</title>
 <meta name="description" content="Form controls: Select, NativeSelect, Checkbox, Radio, Switch, Textarea — brand accent" />
-<link rel="stylesheet" href="../../styles.css" />
+<link rel="stylesheet" href="../../dist/styles.css" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }
   .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; max-width: 640px; align-items: start; }