entasis 0.10.2 → 0.12.0

package/dist/components/Sidebar/SidebarActivityBar.svelte

@@ -2,6 +2,7 @@
 	import Slot from '../Slot/Slot.svelte';
 	import { cx } from '../../utils/cva/index.js';
 	import { tooltip } from '../Tooltip/tooltip.attachment.svelte.js';
+	import { useDirection } from '../../utils/useDirection.svelte.js';
 	import { useNavigation } from '../../utils/useNavigation.svelte.js';
 	import type {
 		SidebarActivityBar,
@@ -11,6 +12,7 @@
 		SidebarSize,
 		SidebarVariant
 	} from './sidebar.props.js';
+	import { sidebarInwardPhysicalSide, sidebarTooltip } from './sidebar-position.js';
 	import SidebarIcon from './SidebarIcon.svelte';
 	import { useSidebarTheme, type SidebarThemeProps } from './sidebar.theme.js';
 	import { useDefaultColor } from '../Theme/theme.state.svelte.js';
@@ -45,11 +47,13 @@
 
 	const classes = $derived(useSidebarTheme(theme));
 	const resolvedColor = $derived(useDefaultColor());
-	// The rail is pinned to the outer screen edge, so the only on-screen direction is inward:
-	// tooltips point at the page (and overlap the panel), never off screen.
-	const tooltipPosition = $derived(
-		orientation === 'horizontal' ? 'bottom' : side === 'right' ? 'left' : 'right'
-	);
+	let navRef = $state<HTMLElement | null>(null);
+	const direction = useDirection(() => navRef);
+	// The rail is pinned to the outer edge, so the only on-screen direction is inward: tooltips
+	// point at the page (and overlap the panel), never off screen, in either reading direction.
+	// Read when a tooltip opens, so a runtime `dir` change is followed.
+	const tooltipPosition = () =>
+		orientation === 'horizontal' ? 'bottom' : sidebarInwardPhysicalSide(side, direction());
 
 	type Entry = { item: SidebarActivityBarItem; index: number; pinned: boolean };
 	// One flat list keeps a single roving tab stop, so ArrowDown walks from the primary
@@ -100,7 +104,9 @@
 			event.stopPropagation();
 			return;
 		}
+		// The item's own handler runs first; `event.preventDefault()` there skips the selection.
 		entry.item.onclick?.(event);
+		if (event.defaultPrevented) return;
 		activityBar.onSelect?.({ item: entry.item, index: entry.index });
 	}
 </script>
@@ -147,7 +153,7 @@
 				disabled: !!item.disabled
 			})}
 			{@attach navigation.itemReference}
-			{@attach content ? tooltip({ content, position: tooltipPosition }) : undefined}
+			{@attach content ? tooltip(sidebarTooltip(content, tooltipPosition)) : undefined}
 			onclick={(event) => handleClick(event, entry)}
 		>
 			{@render inner()}
@@ -171,7 +177,7 @@
 				disabled: !!item.disabled
 			})}
 			{@attach navigation.itemReference}
-			{@attach content ? tooltip({ content, position: tooltipPosition }) : undefined}
+			{@attach content ? tooltip(sidebarTooltip(content, tooltipPosition)) : undefined}
 			onclick={(event) => handleClick(event, entry)}
 		>
 			{@render inner()}
@@ -180,6 +186,7 @@
 {/snippet}
 
 <nav
+	bind:this={navRef}
 	data-slot="sidebar-activity-bar"
 	data-sidebar="activity-bar"
 	data-color={resolvedColor}

package/dist/components/Sidebar/SidebarFlyout.svelte

