entasis 0.11.0 → 0.12.0

package/dist/components/Sidebar/SidebarMenuItem.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { disclosurePanel } from '../../attachments/disclosurePanel.svelte.js';
+	import { openStateAttributes } from '../../utils/stateAttributes.js';
 	import PopupMenu from '../PopupMenu/PopupMenu.svelte';
 	import { tooltip } from '../Tooltip/tooltip.attachment.svelte.js';
 	import { caretRightIcon } from '../Icons/caretRight.js';
@@ -6,6 +8,7 @@
 	import { minusIcon } from '../Icons/minus.js';
 	import { plusIcon } from '../Icons/plus.js';
 	import { useI18n } from '../../i18n/context.svelte.js';
+	import { composeHandlers } from '../../utils/handlers.js';
 	import type { DisclosureIndicator } from '../../types/theme.js';
 	import type {
 		SidebarActiveVariant,
@@ -15,11 +18,16 @@
 		SidebarSize,
 		SidebarTooltipMode
 	} from './sidebar.props.js';
-	import { getSidebarMenuPosition } from './sidebar-position.js';
+	import { useDirection } from '../../utils/useDirection.svelte.js';
+	import {
+		getSidebarMenuPosition,
+		sidebarInwardPhysicalSide,
+		sidebarTooltip
+	} from './sidebar-position.js';
 	import SidebarAction from './SidebarAction.svelte';
+	import SidebarFlyout from './SidebarFlyout.svelte';
 	import SidebarIcon from './SidebarIcon.svelte';
 	import SidebarMenuSubItem from './SidebarMenuSubItem.svelte';
-	import { slide } from '../../transitions/transition.js';
 	import { useSidebarMotion, useSidebarTheme, type SidebarThemeProps } from './sidebar.theme.js';
 
 	let {
@@ -55,10 +63,8 @@
 	let actionRef = $state<HTMLElement | null>(null);
 	const classes = $derived(useSidebarTheme(theme));
 	// Motion preset from `sidebarTheme.motion`, through the override ladder
-	// (registry → `setSidebarTheme` → the instance `theme.motion` slot). `slide` is a
-	// factory: it must be created during init, because it reads the theme context.
+	// (registry → `setSidebarTheme` → the instance `theme.motion` slot).
 	const resolveMotion = useSidebarMotion();
-	const slideTransition = slide();
 	const collapseMotion = $derived(resolveMotion(undefined, { motion: theme?.motion }));
 	const t = $derived(useI18n());
 	const isOpen = $derived(open ?? item.defaultOpen ?? false);
@@ -72,12 +78,44 @@
 		showTooltip ? (item.tooltip ?? ariaLabel ?? item.label) : undefined
 	);
 	const hasSubmenu = $derived(!!item.items?.length);
+	const showBadge = $derived(item.badge != null && !isIconCollapsed);
+	// An in-flow chevron or dots after the badge: the row then keeps its action's room at every
+	// width, since the action would otherwise cover that glyph when it shows.
+	const hasTrailingGlyph = $derived(
+		!!item.menu ||
+			(item.view !== undefined && !back) ||
+			(hasSubmenu && !item.href && item.collapsible !== false && collapseIcon !== 'none')
+	);
+	const endReserve = $derived(
+		!item.action ? 'none' : showBadge && !hasTrailingGlyph ? 'actionBelowMd' : 'action'
+	);
 	// A bare glyph stays bare: the wrapper only appears when the entry asks for a role tint or a
 	// tile, so an untinted row never inherits the ambient `data-color`.
 	const hasIconSurface = $derived(!!item.icon && (item.iconVariant === 'tile' || !!item.iconColor));
 	const showSubmenu = $derived(
 		hasSubmenu && !isIconCollapsed && (item.collapsible === false || isOpen)
 	);
