compote-ui 0.69.0 → 0.71.0

package/dist/components/combobox/combobox.svelte

@@ -130,7 +130,7 @@
 	)}
 >
 	{#if label}
-		<Combobox.Label class="text-sm font-medium leading-none">
+		<Combobox.Label class="text-sm leading-none font-medium">
 			{label}
 			<Field.RequiredIndicator class="text-danger" />
 		</Combobox.Label>

package/dist/components/data-table-v9/create-table.svelte.d.ts

@@ -72,5 +72,5 @@ export declare function createTable<T extends RowData>(options: CreateDataTableO
         weakEquals: import("@tanstack/table-core").CreatedFilterFn<any, any>;
     };
     columnMeta: DataTableColumnMeta;
-}, T, import("@tanstack/table-core").TableState_ColumnFiltering & import("@tanstack/table-core").TableState_ColumnPinning & import("@tanstack/table-core").TableState_ColumnResizing & import("@tanstack/table-core").TableState_ColumnSizing & import("@tanstack/table-core").TableState_ColumnVisibility & import("@tanstack/table-core").TableState_GlobalFiltering & import("@tanstack/table-core").TableState_RowSelection & import("@tanstack/table-core").TableState_RowSorting>;
+}, T>;
 export declare function getColumnId<T extends RowData>(column: DataTableLeafColumn<T>): string;

package/dist/components/data-table-v9/create-table.svelte.js

@@ -1,6 +1,6 @@
 import { createTable as createSvelteTable } from '@tanstack/svelte-table';
 import { useLocaleContext } from '@ark-ui/svelte/locale';
-import { onDestroy, untrack } from 'svelte';
+import { onDestroy } from 'svelte';
 import { renderComponent, renderSnippet } from '@tanstack/svelte-table';
 import { dataTableFeatures } from './features';
 import { TYPE_NUMBER_FORMAT_DEFAULTS } from './data-table-utils';
@@ -60,26 +60,6 @@ export function createTable(options) {
             columnFilters: options.initialState?.columnFilters ?? []
         }
     });
-    // The svelte adapter's internal $effect.pre only tracks `data` and `state` — not
-    // `columns` — so reactive add/remove/reorder of columns never reaches the table.
-    // Track the derived column defs here and push them through setOptions ourselves.
-    // Re-supply the `data` getter so spreading `prev` doesn't freeze data reactivity.
-    // CAUTION: upstream guidance says a second setOptions sync can race the adapter's
-    // own $effect.pre (which getter-merges the original options on data/state change).
-    // Both syncs write consistent values here, but revisit if the beta adapter ever
-    // starts tracking `columns` itself.
-    $effect.pre(() => {
-        const columns = columnDefs;
-        untrack(() => {
-            table.setOptions((prev) => ({
-                ...prev,
-                get data() {
-                    return options.data;
-                },
-                columns
-            }));
-        });
-    });
     // Notify consumers of visibility changes without taking control of the slice
     // (overriding the table's own `onColumnVisibilityChange` option would suppress
     // internal updates). The atom's `subscribe` is an explicit observer that runs

package/dist/components/data-table-v9/table-view-state.svelte.d.ts

