@urbicon-ui/blocks 6.3.1 → 6.3.6

package/dist/primitives/Combobox/combobox.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const comboboxVariants = tv({
     slots: {
         base: 'flex w-full flex-col gap-1.5',
@@ -44,11 +44,20 @@ export const comboboxVariants = tv({
             'transition-colors duration-[var(--blocks-duration-fast)]',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'
         ],
-        chevron: [
-            'absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none',
-            'text-text-tertiary w-4 h-4',
-            'transition-transform duration-[var(--blocks-duration-fast)]'
-        ]
+        // Chevron toggle button. The input opens on focus and can't "toggle
+        // closed" (re-clicking a focused field is a no-op), so the chevron is the
+        // discoverable open/close affordance. `tabindex={-1}` keeps it out of the
+        // tab order — the input is the single combobox tab stop — and an
+        // `onmousedown` preventDefault keeps focus on the input when it's clicked.
+        chevronButton: [
+            'absolute right-1.5 top-1/2 -translate-y-1/2',
+            'inline-flex items-center justify-center rounded-modify p-1',
+            'text-text-tertiary hover:text-text-primary cursor-pointer',
+            'transition-colors duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50',
+            'disabled:cursor-not-allowed disabled:hover:text-text-tertiary'
+        ],
+        chevron: ['w-4 h-4', 'transition-transform duration-[var(--blocks-duration-fast)]']
     },
     variants: {
         // 3-tier semantic radius for the Combobox input. Default `modify`.
@@ -59,7 +68,9 @@ export const comboboxVariants = tv({
         },
         size: {
             sm: {
-                input: 'h-8 px-3 pr-8 text-sm',
+                // `pointer-coarse:text-base` floors the input to 16px on touch-primary
+                // devices so iOS Safari doesn't auto-zoom (and never un-zoom) on focus.
+                input: 'h-8 px-3 pr-8 text-sm pointer-coarse:text-base',
                 option: 'px-2 py-1.5 text-sm min-h-[2rem]'
             },
             md: {

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { SelectValue } from '../Select/index';
-import type { ComboboxSlots, ComboboxVariants } from './combobox.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { SelectValue } from '../Select/index.js';
+import type { ComboboxSlots, ComboboxVariants } from './combobox.variants.js';
 /** A single combobox option with label, value, and optional disabled state. */
 export interface ComboboxOption<T extends SelectValue = string> {
     label: string;
@@ -131,4 +131,4 @@ export interface ComboboxProps<T extends SelectValue = string> extends ComboboxV
 /** Backwards-compatible alias for {@link ComboboxOption} (legacy name). */
 export type ComboboxOptionType<T extends SelectValue = string> = ComboboxOption<T>;
 export { default as Combobox } from './Combobox.svelte';
-export { type ComboboxVariants, comboboxVariants } from './combobox.variants';
+export { type ComboboxVariants, comboboxVariants } from './combobox.variants.js';

package/dist/primitives/Combobox/index.js

@@ -1,2 +1,2 @@
 export { default as Combobox } from './Combobox.svelte';
-export { comboboxVariants } from './combobox.variants';
+export { comboboxVariants } from './combobox.variants.js';

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

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

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

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { DialogIntent } from '../Dialog';
+import type { DialogIntent } from '../Dialog/index.js';
 /**
  * Intent applied to the confirm button. Reuses the standard intent palette
  * via {@link DialogIntent} (with `neutral` mapped to `primary` for visual

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

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

package/dist/primitives/Dialog/dialog.variants.d.ts

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

package/dist/primitives/Dialog/dialog.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const dialogVariants = tv({
     slots: {
         dialog: [

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
-import type { DialogSlots, DialogVariants } from './dialog.variants';
+import type { DialogSlots, DialogVariants } from './dialog.variants.js';
 /**
  * @description Overlay dialog built on native dialog element. Can be used as a simple
  * content-agnostic overlay or as a structured dialog with title, footer, and intent accent.
@@ -99,4 +99,4 @@ export type DialogPlacement = NonNullable<DialogVariants['placement']>;
  */
 export type DialogIntent = NonNullable<DialogVariants['intent']>;
 export { default as Dialog } from './Dialog.svelte';
-export { type DialogVariants, dialogVariants } from './dialog.variants';
+export { type DialogVariants, dialogVariants } from './dialog.variants.js';

package/dist/primitives/Dialog/index.js

@@ -1,2 +1,2 @@
 export { default as Dialog } from './Dialog.svelte';
-export { dialogVariants } from './dialog.variants';
+export { dialogVariants } from './dialog.variants.js';

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

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

package/dist/primitives/Drawer/drawer.variants.d.ts

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

package/dist/primitives/Drawer/drawer.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const drawerVariants = tv({
     slots: {
         dialog: [

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { HTMLDialogAttributes } from 'svelte/elements';
-import type { DrawerSlots, DrawerVariants } from './drawer.variants';
+import type { DrawerSlots, DrawerVariants } from './drawer.variants.js';
 /**
  * @description Slide-in panel overlay from any edge of the viewport.
  * Uses native dialog with focus trap, backdrop click dismiss, and Escape key support.
@@ -76,4 +76,4 @@ export interface DrawerProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     preset?: string;
 }
 export { default as Drawer } from './Drawer.svelte';
-export { type DrawerVariants, drawerVariants } from './drawer.variants';
+export { type DrawerVariants, drawerVariants } from './drawer.variants.js';

package/dist/primitives/Drawer/index.js

@@ -1,2 +1,2 @@
 export { default as Drawer } from './Drawer.svelte';
-export { drawerVariants } from './drawer.variants';
+export { drawerVariants } from './drawer.variants.js';

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

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

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

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

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InputSlots, InputVariants } from './input.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InputSlots, InputVariants } from './input.variants.js';
 /**
  * @description Text input with labels, validation states, icons, and clearable functionality.
  * Supports outlined, filled, and ghost visual variants with automatic ARIA linking.
@@ -95,4 +95,4 @@ export interface InputProps extends Omit<InputVariants, 'error'>, Omit<HTMLInput
     persistNamespace?: string;
 }
 export { default as Input } from './Input.svelte';
-export { type InputVariants, inputVariants } from './input.variants';
+export { type InputVariants, inputVariants } from './input.variants.js';

package/dist/primitives/Input/index.js

@@ -1,2 +1,2 @@
 export { default as Input } from './Input.svelte';
-export { inputVariants } from './input.variants';
+export { inputVariants } from './input.variants.js';

package/dist/primitives/Input/input.variants.d.ts

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

package/dist/primitives/Input/input.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const inputVariants = tv({
     slots: {
         wrapper: ['flex flex-col w-full gap-1.5'],
@@ -54,13 +54,17 @@ export const inputVariants = tv({
         },
         size: {
             xs: {
-                base: 'h-7 px-2 text-xs',
+                // `pointer-coarse:text-base` floors the font to 16px on touch-primary
+                // devices (iPhone/iPad) — below 16px iOS Safari auto-zooms the field on
+                // focus and never restores the zoom. Desktop keeps the designed 12px.
+                base: 'h-7 px-2 text-xs pointer-coarse:text-base',
                 iconContainer: 'w-7',
                 iconButton: 'p-0.5 [&_svg]:w-3 [&_svg]:h-3',
                 iconDecoration: '[&_svg]:w-3 [&_svg]:h-3'
             },
             sm: {
-                base: 'h-8 px-3 text-sm',
+                // See `xs` — floor to 16px on touch to avoid iOS Safari focus-zoom.
+                base: 'h-8 px-3 text-sm pointer-coarse:text-base',
                 iconContainer: 'w-8',
                 iconButton: 'p-0.5 [&_svg]:w-3.5 [&_svg]:h-3.5',
                 iconDecoration: '[&_svg]:w-3.5 [&_svg]:h-3.5'

package/dist/primitives/Menu/Menu.svelte

@@ -62,6 +62,10 @@
   const tierCtx = getTierContext();
   const effectiveTier = $derived(tier ?? tierCtx?.tier ?? 'commit');
 
+  // The element that had focus when the menu opened (normally the trigger
+  // button) — captured in the open effect below and refocused by `dismiss()`
+  // on Escape / selection. Not bound to Popover's `triggerElement`; Popover
+  // anchors + excludes via its own internal trigger-wrapper.
   let triggerRef = $state<HTMLElement>();
   let panelRef = $state<HTMLElement>();
   let openSubMenus = $state<Set<string>>(new Set());
@@ -207,12 +211,31 @@
     items[items.length - 1]?.focus();
   }
 
-  // When the menu opens, move focus into it (W3C menu pattern: focus on
-  // the first item). Skipping this step would leave focus on the trigger
-  // and arrow-key navigation would not work until the user clicked.
+  // When the menu opens, move focus into it (W3C menu pattern) so arrow-key
+  // navigation works immediately — otherwise focus would stay on the trigger
+  // and the panel keydown handler would never receive keys.
+  //
+  // BUT focusing the first *item* paints a `:focus-visible` ring on it. That
+  // ring is desirable for keyboard users (they navigated here) and jarring
+  // for pointer users (a tap shouldn't pre-highlight an entry as if selected
+  // — the stray green ring report). So we branch on the opener's modality:
+  //   • keyboard-open (trigger matches `:focus-visible`) → focus first item
+  //   • pointer-open                                     → focus the ring-less
+  //     panel container; arrows still work (handlePanelKeydown falls back to
+  //     focusFirstItem / focusLastItem when no item is focused yet).
+  //
+  // We also capture the opener element here so `dismiss()` can restore focus
+  // to the trigger on Escape / selection (the previous `triggerRef` was never
+  // assigned, so that restore was a silent no-op).
   $effect(() => {
     if (!open) return;
-    queueMicrotask(() => focusFirstItem());
+    const opener = document.activeElement as HTMLElement | null;
+    if (opener && opener !== document.body) triggerRef = opener;
+    const openedViaKeyboard = opener?.matches?.(':focus-visible') ?? false;
+    queueMicrotask(() => {
+      if (openedViaKeyboard) focusFirstItem();
+      else panelRef?.focus();
+    });
   });
 
   function itemSizeForDepth(_depth: number): 'sm' | 'md' | 'lg' {
@@ -289,20 +312,26 @@
   // keys to here via their own onkeydown handler.
   function handlePanelKeydown(e: KeyboardEvent) {
     const target = e.target as HTMLElement | null;
-    const focused =
+    const active = document.activeElement as HTMLElement | null;
+    // Only treat a real menuitem as the navigation anchor. When focus is on
+    // the panel container itself (pointer-open), `focusedItem` is null and
+    // ArrowDown/Up fall back to focusing the first/last item.
+    const focusedItem =
       target?.getAttribute('role') === 'menuitem'
         ? target
-        : (document.activeElement as HTMLElement | null);
+        : active?.getAttribute('role') === 'menuitem'
+          ? active
+          : null;
 
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
-        if (focused) focusNextItem(focused);
+        if (focusedItem) focusNextItem(focusedItem);
         else focusFirstItem();
         break;
       case 'ArrowUp':
         e.preventDefault();
-        if (focused) focusPrevItem(focused);
+        if (focusedItem) focusPrevItem(focusedItem);
         else focusLastItem();
         break;
       case 'Home':
@@ -386,7 +415,6 @@
   <Popover
     bind:open
     placement={placement as import('../../utils/floating').Placement}
-    bind:triggerElement={triggerRef}
     {usePortal}
     autoTrigger={false}
     unstyled
@@ -399,9 +427,12 @@
       role="menu"
       tabindex={-1}
       onkeydown={handlePanelKeydown}
-      class={unstyled
-        ? (slotClasses?.content ?? '')
-        : styles.content({ class: slotClasses?.content })}
+      class={[
+        unstyled ? (slotClasses?.content ?? '') : styles.content({ class: slotClasses?.content }),
+        // Panel is programmatically focused on pointer-open as the ring-less
+        // anchor for arrow-key nav — suppress any UA outline on the container.
+        'focus:outline-none'
+      ]}
     >
       {#if customHeader}
         <div

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

@@ -1,4 +1,4 @@
-import type { MenuItemType, MenuProps } from './index';
+import type { MenuItemType, MenuProps } from './index.js';
 declare function $$render<TItem extends MenuItemType = MenuItemType>(): {
     props: MenuProps<TItem>;
     exports: {};

package/dist/primitives/Menu/MenuSubmenu.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { MenuItemType } from './index';
+import type { MenuItemType } from './index.js';
 type $$ComponentProps = {
     /** Stable id for sub-menu bookkeeping. */
     id: string;

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

@@ -1,11 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { ButtonVariants, MenuVariants } from '..';
-import type { AnimationProps } from '../../utils';
-import type { Placement } from '../../utils/floating';
-import type { InteractiveTier } from '../../utils/tier-context';
-import type { MenuSlots } from './menu.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { ButtonVariants, MenuVariants } from '../index.js';
+import type { AnimationProps } from '../../utils/index.js';
+import type { Placement } from '../../utils/floating.js';
+import type { InteractiveTier } from '../../utils/tier-context.js';
+import type { MenuSlots } from './menu.variants.js';
 /**
  * @description Action menu (`role="menu"`) triggered by a button. Items are
  * verbs the user can invoke — Edit, Delete, Share, Export — and dispatch an
@@ -278,5 +278,5 @@ export { default as MenuDivider } from './MenuDivider.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
 export { default as MenuSection } from './MenuSection.svelte';
 export { default as MenuSubmenu } from './MenuSubmenu.svelte';
-export type { MenuContext, MenuRegistryItem } from './menu.context';
-export { type MenuIconVariants, type MenuVariants, menuIconVariants, menuVariants } from './menu.variants';
+export type { MenuContext, MenuRegistryItem } from './menu.context.js';
+export { type MenuIconVariants, type MenuVariants, menuIconVariants, menuVariants } from './menu.variants.js';

package/dist/primitives/Menu/index.js

@@ -3,4 +3,4 @@ export { default as MenuDivider } from './MenuDivider.svelte';
 export { default as MenuItem } from './MenuItem.svelte';
 export { default as MenuSection } from './MenuSection.svelte';
 export { default as MenuSubmenu } from './MenuSubmenu.svelte';
-export { menuIconVariants, menuVariants } from './menu.variants';
+export { menuIconVariants, menuVariants } from './menu.variants.js';

package/dist/primitives/Menu/menu.context.d.ts

@@ -1,5 +1,5 @@
-import type { ButtonVariants } from '../Button/button.variants';
-import type { MenuVariants } from './menu.variants';
+import type { ButtonVariants } from '../Button/button.variants.js';
+import type { MenuVariants } from './menu.variants.js';
 /**
  * Registration entry for a declarative MenuItem.
  * Used internally to support sub-menu nesting bookkeeping.
@@ -15,11 +15,11 @@ export type MenuContext = {
     rootId: string;
     size: MenuVariants['itemSize'];
     intent: ButtonVariants['intent'];
-    mint: import('../../mint').MintProp | undefined;
+    mint: import('../../mint/index.js').MintProp | undefined;
     disabled: boolean;
     unstyled?: boolean;
     slotClasses?: Partial<Record<'base' | 'trigger' | 'triggerText' | 'chevron' | 'content' | 'header' | 'section' | 'divider' | 'items' | 'item' | 'indicator' | 'submenu' | 'footer', string>>;
-    styles: ReturnType<typeof import('./menu.variants').menuVariants>;
+    styles: ReturnType<typeof import('./menu.variants.js').menuVariants>;
     /**
      * Called by an item after its `onSelect` callback has fired. Closes the
      * menu and restores focus to the trigger unless `keepOpen` is true.

package/dist/primitives/Menu/menu.context.js

@@ -1,5 +1,5 @@
 import { createContext } from 'svelte';
-import { createOptionalContext } from '../../utils/optional-context';
+import { createOptionalContext } from '../../utils/optional-context.js';
 const [getMenuContext, setMenuContext] = createContext();
 export { getMenuContext, setMenuContext };
 // MenuParentId is *optional* — only MenuSubmenu sets it. Top-level

package/dist/primitives/Menu/menu.variants.d.ts

@@ -1,5 +1,5 @@
-import { type SlotNames, type VariantProps } from '../../utils/variants';
-export declare const menuVariants: (props?: import("../../utils/variants").TVProps<{
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const menuVariants: (props?: import("../../utils/variants.js").TVProps<{
     open: {
         true: {
             base: string;
@@ -234,7 +234,7 @@ export declare const menuVariants: (props?: import("../../utils/variants").TVPro
         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 menuIconVariants: (props?: import("../../utils/variants").TVProps<{
+export declare const menuIconVariants: (props?: import("../../utils/variants.js").TVProps<{
     type: {
         chevron: string;
         checkmark: string;

package/dist/primitives/Menu/menu.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const menuVariants = tv({
     slots: {
         base: ['relative inline-block'],

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

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

package/dist/primitives/Pagination/PaginationItem.svelte.d.ts

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

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { MintProp } from '../../mint';
-import type { InteractiveTier } from '../../utils/tier-context';
-import type { PaginationSlots, PaginationVariants } from './pagination.variants';
+import type { MintProp } from '../../mint/index.js';
+import type { InteractiveTier } from '../../utils/tier-context.js';
+import type { PaginationSlots, PaginationVariants } from './pagination.variants.js';
 export interface PaginationPageItem {
     label: string;
     value: number;
@@ -141,4 +141,4 @@ export interface PaginationItemProps extends Omit<HTMLAttributes<HTMLButtonEleme
 }
 export { default as Pagination } from './Pagination.svelte';
 export { default as PaginationItem } from './PaginationItem.svelte';
-export { type PaginationVariants, paginationVariants } from './pagination.variants';
+export { type PaginationVariants, paginationVariants } from './pagination.variants.js';

package/dist/primitives/Pagination/index.js

@@ -1,3 +1,3 @@
 export { default as Pagination } from './Pagination.svelte';
 export { default as PaginationItem } from './PaginationItem.svelte';
-export { paginationVariants } from './pagination.variants';
+export { paginationVariants } from './pagination.variants.js';

package/dist/primitives/Pagination/pagination.variants.d.ts

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

package/dist/primitives/Pagination/pagination.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const paginationVariants = tv({
     slots: {
         base: ['flex items-center w-full', 'gap-1'],

package/dist/primitives/Popover/Popover.svelte

@@ -104,8 +104,21 @@
   // Manual mode disables the browser's automatic dismiss entirely, which
   // is the only way to veto Escape or outside-click selectively — the
   // `beforetoggle` event is intentionally not cancelable when closing.
+  //
+  // `autoTrigger=false` (external trigger) ALSO forces manual mode. Native
+  // `popover="auto"` light-dismiss treats the external trigger as "outside"
+  // (the browser only exempts a real `popovertarget` invoker, which we do
+  // not wire through Floating UI). So a tap on an open external trigger
+  // light-dismisses the popover on `pointerdown`, then the consumer's own
+  // `onclick` toggle re-opens it — the close-then-reopen flicker seen on
+  // mobile. Manual mode's outside-pointerdown handler instead excludes the
+  // trigger via `contains`, so the consumer's toggle is the single source
+  // of truth. Deterministic across browsers; no reliance on light-dismiss
+  // timing. Consumers with an external CLICK trigger (Menu, DatePicker)
+  // get a clean toggle; hover-driven external triggers (Calendar event
+  // popovers) are unaffected since they never relied on light-dismiss.
   const popoverMode = $derived<'auto' | 'manual'>(
-    closeOnEscape && closeOnClickOutside ? 'auto' : 'manual'
+    autoTrigger && closeOnEscape && closeOnClickOutside ? 'auto' : 'manual'
   );
 
   // ── Native popover state sync (popover="auto" mode only) ──
@@ -127,17 +140,6 @@
     return () => document.removeEventListener('keydown', handleEscape, true);
   });
 
-  // For external triggers (autoTrigger=false), track pointerdown to coordinate
-  // with light dismiss — prevents toggle-on-click when the trigger click causes dismiss.
-  $effect(() => {
-    if (!effectiveTriggerElement || autoTrigger) return;
-    function handlePointerDown() {
-      if (open) dismissedByTrigger = true;
-    }
-    effectiveTriggerElement.addEventListener('pointerdown', handlePointerDown);
-    return () => effectiveTriggerElement.removeEventListener('pointerdown', handlePointerDown);
-  });
-
   // Listen for native popover toggle events (light dismiss, Escape, programmatic).
   // Only relevant in `auto` mode — in manual mode the browser doesn't fire
   // toggle events for outside clicks or Escape, so the dismiss callbacks

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

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

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

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { Placement } from '../../utils/floating';
-import type { PopoverVariants } from './popover.variants';
+import type { Placement } from '../../utils/floating.js';
+import type { PopoverVariants } from './popover.variants.js';
 /**
  * @description Floating panel anchored to a trigger element. Uses the native Popover API
  * for top-layer rendering, light dismiss, and Escape handling. Floating UI provides
@@ -111,4 +111,4 @@ export interface PopoverProps extends PopoverVariants, Omit<HTMLAttributes<HTMLD
     preset?: string;
 }
 export { default as Popover } from './Popover.svelte';
-export { type PopoverVariants, popoverVariants } from './popover.variants';
+export { type PopoverVariants, popoverVariants } from './popover.variants.js';

package/dist/primitives/Popover/index.js

@@ -1,2 +1,2 @@
 export { default as Popover } from './Popover.svelte';
-export { popoverVariants } from './popover.variants';
+export { popoverVariants } from './popover.variants.js';

package/dist/primitives/Popover/popover.variants.d.ts

@@ -1,5 +1,5 @@
-import { type VariantProps } from '../../utils/variants';
-export declare const popoverVariants: (props?: import("../../utils/variants").TVProps<{
+import { type VariantProps } from '../../utils/variants.js';
+export declare const popoverVariants: (props?: import("../../utils/variants.js").TVProps<{
     size: {
         sm: string;
         md: string;

package/dist/primitives/Popover/popover.variants.js

@@ -1,4 +1,4 @@
-import { tv } from '../../utils/variants';
+import { tv } from '../../utils/variants.js';
 export const popoverVariants = tv({
     // tier: contain — floating panel surface.
     base: [

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

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

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ProgressSlots, ProgressVariants } from './progress.variants';
+import type { ProgressSlots, ProgressVariants } from './progress.variants.js';
 /**
  * @description Progress indicator for determinate and indeterminate loading states.
  * Supports linear bar and circular ring variants with semantic intents and animation.
@@ -61,4 +61,4 @@ export interface ProgressProps extends ProgressVariants, Omit<HTMLAttributes<HTM
     preset?: string;
 }
 export { default as Progress } from './Progress.svelte';
-export { type ProgressVariants, progressVariants } from './progress.variants';
+export { type ProgressVariants, progressVariants } from './progress.variants.js';