@cyberskill/design 1.2.0 → 1.3.9

package/base/components.css

@@ -139,6 +139,8 @@
   color: var(--cs-color-text-primary, #45210e);
   left: 50%;
   max-inline-size: min(42rem, calc(100vw - 2rem));
+  max-block-size: min(80vh, calc(100vh - 4rem));
+  overflow: auto;
   padding: var(--cs-space-6, 24px);
   position: absolute;
   top: 12vh;
@@ -163,6 +165,7 @@
 
 /* ---- DataTable ---- */
 .cs-table-wrap { overflow: auto; }
+.cs-table-wrap--status { padding: var(--cs-space-4, 16px) 0; }
 .cs-table { border-collapse: collapse; color: var(--cs-color-text-primary, #45210e); inline-size: 100%; }
 .cs-table th, .cs-table td {
   border-block-end: 1px solid rgba(69, 33, 14, 0.18);
@@ -179,7 +182,7 @@
 .cs-ai-disclosure { display: inline-block; position: relative; }
 .cs-ai-disclosure__badge {
   background: var(--cs-color-semantic-info, #1d4ed8); border: 0; border-radius: 999px;
-  color: #ffffff; font: inherit; font-size: 0.875rem; font-weight: 700;
+  color: var(--cs-color-semantic-info-fg, #ffffff); font: inherit; font-size: 0.875rem; font-weight: 700;
   padding: 0.25rem 0.625rem; cursor: pointer;
 }
 .cs-ai-disclosure__panel {
@@ -187,7 +190,7 @@
   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));
   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: 20;
+  min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);
 }
 .cs-ai-disclosure__sources { color: var(--cs-color-text-muted, #6e5a4c); font-size: 0.8125rem; }
 

package/base/controls.css

@@ -2,7 +2,12 @@
 
 /* SearchField */
 .cs-search { display: flex; align-items: center; gap: 8px; 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:focus-within { border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cs-color-brand-ochre) 30%, transparent); }
+.cs-search:focus-within {
+  border-color: var(--cs-color-text-primary);
+  outline: 2px solid var(--cs-color-text-primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
+}
 .cs-search svg { color: var(--cs-color-text-muted); flex: none; }
 .cs-search input { flex: 1; min-inline-size: 0; border: 0; background: transparent; outline: 0; font: inherit; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
 .cs-search input::placeholder { color: var(--cs-color-text-muted); }
@@ -11,7 +16,12 @@
 
 /* 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:focus-within { border-color: var(--cs-color-brand-ochre); }
+.cs-stepper:focus-within {
+  border-color: var(--cs-color-text-primary);
+  outline: 2px solid var(--cs-color-text-primary);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
+}
 .cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }
 .cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }
 .cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }
@@ -110,7 +120,7 @@
 .cs-datepicker__field { display: inline-flex; align-items: center; gap: 8px; 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: 8px 12px; cursor: pointer; }
 .cs-datepicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
-.cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
+.cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; }
 .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:focus-within { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .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; }
@@ -118,13 +128,13 @@
 
 /* ---- v3 Batch 4 (Jul 2026): HoverCard · Popconfirm · ContextMenu · FAB · Result · InlineEdit ---- */
 .cs-hovercard { position: relative; display: inline-block; }
-.cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 50); 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-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, 50); 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); 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; }
-.cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 60); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
+.cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
 .cs-fab--static { position: static; align-items: flex-start; }
 .cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
 .cs-fab__main:hover { filter: brightness(1.05); }
@@ -167,7 +177,7 @@
 .cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }
 .cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }
 .cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }
-.cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: var(--cs-font-size-base); cursor: pointer; }
+.cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; /* on-dark-chrome ink */ font-size: var(--cs-font-size-base); cursor: pointer; }
 .cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }
 .cs-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--cs-color-text-primary); font: 600 13px var(--cs-font-family-ui); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; min-block-size: 32px; }
 .cs-toolbar__btn:hover { background: var(--cs-color-surface-raised); }
@@ -186,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, 50); inset-inline-start: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); 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: 0; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, 220px); 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__card { 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); }
@@ -214,6 +224,12 @@
 
 /* ---- v3 Batch 6a (Jul 2026): Form · Tree · BackTop · Watermark ---- */
 .cs-form { display: grid; gap: 16px; }
+/* FIND-015 — visible pending + interaction lock while asyncRules / submit run. */
+.cs-form.is-pending { opacity: 0.72; }
+.cs-form.is-pending :is(button, input, select, textarea, [role="button"]) {
+  pointer-events: none;
+  cursor: wait;
+}
 .cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: 12px 14px; font-size: var(--cs-font-size-sm); }
 .cs-form__summary b { color: var(--cs-color-semantic-danger); }
 .cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }
@@ -232,7 +248,7 @@
 [data-theme="dark"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
 .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); }
-.cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 60); inline-size: 44px; block-size: 44px; 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-md); }
+.cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 80); inline-size: 44px; block-size: 44px; 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-md); }
 .cs-backtop:hover { border-color: var(--cs-accent); }
 
 /* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
@@ -240,7 +256,7 @@
 .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__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
-.cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); 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%; }
+.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%; }
 .cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }
 .cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }
 .cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }
@@ -255,29 +271,30 @@
 .cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }
 .cs-transfer__ops { display: grid; gap: 6px; align-content: center; }
 .cs-mentions { position: relative; display: block; max-inline-size: 420px; }
-.cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); 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 { 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 { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
+.cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { background: var(--cs-accent-tint); color: var(--cs-accent-strong); }
+[data-theme="dark"] .cs-mentions__pop button:hover, [data-theme="dark"] .cs-mentions__pop button.hl, [data-theme="dark"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
 
 /* ---- v3 Batch 6c (Jul 2026): ColorPicker · Tour · QRCode ---- */
 .cs-colorpicker { position: relative; display: inline-block; }
 .cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px 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); padding: 8px 12px; cursor: pointer; }
 .cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }
 .cs-colorpicker__field:focus-visible { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
-.cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 50); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; 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; }
+.cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; 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; }
 .cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }
 .cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }
 .cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }
 .cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }
 .cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }
