@marianmeres/stuic 3.120.0 → 3.121.0

package/dist/actions/draggable.svelte.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Options for the {@link draggable} action.
+ */
+export interface DraggableOptions {
+    /** Master switch. When `false` the action is inert. Default `true`. */
+    enabled?: boolean;
+    /**
+     * CSS selector for descendants that must NOT initiate a drag. A `pointerdown`
+     * whose target matches (via `closest`) is ignored — e.g. `"[data-no-drag]"`
+     * for buttons living inside an otherwise-draggable header.
+     */
+    ignore?: string;
+    /**
+     * Distance in px the pointer must travel before the gesture counts as a real
+     * drag (reported via `onEnd`'s `moved`). Used by consumers to distinguish a
+     * click/double-click from a drag. Default `3`.
+     */
+    threshold?: number;
+    /** Called on a valid drag start (pointer captured). */
+    onStart?: (e: PointerEvent) => void;
+    /**
+     * Called on every pointer move while dragging, with the cumulative delta from
+     * the drag's start point.
+     */
+    onMove?: (delta: {
+        dx: number;
+        dy: number;
+    }, e: PointerEvent) => void;
+    /** Called when the drag ends; `moved` is `true` if it passed `threshold`. */
+    onEnd?: (info: {
+        moved: boolean;
+    }, e: PointerEvent) => void;
+}
+/**
+ * A Svelte action that turns an element into a drag handle and reports pointer
+ * deltas — without taking any opinion on what gets moved. The consumer owns the
+ * positioned element, clamping, and persistence; this action only translates
+ * pointer gestures into `{dx, dy}` deltas.
+ *
+ * Built on Pointer Events with pointer capture, so a single code path covers
+ * mouse, touch and pen, and the drag keeps tracking even if the pointer leaves
+ * the element. Pair with `touch-action: none` on the handle to stop the browser
+ * from scrolling/zooming mid-drag.
+ *
+ * @param node - The handle element.
+ * @param fn - Function returning the current {@link DraggableOptions}.
+ *
+ * @example
+ * ```svelte
+ * <div
+ *   use:draggable={() => ({
+ *     ignore: "[data-no-drag]",
+ *     onStart: () => (start = { ...pos }),
+ *     onMove: ({ dx, dy }) => (pos = clamp(start.x + dx, start.y + dy)),
+ *     onEnd: ({ moved }) => (wasDragged = moved),
+ *   })}
+ * >
+ *   drag me
+ * </div>
+ * ```
+ */
+export declare function draggable(node: HTMLElement, fn?: () => DraggableOptions): void;

package/dist/actions/draggable.svelte.js

@@ -0,0 +1,93 @@
+/**
+ * A Svelte action that turns an element into a drag handle and reports pointer
+ * deltas — without taking any opinion on what gets moved. The consumer owns the
+ * positioned element, clamping, and persistence; this action only translates
+ * pointer gestures into `{dx, dy}` deltas.
+ *
+ * Built on Pointer Events with pointer capture, so a single code path covers
+ * mouse, touch and pen, and the drag keeps tracking even if the pointer leaves
+ * the element. Pair with `touch-action: none` on the handle to stop the browser
+ * from scrolling/zooming mid-drag.
+ *
+ * @param node - The handle element.
+ * @param fn - Function returning the current {@link DraggableOptions}.
+ *
+ * @example
+ * ```svelte
+ * <div
+ *   use:draggable={() => ({
+ *     ignore: "[data-no-drag]",
+ *     onStart: () => (start = { ...pos }),
+ *     onMove: ({ dx, dy }) => (pos = clamp(start.x + dx, start.y + dy)),
+ *     onEnd: ({ moved }) => (wasDragged = moved),
+ *   })}
+ * >
+ *   drag me
+ * </div>
+ * ```
+ */
+export function draggable(node, fn) {
+    $effect(() => {
+        const { enabled = true, ignore, threshold = 3, onStart, onMove, onEnd, } = fn?.() || {};
+        if (!enabled)
+            return;
+        let dragging = false;
+        let moved = false;
+        let startX = 0;
+        let startY = 0;
+        let pointerId = -1;
+        function onPointerDown(e) {
+            // primary button / touch / pen only
+            if (e.button !== 0 && e.pointerType === "mouse")
+                return;
+            if (ignore && e.target?.closest?.(ignore))
+                return;
+            dragging = true;
+            moved = false;
+            startX = e.clientX;
+            startY = e.clientY;
+            pointerId = e.pointerId;
+            try {
+                node.setPointerCapture(e.pointerId);
+            }
+            catch {
+                /* capture is best-effort */
+            }
+            document.body.style.userSelect = "none";
+            onStart?.(e);
+        }
+        function onPointerMove(e) {
+            if (!dragging)
+                return;
+            const dx = e.clientX - startX;
+            const dy = e.clientY - startY;
+            if (!moved && Math.hypot(dx, dy) > threshold)
+                moved = true;
+            onMove?.({ dx, dy }, e);
+        }
+        function onPointerUp(e) {
+            if (!dragging)
+                return;
+            dragging = false;
+            try {
+                node.releasePointerCapture(pointerId);
+            }
+            catch {
+                /* noop */
+            }
+            document.body.style.userSelect = "";
+            onEnd?.({ moved }, e);
+        }
+        node.addEventListener("pointerdown", onPointerDown);
+        node.addEventListener("pointermove", onPointerMove);
+        node.addEventListener("pointerup", onPointerUp);
+        node.addEventListener("pointercancel", onPointerUp);
+        return () => {
+            node.removeEventListener("pointerdown", onPointerDown);
+            node.removeEventListener("pointermove", onPointerMove);
+            node.removeEventListener("pointerup", onPointerUp);
+            node.removeEventListener("pointercancel", onPointerUp);
+            document.body.style.userSelect = "";
+        };
+    });
+}

package/dist/actions/index.d.ts

@@ -2,6 +2,7 @@ export * from "./autogrow.svelte.js";
 export * from "./onboarding/onboarding.svelte.js";
 export * from "./autoscroll.js";
 export * from "./dim-behind/dim-behind.svelte.js";
