@cyberskill/design 1.1.1 → 1.3.8

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; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
-.cs-badge--solid { border-color: transparent; color: #fff; 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); }
 .cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
 .cs-badge--success { background: var(--cs-color-semantic-success); color: var(--cs-color-text-inverse); border-color: transparent; }
 .cs-badge--danger { background: var(--cs-color-semantic-danger); color: var(--cs-color-text-inverse); border-color: transparent; }
@@ -16,10 +16,13 @@
 .cs-tag__close:hover { background: color-mix(in oklab, var(--cs-color-brand-umber) 12%, transparent); }
 
 /* Alert / Banner */
-.cs-alert { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); }
+.cs-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); align-items: start; }
 .cs-alert__icon { color: var(--cs-color-text-accent); display: grid; place-items: start; padding-block-start: 1px; }
 .cs-alert__title { font-weight: 700; margin: 0 0 2px; }
 .cs-alert__body { margin: 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
+.cs-alert__dismiss { appearance: none; border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; font-size: var(--cs-font-size-md, 1.125rem); line-height: 1; padding: 0 2px; border-radius: var(--cs-radius-sm); }
+.cs-alert__dismiss:hover { color: var(--cs-color-text-primary); }
+.cs-alert__dismiss:focus-visible { outline: 2px solid var(--cs-color-focus-ring, var(--cs-accent-bright)); outline-offset: 2px; }
 .cs-alert--info { border-inline-start: 4px solid var(--cs-color-semantic-info); }
 .cs-alert--info .cs-alert__icon { color: var(--cs-color-semantic-info); }
 .cs-alert--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
@@ -33,7 +36,11 @@
 .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 { 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); }
+.cs-toast--default .cs-toast__icon { color: var(--cs-color-semantic-info); }
+.cs-toast--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }
 .cs-toast--success .cs-toast__icon { color: var(--cs-color-semantic-success); }
+.cs-toast--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }
 .cs-toast--danger .cs-toast__icon { color: var(--cs-color-semantic-danger); }
 .cs-toast__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
 .cs-toast__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 2px; }
@@ -58,3 +65,8 @@
 .cs-skeleton--circle { border-radius: 50%; }
 @keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
 @media (prefers-reduced-motion: reduce) { .cs-skeleton { animation: none; } }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-spinner { border-color: color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent); border-top-color: var(--cs-color-brand-ochre); }
+}

package/base/forms.css

@@ -5,13 +5,13 @@
 .cs-select { position: relative; display: block; }
 .cs-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
 .cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-select select.cs-field__control:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
+.cs-select select.cs-field__control:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
 
 /* NativeSelect — lean progressive-enhancement companion beside Select */
 .cs-native-select { position: relative; display: block; }
 .cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
 .cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-native-select select.cs-field__control:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
+.cs-native-select select.cs-field__control:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
 .cs-native-select--sm select.cs-field__control { min-block-size: 36px; padding-block: 6px; font-size: var(--cs-font-size-sm); }
 .cs-native-select--md select.cs-field__control { min-block-size: 44px; }
 
@@ -29,12 +29,18 @@
 .cs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
 .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: #fff; box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
+.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-color-brand-umber); }
 [data-theme="dark"] .cs-switch input:checked + .cs-switch__track { background: 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: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
+.cs-switch input:focus-visible + .cs-switch__track { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 2px; }
 .cs-switch.is-disabled { opacity: 0.55; cursor: not-allowed; }
 
 /* Textarea reuses .cs-field; give it sane sizing */
 textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: var(--cs-font-lineHeight-body); }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-check input, [data-theme="system"] .cs-radio input { accent-color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-switch input:checked + .cs-switch__track { background: var(--cs-color-brand-ochre); }
+}

package/base/glass.css

@@ -114,6 +114,12 @@
     radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-color-brand-ochre) 46%, transparent), transparent 55%),
     radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, #ffcf5c 32%, transparent), transparent 60%),
     radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
-  color: #fff;
+  color: #fff; /* on-aurora wash */
 }
 .cs-aurora--photo { background-size: cover; background-position: center; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  /* ---- 5. Dark-mode border tuning ---- */
+[data-theme="system"] { --cs-color-border-default: #4a3a2c; }
+}

package/base/interaction.css

@@ -22,15 +22,19 @@
   box-shadow: var(--cs-shadow-xs);
 }
 
