@caratlogic/design-system 0.1.37 → 0.1.38

package/dist/index.esm.js

@@ -15707,7 +15707,7 @@ function getOptionRowClassName(selected = false, className) {
 }
 /** A selectable pill (chip options, range presets); one height and shape everywhere. */
 function getPillClassName(selected) {
-    return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-full px-3');
+    return getSelectableOptionClassName(selected, 'inline-flex h-8 items-center gap-1.5 rounded-sm px-3');
 }
 /** Search box above a list (pick lists, saved searches); matches the inputs' height and corners. */
 const FILTER_SEARCH_BOX_CLASS_NAME = 'flex h-9 items-center gap-2 rounded-md border border-input bg-card px-3 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30';
@@ -15888,14 +15888,15 @@ const LIST_COLUMN_MIN_WIDTH = '10rem';
 const getOptionsScrollClassName = (fill) => fill ? OPTIONS_FILL_CLASS_NAME : OPTIONS_SCROLL_CLASS_NAME;
 const LIST_ROW_CLASS_NAME = getOptionRowClassName();
 const COUNT_BADGE_TONES = {
-    neutral: 'bg-muted text-muted-foreground',
-    tinted: 'bg-primary/10 text-primary',
-    solid: 'bg-primary-foreground/20 text-primary-foreground',
+    neutral: 'border-primary/30 bg-primary/5 text-primary',
+    tinted: 'border-primary/30 bg-primary/5 text-primary',
+    solid: 'border-primary-foreground/60 bg-primary-foreground/20 text-primary-foreground',
 };
 /** How many items carry the option, as a small round badge at the right. */
-const getCountBadgeClassName = (tone) => cn('inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums', COUNT_BADGE_TONES[tone]);
+const getCountBadgeClassName = (tone) => cn('inline-flex h-5 min-w-7 shrink-0 items-center justify-center rounded-full border px-1.5 text-xs font-medium tabular-nums', COUNT_BADGE_TONES[tone]);
 const COUNT_BADGE_CLASS_NAME = getCountBadgeClassName('neutral');
-const formatOptionCount = (count) => count.toLocaleString('en-US');
+/** Plain digits (no thousands separators), so the badge stays compact. */
+const formatOptionCount = (count) => String(count);
 /** Picking a value: a single-choice list replaces (or clears) it, a multi-choice list toggles it. */
 const pickValue = (values, value, single) => {
     if (!single)
@@ -15951,7 +15952,7 @@ function PickListFilter({ options, value, onChange, ariaLabel, layout = 'list',
     if (layout === 'tiles') {
         return (jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('grid content-start gap-1.5', scrollClassName), style: getGridColumnsStyle(columns), children: visibleOptions.map((option) => (jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getTileClassName(value.includes(option.value), option.count !== undefined), children: [jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));
     }
-    return (jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsx(OptionSwatch, { color: option.swatch, round: true }), jsx("span", { children: option.label }), option.count !== undefined && (jsx("span", { className: "text-xs font-normal tabular-nums text-muted-foreground", children: formatOptionCount(option.count) }))] }, option.value))) }));
+    return (jsx(ScrollFade, { role: "group", "aria-label": ariaLabel, wrapperClassName: wrapperClassName, className: cn('flex flex-wrap content-start gap-1.5', scrollClassName), children: visibleOptions.map((option) => (jsxs("button", { type: "button", "aria-pressed": value.includes(option.value), onClick: () => toggle(option), className: getChipClassName(value.includes(option.value)), children: [jsx(OptionSwatch, { color: option.swatch, round: true }), jsx("span", { children: option.label }), option.count !== undefined && (jsx("span", { className: getCountBadgeClassName(value.includes(option.value) ? 'tinted' : 'neutral'), children: formatOptionCount(option.count) }))] }, option.value))) }));
 }
 
 const TRIGGER_BASE = 'h-9 !w-fit shadow-[0_1px_2px_0_rgba(0,0,0,0.05)] gap-2 text-foreground bg-card hover:bg-muted/40 border border-border rounded-lg text-sm font-medium px-3';
