@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/u0-primitives/input/Input.test.js

@@ -1,6 +1,18 @@
 import { afterEach, describe, it, expect } from 'vitest';
-import { cleanup, render } from '@testing-library/svelte';
+import { cleanup, render, fireEvent, waitFor } from '@testing-library/svelte';
 import Input from './Input.svelte';
+function createSource(completions) {
+    return async (context) => {
+        const match = context.matchBefore(/\w+$/);
+        if (!match)
+            return null;
+        return {
+            from: match.from,
+            to: match.to,
+            options: completions,
+        };
+    };
+}
 describe('Input', () => {
     afterEach(() => cleanup());
     it('renders an <input> element', () => {
@@ -37,7 +49,7 @@ describe('Input', () => {
     });
     it('displays leading icon element when iconLeading is provided', () => {
         const { container } = render(Input, {
-            iconLeading: () => '<svg class="test-icon"></svg>'
+            iconLeading: (() => '')
         });
         expect(container.querySelector('.ds-input-icon.leading')).not.toBeNull();
     });
@@ -61,4 +73,72 @@ describe('Input', () => {
         const { container } = render(Input, {});
         expect(container.querySelector('input')?.getAttribute('aria-invalid')).toBeNull();
     });
+    it('does not render autocomplete controls without autocomplete prop', () => {
+        const { container } = render(Input);
+        expect(container.querySelector('[aria-autocomplete="list"]')).toBeNull();
+        expect(container.querySelector('.ds-input-autocomplete')).toBeNull();
+    });
+    it('renders autocomplete suggestions when autocomplete prop is provided', async () => {
+        const source = createSource([
+            { label: 'apple', type: 'word' },
+            { label: 'application', type: 'word', detail: 'common' },
+        ]);
+        const { container } = render(Input, { autocomplete: { source } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'app' } });
+        await waitFor(() => {
+            expect(container.querySelector('.ds-input-autocomplete')).not.toBeNull();
+        });
+        expect(container.querySelectorAll('[role="option"]').length).toBe(2);
+        expect(container.querySelector('.ds-input-autocomplete__label')?.textContent).toBe('apple');
+        expect(container.querySelector('.ds-input-autocomplete__detail')?.textContent).toBe('common');
+    });
+    it('applies the selected autocomplete suggestion with Enter', async () => {
+        const source = createSource([
+            { label: 'apple', type: 'word' },
+            { label: 'application', type: 'word' },
+        ]);
+        const { container } = render(Input, { autocomplete: { source } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'app' } });
+        await waitFor(() => {
+            expect(container.querySelector('.ds-input-autocomplete')).not.toBeNull();
+        });
+        await fireEvent.keyDown(input, { key: 'ArrowDown' });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        expect(input.value).toBe('application');
+        expect(container.querySelector('.ds-input-autocomplete')).toBeNull();
+    });
+    it('dismisses autocomplete suggestions with Escape', async () => {
+        const source = createSource([{ label: 'apple', type: 'word' }]);
+        const { container } = render(Input, { autocomplete: { source } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'app' } });
+        await waitFor(() => {
+            expect(container.querySelector('.ds-input-autocomplete')).not.toBeNull();
+        });
+        await fireEvent.keyDown(input, { key: 'Escape' });
+        expect(container.querySelector('.ds-input-autocomplete')).toBeNull();
+    });
+    it('replaces only the current token, preserving prefix and suffix', async () => {
+        const source = createSource([
+            { label: 'project', type: 'word' },
+        ]);
+        const { container } = render(Input, { autocomplete: { source } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'create a p' } });
+        await waitFor(() => {
+            expect(container.querySelector('.ds-input-autocomplete')).not.toBeNull();
+        });
+        await fireEvent.keyDown(input, { key: 'Enter' });
+        expect(input.value).toBe('create a project');
+        expect(container.querySelector('.ds-input-autocomplete')).toBeNull();
+    });
+    it('respects minChars before fetching autocomplete suggestions', async () => {
+        const source = createSource([{ label: 'apple', type: 'word' }]);
+        const { container } = render(Input, { autocomplete: { source, minChars: 3 } });
+        const input = container.querySelector('input');
+        await fireEvent.input(input, { target: { value: 'ap' } });
+        expect(container.querySelector('.ds-input-autocomplete')).toBeNull();
+    });
 });