-/* ---- 2. Soft ochre focus glow — layered on the immutable 3px ring ---- */
+/* ---- 2. Focus halo — ochre brand ring outside the high-contrast contour (FIND-032) ---- */
 .cs-button:focus-visible,
 .cs-field__control:focus-visible,
 .cs-select select.cs-field__control:focus-visible,
 .cs-native-select select.cs-field__control:focus-visible,
 .cs-search:focus-within,
+.cs-stepper:focus-within,
+.cs-prompt:focus-within,
+.cs-cmdk__search:focus-within,
+.cs-terminal:focus-within,
 .cs-ai-disclosure__badge:focus-visible,
 .cs-switch input:focus-visible + .cs-switch__track {
-  box-shadow: 0 0 0 5px color-mix(in oklab, var(--cs-color-accent-ochre) 26%, transparent);
+  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
 }
 
 /* ---- 3. Entrance motion utilities (opt-in) + a gentle Dialog entrance ---- */

package/base/navigation.css

@@ -6,7 +6,7 @@
 .cs-tab:hover { color: var(--cs-color-text-primary); }
 .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-umber); border-block-end-color: var(--cs-color-brand-ochre); }
 [data-theme="dark"] .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-ochre); }
-.cs-tab:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: -3px; border-radius: var(--cs-radius-sm); }
+.cs-tab:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -3px; border-radius: var(--cs-radius-sm); }
 .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; }
 
 /* Breadcrumb */
@@ -28,12 +28,18 @@
 
 /* Menu / Dropdown */
 .cs-menu { position: relative; display: inline-block; }
-.cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; 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; z-index: var(--cs-depth-toast); display: grid; gap: 2px; }
+.cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; 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; z-index: var(--cs-depth-dropdown, 60); display: grid; gap: 2px; }
 .cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }
 .cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }
 .cs-menu__item:hover { background: var(--cs-color-surface-raised); }
