@dorsk/tsumikit 0.64.1 → 0.65.0

package/README.md

@@ -276,7 +276,8 @@ and an `attrs` object for `data-*`/test ids on the row; a checkable `pressed` it
 its icon leading and shows its check trailing, or uses the leading check slot when it has
 no icon; selecting closes the menu unless `closeOnSelect={false}` or the item sets `keepOpen`;
 rest props land on the trigger, `count`/`countMax` paint its corner badge and `panelStyle`
-sizes the panel),
+sizes the panel; an item with a `control` snippet renders as a non-button row hosting a native
+`<select>` or nested Popover trigger, keeping the icon column, row height and ↑/↓ navigation),
 Tabs (omit `panel` for a strip-only tablist of document tabs: `closable` + `onclose(id)`
 close through the ✕, Delete and middle-click, per-tab `leading` snippet, `title`,
 trailing `actions` snippet; `--tab-max-width` truncates long labels),

package/dist/components/molecules/Menu.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
 	export interface MenuItem {
 		label: string;
-		onselect: () => void;
+		/** Required for button rows; a `control` row's hosted control acts on its own. */
+		onselect?: () => void;
 		icon?: import('../atoms/Icon.svelte').IconName;
 		danger?: boolean;
 		disabled?: boolean;
@@ -18,6 +19,13 @@
 		keepOpen?: boolean;
 		/** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
 		content?: import('svelte').Snippet<[MenuItem]>;
+		/**
+		 * A row that is itself a control (a native `<select>`, a nested Popover trigger):
+		 * rendered as a non-button row with the menu's icon column and row height, its
+		 * first focusable element joining ↑/↓ navigation. Replaces label/tag; `onselect`,
+		 * `pressed` and `keepOpen` do not apply.
+		 */
+		control?: import('svelte').Snippet<[MenuItem, { close: () => void }]>;
 		/**
 		 * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
 		 * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)
@@ -117,18 +125,27 @@
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
-	function buttons(): HTMLButtonElement[] {
-		return listEl
-			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled)'))
-			: [];
+	const ROW_TARGET = ':is(select, input, textarea, button):not(:disabled), a[href], [tabindex]:not([tabindex="-1"])';
+
+	function targets(): HTMLElement[] {
+		if (!listEl) return [];
+		const rows = listEl.querySelectorAll<HTMLElement>(
+			':scope > [role="menuitem"]:not(:disabled), :scope > [role="menuitemcheckbox"]:not(:disabled), :scope > .menu-row:not([inert])'
+		);
+		return Array.from(rows).flatMap((row) => {
+			if (!row.classList.contains('menu-row')) return [row];
+			const control = row.querySelector<HTMLElement>(ROW_TARGET);
+			return control ? [control] : [];
+		});
 	}
 	function focusAt(i: number) {
-		const b = buttons();
+		const b = targets();
 		if (b.length) b[(i + b.length) % b.length].focus();
 	}
 	function onkeydown(e: KeyboardEvent) {
-		const b = buttons();
-		const i = b.indexOf(document.activeElement as HTMLButtonElement);
+		if ((e.target as Element).closest('[popover]') !== listEl?.closest('[popover]')) return;
+		const b = targets();
+		const i = b.indexOf(document.activeElement as HTMLElement);
 		if (e.key === 'ArrowDown') {
 			e.preventDefault();
 			focusAt(i + 1);
@@ -146,7 +163,7 @@
 	function select(item: MenuItem, close: () => void) {
 		if (item.disabled) return;
 		if (menuItemCloses(item, closeOnSelect)) close();
-		item.onselect();
+		item.onselect?.();
 	}
 </script>
 
@@ -186,6 +203,12 @@
 	{#snippet children({ close }: { close: () => void })}
 	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
+			{#if item.control}
+			<div {...item.attrs as HTMLAttributes<HTMLDivElement>} role="none" class="menu-item menu-row" class:danger={item.danger} inert={item.disabled}>
+				{#if item.icon}<Icon name={item.icon} />{/if}
+				{@render item.control(item, { close })}
+			</div>
+			{:else}
 			<button
 				type="button"
 				{...item.attrs}
@@ -216,6 +239,7 @@
 				{#if glyphs.trailingCheck}<span class="menu-check menu-check-trailing"><Icon name="check" /></span>{/if}
 				{/if}
 			</button>
+			{/if}
 		{/each}
 	</div>
 	{/snippet}
@@ -241,8 +265,12 @@
 		font-size: var(--fs-sm);
 		white-space: nowrap;
 	}
+	.menu-row {
+		position: relative;
+	}
 	.menu-item:hover:not(:disabled),
-	.menu-item:focus-visible {
+	.menu-item:focus-visible,
+	.menu-row:focus-within {
 		background: var(--bg-elevated-2);
 		outline: none;
 	}
@@ -273,7 +301,8 @@
 		margin-inline-start: 0;
 		padding-inline-start: 0;
 	}
-	.menu-item:disabled {
+	.menu-item:disabled,
+	.menu-row[inert] {
 		opacity: 0.45;
 		cursor: not-allowed;
 	}

package/dist/components/molecules/Menu.svelte.d.ts

@@ -1,6 +1,7 @@
 export interface MenuItem {
     label: string;
-    onselect: () => void;
+    /** Required for button rows; a `control` row's hosted control acts on its own. */
+    onselect?: () => void;
     icon?: import('../atoms/Icon.svelte').IconName;
     danger?: boolean;
     disabled?: boolean;
@@ -17,6 +18,15 @@ export interface MenuItem {
     keepOpen?: boolean;
     /** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
     content?: import('svelte').Snippet<[MenuItem]>;
+    /**
+     * A row that is itself a control (a native `<select>`, a nested Popover trigger):
+     * rendered as a non-button row with the menu's icon column and row height, its
+     * first focusable element joining ↑/↓ navigation. Replaces label/tag; `onselect`,
+     * `pressed` and `keepOpen` do not apply.
+     */
+    control?: import('svelte').Snippet<[MenuItem, {
+        close: () => void;
+    }]>;
     /**
      * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
      * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.64.1",
+  "version": "0.65.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",