@nqlib/nqui 0.5.6 → 0.6.1

package/dist/styles.css

@@ -49,7 +49,7 @@
 @source inline("focus:bg-primary/80 focus:bg-secondary/80 focus:bg-destructive/80 focus:bg-success/80 focus:bg-warning/80 focus:bg-info/80 focus:border-primary/80 focus:border-secondary/80 focus:border-destructive/80 focus:border-success/80 focus:border-warning/80 focus:border-info/80 focus:border-border focus:outline-0 focus-visible:outline-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-destructive");
 
 /* Active state utilities */
-@source inline("active:bg-primary/75 active:bg-secondary/75 active:bg-destructive/75 active:bg-success/75 active:bg-warning/75 active:bg-info/75 active:border-primary/75 active:border-secondary/75 active:border-destructive/75 active:border-success/75 active:border-warning/75 active:border-info/75 active:border-border active:bg-none active:shadow-[inset_0_3px_5px_rgba(0,0,0,0.125)] active:scale-95");
+@source inline("active:bg-primary/75 active:bg-secondary/75 active:bg-destructive/75 active:bg-success/75 active:bg-warning/75 active:bg-info/75 active:border-primary/75 active:border-secondary/75 active:border-destructive/75 active:border-success/75 active:border-warning/75 active:border-info/75 active:border-border active:bg-none active:shadow-[inset_0_3px_5px_rgb(0_0_0/0.125)] active:scale-95");
 
 /* Disabled state utilities */
 @source inline("disabled:bg-transparent disabled:shadow-none disabled:opacity-65 disabled:pointer-events-none");
@@ -57,6 +57,9 @@
 /* Interaction & Cursor utilities */
 @source inline("cursor-pointer select-none touch-manipulation opacity-90 overflow-hidden");
 
+/* cmdk row selection (React 19 — aria-selected, not data-selected) */
+@source inline("aria-selected:bg-accent aria-selected:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground");
+
 /* Transition utilities */
 @source inline("transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-150 ease-in-out");
 
@@ -66,13 +69,16 @@
 /* Group & State utilities */
 @source inline("group/badge has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 light:aria-invalid:ring-destructive/40 aria-invalid:border-destructive");
 
-/* Z-index elevation utilities */
-@source inline("z-[var(--z-debug)] z-[var(--z-sticky-page)] z-[var(--z-background)] z-[var(--z-content)] z-[var(--z-popover)] z-[var(--z-modal-backdrop)] z-[var(--z-modal)] z-[var(--z-tooltip)] z-[var(--z-sticky-content)] z-[var(--z-floating)]");
-
 /* Hit-area utilities (referenced from TSX / docs; @utility defines behavior) */
 @source inline("hit-area-4 hit-area-6 hit-area-debug");
 
-
+/* Token system — split for clarity. Each file owns one concern.
+ * Loaded order matters: base tokens before utilities that may reference them. */
+@import "./styles/colors.css";    /* palette + semantic color tokens */
+@import "./styles/motion.css";    /* duration + easing tokens (MOTION.md) */
+@import "./styles/shadows.css";   /* elevated-surface shadow tokens */
+@import "./styles/z-index.css";   /* stacking only — not surface depth */
+@import "./styles/hit-area.css";  /* expanded pointer targets */
 
 /* Custom dark mode variant - matches when .dark class is on element or ancestor */
 /* Non-dark theme — .light (warm paper) uses light: utilities */
@@ -252,6 +258,18 @@
     --color-card: var(--card);
     --color-foreground: var(--foreground);
     --color-background: var(--background);
