@spectral_labs/ui 1.1.2 → 1.2.1

package/dist/components/combobox/components/combobox-item.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ComboboxItemProps } from '../types.js'
   import { useId } from '../../../internal/helpers/index.js'
   import { getComboboxContext } from '../combobox.svelte.js'
@@ -24,7 +24,7 @@
 <div
   id={itemId}
   class="sp-combobox-item {className ?? ''}"
-  role='option'
+  role="option"
   aria-selected={isSelected}
   aria-disabled={disabled || undefined}
   tabindex={-1}
@@ -34,18 +34,15 @@
   data-state={isSelected ? 'selected' : 'unselected'}
   data-highlighted={isHighlighted || undefined}
   onclick={() => {
-    if (!disabled)
-      ctx.select(value)
+    if (!disabled) ctx.select(value)
   }}
   onpointerenter={() => {
-    if (!disabled && matchesSearch)
-      ctx.highlightItem(itemId)
+    if (!disabled && matchesSearch) ctx.highlightItem(itemId)
   }}
   onkeydown={(e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault()
-      if (!disabled)
-        ctx.select(value)
+      if (!disabled) ctx.select(value)
     }
   }}
 >

package/dist/components/combobox/components/combobox-item.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/combobox/components/combobox-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AA+CpD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"combobox-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/combobox/components/combobox-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AA4CpD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/combobox/components/combobox-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ComboboxProps } from '../types.js'
   import { createComboboxIds, setComboboxContext } from '../combobox.svelte.js'
 
@@ -18,24 +18,21 @@
   let highlightedId = $state('')
 
   // Registry of items: ordered list of { id, value, disabled }
-  const itemRegistry: { id: string, value: string, disabled: boolean }[] = []
+  const itemRegistry: { id: string; value: string; disabled: boolean }[] = []
 
