@insymetri/styleguide 0.1.80 → 0.1.81

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -188,8 +188,9 @@
 		clearTimeout(typeaheadTimer)
 		typeaheadTimer = setTimeout(() => { typeaheadBuffer = '' }, 500)
 
+		// Substring match (so "tu" finds "Alan Turing"), not just prefix.
 		const matchIndex = items.findIndex(
-			i => !i.disabled && i.label.toLowerCase().startsWith(typeaheadBuffer)
+			i => !i.disabled && i.label.toLowerCase().includes(typeaheadBuffer)
 		)
 		if (matchIndex >= 0) {
 			const match = items[matchIndex]

package/dist/IIMenu/IIMenu.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
+	import {createAttachmentKey} from 'svelte/attachments'
 	import {fly} from 'svelte/transition'
 	import {cn} from '../utils/cn'
 	import {IIIcon} from '../IIIcon'
-	import {createMenuSearch, isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
+	import {createMenuSearch, getSelectableItems, isItem, isGroup, isSub, isSeparator, menuStyles, menuItemClass, type MenuItem, type MenuEntry, type SubEntry} from '../utils/menu'
 	import {useFloating, portal, clickOutside} from '../utils/menu'
 	import MenuItemContent from '../utils/menu/MenuItemContent.svelte'
 	import MenuSearchInput from '../utils/menu/MenuSearchInput.svelte'
@@ -17,6 +18,21 @@
 		onSelect: (value: string) => void
 		open?: boolean
 		children?: Snippet
+		/**
+		 * Replace the default trigger button with a custom element. Spread `props`
+		 * onto a single focusable element — it carries the ref, click/keydown
+		 * handlers, and menu aria attributes. Unlike `children` (which is wrapped in
+		 * an extra button), this makes your element THE trigger: one tab stop, and
+		 * keyboard open/navigation works.
+		 */
+		trigger?: Snippet<[{props: Record<string, unknown>; open: boolean}]>
+		/**
+		 * Enable select-style typeahead (non-searchable menus). Typing on the closed
+		 * trigger picks the closest label match and fires `onSelect` (like
+		 * `IIDropdownInput`); typing while open moves focus to the match. Off by
+		 * default so action menus don't fire on a keypress.
+		 */
+		typeahead?: boolean
 		renderItem?: Snippet<[MenuItem]>
 		side?: 'top' | 'right' | 'bottom' | 'left'
 		align?: 'start' | 'center' | 'end'
@@ -36,6 +52,8 @@
 		onSelect,
 		open = $bindable(false),
 		children,
+		trigger,
+		typeahead = false,
 		renderItem,
 		side = 'bottom',
 		align = 'end',
@@ -114,6 +132,69 @@
 		close()
 	}
 
+	// Select-style typeahead (opt-in via `typeahead`, non-searchable only). Buffer
+	// keystrokes for 500ms and match on label substring (so "tu" finds "Alan
+	// Turing"). Closed → fire onSelect (set the value, like IIDropdownInput); open
+	// → move focus to the match.
+	let typeaheadBuffer = ''
+	let typeaheadTimer: ReturnType<typeof setTimeout> | undefined
+
+	function handleTypeahead(char: string) {
+		if (!typeahead || searchable) return
+		const wasOpen = open
+		typeaheadBuffer += char.toLowerCase()
+		clearTimeout(typeaheadTimer)
+		typeaheadTimer = setTimeout(() => {
+			typeaheadBuffer = ''
+		}, 500)
+
+		const match = getSelectableItems(items).find(
+			i => !i.disabled && i.label.toLowerCase().includes(typeaheadBuffer),
+		)
+		if (!match) return
+		if (wasOpen) {
+			floatingEl?.querySelector<HTMLElement>(`[role="menuitem"][data-value="${CSS.escape(match.value)}"]`)?.focus()
+		} else {
+			onSelect(match.value)
+		}
+	}
+
+	// Open the menu from the trigger via keyboard. Enter/Space fire a native click
+	// on a <button> trigger (→ toggle); Arrow keys open it too. Once open, focus
+	// moves to the first item (effect above) and handleMenuKeydown takes over.
+	function handleTriggerKeydown(e: KeyboardEvent) {
+		if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {
+			e.preventDefault()
+			openSubIndex = null
+			open = true
+			return
+		}
+		if (typeahead && !open && e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			e.preventDefault()
+			handleTypeahead(e.key)
+		}
+	}
+
+	// Props a custom `trigger` snippet spreads onto its single element — carries the
+	// ref (via attachment), click/keydown, and menu aria. Stable attachment key so
+	// recomputing on `open` change doesn't re-run the ref attachment.
+	const attachTrigger = (node: Element) => {
+		triggerEl = node as HTMLElement
+		return () => {
+			if (triggerEl === node) triggerEl = null
+		}
+	}
+	const triggerAttachmentKey = createAttachmentKey()
+	const triggerProps = $derived({
+		type: 'button',
+		'aria-haspopup': 'menu',
+		'aria-expanded': open,
+		'data-state': open ? 'open' : 'closed',
+		onclick: toggle,
+		onkeydown: handleTriggerKeydown,
+		[triggerAttachmentKey]: attachTrigger,
+	})
+
 	function getMenuItems(): HTMLElement[] {
 		if (!floatingEl) return []
 		return Array.from(floatingEl.querySelectorAll<HTMLElement>(':scope > [role="menuitem"]:not([data-disabled]), :scope > [role="group"] > [role="menuitem"]:not([data-disabled])'))
@@ -179,6 +260,11 @@
 				e.preventDefault()
 				close()
 				break
+			default:
+				if (typeahead && e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					e.preventDefault()
+					handleTypeahead(e.key)
+				}
 		}
 	}
 
