@urbicon-ui/blocks 6.21.0 → 6.21.2

package/dist/primitives/Menu/Menu.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" generics="TItem extends MenuItemType = MenuItemType">
+  import { tick } from 'svelte';
   import { useBlocksI18n } from '../..';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { Button, menuVariants, type MenuVariants } from '..';
@@ -27,11 +28,13 @@
     disabled = false,
     loading = false,
     open = $bindable(false),
+    onOpenChange,
     id: idProp,
     placement = 'bottom-start',
     syncWidth = true,
     usePortal = true,
     customTrigger,
+    contextTrigger,
     customItem,
     customHeader,
     customFooter,
@@ -71,6 +74,31 @@
   let openSubMenus = $state<Set<string>>(new Set());
   const childrenMode = $derived(!!children);
 
+  // ── Context-menu (right-click) anchoring ───────────────────────────────
+  // A context menu has no trigger button — it opens at the cursor. Floating UI
+  // anchors to an element, not a point, so a 0×0 fixed-position element is
+  // parked at the click coordinates and handed to Popover as the trigger.
+  let cursorAnchor = $state<HTMLElement>();
+  let contextX = $state(0);
+  let contextY = $state(0);
+
+  async function handleContextMenu(event: MouseEvent) {
+    if (disabled || loading) return;
+    // Suppress the native browser menu and anchor ours at the cursor.
+    event.preventDefault();
+    contextX = event.clientX;
+    contextY = event.clientY;
+    // Re-open at the new spot even if it was already open elsewhere: close and
+    // let Popover tear down (await tick) before reopening, so it re-reads the
+    // moved anchor rect. A synchronous setOpen(false)+setOpen(true) batches into
+    // no net change and would strand the menu at the previous cursor position.
+    if (open) {
+      setOpen(false);
+      await tick();
+    }
+    setOpen(true);
+  }
+
   // Map of declarative MenuItems by id — populated via the context's
   // `registerItem` / `unregisterItem` hooks. Used to debug + (in future)
   // power type-ahead search; the keyboard model itself walks DOM-focusable
@@ -127,13 +155,25 @@
   }
 
   // ── Open / close lifecycle ─────────────────────────────────────────────
+  // Single mutation point for internally-driven open changes, so
+  // `onOpenChange` fires exactly once per transition. Popover-owned dismiss
+  // paths (outside click) mutate `open` via `bind:open` instead and report
+  // through the forwarded Popover `onOpenChange` — the Escape path can't
+  // double-fire because `handlePanelKeydown` calls `preventDefault()`,
+  // which Popover's document-level Escape listener honors.
+  function setOpen(next: boolean) {
+    if (open === next) return;
+    open = next;
+    onOpenChange?.(next);
+  }
+
   function toggle() {
     if (disabled || loading) return;
-    open = !open;
+    setOpen(!open);
   }
 
   function dismiss() {
-    open = false;
+    setOpen(false);
     triggerRef?.focus();
   }
 
@@ -363,6 +403,26 @@
     .join(' ')}
   {...restProps}
 >
