@spectral_labs/ui 1.2.0 → 1.3.0

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

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { FieldLabelProps } from './types.js'
 
   const { for: forId, required = false, class: className, children }: FieldLabelProps = $props()
@@ -6,7 +6,7 @@
 
 <label class="sp-field-label {className ?? ''}" for={forId}>
   {#if children}{@render children()}{/if}
-  {#if required}<span class='sp-field-required' aria-hidden='true'>*</span>{/if}
+  {#if required}<span class="sp-field-required" aria-hidden="true">*</span>{/if}
 </label>
 
 <style>

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

@@ -1,14 +1,14 @@
-<script lang='ts'>
+<script lang="ts">
   import type { FieldSeparatorProps } from './types.js'
 
   const { class: className, children }: FieldSeparatorProps = $props()
 </script>
 
 <div class="sp-field-separator {className ?? ''}">
-  <hr class='sp-field-separator-line' />
+  <hr class="sp-field-separator-line" />
   {#if children}
-    <span class='sp-field-separator-text'>{@render children()}</span>
-    <hr class='sp-field-separator-line' />
+    <span class="sp-field-separator-text">{@render children()}</span>
+    <hr class="sp-field-separator-line" />
   {/if}
 </div>
 

package/dist/components/field/field.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { FieldProps } from './types.js'
 
   const { invalid = false, class: className, children }: FieldProps = $props()

package/dist/components/grid-list/__tests__/GridListTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { GridListItemData } from '../types.js'
   import Item from '../components/grid-list-item.svelte'
   import * as GridList from '../index.js'
@@ -36,7 +36,7 @@
   {disabled}
   {draggable}
   {onSelectionChange}
-  aria-label='Test grid'
+  aria-label="Test grid"
 >
   {#snippet item(itemData: TestItem)}
     <Item id={itemData.id} textValue={itemData.label}>

package/dist/components/grid-list/components/grid-list-item.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { GridListItemProps } from '../types.js'
   import { getGridListContext } from '../grid-list.svelte.js'
 
@@ -32,14 +32,12 @@
   const isDragging = $derived(ctx.isItemDragging(id))
 
   function onClick(e: MouseEvent) {
-    if (disabled || ctx.disabled)
-      return
+    if (disabled || ctx.disabled) return
     ctx.toggleSelection(id, e.shiftKey, e.ctrlKey || e.metaKey)
   }
 
   function onKeyDown(e: KeyboardEvent) {
-    if (disabled || ctx.disabled)
-      return
+    if (disabled || ctx.disabled) return
     if (e.key === ' ' || e.key === 'Enter') {
       e.preventDefault()
       ctx.toggleSelection(id, e.shiftKey, e.ctrlKey || e.metaKey)
@@ -50,7 +48,7 @@
 <div
   bind:this={itemEl}
   class="sp-grid-list-item {className ?? ''}"
-  role='option'
+  role="option"
   aria-selected={isSelected}
   aria-disabled={disabled || ctx.disabled || undefined}
   data-grid-list-item={id}
@@ -92,11 +90,8 @@
   }
 
   .sp-grid-list-item:hover:not([data-disabled]) {
-    box-shadow: inset 0 0 0 1px color-mix(
-      in oklch,
-      var(--sp-sys-color-outline-variant) 75%,
-      transparent
-    );
+    box-shadow: inset 0 0 0 1px
+      color-mix(in oklch, var(--sp-sys-color-outline-variant) 75%, transparent);
   }
 
   .sp-grid-list-item:focus-visible {
@@ -115,14 +110,13 @@
   }
 
   .sp-grid-list-item[data-selected]:hover:not([data-disabled]) {
-    box-shadow: inset 0 0 0 1px color-mix(
-      in oklch,
-      var(--sp-sys-color-primary) 50%,
-      transparent
-    );
+    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--sp-sys-color-primary) 50%, transparent);
     background-color: color-mix(
       in oklch,
-      var(--sp-sys-color-primary) calc((var(--sp-sys-state-focus-opacity, 0.12) + var(--sp-sys-state-hover-opacity, 0.08)) * 100%),
+      var(--sp-sys-color-primary)
+        calc(
+          (var(--sp-sys-state-focus-opacity, 0.12) + var(--sp-sys-state-hover-opacity, 0.08)) * 100%
+        ),
       transparent
     );
   }

package/dist/components/grid-list/components/grid-list-item.svelte.d.ts.map

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

package/dist/components/grid-list/components/grid-list-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { GridListItemData, GridListProps } from '../types.js'
   import { dragSession } from '../../../internal/drag-drop/index.js'
   import { isBrowser } from '../../../internal/helpers/index.js'
@@ -32,23 +32,26 @@
   let containerEl: HTMLElement | undefined = $state()
   let indicatorPortalEl: HTMLDivElement | null = null
 
-  const {
-    context,
-    attachContainer,
-    detachContainer,
-    handleKeydown,
-  } = createGridList({
-    get selectionMode() { return selectionMode },
-    get selectedKeys() { return selectedKeys },
+  const { context, attachContainer, detachContainer, handleKeydown } = createGridList({
+    get selectionMode() {
+      return selectionMode
+    },
+    get selectedKeys() {
+      return selectedKeys
+    },
     onSelectionChange: (keys) => {
       selectedKeys = keys
       onSelectionChange?.(keys)
     },
-    get draggable() { return draggable },
+    get draggable() {
+      return draggable
+    },
     dragType,
     group,
     acceptedTypes,
-    get disabled() { return disabled },
+    get disabled() {
+      return disabled
+    },
     orientation,
     direction,
     loop,
@@ -76,18 +79,14 @@
   const dropIndicatorTarget = $derived(isDropTarget ? dragSession.currentTarget : null)
 
   const indicatorStyle = $derived.by(() => {
-    if (!isDropTarget || !dropIndicatorTarget || dropIndicatorTarget.type === 'root')
-      return ''
-    if (dropIndicatorTarget.dropPosition === 'on')
-      return ''
+    if (!isDropTarget || !dropIndicatorTarget || dropIndicatorTarget.type === 'root') return ''
+    if (dropIndicatorTarget.dropPosition === 'on') return ''
 
     const dt = context.dropTarget
-    if (!dt || !containerEl)
-      return ''
+    if (!dt || !containerEl) return ''
 
     const rect = dt.getIndicatorRect()
-    if (!rect)
-      return ''
+    if (!rect) return ''
 
     // Read the gap from the container to center the indicator in it
     const gap = Number.parseFloat(getComputedStyle(containerEl).gap) || 0
@@ -102,25 +101,24 @@
 
     if (orientation === 'vertical') {
       const rawTop = rect.y
-      const top = (dropIndicatorTarget.dropPosition === 'before'
-        ? rawTop - halfGap
-        : rawTop + halfGap) - INDICATOR_SIZE / 2
+      const top =
+        (dropIndicatorTarget.dropPosition === 'before' ? rawTop - halfGap : rawTop + halfGap) -
+        INDICATOR_SIZE / 2
       const left = itemRect ? itemRect.left : rect.x
       const width = itemRect ? itemRect.width : rect.width
       return `top: ${top}px; left: ${left}px; width: ${width}px; height: ${INDICATOR_SIZE}px;`
     }
     const rawLeft = rect.x
-    const left = (dropIndicatorTarget.dropPosition === 'before'
-      ? rawLeft - halfGap
-      : rawLeft + halfGap) - INDICATOR_SIZE / 2
+    const left =
+      (dropIndicatorTarget.dropPosition === 'before' ? rawLeft - halfGap : rawLeft + halfGap) -
+      INDICATOR_SIZE / 2
     const top = itemRect ? itemRect.top : rect.y
     const height = itemRect ? itemRect.height : rect.height
     return `left: ${left}px; top: ${top}px; height: ${height}px; width: ${INDICATOR_SIZE}px;`
   })
 
   $effect(() => {
-    if (!isBrowser)
-      return
+    if (!isBrowser) return
 
     if (!indicatorStyle) {
       indicatorPortalEl?.remove()
@@ -146,15 +144,14 @@
   })
 
   function onKeyDown(e: KeyboardEvent) {
-    if (containerEl)
-      handleKeydown(containerEl, e)
+    if (containerEl) handleKeydown(containerEl, e)
   }
 </script>
 
 <div
   bind:this={containerEl}
   class="sp-grid-list {className ?? ''}"
-  role='listbox'
+  role="listbox"
   aria-label={ariaLabel}
   aria-orientation={orientation}
   aria-multiselectable={selectionMode === 'multiple' || undefined}
@@ -164,7 +161,7 @@
   onkeydown={onKeyDown}
 >
   {#if items.length === 0 && emptySnippet}
-    <div class='sp-grid-list-empty'>
+    <div class="sp-grid-list-empty">
       {@render emptySnippet()}
     </div>
   {:else}
@@ -214,21 +211,21 @@
   }
 
   /* Horizontal indicator (vertical list): dots at left and right */
-  :global(.sp-grid-list-indicator[style*="height: 2px"])::before {
+  :global(.sp-grid-list-indicator[style*='height: 2px'])::before {
     left: -7px;
     top: -3px;
   }
-  :global(.sp-grid-list-indicator[style*="height: 2px"])::after {
+  :global(.sp-grid-list-indicator[style*='height: 2px'])::after {
     right: -7px;
     top: -3px;
   }
 
   /* Vertical indicator (horizontal list): dots at top and bottom */
-  :global(.sp-grid-list-indicator[style*="width: 2px"])::before {
+  :global(.sp-grid-list-indicator[style*='width: 2px'])::before {
     top: -7px;
     left: -3px;
   }
-  :global(.sp-grid-list-indicator[style*="width: 2px"])::after {
+  :global(.sp-grid-list-indicator[style*='width: 2px'])::after {
     bottom: -7px;
     left: -3px;
   }

package/dist/components/grid-list/components/grid-list-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid-list-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/grid-list/components/grid-list-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AA8KlE,QAAA,MAAM,YAAY,iFAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"grid-list-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/grid-list/components/grid-list-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AA2KlE,QAAA,MAAM,YAAY,iFAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/grid-list/grid-list.svelte.d.ts.map

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

package/dist/components/grid-list/grid-list.svelte.js

@@ -5,7 +5,7 @@
  * into a single accessible list component.
  */
 import { getContext, setContext } from 'svelte';
-import { dragSession, DragSourceState, DropTargetState, } from '../../internal/drag-drop/index.js';
+import { dragSession, DragSourceState, DropTargetState } from '../../internal/drag-drop/index.js';
 import { RovingFocusGroup } from '../../internal/roving-focus/index.js';
 import { TypeaheadSearch } from '../../internal/typeahead/index.js';
 const CONTEXT_KEY = Symbol('sp-grid-list');
@@ -44,7 +44,9 @@ export function createGridList(options) {
     function getItemOrder() {
         if (!containerElement)
             return Array.from(itemTexts.keys());
-        return Array.from(containerElement.querySelectorAll('[data-grid-list-item]')).map(el => el.dataset.gridListItem).filter(id => itemTexts.has(id));
+        return Array.from(containerElement.querySelectorAll('[data-grid-list-item]'))
+            .map((el) => el.dataset.gridListItem)
+            .filter((id) => itemTexts.has(id));
     }
     function isSelected(key) {
         return getSelectedKeys().has(key);
@@ -108,7 +110,7 @@ export function createGridList(options) {
     // ── Typeahead ──────────────────────────────────────────────────────────
     const typeahead = new TypeaheadSearch();
     function handleTypeahead(key, container) {
-        const texts = getItemOrder().map(id => itemTexts.get(id) ?? '');
+        const texts = getItemOrder().map((id) => itemTexts.get(id) ?? '');
         const idx = typeahead.handleTypeahead(key, texts);
         if (idx >= 0) {
             const candidates = rovingFocus.getCandidates(container);
@@ -128,7 +130,7 @@ export function createGridList(options) {
             getDropOperation(types, allowedOps) {
                 for (const t of acceptedTypes) {
                     if (types.has(t))
-                        return allowedOps.includes('move') ? 'move' : allowedOps[0] ?? 'cancel';
+                        return allowedOps.includes('move') ? 'move' : (allowedOps[0] ?? 'cancel');
                 }
                 return 'cancel';
             },
@@ -164,18 +166,16 @@ export function createGridList(options) {
             id: `${listId}-item-${id}`,
             getItems() {
                 const sel = getSelectedKeys();
-                const keys = sel.has(id) && sel.size > 1
-                    ? Array.from(sel)
-                    : [id];
-                return keys.map(k => ({ [dragType]: k, 'text/plain': itemTexts.get(k) ?? k }));
+                const keys = sel.has(id) && sel.size > 1 ? Array.from(sel) : [id];
+                return keys.map((k) => ({ [dragType]: k, 'text/plain': itemTexts.get(k) ?? k }));
             },
             getAllowedDropOperations: () => ['move'],
             onDragStart() {
                 const sel = getSelectedKeys();
                 const keys = sel.has(id) && sel.size > 1
                     ? sel
-                    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- ephemeral set for drag keys
-                    : new Set([id]);
+                    : // eslint-disable-next-line svelte/prefer-svelte-reactivity -- ephemeral set for drag keys
+                        new Set([id]);
                 dragSession.setSourceCollection(listId, keys);
             },
             onDragEnd(op) {
@@ -248,9 +248,15 @@ export function createGridList(options) {
     // ── Context ──────────────────────────────────────────────────────────
     const context = {
         listId,
-        get selectionMode() { return options.selectionMode; },
-        get disabled() { return options.disabled; },
-        get draggable() { return options.draggable; },
+        get selectionMode() {
+            return options.selectionMode;
+        },
+        get disabled() {
+            return options.disabled;
+        },
+        get draggable() {
+            return options.draggable;
+        },
         dragType,
         isSelected,
         toggleSelection,
@@ -259,7 +265,9 @@ export function createGridList(options) {
         isItemDragging,
         registerItemText,
         unregisterItemText,
-        get dropTarget() { return dropTarget; },
+        get dropTarget() {
+            return dropTarget;
+        },
     };
     return {
         context,
@@ -268,6 +276,8 @@ export function createGridList(options) {
         handleKeydown,
         rovingFocus,
         dropTarget,
-        get selectedKeys() { return getSelectedKeys(); },
+        get selectedKeys() {
+            return getSelectedKeys();
+        },
     };
 }

package/dist/components/grid-list/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Item } from './components/grid-list-item.svelte';
 export { default as Root } from './components/grid-list-root.svelte';
-export type { GridListItemData, GridListItemProps, GridListProps, SelectionMode, } from './types.js';
+export type { GridListItemData, GridListItemProps, GridListProps, SelectionMode } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/grid-list/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/grid-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oCAAoC,CAAA;AACpE,YAAY,EACV,gBAAgB,EAChB,iBAAiB,EACjB,aAAa,EACb,aAAa,GACd,MAAM,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/grid-list/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oCAAoC,CAAA;AACpE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,oCAAoC,CAAA;AACpE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/grid-list/types.d.ts

@@ -6,43 +6,43 @@ export interface GridListItemData {
 export type SelectionMode = 'none' | 'single' | 'multiple';
 export interface GridListProps<T extends GridListItemData = GridListItemData> {
     /** The items to render. */
-    'items': T[];
+    items: T[];
     /** Selection behavior. */
-    'selectionMode'?: SelectionMode;
+    selectionMode?: SelectionMode;
     /** Currently selected item keys. Bindable. */
-    'selectedKeys'?: Set<string>;
+    selectedKeys?: Set<string>;
     /** Whether items are draggable. */
-    'draggable'?: boolean;
+    draggable?: boolean;
     /** Drag type identifier (for DnD interop). */
-    'dragType'?: string;
+    dragType?: string;
     /** Group name for cross-list DnD. */
-    'group'?: string;
+    group?: string;
     /** Accepted drag types for cross-list transfers. */
-    'acceptedTypes'?: string[];
+    acceptedTypes?: string[];
     /** Whether the list is disabled. */
-    'disabled'?: boolean;
+    disabled?: boolean;
     /** Layout orientation for keyboard navigation. */
-    'orientation'?: 'vertical' | 'horizontal';
+    orientation?: 'vertical' | 'horizontal';
     /** Text direction. */
-    'direction'?: 'ltr' | 'rtl';
+    direction?: 'ltr' | 'rtl';
     /** Whether keyboard navigation loops. */
-    'loop'?: boolean;
+    loop?: boolean;
     /** Additional CSS class. */
-    'class'?: string;
+    class?: string;
     /** Accessible label. */
     'aria-label'?: string;
-    'onReorder'?: (keys: string[], target: DropTarget) => void;
-    'onInsert'?: (items: DropItem[], target: DropTarget) => void;
-    'onItemDrop'?: (items: DropItem[], target: DropTarget) => void;
-    'onRootDrop'?: (items: DropItem[]) => void;
-    'onRemove'?: (keys: string[]) => void;
+    onReorder?: (keys: string[], target: DropTarget) => void;
+    onInsert?: (items: DropItem[], target: DropTarget) => void;
+    onItemDrop?: (items: DropItem[], target: DropTarget) => void;
+    onRootDrop?: (items: DropItem[]) => void;
+    onRemove?: (keys: string[]) => void;
     /** Custom ghost renderer for drag preview. Receives drag items. */
-    'renderGhost'?: (items: import('../../internal/drag-drop/index.js').DragItem[]) => HTMLElement;
-    'onSelectionChange'?: (keys: Set<string>) => void;
+    renderGhost?: (items: import('../../internal/drag-drop/index.js').DragItem[]) => HTMLElement;
+    onSelectionChange?: (keys: Set<string>) => void;
     /** Render snippet for each item. */
-    'item': Snippet<[T]>;
+    item: Snippet<[T]>;
     /** Empty state snippet. */
-    'empty'?: Snippet;
+    empty?: Snippet;
 }
 export interface GridListItemProps {
     /** Unique item id. */

package/dist/components/grid-list/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/grid-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAG7E,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;CACX;AAGD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAG1D,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB;IAC1E,2BAA2B;IAC3B,OAAO,EAAE,CAAC,EAAE,CAAA;IACZ,0BAA0B;IAC1B,eAAe,CAAC,EAAE,aAAa,CAAA;IAC/B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC5B,mCAAmC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,kDAAkD;IAClD,aAAa,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACzC,sBAAsB;IACtB,WAAW,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IAC3B,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IAGrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC9D,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IAC1C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACrC,mEAAmE;IACnE,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,mCAAmC,EAAE,QAAQ,EAAE,KAAK,WAAW,CAAA;IAG9F,mBAAmB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAGjD,oCAAoC;IACpC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACpB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAGD,MAAM,WAAW,iBAAiB;IAChC,sBAAsB;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/grid-list/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAG7E,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;CACX;AAGD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAA;AAG1D,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB;IAC1E,2BAA2B;IAC3B,KAAK,EAAE,CAAC,EAAE,CAAA;IACV,0BAA0B;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC1B,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kDAAkD;IAClD,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IACvC,sBAAsB;IACtB,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACzB,yCAAyC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IAGrB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IACxD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC1D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnC,mEAAmE;IACnE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,mCAAmC,EAAE,QAAQ,EAAE,KAAK,WAAW,CAAA;IAG5F,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IAG/C,oCAAoC;IACpC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAClB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAGD,MAAM,WAAW,iBAAiB;IAChC,sBAAsB;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB"}

package/dist/components/hover-card/__tests__/HoverCardTest.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import * as HoverCard from '../index.js'
 
   let {
@@ -22,9 +22,9 @@
 
 <HoverCard.Root bind:open {onOpenChange} {openDelay} {closeDelay}>
   <HoverCard.Trigger>
-    <button type='button' data-testid='trigger'>hover me</button>
+    <button type="button" data-testid="trigger">hover me</button>
   </HoverCard.Trigger>
   <HoverCard.Content {portalTo} {disablePortal} class={contentClass}>
-    <p data-testid='content'>card body</p>
+    <p data-testid="content">card body</p>
   </HoverCard.Content>
 </HoverCard.Root>

package/dist/components/hover-card/components/hover-card-content.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { HoverCardContentProps } from '../types.js'
   import { EscapeLayerState } from '../../../internal/escape-layer/index.js'
   import { FloatingLayerState } from '../../../internal/floating-layer/index.js'
@@ -23,22 +23,36 @@
   let contentEl: HTMLElement | undefined = $state()
 
   const presence = new PresenceLayerState({
-    get present() { return ctx.open },
+    get present() {
+      return ctx.open
+    },
   })
 
   const escapeLayer = new EscapeLayerState({
     enabled: true,
-    onEscapeKeydown() { ctx.closeWithDelay() },
+    onEscapeKeydown() {
+      ctx.closeWithDelay()
+    },
   })
 
   const floating = new FloatingLayerState({
     reference: null,
     floating: null,
-    get placement() { return placement },
-    get sideOffset() { return offsetValue },
-    get alignOffset() { return crossOffset },
-    get avoidCollisions() { return shouldFlip },
-    get collisionPadding() { return containerPadding },
+    get placement() {
+      return placement
+    },
+    get sideOffset() {
+      return offsetValue
+    },
+    get alignOffset() {
+      return crossOffset
+    },
+    get avoidCollisions() {
+      return shouldFlip
+    },
+    get collisionPadding() {
+      return containerPadding
+    },
   })
 
   /** The resolved placement after flip/shift (set by FloatingUI). */
@@ -58,8 +72,7 @@
   })
 
   $effect(() => {
-    if (contentEl)
-      presence.setElement(contentEl)
+    if (contentEl) presence.setElement(contentEl)
   })
 </script>
 
@@ -69,7 +82,7 @@
       bind:this={contentEl}
       class="sp-hover-card-content {className ?? ''}"
       id={ctx.contentId}
-      role='tooltip'
+      role="tooltip"
       data-state={ctx.open ? 'open' : 'closed'}
       data-placement={resolvedPlacement}
       onpointerenter={() => ctx.cancelPending()}
@@ -94,7 +107,8 @@
     transform-origin: var(--sp-floating-transform-origin, top center);
     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-hover-card-content[data-state='closed'] {

package/dist/components/hover-card/components/hover-card-content.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/hover-card/components/hover-card-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAqFxD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"hover-card-content.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/hover-card/components/hover-card-content.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAkGxD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/components/hover-card/components/hover-card-root.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { HoverCardProps } from '../types.js'
   import { createHoverCardIds, setHoverCardContext } from '../hover-card.svelte.js'
 
@@ -23,10 +23,16 @@
   }
 
   setHoverCardContext({
-    get open() { return open },
+    get open() {
+      return open
+    },
     contentId,
-    get triggerEl() { return triggerEl },
-    setTriggerEl(el) { triggerEl = el },
+    get triggerEl() {
+      return triggerEl
+    },
+    setTriggerEl(el) {
+      triggerEl = el
+    },
     openWithDelay() {
       cancelPending()
       pendingTimer = setTimeout(() => {

package/dist/components/hover-card/components/hover-card-root.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/hover-card/components/hover-card-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AAwDjD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"hover-card-root.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/hover-card/components/hover-card-root.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AA8DjD,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/hover-card/components/hover-card-trigger.svelte

@@ -1,4 +1,4 @@
-<script lang='ts'>
+<script lang="ts">
   import type { HoverCardTriggerProps } from '../types.js'
   import { getHoverCardContext } from '../hover-card.svelte.js'
 
@@ -8,8 +8,7 @@
   let triggerEl: HTMLElement | undefined = $state()
 
   $effect(() => {
-    if (triggerEl)
-      ctx.setTriggerEl(triggerEl)
+    if (triggerEl) ctx.setTriggerEl(triggerEl)
     return () => ctx.setTriggerEl(null)
   })
 </script>
@@ -17,7 +16,7 @@
 <span
   bind:this={triggerEl}
   class="sp-hover-card-trigger {className ?? ''}"
-  role='group'
+  role="group"
   onpointerenter={() => ctx.openWithDelay()}
   onpointerleave={() => ctx.closeWithDelay()}
   onfocus={() => ctx.openWithDelay()}