sherick-ui 2.8.0 → 2.10.1

package/dist/cjs/components/Collapsible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapsible.cjs","sources":["../../../src/components/Collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport React, { type ReactNode } from \"react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { cn } from \"@/libs/utils\";\nimport { disclosure } from \"./ui.common\";\nimport { motionOrient } from \"./ui.motion\";\n\nexport interface CollapsibleProps {\n  children: ReactNode;\n  /** Whether the region is expanded, when the application owns the state. */\n  open?: boolean;\n  /** Whether the region starts expanded, for a collapsible that owns its own state. */\n  defaultOpen?: boolean;\n  /** Base's own open-change callback, event details included. */\n  onOpenChange?: BaseCollapsible.Root.Props[\"onOpenChange\"];\n  /** Whether the disclosure is inert. */\n  disabled?: boolean;\n  /** Adds to the disclosure's own column. The row and the panel style themselves. */\n  className?: string;\n}\n\nexport interface CollapsibleTriggerProps {\n  children: ReactNode;\n  /** Adds to the row. The row's shape, tone and states are the disclosure recipe's. */\n  className?: string;\n}\n\nexport interface CollapsiblePanelProps {\n  children: ReactNode;\n  /** Adds to the measured region. The region's height and clipping are the recipe's. */\n  className?: string;\n}\n\ntype CollapsibleComponent = ((props: CollapsibleProps) => React.JSX.Element) & {\n  Trigger: typeof CollapsibleTrigger;\n  Panel: typeof CollapsiblePanel;\n};\n\nconst CollapsibleTrigger = ({ children, className }: CollapsibleTriggerProps) => (\n  <BaseCollapsible.Trigger className={cn(disclosure.trigger, className)}>\n    <span className={cn(\"min-w-0 flex-1\")}>{children}</span>\n    {/* The same affordance, and the same in-place turn, as an `Accordion` row: the two are one\n        object at two scopes. */}\n    <HugeiconsIcon icon={ArrowDown01Icon}\n      aria-hidden=\"true\"\n      className={cn(\"size-4 shrink-0\", motionOrient, \"group-data-[panel-open]:rotate-180\")}\n    />\n  </BaseCollapsible.Trigger>\n);\n\nconst CollapsiblePanel = ({ children, className }: CollapsiblePanelProps) => (\n  <BaseCollapsible.Panel\n    className={cn(\n      \"[--sui-disclose-height:var(--collapsible-panel-height)]\",\n      disclosure.panel,\n      className\n    )}\n  >\n    <div className={cn(\"px-4 pb-4 pt-1\")}>{children}</div>\n  </BaseCollapsible.Panel>\n);\n\n/**\n * One region that expands where it sits, without belonging to a group. Base UI owns the expanded\n * state and the trigger's `aria-expanded`/`aria-controls` plumbing — including making the\n * trigger's own state reachable, since nothing else in the page holds it; Sherick UI owns the\n * row, the panel's clipping and how the height moves.\n *\n * It is the same object an `Accordion` item is, at the scope of a single disclosure: use a\n * `Collapsible` for one region on its own, and an `Accordion` when several sections belong to\n * one group.\n */\nconst Collapsible = (({ children, className, ...props }: CollapsibleProps) => {\n  return (\n    <BaseCollapsible.Root {...props} className={cn(\"flex min-w-0 flex-col\", className)}>\n      {children}\n    </BaseCollapsible.Root>\n  );\n}) as CollapsibleComponent;\n\nCollapsible.Trigger = CollapsibleTrigger;\nCollapsible.Panel = CollapsiblePanel;\n\nexport default Collapsible;\n"],"names":["_jsxs","BaseCollapsible","cn","disclosure","_jsx","HugeiconsIcon","ArrowDown01Icon","motionOrient"],"mappings":"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"}
+{"version":3,"file":"Collapsible.cjs","sources":["../../../src/components/Collapsible.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as BaseCollapsible } from \"@base-ui/react/collapsible\";\nimport React, { type ReactNode } from \"react\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { ArrowDown01Icon } from \"@hugeicons/core-free-icons\";\nimport { cn } from \"@/libs/utils\";\nimport { disclosure, iconStroke } from \"./ui.common\";\nimport { motionOrient } from \"./ui.motion\";\n\nexport interface CollapsibleProps {\n  children: ReactNode;\n  /** Whether the region is expanded, when the application owns the state. */\n  open?: boolean;\n  /** Whether the region starts expanded, for a collapsible that owns its own state. */\n  defaultOpen?: boolean;\n  /** Base's own open-change callback, event details included. */\n  onOpenChange?: BaseCollapsible.Root.Props[\"onOpenChange\"];\n  /** Whether the disclosure is inert. */\n  disabled?: boolean;\n  /** Adds to the disclosure's own column. The row and the panel style themselves. */\n  className?: string;\n}\n\nexport interface CollapsibleTriggerProps {\n  children: ReactNode;\n  /** Adds to the row. The row's shape, tone and states are the disclosure recipe's. */\n  className?: string;\n}\n\nexport interface CollapsiblePanelProps {\n  children: ReactNode;\n  /** Adds to the measured region. The region's height and clipping are the recipe's. */\n  className?: string;\n}\n\ntype CollapsibleComponent = ((props: CollapsibleProps) => React.JSX.Element) & {\n  Trigger: typeof CollapsibleTrigger;\n  Panel: typeof CollapsiblePanel;\n};\n\nconst CollapsibleTrigger = ({ children, className }: CollapsibleTriggerProps) => (\n  <BaseCollapsible.Trigger className={cn(disclosure.trigger, className)}>\n    <span className={cn(\"min-w-0 flex-1\")}>{children}</span>\n    {/* The same affordance, at the same slot size and with the same in-place turn, as an `Accordion` row:\n        the two are one object at two scopes. */}\n    <span className={cn(disclosure.chevron)} aria-hidden=\"true\">\n      <HugeiconsIcon\n        icon={ArrowDown01Icon}\n        aria-hidden=\"true\"\n        className={cn(iconStroke.glyph, motionOrient, \"group-data-[panel-open]:rotate-180\")}\n      />\n    </span>\n  </BaseCollapsible.Trigger>\n);\n\nconst CollapsiblePanel = ({ children, className }: CollapsiblePanelProps) => (\n  <BaseCollapsible.Panel\n    className={cn(\n      \"[--sui-disclose-height:var(--collapsible-panel-height)]\",\n      disclosure.panel,\n      className\n    )}\n  >\n    <div className={cn(\"px-4 pb-4 pt-1\")}>{children}</div>\n  </BaseCollapsible.Panel>\n);\n\n/**\n * One region that expands where it sits, without belonging to a group. Base UI owns the expanded\n * state and the trigger's `aria-expanded`/`aria-controls` plumbing — including making the\n * trigger's own state reachable, since nothing else in the page holds it; Sherick UI owns the\n * row, the panel's clipping and how the height moves.\n *\n * It is the same object an `Accordion` item is, at the scope of a single disclosure: use a\n * `Collapsible` for one region on its own, and an `Accordion` when several sections belong to\n * one group.\n */\nconst Collapsible = (({ children, className, ...props }: CollapsibleProps) => {\n  return (\n    <BaseCollapsible.Root {...props} className={cn(\"flex min-w-0 flex-col\", className)}>\n      {children}\n    </BaseCollapsible.Root>\n  );\n}) as CollapsibleComponent;\n\nCollapsible.Trigger = CollapsibleTrigger;\nCollapsible.Panel = CollapsiblePanel;\n\nexport default Collapsible;\n"],"names":["_jsxs","BaseCollapsible","cn","disclosure","_jsx","HugeiconsIcon","ArrowDown01Icon","iconStroke","motionOrient"],"mappings":"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"}

