@urbicon-ui/blocks 6.21.0 → 6.21.2

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

@@ -9,53 +9,27 @@ export interface ComboboxOption<T extends SelectValue = string> {
     value: T;
     disabled?: boolean;
 }
+/** A labelled group of combobox options (parity with Select's `groups`). */
+export interface ComboboxGroup<T extends SelectValue = string> {
+    label: string;
+    options: ComboboxOption<T>[];
+}
 /**
- * @description Searchable menu (autocomplete) combining a text input with a
- * filterable option list. Implements the ARIA combobox pattern with
- * keyboard navigation, custom filtering, and two-way bindable state.
- *
- * @tag form
- * @related Select
- * @related Input
- * @related Menu
- *
- * @example
- * ```svelte
- * <Combobox
- *   options={[
- *     { label: 'Apple', value: 'apple' },
- *     { label: 'Banana', value: 'banana' },
- *     { label: 'Cherry', value: 'cherry' }
- *   ]}
- *   bind:value={selected}
- *   placeholder="Search fruit…"
- * />
- * ```
- *
- * @example Numeric IDs — the generic value type keeps `value` typed as `number`
- * ```svelte
- * <Combobox
- *   options={tenants.map((t) => ({ label: t.name, value: t.id }))}
- *   bind:value={tenantId}
- * />
- * ```
- *
- * @example
- * ```svelte
- * <Combobox
- *   options={countries}
- *   bind:value={country}
- *   filter={(option, query) => option.label.toLowerCase().startsWith(query.toLowerCase())}
- *   clearable
- *   size="lg"
- * />
- * ```
+ * Shared props for both single- and multi-select Combobox modes. The
+ * mode-specific shapes (`value`, `onValueChange`, and the multi-only tag props)
+ * live on {@link ComboboxSingleProps} / {@link ComboboxMultipleProps} and narrow
+ * against `multiple`.
  */
-export interface ComboboxProps<T extends SelectValue = string> extends ComboboxVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+interface ComboboxBaseProps<T extends SelectValue = string> extends ComboboxVariants, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Array of selectable options. Each needs a unique `value`. */
-    options: ComboboxOption<T>[];
-    /** Currently selected value. Supports `bind:value` for two-way binding. */
-    value?: T | null;
+    options?: ComboboxOption<T>[];
+    /**
+     * Grouped options with section labels, at parity with Select. Takes precedence
+     * over `options` when set. Filtering runs per group; groups whose options all
+     * filter out are hidden, and keyboard navigation flows across the flattened,
+     * still-visible options exactly as it does for a flat list.
+     */
+    groups?: ComboboxGroup<T>[];
     /** Current search query text. Supports `bind:query` for external control (e.g. server-side filtering). */
     query?: string;
     /** Placeholder shown when the input is empty. @default 'Search…' */
@@ -66,22 +40,49 @@ export interface ComboboxProps<T extends SelectValue = string> extends ComboboxV
     helper?: string;
     /** Error message — replaces helper text and flags the field as invalid. */
     error?: string;
-    /** Marks the field as required. Adds the asterisk on the label. @default false */
+    /**
+     * Marks the field as required. Adds the asterisk on the label. @default false
+     *
+     * In multi-select mode this is visual only — the transient search input
+     * carries no native `required` (it is cleared after each pick), so enforce a
+     * minimum selection in your submit handler.
+     */
     required?: boolean;
-    /** Custom filter replacing the built-in case-insensitive label match. Return `true` to include an option. */
+    /** Custom filter replacing the built-in case-insensitive label match. Return `true` to include an option. Ignored when `queryFn` is set (the server filters). */
     filter?: (option: ComboboxOption<T>, query: string) => boolean;
+    /**
+     * Server-side search (analogous to the Table remote-mode API). When set, the
+     * Combobox stops filtering client-side and instead calls `queryFn` — debounced
+     * by {@link debounceMs} — on each query change, replacing the option list with
+     * the resolved result. The `AbortSignal` is aborted when a newer query
+     * supersedes an in-flight request, so a slow stale response never clobbers a
+     * fresh one. Aborted rejections are swallowed; other rejections leave the
+     * previous options in place (and warn in dev). `options`/`groups` are ignored
+     * in this mode. The selected option's label is cached so it survives result
+     * sets that no longer contain it.
+     */
+    queryFn?: (query: string, signal: AbortSignal) => Promise<ComboboxOption<T>[]>;
+    /** Debounce applied to `queryFn` in milliseconds. @default 250 */
+    debounceMs?: number;
+    /** Text shown in the listbox while an async `queryFn` request is in flight. @default 'Loading…' */
+    loadingText?: string;
     /** Show a clear button when a value is selected. Click or press Escape to reset. @default false */
     clearable?: boolean;
     /** Disable the entire combobox. @default false */
     disabled?: boolean;
