entasis 0.10.2 → 0.12.0

package/dist/components/Sidebar/sidebar.theme.js

@@ -146,8 +146,11 @@ const defaultGroup = cva({
         density: 'normal'
     }
 });
+// The label text is its own span and truncates on one line; with pinned actions
+// (`--sidebar-group-actions-width`, published by the group) it stops before them. A static label
+// pads its end; a collapsible one keeps its chevron at the end and spaces the text off the actions.
 const defaultGroupLabel = cva({
-    base: 'text-neutral/70 flex shrink-0 items-center rounded-sm font-medium outline-none transition-[height,margin,padding,opacity] duration-normal ease-linear group-data-[collapsible=icon]:opacity-0 disabled:pointer-events-none [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
+    base: 'text-neutral/70 flex shrink-0 items-center rounded-sm text-start font-medium outline-none [&>span]:min-w-0 [&>span]:flex-1 [&>span]:truncate transition-[height,margin,padding,opacity] duration-normal ease-linear group-data-[collapsible=icon]:opacity-0 disabled:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         interactive: {
             true: 'state-layer hover:text-neutral focus-visible:ring-2 focus-visible:ring-focus/50',
@@ -162,12 +165,29 @@ const defaultGroupLabel = cva({
             compact: 'px-md',
             normal: 'px-lg',
             comfortable: 'px-lg'
+        },
+        hasActions: {
+            true: '',
+            false: ''
         }
     },
+    compoundVariants: [
+        {
+            interactive: false,
+            hasActions: true,
+            class: 'pe-[calc(var(--sidebar-group-actions-width)+var(--space-md))]'
+        },
+        {
+            interactive: true,
+            hasActions: true,
+            class: '[&>span]:me-[calc(var(--sidebar-group-actions-width)+var(--space-md))]'
+        }
+    ],
     defaultVariants: {
         interactive: false,
         size: 'normal',
-        density: 'normal'
+        density: 'normal',
+        hasActions: false
     }
 });
 // The wrapper is placement only: a row of action slots pinned to the label's midline. Each