package/dist/cjs/components/Combobox.cjs

@@ -12,7 +12,17 @@ var utils = require('../libs/utils.cjs');
 var ui_common = require('./ui.common.cjs');
 var ui_motion = require('./ui.motion.cjs');
 var optionGroups = require('./option-groups.cjs');
+var DismissButton = require('./DismissButton.cjs');
+var Spinner = require('./Spinner.cjs');
+var Field = require('./Field.cjs');
 
+const defaultComboboxLabels = {
+    removeChip: (label) => `Remove ${label}`,
+    clearAll: "Clear all",
+    clearSelection: "Clear selection",
+    showOptions: "Show options",
+    noResults: "No results found.",
+};
 const isCreateItem = (item) => item.create === true;
 const sameText = (a, b) => a.localeCompare(b, undefined, { sensitivity: "accent" }) === 0;
 /* The composite field's own controls are not standalone `IconButton`s: the field owns their
@@ -24,7 +34,7 @@ const sameText = (a, b) => a.localeCompare(b, undefined, { sensitivity: "accent"
    a read-only combobox still opens and browses, only its value is fixed. The clear control is
    handed its own `disabled` for that case because Base itself refuses to clear a read-only
    control; nothing here has to be derived from Sherick's props. */
-const partClassName = `inline-flex shrink-0 items-center justify-center ${ui_common.density.part} ${ui_common.shape.circle} ${ui_common.text.medium} [&>svg]:size-5 ${ui_motion.motionFeedback} ${ui_common.stateLayer.fieldPart} ${ui_common.state.enabled} ${ui_common.state.disabledPart} [&:not([data-disabled]):not(:disabled)]:hover:text-sherick-ink`;
+const partClassName = `inline-flex shrink-0 items-center justify-center ${ui_common.density.part} ${ui_common.shape.circle} ${ui_common.state.quietInk} [&>svg]:size-5 ${ui_motion.motionFeedback} ${ui_common.stateLayer.fieldPart} ${ui_common.state.enabled} ${ui_common.state.disabledPart} ${ui_common.state.busy}`;
 /* A chosen value inside the field is a held choice riding in the field's tray, so it is the tray's
    puck: the brightest surface in the view, at `elevation.control`, with its copy at full emphasis. A
    neutral tonal pill is the tray's own tone, and a row of them read as one grey band rather than as
@@ -33,12 +43,15 @@ const partClassName = `inline-flex shrink-0 items-center justify-center ${ui_com
    resting height intact around one line of chips. Base gives a chip real focus while the arrow keys
    walk the row, so the focused chip takes the inset ring — the one this chip is, inside the field's
    own ring, which keeps marking the field as engaged. */
