@insymetri/styleguide 0.1.47 → 0.1.48

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/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.47",
+	"version": "0.1.48",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {

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