-.cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: 3px solid var(--cs-color-accent-ochre); outline-offset: -3px; }
+.cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: -3px; }
 .cs-menu__item--danger { color: var(--cs-color-semantic-danger); }
 .cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }
 .cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }
 .cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-tab[aria-selected="true"] { color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-pagination button[aria-current="page"] { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
+}

package/base/reset.css

@@ -14,4 +14,10 @@ body {
 :where(h1, h2, h3, h4, h5, h6) { line-height: var(--cs-font-lineHeight-heading, 1.35); text-wrap: balance; }
 :where(p) { text-wrap: pretty; }
 :where(code, pre, kbd, samp) { font-family: var(--cs-font-family-mono, ui-monospace, monospace); }
-:where(:focus-visible) { outline: 2px solid var(--cs-color-accent-ochre, #f4ba17); outline-offset: 2px; }
+/* Composite focus indicator (FIND-032): high-contrast text-primary contour (≥3:1
+ * on light + dark surfaces) + ochre outer brand halo. Ochre alone is ~1.7:1 on cream. */
+:where(:focus-visible) {
+  outline: 2px solid var(--cs-color-text-primary, #45210e);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre, #f4ba17);
+}

package/base/responsive.css

@@ -1,4 +1,5 @@
 /* CyberSkill — global responsive layer (loaded LAST so it can adapt any surface).
+ * FIND-007: width stops ⊆ token breakpoints (incl. justified `phone` 360).
  * The system is desktop-first but every artifact must read on tablet and phone.
  * Strategy: (1) media never overflows; (2) the print-doc archetype (cs-desk /
  * cs-sheet) relaxes its generous desktop padding on small screens; (3) shared class
@@ -13,28 +14,38 @@
 /* 1 — Media and embeds never blow out a column */
 img, svg, video, canvas { max-width: 100%; height: auto; }
 
+/* G1 / CDS-RESP-001 — container-query migration (compatibility layer).
+ * Opt-in hosts mark a sizing context with `.cs-cq`. Children can use
+ * `@container (max-width: …)` without waiting for a full layout rewrite.
+ * Media queries above remain the default until packs generate CQ variants. */
+.cs-cq { container-type: inline-size; container-name: cs; }
+@container cs (max-width: 640px) {
+  .cs-cq-stack { display: flex !important; flex-direction: column !important; }
+  .cs-cq-stack > * { min-inline-size: 0; max-inline-size: 100%; }
+}
+
 /* 2 — Print-doc archetype: shrink desk + sheet chrome as the screen narrows.
  * cs-desk is the grey backing; cs-sheet is the white page. */
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 768px) {
   .cs-desk { padding: 24px 10px !important; }
   .cs-sheet { padding: 40px 40px !important; }
 }
-@media screen and (max-width: 620px) {
+@media screen and (max-width: 640px) {
   .cs-desk { padding: 12px 6px !important; }
   .cs-sheet { padding: 26px 20px !important; border-radius: 8px !important; }
 }
-@media screen and (max-width: 460px) {
+@media screen and (max-width: 360px) {
   .cs-sheet { padding: 20px 15px !important; }
 }
 
 /* 3 — Wide tables inside sheets/panels scroll horizontally instead of clipping */
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
   .cs-sheet table, .cs-table-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
 }
 
 /* 4 — App shell: the sidebar + main is a fixed two-column inline grid on desktop.
  * Collapse it to a stacked layout; the sidebar becomes a horizontal nav strip. */
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
   .cs-sidebar { position: static !important; width: auto !important; height: auto !important;
     display: flex !important; flex-wrap: wrap !important; gap: 4px 10px !important;
     align-items: center !important; border-inline-end: 0 !important;
@@ -49,12 +60,12 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
  * even on a laptop (≈1280), which otherwise overflowed the document. The legible
  * min-width floor for the inner track only applies once the window itself is narrow. */
 .cs-canvas-desk { overflow-x: auto; -webkit-overflow-scrolling: touch; }
-@media screen and (max-width: 1120px) {
+@media screen and (max-width: 1280px) {
   .cs-canvas-desk > * { min-width: 960px; }
 }
 
 /* 6 — Very wide section padding eases in on phones */
-@media screen and (max-width: 620px) {
+@media screen and (max-width: 640px) {
   section[style*="padding: 84px"], section[style*="padding: 80px"],
   section[style*="padding: 72px"] { padding-inline: 22px !important; }
 }
@@ -66,13 +77,13 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
  * Tablet: 3+ cols → 2. Phone: everything → 1 (declared after, so it wins at the
  * narrow width). Print is unaffected — the @page is wide, so these screen
  * breakpoints never fire during print/export. */
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 768px) {
   [style*="grid-template-columns: repeat(3"],
   [style*="grid-template-columns: repeat(4"],
   [style*="grid-template-columns: repeat(5"],
   [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }
 }
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 640px) {
   [style*="grid-template-columns: repeat(2"],
   [style*="grid-template-columns: repeat(3"],
   [style*="grid-template-columns: repeat(4"],
@@ -93,7 +104,7 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
 /* 8 — Touch targets reach the 44px minimum on phones/tablets (the system's a11y
  * floor). Base sidebar nav rows (39px) and the topbar search input (26px) are
  * fine for mouse on desktop but too small to tap; grow them on small screens. */
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
   .cs-sidebar .cs-nav-item, .cs-nav-item { min-height: 44px; }
   .cs-search { display: flex; align-items: center; min-height: 44px; }
   .cs-search input, .cs-search select { min-height: 44px; }
@@ -108,7 +119,7 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
  * being propped open. It only breaks a token when it would otherwise overflow, so
  * ordinary prose is untouched. Scoped to the print-doc wrapper; the print @page is
  * wide, so this screen breakpoint never fires during export. */
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
   .cs-desk, .cs-sheet { overflow-wrap: anywhere; }
 }
 
@@ -120,9 +131,24 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
  * attribute selector reliably overrides an inline grid-template-columns (a class
  * selector does not). Then let the app-region grids shrink (min-width:0) and the data
  * table scroll inside its panel instead of forcing the page wide. */
-@media screen and (max-width: 760px) {
+@media screen and (max-width: 768px) {
   [style*="grid-template-columns: 248px 1fr"] { grid-template-columns: 1fr !important; }
   main { min-width: 0; }
   main > * { min-width: 0; }
   .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 }
+
+/* ---- 320 reflow (UX-003 / WCAG 1.4.10) ---- */
+@media (max-width: 360px) {
+  .cs-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
+  .cs-pagination { flex-wrap: wrap; max-inline-size: 100%; }
+  .cs-pagination button { min-inline-size: 32px; }
+  .cs-otp { gap: 4px; }
+  .cs-otp__box { inline-size: 36px; block-size: 40px; font-size: var(--cs-font-size-base); }
+  .cs-dl { grid-template-columns: 1fr; }
+  .cs-field { min-inline-size: 0; }
+  .cs-field__control { min-inline-size: 0; }
+  .card, button.card, article.case { min-width: 0 !important; }
+  [style*="minmax(320px"] { grid-template-columns: 1fr !important; }
+  [style*="grid-template-columns: 248px 1fr"] { grid-template-columns: 1fr !important; }
+}

package/base/shell.css

@@ -16,8 +16,8 @@
 .cs-steps { display: flex; gap: 0; }
 .cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }
 .cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
-.cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: 13px; background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
-.cs-step--done .cs-step__marker { background: var(--cs-color-brand-umber); color: #fff; border-color: transparent; }
+.cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
+.cs-step--done .cs-step__marker { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-color: transparent; }
 .cs-step--done:not(:last-child)::after { background: var(--cs-color-brand-umber); }
 .cs-step--active .cs-step__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-color-brand-ochre) 28%, transparent); }
 .cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
@@ -25,7 +25,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-toast); }
+.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--end { inset-inline-start: auto; inset-inline-end: 0; }
 
 /* Drawer */
@@ -48,8 +48,20 @@
 .cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }
 .cs-cmdk__search svg { color: var(--cs-color-text-muted); }
 .cs-cmdk__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-md); color: var(--cs-color-text-primary); }