-  function getVisibleItems(): { id: string, value: string, disabled: boolean }[] {
+  function getVisibleItems(): { id: string; value: string; disabled: boolean }[] {
     const query = search.trim().toLowerCase()
     if (!query) {
-      return itemRegistry.filter(item => !item.disabled)
+      return itemRegistry.filter((item) => !item.disabled)
     }
-    return itemRegistry.filter(
-      item => !item.disabled && item.value.toLowerCase().includes(query),
-    )
+    return itemRegistry.filter((item) => !item.disabled && item.value.toLowerCase().includes(query))
   }
 
   function navigateItems(direction: 'next' | 'prev' | 'first' | 'last') {
     const items = getVisibleItems()
-    if (items.length === 0)
-      return
+    if (items.length === 0) return
 
-    const currentIdx = items.findIndex(i => i.id === highlightedId)
+    const currentIdx = items.findIndex((i) => i.id === highlightedId)
 
     let nextIdx: number
     switch (direction) {
@@ -63,7 +60,7 @@
   }
 
   function selectHighlighted() {
-    const item = itemRegistry.find(i => i.id === highlightedId)
+    const item = itemRegistry.find((i) => i.id === highlightedId)
     if (item) {
       value = item.value
       search = ''
@@ -132,19 +129,17 @@
     navigateItems,
     selectHighlighted,
     registerItem(id: string, itemValue: string, itemDisabled: boolean = false) {
-      const existing = itemRegistry.find(item => item.id === id)
+      const existing = itemRegistry.find((item) => item.id === id)
       if (existing) {
         existing.value = itemValue
         existing.disabled = itemDisabled
-      }
-      else {
+      } else {
         itemRegistry.push({ id, value: itemValue, disabled: itemDisabled })
       }
     },
     unregisterItem(id: string) {
-      const idx = itemRegistry.findIndex(i => i.id === id)
-      if (idx !== -1)
-        itemRegistry.splice(idx, 1)
+      const idx = itemRegistry.findIndex((i) => i.id === id)
+      if (idx !== -1) itemRegistry.splice(idx, 1)
     },
   })
 </script>
@@ -154,7 +149,7 @@
 </div>
 
 {#if name}
-  <input type='hidden' {name} {value} />
+  <input type="hidden" {name} {value} />
 {/if}
 
 <style>

package/dist/components/combobox/components/combobox-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/combobox/components/combobox-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAsKhD,QAAA,MAAM,YAAY,4EAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"combobox-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/combobox/components/combobox-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAiKhD,QAAA,MAAM,YAAY,4EAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/combobox/index.d.ts

@@ -2,5 +2,5 @@ export { default as Content } from './components/combobox-content.svelte';
 export { default as Input } from './components/combobox-input.svelte';
 export { default as Item } from './components/combobox-item.svelte';
 export { default as Root } from './components/combobox-root.svelte';
-export type { ComboboxContentProps, ComboboxInputProps, ComboboxItemProps, ComboboxProps } from './types.js';
+export type { ComboboxContentProps, ComboboxInputProps, ComboboxItemProps, ComboboxProps, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sCAAsC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oCAAoC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mCAAmC,CAAA;AACnE,YAAY,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/combobox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sCAAsC,CAAA;AACzE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,oCAAoC,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mCAAmC,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,mCAAmC,CAAA;AACnE,YAAY,EACV,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,aAAa,GACd,MAAM,YAAY,CAAA"}

package/dist/components/command/__tests__/CommandTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import CommandEmpty from '../components/command-empty.svelte'
   import CommandGroup from '../components/command-group.svelte'
   import CommandInput from '../components/command-input.svelte'
@@ -28,19 +28,28 @@
   } = $props()
 </script>
 
-<CommandRoot bind:value bind:open {shouldFilter} {portalTo} {closeOnEscape} {closeOnOutsideClick} {onOpenChange} {onClose}>
-  <CommandInput placeholder='Type a command...' />
+<CommandRoot
+  bind:value
+  bind:open
+  {shouldFilter}
+  {portalTo}
+  {closeOnEscape}
+  {closeOnOutsideClick}
+  {onOpenChange}
+  {onClose}
+>
+  <CommandInput placeholder="Type a command..." />
   <CommandList>
     <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading='Actions'>
-      <CommandItem value='copy' keywords={['duplicate']}>Copy</CommandItem>
-      <CommandItem value='paste'>Paste</CommandItem>
-      <CommandItem value='cut'>Cut</CommandItem>
+    <CommandGroup heading="Actions">
+      <CommandItem value="copy" keywords={['duplicate']}>Copy</CommandItem>
+      <CommandItem value="paste">Paste</CommandItem>
+      <CommandItem value="cut">Cut</CommandItem>
     </CommandGroup>
     <CommandSeparator />
-    <CommandGroup heading='Navigation'>
-      <CommandItem value='home'>Home</CommandItem>
-      <CommandItem value='settings' disabled>Settings</CommandItem>
+    <CommandGroup heading="Navigation">
+      <CommandItem value="home">Home</CommandItem>
+      <CommandItem value="settings" disabled>Settings</CommandItem>
     </CommandGroup>
   </CommandList>
 </CommandRoot>

package/dist/components/command/__tests__/command.a11y.test.js

@@ -6,7 +6,7 @@ import CommandTest from './CommandTest.svelte';
 expect.extend(matchers);
 const axe = configureAxe({
     rules: {
-        'region': { enabled: false },
+        region: { enabled: false },
         'page-has-heading-one': { enabled: false },
         'landmark-one-main': { enabled: false },
         // Command uses listbox > group > option — valid WAI-ARIA but axe doesn't walk through groups

package/dist/components/command/command.svelte.d.ts.map

@@ -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,CAaxF;AAmDD,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,CAyHf;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAE3D;AAED,wBAAgB,iBAAiB,IAAI,YAAY,CAEhD"}
+{"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"}

package/dist/components/command/command.svelte.js

@@ -89,10 +89,10 @@ export function createCommandState(options) {
         }
     }
     function getVisibleItems() {
-        return items.filter(item => (scores.get(item.value) ?? 0) > 0);
+        return items.filter((item) => (scores.get(item.value) ?? 0) > 0);
     }
     function getEnabledVisibleItems() {
-        return getVisibleItems().filter(item => !item.disabled);
+        return getVisibleItems().filter((item) => !item.disabled);
     }
     function navigateItems(direction) {
         const enabled = getEnabledVisibleItems();
@@ -106,7 +106,7 @@ export function createCommandState(options) {
             selectedValue = enabled[enabled.length - 1].value;
             return;
         }
-        const currentIndex = enabled.findIndex(item => item.value === selectedValue);
+        const currentIndex = enabled.findIndex((item) => item.value === selectedValue);
         if (direction === 'next') {
             if (currentIndex === -1 || currentIndex >= enabled.length - 1) {
                 selectedValue = options.loop ? enabled[0].value : enabled[enabled.length - 1].value;
@@ -127,18 +127,26 @@ export function createCommandState(options) {
     // Compute initial scores
     updateScores(options.search);
     return {
-        get search() { return options.search; },
-        get selectedValue() { return selectedValue; },
+        get search() {
+            return options.search;
+        },
+        get selectedValue() {
+            return selectedValue;
+        },
         inputId,
         listId,
-        get shouldFilter() { return options.shouldFilter; },
-        get loop() { return options.loop; },
+        get shouldFilter() {
+            return options.shouldFilter;
+        },
+        get loop() {
+            return options.loop;
+        },
         setSearch(query) {
             options.onSearchChange?.(query);
             updateScores(query);
             // Auto-select first visible item after search
             const enabled = getEnabledVisibleItems();
-            if (enabled.length > 0 && !enabled.some(i => i.value === selectedValue)) {
+            if (enabled.length > 0 && !enabled.some((i) => i.value === selectedValue)) {
                 selectedValue = enabled[0].value;
             }
         },
@@ -158,7 +166,7 @@ export function createCommandState(options) {
             }
         },
         unregisterItem(id) {
-            const index = items.findIndex(item => item.id === id);
+            const index = items.findIndex((item) => item.id === id);
             if (index !== -1) {
                 const item = items[index];
                 scores.delete(item.value);
@@ -175,7 +183,9 @@ export function createCommandState(options) {
         selectCurrent() {
             // Handled by the item component via onSelect callback
         },
-        getItems() { return items; },
+        getItems() {
+            return items;
+        },
         getVisibleItems,
         hasVisibleItems() {
             return getVisibleItems().length > 0;

package/dist/components/command/components/command-empty.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { CommandEmptyProps } from '../types.js'
   import { getCommandContext } from '../command.svelte.js'
 
@@ -9,7 +9,7 @@
 </script>
 
 {#if shouldShow}
-  <div class="sp-command-empty {className ?? ''}" role='presentation'>
+  <div class="sp-command-empty {className ?? ''}" role="presentation">
     {#if children}
       {@render children()}
     {:else}

package/dist/components/command/components/command-group.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { CommandGroupProps } from '../types.js'
   import { useId } from '../../../internal/helpers/index.js'
   import { getCommandContext } from '../command.svelte.js'
@@ -9,18 +9,20 @@
 
   // In filtered mode, groups are hidden if they have no visible items
   // For simplicity, we always render and let CSS/items handle visibility
-  const isHidden = $derived(!forceMount && ctx.shouldFilter && ctx.search !== '' && !ctx.hasVisibleItems())
+  const isHidden = $derived(
+    !forceMount && ctx.shouldFilter && ctx.search !== '' && !ctx.hasVisibleItems(),
+  )
 </script>
 
 {#if !isHidden}
   <div
     class="sp-command-group {className ?? ''}"
-    role='group'
+    role="group"
     aria-labelledby={heading ? headingId : undefined}
     data-command-group
   >
     {#if heading}
-      <div class='sp-command-group-heading' id={headingId}>{heading}</div>
+      <div class="sp-command-group-heading" id={headingId}>{heading}</div>
     {/if}
     {#if children}{@render children()}{/if}
   </div>

package/dist/components/command/components/command-group.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-group.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-group.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AA+BpD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"command-group.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-group.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAiCpD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/command/components/command-input.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { CommandInputProps } from '../types.js'
   import { kbd } from '../../../internal/helpers/index.js'
   import { getCommandContext } from '../command.svelte.js'
@@ -7,8 +7,7 @@
   const ctx = getCommandContext()
 
   function onkeydown(e: KeyboardEvent) {
-    if (e.isComposing)
-      return
+    if (e.isComposing) return
 
     switch (e.key) {
       case kbd.ARROW_DOWN: {
@@ -45,7 +44,9 @@
 
         // Find the item element and trigger its click
         const listEl = document.getElementById(ctx.listId)
-        const selected = listEl?.querySelector<HTMLElement>('[data-command-item][data-selected="true"]')
+        const selected = listEl?.querySelector<HTMLElement>(
+          '[data-command-item][data-selected="true"]',
+        )
         selected?.click()
         break
       }
@@ -53,23 +54,35 @@
   }
 </script>
 
-<div class='sp-command-input-wrapper'>
-  <svg class='sp-command-input-icon' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
-    <circle cx='11' cy='11' r='8' />
-    <path d='m21 21-4.3-4.3' />
+<div class="sp-command-input-wrapper">
+  <svg
+    class="sp-command-input-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
   </svg>
   <input
     class="sp-command-input {className ?? ''}"
     id={ctx.inputId}
-    type='text'
-    role='combobox'
-    aria-expanded='true'
+    type="text"
+    role="combobox"
+    aria-expanded="true"
     aria-controls={ctx.listId}
-    aria-autocomplete='list'
-    autocomplete='off'
+    aria-autocomplete="list"
+    autocomplete="off"
     {placeholder}
     value={ctx.search}
-    oninput={e => ctx.setSearch((e.target as HTMLInputElement).value)}
+    oninput={(e) => ctx.setSearch((e.target as HTMLInputElement).value)}
     {onkeydown}
   />
 </div>

package/dist/components/command/components/command-input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-input.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAuEpD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"command-input.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAwEpD,QAAA,MAAM,YAAY,uDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/command/components/command-item.svelte

@@ -1,9 +1,16 @@
-<script lang='ts'>
+<script lang="ts">
   import type { CommandItemProps } from '../types.js'
   import { useId } from '../../../internal/helpers/index.js'
   import { getCommandContext } from '../command.svelte.js'
 
-  const { value, keywords, disabled = false, onSelect, class: className, children }: CommandItemProps = $props()
+  const {
+    value,
+    keywords,
+    disabled = false,
+    onSelect,
+    class: className,
+    children,
+  }: CommandItemProps = $props()
   const ctx = getCommandContext()
   const id = useId('sp-command-item')
 
@@ -17,15 +24,13 @@
   })
 
   function onclick() {
-    if (disabled)
-      return
+    if (disabled) return
     ctx.select(value)
     onSelect?.(value)
   }
 
   function onpointermove() {
-    if (!disabled && ctx.selectedValue !== value)
-      ctx.select(value)
+    if (!disabled && ctx.selectedValue !== value) ctx.select(value)
   }
 </script>
 
@@ -33,7 +38,7 @@
   <div
     class="sp-command-item {className ?? ''}"
     {id}
-    role='option'
+    role="option"
     aria-selected={isSelected}
     aria-disabled={disabled || undefined}
     data-command-item

package/dist/components/command/components/command-item.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAkDnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"command-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAuDnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/command/components/command-list.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { CommandListProps } from '../types.js'
   import { getCommandContext } from '../command.svelte.js'
 
@@ -6,12 +6,7 @@
   const ctx = getCommandContext()
 </script>
 
-<div
-  class="sp-command-list {className ?? ''}"
-  id={ctx.listId}
-  role='listbox'
-  aria-label={label}
->
+<div class="sp-command-list {className ?? ''}" id={ctx.listId} role="listbox" aria-label={label}>
   {#if children}{@render children()}{/if}
 </div>
 

package/dist/components/command/components/command-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { CommandProps } from '../types.js'
   import { DismissibleLayerState } from '../../../internal/dismissible-layer/index.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
@@ -27,10 +27,18 @@
   }: CommandProps = $props()
 
   const commandState = createCommandState({
-    get search() { return value },
-    get filter() { return filter },
-    get shouldFilter() { return shouldFilter },
-    get loop() { return loop },
+    get search() {
+      return value
+    },
+    get filter() {
+      return filter
+    },
+    get shouldFilter() {
+      return shouldFilter
+    },
+    get loop() {
+      return loop
+    },
     onSearchChange(query) {
       value = query
     },
@@ -41,7 +49,9 @@
   let contentEl: HTMLElement | undefined = $state(undefined)
 
   const presence = new PresenceLayerState({
-    get present() { return open },
+    get present() {
+      return open
+    },
   })
 
   const focusScope = new FocusScopeState({ element: null, enabled: true })
@@ -50,8 +60,7 @@
     enabled: true,
     onEscapeKeydown(event) {
       onEscapeKeydown?.(event)
-      if (!closeOnEscape)
-        return
+      if (!closeOnEscape) return
       if (!event.defaultPrevented) {
         open = false
         onOpenChange?.(false)
@@ -65,8 +74,7 @@
     element: null,
     onInteractOutside(event) {
       onInteractOutside?.(event)
-      if (!closeOnOutsideClick)
-        return
+      if (!closeOnOutsideClick) return
       if (!event.defaultPrevented) {
         open = false
         onOpenChange?.(false)

package/dist/components/command/components/command-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AA4H/C,QAAA,MAAM,WAAW,gEAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"command-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/command/components/command-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAoI/C,QAAA,MAAM,WAAW,gEAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/command/components/command-separator.svelte

@@ -1,10 +1,10 @@
-<script lang='ts'>
+<script lang="ts">
   import type { CommandSeparatorProps } from '../types.js'
 
   const { class: className }: CommandSeparatorProps = $props()
 </script>
 
-<div class="sp-command-separator {className ?? ''}" role='separator'></div>
+<div class="sp-command-separator {className ?? ''}" role="separator"></div>
 
 <style>
   .sp-command-separator {

package/dist/components/context-menu/__tests__/ContextMenuNonInteractiveTest.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import DropdownMenuItem from '../../dropdown-menu/components/dropdown-menu-item.svelte'
+  import ContextMenuContent from '../components/context-menu-content.svelte'
+  import ContextMenuRoot from '../components/context-menu-root.svelte'
+  import ContextMenuTrigger from '../components/context-menu-trigger.svelte'
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    portalTo,
+  }: {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+    portalTo?: HTMLElement | string
+  } = $props()
+</script>
+
+<!--
+  Mirrors the Refero V2 CollectionTree pattern: a `Tree.Item`-like focusable
+  child (role="treeitem" + tabindex=0) is wrapped by ContextMenu.Trigger with
+  `nonInteractive`. The treeitem stays the only interactive node — the trigger
+  wrapper attaches event listeners but no role/tabindex/aria-disabled.
+-->
+<ContextMenuRoot bind:open {onOpenChange}>
+  <ContextMenuTrigger nonInteractive>
+    <div role="treeitem" tabindex="0" aria-level="1" data-testid="treeitem">Tree item</div>
+  </ContextMenuTrigger>
+  <ContextMenuContent {portalTo}>
+    <DropdownMenuItem>Item 1</DropdownMenuItem>
+    <DropdownMenuItem>Item 2</DropdownMenuItem>
+  </ContextMenuContent>
+</ContextMenuRoot>

package/dist/components/context-menu/__tests__/ContextMenuTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import DropdownMenuItem from '../../dropdown-menu/components/dropdown-menu-item.svelte'
   import ContextMenuContent from '../components/context-menu-content.svelte'
   import ContextMenuRoot from '../components/context-menu-root.svelte'