@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.10.ff03a8d

package/dist/index.js

@@ -1,26 +1,51 @@
 // Reexport your entry components here
+export { default as Alert } from "./components/Alert.svelte";
+export { default as Banner } from "./components/Banner.svelte";
 export { default as Badge } from "./components/Badge/Badge.svelte";
-export { default as Button } from "./components/Button/Button.svelte";
-export { default as Dialog } from "./components/Dialog/Dialog.svelte";
-export { default as Input } from "./components/Input/Input.svelte";
-export { default as NotesEditor } from "./components/NotesEditor/NotesEditor.svelte";
-export { default as Rating } from "./components/Rating/Rating.svelte";
-export { default as Select } from "./components/Select/Select.svelte";
-export { default as List } from "./components/List/List.svelte";
-export { default as ListView } from "./components/ListView/ListView.svelte";
-export { default as ListItem } from "./components/ListItem/ListItem.svelte";
-export { default as TextArea } from "./components/TextArea/TextArea.svelte";
-export { default as Icon } from "./components/Icon/Icon.svelte";
-export { default as ScrollView } from "./components/ScrollView/ScrollView.svelte";
+export { default as Button } from "./components/Button.svelte";
+export { default as ButtonDropdown } from "./components/ButtonDropdown.svelte";
+export { default as Card } from "./components/Card.svelte";
+export { default as CardHeader } from "./components/CardHeader.svelte";
+export { default as CardBody } from "./components/CardBody.svelte";
+export { default as CardFooter } from "./components/CardFooter.svelte";
+// Toast notifications — `toast.*` pushes from anywhere; mount <Toaster /> once at the app root.
+export { default as Toaster } from "./components/Toast/Toaster.svelte";
+export { toast, getToasts, dismissToast, } from "./components/Toast/toast.svelte.js";
+export { default as Dialog } from "./components/Dialog.svelte";
+export { default as ConfirmDialog } from "./components/ConfirmDialog.svelte";
+export { default as Input } from "./components/Input.svelte";
+export { default as NotesEditor } from "./components/NotesEditor.svelte";
+export { default as Rating } from "./components/Rating.svelte";
+export { default as Select } from "./components/Select.svelte";
+export { default as List } from "./components/List.svelte";
+export { default as TextArea } from "./components/TextArea.svelte";
 // Specialized Input Components
-export { default as PasswordInput } from "./components/PasswordInput/PasswordInput.svelte";
-export { default as EmailInput } from "./components/EmailInput/EmailInput.svelte";
-export { default as SearchInput } from "./components/SearchInput/SearchInput.svelte";
-export { default as NumberInput } from "./components/NumberInput/NumberInput.svelte";
+export { default as PasswordInput } from "./components/PasswordInput.svelte";
+export { default as EmailInput } from "./components/EmailInput.svelte";
+export { default as SearchInput } from "./components/SearchInput.svelte";
+export { default as NumberInput } from "./components/NumberInput.svelte";
+export { default as DateTimeInput } from "./components/DateTimeInput.svelte";
+export { default as Calendar } from "./components/Calendar.svelte";
+export { default as DatePicker } from "./components/DatePicker.svelte";
+export { default as TimeSpinner } from "./components/TimeSpinner.svelte";
+export { default as TimePicker } from "./components/TimePicker.svelte";
+export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
 // Theme Components
-export { default as ThemeSelector } from "./components/ThemeSelector/ThemeSelector.svelte";
+export { default as ThemeSelector } from "./components/ThemeSelector.svelte";
 // Utility Components
-export { default as ElementManager } from "./components/ElementManager/ElementManager.svelte";
-export { default as TooltipHandler } from "./components/TooltipHandler/TooltipHandler.svelte";
-// NodeGraph System
-export { NodeGraph, Node, NodePort, Edge, NodeDecorator, Input as InputDecorator, Output as OutputDecorator, BaseNode, NodeInstance, ExpressionEvaluator, } from "./components/NodeGraph/index.js";
+export { default as Popup } from "./components/Popup.svelte";
+export { default as Menu } from "./components/Menu.svelte";
+export { default as Checkbox } from "./components/Checkbox.svelte";
+export { default as Toggle } from "./components/Toggle.svelte";
+// Navigation Components
+export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
+export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";
+// Data table (pairs with the `svelte-ui/data` headless layer)
+export { default as DataTable } from "./components/DataTable.svelte";
+export { default as Query } from "./components/Query.svelte";
+// Positioning engine (shared by Popup and tooltips)
+export { anchored, computePlacement, resolveBoundary } from "./positioning/anchored.js";
+// Tooltip action (use:tooltip) — themed tooltips on the `anchored` engine, no global handler.
+export { tooltip } from "./positioning/tooltip.js";
+export { BREAKPOINT_PX } from "./types/breakpoints.js";
+export { responsiveClasses, resolveScalar } from "./types/responsive.js";

