@spectral_labs/ui 1.2.0 → 1.2.1

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

@@ -43,7 +43,7 @@ describe('dateRangeField', () => {
         // 2 fields × 3 segments = 6 spinbuttons
         expect(segments.length).toBe(6);
         // Verify year values are present in aria-valuenow attributes
-        const yearSegments = Array.from(segments).filter(s => s.getAttribute('aria-label') === 'year');
+        const yearSegments = Array.from(segments).filter((s) => s.getAttribute('aria-label') === 'year');
         expect(yearSegments.length).toBe(2);
         expect(yearSegments[0].getAttribute('aria-valuenow')).toBe('2026');
         expect(yearSegments[1].getAttribute('aria-valuenow')).toBe('2026');
@@ -109,7 +109,7 @@ describe('dateRangeField', () => {
     it('updates rendered segments when remounted with new DateRange value', () => {
         setup();
         // Verify initial state: segments have no aria-valuenow (empty DateRange {})
-        const initialYearSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter(s => s.getAttribute('aria-label') === 'year');
+        const initialYearSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'year');
         // With value={} (no start/end), segments should show placeholder (no valuenow)
         expect(initialYearSegments.length).toBe(2);
         expect(initialYearSegments[0].getAttribute('aria-valuenow')).toBeNull();
@@ -122,7 +122,7 @@ describe('dateRangeField', () => {
         };
         instance = mount(DateRangeFieldTest, { target, props: { value: newRange } });
         flushSync();
-        const updatedYearSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter(s => s.getAttribute('aria-label') === 'year');
+        const updatedYearSegments = Array.from(target.querySelectorAll('[role="spinbutton"]')).filter((s) => s.getAttribute('aria-label') === 'year');
         expect(updatedYearSegments.length).toBe(2);
         expect(updatedYearSegments[0].getAttribute('aria-valuenow')).toBe('2027');
         expect(updatedYearSegments[1].getAttribute('aria-valuenow')).toBe('2027');

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateRange, DateValue } from '../../../internal/date-time/types.js'
   import type { DateRangeFieldProps } from '../types.js'
   import * as DateField from '../../date-field/index.js'
@@ -43,7 +43,7 @@
   }
 </script>
 
-<div class="sp-date-range-field {className ?? ''}" role='group' aria-label='Date range'>
+<div class="sp-date-range-field {className ?? ''}" role="group" aria-label="Date range">
   {#if children}
     {@render children()}
   {:else}
@@ -57,9 +57,9 @@
       {required}
       readonly={isReadonly}
       name={name ? `${name}-start` : undefined}
-      aria-label='Start date'
+      aria-label="Start date"
     />
-    <span class='sp-date-range-separator' aria-hidden='true'>–</span>
+    <span class="sp-date-range-separator" aria-hidden="true">–</span>
     <DateField.Root
       value={endValue}
       onValueChange={onEndChange}
@@ -70,7 +70,7 @@
       {required}
       readonly={isReadonly}
       name={name ? `${name}-end` : undefined}
-      aria-label='End date'
+      aria-label="End date"
     />
   {/if}
 </div>

package/dist/components/date-range-picker/__tests__/DateRangePickerTest.svelte

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

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

@@ -32,18 +32,18 @@ describe('dateRangePicker', () => {
      * The trigger always renders inline (not portalled).
      */
     function findTrigger() {
-        return (target.querySelector('button.sp-date-range-picker-trigger')
-            ?? target.querySelector('button[aria-label="Open calendar"]')
-            ?? target.querySelector('button[aria-haspopup]'));
+        return (target.querySelector('button.sp-date-range-picker-trigger') ??
+            target.querySelector('button[aria-label="Open calendar"]') ??
+            target.querySelector('button[aria-haspopup]'));
     }
     /**
      * Finds open content. When setup() injects portalTo: target, Portal renders
      * content inside target, so queries against target still work in most tests.
      */
     function findOpenContent() {
-        return (target.querySelector('[data-state="open"]')
-            ?? target.querySelector('.sp-date-range-picker-content')
-            ?? target.querySelector('[role="dialog"]'));
+        return (target.querySelector('[data-state="open"]') ??
+            target.querySelector('.sp-date-range-picker-content') ??
+            target.querySelector('[role="dialog"]'));
     }
     // ─── Smoke ────────────────────────────────────────────────────────────────
     it('renders a trigger button', () => {
@@ -119,8 +119,7 @@ describe('dateRangePicker', () => {
     it('marks trigger 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);
     });
     // ─── Calendar grid ────────────────────────────────────────────────────────
@@ -128,8 +127,7 @@ describe('dateRangePicker', () => {
         setup();
         findTrigger()?.click();
         flushSync();
-        const grid = target.querySelector('[role="grid"]')
-            ?? target.querySelector('[role="gridcell"]');
+        const grid = target.querySelector('[role="grid"]') ?? target.querySelector('[role="gridcell"]');
         expect(grid).toBeTruthy();
     });
     // ─── Portal regression detector ───────────────────────────────────────────
@@ -147,7 +145,9 @@ describe('dateRangePicker', () => {
         document.body.appendChild(target);
         instance = mount(DateRangePickerTest, { target });
         flushSync();
-        target.querySelector('button.sp-date-range-picker-trigger, button[aria-label="Open calendar"]')?.click();
+        target
+            .querySelector('button.sp-date-range-picker-trigger, button[aria-label="Open calendar"]')
+            ?.click();
         flushSync();
         // Content MUST be in document.body (not inline in target) since Portal is now wired
         expect(target.querySelector('[data-state="open"], [role="dialog"]')).toBeNull();

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateRange, DateValue } from '../../../internal/date-time/types.js'
   import type { DateRangePickerProps } from '../types.js'
   import { getDefaultDate } from '../../../internal/date-time/utils.js'
@@ -42,15 +42,15 @@
 
   // Sync calendar viewport with field value / external placeholder
   $effect(() => {
-    if (value?.start)
-      calendarPlaceholder = value.start
-    else if (placeholder)
-      calendarPlaceholder = placeholder
+    if (value?.start) calendarPlaceholder = value.start
+    else if (placeholder) calendarPlaceholder = placeholder
   })
 
   const escapeLayer = new EscapeLayerState({
     enabled: true,
-    onEscapeKeydown() { open = false },
+    onEscapeKeydown() {
+      open = false
+    },
   })
 
   const dismissLayer = new DismissibleLayerState({
@@ -58,8 +58,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
     },
   })
@@ -67,9 +66,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,
   })
 
@@ -81,8 +84,7 @@
       return
     }
     const el = contentEl
-    if (!el)
-      return
+    if (!el) return
 
     escapeLayer.mount()
     dismissLayer.props.element = el
@@ -100,10 +102,8 @@
   function handleRangeChange(range: DateRange) {
     value = range
     onValueChange?.(range)
-    if (range.start)
-      calendarPlaceholder = range.start
-    if (closeOnRangeSelect && range.start && range.end)
-      open = false
+    if (range.start) calendarPlaceholder = range.start
+    if (closeOnRangeSelect && range.start && range.end) open = false
   }
 </script>
 
@@ -111,7 +111,7 @@
   {#if children}
     {@render children()}
   {:else}
-    <div class='sp-date-range-picker-field-group'>
+    <div class="sp-date-range-picker-field-group">
       <DateRangeField.Root
         bind:value
         {onValueChange}
@@ -123,22 +123,29 @@
       />
       <button
         bind:this={triggerEl}
-        class='sp-date-range-picker-trigger'
-        type='button'
-        aria-label='Open calendar'
-        aria-haspopup='dialog'
+        class="sp-date-range-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>
@@ -147,12 +154,12 @@
       <Portal to={portalTo}>
         <div
           bind:this={contentEl}
-          class='sp-date-range-picker-content'
+          class="sp-date-range-picker-content"
           data-state={open ? 'open' : 'closed'}
           data-months={numberOfMonths}
         >
           <RangeCalendar.Root
-            value={value}
+            {value}
             onValueChange={handleRangeChange}
             bind:placeholder={calendarPlaceholder}
             {locale}
@@ -167,7 +174,7 @@
             readonly={isReadonly}
           >
             <RangeCalendar.Header />
-            <div class='sp-date-range-picker-grids'>
+            <div class="sp-date-range-picker-grids">
               <RangeCalendar.Grid />
             </div>
           </RangeCalendar.Root>
@@ -235,7 +242,8 @@
     box-shadow: var(--sp-sys-elevation-3);
     transition:
       opacity var(--sp-sys-motion-duration-medium1, 250ms) var(--sp-sys-motion-easing-effects, ease),
-      transform var(--sp-sys-motion-duration-medium1, 250ms) var(--sp-sys-motion-easing-emphasized, ease);
+      transform var(--sp-sys-motion-duration-medium1, 250ms)
+        var(--sp-sys-motion-easing-emphasized, ease);
   }
 
   .sp-date-range-picker-content[data-months='1'] {

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

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/date-range-picker/components/date-range-picker-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AA8JvD,QAAA,MAAM,mBAAmB,+DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"date-range-picker-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/date-range-picker/components/date-range-picker-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AA6JvD,QAAA,MAAM,mBAAmB,+DAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/components/dialog/__tests__/DialogTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import DialogClose from '../components/dialog-close.svelte'
   import DialogContent from '../components/dialog-content.svelte'
   import DialogDescription from '../components/dialog-description.svelte'
@@ -7,7 +7,12 @@
   import DialogTitle from '../components/dialog-title.svelte'
   import DialogTrigger from '../components/dialog-trigger.svelte'
 
-  let { open = $bindable(false), trapFocus = true, preventScroll = true, portalTo = undefined }: {
+  let {
+    open = $bindable(false),
+    trapFocus = true,
+    preventScroll = true,
+    portalTo = undefined,
+  }: {
     open?: boolean
     trapFocus?: boolean
     preventScroll?: boolean
@@ -21,7 +26,7 @@
   <DialogContent {trapFocus} {preventScroll} {portalTo}>
     <DialogTitle>Test Title</DialogTitle>
     <DialogDescription>Test Description</DialogDescription>
-    <button data-testid='inside-button'>Inside</button>
+    <button data-testid="inside-button">Inside</button>
     <DialogClose>Close</DialogClose>
   </DialogContent>
 </DialogRoot>

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

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

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DialogContentProps } from '../types.js'
   import { DismissibleLayerState } from '../../../internal/dismissible-layer/index.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
@@ -24,16 +24,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()
     },
   })
 
@@ -45,8 +48,7 @@
     element: null,
     onInteractOutside(event) {
       onInteractOutside?.(event)
-      if (!event.defaultPrevented)
-        ctx.close()
+      if (!event.defaultPrevented) ctx.close()
     },
   })
 
@@ -54,8 +56,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()
@@ -85,8 +86,8 @@
       bind:this={contentEl}
       class="sp-dialog-content {className ?? ''}"
       id={ctx.contentId}
-      role='dialog'
-      aria-modal='true'
+      role="dialog"
+      aria-modal="true"
       aria-labelledby={ctx.titleId}
       aria-describedby={ctx.descriptionId}
       data-state={ctx.open ? 'open' : 'closed'}
@@ -114,8 +115,10 @@
     );
     border-radius: var(--sp-comp-dialog-container-shape, var(--sp-sys-shape-corner-xl, 24px));
     box-shadow: var(--sp-comp-dialog-container-elevation, var(--sp-sys-elevation-3));
-    transition: transform var(--sp-sys-motion-duration-medium3, 350ms) var(--sp-sys-motion-easing-emphasized, ease),
-                opacity var(--sp-sys-motion-duration-medium2, 300ms) var(--sp-sys-motion-easing-effects, ease);
+    transition:
+      transform var(--sp-sys-motion-duration-medium3, 350ms)
+        var(--sp-sys-motion-easing-emphasized, ease),
+      opacity var(--sp-sys-motion-duration-medium2, 300ms) var(--sp-sys-motion-easing-effects, ease);
   }
 
   .sp-dialog-content[data-state='closed'] {

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

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

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

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

package/dist/components/dialog/components/dialog-overlay.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DialogOverlayProps } from '../types.js'
   import { PresenceLayerState } from '../../../internal/presence-layer/index.js'
   import { getDialogContext } from '../dialog.svelte.js'
@@ -7,14 +7,15 @@
   const ctx = getDialogContext()
 
   const presence = new PresenceLayerState({
-    get present() { return ctx.open },
+    get present() {
+      return ctx.open
+    },
   })
 
   let overlayEl: HTMLElement | undefined = $state()
 
   $effect(() => {
-    if (overlayEl)
-      presence.setElement(overlayEl)
+    if (overlayEl) presence.setElement(overlayEl)
   })
 </script>
 
@@ -24,7 +25,7 @@
     class="sp-dialog-overlay {className ?? ''}"
     data-state={ctx.open ? 'open' : 'closed'}
     onclick={() => ctx.close()}
-    aria-hidden='true'
+    aria-hidden="true"
   ></div>
 {/if}
 
@@ -35,7 +36,8 @@
     z-index: 50;
     background-color: var(--sp-comp-dialog-overlay-color, var(--sp-sys-color-scrim));
     opacity: var(--sp-comp-dialog-overlay-opacity, 0.32);
-    transition: opacity var(--sp-sys-motion-duration-medium2, 300ms) var(--sp-sys-motion-easing-effects, ease);
+    transition: opacity var(--sp-sys-motion-duration-medium2, 300ms)
+      var(--sp-sys-motion-easing-effects, ease);
   }
 
   .sp-dialog-overlay[data-state='closed'] {

package/dist/components/dialog/components/dialog-overlay.svelte.d.ts.map

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

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DialogProps } from '../types.js'
   import { createDialogIds, setDialogContext } from '../dialog.svelte.js'
 
@@ -7,7 +7,9 @@
   const ids = createDialogIds()
 
   setDialogContext({
-    get open() { return open },
+    get open() {
+      return open
+    },
     ...ids,
     toggle() {
       open = !open

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

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

package/dist/components/dialog/components/dialog-title.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DialogTitleProps } from '../types.js'
   import { getDialogContext } from '../dialog.svelte.js'
 
@@ -6,7 +6,11 @@
   const ctx = getDialogContext()
 </script>
 
-<svelte:element this={`h${level}` as const} class="sp-dialog-title {className ?? ''}" id={ctx.titleId}>
+<svelte:element
+  this={`h${level}` as const}
+  class="sp-dialog-title {className ?? ''}"
+  id={ctx.titleId}
+>
   {#if children}{@render children()}{/if}
 </svelte:element>
 

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DialogTriggerProps } from '../types.js'
   import { getDialogContext } from '../dialog.svelte.js'
 
@@ -8,8 +8,8 @@
 
 <button
   class="sp-dialog-trigger {className ?? ''}"
-  type='button'
-  aria-haspopup='dialog'
+  type="button"
+  aria-haspopup="dialog"
   aria-expanded={ctx.open}
   aria-controls={ctx.contentId}
   onclick={() => ctx.toggle()}

package/dist/components/drop-zone/drop-zone.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DropZoneProps } from './types.js'
 
   const {
@@ -16,16 +16,14 @@
   let inputRef: HTMLInputElement | undefined = $state()
 
   function validateFiles(files: FileList | null): File[] {
-    if (!files || files.length === 0)
-      return []
+    if (!files || files.length === 0) return []
     const list = Array.from(files)
     const selected = multiple ? list : [list[0]!]
 
     for (const file of selected) {
       if (accept && accept.length > 0) {
         const matches = accept.some((type) => {
-          if (type.endsWith('/*'))
-            return file.type.startsWith(type.replace('/*', '/'))
+          if (type.endsWith('/*')) return file.type.startsWith(type.replace('/*', '/'))
           return file.type === type
         })
         if (!matches) {
@@ -45,8 +43,7 @@
 
   function handleDrop(event: DragEvent) {
     event.preventDefault()
-    if (disabled)
-      return
+    if (disabled) return
     zoneState = 'idle'
     const valid = validateFiles(event.dataTransfer?.files ?? null)
     if (valid.length > 0) {
@@ -57,18 +54,15 @@
 
   function handleDragOver(event: DragEvent) {
     event.preventDefault()
-    if (!disabled)
-      zoneState = 'active'
+    if (!disabled) zoneState = 'active'
   }
 
   function handleDragLeave() {
-    if (!disabled)
-      zoneState = 'idle'
+    if (!disabled) zoneState = 'idle'
   }
 
   function handleClick() {
-    if (!disabled)
-      inputRef?.click()
+    if (!disabled) inputRef?.click()
   }
 
   function handleInput(event: Event) {
@@ -92,7 +86,7 @@
 <div
   class="sp-drop-zone {zoneState} {className ?? ''}"
   data-state={disabled ? 'disabled' : zoneState}
-  role='button'
+  role="button"
   tabindex={disabled ? -1 : 0}
   aria-disabled={disabled || undefined}
   ondrop={handleDrop}
@@ -104,20 +98,20 @@
   {#if children}
     {@render children()}
   {:else}
-    <p class='sp-drop-zone-text'>Drop files here or click to browse</p>
+    <p class="sp-drop-zone-text">Drop files here or click to browse</p>
   {/if}
 </div>
 
 <input
   bind:this={inputRef}
-  type='file'
+  type="file"
   accept={accept?.join(',')}
   {multiple}
   {disabled}
-  class='sp-drop-zone-input'
+  class="sp-drop-zone-input"
   onchange={handleInput}
   tabindex={-1}
-  aria-hidden='true'
+  aria-hidden="true"
 />
 
 <style>

package/dist/components/drop-zone/drop-zone.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drop-zone.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/drop-zone/drop-zone.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AA2GhD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"drop-zone.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/drop-zone/drop-zone.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAqGhD,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/dropdown-menu/__tests__/DropdownMenuTest.svelte

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