+    /* ─── Radius scale ──────────────────────────────────────────────────
+     * Lives in @theme (not a separate file) because Tailwind v4 requires
+     * --radius-* tokens here to generate the `rounded-*` utilities.
+     * Base: --radius = 0.45rem (see merged theme variables).
+     *
+     * Usage convention:
+     *   rounded-sm   — kbd, small inline pills, dense controls
+     *   rounded-md   — inputs, buttons (default)
+     *   rounded-lg   — Cards, panels (default Card radius)
+     *   rounded-xl   — modals, sheets (heavier focus surfaces)
+     *   rounded-2xl+ — marketing/decorative only; avoid in product UI
+     */
     --radius-sm: calc(var(--radius) - 4px);
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
@@ -798,165 +816,6 @@
    ============================================ */
 
 :root {
-    /* ============================================
-       Z-Index Elevation Scale
-       ============================================
-
-       Z-Index Scale Reference Table:
-       ┌─────────────────────┬──────┬─────────────────────────────────────────────┐
-       │ Variable            │ Value│ Use Case                                    │
-       ├─────────────────────┼──────┼─────────────────────────────────────────────┤
-       │ --z-base            │  0   │ Base layer, default stacking                │
-       │ --z-background      │  0   │ Background decorative elements             │
-       │ --z-content         │ 10   │ Standard content layer                     │
-       │ --z-sticky-content  │ 15   │ Sticky content within containers            │
-       │                     │      │ (card headers, table headers)               │
-       │ --z-sticky-page     │ 20   │ Page-level sticky elements                  │
-       │                     │      │ (page headers, navigation bars)             │
-       │ --z-floating        │ 30   │ Floating panels, sidebars                   │
-       │ --z-modal-backdrop  │ 40   │ Modal backdrops/overlays                    │
-       │ --z-modal           │ 50   │ Modal content (dialogs, sheets)            │
-       │ --z-popover         │ 60   │ Dropdowns, select menus, popovers          │
-       │ --z-tooltip         │ 70   │ Tooltips (highest interactive layer)        │
-       │ --z-debug           │ 9999 │ Debug tools (development only)              │
-       └─────────────────────┴──────┴─────────────────────────────────────────────┘
-
-       Stacking Context Hierarchy (bottom to top):
-       ┌─────────────────────────────────────────────────────────────────────────┐
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-debug (9999) - Debug tools                                   │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-tooltip (70) - Tooltips                                      │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-popover (60) - Dropdowns, selects, popovers                │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-modal (50) - Modal content                                  │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-modal-backdrop (40) - Modal backdrops                       │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-floating (30) - Sidebars, floating panels                   │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-sticky-page (20) - Page headers, navigation                 │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-sticky-content (15) - Card headers, table headers            │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-content (10) - Standard content                             │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       │  ┌───────────────────────────────────────────────────────────────┐    │
-       │  │ z-base / z-background (0) - Base layer, backgrounds          │    │
-       │  └───────────────────────────────────────────────────────────────┘    │
-       │                                                                         │
-       └─────────────────────────────────────────────────────────────────────────┘
-
-       Component Mapping Table (Before Refactoring):
-       ┌─────────────────────────────────────┬──────────┬──────────────────────────┐
-       │ Component                           │ Old Value│ New Variable             │
-       ├─────────────────────────────────────┼──────────┼──────────────────────────┤
-       │ Card sticky header                  │ z-20     │ --z-sticky-content (15)  │
-       │ Page header (AppLayout)             │ z-10     │ --z-sticky-page (20)     │
-       │ Sidebar                             │ z-10     │ --z-floating (30)        │
-       │ Sidebar handle                      │ z-20     │ --z-sticky-page (20)     │
-       │ Dialog overlay                      │ z-50     │ --z-modal-backdrop (40)  │
-       │ Dialog content                      │ z-50     │ --z-modal (50)            │
-       │ Sheet content                       │ z-50     │ --z-modal (50)            │
-       │ Dropdown menu                       │ z-50     │ --z-popover (60)          │
-       │ Select dropdown                     │ z-50     │ --z-popover (60)          │
-       │ Popover                             │ z-50     │ --z-popover (60)          │
-       │ Tooltip                             │ z-50     │ --z-tooltip (70)          │
-       │ Combobox                            │ z-50     │ --z-popover (60)          │
-       │ Enhanced select                     │ z-50     │ --z-popover (60)          │
-       │ Separator decorations               │ z-index:1│ --z-content (10)         │
-       │ Frosted glass backgrounds           │ z-0      │ --z-background (0)        │
-       │ Card content layer                  │ z-10     │ --z-content (10)         │
-       │ Debug panel                         │ z-[9997] │ --z-debug (9999)          │
-       │ Color picker                        │ z-[9999] │ --z-popover (60)         │
-       └─────────────────────────────────────┴──────────┴──────────────────────────┘
-
-       Key Relationships:
-       - Card sticky headers (15) < Page headers (20) - Prevents scroll conflicts
-       - Sticky content (15) < Sticky page (20) - Ensures page nav stays on top
-       - Floating panels (30) > Page headers (20) - Sidebars overlay content
-       - Modals (50) > Floating (30) - Modals overlay everything
-       - Popovers (60) > Modals (50) - Dropdowns can appear in modals
-       - Tooltips (70) > Popovers (60) - Tooltips are highest interactive layer
-    */
-
-    /* Base layer - default stacking context */
-    --z-base: 0;
-
-    /* Background layer - decorative elements behind content */
-    --z-background: 0;
-
-    /* Content layer - standard content elements */
-    --z-content: 10;
-
-    /* Sticky content layer - sticky elements within containers
-     * Used for: card headers, table headers, section headers
-     * Must be below page-level sticky elements to prevent conflicts
-     */
-    --z-sticky-content: 15;
-
-    /* Sticky page layer - page-level sticky elements
-     * Used for: page headers, navigation bars, top bars
-     * Must be above sticky-content to ensure page navigation works
-     */
-    --z-sticky-page: 20;
-
-    /* Floating layer - floating panels and sidebars
-     * Used for: sidebars, floating panels, slide-out menus
-     * Positioned above page content but below modals
-     */
-    --z-floating: 30;
-
-    /* Modal backdrop layer - modal overlays and backdrops
-     * Used for: dialog overlays, sheet backdrops
-     * Positioned below modal content but above floating panels
-     */
-    --z-modal-backdrop: 40;
-
-    /* Modal layer - modal content
-     * Used for: dialog content, sheet content, alert dialogs
-     * Positioned above backdrops but below popovers
-     */
-    --z-modal: 50;
-
-    /* Popover layer - dropdowns and popovers
-     * Used for: dropdown menus, select dropdowns, popovers, comboboxes
-     * Positioned above modals to allow dropdowns in modal contexts
-     */
-    --z-popover: 60;
-
-    /* Tooltip layer - tooltips (highest interactive layer)
-     * Used for: tooltips, hover cards
-     * Highest interactive layer to ensure tooltips appear above all UI
-     */
-    --z-tooltip: 9998;
-
-    /* Debug layer - debug tools (development only)
-     * Used for: debug panels, debug overlays, development tools
-     * Extremely high value to ensure debug tools are always visible
-     */
-    --z-debug: 9999;
-
-    /* Color system variables from colors.css */
     /* Primary scale — blue hue 240; toned down vs prior (lower L / slightly less chroma on saturated stops) */
     --primary-100: oklch(0.655 0.11 240);
     --primary-200: oklch(0.655 0.135 240);
@@ -969,21 +828,24 @@
        Semantic Color Scales — classic light (success / warning / danger / info)
        ============================================ */
 
-    /* Success Color Scale (Light Mode) - Green (Hue 142) */
-    --success-100: oklch(0.95 0.08 142);
-    --success-200: oklch(0.90 0.10 142);
-    --success-300: oklch(0.75 0.12 142);
-    --success-400: oklch(0.60 0.14 142);
-    --success-500: oklch(0.50 0.15 142);
-    --success-600: oklch(0.40 0.18 142);
-
-    /* Warning Color Scale (Light Mode) - Orange (Hue 65) */
-    --warning-100: oklch(0.95 0.08 65);
-    --warning-200: oklch(0.90 0.10 65);
-    --warning-300: oklch(0.85 0.12 65);
-    --warning-400: oklch(0.75 0.14 65);
-    --warning-500: oklch(0.70 0.15 65);
-    --warning-600: oklch(0.60 0.18 65);
+    /* Success Color Scale (Light Mode) - Green (Hue 135)
+       Was 142 (cool emerald), shifted to 135 — slightly warmer to harmonize
+       with the warm-paper background (hue 95). */
+    --success-100: oklch(0.95 0.08 135);
+    --success-200: oklch(0.90 0.10 135);
+    --success-300: oklch(0.75 0.12 135);
+    --success-400: oklch(0.60 0.14 135);
+    --success-500: oklch(0.50 0.15 135);
+    --success-600: oklch(0.40 0.18 135);
+
+    /* Warning Color Scale (Light Mode) - Amber (Hue 80)
+       Was hue 65 which is olive/khaki in OKLCH, not orange — fixed to true amber. */
+    --warning-100: oklch(0.95 0.08 80);
+    --warning-200: oklch(0.90 0.10 80);
+    --warning-300: oklch(0.85 0.12 80);
+    --warning-400: oklch(0.75 0.14 80);
+    --warning-500: oklch(0.70 0.15 80);
+    --warning-600: oklch(0.60 0.18 80);
 
     /* Destructive Color Scale (Light Mode) - Red (Hue 25) */
     --danger-100: oklch(0.95 0.08 25);
@@ -1023,42 +885,73 @@
     --info-foreground: oklch(0.98 0 0);
 
     /* Additional variables from index.css */
-    /* Light / system UI — Claude-adjacent warm paper (#FAF9F5 ≈ oklch(0.982 0.0054 95)) */
+    /* ============================================
+       Light / system UI — Claude-adjacent warm paper
+       (#FAF9F5 ≈ oklch(0.982 0.0054 95))
+
+       Surface model (per ELEVATION.md — the 2+1 rule):
+         --surface-a  = --background  (page, the "outer" surface)
+         --surface-b  = --muted       (card/panel, the "inner" surface)
+         --surface-elevated = --popover (modals, sheets, popovers, dropdowns)
+       Cap inline nesting at 2 surfaces (A then B). Past that, use spacing
+       and uppercase labels, NOT a third shade.
+       ============================================ */
+
     --background: oklch(0.982 0.0054 95);
     --foreground: oklch(0.2416 0.0219 57);
-    /* Surfaces: stepped darker than page bg for readable elevation */
-    --card: oklch(0.966 0.0054 95);
+
+    /* Card === popover by value. Aliased so the relationship is honest.
+       Visual elevation for popover comes from .nqui-elevated (shadow), not color. */
+    --card: oklch(0.993 0.003 95);
     --card-foreground: oklch(0.2416 0.0219 57);
-    --popover: oklch(0.966 0.0054 95);
-    --popover-foreground: oklch(0.2416 0.0219 57);
-    --secondary: oklch(0.928 0.008 95);
+    --popover: var(--card);
+    --popover-foreground: var(--card-foreground);
+
+    /* Secondary — softer interactive surface (secondary button, badge bg).
+       Lighter than muted so the two read as distinct roles. */
+    --secondary: oklch(0.950 0.006 95);
     --secondary-foreground: oklch(0.3067 0.0309 56.81);
+
+    /* Muted — surface B in the 2+1 rule. Used as the inner panel color. */
     --muted: oklch(0.914 0.007 95);
     --muted-foreground: oklch(0.5576 0.0222 57.81);
-    /* Slightly deeper than sidebar/card so row hovers read on pale paper */
-    --accent: oklch(0.932 0.007 95);
+
+    /* Accent — hover/selection state. Must be distinct from BOTH muted (0.914)
+       AND border (0.892). Bumped from 0.895 to 0.880 for clear edge separation. */
+    --accent: oklch(0.880 0.008 95);
     --accent-foreground: oklch(0.2416 0.0219 57);
+
     --border: oklch(0.892 0.006 95);
     --input: oklch(0.892 0.006 95);
 
-    /* Chart colors */
-    --chart-1: oklch(0.809 0.105 251.813);
-    --chart-2: oklch(0.623 0.214 259.815);
-    --chart-3: oklch(0.546 0.245 262.881);
-    --chart-4: oklch(0.488 0.243 264.376);
-    --chart-5: oklch(0.424 0.199 265.638);
+    /* ─── Semantic surface aliases (the 2+1 model) ──────────────────────── */
+    --surface-a: var(--background);
+    --surface-b: var(--muted);
+    --surface-elevated: var(--popover);
+
+    /* Chart colors — CATEGORICAL palette. Distinct hues at matched lightness
+       so multi-series charts are actually readable. For SEQUENTIAL (ordinal)
+       data use shades of --primary instead. */
+    --chart-1: oklch(0.605 0.215 240);  /* blue (primary) */
+    --chart-2: oklch(0.680 0.180 35);   /* orange */
+    --chart-3: oklch(0.620 0.165 150);  /* green */
+    --chart-4: oklch(0.580 0.220 295);  /* purple */
+    --chart-5: oklch(0.760 0.155 80);   /* amber */
 
     /* Layout */
     --radius: 0.45rem;
 
-    /* Sidebar — darker than page so rail + row hovers read clearly */
-    --sidebar: oklch(0.953 0.006 95);
+    /* Sidebar — slightly LIGHTER than page (lifts forward, matches dark mode
+       direction). Was 0.953 (darker than page) which inverted the convention
+       used by macOS / Linear / Vercel. */
+    --sidebar: oklch(0.988 0.004 95);
     --sidebar-foreground: oklch(0.2416 0.0219 57);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
-    --sidebar-accent: oklch(0.904 0.009 95);
+    /* Sidebar-accent (hover) — needs to be visible against the now-lighter sidebar */
+    --sidebar-accent: oklch(0.940 0.007 95);
     --sidebar-accent-foreground: oklch(0.205 0.015 55);
-    --sidebar-border: oklch(0.878 0.007 95);
+    --sidebar-border: oklch(0.920 0.006 95);
     --sidebar-ring: var(--ring);
 }
 
