@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/u0-primitives/button/Button.svelte

@@ -9,6 +9,7 @@
     loading?: boolean;
     class?: string;
     'aria-label'?: string;
+    'aria-expanded'?: boolean;
     onclick?: (e: MouseEvent) => void;
     children?: Snippet;
     iconLeading?: Snippet;
@@ -23,6 +24,7 @@
     loading = false,
     class: className = '',
     'aria-label': ariaLabel,
+    'aria-expanded': ariaExpanded,
     onclick,
     children,
     iconLeading,
@@ -45,6 +47,7 @@
   class:is-pressed={isPressed}
   disabled={disabled || loading}
   aria-label={ariaLabel}
+  aria-expanded={ariaExpanded}
   onclick={onclick}
   onpointerdown={handlePointerDown}
   onpointerup={handlePointerUp}
@@ -91,7 +94,7 @@
     transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
     background: transparent;
     color: var(--color-text-primary);
-    padding: 0 var(--space-3);
+    padding: 0 var(--ui-pad-x);
     line-height: 1;
   }
 
@@ -139,20 +142,23 @@
 
   /* --- Variants --- */
 
+  /* Primary = inverted neutral (high-contrast), NOT an accent fill.
+     Locked rule: accent = live edge, never a fill. Accent shows on
+     :focus-visible. Reads as primary under any theme and any user accent. */
   .variant-primary {
-    background: var(--color-accent);
+    background: var(--color-text-primary);
     color: var(--color-bg-app);
-    border-color: var(--color-accent);
+    border-color: var(--color-text-primary);
   }
 
   .variant-primary:hover:not(:disabled) {
-    background: var(--color-accent-hover);
-    border-color: var(--color-accent-hover);
+    background: var(--color-text-secondary);
+    border-color: var(--color-text-secondary);
   }
 
   .variant-primary.is-pressed:not(:disabled) {
-    background: var(--color-accent-active);
-    border-color: var(--color-accent-active);
+    background: var(--color-text-secondary);
+    border-color: var(--color-text-secondary);
   }
 
   .variant-secondary {
@@ -192,18 +198,18 @@
   }
 
   .variant-danger:hover:not(:disabled) {
-    background: rgba(193, 74, 74, 0.1);
+    background: color-mix(in srgb, var(--color-error) 12%, transparent);
   }
 
   .variant-danger.is-pressed:not(:disabled) {
-    background: rgba(193, 74, 74, 0.2);
+    background: color-mix(in srgb, var(--color-error) 22%, transparent);
   }
 
   /* --- Sizes --- */
 
-  .size-sm { height: 2rem; font-size: var(--text-xs); }
-  .size-md { height: 2.5rem; font-size: var(--text-sm); }
-  .size-lg { height: 3rem; font-size: var(--text-base); }
+  .size-sm { height: calc(var(--ui-control-h) - 4px); font-size: var(--ui-font-sm); }
+  .size-md { height: var(--ui-control-h); font-size: var(--ui-font); }
+  .size-lg { height: calc(var(--ui-control-h) + 6px); font-size: var(--ui-font); }
 
   /* --- Loading Spinner --- */
 
