@keboola/design 11.4.0 → 11.5.0

package/dist/{ColorInput-Bxj-1eLT.js.map → ColorInput-BZV-u_94.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorInput-Bxj-1eLT.js","names":[],"sources":["../src/blocks/ColorInput/utils.ts","../src/blocks/ColorInput/ColorPicker.tsx","../src/blocks/ColorInput/ColorInput.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nconst HEX_CHARSET = /^[0-9a-fA-F]+$/;\n// `#` + 3, 4, 6, or 8 hex digits — every length CSS accepts as a hex color.\nconst COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\n// Longest hex body CSS accepts (`#rrggbbaa` without the hash).\nconst MAX_HEX_BODY_LENGTH = 8;\n// Native <input type=\"color\"> default when fed anything unparseable.\nconst PICKER_FALLBACK = '#000000';\n\nconst extractHexBody = (value: unknown): string | null => {\n  if (typeof value !== 'string') return null;\n  const trimmed = value.trim();\n  if (trimmed === '') return null;\n  return trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;\n};\n\nexport const isCompleteHexColor = (value: string): boolean => COMPLETE_HEX_PATTERN.test(value);\n\n// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker\nexport const showPicker = (input: HTMLInputElement) => {\n  const isShowPickerSupported = 'showPicker' in HTMLInputElement.prototype;\n  isShowPickerSupported ? input.showPicker() : input.click();\n};\n\n/**\n * Coerces free-form text into a partial hex color for the visible text\n * input. Allows up to 8 hex digits to support `#rrggbbaa` (RGBA / alpha).\n *\n * Behaviour:\n * - empty / null / undefined / non-string → `''`\n * - trims surrounding whitespace\n * - prepends `#` when the user types raw hex without it\n * - keeps only the leading run of valid hex digits, dropping the rest\n * - caps total length at `# + 8` hex digits\n * - returns `''` when no valid hex digits remain (e.g. bare `#`, `zz`) so\n *   the input doesn't sit on a lonely `#`\n *\n * Note: the result may be a *prefix* (e.g. `#a`, `#ab`) that is not yet a\n * valid CSS color — gate any rendering on `isCompleteHexColor`.\n */\nexport const coerceHexInputValue = (value?: string | null): string => {\n  const body = extractHexBody(value);\n  if (body === null) return '';\n  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];\n  if (!validBody) return '';\n  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;\n};\n\n/**\n * Coerces any value into the strict lowercase `#rrggbb` form required by the\n * native `<input type=\"color\">`. Anything the picker can't render is\n * collapsed to `#000000`.\n *\n * - 3-digit shorthand (`#abc`) → expanded to 6 digits (`#aabbcc`)\n * - 4/8-digit RGBA → alpha channel is dropped\n * - invalid characters, wrong length, or non-string types → `#000000`\n *\n * The native picker silently lowercases its value; we lowercase here too so\n * controlled consumers see the same string round-trip.\n */\nexport const coerceColorPickerValue = (value: ComponentProps<'input'>['value'] | null) => {\n  const body = extractHexBody(value);\n  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;\n\n  if (body.length === 3 || body.length === 4) {\n    const [r, g, b] = body;\n    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();\n  }\n  if (body.length === 6 || body.length === 8) {\n    return `#${body.slice(0, 6).toLowerCase()}`;\n  }\n  return PICKER_FALLBACK;\n};\n","import { type ComponentProps, type ComponentRef, useRef } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { Pipette } from '../../icons';\n\nimport { coerceColorPickerValue, showPicker } from './utils';\n\ntype Props = Omit<ComponentProps<'input'>, 'type'>;\n\nexport const ColorPicker = ({ value, disabled, readOnly, ...props }: Props) => {\n  const pickerRef = useRef<ComponentRef<'input'>>(null);\n\n  const handleOpenPicker = () => {\n    if (!pickerRef.current) return;\n    showPicker(pickerRef.current);\n  };\n\n  return (\n    <div className=\"tw:relative\">\n      <input\n        {...props}\n        ref={pickerRef}\n        type=\"color\"\n        value={coerceColorPickerValue(value)}\n        tabIndex={-1}\n        aria-hidden\n        className=\"tw:pointer-events-none tw:absolute tw:left-0 tw:top-full tw:size-0 tw:opacity-0\"\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n      <InputGroup.Button\n        onMouseDown={(event) => event.preventDefault()}\n        disabled={disabled || readOnly}\n        onClick={handleOpenPicker}\n        aria-label=\"Pick color\"\n      >\n        <Pipette className=\"tw:size-4\" />\n      </InputGroup.Button>\n    </div>\n  );\n};\n","import { useRef } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { X } from '../../icons';\nimport { cn, createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { ColorPicker } from './ColorPicker';\nimport { coerceHexInputValue, isCompleteHexColor } from './utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    onValueChange?: (value: string) => void;\n    onValueBlur?: (value: string) => void;\n    allowClear?: boolean;\n  };\n\nexport const ColorInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  defaultValue,\n  allowClear = false,\n\n  // input props\n  disabled,\n  readOnly,\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [value, setValue] = useControllableState<string>({\n    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.\n    prop: valueProp === null ? '' : valueProp,\n    defaultProp: defaultValue ?? '',\n    onChange: onValueChange,\n  });\n\n  const isControlled = valueProp !== undefined;\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n  const swatchColor = coerceHexInputValue(value);\n  const isValidSwatch = isCompleteHexColor(swatchColor);\n\n  // Preserve raw text while the user is typing — sanitise on blur.\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    const newValue = event.target.value;\n    const sanitizedNewValue = coerceHexInputValue(newValue);\n\n    if (sanitizedNewValue !== newValue) {\n      // In controlled mode, let the parent decide whether to apply the\n      // sanitised value via `onValueChange` — don't fight its `value` prop.\n      if (!isControlled) event.target.value = sanitizedNewValue;\n      setValue(sanitizedNewValue);\n    }\n\n    onValueBlur?.(sanitizedNewValue);\n    onBlur?.(event);\n  };\n\n  const handlePickerChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(coerceHexInputValue(event.target.value));\n    onChange?.(event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setValue('');\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Addon\n        align=\"inline-start\"\n        className={cn(\n          { 'tw:-ml-7 tw:opacity-0': !value },\n          'tw:transition-[opacity,margin]',\n          'tw:ease-linear',\n          'tw:duration-200',\n        )}\n      >\n        <div\n          style={isValidSwatch ? { background: swatchColor } : undefined}\n          className={cn(\n            'tw:size-5',\n            'tw:shrink-0',\n            'tw:rounded-sm',\n            'tw:border',\n            'tw:border-solid',\n            'tw:border-neutral-300',\n            {\n              'tw:bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]':\n                !isValidSwatch,\n            },\n          )}\n        />\n      </InputGroup.Addon>\n\n      <InputGroup.Input\n        {...restInputProps}\n        type=\"text\"\n        ref={mergeRefs(ref ?? null, inputRef)}\n        value={value}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      <InputGroup.Addon align=\"inline-end\">\n        {canClear && (\n          <InputGroup.Button\n            // prevents input focus stealing\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            aria-label=\"Clear color\"\n          >\n            <X className=\"tw:size-4\" />\n          </InputGroup.Button>\n        )}\n        <ColorPicker\n          disabled={disabled}\n          readOnly={readOnly}\n          value={value}\n          onChange={handlePickerChange}\n        />\n      </InputGroup.Addon>\n    </InputGroup>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ColorInput-BZV-u_94.js","names":[],"sources":["../src/blocks/ColorInput/utils.ts","../src/blocks/ColorInput/ColorPicker.tsx","../src/blocks/ColorInput/ColorInput.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nconst HEX_CHARSET = /^[0-9a-fA-F]+$/;\n// `#` + 3, 4, 6, or 8 hex digits — every length CSS accepts as a hex color.\nconst COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\n// Longest hex body CSS accepts (`#rrggbbaa` without the hash).\nconst MAX_HEX_BODY_LENGTH = 8;\n// Native <input type=\"color\"> default when fed anything unparseable.\nconst PICKER_FALLBACK = '#000000';\n\nconst extractHexBody = (value: unknown): string | null => {\n  if (typeof value !== 'string') return null;\n  const trimmed = value.trim();\n  if (trimmed === '') return null;\n  return trimmed.startsWith('#') ? trimmed.slice(1) : trimmed;\n};\n\nexport const isCompleteHexColor = (value: string): boolean => COMPLETE_HEX_PATTERN.test(value);\n\n// @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker\nexport const showPicker = (input: HTMLInputElement) => {\n  const isShowPickerSupported = 'showPicker' in HTMLInputElement.prototype;\n  isShowPickerSupported ? input.showPicker() : input.click();\n};\n\n/**\n * Coerces free-form text into a partial hex color for the visible text\n * input. Allows up to 8 hex digits to support `#rrggbbaa` (RGBA / alpha).\n *\n * Behaviour:\n * - empty / null / undefined / non-string → `''`\n * - trims surrounding whitespace\n * - prepends `#` when the user types raw hex without it\n * - keeps only the leading run of valid hex digits, dropping the rest\n * - caps total length at `# + 8` hex digits\n * - returns `''` when no valid hex digits remain (e.g. bare `#`, `zz`) so\n *   the input doesn't sit on a lonely `#`\n *\n * Note: the result may be a *prefix* (e.g. `#a`, `#ab`) that is not yet a\n * valid CSS color — gate any rendering on `isCompleteHexColor`.\n */\nexport const coerceHexInputValue = (value?: string | null): string => {\n  const body = extractHexBody(value);\n  if (body === null) return '';\n  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];\n  if (!validBody) return '';\n  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;\n};\n\n/**\n * Coerces any value into the strict lowercase `#rrggbb` form required by the\n * native `<input type=\"color\">`. Anything the picker can't render is\n * collapsed to `#000000`.\n *\n * - 3-digit shorthand (`#abc`) → expanded to 6 digits (`#aabbcc`)\n * - 4/8-digit RGBA → alpha channel is dropped\n * - invalid characters, wrong length, or non-string types → `#000000`\n *\n * The native picker silently lowercases its value; we lowercase here too so\n * controlled consumers see the same string round-trip.\n */\nexport const coerceColorPickerValue = (value: ComponentProps<'input'>['value'] | null) => {\n  const body = extractHexBody(value);\n  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;\n\n  if (body.length === 3 || body.length === 4) {\n    const [r, g, b] = body;\n    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();\n  }\n  if (body.length === 6 || body.length === 8) {\n    return `#${body.slice(0, 6).toLowerCase()}`;\n  }\n  return PICKER_FALLBACK;\n};\n","import { type ComponentProps, type ComponentRef, useRef } from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { Pipette } from '../../icons';\n\nimport { coerceColorPickerValue, showPicker } from './utils';\n\ntype Props = Omit<ComponentProps<'input'>, 'type'>;\n\nexport const ColorPicker = ({ value, disabled, readOnly, ...props }: Props) => {\n  const pickerRef = useRef<ComponentRef<'input'>>(null);\n\n  const handleOpenPicker = () => {\n    if (!pickerRef.current) return;\n    showPicker(pickerRef.current);\n  };\n\n  return (\n    <div className=\"tw:relative\">\n      <input\n        {...props}\n        ref={pickerRef}\n        type=\"color\"\n        value={coerceColorPickerValue(value)}\n        tabIndex={-1}\n        aria-hidden\n        className=\"tw:pointer-events-none tw:absolute tw:left-0 tw:top-full tw:size-0 tw:opacity-0\"\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n      <InputGroup.Button\n        onMouseDown={(event) => event.preventDefault()}\n        disabled={disabled || readOnly}\n        onClick={handleOpenPicker}\n        aria-label=\"Pick color\"\n      >\n        <Pipette className=\"tw:size-4\" />\n      </InputGroup.Button>\n    </div>\n  );\n};\n","import { useRef } from 'react';\nimport type {\n  ChangeEventHandler,\n  ComponentProps,\n  ComponentRef,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\n\nimport { InputGroup } from '../../components/InputGroup';\nimport { useControllableState } from '../../hooks/useControllableState';\nimport { X } from '../../icons';\nimport { cn, createChangeInputEvent, mergeRefs } from '../../utils';\n\nimport { ColorPicker } from './ColorPicker';\nimport { coerceHexInputValue, isCompleteHexColor } from './utils';\n\ntype InputGroupProps = Pick<\n  ComponentProps<typeof InputGroup>,\n  'variant' | 'focusVariant' | 'state' | 'sizing'\n>;\n\ntype InputGroupInputProps = Omit<ComponentProps<typeof InputGroup.Input>, 'value' | 'defaultValue'>;\n\ntype Props = InputGroupProps &\n  InputGroupInputProps & {\n    value?: string | null;\n    defaultValue?: string | null;\n    onValueChange?: (value: string) => void;\n    onValueBlur?: (value: string) => void;\n    allowClear?: boolean;\n  };\n\nexport const ColorInput = ({\n  ref,\n\n  // group props\n  state,\n  variant,\n  focusVariant,\n  sizing,\n  className,\n\n  // own props\n  value: valueProp,\n  onValueChange,\n  onValueBlur,\n  onChange,\n  onBlur,\n  defaultValue,\n  allowClear = false,\n\n  // input props\n  disabled,\n  readOnly,\n  ...restInputProps\n}: Props) => {\n  const inputRef = useRef<ComponentRef<'input'>>(null);\n\n  const [value, setValue] = useControllableState<string>({\n    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.\n    prop: valueProp === null ? '' : valueProp,\n    defaultProp: defaultValue ?? '',\n    onChange: onValueChange,\n  });\n\n  const isControlled = valueProp !== undefined;\n\n  const canClear = allowClear && !!value && !disabled && !readOnly;\n  const swatchColor = coerceHexInputValue(value);\n  const isValidSwatch = isCompleteHexColor(swatchColor);\n\n  // Preserve raw text while the user is typing — sanitise on blur.\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLInputElement> = (event) => {\n    const newValue = event.target.value;\n    const sanitizedNewValue = coerceHexInputValue(newValue);\n\n    if (sanitizedNewValue !== newValue) {\n      // In controlled mode, let the parent decide whether to apply the\n      // sanitised value via `onValueChange` — don't fight its `value` prop.\n      if (!isControlled) event.target.value = sanitizedNewValue;\n      setValue(sanitizedNewValue);\n    }\n\n    onValueBlur?.(sanitizedNewValue);\n    onBlur?.(event);\n  };\n\n  const handlePickerChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setValue(coerceHexInputValue(event.target.value));\n    onChange?.(event);\n  };\n\n  const handleClear: MouseEventHandler<HTMLButtonElement> = () => {\n    if (!inputRef.current) return;\n    inputRef.current.value = '';\n    setValue('');\n    onChange?.(createChangeInputEvent(inputRef.current));\n  };\n\n  return (\n    <InputGroup\n      state={state}\n      variant={variant}\n      sizing={sizing}\n      focusVariant={focusVariant}\n      className={className}\n    >\n      <InputGroup.Addon\n        align=\"inline-start\"\n        className={cn(\n          { 'tw:-ml-7 tw:opacity-0': !value },\n          'tw:transition-[opacity,margin]',\n          'tw:ease-linear',\n          'tw:duration-200',\n        )}\n      >\n        <div\n          style={isValidSwatch ? { background: swatchColor } : undefined}\n          className={cn(\n            'tw:size-5',\n            'tw:shrink-0',\n            'tw:rounded-sm',\n            'tw:border',\n            'tw:border-solid',\n            'tw:border-neutral-300',\n            {\n              'tw:bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]':\n                !isValidSwatch,\n            },\n          )}\n        />\n      </InputGroup.Addon>\n\n      <InputGroup.Input\n        {...restInputProps}\n        type=\"text\"\n        ref={mergeRefs(ref ?? null, inputRef)}\n        value={value}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        disabled={disabled}\n        readOnly={readOnly}\n      />\n\n      <InputGroup.Addon align=\"inline-end\">\n        {canClear && (\n          <InputGroup.Button\n            // prevents input focus stealing\n            onMouseDown={(event) => event.preventDefault()}\n            onClick={handleClear}\n            aria-label=\"Clear color\"\n          >\n            <X className=\"tw:size-4\" />\n          </InputGroup.Button>\n        )}\n        <ColorPicker\n          disabled={disabled}\n          readOnly={readOnly}\n          value={value}\n          onChange={handlePickerChange}\n        />\n      </InputGroup.Addon>\n    </InputGroup>\n  );\n};\n"],"mappings":"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"}

package/dist/{Combobox-Cs_1pj2q.js → Combobox-BfIfaVMA.js}

@@ -1,18 +1,97 @@
 import { cn } from "./classNames-BzrkDnOD.js";
+import { noop } from "./utils-DSvrhU8E.js";
 import { useArgoDesign } from "./context-D7X470dy.js";
 import { Check, ChevronDown, Plus, X } from "./icons-Cek151jC.js";
-import { InputGroup } from "./InputGroup-BnLHY0eq.js";
-import { Badge } from "./Badge-Ch26CXoP.js";
-import { useEffect, useRef, useState } from "react";
+import { useStableCallback } from "./internal/hooks/useStableCallback.js";
+import { InputGroup } from "./InputGroup-DcZRlVnN.js";
+import { Badge } from "./Badge-D0pXdekt.js";
+import { useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
+//#region src/components/Combobox/blankValues.ts
+/**
+* The two blank strings a Storage filter predicates on, in list order.
+*
+* - Reach for {@link withBlankValues} to offer them; this is the pair itself.
+*/
+const BLANK_VALUES = ["", " "];
+const BLANK_LABELS = {
+	"": "[empty string]",
+	" ": "[space character]"
+};
+/**
+* A string as a row or a chip shows it — named when its text is blank, itself otherwise.
+*
+* - Exported so an `itemToLabel` / `itemToChipLabel` / `itemToSelectedLabel` / `renderChips`
+*   override can keep the default naming instead of retyping the labels.
+* - The two blank values get their own labels; any other whitespace-only string (a tab, a run of
+*   spaces) falls back to a generic one, so two different ones read alike.
+* - Identity is unaffected — `toLabel` keys items off the raw string.
+*/
+const namedLabel = (text) => text.trim() === "" ? BLANK_LABELS[text] ?? "[whitespace]" : text;
+/**
+* `values` with both blank values offered ahead of them, and duplicates collapsed.
+*
+* - The dedupe matters where the list is the distinct values of a Storage column: it can already
+*   hold a blank, and two `Object.is`-equal rows both report `aria-selected` and toggle each other.
+* - First occurrence wins, so the order of the values is otherwise preserved.
+* - String items only — the seven Storage filters this serves are all string-valued.
+*/
+const withBlankValues = (values) => [.../* @__PURE__ */ new Set([...BLANK_VALUES, ...values])];
+//#endregion
+//#region src/components/Combobox/ComboboxChip.tsx
+/**
+* Keeps a chip's own keyboard handling off its content's.
+*
+* - Base UI's chip calls `preventDefault` on Enter and Space, which would cancel the activation of
+*   a link or button rendered inside the chip.
+* - Capture phase, because React dispatches capture and bubble in one pass over the event path:
+*   stopping here means the chip's own bubble handler never runs.
+* - Guarded on the target, so keys the chip itself receives while focused — Backspace, Delete, the
+*   arrows — still reach that handler.
+*/
+const stopNestedKeyDown = (event) => {
+	if (event.target !== event.currentTarget) event.stopPropagation();
+};
+/**
+* One chip in a `MultiCombobox`'s chip area — Badge chrome plus the remove button.
+*
+* - Position is the identity: Base UI removes the chip at an index, so render one per entry of
+*   `value`, in that order. There is no value prop to pass.
+* - `children` is the chip's content, so it can hold a link or an action of its own.
+* - Renders inside a `MultiCombobox`'s `renderChips` slot, or `Combobox.Chips`.
+* - A chip the user cannot remove is a plain `Badge`, not a chip — a chip would take a position
+*   that a removal counts against.
+*/
+const ComboboxChip = ({ children, color, variant }) => {
+	const renderArgo = useArgoDesign();
+	return /* @__PURE__ */ jsxs(Combobox.Chip, {
+		render: /* @__PURE__ */ jsx(Badge.Root, {
+			color,
+			variant: variant ?? (renderArgo ? "pill" : "default"),
+			className: "tw:max-w-40"
+		}),
+		onKeyDownCapture: stopNestedKeyDown,
+		children: [/* @__PURE__ */ jsx(Badge.Label, { children }), /* @__PURE__ */ jsx(Badge.Addon, {
+			variant: "inline",
+			align: "inline-end",
+			children: /* @__PURE__ */ jsx(Combobox.ChipRemove, { render: /* @__PURE__ */ jsx(Badge.Button, {
+				"aria-label": "Remove value",
+				children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
+			}) })
+		})]
+	});
+};
+//#endregion
 //#region src/components/Combobox/utils.ts
 const isPlainObject = (item) => item !== null && typeof item === "object";
 const isNumber = (item) => typeof item === "number";
 const isString = (item) => typeof item === "string";
 const isLabeledItem = (item) => isPlainObject(item) && Reflect.has(item, "label") && Reflect.has(item, "value");
 const isInternalItem = (item) => isLabeledItem(item) && "__marker" in item;
+const isSelectAllItem = (item) => isInternalItem(item) && item.__marker === "selectAll";
 const isCreatableItem = (item) => {
 	return isInternalItem(item) && item.__marker === "creatable";
 };
@@ -22,12 +101,29 @@ const isGroupItems = (items) => {
 	if (items.length === 0) return false;
 	return isGroupItem(items[0]);
 };
+/**
+* Node a list row and a chip show for an item.
+*
+* - Names a blank string, because a row or a chip rendering as nothing is indistinguishable from
+*   an empty control. {@link toLabel} deliberately does not, so the input keeps the raw value.
+* - A non-string `label` (a JSX node) passes through untouched.
+*/
 const defaultItemToLabel = (item) => {
-	if (isNumber(item) || isString(item)) return item;
+	if (isNumber(item)) return item;
+	if (isString(item)) return namedLabel(item);
 	if (!isLabeledItem(item)) throw new Error("Combobox: Item does not have a `label` field. Pass `itemToLabel` for custom item shapes.");
-	return item.label;
+	return isString(item.label) ? namedLabel(item.label) : item.label;
 };
-/** Display string for an item — mirrors base-ui's own default logic. */
+/**
+* Display string for an item — mirrors base-ui's own default logic.
+*
+* - Also the default search text and the closed `Combobox`'s input value, so it is the item's
+*   string identity rather than its decoration.
+* - Blank strings are deliberately **not** named here: a `''` reaching this is as likely to be an
+*   owner's "nothing selected" as a real value.
+* - Naming one would paint text into an empty input and suppress the placeholder.
+* - Naming lives in {@link defaultItemToLabel}, which only rows and chips read.
+*/
 const toLabel = (item) => {
 	if (isString(item)) return item;
 	if (isLabeledItem(item)) {
@@ -48,11 +144,28 @@ const toValueKey = (item) => {
 const defaultItemToIcon = (item) => isLabeledItem(item) ? item.icon : void 0;
 const defaultItemToDisabled = (item) => isLabeledItem(item) ? item.disabled ?? false : false;
 const defaultGroupToLabel = () => void 0;
+const selectAllItem = {
+	__marker: "selectAll",
+	value: "__select_all__",
+	label: "Select All"
+};
 const createCreatableItem = (query) => ({
 	__marker: "creatable",
 	value: query,
 	label: query
 });
+/**
+* Item-equality predicate for a Base UI combobox root.
+*
+* - An injected sentinel row equals only a sentinel of the same marker with the same value key —
+*   the create row is rebuilt on every keystroke, so reference equality would never match it.
+* - A sentinel never equals a real item, however the two keys read: that is what the marker is for.
+* - Real items fall through to the caller's predicate, then to Base UI's own `Object.is`.
+*/
+const toItemEquality = (isItemEqualToValue) => (a, b) => {
+	if (isInternalItem(a) || isInternalItem(b)) return isInternalItem(a) && isInternalItem(b) && a.__marker === b.__marker && toValueKey(a) === toValueKey(b);
+	return isItemEqualToValue?.(a, b) ?? Object.is(a, b);
+};
 const defaultToCreateValue = (query, value, queryToCreateValue) => {
 	if (queryToCreateValue) return queryToCreateValue(query);
 	if (value === void 0) return query;
@@ -66,7 +179,9 @@ const defaultToCreateValue = (query, value, queryToCreateValue) => {
 const defaultQueryToCreateLabel = (query) => `Create "${query}"`;
 //#endregion
 //#region src/components/Combobox/ComboboxChips.tsx
-const ComboboxChips = ({ maxVisible = 3, itemToChipLabel = defaultItemToLabel, itemToChipColor, pinnedChipLabels, variant = "pill" }) => /* @__PURE__ */ jsx(Combobox.Value, { children: (values) => {
+const ComboboxChips = ({ maxVisible = 3, itemToChipLabel = defaultItemToLabel, itemToChipColor, pinnedChipLabels, variant = "pill", children }) => /* @__PURE__ */ jsx(Combobox.Value, { children: (rawValues) => {
+	const values = rawValues.filter((value) => !isInternalItem(value));
+	if (children) return children(values);
 	const visible = values.slice(0, maxVisible);
 	const overflow = values.slice(maxVisible);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -75,20 +190,10 @@ const ComboboxChips = ({ maxVisible = 3, itemToChipLabel = defaultItemToLabel, i
 			variant,
 			children: label
 		}, index)),
-		visible.map((value, index) => /* @__PURE__ */ jsxs(Combobox.Chip, {
-			render: /* @__PURE__ */ jsx(Badge.Root, {
-				color: itemToChipColor?.(value),
-				className: "tw:max-w-40",
-				variant
-			}),
-			children: [/* @__PURE__ */ jsx(Badge.Label, { children: itemToChipLabel(value) }), /* @__PURE__ */ jsx(Badge.Addon, {
-				variant: "inline",
-				align: "inline-end",
-				children: /* @__PURE__ */ jsx(Combobox.ChipRemove, { render: /* @__PURE__ */ jsx(Badge.Button, {
-					"aria-label": "Remove value",
-					children: /* @__PURE__ */ jsx(X, { className: "tw:size-3" })
-				}) })
-			})]
+		visible.map((value, index) => /* @__PURE__ */ jsx(ComboboxChip, {
+			color: itemToChipColor?.(value),
+			variant,
+			children: itemToChipLabel(value)
 		}, index)),
 		overflow.length > 0 && /* @__PURE__ */ jsx(Badge.Root, {
 			variant: "pill",
@@ -102,20 +207,23 @@ const ComboboxContent = ({ ref, align = "start", side = "bottom", sideOffset = 4
 	const effectiveVariant = useArgoDesign() ? "argo" : "default";
 	return /* @__PURE__ */ jsx(Combobox.Portal, {
 		container,
-		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
-			align,
-			side,
-			sideOffset,
-			alignOffset,
-			anchor,
-			className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
-			children: /* @__PURE__ */ jsx(Combobox.Popup, {
-				ref,
-				"data-chips": !!anchor,
-				"data-variant": effectiveVariant,
-				className: cn("tw:!pointer-events-auto", "tw:group/combobox-content", "tw:relative", "tw:flex tw:flex-col tw:overflow-hidden", "tw:max-h-[var(--available-height)]", "tw:w-[var(--anchor-width)]", "tw:max-w-[var(--available-width)]", "tw:origin-[var(--transform-origin)]", "tw:data-[chips=true]:min-w-[var(--anchor-width)]", "tw:rounded-lg", "tw:data-[variant=default]:rounded", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=top]:slide-in-from-bottom-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=inline-start]:slide-in-from-right-2", "tw:data-[side=inline-end]:slide-in-from-left-2", className),
-				...popupProps,
-				children
+		children: /* @__PURE__ */ jsx(DismissableLayer, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+				align,
+				side,
+				sideOffset,
+				alignOffset,
+				anchor,
+				className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
+				children: /* @__PURE__ */ jsx(Combobox.Popup, {
+					ref,
+					"data-chips": !!anchor,
+					"data-variant": effectiveVariant,
+					className: cn("tw:!pointer-events-auto", "tw:group/combobox-content", "tw:relative", "tw:flex tw:flex-col tw:overflow-hidden", "tw:max-h-[var(--available-height)]", "tw:w-[var(--anchor-width)]", "tw:max-w-[var(--available-width)]", "tw:origin-[var(--transform-origin)]", "tw:data-[chips=true]:min-w-[var(--anchor-width)]", "tw:rounded-lg", "tw:data-[variant=default]:rounded", "tw:bg-popover", "tw:text-popover-foreground", "tw:shadow-md", "tw:ring-1", "tw:ring-foreground/10", "tw:duration-100", "data-open:animate-in", "data-open:fade-in-0", "data-open:zoom-in-95", "data-closed:animate-out", "data-closed:fade-out-0", "data-closed:zoom-out-95", "tw:data-[side=bottom]:slide-in-from-top-2", "tw:data-[side=top]:slide-in-from-bottom-2", "tw:data-[side=left]:slide-in-from-right-2", "tw:data-[side=right]:slide-in-from-left-2", "tw:data-[side=inline-start]:slide-in-from-right-2", "tw:data-[side=inline-end]:slide-in-from-left-2", className),
+					...popupProps,
+					children
+				})
 			})
 		})
 	});
@@ -219,27 +327,50 @@ const ComboboxCollection = ({ ...props }) => /* @__PURE__ */ jsx(Combobox.Collec
 	...props
 });
 //#endregion
+//#region src/components/Combobox/query.ts
+/**
+* The text a combobox's input takes, with `inputValueSanitizer` applied to what the user typed.
+*
+* - `input-change` is the only reason carrying typed text. Every other one carries text the
+*   control itself put there — an item's label, or the empty string a clear leaves — which a
+*   sanitizer aimed at typed characters would mangle.
+* - A sanitizer sees the whole text on every keystroke, so it has to rewrite rather than drop:
+*   one calling `trim()` swallows the space before the next word.
+*/
+const sanitizeTypedInput = (next, reason, sanitizer) => reason === "input-change" ? sanitizer?.(next) ?? next : next;
+/**
+* Reports the query the list filters by to the control's owner.
+*
+* - Fires from an effect rather than the input handler because `query` is derived: in `Combobox`
+*   a selection showing its own label empties it without a keystroke, so the handler never sees
+*   every value it takes.
+* - The mount render reports too, so an owner fetching on the query needs no first fetch of its
+*   own.
+*/
+const useQueryReporter = (query, onQueryChange) => {
+	const report = useStableCallback(onQueryChange ?? noop);
+	useEffect(() => {
+		report(query);
+	}, [query, report]);
+};
+//#endregion
 //#region src/components/Combobox/Combobox.tsx
 const VIRTUALIZE_THRESHOLD = 30;
 const ESTIMATED_ROW_HEIGHT = 40;
 const ESTIMATED_LIST_HEIGHT = 320;
-const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear, id, className, empty = "No items", indicator, prefix, virtualized = false, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, canCreate, itemToDisabled = defaultItemToDisabled, itemToLabel = defaultItemToLabel, itemToIcon = defaultItemToIcon, groupToLabel = defaultGroupToLabel }) => {
-	const closeReasonRef = useRef("none");
-	const [inputValue, setInputValue] = useState(() => {
-		const initial = value !== void 0 ? value : defaultValue;
-		if (initial == null) return "";
-		return itemToStringLabelProp?.(initial) ?? toLabel(initial);
-	});
-	const [selections, setSelections] = useState(0);
-	useEffect(() => {
-		if (value === void 0) return;
-		const label = value === null ? "" : itemToStringLabelProp?.(value) ?? toLabel(value);
-		setInputValue((prev) => prev === label ? prev : label);
-	}, [value, selections]);
-	const selectedLabel = value == null ? void 0 : itemToStringLabelProp?.(value) ?? toLabel(value);
-	const isShowingSelection = selectedLabel !== void 0 && inputValue === selectedLabel;
-	const query = (isShowingSelection ? "" : inputValue).trim();
+const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, itemToStringLabel: itemToStringLabelProp, itemToStringValue, disabled, filter, inputRef, onOpenChangeComplete, isItemEqualToValue: isItemEqualToValueProp, variant, sizing, focusVariant, state, placeholder, allowClear = true, id, className, empty = "No items", indicator, prefix, virtualized = false, inputValueSanitizer, onQueryChange, allowCreate, queryToCreateValue, queryToCreateLabel = defaultQueryToCreateLabel, canCreate, itemToDisabled = defaultItemToDisabled, itemToLabel = defaultItemToLabel, itemToIcon = defaultItemToIcon, itemToSelectedLabel, groupToLabel = defaultGroupToLabel }) => {
+	/** An item's string identity: the input's text, the default search subject, and the accessible value. */
+	const labelOf = (item) => itemToStringLabelProp?.(item) ?? toLabel(item);
+	const [typedText, setTypedText] = useState(null);
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? null);
+	const selectedItem = value !== void 0 ? value : uncontrolledValue;
+	const selectedLabel = selectedItem == null ? null : labelOf(selectedItem);
+	const isShowingSelection = selectedLabel !== null && (typedText === null || typedText === selectedLabel);
+	const inputValue = typedText ?? selectedLabel ?? "";
+	const selectedNode = itemToSelectedLabel && selectedItem != null && isShowingSelection ? itemToSelectedLabel(selectedItem) : null;
+	const query = (isShowingSelection ? "" : typedText ?? "").trim();
 	const queryLower = query.toLowerCase();
+	useQueryReporter(query, onQueryChange);
 	const itemsProp = _itemsProp ?? [];
 	const sampleItem = itemsProp.flatMap((item) => isGroupItem(item) ? item.items : [item])[0];
 	const [createdItems, setCreatedItems] = useState([]);
@@ -251,49 +382,35 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 	const items = (() => {
 		if (!allowCreate || disabled) return allItems;
 		if (!query) return allItems;
-		if (allItems.flatMap((item) => isGroupItem(item) ? item.items : [item]).some((item) => (itemToStringLabelProp?.(item) ?? toLabel(item)).toLowerCase() === queryLower)) return allItems;
+		if (allItems.flatMap((item) => isGroupItem(item) ? item.items : [item]).some((item) => labelOf(item).toLowerCase() === queryLower)) return allItems;
 		if (canCreate && !canCreate(query)) return allItems;
 		const creatable = isGroupItems(itemsProp) ? [{ items: [createCreatableItem(query)] }] : [createCreatableItem(query)];
 		return [...allItems, ...creatable];
 	})();
-	const itemToStringLabel = (value) => {
-		if (isCreatableItem(value)) return value.value;
-		return itemToStringLabelProp?.(value) ?? toLabel(value);
-	};
+	const itemToStringLabel = (value) => isCreatableItem(value) ? value.value : labelOf(value);
 	const wrappedFilter = isShowingSelection ? () => true : !allowCreate || !filter ? filter : (item, ...args) => isCreatableItem(item) || filter(item, ...args);
 	const wrappedItemToStringValue = !allowCreate || !itemToStringValue ? itemToStringValue : (item) => isCreatableItem(item) ? item.value : itemToStringValue(item);
-	const isItemEqualToValue = (a, b) => {
-		if (isCreatableItem(a) || isCreatableItem(b)) return toValueKey(a) === toValueKey(b);
-		return isItemEqualToValueProp?.(a, b) ?? Object.is(a, b);
-	};
-	const handleInputValueChange = (value, { reason }) => {
-		if (["input-clear", "none"].includes(reason) && ["item-press", "creatable-item-press"].includes(closeReasonRef.current)) {
-			closeReasonRef.current = "none";
-			return;
-		}
-		if (reason === "none" && closeReasonRef.current == "outside-click") {
-			closeReasonRef.current = "none";
-			setInputValue(value);
+	const isItemEqualToValue = useMemo(() => toItemEquality(isItemEqualToValueProp), [isItemEqualToValueProp]);
+	const handleInputValueChange = (next, { reason }) => {
+		if (reason !== "input-change") {
+			setTypedText(null);
 			return;
 		}
-		setInputValue(value);
+		const typed = inputValueSanitizer?.(next) ?? next;
+		setTypedText(typed === "" || typed.trim() !== "" ? typed : null);
 	};
-	const handleOnOpenChangeComplete = (open) => {
-		onOpenChangeComplete?.(open);
-		if (open) return;
-		if (closeReasonRef.current !== "none") return;
-		closeReasonRef.current = "outside-click";
+	const handleOpenChange = (open) => {
+		if (!open) setTypedText(null);
 	};
 	const handleOnValueChange = (next, event) => {
-		setSelections((count) => count + 1);
 		if (isCreatableItem(next)) {
 			const newValue = defaultToCreateValue(next.value, sampleItem, queryToCreateValue);
-			closeReasonRef.current = "creatable-item-press";
 			setCreatedItems((prev) => [...prev, newValue]);
+			setUncontrolledValue(newValue);
 			onValueChange?.(newValue, event);
 			return;
 		}
-		closeReasonRef.current = "item-press";
+		setUncontrolledValue(next);
 		onValueChange?.(next, event);
 	};
 	const [listElement, setListElement] = useState(null);
@@ -339,6 +456,12 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 		width: "100%",
 		transform: `translateY(${offset}px)`
 	});
+	const comboboxInput = /* @__PURE__ */ jsx(ComboboxInput, {
+		id,
+		placeholder,
+		disabled,
+		className: cn(selectedNode != null && "tw:text-transparent tw:caret-foreground tw:selection:bg-transparent")
+	});
 	return /* @__PURE__ */ jsxs(Combobox.Root, {
 		items: shouldVirtualize ? virtualItems : items,
 		autoHighlight: true,
@@ -349,7 +472,8 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 		itemToStringLabel,
 		isItemEqualToValue,
 		itemToStringValue: wrappedItemToStringValue,
-		onOpenChangeComplete: handleOnOpenChangeComplete,
+		onOpenChange: handleOpenChange,
+		onOpenChangeComplete,
 		disabled,
 		inputRef,
 		inputValue,
@@ -364,31 +488,30 @@ const Combobox$1 = ({ items: _itemsProp, value, defaultValue, onValueChange, ite
 			state,
 			focusVariant,
 			className,
-			children: [
-				prefix && /* @__PURE__ */ jsx(InputGroup.Addon, {
+			children: [itemToSelectedLabel != null ? /* @__PURE__ */ jsxs("div", {
+				className: "tw:relative tw:flex tw:min-w-0 tw:flex-1",
+				children: [(prefix != null || selectedNode != null) && /* @__PURE__ */ jsxs(InputGroup.Addon, {
 					align: "inline-start",
-					children: prefix
-				}),
-				/* @__PURE__ */ jsx(ComboboxInput, {
-					id,
-					placeholder,
-					disabled
-				}),
-				/* @__PURE__ */ jsxs(InputGroup.Addon, {
-					align: "inline-end",
-					children: [allowClear && /* @__PURE__ */ jsx(InputGroup.Button, {
-						asChild: true,
-						"aria-label": "Clear",
-						disabled,
-						children: /* @__PURE__ */ jsx(Combobox.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" }) })
-					}), /* @__PURE__ */ jsx(InputGroup.Button, {
-						disabled,
-						asChild: true,
-						"aria-label": "Open combobox",
-						children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
-					})]
-				})
-			]
+					className: cn(selectedNode != null && "tw:pointer-events-none tw:absolute tw:inset-y-0 tw:left-0 tw:max-w-full tw:overflow-hidden"),
+					children: [prefix, selectedNode]
+				}), comboboxInput]
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [prefix != null && /* @__PURE__ */ jsx(InputGroup.Addon, {
+				align: "inline-start",
+				children: prefix
+			}), comboboxInput] }), /* @__PURE__ */ jsxs(InputGroup.Addon, {
+				align: "inline-end",
+				children: [allowClear && /* @__PURE__ */ jsx(InputGroup.Button, {
+					asChild: true,
+					"aria-label": "Clear",
+					disabled,
+					children: /* @__PURE__ */ jsx(Combobox.Clear, { children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" }) })
+				}), /* @__PURE__ */ jsx(InputGroup.Button, {
+					disabled,
+					asChild: true,
+					"aria-label": "Open combobox",
+					children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
+				})]
+			})]
 		}), /* @__PURE__ */ jsxs(ComboboxContent, { children: [/* @__PURE__ */ jsx(ComboboxEmpty, { children: empty }), shouldVirtualize ? /* @__PURE__ */ jsx(ComboboxList, {
 			ref: setListElement,
 			children: /* @__PURE__ */ jsx("div", {
@@ -444,7 +567,53 @@ Combobox$1.Group = ComboboxGroup;
 Combobox$1.GroupLabel = ComboboxGroupLabel;
 Combobox$1.GroupList = ComboboxCollection;
 Combobox$1.Chips = ComboboxChips;
+Combobox$1.Chip = ComboboxChip;
+//#endregion
+//#region src/components/Combobox/matchByWords.ts
+const toWords = (query) => query.toLowerCase().split(/\s+/).filter(Boolean);
+const isFilled = (text) => text !== null && text !== void 0 && text !== "";
+const isTextList = (texts) => Array.isArray(texts);
+/**
+* Whether every word of `query` occurs in at least one of `texts`, ignoring case.
+*
+* - Words may match different texts and in any order: `prod eu` matches `['eu-central', 'production']`.
+* - A word matches by containment, not as a whole word: `prod` matches `production`.
+* - An empty or whitespace-only query matches every item.
+* - Empty and absent texts are skipped, so a missing field never matches.
+* - Comparison is a plain lowercased `includes`, not Base UI's `Intl.Collator` `contains`, so
+*   `Muller` does not find `Müller`. The wrapper this replaces matched the same way.
+* - `apps/kbc-ui` has its own `matchByWords` of the same name over 68 mostly non-combobox call
+*   sites. It splits on a single space and keeps empty texts, so the two are not interchangeable
+*   until that one re-exports this.
+*
+* Reach for it as a `Combobox` / `MultiCombobox` `filter` when the searchable text is **not** the
+* label — a user's email behind their name, a table id behind its display name:
+*
+* ```tsx
+* <Combobox filter={(user, query) => matchByWords([user.name, user.email], query)} … />
+* ```
+*
+* When only the label is searchable, pass {@link filterByWords} instead of closing over this.
+*/
+const matchByWords = (texts, query) => {
+	const words = toWords(query);
+	if (words.length === 0) return true;
+	const haystacks = (isTextList(texts) ? texts : [texts]).filter(isFilled).map((text) => String(text).toLowerCase());
+	return words.every((word) => haystacks.some((haystack) => haystack.includes(word)));
+};
+/**
+* `filter` that matches the item's displayed label word by word.
+*
+* - Drop-in for the built-in match, which takes the query as one substring: `filter={filterByWords}`.
+* - Generic, so passing it leaves the combobox's own item type inference untouched.
+* - The label is what the combobox itself displays — `itemToStringLabel` where the call site passes
+*   one, otherwise the item's own `label`, `value`, or string form.
+* - **Only the label is searched.** Nothing walks the rest of the item, so a field the label omits
+*   stays unsearchable by design — a filter that quietly matched an id the user cannot see is
+*   worse than one that does not match. Close over {@link matchByWords} to name those fields.
+*/
+const filterByWords = (item, query, itemToString) => matchByWords(itemToString?.(item) ?? toLabel(item), query);
 //#endregion
-export { Combobox$1 as Combobox, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, isCreatableItem, isGroupItem, isGroupItems, isLabeledItem, toLabel };
+export { Combobox$1 as Combobox, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultItemToLabel, defaultQueryToCreateLabel, defaultToCreateValue, filterByWords, isCreatableItem, isGroupItem, isGroupItems, isSelectAllItem, matchByWords, namedLabel, sanitizeTypedInput, selectAllItem, toItemEquality, toLabel, useQueryReporter, withBlankValues };
 
-//# sourceMappingURL=Combobox-Cs_1pj2q.js.map
+//# sourceMappingURL=Combobox-BfIfaVMA.js.map