@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/components/DataTable.svelte.d.ts

@@ -0,0 +1,74 @@
+import type { Snippet } from "svelte";
+import type { MenuItem, DataGrid } from "../data/table/index.js";
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+declare function $$render<T>(): {
+    props: {
+        grid: DataGrid<T>;
+        selectable?: boolean;
+        expandable?: boolean;
+        /** When true, each row gets up/down chevron buttons in the lead
+         *  column and fires `onReorder(row, 'up'|'down')` when clicked.
+         *  The consumer owns the actual swap (typically updating the
+         *  `sortOrder` field of two rows). Buttons auto-disable at the
+         *  ends of the visible page — with server pagination, this
+         *  reorders WITHIN the visible page only. */
+        reorderable?: boolean;
+        expanded?: Snippet<[T]>;
+        rowActions?: (row: T) => MenuItem[];
+        bulkActions?: (selected: ReadonlySet<string>) => MenuItem[];
+        onReorder?: (row: T, direction: "up" | "down") => void;
+        /** Overall density tier. Scales the whole table uniformly:
+         *  font-size (--ui-text-*), row/footer padding, inter-column
+         *  gap, lead/tail control squares (--ui-height-*), and
+         *  propagates to every inner Button / Checkbox / Select.
+         *  Header text inherits the outer font-size — no separate
+         *  axis. Default `'md'` matches the rest of svelte-ui. */
+        size?: Responsive<Size>;
+        /** Every header + body cell wrapper gets Tailwind's `truncate`
+         *  (white-space:nowrap, overflow:hidden, text-overflow:ellipsis).
+         *  Simple text cells render with ellipsis automatically. Compound
+         *  cells (inline-flex wrappers, badges, buttons) clip at the
+         *  right edge — to also get ellipsis on the inner text, the
+         *  snippet's text span needs its own `truncate` class.
+         *
+         *  Defaults to `true` — the "wrong" default is columns visually
+         *  bleeding into their neighbours when a value doesn't fit its
+         *  configured span. Pass `truncate={false}` if the consumer
+         *  wants wrap-on-overflow (rare — usually you'd fix the span
+         *  allocation instead). */
+        truncate?: boolean;
+        /** Drop the visible frame while keeping each section's 1px box: every section's border colour
+         *  becomes its own background, so it vanishes per-section on a matching surface. Defaults `false`. */
+        borderless?: boolean;
+        /** Tints the whole table's interactive/section surfaces (row hover,
+         *  header/footer bands) with a semantic colour instead of the neutral
+         *  default. Points --ui-accent at the variant's token and re-mixes the
+         *  --ui-color-hover/surface/active tints via the `.ui-accent` class.
+         *  `ghost` additionally drops ALL section fills (bands + body) for a bare,
+         *  see-through table. Omit for the default grey tint. */
+        variant?: Variant;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataTable: $$IsomorphicComponent;
+type DataTable<T> = InstanceType<typeof DataTable<T>>;
+export default DataTable;

package/dist/components/DatePicker.svelte

@@ -0,0 +1,312 @@
+<!--
+/**
+ * DatePicker — a themed date field (single date, datetime, or date RANGE) that follows the library
+ * look end to end: an {@link Input}-framed trigger + a {@link Popup} (top layer) holding a
+ * {@link Calendar}, with a compact {@link TimeSpinner} tucked underneath in `time` mode. A hidden
+ * input carries the ISO value for forms (single mode).
+ *
+ *   <DatePicker bind:value={dateStr} />                 single    value: 'YYYY-MM-DD'
+ *   <DatePicker time bind:value={dtStr} />              datetime  value: 'YYYY-MM-DDTHH:MM'
+ *   <DatePicker range bind:value={{start,end}} />       range     value: { start, end }
+ *
+ * `variant` accents the selection/actions; `size` scales the field, calendar, spinner, and popup.
+ */
+-->
+<script lang="ts">
+  import type { Size } from "../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+  import { resolveStep, type StepSpec } from "../types/time.js";
+  import Input from "./Input.svelte";
+  import Popup from "./Popup.svelte";
+  import Calendar from "./Calendar.svelte";
+  import TimeSpinner from "./TimeSpinner.svelte";
+  import IconCalendar from "~icons/mdi/calendar-outline";
+  import IconClose from "~icons/mdi/close";
+
+  type RangeValue = { start: string | null; end: string | null };
+  interface Props {
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    /** `time` mode: column interval — a number = minute step, or `{ hour, minute, second }`. Default 1. */
+    step?: StepSpec;
+    /** `time` mode: add a seconds column; the time part becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    /** `time` mode: show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from app config. */
+    meridiem?: boolean;
+    min?: string;
+    max?: string;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    class?: string;
+    name?: string;
+  }
+
+  let {
+    value = $bindable(),
+    range = false,
+    time = false,
+    step = 1,
+    seconds = false,
+    meridiem = true,
+    min,
+    max,
+    weekStart,
+    locale = typeof navigator !== "undefined" ? navigator.language : "en-US",
+    placeholder = range ? "Select dates" : time ? "Select date & time" : "Select date",
+    disabled = false,
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    name,
+  }: Props = $props();
+
+  const accent = $derived(`var(${variantToken[variant]})`);
+  const pad = $derived(responsiveClasses(size, { sm: "p-1.5", md: "p-2", lg: "p-3" }));
+  const footText = $derived(
+    responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" }),
+  );
+  const subtle = "[color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]";
+
+  const dateOf = (s: string | null | undefined) => (s ? s.split("T")[0] : "");
+  const timeOf = (s: string | null | undefined) =>
+    s && s.includes("T") ? s.split("T")[1].slice(0, seconds ? 8 : 5) : "";
+  const midnight = $derived(seconds ? "00:00:00" : "00:00");
+  const compose = (d: string, t: string) => (time ? `${d}T${t || midnight}` : d);
+  const todayDate = () => {
+    const d = new Date();
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+  };
+
+  const rv = $derived(
+    range ? ((value as RangeValue) ?? { start: null, end: null }) : { start: null, end: null },
+  );
+  const singleStr = $derived(range ? "" : ((value as string | null) ?? ""));
+
+  let open = $state(false);
+  let anchorEl = $state<HTMLDivElement>();
+
+  // ── single ──
+  function pickSingleDate(iso: string) {
+    value = compose(iso, timeOf(singleStr));
+    if (!time) open = false;
+  }
+  function setSingleTime(t: string) {
+    value = compose(dateOf(singleStr) || todayDate(), t);
+  }
+
+  // ── range ──
+  function onRange(r: { start: string; end: string }) {
+    const s = r.start ? compose(r.start, timeOf(rv.start) || (time ? midnight : "")) : null;
+    const e = r.end
+      ? compose(r.end, timeOf(rv.end) || (time ? (seconds ? "23:59:59" : "23:59") : ""))
+      : null;
+    value = { start: s, end: e };
+    if (!time && e) open = false;
+  }
+  const setStartTime = (t: string) =>
+    rv.start && (value = { ...rv, start: `${dateOf(rv.start)}T${t}` });
+  const setEndTime = (t: string) => rv.end && (value = { ...rv, end: `${dateOf(rv.end)}T${t}` });
+
+  function goToday() {
+    const t = todayDate();
+    if (range) value = { start: compose(t, time ? midnight : ""), end: null };
+    else pickSingleDate(t);
+  }
+  // time mode: jump to today's date AND the current time (minutes snapped to `step`; real seconds).
+  function goNow() {
+    const d = new Date();
+    const ms = resolveStep(step).minute;
+    const mins = Math.round((d.getHours() * 60 + d.getMinutes()) / ms) * ms;
+    const hhmm = `${String(Math.floor(mins / 60) % 24).padStart(2, "0")}:${String(mins % 60).padStart(2, "0")}`;
+    const t = seconds ? `${hhmm}:${String(d.getSeconds()).padStart(2, "0")}` : hhmm;
+    const day = todayDate();
+    if (range) value = { start: `${day}T${t}`, end: null };
+    else value = compose(day, t);
+    if (!range) open = false; // a full date+time is a complete single selection
+  }
+  function clear() {
+    value = range ? { start: null, end: null } : null;
+    open = false;
+  }
+
+  // ── trigger label ──
+  const fmtDate = (s: string) => {
+    if (!s) return "";
+    const [y, m, d] = dateOf(s).split("-").map(Number);
+    return new Intl.DateTimeFormat(locale, {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    }).format(new Date(y, m - 1, d));
+  };
+  const fmtTime = (s: string) => {
+    const t = timeOf(s);
+    if (!t) return "";
+    const [h, m, sec] = t.split(":").map(Number);
+    return new Intl.DateTimeFormat(locale, {
+      hour: "numeric",
+      minute: "2-digit",
+      second: seconds ? "2-digit" : undefined,
+      hour12: meridiem,
+    }).format(new Date(2000, 0, 1, h, m, sec || 0));
+  };
+  const fmt = (s: string) => (s ? (time ? `${fmtDate(s)}, ${fmtTime(s)}` : fmtDate(s)) : "");
+  const label = $derived.by(() => {
+    if (range)
+      return rv.start ? `${fmt(rv.start ?? "")}${rv.end ? ` – ${fmt(rv.end ?? "")}` : " – …"}` : "";
+    return fmt(singleStr);
+  });
+  const hasValue = $derived(range ? !!(rv.start || rv.end) : !!singleStr);
+
+  function toggle() {
+    if (!disabled) open = !open;
+  }
+  function onKey(e: KeyboardEvent) {
+    if (disabled) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      open = true;
+    }
+  }
+</script>
+
+<div bind:this={anchorEl} class="w-full {cls}">
+  <Input
+    value={label}
+    readonly
+    {size}
+    {disabled}
+    {placeholder}
+    onclick={toggle}
+    onkeydown={onKey}
+    inputClass="cursor-pointer"
+    actions={trailing}
+  />
+  {#if name && !range}<input type="hidden" {name} value={singleStr} />{/if}
+</div>
+
+{#snippet trailing()}
+  {#if hasValue && !disabled}
+    <button
+      type="button"
+      aria-label="Clear"
+      tabindex="-1"
+      class="grid size-5 place-items-center rounded {subtle} hover:[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]"
+      onclick={(e) => {
+        e.stopPropagation();
+        clear();
+      }}><IconClose class="size-3.5" /></button
+    >
+  {/if}
+  <button
+    type="button"
+    tabindex="-1"
+    aria-label="Open calendar"
+    {disabled}
+    class="inline-flex items-center [color:var(--ui-color-secondary)] disabled:opacity-50"
+    onclick={toggle}><IconCalendar /></button
+  >
+{/snippet}
+
+<Popup anchor={anchorEl} bind:open offset={6}>
+  <div
+    class="rounded-[var(--ui-border-radius)] border {pad} shadow-lg [border-color:color-mix(in_srgb,var(--ui-color-secondary)_var(--ui-tint-border),transparent)] [background-color:var(--ui-color-background)] [color:var(--ui-color-text)]"
+    style="--accent: {accent}"
+  >
+    {#if range}
+      <Calendar
+        mode="range"
+        start={dateOf(rv.start)}
+        end={dateOf(rv.end)}
+        {min}
+        {max}
+        {weekStart}
+        {locale}
+        {size}
+        {variant}
+        onrange={onRange}
+      />
+      {#if time}
+        <div class="mt-2 flex flex-col gap-2 border-t pt-2 [border-color:var(--ui-border-color)]">
+          <div class="flex items-center gap-3">
+            <span class="w-10 shrink-0 text-xs {subtle}">Start</span><TimeSpinner
+              value={timeOf(rv.start)}
+              {step}
+              {seconds}
+              {meridiem}
+              {size}
+              {variant}
+              {locale}
+              onchange={setStartTime}
+            />
+          </div>
+          <div class="flex items-center gap-3">
+            <span class="w-10 shrink-0 text-xs {subtle}">End</span><TimeSpinner
+              value={timeOf(rv.end)}
+              {step}
+              {seconds}
+              {meridiem}
+              {size}
+              {variant}
+              {locale}
+              onchange={setEndTime}
+            />
+          </div>
+        </div>
+      {/if}
+    {:else}
+      <Calendar
+        mode="single"
+        value={dateOf(singleStr)}
+        {min}
+        {max}
+        {weekStart}
+        {locale}
+        {size}
+        {variant}
+        onselect={pickSingleDate}
+      />
+      {#if time}
+        <div class="mt-2 flex justify-center border-t pt-2 [border-color:var(--ui-border-color)]">
+          <TimeSpinner
+            value={timeOf(singleStr)}
+            {step}
+            {seconds}
+            {meridiem}
+            {size}
+            {variant}
+            {locale}
+            onchange={setSingleTime}
+          />
+        </div>
+      {/if}
+    {/if}
+    <div
+      class="mt-2 flex items-center justify-between border-t pt-2 {footText} [border-color:var(--ui-border-color)]"
+    >
+      <div class="flex items-center gap-1">
+        <button
+          type="button"
+          class="rounded px-2 py-1 [color:var(--accent)] hover:underline"
+          onclick={goToday}>Today</button
+        >
+        {#if time}<span class={subtle}>/</span><button
+            type="button"
+            class="rounded px-2 py-1 [color:var(--accent)] hover:underline"
+            onclick={goNow}>Now</button
+          >{/if}
+      </div>
+      <button
+        type="button"
+        class="rounded px-2 py-1 {subtle} hover:underline"
+        onclick={() => (open = false)}>Done</button
+      >
+    </div>
+  </div>
+</Popup>

package/dist/components/DatePicker.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Size } from "../types/sizes.js";
+import { type Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+import { type StepSpec } from "../types/time.js";
+type RangeValue = {
+    start: string | null;
+    end: string | null;
+};
+interface Props {
+    value?: string | RangeValue | null;
+    range?: boolean;
+    time?: boolean;
+    /** `time` mode: column interval — a number = minute step, or `{ hour, minute, second }`. Default 1. */
+    step?: StepSpec;
+    /** `time` mode: add a seconds column; the time part becomes `HH:MM:SS`. Default false. */
+    seconds?: boolean;
+    /** `time` mode: show the AM/PM meridiem (12h). `false` = 24h. Default true; supply from app config. */
+    meridiem?: boolean;
+    min?: string;
+    max?: string;
+    weekStart?: 0 | 1;
+    locale?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: Responsive<Size>;
+    variant?: Variant;
+    class?: string;
+    name?: string;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/DateTimeInput.svelte

@@ -0,0 +1,93 @@
+<!--
+/**
+ * DateTimeInput — the themed native date/time picker. Wraps {@link Input} so it inherits the exact
+ * frame, `size` height (sm 24 / md 32 / lg 40px), border, hover/focus glow and disabled styling as
+ * every other control — a raw `<input type="date|datetime-local">` never matches those, which is why
+ * bare date inputs were the one sanctioned exception. Use this instead.
+ *
+ * `type` picks the native picker: `datetime-local` (default), `date`, `time`, `month`, `week`. The
+ * value is the native string the browser emits (e.g. `2026-07-01T13:00` / `2026-07-01`), so it drops
+ * straight into a form field. We render our own trailing calendar/clock icon (in the library accent,
+ * matching Input's icons) and hide the UA indicator; clicking it opens the native picker via
+ * `showPicker()`. The picker popup + edit fields follow light/dark automatically through the theme's
+ * `color-scheme`.
+ */
+-->
+<script lang="ts">
+  import Input from "./Input.svelte";
+  import IconCalendar from "~icons/mdi/calendar-outline";
+  import IconClock from "~icons/mdi/clock-outline";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import { variantToken, type Variant } from "../types/variants.js";
+
+  type DateType = "datetime-local" | "date" | "time" | "month" | "week";
+
+  interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    value?: string;
+    /** Which native picker to render. Default `datetime-local`. */
+    type?: DateType;
+    size?: Responsive<Size>;
+    /** Accent for the native picker highlights (via CSS `accent-color`). Default primary. */
+    variant?: Variant;
+    class?: string;
+    inputClass?: string;
+    element?: HTMLInputElement;
+    disabled?: boolean;
+  }
+
+  let {
+    value = $bindable(""),
+    type = "datetime-local",
+    size = "md",
+    variant = "primary",
+    class: cls = "",
+    inputClass = "",
+    element = $bindable(),
+    disabled = false,
+    ...rest
+  }: Props = $props();
+
+  // `accent-color` themes the native picker's own highlights (selected day, spin buttons) in
+  // supporting browsers — the one lever we have on the browser-owned popup.
+  const accentClass = $derived(`[accent-color:var(${variantToken[variant]})]`);
+
+  // Our trailing icon opens the native picker (a real user gesture). Guard for disabled + browsers
+  // without showPicker (fall back to focusing, which still lets the user type / use the UA indicator).
+  function openPicker() {
+    if (disabled) return;
+    try {
+      element?.showPicker?.();
+    } catch {
+      element?.focus();
+    }
+  }
+</script>
+
+<Input
+  bind:value
+  bind:element
+  {type}
+  {size}
+  {disabled}
+  class={cls}
+  inputClass="ui-datetime {accentClass} {inputClass}"
+  icon={pickerIcon}
+  iconPosition="right"
+  iconClickable
+  onIconClick={openPicker}
+  {...rest}
+/>
+
+{#snippet pickerIcon()}
+  {#if type === "time"}<IconClock />{:else}<IconCalendar />{/if}
+{/snippet}
+
+<style>
+  /* We draw our own calendar/clock icon (opens the picker), so hide the browser's native indicator to
+	   avoid a double glyph. Value text + edit fields still theme via Input's --ui-color-text + color-scheme. */
+  :global(.ui-datetime::-webkit-calendar-picker-indicator) {
+    display: none;
+  }
+</style>

package/dist/components/DateTimeInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import { type Variant } from "../types/variants.js";
+type DateType = "datetime-local" | "date" | "time" | "month" | "week";
+interface Props extends Omit<HTMLInputAttributes, "type" | "value" | "size"> {
+    value?: string;
+    /** Which native picker to render. Default `datetime-local`. */
+    type?: DateType;
+    size?: Responsive<Size>;
+    /** Accent for the native picker highlights (via CSS `accent-color`). Default primary. */
+    variant?: Variant;
+    class?: string;
+    inputClass?: string;
+    element?: HTMLInputElement;
+    disabled?: boolean;
+}
+declare const DateTimeInput: import("svelte").Component<Props, {}, "element" | "value">;
+type DateTimeInput = ReturnType<typeof DateTimeInput>;
+export default DateTimeInput;

package/dist/components/Dialog.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import Card from "./Card.svelte";
+  import CardHeader from "./CardHeader.svelte";
+  import CardFooter from "./CardFooter.svelte";
+  import type { Snippet } from "svelte";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+
+  interface Props {
+    isOpen: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    variant?: "danger" | "normal";
+    /** Density tier — forwarded to the underlying Card / CardHeader / CardFooter. */
+    size?: Responsive<Size>;
+    showConfirm?: boolean;
+    showCancel?: boolean;
+    /** Allow dismissing by clicking the backdrop OR pressing Escape (default true). Set `false` for a
+     *  must-decide dialog (e.g. a destructive confirm) so only the buttons close it. */
+    dismissible?: boolean;
+    children?: Snippet;
+  }
+
+  let {
+    isOpen = $bindable(),
+    title = "Dialog",
+    message,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    onConfirm,
+    onCancel,
+    variant = "normal",
+    size = "md",
+    showConfirm = true,
+    showCancel = true,
+    dismissible = true,
+    children,
+  }: Props = $props();
+
+  // Move the overlay to <body> so it's a real top-level layer — never a sibling of the trigger (which
+  // would perturb surrounding layout, e.g. flip a space-y `:last-child`) and never clipped by an
+  // ancestor's overflow/stacking context. This is what makes it an actual modal, not an inline box.
+  function portal(node: HTMLElement) {
+    document.body.appendChild(node);
+    return { destroy: () => node.remove() };
+  }
+
+  // Lock background scroll while open; pad by the scrollbar width so hiding it doesn't shift the page
+  // sideways. Restore exactly what was there on close/destroy.
+  $effect(() => {
+    if (!isOpen) return;
+    const sbw = window.innerWidth - document.documentElement.clientWidth;
+    const prevOverflow = document.body.style.overflow;
+    const prevPad = document.body.style.paddingRight;
+    document.body.style.overflow = "hidden";
+    if (sbw > 0) document.body.style.paddingRight = `${sbw}px`;
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      document.body.style.paddingRight = prevPad;
+    };
+  });
+
+  function handleConfirm() {
+    onConfirm?.();
+    isOpen = false;
+  }
+  function handleCancel() {
+    onCancel?.();
+    isOpen = false;
+  }
+  // Backdrop click / Escape only dismiss when allowed.
+  function dismiss() {
+    if (dismissible) handleCancel();
+  }
+  function handleBackdropClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) dismiss();
+  }
+  function handleKeydown(event: KeyboardEvent) {
+    if (isOpen && event.key === "Escape") dismiss();
+  }
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+{#if isOpen}
+  <div
+    use:portal
+    class="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
+    onclick={handleBackdropClick}
+    onkeydown={handleKeydown}
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+  >
+    <!-- The panel IS a Card — border + --ui-border-radius + padding + background come from Card, so a
+         Dialog stays consistent with every other surface; CardHeader/CardFooter give the title + action
+         rows their (inset) separators and spacing. `size` flows to all three. -->
+    <Card {size} class="max-w-md w-full mx-4 shadow-xl z-[10000]">
+      <CardHeader {size}>
+        <h3 class="text-lg font-medium [color:var(--ui-color-text)]">{title}</h3>
+      </CardHeader>
+
+      {#if children}
+        {@render children()}
+      {:else if message}
+        <p class="text-sm [color:color-mix(in_srgb,var(--ui-color-text)_70%,transparent)]">
+          {message}
+        </p>
+      {/if}
+
+      {#if showConfirm || showCancel}
+        <CardFooter {size}>
+          {#if showCancel}
+            <Button text={cancelText} onclick={handleCancel} variant="secondary" />
+          {/if}
+          {#if showConfirm}
+            <Button
+              text={confirmText}
+              onclick={handleConfirm}
+              variant={variant === "danger" ? "danger" : "primary"}
+            />
+          {/if}
+        </CardFooter>
+      {/if}
+    </Card>
+  </div>
+{/if}

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

@@ -0,0 +1,24 @@
+import type { Snippet } from "svelte";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+interface Props {
+    isOpen: boolean;
+    title?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    variant?: "danger" | "normal";
+    /** Density tier — forwarded to the underlying Card / CardHeader / CardFooter. */
+    size?: Responsive<Size>;
+    showConfirm?: boolean;
+    showCancel?: boolean;
+    /** Allow dismissing by clicking the backdrop OR pressing Escape (default true). Set `false` for a
+     *  must-decide dialog (e.g. a destructive confirm) so only the buttons close it. */
+    dismissible?: boolean;
+    children?: Snippet;
+}
+declare const Dialog: import("svelte").Component<Props, {}, "isOpen">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;