+export * from "./draggable.svelte.js";
 export * from "./file-dropzone.svelte.js";
 export * from "./focus-trap.js";
 export * from "./highlight-dragover.svelte.js";

package/dist/actions/index.js

@@ -2,6 +2,7 @@ export * from "./autogrow.svelte.js";
 export * from "./onboarding/onboarding.svelte.js";
 export * from "./autoscroll.js";
 export * from "./dim-behind/dim-behind.svelte.js";
+export * from "./draggable.svelte.js";
 export * from "./file-dropzone.svelte.js";
 export * from "./focus-trap.js";
 export * from "./highlight-dragover.svelte.js";

package/dist/components/Float/Float.fixture.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	// Float's runtime control is imperative (methods via a ref), so the browser
+	// test drives it through this fixture: it holds the `bind:this` ref and exposes
+	// testid buttons that call each method. Float props are forwarded via `...rest`.
+	import Float from "./Float.svelte";
+
+	let float = $state<Float>();
+	let { ...rest } = $props();
+</script>
+
+<button data-testid="m-minimize" onclick={() => float?.minimize()}>minimize</button>
+<button data-testid="m-expand" onclick={() => float?.expand()}>expand</button>
+<button data-testid="m-toggle" onclick={() => float?.toggleMinimize()}>toggle</button>
+<button data-testid="m-moveto" onclick={() => float?.moveTo(123, 45)}>moveTo</button>
+<button
+	data-testid="m-placement-br"
+	onclick={() => float?.moveToPlacement("bottom-right")}
+>
+	placement
+</button>
+<button data-testid="m-front" onclick={() => float?.bringToFront()}>front</button>
+
+<Float bind:this={float} title="Panel" {...rest}>
+	<input data-testid="body-input" type="text" />
+	<p>body content</p>
+</Float>

package/dist/components/Float/Float.fixture.svelte.d.ts

@@ -0,0 +1,4 @@
+import Float from "./Float.svelte";
+declare const Float: import("svelte").Component<Record<string, any>, {}, "">;
+type Float = ReturnType<typeof Float>;
+export default Float;

package/dist/components/Float/Float.svelte

