@cyberskill/design 2.0.0 → 2.1.0

package/_esm/cs.mjs

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

package/base/collections.css

@@ -84,14 +84,15 @@ div.cs-item.is-disabled { opacity: 1; }
   position: relative; background: var(--cs-code-bg); color: var(--cs-code-fg); border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-code-border);
 }
 .cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid var(--cs-code-border); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: var(--cs-code-muted); }
-.cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }
+.cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; min-block-size: 32px; padding-inline: 8px; border-radius: var(--cs-radius-sm); }
 .cs-code__copy:hover { color: var(--cs-color-brand-ochre); }
+.cs-code__copy:focus-visible { outline-color: var(--cs-code-fg); }
 .cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }
 .cs-code code { font-family: inherit; }
 
 /* EmptyState */
 .cs-empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; }
-.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 24%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); margin-block-end: 6px; }
+.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 24%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); margin-block-end: 6px; }
 .cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }
 .cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }
 .cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }

package/base/components.css

@@ -38,21 +38,21 @@
 
 .cs-button--secondary {
   background: var(--cs-color-surface-panel, #ffffff);
-  border-color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-brand-ochre));
-  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-brand-ochre));
+  border-color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-brand-ochre));
+  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-brand-ochre));
 }
 .cs-button--secondary:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
 
 .cs-button--tertiary {
   background: var(--cs-color-surface-raised, #fbf4e9);
   border-color: transparent;
-  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-text-primary));
+  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-text-primary));
 }
 .cs-button--tertiary:hover { filter: none; border-color: var(--cs-color-border-default, #e7d9c6); }
 
 .cs-button--ghost {
   background: transparent;
-  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-text-primary));
+  color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-text-primary));
 }
 .cs-button--ghost:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }
 
@@ -110,7 +110,7 @@
 }
 
 /* ---- TextField ---- */
-.cs-field { color: var(--cs-color-text-primary, #45210e); display: grid; gap: 0.375rem; }
+.cs-field { align-content: start; color: var(--cs-color-text-primary, #45210e); display: grid; gap: 0.375rem; }
 .cs-field__label { font-weight: 700; }
 .cs-field__description { color: var(--cs-color-text-muted, #3f2d21); font-size: 0.875rem; }
 .cs-field__control {
@@ -205,12 +205,13 @@
 .cs-ai-disclosure__badge {
   background: var(--cs-color-semantic-info, #1d4ed8); border: 0; border-radius: 999px;
   color: var(--cs-color-semantic-info-fg, #ffffff); font: inherit; font-size: 0.875rem; font-weight: 700;
-  padding: 0.25rem 0.625rem; cursor: pointer;
+  min-block-size: 32px; padding: 0.25rem 0.75rem; cursor: pointer;
 }
 .cs-ai-disclosure__panel {
   background: var(--cs-color-surface-panel, #ffffff);
+  color: var(--cs-color-text-primary, #45210e);
   border: 1px solid rgba(69, 33, 14, 0.18); border-radius: var(--cs-radius-md, 8px);
-  box-shadow: var(--cs-shadow-md, 0 12px 30px rgba(31, 19, 11, 0.18));
+  box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(31, 19, 11, 0.08));
   display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
   min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);
 }

package/base/controls.css

@@ -29,7 +29,7 @@
 .cs-stepper input::-webkit-outer-spin-button, .cs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
 
 /* Slider (native range) */
-.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); block-size: 22px; cursor: pointer; }
+.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); block-size: 22px; cursor: pointer; }
 .cs-slider:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 4px; border-radius: var(--cs-radius-full); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 
 /* FileUpload / dropzone */
@@ -42,7 +42,7 @@
 /* SegmentedControl (matches Status Hub lens switcher) */
 .cs-segmented { display: inline-flex; gap: 4px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }
 .cs-segmented button { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
-.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse)) var(--_cs-dark, var(--cs-color-brand-umber)); }
+.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse))var(--_cs-dark, var(--cs-color-brand-umber)); }
 
 /* StatusIndicator */
 .cs-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; color: var(--cs-color-text-primary); }