@@ -1081,21 +974,22 @@
        Semantic Color Scales - Dark Mode
        ============================================ */
 
-    /* Success Color Scale (Dark Mode) - Green (Hue 142) */
-    --success-100: oklch(0.40 0.15 142);
-    --success-200: oklch(0.45 0.18 142);
-    --success-300: oklch(0.50 0.20 142);
-    --success-400: oklch(0.55 0.22 142);
-    --success-500: oklch(0.65 0.20 142);
-    --success-600: oklch(0.70 0.22 142);
-
-    /* Warning Color Scale (Dark Mode) - Orange (Hue 65) */
-    --warning-100: oklch(0.50 0.15 65);
-    --warning-200: oklch(0.55 0.18 65);
-    --warning-300: oklch(0.60 0.20 65);
-    --warning-400: oklch(0.65 0.22 65);
-    --warning-500: oklch(0.75 0.15 65);
-    --warning-600: oklch(0.80 0.18 65);
+    /* Success Color Scale (Dark Mode) - Green (Hue 135 — matches light) */
+    --success-100: oklch(0.40 0.15 135);
+    --success-200: oklch(0.45 0.18 135);
+    --success-300: oklch(0.50 0.20 135);
+    --success-400: oklch(0.55 0.22 135);
+    --success-500: oklch(0.65 0.20 135);
+    --success-600: oklch(0.70 0.22 135);
+
+    /* Warning Color Scale (Dark Mode) - Amber (Hue 80)
+       Was hue 65 which is olive/khaki in OKLCH, not orange — fixed to true amber. */
+    --warning-100: oklch(0.50 0.15 80);
+    --warning-200: oklch(0.55 0.18 80);
+    --warning-300: oklch(0.60 0.20 80);
+    --warning-400: oklch(0.65 0.22 80);
+    --warning-500: oklch(0.75 0.15 80);
+    --warning-600: oklch(0.80 0.18 80);
 
     /* Destructive Color Scale (Dark Mode) - Red (Hue 25) */
     --danger-100: oklch(0.40 0.15 25);