+	// Collapsed to its icon, a row whose own press only reveals its submenu would do nothing: it
+	// opens its entries in a flyout instead. A row that navigates, opens a view or owns a menu
+	// keeps that press.
+	const hasFlyout = $derived(
+		isIconCollapsed &&
+			hasSubmenu &&
+			!item.menu &&
+			!item.href &&
+			item.view === undefined &&
+			!item.disabled
+	);
+	let itemRef = $state<HTMLLIElement | null>(null);
+	const direction = useDirection(() => itemRef);
+	// Toward the page, whichever edge the sidebar sits on and whichever way the text reads, read
+	// when the tooltip opens so a runtime `dir` change is followed.
+	const tooltipPosition = () => sidebarInwardPhysicalSide(api.side, direction());
+	const uid = $props.id();
+	const submenuId = `${uid}-submenu`;
+	// The submenu's `hidden` state and its height animation, reversible mid-way, come from the
+	// shared disclosure panel, as Collapsible's and Accordion's do.
+	const submenuPanel = disclosurePanel({ open: () => showSubmenu, motion: () => collapseMotion });
 
 	$effect(() => {
 		const activeElement = document.activeElement;
@@ -98,6 +136,14 @@
 		open = !isOpen;
 	}
 
+	// A row whose press reveals its submenu runs its own handler first in either mode, inline or
+	// collapsed to its flyout; `event.preventDefault()` keeps the submenu as it was.
+	function handleSubmenuRowClick(event: MouseEvent) {
+		if (item.disabled) return;
+		item.onclick?.(event);
+		if (!event.defaultPrevented) toggleSubmenu();
+	}
+
 	function handleClick(event: MouseEvent) {
 		if (item.disabled) {
 			event.preventDefault();
@@ -122,6 +168,15 @@
 		<SidebarIcon icon={item.icon} class={back ? 'rtl:-scale-x-100' : undefined} />
 	{/if}
 	<span class={classes.menuLabel()}>{item.label}</span>
+	{#if showBadge}
+		<span
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			class={classes.badge({ size, action: item.action ? 'row' : 'none' })}
+		>
+			{item.badge}
+		</span>
+	{/if}
 {/snippet}
 
 {#snippet indicator()}
@@ -134,7 +189,7 @@
 			icon={caretRightIcon}
 			class={classes.menuTrailing({
 				size,
-				className: ['transition-transform', isOpen && 'rotate-90']
+				className: ['transition-transform', isOpen ? 'rotate-90' : 'rtl:-scale-x-100']
 			})}
 		/>
 	{/if}
@@ -161,9 +216,12 @@
 				size,
 				density,
 				itemSize: item.size,
+				endReserve,
 				className: item.class
 			})}
-			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
+			{@attach tooltipContent
+				? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
+				: undefined}
 			onclick={handleClick}
 		>
 			{@render entryContent()}
@@ -188,9 +246,12 @@
 				size,
 				density,
 				itemSize: item.size,
+				endReserve,
 				className: item.class
 			})}
-			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
+			{@attach tooltipContent
+				? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
+				: undefined}
 			onclick={handleClick}
 		>
 			{@render entryContent()}
@@ -206,8 +267,11 @@
 
 {#snippet dropdownButton()}
 	<PopupMenu
-		menu={{ items: item.menu ?? [] }}
-		position={getSidebarMenuPosition(item.menuSide, item.menuAlign, api.isMobile)}
+		menu={{ items: item.menu ?? [], size, density }}
+		position={getSidebarMenuPosition(item.menuSide, item.menuAlign, {
+			isMobile: api.isMobile,
+			side: api.side
+		})}
 		class={item.menuClass}
 		fitTrigger
 	>
@@ -225,13 +289,14 @@
 					size,
 					density,
 					itemSize: item.size,
+					endReserve,
 					className: ['aria-expanded:bg-neutral-muted', item.class]
 				})}
 				aria-expanded={popover.isOpen}
 				aria-haspopup="menu"
 				aria-controls={popover.isOpen ? popover.id : undefined}
 				{@attach tooltipContent
-					? tooltip({ content: tooltipContent, position: 'right' })
+					? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
 					: undefined}
 				{@attach popover.reference}
 				onclick={() => popover.toggle()}
@@ -243,16 +308,51 @@
 	</PopupMenu>
 {/snippet}
 
