@stephen-netu/design-system 0.2.1 → 0.5.1

package/dist/fabric/input/KeyboardShortcuts.svelte

@@ -162,20 +162,20 @@
   .shortcuts-overlay {
     position: fixed;
     inset: 0;
-    background: rgba(0, 0, 0, 0.8);
+    background: rgba(0, 0, 0, 0.75);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
-    backdrop-filter: blur(4px);
+    /* No backdrop-filter: depth via border + contrast only */
   }
 
   .shortcuts-panel {
     width: min(560px, 90vw);
     max-height: 80vh;
     background: var(--color-bg-panel, #222222);
-    border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-xl, 0.75rem);
+    border: var(--border-width-default, 2px) solid var(--border-default, #333333);
+    border-radius: 0;
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -185,33 +185,35 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
+    padding: var(--ui-pad-y, 5px) var(--ui-pad-x, 8px);
+    border-bottom: 1px solid var(--border-default, #333333);
   }
 
   .panel-title {
-    font-size: 16px;
+    font-family: var(--font-mono);
+    font-size: var(--ui-label, 10px);
     font-weight: 600;
-    color: var(--color-text-primary, #f2efe9);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--color-text-secondary, #a09880);
     margin: 0;
   }
 
   .close-btn {
     background: none;
-    border: none;
+    border: 1px solid transparent;
     color: var(--color-text-tertiary, #706858);
     cursor: pointer;
-    padding: 4px;
-    border-radius: var(--radius-sm, 0.25rem);
+    padding: 3px;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: color 0.15s, background 0.15s;
+    transition: color var(--transition-fast, 110ms) linear, border-color var(--transition-fast, 110ms) linear;
   }
 
   .close-btn:hover {
-    color: var(--color-text-primary, #f2efe9);
-    background: rgba(255, 255, 255, 0.05);
+    color: var(--color-text-primary, #e7e9eb);
+    border-color: var(--border-default, #333333);
   }
 
   .search-box {
@@ -242,7 +244,7 @@
     color: var(--color-text-tertiary, #706858);
     cursor: pointer;
     padding: 2px;
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -292,15 +294,15 @@
     padding: 10px 12px;
     background: none;
     border: 1px solid transparent;
-    border-radius: var(--radius-md, 0.375rem);
+    border-radius: 0;
     cursor: pointer;
     text-align: left;
     transition: background 0.15s, border-color 0.15s;
   }
 
   .shortcut-btn:hover {
-    background: var(--color-bg-canvas, #1a1a1a);
-    border-color: var(--border-subtle, rgba(255,255,255,0.06));
+    background: var(--color-bg-canvas, #0f1113);
+    border-color: var(--border-default, #333333);
   }
 
   .shortcut-keys {
@@ -319,7 +321,7 @@
     padding: 0 6px;
     background: var(--color-bg-canvas, #1a1a1a);
     border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 11px;
     font-weight: 500;
@@ -340,7 +342,7 @@
     font-size: 10px;
     padding: 2px 6px;
     background: var(--color-bg-canvas, #1a1a1a);
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     color: var(--color-text-tertiary, #706858);
   }
 
@@ -380,7 +382,7 @@
     margin: 0 2px;
     background: var(--color-bg-panel, #222222);
     border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-sm, 0.25rem);
+    border-radius: 0;
     font-family: var(--font-mono, 'JetBrains Mono', monospace);
     font-size: 10px;
   }

package/dist/fabric/input/index.d.ts

@@ -6,8 +6,8 @@
  * @package @kos/design-system/fabric/input
  * @adr 2026-04-12-leap-substrate-refactor-001
  */
-export { default as CommandBar } from './CommandBar.svelte';
-export type { Props as CommandBarProps } from './CommandBar.svelte';
+export { default as AppHeaderBar } from './AppHeaderBar.svelte';
+export type { Props as AppHeaderBarProps } from './AppHeaderBar.svelte';
 export { default as KeyboardShortcuts } from './KeyboardShortcuts.svelte';
 export type { ShortcutBinding, ShortcutGroup } from './KeyboardShortcuts.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/fabric/input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/input/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,KAAK,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/fabric/input/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/fabric/input/index.js

@@ -6,5 +6,5 @@
  * @package @kos/design-system/fabric/input
  * @adr 2026-04-12-leap-substrate-refactor-001
  */
-export { default as CommandBar } from './CommandBar.svelte';
+export { default as AppHeaderBar } from './AppHeaderBar.svelte';
 export { default as KeyboardShortcuts } from './KeyboardShortcuts.svelte';

package/dist/fabric/layout/CollapsiblePanel.svelte

@@ -238,7 +238,7 @@
     --panel-border: var(--border-subtle, 1px solid rgba(255, 255, 255, 0.06));
     --handle-bg: var(--color-bg-inset, #0f0f0f);
     --handle-hover-bg: var(--color-bg-canvas, #141414);
-    --accent-color: var(--color-accent, #00ff41);
+    --accent-color: var(--color-accent);
     --transition-duration: 300ms;
 
     display: flex;
@@ -290,7 +290,7 @@
     border-right: var(--panel-border);
     border-left: var(--panel-border);
     overflow: hidden;
-    transition: width var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
+    transition: width var(--transition-duration) linear;
     flex-shrink: 0;
   }
 
@@ -316,7 +316,7 @@
     cursor: pointer;
     user-select: none;
     position: relative;
-    transition: background 0.15s ease;
+    transition: background var(--transition-fast, 110ms) linear;
     min-height: 100%;
   }
 
@@ -341,25 +341,23 @@
     width: 2px;
     height: 64px;
     background: var(--color-text-muted, #555);
-    border-radius: var(--shape-border-radius, 1px);
-    transition: all 0.15s ease;
+    transition: background var(--transition-fast, 110ms) linear;
     flex-shrink: 0;
   }
 
   .panel-handle:hover .panel-handle__bar {
-    background: var(--color-text-primary, #ccc);
-    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+    background: var(--color-text-secondary, #9aa1a8);
   }
 
+  /* Expanded/dragging: accent fill on the drag handle bar — functional
+     state indicator (open/dragging vs closed), same logic as toggle thumb */
   .panel-handle--expanded .panel-handle__bar {
     background: var(--accent-color);
-    box-shadow: 0 0 6px var(--accent-color);
-    opacity: 0.6;
+    opacity: 0.7;
   }
 
   .collapsible-panel--dragging .panel-handle__bar {
     background: var(--accent-color);
-    box-shadow: 0 0 8px var(--accent-color);
     opacity: 1;
   }
 

package/dist/fabric/layout/KanbanBoard.svelte

@@ -1,158 +1,28 @@
 <script lang="ts">
-  /**
-   * KanbanBoard - Fabric Component
-   * 
-   * Multi-column kanban board with drag-drop support.
-   * Decoupled from shell stores - uses props/callbacks for all state.
-   * 
-   * @package @kos/design-system/fabric/layout
-   * @adr 2026-04-12-leap-substrate-refactor-001
-   */
-  import type { ColumnData } from './KanbanColumn.svelte';
-  import type { CardData } from './KanbanCard.svelte';
-
-  interface ColumnState {
-    column: ColumnData;
-    cards: CardData[];
-    isDropTarget?: boolean;
-    isCollapsed?: boolean;
-  }
-
-  export interface Props {
-    columns: ColumnState[];
-    onCardMove?: (cardId: string, sourceColumnId: string, targetColumnId: string) => void;
-    onCardClick?: (card: CardData) => void;
-    onAddCard?: (columnId: string) => void;
-    onAddColumn?: () => void;
-    onColumnMenuClick?: (columnId: string) => void;
-    title?: string;
-  }
-
-  let { columns, onCardMove, onCardClick, onAddCard, onAddColumn, onColumnMenuClick, title }: Props = $props();
-
-  let draggedCardId = $state<string | null>(null);
-  let activeDropColumn = $state<string | null>(null);
-
-  function handleCardDragStart(card: CardData) {
-    draggedCardId = card.id;
-  }
-
-  function handleCardDragEnd() {
-    draggedCardId = null;
-    activeDropColumn = null;
-  }
-
-  function handleDragOver(columnId: string) {
-    if (draggedCardId && columnId !== activeDropColumn) {
-      activeDropColumn = columnId;
-    }
-  }
-
-  function handleDragLeave(columnId: string) {
-    if (activeDropColumn === columnId) {
-      activeDropColumn = null;
-    }
-  }
-
-  function handleDrop(targetColumnId: string, cardId: string) {
-    if (!draggedCardId) return;
-
-    const sourceColumn = columns.find(c => 
-      c.cards.some(card => card.id === cardId)
-    );
-    
-    if (sourceColumn && sourceColumn.column.id !== targetColumnId) {
-      onCardMove?.(cardId, sourceColumn.column.id, targetColumnId);
-    }
-
-    draggedCardId = null;
-    activeDropColumn = null;
-  }
+  import KanbanBoard from '../../l0-layout/kanban/KanbanBoard.svelte';
+  import type { Props } from '../../l0-layout/kanban/KanbanBoard.svelte';
+
+  let {
+    columns,
+    onCardMove,
+    onCardClick,
+    onAddCard,
+    onAddColumn,
+    onColumnMenuClick,
+    title,
+    header,
+    class: className = '',
+  }: Props = $props();
 </script>
 
-{#await import('./KanbanColumn.svelte') then { default: KanbanColumn }}
-  <div class="kanban-board" role="region" aria-label="{title || 'Kanban board'}">
-    {#if title}
-      <header class="board-header">
-        <h2 class="board-title">{title}</h2>
-        <button 
-          class="add-column-btn"
-          onclick={() => onAddColumn?.()}
-        >
-          + Add Column
-        </button>
-      </header>
-    {/if}
-
-    <div class="board-content" role="list">
-      {#each columns as columnState (columnState.column.id)}
-        <KanbanColumn
-          column={columnState.column}
-          cards={columnState.cards}
-          isDropTarget={activeDropColumn === columnState.column.id}
-          isCollapsed={columnState.isCollapsed}
-          onCardClick={onCardClick}
-          onCardDragStart={handleCardDragStart}
-          onCardDragEnd={handleCardDragEnd}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onAddCard={onAddCard}
-          onMenuClick={onColumnMenuClick}
-        />
-      {/each}
-    </div>
-  </div>
-{/await}
-
-<style>
-  .kanban-board {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-    background: var(--color-bg-root, #111111);
-  }
-
-  .board-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
-    flex-shrink: 0;
-  }
-
-  .board-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--color-text-primary, #f2efe9);
-    margin: 0;
-  }
-
-  .add-column-btn {
-    padding: 8px 16px;
-    background: transparent;
-    border: 1px solid var(--border-default, #333333);
-    border-radius: var(--radius-md, 0.375rem);
-    color: var(--color-text-secondary, #a09880);
-    font-size: 13px;
-    cursor: pointer;
-    transition: border-color 0.15s, color 0.15s;
-  }
-
-  .add-column-btn:hover {
-    border-color: var(--color-accent, var(--color-accent));
-    color: var(--color-accent, var(--color-accent));
-  }
-
-  .board-content {
-    display: flex;
-    gap: var(--space-4);
-    padding: 16px 20px;
-    overflow-x: auto;
-    overflow-y: hidden;
-    flex: 1;
-    align-items: flex-start;
-  }
-</style>
+<KanbanBoard
+  {columns}
+  {onCardMove}
+  {onCardClick}
+  {onAddCard}
+  {onAddColumn}
+  {onColumnMenuClick}
+  {title}
+  {header}
+  class={className}
+/>

package/dist/fabric/layout/KanbanBoard.svelte.d.ts

@@ -1,29 +1,5 @@
-/**
-   * KanbanBoard - Fabric Component
-   *
-   * Multi-column kanban board with drag-drop support.
-   * Decoupled from shell stores - uses props/callbacks for all state.
-   *
-   * @package @kos/design-system/fabric/layout
-   * @adr 2026-04-12-leap-substrate-refactor-001
-   */
-import type { ColumnData } from './KanbanColumn.svelte';
-import type { CardData } from './KanbanCard.svelte';
-interface ColumnState {
-    column: ColumnData;
-    cards: CardData[];
-    isDropTarget?: boolean;
-    isCollapsed?: boolean;
-}
-export interface Props {
-    columns: ColumnState[];
-    onCardMove?: (cardId: string, sourceColumnId: string, targetColumnId: string) => void;
-    onCardClick?: (card: CardData) => void;
-    onAddCard?: (columnId: string) => void;
-    onAddColumn?: () => void;
-    onColumnMenuClick?: (columnId: string) => void;
-    title?: string;
-}
+import KanbanBoard from '../../l0-layout/kanban/KanbanBoard.svelte';
+import type { Props } from '../../l0-layout/kanban/KanbanBoard.svelte';
 declare const KanbanBoard: import("svelte").Component<Props, {}, "">;
 type KanbanBoard = ReturnType<typeof KanbanBoard>;
 export default KanbanBoard;

package/dist/fabric/layout/KanbanBoard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanBoard.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanBoard.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;KAQK;AACL,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGlD,UAAU,WAAW;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IACtF,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyEH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"KanbanBoard.svelte.d.ts","sourceRoot":"","sources":["../../../src/fabric/layout/KanbanBoard.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,WAAW,MAAM,2CAA2C,CAAC;AACpE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,2CAA2C,CAAC;AAuBvE,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/fabric/layout/KanbanBoard.test.js

@@ -1,25 +1,140 @@
-import { afterEach, describe, it, expect } from 'vitest';
-import { cleanup, render } from '@testing-library/svelte';
+import { cleanup, fireEvent, render } from '@testing-library/svelte';
+import { afterEach, describe, it, expect, vi } from 'vitest';
 import KanbanBoard from './KanbanBoard.svelte';
-// This component uses `{#await import('./KanbanColumn.svelte')}` for lazy loading.
-// In tests the dynamic import doesn't resolve in jsdom, so we test what renders
-// synchronously: an error boundary slot. When that's absent the component renders
-// nothing until the promise resolves.
 describe('KanbanBoard', () => {
     afterEach(() => cleanup());
     it('exports a valid Svelte component', () => {
         expect(KanbanBoard).toBeDefined();
         expect(typeof KanbanBoard).toBe('function');
     });
-    it('initializes draggedCardId and activeDropColumn state', async () => {
-        const { component } = render(KanbanBoard, {
+    it('renders columns with title', async () => {
+        const { container } = render(KanbanBoard, {
             props: {
                 columns: [
                     { column: { id: 'c1', title: 'Backlog' }, cards: [{ id: 'card1', title: 'Task 1' }] },
+                    { column: { id: 'c2', title: 'In Progress' }, cards: [] },
                 ],
             },
         });
-        // Component mounted without crashing — even if {#await} hasn't resolved yet
-        expect(component).toBeDefined();
+        expect(container.querySelector('.ds-kanban-board')).not.toBeNull();
+        expect(container.querySelectorAll('.ds-kanban-column').length).toBe(2);
+        expect(container.querySelector('.ds-kanban-column-title')?.textContent).toBe('Backlog');
+    });
+    it('renders board title when provided', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                title: 'My Board',
+                columns: [],
+            },
+        });
+        expect(container.querySelector('.ds-kanban-board-title')?.textContent).toBe('My Board');
+    });
+    it('renders cards within columns', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    {
+                        column: { id: 'c1', title: 'Todo' },
+                        cards: [
+                            { id: 'card1', title: 'First Task', priority: 'high' },
+                            { id: 'card2', title: 'Second Task', priority: 'low' },
+                        ],
+                    },
+                ],
+            },
+        });
+        const titles = container.querySelectorAll('.ds-kanban-card-title');
+        expect(titles.length).toBe(2);
+        expect(titles[0]?.textContent).toBe('First Task');
+        expect(titles[1]?.textContent).toBe('Second Task');
+    });
+    it('renders priority indicator bars', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    {
+                        column: { id: 'c1', title: 'Todo' },
+                        cards: [{ id: 'card1', title: 'Urgent Task', priority: 'urgent' }],
+                    },
+                ],
+            },
+        });
+        expect(container.querySelector('.ds-kanban-priority-bar')).not.toBeNull();
+    });
+    it('renders tags when provided', () => {
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    {
+                        column: { id: 'c1', title: 'Todo' },
+                        cards: [{ id: 'card1', title: 'Tagged', tags: ['alpha', 'beta', 'gamma', 'delta'] }],
+                    },
+                ],
+            },
+        });
+        const tags = container.querySelectorAll('.ds-kanban-card-tag');
+        expect(tags.length).toBe(3); // max 3 shown
+        expect(container.querySelector('.ds-kanban-card-tag-more')?.textContent).toBe('+1');
+    });
+    it('moves a card with keyboard move mode', async () => {
+        const onCardMove = vi.fn();
+        const onCardClick = vi.fn();
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    { column: { id: 'todo', title: 'Todo' }, cards: [{ id: 'task-1', title: 'Task 1' }] },
+                    { column: { id: 'doing', title: 'In Progress' }, cards: [] },
+                ],
+                onCardMove,
+                onCardClick,
+            },
+        });
+        const card = container.querySelector('.ds-kanban-card');
+        const interactiveCard = container.querySelector('.ds-card');
+        expect(card).not.toBeNull();
+        expect(interactiveCard).not.toBeNull();
+        await fireEvent.keyDown(interactiveCard, { key: ' ' });
+        expect(container.querySelector('.ds-kanban-move-toast')).not.toBeNull();
+        expect(card.classList.contains('is-selected')).toBe(true);
+        await fireEvent.keyDown(interactiveCard, { key: 'ArrowRight' });
+        expect(container.querySelector('.ds-kanban-move-target')?.textContent).toBe('→ In Progress');
+        await fireEvent.keyDown(interactiveCard, { key: 'Enter' });
+        expect(onCardMove).toHaveBeenCalledWith('task-1', 'todo', 'doing');
+        expect(onCardClick).not.toHaveBeenCalled();
+        expect(container.querySelector('.ds-kanban-move-toast')).toBeNull();
+    });
+    it('cancels keyboard move mode with Escape', async () => {
+        const onCardMove = vi.fn();
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    { column: { id: 'todo', title: 'Todo' }, cards: [{ id: 'task-1', title: 'Task 1' }] },
+                    { column: { id: 'doing', title: 'In Progress' }, cards: [] },
+                ],
+                onCardMove,
+            },
+        });
+        const card = container.querySelector('.ds-kanban-card');
+        const interactiveCard = container.querySelector('.ds-card');
+        expect(card).not.toBeNull();
+        expect(interactiveCard).not.toBeNull();
+        await fireEvent.keyDown(interactiveCard, { key: ' ' });
+        await fireEvent.keyDown(interactiveCard, { key: 'ArrowRight' });
+        await fireEvent.keyDown(interactiveCard, { key: 'Escape' });
+        expect(onCardMove).not.toHaveBeenCalled();
+        expect(container.querySelector('.ds-kanban-move-toast')).toBeNull();
+    });
+    it('renders move-toast in keyboard move mode', () => {
+        // Move mode is internal state — verify the toast element exists in DOM when triggered
+        // This is tested via the board's reactive rendering; we verify the CSS class exists
+        const { container } = render(KanbanBoard, {
+            props: {
+                columns: [
+                    { column: { id: 'c1', title: 'Todo' }, cards: [{ id: 'card1', title: 'Task' }] },
+                ],
+            },
+        });
+        // Toast should not be visible initially
+        expect(container.querySelector('.ds-kanban-move-toast')).toBeNull();
     });
 });