compote-ui 0.68.2 → 0.70.0

package/dist/components/badge/badge.variants.d.ts

@@ -1,46 +1,46 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const badge: import("tailwind-variants").TVReturnType<{
     variant: {
-        solid: string;
-        subtle: string;
-        outline: string;
+        solid: "";
+        subtle: "";
+        outline: "border bg-transparent";
     };
     color: {
-        neutral: string;
-        primary: string;
-        danger: string;
-        warning: string;
-        success: string;
-        info: string;
+        neutral: "";
+        primary: "";
+        danger: "";
+        warning: "";
+        success: "";
+        info: "";
     };
 }, undefined, "inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium [&_svg]:size-3 [&_svg]:shrink-0", {
     variant: {
-        solid: string;
-        subtle: string;
-        outline: string;
+        solid: "";
+        subtle: "";
+        outline: "border bg-transparent";
     };
     color: {
-        neutral: string;
-        primary: string;
-        danger: string;
-        warning: string;
-        success: string;
-        info: string;
+        neutral: "";
+        primary: "";
+        danger: "";
+        warning: "";
+        success: "";
+        info: "";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        solid: string;
-        subtle: string;
-        outline: string;
+        solid: "";
+        subtle: "";
+        outline: "border bg-transparent";
     };
     color: {
-        neutral: string;
-        primary: string;
-        danger: string;
-        warning: string;
-        success: string;
-        info: string;
+        neutral: "";
+        primary: "";
+        danger: "";
+        warning: "";
+        success: "";
+        info: "";
     };
-}, undefined, "inline-flex w-fit items-center gap-1 rounded px-2 py-0.5 text-xs font-medium [&_svg]:size-3 [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined>>;
 export type BadgeVariant = NonNullable<VariantProps<typeof badge>['variant']>;
 export type BadgeColor = NonNullable<VariantProps<typeof badge>['color']>;

package/dist/components/button/button.variants.d.ts

@@ -1,52 +1,52 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-        destructive: string;
+        default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
+        outline: "border text-ink hover:bg-surface-2";
+        ghost: "text-ink hover:bg-surface-2";
+        destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
     };
     size: {
-        sm: string;
-        default: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-        'icon-sm': string;
-        'icon-lg': string;
+        sm: "h-8 gap-1.5 px-2";
+        default: "h-9 gap-2 px-3";
+        lg: "h-10 gap-2.5 px-4";
+        icon: "size-8";
+        'icon-xs': "size-6";
+        'icon-sm': "size-7";
+        'icon-lg': "size-9";
     };
 }, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", {
     variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-        destructive: string;
+        default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
+        outline: "border text-ink hover:bg-surface-2";
+        ghost: "text-ink hover:bg-surface-2";
+        destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
     };
     size: {
-        sm: string;
-        default: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-        'icon-sm': string;
-        'icon-lg': string;
+        sm: "h-8 gap-1.5 px-2";
+        default: "h-9 gap-2 px-3";
+        lg: "h-10 gap-2.5 px-4";
+        icon: "size-8";
+        'icon-xs': "size-6";
+        'icon-sm': "size-7";
+        'icon-lg': "size-9";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        outline: string;
-        ghost: string;
-        destructive: string;
+        default: "bg-primary text-ink-inverse hover:bg-primary/90 active:bg-primary/80";
+        outline: "border text-ink hover:bg-surface-2";
+        ghost: "text-ink hover:bg-surface-2";
+        destructive: "bg-danger text-ink-inverse hover:bg-danger/90 active:bg-danger/80";
     };
     size: {
-        sm: string;
-        default: string;
-        lg: string;
-        icon: string;
-        'icon-xs': string;
-        'icon-sm': string;
-        'icon-lg': string;
+        sm: "h-8 gap-1.5 px-2";
+        default: "h-9 gap-2 px-3";
+        lg: "h-10 gap-2.5 px-4";
+        icon: "size-8";
+        'icon-xs': "size-6";
+        'icon-sm': "size-7";
+        'icon-lg': "size-9";
     };
-}, undefined, "inline-flex cursor-pointer items-center justify-center rounded bg-transparent text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonVariant = VariantProps<typeof button>['variant'];
 export type ButtonSize = VariantProps<typeof button>['size'];

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/column-helper.js