+{#snippet flyoutButton()}
+	<SidebarFlyout label={item.label} links={item.items ?? []} side={api.side} {size} {density}>
+		{#snippet trigger(popover)}
+			<button
+				bind:this={submenuTriggerRef}
+				type="button"
+				data-slot="sidebar-menu-button"
+				data-sidebar="menu-button"
+				data-size={item.size ?? 'normal'}
+				data-active={item.isActive ? 'true' : undefined}
+				data-active-variant={activeVariant}
+				class={classes.menuButton({
+					variant: item.variant,
+					activeVariant,
+					size,
+					density,
+					itemSize: item.size,
+					endReserve,
+					className: item.class
+				})}
+				aria-expanded={popover.isOpen}
+				aria-controls={popover.isOpen ? popover.id : undefined}
+				{@attach tooltipContent
+					? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
+					: undefined}
+				{@attach popover.reference}
+				onclick={composeHandlers(item.onclick, () => popover.toggle())}
+			>
+				{@render entryContent()}
+			</button>
+		{/snippet}
+	</SidebarFlyout>
+{/snippet}
+
 {#snippet submenu()}
 	<ul
 		bind:this={submenuRef}
+		id={submenuId}
 		data-slot="sidebar-menu-sub"
 		data-sidebar="menu-sub"
-		inert={showSubmenu ? undefined : true}
-		aria-hidden={showSubmenu ? undefined : 'true'}
+		{...submenuPanel.attributes}
+		inert={submenuPanel.open ? undefined : true}
+		aria-hidden={submenuPanel.open ? undefined : 'true'}
 		class={classes.subMenu({ density, className: item.subClass })}
-		in:slideTransition={collapseMotion.in}
-		out:slideTransition={collapseMotion.out}
+		{@attach submenuPanel.attach}
 	>
 		{#each item.items ?? [] as sub, index (sub.label + index)}
 			<SidebarMenuSubItem
@@ -268,10 +368,17 @@
 	</ul>
 {/snippet}
 
-<li data-slot="sidebar-menu-item" data-sidebar="menu-item" class={classes.menuItem()}>
+<li
+	bind:this={itemRef}
+	data-slot="sidebar-menu-item"
+	data-sidebar="menu-item"
+	class={classes.menuItem()}
+>
 	<div class="group/menu-row relative">
 		{#if item.menu}
 			{@render dropdownButton()}
+		{:else if hasFlyout}
+			{@render flyoutButton()}
 		{:else if hasSubmenu && item.collapsible === false}
 			{@render leafButton()}
 		{:else if hasSubmenu}
@@ -283,11 +390,13 @@
 					class={classes.menuAction({
 						size,
 						density,
-						className: 'bg-neutral-muted right-auto left-1 data-[open=true]:rotate-90'
+						className:
+							'bg-neutral-muted start-1 end-auto data-open:rotate-90 rtl:not-data-open:-scale-x-100'
 					})}
-					data-open={isOpen ? 'true' : undefined}
+					{...openStateAttributes(showSubmenu)}
 					aria-label={`${t.toggle} ${t.submenu}`}
 					aria-expanded={showSubmenu}
+					aria-controls={submenuPanel.rendered ? submenuId : undefined}
 					disabled={item.disabled || undefined}
 					onclick={toggleSubmenu}
 				>
@@ -309,13 +418,16 @@
 						size,
 						density,
 						itemSize: item.size,
+						endReserve,
 						className: item.class
 					})}
 					aria-expanded={showSubmenu}
+					aria-controls={submenuPanel.rendered ? submenuId : undefined}
+					{...openStateAttributes(showSubmenu)}
 					{@attach tooltipContent
-						? tooltip({ content: tooltipContent, position: 'right' })
+						? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
 						: undefined}
-					onclick={toggleSubmenu}
+					onclick={handleSubmenuRowClick}
 				>
 					{@render entryContent()}
 					{@render indicator()}
@@ -325,15 +437,6 @@
 			{@render leafButton()}
 		{/if}
 
-		{#if item.badge != null && !isIconCollapsed}
-			<div
-				data-slot="sidebar-menu-badge"
-				data-sidebar="menu-badge"
-				class={classes.badge({ size, density })}
-			>
-				{item.badge}
-			</div>
-		{/if}
 		{#if item.action}
 			<div
 				bind:this={actionRef}
@@ -343,12 +446,12 @@
 				aria-hidden={isIconCollapsed ? 'true' : undefined}
 				class={classes.menuAction({ size, density })}
 			>
-				<SidebarAction action={item.action} {api} {size} {theme} />
+				<SidebarAction action={item.action} {api} {size} {density} {theme} />
 			</div>
 		{/if}
 	</div>
 
-	{#if showSubmenu}
+	{#if submenuPanel.rendered}
 		{@render submenu()}
 	{/if}
 </li>

package/dist/components/Sidebar/SidebarMenuSubItem.svelte

@@ -7,6 +7,8 @@
 		SidebarMenuSubEntry,
 		SidebarSize
 	} from './sidebar.props.js';
+	import { useDirection } from '../../utils/useDirection.svelte.js';
+	import { sidebarInwardPhysicalSide, sidebarTooltip } from './sidebar-position.js';
 	import SidebarAction from './SidebarAction.svelte';
 	import SidebarIcon from './SidebarIcon.svelte';
 	import { useSidebarTheme, type SidebarThemeProps } from './sidebar.theme.js';
@@ -39,13 +41,20 @@
 	// The label is always visible on a submenu row, so the tooltip is extra information: shown
 	// whenever one is set, never on mobile, where hover does not exist.
 	const tooltipContent = $derived(sub.tooltip && !api.isMobile ? sub.tooltip : undefined);
+	let itemRef = $state<HTMLLIElement | null>(null);
+	const direction = useDirection(() => itemRef);
+	// Toward the page, whichever edge the sidebar sits on and whichever way the text reads, read
+	// when the tooltip opens so a runtime `dir` change is followed.
+	const tooltipPosition = () => sidebarInwardPhysicalSide(api.side, direction());
 	const buttonClass = $derived(
 		classes.subButton({
 			size: subSize,
 			itemSize: sub.size,
 			activeVariant,
 			density,
-			reserveEnd: !!sub.action || hasBadge,
+			// With a badge last in the row, the badge holds the end column from `md` up and the
+			// action takes its place while it shows; below `md` the two sit side by side.
+			endReserve: !sub.action ? 'none' : hasBadge ? 'actionBelowMd' : 'action',
 			className: sub.class
 		})
 	);
@@ -76,10 +85,22 @@
 	{:else}
 		<SidebarIcon icon={sub.icon} />
 	{/if}
-	<span>{sub.label}</span>
+	{#if hasBadge}
+		<span data-slot="sidebar-menu-sub-label">{sub.label}</span>
+		<span
+			data-slot="sidebar-menu-sub-badge"
+			data-sidebar="menu-sub-badge"
+			class={classes.badge({ size: subSize, action: sub.action ? 'sub' : 'none' })}
+		>
+			{sub.badge}
+		</span>
+	{:else}
+		<span>{sub.label}</span>
+	{/if}
 {/snippet}
 
 <li
+	bind:this={itemRef}
 	data-slot="sidebar-menu-sub-item"
 	data-sidebar="menu-sub-item"
 	class="group/menu-sub-item relative"
@@ -98,7 +119,9 @@
 			aria-disabled={sub.disabled || undefined}
 			tabindex={sub.disabled ? -1 : undefined}
 			class={buttonClass}
-			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
+			{@attach tooltipContent
+				? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
+				: undefined}
 			onclick={handleClick}
 		>
 			{@render entryContent()}
@@ -114,22 +137,15 @@
 			data-active-variant={activeVariant}
 			disabled={sub.disabled || undefined}
 			class={buttonClass}
-			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
+			{@attach tooltipContent
+				? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
+				: undefined}
 			onclick={handleClick}
 		>
 			{@render entryContent()}
 		</button>
 	{/if}
 
-	{#if hasBadge}
-		<div
-			data-slot="sidebar-menu-sub-badge"
-			data-sidebar="menu-sub-badge"
-			class={classes.badge({ size: subSize, density })}
-		>
-			{sub.badge}
-		</div>
-	{/if}
 	{#if sub.action}
 		<div
 			data-slot="sidebar-menu-sub-action"
@@ -138,7 +154,7 @@
 			aria-hidden={iconCollapsed ? 'true' : undefined}
 			class={classes.subAction({ size: subSize, density })}
 		>
-			<SidebarAction action={sub.action} {api} size={subSize} {theme} />
+			<SidebarAction action={sub.action} {api} size={subSize} {density} {theme} />
 		</div>
 	{/if}
 </li>

package/dist/components/Sidebar/SidebarTreeNode.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import PopupMenu from '../PopupMenu/PopupMenu.svelte';
+	import { disclosurePanel } from '../../attachments/disclosurePanel.svelte.js';
+	import { openStateAttributes } from '../../utils/stateAttributes.js';
 	import { tooltip } from '../Tooltip/tooltip.attachment.svelte.js';
 	import { caretRightIcon } from '../Icons/caretRight.js';
 	import { fileIcon } from '../Icons/file.js';
 	import { folderIcon } from '../Icons/folder.js';
-	import type { MenuItem } from '../Menu/menu.props.js';
 	import type {
 		SidebarActiveVariant,
 		SidebarApi,
@@ -13,9 +13,11 @@
 		SidebarTooltipMode,
 		SidebarTreeNode
 	} from './sidebar.props.js';
+	import { useDirection } from '../../utils/useDirection.svelte.js';
+	import { sidebarInwardPhysicalSide, sidebarTooltip } from './sidebar-position.js';
+	import SidebarFlyout from './SidebarFlyout.svelte';
 	import SidebarIcon from './SidebarIcon.svelte';
 	import SidebarTreeNodeComponent from './SidebarTreeNode.svelte';
-	import { slide } from '../../transitions/transition.js';
 	import { useSidebarMotion, useSidebarTheme, type SidebarThemeProps } from './sidebar.theme.js';
 
 	let {
@@ -39,15 +41,12 @@
 	} = $props();
 
 	let open = $state<boolean | undefined>();
-	let popupOpen = $state(false);
 	let triggerRef = $state<HTMLButtonElement | null>(null);
 	let childrenRef = $state<HTMLUListElement | null>(null);
 	const classes = $derived(useSidebarTheme(theme));
 	// Motion preset from `sidebarTheme.motion`, through the override ladder
-	// (registry → `setSidebarTheme` → the instance `theme.motion` slot). `slide` is a
-	// factory: it must be created during init, because it reads the theme context.
+	// (registry → `setSidebarTheme` → the instance `theme.motion` slot).
 	const resolveMotion = useSidebarMotion();
-	const slideTransition = slide();
 	const collapseMotion = $derived(resolveMotion(undefined, { motion: theme?.motion }));
 	const isOpen = $derived(open ?? node.defaultOpen ?? false);
 	const hasChildren = $derived(!!node.children?.length);
@@ -67,43 +66,16 @@
 	);
 	const rowSlot = $derived(isSubNode ? 'sidebar-menu-sub-button' : 'sidebar-menu-button');
 	const rowData = $derived(isSubNode ? 'menu-sub-button' : 'menu-button');
-	const popupPosition = $derived(api.side === 'right' ? 'left-start' : 'right-start');
-	const popupItems = $derived(isSubNode ? [] : toMenuItems(node.children ?? []));
-
-	function toMenuItems(nodes: SidebarTreeNode[]): MenuItem[] {
-		return nodes.map((treeNode): MenuItem => {
-			const children = treeNode.children ?? [];
-			const option = {
-				title: treeNode.label,
-				prefix: treeNode.icon ?? (children.length ? folderIcon : fileIcon),
-				size,
-				active: treeNode.isActive,
-				attrs: treeNode.isActive ? { 'aria-current': 'page' } : undefined
-			};
-
-			if (children.length) {
-				return {
-					...option,
-					type: 'submenu',
-					menu: toMenuItems(children)
-				};
-			}
-
-			return {
-				...option,
-				type: 'option',
-				href: treeNode.href,
-				onclick: (event) => {
-					treeNode.onclick?.(event);
-					popupOpen = false;
-				}
-			};
-		});
-	}
-
-	$effect(() => {
-		if (!isIconCollapsed) popupOpen = false;
-	});
+	let itemRef = $state<HTMLLIElement | null>(null);
+	const direction = useDirection(() => itemRef);
+	// Toward the page, whichever edge the sidebar sits on and whichever way the text reads, read
+	// when the tooltip opens so a runtime `dir` change is followed.
+	const tooltipPosition = () => sidebarInwardPhysicalSide(api.side, direction());
+	const uid = $props.id();
+	const childrenId = `${uid}-children`;
+	// The branch's `hidden` state and its height animation, reversible mid-way, come from the
+	// shared disclosure panel, as Collapsible's and Accordion's do.
+	const branch = disclosurePanel({ open: () => showChildren, motion: () => collapseMotion });
 
 	$effect(() => {
 		if (showChildren || !childrenRef?.contains(document.activeElement)) return;
@@ -112,17 +84,19 @@
 </script>
 
 <li
+	bind:this={itemRef}
 	data-slot={isSubNode ? 'sidebar-menu-sub-item' : 'sidebar-menu-item'}
 	data-sidebar={isSubNode ? 'menu-sub-item' : 'menu-item'}
 	class={isSubNode ? 'group/menu-sub-item relative' : classes.menuItem()}
 >
 	{#if hasChildren}
 		{#if isIconCollapsed && !isSubNode}
-			<PopupMenu
-				bind:open={popupOpen}
-				menu={{ items: popupItems, submenuMode: 'popover', density }}
-				position={popupPosition}
-				fitTrigger={false}
+			<SidebarFlyout
+				label={node.label}
+				links={node.children ?? []}
+				side={api.side}
+				{size}
+				{density}
 			>
 				{#snippet trigger(popover)}
 					<button
@@ -132,10 +106,9 @@
 						data-sidebar={rowData}
 						class={rowClass}
 						aria-expanded={popover.isOpen}
-						aria-haspopup="menu"
 						aria-controls={popover.isOpen ? popover.id : undefined}
 						{@attach tooltipContent
-							? tooltip({ content: tooltipContent, position: 'right' })
+							? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
 							: undefined}
 						{@attach popover.reference}
 						onclick={() => popover.toggle()}
@@ -144,7 +117,7 @@
 						<span class={classes.menuLabel()}>{node.label}</span>
 					</button>
 				{/snippet}
-			</PopupMenu>
+			</SidebarFlyout>
 		{:else}
 			<button
 				bind:this={triggerRef}
@@ -153,29 +126,32 @@
 				data-sidebar={rowData}
 				class={rowClass}
 				aria-expanded={showChildren}
+				aria-controls={branch.rendered ? childrenId : undefined}
+				{...openStateAttributes(showChildren)}
 				{@attach tooltipContent
-					? tooltip({ content: tooltipContent, position: 'right' })
+					? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
 					: undefined}
 				onclick={() => (open = !isOpen)}
 			>
 				<SidebarIcon
 					icon={caretRightIcon}
-					class="transition-transform {isOpen ? 'rotate-90' : ''}"
+					class="transition-transform {isOpen ? 'rotate-90' : 'rtl:-scale-x-100'}"
 				/>
 				<SidebarIcon icon={node.icon ?? folderIcon} />
 				<span class={isSubNode ? undefined : classes.menuLabel()}>{node.label}</span>
 			</button>
 		{/if}
-		{#if showChildren}
+		{#if branch.rendered}
 			<ul
 				bind:this={childrenRef}
+				id={childrenId}
 				data-slot="sidebar-menu-sub"
 				data-sidebar="menu-sub"
-				inert={showChildren ? undefined : true}
-				aria-hidden={showChildren ? undefined : 'true'}
+				{...branch.attributes}
+				inert={branch.open ? undefined : true}
+				aria-hidden={branch.open ? undefined : 'true'}
 				class={classes.treeSubMenu({ density })}
-				in:slideTransition={collapseMotion.in}
-				out:slideTransition={collapseMotion.out}
+				{@attach branch.attach}
 			>
 				{#each node.children ?? [] as child, index (child.label + index)}
 					<SidebarTreeNodeComponent
@@ -201,7 +177,9 @@
 			data-active-variant={activeVariant}
 			aria-current={node.isActive ? 'page' : undefined}
 			class={rowClass}
-			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
+			{@attach tooltipContent
+				? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
+				: undefined}
 			onclick={node.onclick}
 		>
 			<SidebarIcon icon={node.icon ?? fileIcon} />
@@ -216,7 +194,9 @@
 			data-active={node.isActive ? 'true' : undefined}
 			data-active-variant={activeVariant}
 			class={rowClass}
-			{@attach tooltipContent ? tooltip({ content: tooltipContent, position: 'right' }) : undefined}
+			{@attach tooltipContent
+				? tooltip(sidebarTooltip(tooltipContent, tooltipPosition))
+				: undefined}
 			onclick={node.onclick}
 		>
 			<SidebarIcon icon={node.icon ?? fileIcon} />

package/dist/components/Sidebar/index.d.ts

@@ -3,3 +3,4 @@ export { default as SidebarMenuButton } from './SidebarMenuButton.svelte';
 export type { SidebarActiveVariant, SidebarActivityBar, SidebarActivityBarItem, SidebarActivityBarSelectPayload, SidebarApi, SidebarCollapsible, SidebarDisplayState, SidebarDensity, SidebarGroup, SidebarIcon, SidebarIconVariant, SidebarFrame, SidebarMenuActionDescriptor, SidebarMenuAlign, SidebarMenuButtonItem, SidebarMenuButtonSize, SidebarMenuButtonVariant, SidebarMenuEntry, SidebarMenuSide, SidebarMenuSubEntry, SidebarProps, SidebarRail, SidebarResizable, SidebarResizableOptions, SidebarSearch, SidebarSide, SidebarSize, SidebarMode, SidebarState, SidebarTooltipMode, SidebarTreeNode, SidebarVariant, SidebarView, SidebarWidthChangePayload } from './sidebar.props.js';
 export { sidebarTheme, setSidebarTheme, useSidebarTheme, type SidebarTheme, type SidebarThemeProps } from './sidebar.theme.js';
 export { sidebarDescription } from './sidebar.mcp.js';
+export { sidebarDataAttributes, sidebarCssVariables, type SidebarDataAttribute, type SidebarCssVariable } from './sidebar.attributes.js';

package/dist/components/Sidebar/index.js

@@ -2,3 +2,4 @@ export { default as Sidebar } from './Sidebar.svelte';
 export { default as SidebarMenuButton } from './SidebarMenuButton.svelte';
 export { sidebarTheme, setSidebarTheme, useSidebarTheme } from './sidebar.theme.js';
 export { sidebarDescription } from './sidebar.mcp.js';
+export { sidebarDataAttributes, sidebarCssVariables } from './sidebar.attributes.js';

package/dist/components/Sidebar/sidebar-position.d.ts

@@ -1,3 +1,38 @@
+import type { PopoverLogicalSide, PopoverPlacement } from '../Popover/popover.props.js';
 import type { Placement } from '@floating-ui/dom';
-import type { SidebarMenuAlign, SidebarMenuSide } from './sidebar.props.js';
-export declare function getSidebarMenuPosition(side: SidebarMenuSide | undefined, align: SidebarMenuAlign | undefined, isMobile: boolean): Placement;
+import type { Slot } from '../Slot/slot.js';
+import type { TooltipOptions } from '../Tooltip/tooltip.props.js';
+import type { Direction } from '../../utils/useDirection.svelte.js';
+import type { SidebarMenuAlign, SidebarMenuSide, SidebarSide } from './sidebar.props.js';
+/**
+ * The side of a desktop sidebar's rows that faces the page, as a logical side. The sidebar's
+ * layout follows the reading direction (`side="left"` is the start edge: the left in
+ * left-to-right, the right in right-to-left), so the page is at the inline end of a `left`
+ * sidebar and at the inline start of a `right` one.
+ */
+export declare const sidebarInwardSide: (side: SidebarSide | undefined) => PopoverLogicalSide;
+/**
+ * `sidebarInwardSide` resolved to a physical side, for placements that take only physical
+ * sides (tooltips).
+ */
+export declare const sidebarInwardPhysicalSide: (side: SidebarSide | undefined, direction: Direction) => "left" | "right";
+/**
+ * Tooltip options whose `position` is resolved each time the tooltip opens rather than when the
+ * row renders: the reading direction comes from computed style, which a runtime `dir` change
+ * on the document alters without any reactive signal.
+ */
+export declare const sidebarTooltip: (content: Slot, position: () => Placement) => TooltipOptions;
+type SidebarMenuPositionContext = {
+    /** The mobile drawer: menus open below their row. */
+    isMobile: boolean;
+    /** The edge the sidebar sits on. Default `'left'`. */
+    side?: SidebarSide;
+};
+/**
+ * The Popover placement of a row's menu. An explicit `menuSide` wins, physical (`right`) or
+ * logical (`inline-end`, resolved against the reading direction by Popover). Without one, a
+ * desktop menu opens toward the page (`inline-end` of a left sidebar, `inline-start` of a right
+ * one) and a mobile menu below its row.
+ */
+export declare function getSidebarMenuPosition(menuSide: SidebarMenuSide | undefined, align: SidebarMenuAlign | undefined, { isMobile, side }: SidebarMenuPositionContext): PopoverPlacement;
+export {};