@spectral_labs/ui 1.2.0 → 1.3.0

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TabsProps } from '../types.js'
   import { setTabsContext } from '../tabs.svelte.js'
 

package/dist/components/tabs/components/tabs-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TabsTriggerProps } from '../types.js'
   import { getTabsContext } from '../tabs.svelte.js'
 
@@ -8,15 +8,14 @@
   const isActive = $derived(ctx.value === value)
 
   function onclick() {
-    if (!disabled)
-      ctx.setValue(value)
+    if (!disabled) ctx.setValue(value)
   }
 </script>
 
 <button
   class="sp-tabs-trigger {className ?? ''}"
-  type='button'
-  role='tab'
+  type="button"
+  role="tab"
   aria-selected={isActive}
   tabindex={isActive ? 0 : -1}
   {disabled}

package/dist/components/tabs/components/tabs-trigger.svelte.d.ts.map

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

package/dist/components/textarea/__tests__/textarea.test.svelte.js

@@ -1,6 +1,10 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { mount, unmount } from 'svelte';
 import { afterEach, describe, expect, it } from 'vitest';
 import Textarea from '../textarea.svelte';
+const componentSource = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '../textarea.svelte'), 'utf8');
 describe('textarea', () => {
     let target;
     let instance;
@@ -23,4 +27,29 @@ describe('textarea', () => {
         setup({ invalid: true });
         expect(target.querySelector('textarea')?.getAttribute('aria-invalid')).toBe('true');
     });
+    // ── iOS Safari focus-zoom contract ────────────────────────────────
+    // Real WebKit focus-zoom cannot be reproduced in jsdom. These tests
+    // lock the CSS contract that prevents the regression on `size="sm"` :
+    // the `sm` typography stays token-driven for desktop, and a clamp to
+    // >= 1rem is applied on coarse pointers (touch / iOS). Other sizes
+    // inherit the base 1rem and are already iOS-safe.
+    describe('iOS Safari focus-zoom contract (size="sm")', () => {
+        it('keeps fine-pointer typography on the body-medium token', () => {
+            expect(componentSource).toMatch(/\.sp-textarea\.sm\s*\{[^}]*font-size:\s*var\(--sp-sys-typescale-body-medium-size[^}]*\}/);
+        });
+        it('clamps the sm textarea to at least 1rem on coarse pointers', () => {
+            expect(componentSource).toMatch(/@media\s*\(pointer:\s*coarse\)\s*\{[\s\S]*?\.sp-textarea\.sm\s*\{[^}]*font-size:\s*max\(1rem,[^)]*\)[\s\S]*?\}/);
+        });
+        it('only the sm variant is targeted by the coarse-pointer clamp', () => {
+            // The clamp must target `.sp-textarea.sm` and only `.sp-textarea.sm`.
+            // Other sizes inherit the base 1rem and must not get an override.
+            const coarseRules = [
+                ...componentSource.matchAll(/@media\s*\(pointer:\s*coarse\)\s*\{[^}]*\{/g),
+            ];
+            expect(coarseRules.length).toBe(1);
+            expect(coarseRules[0][0]).toContain('.sp-textarea.sm');
+            expect(coarseRules[0][0]).not.toContain('.sp-textarea.md');
+            expect(coarseRules[0][0]).not.toContain('.sp-textarea.lg');
+        });
+    });
 });

package/dist/components/textarea/textarea.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TextareaProps } from './types.js'
 
   let {
@@ -48,6 +48,19 @@
     font-size: var(--sp-sys-typescale-body-medium-size, 0.875rem);
   }
 
+  /* iOS Safari focus zoom : WebKit auto-zooms the viewport when a focused
+     form control's computed font-size is < 16px. The `sm` size renders
+     at `body-medium` (14px by default), which crosses that threshold.
+     Clamp to at least 1rem on coarse pointers (touch / iOS) so dense
+     forms on mobile stay usable; `max()` preserves any theme that may
+     override `--sp-sys-typescale-body-medium-size` upward. Other sizes
+     inherit the base 1rem and are already iOS-safe. */
+  @media (pointer: coarse) {
+    .sp-textarea.sm {
+      font-size: max(1rem, var(--sp-sys-typescale-body-medium-size, 0.875rem));
+    }
+  }
+
   .sp-textarea.md {
     min-height: 96px;
   }

