@techsio/ui-kit 0.49.0 → 0.50.0

package/dist/molecules/combobox.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useEffect, useId, useMemo, useState } from "react";
 import { collection as combobox_collection, connect, machine } from "@zag-js/combobox";
 import { Portal, normalizeProps, useMachine } from "@zag-js/react";
-import { useEffect, useId, useState } from "react";
 import { ActionIcon } from "../atoms/action-icon.js";
 import { Button } from "../atoms/button.js";
 import { Icon } from "../atoms/icon.js";
@@ -53,7 +53,7 @@ const comboboxVariants = tv({
         content: [
             "popup-surface-base",
             "w-full",
-            "flex flex-col",
+            "flex flex-col overflow-hidden",
             "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",
             "transition-discrete",
             "starting:scale-98 starting:opacity-0",
@@ -62,7 +62,14 @@ const comboboxVariants = tv({
             "data-[state=closed]:scale-98 data-[state=closed]:opacity-0"
         ],
         list: [
-            "m-0 flex list-none flex-col"
+            "m-0 flex min-h-0 list-none flex-col overflow-y-auto overscroll-contain"
+        ],
+        groupLabel: [
+            "combobox-popup-padding",
+            "text-combobox-group-label-size font-combobox-group-label text-combobox-group-fg"
+        ],
+        footer: [
+            "combobox-popup-padding shrink-0 border-t border-combobox-footer-border"
         ],
         itemText: [
             "min-w-0 flex-grow truncate"
@@ -83,7 +90,12 @@ const comboboxVariants = tv({
         ],
         emptyState: [
             "px-(--popup-item-x) py-(--popup-item-y)",
-            "text-popup-item-fg-muted"
+            "text-combobox-status-fg"
+        ],
+        status: [
+            "combobox-status-gap flex items-center",
+            "px-(--popup-item-x) py-(--popup-item-y)",
+            "text-combobox-status-fg"
         ],
         triggerIndicator: [
             "text-combobox-trigger-fg-base group-hover:text-combobox-trigger-fg-hover",
@@ -142,65 +154,151 @@ const comboboxVariants = tv({
         size: "md"
     }
 });
-function Combobox({ id, name, label, size, placeholder = "Select option", disabled = false, readOnly = false, required = false, items = [], value, defaultValue, inputValue, multiple = false, validateStatus, helpText, showHelpTextIcon = true, noResultsMessage = 'No results found for "{inputValue}"', clearable = true, selectionBehavior = "replace", closeOnSelect = true, allowCustomValue = false, loopFocus = true, autoFocus = false, triggerIcon = "token-icon-combobox-chevron", triggerIconSize, clearIcon = "token-icon-combobox-clear", inputBehavior = "autocomplete", onChange, onInputValueChange, onOpenChange }) {
+function Combobox({ id, name, label, size, placeholder = "Select option", disabled = false, readOnly = false, required = false, items, groups, value, defaultValue, inputValue, multiple = false, validateStatus, helpText, showHelpTextIcon = true, noResultsMessage = 'No results found for "{inputValue}"', clearable = true, selectionBehavior = "replace", closeOnSelect = true, allowCustomValue = false, loopFocus = true, autoFocus = false, open, defaultOpen, triggerIcon = "token-icon-combobox-chevron", triggerIconSize, clearIcon = "token-icon-combobox-clear", inputBehavior = "autocomplete", filterBehavior = "local", loading = false, loadingMessage = "Loading results", error, retryLabel = "Retry", onRetry, renderItem, onChange, onInputValueChange, onOpenChange, mode = "selection", navigate, footer, portalled = true }) {
     const generatedId = useId();
     const uniqueId = id || generatedId;
-    const [options, setOptions] = useState(items);
+    const listId = `${uniqueId}-listbox`;
+    const helpTextId = `${uniqueId}-help`;
+    const navigation = "navigation" === mode;
+    const allItems = useMemo(()=>groups ? groups.flatMap((group)=>group.items) : items ?? [], [
+        groups,
+        items
+    ]);
+    const [options, setOptions] = useState(allItems);
     useEffect(()=>{
-        setOptions(items);
+        setOptions(allItems);
     }, [
-        items
+        allItems
     ]);
+    const displayedItems = "external" === filterBehavior ? allItems : options;
+    const resultsHidden = loading || Boolean(error);
     const collection = combobox_collection({
-        items: options,
+        items: displayedItems,
         itemToString: (item)=>item.label,
         itemToValue: (item)=>item.value,
-        isItemDisabled: (item)=>!!item.disabled
+        isItemDisabled: (item)=>Boolean(resultsHidden || item.disabled || readOnly || navigation && !item.href)
     });
     const service = useMachine(machine, {
         id: uniqueId,
-        name,
+        name: navigation ? void 0 : name,
         collection,
         disabled,
         readOnly,
         closeOnSelect,
-        selectionBehavior,
-        allowCustomValue,
+        selectionBehavior: navigation ? "preserve" : selectionBehavior,
+        allowCustomValue: !navigation && allowCustomValue,
         autoFocus,
+        open,
+        defaultOpen,
         inputBehavior,
         loopFocus,
+        navigate,
+        composite: false,
+        positioning: {
+            strategy: portalled ? "absolute" : "fixed"
+        },
+        scrollToIndexFn: ({ getElement })=>{
+            getElement()?.scrollIntoView({
+                block: "nearest",
+                inline: "nearest"
+            });
+        },
+        invalid: "error" === validateStatus,
         ids: {
             label: `${uniqueId}-label`,
             input: `${uniqueId}-input`,
             control: `${uniqueId}-control`
         },
-        value: value,
-        defaultValue: defaultValue,
-        multiple,
+        value: navigation ? [] : "string" == typeof value ? [
+            value
+        ] : value,
+        defaultValue: navigation ? void 0 : "string" == typeof defaultValue ? [
+            defaultValue
+        ] : defaultValue,
+        multiple: !navigation && multiple,
         inputValue,
         onValueChange: ({ value: selectedValue })=>{
-            onChange?.(selectedValue);
+            if (!navigation) onChange?.(selectedValue);
         },
         onInputValueChange: ({ inputValue: newItemInputValue })=>{
-            const filtered = items.filter((item)=>item.label.toLowerCase().includes(newItemInputValue.toLowerCase()));
-            setOptions(filtered);
+            if ("local" === filterBehavior) {
+                const filtered = allItems.filter((item)=>item.label.toLowerCase().includes(newItemInputValue.toLowerCase()));
+                setOptions(filtered);
+            }
             onInputValueChange?.(newItemInputValue);
         },
         onOpenChange: ({ open })=>{
-            setOptions(items);
+            setOptions(allItems);
             onOpenChange?.(open);
         }
     });
     const api = connect(service, normalizeProps);
-    const inputProps = api.getInputProps();
-    const { ...restInputProps } = inputProps;
-    const { root, label: labelStyles, control, input, trigger, positioner, content, list, item: itemSlot, itemText, itemIndicator, emptyState, triggerIndicator } = comboboxVariants({
+    const { root, label: labelStyles, control, input, trigger, positioner, content, list, groupLabel, footer: footerSlot, item: itemSlot, itemText, itemIndicator, emptyState, status: statusSlot, triggerIndicator } = comboboxVariants({
         size
     });
     const hasOptions = api.collection.size > 0;
-    const showEmptyState = !hasOptions && Boolean(api.inputValue);
+    const showEmptyState = !resultsHidden && !hasOptions && Boolean(api.inputValue);
+    let state = "idle";
+    if (loading) state = "loading";
+    else if (error) state = "error";
+    else if (hasOptions) state = "results";
+    else if (showEmptyState) state = "empty";
+    const visibleValues = new Set(collection.items.map((item)=>item.value));
+    const renderOption = (item)=>{
+        const itemProps = api.getItemProps({
+            item
+        });
+        const itemContent = renderItem ? renderItem(item) : /*#__PURE__*/ jsx("span", {
+            className: itemText(),
+            children: item.label
+        });
+        if (navigation) {
+            const blocked = disabled || readOnly || item.disabled || !item.href;
+            return /*#__PURE__*/ createElement("a", {
+                ...itemProps,
+                "aria-label": item.label,
+                className: itemSlot(),
+                href: blocked ? void 0 : item.href,
+                key: item.value,
+                onClick: (event)=>{
+                    if (blocked) return void event.preventDefault();
+                    itemProps.onClick?.(event);
+                    if (navigate && !event.defaultPrevented && 0 === event.button && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+                        event.preventDefault();
+                        navigate({
+                            node: event.currentTarget,
+                            href: event.currentTarget.href,
+                            value: item.value
+                        });
+                    }
+                }
+            }, itemContent);
+        }
+        return /*#__PURE__*/ createElement("div", {
+            ...itemProps,
+            "aria-label": item.label,
+            className: itemSlot(),
+            key: item.value,
+            children: [
+                itemContent,
+                /*#__PURE__*/ jsx("span", {
+                    ...api.getItemIndicatorProps({
+                        item
+                    }),
+                    className: itemIndicator(),
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        icon: "token-icon-check",
+                        size: "current"
+                    })
+                })
+            ]
+        });
+    };
     return /*#__PURE__*/ jsxs("div", {
+        ...api.getRootProps(),
         className: root(),
+        "data-mode": mode,
+        "data-status": state,
         children: [
             label && /*#__PURE__*/ jsx(Label, {
                 className: labelStyles(),
@@ -216,20 +314,33 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
                 children: [
                     /*#__PURE__*/ jsx(Input, {
                         className: input(),
-                        ...restInputProps,
-                        name: name,
+                        ...api.getInputProps(),
+                        "aria-controls": api.open ? listId : void 0,
+                        "aria-describedby": helpText ? helpTextId : void 0,
+                        name: navigation ? void 0 : name,
                         placeholder: placeholder,
                         required: required,
                         size: size
                     }),
-                    clearable && api.value.length > 0 && /*#__PURE__*/ jsx(ActionIcon, {
+                    clearable && (navigation ? Boolean(api.inputValue) : api.value.length > 0) && /*#__PURE__*/ jsx(ActionIcon, {
                         icon: clearIcon,
                         size: size ?? "md",
                         tone: "neutral",
-                        ...api.getClearTriggerProps()
+                        ...api.getClearTriggerProps(),
+                        disabled: disabled || readOnly,
+                        hidden: false,
+                        onClick: (event)=>{
+                            if (navigation) {
+                                if (disabled || readOnly) return;
+                                api.setInputValue("");
+                                api.focus();
+                            } else api.getClearTriggerProps().onClick?.(event);
+                        }
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         ...api.getTriggerProps(),
+                        "aria-controls": api.open ? listId : void 0,
+                        "aria-haspopup": "listbox",
                         className: trigger(),
                         size: "current",
                         theme: "unstyled",
@@ -242,48 +353,91 @@ function Combobox({ id, name, label, size, placeholder = "Select option", disabl
                 ]
             }),
             /*#__PURE__*/ jsx(Portal, {
+                disabled: !portalled,
                 children: /*#__PURE__*/ jsx("div", {
                     ...api.getPositionerProps(),
                     className: positioner(),
                     children: /*#__PURE__*/ jsxs("div", {
                         ...api.getContentProps(),
+                        "aria-labelledby": void 0,
                         className: content(),
+                        "data-status": state,
+                        role: void 0,
+                        tabIndex: void 0,
                         children: [
-                            hasOptions && /*#__PURE__*/ jsx("ul", {
+                            loading ? /*#__PURE__*/ jsxs("div", {
+                                className: statusSlot(),
+                                role: "status",
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        icon: "token-icon-spinner",
+                                        size: "current"
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: loadingMessage
+                                    })
+                                ]
+                            }) : error ? /*#__PURE__*/ jsxs("div", {
+                                className: statusSlot(),
+                                role: "alert",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "min-w-0 flex-1",
+                                        children: error
+                                    }),
+                                    onRetry && /*#__PURE__*/ jsx(Button, {
+                                        disabled: disabled || readOnly,
+                                        onClick: onRetry,
+                                        size: "sm",
+                                        variant: "secondary",
+                                        children: retryLabel
+                                    })
+                                ]
+                            }) : showEmptyState ? /*#__PURE__*/ jsx("div", {
+                                className: emptyState(),
+                                role: "status",
+                                children: noResultsMessage.replace("{inputValue}", api.inputValue)
+                            }) : null,
+                            /*#__PURE__*/ jsx("div", {
                                 ...api.getListProps(),
+                                "aria-busy": loading || void 0,
                                 className: list(),
-                                children: options.map((item)=>/*#__PURE__*/ jsxs("li", {
-                                        ...api.getItemProps({
-                                            item
+                                id: listId,
+                                children: !resultsHidden && (groups ? groups.map((group)=>{
+                                    const groupItems = group.items.filter((item)=>visibleValues.has(item.value));
+                                    if (0 === groupItems.length) return null;
+                                    return /*#__PURE__*/ createElement("div", {
+                                        ...api.getItemGroupProps({
+                                            id: group.id
                                         }),
-                                        className: itemSlot(),
+                                        "aria-labelledby": group.label ? api.getItemGroupProps({
+                                            id: group.id
+                                        })["aria-labelledby"] : void 0,
+                                        key: group.id,
                                         children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: itemText(),
-                                                children: item.label
-                                            }),
-                                            /*#__PURE__*/ jsx("span", {
-                                                ...api.getItemIndicatorProps({
-                                                    item
+                                            group.label && /*#__PURE__*/ jsx("div", {
+                                                ...api.getItemGroupLabelProps({
+                                                    htmlFor: group.id
                                                 }),
-                                                className: itemIndicator(),
-                                                children: /*#__PURE__*/ jsx(Icon, {
-                                                    icon: "token-icon-check",
-                                                    size: "current"
-                                                })
-                                            })
+                                                className: groupLabel(),
+                                                children: group.label
+                                            }),
+                                            groupItems.map(renderOption)
                                         ]
-                                    }, item.value))
+                                    });
+                                }) : collection.items.map(renderOption))
                             }),
-                            showEmptyState && /*#__PURE__*/ jsx("div", {
-                                className: emptyState(),
-                                children: noResultsMessage.replace("{inputValue}", api.inputValue)
+                            footer && /*#__PURE__*/ jsx("div", {
+                                className: footerSlot(),
+                                "data-part": "footer",
+                                children: footer
                             })
                         ]
                     })
                 })
             }),
             helpText && /*#__PURE__*/ jsx(StatusText, {
+                id: helpTextId,
                 showIcon: showHelpTextIcon,
                 size: size,
                 status: validateStatus,

package/dist/src/molecules/combobox.d.ts

@@ -1,3 +1,16 @@
+/**
+ * Combobox — @techsio/ui-kit molecule.
+ *
+ * @component Combobox
+ * @componentVersion v1.3.0
+ * @skill combobox-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the combobox-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import { type Props as ZagComboboxProps } from "@zag-js/combobox";
+import { type ReactNode } from "react";
 import type { VariantProps } from "tailwind-variants";
 import { type IconProps, type IconType } from "../atoms/icon.js";
 declare const comboboxVariants: import("tailwind-variants").TVReturnType<{
@@ -33,10 +46,13 @@ declare const comboboxVariants: import("tailwind-variants").TVReturnType<{
     positioner: string[];
     content: string[];
     list: string[];
+    groupLabel: string[];
+    footer: string[];
     itemText: string[];
     item: string[];
     itemIndicator: string[];
     emptyState: string[];
+    status: string[];
     triggerIndicator: string[];
     helper: string[];
     multiple: never[];
@@ -73,10 +89,13 @@ declare const comboboxVariants: import("tailwind-variants").TVReturnType<{
     positioner: string[];
     content: string[];
     list: string[];
+    groupLabel: string[];
+    footer: string[];
     itemText: string[];
     item: string[];
     itemIndicator: string[];
     emptyState: string[];
+    status: string[];
     triggerIndicator: string[];
     helper: string[];
     multiple: never[];
@@ -113,10 +132,13 @@ declare const comboboxVariants: import("tailwind-variants").TVReturnType<{
     positioner: string[];
     content: string[];
     list: string[];
+    groupLabel: string[];
+    footer: string[];
     itemText: string[];
     item: string[];
     itemIndicator: string[];
     emptyState: string[];
+    status: string[];
     triggerIndicator: string[];
     helper: string[];
     multiple: never[];
@@ -127,8 +149,20 @@ export type ComboboxItem<T = unknown> = {
     value: string;
     disabled?: boolean;
     data?: T;
+    href?: string;
 };
-export interface ComboboxProps<T = unknown> extends VariantProps<typeof comboboxVariants> {
+export type ComboboxItemGroup<T = unknown> = {
+    id: string;
+    label?: string;
+    items: ComboboxItem<T>[];
+};
+export type ComboboxProps<T = unknown> = VariantProps<typeof comboboxVariants> & ({
+    items: ComboboxItem<T>[];
+    groups?: never;
+} | {
+    items?: never;
+    groups: ComboboxItemGroup<T>[];
+}) & {
     id?: string;
     name?: string;
     label?: string;
@@ -136,7 +170,6 @@ export interface ComboboxProps<T = unknown> extends VariantProps<typeof combobox
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
-    items: ComboboxItem<T>[];
     value?: string | string[];
     defaultValue?: string | string[];
     inputValue?: string;
@@ -151,6 +184,8 @@ export interface ComboboxProps<T = unknown> extends VariantProps<typeof combobox
     allowCustomValue?: boolean;
     loopFocus?: boolean;
     autoFocus?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
     triggerIcon?: IconType;
     triggerIconSize?: IconProps["size"];
     clearIcon?: IconType;
@@ -158,7 +193,18 @@ export interface ComboboxProps<T = unknown> extends VariantProps<typeof combobox
     onInputValueChange?: (value: string) => void;
     onOpenChange?: (open: boolean) => void;
     inputBehavior?: "autohighlight" | "autocomplete" | "none";
-}
-export declare function Combobox<T = unknown>({ id, name, label, size, placeholder, disabled, readOnly, required, items, value, defaultValue, inputValue, multiple, validateStatus, helpText, showHelpTextIcon, noResultsMessage, clearable, selectionBehavior, closeOnSelect, allowCustomValue, loopFocus, autoFocus, triggerIcon, triggerIconSize, clearIcon, inputBehavior, onChange, onInputValueChange, onOpenChange, }: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
+    filterBehavior?: "local" | "external";
+    loading?: boolean;
+    loadingMessage?: string;
+    error?: ReactNode;
+    retryLabel?: string;
+    onRetry?: () => void;
+    renderItem?: (item: ComboboxItem<T>) => ReactNode;
+    mode?: "selection" | "navigation";
+    navigate?: ZagComboboxProps["navigate"];
+    footer?: ReactNode;
+    portalled?: boolean;
+};
+export declare function Combobox<T = unknown>({ id, name, label, size, placeholder, disabled, readOnly, required, items, groups, value, defaultValue, inputValue, multiple, validateStatus, helpText, showHelpTextIcon, noResultsMessage, clearable, selectionBehavior, closeOnSelect, allowCustomValue, loopFocus, autoFocus, open, defaultOpen, triggerIcon, triggerIconSize, clearIcon, inputBehavior, filterBehavior, loading, loadingMessage, error, retryLabel, onRetry, renderItem, onChange, onInputValueChange, onOpenChange, mode, navigate, footer, portalled, }: ComboboxProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=combobox.d.ts.map

package/dist/src/molecules/combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/molecules/combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/molecules/combobox.tsx"],"names":[],"mappings":"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"}

package/dist/src/templates/facet-filter-panel.d.ts

@@ -0,0 +1,96 @@
+/**
+ * FacetFilterPanel - @techsio/ui-kit template.
+ *
+ * @component FacetFilterPanel
+ * @componentVersion v1.0.1
+ * @skill facet-filter-panel-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ */
+import type { ReactNode } from "react";
+export type FacetFilterOption = {
+    value: string;
+    label: ReactNode;
+    count?: number;
+    disabled?: boolean;
+};
+type FacetFilterGroupBase = {
+    id: string;
+    disabled?: boolean;
+};
+export type FacetFilterOptionsGroup = FacetFilterGroupBase & {
+    type: "options";
+    label: ReactNode;
+    options: readonly FacetFilterOption[];
+    collapseAfter?: number;
+    emptyLabel?: ReactNode;
+};
+export type FacetFilterRangeGroup = FacetFilterGroupBase & {
+    type: "range";
+    label: string;
+    min: number;
+    max: number;
+    step?: number;
+    minStepsBetweenThumbs?: number;
+    value: readonly [number, number];
+    formatValue?: (value: number) => string;
+    formatRangeText?: (values: number[]) => string;
+};
+export type FacetFilterGroup = FacetFilterOptionsGroup | FacetFilterRangeGroup;
+export type FacetFilterActiveItem = {
+    id: string;
+    label: ReactNode;
+    removeLabel: string;
+};
+export type FacetFilterOptionChangeDetails = {
+    groupId: string;
+    value: string;
+    checked: boolean;
+};
+export type FacetFilterRangeChangeDetails = {
+    groupId: string;
+    value: [number, number];
+};
+export type FacetFilterPanelProps = {
+    title: ReactNode;
+    groups: readonly FacetFilterGroup[];
+    selectedValues?: Readonly<Record<string, readonly string[]>>;
+    activeFilters?: readonly FacetFilterActiveItem[];
+    presentation?: "inline" | "drawer";
+    disabled?: boolean;
+    pending?: boolean;
+    pendingLabel?: ReactNode;
+    activeFiltersLabel?: ReactNode;
+    resetLabel?: ReactNode;
+    showMoreLabel?: (hiddenCount: number) => ReactNode;
+    showLessLabel?: ReactNode;
+    expandedGroups?: string[];
+    defaultExpandedGroups?: string[];
+    onExpandedGroupsChange?: (groupIds: string[]) => void;
+    drawerTriggerLabel?: ReactNode;
+    drawerPlacement?: "left" | "right";
+    drawerSize?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
+    drawerOpen?: boolean;
+    defaultDrawerOpen?: boolean;
+    onDrawerOpenChange?: (open: boolean) => void;
+    className?: string;
+    onOptionChange?: (details: FacetFilterOptionChangeDetails) => void;
+    onRangeChange?: (details: FacetFilterRangeChangeDetails) => void;
+    onRangeChangeEnd?: (details: FacetFilterRangeChangeDetails) => void;
+    onRemoveFilter?: (id: string) => void;
+    onReset?: () => void;
+};
+export type FacetFilterActiveFiltersProps = {
+    items: readonly FacetFilterActiveItem[];
+    label?: ReactNode;
+    resetLabel?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    onRemove?: (id: string) => void;
+    onReset?: () => void;
+};
+export declare function FacetFilterPanel({ presentation, drawerTriggerLabel, drawerPlacement, drawerSize, drawerOpen, defaultDrawerOpen, onDrawerOpenChange, className, ...props }: FacetFilterPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FacetFilterPanel {
+    var ActiveFilters: ({ items, label, resetLabel, disabled, className, onRemove, onReset, }: FacetFilterActiveFiltersProps) => import("react/jsx-runtime").JSX.Element | null;
+}
+export {};
+//# sourceMappingURL=facet-filter-panel.d.ts.map

package/dist/src/templates/facet-filter-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facet-filter-panel.d.ts","sourceRoot":"","sources":["../../../src/templates/facet-filter-panel.tsx"],"names":[],"mappings":"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"}

package/dist/src/templates/search-suggestions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * SearchSuggestions - @techsio/ui-kit template.
+ *
+ * @component SearchSuggestions
+ * @componentVersion v1.0.0
+ * @skill search-suggestions-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ */
+import type { ReactNode } from "react";
+import { type ComboboxItem, type ComboboxItemGroup, type ComboboxProps } from "../molecules/combobox.js";
+export type SearchSuggestionItem<T = unknown> = ComboboxItem<T> & {
+    href: string;
+};
+export type SearchSuggestionGroup<T = unknown> = Omit<ComboboxItemGroup<T>, "items"> & {
+    items: SearchSuggestionItem<T>[];
+};
+export type SearchSuggestionsProps<T = unknown> = Omit<ComboboxProps<T>, "items" | "groups" | "renderItem" | "footer" | "mode" | "multiple" | "value" | "defaultValue" | "onChange" | "name" | "selectionBehavior" | "allowCustomValue"> & {
+    groups: SearchSuggestionGroup<T>[];
+    resultSlot?: ComboboxProps<T>["renderItem"];
+    allResultsLink?: ReactNode;
+};
+export declare function SearchSuggestions<T = unknown>({ resultSlot, allResultsLink, filterBehavior, inputBehavior, portalled, ...props }: SearchSuggestionsProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-suggestions.d.ts.map

package/dist/src/templates/search-suggestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-suggestions.d.ts","sourceRoot":"","sources":["../../../src/templates/search-suggestions.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAEL,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAA;AAE9B,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,OAAO,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG;IAChE,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CACnD,iBAAiB,CAAC,CAAC,CAAC,EACpB,OAAO,CACR,GAAG;IACF,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAA;CACjC,CAAA;AAED,MAAM,MAAM,sBAAsB,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CACpD,aAAa,CAAC,CAAC,CAAC,EACd,OAAO,GACP,QAAQ,GACR,YAAY,GACZ,QAAQ,GACR,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,GACV,MAAM,GACN,mBAAmB,GACnB,kBAAkB,CACrB,GAAG;IACF,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAA;IAClC,UAAU,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAA;IAC3C,cAAc,CAAC,EAAE,SAAS,CAAA;CAC3B,CAAA;AAED,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,OAAO,EAAE,EAC7C,UAAU,EACV,cAAc,EACd,cAA2B,EAC3B,aAAsB,EACtB,SAAiB,EACjB,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CAY3B"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiQtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAwRtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/stories/molecules/combobox.stories.d.ts

@@ -8,4 +8,10 @@ export declare const ValidationStates: Story;
 export declare const MultipleSelection: Story;
 export declare const Sizes: Story;
 export declare const ComplexStory: Story;
+export declare const Grouped: Story;
+export declare const ExternalFiltering: Story;
+export declare const Loading: Story;
+export declare const LoadingWithSelection: Story;
+export declare const ErrorRetry: Story;
+export declare const RichItem: Story;
 //# sourceMappingURL=combobox.stories.d.ts.map

package/dist/stories/molecules/combobox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/combobox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,EAAE,QAAQ,EAAqB,MAAM,8BAA8B,CAAA;AAiB1E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAwE/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiC9B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAmD/B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA0BnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgD1B,CAAA"}
+{"version":3,"file":"combobox.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/combobox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,QAAQ,EAAqB,MAAM,8BAA8B,CAAA;AAiB1E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAwE/B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAA;AAEtC,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAiC9B,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAmD/B,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KA0BnB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAgD1B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAA;AAgCD,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAsBxB,CAAA;AAQD,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA"}

package/dist/stories/templates/facet-filter-panel.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FacetFilterPanel } from "../../src/templates/facet-filter-panel.js";
+declare const meta: Meta<typeof FacetFilterPanel>;
+export default meta;
+type Story = StoryObj<typeof FacetFilterPanel>;
+export declare const Playground: Story;
+export declare const Selected: Story;
+export declare const ActiveFilters: Story;
+export declare const EmptyAndOptionAvailability: Story;
+export declare const Disabled: Story;
+export declare const Pending: Story;
+export declare const Overflow: Story;
+export declare const NarrowLayout: Story;
+export declare const AsyncGroups: Story;
+export declare const RejectedDrawerClose: Story;
+export declare const DrawerOpen: Story;
+//# sourceMappingURL=facet-filter-panel.stories.d.ts.map

package/dist/stories/templates/facet-filter-panel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facet-filter-panel.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/facet-filter-panel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EACL,gBAAgB,EAOjB,MAAM,wCAAwC,CAAA;AAoP/C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAqDvC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAwBtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAmB3B,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,KA0BxC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiBtB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAiBrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAWtB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAA;AAeD,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAA;AAyBD,eAAO,MAAM,mBAAmB,EAAE,KAKjC,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAcxB,CAAA"}

package/dist/stories/templates/search-suggestions.stories.d.ts

@@ -0,0 +1,119 @@
+import type { StoryObj } from "@storybook/react";
+import { type SearchSuggestionGroup, type SearchSuggestionsProps } from "../../src/templates/search-suggestions.js";
+type ProductDetails = {
+    image?: string;
+    subtitle: string;
+    price?: string;
+};
+declare const meta: {
+    title: string;
+    component: ({ resultSlot, allResultsLink, filterBehavior, inputBehavior, portalled, ...props }: SearchSuggestionsProps<ProductDetails>) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("storybook-react-rsbuild").ReactRenderer, {
+        id?: string | undefined;
+        label?: string | undefined;
+        size?: "md" | "sm" | "lg" | undefined;
+        open?: boolean | undefined;
+        disabled?: boolean | undefined;
+        error?: import("react").ReactNode;
+        placeholder?: string | undefined;
+        readOnly?: boolean | undefined;
+        required?: boolean | undefined;
+        autoFocus?: boolean | undefined;
+        loading?: boolean | undefined;
+        loopFocus?: boolean | undefined;
+        inputValue?: string | undefined;
+        onInputValueChange?: ((value: string) => void) | undefined;
+        defaultOpen?: boolean | undefined;
+        inputBehavior?: "autohighlight" | "autocomplete" | "none" | undefined;
+        onOpenChange?: ((open: boolean) => void) | undefined;
+        closeOnSelect?: boolean | undefined;
+        navigate?: ((details: import("@zag-js/combobox").NavigateDetails) => void) | null | undefined;
+        validateStatus?: "default" | "error" | "success" | "warning" | undefined;
+        helpText?: string | undefined;
+        showHelpTextIcon?: boolean | undefined;
+        noResultsMessage?: string | undefined;
+        clearable?: boolean | undefined;
+        triggerIcon?: import("../../src/atoms/icon.js").IconType | undefined;
+        triggerIconSize?: "md" | "sm" | "lg" | "current" | "xs" | "xl" | "2xl" | undefined;
+        clearIcon?: import("../../src/atoms/icon.js").IconType | undefined;
+        filterBehavior?: "local" | "external" | undefined;
+        loadingMessage?: string | undefined;
+        retryLabel?: string | undefined;
+        onRetry?: (() => void) | undefined;
+        portalled?: boolean | undefined;
+        groups: SearchSuggestionGroup<ProductDetails>[];
+        resultSlot?: ((item: import("../../src/molecules/combobox.js").ComboboxItem<ProductDetails>) => import("react").ReactNode) | undefined;
+        allResultsLink?: import("react").ReactNode;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    argTypes: {
+        label: {
+            control: "text";
+        };
+        placeholder: {
+            control: "text";
+        };
+        size: {
+            control: "select";
+            options: string[];
+        };
+        disabled: {
+            control: "boolean";
+        };
+        readOnly: {
+            control: "boolean";
+        };
+        clearable: {
+            control: "boolean";
+        };
+        loading: {
+            control: "boolean";
+        };
+        loadingMessage: {
+            control: "text";
+        };
+        noResultsMessage: {
+            control: "text";
+        };
+        retryLabel: {
+            control: "text";
+        };
+        groups: {
+            control: false;
+        };
+        resultSlot: {
+            control: false;
+        };
+        allResultsLink: {
+            control: false;
+        };
+        navigate: {
+            control: false;
+        };
+    };
+    args: {
+        groups: SearchSuggestionGroup<ProductDetails>[];
+        label: string;
+        placeholder: string;
+        resultSlot: (item: import("../../src/molecules/combobox.js").ComboboxItem<ProductDetails>) => import("react").ReactNode;
+        navigate: import("storybook/test").Mock<(...args: any[]) => any>;
+        onInputValueChange: import("storybook/test").Mock<(...args: any[]) => any>;
+        allResultsLink: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Playground: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const GroupedResults: Story;
+export declare const WithoutGroupLabels: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const ErrorWithRetry: Story;
+export declare const NarrowLayout: Story;
+export declare const InDialog: Story;
+//# sourceMappingURL=search-suggestions.stories.d.ts.map

package/dist/stories/templates/search-suggestions.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-suggestions.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/search-suggestions.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAOtD,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC5B,MAAM,wCAAwC,CAAA;AAE/C,KAAK,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;AA2D1E,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCgD,CAAA;AAE1D,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,UAAU,EAAE,KAAU,CAAA;AAEnC,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAgBpB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAYhC,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAgB5B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAA"}

package/dist/templates/facet-filter-panel.js

@@ -0,0 +1,310 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { Button } from "../atoms/button.js";
+import { Accordion } from "../molecules/accordion.js";
+import { Dialog } from "../molecules/dialog.js";
+import { FormCheckbox } from "../molecules/form-checkbox.js";
+import { Slider } from "../molecules/slider.js";
+import { tv } from "../utils.js";
+const facetFilterPanelStyles = tv({
+    slots: {
+        root: [
+            "flex w-full min-w-0 flex-col overflow-y-auto",
+            "max-h-(--container-facet-filter-panel-max-h) rounded-facet-filter-panel",
+            "border-(length:--border-width-facet-filter-panel) border-facet-filter-panel-border",
+            "bg-facet-filter-panel-bg text-facet-filter-panel-fg",
+            "p-facet-filter-panel"
+        ],
+        content: "flex min-h-0 flex-col gap-facet-filter-panel",
+        title: "font-facet-filter-panel-title text-facet-filter-panel-title text-facet-filter-panel-title-fg",
+        pending: "text-(length:--text-facet-filter-panel-status) text-facet-filter-panel-muted-fg",
+        groups: "min-h-0 gap-facet-filter-panel-group bg-facet-filter-panel-bg",
+        rangeGroup: "border-b-(length:--border-width-facet-filter-panel) border-facet-filter-panel-border p-facet-filter-panel-group",
+        optionList: "flex flex-col gap-facet-filter-panel-item",
+        optionLabel: "flex min-w-0 flex-1 items-center justify-between gap-facet-filter-panel-item",
+        optionText: "min-w-0 break-words",
+        optionCount: "shrink-0 text-facet-filter-panel-count text-facet-filter-panel-muted-fg",
+        empty: "text-(length:--text-facet-filter-panel-status) text-facet-filter-panel-muted-fg",
+        overflowAction: "mt-facet-filter-panel-overflow self-start",
+        drawerTrigger: "self-start",
+        drawerContent: "min-w-0",
+        triggerCount: "inline-flex min-w-facet-filter-panel-count items-center justify-center rounded-facet-filter-panel-count bg-facet-filter-panel-count-bg px-facet-filter-panel-count text-facet-filter-panel-count text-facet-filter-panel-count-fg",
+        activeRoot: "border-b-(length:--border-width-facet-filter-panel) flex flex-col gap-facet-filter-panel-active border-facet-filter-panel-border pb-facet-filter-panel-active",
+        activeHeader: "flex flex-wrap items-center justify-between gap-facet-filter-panel-active",
+        activeTitle: "font-facet-filter-panel-active-title text-facet-filter-panel-active-title",
+        activeList: "flex flex-wrap gap-facet-filter-panel-active"
+    }
+});
+const toRangeTuple = (values, group)=>[
+        values[0] ?? group.min,
+        values[1] ?? group.max
+    ];
+function FacetFilterOptions({ group, selectedValues, disabled, showMoreLabel, showLessLabel, onOptionChange }) {
+    const [expanded, setExpanded] = useState(false);
+    const styles = facetFilterPanelStyles();
+    const collapseAfter = Math.max(0, group.collapseAfter ?? group.options.length);
+    const hasOverflow = group.options.length > collapseAfter;
+    const visibleOptions = expanded || !hasOverflow ? group.options : group.options.slice(0, collapseAfter);
+    if (0 === group.options.length) return group.emptyLabel ? /*#__PURE__*/ jsx("div", {
+        className: styles.empty(),
+        children: group.emptyLabel
+    }) : null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col",
+        children: [
+            /*#__PURE__*/ jsx("ul", {
+                className: styles.optionList(),
+                children: visibleOptions.map((option)=>/*#__PURE__*/ jsx("li", {
+                        children: /*#__PURE__*/ jsx(FormCheckbox, {
+                            checked: selectedValues.includes(option.value),
+                            disabled: disabled || option.disabled,
+                            label: /*#__PURE__*/ jsxs("span", {
+                                className: styles.optionLabel(),
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: styles.optionText(),
+                                        children: option.label
+                                    }),
+                                    void 0 !== option.count ? /*#__PURE__*/ jsx("span", {
+                                        className: styles.optionCount(),
+                                        children: option.count
+                                    }) : null
+                                ]
+                            }),
+                            name: group.id,
+                            onCheckedChange: (checked)=>onOptionChange?.({
+                                    groupId: group.id,
+                                    value: option.value,
+                                    checked
+                                }),
+                            value: option.value
+                        })
+                    }, option.value))
+            }),
+            hasOverflow ? /*#__PURE__*/ jsx(Button, {
+                "aria-expanded": expanded,
+                className: styles.overflowAction(),
+                disabled: disabled,
+                onClick: ()=>setExpanded((current)=>!current),
+                size: "sm",
+                theme: "borderless",
+                type: "button",
+                variant: "primary",
+                children: expanded ? showLessLabel : showMoreLabel(group.options.length - collapseAfter)
+            }) : null
+        ]
+    });
+}
+function FacetFilterPanelContent({ title, groups, selectedValues = {}, activeFilters = [], disabled = false, pending = false, pendingLabel, activeFiltersLabel = "Active filters", resetLabel = "Clear filters", showMoreLabel = (hiddenCount)=>`Show ${hiddenCount} more`, showLessLabel = "Show less", expandedGroups, defaultExpandedGroups, onExpandedGroupsChange, onOptionChange, onRangeChange, onRangeChangeEnd, onRemoveFilter, onReset, showTitle, titleId }) {
+    const styles = facetFilterPanelStyles();
+    const interactionDisabled = disabled || pending;
+    const optionGroupIds = groups.filter((group)=>"options" === group.type).map((group)=>group.id);
+    const [localExpandedGroups, setLocalExpandedGroups] = useState(()=>defaultExpandedGroups ?? optionGroupIds);
+    const previousGroupIds = useRef(new Set(optionGroupIds));
+    useEffect(()=>{
+        const addedGroupIds = optionGroupIds.filter((id)=>!previousGroupIds.current.has(id));
+        previousGroupIds.current = new Set(optionGroupIds);
+        if (void 0 === expandedGroups && void 0 === defaultExpandedGroups && addedGroupIds.length > 0) setLocalExpandedGroups((current)=>[
+                ...new Set([
+                    ...current,
+                    ...addedGroupIds
+                ])
+            ]);
+    }, [
+        optionGroupIds,
+        expandedGroups,
+        defaultExpandedGroups
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        "aria-busy": pending || void 0,
+        className: styles.content(),
+        children: [
+            showTitle ? /*#__PURE__*/ jsx("h2", {
+                className: styles.title(),
+                id: titleId,
+                children: title
+            }) : null,
+            pending && pendingLabel ? /*#__PURE__*/ jsx("output", {
+                "aria-live": "polite",
+                className: styles.pending(),
+                children: pendingLabel
+            }) : null,
+            /*#__PURE__*/ jsx(FacetFilterPanel.ActiveFilters, {
+                disabled: interactionDisabled,
+                items: activeFilters,
+                label: activeFiltersLabel,
+                onRemove: onRemoveFilter,
+                onReset: onReset,
+                resetLabel: resetLabel
+            }),
+            /*#__PURE__*/ jsx(Accordion, {
+                className: styles.groups(),
+                disabled: disabled,
+                multiple: true,
+                onChange: (groupIds)=>{
+                    if (void 0 === expandedGroups) setLocalExpandedGroups(groupIds);
+                    onExpandedGroupsChange?.(groupIds);
+                },
+                value: expandedGroups ?? localExpandedGroups,
+                variant: "child",
+                children: groups.map((group)=>{
+                    if ("range" === group.type) return /*#__PURE__*/ jsx("section", {
+                        className: styles.rangeGroup(),
+                        children: /*#__PURE__*/ jsx(Slider, {
+                            disabled: interactionDisabled || group.disabled,
+                            formatRangeText: group.formatRangeText,
+                            formatValue: group.formatValue,
+                            label: group.label,
+                            max: group.max,
+                            min: group.min,
+                            minStepsBetweenThumbs: group.minStepsBetweenThumbs,
+                            onChange: (value)=>onRangeChange?.({
+                                    groupId: group.id,
+                                    value: toRangeTuple(value, group)
+                                }),
+                            onChangeEnd: (value)=>onRangeChangeEnd?.({
+                                    groupId: group.id,
+                                    value: toRangeTuple(value, group)
+                                }),
+                            showValueText: true,
+                            step: group.step,
+                            value: [
+                                ...group.value
+                            ]
+                        })
+                    }, group.id);
+                    return /*#__PURE__*/ jsxs(Accordion.Item, {
+                        disabled: group.disabled,
+                        value: group.id,
+                        children: [
+                            /*#__PURE__*/ jsxs(Accordion.Header, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Accordion.Title, {
+                                        children: group.label
+                                    }),
+                                    /*#__PURE__*/ jsx(Accordion.Indicator, {})
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Accordion.Content, {
+                                children: /*#__PURE__*/ jsx(FacetFilterOptions, {
+                                    disabled: interactionDisabled || Boolean(group.disabled),
+                                    group: group,
+                                    onOptionChange: onOptionChange,
+                                    selectedValues: selectedValues[group.id] ?? [],
+                                    showLessLabel: showLessLabel,
+                                    showMoreLabel: showMoreLabel
+                                })
+                            })
+                        ]
+                    }, group.id);
+                })
+            })
+        ]
+    });
+}
+function FacetFilterPanel({ presentation = "inline", drawerTriggerLabel, drawerPlacement = "right", drawerSize = "sm", drawerOpen, defaultDrawerOpen = false, onDrawerOpenChange, className, ...props }) {
+    const styles = facetFilterPanelStyles();
+    const inlineTitleId = useId();
+    const drawerTriggerRef = useRef(null);
+    const [uncontrolledDrawerOpen, setUncontrolledDrawerOpen] = useState(defaultDrawerOpen);
+    const resolvedDrawerOpen = drawerOpen ?? uncontrolledDrawerOpen;
+    const activeCount = props.activeFilters?.length ?? 0;
+    const setDrawerOpen = (open)=>{
+        if (void 0 === drawerOpen) setUncontrolledDrawerOpen(open);
+        onDrawerOpenChange?.(open);
+    };
+    if ("drawer" === presentation) return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Button, {
+                "aria-expanded": resolvedDrawerOpen,
+                "aria-haspopup": "dialog",
+                className: styles.drawerTrigger(),
+                icon: "token-icon-facet-filter-panel-filter",
+                onClick: ()=>setDrawerOpen(true),
+                ref: drawerTriggerRef,
+                type: "button",
+                variant: "primary",
+                children: [
+                    drawerTriggerLabel ?? props.title,
+                    activeCount > 0 ? /*#__PURE__*/ jsx("span", {
+                        "aria-hidden": "true",
+                        className: styles.triggerCount(),
+                        children: activeCount
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx(Dialog, {
+                className: styles.drawerContent({
+                    className
+                }),
+                customTrigger: true,
+                finalFocusEl: ()=>drawerTriggerRef.current,
+                onOpenChange: ({ open })=>setDrawerOpen(open),
+                open: resolvedDrawerOpen,
+                placement: drawerPlacement,
+                size: drawerSize,
+                title: props.title,
+                children: /*#__PURE__*/ jsx(FacetFilterPanelContent, {
+                    ...props,
+                    showTitle: false
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsx("aside", {
+        "aria-labelledby": inlineTitleId,
+        className: styles.root({
+            className
+        }),
+        children: /*#__PURE__*/ jsx(FacetFilterPanelContent, {
+            ...props,
+            showTitle: true,
+            titleId: inlineTitleId
+        })
+    });
+}
+FacetFilterPanel.ActiveFilters = function({ items, label = "Active filters", resetLabel = "Clear filters", disabled = false, className, onRemove, onReset }) {
+    const styles = facetFilterPanelStyles();
+    if (0 === items.length) return null;
+    return /*#__PURE__*/ jsxs("section", {
+        className: styles.activeRoot({
+            className
+        }),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: styles.activeHeader(),
+                children: [
+                    /*#__PURE__*/ jsx("h3", {
+                        className: styles.activeTitle(),
+                        children: label
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        disabled: disabled,
+                        onClick: onReset,
+                        size: "sm",
+                        theme: "borderless",
+                        type: "button",
+                        variant: "primary",
+                        children: resetLabel
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: styles.activeList(),
+                children: items.map((item)=>/*#__PURE__*/ jsx(Button, {
+                        "aria-label": item.removeLabel,
+                        disabled: disabled,
+                        icon: "token-icon-close",
+                        iconPosition: "right",
+                        onClick: ()=>onRemove?.(item.id),
+                        size: "sm",
+                        theme: "outlined",
+                        type: "button",
+                        variant: "primary",
+                        children: item.label
+                    }, item.id))
+            })
+        ]
+    });
+};
+export { FacetFilterPanel };

package/dist/templates/search-suggestions.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { Combobox } from "../molecules/combobox.js";
+function SearchSuggestions({ resultSlot, allResultsLink, filterBehavior = "external", inputBehavior = "none", portalled = false, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox, {
+        ...props,
+        filterBehavior: filterBehavior,
+        footer: allResultsLink,
+        inputBehavior: inputBehavior,
+        mode: "navigation",
+        portalled: portalled,
+        renderItem: resultSlot
+    });
+}
+export { SearchSuggestions };

package/dist/test/combobox.behavior.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=combobox.behavior.spec.d.ts.map

package/dist/test/combobox.behavior.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.behavior.spec.d.ts","sourceRoot":"","sources":["../../test/combobox.behavior.spec.ts"],"names":[],"mappings":""}

package/dist/test/facet-filter-panel.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=facet-filter-panel.spec.d.ts.map

package/dist/test/facet-filter-panel.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facet-filter-panel.spec.d.ts","sourceRoot":"","sources":["../../test/facet-filter-panel.spec.ts"],"names":[],"mappings":""}

package/dist/test/search-suggestions.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=search-suggestions.spec.d.ts.map

package/dist/test/search-suggestions.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-suggestions.spec.d.ts","sourceRoot":"","sources":["../../test/search-suggestions.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.49.0",
+  "version": "0.50.0",
   "license": "MIT",
   "type": "module",
   "repository": {

package/src/tokens/components/components.css

@@ -53,3 +53,5 @@
 @import "./organisms/_header.css";
 @import "./organisms/_gallery.css";
 @import "./organisms/_sidebar.css";
+
+@import "./templates/_facet-filter-panel.css";

package/src/tokens/components/molecules/_combobox.css

@@ -5,14 +5,36 @@
  *   - `--padding-combobox-input-{size}` semantic aliases (Figma exports
  *     the shared per-size spacing axis).
  *   - `--padding-combobox-trigger` composite.
+ *   - Group, footer, and async status aliases over shared popup tokens.
  */
 
 @theme static {
+  --color-combobox-status: var(--color-popup-item-fg);
+  --color-combobox-group: var(--color-popup-item-fg);
+  --color-combobox-divider: var(--color-popup-border);
+
+  --color-combobox-status-fg: var(--color-combobox-status);
+  --color-combobox-group-fg: var(--color-combobox-group);
+  --color-combobox-footer-border: var(--color-combobox-divider);
+
   --padding-combobox-input-sm: var(--spacing-combobox-sm);
   --padding-combobox-input-md: var(--spacing-combobox-md);
   --padding-combobox-input-lg: var(--spacing-combobox-lg);
 
   --padding-combobox-trigger: 0 var(--spacing-100);
+
+  --text-combobox-group-label-size: var(--text-sm);
+  --font-weight-combobox-group-label: var(--font-weight-semibold);
+}
+
+/* Resolve the popup's size scale on each group label, footer, or status. */
+@utility combobox-popup-padding {
+  padding: var(--popup-item-y, var(--padding-popup-item-y-md))
+    var(--popup-item-x, var(--padding-popup-item-x-md));
+}
+
+@utility combobox-status-gap {
+  gap: var(--popup-item-gap, var(--spacing-popup-item-md));
 }
 
 /* Semantic tokens for combobox icons */

package/src/tokens/components/templates/_facet-filter-panel.css

@@ -0,0 +1,43 @@
+@theme static {
+  /* Reference layer */
+  --color-facet-filter-panel-surface: var(--color-fill-surface);
+  --color-facet-filter-panel-text: var(--color-fg-primary);
+  --color-facet-filter-panel-muted: var(--color-fg-secondary);
+  --color-facet-filter-panel-divider: var(--color-border-primary);
+  --color-facet-filter-panel-accent: var(--color-bg-primary-base);
+  --color-facet-filter-panel-on-accent: var(--color-fg-on-primary-solid-neo);
+
+  /* Derived layer */
+  --color-facet-filter-panel-bg: var(--color-facet-filter-panel-surface);
+  --color-facet-filter-panel-fg: var(--color-facet-filter-panel-text);
+  --color-facet-filter-panel-title-fg: var(--color-facet-filter-panel-text);
+  --color-facet-filter-panel-muted-fg: var(--color-facet-filter-panel-muted);
+  --color-facet-filter-panel-border: var(--color-facet-filter-panel-divider);
+  --color-facet-filter-panel-count-bg: var(--color-facet-filter-panel-accent);
+  --color-facet-filter-panel-count-fg: var(--color-facet-filter-panel-on-accent);
+
+  --border-width-facet-filter-panel: var(--border-sm);
+  --radius-facet-filter-panel: var(--radius-md);
+  --radius-facet-filter-panel-count: var(--radius-sm);
+  --container-facet-filter-panel-max-h: calc(100dvh - var(--spacing-400));
+  --spacing-facet-filter-panel: var(--spacing-200);
+  --spacing-facet-filter-panel-group: var(--spacing-100);
+  --spacing-facet-filter-panel-item: var(--spacing-100);
+  --spacing-facet-filter-panel-active: var(--spacing-100);
+  --spacing-facet-filter-panel-overflow: var(--spacing-100);
+  --spacing-facet-filter-panel-count: var(--spacing-400);
+  --padding-facet-filter-panel: var(--spacing-200);
+  --padding-facet-filter-panel-group: var(--spacing-200);
+  --padding-facet-filter-panel-active: var(--spacing-150);
+  --padding-facet-filter-panel-count: var(--spacing-100);
+  --text-facet-filter-panel-title: var(--text-md);
+  --text-facet-filter-panel-active-title: var(--text-sm);
+  --text-facet-filter-panel-status: var(--text-sm);
+  --text-facet-filter-panel-count: var(--text-xs);
+  --font-weight-facet-filter-panel-title: var(--font-weight-semibold);
+  --font-weight-facet-filter-panel-active-title: var(--font-weight-medium);
+}
+
+@utility token-icon-facet-filter-panel-filter {
+  @apply icon-[mdi--filter-variant];
+}