-    /** Shared `name` for a hidden input for native form submission. */
+    /** Shared `name` for a hidden input for native form submission. In multi-select mode one hidden input is emitted per selected value. */
     name?: string;
     /** Text displayed when the filter produces no matches. @default 'No results found' */
     noResultsText?: string;
-    /** Fires after the selected value changes. Receives the new value or `null` on clear. */
-    onValueChange?: (value: T | null) => void;
     /** Controls the open state of the listbox. Supports `bind:open`. @default false */
     open?: boolean;
+    /**
+     * Fires when the listbox opens or closes from user interaction (focus,
+     * typing, chevron toggle, selection, Escape, outside click). Receives the
+     * new open state — use it e.g. to lazy-load options on first open. Not
+     * called when the consumer writes `bind:open` directly.
+     */
+    onOpenChange?: (open: boolean) => void;
     /** Custom option renderer. Receives the option and whether it is selected. */
     customOption?: Snippet<[ComboboxOption<T>, boolean]>;
     /**
@@ -115,8 +116,9 @@ export interface ComboboxProps<T extends SelectValue = string> extends ComboboxV
     /** Remove all default tv() classes — only user-provided classes apply. @default false */
     unstyled?: boolean;
     /** Per-slot class overrides merged with tv() styles. Slots: base | label | requiredMark |
-     *  inputWrapper | input | message | hint | listbox | option | optionActive | optionSelected |
-     *  noResults | clear | chevron */
+     *  inputWrapper | input | message | helper | listbox | option | optionActive | optionSelected |
+     *  group | groupLabel | loading | noResults | clear | chevron | control | search | tag |
+     *  tagLabel | tagRemove */
     slotClasses?: Partial<Record<ComboboxSlots, string>>;
     /**
      * Apply a named preset registered via `<BlocksProvider presets={{ Combobox: {...} }}>`.
@@ -128,6 +130,119 @@ export interface ComboboxProps<T extends SelectValue = string> extends ComboboxV
     /** Deterministic HTML `id` for the component. Auto-generated when omitted. */
     id?: string;
 }
