@spectral_labs/ui 1.6.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/components/command/__tests__/CommandInlineDirectTest.svelte +29 -0
  2. package/dist/components/command/__tests__/CommandInlineTest.svelte +89 -0
  3. package/dist/components/command/__tests__/command-inline.test.svelte.js +392 -0
  4. package/dist/components/command/command.svelte.d.ts +30 -0
  5. package/dist/components/command/command.svelte.d.ts.map +1 -1
  6. package/dist/components/command/command.svelte.js +85 -4
  7. package/dist/components/command/components/command-group.svelte +25 -15
  8. package/dist/components/command/components/command-group.svelte.d.ts.map +1 -1
  9. package/dist/components/command/components/command-input.svelte +54 -5
  10. package/dist/components/command/components/command-input.svelte.d.ts +1 -1
  11. package/dist/components/command/components/command-input.svelte.d.ts.map +1 -1
  12. package/dist/components/command/components/command-list.svelte +22 -3
  13. package/dist/components/command/components/command-list.svelte.d.ts.map +1 -1
  14. package/dist/components/command/components/command-root.svelte +43 -4
  15. package/dist/components/command/components/command-root.svelte.d.ts.map +1 -1
  16. package/dist/components/command/index.d.ts +1 -0
  17. package/dist/components/command/index.d.ts.map +1 -1
  18. package/dist/components/command/types.d.ts +59 -4
  19. package/dist/components/command/types.d.ts.map +1 -1
  20. package/dist/internal/drag-drop/__tests__/drag-session.test.svelte.js +256 -0
  21. package/dist/internal/drag-drop/drag-session.svelte.d.ts.map +1 -1
  22. package/dist/internal/drag-drop/drag-session.svelte.js +114 -14
  23. package/dist/internal/drag-drop/keyboard-dnd.svelte.d.ts +8 -0
  24. package/dist/internal/drag-drop/keyboard-dnd.svelte.d.ts.map +1 -1
  25. package/dist/internal/drag-drop/keyboard-dnd.svelte.js +14 -3
  26. package/dist/internal/escape-layer/escape-layer.svelte.d.ts +12 -0
  27. package/dist/internal/escape-layer/escape-layer.svelte.d.ts.map +1 -1
  28. package/dist/internal/escape-layer/escape-layer.svelte.js +20 -1
  29. package/package.json +1 -1