@@ -213,6 +299,7 @@
 	<div
 		role="menuitem"
 		tabindex="-1"
+		data-value={item.value}
 		data-disabled={item.disabled ? '' : undefined}
 		class={menuItemClass({variant: item.variant, searchable, isHighlighted: !item.disabled && index === search.highlightedIndex})}
 		data-search-item={searchable ? '' : undefined}
@@ -331,21 +418,26 @@
 	{/each}
 {/snippet}
 
-<button
-	bind:this={triggerEl}
-	type="button"
-	aria-haspopup="menu"
-	aria-expanded={open}
-	data-state={open ? 'open' : 'closed'}
-	class={cn(children ? '[all:unset] cursor-default' : defaultTriggerClass, triggerClass, className)}
-	onclick={toggle}
->
-	{#if children}
-		{@render children()}
-	{:else}
-		<IIIcon iconName="dots-three-vertical" />
-	{/if}
-</button>
+{#if trigger}
+	{@render trigger({props: triggerProps, open})}
+{:else}
+	<button
+		bind:this={triggerEl}
+		type="button"
+		aria-haspopup="menu"
+		aria-expanded={open}
+		data-state={open ? 'open' : 'closed'}
+		class={cn(children ? '[all:unset] cursor-default' : defaultTriggerClass, triggerClass, className)}
+		onclick={toggle}
+		onkeydown={handleTriggerKeydown}
+	>
+		{#if children}
+			{@render children()}
+		{:else}
+			<IIIcon iconName="dots-three-vertical" />
+		{/if}
+	</button>
+{/if}
 
 {#if open}
 	<div use:portal use:clickOutside={{onClose: close, ignore: () => triggerEl}}>

package/dist/IIMenu/IIMenu.svelte.d.ts

@@ -5,6 +5,24 @@ type Props = {
     onSelect: (value: string) => void;
     open?: boolean;
     children?: Snippet;
+    /**
+     * Replace the default trigger button with a custom element. Spread `props`
+     * onto a single focusable element — it carries the ref, click/keydown
+     * handlers, and menu aria attributes. Unlike `children` (which is wrapped in
+     * an extra button), this makes your element THE trigger: one tab stop, and
+     * keyboard open/navigation works.
+     */
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+        open: boolean;
+    }]>;
+    /**
+     * Enable select-style typeahead (non-searchable menus). Typing on the closed
+     * trigger picks the closest label match and fires `onSelect` (like
+     * `IIDropdownInput`); typing while open moves focus to the match. Off by
+     * default so action menus don't fire on a keypress.
+     */
+    typeahead?: boolean;
     renderItem?: Snippet<[MenuItem]>;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';

package/dist/IIMenu/IIMenuStories.svelte

@@ -6,6 +6,16 @@
 	function handleSelect(value: string) {
 		console.log('Selected:', value)
 	}
+
+	// Custom-trigger demo: reflect the selection in the trigger so typeahead is
+	// visibly proven (type "al" → the label becomes "Alan Turing").
+	const assigneeLabels: Record<string, string> = {
+		me: 'Assign to me',
+		none: 'Unassigned',
+		ada: 'Ada Lovelace',
+		alan: 'Alan Turing',
+	}
+	let assigneeValue = $state('')
 </script>
 
 <div class="flex flex-col gap-32">
@@ -118,4 +128,35 @@
 			align="start"
 		/>
 	</section>
+
+	<!-- Custom Trigger -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Custom Trigger</h2>
+		<p class="text-small text-secondary mb-12">
+			Use the <code>trigger</code> snippet to make any element the trigger. Spread
+			<code>props</code> onto a single focusable element — it carries the ref, click/keyboard
+			handling, and menu aria. Unlike <code>children</code> (wrapped in an extra button), this is
+			one tab stop and supports keyboard open + arrow navigation. With <code>typeahead</code>,
+			typing on the closed trigger picks the closest match and fires <code>onSelect</code> (like
+			<code>IIDropdownInput</code>).
+		</p>
+		<IIMenu
+			items={[
+				{label: 'Assign to me', value: 'me'},
+				{label: 'Unassign', value: 'none'},
+				{type: 'separator'},
+				{label: 'Ada Lovelace', value: 'ada'},
+				{label: 'Alan Turing', value: 'alan'},
+			]}
+			onSelect={value => (assigneeValue = value)}
+			align="start"
+			typeahead
+		>
+			{#snippet trigger({props})}
+				<IIButton {...props} variant="ghost" iconName="user">
+					{assigneeValue ? assigneeLabels[assigneeValue] : 'Assignee'}
+				</IIButton>
+			{/snippet}
+		</IIMenu>
+	</section>
 </div>

package/dist/IIMenu/IIMenuStories.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const IIMenuStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type IIMenuStories = InstanceType<typeof IIMenuStories>;
+declare const IIMenuStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IIMenuStories = ReturnType<typeof IIMenuStories>;
 export default IIMenuStories;

package/dist/IIMenu/IIMenuTriggerProof.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import IIMenu from './IIMenu.svelte'
+	import {IIButton} from '../IIButton'
+
+	// Minimal fixture for the keyboard/tab-order/typeahead play tests: a single
+	// IIMenu driven by the `trigger` snippet — spread `props` onto one focusable
+	// element (here IIButton) so it is THE trigger (one tab stop, keyboard works).
+	// The consumer owns the displayed value, so we reflect the selection here.
+	let {onSelect}: {onSelect?: (value: string) => void} = $props()
+
+	const labels: Record<string, string> = {
+		me: 'Assign to me',
+		none: 'Unassigned',
+		ada: 'Ada Lovelace',
+		alan: 'Alan Turing',
+	}
+	let selected = $state('')
+
+	function handleSelect(value: string) {
+		selected = value
+		onSelect?.(value)
+	}
+</script>
+
+<IIMenu
+	items={[
+		{label: 'Assign to me', value: 'me'},
+		{label: 'Unassign', value: 'none'},
+		{type: 'separator'},
+		{label: 'Ada Lovelace', value: 'ada'},
+		{label: 'Alan Turing', value: 'alan'},
+	]}
+	onSelect={handleSelect}
+	typeahead
+>
+	{#snippet trigger({props})}
+		<IIButton {...props} variant="ghost" iconName="user">
+			{selected ? labels[selected] : 'Assignee'}
+		</IIButton>
+	{/snippet}
+</IIMenu>

package/dist/IIMenu/IIMenuTriggerProof.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onSelect?: (value: string) => void;
+};
+declare const IIMenuTriggerProof: import("svelte").Component<$$ComponentProps, {}, "">;
+type IIMenuTriggerProof = ReturnType<typeof IIMenuTriggerProof>;
+export default IIMenuTriggerProof;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.80",
+	"version": "0.1.81",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {