@spectral_labs/ui 1.1.2 → 1.2.1

package/dist/components/context-menu/__tests__/context-menu.test.svelte.js

@@ -1,6 +1,7 @@
 import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import ContextMenuRoot from '../components/context-menu-root.svelte';
+import ContextMenuNonInteractiveTest from './ContextMenuNonInteractiveTest.svelte';
 import ContextMenuTest from './ContextMenuTest.svelte';
 describe('context-menu', () => {
     let target;
@@ -62,4 +63,79 @@ describe('context-menu', () => {
             localTarget.remove();
         }
     });
+    // -------------------------------------------------------------------------
+    // nonInteractive prop
+    //
+    // Use when the child is already focusable/interactive (e.g. a Tree.Item with
+    // role="treeitem" + tabindex=0). The trigger wrapper then attaches event
+    // listeners only, without role/tabindex/aria-disabled, so it does not nest a
+    // second interactive control inside its child — fixing axe `nested-interactive`
+    // + `aria-required-parent` when wrapping a treeitem.
+    // -------------------------------------------------------------------------
+    describe('nonInteractive prop', () => {
+        function setupNI(props = {}) {
+            target = document.createElement('div');
+            document.body.appendChild(target);
+            instance = mount(ContextMenuNonInteractiveTest, {
+                target,
+                props: { portalTo: target, ...props },
+            });
+            flushSync();
+            return target;
+        }
+        it('wrapper has no role, no tabindex, no aria-disabled when nonInteractive', () => {
+            setupNI();
+            const trigger = target.querySelector('.sp-context-menu-trigger');
+            expect(trigger).toBeTruthy();
+            expect(trigger.getAttribute('role')).toBeNull();
+            expect(trigger.getAttribute('tabindex')).toBeNull();
+            expect(trigger.getAttribute('aria-disabled')).toBeNull();
+        });
+        it('treeitem child has no [role="button"] ancestor when nonInteractive', () => {
+            setupNI();
+            const treeitem = target.querySelector('[role="treeitem"]');
+            expect(treeitem).toBeTruthy();
+            // Structural ARIA assertion: the treeitem must be a direct interactive
+            // descendant of the tree (no role="button" wrapper between them) so axe's
+            // `nested-interactive` + `aria-required-parent` rules stop firing.
+            expect(treeitem.closest('[role="button"]')).toBeNull();
+        });
+        it('right-click on wrapper still opens menu when nonInteractive', () => {
+            const calls = [];
+            setupNI({ onOpenChange: (open) => calls.push(open) });
+            const trigger = target.querySelector('.sp-context-menu-trigger');
+            trigger.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: 100, clientY: 100 }));
+            flushSync();
+            expect(calls).toEqual([true]);
+        });
+        it('forwards Shift+F10 from focusable child to the wrapper handler when nonInteractive', () => {
+            const calls = [];
+            setupNI({ onOpenChange: (open) => calls.push(open) });
+            const child = target.querySelector('[data-testid="treeitem"]');
+            child.focus();
+            child.dispatchEvent(new KeyboardEvent('keydown', { key: 'F10', shiftKey: true, bubbles: true }));
+            flushSync();
+            expect(calls).toEqual([true]);
+        });
+        it('long-press (touchstart + 700ms hold) still opens menu when nonInteractive', () => {
+            vi.useFakeTimers();
+            try {
+                const calls = [];
+                setupNI({ onOpenChange: (open) => calls.push(open) });
+                const trigger = target.querySelector('.sp-context-menu-trigger');
+                // jsdom lacks TouchEvent constructor — synthesise a bubbling Event with a touches array.
+                const evt = new Event('touchstart', { bubbles: true });
+                Object.defineProperty(evt, 'touches', {
+                    value: [{ clientX: 100, clientY: 100 }],
+                });
+                trigger.dispatchEvent(evt);
+                vi.advanceTimersByTime(700);
+                flushSync();
+                expect(calls).toEqual([true]);
+            }
+            finally {
+                vi.useRealTimers();
+            }
+        });
+    });
 });

package/dist/components/context-menu/components/context-menu-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ContextMenuContentProps } from '../types.js'
   import { DismissibleLayerState } from '../../../internal/dismissible-layer/index.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
