@marianmeres/stuic 3.116.0 → 3.118.0

package/dist/actions/focus-trap.fixture.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { focusTrap } from "./focus-trap.js";
+
+	let {
+		enabled = true,
+		autoFocusFirst = true,
+	}: { enabled?: boolean; autoFocusFirst?: boolean } = $props();
+</script>
+
+<!-- A minimal focusable set to exercise the trap's auto-focus + Tab wrap-around. -->
+<div use:focusTrap={{ enabled, autoFocusFirst }} data-testid="trap">
+	<button data-testid="first">First</button>
+	<input data-testid="middle" type="text" />
+	<button data-testid="last">Last</button>
+</div>
+<button data-testid="outside">Outside</button>

package/dist/actions/focus-trap.fixture.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    enabled?: boolean;
+    autoFocusFirst?: boolean;
+};
+declare const FocusTrap: import("svelte").Component<$$ComponentProps, {}, "">;
+type FocusTrap = ReturnType<typeof FocusTrap>;
+export default FocusTrap;

package/dist/components/AssetsPreview/AssetsPreview.fixture.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	// Conventions escape hatch (docs/component-testing/02-test-conventions.md):
+	// AssetsPreview is imperative-only — it opens a ModalDialog via a ref method
+	// open(index?). A *.svelte.test.ts file can't hold a bind:this + a trigger, so
+	// this fixture exposes an opener button that calls open(openIndex); all other
+	// AssetsPreview props are forwarded through ...rest.
+	import type { ComponentProps } from "svelte";
+	import AssetsPreview from "./AssetsPreview.svelte";
+
+	let ref = $state<AssetsPreview>();
+	let {
+		openIndex,
+		...rest
+	}: { openIndex?: number } & ComponentProps<typeof AssetsPreview> = $props();
+</script>
+
+<button data-testid="opener" onclick={() => ref?.open(openIndex)}>open</button>
+
+<AssetsPreview bind:this={ref} {...rest} />

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

@@ -0,0 +1,4 @@
+import AssetsPreview from "./AssetsPreview.svelte";
+declare const AssetsPreview: any;
+type AssetsPreview = ReturnType<typeof AssetsPreview>;
+export default AssetsPreview;

package/dist/components/CommandMenu/CommandMenu.fixture.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	// Conventions escape hatch (docs/component-testing/02-test-conventions.md):
+	// CommandMenu is imperative-only (open()/close() via a ref; it builds on
+	// ModalDialog which has no bindable `visible` prop), so a `.svelte.test.ts`
+	// file can't drive it directly. This fixture holds the `bind:this` ref and
+	// exposes an opener button that calls `.open()`. `getOptions` (a required
+	// async prop) is forwarded; `value` is bound so a test can inspect the
+	// selected option after a pick.
+	import CommandMenu from "./CommandMenu.svelte";
+
+	let cmd = $state<CommandMenu>();
+	let { getOptions, value = $bindable() } = $props();
+</script>
+
+<button data-testid="opener" onclick={() => cmd?.open()}>open</button>
+
+<!--
+	Mirror the bound `value` into the DOM so a test can observe what the menu
+	selected (render() from vitest-browser-svelte does not hand back bound props).
+	The selected option is an item-collection Item; we surface its `id`.
+-->
+<span data-testid="selected">{value?.id ?? ""}</span>
+
+<CommandMenu bind:this={cmd} bind:value {getOptions} />

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

@@ -0,0 +1,7 @@
+import CommandMenu from "./CommandMenu.svelte";
+declare const CommandMenu: import("svelte").Component<{
+    getOptions: any;
+    value?: any;
+}, {}, "value">;
+type CommandMenu = ReturnType<typeof CommandMenu>;
+export default CommandMenu;

package/dist/components/CommandMenu/CommandMenu.svelte

@@ -65,6 +65,11 @@
 
 <script lang="ts">
 	import Button from "../Button/Button.svelte";
+	import {
+		normalizeAndGroupOptions,
+		renderOptionLabelOf,
+		sortByOptgroupLabel,
+	} from "./_internal/command-menu-utils.js";
 
 	const clog = createClog("CommandMenu");
 
@@ -86,15 +91,14 @@
 		unstyled = false,
 	}: Props = $props();
 