@@ -1117,77 +1011,79 @@
        System Color Mappings - Dark Mode
        ============================================ */
 
-    /* Primary Colors - Mapped to color scales */
+    /* Primary Colors - Mapped to color scales.
+       Foregrounds aligned with global --foreground (0.92) for eye-strain
+       consistency. Was 0.98 (harsh on dark backgrounds). */
     --primary: var(--primary-500);
-    --primary-foreground: oklch(0.98 0 0); /* Light text for contrast */
+    --primary-foreground: oklch(0.92 0 0);
     --primary-hover: var(--primary-400);
-    --ring: var(--primary-500); /* Focus ring uses primary color */
+    --ring: var(--primary-500);
 
     /* Semantic Colors - Mapped to color scales */
     --success: var(--success-500);
-    --success-foreground: oklch(0.98 0 0);
+    --success-foreground: oklch(0.92 0 0);
 
     --warning: var(--warning-500);
-    --warning-foreground: oklch(0.985 0 0);
+    --warning-foreground: oklch(0.92 0 0);
 
     --destructive: var(--danger-500);
-    --destructive-foreground: oklch(0.98 0 0);
+    --destructive-foreground: oklch(0.92 0 0);
 
     --info: var(--info-500);
-    --info-foreground: oklch(0.98 0 0);
+    --info-foreground: oklch(0.92 0 0);
 
     /* Additional variables from index.css */
     /* System UI colors for dark mode (unique to index.css)
-       Softened foreground (oklch 0.92 ≈ #e6e6e6) for reduced eye strain vs near-pure white */
+       Softened foreground (oklch 0.92 ≈ #e6e6e6) for reduced eye strain vs near-pure white.
+       Surface model — see ELEVATION.md (the 2+1 rule). */
     --background: oklch(0.16 0 0);
     --foreground: oklch(0.92 0 0);
+
+    /* Card === popover by value (aliased — visual lift via .nqui-elevated shadow) */
     --card: oklch(0.205 0 0);
     --card-foreground: oklch(0.92 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.92 0 0);
-    --secondary: oklch(0.274 0.003 0);
+    --popover: var(--card);
+    --popover-foreground: var(--card-foreground);
+
+    /* Secondary — softer interactive surface. Lighter than muted so the two
+       read as distinct roles (was 0.274, too close to muted 0.24). */
+    --secondary: oklch(0.30 0.003 0);
     --secondary-foreground: oklch(0.92 0 0);
+
+    /* Muted — surface B in the 2+1 rule */
     --muted: oklch(0.24 0.002 0);
     --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.27 0.003 0);
