@urbicon-ui/blocks 6.3.1 → 6.3.6

package/dist/primitives/Progress/index.js

@@ -1,2 +1,2 @@
 export { default as Progress } from './Progress.svelte';
-export { progressVariants } from './progress.variants';
+export { progressVariants } from './progress.variants.js';

package/dist/primitives/Progress/progress.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const progressVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const progressVariants: (props?: import("../../utils/variants.js").TVProps<{
     intent: {
         primary: {
             fill: string;

package/dist/primitives/Progress/progress.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const progressVariants = tv({
     slots: {
         wrapper: ['flex flex-col gap-1.5 w-full'],

package/dist/primitives/RadioGroup/RadioGroup.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RadioGroupProps } from './index';
+import type { RadioGroupProps } from './index.js';
 declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;

package/dist/primitives/RadioGroup/RadioItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { RadioItemProps } from './index';
+import type { RadioItemProps } from './index.js';
 declare const RadioItem: import("svelte").Component<RadioItemProps, {}, "">;
 type RadioItem = ReturnType<typeof RadioItem>;
 export default RadioItem;

package/dist/primitives/RadioGroup/index.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InteractiveTier } from '../../utils';
-import type { RadioGroupSlots, RadioItemSlots, RadioItemVariants } from './radioGroup.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { RadioGroupSlots, RadioItemSlots, RadioItemVariants } from './radioGroup.variants.js';
 /**
  * @description Accessible radio group for single-option selection with semantic intents and form integration.
  * Uses native radio inputs for correct form behavior and ARIA semantics with keyboard navigation.
@@ -123,4 +123,4 @@ export interface RadioItemProps extends Omit<HTMLInputAttributes, 'type' | 'size
 }
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RadioItem } from './RadioItem.svelte';
-export { type RadioGroupVariants, type RadioItemVariants, radioGroupVariants, radioItemVariants } from './radioGroup.variants';
+export { type RadioGroupVariants, type RadioItemVariants, radioGroupVariants, radioItemVariants } from './radioGroup.variants.js';

package/dist/primitives/RadioGroup/index.js

@@ -1,3 +1,3 @@
 export { default as RadioGroup } from './RadioGroup.svelte';
 export { default as RadioItem } from './RadioItem.svelte';
-export { radioGroupVariants, radioItemVariants } from './radioGroup.variants';
+export { radioGroupVariants, radioItemVariants } from './radioGroup.variants.js';

package/dist/primitives/RadioGroup/radioGroup.context.d.ts

@@ -1,3 +1,3 @@
-import type { RadioGroupContext } from './index';
+import type { RadioGroupContext } from './index.js';
 declare const getRadioGroupContext: () => RadioGroupContext, setRadioGroupContext: (context: RadioGroupContext) => RadioGroupContext;
 export { getRadioGroupContext, setRadioGroupContext };

package/dist/primitives/RadioGroup/radioGroup.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const radioGroupVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const radioGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
     orientation: {
         horizontal: {
             group: string;
@@ -59,7 +59,7 @@ export declare const radioGroupVariants: (props?: import("../../utils/variants")
         className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
     }) | undefined) => string;
 };
-export declare const radioItemVariants: (props?: import("../../utils/variants").TVProps<{
+export declare const radioItemVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             indicator: string;

package/dist/primitives/RadioGroup/radioGroup.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const radioGroupVariants = tv({
     slots: {
         root: ['flex flex-col gap-1.5'],

package/dist/primitives/SegmentGroup/SegmentGroup.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { SvelteMap } from 'svelte/reactivity';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { getTierContext } from '../../utils';
@@ -21,6 +22,7 @@
     slotClasses: slotClassesProp = {},
     preset,
     ariaLabel,
+    collapseOnOverflow = true,
     ...restProps
   }: SegmentGroupProps = $props();
 
@@ -35,6 +37,15 @@
 
   let containerElement = $state<HTMLDivElement>();
   let indicatorStyle = $state('opacity: 0;');
+  // Content-aware overflow degradation: when the horizontal track can't fit its
+  // available width, collapse to a vertical radio-style stack. `collapsed`
+  // drives the `data-collapsed` attribute (CSS does the layout switch).
+  let collapsed = $state(false);
+  // Horizontal content width recorded at the moment we collapse, used as the
+  // hysteresis threshold to expand back. Without it the check would oscillate:
+  // once vertical the track no longer overflows horizontally, so a naive
+  // re-measure would immediately switch back to horizontal and overflow again.
+  let naturalWidth = 0;
   // SvelteMap instead of `$state(new Map())` — `.set()`/`.delete()` must be
   // reactive so the indicator updates when new items register.
   const registeredItems = new SvelteMap<string, HTMLElement>();
@@ -121,9 +132,63 @@
 
   $effect(() => {
     void value;
+    // Reposition the indicator when the layout flips orientation — the active
+    // item's box moves from a horizontal slot to a full-width row.
+    void collapsed;
     requestAnimationFrame(updateIndicator);
   });
 
+  // Detects whether the horizontal track fits its available width. Reads
+  // layout, so it runs from the ResizeObserver callback rather than a reactive
+  // effect. The +1 tolerance + recorded `naturalWidth` give it hysteresis so it
+  // settles instead of flip-flopping at the boundary.
+  //
+  // We measure the items' own geometry rather than `el.scrollWidth`: the track
+  // is `overflow-x-clip`, which is NOT a scroll container, and Chromium/WebKit
+  // clamp `scrollWidth` to `clientWidth` for clip boxes (so the old scrollWidth
+  // check silently never fired off Firefox). `getBoundingClientRect()` reports
+  // true layout positions regardless of clipping.
+  function measureOverflow() {
+    const el = containerElement;
+    if (!el || el.clientWidth === 0 || registeredItems.size === 0) return;
+    if (!collapsed) {
+      let minLeft = Infinity;
+      let maxRight = -Infinity;
+      for (const item of registeredItems.values()) {
+        const r = item.getBoundingClientRect();
+        if (r.width === 0 && r.height === 0) continue; // not laid out yet
+        minLeft = Math.min(minLeft, r.left);
+        maxRight = Math.max(maxRight, r.right);
+      }
+      if (maxRight === -Infinity) return;
+      const cs = getComputedStyle(el);
+      const padX = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+      const contentWidth = maxRight - minLeft;
+      // Overflow when the items can't fit the content box (clientWidth − padding).
+      if (contentWidth > el.clientWidth - padX + 1) {
+        // Min box width that fits the horizontal track again (used as the
+        // expand-back threshold while collapsed, where the items are stacked
+        // and can no longer be measured horizontally).
+        naturalWidth = contentWidth + padX;
+        collapsed = true;
+      }
+    } else if (naturalWidth > 0 && el.clientWidth >= naturalWidth) {
+      collapsed = false;
+    }
+  }
+
+  $effect(() => {
+    if (!collapseOnOverflow || !containerElement) return;
+    const el = containerElement;
+    const ro = new ResizeObserver(() => measureOverflow());
+    ro.observe(el);
+    // `untrack` so the synchronous first measure doesn't make `collapsed` a
+    // dependency of this effect (which would tear down + rebuild the observer
+    // on every collapse toggle).
+    untrack(() => measureOverflow());
+    return () => ro.disconnect();
+  });
+
   function handleKeyDown(event: KeyboardEvent) {
     if (disabled) return;
 
@@ -165,6 +230,8 @@
 <div
   bind:this={containerElement}
   role="radiogroup"
+  data-collapsed={collapsed || undefined}
+  aria-orientation={collapsed ? 'vertical' : 'horizontal'}
   class={unstyled
     ? [slotClasses?.base, className].filter(Boolean).join(' ')
     : styles.base({ class: [slotClasses?.base, className] })}

package/dist/primitives/SegmentGroup/SegmentGroup.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SegmentGroupProps } from './index';
+import type { SegmentGroupProps } from './index.js';
 declare const SegmentGroup: import("svelte").Component<SegmentGroupProps, {}, "value">;
 type SegmentGroup = ReturnType<typeof SegmentGroup>;
 export default SegmentGroup;

package/dist/primitives/SegmentGroup/SegmentItem.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SegmentItemProps } from './index';
+import type { SegmentItemProps } from './index.js';
 declare const SegmentItem: import("svelte").Component<SegmentItemProps, {}, "">;
 type SegmentItem = ReturnType<typeof SegmentItem>;
 export default SegmentItem;

package/dist/primitives/SegmentGroup/index.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InteractiveTier } from '../../utils';
-import type { SegmentGroupSlots, SegmentGroupVariants } from './segmentgroup.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/index.js';
+import type { SegmentGroupSlots, SegmentGroupVariants } from './segmentgroup.variants.js';
 /**
  * Reactive context exposed to child SegmentItem components.
  */
@@ -59,6 +59,16 @@ export interface SegmentGroupProps extends SegmentGroupVariants, Omit<HTMLAttrib
     preset?: string;
     /** Accessible label for the segment group. */
     ariaLabel?: string;
+    /**
+     * When the segments can't fit their available width, collapse the horizontal
+     * track to a vertical radio-style stack (all options stay visible) instead of
+     * overflowing. Triggered by real measured overflow (ResizeObserver), not a
+     * viewport breakpoint, so it only engages when an instance genuinely doesn't
+     * fit — a 2-segment switcher that fits stays horizontal. Set `false` to keep
+     * the track horizontal (it still won't push the page wider than its parent).
+     * @default true
+     */
+    collapseOnOverflow?: boolean;
     /**
      * Micro-interaction effect applied to each segment item (per-item, not the container).
      * Accepts a preset name, an array of names, or configured mint objects.
@@ -104,4 +114,4 @@ export interface SegmentItemProps extends Omit<HTMLButtonAttributes, 'children'>
 }
 export { default as SegmentGroup } from './SegmentGroup.svelte';
 export { default as SegmentItem } from './SegmentItem.svelte';
-export { type SegmentGroupVariants, segmentGroupVariants } from './segmentgroup.variants';
+export { type SegmentGroupVariants, segmentGroupVariants } from './segmentgroup.variants.js';

package/dist/primitives/SegmentGroup/index.js

@@ -1,3 +1,3 @@
 export { default as SegmentGroup } from './SegmentGroup.svelte';
 export { default as SegmentItem } from './SegmentItem.svelte';
-export { segmentGroupVariants } from './segmentgroup.variants';
+export { segmentGroupVariants } from './segmentgroup.variants.js';

package/dist/primitives/SegmentGroup/segmentGroup.context.d.ts

@@ -1,3 +1,3 @@
-import type { SegmentGroupContext } from './index';
+import type { SegmentGroupContext } from './index.js';
 declare const getSegmentGroupContext: () => SegmentGroupContext, setSegmentGroupContext: (context: SegmentGroupContext) => SegmentGroupContext;
 export { getSegmentGroupContext, setSegmentGroupContext };

package/dist/primitives/SegmentGroup/segmentgroup.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const segmentGroupVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const segmentGroupVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         commit: {
             base: string;

package/dist/primitives/SegmentGroup/segmentgroup.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const segmentGroupVariants = tv({
     slots: {
         // Geometry tier moves to the `tier` variant below. The SegmentGroup is
@@ -6,7 +6,18 @@ export const segmentGroupVariants = tv({
         // `commit` mirrors that. `modify` softens the track + indicator into a
         // compact rectangle for inline-toolbar contexts.
         base: [
-            'relative inline-flex items-center',
+            // `group` + `data-[collapsed]` drive the content-aware degradation below.
+            // `min-w-0 max-w-full` let the track shrink inside a flex/narrow parent
+            // instead of pushing the page wide; `overflow-x-clip` (with a clip-margin
+            // so focus rings aren't cut) contains any horizontal overflow until the
+            // ResizeObserver flips to the vertical stack.
+            'group relative inline-flex items-center',
+            'min-w-0 max-w-full overflow-x-clip [overflow-clip-margin:0.5rem]',
+            // Collapsed = real horizontal overflow detected → vertical radio-style
+            // stack (all options visible, large tap targets). SegmentGroup is already
+            // role=radiogroup, so this is layout-only; the 2D indicator follows the
+            // active row.
+            'data-[collapsed]:flex-col data-[collapsed]:items-stretch data-[collapsed]:w-full data-[collapsed]:overflow-visible',
             'bg-surface-interactive p-1',
             'transition-colors duration-[var(--blocks-duration-fast)]'
         ],
@@ -17,6 +28,9 @@ export const segmentGroupVariants = tv({
         ],
         item: [
             'relative z-10 flex items-center justify-center',
+            // In the collapsed (vertical) layout each item becomes a full-width,
+            // left-aligned row — see the `data-[collapsed]` block on `base`.
+            'group-data-[collapsed]:w-full group-data-[collapsed]:justify-start',
             'font-medium whitespace-nowrap cursor-pointer select-none',
             // `border-0` (not `border-none`) — keeps `border-style: solid` so the
             // text-appearance can add `border-b-[1.5px]` without a style conflict.

package/dist/primitives/Select/Select.svelte

@@ -109,6 +109,10 @@
   }));
 
   let activeIndex = $state(-1);
+  // Tracks whether the most recent open was keyboard-driven, so the initial
+  // active-option highlight only defaults to the first row for keyboard users.
+  // Plain `let`: read in the open effect, intentionally not a reactive dep.
+  let openedViaKeyboard = false;
   let triggerRef = $state<HTMLElement>();
   let listboxRef = $state<HTMLDivElement>();
 
@@ -205,15 +209,23 @@
     }
   });
 
+  // Initial active-option highlight when the listbox opens. Where the virtual
+  // cursor starts:
+  //   • the selected option, if any — shows the user where they are
+  //   • else the first option ONLY on keyboard-open — gives arrows a starting
+  //     point and matches the keyboard expectation of a focused first row
+  //   • else nothing (-1) on pointer-open — avoids the "first element always
+  //     marked" phantom highlight; the first ArrowDown then moves to row 0.
+  // The `activeIndex >= 0` guard preserves an in-progress cursor so multi-
+  // select (listbox stays open across picks) doesn't reset on every toggle.
   $effect(() => {
-    if (open && listboxRef) {
-      if (multiple) {
-        activeIndex = activeIndex >= 0 ? activeIndex : 0;
-      } else {
-        const selectedIdx = enabledOptions.findIndex((o) => o.value === value);
-        activeIndex = selectedIdx >= 0 ? selectedIdx : 0;
-      }
-    }
+    if (!open || !listboxRef) return;
+    if (activeIndex >= 0) return;
+    let next = -1;
+    const selectedIdx = multiple ? -1 : enabledOptions.findIndex((o) => o.value === value);
+    if (selectedIdx >= 0) next = selectedIdx;
+    else if (openedViaKeyboard) next = 0;
+    activeIndex = next;
   });
 
   useFloatingListbox({
@@ -226,6 +238,9 @@
 
   function toggle() {
     if (disabled) return;
+    // Pointer-driven open (trigger onclick). Mark modality so the open effect
+    // doesn't pre-highlight the first row for a mouse/touch user.
+    if (!open) openedViaKeyboard = false;
     open = !open;
     if (!open) activeIndex = -1;
   }
@@ -277,7 +292,7 @@
 
   // Focus-restoration policy follows the ARIA Listbox/Button pattern:
   //   • selection → focus returns to the trigger button (`selectOption`)
-  //   • Escape    → focus returns to the trigger button (handleListboxKeydown)
+  //   • Escape    → focus returns to the trigger button (handleTriggerKeydown)
   //   • Tab       → focus moves naturally to the next tab stop (no restore)
   //   • outside   → focus stays where the user clicked (no restore — user
   //                  explicitly intent to focus elsewhere)
@@ -289,64 +304,71 @@
     return true;
   }
 
+  // Single keyboard model, attached to the trigger (the focused element). The
+  // ARIA listbox pattern keeps DOM focus on the trigger and moves a virtual
+  // cursor via `aria-activedescendant`, so the listbox element never receives
+  // key events — every key is handled here, branching on `open`.
+  //
+  // (Previously a second handler lived on the listbox `div`; since focus never
+  // entered it, arrows were preventDefault'd but never advanced the cursor —
+  // the "keyboard does nothing / fights the page" report. Consolidated here.)
   function handleTriggerKeydown(event: KeyboardEvent) {
     if (disabled) return;
 
     switch (event.key) {
-      case 'Enter':
-      case ' ':
       case 'ArrowDown':
         event.preventDefault();
-        if (!open) open = true;
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        if (!open) open = true;
-        break;
-      case 'Escape':
-        if (open && dismissByEscape()) {
-          event.preventDefault();
+        if (!open) {
+          openedViaKeyboard = true;
+          open = true;
+        } else {
+          activeIndex = activeIndex < enabledOptions.length - 1 ? activeIndex + 1 : 0;
         }
         break;
-    }
-  }
-
-  function handleListboxKeydown(event: KeyboardEvent) {
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        activeIndex = activeIndex < enabledOptions.length - 1 ? activeIndex + 1 : 0;
-        break;
       case 'ArrowUp':
         event.preventDefault();
-        activeIndex = activeIndex > 0 ? activeIndex - 1 : enabledOptions.length - 1;
+        if (!open) {
+          openedViaKeyboard = true;
+          open = true;
+        } else {
+          activeIndex = activeIndex > 0 ? activeIndex - 1 : enabledOptions.length - 1;
+        }
         break;
       case 'Enter':
       case ' ':
         event.preventDefault();
-        if (activeIndex >= 0 && activeIndex < enabledOptions.length) {
+        if (!open) {
+          openedViaKeyboard = true;
+          open = true;
+        } else if (activeIndex >= 0 && activeIndex < enabledOptions.length) {
           selectOption(enabledOptions[activeIndex]);
         }
         break;
       case 'Escape':
-        if (dismissByEscape()) {
+        if (open && dismissByEscape()) {
           event.preventDefault();
           focusTrigger();
         }
         break;
       case 'Tab':
-        // Tab always closes (focus is leaving the widget regardless),
+        // Tab leaves the widget — close (focus moves on via the default tab),
         // independent of closeOnEscape/closeOnClickOutside.
-        open = false;
-        activeIndex = -1;
+        if (open) {
+          open = false;
+          activeIndex = -1;
+        }
         break;
       case 'Home':
-        event.preventDefault();
-        activeIndex = 0;
+        if (open) {
+          event.preventDefault();
+          activeIndex = 0;
+        }
         break;
       case 'End':
-        event.preventDefault();
-        activeIndex = enabledOptions.length - 1;
+        if (open) {
+          event.preventDefault();
+          activeIndex = enabledOptions.length - 1;
+        }
         break;
     }
   }
@@ -512,7 +534,6 @@
           ? 'position: absolute; overflow-y: auto;'
           : 'display: none; position: absolute; overflow-y: auto;'}
       aria-labelledby={labelId}
-      onkeydown={handleListboxKeydown}
     >
       {#if open}
         {#if groups}

package/dist/primitives/Select/Select.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SelectProps } from './index';
+import type { SelectProps } from './index.js';
 declare function $$render<T extends string | number | boolean = string>(): {
     props: SelectProps<T>;
     exports: {};

package/dist/primitives/Select/index.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { SelectSlots, SelectVariants } from './select.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { SelectSlots, SelectVariants } from './select.variants.js';
 /**
  * Primitive value types accepted by Select / Combobox options.
  * Strings are the default; numbers and booleans cover form fields
@@ -323,4 +323,4 @@ export interface SelectMultipleProps<T extends SelectValue = string> extends Sel
  */
 export type SelectProps<T extends SelectValue = string> = SelectSingleProps<T> | SelectMultipleProps<T>;
 export { default as Select } from './Select.svelte';
-export { type SelectVariants, selectVariants } from './select.variants';
+export { type SelectVariants, selectVariants } from './select.variants.js';

package/dist/primitives/Select/index.js

@@ -1,2 +1,2 @@
 export { default as Select } from './Select.svelte';
-export { selectVariants } from './select.variants';
+export { selectVariants } from './select.variants.js';

package/dist/primitives/Select/select.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const selectVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const selectVariants: (props?: import("../../utils/variants.js").TVProps<{
     tier: {
         modify: {
             trigger: string;

package/dist/primitives/Select/select.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const selectVariants = tv({
     slots: {
         wrapper: ['flex flex-col w-full gap-1.5'],

package/dist/primitives/Separator/Separator.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SeparatorProps } from './index';
+import type { SeparatorProps } from './index.js';
 declare const Separator: import("svelte").Component<SeparatorProps, {}, "">;
 type Separator = ReturnType<typeof Separator>;
 export default Separator;

package/dist/primitives/Separator/index.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SeparatorVariants } from './separator.variants';
+import type { SeparatorVariants } from './separator.variants.js';
 /**
  * @description Visual divider for separating content sections. Supports horizontal and
  * vertical orientations with proper ARIA semantics.
@@ -42,4 +42,4 @@ export interface SeparatorProps extends SeparatorVariants, Omit<HTMLAttributes<H
     preset?: string;
 }
 export { default as Separator } from './Separator.svelte';
-export { type SeparatorVariants, separatorVariants } from './separator.variants';
+export { type SeparatorVariants, separatorVariants } from './separator.variants.js';

package/dist/primitives/Separator/index.js

@@ -1,2 +1,2 @@
 export { default as Separator } from './Separator.svelte';
-export { separatorVariants } from './separator.variants';
+export { separatorVariants } from './separator.variants.js';

package/dist/primitives/Separator/separator.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const separatorVariants: (props?: import("../../utils/variants").TVProps<{
+import { type VariantProps } from '../../utils/variants.js';
+export declare const separatorVariants: (props?: import("../../utils/variants.js").TVProps<{
     orientation: {
         horizontal: string;
         vertical: string;

package/dist/primitives/Separator/separator.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 // Separator is a purely visual primitive. Spacing belongs to the surrounding
 // layout (flex/grid gap, `space-y-*`, `space-x-*`) — not to the separator
 // itself. Pre-v1.0 we dropped the built-in margins that forced consumers to

package/dist/primitives/Sidebar/Sidebar.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SidebarProps } from './index';
+import type { SidebarProps } from './index.js';
 declare const Sidebar: import("svelte").Component<SidebarProps, {}, "open">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;

package/dist/primitives/Sidebar/index.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SidebarSlots, SidebarVariants } from './sidebar.variants';
+import type { SidebarSlots, SidebarVariants } from './sidebar.variants.js';
 /**
  * @description Sidebar primitive — fixed-position panel that is permanent on
  * desktop (≥1024px) and slides in as a backdropped overlay on mobile. Use
@@ -98,4 +98,4 @@ export interface SidebarProps extends Omit<HTMLAttributes<HTMLElement>, 'childre
     preset?: string;
 }
 export { default as Sidebar } from './Sidebar.svelte';
-export { type SidebarVariants, sidebarVariants } from './sidebar.variants';
+export { type SidebarVariants, sidebarVariants } from './sidebar.variants.js';

package/dist/primitives/Sidebar/index.js

@@ -1,2 +1,2 @@
 export { default as Sidebar } from './Sidebar.svelte';
-export { sidebarVariants } from './sidebar.variants';
+export { sidebarVariants } from './sidebar.variants.js';

package/dist/primitives/Sidebar/sidebar.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const sidebarVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const sidebarVariants: (props?: import("../../utils/variants.js").TVProps<{
     side: {
         left: {
             panel: string;

package/dist/primitives/Sidebar/sidebar.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const sidebarVariants = tv({
     slots: {
         backdrop: ['fixed inset-0 z-[var(--z-overlay)]', 'bg-surface-inverted/50 backdrop-blur-sm'],

package/dist/primitives/Skeleton/Skeleton.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SkeletonProps } from './index';
+import type { SkeletonProps } from './index.js';
 declare const Skeleton: import("svelte").Component<SkeletonProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/primitives/Skeleton/index.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { SkeletonSlots, SkeletonVariants } from './skeleton.variants';
+import type { SkeletonSlots, SkeletonVariants } from './skeleton.variants.js';
 /**
  * @description Placeholder loading animation that mimics content layout.
  * Use to reduce perceived loading time and prevent layout shift.
@@ -60,4 +60,4 @@ export interface SkeletonProps extends SkeletonVariants, HTMLAttributes<HTMLDivE
     preset?: string;
 }
 export { default as Skeleton } from './Skeleton.svelte';
-export { type SkeletonVariants, skeletonVariants } from './skeleton.variants';
+export { type SkeletonVariants, skeletonVariants } from './skeleton.variants.js';

package/dist/primitives/Skeleton/index.js

@@ -1,2 +1,2 @@
 export { default as Skeleton } from './Skeleton.svelte';
-export { skeletonVariants } from './skeleton.variants';
+export { skeletonVariants } from './skeleton.variants.js';