@@ -7,7 +7,14 @@ const TYPE_DEFAULTS = {
     'date-time': { align: 'center', size: 160 },
     boolean: { align: 'center', size: 90 },
     url: { align: 'center', size: 60, enableSorting: false },
-    phone: { align: 'left', size: 160 }
+    phone: { align: 'left', size: 160 },
+    action: {
+        align: 'center',
+        size: 60,
+        enableSorting: false,
+        enableHiding: false,
+        enableColumnFilter: false
+    }
 };
 function applyTypeDefaults(options) {
     const defaults = options.type ? TYPE_DEFAULTS[options.type] : undefined;

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

@@ -113,7 +113,7 @@
 							{@const meta = getColumnMeta(cell.column.columnDef)}
 							<td
 								class={cn(
-									'truncate border-b border-b-surface-2 px-3 py-2 group-last/row:border-b-0',
+									'h-9 truncate border-b border-b-surface-2 px-3 py-0 align-middle group-last/row:border-b-0',
 									alignClass(meta?.align),
 									cell.column.getIsPinned() && 'bg-(--row-bg)'
 								)}

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/data-table-v9/types.d.ts

@@ -2,7 +2,7 @@ import type { FilterFnOption, RowData } from '@tanstack/svelte-table';
 import type { Component, Snippet } from 'svelte';
 import type { DataTableFeatures } from './features';
 export type DataTableAlign = 'left' | 'center' | 'right';
-export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'phone' | 'date' | 'time' | 'date-time';
+export type DataTableColumnType = 'text' | 'number' | 'currency' | 'percent' | 'boolean' | 'select' | 'url' | 'phone' | 'date' | 'time' | 'date-time' | 'action';
 export type DataTableCellRenderer<T extends RowData> = (value: unknown, row: T) => string | number | boolean | null | undefined;
 export type DataTableCellRenderProps<T extends RowData> = {
     value: unknown;

package/dist/components/data-table-v9/virtual/data-table-virtual-rows.svelte

@@ -109,7 +109,7 @@
 						{@const meta = getColumnMeta(cell.column.columnDef)}
 						<td
 							class={cn(
-								'items-center truncate px-3 py-2',
+								'h-9 items-center truncate px-3 py-0',
 								alignClass(meta?.align),
 								justifyClass(meta?.align),
 								cell.column.getIsPinned() && 'bg-(--row-bg)'

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/toggle/toggle.variants.d.ts

@@ -1,43 +1,43 @@
 import { type VariantProps } from 'tailwind-variants';
 export declare const toggle: import("tailwind-variants").TVReturnType<{
     variant: {
-        ghost: string;
-        outline: string;
+        ghost: "hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
+        outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
+        md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
+        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
     };
     icon: {
-        true: string;
+        true: "";
     };
 }, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:shrink-0", {
     variant: {
-        ghost: string;
-        outline: string;
+        ghost: "hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
+        outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
+        md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
+        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
     };
     icon: {
-        true: string;
+        true: "";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        ghost: string;
-        outline: string;
+        ghost: "hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
+        outline: "border border-border hover:bg-surface-2 hover:text-ink data-pressed:bg-surface-2 data-pressed:text-ink data-pressed:shadow-sm data-[state=on]:bg-surface-2 data-[state=on]:text-ink data-[state=on]:shadow-sm";
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
+        sm: "h-8 min-w-8 gap-1 px-1.5 text-xs [&_svg]:size-3.5";
+        md: "h-9 min-w-9 gap-1.5 px-2 text-sm [&_svg]:size-4";
+        lg: "h-10 min-w-10 gap-2 px-2.5 text-sm [&_svg]:size-5";
     };
     icon: {
-        true: string;
+        true: "";
     };
-}, undefined, "inline-flex cursor-pointer items-center justify-center rounded-md font-medium text-ink-dim transition-colors select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:shrink-0", unknown, unknown, undefined>>;
+}, undefined>>;
 export type ToggleSize = NonNullable<VariantProps<typeof toggle>['size']>;
 export type ToggleVariant = NonNullable<VariantProps<typeof toggle>['variant']>;

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.68.2",
+	"version": "0.70.0",
 	"license": "MIT",
 	"scripts": {
 		"dev": "vite dev --open",
@@ -66,16 +66,16 @@
 		"@tanstack/intent": "^0.3.6",
 		"@tanstack/svelte-table": "9.0.0-beta.47",
 		"@types/node": "^22.20.0",
-		"eslint": "^10.7.0",
+		"eslint": "^10.8.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.22.0",
-		"globals": "^17.5.0",
+		"globals": "^17.8.0",
 		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
-		"publint": "^0.3.21",
-		"svelte": "^5.56.7",
-		"svelte-check": "^4.7.3",
+		"publint": "^0.3.22",
+		"svelte": "^5.56.8",
+		"svelte-check": "^4.7.4",
 		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
@@ -91,11 +91,11 @@
 		"@ark-ui/svelte": "^5.22.1",
 		"@fontsource-variable/nunito-sans": "^5.2.7",
 		"@internationalized/date": "^3.12.2",
-		"@tanstack/svelte-virtual": "^3.13.33",
+		"@tanstack/svelte-virtual": "^3.13.34",
 		"runed": "^0.37.1",
 		"svelte-tel-input": "^4.3.2",
 		"tailwind-merge": "^3.6.0",
-		"tailwind-variants": "^3.2.2"
+		"tailwind-variants": "^3.3.0"
 	},
 	"intent": {
 		"skills": [