bref-ui 2.1.4 → 2.2.0

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/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.4",
+	"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/readme.md

@@ -166,19 +166,6 @@ Run `bun run dev` in the repository for the gallery and current API documentatio
 Explore the [component exports](src/lib/index.ts) and [component source](src/lib)
 to inspect and customize the implementation.
 
-## Themes and examples
-
-Explore [bref-ui-themes](https://github.com/feuersteiner/bref-ui-themes) for reusable
-Svelte themes and interactive example sites built with Bref-ui. Browse the
-[live showcase](https://feuersteiner.github.io/bref-ui-themes/) or try the demos:
-
-- [Relay](https://feuersteiner.github.io/bref-ui-themes/relay): a project and task
-  management app with search, filtering and task editing.
-- [Forma](https://feuersteiner.github.io/bref-ui-themes/forma): a furniture store
-  with product filtering, a shopping cart and simulated checkout.
-- [Elsewhere](https://feuersteiner.github.io/bref-ui-themes/elsewhere): a website
-  audit app with simulated runs, history and finding review.
-
 ## Roadmap
 
 - **Component foundation:** inputs/textarea, pills, tree views, loading/progress,

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,