@insymetri/styleguide 0.1.80 → 0.1.82

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/dist/IIPopover/IIPopover.svelte

@@ -6,7 +6,15 @@
 	type Props = {
 		open?: boolean
 		onOpenChange?: (open: boolean) => void
-		trigger: Snippet
+		/** Trigger content wrapped in the popover's own button. */
+		trigger?: Snippet
+		/**
+		 * Make your own element THE trigger instead of wrapping it in a button.
+		 * Spread `props` onto a single focusable element — it carries the ref,
+		 * click/keydown, and popover aria, so there's one tab stop and the element's
+		 * own focus styling applies. Takes precedence over `trigger`.
+		 */
+		triggerChild?: Snippet<[{props: Record<string, unknown>}]>
 		content: Snippet
 		side?: 'top' | 'right' | 'bottom' | 'left'
 		align?: 'start' | 'center' | 'end'
@@ -21,6 +29,7 @@
 		open = $bindable(false),
 		onOpenChange,
 		trigger,
+		triggerChild,
 		content,
 		side = 'bottom',
 		align = 'start',
@@ -36,9 +45,17 @@
 </script>
 
 <Popover.Root bind:open {onOpenChange}>
-	<Popover.Trigger class={cn('[all:unset] cursor-default', triggerClass)}>
-		{@render trigger()}
-	</Popover.Trigger>
+	{#if triggerChild}
+		<Popover.Trigger>
+			{#snippet child({props})}
+				{@render triggerChild({props})}
+			{/snippet}
+		</Popover.Trigger>
+	{:else}
+		<Popover.Trigger class={cn('[all:unset] cursor-default', triggerClass)}>
+			{@render trigger?.()}
+		</Popover.Trigger>
+	{/if}
 	<Popover.Portal>
 		<Popover.Content
 			{side}

package/dist/IIPopover/IIPopover.svelte.d.ts

@@ -2,7 +2,17 @@ import type { Snippet } from 'svelte';
 type Props = {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    trigger: Snippet;
+    /** Trigger content wrapped in the popover's own button. */
+    trigger?: Snippet;
+    /**
+     * Make your own element THE trigger instead of wrapping it in a button.
+     * Spread `props` onto a single focusable element — it carries the ref,
+     * click/keydown, and popover aria, so there's one tab stop and the element's
+     * own focus styling applies. Takes precedence over `trigger`.
+     */
+    triggerChild?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
     content: Snippet;
     side?: 'top' | 'right' | 'bottom' | 'left';
     align?: 'start' | 'center' | 'end';

package/dist/IIPopover/IIPopoverStories.svelte

@@ -105,4 +105,25 @@
 			{/snippet}
 		</IIPopover>
 	</section>
+
+	<!-- Custom trigger (single tab stop) -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Custom Trigger (single tab stop)</h2>
+		<p class="text-small text-secondary mb-12">
+			Use <code>triggerChild</code> and spread <code>props</code> onto your own element so it IS the
+			trigger — one tab stop, its own focus ring, keyboard opens it. Unlike <code>trigger</code>
+			(wrapped in the popover's button), there's no extra focusable wrapper.
+		</p>
+		<IIPopover>
+			{#snippet triggerChild({props})}
+				<IIButton {...props} variant="secondary" size="sm">Open Popover</IIButton>
+			{/snippet}
+			{#snippet content()}
+				<div class="flex flex-col gap-8 w-200 p-12">
+					<p class="text-small-emphasis text-body">Single-trigger popover</p>
+					<p class="text-small text-secondary">The button above is the only tab stop.</p>
+				</div>
+			{/snippet}
+		</IIPopover>
+	</section>
 </div>

package/dist/IIPopover/IIPopoverTriggerProof.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import IIPopover from './IIPopover.svelte'
+	import {IIButton} from '../IIButton'
+
+	// Fixture for the play test: `triggerChild` spreads `props` onto the IIButton
+	// so it IS the trigger (one tab stop, its own focus ring, keyboard opens).
+</script>
+
+<IIPopover>
+	{#snippet triggerChild({props})}
+		<IIButton {...props} variant="secondary">Open</IIButton>
+	{/snippet}
+	{#snippet content()}
+		<div class="p-12 w-200">
+			<p class="text-small text-secondary">Inside the popover.</p>
+		</div>
+	{/snippet}
+</IIPopover>

package/dist/IIPopover/IIPopoverTriggerProof.svelte.d.ts

@@ -0,0 +1,18 @@
+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 IIPopoverTriggerProof: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type IIPopoverTriggerProof = InstanceType<typeof IIPopoverTriggerProof>;
+export default IIPopoverTriggerProof;

package/package.json

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