sherick-ui 2.5.0 → 2.7.0

package/README.md

@@ -1,8 +1,8 @@
 # Sherick UI
 
-A React 18/19 component library with soft tonal surfaces, deliberate shape contrast
-and restrained motion. `2.0.0` established the stable line; `1.x` is frozen.
-This package source is `2.3.0`; verified `main` stages new versions via npm trusted
+A React 18/19 component library in graphite and iris, with deliberate
+shape contrast and restrained motion. `2.0.0` established the stable line; `1.x` is frozen.
+This package source is `2.7.0`; verified `main` stages new versions via npm trusted
 publishing for maintainer approval. Check the installed version for availability.
 
 ## Install and style
@@ -84,6 +84,60 @@ Use `options[].label` for rich, wrapping text, badges and non-interactive hints.
 the same single-selection, keyboard and form contract; omit `appearance` for the original
 plain rows. Do not put buttons or links inside a radio's label.
 
+## Forms (from 2.6.0)
+
+`Form` wraps Base UI's form. On submit it validates every named field, keeps the submission
+from leaving while any is invalid and moves focus to the first invalid field. Errors returned
+from a server go in `errors`, keyed by field `name`; each appears under its field, the form
+focuses the first one, and an entry clears as soon as its field changes.
+
+```tsx
+import {
+  CheckboxGroup, Combobox, Field, Form, Input, NumberField, Select, type FormErrors,
+} from "sherick-ui";
+
+const [errors, setErrors] = useState<FormErrors>({});
+
+<Form errors={errors} onFormSubmit={async (values) => setErrors(await save(values))}>
+  <Input name="title" label="Rule title" required />
+
+  {/* Multiple: chosen values are chips; Backspace removes the last, arrows walk the chips. */}
+  <Field name="roles" label="Required roles">
+    <Combobox multiple options={roles} defaultValue={["admin"]} />
+  </Field>
+
+  {/* Groups: an option outside every group is listed where it stands. */}
+  <Field name="channel" label="Channel">
+    <Select options={[
+      { label: "#rules", value: "rules" },
+      { label: "Giveaways", options: [{ label: "#giveaway", value: "giveaway" }] },
+    ]} />
+  </Field>
+
+  {/* Units are presentation and hidden from assistive technology: name them in the label. */}
+  <Field name="price" label="Price per ticket (€)">
+    <NumberField prefix="€" format={{ minimumFractionDigits: 2 }} defaultValue={0.1} step={0.05} />
+  </Field>
+
+  <CheckboxGroup
+    name="casinos" label="Casinos" appearance="surface" required
+    options={[{ value: "aurora", label: "Aurora", description: "aurora.example, aurora-play.example" }]}
+  />
+
+  {/* Creatable: "Add …" for typed text, one entry per pasted line, duplicates reported. */}
+  <Field name="games" label="Allowed games" description="Paste one title per line.">
+    <Combobox multiple creatable options={[]} />
+  </Field>
+</Form>
+```
+
+`Input`, `Textarea`, `RadioGroup` and `CheckboxGroup` carry their own `Field`, so `name` is
+enough. Put `Select`, `Combobox`, `NumberField`, `Checkbox`, `Switch` and `Slider` inside a
+`Field` with the `name`, or the form cannot report their errors. A multiple `Combobox` reports
+`string[]`; a created entry's value is its own text. `CheckboxGroup required` means at least one
+choice. Option `description` names nothing: the label is the accessible name and the description
+is announced as its description.
+
 ## Themes and direction
 
 With no root `data-sherick-theme`, the library follows `prefers-color-scheme`. Set

package/dist/cjs/components/CheckboxGroup.cjs

