@urbicon-ui/blocks 6.1.4

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

@@ -0,0 +1,87 @@
+import { tv } from '../../utils/variants';
+export const comboboxVariants = tv({
+    slots: {
+        base: 'flex w-full flex-col gap-1.5',
+        label: 'text-text-secondary block text-sm font-medium',
+        requiredMark: 'text-danger ml-0.5',
+        inputWrapper: 'relative w-full',
+        input: [
+            // Radius driven by `tier` axis below.
+            'w-full border bg-surface-base text-text-primary',
+            // Surface-family border, consistent with Input / Textarea / Select.
+            // Form-control frames stay quiet (`border-subtle`); the
+            // `border-neutral` intent token is reserved for Action surfaces
+            // (Outline-Button, Menu) where the border needs to read as clickable.
+            'border-border-subtle hover:border-border-default placeholder:text-text-tertiary',
+            'transition-colors duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary',
+            'disabled:opacity-50 disabled:cursor-not-allowed'
+        ],
+        message: 'text-xs text-danger',
+        hint: 'text-xs text-text-tertiary',
+        // `position`, `width`, `overflow-y` are set inline in Combobox.svelte
+        // so the native `popover="manual"` top-layer rendering works
+        // correctly and the UA's `overflow: auto` doesn't render a duplicate
+        // scrollbar. Width is sized by Floating UI's `size` middleware.
+        // tier: contain — floating dropdown panel.
+        listbox: [
+            'rounded-contain border',
+            'bg-surface-elevated border-border-subtle shadow-[var(--blocks-shadow-md)]',
+            'max-h-60 p-1 space-y-0.5'
+        ],
+        option: [
+            'flex w-full items-center gap-2 rounded-modify px-3 py-2 text-left',
+            'text-text-primary cursor-pointer select-none',
+            'transition-colors duration-[var(--blocks-duration-fast)]',
+            'focus-visible:outline-none'
+        ],
+        optionActive: 'bg-surface-hover',
+        optionSelected: 'bg-surface-selected font-medium',
+        noResults: 'px-3 py-4 text-center text-sm text-text-tertiary',
+        clear: [
+            'absolute right-2 top-1/2 -translate-y-1/2 rounded-modify p-1.5',
+            'text-text-tertiary hover:text-text-primary',
+            '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)]'
+        ]
+    },
+    variants: {
+        // 3-tier semantic radius for the Combobox input. Default `modify`.
+        // Options keep their own r-interactive; only the input rounding flips.
+        tier: {
+            modify: { input: 'rounded-modify' },
+            commit: { input: 'rounded-commit' }
+        },
+        size: {
+            sm: {
+                input: 'h-8 px-3 pr-8 text-sm',
+                option: 'px-2 py-1.5 text-sm min-h-[2rem]'
+            },
+            md: {
+                input: 'h-10 px-3 pr-8 text-base',
+                option: 'px-3 py-2 text-sm min-h-[2.5rem]'
+            },
+            lg: {
+                input: 'h-12 px-4 pr-10 text-lg',
+                option: 'px-3 py-2.5 text-base min-h-[3rem]'
+            }
+        },
+        open: {
+            true: { chevron: 'rotate-180' }
+        },
+        disabled: {
+            true: { base: 'opacity-50 pointer-events-none' }
+        }
+    },
+    defaultVariants: {
+        tier: 'modify',
+        size: 'md',
+        open: false,
+        disabled: false
+    }
+});

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