+/**
+ * Single-select arm (the default). `value` is `T | null`, and `onValueChange`
+ * receives the new value or `null` on clear. Selecting an option closes the
+ * listbox and mirrors the picked label back into the input.
+ */
+export interface ComboboxSingleProps<T extends SelectValue = string> extends ComboboxBaseProps<T> {
+    /** Single-select mode (the default). Omit or set to `false` explicitly. */
+    multiple?: false;
+    /** Currently selected value. Supports `bind:value` for two-way binding. */
+    value?: T | null;
+    /** Fires after the selected value changes. Receives the new value or `null` on clear. */
+    onValueChange?: (value: T | null) => void;
+    /** Disallowed in single mode — only relevant for multi-select. */
+    maxItems?: never;
+    /** Disallowed in single mode — only relevant for multi-select. */
+    onRemoveTag?: never;
+    /** Disallowed in single mode — only relevant for multi-select. */
+    customTag?: never;
+}
+/**
+ * Multi-select arm. `value` is an array of the selected values, rendered as
+ * removable tag chips below the search input. Selecting an option adds a tag and
+ * keeps the listbox open so several picks flow without re-opening; the search
+ * query is cleared after each pick. Backspace on an empty query removes the last
+ * tag.
+ */
+export interface ComboboxMultipleProps<T extends SelectValue = string> extends ComboboxBaseProps<T> {
+    /** Enable multi-select mode. */
+    multiple: true;
+    /** Currently selected values. Supports `bind:value`. @default [] */
+    value?: T[];
+    /** Fires after the selection changes. Receives the new array. */
+    onValueChange?: (value: T[]) => void;
+    /**
+     * Cap the number of selected values. Once reached, options that aren't already
+     * selected become non-selectable (and are skipped by keyboard navigation) until
+     * a tag is removed; already-selected options can still be toggled off.
+     */
+    maxItems?: number;
+    /**
+     * Fires when a single value is removed from the selection — via the tag's
+     * remove button, Backspace on an empty query, or toggling a selected option
+     * off. Receives the removed value. `onValueChange` fires alongside it with the
+     * resulting array; use `onRemoveTag` for per-tag side effects (analytics, exit
+     * animations). Note: the bulk clear button does NOT fire this per tag — it
+     * signals through `onValueChange([])` only.
+     */
+    onRemoveTag?: (value: T) => void;
+    /**
+     * Custom tag renderer replacing the default chip. Receives the selected option
+     * and a `remove` callback — call it to drop the tag (fires `onRemoveTag` +
+     * `onValueChange`). Use it to render a `<Badge>` or any bespoke chip.
+     *
+     * Positional args: `(option, remove)`.
+     */
+    customTag?: Snippet<[ComboboxOption<T>, () => void]>;
+}
+/**
+ * @description Searchable menu (autocomplete) combining a text input with a
+ * filterable option list. Implements the ARIA combobox pattern with keyboard
+ * navigation, custom filtering, and two-way bindable state. Single-select by
+ * default; pass `multiple` for an array-bound multi-select that renders picks as
+ * removable tag chips.
+ *
+ * @tag form
+ * @related Select
+ * @related Input
+ * @related Menu
+ *
+ * @example
+ * ```svelte
+ * <Combobox
+ *   options={[
+ *     { label: 'Apple', value: 'apple' },
+ *     { label: 'Banana', value: 'banana' },
+ *     { label: 'Cherry', value: 'cherry' }
+ *   ]}
+ *   bind:value={selected}
+ *   placeholder="Search fruit…"
+ * />
+ * ```
+ *
+ * @example Numeric IDs — the generic value type keeps `value` typed as `number`
+ * ```svelte
+ * <Combobox
+ *   options={tenants.map((t) => ({ label: t.name, value: t.id }))}
+ *   bind:value={tenantId}
+ * />
+ * ```
+ *
+ * @example Multi-select with removable tags
+ * ```svelte
+ * <Combobox
+ *   options={skills}
+ *   multiple
+ *   bind:value={selectedSkills}
+ *   maxItems={5}
+ *   placeholder="Add skills…"
+ * />
+ * ```
+ *
+ * @example Grouped options — filtering hides empty groups automatically
+ * ```svelte
+ * <Combobox
+ *   groups={[
+ *     { label: 'Fruit', options: [{ label: 'Apple', value: 'apple' }] },
+ *     { label: 'Veg', options: [{ label: 'Carrot', value: 'carrot' }] }
+ *   ]}
+ *   bind:value={food}
+ * />
+ * ```
+ */
+export type ComboboxProps<T extends SelectValue = string> = ComboboxSingleProps<T> | ComboboxMultipleProps<T>;
 /** Backwards-compatible alias for {@link ComboboxOption} (legacy name). */
 export type ComboboxOptionType<T extends SelectValue = string> = ComboboxOption<T>;
 export { default as Combobox } from './Combobox.svelte';

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { DialogIntent } from '../Dialog/index.js';
+import type { DialogSlots } from '../Dialog/dialog.variants.js';
 /**
  * Intent applied to the confirm button. Reuses the standard intent palette
  * via {@link DialogIntent} (with `neutral` mapped to `primary` for visual
@@ -88,5 +89,23 @@ export interface ConfirmDialogProps {
     transitionEasing?: (t: number) => number;
     /** Optional richer markup rendered below `description`. */
     children?: Snippet;