@@ -38566,6 +38567,70 @@ function fieldTypeIcon(type) {
     return FIELD_TYPE_ICONS[type] ?? Type;
 }
 
+const SAVED_SEARCH_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-0 max-w-full items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground';
+/** Children laid out below the first one's line. */
+function countWrapped(items) {
+    if (items.length === 0)
+        return 0;
+    const firstTop = items[0].offsetTop;
+    return items.filter((item) => item.offsetTop > firstTop).length;
+}
+const getShowMoreLabel = (hiddenCount) => `+${hiddenCount} more`;
+
+/**
+ * Fits chips on one line with the "+N more" link right after the last one. Renders every chip, counts
+ * how many wrap, then drops chips until the link itself fits; a resize starts the measurement over.
+ */
+function useChipOverflow(chips, enabled) {
+    const [list, setList] = useState(null);
+    const [expanded, setExpanded] = useState(false);
+    const [visibleCount, setVisibleCount] = useState(chips.length);
+    const collapsed = enabled && !expanded;
+    const [measuredLength, setMeasuredLength] = useState(chips.length);
+    if (measuredLength !== chips.length) {
+        setMeasuredLength(chips.length);
+        setVisibleCount(chips.length);
+    }
+    useLayoutEffect(() => {
+        if (!collapsed || !list)
+            return;
+        const items = Array.from(list.children);
+        if (visibleCount >= chips.length) {
+            const wrapped = countWrapped(items);
+            if (wrapped > 0)
+                setVisibleCount(chips.length - wrapped);
+            return;
+        }
+        // The last child is the "+N more" link; if it wrapped, give it one more chip's room.
+        if (countWrapped(items) > 0 && visibleCount > 1)
+            setVisibleCount(visibleCount - 1);
+    }, [collapsed, list, visibleCount, chips.length]);
+    useEffect(() => {
+        if (!collapsed || !list)
+            return;
+        let width = list.clientWidth;
+        const observer = new ResizeObserver(() => {
+            if (list.clientWidth === width)
+                return;
+            width = list.clientWidth;
+            setVisibleCount(chips.length);
+        });
+        observer.observe(list);
+        return () => observer.disconnect();
+    }, [collapsed, list, chips.length]);
+    const shown = collapsed ? Math.min(visibleCount, chips.length) : chips.length;
+    return {
+        listRef: useCallback((node) => setList(node), []),
+        expanded,
+        toggle: () => {
+            setExpanded((current) => !current);
+            setVisibleCount(chips.length);
+        },
+        visibleChips: chips.slice(0, shown),
+        hiddenCount: chips.length - shown,
+    };
+}
+
 const getRemoveChipLabel = (label) => `Remove ${label} filter`;
 const FILTERED_BY_LABEL = 'Filtered by';
 
@@ -38573,16 +38638,33 @@ const FILTERED_BY_LABEL = 'Filtered by';
 const CHIP_CLASS = 'inline-flex h-7 max-w-full items-center gap-1 rounded-md border border-primary/30 bg-primary/5 px-2.5 text-xs text-foreground';
 const REMOVE_BUTTON_CLASS = 'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground outline-none hover:bg-primary/10 hover:text-foreground focus-visible:ring-2 focus-visible:ring-primary/30';
 const CLEAR_ALL_CLASS = cn(FILTER_LINK_CLASS_NAME, 'underline');
+const SHOW_MORE_CLASS = cn(FILTER_LINK_CLASS_NAME, 'whitespace-nowrap px-1 underline underline-offset-2');
 function getChipLabelText(label, variant) {
     return variant === 'inline' ? `${label}:` : label;
 }
 
