@jovertical/mise-design-system 0.0.0-stage → 1.0.0

package/dist/components/navigation/sidebar/sidebar-provider.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * Owns the open and collapsed state and the CSS variables the whole family
+ * reads. It always wraps `Sidebar` and its page, never `Sidebar` alone.
+ */
+export type SidebarProviderProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Viewport width, in pixels, below which the sidebar becomes a sheet.
+     * Raise it when the persistent rail costs the content more room than it is
+     * worth.
+     */
+    mobileBreakpoint?: number;
+};
+declare const SidebarProvider: import("svelte").Component<SidebarProviderProps, {}, "ref" | "open">;
+type SidebarProvider = ReturnType<typeof SidebarProvider>;
+export default SidebarProvider;

package/dist/components/navigation/sidebar/sidebar-rail.svelte

@@ -0,0 +1,42 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarRail`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  export type SidebarRailProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement>
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import { useSidebar } from './context.svelte.js'
+
+  let { ref = $bindable(null), class: className, ...rest }: SidebarRailProps = $props()
+
+  const sidebar = useSidebar()
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  data-sidebar="rail"
+  data-slot="sidebar-rail"
+  aria-label="Toggle Sidebar"
+  tabindex={-1}
+  onclick={sidebar.toggle}
+  title="Toggle Sidebar"
+  class={cn(
+    'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+    'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+    '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+    'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+    '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+    '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+    className,
+  )}
+  {...rest}
+></button>

package/dist/components/navigation/sidebar/sidebar-rail.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+export type SidebarRailProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement>;
+declare const SidebarRail: import("svelte").Component<SidebarRailProps, {}, "ref">;
+type SidebarRail = ReturnType<typeof SidebarRail>;
+export default SidebarRail;

package/dist/components/navigation/sidebar/sidebar-separator.svelte

@@ -0,0 +1,29 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarSeparator`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { SeparatorProps } from '../../layout/separator/separator.svelte'
+
+  export type SidebarSeparatorProps = SeparatorProps
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Separator from '../../layout/separator/separator.svelte'
+
+  let { ref = $bindable(null), class: className, ...rest }: SidebarSeparatorProps = $props()
+</script>
+
+<Separator
+  bind:ref
+  data-slot="sidebar-separator"
+  data-sidebar="separator"
+  class={cn(
+    'mx-2 w-auto',
+    'group-data-[sidetheme=primary]:bg-white/30 group-data-[sidetheme=light]:bg-border group-data-[sidetheme=panel]:bg-sidebar-border',
+    className,
+  )}
+  {...rest}
+/>

package/dist/components/navigation/sidebar/sidebar-separator.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { SeparatorProps } from '../../layout/separator/separator.svelte';
+export type SidebarSeparatorProps = SeparatorProps;
+declare const SidebarSeparator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+type SidebarSeparator = ReturnType<typeof SidebarSeparator>;
+export default SidebarSeparator;

package/dist/components/navigation/sidebar/sidebar-trigger.svelte

@@ -0,0 +1,40 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`SidebarTrigger`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: none beyond the port.
+-->
+<script lang="ts" module>
+  import type { ButtonProps } from '../../actions/button/button.svelte'
+
+  export type SidebarTriggerProps = ButtonProps
+</script>
+
+<script lang="ts">
+  import PanelLeftIcon from '@lucide/svelte/icons/panel-left'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+  import { useSidebar } from './context.svelte.js'
+
+  let { ref = $bindable(null), class: className, onclick, ...rest }: SidebarTriggerProps = $props()
+
+  const sidebar = useSidebar()
+</script>
+
+<Button
+  bind:ref
+  data-sidebar="trigger"
+  data-slot="sidebar-trigger"
+  variant="ghost"
+  iconOnly
+  type="button"
+  class={cn('size-7', className)}
+  onclick={(event: MouseEvent) => {
+    onclick?.(event as never)
+    sidebar.toggle()
+  }}
+  {...rest}
+>
+  <PanelLeftIcon class="size-5" />
+  <span class="sr-only">Toggle Sidebar</span>
+</Button>

