@seekora-ai/ui-sdk-react 0.2.13 → 0.2.14

package/dist/src/index.js

@@ -307,6 +307,9 @@ class SearchStateManager {
         this.autoSearch = config.autoSearch !== false;
         this.debounceMs = config.debounceMs || 300;
         this.defaultSearchOptions = config.defaultSearchOptions || { widget_mode: true };
+        this.keepResultsOnClear = config.keepResultsOnClear !== false;
+        this.abTestId = config.abTestId;
+        this.abVariant = config.abVariant;
         this.state = {
             query: config.initialQuery || '',
             refinements: [],
@@ -355,6 +358,15 @@ class SearchStateManager {
             }
             return;
         }
+        // When query is cleared to empty and keepResultsOnClear is true,
+        // preserve previous results and skip triggering a search
+        if (query === '' && this.keepResultsOnClear) {
+            log.verbose('SearchStateManager: Query cleared, keeping previous results');
+            this.state.query = '';
+            this.state.currentPage = 1;
+            this.notifyListeners();
+            return;
+        }
         this.state.query = query;
         this.state.currentPage = 1; // Reset to first page on new query
         log.verbose('SearchStateManager: Query updated', { query, triggerSearch, autoSearch: this.autoSearch });
@@ -553,6 +565,23 @@ class SearchStateManager {
             }
         });
     }
