@stephen-netu/design-system 0.2.2 → 0.5.1

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

@@ -94,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;
   }
 
@@ -142,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 {
@@ -195,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 --- */
 

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

@@ -96,24 +96,26 @@
   }
 
   .ds-card-header {
-    padding: var(--space-3) var(--space-4);
+    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);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
     border-top: var(--border-width-thin) solid var(--border-default);
-    background: var(--color-accent-faint);
+    background: var(--color-bg-panel);
   }
 
   /* --- Variants --- */
@@ -129,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(var(--blur-md));
-    -webkit-backdrop-filter: blur(var(--blur-md));
-    border: var(--border-width-thin) 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);
   }
 
@@ -149,10 +152,11 @@
     );
   }
 
+  /* 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 --- */
@@ -200,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.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

@@ -396,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 {
@@ -448,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 {
@@ -512,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 {
@@ -541,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 {
@@ -560,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>

package/dist/u0-primitives/command-palette/CommandPalette.test.js

@@ -0,0 +1,202 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render, fireEvent } from '@testing-library/svelte';
+import CommandPalette from './CommandPalette.svelte';
+const sampleCommands = [
+    {
+        id: 'grove.invite',
+        path: ['grove', 'invite'],
+        description: 'Invite a user to the grove',
+        parameters: [
+            { name: 'user', description: 'User to invite', required: true, paramType: 'user' },
+            { name: 'role', description: 'Role to assign', required: false, paramType: 'string' },
+        ],
+        requiredCapabilities: ['grove.manage'],
+        contexts: ['grove'],
+    },
+    {
+        id: 'agent.mode',
+        path: ['agent', 'mode'],
+        description: 'Switch agent mode',
+        parameters: [
+            { name: 'mode', description: 'Mode name', required: true, paramType: 'choice', choices: ['fast', 'deep'] },
+        ],
+        requiredCapabilities: [],
+        contexts: ['agent'],
+    },
+    {
+        id: 'task.create',
+        path: ['task', 'create'],
+        description: 'Create a new task',
+        parameters: [
+            { name: 'title', description: 'Task title', required: true, paramType: 'string' },
+        ],
+        requiredCapabilities: ['task.write'],
+        contexts: ['global'],
+    },
+];
+function renderPalette(props = {}) {
+    return render(CommandPalette, {
+        props: {
+            commands: sampleCommands,
+            context: { realmId: 'r1' },
+            onExecute: vi.fn().mockResolvedValue({ success: true, message: 'Done' }),
+            onClose: vi.fn(),
+            ...props,
+        },
+    });
+}
+async function openPalette(container) {
+    await fireEvent.keyDown(window, { key: '/' });
+}
+describe('CommandPalette', () => {
+    afterEach(() => cleanup());
+    it('does not render when closed', () => {
+        const { container } = renderPalette();
+        expect(container.querySelector('.command-palette')).toBeNull();
+    });
+    it('renders the palette container when open', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.command-palette')).not.toBeNull();
+    });
+    it('has role="dialog" on the palette container', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.command-palette').getAttribute('role')).toBe('dialog');
+    });
+    it('shows the command list with commands when open', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelectorAll('[role="option"]').length).toBe(3);
+    });
+    it('renders command list with role="listbox"', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('[role="listbox"]')).not.toBeNull();
+    });
+    it('renders each command option with role="option"', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        expect(options.length).toBe(3);
+    });
+    it('clicking a command selects it and shows parameter chips', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        await fireEvent.click(options[0]);
+        expect(container.querySelectorAll('.param-chip').length).toBe(2);
+    });
+    it('shows parameter chips for the active command', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].textContent).toContain('user');
+        expect(chips[1].textContent).toContain('role');
+    });
+    it('displays keyboard help text', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const help = container.querySelector('.help');
+        expect(help).not.toBeNull();
+        expect(help.textContent).toContain('Enter');
+        expect(help.textContent).toContain('Esc');
+    });
+    it('calls onClose when Escape is pressed in browse mode', async () => {
+        const handleClose = vi.fn();
+        const { container } = renderPalette({ onClose: handleClose });
+        await openPalette(container);
+        await fireEvent.keyDown(window, { key: 'Escape' });
+        expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+    it('shows commands when open in browse mode', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        expect(options.length).toBe(3);
+    });
+    it('marks required parameters with the required class', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].classList.contains('required')).toBe(true);
+    });
+    it('marks the current parameter with the current class', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].classList.contains('current')).toBe(true);
+    });
+    it('marks a filled parameter with the filled class', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'alice' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        const chips = container.querySelectorAll('.param-chip');
+        expect(chips[0].classList.contains('filled')).toBe(true);
+    });
+    it('shows success feedback after successful command execution', async () => {
+        const handleExecute = vi.fn().mockResolvedValue({ success: true, message: 'Invited!' });
+        const { container } = renderPalette({ onExecute: handleExecute });
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'alice' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        await new Promise(r => setTimeout(r, 50));
+        const feedback = container.querySelector('.feedback');
+        expect(feedback).not.toBeNull();
+        expect(feedback.classList.contains('success')).toBe(true);
+        expect(feedback.textContent).toBe('Invited!');
+    });
+    it('shows error feedback after failed command execution', async () => {
+        const handleExecute = vi.fn().mockResolvedValue({ success: false, message: 'No permission' });
+        const { container } = renderPalette({ onExecute: handleExecute });
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'alice' } });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        await new Promise(r => setTimeout(r, 50));
+        const feedback = container.querySelector('.feedback');
+        expect(feedback).not.toBeNull();
+        expect(feedback.classList.contains('error')).toBe(true);
+        expect(feedback.textContent).toBe('No permission');
+    });
+    it('selects a command on Enter key in browse mode', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        await fireEvent.keyDown(options[0], { key: 'Enter' });
+        expect(container.querySelectorAll('.param-chip').length).toBe(2);
+    });
+    it('has aria-label on the dialog', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.command-palette').getAttribute('aria-label')).toBe('Command palette');
+    });
+    it('has aria-selected on command options', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        const options = container.querySelectorAll('[role="option"]');
+        expect(options[0].getAttribute('aria-selected')).toBe('true');
+        expect(options[1].getAttribute('aria-selected')).toBe('false');
+    });
+    it('renders the slash prefix in browse mode', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        expect(container.querySelector('.slash')).not.toBeNull();
+    });
+    it('renders command prefix when a command is active', async () => {
+        const { container } = renderPalette();
+        await openPalette(container);
+        await fireEvent.click(container.querySelectorAll('[role="option"]')[0]);
+        expect(container.querySelector('.command-prefix')).not.toBeNull();
+        expect(container.querySelector('.command-prefix').textContent).toBe('/grove,invite');
+    });
+});