compote-ui 0.75.3 → 0.76.0

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 '../../../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 '../../../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 '../../../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/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/menu/menu-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Menu } from '@ark-ui/svelte/menu';
+	import { Menu, useMenuContext } from '@ark-ui/svelte/menu';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import type { MenuContentBaseProps } from '@ark-ui/svelte/menu';
 	import type { Snippet } from 'svelte';
@@ -11,6 +11,26 @@
 	};
 
 	const { class: className, children, ...restProps }: Props = $props();
+
+	const menu = useMenuContext();
+	const open = $derived(menu().open);
+
+	// Workaround for context menus opening at (0,0) the first time: zag skips
+	// `trackPositioning` for context triggers, so `currentPlacement` is first set in
+	// the popper's onComplete — after it wrote --x/--y. That changes the positioner
+	// style, and Svelte rewrites the whole `style` attribute, wiping --x/--y.
+	// Re-positioning once that settles makes the coordinates stick.
+	$effect(() => {
+		if (!open) return;
+		let inner = 0;
+		const outer = requestAnimationFrame(() => {
+			inner = requestAnimationFrame(() => menu().reposition());
+		});
+		return () => {
+			cancelAnimationFrame(outer);
+			cancelAnimationFrame(inner);
+		};
+	});
 </script>
 
 <Portal>

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/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.3",
+	"version": "0.76.0",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -71,7 +71,7 @@
 		"@tailwindcss/vite": "^4.3.3",
 		"@tanstack/intent": "^0.4.0",
 		"@tanstack/svelte-table": "9.2.4",
-		"@types/node": "^22.20.3",
+		"@types/node": "^24",
 		"eslint": "^10.10.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.23.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