+    /** Explicitly clear results (bypasses keepResultsOnClear) */
+    clearResults() {
+        this.setState({ results: null, loading: false, error: null });
+        log.verbose('SearchStateManager: Results explicitly cleared');
+    }
+    // A/B test getters
+    getAbTestId() {
+        return this.abTestId;
+    }
+    getAbVariant() {
+        return this.abVariant;
+    }
+    setAbTest(abTestId, abVariant) {
+        this.abTestId = abTestId;
+        this.abVariant = abVariant;
+        log.verbose('SearchStateManager: A/B test updated', { abTestId, abVariant });
+    }
     // Clear all state
     clear() {
         this.state = {
@@ -1335,10 +1364,11 @@ const createTheme = (config) => {
 /**
  * SearchProvider Component
  *
- * Provides Seekora client and context to child components
+ * Provides Seekora client and context to child components.
+ * Supports A/B testing via abTestId/abVariant props.
  */
 const SearchContext = React.createContext(null);
-const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = true, autoTrackSearch = true, stateManager: stateManagerConfig, children, }) => {
+const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = true, autoTrackSearch = true, stateManager: stateManagerConfig, children, abTestId, abVariant, experiments: _experiments, }) => {
     const theme = React.useMemo(() => {
         return themeConfig ? createTheme(themeConfig) : defaultTheme;
     }, [themeConfig]);
@@ -1351,8 +1381,19 @@ const SearchProvider = ({ client, theme: themeConfig, enableAnalytics = true, au
             itemsPerPage: 10,
             defaultSearchOptions: { widget_mode: true },
             ...stateManagerConfig,
+            abTestId,
+            abVariant,
         });
-    }, [client, stateManagerConfig]);
+    }, [client, stateManagerConfig, abTestId, abVariant]);
+    // Update A/B test fields on state manager and SDK client when props change
+    React.useEffect(() => {
+        if (abTestId !== undefined || abVariant !== undefined) {
+            stateManager.setAbTest(abTestId, abVariant);
+            if (typeof client.setAbTest === 'function') {
+                client.setAbTest(abTestId, abVariant);
+            }
+        }
+    }, [stateManager, client, abTestId, abVariant]);
     const value = React.useMemo(() => ({
         client,
         theme,
@@ -1485,9 +1526,25 @@ const useQuerySuggestions = ({ client, query, enabled = true, debounceMs = 300,
             }
             catch (err) {
                 const error = err instanceof Error ? err : new Error(String(err));
-                log.error('Error in useQuerySuggestions:', error);
-                setError(error);
-                setSuggestions([]);
+                // Check if it's a 404 error (suggestions not enabled for this store).
+                // The search SDK wraps axios errors into plain Error objects with the status
+                // embedded in the message, e.g. "[getSuggestions] ... (404)".
+                const errMsg = error.message || '';
+                const is404 = err?.response?.status === 404 ||
+                    err?.status === 404 ||
+                    /\(404\)/.test(errMsg);
+                if (is404) {
+                    // Silently handle 404 - suggestions feature not enabled
+                    log.verbose('Query suggestions not enabled for this store (404)');
+                    setSuggestions([]);
+                    setError(null);
+                }
+                else {
+                    // For other errors, log and set error state
+                    log.error('Error in useQuerySuggestions:', error);
+                    setError(error);
+                    setSuggestions([]);
+                }
             }
             finally {
                 setLoading(false);
@@ -1513,7 +1570,42 @@ function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else i
  *
  * Interactive search input component with query suggestions support
  */
-const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, showLoadingState = false, renderSuggestion, renderLoading, }) => {
+const SIZE_CONFIG = {
+    small: {
+        padding: '0.375rem 0.5rem',
+        fontSize: '0.875rem',
+        iconSize: 14,
+        iconPaddingLeft: '1.75rem',
+        iconPaddingRight: '1.75rem',
+        iconLeft: '0.5rem',
+        iconRight: '0.5rem',
+    },
+    medium: {
+        padding: '0.625rem 1rem',
+        fontSize: '1rem',
+        iconSize: 18,
+        iconPaddingLeft: '2.25rem',
+        iconPaddingRight: '2.25rem',
+        iconLeft: '0.625rem',
+        iconRight: '0.625rem',
+    },
+    large: {
+        padding: '0.875rem 1.25rem',
+        fontSize: '1.25rem',
+        iconSize: 22,
+        iconPaddingLeft: '2.75rem',
+        iconPaddingRight: '2.75rem',
+        iconLeft: '0.75rem',
+        iconRight: '0.75rem',
+    },
+};
+const DefaultSearchIcon = ({ size = 18 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+    React.createElement("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })));
+const DefaultClearIcon = ({ size = 14 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+    React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
+const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, showLoadingState = false, renderSuggestion, renderLoading, renderSearchIcon, showClearButton = true, renderClearIcon, showSubmitButton = false, renderSubmitButton, size = 'medium', }) => {
     const { client, theme, enableAnalytics, autoTrackSearch } = useSearchContext();
     const { query, setQuery, search: triggerSearch, results, loading: searchLoading, error: searchError } = useSearchState();
     const [isFocused, setIsFocused] = React.useState(false);
@@ -1654,28 +1746,104 @@ const SearchBar = ({ placeholder = 'Search...', showSuggestions = true, debounce
     const processingTime = res?.processingTimeMS
         || res?.data?.processingTimeMS
         || res?.data?.data?.processingTimeMS;
+    // Size-based configuration
+    const sizeConfig = SIZE_CONFIG[size];
+    const hasClearBtn = showClearButton && query.length > 0;
+    // Compute input padding accounting for icons
+    const inputPaddingLeft = sizeConfig.iconPaddingLeft ;
+    const inputPaddingRight = hasClearBtn ? sizeConfig.iconPaddingRight : sizeConfig.padding.split(' ')[1] || sizeConfig.padding;
+    const borderRadius = typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium;
+    const focusBorderColor = isFocused ? theme.colors.focus : theme.colors.border;
+    const focusRingShadow = isFocused
+        ? `0 0 0 3px ${theme.colors.focus}33`
+        : undefined;
+    const handleClear = React.useCallback(() => {
+        setQuery('', false);
+        setSelectedIndex(-1);
+        inputRef.current?.focus();
+    }, [setQuery]);
+    const handleSubmit = React.useCallback(() => {
+        const currentValue = inputRef.current?.value || query;
+        handleSearch(currentValue);
+    }, [query, handleSearch]);
     return (React.createElement("div", { ref: containerRef, className: clsx(searchBarTheme.container, className), style: {
             position: 'relative',
             display: 'flex',
             alignItems: 'center',
+            // CSS custom properties for external styling
+            '--seekora-searchbar-bg': theme.colors.background,
+            '--seekora-searchbar-border': theme.colors.border,
+            '--seekora-searchbar-focus-border': theme.colors.focus,
+            '--seekora-searchbar-radius': borderRadius,
+            '--seekora-searchbar-icon-color': theme.colors.textSecondary,
             ...style,
         } },
-        React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, className: clsx(searchBarTheme.input, isFocused && searchBarTheme.inputFocused), style: {
-                flex: 1,
-                padding: theme.spacing.medium,
-                fontSize: theme.typography.fontSize.medium,
+        React.createElement("div", { style: { position: 'relative', flex: 1, display: 'flex', alignItems: 'center' } },
+            (React.createElement("span", { className: searchBarTheme.searchIcon, "aria-hidden": "true", style: {
+                    position: 'absolute',
+                    left: sizeConfig.iconLeft,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    pointerEvents: 'none',
+                    color: 'var(--seekora-searchbar-icon-color)',
+                    zIndex: 1,
+                } }, renderSearchIcon ? renderSearchIcon() : React.createElement(DefaultSearchIcon, { size: sizeConfig.iconSize }))),
+            React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, className: clsx(searchBarTheme.input, isFocused && searchBarTheme.inputFocused), style: {
+                    width: '100%',
+                    paddingTop: sizeConfig.padding.split(' ')[0],
+                    paddingBottom: sizeConfig.padding.split(' ')[0],
+                    paddingLeft: inputPaddingLeft,
+                    paddingRight: inputPaddingRight,
+                    fontSize: sizeConfig.fontSize,
+                    fontFamily: theme.typography.fontFamily,
+                    backgroundColor: 'var(--seekora-searchbar-bg)',
+                    color: theme.colors.text,
+                    borderWidth: '1px',
+                    borderStyle: 'solid',
+                    borderColor: focusBorderColor,
+                    borderRadius: 'var(--seekora-searchbar-radius)',
+                    outline: 'none',
+                    boxShadow: focusRingShadow,
+                    transition: theme.transitions?.fast || '150ms ease-in-out',
+                    boxSizing: 'border-box',
+                } }),
+            hasClearBtn && (React.createElement("button", { type: "button", onClick: handleClear, className: searchBarTheme.clearButton, "aria-label": "Clear search", style: {
+                    position: 'absolute',
+                    right: sizeConfig.iconRight,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: '2px',
+                    borderRadius: '50%',
+                    color: 'var(--seekora-searchbar-icon-color)',
+                    transition: theme.transitions?.fast || '150ms ease-in-out',
+                    zIndex: 1,
+                }, onMouseDown: (e) => {
+                    // Prevent input blur so the clear action doesn't race with blur handler
+                    e.preventDefault();
+                } }, renderClearIcon ? renderClearIcon() : React.createElement(DefaultClearIcon, { size: sizeConfig.iconSize - 4 })))),
+        showSubmitButton && (renderSubmitButton ? (React.createElement("div", { onClick: handleSubmit, style: { marginLeft: theme.spacing.small, cursor: 'pointer' } }, renderSubmitButton())) : (React.createElement("button", { type: "button", onClick: handleSubmit, className: searchBarTheme.submitButton, style: {
+                marginLeft: theme.spacing.small,
+                padding: sizeConfig.padding,
+                fontSize: sizeConfig.fontSize,
                 fontFamily: theme.typography.fontFamily,
-                backgroundColor: theme.colors.background,
-                color: theme.colors.text,
-                borderWidth: '1px',
-                borderStyle: 'solid',
-                borderColor: isFocused ? theme.colors.focus : theme.colors.border,
-                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                outline: 'none',
-                ...(isFocused && {
-                    boxShadow: theme.shadows.small,
-                }),
-            } }),
+                fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                backgroundColor: theme.colors.primary,
+                color: '#ffffff',
+                border: 'none',
+                borderRadius: 'var(--seekora-searchbar-radius)',
+                cursor: 'pointer',
+                whiteSpace: 'nowrap',
+                transition: theme.transitions?.fast || '150ms ease-in-out',
+            } }, "Search"))),
         processingTime !== undefined && (React.createElement("span", { style: {
                 marginLeft: theme.spacing.small,
                 fontSize: theme.typography.fontSize.small,
@@ -1742,7 +1910,7 @@ const formatPrice$1 = (value, currency = '₹') => {
     }
     return String(value);
 };
-const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, showLoadingState = false, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, }) => {
+const SearchResults = ({ results: resultsProp, loading: loadingProp, error: errorProp, onResultClick, renderResult, renderEmpty, showLoadingState = false, renderLoading, renderError, className, style, theme: customTheme, itemsPerPage = 20, showPagination = false, viewMode = 'list', fieldMapping, extractResults, enableKeyboardNavigation = true, autoFocus = false, minHeight = '400px', minWidth = '100%', loadingOpacity = 0.7, }) => {
     const { theme, client, enableAnalytics } = useSearchContext();
     const { results: stateResults, loading: stateLoading, error: stateError, currentPage, itemsPerPage: stateItemsPerPage } = useSearchState();
     const searchResultsTheme = customTheme || {};
@@ -2086,6 +2254,10 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
     });
     // Determine container style based on view mode
     const containerStyle = {
+        minHeight: `var(--seekora-results-min-height, ${minHeight})`,
+        minWidth: `var(--seekora-results-min-width, ${minWidth})`,
+        transition: 'opacity 200ms ease-in-out',
+        opacity: loading && resultItems.length > 0 ? loadingOpacity : 1,
         ...style,
     };
     // Determine results list style based on view mode
@@ -2112,19 +2284,19 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
     // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
     if (loading && resultItems.length === 0 && showLoadingState) {
         log.verbose('SearchResults: Rendering loading state');
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderLoading ? renderLoading() : defaultRenderLoading()));
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderLoading ? renderLoading() : defaultRenderLoading()));
     }
-    // When loading with previous results, fall through and render them (no loading screen)
+    // When loading with previous results, fall through and render them (with opacity transition)
     if (error) {
         log.error('SearchResults: Rendering error state', {
             error: error.message,
             stack: error.stack,
         });
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderError ? renderError(error) : defaultRenderError(error)));
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderError ? renderError(error) : defaultRenderError(error)));
     }
     if (!results || resultItems.length === 0) {
         log.verbose('SearchResults: No results to display');
-        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: style }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));
+        return (React.createElement("div", { className: clsx(searchResultsTheme.container, className), style: containerStyle }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));
     }
     const renderFn = renderResult || defaultRenderResult;
     return (React.createElement("div", { ref: containerRef, className: clsx(searchResultsTheme.container, className), style: containerStyle, tabIndex: enableKeyboardNavigation ? 0 : undefined, onKeyDown: handleKeyDown, role: "listbox", "aria-label": "Search results", "aria-activedescendant": activeIndex >= 0 ? `result-${activeIndex}` : undefined },
@@ -2169,10 +2341,44 @@ const SearchResults = ({ results: resultsProp, loading: loadingProp, error: erro
  * Stats Component
  *
  * Displays search statistics (total results, processing time, etc.)
+ * Supports inline, badge, and detailed display variants.
  */
-const Stats = ({ results, renderStats, className, style, theme: customTheme, showProcessingTime = false, showQuery = false, separator = ' • ', }) => {
+/** CSS class name used for the animated count fade transition */
+const ANIMATE_CLASS = 'seekora-stats-animate';
+/** Inline <style> for the count-change animation and CSS custom properties */
+const statsStyleId = 'seekora-stats-styles';
+function ensureStatsStyles() {
+    if (typeof document === 'undefined')
+        return;
+    if (document.getElementById(statsStyleId))
+        return;
+    const style = document.createElement('style');
+    style.id = statsStyleId;
+    style.textContent = `
+    .seekora-stats-root {
+      --seekora-stats-color: inherit;
+      --seekora-stats-bg: transparent;
+      --seekora-stats-font-size: inherit;
+      --seekora-stats-badge-bg: inherit;
+      --seekora-stats-badge-color: inherit;
+    }
+    .${ANIMATE_CLASS} {
+      opacity: 0;
+      transition: opacity 250ms ease-in-out;
+    }
+  `;
+    document.head.appendChild(style);
+}
+const Stats = ({ results: resultsProp, renderStats, className, style, theme: customTheme, showProcessingTime = false, showQuery = false, separator = ' \u2022 ', variant = 'inline', showResultCount = true, formatNumber, }) => {
     const { theme } = useSearchContext();
+    const { results: stateResults } = useSearchState();
     const statsTheme = customTheme || {};
+    // Use results from prop if provided, otherwise from state manager
+    const results = resultsProp || stateResults;
+    // Inject keyframe / transition styles once
+    React.useEffect(() => {
+        ensureStatsStyles();
+    }, []);
     // Extract stats from results
     const res = results;
     const totalResults = res?.totalResults
@@ -2183,44 +2389,173 @@ const Stats = ({ results, renderStats, className, style, theme: customTheme, sho
         || res?.data?.processingTimeMS
         || res?.data?.data?.processingTimeMS;
     const query = (res?.query ?? '');
-    const defaultRenderStats = () => {
+    // Number formatter
+    const fmt = formatNumber || ((n) => n.toLocaleString());
+    // Animated count change — toggle a CSS class briefly on totalResults change
+    const countRef = React.useRef(null);
+    const prevTotalRef = React.useRef(totalResults);
+    const [animating, setAnimating] = React.useState(false);
+    React.useEffect(() => {
+        if (prevTotalRef.current !== totalResults) {
+            prevTotalRef.current = totalResults;
+            setAnimating(true);
+            // After a frame, remove the class so the transition plays (opacity 0 -> 1)
+            const raf = requestAnimationFrame(() => {
+                setAnimating(false);
+            });
+            return () => cancelAnimationFrame(raf);
+        }
+    }, [totalResults]);
+    // Helper: border radius value from theme
+    const borderRadiusSmall = typeof theme.borderRadius === 'string'
+        ? theme.borderRadius
+        : theme.borderRadius.small;
+    // ─── Custom render ────────────────────────────────────────
+    if (renderStats) {
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: style }, renderStats({
+            totalResults,
+            processingTime,
+            query,
+        })));
+    }
+    // ─── Inline variant (original behaviour) ──────────────────
+    if (variant === 'inline') {
         const parts = [];
-        if (totalResults > 0) {
-            parts.push(`${totalResults.toLocaleString()} result${totalResults !== 1 ? 's' : ''}`);
-        }
-        else {
-            parts.push('No results');
+        if (showResultCount) {
+            if (totalResults > 0) {
+                parts.push(React.createElement("span", { key: "count", className: statsTheme.text },
+                    React.createElement("span", { ref: countRef, className: clsx(animating && ANIMATE_CLASS), style: { transition: 'opacity 250ms ease-in-out' } }, fmt(totalResults)),
+                    ` result${totalResults !== 1 ? 's' : ''}`));
+            }
+            else {
+                parts.push(React.createElement("span", { key: "count", className: statsTheme.text }, "No results"));
+            }
         }
         if (showProcessingTime && processingTime !== undefined) {
-            parts.push(`${processingTime}ms`);
+            parts.push(React.createElement("span", { key: "time", className: statsTheme.text },
+                fmt(processingTime),
+                "ms"));
         }
         if (showQuery && query) {
-            parts.push(`for "${query}"`);
+            parts.push(React.createElement("span", { key: "query", className: statsTheme.text },
+                "for \"",
+                query,
+                "\""));
         }
-        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: {
-                fontSize: theme.typography.fontSize.medium,
-                color: theme.colors.text,
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: {
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.medium + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
                 ...style,
             } }, parts.map((part, index) => (React.createElement("span", { key: index },
-            index > 0 && React.createElement("span", { className: statsTheme.separator, style: { margin: `0 ${theme.spacing.small}` } }, separator),
-            React.createElement("span", { className: statsTheme.text }, part))))));
-    };
-    if (renderStats) {
-        return (React.createElement("div", { className: clsx(statsTheme.container, className), style: style }, renderStats({
-            totalResults,
-            processingTime,
-            query,
-        })));
+            index > 0 && (React.createElement("span", { className: statsTheme.separator, style: { margin: `0 ${theme.spacing.small}` } }, separator)),
+            part)))));
+    }
+    // ─── Badge variant ────────────────────────────────────────
+    if (variant === 'badge') {
+        const badges = [];
+        const badgeStyle = {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: theme.spacing.small,
+            padding: `${theme.spacing.small} ${theme.spacing.medium}`,
+            borderRadius: borderRadiusSmall,
+            backgroundColor: `var(--seekora-stats-badge-bg, ${theme.colors.primary}1A)`, // 10 % opacity hex
+            color: `var(--seekora-stats-badge-color, ${theme.colors.primary})`,
+            fontSize: theme.typography.fontSize.small,
+            fontWeight: 500,
+        };
+        if (showResultCount) {
+            badges.push(React.createElement("span", { key: "count", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Results"),
+                React.createElement("span", { className: clsx(statsTheme.badgeValue, animating && ANIMATE_CLASS), style: { fontWeight: 600, transition: 'opacity 250ms ease-in-out' } }, totalResults > 0 ? fmt(totalResults) : '0')));
+        }
+        if (showQuery && query) {
+            badges.push(React.createElement("span", { key: "query", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Query"),
+                React.createElement("span", { className: statsTheme.badgeValue, style: { fontWeight: 600 } }, query)));
+        }
+        if (showProcessingTime && processingTime !== undefined) {
+            badges.push(React.createElement("span", { key: "time", className: clsx(statsTheme.badge), style: badgeStyle },
+                React.createElement("span", { className: statsTheme.badgeLabel }, "Time"),
+                React.createElement("span", { className: statsTheme.badgeValue, style: { fontWeight: 600 } },
+                    fmt(processingTime),
+                    "ms")));
+        }
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.container, className), style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: theme.spacing.small,
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.small + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
+                ...style,
+            } }, badges));
+    }
+    // ─── Detailed variant ─────────────────────────────────────
+    if (variant === 'detailed') {
+        const rows = [];
+        if (showResultCount) {
+            rows.push({
+                label: 'Total Results',
+                value: (React.createElement("span", { className: clsx(animating && ANIMATE_CLASS), style: { transition: 'opacity 250ms ease-in-out' } }, fmt(totalResults))),
+            });
+        }
+        if (showQuery && query) {
+            rows.push({ label: 'Query', value: query });
+        }
+        if (showProcessingTime && processingTime !== undefined) {
+            rows.push({ label: 'Time', value: `${fmt(processingTime)}ms` });
+        }
+        return (React.createElement("div", { className: clsx('seekora-stats-root', statsTheme.detailed, statsTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing.small,
+                fontSize: 'var(--seekora-stats-font-size,' + theme.typography.fontSize.medium + ')',
+                color: 'var(--seekora-stats-color,' + theme.colors.text + ')',
+                backgroundColor: 'var(--seekora-stats-bg, transparent)',
+                ...style,
+            } }, rows.map((row, index) => (React.createElement("div", { key: index, className: statsTheme.detailedRow, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+            } },
+            React.createElement("span", { className: statsTheme.detailedLabel, style: {
+                    color: theme.colors.textSecondary,
+                    fontWeight: 500,
+                } },
+                row.label,
+                ":"),
+            React.createElement("span", { className: statsTheme.detailedValue, style: {
+                    color: theme.colors.text,
+                    fontWeight: 600,
+                } }, row.value))))));
     }
-    return defaultRenderStats();
+    // Fallback (should not be reached)
+    return null;
 };
 
 /**
  * Pagination Component
  *
- * Displays pagination controls for search results
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
  */