+    /** Extra classes merged onto the dialog element. Forwarded to {@link DialogProps.class}. */
+    class?: string;
+    /**
+     * Strip the underlying Dialog's default styles. Combine with `slotClasses`
+     * for a fully custom appearance. @default false
+     */
+    unstyled?: boolean;
+    /**
+     * Per-slot class overrides, forwarded to the underlying Dialog.
+     * Slots: dialog | backdrop | panel | content | header | title | body | footer.
+     */
+    slotClasses?: Partial<Record<DialogSlots, string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Dialog: {...} }}>`.
+     * Resolved against the `Dialog` component key — ConfirmDialog shares the
+     * Dialog preset space instead of introducing a parallel one.
+     */
+    preset?: string;
 }
 export { default as ConfirmDialog } from './ConfirmDialog.svelte';

package/dist/primitives/Dialog/Dialog.svelte

@@ -3,14 +3,9 @@
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
   import { resolveIcon } from '../../icons';
   import CloseIconDefault from '../../icons/CloseIcon.svelte';
-  import { onDestroy } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
   import { fade, scale } from 'svelte/transition';
-  import {
-    trapFocus,
-    showDialogModal,
-    closeDialogModal,
-    unlockBodyScroll
-  } from '../../utils/overlay';
+  import { trapFocus, showDialogModal, closeDialogModal } from '../../utils/overlay';
   import { overlayStack, getOverlayMotion } from '../../utils';
   import Button from '../Button/Button.svelte';
   import type { DialogProps } from './index';
@@ -31,6 +26,7 @@
     closeOnBackdropClick = true,
     closeOnEscape = true,
     hideCloseButton = false,
+    draggable = false,
     transitionDuration,
     transitionEasing,
     onClose,
@@ -69,9 +65,70 @@
   let panelEl = $state<HTMLElement>();
   let isVisible = $state(false);
   let previouslyFocused: HTMLElement | null = null;
+  // Release for the body-scroll lock this instance holds while modal — set by
+  // showDialogModal, idempotent, so both teardown paths below may call it.
+  let releaseScrollLock: (() => void) | undefined;
 
   const structured = $derived(!!title);
 
+  // svelte-ignore state_referenced_locally
+  if (import.meta.env?.DEV && draggable && !title) {
+    console.warn(
+      '[Dialog] `draggable` needs a `title` — the header is the drag handle. Without a title no header renders, so dragging is a no-op.'
+    );
+  }
+
+  // Drag offset from the centred position (px). Only ever non-zero while
+  // `draggable` and the user has grabbed the header. Reset on each open so a
+  // reopened dialog always starts centred.
+  let dragX = $state(0);
+  let dragY = $state(0);
+
+  // Attachment wiring the header as a drag handle. Kept off the markup as an
+  // `{@attach}` (not inline `onpointer*`) so the static `<header>` doesn't trip
+  // the a11y "non-interactive element with handlers needs a role" rule, and so
+  // the listeners tear down cleanly when `draggable` flips off. Pointer capture
+  // keeps the drag alive when the cursor outruns the header; header buttons
+  // (close) are exempted so they still click.
+  function draggableHandle(node: HTMLElement) {
+    node.style.touchAction = 'none';
+    node.style.userSelect = 'none';
+    node.style.cursor = 'move';
+    let dragging = false;
+    let startX = 0;
+    let startY = 0;
+    const onDown = (event: PointerEvent) => {
+      if ((event.target as HTMLElement).closest('button')) return;
+      dragging = true;
+      startX = event.clientX - dragX;
+      startY = event.clientY - dragY;
+      node.setPointerCapture(event.pointerId);
+    };
+    const onMove = (event: PointerEvent) => {
+      if (!dragging) return;
+      dragX = event.clientX - startX;
+      dragY = event.clientY - startY;
+    };
+    const onUp = (event: PointerEvent) => {
+      if (!dragging) return;
+      dragging = false;
+      node.releasePointerCapture(event.pointerId);
+    };
+    node.addEventListener('pointerdown', onDown);
+    node.addEventListener('pointermove', onMove);
+    node.addEventListener('pointerup', onUp);
+    return () => {
+      node.removeEventListener('pointerdown', onDown);
+      node.removeEventListener('pointermove', onMove);
+      node.removeEventListener('pointerup', onUp);
+      // Undo the inline styles too, so toggling `draggable` off at runtime
+      // doesn't leave the header stuck with `cursor: move` / unselectable text.
+      node.style.touchAction = '';
+      node.style.userSelect = '';
+      node.style.cursor = '';
+    };
+  }
+
   const uid = $props.id();
   const titleId = $derived(title ? `dialog-title-${uid}` : undefined);
   const bodyId = `dialog-body-${uid}`;
@@ -120,16 +177,38 @@
   }
 
   function handleOutroEnd() {
-    closeDialogModal(dialogEl, previouslyFocused);
+    closeDialogModal(dialogEl, previouslyFocused, releaseScrollLock);
+    releaseScrollLock = undefined;
     isVisible = false;
     previouslyFocused = null;
   }
 
+  // Reset the drag offset whenever the dialog opens so a reopened dialog always
+  // starts centred — keyed on `open`, not the `open && !isVisible` transition.
+  // Reopening *during* the close outro (isVisible still true) must still recentre;
+  // the old transition-guarded reset silently skipped that case, restoring the
+  // stale drag position. `open` is constant during a drag, so this never fights
+  // the pointer handlers.
+  $effect(() => {
+    if (open) {
+      dragX = 0;
+      dragY = 0;
+    }
+  });
+
   $effect(() => {
     if (open && !isVisible) {
       isVisible = true;
       previouslyFocused = document.activeElement as HTMLElement;
-      showDialogModal(dialogEl, panelEl);
+      // Defer until the `{#if isVisible}` block has rendered so `bind:this` has
+      // assigned dialogEl/panelEl — showDialogModal captures the refs by value,
+      // so promoting before the bind would silently no-op (never actually modal).
+      // The guard covers same-flush teardown: if the component unmounts before
+      // the tick resolves, bind:this has nulled dialogEl and onDestroy has
+      // already run — a lock taken now could never be released.
+      tick().then(() => {
+        if (dialogEl) releaseScrollLock = showDialogModal(dialogEl, panelEl);
+      });
     }
   });
 