package/dist/positioning/anchored.d.ts

@@ -0,0 +1,61 @@
+/**
+ * anchored — the shared placement engine.
+ *
+ * Extracted from TooltipHandler's positioning math and generalized so interactive popovers
+ * (Popup/Menu) and tooltips can share one engine. Pure geometry + a thin Svelte action.
+ *
+ * Boundary model (matches the old TooltipHandler): a popover is placed within a boundary that
+ * defaults to the **viewport**, or an explicit container (HTMLElement or CSS selector).
+ */
+export type Side = "top" | "right" | "bottom" | "left";
+export type Align = "start" | "center" | "end";
+export type Boundary = "viewport" | HTMLElement | string;
+export interface PlaceOptions {
+    /** Preferred side; flips to the opposite (then scans) if it doesn't fit. Default 'bottom'. */
+    side?: Side;
+    /** Cross-axis alignment of the floating box relative to the anchor. Default 'start'. */
+    align?: Align;
+    /** Gap between anchor and floating box, in px. Default 4. */
+    offset?: number;
+    /** Minimum gap kept from the boundary edges, in px. Default 8. */
+    margin?: number;
+    /** Resolve the boundary rect the placement must stay within. Default the viewport. */
+    boundary?: Boundary;
+}
+export interface Placement {
+    x: number;
+    y: number;
+    /** The side actually chosen after flip/scan. */
+    side: Side;
+    /** Max height (px) the floating box may use on the chosen side before hitting the boundary. */
+    maxHeight: number;
+}
+/** Resolve a Boundary into a rect (in viewport coordinates), accounting for scrollbars on viewport. */
+export declare function resolveBoundary(boundary?: Boundary): DOMRect;
+/**
+ * Compute where to place a floating box of `size` next to `anchor`, within `boundary`.
+ * Vertical sides (top/bottom) align horizontally per `align`; horizontal sides (left/right) align
+ * vertically per `align`. Flips to the opposite side, then scans, when the preferred side won't fit.
+ */
+export declare function computePlacement(anchor: DOMRect, size: {
+    width: number;
+    height: number;
+}, opts?: PlaceOptions): Placement;
+export interface AnchoredParams extends PlaceOptions {
+    /** The trigger element the floating box is positioned against. */
+    anchor: HTMLElement | undefined;
+    /** When false, positioning is skipped (e.g. popup closed). Default true. */
+    enabled?: boolean;
+    /** Floating width = anchor width (selects/comboboxes). */
+    matchWidth?: boolean;
+    /** Called after each (re)position with the resolved placement. */
+    onplaced?: (p: Placement) => void;
+}
+/**
+ * Svelte action for the floating element: positions it (position: fixed) against `params.anchor`
+ * and keeps it placed on scroll/resize. Pair with the Popover API (top layer) so nothing clips it.
+ */
+export declare function anchored(node: HTMLElement, params: AnchoredParams): {
+    update(next: AnchoredParams): void;
+    destroy(): void;
+};

package/dist/positioning/anchored.js

