@marianmeres/stuic 3.119.0 → 3.121.0

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";