@@ -100,13 +100,11 @@
   })
 
   $effect(() => {
-    if (contentEl)
-      presence.setElement(contentEl)
+    if (contentEl) presence.setElement(contentEl)
   })
 
   function onkeydown(event: KeyboardEvent) {
-    if (!contentEl)
-      return
+    if (!contentEl) return
 
     const items = Array.from(
       contentEl.querySelectorAll<HTMLElement>('[data-roving-focus-item]:not([data-disabled])'),
@@ -136,11 +134,10 @@
       default: {
         if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
           const labels = items.map(
-            el => el.getAttribute('data-text-value') ?? el.textContent?.trim() ?? '',
+            (el) => el.getAttribute('data-text-value') ?? el.textContent?.trim() ?? '',
           )
           const match = typeahead.handleTypeahead(event.key, labels)
-          if (match >= 0)
-            items[match]?.focus()
+          if (match >= 0) items[match]?.focus()
         }
       }
     }
@@ -153,8 +150,8 @@
       bind:this={contentEl}
       class="sp-context-menu-content {className ?? ''}"
       id={ctx.contentId}
-      role='menu'
-      aria-orientation='vertical'
+      role="menu"
+      aria-orientation="vertical"
       tabindex={-1}
       data-state={ctx.open ? 'open' : 'closed'}
       {onkeydown}

package/dist/components/context-menu/components/context-menu-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AA4K1D,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"context-menu-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAyK1D,QAAA,MAAM,kBAAkB,6DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/context-menu/components/context-menu-root.svelte

@@ -1,9 +1,14 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ContextMenuProps } from '../types.js'
   import { setMenuContext } from '../../../internal/menu-context/index.js'
   import { createContextMenuIds, setContextMenuContext } from '../context-menu.svelte.js'
 
-  let { open = $bindable(false), onOpenChange, class: className, children }: ContextMenuProps = $props()
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    class: className,
+    children,
+  }: ContextMenuProps = $props()
 
   const ids = createContextMenuIds()
   let position = $state({ x: 0, y: 0 })

package/dist/components/context-menu/components/context-menu-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AA+CnD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"context-menu-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/context-menu/components/context-menu-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAoDnD,QAAA,MAAM,eAAe,0DAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/context-menu/components/context-menu-trigger.svelte

@@ -1,26 +1,28 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ContextMenuTriggerProps } from '../types.js'
   import { getContextMenuContext } from '../context-menu.svelte.js'
 
-  const { disabled = false, class: className, children }: ContextMenuTriggerProps = $props()
+  const {
+    disabled = false,
+    nonInteractive = false,
+    class: className,
+    children,
+  }: ContextMenuTriggerProps = $props()
   const ctx = getContextMenuContext()
 
   let el: HTMLElement | undefined = $state()
   let longPressTimer: ReturnType<typeof setTimeout> | undefined
 
   function oncontextmenu(event: MouseEvent) {
-    if (disabled)
-      return
+    if (disabled) return
     event.preventDefault()
     ctx.openAt(event.clientX, event.clientY)
   }
 
   function ontouchstart(event: TouchEvent) {
-    if (disabled)
-      return
+    if (disabled) return
     const touch = event.touches[0]
-    if (!touch)
-      return
+    if (!touch) return
     longPressTimer = setTimeout(() => {
       ctx.openAt(touch.clientX, touch.clientY)
     }, 700)
@@ -31,13 +33,11 @@
   }
 
   function onkeydown(event: KeyboardEvent) {
-    if (disabled)
-      return
+    if (disabled) return
     if (event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)) {
       event.preventDefault()
       const rect = el?.getBoundingClientRect()
-      if (!rect)
-        return
+      if (!rect) return
       ctx.openAt(rect.left + rect.width / 2, rect.top + rect.height / 2)
     }
   }
@@ -52,9 +52,9 @@
 <div
   bind:this={el}
   class="sp-context-menu-trigger {className ?? ''}"
-  role='button'
-  tabindex={disabled ? -1 : 0}
-  aria-disabled={disabled || undefined}
+  role={nonInteractive ? undefined : 'button'}
+  tabindex={nonInteractive ? undefined : disabled ? -1 : 0}
+  aria-disabled={!nonInteractive && disabled ? true : undefined}
   {oncontextmenu}
   {ontouchstart}
   {ontouchend}

package/dist/components/context-menu/index.d.ts

@@ -5,5 +5,5 @@ export { default as Separator } from '../dropdown-menu/components/dropdown-menu-
 export { default as Content } from './components/context-menu-content.svelte';
 export { default as Root } from './components/context-menu-root.svelte';
 export { default as Trigger } from './components/context-menu-trigger.svelte';
