bref-ui 2.1.3 → 2.2.0

package/dist/checkbox/checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
 	import { elasticOut } from 'svelte/easing';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import Icon from '../icon/icon.svelte';
 	import type { CheckboxProps } from './types.js';
 
@@ -10,7 +11,14 @@
 <div data-checkbox data-size={size}>
 	<input {...attributes} type="checkbox" bind:checked />
 	{#if checked}
-		<span aria-hidden="true" transition:fly|global={{ duration: 350, y: -6, easing: elasticOut }}>
+		<span
+			aria-hidden="true"
+			transition:fly={{
+				duration: prefersReducedMotion.current ? 0 : 350,
+				y: prefersReducedMotion.current ? 0 : -6,
+				easing: elasticOut
+			}}
+		>
 			<Icon name="check" style="font-variation-settings: 'wght' 500" />
 		</span>
 	{/if}

package/dist/combobox/input.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { ComboboxInputProps } from './types.js';
-declare const Input: import("svelte").Component<ComboboxInputProps, {}, "open" | "input" | "activeId">;
+declare const Input: import("svelte").Component<ComboboxInputProps, {}, "input" | "open" | "activeId">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/dialog/header.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Button from '../button/button.svelte';
 	import Icon from '../icon/icon.svelte';
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import type { DialogHeaderProps } from './types.js';
 
 	let { title, description, icon, dismissible, id, onDismiss }: DialogHeaderProps = $props();
@@ -8,10 +10,18 @@
 
 <header>
 	<div>
-		<div data-title>
-			{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
-			<h2 id={`${id}-title`}>{title}</h2>
-		</div>
+		{#key `${icon?.name ?? ''}:${title}`}
+			<div
+				data-title
+				in:fly={{
+					y: prefersReducedMotion.current ? 0 : 8,
+					duration: prefersReducedMotion.current ? 0 : 180
+				}}
+			>
+				{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
+				<h2 id={`${id}-title`}>{title}</h2>
+			</div>
+		{/key}
 		{#if description}<p id={`${id}-description`}>{description}</p>{/if}
 	</div>
 	{#if dismissible}

package/dist/index.d.ts

@@ -18,3 +18,4 @@ export { default as Pill } from './pill/pill.svelte';
 export { default as PillGroup } from './pill-group/pill-group.svelte';
 export { default as PillChoiceGroup } from './pill-choice-group/pill-choice-group.svelte';
 export { default as Select } from './select/select.svelte';
+export { default as Tabs } from './tabs/tabs.svelte';

package/dist/index.js

@@ -18,3 +18,4 @@ export { default as Pill } from './pill/pill.svelte';
 export { default as PillGroup } from './pill-group/pill-group.svelte';
 export { default as PillChoiceGroup } from './pill-choice-group/pill-choice-group.svelte';
 export { default as Select } from './select/select.svelte';
+export { default as Tabs } from './tabs/tabs.svelte';

package/dist/tabs/item.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
+	import Icon from '../icon/icon.svelte';
+	import type { TabItemProps } from './types.js';
+
+	let {
+		label,
+		icon,
+		disabled = false,
+		selected,
+		orientation = 'horizontal',
+		size = 'fit',
+		filled = false,
+		onSelect,
+		transitionIn = () => ({}),
+		transitionOut = () => ({})
+	}: TabItemProps = $props();
+	const smallScreen = new MediaQuery('(max-width: 575px)', false);
+	const showLabel = $derived(!smallScreen.current || (orientation === 'horizontal' && selected));
+</script>
+
+<button
+	type="button"
+	role="tab"
+	aria-label={label}
+	aria-selected={selected ?? false}
+	data-size={orientation === 'horizontal' ? size : undefined}
+	data-orientation={orientation}
+	data-icon-only={!showLabel}
+	tabindex={selected === undefined ? undefined : selected ? 0 : -1}
+	{disabled}
+	onclick={onSelect}
+>
+	<Icon name={icon} {filled} />
+	{#if showLabel}<span>{label}</span>{/if}
+	{#if selected}
+		<i aria-hidden="true" in:transitionIn out:transitionOut></i>
+	{/if}
+</button>
+
+<style>
+	button {
+		position: relative;
+		box-sizing: border-box;
+		display: inline-flex;
+		flex: 0 0 auto;
+		align-items: center;
+		gap: 0.5rem;
+		width: max-content;
+		min-width: 44px;
+		min-height: 48px;
+		padding: 0.75rem 1rem;
+		border: 0;
+		background: transparent;
+		color: var(--color-muted);
+		font: inherit;
+		font-weight: 500;
+		line-height: 1.5;
+		text-align: start;
+		white-space: nowrap;
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background-color 150ms ease;
+	}
+	button[data-size='fill'] {
+		flex: 1 1 auto;
+		width: auto;
+		max-width: 100%;
+		padding-inline: 0.5rem;
+	}
+	button[data-orientation='vertical'] {
+		width: 100%;
+		max-width: 100%;
+	}
+	button[data-icon-only='true'] {
+		justify-content: center;
+		padding-inline: 0.75rem;
+	}
+	button[aria-selected='true'],
+	button:hover:not(:disabled) {
+		color: var(--color-foreground);
+	}
+	button:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-foreground) 3%, transparent);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -4px;
+	}
+	button:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	span {
+		display: block;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	i {
+		position: absolute;
+		inset-block: var(--tabs-indicator-block-start) 0;
+		inset-inline: var(--tabs-indicator-inline-start) 0;
+		width: var(--tabs-indicator-width);
+		height: var(--tabs-indicator-height);
+		background: var(--color-primary);
+		pointer-events: none;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		button {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button[aria-selected='true'] {
+			outline: 2px solid Highlight;
+			outline-offset: -2px;
+		}
+		button:focus-visible {
+			outline-style: dashed;
+		}
+	}
+</style>

package/dist/tabs/item.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TabItemProps } from './types.js';
+declare const Item: import("svelte").Component<TabItemProps, {}, "">;
+type Item = ReturnType<typeof Item>;
+export default Item;

package/dist/tabs/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "tabs",
+	"files": ["tabs.svelte", "item.svelte"],
+	"exports": { "Tabs": "tabs.svelte" },
+	"dependencies": ["icon"]
+}

package/dist/tabs/tabs.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+	import Item from './item.svelte';
+	import type { TabsProps } from './types.js';
+
+	let {
+		items,
+		orientation = 'horizontal',
+		size = 'fit',
+		value = $bindable(),
+		onChange,
+		label = 'Tabs',
+		filled = false,
+		transitionIn,
+		transitionOut
+	}: TabsProps = $props();
+	let strip: HTMLDivElement | undefined = $state();
+	const layout = $derived(orientation === 'horizontal' ? { orientation, size } : { orientation });
+	const [send, receive] = crossfade({
+		duration: () => (matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 220),
+		easing: cubicOut
+	});
+	const intro = (node: HTMLElement) =>
+		transitionIn?.(node) ?? receive(node, { key: 'selected-tab' });
+	const outro = (node: HTMLElement) => transitionOut?.(node) ?? send(node, { key: 'selected-tab' });
+	const select = async (id: string) => {
+		if (id === value || !items.some((item) => item.id === id && !item.disabled)) return;
+		value = id;
+		onChange?.(id);
+		await tick();
+		strip
+			?.querySelector<HTMLButtonElement>('[aria-selected="true"]')
+			?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+	};
+	const navigate = (event: KeyboardEvent & { currentTarget: HTMLDivElement }) => {
+		const buttons = [
+			...event.currentTarget.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')
+		];
+		const index = buttons.indexOf(event.target as HTMLButtonElement);
+		if (index < 0) return;
+		const vertical = orientation === 'vertical';
+		const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+		const nextKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+		const previousKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+		let next: number;
+		if (event.key === 'Home') next = 0;
+		else if (event.key === 'End') next = buttons.length - 1;
+		else if (event.key === nextKey) next = (index + 1) % buttons.length;
+		else if (event.key === previousKey) next = (index - 1 + buttons.length) % buttons.length;
+		else return;
+		event.preventDefault();
+		buttons[next].focus();
+		buttons[next].click();
+	};
+</script>
+
+<div
+	bind:this={strip}
+	role="tablist"
+	tabindex={-1}
+	aria-label={label}
+	aria-orientation={orientation}
+	data-orientation={orientation}
+	data-size={orientation === 'horizontal' ? size : undefined}
+	onkeydown={navigate}
+>
+	{#each items as item (item.id)}
+		<Item
+			{...item}
+			selected={value === undefined ? undefined : value === item.id}
+			{...layout}
+			{filled}
+			onSelect={() => select(item.id)}
+			transitionIn={intro}
+			transitionOut={outro}
+		/>
+	{/each}
+</div>
+
+<style>
+	div {
+		--tabs-indicator-block-start: auto;
+		--tabs-indicator-inline-start: 0;
+		--tabs-indicator-width: auto;
+		--tabs-indicator-height: 2px;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-self: start;
+		align-items: stretch;
+		justify-self: start;
+		width: max-content;
+		max-width: 100%;
+		min-width: 0;
+		border: 0;
+		border-block-end: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
+		overflow: auto;
+		overscroll-behavior-inline: contain;
+		scrollbar-width: thin;
+	}
+	div[data-size='fill'] {
+		width: 100%;
+	}
+	div[data-orientation='vertical'] {
+		--tabs-indicator-block-start: 0;
+		--tabs-indicator-inline-start: auto;
+		--tabs-indicator-width: 2px;
+		--tabs-indicator-height: auto;
+		flex-direction: column;
+		max-height: 100%;
+		min-height: 0;
+		border-block-end: 0;
+		border-inline-end: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
+		overflow-x: hidden;
+		overflow-y: auto;
+		overscroll-behavior-block: contain;
+	}
+	@media (forced-colors: active) {
+		div {
+			border-color: ButtonBorder;
+		}
+	}
+</style>

package/dist/tabs/tabs.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TabsProps } from './types.js';
+declare const Tabs: import("svelte").Component<TabsProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/tabs/types.d.ts

@@ -0,0 +1,48 @@
+import type { Dimension, IconName } from '../types.ts';
+import type { TransitionConfig } from 'svelte/transition';
+/** An indicator transition, including deferred Svelte transition configurations. */
+export type TabTransition = (node: HTMLElement) => TransitionConfig | (() => TransitionConfig);
+/** Data for a tab in the strip. */
+export interface TabItemDataProps {
+    /** Unique tab ID used for selection. */
+    id: string;
+    /** Accessible name and tab text; small screens show only the selected horizontal label. */
+    label: string;
+    /** Material Symbols icon displayed beside the label. */
+    icon: IconName;
+    /** Prevent selection of this tab. */
+    disabled?: boolean;
+}
+/** Props for a rendered tab item, including its selection state. */
+export type TabItemProps = TabItemDataProps & {
+    /** Whether this item is selected, derived from the strip's value. */
+    selected?: boolean;
+    /** Use filled glyphs for all tab icons. */
+    filled?: boolean;
+    /** Select this item when activated. */
+    onSelect: () => void;
+    /** Animate the selected indicator into this item. */
+    transitionIn?: TabTransition;
+    /** Animate the selected indicator out of this item. */
+    transitionOut?: TabTransition;
+} & OrientationProps;
+type OrientationProps = {
+    orientation?: 'horizontal';
+    /** Fit content and scroll on overflow, or fill the parent and truncate labels. */
+    size?: Dimension;
+} | {
+    orientation: 'vertical';
+    size?: never;
+};
+/** A horizontal or vertical tab strip; the consumer owns the content. */
+export type TabsProps = {
+    /** Tabs in display order. */
+    items: readonly TabItemDataProps[];
+    /** ID of the selected tab. */
+    value?: string;
+    /** Called with the tab ID when user interaction changes selection. */
+    onChange?: (id: string) => void;
+    /** Accessible name for the tab list. */
+    label?: string;
+} & OrientationProps & Pick<TabItemProps, 'filled' | 'transitionIn' | 'transitionOut'>;
+export {};

package/dist/tabs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/types.d.ts

@@ -5,6 +5,7 @@ export type StatusColor = 'info' | 'success' | 'warning' | 'error';
 export type Color = 'primary' | 'secondary' | 'foreground' | 'background' | 'muted' | StatusColor;
 export type Orientation = 'horizontal' | 'vertical';
 export type Dimension = 'fit' | 'fill';
+export type { TabItemProps, TabItemDataProps, TabsProps, TabTransition } from './tabs/types.js';
 export type { ButtonProps } from './button/types.js';
 export type { ComboboxProps, ComboboxNativeProps, ComboboxInputProps, ComboboxListProps, ComboboxOptionProps, ComboboxFormProps } from './combobox/types.js';
 export type * from './icon/types.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "2.1.3",
+	"version": "2.2.0",
 	"description": "A Svelte-first, human-first, agent-first UI library for building beautiful sites and apps with components you can make your own.",
 	"license": "MIT",
 	"repository": {

package/src/lib/checkbox/checkbox.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { fly } from 'svelte/transition';
 	import { elasticOut } from 'svelte/easing';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import Icon from '../icon/icon.svelte';
 	import type { CheckboxProps } from './types.js';
 
@@ -10,7 +11,14 @@
 <div data-checkbox data-size={size}>
 	<input {...attributes} type="checkbox" bind:checked />
 	{#if checked}
-		<span aria-hidden="true" transition:fly|global={{ duration: 350, y: -6, easing: elasticOut }}>
+		<span
+			aria-hidden="true"
+			transition:fly={{
+				duration: prefersReducedMotion.current ? 0 : 350,
+				y: prefersReducedMotion.current ? 0 : -6,
+				easing: elasticOut
+			}}
+		>
 			<Icon name="check" style="font-variation-settings: 'wght' 500" />
 		</span>
 	{/if}

package/src/lib/dialog/header.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Button from '../button/button.svelte';
 	import Icon from '../icon/icon.svelte';
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import type { DialogHeaderProps } from './types.js';
 
 	let { title, description, icon, dismissible, id, onDismiss }: DialogHeaderProps = $props();
@@ -8,10 +10,18 @@
 
 <header>
 	<div>
-		<div data-title>
-			{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
-			<h2 id={`${id}-title`}>{title}</h2>
-		</div>
+		{#key `${icon?.name ?? ''}:${title}`}
+			<div
+				data-title
+				in:fly={{
+					y: prefersReducedMotion.current ? 0 : 8,
+					duration: prefersReducedMotion.current ? 0 : 180
+				}}
+			>
+				{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
+				<h2 id={`${id}-title`}>{title}</h2>
+			</div>
+		{/key}
 		{#if description}<p id={`${id}-description`}>{description}</p>{/if}
 	</div>
 	{#if dismissible}

package/src/lib/index.ts

@@ -18,3 +18,4 @@ export { default as Pill } from './pill/pill.svelte';
 export { default as PillGroup } from './pill-group/pill-group.svelte';
 export { default as PillChoiceGroup } from './pill-choice-group/pill-choice-group.svelte';
 export { default as Select } from './select/select.svelte';
+export { default as Tabs } from './tabs/tabs.svelte';

package/src/lib/tabs/item.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
+	import Icon from '../icon/icon.svelte';
+	import type { TabItemProps } from './types.js';
+
+	let {
+		label,
+		icon,
+		disabled = false,
+		selected,
+		orientation = 'horizontal',
+		size = 'fit',
+		filled = false,
+		onSelect,
+		transitionIn = () => ({}),
+		transitionOut = () => ({})
+	}: TabItemProps = $props();
+	const smallScreen = new MediaQuery('(max-width: 575px)', false);
+	const showLabel = $derived(!smallScreen.current || (orientation === 'horizontal' && selected));
+</script>
+
+<button
+	type="button"
+	role="tab"
+	aria-label={label}
+	aria-selected={selected ?? false}
+	data-size={orientation === 'horizontal' ? size : undefined}
+	data-orientation={orientation}
+	data-icon-only={!showLabel}
+	tabindex={selected === undefined ? undefined : selected ? 0 : -1}
+	{disabled}
+	onclick={onSelect}
+>
+	<Icon name={icon} {filled} />
+	{#if showLabel}<span>{label}</span>{/if}
+	{#if selected}
+		<i aria-hidden="true" in:transitionIn out:transitionOut></i>
+	{/if}
+</button>
+
+<style>
+	button {
+		position: relative;
+		box-sizing: border-box;
+		display: inline-flex;
+		flex: 0 0 auto;
+		align-items: center;
+		gap: 0.5rem;
+		width: max-content;
+		min-width: 44px;
+		min-height: 48px;
+		padding: 0.75rem 1rem;
+		border: 0;
+		background: transparent;
+		color: var(--color-muted);
+		font: inherit;
+		font-weight: 500;
+		line-height: 1.5;
+		text-align: start;
+		white-space: nowrap;
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background-color 150ms ease;
+	}
+	button[data-size='fill'] {
+		flex: 1 1 auto;
+		width: auto;
+		max-width: 100%;
+		padding-inline: 0.5rem;
+	}
+	button[data-orientation='vertical'] {
+		width: 100%;
+		max-width: 100%;
+	}
+	button[data-icon-only='true'] {
+		justify-content: center;
+		padding-inline: 0.75rem;
+	}
+	button[aria-selected='true'],
+	button:hover:not(:disabled) {
+		color: var(--color-foreground);
+	}
+	button:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-foreground) 3%, transparent);
+	}
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -4px;
+	}
+	button:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	span {
+		display: block;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	i {
+		position: absolute;
+		inset-block: var(--tabs-indicator-block-start) 0;
+		inset-inline: var(--tabs-indicator-inline-start) 0;
+		width: var(--tabs-indicator-width);
+		height: var(--tabs-indicator-height);
+		background: var(--color-primary);
+		pointer-events: none;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		button {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		button[aria-selected='true'] {
+			outline: 2px solid Highlight;
+			outline-offset: -2px;
+		}
+		button:focus-visible {
+			outline-style: dashed;
+		}
+	}
+</style>

package/src/lib/tabs/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "tabs",
+	"files": ["tabs.svelte", "item.svelte"],
+	"exports": { "Tabs": "tabs.svelte" },
+	"dependencies": ["icon"]
+}

package/src/lib/tabs/tabs.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { crossfade } from 'svelte/transition';
+	import Item from './item.svelte';
+	import type { TabsProps } from './types.js';
+
+	let {
+		items,
+		orientation = 'horizontal',
+		size = 'fit',
+		value = $bindable(),
+		onChange,
+		label = 'Tabs',
+		filled = false,
+		transitionIn,
+		transitionOut
+	}: TabsProps = $props();
+	let strip: HTMLDivElement | undefined = $state();
+	const layout = $derived(orientation === 'horizontal' ? { orientation, size } : { orientation });
+	const [send, receive] = crossfade({
+		duration: () => (matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 220),
+		easing: cubicOut
+	});
+	const intro = (node: HTMLElement) =>
+		transitionIn?.(node) ?? receive(node, { key: 'selected-tab' });
+	const outro = (node: HTMLElement) => transitionOut?.(node) ?? send(node, { key: 'selected-tab' });
+	const select = async (id: string) => {
+		if (id === value || !items.some((item) => item.id === id && !item.disabled)) return;
+		value = id;
+		onChange?.(id);
+		await tick();
+		strip
+			?.querySelector<HTMLButtonElement>('[aria-selected="true"]')
+			?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+	};
+	const navigate = (event: KeyboardEvent & { currentTarget: HTMLDivElement }) => {
+		const buttons = [
+			...event.currentTarget.querySelectorAll<HTMLButtonElement>('button:not(:disabled)')
+		];
+		const index = buttons.indexOf(event.target as HTMLButtonElement);
+		if (index < 0) return;
+		const vertical = orientation === 'vertical';
+		const rtl = getComputedStyle(event.currentTarget).direction === 'rtl';
+		const nextKey = vertical ? 'ArrowDown' : rtl ? 'ArrowLeft' : 'ArrowRight';
+		const previousKey = vertical ? 'ArrowUp' : rtl ? 'ArrowRight' : 'ArrowLeft';
+		let next: number;
+		if (event.key === 'Home') next = 0;
+		else if (event.key === 'End') next = buttons.length - 1;
+		else if (event.key === nextKey) next = (index + 1) % buttons.length;
+		else if (event.key === previousKey) next = (index - 1 + buttons.length) % buttons.length;
+		else return;
+		event.preventDefault();
+		buttons[next].focus();
+		buttons[next].click();
+	};
+</script>
+
+<div
+	bind:this={strip}
+	role="tablist"
+	tabindex={-1}
+	aria-label={label}
+	aria-orientation={orientation}
+	data-orientation={orientation}
+	data-size={orientation === 'horizontal' ? size : undefined}
+	onkeydown={navigate}
+>
+	{#each items as item (item.id)}
+		<Item
+			{...item}
+			selected={value === undefined ? undefined : value === item.id}
+			{...layout}
+			{filled}
+			onSelect={() => select(item.id)}
+			transitionIn={intro}
+			transitionOut={outro}
+		/>
+	{/each}
+</div>
+
+<style>
+	div {
+		--tabs-indicator-block-start: auto;
+		--tabs-indicator-inline-start: 0;
+		--tabs-indicator-width: auto;
+		--tabs-indicator-height: 2px;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-self: start;
+		align-items: stretch;
+		justify-self: start;
+		width: max-content;
+		max-width: 100%;
+		min-width: 0;
+		border: 0;
+		border-block-end: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
+		overflow: auto;
+		overscroll-behavior-inline: contain;
+		scrollbar-width: thin;
+	}
+	div[data-size='fill'] {
+		width: 100%;
+	}
+	div[data-orientation='vertical'] {
+		--tabs-indicator-block-start: 0;
+		--tabs-indicator-inline-start: auto;
+		--tabs-indicator-width: 2px;
+		--tabs-indicator-height: auto;
+		flex-direction: column;
+		max-height: 100%;
+		min-height: 0;
+		border-block-end: 0;
+		border-inline-end: 1px solid color-mix(in srgb, var(--color-foreground) 12%, transparent);
+		overflow-x: hidden;
+		overflow-y: auto;
+		overscroll-behavior-block: contain;
+	}
+	@media (forced-colors: active) {
+		div {
+			border-color: ButtonBorder;
+		}
+	}
+</style>

package/src/lib/tabs/types.ts

@@ -0,0 +1,55 @@
+import type { Dimension, IconName } from '../types.ts';
+import type { TransitionConfig } from 'svelte/transition';
+
+/** An indicator transition, including deferred Svelte transition configurations. */
+export type TabTransition = (node: HTMLElement) => TransitionConfig | (() => TransitionConfig);
+
+/** Data for a tab in the strip. */
+export interface TabItemDataProps {
+	/** Unique tab ID used for selection. */
+	id: string;
+	/** Accessible name and tab text; small screens show only the selected horizontal label. */
+	label: string;
+	/** Material Symbols icon displayed beside the label. */
+	icon: IconName;
+	/** Prevent selection of this tab. */
+	disabled?: boolean;
+}
+
+/** Props for a rendered tab item, including its selection state. */
+export type TabItemProps = TabItemDataProps & {
+	/** Whether this item is selected, derived from the strip's value. */
+	selected?: boolean;
+	/** Use filled glyphs for all tab icons. */
+	filled?: boolean;
+	/** Select this item when activated. */
+	onSelect: () => void;
+	/** Animate the selected indicator into this item. */
+	transitionIn?: TabTransition;
+	/** Animate the selected indicator out of this item. */
+	transitionOut?: TabTransition;
+} & OrientationProps;
+
+type OrientationProps =
+	| {
+			orientation?: 'horizontal';
+			/** Fit content and scroll on overflow, or fill the parent and truncate labels. */
+			size?: Dimension;
+	  }
+	| {
+			orientation: 'vertical';
+			size?: never;
+	  };
+
+/** A horizontal or vertical tab strip; the consumer owns the content. */
+export type TabsProps = {
+	/** Tabs in display order. */
+	items: readonly TabItemDataProps[];
+	/** ID of the selected tab. */
+	value?: string;
+	/** Called with the tab ID when user interaction changes selection. */
+	onChange?: (id: string) => void;
+	/** Accessible name for the tab list. */
+	label?: string;
+} & OrientationProps &
+	Pick<TabItemProps, 'filled' | 'transitionIn' | 'transitionOut'>;

package/src/lib/types.ts

@@ -6,6 +6,7 @@ export type Color = 'primary' | 'secondary' | 'foreground' | 'background' | 'mut
 export type Orientation = 'horizontal' | 'vertical';
 export type Dimension = 'fit' | 'fill';
 
+export type { TabItemProps, TabItemDataProps, TabsProps, TabTransition } from './tabs/types.js';
 export type { ButtonProps } from './button/types.js';
 export type {
 	ComboboxProps,