@@ -0,0 +1,132 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint';
+import type { SelectValue } from '../Select/index';
+import type { ComboboxVariants } from './combobox.variants';
+/** A single combobox option with label, value, and optional disabled state. */
+export interface ComboboxOption<T extends SelectValue = string> {
+    label: string;
+    value: T;
+    disabled?: boolean;
+}
+/**
+ * @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"
+ * />
+ * ```
+ */
+export interface ComboboxProps<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;
+    /** 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…' */
+    placeholder?: string;
+    /** Field label rendered above the input. */
+    label?: string;
+    /** Helper text shown below the field. Hidden when an error is set. */
+    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 */
+    required?: boolean;
+    /** Custom filter replacing the built-in case-insensitive label match. Return `true` to include an option. */
+    filter?: (option: ComboboxOption<T>, query: string) => boolean;
+    /** 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. */
+    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;
+    /** Custom option renderer. Receives the option and whether it is selected. */
+    customOption?: Snippet<[ComboboxOption<T>, boolean]>;
+    /**
+     * Whether the listbox closes on Escape key. Default `true`.
+     * Set to `false` for inline contexts where Escape should be intercepted
+     * by an outer widget (e.g. a row editor that wants to revert on Escape).
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the listbox closes on outside click. Default `true`.
+     * Set to `false` to pin the listbox open while the consumer manages
+     * dismissal explicitly.
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Fires after Escape closes the listbox. Use for analytics or to clear
+     * ephemeral state on dismiss. Does NOT control whether the listbox
+     * closes — that is governed by `closeOnEscape`.
+     */
+    onEscape?: () => void;
+    /**
+     * Fires after an outside click closes the listbox. Use for analytics
+     * or side-effects on dismiss. Does NOT control whether the listbox
+     * closes — that is governed by `closeOnClickOutside`.
+     */
+    onClickOutside?: () => void;
+    /** Micro-interaction preset. Form controls default to 'none' for a clean feel. @default 'none' */
+    mint?: MintProp;
+    /** Extra classes merged onto the root wrapper element. */
+    class?: string;
+    /** Remove all default tv() classes — only user-provided classes apply. @default false */
+    unstyled?: boolean;
+    /** Per-slot class overrides merged with tv() styles. */
+    slotClasses?: Partial<Record<'base' | 'label' | 'requiredMark' | 'inputWrapper' | 'input' | 'message' | 'hint' | 'listbox' | 'option' | 'optionActive' | 'optionSelected' | 'noResults' | 'clear' | 'chevron', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Combobox: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+    /** Deterministic HTML `id` for the component. Auto-generated when omitted. */
+    id?: string;
+}
+/** 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';

package/dist/primitives/Combobox/index.js

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

package/dist/primitives/ConfirmDialog/ConfirmDialog.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import Button from '../Button/Button.svelte';
+  import Dialog from '../Dialog/Dialog.svelte';
+  import type { ConfirmDialogProps } from './index';
+
+  const bt = useBlocksI18n();
+
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    intent = 'danger',
+    confirmLabel,
+    cancelLabel,
+    confirmIntent,
+    onConfirm,
+    onCancel,
+    loading = false,
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    children,
+    ...rest
+  }: ConfirmDialogProps = $props();
+
+  let busy = $state(false);
+  const isLoading = $derived(loading || busy);
+  const effectiveConfirmIntent = $derived(
+    confirmIntent ?? (intent === 'neutral' ? 'primary' : intent)
+  );
+
+  async function handleConfirm() {
+    if (isLoading) return;
+    if (!onConfirm) {
+      open = false;
+      return;
+    }
+    try {
+      busy = true;
+      await onConfirm();
+      open = false;
+    } finally {
+      busy = false;
+    }
+  }
+
+  function handleCancel() {
+    if (isLoading) return;
+    onCancel?.();
+    open = false;
+  }
+</script>
+
+<Dialog
+  {...rest}
+  bind:open
+  {title}
+  {intent}
+  size="sm"
+  closeOnBackdropClick={closeOnBackdropClick && !isLoading}
+  closeOnEscape={closeOnEscape && !isLoading}
+  hideCloseButton={isLoading}
+  onClose={handleCancel}
+>
+  {#if description}
+    <p class="text-text-secondary text-sm leading-relaxed">{description}</p>
+  {/if}
+  {#if children}
+    {@render children()}
+  {/if}
+
+  {#snippet footer()}
+    <Button variant="ghost" intent="neutral" onclick={handleCancel} disabled={isLoading}>
+      {cancelLabel ?? bt('button.cancel')}
+    </Button>
+    <Button intent={effectiveConfirmIntent} onclick={handleConfirm} loading={isLoading}>
+      {confirmLabel ?? bt('button.confirm')}
+    </Button>
+  {/snippet}
+</Dialog>

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

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

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

@@ -0,0 +1,80 @@
+import type { Snippet } from 'svelte';
+import type { DialogIntent } from '../Dialog';
+/**
+ * Intent applied to the confirm button. Reuses the standard intent palette
+ * via {@link DialogIntent} (with `neutral` mapped to `primary` for visual
+ * affordance).
+ */
+export type ConfirmIntent = Exclude<DialogIntent, 'neutral'>;
+/**
+ * @description Pre-configured Dialog for confirming a single, often
+ * destructive action. Replaces the native `window.confirm()` with a
+ * styleable, focus-trapped, keyboard-accessible modal that matches the
+ * design system's intent palette.
+ *
+ * `onConfirm` may be `async`; while the returned promise is pending the
+ * dialog locks itself (no backdrop dismiss, no escape, confirm button
+ * shows a spinner). Auto-closes on resolve.
+ *
+ * @tag overlay
+ * @related Dialog
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   let confirmOpen = $state(false);
+ * </script>
+ * <Button intent="danger" onclick={() => (confirmOpen = true)}>Delete</Button>
+ * <ConfirmDialog
+ *   bind:open={confirmOpen}
+ *   title="Delete project?"
+ *   description="This cannot be undone."
+ *   intent="danger"
+ *   confirmLabel="Delete"
+ *   onConfirm={async () => { await deleteProject(id); }}
+ * />
+ * ```
+ */
+export interface ConfirmDialogProps {
+    /** Controls visibility. Supports bind:open. */
+    open?: boolean;
+    /** Heading shown in the dialog header. */
+    title: string;
+    /** Description rendered above the footer. Use `children` for richer markup. */
+    description?: string;
+    /**
+     * Accent on the dialog header strip. Drives the default `confirmIntent`.
+     * @default 'danger'
+     */
+    intent?: DialogIntent;
+    /**
+     * Override for the confirm button intent. Defaults to {@link ConfirmDialogProps.intent},
+     * with `neutral` upgraded to `primary` for visual affordance.
+     */
+    confirmIntent?: ConfirmIntent;
+    /** Label of the confirm button. Defaults to the localized `button.confirm`. */
+    confirmLabel?: string;
+    /** Label of the cancel button. Defaults to the localized `button.cancel`. */
+    cancelLabel?: string;
+    /**
+     * Confirm handler. May return a promise — the dialog stays open and shows
+     * a loading state while it resolves, then auto-closes on success.
+     */
+    onConfirm?: () => void | Promise<void>;
+    /** Fired when the user cancels (button, backdrop, or Escape). */
+    onCancel?: () => void;
+    /**
+     * Externally controlled loading flag. Combined with the internal `busy`
+     * flag from an async `onConfirm`. While truthy, both buttons are
+     * disabled and dismissal is blocked.
+     * @default false
+     */
+    loading?: boolean;
+    /** Whether the backdrop click cancels. @default true */
+    closeOnBackdropClick?: boolean;
+    /** Whether Escape cancels. @default true */
+    closeOnEscape?: boolean;
+    /** Optional richer markup rendered below `description`. */
+    children?: Snippet;
+}
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';

