@insymetri/styleguide 0.1.79 → 0.1.81

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
+	import {createAttachmentKey} from 'svelte/attachments'
 	import {fly} from 'svelte/transition'
 	import {IIIcon} from '../IIIcon'
 	import {cn} from '../utils/cn'
@@ -18,15 +19,34 @@
 		disabled?: boolean
 		error?: boolean
 		errorMessage?: string
+		/** Fired when the selected value changes. */
+		onValueChange?: (value: string) => void
+		/** @deprecated Use `onValueChange`. */
 		onSelect?: (value: string) => void
 		onblur?: () => void
 		matchTriggerWidth?: boolean
 		renderItem?: Snippet<[item: MenuItem, selected: boolean]>
 		renderSelected?: Snippet<[item: MenuItem]>
+		/**
+		 * Replace the default combobox field with a custom trigger. Spread `props`
+		 * onto your trigger element/component — it carries the ref, click/keydown
+		 * handlers, and combobox aria attributes. `open`, `selectedItem`, and
+		 * `selectedLabel` are provided for rendering. When set, `class`, `label`,
+		 * and `renderSelected` no longer affect the (now custom) trigger.
+		 */
+		trigger?: Snippet<[{
+			props: Record<string, unknown>
+			open: boolean
+			selectedItem: MenuItem | undefined
+			selectedLabel: string
+		}]>
 		searchable?: boolean
 		searchPlaceholder?: string
 		autofocus?: boolean
+		/** Classes for the trigger (root) element. */
 		class?: string
+		/** Classes for the dropdown panel (popover surface). */
+		contentClass?: string
 	}
 
 	let {
@@ -37,15 +57,18 @@
 		disabled = false,
 		error = false,
 		errorMessage,
+		onValueChange,
 		onSelect,
 		onblur,
 		matchTriggerWidth = false,
 		renderItem,
 		renderSelected,
+		trigger,
 		searchable = false,
 		searchPlaceholder = 'Search...',
 		autofocus = false,
 		class: className,
+		contentClass,
 	}: Props = $props()
 
 	const showError = $derived(error || !!errorMessage)
@@ -79,6 +102,25 @@
 	const selectedItem = $derived(items.find(i => i.value === value))
 	const selectedLabel = $derived(selectedItem?.label ?? placeholder)
 
