@marianmeres/stuic 3.116.0 → 3.117.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/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,104 @@ 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)
+- [ ] Nav (expand/collapse) — ⏭️ _postponed: 856-line component; needs a focused session_
+- [ ] ThemePreview — ⏭️ _postponed: largely visual/presentational; low behavioral yield_
+- [ ] AppShell / AppShellSimple — ⏭️ _postponed: layout-heavy, low behavioral yield_
+- [ ] AssetsPreview — ⏭️ _postponed: heavy; pure-logic already covered by assets-preview-utils tests_
+- [ ] Notifications — ⏭️ _postponed: borderline Tier 3 (portal + timers); has a node test already_
+
+**Task 15 status:** core done — 16 components (FieldInput + 6 Field family + 3 complex Field +
+OtpInput, TypeaheadInput, ColorScheme, ImageCycler, PricingTable, SlidingPanels). 5 postponed
+(Nav, ThemePreview, AppShell/AppShellSimple, AssetsPreview, Notifications) — heaviest / lowest
+behavioral yield; revisit in a focused follow-up. Moving on to backlog #16/#17.
+
+### 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-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.117.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",