compote-ui 0.79.2 → 0.81.0

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

@@ -1,26 +1,15 @@
 <script lang="ts" generics="T extends RowData">
-	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';
-	import type { DataTableInstance } from '../data-table-utils';
+	import { getColumnLabel, type DataTableInstance } from '../data-table-utils';
 	import type { DataTableFeatures } from '../features';
-	import NumberInput from '../../number-input/number-input.svelte';
-	import * as Field from '../../field';
 	import Badge from '../../badge/badge.svelte';
 	import { button } from '../../button/button.variants';
 	import { PhX, PhMagnifyingGlass, PhFunnel } from '../../../icons';
-	import {
-		selectFilterOptions,
-		type SelectFilterOption,
-		type SelectFilterValue
-	} from '../../../utils/select-filter';
-	import { mergeRangeFilter, rangeBounds, type PendingRange } from '../../../utils/range-filter';
-	import { DebouncedFilterEdits } from '../../../utils/debounced-filter-edit.svelte';
-	import { getFilterRevisions } from '../filter-revisions.svelte';
+	import { ColumnFilterEditing } from '../column-filter-editing.svelte';
+	import ColumnFilterEditor from '../filter-editors/column-filter-editor.svelte';
 
 	type Props = {
 		table: DataTableInstance<T>;
@@ -33,23 +22,12 @@
 	// Popover and tooltip share one trigger element, so both must agree on its id.
 	const triggerId = $props.id();
 
-	// Debounced edits not committed yet. A control shows its pending edit if there is one,
-	// otherwise the column's live filter value — so a filter changed from outside (the app
-	// calling setFilterValue / setColumnFilters / resetColumnFilters) never leaves a stale
-	// value in the inputs, an edit pending during that change is dropped rather than
-	// re-applied, and committing one range bound never restores the other's old value.
-	const textEdits = new DebouncedFilterEdits<string>();
-	const rangeEdits = new DebouncedFilterEdits<PendingRange>();
-
-	// What an edit is based on: the column's filter revision, which only ever goes up, so a
-	// filter cleared and set back to its old value still makes the edit stale. Tables not
-	// made by compote's createTable have no revisions; fall back to the filter value.
-	const filterRevisions = $derived(getFilterRevisions(table));
-	function editBase(column: Column<DataTableFeatures, T, unknown>): unknown {
-		return filterRevisions ? filterRevisions.get(column.id) : column.getFilterValue();
-	}
-
-	let localSelectSearch: Record<string, string> = $state({});
+	// Pending edits belong to the table: shared with the other filter hosts, and they still
+	// commit after this popover closes.
+	const editing = new ColumnFilterEditing({
+		table: () => table,
+		isActive: (columnId) => activeFilterIds.includes(columnId)
+	});
 
 	const columnFilters = $derived.by(() => table.atoms.columnFilters.get());
 	const columnVisibility = $derived.by(() => table.atoms.columnVisibility.get());
@@ -87,20 +65,6 @@
 			);
 	});
 
