entasis 0.10.2 → 0.12.0

package/dist/components/Form/Combobox/combobox.state.svelte.d.ts

@@ -0,0 +1,137 @@
+import type { Messages } from '../../../i18n/en.js';
+import { type ListLoop } from '../../../utils/useListNavigation.svelte.js';
+import { type OpenChangeHandler, type OpenChangeInit } from '../../../utils/openChange.js';
+import type { ComboboxFilter, ComboboxHighlightChangePayload, ComboboxItems, ComboboxItemsSource, ComboboxOption } from './combobox.props.js';
+/** The slice of a field the controller reads. */
+type ControllerField = {
+    readonly focused: boolean;
+    readonly disabled: boolean;
+    readonly readOnly: boolean;
+    readonly node: HTMLElement | null;
+};
+type Accessor<Value> = {
+    get: () => Value;
+    set: (value: Value) => void;
+};
+export type ComboboxControllerOptions = {
+    id: string;
+    field: ControllerField;
+    /** The options, or the function returning them; `undefined` when there is no list (free text). */
+    items: () => ComboboxItemsSource | undefined;
+    filter: () => ComboboxFilter | undefined;
+    limit: () => number | undefined;
+    /** Options to leave out of the list (TagsInput's selected tags). */
+    exclude?: (option: ComboboxOption) => boolean;
+    messages: () => Messages;
+    loadingText: () => string | undefined;
+    noOptionsText: () => string | undefined;
+    query: Accessor<string>;
+    /**
+     * Whether a non-empty query asks for results. Defaults to always; Autocomplete's query is its
+     * persistent value rather than a search draft, so only an open list searches.
+     */
+    searching?: () => boolean;
+    loading: Accessor<boolean>;
+    open: Accessor<boolean>;
+    onOpenChange: () => OpenChangeHandler | undefined;
+    openOnFocus: () => boolean;
+    autoHighlight: () => boolean | 'always';
+    loop: () => ListLoop | undefined;
+    /** The value to highlight when the list opens and when the text clears (the selected value). */
+    anchor?: () => string | undefined;
+    onHighlightChange: () => ((payload: ComboboxHighlightChangePayload) => void) | undefined;
+    /** A highlighted or clicked option was chosen. */
+    onSelect: (option: ComboboxOption, event?: Event) => void;
+};
+/** What the list shows. Kept while the list closes, so its exit never sees empty results. */
+type ComboboxView = {
+    items: ComboboxItems;
+    hasOptions: boolean;
+    count: number;
+    error: string | null;
+    loading: boolean;
+    query: string;
+};
+export declare class ComboboxController {
+    #private;
+    readonly id: string;
+    readonly listboxId: string;
+    /** The element that scrolls the options (the ScrollArea viewport), for highlight scrolling. */
+    viewport: HTMLDivElement | null;
+    readonly announcer: {
+        regionId: string;
+        politeness: import("../../../utils/useLiveAnnouncer.svelte.js").LivePoliteness;
+        regionAttrs: import("../../../utils/useLiveAnnouncer.svelte.js").LiveRegionAttributes;
+        readonly message: string;
+        announce(next: string): void;
+        reset(): void;
+    };
+    readonly nav: {
+        readonly highlighted: string | undefined;
+        readonly highlightDetails: import("../../../utils/useListNavigation.svelte.js").HighlightDetails;
+        readonly activeDescendant: string | undefined;
+        optionId: (value: string) => string | undefined;
+        typeahead: {
+            readonly isTyping: boolean;
+            reset: () => void;
+        } | null;
+        setHighlighted: (value: string | undefined, details?: import("../../../utils/useListNavigation.svelte.js").HighlightDetails) => void;
+        pointerHighlight: (value: string | undefined, event?: MouseEvent | PointerEvent) => boolean;
+        highlight: (value: string | undefined, details?: import("../../../utils/useListNavigation.svelte.js").HighlightDetails) => void;
+        move: (delta: number, details?: import("../../../utils/useListNavigation.svelte.js").HighlightDetails) => void;
+        first: (details?: import("../../../utils/useListNavigation.svelte.js").HighlightDetails) => void;
+        last: (details?: import("../../../utils/useListNavigation.svelte.js").HighlightDetails) => void;
+        reanchor: () => void;
+        scrollToHighlighted: () => void;
+        onKeydown: (event: KeyboardEvent) => void;
+    };
+    constructor(options: ComboboxControllerOptions);
+    /** The live async error: the input's validity follows it, not the frozen exit snapshot. */
+    get error(): string | null;
+    /** What the list renders: the live results, or the last ones shown while it closes. */
+    get view(): ComboboxView;
+    /** Options already resolved by an async source, for label lookups. */
+    get fetchedOptions(): ComboboxOption[];
+    get open(): boolean;
+    /** Whether the list has a source to open at all. */
+    get hasSource(): boolean;
+    /**
+     * Whether the list is on screen: open, with options, a message or an error to show.
+     * An open list with nothing to say renders nothing.
+     */
+    get visible(): boolean;
+    /** Whether the option list itself is showing: `aria-expanded` of the input. */
+    get expanded(): boolean;
+    get activeDescendant(): string | undefined;
+    /** What the status row says while no options are listed, or while loading. */
+    get status(): {
+        kind: 'loading' | 'error' | 'empty';
+        text: string;
+    } | null;
+    /** The message the persistent live region announces: result count, loading, error or empty. */
+    get statusMessage(): string;
+    /**
+     * Asks to open or close the list. `onOpenChange` runs first and may cancel; returns whether
+     * the change went through (or was already the state).
+     */
+    setOpen(next: boolean, init?: OpenChangeInit): boolean;
+    /** Opens the list to browse every option (arrow keys, a press on the input, focus). */
+    browse(init?: OpenChangeInit): boolean;
+    close(init?: OpenChangeInit): boolean;
+    /** The text changed because the user typed: open the list for it. */
+    onInput(event: Event): void;
+    onFocus(event: FocusEvent): void;
+    onPointerDown(): void;
+    /** A press on the input that already had focus toggles the list. */
+    onClick(event: MouseEvent): void;
+    /**
+     * Keys on the input. Escape closes the list and keeps focus; with the list closed it clears
+     * the typed text. ArrowDown/ArrowUp open a closed list, and the rest move the highlight.
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /** Chooses an option: a click, or Enter on the highlighted one. */
+    selectOption(option: ComboboxOption, event?: Event): void;
+    /** Props for the keyboard-inert parts of the popup: a press must not move focus off the input. */
+    preventBlur: (event: Event) => void;
+}
+export {};