@@ -0,0 +1,41 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var checkbox = require('@base-ui/react/checkbox');
+var checkboxGroup = require('@base-ui/react/checkbox-group');
+var field = require('@base-ui/react/field');
+var lucideReact = require('lucide-react');
+var React = require('react');
+var utils = require('../libs/utils.cjs');
+var ui_common = require('./ui.common.cjs');
+var ui_motion = require('./ui.motion.cjs');
+var choiceRow = require('./choice-row.cjs');
+
+/**
+ * Any number of choices out of a list — the options-API sibling of `RadioGroup`, with the same rows,
+ * the same opt-in `surface` row and the same labelled column. Base UI owns the value, the group
+ * semantics and the form participation; Sherick UI owns the rows and the marks.
+ */
+const CheckboxGroup = React.forwardRef(({ options, appearance = "default", label, description, error, value, defaultValue, onValueChange, name, required, requiredMessage = "Choose at least one option.", disabled, readOnly, className, ...groupProps }, ref) => {
+    const idBase = React.useId();
+    return (
+    // The group is the field's one control, so the field takes its name and its validation; each
+    // option is scoped to its own `Field.Item`, which labels and describes that checkbox alone.
+    jsxRuntime.jsxs(field.Field.Root, { className: utils.cn(ui_common.fieldLayout, className), name: name, disabled: disabled, invalid: error ? true : undefined, validate: required
+            ? (current) => (Array.isArray(current) && current.length > 0 ? null : requiredMessage)
+            : undefined, children: [label && (jsxRuntime.jsxs(field.Field.Label, { className: utils.cn("mb-2 text-sm font-medium", ui_common.text.high), children: [label, required && (jsxRuntime.jsx("span", { className: utils.cn("ms-1 text-sherick-danger"), "aria-hidden": "true", children: "*" }))] })), jsxRuntime.jsx(checkboxGroup.CheckboxGroup, { ...groupProps, ref: ref, value: value, defaultValue: defaultValue, onValueChange: onValueChange, disabled: disabled, className: utils.cn("flex flex-col", appearance === "surface" && "gap-2"), children: options.map((option, index) => {
+                    const labelId = `${idBase}-option-${index}`;
+                    return (jsxRuntime.jsx(field.Field.Item, { ...(appearance === "surface" && readOnly ? { "data-readonly": "" } : {}), className: utils.cn(...choiceRow.choiceItemClasses(appearance)), children: jsxRuntime.jsx(field.Field.Label, { className: utils.cn(...choiceRow.choiceLabelClasses(appearance)), children: jsxRuntime.jsxs("span", { className: utils.cn(choiceRow.choiceLineClassName), children: [jsxRuntime.jsx(checkbox.Checkbox.Root, { value: option.value, disabled: option.disabled, readOnly: readOnly, ...(option.description != null ? { "aria-labelledby": labelId } : {}), className: utils.cn(
+                                        // The control takes the mark's corner so a forced-colors outline follows the
+                                        // box rather than squaring it off. The whole row is its label and its target.
+                                        "group relative my-0.5 flex size-5 shrink-0 items-center justify-center outline-none", ui_common.shape.mark), children: jsxRuntime.jsx("span", { "aria-hidden": "true", className: utils.cn("flex size-5 items-center justify-center", ui_common.shape.mark, ui_common.selectable.markSurface, ui_common.selectable.mark, ui_common.selectable.selected, ui_common.stateLayer.mark, appearance === "default" && ui_common.groupFocusRing), children: jsxRuntime.jsx(checkbox.Checkbox.Indicator, { className: utils.cn("relative flex items-center justify-center", ui_motion.motionArrive), children: jsxRuntime.jsx(lucideReact.Check, { className: utils.cn("size-3.5"), strokeWidth: 3 }) }) }) }), jsxRuntime.jsx(choiceRow.ChoiceCopy, { appearance: appearance, label: option.label, description: option.description, labelId: labelId })] }) }) }, option.value));
+                }) }), description && (jsxRuntime.jsx(field.Field.Description, { className: utils.cn(ui_common.fieldMessage.description), children: description })), jsxRuntime.jsx(field.Field.Error, { match: error ? true : undefined, className: utils.cn(ui_common.fieldMessage.error), ...(error ? { children: error } : {}) })] }));
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+
+exports.CheckboxGroup = CheckboxGroup;
+exports.default = CheckboxGroup;
+//# sourceMappingURL=CheckboxGroup.cjs.map

package/dist/cjs/components/CheckboxGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.cjs","sources":["../../../src/components/CheckboxGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { Checkbox as BaseCheckbox } from \"@base-ui/react/checkbox\";\nimport { CheckboxGroup as BaseCheckboxGroup } from \"@base-ui/react/checkbox-group\";\nimport { Field } from \"@base-ui/react/field\";\nimport { Check } from \"lucide-react\";\nimport React, { forwardRef, useId, type ComponentProps, type ReactNode } from \"react\";\nimport { cn } from \"@/libs/utils\";\nimport {\n  fieldLayout,\n  fieldMessage,\n  groupFocusRing,\n  selectable,\n  shape,\n  stateLayer,\n  text,\n} from \"./ui.common\";\nimport { motionArrive } from \"./ui.motion\";\nimport {\n  ChoiceCopy,\n  choiceItemClasses,\n  choiceLabelClasses,\n  choiceLineClassName,\n  type ChoiceAppearance,\n} from \"./choice-row\";\n\nexport interface CheckboxGroupOption {\n  value: string;\n  label: ReactNode;\n  /** Supporting copy beneath the label, such as the domains a casino answers on. */\n  description?: ReactNode;\n  disabled?: boolean;\n}\n\ntype CheckboxGroupChangeDetails = Parameters<NonNullable<BaseCheckboxGroup.Props[\"onValueChange\"]>>[1];\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentProps<\"div\">, \"onChange\" | \"defaultValue\" | \"children\"> {\n  options: CheckboxGroupOption[];\n  /** Gives each choice its own selectable surface. The default keeps the compact, unfilled rows. */\n  appearance?: ChoiceAppearance;\n  /** The group's own label. Base names the group from it. */\n  label?: ReactNode;\n  /** Supporting copy beneath the group. */\n  description?: ReactNode;\n  /**\n   * The message shown while the group is invalid. Its presence is what makes the group invalid; omit\n   * it and the group shows what Base reports, including an error a `Form` returns for its `name`.\n   */\n  error?: ReactNode;\n  /** The ticked options' values. */\n  value?: string[];\n  defaultValue?: string[];\n  /** Base's own change callback, event details included. */\n  onValueChange?: (value: string[], eventDetails: CheckboxGroupChangeDetails) => void;\n  /** Identifies the group when a form is submitted: one entry per ticked option. */\n  name?: string;\n  /**\n   * At least one option must be ticked. It marks the label and is checked when a `Form` validates;\n   * the message is `requiredMessage`.\n   */\n  required?: boolean;\n  /** The message a required group shows when nothing is ticked. */\n  requiredMessage?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  /** Styles the labelled group. */\n  className?: string;\n}\n\n/**\n * Any number of choices out of a list — the options-API sibling of `RadioGroup`, with the same rows,\n * the same opt-in `surface` row and the same labelled column. Base UI owns the value, the group\n * semantics and the form participation; Sherick UI owns the rows and the marks.\n */\nexport const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(\n  (\n    {\n      options,\n      appearance = \"default\",\n      label,\n      description,\n      error,\n      value,\n      defaultValue,\n      onValueChange,\n      name,\n      required,\n      requiredMessage = \"Choose at least one option.\",\n      disabled,\n      readOnly,\n      className,\n      ...groupProps\n    },\n    ref\n  ) => {\n    const idBase = useId();\n\n    return (\n      // The group is the field's one control, so the field takes its name and its validation; each\n      // option is scoped to its own `Field.Item`, which labels and describes that checkbox alone.\n      <Field.Root\n        className={cn(fieldLayout, className)}\n        name={name}\n        disabled={disabled}\n        invalid={error ? true : undefined}\n        validate={\n          required\n            ? (current) => (Array.isArray(current) && current.length > 0 ? null : requiredMessage)\n            : undefined\n        }\n      >\n        {label && (\n          <Field.Label className={cn(\"mb-2 text-sm font-medium\", text.high)}>\n            {label}\n            {required && (\n              <span className={cn(\"ms-1 text-sherick-danger\")} aria-hidden=\"true\">\n                *\n              </span>\n            )}\n          </Field.Label>\n        )}\n        <BaseCheckboxGroup\n          {...groupProps}\n          ref={ref}\n          value={value}\n          defaultValue={defaultValue}\n          onValueChange={onValueChange}\n          disabled={disabled}\n          className={cn(\"flex flex-col\", appearance === \"surface\" && \"gap-2\")}\n        >\n          {options.map((option, index) => {\n            const labelId = `${idBase}-option-${index}`;\n            return (\n              <Field.Item\n                key={option.value}\n                {...(appearance === \"surface\" && readOnly ? { \"data-readonly\": \"\" } : {})}\n                className={cn(...choiceItemClasses(appearance))}\n              >\n                <Field.Label className={cn(...choiceLabelClasses(appearance))}>\n                  <span className={cn(choiceLineClassName)}>\n                    <BaseCheckbox.Root\n                      value={option.value}\n                      disabled={option.disabled}\n                      readOnly={readOnly}\n                      {...(option.description != null ? { \"aria-labelledby\": labelId } : {})}\n                      className={cn(\n                        // The control takes the mark's corner so a forced-colors outline follows the\n                        // box rather than squaring it off. The whole row is its label and its target.\n                        \"group relative my-0.5 flex size-5 shrink-0 items-center justify-center outline-none\",\n                        shape.mark\n                      )}\n                    >\n                      {/* An empty box is identified by its rim; a ticked one fills edge to edge. */}\n                      <span\n                        aria-hidden=\"true\"\n                        className={cn(\n                          \"flex size-5 items-center justify-center\",\n                          shape.mark,\n                          selectable.markSurface,\n                          selectable.mark,\n                          selectable.selected,\n                          stateLayer.mark,\n                          appearance === \"default\" && groupFocusRing\n                        )}\n                      >\n                        {/* Positioned so the tick paints above the box's hover layer. */}\n                        <BaseCheckbox.Indicator className={cn(\"relative flex items-center justify-center\", motionArrive)}>\n                          {/* A heavier stroke than the icon default: at 14px the default draws a hairline tick. */}\n                          <Check className={cn(\"size-3.5\")} strokeWidth={3} />\n                        </BaseCheckbox.Indicator>\n                      </span>\n                    </BaseCheckbox.Root>\n                    <ChoiceCopy\n                      appearance={appearance}\n                      label={option.label}\n                      description={option.description}\n                      labelId={labelId}\n                    />\n                  </span>\n                </Field.Label>\n              </Field.Item>\n            );\n          })}\n        </BaseCheckboxGroup>\n        {description && (\n          <Field.Description className={cn(fieldMessage.description)}>{description}</Field.Description>\n        )}\n        {/* Mounted whether or not a message was passed: without `match` this part renders what Base\n            reports — a required group left empty, or the error a `Form` returns for this name. */}\n        <Field.Error\n          match={error ? true : undefined}\n          className={cn(fieldMessage.error)}\n          {...(error ? { children: error } : {})}\n        />\n      </Field.Root>\n    );\n  }\n);\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport default CheckboxGroup;\n"],"names":["forwardRef","useId","_jsxs","Field","cn","fieldLayout","text","_jsx","BaseCheckboxGroup","choiceItemClasses","choiceLabelClasses","choiceLineClassName","BaseCheckbox","shape","selectable","stateLayer","groupFocusRing","motionArrive","Check","ChoiceCopy","fieldMessage"],"mappings":"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"}

