@spectral_labs/ui 1.2.0 → 1.2.1

package/dist/components/search-field/__tests__/search-field.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 SearchField from '../search-field.svelte';
+const componentSource = readFileSync(resolve(dirname(fileURLToPath(import.meta.url)), '../search-field.svelte'), 'utf8');
 describe('searchField', () => {
     let target;
     let instance;
@@ -87,4 +91,28 @@ describe('searchField', () => {
         expect(icon).toBeTruthy();
         expect(icon?.tagName).toBe('svg');
     });
+    it('size="sm" : exposes the input inside the .sm wrapper', () => {
+        setup({ size: 'sm' });
+        const wrapper = target.querySelector('.sp-search-field.sm');
+        expect(wrapper).toBeTruthy();
+        expect(wrapper?.querySelector('input.sp-search-input')).toBeTruthy();
+    });
+    // ── iOS Safari focus-zoom contract ────────────────────────────────
+    // Real WebKit focus-zoom cannot be reproduced in jsdom. These tests
+    // lock the CSS contract that prevents the regression : (a) no
+    // hardcoded magic value bypassing the token system, (b) typography
+    // is token-driven for fine pointers, (c) a clamp to >= 1rem is in
+    // place on coarse pointers. Visual / real-device validation is
+    // tracked by the issue and done manually on iPhone Safari.
+    describe('iOS Safari focus-zoom contract (size="sm")', () => {
+        it('does not hardcode 0.85rem on the input', () => {
+            expect(componentSource).not.toMatch(/font-size:\s*0\.85rem/);
+        });
+        it('drives the sm input typography from the body-medium token', () => {
+            expect(componentSource).toMatch(/\.sp-search-field\.sm\s+\.sp-search-input\s*\{[^}]*font-size:\s*var\(--sp-sys-typescale-body-medium-size[^}]*\}/);
+        });
+        it('clamps the sm input to at least 1rem on coarse pointers', () => {
+            expect(componentSource).toMatch(/@media\s*\(pointer:\s*coarse\)\s*\{[\s\S]*?\.sp-search-field\.sm\s+\.sp-search-input\s*\{[^}]*font-size:\s*max\(1rem,[^)]*\)[\s\S]*?\}/);
+        });
+    });
 });

package/dist/components/search-field/search-field.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SearchFieldProps } from './types.js'
 
   let {
@@ -33,20 +33,26 @@
   }
 </script>
 
-<div
-  class="sp-search-field {size} {className ?? ''}"
-  class:disabled
->
-  <svg class='sp-search-icon' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
-    <circle cx='11' cy='11' r='8' />
-    <line x1='21' y1='21' x2='16.65' y2='16.65' />
+<div class="sp-search-field {size} {className ?? ''}" class:disabled>
+  <svg
+    class="sp-search-icon"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
   </svg>
   <input
-    type='search'
-    class='sp-search-input'
+    type="search"
+    class="sp-search-input"
     {placeholder}
     {disabled}
-    value={value}
+    {value}
     aria-label={ariaLabel}
     oninput={handleInput}
     onkeydown={handleKeydown}