@@ -0,0 +1,122 @@
+/**
+ * anchored — the shared placement engine.
+ *
+ * Extracted from TooltipHandler's positioning math and generalized so interactive popovers
+ * (Popup/Menu) and tooltips can share one engine. Pure geometry + a thin Svelte action.
+ *
+ * Boundary model (matches the old TooltipHandler): a popover is placed within a boundary that
+ * defaults to the **viewport**, or an explicit container (HTMLElement or CSS selector).
+ */
+const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+/** Resolve a Boundary into a rect (in viewport coordinates), accounting for scrollbars on viewport. */
+export function resolveBoundary(boundary = "viewport") {
+    if (boundary !== "viewport") {
+        const el = typeof boundary === "string" ? document.querySelector(boundary) : boundary;
+        if (el instanceof HTMLElement)
+            return el.getBoundingClientRect();
+    }
+    const w = document.documentElement.clientWidth;
+    const h = document.documentElement.clientHeight;
+    return new DOMRect(0, 0, w, h);
+}
+/**
+ * Compute where to place a floating box of `size` next to `anchor`, within `boundary`.
+ * Vertical sides (top/bottom) align horizontally per `align`; horizontal sides (left/right) align
+ * vertically per `align`. Flips to the opposite side, then scans, when the preferred side won't fit.
+ */
+export function computePlacement(anchor, size, opts = {}) {
+    const { side = "bottom", align = "start", offset = 4, margin = 8 } = opts;
+    const b = resolveBoundary(opts.boundary);
+    const { width: fw, height: fh } = size;
+    const fits = (s) => {
+        switch (s) {
+            case "top":
+                return anchor.top - fh - offset >= b.top + margin;
+            case "bottom":
+                return anchor.bottom + fh + offset <= b.bottom - margin;
+            case "left":
+                return anchor.left - fw - offset >= b.left + margin;
+            case "right":
+                return anchor.right + fw + offset <= b.right - margin;
+        }
+    };
+    // Pick a side: preferred -> opposite -> first that fits -> preferred (overflowing).
+    let chosen = side;
+    if (!fits(side)) {
+        if (fits(opposite[side]))
+            chosen = opposite[side];
+        else
+            chosen = ["bottom", "top", "right", "left"].find(fits) ?? side;
+    }
+    // Available space on the chosen side -> maxHeight (for scrollable menus).
+    const maxHeight = chosen === "bottom"
+        ? b.bottom - margin - (anchor.bottom + offset)
+        : chosen === "top"
+            ? anchor.top - offset - (b.top + margin)
+            : b.height - 2 * margin;
+    // Primary-axis position.
+    let x = 0;
+    let y = 0;
+    if (chosen === "top" || chosen === "bottom") {
+        y = chosen === "bottom" ? anchor.bottom + offset : anchor.top - fh - offset;
+        x =
+            align === "center"
+                ? anchor.left + anchor.width / 2 - fw / 2
+                : align === "end"
+                    ? anchor.right - fw
+                    : anchor.left;
+    }
+    else {
+        x = chosen === "right" ? anchor.right + offset : anchor.left - fw - offset;
+        y =
+            align === "center"
+                ? anchor.top + anchor.height / 2 - fh / 2
+                : align === "end"
+                    ? anchor.bottom - fh
+                    : anchor.top;
+    }
+    // Clamp into the boundary (shift), so the box never spills past the edges.
+    x = Math.min(Math.max(x, b.left + margin), b.right - margin - fw);
+    y = Math.min(Math.max(y, b.top + margin), b.bottom - margin - fh);
+    return { x, y, side: chosen, maxHeight };
+}
+/**
+ * Svelte action for the floating element: positions it (position: fixed) against `params.anchor`
+ * and keeps it placed on scroll/resize. Pair with the Popover API (top layer) so nothing clips it.
+ */
+export function anchored(node, params) {
+    let current = params;
+    function place() {
+        const { anchor, enabled = true, matchWidth } = current;
+        if (!anchor || !enabled)
+            return;
+        const a = anchor.getBoundingClientRect();
+        if (matchWidth)
+            node.style.width = `${a.width}px`;
+        const size = { width: node.offsetWidth, height: node.offsetHeight };
+        if (size.width === 0 || size.height === 0) {
+            requestAnimationFrame(place);
+            return;
+        }
+        const p = computePlacement(a, size, current);
+        node.style.position = "fixed";
+        node.style.left = `${p.x}px`;
+        node.style.top = `${p.y}px`;
+        node.style.margin = "0";
+        current.onplaced?.(p);
+    }
+    const onScrollResize = () => place();
+    window.addEventListener("scroll", onScrollResize, { passive: true, capture: true });
+    window.addEventListener("resize", onScrollResize, { passive: true });
+    place();
+    return {
+        update(next) {
+            current = next;
+            place();
+        },
+        destroy() {
+            window.removeEventListener("scroll", onScrollResize, { capture: true });
+            window.removeEventListener("resize", onScrollResize);
+        },
+    };
+}

