@insymetri/styleguide 0.1.46 → 0.1.48

package/dist/IIDateInput/IIDateInput.svelte

@@ -68,7 +68,7 @@
 	}
 </script>
 
-<div class={cn('flex flex-col gap-4', className)}>
+<div class={cn('relative flex flex-col gap-4 pb-20', className)}>
 	<DatePicker.Root value={internalValue} bind:placeholder onValueChange={handleValueChange} {disabled}>
 		{#if label}
 			<DatePicker.Label class="text-small-emphasis text-secondary">{label}</DatePicker.Label>
@@ -76,9 +76,11 @@
 		<DatePicker.Input
 			bind:ref={inputEl}
 			class={cn(
-				'flex items-center gap-4 px-12 border bg-input-bg border-input-border transition-all duration-fast hover:border-input-border-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-3 [&:has(:focus)]:ring-primary motion-reduce:transition-none',
+				'flex items-center gap-4 px-12 border bg-input-bg border-input-border transition-all duration-fast [&:has(:focus)]:ring-3 motion-reduce:transition-none',
 				densityClasses[density.value],
-				showError && 'border-input-border-error [&:has(:focus)]:border-input-border-error [&:has(:focus)]:ring-error',
+				showError
+					? 'border-input-border-error hover:border-input-border-error [&:has(:focus)]:border-input-border-error [&:has(:focus)]:ring-error'
+					: 'hover:[&:not(:has(:focus))]:border-input-border-hover [&:has(:focus)]:border-accent [&:has(:focus)]:ring-primary',
 				disabled && 'bg-input-bg-disabled cursor-not-allowed'
 			)}
 		>
@@ -107,8 +109,8 @@
 		</DatePicker.Content>
 	</DatePicker.Root>
 	{#if showError && errorMessage}
-		<span class="text-tiny text-error">{errorMessage}</span>
+		<span class="absolute bottom-0 left-0 text-tiny text-error" data-field-error>{errorMessage}</span>
 	{:else if helperText}
-		<span class="text-tiny text-secondary">{helperText}</span>
+		<span class="absolute bottom-0 left-0 text-tiny text-secondary">{helperText}</span>
 	{/if}
 </div>

package/dist/IIDropdownInput/IIDropdownInput.svelte

@@ -15,7 +15,10 @@
 		placeholder?: string
 		label?: string
 		disabled?: boolean
+		error?: boolean
+		errorMessage?: string
 		onSelect?: (value: string) => void
+		onblur?: () => void
 		matchTriggerWidth?: boolean
 		renderItem?: Snippet<[item: MenuItem, selected: boolean]>
 		renderSelected?: Snippet<[item: MenuItem]>
@@ -30,7 +33,10 @@
 		placeholder = 'Select...',
 		label,
 		disabled = false,
+		error = false,
+		errorMessage,
 		onSelect,
+		onblur,
 		matchTriggerWidth = false,
 		renderItem,
 		renderSelected,
@@ -39,6 +45,8 @@
 		class: className,
 	}: Props = $props()
 
+	const showError = $derived(error || !!errorMessage)
+
 	const density = useDensity()
 
 	const densityClasses = {
@@ -79,6 +87,7 @@
 		value = item.value
 		open = false
 		onSelect?.(item.value)
+		onblur?.()
 		triggerEl?.focus()
 	}
 
@@ -144,6 +153,7 @@
 	function close() {
 		open = false
 		triggerEl?.focus()
+		onblur?.()
 	}
 
 	$effect(() => {
@@ -214,7 +224,7 @@
 	}
 </script>
 
-<div class="flex flex-col">
+<div class="relative flex flex-col pb-20">
 	{#if label}
 		<span class="text-small-emphasis text-secondary mb-4">{label}</span>
 	{/if}
@@ -226,9 +236,12 @@
 		aria-expanded={open}
 		{disabled}
 		class={cn(
-			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border bg-input-bg cursor-default text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed',
+			'flex items-center justify-between gap-4 py-5 pl-12 pr-8 border bg-input-bg cursor-default text-button-secondary box-border appearance-none font-inherit outline-none transition-colors duration-base ease-in-out hover:text-button-secondary-hover focus-visible:ring-3 disabled:opacity-50 disabled:cursor-not-allowed',
 			densityClasses[density.value],
-			open ? 'border-button-secondary-hover' : 'border-button-secondary',
+			showError
+				? 'border-input-border-error hover:border-input-border-error focus-visible:border-input-border-error focus-visible:ring-error'
+				: cn('hover:not-focus-visible:border-button-secondary-hover focus-visible:border-accent focus-visible:ring-primary', open ? 'border-button-secondary-hover' : 'border-button-secondary'),
+
 			className
 		)}
 		onclick={toggle}
@@ -304,4 +317,7 @@
 			</div>
 		</div>
 	{/if}
+	{#if showError && errorMessage}
+		<span class="absolute bottom-0 left-0 text-tiny text-error" data-field-error>{errorMessage}</span>
+	{/if}
 </div>

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

@@ -6,7 +6,10 @@ type Props = {
     placeholder?: string;
     label?: string;
     disabled?: boolean;
+    error?: boolean;
+    errorMessage?: string;
     onSelect?: (value: string) => void;
+    onblur?: () => void;
     matchTriggerWidth?: boolean;
     renderItem?: Snippet<[item: MenuItem, selected: boolean]>;
     renderSelected?: Snippet<[item: MenuItem]>;

package/dist/IIInput/IIInput.svelte

@@ -47,22 +47,9 @@
 	const isSearch = $derived(type === 'search')
 	const showClear = $derived(isSearch && !!value)
 	const hasAddons = $derived(!!prefix || !!suffix || isSearch)
-	let shouldShake = $state(false)
-	let prevShowError = $state(false)
-
-	$effect(() => {
-		if (showError && !prevShowError) {
-			shouldShake = true
-			const timer = setTimeout(() => {
-				shouldShake = false
-			}, 400)
-			return () => clearTimeout(timer)
-		}
-		prevShowError = showError
-	})
 </script>
 
-<div class={cn('flex flex-col', className)}>
+<div class={cn('relative flex flex-col pb-20', className)}>
 	{#if label}
 		<label for={restProps.id} class="text-small-emphasis text-secondary mb-4">
 			{label}
@@ -71,11 +58,12 @@
 	{#if hasAddons}
 		<div
 			class={cn(
-				'flex items-center bg-input-bg border border-button-secondary transition-all duration-fast hover:border-button-secondary-hover focus-within:border-accent focus-within:ring-3 focus-within:ring-primary motion-reduce:transition-none',
+				'flex items-center bg-input-bg border border-button-secondary transition-all duration-fast focus-within:ring-3 motion-reduce:transition-none',
 				densityClasses[density.value],
-				showError && 'border-input-border-error focus-within:border-input-border-error focus-within:ring-error',
-				shouldShake && 'animate-shake',
-				disabled && 'bg-input-bg-disabled cursor-not-allowed'
+				showError
+					? 'border-input-border-error hover:border-input-border-error focus-within:border-input-border-error focus-within:ring-error'
+					: 'hover:not-focus-within:border-button-secondary-hover focus-within:border-accent focus-within:ring-primary',
+					disabled && 'bg-input-bg-disabled cursor-not-allowed'
 			)}
 		>
 			{#if prefix}
@@ -117,17 +105,18 @@
 			{type}
 			{disabled}
 			class={cn(
-				'py-5 px-12 font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-button-secondary transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder hover:border-button-secondary-hover focus:border-accent focus:ring-3 focus:ring-primary disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
+				'py-5 px-12 font-[family-name:var(--font-family)] text-input-text bg-input-bg border border-button-secondary transition-all duration-fast outline-none w-full box-border placeholder:text-input-placeholder focus:ring-3 disabled:bg-input-bg-disabled disabled:text-input-text-disabled disabled:cursor-not-allowed motion-reduce:transition-none motion-reduce:animate-none',
 				densityClasses[density.value],
-				showError && 'border-input-border-error focus:border-input-border-error focus:ring-error',
-				shouldShake && 'animate-shake'
+				showError
+					? 'border-input-border-error hover:border-input-border-error focus:border-input-border-error focus:ring-error'
+					: 'hover:not-focus:border-button-secondary-hover focus:border-accent focus:ring-primary'
 			)}
 			{...restProps}
 		/>
 	{/if}
 	{#if showError && errorMessage}
-		<span class="text-tiny text-error mt-4">{errorMessage}</span>
+		<span class="absolute bottom-0 left-0 text-tiny text-error" data-field-error>{errorMessage}</span>
 	{:else if helperText}
-		<span class="text-tiny text-secondary mt-4">{helperText}</span>
+		<span class="absolute bottom-0 left-0 text-tiny text-secondary">{helperText}</span>
 	{/if}
 </div>

package/dist/IIModal/IIModal.svelte

@@ -36,6 +36,19 @@
 		open = newOpen
 		onOpenChange?.(newOpen)
 	}
+
+	// Portaled menu/listbox content (IIDropdownMenu, 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 {
+		if (!target) return false
+		return !!(
+			target.closest('[data-menu-content]') ||
+			target.closest('[data-popper-content-wrapper]') ||
+			target.closest('[role="menu"]') ||
+			target.closest('[role="listbox"]')
+		)
+	}
 </script>
 
 <Dialog.Root {open} onOpenChange={handleOpenChange}>
@@ -50,6 +63,14 @@
 		/>
 		<Dialog.Content
 			onOpenAutoFocus={e => e.preventDefault()}
+			onInteractOutside={e => {
+				const target = e.target as Element | null
+				if (isInsidePortaledMenu(target)) e.preventDefault()
+			}}
+			onFocusOutside={e => {
+				const target = e.target as Element | null
+				if (isInsidePortaledMenu(target)) e.preventDefault()
+			}}
 			class={cn(
 				'fixed top-[30%] left-1/2 -translate-x-1/2 -translate-y-1/2 bg-surface 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',

package/dist/{IITabs/IITabs.svelte → IITabBar/IITabBar.svelte}

@@ -1,94 +1,90 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
-	import {DropdownMenu, Tabs, type WithoutChildrenOrChild} from 'bits-ui'
+	import {DropdownMenu, Tabs} from 'bits-ui'
 	import {IIIcon} from '../IIIcon'
+	import IIButton from '../IIButton/IIButton.svelte'
 	import {cn} from '../utils/cn'
-	import {useDensity} from '../density'
 
 	type Tab = {
 		value: string
 		label: string
 		icon?: Snippet
 		disabled?: boolean
-		trigger?: Snippet
-		content: Snippet
 	}
 
-	type Props = WithoutChildrenOrChild<Tabs.RootProps> & {
+	type Props = {
 		tabs: Tab[]
+		value: string
+		onChange: (value: string) => void
 		class?: string
-		listClass?: string
-		contentClass?: string
 	}
 
-	let {
-		value = $bindable(),
-		tabs,
-		class: className,
-		listClass,
-		contentClass,
-		onValueChange,
-		...restProps
-	}: Props = $props()
+	let {tabs, value, onChange, class: className}: Props = $props()
 
-	let internalRef = $state(null)
 	let listEl = $state<HTMLElement | null>(null)
 	let overflowing = $state(false)
 	let dropdownOpen = $state(false)
 
-	const density = useDensity()
-
-	const densityRadius = {
-		compact: 'rounded-control',
-		default: 'rounded-control',
-		comfortable: 'rounded-control',
-		mobile: 'rounded-control',
-	} as const
-
 	const activeLabel = $derived(tabs.find(t => t.value === value)?.label ?? '')
 
 	$effect(() => {
 		if (!listEl) return
-
 		function check() {
 			if (!listEl) return
 			overflowing = listEl.scrollWidth > listEl.clientWidth + 1
 		}
-
 		check()
 		const observer = new ResizeObserver(check)
 		observer.observe(listEl)
 		return () => observer.disconnect()
 	})
 
-	function handleTabSelect(tab: Tab) {
-		value = tab.value
-		onValueChange?.(tab.value)
+	function handleSelect(tab: Tab) {
+		onChange(tab.value)
 		dropdownOpen = false
 	}
 </script>
 
-<Tabs.Root
-	bind:value
-	bind:ref={internalRef}
-	{onValueChange}
-	{...restProps}
-	class={cn('flex flex-col w-full h-full', className)}
->
+<Tabs.Root {value} onValueChange={onChange} class={cn('relative w-full h-full', className)}>
+	<Tabs.List
+		bind:ref={listEl}
+		class={cn(
+			'flex gap-16 pl-24 overflow-hidden h-full w-full',
+			overflowing && 'invisible pointer-events-none'
+		)}
+	>
+		{#each tabs as tab (tab.value)}
+			<Tabs.Trigger
+				value={tab.value}
+				disabled={tab.disabled}
+				class="appearance-none border-none bg-transparent outline-none inline-flex items-center gap-8 p-0 h-full text-small font-normal text-tertiary cursor-default -mb-px whitespace-nowrap relative shrink-0 hover:text-secondary data-[state=active]:text-body data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 motion-reduce:[transition:none] [transition:color_0.15s_ease] after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-0 after:-translate-x-1/2 after:[height:1.5px] after:[transition:width_0.15s_ease,background-color_0.15s_ease] data-[state=active]:after:w-full data-[state=active]:after:bg-dark [&:hover:not([data-disabled]):not([data-state=active])]:after:w-3/5 [&:hover:not([data-disabled]):not([data-state=active])]:after:bg-dark-secondary"
+			>
+				{#if tab.icon}
+					<div class="w-[1.25em] h-[1.25em] flex items-center justify-center">
+						{@render tab.icon()}
+					</div>
+				{/if}
+				{tab.label}
+			</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+
 	{#if overflowing}
-		<div class="flex items-center border-b border-primary px-24" style="padding-left: calc(2.4rem - 1.2rem - 1px)">
+		<div
+			class="absolute inset-0 flex items-center"
+			style="padding-left: calc(2.4rem - 1.2rem - 1px)"
+		>
 			<DropdownMenu.Root bind:open={dropdownOpen}>
-				<DropdownMenu.Trigger
-					class={cn(
-						'[all:unset] inline-flex items-center gap-4 py-4 pr-8 pl-12 border border-primary bg-surface cursor-default transition-all duration-fast hover:border-strong motion-reduce:transition-none',
-						densityRadius[density.value]
-					)}
-				>
-					<span class="text-small-emphasis text-body">{activeLabel}</span>
-					<IIIcon iconName="caret-down" class="w-14 h-14 text-secondary shrink-0" />
+				<DropdownMenu.Trigger>
+					{#snippet child({props})}
+						<IIButton {...props} variant="ghost">
+							{activeLabel}
+							<IIIcon iconName="caret-down" class="w-14 h-14 shrink-0" />
+						</IIButton>
+					{/snippet}
 				</DropdownMenu.Trigger>
 				<DropdownMenu.Content
-					class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12"
+					class="min-w-100 bg-surface border border-primary rounded-10 shadow-dropdown p-4 z-12 pointer-events-auto"
 					side="bottom"
 					align="start"
 				>
@@ -99,7 +95,7 @@
 								'flex items-center justify-between gap-12 px-12 py-8 rounded-4 text-small-emphasis text-secondary cursor-default outline-none transition-all duration-fast hover:bg-background hover:text-body data-[highlighted]:bg-background data-[highlighted]:text-body data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none motion-reduce:transition-none',
 								value === tab.value && 'text-body'
 							)}
-							onSelect={() => handleTabSelect(tab)}
+							onSelect={() => handleSelect(tab)}
 						>
 							<span>{tab.label}</span>
 							{#if value === tab.value}
@@ -111,42 +107,4 @@
 			</DropdownMenu.Root>
 		</div>
 	{/if}
-	<Tabs.List
-		bind:ref={listEl}
-		class={cn(
-			'flex border-b border-primary gap-16 pl-24 overflow-hidden',
-			overflowing && '!h-0 invisible border-b-0 py-0',
-			listClass
-		)}
-	>
-		{#each tabs as tab (tab.value)}
-			<Tabs.Trigger
-				value={tab.value}
-				disabled={tab.disabled}
-				class="appearance-none border-none bg-transparent outline-none inline-flex items-center gap-8 p-0 h-full text-small font-normal text-tertiary cursor-default -mb-px whitespace-nowrap relative shrink-0 hover:text-secondary data-[state=active]:text-body data-[disabled]:text-tertiary data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 motion-reduce:[transition:none] [transition:color_0.15s_ease] after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:w-0 after:-translate-x-1/2 after:[height:1.5px] after:[transition:width_0.15s_ease,background-color_0.15s_ease] data-[state=active]:after:w-full data-[state=active]:after:bg-dark [&:hover:not([data-disabled]):not([data-state=active])]:after:w-3/5 [&:hover:not([data-disabled]):not([data-state=active])]:after:bg-dark-secondary"
-			>
-				{#if tab.trigger}
-					{@render tab.trigger()}
-				{:else}
-					{#if tab.icon}
-						<div class="w-[1.25em] h-[1.25em] flex items-center justify-center">
-							{@render tab.icon()}
-						</div>
-					{/if}
-					{tab.label}
-				{/if}
-			</Tabs.Trigger>
-		{/each}
-	</Tabs.List>
-	{#each tabs as tab (tab.value)}
-		<Tabs.Content
-			value={tab.value}
-			class={cn(
-				'flex-1 min-h-0 outline-none focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2 focus-visible:rounded-4',
-				contentClass
-			)}
-		>
-			{@render tab.content()}
-		</Tabs.Content>
-	{/each}
 </Tabs.Root>

package/dist/IITabBar/IITabBar.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type Tab = {
+    value: string;
+    label: string;
+    icon?: Snippet;
+    disabled?: boolean;
+};
+type Props = {
+    tabs: Tab[];
+    value: string;
+    onChange: (value: string) => void;
+    class?: string;
+};
+declare const IITabBar: import("svelte").Component<Props, {}, "">;
+type IITabBar = ReturnType<typeof IITabBar>;
+export default IITabBar;

package/dist/IITabBar/index.d.ts

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

package/dist/IITabBar/index.js

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

package/dist/index.d.ts

@@ -37,7 +37,7 @@ export { IIStepper } from './IIStepper';
 export { IISwitch } from './IISwitch';
 export { IITable } from './IITable';
 export { IITableSkeleton } from './IITableSkeleton';
-export { IITabs } from './IITabs';
+export { IITabBar } from './IITabBar';
 export { IITaskCardSkeleton } from './IITaskCardSkeleton';
 export { IITextarea } from './IITextarea';
 export { IIToggle } from './IIToggle';

package/dist/index.js

@@ -41,7 +41,7 @@ export { IIStepper } from './IIStepper';
 export { IISwitch } from './IISwitch';
 export { IITable } from './IITable';
 export { IITableSkeleton } from './IITableSkeleton';
-export { IITabs } from './IITabs';
+export { IITabBar } from './IITabBar';
 export { IITaskCardSkeleton } from './IITaskCardSkeleton';
 export { IITextarea } from './IITextarea';
 export { IIToggle } from './IIToggle';

package/dist/style/colors.css

@@ -69,7 +69,7 @@
 	--color-input-border: #d1d5db;
 	--color-input-border-hover: #9ca3af;
 	--color-input-border-active: #111827;
-	--color-input-border-error: var(--ii-error);
+	--color-input-border-error: var(--ii-error-text);
 	--color-input-text: var(--ii-text-primary);
 	--color-input-text-disabled: var(--ii-text-secondary);
 	--color-input-placeholder: var(--ii-text-tertiary);

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

@@ -2,9 +2,9 @@ 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 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none 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";
     readonly itemDestructive: "text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none";
-    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 outline-none origin-top-left animate-scale-in motion-reduce:animate-none";
+    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 origin-top-left animate-scale-in motion-reduce:animate-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 origin-top-left animate-scale-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 outline-none overflow-hidden origin-top-left animate-scale-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 origin-top-left animate-scale-in motion-reduce:animate-none";
     readonly scrollableItems: "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,9 +3,9 @@ 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 data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none 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',
     itemDestructive: 'text-error hover:bg-error-bg focus:bg-error-bg data-[highlighted]:bg-error-bg data-[highlighted]:outline-none',
-    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 outline-none origin-top-left animate-scale-in motion-reduce:animate-none',
+    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 origin-top-left animate-scale-in motion-reduce:animate-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 origin-top-left animate-scale-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 outline-none overflow-hidden origin-top-left animate-scale-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 origin-top-left animate-scale-in motion-reduce:animate-none',
     scrollableItems: '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.46",
+	"version": "0.1.48",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {
@@ -54,6 +54,9 @@
 		"bits-ui": "^2.11.4",
 		"svelte-sonner": "^1.0.6"
 	},
+	"overrides": {
+		"esbuild": "0.27.4"
+	},
 	"devDependencies": {
 		"@storybook/addon-docs": "^10.2.10",
 		"@storybook/svelte-vite": "^10.2.10",
@@ -73,9 +76,6 @@
 		"type": "git",
 		"url": ""
 	},
-	"overrides": {
-		"esbuild": "0.27.4"
-	},
 	"optionalDependencies": {
 		"@rollup/rollup-darwin-arm64": "^4.60.1"
 	}

package/dist/IITabs/IITabs.svelte.d.ts

@@ -1,19 +0,0 @@
-import type { Snippet } from 'svelte';
-import { Tabs, type WithoutChildrenOrChild } from 'bits-ui';
-type Tab = {
-    value: string;
-    label: string;
-    icon?: Snippet;
-    disabled?: boolean;
-    trigger?: Snippet;
-    content: Snippet;
-};
-type Props = WithoutChildrenOrChild<Tabs.RootProps> & {
-    tabs: Tab[];
-    class?: string;
-    listClass?: string;
-    contentClass?: string;
-};
-declare const IITabs: import("svelte").Component<Props, {}, "value">;
-type IITabs = ReturnType<typeof IITabs>;
-export default IITabs;

package/dist/IITabs/index.d.ts

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

package/dist/IITabs/index.js

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