@@ -54,15 +60,23 @@
   />
   {#if value}
     <button
-      type='button'
-      class='sp-search-clear'
-      aria-label='Clear search'
+      type="button"
+      class="sp-search-clear"
+      aria-label="Clear search"
       onclick={handleClear}
       {disabled}
     >
-      <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
-        <line x1='18' y1='6' x2='6' y2='18' />
-        <line x1='6' y1='6' x2='18' y2='18' />
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
       </svg>
     </button>
   {/if}
@@ -114,7 +128,19 @@
   }
 
   .sp-search-field.sm .sp-search-input {
-    font-size: 0.85rem;
+    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. Clamp the `sm` variant
+     to at least 1rem on coarse pointers (touch / iOS) so SearchField
+     stays usable inside overlays / sheets without the desktop typography
+     intent being affected on fine pointers. `max()` preserves any theme
+     that may override `--sp-sys-typescale-body-medium-size` upward. */
+  @media (pointer: coarse) {
+    .sp-search-field.sm .sp-search-input {
+      font-size: max(1rem, var(--sp-sys-typescale-body-medium-size, 0.875rem));
+    }
   }
 
   .sp-search-input::placeholder {

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

@@ -1,20 +1,20 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 export interface SearchFieldProps extends Omit<HTMLInputAttributes, 'class' | 'value' | 'size'> {
     /** Current search value. Bindable. */
-    'value'?: string;
+    value?: string;
     /** Placeholder text. */
-    'placeholder'?: string;
+    placeholder?: string;
     /** Size variant. */
-    'size'?: 'sm' | 'md';
+    size?: 'sm' | 'md';
     /** Disabled state. */
-    'disabled'?: boolean;
+    disabled?: boolean;
     /** Called when value changes. */
-    'onInput'?: (value: string) => void;
+    onInput?: (value: string) => void;
     /** Called when the clear button is clicked. */
-    'onClear'?: () => void;
+    onClear?: () => void;
     /** Accessible label. */
     'aria-label'?: string;
     /** Additional CSS class. */
-    'class'?: string;
+    class?: string;
 }
 //# sourceMappingURL=types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/search-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAE1D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7F,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wBAAwB;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,oBAAoB;IACpB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACpB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iCAAiC;IACjC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/search-field/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAE1D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7F,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oBAAoB;IACpB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf"}

package/dist/components/select/__tests__/SelectLabelPersistenceTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import * as Select from '../index.js'
 
   const {
@@ -12,8 +12,8 @@
 </script>
 
 <button
-  type='button'
-  data-testid='toggle-content'
+  type="button"
+  data-testid="toggle-content"
   onclick={() => {
     showContent = !showContent
   }}
@@ -21,13 +21,11 @@
   Toggle content
 </button>
 
-<Select.Root bind:value name='color'>
-  <Select.Trigger data-testid='trigger' placeholder='Pick a color...' />
+<Select.Root bind:value name="color">
+  <Select.Trigger data-testid="trigger" placeholder="Pick a color..." />
   {#if showContent}
     <Select.Content {portalTo}>
-      <Select.Item value='blue' label='Blue'>
-        Blue
-      </Select.Item>
+      <Select.Item value="blue" label="Blue">Blue</Select.Item>
     </Select.Content>
   {/if}
 </Select.Root>

package/dist/components/select/__tests__/SelectTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import SelectContent from '../components/select-content.svelte'
   import SelectItem from '../components/select-item.svelte'
   import SelectRoot from '../components/select-root.svelte'

package/dist/components/select/components/select-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SelectContentProps } from '../types.js'
   import { DismissibleLayerState } from '../../../internal/dismissible-layer/index.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
@@ -40,8 +40,7 @@
     element: null,
     onInteractOutside(event) {
       const target = event.target as Node | null
-      if (ctx.triggerEl && target && ctx.triggerEl.contains(target))
-        return
+      if (ctx.triggerEl && target && ctx.triggerEl.contains(target)) return
       ctx.close()
     },
   })
@@ -78,7 +77,9 @@
 
       // Focus selected or first item
       const selected = contentEl.querySelector<HTMLElement>('[role="option"][aria-selected="true"]')
-      const first = contentEl.querySelector<HTMLElement>('[data-roving-focus-item]:not([data-disabled])')
+      const first = contentEl.querySelector<HTMLElement>(
+        '[data-roving-focus-item]:not([data-disabled])',
+      )
       ;(selected ?? first)?.focus()
     }
     return () => {
@@ -89,13 +90,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])'),
     )
@@ -111,14 +110,14 @@
       }
       case kbd.PAGE_DOWN: {
         event.preventDefault()
-        const currentIndex = items.findIndex(el => el === document.activeElement)
+        const currentIndex = items.findIndex((el) => el === document.activeElement)
         const nextIndex = Math.min(currentIndex + 10, items.length - 1)
         items[nextIndex]?.focus()
         break
       }
       case kbd.PAGE_UP: {
         event.preventDefault()
-        const currentIndex = items.findIndex(el => el === document.activeElement)
+        const currentIndex = items.findIndex((el) => el === document.activeElement)
         const nextIndex = Math.max(currentIndex - 10, 0)
         items[nextIndex]?.focus()
         break
@@ -136,8 +135,7 @@
         event.preventDefault()
         const focused = document.activeElement as HTMLElement
         const val = focused?.getAttribute('data-value')
-        if (val)
-          ctx.select(val)
+        if (val) ctx.select(val)
         break
       }
       case kbd.TAB: {
@@ -147,11 +145,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()
         }
       }
     }
@@ -164,7 +161,7 @@
       bind:this={contentEl}
       class="sp-select-content {className ?? ''}"
       id={ctx.contentId}
-      role='listbox'
+      role="listbox"
       tabindex={-1}
       data-state={ctx.open ? 'open' : 'closed'}
       {onkeydown}

package/dist/components/select/components/select-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAuLrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"select-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAoLrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SelectItemProps } from '../types.js'
   import { getSelectContext } from '../select.svelte.js'
 
