dystopia-linear-lib 1.0.0

package/dist/index.css

@@ -0,0 +1,399 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+
+/*
+  Theme tokens.
+
+  Two layers, on purpose:
+
+  1. Raw variables (`--surface`, `--foreground`, …) hold the actual colors.
+  2. `@theme inline` maps them to Tailwind's `--color-*` namespace, which is
+     what generates the `bg-surface` / `text-foreground` / `border-border`
+     utilities the components use.
+
+  `inline` is what makes theming work: it compiles `bg-surface` down to
+  `background-color: var(--surface)` — pointing straight at the raw variable
+  instead of at a second variable pinned to `:root` by Tailwind's theme layer.
+  A consumer can therefore redefine a token under ANY selector and it wins,
+  with no specificity fight and no `!important`:
+
+      [data-theme='sepia'] { --surface: oklch(97% 0.02 85); }
+      .invoice-preview     { --foreground: black; }
+
+  Components must only ever use these semantic utilities — never a raw palette
+  shade like `bg-slate-50`. A hardcoded shade is invisible to every theme.
+*/
+
+:root {
+	--surface: oklch(100% 0 0);
+	--surface-subtle: oklch(98.4% 0.003 247.858);
+	--surface-hover: oklch(96.8% 0.007 247.896);
+
+	--border: oklch(92.9% 0.013 255.508);
+	--border-hover: oklch(86.9% 0.022 252.894);
+
+	--foreground: oklch(20.8% 0.042 265.755);
+	--foreground-soft: oklch(37.2% 0.044 257.287);
+	--foreground-muted: oklch(44.6% 0.043 257.281);
+	--foreground-subtle: oklch(55.4% 0.046 257.417);
+	--foreground-faint: oklch(70.4% 0.04 256.788);
+
+	/* Brand teal. teal-700 rather than the more obvious teal-500/600: white
+	   text needs 4.5:1 to pass WCAG AA, and teal-500 only reaches 2.42:1,
+	   teal-600 3.66:1. teal-700 is 5.39:1. */
+	--primary: oklch(51.1% 0.096 186.391);
+	--primary-hover: oklch(43.7% 0.078 188.216);
+	--primary-foreground: oklch(100% 0 0);
+
+	--ring: oklch(51.1% 0.096 186.391);
+
+	/* danger-500 fails white-text/text-on-white contrast the same way teal-500 does above —
+	   52% lightness is the point it clears 4.5:1 for body text while staying a clear "danger" red. */
+	--danger: oklch(52% 0.19 13.428);
+	--danger-border: oklch(81% 0.117 11.638);
+	--danger-foreground: oklch(100% 0 0);
+
+	/* Same 4.5:1-against-white constraint as danger, same hue kept between
+	   light and dark — 52% lightness reaches 5.62:1 as amber, not the paler
+	   "brand yellow" a naive amber-400/500 would give. */
+	--warning: oklch(52% 0.15 75);
+	--warning-border: oklch(83% 0.09 75);
+	--warning-foreground: oklch(100% 0 0);
+
+	/* 50% lightness reaches 5.59:1 — green needs a touch more lightness than
+	   red/amber at the same chroma before it reads as "green" rather than a
+	   near-black olive. */
+	--success: oklch(50% 0.16 145);
+	--success-border: oklch(82% 0.1 145);
+	--success-foreground: oklch(100% 0 0);
+}
+
+[data-theme='dark'] {
+	--surface: oklch(12.9% 0.042 264.695);
+	--surface-subtle: oklch(20.8% 0.042 265.755);
+	--surface-hover: oklch(27.9% 0.041 260.031);
+
+	--border: oklch(27.9% 0.041 260.031);
+	--border-hover: oklch(37.2% 0.044 257.287);
+
+	--foreground: oklch(98.4% 0.003 247.858);
+	--foreground-soft: oklch(92.9% 0.013 255.508);
+	--foreground-muted: oklch(86.9% 0.022 252.894);
+	--foreground-subtle: oklch(70.4% 0.04 256.788);
+	--foreground-faint: oklch(55.4% 0.046 257.417);
+
+	/* Dark flips the relationship: a light teal fill carrying dark text.
+	   teal-400 against the dark surface is 10.81:1. */
+	--primary: oklch(77.7% 0.152 181.912);
+	--primary-hover: oklch(85.5% 0.138 181.071);
+	--primary-foreground: oklch(12.9% 0.042 264.695);
+
+	--ring: oklch(77.7% 0.152 181.912);
+
+	--danger: oklch(71.2% 0.194 13.428);
+	--danger-border: oklch(64.5% 0.246 16.439);
+	--danger-foreground: oklch(12.9% 0.042 264.695);
+
+	/* 66% lightness against the dark surface is 6.35:1. */
+	--warning: oklch(66% 0.13 75);
+	--warning-border: oklch(59% 0.165 75);
+	--warning-foreground: oklch(12.9% 0.042 264.695);
+
+	/* 64% lightness against the dark surface is 6.37:1. */
+	--success: oklch(64% 0.15 145);
+	--success-border: oklch(57% 0.19 145);
+	--success-foreground: oklch(12.9% 0.042 264.695);
+}
+
+@theme inline {
+	--color-surface: var(--surface);
+	--color-surface-subtle: var(--surface-subtle);
+	--color-surface-hover: var(--surface-hover);
+
+	--color-border: var(--border);
+	--color-border-hover: var(--border-hover);
+
+	--color-foreground: var(--foreground);
+	--color-foreground-soft: var(--foreground-soft);
+	--color-foreground-muted: var(--foreground-muted);
+	--color-foreground-subtle: var(--foreground-subtle);
+	--color-foreground-faint: var(--foreground-faint);
+
+	--color-primary: var(--primary);
+	--color-primary-hover: var(--primary-hover);
+	--color-primary-foreground: var(--primary-foreground);
+
+	--color-ring: var(--ring);
+
+	--color-danger: var(--danger);
+	--color-danger-border: var(--danger-border);
+	--color-danger-foreground: var(--danger-foreground);
+
+	--color-warning: var(--warning);
+	--color-warning-border: var(--warning-border);
+	--color-warning-foreground: var(--warning-foreground);
+
+	--color-success: var(--success);
+	--color-success-border: var(--success-border);
+	--color-success-foreground: var(--success-foreground);
+}
+
+/*
+  Density scale — prep for the Linear-style migration tracked in
+  docs/component-roadmap.md. Pinned to the padding/gap values already most
+  common across src/lib/components (surveyed via grep), so defining this
+  block changes nothing visually today.
+
+  Radius and shadow need NO equivalent block: `rounded-lg`/`shadow-sm`/
+  `shadow-md` already resolve to Tailwind's own `--radius-lg`/`--shadow-sm`/
+  `--shadow-md` theme variables, so those are already a single dial —
+  override them directly in a plain `@theme` block when the time comes,
+  no prep needed.
+
+  Spacing has no such built-in dial: components reference literal `p-3`/
+  `px-4`/`gap-2` directly, so these tokens have no effect until each
+  component is migrated to the utilities they generate (Tailwind's
+  `--spacing-*` theme namespace turns each of these into real utilities:
+  `px-control-x`, `p-compact`, `gap-cozy`, etc — named `tight`/`cozy`/`loose`
+  rather than e.g. `--spacing-gap` so the generated class isn't the
+  stuttering `gap-gap`). That migration is deliberately NOT done here —
+  this block only adds the dial, one component at a time swaps onto it
+  later.
+*/
+@theme {
+	--spacing-control-x: 1rem; /* 4 — button/input horizontal padding */
+	--spacing-control-y: 0.5rem; /* 2 — button/input vertical padding */
+	--spacing-compact: 0.75rem; /* 3 — dense rows: list/menu items, popover content */
+	--spacing-surface: 1.5rem; /* 6 — card/dialog surface padding */
+	--spacing-tight: 0.375rem; /* 1.5 — icon-to-label gaps */
+	--spacing-cozy: 0.5rem; /* 2 — default inter-element gap */
+	--spacing-loose: 0.75rem; /* 3 — looser stacks (form fields, list rows) */
+}
+
+@theme {
+	--animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
+
+	@keyframes progress-indeterminate {
+		0% {
+			transform: translateX(-100%);
+		}
+		50% {
+			transform: translateX(100%);
+		}
+		100% {
+			transform: translateX(400%);
+		}
+	}
+
+	/*
+	  Dialog enter/exit, applied by default via `data-[state=*]:animate-*`.
+
+	  The content keyframes deliberately touch `transform` only: Dialog centres
+	  its content with a flex wrapper rather than a translate, so these must not
+	  restate a centring offset — Tailwind v4 compiles `-translate-x-1/2` to the
+	  standalone `translate` property, which composes on top of `transform`
+	  instead of replacing it, and the two would stack into a doubled offset.
+	*/
+	--animate-dialog-overlay-in: dialog-overlay-in 150ms ease-out forwards;
+	--animate-dialog-overlay-out: dialog-overlay-out 150ms ease-in forwards;
+	--animate-dialog-content-in: dialog-content-in 150ms ease-out forwards;
+	--animate-dialog-content-out: dialog-content-out 150ms ease-in forwards;
+
+	@keyframes dialog-overlay-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	@keyframes dialog-overlay-out {
+		to {
+			opacity: 0;
+		}
+	}
+
+	@keyframes dialog-content-in {
+		from {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+	}
+
+	@keyframes dialog-content-out {
+		to {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+	}
+
+	/*
+	  Drawer enter/exit — one pair of keyframes per edge, since the offset
+	  direction depends on which side the panel slides from. Reuses Dialog's
+	  overlay animation (`data-slot='dialog-overlay'`) for its own scrim; only
+	  the edge-anchored content needs new keyframes. Unlike Dialog's content,
+	  no wrapper-vs-translate caveat applies here — Drawer positions with
+	  `inset-*`, not a transform, so this `translateX/Y` is the only transform
+	  ever on the element.
+	*/
+	--animate-drawer-content-in-right: drawer-content-in-right 200ms ease-out forwards;
+	--animate-drawer-content-out-right: drawer-content-out-right 200ms ease-in forwards;
+	--animate-drawer-content-in-left: drawer-content-in-left 200ms ease-out forwards;
+	--animate-drawer-content-out-left: drawer-content-out-left 200ms ease-in forwards;
+	--animate-drawer-content-in-top: drawer-content-in-top 200ms ease-out forwards;
+	--animate-drawer-content-out-top: drawer-content-out-top 200ms ease-in forwards;
+	--animate-drawer-content-in-bottom: drawer-content-in-bottom 200ms ease-out forwards;
+	--animate-drawer-content-out-bottom: drawer-content-out-bottom 200ms ease-in forwards;
+
+	@keyframes drawer-content-in-right {
+		from {
+			transform: translateX(100%);
+		}
+	}
+
+	@keyframes drawer-content-out-right {
+		to {
+			transform: translateX(100%);
+		}
+	}
+
+	@keyframes drawer-content-in-left {
+		from {
+			transform: translateX(-100%);
+		}
+	}
+
+	@keyframes drawer-content-out-left {
+		to {
+			transform: translateX(-100%);
+		}
+	}
+
+	@keyframes drawer-content-in-top {
+		from {
+			transform: translateY(-100%);
+		}
+	}
+
+	@keyframes drawer-content-out-top {
+		to {
+			transform: translateY(-100%);
+		}
+	}
+
+	@keyframes drawer-content-in-bottom {
+		from {
+			transform: translateY(100%);
+		}
+	}
+
+	@keyframes drawer-content-out-bottom {
+		to {
+			transform: translateY(100%);
+		}
+	}
+
+	/* Toast enter/exit, same `components`-layer/`data-slot` override story as Dialog above. */
+	--animate-toast-in: toast-in 150ms ease-out forwards;
+	--animate-toast-out: toast-out 150ms ease-in forwards;
+
+	@keyframes toast-in {
+		from {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+	}
+
+	@keyframes toast-out {
+		to {
+			opacity: 0;
+			transform: scale(0.96);
+		}
+	}
+}
+
+/*
+  Dialog's default enter/exit, in the `components` layer on purpose.
+
+  Layer order is what makes this overridable: Tailwind orders `components`
+  before `utilities`, so any utility a consumer passes through `classes`
+  (`data-[state=open]:animate-…`, or `animate-none` to opt out) beats these
+  regardless of specificity. A utility class here instead would land in the
+  same layer as the consumer's and leave the winner to source order —
+  tailwind-merge can't arbitrate it, since it only knows Tailwind's five
+  built-in `animate-*` values and treats custom ones as unrelated classes.
+
+  Keyed on `data-slot` rather than the internal utility classes so the hook
+  stays stable if the styling changes.
+*/
+@layer components {
+	[data-slot='dialog-overlay'][data-state='open'] {
+		animation: var(--animate-dialog-overlay-in);
+	}
+
+	[data-slot='dialog-overlay'][data-state='closed'] {
+		animation: var(--animate-dialog-overlay-out);
+	}
+
+	[data-slot='dialog-content'][data-state='open'] {
+		animation: var(--animate-dialog-content-in);
+	}
+
+	[data-slot='dialog-content'][data-state='closed'] {
+		animation: var(--animate-dialog-content-out);
+	}
+
+	[data-slot='toast'][data-state='open'] {
+		animation: var(--animate-toast-in);
+	}
+
+	[data-slot='toast'][data-state='closed'] {
+		animation: var(--animate-toast-out);
+	}
+
+	[data-slot='drawer-content'][data-side='right'][data-state='open'] {
+		animation: var(--animate-drawer-content-in-right);
+	}
+
+	[data-slot='drawer-content'][data-side='right'][data-state='closed'] {
+		animation: var(--animate-drawer-content-out-right);
+	}
+
+	[data-slot='drawer-content'][data-side='left'][data-state='open'] {
+		animation: var(--animate-drawer-content-in-left);
+	}
+
+	[data-slot='drawer-content'][data-side='left'][data-state='closed'] {
+		animation: var(--animate-drawer-content-out-left);
+	}
+
+	[data-slot='drawer-content'][data-side='top'][data-state='open'] {
+		animation: var(--animate-drawer-content-in-top);
+	}
+
+	[data-slot='drawer-content'][data-side='top'][data-state='closed'] {
+		animation: var(--animate-drawer-content-out-top);
+	}
+
+	[data-slot='drawer-content'][data-side='bottom'][data-state='open'] {
+		animation: var(--animate-drawer-content-in-bottom);
+	}
+
+	[data-slot='drawer-content'][data-side='bottom'][data-state='closed'] {
+		animation: var(--animate-drawer-content-out-bottom);
+	}
+
+	/*
+	  Same layer and same specificity as the rules above, but later, so it
+	  switches only *these* defaults off — a consumer who deliberately sets an
+	  animation still gets it, since theirs is a utility and outranks the whole
+	  layer. `createPresence` unmounts immediately when no animation runs, so
+	  nothing is left hanging.
+	*/
+	@media (prefers-reduced-motion: reduce) {
+		[data-slot='dialog-overlay'][data-state],
+		[data-slot='dialog-content'][data-state],
+		[data-slot='toast'][data-state],
+		[data-slot='drawer-content'][data-state] {
+			animation: none;
+		}
+	}
+}

package/dist/utils/calendar-grid.d.ts

@@ -0,0 +1,20 @@
+import { type CalendarDate } from '@internationalized/date';
+export interface CalendarGridOptions {
+    /** Any date within the month to render. */
+    date: CalendarDate;
+    locale: string;
+}
+export interface CalendarCell {
+    date: CalendarDate;
+    outsideMonth: boolean;
+}
+/**
+ * Computes the full weeks grid for a month, including the leading/trailing
+ * days from adjacent months needed to fill complete weeks — e.g. late Feb
+ * days appearing on the first row of a March grid. Delegates all calendar
+ * math (leap years, locale-aware week boundaries) to `@internationalized/date`
+ * rather than hand-rolling it, then just walks day-by-day chunking into rows
+ * of 7 — the same "compute the hard part once, walk it linearly" shape as
+ * `pagination-range.ts`.
+ */
+export declare function getCalendarGrid({ date, locale }: CalendarGridOptions): CalendarCell[][];

package/dist/utils/calendar-grid.js

@@ -0,0 +1,26 @@
+import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, isSameMonth } from '@internationalized/date';
+/**
+ * Computes the full weeks grid for a month, including the leading/trailing
+ * days from adjacent months needed to fill complete weeks — e.g. late Feb
+ * days appearing on the first row of a March grid. Delegates all calendar
+ * math (leap years, locale-aware week boundaries) to `@internationalized/date`
+ * rather than hand-rolling it, then just walks day-by-day chunking into rows
+ * of 7 — the same "compute the hard part once, walk it linearly" shape as
+ * `pagination-range.ts`.
+ */
+export function getCalendarGrid({ date, locale }) {
+    const firstCell = startOfWeek(startOfMonth(date), locale);
+    const lastCell = endOfWeek(endOfMonth(date), locale);
+    const weeks = [];
+    let week = [];
+    let cursor = firstCell;
+    while (cursor.compare(lastCell) <= 0) {
+        week.push({ date: cursor, outsideMonth: !isSameMonth(cursor, date) });
+        if (week.length === 7) {
+            weeks.push(week);
+            week = [];
+        }
+        cursor = cursor.add({ days: 1 });
+    }
+    return weeks;
+}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/utils/dismissable-layer.d.ts

@@ -0,0 +1,12 @@
+export interface DismissableLayerOptions {
+    onPointerDownOutside?: (event: PointerEvent) => void;
+    onEscapeKeydown?: (event: KeyboardEvent) => void;
+}
+/**
+ * Registers `node`'s consumer as a dismissable layer: Escape and
+ * pointerdown-outside are reported via the callbacks, scoped to elements
+ * outside `getExcluded()` (typically the trigger and the content itself) and
+ * only while this layer is topmost. Call from a component's `$effect` and
+ * return (or call) the returned teardown on cleanup.
+ */
+export declare function createDismissableLayer(getExcluded: () => (HTMLElement | null | undefined)[], options: DismissableLayerOptions): () => void;

package/dist/utils/dismissable-layer.js

@@ -0,0 +1,44 @@
+// Stack of currently open layers (popovers, dropdowns, dialogs, ...), topmost
+// last. Only the topmost layer reacts, so a popover opened from inside a
+// dialog doesn't also close the dialog underneath on the same Escape press.
+const layers = [];
+/**
+ * Registers `node`'s consumer as a dismissable layer: Escape and
+ * pointerdown-outside are reported via the callbacks, scoped to elements
+ * outside `getExcluded()` (typically the trigger and the content itself) and
+ * only while this layer is topmost. Call from a component's `$effect` and
+ * return (or call) the returned teardown on cleanup.
+ */
+export function createDismissableLayer(getExcluded, options) {
+    const id = Symbol();
+    function isTopmost() {
+        return layers[layers.length - 1] === id;
+    }
+    function handlePointerDown(event) {
+        if (!isTopmost())
+            return;
+        const target = event.target;
+        if (getExcluded().some((el) => el?.contains(target)))
+            return;
+        options.onPointerDownOutside?.(event);
+    }
+    function handleKeydown(event) {
+        if (event.key !== 'Escape' || !isTopmost())
+            return;
+        options.onEscapeKeydown?.(event);
+    }
+    layers.push(id);
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeydown);
+    let destroyed = false;
+    return function destroy() {
+        if (destroyed)
+            return;
+        destroyed = true;
+        const index = layers.indexOf(id);
+        if (index !== -1)
+            layers.splice(index, 1);
+        document.removeEventListener('pointerdown', handlePointerDown);
+        document.removeEventListener('keydown', handleKeydown);
+    };
+}

package/dist/utils/floating.d.ts

@@ -0,0 +1,18 @@
+import { type Placement, type Strategy } from '@floating-ui/dom';
+import type { Action } from 'svelte/action';
+export interface FloatingOptions {
+    reference: HTMLElement | null;
+    placement?: Placement;
+    strategy?: Strategy;
+    offset?: number;
+    arrowEl?: HTMLElement | null;
+    /** Pins the floating element's min-width to the reference's width (e.g. a combobox popup matching its trigger). */
+    matchReferenceWidth?: boolean;
+    /** Caps the floating element's max-height to the lesser of this and the space actually available in the viewport. */
+    maxHeight?: number;
+    onComputed?: (position: {
+        x: number;
+        y: number;
+    }) => void;
+}
+export declare const floating: Action<HTMLElement, FloatingOptions>;

package/dist/utils/floating.js

@@ -0,0 +1,61 @@
+import { autoUpdate, computePosition, flip, offset, shift, arrow, size } from '@floating-ui/dom';
+export const floating = (node, options) => {
+    let cleanup;
+    function setup(opts) {
+        cleanup?.();
+        if (!opts.reference)
+            return;
+        const strategy = opts.strategy ?? 'fixed';
+        // Take the node out of normal flow *synchronously*. `computePosition` is
+        // async, so without this the node spends a beat laid out at the end of its
+        // (portalled) parent — which lets a focus() call scroll the page to the
+        // bottom before the real coordinates ever land.
+        node.style.position = strategy;
+        node.style.left = '0';
+        node.style.top = '0';
+        const middleware = [offset(opts.offset ?? 8), flip(), shift({ padding: 8 })];
+        if (opts.arrowEl) {
+            // Keeps the arrow off the content box's rounded corners on small bubbles.
+            middleware.push(arrow({ element: opts.arrowEl, padding: 4 }));
+        }
+        if (opts.matchReferenceWidth || opts.maxHeight != null) {
+            middleware.push(size({
+                padding: 8,
+                apply({ rects, availableHeight, elements }) {
+                    if (opts.matchReferenceWidth) {
+                        elements.floating.style.minWidth = `${rects.reference.width}px`;
+                    }
+                    if (opts.maxHeight != null) {
+                        elements.floating.style.maxHeight = `${Math.min(availableHeight, opts.maxHeight)}px`;
+                    }
+                }
+            }));
+        }
+        async function update() {
+            if (!opts.reference)
+                return;
+            const { x, y, placement, middlewareData } = await computePosition(opts.reference, node, {
+                placement: opts.placement ?? 'bottom',
+                strategy,
+                middleware
+            });
+            node.style.left = `${x}px`;
+            node.style.top = `${y}px`;
+            node.setAttribute('data-placement', placement);
+            if (opts.arrowEl && middlewareData.arrow) {
+                const { x: arrowX, y: arrowY } = middlewareData.arrow;
+                opts.arrowEl.style.left = arrowX != null ? `${arrowX}px` : '';
+                opts.arrowEl.style.top = arrowY != null ? `${arrowY}px` : '';
+            }
+            opts.onComputed?.({ x, y });
+        }
+        cleanup = autoUpdate(opts.reference, node, update);
+    }
+    setup(options);
+    return {
+        update: setup,
+        destroy() {
+            cleanup?.();
+        }
+    };
+};

package/dist/utils/focus-trap.d.ts

@@ -0,0 +1,12 @@
+import type { Action } from 'svelte/action';
+export interface FocusTrapOptions {
+    enabled?: boolean;
+    /** Element (or a getter for one) to focus when the trap activates. Defaults to the first focusable descendant. */
+    initialFocus?: HTMLElement | (() => HTMLElement | null) | null;
+}
+/**
+ * Cycles Tab/Shift+Tab focus within `node` while enabled — Esc handling and
+ * outside-click dismissal are the `dismissable-layer` util's job, kept
+ * separate so a consumer can compose either without the other.
+ */
+export declare const focusTrap: Action<HTMLElement, FocusTrapOptions | undefined>;

package/dist/utils/focus-trap.js

@@ -0,0 +1,55 @@
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+    '[contenteditable="true"]'
+].join(',');
+/**
+ * Cycles Tab/Shift+Tab focus within `node` while enabled — Esc handling and
+ * outside-click dismissal are the `dismissable-layer` util's job, kept
+ * separate so a consumer can compose either without the other.
+ */
+export const focusTrap = (node, options) => {
+    let cleanup;
+    function getFocusable() {
+        return Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR));
+    }
+    function handleKeydown(event) {
+        if (event.key !== 'Tab')
+            return;
+        const focusable = getFocusable();
+        if (focusable.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    function setup(opts) {
+        cleanup?.();
+        if (opts?.enabled === false)
+            return;
+        const target = typeof opts?.initialFocus === 'function' ? opts.initialFocus() : opts?.initialFocus;
+        (target ?? getFocusable()[0] ?? node).focus({ preventScroll: true });
+        document.addEventListener('keydown', handleKeydown);
+        cleanup = () => document.removeEventListener('keydown', handleKeydown);
+    }
+    setup(options);
+    return {
+        update: setup,
+        destroy() {
+            cleanup?.();
+        }
+    };
+};

package/dist/utils/id.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Derives a stable set of related DOM ids from one `$props.id()` call, so a
+ * component needs only one call site to hand out `aria-labelledby`,
+ * `aria-controls`, etc. targets without risking an SSR/hydration mismatch
+ * from a module-level counter.
+ */
+export declare function createIds<const Parts extends readonly string[]>(base: string, ...parts: Parts): {
+    [K in Parts[number]]: string;
+};
+/** Composes an id from a base and dynamic segments, e.g. a tab's index. */
+export declare function idFor(base: string, ...segments: (string | number)[]): string;