-const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, }) => {
+/** Size-specific style tokens */
+const SIZE_TOKENS = {
+    small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '32px' },
+    medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '40px' },
+    large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px' },
+};
+const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, variant = 'numbered', loadMoreText = 'Load More', size = 'medium', showPageInfo, previousLabel = 'Previous', nextLabel = 'Next', }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, currentPage: stateCurrentPage, setPage } = useSearchState();
     const paginationTheme = customTheme || {};
@@ -2243,6 +2578,19 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
         || res?.data?.total_pages
         || res?.data?.data?.total_pages
         || Math.ceil(totalResults / itemsPerPage);
+    // Resolve whether to show page info text
+    const resolvedShowPageInfo = showPageInfo !== undefined
+        ? showPageInfo
+        : variant === 'simple';
+    // Size tokens
+    const sizeTokens = SIZE_TOKENS[size];
+    // CSS variable aware helpers — allow overrides via custom properties
+    const cssVarBg = 'var(--seekora-pagination-bg, ' + theme.colors.background + ')';
+    const cssVarColor = 'var(--seekora-pagination-color, ' + theme.colors.text + ')';
+    const cssVarActiveBg = 'var(--seekora-pagination-active-bg, ' + theme.colors.primary + ')';
+    const cssVarActiveColor = 'var(--seekora-pagination-active-color, #fff)';
+    const cssVarBorder = 'var(--seekora-pagination-border, ' + theme.colors.border + ')';
+    const cssVarRadius = 'var(--seekora-pagination-radius, ' + (typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium) + ')';
     const handlePageChange = (page) => {
         if (page < 1 || page > totalPages || page === currentPage)
             return;
@@ -2253,22 +2601,26 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
             onPageChange(page);
         }
     };
-    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => handlePageChange(page), className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled), style: {
-            padding: theme.spacing.small,
+    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => handlePageChange(page), "aria-current": isActive ? 'page' : undefined, "aria-label": `Page ${page}`, className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled), style: {
+            padding: theme.spacing[sizeTokens.paddingKey],
             margin: `0 ${theme.spacing.small}`,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-            backgroundColor: isActive ? theme.colors.primary : theme.colors.background,
-            color: isActive ? '#fff' : theme.colors.text,
+            border: `1px solid ${cssVarBorder}`,
+            borderRadius: cssVarRadius,
+            backgroundColor: isActive ? cssVarActiveBg : cssVarBg,
+            color: isActive ? cssVarActiveColor : cssVarColor,
             cursor: 'pointer',
             opacity: 1,
-            fontSize: theme.typography.fontSize.medium,
-            minWidth: '40px',
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            minWidth: sizeTokens.minWidth,
             ...(isActive && {
                 fontWeight: 'bold',
             }),
         } }, page));
-    if (totalPages <= 1) {
+    if (totalPages <= 1 && variant !== 'load-more') {
+        return null;
+    }
+    // For load-more, hide when there are no more pages to load
+    if (variant === 'load-more' && currentPage >= totalPages) {
         return null;
     }
     // Calculate page range to display
@@ -2301,6 +2653,94 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
         }
         return pages;
     };