@@ -61,7 +61,7 @@
 /* ---- v3 Batch 2 inputs (Jul 2026): Toggle · Rating · InputOTP · ButtonGroup ---- */
 .cs-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 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 14px; min-block-size: 40px; cursor: pointer; transition: background var(--cs-duration-fast, 120ms), border-color var(--cs-duration-fast, 120ms); }
 .cs-toggle:hover { background: var(--cs-color-surface-raised); }
-.cs-toggle[aria-pressed="true"] { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); border-color: var(--cs-accent); color: var(--cs-color-text-primary); }
+.cs-toggle[aria-pressed="true"] { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); border-color: var(--cs-accent); color: var(--cs-color-text-primary); }
 .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; }
@@ -71,7 +71,7 @@
 .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 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; }
+.cs-otp input:disabled { opacity: .5; cursor: not-allowed; background: var(--cs-color-surface-raised); }
 .cs-btngroup { display: inline-flex; }
 .cs-btngroup .cs-button { border-radius: 0; }
 .cs-btngroup .cs-button:first-child { border-start-start-radius: var(--cs-component-button-radius, 8px); border-end-start-radius: var(--cs-component-button-radius, 8px); }
@@ -86,7 +86,7 @@
 .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; }
 .cs-combobox__list { padding: 0; margin: 0; list-style: none; }
 .cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: var(--cs-font-size-sm); }
-.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__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:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
@@ -131,7 +131,7 @@
 .cs-hovercard { position: relative; display: inline-block; }
 .cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; 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: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }
 .cs-popconfirm { position: relative; display: inline-block; }
-.cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; 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: 12px 14px; }
+.cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; 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-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }
 .cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }
 .cs-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end; }
 .cs-ctxmenu-zone { position: relative; }
@@ -144,7 +144,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-accent-strong); }
+.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--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); }
@@ -168,7 +168,7 @@
 .cs-anchor__title { font: 700 10.5px/1.4 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-text-muted); padding: 2px 12px 6px; }
 .cs-anchor__item { display: block; padding: 5px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }
 .cs-anchor__item:hover { color: var(--cs-color-text-primary); }
-.cs-anchor__item.is-active { color: var(--_cs-light, var(--cs-accent-strong)) var(--_cs-dark, var(--cs-accent-bright)); border-inline-start-color: var(--cs-accent); font-weight: 600; }
+.cs-anchor__item.is-active { color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent-bright)); border-inline-start-color: var(--cs-accent); font-weight: 600; }
 .cs-image { position: relative; display: inline-block; overflow: hidden; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); max-inline-size: 100%; }
 .cs-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
 .cs-image.is-loading { min-inline-size: 120px; min-block-size: 80px; animation: cs-img-shimmer 1.2s ease-in-out infinite alternate; }
@@ -196,7 +196,7 @@
 .cs-navmenu__wrap { position: relative; }
 .cs-navmenu__top { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; text-decoration: none; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 9px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .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); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }
+.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 b { font-size: var(--cs-font-size-sm); }
@@ -246,7 +246,7 @@
 .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); }
 .cs-tree__row:hover { background: var(--cs-color-surface-raised); }
-.cs-tree__row.is-selected { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }
+.cs-tree__row.is-selected { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }
 .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-color-text-primary); font-weight: 600; }
 .cs-tree__twist { inline-size: 20px; block-size: 28px; border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }
 .cs-tree__label { border: 0; background: none; color: var(--cs-color-text-primary); font: inherit; padding: 4px 6px; cursor: pointer; border-radius: var(--cs-radius-sm); }