-export type { ContextMenuContentProps, ContextMenuProps, ContextMenuTriggerProps, } from './types.js';
+export type { ContextMenuContentProps, ContextMenuProps, ContextMenuTriggerProps } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/context-menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/context-menu/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gEAAgE,CAAA;AACxG,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uDAAuD,CAAA;AACvF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,wDAAwD,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4DAA4D,CAAA;AACjG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,YAAY,EACV,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/context-menu/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gEAAgE,CAAA;AACxG,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uDAAuD,CAAA;AACvF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,wDAAwD,CAAA;AACzF,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4DAA4D,CAAA;AACjG,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAA;AAC7E,YAAY,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/context-menu/types.d.ts

@@ -9,6 +9,21 @@ export interface ContextMenuProps {
 }
 export interface ContextMenuTriggerProps {
     disabled?: boolean;
+    /**
+     * When `true`, the trigger renders a neutral wrapper (no `role`, no
+     * `tabindex`, no `aria-disabled`) and only attaches event listeners
+     * (`contextmenu`, `touchstart`, `keydown`). Use this when the child is
+     * itself focusable/interactive (e.g. a `Tree.Item` with `role="treeitem"`
+     * + `tabindex=0`) so the wrapper doesn't introduce a nested interactive
+     * control, which otherwise breaks ARIA `nested-interactive` and
+     * `aria-required-parent` invariants.
+     *
+     * The child remains the only focusable element — keyboard activation
+     * (Shift+F10 / ContextMenu key) bubbles from the child to the wrapper's
+     * `keydown` handler. If the child is **not** focusable, prefer the
+     * default (`nonInteractive: false`) so the wrapper stays keyboard-reachable.
+     */
+    nonInteractive?: boolean;
     class?: string;
     children?: Snippet;
 }
@@ -21,5 +36,5 @@ export interface ContextMenuContentProps {
     class?: string;
     children?: Snippet;
 }
-export type { DropdownMenuCheckboxItemProps as ContextMenuCheckboxItemProps, DropdownMenuItemProps as ContextMenuItemProps, DropdownMenuLabelProps as ContextMenuLabelProps, DropdownMenuSeparatorProps as ContextMenuSeparatorProps } from '../dropdown-menu/types.js';
+export type { DropdownMenuCheckboxItemProps as ContextMenuCheckboxItemProps, DropdownMenuItemProps as ContextMenuItemProps, DropdownMenuLabelProps as ContextMenuLabelProps, DropdownMenuSeparatorProps as ContextMenuSeparatorProps, } from '../dropdown-menu/types.js';
 //# sourceMappingURL=types.d.ts.map

package/dist/components/context-menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/context-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,wCAAwC,CAAA;AAEzE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAGD,YAAY,EAAE,6BAA6B,IAAI,4BAA4B,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,sBAAsB,IAAI,qBAAqB,EAAE,0BAA0B,IAAI,yBAAyB,EAAE,MAAM,2BAA2B,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/context-menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,wCAAwC,CAAA;AAEzE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,uFAAuF;IACvF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;OAaG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,WAAW,GAAG,MAAM,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAGD,YAAY,EACV,6BAA6B,IAAI,4BAA4B,EAC7D,qBAAqB,IAAI,oBAAoB,EAC7C,sBAAsB,IAAI,qBAAqB,EAC/C,0BAA0B,IAAI,yBAAyB,GACxD,MAAM,2BAA2B,CAAA"}

package/dist/components/date-field/__tests__/DateFieldTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateValue } from '../../../internal/date-time/types.js'
   import * as DateField from '../index.js'
 

package/dist/components/date-field/__tests__/date-field.test.svelte.js