+    // ── Page info element ──────────────────────────────────────────────
+    const pageInfoElement = resolvedShowPageInfo ? (React.createElement("span", { className: clsx(paginationTheme.pageInfo), style: {
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            color: cssVarColor,
+            padding: `0 ${theme.spacing.small}`,
+            whiteSpace: 'nowrap',
+        }, "aria-live": "polite" },
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages)) : null;
+    // ── Load More variant ──────────────────────────────────────────────
+    if (variant === 'load-more') {
+        const remaining = Math.max(0, totalResults - currentPage * itemsPerPage);
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.loadMoreButton), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.large}`,
+                    border: 'none',
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarActiveBg,
+                    color: cssVarActiveColor,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                    minWidth: sizeTokens.minWidth,
+                }, "aria-label": remaining > 0 ? `${loadMoreText} (${remaining} remaining)` : loadMoreText },
+                loadMoreText,
+                remaining > 0 && (React.createElement("span", { className: clsx(paginationTheme.loadMoreText), style: {
+                        marginLeft: theme.spacing.small,
+                        opacity: 0.85,
+                        fontSize: theme.typography.fontSize.small,
+                    } },
+                    "(",
+                    remaining,
+                    " remaining)"))),
+            pageInfoElement));
+    }
+    // ── Simple variant ─────────────────────────────────────────────────
+    if (variant === 'simple') {
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, paginationTheme.simpleContainer, className), style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: theme.spacing.medium,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.simpleButton, currentPage === 1 && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === 1 ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Previous page" }, previousLabel),
+            React.createElement("span", { className: clsx(paginationTheme.simpleText, paginationTheme.pageInfo), style: {
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    color: cssVarColor,
+                    whiteSpace: 'nowrap',
+                }, "aria-live": "polite" },
+                "Page ",
+                currentPage,
+                " of ",
+                totalPages),
+            React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.simpleButton, currentPage === totalPages && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === totalPages ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Next page" }, nextLabel)));
+    }
+    // ── Numbered variant (default — original behavior) ─────────────────
     const pageNumbers = getPageNumbers();
     return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: style, "aria-label": "Pagination" },
         React.createElement("ul", { className: paginationTheme.list, style: {
@@ -2311,27 +2751,44 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
                 padding: 0,
                 margin: 0,
                 flexWrap: 'wrap',
+            }, tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    handlePageChange(currentPage - 1);
+                }
+                else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    handlePageChange(currentPage + 1);
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    handlePageChange(1);
+                }
+                else if (e.key === 'End') {
+                    e.preventDefault();
+                    handlePageChange(totalPages);
+                }
             } },
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.item, currentPage === 1 && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
                         opacity: currentPage === 1 ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Previous page" }, "Previous"))),
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Previous page" }, previousLabel))),
             pageNumbers.map((page, index) => {
                 if (page === 'ellipsis') {
                     return (React.createElement("li", { key: `ellipsis-${index}` },
                         React.createElement("span", { className: paginationTheme.ellipsis, style: {
-                                padding: theme.spacing.small,
+                                padding: theme.spacing[sizeTokens.paddingKey],
                                 margin: `0 ${theme.spacing.small}`,
-                                color: theme.colors.text,
-                                fontSize: theme.typography.fontSize.medium,
+                                color: cssVarColor,
+                                fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
                             } }, "...")));
                 }
                 const isActive = page === currentPage;
@@ -2342,89 +2799,274 @@ const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsP
             }),
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.item, currentPage === totalPages && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
                         opacity: currentPage === totalPages ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Next page" }, "Next"))))));
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Next page" }, nextLabel))),
+            resolvedShowPageInfo && (React.createElement("li", { style: { marginLeft: theme.spacing.small } }, pageInfoElement)))));
 };
 
 /**
  * SortBy Component
  *
- * Displays sort options for search results
- * Integrates with SearchStateManager for automatic state sync
+ * Displays sort options for search results in multiple display variants:
+ * - dropdown (default) — native select element
+ * - button-group — horizontal row of toggle buttons
+ * - radio-group — vertical list of radio inputs
+ *
+ * Integrates with SearchStateManager for automatic state sync.
+ *
+ * CSS Variables (apply on a parent element to customize):
+ * --seekora-sort-bg           — background color
+ * --seekora-sort-color        — text color
+ * --seekora-sort-border       — border color
+ * --seekora-sort-active-bg    — active item background
+ * --seekora-sort-active-color — active item text color
  */
-const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderSelect, className, style, theme: customTheme, placeholder = 'Sort by...', syncWithState = true, }) => {
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Map a size token to theme fontSize and spacing values. */
+function sizeStyles(size, theme) {
+    switch (size) {
+        case 'small':
+            return { fontSize: theme.typography.fontSize.small, padding: theme.spacing.small };
+        case 'large':
+            return { fontSize: theme.typography.fontSize.large, padding: theme.spacing.medium };
+        case 'medium':
+        default:
+            return { fontSize: theme.typography.fontSize.medium, padding: theme.spacing.small };
+    }
+}
+function resolveBorderRadius(br) {
+    return typeof br === 'string' ? br : br.medium;
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+const SortBy = ({ options, value: valueProp, defaultValue, onSortChange, renderSelect, className, style, theme: customTheme, placeholder = 'Sort by...', syncWithState = true, variant = 'dropdown', label, showLabel, size = 'medium', }) => {
     const { theme } = useSearchContext();
     const { sortBy: stateManagerSortBy, setSortBy } = useSearchState();
     const sortByTheme = customTheme || {};
-    // Initialize with defaultValue or first option
+    const instanceId = React.useId();
+    // Determine whether the label should render.
+    const shouldShowLabel = showLabel !== undefined ? showLabel : !!label;
+    // ------ State ----------------------------------------------------------
     const [internalValue, setInternalValue] = React.useState(defaultValue || options[0]?.value || '');
     // Sync with StateManager on mount if defaultValue is set
     React.useEffect(() => {
         if (syncWithState && defaultValue && !stateManagerSortBy) {
             setSortBy(defaultValue, false); // Don't trigger search on initial sync
         }
-    }, []);
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
     // Determine the current value: controlled prop > StateManager > internal
     const value = valueProp !== undefined
         ? valueProp
-        : (syncWithState && stateManagerSortBy)
+        : syncWithState && stateManagerSortBy
             ? stateManagerSortBy
             : internalValue;
+    // ------ Handlers -------------------------------------------------------
     const handleChange = (e) => {
-        const newValue = e.target.value;
+        applyValue(e.target.value);
+    };
+    const applyValue = React.useCallback((newValue) => {
         setInternalValue(newValue);
-        // Update StateManager (automatically triggers search)
         if (syncWithState) {
             setSortBy(newValue);
         }
-        // Call callback for backwards compatibility
         if (onSortChange) {
             onSortChange(newValue);
         }
+    }, [syncWithState, setSortBy, onSortChange]);
+    // ------ Derived styles -------------------------------------------------
+    const { fontSize, padding } = sizeStyles(size, theme);
+    const borderRadius = resolveBorderRadius(theme.borderRadius);
+    const cssVarStyle = {
+        '--seekora-sort-bg': theme.colors.background,
+        '--seekora-sort-color': theme.colors.text,
+        '--seekora-sort-border': theme.colors.border,
+        '--seekora-sort-active-bg': theme.colors.primary,
+        '--seekora-sort-active-color': theme.colors.background,
     };
-    const defaultRenderSelect = () => (React.createElement("select", { value: value, onChange: handleChange, className: clsx(sortByTheme.select, className), style: {
-            padding: theme.spacing.small,
-            paddingRight: theme.spacing.medium,
-            fontSize: theme.typography.fontSize.medium,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-            backgroundColor: theme.colors.background,
-            color: theme.colors.text,
-            cursor: 'pointer',
-            outline: 'none',
-            ...style,
-        }, "aria-label": "Sort results" }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value, className: sortByTheme.option }, option.label)))));
-    if (renderSelect) {
-        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: style }, renderSelect({
-            value,
-            onChange: handleChange,
-            options,
-        })));
+    // ------ Label ----------------------------------------------------------
+    const labelElement = shouldShowLabel && label ? (React.createElement("span", { className: clsx(sortByTheme.label), style: {
+            display: 'block',
+            marginBottom: theme.spacing.small,
+            fontSize,
+            color: 'var(--seekora-sort-color)',
+            fontWeight: 500,
+        } }, label)) : null;
+    // ------ Dropdown variant (original) ------------------------------------
+    if (variant === 'dropdown') {
+        if (renderSelect) {
+            return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+                labelElement,
+                renderSelect({
+                    value,
+                    onChange: handleChange,
+                    options,
+                })));
+        }
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("select", { value: value, onChange: handleChange, className: clsx(sortByTheme.select), style: {
+                    padding,
+                    paddingRight: theme.spacing.medium,
+                    fontSize,
+                    border: '1px solid var(--seekora-sort-border)',
+                    borderRadius,
+                    backgroundColor: 'var(--seekora-sort-bg)',
+                    color: 'var(--seekora-sort-color)',
+                    cursor: 'pointer',
+                    outline: 'none',
+                    width: '100%',
+                }, "aria-label": label || 'Sort results' }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value, className: sortByTheme.option }, option.label))))));
+    }
+    // ------ Button group variant -------------------------------------------
+    if (variant === 'button-group') {
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("div", { role: "group", "aria-label": label || 'Sort results', className: clsx(sortByTheme.buttonGroup), style: {
+                    display: 'inline-flex',
+                    borderRadius,
+                    overflow: 'hidden',
+                    border: '1px solid var(--seekora-sort-border)',
+                } }, options.map((option, index) => {
+                const isActive = option.value === value;
+                return (React.createElement("button", { key: option.value, type: "button", role: "button", "aria-pressed": isActive, onClick: () => applyValue(option.value), className: clsx(sortByTheme.buttonGroupItem, isActive && sortByTheme.buttonGroupItemActive), style: {
+                        padding,
+                        fontSize,
+                        border: 'none',
+                        borderRight: index < options.length - 1
+                            ? '1px solid var(--seekora-sort-border)'
+                            : 'none',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-sort-active-bg)'
+                            : 'var(--seekora-sort-bg)',
+                        color: isActive
+                            ? 'var(--seekora-sort-active-color)'
+                            : 'var(--seekora-sort-color)',
+                        cursor: 'pointer',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'background-color 0.15s ease, color 0.15s ease',
+                        outline: 'none',
+                    } }, option.label));
+            }))));
+    }
+    // ------ Radio group variant --------------------------------------------
+    if (variant === 'radio-group') {
+        const radioName = `seekora-sort-${instanceId}`;
+        return (React.createElement("div", { className: clsx(sortByTheme.container, className), style: { ...cssVarStyle, ...style } },
+            labelElement,
+            React.createElement("div", { role: "radiogroup", "aria-label": label || 'Sort results', className: clsx(sortByTheme.radioGroup), style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: theme.spacing.small,
+                } }, options.map((option) => {
+                const isActive = option.value === value;
+                const radioId = `${radioName}-${option.value}`;
+                return (React.createElement("label", { key: option.value, htmlFor: radioId, className: clsx(sortByTheme.radioItem, isActive && sortByTheme.radioItemActive), style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: theme.spacing.small,
+                        padding,
+                        borderRadius,
+                        cursor: 'pointer',
+                        backgroundColor: isActive
+                            ? 'var(--seekora-sort-active-bg)'
+                            : 'transparent',
+                        color: isActive
+                            ? 'var(--seekora-sort-active-color)'
+                            : 'var(--seekora-sort-color)',
+                        fontWeight: isActive ? 600 : 400,
+                        transition: 'background-color 0.15s ease, color 0.15s ease',
+                    } },
+                    React.createElement("input", { type: "radio", id: radioId, name: radioName, value: option.value, checked: isActive, onChange: () => applyValue(option.value), style: { margin: 0 } }),
+                    React.createElement("span", { className: clsx(sortByTheme.radioLabel), style: { fontSize } }, option.label)));
+            }))));
     }
-    return defaultRenderSelect();
+    // Fallback — should never reach here, but satisfies TS exhaustiveness
+    return null;
 };
 
 /**
  * Facets Component
  *
- * Displays facet filters for search results
+ * Displays facet filters for search results with multiple display variants,
+ * client-side search, count badges, and color swatch support.
  */
-const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, }) => {
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/** Generate a deterministic colour from a string (used as fallback for color-swatch). */
+function stringToColor(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        hash |= 0; // Convert to 32-bit int
+    }
+    const h = Math.abs(hash) % 360;
+    return `hsl(${h}, 65%, 55%)`;
+}
+/** Return swatch pixel size from the size prop. */
+function swatchSize(size) {
+    switch (size) {
+        case 'small':
+            return 24;
+        case 'large':
+            return 40;
+        case 'medium':
+        default:
+            return 32;
+    }
+}
+// ---------------------------------------------------------------------------
+// Chevron SVG icon for collapsible variant
+// ---------------------------------------------------------------------------
+const ChevronIcon$1 = ({ expanded, color = 'currentColor', size = 16, }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
+        transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)',
+        transition: 'transform 200ms ease',
+        flexShrink: 0,
+    }, "aria-hidden": "true" },
+    React.createElement("path", { d: "M4 6L8 10L12 6", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+// ---------------------------------------------------------------------------
+// Checkmark SVG for selected color swatches
+// ---------------------------------------------------------------------------
+const CheckmarkIcon = ({ size = 16 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
+    React.createElement("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })));
+// ---------------------------------------------------------------------------
+// CSS variable defaults
+// ---------------------------------------------------------------------------
+const CSS_VAR_DEFAULTS = {
+    '--seekora-facet-bg': '#ffffff',
+    '--seekora-facet-border': '#dee2e6',
+    '--seekora-facet-active-bg': '#f0f7ff',
+    '--seekora-facet-swatch-size': '32px',
+    '--seekora-facet-count-bg': '#e9ecef',
+    '--seekora-facet-count-color': '#495057',
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, renderFacet, renderFacetItem, maxItems = 10, showMore = true, className, style, theme: customTheme, variant = 'checkbox', searchable = false, showCounts = true, colorMap, defaultCollapsed = false, size = 'medium', }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, refinements, addRefinement, removeRefinement } = useSearchState();
     const facetsTheme = customTheme || {};
+    // expandedFacets is used for "Show more/less" in checkbox/color-swatch variants
+    // AND for collapse/expand in collapsible variant.
     const [expandedFacets, setExpandedFacets] = React.useState({});
+    const [searchTerms, setSearchTerms] = React.useState({});
     // Use results from prop if provided, otherwise from state manager
     const results = resultsProp || stateResults;
+    // -------------------------------------------------------------------
     // Extract facets from results
+    // -------------------------------------------------------------------
     const extractFacets = () => {
         if (facetsProp)
             return facetsProp;
@@ -2471,6 +3113,9 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
         return extracted;
     };
     const facets = extractFacets();
+    // -------------------------------------------------------------------
+    // Handlers
+    // -------------------------------------------------------------------
     const handleFacetToggle = (field, value, selected) => {
         const newSelected = !selected;
         log.verbose('Facets: Facet toggled', { field, value, selected: newSelected });
@@ -2503,49 +3148,283 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
             [field]: !prev[field],
         }));
     };
+    /** For collapsible variant — determine if a facet group is open. */
+    const isFacetGroupOpen = (field) => {
+        if (field in expandedFacets) {
+            return expandedFacets[field];
+        }
+        // Default based on defaultCollapsed prop
+        return !defaultCollapsed;
+    };
+    const toggleCollapsible = (field) => {
+        setExpandedFacets((prev) => ({
+            ...prev,
+            [field]: !(prev[field] ?? !defaultCollapsed),
+        }));
+    };
+    const getSearchTerm = (field) => searchTerms[field] || '';
+    const setSearchTerm = (field, term) => {
+        setSearchTerms((prev) => ({ ...prev, [field]: term }));
+    };
+    /** Filter facet items by search term. */
+    const filterItems = (items, field) => {
+        if (!searchable)
+            return items;
+        const term = getSearchTerm(field).toLowerCase();
+        if (!term)
+            return items;
+        return items.filter((item) => item.value.toLowerCase().includes(term));
+    };
+    // -------------------------------------------------------------------
+    // Size helpers
+    // -------------------------------------------------------------------
+    const sizeScale = React.useMemo(() => {
+        switch (size) {
+            case 'small':
+                return { font: theme.typography.fontSize.small, padding: '0.25rem', gap: '0.25rem' };
+            case 'large':
+                return { font: theme.typography.fontSize.large, padding: '0.75rem', gap: '0.75rem' };
+            case 'medium':
+            default:
+                return { font: theme.typography.fontSize.medium, padding: theme.spacing.small, gap: theme.spacing.small };
+        }
+    }, [size, theme]);
+    // -------------------------------------------------------------------
+    // Count badge renderer
+    // -------------------------------------------------------------------
+    const renderCountBadge = (count) => {
+        if (!showCounts)
+            return null;
+        return (React.createElement("span", { className: clsx(facetsTheme.countBadge), style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minWidth: '1.5em',
+                padding: '0.1em 0.5em',
+                marginLeft: sizeScale.gap,
+                fontSize: theme.typography.fontSize.small,
+                fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                lineHeight: 1,
+                color: 'var(--seekora-facet-count-color, #495057)',
+                backgroundColor: 'var(--seekora-facet-count-bg, #e9ecef)',
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.full,
+                flexShrink: 0,
+            } }, count));
+    };
+    // -------------------------------------------------------------------
+    // Search input renderer
+    // -------------------------------------------------------------------
+    const renderSearchInput = (facet) => {
+        if (!searchable)
+            return null;
+        return (React.createElement("input", { type: "text", value: getSearchTerm(facet.field), onChange: (e) => setSearchTerm(facet.field, e.target.value), placeholder: `Search ${facet.label || facet.field}...`, className: clsx(facetsTheme.searchInput), "aria-label": `Search within ${facet.label || facet.field}`, style: {
+                width: '100%',
+                boxSizing: 'border-box',
+                padding: sizeScale.padding,
+                marginBottom: sizeScale.gap,
+                fontSize: theme.typography.fontSize.small,
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.small,
+                outline: 'none',
+                color: theme.colors.text,
+                backgroundColor: 'var(--seekora-facet-bg, transparent)',
+            } }));
+    };
+    // -------------------------------------------------------------------
+    // Checkbox variant item renderer (original behaviour, preserved)
+    // -------------------------------------------------------------------
     const defaultRenderFacetItem = (item, facet, index) => {
         const isExpanded = expandedFacets[facet.field] || index < maxItems;
         if (!isExpanded && index >= maxItems) {
             return null;
         }
-        return (React.createElement("div", { key: `${facet.field}-${item.value}`, className: clsx(facetsTheme.facetItem, (refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected) && facetsTheme.facetItemActive), onClick: () => handleFacetToggle(facet.field, item.value, item.selected || false), style: {
+        const isChecked = refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false;
+        return (React.createElement("div", { key: `${facet.field}-${item.value}`, className: clsx(facetsTheme.facetItem, isChecked && facetsTheme.facetItemActive), role: "option", "aria-selected": isChecked, "aria-checked": isChecked, tabIndex: -1, onClick: () => handleFacetToggle(facet.field, item.value, item.selected || false), style: {
                 display: 'flex',
                 alignItems: 'center',
-                padding: theme.spacing.small,
+                padding: sizeScale.padding,
+                cursor: 'pointer',
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                marginBottom: sizeScale.gap,
+                backgroundColor: isChecked
+                    ? 'var(--seekora-facet-active-bg, ' + theme.colors.hover + ')'
+                    : 'transparent',
+                transition: 'background-color 0.2s ease',
+            } },
+            React.createElement("input", { type: "checkbox", checked: refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false, onChange: () => handleFacetToggle(facet.field, item.value, item.selected || false), className: facetsTheme.checkbox, style: {
+                    marginRight: sizeScale.gap,
+                    cursor: 'pointer',
+                }, "aria-label": `Filter by ${item.value}` }),
+            React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
+                    flex: 1,
+                    fontSize: sizeScale.font,
+                    color: theme.colors.text,
+                } }, item.value),
+            renderCountBadge(item.count)));
+    };
+    // -------------------------------------------------------------------
+    // Color swatch variant item renderer
+    // -------------------------------------------------------------------
+    const renderColorSwatchItem = (item, facet, index) => {
+        const isExpanded = expandedFacets[facet.field] || index < maxItems;
+        if (!isExpanded && index >= maxItems) {
+            return null;
+        }
+        const isChecked = refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false;
+        const color = colorMap?.[item.value] ?? stringToColor(item.value);
+        const pxSize = swatchSize(size);
+        return (React.createElement("div", { key: `${facet.field}-${item.value}`, className: clsx(facetsTheme.facetItem, isChecked && facetsTheme.facetItemActive), role: "option", "aria-selected": isChecked, "aria-checked": isChecked, tabIndex: -1, onClick: () => handleFacetToggle(facet.field, item.value, item.selected || false), title: `${item.value}${showCounts ? ` (${item.count})` : ''}`, style: {
+                display: 'inline-flex',
+                flexDirection: 'column',
+                alignItems: 'center',
                 cursor: 'pointer',
+                margin: sizeScale.gap,
+            } },
+            React.createElement("div", { className: clsx(facetsTheme.colorSwatch, isChecked && facetsTheme.colorSwatchSelected), style: {
+                    width: `var(--seekora-facet-swatch-size, ${pxSize}px)`,
+                    height: `var(--seekora-facet-swatch-size, ${pxSize}px)`,
+                    borderRadius: '50%',
+                    backgroundColor: color,
+                    border: isChecked
+                        ? `3px solid ${theme.colors.primary}`
+                        : `2px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    transition: 'border 0.2s ease, box-shadow 0.2s ease',
+                    boxShadow: isChecked ? `0 0 0 2px ${theme.colors.primary}33` : 'none',
+                    position: 'relative',
+                } }, isChecked && (React.createElement("span", { className: clsx(facetsTheme.colorSwatchInner), style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                } },
+                React.createElement(CheckmarkIcon, { size: Math.round(pxSize * 0.5) })))),
+            React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
+                    fontSize: theme.typography.fontSize.small,
+                    color: theme.colors.text,
+                    marginTop: '0.25rem',
+                    textAlign: 'center',
+                    maxWidth: `${pxSize + 16}px`,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                } }, item.value),
+            showCounts && (React.createElement("span", { className: clsx(facetsTheme.countBadge), style: {
+                    fontSize: theme.typography.fontSize.small,
+                    color: 'var(--seekora-facet-count-color, ' + (theme.colors.textSecondary || theme.colors.text) + ')',
+                    lineHeight: 1,
+                    marginTop: '0.125rem',
+                } }, item.count))));
+    };
+    // -------------------------------------------------------------------
+    // Item renderer dispatcher
+    // -------------------------------------------------------------------
+    const renderItem = (item, facet, index) => {
+        if (renderFacetItem) {
+            return renderFacetItem(item, facet, index);
+        }
+        switch (variant) {
+            case 'color-swatch':
+                return renderColorSwatchItem(item, facet, index);
+            case 'collapsible':
+            case 'checkbox':
+            default:
+                return defaultRenderFacetItem(item, facet, index);
+        }
+    };
+    // -------------------------------------------------------------------
+    // Keyboard handler (shared across variants)
+    // -------------------------------------------------------------------
+    const handleListKeyDown = (e, visibleItems, facet) => {
+        const currentEl = e.currentTarget.querySelector('[aria-selected="true"]');
+        const allItems = Array.from(e.currentTarget.querySelectorAll('[role="option"]'));
+        const currentIdx = currentEl ? allItems.indexOf(currentEl) : -1;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = Math.min(currentIdx + 1, allItems.length - 1);
+            allItems[next]?.focus();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = Math.max(currentIdx - 1, 0);
+            allItems[prev]?.focus();
+        }
+        else if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            if (currentIdx >= 0 && currentIdx < visibleItems.length) {
+                handleFacetToggle(facet.field, visibleItems[currentIdx].value, visibleItems[currentIdx].selected || false);
+            }
+        }
+    };
+    // -------------------------------------------------------------------
+    // Show more / less buttons (shared)
+    // -------------------------------------------------------------------
+    const renderShowMoreLess = (facet, filteredItems) => {
+        const isExpanded = expandedFacets[facet.field] || false;
+        const hasMore = filteredItems.length > maxItems;
+        return (React.createElement(React.Fragment, null,
+            showMore && hasMore && !isExpanded && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
+                    marginTop: sizeScale.gap,
+                    padding: sizeScale.padding,
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: theme.colors.primary,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize.small,
+                    textDecoration: 'underline',
+                } },
+                "Show more (",
+                filteredItems.length - maxItems,
+                " more)")),
+            isExpanded && hasMore && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
+                    marginTop: sizeScale.gap,
+                    padding: sizeScale.padding,
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: theme.colors.primary,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize.small,
+                    textDecoration: 'underline',
+                } }, "Show less"))));
+    };
+    // -------------------------------------------------------------------
+    // Default facet group renderer — Checkbox variant
+    // -------------------------------------------------------------------
+    const renderCheckboxFacet = (facet, _index) => {
+        const filteredItems = filterItems(facet.items, facet.field);
+        const isExpanded = expandedFacets[facet.field] || false;
+        const visibleItems = isExpanded ? filteredItems : filteredItems.slice(0, maxItems);
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                padding: theme.spacing.medium,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
                 borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                marginBottom: theme.spacing.small,
-                backgroundColor: (refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected) ? theme.colors.hover : 'transparent',
-                transition: 'background-color 0.2s ease',
             } },