+	// Pure helpers extracted to _internal/command-menu-utils.ts (node-tested). These
+	// thin wrappers keep reading the live props/closures and delegate the logic.
 	function _renderOptionLabel(item: Item): string {
-		return renderOptionLabel?.(item) || `${item[itemIdPropName]}`;
+		return renderOptionLabelOf(item, renderOptionLabel, itemIdPropName);
 	}
 
 	function sortFn(a: Item, b: Item) {
-		const withOptGroup = (i: Item) => `${i.optgroup || ""}__${_renderOptionLabel(i)}`;
-		return withOptGroup(a).localeCompare(withOptGroup(b), undefined, {
-			sensitivity: "base",
-		});
+		return sortByOptgroupLabel(a, b, _renderOptionLabel);
 	}
 
 	let modalDialog: ModalDialog = $state()!;
@@ -155,14 +159,7 @@
 
 	//
 	function _normalize_and_group_options(opts: Item[]): Map<string, Item[]> {
-		const groupped = new Map<string, Item[]>();
-		opts.forEach((o) => {
-			const optgLabel = renderOptionGroup(o.optgroup || "");
-			if (!groupped.has(optgLabel)) groupped.set(optgLabel, []);
-			const optgroup = groupped.get(optgLabel);
-			optgroup!.push(o);
-		});
-		return groupped;
+		return normalizeAndGroupOptions(opts, renderOptionGroup);
 	}
 
 	export function close() {

package/dist/components/CommandMenu/_internal/command-menu-utils.d.ts

@@ -0,0 +1,22 @@
+import type { Item } from "@marianmeres/item-collection";
+/**
+ * Pure option/result helpers for CommandMenu, extracted from the component so they
+ * can be unit-tested in the fast node project (no DOM). The actual searchable
+ * matching is delegated to `@marianmeres/item-collection`; these are the structural
+ * pieces around the results — how a result's label is derived, how results sort, and
+ * how they group by optgroup for rendering.
+ */
+/** Derive an option's display label: the consumer renderer, else its id prop. */
+export declare function renderOptionLabelOf(item: Item, renderOptionLabel: ((item: Item) => string) | undefined, itemIdPropName: string): string;
+/**
+ * Compare two options by "{optgroup}__{label}" using a case-insensitive locale
+ * compare, so options sort grouped-then-alphabetical. `renderLabel` derives the
+ * label part (typically `renderOptionLabelOf` bound to the component's props).
+ */
+export declare function sortByOptgroupLabel(a: Item, b: Item, renderLabel: (item: Item) => string): number;
+/**
+ * Group options into a Map keyed by their (rendered) optgroup label, preserving
+ * input order within each group. `renderOptionGroup` maps a raw optgroup key to its
+ * display label (e.g. underscores → spaces).
+ */
+export declare function normalizeAndGroupOptions(opts: Item[], renderOptionGroup: (s: string) => string): Map<string, Item[]>;

package/dist/components/CommandMenu/_internal/command-menu-utils.js

@@ -0,0 +1,37 @@
+/**
+ * Pure option/result helpers for CommandMenu, extracted from the component so they
+ * can be unit-tested in the fast node project (no DOM). The actual searchable
+ * matching is delegated to `@marianmeres/item-collection`; these are the structural
+ * pieces around the results — how a result's label is derived, how results sort, and
+ * how they group by optgroup for rendering.
+ */
+/** Derive an option's display label: the consumer renderer, else its id prop. */
+export function renderOptionLabelOf(item, renderOptionLabel, itemIdPropName) {
+    return renderOptionLabel?.(item) || `${item[itemIdPropName]}`;
+}
+/**
+ * Compare two options by "{optgroup}__{label}" using a case-insensitive locale
+ * compare, so options sort grouped-then-alphabetical. `renderLabel` derives the
+ * label part (typically `renderOptionLabelOf` bound to the component's props).
+ */
+export function sortByOptgroupLabel(a, b, renderLabel) {
+    const withOptGroup = (i) => `${i.optgroup || ""}__${renderLabel(i)}`;
+    return withOptGroup(a).localeCompare(withOptGroup(b), undefined, {
+        sensitivity: "base",
+    });
+}
+/**
+ * Group options into a Map keyed by their (rendered) optgroup label, preserving
+ * input order within each group. `renderOptionGroup` maps a raw optgroup key to its
+ * display label (e.g. underscores → spaces).
+ */
+export function normalizeAndGroupOptions(opts, renderOptionGroup) {
+    const groupped = new Map();
+    opts.forEach((o) => {
+        const optgLabel = renderOptionGroup(o.optgroup || "");
+        if (!groupped.has(optgLabel))
+            groupped.set(optgLabel, []);
+        groupped.get(optgLabel).push(o);
+    });
+    return groupped;
+}

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -267,6 +267,10 @@
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
 	import { BodyScroll } from "../../utils/body-scroll-locker.js";
 	import { waitForTwoRepaints } from "../../utils/paint.js";
+	import {
+		extractSearchableItems,
+		filterItemsByMatchedIds,
+	} from "./_internal/dropdown-menu-search.js";
 
 	let {
 		items,
@@ -357,20 +361,9 @@
 		return search === true ? defaults : { ...defaults, ...search };
 	});
 