package/dist/cjs/components/Combobox.cjs

@@ -10,7 +10,10 @@ var lucideReact = require('lucide-react');
 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');
 
+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
    focus treatment, and they are one cluster at the field's trailing edge rather than two targets
    beside it, so they take `density.part` instead of the standalone target floor.
@@ -20,32 +23,205 @@ var ui_motion = require('./ui.motion.cjs');
    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.quiet} ${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.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`;
+/* 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
+   separate values. It is shorter than a standalone chip because it
+   rides a text field's line rather than standing in a row of its own: 28px leaves the field's 48px
+   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);
+/* 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);
 /**
- * A text field that filters a list of options and selects one of them. It is the searchable
- * sibling of `Select`: the same option shape, the same value contract and the same box, with an
- * input instead of a trigger. Base UI owns filtering, the listbox semantics, keyboard
- * interaction, the anchored popup and the hidden form input; Sherick UI owns the field, the row
- * treatment and the tone of the selected option.
+ * 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,
+ * with an input instead of a trigger. Base UI owns filtering, the listbox semantics, keyboard
+ * interaction, chip navigation and removal, the anchored popup and the hidden form inputs; Sherick UI
+ * owns the field, the row treatment, the chips and the tone of the selected option.
  *
  * Filtering is Base's and it is local — an application that needs remote results owns the
  * fetching, the debounce and the loading state around this control.
  */
-const Combobox = React.forwardRef(({ options, value, defaultValue, onValueChange, placeholder = "Select an option", emptyMessage = "No results found.", className, disabled, readOnly, filter, ...rootProps }, ref) => {
-    const selectedOption = (next) => { var _a; return next == null ? null : (_a = options.find((option) => option.value === next)) !== null && _a !== void 0 ? _a : null; };
-    return (jsxRuntime.jsxs(combobox.Combobox.Root, { ...rootProps, items: options, value: value === undefined ? undefined : selectedOption(value), defaultValue: selectedOption(defaultValue), 
+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 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. */
+    const toOption = (next) => { var _a; return (_a = optionByValue.get(next)) !== null && _a !== void 0 ? _a : { label: next, value: next }; };
+    /* A multiple combobox reads its current value to append a pasted batch, and a creatable one reads
+       its query to offer the "Add" row, so both are mirrored here when the application leaves them
+       uncontrolled. Base still owns every change; this only remembers what it last reported. */
+    const [uncontrolledValues, setUncontrolledValues] = React.useState(() => { var _a; return multiple ? ((_a = defaultValue) !== null && _a !== void 0 ? _a : []) : []; });
+    const [uncontrolledQuery, setUncontrolledQuery] = React.useState(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
+    const [notice, setNotice] = React.useState({ visible: "", announced: "" });
+    const values = multiple ? ((_a = value) !== null && _a !== void 0 ? _a : uncontrolledValues) : [];
+    const query = creatable ? (inputValue !== null && inputValue !== void 0 ? inputValue : uncontrolledQuery) : inputValue;
+    const trimmedQuery = (query !== null && query !== void 0 ? query : "").trim();
+    const isChosen = (text) => values.some((chosen) => sameText(chosen, text) || sameText(toOption(chosen).label, text));
+    /* The "Add" row leads the list, so `Enter` adds exactly what was typed and the arrow keys still
+       reach the suggestions beneath it. It is offered only while the text names nothing that exists. */
+    const createItem = creatable && trimmedQuery !== "" && !isChosen(trimmedQuery) && !flatOptions.some((option) => sameText(option.label, trimmedQuery))
+        ? { create: true, label: trimmedQuery, value: trimmedQuery }
+        : null;
+    const grouped = optionGroups.hasOptionGroups(options);
+    const sections = optionGroups.toOptionSections(options);
+    const items = grouped
+        ? [...(createItem ? [{ key: "create", items: [createItem] }] : []), ...sections]
+        : [...(createItem ? [createItem] : []), ...flatOptions];
+    /* Reports a change and, unless the application refused it through Base's `cancel()`, applies it.
+       Returns whether it was applied. */
+    const commitValues = (next, eventDetails) => {
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next, eventDetails);
+        if ("isCanceled" in eventDetails && eventDetails.isCanceled)
+            return false;
+        if (value === undefined)
+            setUncontrolledValues(next);
+        return true;
+    };
+    /* Pasting several lines adds one entry per line. An entry that names an option takes that option;
+       one that is already chosen — or repeats an earlier line — is skipped and reported, so a long list
+       pasted twice cannot double up. A single line is ordinary typing and is left to the input. */
+    const handlePaste = (event) => {
+        if (!creatable || readOnly || disabled)
+            return;
+        const pasted = event.clipboardData.getData("text");
+        if (!/[\r\n]/.test(pasted))
+            return;
+        event.preventDefault();
+        const lines = pasted.split(/\r?\n|\r/).map((line) => line.trim()).filter(Boolean);
+        const next = [...values];
+        const added = [];
+        const skipped = [];
+        for (const line of lines) {
+            const match = flatOptions.find((option) => sameText(option.label, line) || sameText(option.value, line));
+            const entry = match ? match.value : line;
+            const duplicate = next.some((chosen) => sameText(chosen, entry) || sameText(toOption(chosen).label, line));
+            if (duplicate || (match === null || match === void 0 ? void 0 : match.disabled))
+                skipped.push(line);
+            else {
+                next.push(entry);
+                added.push(line);
+            }
+        }
+        if (added.length > 0)
+            commitValues(next, { reason: "input-paste", event: event.nativeEvent });
+        flagNotice(added.length, skipped);
+    };
+    const flagNotice = (addedCount, skipped) => {
+        const visible = skipped.length === 0
+            ? ""
+            : `Skipped ${skipped.length === 1 ? "1 duplicate" : `${skipped.length} duplicates`}: ${skipped.join(", ")}.`;
+        const added = addedCount === 0 ? "" : `Added ${addedCount === 1 ? "1 entry" : `${addedCount} entries`}.`;
+        setNotice({ visible, announced: [added, visible].filter(Boolean).join(" ") });
+    };
+    const handleInputValueChange = (next, eventDetails) => {
+        onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(next, eventDetails);
+        if (eventDetails.isCanceled)
+            return;
+        if (inputValue === undefined)
+            setUncontrolledQuery(next);
+        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(lucideReact.Plus, { "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(lucideReact.Check, { "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 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. */
+    const selectionProps = (multiple
+        ? {
+            multiple: true,
+            value: selectedOptions,
+            onValueChange: (next, eventDetails) => {
+                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));
+                /* An option whose text names an entry already chosen — a created "book of dead" before the
+                   catalog's "Book of Dead" — is a duplicate under another value, so it is refused too. */
+                if (creatable &&
+                    added.length === 1 &&
+                    !isCreateItem(added[0]) &&
+                    isChosen(added[0].label)) {
+                    eventDetails.cancel();
+                    flagNotice(0, [added[0].label]);
+                    return;
+                }
+                /* With a query typed, `Enter` on an option that is already chosen would quietly remove
+                   it. Naming an entry that exists is a duplicate, not a removal, so it is refused and
+                   reported; the chip's own control and Backspace still remove. */
+                if (creatable &&
+                    eventDetails.reason === "item-press" &&
+                    eventDetails.event instanceof KeyboardEvent &&
+                    removed.length === 1 &&
+                    trimmedQuery !== "" &&
+                    sameText(toOption(removed[0]).label, trimmedQuery)) {
+                    eventDetails.cancel();
+                    flagNotice(0, [trimmedQuery]);
+                    return;
+                }
+                const applied = commitValues(next.map((option) => option.value), eventDetails);
+                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. */
+                    onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange("", eventDetails);
+                    if (inputValue === undefined)
+                        setUncontrolledQuery("");
+                    flagNotice(1, []);
+                }
+            },
+        }
+        : {
+            value: value === undefined ? undefined : value == null ? null : ((_b = optionByValue.get(value)) !== null && _b !== void 0 ? _b : null),
+            defaultValue: defaultValue == null ? null : ((_c = optionByValue.get(defaultValue)) !== null && _c !== void 0 ? _c : null),
+            onValueChange: (next, eventDetails) => { var _a; return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_a = next === null || next === void 0 ? void 0 : next.value) !== null && _a !== void 0 ? _a : null, eventDetails); },
+        });
+    return (jsxRuntime.jsxs(combobox.Combobox.Root, { ...rootProps, items: items, ...selectionProps, 
         // The public value is the option's own `value`, so two equal options are equal even when a
         // caller rebuilds its options array every render.
-        isItemEqualToValue: (itemValue, currentValue) => (itemValue === null || itemValue === void 0 ? void 0 : itemValue.value) === (currentValue === null || currentValue === void 0 ? void 0 : currentValue.value), onValueChange: (next, eventDetails) => { var _a; return onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange((_a = next === null || next === void 0 ? void 0 : next.value) !== null && _a !== void 0 ? _a : null, eventDetails); }, filter: filter ? (item, query) => filter(item, query) : filter, disabled: disabled, readOnly: readOnly, children: [jsxRuntime.jsxs(combobox.Combobox.InputGroup, { className: ({ open, disabled: fieldDisabled }) => utils.cn(
+        isItemEqualToValue: (itemValue, currentValue) => (itemValue === null || itemValue === void 0 ? void 0 : itemValue.value) === (currentValue === null || currentValue === void 0 ? void 0 : currentValue.value), filter: filter
+            ? (item, search) => isCreateItem(item) || filter(item, search)
+            : filter, autoHighlight: autoHighlight !== null && autoHighlight !== void 0 ? autoHighlight : (creatable ? true : undefined), ...(creatable ? { inputValue: query } : { inputValue, defaultInputValue }), onInputValueChange: handleInputValueChange, onOpenChange: (open, eventDetails) => {
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open, eventDetails);
+            /* Several choices are made from one open list: choosing one keeps the list where it is, so
+               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(
                 /* 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 — 12px of padding plus the 8px each `density.part`
+                   20px a mark's box then sits from the edge — 14px of padding plus the 6px each `density.part`
                    holds around its 20px glyph — is the same 20px the input's own leading padding uses, so the
-                   field reads with one inset at both ends. */
-                "group/field flex min-w-0 w-full items-center ps-5 pe-3", 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: [jsxRuntime.jsx(combobox.Combobox.Input, { ref: ref, placeholder: placeholder, className: utils.cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-sherick-ink-muted disabled:cursor-not-allowed") }), jsxRuntime.jsx(combobox.Combobox.Clear, { "aria-label": "Clear selection", 
+                   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 ? (
+                    /* 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(lucideReact.X, { "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", 
                         // 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(lucideReact.X, { "aria-hidden": "true" }) }), jsxRuntime.jsx(combobox.Combobox.Trigger, { "aria-label": "Show options", className: utils.cn(partClassName, "group"), children: jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: utils.cn("size-5", ui_motion.motionOrient, "group-data-[popup-open]:rotate-180") }) })] }), 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: [jsxRuntime.jsx(combobox.Combobox.Empty, { children: jsxRuntime.jsx("div", { className: utils.cn("px-4 py-3 text-sm", ui_common.text.medium), children: emptyMessage }) }), jsxRuntime.jsx(combobox.Combobox.List, { className: utils.cn("space-y-1"), children: (option) => (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(lucideReact.Check, { "aria-hidden": "true", className: utils.cn("size-4", ui_motion.motionArrive, ui_common.tone.text.primary) }) })] }, option.value)) })] }) }) })] }));
+                        disabled: disabled || readOnly, className: utils.cn(partClassName), children: jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" }) }), jsxRuntime.jsx(combobox.Combobox.Trigger, { "aria-label": "Show options", className: utils.cn(partClassName, "group"), children: jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className: utils.cn("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) : (
+                // 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
+                                    ? (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. */
+                                    jsxRuntime.jsxs(combobox.Combobox.Group, { items: section.items, className: utils.cn("space-y-1"), children: [section.label !== undefined && (jsxRuntime.jsx(combobox.Combobox.GroupLabel, { className: utils.cn(ui_common.list.groupLabel), children: section.label })), jsxRuntime.jsx(combobox.Combobox.Collection, { children: renderItem })] }, section.key))
+                                    : renderItem })] }) }) })] }));
 });
 Combobox.displayName = "Combobox";