@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/Switch.svelte

@@ -0,0 +1,105 @@
+<script module lang="ts">
+	/** What .switch is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'switch';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {
+		block: 'Fill the width, the items sharing it equally.'
+	} as const;
+	export const PARTS = ['item', 'input', 'indicator'] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * One choice among a few, as a pill track: a radio group in disguise.
+	 *
+	 * `options` are strings, or `{ value, label, disabled }`. `value` is
+	 * bindable — it is the field's own value.
+	 *
+	 * An indicator slides from the old choice to the new one (`animated`,
+	 * off when the visitor asks for reduced motion).
+	 */
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	type Option = string | { value: string; label?: string; disabled?: boolean };
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onchange'> {
+		options: Option[];
+		/** The checked option's value. Bindable. */
+		value?: string;
+		/** The radios' name, for a form. */
+		name?: string;
+		/** The group's accessible name. */
+		label?: string;
+		/** After the user picked another option. */
+		onChange?: (value: string) => void;
+		/** Slide the checked look from one option to the next. */
+		animated?: boolean;
+		class?: string;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		options,
+		value = $bindable(),
+		name = `switch-${Math.random().toString(36).slice(2, 9)}`,
+		label,
+		onChange,
+		animated = true,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	let list = $derived(options.map((o) => (typeof o === 'string' ? { value: o, label: o, disabled: false } : { label: o.value, disabled: false, ...o })));
+
+	let root: HTMLDivElement | undefined = $state();
+	let x = $state(0);
+	let w = $state(0);
+
+	/* The indicator follows the checked item: measured after every change of
+	   value, and again whenever the track resizes (a font, a wrap). */
+	$effect(() => {
+		if (!animated || !root) return;
+		void value;
+		const measure = () => {
+			const item = root?.querySelector<HTMLElement>(`.${PREFIX}-item:has(:checked)`);
+			x = item?.offsetLeft ?? 0;
+			w = item?.offsetWidth ?? 0;
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		return () => observer.disconnect();
+	});
+</script>
+
+<div {...applied.rest} bind:this={root} class={classes} role="radiogroup" aria-label={label} style:--switch-x="{x}px" style:--switch-w="{w}px">
+	{#if animated}<span class="{PREFIX}-indicator" aria-hidden="true"></span>{/if}
+	{#each list as o (o.value)}
+		<label class="switch-item">
+			<input
+				type="radio"
+				class="switch-input"
+				{name}
+				value={o.value}
+				checked={value === o.value}
+				disabled={o.disabled}
+				onchange={() => {
+					value = o.value;
+					onChange?.(o.value);
+				}}
+			/>
+			{o.label}
+		</label>
+	{/each}
+</div>

package/dist/components/Switch.svelte.d.ts

@@ -0,0 +1,44 @@
+/** What .switch is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "switch";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {
+    readonly block: "Fill the width, the items sharing it equally.";
+};
+export declare const PARTS: readonly ["item", "input", "indicator"];
+/**
+     * One choice among a few, as a pill track: a radio group in disguise.
+     *
+     * `options` are strings, or `{ value, label, disabled }`. `value` is
+     * bindable — it is the field's own value.
+     *
+     * An indicator slides from the old choice to the new one (`animated`,
+     * off when the visitor asks for reduced motion).
+     */
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+type Option = string | {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+};
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLDivElement>, 'color' | 'onchange'> {
+    options: Option[];
+    /** The checked option's value. Bindable. */
+    value?: string;
+    /** The radios' name, for a form. */
+    name?: string;
+    /** The group's accessible name. */
+    label?: string;
+    /** After the user picked another option. */
+    onChange?: (value: string) => void;
+    /** Slide the checked look from one option to the next. */
+    animated?: boolean;
+    class?: string;
+}
+declare const Switch: import("svelte").Component<Props, {}, "value">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/Table.svelte

@@ -0,0 +1,243 @@
+<script module lang="ts">
+	/** What .table is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    The table draws its own head, rows and cells: every class below the
+	    root that is not a flag is a PART. */
+	export const PREFIX = 'table';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl']
+	} as const;
+
+	export const FLAGS = {
+		zebra: 'Fill every other row.',
+		hover: 'Fill the row under the pointer.',
+		pinned: 'Keep the head at the top while the rows scroll under it (give the table a `maxHeight`).',
+		loading: 'Fade the rows while new ones are on their way.'
+	} as const;
+	export const PARTS = [
+		'scroll',
+		'head',
+		'row',
+		'row-selected',
+		'row-dirty',
+		'cell',
+		'sort',
+		'sticky',
+		'sticky-last',
+		'empty'
+	] as const;
+
+	import type { Snippet } from 'svelte';
+	import type { EditableKind } from './Editable.svelte';
+
+	/** One column of a table. */
+	export interface TableColumn<Row = any> {
+		/** What identifies the column — and, by default, the field of a row it shows. */
+		key: string;
+		/** The header, as text or as a snippet. */
+		label?: string | Snippet;
+		/** The column's width, any CSS length (`20ch`, `12em`). A minimum: text wraps inside it. */
+		width?: string;
+		/** Pin the column to the start edge while the others scroll. */
+		sticky?: boolean;
+		/** Leave the column out. */
+		hidden?: boolean;
+		/** Make the header a button that asks for a sort on this column. */
+		sortable?: boolean;
+		/** How the cell's text lines up. */
+		align?: 'start' | 'center' | 'end';
+		/** The cell's text when there is no `cell` snippet. Defaults to `row[key]`. */
+		value?: (row: Row) => unknown;
+		/**
+		 * Make the cell editable in place with the editor for this shape of value
+		 * (an `Editable`). The edit is handed to `onEdit`. Ignored when a `cell`
+		 * snippet draws the cell — put an `Editable` in it yourself.
+		 */
+		edit?: EditableKind;
+	}
+
+	export type TableSortDirection = 'asc' | 'desc';
+	export interface TableSort {
+		key: string;
+		direction: TableSortDirection;
+	}
+</script>
+
+<script lang="ts" generics="Row">
+	/**
+	 * A real `<table>`. Columns are described once — width, sticky, sortable,
+	 * hidden — and each cell is the column's field, or whatever the `cell`
+	 * snippet draws. The rows are plain data: where they come from is not the
+	 * table's business.
+	 *
+	 * Selection, sorting and loading are states every table has, so they are
+	 * here as plain props — `selected`, `sort` / `onSort`, `loading` — and the
+	 * table only draws them.
+	 */
+	import type { HTMLTableAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+	import Editable from './Editable.svelte';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLTableAttributes {
+		/** The columns, in order. */
+		columns: TableColumn<Row>[];
+		/** The rows: your data, as is. */
+		rows?: Row[];
+		/** A row's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+		key?: (row: Row, index: number) => string;
+		/** How one cell is drawn. Without it, the cell is the column's value as text. */
+		cell?: Snippet<[Row, TableColumn<Row>, number]>;
+		/**
+		 * How a whole row is drawn, `<td>`s included — the escape hatch for a
+		 * row `cell` cannot express. The table still writes the `<tr>`.
+		 */
+		row?: Snippet<[Row, number]>;
+		/** Drawn in place of the rows when there are none. */
+		empty?: Snippet;
+		/** Keys of the rows to draw as selected. */
+		selected?: Iterable<string>;
+		/** Keys of the rows to draw as changed and not yet saved. */
+		dirty?: Iterable<string>;
+		/** The current sort, drawn on its header. */
+		sort?: TableSort;
+		/** A sortable header was clicked: ascending, then descending, then none. */
+		onSort?: (sort: TableSort | undefined) => void;
+		/** An editable cell (a column with `edit`) was changed: the row, the column's key, the new value. */
+		onEdit?: (row: Row, key: string, value: unknown) => void;
+		/** The scroll box's maximum height, for a long table with a pinned head. */
+		maxHeight?: string;
+		class?: string;
+	}
+
+	let {
+		columns,
+		rows = [],
+		key = (_row: Row, i: number) => String(i),
+		cell,
+		row,
+		empty,
+		selected,
+		dirty,
+		sort,
+		onSort,
+		onEdit,
+		maxHeight,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	let visible = $derived(columns.filter((c) => !c.hidden));
+	let selectedSet = $derived(new Set(selected ?? []));
+	let dirtySet = $derived(new Set(dirty ?? []));
+
+	/* Sticky columns are offset by the width of the sticky columns before
+	   them, measured on their header cells. */
+	let widths: number[] = $state([]);
+	let offsets = $derived.by(() => {
+		const out: (number | undefined)[] = [];
+		let sum = 0;
+		visible.forEach((c, i) => {
+			if (!c.sticky) return;
+			out[i] = sum;
+			sum += widths[i] ?? 0;
+		});
+		return out;
+	});
+	let lastSticky = $derived(visible.findLastIndex((c) => c.sticky));
+
+	function cellClass(c: TableColumn<Row>, i: number) {
+		return cx(
+			`${PREFIX}-cell`,
+			c.sticky && `${PREFIX}-sticky`,
+			i === lastSticky && `${PREFIX}-sticky-last`
+		);
+	}
+	function cellStyle(c: TableColumn<Row>, i: number, head: boolean) {
+		const parts: string[] = [];
+		if (c.sticky) parts.push(`inset-inline-start:${offsets[i] ?? 0}px`);
+		if (c.align) parts.push(`text-align:${c.align}`);
+		if (head && c.width) parts.push(`width:${c.width}`, `min-width:${c.width}`);
+		return parts.join(';') || undefined;
+	}
+
+	const ariaSort = (c: TableColumn<Row>) =>
+		sort?.key === c.key ? (sort.direction === 'asc' ? 'ascending' : 'descending') : undefined;
+
+	function next(c: TableColumn<Row>) {
+		if (sort?.key !== c.key) return onSort?.({ key: c.key, direction: 'asc' });
+		if (sort.direction === 'asc') return onSort?.({ key: c.key, direction: 'desc' });
+		onSort?.(undefined);
+	}
+
+	const raw = (r: Row, c: TableColumn<Row>) =>
+		c.value ? c.value(r) : (r as Record<string, unknown>)?.[c.key];
+	const text = (r: Row, c: TableColumn<Row>) => {
+		const v = raw(r, c);
+		return v == null ? '' : String(v);
+	};
+</script>
+
+<div class={`${PREFIX}-scroll`} style={maxHeight ? `max-height:${maxHeight}` : undefined}>
+	<table {...applied.rest} class={classes}>
+		<thead>
+			<tr class={`${PREFIX}-head`}>
+				{#each visible as c, i (c.key)}
+					<th
+						class={cellClass(c, i)}
+						style={cellStyle(c, i, true)}
+						scope="col"
+						aria-sort={c.sortable ? (ariaSort(c) ?? 'none') : undefined}
+						bind:offsetWidth={widths[i]}
+					>
+						{#if c.sortable}
+							<button type="button" class={`${PREFIX}-sort`} onclick={() => next(c)}>
+								{#if typeof c.label === 'function'}{@render c.label()}{:else}{c.label ?? c.key}{/if}
+							</button>
+						{:else if typeof c.label === 'function'}
+							{@render c.label()}
+						{:else}
+							{c.label ?? c.key}
+						{/if}
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each rows as r, ri (key(r, ri))}
+				{@const k = key(r, ri)}
+				<tr
+					class={cx(
+						`${PREFIX}-row`,
+						selectedSet.has(k) && `${PREFIX}-row-selected`,
+						dirtySet.has(k) && `${PREFIX}-row-dirty`
+					)}
+				>
+					{#if row}
+						{@render row(r, ri)}
+					{:else}
+						{#each visible as c, i (c.key)}
+							<td class={cellClass(c, i)} style={cellStyle(c, i, false)}>
+								{#if cell}{@render cell(r, c, ri)}{:else if c.edit}<Editable
+										value={raw(r, c)}
+										kind={c.edit}
+										onChange={(v) => onEdit?.(r, c.key, v)}
+									/>{:else}{text(r, c)}{/if}
+							</td>
+						{/each}
+					{/if}
+				</tr>
+			{:else}
+				{#if empty}
+					<tr>
+						<td class={`${PREFIX}-empty`} colspan={visible.length}>{@render empty()}</td>
+					</tr>
+				{/if}
+			{/each}
+		</tbody>
+	</table>
+</div>

package/dist/components/Table.svelte.d.ts

@@ -0,0 +1,121 @@
+/** What .table is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    The table draws its own head, rows and cells: every class below the
+    root that is not a flag is a PART. */
+export declare const PREFIX = "table";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {
+    readonly zebra: "Fill every other row.";
+    readonly hover: "Fill the row under the pointer.";
+    readonly pinned: "Keep the head at the top while the rows scroll under it (give the table a `maxHeight`).";
+    readonly loading: "Fade the rows while new ones are on their way.";
+};
+export declare const PARTS: readonly ["scroll", "head", "row", "row-selected", "row-dirty", "cell", "sort", "sticky", "sticky-last", "empty"];
+import type { Snippet } from 'svelte';
+import type { EditableKind } from './Editable.svelte';
+/** One column of a table. */
+export interface TableColumn<Row = any> {
+    /** What identifies the column — and, by default, the field of a row it shows. */
+    key: string;
+    /** The header, as text or as a snippet. */
+    label?: string | Snippet;
+    /** The column's width, any CSS length (`20ch`, `12em`). A minimum: text wraps inside it. */
+    width?: string;
+    /** Pin the column to the start edge while the others scroll. */
+    sticky?: boolean;
+    /** Leave the column out. */
+    hidden?: boolean;
+    /** Make the header a button that asks for a sort on this column. */
+    sortable?: boolean;
+    /** How the cell's text lines up. */
+    align?: 'start' | 'center' | 'end';
+    /** The cell's text when there is no `cell` snippet. Defaults to `row[key]`. */
+    value?: (row: Row) => unknown;
+    /**
+     * Make the cell editable in place with the editor for this shape of value
+     * (an `Editable`). The edit is handed to `onEdit`. Ignored when a `cell`
+     * snippet draws the cell — put an `Editable` in it yourself.
+     */
+    edit?: EditableKind;
+}
+export type TableSortDirection = 'asc' | 'desc';
+export interface TableSort {
+    key: string;
+    direction: TableSortDirection;
+}
+/**
+     * A real `<table>`. Columns are described once — width, sticky, sortable,
+     * hidden — and each cell is the column's field, or whatever the `cell`
+     * snippet draws. The rows are plain data: where they come from is not the
+     * table's business.
+     *
+     * Selection, sorting and loading are states every table has, so they are
+     * here as plain props — `selected`, `sort` / `onSort`, `loading` — and the
+     * table only draws them.
+     */
+import type { HTMLTableAttributes } from 'svelte/elements';
+declare function $$render<Row>(): {
+    props: {
+        readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    } & {
+        loading?: boolean | undefined;
+        zebra?: boolean | undefined;
+        hover?: boolean | undefined;
+        pinned?: boolean | undefined;
+    } & {
+        background?: string;
+    } & HTMLTableAttributes & {
+        /** The columns, in order. */
+        columns: TableColumn<Row>[];
+        /** The rows: your data, as is. */
+        rows?: Row[];
+        /** A row's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+        key?: (row: Row, index: number) => string;
+        /** How one cell is drawn. Without it, the cell is the column's value as text. */
+        cell?: Snippet<[Row, TableColumn<Row>, number]>;
+        /**
+         * How a whole row is drawn, `<td>`s included — the escape hatch for a
+         * row `cell` cannot express. The table still writes the `<tr>`.
+         */
+        row?: Snippet<[Row, number]>;
+        /** Drawn in place of the rows when there are none. */
+        empty?: Snippet;
+        /** Keys of the rows to draw as selected. */
+        selected?: Iterable<string>;
+        /** Keys of the rows to draw as changed and not yet saved. */
+        dirty?: Iterable<string>;
+        /** The current sort, drawn on its header. */
+        sort?: TableSort;
+        /** A sortable header was clicked: ascending, then descending, then none. */
+        onSort?: (sort: TableSort | undefined) => void;
+        /** An editable cell (a column with `edit`) was changed: the row, the column's key, the new value. */
+        onEdit?: (row: Row, key: string, value: unknown) => void;
+        /** The scroll box's maximum height, for a long table with a pinned head. */
+        maxHeight?: string;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Row> {
+    props(): ReturnType<typeof $$render<Row>>['props'];
+    events(): ReturnType<typeof $$render<Row>>['events'];
+    slots(): ReturnType<typeof $$render<Row>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Row>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Row>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Row>['props']>, ReturnType<__sveltets_Render<Row>['events']>, ReturnType<__sveltets_Render<Row>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Row>['bindings']>;
+    } & ReturnType<__sveltets_Render<Row>['exports']>;
+    <Row>(internal: unknown, props: ReturnType<__sveltets_Render<Row>['props']> & {}): ReturnType<__sveltets_Render<Row>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Table: $$IsomorphicComponent;
+type Table<Row> = InstanceType<typeof Table<Row>>;
+export default Table;

package/dist/components/Tabs.svelte

@@ -0,0 +1,142 @@
+<script module lang="ts">
+	/** What .tabs is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    One namespace, `tabs`: the strip AND the tabs in it (ADR 0009). The
+	    component draws every tab, so `.tabs-item` and its states are PARTS.
+	    A panel is rendered right after its tab because the CSS reaches it with
+	    `+` — moving it elsewhere would break the selector. */
+	export const PREFIX = 'tabs';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* How the strip is drawn. */
+		variant: ['border', 'box', 'lift'],
+		/* Which edge the strip sits on, which decides where the seam goes. */
+		placement: ['top', 'bottom']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = ['item', 'item-active', 'item-disabled', 'item-content', 'indicator'] as const;
+
+	import type { Snippet } from 'svelte';
+
+	/** One tab, and optionally the panel it reveals. */
+	export interface TabItem<V = string | number> {
+		/** The tab's text, or a snippet drawing whatever belongs in its place. */
+		label: string | Snippet;
+		/** What identifies the tab when the strip is driven by `value` rather than by index. */
+		value?: V;
+		/** Unreachable, and drawn as such. */
+		disabled?: boolean;
+		/** What the tab shows when selected. Omit to place panels yourself. */
+		content?: Snippet;
+	}
+</script>
+
+<script lang="ts" generics="V extends string | number">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props
+		extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>,
+			HTMLAttributes<HTMLDivElement> {
+		/**
+		 * The tabs, in order. A tab's `label` takes a snippet as readily as a
+		 * string, for the one tab that carries an icon or a count.
+		 */
+		tabs?: TabItem<V>[];
+		/**
+		 * How to draw the inside of every tab. Written once for the whole strip;
+		 * a tab whose own `label` is a snippet skips it.
+		 */
+		tab?: Snippet<[TabItem<V>]>;
+		/** Index of the selected tab. Bindable, so a parent can drive it. */
+		active?: number;
+		/** `value` of the selected tab, for tabs keyed by their own id rather than by
+		    position. Bindable. When set, it decides the selection over `active`. */
+		value?: V;
+		/** Called with the new index, and the tab's `value`, when a tab is chosen. */
+		onSelect?: (index: number, value: V | undefined) => void;
+		/** Slide the selection from one tab to the next. Not with `lift`, whose
+		    tab opens into its panel. */
+		animated?: boolean;
+		class?: string;
+	}
+
+	let {
+		tabs = [],
+		tab,
+		active = $bindable(0),
+		value = $bindable(),
+		onSelect,
+		animated = true,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+
+	/* The selected index: from `value` when the strip is keyed by value, else `active`. */
+	let current = $derived(value !== undefined ? tabs.findIndex((t) => t.value === value) : active);
+
+	let root: HTMLDivElement | undefined = $state();
+	let box = $state({ x: 0, y: 0, w: 0, h: 0 });
+
+	/* The indicator follows the selected tab: measured after every change,
+	   and again whenever the strip resizes (a font, a wrap, a panel). */
+	$effect(() => {
+		if (!animated || !root) return;
+		void current;
+		void tabs.length;
+		const measure = () => {
+			const item = root?.querySelectorAll<HTMLElement>(`:scope > [role="tab"]`)[current];
+			box = item
+				? { x: item.offsetLeft, y: item.offsetTop, w: item.offsetWidth, h: item.offsetHeight }
+				: { x: 0, y: 0, w: 0, h: 0 };
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(root);
+		return () => observer.disconnect();
+	});
+
+	function select(i: number) {
+		active = i;
+		if (tabs[i]?.value !== undefined) value = tabs[i].value;
+		onSelect?.(i, tabs[i]?.value);
+	}
+</script>
+
+{#snippet inside(item: TabItem<V>)}
+	{#if typeof item.label === 'function'}{@render item.label()}
+	{:else if tab}{@render tab(item)}
+	{:else}{item.label}{/if}
+{/snippet}
+
+<div {...applied.rest} bind:this={root} role="tablist" class={classes}
+	style:--tabs-x="{box.x}px"
+	style:--tabs-y="{box.y}px"
+	style:--tabs-w="{box.w}px"
+	style:--tabs-h="{box.h}px"
+>
+	{#if animated}<span class="{PREFIX}-item {PREFIX}-item-active {PREFIX}-indicator" aria-hidden="true"></span>{/if}
+	{#each tabs as item, i (i)}
+		<button
+			type="button"
+			role="tab"
+			class={cx(
+				`${PREFIX}-item`,
+				i === current && `${PREFIX}-item-active`,
+				item.disabled && `${PREFIX}-item-disabled`
+			)}
+			aria-selected={i === current}
+			disabled={item.disabled}
+			onclick={() => select(i)}
+		>{@render inside(item)}</button>
+		{#if item.content}
+			<div class={`${PREFIX}-item-content`}>{@render item.content()}</div>
+		{/if}
+	{/each}
+</div>