entasis 0.4.0 → 0.5.0

package/dist/components/SegmentedControl/segmentedControl.theme.d.ts

@@ -151,7 +151,7 @@ export declare const setSegmentedControlTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useSegmentedControlTheme: (theme?: InferComponentTheme<{
+export declare const useSegmentedControlTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -225,78 +225,4 @@ export declare const useSegmentedControlTheme: (theme?: InferComponentTheme<{
             info: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        variant: {
-            normal: string;
-            pill: string;
-        };
-        disabled: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    item: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        size: {
-            small: string;
-            normal: string;
-            large: string;
-        };
-        variant: {
-            normal: string;
-            pill: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-        selected: {
-            true: string;
-            false: string;
-        };
-        disabled: {
-            true: string;
-            false: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    indicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        variant: {
-            normal: string;
-            pill: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    staticIndicator: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        variant: {
-            normal: string;
-            pill: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;

package/dist/components/SelectionMenu/selectionMenu.theme.d.ts

@@ -9,10 +9,7 @@ export declare const setSelectionMenuTheme: (theme: InferComponentTheme<{
     popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 }>) => void;
-export declare const useSelectionMenuTheme: (theme?: InferComponentTheme<{
+export declare const useSelectionMenuTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-}> | undefined) => {
-    popover: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-    content: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
-};
+}>;

package/dist/components/Separator/separator.theme.d.ts

@@ -65,7 +65,7 @@ export declare const setSeparatorTheme: (theme: InferComponentTheme<{
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
-export declare const useSeparatorTheme: (theme?: InferComponentTheme<{
+export declare const useSeparatorTheme: import("../../utils/cva/theme.js").UseComponentTheme<{
     root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         orientation: {
             horizontal: string;
@@ -96,35 +96,4 @@ export declare const useSeparatorTheme: (theme?: InferComponentTheme<{
             vertical: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-}> | undefined) => {
-    root: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        orientation: {
-            horizontal: string;
-            vertical: string;
-        };
-        align: {
-            start: string;
-            center: string;
-            end: string;
-        };
-        line: {
-            true: string;
-            false: string;
-        };
-        color: {
-            primary: string;
-            secondary: string;
-            neutral: string;
-            danger: string;
-            success: string;
-            warning: string;
-            info: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    label: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
-        orientation: {
-            horizontal: string;
-            vertical: string;
-        };
-    }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-};
+}>;

package/dist/components/Sidebar/SidebarAction.svelte

@@ -37,7 +37,7 @@
 		{#snippet trigger(popover)}
 			<button
 				type="button"
-				class={classes.actionTrigger({ componentSize: size })}
+				class={classes.actionTrigger({ size })}
 				aria-label={actionLabel}
 				aria-expanded={popover.isOpen}
 				aria-haspopup="menu"
@@ -53,7 +53,7 @@
 {:else}
 	<button
 		type="button"
-		class={classes.actionTrigger({ componentSize: size })}
+		class={classes.actionTrigger({ size })}
 		aria-label={actionLabel}
 		onclick={(event) => action.onclick?.(event, api)}
 	>

package/dist/components/Sidebar/SidebarActivityBar.svelte

@@ -108,7 +108,7 @@
 				data-slot="sidebar-activity-bar-badge"
 				data-color={resolvedColor}
 				aria-hidden="true"
-				class={classes.activityBarBadge({ componentSize: size, dot: isDot(item.badge) })}
+				class={classes.activityBarBadge({ size, dot: isDot(item.badge) })}
 			>
 				{#if typeof item.badge === 'number'}
 					{item.badge}
@@ -134,7 +134,7 @@
 			aria-label={accessibleName(item)}
 			aria-disabled={item.disabled || undefined}
 			class={classes.activityBarItem({
-				componentSize: size,
+				size,
 				density,
 				active: !!item.isActive,
 				disabled: !!item.disabled
@@ -158,7 +158,7 @@
 			aria-label={accessibleName(item)}
 			disabled={item.disabled || undefined}
 			class={classes.activityBarItem({
-				componentSize: size,
+				size,
 				density,
 				active: !!item.isActive,
 				disabled: !!item.disabled

package/dist/components/Sidebar/SidebarGroup.svelte

@@ -135,7 +135,7 @@
 		<button
 			bind:this={labelRef}
 			type="button"
-			class={classes.groupLabel({ interactive: true, componentSize: size, density })}
+			class={classes.groupLabel({ interactive: true, size, density })}
 			disabled={isIconCollapsed || undefined}
 			inert={isIconCollapsed ? true : undefined}
 			aria-hidden={isIconCollapsed ? 'true' : undefined}
@@ -156,13 +156,13 @@
 				inert={isIconCollapsed ? true : undefined}
 				aria-hidden={isIconCollapsed ? 'true' : undefined}
 				class={classes.groupAction({
-					componentSize: size,
+					size,
 					density,
 					hasToggle: true
 				})}
 			>
 				{#each actions as action, index (index)}
-					<div class={classes.actionSlot({ componentSize: actionSize(action) })}>
+					<div class={classes.actionSlot({ size: actionSize(action) })}>
 						<SidebarAction {action} {api} size={actionSize(action)} {theme} />
 					</div>
 				{/each}
@@ -183,7 +183,7 @@
 				data-slot="sidebar-group-label"
 				data-sidebar="group-label"
 				aria-hidden={isIconCollapsed ? 'true' : undefined}
-				class={classes.groupLabel({ componentSize: size, density })}
+				class={classes.groupLabel({ size, density })}
 			>
 				{group.label}
 			</div>
@@ -195,10 +195,10 @@
 				data-sidebar="group-action"
 				inert={isIconCollapsed ? true : undefined}
 				aria-hidden={isIconCollapsed ? 'true' : undefined}
-				class={classes.groupAction({ componentSize: size, density, hasToggle: false })}
+				class={classes.groupAction({ size, density, hasToggle: false })}
 			>
 				{#each actions as action, index (index)}
-					<div class={classes.actionSlot({ componentSize: actionSize(action) })}>
+					<div class={classes.actionSlot({ size: actionSize(action) })}>
 						<SidebarAction {action} {api} size={actionSize(action)} {theme} />
 					</div>
 				{/each}

package/dist/components/Sidebar/SidebarMenuButton.svelte

@@ -61,6 +61,8 @@
 	const classes = $derived(useSidebarTheme(theme));
 	const compact = $derived(variant === 'compact');
 	const brand = $derived(variant === 'brand');
+	// The brand row is the tall two-line row; `compact` drops it to a normal menu row.
+	const rowSize = $derived(compact ? 'normal' : 'large');
 	// A descriptor is an object that is neither a snippet nor a string: it becomes a real control
 	// beside the row, because a button cannot be nested inside a button.
 	const trailingAction = $derived<SidebarMenuActionDescriptor | undefined>(
@@ -88,9 +90,9 @@
 	);
 	const buttonClass = $derived(
 		classes.menuButton({
-			componentSize: size,
+			size,
 			density,
-			size: compact ? 'default' : 'lg',
+			itemSize: rowSize,
 			className: [
 				compact && 'w-fit group-data-[collapsible=icon]:w-full',
 				trailingAction && 'min-w-0 flex-1 group-data-[collapsible=icon]:flex-none',
@@ -119,7 +121,7 @@
 
 {#snippet media()}
 	{#if avatar}
-		<div class={classes.avatar({ componentSize: size, className: mediaClass })}>
+		<div class={classes.avatar({ size, className: mediaClass })}>
 			{#if avatar.src && !avatarImageFailed}
 				<img
 					src={avatar.src}
@@ -134,8 +136,8 @@
 	{:else if icon}
 		<div
 			class={classes.media({
-				size: compact ? 'compact' : 'default',
-				componentSize: size,
+				itemSize: rowSize,
+				size,
 				className: mediaClass
 			})}
 		>
@@ -151,14 +153,14 @@
 		<div class={classes.menuLabel({ className: 'flex flex-col gap-0.5 leading-none' })}>
 			<span class="truncate font-medium">{title}</span>
 			{#if subtitle}
-				<span class={classes.menuSecondary({ componentSize: size })}>{subtitle}</span>
+				<span class={classes.menuSecondary({ size })}>{subtitle}</span>
 			{/if}
 		</div>
 	{:else}
 		<div class={classes.menuLabel({ className: 'grid text-left leading-tight' })}>
 			<span class="truncate font-medium">{title}</span>
 			{#if subtitle}
-				<span class={classes.menuSecondary({ componentSize: size })}>{subtitle}</span>
+				<span class={classes.menuSecondary({ size })}>{subtitle}</span>
 			{/if}
 		</div>
 	{/if}
@@ -171,7 +173,7 @@
 		<SidebarIcon
 			icon={resolvedTrailing}
 			class={classes.menuTrailing({
-				componentSize: size,
+				size,
 				className: compact ? 'opacity-50' : undefined
 			})}
 		/>
@@ -184,7 +186,7 @@
 		<div class="grid min-w-0 flex-1 leading-tight">
 			<span class="text-neutral truncate font-medium">{title}</span>
 			{#if subtitle}
-				<span class={classes.menuSecondary({ componentSize: size })}>{subtitle}</span>
+				<span class={classes.menuSecondary({ size })}>{subtitle}</span>
 			{/if}
 		</div>
 	</div>
@@ -206,7 +208,7 @@
 				<button
 					type="button"
 					data-slot="sidebar-menu-button"
-					data-size={compact ? 'default' : 'lg'}
+					data-size={rowSize}
 					class={buttonClass}
 					aria-expanded={popover.isOpen}
 					aria-haspopup="menu"
@@ -220,12 +222,7 @@
 		</PopupMenu>
 	{:else if href}
 		<!-- eslint-disable svelte/no-navigation-without-resolve -- Package consumers supply URLs; library links cannot depend on SvelteKit routing. -->
-		<a
-			{href}
-			data-slot="sidebar-menu-button"
-			data-size={compact ? 'default' : 'lg'}
-			class={buttonClass}
-		>
+		<a {href} data-slot="sidebar-menu-button" data-size={rowSize} class={buttonClass}>
 			{@render buttonInner()}
 		</a>
 		<!-- eslint-enable svelte/no-navigation-without-resolve -->
@@ -234,7 +231,7 @@
 			type="button"
 			onclick={(event) => onclick?.(event, api as SidebarApi)}
 			data-slot="sidebar-menu-button"
-			data-size={compact ? 'default' : 'lg'}
+			data-size={rowSize}
 			class={buttonClass}
 		>
 			{@render buttonInner()}
@@ -247,7 +244,7 @@
 		{@render control()}
 		<div
 			class={classes.actionSlot({
-				componentSize: trailingActionSize,
+				size: trailingActionSize,
 				className: 'group-data-[collapsible=icon]:hidden'
 			})}
 		>

package/dist/components/Sidebar/SidebarMenuItem.svelte

@@ -54,9 +54,6 @@
 	const resolveMotion = useSidebarMotion();
 	const slideTransition = slide();
 	const collapseMotion = $derived(resolveMotion(undefined, { motion: theme?.motion }));
-	const menuSize = $derived(
-		item.size ? ({ small: 'sm', normal: 'default', large: 'lg' } as const)[item.size] : undefined
-	);
 	const t = $derived(useI18n());
 	const isOpen = $derived(open ?? item.defaultOpen ?? false);
 	// A hover peek renders the collapsed panel at full width, so icon-mode behaviour has to
@@ -108,7 +105,7 @@
 		<span
 			data-slot="sidebar-menu-icon"
 			data-color={item.iconColor}
-			class={classes.menuIcon({ variant: item.iconVariant ?? 'bare', componentSize: size })}
+			class={classes.menuIcon({ variant: item.iconVariant ?? 'bare', size })}
 		>
 			<SidebarIcon icon={item.icon} />
 		</span>
@@ -122,15 +119,12 @@
 	{#if collapseIcon === 'none'}
 		<!-- No disclosure indicator. -->
 	{:else if collapseIcon === 'plus-minus'}
-		<SidebarIcon
-			icon={isOpen ? minusIcon : plusIcon}
-			class={classes.menuTrailing({ componentSize: size })}
-		/>
+		<SidebarIcon icon={isOpen ? minusIcon : plusIcon} class={classes.menuTrailing({ size })} />
 	{:else}
 		<SidebarIcon
 			icon={caretRightIcon}
 			class={classes.menuTrailing({
-				componentSize: size,
+				size,
 				className: ['transition-transform', isOpen && 'rotate-90']
 			})}
 		/>
@@ -155,9 +149,9 @@
 			class={classes.menuButton({
 				variant: item.variant,
 				activeVariant,
-				componentSize: size,
+				size,
 				density,
-				size: menuSize,
+				itemSize: item.size,
 				className: item.class
 			})}
 			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
@@ -180,9 +174,9 @@
 			class={classes.menuButton({
 				variant: item.variant,
 				activeVariant,
-				componentSize: size,
+				size,
 				density,
-				size: menuSize,
+				itemSize: item.size,
 				className: item.class
 			})}
 			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
@@ -211,9 +205,9 @@
 				class={classes.menuButton({
 					variant: item.variant,
 					activeVariant,
-					componentSize: size,
+					size,
 					density,
-					size: menuSize,
+					itemSize: item.size,
 					className: ['aria-expanded:bg-neutral-muted', item.class]
 				})}
 				aria-expanded={popover.isOpen}
@@ -226,7 +220,7 @@
 				onclick={() => popover.toggle()}
 			>
 				{@render entryContent()}
-				<SidebarIcon icon={dotsThreeIcon} class={classes.menuTrailing({ componentSize: size })} />
+				<SidebarIcon icon={dotsThreeIcon} class={classes.menuTrailing({ size })} />
 			</button>
 		{/snippet}
 	</PopupMenu>
@@ -262,7 +256,7 @@
 					bind:this={submenuTriggerRef}
 					type="button"
 					class={classes.menuAction({
-						componentSize: size,
+						size,
 						density,
 						className: 'bg-neutral-muted right-auto left-1 data-[open=true]:rotate-90'
 					})}
@@ -287,9 +281,9 @@
 					class={classes.menuButton({
 						variant: item.variant,
 						activeVariant,
-						componentSize: size,
+						size,
 						density,
-						size: menuSize,
+						itemSize: item.size,
 						className: item.class
 					})}
 					aria-expanded={showSubmenu}
@@ -310,7 +304,7 @@
 			<div
 				data-slot="sidebar-menu-badge"
 				data-sidebar="menu-badge"
-				class={classes.badge({ componentSize: size, density })}
+				class={classes.badge({ size, density })}
 			>
 				{item.badge}
 			</div>
@@ -322,7 +316,7 @@
 				data-sidebar="menu-action"
 				inert={isIconCollapsed ? true : undefined}
 				aria-hidden={isIconCollapsed ? 'true' : undefined}
-				class={classes.menuAction({ componentSize: size, density })}
+				class={classes.menuAction({ size, density })}
 			>
 				<SidebarAction action={item.action} {api} {size} {theme} />
 			</div>

package/dist/components/Sidebar/SidebarMenuSubItem.svelte

@@ -23,8 +23,7 @@
 	} = $props();
 
 	const classes = $derived(useSidebarTheme(theme));
-	const componentSize = $derived(sub.size ?? size);
-	const textSize = $derived(sub.size === 'small' ? 'sm' : 'md');
+	const subSize = $derived(sub.size ?? size);
 
 	function handleClick(event: MouseEvent) {
 		if (sub.disabled) {
@@ -48,13 +47,13 @@
 			role={sub.disabled ? 'link' : undefined}
 			data-slot="sidebar-menu-sub-button"
 			data-sidebar="menu-sub-button"
-			data-size={componentSize}
+			data-size={subSize}
 			data-active={sub.isActive ? 'true' : undefined}
 			data-active-variant={activeVariant}
 			aria-current={sub.isActive ? 'page' : undefined}
 			aria-disabled={sub.disabled || undefined}
 			tabindex={sub.disabled ? -1 : undefined}
-			class={classes.subButton({ componentSize, activeVariant, density, size: textSize })}
+			class={classes.subButton({ size: subSize, itemSize: sub.size, activeVariant, density })}
 			onclick={handleClick}
 		>
 			<SidebarIcon icon={sub.icon} />
@@ -66,11 +65,11 @@
 			type="button"
 			data-slot="sidebar-menu-sub-button"
 			data-sidebar="menu-sub-button"
-			data-size={componentSize}
+			data-size={subSize}
 			data-active={sub.isActive ? 'true' : undefined}
 			data-active-variant={activeVariant}
 			disabled={sub.disabled || undefined}
-			class={classes.subButton({ componentSize, activeVariant, density, size: textSize })}
+			class={classes.subButton({ size: subSize, itemSize: sub.size, activeVariant, density })}
 			onclick={handleClick}
 		>
 			<SidebarIcon icon={sub.icon} />

package/dist/components/Sidebar/SidebarPanel.svelte

@@ -109,7 +109,7 @@
 			<form
 				bind:this={searchRef}
 				data-slot="sidebar-search"
-				class={classes.searchContainer({ componentSize: size, collapsed })}
+				class={classes.searchContainer({ size, collapsed })}
 				inert={collapsed ? true : undefined}
 				aria-hidden={collapsed ? 'true' : undefined}
 				onsubmit={(event) => event.preventDefault()}
@@ -119,12 +119,9 @@
 					aria-label={search.label ?? t.search}
 					value={search.value}
 					oninput={search.oninput}
-					class={classes.search({ componentSize: size, density, className: search.class })}
-				/>
-				<SidebarIcon
-					icon={magnifyingGlassIcon}
-					class={classes.searchIcon({ componentSize: size, density })}
+					class={classes.search({ size, density, className: search.class })}
 				/>
+				<SidebarIcon icon={magnifyingGlassIcon} class={classes.searchIcon({ size, density })} />
 			</form>
 		{/if}
 		{#if headerMenu}

package/dist/components/Sidebar/SidebarTreeNode.svelte

@@ -62,8 +62,8 @@
 	const tooltipContent = $derived(showTooltip ? node.label : undefined);
 	const rowClass = $derived(
 		isSubNode
-			? classes.subButton({ componentSize: size, activeVariant, density })
-			: classes.menuButton({ componentSize: size, activeVariant, density })
+			? classes.subButton({ size, activeVariant, density })
+			: classes.menuButton({ size, activeVariant, density })
 	);
 	const rowSlot = $derived(isSubNode ? 'sidebar-menu-sub-button' : 'sidebar-menu-button');
 	const rowData = $derived(isSubNode ? 'menu-sub-button' : 'menu-button');