-	// Extract all searchable items (action + expandable + nested actions)
-	let allSearchableItems = $derived.by(() => {
-		const result: (DropdownMenuActionItem | DropdownMenuExpandableItem)[] = [];
-		for (const item of items) {
-			if (item.type === "action") result.push(item);
-			if (item.type === "expandable") {
-				result.push(item);
-				for (const child of item.items) {
-					if (child.type === "action") result.push(child);
-				}
-			}
-		}
-		return result;
-	});
+	// Extract all searchable items (action + expandable + nested actions).
+	// Pure logic lives in _internal/dropdown-menu-search.ts (node-tested).
+	let allSearchableItems = $derived(extractSearchableItems(items));
 
 	// Searchable collection (recreate when items or config changes)
 	let searchableCollection = $derived.by(() => {
@@ -389,19 +382,7 @@
 		const results = searchableCollection.search(searchQuery, searchConfig.strategy);
 		const matchedIds = new Set(results.map((r) => r.id));
 
-		return items.filter((item) => {
-			if (item.type === "divider" || item.type === "header" || item.type === "custom") {
-				return false; // Hide during search
-			}
-			if (item.type === "action") return matchedIds.has(item.id);
-			if (item.type === "expandable") {
-				return (
-					matchedIds.has(item.id) ||
-					item.items.some((c) => c.type === "action" && matchedIds.has(c.id))
-				);
-			}
-			return false;
-		});
+		return filterItemsByMatchedIds(items, matchedIds);
 	});
 
 	// Matched IDs for use in template filtering during search

package/dist/components/DropdownMenu/_internal/dropdown-menu-search.d.ts

@@ -0,0 +1,21 @@
+import type { DropdownMenuItem, DropdownMenuActionItem, DropdownMenuExpandableItem } from "../DropdownMenu.svelte";
+/**
+ * Pure search/filter logic for DropdownMenu, extracted from the component so it can
+ * be unit-tested in the fast node project (no DOM). The component delegates the actual
+ * fuzzy/prefix matching to `@marianmeres/item-collection`; these helpers are the
+ * structural pieces around it — which items are searchable, and which survive a match.
+ */
+/**
+ * Flatten the menu's item list to the set that participates in search: top-level
+ * action items, expandable section headers, and the action children nested inside
+ * expandables. Dividers, headers and custom items are not searchable.
+ */
+export declare function extractSearchableItems(items: DropdownMenuItem[]): (DropdownMenuActionItem | DropdownMenuExpandableItem)[];
+/**
+ * Given the set of ids a search matched, return the items that should remain visible:
+ * - dividers / headers / custom items are hidden entirely during an active search,
+ * - action items survive iff their id matched,
+ * - expandable sections survive iff the section itself matched OR any of its action
+ *   children matched.
+ */
+export declare function filterItemsByMatchedIds(items: DropdownMenuItem[], matchedIds: Set<string | number>): DropdownMenuItem[];

package/dist/components/DropdownMenu/_internal/dropdown-menu-search.js