@@ -8,8 +8,8 @@ export type DataTableHeaderSection = 'left' | 'center' | 'right';
  *
  * Writable slice atoms are rune-backed, so reading them inside a $derived
  * registers the dependency. Derived table APIs (getRowModel, header groups,
- * getVisibleLeafColumns, …) are not reliably tracked by the beta adapter, so
- * each derived below first reads the slices its result depends on.
+ * getVisibleLeafColumns, …) aren't themselves reactive, so each derived below
+ * first reads the slices its result depends on.
  */
 export declare function createTableViewState<T extends RowData>(getTable: () => DataTableInstance<T>): {
     readonly table: DataTableInstance<T>;

package/dist/components/data-table-v9/table-view-state.svelte.js

@@ -4,8 +4,8 @@ import { getColumnMeta } from './data-table-utils';
  *
  * Writable slice atoms are rune-backed, so reading them inside a $derived
  * registers the dependency. Derived table APIs (getRowModel, header groups,
- * getVisibleLeafColumns, …) are not reliably tracked by the beta adapter, so
- * each derived below first reads the slices its result depends on.
+ * getVisibleLeafColumns, …) aren't themselves reactive, so each derived below
+ * first reads the slices its result depends on.
  */
 export function createTableViewState(getTable) {
     const table = $derived.by(getTable);

package/dist/components/data-table-v9/toolbar/data-table-column-filter.svelte

@@ -175,8 +175,8 @@
 		{/if}
 	</Popover.Trigger>
 
-	<Popover.Content class="w-70 p-3 flex flex-col gap-3" showArrow={false}>
-		<div class="flex items-center justify-between py-2.5 mr-1">
+	<Popover.Content class="flex w-70 flex-col gap-3 p-3" showArrow={false}>
+		<div class="mr-1 flex items-center justify-between py-2.5">
 			<span class="text-sm font-medium text-ink">Filters</span>
 			{#if activeCount > 0}
 				<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">

package/dist/components/date-field/date-field.svelte

@@ -105,7 +105,7 @@
 
 <DateInput.RootProvider value={dateInput}>
 	{#if label}
-		<DateInput.Label class="text-sm font-medium leading-none">
+		<DateInput.Label class="text-sm leading-none font-medium">
 			{label}
 			<Field.RequiredIndicator />
 		</DateInput.Label>
@@ -126,7 +126,7 @@
 					</DateInput.SegmentContext>
 				</DateInput.SegmentGroup>
 				<DatePicker.Trigger
-					class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50"
+					class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50"
 				>
 					<PhCalendarBlank class="size-4" />
 				</DatePicker.Trigger>

package/dist/components/date-input/date-input.svelte

@@ -66,7 +66,7 @@
 	}}
 >
 	{#if label}
-		<DateInput.Label class="text-sm font-medium leading-none">
+		<DateInput.Label class="text-sm leading-none font-medium">
 			{label}
 			<Field.RequiredIndicator />
 		</DateInput.Label>

package/dist/components/date-picker/date-picker-calendar.svelte

@@ -61,24 +61,24 @@
 <Portal>
 	<DatePicker.Positioner>
 		<DatePicker.Content
-			class="z-50 min-w-70 rounded-lg border border-border bg-surface-document p-4 shadow-lg outline-none data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+			class="z-50 min-w-70 rounded-lg border border-border bg-surface-document p-4 shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
 		>
 			<DatePicker.View view="day">
 				<DatePicker.Context>
 					{#snippet render(datePicker)}
 						<DatePicker.ViewControl class="mb-3 flex items-center justify-between">
 							<DatePicker.PrevTrigger
-								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40"
 							>
 								<PhArrowLeft class="size-4" />
 							</DatePicker.PrevTrigger>
 							<DatePicker.ViewTrigger
-								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 							>
 								<DatePicker.RangeText />
 							</DatePicker.ViewTrigger>
 							<DatePicker.NextTrigger
-								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40"
 							>
 								<PhArrowRight class="size-4" />
 							</DatePicker.NextTrigger>
@@ -88,7 +88,7 @@
 								<DatePicker.TableRow>
 									{#each datePicker().weekDays as weekDay (weekDay.short)}
 										<DatePicker.TableHeader
-											class="pb-2 text-center text-xs font-medium uppercase text-ink-dim"
+											class="pb-2 text-center text-xs font-medium text-ink-dim uppercase"
 										>
 											{weekDay.short}
 										</DatePicker.TableHeader>
@@ -101,7 +101,7 @@
 										{#each week as day (day.toString())}
 											<DatePicker.TableCell value={day}>
 												<DatePicker.TableCellTrigger
-													class="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40 data-in-range:rounded-none data-in-range:bg-primary/15 data-outside-range:opacity-40 data-outside-range:text-ink-dim data-range-end:rounded-r-md data-range-end:bg-primary data-range-end:text-ink-inverse data-range-start:rounded-l-md data-range-start:bg-primary data-range-start:text-ink-inverse data-selected:bg-primary data-selected:text-ink-inverse data-today:font-semibold data-today:text-primary data-unavailable:line-through data-unavailable:opacity-40 data-selected:data-today:text-ink-inverse"
+													class="inline-flex h-9 w-9 items-center justify-center rounded-md text-sm text-ink hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40 data-in-range:rounded-none data-in-range:bg-primary/15 data-outside-range:text-ink-dim data-outside-range:opacity-40 data-range-end:rounded-r-md data-range-end:bg-primary data-range-end:text-ink-inverse data-range-start:rounded-l-md data-range-start:bg-primary data-range-start:text-ink-inverse data-selected:bg-primary data-selected:text-ink-inverse data-today:font-semibold data-today:text-primary data-selected:data-today:text-ink-inverse data-unavailable:line-through data-unavailable:opacity-40"
 												>
 													{day.day}
 												</DatePicker.TableCellTrigger>
@@ -143,7 +143,7 @@
 									<button
 										type="button"
 										onclick={() => datePicker().setValue([togglePeriod(cur)])}
-										class="h-8 rounded-md border border-border bg-surface-1 px-2 text-sm shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+										class="h-8 rounded-md border border-border bg-surface-1 px-2 text-sm shadow-sm hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 									>
 										{isPM(cur) ? 'PM' : 'AM'}
 									</button>
@@ -159,17 +159,17 @@
 					{#snippet render(datePicker)}
 						<DatePicker.ViewControl class="mb-3 flex items-center justify-between">
 							<DatePicker.PrevTrigger
-								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40"
 							>
 								<PhArrowLeft class="size-4" />
 							</DatePicker.PrevTrigger>
 							<DatePicker.ViewTrigger
-								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 							>
 								<DatePicker.RangeText />
 							</DatePicker.ViewTrigger>
 							<DatePicker.NextTrigger
-								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40"
 							>
 								<PhArrowRight class="size-4" />
 							</DatePicker.NextTrigger>
@@ -181,7 +181,7 @@
 										{#each monthRow as month (month.value)}
 											<DatePicker.TableCell value={month.value}>
 												<DatePicker.TableCellTrigger
-													class="inline-flex h-10 w-full items-center justify-center rounded-md px-2 text-sm text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-outside-range:invisible data-selected:bg-primary data-selected:text-ink-inverse"
+													class="inline-flex h-10 w-full items-center justify-center rounded-md px-2 text-sm text-ink hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-outside-range:invisible data-selected:bg-primary data-selected:text-ink-inverse"
 												>
 													{month.label}
 												</DatePicker.TableCellTrigger>
@@ -200,17 +200,17 @@
 					{#snippet render(datePicker)}
 						<DatePicker.ViewControl class="mb-3 flex items-center justify-between">
 							<DatePicker.PrevTrigger
-								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40"
 							>
 								<PhArrowLeft class="size-4" />
 							</DatePicker.PrevTrigger>
 							<DatePicker.ViewTrigger
-								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+								class="flex-1 rounded-md py-1 text-center text-sm font-semibold text-ink hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 							>
 								<DatePicker.RangeText />
 							</DatePicker.ViewTrigger>
 							<DatePicker.NextTrigger
-								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-40"
+								class="inline-flex h-8 w-8 items-center justify-center rounded-md text-ink-dim hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-40"
 							>
 								<PhArrowRight class="size-4" />
 							</DatePicker.NextTrigger>
@@ -222,7 +222,7 @@
 										{#each yearRow as year (year.value)}
 											<DatePicker.TableCell value={year.value}>
 												<DatePicker.TableCellTrigger
-													class="inline-flex h-10 w-full items-center justify-center rounded-md px-2 text-sm text-ink hover:bg-surface-1 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-outside-range:invisible data-selected:bg-primary data-selected:text-ink-inverse"
+													class="inline-flex h-10 w-full items-center justify-center rounded-md px-2 text-sm text-ink hover:bg-surface-1 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-outside-range:invisible data-selected:bg-primary data-selected:text-ink-inverse"
 												>
 													{year.label}
 												</DatePicker.TableCellTrigger>

package/dist/components/date-picker/date-picker.svelte

@@ -72,7 +72,7 @@
 	}}
 >
 	{#if label}
-		<DatePicker.Label class="text-sm font-medium leading-none">
+		<DatePicker.Label class="text-sm leading-none font-medium">
 			{label}
 			<Field.RequiredIndicator />
 		</DatePicker.Label>
@@ -80,15 +80,15 @@
 	<DatePicker.Control class="flex flex-row gap-1.5">
 		<DatePicker.Input
 			{placeholder}
-			class="h-9 min-w-0 flex-1 rounded-md border border-border bg-surface-1 px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger"
+			class="h-9 min-w-0 flex-1 rounded-md border border-border bg-surface-1 px-3 text-sm shadow-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-invalid:border-danger"
 		/>
 		<DatePicker.Trigger
-			class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50"
+			class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50"
 		>
 			<PhCalendarBlank class="size-4" />
 		</DatePicker.Trigger>
 		<DatePicker.ClearTrigger
-			class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 text-ink-dim shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+			class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 text-ink-dim shadow-sm hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none"
 		>
 			<PhX class="size-3.5" />
 		</DatePicker.ClearTrigger>

package/dist/components/date-range-field/date-range-field.svelte

@@ -72,7 +72,7 @@
 
 <DateInput.RootProvider value={dateInput}>
 	{#if label}
-		<DateInput.Label class="text-sm font-medium leading-none">
+		<DateInput.Label class="text-sm leading-none font-medium">
 			{label}
 			<Field.RequiredIndicator />
 		</DateInput.Label>
@@ -96,7 +96,7 @@
 					</DateInput.SegmentContext>
 				</DateInput.SegmentGroup>
 				<DatePicker.Trigger
-					class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-disabled:cursor-not-allowed data-disabled:opacity-50"
+					class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-surface-1 shadow-sm hover:bg-surface-2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50"
 				>
 					<PhCalendarBlank class="size-4" />
 				</DatePicker.Trigger>

package/dist/components/file-upload/file-upload.svelte

@@ -27,7 +27,7 @@
 
 <FileUpload.Root {maxFiles} {accept} class="flex flex-col gap-1.5" {...restProps}>
 	{#if label}
-		<FileUpload.Label class="text-sm font-medium leading-none">{label}</FileUpload.Label>
+		<FileUpload.Label class="text-sm leading-none font-medium">{label}</FileUpload.Label>
 	{/if}
 
 	<FileUpload.Context>

package/dist/components/listbox/listbox-content.svelte

@@ -20,7 +20,7 @@
 <Listbox.Content
 	{...restProps}
 	class={cn(
-		'flex min-h-0 w-full flex-1 flex-col overflow-y-auto outline-none bg-surface-document rounded p-1 border scrollbar-thin',
+		'flex min-h-0 w-full flex-1 scrollbar-thin flex-col overflow-y-auto rounded border bg-surface-document p-1 outline-none',
 		className
 	)}
 >

package/dist/components/nav-rail/nav-rail.svelte

@@ -14,7 +14,7 @@
 	class={cn(
 		'group absolute inset-y-0 left-0 z-20 flex w-16 flex-col overflow-hidden',
 		'border-r border-border bg-surface-1 transition-[width] duration-200',
-		'hover:w-60 focus-within:w-60 data-expanded:w-60',
+		'focus-within:w-60 hover:w-60 data-expanded:w-60',
 		className
 	)}
 	{...rest}

package/dist/components/phone-input/phone-input.svelte

@@ -92,7 +92,7 @@
 			<Select.Control class="h-full">
 				<Select.Trigger
 					aria-label="Country"
-					class="flex h-9 cursor-pointer items-center gap-1.5 rounded-l-md border-r px-2.5 text-sm outline-none transition-colors hover:bg-surface-2 active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent"
+					class="flex h-9 cursor-pointer items-center gap-1.5 rounded-l-md border-r px-2.5 text-sm transition-colors outline-none hover:bg-surface-2 active:bg-surface-2 data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent"
 				>
 					{#if selectedItem}
 						<span

package/dist/components/progress/progress-circular.svelte

@@ -48,7 +48,7 @@
 				/>
 			</Progress.Circle>
 			{#if showValueText}
-				<Progress.ValueText class="absolute text-sm font-medium tabular-nums text-ink" />
+				<Progress.ValueText class="absolute text-sm font-medium text-ink tabular-nums" />
 			{/if}
 		</div>
 		{#if label}

package/dist/components/progress/progress-linear.svelte

@@ -35,7 +35,7 @@
 				<Progress.Label class="text-sm font-medium text-ink">{label}</Progress.Label>
 			{/if}
 			{#if showValueText}
-				<Progress.ValueText class="text-sm tabular-nums text-ink-dim" />
+				<Progress.ValueText class="text-sm text-ink-dim tabular-nums" />
 			{/if}
 		</div>
 	{/if}

package/dist/components/table/index.d.ts

@@ -0,0 +1,8 @@
+export { default as Root } from './table.svelte';
+export { default as Header } from './table-header.svelte';
+export { default as Body } from './table-body.svelte';
+export { default as Footer } from './table-footer.svelte';
+export { default as Row } from './table-row.svelte';
+export { default as Head } from './table-head.svelte';
+export { default as Cell } from './table-cell.svelte';
+export { default as Caption } from './table-caption.svelte';

package/dist/components/table/index.js

@@ -0,0 +1,8 @@
+export { default as Root } from './table.svelte';
+export { default as Header } from './table-header.svelte';
+export { default as Body } from './table-body.svelte';
+export { default as Footer } from './table-footer.svelte';
+export { default as Row } from './table-row.svelte';
+export { default as Head } from './table-head.svelte';
+export { default as Cell } from './table-cell.svelte';
+export { default as Caption } from './table-caption.svelte';

package/dist/components/table/table-body.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLTableSectionElement> = $props();
+</script>
+
+<tbody class={cn(className)} {...rest}>
+	{@render children?.()}
+</tbody>

package/dist/components/table/table-body.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableBody: import("svelte").Component<HTMLAttributes<HTMLTableSectionElement>, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/table/table-caption.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	// Svelte types `<caption>` against HTMLElement, not HTMLTableCaptionElement.
+	let { class: className, children, ...rest }: HTMLAttributes<HTMLElement> = $props();
+</script>
+
+<caption class={cn('px-3 py-2 text-left text-sm text-ink-dim', className)} {...rest}>
+	{@render children?.()}
+</caption>

package/dist/components/table/table-caption.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from 'svelte/elements';
+declare const TableCaption: import("svelte").Component<HTMLAttributes<HTMLElement>, {}, "">;
+type TableCaption = ReturnType<typeof TableCaption>;
+export default TableCaption;

package/dist/components/table/table-cell.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLTdAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLTdAttributes = $props();
+</script>
+
+<td
+	class={cn(
+		'h-9 border-b border-surface-2 px-3 py-0 align-middle group-last/row:border-b-0',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</td>

package/dist/components/table/table-cell.svelte.d.ts

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

package/dist/components/table/table-footer.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	type Props = HTMLAttributes<HTMLTableSectionElement> & {
+		sticky?: boolean;
+	};
+
+	let { sticky = true, class: className, children, ...rest }: Props = $props();
+</script>
+
+<!-- Footer cells are plain Table.Cell; the border flip (bottom -> top), the
+     surface and the weight are applied here so Cell stays context-free. -->
+<tfoot
+	class={cn(
+		'bg-surface-2 text-ink-dim',
+		'[&_td]:border-t [&_td]:border-b-0 [&_td]:border-surface-3 [&_td]:bg-surface-2 [&_td]:font-medium',
+		sticky && 'sticky bottom-0 z-20',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</tfoot>

package/dist/components/table/table-footer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLTableSectionElement> & {
+    sticky?: boolean;
+};
+declare const TableFooter: import("svelte").Component<Props, {}, "">;
+type TableFooter = ReturnType<typeof TableFooter>;
+export default TableFooter;

package/dist/components/table/table-head.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLThAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { scope = 'col', class: className, children, ...rest }: HTMLThAttributes = $props();
+</script>
+
+<th
+	{scope}
+	class={cn(
+		'h-9 border-b border-surface-3 bg-surface-2 px-3 py-0 align-middle leading-5 font-medium',
+		className
+	)}
+	{...rest}
+>
+	{@render children?.()}
+</th>

package/dist/components/table/table-head.svelte.d.ts

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

package/dist/components/table/table-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	type Props = HTMLAttributes<HTMLTableSectionElement> & {
+		sticky?: boolean;
+	};
+
+	let { sticky = true, class: className, children, ...rest }: Props = $props();
+</script>
+
+<!-- Sticky by default: with no scrolling ancestor it simply behaves as static,
+     so the same header works inside a scroll container and inside a dialog. -->
+<thead class={cn('bg-surface-2 text-ink-dim', sticky && 'sticky top-0 z-20', className)} {...rest}>
+	{@render children?.()}
+</thead>

package/dist/components/table/table-header.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLTableSectionElement> & {
+    sticky?: boolean;
+};
+declare const TableHeader: import("svelte").Component<Props, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/table/table-row.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	type Props = HTMLAttributes<HTMLTableRowElement> & {
+		selected?: boolean;
+	};
+
+	let { selected = false, class: className, children, ...rest }: Props = $props();
+</script>
+
+<!-- `group/row` lets cells drop their bottom border on the last row. The hover
+     tint is invisible on header/footer rows because those cells set an opaque
+     bg-surface-2 of their own. -->
+<tr class={cn('group/row h-9 hover:bg-well/60', selected && 'bg-well/60', className)} {...rest}>
+	{@render children?.()}
+</tr>

package/dist/components/table/table-row.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+};
+declare const TableRow: import("svelte").Component<Props, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/components/table/table.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+
+	let { class: className, children, ...rest }: HTMLTableAttributes = $props();
+</script>
+
+<!-- border-separate (not border-collapse) keeps cell borders painted under a
+     sticky header, matching how DataTable renders its own table. -->
+<table
+	class={cn('w-full border-separate border-spacing-0 text-left text-sm text-ink', className)}
+	{...rest}
+>
+	{@render children?.()}
+</table>

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

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

package/dist/components/tags-input/tags-input.svelte

@@ -33,7 +33,7 @@
 	<TagsInput.Context>
 		{#snippet render(tagsInput)}
 			{#if label}
-				<TagsInput.Label class="text-sm font-medium leading-none data-disabled:opacity-50">
+				<TagsInput.Label class="text-sm leading-none font-medium data-disabled:opacity-50">
 					{label}
 				</TagsInput.Label>
 			{/if}
@@ -55,7 +55,7 @@
 						<TagsInput.ItemPreview
 							class={cn(
 								'inline-flex items-center gap-1 rounded bg-surface-2 py-0.5 pr-1 pl-2 text-sm',
-								'data-highlighted:bg-primary/10 data-disabled:opacity-50'
+								'data-disabled:opacity-50 data-highlighted:bg-primary/10'
 							)}
 						>
 							<TagsInput.ItemText>{value}</TagsInput.ItemText>

package/dist/components/toast/toast.d.ts

@@ -1,7 +1,7 @@
 import type { CreateToasterReturn } from '@ark-ui/svelte/toast';
 export type ToastOptions = Parameters<CreateToasterReturn['create']>[0];
 export type ToastType = NonNullable<ToastOptions['type']>;
-export declare const toast: import("@zag-js/toast").Store<any> & {
+export declare const toast: CreateToasterReturn<any> & {
     info: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;
     success: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;
     warning: (title: string | ToastOptions, options?: Omit<ToastOptions, "type">) => string;

package/dist/icons/PhPlus.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M224 128a8 8 0 0 1-8 8h-80v80a8 8 0 0 1-16 0v-80H40a8 8 0 0 1 0-16h80V40a8 8 0 0 1 16 0v80h80a8 8 0 0 1 8 8"
+	/>
+</svg>

package/dist/icons/PhPlus.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PhPlus: import("svelte").Component<{
+    class?: string;
+} & Record<string, any>, {}, "">;
+type PhPlus = ReturnType<typeof PhPlus>;
+export default PhPlus;

package/dist/icons/index.d.ts

@@ -21,6 +21,7 @@ export { default as PhMagnifyingGlass } from './PhMagnifyingGlass.svelte';
 export { default as PhMicrosoftExcelLogo } from './PhMicrosoftExcelLogo.svelte';
 export { default as PhMinus } from './PhMinus.svelte';
 export { default as PhPhone } from './PhPhone.svelte';
+export { default as PhPlus } from './PhPlus.svelte';
 export { default as PhStar } from './PhStar.svelte';
 export { default as PhUploadSimple } from './PhUploadSimple.svelte';
 export { default as PhUser } from './PhUser.svelte';

package/dist/icons/index.js

@@ -21,6 +21,7 @@ export { default as PhMagnifyingGlass } from './PhMagnifyingGlass.svelte';
 export { default as PhMicrosoftExcelLogo } from './PhMicrosoftExcelLogo.svelte';
 export { default as PhMinus } from './PhMinus.svelte';
 export { default as PhPhone } from './PhPhone.svelte';
+export { default as PhPlus } from './PhPlus.svelte';
 export { default as PhStar } from './PhStar.svelte';
 export { default as PhUploadSimple } from './PhUploadSimple.svelte';
 export { default as PhUser } from './PhUser.svelte';

package/dist/index.d.ts

@@ -54,6 +54,7 @@ export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';
 export type { SplitterPanelConfig, SplitterProps } from './components/splitter/types';
 export { default as Switch } from './components/switch/switch.svelte';
+export * as Table from './components/table';
 export * as Tabs from './components/tabs';
 export { default as TagsInput } from './components/tags-input/tags-input.svelte';
 export type { TagsInputProps } from './components/tags-input/types';

package/dist/index.js

@@ -42,6 +42,7 @@ export { default as QrCode } from './components/qr-code/qr-code.svelte';
 export { default as Select } from './components/select/select.svelte';
 export { default as Splitter } from './components/splitter/splitter.svelte';
 export { default as Switch } from './components/switch/switch.svelte';
+export * as Table from './components/table';
 export * as Tabs from './components/tabs';
 export { default as TagsInput } from './components/tags-input/tags-input.svelte';
 export * as Toast from './components/toast';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.69.0",
+	"version": "0.71.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -59,43 +59,43 @@
 		"@iconify-json/ph": "^1.2.2",
 		"@sveltejs/adapter-auto": "^7.0.0",
 		"@sveltejs/adapter-cloudflare": "^7.2.9",
-		"@sveltejs/kit": "^2.70.1",
+		"@sveltejs/kit": "^2.70.2",
 		"@sveltejs/package": "^2.5.8",
 		"@sveltejs/vite-plugin-svelte": "^7.2.0",
 		"@tailwindcss/vite": "^4.3.3",
 		"@tanstack/intent": "^0.3.6",
-		"@tanstack/svelte-table": "9.0.0-beta.47",
+		"@tanstack/svelte-table": "9.0.0",
 		"@types/node": "^22.20.0",
 		"eslint": "^10.8.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.22.0",
-		"globals": "^17.8.0",
+		"globals": "^17.9.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
-		"publint": "^0.3.22",
+		"publint": "^0.3.23",
 		"svelte": "^5.56.8",
 		"svelte-check": "^4.7.4",
 		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.65.0",
+		"typescript-eslint": "^8.66.0",
 		"unplugin-icons": "^23.0.1",
-		"vite": "^8.1.5"
+		"vite": "^8.2.0"
 	},
 	"keywords": [
 		"svelte",
 		"tanstack-intent"
 	],
 	"dependencies": {
-		"@ark-ui/svelte": "^5.22.1",
+		"@ark-ui/svelte": "^5.23.0",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
-		"@internationalized/date": "^3.12.2",
-		"@tanstack/svelte-virtual": "^3.13.34",
+		"@internationalized/date": "^3.12.3",
+		"@tanstack/svelte-virtual": "^3.13.35",
 		"runed": "^0.37.1",
 		"svelte-tel-input": "^4.3.2",
 		"tailwind-merge": "^3.6.0",
-		"tailwind-variants": "^3.3.0"
+		"tailwind-variants": "^3.3.1"
 	},
 	"intent": {
 		"skills": [