+/* Wrapper ring — search input clears outline; focus-within restores ≥3:1 indicator (FIND-038). */
+.cs-cmdk__search:focus-within {
+  outline: 2px solid var(--cs-color-text-primary);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 2px var(--cs-color-accent-ochre);
+}
 .cs-cmdk__list { max-block-size: 340px; overflow: auto; padding: 8px; display: grid; gap: 2px; }
 .cs-cmdk__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 8px 10px 2px; }
 .cs-cmdk__item { display: flex; align-items: center; gap: 11px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 10px 12px; border-radius: var(--cs-radius-md); cursor: pointer; }
 .cs-cmdk__item:hover, .cs-cmdk__item[aria-selected="true"] { background: var(--cs-color-surface-raised); }
 .cs-cmdk__item .cs-kbd { margin-inline-start: auto; }
+
+/* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
+@media (prefers-color-scheme: dark) {
+  [data-theme="system"] .cs-nav-item.is-active { color: var(--cs-color-brand-ochre); }
+  [data-theme="system"] .cs-nav-item.is-active .cs-nav-item__icon { color: var(--cs-color-brand-ochre); }
+}

package/components/_i18n/i18n.js

@@ -31,7 +31,19 @@ export function makeT(component, lang) { return (key) => tr(component, key, lang
 export function useLang(propLang) {
   const ref = React.useRef(null);
   const [lang, setLang] = React.useState(() => resolveLang(propLang, null));
-  React.useLayoutEffect(() => { setLang(resolveLang(propLang, ref.current)); }, [propLang]);
+  React.useLayoutEffect(() => {
+    const el = ref.current;
+    setLang(resolveLang(propLang, el));
+    if (!el || propLang) return undefined;
+    // Re-resolve when an ancestor [lang] changes (template Language axis / __dcSetProps).
+    const obs = new MutationObserver(() => setLang(resolveLang(propLang, el)));
+    let node = el.parentElement;
+    while (node) {
+      obs.observe(node, { attributes: true, attributeFilter: ["lang"] });
+      node = node.parentElement;
+    }
+    return () => obs.disconnect();
+  }, [propLang]);
   return [ref, lang];
 }
 
@@ -49,8 +61,33 @@ export function formatDate(d, lang) {
 }
 export function monthName(i, lang) { return lang === "vi" ? VI_MONTHS[i] : new Date(2000, i, 1).toLocaleDateString("en-US", { month: "long" }); }
 export function formatNumber(n, lang) { if (n == null || isNaN(n)) return ""; return new Intl.NumberFormat(lang === "vi" ? "vi-VN" : "en-US").format(n); }
-/** VN currency = "1.234.567 ₫"; EN = "$1,234,567". */
-export function formatCurrency(n, lang) {
+
+/**
+ * Format a money amount. Currency is independent of display language when options are used.
+ *
+ * Call shapes (FIND-025):
+ * - Legacy: `formatCurrency(amount, "en"|"vi")` — preserves prior presentation
+ *   (EN→USD-style `$1,234,567`; VI→`1.234.567 ₫`).
+ * - Preferred: `formatCurrency(amount, { currency, locale?, lang? })` —
+ *   `Intl.NumberFormat(locale, { style: "currency", currency })`.
+ *   `locale` defaults from `lang` (`vi`→`vi-VN`, else `en-US`).
+ */
+export function formatCurrency(n, langOrOpts) {
   if (n == null || isNaN(n)) return "";
-  return lang === "vi" ? new Intl.NumberFormat("vi-VN").format(n) + "\u00a0₫" : "$" + new Intl.NumberFormat("en-US").format(n);
+  const opts = langOrOpts && typeof langOrOpts === "object" ? langOrOpts : null;
+  if (opts && opts.currency) {
+    let locale = opts.locale;
+    if (!locale) {
+      locale = opts.lang === "vi" ? "vi-VN" : "en-US";
+    }
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: String(opts.currency).toUpperCase(),
+      currencyDisplay: "symbol",
+    }).format(Number(n));
+  }
+  const lang = typeof langOrOpts === "string" ? langOrOpts : (opts && opts.lang) || "en";
+  return lang === "vi"
+    ? new Intl.NumberFormat("vi-VN").format(n) + "\u00a0₫"
+    : "$" + new Intl.NumberFormat("en-US").format(n);
 }

