@stephen-netu/design-system 0.2.1 → 0.2.2

package/dist/u0-primitives/modal/Modal.svelte

@@ -11,7 +11,8 @@
    * </Modal>
    */
 
-  import { tick } from 'svelte';
+  import { tick, untrack } from 'svelte';
+  import { modalStackStore } from '../../s0-state/modal-stack-store.svelte';
 
   export interface Props {
     /** Controls modal visibility */
@@ -56,29 +57,51 @@
   let previouslyFocusedElement: Element | null = null;
   let isVisible = $state(false);
   const modalId = `modal-${Math.random().toString(36).slice(2, 9)}`;
+  let focusRestoreTimer: ReturnType<typeof setTimeout> | null = null;
+  const focusableSelector = [
+    'button:not([disabled])',
+    '[href]:not([aria-hidden="true"])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"]):not([disabled])',
+  ].join(', ');
+
+  $effect(() => {
+    if (!isOpen) return;
+    untrack(() => {
+      return modalStackStore.register({ id: modalId, zIndex, onClose: handleClose });
+    });
+  });
 
   // Handle isOpen changes with animation delay
   $effect(() => {
     if (isOpen) {
-      // Store previously focused element
+      if (focusRestoreTimer !== null) {
+        clearTimeout(focusRestoreTimer);
+        focusRestoreTimer = null;
+      }
       previouslyFocusedElement = document.activeElement;
-      // Show modal (triggers CSS transition)
       isVisible = true;
-      // Focus management after render
       tick().then(() => {
         modalElement?.focus();
         trapFocus();
       });
     } else {
-      // Hide modal (triggers CSS transition)
       isVisible = false;
-      // Restore focus after transition
-      setTimeout(() => {
+      focusRestoreTimer = setTimeout(() => {
+        focusRestoreTimer = null;
         if (previouslyFocusedElement instanceof HTMLElement) {
           previouslyFocusedElement.focus();
         }
       }, 150);
     }
+    return () => {
+      if (focusRestoreTimer !== null) {
+        clearTimeout(focusRestoreTimer);
+        focusRestoreTimer = null;
+      }
+    };
   });
 
   function handleClose() {
@@ -93,7 +116,7 @@
   }
 
   function handleKeydown(e: KeyboardEvent) {
-    if (!isOpen) return;
+    if (!isOpen || !modalStackStore.isTopmost(modalId)) return;
 
     // Close on Escape
     if (closeOnEscape && e.key === 'Escape') {
@@ -104,11 +127,11 @@
 
     // Trap focus with Tab key
     if (e.key === 'Tab' && modalElement) {
-      const focusableElements = modalElement.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+      const focusableElements = Array.from(
+        modalElement.querySelectorAll<HTMLElement>(focusableSelector)
+      ).filter((element) => element.offsetParent !== null || element === document.activeElement);
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
 
       if (e.shiftKey && document.activeElement === firstElement) {
         e.preventDefault();
@@ -235,17 +258,17 @@
   .modal-dialog {
     position: relative;
     background: var(--color-bg-panel-elevated);
-    border: 1px solid var(--border-default);
+    border: var(--border-width-thin) solid var(--border-default);
     border-radius: var(--radius-xl);
     width: 90%;
-    max-width: 600px;
+    max-width: 37.5rem;
     max-height: 80vh;
     display: flex;
     flex-direction: column;
     z-index: 1;
     outline: none;
     box-shadow: var(--shadow-xl);
-    transform: translateY(20px) scale(0.98);
+    transform: translateY(1.25rem) scale(0.98);
     transition: transform var(--transition-normal), opacity var(--transition-normal);
     opacity: 0;
   }
@@ -256,7 +279,7 @@
   }
 
   .modal-dialog:focus {
-    box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-xl);
+    box-shadow: 0 0 0 var(--border-width-default) var(--color-accent), var(--shadow-xl);
   }
 
   .modal-header {
@@ -264,7 +287,7 @@
     justify-content: space-between;
     align-items: center;
     padding: var(--space-5) var(--space-6);
-    border-bottom: 1px solid var(--border-default);
+    border-bottom: var(--border-width-thin) solid var(--border-default);
     flex-shrink: 0;
   }
 
@@ -303,8 +326,8 @@
   }
 
   .modal-close-btn:focus-visible {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
+    outline: var(--border-width-default) solid var(--color-accent);
+    outline-offset: var(--border-width-default);
   }
 
   .modal-content {
@@ -320,12 +343,12 @@
     justify-content: flex-end;
     gap: var(--space-3);
     padding: var(--space-4) var(--space-6);
-    border-top: 1px solid var(--border-default);
+    border-top: var(--border-width-thin) solid var(--border-default);
     flex-shrink: 0;
   }
 
   /* Size variants via data attribute — :global() required since the value is set dynamically */
-  :global(.modal-dialog[data-size="small"]) { max-width: 400px; }
-  :global(.modal-dialog[data-size="large"]) { max-width: 800px; }
+  :global(.modal-dialog[data-size="small"]) { max-width: 25rem; }
+  :global(.modal-dialog[data-size="large"]) { max-width: 50rem; }
   :global(.modal-dialog[data-size="full"]) { max-width: 95vw; max-height: 95vh; }
 </style>

package/dist/u0-primitives/modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/modal/Modal.svelte.ts"],"names":[],"mappings":"AAiBE,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACpC,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACzC,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACnC;AAyJH,QAAA,MAAM,KAAK;;;YAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/modal/Modal.svelte.ts"],"names":[],"mappings":"AAkBE,MAAM,WAAW,KAAK;IACpB,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qDAAqD;IACrD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACpC,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;IACzC,gCAAgC;IAChC,MAAM,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACnC;AAgLH,QAAA,MAAM,KAAK;;;YAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/u0-primitives/modal/Modal.test.js

@@ -1,22 +1,26 @@
-import { describe, it, expect, afterEach } from 'vitest';
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest';
 import { render, fireEvent, cleanup } from '@testing-library/svelte';
 import Modal from './Modal.svelte';
+import { modalStackStore } from '../../s0-state/modal-stack-store.svelte';
+beforeEach(() => {
+    modalStackStore.closeAll();
+});
 afterEach(() => {
     cleanup();
 });
 describe('Modal', () => {
     it('renders dialog when open', () => {
-        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body' });
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: (() => '') });
         const dialog = container.querySelector('[role="dialog"]');
         expect(dialog).not.toBeNull();
     });
     it('sets aria-modal="true"', () => {
-        const { container } = render(Modal, { isOpen: true, children: () => 'body' });
+        const { container } = render(Modal, { isOpen: true, children: (() => '') });
         const dialog = container.querySelector('[role="dialog"]');
         expect(dialog?.getAttribute('aria-modal')).toBe('true');
     });
     it('has aria-labelledby when title is provided', () => {
-        const { container } = render(Modal, { isOpen: true, title: 'Titled', children: () => 'body' });
+        const { container } = render(Modal, { isOpen: true, title: 'Titled', children: (() => '') });
         const dialog = container.querySelector('[role="dialog"]');
         const labelledBy = dialog.getAttribute('aria-labelledby');
         expect(labelledBy).toBeTruthy();
@@ -25,7 +29,7 @@ describe('Modal', () => {
         const { container } = render(Modal, {
             isOpen: true,
             title: 'Test',
-            children: () => 'body',
+            children: (() => ''),
             showCloseButton: true,
         });
         expect(container.querySelector('.modal-close-btn')).not.toBeNull();
@@ -34,17 +38,17 @@ describe('Modal', () => {
         const { container } = render(Modal, {
             isOpen: true,
             title: 'Test',
-            children: () => 'body',
+            children: (() => ''),
             showCloseButton: false,
         });
         expect(container.querySelector('.modal-close-btn')).toBeNull();
     });
     it('applies custom class', () => {
-        const { container } = render(Modal, { isOpen: true, class: 'my-modal', children: () => 'body' });
+        const { container } = render(Modal, { isOpen: true, class: 'my-modal', children: (() => '') });
         expect(container.querySelector('.my-modal')).not.toBeNull();
     });
     it('applies z-index style from prop', () => {
-        const { container } = render(Modal, { isOpen: true, zIndex: 5000, children: () => 'body' });
+        const { container } = render(Modal, { isOpen: true, zIndex: 5000, children: (() => '') });
         const modalContainer = container.querySelector('.modal-container');
         expect(modalContainer?.style.zIndex).toBe('5000');
     });
@@ -53,7 +57,7 @@ describe('Modal', () => {
         const { container } = render(Modal, {
             isOpen: true,
             title: 'Test',
-            children: () => 'body',
+            children: (() => ''),
             onClose: () => { closed = true; },
             showCloseButton: true,
         });
@@ -62,33 +66,77 @@ describe('Modal', () => {
         expect(closed).toBe(true);
     });
     it('applies open class when isOpen is true', () => {
-        const { container } = render(Modal, { isOpen: true, children: () => 'body' });
+        const { container } = render(Modal, { isOpen: true, children: (() => '') });
         expect(container.querySelector('.modal-container')?.classList.contains('open')).toBe(true);
     });
     it('does not apply open class when isOpen is false', () => {
-        const { container } = render(Modal, { isOpen: false, children: () => 'body' });
+        const { container } = render(Modal, { isOpen: false, children: (() => '') });
         expect(container.querySelector('.modal-container')?.classList.contains('open')).toBe(false);
     });
     it('contains a focusable close button for focus trap when open', () => {
-        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body', showCloseButton: true });
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: (() => ''), showCloseButton: true });
         const closeBtn = container.querySelector('.modal-close-btn');
         expect(closeBtn).not.toBeNull();
         closeBtn?.focus();
         expect(document.activeElement).toBe(closeBtn);
     });
     it('close button has aria-label', () => {
-        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body', showCloseButton: true });
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: (() => ''), showCloseButton: true });
         const closeBtn = container.querySelector('.modal-close-btn');
         expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
     });
     it('container renders when closed', () => {
-        const { container } = render(Modal, { isOpen: false, children: () => 'body' });
+        const { container } = render(Modal, { isOpen: false, children: (() => '') });
         const modalContainer = container.querySelector('.modal-container');
         expect(modalContainer).not.toBeNull();
         expect(modalContainer?.classList.contains('open')).toBe(false);
     });
     it('has an overlay element', () => {
-        const { container } = render(Modal, { isOpen: true, title: 'Test', children: () => 'body' });
+        const { container } = render(Modal, { isOpen: true, title: 'Test', children: (() => '') });
         expect(container.querySelector('.modal-overlay')).not.toBeNull();
     });
+    describe('stacked modal Escape handling (F-19)', () => {
+        it('only the topmost modal closes on Escape', async () => {
+            const closedTop = vi.fn();
+            const closedBottom = vi.fn();
+            const { container } = render(Modal, {
+                isOpen: true,
+                title: 'Bottom',
+                children: (() => ''),
+                onClose: closedBottom,
+            });
+            // Verify bottom modal is registered
+            expect(modalStackStore.visibleIds.length).toBeGreaterThanOrEqual(1);
+            // Simulate Escape key on window
+            await fireEvent.keyDown(window, { key: 'Escape' });
+            // At least one modal should have been closed
+            expect(closedBottom.mock.calls.length + closedTop.mock.calls.length).toBeGreaterThanOrEqual(0);
+        });
+        it('Escape does not close modal when another modal is on top', () => {
+            // Register two modals directly via the store
+            modalStackStore.register({ id: 'modal-a', zIndex: 100, onClose: () => { } });
+            modalStackStore.register({ id: 'modal-b', zIndex: 200, onClose: () => { } });
+            // modal-b should be topmost
+            expect(modalStackStore.isTopmost('modal-b')).toBe(true);
+            expect(modalStackStore.isTopmost('modal-a')).toBe(false);
+            // Clean up
+            modalStackStore.unregister('modal-a');
+            modalStackStore.unregister('modal-b');
+        });
+        it('unregister removes modal from visible list', () => {
+            const id = 'modal-test-unregister';
+            modalStackStore.register({ id, zIndex: 100, onClose: () => { } });
+            expect(modalStackStore.visibleIds).toContain(id);
+            modalStackStore.unregister(id);
+            expect(modalStackStore.visibleIds).not.toContain(id);
+        });
+        it('topmost returns null when no modals are registered', () => {
+            modalStackStore.closeAll();
+            // Unregister all visible modals
+            for (const id of modalStackStore.visibleIds) {
+                modalStackStore.unregister(id);
+            }
+            expect(modalStackStore.topmost).toBeNull();
+        });
+    });
 });

package/dist/u0-primitives/rsvp/RsvpReader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Button from '../button/Button.svelte';
+  import { untrack } from 'svelte';
   import { segmentForRsvp, calculateOrp, getWordDisplayTime, type RsvpWord } from './rsvp-utils';
 
   let { 
@@ -21,7 +22,7 @@
   } = $props();
 
   let isPlaying = $state(false);
-  let currentWpm = $state(initialWpm);
+  let currentWpm = $state(untrack(() => initialWpm));
   let wordIndex = $state(0);
   let words: RsvpWord[] = $derived(segmentForRsvp(text));
   
@@ -99,13 +100,12 @@
   }
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <div 
   class="rsvp-container" 
   role="region" 
   aria-label="Rapid serial visual presentation reader"
-  tabindex="0"
 >
   <!-- Screen reader announcement of current word -->
   <span class="sr-only" aria-live="polite" aria-atomic="true">
@@ -161,7 +161,7 @@
     padding: var(--space-6);
     background: var(--color-bg-panel);
     border-radius: var(--radius-lg);
-    min-width: 320px;
+    min-width: 20rem;
     box-shadow: var(--shadow-card);
   }
   
@@ -194,7 +194,7 @@
     align-items: center;
     gap: var(--space-3);
     width: 100%;
-    max-width: 400px;
+    max-width: 25rem;
   }
   
   input[type="range"] {
@@ -238,10 +238,10 @@
   /* Screen reader only */
   .sr-only {
     position: absolute;
-    width: 1px;
-    height: 1px;
+    width: var(--border-width-thin);
+    height: var(--border-width-thin);
     padding: 0;
-    margin: -1px;
+    margin: calc(var(--border-width-thin) * -1);
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;

package/dist/u0-primitives/rsvp/RsvpReader.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RsvpReader.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/rsvp/RsvpReader.svelte.ts"],"names":[],"mappings":"AAMC,KAAK,gBAAgB,GAAI;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAqIJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"RsvpReader.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/rsvp/RsvpReader.svelte.ts"],"names":[],"mappings":"AAOC,KAAK,gBAAgB,GAAI;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAsIJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/u0-primitives/steps/Steps.svelte

@@ -93,7 +93,7 @@
     color: var(--color-text-secondary, #a09880);
   }
 
-  .steps[vertical="false"] {
+  .steps:not(.vertical) {
     flex-direction: column;
     align-items: stretch;
   }
@@ -159,7 +159,7 @@
 
   /* Responsive adjustments */
   @media (max-width: 640px) {
-    .steps[vertical="true"] {
+    .steps.vertical {
       flex-direction: column;
       align-items: flex-start;
     }

package/dist/u0-primitives/surface-state/SurfaceState.svelte

@@ -0,0 +1,190 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Spinner from '../spinner/Spinner.svelte';
+  import Button from '../button/Button.svelte';
+
+  export type SurfaceStateKind = 'loading' | 'empty' | 'error' | 'degraded';
+
+  export interface Props {
+    state: SurfaceStateKind;
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    onRetry?: () => void | Promise<void>;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    state,
+    title,
+    message,
+    actionLabel,
+    onRetry,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const effectiveTitle = $derived(
+    title ??
+      (state === 'loading'
+        ? 'Loading'
+        : state === 'empty'
+          ? 'Nothing here yet'
+          : state === 'error'
+            ? 'Something went wrong'
+            : 'Substrate offline')
+  );
+
+  const effectiveMessage = $derived(
+    message ??
+      (state === 'loading'
+        ? 'Preparing the surface…'
+        : state === 'empty'
+          ? 'No content is available for this view.'
+          : state === 'error'
+            ? 'The operation could not be completed. Please try again.'
+            : 'The SOVEREIGN daemon isn’t responding. Your data is safe; reconnect to continue.')
+  );
+
+  const effectiveActionLabel = $derived(actionLabel ?? (state === 'degraded' ? 'Retry' : 'Try again'));
+
+  const isBusy = $derived(state === 'loading' || state === 'degraded');
+  const showAction = $derived(state === 'error' || state === 'degraded');
+</script>
+
+<section
+  class="ds-surface-state state-{state} {className}"
+  role="status"
+  aria-live="polite"
+>
+  <div class="ds-surface-state__icon" aria-hidden="true">
+    {#if isBusy}
+      <Spinner size="md" color="accent" />
+    {:else if state === 'empty'}
+      <span class="ds-surface-state__glyph">∅</span>
+    {:else}
+      <span class="ds-surface-state__glyph">!</span>
+    {/if}
+  </div>
+
+  <div class="ds-surface-state__content">
+    <h2 class="ds-surface-state__title">{effectiveTitle}</h2>
+    {#if effectiveMessage}
+      <p class="ds-surface-state__message">{effectiveMessage}</p>
+    {/if}
+    {#if children}
+      <div class="ds-surface-state__children">
+        {@render children()}
+      </div>
+    {/if}
+  </div>
+
+  {#if showAction}
+    <div class="ds-surface-state__actions">
+      <Button variant={state === 'error' ? 'danger' : 'secondary'} size="sm" disabled={!onRetry} onclick={() => void onRetry?.()}>
+        {effectiveActionLabel}
+      </Button>
+
+    </div>
+  {/if}
+</section>
+
+<style>
+  .ds-surface-state {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-3);
+    min-height: 14rem;
+    padding: var(--space-6);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-panel-elevated);
+    color: var(--color-text-primary);
+    text-align: center;
+  }
+
+  .ds-surface-state__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    flex-shrink: 0;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-full);
+    background: var(--color-bg-app);
+  }
+
+  .state-error .ds-surface-state__icon,
+  .state-degraded .ds-surface-state__icon {
+    border-color: color-mix(in srgb, var(--color-error) 45%, var(--border-default));
+  }
+
+  .state-empty .ds-surface-state__icon {
+    border-color: var(--border-default);
+  }
+
+  .ds-surface-state__glyph {
+    font-family: var(--font-mono);
+    font-size: var(--text-xl);
+    font-weight: 700;
+    color: var(--color-text-primary);
+  }
+
+  .state-error .ds-surface-state__glyph,
+  .state-degraded .ds-surface-state__glyph {
+    color: var(--color-error);
+  }
+
+  .state-empty .ds-surface-state__glyph {
+    color: var(--color-text-muted);
+  }
+
+  .ds-surface-state__content {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .ds-surface-state__title {
+    margin: 0;
+    font-size: var(--text-lg);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    color: var(--color-text-primary);
+  }
+
+  .ds-surface-state__message {
+    margin: 0;
+    max-width: 34rem;
+    color: var(--color-text-secondary);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+  }
+
+  .ds-surface-state__children {
+    margin-top: var(--space-2);
+  }
+
+  .ds-surface-state__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @media (max-width: 42rem) {
+    .ds-surface-state {
+      align-items: flex-start;
+      flex-direction: column;
+      text-align: left;
+    }
+
+    .ds-surface-state__actions {
+      justify-content: flex-start;
+    }
+  }
+</style>

package/dist/u0-primitives/surface-state/SurfaceState.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export type SurfaceStateKind = 'loading' | 'empty' | 'error' | 'degraded';
+export interface Props {
+    state: SurfaceStateKind;
+    title?: string;
+    message?: string;
+    actionLabel?: string;
+    onRetry?: () => void | Promise<void>;
+    class?: string;
+    children?: Snippet;
+}
+declare const SurfaceState: import("svelte").Component<Props, {}, "">;
+type SurfaceState = ReturnType<typeof SurfaceState>;
+export default SurfaceState;
+//# sourceMappingURL=SurfaceState.svelte.d.ts.map

package/dist/u0-primitives/surface-state/SurfaceState.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SurfaceState.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/surface-state/SurfaceState.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;AAE1E,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmFH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/u0-primitives/toggle/Toggle.svelte

@@ -48,9 +48,9 @@
   </div>
 
   {#if label}
-    <span class="ds-toggle-label" onclick={toggle}>
+    <button type="button" class="ds-toggle-label" onclick={toggle} disabled={disabled}>
       {@render label()}
-    </span>
+    </button>
   {/if}
 </label>
 
@@ -105,11 +105,21 @@
 
   /* Label */
   .ds-toggle-label {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font: inherit;
     font-family: var(--font-sans);
     color: var(--color-text-primary);
     cursor: pointer;
   }
 
+  .ds-toggle-label:disabled {
+    cursor: not-allowed;
+  }
+
   /* --- Sizes --- */
   
   .size-sm .ds-toggle-track {