+function Chip({ chip, variant, onRemove }) {
+    return (jsxs(Fragment$2, { children: [jsx("span", { className: "shrink-0 font-semibold", children: getChipLabelText(chip.label, variant) }), jsx(TruncatedLabel, { text: chip.value }), onRemove && (jsx("button", { type: "button", "aria-label": getRemoveChipLabel(chip.label), onClick: () => onRemove(chip.id), className: REMOVE_BUTTON_CLASS, children: jsx(X$2, { "aria-hidden": "true", className: "size-3" }) }))] }));
+}
+/** One line of chips ending in "+N more"; Clear all and the actions stay at the right end. */
+function CollapsibleChips({ chips, onRemove, variant = 'inline', clearAll, actions, className, }) {
+    const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips.map((chip) => chip.id), true);
+    const visible = new Set(visibleChips);
+    return (
+    // Centred, so the label and Clear all line up with buttons beside the row even when the chips wrap.
+    jsxs("div", { className: cn('flex items-center gap-1.5', className), children: [variant === 'inline' && (jsx("span", { className: "mr-0.5 flex h-7 shrink-0 items-center text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), jsxs("ul", { ref: listRef, className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: [chips
+                        .filter((chip) => visible.has(chip.id))
+                        .map((chip) => (jsx("li", { className: CHIP_CLASS, children: jsx(Chip, { chip: chip, variant: variant, onRemove: onRemove }) }, chip.id))), (expanded || hiddenCount > 0) && (jsx("li", { className: "flex h-7 shrink-0 items-center", children: jsx("button", { type: "button", "aria-expanded": expanded, onClick: toggle, className: SHOW_MORE_CLASS, children: expanded ? 'Show less' : getShowMoreLabel(hiddenCount) }) }))] }), (clearAll || actions) && (jsxs("div", { className: "ml-1.5 flex h-7 shrink-0 items-center gap-3", children: [clearAll, actions] }))] }));
+}
 /** Applied filters as removable chips, with an optional Clear all. */