@@ -233,7 +239,6 @@
 
   @media (prefers-reduced-motion: reduce) {
     .ds-button { transition: none; }
-    .is-pressed:not(:disabled) { }
     @keyframes ds-button-spin {
       from { transform: translate(-50%, -50%) rotate(0deg); }
       to { transform: translate(-50%, -50%) rotate(360deg); }

package/dist/u0-primitives/button/Button.svelte.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     loading?: boolean;
     class?: string;
     'aria-label'?: string;
+    'aria-expanded'?: boolean;
     onclick?: (e: MouseEvent) => void;
     children?: Snippet;
     iconLeading?: Snippet;

package/dist/u0-primitives/button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA0DH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IACvD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AA2DH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/u0-primitives/button/Button.test.js

@@ -4,22 +4,22 @@ import Button from './Button.svelte';
 describe('Button', () => {
     afterEach(() => cleanup());
     it('renders a real <button> element', () => {
-        render(Button, { children: () => 'ok' });
+        render(Button, { children: (() => '') });
         expect(screen.getByRole('button')).toBeDefined();
     });
     it('calls onclick when clicked', async () => {
         const handleClick = vi.fn();
-        const { container } = render(Button, { children: () => 'tap', onclick: handleClick });
+        const { container } = render(Button, { children: (() => ''), onclick: handleClick });
         const btn = container.querySelector('button');
         await fireEvent.click(btn);
         expect(handleClick).toHaveBeenCalledTimes(1);
     });
     it('sets disabled attribute on the native button when disabled', () => {
-        const { container } = render(Button, { children: () => 'tap', disabled: true });
+        const { container } = render(Button, { children: (() => ''), disabled: true });
         expect(container.querySelector('button').hasAttribute('disabled')).toBe(true);
     });
     it('sets disabled attribute on the native button when loading', () => {
-        const { container } = render(Button, { children: () => 'tap', loading: true });
+        const { container } = render(Button, { children: (() => ''), loading: true });
         expect(container.querySelector('button').hasAttribute('disabled')).toBe(true);
     });
     it('sets aria-label when provided', () => {
@@ -28,31 +28,31 @@ describe('Button', () => {
         expect(btn.getAttribute('aria-label')).toBe('Submit form');
     });
     it('renders spinner element when loading is true', () => {
-        const { container } = render(Button, { children: () => 'tap', loading: true });
+        const { container } = render(Button, { children: (() => ''), loading: true });
         expect(container.querySelector('.ds-button-spinner')).not.toBeNull();
     });
     it('applies variant class', () => {
-        const { container } = render(Button, { children: () => 'tap', variant: 'danger' });
+        const { container } = render(Button, { children: (() => ''), variant: 'danger' });
         expect(container.querySelector('.variant-danger')).not.toBeNull();
     });
     it('applies size class', () => {
-        const { container } = render(Button, { children: () => 'tap', size: 'lg' });
+        const { container } = render(Button, { children: (() => ''), size: 'lg' });
         expect(container.querySelector('.size-lg')).not.toBeNull();
     });
     it('applies custom class', () => {
-        const { container } = render(Button, { children: () => 'tap', class: 'my-btn' });
+        const { container } = render(Button, { children: (() => ''), class: 'my-btn' });
         expect(container.querySelector('.my-btn')).not.toBeNull();
     });
     it('applies variant-secondary class', () => {
-        const { container } = render(Button, { children: () => 'tap', variant: 'secondary' });
+        const { container } = render(Button, { children: (() => ''), variant: 'secondary' });
         expect(container.querySelector('.variant-secondary')).not.toBeNull();
     });
     it('defaults type to "button"', () => {
-        const { container } = render(Button, { children: () => 'Go' });
+        const { container } = render(Button, { children: (() => '') });
         expect(container.querySelector('button').getAttribute('type')).toBe('button');
     });
     it('forwards custom type to the native button', () => {
-        const { container } = render(Button, { children: () => 'Go', type: 'submit' });
+        const { container } = render(Button, { children: (() => ''), type: 'submit' });
         expect(container.querySelector('button').getAttribute('type')).toBe('submit');
     });
 });

package/dist/u0-primitives/card/Card.svelte

@@ -30,11 +30,21 @@
   }: Props = $props();
 
   let isInteractive = $derived(variant === 'interactive' || !!onclick);
+  let cardAttrs = $derived(isInteractive ? {
+    role: 'button',
+    tabindex: 0,
+    onclick,
+    onkeydown: handleKeydown,
+    'aria-pressed': selected
+  } : {});
 
   function handleKeydown(e: KeyboardEvent) {
     if (isInteractive && (e.key === 'Enter' || e.key === ' ')) {
+      onkeydown?.(e);
+      if (e.defaultPrevented) return;
       e.preventDefault();
       onclick?.(new MouseEvent('click'));
+      return;
     }
     onkeydown?.(e);
   }
@@ -45,13 +55,9 @@
   style={style || undefined}
   class:is-interactive={isInteractive}
   class:is-selected={selected}
-  role={isInteractive ? "button" : "region"}
-  tabindex={isInteractive ? 0 : undefined}
-  onclick={isInteractive ? onclick : undefined}
+  {...cardAttrs}
   onmouseenter={onmouseenter}
   onmouseleave={onmouseleave}
-  onkeydown={isInteractive ? handleKeydown : undefined}
-  aria-pressed={isInteractive ? selected : undefined}
 >
   {#if header}
     <header class="ds-card-header">
@@ -81,7 +87,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--border-default);
+    border: var(--border-width-thin) solid var(--border-default);
     background: var(--color-card-bg);
     color: var(--color-card-text-primary);
     overflow: hidden;
@@ -90,24 +96,26 @@
   }
 
   .ds-card-header {
-    padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid var(--border-default);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    border-bottom: var(--border-width-thin) solid var(--border-default);
+    font-family: var(--font-mono);
     font-weight: 600;
     background: var(--color-bg-panel);
-    font-size: var(--text-sm);
+    font-size: var(--ui-label);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.08em;
+    color: var(--color-text-secondary);
   }
 
   .ds-card-content {
-    padding: var(--space-4);
+    padding: var(--ui-pad-x);
     flex: 1;
   }
 
   .ds-card-footer {
-    padding: var(--space-3) var(--space-4);
-    border-top: 1px solid var(--border-default);
-    background: var(--color-accent-faint);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    border-top: var(--border-width-thin) solid var(--border-default);
+    background: var(--color-bg-panel);
   }
 
   /* --- Variants --- */
@@ -123,11 +131,12 @@
     border-color: var(--border-subtle);
   }
 
+  /* 'glass' kept as an API alias but DE-GLASSED: opaque elevated panel,
+     no backdrop-filter. Blur = web2/Material; INSTRUMENT builds depth from
+     border + contrast, never frosted translucency. */
   .variant-glass {
-    background: rgba(24, 28, 32, 0.6);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: var(--color-bg-panel-elevated);
+    border: var(--border-width-thin) solid var(--border-default);
     color: var(--color-text-primary);
   }
 
@@ -136,17 +145,18 @@
     border-color: var(--color-card-border);
     background-image: repeating-linear-gradient(
       0deg,
-      transparent 0px,
-      transparent 1px,
-      rgba(255, 255, 255, 0.02) 1px,
-      rgba(255, 255, 255, 0.02) 2px
+      transparent 0,
+      transparent var(--border-width-thin),
+      rgba(255, 255, 255, 0.02) var(--border-width-thin),
+      rgba(255, 255, 255, 0.02) var(--border-width-default)
     );
   }
 