package/dist/positioning/tooltip.d.ts

@@ -0,0 +1,41 @@
+/**
+ * tooltip — a self-contained Svelte action for themed tooltips, built on the `anchored` engine.
+ *
+ *   <button use:tooltip>Delete</button>            // reads (and suppresses) the native `title`
+ *   <button use:tooltip={{ text: 'Delete' }}>…</button>   // explicit text (how Button feeds it)
+ *
+ * No global handler / ElementManager needed — each use:tooltip owns its own tooltip. The floating
+ * box is a top-layer popover positioned by `anchored` (same flip-vs-viewport math as Popup/Menu),
+ * styled with inline CSS + theme vars (so it never depends on Tailwind scanning the dist).
+ *
+ * a11y: when the element has no accessible name of its own (e.g. icon-only buttons), the text is
+ * also mirrored to `aria-label` so screen readers still get a name.
+ */
+import { type Side, type Align } from "./anchored.js";
+import { type Variant } from "../types/variants.js";
+import type { Size } from "../types/sizes.js";
+export interface TooltipOptions {
+    /** Tooltip text. Defaults to the element's `title` attribute (which is then suppressed). */
+    text?: string;
+    /** Preferred side; flips if it doesn't fit. Default 'top'. */
+    side?: Side;
+    /** Cross-axis alignment. Default 'center'. */
+    align?: Align;
+    /** Gap between the anchor and the tooltip edge, px. Default 8. */
+    offset?: number;
+    /** Show the callout triangle pointing at the anchor. Default true. */
+    arrow?: boolean;
+    /** Hover/focus open delay, ms. Default 400. */
+    delay?: number;
+    /** Colour of the bubble (+ arrow). Accent variants fill with their colour + white text; the default
+     *  (unset / `neutral` / `ghost`) is the `--ui-color-text` bubble with contrasting text. */
+    variant?: Variant;
+    /** Density — padding + text size (sm / md / lg). Default `md`. */
+    size?: Size;
+    /** Turn the tooltip off without removing the action. */
+    disabled?: boolean;
+}
+export declare function tooltip(node: HTMLElement, options?: TooltipOptions): {
+    update(next: TooltipOptions): void;
+    destroy(): void;
+};

package/dist/positioning/tooltip.js