@@ -0,0 +1,29 @@
1
+ <script lang="ts">
2
+ import CommandInput from '../components/command-input.svelte'
3
+ import CommandItem from '../components/command-item.svelte'
4
+ import CommandList from '../components/command-list.svelte'
5
+ import CommandRoot from '../components/command-root.svelte'
6
+
7
+ /**
8
+ * The same inline composition with NO `Command.Group`.
9
+ *
10
+ * The group and the item each gate rendering on their own predicate, and
11
+ * both read the registry. Reviewing #224 turned up two distinct failures
12
+ * behind one symptom, so the group must be removable from the picture for a
13
+ * test to say which mechanism it is exercising.
14
+ */
15
+ let open = $state(false)
16
+ let value = $state('')
17
+
18
+ export function setOpen(next: boolean) {
19
+ open = next
20
+ }
21
+ </script>
22
+
23
+ <CommandRoot mode="inline" bind:open bind:value>
24
+ <CommandInput class="probe-input" />
25
+ <CommandList>
26
+ <CommandItem value="copy" keywords={['duplicate']}>Copy</CommandItem>
27
+ <CommandItem value="paste">Paste</CommandItem>
28
+ </CommandList>
29
+ </CommandRoot>
@@ -0,0 +1,89 @@
1
+ <script lang="ts">
2
+ import type { CommandMode } from '../command.svelte.js'
3
+ import CommandEmpty from '../components/command-empty.svelte'
4
+ import CommandGroup from '../components/command-group.svelte'
5
+ import CommandInput from '../components/command-input.svelte'
6
+ import CommandItem from '../components/command-item.svelte'
7
+ import CommandList from '../components/command-list.svelte'
8
+ import CommandRoot from '../components/command-root.svelte'
9
+
10
+ type Entry = { value: string; label: string; keywords?: string[] }
11
+
12
+ /**
13
+ * Harness for the `inline` composition: a field that outlives its results.
14
+ *
15
+ * The harness OWNS `open` and `entries` as local state and exposes accessors,
16
+ * rather than taking them as props a test would try to reassign — Svelte 5
17
+ * props are not writable through the object `mount()` returns. Owning them
18
+ * here is also closer to real use: `bind:open` lets the Root push a close
19
+ * back (Escape, outside pointer) and the test observes the same value the
20
+ * consumer would.
21
+ *
22
+ * `entries` is mutable so a test can change the COLLECTION between two
23
+ * openings — the case where a stale selection, a dead ARIA reference or a
24
+ * lost first arrow would actually show up.
25
+ */
26
+ const {
27
+ initialOpen = false,
28
+ initialEntries = [
29
+ { value: 'copy', label: 'Copy', keywords: ['duplicate'] },
30
+ { value: 'paste', label: 'Paste' },
31
+ { value: 'cut', label: 'Cut' },
32
+ ] as Entry[],
33
+ mode = 'inline' as CommandMode,
34
+ portalTo = undefined,
35
+ trapFocus = undefined,
36
+ onOpenChange = undefined,
37
+ onEscapeKeydown = undefined,
38
+ onSelect = undefined,
39
+ inputAttrs = undefined,
40
+ }: {
41
+ initialOpen?: boolean
42
+ initialEntries?: Entry[]
43
+ mode?: CommandMode
44
+ portalTo?: HTMLElement | string
45
+ trapFocus?: boolean
46
+ onOpenChange?: (open: boolean) => void
47
+ onEscapeKeydown?: (event: KeyboardEvent) => void
48
+ onSelect?: (value: string) => void
49
+ inputAttrs?: Record<string, unknown>
50
+ } = $props()
51
+
52
+ let open = $state(initialOpen)
53
+ let entries = $state(initialEntries)
54
+ let value = $state('')
55
+ let element = $state<HTMLInputElement | null>(null)
56
+
57
+ export function setOpen(next: boolean) {
58
+ open = next
59
+ }
60
+ export function getOpen() {
61
+ return open
62
+ }
63
+ export function setEntries(next: Entry[]) {
64
+ entries = next
65
+ }
66
+ export function getElement() {
67
+ return element
68
+ }
69
+ </script>
70
+
71
+ <CommandRoot bind:value bind:open {mode} {portalTo} {trapFocus} {onOpenChange} {onEscapeKeydown}>
72
+ <CommandInput
73
+ placeholder="Search..."
74
+ wrapperClass="probe-wrapper"
75
+ class="probe-input"
76
+ bind:element
77
+ {...inputAttrs ?? {}}
78
+ />
79
+ <CommandList>
80
+ <CommandEmpty>No results found.</CommandEmpty>
81
+ <CommandGroup heading="Actions">
82
+ {#each entries as entry (entry.value)}
83
+ <CommandItem value={entry.value} keywords={entry.keywords} {onSelect}>
84
+ {entry.label}
85
+ </CommandItem>
86
+ {/each}
87
+ </CommandGroup>
88
+ </CommandList>
89
+ </CommandRoot>
@@ -0,0 +1,392 @@
1
+ import { flushSync, mount, unmount } from 'svelte';
2
+ import { afterEach, describe, expect, it, vi } from 'vitest';
3
+ import { EscapeLayerState, resetEscapeLayerStack } from '../../../internal/escape-layer/index.js';
4
+ import CommandInlineDirectTest from './CommandInlineDirectTest.svelte';
5
+ import CommandInlineTest from './CommandInlineTest.svelte';
6
+ /**
7
+ * `mode: 'inline'` — a persistent field with non-modal results.
8
+ *
9
+ * The contract these pins defend is not "the list is hidden": it is that a
10
+ * CLOSED palette is inert. It executes nothing, it claims no key, it holds no
11
+ * slot in the global layer stacks, and it names no option that is not on
12
+ * screen. `modal` is the default and must come through untouched.
13
+ */
14
+ if (typeof globalThis.PointerEvent === 'undefined') {
15
+ // @ts-expect-error — minimal polyfill for testing
16
+ globalThis.PointerEvent = class PointerEvent extends MouseEvent {
17
+ constructor(type, init) {
18
+ super(type, init);
19
+ }
20
+ };
21
+ }
22
+ describe('command — inline mode', () => {
23
+ let target;
24
+ let instance;
25
+ function setup(props = {}) {
26
+ target = document.createElement('div');
27
+ document.body.appendChild(target);
28
+ instance = mount(CommandInlineTest, { target, props });
29
+ flushSync();
30
+ return target;
31
+ }
32
+ afterEach(() => {
33
+ if (instance)
34
+ unmount(instance);
35
+ instance = undefined;
36
+ target?.remove();
37
+ resetEscapeLayerStack();
38
+ document.body.innerHTML = '';
39
+ });
40
+ const input = () => target.querySelector('input.probe-input');
41
+ const options = () => [...target.querySelectorAll('[data-command-item]')];
42
+ const activeId = () => input().getAttribute('aria-activedescendant');
43
+ function press(key, init = {}) {
44
+ const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...init });
45
+ input().dispatchEvent(event);
46
+ flushSync();
47
+ return event;
48
+ }
49
+ function type(text) {
50
+ const el = input();
51
+ el.value = text;
52
+ el.dispatchEvent(new Event('input', { bubbles: true }));
53
+ flushSync();
54
+ }
55
+ // --- The field outlives the results ------------------------------------
56
+ it('closed: the field is rendered and NO option is', () => {
57
+ setup({ initialOpen: false });
58
+ expect(input()).toBeTruthy();
59
+ expect(options()).toHaveLength(0);
60
+ expect(target.querySelector('[role="listbox"]')).toBeNull();
61
+ });
62
+ it('closed: aria-expanded is false, and the relations that would dangle are absent', () => {
63
+ setup({ initialOpen: false });
64
+ expect(input().getAttribute('aria-expanded')).toBe('false');
65
+ expect(input().getAttribute('aria-controls')).toBeNull();
66
+ expect(activeId()).toBeNull();
67
+ });
68
+ it('the SAME input element survives a close and a reopen — never a second field', () => {
69
+ setup({ initialOpen: true });
70
+ const first = input();
71
+ instance.setOpen(false);
72
+ flushSync();
73
+ expect(options()).toHaveLength(0);
74
+ const whileClosed = input();
75
+ instance.setOpen(true);
76
+ flushSync();
77
+ // Node identity, not a lookalike: a remounted field would lose focus,
78
+ // selection and any consumer `bind:element` reference.
79
+ expect(whileClosed).toBe(first);
80
+ expect(input()).toBe(first);
81
+ });
82
+ it('exposes the real input element through `bind:element`, with no internal selector', () => {
83
+ setup({ initialOpen: false });
84
+ expect(instance.getElement()).toBe(input());
85
+ instance.getElement().focus();
86
+ expect(document.activeElement).toBe(input());
87
+ });
88
+ // --- A closed palette claims nothing -----------------------------------
89
+ it('closed: Enter executes nothing and is NOT prevented — it belongs to the page', () => {
90
+ const onSelect = vi.fn();
91
+ setup({ initialOpen: false, onSelect });
92
+ const event = press('Enter');
93
+ expect(onSelect).not.toHaveBeenCalled();
94
+ expect(event.defaultPrevented).toBe(false);
95
+ });
96
+ it('closed: a third-party Escape layer mounted FIRST still receives the key', () => {
97
+ const onEscapeKeydown = vi.fn();
98
+ // Mounted BEFORE the palette, so it sits at the BOTTOM of the stack. The
99
+ // stack offers the keystroke to the topmost 'close' layer and stops there:
100
+ // a palette that illicitly kept its layer while closed would be above this
101
+ // one and would swallow the key. Mounted after, it would win either way
102
+ // and the test would pass on a broken implementation.
103
+ const other = new EscapeLayerState({ enabled: true, onEscapeKeydown });
104
+ other.mount();
105
+ setup({ initialOpen: false });
106
+ const event = press('Escape');
107
+ expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
108
+ expect(event.defaultPrevented).toBe(false);
109
+ other.unmount();
110
+ });
111
+ it('open: the palette DOES take the key from a layer mounted before it — the test above discriminates', () => {
112
+ const onEscapeKeydown = vi.fn();
113
+ const other = new EscapeLayerState({ enabled: true, onEscapeKeydown });
114
+ other.mount();
115
+ setup({ initialOpen: true });
116
+ press('Escape');
117
+ // Same order, results open: the palette is topmost and answers, so the
118
+ // previous test really observes the layer being absent, not the ordering.
119
+ expect(onEscapeKeydown).not.toHaveBeenCalled();
120
+ expect(instance.getOpen()).toBe(false);
121
+ other.unmount();
122
+ });
123
+ it('closed: Home and End stay with the caret — native editing is preserved', () => {
124
+ setup({ initialOpen: false });
125
+ expect(press('Home').defaultPrevented).toBe(false);
126
+ expect(press('End').defaultPrevented).toBe(false);
127
+ });
128
+ it('closed: an arrow OPENS the results instead of moving an unseen selection', () => {
129
+ const onOpenChange = vi.fn();
130
+ setup({ initialOpen: false, onOpenChange });
131
+ const event = press('ArrowDown');
132
+ expect(event.defaultPrevented).toBe(true);
133
+ expect(onOpenChange).toHaveBeenCalledWith(true);
134
+ expect(instance.getOpen()).toBe(true);
135
+ flushSync();
136
+ expect(options().length).toBeGreaterThan(0);
137
+ });
138
+ // --- Open: the engine is the one that shipped ---------------------------
139
+ it('open: keyword filtering still decides — a term absent from the label finds the option', () => {
140
+ setup({ initialOpen: true });
141
+ type('duplicate');
142
+ const values = options().map((el) => el.dataset.value);
143
+ expect(values).toEqual(['copy']);
144
+ });
145
+ it('open: arrow then Enter activates the option exactly ONCE', () => {
146
+ const onSelect = vi.fn();
147
+ setup({ initialOpen: true, onSelect });
148
+ press('ArrowDown');
149
+ const selected = options().find((el) => el.dataset.selected === 'true');
150
+ press('Enter');
151
+ expect(onSelect).toHaveBeenCalledTimes(1);
152
+ expect(onSelect).toHaveBeenCalledWith(selected.dataset.value);
153
+ });
154
+ it('open: aria-activedescendant names the rendered option’s DOM id, never its value', () => {
155
+ setup({ initialOpen: true });
156
+ const selected = options().find((el) => el.dataset.selected === 'true');
157
+ expect(activeId()).toBe(selected.id);
158
+ expect(activeId()).not.toBe(selected.dataset.value);
159
+ // And it resolves to a node that is really in the document.
160
+ expect(document.getElementById(activeId())).toBe(selected);
161
+ expect(input().getAttribute('aria-controls')).toBe(target.querySelector('[role="listbox"]').id);
162
+ });
163
+ // --- The reference cannot outlive what it names -------------------------
164
+ it('after filtering, the reference follows the surviving option', () => {
165
+ setup({ initialOpen: true });
166
+ type('duplicate');
167
+ const selected = options().find((el) => el.dataset.selected === 'true');
168
+ expect(selected.dataset.value).toBe('copy');
169
+ expect(activeId()).toBe(selected.id);
170
+ });
171
+ it('when nothing matches, there is no active option and no reference', () => {
172
+ setup({ initialOpen: true });
173
+ type('zzzzz');
174
+ expect(options()).toHaveLength(0);
175
+ expect(activeId()).toBeNull();
176
+ });
177
+ it('removing the active option leaves no dead reference', () => {
178
+ setup({
179
+ initialOpen: true,
180
+ initialEntries: [
181
+ { value: 'copy', label: 'Copy' },
182
+ { value: 'paste', label: 'Paste' },
183
+ ],
184
+ });
185
+ expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('copy');
186
+ // The consumer drops the option that is currently active.
187
+ instance.setEntries([{ value: 'paste', label: 'Paste' }]);
188
+ flushSync();
189
+ const id = activeId();
190
+ expect(id).not.toBeNull();
191
+ const named = document.getElementById(id);
192
+ expect(named).not.toBeNull();
193
+ expect(named.dataset.value).toBe('paste');
194
+ });
195
+ it('reopening after the options changed: no stale selection, no dead reference, no lost first arrow', () => {
196
+ const onSelect = vi.fn();
197
+ setup({
198
+ initialOpen: true,
199
+ onSelect,
200
+ initialEntries: [
201
+ { value: 'copy', label: 'Copy' },
202
+ { value: 'paste', label: 'Paste' },
203
+ ],
204
+ });
205
+ // Move the selection away from the first option, then close.
206
+ press('ArrowDown');
207
+ expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('paste');
208
+ instance.setOpen(false);
209
+ flushSync();
210
+ expect(activeId()).toBeNull();
211
+ // A completely different collection comes back.
212
+ instance.setEntries([
213
+ { value: 'rename', label: 'Rename' },
214
+ { value: 'delete', label: 'Delete' },
215
+ ]);
216
+ instance.setOpen(true);
217
+ flushSync();
218
+ const selected = options().find((el) => el.dataset.selected === 'true');
219
+ // Not the stale `paste`, which no longer exists.
220
+ expect(selected.dataset.value).toBe('rename');
221
+ expect(activeId()).toBe(selected.id);
222
+ // The first arrow MOVES; it is not spent recovering from a stale value.
223
+ press('ArrowDown');
224
+ expect(options().find((el) => el.dataset.selected === 'true').dataset.value).toBe('delete');
225
+ press('Enter');
226
+ expect(onSelect).toHaveBeenCalledTimes(1);
227
+ expect(onSelect).toHaveBeenCalledWith('delete');
228
+ });
229
+ // --- A retained query must survive a remount (review of #224, [P1]) -----
230
+ /**
231
+ * One symptom — zero options after a close and a reopen with the query still
232
+ * in the field — hiding TWO mechanisms, so each gets its own pin.
233
+ *
234
+ * · `Command.Group` gated its children on `hasVisibleItems()`, a predicate
235
+ * over the very registry those children fill. Empty registry + retained
236
+ * query ⇒ children never mount ⇒ registry stays empty. A deadlock.
237
+ * · An item's `isVisible` reads `getScore()` from a plain Map during
238
+ * RENDER, while `registerItem` writes that score from an `$effect`, i.e.
239
+ * afterwards. Nothing woke the derived, so a matching item stayed hidden.
240
+ *
241
+ * Both make `aria-activedescendant` name a node that is not in the document,
242
+ * which is why every pin here resolves the id rather than trusting it.
243
+ */
244
+ function activeElement() {
245
+ const id = activeId();
246
+ return id === null ? null : document.getElementById(id);
247
+ }
248
+ it('a query kept across a close and a reopen still renders its match, named and actionable', () => {
249
+ const onSelect = vi.fn();
250
+ setup({ initialOpen: true, onSelect });
251
+ type('duplicate');
252
+ expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
253
+ instance.setOpen(false);
254
+ flushSync();
255
+ expect(options()).toHaveLength(0);
256
+ instance.setOpen(true);
257
+ flushSync();
258
+ expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
259
+ // The reference resolves to a node that is really in the document.
260
+ expect(activeElement()).not.toBeNull();
261
+ expect(activeElement()).toBe(options()[0]);
262
+ press('Enter');
263
+ expect(onSelect).toHaveBeenCalledTimes(1);
264
+ expect(onSelect).toHaveBeenCalledWith('copy');
265
+ });
266
+ it('a query typed while CLOSED renders its match when an arrow opens the list', () => {
267
+ setup({ initialOpen: false });
268
+ type('duplicate');
269
+ expect(options()).toHaveLength(0);
270
+ press('ArrowDown');
271
+ expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
272
+ expect(activeElement()).toBe(options()[0]);
273
+ });
274
+ it('same, with NO Command.Group: the item mechanism alone is enough to break it', () => {
275
+ target = document.createElement('div');
276
+ document.body.appendChild(target);
277
+ instance = mount(CommandInlineDirectTest, { target });
278
+ flushSync();
279
+ type('duplicate');
280
+ press('ArrowDown');
281
+ expect(options().map((el) => el.dataset.value)).toEqual(['copy']);
282
+ expect(activeElement()).not.toBeNull();
283
+ expect(activeElement()).toBe(options()[0]);
284
+ });
285
+ // --- Event composition --------------------------------------------------
286
+ it('a consumer onkeydown runs first and its preventDefault cancels the local handling', () => {
287
+ const onOpenChange = vi.fn();
288
+ setup({
289
+ initialOpen: false,
290
+ onOpenChange,
291
+ inputAttrs: { onkeydown: (e) => e.preventDefault() },
292
+ });
293
+ press('ArrowDown');
294
+ expect(onOpenChange).not.toHaveBeenCalled();
295
+ expect(instance.getOpen()).toBe(false);
296
+ });
297
+ it('a consumer onkeydown cannot retract a close already performed in the capture phase', () => {
298
+ const onEscapeKeydown = vi.fn();
299
+ setup({
300
+ initialOpen: true,
301
+ onEscapeKeydown,
302
+ inputAttrs: { onkeydown: (e) => e.preventDefault() },
303
+ });
304
+ press('Escape');
305
+ // The layer listens on `document` in capture — it read `defaultPrevented`
306
+ // before the input's handler ever ran. `onEscapeKeydown` is the hook.
307
+ expect(onEscapeKeydown).toHaveBeenCalledTimes(1);
308
+ expect(instance.getOpen()).toBe(false);
309
+ });
310
+ // --- Anchorable, and no focus trap --------------------------------------
311
+ it('renders IN PLACE with the inline chrome released, so results can be anchored', () => {
312
+ setup({ initialOpen: true });
313
+ const root = target.querySelector('.sp-command');
314
+ // In place — not portalled to document.body, which would break both the
315
+ // consumer's scoped CSS and any anchoring to the field.
316
+ expect(root.parentElement).not.toBe(document.body);
317
+ expect(target.contains(root)).toBe(true);
318
+ expect(root.dataset.mode).toBe('inline');
319
+ // The field and the results share one owner, which is what lets a consumer
320
+ // anchor the second to the first.
321
+ const field = root.querySelector('.sp-command-input-wrapper');
322
+ const list = root.querySelector('[role="listbox"]');
323
+ expect(field.parentElement).toBe(root);
324
+ expect(list.parentElement).toBe(root);
325
+ // Whether the released `overflow` really keeps the list unclipped is a
326
+ // LAYOUT fact, and this environment has no CSS at all — vite does not load
327
+ // the components' stylesheets into jsdom. It is proven in a real Chromium
328
+ // by `tests/e2e/command-inline.spec.ts`, on the docs page's live demo.
329
+ });
330
+ it('does not trap focus: an outside control keeps it', () => {
331
+ setup({ initialOpen: true });
332
+ const outside = document.createElement('button');
333
+ document.body.appendChild(outside);
334
+ outside.focus();
335
+ flushSync();
336
+ expect(document.activeElement).toBe(outside);
337
+ outside.remove();
338
+ });
339
+ it('the consumer names the field; the component keeps its structure', () => {
340
+ setup({
341
+ initialOpen: true,
342
+ inputAttrs: {
343
+ 'aria-label': 'Site search',
344
+ 'aria-describedby': 'hint-id',
345
+ title: 'Search',
346
+ 'data-testid': 'field',
347
+ // Refused by the type; spread anyway to prove the markup order wins.
348
+ role: 'textbox',
349
+ id: 'consumer-id',
350
+ 'aria-expanded': 'false',
351
+ 'aria-activedescendant': 'nope',
352
+ },
353
+ });
354
+ const el = input();
355
+ // The consumer's naming and description reach the real combobox…
356
+ expect(el.getAttribute('aria-label')).toBe('Site search');
357
+ expect(el.getAttribute('aria-describedby')).toBe('hint-id');
358
+ expect(el.getAttribute('title')).toBe('Search');
359
+ expect(el.getAttribute('data-testid')).toBe('field');
360
+ // …while the structure stays the component's, whatever is spread.
361
+ expect(el.getAttribute('role')).toBe('combobox');
362
+ expect(el.id).not.toBe('consumer-id');
363
+ expect(el.getAttribute('aria-expanded')).toBe('true');
364
+ expect(el.getAttribute('aria-activedescendant')).not.toBe('nope');
365
+ expect(el.getAttribute('aria-activedescendant')).toBe(options().find((o) => o.dataset.selected === 'true').id);
366
+ });
367
+ it('exposes the wrapper through `wrapperClass` while `class` stays on the input', () => {
368
+ setup({ initialOpen: false });
369
+ const wrapper = target.querySelector('.sp-command-input-wrapper');
370
+ expect(wrapper.classList.contains('probe-wrapper')).toBe(true);
371
+ expect(input().classList.contains('probe-input')).toBe(true);
372
+ expect(input().classList.contains('probe-wrapper')).toBe(false);
373
+ });
374
+ // --- The default mode is untouched --------------------------------------
375
+ it('modal stays the default: closing unmounts the field itself', () => {
376
+ // `portalTo` keeps the modal content inside `target` for querying — the
377
+ // modal default is `document.body`, which is itself part of the contract.
378
+ target = document.createElement('div');
379
+ document.body.appendChild(target);
380
+ instance = mount(CommandInlineTest, {
381
+ target,
382
+ props: { mode: 'modal', initialOpen: true, portalTo: target },
383
+ });
384
+ flushSync();
385
+ expect(input()).toBeTruthy();
386
+ expect(input().getAttribute('aria-expanded')).toBe('true');
387
+ instance.setOpen(false);
388
+ flushSync();
389
+ expect(target.querySelector('input')).toBeNull();
390
+ expect(target.querySelector('.sp-command')).toBeNull();
391
+ });
392
+ });
@@ -4,6 +4,14 @@
4
4
  * Manages search filtering, item scoring, keyboard navigation,