-function ActiveFilterChips({ chips, onRemove, onClearAll, variant = 'inline', actions, className, }) {
+function ActiveFilterChips({ chips, onRemove, onClearAll, variant = 'inline', actions, collapsible = false, className, }) {
     if (chips.length === 0)
         return null;
     const clearAll = onClearAll && (jsx("button", { type: "button", onClick: onClearAll, className: CLEAR_ALL_CLASS, children: "Clear all" }));
-    return (jsxs("div", { className: cn('flex flex-wrap items-center gap-1.5', className), children: [variant === 'inline' && (jsx("span", { className: "mr-0.5 text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), chips.map((chip) => (jsxs("span", { className: CHIP_CLASS, children: [jsx("span", { className: "shrink-0 font-semibold", children: getChipLabelText(chip.label, variant) }), jsx(TruncatedLabel, { text: chip.value }), onRemove && (jsx("button", { type: "button", "aria-label": getRemoveChipLabel(chip.label), onClick: () => onRemove(chip.id), className: REMOVE_BUTTON_CLASS, children: jsx(X$2, { "aria-hidden": "true", className: "size-3" }) }))] }, chip.id))), actions ? (
+    if (collapsible) {
+        return (jsx(CollapsibleChips, { chips: chips, onRemove: onRemove, variant: variant, clearAll: clearAll, actions: actions, className: className }));
+    }
+    return (jsxs("div", { className: cn('flex flex-wrap items-center gap-1.5', className), children: [variant === 'inline' && (jsx("span", { className: "mr-0.5 text-xs text-muted-foreground", children: FILTERED_BY_LABEL })), chips.map((chip) => (jsx("span", { className: CHIP_CLASS, children: jsx(Chip, { chip: chip, variant: variant, onRemove: onRemove }) }, chip.id))), actions ? (
             // With actions, Clear all joins them at the row's right end.
             jsxs("div", { className: "ml-auto flex items-center gap-3 pl-3", children: [clearAll, actions] })) : (clearAll)] }));
 }
@@ -38784,14 +38866,18 @@ function getNextScaleRange(anchor, option) {
         ? { from: option, to: option }
         : { from: anchor, to: option };
 }
+const SCALE_POSITION_CLASS_NAMES = {
+    // Unselected options look exactly like unselected pick-list options.
+    outside: getSelectableOptionClassName(false),
+    end: 'border-primary bg-primary font-medium text-primary-foreground',
+    between: 'border-primary/30 bg-primary/10 font-medium text-primary',
+};
+/** A pill like the other pick lists' (`Single`, `Parcel`), coloured by where it sits in the range. */
+const getScalePillClassName = (position) => cn('inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-sm border px-3 text-xs transition-colors', FILTER_FOCUS_RING, SCALE_POSITION_CLASS_NAMES[position]);
 function getScaleButtonClassName(position, fill = false, hasCount = false) {
     return cn('flex min-w-0 cursor-pointer items-center gap-2 rounded-md border transition-colors', 
     // With a count: name left, badge right (like a list row); without: name centred.
-    hasCount ? 'justify-between text-left' : 'justify-center text-center', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING, 
-    // Unselected options look exactly like unselected pick-list tiles.
-    position === 'outside' && getSelectableOptionClassName(false), position === 'end' &&
-        'border-primary bg-primary font-medium text-primary-foreground', position === 'between' &&
-        'border-primary/30 bg-primary/10 font-medium text-primary');
+    hasCount ? 'justify-between text-left' : 'justify-center text-center', fill ? 'min-h-12 px-2 py-1.5 text-sm' : 'min-h-10 px-1.5 py-1 text-xs', FILTER_FOCUS_RING, SCALE_POSITION_CLASS_NAMES[position]);
 }
 /** The count badge follows the tile: plain, tinted inside the range, solid on an end. */
 const getScaleCountTone = (position) => position === 'end' ? 'solid' : position === 'between' ? 'tinted' : 'neutral';
@@ -38811,8 +38897,14 @@ function useScaleRangeFilter({ value, onChange, }) {
 }
 
 /** Ordered-scale filter: click a start option, then an end option. */
-function ScaleRangeFilter({ options, value, onChange, ariaLabel, columns, fill = false, }) {
+function ScaleRangeFilter({ options, value, onChange, ariaLabel, layout = 'pills', columns, fill = false, }) {
     const { selectOption } = useScaleRangeFilter({ value, onChange });
+    if (layout === 'pills') {
+        return (jsx("div", { role: "group", "aria-label": ariaLabel, className: "flex flex-wrap content-start gap-1.5", children: options.map((option) => {
+                const position = getScalePosition(options, value, option.value);
+                return (jsxs("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScalePillClassName(position), children: [jsx("span", { children: option.label }), option.count !== undefined && (jsx("span", { className: getCountBadgeClassName(getScaleCountTone(position)), children: formatOptionCount(option.count) }))] }, option.value));
+            }) }));
+    }
     return (jsx("div", { role: "group", "aria-label": ariaLabel, className: fill ? 'grid gap-2' : 'grid gap-1.5', style: getGridColumnsStyle(columns), children: options.map((option) => {
             const position = getScalePosition(options, value, option.value);
             return (jsxs("button", { type: "button", "aria-pressed": position !== 'outside', "aria-label": option.label, onClick: () => selectOption(option.value), className: getScaleButtonClassName(position, fill, option.count !== undefined), children: [jsx(TruncatedLabel, { text: option.label }), option.count !== undefined && (jsx("span", { className: getCountBadgeClassName(getScaleCountTone(position)), children: formatOptionCount(option.count) }))] }, option.value));
@@ -38826,7 +38918,7 @@ const TILE_KEYS = ['a', 'b', 'c', 'd'];
 const CARD_CLASS_NAME = 'flex h-full min-w-0 flex-col gap-3 rounded-xl border border-border bg-card p-4';
 
 function Pills({ count }) {
-    return (jsx("div", { className: "flex flex-wrap gap-1.5", children: PILL_WIDTHS.slice(0, count).map((width) => (jsx(SquareSkeleton, { height: 32, width: width, rounded: "full" }, width))) }));
+    return (jsx("div", { className: "flex flex-wrap gap-1.5", children: PILL_WIDTHS.slice(0, count).map((width) => (jsx(SquareSkeleton, { height: 32, width: width, rounded: "sm" }, width))) }));
 }
 function Body({ variant, }) {
     switch (variant) {
@@ -39136,70 +39228,6 @@ function TriStateFilter({ value, onChange, ariaLabel, compact = false, }) {
         }) }));
 }
 
-const SAVED_SEARCH_CHIP_CLASS_NAME = 'inline-flex h-6 min-w-0 max-w-full items-center rounded-full border border-primary/30 bg-primary/5 px-2 text-xs text-foreground';
-/** Children laid out below the first one's line. */
-function countWrapped(items) {
-    if (items.length === 0)
-        return 0;
-    const firstTop = items[0].offsetTop;
-    return items.filter((item) => item.offsetTop > firstTop).length;
-}
-const getShowMoreLabel = (hiddenCount) => `+${hiddenCount} more`;
-
-/**
- * Fits chips on one line with the "+N more" link right after the last one. Renders every chip, counts
- * how many wrap, then drops chips until the link itself fits; a resize starts the measurement over.
- */
-function useChipOverflow(chips, enabled) {
-    const [list, setList] = useState(null);
-    const [expanded, setExpanded] = useState(false);
-    const [visibleCount, setVisibleCount] = useState(chips.length);
-    const collapsed = enabled && !expanded;
-    const [measuredLength, setMeasuredLength] = useState(chips.length);
-    if (measuredLength !== chips.length) {
-        setMeasuredLength(chips.length);
-        setVisibleCount(chips.length);
-    }
-    useLayoutEffect(() => {
-        if (!collapsed || !list)
-            return;
-        const items = Array.from(list.children);
-        if (visibleCount >= chips.length) {
-            const wrapped = countWrapped(items);
-            if (wrapped > 0)
-                setVisibleCount(chips.length - wrapped);
-            return;
-        }
-        // The last child is the "+N more" link; if it wrapped, give it one more chip's room.
-        if (countWrapped(items) > 0 && visibleCount > 1)
-            setVisibleCount(visibleCount - 1);
-    }, [collapsed, list, visibleCount, chips.length]);
-    useEffect(() => {
-        if (!collapsed || !list)
-            return;
-        let width = list.clientWidth;
-        const observer = new ResizeObserver(() => {
-            if (list.clientWidth === width)
-                return;
-            width = list.clientWidth;
-            setVisibleCount(chips.length);
-        });
-        observer.observe(list);
-        return () => observer.disconnect();
-    }, [collapsed, list, chips.length]);
-    const shown = collapsed ? Math.min(visibleCount, chips.length) : chips.length;
-    return {
-        listRef: useCallback((node) => setList(node), []),
-        expanded,
-        toggle: () => {
-            setExpanded((current) => !current);
-            setVisibleCount(chips.length);
-        },
-        visibleChips: chips.slice(0, shown),
-        hiddenCount: chips.length - shown,
-    };
-}
-
 /** Read-only filter summaries of a saved search, as pills; optionally one line ending in "+N more". */
 function SavedSearchChipList({ chips, emptyText = 'No filters', collapsible = false, className, }) {
     const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips, collapsible);
@@ -77023,7 +77051,7 @@ const getDropdownPlaceholder = (field) => field.inputPlaceholder ??
     `${field.single ? 'Any' : 'Select'} ${field.label.toLowerCase()}`;
 /** Popover variant: the same control and layout as the card (pills up to 4 options, then the list); tile grids drop to two columns. */
 function toPopoverField(field) {
-    if (field.type === 'scale' ||
+    if ((field.type === 'scale' && field.layout === 'tiles') ||
         (field.type === 'list' && resolveListLayout(field) === 'tiles')) {
         return { ...field, columns: POPOVER_TILE_COLUMNS };
     }
@@ -77056,7 +77084,7 @@ function FilterFieldControl({ field, value, onChange, fiscalYearStartMonth, fill
             return (jsx(PickListFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'list')?.values ?? [], onChange: (values) => onChange(toListValue(values)), layout: layout, searchPlaceholder: layout === 'list' ? field.searchPlaceholder : undefined, columns: field.columns, single: field.single }));
         }
         case 'scale':
-            return (jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), columns: field.columns, fill: fill }));
+            return (jsx(ScaleRangeFilter, { ariaLabel: ariaLabel, options: field.options ?? [], value: valueOfType(value, 'scale')?.range, onChange: (range) => onChange(toScaleValue(range)), layout: field.layout === 'tiles' ? 'tiles' : 'pills', columns: field.columns, fill: fill }));
         case 'number':
             return (jsx(NumberRangeInputs, { ariaLabel: field.label, value: valueOfType(value, 'number')?.range, onChange: (range) => onChange(toNumberValue(range)), presets: field.presets, presetsLabel: field.presetsLabel }));
         case 'ids':
@@ -77102,9 +77130,8 @@ function FilterField(props) {
     return mode === 'cell' ? (jsx(FilterFieldCell, { ...rest })) : (jsx(FilterFieldCard, { mode: mode, ...rest }));
 }
 
-/** Both leave without applying — the draft is discarded. */
+/** Leaves without applying; the draft is discarded. */
 const BACK_LABEL = 'Back without applying';
-const CLOSE_LABEL = 'Close without applying';
 const LOADING_LABEL = 'Loading filters';
 const ERROR_TITLE = "Couldn't load filters";
 const DEFAULT_ERROR_MESSAGE = 'Something went wrong while loading the filters. Check your connection and try again.';
@@ -77174,10 +77201,12 @@ function MasonryItem({ children }) {
     return (jsx("div", { style: span > 0 ? { gridRowEnd: `span ${span}` } : undefined, children: jsx("div", { ref: ref, className: "pb-3", children: children }) }));
 }
 
-/** Full-page filter screen (e.g. an advanced search): header, scrolling card grid, sticky apply footer. */
-function FilterSurface({ title, headerActions, footerChips, footerActions, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
+/** Full-page filter screen (e.g. an advanced search): one sticky header with every action, then the scrolling card grid. */
+function FilterSurface({ title, headerActions, primaryActions, chips, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
     useCloseOnEscape(onClose);
-    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-end justify-between gap-3 bg-background px-3 pt-2 pb-3", children: [jsx("div", { className: "flex flex-col gap-1", children: jsxs("div", { className: "flex items-center gap-2", children: [jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsx(ArrowLeft, {}) }), jsx("h1", { className: "text-xl font-semibold text-foreground", children: title })] }) }), jsxs("div", { className: "flex items-center gap-2", children: [headerActions, jsx(IconButton, { appearance: "outline", size: "md", "aria-label": CLOSE_LABEL, title: CLOSE_LABEL, onClick: onClose, children: jsx(X$2, {}) })] })] }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsx("div", { className: "flex flex-col gap-3", children: children })) }), status === 'ready' && (footerChips || footerActions) && (jsxs("footer", { className: "sticky bottom-0 z-20 flex flex-wrap items-center justify-between gap-3 border-t border-border bg-card px-3 py-2", children: [jsx("div", { className: "min-w-0 flex-1", children: footerChips }), jsx("div", { className: "flex shrink-0 items-center gap-2", children: footerActions })] }))] }));
+    const ready = status === 'ready';
+    const actions = ready ? primaryActions : undefined;
+    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 bg-background px-3 py-2.5", children: [jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsx(ArrowLeft, {}) }), jsx("h1", { className: "sr-only", children: title }), jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions] })] }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
 }
 function FilterSurfaceGroup({ title, masonry = false, className, children, }) {
     return (jsxs("section", { className: "flex flex-col gap-3", children: [title && (jsx("h2", { className: "text-xs font-semibold uppercase tracking-wide text-label", children: title })), jsx("div", { className: cn('grid grid-cols-1 items-start lg:grid-cols-6', masonry ? MASONRY_GRID_CLASS_NAME : 'gap-3', className), children: masonry