@@ -264,7 +264,7 @@
 .cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }
 .cs-cascader__opt { display: flex; justify-content: space-between; gap: 8px; inline-size: 100%; border: 0; background: none; text-align: start; font: 500 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-cascader__opt:hover { background: var(--cs-color-surface-raised); }
-.cs-cascader__opt.on { 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-accent-strong)) var(--_cs-dark, var(--cs-accent-bright)); font-weight: 600; }
+.cs-cascader__opt.on { 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-accent-strong))var(--_cs-dark, var(--cs-accent-bright)); font-weight: 600; }
 .cs-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; min-inline-size: 0; }
 .cs-transfer__list { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); min-inline-size: 0; overflow-wrap: anywhere; }
 .cs-transfer__title { font: 700 12px var(--cs-font-family-ui); padding: 9px 12px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }
@@ -274,7 +274,7 @@
 .cs-mentions { position: relative; display: block; max-inline-size: 420px; }
 .cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; 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: 4px; }
 .cs-mentions__pop button { border: 0; background: none; text-align: start; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
-.cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { 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-color-text-primary); }
+.cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { 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-color-text-primary); }
 
 /* ---- v3 Batch 6c (Jul 2026): ColorPicker · Tour · QRCode ---- */
 .cs-colorpicker { position: relative; display: inline-block; }
@@ -305,7 +305,7 @@
 .cs-splitter__bar:hover { background: var(--cs-accent-tint); }
 .cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }
-.cs-hotkeys__card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }
+.cs-hotkeys__card { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }
 .cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
 .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); }
@@ -321,7 +321,7 @@
 .cs-datagrid__check { display: inline-flex; align-items: center; justify-content: center; }
 .cs-datagrid__selcol { inline-size: 36px; text-align: center; }
 .cs-datagrid__sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }
-.cs-datagrid tr.is-selected td { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }
+.cs-datagrid tr.is-selected td { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }
 .cs-treetable .cs-treetable__cell { display: inline-flex; align-items: center; gap: 2px; }
 .cs-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-inline-size: 380px; }
 .cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: grab; }

package/base/data.css

@@ -3,9 +3,9 @@
 /* Card */
 .cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }
 .cs-card--flat { box-shadow: none; }
-.cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), box-shadow var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
+.cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
 .cs-card--interactive:hover { border-color: var(--cs-color-brand-ochre); box-shadow: var(--cs-shadow-md); }
-.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); }
+.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }
 .cs-card--flat.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-card--interactive:active { transform: translateY(1px); }
 .cs-card__media { display: block; inline-size: 100%; }
@@ -20,7 +20,7 @@
 /* Stat */
 .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); }
+.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__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

@@ -33,7 +33,7 @@
 .cs-alert--danger .cs-alert__icon { color: var(--cs-color-semantic-danger-text); }
 
 /* Toast */
-.cs-toast-stack { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--cs-depth-toast); display: grid; gap: 10px; max-inline-size: min(380px, calc(100vw - 40px)); }
+.cs-toast-stack { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--cs-depth-toast); display: grid; gap: 10px; max-inline-size: min(380px, calc(100% - 40px)); }
 .cs-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-md); color: var(--cs-color-text-primary); animation: cs-toast-in var(--cs-duration-base) var(--cs-ease-entrance); }
 .cs-toast__icon { color: var(--cs-color-text-accent); }
 .cs-toast--default { border-inline-start: 4px solid var(--cs-color-semantic-info); }
@@ -49,7 +49,7 @@
 @media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }
 
 /* Spinner */
-.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent)) var(--_cs-dark, color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); animation: cs-spin 0.62s linear infinite; }
+.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); animation: cs-spin 0.62s linear infinite; }
 @media (prefers-reduced-motion: reduce) { .cs-spinner { animation: none; } }
 
 /* Progress bar */

package/base/forms.css

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

package/base/glass.css

@@ -77,7 +77,7 @@
   .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
   .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
     -webkit-backdrop-filter: none; backdrop-filter: none;