@@ -0,0 +1,147 @@
+/**
+ * tooltip — a self-contained Svelte action for themed tooltips, built on the `anchored` engine.
+ *
+ *   <button use:tooltip>Delete</button>            // reads (and suppresses) the native `title`
+ *   <button use:tooltip={{ text: 'Delete' }}>…</button>   // explicit text (how Button feeds it)
+ *
+ * No global handler / ElementManager needed — each use:tooltip owns its own tooltip. The floating
+ * box is a top-layer popover positioned by `anchored` (same flip-vs-viewport math as Popup/Menu),
+ * styled with inline CSS + theme vars (so it never depends on Tailwind scanning the dist).
+ *
+ * a11y: when the element has no accessible name of its own (e.g. icon-only buttons), the text is
+ * also mirrored to `aria-label` so screen readers still get a name.
+ */
+import { anchored } from "./anchored.js";
+import { variantToken } from "../types/variants.js";
+// Per-size padding + text (the bubble is deliberately compact vs a control).
+const TOOLTIP_SIZE = {
+    sm: "padding:0.2rem 0.4rem;font-size:0.7rem;line-height:0.95rem;",
+    md: "padding:0.3rem 0.5rem;font-size:0.75rem;line-height:1rem;",
+    lg: "padding:0.45rem 0.65rem;font-size:0.875rem;line-height:1.25rem;",
+};
+export function tooltip(node, options = {}) {
+    let opts = options;
+    let text = "";
+    let tip = null;
+    let placement = null;
+    let timer;
+    let ariaSet = false; // whether WE set aria-label (so we only clear our own)
+    // Resolve text from the option or the native `title` (which we strip to kill the OS tooltip),
+    // and backstop the accessible name for elements that have none.
+    function sync() {
+        const fromAttr = node.getAttribute("title");
+        text = (opts.text ?? fromAttr ?? "").trim();
+        if (fromAttr !== null)
+            node.removeAttribute("title"); // suppress native tooltip
+        const hasName = !!node.getAttribute("aria-label") && !ariaSet;
+        const hasText = !!node.textContent?.trim();
+        if (text && !hasName && !hasText) {
+            node.setAttribute("aria-label", text);
+            ariaSet = true;
+        }
+        else if (ariaSet && !text) {
+            node.removeAttribute("aria-label");
+            ariaSet = false;
+        }
+    }
+    // Place the callout triangle on the edge opposite the (post-flip) side, pointing at the anchor
+    // centre and clamped off the rounded corners. Runs on every (re)placement via `onplaced`.
+    function positionArrow(arrowEl, box, p) {
+        const a = node.getBoundingClientRect();
+        const w = box.offsetWidth;
+        const h = box.offsetHeight;
+        const pad = 12; // keep clear of the rounded corners
+        arrowEl.style.top = arrowEl.style.bottom = arrowEl.style.left = arrowEl.style.right = "";
+        if (p.side === "top" || p.side === "bottom") {
+            arrowEl.style.left = `${Math.min(Math.max(a.left + a.width / 2 - p.x, pad), w - pad)}px`;
+            arrowEl.style[p.side === "top" ? "bottom" : "top"] = "0";
+            arrowEl.style.transform = `translate(-50%, ${p.side === "top" ? "50%" : "-50%"}) rotate(45deg)`;
+        }
+        else {
+            arrowEl.style.top = `${Math.min(Math.max(a.top + a.height / 2 - p.y, pad), h - pad)}px`;
+            arrowEl.style[p.side === "left" ? "right" : "left"] = "0";
+            arrowEl.style.transform = `translate(${p.side === "left" ? "50%" : "-50%"}, -50%) rotate(45deg)`;
+        }
+    }
+    function show() {
+        if (tip || !text || opts.disabled)
+            return;
+        tip = document.createElement("div");
+        tip.setAttribute("role", "tooltip");
+        tip.setAttribute("popover", "manual");
+        // variant → bubble colour. Accent variants fill with their token + white text; neutral/ghost
+        // (and no variant) keep the --ui-color-text bubble with contrasting (background) text.
+        const token = opts.variant ? variantToken[opts.variant] : "--ui-color-text";
+        const bg = `var(${token})`;
+        const fg = token === "--ui-color-text" ? "var(--ui-color-background)" : "white";
+        tip.style.cssText =
+            "position:fixed;inset:auto;margin:0;border:0;z-index:9999;width:max-content;max-width:16rem;" +
+                // overflow:visible so the arrow can poke past the edge — the popover UA style otherwise
+                // clips it (hidden triangle) and adds a scrollbar.
+                "overflow:visible;border-radius:0.375rem;" +
+                TOOLTIP_SIZE[opts.size ?? "md"] +
+                `background-color:${bg};color:${fg};` +
+                "box-shadow:0 4px 12px rgba(0,0,0,0.15);pointer-events:none;white-space:normal;";
+        // Callout triangle: a rotated square in the tooltip's bg, appended BEFORE the label so it
+        // paints behind it — its outer half pokes past the edge (the triangle), its inner half merges
+        // seamlessly with the background.
+        let arrowEl = null;
+        if (opts.arrow !== false) {
+            arrowEl = document.createElement("div");
+            arrowEl.style.cssText = `position:absolute;width:0.5rem;height:0.5rem;background-color:${bg};`;
+            tip.appendChild(arrowEl);
+        }
+        const label = document.createElement("span");
+        label.textContent = text;
+        tip.appendChild(label);
+        document.body.appendChild(tip);
+        // Show first (so it has a measurable size), then position against the trigger.
+        tip.showPopover?.();
+        const box = tip;
+        placement = anchored(tip, {
+            anchor: node,
+            side: opts.side ?? "top",
+            align: opts.align ?? "center",
+            offset: opts.offset ?? 8,
+            onplaced: arrowEl ? (p) => positionArrow(arrowEl, box, p) : undefined,
+        });
+    }
+    function hide() {
+        clearTimeout(timer);
+        placement?.destroy();
+        placement = null;
+        if (tip) {
+            tip.hidePopover?.();
+            tip.remove();
+            tip = null;
+        }
+    }
+    function onEnter() {
+        if (opts.disabled || !text)
+            return;
+        clearTimeout(timer);
+        timer = setTimeout(show, opts.delay ?? 400);
+    }
+    node.addEventListener("mouseenter", onEnter);
+    node.addEventListener("mouseleave", hide);
+    node.addEventListener("focusin", onEnter);
+    node.addEventListener("focusout", hide);
+    node.addEventListener("click", hide); // don't let it linger after activating the control
+    sync();
+    return {
+        update(next) {
+            opts = next ?? {};
+            sync();
+            if (tip)
+                hide(); // re-evaluate on next hover with fresh text/options
+        },
+        destroy() {
+            hide();
+            node.removeEventListener("mouseenter", onEnter);
+            node.removeEventListener("mouseleave", hide);
+            node.removeEventListener("focusin", onEnter);
+            node.removeEventListener("focusout", hide);
+            node.removeEventListener("click", hide);
+        },
+    };
+}