+  {#if contextTrigger}
+    <!-- Right-click target. `display: contents` drops the wrapper from layout so
+         the consumer's own element controls sizing; the contextmenu event still
+         bubbles to the handler. -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div class="contents" oncontextmenu={handleContextMenu}>
+      {@render contextTrigger()}
+    </div>
+    <!-- 0×0 anchor parked at the cursor for Popover to position the menu against. -->
+    <div
+      bind:this={cursorAnchor}
+      aria-hidden="true"
+      style:position="fixed"
+      style:left="{contextX}px"
+      style:top="{contextY}px"
+      style:width="0"
+      style:height="0"
+    ></div>
+  {/if}
+
   {#snippet triggerContent()}
     {#if customTrigger}
       {@render customTrigger(toggle, open, dismiss)}
@@ -414,13 +474,15 @@
   -->
   <Popover
     bind:open
+    onOpenChange={(o) => onOpenChange?.(o)}
     placement={placement as import('../../utils/floating').Placement}
     {usePortal}
     autoTrigger={false}
     unstyled
-    syncMinWidth={syncWidth}
+    syncMinWidth={contextTrigger ? false : syncWidth}
     offsetDistance={effectiveTier === 'commit' ? 8 : 4}
-    trigger={triggerContent}
+    trigger={contextTrigger ? undefined : triggerContent}
+    triggerElement={contextTrigger ? cursorAnchor : undefined}
   >
     <div
       bind:this={panelRef}

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

@@ -119,6 +119,12 @@ export interface MenuSpecificProps<TItem extends MenuItemType = MenuItemType> {
      * @default false
      */
     open?: boolean;
+    /**
+     * Fires when the menu opens or closes from user interaction (trigger
+     * click, item activation, Escape, Tab-out, outside click). Receives the
+     * new open state. Not called when the consumer writes `bind:open` directly.
+     */
+    onOpenChange?: (open: boolean) => void;
     /**
      * Button variant applied to the default trigger button.
      * @default 'outlined'
@@ -252,6 +258,25 @@ export interface MenuCustomSlots<TItem extends MenuItemType = MenuItemType> {
      * `aria-expanded={open}` + `aria-haspopup="menu"` for ARIA correctness.
      */
     customTrigger?: Snippet<[() => void, boolean, () => void]>;
+    /**
+     * Turn the menu into a **context menu**: instead of a trigger button, the
+     * snippet you pass becomes a right-click target. A `contextmenu` (right-click
+     * or long-press) on it opens the menu at the cursor position — the native
+     * browser context menu is suppressed. Keyboard navigation, dismissal and
+     * item selection behave exactly as in the dropdown menu; on dismiss, focus
+     * returns to wherever it was. Mutually exclusive with `customTrigger`/the
+     * default trigger button (when set, no trigger button renders).
+     *
+     * @example
+     * ```svelte
+     * <Menu {items} contextTrigger>
+     *   {#snippet contextTrigger()}
+     *     <div class="rounded-modify border border-border-subtle p-8">Right-click me</div>
+     *   {/snippet}
+     * </Menu>
+     * ```
+     */
+    contextTrigger?: Snippet;
     /**
      * Custom per-item content. **Render visible content only** — the outer
      * `role="menuitem"` button is provided by Menu and handles the click /

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

@@ -1,69 +1,14 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const menuVariants: (props?: import("../../utils/variants.js").TVProps<{
-    open: {
-        true: {
-            base: string;
-        };
-    };
-    syncWidth: {
-        true: {
-            content: string;
-        };
-        false: {
-            content: string;
-        };
-    };
-    itemSize: {
-        sm: {
-            item: string;
-        };
-        md: {
-            item: string;
-        };
-        lg: {
-            item: string;
-        };
-    };
-    disabled: {
-        true: {
-            item: string;
-        };
-    };
-    placement: {
-        'bottom-start': {};
-        bottom: {};
-        'bottom-end': {};
-        'top-start': {};
-        top: {};
-        'top-end': {};
-    };
-    chevronAnimation: {
-        rotate: {
-            chevron: string;
-        };
-        translate: {
-            chevron: string;
-        };
-        fade: {
-            chevron: string;
-        };
-        none: {};
-    };
-    usePortal: {
-        true: {
-            content: string;
-        };
-        false: {};
-    };
-    tier: {
-        commit: {
-            content: string;
-        };
-        modify: {
-            content: string;
-        };
-    };
-}> | undefined) => {
+export declare const menuVariants: ((props?: {
+    open?: boolean | undefined;
+    syncWidth?: boolean | undefined;
+    itemSize?: "sm" | "md" | "lg" | undefined;
+    disabled?: boolean | undefined;
+    placement?: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+    chevronAnimation?: "rotate" | "translate" | "none" | "fade" | undefined;
+    usePortal?: boolean | undefined;
+    tier?: "commit" | "modify" | undefined;
+} | undefined) => {
     base: (props?: ({
         open?: boolean | undefined;
         syncWidth?: boolean | undefined;
@@ -74,8 +19,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     trigger: (props?: ({
         open?: boolean | undefined;
@@ -87,8 +31,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     triggerText: (props?: ({
         open?: boolean | undefined;
@@ -100,8 +43,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     chevron: (props?: ({
         open?: boolean | undefined;
@@ -113,8 +55,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     content: (props?: ({
         open?: boolean | undefined;
@@ -126,8 +67,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     header: (props?: ({
         open?: boolean | undefined;
@@ -139,8 +79,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     section: (props?: ({
         open?: boolean | undefined;
@@ -152,8 +91,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     divider: (props?: ({
         open?: boolean | undefined;
@@ -165,8 +103,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     items: (props?: ({
         open?: boolean | undefined;
@@ -178,8 +115,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     item: (props?: ({
         open?: boolean | undefined;
@@ -191,8 +127,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     indicator: (props?: ({
         open?: boolean | undefined;
@@ -204,8 +139,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     submenu: (props?: ({
         open?: boolean | undefined;
@@ -217,8 +151,7 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
     footer: (props?: ({
         open?: boolean | undefined;
@@ -230,16 +163,19 @@ export declare const menuVariants: (props?: import("../../utils/variants.js").TV
         usePortal?: boolean | undefined;
         tier?: "commit" | "modify" | undefined;
     } & {
-        class?: 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;
-        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;
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
 };
-export declare const menuIconVariants: (props?: import("../../utils/variants.js").TVProps<{
+export declare const menuIconVariants: ((props?: import("../../utils/variants.js").TVProps<{
     type: {
         chevron: string;
         checkmark: string;
     };
-}> | undefined) => string;
+}> | undefined) => string) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
+};
 export type MenuVariants = VariantProps<typeof menuVariants>;
 export type MenuIconVariants = VariantProps<typeof menuIconVariants>;
 /** Slot names derived from the tv() config — single source of truth for slotClasses. */

package/dist/primitives/Pagination/Pagination.svelte

@@ -34,6 +34,7 @@
     nextIcon,
     firstIcon,
     lastIcon,
+    renderItem,
     itemsPerPage = 10,
     totalItems,
     startItem,
@@ -323,19 +324,33 @@
 
       {#if showNumbers}
         {#each visiblePageNumbers as page (page)}
-          <PaginationItem
-            {size}
-            {variant}
-            {intent}
-            {tier}
-            {page}
-            active={page === currentPage}
-            disabled={disabled || loading}
-            onPageClick={goToPage(page)}
-            {mint}
-          >
-            {page}
-          </PaginationItem>
+          {#if renderItem}
+            {@render renderItem({
+              page,
+              active: page === currentPage,
+              disabled: disabled || loading,
+              size,
+              variant,
+              intent,
+              tier,
+              mint,
+              select: goToPage(page)
+            })}
+          {:else}
+            <PaginationItem
+              {size}
+              {variant}
+              {intent}
+              {tier}
+              {page}
+              active={page === currentPage}
+              disabled={disabled || loading}
+              onPageClick={goToPage(page)}
+              {mint}
+            >
+              {page}
+            </PaginationItem>
+          {/if}
         {/each}
       {/if}
 

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

@@ -10,6 +10,33 @@ export interface PaginationPageItem {
     active?: boolean;
     disabled?: boolean;
 }
+/**
+ * Context handed to the `renderItem` snippet for a single numbered page button.
+ * Bundles the page number, its active/disabled state, the style props forwarded
+ * from the Pagination (so a custom item stays visually consistent), and a
+ * `select` callback that changes the page (guarded against disabled / no-op /
+ * out-of-range internally).
+ */
+export interface PaginationItemContext {
+    /** The 1-based page number this item represents. */
+    page: number;
+    /** Whether this item is the currently active page. */
+    active: boolean;
+    /** Whether the item is inert (component `disabled` or `loading`). */
+    disabled: boolean;
+    /** Button size forwarded from the Pagination props. */
+    size: 'sm' | 'md' | 'lg';
+    /** Button variant forwarded from the Pagination props. */
+    variant: 'outlined' | 'filled' | 'ghost';
+    /** Semantic intent forwarded from the Pagination props. */
+    intent: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Semantic radius tier forwarded from the Pagination props. */
+    tier?: InteractiveTier;
+    /** Micro-interaction preset forwarded from the Pagination props. */
+    mint: MintProp;
+    /** Navigate to this page. No-op when disabled, already active, or out of range. */
+    select: () => void;
+}
 /**
  * @description Navigation control for paged data sets.
  * Supports multiple layouts, intents, button variants, and configurable ellipsis behaviour.
@@ -69,6 +96,23 @@ export interface PaginationProps extends Omit<PaginationVariants, 'disabled' | '
     firstIcon?: Snippet;
     /** Custom icon rendered inside the "Last" button. */
     lastIcon?: Snippet;
+    /**
+     * Render each numbered page button yourself. Receives a {@link PaginationItemContext}
+     * with the page number, its active/disabled state, the forwarded style props
+     * (size, variant, intent, tier, mint) and a `select` callback. Only affects the
+     * numbered page buttons in the default layout — prev/next/first/last keep their
+     * own icon snippets, and the ellipsis is unaffected.
+     *
+     * @example
+     * ```svelte
+     * <Pagination {currentPage} {totalPages} {onPageChange}>
+     *   {#snippet renderItem({ page, active, disabled, select })}
+     *     <button class:active onclick={select} {disabled}>{page}</button>
+     *   {/snippet}
+     * </Pagination>
+     * ```
+     */
+    renderItem?: Snippet<[PaginationItemContext]>;
     /** Items shown per page. Used by the table layout to compute "Showing X to Y of Z". */
     itemsPerPage?: number;
     /** Total number of items across all pages. Used by the table layout info text. */