-const valueChipClassName = utils.cn("inline-flex h-7 min-w-0 max-w-full items-center gap-0.5 ps-3 pe-0.5 text-sm leading-5 font-medium outline-none", ui_common.shape.pill, ui_common.puck, ui_common.elevation.control, ui_common.text.high, ui_common.focusRingInset);
+const valueChipClassName = utils.cn("inline-flex h-7 min-w-0 max-w-full items-center gap-0.5 ps-3 pe-0.5 [outline-style:none]", ui_common.shape.pill, ui_common.type.label, ui_common.puck, ui_common.elevation.control, ui_common.text.high, ui_common.focusRingInset);
 /* The dismiss target is a part of the chip the pointer is already in: 24px clears the pointer
-   minimum, its circle nests in the chip's pill at the chip's own 2px end inset, and the glyph inside
-   it takes the press so the target never moves. Base keeps it out of the tab order — Backspace and
-   Delete remove a focused chip — and marks it disabled with the combobox. */
-const chipRemoveClassName = utils.cn("group inline-flex size-6 shrink-0 items-center justify-center", ui_common.shape.circle, ui_common.text.medium, "[&:not([data-disabled]):not(:disabled)]:hover:text-sherick-ink", ui_motion.motionFeedback, ui_common.stateLayer.quiet, ui_common.state.enabled, ui_common.state.disabledPart);
+   minimum, its circle nests in the chip's pill at the chip's own 2px end inset, and the 16px mark
+   inside it takes the press so the target never moves. `DismissButton` supplies the mark and the
+   quiet ink; these classes give it the chip's own geometry in place of the standalone 44px floor. */
+const chipRemoveClassName = "size-6 min-h-0 min-w-0 shrink-0";
+/* The clear control is one part of the field, so it keeps the part's 32px cluster and its 32px hover
+   circle, with the 16px dismiss mark inside it. */
+const clearClassName = utils.cn(ui_common.density.part, ui_common.stateLayer.fieldPart, ui_common.state.enabled, ui_common.state.disabledPart);
 /**
  * A text field that filters a list of options and selects one of them, or several. It is the
  * searchable sibling of `Select`: the same option shape, the same value contract and the same box,
@@ -51,7 +64,26 @@ const chipRemoveClassName = utils.cn("group inline-flex size-6 shrink-0 items-ce
  */
 const Combobox = React.forwardRef((props, ref) => {
     var _a, _b, _c;
-    const { options, multiple, value, defaultValue, onValueChange, creatable, createLabel = (query) => `Add “${query}”`, chipsLabel = "Selected", placeholder = "Select an option", emptyMessage, className, disabled, readOnly, filter, autoHighlight, inputValue, defaultInputValue, onInputValueChange, onOpenChange, ...rootProps } = props;
+    const { options, multiple, value, defaultValue, onValueChange, creatable, createLabel = (query) => `Add “${query}”`, chipsLabel = "Selected", placeholder = "Select an option", emptyMessage, loading = false, size = "md", labels, className, popupClassName, disabled, readOnly, filter, autoHighlight, inputValue, defaultInputValue, onInputValueChange, onOpenChange, ...rootProps } = props;
+    const copy = { ...defaultComboboxLabels, ...labels };
+    /* The field's own box, so a chip that is removed can find the chips and the input that remain. */
+    const fieldRef = React.useRef(null);
+    /* Set when a chip is removed while it holds focus: focus then moves to the chip that takes its place,
+       or to the input when the last chip went. Applied after the new value has rendered. */
+    const focusAfterRemoval = React.useRef(null);
+    React.useEffect(() => {
+        var _a;
+        const index = focusAfterRemoval.current;
+        if (index === null)
+            return;
+        focusAfterRemoval.current = null;
+        const field = fieldRef.current;
+        if (!field)
+            return;
+        const chips = field.querySelectorAll("[data-sui-value-chip]");
+        const target = (_a = chips[index]) !== null && _a !== void 0 ? _a : field.querySelector("input");
+        target === null || target === void 0 ? void 0 : target.focus();
+    });
     const flatOptions = optionGroups.flattenOptions(options);
     const optionByValue = new Map(flatOptions.map((option) => [option.value, option]));
     /* A value that is not among the options — a created entry — is shown under its own text. */
@@ -131,8 +163,8 @@ const Combobox = React.forwardRef((props, ref) => {
         if (next !== "" && notice.announced !== "")
             setNotice({ visible: "", announced: "" });
     };
-    const renderItem = (option) => isCreateItem(option) ? (jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, className: utils.cn(ui_common.list.option, "justify-start gap-3"), children: [jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.PlusSignIcon, "aria-hidden": "true", className: utils.cn("size-4 shrink-0", ui_common.tone.text.primary) }), jsxRuntime.jsx("span", { className: utils.cn("min-w-0 flex-1 truncate"), children: createLabel(option.label) })] }, "sui-create")) : (jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, disabled: option.disabled, className: ({ selected: isSelected }) => utils.cn(ui_common.list.option, isSelected && utils.cn(ui_common.tone.selected.primary, ui_common.elevation.control)), children: [jsxRuntime.jsx("span", { className: utils.cn("min-w-0 flex-1 truncate"), children: option.label }), jsxRuntime.jsx(combobox.Combobox.ItemIndicator, { children: jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.Tick02Icon, "aria-hidden": "true", className: utils.cn("size-4", ui_motion.motionArrive, ui_common.tone.text.primary) }) })] }, option.value));
-    const input = (chosenCount) => (jsxRuntime.jsx(combobox.Combobox.Input, { ref: ref, placeholder: chosenCount > 0 ? undefined : placeholder, onPaste: handlePaste, className: utils.cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-sherick-ink-muted disabled:cursor-not-allowed", multiple && "h-7 min-w-16") }));
+    const renderItem = (option) => isCreateItem(option) ? (jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, className: utils.cn(ui_common.list.option, "justify-start gap-3"), children: [jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.PlusSignIcon, "aria-hidden": "true", className: utils.cn(ui_common.iconStroke.glyph, "size-4 shrink-0", ui_common.tone.text.primary) }), jsxRuntime.jsx("span", { className: utils.cn("min-w-0 flex-1 truncate"), children: createLabel(option.label) })] }, "sui-create")) : (jsxRuntime.jsxs(combobox.Combobox.Item, { value: option, disabled: option.disabled, className: ({ selected: isSelected }) => utils.cn(ui_common.list.option, isSelected && utils.cn(ui_common.tone.selected.primary, ui_common.elevation.control)), children: [jsxRuntime.jsx("span", { className: utils.cn("min-w-0 flex-1 truncate"), children: option.label }), jsxRuntime.jsx(combobox.Combobox.ItemIndicator, { children: jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.Tick02Icon, "aria-hidden": "true", className: utils.cn(ui_common.iconStroke.glyph, "size-4", ui_motion.motionArrive, ui_common.tone.text.primary) }) })] }, option.value));
+    const input = (chosenCount) => (jsxRuntime.jsx(combobox.Combobox.Input, { ref: ref, placeholder: chosenCount > 0 ? undefined : placeholder, onPaste: handlePaste, className: utils.cn("min-w-0 flex-1 bg-transparent [outline-style:none] placeholder:text-sherick-ink-muted disabled:cursor-not-allowed", multiple && "h-7 min-w-16") }));
     const selectedOptions = values.map(toOption);
     /* Base types its single and multiple roots as two different components; the value contract is
        chosen here, once, and the rest of the root is shared. */