-	onDestroy(() => {
-		textEdits.cancelAll();
-		rangeEdits.cancelAll();
-	});
-
-	function getColumnType(column: Column<DataTableFeatures, T, unknown>): string | undefined {
-		return (column.columnDef.meta as Record<string, unknown> | undefined)?.type as
-			string | undefined;
-	}
-
-	function getColumnLabel(column: Column<DataTableFeatures, T, unknown>): string {
-		return typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id;
-	}
-
 	function addFilter(column: Column<DataTableFeatures, T, unknown>) {
 		manualFilterIds = [...manualFilterIds, column.id];
 		showColumnPicker = false;
@@ -109,103 +73,17 @@
 
 	function removeFilter(column: Column<DataTableFeatures, T, unknown>) {
 		manualFilterIds = manualFilterIds.filter((id) => id !== column.id);
-		textEdits.cancel(column.id);
-		rangeEdits.cancel(column.id);
+		editing.cancel(column.id);
 		column.setFilterValue(undefined);
-		delete localSelectSearch[column.id];
 	}
 
 	function clearFilters() {
-		textEdits.cancelAll();
-		rangeEdits.cancelAll();
-		localSelectSearch = {};
+		editing.cancelAll();
 		manualFilterIds = [];
 		showColumnPicker = false;
 		columnSearchText = '';
 		table.resetColumnFilters();
 	}
-
-	function getTextValue(column: Column<DataTableFeatures, T, unknown>): string {
-		const value = column.getFilterValue();
-		return textEdits.get(column.id, editBase(column)) ?? (typeof value === 'string' ? value : '');
-	}
-
-	/**
-	 * Whether `column` still has a filter card. A card torn down by an outside change can
-	 * still emit — Ark's NumberInput commits the typed number on the blur its unmount
-	 * triggers — and that must not write back a filter the app just cleared.
-	 */
-	function isCardActive(column: Column<DataTableFeatures, T, unknown>): boolean {
-		return activeFilterIds.includes(column.id);
-	}
-
-	function handleTextInput(column: Column<DataTableFeatures, T, unknown>, value: string) {
-		if (!isCardActive(column)) return;
-		textEdits.edit(
-			column.id,
-			editBase(column),
-			() => value,
-			() => editBase(column),
-			(text) => column.setFilterValue(text || undefined)
-		);
-	}
-
-	function getRangeBound(
-		column: Column<DataTableFeatures, T, unknown>,
-		which: 'min' | 'max'
-	): number | null {
-		const value = column.getFilterValue();
-		const pending = rangeEdits.get(column.id, editBase(column));
-		if (pending && which in pending) return pending[which] ?? null;
-		return rangeBounds(value)[which === 'min' ? 0 : 1] ?? null;
-	}
-
-	function handleNumericInput(
-		column: Column<DataTableFeatures, T, unknown>,
-		which: 'min' | 'max',
-		value: number | null
-	) {
-		if (!isCardActive(column)) return;
-		rangeEdits.edit(
-			column.id,
-			editBase(column),
-			(pending) => ({ ...pending, [which]: value }),
-			() => editBase(column),
-			(pending) => column.setFilterValue(mergeRangeFilter(column.getFilterValue(), pending))
-		);
-	}
-
-	function getSelectValues(column: Column<DataTableFeatures, T, unknown>): SelectFilterValue[] {
-		return (column.getFilterValue() as SelectFilterValue[] | undefined) ?? [];
-	}
-
-	function handleSelectChange(
-		column: Column<DataTableFeatures, T, unknown>,
-		value: SelectFilterValue,
-		checked: boolean
-	) {
-		const current = getSelectValues(column);
-		const next = checked ? [...current, value] : current.filter((v) => v !== value);
-		column.setFilterValue(next.length ? next : undefined);
-	}
-
-	function getSelectOptions(column: Column<DataTableFeatures, T, unknown>): SelectFilterOption[] {
-		return selectFilterOptions(column.getFacetedUniqueValues());
-	}
-
-	function getFacetedMinMax(
-		column: Column<DataTableFeatures, T, unknown>
-	): [number | undefined, number | undefined] {
-		const vals = column.getFacetedMinMaxValues();
-		return vals ? [vals[0] as number, vals[1] as number] : [undefined, undefined];
-	}
-
-	function getColumnFormatOptions(
-		column: Column<DataTableFeatures, T, unknown>
-	): Intl.NumberFormatOptions | undefined {
-		return (column.columnDef.meta as Record<string, unknown> | undefined)?.formatOptions as
-			Intl.NumberFormatOptions | undefined;
-	}
 </script>
 
 <Popover.Root ids={{ trigger: triggerId }} positioning={{ placement: 'bottom-end' }}>
@@ -243,7 +121,7 @@
 
 	<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>
+			<Popover.Title class="text-sm font-medium text-ink">Filters</Popover.Title>
 			{#if activeCount > 0}
 				<button type="button" onclick={clearFilters} class="text-xs text-primary hover:underline">
 					Clear all
@@ -269,141 +147,7 @@
 										</button>
 									</div>
 
-									{#if getColumnType(column) === 'number' || getColumnType(column) === 'currency' || getColumnType(column) === 'percent'}
-										{@const [facetMin, facetMax] = getFacetedMinMax(column)}
-										{@const colFormatOptions = getColumnFormatOptions(column)}
-										<div class="flex flex-col gap-1.5">
-											<div class="min-w-0 flex-1">
-												<NumberInput
-													layout="horizontal"
-													label="From"
-													bind:value={
-														() => getRangeBound(column, 'min'),
-														(bound) => handleNumericInput(column, 'min', bound ?? null)
-													}
-													min={facetMin}
-													max={facetMax}
-													formatOptions={colFormatOptions}
-												/>
-											</div>
-											<div class="min-w-0 flex-1">
-												<NumberInput
-													layout="horizontal"
-													label="To"
-													bind:value={
-														() => getRangeBound(column, 'max'),
-														(bound) => handleNumericInput(column, 'max', bound ?? null)
-													}
-													min={facetMin}
-													max={facetMax}
-													formatOptions={colFormatOptions}
-												/>
-											</div>
-										</div>
-									{:else if getColumnType(column) === 'boolean'}
-										{@const boolFilter = column.getFilterValue() as boolean | undefined}
-										<div class="flex overflow-hidden rounded border border-border text-xs">
-											<button
-												type="button"
-												onclick={() => column.setFilterValue(undefined)}
-												class={cn(
-													'flex-1 px-2 py-1',
-													boolFilter === undefined
-														? 'bg-surface-3 font-medium text-ink'
-														: 'text-ink-dim hover:bg-surface-2'
-												)}
-											>
-												All
-											</button>
-											<button
-												type="button"
-												onclick={() =>
-													column.setFilterValue(boolFilter === true ? undefined : true)}
-												class={cn(
-													'flex-1 border-x border-border px-2 py-1',
-													boolFilter === true
-														? 'bg-surface-3 font-medium text-ink'
-														: 'text-ink-dim hover:bg-surface-2'
-												)}
-											>
-												Yes
-											</button>
-											<button
-												type="button"
-												onclick={() =>
-													column.setFilterValue(boolFilter === false ? undefined : false)}
-												class={cn(
-													'flex-1 px-2 py-1',
-													boolFilter === false
-														? 'bg-surface-3 font-medium text-ink'
-														: 'text-ink-dim hover:bg-surface-2'
-												)}
-											>
-												No
-											</button>
-										</div>
-									{:else if getColumnType(column) === 'select'}
-										{@const allOptions = getSelectOptions(column)}
-										{@const search = localSelectSearch[column.id] ?? ''}
-										{@const options = search
-											? allOptions.filter((o) =>
-													o.label.toLowerCase().includes(search.toLowerCase())
-												)
-											: allOptions}
-										{@const selected = getSelectValues(column)}
-										<div class="flex flex-col gap-1">
-											<Field.Root hideMessageLine>
-												<Field.Input
-													placeholder="Search..."
-													value={search}
-													oninput={(e: Event) => {
-														localSelectSearch[column.id] = (
-															e.currentTarget as HTMLInputElement
-														).value;
-													}}
-												/>
-											</Field.Root>
-											<ScrollArea.Root>
-												<ScrollArea.Viewport class="max-h-40">
-													<ScrollArea.Content>
-														<div class="flex flex-col gap-0.5">
-															{#each options as option (option.value)}
-																<div
-																	class="flex min-h-7 items-center gap-2 rounded-sm pr-2 hover:bg-surface-2"
-																>
-																	<Checkbox
-																		size="sm"
-																		label={option.label}
-																		class="min-h-7 flex-1 px-2"
-																		checked={selected.includes(option.value)}
-																		onCheckedChange={({ checked }) =>
-																			handleSelectChange(column, option.value, checked === true)}
-																	/>
-																	<span class="text-xs text-ink-dim tabular-nums"
-																		>{option.count}</span
-																	>
-																</div>
-															{/each}
-														</div>
-													</ScrollArea.Content>
-												</ScrollArea.Viewport>
-												<ScrollArea.Scrollbar orientation="vertical">
-													<ScrollArea.Thumb />
-												</ScrollArea.Scrollbar>
-												<ScrollArea.Corner />
-											</ScrollArea.Root>
-										</div>
-									{:else}
-										<Field.Root hideMessageLine>
-											<Field.Input
-												placeholder="Search..."
-												bind:value={
-													() => getTextValue(column),
-													(text) => handleTextInput(column, String(text ?? ''))
-												}
-											/>
-										</Field.Root>
-									{/if}
+									<ColumnFilterEditor {column} {editing} />
 								</div>
 							{/each}
 						</ScrollArea.Content>

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

@@ -1,5 +1,5 @@
 import type { RowData } from '@tanstack/svelte-table';
-import type { DataTableInstance } from '../data-table-utils';
+import { type DataTableInstance } from '../data-table-utils';
 declare function $$render<T extends RowData>(): {
     props: {
         table: DataTableInstance<T>;

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

@@ -1,4 +1,4 @@
-import type { FilterFnOption, RowData } from '@tanstack/svelte-table';
+import type { Column, FilterFnOption, RowData } from '@tanstack/svelte-table';
 import type { Component, Snippet } from 'svelte';
 import type { DataTableFeatures } from './features';
 export type DataTableAlign = 'left' | 'center' | 'right';
@@ -63,6 +63,8 @@ export type DataTableGroupColumn<T extends RowData> = DataTableColumnBase & {
     formatLocale?: never;
 };
 export type DataTableColumn<T extends RowData> = DataTableLeafColumn<T> | DataTableGroupColumn<T>;
+/** A column of a compote data table, as `table.getColumn()` and `getAllLeafColumns()` return it. */
+export type DataTableColumnInstance<T extends RowData> = Column<DataTableFeatures, T, unknown>;
 export type DataTableColumnMeta = {
     align?: DataTableAlign;
     type?: DataTableColumnType;

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

@@ -14,6 +14,8 @@
 		caption?: string;
 		emptyMessage?: string;
 		class?: ClassValue;
+		/** Show a filter funnel in the header of every filterable column. */
+		headerFilters?: boolean;
 		onRowClick?: (details: { row: T; event: MouseEvent }) => void;
 		onRowDoubleClick?: (details: { row: T; event: MouseEvent }) => void;
 	};
@@ -23,6 +25,7 @@
 		caption,
 		emptyMessage = 'No rows found',
 		class: className,
+		headerFilters = false,
 		onRowClick,
 		onRowDoubleClick,
 		...rest
@@ -52,7 +55,7 @@
 			{#if caption}
 				<caption class="sr-only">{caption}</caption>
 			{/if}
-			<DataTableHead {table} {view} isVirtual />
+			<DataTableHead {table} {view} isVirtual {headerFilters} />
 			{#if scrollContainerRef}
 				<DataTableVirtualRows
 					{table}

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

@@ -8,6 +8,8 @@ declare function $$render<T extends RowData>(): {
         caption?: string;
         emptyMessage?: string;
         class?: ClassValue;
+        /** Show a filter funnel in the header of every filterable column. */
+        headerFilters?: boolean;
         onRowClick?: (details: {
             row: T;
             event: MouseEvent;

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, 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';
+export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, filterKindFor, getColumnFilterKind, getColumnLabel, renderComponent, renderSnippet, selectFilterOptions } from '../index';
+export type { ColumnFilterEditingOptions, ColumnFilterKind, CreateDataTableOptions, DataTableAccessorFnColumn, DataTableAccessorKeyColumn, DataTableAlign, DataTableCellPropsResolver, DataTableCellRenderProps, DataTableColumn, DataTableColumnBase, DataTableColumnInstance, DataTableColumnOptions, DataTableColumnType, DataTableGroupColumn, DataTableInstance, DataTableLeafColumn, DataTableLeafColumnBase, FilterableColumn, SelectFilterOption, SelectFilterValue } 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, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, renderComponent, renderSnippet } from '../index';
+export { ColumnFilter, ColumnFilterEditing, ColumnFilterEditor, ColumnVisibility, EMPTY_SELECT_VALUE, FlexRender, Refresh, Search, Title, Toolbar, createDataTableColumnHelper, createTable, filterKindFor, getColumnFilterKind, getColumnLabel, renderComponent, renderSnippet, selectFilterOptions } from '../index';

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

@@ -2,6 +2,7 @@
 	import { PhX } from '../../icons';
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
 	import type { AlertDialogProps } from './dialog.types';
 
 	let {
@@ -37,6 +38,7 @@
 		>
 			<Dialog.Content
 				class="relative w-full max-w-md rounded-lg border bg-surface-1 p-6 shadow-xl 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"
+				{...releaseFocusOnExitProps}
 			>
 				<Dialog.Title class="text-lg leading-none font-semibold tracking-tight">
 					{title}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { Dialog } from '@ark-ui/svelte/dialog';
 	import { Portal } from '@ark-ui/svelte/portal';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
 	import { cn } from 'tailwind-variants';
 	import type { DialogProps } from './dialog.types';
 
@@ -35,6 +36,7 @@
 					'relative w-full max-w-2xl rounded-lg border bg-surface-1 p-6 shadow-xl 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',
 					contentClass
 				)}
+				{...releaseFocusOnExitProps}
 			>
 				{@render children()}
 			</Dialog.Content>

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

@@ -3,6 +3,7 @@
 	import type { DrawerContentBaseProps } from '@ark-ui/svelte/drawer';
 	import type { ClassValue } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
 
 	interface Props extends DrawerContentBaseProps {
 		class?: ClassValue;
@@ -54,6 +55,7 @@
 			'pointer-events-auto relative flex h-full w-full flex-col bg-surface-1 shadow-xl outline-none',
 			className
 		)}
+		{...releaseFocusOnExitProps}
 	>
 		{@render children?.()}
 	</Drawer.Content>

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

@@ -1,28 +1,54 @@
 <script lang="ts">
-	import { Popover } from '@ark-ui/svelte/popover';
+	import { Popover, usePopoverContext } from '@ark-ui/svelte/popover';
+	import type { PopoverContentProps } from '@ark-ui/svelte/popover';
 	import { Portal } from '@ark-ui/svelte/portal';
 	import { cn } from 'tailwind-variants';
+	import { releaseFocusOnExitProps } from '../../utils/release-focus-on-exit';
 	import type { ClassValue } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
+	import { getPopoverLabels } from './popover-labels.svelte';
 
-	interface Props {
+	interface Props extends Omit<PopoverContentProps, 'class' | 'children'> {
 		class?: ClassValue;
 		children: Snippet;
 		showArrow?: boolean;
 	}
 
-	let { class: className, children, showArrow = true }: Props = $props();
+	let {
+		class: className,
+		children,
+		showArrow = true,
+		'aria-labelledby': ariaLabelledby,
+		'aria-describedby': ariaDescribedby,
+		...rest
+	}: Props = $props();
+
+	const popover = usePopoverContext();
+	const labels = getPopoverLabels();
+
+	// Explicit labelling wins; otherwise link the Title / Description rendered inside.
+	const labelledby = $derived(
+		ariaLabelledby ??
+			(labels?.hasTitle && !rest['aria-label'] ? popover().getTitleProps().id : undefined)
+	);
+	const describedby = $derived(
+		ariaDescribedby ?? (labels?.hasDescription ? popover().getDescriptionProps().id : undefined)
+	);
 </script>
 
 <Portal>
 	<Popover.Positioner>
 		<Popover.Content
+			{...rest}
+			aria-labelledby={labelledby}
+			aria-describedby={describedby}
 			class={cn(
 				'z-50 w-72 rounded-md border bg-surface-document p-4 shadow-md outline-none [--arrow-background:var(--compote-surface-1)] [--arrow-size:10px]',
 				'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',
 				className
 			)}
+			{...releaseFocusOnExitProps}
 		>
 			{#if showArrow}
 				<Popover.Arrow>

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

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

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

@@ -2,12 +2,16 @@
 	import { Popover } from '@ark-ui/svelte/popover';
 	import type { PopoverDescriptionBaseProps } from '@ark-ui/svelte/popover';
 	import type { ClassValue } from 'svelte/elements';
+	import { getPopoverLabels } from './popover-labels.svelte';
 
 	interface Props extends PopoverDescriptionBaseProps {
 		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
+
+	const labels = getPopoverLabels();
+	$effect(() => labels?.registerDescription());
 </script>
 
 <Popover.Description {...rest} class={className ?? 'mt-1 text-sm text-ink-dim'}>

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

@@ -0,0 +1,18 @@
+/**
+ * Which labelling parts a popover currently renders. Zag checks for a title/description only
+ * when its machine starts — before lazily mounted content exists — so it never sets
+ * `aria-labelledby` / `aria-describedby` on the content. Title and Description register here
+ * instead, and Content links them by the ids zag gives them.
+ */
+export declare class PopoverLabels {
+    #private;
+    get hasTitle(): boolean;
+    get hasDescription(): boolean;
+    /** Registers a rendered title; returns the unregister function. */
+    registerTitle(): () => void;
+    /** Registers a rendered description; returns the unregister function. */
+    registerDescription(): () => void;
+}
+export declare function setPopoverLabels(): PopoverLabels;
+/** Undefined when the part is rendered outside compote's `Popover.Root`. */
+export declare function getPopoverLabels(): PopoverLabels | undefined;

package/dist/components/popover/popover-labels.svelte.js

@@ -0,0 +1,35 @@
+import { getContext, setContext, untrack } from 'svelte';
+const key = Symbol('compote-popover-labels');
+/**
+ * Which labelling parts a popover currently renders. Zag checks for a title/description only
+ * when its machine starts — before lazily mounted content exists — so it never sets
+ * `aria-labelledby` / `aria-describedby` on the content. Title and Description register here
+ * instead, and Content links them by the ids zag gives them.
+ */
+export class PopoverLabels {
+    #titles = $state(0);
+    #descriptions = $state(0);
+    get hasTitle() {
+        return this.#titles > 0;
+    }
+    get hasDescription() {
+        return this.#descriptions > 0;
+    }
+    /** Registers a rendered title; returns the unregister function. */
+    registerTitle() {
+        untrack(() => this.#titles++);
+        return () => untrack(() => this.#titles--);
+    }
+    /** Registers a rendered description; returns the unregister function. */
+    registerDescription() {
+        untrack(() => this.#descriptions++);
+        return () => untrack(() => this.#descriptions--);
+    }
+}
+export function setPopoverLabels() {
+    return setContext(key, new PopoverLabels());
+}
+/** Undefined when the part is rendered outside compote's `Popover.Root`. */
+export function getPopoverLabels() {
+    return getContext(key);
+}

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

@@ -2,6 +2,7 @@
 	import { Popover } from '@ark-ui/svelte/popover';
 	import type { PopoverRootBaseProps } from '@ark-ui/svelte/popover';
 	import type { Snippet } from 'svelte';
+	import { setPopoverLabels } from './popover-labels.svelte';
 
 	interface Props extends PopoverRootBaseProps {
 		open?: boolean;
@@ -17,6 +18,8 @@
 		unmountOnExit = true,
 		...restProps
 	}: Props = $props();
+
+	setPopoverLabels();
 </script>
 
 <Popover.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>

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

@@ -2,12 +2,16 @@
 	import { Popover } from '@ark-ui/svelte/popover';
 	import type { PopoverTitleBaseProps } from '@ark-ui/svelte/popover';
 	import type { ClassValue } from 'svelte/elements';
+	import { getPopoverLabels } from './popover-labels.svelte';
 
 	interface Props extends PopoverTitleBaseProps {
 		class?: ClassValue;
 	}
 
 	let { class: className, children, ...rest }: Props = $props();
+
+	const labels = getPopoverLabels();
+	$effect(() => labels?.registerTitle());
 </script>
 
 <Popover.Title {...rest} class={className ?? 'text-sm font-semibold'}>

package/dist/icons/PhFunnelFill.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="m227.81 66.76l-.08.09L160 139.17v55.49a16 16 0 0 1-7.13 13.34l-32 21.34A16 16 0 0 1 96 216v-76.83L28.27 66.85l-.08-.09A16 16 0 0 1 40 40h176a16 16 0 0 1 11.84 26.76Z"
+	/>
+</svg>
+
+<!-- Icon from Phosphor by Phosphor Icons - https://github.com/phosphor-icons/core/blob/main/LICENSE -->

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

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