+
+    /* Accent — hover/selection. More prominent than muted AND distinct from border. */
+    --accent: oklch(0.32 0.003 0);
     --accent-foreground: oklch(0.92 0 0);
-    --border: oklch(0.34 0.004 0);
-    --input: oklch(0.30 0.003 0);
 
-    /* Chart colors (same for both modes) */
-    --chart-1: oklch(0.809 0.105 251.813);
-    --chart-2: oklch(0.623 0.214 259.815);
-    --chart-3: oklch(0.546 0.245 262.881);
-    --chart-4: oklch(0.488 0.243 264.376);
-    --chart-5: oklch(0.424 0.199 265.638);
+    /* Border — softened from 0.34 to 0.27 so edges read as a "fold" rather than
+       a drawn line. Closer to Linear / Vercel dark-mode convention. */
+    --border: oklch(0.27 0.004 0);
+    --input: oklch(0.30 0.003 0);
 
-    /* Sidebar for dark mode */
+    /* ─── Semantic surface aliases (the 2+1 model) ──────────────────────── */
+    --surface-a: var(--background);
+    --surface-b: var(--muted);
+    --surface-elevated: var(--popover);
+
+    /* Chart colors — CATEGORICAL palette (matches light mode hues, brighter L
+       for dark-mode legibility). For SEQUENTIAL data use shades of --primary. */
+    --chart-1: oklch(0.700 0.180 240);  /* blue */
+    --chart-2: oklch(0.740 0.160 35);   /* orange */
+    --chart-3: oklch(0.700 0.150 150);  /* green */
+    --chart-4: oklch(0.680 0.190 295);  /* purple */
+    --chart-5: oklch(0.820 0.140 80);   /* amber */
+
+    /* Sidebar — slightly lighter than page (lifts forward). Matches existing
+       direction; light mode now matches this convention too. */
     --sidebar: oklch(0.205 0.001 0);
     --sidebar-foreground: oklch(0.92 0 0);
     --sidebar-primary: var(--primary);
     --sidebar-primary-foreground: var(--primary-foreground);
     --sidebar-accent: oklch(0.269 0.003 0);
     --sidebar-accent-foreground: oklch(0.92 0 0);
