@keboola/design 13.1.3 → 14.0.0

package/dist/{ColorInput-B3gBZ8Ya.js → ColorInput-CDKH8q_f.js}

@@ -1,8 +1,8 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { createChangeInputEvent } from "./utils-Bd28bWgm.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { createChangeInputEvent } from "./utils-LQ4jJA-9.js";
 import { mergeRefs } from "./internal/utils/mergeRefs.js";
-import { Pipette, X } from "./icons-wcA70iQx.js";
-import { InputGroup } from "./InputGroup-CrlMRz4X.js";
+import { Pipette, X } from "./icons-ZIeZXXS7.js";
+import { InputGroup } from "./InputGroup-Dm014ruw.js";
 import { useControllableState } from "./useControllableState-CUYXMsfz.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -162,4 +162,4 @@ const ColorInput = ({ ref, state, variant, focusVariant, sizing, className, valu
 //#endregion
 export { ColorInput };
 
-//# sourceMappingURL=ColorInput-B3gBZ8Ya.js.map
+//# sourceMappingURL=ColorInput-CDKH8q_f.js.map

package/dist/{ColorInput-B3gBZ8Ya.js.map → ColorInput-CDKH8q_f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorInput-B3gBZ8Ya.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]+$/;\nconst COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\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 (up to `#rrggbbaa`) for the text input.\n *\n * - Adds a missing `#`, keeps only the leading hex digits.\n * - `''` for non-strings or when no hex digits remain.\n * - May be a prefix (`#ab`) — gate 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 lowercase `#rrggbb` the native `<input type=\"color\">` requires.\n *\n * - Shorthand is expanded, alpha dropped, anything invalid → `#000000`.\n * - Lowercased because the native picker lowercases, so values 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":";;;;;;;;;AAEA,MAAM,cAAc;AACpB,MAAM,uBAAuB;AAC7B,MAAM,sBAAsB;AAE5B,MAAM,kBAAkB;AAExB,MAAM,kBAAkB,UAAkC;CACxD,IAAI,OAAO,UAAU,UAAU,OAAO;CACtC,MAAM,UAAU,MAAM,KAAK;CAC3B,IAAI,YAAY,IAAI,OAAO;CAC3B,OAAO,QAAQ,WAAW,GAAG,IAAI,QAAQ,MAAM,CAAC,IAAI;AACtD;AAEA,MAAa,sBAAsB,UAA2B,qBAAqB,KAAK,KAAK;AAG7F,MAAa,cAAc,UAA4B;CAErD,gBAD8C,iBAAiB,YACvC,MAAM,WAAW,IAAI,MAAM,MAAM;AAC3D;;;;;;;;AASA,MAAa,uBAAuB,UAAkC;CACpE,MAAM,OAAO,eAAe,KAAK;CACjC,IAAI,SAAS,MAAM,OAAO;CAC1B,MAAM,CAAC,aAAa,KAAK,MAAM,eAAe,KAAK,CAAC;CACpD,IAAI,CAAC,WAAW,OAAO;CACvB,OAAO,IAAI,UAAU,MAAM,GAAG,mBAAmB;AACnD;;;;;;;AAQA,MAAa,0BAA0B,UAAmD;CACxF,MAAM,OAAO,eAAe,KAAK;CACjC,IAAI,SAAS,QAAQ,CAAC,YAAY,KAAK,IAAI,GAAG,OAAO;CAErD,IAAI,KAAK,WAAW,KAAK,KAAK,WAAW,GAAG;EAC1C,MAAM,CAAC,GAAG,GAAG,KAAK;EAClB,OAAO,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,YAAY;CACjD;CACA,IAAI,KAAK,WAAW,KAAK,KAAK,WAAW,GACvC,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;CAE1C,OAAO;AACT;;;AC/CA,MAAa,eAAe,EAAE,OAAO,UAAU,UAAU,GAAG,YAAmB;CAC7E,MAAM,YAAY,OAA8B,IAAI;CAEpD,MAAM,yBAAyB;EAC7B,IAAI,CAAC,UAAU,SAAS;EACxB,WAAW,UAAU,OAAO;CAC9B;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,MAAK;GACL,OAAO,uBAAuB,KAAK;GACnC,UAAU;GACV,eAAA;GACA,WAAU;GACA;GACA;EACX,CAAA,GACD,oBAAC,WAAW,QAAZ;GACE,cAAc,UAAU,MAAM,eAAe;GAC7C,UAAU,YAAY;GACtB,SAAS;GACT,cAAW;GAEX,UAAA,oBAAC,SAAD,EAAS,WAAU,YAAa,CAAA;EACf,CAAA,CAChB;;AAET;;;ACPA,MAAa,cAAc,EACzB,KAGA,OACA,SACA,cACA,QACA,WAGA,OAAO,WACP,eACA,aACA,UACA,QACA,cACA,aAAa,OAGb,UACA,UACA,GAAG,qBACQ;CACX,MAAM,WAAW,OAA8B,IAAI;CAEnD,MAAM,CAAC,OAAO,YAAY,qBAA6B;EAErD,MAAM,cAAc,OAAO,KAAK;EAChC,aAAa,gBAAgB;EAC7B,UAAU;CACZ,CAAC;CAED,MAAM,eAAe,cAAc,KAAA;CAEnC,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC;CACxD,MAAM,cAAc,oBAAoB,KAAK;CAC7C,MAAM,gBAAgB,mBAAmB,WAAW;CAGpD,MAAM,gBAAsD,UAAU;EACpE,SAAS,MAAM,OAAO,KAAK;EAC3B,WAAW,KAAK;CAClB;CAEA,MAAM,cAAmD,UAAU;EACjE,MAAM,WAAW,MAAM,OAAO;EAC9B,MAAM,oBAAoB,oBAAoB,QAAQ;EAEtD,IAAI,sBAAsB,UAAU;GAGlC,IAAI,CAAC,cAAc,MAAM,OAAO,QAAQ;GACxC,SAAS,iBAAiB;EAC5B;EAEA,cAAc,iBAAiB;EAC/B,SAAS,KAAK;CAChB;CAEA,MAAM,sBAA4D,UAAU;EAC1E,SAAS,oBAAoB,MAAM,OAAO,KAAK,CAAC;EAChD,WAAW,KAAK;CAClB;CAEA,MAAM,oBAA0D;EAC9D,IAAI,CAAC,SAAS,SAAS;EACvB,SAAS,QAAQ,QAAQ;EACzB,SAAS,EAAE;EACX,WAAW,uBAAuB,SAAS,OAAO,CAAC;CACrD;CAEA,OACE,qBAAC,YAAD;EACS;EACE;EACD;EACM;EACH;EALb,UAAA;GAOE,oBAAC,WAAW,OAAZ;IACE,OAAM;IACN,WAAW,GACT,EAAE,yBAAyB,CAAC,MAAM,GAClC,kCACA,kBACA,iBACF;IAEA,UAAA,oBAAC,OAAD;KACE,OAAO,gBAAgB,EAAE,YAAY,YAAY,IAAI,KAAA;KACrD,WAAW,GACT,aACA,eACA,iBACA,aACA,mBACA,yBACA,EACE,6KACE,CAAC,cACL,CACF;IACD,CAAA;GACe,CAAA;GAElB,oBAAC,WAAW,OAAZ;IACE,GAAI;IACJ,MAAK;IACL,KAAK,UAAU,OAAO,MAAM,QAAQ;IAC7B;IACP,UAAU;IACV,QAAQ;IACE;IACA;GACX,CAAA;GAED,qBAAC,WAAW,OAAZ;IAAkB,OAAM;IAAxB,UAAA,CACG,YACC,oBAAC,WAAW,QAAZ;KAEE,cAAc,UAAU,MAAM,eAAe;KAC7C,SAAS;KACT,cAAW;KAEX,UAAA,oBAAC,GAAD,EAAG,WAAU,YAAa,CAAA;IACT,CAAA,GAErB,oBAAC,aAAD;KACY;KACA;KACH;KACP,UAAU;IACX,CAAA,CACe;;EACR;;AAEhB"}
+{"version":3,"file":"ColorInput-CDKH8q_f.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]+$/;\nconst COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;\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 (up to `#rrggbbaa`) for the text input.\n *\n * - Adds a missing `#`, keeps only the leading hex digits.\n * - `''` for non-strings or when no hex digits remain.\n * - May be a prefix (`#ab`) — gate 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 lowercase `#rrggbb` the native `<input type=\"color\">` requires.\n *\n * - Shorthand is expanded, alpha dropped, anything invalid → `#000000`.\n * - Lowercased because the native picker lowercases, so values 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/{ColorModeSwitch-D8Cki137.js → ColorModeSwitch-DR6J2U6M.js}

@@ -1,6 +1,6 @@
-import { Monitor, Moon, Sun } from "./icons-wcA70iQx.js";
-import { Button } from "./Button-B21oVcPU.js";
-import { DropdownMenu } from "./DropdownMenu-BJGLjpVc.js";
+import { Monitor, Moon, Sun } from "./icons-ZIeZXXS7.js";
+import { Button } from "./Button-D2JqBAq7.js";
+import { DropdownMenu } from "./DropdownMenu-B1gGvZoh.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/blocks/ColorModeSwitch/ColorModeSwitch.tsx
 const OPTIONS = [
@@ -64,4 +64,4 @@ const ColorModeSwitch = ({ value, onValueChange, size = "small", className }) =>
 //#endregion
 export { ColorModeSwitch };
 
-//# sourceMappingURL=ColorModeSwitch-D8Cki137.js.map
+//# sourceMappingURL=ColorModeSwitch-DR6J2U6M.js.map

package/dist/{ColorModeSwitch-D8Cki137.js.map → ColorModeSwitch-DR6J2U6M.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ColorModeSwitch-D8Cki137.js","names":[],"sources":["../src/blocks/ColorModeSwitch/ColorModeSwitch.tsx"],"sourcesContent":["import { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport type { ColorScheme } from '../../components/ThemeProvider';\nimport type { LucideIcon } from '../../icons';\nimport { Monitor, Moon, Sun } from '../../icons';\n\ntype Props = {\n  /** Controlled — pair with `onValueChange`. */\n  value: ColorScheme;\n  onValueChange: (value: ColorScheme) => void;\n  size?: 'small' | 'medium';\n  className?: string;\n};\n\nconst OPTIONS: { value: ColorScheme; label: string; icon: LucideIcon }[] = [\n  { value: 'light', label: 'Light', icon: Sun },\n  { value: 'dark', label: 'Dark', icon: Moon },\n  { value: 'system', label: 'System', icon: Monitor },\n];\n\nconst triggerSizeMap = { small: 'icon-sm', medium: 'icon' } as const;\n\n/**\n * Light / dark / system switch: an icon button opening a radio `DropdownMenu`.\n *\n * - Controlled: owns no state; wire it to the same state as `ThemeProvider.colorScheme`.\n * - The trigger's `aria-label` names the current scheme.\n */\nexport const ColorModeSwitch = ({ value, onValueChange, size = 'small', className }: Props) => {\n  const active = OPTIONS.find((option) => option.value === value);\n  const ActiveIcon = active?.icon ?? Monitor;\n  const activeLabel = active?.label ?? 'System';\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size={triggerSizeMap[size]}\n          aria-label={`Color mode: ${activeLabel}`}\n          title={`Color mode: ${activeLabel}`}\n          className={className}\n        >\n          <ActiveIcon className=\"tw:size-4\" />\n        </Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"end\">\n        <DropdownMenu.RadioGroup value={value} onValueChange={onValueChange}>\n          {OPTIONS.map(({ value: option, label, icon: Icon }) => (\n            <DropdownMenu.RadioItem\n              key={option}\n              value={option}\n              icon={<Icon />}\n              indicator=\"check\"\n              indicatorAlign=\"end\"\n              closeOnSelect\n            >\n              {label}\n            </DropdownMenu.RadioItem>\n          ))}\n        </DropdownMenu.RadioGroup>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAM,UAAqE;CACzE;EAAE,OAAO;EAAS,OAAO;EAAS,MAAM;CAAI;CAC5C;EAAE,OAAO;EAAQ,OAAO;EAAQ,MAAM;CAAK;CAC3C;EAAE,OAAO;EAAU,OAAO;EAAU,MAAM;CAAQ;AACpD;AAEA,MAAM,iBAAiB;CAAE,OAAO;CAAW,QAAQ;AAAO;;;;;;;AAQ1D,MAAa,mBAAmB,EAAE,OAAO,eAAe,OAAO,SAAS,gBAAuB;CAC7F,MAAM,SAAS,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK;CAC9D,MAAM,aAAa,QAAQ,QAAQ;CACnC,MAAM,cAAc,QAAQ,SAAS;CAErC,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAa,SAAd;EAAsB,SAAA;EACpB,UAAA,oBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAM,eAAe;GACrB,cAAY,eAAe;GAC3B,OAAO,eAAe;GACX;GAEX,UAAA,oBAAC,YAAD,EAAY,WAAU,YAAa,CAAA;EAC7B,CAAA;CACY,CAAA,GACtB,oBAAC,aAAa,SAAd;EAAsB,OAAM;EAC1B,UAAA,oBAAC,aAAa,YAAd;GAAgC;GAAsB;GACnD,UAAA,QAAQ,KAAK,EAAE,OAAO,QAAQ,OAAO,MAAM,WAC1C,oBAAC,aAAa,WAAd;IAEE,OAAO;IACP,MAAM,oBAAC,MAAD,CAAO,CAAA;IACb,WAAU;IACV,gBAAe;IACf,eAAA;IAEC,UAAA;GACqB,GARjB,MAQiB,CACzB;EACsB,CAAA;CACL,CAAA,CACV,EAAA,CAAA;AAElB"}
+{"version":3,"file":"ColorModeSwitch-DR6J2U6M.js","names":[],"sources":["../src/blocks/ColorModeSwitch/ColorModeSwitch.tsx"],"sourcesContent":["import { Button } from '../../components/Button';\nimport { DropdownMenu } from '../../components/DropdownMenu';\nimport type { ColorScheme } from '../../components/ThemeProvider';\nimport type { LucideIcon } from '../../icons';\nimport { Monitor, Moon, Sun } from '../../icons';\n\ntype Props = {\n  /** Controlled — pair with `onValueChange`. */\n  value: ColorScheme;\n  onValueChange: (value: ColorScheme) => void;\n  size?: 'small' | 'medium';\n  className?: string;\n};\n\nconst OPTIONS: { value: ColorScheme; label: string; icon: LucideIcon }[] = [\n  { value: 'light', label: 'Light', icon: Sun },\n  { value: 'dark', label: 'Dark', icon: Moon },\n  { value: 'system', label: 'System', icon: Monitor },\n];\n\nconst triggerSizeMap = { small: 'icon-sm', medium: 'icon' } as const;\n\n/**\n * Light / dark / system switch: an icon button opening a radio `DropdownMenu`.\n *\n * - Controlled: owns no state; wire it to the same state as `ThemeProvider.colorScheme`.\n * - The trigger's `aria-label` names the current scheme.\n */\nexport const ColorModeSwitch = ({ value, onValueChange, size = 'small', className }: Props) => {\n  const active = OPTIONS.find((option) => option.value === value);\n  const ActiveIcon = active?.icon ?? Monitor;\n  const activeLabel = active?.label ?? 'System';\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size={triggerSizeMap[size]}\n          aria-label={`Color mode: ${activeLabel}`}\n          title={`Color mode: ${activeLabel}`}\n          className={className}\n        >\n          <ActiveIcon className=\"tw:size-4\" />\n        </Button>\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content align=\"end\">\n        <DropdownMenu.RadioGroup value={value} onValueChange={onValueChange}>\n          {OPTIONS.map(({ value: option, label, icon: Icon }) => (\n            <DropdownMenu.RadioItem\n              key={option}\n              value={option}\n              icon={<Icon />}\n              indicator=\"check\"\n              indicatorAlign=\"end\"\n              closeOnSelect\n            >\n              {label}\n            </DropdownMenu.RadioItem>\n          ))}\n        </DropdownMenu.RadioGroup>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n};\n"],"mappings":";;;;;AAcA,MAAM,UAAqE;CACzE;EAAE,OAAO;EAAS,OAAO;EAAS,MAAM;CAAI;CAC5C;EAAE,OAAO;EAAQ,OAAO;EAAQ,MAAM;CAAK;CAC3C;EAAE,OAAO;EAAU,OAAO;EAAU,MAAM;CAAQ;AACpD;AAEA,MAAM,iBAAiB;CAAE,OAAO;CAAW,QAAQ;AAAO;;;;;;;AAQ1D,MAAa,mBAAmB,EAAE,OAAO,eAAe,OAAO,SAAS,gBAAuB;CAC7F,MAAM,SAAS,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK;CAC9D,MAAM,aAAa,QAAQ,QAAQ;CACnC,MAAM,cAAc,QAAQ,SAAS;CAErC,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,aAAa,SAAd;EAAsB,SAAA;EACpB,UAAA,oBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAM,eAAe;GACrB,cAAY,eAAe;GAC3B,OAAO,eAAe;GACX;GAEX,UAAA,oBAAC,YAAD,EAAY,WAAU,YAAa,CAAA;EAC7B,CAAA;CACY,CAAA,GACtB,oBAAC,aAAa,SAAd;EAAsB,OAAM;EAC1B,UAAA,oBAAC,aAAa,YAAd;GAAgC;GAAsB;GACnD,UAAA,QAAQ,KAAK,EAAE,OAAO,QAAQ,OAAO,MAAM,WAC1C,oBAAC,aAAa,WAAd;IAEE,OAAO;IACP,MAAM,oBAAC,MAAD,CAAO,CAAA;IACb,WAAU;IACV,gBAAe;IACf,eAAA;IAEC,UAAA;GACqB,GARjB,MAQiB,CACzB;EACsB,CAAA;CACL,CAAA,CACV,EAAA,CAAA;AAElB"}

package/dist/{Combobox-BNhW0TDB.js → Combobox-CEesMe2M.js}

@@ -1,14 +1,15 @@
-import { cn } from "./classNames-BzrkDnOD.js";
-import { Tooltip, TooltipProvider, noop } from "./utils-Bd28bWgm.js";
+import { cn } from "./classNames-DcGnTh2N.js";
+import { Tooltip, TooltipProvider, noop } from "./utils-LQ4jJA-9.js";
 import { useArgoDesign } from "./context-U293r3v-.js";
-import { Check, ChevronDown, ChevronRight, Loader2, Minus, Plus, X } from "./icons-wcA70iQx.js";
+import { Check, ChevronDown, ChevronRight, Loader2, Minus, Plus, X } from "./icons-ZIeZXXS7.js";
 import { hasTruncationOverflow } from "./internal/components/Truncated.js";
 import { useStableCallback } from "./internal/hooks/useStableCallback.js";
-import { InputGroup } from "./InputGroup-CrlMRz4X.js";
+import { InputGroup } from "./InputGroup-Dm014ruw.js";
 import { forwardAccessibleName } from "./internal/utils/accessibleName.js";
-import { Badge } from "./Badge-Dz0cj6rj.js";
+import { Badge } from "./Badge-Ba3epgcI.js";
+import { ToggleAllTooltip, isToggleAllClick } from "./ToggleAllTooltip-Dlmq-yqS.js";
 import { useElement } from "./useElement-D-RjrGa4.js";
-import { Fragment, createContext, isValidElement, use, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, createContext, isValidElement, use, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Combobox } from "@base-ui/react/combobox";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
@@ -276,6 +277,7 @@ const ComboboxContent = ({ ref, align = "start", side = "bottom", sideOffset = 4
 				className: "tw:isolate tw:z-[1055] tailwindcss-preflight",
 				children: /* @__PURE__ */ jsx(Combobox.Popup, {
 					ref,
+					"data-slot": "combobox-content",
 					"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),
@@ -326,7 +328,7 @@ const ComboboxItemIndicator = ({ ref, className, variant = "check", ...props })
 	return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
 		...props,
 		ref,
-		className: cn("tw:pointer-events-none", "tw:absolute", "tw:right-2", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:size-4", "tw:group-data-[highlighted]/combobox-item:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground", className),
+		className: cn("tw:pointer-events-none", "tw:absolute", "tw:right-2", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:size-4", "tw:group-data-[highlighted]/combobox-item:text-hover-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground", className),
 		render: /* @__PURE__ */ jsx(Check, {})
 	});
 };
@@ -362,17 +364,19 @@ const useVirtualList = (items, virtualized) => {
 };
 //#endregion
 //#region src/components/Combobox/ComboboxItem.tsx
-const ComboboxItem = ({ ref, className, children, icon, indicator: variant = "check", ...props }) => /* @__PURE__ */ jsxs(Combobox.Item, {
+const ComboboxItem = ({ ref, className, children, icon, indicator: variant = "check", locked, ...props }) => /* @__PURE__ */ jsxs(Combobox.Item, {
 	...props,
 	...use(VirtualRowContext),
 	ref,
 	"data-slot": "combobox-item",
-	className: cn("tw:group/combobox-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/combobox-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/combobox-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:data-[highlighted]:bg-accent", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:text-secondary-foreground", "tw:data-disabled:pointer-events-none", "tw:data-disabled:opacity-50", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='size-'])]:size-4", className),
+	"data-locked": locked || void 0,
+	className: cn("tw:group/combobox-item", "tw:relative", "tw:flex", "tw:flex-1", "tw:items-center", "tw:gap-2", "tw:py-2", "tw:px-2", "tw:group-data-[variant=default]/combobox-content:px-4", "tw:rounded-lg", "tw:group-data-[variant=default]/combobox-content:rounded-none", "tw:text-sm", "tw:select-none", "tw:cursor-default", "tw:outline-hidden", "tw:data-[highlighted]:bg-hover", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:bg-secondary", "tw:data-[highlighted]:text-hover-foreground", "tw:group-data-[variant=default]/combobox-content:data-[highlighted]:text-secondary-foreground", "tw:data-disabled:pointer-events-none", "tw:data-disabled:opacity-disabled", "tw:data-locked:opacity-disabled", "tw:[&_svg]:pointer-events-none", "tw:[&_svg]:shrink-0", "tw:[&_svg]:text-muted-foreground", "tw:[&_svg:not([class*='size-'])]:size-4", className),
 	children: [
 		variant !== "none" && /* @__PURE__ */ jsx(ComboboxItemIndicator, { variant }),
 		icon,
 		/* @__PURE__ */ jsx("span", {
-			className: "tw:min-w-0 tw:wrap-anywhere",
+			"data-slot": "combobox-item-label",
+			className: "tw:min-w-0 tw:flex-1 tw:wrap-anywhere",
 			children
 		})
 	]
@@ -400,38 +404,39 @@ const ComboboxOpenButton = ({ disabled, isLoading }) => /* @__PURE__ */ jsx(Inpu
 	"aria-label": "Open combobox",
 	children: /* @__PURE__ */ jsx(Combobox.Trigger, { children: isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "tw:size-4 tw:animate-spin" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "tw:size-4" }) })
 });
-//#endregion
-//#region src/components/Combobox/Group/ComboboxGroupHeader.tsx
-/** Indent of a header's children (chevron + gap); the legacy variant pads its rows wider. */
-const GROUP_CHILD_INDENT = "tw:pl-8 tw:group-data-[variant=default]/combobox-content:pl-10";
 /**
 * A group's own row, standing for the whole group.
 *
 * - Keyboard-navigable like any other row.
-* - The chevron toggles by pointer; `ArrowRight` / `ArrowLeft` are handled by the owning control.
+* - The chevron toggles by pointer, Cmd- or Ctrl-click toggles every group; its tooltip says so.
+* - `ArrowRight` / `ArrowLeft` are handled by the owning control.
 */
-const ComboboxGroupHeader = ({ value, children, expanded, onToggle, checked, indicator = "check", disabled }) => {
+const ComboboxGroupHeader = ({ value, children, expanded, onToggle, checked, indicator = "check", disabled, locked }) => {
 	const toggleFromChevron = (event) => {
 		event.stopPropagation();
-		onToggle();
+		onToggle(isToggleAllClick(event), event.currentTarget);
 	};
 	return /* @__PURE__ */ jsx(ComboboxItem, {
 		value,
 		disabled,
+		locked,
 		"aria-description": expanded === void 0 ? void 0 : expanded ? "Expanded" : "Collapsed",
 		...checked !== void 0 && { "aria-selected": checked === true },
 		indicator: "none",
 		className: "tw:font-medium",
 		onClick: checked !== void 0 ? void 0 : (event) => {
 			event.preventBaseUIHandler();
-			onToggle();
+			onToggle(isToggleAllClick(event), event.currentTarget);
 		},
-		icon: /* @__PURE__ */ jsxs(Fragment$1, { children: [expanded !== void 0 && /* @__PURE__ */ jsx("span", {
-			"aria-hidden": true,
-			"data-slot": "combobox-group-toggle",
-			className: "tw:inline-flex tw:shrink-0",
-			onClick: toggleFromChevron,
-			children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("tw:transition-transform", expanded && "tw:rotate-90") })
+		icon: /* @__PURE__ */ jsxs(Fragment$1, { children: [expanded !== void 0 && /* @__PURE__ */ jsx(ToggleAllTooltip, {
+			expanded,
+			children: /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				"data-slot": "combobox-group-toggle",
+				className: "tw:pointer-events-auto tw:-m-1 tw:inline-flex tw:shrink-0 tw:cursor-pointer tw:rounded tw:p-1 tw:transition-colors tw:hover:bg-foreground/10",
+				onClick: toggleFromChevron,
+				children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("tw:transition-transform", expanded && "tw:rotate-90") })
+			})
 		}), checked !== void 0 && /* @__PURE__ */ jsx(GroupIndicator, {
 			checked,
 			variant: indicator
@@ -456,7 +461,7 @@ const GroupIndicator = ({ checked, variant }) => {
 	if (checked === false) return null;
 	return /* @__PURE__ */ jsx(Mark, {
 		"aria-hidden": true,
-		className: cn("tw:pointer-events-none tw:absolute tw:right-2 tw:size-4", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:group-data-[highlighted]/combobox-item:text-accent-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground")
+		className: cn("tw:pointer-events-none tw:absolute tw:right-2 tw:size-4", "tw:group-data-[variant=default]/combobox-content:right-4", "tw:group-data-[highlighted]/combobox-item:text-hover-foreground", "tw:group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:text-secondary-foreground")
 	});
 };
 //#endregion
@@ -516,7 +521,21 @@ const ComboboxLoadingEmpty = () => /* @__PURE__ */ jsxs("span", {
 //#region src/components/Combobox/ComboboxVirtualList.tsx
 /** Rows rendered past each edge of the viewport, so a fast scroll does not paint blank. */
 const OVERSCAN = 12;
-const kindOf = (row) => row.type === "label" ? "label" : row.padded ? "padded" : "plain";
+const isGroupLast = (row) => row.type === "item" && row.group !== void 0 && row.posInSet === row.setSize;
+const kindOf = (row) => row.type === "label" ? "label" : `${row.padded ? "padded" : "plain"}${isGroupLast(row) ? "-last" : ""}`;
+/** A row's React key: its group and its place in it, so a fold leaves other rows mounted. */
+const placeOf = (row, index) => {
+	if (!row) return String(index);
+	if (row.type === "label") return `${row.group}:label`;
+	return `${row.group ?? "loose"}:${row.posInSet}`;
+};
+/**
+* A row's key for the virtualizer, which keeps measured heights by it.
+*
+* - Folding one group leaves every other row's height in place.
+* - A row that becomes its group's last is estimated afresh, its element kept.
+*/
+const keyOf = (row, index) => `${placeOf(row, index)}${row && isGroupLast(row) ? ":last" : ""}`;
 /**
 * Base UI's filtered entries as one row per option or group label, in list order.
 *
@@ -601,11 +620,14 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 	const [rem] = useState(() => Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 0);
 	const virtualizer = useVirtualizer({
 		count: rows.length,
+		getItemKey: (index) => keyOf(rows[index], index),
 		getScrollElement: () => listElement,
 		estimateSize: (index) => {
 			const row = rows[index];
 			const measured = sizesRef.current;
-			return (row && measured[kindOf(row)]) ?? measured.plain ?? measured.padded ?? rem;
+			const kind = row && kindOf(row);
+			const lastKinds = kind?.endsWith("-last") ? [measured["plain-last"], measured["padded-last"]] : [];
+			return (kind && measured[kind]) ?? lastKinds.find((size) => size !== void 0) ?? measured.plain ?? measured.padded ?? rem;
 		},
 		measureElement: (element, entry, instance) => {
 			const size = measureElement(element, entry, instance);
@@ -645,7 +667,7 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 		width: "100%",
 		transform: `translateY(${start - scrollMargin}px)`
 	});
-	const renderRow = ({ key, index, start }) => {
+	const renderRow = ({ index, start }) => {
 		const row = rows[index];
 		if (!row) return null;
 		return /* @__PURE__ */ jsx("div", {
@@ -653,6 +675,7 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 			ref: virtualizer.measureElement,
 			className: row.padded ? "tw:pt-0.5" : void 0,
 			style: row.group === void 0 ? placeAt(start) : void 0,
+			"data-group-last": isGroupLast(row) ? "" : void 0,
 			children: row.type === "label" ? /* @__PURE__ */ jsx(ComboboxGroupLabel, { children: labels.get(row.group ?? "") }) : /* @__PURE__ */ jsx(VirtualRowContext, {
 				value: {
 					index: row.index,
@@ -661,7 +684,7 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 				},
 				children: row.group === void 0 ? renderItem(row.item) : renderGroupItem(row.item)
 			})
-		}, key);
+		}, placeOf(row, index));
 	};
 	return /* @__PURE__ */ jsx(ComboboxList, {
 		ref: attachList,
@@ -689,12 +712,17 @@ const ComboboxVirtualList = ({ renderItem, renderGroupItem, groupToLabel, ref })
 };
 //#endregion
 //#region src/components/Combobox/ComboboxOptions.tsx
+/** A group's items fade and slide in as it unfolds and out as it folds; nothing under reduced motion. */
+const ITEM_MOTION = {
+	entering: "tw:motion-safe:animate-in tw:motion-safe:fade-in-0 tw:motion-safe:slide-in-from-top-1 tw:motion-safe:duration-150 tw:motion-safe:ease-out",
+	leaving: "tw:motion-safe:animate-out tw:motion-safe:fade-out-0 tw:motion-safe:slide-out-to-top-1 tw:motion-safe:duration-100 tw:motion-safe:ease-in tw:motion-safe:fill-mode-forwards"
+};
 /**
 * What a combobox popup lists: every row, the empty slot, and the loading text in it.
 *
 * - The list is windowed while `virtualized`, fully rendered otherwise.
 */
-const ComboboxOptions = ({ isLoading, empty, virtualized, listRef, groupHeaders, groupToLabel, indicator, itemToLabel, itemToIcon, itemToDisabled, createLabel, groupRowState }) => {
+const ComboboxOptions = ({ isLoading, empty, virtualized, listRef, groupHeaders, groupToLabel, indicator, itemToLabel, itemToIcon, itemToDisabled, itemToLocked, createLabel, groupRowState }) => {
 	const renderItem = (item, className) => {
 		if (isSelectAllItem(item)) return /* @__PURE__ */ jsx(ComboboxItem, {
 			value: item,
@@ -711,21 +739,26 @@ const ComboboxOptions = ({ isLoading, empty, virtualized, listRef, groupHeaders,
 			indicator,
 			icon: itemToIcon(item),
 			disabled: itemToDisabled(item),
+			locked: itemToLocked?.(item),
 			className,
 			children: itemToLabel(item)
 		});
 	};
 	const renderGroupItem = (item) => {
 		const header = groupHeaders.headerOf(item);
-		if (!header) return renderItem(item, groupHeaders.collapsible ? GROUP_CHILD_INDENT : void 0);
+		if (!header) {
+			const motion = groupHeaders.motionOf(item);
+			return renderItem(item, cn(groupHeaders.collapsible && "tw:pl-8 tw:group-data-[variant=default]/combobox-content:pl-10", motion && ITEM_MOTION[motion]));
+		}
 		const state = groupRowState?.(item);
 		return /* @__PURE__ */ jsx(ComboboxGroupHeader, {
 			value: item,
 			expanded: groupHeaders.collapsible ? !header.collapsed : void 0,
-			onToggle: () => groupHeaders.toggle(header.index),
+			onToggle: (all, from) => all ? groupHeaders.setAllCollapsed(!header.collapsed, from) : groupHeaders.toggle(header.index, from),
 			checked: state?.checked,
 			indicator,
 			disabled: state?.disabled ?? false,
+			locked: state?.locked,
 			children: groupToLabel(header.group)
 		});
 	};
@@ -759,22 +792,114 @@ const ComboboxSeparator = ({ ref, className, ...props }) => /* @__PURE__ */ jsx(
 */
 const useWithCreated = (list, created) => useMemo(() => created.length === 0 ? list : [...list, ...toEntries(list, created)], [list, created]);
 //#endregion
+//#region src/components/Combobox/groupFlip.ts
+/** How long the groups under a fold take to slide to their new place. */
+const SLIDE_MS = 150;
+/** A capture no commit moved anything for in this long is dropped. */
+const STALE_MS = 500;
+const listOf = (from) => from.closest("[role=listbox]") ?? from.ownerDocument.getElementById(from.getAttribute("aria-controls") ?? "");
+const topIn = (list, element) => element.getBoundingClientRect().top - list.getBoundingClientRect().top + list.scrollTop;
+/**
+* Slides a list's groups from where they sat before a fold to where it puts them.
+*
+* - `capture` records each group's place; the next commit that moves one plays the slide.
+* - A group the windowed list only now renders slides by the move of the group above it.
+* - The caller skips `capture` under reduced motion; nothing plays without Web Animations.
+*/
+const useGroupFlip = (enabled) => {
+	const captureRef = useRef(null);
+	const slidesRef = useRef(/* @__PURE__ */ new WeakMap());
+	const settledTop = (list, group) => {
+		const slide = slidesRef.current.get(group);
+		const progress = slide?.animation.effect?.getComputedTiming().progress;
+		const offset = slide && typeof progress === "number" ? slide.shift * (1 - progress) : 0;
+		return topIn(list, group) - offset;
+	};
+	useLayoutEffect(() => {
+		const capture = captureRef.current;
+		if (!capture) return;
+		if (performance.now() - capture.at > STALE_MS) {
+			captureRef.current = null;
+			return;
+		}
+		const groups = [...capture.list.querySelectorAll("[role=group]")];
+		let lastShift = 0;
+		const shifts = groups.map((group) => {
+			const before = capture.tops.get(group);
+			const shift = before === void 0 ? lastShift : before - settledTop(capture.list, group);
+			lastShift = shift;
+			return shift;
+		});
+		if (shifts.every((shift) => Math.abs(shift) < .5)) return;
+		captureRef.current = null;
+		groups.forEach((group, index) => {
+			const shift = shifts[index] ?? 0;
+			slidesRef.current.get(group)?.animation.cancel();
+			if (Math.abs(shift) < .5) return;
+			const animation = group.animate([{ transform: `translateY(${shift}px)` }, { transform: "translateY(0)" }], {
+				duration: SLIDE_MS,
+				easing: "ease-out",
+				composite: "add"
+			});
+			slidesRef.current.set(group, {
+				animation,
+				shift
+			});
+		});
+	});
+	return { 
+	/** Records where the groups of the list `from` belongs to sit now. */
+capture: (from) => {
+		const list = from && listOf(from);
+		if (!enabled || !list || typeof list.animate !== "function") return;
+		const tops = /* @__PURE__ */ new Map();
+		for (const group of list.querySelectorAll("[role=group]")) tops.set(group, topIn(list, group));
+		captureRef.current = {
+			list,
+			tops,
+			at: performance.now()
+		};
+	} };
+};
+//#endregion
 //#region src/components/Combobox/groupHeaders.ts
+/** How long a folding group's items fade out before they leave the list. */
+const FOLD_MS = 100;
+/** How long an unfolding group's items animate in; their marker clears after it. */
+const ENTER_MS = 150;
+const NO_FOLDS = /* @__PURE__ */ new Set();
+const hasMotion = () => typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 /**
 * Gives each group a row (rendered with `ComboboxGroupHeader`) and collapses groups on request.
 *
 * - The row is the group's first item, so Base UI navigates, filters and presses it.
 * - A collapsed group hands Base UI only its row: Base UI never filters an empty query.
-* - A query shows every match regardless of collapse; a row shows only while its group matches.
+* - A query opens every group with a match; a fold made under it lasts until the query changes.
+* - A row shows only while its group matches.
 * - Collapse state is keyed by a group's position in `items`.
 */
-const useGroupHeaders = ({ items, collapsible, selectable, query, matches, groupToValue, isItemEqualToValue }) => {
-	const [collapsedIndexes, setCollapsedIndexes] = useState(() => /* @__PURE__ */ new Set());
+const useGroupHeaders = ({ items, collapsible, selectable, query, matches, groupToValue, isItemEqualToValue, startsCollapsed, startsOpen = false }) => {
+	const [collapsedIndexes, setCollapsedIndexes] = useState(() => startsOpen && collapsible && startsCollapsed && isGroupItems(items) ? new Set(items.flatMap((group, index) => startsCollapsed(group) ? [index] : [])) : /* @__PURE__ */ new Set());
+	const [searchFolds, setSearchFolds] = useState({
+		query: "",
+		indexes: /* @__PURE__ */ new Set()
+	});
+	/** The folds that apply now: those made without a query, or under this very query. */
+	const folded = query === "" ? collapsedIndexes : searchFolds.query === query ? searchFolds.indexes : NO_FOLDS;
+	const queryRef = useRef(query);
+	useLayoutEffect(() => {
+		queryRef.current = query;
+	}, [query]);
 	const highlightedRef = useRef(void 0);
+	/** The groups animating, and the query their fold belongs to. */
+	const [motion, setMotion] = useState(null);
+	const foldTimerRef = useRef(void 0);
+	useEffect(() => () => clearTimeout(foldTimerRef.current), []);
+	const flip = useGroupFlip(collapsible);
 	const enabled = (collapsible || selectable) && isGroupItems(items);
 	const headers = /* @__PURE__ */ new Map();
 	const listItems = !enabled ? items : items.map((group, index) => {
-		const collapsed = collapsible && query === "" && collapsedIndexes.has(index);
+		const collapsed = collapsible && folded.has(index);
 		const matching = query === "" ? group.items : group.items.filter(matches);
 		const row = groupToValue ? groupToValue(group) : createGroupHeaderItem(index);
 		headers.set(row, {
@@ -788,11 +913,78 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 			items: collapsed ? [row] : [row, ...group.items]
 		};
 	});
-	const toggle = (index) => setCollapsedIndexes((prev) => {
-		const next = new Set(prev);
-		if (!next.delete(index)) next.add(index);
-		return next;
-	});
+	/**
+	* Folds or unfolds groups under `scope`, the query the toggle was made under.
+	*
+	* - A fold made without a query always lands.
+	* - A fold made under a query the input no longer holds is dropped: it would never show.
+	*/
+	const setCollapsed = (indexes, collapsed, scope = query) => {
+		const apply = (prev) => {
+			const next = new Set(prev);
+			for (const index of indexes) if (collapsed) next.add(index);
+			else next.delete(index);
+			return next.size === prev.size && [...next].every((index) => prev.has(index)) ? prev : next;
+		};
+		if (scope === "") setCollapsedIndexes(apply);
+		else if (scope === queryRef.current) setSearchFolds((prev) => {
+			const base = prev.query === scope ? prev.indexes : NO_FOLDS;
+			const next = apply(base);
+			return next === base && prev.query === scope ? prev : {
+				query: scope,
+				indexes: next
+			};
+		});
+	};
+	const endMotionAfter = (ms, then) => {
+		clearTimeout(foldTimerRef.current);
+		foldTimerRef.current = setTimeout(() => {
+			then?.();
+			setMotion(null);
+		}, ms);
+	};
+	const folding = motion?.folding ? motion.indexes : /* @__PURE__ */ new Set();
+	/** A group still fading out counts as folded. */
+	const isCollapsed = (index) => folded.has(index) || folding.has(index);
+	/**
+	* Unfolds groups with their items animating in, or fades them out, then folds them.
+	*
+	* - The groups under them slide to their new place.
+	* - Folds still fading out finish at once, except those this call unfolds again.
+	*/
+	const animate = (indexes, collapse, from) => {
+		clearTimeout(foldTimerRef.current);
+		const animated = hasMotion();
+		const finishing = [...folding].filter((index) => collapse || !indexes.includes(index));
+		const changing = indexes.filter((index) => isCollapsed(index) !== collapse);
+		if (animated && (finishing.length > 0 || changing.length > 0)) flip.capture(from);
+		if (motion) setCollapsed(finishing, true, motion.scope);
+		if (!animated || changing.length === 0) {
+			setCollapsed(changing, collapse);
+			setMotion(null);
+			return;
+		}
+		const scope = query;
+		setMotion({
+			indexes: new Set(changing),
+			folding: collapse,
+			scope
+		});
+		if (collapse) endMotionAfter(FOLD_MS, () => setCollapsed(changing, true, scope));
+		else {
+			setCollapsed(changing, false);
+			endMotionAfter(ENTER_MS);
+		}
+	};
+	/** Unfolds a folded group, folds an open one. */
+	const toggle = (index, from) => animate([index], !isCollapsed(index), from);
+	/** Folds or unfolds every group. */
+	const setAllCollapsed = (collapse, from) => {
+		if (!isGroupItems(items)) return;
+		animate(items.map((_, index) => index), collapse, from);
+	};
+	const groupIndexOf = /* @__PURE__ */ new Map();
+	if (motion && enabled && isGroupItems(items)) for (const index of motion.indexes) for (const item of items[index]?.items ?? []) groupIndexOf.set(item, index);
 	const headerOf = (item) => headers.get(item);
 	const highlightedHeader = () => {
 		const item = highlightedRef.current;
@@ -808,6 +1000,12 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 		collapsible,
 		headerOf,
 		toggle,
+		setAllCollapsed,
+		/** `entering` / `leaving` for an item of the group that last unfolded / is folding. */
+		motionOf: (item) => {
+			if (!motion || !groupIndexOf.has(item)) return void 0;
+			return motion.folding ? "leaving" : "entering";
+		},
 		/** `filter` verdict for a group row (matches while its group does); `undefined` otherwise. */
 		filterHeader: (item) => {
 			const header = headerOf(item);
@@ -817,9 +1015,13 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 		onItemHighlighted: (item) => {
 			highlightedRef.current = item;
 		},
-		/** For the root's `onOpenChange`: a closed popup has no highlighted row to toggle. */
+		/** For the root's `onOpenChange`: clears the highlight on close, folds `startsCollapsed` on open. */
 		onOpenChange: (open) => {
 			if (!open) highlightedRef.current = void 0;
+			clearTimeout(foldTimerRef.current);
+			if (motion?.folding) setCollapsed(motion.indexes, true, motion.scope);
+			setMotion(null);
+			if (open && collapsible && startsCollapsed && isGroupItems(items)) setCollapsedIndexes(new Set(items.flatMap((group, index) => startsCollapsed(group) ? [index] : [])));
 		},
 		/**
 		* For the input's `onKeyDown`: `ArrowRight` / `ArrowLeft` expand / collapse the highlighted row.
@@ -832,7 +1034,7 @@ const useGroupHeaders = ({ items, collapsible, selectable, query, matches, group
 			if (!header) return;
 			event.preventDefault();
 			event.preventBaseUIHandler();
-			if (header.collapsed === (event.key === "ArrowRight")) toggle(header.index);
+			if (isCollapsed(header.index) === (event.key === "ArrowRight")) toggle(header.index, event.currentTarget);
 		}
 	};
 };
@@ -1078,4 +1280,4 @@ const filterByWords = (item, query, itemToString) => matchByWords(itemToString?.
 //#endregion
 export { BLANK_VALUES, Combobox$1 as Combobox, ComboboxClearButton, ComboboxOpenButton, ComboboxOptions, createCreatableItem, defaultGroupToLabel, defaultItemToDisabled, defaultItemToIcon, defaultQueryToCreateLabel, defaultRowLabel, defaultToCreateValue, filterByWords, flatItems, isCreatableItem, isGroupHeaderItem, isSelectAllItem, matchByWords, namedLabel, sanitizeTypedInput, selectAllItem, toEntries, toLabel, useCreatableStringValue, useGroupHeaders, useItemEquality, useQueryReporter, useVirtualList, useWithCreated, withBlankValues };
 
-//# sourceMappingURL=Combobox-BNhW0TDB.js.map
+//# sourceMappingURL=Combobox-CEesMe2M.js.map