package/components/_i18n/strings.js

@@ -1,4 +1,4 @@
-/* CyberSkill — central bilingual string registry (v3 Batch 0/1).
+/* CyberSkill — central bilingual string registry (v3 Batch 0/1/2).
  * Every component with BUILT-IN UI text (text the consumer does NOT pass as a prop)
  * registers its strings here, EN + VI. _audit/bilingual-parity.html enforces:
  *   • each component has both `en` and `vi`
@@ -17,8 +17,8 @@ export const strings = {
     vi: { label: "Đường dẫn" },
   },
   CommandPalette: {
-    en: { placeholder: "Type a command or search…", empty: "No results found", aria: "Command palette", esc: "Esc" },
-    vi: { placeholder: "Nhập lệnh hoặc tìm kiếm…", empty: "Không tìm thấy kết quả", aria: "Bảng lệnh", esc: "Esc" },
+    en: { placeholder: "Type a command or search…", empty: "No results", aria: "Command palette", esc: "Esc" },
+    vi: { placeholder: "Nhập lệnh hoặc tìm kiếm…", empty: "Không có kết quả", aria: "Bảng lệnh", esc: "Esc" },
   },
   SearchField: {
     en: { placeholder: "Search…", clear: "Clear search" },
@@ -41,12 +41,22 @@ export const strings = {
     vi: { confirm: "Xác nhận", cancel: "Hủy" },
   },
   Drawer: {
-    en: { close: "Close", panel: "Panel" },
-    vi: { close: "Đóng", panel: "Bảng" },
+    en: { close: "Close", panel: "Side panel" },
+    vi: { close: "Đóng", panel: "Bảng bên" },
   },
   DataTable: {
-    en: { empty: "No records" },
-    vi: { empty: "Không có bản ghi" },
+    en: {
+      empty: "No results",
+      loading: "Loading table",
+      error: "We couldn't load this table",
+      errorHint: "Check your connection, then try again.",
+    },
+    vi: {
+      empty: "Không có kết quả",
+      loading: "Đang tải bảng",
+      error: "Không tải được bảng này",
+      errorHint: "Kiểm tra kết nối, rồi thử lại.",
+    },
   },
   ConfidenceMeter: {
     en: { label: "Confidence", low: "Low", medium: "Medium", high: "High" },
@@ -58,10 +68,10 @@ export const strings = {
   },
   Tag: {
     en: { remove: "Remove" },
-    vi: { remove: "Gỡ bỏ" },
+    vi: { remove: "Gỡ" },
   },
   Toast: {
-    en: { notifications: "Notifications", dismiss: "Dismiss" },
+    en: { notifications: "Notifications", dismiss: "Close" },
     vi: { notifications: "Thông báo", dismiss: "Đóng" },
   },
   TypingIndicator: {
@@ -73,12 +83,12 @@ export const strings = {
     vi: { toolbar: "Định dạng", bold: "Đậm", italic: "Nghiêng", list: "Danh sách", area: "Văn bản" },
   },
   Terminal: {
-    en: { input: "Terminal input" },
-    vi: { input: "Ô nhập lệnh" },
+    en: { input: "Terminal input", title: "cyberskill — zsh" },
+    vi: { input: "Ô nhập lệnh", title: "cyberskill — zsh" },
   },
   DataGrid: {
-    en: { empty: "No records", selectAll: "Select all rows", selectRow: "Select row" },
-    vi: { empty: "Không có bản ghi", selectAll: "Chọn tất cả", selectRow: "Chọn dòng" },
+    en: { empty: "No results", selectAll: "Select all rows", selectRow: "Select row", pin: "Pin this column", pinNamed: "Pin column {name}" },
+    vi: { empty: "Không có kết quả", selectAll: "Chọn tất cả", selectRow: "Chọn dòng", pin: "Ghim cột này", pinNamed: "Ghim cột {name}" },
   },
   Splitter: {
     en: { label: "Resize panes" },
@@ -112,9 +122,13 @@ export const strings = {
     en: { placeholder: "Add a note — @ to mention" },
     vi: { placeholder: "Thêm ghi chú — gõ @ để nhắc tên" },
   },
+  Sortable: {
+    en: { moveUp: "Move up", moveDown: "Move down" },
+    vi: { moveUp: "Di chuyển lên", moveDown: "Di chuyển xuống" },
+  },
   Form: {
-    en: { summary: "Please fix the following:", required: "required", requiredField: "This field is required" },
-    vi: { summary: "Vui lòng sửa các mục sau:", required: "bắt buộc", requiredField: "Trường này là bắt buộc" },
+    en: { summary: "Please fix the following:", required: "required", requiredField: "Enter a value" },
+    vi: { summary: "Vui lòng sửa các mục sau:", required: "bắt buộc", requiredField: "Vui lòng nhập giá trị" },
   },
   BackTop: {
     en: { label: "Back to top" },
@@ -122,7 +136,7 @@ export const strings = {
   },
   Carousel: {
     en: { prev: "Previous slide", next: "Next slide", slide: "Slide" },
-    vi: { prev: "Trang trước", next: "Trang sau", slide: "Trang" },
+    vi: { prev: "Ảnh trước", next: "Ảnh sau", slide: "Ảnh" },
   },
   Comment: {
     en: { reply: "Reply" },
@@ -137,12 +151,12 @@ export const strings = {
     vi: { more: "Thao tác khác" },
   },
   Popconfirm: {
-    en: { ok: "OK", cancel: "Cancel" },
-    vi: { ok: "Đồng ý", cancel: "Hủy" },
+    en: { ok: "Confirm", cancel: "Cancel" },
+    vi: { ok: "Xác nhận", cancel: "Hủy" },
   },
   Result: {
-    en: { success: "Done", error: "Something went wrong", warning: "Please check", info: "For your information" },
-    vi: { success: "Hoàn tất", error: "Đã có lỗi xảy ra", warning: "Vui lòng kiểm tra", info: "Thông tin" },
+    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" },
   },
   InlineEdit: {
     en: { edit: "Edit", empty: "Add text" },
@@ -161,8 +175,8 @@ export const strings = {
     vi: { label: "Giờ" },
   },
   Combobox: {
-    en: { placeholder: "Select or type…", empty: "No matches" },
-    vi: { placeholder: "Chọn hoặc nhập…", empty: "Không có kết quả phù hợp" },
+    en: { placeholder: "Select or type…", empty: "No results" },
+    vi: { placeholder: "Chọn hoặc nhập…", empty: "Không có kết quả" },
   },
   InputGroup: {
     en: { clear: "Clear", show: "Show password", hide: "Hide password", input: "Input" },
@@ -188,4 +202,57 @@ export const strings = {
     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" },
   },
+
+  Switch: {
+    en: { on: "On", off: "Off" },
+    vi: { on: "Bật", off: "Tắt" },
+  },
+  Tabs: {
+    en: { list: "Tabs" },
+    vi: { list: "Tab" },
+  },
+  EmptyState: {
+    en: { title: "Nothing here yet", action: "Create your first item" },
+    vi: { title: "Chưa có gì ở đây", action: "Tạo mục đầu tiên" },
+  },
+  Alert: {
+    en: { dismiss: "Close" },
+    vi: { dismiss: "Đóng" },
+  },
+  Select: {
+    en: { placeholder: "Select…" },
+    vi: { placeholder: "Chọn…" },
+  },
+  Slider: {
+    en: { label: "Slider" },
+    vi: { label: "Thanh trượt" },
+  },
+  Steps: {
+    en: { label: "Steps" },
+    vi: { label: "Các bước" },
+  },
+  Toggle: {
+    en: { pressed: "Pressed", unpressed: "Not pressed" },
+    vi: { pressed: "Đang bật", unpressed: "Chưa bật" },
+  },
+  Menu: {
+    en: { menu: "Menu" },
+    vi: { menu: "Trình đơn" },
+  },
+  ContextMenu: {
+    en: { menu: "Context menu" },
+    vi: { menu: "Trình đơn ngữ cảnh" },
+  },
+  Tooltip: {
+    en: { label: "Tooltip" },
+    vi: { label: "Chú thích" },
+  },
+  ProgressBar: {
+    en: { label: "Progress" },
+    vi: { label: "Tiến độ" },
+  },
+  ChatMessage: {
+    en: { you: "You" },
+    vi: { you: "Bạn" },
+  },
 };

package/components/ai/ChatMessage.d.ts

@@ -11,6 +11,8 @@ export interface ChatMessageProps {
   name?: ReactNode;
   avatar?: ReactNode;
   children?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }
 

package/components/ai/ChatMessage.jsx

@@ -1,20 +1,24 @@
 import React from "react";
+import { makeT, useLang } from "../_i18n/i18n.js";
 import { cx } from "../_utils/cx.js";
 
 /**
  * CyberSkill ChatMessage — one turn in a Lumi conversation. role "lumi" (genie,
  * Ochre avatar) or "user" (Umber, right-aligned). Pass `avatar` to override.
  */
