@heyramzi/ui 7.0.0 → 8.1.0

package/src/components/picker/mark-picker.svelte

@@ -0,0 +1,84 @@
+<script lang="ts" generics="V extends string">
+// =========================
+// IMPORTS
+// =========================
+import { CaretDown } from "phosphor-svelte";
+import { Mark } from "../mark/index.js";
+import { cn } from "@heyramzi/utils";
+import Picker from "./picker.svelte";
+import { pickerTriggerClass } from "./trigger.js";
+import type { PickerOption } from "./types.js";
+
+// =========================
+// TYPES
+// =========================
+
+/**
+ * The picker for named things carrying a mark: a kit, a channel, a client. It
+ * wraps `Picker` because the kit strip and the channel row wrote the same two
+ * snippets.
+ */
+type Props = {
+	options: PickerOption<V>[];
+	value: V | null;
+	onSelect: (value: V) => void;
+	ariaLabel: string;
+	/** Said by the trigger when nothing in the list is the current value. */
+	placeholder?: string;
+	/** The search field's own prompt, on a list long enough to show one. */
+	searchPlaceholder?: string;
+	/** `circle` for a face or an avatar, `square` for a logo. */
+	shape?: "square" | "circle";
+	width?: "sm" | "default" | "lg";
+	class?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	options,
+	value,
+	onSelect,
+	ariaLabel,
+	placeholder = "Select",
+	searchPlaceholder = "Search",
+	shape = "square",
+	width = "lg",
+	class: className,
+}: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let selected = $derived(options.find((option) => option.value === value));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Picker
+	{options}
+	{value}
+	{onSelect}
+	{width}
+	{searchPlaceholder}
+	triggerClass={cn(pickerTriggerClass(), className)}
+	triggerLabel={ariaLabel}
+>
+	{#snippet trigger()}
+		{#if selected?.image}
+			<Mark src={selected.image} label={selected.label} {shape} />
+		{:else if selected?.icon}
+			{@const Icon = selected.icon}
+			<Icon class="text-muted-foreground size-4" />
+		{/if}
+		<span class="truncate">{selected?.label ?? placeholder}</span>
+		<CaretDown class="text-muted-foreground size-3" />
+	{/snippet}
+	<!-- A row with an icon of its own is drawn by `Picker`; this is every other
+	     row, the ones that carry a mark. -->
+	{#snippet lead(option)}
+		<Mark src={option.image} label={option.label} {shape} />
+	{/snippet}
+</Picker>

package/src/components/picker/picker.svelte

@@ -0,0 +1,143 @@
+<script lang="ts" generics="V extends string">
+	import type { Snippet } from "svelte";
+	import * as Command from "../../shadcn/command/index.js";
+	import * as Popover from "../../shadcn/popover/index.js";
+	import { cn } from "@heyramzi/utils";
+	import type { PickerGroup, PickerOption } from "./types.js";
+
+	/**
+	 * One menu for every "pick one of these" in the app: priority, person, week,
+	 * goal, status. It's the Command palette at popover scale, same keys.
+	 */
+	// It replaced four pickers in one sidebar, each built differently. Only one
+	// had search, only one had arrow keys, and the check mark sat in three places.
+
+	type Props = {
+		/** Flat list. Mutually exclusive with `groups`. */
+		options?: PickerOption<V>[];
+		/** Titled runs, when the menu has a shape worth naming. */
+		groups?: PickerGroup<V>[];
+		value: V | null;
+		onSelect: (value: V) => void;
+		/** The control that opens the menu. Rendered inside `Popover.Trigger`. */
+		trigger: Snippet;
+		/** Class for the trigger. Use `pickerTriggerClass` to build it. */
+		triggerClass?: string;
+		triggerLabel?: string;
+		/**
+		 * A mark drawn at the head of a row when the option carries no icon: an
+		 * avatar, a client logo, a colour swatch.
+		 */
+		lead?: Snippet<[PickerOption<V>]>;
+		/** Pinned under the list: a clear action, a hint, a secondary surface. */
+		footer?: Snippet<[{ close: () => void }]>;
+		/**
+		 * Search field. `auto` shows it from seven rows, the point at which the
+		 * eye stops finding a name faster than the fingers can type it.
+		 */
+		searchable?: boolean | "auto";
+		searchPlaceholder?: string;
+		emptyLabel?: string;
+		open?: boolean;
+		align?: "start" | "center" | "end";
+		/** `sm` fits a word, `default` a name, `lg` a name and a date. */
+		width?: "sm" | "default" | "lg";
+		disabled?: boolean;
+	};
+
+	let {
+		options,
+		groups,
+		value,
+		onSelect,
+		trigger,
+		triggerClass,
+		triggerLabel,
+		lead,
+		footer,
+		searchable = "auto",
+		searchPlaceholder,
+		emptyLabel = "No matches",
+		open = $bindable(false),
+		align = "start",
+		width = "default",
+		disabled = false
+	}: Props = $props();
+
+	let resolved = $derived<PickerGroup<V>[]>(groups ?? [{ options: options ?? [] }]);
+	let count = $derived(resolved.reduce((n, g) => n + g.options.length, 0));
+	let showSearch = $derived(searchable === "auto" ? count >= 7 : searchable);
+
+	// 176 / 208 / 240px. The reference runs a 5-row priority menu at 206px, so
+	// `default` is the common case. `lg` fits a name and a date without cutting.
+	const WIDTH = { sm: "w-44", default: "w-52", lg: "w-60" } as const;
+
+	function pick(next: V) {
+		open = false;
+		onSelect(next);
+	}
+
+	/**
+	 * WHY a custom filter: the default one scores `value`, which is often an id.
+	 * Typing "an" fuzzy-matched every uuid, so only the visible words are searched.
+	 */
+	function filter(_value: string, search: string, keywords?: string[]) {
+		return keywords ? Command.computeCommandScore(keywords.join(" "), search) : 0;
+	}
+
+	function keywordsFor(option: PickerOption<V>): string[] {
+		return [option.label, option.hint, option.keywords].filter(Boolean) as string[];
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger class={triggerClass} aria-label={triggerLabel} {disabled}>
+		{@render trigger()}
+	</Popover.Trigger>
+	<!-- A picker opens below its trigger. `side` was a prop taking four edges and
+	 no caller in any repo had ever passed one. Deleted 4 Sep 2026. -->
+	<Popover.Content {align} side="bottom" class={cn("p-0", WIDTH[width])}>
+		<Command.Root {filter} loop>
+			{#if showSearch}
+				<Command.Input placeholder={searchPlaceholder} />
+			{/if}
+			<Command.List class={cn(!showSearch && "py-1.5")}>
+				{#if showSearch}
+					<Command.Empty>{emptyLabel}</Command.Empty>
+				{/if}
+				{#each resolved as group, i (group.heading ?? i)}
+					<Command.Group heading={group.heading}>
+						{#each group.options as option (option.value)}
+							{@const active = option.value === value}
+							<Command.Item
+								value={option.value}
+								keywords={keywordsFor(option)}
+								disabled={option.disabled}
+								data-checked={active ? "true" : undefined}
+								onSelect={() => pick(option.value)}
+							>
+								{#if option.icon}
+									{@const Icon = option.icon}
+									<Icon class={cn("size-4", option.tone)} weight="bold" />
+								{:else if lead}
+									{@render lead(option)}
+								{/if}
+								<span class={cn("min-w-0 flex-1 truncate text-left", active && option.tone)}>
+									{option.label}
+								</span>
+								{#if option.hint}
+									<span class="text-muted-foreground shrink-0 text-xs tabular-nums">{option.hint}</span>
+								{/if}
+							</Command.Item>
+						{/each}
+					</Command.Group>
+				{/each}
+			</Command.List>
+			{#if footer}
+				<div class="border-border/70 border-t p-1.5">
+					{@render footer({ close: () => (open = false) })}
+				</div>
+			{/if}
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>

package/src/components/picker/trigger.ts

@@ -0,0 +1,42 @@
+import { tv } from "tailwind-variants";
+
+/**
+ * The one look for a control that opens a picker, and for the plain values
+ * that sit in the same column beside it.
+ */
+// WHY a recipe: a property row can be a menu trigger, a link or a plain
+// string. All three draw the same box, and only one is a button.
+
+// It replaced eight geometries in one sidebar: three heights, three radii, two
+// paddings, and a border on three rows out of eight.
+
+// Borderless at rest on purpose. A value that's set is a fact to read, so the
+// box shows only under the pointer and on focus.
+export const pickerTriggerClass = tv({
+  base: [
+    // 13px at weight 500 is Linear's own property row, measured 31 Aug 2026 on a
+    // 16px root. 14px reads looser than the reference, and it shows in the sidebar.
+    "t-press inline-flex min-w-0 items-center gap-1.5 rounded-md text-[13px] font-medium whitespace-nowrap select-none",
+    "hover:bg-muted data-[state=open]:bg-muted",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+  ],
+  variants: {
+    // Heights match `segmentedTrackClass`, so a strip and a picker line up.
+    // Padding is 6px leading, 10px trailing: an even 8px shunted icon rows right.
+    size: {
+      sm: "h-6 ps-1.5 pe-2 any-pointer-coarse:h-9 any-pointer-coarse:pe-2.5",
+      default: "h-7 ps-1.5 pe-2.5 any-pointer-coarse:h-10",
+    },
+    /**
+     * Fill the row. Off by default: Linear's property rows sit at natural width
+     * (80px for "Assign"), so a set of rows reads as a set of chips.
+     */
+    block: { true: "flex w-full", false: "w-fit" },
+    /** No value yet: the label is a prompt, so it recedes until hovered. */
+    empty: { true: "text-muted-foreground/70 hover:text-muted-foreground", false: "" },
+    /** A row that carries no action still needs the column's box. */
+    inert: { true: "hover:bg-transparent cursor-default", false: "" },
+  },
+  defaultVariants: { size: "default", block: false, empty: false, inert: false },
+});

package/src/components/picker/types.ts

@@ -0,0 +1,26 @@
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+
+/** One row in a picker menu. */
+export type PickerOption<V extends string = string> = {
+  /** The value written when the row is chosen. */
+  value: V;
+  label: string;
+  /** Right-aligned muted text: a date, a count, a unit. Never a second label. */
+  hint?: string;
+  /** Phosphor component drawn at the head of the row. */
+  icon?: PhosphorIcon;
+  /** A mark drawn at the head of a row that has no icon: a logo, an avatar.
+   *  Drawn by whatever fills `lead`, which is what `MarkPicker` is for. */
+  image?: string;
+  /** Tone for the icon and, when the row is the current value, for the label. */
+  tone?: string;
+  /** Extra words the search matches, so "team@" finds a person by email. */
+  keywords?: string;
+  disabled?: boolean;
+};
+
+/** A titled run of options. An untitled group is seamless; a titled one rules off. */
+export type PickerGroup<V extends string = string> = {
+  heading?: string;
+  options: PickerOption<V>[];
+};

package/src/components/segmented/animated-tabs.svelte

@@ -0,0 +1,175 @@
+<script lang="ts" module>
+	import type { SegmentContent } from "./segment.svelte";
+
+	/** One tab. See `SegmentContent` for everything a segment can say. */
+	export type TabDef<T extends string = string> = SegmentContent & { value: T };
+
+	/**
+	 * Where the tab row sits, the only thing that legitimately differs between
+	 * two tab sets. A closed union and not a class string: 23 files each decided
+	 * their own.
+	 */
+	export type TabsPlacement = "toolbar" | "section" | "inline";
+
+	const PLACEMENT_WRAPPER: Record<TabsPlacement, string | undefined> = {
+		toolbar: undefined,
+		section: "shrink-0 border-b border-border py-2",
+		inline: undefined,
+	};
+
+	const PLACEMENT_ROOT: Record<TabsPlacement, string | undefined> = {
+		toolbar: undefined,
+		section: "gap-0",
+		inline: "shrink-0",
+	};
+</script>
+
+<script lang="ts" generics="T extends string">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "@heyramzi/utils";
+	import Segment from "./segment.svelte";
+	import SegmentedTrack from "./segmented-track.svelte";
+	import SegmentedOverflow from "./segmented-overflow.svelte";
+	import { SEGMENT_MAX, splitSegments } from "./collapse.js";
+	import {
+		segmentedActiveClass,
+		segmentedTriggerClass,
+		type SegmentedVariant,
+	} from "./segmented.js";
+
+	// WHY re-declare `value` and `onValueChange`: the primitive types them as a
+	// bare `string`, so fourteen pages cast back to their union. Generic now, the
+	// one narrowing happens here.
+	type Props = Omit<TabsPrimitive.RootProps, "value" | "onValueChange"> & {
+		tabs: readonly TabDef<T>[];
+		value?: T;
+		onValueChange?: (value: T) => void;
+		// Where the row sits. See `TabsPlacement`.
+		placement?: TabsPlacement;
+		// WHY: when true the track stretches to its container and triggers share width equally.
+		// Use for narrow side panels where pickers should fill the row.
+		block?: boolean;
+		// `underline`: bare labels over a hairline, a travelling rule marks the active one.
+		// Same height and overflow menu. Colour the rule with `--segmented-rule` on `class`.
+		variant?: SegmentedVariant;
+		ariaLabel?: string;
+		toolbar?: import("svelte").Snippet;
+		// WHY: content ABOVE the tab row but inside the root. A detail pane names the
+		// record first, and the row can't leave the root without losing its tabpanel wiring.
+		lead?: import("svelte").Snippet;
+		// The page's own horizontal gutter, merged over the placement chrome.
+		listWrapperClass?: string;
+		// WHY: when only one tab is left the pill row is just decoration. Opt in to
+		// drop the row entirely (the lone tab's content still renders).
+		hideSingle?: boolean;
+		// Objects the row may draw before its tail becomes a menu, the menu
+		// counted as one of them. See `collapse.ts`.
+		max?: number;
+		// What the menu segment says. Translate at the call site.
+		moreLabel?: string;
+	};
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		onValueChange,
+		tabs,
+		placement = "toolbar",
+		block = false,
+		variant = "pill",
+		ariaLabel,
+		toolbar,
+		lead,
+		class: className,
+		listWrapperClass,
+		hideSingle = false,
+		max = SEGMENT_MAX,
+		moreLabel,
+		children,
+		...restProps
+	}: Props = $props();
+
+	let split = $derived(
+		splitSegments(
+			tabs,
+			max,
+			tabs.findIndex((tab) => tab.value === value),
+		),
+	);
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	value={value ?? ""}
+	onValueChange={(next) => {
+		// The single narrowing: bits-ui hands back the string it was given, which
+		// is one of `tabs[].value`, so it is a `T`.
+		const picked = next as T;
+		value = picked;
+		onValueChange?.(picked);
+	}}
+	data-slot="tabs"
+	class={cn(
+		"group/tabs flex max-w-full min-w-0 flex-col gap-2",
+		PLACEMENT_ROOT[placement],
+		className,
+	)}
+	{...restProps}
+>
+	{@render lead?.()}
+
+	{#if !(hideSingle && tabs.length <= 1)}
+		<!-- WHY scroll, not wrap: it's one object. Seven categories ran 828px,
+		     past an iPad's edge. Past `max` the tail collapses first. -->
+		<div
+			class={cn(
+				"no-scrollbar flex max-w-full min-w-0 items-center gap-3 overflow-x-auto",
+				PLACEMENT_WRAPPER[placement],
+				listWrapperClass,
+			)}
+		>
+			<SegmentedTrack fill={block} {variant}>
+				<!-- WHY an inner `display: contents` tablist: a tablist owns only tabs, and the
+				     overflow trigger isn't one. `contents` keeps segments as direct flex children. -->
+				<div class="contents" data-slot="tabs-list" role="tablist" aria-label={ariaLabel}>
+					{#each split.visible as tab (tab.value)}
+						<TabsPrimitive.Trigger
+							value={tab.value}
+							class={cn(segmentedTriggerClass({ variant, fill: block }), segmentedActiveClass)}
+						>
+							<Segment
+								label={tab.label}
+								count={tab.count}
+								icon={tab.icon}
+								image={tab.image}
+								done={tab.done}
+								badge={tab.badge}
+								active="auto"
+							/>
+						</TabsPrimitive.Trigger>
+					{/each}
+				</div>
+				{#snippet after()}
+					{#if split.hidden.length > 0}
+						<SegmentedOverflow
+							items={split.hidden}
+							onSelect={(next) => {
+								value = next;
+								onValueChange?.(next);
+							}}
+							label={moreLabel}
+							fill={block}
+							{variant}
+						/>
+					{/if}
+				{/snippet}
+			</SegmentedTrack>
+
+			{#if toolbar}
+				{@render toolbar()}
+			{/if}
+		</div>
+	{/if}
+
+	{@render children?.()}
+</TabsPrimitive.Root>

package/src/components/segmented/collapse.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vite-plus/test";
+import { splitSegments } from "./collapse.js";
+
+const items = ["a", "b", "c", "d", "e", "f", "g", "h"] as const;
+
+describe("splitSegments", () => {
+  it("keeps everything when the row can hold it", () => {
+    expect(splitSegments(items.slice(0, 6), 6, 0)).toEqual({
+      visible: ["a", "b", "c", "d", "e", "f"],
+      hidden: [],
+    });
+  });
+
+  it("leaves one slot for the menu once the row overflows", () => {
+    const { visible, hidden } = splitSegments(items, 6, 0);
+    expect(visible).toEqual(["a", "b", "c", "d", "e"]);
+    expect(hidden).toEqual(["f", "g", "h"]);
+  });
+
+  it("pulls the current item into the last visible slot", () => {
+    const { visible, hidden } = splitSegments(items, 6, 6);
+    expect(visible).toEqual(["a", "b", "c", "d", "g"]);
+    expect(hidden).toEqual(["e", "f", "h"]);
+  });
+
+  it("loses nothing whichever item is current", () => {
+    for (let i = 0; i < items.length; i++) {
+      const { visible, hidden } = splitSegments(items, 6, i);
+      expect([...visible, ...hidden].sort()).toEqual([...items].sort());
+      expect(visible).toContain(items[i]);
+      expect(visible).toHaveLength(5);
+    }
+  });
+
+  it("draws the whole strip when nothing is current and it fits", () => {
+    expect(splitSegments(items.slice(0, 3), 6, -1).hidden).toEqual([]);
+  });
+
+  it("collapses the tail when nothing is current", () => {
+    expect(splitSegments(items, 6, -1)).toEqual({
+      visible: ["a", "b", "c", "d", "e"],
+      hidden: ["f", "g", "h"],
+    });
+  });
+
+  it("refuses to split into a menu plus one segment", () => {
+    expect(splitSegments(items, 2, 5).hidden).toEqual([]);
+  });
+});

package/src/components/segmented/collapse.ts

@@ -0,0 +1,39 @@
+/** How a segmented strip that outgrew its row decides what to keep. */
+
+// WHY not a scrollbar: a sideways scroll hid four of five tabs
+// behind a gesture nobody makes with a mouse. The tail becomes a menu instead.
+
+// WHY a count, not a measurement: the strip sits in a toolbar sized by its own
+// content, so measuring reads its own width back and never collapses.
+
+/**
+ * The most objects a strip draws before its tail becomes a menu, the menu
+ * counted as one of them. Two to six values is where a segmented control reads best.
+ */
+export const SEGMENT_MAX = 6;
+
+/**
+ * Split items into the drawn ones and the menu's. The current item always stays visible.
+ * @param max objects the row may draw, the menu counted as one
+ */
+export function splitSegments<S>(
+  items: readonly S[],
+  max: number,
+  activeIndex: number,
+): { visible: S[]; hidden: S[] } {
+  // Under three the row is the menu and a single segment beside it, which says
+  // less than the menu alone. Below that, and whenever everything fits, no split.
+  if (max < 3 || items.length <= max) return { visible: [...items], hidden: [] };
+
+  const slots = max - 1;
+  if (activeIndex < slots && activeIndex >= 0) {
+    return { visible: items.slice(0, slots), hidden: items.slice(slots) };
+  }
+  if (activeIndex < 0 || activeIndex >= items.length) {
+    return { visible: items.slice(0, slots), hidden: items.slice(slots) };
+  }
+  return {
+    visible: [...items.slice(0, slots - 1), ...items.slice(activeIndex, activeIndex + 1)],
+    hidden: items.filter((_, i) => i >= slots - 1 && i !== activeIndex),
+  };
+}

package/src/components/segmented/index.ts

@@ -0,0 +1,41 @@
+/**
+ * The segmented control. Three components draw it, one per ARIA shape, and they
+ * share the track (`segmented.ts`) and segment body (`segment.svelte`).
+ */
+
+// WHY no low-level `Tabs.Root`/`List`/`Trigger` here: that's `shadcn/tabs`. This
+// is the data-driven layer on top, and `AnimatedTabs` is the way in.
+
+// Past `SEGMENT_MAX` objects the tail collapses into a menu: `collapse.ts`
+// decides, `segmented-overflow.svelte` draws it. No call site opts in.
+import AnimatedTabs, {
+  type TabDef,
+  type TabsPlacement,
+} from "./animated-tabs.svelte";
+import SegmentedFilter from "./segmented-filter.svelte";
+import SegmentedNav, {
+  type SegmentedNavItem,
+} from "./segmented-nav.svelte";
+import SectionRuns, {
+  type SectionRun,
+  type SectionStrip,
+} from "./section-runs.svelte";
+import { type SegmentContent } from "./segment.svelte";
+import { segmentedRowClass, type SegmentedVariant } from "./segmented.js";
+import { SEGMENT_MAX } from "./collapse.js";
+
+export {
+  AnimatedTabs,
+  SectionRuns,
+  SegmentedFilter,
+  SegmentedNav,
+  SEGMENT_MAX,
+  segmentedRowClass,
+  type SectionRun,
+  type SectionStrip,
+  type SegmentContent,
+  type SegmentedNavItem,
+  type SegmentedVariant,
+  type TabDef,
+  type TabsPlacement,
+};

package/src/components/segmented/section-runs.svelte

@@ -0,0 +1,79 @@
+<script lang="ts" module>
+	import type { SegmentedNavItem } from "./segmented-nav.svelte";
+
+	/** One bordered track on the section row. A run with a `label` is a reference
+	 *  set, not a step, so `SectionRuns` titles it and sends it right. */
+	export interface SectionRun {
+		label?: string;
+		items: readonly SegmentedNavItem[];
+		/** Overrides the strip's `current` for this run, so two nested runs each light one tab. */
+		current?: string;
+	}
+
+	// WHY runs: a section can hold a flow and the references it's read against.
+	// Each run gets its own track so they don't read as one sequence.
+	/** What an app shell publishes so a page's toolbar can draw the section strip. */
+	export interface SectionStrip {
+		runs: readonly SectionRun[];
+		current: string;
+		ariaLabel: string;
+	}
+</script>
+
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+	import SegmentedNav from "./segmented-nav.svelte";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		strip: SectionStrip;
+		/** The host row's own constraints: order, width, container queries. */
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { strip, class: className }: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+
+	// The titled run takes the right edge, so a reference set reads apart from the steps.
+	let firstTitled = $derived(strip.runs.findIndex((run) => run.label));
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+
+<!-- WHY it grows only with a titled run: `ml-auto` needs room to push into, and
+     a one-run strip keeps its width beside the search. -->
+<div
+	class={cn(
+		"no-scrollbar flex min-w-0 items-center gap-x-3 overflow-x-auto",
+		firstTitled >= 0 && "flex-1",
+		className,
+	)}
+>
+	{#each strip.runs as run, index (index)}
+		<div class={cn("flex shrink-0 items-center gap-2", index === firstTitled && "ml-auto")}>
+			{#if run.label}
+				<span class="text-[10px] font-medium tracking-wider text-muted-foreground uppercase">
+					{run.label}
+				</span>
+			{/if}
+			<SegmentedNav
+				items={run.items}
+				current={run.current ?? strip.current}
+				ariaLabel={run.label ?? strip.ariaLabel}
+			/>
+		</div>
+	{/each}
+</div>