@heyramzi/ui 2.0.1 → 2.2.0

package/src/components/section-header/section-label.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// The one label style for panel, rail group and sub-section headers. Retyped
+		// copies drifted to a different tracking value.
+		icon?: PhosphorIcon;
+		children: Snippet;
+		class?: string;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let { icon: Icon, children, class: className }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<span
+	class={cn(
+		"flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground",
+		className,
+	)}
+>
+	{#if Icon}
+		<Icon class="size-4 text-brand" aria-hidden="true" />
+	{/if}
+	{@render children()}
+</span>

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

@@ -2,7 +2,17 @@
 	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 };
+	export type TabDef<T extends string = string> = SegmentContent & {
+		value: T;
+		/**
+		 * The tab's group. A divider marks each change of group, and a group's `label` opens it as a
+		 * quiet heading.
+		 */
+		group?: TabGroup;
+	};
+
+	/** `id` is what makes two tabs one group. `label` is optional text for a heading before the group. */
+	export type TabGroup = { id: string; label?: string };
 
 	/**
 	 * Where the tab row sits, the only thing that legitimately differs between
@@ -132,7 +142,26 @@
 				<!-- 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)}
+					{#each split.visible as tab, index (tab.value)}
+						{@const previous = split.visible[index - 1]}
+						{#if (tab.group?.id ?? "") !== (previous?.group?.id ?? "") || (index === 0 && tab.group?.label)}
+							<!-- WHY presentational: a tablist owns only tabs, and a divider or a heading isn't one. -->
+							{#if index > 0}
+								<span
+									role="presentation"
+									aria-hidden="true"
+									class="mx-1 my-2 w-px shrink-0 self-stretch bg-border"
+								></span>
+							{/if}
+							{#if tab.group?.label}
+								<span
+									role="presentation"
+									aria-hidden="true"
+									class="flex shrink-0 items-center px-2 text-xs font-medium tracking-wide text-muted-foreground uppercase"
+									>{tab.group.label}</span
+								>
+							{/if}
+						{/if}
 						<TabsPrimitive.Trigger
 							value={tab.value}
 							class={cn(segmentedTriggerClass({ variant, fill: block }), segmentedActiveClass)}

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

@@ -50,7 +50,8 @@ describe("splitSegments", () => {
 
 describe("resolveSegmentMax", () => {
   it("turns none into a limit nothing reaches, so no tail folds", async () => {
-    const { resolveSegmentMax, splitSegments } = await import("./collapse.js");
+    const { resolveSegmentMax, splitSegments } =
+      await import("./collapse.js");
     const items = Array.from({ length: 20 }, (_, i) => i);
     expect(resolveSegmentMax("none")).toBe(Number.POSITIVE_INFINITY);
     expect(resolveSegmentMax(4)).toBe(4);

package/src/components/segmented/index.ts

@@ -10,6 +10,7 @@
 // decides, `segmented-overflow.svelte` draws it. No call site opts in.
 import AnimatedTabs, {
   type TabDef,
+  type TabGroup,
   type TabsPlacement,
 } from "./animated-tabs.svelte";
 import SegmentedFilter from "./segmented-filter.svelte";
@@ -37,5 +38,6 @@ export {
   type SegmentedNavItem,
   type SegmentedVariant,
   type TabDef,
+  type TabGroup,
   type TabsPlacement,
 };

package/src/components/segmented/segment.svelte

@@ -1,59 +1,59 @@
 <script lang="ts" module>
-import type { PhosphorIcon } from "../../lib/icon-types.js";
+	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
-/** Everything a segment may say, for every strip drawn from this folder. */
+	/** Everything a segment may say, for every strip drawn from this folder. */
 