package/dist/primitives/ConfirmDialog/index.js

@@ -0,0 +1 @@
+export { default as ConfirmDialog } from './ConfirmDialog.svelte';

package/dist/primitives/Dialog/Dialog.svelte

@@ -0,0 +1,261 @@
+<script lang="ts">
+  import { useBlocksI18n } from '../..';
+  import { getBlocksConfig, mergeSlotClasses, resolvePresetSlotClasses } from '../../provider';
+  import { resolveIcon } from '../../icons';
+  import CloseIconDefault from '../../icons/CloseIcon.svelte';
+  import { onDestroy } from 'svelte';
+  import { fade, scale } from 'svelte/transition';
+  import {
+    trapFocus,
+    showDialogModal,
+    closeDialogModal,
+    unlockBodyScroll
+  } from '../../utils/overlay';
+  import { overlayStack, getOverlayMotion } from '../../utils';
+  import Button from '../Button/Button.svelte';
+  import type { DialogProps } from './index';
+  import { dialogVariants } from './dialog.variants';
+
+  const bt = useBlocksI18n();
+
+  const CloseIcon = resolveIcon('close', CloseIconDefault);
+
+  let {
+    open = $bindable(false),
+    children,
+    footer,
+    title,
+    size = 'sm',
+    placement = 'center',
+    intent = 'neutral',
+    closeOnBackdropClick = true,
+    closeOnEscape = true,
+    hideCloseButton = false,
+    transitionDuration,
+    transitionEasing,
+    onClose,
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: DialogProps = $props();
+
+  if (
+    import.meta.env.DEV &&
+    hideCloseButton &&
+    closeOnEscape === false &&
+    closeOnBackdropClick === false
+  ) {
+    console.warn(
+      '[Dialog] All close paths are disabled (hideCloseButton + closeOnEscape=false + closeOnBackdropClick=false). The dialog is only closable programmatically — make sure your UI exposes an action that calls onClose or sets open=false.'
+    );
+  }
+
+  const motion = $derived(
+    getOverlayMotion({
+      enterDuration: transitionDuration,
+      exitDuration: transitionDuration,
+      easing: transitionEasing
+    })
+  );
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+  const slotClasses = $derived(
+    mergeSlotClasses(
+      blocksConfig?.defaults?.Dialog?.slotClasses,
+      resolvePresetSlotClasses(blocksConfig?.presets, 'Dialog', preset),
+      slotClassesProp
+    )
+  );
+
+  let dialogEl = $state<HTMLDialogElement>();
+  let panelEl = $state<HTMLElement>();
+  let isVisible = $state(false);
+  let previouslyFocused: HTMLElement | null = null;
+
+  const structured = $derived(!!title);
+
+  const uid = $props.id();
+  const titleId = $derived(title ? `dialog-title-${uid}` : undefined);
+  const bodyId = `dialog-body-${uid}`;
+  const overlayId = `dialog-${uid}`;
+
+  const styles = $derived(dialogVariants({ size, placement, intent }));
+
+  function requestClose() {
+    if (!isVisible || !open) return;
+    open = false;
+    onClose?.();
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (closeOnEscape) requestClose();
+      return;
+    }
+    if (event.key === 'Tab') trapFocus(event, panelEl);
+  }
+
+  // Native <dialog> only routes ESC to its `onkeydown` when focus is inside
+  // the dialog. If the user opens the dialog and never clicks into it, focus
+  // can stay on the trigger or body, and ESC silently misses our handler.
+  // The window-level listener catches that case; the `isTop` guard makes
+  // sure stacked overlays close one-at-a-time.
+  function handleWindowKeydown(event: KeyboardEvent) {
+    if (event.key !== 'Escape') return;
+    if (!open || !closeOnEscape || event.defaultPrevented) return;
+    if (!overlayStack.isTop(overlayId)) return;
+    event.preventDefault();
+    requestClose();
+  }
+
+  function handleBackdropClick(event: MouseEvent) {
+    if (closeOnBackdropClick && event.target === event.currentTarget) requestClose();
+  }
+
+  function handleBackdropDirectClick() {
+    if (closeOnBackdropClick) requestClose();
+  }
+
+  function handleOutroEnd() {
+    closeDialogModal(dialogEl, previouslyFocused);
+    isVisible = false;
+    previouslyFocused = null;
+  }
+
+  $effect(() => {
+    if (open && !isVisible) {
+      isVisible = true;
+      previouslyFocused = document.activeElement as HTMLElement;
+      showDialogModal(dialogEl, panelEl);
+    }
+  });
+
+  $effect(() => {
+    if (!open) return;
+    return overlayStack.register(overlayId, requestClose);
+  });
+
+  onDestroy(() => {
+    unlockBodyScroll();
+  });
+</script>
+
+<svelte:window onkeydown={handleWindowKeydown} />
+
+{#if isVisible}
+  <dialog
+    bind:this={dialogEl}
+    class={unstyled ? (slotClasses?.dialog ?? '') : styles.dialog({ class: slotClasses?.dialog })}
+    onclick={handleBackdropClick}
+    onkeydown={handleKeydown}
+    onclose={() => {
+      if (open) requestClose();
+    }}
+    aria-labelledby={titleId}
+    aria-describedby={bodyId}
+    aria-modal="true"
+    data-state={open ? 'open' : 'closed'}
+    {...restProps}
+  >
+    {#if open}
+      <div
+        class={unstyled
+          ? (slotClasses?.backdrop ?? '')
+          : styles.backdrop({ class: slotClasses?.backdrop })}
+        onclick={handleBackdropDirectClick}
+        aria-hidden="true"
+        role="presentation"
+        transition:fade={{
+          duration: motion.backdropEnterDuration,
+          easing: motion.easing
+        }}
+      ></div>
+      <div
+        bind:this={panelEl}
+        class={unstyled
+          ? [slotClasses?.panel, className].filter(Boolean).join(' ')
+          : styles.panel({ class: [slotClasses?.panel, className] })}
+        data-intent={intent}
+        role="document"
+        transition:scale={{
+          duration: motion.enterDuration,
+          easing: motion.easing,
+          start: motion.panelScaleStart,
+          opacity: 0
+        }}
+        onoutroend={handleOutroEnd}
+      >
+        {#if structured}
+          <header
+            class={unstyled
+              ? (slotClasses?.header ?? '')
+              : styles.header({ class: slotClasses?.header })}
+          >
+            <h2
+              class={unstyled
+                ? (slotClasses?.title ?? '')
+                : styles.title({ class: slotClasses?.title })}
+              id={titleId}
+            >
+              {title}
+            </h2>
+            {#if !hideCloseButton}
+              <Button
+                variant="ghost"
+                size="sm"
+                onclick={requestClose}
+                aria-label={bt('accessibility.closeDialog')}
+              >
+                <CloseIcon class="h-4 w-4" />
+              </Button>
+            {/if}
+          </header>
+
+          <main
+            class={unstyled ? (slotClasses?.body ?? '') : styles.body({ class: slotClasses?.body })}
+            id={bodyId}
+          >
+            {@render children()}
+          </main>
+
+          {#if footer}
+            <footer
+              class={unstyled
+                ? (slotClasses?.footer ?? '')
+                : styles.footer({ class: slotClasses?.footer })}
+            >
+              {@render footer()}
+            </footer>
+          {/if}
+        {:else}
+          <div
+            class={unstyled
+              ? (slotClasses?.content ?? '')
+              : styles.content({ class: slotClasses?.content })}
+            id={bodyId}
+          >
+            {@render children()}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </dialog>
+{/if}
+
+<style>
+  dialog {
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+  }
+
+  dialog::backdrop {
+    display: none;
+  }
+</style>

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

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