@@ -182,10 +202,12 @@ const defaultGroupAction = cva({
             normal: 'top-[calc(var(--sidebar-group-padding)+var(--control-height-md)/2)] -translate-y-1/2',
             large: 'top-[calc(var(--sidebar-group-padding)+var(--control-height-lg)/2)] -translate-y-1/2'
         },
+        // Just inside the label's end. Beside a collapsible label's chevron: the group padding,
+        // the label padding, the chevron and a gap, so the two never touch at any icon size.
         density: {
-            compact: 'right-2.5',
-            normal: 'right-3',
-            comfortable: 'right-4'
+            compact: 'end-2.5',
+            normal: 'end-3',
+            comfortable: 'end-4'
         },
         hasToggle: {
             true: '',
@@ -193,9 +215,16 @@ const defaultGroupAction = cva({
         }
     },
     compoundVariants: [
-        { density: 'compact', hasToggle: true, class: 'right-8' },
-        { density: 'normal', hasToggle: true, class: 'right-10' },
-        { density: 'comfortable', hasToggle: true, class: 'right-12' }
+        {
+            density: 'compact',
+            hasToggle: true,
+            class: 'end-[calc(var(--sidebar-group-padding)+var(--space-md)+var(--sidebar-icon-size)+var(--space-xs))]'
+        },
+        {
+            density: ['normal', 'comfortable'],
+            hasToggle: true,
+            class: 'end-[calc(var(--sidebar-group-padding)+var(--space-lg)+var(--sidebar-icon-size)+var(--space-xs))]'
+        }
     ],
     defaultVariants: {
         size: 'normal',
@@ -216,8 +245,20 @@ const defaultMenu = cva({
         density: 'normal'
     }
 });
+// Room at a row's end for its pinned action (`menuAction` / `subAction`), so the label and any
+// in-flow trailing part (badge, chevron) stop before the action's box. `action` reserves it
+// always. `actionBelowMd` is for a row whose last trailing part is its badge: from `md` up the
+// badge holds the end column and the action takes its place while it shows, so the room is only
+// needed below `md`, where the action is always visible and the badge sits before it.
+const rowEndReserveKeys = { none: '', action: '', actionBelowMd: '' };
+const rowEndReserve = [
+    { endReserve: 'action', size: ['small', 'normal'], class: 'pe-layout-lg' },
+    { endReserve: 'action', size: 'large', class: 'pe-[calc(var(--spacing)*10)]' },
+    { endReserve: 'actionBelowMd', size: ['small', 'normal'], class: 'max-md:pe-layout-lg' },
+    { endReserve: 'actionBelowMd', size: 'large', class: 'max-md:pe-[calc(var(--spacing)*10)]' }
+];
 const defaultMenuButton = cva({
-    base: 'state-layer peer/menu-button group/menu-button flex w-full items-center overflow-hidden rounded-sm text-left outline-none transition-[background,color,width,height,padding,margin,border-radius] duration-normal ease-linear hover:text-neutral focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium group-has-data-[sidebar=menu-action]/menu-item:pr-layout-lg group-data-[collapsible=icon]:mx-[calc((var(--sidebar-width-icon)-var(--sidebar-icon-button-width))/2-var(--sidebar-group-padding))] group-data-[collapsible=icon]:w-[var(--sidebar-icon-button-width)] group-data-[collapsible=icon]:rounded-none group-data-[variant=admin]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=framed]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=inset]:group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:![padding-inline:calc((var(--sidebar-icon-button-width)-var(--sidebar-icon-size))/2)] group-data-[collapsible=icon]:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--sidebar-icon-size)]',
+    base: 'state-layer peer/menu-button group/menu-button flex w-full items-center overflow-hidden rounded-sm text-start outline-none transition-[background,color,width,height,padding,margin,border-radius] duration-normal ease-linear hover:text-neutral focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:font-medium group-data-[collapsible=icon]:mx-[calc((var(--sidebar-width-icon)-var(--sidebar-icon-button-width))/2-var(--sidebar-group-padding))] group-data-[collapsible=icon]:w-[var(--sidebar-icon-button-width)] group-data-[collapsible=icon]:rounded-none group-data-[variant=admin]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=framed]:group-data-[collapsible=icon]:rounded-sm group-data-[variant=inset]:group-data-[collapsible=icon]:rounded-sm group-data-[collapsible=icon]:![padding-inline:calc((var(--sidebar-icon-button-width)-var(--sidebar-icon-size))/2)] group-data-[collapsible=icon]:ring-inset [&_svg]:shrink-0 [&_svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         activeVariant: activeVariants,
         variant: {
@@ -239,9 +280,11 @@ const defaultMenuButton = cva({
             small: 'text-xs',
             normal: '',
             large: ''
-        }
+        },
+        endReserve: rowEndReserveKeys
     },
     compoundVariants: [
+        ...rowEndReserve,
         { size: 'small', itemSize: 'small', class: 'h-control-sm' },
         { size: 'small', itemSize: 'normal', class: 'h-control-md' },
         { size: 'small', itemSize: 'large', class: 'h-row-lg' },
@@ -257,7 +300,8 @@ const defaultMenuButton = cva({
         variant: 'default',
         size: 'normal',
         density: 'normal',
-        itemSize: 'normal'
+        itemSize: 'normal',
+        endReserve: 'none'
     }
 });
 const defaultMenuLabel = cva({
@@ -277,7 +321,7 @@ const defaultMenuSecondary = cva({
     }
 });
 const defaultMenuTrailing = cva({
-    base: 'ml-auto shrink-0 opacity-100 transition-[opacity,transform] duration-normal ease-standard group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:translate-x-1 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-[var(--sidebar-icon-size)]',
+    base: 'ms-auto shrink-0 opacity-100 transition-[opacity,transform] duration-normal ease-standard group-data-[collapsible=icon]:pointer-events-none group-data-[collapsible=icon]:translate-x-1 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         size: {
             small: '',
@@ -289,13 +333,15 @@ const defaultMenuTrailing = cva({
         size: 'normal'
     }
 });
+// Only the start side is indented: a submenu row runs to its parent row's end edge, so badges
+// and actions of every level share one end column. The guide line sits on the start edge.
 const defaultSubMenu = cva({
-    base: 'border-neutral-muted flex min-w-0 translate-x-px flex-col border-l',
+    base: 'border-neutral-muted flex min-w-0 flex-col border-s',
     variants: {
         density: {
-            compact: 'mx-md gap-micro px-md py-micro',
-            normal: 'mx-lg gap-xs px-md py-micro',
-            comfortable: 'mx-xl gap-sm px-lg py-xs'
+            compact: 'ms-md gap-micro py-micro ps-md',
+            normal: 'ms-lg gap-xs py-micro ps-md',
+            comfortable: 'ms-xl gap-sm py-xs ps-lg'
         }
     },
     defaultVariants: {
@@ -303,12 +349,12 @@ const defaultSubMenu = cva({
     }
 });
 const defaultTreeSubMenu = cva({
-    base: 'border-neutral-muted ml-0 flex min-w-0 translate-x-px flex-col border-l',
+    base: 'border-neutral-muted flex min-w-0 flex-col border-s',
     variants: {
         density: {
-            compact: 'ml-sm gap-micro py-micro pl-sm',
-            normal: 'ml-md gap-xs py-micro pl-md',
-            comfortable: 'ml-md gap-sm py-xs pl-md'
+            compact: 'ms-sm gap-micro py-micro ps-sm',
+            normal: 'ms-md gap-xs py-micro ps-md',
+            comfortable: 'ms-md gap-sm py-xs ps-md'
         }
     },
     defaultVariants: {
@@ -316,7 +362,7 @@ const defaultTreeSubMenu = cva({
     }
 });
 const defaultSubButton = cva({
-    base: 'state-layer text-neutral/70 hover:text-neutral flex min-w-0 -translate-x-px items-center overflow-hidden rounded-sm outline-none transition-[background,color,height,padding] duration-normal ease-linear focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
+    base: 'state-layer text-neutral/70 hover:text-neutral flex w-full min-w-0 items-center overflow-hidden rounded-sm outline-none transition-[background,color,height,padding] duration-normal ease-linear focus-visible:ring-2 focus-visible:ring-focus/50 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>[data-slot=sidebar-menu-sub-label]]:min-w-0 [&>[data-slot=sidebar-menu-sub-label]]:truncate [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
         activeVariant: activeVariants,
         size: {
@@ -324,44 +370,50 @@ const defaultSubButton = cva({
             normal: 'h-control-sm text-sm leading-5',
             large: 'h-control-md text-base leading-6'
         },
+        // The start padding indents the sub row's content; the end padding matches a top-level
+        // row's (`menuButton`), so badges and chevrons of every level end on one column.
         density: {
-            compact: 'gap-sm px-md',
-            normal: 'gap-md px-lg',
-            comfortable: 'gap-md px-lg'
+            compact: 'gap-sm ps-md pe-sm',
+            normal: 'gap-md ps-lg pe-md',
+            comfortable: 'gap-md ps-lg pe-md'
         },
         itemSize: {
             small: 'text-xs',
             normal: '',
             large: ''
         },
-        // Room at the row's end for a pinned action or badge, so the label truncates before it
-        // instead of running under it. Off adds nothing: a plain row keeps its exact classes.
-        reserveEnd: {
-            true: 'pr-layout-lg',
-            false: ''
-        }
+        // Room at the row's end for a pinned action, as on a top-level row. `none` adds nothing: a
+        // plain row keeps its exact classes.
+        endReserve: rowEndReserveKeys
     },
+    compoundVariants: [...rowEndReserve],
     defaultVariants: {
         activeVariant: 'soft',
         size: 'normal',
         density: 'normal',
         itemSize: 'normal',
-        reserveEnd: false
+        endReserve: 'none'
     }
 });
+// A row's pinned action is a real small icon button: one box per Sidebar `size`, shared by menu
+// and submenu rows so every level's action sits in the same end column. The box leaves the
+// row's own height around it (32/36/40 rows, 24/28/32 submenu rows) and holds the dots at the
+// sidebar icon size. `end-*` keeps it on the row's end edge in either direction.
+const rowActionSize = {
+    small: 'size-5',
+    normal: 'size-6',
+    large: 'size-7'
+};
+const rowTrailingEnd = {
+    compact: 'end-0.5',
+    normal: 'end-1',
+    comfortable: 'end-1.5'
+};
 const defaultMenuAction = cva({
     base: 'state-layer text-neutral hover:text-neutral peer-hover/menu-button:text-neutral absolute top-1/2 flex aspect-square -translate-y-1/2 items-center justify-center rounded-sm p-0 opacity-100 outline-none transition group-data-[collapsible=icon]:hidden focus-visible:ring-2 focus-visible:ring-focus/50 md:opacity-0 group-focus-within/menu-row:opacity-100 group-hover/menu-row:opacity-100 has-[[aria-expanded=true]]:opacity-100 [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
-        size: {
-            small: 'size-4.5',
-            normal: 'size-5',
-            large: 'size-6'
-        },
-        density: {
-            compact: 'right-0.5',
-            normal: 'right-1',
-            comfortable: 'right-1.5'
-        }
+        size: rowActionSize,
+        density: rowTrailingEnd
     },
     defaultVariants: {
         size: 'normal',
@@ -369,21 +421,13 @@ const defaultMenuAction = cva({
     }
 });
 // A submenu row's pinned action: the `menuAction` recipe keyed to the sub row's own
-// `group/menu-sub-item`, one step smaller to sit in the shorter row. Hidden until the row is
-// hovered or focused from `md` up, kept while its menu is open, always shown below `md`.
+// `group/menu-sub-item`, at the same box so it lines up with its parent's action. Hidden until the
+// row is hovered or focused from `md` up, kept while its menu is open, always shown below `md`.
 const defaultSubAction = cva({
     base: 'state-layer text-neutral hover:text-neutral absolute top-1/2 flex aspect-square -translate-y-1/2 items-center justify-center rounded-sm p-0 opacity-100 outline-none transition group-data-[collapsible=icon]:hidden focus-visible:ring-2 focus-visible:ring-focus/50 md:opacity-0 group-focus-within/menu-sub-item:opacity-100 group-hover/menu-sub-item:opacity-100 has-[[aria-expanded=true]]:opacity-100 [&>svg]:shrink-0 [&>svg]:size-[var(--sidebar-icon-size)]',
     variants: {
-        size: {
-            small: 'size-4',
-            normal: 'size-4.5',
-            large: 'size-5'
-        },
-        density: {
-            compact: 'right-0.5',
-            normal: 'right-1',
-            comfortable: 'right-1.5'
-        }
+        size: rowActionSize,
+        density: rowTrailingEnd
     },
     defaultVariants: {
         size: 'normal',
@@ -456,23 +500,30 @@ const defaultActionTrigger = cva({
         size: 'normal'
     }
 });
+// A badge is the row's last in-flow trailing part before any chevron, so the label truncates
+// before it whatever its width. It shares the row's end column with the row's pinned action and
+// the two never overlap: from `md` up the action only shows while the row is hovered, focused or
+// has its menu open, and the badge steps aside for exactly that time (its box is at least the
+// action's, so the action covers only its place). Below `md` the action is always shown and the
+// row reserves its box (`endReserve`), so the badge sits just before it.
 const defaultBadge = cva({
-    base: 'text-neutral/70 peer-hover/menu-button:text-neutral peer-data-active/menu-button:text-neutral pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-sm px-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden',
+    base: 'text-neutral/70 [:hover>&]:text-current [[data-active]>&]:text-current pointer-events-none ms-auto flex shrink-0 items-center justify-center rounded-sm px-xs font-medium tabular-nums transition-opacity select-none group-data-[collapsible=icon]:hidden',
     variants: {
         size: {
-            small: 'h-4 min-w-4 text-xs',
-            normal: 'h-5 min-w-5 text-sm',
-            large: 'h-6 min-w-6 text-sm'
+            small: 'h-4 min-w-5 text-xs',
+            normal: 'h-5 min-w-6 text-sm',
+            large: 'h-6 min-w-7 text-sm'
         },
-        density: {
-            compact: 'right-0.5',
-            normal: 'right-1',
-            comfortable: 'right-1.5'
+        // Which row's action the badge makes way for; `none` when the row pins no action.
+        action: {
+            none: '',
+            row: 'md:group-focus-within/menu-row:opacity-0 md:group-hover/menu-row:opacity-0 md:group-has-[[data-sidebar=menu-action]_[aria-expanded=true]]/menu-row:opacity-0',
+            sub: 'md:group-focus-within/menu-sub-item:opacity-0 md:group-hover/menu-sub-item:opacity-0 md:group-has-[[data-sidebar=menu-sub-action]_[aria-expanded=true]]/menu-sub-item:opacity-0'
         }
     },
     defaultVariants: {
         size: 'normal',
-        density: 'normal'
+        action: 'none'
     }
 });
 const defaultSearchContainer = cva({

package/dist/components/Sidebar/sidebar.views.svelte.js

@@ -1,6 +1,7 @@
 import { untrack } from 'svelte';
 import { easingFunctions } from '../../transitions/easingFunctions.js';
 import { createPointerDrag } from '../../utils/pointerDrag.js';
+import { createVelocityTracker } from '../../utils/swipeVelocity.js';
 import { createBindableValue } from '../../utils/state.svelte.js';
 /** The header and footer props a view can set; together they are the panel's chrome. */
 const chromeProps = [
@@ -215,17 +216,15 @@ export class SidebarViewsState {
         this.rtl = getComputedStyle(node).direction === 'rtl';
         let candidate = false;
         let sign = 1;
-        let lastX = 0;
-        let lastTime = 0;
-        let velocity = 0;
-        const release = (cancelled, timeStamp) => {
+        // Release speed over a short window, shared with drawers and toasts.
+        const tracker = createVelocityTracker();
+        const release = (cancelled, event) => {
             candidate = false;
             const swipe = this.swipe;
             if (swipe?.phase !== 'drag')
                 return;
-            // A long stationary hold is not a flick: the last velocity sample may be stale.
-            if (timeStamp - lastTime > 100)
-                velocity = 0;
+            tracker.add(event.clientX, event.timeStamp);
+            const velocity = tracker.velocity(event.timeStamp) * sign;
             const commit = !cancelled && (velocity > 0.4 || (swipe.offset > swipe.width * 0.35 && velocity > -0.2));
             swipe.phase = commit ? 'commit' : 'cancel';
             if (commit)
@@ -239,9 +238,8 @@ export class SidebarViewsState {
                 candidate = true;
                 this.rtl = getComputedStyle(node).direction === 'rtl';
                 sign = this.rtl ? -1 : 1;
-                lastX = event.clientX;
-                lastTime = event.timeStamp;
-                velocity = 0;
+                tracker.reset();
+                tracker.add(event.clientX, event.timeStamp);
             },
             // Horizontal toward the inline end, clearly more than vertical: anything else is a scroll.
             shouldActivate: ({ deltaX, deltaY }) => {
@@ -266,15 +264,10 @@ export class SidebarViewsState {
                 if (swipe?.phase !== 'drag')
                     return;
                 swipe.offset = clamp(deltaX * sign, 0, swipe.width);
-                const elapsed = event.timeStamp - lastTime;
-                if (elapsed >= 8) {
-                    velocity = ((event.clientX - lastX) * sign) / elapsed;
-                    lastX = event.clientX;
-                    lastTime = event.timeStamp;
-                }
+                tracker.add(event.clientX, event.timeStamp);
             },
-            onEnd: ({ event }) => release(false, event.timeStamp),
-            onCancel: ({ event }) => release(true, event.timeStamp)
+            onEnd: ({ event }) => release(false, event),
+            onCancel: ({ event }) => release(true, event)
         })(node);
     };
 }

package/dist/components/Stepper/Stepper.svelte

@@ -25,6 +25,7 @@
 		panelAriaLabelledby,
 		panelAriaLabel,
 		panelId,
+		panelActivationDirection,
 		mount = 'eager'
 	}: StepperProps<Item> = $props();
 	const valueState = createBindableValue(
@@ -167,6 +168,7 @@ container.style.height = firstSlide.clientHeight + 'px';
 				id={panelId?.(index)}
 				data-step-active={isActiveStep ? 'true' : undefined}
 				data-step={index}
+				data-activation-direction={panelActivationDirection?.(index)}
 				tabindex={panelTabindex}
 				hidden={!isActiveStep && !isLeaving(index)}
 				inert={!isActiveStep}

package/dist/components/Stepper/stepper.mcp.d.ts

@@ -1 +1 @@
-export declare const stepperDescription = "\n# Stepper Component\n\nStepper renders an ordered collection of panels with animated transitions, measured height changes, and programmatic navigation through StepperState.\n\n## Usage\n\nUse items for the collection and a single children snippet for the repeated panel content. The snippet receives the instance handle as api, the current item, and the zero-based index.\n\n<script lang=\"ts\">\n\timport { Stepper, type StepperApi } from '$lib/components/Stepper';\n\timport { Button } from '$lib/components/Button';\n\n\ttype Step = {\n\t\ttitle: string;\n\t\tdescription: string;\n\t};\n\n\tlet activeStep = $state(0);\n\tlet api = $state<StepperApi<Step>>();\n\n\tconst items: Step[] = [\n\t\t{ title: 'Account', description: 'Create the account.' },\n\t\t{ title: 'Profile', description: 'Complete the profile.' },\n\t\t{ title: 'Review', description: 'Confirm the details.' }\n\t];\n</script>\n\n<Stepper {items} bind:value={activeStep} bind:api>\n\t{#snippet children({ api, item, index })}\n\t\t<section class=\"space-y-4 p-6\">\n\t\t\t<h2>{item.title}</h2>\n\t\t\t<p>{item.description}</p>\n\t\t\t<div class=\"flex gap-2\">\n\t\t\t\t<Button disabled={index === 0} onclick={() => api.previous()}>\n\t\t\t\t\tPrevious\n\t\t\t\t</Button>\n\t\t\t\t<Button disabled={index === items.length - 1} onclick={() => api.next()}>\n\t\t\t\t\tNext\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</section>\n\t{/snippet}\n</Stepper>\n\n## Props\n\n- items: required array of step data. Each item is passed to children as item.\n- children: repeated snippet called for each panel with { api, item, index }.\n- value: bindable zero-based active index. Use this as the public source of truth when syncing steppers.\n- defaultValue: initial active index when value is omitted.\n- api: bindable StepperApi (a StepperState) for next(), previous(), and goTo(index).\n- onValueChange: called once with { value, item, index } when the active step changes. Same payload shape as Tabs; value and index are both the zero-based step index.\n- transition: step translation timing override (`duration` in ms, `easing`); responsive, and it beats the `motion` theme slot. The default is the `slow` duration token (300ms).\n- theme: theme overrides for the stepper parts, including its `motion` slot.\n- mode: classic or vertical.\n- panelRole: \"tabpanel\", \"group\", or null. Defaults to \"tabpanel\"; use \"group\" for labelled question flows.\n- panelAriaLabelledby: aria-labelledby value, callback, or false. Defaults to stepper-{index} when panelRole is \"tabpanel\".\n- panelAriaLabel: aria-label value or callback for each panel.\n- panelId: (index) => string giving each panel a DOM id so a tab can reference it with aria-controls. Tabs uses it to link Tabbar tabs to their panels.\n- mount: when a step's content is created \u2014 `eager` (default) for every step up front, `lazy` on first activation and destroyed once the slide away from it finishes, `once` on first activation and kept. Inactive panels are `inert` and `aria-hidden` at once and `hidden` as soon as the slide settles, so at rest exactly one panel is not `hidden`. Tabs forwards its own `mount`, which defaults to `lazy`.\n- class: extra classes applied to the root container.\n\n## StepperApi (StepperState)\n\n- next(): move to the next item when one exists.\n- previous(): move to the previous item when one exists.\n- goTo(index): request a specific zero-based step.\n- syncActiveStep(index): internal synchronization path used by the component when value changes.\n- value: current public active index.\n- items: current item array.\n- stepHeights: measured panel heights used for smooth height transitions.\n\n## Composition Rules\n\n- Render repeated step content through the children snippet.\n- Put per-step differences in the item data and branch inside children when needed.\n- Bind value when the parent or another Stepper controls the current step.\n- Bind api when external controls need to call next(), previous(), or goTo(index).\n\n## Accessibility\n\nStepper renders each panel with role=\"tabpanel\" by default, marks inactive panels inert and `aria-hidden` (and `hidden` once the slide settles), disables pointer events on inactive panels, and keeps inactive panels out of the tab order, so only the active panel reaches the text and accessibility layers. Use `panelRole={null}` with `panelAriaLabelledby={false}` when another primitive owns the semantics inside each panel.\n\n## Theme Parts\n\n- root: outer stepper container.\n- container: animated grid that holds all panels.\n- step: individual panel.\n\nThe theme supports the mode variant on root, container, and step.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) whose `duration` / `easing` drive the Web\n  Animations step translation and the matching CSS height/opacity transitions.\n- Ladder: `<Theme components={{ stepper: { motion } }}>` \u2192 `setStepperTheme({ motion })` \u2192\n  `theme.motion` \u2192 the `transition` prop (how Tabs forwards its own preset).\n- A resolved duration of 0 (reduced motion, or `duration: 'instant'`) snaps between steps.\n";
+export declare const stepperDescription = "\n# Stepper Component\n\nStepper renders an ordered collection of panels with animated transitions, measured height changes, and programmatic navigation through StepperState.\n\n## Usage\n\nUse items for the collection and a single children snippet for the repeated panel content. The snippet receives the instance handle as api, the current item, and the zero-based index.\n\n<script lang=\"ts\">\n\timport { Stepper, type StepperApi } from '$lib/components/Stepper';\n\timport { Button } from '$lib/components/Button';\n\n\ttype Step = {\n\t\ttitle: string;\n\t\tdescription: string;\n\t};\n\n\tlet activeStep = $state(0);\n\tlet api = $state<StepperApi<Step>>();\n\n\tconst items: Step[] = [\n\t\t{ title: 'Account', description: 'Create the account.' },\n\t\t{ title: 'Profile', description: 'Complete the profile.' },\n\t\t{ title: 'Review', description: 'Confirm the details.' }\n\t];\n</script>\n\n<Stepper {items} bind:value={activeStep} bind:api>\n\t{#snippet children({ api, item, index })}\n\t\t<section class=\"space-y-4 p-6\">\n\t\t\t<h2>{item.title}</h2>\n\t\t\t<p>{item.description}</p>\n\t\t\t<div class=\"flex gap-2\">\n\t\t\t\t<Button disabled={index === 0} onclick={() => api.previous()}>\n\t\t\t\t\tPrevious\n\t\t\t\t</Button>\n\t\t\t\t<Button disabled={index === items.length - 1} onclick={() => api.next()}>\n\t\t\t\t\tNext\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</section>\n\t{/snippet}\n</Stepper>\n\n## Props\n\n- items: required array of step data. Each item is passed to children as item.\n- children: repeated snippet called for each panel with { api, item, index }.\n- value: bindable zero-based active index. Use this as the public source of truth when syncing steppers.\n- defaultValue: initial active index when value is omitted.\n- api: bindable StepperApi (a StepperState) for next(), previous(), and goTo(index).\n- onValueChange: called once with { value, item, index } when the active step changes. Same payload shape as Tabs; value and index are both the zero-based step index.\n- transition: step translation timing override (`duration` in ms, `easing`); responsive, and it beats the `motion` theme slot. The default is the `slow` duration token (300ms).\n- theme: theme overrides for the stepper parts, including its `motion` slot.\n- mode: classic or vertical.\n- panelRole: \"tabpanel\", \"group\", or null. Defaults to \"tabpanel\"; use \"group\" for labelled question flows.\n- panelAriaLabelledby: aria-labelledby value, callback, or false. Defaults to stepper-{index} when panelRole is \"tabpanel\".\n- panelAriaLabel: aria-label value or callback for each panel.\n- panelId: (index) => string giving each panel a DOM id so a tab can reference it with aria-controls. Tabs uses it to link Tabbar tabs to their panels.\n- panelActivationDirection: (index) => string | undefined giving the value of `data-activation-direction` for each panel. Tabs sets it on the active panel with the direction the selection moved.\n- mount: when a step's content is created \u2014 `eager` (default) for every step up front, `lazy` on first activation and destroyed once the slide away from it finishes, `once` on first activation and kept. Inactive panels are `inert` and `aria-hidden` at once and `hidden` as soon as the slide settles, so at rest exactly one panel is not `hidden`. Tabs forwards its own `mount`, which defaults to `lazy`.\n- class: extra classes applied to the root container.\n\n## StepperApi (StepperState)\n\n- next(): move to the next item when one exists.\n- previous(): move to the previous item when one exists.\n- goTo(index): request a specific zero-based step.\n- syncActiveStep(index): internal synchronization path used by the component when value changes.\n- value: current public active index.\n- items: current item array.\n- stepHeights: measured panel heights used for smooth height transitions.\n\n## Composition Rules\n\n- Render repeated step content through the children snippet.\n- Put per-step differences in the item data and branch inside children when needed.\n- Bind value when the parent or another Stepper controls the current step.\n- Bind api when external controls need to call next(), previous(), or goTo(index).\n\n## Accessibility\n\nStepper renders each panel with role=\"tabpanel\" by default, marks inactive panels inert and `aria-hidden` (and `hidden` once the slide settles), disables pointer events on inactive panels, and keeps inactive panels out of the tab order, so only the active panel reaches the text and accessibility layers. Use `panelRole={null}` with `panelAriaLabelledby={false}` when another primitive owns the semantics inside each panel.\n\n## Theme Parts\n\n- root: outer stepper container.\n- container: animated grid that holds all panels.\n- step: individual panel.\n\nThe theme supports the mode variant on root, container, and step.\n\n## Motion\n\n- **motion** theme slot: one preset (no variants) whose `duration` / `easing` drive the Web\n  Animations step translation and the matching CSS height/opacity transitions.\n- Ladder: `<Theme components={{ stepper: { motion } }}>` \u2192 `setStepperTheme({ motion })` \u2192\n  `theme.motion` \u2192 the `transition` prop (how Tabs forwards its own preset).\n- A resolved duration of 0 (reduced motion, or `duration: 'instant'`) snaps between steps.\n";

package/dist/components/Stepper/stepper.mcp.js

@@ -58,6 +58,7 @@ Use items for the collection and a single children snippet for the repeated pane
 - panelAriaLabelledby: aria-labelledby value, callback, or false. Defaults to stepper-{index} when panelRole is "tabpanel".
 - panelAriaLabel: aria-label value or callback for each panel.
 - panelId: (index) => string giving each panel a DOM id so a tab can reference it with aria-controls. Tabs uses it to link Tabbar tabs to their panels.
+- panelActivationDirection: (index) => string | undefined giving the value of \`data-activation-direction\` for each panel. Tabs sets it on the active panel with the direction the selection moved.
 - mount: when a step's content is created — \`eager\` (default) for every step up front, \`lazy\` on first activation and destroyed once the slide away from it finishes, \`once\` on first activation and kept. Inactive panels are \`inert\` and \`aria-hidden\` at once and \`hidden\` as soon as the slide settles, so at rest exactly one panel is not \`hidden\`. Tabs forwards its own \`mount\`, which defaults to \`lazy\`.
 - class: extra classes applied to the root container.
 

package/dist/components/Stepper/stepper.props.d.ts

@@ -77,6 +77,11 @@ export type StepperProps<Item> = {
     panelAriaLabel?: StepperPanelAriaLabel<Item>;
     /** DOM id for each panel, so a tab can reference it with `aria-controls`. */
     panelId?: (index: number) => string;
+    /**
+     * Value of `data-activation-direction` for one panel, or undefined for none; a styling hook
+     * for direction-aware panel animations. Tabs sets it on the active panel.
+     */
+    panelActivationDirection?: (index: number) => string | undefined;
     /**
      * When each panel's content is created.
      * `eager` creates every panel up front, `lazy` creates a panel the first time it is

package/dist/components/Stepper/stepper.state.svelte.d.ts

@@ -56,6 +56,8 @@ export declare class StepperState<Item> extends StepperState_base {
     canGoToStep: (targetStep: number) => boolean;
     private translateToStep;
     private lockTransformToStep;
+    private collapseTrack;
+    private clearStep;
     private cancelAnimations;
     private cancelStepAnimation;
     private freezeCurrentTransform;

package/dist/components/Stepper/stepper.state.svelte.js

@@ -79,7 +79,10 @@ export class StepperState extends createBindableStateClass() {
         this.notifyChange(step);
     };
     syncActiveStep(step) {
-        if (!this.canGoToStep(step) || this.targetStep === step)
+        // A value outside the items shows no step, not the one the track last rested on.
+        if (!this.canGoToStep(step))
+            return this.clearStep();
+        if (this.targetStep === step)
             return;
         this.translateToStep(step);
     }
@@ -130,9 +133,9 @@ export class StepperState extends createBindableStateClass() {
     };
     translateToStep(step) {
         const offset = this.offsets[step];
-        if (!this.stepContainer || offset == null || Number.isNaN(offset)) {
-            // Nothing can slide before the track is measured, so no panel is leaving: the shown
-            // step is the requested one, and `setOffsets` locks the transform once it can.
+        if (!this.stepContainer || offset == null || Number.isNaN(offset) || this.visualStep < 0) {
+            // Nothing can slide before the track is measured, or when no step is shown, so no panel
+            // is leaving: the shown step is the requested one, at rest.
             this.targetStep = step;
             this.visualStep = step;
             return;
@@ -184,18 +187,34 @@ export class StepperState extends createBindableStateClass() {
         if (!this.stepContainer || offset == null || Number.isNaN(offset))
             return;
         this.destinationOffset = offset;
-        // At rest the track collapses to one viewport with the shown panel in column one, written
-        // to the DOM in the same frame the slide settles so the panel never moves twice.
-        this.stepContainer.style.transform = 'translateX(0px)';
-        this.stepContainer.style.width = '100%';
-        this.stepContainer.style.gridTemplateColumns = 'repeat(1, minmax(0, 1fr))';
-        this.getSteps().forEach((node) => {
-            node.style.gridColumn = '1';
-        });
+        this.collapseTrack();
         this.targetStep = step;
         this.visualStep = step;
+    }
+    // At rest the track collapses to one viewport with the shown panel in column one, written to
+    // the DOM in the same frame the slide settles so the panel never moves twice.
+    collapseTrack() {
+        if (this.stepContainer) {
+            this.stepContainer.style.transform = 'translateX(0px)';
+            this.stepContainer.style.width = '100%';
+            this.stepContainer.style.gridTemplateColumns = 'repeat(1, minmax(0, 1fr))';
+            this.getSteps().forEach((node) => {
+                node.style.gridColumn = '1';
+            });
+        }
         this.expanded = false;
     }
+    // Every panel is hidden and the root drops the last height, so the next step appears in place
+    // instead of sliding in from a panel that is no longer shown.
+    clearStep() {
+        if (this.visualStep < 0 && this.targetStep === undefined)
+            return;
+        this.cancelAnimations();
+        this.collapseTrack();
+        this.targetStep = undefined;
+        this.visualStep = -1;
+        this.lastActiveHeight = undefined;
+    }
     cancelAnimations() {
         this.animationRunId += 1;
         this.cancelStepAnimation();