-// WHY one shape: the tab, nav and filter strips each grew an item type and
-// drifted, down to drawing a logo fallback two ways. Now it's one type, one renderer.
-export type SegmentContent = {
-	label: string;
-	/** A number after the label. `0` still renders; omit for "no number". */
-	count?: number;
-	icon?: PhosphorIcon;
-	/** A square mark drawn in place of an icon, for a brand that has one. */
-	image?: string;
-	/**
-	 * This segment's work is finished. Drawn as a dot after the label, and only
-	 * where there is no count, because a count already says the same thing.
-	 */
-	done?: boolean;
-	/**
-	 * A short note after the label, such as "Save 20%". Text where `count` is a
-	 * number, in the accent colour. Drawn before a count or a done dot.
-	 */
-	badge?: string;
-};
+	// WHY one shape: the tab, nav and filter strips each grew an item type and
+	// drifted, down to drawing a logo fallback two ways. Now it's one type, one renderer.
+	export type SegmentContent = {
+		label: string;
+		/** A number after the label. `0` still renders; omit for "no number". */
+		count?: number;
+		icon?: PhosphorIcon;
+		/** A square mark drawn in place of an icon, for a brand that has one. */
+		image?: string;
+		/**
+		 * This segment's work is finished. Drawn as a dot after the label, and only
+		 * where there is no count, because a count already says the same thing.
+		 */
+		done?: boolean;
+		/**
+		 * A short note after the label, such as "Save 20%". Text where `count` is a
+		 * number, in the accent colour. Drawn before a count or a done dot.
+		 */
+		badge?: string;
+	};
 </script>
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { cn } from "../../lib/utils.js";
-import { Icon } from "../icon/index.js";
-import { Mark } from "../mark/index.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../../lib/utils.js";
+	import { Icon } from "../icon/index.js";
+	import { Mark } from "../mark/index.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props extends SegmentContent {
-	/**
-	 * `true`/`false` when the caller owns the state. `"auto"` when bits-ui owns it
-	 * in a `data-state` on the trigger, and the stylesheet answers.
-	 */
-	active?: boolean | "auto";
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props extends SegmentContent {
+		/**
+		 * `true`/`false` when the caller owns the state. `"auto"` when bits-ui owns it
+		 * in a `data-state` on the trigger, and the stylesheet answers.
+		 */
+		active?: boolean | "auto";
+	}
 
-// =========================
-// PROPS
-// =========================
-let { label, count, icon, image, done = false, badge, active = false }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { label, count, icon, image, done = false, badge, active = false }: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let auto = $derived(active === "auto");
-let on = $derived(active === true);
+	// =========================
+	// DERIVED
+	// =========================
+	let auto = $derived(active === "auto");
+	let on = $derived(active === true);
 </script>
 
 <!-- =========================== -->
@@ -76,7 +76,9 @@ let on = $derived(active === true);
 {label}
 
 {#if badge}
-	<span class="text-primary text-[10px] font-semibold tracking-wide whitespace-nowrap uppercase">{badge}</span>
+	<span class="text-primary text-[10px] font-semibold tracking-wide whitespace-nowrap uppercase"
+		>{badge}</span
+	>
 {/if}
 
 {#if count != null}
@@ -89,7 +91,8 @@ let on = $derived(active === true);
 			"inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] leading-none font-medium tabular-nums",
 			"bg-muted-foreground/15 text-muted-foreground",
 			on && "bg-brand/14 text-brand",
-			auto && "group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",
+			auto &&
+				"group-data-[state=active]/segment:bg-brand/14 group-data-[state=active]/segment:text-brand",
 		)}
 	>
 		{count}

package/src/components/segmented/segmented-filter.svelte

@@ -1,85 +1,89 @@
 <script lang="ts" generics="T extends string">
-// =========================
-// IMPORTS
-// =========================
-import { cn } from "../../lib/utils.js";
-import Segment from "./segment.svelte";
-import type { TabDef } from "./animated-tabs.svelte";
-import SegmentedTrack from "./segmented-track.svelte";
-import SegmentedOverflow from "./segmented-overflow.svelte";
-import { SEGMENT_MAX, resolveSegmentMax, splitSegments } from "./collapse.js";
-import { segmentedTriggerClass } from "./segmented.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../../lib/utils.js";
+	import Segment from "./segment.svelte";
+	import type { TabDef } from "./animated-tabs.svelte";
+	import SegmentedTrack from "./segmented-track.svelte";
+	import SegmentedOverflow from "./segmented-overflow.svelte";
+	import {
+		SEGMENT_MAX,
+		resolveSegmentMax,
+		splitSegments,
+	} from "./collapse.js";
+	import { segmentedTriggerClass } from "./segmented.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	// WHY: picks which rows are listed, with no panel of its own. That's a
-	// segmented control, not a tab set.
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// WHY: picks which rows are listed, with no panel of its own. That's a
+		// segmented control, not a tab set.
 
-	// WHY not `AnimatedTabs`: a strip with no tabpanel is a `group` of `aria-pressed`
-	// toggles. "Tab 1 of 4" sends a screen reader looking for a panel.
+		// WHY not `AnimatedTabs`: a strip with no tabpanel is a `group` of `aria-pressed`
+		// toggles. "Tab 1 of 4" sends a screen reader looking for a panel.
 