package/dist/u0-primitives/live-dot/LiveDot.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  export interface Props {
+    variant?: 'cleared' | 'blocked' | 'pending' | 'degraded';
+    size?: 'sm' | 'md' | 'lg';
+    pulse?: boolean;
+    class?: string;
+    'aria-label'?: string;
+  }
+
+  let {
+    variant = 'cleared',
+    size = 'md',
+    pulse = true,
+    class: className = '',
+    'aria-label': ariaLabel
+  }: Props = $props();
+</script>
+
+<span
+  class="ds-live-dot variant-{variant} size-{size} {className}"
+  class:is-pulsing={pulse}
+  role="status"
+  aria-label={ariaLabel ?? variant}
+></span>
+
+<style>
+  .ds-live-dot {
+    display: inline-block;
+    flex-shrink: 0;
+    border-radius: var(--radius-full);
+  }
+
+  .size-sm { width: 0.375rem; height: 0.375rem; }
+  .size-md { width: 0.5rem; height: 0.5rem; }
+  .size-lg { width: 0.625rem; height: 0.625rem; }
+
+  .variant-cleared { background: var(--epistemic-cleared); }
+  .variant-blocked { background: var(--epistemic-blocked); }
+  .variant-pending { background: var(--epistemic-pending); }
+  .variant-degraded { background: var(--epistemic-degraded); }
+
+  .is-pulsing.variant-cleared { animation: ds-live-dot-pulse 2s ease-out infinite; --pulse-glow: var(--epistemic-cleared-glow); }
+  .is-pulsing.variant-blocked { animation: ds-live-dot-pulse 2s ease-out infinite; --pulse-glow: var(--epistemic-blocked-glow); }
+  .is-pulsing.variant-pending { animation: ds-live-dot-pulse 2s ease-out infinite; --pulse-glow: var(--epistemic-pending-glow); }
+  .is-pulsing.variant-degraded { animation: ds-live-dot-pulse 2s ease-out infinite; --pulse-glow: var(--epistemic-degraded-glow); }
+
+  @keyframes ds-live-dot-pulse {
+    0% { box-shadow: 0 0 0 0 var(--pulse-glow); }
+    70% { box-shadow: 0 0 0 6px transparent; }
+    100% { box-shadow: 0 0 0 0 transparent; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .is-pulsing { animation: none; }
+  }
+</style>

package/dist/u0-primitives/live-dot/LiveDot.svelte.d.ts

@@ -0,0 +1,11 @@
+export interface Props {
+    variant?: 'cleared' | 'blocked' | 'pending' | 'degraded';
+    size?: 'sm' | 'md' | 'lg';
+    pulse?: boolean;
+    class?: string;
+    'aria-label'?: string;
+}
+declare const LiveDot: import("svelte").Component<Props, {}, "">;
+type LiveDot = ReturnType<typeof LiveDot>;
+export default LiveDot;
+//# sourceMappingURL=LiveDot.svelte.d.ts.map

package/dist/u0-primitives/live-dot/LiveDot.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveDot.svelte.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/live-dot/LiveDot.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,KAAK;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IACzD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmBH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/u0-primitives/live-dot/LiveDot.test.js

@@ -0,0 +1,41 @@
+import { afterEach, describe, it, expect } from 'vitest';
+import { cleanup, render, screen } from '@testing-library/svelte';
+import LiveDot from './LiveDot.svelte';
+describe('LiveDot', () => {
+    afterEach(() => cleanup());
+    it('renders with role="status"', () => {
+        render(LiveDot);
+        expect(screen.getByRole('status')).toBeDefined();
+    });
+    it('defaults to the cleared variant', () => {
+        const { container } = render(LiveDot);
+        expect(container.querySelector('.variant-cleared')).not.toBeNull();
+    });
+    it('applies each variant class', () => {
+        for (const variant of ['cleared', 'blocked', 'pending', 'degraded']) {
+            const { container, unmount } = render(LiveDot, { variant });
+            expect(container.querySelector(`.variant-${variant}`)).not.toBeNull();
+            unmount();
+        }
+    });
+    it('applies size class', () => {
+        const { container } = render(LiveDot, { size: 'lg' });
+        expect(container.querySelector('.size-lg')).not.toBeNull();
+    });
+    it('pulses by default', () => {
+        const { container } = render(LiveDot);
+        expect(container.querySelector('.is-pulsing')).not.toBeNull();
+    });
+    it('does not pulse when pulse is false', () => {
+        const { container } = render(LiveDot, { pulse: false });
+        expect(container.querySelector('.is-pulsing')).toBeNull();
+    });
+    it('falls back to the variant name as aria-label', () => {
+        render(LiveDot, { variant: 'blocked' });
+        expect(screen.getByRole('status').getAttribute('aria-label')).toBe('blocked');
+    });
+    it('uses an explicit aria-label when provided', () => {
+        render(LiveDot, { 'aria-label': 'Connection live' });
+        expect(screen.getByRole('status').getAttribute('aria-label')).toBe('Connection live');
+    });
+});

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

@@ -0,0 +1,3 @@
+export { default as LiveDot } from './LiveDot.svelte';
+export type { Props } from './LiveDot.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/u0-primitives/live-dot/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/u0-primitives/live-dot/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/u0-primitives/live-dot/index.js

@@ -0,0 +1 @@
+export { default as LiveDot } from './LiveDot.svelte';

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

@@ -11,7 +11,8 @@
    * </Modal>
    */
 
-  import { tick } from 'svelte';
+  import { tick, untrack } from 'svelte';
+  import { modalStackStore } from '@stephen-netu/design-system/s0-state';
 
   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,18 +258,18 @@
   .modal-dialog {
     position: relative;
     background: var(--color-bg-panel-elevated);
-    border: 1px solid var(--border-default);
-    border-radius: var(--radius-xl);
+    border: var(--border-width-default) solid var(--border-default);
+    border-radius: 0;
     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);
-    transition: transform var(--transition-normal), opacity var(--transition-normal);
+    box-shadow: none;
+    transform: translateY(0.5rem);
+    transition: transform var(--transition-fast) linear, opacity var(--transition-fast) linear;
     opacity: 0;
   }
 