-.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
-.cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 90) + 2); inline-size: 280px; 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: 14px 16px; }
+.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }
+.cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; 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: 14px 16px; }
 .cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
 .cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }
 .cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
 .cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }
 .cs-tour__btns { display: flex; gap: 6px; }
-.cs-qrcode { display: inline-block; padding: 10px; background: #fff; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
+.cs-qrcode { display: inline-block; padding: 10px; background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }
 
 /* ---- v3 Batch 7a (Jul 2026): Masonry · Splitter · HotKeys · Dock ---- */
 .cs-masonry__item { break-inside: avoid; }
@@ -310,6 +327,10 @@
 .cs-sortable__item.is-dragging { opacity: .5; }
 .cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }
 .cs-sortable__grip { color: var(--cs-color-text-muted); }
+.cs-sortable__label { flex: 1; min-inline-size: 0; }
+.cs-sortable__ops { display: inline-flex; gap: 4px; margin-inline-start: auto; }
+.cs-sortable__ops .cs-button { cursor: pointer; }
+.cs-sortable__ops .cs-button:disabled { opacity: .4; cursor: not-allowed; }
 
 /* ---- v3 Batch 7c (Jul 2026): Chart · Editor · Terminal ---- */
 .cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }
@@ -319,15 +340,30 @@
 .cs-editor__bar { display: flex; gap: 2px; padding: 6px; 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; }
 .cs-editor__area { padding: 12px 14px; font: 400 14px/1.6 var(--cs-font-family-ui); color: var(--cs-color-text-primary); outline: none; }
 .cs-editor__area:focus-visible { box-shadow: inset 0 0 0 2px var(--cs-color-accent-ochre); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); }
-.cs-terminal { max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid #3a2a1c; box-shadow: var(--cs-shadow-md); }
-.cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: #2a1a0d; color: #c9b7a3; font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
-.cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: #5b4331; }
+/* Terminal — always-dark chrome (FIND-010: hex only in local custom props) */
+.cs-terminal {
+  --cs-term-border: #3a2a1c;
+  --cs-term-bar: #2a1a0d;
+  --cs-term-dot: #5b4331;
+  --cs-term-bg: #1a1108;
+  --cs-term-fg: #f5ead9;
+  --cs-term-muted: #c9b7a3;
+  max-inline-size: 480px; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-term-border); box-shadow: var(--cs-shadow-md);
+}
+.cs-terminal__bar { display: flex; align-items: center; gap: 6px; background: var(--cs-term-bar); color: var(--cs-term-muted); font: 600 11px var(--cs-font-family-mono); padding: 8px 12px; }
+.cs-terminal__bar i { inline-size: 10px; block-size: 10px; border-radius: 999px; background: var(--cs-term-dot); }
 .cs-terminal__bar span { margin-inline-start: 8px; }
-.cs-terminal__body { background: #1a1108; color: #f5ead9; font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
+.cs-terminal__body { background: var(--cs-term-bg); color: var(--cs-term-fg); font: 500 13px/1.7 var(--cs-font-family-mono); padding: 12px 14px; min-block-size: 130px; }
 .cs-terminal__line { display: flex; gap: 8px; align-items: center; }
 .cs-terminal__line .p { color: var(--cs-color-brand-ochre); }
 .cs-terminal__line input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
-.cs-terminal__out { color: #c9b7a3; white-space: pre-wrap; }
+/* Wrapper ring — input clears outline for chrome; focus-within restores ≥3:1 indicator (FIND-038). */
+.cs-terminal:focus-within {
+  outline: 2px solid var(--cs-color-accent-ochre);
+  outline-offset: 2px;
+  box-shadow: 0 0 0 5px var(--cs-color-brand-umber);
+}
+.cs-terminal__out { color: var(--cs-term-muted); white-space: pre-wrap; }
 
 /* ---- system-theme dark parity (UX-010 / CDS-THEME-001) ---- */
 @media (prefers-color-scheme: dark) {
@@ -339,4 +375,5 @@
   [data-theme="system"] .cs-tree__row.is-selected .cs-tree__label { color: var(--cs-accent-bright); }
   [data-theme="system"] .cs-cascader__opt.on { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
   [data-theme="system"] .cs-datagrid tr.is-selected td { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
+  [data-theme="system"] .cs-mentions__pop button:hover, [data-theme="system"] .cs-mentions__pop button.hl, [data-theme="system"] .cs-mentions__pop button[aria-selected="true"] { background: color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel)); color: var(--cs-accent-bright); }
 }

package/base/data.css

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

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; }

package/base/forms.css

@@ -29,7 +29,7 @@
 .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); }

package/base/glass.css

@@ -114,7 +114,7 @@
     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; }
 

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

@@ -28,7 +28,7 @@
 
 /* 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); }

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: var(--cs-focus-ring, 3px) 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
@@ -25,26 +26,26 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
 
 /* 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;
@@ -59,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; }
 }
@@ -76,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"],
@@ -103,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; }
@@ -118,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; }
 }
 
@@ -130,7 +131,7 @@ 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; }

package/base/shell.css

@@ -17,7 +17,7 @@
 .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: 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; border-color: transparent; }
+.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,6 +48,12 @@
 .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; }

package/components/_i18n/i18n.js

@@ -61,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);
 }