compote-ui 0.79.1 → 0.80.0

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

@@ -1,15 +1,19 @@
-<script lang="ts">
-	import { Popover } from '@ark-ui/svelte/popover';
-	import type { PopoverDescriptionBaseProps } from '@ark-ui/svelte/popover';
-	import type { ClassValue } from 'svelte/elements';
-
-	interface Props extends PopoverDescriptionBaseProps {
-		class?: ClassValue;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<Popover.Description {...rest} class={className ?? 'mt-1 text-sm text-ink-dim'}>
-	{@render children?.()}
-</Popover.Description>
+<script lang="ts">
+	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'}>
+	{@render children?.()}
+</Popover.Description>

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

@@ -1,24 +1,27 @@
-<script lang="ts">
-	import { Popover } from '@ark-ui/svelte/popover';
-	import type { PopoverRootBaseProps } from '@ark-ui/svelte/popover';
-	import type { Snippet } from 'svelte';
-
-	interface Props extends PopoverRootBaseProps {
-		open?: boolean;
-		children: Snippet;
-		lazyMount?: boolean;
-		unmountOnExit?: boolean;
-	}
-
-	let {
-		open = $bindable(),
-		children,
-		lazyMount = true,
-		unmountOnExit = true,
-		...restProps
-	}: Props = $props();
-</script>
-
-<Popover.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
-	{@render children()}
-</Popover.Root>
+<script lang="ts">
+	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;
+		children: Snippet;
+		lazyMount?: boolean;
+		unmountOnExit?: boolean;
+	}
+
+	let {
+		open = $bindable(),
+		children,
+		lazyMount = true,
+		unmountOnExit = true,
+		...restProps
+	}: Props = $props();
+
+	setPopoverLabels();
+</script>
+
+<Popover.Root bind:open {lazyMount} {unmountOnExit} {...restProps}>
+	{@render children()}
+</Popover.Root>

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

@@ -1,15 +1,19 @@
-<script lang="ts">
-	import { Popover } from '@ark-ui/svelte/popover';
-	import type { PopoverTitleBaseProps } from '@ark-ui/svelte/popover';
-	import type { ClassValue } from 'svelte/elements';
-
-	interface Props extends PopoverTitleBaseProps {
-		class?: ClassValue;
-	}
-
-	let { class: className, children, ...rest }: Props = $props();
-</script>
-
-<Popover.Title {...rest} class={className ?? 'text-sm font-semibold'}>
-	{@render children?.()}
-</Popover.Title>
+<script lang="ts">
+	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'}>
+	{@render children?.()}
+</Popover.Title>

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;

package/dist/icons/index.d.ts

@@ -16,6 +16,7 @@ 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 PhFunnelFill } from './PhFunnelFill.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

@@ -16,6 +16,7 @@ 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 PhFunnelFill } from './PhFunnelFill.svelte';
 export { default as PhHeadphones } from './PhHeadphones.svelte';
 export { default as PhImage } from './PhImage.svelte';
 export { default as PhListMagnifyingGlass } from './PhListMagnifyingGlass.svelte';

package/dist/utils/date-filter.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Calendar-day range filters for date and date-time columns.
+ *
+ * The filter value is `[from?, to?]`, each an ISO calendar date (`YYYY-MM-DD`) or empty — no
+ * time, no zone, so it serializes cleanly. Both bounds are inclusive days. A cell matches
+ * when the day it shows in the display zone (see `readDateInZone`) falls inside the range.
+ * For an instant that is the half-open interval [start of `from`, start of the day after
+ * `to`) in that zone, with day starts taken from the calendar — so 23- and 25-hour DST days
+ * need no special handling.
+ */
+import { CalendarDate } from '@internationalized/date';
+/** A date range filter value as stored in table state. */
+export type DateRangeFilterValue = [from?: string, to?: string];
+/** A filter value read into calendar dates; an absent bound leaves that end open. */
+export type DateRange = {
+    from?: CalendarDate;
+    to?: CalendarDate;
+};
+/**
+ * The range a filter value stands for. Invalid bounds are dropped and a reversed range is
+ * swapped (as TanStack's `inNumberRange` does). Always returns a range — never undefined —
+ * because the table falls back to the raw value when `resolveFilterValue` returns nullish.
+ */
+export declare function resolveDateRange(filterValue: unknown): DateRange;
+/** Whether a filter value has no usable bound, so the filter should be removed. */
+export declare function isEmptyDateRange(filterValue: unknown): boolean;
+/**
+ * Whether a cell value falls in `range`, judged by the calendar day it shows in `timeZone`.
+ * Empty or unparseable cell values never match while the filter is active.
+ */
+export declare function matchesDateRange(value: unknown, range: DateRange, timeZone: string): boolean;