@@ -0,0 +1,47 @@
+/**
+ * Pure search/filter logic for DropdownMenu, extracted from the component so it can
+ * be unit-tested in the fast node project (no DOM). The component delegates the actual
+ * fuzzy/prefix matching to `@marianmeres/item-collection`; these helpers are the
+ * structural pieces around it — which items are searchable, and which survive a match.
+ */
+/**
+ * Flatten the menu's item list to the set that participates in search: top-level
+ * action items, expandable section headers, and the action children nested inside
+ * expandables. Dividers, headers and custom items are not searchable.
+ */
+export function extractSearchableItems(items) {
+    const result = [];
+    for (const item of items) {
+        if (item.type === "action")
+            result.push(item);
+        if (item.type === "expandable") {
+            result.push(item);
+            for (const child of item.items) {
+                if (child.type === "action")
+                    result.push(child);
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Given the set of ids a search matched, return the items that should remain visible:
+ * - dividers / headers / custom items are hidden entirely during an active search,
+ * - action items survive iff their id matched,
+ * - expandable sections survive iff the section itself matched OR any of its action
+ *   children matched.
+ */
+export function filterItemsByMatchedIds(items, matchedIds) {
+    return items.filter((item) => {
+        if (item.type === "divider" || item.type === "header" || item.type === "custom") {
+            return false;
+        }
+        if (item.type === "action")
+            return matchedIds.has(item.id);
+        if (item.type === "expandable") {
+            return (matchedIds.has(item.id) ||
+                item.items.some((c) => c.type === "action" && matchedIds.has(c.id)));
+        }
+        return false;
+    });
+}

package/dist/components/Input/node_modules/.vite/vitest/d2a04d71301a8915217dd5faf81d12cffd6cd958/_svelte_metadata.json

@@ -0,0 +1 @@
+{"compilerOptions":{"css":"external","dev":true,"hmr":false},"configFile":false,"extensions":[".svelte"],"preprocess":{"script":"({ content, filename }) => {\n\t\tif (!filename) return;\n\n\t\tconst basename = path.basename(filename);\n\t\tif (basename.startsWith('+page.') || basename.startsWith('+layout.')) {\n\t\t\tconst match = content.match(options_regex);\n\t\t\tif (match && match.index !== undefined && !should_ignore(content, match.index)) {\n\t\t\t\tconst fixed = basename.replace('.svelte', '(.server).js/ts');\n\n\t\t\t\tconst message =\n\t\t\t\t\t`\\n${colors.bold().red(path.relative('.', filename))}\\n` +\n\t\t\t\t\t`\\`${match[1]}\\` will be ignored — move it to ${fixed} instead. See https://svelte.dev/docs/kit/page-options for more information.`;\n\n\t\t\t\tif (!warned.has(message)) {\n\t\t\t\t\tconsole.log(message);\n\t\t\t\t\twarned.add(message);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}","markup":"({ content, filename }) => {\n\t\tif (!filename) return;\n\n\t\tconst basename = path.basename(filename);\n\n\t\tif (basename.startsWith('+layout.') && !has_children(content, isSvelte5Plus())) {\n\t\t\tconst message =\n\t\t\t\t`\\n${colors.bold().red(path.relative('.', filename))}\\n` +\n\t\t\t\t`\\`<slot />\\`${isSvelte5Plus() ? ' or `{@render ...}` tag' : ''}` +\n\t\t\t\t' missing — inner content will not be rendered';\n\n\t\t\tif (!warned.has(message)) {\n\t\t\t\tconsole.log(message);\n\t\t\t\twarned.add(message);\n\t\t\t}\n\t\t}\n\t}"}}

package/dist/components/Input/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/_svelte_metadata.json

@@ -0,0 +1 @@
+{"compilerOptions":{"css":"external","dev":true,"hmr":false},"configFile":false,"extensions":[".svelte"],"preprocess":{"script":"({ content, filename }) => {\n\t\tif (!filename) return;\n\n\t\tconst basename = path.basename(filename);\n\t\tif (basename.startsWith('+page.') || basename.startsWith('+layout.')) {\n\t\t\tconst match = content.match(options_regex);\n\t\t\tif (match && match.index !== undefined && !should_ignore(content, match.index)) {\n\t\t\t\tconst fixed = basename.replace('.svelte', '(.server).js/ts');\n\n\t\t\t\tconst message =\n\t\t\t\t\t`\\n${colors.bold().red(path.relative('.', filename))}\\n` +\n\t\t\t\t\t`\\`${match[1]}\\` will be ignored — move it to ${fixed} instead. See https://svelte.dev/docs/kit/page-options for more information.`;\n\n\t\t\t\tif (!warned.has(message)) {\n\t\t\t\t\tconsole.log(message);\n\t\t\t\t\twarned.add(message);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}","markup":"({ content, filename }) => {\n\t\tif (!filename) return;\n\n\t\tconst basename = path.basename(filename);\n\n\t\tif (basename.startsWith('+layout.') && !has_children(content, isSvelte5Plus())) {\n\t\t\tconst message =\n\t\t\t\t`\\n${colors.bold().red(path.relative('.', filename))}\\n` +\n\t\t\t\t`\\`<slot />\\`${isSvelte5Plus() ? ' or `{@render ...}` tag' : ''}` +\n\t\t\t\t' missing — inner content will not be rendered';\n\n\t\t\tif (!warned.has(message)) {\n\t\t\t\tconsole.log(message);\n\t\t\t\twarned.add(message);\n\t\t\t}\n\t\t}\n\t}"}}

package/dist/components/ModalDialog/ModalDialog.fixture.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	// Conventions escape hatch (docs/component-testing/02-test-conventions.md):
+	// ModalDialog is imperative-only (open()/close() via a ref; no bindable
+	// `visible` prop), so a `.svelte.test.ts` file can't drive it directly. This
+	// fixture holds the `bind:this` ref and exposes an opener button that calls
+	// `.open()`; ModalDialog props are forwarded through `...rest`. The default
+	// content (an "inside" button) is the required `children` snippet — it also
+	// gives the focus trap a real focusable element to auto-focus.
+	import ModalDialog from "./ModalDialog.svelte";
+
+	let dialog = $state<ModalDialog>();
+	let { ...rest } = $props();
+</script>
+
+<button data-testid="opener" onclick={() => dialog?.open()}>open</button>
+
+<ModalDialog bind:this={dialog} {...rest}>
+	<button data-testid="inside">Inside</button>
+</ModalDialog>

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

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

package/dist/components/SlidingPanels/SlidingPanels.fixture.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import SlidingPanels from "./SlidingPanels.svelte";
+
+	// Conventions escape hatch (docs/component-testing/02-test-conventions.md):
+	// SlidingPanels exposes the panel content via snippets that receive an
+	// imperative `show(panel)` fn. A `.svelte.test.ts` file can't host markup that
+	// wires snippet args to a button, so we compose the real component here and
+	// drive the async transition by clicking the rendered buttons. `duration` is
+	// kept small (60ms default) so the transition resolves well within testTimeout.
+	let { duration = 60 } = $props();
+</script>
+
+<SlidingPanels {duration}>
+	{#snippet panelA({ show })}
+		<div>Panel A <button onclick={() => show("B")}>go B</button></div>
+	{/snippet}
+	{#snippet panelB({ show })}
+		<div>Panel B <button onclick={() => show("A")}>go A</button></div>
+	{/snippet}
+</SlidingPanels>

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

@@ -0,0 +1,6 @@
+import SlidingPanels from "./SlidingPanels.svelte";
+declare const SlidingPanels: import("svelte").Component<{
+    duration?: number;
+}, {}, "">;
+type SlidingPanels = ReturnType<typeof SlidingPanels>;
+export default SlidingPanels;

package/docs/component-testing/PROGRESS.md

@@ -35,16 +35,130 @@ Branch: `feat/component-testing`
 
 | Rank | Task                                                                                                                                                                    | Source                                          | Status |
 | ---- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------ |
-| 14   | Rest of Tier 1 (Separator already smoke-tested · H, KbdShortcut, ButtonGroupRadio, ListItemButton, Card, TabbedMenu, IconSwap, Collapsible)                             | [03](./03-component-coverage-roadmap.md) #10–17 | ⬜     |
-| 15   | Tier 2 — `FieldInput` first, then the Field\* family + OtpInput, Nav, etc.                                                                                              | [03](./03-component-coverage-roadmap.md)        | ⬜     |
-| 16   | Portals/focus-traps in browser mode (Modal, ModalDialog, Backdrop, Drawer, AlertConfirmPrompt)                                                                          | [04](./04-hard-cases-and-e2e.md)                | ⬜     |
-| 17   | Anchor-positioned menus (DropdownMenu, CommandMenu, UserAvatarMenu) + extract search logic to `_internal`                                                               | [04](./04-hard-cases-and-e2e.md)                | ⬜     |
+| 14   | Rest of Tier 1 (Separator already smoke-tested · H, KbdShortcut, ButtonGroupRadio, ListItemButton, Card, TabbedMenu, IconSwap, Collapsible)                             | [03](./03-component-coverage-roadmap.md) #10–17 | ✅     |
+| 15   | Tier 2 — `FieldInput` first, then the Field\* family + OtpInput, Nav, etc.                                                                                              | [03](./03-component-coverage-roadmap.md)        | ✅     |
+| 16   | Portals/focus-traps in browser mode (Modal, ModalDialog, Backdrop, Drawer, AlertConfirmPrompt)                                                                          | [04](./04-hard-cases-and-e2e.md)                | ✅     |
+| 17   | Anchor-positioned menus (DropdownMenu, CommandMenu, UserAvatarMenu) + extract search logic to `_internal`                                                               | [04](./04-hard-cases-and-e2e.md)                | ✅     |
 | 18   | Standalone Playwright E2E layer (drag: Tree/FieldOptions/FieldFile; Milkdown; Checkout/auth flows)                                                                      | [04](./04-hard-cases-and-e2e.md)                | ⏭️     |
 | 19   | Clear the repo's **pre-existing lint debt** (8 eslint errors + 119 prettier files), then add a **`pnpm lint`** CI job. (`pnpm check` already runs in CI as of task 13.) | [05](./05-ci.md)                                | ✅     |
 | 20   | (Maybe) visual-regression via `toMatchScreenshot`; multi-browser matrix                                                                                                 | [00](./00-overview-and-roadmap.md)              | ⏭️     |
 
+### Task 14 — Tier 1 components (one commit each)
+
+- [x] H — `H.svelte.test.ts` (8 tests)
+- [x] KbdShortcut — `KbdShortcut.svelte.test.ts` (6 tests)
+- [x] ButtonGroupRadio — `ButtonGroupRadio.svelte.test.ts`
+- [x] ListItemButton — `ListItemButton.svelte.test.ts`
+- [x] Card — `Card.svelte.test.ts`
+- [x] TabbedMenu — `TabbedMenu.svelte.test.ts`
+- [x] IconSwap — `IconSwap.svelte.test.ts`
+- [x] Collapsible — `Collapsible.svelte.test.ts` (the browser-only star: real `scrollHeight > clientHeight`)
+
+### Task 15 — Tier 2 (Field\* family first, then OtpInput, Nav, etc.)
+
+Field\* family (all under `Input/`, co-located `*.svelte.test.ts`):
+
+- [x] FieldInput — flagship; label/for, value/type/required/disabled, trim, validate (10 tests)
+- [x] FieldTextarea — textarea + trim/validate + autogrow (11 tests)
+- [x] FieldCheckbox — native checkbox, checked/toggle, validate-on-interaction (8 tests)
+- [x] FieldSwitch — wraps Switch in InputWrap; checked/toggle (off-center click), disabled (9 tests)
+- [x] FieldRadios — radio group, value binding, selection moves on click (7 tests)
+- [x] FieldSelect — select options, value binding via selectOptions, validate, optgroup (9 tests)
+- [x] FieldLikeButton — hidden input + Button, JSON render, built-in JSON/required validation (7 tests)
+- [x] FieldPhoneNumber — tel input + prefix picker, compose to E.164 hidden value, validation (13 tests)
+- [x] FieldKeyValues — add/remove rows, key/value → serialized JSON hidden value (9 tests)
+- [x] FieldObject — JSON tree view ↔ edit-mode textarea toggle, hidden value round-trip (7 tests)
+
+Other Tier 2:
+
+- [x] OtpInput — slots, value binding, **focus jump**, onComplete, numeric sanitize (12 tests)
+- [x] TypeaheadInput — input + typeahead action (combobox), value binding, getOptions called (7 tests)
+- [x] ColorScheme — store class: toggle/reset, localStorage + `<html>.dark` class (9 tests)
+- [x] ImageCycler — single-image static contract: role=img, aria-label, data-fit, bg, snippets (5 tests)
+- [x] PricingTable — list/tiers, billing toggle switches prices, data flags, CTA callback (11 tests)
+- [x] SlidingPanels — fixture-driven imperative `show()`; post-transition panel destroy (3 tests)
+- [x] Nav — section title (interactive vs not), group expand/collapse + onGroupToggle, leaf href/onClick/
+      disabled variants, parent-with-children nesting, activeId/isActive auto-expand, isCollapsed (12 tests)
+- [x] ThemePreview — root class, default header vs header/sidebar/footer snippet overrides, showLabels/
+      showInputs/compact toggles, embedded sidebar Nav (8 tests)
+- [x] AppShell — slot-driven data-shell regions (conditional vs always-on), children in page-main,
+      pageFlexGrow → flex class (7 tests)
+- [x] AppShellSimple — main always renders; header/rail/aside conditional; headerStyle applied (6 tests)
+- [x] AssetsPreview — inline gallery exercises AssetsPreviewContent (name/zoom-state/dots/arrow nav) +
+      modal fixture for imperative open()/Close; hermetic 1×1-PNG data URIs (11 tests)
+- [x] Notifications — reactive stack render: role=alert + data-type per intent, dedup count badge,
+      close-button removal, noXButton, multiple/empty stacks (8 tests)
+
+**Task 15 status:** ✅ DONE — 22 components. Core 16 (FieldInput + 6 Field family + 3 complex Field +
+OtpInput, TypeaheadInput, ColorScheme, ImageCycler, PricingTable, SlidingPanels) plus the final 6
+(Nav, ThemePreview, AppShell, AppShellSimple, AssetsPreview inline+modal, Notifications). The whole
+non-deferred backlog (#14–#17, #19) is now complete; only #18/#20 remain deferred.
+
+### Task 16 — Portals / focus-traps
+
+- [x] focus-trap action — the deferred hard proof: auto-focus first + Tab/Shift+Tab wrap (5 tests)
+- [x] Backdrop — visible render, backdrop-click/escape callbacks, focus-trap, defaultPrevented guard (9 tests)
+- [x] Modal — opens dialog (role), children/header/footer, aria, Escape→onEscape+close (6 tests)
+- [x] Drawer — role=dialog/aria-modal, escape + outside callbacks, position (7 tests)
+- [x] ModalDialog — fixture + imperative open/close, focus-trap, Escape, click-outside (8 tests)
+- [x] AlertConfirmPrompt — stack-driven alert/confirm/prompt: render, focus, click resolves promise (11 tests)
+
+### Task 17 — Anchor-positioned menus + search-logic extraction
+
+- [x] Extract search logic to `_internal` — `DropdownMenu/_internal/dropdown-menu-search.ts` +
+      `CommandMenu/_internal/command-menu-utils.ts`, node-tested (14 tests); components refactored to import
+- [x] DropdownMenu (browser) — trigger/aria-expanded, role=menu + menuitems, select+close, Escape, search filter (7 tests)
+- [x] CommandMenu (browser) — fixture + imperative open, search box, type→debounced getOptions→options, select (4 tests)
+- [x] UserAvatarMenu (browser) — authed/unauth trigger labels, header tile, Logout/Login/Register + color-scheme item (8 tests)
+
 ## Decisions log
 
+- **2026-06-09** — **Task 15 closed — the final 5 postponed components done.** Nav, ThemePreview,
+  AppShell, AppShellSimple, AssetsPreview (inline + modal), Notifications — drafted + adversarially
+  reviewed in a parallel workflow, then verified against real Chromium + the full-suite gate before
+  per-component commits. **484 tests** green; `pnpm check`/`lint`/`test` all clean. The entire
+  non-deferred backlog (#14–#17, #19) is now complete; only #18 (standalone E2E) and #20 (visual
+  regression) remain deferred. New gotchas learned: (a) **un-caught image preload rejects on dead
+  URLs** — `AssetsPreview`/`AssetsPreviewInline` call `preloadImgs(...)` without `.catch`, so a
+  network/`example.com` URL surfaces as an unhandled rejection (and isn't hermetic for CI). Fix: pass
+  `AssetPreview` objects with a real 1×1-PNG **data-URI** `url` + explicit `name`/`type:"image"` so the
+  preload resolves offline. (b) **The AssetsPreviewContent slide has a ~300ms async tail** (`await
+waitForNextRepaint()` + `sleep(300)`); if the component unmounts mid-slide, the continuation reads
+  `$state` on a torn-down scope → **`track_reactivity_loss` unhandled rejection**. Fix: after navigating,
+  poll until the slide settles (outgoing panel gone → a single `<img>`) so it finishes while mounted.
+  (c) Re-confirmed the `page.elementLocator` staleness rule — it snapshots an element by its current
+  text, so a name label that changes during navigation must be read live via `expect.poll(() =>
+el.textContent)`. (d) `AssetsPreview.open(index)` settles back to index 0 (its open-effect reads then
+  nulls `_openIdx` and re-runs) — a component quirk; the modal test asserts open()/Close only and leaves
+  index-precise nav to the inline test. (e) **Nav persists expand state in localStorage** (persistState
+  defaults true) → pass `persistState={false}` + `localStorage.clear()` in beforeEach; and never `.click()`
+  a Nav `<a href>` leaf (it navigates the page) — assert its attributes instead.
+- **2026-06-08** — **Backlog #15/#16/#17 done (this session).** Tier-2 core (16 components), portals/
+  focus-traps (#16: focus-trap action proof + Backdrop/Modal/Drawer/ModalDialog/AlertConfirmPrompt), and
+  anchor menus (#17: DropdownMenu/CommandMenu/UserAvatarMenu) — all browser-mode, drafted+adversarially-
+  reviewed in parallel workflows, then verified against real Chromium + full-suite gate before per-component
+  commits. **426 tests** green; `pnpm check`/`lint`/`test` clean. Key learnings: (a) **`page.elementLocator`
+  snapshots an element by its text** — it goes stale if the element's content changes (PricingTable toggle);
+  poll the live node's `textContent` instead. (b) **A Playwright `.click()` on an element that synchronously
+  removes itself orphans a "Cancelled" rejection** (non-zero exit) — use a native `el.click()` for
+  self-closing menuitems; ModalDialog-based closes are async so they're unaffected. (c) `getByRole("list")/
+("listitem")` is ambiguous when a `<ul>`/`<li>` is nested — scope by class. (d) **Task 15: 5 heavy/low-yield
+  components postponed** (Nav, ThemePreview, AppShell/AppShellSimple, AssetsPreview, Notifications). (e)
+  **#17 refactor:** pure search logic extracted to `DropdownMenu/_internal/dropdown-menu-search.ts` +
+  `CommandMenu/_internal/command-menu-utils.ts`, node-tested (14 tests).
+- **2026-06-08** — **Backlog #14 done (rest of Tier 1).** 8 components, one commit each: H, KbdShortcut,
+  ButtonGroupRadio, ListItemButton, Card, TabbedMenu, IconSwap, Collapsible (+64 tests → **210 total**,
+  `pnpm test`/`check`/`lint` all green). Drafted+adversarially-reviewed in parallel via a subagent
+  workflow, then verified against real Chromium + a full-suite gate before committing each. Notable
+  findings: (1) **the browser test env loads NO component/Tailwind CSS** (setupFiles is only
+  `vitest-browser-svelte`; nothing imports the stuic aggregator stylesheet) — only inline styles the
+  component emits directly are reliable. **Collapsible** therefore injects the `line-clamp-{n}` rules
+  Tailwind would generate (via `beforeAll` + a `<style>` tag) so its genuine browser-only measurement
+  (`scrollHeight > clientHeight`) can run; everything else asserts `data-*`/class presence, never
+  computed external-class styles. (2) **Card**'s `horizontal` variant auto-switches to `vertical` below
+  `horizontalThreshold` (480px) — tests pass `horizontalThreshold={0}` to assert the raw variant.
+  (3) **IconSwap** omits the motion-dependent `300ms` duration assertion (no per-test
+  `prefers-reduced-motion` API — cf. the Skeleton decision); asserts `duration:0`/easing CSS vars instead.
 - **2026-06-08** — Adopt **Vitest 4 Browser Mode + `vitest-browser-svelte` + `@vitest/browser-playwright` (Chromium)** — verified the right default for a component library whose value is DOM/layout/focus behavior the current node/server-build setup can't test.
 - **2026-06-08** — **Take the vitest 3→4 major upgrade now** (gating prerequisite) — `vitest-browser-svelte@^2` peer-requires `vitest ^4`; the vitest-3-compatible `0.1.0` is a dead-end.
 - **2026-06-08** — **Scope:** easy warm-up (Button/Pill/Switch/…) then **one** hard proof — not full coverage up front.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.116.0",
+	"version": "3.118.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",