-    background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default, #e7d9c6);
+    background: var(--cs-color-surface-panel, #fff); color: var(--cs-color-text-primary, #45210e); border: 1px solid var(--cs-color-border-default, #e7d9c6);
   }
   .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before { display: none; }
 }
@@ -97,7 +97,7 @@
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
   .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
-  .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel { background: var(--cs-color-surface-panel, #fff); }
+  .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel { background: var(--cs-color-surface-panel, #fff); color: var(--cs-color-text-primary, #45210e); }
 }
 
 /* ---- 6. Brand aurora wash — the signature warm-gold-on-umber hero glow.

package/base/interaction.css

@@ -8,7 +8,6 @@
   transition: background var(--cs-duration-fast) var(--cs-ease-standard),
     border-color var(--cs-duration-fast) var(--cs-ease-standard),
     filter var(--cs-duration-fast) var(--cs-ease-standard),
-    box-shadow var(--cs-duration-base) var(--cs-ease-standard),
     transform var(--cs-duration-fast) var(--cs-ease-standard);
 }
 .cs-button--primary:hover:not(.is-disabled),
@@ -35,6 +34,12 @@
 .cs-switch input:focus-visible + .cs-switch__track {
   box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
 }
+.cs-button:focus-visible {
+  transition: background var(--cs-duration-fast) var(--cs-ease-standard),
+    border-color var(--cs-duration-fast) var(--cs-ease-standard),
+    filter var(--cs-duration-fast) var(--cs-ease-standard),
+    transform var(--cs-duration-fast) var(--cs-ease-standard);
+}
 .cs-cmdk__search:focus-within {
   box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), inset 0 0 0 4px var(--cs-color-accent-ochre);
 }

package/base/navigation.css

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

package/base/reset.css

@@ -2,11 +2,13 @@
 *, *::before, *::after { box-sizing: border-box; }
 html {
   -webkit-text-size-adjust: 100%;
+  overflow-x: clip;
   scroll-padding-block-start: var(--cs-scroll-padding-block-start, var(--cs-space-4, 16px));
   scroll-padding-block-end: var(--cs-scroll-padding-block-end, var(--cs-space-4, 16px));
 }
 body {
   margin: 0;
+  overflow-x: clip;
   background: var(--cs-color-surface-page, #fffdf8);
   color: var(--cs-color-text-primary, #45210e);
   font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);

package/base/shell.css

@@ -6,8 +6,8 @@
 .cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }
 .cs-nav-item:hover { background: var(--cs-color-surface-raised); }
 .cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-nav-item.is-active { background: color-mix(in oklab, var(--cs-color-brand-ochre) 22%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); }
-.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); }
+.cs-nav-item.is-active { background: color-mix(in oklab, var(--cs-color-brand-ochre) 22%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
+.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-brand-umber))var(--_cs-dark, var(--cs-color-brand-ochre)); }
 .cs-nav-item__trail { margin-inline-start: auto; }
 
 /* Steps */
@@ -23,7 +23,7 @@
 
 /* Popover */
 .cs-popover { position: relative; display: inline-block; }
-.cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; 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: 14px; z-index: var(--cs-depth-dropdown, 60); }
+.cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; 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-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-dropdown, 60); }
 .cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }
 
 /* Drawer */
@@ -36,8 +36,8 @@
 .cs-drawer__close:hover { color: var(--cs-color-semantic-danger-text); }
 .cs-drawer__body { flex: 1; overflow: auto; padding: 20px; }
 .cs-drawer__footer { padding: 14px 20px; border-block-start: 1px solid var(--cs-color-border-default); display: flex; gap: 10px; justify-content: flex-end; }
