@stephen-netu/design-system 0.2.0 → 0.2.2

package/dist/t0-transport/substrate.svelte.js

@@ -0,0 +1,49 @@
+import { listen } from '@tauri-apps/api/event';
+import { awaitTauriReady, invoke } from './invoke';
+class SubstrateConnectionImpl {
+    options;
+    state = $state({ status: 'starting' });
+    unlisten = null;
+    constructor(options = {}) {
+        this.options = options;
+    }
+    get isDegraded() {
+        return this.state.status === 'reconnecting' || this.state.status === 'failed';
+    }
+    get retryLabel() {
+        return this.state.status === 'failed' ? 'Retry' : 'Reconnecting';
+    }
+    async init() {
+        this.destroy();
+        const ready = await awaitTauriReady();
+        if (!ready) {
+            console.warn('[SubstrateConnection] Tauri bridge not available — skipping listeners');
+            return;
+        }
+        try {
+            this.state = await invoke(this.options.getStateCommand ?? 'substrate_get_state');
+        }
+        catch (error) {
+            this.state = { status: 'failed', reason: error instanceof Error ? error.message : 'Unable to read substrate state' };
+        }
+        this.unlisten = await listen(this.options.stateEvent ?? 'substrate:state', (event) => {
+            this.state = event.payload;
+        });
+    }
+    async retry() {
+        this.state = { status: 'reconnecting', attempt: 0 };
+        try {
+            await invoke(this.options.retryCommand ?? 'substrate_retry');
+        }
+        catch (error) {
+            this.state = { status: 'failed', reason: error instanceof Error ? error.message : 'Unable to retry substrate connection' };
+        }
+    }
+    destroy() {
+        this.unlisten?.();
+        this.unlisten = null;
+    }
+}
+export function createSubstrateConnection(options = {}) {
+    return new SubstrateConnectionImpl(options);
+}

package/dist/u0-primitives/LockIndicator.svelte

