@spectral_labs/ui 1.2.0 → 1.2.1

package/dist/components/range-calendar/components/range-calendar-grid.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { Snippet } from 'svelte'
   import { getNextCalendarDate } from '../../../internal/date-time/calendar-helpers.js'
   import { createFormatter } from '../../../internal/date-time/formatter.js'
@@ -6,20 +6,18 @@
   import { isBrowser, kbd } from '../../../internal/helpers/index.js'
   import { getRangeCalendarContext } from '../range-calendar.svelte.js'
 
-  const { class: className }: { class?: string, children?: Snippet } = $props()
+  const { class: className }: { class?: string; children?: Snippet } = $props()
   const ctx = getRangeCalendarContext()
   const fmt = createFormatter(ctx.locale)
 
   function onkeydown(event: KeyboardEvent) {
-    if (ctx.disabled || ctx.readonly)
-      return
+    if (ctx.disabled || ctx.readonly) return
 
     const next = getNextCalendarDate(ctx.focusedDate, event.key, ctx.minValue, ctx.maxValue)
     if (next) {
       event.preventDefault()
       ctx.setFocusedDate(next)
-      if (!isSameMonth(next, ctx.placeholder))
-        ctx.setMonth(next)
+      if (!isSameMonth(next, ctx.placeholder)) ctx.setMonth(next)
 
       if (isBrowser) {
         requestAnimationFrame(() => {
@@ -41,7 +39,7 @@
 {#each ctx.months as month (month.value.toString())}
   <table
     class="sp-calendar-grid sp-range-calendar-grid {className ?? ''}"
-    role='grid'
+    role="grid"
     aria-label={ctx.headingText}
     aria-readonly={ctx.readonly || undefined}
     aria-disabled={ctx.disabled || undefined}
@@ -50,7 +48,7 @@
     <thead>
       <tr>
         {#each ctx.weekdays as day, i (i)}
-          <th class='sp-calendar-weekday' scope='col' aria-label={day}>{day}</th>
+          <th class="sp-calendar-weekday" scope="col" aria-label={day}>{day}</th>
         {/each}
       </tr>
     </thead>
@@ -69,26 +67,26 @@
             {@const isEnd = ctx.isRangeEnd(date)}
             {@const dateStr = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`}
             <td
-              role='gridcell'
+              role="gridcell"
               aria-selected={isSelected || undefined}
               data-in-range={inRange || undefined}
               data-range-start={isStart || undefined}
               data-range-end={isEnd || undefined}
             >
               <button
-                class='sp-calendar-day'
-                type='button'
+                class="sp-calendar-day"
+                type="button"
                 tabindex={isFocused ? 0 : -1}
                 data-date={dateStr}
                 data-selected={isSelected || undefined}
                 data-today={isToday || undefined}
                 data-outside={isOutside || undefined}
-                data-disabled={(isDisabled || isUnavailable) || undefined}
+                data-disabled={isDisabled || isUnavailable || undefined}
                 data-in-range={inRange || undefined}
                 data-range-start={isStart || undefined}
                 data-range-end={isEnd || undefined}
                 aria-label={fmt.selectedDate(date)}
-                aria-disabled={(isDisabled || isUnavailable) || undefined}
+                aria-disabled={isDisabled || isUnavailable || undefined}
                 disabled={isDisabled || isUnavailable}
                 onclick={() => {
                   if (!isDisabled && !isUnavailable) {
@@ -98,8 +96,7 @@
                 }}
                 onfocus={() => ctx.setFocusedDate(date)}
                 onpointerenter={() => {
-                  if (ctx.selectingEnd)
-                    ctx.setHoveredDate(date)
+                  if (ctx.selectingEnd) ctx.setHoveredDate(date)
                 }}
               >
                 {date.day}
@@ -138,11 +135,13 @@
   }
 
   td[data-range-start] {
-    border-radius: var(--sp-sys-shape-corner-full, 9999px) 0 0 var(--sp-sys-shape-corner-full, 9999px);
+    border-radius: var(--sp-sys-shape-corner-full, 9999px) 0 0
+      var(--sp-sys-shape-corner-full, 9999px);
   }
 
   td[data-range-end] {
-    border-radius: 0 var(--sp-sys-shape-corner-full, 9999px) var(--sp-sys-shape-corner-full, 9999px) 0;
+    border-radius: 0 var(--sp-sys-shape-corner-full, 9999px) var(--sp-sys-shape-corner-full, 9999px)
+      0;
   }
 
   td[data-range-start][data-range-end] {

package/dist/components/range-calendar/components/range-calendar-grid.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-calendar-grid.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/range-calendar/components/range-calendar-grid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAOpC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAwFjE,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"range-calendar-grid.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/range-calendar/components/range-calendar-grid.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAOpC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAqFjE,QAAA,MAAM,iBAAiB,sDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/range-calendar/components/range-calendar-header.svelte

@@ -1,41 +1,57 @@
-<script lang='ts'>
+<script lang="ts">
   import type { Snippet } from 'svelte'
   import { getRangeCalendarContext } from '../range-calendar.svelte.js'
 
-  const { class: className, children }: { class?: string, children?: Snippet } = $props()
+  const { class: className, children }: { class?: string; children?: Snippet } = $props()
   const ctx = getRangeCalendarContext()
 </script>
 
 <div class="sp-calendar-header {className ?? ''}">
   <button
-    class='sp-calendar-nav-btn'
-    type='button'
-    aria-label='Previous month'
+    class="sp-calendar-nav-btn"
+    type="button"
+    aria-label="Previous month"
     disabled={ctx.isPrevDisabled}
     onclick={() => ctx.prevPage()}
   >
-    <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
-      <polyline points='15 18 9 12 15 6'></polyline>
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="15 18 9 12 15 6"></polyline>
     </svg>
   </button>
 
   {#if children}
     {@render children()}
   {:else}
-    <div class='sp-calendar-heading' aria-live='polite'>
+    <div class="sp-calendar-heading" aria-live="polite">
       {ctx.headingText}
     </div>
   {/if}
 
   <button
-    class='sp-calendar-nav-btn'
-    type='button'
-    aria-label='Next month'
+    class="sp-calendar-nav-btn"
+    type="button"
+    aria-label="Next month"
     disabled={ctx.isNextDisabled}
     onclick={() => ctx.nextPage()}
   >
-    <svg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' aria-hidden='true'>
-      <polyline points='9 18 15 12 9 6'></polyline>
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="9 18 15 12 9 6"></polyline>
     </svg>
   </button>
 </div>

package/dist/components/range-calendar/components/range-calendar-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { DateRange } from '../../../internal/date-time/types.js'
   import type { RangeCalendarProps } from '../types.js'
   import { getDefaultDate } from '../../../internal/date-time/utils.js'
@@ -27,30 +27,55 @@
   let internalPlaceholder = $state(placeholder ?? value?.start ?? getDefaultDate())
 
   $effect(() => {
-    if (placeholder !== undefined)
-      internalPlaceholder = placeholder
+    if (placeholder !== undefined) internalPlaceholder = placeholder
   })
 
   const ctx = createRangeCalendarState({
     getValue: () => value ?? {},
     getPlaceholder: () => internalPlaceholder,
-    setValue: (v) => { value = v },
+    setValue: (v) => {
+      value = v
+    },
     setPlaceholder: (v) => {
       internalPlaceholder = v
       placeholder = v
     },
-    get locale() { return locale },
-    get weekStartsOn() { return weekStartsOn },
-    get weekdayFormat() { return weekdayFormat },
-    get numberOfMonths() { return numberOfMonths },
-    get fixedWeeks() { return fixedWeeks },
-    get disabled() { return disabled },
-    get readonly() { return isReadonly },
-    get minValue() { return minValue },
-    get maxValue() { return maxValue },
-    get isDateDisabled() { return isDateDisabled },
-    get isDateUnavailable() { return isDateUnavailable },
-    get onValueChange() { return onValueChange },
+    get locale() {
+      return locale
+    },
+    get weekStartsOn() {
+      return weekStartsOn
+    },
+    get weekdayFormat() {
+      return weekdayFormat
+    },
+    get numberOfMonths() {
+      return numberOfMonths
+    },
+    get fixedWeeks() {
+      return fixedWeeks
+    },
+    get disabled() {
+      return disabled
+    },
+    get readonly() {
+      return isReadonly
+    },
+    get minValue() {
+      return minValue
+    },
+    get maxValue() {
+      return maxValue
+    },
+    get isDateDisabled() {
+      return isDateDisabled
+    },
+    get isDateUnavailable() {
+      return isDateUnavailable
+    },
+    get onValueChange() {
+      return onValueChange
+    },
   })
 
   setRangeCalendarContext(ctx)
@@ -58,7 +83,7 @@
 
 <div
   class="sp-range-calendar {className ?? ''}"
-  role='group'
+  role="group"
   aria-label={calendarLabel}
   data-disabled={disabled || undefined}
 >

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

@@ -1 +1 @@
-{"version":3,"file":"range-calendar-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/range-calendar/components/range-calendar-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AAsErD,QAAA,MAAM,iBAAiB,6EAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"range-calendar-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/range-calendar/components/range-calendar-root.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AA+FrD,QAAA,MAAM,iBAAiB,6EAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/range-calendar/range-calendar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-calendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/range-calendar/range-calendar.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"range-calendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/range-calendar/range-calendar.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/range-calendar/range-calendar.svelte.js

@@ -1,7 +1,7 @@
 import { getContext, setContext } from 'svelte';
 import { createMonths } from '../../internal/date-time/calendar-helpers.js';
 import { createFormatter } from '../../internal/date-time/formatter.js';
-import { getWeekdays, isBetweenInclusive, isSameDay, } from '../../internal/date-time/utils.js';
+import { getWeekdays, isBetweenInclusive, isSameDay } from '../../internal/date-time/utils.js';
 const KEY = Symbol('sp-range-calendar');
 export function setRangeCalendarContext(state) {
     setContext(KEY, state);
@@ -21,15 +21,15 @@ export function createRangeCalendarState(opts) {
         if (!opts.minValue)
             return false;
         const prev = opts.getPlaceholder().subtract({ months: 1 });
-        return prev.year < opts.minValue.year
-            || (prev.year === opts.minValue.year && prev.month < opts.minValue.month);
+        return (prev.year < opts.minValue.year ||
+            (prev.year === opts.minValue.year && prev.month < opts.minValue.month));
     });
     const isNextDisabled = $derived.by(() => {
         if (!opts.maxValue)
             return false;
         const next = opts.getPlaceholder().add({ months: opts.numberOfMonths });
-        return next.year > opts.maxValue.year
-            || (next.year === opts.maxValue.year && next.month > opts.maxValue.month);
+        return (next.year > opts.maxValue.year ||
+            (next.year === opts.maxValue.year && next.month > opts.maxValue.month));
     });
     function getEffectiveRange() {
         const range = opts.getValue();
@@ -42,24 +42,56 @@ export function createRangeCalendarState(opts) {
         return range;
     }
     return {
-        get value() { return opts.getValue(); },
-        get placeholder() { return opts.getPlaceholder(); },
-        get months() { return months; },
-        get weekdays() { return weekdays; },
-        get headingText() { return headingText; },
-        get isPrevDisabled() { return isPrevDisabled; },
-        get isNextDisabled() { return isNextDisabled; },
-        get disabled() { return opts.disabled; },
-        get readonly() { return opts.readonly; },
+        get value() {
+            return opts.getValue();
+        },
+        get placeholder() {
+            return opts.getPlaceholder();
+        },
+        get months() {
+            return months;
+        },
+        get weekdays() {
+            return weekdays;
+        },
+        get headingText() {
+            return headingText;
+        },
+        get isPrevDisabled() {
+            return isPrevDisabled;
+        },
+        get isNextDisabled() {
+            return isNextDisabled;
+        },
+        get disabled() {
+            return opts.disabled;
+        },
+        get readonly() {
+            return opts.readonly;
+        },
         locale: opts.locale,
         weekStartsOn: opts.weekStartsOn,
-        get focusedDate() { return focusedDate; },
-        get hoveredDate() { return hoveredDate; },
-        get minValue() { return opts.minValue; },
-        get maxValue() { return opts.maxValue; },
-        get isDateDisabled() { return opts.isDateDisabled; },
-        get isDateUnavailable() { return opts.isDateUnavailable; },
-        get selectingEnd() { return selectingEnd; },
+        get focusedDate() {
+            return focusedDate;
+        },
+        get hoveredDate() {
+            return hoveredDate;
+        },
+        get minValue() {
+            return opts.minValue;
+        },
+        get maxValue() {
+            return opts.maxValue;
+        },
+        get isDateDisabled() {
+            return opts.isDateDisabled;
+        },
+        get isDateUnavailable() {
+            return opts.isDateUnavailable;
+        },
+        get selectingEnd() {
+            return selectingEnd;
+        },
         checkDisabled(date) {
             if (opts.isDateDisabled?.(date))
                 return true;
@@ -93,9 +125,7 @@ export function createRangeCalendarState(opts) {
                 // Selecting end
                 const start = opts.getValue().start;
                 if (start) {
-                    const range = date.compare(start) >= 0
-                        ? { start, end: date }
-                        : { start: date, end: start };
+                    const range = date.compare(start) >= 0 ? { start, end: date } : { start: date, end: start };
                     opts.setValue(range);
                     opts.onValueChange?.(range);
                 }

package/dist/components/rating-group/rating-group.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { RatingGroupProps } from './types.js'
 
   let {
@@ -14,26 +14,21 @@
   const isInteractive = $derived(!disabled && !isReadonly)
 
   function setRating(rating: number) {
-    if (isInteractive)
-      value = value === rating ? 0 : rating
+    if (isInteractive) value = value === rating ? 0 : rating
   }
 
   function onkeydown(event: KeyboardEvent) {
-    if (!isInteractive)
-      return
+    if (!isInteractive) return
     if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
       event.preventDefault()
       value = Math.min(max, value + 1)
-    }
-    else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
       event.preventDefault()
       value = Math.max(0, value - 1)
-    }
-    else if (event.key === 'Home') {
+    } else if (event.key === 'Home') {
       event.preventDefault()
       value = 0
-    }
-    else if (event.key === 'End') {
+    } else if (event.key === 'End') {
       event.preventDefault()
       value = max
     }
@@ -42,7 +37,7 @@
 
 <div
   class="sp-rating {className ?? ''}"
-  role='slider'
+  role="slider"
   aria-valuenow={value}
   aria-valuemin={0}
   aria-valuemax={max}
@@ -60,28 +55,27 @@
     {@const rating = i + 1}
     {@const filled = hovered >= 0 ? rating <= hovered : rating <= value}
     <button
-      class='sp-rating-star'
-      type='button'
+      class="sp-rating-star"
+      type="button"
       tabindex={-1}
-      aria-hidden='true'
+      aria-hidden="true"
       disabled={!isInteractive}
       data-state={filled ? 'filled' : 'empty'}
       onclick={() => setRating(rating)}
       onmouseenter={() => {
-        if (isInteractive)
-          hovered = rating
+        if (isInteractive) hovered = rating
       }}
     >
       <svg
-        viewBox='0 0 24 24'
+        viewBox="0 0 24 24"
         fill={filled ? 'currentColor' : 'none'}
-        stroke='currentColor'
-        stroke-width='1.5'
-        stroke-linecap='round'
-        stroke-linejoin='round'
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
       >
         <polygon
-          points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'
+          points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
         ></polygon>
       </svg>
     </button>

package/dist/components/rating-group/rating-group.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rating-group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/rating-group/rating-group.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAiEnD,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"rating-group.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/rating-group/rating-group.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AA2DnD,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/scroll-area/scroll-area.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { ScrollAreaProps } from './types.js'
   import { isBrowser } from '../../internal/helpers/index.js'
 
@@ -23,8 +23,7 @@
   }
 
   function scheduleHide() {
-    if (type !== 'hover' && type !== 'scroll')
-      return
+    if (type !== 'hover' && type !== 'scroll') return
     clearHideTimer()
     hideTimer = setTimeout(() => {
       showScrollbar = false
@@ -34,11 +33,9 @@
   function syncVisibilityFromMode() {
     if (type === 'always') {
       showScrollbar = true
-    }
-    else if (type === 'auto') {
+    } else if (type === 'auto') {
       showScrollbar = isOverflowing
-    }
-    else if (type === 'hover' || type === 'scroll') {
+    } else if (type === 'hover' || type === 'scroll') {
       showScrollbar = false
     }
   }
@@ -48,36 +45,31 @@
   })
 
   $effect(() => {
-    if (!isBrowser || !viewportEl)
-      return
+    if (!isBrowser || !viewportEl) return
 
     const viewport = viewportEl
     const root = rootEl
 
     function updateOverflowing() {
-      isOverflowing = viewport.scrollHeight > viewport.clientHeight
-        || viewport.scrollWidth > viewport.clientWidth
-      if (type === 'auto')
-        showScrollbar = isOverflowing
+      isOverflowing =
+        viewport.scrollHeight > viewport.clientHeight || viewport.scrollWidth > viewport.clientWidth
+      if (type === 'auto') showScrollbar = isOverflowing
     }
 
     function onScroll() {
-      if (type !== 'scroll')
-        return
+      if (type !== 'scroll') return
       showScrollbar = true
       scheduleHide()
     }
 
     function onPointerEnter() {
-      if (type !== 'hover')
-        return
+      if (type !== 'hover') return
       clearHideTimer()
       showScrollbar = true
     }
 
     function onPointerLeave() {
-      if (type !== 'hover')
-        return
+      if (type !== 'hover') return
       scheduleHide()
     }
 
@@ -89,8 +81,7 @@
     if (typeof ResizeObserver !== 'undefined') {
       resizeObserver = new ResizeObserver(updateOverflowing)
       resizeObserver.observe(viewport)
-      if (viewport.firstElementChild)
-        resizeObserver.observe(viewport.firstElementChild)
+      if (viewport.firstElementChild) resizeObserver.observe(viewport.firstElementChild)
     }
 
     updateOverflowing()
@@ -111,11 +102,11 @@
   class="sp-scroll-area {type} {className ?? ''}"
   data-type={type}
   data-scrollbar-visible={showScrollbar ? 'true' : 'false'}
-  dir={dir}
+  {dir}
 >
-  <div class='sp-scroll-area-shell'>
-    <div bind:this={viewportEl} class='sp-scroll-area-viewport' dir={dir}>
-      <div class='sp-scroll-area-content'>
+  <div class="sp-scroll-area-shell">
+    <div bind:this={viewportEl} class="sp-scroll-area-viewport" {dir}>
+      <div class="sp-scroll-area-content">
         {#if children}{@render children()}{/if}
       </div>
     </div>
@@ -176,9 +167,12 @@
     height: var(--sp-scroll-area-scrollbar-size);
   }
 
-  .sp-scroll-area[data-type='auto'][data-scrollbar-visible='false'] .sp-scroll-area-viewport::-webkit-scrollbar,
-  .sp-scroll-area[data-type='hover'][data-scrollbar-visible='false'] .sp-scroll-area-viewport::-webkit-scrollbar,
-  .sp-scroll-area[data-type='scroll'][data-scrollbar-visible='false'] .sp-scroll-area-viewport::-webkit-scrollbar {
+  .sp-scroll-area[data-type='auto'][data-scrollbar-visible='false']
+    .sp-scroll-area-viewport::-webkit-scrollbar,
+  .sp-scroll-area[data-type='hover'][data-scrollbar-visible='false']
+    .sp-scroll-area-viewport::-webkit-scrollbar,
+  .sp-scroll-area[data-type='scroll'][data-scrollbar-visible='false']
+    .sp-scroll-area-viewport::-webkit-scrollbar {
     width: 0;
     height: 0;
   }

package/dist/components/scroll-area/scroll-area.svelte.d.ts.map

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

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import SearchField from '../search-field.svelte'
 
   let value = $state('')
@@ -24,10 +24,10 @@
   {disabled}
   onClear={handleClear}
   onInput={handleInput}
-  aria-label='Test search'
+  aria-label="Test search"
 />
 
-<div style='margin-top: 1rem; font-size: 0.85rem;'>
+<div style="margin-top: 1rem; font-size: 0.85rem;">
   <p>Value: {value}</p>
   <p>Clear count: {clearCount}</p>
   <p>Input count: {inputCount}</p>