+	// Props a custom `trigger` snippet spreads onto its element. The attachment
+	// key and function are stable, so recomputing this derived object when `open`
+	// changes (for aria-expanded) does not 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({
+		role: 'combobox',
+		'aria-haspopup': 'listbox',
+		'aria-expanded': open,
+		type: 'button',
+		disabled: disabled || undefined,
+		onclick: toggle,
+		onkeydown: handleTriggerKeydown,
+		[triggerAttachmentKey]: attachTrigger,
+	})
+
 	function scrollHighlightedIntoView() {
 		requestAnimationFrame(() => {
 			const el = floatingEl?.querySelector<HTMLElement>(`[role="option"][data-index="${highlightedIndex}"]`)
@@ -118,6 +160,7 @@
 		if (item.disabled) return
 		value = item.value
 		open = false
+		onValueChange?.(item.value)
 		onSelect?.(item.value)
 		onblur?.()
 		triggerEl?.focus()
@@ -145,13 +188,15 @@
 		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]
 			if (!wasOpen) {
 				value = match.value
+				onValueChange?.(match.value)
 				onSelect?.(match.value)
 			} else {
 				highlightedIndex = matchIndex
@@ -240,6 +285,9 @@
 	{#if label}
 		<span class="text-small-emphasis text-secondary mb-4">{label}</span>
 	{/if}
+	{#if trigger}
+		{@render trigger({props: triggerProps, open, selectedItem, selectedLabel})}
+	{:else}
 	<button
 		bind:this={triggerEl}
 		type="button"
@@ -266,6 +314,7 @@
 		{/if}
 		<IIIcon iconName="caret-down" />
 	</button>
+	{/if}
 
 	{#if open}
 		<div use:portal use:clickOutside={{onClose: close, ignore: () => triggerEl}}>
@@ -273,7 +322,7 @@
 				bind:this={floatingEl}
 				role="listbox"
 				data-menu-content
-				class="flex flex-col min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 pointer-events-auto outline-none overflow-hidden"
+				class={cn('flex flex-col min-w-100 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-16 pointer-events-auto outline-none overflow-hidden', contentClass)}
 				transition:fly={{y: -4, duration: 150}}
 			>
 				{#if searchable}
@@ -284,7 +333,7 @@
 						onkeydown={(e) => search.handleKeydown(e, '[data-menu-content]')}
 					/>
 				{/if}
-				<div class="dd-scroll min-h-0 overflow-y-auto -mr-2">
+				<div class="ii-menu-scroll min-h-0 overflow-y-auto -mr-2">
 					{#each (searchable ? search.filteredItems as MenuItem[] : items) as item, listIndex (item.value)}
 						{@const index = searchable ? search.getItemIndex(item) : listIndex}
 						{@const isHighlighted = searchable
@@ -346,26 +395,3 @@
 		<span class="text-tiny text-error mt-4" data-field-error>{errorMessage}</span>
 	{/if}
 </div>
-
-<style>
-	/* Opt back into ::-webkit-scrollbar styling so we can set a custom (narrow)
-	   thumb width: the global standard scrollbar-width/color (base.css) otherwise
-	   disables the WebKit pseudo-elements in Chromium. */
-	.dd-scroll {
-		scrollbar-width: auto;
-		scrollbar-color: auto;
-	}
-	.dd-scroll::-webkit-scrollbar {
-		width: 4px;
-	}
-	.dd-scroll::-webkit-scrollbar-track {
-		background: transparent;
-	}
-	.dd-scroll::-webkit-scrollbar-thumb {
-		background-color: var(--ii-gray-300);
-		border-radius: 9999px;
-	}
-	.dd-scroll::-webkit-scrollbar-thumb:hover {
-		background-color: var(--ii-gray-400);
-	}
-</style>

package/dist/IIDropdownInput/IIDropdownInput.svelte.d.ts

@@ -8,15 +8,36 @@ type Props = {
     disabled?: boolean;
     error?: boolean;
     errorMessage?: string;
+    /** Fired when the selected value changes. */
+    onValueChange?: (value: string) => void;
+    /** @deprecated Use `onValueChange`. */
     onSelect?: (value: string) => void;
     onblur?: () => void;
     matchTriggerWidth?: boolean;
     renderItem?: Snippet<[item: MenuItem, selected: boolean]>;
     renderSelected?: Snippet<[item: MenuItem]>;
+    /**
+     * Replace the default combobox field with a custom trigger. Spread `props`
+     * onto your trigger element/component — it carries the ref, click/keydown
+     * handlers, and combobox aria attributes. `open`, `selectedItem`, and
+     * `selectedLabel` are provided for rendering. When set, `class`, `label`,
+     * and `renderSelected` no longer affect the (now custom) trigger.
+     */
+    trigger?: Snippet<[
+        {
+            props: Record<string, unknown>;
+            open: boolean;
+            selectedItem: MenuItem | undefined;
+            selectedLabel: string;
+        }
+    ]>;
     searchable?: boolean;
     searchPlaceholder?: string;
     autofocus?: boolean;
+    /** Classes for the trigger (root) element. */
     class?: string;
+    /** Classes for the dropdown panel (popover surface). */
+    contentClass?: string;
 };
 declare const IIDropdownInput: import("svelte").Component<Props, {}, "value">;
 type IIDropdownInput = ReturnType<typeof IIDropdownInput>;

package/dist/IIDropdownInput/IIDropdownInputStories.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import IIDropdownInput from './IIDropdownInput.svelte'
 	import {IIIcon} from '../IIIcon'
+	import {cn} from '../utils/cn'
 	import type {IconName} from '../icons'
 
 	let basicValue = $state<string | undefined>(undefined)
 	let disabledItemValue = $state<string | undefined>(undefined)
+	let customTriggerValue = $state<string | undefined>(undefined)
 
 	const statusItems = [
 		{label: 'Active', value: 'active'},
@@ -85,4 +87,25 @@
 			</IIDropdownInput>
 		</div>
 	</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 replace the default field with any element. Spread <code>props</code> to wire up the ref, click/keyboard handling, and combobox aria attributes.</p>
+		<IIDropdownInput items={statusItems} bind:value={customTriggerValue}>
+			{#snippet trigger({props, open, selectedItem, selectedLabel})}
+				<button
+					{...props}
+					class={cn(
+						'inline-flex items-center gap-6 py-6 px-12 rounded-control border border-button-secondary bg-input-bg text-small text-button-secondary cursor-default outline-none transition-colors hover:border-button-secondary-hover focus-visible:ring-3 focus-visible:ring-primary',
+						open && 'border-button-secondary-hover'
+					)}
+				>
+					<IIIcon iconName="funnel" class="w-14 h-14" />
+					<span>{selectedItem ? selectedLabel : 'Filter'}</span>
+					<IIIcon iconName="caret-down" class="w-12 h-12" />
+				</button>
+			{/snippet}
+		</IIDropdownInput>
+	</section>
 </div>

package/dist/{IIDropdownMenu/IIDropdownMenu.svelte → IIMenu/IIMenu.svelte}

@@ -1,30 +1,50 @@
 <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'
 	import MenuNoResults from '../utils/menu/MenuNoResults.svelte'
 	import MenuItemTooltip from '../utils/menu/MenuItemTooltip.svelte'
-	import IIDropdownMenuSub from './IIDropdownMenuSub.svelte'
-	import IIDropdownMenuSubSimple from './IIDropdownMenuSubSimple.svelte'
+	import IIMenuSub from './IIMenuSub.svelte'
+	import IIMenuSubSimple from './IIMenuSubSimple.svelte'
 
 	type Props = {
 		items: MenuEntry[]
 		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'
 		collisionPadding?: number
+		/** @deprecated Use `class` — it now targets the trigger. */
 		triggerClass?: string
 		searchable?: boolean
 		searchPlaceholder?: string
+		/** Classes for the trigger (root) element. */
 		class?: string
+		/** Classes for the menu panel (popover surface). */
+		contentClass?: string
 	}
 
 	let {
@@ -32,6 +52,8 @@
 		onSelect,
 		open = $bindable(false),
 		children,
+		trigger,
+		typeahead = false,
 		renderItem,
 		side = 'bottom',
 		align = 'end',
@@ -40,6 +62,7 @@
 		searchable = false,
 		searchPlaceholder = 'Search...',
 		class: className,
+		contentClass,
 	}: Props = $props()
 
 	let triggerEl = $state<HTMLElement | null>(null)
@@ -64,6 +87,7 @@
 		placement: placement as any,
 		offset: 4,
 		shift: {padding: collisionPadding},
+		constrainHeight: true,
 	})
 
 	const search = createMenuSearch({
@@ -108,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])'))
@@ -173,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)
+				}
 		}
 	}
 
@@ -207,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}
@@ -270,7 +363,7 @@
 	</div>
 	{#if isOpen}
 		{#if entry.searchable}
-			<IIDropdownMenuSub
+			<IIMenuSub
 				items={entry.items}
 				onSelect={handleSelect}
 				onClose={() => {
@@ -282,7 +375,7 @@
 				renderItemContent={itemContent}
 			/>
 		{:else}
-			<IIDropdownMenuSubSimple
+			<IIMenuSubSimple
 				items={entry.items}
 				onSelect={handleSelect}
 				onClose={() => {
@@ -325,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 ? cn('[all:unset] cursor-default', triggerClass) : defaultTriggerClass)}
-	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}}>
@@ -347,7 +445,7 @@
 			bind:this={floatingEl}
 			role="menu"
 			data-menu-content
-			class={cn(menuStyles.content, className)}
+			class={cn(menuStyles.content, contentClass)}
 			onkeydown={handleMenuKeydown}
 			transition:fly={{y: -4, duration: 150}}
 		>

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

@@ -0,0 +1,41 @@
+import type { Snippet } from 'svelte';
+import { type MenuItem, type MenuEntry } from '../utils/menu';
+type Props = {
+    items: MenuEntry[];
+    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';
+    collisionPadding?: number;
+    /** @deprecated Use `class` — it now targets the trigger. */
+    triggerClass?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    /** Classes for the trigger (root) element. */
+    class?: string;
+    /** Classes for the menu panel (popover surface). */
+    contentClass?: string;
+};
+declare const IIMenu: import("svelte").Component<Props, {}, "open">;
+type IIMenu = ReturnType<typeof IIMenu>;
+export default IIMenu;

package/dist/{IIDropdownMenu/IIDropdownMenuStories.svelte → IIMenu/IIMenuStories.svelte}

@@ -1,11 +1,21 @@
 <script lang="ts">
-	import IIDropdownMenu from './IIDropdownMenu.svelte'
+	import IIMenu from './IIMenu.svelte'
 	import {IIButton} from '../IIButton'
 	import {IIIcon} from '../IIIcon'
 
 	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">
@@ -13,7 +23,7 @@
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">With Separators</h2>
 		<p class="text-small text-secondary mb-12">Menu entries can include separator dividers.</p>
-		<IIDropdownMenu
+		<IIMenu
 			items={[
 				{label: 'Edit', value: 'edit'},
 				{label: 'Duplicate', value: 'duplicate'},
@@ -29,7 +39,7 @@
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">With Groups</h2>
 		<p class="text-small text-secondary mb-12">Items organized into labeled groups with headings.</p>
-		<IIDropdownMenu
+		<IIMenu
 			items={[
 				{
 					type: 'group',
@@ -57,7 +67,7 @@
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Custom Trigger</h2>
 		<p class="text-small text-secondary mb-12">Using the children snippet with triggerClass for custom trigger styling.</p>
-		<IIDropdownMenu
+		<IIMenu
 			items={[
 				{label: 'Profile', value: 'profile'},
 				{label: 'Settings', value: 'settings'},
@@ -72,14 +82,14 @@
 				<span>Account</span>
 				<IIIcon iconName="caret-down" class="w-12 h-12" />
 			{/snippet}
-		</IIDropdownMenu>
+		</IIMenu>
 	</section>
 
 	<!-- Searchable -->
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Searchable</h2>
 		<p class="text-small text-secondary mb-12">A search input at the top filters menu items as you type.</p>
-		<IIDropdownMenu
+		<IIMenu
 			items={[
 				{label: 'Edit', value: 'edit'},
 				{label: 'Duplicate', value: 'duplicate'},
@@ -98,7 +108,7 @@
 	<!-- Mixed Entries -->
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Mixed: Items + Separators + Groups</h2>
-		<IIDropdownMenu
+		<IIMenu
 			items={[
 				{label: 'Quick Action', value: 'quick'},
 				{type: 'separator'},
@@ -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

@@ -0,0 +1,3 @@
+declare const IIMenuStories: import("svelte").Component<Record<string, never>, {}, "">;
+type IIMenuStories = ReturnType<typeof IIMenuStories>;
+export default IIMenuStories;

package/dist/{IIDropdownMenu/IIDropdownMenuSub.svelte.d.ts → IIMenu/IIMenuSub.svelte.d.ts}

@@ -8,6 +8,6 @@ type Props = {
     searchPlaceholder?: string;
     renderItemContent: Snippet<[MenuItem]>;
 };
-declare const IIDropdownMenuSub: import("svelte").Component<Props, {}, "">;
-type IIDropdownMenuSub = ReturnType<typeof IIDropdownMenuSub>;
-export default IIDropdownMenuSub;
+declare const IIMenuSub: import("svelte").Component<Props, {}, "">;
+type IIMenuSub = ReturnType<typeof IIMenuSub>;
+export default IIMenuSub;

package/dist/{IIDropdownMenu/IIDropdownMenuSubSimple.svelte.d.ts → IIMenu/IIMenuSubSimple.svelte.d.ts}

@@ -8,6 +8,6 @@ type Props = {
     renderItemContent: Snippet<[MenuItem]>;
     renderSubMenu: Snippet<[SubEntry]>;
 };
-declare const IIDropdownMenuSubSimple: import("svelte").Component<Props, {}, "">;
-type IIDropdownMenuSubSimple = ReturnType<typeof IIDropdownMenuSubSimple>;
-export default IIDropdownMenuSubSimple;
+declare const IIMenuSubSimple: import("svelte").Component<Props, {}, "">;
+type IIMenuSubSimple = ReturnType<typeof IIMenuSubSimple>;
+export default IIMenuSubSimple;

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/IIMenu/index.d.ts

@@ -0,0 +1 @@
+export { default as IIMenu } from './IIMenu.svelte';

package/dist/IIMenu/index.js

@@ -0,0 +1 @@
+export { default as IIMenu } from './IIMenu.svelte';

package/dist/IIModal/IIModal.svelte

@@ -49,7 +49,7 @@
 		onOpenChange?.(newOpen)
 	}
 
-	// Portaled menu/listbox content (IIDropdownMenu, bits-ui DropdownMenu/Popover/Select, etc.)
+	// Portaled menu/listbox content (IIMenu, bits-ui DropdownMenu/Popover/Select, etc.)
 	// lives in document.body outside Dialog.Content, so bits-ui's DismissibleLayer would treat
 	// interactions with them as "outside" the modal and close it. Preserve those events.
 	function isInsidePortaledMenu(target: Element | null): boolean {
@@ -89,12 +89,13 @@
 				// property — both compose with the open/close slide animation, which owns `transform`
 				// (translateY). A transform-based center would be clobbered by the animation and
 				// shift the modal for the animation's duration.
-				'fixed left-0 right-0 mx-auto bg-surface border border-strong rounded-12 w-[calc(100%-20px)] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
+				'fixed left-0 right-0 mx-auto bg-surface border border-primary rounded-12 w-[calc(100%-20px)] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
 				// Vertical: anchored 15% from the top (default) vs. centered. When anchored, height
 				// is capped so a tall modal still clears the bottom (15% + 78vh leaves ~7vh below);
 				// centered can safely use the full 90vh since -50% keeps it within the viewport.
 				centered ? 'top-1/2 [translate:0_-50%] max-h-[90vh]' : 'top-[15%] max-h-[78vh]',
-				overlay === 'none' ? 'shadow-floating' : 'shadow-modal',
+				// Same edge for every overlay: shadow-modal (previously no-overlay used shadow-floating).
+			'shadow-modal',
 				size === 'sm' && 'max-w-400',
 				size === 'md' && 'max-w-500',
 				size === 'lg' && 'max-w-700',
@@ -107,7 +108,7 @@
 			<div class="flex items-start justify-between gap-12 px-24 pt-24 shrink-0">
 				<div class="flex flex-col min-w-0 flex-1">
 					<div class="flex items-center gap-12 min-w-0">
-						<Dialog.Title class="text-h2 text-body m-0 shrink-0">{title}</Dialog.Title>
+						<Dialog.Title class="text-h3 text-body m-0 shrink-0">{title}</Dialog.Title>
 						{#if titleAccessory}
 							{@render titleAccessory()}
 						{/if}

package/dist/index.d.ts

@@ -16,7 +16,9 @@ export { IICombobox } from './IICombobox';
 export { IIContextMenu } from './IIContextMenu';
 export { IIDateInput } from './IIDateInput';
 export { IIDropdownInput } from './IIDropdownInput';
-export { IIDropdownMenu } from './IIDropdownMenu';
+export { IIMenu } from './IIMenu';
+/** @deprecated Renamed to `IIMenu` (it is an action menu, not a select). Use `IIMenu`. */
+export { IIMenu as IIDropdownMenu } from './IIMenu';
 export { IIEditableBadges } from './IIEditableBadges';
 export { IIEditableText } from './IIEditableText';
 export { IIEmptyState } from './IIEmptyState';

package/dist/index.js

@@ -20,7 +20,9 @@ export { IICombobox } from './IICombobox';
 export { IIContextMenu } from './IIContextMenu';
 export { IIDateInput } from './IIDateInput';
 export { IIDropdownInput } from './IIDropdownInput';
-export { IIDropdownMenu } from './IIDropdownMenu';
+export { IIMenu } from './IIMenu';
+/** @deprecated Renamed to `IIMenu` (it is an action menu, not a select). Use `IIMenu`. */
+export { IIMenu as IIDropdownMenu } from './IIMenu';
 export { IIEditableBadges } from './IIEditableBadges';
 export { IIEditableText } from './IIEditableText';
 export { IIEmptyState } from './IIEmptyState';

package/dist/style/base.css

@@ -77,3 +77,26 @@
 		background-color: var(--ii-gray-400);
 	}
 }
+
+/* Shared narrow, rounded scrollbar for menu/dropdown scroll areas. Unlayered so
+   it outranks the @layer base `*` rules above. Setting scrollbar-width/color to
+   auto opts this element back into ::-webkit-scrollbar styling — the global
+   `scrollbar-width: thin` otherwise disables the WebKit pseudo-elements in
+   Chromium, so a custom (narrow) thumb width can't be applied. */
+.ii-menu-scroll {
+	scrollbar-width: auto;
+	scrollbar-color: auto;
+}
+.ii-menu-scroll::-webkit-scrollbar {
+	width: 4px;
+}
+.ii-menu-scroll::-webkit-scrollbar-track {
+	background: transparent;
+}
+.ii-menu-scroll::-webkit-scrollbar-thumb {
+	background-color: var(--ii-gray-300);
+	border-radius: 9999px;
+}
+.ii-menu-scroll::-webkit-scrollbar-thumb:hover {
+	background-color: var(--ii-gray-400);
+}

package/dist/utils/menu/menu-styles.d.ts

@@ -2,10 +2,10 @@ export declare const menuStyles: {
     readonly item: "flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none";
     readonly itemDefault: "text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
     readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent";
-    readonly content: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none";
-    readonly subContent: "min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none";
+    readonly content: "ii-menu-scroll min-w-48 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none";
+    readonly subContent: "ii-menu-scroll min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none";
     readonly searchableSubContent: "min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden animate-fade-in motion-reduce:animate-none";
-    readonly scrollableItems: "max-h-250 overflow-y-auto overflow-x-hidden";
+    readonly scrollableItems: "ii-menu-scroll max-h-250 overflow-y-auto overflow-x-hidden";
     readonly separator: "h-1 bg-muted -mx-4 my-4";
     readonly groupHeading: "text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none";
 };

package/dist/utils/menu/menu-styles.js

@@ -3,10 +3,13 @@ export const menuStyles = {
     item: 'flex items-center gap-8 px-12 py-8 rounded-4 text-small cursor-default select-none outline-none data-[disabled]:opacity-50 motion-reduce:transition-none',
     itemDefault: 'text-dropdown-item hover:bg-dropdown-item-hover focus:bg-dropdown-item-hover data-[highlighted]:bg-dropdown-item-hover data-[highlighted]:outline-none data-[state=open]:bg-dropdown-item-hover data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
     itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none data-[disabled]:hover:bg-transparent data-[disabled]:focus:bg-transparent',
-    content: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none',
-    subContent: 'min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none',
+    // content: no fixed max-height — IIMenu passes constrainHeight to
+    // useFloating, which sizes maxHeight to the available viewport space so the
+    // menu grows to fit its items and only scrolls near the screen edge.
+    content: 'ii-menu-scroll min-w-48 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto outline-none',
+    subContent: 'ii-menu-scroll min-w-48 max-h-300 overflow-y-auto bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 outline-none animate-fade-in motion-reduce:animate-none',
     searchableSubContent: 'min-w-48 bg-dropdown-bg border-[0.5px] border-dropdown-border rounded-10 shadow-submenu p-4 z-12 pointer-events-auto outline-none overflow-hidden animate-fade-in motion-reduce:animate-none',
-    scrollableItems: 'max-h-250 overflow-y-auto overflow-x-hidden',
+    scrollableItems: 'ii-menu-scroll max-h-250 overflow-y-auto overflow-x-hidden',
     separator: 'h-1 bg-muted -mx-4 my-4',
     groupHeading: 'text-tiny-emphasis text-secondary px-12 py-4 uppercase select-none',
 };

package/package.json

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

package/dist/IIDropdownMenu/IIDropdownMenu.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { Snippet } from 'svelte';
-import { type MenuItem, type MenuEntry } from '../utils/menu';
-type Props = {
-    items: MenuEntry[];
-    onSelect: (value: string) => void;
-    open?: boolean;
-    children?: Snippet;
-    renderItem?: Snippet<[MenuItem]>;
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    align?: 'start' | 'center' | 'end';
-    collisionPadding?: number;
-    triggerClass?: string;
-    searchable?: boolean;
-    searchPlaceholder?: string;
-    class?: string;
-};
-declare const IIDropdownMenu: import("svelte").Component<Props, {}, "open">;
-type IIDropdownMenu = ReturnType<typeof IIDropdownMenu>;
-export default IIDropdownMenu;

package/dist/IIDropdownMenu/IIDropdownMenuStories.svelte.d.ts

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

package/dist/IIDropdownMenu/index.d.ts

@@ -1 +0,0 @@
-export { default as IIDropdownMenu } from './IIDropdownMenu.svelte';

package/dist/IIDropdownMenu/index.js

@@ -1 +0,0 @@
-export { default as IIDropdownMenu } from './IIDropdownMenu.svelte';