-            React.createElement("input", { type: "checkbox", checked: refinements.some(r => r.field === facet.field && r.value === item.value) || item.selected || false, onChange: () => handleFacetToggle(facet.field, item.value, item.selected || false), className: facetsTheme.checkbox, style: {
-                    marginRight: theme.spacing.small,
-                    cursor: 'pointer',
-                }, "aria-label": `Filter by ${item.value}` }),
-            React.createElement("span", { className: facetsTheme.facetItemLabel, style: {
-                    flex: 1,
-                    fontSize: theme.typography.fontSize.medium,
+            React.createElement("h3", { className: facetsTheme.facetTitle, style: {
+                    fontSize: theme.typography.fontSize.large,
+                    fontWeight: 'bold',
+                    margin: 0,
+                    marginBottom: theme.spacing.medium,
                     color: theme.colors.text,
-                } }, item.value),
-            React.createElement("span", { className: facetsTheme.facetItemCount, style: {
-                    fontSize: theme.typography.fontSize.small,
-                    color: theme.colors.textSecondary || theme.colors.text,
-                    opacity: 0.7,
-                    marginLeft: theme.spacing.small,
-                } },
-                "(",
-                item.count,
-                ")")));
+                } }, facet.label || facet.field),
+            renderSearchInput(facet),
+            React.createElement("div", { className: facetsTheme.facetList, role: "listbox", "aria-label": `${facet.label || facet.field} filters`, tabIndex: 0, onKeyDown: (e) => handleListKeyDown(e, visibleItems, facet) }, visibleItems.map((item, itemIndex) => renderItem(item, facet, itemIndex))),
+            renderShowMoreLess(facet, filteredItems)));
     };
-    const defaultRenderFacet = (facet, index) => {
+    // -------------------------------------------------------------------
+    // Color-swatch facet group renderer
+    // -------------------------------------------------------------------
+    const renderColorSwatchFacet = (facet, _index) => {
+        const filteredItems = filterItems(facet.items, facet.field);
         const isExpanded = expandedFacets[facet.field] || false;
-        const visibleItems = isExpanded ? facet.items : facet.items.slice(0, maxItems);
-        const hasMore = facet.items.length > maxItems;
+        const visibleItems = isExpanded ? filteredItems : filteredItems.slice(0, maxItems);
         return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
                 marginBottom: theme.spacing.large,
                 padding: theme.spacing.medium,
-                backgroundColor: theme.colors.background,
-                border: `1px solid ${theme.colors.border}`,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
                 borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
             } },
             React.createElement("h3", { className: facetsTheme.facetTitle, style: {
@@ -2555,36 +3434,106 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
                     marginBottom: theme.spacing.medium,
                     color: theme.colors.text,
                 } }, facet.label || facet.field),
-            React.createElement("div", { className: facetsTheme.facetList }, visibleItems.map((item, itemIndex) => {
-                const actualIndex = isExpanded ? itemIndex : itemIndex;
-                return renderFacetItem
-                    ? renderFacetItem(item, facet, actualIndex)
-                    : defaultRenderFacetItem(item, facet, actualIndex);
-            })),
-            showMore && hasMore && !isExpanded && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
-                    marginTop: theme.spacing.small,
-                    padding: theme.spacing.small,
+            renderSearchInput(facet),
+            React.createElement("div", { className: facetsTheme.facetList, role: "listbox", "aria-label": `${facet.label || facet.field} filters`, tabIndex: 0, onKeyDown: (e) => handleListKeyDown(e, visibleItems, facet), style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: sizeScale.gap,
+                } }, visibleItems.map((item, itemIndex) => renderItem(item, facet, itemIndex))),
+            renderShowMoreLess(facet, filteredItems)));
+    };
+    // -------------------------------------------------------------------
+    // Collapsible facet group renderer
+    // -------------------------------------------------------------------
+    const renderCollapsibleFacet = (facet, _index) => {
+        const isOpen = isFacetGroupOpen(facet.field);
+        const filteredItems = filterItems(facet.items, facet.field);
+        expandedFacets[facet.field] || false;
+        // Note: For collapsible, the expandedFacets state controls the collapse/expand
+        // of the group itself. We use a separate concept for Show more/less within items.
+        // To avoid collision, Show more/less for collapsible uses the same expandedFacets
+        // key prefixed with `_items_`.
+        const isShowMoreExpanded = expandedFacets[`_items_${facet.field}`] || false;
+        const visibleItems = isShowMoreExpanded ? filteredItems : filteredItems.slice(0, maxItems);
+        const hasMore = filteredItems.length > maxItems;
+        return (React.createElement("div", { key: facet.field, className: facetsTheme.facet, style: {
+                marginBottom: theme.spacing.large,
+                backgroundColor: 'var(--seekora-facet-bg, ' + theme.colors.background + ')',
+                border: `1px solid var(--seekora-facet-border, ${theme.colors.border})`,
+                borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
+                overflow: 'hidden',
+            } },
+            React.createElement("button", { type: "button", className: clsx(facetsTheme.collapsibleHeader), onClick: () => toggleCollapsible(facet.field), "aria-expanded": isOpen, "aria-controls": `facet-group-${facet.field}`, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    padding: theme.spacing.medium,
                     border: 'none',
                     backgroundColor: 'transparent',
-                    color: theme.colors.primary,
                     cursor: 'pointer',
-                    fontSize: theme.typography.fontSize.small,
-                    textDecoration: 'underline',
+                    textAlign: 'left',
                 } },
-                "Show more (",
-                facet.items.length - maxItems,
-                " more)")),
-            isExpanded && hasMore && (React.createElement("button", { type: "button", onClick: () => toggleFacetExpansion(facet.field), style: {
-                    marginTop: theme.spacing.small,
-                    padding: theme.spacing.small,
-                    border: 'none',
-                    backgroundColor: 'transparent',
-                    color: theme.colors.primary,
-                    cursor: 'pointer',
-                    fontSize: theme.typography.fontSize.small,
-                    textDecoration: 'underline',
-                } }, "Show less"))));
+                React.createElement("span", { className: facetsTheme.facetTitle, style: {
+                        fontSize: theme.typography.fontSize.large,
+                        fontWeight: 'bold',
+                        color: theme.colors.text,
+                        flex: 1,
+                    } }, facet.label || facet.field),
+                React.createElement("span", { className: clsx(facetsTheme.collapsibleIcon) },
+                    React.createElement(ChevronIcon$1, { expanded: isOpen, color: theme.colors.textSecondary || theme.colors.text }))),
+            isOpen && (React.createElement("div", { id: `facet-group-${facet.field}`, style: {
+                    padding: `0 ${theme.spacing.medium} ${theme.spacing.medium}`,
+                } },
+                renderSearchInput(facet),
+                React.createElement("div", { className: facetsTheme.facetList, role: "listbox", "aria-label": `${facet.label || facet.field} filters`, tabIndex: 0, onKeyDown: (e) => handleListKeyDown(e, visibleItems, facet) }, visibleItems.map((item, itemIndex) => renderItem(item, facet, itemIndex))),
+                showMore && hasMore && !isShowMoreExpanded && (React.createElement("button", { type: "button", onClick: () => setExpandedFacets((prev) => ({
+                        ...prev,
+                        [`_items_${facet.field}`]: true,
+                    })), style: {
+                        marginTop: sizeScale.gap,
+                        padding: sizeScale.padding,
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        cursor: 'pointer',
+                        fontSize: theme.typography.fontSize.small,
+                        textDecoration: 'underline',
+                    } },
+                    "Show more (",
+                    filteredItems.length - maxItems,
+                    " more)")),
+                isShowMoreExpanded && hasMore && (React.createElement("button", { type: "button", onClick: () => setExpandedFacets((prev) => ({
+                        ...prev,
+                        [`_items_${facet.field}`]: false,
+                    })), style: {
+                        marginTop: sizeScale.gap,
+                        padding: sizeScale.padding,
+                        border: 'none',
+                        backgroundColor: 'transparent',
+                        color: theme.colors.primary,
+                        cursor: 'pointer',
+                        fontSize: theme.typography.fontSize.small,
+                        textDecoration: 'underline',
+                    } }, "Show less"))))));
     };