@@ -256,27 +279,30 @@
   }
 
   .modal-dialog:focus {
-    box-shadow: 0 0 0 2px var(--color-accent), var(--shadow-xl);
+    outline: var(--border-width-default) solid var(--color-accent);
+    outline-offset: 2px;
   }
 
   .modal-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--space-5) var(--space-6);
-    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);
     flex-shrink: 0;
   }
 
   .modal-title {
     margin: 0;
-    font-size: var(--text-lg);
-    color: var(--color-text-primary);
+    font-size: var(--ui-label);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
     display: flex;
     align-items: center;
     gap: var(--space-3);
     font-weight: 600;
-    font-family: var(--font-sans);
+    font-family: var(--font-mono);
   }
 
   .modal-header-actions {
@@ -287,45 +313,45 @@
 
   .modal-close-btn {
     background: none;
-    border: none;
+    border: 1px solid transparent;
     color: var(--color-text-secondary);
     cursor: pointer;
-    padding: var(--space-1);
+    padding: 3px;
     display: flex;
     align-items: center;
-    border-radius: var(--radius-sm);
-    transition: all var(--transition-fast);
+    transition: color var(--transition-fast) linear, border-color var(--transition-fast) linear;
   }
 
   .modal-close-btn:hover {
     color: var(--color-text-primary);
-    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--border-default);
   }
 
   .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 {
     overflow-y: auto;
-    padding: var(--space-6);
+    padding: var(--ui-pad-x);
     flex: 1;
     min-height: 0;
+    font-size: var(--ui-font);
   }
 
   .modal-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: var(--space-3);
-    padding: var(--space-4) var(--space-6);
-    border-top: 1px solid var(--border-default);
+    gap: var(--ui-pad-y);
+    padding: var(--ui-pad-y) var(--ui-pad-x);
+    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 '@stephen-netu/design-system/s0-state';
+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;