@@ -34,11 +34,11 @@ describe('date-field', () => {
     it('segments have aria-label identifying day, month, year', () => {
         setup();
         const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        const labels = Array.from(spinbuttons).map(s => s.getAttribute('aria-label')?.toLowerCase() ?? '');
+        const labels = Array.from(spinbuttons).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
         // Each label should match day/month/year (en) or jour/mois/année (fr) etc.
-        const hasDayLabel = labels.some(l => /day|jour|giorno|día|tag/i.test(l));
-        const hasMonthLabel = labels.some(l => /month|mois|mese|mes|monat/i.test(l));
-        const hasYearLabel = labels.some(l => /year|année|anno|año|jahr/i.test(l));
+        const hasDayLabel = labels.some((l) => /day|jour|giorno|día|tag/i.test(l));
+        const hasMonthLabel = labels.some((l) => /month|mois|mese|mes|monat/i.test(l));
+        const hasYearLabel = labels.some((l) => /year|année|anno|año|jahr/i.test(l));
         expect(hasDayLabel).toBe(true);
         expect(hasMonthLabel).toBe(true);
         expect(hasYearLabel).toBe(true);
@@ -48,7 +48,7 @@ describe('date-field', () => {
         const date = new CalendarDate(2024, 6, 15);
         setup({ value: date });
         const spinbuttons = target.querySelectorAll('[role="spinbutton"]');
-        const texts = Array.from(spinbuttons).map(s => s.textContent?.trim() ?? '');
+        const texts = Array.from(spinbuttons).map((s) => s.textContent?.trim() ?? '');
         // 2024, 06, 15 should appear (order may vary by locale)
         expect(texts.includes('2024')).toBe(true);
         // Month may render as "06" or "6"

package/dist/components/date-field/components/date-field-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateValue } from '../../../internal/date-time/types.js'
   import type { DateFieldProps } from '../types.js'
   import { CalendarDate } from '@internationalized/date'
@@ -19,7 +19,7 @@
   }: DateFieldProps = $props()
 
   // Internal segment tracking
-  let segmentValues = $state<{ year: number | null, month: number | null, day: number | null }>({
+  let segmentValues = $state<{ year: number | null; month: number | null; day: number | null }>({
     year: value ? value.year : null,
     month: value ? value.month : null,
     day: value ? value.day : null,
@@ -27,10 +27,8 @@
 
   // Sync from external value changes (including reset to undefined)
   $effect(() => {
-    if (value)
-      segmentValues = { year: value.year, month: value.month, day: value.day }
-    else
-      segmentValues = { year: null, month: null, day: null }
+    if (value) segmentValues = { year: value.year, month: value.month, day: value.day }
+    else segmentValues = { year: null, month: null, day: null }
   })
 
   const segments = $derived(generateSegments(value, segmentValues, locale))
@@ -42,8 +40,7 @@
     if (y && m) {
       try {
         return getDaysInMonthCount(new CalendarDate(y, m, 1))
-      }
-      catch {
+      } catch {
         return 31
       }
     }
@@ -55,8 +52,7 @@
     if (year !== null && month !== null && day !== null) {
       try {
         return new CalendarDate(year, month, day)
-      }
-      catch {
+      } catch {
         return undefined
       }
     }
@@ -79,8 +75,7 @@
   function setValue(v: DateValue | undefined) {
     if (v) {
       segmentValues = { year: v.year, month: v.month, day: v.day }
-    }
-    else {
+    } else {
       segmentValues = { year: null, month: null, day: null }
     }
     value = v
@@ -88,11 +83,21 @@
   }
 
   setDateFieldContext({
-    get value() { return value },
-    get segments() { return segments },
-    get disabled() { return disabled },
-    get readonly() { return isReadonly },
-    get locale() { return locale },
+    get value() {
+      return value
+    },
+    get segments() {
+      return segments
+    },
+    get disabled() {
+      return disabled
+    },
+    get readonly() {
+      return isReadonly
+    },
+    get locale() {
+      return locale
+    },
     updateSegment,
     clearSegment,
     getSegmentValues: () => segmentValues,
@@ -100,12 +105,16 @@
   })
 
   // Hidden input for form submission
-  const hiddenValue = $derived(value ? `${value.year}-${String(value.month).padStart(2, '0')}-${String(value.day).padStart(2, '0')}` : '')
+  const hiddenValue = $derived(
+    value
+      ? `${value.year}-${String(value.month).padStart(2, '0')}-${String(value.day).padStart(2, '0')}`
+      : '',
+  )
 </script>
 
 <div
   class="sp-date-field {className ?? ''}"
-  role='group'
+  role="group"
   aria-label={ariaLabel ?? 'Date'}
   data-disabled={disabled || undefined}
 >
@@ -117,10 +126,10 @@
       {#if segment.editable}
         {@const part = segment.part}
         <span
-          class='sp-date-field-segment'
-          role='spinbutton'
+          class="sp-date-field-segment"
+          role="spinbutton"
           contenteditable={!disabled && !isReadonly}
-          inputmode='numeric'
+          inputmode="numeric"
           tabindex={disabled ? -1 : 0}
           data-placeholder={segmentValues[part as 'year' | 'month' | 'day'] === null || undefined}
           aria-label={part}
@@ -141,27 +150,22 @@
               const min = part === 'year' ? 1 : 1
               const max = part === 'year' ? 9999 : part === 'month' ? 12 : maxDay
               const step = key === 'ArrowUp' ? 1 : -1
-              const next = current !== null ? current + step : (key === 'ArrowUp' ? min : max)
-              if (next >= min && next <= max)
-                updateSegment(part, next)
-            }
-            else if (key === 'Backspace' || key === 'Delete') {
+              const next = current !== null ? current + step : key === 'ArrowUp' ? min : max
+              if (next >= min && next <= max) updateSegment(part, next)
+            } else if (key === 'Backspace' || key === 'Delete') {
               e.preventDefault()
               clearSegment(part)
-            }
-            else if (key === 'ArrowLeft') {
+            } else if (key === 'ArrowLeft') {
               e.preventDefault()
-              const prev = (e.currentTarget as HTMLElement).previousElementSibling?.previousElementSibling as HTMLElement | null
-              if (prev?.getAttribute('role') === 'spinbutton')
-                prev.focus()
-            }
-            else if (key === 'ArrowRight') {
+              const prev = (e.currentTarget as HTMLElement).previousElementSibling
+                ?.previousElementSibling as HTMLElement | null
+              if (prev?.getAttribute('role') === 'spinbutton') prev.focus()
+            } else if (key === 'ArrowRight') {
               e.preventDefault()
-              const next = (e.currentTarget as HTMLElement).nextElementSibling?.nextElementSibling as HTMLElement | null
-              if (next?.getAttribute('role') === 'spinbutton')
-                next.focus()
-            }
-            else if (/^\d$/.test(key)) {
+              const next = (e.currentTarget as HTMLElement).nextElementSibling
+                ?.nextElementSibling as HTMLElement | null
+              if (next?.getAttribute('role') === 'spinbutton') next.focus()
+            } else if (/^\d$/.test(key)) {
               e.preventDefault()
               const current = segmentValues[part as 'year' | 'month' | 'day']
               const max = part === 'year' ? 9999 : part === 'month' ? 12 : maxDay
@@ -169,40 +173,36 @@
               let newVal: number
               if (current === null || current === 0) {
                 newVal = digit
-              }
-              else {
+              } else {
                 newVal = current * 10 + digit
               }
-              if (newVal > max)
-                newVal = digit
+              if (newVal > max) newVal = digit
               updateSegment(part, newVal)
 
               // Auto-advance when segment is full
               const maxDigits = part === 'year' ? 4 : 2
               if (String(newVal).length >= maxDigits || newVal * 10 > max) {
-                const next = (e.currentTarget as HTMLElement).nextElementSibling?.nextElementSibling as HTMLElement | null
-                if (next?.getAttribute('role') === 'spinbutton')
-                  next.focus()
+                const next = (e.currentTarget as HTMLElement).nextElementSibling
+                  ?.nextElementSibling as HTMLElement | null
+                if (next?.getAttribute('role') === 'spinbutton') next.focus()
               }
-            }
-            else if (key === 'Tab') {
-            // Allow natural tab
-            }
-            else {
+            } else if (key === 'Tab') {
+              // Allow natural tab
+            } else {
               e.preventDefault()
             }
           }}
-          onbeforeinput={e => e.preventDefault()}
-        >{segment.value}</span>
+          onbeforeinput={(e) => e.preventDefault()}>{segment.value}</span
+        >
       {:else}
-        <span class='sp-date-field-literal' aria-hidden='true'>{segment.value}</span>
+        <span class="sp-date-field-literal" aria-hidden="true">{segment.value}</span>
       {/if}
     {/each}
   {/if}
 </div>
 
 {#if name}
-  <input type='hidden' {name} value={hiddenValue} {required} />
+  <input type="hidden" {name} value={hiddenValue} {required} />
 {/if}
 
 <style>

package/dist/components/date-field/types.d.ts

@@ -2,34 +2,34 @@ import type { Snippet } from 'svelte';
 import type { DateValue, Granularity, HourCycle } from '../../internal/date-time/types.js';
 export interface DateFieldProps {
     /** Current date value. */
-    'value'?: DateValue;
+    value?: DateValue;
     /** Callback when value changes. */
-    'onValueChange'?: (value: DateValue | undefined) => void;
+    onValueChange?: (value: DateValue | undefined) => void;
     /** Placeholder date (determines format and initial segments). */
-    'placeholder'?: DateValue;
+    placeholder?: DateValue;
     /** Which parts to display. */
-    'granularity'?: Granularity;
+    granularity?: Granularity;
     /** 12 or 24 hour clock. */
-    'hourCycle'?: HourCycle;
+    hourCycle?: HourCycle;
     /** Locale for formatting. */
-    'locale'?: string;
+    locale?: string;
     /** Minimum value. */
-    'minValue'?: DateValue;
+    minValue?: DateValue;
     /** Maximum value. */
-    'maxValue'?: DateValue;
+    maxValue?: DateValue;
     /** Disabled state. */
-    'disabled'?: boolean;
+    disabled?: boolean;
     /** Readonly state. */
-    'readonly'?: boolean;
+    readonly?: boolean;
     /** Required for form validation. */
-    'required'?: boolean;
+    required?: boolean;
     /** Form field name (renders hidden input). */
-    'name'?: string;
+    name?: string;
     /** Accessible label. */
     'aria-label'?: string;
     /** Additional CSS class. */
-    'class'?: string;
-    'children'?: Snippet;
+    class?: string;
+    children?: Snippet;
 }
 export interface DateFieldSegmentProps {
     /** Which part this segment represents. */

package/dist/components/date-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAA;AAE1F,MAAM,WAAW,cAAc;IAC7B,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;IACxD,iEAAiE;IACjE,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,WAAW,CAAA;IAC3B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qBAAqB;IACrB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,qBAAqB;IACrB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAA;AAE1F,MAAM,WAAW,cAAc;IAC7B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;IACtD,iEAAiE;IACjE,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAA;IACZ,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}

package/dist/components/date-picker/__tests__/DatePickerTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateValue } from '../../../internal/date-time/types.js'
   import DatePickerRoot from '../components/date-picker-root.svelte'
 
@@ -17,10 +17,4 @@
   } = $props()
 </script>
 
-<DatePickerRoot
-  bind:value
-  {disabled}
-  readonly={isReadonly}
-  {closeOnDateSelect}
-  {portalTo}
-/>
+<DatePickerRoot bind:value {disabled} readonly={isReadonly} {closeOnDateSelect} {portalTo} />

package/dist/components/date-picker/__tests__/date-picker.test.svelte.js

@@ -35,18 +35,18 @@ describe('datePicker', () => {
      * Also accepts aria-haspopup in case the API evolves.
      */
     function findTrigger() {
-        return (target.querySelector('button.sp-date-picker-trigger')
-            ?? target.querySelector('button[aria-label="Open calendar"]')
-            ?? target.querySelector('button[aria-haspopup]'));
+        return (target.querySelector('button.sp-date-picker-trigger') ??
+            target.querySelector('button[aria-label="Open calendar"]') ??
+            target.querySelector('button[aria-haspopup]'));
     }
     /**
      * Finds the open popup content inside the portal target.
      * The root renders <div data-state="open" class="sp-date-picker-content">.
      */
     function findOpenContent() {
-        return (target.querySelector('[data-state="open"]')
-            ?? target.querySelector('.sp-date-picker-content')
-            ?? target.querySelector('[role="dialog"]'));
+        return (target.querySelector('[data-state="open"]') ??
+            target.querySelector('.sp-date-picker-content') ??
+            target.querySelector('[role="dialog"]'));
     }
     // ─── Smoke ────────────────────────────────────────────────────────────────
     it('renders a trigger button', () => {
@@ -131,8 +131,7 @@ describe('datePicker', () => {
     it('marks the trigger button as disabled when disabled=true', () => {
         setup({ disabled: true });
         const trigger = findTrigger();
-        const isDisabled = trigger?.hasAttribute('disabled')
-            || trigger?.getAttribute('aria-disabled') === 'true';
+        const isDisabled = trigger?.hasAttribute('disabled') || trigger?.getAttribute('aria-disabled') === 'true';
         expect(isDisabled).toBe(true);
     });
     it('does not open when disabled=true and trigger is clicked', () => {
@@ -160,7 +159,9 @@ describe('datePicker', () => {
         // Create a fresh instance WITHOUT portalTo so it defaults to document.body
         const bodyTarget = document.createElement('div');
         document.body.appendChild(bodyTarget);
-        const bodyInstance = mount(DatePickerTest, { target: bodyTarget });
+        const bodyInstance = mount(DatePickerTest, {
+            target: bodyTarget,
+        });
         flushSync();
         const triggerEl = bodyTarget.querySelector('button.sp-date-picker-trigger, button[aria-label="Open calendar"]');
         triggerEl?.click();