@@ -0,0 +1,97 @@
+<script module lang="ts">
+	import type { SidebarIcon as SidebarIconValue } from './sidebar.props.js';
+
+	/** One row of a collapsed row's flyout: a link, a button, or a named folder of more rows. */
+	export type SidebarFlyoutLink = {
+		label: string;
+		href?: string;
+		onclick?: (event: MouseEvent) => void;
+		icon?: SidebarIconValue;
+		isActive?: boolean;
+		disabled?: boolean;
+		children?: SidebarFlyoutLink[];
+	};
+
+	/** What the trigger snippet needs from the flyout's popover. */
+	export type SidebarFlyoutTrigger = {
+		readonly isOpen: boolean;
+		readonly id: string;
+		reference: (node: HTMLElement) => unknown;
+		toggle: () => void;
+	};
+</script>
+
+<script lang="ts">
+	// A row collapsed to its icon keeps its links one press away, with NavigationMenu's disclosure
+	// semantics rather than a menu's: the trigger reports `aria-expanded` and `aria-controls`, the
+	// panel is a named `<nav>` of links (folders become named sub-lists), Tab walks into it from the
+	// open trigger and out past its last link, Escape and any row press close it, and it opens
+	// toward the page from whichever edge the sidebar sits on.
+	import type { Snippet } from 'svelte';
+	import MenuOption from '../MenuOption/MenuOption.svelte';
+	import Popover from '../Popover/Popover.svelte';
+	import { fileIcon } from '../Icons/file.js';
+	import { composeHandlers } from '../../utils/handlers.js';
+	import type { SidebarDensity, SidebarSide, SidebarSize } from './sidebar.props.js';
+	import { sidebarInwardSide } from './sidebar-position.js';
+
+	let {
+		label,
+		links,
+		side,
+		size,
+		density,
+		trigger
+	}: {
+		/** Names the flyout and its nav: the collapsed row's label. */
+		label: string;
+		links: SidebarFlyoutLink[];
+		side: SidebarSide;
+		size: SidebarSize;
+		density: SidebarDensity;
+		trigger: Snippet<[SidebarFlyoutTrigger]>;
+	} = $props();
+
+	let open = $state(false);
+	const position = $derived(`${sidebarInwardSide(side)}-start` as const);
+</script>
+
+{#snippet level(rows: SidebarFlyoutLink[], group?: string)}
+	<ul
+		aria-label={group}
+		class="gap-micro m-0 flex list-none flex-col p-0 {group !== undefined ? 'ps-md' : ''}"
+	>
+		{#each rows as row, index (row.label + index)}
+			<li>
+				{#if row.children?.length}
+					<span aria-hidden="true" class="px-md py-xs text-neutral/70 block text-xs font-medium">
+						{row.label}
+					</span>
+					{@render level(row.children, row.label)}
+				{:else}
+					<!-- The row's own handler runs first; `event.preventDefault()` skips the explicit
+					     close of the flyout. -->
+					<MenuOption
+						href={row.disabled ? undefined : row.href}
+						title={row.label}
+						prefix={row.icon ?? fileIcon}
+						{size}
+						{density}
+						active={row.isActive}
+						disabled={row.disabled}
+						attrs={row.isActive ? { 'aria-current': 'page' } : undefined}
+						onclick={composeHandlers(row.onclick, () => {
+							open = false;
+						})}
+					/>
+				{/if}
+			</li>
+		{/each}
+	</ul>
+{/snippet}
+
+<Popover bind:open {position} fitTrigger={false} size="small" {label} {trigger}>
+	<nav aria-label={label} data-slot="sidebar-flyout" class="min-w-48">
+		{@render level(links)}
+	</nav>
+</Popover>

package/dist/components/Sidebar/SidebarFlyout.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { SidebarIcon as SidebarIconValue } from './sidebar.props.js';
+/** One row of a collapsed row's flyout: a link, a button, or a named folder of more rows. */
+export type SidebarFlyoutLink = {
+    label: string;
+    href?: string;
+    onclick?: (event: MouseEvent) => void;
+    icon?: SidebarIconValue;
+    isActive?: boolean;
+    disabled?: boolean;
+    children?: SidebarFlyoutLink[];
+};
+/** What the trigger snippet needs from the flyout's popover. */
+export type SidebarFlyoutTrigger = {
+    readonly isOpen: boolean;
+    readonly id: string;
+    reference: (node: HTMLElement) => unknown;
+    toggle: () => void;
+};
+import type { Snippet } from 'svelte';
+import type { SidebarDensity, SidebarSide, SidebarSize } from './sidebar.props.js';
+type $$ComponentProps = {
+    /** Names the flyout and its nav: the collapsed row's label. */
+    label: string;
+    links: SidebarFlyoutLink[];
+    side: SidebarSide;
+    size: SidebarSize;
+    density: SidebarDensity;
+    trigger: Snippet<[SidebarFlyoutTrigger]>;
+};
+declare const SidebarFlyout: import("svelte").Component<$$ComponentProps, {}, "">;
+type SidebarFlyout = ReturnType<typeof SidebarFlyout>;
+export default SidebarFlyout;

package/dist/components/Sidebar/SidebarGroup.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { disclosurePanel } from '../../attachments/disclosurePanel.svelte.js';
+	import { openStateAttributes } from '../../utils/stateAttributes.js';
 	import type { DisclosureIndicator } from '../../types/theme.js';
 	import type {
 		SidebarActiveVariant,
@@ -14,7 +16,6 @@
 	import SidebarIcon from './SidebarIcon.svelte';
 	import SidebarMenuList from './SidebarMenuList.svelte';
 	import SidebarTreeNode from './SidebarTreeNode.svelte';
-	import { slide } from '../../transitions/transition.js';
 	import { useSidebarMotion, useSidebarTheme, type SidebarThemeProps } from './sidebar.theme.js';
 
 	let {
@@ -43,6 +44,16 @@
 	>(group.action == null ? [] : Array.isArray(group.action) ? group.action : [group.action]);
 	const actionSize = (action: (typeof actions)[number]) =>
 		typeof action === 'function' ? size : (action.size ?? size);
+	const controlHeight = { small: 'sm', normal: 'md', large: 'lg' } as const;
+	// The pinned actions' total width (each `actionSlot` box plus the gaps between them), so the
+	// label truncates before them instead of running underneath.
+	const actionsWidth = $derived(
+		actions.length
+			? `calc(${actions
+					.map((action) => `var(--control-height-${controlHeight[actionSize(action)]})`)
+					.join(' + ')} + ${actions.length - 1} * var(--space-micro))`
+			: undefined
+	);
 
 	let open = $state<boolean | undefined>();
 	let labelRef = $state<HTMLButtonElement | null>(null);
@@ -50,10 +61,8 @@
 	let contentRef = $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 isOpen = $derived(open ?? group.defaultOpen ?? true);
 	// A hover peek renders the collapsed panel at full width, so icon-mode behaviour has to
@@ -62,6 +71,11 @@
 		api.displayState === 'collapsed' && !api.isMobile && !api.isPeeking
 	);
 	const showGroupContent = $derived(!group.collapsible || isIconCollapsed || isOpen);
+	const uid = $props.id();
+	const contentId = `${uid}-content`;
+	// The group's `hidden` state and its height animation, reversible mid-way, come from the
+	// shared disclosure panel, as Collapsible's and Accordion's do.
+	const content = disclosurePanel({ open: () => showGroupContent, motion: () => collapseMotion });
 
 	function focusFirstMenuRow() {
 		const fallback = Array.from(
@@ -97,13 +111,14 @@
 {#snippet groupMenu()}
 	<div
 		bind:this={contentRef}
+		id={contentId}
 		data-slot="sidebar-group-content"
 		data-sidebar="group-content"
-		inert={showGroupContent ? undefined : true}
-		aria-hidden={showGroupContent ? undefined : 'true'}
+		{...content.attributes}
+		inert={content.open ? undefined : true}
+		aria-hidden={content.open ? undefined : 'true'}
 		class={classes.groupContent({ size })}
-		in:slideTransition={collapseMotion.in}
-		out:slideTransition={collapseMotion.out}
+		{@attach content.attach}
 	>
 		{#if group.tree}
 			<ul data-slot="sidebar-menu" data-sidebar="menu" class={classes.menu({ density })}>
@@ -131,21 +146,29 @@
 		data-slot="sidebar-group"
 		data-sidebar="group"
 		class={classes.group({ density, className: group.class })}
+		style:--sidebar-group-actions-width={actionsWidth}
 	>
 		<button
 			bind:this={labelRef}
 			type="button"
-			class={classes.groupLabel({ interactive: true, size, density })}
+			class={classes.groupLabel({
+				interactive: true,
+				size,
+				density,
+				hasActions: actions.length > 0
+			})}
 			disabled={isIconCollapsed || undefined}
 			inert={isIconCollapsed ? true : undefined}
 			aria-hidden={isIconCollapsed ? 'true' : undefined}
 			aria-expanded={isOpen}
+			aria-controls={content.rendered ? contentId : undefined}
+			{...openStateAttributes(isOpen)}
 			onclick={() => (open = !isOpen)}
 		>
 			<span>{group.label}</span>
 			<SidebarIcon
 				icon={caretRightIcon}
-				class="ml-auto transition-transform {isOpen ? 'rotate-90' : ''}"
+				class="ms-auto transition-transform {isOpen ? 'rotate-90' : 'rtl:-scale-x-100'}"
 			/>
 		</button>
 		{#if actions.length}
@@ -163,12 +186,12 @@
 			>
 				{#each actions as action, index (index)}
 					<div class={classes.actionSlot({ size: actionSize(action) })}>
-						<SidebarAction {action} {api} size={actionSize(action)} {theme} />
+						<SidebarAction {action} {api} size={actionSize(action)} {density} {theme} />
 					</div>
 				{/each}
 			</div>
 		{/if}
-		{#if showGroupContent}
+		{#if content.rendered}
 			{@render groupMenu()}
 		{/if}
 	</div>
@@ -177,15 +200,16 @@
 		data-slot="sidebar-group"
 		data-sidebar="group"
 		class={classes.group({ density, className: group.class })}
+		style:--sidebar-group-actions-width={actionsWidth}
 	>
 		{#if group.label}
 			<div
 				data-slot="sidebar-group-label"
 				data-sidebar="group-label"
 				aria-hidden={isIconCollapsed ? 'true' : undefined}
-				class={classes.groupLabel({ size, density })}
+				class={classes.groupLabel({ size, density, hasActions: actions.length > 0 })}
 			>
-				{group.label}
+				<span>{group.label}</span>
 			</div>
 		{/if}
 		{#if actions.length}
@@ -199,7 +223,7 @@
 			>
 				{#each actions as action, index (index)}
 					<div class={classes.actionSlot({ size: actionSize(action) })}>
-						<SidebarAction {action} {api} size={actionSize(action)} {theme} />
+						<SidebarAction {action} {api} size={actionSize(action)} {density} {theme} />
 					</div>
 				{/each}
 			</div>

package/dist/components/Sidebar/SidebarMenuButton.svelte

@@ -106,7 +106,7 @@
 		getSidebarMenuPosition(
 			menuSide ?? (compact || brand ? 'bottom' : undefined),
 			menuAlign ?? defaultAlign,
-			mobile
+			{ isMobile: mobile, side: api?.side }
 		)
 	);
 
@@ -157,7 +157,7 @@
 			{/if}
 		</div>
 	{:else}
-		<div class={classes.menuLabel({ className: 'grid text-left leading-tight' })}>
+		<div class={classes.menuLabel({ className: 'grid text-start leading-tight' })}>
 			<span class="truncate font-medium">{title}</span>
 			{#if subtitle}
 				<span class={classes.menuSecondary({ size })}>{subtitle}</span>
@@ -181,7 +181,7 @@
 {/snippet}
 
 {#snippet identityRow()}
-	<div class="flex items-center gap-2 px-2 py-1 text-left">
+	<div class="flex items-center gap-2 px-2 py-1 text-start">
 		{@render media()}
 		<div class="grid min-w-0 flex-1 leading-tight">
 			<span class="text-neutral truncate font-medium">{title}</span>
@@ -197,6 +197,8 @@
 		<PopupMenu
 			menu={{
 				items: menu,
+				size,
+				density,
 				header: menuShowLabel ? identityRow : undefined,
 				theme: menuIconClass ? { option: { prefix: { base: menuIconClass } } } : undefined
 			}}
@@ -252,6 +254,7 @@
 				action={trailingAction}
 				api={api as SidebarApi}
 				size={trailingActionSize}
+				{density}
 				{theme}
 			/>
 		</div>