@spectral_labs/ui 1.2.0 → 1.2.1

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, nonInteractive = 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)
     }
   }
@@ -53,7 +53,7 @@
   bind:this={el}
   class="sp-context-menu-trigger {className ?? ''}"
   role={nonInteractive ? undefined : 'button'}
-  tabindex={nonInteractive ? undefined : (disabled ? -1 : 0)}
+  tabindex={nonInteractive ? undefined : disabled ? -1 : 0}
   aria-disabled={!nonInteractive && disabled ? true : undefined}
   {oncontextmenu}
   {ontouchstart}

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

@@ -36,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;;;;;;;;;;;;;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,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();

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateValue } from '../../../internal/date-time/types.js'
   import type { DatePickerProps } from '../types.js'
   import { getDefaultDate } from '../../../internal/date-time/utils.js'
@@ -41,15 +41,15 @@
 
   // Sync calendar viewport with field value / external placeholder
   $effect(() => {
-    if (value)
-      calendarPlaceholder = value
-    else if (placeholder)
-      calendarPlaceholder = placeholder
+    if (value) calendarPlaceholder = value
+    else if (placeholder) calendarPlaceholder = placeholder
   })
 
   const escapeLayer = new EscapeLayerState({
     enabled: true,
-    onEscapeKeydown() { open = false },
+    onEscapeKeydown() {
+      open = false
+    },
   })
 
   const dismissLayer = new DismissibleLayerState({
@@ -57,8 +57,7 @@
     element: null,
     onInteractOutside(event) {
       const target = event.target as Node | null
-      if (triggerEl && target && triggerEl.contains(target))
-        return
+      if (triggerEl && target && triggerEl.contains(target)) return
       open = false
     },
   })
@@ -66,9 +65,13 @@
   const floating = new FloatingLayerState({
     reference: null,
     floating: null,
-    get side() { return side },
+    get side() {
+      return side
+    },
     sideOffset: 4,
-    get align() { return align },
+    get align() {
+      return align
+    },
     avoidCollisions: true,
   })
 
@@ -82,8 +85,7 @@
     }
     // contentEl may not be available yet on first run - re-read to track it
     const el = contentEl
-    if (!el)
-      return
+    if (!el) return
 
     escapeLayer.mount()
     dismissLayer.props.element = el
@@ -101,10 +103,8 @@
   function handleCalendarSelect(date: DateValue | undefined) {
     value = date
     onValueChange?.(date)
-    if (date)
-      calendarPlaceholder = date
-    if (closeOnDateSelect && date)
-      open = false
+    if (date) calendarPlaceholder = date
+    if (closeOnDateSelect && date) open = false
   }
 </script>
 
@@ -112,7 +112,7 @@
   {#if children}
     {@render children()}
   {:else}
-    <div class='sp-date-picker-field-group'>
+    <div class="sp-date-picker-field-group">
       <DateField.Root
         bind:value
         {onValueChange}
@@ -124,22 +124,29 @@
       />
       <button
         bind:this={triggerEl}
-        class='sp-date-picker-trigger'
-        type='button'
-        aria-label='Open calendar'
-        aria-haspopup='dialog'
+        class="sp-date-picker-trigger"
+        type="button"
+        aria-label="Open calendar"
+        aria-haspopup="dialog"
         aria-expanded={open}
         {disabled}
         onclick={() => {
-          if (!disabled)
-            open = !open
+          if (!disabled) open = !open
         }}
       >
-        <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
-          <rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect>
-          <line x1='16' y1='2' x2='16' y2='6'></line>
-          <line x1='8' y1='2' x2='8' y2='6'></line>
-          <line x1='3' y1='10' x2='21' y2='10'></line>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="16" y1="2" x2="16" y2="6"></line>
+          <line x1="8" y1="2" x2="8" y2="6"></line>
+          <line x1="3" y1="10" x2="21" y2="10"></line>
         </svg>
       </button>
     </div>
@@ -148,11 +155,11 @@
       <Portal to={portalTo}>
         <div
           bind:this={contentEl}
-          class='sp-date-picker-content'
+          class="sp-date-picker-content"
           data-state={open ? 'open' : 'closed'}
         >
           <Calendar.Root
-            value={value}
+            {value}
             onValueChange={handleCalendarSelect}
             bind:placeholder={calendarPlaceholder}
             {locale}
@@ -163,7 +170,7 @@
             {weekStartsOn}
             {numberOfMonths}
             {fixedWeeks}
-            disabled={disabled}
+            {disabled}
             readonly={isReadonly}
           >
             <Calendar.Header>

package/dist/components/date-picker/components/date-picker-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/date-picker/components/date-picker-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAgKlD,QAAA,MAAM,cAAc,0DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"date-picker-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/date-picker/components/date-picker-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AA+JlD,QAAA,MAAM,cAAc,0DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/components/date-range-field/__tests__/DateRangeFieldTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateRange } from '../../../internal/date-time/types.js'
   import DateRangeFieldRoot from '../components/date-range-field-root.svelte'