-	// WHY `TabDef`: an option and a tab were the same five fields written twice.
-	options: readonly TabDef<T>[];
-	value: T;
-	// For a caller whose value is derived and can't be bound. Same contract as
-	// `AnimatedTabs`, so the two are picked by ARIA alone.
-	onValueChange?: (value: T) => void;
-	// Count per option, keyed by value. Merged over `options[].count`, because
-	// the counts usually arrive from the data while the labels are a constant.
-	counts?: Partial<Record<T, number>>;
-	ariaLabel: string;
-	/** Fill the row rather than sit at its natural width. On for the list-page
-	 *  filter strip, off for a segment sitting in a toolbar beside others. */
-	block?: boolean;
-	/** Objects the row may draw before its tail becomes a menu. See `collapse.ts`.
-	 *  `"none"` never folds. */
-	max?: number | "none";
-	/** What the menu segment says. Translate at the call site. */
-	moreLabel?: string;
-	class?: string;
-};
+		// WHY `TabDef`: an option and a tab were the same five fields written twice.
+		options: readonly TabDef<T>[];
+		value: T;
+		// For a caller whose value is derived and can't be bound. Same contract as
+		// `AnimatedTabs`, so the two are picked by ARIA alone.
+		onValueChange?: (value: T) => void;
+		// Count per option, keyed by value. Merged over `options[].count`, because
+		// the counts usually arrive from the data while the labels are a constant.
+		counts?: Partial<Record<T, number>>;
+		ariaLabel: string;
+		/** Fill the row rather than sit at its natural width. On for the list-page
+		 *  filter strip, off for a segment sitting in a toolbar beside others. */
+		block?: boolean;
+		/** Objects the row may draw before its tail becomes a menu. See `collapse.ts`.
+		 *  `"none"` never folds. */
+		max?: number | "none";
+		/** What the menu segment says. Translate at the call site. */
+		moreLabel?: string;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	options,
-	value = $bindable(),
-	onValueChange,
-	counts,
-	ariaLabel,
-	block = true,
-	max = SEGMENT_MAX,
-	moreLabel,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		options,
+		value = $bindable(),
+		onValueChange,
+		counts,
+		ariaLabel,
+		block = true,
+		max = SEGMENT_MAX,
+		moreLabel,
+		class: className,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
+	// =========================
+	// DERIVED
+	// =========================
 
-// Counts arrive from data, labels are constant. Merged once here, so the pill
-// and the overflow hint say the same thing.
-let merged = $derived(
-	options.map((option) => {
-		const count = counts?.[option.value] ?? option.count;
-		return count === option.count ? option : { ...option, count };
-	}),
-);
-let split = $derived(
-	splitSegments(
-		merged,
-		resolveSegmentMax(max),
-		merged.findIndex((option) => option.value === value),
-	),
-);
+	// Counts arrive from data, labels are constant. Merged once here, so the pill
+	// and the overflow hint say the same thing.
+	let merged = $derived(
+		options.map((option) => {
+			const count = counts?.[option.value] ?? option.count;
+			return count === option.count ? option : { ...option, count };
+		}),
+	);
+	let split = $derived(
+		splitSegments(
+			merged,
+			resolveSegmentMax(max),
+			merged.findIndex((option) => option.value === value),
+		),
+	);
 
-function pick(next: T) {
-	value = next;
-	onValueChange?.(next);
-}
+	function pick(next: T) {
+		value = next;
+		onValueChange?.(next);
+	}
 </script>
 
 <!-- =========================== -->