@@ -0,0 +1,369 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { THC } from "../Thc/Thc.svelte";
+	import type { FloatPlacement, FloatPoint } from "./float-utils.js";
+
+	let _uid = 0;
+
+	export interface Props extends Omit<
+		HTMLAttributes<HTMLDivElement>,
+		"title" | "draggable" | "class"
+	> {
+		/** Header title (rendered via `Thc`). Stays visible when minimized. */
+		title?: THC;
+		/** Initial left position in px. Overrides the `placement` x. */
+		x?: number;
+		/** Initial top position in px. Overrides the `placement` y. */
+		y?: number;
+		/** Initial placement preset, used for any axis `x`/`y` does not pin. */
+		placement?: FloatPlacement;
+		/** Edge gap (px) used when resolving `placement`. Number or `{x,y}`. */
+		offset?: number | Partial<FloatPoint>;
+		/** Panel width: a number (px) or any CSS length. Defaults to a token. */
+		width?: number | string;
+		/** Initial collapsed state. Runtime changes go through the methods below. */
+		minimized?: boolean;
+		/** Enable drag-repositioning by the header. Default `true`. */
+		draggable?: boolean;
+		/** Show the close `×` and enable `close()` / Escape. Default `false`. */
+		closable?: boolean;
+		/** Called by `close()`, the `×` button, and Escape (when closable). */
+		onClose?: () => void;
+		/** Close on Escape when `closable`. Default `true`. */
+		closeOnEscape?: boolean;
+		/** Raise above sibling Floats on pointerdown. Default `true`. */
+		bringToFrontOnClick?: boolean;
+		/**
+		 * Opt-in persistence key. When set, `{x, y, minimized}` is remembered
+		 * across reloads in localStorage under `stuic-float-<storageKey>`.
+		 */
+		storageKey?: string;
+		/** Minimum gap kept from every viewport edge while clamping. Default `0`. */
+		margin?: number;
+		/** Accessible labels for the built-in buttons. */
+		minimizeLabel?: string;
+		restoreLabel?: string;
+		closeLabel?: string;
+		/** Leading header slot (e.g. a grip/icon). Drag still works over it. */
+		icon?: Snippet;
+		/** Header actions slot, placed left of the minimize/close buttons. */
+		actions?: Snippet;
+		/** Body content (hidden when minimized). */
+		children?: Snippet;
+		/** Root element classes (merged). */
+		class?: string;
+		classHeader?: string;
+		classTitle?: string;
+		classActions?: string;
+		classBody?: string;
+		/** Drop all default styling (still positioned/draggable). */
+		unstyled?: boolean;
+		/** Bindable root element reference. */
+		el?: HTMLDivElement;
+	}
+</script>
+
+<script lang="ts">
+	import { untrack } from "svelte";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { localStorageState } from "../../utils/persistent-state.svelte.js";
+	import { draggable as draggableAction } from "../../actions/draggable.svelte.js";
+	import { iconChevronDown, iconX } from "../../icons/index.js";
+	import Thc, { isTHCNotEmpty } from "../Thc/Thc.svelte";
+	import { clampToViewport, resolvePlacement, type FloatSize } from "./float-utils.js";
+	import { nextFloatOrder } from "./float-stack.js";
+
+	let {
+		title,
+		x: xProp,
+		y: yProp,
+		placement = "top-right",
+		offset = 16,
+		width,
+		minimized: minimizedProp = false,
+		draggable = true,
+		closable = false,
+		onClose,
+		closeOnEscape = true,
+		bringToFrontOnClick = true,
+		storageKey,
+		margin = 0,
+		minimizeLabel = "Minimize",
+		restoreLabel = "Restore",
+		closeLabel = "Close",
+		icon,
+		actions,
+		children,
+		class: classProp,
+		classHeader,
+		classTitle,
+		classActions,
+		classBody,
+		unstyled = false,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	const titleId = `stuic-float-title-${_uid++}`;
+
+	// reactive runtime state. `minimizedProp`/`storageKey` are initial-only by
+	// design (runtime changes flow through the methods), so we capture them once.
+	let x = $state(0);
+	let y = $state(0);
+	let minimized = $state(untrack(() => minimizedProp));
+	let dragging = $state(false);
+	let zOrder = $state(0);
+	let initialized = $state(false);
+
+	// optional persistence (created once; key is not expected to change)
+	type Persisted = { x: number | null; y: number | null; minimized: boolean };
+	const persist = untrack(() =>
+		storageKey
+			? localStorageState<Persisted>(`stuic-float-${storageKey}`, {
+					x: null,
+					y: null,
+					minimized: minimizedProp,
+				})
+			: null
+	);
+
+	function viewport(): FloatSize {
+		if (typeof window === "undefined") return { width: 0, height: 0 };
+		return { width: window.innerWidth, height: window.innerHeight };
+	}
+
+	function currentSize(): FloatSize {
+		return { width: el?.offsetWidth ?? 0, height: el?.offsetHeight ?? 0 };
+	}
+
+	// Persist imperatively (not via an $effect): an effect that writes persist.current
+	// while the init effect reads it forms a reactive cycle, and it would also hit
+	// localStorage on every pointermove. We save at meaningful end points instead.
+	function persistNow() {
+		if (persist) persist.current = { x, y, minimized };
+	}
+
+	// one-time position resolution (stored -> explicit x/y -> placement)
+	$effect(() => {
+		if (initialized || !el) return;
+
+		// read the stored value once, untracked (no reactive dependency on it)
+		const stored = persist ? untrack(() => persist.current) : undefined;
+		if (stored && stored.x != null && stored.y != null) {
+			x = stored.x;
+			y = stored.y;
+			if (typeof stored.minimized === "boolean") minimized = stored.minimized;
+		} else {
+			const base = resolvePlacement(placement, currentSize(), viewport(), offset);
+			const next = clampToViewport(
+				{ x: xProp ?? base.x, y: yProp ?? base.y },
+				currentSize(),
+				viewport(),
+				margin
+			);
+			x = next.x;
+			y = next.y;
+		}
+
+		zOrder = nextFloatOrder();
+		initialized = true;
+	});
+
+	// keep inside the viewport on window resize
+	$effect(() => {
+		if (typeof window === "undefined") return;
+		function onResize() {
+			if (!initialized) return;
+			const next = clampToViewport({ x, y }, currentSize(), viewport(), margin);
+			x = next.x;
+			y = next.y;
+			persistNow();
+		}
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	});
+
+	// --- drag wiring -------------------------------------------------------------
+	let dragStart = { x: 0, y: 0 };
+	let lastDragMoved = false;
+
+	function onDragStart() {
+		dragStart = { x, y };
+		dragging = true;
+		lastDragMoved = false;
+	}
+	function onDragMove({ dx, dy }: { dx: number; dy: number }) {
+		const next = clampToViewport(
+			{ x: dragStart.x + dx, y: dragStart.y + dy },
+			currentSize(),
+			viewport(),
+			margin
+		);
+		x = next.x;
+		y = next.y;
+	}
+	function onDragEnd({ moved }: { moved: boolean }) {
+		dragging = false;
+		lastDragMoved = moved;
+		if (moved) persistNow();
+	}
+
+	function onRootPointerDown() {
+		if (bringToFrontOnClick) bringToFront();
+	}
+
+	function onHeaderDblClick(e: MouseEvent) {
+		// ignore the dbl-click synthesized right after a real drag
+		if (lastDragMoved) {
+			lastDragMoved = false;
+			return;
+		}
+		if ((e.target as Element)?.closest?.("[data-no-drag]")) return;
+		toggleMinimize();
+	}
+
+	function onRootKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape" && closable && closeOnEscape) {
+			e.stopPropagation();
+			close();
+		}
+	}
+
+	// --- imperative API (via bind:this) -----------------------------------------
+	/** Move to an absolute `(x, y)` (clamped into the viewport). */
+	export function moveTo(nx: number, ny: number) {
+		const next = clampToViewport({ x: nx, y: ny }, currentSize(), viewport(), margin);
+		x = next.x;
+		y = next.y;
+		persistNow();
+	}
+	/** Move to a named placement preset (optionally with a custom offset). */
+	export function moveToPlacement(
+		a: FloatPlacement,
+		o: number | Partial<FloatPoint> = offset
+	) {
+		const p = resolvePlacement(a, currentSize(), viewport(), o);
+		x = p.x;
+		y = p.y;
+		persistNow();
+	}
+	/** Current top-left position. */
+	export function getPosition(): FloatPoint {
+		return { x, y };
+	}
+	/** Collapse to the title bar. */
+	export function minimize() {
+		minimized = true;
+		persistNow();
+	}
+	/** Expand the body. */
+	export function expand() {
+		minimized = false;
+		persistNow();
+	}
+	/** Toggle minimized state. */
+	export function toggleMinimize() {
+		minimized = !minimized;
+		persistNow();
+	}
+	/** Whether currently minimized. */
+	export function isMinimized(): boolean {
+		return minimized;
+	}
+	/** Fire `onClose` (consumer decides to unmount). */
+	export function close() {
+		onClose?.();
+	}
+	/** Raise above sibling Floats. */
+	export function bringToFront() {
+		zOrder = nextFloatOrder();
+	}
+
+	// --- derived presentation ----------------------------------------------------
+	const cssWidth = $derived(
+		width == null ? undefined : typeof width === "number" ? `${width}px` : width
+	);
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	bind:this={el}
+	{...rest}
+	class={twMerge(unstyled ? "" : "stuic-float", classProp)}
+	role="dialog"
+	aria-modal="false"
+	aria-labelledby={isTHCNotEmpty(title) ? titleId : undefined}
+	data-minimized={minimized}
+	data-dragging={dragging}
+	data-draggable={draggable}
+	style:left="{x}px"
+	style:top="{y}px"
+	style:width={cssWidth}
+	style:visibility={initialized ? undefined : "hidden"}
+	style:--stuic-float-z-order={zOrder}
+	onpointerdown={onRootPointerDown}
+	onkeydown={onRootKeydown}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class={twMerge(unstyled ? "" : "stuic-float-header", classHeader)}
+		ondblclick={onHeaderDblClick}
+		use:draggableAction={() => ({
+			enabled: draggable,
+			ignore: "[data-no-drag]",
+			onStart: onDragStart,
+			onMove: onDragMove,
+			onEnd: onDragEnd,
+		})}
+	>
+		{#if icon}
+			<span class={unstyled ? "" : "stuic-float-icon"}>{@render icon()}</span>
+		{/if}
+
+		<div id={titleId} class={twMerge(unstyled ? "" : "stuic-float-title", classTitle)}>
+			{#if isTHCNotEmpty(title)}<Thc thc={title!} />{/if}
+		</div>
+
+		<div
+			class={twMerge(unstyled ? "" : "stuic-float-actions", classActions)}
+			data-no-drag
+		>
+			{#if actions}{@render actions()}{/if}
+
+			<button
+				type="button"
+				class={unstyled ? "" : "stuic-float-btn"}
+				data-no-drag
+				aria-label={minimized ? restoreLabel : minimizeLabel}
+				title={minimized ? restoreLabel : minimizeLabel}
+				onclick={toggleMinimize}
+			>
+				<span class={unstyled ? "" : "stuic-float-chevron"}>
+					{@html iconChevronDown({ size: 16 })}
+				</span>
+			</button>
+
+			{#if closable}
+				<button
+					type="button"
+					class={unstyled ? "" : "stuic-float-btn"}
+					data-no-drag
+					aria-label={closeLabel}
+					title={closeLabel}
+					onclick={() => close()}
+				>
+					{@html iconX({ size: 16 })}
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	<div class={unstyled ? "" : "stuic-float-body-wrap"}>
+		<div class={unstyled ? "" : "stuic-float-body-inner"}>
+			<div class={twMerge(unstyled ? "" : "stuic-float-body", classBody)}>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,70 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { THC } from "../Thc/Thc.svelte";
+import type { FloatPlacement, FloatPoint } from "./float-utils.js";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "draggable" | "class"> {
+    /** Header title (rendered via `Thc`). Stays visible when minimized. */
+    title?: THC;
+    /** Initial left position in px. Overrides the `placement` x. */
+    x?: number;
+    /** Initial top position in px. Overrides the `placement` y. */
+    y?: number;
+    /** Initial placement preset, used for any axis `x`/`y` does not pin. */
+    placement?: FloatPlacement;
+    /** Edge gap (px) used when resolving `placement`. Number or `{x,y}`. */
+    offset?: number | Partial<FloatPoint>;
+    /** Panel width: a number (px) or any CSS length. Defaults to a token. */
+    width?: number | string;
+    /** Initial collapsed state. Runtime changes go through the methods below. */
+    minimized?: boolean;
+    /** Enable drag-repositioning by the header. Default `true`. */
+    draggable?: boolean;
+    /** Show the close `×` and enable `close()` / Escape. Default `false`. */
+    closable?: boolean;
+    /** Called by `close()`, the `×` button, and Escape (when closable). */
+    onClose?: () => void;
+    /** Close on Escape when `closable`. Default `true`. */
+    closeOnEscape?: boolean;
+    /** Raise above sibling Floats on pointerdown. Default `true`. */
+    bringToFrontOnClick?: boolean;
+    /**
+     * Opt-in persistence key. When set, `{x, y, minimized}` is remembered
+     * across reloads in localStorage under `stuic-float-<storageKey>`.
+     */
+    storageKey?: string;
+    /** Minimum gap kept from every viewport edge while clamping. Default `0`. */
+    margin?: number;
+    /** Accessible labels for the built-in buttons. */
+    minimizeLabel?: string;
+    restoreLabel?: string;
+    closeLabel?: string;
+    /** Leading header slot (e.g. a grip/icon). Drag still works over it. */
+    icon?: Snippet;
+    /** Header actions slot, placed left of the minimize/close buttons. */
+    actions?: Snippet;
+    /** Body content (hidden when minimized). */
+    children?: Snippet;
+    /** Root element classes (merged). */
+    class?: string;
+    classHeader?: string;
+    classTitle?: string;
+    classActions?: string;
+    classBody?: string;
+    /** Drop all default styling (still positioned/draggable). */
+    unstyled?: boolean;
+    /** Bindable root element reference. */
+    el?: HTMLDivElement;
+}
+declare const Float: import("svelte").Component<Props, {
+    moveTo: (nx: number, ny: number) => void;
+    moveToPlacement: (a: FloatPlacement, o?: number | Partial<FloatPoint>) => void;
+    getPosition: () => FloatPoint;
+    minimize: () => void;
+    expand: () => void;
+    toggleMinimize: () => void;
+    isMinimized: () => boolean;
+    close: () => void;
+    bringToFront: () => void;
+}, "el">;
+type Float = ReturnType<typeof Float>;
+export default Float;

package/dist/components/Float/README.md

@@ -0,0 +1,152 @@
+# Float
+
+A non-modal, draggable, collapsible floating panel — the reusable "container" half of a
+dev/inspector tweak panel (dat.GUI / Tweakpane style). It has a header (optional leading
+icon, a `THC` title, an actions slot, and minimize/close buttons) and an arbitrary body.
+
+- **Positioned by params**: numeric `x`/`y` **or** a named `placement` preset (corners / edges / center).
+- **`position: fixed`** relative to the viewport, with drag **clamped** so it never leaves the screen.
+- **Draggable** by the whole header (buttons excepted).
+- **Minimizable** to just the title bar (header button, double-click header, or methods).
+- **Imperative control** via a `bind:this` ref (mirrors `Modal`/`ModalDialog`).
+- Optional: leading icon, header actions, **localStorage persistence**, and **bring-to-front** stacking.
+
+Resizing is intentionally out of scope (v1 is drag + minimize).
+
+## Props
+
+| Prop                                                                  | Type               | Default       | Description                                                              |
+| --------------------------------------------------------------------- | ------------------ | ------------- | ------------------------------------------------------------------------ |
+| `title`                                                               | `THC`              | -             | Header title (text/html/component/snippet). Stays visible when minimized |
+| `x` / `y`                                                             | `number`           | -             | Initial position in px. Overrides the corresponding `placement` axis     |
+| `placement`                                                           | `FloatPlacement`   | `"top-right"` | Initial preset for any axis `x`/`y` does not pin                         |
+| `offset`                                                              | `number \| {x,y}`  | `16`          | Edge gap used when resolving `placement`                                 |
+| `width`                                                               | `number \| string` | token (320px) | Panel width (number = px, or any CSS length)                             |
+| `minimized`                                                           | `boolean`          | `false`       | Initial collapsed state (initial-only; runtime via methods)              |
+| `draggable`                                                           | `boolean`          | `true`        | Enable header drag-repositioning                                         |
+| `closable`                                                            | `boolean`          | `false`       | Show the close `×` and enable `close()` / Escape                         |
+| `onClose`                                                             | `() => void`       | -             | Fired by `close()`, the `×` button, and Escape                           |
+| `closeOnEscape`                                                       | `boolean`          | `true`        | Close on Escape when `closable`                                          |
+| `bringToFrontOnClick`                                                 | `boolean`          | `true`        | Raise above sibling Floats on pointerdown                                |
+| `storageKey`                                                          | `string`           | -             | Persist `{x, y, minimized}` in `localStorage` (`stuic-float-<key>`)      |
+| `margin`                                                              | `number`           | `0`           | Minimum gap kept from every viewport edge while clamping                 |
+| `minimizeLabel`                                                       | `string`           | `"Minimize"`  | Accessible label for the minimize button                                 |
+| `restoreLabel`                                                        | `string`           | `"Restore"`   | Accessible label when minimized                                          |
+| `closeLabel`                                                          | `string`           | `"Close"`     | Accessible label for the close button                                    |
+| `class` / `classHeader` / `classTitle` / `classActions` / `classBody` | `string`           | -             | Merged class overrides for each part                                     |
+| `unstyled`                                                            | `boolean`          | `false`       | Drop default styling (still positioned/draggable)                        |
+| `el`                                                                  | `HTMLDivElement`   | -             | Root element reference (bindable)                                        |
+
+## Snippets
+
+| Snippet    | Description                                                          |
+| ---------- | -------------------------------------------------------------------- |
+| `icon`     | Leading header content (e.g. a grip/glyph). Drag still works over it |
+| `actions`  | Header actions, placed left of the minimize/close buttons            |
+| `children` | Body content (hidden when minimized)                                 |
+
+## Methods
+
+Accessed via a `bind:this` reference.
+
+| Method                     | Description                                            |
+| -------------------------- | ------------------------------------------------------ |
+| `moveTo(x, y)`             | Move to an absolute position (clamped to the viewport) |
+| `moveToPlacement(a, off?)` | Move to a named placement preset                       |
+| `getPosition()`            | `{ x, y }` of the current top-left                     |
+| `minimize()` / `expand()`  | Collapse to / expand from the title bar                |
+| `toggleMinimize()`         | Toggle collapsed state                                 |
+| `isMinimized()`            | Whether currently minimized                            |
+| `close()`                  | Fire `onClose` (consumer unmounts)                     |
+| `bringToFront()`           | Raise above sibling Floats                             |
+
+## Data attributes
+
+For CSS targeting: `data-minimized`, `data-dragging`, `data-draggable` (each `"true"`/`"false"`).
+
+## Usage
+
+### Basic tweak panel
+
+```svelte
+<script lang="ts">
+	import { Float, Switch } from "stuic";
+
+	let fov = $state(50);
+	let wireframe = $state(false);
+</script>
+
+<Float title="Scene settings" placement="top-right" width={280}>
+	<label>FOV: {fov}<input type="range" min="10" max="120" bind:value={fov} /></label>
+	<Switch bind:checked={wireframe} label="Wireframe" />
+</Float>
+```
+
+### Imperative control
+
+```svelte
+<script lang="ts">
+	let panel: Float = $state()!;
+</script>
+
+<button onclick={() => panel.moveToPlacement("bottom-left")}>Dock bottom-left</button>
+<button onclick={() => panel.minimize()}>Minimize</button>
+
+<Float bind:this={panel} title="Inspector" x={24} y={24}>…</Float>
+```
+
+### Persisted position + leading icon + actions
+
+```svelte
+<Float title="Layers" placement="left" storageKey="layers-panel">
+	{#snippet icon()}<MyGrip />{/snippet}
+	{#snippet actions()}
+		<button data-no-drag class="stuic-float-btn" onclick={reset}>↺</button>
+	{/snippet}
+	…
+</Float>
+```
+
+`storageKey` remembers `{x, y, minimized}` across reloads. Mark any custom interactive
+controls in the header with `data-no-drag` so they don't start a drag.
+
+### Closable
+
+```svelte
+{#if open}
+	<Float title="Hints" closable onClose={() => (open = false)} placement="bottom-right">
+		…
+	</Float>
+{/if}
+```
+
+## CSS Variables
+
+Structural tokens (radius/shadow/border-width/transition) resolve via the fallback pattern,
+so global or per-instance overrides work.
+
+| Variable                        | Default                            | Description                            |
+| ------------------------------- | ---------------------------------- | -------------------------------------- |
+| `--stuic-float-width`           | `320px`                            | Default panel width                    |
+| `--stuic-float-z`               | `50`                               | Stacking floor (order is added on top) |
+| `--stuic-float-bg`              | `--stuic-color-background`         | Panel background                       |
+| `--stuic-float-text`            | `--stuic-color-foreground`         | Panel text                             |
+| `--stuic-float-border-color`    | `--stuic-color-border`             | Border / header divider color          |
+| `--stuic-float-header-bg`       | `--stuic-color-surface`            | Header background                      |
+| `--stuic-float-header-text`     | `--stuic-color-surface-foreground` | Header text                            |
+| `--stuic-float-body-max-height` | `70vh`                             | Body max height before it scrolls      |
+| `--stuic-float-btn-bg-hover`    | `--stuic-color-muted`              | Header button hover background         |
+| `--stuic-float-radius`          | `--stuic-radius-container`         | Corner radius (fallback)               |
+| `--stuic-float-shadow`          | `--stuic-shadow-overlay`           | Drop shadow (fallback)                 |
+
+```svelte
+<Float style="--stuic-float-header-bg: var(--stuic-color-muted);" title="Custom">…</Float>
+```
+
+## Notes
+
+- **Non-modal**: no backdrop, no focus trap, non-blocking. `role="dialog"` + `aria-modal="false"`.
+- **No portal**: rendered in place with `position: fixed`. A `transform`ed ancestor would
+  break `fixed` positioning — mount Float near the top of the tree if that applies.
+- Built on the reusable [`draggable`](../../actions/draggable.svelte.ts) action and the pure
+  [`float-utils`](./float-utils.ts) helpers (`resolvePlacement`, `clampToViewport`).

package/dist/components/Float/float-stack.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns the next stacking order (a strictly increasing integer).
+ *
+ * Used both when a `Float` mounts (so later panels start above earlier ones)
+ * and on `bringToFront()`.
+ *
+ * @returns The next order value (>= 1).
+ */
+export declare function nextFloatOrder(): number;
+/**
+ * Current highest issued order. Mostly useful for tests / debugging.
+ *
+ * @returns The last value returned by {@link nextFloatOrder} (0 if none yet).
+ */
+export declare function currentFloatOrder(): number;

package/dist/components/Float/float-stack.js

@@ -0,0 +1,28 @@
+/**
+ * Tiny module-level stacking counter shared by all `Float` instances.
+ *
+ * Each call returns a strictly increasing integer used as the panel's
+ * `z-index` *order* offset (added on top of the `--stuic-float-z` floor in CSS).
+ * The most recently raised panel therefore always wins. A plain module
+ * singleton is intentional — every import shares the same counter.
+ */
+let order = 0;
+/**
+ * Returns the next stacking order (a strictly increasing integer).
+ *
+ * Used both when a `Float` mounts (so later panels start above earlier ones)
+ * and on `bringToFront()`.
+ *
+ * @returns The next order value (>= 1).
+ */
+export function nextFloatOrder() {
+    return ++order;
+}
+/**
+ * Current highest issued order. Mostly useful for tests / debugging.
+ *
+ * @returns The last value returned by {@link nextFloatOrder} (0 if none yet).
+ */
+export function currentFloatOrder() {
+    return order;
+}

package/dist/components/Float/float-utils.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Pure (DOM-free) positioning helpers for the `Float` component.
+ *
+ * Kept separate from `Float.svelte` so the math can be unit-tested in the fast
+ * node test project (`*.test.ts`) without a browser.
+ */
+/** A 2D size. */
+export interface FloatSize {
+    width: number;
+    height: number;
+}
+/** A 2D point (top-left corner, in px). */
+export interface FloatPoint {
+    x: number;
+    y: number;
+}
+/**
+ * Named placement preset, resolved against the viewport (with `Float`'s
+ * `offset` applied as a gap from the corresponding edges).
+ *
+ * - Single axis names (`top`, `left`, ...) center the unspecified axis.
+ * - `center` centers both axes.
+ */
+export type FloatPlacement = "top-left" | "top" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom" | "bottom-right";
+/** All valid placements, handy for demos / iteration. */
+export declare const FLOAT_PLACEMENTS: FloatPlacement[];
+/**
+ * Normalizes a scalar-or-`{x,y}` offset into an `{x,y}` pair.
+ *
+ * @param offset - A single number (applied to both axes) or an explicit pair.
+ * @returns The resolved `{x,y}` offset.
+ */
+export declare function normalizeOffset(offset: number | Partial<FloatPoint> | undefined, fallback?: number): FloatPoint;
+/**
+ * Resolves a named {@link FloatPlacement} to an absolute top-left position so the
+ * element sits inside the viewport with `offset` as the edge gap.
+ *
+ * The returned position is guaranteed to be within `[0, viewport - size]` on
+ * each axis (it never needs further clamping).
+ *
+ * @param placement - The placement preset.
+ * @param size - The measured element size.
+ * @param viewport - The available viewport size.
+ * @param offset - Edge gap (number or `{x,y}`).
+ * @returns The resolved top-left `{x,y}`.
+ *
+ * @example
+ * ```ts
+ * resolvePlacement("top-right", { width: 200, height: 100 },
+ *   { width: 1000, height: 800 }, { x: 16, y: 16 });
+ * // -> { x: 784, y: 16 }
+ * ```
+ */
+export declare function resolvePlacement(placement: FloatPlacement, size: FloatSize, viewport: FloatSize, offset?: number | Partial<FloatPoint>): FloatPoint;
+/**
+ * Clamps a top-left position so the whole element stays inside the viewport
+ * (never even partially off-screen), honoring an optional edge `margin`.
+ *
+ * When the element is larger than the viewport on an axis, it is pinned to the
+ * leading edge (`margin`) on that axis.
+ *
+ * @param pos - The desired top-left position.
+ * @param size - The measured element size.
+ * @param viewport - The available viewport size.
+ * @param margin - Minimum gap kept from every edge (default `0`).
+ * @returns The clamped `{x,y}`.
+ */
+export declare function clampToViewport(pos: FloatPoint, size: FloatSize, viewport: FloatSize, margin?: number): FloatPoint;

package/dist/components/Float/float-utils.js

@@ -0,0 +1,94 @@
+/**
+ * Pure (DOM-free) positioning helpers for the `Float` component.
+ *
+ * Kept separate from `Float.svelte` so the math can be unit-tested in the fast
+ * node test project (`*.test.ts`) without a browser.
+ */
+/** All valid placements, handy for demos / iteration. */
+export const FLOAT_PLACEMENTS = [
+    "top-left",
+    "top",
+    "top-right",
+    "left",
+    "center",
+    "right",
+    "bottom-left",
+    "bottom",
+    "bottom-right",
+];
+/**
+ * Normalizes a scalar-or-`{x,y}` offset into an `{x,y}` pair.
+ *
+ * @param offset - A single number (applied to both axes) or an explicit pair.
+ * @returns The resolved `{x,y}` offset.
+ */
+export function normalizeOffset(offset, fallback = 0) {
+    if (offset == null)
+        return { x: fallback, y: fallback };
+    if (typeof offset === "number")
+        return { x: offset, y: offset };
+    return { x: offset.x ?? fallback, y: offset.y ?? fallback };
+}
+/**
+ * Resolves a named {@link FloatPlacement} to an absolute top-left position so the
+ * element sits inside the viewport with `offset` as the edge gap.
+ *
+ * The returned position is guaranteed to be within `[0, viewport - size]` on
+ * each axis (it never needs further clamping).
+ *
+ * @param placement - The placement preset.
+ * @param size - The measured element size.
+ * @param viewport - The available viewport size.
+ * @param offset - Edge gap (number or `{x,y}`).
+ * @returns The resolved top-left `{x,y}`.
+ *
+ * @example
+ * ```ts
+ * resolvePlacement("top-right", { width: 200, height: 100 },
+ *   { width: 1000, height: 800 }, { x: 16, y: 16 });
+ * // -> { x: 784, y: 16 }
+ * ```
+ */
+export function resolvePlacement(placement, size, viewport, offset = 0) {
+    const off = normalizeOffset(offset);
+    const maxX = Math.max(0, viewport.width - size.width);
+    const maxY = Math.max(0, viewport.height - size.height);
+    // horizontal/vertical buckets
+    let horiz = "center";
+    let vert = "center";
+    for (const part of placement.split("-")) {
+        if (part === "left" || part === "right")
+            horiz = part;
+        else if (part === "top" || part === "bottom")
+            vert = part;
+        // "center" leaves the unspecified axis centered
+    }
+    const x = horiz === "left" ? off.x : horiz === "right" ? maxX - off.x : maxX / 2;
+    const y = vert === "top" ? off.y : vert === "bottom" ? maxY - off.y : maxY / 2;
+    // guard against offsets larger than the available space
+    return {
+        x: Math.min(Math.max(0, x), maxX),
+        y: Math.min(Math.max(0, y), maxY),
+    };
+}
+/**
+ * Clamps a top-left position so the whole element stays inside the viewport
+ * (never even partially off-screen), honoring an optional edge `margin`.
+ *
+ * When the element is larger than the viewport on an axis, it is pinned to the
+ * leading edge (`margin`) on that axis.
+ *
+ * @param pos - The desired top-left position.
+ * @param size - The measured element size.
+ * @param viewport - The available viewport size.
+ * @param margin - Minimum gap kept from every edge (default `0`).
+ * @returns The clamped `{x,y}`.
+ */
+export function clampToViewport(pos, size, viewport, margin = 0) {
+    const maxX = Math.max(margin, viewport.width - size.width - margin);
+    const maxY = Math.max(margin, viewport.height - size.height - margin);
+    return {
+        x: Math.min(Math.max(margin, pos.x), maxX),
+        y: Math.min(Math.max(margin, pos.y), maxY),
+    };
+}

package/dist/components/Float/index.css

@@ -0,0 +1,182 @@
+/* ============================================================================
+   FLOAT COMPONENT TOKENS
+   Override globally: :root { --stuic-float-width: 360px; }
+   Override locally:  <Float style="--stuic-float-header-bg: red;" />
+   Structural tokens (radius/shadow/border-width/transition) are resolved via the
+   fallback pattern at the usage site, so per-instance overrides keep working.
+   ============================================================================ */
+
+:root {
+	/* Surface */
+	--stuic-float-bg: var(--stuic-color-background);
+	--stuic-float-text: var(--stuic-color-foreground);
+	--stuic-float-border-color: var(--stuic-color-border);
+
+	/* Stacking: floor + per-instance order offset (set inline by the component) */
+	--stuic-float-z: 50;
+
+	/* Sizing */
+	--stuic-float-width: 320px;
+	--stuic-float-body-max-height: 70vh;
+
+	/* Header */
+	--stuic-float-header-bg: var(--stuic-color-surface, var(--stuic-color-muted));
+	--stuic-float-header-text: var(
+		--stuic-color-surface-foreground,
+		var(--stuic-color-foreground)
+	);
+	--stuic-float-header-padding-x: 0.5rem;
+	--stuic-float-header-padding-y: 0.25rem;
+	--stuic-float-header-gap: 0.5rem;
+	--stuic-float-header-font-weight: var(--font-weight-medium);
+
+	/* Body */
+	--stuic-float-body-padding-x: 0.75rem;
+	--stuic-float-body-padding-y: 0.75rem;
+
+	/* Header buttons */
+	--stuic-float-btn-size: 1.75rem;
+	--stuic-float-btn-color: var(--stuic-color-muted-foreground);
+	--stuic-float-btn-color-hover: var(--stuic-color-foreground);
+	--stuic-float-btn-bg-hover: var(--stuic-color-muted);
+
+	/* Focus ring */
+	--stuic-float-ring-width: 2px;
+	--stuic-float-ring-color: var(--stuic-color-ring);
+}
+
+@layer components {
+	/* ============================================================================
+	   ROOT
+	   ============================================================================ */
+
+	.stuic-float {
+		position: fixed;
+		display: flex;
+		flex-direction: column;
+		width: var(--stuic-float-width);
+		max-width: 100vw;
+		z-index: calc(var(--stuic-float-z) + var(--stuic-float-z-order, 0));
+
+		background: var(--stuic-float-bg);
+		color: var(--stuic-float-text);
+		border: var(--stuic-float-border-width, var(--stuic-border-width)) solid
+			var(--stuic-float-border-color);
+		border-radius: var(--stuic-float-radius, var(--stuic-radius-container));
+		box-shadow: var(--stuic-float-shadow, var(--stuic-shadow-overlay));
+		overflow: hidden; /* clip header/body to the rounded corners */
+	}
+
+	/* ============================================================================
+	   HEADER (drag handle)
+	   ============================================================================ */
+
+	.stuic-float-header {
+		display: flex;
+		align-items: center;
+		gap: var(--stuic-float-header-gap);
+		padding: var(--stuic-float-header-padding-y) var(--stuic-float-header-padding-x);
+		background: var(--stuic-float-header-bg);
+		color: var(--stuic-float-header-text);
+		border-bottom: var(--stuic-float-border-width, var(--stuic-border-width)) solid
+			var(--stuic-float-border-color);
+		user-select: none;
+		touch-action: none; /* let the drag own the gesture on touch devices */
+	}
+
+	.stuic-float[data-draggable="true"] > .stuic-float-header {
+		cursor: grab;
+	}
+
+	.stuic-float[data-dragging="true"] > .stuic-float-header {
+		cursor: grabbing;
+	}
+
+	.stuic-float-icon {
+		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	.stuic-float-title {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-weight: var(--stuic-float-header-font-weight);
+	}
+
+	.stuic-float-actions {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+		flex-shrink: 0;
+	}
+
+	/* ============================================================================
+	   HEADER BUTTONS
+	   ============================================================================ */
+
+	.stuic-float-btn {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--stuic-float-btn-size);
+		height: var(--stuic-float-btn-size);
+		border: none;
+		border-radius: var(--stuic-float-btn-radius, var(--stuic-radius));
+		background: transparent;
+		color: var(--stuic-float-btn-color);
+		cursor: pointer;
+		transition:
+			background var(--stuic-float-transition, var(--stuic-transition)),
+			color var(--stuic-float-transition, var(--stuic-transition));
+	}
+
+	.stuic-float-btn:hover {
+		background: var(--stuic-float-btn-bg-hover);
+		color: var(--stuic-float-btn-color-hover);
+	}
+
+	.stuic-float-btn:focus-visible {
+		outline: var(--stuic-float-ring-width) solid var(--stuic-float-ring-color);
+		outline-offset: -2px;
+	}
+
+	.stuic-float-chevron {
+		display: inline-flex;
+		transition: transform var(--stuic-float-transition, var(--stuic-transition));
+	}
+
+	/* expanded -> chevron points up ("collapse"); minimized -> points down ("expand") */
+	.stuic-float[data-minimized="false"] .stuic-float-chevron {
+		transform: rotate(180deg);
+	}
+
+	/* ============================================================================
+	   BODY (grid-based collapse, mirrors Accordion)
+	   ============================================================================ */
+
+	.stuic-float-body-wrap {
+		display: grid;
+		grid-template-rows: 1fr;
+		transition: grid-template-rows var(--stuic-float-transition, var(--stuic-transition));
+	}
+
+	.stuic-float[data-minimized="true"] > .stuic-float-body-wrap {
+		grid-template-rows: 0fr;
+	}
+
+	.stuic-float-body-inner {
+		overflow: hidden;
+		min-height: 0;
+	}
+
+	.stuic-float-body {
+		max-height: var(--stuic-float-body-max-height);
+		overflow: auto;
+		scrollbar-width: thin;
+		padding: var(--stuic-float-body-padding-y) var(--stuic-float-body-padding-x);
+	}
+}

package/dist/components/Float/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Float, type Props as FloatProps } from "./Float.svelte";
+export { type FloatPlacement, type FloatPoint, type FloatSize, FLOAT_PLACEMENTS, resolvePlacement, clampToViewport, normalizeOffset, } from "./float-utils.js";

package/dist/components/Float/index.js

@@ -0,0 +1,2 @@
+export { default as Float } from "./Float.svelte";
+export { FLOAT_PLACEMENTS, resolvePlacement, clampToViewport, normalizeOffset, } from "./float-utils.js";

package/dist/index.css

@@ -76,6 +76,7 @@ In practice:
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";
 @import "./components/EmailVerifyForm/index.css";
+@import "./components/Float/index.css";
 @import "./components/H/index.css";
 @import "./components/Header/index.css";
 @import "./components/ImageCycler/index.css";

package/dist/index.d.ts

@@ -44,6 +44,7 @@ export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
 export * from "./components/EmailVerifyForm/index.js";
+export * from "./components/Float/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";

package/dist/index.js

@@ -45,6 +45,7 @@ export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
 export * from "./components/EmailVerifyForm/index.js";
+export * from "./components/Float/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.120.0",
+	"version": "3.121.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",
@@ -127,7 +127,7 @@
 		"@codemirror/language": "^6.12.3",
 		"@codemirror/language-data": "^6.5.2",
 		"@codemirror/state": "^6.6.0",
-		"@codemirror/view": "^6.43.0",
+		"@codemirror/view": "^6.43.1",
 		"@eslint/js": "^9.39.4",
 		"@marianmeres/random-human-readable": "^1.10.2",
 		"@milkdown/core": "^7.21.2",
@@ -140,37 +140,37 @@
 		"@milkdown/transformer": "^7.21.2",
 		"@milkdown/utils": "^7.21.2",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.64.0",
+		"@sveltejs/kit": "^2.65.1",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@tailwindcss/cli": "^4.3.0",
+		"@tailwindcss/cli": "^4.3.1",
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.20",
-		"@tailwindcss/vite": "^4.3.0",
-		"@types/node": "^25.9.2",
-		"@vitest/browser-playwright": "^4.1.8",
+		"@tailwindcss/vite": "^4.3.1",
+		"@types/node": "^25.9.3",
+		"@vitest/browser-playwright": "^4.1.9",
 		"dotenv": "^16.6.1",
 		"eslint": "^9.39.4",
 		"globals": "^16.5.0",
 		"playwright": "^1.60.0",
-		"prettier": "^3.8.3",
+		"prettier": "^3.8.4",
 		"prettier-plugin-svelte": "^3.5.2",
 		"publint": "^0.3.21",
 		"svelte": "^5.56.3",
 		"svelte-check": "^4.6.0",
-		"tailwindcss": "^4.3.0",
+		"tailwindcss": "^4.3.1",
 		"tsx": "^4.22.4",
 		"typescript": "^5.9.3",
 		"typescript-eslint": "^8.61.0",
 		"vite": "^7.3.5",
-		"vitest": "^4.1.8",
+		"vitest": "^4.1.9",
 		"vitest-browser-svelte": "^2.1.1"
 	},
 	"dependencies": {
 		"@marianmeres/clog": "^3.21.0",
 		"@marianmeres/countries": "^1.0.1",
 		"@marianmeres/cron": "^2.0.1",
-		"@marianmeres/design-tokens": "^1.8.0",
+		"@marianmeres/design-tokens": "^1.9.0",
 		"@marianmeres/icons-fns": "^5.0.0",
 		"@marianmeres/item-collection": "^1.4.2",
 		"@marianmeres/paging-store": "^2.1.1",