package/dist/components/time-field/__tests__/TimeFieldTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TimeValue } from '../types.js'
   import * as TimeField from '../index.js'
 

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

@@ -29,10 +29,9 @@ describe('timeField', () => {
     // 3. Segments include hour and minute labels
     it('segments include hour and minute labels', () => {
         setup();
-        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]'))
-            .map(s => s.getAttribute('aria-label')?.toLowerCase() ?? '');
-        expect(labels.some(l => l && (l.includes('hour') || l.includes('heure')))).toBe(true);
-        expect(labels.some(l => l && l.includes('minute'))).toBe(true);
+        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]')).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
+        expect(labels.some((l) => l && (l.includes('hour') || l.includes('heure')))).toBe(true);
+        expect(labels.some((l) => l && l.includes('minute'))).toBe(true);
     });
     // 4. Renders value when provided (minute field shows 30)
     it('renders value when provided', () => {
@@ -76,9 +75,8 @@ describe('timeField', () => {
     // 9. granularity="second" adds seconds segment
     it('granularity="second" adds seconds segment', () => {
         setup({ granularity: 'second', value: { hour: 14, minute: 30, second: 45 } });
-        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]'))
-            .map(s => s.getAttribute('aria-label')?.toLowerCase() ?? '');
-        expect(labels.some(l => l && l.includes('second'))).toBe(true);
+        const labels = Array.from(target.querySelectorAll('[role="spinbutton"]')).map((s) => s.getAttribute('aria-label')?.toLowerCase() ?? '');
+        expect(labels.some((l) => l && l.includes('second'))).toBe(true);
     });
     // 10. disabled marks group with data-disabled
     it('disabled marks group as disabled', () => {
@@ -90,7 +88,7 @@ describe('timeField', () => {
     it('readonly marks segments as readonly', () => {
         setup({ readonly: true });
         const segments = target.querySelectorAll('[role="spinbutton"]');
-        const readonlySegments = Array.from(segments).filter(s => s.getAttribute('aria-readonly') === 'true');
+        const readonlySegments = Array.from(segments).filter((s) => s.getAttribute('aria-readonly') === 'true');
         expect(readonlySegments.length).toBeGreaterThanOrEqual(2);
     });
     // 12. group has aria-label

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TimeSegmentValues } from '../time-field.svelte.js'
   import type { DayPeriod, TimeFieldProps, TimeValue } from '../types.js'
   import {
@@ -35,13 +35,12 @@
   $effect(() => {
     if (value) {
       segmentValues = {
-        hour: resolvedHourCycle === 12 ? (value.hour % 12 || 12) : value.hour,
+        hour: resolvedHourCycle === 12 ? value.hour % 12 || 12 : value.hour,
         minute: value.minute,
         second: value.second,
         dayPeriod: value.hour >= 12 ? 'PM' : 'AM',
       }
-    }
-    else {
+    } else {
       segmentValues = { hour: null, minute: null, second: null, dayPeriod: 'AM' }
     }
   })
@@ -50,21 +49,16 @@
 
   function tryBuildValue(): TimeValue | undefined {
     const { hour, minute, second } = segmentValues
-    if (hour === null)
-      return undefined
-    if ((granularity === 'minute' || granularity === 'second') && minute === null)
-      return undefined
-    if (granularity === 'second' && second === null)
-      return undefined
+    if (hour === null) return undefined
+    if ((granularity === 'minute' || granularity === 'second') && minute === null) return undefined
+    if (granularity === 'second' && second === null) return undefined
 
     // Convert 12h display to 24h internal value
     let h24 = hour ?? 0
     if (resolvedHourCycle === 12) {
       const period = segmentValues.dayPeriod
-      if (period === 'AM' && h24 === 12)
-        h24 = 0
-      else if (period === 'PM' && h24 < 12)
-        h24 += 12
+      if (period === 'AM' && h24 === 12) h24 = 0
+      else if (period === 'PM' && h24 < 12) h24 += 12
     }
 
     return {
@@ -78,8 +72,7 @@
     if (part === 'dayPeriod') {
       // Just update dayPeriod — tryBuildValue handles 12h→24h conversion
       segmentValues = { ...segmentValues, dayPeriod: val as DayPeriod }
-    }
-    else {
+    } else {
       segmentValues = { ...segmentValues, [part]: val as number }
     }
     const built = tryBuildValue()
@@ -92,8 +85,7 @@
   function clearSegment(part: string) {
     if (part === 'dayPeriod') {
       segmentValues = { ...segmentValues, dayPeriod: 'AM' }
-    }
-    else {
+    } else {
       segmentValues = { ...segmentValues, [part]: null }
     }
     value = undefined
@@ -106,12 +98,24 @@
   }
 
   setTimeFieldContext({
-    get value() { return value },
-    get segments() { return segments },
-    get disabled() { return disabled },
-    get readonly() { return isReadonly },
-    get hourCycle() { return resolvedHourCycle },
-    get granularity() { return granularity },
+    get value() {
+      return value
+    },
+    get segments() {
+      return segments
+    },
+    get disabled() {
+      return disabled
+    },
+    get readonly() {
+      return isReadonly
+    },
+    get hourCycle() {
+      return resolvedHourCycle
+    },
+    get granularity() {
+      return granularity
+    },
     updateSegment,
     clearSegment,
     toggleDayPeriod,
@@ -157,41 +161,32 @@
       let next: number
       if (current === null) {
         next = key === 'ArrowUp' ? min : max
-      }
-      else {
+      } else {
         next = current + step
-        if (next > max)
-          next = min
-        if (next < min)
-          next = max
+        if (next > max) next = min
+        if (next < min) next = max
       }
       updateSegment(part, next)
-    }
-    else if (key === 'Backspace' || key === 'Delete') {
+    } else if (key === 'Backspace' || key === 'Delete') {
       e.preventDefault()
       clearSegment(part)
-    }
-    else if (key === 'ArrowLeft') {
+    } else if (key === 'ArrowLeft') {
       e.preventDefault()
       navigateSegment(e.currentTarget as HTMLElement, 'prev')
-    }
-    else if (key === 'ArrowRight') {
+    } else if (key === 'ArrowRight') {
       e.preventDefault()
       navigateSegment(e.currentTarget as HTMLElement, 'next')
-    }
-    else if (/^\d$/.test(key)) {
+    } else if (/^\d$/.test(key)) {
       e.preventDefault()
       const digit = Number.parseInt(key, 10)
       const current = segmentValues[part as keyof TimeSegmentValues] as number | null
-      let newVal = (current === null || current === 0) ? digit : current * 10 + digit
-      if (newVal > max)
-        newVal = digit
+      let newVal = current === null || current === 0 ? digit : current * 10 + digit
+      if (newVal > max) newVal = digit
       updateSegment(part, newVal)
       // Auto-advance
       if (String(newVal).length >= 2 || newVal * 10 > max)
         navigateSegment(e.currentTarget as HTMLElement, 'next')
-    }
-    else if (key !== 'Tab') {
+    } else if (key !== 'Tab') {
       e.preventDefault()
     }
   }
@@ -201,36 +196,34 @@
     if (key === 'ArrowUp' || key === 'ArrowDown') {
       e.preventDefault()
       toggleDayPeriod()
-    }
-    else if (key === 'a' || key === 'A') {
+    } else if (key === 'a' || key === 'A') {
       e.preventDefault()
       updateSegment('dayPeriod', 'AM')
-    }
-    else if (key === 'p' || key === 'P') {
+    } else if (key === 'p' || key === 'P') {
       e.preventDefault()
       updateSegment('dayPeriod', 'PM')
-    }
-    else if (key === 'ArrowLeft') {
+    } else if (key === 'ArrowLeft') {
       e.preventDefault()
       navigateSegment(e.currentTarget as HTMLElement, 'prev')
-    }
-    else if (key === 'ArrowRight') {
+    } else if (key === 'ArrowRight') {
       e.preventDefault()
       navigateSegment(e.currentTarget as HTMLElement, 'next')
-    }
-    else if (key === 'Backspace') {
+    } else if (key === 'Backspace') {
       e.preventDefault()
       updateSegment('dayPeriod', 'AM')
-    }
-    else if (key !== 'Tab') {
+    } else if (key !== 'Tab') {
       e.preventDefault()
     }
   }
 
   function navigateSegment(el: HTMLElement, direction: 'next' | 'prev') {
-    let sibling: Element | null = direction === 'next' ? el.nextElementSibling : el.previousElementSibling
+    let sibling: Element | null =
+      direction === 'next' ? el.nextElementSibling : el.previousElementSibling
     while (sibling) {
-      if (sibling.getAttribute('role') === 'spinbutton' || sibling.hasAttribute('data-day-period')) {
+      if (
+        sibling.getAttribute('role') === 'spinbutton' ||
+        sibling.hasAttribute('data-day-period')
+      ) {
         ;(sibling as HTMLElement).focus()
         return
       }
@@ -241,7 +234,7 @@
 
 <div
   class="sp-time-field {className ?? ''}"
-  role='group'
+  role="group"
   aria-label={ariaLabel ?? 'Time'}
   data-disabled={disabled || undefined}
 >
@@ -251,42 +244,43 @@
     {#each segments as segment, i (`${i}-${segment.part}`)}
       {#if segment.part === 'dayPeriod'}
         <span
-          class='sp-time-field-segment sp-time-field-day-period'
-          role='spinbutton'
+          class="sp-time-field-segment sp-time-field-day-period"
+          role="spinbutton"
           tabindex={disabled ? -1 : 0}
           data-day-period
-          aria-label='AM/PM'
+          aria-label="AM/PM"
           aria-readonly={isReadonly || undefined}
           aria-valuetext={segment.value}
-          onkeydown={e => handleSegmentKeydown(e, 'dayPeriod')}
-          onbeforeinput={e => e.preventDefault()}
-        >{segment.value}</span>
+          onkeydown={(e) => handleSegmentKeydown(e, 'dayPeriod')}
+          onbeforeinput={(e) => e.preventDefault()}>{segment.value}</span
+        >
       {:else if segment.editable}
         {@const part = segment.part}
         <span
-          class='sp-time-field-segment'
-          role='spinbutton'
+          class="sp-time-field-segment"
+          role="spinbutton"
           contenteditable={!disabled && !isReadonly}
-          inputmode='numeric'
+          inputmode="numeric"
           tabindex={disabled ? -1 : 0}
-          data-placeholder={segmentValues[part as 'hour' | 'minute' | 'second'] === null || undefined}
+          data-placeholder={segmentValues[part as 'hour' | 'minute' | 'second'] === null ||
+            undefined}
           aria-label={part}
           aria-readonly={isReadonly || undefined}
           aria-valuenow={segmentValues[part as 'hour' | 'minute' | 'second'] ?? undefined}
           aria-valuemin={part === 'hour' ? (resolvedHourCycle === 12 ? 1 : 0) : 0}
           aria-valuemax={part === 'hour' ? (resolvedHourCycle === 12 ? 12 : 23) : 59}
-          onkeydown={e => handleSegmentKeydown(e, part)}
-          onbeforeinput={e => e.preventDefault()}
-        >{segment.value}</span>
+          onkeydown={(e) => handleSegmentKeydown(e, part)}
+          onbeforeinput={(e) => e.preventDefault()}>{segment.value}</span
+        >
       {:else}
-        <span class='sp-time-field-literal' aria-hidden='true'>{segment.value}</span>
+        <span class="sp-time-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/time-field/components/time-field-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-field-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/time-field/components/time-field-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAa,cAAc,EAAa,MAAM,aAAa,CAAA;AA6QvE,QAAA,MAAM,aAAa,yDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"time-field-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/time-field/components/time-field-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAa,cAAc,EAAa,MAAM,aAAa,CAAA;AAuQvE,QAAA,MAAM,aAAa,yDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/time-field/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Root } from './components/time-field-root.svelte';
-export type { HourCycle, TimeFieldProps, TimeGranularity, TimeRange, TimeRangeFieldProps, TimeValue } from './types.js';
+export type { HourCycle, TimeFieldProps, TimeGranularity, TimeRange, TimeRangeFieldProps, TimeValue, } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/time-field/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qCAAqC,CAAA;AACrE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,eAAe,EAAE,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,qCAAqC,CAAA;AACrE,YAAY,EACV,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,mBAAmB,EACnB,SAAS,GACV,MAAM,YAAY,CAAA"}

package/dist/components/time-field/time-field.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-field.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-field/time-field.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAMlF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAA;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,GAAG,SAAS,CAAA;IAC5B,QAAQ,EAAE,eAAe,EAAE,CAAA;IAC3B,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,SAAS,CAAA;IACpB,WAAW,EAAE,eAAe,CAAA;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAChE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;CAC1C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAE/D;AAED,wBAAgB,mBAAmB,IAAI,cAAc,CAEpD;AAED,wCAAwC;AACxC,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAI7D;AAED,4CAA4C;AAC5C,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,SAAS,GACnB,eAAe,EAAE,CAmDnB"}
+{"version":3,"file":"time-field.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-field/time-field.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAMlF,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAA;IAC5D,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,GAAG,SAAS,CAAA;IAC5B,QAAQ,EAAE,eAAe,EAAE,CAAA;IAC3B,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,SAAS,CAAA;IACpB,WAAW,EAAE,eAAe,CAAA;IAC5B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAChE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;CAC1C;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,CAE/D;AAED,wBAAgB,mBAAmB,IAAI,cAAc,CAEpD;AAED,wCAAwC;AACxC,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAI7D;AAED,4CAA4C;AAC5C,wBAAgB,oBAAoB,CAClC,aAAa,EAAE,iBAAiB,EAChC,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,SAAS,GACnB,eAAe,EAAE,CAiDnB"}

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

@@ -4,32 +4,32 @@ export type HourCycle = 12 | 24;
 export type DayPeriod = 'AM' | 'PM';
 export interface TimeFieldProps {
     /** Current time value as { hour, minute, second }. */
-    'value'?: TimeValue;
+    value?: TimeValue;
     /** Callback when value changes. */
-    'onValueChange'?: (value: TimeValue | undefined) => void;
+    onValueChange?: (value: TimeValue | undefined) => void;
     /** Which time parts to display. */
-    'granularity'?: TimeGranularity;
+    granularity?: TimeGranularity;
     /** 12 or 24 hour clock (defaults to locale default). */
-    'hourCycle'?: HourCycle;
+    hourCycle?: HourCycle;
     /** Locale for formatting. */
-    'locale'?: string;
+    locale?: string;
     /** Minimum time. */
-    'minValue'?: TimeValue;
+    minValue?: TimeValue;
     /** Maximum time. */
-    'maxValue'?: TimeValue;
+    maxValue?: TimeValue;
     /** 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 TimeValue {
     hour: number;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC1D,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAA;AAC/B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,WAAW,cAAc;IAC7B,sDAAsD;IACtD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mCAAmC;IACnC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;IACxD,mCAAmC;IACnC,aAAa,CAAC,EAAE,eAAe,CAAA;IAC/B,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oBAAoB;IACpB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,oBAAoB;IACpB,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,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IAC1C,mCAAmC;IACnC,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,GAAG,CAAC,EAAE,SAAS,CAAA;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAErC,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA;AAC1D,MAAM,MAAM,SAAS,GAAG,EAAE,GAAG,EAAE,CAAA;AAC/B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAEnC,MAAM,WAAW,cAAc;IAC7B,sDAAsD;IACtD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;IACtD,mCAAmC;IACnC,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,wDAAwD;IACxD,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,oBAAoB;IACpB,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,SAAS;IACxB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,sBAAsB;IACtB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,mCAAmC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IAC1C,mCAAmC;IACnC,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,GAAG,CAAC,EAAE,SAAS,CAAA;CAChB"}

package/dist/components/time-range-field/__tests__/TimeRangeFieldTest.svelte

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

package/dist/components/time-range-field/__tests__/time-range-field.test.svelte.js

@@ -42,7 +42,7 @@ describe('timeRangeField', () => {
         // At least 2 fields × 2 segments (hour + minute) = 4 spinbuttons
         expect(segments.length).toBeGreaterThanOrEqual(4);
         // Verify hour values are present in aria-valuenow attributes
-        const hourSegments = Array.from(segments).filter(s => s.getAttribute('aria-label') === 'hour');
+        const hourSegments = Array.from(segments).filter((s) => s.getAttribute('aria-label') === 'hour');
         expect(hourSegments.length).toBeGreaterThanOrEqual(2);
     });
     // T-C-2-3: applies data-disabled to inner TimeField groups when disabled=true
@@ -106,7 +106,7 @@ describe('timeRangeField', () => {
     it('updates rendered segments when remounted with new TimeRange value', () => {
         setup();
         // Initial state: no value → segments show placeholder (no aria-valuenow)
-        const initialHourSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter(s => s.getAttribute('aria-label') === 'hour');
+        const initialHourSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'hour');
         expect(initialHourSegments.length).toBeGreaterThanOrEqual(2);
         expect(initialHourSegments[0].getAttribute('aria-valuenow')).toBeNull();
         // Remount with concrete value
@@ -115,10 +115,10 @@ describe('timeRangeField', () => {
         const newRange = { start: new Time(14, 0), end: new Time(16, 45) };
         instance = mount(TimeRangeFieldTest, { target, props: { value: newRange } });
         flushSync();
-        const updatedHourSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter(s => s.getAttribute('aria-label') === 'hour');
+        const updatedHourSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'hour');
         expect(updatedHourSegments.length).toBeGreaterThanOrEqual(2);
         // At least one hour segment should have a valuenow (14 or its 12h equivalent)
-        const hasValue = updatedHourSegments.some(s => s.getAttribute('aria-valuenow') !== null);
+        const hasValue = updatedHourSegments.some((s) => s.getAttribute('aria-valuenow') !== null);
         expect(hasValue).toBe(true);
     });
 });

package/dist/components/time-range-field/components/time-range-field-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { TimeRange, TimeRangeFieldProps, TimeValue } from '../types.js'
   import * as TimeField from '../../time-field/index.js'
 
@@ -41,7 +41,7 @@
   }
 </script>
 
-<div class="sp-time-range-field {className ?? ''}" role='group' aria-label='Time range'>
+<div class="sp-time-range-field {className ?? ''}" role="group" aria-label="Time range">
   {#if children}
     {@render children()}
   {:else}
@@ -55,9 +55,9 @@
       readonly={isReadonly}
       {required}
       name={name ? `${name}-start` : undefined}
-      aria-label='Start time'
+      aria-label="Start time"
     />
-    <span class='sp-time-range-separator' aria-hidden='true'>–</span>
+    <span class="sp-time-range-separator" aria-hidden="true">–</span>
     <TimeField.Root
       value={endValue}
       onValueChange={onEndChange}
@@ -68,7 +68,7 @@
       readonly={isReadonly}
       {required}
       name={name ? `${name}-end` : undefined}
-      aria-label='End time'
+      aria-label="End time"
     />
   {/if}
 </div>

package/dist/components/time-range-field/types.d.ts

@@ -1,2 +1,2 @@
-export type { HourCycle, TimeGranularity, TimeRange, TimeRangeFieldProps, TimeValue } from '../time-field/types.js';
+export type { HourCycle, TimeGranularity, TimeRange, TimeRangeFieldProps, TimeValue, } from '../time-field/types.js';
 //# sourceMappingURL=types.d.ts.map

package/dist/components/time-range-field/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-range-field/types.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/time-range-field/types.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,SAAS,EACT,eAAe,EACf,SAAS,EACT,mBAAmB,EACnB,SAAS,GACV,MAAM,wBAAwB,CAAA"}

package/dist/components/toast/toast.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ToastProps } from './types.js'
   import { isBrowser, useId } from '../../internal/helpers/index.js'
 
@@ -35,35 +35,35 @@
   register it before content appears. Only the inner content is
   conditionally rendered — the aria-live wrapper stays stable.
 -->
-<div class='sp-toast-region' {id} role='status' aria-live='polite' aria-atomic='true'>
+<div class="sp-toast-region" {id} role="status" aria-live="polite" aria-atomic="true">
   {#if visible}
     <div class="sp-toast {variant} {className ?? ''}" data-variant={variant}>
-      <div class='sp-toast-content'>
+      <div class="sp-toast-content">
         {#if title}
-          <p class='sp-toast-title'>{title}</p>
+          <p class="sp-toast-title">{title}</p>
         {/if}
         {#if description}
-          <p class='sp-toast-description'>{description}</p>
+          <p class="sp-toast-description">{description}</p>
         {/if}
         {#if children}
           {@render children()}
         {/if}
       </div>
-      <div class='sp-toast-actions'>
+      <div class="sp-toast-actions">
         {#if action}
           {@render action()}
         {/if}
         {#if dismissible}
-          <button class='sp-toast-dismiss' type='button' aria-label='Dismiss' onclick={dismiss}>
+          <button class="sp-toast-dismiss" type="button" aria-label="Dismiss" onclick={dismiss}>
             <svg
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              stroke-width='2'
-              stroke-linecap='round'
-              stroke-linejoin='round'
-            ><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'
-            ></line></svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              ><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"
+              ></line></svg
             >
           </button>
         {/if}