-export function ChatMessage({ role = "lumi", name, avatar, children, className }) {
+export function ChatMessage({ role = "lumi", name, avatar, lang, className, children }) {
   const isUser = role === "user";
+  const [ref, L] = useLang(lang);
+  const t = makeT("ChatMessage", L);
+  const you = t("you");
   const defaultAvatar = isUser
-    ? <span aria-hidden="true">You</span>
+    ? <span aria-hidden="true">{you}</span>
     : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z" /></svg>;
   return (
-    <div className={cx("cs-chat-msg", isUser ? "cs-chat-msg--user" : "cs-chat-msg--lumi", className)}>
+    <div ref={ref} className={cx("cs-chat-msg", isUser ? "cs-chat-msg--user" : "cs-chat-msg--lumi", className)}>
       <div className="cs-chat-msg__avatar">{avatar ?? defaultAvatar}</div>
       <div className="cs-chat-msg__col">
-        <div className="cs-chat-msg__name">{name ?? (isUser ? "You" : "Lumi")}</div>
+        <div className="cs-chat-msg__name">{name ?? (isUser ? you : "Lumi")}</div>
         <div className="cs-chat-msg__bubble">{children}</div>
       </div>
     </div>

package/components/ai/ConfidenceMeter.d.ts

@@ -11,6 +11,8 @@ export interface ConfidenceMeterProps {
   level?: "low" | "medium" | "high";
   segments?: number;
   label?: ReactNode;
+  /** "en" | "vi" — else resolved from the nearest [lang] ancestor (vi default). */
+  lang?: string;
   className?: string;
 }