@@ -114,12 +118,7 @@ function pick(next: T) {
 		{/each}
 		{#snippet after()}
 			{#if split.hidden.length > 0}
-				<SegmentedOverflow
-					items={split.hidden}
-					onSelect={pick}
-					label={moreLabel}
-					fill={block}
-				/>
+				<SegmentedOverflow items={split.hidden} onSelect={pick} label={moreLabel} fill={block} />
 			{/if}
 		{/snippet}
 	</SegmentedTrack>

package/src/components/segmented/segmented-nav.svelte

@@ -1,52 +1,46 @@
 <script lang="ts" module>
-import type { SegmentContent } from "./segment.svelte";
+	import type { SegmentContent } from "./segment.svelte";
 
-/** One destination. See `SegmentContent` for everything a segment can say. */
-export type SegmentedNavItem = SegmentContent & { href: string };
+	/** One destination. See `SegmentContent` for everything a segment can say. */
+	export type SegmentedNavItem = SegmentContent & { href: string };
 </script>
 
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { cn } from "../../lib/utils.js";
-import Segment from "./segment.svelte";
-import SegmentedTrack from "./segmented-track.svelte";
-import { segmentedTriggerClass } from "./segmented.js";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "../../lib/utils.js";
+	import Segment from "./segment.svelte";
+	import SegmentedTrack from "./segmented-track.svelte";
+	import { segmentedTriggerClass } from "./segmented.js";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	// WHY a third component: tabs are a `tablist`, filters a `group` of toggles,
-	// and this goes to sibling pages, so it's a `nav` of links with `aria-current`.
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		// WHY a third component: tabs are a `tablist`, filters a `group` of toggles,
+		// and this goes to sibling pages, so it's a `nav` of links with `aria-current`.
 
-	// Links give middle-click, bookmarks and the back button. The look comes from
-	// `segmented.ts` and `segment.svelte`, so nothing here can drift.
-	items: readonly SegmentedNavItem[];
-	/** The href that is current. Compared after trailing slashes are dropped. */
-	current: string;
-	ariaLabel: string;
-	/** Fill the row rather than sit at its natural width. */
-	block?: boolean;
-	class?: string;
-};
+		// Links give middle-click, bookmarks and the back button. The look comes from
+		// `segmented.ts` and `segment.svelte`, so nothing here can drift.
+		items: readonly SegmentedNavItem[];
+		/** The href that is current. Compared after trailing slashes are dropped. */
+		current: string;
+		ariaLabel: string;
+		/** Fill the row rather than sit at its natural width. */
+		block?: boolean;
+		class?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	items,
-	current,
-	ariaLabel,
-	block = false,
-	class: className,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { items, current, ariaLabel, block = false, class: className }: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
-let currentHref = $derived(current.replace(/\/$/, ""));
+	// =========================
+	// DERIVED
+	// =========================
+	let currentHref = $derived(current.replace(/\/$/, ""));
 </script>
 
 <!-- =========================== -->

package/src/components/segmented/segmented-overflow.svelte

@@ -1,60 +1,63 @@
 <script lang="ts" generics="V extends string">
-// =========================
-// IMPORTS
-// =========================
-import { CaretDown } from "phosphor-svelte";
-import { Picker } from "../picker/index.js";
-import { cn } from "../../lib/utils.js";
-import { segmentedTriggerClass, type SegmentedVariant } from "./segmented.js";
-import type { SegmentContent } from "./segment.svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import { CaretDown } from "phosphor-svelte";
+	import { Picker } from "../picker/index.js";
+	import { cn } from "../../lib/utils.js";
+	import {
+		segmentedTriggerClass,
+		type SegmentedVariant,
+	} from "./segmented.js";
+	import type { SegmentContent } from "./segment.svelte";
 
-// =========================
-// TYPES
-// =========================
-/** The last object in an overfull strip: one segment that opens the rest. */
+	// =========================
+	// TYPES
+	// =========================
+	/** The last object in an overfull strip: one segment that opens the rest. */
 
-// WHY the `Picker`: every "pick one of these" goes there, so keys and
-// filtering match the command palette.
+	// WHY the `Picker`: every "pick one of these" goes there, so keys and
+	// filtering match the command palette.
 
-// WHY never active: `splitSegments` pulls the current item into a visible slot,
-// so this never fights bits-ui's `data-state="open"`.
-interface Props {
-	items: readonly (SegmentContent & { value: V })[];
-	onSelect: (value: V) => void;
-	/** What the segment says. Translate at the call site. */
-	label?: string;
-	fill?: boolean;
-	variant?: SegmentedVariant;
-	searchPlaceholder?: string;
-	emptyLabel?: string;
-};
+	// WHY never active: `splitSegments` pulls the current item into a visible slot,
+	// so this never fights bits-ui's `data-state="open"`.
+	interface Props {
+		items: readonly (SegmentContent & { value: V })[];
+		onSelect: (value: V) => void;
+		/** What the segment says. Translate at the call site. */
+		label?: string;
+		fill?: boolean;
+		variant?: SegmentedVariant;
+		searchPlaceholder?: string;
+		emptyLabel?: string;
+	}
 
-// =========================
-// PROPS
-// =========================
-let {
-	items,
-	onSelect,
-	label = "More",
-	fill = false,
-	variant = "pill",
-	searchPlaceholder,
-	emptyLabel,
-}: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		items,
+		onSelect,
+		label = "More",
+		fill = false,
+		variant = "pill",
+		searchPlaceholder,
+		emptyLabel,
+	}: Props = $props();
 
-// =========================
-// DERIVED
-// =========================
+	// =========================
+	// DERIVED
+	// =========================
 
-// A count rides as the row's hint, where the strip draws it as a pill.
-let options = $derived(
-	items.map((item) => ({
-		value: item.value,
-		label: item.label,
-		hint: item.count != null ? String(item.count) : undefined,
-		icon: item.icon,
-	})),
-);
+	// A count rides as the row's hint, where the strip draws it as a pill.
+	let options = $derived(
+		items.map((item) => ({
+			value: item.value,
+			label: item.label,
+			hint: item.count != null ? String(item.count) : undefined,
+			icon: item.icon,
+		})),
+	);
 </script>
 
 <!-- =========================== -->