-    --sidebar-border: oklch(0.34 0.004 0);
+    --sidebar-border: oklch(0.27 0.004 0);
     --sidebar-ring: oklch(0.556 0 0);
-}
-
-/* Elevation component styles from elevation.css */
-/**
-   * Card surface elevation — semantic --border + light shadow stack.
-   * Dark mode matches v0.4.x (no inset / multi-stack drop shadows).
-   * Lives here with the elevation system (was JS-injected from card.tsx).
-   */
-  .nqui-card {
-    border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
-    box-shadow:
-      0 1px 0 0 color-mix(in oklch, var(--border) 40%, transparent),
-      0 1px 2px 0 oklch(0.15 0 0 / 0.05);
-  }
-
-  .dark .nqui-card {
-    border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
-    box-shadow:
-      0 1px 0 0 color-mix(in oklch, var(--border) 40%, transparent),
-      0 1px 2px 0 oklch(0 0 0 / 0.3);
-  }
+}

package/docs/components/README.md

@@ -14,7 +14,8 @@ Implementation guides for each component. **AI Skill:** Optimized for AI/LLM con
 
 ## Start here (humans)
 
-1. **Know your task?** Open **`docs/nqui-skills/HUMAN_GUIDE.md`** (in the package) or **`node_modules/@nqlib/nqui/docs/nqui-skills/HUMAN_GUIDE.md`** after install — maps *forms, toolbar, dashboard, empty/loading, …* → which doc to open first.
+1. **Building a screen (not looking up one prop)?** Read **`docs/nqui-skills/COMPOSITION.md`** and run the dev app **Recipes** hub (`npm run dev` → `/`).
+2. **Know your task?** Open **`docs/nqui-skills/HUMAN_GUIDE.md`** (in the package) or **`node_modules/@nqlib/nqui/docs/nqui-skills/HUMAN_GUIDE.md`** after install — maps *forms, toolbar, dashboard, empty/loading, …* → which doc to open first.
 2. **Pick one component** → **`nqui-<kebab-case>.md`** in this folder (e.g. `nqui-combobox.md`). Don’t load every file.
 3. **Need “which component?” tables** → scroll to **When to Use (Selection & Action Components)** and **Shared Conventions** below; skip **Prerequisites** until you wire build/CSS.
 4. **Deep layout / scroll / sticky** → **Layout & Scroll Patterns** (implementation-heavy; skip if you’re only choosing a component).
