compote-ui 0.75.4 → 0.77.0

package/dist/components/carousel/carousel-next-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PhArrowRight } from '../../icons';
+	import { PhArrowRight } from '../../index.ts/icons';
 	import { Carousel } from '@ark-ui/svelte/carousel';
 	import type { CarouselNextTriggerProps } from '@ark-ui/svelte/carousel';
 	import { cn } from 'tailwind-variants';

package/dist/components/carousel/carousel-prev-trigger.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PhArrowLeft } from '../../icons';
+	import { PhArrowLeft } from '../../index.ts/icons';
 	import { Carousel } from '@ark-ui/svelte/carousel';
 	import type { CarouselPrevTriggerProps } from '@ark-ui/svelte/carousel';
 	import { cn } from 'tailwind-variants';

package/dist/components/checkbox/checkbox.svelte

@@ -2,7 +2,7 @@
 	import { Checkbox } from '@ark-ui/svelte/checkbox';
 	import { cn } from 'tailwind-variants';
 	import type { CheckboxProps as Props } from './checkbox.types.js';
-	import { PhCheck, PhMinus } from '../../icons';
+	import { PhCheck, PhMinus } from '../../index.ts/icons';
 
 	let {
 		checked = $bindable(),

package/dist/components/combobox/combobox.svelte

@@ -8,7 +8,7 @@
 	import type { ComboboxProps } from './types';
 	import { createListCollection, type ListItem } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
-	import { PhCaretDown, PhCheck, PhX } from '../../icons';
+	import { PhCaretDown, PhCheck, PhX } from '../../index.ts/icons';
 
 	let {
 		value = $bindable(),

package/dist/components/combobox/types.d.ts

@@ -1,5 +1,5 @@
 import type { ComboboxRootBaseProps } from '@ark-ui/svelte/combobox';
-import type { ListItem } from '../../utils/collections';
+import type { ListItem } from '../../index.ts/utils/collections';
 export interface ComboboxProps<T extends ListItem> extends Omit<ComboboxRootBaseProps<T>, 'value' | 'collection'> {
     value?: number | string | null | (number | string)[];
     items: T[];

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

@@ -2,7 +2,7 @@
 	import type { Cell, RowData } from '@tanstack/svelte-table';
 	import { FlexRender } from '@tanstack/svelte-table';
 	import { cn } from 'tailwind-variants';
-	import { PhArrowSquareOut, PhCheck, PhPhone, PhX } from '../../icons';
+	import { PhArrowSquareOut, PhCheck, PhPhone, PhX } from '../../index.ts/icons';
 	import type { DataTableFeatures } from './features';
 	import {
 		getBooleanCellValue,

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

@@ -2,7 +2,7 @@
 	import type { HeaderGroup, RowData } from '@tanstack/svelte-table';
 	import { FlexRender } from '@tanstack/svelte-table';
 	import { cn } from 'tailwind-variants';
-	import { PhCaretDown, PhCaretUp } from '../../icons';
+	import { PhCaretDown, PhCaretUp } from '../../index.ts/icons';
 	import type { DataTableInstance } from './data-table-utils';
 	import type { DataTableViewState } from './table-view-state.svelte';
 	import type { DataTableFeatures } from './features';

package/dist/components/data-table-v9/index.d.ts

@@ -7,5 +7,6 @@ export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
 export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
 export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
 export { default as Search } from './toolbar/data-table-search.svelte';
+export { default as Refresh } from './toolbar/data-table-refresh.svelte';
 export type { CreateDataTableOptions, DataTableInstance } from './create-table.svelte';
 export type { DataTableAlign, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableGroupColumn, DataTableLeafColumnBase, DataTableLeafColumn } from './types';

package/dist/components/data-table-v9/index.js

@@ -7,3 +7,4 @@ export { default as Toolbar } from './toolbar/data-table-toolbar.svelte';
 export { default as ColumnFilter } from './toolbar/data-table-column-filter.svelte';
 export { default as ColumnVisibility } from './toolbar/data-table-column-visibility.svelte';
 export { default as Search } from './toolbar/data-table-search.svelte';
+export { default as Refresh } from './toolbar/data-table-refresh.svelte';

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

@@ -2,6 +2,7 @@
 	import { onDestroy } from 'svelte';
 	import type { Column, RowData } from '@tanstack/svelte-table';
 	import * as Popover from '../../popover';
+	import * as Tooltip from '../../tooltip';
 	import * as ScrollArea from '../../scroll-area';
 	import Checkbox from '../../checkbox/checkbox.svelte';
 	import { cn } from 'tailwind-variants';
@@ -9,14 +10,20 @@
 	import type { DataTableFeatures } from '../features';
 	import NumberInput from '../../number-input/number-input.svelte';
 	import * as Field from '../../field';
-	import { PhX, PhMagnifyingGlass } from '../../../icons';
+	import Badge from '../../badge/badge.svelte';
+	import { button } from '../../button/button.variants';
+	import { PhX, PhMagnifyingGlass, PhFunnel } from '../../../index.ts/icons';
 
 	type Props = {
 		table: DataTableInstance<T>;
+		/** Text label for the trigger. When omitted, a funnel icon is shown instead. */
 		triggerLabel?: string;
 	};
 
-	let { table, triggerLabel = 'Filters' }: Props = $props();
+	let { table, triggerLabel }: Props = $props();
+
+	// Popover and tooltip share one trigger element, so both must agree on its id.
+	const triggerId = $props.id();
 
 	let localText: Record<string, string> = $state({});
 	let localNumMin: Record<string, number> = $state({});
@@ -165,15 +172,38 @@
 	}
 </script>
 
-<Popover.Root positioning={{ placement: 'bottom-end' }}>
-	<Popover.Trigger
-		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-	>
-		{triggerLabel}
-		{#if activeCount > 0}
-			({activeCount})
-		{/if}
-	</Popover.Trigger>
+<Popover.Root ids={{ trigger: triggerId }} positioning={{ placement: 'bottom-end' }}>
+	<Tooltip.Root ids={{ trigger: triggerId }} disabled={!!triggerLabel}>
+		<Tooltip.Trigger>
+			{#snippet asChild(tooltipProps)}
+				<Popover.Trigger
+					{...tooltipProps()}
+					aria-label={triggerLabel ? undefined : 'Filters'}
+					class={button({
+						variant: 'outline',
+						size: triggerLabel ? 'default' : 'icon',
+						class: 'relative'
+					})}
+				>
+					{#if triggerLabel}
+						{triggerLabel}
+					{:else}
+						<PhFunnel />
+					{/if}
+					{#if activeCount > 0}
+						<Badge
+							variant="solid"
+							color="primary"
+							class="absolute top-0 right-0 size-4 translate-x-1/3 -translate-y-1/3 justify-center px-1 text-xs"
+						>
+							{activeCount > 99 ? '99+' : activeCount}
+						</Badge>
+					{/if}
+				</Popover.Trigger>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content>Filters</Tooltip.Content>
+	</Tooltip.Root>
 
 	<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">

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

@@ -3,6 +3,7 @@ import type { DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;
+        /** Text label for the trigger. When omitted, a funnel icon is shown instead. */
         triggerLabel?: string;
     };
     exports: {};

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

@@ -1,16 +1,23 @@
 <script lang="ts" generics="T extends RowData">
 	import type { RowData } from '@tanstack/svelte-table';
 	import * as Popover from '../../popover';
+	import * as Tooltip from '../../tooltip';
 	import * as ScrollArea from '../../scroll-area';
 	import Checkbox from '../../checkbox/checkbox.svelte';
 	import type { DataTableInstance } from '../data-table-utils';
+	import { button } from '../../button/button.variants';
+	import { PhColumns } from '../../../index.ts/icons';
 
 	type Props = {
 		table: DataTableInstance<T>;
+		/** Text label for the trigger. When omitted, a columns icon is shown instead. */
 		triggerLabel?: string;
 	};
 
-	let { table, triggerLabel = 'Columns' }: Props = $props();
+	let { table, triggerLabel }: Props = $props();
+
+	// Popover and tooltip share one trigger element, so both must agree on its id.
+	const triggerId = $props.id();
 
 	const columnVisibility = $derived.by(() => table.atoms.columnVisibility.get());
 	const allLeafColumns = $derived.by(() => {
@@ -32,12 +39,25 @@
 	}
 </script>
 
-<Popover.Root positioning={{ placement: 'bottom-end' }}>
-	<Popover.Trigger
-		class="flex h-9 cursor-pointer items-center rounded-md border border-surface-3 bg-surface-1 px-3 text-sm font-medium text-ink shadow-sm outline-none hover:bg-surface-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
-	>
-		{triggerLabel}
-	</Popover.Trigger>
+<Popover.Root ids={{ trigger: triggerId }} positioning={{ placement: 'bottom-end' }}>
+	<Tooltip.Root ids={{ trigger: triggerId }} disabled={!!triggerLabel}>
+		<Tooltip.Trigger>
+			{#snippet asChild(tooltipProps)}
+				<Popover.Trigger
+					{...tooltipProps()}
+					aria-label={triggerLabel ? undefined : 'Columns'}
+					class={button({ variant: 'outline', size: triggerLabel ? 'default' : 'icon' })}
+				>
+					{#if triggerLabel}
+						{triggerLabel}
+					{:else}
+						<PhColumns />
+					{/if}
+				</Popover.Trigger>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content>Columns</Tooltip.Content>
+	</Tooltip.Root>
 
 	<Popover.Content class="w-56 p-2" showArrow={false}>
 		<div class="border-b border-surface-3 px-2 pb-2">

package/dist/components/data-table-v9/toolbar/data-table-column-visibility.svelte.d.ts

@@ -3,6 +3,7 @@ import type { DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;
+        /** Text label for the trigger. When omitted, a columns icon is shown instead. */
         triggerLabel?: string;
     };
     exports: {};

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import * as Tooltip from '../../tooltip';
+	import { PhArrowClockwise } from '../../../index.ts/icons';
+
+	type Props = {
+		/** Called on click. If it returns a promise, the button shows a busy state until it settles. */
+		onRefresh: () => void | Promise<unknown>;
+		/** Force the busy state, e.g. when a refresh is triggered elsewhere. */
+		loading?: boolean;
+		/** Text label for the trigger. When omitted, a refresh icon is shown instead. */
+		triggerLabel?: string;
+	};
+
+	let { onRefresh, loading = false, triggerLabel }: Props = $props();
+
+	let pending = $state(false);
+	const busy = $derived(loading || pending);
+
+	async function handleClick() {
+		if (busy) return;
+		pending = true;
+		try {
+			await onRefresh();
+		} finally {
+			pending = false;
+		}
+	}
+</script>
+
+<Tooltip.Root disabled={!!triggerLabel}>
+	<!-- aria-disabled instead of disabled so keyboard focus isn't lost mid-refresh -->
+	<Tooltip.Trigger
+		type="button"
+		variant="outline"
+		size={triggerLabel ? 'default' : 'icon'}
+		class="aria-disabled:cursor-default"
+		aria-label={triggerLabel ? undefined : 'Refresh'}
+		aria-busy={busy}
+		aria-disabled={busy}
+		onclick={handleClick}
+	>
+		<PhArrowClockwise class={busy ? 'animate-spin motion-reduce:animate-none' : undefined} />
+		{triggerLabel}
+	</Tooltip.Trigger>
+	<Tooltip.Content>Refresh</Tooltip.Content>
+</Tooltip.Root>

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

@@ -0,0 +1,11 @@
+type Props = {
+    /** Called on click. If it returns a promise, the button shows a busy state until it settles. */
+    onRefresh: () => void | Promise<unknown>;
+    /** Force the busy state, e.g. when a refresh is triggered elsewhere. */
+    loading?: boolean;
+    /** Text label for the trigger. When omitted, a refresh icon is shown instead. */
+    triggerLabel?: string;
+};
+declare const DataTableRefresh: import("svelte").Component<Props, {}, "">;
+type DataTableRefresh = ReturnType<typeof DataTableRefresh>;
+export default DataTableRefresh;

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

@@ -2,7 +2,7 @@
 	import { onDestroy } from 'svelte';
 	import type { RowData } from '@tanstack/svelte-table';
 	import { cn, type ClassValue } from 'tailwind-variants';
-	import { PhMagnifyingGlass, PhX } from '../../../icons';
+	import { PhMagnifyingGlass, PhX } from '../../../index.ts/icons';
 	import * as Field from '../../field';
 	import type { DataTableInstance } from '../data-table-utils';
 

package/dist/components/data-table-v9/virtual/index.d.ts

@@ -1,3 +1,3 @@
 export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
+export { ColumnFilter, ColumnVisibility, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
 export type { CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnOptions, DataTableColumnType, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase } from '../index';

package/dist/components/data-table-v9/virtual/index.js

@@ -1,2 +1,2 @@
 export { default as Root } from './data-table-virtualized.svelte';
-export { ColumnFilter, ColumnVisibility, FlexRender, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
+export { ColumnFilter, ColumnVisibility, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';

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

@@ -4,9 +4,9 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
 	import { CalendarDateTime, getLocalTimeZone } from '@internationalized/date';
-	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../utils/date';
-	import type { DateValueShape } from '../../utils/date';
-	import { PhCalendarBlank } from '../../icons';
+	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../index.ts/utils/date';
+	import type { DateValueShape } from '../../index.ts/utils/date';
+	import { PhCalendarBlank } from '../../index.ts/icons';
 	import type { DateFieldProps } from './types';
 	import DatePickerCalendar from '../date-picker/date-picker-calendar.svelte';
 

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

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import { DateInput } from '@ark-ui/svelte/date-input';
 	import { Field, useFieldContext } from '@ark-ui/svelte/field';
-	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../utils/date';
+	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../index.ts/utils/date';
 	import { getLocalTimeZone } from '@internationalized/date';
-	import type { DateValue, DateValueShape } from '../../utils/date';
+	import type { DateValue, DateValueShape } from '../../index.ts/utils/date';
 	import type { DateInputProps } from './types';
 
 	let {

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

@@ -2,7 +2,7 @@
 	import { DatePicker } from '@ark-ui/svelte/date-picker';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { CalendarDateTime } from '@internationalized/date';
-	import { PhArrowLeft, PhArrowRight } from '../../icons';
+	import { PhArrowLeft, PhArrowRight } from '../../index.ts/icons';
 	import type { DateValue } from '@ark-ui/svelte/date-picker';
 	import Select from '../select/select.svelte';
 

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

@@ -3,9 +3,9 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
 	import { CalendarDateTime, getLocalTimeZone } from '@internationalized/date';
-	import { toDateValue, fromDateValue, dateValueShape } from '../../utils/date';
-	import type { DateValueShape } from '../../utils/date';
-	import { PhCalendarBlank, PhX } from '../../icons';
+	import { toDateValue, fromDateValue, dateValueShape } from '../../index.ts/utils/date';
+	import type { DateValueShape } from '../../index.ts/utils/date';
+	import { PhCalendarBlank, PhX } from '../../index.ts/icons';
 	import type { DatePickerProps } from './types';
 	import DatePickerCalendar from './date-picker-calendar.svelte';
 

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

@@ -4,9 +4,9 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
 	import { getLocalTimeZone } from '@internationalized/date';
-	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../utils/date';
-	import type { DateValueShape } from '../../utils/date';
-	import { PhCalendarBlank } from '../../icons';
+	import { toDateValue, fromDateValue, dateValueShape, dateValueToString } from '../../index.ts/utils/date';
+	import type { DateValueShape } from '../../index.ts/utils/date';
+	import { PhCalendarBlank } from '../../index.ts/icons';
 	import type { DateRangeFieldProps } from './types';
 	import DatePickerCalendar from '../date-picker/date-picker-calendar.svelte';
 

package/dist/components/dialog/alert-dialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { PhX } from '../../icons';
+	import { PhX } from '../../index.ts/icons';
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import type { AlertDialogProps } from './dialog.types';

package/dist/components/dialog/dialog-close-trigger.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
-	import { PhX } from '../../icons';
+	import { PhX } from '../../index.ts/icons';
 	import {
 		button,
 		type ButtonVariant,
 		type ButtonSize
-	} from '../button/button.variants';
+	} from '../../index.ts/components/button/button.variants';
 	import type { ClassValue } from 'tailwind-variants';
 
 	interface Props extends DialogCloseTriggerBaseProps {

package/dist/components/dialog/dialog-close-trigger.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { DialogCloseTriggerBaseProps } from '@ark-ui/svelte/dialog';
-import { type ButtonVariant, type ButtonSize } from '../button/button.variants';
+import { type ButtonVariant, type ButtonSize } from '../../index.ts/components/button/button.variants';
 import type { ClassValue } from 'tailwind-variants';
 interface Props extends DialogCloseTriggerBaseProps {
     variant?: ButtonVariant;

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

@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
-	import { ScrollArea } from '../..';
+	import { ScrollArea } from '../../index.js';
 
 	interface Props {
 		class?: ClassValue;

package/dist/components/drawer/drawer-close-trigger.svelte

@@ -2,7 +2,7 @@
 	import { Drawer } from '@ark-ui/svelte/drawer';
 	import type { DrawerCloseTriggerBaseProps } from '@ark-ui/svelte/drawer';
 	import type { ClassValue } from 'svelte/elements';
-	import PhX from '../../icons/PhX.svelte';
+	import PhX from '../../index.ts/icons/PhX.svelte';
 
 	interface Props extends DrawerCloseTriggerBaseProps {
 		class?: ClassValue;

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

@@ -2,7 +2,7 @@
 	import { FileUpload } from '@ark-ui/svelte/file-upload';
 	import { getAcceptAttribute } from './utils';
 	import type { FileUploadDropzoneProps } from './types';
-	import { PhUploadSimple } from '../../icons';
+	import { PhUploadSimple } from '../../index.ts/icons';
 
 	let {
 		fileType,

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { FileUpload, type FileUploadFileError } from '@ark-ui/svelte/file-upload';
-	import { PhX } from '../../icons';
+	import { PhX } from '../../index.ts/icons';
 	import type { FileUploadProps } from './types';
 	import { getAcceptAttribute } from './utils';
 	import { getFileIcon } from './icons';

package/dist/components/file-upload/icons.js

@@ -1,4 +1,4 @@
-import { PhFile, PhFileArchive, PhFileText, PhHeadphones, PhImage, PhMicrosoftExcelLogo, PhVideoCamera } from '../../icons';
+import { PhFile, PhFileArchive, PhFileText, PhHeadphones, PhImage, PhMicrosoftExcelLogo, PhVideoCamera } from '../../index.ts/icons';
 export const getFileIcon = (file) => {
     const fileType = file.type;
     const fileName = file.name;

package/dist/components/image-crop-dialog/image-crop-dialog.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import * as Dialog from '../dialog';
 	import ImageCropper from '../image-cropper/image-cropper.svelte';
-	import { Button } from '../..';
-	import { cropImage, processImage } from '../../utils/image-processing';
+	import { Button } from '../../index.js';
+	import { cropImage, processImage } from '../../index.ts/utils/image-processing';
 	import type { ImageCropperCropData } from '../image-cropper/types';
 	import type { ImageCropDialogProps } from './types';
 

package/dist/components/image-crop-dialog/types.d.ts

@@ -1,4 +1,4 @@
-import type { ProcessImageOptions } from '../../utils/image-processing';
+import type { ProcessImageOptions } from '../../index.ts/utils/image-processing';
 export interface ImageCropDialogProps {
     /** Controls dialog open state */
     open: boolean;

package/dist/components/image-cropper/image-cropper.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { ImageCropper, useImageCropper } from '@ark-ui/svelte/image-cropper';
 	import type { ImageCropperProps } from './types';
-	import { Button } from '../..';
-	import { cropImage } from '../../utils/image-processing';
-	import type { ProcessImageOptions } from '../../utils/image-processing';
-	import { PhArrowClockwise, PhArrowCounterClockwise } from '../../icons';
+	import { Button } from '../../index.js';
+	import { cropImage } from '../../index.ts/utils/image-processing';
+	import type { ProcessImageOptions } from '../../index.ts/utils/image-processing';
+	import { PhArrowClockwise, PhArrowCounterClockwise } from '../../index.ts/icons';
 
 	let {
 		src = $bindable(),

package/dist/components/image-cropper/types.d.ts

@@ -1,5 +1,5 @@
 import type { UseImageCropperProps, UseImageCropperReturn } from '@ark-ui/svelte/image-cropper';
-import type { ProcessImageOptions } from '../../utils/image-processing';
+import type { ProcessImageOptions } from '../../index.ts/utils/image-processing';
 export type ImageCropperCropData = ReturnType<ReturnType<UseImageCropperReturn>['getCropData']>;
 export interface ImageCropperProps extends UseImageCropperProps {
     src: string;

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

@@ -2,8 +2,8 @@
 	import { cn } from 'tailwind-variants';
 	import * as Menu from '../menu';
 	import ImageCropDialog from '../image-crop-dialog/image-crop-dialog.svelte';
-	import { fileToDataUrl } from '../../utils/image-processing';
-	import { PhUploadSimple, PhImage, PhX } from '../../icons';
+	import { fileToDataUrl } from '../../index.ts/utils/image-processing';
+	import { PhUploadSimple, PhImage, PhX } from '../../index.ts/icons';
 	import type { ImageUploadProps } from './types';
 
 	let {

package/dist/components/image-upload/types.d.ts

@@ -1,5 +1,5 @@
 import type { ClassValue } from 'tailwind-variants';
-import type { ProcessImageOptions } from '../../utils/image-processing';
+import type { ProcessImageOptions } from '../../index.ts/utils/image-processing';
 export type ImageUploadShape = 'circle' | 'square';
 export interface ImageUploadProps {
     /** Current image src (data URL, blob URL, or remote URL). Bindable. */

package/dist/components/json-tree-view/json-tree-view.svelte

@@ -6,7 +6,7 @@
 	} from '@ark-ui/svelte/json-tree-view';
 	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
-	import { PhCaretRight } from '../../icons';
+	import { PhCaretRight } from '../../index.ts/icons';
 
 	interface Props extends JsonTreeViewRootBaseProps {
 		class?: ClassValue;

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

@@ -2,7 +2,7 @@
 	import { Listbox } from '@ark-ui/svelte/listbox';
 	import type { ListboxContentBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
-	import type { ListItem } from '../../utils/collections';
+	import type { ListItem } from '../../index.ts/utils/collections';
 	import { cn } from 'tailwind-variants';
 	import { getListboxContext } from './listbox-context';
 	import type { ClassValue } from 'svelte/elements';

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

@@ -1,6 +1,6 @@
 import type { ListboxContentBaseProps } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
-import type { ListItem } from '../../utils/collections';
+import type { ListItem } from '../../index.ts/utils/collections';
 import type { ClassValue } from 'svelte/elements';
 type Props = ListboxContentBaseProps & {
     class?: ClassValue;

package/dist/components/listbox/listbox-context.d.ts

@@ -1,5 +1,5 @@
 import type { ListCollection } from '@ark-ui/svelte/collection';
-import type { ListItem } from '../../utils/collections';
+import type { ListItem } from '../../index.ts/utils/collections';
 export declare const getListboxContext: () => {
     readonly collection: ListCollection<ListItem>;
     filter: (text: string) => void;

package/dist/components/listbox/listbox-item-indicator.svelte

@@ -3,7 +3,7 @@
 	import type { ListboxItemIndicatorBaseProps } from '@ark-ui/svelte/listbox';
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
-	import { PhCheck } from '../../icons';
+	import { PhCheck } from '../../index.ts/icons';
 	import type { ClassValue } from 'svelte/elements';
 
 	type Props = ListboxItemIndicatorBaseProps & {

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

@@ -4,7 +4,7 @@
 	import { useFilter } from '@ark-ui/svelte/locale';
 	import type { Snippet } from 'svelte';
 	import type { ListCollection } from '@ark-ui/svelte/collection';
-	import type { ListItem } from '../../utils/collections';
+	import type { ListItem } from '../../index.ts/utils/collections';
 	import { cn } from 'tailwind-variants';
 	import { setListboxContext } from './listbox-context';
 	import type { ClassValue } from 'svelte/elements';

package/dist/components/listbox/listbox-root.svelte.d.ts

@@ -1,6 +1,6 @@
 import { Listbox } from '@ark-ui/svelte/listbox';
 import type { Snippet } from 'svelte';
-import type { ListItem } from '../../utils/collections';
+import type { ListItem } from '../../index.ts/utils/collections';
 import type { ClassValue } from 'svelte/elements';
 declare function $$render<T extends string | number = string>(): {
     props: Omit<Listbox.RootBaseProps<ListItem<T>>, "value" | "onValueChange" | "collection"> & {

package/dist/components/menu/menu-checkbox-item.svelte

@@ -4,7 +4,7 @@
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
 	import MenuItemIndicator from './menu-item-indicator.svelte';
-	import { PhCheck } from '../../icons';
+	import { PhCheck } from '../../index.ts/icons';
 
 	type IndicatorSnippet = { indicator?: Snippet };
 

package/dist/components/menu/menu-indicator.svelte

@@ -3,7 +3,7 @@
 	import type { MenuIndicatorBaseProps } from '@ark-ui/svelte/menu';
 	import type { Snippet } from 'svelte';
 	import { cn } from 'tailwind-variants';
-	import { PhCaretDown } from '../../icons';
+	import { PhCaretDown } from '../../index.ts/icons';
 
 	type Props = MenuIndicatorBaseProps & { class?: string; children?: Snippet };
 

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

@@ -2,7 +2,7 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { NumberInput } from '@ark-ui/svelte/number-input';
 	import type { NumberInputProps } from './types';
-	import { PhCaretDown, PhCaretUp } from '../../icons';
+	import { PhCaretDown, PhCaretUp } from '../../index.ts/icons';
 	import { useLocaleContext } from '@ark-ui/svelte/locale';
 
 	let {

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

@@ -2,7 +2,7 @@
 	import { Field } from '@ark-ui/svelte/field';
 	import { PasswordInput } from '@ark-ui/svelte/password-input';
 	import type { PasswordInputProps } from './types';
-	import { PhEye, PhEyeSlash } from '../../icons';
+	import { PhEye, PhEyeSlash } from '../../index.ts/icons';
 
 	let {
 		value = $bindable(),

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

@@ -7,7 +7,7 @@
 	import type { PhoneInputProps } from './types';
 	import { createListCollection } from '../../utils/collections';
 	import { cn } from 'tailwind-variants';
-	import { PhCaretDown, PhCheck } from '../../icons';
+	import { PhCaretDown, PhCheck } from '../../index.ts/icons';
 	import 'svelte-tel-input/styles/flags.css';
 
 	interface CountryItem {

package/dist/components/popover/popover-close-trigger.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Popover } from '@ark-ui/svelte/popover';
 	import type { PopoverCloseTriggerBaseProps } from '@ark-ui/svelte/popover';
-	import { PhX } from '../../icons';
+	import { PhX } from '../../index.ts/icons';
 	import type { ClassValue } from 'svelte/elements';
 
 	interface Props extends PopoverCloseTriggerBaseProps {

package/dist/components/popover/popover-trigger.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Popover } from '@ark-ui/svelte/popover';
-	import type { PopoverTriggerBaseProps } from '@ark-ui/svelte/popover';
+	import type { PopoverTriggerProps } from '@ark-ui/svelte/popover';
 	import type { ClassValue } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
 
-	interface Props extends PopoverTriggerBaseProps {
+	interface Props extends Omit<PopoverTriggerProps, 'class' | 'children'> {
 		class?: ClassValue;
 		children: Snippet;
 	}

package/dist/components/popover/popover-trigger.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { PopoverTriggerBaseProps } from '@ark-ui/svelte/popover';
+import type { PopoverTriggerProps } from '@ark-ui/svelte/popover';
 import type { ClassValue } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-interface Props extends PopoverTriggerBaseProps {
+interface Props extends Omit<PopoverTriggerProps, 'class' | 'children'> {
     class?: ClassValue;
     children: Snippet;
 }

package/dist/components/select/select.svelte

@@ -3,9 +3,9 @@
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { Select } from '@ark-ui/svelte/select';
 	import type { SelectProps } from './types';
-	import { createListCollection, type ListItem } from '../../utils/collections';
+	import { createListCollection, type ListItem } from '../../index.ts/utils/collections';
 	import { cn } from 'tailwind-variants';
-	import { PhCaretDown, PhCheck } from '../../icons';
+	import { PhCaretDown, PhCheck } from '../../index.ts/icons';
 
 	let {
 		value = $bindable(),

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

@@ -1,6 +1,6 @@
 import { Select } from '@ark-ui/svelte/select';
 import type { SelectProps } from './types';
-import { type ListItem } from '../../utils/collections';
+import { type ListItem } from '../../index.ts/utils/collections';
 declare function $$render<T extends ListItem>(): {
     props: SelectProps<T>;
     exports: {};

package/dist/components/select/types.d.ts

@@ -1,5 +1,5 @@
 import type { SelectRootBaseProps } from '@ark-ui/svelte/select';
-import type { ListItem } from '../../utils/collections';
+import type { ListItem } from '../../index.ts/utils/collections';
 export interface SelectProps<T extends ListItem> extends Omit<SelectRootBaseProps<T>, 'value' | 'collection'> {
     value?: T['value'] | null;
     items: T[];

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

@@ -3,7 +3,7 @@
 	import { useFieldContext } from '@ark-ui/svelte/field';
 	import { cn } from 'tailwind-variants';
 	import type { TagsInputProps } from './types';
-	import { PhX } from '../../icons';
+	import { PhX } from '../../index.ts/icons';
 
 	let {
 		value = $bindable(),

package/dist/components/toast/toast.js

@@ -1,9 +1,17 @@
 import { createToaster } from '@ark-ui/svelte/toast';
-const toaster = createToaster({ placement: 'bottom-end', pauseOnPageIdle: true });
+const toaster = createToaster({
+    placement: 'bottom-end',
+    pauseOnPageIdle: true,
+    duration: 5000
+});
+const typeDurations = { success: 4000, error: 10000 };
 function shorthand(type) {
+    const duration = typeDurations[type];
+    // Only set when defined: an explicit `duration: undefined` would override the global default.
+    const defaults = duration === undefined ? {} : { duration };
     return (title, options) => typeof title === 'string'
-        ? toaster.create({ ...options, title, type })
-        : toaster.create({ ...title, type });
+        ? toaster.create({ ...defaults, ...options, title, type })
+        : toaster.create({ ...defaults, ...title, type });
 }
 export const toast = Object.assign(toaster, {
     info: shorthand('info'),

package/dist/components/toast/toaster.svelte

@@ -5,12 +5,12 @@
 	import { cn } from 'tailwind-variants';
 	import type { ClassValue } from 'tailwind-variants';
 	import { toast } from './toast.js';
-	import PhX from '../../icons/PhX.svelte';
-	import PhCheckCircle from '../../icons/PhCheckCircle.svelte';
-	import PhXCircle from '../../icons/PhXCircle.svelte';
-	import PhWarning from '../../icons/PhWarning.svelte';
-	import PhInfo from '../../icons/PhInfo.svelte';
-	import PhCircleNotch from '../../icons/PhCircleNotch.svelte';
+	import PhX from '../../index.ts/icons/PhX.svelte';
+	import PhCheckCircle from '../../index.ts/icons/PhCheckCircle.svelte';
+	import PhXCircle from '../../index.ts/icons/PhXCircle.svelte';
+	import PhWarning from '../../index.ts/icons/PhWarning.svelte';
+	import PhInfo from '../../index.ts/icons/PhInfo.svelte';
+	import PhCircleNotch from '../../index.ts/icons/PhCircleNotch.svelte';
 
 	interface Props {
 		class?: ClassValue;

package/dist/components/tree-view/tree-view.svelte

@@ -11,8 +11,8 @@
 		PhMagnifyingGlass,
 		PhMinus,
 		PhX
-	} from '../../icons';
-	import { Button, Field, ScrollArea } from '../..';
+	} from '../../index.ts/icons';
+	import { Button, Field, ScrollArea } from '../../index.js';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	let {

package/dist/components/tree-view/types.d.ts

@@ -1,5 +1,5 @@
 import type { UseTreeViewProps } from '@ark-ui/svelte/tree-view';
-import type { TreeItem } from '../../utils/collections';
+import type { TreeItem } from '../../index.ts/utils/collections';
 export interface TreeViewProps<T extends TreeItem> extends Omit<UseTreeViewProps<T>, 'collection'> {
     items?: T[];
     label?: string;

package/dist/icons/PhColumns.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M104,32H64A16,16,0,0,0,48,48V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,104,32Zm0,176H64V48h40ZM192,32H152a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,192,32Zm0,176H152V48h40Z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

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

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

package/dist/icons/PhFunnel.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	let { class: className = '', ...restProps } = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 256 256"
+	class={className}
+	{...restProps}
+>
+	<path
+		fill="currentColor"
+		d="M230.6,49.53A15.81,15.81,0,0,0,216,40H40A16,16,0,0,0,28.19,66.76l.08.09L96,139.17V216a16,16,0,0,0,24.87,13.32l32-21.34A16,16,0,0,0,160,194.66V139.17l67.74-72.32.08-.09A15.8,15.8,0,0,0,230.6,49.53ZM40,56h0Zm106.18,74.58A8,8,0,0,0,144,136v58.66L112,216V136a8,8,0,0,0-2.16-5.47L40,56H216Z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

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

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

package/dist/icons/index.d.ts

@@ -9,11 +9,13 @@ export { default as PhCaretDown } from './PhCaretDown.svelte';
 export { default as PhCaretRight } from './PhCaretRight.svelte';
 export { default as PhCaretUp } from './PhCaretUp.svelte';
 export { default as PhCheck } from './PhCheck.svelte';
+export { default as PhColumns } from './PhColumns.svelte';
 export { default as PhEye } from './PhEye.svelte';
 export { default as PhEyeSlash } from './PhEyeSlash.svelte';
 export { default as PhFile } from './PhFile.svelte';
 export { default as PhFileArchive } from './PhFileArchive.svelte';
 export { default as PhFileText } from './PhFileText.svelte';
+export { default as PhFunnel } from './PhFunnel.svelte';
 export { default as PhHeadphones } from './PhHeadphones.svelte';
 export { default as PhImage } from './PhImage.svelte';
 export { default as PhListMagnifyingGlass } from './PhListMagnifyingGlass.svelte';

package/dist/icons/index.js

@@ -9,11 +9,13 @@ export { default as PhCaretDown } from './PhCaretDown.svelte';
 export { default as PhCaretRight } from './PhCaretRight.svelte';
 export { default as PhCaretUp } from './PhCaretUp.svelte';
 export { default as PhCheck } from './PhCheck.svelte';
+export { default as PhColumns } from './PhColumns.svelte';
 export { default as PhEye } from './PhEye.svelte';
 export { default as PhEyeSlash } from './PhEyeSlash.svelte';
 export { default as PhFile } from './PhFile.svelte';
 export { default as PhFileArchive } from './PhFileArchive.svelte';
 export { default as PhFileText } from './PhFileText.svelte';
+export { default as PhFunnel } from './PhFunnel.svelte';
 export { default as PhHeadphones } from './PhHeadphones.svelte';
 export { default as PhImage } from './PhImage.svelte';
 export { default as PhListMagnifyingGlass } from './PhListMagnifyingGlass.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.75.4",
+	"version": "0.77.0",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -22,6 +22,15 @@
 		"patch": "npm version patch && npm publish",
 		"minor": "npm version minor && npm publish"
 	},
+	"imports": {
+		"#lib": "./src/lib/index.ts",
+		"#lib/*": [
+			"./src/lib/*",
+			"./src/lib/*.ts",
+			"./src/lib/*.js",
+			"./src/lib/*/index.ts"
+		]
+	},
 	"files": [
 		"dist",
 		"!dist/**/*.test.*",
@@ -63,10 +72,10 @@
 		"@eslint/js": "^10.0.1",
 		"@faker-js/faker": "^10.6.0",
 		"@iconify-json/ph": "^1.2.2",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/adapter-cloudflare": "^7.2.9",
-		"@sveltejs/kit": "^2.70.3",
-		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/adapter-auto": "^8.0.0",
+		"@sveltejs/adapter-cloudflare": "^8.0.0",
+		"@sveltejs/kit": "^3.0.1",
+		"@sveltejs/package": "^3.0.0",
 		"@sveltejs/vite-plugin-svelte": "^7.3.0",
 		"@tailwindcss/vite": "^4.3.3",
 		"@tanstack/intent": "^0.4.0",
@@ -80,7 +89,7 @@
 		"prettier-plugin-svelte": "^4.1.1",
 		"prettier-plugin-tailwindcss": "^0.8.1",
 		"publint": "^0.3.24",
-		"svelte": "^5.57.0",
+		"svelte": "^5.57.1",
 		"svelte-check": "^4.7.6",
 		"tailwindcss": "^4.3.3",
 		"tw-animate-css": "^1.4.0",

package/skills/data-table/SKILL.md

@@ -8,7 +8,7 @@ description: >
 metadata:
   type: composition
   library: compote-ui
-  library_version: '0.74.2'
+  library_version: '0.75.5'
 requires:
   - component-usage
   - theming
@@ -151,6 +151,42 @@ bun add @tanstack/svelte-virtual
 </div>
 ```
 
+### Label toolbar triggers
+
+`ColumnFilter` and `ColumnVisibility` render icon-only outline buttons by default (funnel and
+columns icons, with `aria-label` and a hover tooltip). Pass `triggerLabel` to show text instead. `ColumnFilter`
+shows the active filter count as a badge in the corner either way.
+
+```svelte
+<DataTable.ColumnFilter {table} triggerLabel="Filters" />
+<DataTable.ColumnVisibility {table} triggerLabel="Columns" />
+```
+
+### Add a refresh button
+
+`DataTable.Refresh` is data-source agnostic: it calls `onRefresh` and, if that returns a promise,
+spins its icon and sets `aria-busy` until the promise settles. Clicks while busy are ignored. Pass
+`loading` to force the busy state when a refresh starts elsewhere (polling, another control).
+
+```svelte
+<script lang="ts">
+	import { getInvoices } from './invoices.remote';
+
+	const invoices = getInvoices();
+</script>
+
+<DataTable.Toolbar>
+	{#snippet right()}
+		<DataTable.Refresh onRefresh={() => invoices.refresh()} />
+		<DataTable.ColumnFilter {table} />
+		<DataTable.ColumnVisibility {table} />
+	{/snippet}
+</DataTable.Toolbar>
+```
+
+Props: `onRefresh: () => void | Promise<unknown>`, `loading?: boolean`, `triggerLabel?: string`
+(icon-only with `aria-label="Refresh"` and a tooltip when omitted). Errors thrown by `onRefresh` are not caught.
+
 ## Common Mistakes
 
 ### CRITICAL Missing id for accessorFn column