@@ -20,7 +20,7 @@
 <div
   bind:this={itemEl}
   class="sp-select-item {className ?? ''}"
-  role='option'
+  role="option"
   aria-selected={isSelected}
   aria-disabled={disabled || undefined}
   tabindex={-1}
@@ -30,33 +30,31 @@
   data-disabled={disabled || undefined}
   data-state={isSelected ? 'selected' : 'unselected'}
   onclick={() => {
-    if (!disabled)
-      ctx.select(value)
+    if (!disabled) ctx.select(value)
   }}
   onkeydown={(e) => {
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault()
-      if (!disabled)
-        ctx.select(value)
+      if (!disabled) ctx.select(value)
     }
   }}
 >
-  <span class='sp-select-item-check'>
+  <span class="sp-select-item-check">
     {#if isSelected}
       <svg
-        viewBox='0 0 24 24'
-        fill='none'
-        stroke='currentColor'
-        stroke-width='2.5'
-        stroke-linecap='round'
-        stroke-linejoin='round'
-        aria-hidden='true'
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
       >
-        <polyline points='20 6 9 17 4 12'></polyline>
+        <polyline points="20 6 9 17 4 12"></polyline>
       </svg>
     {/if}
   </span>
-  <span class='sp-select-item-label'>
+  <span class="sp-select-item-label">
     {#if children}{@render children()}{/if}
   </span>
 </div>

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

@@ -1 +1 @@
-{"version":3,"file":"select-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAgDlD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"select-item.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-item.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AA8ClD,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SelectProps } from '../types.js'
   import { SvelteMap } from 'svelte/reactivity'
   import { createSelectIds, setSelectContext } from '../select.svelte.js'
@@ -23,14 +23,12 @@
   const itemLabels = new SvelteMap<string, string>()
 
   function select(itemValue: string) {
-    if (disabled)
-      return
+    if (disabled) return
     if (type === 'multiple' && Array.isArray(value)) {
       value = value.includes(itemValue)
-        ? value.filter(v => v !== itemValue)
+        ? value.filter((v) => v !== itemValue)
         : [...value, itemValue]
-    }
-    else {
+    } else {
       value = itemValue
       open = false
       onOpenChange?.(false)
@@ -38,14 +36,13 @@
   }
 
   function isSelected(itemValue: string): boolean {
-    if (type === 'multiple' && Array.isArray(value))
-      return value.includes(itemValue)
+    if (type === 'multiple' && Array.isArray(value)) return value.includes(itemValue)
     return value === itemValue
   }
 
   function getDisplayValue(): string {
     if (type === 'multiple' && Array.isArray(value)) {
-      return value.map(v => itemLabels.get(v) ?? v).join(', ')
+      return value.map((v) => itemLabels.get(v) ?? v).join(', ')
     }
     return itemLabels.get(value as string) ?? (value as string)
   }
@@ -90,7 +87,7 @@
       itemLabels.set(v, label)
     },
     unregisterItemLabel(_v: string) {
-    // Intentionally keep labels cached across item unmounts.
+      // Intentionally keep labels cached across item unmounts.
     },
   })
 </script>
