@attrus-ds/core 0.2.0 → 1.0.0

package/dist/css/components/sidebar.css

@@ -1,179 +1,179 @@
-/* ============================================================
-   SIDEBAR NAVIGATION — ATTRUS Design System
-   Canonical component CSS. SINGLE SOURCE consumed by BOTH the
-   live app shell (ui_kits/dashboard/Shell.jsx) and the doc page
-   (preview/sidebar-nav.html). Token-driven → themes automatically.
-
-   Class map:
-     .sb            component root (card framing — doc demos)
-     .sb.sb-app     app modifier: full-height rail, border-right only
-     .sb.collapsed  60px icon rail
-     .sb-head/-body/-section/-item/-foot
-     .sb-item.active · .ic · .label · .badge · .count
-     .sb-group / .sb-children / .sb-subitem (collapsible groups)
-
-   Canonical row height: 36px (comfortable — operational platform).
-   ============================================================ */
-
-.sb {
-  width: 216px;
-  background: var(--color-background-surface);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-sm);
-  display: flex; flex-direction: column;
-  overflow: hidden;
-}
-/* App rail: full-height, no card framing, animates width */
-.sb.sb-app {
-  border: 0;
-  border-right: 1px solid var(--color-border-default);
-  border-radius: 0;
-  box-shadow: none;
-  height: 100%;
-  transition: width var(--duration-base) var(--ease-standard);
-}
-
-/* Header — matches TopBar (60px) so logos align */
-.sb-head {
-  height: 60px; padding: 0 var(--space-2-5) 0 18px;
-  display: flex; align-items: center; justify-content: space-between;
-  border-bottom: 1px solid var(--color-border-subtle);
-  flex-shrink: 0;
-}
-.sb-head img { height: 14px; width: auto; }
-.sb-head .toggle {
-  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 0; padding: 0;
-  background: transparent; color: var(--color-foreground-muted); cursor: pointer;
-  display: inline-flex; align-items: center; justify-content: center;
-  transition: var(--transition-fast);
-}
-.sb-head .toggle:hover { background: var(--color-background-hover); color: var(--color-foreground-secondary); }
-.sb-head .toggle svg, .sb-head .toggle i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
-
-.sb-body { flex: 1; padding: var(--space-3) 0; overflow-y: auto; overflow-x: hidden; }
-
-.sb-section {
-  padding: var(--space-6) var(--space-5) var(--space-2);
-  font-family: var(--font-sans);
-  font-size: var(--fs-xxs); font-weight: var(--w-semibold);
-  color: var(--color-foreground-muted);
-  letter-spacing: var(--ls-caps); text-transform: uppercase;
-}
-
-.sb-item {
-  display: flex; align-items: center; gap: 11px;
-  padding: 8px 10px; margin: 3px 10px;
-  height: 36px; box-sizing: border-box;
-  border-radius: var(--radius-sm);
-  color: var(--color-foreground-secondary);
-  font-size: var(--fs-md); font-weight: var(--w-medium);
-  cursor: pointer; position: relative;
-  white-space: nowrap; overflow: hidden;
-  transition: background .15s, color .15s;
-}
-.sb-item:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
-.sb-item.active {
-  background: var(--color-background-selected);
-  color: var(--color-foreground-brand);
-  font-weight: var(--w-semibold);
-}
-.sb-item.active::before {
-  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px;
-  width: 2px; border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500);
-}
-.sb-item .ic { width: 15px; height: 15px; stroke-width: var(--icon-stroke); flex-shrink: 0; opacity: 0.85; }
-.sb-item.active .ic { color: var(--color-brand-secondary-500); opacity: 1; }
-.sb-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sb-item.disabled { color: var(--color-foreground-placeholder); cursor: not-allowed; }
-.sb-item.disabled:hover { background: transparent; }
-
-/* Trailing decoration — badge (status) OR count (numeric), never both */
-.sb-badge {
-  font-family: var(--font-sans); font-size: 9px; font-weight: var(--w-bold);
-  letter-spacing: .06em; line-height: 1.4;
-  padding: 1px var(--space-2-5); border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
-}
-.sb-badge.alert { background: var(--color-danger-500); }
-.sb-badge.warning { background: var(--color-warning-500); }
-.sb-count {
-  font-family: var(--font-mono); font-size: var(--fs-xxs);
-  color: var(--color-foreground-muted);
-  background: var(--color-background-subtle);
-  padding: 1px 6px; border-radius: var(--radius-xs);
-}
-.sb-item.active .sb-count { background: color-mix(in srgb, var(--color-brand-secondary-200) 70%, transparent); color: var(--color-brand-secondary-700); }
-
-/* Footer — user mini-card */
-.sb-foot {
-  border-top: 1px solid var(--color-border-subtle);
-  padding: var(--space-3);
-  display: flex; align-items: center; gap: var(--space-3);
-  flex-shrink: 0;
-}
-.sb-foot .avatar {
-  width: 26px; height: 26px; border-radius: var(--radius-pill);
-  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
-  font-size: 10px; font-weight: var(--w-bold);
-  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
-}
-.sb-foot .meta { flex: 1; min-width: 0; }
-.sb-foot .meta .name { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sb-foot .meta .role { font-size: var(--fs-xxs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sb-foot .logout { color: var(--color-foreground-muted); cursor: pointer; flex-shrink: 0; display: inline-flex; }
-.sb-foot .logout svg, .sb-foot .logout i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
-
-/* ===== Collapsed (60px icon rail) ===== */
-.sb.collapsed { width: 60px; }
-.sb.collapsed .sb-head { padding: 0 var(--space-3); justify-content: center; }
-.sb.collapsed .sb-section { padding: 0; margin: var(--space-3) var(--space-4); height: 1px; background: var(--color-border-subtle); font-size: 0; color: transparent; }
-.sb.collapsed .sb-item { justify-content: center; padding: 8px 0; gap: 0; margin: 1px 10px; }
-.sb.collapsed .sb-item .label, .sb.collapsed .sb-badge, .sb.collapsed .sb-count, .sb.collapsed .sb-item .chev { display: none; }
-.sb.collapsed .sb-item.active::before { display: none; }
-.sb.collapsed .sb-foot { justify-content: center; padding: var(--space-3) 0; }
-.sb.collapsed .sb-foot .meta, .sb.collapsed .sb-foot .logout { display: none; }
-
-/* ===== Groups & dropdowns ===== */
-.sb-group { position: relative; }
-.sb-group > .sb-item .chev {
-  width: 14px; height: 14px; stroke-width: var(--icon-stroke);
-  margin-left: auto; opacity: 0.7;
-  transition: transform var(--duration-base) var(--ease-standard);
-}
-.sb-group[aria-expanded="true"] > .sb-item .chev { transform: rotate(90deg); opacity: 1; }
-.sb-children {
-  overflow: hidden; display: grid; grid-template-rows: 0fr;
-  transition: grid-template-rows var(--duration-base) var(--ease-standard);
-}
-.sb-children > .sb-children-inner { min-height: 0; }
-.sb-group[aria-expanded="true"] .sb-children { grid-template-rows: 1fr; }
-.sb-children-inner { padding: var(--space-1) 0; }
-.sb-children .sb-subitem {
-  display: flex; align-items: center; gap: 10px;
-  padding: 8px 12px 8px 38px; margin: 2px 10px;
-  height: 38px; box-sizing: border-box;
-  border-radius: var(--radius-sm);
-  color: var(--color-foreground-secondary);
-  font-size: var(--fs-sm); font-weight: var(--w-medium);
-  cursor: pointer; position: relative;
-  transition: var(--transition-fast);
-}
-.sb-children .sb-subitem::before {
-  content: ""; position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
-  width: 5px; height: 5px; border-radius: var(--radius-pill);
-  background: var(--color-border-strong); opacity: .55;
-  transition: var(--transition-fast);
-}
-.sb-children .sb-subitem:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
-.sb-children .sb-subitem:hover::before { opacity: 1; background: var(--color-foreground-muted); }
-.sb-children .sb-subitem.active { color: var(--color-foreground-brand); font-weight: var(--w-semibold); background: var(--color-background-selected); }
-.sb-children .sb-subitem.active::before { background: var(--color-brand-secondary-500); opacity: 1; }
-.sb-children .sb-subitem .count, .sb-children .sb-subitem .sb-count {
-  margin-left: auto;
-  font-family: var(--font-mono); font-size: var(--fs-xxs);
-  color: var(--color-foreground-muted);
-  background: var(--color-background-subtle);
-  padding: 1px 6px; border-radius: var(--radius-xs);
-}
+/* ============================================================
+   SIDEBAR NAVIGATION — ATTRUS Design System
+   Canonical component CSS. SINGLE SOURCE consumed by BOTH the
+   live app shell (ui_kits/dashboard/Shell.jsx) and the doc page
+   (preview/sidebar-nav.html). Token-driven → themes automatically.
+
+   Class map:
+     .sb            component root (card framing — doc demos)
+     .sb.sb-app     app modifier: full-height rail, border-right only
+     .sb.collapsed  60px icon rail
+     .sb-head/-body/-section/-item/-foot
+     .sb-item.active · .ic · .label · .badge · .count
+     .sb-group / .sb-children / .sb-subitem (collapsible groups)
+
+   Canonical row height: 36px (comfortable — operational platform).
+   ============================================================ */
+
+.sb {
+  width: 216px;
+  background: var(--color-background-surface);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+  display: flex; flex-direction: column;
+  overflow: hidden;
+}
+/* App rail: full-height, no card framing, animates width */
+.sb.sb-app {
+  border: 0;
+  border-right: 1px solid var(--color-border-default);
+  border-radius: 0;
+  box-shadow: none;
+  height: 100%;
+  transition: width var(--duration-base) var(--ease-standard);
+}
+
+/* Header — matches TopBar (60px) so logos align */
+.sb-head {
+  height: 60px; padding: 0 var(--space-2-5) 0 18px;
+  display: flex; align-items: center; justify-content: space-between;
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+.sb-head img { height: 14px; width: auto; }
+.sb-head .toggle {
+  width: 26px; height: 26px; border-radius: var(--radius-sm); border: 0; padding: 0;
+  background: transparent; color: var(--color-foreground-muted); cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: var(--transition-fast);
+}
+.sb-head .toggle:hover { background: var(--color-background-hover); color: var(--color-foreground-secondary); }
+.sb-head .toggle svg, .sb-head .toggle i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+
+.sb-body { flex: 1; padding: var(--space-3) 0; overflow-y: auto; overflow-x: hidden; }
+
+.sb-section {
+  padding: var(--space-6) var(--space-5) var(--space-2);
+  font-family: var(--font-sans);
+  font-size: var(--fs-xxs); font-weight: var(--w-semibold);
+  color: var(--color-foreground-muted);
+  letter-spacing: var(--ls-caps); text-transform: uppercase;
+}
+
+.sb-item {
+  display: flex; align-items: center; gap: 11px;
+  padding: 8px 10px; margin: 3px 10px;
+  height: 36px; box-sizing: border-box;
+  border-radius: var(--radius-sm);
+  color: var(--color-foreground-secondary);
+  font-size: var(--fs-md); font-weight: var(--w-medium);
+  cursor: pointer; position: relative;
+  white-space: nowrap; overflow: hidden;
+  transition: background .15s, color .15s;
+}
+.sb-item:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.sb-item.active {
+  background: var(--color-background-selected);
+  color: var(--color-foreground-brand);
+  font-weight: var(--w-semibold);
+}
+.sb-item.active::before {
+  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px;
+  width: 2px; border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500);
+}
+.sb-item .ic { width: 15px; height: 15px; stroke-width: var(--icon-stroke); flex-shrink: 0; opacity: 0.85; }
+.sb-item.active .ic { color: var(--color-brand-secondary-500); opacity: 1; }
+.sb-item .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-item.disabled { color: var(--color-foreground-placeholder); cursor: not-allowed; }
+.sb-item.disabled:hover { background: transparent; }
+
+/* Trailing decoration — badge (status) OR count (numeric), never both */
+.sb-badge {
+  font-family: var(--font-sans); font-size: 9px; font-weight: var(--w-bold);
+  letter-spacing: .06em; line-height: 1.4;
+  padding: 1px var(--space-2-5); border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+}
+.sb-badge.alert { background: var(--color-danger-500); }
+.sb-badge.warning { background: var(--color-warning-500); }
+.sb-count {
+  font-family: var(--font-mono); font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+  background: var(--color-background-subtle);
+  padding: 1px 6px; border-radius: var(--radius-xs);
+}
+.sb-item.active .sb-count { background: color-mix(in srgb, var(--color-brand-secondary-200) 70%, transparent); color: var(--color-brand-secondary-700); }
+
+/* Footer — user mini-card */
+.sb-foot {
+  border-top: 1px solid var(--color-border-subtle);
+  padding: var(--space-3);
+  display: flex; align-items: center; gap: var(--space-3);
+  flex-shrink: 0;
+}
+.sb-foot .avatar {
+  width: 26px; height: 26px; border-radius: var(--radius-pill);
+  background: var(--color-brand-secondary-500); color: var(--color-pure-white);
+  font-size: 10px; font-weight: var(--w-bold);
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.sb-foot .meta { flex: 1; min-width: 0; }
+.sb-foot .meta .name { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-foot .meta .role { font-size: var(--fs-xxs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-foot .logout { color: var(--color-foreground-muted); cursor: pointer; flex-shrink: 0; display: inline-flex; }
+.sb-foot .logout svg, .sb-foot .logout i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+
+/* ===== Collapsed (60px icon rail) ===== */
+.sb.collapsed { width: 60px; }
+.sb.collapsed .sb-head { padding: 0 var(--space-3); justify-content: center; }
+.sb.collapsed .sb-section { padding: 0; margin: var(--space-3) var(--space-4); height: 1px; background: var(--color-border-subtle); font-size: 0; color: transparent; }
+.sb.collapsed .sb-item { justify-content: center; padding: 8px 0; gap: 0; margin: 1px 10px; }
+.sb.collapsed .sb-item .label, .sb.collapsed .sb-badge, .sb.collapsed .sb-count, .sb.collapsed .sb-item .chev { display: none; }
+.sb.collapsed .sb-item.active::before { display: none; }
+.sb.collapsed .sb-foot { justify-content: center; padding: var(--space-3) 0; }
+.sb.collapsed .sb-foot .meta, .sb.collapsed .sb-foot .logout { display: none; }
+
+/* ===== Groups & dropdowns ===== */
+.sb-group { position: relative; }
+.sb-group > .sb-item .chev {
+  width: 14px; height: 14px; stroke-width: var(--icon-stroke);
+  margin-left: auto; opacity: 0.7;
+  transition: transform var(--duration-base) var(--ease-standard);
+}
+.sb-group[aria-expanded="true"] > .sb-item .chev { transform: rotate(90deg); opacity: 1; }
+.sb-children {
+  overflow: hidden; display: grid; grid-template-rows: 0fr;
+  transition: grid-template-rows var(--duration-base) var(--ease-standard);
+}
+.sb-children > .sb-children-inner { min-height: 0; }
+.sb-group[aria-expanded="true"] .sb-children { grid-template-rows: 1fr; }
+.sb-children-inner { padding: var(--space-1) 0; }
+.sb-children .sb-subitem {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px 8px 38px; margin: 2px 10px;
+  height: 38px; box-sizing: border-box;
+  border-radius: var(--radius-sm);
+  color: var(--color-foreground-secondary);
+  font-size: var(--fs-sm); font-weight: var(--w-medium);
+  cursor: pointer; position: relative;
+  transition: var(--transition-fast);
+}
+.sb-children .sb-subitem::before {
+  content: ""; position: absolute; left: 26px; top: 50%; transform: translateY(-50%);
+  width: 5px; height: 5px; border-radius: var(--radius-pill);
+  background: var(--color-border-strong); opacity: .55;
+  transition: var(--transition-fast);
+}
+.sb-children .sb-subitem:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.sb-children .sb-subitem:hover::before { opacity: 1; background: var(--color-foreground-muted); }
+.sb-children .sb-subitem.active { color: var(--color-foreground-brand); font-weight: var(--w-semibold); background: var(--color-background-selected); }
+.sb-children .sb-subitem.active::before { background: var(--color-brand-secondary-500); opacity: 1; }
+.sb-children .sb-subitem .count, .sb-children .sb-subitem .sb-count {
+  margin-left: auto;
+  font-family: var(--font-mono); font-size: var(--fs-xxs);
+  color: var(--color-foreground-muted);
+  background: var(--color-background-subtle);
+  padding: 1px 6px; border-radius: var(--radius-xs);
+}

package/dist/css/components/smart-search.css

@@ -1,91 +1,91 @@
-/* ============================================================
-   SMART SEARCH — global command palette (⌘K) shell
-   Promoted from combobox.html §03 (2026-06-11): the 8 canonical
-   states (inactive · active · word · similar · id · partial-id ·
-   no-results · loading · error) compose from these pieces.
-   Consumed by the SmartSearch TSX component.
-   ============================================================ */
-/* Smart-search combobox */
-.ss { width: 100%; max-width: 380px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; font-size: var(--fs-sm); }
-.ss-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
-.ss-input.ss-input-flat { border-bottom: 0; }
-.ss-input svg, .ss-input i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); flex-shrink: 0; }
-.ss-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--color-foreground-default); }
-.ss-input input::placeholder { color: var(--color-foreground-placeholder); }
-.ss-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-foreground-muted); cursor: pointer; }
-.ss-clear:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
-.ss-clear svg, .ss-clear i { width: 12px; height: 12px; }
-
-.ss-section { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
-.ss-section:last-of-type { border-bottom: 0; }
-.ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }
-
-/* Suggestion chips (active state) */
-.ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-2); }
-.ss-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); }
-.ss-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
-.ss-chip svg, .ss-chip i { width: 11px; height: 11px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
-
-/* List rows */
-.ss-list { list-style: none; margin: 0; padding: 0; }
-.ss-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); }
-.ss-list-item:hover, .ss-list-item.is-active { background: var(--color-background-hover); }
-.ss-list-item .icon-leading { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-background-canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground-secondary); flex-shrink: 0; }
-.ss-list-item .icon-leading svg, .ss-list-item .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
-.ss-list-item .icon-leading.brand { background: var(--color-brand-secondary-50); color: var(--color-brand-secondary-700); }
-.ss-list-item .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
-.ss-list-item .text .label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
-.ss-list-item .text .meta { font-size: var(--fs-xs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-list-item .icon-trailing { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--color-foreground-muted); }
-.ss-list-item .icon-trailing svg, .ss-list-item .icon-trailing i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
-
-/* Recent searches — clock icon + dim text */
-.ss-recent .ss-list-item .icon-leading { background: transparent; border: 0; width: 18px; height: 18px; }
-.ss-recent .ss-list-item .icon-leading svg, .ss-recent .ss-list-item .icon-leading i { width: 13px; height: 13px; color: var(--color-foreground-muted); }
-.ss-recent .ss-list-item .text .label { font-weight: var(--w-regular); color: var(--color-foreground-secondary); }
-
-/* Empty/result label */
-.ss-result-label { padding: 0 var(--space-2) var(--space-2); }
-.ss-result-label .l { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); }
-.ss-no-result { padding: 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-foreground-muted); }
-.ss-no-result strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
-
-/* Tip / hint card (similar match suggestion, ID format hint) */
-.ss-hint { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-background-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); margin: var(--space-3) var(--space-2) 0; }
-.ss-hint .icon-leading { color: var(--color-foreground-muted); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
-.ss-hint .icon-leading svg, .ss-hint .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
-.ss-hint .body { font-size: var(--fs-sm); color: var(--color-foreground-secondary); line-height: var(--lh-relaxed); }
-.ss-hint .body strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
-.ss-hint .body code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-foreground-accent); background: color-mix(in srgb, var(--color-brand-secondary-500) 12%, transparent); padding: 1px var(--space-2); border-radius: var(--radius-xs); }
-
-/* ID type-picker buttons */
-.ss-typebtns { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
-.ss-typebtn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%; }
-.ss-typebtn:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
-.ss-typebtn svg, .ss-typebtn i { width: 16px; height: 16px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
-.ss-typebtn .grow { flex: 1; }
-.ss-typebtn .chev { color: var(--color-foreground-muted); }
-
-/* Loading skeleton + spinner illustration */
-.ss-skeleton { padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); }
-.ss-skel-row { display: flex; align-items: center; gap: var(--space-3); }
-.ss-skel-circle { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-border-default); flex-shrink: 0; }
-.ss-skel-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
-.ss-skel-bar { height: 8px; border-radius: var(--radius-xs); background: var(--color-border-default); }
-.ss-skel-bar.short { width: 40%; }
-.ss-skel-bar.long { width: 70%; }
-.ss-skel-shimmer { background: linear-gradient(90deg, var(--color-border-default) 0%, var(--color-border-subtle) 50%, var(--color-border-default) 100%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
-@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
-
-.ss-illo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; }
-.ss-illo svg.illustration { width: 84px; height: 60px; }
-.ss-illo .title { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
-.ss-illo .body { font-size: var(--fs-xs); color: var(--color-foreground-muted); max-width: 32ch; line-height: var(--lh-relaxed); }
-
-/* Footer with keyboard shortcuts */
-.ss-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-background-subtle); border-top: 1px solid var(--color-border-subtle); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
-.ss-foot .kbd-group { display: inline-flex; align-items: center; gap: 4px; }
-kbd.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-semibold); color: var(--color-foreground-secondary); }
-.ss-foot .sep { width: 1px; height: 12px; background: var(--color-border-default); }
-
-
+/* ============================================================
+   SMART SEARCH — global command palette (⌘K) shell
+   Promoted from combobox.html §03 (2026-06-11): the 8 canonical
+   states (inactive · active · word · similar · id · partial-id ·
+   no-results · loading · error) compose from these pieces.
+   Consumed by the SmartSearch TSX component.
+   ============================================================ */
+/* Smart-search combobox */
+.ss { width: 100%; max-width: 380px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; font-size: var(--fs-sm); }
+.ss-input { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
+.ss-input.ss-input-flat { border-bottom: 0; }
+.ss-input svg, .ss-input i { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); flex-shrink: 0; }
+.ss-input input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--color-foreground-default); }
+.ss-input input::placeholder { color: var(--color-foreground-placeholder); }
+.ss-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; padding: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-foreground-muted); cursor: pointer; }
+.ss-clear:hover { background: var(--color-background-hover); color: var(--color-foreground-default); }
+.ss-clear svg, .ss-clear i { width: 12px; height: 12px; }
+
+.ss-section { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-subtle); }
+.ss-section:last-of-type { border-bottom: 0; }
+.ss-section-label { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); padding: 0 var(--space-2); margin-bottom: var(--space-2); }
+
+/* Suggestion chips (active state) */
+.ss-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-2); }
+.ss-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); }
+.ss-chip:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
+.ss-chip svg, .ss-chip i { width: 11px; height: 11px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
+
+/* List rows */
+.ss-list { list-style: none; margin: 0; padding: 0; }
+.ss-list-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition-fast); }
+.ss-list-item:hover, .ss-list-item.is-active { background: var(--color-background-hover); }
+.ss-list-item .icon-leading { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-background-canvas); display: inline-flex; align-items: center; justify-content: center; color: var(--color-foreground-secondary); flex-shrink: 0; }
+.ss-list-item .icon-leading svg, .ss-list-item .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.ss-list-item .icon-leading.brand { background: var(--color-brand-secondary-50); color: var(--color-brand-secondary-700); }
+.ss-list-item .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.ss-list-item .text .label { font-size: var(--fs-sm); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.ss-list-item .text .meta { font-size: var(--fs-xs); color: var(--color-foreground-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-list-item .icon-trailing { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: var(--color-foreground-muted); }
+.ss-list-item .icon-trailing svg, .ss-list-item .icon-trailing i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+
+/* Recent searches — clock icon + dim text */
+.ss-recent .ss-list-item .icon-leading { background: transparent; border: 0; width: 18px; height: 18px; }
+.ss-recent .ss-list-item .icon-leading svg, .ss-recent .ss-list-item .icon-leading i { width: 13px; height: 13px; color: var(--color-foreground-muted); }
+.ss-recent .ss-list-item .text .label { font-weight: var(--w-regular); color: var(--color-foreground-secondary); }
+
+/* Empty/result label */
+.ss-result-label { padding: 0 var(--space-2) var(--space-2); }
+.ss-result-label .l { font-size: var(--fs-xxs); font-weight: var(--w-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-foreground-muted); }
+.ss-no-result { padding: 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-foreground-muted); }
+.ss-no-result strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
+
+/* Tip / hint card (similar match suggestion, ID format hint) */
+.ss-hint { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--color-background-subtle); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); margin: var(--space-3) var(--space-2) 0; }
+.ss-hint .icon-leading { color: var(--color-foreground-muted); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; }
+.ss-hint .icon-leading svg, .ss-hint .icon-leading i { width: 14px; height: 14px; stroke-width: var(--icon-stroke); }
+.ss-hint .body { font-size: var(--fs-sm); color: var(--color-foreground-secondary); line-height: var(--lh-relaxed); }
+.ss-hint .body strong { color: var(--color-foreground-default); font-weight: var(--w-semibold); }
+.ss-hint .body code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-foreground-accent); background: color-mix(in srgb, var(--color-brand-secondary-500) 12%, transparent); padding: 1px var(--space-2); border-radius: var(--radius-xs); }
+
+/* ID type-picker buttons */
+.ss-typebtns { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-2); }
+.ss-typebtn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); background: var(--color-background-canvas); border: 1px solid var(--color-border-default); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--w-medium); color: var(--color-foreground-default); cursor: pointer; transition: var(--transition-fast); text-align: left; width: 100%; }
+.ss-typebtn:hover { background: var(--color-background-hover); border-color: var(--color-border-strong); }
+.ss-typebtn svg, .ss-typebtn i { width: 16px; height: 16px; stroke-width: var(--icon-stroke); color: var(--color-foreground-muted); }
+.ss-typebtn .grow { flex: 1; }
+.ss-typebtn .chev { color: var(--color-foreground-muted); }
+
+/* Loading skeleton + spinner illustration */
+.ss-skeleton { padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); }
+.ss-skel-row { display: flex; align-items: center; gap: var(--space-3); }
+.ss-skel-circle { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-border-default); flex-shrink: 0; }
+.ss-skel-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
+.ss-skel-bar { height: 8px; border-radius: var(--radius-xs); background: var(--color-border-default); }
+.ss-skel-bar.short { width: 40%; }
+.ss-skel-bar.long { width: 70%; }
+.ss-skel-shimmer { background: linear-gradient(90deg, var(--color-border-default) 0%, var(--color-border-subtle) 50%, var(--color-border-default) 100%); background-size: 200% 100%; animation: skel 1.4s linear infinite; }
+@keyframes skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+
+.ss-illo { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-7) var(--space-5); text-align: center; }
+.ss-illo svg.illustration { width: 84px; height: 60px; }
+.ss-illo .title { font-size: var(--fs-md); font-weight: var(--w-semibold); color: var(--color-foreground-default); }
+.ss-illo .body { font-size: var(--fs-xs); color: var(--color-foreground-muted); max-width: 32ch; line-height: var(--lh-relaxed); }
+
+/* Footer with keyboard shortcuts */
+.ss-foot { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); background: var(--color-background-subtle); border-top: 1px solid var(--color-border-subtle); font-size: var(--fs-xxs); color: var(--color-foreground-muted); }
+.ss-foot .kbd-group { display: inline-flex; align-items: center; gap: 4px; }
+kbd.ss-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; background: var(--color-background-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-xs); font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-semibold); color: var(--color-foreground-secondary); }
+.ss-foot .sep { width: 1px; height: 12px; background: var(--color-border-default); }
+
+