package/dist/components/Form/Combobox/combobox.state.svelte.js

@@ -0,0 +1,375 @@
+// The controller behind Combobox and TagsInput: open state with its Escape and focus-out rules,
+// the option source (a static array filtered here, or an async function with abort and a latest
+// response wins rule), results frozen while the list closes, the highlight model, live
+// announcements. The components own what a selection means and how it renders.
+import { untrack } from 'svelte';
+import { useLiveAnnouncer } from '../../../utils/useLiveAnnouncer.svelte.js';
+import { useListNavigation } from '../../../utils/useListNavigation.svelte.js';
+import { createOpenChangeDetails, requestOpenChange } from '../../../utils/openChange.js';
+import { createOptionMatcher, flattenItems, narrowItems, selectableOptions } from './combobox.items.js';
+/** Debounce before an async `items` function runs for a new search. */
+const SEARCH_DELAY = 100;
+/** Quiet time before result counts and status messages are announced. */
+const ANNOUNCE_DELAY = 250;
+export class ComboboxController {
+    id;
+    listboxId;
+    #options;
+    /** `typing` opened the list by typing: emptying the text closes it again. `browse` shows every option. */
+    #mode = $state('browse');
+    #fetched = $state.raw([]);
+    #error = $state(null);
+    #frozen = $state.raw(null);
+    #abort = null;
+    #sequence = 0;
+    /** A search is waiting out its debounce: nothing has been asked yet. */
+    #queued = $state(false);
+    #searchTimer;
+    #announceTimer;
+    #lastEvent;
+    #wasFocused = false;
+    /** The element that scrolls the options (the ScrollArea viewport), for highlight scrolling. */
+    viewport = $state(null);
+    announcer;
+    nav;
+    constructor(options) {
+        this.#options = options;
+        this.id = options.id;
+        this.listboxId = `${options.id}-listbox`;
+        this.announcer = useLiveAnnouncer(options.id, 'live');
+        this.nav = useListNavigation({
+            values: () => selectableOptions(this.#live.items).map((option) => option.value),
+            idPrefix: options.id,
+            get autoHighlight() {
+                return options.autoHighlight();
+            },
+            get loop() {
+                return options.loop() ?? 'wrap';
+            },
+            query: () => options.query.get(),
+            open: () => this.visible,
+            anchor: () => options.anchor?.(),
+            scrollContainer: () => this.viewport,
+            onHighlightChange: (value, details) => options.onHighlightChange()?.({ value, reason: details.reason, event: details.event }),
+            onSelect: (value) => {
+                const option = flattenItems(this.#live.items).find((entry) => entry.value === value);
+                if (option)
+                    this.selectOption(option, this.#lastEvent);
+            }
+        });
+        // Async source: one request at a time, the latest search wins.
+        $effect(() => {
+            const source = this.#source;
+            const query = options.query.get();
+            const wanted = this.#wantsResults;
+            untrack(() => this.#schedule(typeof source === 'function' ? source : null, query, wanted));
+        });
+        // Keep a snapshot of what is showing, so a closing list keeps its rows through the exit.
+        $effect.pre(() => {
+            if (this.visible)
+                this.#frozen = this.#live;
+        });
+        // Focus leaving the field (and the list it opened) dismisses the list.
+        let wasFocused = false;
+        $effect(() => {
+            const focused = options.field.focused;
+            untrack(() => {
+                if (wasFocused && !focused && options.open.get()) {
+                    this.close({ reason: 'focus-out' });
+                }
+            });
+            wasFocused = focused;
+        });
+        // A disabled field has no list.
+        $effect(() => {
+            if (!options.field.disabled)
+                return;
+            untrack(() => {
+                if (options.open.get())
+                    this.close({ reason: 'imperative-action' });
+            });
+        });
+        // Result counts and status messages reach screen readers through one persistent region,
+        // after typing settles.
+        $effect(() => {
+            const message = this.statusMessage;
+            untrack(() => {
+                clearTimeout(this.#announceTimer);
+                if (!message) {
+                    this.announcer.reset();
+                    return;
+                }
+                this.#announceTimer = setTimeout(() => this.announcer.announce(message), ANNOUNCE_DELAY);
+            });
+        });
+        $effect(() => () => {
+            this.#abort?.abort();
+            this.#sequence += 1;
+            clearTimeout(this.#searchTimer);
+            clearTimeout(this.#announceTimer);
+        });
+    }
+    // -- Source and results ---------------------------------------------------------------
+    get #source() {
+        return this.#options.items();
+    }
+    /** Text shown in a query-less list: every option while the list is open for browsing. */
+    get #showAll() {
+        const open = this.#options.open.get();
+        // Only an open list shows every option: a closed one must not fetch before any interaction.
+        return open && (this.#mode === 'browse' || this.#options.openOnFocus());
+    }
+    get #wantsResults() {
+        const searching = this.#options.searching?.() ?? true;
+        return (searching && this.#options.query.get() !== '') || this.#showAll;
+    }
+    #live = $derived.by(() => {
+        const options = this.#options;
+        const source = this.#source;
+        const query = options.query.get();
+        const loading = options.loading.get();
+        let items = [];
+        if (source !== undefined && this.#wantsResults) {
+            const async = typeof source === 'function';
+            items = narrowItems(async ? this.#fetched : source, async ? '' : query, {
+                // The collator behind the default matcher is cached per locale.
+                match: options.filter() ?? createOptionMatcher(options.messages().locale),
+                exclude: options.exclude,
+                limit: options.limit()
+            });
+        }
+        const flat = flattenItems(items);
+        return {
+            items,
+            hasOptions: flat.length > 0,
+            count: flat.length,
+            error: this.#error,
+            // A search that has not started yet counts as loading while there is nothing to show,
+            // so "No options found" never flashes before the first response.
+            loading: loading || (this.#queued && flat.length === 0),
+            query
+        };
+    });
+    /** The live async error: the input's validity follows it, not the frozen exit snapshot. */
+    get error() {
+        return this.#error;
+    }
+    /** What the list renders: the live results, or the last ones shown while it closes. */
+    get view() {
+        return this.visible ? this.#live : (this.#frozen ?? this.#live);
+    }
+    #schedule(fn, query, wanted) {
+        clearTimeout(this.#searchTimer);
+        this.#queued = false;
+        if (!fn || !wanted) {
+            // Nothing to ask: whatever is in flight no longer matters.
+            if (this.#abort || this.#fetched.length > 0 || this.#error) {
+                this.#abort?.abort();
+                this.#abort = null;
+                this.#sequence += 1;
+                this.#fetched = [];
+                this.#error = null;
+                if (this.#options.loading.get())
+                    this.#options.loading.set(false);
+            }
+            return;
+        }
+        this.#queued = true;
+        this.#searchTimer = setTimeout(() => void this.#run(fn, query), SEARCH_DELAY);
+    }
+    async #run(fn, query) {
+        this.#abort?.abort();
+        const controller = new AbortController();
+        this.#abort = controller;
+        const sequence = ++this.#sequence;
+        this.#queued = false;
+        this.#error = null;
+        this.#options.loading.set(true);
+        try {
+            const result = await fn(query, { signal: controller.signal });
+            if (sequence !== this.#sequence || controller.signal.aborted)
+                return;
+            this.#fetched = result ?? [];
+        }
+        catch (error) {
+            if (sequence !== this.#sequence || controller.signal.aborted)
+                return;
+            this.#fetched = [];
+            this.#error =
+                error instanceof Error ? error.message : this.#options.messages().failedToLoadOptions;
+        }
+        finally {
+            if (sequence === this.#sequence) {
+                this.#abort = null;
+                this.#options.loading.set(false);
+            }
+        }
+    }
+    /** Options already resolved by an async source, for label lookups. */
+    get fetchedOptions() {
+        return flattenItems(this.#fetched);
+    }
+    // -- Open state -------------------------------------------------------------------------
+    get open() {
+        return this.#options.open.get();
+    }
+    /** Whether the list has a source to open at all. */
+    get hasSource() {
+        return this.#source !== undefined;
+    }
+    /**
+     * Whether the list is on screen: open, with options, a message or an error to show.
+     * An open list with nothing to say renders nothing.
+     */
+    get visible() {
+        const options = this.#options;
+        if (!this.hasSource || !options.open.get() || options.field.disabled)
+            return false;
+        const live = this.#live;
+        return live.hasOptions || live.error !== null || live.loading || live.query !== '';
+    }
+    /** Whether the option list itself is showing: `aria-expanded` of the input. */
+    get expanded() {
+        return this.visible && this.#live.hasOptions;
+    }
+    get activeDescendant() {
+        return this.expanded ? this.nav.activeDescendant : undefined;
+    }
+    /** What the status row says while no options are listed, or while loading. */
+    get status() {
+        const view = this.view;
+        const messages = this.#options.messages();
+        if (view.loading) {
+            return { kind: 'loading', text: this.#options.loadingText() ?? messages.loadingEllipsis };
+        }
+        if (view.error !== null)
+            return { kind: 'error', text: view.error };
+        if (!view.hasOptions && view.query !== '') {
+            return { kind: 'empty', text: this.#options.noOptionsText() ?? messages.noOptions };
+        }
+        return null;
+    }
+    /** The message the persistent live region announces: result count, loading, error or empty. */
+    get statusMessage() {
+        if (!this.visible)
+            return '';
+        const live = this.#live;
+        const messages = this.#options.messages();
+        if (live.loading)
+            return this.#options.loadingText() ?? messages.loadingEllipsis;
+        if (live.error !== null)
+            return live.error;
+        if (live.hasOptions)
+            return messages.resultsCount(live.count);
+        return this.#options.noOptionsText() ?? messages.noOptions;
+    }
+    /**
+     * Asks to open or close the list. `onOpenChange` runs first and may cancel; returns whether
+     * the change went through (or was already the state).
+     */
+    setOpen(next, init = {}) {
+        const options = this.#options;
+        if (next === options.open.get())
+            return true;
+        if (next && (options.field.disabled || !this.hasSource))
+            return false;
+        const details = createOpenChangeDetails({
+            ...init,
+            trigger: init.trigger ?? options.field.node ?? undefined
+        });
+        if (!requestOpenChange(options.onOpenChange(), next, details))
+            return false;
+        if (!next)
+            this.#mode = 'browse';
+        options.open.set(next);
+        return true;
+    }
+    /** Opens the list to browse every option (arrow keys, a press on the input, focus). */
+    browse(init = {}) {
+        const wasMode = this.#mode;
+        this.#mode = 'browse';
+        const opened = this.setOpen(true, init);
+        if (!opened)
+            this.#mode = wasMode;
+        return opened;
+    }
+    close(init = {}) {
+        return this.setOpen(false, init);
+    }
+    // -- Input events -----------------------------------------------------------------------
+    /** The text changed because the user typed: open the list for it. */
+    onInput(event) {
+        if (this.#options.field.readOnly)
+            return;
+        this.#mode = 'typing';
+        this.setOpen(true, { reason: 'input-change', event });
+    }
+    onFocus(event) {
+        const options = this.#options;
+        if (options.openOnFocus() && !options.open.get())
+            this.browse({ reason: 'trigger-focus', event });
+    }
+    onPointerDown() {
+        const node = this.#options.field.node;
+        this.#wasFocused = !!node && node.ownerDocument.activeElement === node;
+    }
+    /** A press on the input that already had focus toggles the list. */
+    onClick(event) {
+        const wasFocused = this.#wasFocused;
+        this.#wasFocused = false;
+        if (!wasFocused || this.#options.field.disabled)
+            return;
+        if (this.visible)
+            this.close({ reason: 'trigger-press', event });
+        else
+            this.browse({ reason: 'trigger-press', event });
+    }
+    /**
+     * Keys on the input. Escape closes the list and keeps focus; with the list closed it clears
+     * the typed text. ArrowDown/ArrowUp open a closed list, and the rest move the highlight.
+     */
+    onKeydown(event) {
+        if (event.defaultPrevented || event.isComposing)
+            return;
+        const options = this.#options;
+        if (event.key === 'Escape') {
+            if (this.visible) {
+                if (this.close({ reason: 'escape-key', event }))
+                    event.preventDefault();
+            }
+            else if (options.query.get() !== '' && !options.field.readOnly) {
+                options.query.set('');
+                event.preventDefault();
+            }
+            else if (options.open.get()) {
+                this.close({ reason: 'escape-key', event });
+            }
+            return;
+        }
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            if (!this.hasSource || options.field.disabled)
+                return;
+            if (!this.visible) {
+                event.preventDefault();
+                this.browse({ reason: 'list-navigation', event });
+                return;
+            }
+        }
+        if (this.expanded) {
+            this.#lastEvent = event;
+            this.nav.onKeydown(event);
+            this.#lastEvent = undefined;
+        }
+    }
+    /** Chooses an option: a click, or Enter on the highlighted one. */
+    selectOption(option, event) {
+        const field = this.#options.field;
+        if (option.disabled || field.disabled || field.readOnly)
+            return;
+        this.#options.onSelect(option, event);
+    }
+    /** Props for the keyboard-inert parts of the popup: a press must not move focus off the input. */
+    preventBlur = (event) => {
+        event.preventDefault();
+    };
+}

package/dist/components/Form/Combobox/combobox.theme.d.ts

@@ -47,6 +47,27 @@ export declare const comboboxTheme: {
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 };
 export type ComboboxTheme = typeof comboboxTheme;
 export type ComboboxThemeProps = InferComponentTheme<ComboboxTheme>;
@@ -98,6 +119,27 @@ export declare const setComboboxTheme: (theme: InferComponentTheme<{
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>) => void;
 export declare const useComboboxTheme: import("../../../utils/cva/theme.js").UseComponentTheme<{
     input: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
@@ -147,4 +189,25 @@ export declare const useComboboxTheme: import("../../../utils/cva/theme.js").Use
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    groupLabel: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    separator: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        size: {
+            small: string;
+            normal: string;
+            large: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 }>;

package/dist/components/Form/Combobox/combobox.theme.js

@@ -70,12 +70,48 @@ const defaultNoOptions = cva({
         }
     }
 });
+const defaultGroup = cva({
+    base: 'flex scroll-my-1 flex-col',
+    variants: {
+        size: {
+            small: '',
+            normal: '',
+            large: ''
+        }
+    }
+});
+const defaultGroupLabel = cva({
+    base: 'text-neutral/70',
+    variants: {
+        size: {
+            small: 'px-sm py-xs text-xs',
+            normal: 'px-sm py-xs text-xs',
+            large: 'px-sm py-xs text-xs'
+        }
+    },
+    defaultVariants: {
+        size: 'normal'
+    }
+});
+const defaultSeparator = cva({
+    base: 'bg-neutral-muted my-xs h-px',
+    variants: {
+        size: {
+            small: '',
+            normal: '',
+            large: ''
+        }
+    }
+});
 export const comboboxTheme = {
     input: defaultInput,
     inputContainer: defaultInputContainer,
     loading: defaultLoading,
     error: defaultError,
-    noOptions: defaultNoOptions
+    noOptions: defaultNoOptions,
+    group: defaultGroup,
+    groupLabel: defaultGroupLabel,
+    separator: defaultSeparator
 };
 export const setComboboxTheme = setComponentTheme('combobox');
 export const useComboboxTheme = useComponentTheme('combobox', comboboxTheme);

package/dist/components/Form/Combobox/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Combobox } from './Combobox.svelte';
-export type { ComboboxProps, ComboboxOption, ComboboxValueChangePayload } from './combobox.props.js';
+export type { ComboboxFilter, ComboboxHighlightChangePayload, ComboboxHighlightReason, ComboboxItems, ComboboxItemsRequest, ComboboxItemsSource, ComboboxProps, ComboboxOption, ComboboxOptionGroup, ComboboxValueChangePayload } from './combobox.props.js';
 export { comboboxTheme, setComboboxTheme, useComboboxTheme, type ComboboxTheme, type ComboboxThemeProps } from './combobox.theme.js';
+export { comboboxDataAttributes, comboboxCssVariables, type ComboboxDataAttribute, type ComboboxCssVariable } from './combobox.attributes.js';

package/dist/components/Form/Combobox/index.js

@@ -1,2 +1,3 @@
 export { default as Combobox } from './Combobox.svelte';
 export { comboboxTheme, setComboboxTheme, useComboboxTheme } from './combobox.theme.js';
+export { comboboxDataAttributes, comboboxCssVariables } from './combobox.attributes.js';