+    // -------------------------------------------------------------------
+    // Default facet renderer dispatcher
+    // -------------------------------------------------------------------
+    const defaultRenderFacet = (facet, index) => {
+        switch (variant) {
+            case 'color-swatch':
+                return renderColorSwatchFacet(facet);
+            case 'collapsible':
+                return renderCollapsibleFacet(facet);
+            case 'checkbox':
+            default:
+                return renderCheckboxFacet(facet);
+        }
+    };
+    // -------------------------------------------------------------------
+    // Empty state
+    // -------------------------------------------------------------------
     if (facets.length === 0) {
         log.verbose('Facets: No facets to display', {
             hasResults: !!results,
@@ -2592,7 +3541,13 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
         });
         return null;
     }
-    return (React.createElement("div", { className: clsx(facetsTheme.container, className), style: style }, facets.map((facet, index) => {
+    // -------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------
+    return (React.createElement("div", { className: clsx(facetsTheme.container, className), style: {
+            ...CSS_VAR_DEFAULTS,
+            ...style,
+        } }, facets.map((facet, index) => {
         return renderFacet
             ? renderFacet(facet, index)
             : defaultRenderFacet(facet);
@@ -2602,72 +3557,222 @@ const Facets = ({ results: resultsProp, facets: facetsProp, onFacetChange, rende
 /**
  * CurrentRefinements Component
  *
- * Displays currently active filters/refinements with ability to clear them
+ * Displays currently active filters/refinements with ability to clear them.
+ * Supports StateManager auto-sync, display variants, layout modes, and animations.
  */
-const CurrentRefinements = ({ refinements = [], onRefinementClear, onClearAll, renderRefinement, showClearAll = true, className, style, theme: customTheme, }) => {
+/** Get variant-specific styles */
+const getVariantStyles = (variant, themeColors, themeSpacing, themeBorderRadius, fieldColor) => {
+    const baseBg = fieldColor || `var(--seekora-refinement-bg, ${themeColors.hover})`;
+    const baseColor = `var(--seekora-refinement-color, ${themeColors.text})`;
+    const baseBorder = `var(--seekora-refinement-border, ${themeColors.border})`;
+    switch (variant) {
+        case 'tags':
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `2px ${themeSpacing.medium}`,
+                backgroundColor: baseBg,
+                border: `1px solid ${baseBorder}`,
+                borderRadius: `var(--seekora-refinement-radius, 4px)`,
+                fontSize: '12px',
+                color: baseColor,
+                fontWeight: 500,
+            };
+        case 'pills':
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `${themeSpacing.small} ${themeSpacing.medium}`,
+                backgroundColor: baseBg,
+                border: 'none',
+                borderRadius: `var(--seekora-refinement-radius, 9999px)`,
+                fontSize: '13px',
+                color: baseColor,
+            };
+        case 'badges':
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `3px ${themeSpacing.small}`,
+                backgroundColor: themeColors.primary,
+                border: 'none',
+                borderRadius: `var(--seekora-refinement-radius, 4px)`,
+                fontSize: '11px',
+                color: '#fff',
+                fontWeight: 600,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+            };
+        case 'text-list':
+            return {
+                display: 'flex',
+                alignItems: 'center',
+                padding: `${themeSpacing.small} 0`,
+                backgroundColor: 'transparent',
+                border: 'none',
+                borderBottom: `1px solid ${baseBorder}`,
+                borderRadius: '0',
+                fontSize: '14px',
+                color: baseColor,
+            };
+        case 'chips':
+        default:
+            return {
+                display: 'inline-flex',
+                alignItems: 'center',
+                padding: `${themeSpacing.small} ${themeSpacing.medium}`,
+                backgroundColor: baseBg,
+                border: `1px solid ${baseBorder}`,
+                borderRadius: `var(--seekora-refinement-radius, ${typeof themeBorderRadius === 'string' ? themeBorderRadius : themeBorderRadius.medium})`,
+                fontSize: '13px',
+                color: baseColor,
+            };
+    }
+};
+/** Get variant-specific class name from theme */
+const getVariantClass = (variant, refinementsTheme) => {
+    switch (variant) {
+        case 'tags': return refinementsTheme.tag;
+        case 'pills': return refinementsTheme.pill;
+        case 'badges': return refinementsTheme.badge;
+        case 'chips': return refinementsTheme.chip;
+        default: return refinementsTheme.item;
+    }
+};
+const CurrentRefinements = ({ refinements: refinementsProp, onRefinementClear, onClearAll, renderRefinement, showClearAll = true, variant = 'chips', layout = 'horizontal', fieldColors, renderCloseIcon, className, style, theme: customTheme, }) => {
     const { theme } = useSearchContext();
+    const { refinements: stateRefinements, removeRefinement, clearRefinements } = useSearchState();
     const refinementsTheme = customTheme || {};
+    // Use props if provided, otherwise auto-read from StateManager
+    const refinements = refinementsProp !== undefined
+        ? refinementsProp
+        : stateRefinements.map(r => ({ field: r.field, value: r.value }));
+    // Track items for entry/exit animations
+    const [visibleItems, setVisibleItems] = React.useState(new Set());
+    const [exitingItems, setExitingItems] = React.useState(new Set());
+    const prevRefinementsRef = React.useRef([]);
+    React.useEffect(() => {
+        const currentKeys = new Set(refinements.map(r => `${r.field}:${r.value}`));
+        const prevKeys = new Set(prevRefinementsRef.current.map(r => `${r.field}:${r.value}`));
+        // Detect removed items for exit animation
+        const removed = new Set();
+        prevKeys.forEach(key => {
+            if (!currentKeys.has(key))
+                removed.add(key);
+        });
+        if (removed.size > 0) {
+            setExitingItems(removed);
+            // Remove after animation completes
+            setTimeout(() => setExitingItems(new Set()), 200);
+        }
+        // Mark new items for entry animation
+        setVisibleItems(currentKeys);
+        prevRefinementsRef.current = [...refinements];
+    }, [refinements]);
     const handleClear = (field, value) => {
+        // If synced with StateManager and no prop provided, auto-clear via StateManager
+        if (refinementsProp === undefined) {
+            removeRefinement(field, value);
+        }
         if (onRefinementClear) {
             onRefinementClear(field, value);
         }
     };
     const handleClearAll = () => {
+        // If synced with StateManager, auto-clear all via StateManager
+        if (refinementsProp === undefined) {
+            clearRefinements();
+        }
         if (onClearAll) {
             onClearAll();
         }
     };
-    const defaultRenderRefinement = (refinement, index) => (React.createElement("div", { key: `${refinement.field}-${refinement.value}-${index}`, className: refinementsTheme.item, style: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            padding: `${theme.spacing.small} ${theme.spacing.medium}`,
-            margin: `0 ${theme.spacing.small} ${theme.spacing.small} 0`,
-            backgroundColor: theme.colors.hover,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-            fontSize: theme.typography.fontSize.small,
-        } },
-        React.createElement("span", { className: refinementsTheme.label, style: {
-                marginRight: theme.spacing.small,
-                color: theme.colors.text,
-                fontWeight: '500',
+    const defaultCloseIcon = () => (React.createElement("span", { "aria-hidden": "true", style: { lineHeight: 1 } }, "\u00D7"));
+    const defaultRenderRefinement = (refinement, index) => {
+        const key = `${refinement.field}:${refinement.value}`;
+        const fieldColor = fieldColors?.[refinement.field];
+        const isEntering = visibleItems.has(key) && !prevRefinementsRef.current.some(r => `${r.field}:${r.value}` === key);
+        const variantStyles = getVariantStyles(variant, theme.colors, theme.spacing, theme.borderRadius, fieldColor);
+        const variantClass = getVariantClass(variant, refinementsTheme);
+        return (React.createElement("div", { key: `${key}-${index}`, className: clsx(refinementsTheme.item, variantClass), role: "listitem", style: {
+                ...variantStyles,
+                margin: layout === 'vertical'
+                    ? `0 0 ${theme.spacing.small} 0`
+                    : `0 ${theme.spacing.small} ${theme.spacing.small} 0`,
+                transition: 'all 200ms ease-in-out',
+                opacity: exitingItems.has(key) ? 0 : 1,
+                transform: exitingItems.has(key) ? 'scale(0.8)' : 'scale(1)',
+                animation: isEntering ? 'seekoraChipIn 200ms ease-out' : undefined,
             } },
-            refinement.label || refinement.field,
-            ":"),
-        React.createElement("span", { className: refinementsTheme.value, style: {
-                marginRight: theme.spacing.small,
-                color: theme.colors.text,
-            } }, refinement.displayValue || refinement.value),
-        React.createElement("button", { type: "button", onClick: () => handleClear(refinement.field, refinement.value), className: refinementsTheme.clearButton, style: {
-                border: 'none',
-                backgroundColor: 'transparent',
-                color: theme.colors.text,
-                cursor: 'pointer',
-                fontSize: theme.typography.fontSize.medium,
-                padding: 0,
-                marginLeft: theme.spacing.small,
-                width: '20px',
-                height: '20px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: '50%',
-                transition: theme.transitions?.fast || '150ms ease-in-out',
-            }, "aria-label": `Clear ${refinement.label || refinement.field}: ${refinement.value}` }, "\u00D7")));
+            variant !== 'badges' && (React.createElement("span", { className: refinementsTheme.label, style: {
+                    marginRight: theme.spacing.small,
+                    fontWeight: '500',
+                    opacity: 0.7,
+                } },
+                refinement.label || refinement.field,
+                ":")),
+            React.createElement("span", { className: refinementsTheme.value }, refinement.displayValue || refinement.value),
+            React.createElement("button", { type: "button", onClick: () => handleClear(refinement.field, refinement.value), className: refinementsTheme.clearButton, style: {
+                    border: 'none',
+                    backgroundColor: 'transparent',
+                    color: 'inherit',
+                    cursor: 'pointer',
+                    fontSize: '14px',
+                    padding: '0 0 0 6px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderRadius: '50%',
+                    transition: 'opacity 150ms ease-in-out',
+                    opacity: 0.6,
+                }, "aria-label": `Clear ${refinement.label || refinement.field}: ${refinement.value}`, onMouseEnter: e => (e.currentTarget.style.opacity = '1'), onMouseLeave: e => (e.currentTarget.style.opacity = '0.6') }, renderCloseIcon ? renderCloseIcon() : defaultCloseIcon())));
+    };
     if (refinements.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: clsx(refinementsTheme.container, className), style: style },
-        React.createElement("div", { className: refinementsTheme.list, style: {
-                display: 'flex',
-                flexWrap: 'wrap',
-                alignItems: 'center',
-                marginBottom: showClearAll ? theme.spacing.medium : 0,
-            } }, refinements.map((refinement, index) => {
+    // Group refinements by field for grouped layout
+    const groupedRefinements = layout === 'grouped'
+        ? refinements.reduce((acc, r) => {
+            if (!acc[r.field])
+                acc[r.field] = [];
+            acc[r.field].push(r);
+            return acc;
+        }, {})
+        : null;
+    const containerStyles = {
+        ...style,
+    };
+    const listStyles = {
+        display: 'flex',
+        flexWrap: layout === 'vertical' ? 'nowrap' : 'wrap',
+        flexDirection: layout === 'vertical' ? 'column' : 'row',
+        alignItems: layout === 'vertical' ? 'flex-start' : 'center',
+        marginBottom: showClearAll ? theme.spacing.medium : 0,
+    };
+    return (React.createElement("div", { className: clsx(refinementsTheme.container, className), style: containerStyles },
+        React.createElement("style", null, `
+        @keyframes seekoraChipIn {
+          from { opacity: 0; transform: scale(0.8); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      `),
+        layout === 'grouped' && groupedRefinements ? (Object.entries(groupedRefinements).map(([field, items]) => (React.createElement("div", { key: field, className: refinementsTheme.group, style: { marginBottom: theme.spacing.medium } },
+            React.createElement("div", { className: refinementsTheme.groupLabel, style: {
+                    fontSize: theme.typography.fontSize.small,
+                    fontWeight: 600,
+                    color: theme.colors.text,
+                    marginBottom: theme.spacing.small,
+                    textTransform: 'capitalize',
+                } }, items[0]?.label || field),
+            React.createElement("div", { role: "list", style: listStyles }, items.map((refinement, index) => {
+                return renderRefinement
+                    ? renderRefinement(refinement, index)
+                    : defaultRenderRefinement(refinement, index);
+            })))))) : (React.createElement("div", { role: "list", className: refinementsTheme.list, style: listStyles }, refinements.map((refinement, index) => {
             return renderRefinement
                 ? renderRefinement(refinement, index)
                 : defaultRenderRefinement(refinement, index);
-        })),
+        }))),
         showClearAll && refinements.length > 1 && (React.createElement("button", { type: "button", onClick: handleClearAll, className: refinementsTheme.clearAllButton, style: {
                 padding: `${theme.spacing.small} ${theme.spacing.medium}`,
                 border: `1px solid ${theme.colors.border}`,
@@ -2677,6 +3782,7 @@ const CurrentRefinements = ({ refinements = [], onRefinementClear, onClearAll, r
                 cursor: 'pointer',
                 fontSize: theme.typography.fontSize.small,
                 textDecoration: 'underline',
+                transition: 'background-color 150ms ease-in-out',
             } }, "Clear all filters"))));
 };
 
@@ -3525,6 +4631,110 @@ const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, showMore
     const toggleShowMore = (level) => {
         setExpanded(prev => ({ ...prev, [level]: !prev[level] }));
     };
+    const containerRef = React.useRef(null);
+    // Collect all visible treeitem elements within the container
+    const getVisibleTreeItems = React.useCallback(() => {
+        if (!containerRef.current)
+            return [];
+        return Array.from(containerRef.current.querySelectorAll('[role="treeitem"]'));
+    }, []);
+    // Keyboard navigation handler for the tree
+    const handleKeyDown = React.useCallback((e) => {
+        const items = getVisibleTreeItems();
+        if (items.length === 0)
+            return;
+        const activeElement = document.activeElement;
+        // Find the treeitem that is or contains the active element
+        const currentItem = items.find(item => item === activeElement || item.contains(activeElement));
+        const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                const button = items[nextIndex].querySelector('button');
+                if (button)
+                    button.focus();
+                else
+                    items[nextIndex].focus();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                const button = items[prevIndex].querySelector('button');
+                if (button)
+                    button.focus();
+                else
+                    items[prevIndex].focus();
+                break;
+            }
+            case 'ArrowRight': {
+                if (!currentItem)
+                    break;
+                const isExpanded = currentItem.getAttribute('aria-expanded');
+                if (isExpanded === 'false') {
+                    // Expand (select) this item
+                    e.preventDefault();
+                    const button = currentItem.querySelector('button');
+                    if (button)
+                        button.click();
+                }
+                else if (isExpanded === 'true') {
+                    // Move to first child
+                    e.preventDefault();
+                    const childList = currentItem.querySelector('[role="group"]');
+                    if (childList) {
+                        const firstChild = childList.querySelector('[role="treeitem"]');
+                        if (firstChild) {
+                            const button = firstChild.querySelector('button');
+                            if (button)
+                                button.focus();
+                            else
+                                firstChild.focus();
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                if (!currentItem)
+                    break;
+                const isExpanded = currentItem.getAttribute('aria-expanded');
+                if (isExpanded === 'true') {
+                    // Collapse this item
+                    e.preventDefault();
+                    const button = currentItem.querySelector('button');
+                    if (button)
+                        button.click();
+                }
+                else {
+                    // Move focus to parent treeitem
+                    e.preventDefault();
+                    const parentGroup = currentItem.closest('[role="group"]');
+                    if (parentGroup) {
+                        const parentItem = parentGroup.closest('[role="treeitem"]');
+                        if (parentItem) {
+                            const button = parentItem.querySelector(':scope > button');
+                            if (button)
+                                button.focus();
+                            else
+                                parentItem.focus();
+                        }
+                    }
+                }
+                break;
+            }
+            case 'Enter': {
+                if (!currentItem)
+                    break;
+                e.preventDefault();
+                const button = currentItem.querySelector('button');
+                if (button)
+                    button.click();
+                break;
+            }
+        }
+    }, [getVisibleTreeItems]);
     // Render a level of the hierarchy
     const renderLevel = (items, level) => {
         if (!items || items.length === 0)
@@ -3533,12 +4743,14 @@ const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, showMore
         const displayLimit = isExpanded ? showMoreLimit : limit;
         const displayItems = items.slice(0, displayLimit);
         const hasMore = items.length > displayLimit;
-        return (React.createElement("ul", { className: hierarchicalTheme.list, style: {
+        return (React.createElement("ul", { role: level === 0 ? 'tree' : 'group', className: hierarchicalTheme.list, style: {
                 listStyle: 'none',
                 margin: 0,
                 padding: level > 0 ? `0 0 0 ${theme.spacing.medium}` : 0,
             } },
-            displayItems.map((item, index) => (React.createElement("li", { key: item.value, className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
+            displayItems.map((item, index) => (React.createElement("li", { key: item.value, role: "treeitem", ...(item.data && item.data.length > 0
+                    ? { 'aria-expanded': !!item.isRefined }
+                    : {}), className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
                     padding: `${theme.spacing.small} 0`,
                 } }, renderItem ? (renderItem(item, level)) : (React.createElement(React.Fragment, null,
                 React.createElement("button", { type: "button", onClick: () => handleItemClick(item, level), className: hierarchicalTheme.link, style: {
@@ -3576,7 +4788,7 @@ const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, showMore
     if (processedItems.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: clsx(hierarchicalTheme.root, className), style: style }, renderLevel(processedItems, 0)));
+    return (React.createElement("div", { ref: containerRef, className: clsx(hierarchicalTheme.root, className), style: style, tabIndex: 0, onKeyDown: handleKeyDown }, renderLevel(processedItems, 0)));
 };
 
 /**
@@ -3676,6 +4888,53 @@ const RangeSlider = ({ field, label, min, max, step = 1, currentMin: currentMinP
     const handleDragEnd = () => {
         setIsDragging(false);
     };
+    // Handle keyboard navigation for enhanced control (Shift+Arrow for 10x step, Home/End)
+    const handleMinKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = min;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = internalMax - step;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(min, internalMin - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(internalMax - step, internalMin + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMin(newValue);
+            debouncedUpdate(newValue, internalMax);
+        }
+    };
+    const handleMaxKeyDown = (e) => {
+        let newValue = null;
+        if (e.key === 'Home') {
+            e.preventDefault();
+            newValue = internalMin + step;
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            newValue = max;
+        }
+        else if (e.shiftKey && (e.key === 'ArrowLeft' || e.key === 'ArrowDown')) {
+            e.preventDefault();
+            newValue = Math.max(internalMin + step, internalMax - step * 10);
+        }
+        else if (e.shiftKey && (e.key === 'ArrowRight' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            newValue = Math.min(max, internalMax + step * 10);
+        }
+        if (newValue !== null) {
+            setInternalMax(newValue);
+            debouncedUpdate(internalMin, newValue);
+        }
+    };
     // Calculate filled track position
     const minPercent = ((internalMin - min) / (max - min)) * 100;
     const maxPercent = ((internalMax - min) / (max - min)) * 100;
@@ -3711,7 +4970,7 @@ const RangeSlider = ({ field, label, min, max, step = 1, currentMin: currentMinP
                     backgroundColor: theme.colors.primary,
                     borderRadius: '2px',
                 } }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMin, onChange: handleMinChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMinKeyDown, tabIndex: 0, "aria-valuenow": internalMin, "aria-valuemin": min, "aria-valuemax": max, className: rangeSliderTheme.thumb, style: {
                     position: 'absolute',
                     width: '100%',
                     height: '4px',
@@ -3721,7 +4980,7 @@ const RangeSlider = ({ field, label, min, max, step = 1, currentMin: currentMinP
                     cursor: 'pointer',
                     pointerEvents: 'none',
                 }, "aria-label": `Minimum ${label || field}` }),
-            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, className: rangeSliderTheme.thumb, style: {
+            React.createElement("input", { type: "range", min: min, max: max, step: step, value: internalMax, onChange: handleMaxChange, onMouseUp: handleDragEnd, onTouchEnd: handleDragEnd, onKeyDown: handleMaxKeyDown, tabIndex: 0, "aria-valuenow": internalMax, "aria-valuemin": min, "aria-valuemax": max, className: rangeSliderTheme.thumb, style: {
                     position: 'absolute',
                     width: '100%',
                     height: '4px',
@@ -4699,12 +5958,29 @@ function useQuerySuggestionsEnhanced(options) {
             const error = err instanceof Error ? err : new Error(String(err));
             if (error.name === 'AbortError')
                 return;
-            log.error('Failed to fetch query suggestions', { query: searchQuery, error: error.message });
-            setError(error);
-            setSuggestions([]);
-            setDropdownRecommendations(null);
-            if (onError) {
-                onError(error);
+            // Check if it's a 404 error (suggestions not enabled for this store).
+            // The search SDK wraps axios errors into plain Error objects with the status
+            // embedded in the message, e.g. "[getSuggestions] ... (404)".
+            const errMsg = error.message || '';
+            const is404 = err?.response?.status === 404 ||
+                err?.status === 404 ||
+                /\(404\)/.test(errMsg);
+            if (is404) {
+                // Silently handle 404 - suggestions feature not enabled
+                log.verbose('Query suggestions not enabled for this store (404)');
+                setSuggestions([]);
+                setDropdownRecommendations(null);
+                setError(null);
+            }
+            else {
+                // For other errors, log and set error state
+                log.error('Failed to fetch query suggestions', { query: searchQuery, error: error.message });
+                setError(error);
+                setSuggestions([]);
+                setDropdownRecommendations(null);
+                if (onError) {
+                    onError(error);
+                }
             }
         }
         finally {
@@ -6271,7 +7547,14 @@ const EVENTS = {
     TRENDING_CLICK: 'suggestions.trending_click',
     SEARCH_SUBMIT: 'suggestions.search_submit',
     DROPDOWN_OPEN: 'suggestions.dropdown_open',
-    DROPDOWN_CLOSE: 'suggestions.dropdown_close'};
+    DROPDOWN_CLOSE: 'suggestions.dropdown_close',
+    // Variant & product interaction events
+    VARIANT_SELECT: 'product.variant_select',
+    VARIANT_HOVER: 'product.variant_hover',
+    ADD_TO_CART: 'product.add_to_cart',
+    PRODUCT_IMPRESSION: 'product.impression',
+    SWATCH_CLICK: 'product.swatch_click',
+};
 // ============================================================================
 // Hook Implementation
 // ============================================================================
@@ -6295,11 +7578,16 @@ function useSuggestionsAnalytics(options) {
             return;
         const searchContext = context ?? contextOption;
         try {
+            // Extract query for search-related events (backend requires query at top level for search events)
+            const { query, ...restMetadata } = metadata;
+            const isSearchEvent = eventName.includes('search') || eventName === EVENTS.SEARCH_SUBMIT;
             await client.trackEvent?.({
                 event_name: eventName,
                 analytics_tags: analyticsTags,
+                // Include query at top level for search events
+                ...(isSearchEvent && query ? { query } : {}),
                 metadata: {
-                    ...metadata,
+                    ...restMetadata,
                     timestamp: Date.now(),
                     source: 'suggestions_dropdown',
                 },
@@ -7122,7 +8410,7 @@ function DropdownPanel({ children, position = 'absolute', top = '100%', left = 0
 
 /**
  * Parses suggestion text containing <mark>...</mark> and returns React nodes
- * with the marked segments rendered as <mark> elements. Safe: inner content
+ * with the marked segments rendered as styled elements. Safe: inner content
  * is rendered as text, not HTML.
  */
 const defaultMarkStyle = {
@@ -7131,9 +8419,34 @@ const defaultMarkStyle = {
     borderRadius: '2px',
     padding: '0 2px',
 };
+/** Compute styles based on highlight options */
+function computeHighlightStyles(options) {
+    const style = options.highlightStyle || 'background';
+    const base = {};
+    switch (style) {
+        case 'background':
+            base.backgroundColor = options.highlightColor || 'var(--seekora-highlight-bg, rgba(251, 191, 36, 0.4))';
+            base.borderRadius = '2px';
+            base.padding = '0 2px';
+            break;
+        case 'underline':
+            base.textDecoration = 'underline';
+            base.textDecorationColor = options.highlightColor || 'var(--seekora-highlight-bg, rgba(251, 191, 36, 0.8))';
+            base.textUnderlineOffset = '2px';
+            break;
+    }
+    if (options.highlightTextColor) {
+        base.color = options.highlightTextColor;
+    }
+    else {
+        base.color = 'var(--seekora-highlight-color, inherit)';
+    }
+    base.fontWeight = options.highlightFontWeight || 'var(--seekora-highlight-weight, 500)';
+    return base;
+}
 /**
  * Converts a string like "lined <mark>blue</mark>" into React nodes with
- * the marked part rendered as a <mark> element. When no <mark> tags are
+ * the marked part rendered as a styled element. When no <mark> tags are
  * present, returns the string as-is.
  */
 function parseHighlightMarkup(text, options = {}) {
@@ -7142,11 +8455,18 @@ function parseHighlightMarkup(text, options = {}) {
     const parts = text.split(/(<mark>[\s\S]*?<\/mark>)/g);
     if (parts.length <= 1)
         return text;
-    const { markClassName, markStyle } = options;
+    const { markClassName, markStyle, highlightTag } = options;
+    const Tag = (highlightTag || 'mark');
+    // Compute styles: if no custom options provided, use legacy defaults
+    const hasCustomOptions = options.highlightColor || options.highlightTextColor
+        || options.highlightFontWeight || options.highlightStyle;
+    const computedStyle = hasCustomOptions
+        ? computeHighlightStyles(options)
+        : defaultMarkStyle;
     return (React.createElement(React.Fragment, null, parts.map((part, i) => {
         const m = part.match(/^<mark>([\s\S]*)<\/mark>$/);
         if (m) {
-            return (React.createElement("mark", { key: i, className: markClassName, style: { ...defaultMarkStyle, ...markStyle } }, m[1]));
+            return (React.createElement(Tag, { key: i, className: markClassName, style: { ...computedStyle, ...markStyle } }, m[1]));
         }
         return part;
     })));
@@ -8021,6 +9341,41 @@ const highlightText = (text, query, options = {}) => {
     const classAttr = className ? ` class="${className}"` : '';
     return escapeHtml(text).replace(new RegExp(`(${escapeHtml(escapedQuery)})`, 'gi'), `<${tag}${classAttr}${styleAttr}>$1</${tag}>`);
 };
+/**
+ * Safe React-based highlight rendering (no dangerouslySetInnerHTML).
+ * Returns React nodes with matched text wrapped in the specified tag element.
+ */
+const highlightTextReact = (text, query, options = {}) => {
+    if (!query || !text)
+        return text;
+    const { tag = 'mark', className, style } = options;
+    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const regex = new RegExp(`(${escapedQuery})`, 'gi');
+    const parts = text.split(regex);
+    if (parts.length <= 1)
+        return text;
+    const defaultHighlightStyle = {
+        backgroundColor: 'var(--seekora-highlight-bg, rgba(251, 191, 36, 0.4))',
+        fontWeight: 500,
+        borderRadius: '2px',
+        padding: '0 2px',
+        ...style,
+    };
+    return parts.map((part, i) => {
+        if (regex.test(part)) {
+            // Reset lastIndex after test
+            regex.lastIndex = 0;
+            return React.createElement(tag, {
+                key: i,
+                className,
+                style: defaultHighlightStyle,
+            }, part);
+        }
+        // Reset lastIndex after test
+        regex.lastIndex = 0;
+        return part;
+    });
+};
 // ============================================================================
 // Variant Utilities
 // ============================================================================
@@ -10565,9 +11920,7 @@ const AmazonDropdown = React.forwardRef(function AmazonDropdown(props, ref) {
                                 React.createElement("div", { style: styles.suggestionIcon },
                                     React.createElement(SearchIcon$5, null)),
                                 React.createElement("div", { style: styles.suggestionContent },
-                                    React.createElement("div", { style: styles.suggestionQuery, dangerouslySetInnerHTML: {
-                                            __html: highlightText(suggestion.query, query, { className: 'highlight' })
-                                        } }),
+                                    React.createElement("div", { style: styles.suggestionQuery }, highlightTextReact(suggestion.query, query, { className: 'highlight' })),
                                     showDepartments && firstCategory && (React.createElement("div", { style: styles.suggestionContext },
                                         React.createElement("span", { style: styles.suggestionDepartment },
                                             "in ",
@@ -10912,11 +12265,7 @@ const GoogleDropdown = React.forwardRef(function GoogleDropdown(props, ref) {
                 item.type === 'trending' ? React.createElement(TrendingIcon$2, null) :
                     React.createElement(SearchIcon$4, null)),
             React.createElement("div", { style: styles.itemContent },
-                React.createElement("span", { style: styles.itemText, dangerouslySetInnerHTML: {
-                        __html: query
-                            ? highlightText(item.query, query, { tag: 'b' })
-                            : item.query
-                    } }),
+                React.createElement("span", { style: styles.itemText }, query ? highlightTextReact(item.query, query, { tag: 'b' }) : item.query),
                 React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
                     item.type === 'trending' && showTrendingIndicator && (React.createElement("span", { style: styles.trending },
                         React.createElement(TrendingIcon$2, null),
@@ -11371,11 +12720,7 @@ const PinterestDropdown = React.forwardRef(function PinterestDropdown(props, ref
                     setHoveredSuggestion(idx);
                     setActiveIndex(idx);
                 }, onMouseLeave: () => setHoveredSuggestion(-1) },
-                React.createElement("span", { style: styles.suggestionIcon, dangerouslySetInnerHTML: {
-                        __html: query
-                            ? highlightText(s.query, query, { tag: 'strong' })
-                            : s.query
-                    } })))))),
+                React.createElement("span", { style: styles.suggestionIcon }, query ? highlightTextReact(s.query, query, { tag: 'strong' }) : s.query)))))),
             displayProducts.length > 0 && (React.createElement(React.Fragment, null,
                 React.createElement("div", { style: styles.sectionTitle },
                     React.createElement(TrendingIcon$1, null),
@@ -11905,9 +13250,7 @@ const SpotlightDropdown = React.forwardRef(function SpotlightDropdown(props, ref
                             }, onMouseEnter: () => setActiveIndex(idx) },
                             React.createElement("div", { style: mergeStyles(styles.itemIcon, isActive ? styles.itemIconActive : undefined) }, item.icon),
                             React.createElement("div", { style: styles.itemContent },
-                                React.createElement("div", { style: mergeStyles(styles.itemTitle, isActive ? styles.itemTitleActive : undefined), dangerouslySetInnerHTML: {
-                                        __html: highlightText(item.title, query, { tag: 'strong' })
-                                    } }))));
+                                React.createElement("div", { style: mergeStyles(styles.itemTitle, isActive ? styles.itemTitleActive : undefined) }, highlightTextReact(item.title, query, { tag: 'strong' })))));
                     }))),
                 processedProducts.length > 0 && (React.createElement("div", { style: styles.section },
                     React.createElement("div", { style: styles.sectionTitle }, "Products"),
@@ -12347,9 +13690,7 @@ const ShopifyDropdown = React.forwardRef(function ShopifyDropdown(props, ref) {
                             React.createElement("div", { style: styles.suggestionIcon },
                                 React.createElement(SearchIcon$1, null)),
                             React.createElement("div", { style: styles.suggestionContent },
-                                React.createElement("div", { style: styles.suggestionQuery, dangerouslySetInnerHTML: {
-                                        __html: highlightText(suggestion.query, query, { tag: 'mark' })
-                                    } }),
+                                React.createElement("div", { style: styles.suggestionQuery }, highlightTextReact(suggestion.query, query, { tag: 'mark' })),
                                 suggestion.count && (React.createElement("div", { style: styles.suggestionMeta },
                                     suggestion.count,
                                     " results"))),
@@ -12852,9 +14193,7 @@ const MobileSheetDropdown = React.forwardRef(function MobileSheetDropdown(props,
                             React.createElement("div", { style: styles.itemIcon },
                                 React.createElement(SearchIcon, null)),
                             React.createElement("div", { style: styles.itemContent },
-                                React.createElement("div", { style: styles.itemTitle, dangerouslySetInnerHTML: {
-                                        __html: highlightText(s.query, inputValue, { tag: 'strong' })
-                                    } }),
+                                React.createElement("div", { style: styles.itemTitle }, highlightTextReact(s.query, inputValue, { tag: 'strong' })),
                                 s.count && (React.createElement("div", { style: styles.itemSubtitle },
                                     s.count,
                                     " results"))),
@@ -13155,9 +14494,7 @@ const MinimalDropdown = React.forwardRef(function MinimalDropdown(props, ref) {
                     return (React.createElement("div", { key: s.id || `suggestion-${idx}`, "data-index": itemIdx, style: mergeStyles(styles.item, isActive ? styles.itemActive : undefined, isLast ? styles.itemLast : undefined), onClick: () => onSuggestionSelect?.(s._raw, idx), onMouseEnter: () => setActiveIndex(itemIdx) },
                         showIndices && (React.createElement("span", { style: styles.itemIndex }, itemIdx + 1)),
                         React.createElement("div", { style: styles.itemContent },
-                            React.createElement("div", { style: styles.itemQuery, dangerouslySetInnerHTML: {
-                                    __html: highlightText(s.query, query, { tag: 'mark' })
-                                } }),
+                            React.createElement("div", { style: styles.itemQuery }, highlightTextReact(s.query, query, { tag: 'mark' })),
                             s.count && (React.createElement("div", { style: styles.itemMeta },
                                 s.count.toLocaleString(),
                                 " results"))),