@insymetri/styleguide 0.1.78 → 0.1.80

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}"]`)
@@ -111,12 +153,14 @@
 		placement: 'bottom-start',
 		offset: 2,
 		matchWidth: matchTriggerWidth,
+		constrainHeight: true,
 	})
 
 	function handleSelect(item: MenuItem) {
 		if (item.disabled) return
 		value = item.value
 		open = false
+		onValueChange?.(item.value)
 		onSelect?.(item.value)
 		onblur?.()
 		triggerEl?.focus()
@@ -151,6 +195,7 @@
 			const match = items[matchIndex]
 			if (!wasOpen) {
 				value = match.value
+				onValueChange?.(match.value)
 				onSelect?.(match.value)
 			} else {
 				highlightedIndex = matchIndex
@@ -239,6 +284,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"
@@ -265,6 +313,7 @@
 		{/if}
 		<IIIcon iconName="caret-down" />
 	</button>
+	{/if}
 
 	{#if open}
 		<div use:portal use:clickOutside={{onClose: close, ignore: () => triggerEl}}>
@@ -272,7 +321,7 @@
 				bind:this={floatingEl}
 				role="listbox"
 				data-menu-content
-				class="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"
+				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}
@@ -283,7 +332,7 @@
 						onkeydown={(e) => search.handleKeydown(e, '[data-menu-content]')}
 					/>
 				{/if}
-				<div class="max-h-300 overflow-y-auto">
+				<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

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}

@@ -9,8 +9,8 @@
 	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[]
@@ -21,10 +21,14 @@
 		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 {
@@ -40,6 +44,7 @@
 		searchable = false,
 		searchPlaceholder = 'Search...',
 		class: className,
+		contentClass,
 	}: Props = $props()
 
 	let triggerEl = $state<HTMLElement | null>(null)
@@ -64,6 +69,7 @@
 		placement: placement as any,
 		offset: 4,
 		shift: {padding: collisionPadding},
+		constrainHeight: true,
 	})
 
 	const search = createMenuSearch({
@@ -270,7 +276,7 @@
 	</div>
 	{#if isOpen}
 		{#if entry.searchable}
-			<IIDropdownMenuSub
+			<IIMenuSub
 				items={entry.items}
 				onSelect={handleSelect}
 				onClose={() => {
@@ -282,7 +288,7 @@
 				renderItemContent={itemContent}
 			/>
 		{:else}
-			<IIDropdownMenuSubSimple
+			<IIMenuSubSimple
 				items={entry.items}
 				onSelect={handleSelect}
 				onClose={() => {
@@ -331,7 +337,7 @@
 	aria-haspopup="menu"
 	aria-expanded={open}
 	data-state={open ? 'open' : 'closed'}
-	class={cn(children ? cn('[all:unset] cursor-default', triggerClass) : defaultTriggerClass)}
+	class={cn(children ? '[all:unset] cursor-default' : defaultTriggerClass, triggerClass, className)}
 	onclick={toggle}
 >
 	{#if children}
@@ -347,7 +353,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/{IIDropdownMenu/IIDropdownMenu.svelte.d.ts → IIMenu/IIMenu.svelte.d.ts}

@@ -9,11 +9,15 @@ type Props = {
     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 IIDropdownMenu: import("svelte").Component<Props, {}, "open">;
-type IIDropdownMenu = ReturnType<typeof IIDropdownMenu>;
-export default IIDropdownMenu;
+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,5 +1,5 @@
 <script lang="ts">
-	import IIDropdownMenu from './IIDropdownMenu.svelte'
+	import IIMenu from './IIMenu.svelte'
 	import {IIButton} from '../IIButton'
 	import {IIIcon} from '../IIIcon'
 
@@ -13,7 +13,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 +29,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 +57,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 +72,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 +98,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'},

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

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const IIDropdownMenuStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const IIMenuStories: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type IIDropdownMenuStories = InstanceType<typeof IIDropdownMenuStories>;
-export default IIDropdownMenuStories;
+type IIMenuStories = InstanceType<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/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

@@ -15,7 +15,12 @@
 		showCloseButton?: boolean
 		size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
 		overlay?: 'dark' | 'light' | 'none'
-		/** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 90vh. */
+		/** Vertically center the modal instead of anchoring it 15% from the top. */
+		centered?: boolean
+		/** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 78vh
+		 *  (90vh when `centered`). Note: when anchored (not centered) the modal
+		 *  sits 15% from the top, so a value above ~83vh pushes the bottom edge
+		 *  off-screen. */
 		maxHeight?: string
 		/** Replace the body wrapper's padding/scroll defaults — e.g. for a full-height flex body. */
 		bodyClass?: string
@@ -33,6 +38,7 @@
 		showCloseButton = true,
 		size = 'md',
 		overlay = 'dark',
+		centered = false,
 		maxHeight,
 		bodyClass,
 		class: className,
@@ -43,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 {
@@ -61,7 +67,7 @@
 	<Dialog.Portal>
 		<Dialog.Overlay
 			class={cn(
-				'fixed inset-0 z-14 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none',
+				'fixed inset-0 z-14 data-[state=open]:animate-modal-overlay-in data-[state=closed]:animate-modal-overlay-out motion-reduce:animate-none',
 				overlay === 'dark' && 'bg-black/30',
 				overlay === 'light' && 'bg-black/10',
 				overlay === 'none' && 'pointer-events-none'
@@ -78,16 +84,23 @@
 				if (isInsidePortaledMenu(target)) e.preventDefault()
 			}}
 			class={cn(
-				// Centered vertically (top-1/2 + -translate-y-1/2) so a tall modal stays within the
-				// viewport: with max-h-[90vh] its edges land at ~5vh/95vh. The previous top-[30%]
-				// anchor pushed the top edge off-screen once a modal grew past ~60vh tall.
-				'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface border border-strong rounded-12 w-[calc(100%-20px)] max-h-[90vh] flex flex-col z-15 data-[state=open]:animate-modal-in data-[state=closed]:animate-modal-out motion-reduce:animate-none focus:outline-none',
-				overlay === 'none' ? 'shadow-floating' : 'shadow-modal',
+				// Centering is deliberately kept OFF `transform`: horizontal uses left-0/right-0 +
+				// mx-auto, and vertical centering (when `centered`) uses the standalone `translate`
+				// 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-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]',
+				// 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',
 				size === 'xl' && 'max-w-[1100px]',
-				size === 'full' && 'max-w-[95vw] h-[90vh]',
+				size === 'full' && 'max-w-[95vw] h-[78vh]',
 				className
 			)}
 			style={maxHeight ? `max-height: ${maxHeight}` : undefined}
@@ -95,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/IIModal/IIModal.svelte.d.ts

@@ -10,7 +10,12 @@ type Props = {
     showCloseButton?: boolean;
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
     overlay?: 'dark' | 'light' | 'none';
-    /** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 90vh. */
+    /** Vertically center the modal instead of anchoring it 15% from the top. */
+    centered?: boolean;
+    /** Cap the modal height (any CSS value, e.g. "60vh"). Defaults to 78vh
+     *  (90vh when `centered`). Note: when anchored (not centered) the modal
+     *  sits 15% from the top, so a value above ~83vh pushes the bottom edge
+     *  off-screen. */
     maxHeight?: string;
     /** Replace the body wrapper's padding/scroll defaults — e.g. for a full-height flex body. */
     bodyClass?: string;

package/dist/IIModal/IIModalFocusStories.svelte

@@ -19,14 +19,15 @@
 
 <IIButton onclick={() => (open = true)}>Open modal</IIButton>
 
-{#if open}
-	<IIModal bind:open title="Add a note" onOpenChange={v => (open = v)}>
-		<IITextarea
-			bind:ref
-			bind:value
-			label="Note"
-			placeholder="The focus ring should be fully visible on the left, right, and bottom."
-			rows={4}
-		/>
-	</IIModal>
-{/if}
+<!-- Keep IIModal mounted unconditionally (no {#if open}) so bits-ui's Dialog can
+     play its exit animation on close — wrapping it in {#if} unmounts the whole
+     dialog instantly and skips the modal-out/fade-out transitions. -->
+<IIModal bind:open title="Add a note" onOpenChange={v => (open = v)}>
+	<IITextarea
+		bind:ref
+		bind:value
+		label="Note"
+		placeholder="The focus ring should be fully visible on the left, right, and bottom."
+		rows={4}
+	/>
+</IIModal>

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/style/tailwind/animations.d.ts

@@ -25,13 +25,11 @@ export declare const keyframes: {
             transform: string;
         };
     };
-    modalIn: {
+    modalSlideIn: {
         from: {
-            opacity: string;
             transform: string;
         };
         to: {
-            opacity: string;
             transform: string;
         };
     };
@@ -161,6 +159,8 @@ export declare const animation: {
     skeleton: string;
     'modal-in': string;
     'modal-out': string;
+    'modal-overlay-in': string;
+    'modal-overlay-out': string;
     'fade-out': string;
     'login-fade-in-up': string;
     'login-pulse': string;

package/dist/style/tailwind/animations.js

@@ -12,9 +12,13 @@ export const keyframes = {
         '0%': { transform: 'translate(-50%, -50%) rotate(0deg) translateX(24px)' },
         '100%': { transform: 'translate(-50%, -50%) rotate(360deg) translateX(24px)' },
     },
-    modalIn: {
-        from: { opacity: '0', transform: 'scale(0.96)' },
-        to: { opacity: '1', transform: 'scale(1)' },
+    modalSlideIn: {
+        // Transform-only slide into place. Opacity is handled by a separate, faster
+        // `fadeIn` animation (see modal-in) so the fade can match the overlay while
+        // the slide runs on its own long duration. (IIModal centers via mx-auto, not
+        // transform, so translateY here is free of the horizontal centering.)
+        from: { transform: 'translateY(-10px)' },
+        to: { transform: 'translateY(0)' },
     },
     spin: {
         to: { transform: 'rotate(360deg)' },
@@ -60,8 +64,9 @@ export const keyframes = {
         to: { opacity: '1', transform: 'translateY(0)' },
     },
     modalOut: {
-        from: { opacity: '1', transform: 'scale(1)' },
-        to: { opacity: '0', transform: 'scale(0.96)' },
+        // Fade out while sliding up.
+        from: { opacity: '1', transform: 'translateY(0)' },
+        to: { opacity: '0', transform: 'translateY(-6px)' },
     },
     fadeOut: {
         from: { opacity: '1' },
@@ -76,8 +81,14 @@ export const animation = {
     shake: 'shake 0.4s ease-out',
     shimmer: 'shimmer 1.5s infinite',
     skeleton: 'skeleton-loading 1.2s ease-in-out infinite',
-    'modal-in': 'modalIn 200ms ease-out',
-    'modal-out': 'modalOut 150ms ease-in',
+    // Two decoupled animations: the opacity fade matches the overlay exactly
+    // (fadeIn 130ms ease-out), while the slide glides in slowly over 2500ms.
+    'modal-in': 'fadeIn 130ms ease-out, modalSlideIn 2500ms cubic-bezier(0.1, 1, 0.1, 1)',
+    'modal-out': 'modalOut 90ms ease-in',
+    // Modal-specific overlay fades — snappy, to match the modal's timing rather
+    // than the slower shared fade-in/fade-out used by menus, tooltips, etc.
+    'modal-overlay-in': 'fadeIn 130ms ease-out',
+    'modal-overlay-out': 'fadeOut 90ms ease-in',
     'fade-out': 'fadeOut 150ms ease-in',
     'login-fade-in-up': 'loginFadeInUp 0.6s ease-out',
     'login-pulse': 'loginPulse 2s ease-in-out infinite',

package/dist/style/tailwind/preset.d.ts

@@ -442,13 +442,11 @@ declare const _default: {
                         transform: string;
                     };
                 };
-                modalIn: {
+                modalSlideIn: {
                     from: {
-                        opacity: string;
                         transform: string;
                     };
                     to: {
-                        opacity: string;
                         transform: string;
                     };
                 };
@@ -578,6 +576,8 @@ declare const _default: {
                 skeleton: string;
                 'modal-in': string;
                 'modal-out': string;
+                'modal-overlay-in': string;
+                'modal-overlay-out': string;
                 'fade-out': string;
                 'login-fade-in-up': string;
                 'login-pulse': string;

package/dist/utils/menu/MenuSearchInput.svelte

@@ -14,7 +14,7 @@
 	}: Props = $props()
 </script>
 
-<div class="-mx-4 -mt-4 px-14 mb-4 border-b-[0.5px] border-dropdown-border">
+<div class="shrink-0 -mx-4 -mt-4 px-14 mb-4 border-b-[0.5px] border-dropdown-border">
 	<input
 		bind:this={inputEl}
 		bind:value={searchQuery}

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/dist/utils/menu/use-floating.svelte.d.ts

@@ -9,5 +9,9 @@ export type UseFloatingOptions = {
         padding?: number;
     };
     matchWidth?: boolean;
+    /** Constrain the floating element's height to the space available in the
+     *  viewport (via the size middleware). Lets the panel grow to fit its
+     *  content and only cap/scroll when it would run off-screen. */
+    constrainHeight?: boolean;
 };
 export declare function useFloating(opts: UseFloatingOptions): void;

package/dist/utils/menu/use-floating.svelte.js

@@ -13,12 +13,18 @@ export function useFloating(opts) {
             const padding = typeof opts.shift === 'object' ? opts.shift.padding : 8;
             middleware.push(shiftMiddleware({ padding }));
         }
-        if (opts.matchWidth) {
+        if (opts.matchWidth || opts.constrainHeight) {
             middleware.push(sizeMiddleware({
-                apply({ rects }) {
-                    Object.assign(floating.style, {
-                        minWidth: `${rects.reference.width}px`,
-                    });
+                padding: 8,
+                apply({ rects, availableHeight }) {
+                    const styles = {};
+                    if (opts.matchWidth) {
+                        styles.minWidth = `${rects.reference.width}px`;
+                    }
+                    if (opts.constrainHeight) {
+                        styles.maxHeight = `${availableHeight}px`;
+                    }
+                    Object.assign(floating.style, styles);
                 },
             }));
         }

package/package.json

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

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';