@@ -102,10 +99,10 @@
 {#if name}
   {#if type === 'multiple' && Array.isArray(value)}
     {#each value as v (v)}
-      <input type='hidden' {name} value={v} />
+      <input type="hidden" {name} value={v} />
     {/each}
   {:else}
-    <input type='hidden' {name} {value} {required} />
+    <input type="hidden" {name} {value} {required} />
   {/if}
 {/if}
 

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

@@ -1 +1 @@
-{"version":3,"file":"select-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAuH9C,QAAA,MAAM,UAAU,+DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"select-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAoH9C,QAAA,MAAM,UAAU,+DAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SelectTriggerProps } from '../types.js'
   import { getSelectContext } from '../select.svelte.js'
 
@@ -14,19 +14,18 @@
   const displayValue = $derived(ctx.getDisplayValue())
 
   $effect(() => {
-    if (el)
-      ctx.setTriggerEl(el)
+    if (el) ctx.setTriggerEl(el)
   })
 </script>
 
 <button
   bind:this={el}
   class="sp-select-trigger {className ?? ''}"
-  type='button'
+  type="button"
   id={ctx.triggerId}
-  role='combobox'
+  role="combobox"
   aria-expanded={ctx.open}
-  aria-haspopup='listbox'
+  aria-haspopup="listbox"
   aria-controls={ctx.open ? ctx.contentId : undefined}
   disabled={ctx.disabled}
   {...restProps}
@@ -34,20 +33,28 @@
   onkeydown={(e) => {
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
       e.preventDefault()
-      if (!ctx.open)
-        ctx.toggle()
+      if (!ctx.open) ctx.toggle()
     }
   }}
 >
   {#if children}
     {@render children()}
   {:else}
-    <span class='sp-select-value' class:placeholder={!displayValue}>
+    <span class="sp-select-value" class:placeholder={!displayValue}>
       {displayValue || placeholder}
     </span>
   {/if}
-  <svg class='sp-select-chevron' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
-    <polyline points='6 9 12 15 18 9'></polyline>
+  <svg
+    class="sp-select-chevron"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 </button>
 
@@ -88,7 +95,8 @@
     width: 16px;
     height: 16px;
     flex-shrink: 0;
-    transition: transform var(--sp-sys-motion-duration-short2, 100ms) var(--sp-sys-motion-easing-standard, ease);
+    transition: transform var(--sp-sys-motion-duration-short2, 100ms)
+      var(--sp-sys-motion-easing-standard, ease);
   }
 
   .sp-select-trigger[aria-expanded='true'] .sp-select-chevron {

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

@@ -1 +1 @@
-{"version":3,"file":"select-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AA+CrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"select-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/select/components/select-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AA6CrD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/separator/separator.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SeparatorProps } from './types.js'
 
   const {

package/dist/components/sheet/__tests__/SheetTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import SheetClose from '../components/sheet-close.svelte'
   import SheetContent from '../components/sheet-content.svelte'
   import SheetDescription from '../components/sheet-description.svelte'
@@ -28,7 +28,7 @@
   <SheetContent {trapFocus} {preventScroll} {portalTo} {side}>
     <SheetTitle>Test Title</SheetTitle>
     <SheetDescription>Test Description</SheetDescription>
-    <button data-testid='inside-button'>Inside</button>
+    <button data-testid="inside-button">Inside</button>
     <SheetClose>Close</SheetClose>
   </SheetContent>
 </SheetRoot>

package/dist/components/sheet/components/sheet-close.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SheetCloseProps } from '../types.js'
   import { getSheetContext } from '../sheet.svelte.js'
 
@@ -6,6 +6,6 @@
   const ctx = getSheetContext()
 </script>
 
-<button class="sp-sheet-close {className ?? ''}" type='button' onclick={() => ctx.close()}>
+<button class="sp-sheet-close {className ?? ''}" type="button" onclick={() => ctx.close()}>
   {#if children}{@render children()}{/if}
 </button>

package/dist/components/sheet/components/sheet-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { SheetContentProps } from '../types.js'
   import { DismissibleLayerState } from '../../../internal/dismissible-layer/index.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
@@ -25,16 +25,19 @@
   let contentEl: HTMLElement | undefined = $state()
 
   const presence = new PresenceLayerState({
-    get present() { return ctx.open },
-    get forceMount() { return forceMount },
+    get present() {
+      return ctx.open
+    },
+    get forceMount() {
+      return forceMount
+    },
   })
 
   const escapeLayer = new EscapeLayerState({
     enabled: true,
     onEscapeKeydown(event) {
       onEscapeKeydown?.(event)
-      if (!event.defaultPrevented)
-        ctx.close()
+      if (!event.defaultPrevented) ctx.close()
     },
   })
 
@@ -46,8 +49,7 @@
     element: null,
     onInteractOutside(event) {
       onInteractOutside?.(event)
-      if (!event.defaultPrevented)
-        ctx.close()
+      if (!event.defaultPrevented) ctx.close()
     },
   })
 
@@ -55,8 +57,7 @@
     if (ctx.open && isBrowser) {
       escapeLayer.mount()
       dismissLayer.mount()
-      if (preventScroll)
-        scrollLock.lock()
+      if (preventScroll) scrollLock.lock()
       if (trapFocus && contentEl) {
         focusScope.setElement(contentEl)
         focusScope.mount()
@@ -87,8 +88,8 @@
       class="sp-sheet-content {className ?? ''}"
       id={ctx.contentId}
       data-side={side}
-      role='dialog'
-      aria-modal='true'
+      role="dialog"
+      aria-modal="true"
       aria-labelledby={ctx.titleId}
       aria-describedby={ctx.descriptionId}
       data-state={ctx.open ? 'open' : 'closed'}

package/dist/components/sheet/components/sheet-content.svelte.d.ts.map

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

package/dist/components/sheet/components/sheet-description.svelte

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