+  /* Hazard = destructive semantics → FIXED error hue, never the user accent. */
   .variant-hazard {
-    background: var(--color-accent-faint);
-    border-color: var(--color-accent);
-    color: var(--color-accent);
+    background: color-mix(in srgb, var(--color-error) 8%, transparent);
+    border-color: var(--color-error);
+    color: var(--color-error);
   }
 
   /* --- Interactive --- */
@@ -171,7 +181,7 @@
     position: absolute;
     inset: 0;
     pointer-events: none;
-    border: 1px solid transparent;
+    border: var(--border-width-thin) solid transparent;
     transition: border-color var(--transition-fast);
   }
 
@@ -180,10 +190,10 @@
     border-color: var(--color-accent);
     background: repeating-linear-gradient(
       45deg,
-      transparent 0px,
-      transparent 2px,
-      var(--color-accent-muted) 2px,
-      var(--color-accent-muted) 4px
+      transparent 0,
+      transparent var(--border-width-default),
+      var(--color-accent-muted) var(--border-width-default),
+      var(--color-accent-muted) var(--blur-md)
     );
   }
 
@@ -194,8 +204,26 @@
   }
 
   .is-selected.variant-hazard {
-    border-color: var(--color-accent);
-    background: var(--color-accent-subtle);
+    border-color: var(--color-error);
+    background: color-mix(in srgb, var(--color-error) 14%, transparent);
+  }
+
+  /* Hazard interactive states kept on the fixed error hue — never the user accent. */
+  .variant-hazard.is-interactive:hover {
+    border-color: var(--color-error);
+    background: color-mix(in srgb, var(--color-error) 12%, transparent);
+  }
+
+  .variant-hazard.is-interactive:focus-visible .ds-card-ring,
+  .is-selected.variant-hazard .ds-card-ring {
+    border-color: var(--color-error);
+    background: repeating-linear-gradient(
+      45deg,
+      transparent 0,
+      transparent var(--border-width-default),
+      var(--color-error) var(--border-width-default),
+      var(--color-error) var(--blur-md)
+    );
   }
 
   @media (prefers-reduced-motion: reduce) {

package/dist/u0-primitives/card/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AA0DH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,aAAa,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAoEH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/u0-primitives/card/Card.test.js

@@ -0,0 +1,86 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import Card from './Card.svelte';
+const textSnippet = (text) => createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+describe('Card', () => {
+    afterEach(() => cleanup());
+    it('renders the ds-card root element', () => {
+        const { container } = render(Card);
+        expect(container.querySelector('.ds-card')).not.toBeNull();
+    });
+    it('defaults to the elevated variant', () => {
+        const { container } = render(Card);
+        expect(container.querySelector('.variant-elevated')).not.toBeNull();
+    });
+    it('applies the requested variant class', () => {
+        const { container } = render(Card, { variant: 'hazard' });
+        expect(container.querySelector('.variant-hazard')).not.toBeNull();
+    });
+    it('applies a custom class', () => {
+        const { container } = render(Card, { class: 'my-card' });
+        expect(container.querySelector('.my-card')).not.toBeNull();
+    });
+    it('applies an inline style', () => {
+        const { container } = render(Card, { style: 'width: 200px' });
+        expect(container.querySelector('.ds-card').getAttribute('style')).toContain('width: 200px');
+    });
+    it('renders children content', () => {
+        const { container } = render(Card, { children: textSnippet('body') });
+        const content = container.querySelector('.ds-card-content');
+        expect(content).not.toBeNull();
+        expect(content.textContent).toContain('body');
+    });
+    it('renders header and footer snippets', () => {
+        const { container } = render(Card, {
+            header: textSnippet('head'),
+            footer: textSnippet('foot')
+        });
+        expect(container.querySelector('.ds-card-header').textContent).toContain('head');
+        expect(container.querySelector('.ds-card-footer').textContent).toContain('foot');
+    });
+    it('is not interactive by default (no button role)', () => {
+        const { container } = render(Card);
+        expect(container.querySelector('[role="button"]')).toBeNull();
+        expect(container.querySelector('.is-interactive')).toBeNull();
+    });
+    it('becomes interactive when an onclick handler is provided', () => {
+        const { container } = render(Card, { onclick: vi.fn() });
+        const card = container.querySelector('.ds-card');
+        expect(card.getAttribute('role')).toBe('button');
+        expect(card.getAttribute('tabindex')).toBe('0');
+        expect(container.querySelector('.is-interactive')).not.toBeNull();
+    });
+    it('becomes interactive for the interactive variant without onclick', () => {
+        const { container } = render(Card, { variant: 'interactive' });
+        expect(container.querySelector('[role="button"]')).not.toBeNull();
+    });
+    it('calls onclick when an interactive card is clicked', async () => {
+        const handleClick = vi.fn();
+        const { container } = render(Card, { onclick: handleClick });
+        await fireEvent.click(container.querySelector('.ds-card'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('triggers onclick on Enter key when interactive', async () => {
+        const handleClick = vi.fn();
+        const { container } = render(Card, { onclick: handleClick });
+        await fireEvent.keyDown(container.querySelector('.ds-card'), { key: 'Enter' });
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('triggers onclick on Space key when interactive', async () => {
+        const handleClick = vi.fn();
+        const { container } = render(Card, { onclick: handleClick });
+        await fireEvent.keyDown(container.querySelector('.ds-card'), { key: ' ' });
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('reflects selection via the is-selected class and aria-pressed', () => {
+        const { container } = render(Card, { selected: true, onclick: vi.fn() });
+        const card = container.querySelector('.ds-card');
+        expect(card.classList.contains('is-selected')).toBe(true);
+        expect(card.getAttribute('aria-pressed')).toBe('true');
+    });
+    it('renders the selection ring when selected', () => {
+        const { container } = render(Card, { selected: true });
+        expect(container.querySelector('.ds-card-ring')).not.toBeNull();
+    });
+});

package/dist/u0-primitives/command-palette/CommandPalette.svelte

@@ -174,6 +174,21 @@
     paramValues = {};
     currentParamIndex = 0;
   }
+
+  function handleOptionKeydown(e: KeyboardEvent, cmd: CommandSchema) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      selectCommand(cmd);
+    }
+  }
+
+  function handleSuggestionKeydown(e: KeyboardEvent, suggestion: string) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      inputValue = suggestion;
+      submitParameter();
+    }
+  }
   
   function submitParameter() {
     if (!activeCommand || !currentParam) return;
@@ -269,9 +284,15 @@
           ? getParameterPlaceholder(currentParam)
           : placeholder}
         disabled={isExecuting}
+        role="combobox"
         aria-autocomplete="list"
         aria-controls="suggestions-list"
         aria-expanded={filteredCommands.length > 0 || suggestions.length > 0}
+        aria-activedescendant={!activeCommand && filteredCommands.length > 0
+          ? `command-opt-${selectedIndex}`
+          : activeCommand && suggestions.length > 0
+            ? `suggestion-opt-${selectedIndex}`
+            : undefined}
       />
       
       {#if isExecuting}
@@ -289,10 +310,13 @@
       >
         {#each filteredCommands as cmd, i (cmd.id)}
           <li 
+            id="command-opt-${i}"
             role="option"
             aria-selected={i === selectedIndex}
+            tabindex={i === selectedIndex ? 0 : -1}
             class:selected={i === selectedIndex}
             onclick={() => selectCommand(cmd)}
+            onkeydown={(e) => handleOptionKeydown(e, cmd)}
           >
             <span class="command-name">/{cmd.path}</span>
             <span class="command-desc">{cmd.description}</span>
@@ -316,10 +340,13 @@
       >
         {#each suggestions as sug, i (sug)}
           <li 
+            id="suggestion-opt-${i}"
             role="option"
             aria-selected={i === selectedIndex}
+            tabindex={i === selectedIndex ? 0 : -1}
             class:selected={i === selectedIndex}
             onclick={() => { inputValue = sug; submitParameter(); }}
+            onkeydown={(e) => handleSuggestionKeydown(e, sug)}
           >
             {sug}
           </li>
@@ -369,21 +396,21 @@
     bottom: 100%;
     left: 0;
     right: 0;
-    margin-bottom: var(--space-2);
-    background: var(--color-bg-panel-elevated, #2a2a2a);
-    border: 1px solid var(--border-default, #333);
-    border-radius: var(--radius-lg, 0.5rem);
-    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.3));
+    margin-bottom: 2px;
+    background: var(--color-bg-panel-elevated);
+    border: var(--border-width-default) solid var(--border-default);
+    border-radius: 0;
+    box-shadow: none;
     overflow: hidden;
     z-index: 100;
   }
-  
+
   .input-bar {
     display: flex;
     align-items: center;
     gap: var(--space-2);
-    padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    border-bottom: 1px solid var(--border-default);
   }
   
   .input-bar.executing {
@@ -421,42 +448,48 @@
   }
   
   .spinner {
-    width: 16px;
-    height: 16px;
-    border: 2px solid var(--border-default);
-    border-top-color: var(--color-accent, var(--color-accent));
+    width: 14px;
+    height: 14px;
+    border: 1.5px solid var(--border-default);
+    border-top-color: var(--color-accent);
     border-radius: 50%;
     animation: spin 0.8s linear infinite;
   }
-  
+
   @keyframes spin {
     to { transform: rotate(360deg); }
   }
-  
+
   .command-list,
   .suggestion-list {
     list-style: none;
     margin: 0;
-    padding: var(--space-2) 0;
-    max-height: 200px;
+    padding: 0;
+    max-height: 220px;
     overflow-y: auto;
   }
-  
+
   .command-list li,
   .suggestion-list li {
     display: flex;
     align-items: center;
     gap: var(--space-3);
-    padding: var(--space-2) var(--space-4);
+    height: var(--ui-row-h);
+    padding: 0 var(--ui-pad-x);
     cursor: pointer;
-    transition: background var(--transition-fast, 120ms);
+    border-bottom: 1px solid var(--border-default);
+    transition: background var(--transition-fast) linear;
   }
-  
+
+  .command-list li:last-child,
+  .suggestion-list li:last-child { border-bottom: 0; }
+
   .command-list li:hover,
   .command-list li.selected,
   .suggestion-list li:hover,
   .suggestion-list li.selected {
-    background: var(--color-accent-subtle, var(--color-accent-muted));
+    background: var(--color-accent-subtle);
+    box-shadow: inset 2px 0 0 var(--color-accent);
   }
   
   .command-name {
@@ -485,26 +518,25 @@
   }
   
   .param-chip {
-    font-size: var(--text-xs);
-    padding: var(--space-1) var(--space-2);
-    border-radius: var(--radius-sm);
-    background: var(--color-bg-panel, #222);
-    color: var(--color-text-tertiary, #706858);
+    font-size: var(--ui-label);
+    font-family: var(--font-mono);
+    padding: 2px var(--ui-pad-y);
+    background: var(--color-bg-panel);
+    color: var(--color-text-tertiary);
     border: 1px solid transparent;
   }
-  
+
   .param-chip.required {
-    border-color: var(--color-accent-muted, var(--color-accent-muted));
+    border-color: var(--color-accent-muted);
   }
-  
+
   .param-chip.filled {
-    background: var(--color-accent-subtle, var(--color-accent-muted));
-    color: var(--color-accent, var(--color-accent));
+    background: var(--color-accent-subtle);
+    color: var(--color-accent);
   }
-  
+
   .param-chip.current {
-    border-color: var(--color-accent, var(--color-accent));
-    box-shadow: 0 0 0 1px var(--color-accent);
+    border-color: var(--color-accent);
   }
   
   .feedback {
@@ -514,13 +546,13 @@
   }
   
   .feedback.success {
-    color: var(--color-success, #27ae60);
-    background: rgba(39, 174, 96, 0.1);
+    color: var(--color-success);
+    background: color-mix(in srgb, var(--color-success) 10%, transparent);
   }
-  
+
   .feedback.error {
-    color: var(--color-error, #c0392b);
-    background: rgba(192, 57, 43, 0.1);
+    color: var(--color-error);
+    background: color-mix(in srgb, var(--color-error) 10%, transparent);
   }
   
   .help {
@@ -533,10 +565,10 @@
   }
   
   kbd {
-    background: var(--color-bg-canvas, #1a1a1a);
-    padding: 2px 6px;
-    border-radius: var(--radius-sm);
+    background: var(--color-bg-canvas);
+    padding: 1px 5px;
+    border: 1px solid var(--border-subtle);
     font-family: var(--font-mono);
-    font-size: 0.9em;
+    font-size: var(--ui-label);
   }
 </style>