@@ -351,6 +352,8 @@ Use these rules to choose the right component. **Selection** = user picks from o
 | CommandPalette | [nqui-command-palette.md](./nqui-command-palette.md) | Full Cmd+K palette. |
 | TableOfContents | [nqui-table-of-contents.md](./nqui-table-of-contents.md) | Doc section links from headings. |
 
+**Cmd+K / cmdk row highlight (React 19):** Fixed in **nqui ≥ 0.6.1** (`aria-selected:bg-accent` in `floatingListItemInteractive`). If every row still looks selected on an older version, see [nqui-command-palette.md](./nqui-command-palette.md).
+
 ---
 
 ## Overlays – When to Use

package/docs/components/nqui-combobox.md

@@ -130,16 +130,29 @@ When `**showPanelSearch**` is false, the panel `**CommandInput**` is wrapped in
 ## cmdk constraints
 
 - **List `id`:** cmdk **overwrites** the `id` on `Command.List`. Do not assume `useId()` matches the DOM — the combobox mirrors the mounted list element’s id into context for `**aria-controls`**.
-- **Selection styling:** Prefer `**aria-selected`** / `**data-selected**` (boolean) utilities. Patterns like `**data-[selected=true]:**` can fail because the attribute is not always the string `"true"`.
 - **Panel input:** Keep the cmdk input **mounted** when filtering (see `**sr-only`** branch above).
 
+### Row selection styling (React 19 + cmdk)
+
+cmdk sets `data-selected` / `aria-selected` on **every** row. **React 19** renders booleans as strings (`data-selected="false"`, `aria-selected="false"`), not absent attributes.
+
+| Tailwind utility | Compiled selector | Safe with React 19? |
+| ---------------- | ----------------- | ------------------- |
+| `data-selected:bg-accent` | `[data-selected]` | **No** — matches `"false"` too → all rows highlighted |
+| `data-[selected=true]:bg-accent` | `[data-selected=true]` | Yes — selected row only |
+| `data-[selected=false]:bg-transparent` | `[data-selected=false]` | Yes — reset unselected rows when overriding CommandItem |
+| `aria-selected:bg-accent` | `[aria-selected=true]` | **Yes** — preferred (used by `ComboboxItem` in source) |
+
+nqui **ComboboxItem** and **CommandItem** (≥ 0.6.1) use `aria-selected:bg-accent` via `floatingListItemInteractive`.
+
 ## Troubleshooting
 
 
 | Symptom                                                      | What to check                                                                                                                                                                                                                                                                                                                                                      |
 | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | Trigger `**aria-controls**` missing or wrong                 | `**ComboboxList**` must mount while the popover is open so the list ref can read `**id**`.                                                                                                                                                                                                                                                                         |