@@ -141,6 +173,7 @@ const Combobox = React.forwardRef((props, ref) => {
             multiple: true,
             value: selectedOptions,
             onValueChange: (next, eventDetails) => {
+                var _a, _b, _c, _d;
                 const created = next.find(isCreateItem);
                 const removed = values.filter((chosen) => !next.some((option) => option.value === chosen));
                 const added = next.filter((option) => !values.includes(option.value));
@@ -167,7 +200,15 @@ const Combobox = React.forwardRef((props, ref) => {
                     flagNotice(0, [trimmedQuery]);
                     return;
                 }
+                /* A chip removed while it holds focus would take focus with it, so the request is recorded here
+                   and applied once the chip is gone. A chip that was not focused leaves focus where it was. */
+                const removedIndex = removed.length === 1 ? values.indexOf(removed[0]) : -1;
+                const focusedChip = (_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.closest("[data-sui-value-chip]")) !== null && _b !== void 0 ? _b : null;
+                const chipsNow = Array.from((_d = (_c = fieldRef.current) === null || _c === void 0 ? void 0 : _c.querySelectorAll("[data-sui-value-chip]")) !== null && _d !== void 0 ? _d : []);
                 const applied = commitValues(next.map((option) => option.value), eventDetails);
+                if (applied && removedIndex >= 0 && focusedChip !== null && chipsNow[removedIndex] === focusedChip) {
+                    focusAfterRemoval.current = removedIndex;
+                }
                 if (applied && created) {
                     /* Base keeps the typed filter while the list stays open, so several matches can be
                        chosen from one query. A created entry used the query up, so it starts over. */
@@ -194,7 +235,7 @@ const Combobox = React.forwardRef((props, ref) => {
                the next can be chosen without reopening it. Escape, Tab and a press outside still close. */
             if (multiple && !open && eventDetails.reason === "item-press")
                 eventDetails.cancel();
-        }, disabled: disabled, readOnly: readOnly, children: [jsxRuntime.jsxs(combobox.Combobox.InputGroup, { className: ({ open, disabled: fieldDisabled }) => utils.cn(
+        }, disabled: disabled, readOnly: readOnly, children: [jsxRuntime.jsxs(combobox.Combobox.InputGroup, { ref: fieldRef, className: ({ open, disabled: fieldDisabled }) => utils.cn(
                 /* The field's own inline padding is what places the trailing cluster, and it is set on the
                    logical ends so the cluster stays at the field's end in either writing direction. The
                    20px a mark's box then sits from the edge — 14px of padding plus the 6px each `density.part`
@@ -202,22 +243,25 @@ const Combobox = React.forwardRef((props, ref) => {
                    field reads with one inset at both ends. Once chips lead the field, its start inset
                    drops to the chips' own block inset, so the first pill sits as far from the field's
                    start as from its top. */
-                "group/field flex min-w-0 w-full items-center ps-5 pe-3.5", multiple && "has-[[data-sui-value-chip]]:ps-2.5", ui_common.density.normal, ui_common.shape.control, ui_common.material.control, ui_common.rim.field, ui_motion.motionTactileField, ui_common.focusRingWithin, !fieldDisabled && !open && ui_common.state.field.hover, !fieldDisabled && ui_common.state.field.focusWithin, open && ui_common.state.field.engaged, ui_common.state.field.invalid, open && ui_common.state.field.invalidEngaged, !fieldDisabled && !open && ui_common.state.field.invalidHover, !fieldDisabled && ui_common.state.field.invalidFocusWithin, fieldDisabled ? ui_common.state.disabled : ui_common.state.text, className), children: [multiple ? (
+                "group/field flex min-w-0 w-full items-center ps-5 pe-3.5", multiple && "has-[[data-sui-value-chip]]:ps-2.5", Field.fieldDensity[size], ui_common.shape.control, ui_common.material.control, ui_common.rim.field, ui_motion.motionTactileField, ui_common.focusRingWithin, !fieldDisabled && !open && ui_common.state.field.hover, !fieldDisabled && ui_common.state.field.focusWithin, open && ui_common.state.field.engaged, ui_common.state.field.invalid, open && ui_common.state.field.invalidEngaged, !fieldDisabled && !open && ui_common.state.field.invalidHover, !fieldDisabled && ui_common.state.field.invalidFocusWithin, fieldDisabled ? ui_common.state.disabled : ui_common.state.text, className), children: [multiple ? (
                     /* The chips and the input wrap together, so a long selection grows the field downward
                        rather than squeezing the query. Base names the row a toolbar once it holds chips. */
                     jsxRuntime.jsxs(combobox.Combobox.Chips, { "aria-label": selectedOptions.length > 0 ? chipsLabel : undefined, className: utils.cn("flex min-w-0 flex-1 flex-wrap items-center gap-1.5 py-2"), children: [selectedOptions.map((option) => (jsxRuntime.jsxs(combobox.Combobox.Chip, { "data-sui-value-chip": "", "aria-readonly": undefined, 
                                 // Without its dismiss target the chip ends on its copy, so it takes its start inset again.
-                                className: utils.cn(valueChipClassName, (readOnly || disabled) && "pe-3"), children: [jsxRuntime.jsx("span", { className: utils.cn("min-w-0 truncate"), children: option.label }), !readOnly && !disabled && (jsxRuntime.jsx(combobox.Combobox.ChipRemove, { "aria-label": `Remove ${option.label}`, className: utils.cn(chipRemoveClassName), children: jsxRuntime.jsx("span", { className: utils.cn("inline-flex items-center justify-center", ui_motion.motionInkPress), children: jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.Cancel01Icon, "aria-hidden": "true", className: utils.cn("size-4") }) }) }))] }, option.value))), input(selectedOptions.length)] })) : (input(0)), jsxRuntime.jsx(combobox.Combobox.Clear, { "aria-label": multiple ? "Clear all" : "Clear selection", 
+                                className: utils.cn(valueChipClassName, (readOnly || disabled) && "pe-3"), children: [jsxRuntime.jsx("span", { className: utils.cn("min-w-0 truncate"), children: option.label }), !readOnly && !disabled && (jsxRuntime.jsx(combobox.Combobox.ChipRemove, { render: jsxRuntime.jsx(DismissButton.default, { label: copy.removeChip(option.label), size: "compact", inRow: true, className: utils.cn(chipRemoveClassName) }) }))] }, option.value))), input(selectedOptions.length)] })) : (input(0)), jsxRuntime.jsx(combobox.Combobox.Clear
+                    // Clearing changes the value, so a read-only control cannot offer it — which is Base's own
+                    // reading of the same state, since its clear control refuses the press.
+                    , { 
                         // Clearing changes the value, so a read-only control cannot offer it — which is Base's own
                         // reading of the same state, since its clear control refuses the press.
-                        disabled: disabled || readOnly, className: utils.cn(partClassName), children: jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.Cancel01Icon, "aria-hidden": "true" }) }), jsxRuntime.jsx(combobox.Combobox.Trigger, { "aria-label": "Show options", className: utils.cn(partClassName, "group"), children: jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.ArrowDown01Icon, "aria-hidden": "true", className: utils.cn("size-5", ui_motion.motionOrient, "group-data-[popup-open]:rotate-180") }) })] }), creatable && (
+                        disabled: disabled || readOnly, render: jsxRuntime.jsx(DismissButton.default, { label: multiple ? copy.clearAll : copy.clearSelection, size: "compact", inRow: true, className: utils.cn(clearClassName) }) }), jsxRuntime.jsx(combobox.Combobox.Trigger, { "aria-label": copy.showOptions, "aria-busy": loading || undefined, className: utils.cn(partClassName, "group"), children: loading ? (jsxRuntime.jsx(Spinner.Spinner, { className: utils.cn("size-5", ui_common.text.high), size: "small" })) : (jsxRuntime.jsx(react.HugeiconsIcon, { icon: coreFreeIcons.ArrowDown01Icon, "aria-hidden": "true", className: utils.cn(ui_common.iconStroke.glyph, "size-5", ui_motion.motionOrient, "group-data-[popup-open]:rotate-180") })) })] }), creatable && (
             /* Mounted from the start so a screen reader is already listening when a paste or a refused
                duplicate reports itself. Only the skipped entries are shown: the chips already show what
                was added. While the list is open Base hides everything outside it from assistive
                technology, so the same report is also made from inside the list (below). */
-            jsxRuntime.jsx("div", { role: "status", className: utils.cn(notice.visible !== "" && ui_common.fieldMessage.description), children: notice.announced === notice.visible ? (notice.visible) : (
+            jsxRuntime.jsx("div", { role: "status", className: utils.cn(notice.visible !== "" ? ui_common.fieldMessage.description : "absolute"), children: notice.announced === notice.visible ? (notice.visible) : (
                 // The spoken report is the fuller one; the visible line is not read a second time.
-                jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: notice.visible }), jsxRuntime.jsx("span", { className: utils.cn("sr-only"), children: notice.announced })] })) })), jsxRuntime.jsx(combobox.Combobox.Portal, { children: jsxRuntime.jsx(combobox.Combobox.Positioner, { side: "bottom", align: "start", sideOffset: 8, className: utils.cn(ui_common.stacking.float), children: jsxRuntime.jsxs(combobox.Combobox.Popup, { className: utils.cn(ui_common.list.sheet, "w-max min-w-[var(--anchor-width)] p-2", ui_common.overlay.popup, ui_motion.motionPresenceAnchored), children: [creatable && (jsxRuntime.jsx(combobox.Combobox.Status, { className: utils.cn("sr-only"), children: notice.announced })), jsxRuntime.jsx(combobox.Combobox.Empty, { children: jsxRuntime.jsx("div", { className: utils.cn("px-4 py-3 text-sm", ui_common.text.medium), children: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : (creatable ? "Type to add an entry." : "No results found.") }) }), jsxRuntime.jsx(combobox.Combobox.List, { className: utils.cn("space-y-1"), children: grouped
+                jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { "aria-hidden": "true", children: notice.visible }), jsxRuntime.jsx("span", { className: utils.cn("sr-only"), children: notice.announced })] })) })), jsxRuntime.jsx(combobox.Combobox.Portal, { children: jsxRuntime.jsx(combobox.Combobox.Positioner, { side: "bottom", align: "start", sideOffset: 8, className: utils.cn(ui_common.stacking.float), children: jsxRuntime.jsxs(combobox.Combobox.Popup, { className: utils.cn(ui_common.list.sheet, "w-max min-w-[var(--anchor-width)] p-2", ui_common.overlay.popup, ui_motion.motionPresenceAnchored, popupClassName), children: [creatable && (jsxRuntime.jsx(combobox.Combobox.Status, { className: utils.cn("sr-only"), children: notice.announced })), jsxRuntime.jsx(combobox.Combobox.Empty, { children: jsxRuntime.jsx("div", { className: utils.cn("px-3 py-3", ui_common.type.body, ui_common.text.medium), children: emptyMessage !== null && emptyMessage !== void 0 ? emptyMessage : (creatable ? "Type to add an entry." : copy.noResults) }) }), jsxRuntime.jsx(combobox.Combobox.List, { className: utils.cn("space-y-1"), children: grouped
                                     ? (section) => (
                                     /* A heading names the group it opens. A run of options outside every group is a
                                        section without one, because the primitive reads a list as all groups or none. */