@insymetri/styleguide 0.1.79 → 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}"]`)
@@ -118,6 +160,7 @@
 		if (item.disabled) return
 		value = item.value
 		open = false
+		onValueChange?.(item.value)
 		onSelect?.(item.value)
 		onblur?.()
 		triggerEl?.focus()
@@ -152,6 +195,7 @@
 			const match = items[matchIndex]
 			if (!wasOpen) {
 				value = match.value
+				onValueChange?.(match.value)
 				onSelect?.(match.value)
 			} else {
 				highlightedIndex = matchIndex
@@ -240,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"
@@ -266,6 +313,7 @@
 		{/if}
 		<IIIcon iconName="caret-down" />
 	</button>
+	{/if}
 
 	{#if open}
 		<div use:portal use:clickOutside={{onClose: close, ignore: () => triggerEl}}>
@@ -273,7 +321,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 +332,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 +394,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}

@@ -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

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