-@keyframes cs-drawer-in { from { margin-inline-end: calc(-1 * min(480px, 100vw)); } to { margin-inline-end: 0; } }
-@keyframes cs-drawer-in-left { from { margin-inline-start: calc(-1 * min(480px, 100vw)); } to { margin-inline-start: 0; } }
+@keyframes cs-drawer-in { from { margin-inline-end: calc(-1 * min(480px, 100%)); } to { margin-inline-end: 0; } }
+@keyframes cs-drawer-in-left { from { margin-inline-start: calc(-1 * min(480px, 100%)); } to { margin-inline-start: 0; } }
 @media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }
 
 /* CommandPalette */

package/base/typography.css

@@ -1,10 +1,10 @@
 /* CyberSkill — typographic role utilities. Each bundles size + line-height +
  * weight + tracking so consumers write intent (.cs-h1) not magic numbers.
  * Built on the semantic aliases in tokens/typography.css. */
-.cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }
-.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; }
-.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; }
-.cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); }
+.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-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-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
+.cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); overflow-wrap: break-word; }
 .cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }
 .cs-body-lg { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body-lg); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }
 .cs-body { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }

package/components/_i18n/strings.js

@@ -177,7 +177,7 @@ export const strings = {
   },
   Result: {
     en: { success: "Done", error: "We couldn't complete that", warning: "Please check", info: "Here's what happened" },
-    vi: { success: "Hoàn tất", error: "Chúng tôi chưa hoàn tất được", warning: "Vui lòng kiểm tra", info: "Đây là điều đã xảy ra" },
+    vi: { success: "Hoàn tất", error: "Chưa thực hiện được thao tác này", warning: "Vui lòng kiểm tra", info: "Thông tin chi tiết" },
   },
   InlineEdit: {
     en: { edit: "Edit", empty: "Add text" },
@@ -218,11 +218,11 @@ export const strings = {
   },
   PromptInput: {
     en: { placeholder: "Type your wish…", send: "Send", hint: "Lumi replies, then hands clear wishes to a human." },
-    vi: { placeholder: "Nhập điều ước của bạn…", send: "Gửi", hint: "Lumi trả lời, rồi chuyển điều ước rõ ràng cho con người." },
+    vi: { placeholder: "Nhập điều ước của bạn…", send: "Gửi", hint: "Lumi phản hồi trước, rồi chuyển điều ước rõ ràng đến đội ngũ." },
   },
   HumanReviewGate: {
     en: { aria: "Human review gate", risk: "review required", approve: "Approve", reject: "Reject", reviewer: "Reviewer" },
-    vi: { aria: "Cổng kiểm duyệt của con người", risk: "cần xem xét", approve: "Phê duyệt", reject: "Từ chối", reviewer: "Người duyệt" },
+    vi: { aria: "Bước duyệt của người phụ trách", risk: "cần xem xét", approve: "Phê duyệt", reject: "Từ chối", reviewer: "Người duyệt" },
   },
 
   Switch: {

package/components/_utils/open-change.js

@@ -0,0 +1,18 @@
+/** Shared open-state notification. `onOpenChange` is the common contract.
+ * `onClose` remains a supported zero-argument alias for closing.
+ * `onDismiss` remains the click-handler alias used by Alert. */
+
+export function hasDismiss(onOpenChange, onClose, onDismiss) {
+  return typeof onOpenChange === "function" || typeof onClose === "function" || typeof onDismiss === "function";
+}
+
+export function notifyClosed(onOpenChange, onClose) {
+  onOpenChange?.(false);
+  onClose?.();
+}
+
+export function notifyDismiss(event, onOpenChange, onClose, onDismiss) {
+  onOpenChange?.(false);
+  onClose?.();
+  onDismiss?.(event);
+}

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

@@ -4,6 +4,8 @@
 <head>
 <meta charset="utf-8" />
 <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" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }

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

@@ -2,6 +2,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+<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" />
 <style>

package/components/ai/ai.card.html

@@ -4,6 +4,8 @@
 <head>
 <meta charset="utf-8" />
 <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" />
 <style>
   body { margin: 0; background: var(--cs-color-surface-page); padding: 22px 24px; }