package/dist/utils/date-filter.js

@@ -0,0 +1,58 @@
+/**
+ * Calendar-day range filters for date and date-time columns.
+ *
+ * The filter value is `[from?, to?]`, each an ISO calendar date (`YYYY-MM-DD`) or empty — no
+ * time, no zone, so it serializes cleanly. Both bounds are inclusive days. A cell matches
+ * when the day it shows in the display zone (see `readDateInZone`) falls inside the range.
+ * For an instant that is the half-open interval [start of `from`, start of the day after
+ * `to`) in that zone, with day starts taken from the calendar — so 23- and 25-hour DST days
+ * need no special handling.
+ */
+import { CalendarDate, parseDate, toCalendarDate } from '@internationalized/date';
+import { readDateInZone } from './date';
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+/** A bound as a calendar date; anything but a valid `YYYY-MM-DD` reads as no bound. */
+function readBound(value) {
+    if (typeof value !== 'string' || !DATE_ONLY.test(value))
+        return undefined;
+    try {
+        return parseDate(value);
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * The range a filter value stands for. Invalid bounds are dropped and a reversed range is
+ * swapped (as TanStack's `inNumberRange` does). Always returns a range — never undefined —
+ * because the table falls back to the raw value when `resolveFilterValue` returns nullish.
+ */
+export function resolveDateRange(filterValue) {
+    if (!Array.isArray(filterValue))
+        return {};
+    const from = readBound(filterValue[0]);
+    const to = readBound(filterValue[1]);
+    if (from && to && from.compare(to) > 0)
+        return { from: to, to: from };
+    return { from, to };
+}
+/** Whether a filter value has no usable bound, so the filter should be removed. */
+export function isEmptyDateRange(filterValue) {
+    const { from, to } = resolveDateRange(filterValue);
+    return !from && !to;
+}
+/**
+ * Whether a cell value falls in `range`, judged by the calendar day it shows in `timeZone`.
+ * Empty or unparseable cell values never match while the filter is active.
+ */
+export function matchesDateRange(value, range, timeZone) {
+    const date = readDateInZone(value, timeZone);
+    if (!date)
+        return false;
+    const day = date instanceof CalendarDate ? date : toCalendarDate(date);
+    if (range.from && day.compare(range.from) < 0)
+        return false;
+    if (range.to && day.compare(range.to) > 0)
+        return false;
+    return true;
+}

package/dist/utils/date.d.ts

@@ -1,4 +1,4 @@
-import { type DateValue } from '@internationalized/date';
+import { CalendarDate, ZonedDateTime, type DateValue } from '@internationalized/date';
 export type { DateValue };
 /**
  * Anything the date components accept for a single value: an
@@ -24,3 +24,21 @@ export declare function dateValueToString(value: DateValue): string;
 export declare function dateValueToDate(value: DateValue, timeZone?: string): Date;
 /** Emit a `DateValue` back in the original `shape` it was bound as. */
 export declare function fromDateValue(value: DateValue | null, shape: DateValueShape, timeZone?: string): DateValue | string | Date | null;
+/**
+ * A value read for display in `timeZone`: a calendar date (a day, with no instant behind it)
+ * or an instant converted into `timeZone`.
+ */
+export type ZonedOrCalendarDate = CalendarDate | ZonedDateTime;
+/**
+ * Read any date-ish value — a `DateValue`, ISO/DB string, native `Date` or epoch-millisecond
+ * number — the way it should be shown in `timeZone`. Never throws: anything unparseable
+ * (including an out-of-range date like `2024-02-30`) is `null`.
+ *
+ * - `"2024-03-15"` and `CalendarDate` stay calendar dates. They are never turned into an
+ *   instant, which would put them on the previous day in zones west of UTC.
+ * - `Date`, epoch numbers, offset strings (`Z`, `+02:00`) and `ZonedDateTime` are instants,
+ *   converted into `timeZone`.
+ * - A datetime without an offset (`"2024-03-15T10:30"`, `CalendarDateTime`) is a wall-clock
+ *   time in `timeZone`.
+ */
+export declare function readDateInZone(value: unknown, timeZone: string): ZonedOrCalendarDate | null;

package/dist/utils/date.js

@@ -1,4 +1,4 @@
-import { parseDate, parseDateTime, parseAbsolute, parseAbsoluteToLocal, fromDate, getLocalTimeZone } from '@internationalized/date';
+import { CalendarDate, CalendarDateTime, ZonedDateTime, parseDate, parseDateTime, parseAbsolute, parseAbsoluteToLocal, fromAbsolute, fromDate, getLocalTimeZone, toTimeZone, toZoned } from '@internationalized/date';
 const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 // Trailing `Z`, or a `+HH`, `+HH:MM`, `+HHMM` offset.
 const HAS_OFFSET = /(?:[zZ]|[+-]\d{2}(?::?\d{2})?)$/;
@@ -62,3 +62,50 @@ export function fromDateValue(value, shape, timeZone) {
         return dateValueToDate(value, timeZone);
     return value;
 }
+/**
+ * Read any date-ish value — a `DateValue`, ISO/DB string, native `Date` or epoch-millisecond
+ * number — the way it should be shown in `timeZone`. Never throws: anything unparseable
+ * (including an out-of-range date like `2024-02-30`) is `null`.
+ *
+ * - `"2024-03-15"` and `CalendarDate` stay calendar dates. They are never turned into an
+ *   instant, which would put them on the previous day in zones west of UTC.
+ * - `Date`, epoch numbers, offset strings (`Z`, `+02:00`) and `ZonedDateTime` are instants,
+ *   converted into `timeZone`.
+ * - A datetime without an offset (`"2024-03-15T10:30"`, `CalendarDateTime`) is a wall-clock
+ *   time in `timeZone`.
+ */
+export function readDateInZone(value, timeZone) {
+    try {
+        return readDate(value, timeZone);
+    }
+    catch {
+        return null;
+    }
+}
+function readDate(value, timeZone) {
+    if (value == null)
+        return null;
+    if (value instanceof Date) {
+        return Number.isNaN(value.getTime()) ? null : fromDate(value, timeZone);
+    }
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? fromAbsolute(value, timeZone) : null;
+    }
+    if (value instanceof ZonedDateTime)
+        return toTimeZone(value, timeZone);
+    if (value instanceof CalendarDateTime)
+        return toZoned(value, timeZone);
+    if (value instanceof CalendarDate)
+        return value;
+    if (typeof value !== 'string')
+        return null;
+    const raw = value.trim();
+    if (!raw)
+        return null;
+    if (DATE_ONLY.test(raw))
+        return parseDate(raw);
+    const iso = normalizeIso(raw);
+    return HAS_OFFSET.test(iso)
+        ? parseAbsolute(iso, timeZone)
+        : toZoned(parseDateTime(iso), timeZone);
+}

package/dist/utils/debounced-filter-edit.svelte.d.ts

@@ -0,0 +1,16 @@
+export declare class DebouncedFilterEdits<T> {
+    #private;
+    constructor(delay?: number);
+    /** The pending edit for `id`, or undefined when there is none or it went stale. */
+    get(id: string, current: unknown): T | undefined;
+    /**
+     * Records an edit against the filter's `current` value: `update` receives the live
+     * pending edit (undefined when there is none or it went stale) and returns the new one.
+     * After the delay, `commit` runs with it — unless `read()` shows the filter changed.
+     */
+    edit(id: string, current: unknown, update: (pending: T | undefined) => T, read: () => unknown, commit: (value: T) => void): void;
+    /** Drops the pending edit for `id` without committing it. */
+    cancel(id: string): void;
+    /** Drops every pending edit without committing. */
+    cancelAll(): void;
+}

package/dist/utils/debounced-filter-edit.svelte.js

@@ -0,0 +1,56 @@
+export class DebouncedFilterEdits {
+    // Raw, not deep: `base` must stay the exact filter value it is compared against — a deep
+    // $state would proxy an array base (a range) and `Object.is` would never match it again.
+    #pending = $state.raw({});
+    // Timer handles are bookkeeping, never rendered — a reactive map would only add overhead.
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity
+    #timers = new Map();
+    #delay;
+    constructor(delay = 300) {
+        this.#delay = delay;
+    }
+    /** The pending edit for `id`, or undefined when there is none or it went stale. */
+    get(id, current) {
+        const pending = this.#pending[id];
+        return pending && Object.is(pending.base, current) ? pending.value : undefined;
+    }
+    /**
+     * Records an edit against the filter's `current` value: `update` receives the live
+     * pending edit (undefined when there is none or it went stale) and returns the new one.
+     * After the delay, `commit` runs with it — unless `read()` shows the filter changed.
+     */
+    edit(id, current, update, read, commit) {
+        this.#pending = {
+            ...this.#pending,
+            [id]: { value: update(this.get(id, current)), base: current }
+        };
+        clearTimeout(this.#timers.get(id));
+        this.#timers.set(id, setTimeout(() => {
+            this.#timers.delete(id);
+            const pending = this.#pending[id];
+            this.#remove(id);
+            if (pending && Object.is(read(), pending.base))
+                commit(pending.value);
+        }, this.#delay));
+    }
+    /** Drops the pending edit for `id` without committing it. */
+    cancel(id) {
+        clearTimeout(this.#timers.get(id));
+        this.#timers.delete(id);
+        this.#remove(id);
+    }
+    /** Drops every pending edit without committing. */
+    cancelAll() {
+        for (const timer of this.#timers.values())
+            clearTimeout(timer);
+        this.#timers.clear();
+        this.#pending = {};
+    }
+    #remove(id) {
+        if (!(id in this.#pending))
+            return;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars -- dropped from the record
+        const { [id]: _removed, ...rest } = this.#pending;
+        this.#pending = rest;
+    }
+}

package/dist/utils/number-input-value.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The string value NumberInput hands to Ark's NumberInput.Root.
+ *
+ * An empty value (`null`, `undefined` or NaN) becomes `''`, a controlled empty value. Passing
+ * `undefined` instead would switch Ark to its internal state, which keeps showing the last
+ * number — so clearing a bound from outside (e.g. a filter going from [10, 100] to
+ * [undefined, 100]) would leave the 10 on screen. The one exception: an `undefined` value
+ * with a `defaultValue` set stays `undefined`, so uncontrolled use keeps working.
+ */
+export declare function toNumberInputValue(value: number | null | undefined, locale: string, hasDefaultValue?: boolean): string | undefined;

package/dist/utils/number-input-value.js

@@ -0,0 +1,15 @@
+/**
+ * The string value NumberInput hands to Ark's NumberInput.Root.
+ *
+ * An empty value (`null`, `undefined` or NaN) becomes `''`, a controlled empty value. Passing
+ * `undefined` instead would switch Ark to its internal state, which keeps showing the last
+ * number — so clearing a bound from outside (e.g. a filter going from [10, 100] to
+ * [undefined, 100]) would leave the 10 on screen. The one exception: an `undefined` value
+ * with a `defaultValue` set stays `undefined`, so uncontrolled use keeps working.
+ */
+export function toNumberInputValue(value, locale, hasDefaultValue = false) {
+    if (value == null || Number.isNaN(value)) {
+        return value === undefined && hasDefaultValue ? undefined : '';
+    }
+    return new Intl.NumberFormat(locale, { useGrouping: false, maximumFractionDigits: 20 }).format(value);
+}

package/dist/utils/range-filter.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Value handling for numeric range filters (`inNumberRange`): the filter value is a
+ * `[min, max]` tuple where either bound may be `undefined`.
+ */
+export type RangeFilterValue = [number | undefined, number | undefined];
+/** Bounds edited in the UI but not committed yet; `null` means the bound was cleared. */
+export type PendingRange = {
+    min?: number | null;
+    max?: number | null;
+};
+/** The `[min, max]` bounds of a range filter value, or both undefined when there is none. */
+export declare function rangeBounds(filterValue: unknown): RangeFilterValue;
+/**
+ * The filter value after committing `pending` edits onto the current filter value. A bound
+ * that wasn't edited keeps its current (live) value, so a stale bound can't come back after
+ * the filter was changed elsewhere. Returns `undefined` when both bounds are empty, which
+ * removes the filter.
+ */
+export declare function mergeRangeFilter(current: unknown, pending: PendingRange): RangeFilterValue | undefined;

package/dist/utils/range-filter.js

@@ -0,0 +1,23 @@
+/**
+ * Value handling for numeric range filters (`inNumberRange`): the filter value is a
+ * `[min, max]` tuple where either bound may be `undefined`.
+ */
+/** The `[min, max]` bounds of a range filter value, or both undefined when there is none. */
+export function rangeBounds(filterValue) {
+    if (!Array.isArray(filterValue))
+        return [undefined, undefined];
+    const [min, max] = filterValue;
+    return [typeof min === 'number' ? min : undefined, typeof max === 'number' ? max : undefined];
+}
+/**
+ * The filter value after committing `pending` edits onto the current filter value. A bound
+ * that wasn't edited keeps its current (live) value, so a stale bound can't come back after
+ * the filter was changed elsewhere. Returns `undefined` when both bounds are empty, which
+ * removes the filter.
+ */
+export function mergeRangeFilter(current, pending) {
+    const [currentMin, currentMax] = rangeBounds(current);
+    const min = 'min' in pending ? (pending.min ?? undefined) : currentMin;
+    const max = 'max' in pending ? (pending.max ?? undefined) : currentMax;
+    return min === undefined && max === undefined ? undefined : [min, max];
+}

package/dist/utils/release-focus-on-exit.d.ts

@@ -0,0 +1,22 @@
+declare function releaseFocusOnExit(event: Event): void;
+/**
+ * Spread onto Ark overlay content (popover, dialog, drawer) so a field focused inside it blurs
+ * before the content unmounts, not during the unmount.
+ *
+ * Zag's presence can unmount content from inside a Svelte effect (it does when the document is
+ * hidden). Svelte then removes the content mid-flush; a field still focused in there blurs during
+ * that removal, and zag handles some blurs with `flushSync` (DatePicker's machine, for one). That
+ * nested `flushSync` breaks the outer flush: "Cannot read properties of null (reading 'clear')"
+ * in Svelte's `flush_queued_effects` (still the case in svelte 5.57.2).
+ *
+ * Zag dispatches `exitcomplete` on the content node once presence decides to unmount, before
+ * Svelte removes it. Blurring there lets the field commit on blur as usual, at a point where a
+ * nested `flushSync` is safe. Usually focus is already back on the trigger by then (exit
+ * animations outlast the focus restore), and this does nothing.
+ *
+ * A spread because Ark's content prop types don't list the `exitcomplete` event.
+ */
+export declare const releaseFocusOnExitProps: {
+    onexitcomplete: typeof releaseFocusOnExit;
+};
+export {};

package/dist/utils/release-focus-on-exit.js

@@ -0,0 +1,26 @@
+function releaseFocusOnExit(event) {
+    const content = event.currentTarget;
+    if (!(content instanceof HTMLElement))
+        return;
+    const active = content.ownerDocument.activeElement;
+    if (active instanceof HTMLElement && content.contains(active))
+        active.blur();
+}
+/**
+ * Spread onto Ark overlay content (popover, dialog, drawer) so a field focused inside it blurs
+ * before the content unmounts, not during the unmount.
+ *
+ * Zag's presence can unmount content from inside a Svelte effect (it does when the document is
+ * hidden). Svelte then removes the content mid-flush; a field still focused in there blurs during
+ * that removal, and zag handles some blurs with `flushSync` (DatePicker's machine, for one). That
+ * nested `flushSync` breaks the outer flush: "Cannot read properties of null (reading 'clear')"
+ * in Svelte's `flush_queued_effects` (still the case in svelte 5.57.2).
+ *
+ * Zag dispatches `exitcomplete` on the content node once presence decides to unmount, before
+ * Svelte removes it. Blurring there lets the field commit on blur as usual, at a point where a
+ * nested `flushSync` is safe. Usually focus is already back on the trigger by then (exit
+ * animations outlast the focus restore), and this does nothing.
+ *
+ * A spread because Ark's content prop types don't list the `exitcomplete` event.
+ */
+export const releaseFocusOnExitProps = { onexitcomplete: releaseFocusOnExit };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "compote-ui",
-	"version": "0.79.1",
+	"version": "0.80.0",
 	"license": "MIT",
 	"repository": {
 		"type": "git",

package/skills/component-usage/SKILL.md

@@ -8,7 +8,7 @@ description: >
 metadata:
   type: core
   library: compote-ui
-  library_version: '0.74.2'
+  library_version: '0.79.2'
 sources:
   - src/lib/index.ts
   - src/lib/utils/collections.ts

package/skills/component-usage/references/forms-and-inputs.md

@@ -172,6 +172,9 @@ If selection must be restricted to a fixed set (pick-only, no free text), use `C
 Props: `value?: number | null` (bindable), `label?`, `readonly?`, `layout?: 'vertical' | 'horizontal'`,
 plus Ark UI NumberInput props (`min`, `max`, `step`, `formatOptions`, `locale`).
 
+`value` is controlled: setting it to `null` from outside clears the input. Use `defaultValue`
+(a string) only for uncontrolled use, without passing `value`.
+
 ## PasswordInput
 
 Password field with a built-in show/hide toggle. The underlying `<input>` is a real DOM input —