package/dist/components/navigation/sidebar/sidebar-trigger.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps } from '../../actions/button/button.svelte';
+export type SidebarTriggerProps = ButtonProps;
+declare const SidebarTrigger: import("svelte").Component<ButtonProps, {}, "ref">;
+type SidebarTrigger = ReturnType<typeof SidebarTrigger>;
+export default SidebarTrigger;

package/dist/components/navigation/sidebar/sidebar-variants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Origin: the React package 2.23.0 `sidebar.tsx` (`sidebarMenuButtonVariants`), itself shadcn/ui new-york `sidebar`
+ * Diverged: split out of the component file, as badge-variants.ts is. The
+ *   `panel` theme drops `font-mono`, which only restated the React package's mono body
+ *   face; everything else unchanged.
+ */
+import { type VariantProps } from 'class-variance-authority';
+export declare const sidebarMenuButtonVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type SidebarMenuButtonSize = NonNullable<VariantProps<typeof sidebarMenuButtonVariants>['size']>;

package/dist/components/navigation/sidebar/sidebar-variants.js

@@ -0,0 +1,40 @@
+/**
+ * Origin: the React package 2.23.0 `sidebar.tsx` (`sidebarMenuButtonVariants`), itself shadcn/ui new-york `sidebar`
+ * Diverged: split out of the component file, as badge-variants.ts is. The
+ *   `panel` theme drops `font-mono`, which only restated the React package's mono body
+ *   face; everything else unchanged.
+ */
+import { cva } from 'class-variance-authority';
+export const sidebarMenuButtonVariants = cva([
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md px-3 py-6 text-left text-md outline-hidden ring-sidebar-ring transition-[width,height,padding,background-color]',
+    'disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    'data-[active=true]:font-medium data-[state=open]:font-medium',
+    'group-data-[collapsible=icon]:size-10! group-data-[collapsible=icon]:p-2! group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:[&>span:last-child]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 group-data-[collapsible=icon]:[&>svg]:size-5',
+    // sidetheme=primary: white text; active/open = white bg, black text. The
+    // active row is the same shape as a segmented control's pill — a white
+    // surface lifted off a washed track — so it takes the same `shadow-sm`
+    // rather than a hand-written double shadow of its own.
+    'group-data-[sidetheme=primary]:text-white group-data-[sidetheme=primary]:hover:bg-white/20 group-data-[sidetheme=primary]:active:bg-white/20 group-data-[sidetheme=primary]:focus-visible:ring-white/30',
+    'group-data-[sidetheme=primary]:data-[active=true]:bg-white group-data-[sidetheme=primary]:data-[active=true]:text-black group-data-[sidetheme=primary]:data-[active=true]:shadow-sm',
+    'group-data-[sidetheme=primary]:data-[state=open]:bg-white group-data-[sidetheme=primary]:data-[state=open]:text-black group-data-[sidetheme=primary]:data-[state=open]:shadow-[inset_0_1px_2px_rgba(0,0,0,0.08),inset_0_0_0_1px_rgba(0,0,0,0.06)]',
+    'group-data-[sidetheme=primary]:data-[state=open]:data-[active=false]:!bg-white/20 group-data-[sidetheme=primary]:data-[state=open]:data-[active=false]:!text-white group-data-[sidetheme=primary]:data-[state=open]:data-[active=false]:!shadow-none',
+    // sidetheme=light: foreground text, hover = black/5; active = primary-600 + white text; open-but-not-active = white/20
+    'group-data-[sidetheme=light]:text-foreground group-data-[sidetheme=light]:hover:bg-black/5 group-data-[sidetheme=light]:active:bg-white/20 group-data-[sidetheme=light]:data-[active=true]:bg-primary-600 group-data-[sidetheme=light]:data-[active=true]:text-white group-data-[sidetheme=light]:data-[state=open]:bg-white/20 group-data-[sidetheme=light]:data-[active=true]:data-[state=open]:!bg-primary-600 group-data-[sidetheme=light]:focus-visible:ring-border',
+    // sidetheme=panel: muted resting text, accent-surface hover; active is a
+    // brand tint with a hairline ring so the row reads as selected without
+    // becoming a solid block. Open-but-inactive groups get the hover surface.
+    'group-data-[sidetheme=panel]:rounded-xl group-data-[sidetheme=panel]:h-8 group-data-[sidetheme=panel]:py-1.5 group-data-[sidetheme=panel]:px-2.5 group-data-[sidetheme=panel]:text-sm group-data-[sidetheme=panel]:text-sidebar-foreground/70 group-data-[sidetheme=panel]:hover:bg-sidebar-accent group-data-[sidetheme=panel]:hover:text-sidebar-foreground group-data-[sidetheme=panel]:focus-visible:ring-sidebar-ring',
+    'group-data-[sidetheme=panel]:data-[active=true]:bg-accent group-data-[sidetheme=panel]:data-[active=true]:text-accent-foreground group-data-[sidetheme=panel]:data-[active=true]:ring-1 group-data-[sidetheme=panel]:data-[active=true]:ring-primary/20 group-data-[sidetheme=panel]:data-[active=true]:shadow-none',
+    'group-data-[sidetheme=panel]:data-[state=open]:data-[active=false]:bg-sidebar-accent group-data-[sidetheme=panel]:data-[state=open]:data-[active=false]:text-sidebar-foreground',
+], {
+    variants: {
+        size: {
+            default: 'h-8 text-sm',
+            sm: 'h-7 text-xs',
+            lg: 'h-12 text-base group-data-[collapsible=icon]:p-0! [&>svg]:size-5 [&>svg]:shrink-0 group-data-[collapsible=icon]:[&>svg]:size-6',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});

package/dist/components/navigation/sidebar/sidebar.svelte

@@ -0,0 +1,152 @@
+<!--
+  Origin: the React package 2.23.0 `sidebar.tsx` (`Sidebar`), itself shadcn/ui new-york `sidebar`
+  Svelte: shadcn-svelte `sidebar`
+  Diverged: The React divergences (`sidetheme`, the published breakpoint) carry
+    over. The `primary` gradient reads the brand ramp rather than the React
+    package's hard-coded blues, and the `panel` theme drops `font-mono`, which
+    only restated the React package's mono body face. The `light` panel is
+    `bg-card` in dark: React kept it white under scheme-following text, which
+    went white on white.
+-->
+<script lang="ts" module>
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  import type { WithElementRef } from '../../../utils/types.js'
+
+  /**
+   * Visual treatments for the sidebar shell. `primary` is a brand gradient
+   * panel; `light` a white panel with a brand active pill; `panel` reads
+   * entirely from the `--sidebar-*` tokens, so it follows light and dark.
+   */
+  export type SidebarSideTheme = 'primary' | 'light' | 'panel'
+
+  export type SidebarProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right'
+    variant?: 'sidebar' | 'floating' | 'inset'
+    collapsible?: 'offcanvas' | 'icon' | 'none'
+    sidetheme?: SidebarSideTheme
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+  import Sheet from '../../overlays/sheet/sheet.svelte'
+  import SheetContent from '../../overlays/sheet/sheet-content.svelte'
+  import SheetDescription from '../../overlays/sheet/sheet-description.svelte'
+  import SheetHeader from '../../overlays/sheet/sheet-header.svelte'
+  import SheetTitle from '../../overlays/sheet/sheet-title.svelte'
+  import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './context.svelte.js'
+
+  let {
+    ref = $bindable(null),
+    side = 'left',
+    variant = 'sidebar',
+    collapsible = 'offcanvas',
+    sidetheme = 'primary',
+    class: className,
+    children,
+    ...rest
+  }: SidebarProps = $props()
+
+  const sidebar = useSidebar()
+
+  const THEME_SURFACE: Record<SidebarSideTheme, string> = {
+    primary:
+      'bg-[linear-gradient(180deg,var(--color-primary-900)_0%,var(--color-primary-800)_100%)] text-white',
+    light: 'bg-white dark:bg-card text-foreground',
+    panel: 'bg-sidebar text-sidebar-foreground',
+  }
+
+  const THEME_TEXT: Record<SidebarSideTheme, string> = {
+    primary: 'text-white',
+    light: 'text-foreground',
+    panel: 'text-sidebar-foreground',
+  }
+</script>
+
+{#if collapsible === 'none'}
+  <div
+    bind:this={ref}
+    data-slot="sidebar"
+    data-sidetheme={sidetheme}
+    class={cn('flex h-full w-(--sidebar-width) flex-col', THEME_SURFACE[sidetheme], className)}
+    {...rest}
+  >
+    {@render children?.()}
+  </div>
+{:else if sidebar.isMobile}
+  <Sheet bind:open={() => sidebar.openMobile, (value) => sidebar.setOpenMobile(value)}>
+    <!-- `group`, as on the desktop wrapper: the themed rules read an ancestor carrying it. -->
+    <SheetContent
+      data-sidebar="sidebar"
+      data-slot="sidebar"
+      data-sidetheme={sidetheme}
+      data-mobile="true"
+      class={cn('group w-(--sidebar-width) p-0 [&>button]:hidden', THEME_SURFACE[sidetheme])}
+      style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+      {side}
+    >
+      <SheetHeader class="sr-only">
+        <SheetTitle>Sidebar</SheetTitle>
+        <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+      </SheetHeader>
+      <div class="flex h-full w-full flex-col">{@render children?.()}</div>
+    </SheetContent>
+  </Sheet>
+{:else}
+  <div
+    bind:this={ref}
+    class={cn(
+      'group peer hidden group-data-[mobile=false]/sidebar-wrapper:block',
+      THEME_TEXT[sidetheme],
+    )}
+    data-state={sidebar.state}
+    data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
+    data-variant={variant}
+    data-sidetheme={sidetheme}
+    data-side={side}
+    data-slot="sidebar"
+  >
+    <!-- The gap the sidebar keeps open on desktop. -->
+    <div
+      data-slot="sidebar-gap"
+      class={cn(
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'group-data-[collapsible=offcanvas]:w-0',
+        'group-data-[side=right]:rotate-180',
+        variant === 'floating' || variant === 'inset'
+          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+      )}
+    ></div>
+    <div
+      data-slot="sidebar-container"
+      class={cn(
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear group-data-[mobile=false]/sidebar-wrapper:flex',
+        side === 'left'
+          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+        variant === 'floating' || variant === 'inset'
+          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+        className,
+      )}
+      {...rest}
+    >
+      <div
+        data-sidebar="sidebar"
+        data-slot="sidebar-inner"
+        class={cn(
+          'flex h-full w-full flex-col',
+          'group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm',
+          'group-data-[sidetheme=panel]:rounded-2xl!',
+          'group-data-[sidetheme=primary]:bg-[linear-gradient(180deg,var(--color-primary-900)_0%,var(--color-primary-800)_100%)]',
+          'group-data-[sidetheme=light]:bg-white dark:group-data-[sidetheme=light]:bg-card',
+          'group-data-[sidetheme=panel]:bg-sidebar',
+        )}
+      >
+        {@render children?.()}
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/components/navigation/sidebar/sidebar.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../utils/types.js';
+/**
+ * Visual treatments for the sidebar shell. `primary` is a brand gradient
+ * panel; `light` a white panel with a brand active pill; `panel` reads
+ * entirely from the `--sidebar-*` tokens, so it follows light and dark.
+ */
+export type SidebarSideTheme = 'primary' | 'light' | 'panel';
+export type SidebarProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+    sidetheme?: SidebarSideTheme;
+};
+declare const Sidebar: import("svelte").Component<SidebarProps, {}, "ref">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/navigation/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Stepper, type StepDefinition, type StepperProps, type StepperVariant, } from './stepper.svelte';
+export { default as StepperNavigation, type StepperNavigationProps, } from './stepper-navigation.svelte';

package/dist/components/navigation/stepper/index.js

@@ -0,0 +1,2 @@
+export { default as Stepper, } from './stepper.svelte';
+export { default as StepperNavigation, } from './stepper-navigation.svelte';

package/dist/components/navigation/stepper/stepper-chip.svelte

@@ -0,0 +1,42 @@
+<!--
+  Origin: the React package 2.23.0 `stepper.tsx` (`StepChip`)
+  Diverged: React's `tourTarget` is dropped (round 7 plan, R7-5). Not exported.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+
+  /**
+   * A step's contents, wrapped in whatever can carry a click: a div when the
+   * stepper only reports progress (a button that does nothing is worse than
+   * plain text), a button when the step can be selected.
+   */
+  export type StepperChipProps = {
+    selectable: boolean
+    onSelect: () => void
+    name: string
+    class?: string
+    children: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../utils/cn.js'
+
+  let { selectable, onSelect, name, class: className, children }: StepperChipProps = $props()
+</script>
+
+{#if selectable}
+  <button
+    type="button"
+    onclick={onSelect}
+    aria-label="Go to {name}"
+    class={cn(
+      'focus-visible:ring-ring/50 flex shrink-0 cursor-pointer items-start gap-3 rounded-2xl px-1 py-1 text-left transition-opacity outline-none hover:opacity-80 focus-visible:ring-[3px]',
+      className,
+    )}
+  >
+    {@render children()}
+  </button>
+{:else}
+  <div class={cn('flex shrink-0 items-start gap-3', className)}>{@render children()}</div>
+{/if}

package/dist/components/navigation/stepper/stepper-chip.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+/**
+ * A step's contents, wrapped in whatever can carry a click: a div when the
+ * stepper only reports progress (a button that does nothing is worse than
+ * plain text), a button when the step can be selected.
+ */
+export type StepperChipProps = {
+    selectable: boolean;
+    onSelect: () => void;
+    name: string;
+    class?: string;
+    children: Snippet;
+};
+declare const StepperChip: import("svelte").Component<StepperChipProps, {}, "">;
+type StepperChip = ReturnType<typeof StepperChip>;
+export default StepperChip;

package/dist/components/navigation/stepper/stepper-navigation.svelte

@@ -0,0 +1,112 @@
+<!--
+  Origin: the React package 2.23.0 `stepper-navigation.tsx`
+  Diverged: `leading` and `trailing` are snippets. Lucide's chevron-left,
+    chevron-right and loader for Tabler's. Spreads the rest onto the row, as
+    every component does.
+-->
+<script lang="ts" module>
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  /**
+   * A flow's controls, at the page's own level rather than inside its card.
+   *
+   * Where the buttons sit is the argument for this existing. A `CardFooter`
+   * binds them to one card, which is wrong the moment a step has two: the
+   * reader has to work out which card's footer moves the flow. Outside, they
+   * belong to the step, and every step's primary action is in the same place
+   * whether that step is one form, three cards, or a status screen.
+   *
+   * Handlers rather than routes, so the package needs no router.
+   */
+  export type StepperNavigationProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Omit for the first step. The next action stays right regardless. */
+    onBack?: () => void
+    backLabel?: string
+    backDisabled?: boolean
+    onNext?: () => void
+    nextLabel?: string
+    nextDisabled?: boolean
+    /** Draws a spinner in the next action. Pair it with `nextDisabled`. */
+    nextLoading?: boolean
+    /**
+     * At the left end, beside the back action if there is one: anything that
+     * leaves the flow rather than moving through it (Cancel, "finish later").
+     * Leaving and advancing are opposite intentions and belong at opposite
+     * ends.
+     */
+    leading?: Snippet
+    /** Immediately left of the next action: a skip, which does advance. */
+    trailing?: Snippet
+  }
+</script>
+
+<script lang="ts">
+  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left'
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right'
+  import LoaderIcon from '@lucide/svelte/icons/loader'
+
+  import { cn } from '../../../utils/cn.js'
+  import Button from '../../actions/button/button.svelte'
+
+  let {
+    onBack,
+    backLabel = 'Back',
+    backDisabled = false,
+    onNext,
+    nextLabel = 'Next',
+    nextDisabled = false,
+    nextLoading = false,
+    leading,
+    trailing,
+    class: className,
+    ...rest
+  }: StepperNavigationProps = $props()
+
+  const group =
+    'flex flex-col-reverse gap-2 [&>*]:w-full sm:flex-row sm:items-center sm:gap-2 sm:[&>*]:w-auto'
+</script>
+
+<!-- Stacked and full width on a phone, where two buttons side by side are each
+     too small to hit; the primary ends up on top because flex-col-reverse
+     reverses a row whose primary is last. -->
+<div
+  data-slot="stepper-navigation"
+  class={cn(
+    'flex flex-col-reverse gap-2 [&>*]:w-full sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:[&>*]:w-auto',
+    className,
+  )}
+  {...rest}
+>
+  {#if onBack || leading}
+    <div class={group}>
+      {#if onBack}
+        <Button variant="outline" onclick={onBack} disabled={backDisabled} type="button">
+          <ChevronLeftIcon class="size-4" />
+          {backLabel}
+        </Button>
+      {/if}
+      {@render leading?.()}
+    </div>
+  {:else}
+    <!-- Holds the left end so the next action stays right on a step with
+         neither: a primary that moves between step one and step two is one the
+         reader has to look for twice. -->
+    <div class="hidden sm:block"></div>
+  {/if}
+
+  {#if onNext || trailing}
+    <div class={group}>
+      {@render trailing?.()}
+      {#if onNext}
+        <Button onclick={onNext} disabled={nextDisabled} type="button">
+          {#if nextLoading}
+            <LoaderIcon class="size-4 animate-spin" />
+          {/if}
+          {nextLabel}
+          <ChevronRightIcon class="size-4" />
+        </Button>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/components/navigation/stepper/stepper-navigation.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * A flow's controls, at the page's own level rather than inside its card.
+ *
+ * Where the buttons sit is the argument for this existing. A `CardFooter`
+ * binds them to one card, which is wrong the moment a step has two: the
+ * reader has to work out which card's footer moves the flow. Outside, they
+ * belong to the step, and every step's primary action is in the same place
+ * whether that step is one form, three cards, or a status screen.
+ *
+ * Handlers rather than routes, so the package needs no router.
+ */
+export type StepperNavigationProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Omit for the first step. The next action stays right regardless. */
+    onBack?: () => void;
+    backLabel?: string;
+    backDisabled?: boolean;
+    onNext?: () => void;
+    nextLabel?: string;
+    nextDisabled?: boolean;
+    /** Draws a spinner in the next action. Pair it with `nextDisabled`. */
+    nextLoading?: boolean;
+    /**
+     * At the left end, beside the back action if there is one: anything that
+     * leaves the flow rather than moving through it (Cancel, "finish later").
+     * Leaving and advancing are opposite intentions and belong at opposite
+     * ends.
+     */
+    leading?: Snippet;
+    /** Immediately left of the next action: a skip, which does advance. */
+    trailing?: Snippet;
+};
+declare const StepperNavigation: import("svelte").Component<StepperNavigationProps, {}, "">;
+type StepperNavigation = ReturnType<typeof StepperNavigation>;
+export default StepperNavigation;