@@ -121,7 +121,7 @@
 <style>
   .lock-indicator {
     position: relative;
-    background: var(--color-bg-panel, var(--color-bg-panel-token, #181c20));
+    background: var(--color-bg-panel, #181c20);
     border-radius: var(--radius-md, 4px);
     overflow: hidden;
   }

package/dist/u0-primitives/VerticalToolbar.svelte

@@ -117,7 +117,7 @@
     background: transparent;
     border: 1px solid transparent;
     border-radius: var(--radius-md, 4px);
-    color: var(--color-text-muted, var(--color-text-muted-token, #6b6558));
+    color: var(--color-text-muted, #6b6558);
     cursor: pointer;
     transition: all 0.15s ease;
   }

package/dist/u0-primitives/accordion/Accordion.svelte

@@ -6,6 +6,7 @@
    * 
    * @package @kos/design-system/u0-primitives
    */
+  import { untrack } from 'svelte';
   import type { Snippet } from 'svelte';
 
   interface Panel {
@@ -40,7 +41,7 @@
     onOpenChange,
   }: Props = $props();
 
-  let internalOpenIds = $state<string[]>([...defaultOpen]);
+  let internalOpenIds = $state<string[]>(untrack(() => [...defaultOpen]));
 
   function setInternalOpenIds(fn: (prev: string[]) => string[]) {
     internalOpenIds = fn(internalOpenIds);
@@ -125,14 +126,14 @@
 
 <style>
   .accordion {
-    border-radius: var(--radius-md, 0.25rem);
+    border-radius: var(--radius-md);
     overflow: hidden;
-    border: 1px solid var(--color-border, var(--border-default, #3a3630));
-    background: var(--color-bg-app, #0b0d0f);
+    border: var(--border-width-thin) solid var(--color-border);
+    background: var(--color-bg-app);
   }
 
   .accordion-item {
-    border-bottom: 1px solid var(--color-border, var(--border-default, #3a3630));
+    border-bottom: var(--border-width-thin) solid var(--color-border);
   }
 
   .accordion-item:last-child {
@@ -148,21 +149,21 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--space-4, 1rem);
+    padding: var(--space-4);
     cursor: pointer;
     user-select: none;
-    transition: background-color var(--duration-normal, 200ms) ease-in-out;
+    transition: background-color var(--duration-normal) ease-in-out;
   }
 
   .accordion-header:hover:not(.disabled) {
-    background: var(--color-bg-secondary, var(--color-bg-canvas, #121518));
+    background: var(--color-bg-secondary);
   }
 
   /* Removed duplicate focus-visible — the box-shadow variant below supersedes. */
 
   /* Focus styles for keyboard navigation */
   .accordion-header:focus-visible {
-    box-shadow: 0 0 0 2px var(--color-accent, var(--color-accent));
+    box-shadow: 0 0 0 var(--border-width-default) var(--color-accent);
   }
 
   /* Disabled states */

package/dist/u0-primitives/accordion/Accordion.svelte.d.ts

@@ -1,10 +1,3 @@
-/**
-   * Accordion Component
-   *
-   * A vertically stacked set of interactive headings that each reveal a panel of associated content.
-   *
-   * @package @kos/design-system/u0-primitives
-   */
 import type { Snippet } from 'svelte';
 interface Panel {
     /** Unique identifier for the panel */

package/dist/u0-primitives/accordion/Accordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;KAMK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5C;AAyFH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Accordion.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/accordion/Accordion.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,mDAAmD;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC5C;AA0FH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/u0-primitives/accordion/Accordion.test.js

@@ -2,9 +2,9 @@ import { afterEach, describe, it, expect, vi } from 'vitest';
 import { cleanup, render, fireEvent } from '@testing-library/svelte';
 import Accordion from './Accordion.svelte';
 const samplePanels = [
-    { id: 'p1', title: 'First', content: () => 'Content 1' },
-    { id: 'p2', title: 'Second', content: () => 'Content 2' },
-    { id: 'p3', title: 'Third', content: () => 'Content 3' },
+    { id: 'p1', title: 'First', content: (() => '') },
+    { id: 'p2', title: 'Second', content: (() => '') },
+    { id: 'p3', title: 'Third', content: (() => '') },
 ];
 describe('Accordion', () => {
     afterEach(() => cleanup());
@@ -54,8 +54,8 @@ describe('Accordion', () => {
     });
     it('does not open disabled panels', async () => {
         const panels = [
-            { id: 'p1', title: 'Enabled', content: () => 'E' },
-            { id: 'p2', title: 'Disabled', content: () => 'D', disabled: true },
+            { id: 'p1', title: 'Enabled', content: (() => '') },
+            { id: 'p2', title: 'Disabled', content: (() => ''), disabled: true },
         ];
         const { container } = render(Accordion, { panels });
         const buttons = container.querySelectorAll('[role="button"]');

package/dist/u0-primitives/badge/Badge.test.js

@@ -4,30 +4,30 @@ import Badge from './Badge.svelte';
 describe('Badge', () => {
     afterEach(() => cleanup());
     it('renders with default variant', () => {
-        const { container } = render(Badge, { props: { children: () => { } } });
+        const { container } = render(Badge, { props: { children: (() => '') } });
         expect(container.querySelector('.ds-badge')).not.toBeNull();
         expect(container.querySelector('.variant-status')).not.toBeNull();
     });
     it('renders with info variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'info', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'info', children: (() => '') } });
         expect(container.querySelector('.color-info')).not.toBeNull();
     });
     it('renders with success variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'success', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'success', children: (() => '') } });
         expect(container.querySelector('.color-success')).not.toBeNull();
     });
     it('renders with warning variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'warning', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'warning', children: (() => '') } });
         expect(container.querySelector('.color-warning')).not.toBeNull();
     });
     it('renders with error variant color class', () => {
-        const { container } = render(Badge, { props: { color: 'error', children: () => { } } });
+        const { container } = render(Badge, { props: { color: 'error', children: (() => '') } });
         expect(container.querySelector('.color-error')).not.toBeNull();
     });
     it('applies size classes', () => {
-        const { container: sm } = render(Badge, { props: { size: 'sm', children: () => { } } });
+        const { container: sm } = render(Badge, { props: { size: 'sm', children: (() => '') } });
         expect(sm.querySelector('.size-sm')).not.toBeNull();
-        const { container: lg } = render(Badge, { props: { size: 'lg', children: () => { } } });
+        const { container: lg } = render(Badge, { props: { size: 'lg', children: (() => '') } });
         expect(lg.querySelector('.size-lg')).not.toBeNull();
     });
     it('renders dot variant without content span', () => {
@@ -36,15 +36,15 @@ describe('Badge', () => {
         expect(container.querySelector('.ds-badge-content')).toBeNull();
     });
     it('renders outline variant', () => {
-        const { container } = render(Badge, { props: { variant: 'outline', children: () => { } } });
+        const { container } = render(Badge, { props: { variant: 'outline', children: (() => '') } });
         expect(container.querySelector('.variant-outline')).not.toBeNull();
     });
     it('renders children text', () => {
-        const { container } = render(Badge, { props: { children: () => 'Hello' } });
+        const { container } = render(Badge, { props: { children: (() => '') } });
         expect(container.querySelector('.ds-badge-content')).not.toBeNull();
     });
     it('applies custom class', () => {
-        const { container } = render(Badge, { props: { class: 'custom-badge', children: () => { } } });
+        const { container } = render(Badge, { props: { class: 'custom-badge', children: (() => '') } });
         expect(container.querySelector('.custom-badge')).not.toBeNull();
     });
 });

package/dist/u0-primitives/badge/ValidityBadge.test.js

@@ -4,23 +4,23 @@ import ValidityBadge from './ValidityBadge.svelte';
 describe('ValidityBadge', () => {
     afterEach(() => cleanup());
     it('renders with default score', () => {
-        const { container } = render(ValidityBadge, { props: { children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { children: (() => '') } });
         expect(container.querySelector('.ds-validity-badge')).not.toBeNull();
     });
     it('applies high validity class for score >= 900', () => {
-        const { container } = render(ValidityBadge, { props: { score: 950, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 950, children: (() => '') } });
         expect(container.querySelector('.validity-color-high')).not.toBeNull();
     });
     it('applies medium validity class for score 700-899', () => {
-        const { container } = render(ValidityBadge, { props: { score: 750, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 750, children: (() => '') } });
         expect(container.querySelector('.validity-color-medium')).not.toBeNull();
     });
     it('applies low validity class for score 500-699', () => {
-        const { container } = render(ValidityBadge, { props: { score: 600, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 600, children: (() => '') } });
         expect(container.querySelector('.validity-color-low')).not.toBeNull();
     });
     it('applies critical validity class for score < 500', () => {
-        const { container } = render(ValidityBadge, { props: { score: 300, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 300, children: (() => '') } });
         expect(container.querySelector('.validity-color-critical')).not.toBeNull();
     });
     it('renders score and total text', () => {
@@ -31,9 +31,9 @@ describe('ValidityBadge', () => {
         expect(totalEl).not.toBeNull();
     });
     it('applies size classes', () => {
-        const { container: sm } = render(ValidityBadge, { props: { size: 'sm', children: () => { } } });
+        const { container: sm } = render(ValidityBadge, { props: { size: 'sm', children: (() => '') } });
         expect(sm.querySelector('.size-sm')).not.toBeNull();
-        const { container: lg } = render(ValidityBadge, { props: { size: 'lg', children: () => { } } });
+        const { container: lg } = render(ValidityBadge, { props: { size: 'lg', children: (() => '') } });
         expect(lg.querySelector('.size-lg')).not.toBeNull();
     });
     it('shows label when showLabel is true', () => {
@@ -45,12 +45,12 @@ describe('ValidityBadge', () => {
         expect(container.querySelector('.ds-validity-label')).toBeNull();
     });
     it('sets aria-label from validity label', () => {
-        const { container } = render(ValidityBadge, { props: { score: 950, children: () => { } } });
+        const { container } = render(ValidityBadge, { props: { score: 950, children: (() => '') } });
         const badge = container.querySelector('.ds-validity-badge');
         expect(badge.getAttribute('aria-label')).toBe('High Validity');
     });
     it('renders custom children when provided', () => {
-        const { container } = render(ValidityBadge, { props: { score: 500, children: () => 'custom' } });
+        const { container } = render(ValidityBadge, { props: { score: 500, children: (() => '') } });
         expect(container.querySelector('.ds-validity-content')).not.toBeNull();
         expect(container.querySelector('.ds-validity-score')).toBeNull();
     });

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}
@@ -233,7 +236,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;
@@ -91,7 +97,7 @@
 
   .ds-card-header {
     padding: var(--space-3) var(--space-4);
-    border-bottom: 1px solid var(--border-default);
+    border-bottom: var(--border-width-thin) solid var(--border-default);
     font-weight: 600;
     background: var(--color-bg-panel);
     font-size: var(--text-sm);
@@ -106,7 +112,7 @@
 
   .ds-card-footer {
     padding: var(--space-3) var(--space-4);
-    border-top: 1px solid var(--border-default);
+    border-top: var(--border-width-thin) solid var(--border-default);
     background: var(--color-accent-faint);
   }
 
@@ -125,9 +131,9 @@
 
   .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);
+    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);
     color: var(--color-text-primary);
   }
 
@@ -136,10 +142,10 @@
     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)
     );
   }
 
@@ -171,7 +177,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 +186,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)
     );
   }
 

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/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>

package/dist/u0-primitives/command-palette/CommandPalette.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/CommandPalette.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAmC,MAAM,iBAAiB,CAAC;AAGpF,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,kEAAkE;IAClE,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iDAAiD;IACjD,OAAO,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,4DAA4D;IAC5D,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAClG,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAmTH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"CommandPalette.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/CommandPalette.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAmC,MAAM,iBAAiB,CAAC;AAGpF,UAAU,aAAa;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,kEAAkE;IAClE,QAAQ,EAAE,aAAa,EAAE,CAAC;IAC1B,iDAAiD;IACjD,OAAO,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,4DAA4D;IAC5D,SAAS,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IAClG,uCAAuC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAsUH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/u0-primitives/command-palette/commandStore.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commandStore.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/commandStore.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EAGd,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAOzB,8CAA8C;AAC9C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,kDAAkD;AAClD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AAgBD,cAAM,YAAY;IAEhB,QAAQ,6BAAoD;IAC5D,aAAa,8BAA6C;IAC1D,YAAY,cAAkC;IAC9C,WAAW,UAAiB;IAC5B,UAAU,uBAAsC;IAGhD,cAAc,kBAGZ;IAGF,cAAc,iBAAoC;IAGlD,iBAAiB,kBAKf;IAGF,OAAO,CAAC,eAAe,CAAgC;IAEvD;;;OAGG;IACG,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAiB1C;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI;IAMrC;;;OAGG;IACH,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAyBxC;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAgCrC;;OAEG;IACH,YAAY,IAAI,OAAO;IAcvB;;OAEG;IACH,MAAM,IAAI,IAAI;IASd;;;;;OAKG;IACG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC;IA+DvC;;OAEG;IACG,YAAY,CAChB,IAAI,EAAE,WAAW,EACjB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACjC,OAAO,CAAC,aAAa,CAAC;IAczB;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAA;KAAE;IA4BjE;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE;IAQtC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzC;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAYrC;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB;AAGD,eAAO,MAAM,YAAY,cAAqB,CAAC"}
+{"version":3,"file":"commandStore.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/command-palette/commandStore.svelte.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EACV,aAAa,EACb,aAAa,EACb,cAAc,EAGd,WAAW,EACZ,MAAM,iBAAiB,CAAC;AAYzB,8CAA8C;AAC9C,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,kDAAkD;AAClD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,aAAa,CAAC;IACvB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACvB;AAgBD,cAAM,YAAY;IAEhB,QAAQ,6BAAoD;IAC5D,aAAa,8BAA6C;IAC1D,YAAY,cAAkC;IAC9C,WAAW,UAAiB;IAC5B,UAAU,uBAAsC;IAGhD,cAAc,kBAGZ;IAGF,cAAc,iBAAoC;IAGlD,iBAAiB,kBAKf;IAGF,OAAO,CAAC,eAAe,CAAgC;IAEvD;;;OAGG;IACG,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAiB1C;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI;IAMrC;;;OAGG;IACH,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,OAAO;IAyBxC;;OAEG;IACH,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAgCrC;;OAEG;IACH,YAAY,IAAI,OAAO;IAcvB;;OAEG;IACH,MAAM,IAAI,IAAI;IASd;;;;;OAKG;IACG,OAAO,IAAI,OAAO,CAAC,aAAa,CAAC;IA+DvC;;OAEG;IACG,YAAY,CAChB,IAAI,EAAE,WAAW,EACjB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GACjC,OAAO,CAAC,aAAa,CAAC;IAczB;;;OAGG;IACH,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG;QAAE,OAAO,CAAC,EAAE,aAAa,CAAC;QAAC,IAAI,EAAE,MAAM,EAAE,CAAA;KAAE;IA4BjE;;OAEG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE;IAQtC;;OAEG;IACH,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzC;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI;IAYrC;;OAEG;IACH,OAAO,IAAI,IAAI;CAKhB;AAGD,eAAO,MAAM,YAAY,cAAqB,CAAC"}

package/dist/u0-primitives/command-palette/commandStore.svelte.js

@@ -9,7 +9,8 @@
  *   - S-05: AbortController for killable operations
  */
 async function tauriInvoke(command, payload) {
-    const mod = await import('@tauri-apps/api/core');
+    const spec = '@tauri-apps/api/core';
+    const mod = await import(/* @vite-ignore */ spec);
     return mod.invoke(command, payload);
 }
 class CommandStore {

package/dist/u0-primitives/dropdown/Dropdown.test.js

@@ -9,7 +9,7 @@ const sampleItems = [
 function renderDropdown(props = {}) {
     return render(Dropdown, {
         items: sampleItems,
-        trigger: () => '<button>Open</button>',
+        trigger: (() => ''),
         ...props,
     });
 }

package/dist/u0-primitives/index.d.ts

@@ -10,6 +10,8 @@ export { default as Dropdown } from './dropdown/Dropdown.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';
 export type { Tab } from './tabs/tabs-types';
 export { default as Spinner } from './spinner/Spinner.svelte';
+export { default as SurfaceState } from './surface-state/SurfaceState.svelte';
+export type { SurfaceStateKind, Props as SurfaceStateProps } from './surface-state/SurfaceState.svelte';
 export { default as Modal } from './modal/Modal.svelte';
 export { default as AnimatedIcon } from './animated-icon/AnimatedIcon.svelte';
 export type { AnimatedIconName, AnimationType } from './animated-icon/index.js';