5
5
  * and selection for a command palette interface.
6
6
  */
7
+ /**
8
+ * `'modal'` — the shipped behaviour: the Root exists only while open, and
9
+ * closing unmounts everything, layers included.
10
+ * `'inline'` — the Root and its field stay mounted; `open` then governs only
11
+ * whether the RESULTS are rendered, and the Escape / outside-pointer layers
12
+ * follow the results, never the field.
13
+ */
14
+ export type CommandMode = 'modal' | 'inline';
7
15
  export interface CommandItem {
8
16
  id: string;
9
17
  value: string;
@@ -18,6 +26,25 @@ export interface CommandState {
18
26
  listId: string;
19
27
  shouldFilter: boolean;
20
28
  loop: boolean;
29
+ /** Composition mode of the owning Root. */
30
+ mode: CommandMode;
31
+ /** Whether the Root currently considers the palette open. */
32
+ open: boolean;
33
+ /** Whether a `Command.List` is actually rendered right now. */
34
+ listMounted: boolean;
35
+ /** Called by `Command.List` to report its own mount/unmount. */
36
+ setListMounted: (mounted: boolean) => void;
37
+ /**
38
+ * DOM id of the option that is BOTH active and rendered, or `null`.
39
+ *
40
+ * Resolved against the live registry — never from the stored selection
41
+ * alone — so it cannot outlive the option it names: filtering it out,
42
+ * unmounting the list, or removing the option all make it `null` on the
43
+ * spot. This is what `aria-activedescendant` reads.
44
+ */
45
+ getActiveOptionId: () => string | null;
46
+ /** Asks the Root to open. No-op when it is already open. */
47
+ requestOpen: () => void;
21
48
  setSearch: (query: string) => void;
22
49
  getScore: (value: string) => number;
23
50
  filter: (value: string, search: string, keywords?: string[]) => number;
@@ -47,7 +74,10 @@ export declare function createCommandState(options: {
47
74
  filter: (value: string, search: string, keywords?: string[]) => number;
48
75
  shouldFilter: boolean;
49
76
  loop: boolean;
77
+ mode: CommandMode;
78
+ open: boolean;
50
79
  onSearchChange?: (search: string) => void;
80
+ onRequestOpen?: () => void;
51
81
  }): CommandState;
52
82
  export declare function setCommandContext(state: CommandState): void;
53
83
  export declare function getCommandContext(): CommandState;
@@ -1 +1 @@
1
- {"version":3,"file":"command.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/command.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,MAAM,MAAM,CAAA;IAC9B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAA;IACtE,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAA;IAC7B,eAAe,EAAE,MAAM,WAAW,EAAE,CAAA;IACpC,eAAe,EAAE,MAAM,OAAO,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAYxF;AA0CD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C,GAAG,YAAY,CA+Hf;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAE3D;AAED,wBAAgB,iBAAiB,IAAI,YAAY,CAEhD"}
1
+ {"version":3,"file":"command.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/command/command.svelte.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE5C,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,2CAA2C;IAC3C,IAAI,EAAE,WAAW,CAAA;IACjB,6DAA6D;IAC7D,IAAI,EAAE,OAAO,CAAA;IACb,+DAA+D;IAC/D,WAAW,EAAE,OAAO,CAAA;IACpB,gEAAgE;IAChE,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC1C;;;;;;;OAOG;IACH,iBAAiB,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACtC,4DAA4D;IAC5D,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACnC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAA;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,MAAM,MAAM,CAAA;IAC9B,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAA;IACtE,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,QAAQ,EAAE,MAAM,WAAW,EAAE,CAAA;IAC7B,eAAe,EAAE,MAAM,WAAW,EAAE,CAAA;IACpC,eAAe,EAAE,MAAM,OAAO,CAAA;CAC/B;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAYxF;AA0CD,wBAAgB,kBAAkB,CAAC,OAAO,EAAE;IAC1C,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;IACtE,YAAY,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,EAAE,WAAW,CAAA;IACjB,IAAI,EAAE,OAAO,CAAA;IACb,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B,GAAG,YAAY,CA6Mf;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAE3D;AAED,wBAAgB,iBAAiB,IAAI,YAAY,CAEhD"}