-| Row highlight / keyboard selection looks wrong               | Styles targeting only `**data-[selected=true]**`; use `**aria-selected:**` or boolean `**data-selected**` variants.                                                                                                                                                                                                                                                |
+| **Every row** has muted/accent background (looks all selected) | DevTools: unselected rows have `data-selected="false"`. Bare `data-selected:` / `[data-selected]` CSS matches them. Use `aria-selected:bg-accent` or `data-[selected=true]:` + `data-[selected=false]:bg-transparent`. See `nqui-command.md`. |
+| Row highlight / keyboard selection looks wrong               | Not only `data-[selected=true]` — with React 19, also avoid `data-selected:bg-accent`. Prefer `aria-selected:bg-accent`. |
 | **Mouse hover / click on rows does nothing; keyboard works** | Row styles must not use a broad `**data-[disabled]:pointer-events-none`** (can match any `data-disabled` value). Use `**aria-disabled:**` (or `**data-[disabled=true]:**`) so only disabled items drop pointer events. Hidden panel search is wrapped with `**sr-only**` + `**pointer-events-none**`; the cmdk `**CommandInput**` keeps `**pointer-events-auto**`. |
 | Filter feels out of sync                                     | Avoid hiding the panel `**CommandInput**` with `**display: none**`.                                                                                                                                                                                                                                                                                                |
 

package/docs/components/nqui-command-palette.md

@@ -23,7 +23,14 @@ import { CommandPalette } from "@nqlib/nqui"
 <CommandPalette shortcutEnabled={false} ... />
 ```
 
+## Row highlight (Cmd+K list)
+
+`CommandItem` uses `floatingListItemInteractive` with **`aria-selected:bg-accent`** (nqui ≥ 0.6.1). Do not add `data-selected:bg-accent` on custom rows — React 19 sets `data-selected="false"` on unselected cmdk items, and `[data-selected]` would highlight every row.
+
+If an older nqui version still shows all rows filled: upgrade to **0.6.1+** or see `nqui-command.md` for a temporary `CommandItem` className override.
+
 ## Notes
 
 - Keyboard listener on window. May conflict with other global shortcuts.
 - Custom title/description for accessibility.
+- Prefer plain `CommandList` in the showcase; wrap in `ScrollArea` only when you need a bounded height — scroll behavior is separate from row highlight.

package/docs/components/nqui-command.md

@@ -37,3 +37,44 @@ import {
   <CommandList>...</CommandList>
 </CommandDialog>
 ```
+
+## CommandItem selection styling (cmdk + React 19)
+
+Default `CommandItem` classes come from `floatingListItemInteractive` in `lib/floating-surface.ts`:
+
+- `data-selected:bg-accent` → CSS **`[data-selected]`** (any value)
+- `data-[highlighted]:bg-accent` — Radix pointer highlight
+- `focus:bg-accent` — keyboard focus
+
+cmdk sets **`data-selected` and `aria-selected` on every row**. With **React 19**, unselected rows render as `data-selected="false"` / `aria-selected="false"` (strings), not omitted attributes.
+
+### Symptom
+
+Every list row has a muted/accent pill background; hover/keyboard should highlight **one** row only.
+
+### What to check
+
+1. Inspect an idle row: `data-selected="false"` present → bare `data-selected:` utilities will still match.
+2. Only **one** row should have `aria-selected="true"` (unless two items share the same cmdk `value`).
+3. Do not assume “only one selected” in the DOM means correct CSS — check computed `background-color`.
+
+### Do / don't (Tailwind)
+
+| Do | Don't |
+| -- | ----- |
+| `aria-selected:bg-accent` | `data-selected:bg-accent` |
+| `data-[selected=true]:bg-accent` | `data-[selected]:bg-accent` |
+| `data-[selected=false]:bg-transparent` when overriding defaults | `bg-muted` on every row “to match design” |
+
+**nqui ≥ 0.6.1:** `floatingListItemInteractive` uses `aria-selected:bg-accent` (same as ComboboxItem).
+
+### Consumer override (nqui &lt; 0.6.1 only)
+
+```tsx
+<CommandItem
+  className="bg-transparent data-[selected=false]:!bg-transparent aria-selected:bg-accent aria-selected:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
+  ...
+>
+```
+
+See `nqui-command-palette.md` for Cmd+K-specific notes.