@@ -139,7 +218,11 @@
   });
 
   onDestroy(() => {
-    unlockBodyScroll();
+    // Safety net for destroy-while-open, where no outro runs. Releasing is
+    // idempotent and scoped to this instance's own lock, so a regular close
+    // (already released in handleOutroEnd) or a never-opened instance make
+    // this a no-op — it can never free another overlay's lock.
+    releaseScrollLock?.();
   });
 </script>
 
@@ -180,6 +263,7 @@
           : styles.panel({ class: [slotClasses?.panel, className] })}
         data-intent={intent}
         role="document"
+        style:translate={dragX !== 0 || dragY !== 0 ? `${dragX}px ${dragY}px` : undefined}
         transition:scale={{
           duration: motion.enterDuration,
           easing: motion.easing,
@@ -193,6 +277,7 @@
             class={unstyled
               ? (slotClasses?.header ?? '')
               : styles.header({ class: slotClasses?.header })}
+            {@attach draggable ? draggableHandle : undefined}
           >
             <h2
               class={unstyled

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

@@ -1,106 +1,67 @@
 import { type SlotNames, type VariantProps } from '../../utils/variants.js';
-export declare const dialogVariants: (props?: import("../../utils/variants.js").TVProps<{
-    size: {
-        sm: {
-            panel: string;
-        };
-        md: {
-            panel: string;
-        };
-        lg: {
-            panel: string;
-        };
-        xl: {
-            panel: string;
-        };
-        full: {
-            panel: string[];
-        };
-        fullscreen: {
-            panel: string[];
-        };
-    };
-    placement: {
-        center: {
-            dialog: string;
-        };
-        top: {
-            dialog: string;
-        };
-    };
-    intent: {
-        neutral: {};
-        primary: {};
-        secondary: {};
-        success: {};
-        warning: {};
-        danger: {};
-    };
-}> | undefined) => {
+export declare const dialogVariants: ((props?: {
+    size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
+    placement?: "top" | "center" | undefined;
+    intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+} | undefined) => {
     dialog: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     backdrop: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     panel: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     title: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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;
     body: (props?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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?: ({
         size?: "sm" | "md" | "lg" | "xl" | "full" | "fullscreen" | undefined;
         placement?: "top" | "center" | undefined;
         intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | 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 type DialogVariants = VariantProps<typeof dialogVariants>;
 /** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */

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

@@ -27,7 +27,7 @@ import type { DialogSlots, DialogVariants } from './dialog.variants.js';
  * </Dialog>
  * ```
  */
-export interface DialogProps extends Omit<HTMLDialogAttributes, 'children' | 'open'> {
+export interface DialogProps extends Omit<HTMLDialogAttributes, 'children' | 'open' | 'draggable'> {
     /** Controls whether the dialog is visible. Supports bind:open. */
     open?: boolean;
     /** Dialog body content. When `title` is omitted the content fills the entire panel. */
@@ -52,6 +52,17 @@ export interface DialogProps extends Omit<HTMLDialogAttributes, 'children' | 'op
     closeOnBackdropClick?: boolean;
     /** Whether pressing Escape dismisses the dialog. @default true */
     closeOnEscape?: boolean;
+    /**
+     * Let the user reposition the dialog by dragging its header. Off by default.
+     * The structured header (rendered when `title` is set) becomes the drag
+     * handle; the close button and any header controls stay clickable, and the
+     * offset resets each time the dialog reopens. Most useful for a dialog the
+     * user may want to shove aside to see the content behind it. Requires a
+     * `title` — without a header there is nothing to grab. Overrides the native
+     * HTML `draggable` attribute, which has no meaningful use on a dialog.
+     * @default false
+     */
+    draggable?: boolean;
     /**
      * Hides the built-in close button. Only takes effect when `title` is
      * also set — the close button only renders in the structured (titled)