package/dist/theme.css

@@ -0,0 +1,205 @@
+/**
+ * svelte-ui theme — the single source of truth for library-wide design tokens.
+ *
+ * Every shared token lives under the `--ui-*` prefix. That's the contract for
+ * consumers: import this file, remap any `--ui-*` value to your palette, and
+ * every component follows in lockstep. No unprefixed tokens leak from svelte-ui
+ * into the host — so DaisyUI, Tailwind's built-ins, or any other design system
+ * can coexist at :root without collision.
+ *
+ * Two themes only — light (default) and dark. Dark follows the system
+ * preference automatically; force either with the `.theme-light` /
+ * `.theme-dark` classes (see <ThemeSelector />).
+ *
+ * NOTE: density spacing (padding, gap, per-component layout) is NOT a CSS
+ * token — components handle it via `Record<Size, string>` Tailwind class
+ * maps keyed off the `size` prop. Only shared design tokens (color, border,
+ * text-size, control-height, icon-size, radius) live here as vars.
+ */
+
+@theme {
+  /* Responsive breakpoints. Tailwind 4 ships sm/md/lg/xl/2xl by default;
+	 * we add narrow-mobile tiers (4xs/3xs/2xs/xs) and an ultrawide tier
+	 * (3xl) so DataTable's column placements can target the full range. */
+  --breakpoint-4xs: 320px; /* iPhone SE (1st gen), absolute mobile minimum */
+  --breakpoint-3xs: 360px; /* narrow Android */
+  --breakpoint-2xs: 420px; /* standard phone */
+  --breakpoint-xs: 480px; /* large phone / small tablet portrait */
+  --breakpoint-3xl: 1920px; /* FHD / 1080p — ultrawide */
+
+  /* ── Colour palette ────────────────────────────────────────────
+	 * Six semantic colours + background + text. Every component that
+	 * paints anything reads through here (either directly via
+	 * `var(--ui-color-*)` or via `variantToken[variant]`). */
+  --ui-color-background: #ffffff;
+  --ui-color-text: #111827;
+
+  --ui-color-primary: #1d4ed8;
+  --ui-color-secondary: #0891b2;
+  --ui-color-success: #059669;
+  --ui-color-warning: #d97706;
+  --ui-color-error: #dc2626;
+  --ui-color-info: #0ea5e9;
+
+  /* ── Density scale ─────────────────────────────────────────────
+	 * The `size` axis (see types/sizes.ts). Components that need a
+	 * specific control-square height (icon buttons in lead/tail
+	 * columns, checkboxes, toggle knobs) read these directly. */
+  --ui-height-sm: 1.5rem; /* 24px — compact */
+  --ui-height: 2rem; /* 32px — md, default */
+  --ui-height-lg: 2.5rem; /* 40px — large */
+  --ui-height-touch: 2.75rem; /* 44px — explicit touch target (WCAG/Apple); NOT the lg size */
+
+  /* ── Text + icon scale ─────────────────────────────────────────
+	 * Parallel to the height scale. Components pick the matching tier
+	 * so density propagates uniformly (control height + label text +
+	 * inline icon). */
+  --ui-text-sm: 0.75rem; /* 12px */
+  --ui-text: 0.875rem; /* 14px — md, default */
+  --ui-text-lg: 1rem; /* 16px */
+  --ui-icon-sm: 0.875rem; /* 14px */
+  --ui-icon: 1rem; /* 16px — md, default */
+  --ui-icon-lg: 1.25rem; /* 20px */
+
+  /* ── Border + radius ───────────────────────────────────────────
+	 *  --ui-border-radius             corner radius — the ONE value every rectangular surface uses
+	 *                                 (Button, Input, Card, Dialog[via Card], Alert, Banner, DataTable…).
+	 *                                 Fixed, NOT scaled by `size`, so different-size controls share a
+	 *                                 corner. (Pills like Toggle/Badge use rounded-full; the tiny
+	 *                                 Checkbox box keeps its own small radius — not worth a token.)
+	 *  --ui-border-color              soft internal divider (row separators, section splits) */
+  --ui-border-radius: 0.375rem;
+  --ui-border-color: color-mix(in srgb, var(--ui-color-secondary) 30%, transparent);
+}
+
+/* One interactive-surface language, library-wide. A subtle tint of the ACCENT colour, so it lightens on
+ * dark themes and darkens on light. Three steps of the SAME tint, from lightest to strongest:
+ *   --ui-color-hover    row / option / ghost-button hover      ( 4% — lightest)
+ *   --ui-color-surface  header / footer / section bands        ( 8% — a notch darker than hover)
+ *   --ui-color-active   pressed / held                         (12% — strongest)
+ * Every interactive + section background references these — change here, change everywhere.
+ *
+ * The accent is --ui-accent, which DEFAULTS to the neutral text colour (so out of the box these are grey
+ * tints, exactly as before). Point --ui-accent at a semantic colour and the tints follow — that's how a
+ * variant colours a whole surface (e.g. <DataTable variant="primary">). Because a bare --ui-accent
+ * override on a descendant will NOT re-tint a token that was computed higher up (a custom property that
+ * references others resolves at its DEFINING element, then inherits already-resolved — verified), any
+ * element that overrides --ui-accent must also carry `.ui-accent` (below) to RE-MIX the three tokens.
+ *
+ * NOT in @theme, and repeated in EVERY theme scope (not defined once at :root), for two reasons:
+ *  1. Tailwind v4 only emits an @theme var that backs a recognised utility; it never scans inside
+ *     arbitrary classes like `[background-color:var(--ui-color-hover)]`, so an @theme home gets these
+ *     tree-shaken out of the final bundle (hover worked off the SSR critical CSS during load, then died).
+ *  2. Same freeze rule as above: defined only at :root, a switcher putting .theme-* on <body> (or any
+ *     subtree) would leave these frozen to :root's theme (a white hover onto a light page → invisible).
+ *     Repeating them per theme scope makes them re-resolve wherever the theme class lands.
+ * The percentages are theme-INDEPENDENT (identical in light and dark); only --ui-accent's colour flips. */
+:root {
+  /* light default — no theme class + light system */
+  --ui-accent: var(--ui-color-text);
+  --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
+  --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
+  --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
+
+  /* Tint SCALE for a variant-tinted surface (Badge chip, Card frame, `filled` Alert…). The colour is
+	 * always the component's own variant token; these are the shared STRENGTHS it's mixed at, so every
+	 * tinted surface is calculated the same way — change one number here, every component follows:
+	 *   fill:   color-mix(in srgb, var(<token>) var(--ui-tint-soft),         transparent)   soft resting fill
+	 *   border: color-mix(in srgb, var(<token>) var(--ui-tint-border),       transparent)   divider/frame (rest)
+	 *   hover:  color-mix(in srgb, var(<token>) var(--ui-tint-border-hover), transparent)   bordered field, hover/focus
+	 *   text:   color-mix(in srgb, var(<token>) var(--ui-tint-strong), var(--ui-color-text))  foreground
+	 * A primary badge is primary@soft/border/strong; a neutral one is text@… — one calculation, any
+	 * variant. `--ui-tint-border-hover` is the STRONGER step an interactive bordered field (Input,
+	 * TextArea, an outline Button) moves to on hover/focus. Theme-independent constants (no colour → no
+	 * per-theme scope needed) — but a theme MAY override these to tune the whole tint language. */
+  --ui-tint-soft: 12%;
+  --ui-tint-border: 50%;
+  --ui-tint-border-hover: 80%;
+  --ui-tint-strong: 80%;
+}
+
+/* Accent scoping — opt-in. Set --ui-accent on an element with this class (components do this from a
+ * `variant` prop) and the interactive tints RE-MIX from it. The re-mix must happen here (not merely by
+ * inheriting an overridden --ui-accent) because the theme-scope tokens above already resolved against
+ * the neutral default; see the freeze note. Default accent stays neutral text if --ui-accent is unset. */
+.ui-accent {
+  --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
+  --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
+  --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
+}
+
+body {
+  background-color: var(--ui-color-background);
+  color: var(--ui-color-text);
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+/* Dark palette, shared by the system-preference query and the .theme-dark force class. */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ui-color-background: #111827;
+    --ui-color-text: #f9fafb;
+    --ui-color-primary: #2563eb;
+    --ui-color-secondary: #06b6d4;
+    --ui-color-success: #10b981;
+    --ui-color-warning: #f59e0b;
+    --ui-color-error: #ef4444;
+    --ui-color-info: #06b6d4;
+    --ui-accent: var(--ui-color-text);
+    --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
+    --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
+    --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
+    color-scheme: dark;
+  }
+}
+
+.theme-light {
+  --ui-color-background: #ffffff;
+  --ui-color-text: #111827;
+  --ui-color-primary: #1d4ed8;
+  --ui-color-secondary: #0891b2;
+  --ui-color-success: #059669;
+  --ui-color-warning: #d97706;
+  --ui-color-error: #dc2626;
+  --ui-color-info: #0ea5e9;
+  /* forced light must re-assert the tint (overrides the dark @media above) */
+  --ui-accent: var(--ui-color-text);
+  --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
+  --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
+  --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
+  color-scheme: light;
+}
+
+.theme-dark {
+  --ui-color-background: #111827;
+  --ui-color-text: #f9fafb;
+  --ui-color-primary: #2563eb;
+  --ui-color-secondary: #06b6d4;
+  --ui-color-success: #10b981;
+  --ui-color-warning: #f59e0b;
+  --ui-color-error: #ef4444;
+  --ui-color-info: #06b6d4;
+  --ui-accent: var(--ui-color-text);
+  --ui-color-hover: color-mix(in srgb, var(--ui-accent) 4%, transparent);
+  --ui-color-surface: color-mix(in srgb, var(--ui-accent) 8%, transparent);
+  --ui-color-active: color-mix(in srgb, var(--ui-accent) 12%, transparent);
+  color-scheme: dark;
+}
+
+/* ── Responsive size/variant safelist ──────────────────────────────────────────────────────────
+ * Components accept `size`/`variant` as a scalar OR a per-breakpoint map (Responsive<T>, see
+ * types/responsive.ts) and build `bp:`-prefixed Tailwind classes at RUNTIME — which Tailwind can't
+ * discover by scanning source. Safelist every size utility family across every tier here so the
+ * classes exist; consuming apps inherit this through `@import 'svelte-ui/theme.css'`. The leading
+ * `{,4xs:,…,3xl:}` alternation emits the unprefixed class plus one per breakpoint. Keep this in sync
+ * with the per-Size class maps in the components (heights, widths, padding, text, inline-icon svg). */
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}{h,w,size}-{3,3.5,4,5,6,7,8,9,10,11,14}");
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}p-{1.5,2,3,4,6,8}");
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}px-{1.5,2,2.5,3,4,5,6}");
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}py-{0.5,1,1.5,2,2.5,3}");
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}{pt,pb}-{2,3,4}");
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}gap-{1.5,2,3}");
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}text-{xs,sm,base,lg,2xl}");
+@source inline("{,4xs:,3xs:,2xs:,xs:,sm:,md:,lg:,xl:,2xl:,3xl:}[&_svg]:{w,h}-{3.5,4,5,6}");