@chayns-ui/core 0.9.1 → 0.9.4

package/dist/combo-box.css

@@ -4,97 +4,77 @@
     min-inline-size: 0;
   }
 
-  .chayns-combo-box__input {
+  .chayns-combo-box__trigger {
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     inline-size: 100%;
     min-block-size: calc(1.2em + 2 * var(--input-py) + 3px);
-    padding: var(--input-py) var(--k36) var(--input-py) var(--input-px);
+    padding: var(--input-py) var(--input-px);
     border: 1.5px solid var(--input-border);
     border-radius: 10px;
     background: var(--surface);
     color: var(--text);
+    cursor: pointer;
     font: inherit;
     line-height: 1.2;
     outline: none;
+    text-align: start;
     transition:
       border-color 0.18s ease,
       box-shadow 0.18s ease;
   }
 
-  .chayns-combo-box__input:focus {
+  .chayns-combo-box__trigger:focus-visible {
     border-color: var(--accent);
     box-shadow: 0 0 0 var(--focus-ring-size)
       rgb(var(--focus-ring-rgb), var(--focus-ring-alpha-soft));
   }
 
+  .chayns-combo-box__trigger:disabled {
+    cursor: not-allowed;
+  }
+
+  .chayns-combo-box__value {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .chayns-combo-box__label {
     position: absolute;
     inset-block-start: 0;
     inset-inline-start: 10px;
     padding-inline: var(--k5);
     background: var(--surface);
-    color: var(--text-3);
+    color: var(--accent);
     font-size: var(--fs-body);
     line-height: 1.2;
     pointer-events: none;
-    transform: translateY(calc(var(--input-py) + 1.5px + 0.6em - 50%));
+    transform: translateY(-50%) scale(0.8);
     transform-origin: left center;
-    transition:
-      transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
-      color 0.15s ease;
     white-space: nowrap;
   }
 
   .chayns-combo-box__chevron {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-end: var(--input-px);
     display: inline-flex;
+    flex: none;
     align-items: center;
     justify-content: center;
     color: var(--muted);
-    pointer-events: none;
-    transform: translateY(-50%);
     transition: transform 0.18s ease;
   }
 
   .chayns-combo-box--open .chayns-combo-box__chevron {
-    transform: translateY(-50%) rotate(180deg);
-  }
-
-  .chayns-combo-box--open .chayns-combo-box__label,
-  .chayns-combo-box__input:not(:placeholder-shown) + .chayns-combo-box__label {
-    color: var(--accent);
-    transform: translateY(-50%) scale(0.8);
-  }
-
-  .chayns-combo-box__chips {
-    position: absolute;
-    inset: 1.5px var(--input-px) auto;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--k5);
-    pointer-events: none;
-    transform: translateY(var(--input-py));
-  }
-
-  .chayns-combo-box__chip {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--k5);
-    padding: var(--k3) var(--k9);
-    border-radius: 999px;
-    background: var(--accent);
-    color: var(--on-accent);
-    font-size: var(--fs-caption);
-    font-weight: 500;
+    transform: rotate(180deg);
   }
 
   .chayns-combo-box__popup {
-    position: absolute;
-    inset-block-start: calc(100% + var(--k4));
-    inset-inline: 0;
+    position: fixed;
     z-index: var(--z-popover);
+    box-sizing: border-box;
     max-block-size: min(320px, 50vh);
     overflow: auto;
     padding: var(--k6);
@@ -102,21 +82,34 @@
     border-radius: 12px;
     background: var(--surface);
     box-shadow: var(--shadow-pop);
+    opacity: 1;
+    transform: translateY(0);
+    transform-origin: top center;
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease;
+  }
+
+  .chayns-combo-box__popup[data-state='closed'] {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--k4)));
   }
 
   .chayns-combo-box__option {
     display: flex;
     align-items: center;
-    min-block-size: var(--k40);
-    padding: var(--k9) var(--k12);
+    min-block-size: var(--k32);
+    padding: var(--k6) var(--k12);
     border-radius: 8px;
     color: var(--text);
     cursor: pointer;
     font-size: var(--fs-body);
+    outline: none;
   }
 
   .chayns-combo-box__option:hover,
-  .chayns-combo-box__option--active {
+  .chayns-combo-box__option--active,
+  .chayns-combo-box__option:focus-visible {
     background: var(--surface-alt);
   }
 
@@ -125,6 +118,11 @@
     font-weight: 600;
   }
 
+  .chayns-combo-box__option--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   .chayns-combo-box__checkbox {
     display: inline-flex;
     flex: none;
@@ -152,10 +150,15 @@
     transform: rotate(-45deg) translate(1px, -1px);
   }
 
+  .chayns-combo-box__checkmark {
+    margin-inline-start: auto;
+    color: var(--accent);
+  }
+
   @media (prefers-reduced-motion: reduce) {
-    .chayns-combo-box__input,
-    .chayns-combo-box__label,
-    .chayns-combo-box__chevron {
+    .chayns-combo-box__trigger,
+    .chayns-combo-box__chevron,
+    .chayns-combo-box__popup {
       transition: none;
     }
   }

package/dist/components/button/Button.types.d.ts

@@ -18,7 +18,7 @@ export declare const BUTTON_VARIANTS: readonly ["primary", "outline", "ghost", "
  * Brands icons are rendered as a single icon and must not be combined with
  * `far` or `fas`.
  */
-export type ButtonIcon = `fa-${string}` | `fab fa-${string}`;
+export type ButtonIcon = `fa-${string}` | `fab fa-${string}` | `ts-${string}`;
 /**
  * @description Visible content that gives a `Button` its accessible name.
  * Excludes `boolean`, `null` and `undefined` so a `Button` can never be

package/dist/components/button/Button.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,eAAe,oDAKiB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE,CAAC;AAE7D;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3E;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpF;;;;;OAKG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,EAAE,aAAa,CAAC;CACzB"}
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D;;;;;GAKG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEvE;;;GAGG;AACH,eAAO,MAAM,eAAe,oDAKiB,CAAC;AAE9C;;;;;;GAMG;AACH,MAAM,MAAM,UAAU,GAAG,MAAM,MAAM,EAAE,GAAG,UAAU,MAAM,EAAE,GAAG,MAAM,MAAM,EAAE,CAAC;AAE9E;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;AAE3E;;;;GAIG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACpF;;;;;OAKG;IACH,OAAO,EAAE,aAAa,CAAC;IAEvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,EAAE,aAAa,CAAC;CACzB"}

package/dist/components/button/Button.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.types.js","names":[],"sources":["../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\n/**\n * @description Supported visual emphasis levels for {@link ButtonProps} and\n * `IconButtonProps`. Milestone 1 supports exactly these four values; there is\n * no default variant and no fifth value.\n * @see {@link https://tappqa.tobit.com/Bodywork/DesignSystem/#buttons | DesignSystem — Buttons & Aktionen}\n */\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger';\n\n/**\n * Runtime representation of the finite Button variant contract.\n * Keep this list as the single source for Storybook controls and iteration.\n */\nexport const BUTTON_VARIANTS = [\n  'primary',\n  'outline',\n  'ghost',\n  'danger',\n] as const satisfies readonly ButtonVariant[];\n\n/**\n * @description A FontAwesome Classic icon name (e.g. `fa-plus`) or a\n * FontAwesome Brands icon including its style prefix (e.g. `fab fa-github`).\n * Classic icons resolve the matching Regular and Solid weights internally;\n * Brands icons are rendered as a single icon and must not be combined with\n * `far` or `fas`.\n */\nexport type ButtonIcon = `fa-${string}` | `fab fa-${string}`;\n\n/**\n * @description Visible content that gives a `Button` its accessible name.\n * Excludes `boolean`, `null` and `undefined` so a `Button` can never be\n * rendered without real, visible label content.\n */\nexport type ButtonContent = Exclude<ReactNode, boolean | null | undefined>;\n\n/**\n * @description Props for a visible-label native action button. Renders a\n * native `<button>` and forwards all remaining native button props, events,\n * `className` and `ref`.\n */\nexport interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {\n  /**\n   * @description Visual emphasis that communicates the action's role within\n   * its action scope. At most one `primary` action should exist per closed\n   * action scope (page, card, dialog, drawer, form, wizard step, or closed\n   * accordion content).\n   */\n  variant: ButtonVariant;\n\n  /**\n   * @description Optional leading FontAwesome Classic or Brands icon name.\n   * Always rendered before `children`; there is no trailing-icon or icon-only\n   * mode on `Button` itself — use `IconButton` for an icon-only action.\n   */\n  icon?: ButtonIcon;\n\n  /**\n   * Shows a spinner while preserving the button label and prevents repeated\n   * activation through the native disabled state.\n   */\n  loading?: boolean;\n\n  /**\n   * @description Visible, non-empty content used as the button label. Loading\n   * preserves this content while adding a spinner.\n   */\n  children: ButtonContent;\n}\n"],"mappings":";;;;;AAcA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;AACF"}
+{"version":3,"file":"Button.types.js","names":[],"sources":["../../../src/components/button/Button.types.ts"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\n/**\n * @description Supported visual emphasis levels for {@link ButtonProps} and\n * `IconButtonProps`. Milestone 1 supports exactly these four values; there is\n * no default variant and no fifth value.\n * @see {@link https://tappqa.tobit.com/Bodywork/DesignSystem/#buttons | DesignSystem — Buttons & Aktionen}\n */\nexport type ButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger';\n\n/**\n * Runtime representation of the finite Button variant contract.\n * Keep this list as the single source for Storybook controls and iteration.\n */\nexport const BUTTON_VARIANTS = [\n  'primary',\n  'outline',\n  'ghost',\n  'danger',\n] as const satisfies readonly ButtonVariant[];\n\n/**\n * @description A FontAwesome Classic icon name (e.g. `fa-plus`) or a\n * FontAwesome Brands icon including its style prefix (e.g. `fab fa-github`).\n * Classic icons resolve the matching Regular and Solid weights internally;\n * Brands icons are rendered as a single icon and must not be combined with\n * `far` or `fas`.\n */\nexport type ButtonIcon = `fa-${string}` | `fab fa-${string}` | `ts-${string}`;\n\n/**\n * @description Visible content that gives a `Button` its accessible name.\n * Excludes `boolean`, `null` and `undefined` so a `Button` can never be\n * rendered without real, visible label content.\n */\nexport type ButtonContent = Exclude<ReactNode, boolean | null | undefined>;\n\n/**\n * @description Props for a visible-label native action button. Renders a\n * native `<button>` and forwards all remaining native button props, events,\n * `className` and `ref`.\n */\nexport interface ButtonProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {\n  /**\n   * @description Visual emphasis that communicates the action's role within\n   * its action scope. At most one `primary` action should exist per closed\n   * action scope (page, card, dialog, drawer, form, wizard step, or closed\n   * accordion content).\n   */\n  variant: ButtonVariant;\n\n  /**\n   * @description Optional leading FontAwesome Classic or Brands icon name.\n   * Always rendered before `children`; there is no trailing-icon or icon-only\n   * mode on `Button` itself — use `IconButton` for an icon-only action.\n   */\n  icon?: ButtonIcon;\n\n  /**\n   * Shows a spinner while preserving the button label and prevents repeated\n   * activation through the native disabled state.\n   */\n  loading?: boolean;\n\n  /**\n   * @description Visible, non-empty content used as the button label. Loading\n   * preserves this content while adding a spinner.\n   */\n  children: ButtonContent;\n}\n"],"mappings":";;;;;AAcA,IAAa,kBAAkB;CAC7B;CACA;CACA;CACA;AACF"}

package/dist/components/button/button-icon/ButtonIcon.js

@@ -1,11 +1,11 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/button-icon/ButtonIcon.tsx
 var ButtonIcon = ({ icon }) => {
-	const isBrandIcon = icon.startsWith("fab ");
+	const isPlainIcon = icon.startsWith("fab ") || icon.startsWith("ts-");
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "chayns-button-icon",
-		children: isBrandIcon ? /* @__PURE__ */ jsx("span", {
+		children: isPlainIcon ? /* @__PURE__ */ jsx("span", {
 			className: "chayns-button-icon__weight",
 			children: /* @__PURE__ */ jsx("i", { className: icon })
 		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {

package/dist/components/button/button-icon/ButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.js","names":[],"sources":["../../../../src/components/button/button-icon/ButtonIcon.tsx"],"sourcesContent":["import type { ButtonIcon as ButtonIconName } from '../Button.types.js';\n\ninterface ButtonIconProps {\n  icon: ButtonIconName;\n}\n\nconst ButtonIcon = ({ icon }: ButtonIconProps) => {\n  const isBrandIcon = icon.startsWith('fab ');\n\n  return (\n    <span aria-hidden=\"true\" className=\"chayns-button-icon\">\n      {isBrandIcon ? (\n        <span className=\"chayns-button-icon__weight\">\n          <i className={icon} />\n        </span>\n      ) : (\n        <>\n          <span className=\"chayns-button-icon__weight\">\n            <i className={`far ${icon}`} />\n          </span>\n          <span className=\"chayns-button-icon__weight chayns-button-icon__weight--active\">\n            <i className={`fas ${icon}`} />\n          </span>\n        </>\n      )}\n    </span>\n  );\n};\n\nexport default ButtonIcon;\n"],"mappings":";;AAMA,IAAM,cAAc,EAAE,WAA4B;CAChD,MAAM,cAAc,KAAK,WAAW,MAAM;CAE1C,OACE,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAChC,UAAA,cACC,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,KAAO,CAAA;EACjB,CAAA,IAEN,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;EAC1B,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;EAC1B,CAAA,CACN,EAAA,CAAA;CAEA,CAAA;AAEV"}
+{"version":3,"file":"ButtonIcon.js","names":[],"sources":["../../../../src/components/button/button-icon/ButtonIcon.tsx"],"sourcesContent":["import type { ButtonIcon as ButtonIconName } from '../Button.types.js';\n\ninterface ButtonIconProps {\n  icon: ButtonIconName;\n}\n\nconst ButtonIcon = ({ icon }: ButtonIconProps) => {\n  const isPlainIcon = icon.startsWith('fab ') || icon.startsWith('ts-');\n\n  return (\n    <span aria-hidden=\"true\" className=\"chayns-button-icon\">\n      {isPlainIcon ? (\n        <span className=\"chayns-button-icon__weight\">\n          <i className={icon} />\n        </span>\n      ) : (\n        <>\n          <span className=\"chayns-button-icon__weight\">\n            <i className={`far ${icon}`} />\n          </span>\n          <span className=\"chayns-button-icon__weight chayns-button-icon__weight--active\">\n            <i className={`fas ${icon}`} />\n          </span>\n        </>\n      )}\n    </span>\n  );\n};\n\nexport default ButtonIcon;\n"],"mappings":";;AAMA,IAAM,cAAc,EAAE,WAA4B;CAChD,MAAM,cAAc,KAAK,WAAW,MAAM,KAAK,KAAK,WAAW,KAAK;CAEpE,OACE,oBAAC,QAAD;EAAM,eAAY;EAAO,WAAU;EAChC,UAAA,cACC,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,KAAO,CAAA;EACjB,CAAA,IAEN,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;EAC1B,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,KAAD,EAAG,WAAW,OAAO,OAAS,CAAA;EAC1B,CAAA,CACN,EAAA,CAAA;CAEA,CAAA;AAEV"}

package/dist/components/combo-box/ComboBox.d.ts

@@ -1,5 +1,5 @@
 import type { ComboBoxOptionProps } from './ComboBox.types.js';
-declare const ComboBox: import("react").ForwardRefExoticComponent<(Omit<import("./ComboBox.types.js").ComboBoxSingleProps, "ref"> | Omit<import("./ComboBox.types.js").ComboBoxMultipleProps, "ref">) & import("react").RefAttributes<HTMLInputElement>> & {
+declare const ComboBox: import("react").ForwardRefExoticComponent<(Omit<import("./ComboBox.types.js").ComboBoxSingleProps, "ref"> | Omit<import("./ComboBox.types.js").ComboBoxMultipleProps, "ref">) & import("react").RefAttributes<HTMLButtonElement>> & {
     Option: import("react").ForwardRefExoticComponent<Omit<ComboBoxOptionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
 export default ComboBox;

package/dist/components/combo-box/ComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,qBAAqB,CAAC;AA2U9E,QAAA,MAAM,QAAQ;;CAA0C,CAAC;AAEzD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ComboBox.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,mBAAmB,EAAiB,MAAM,qBAAqB,CAAC;AAua9E,QAAA,MAAM,QAAQ;;CAA0C,CAAC;AAEzD,eAAe,QAAQ,CAAC"}

package/dist/components/combo-box/ComboBox.js

@@ -2,6 +2,7 @@ import ButtonIcon from "../button/button-icon/ButtonIcon.js";
 import { ComboBoxContext, getOptionLabel, useComboBoxContext } from "./ComboBoxContext.js";
 import { Children, Fragment, forwardRef, isValidElement, useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
 //#region src/components/combo-box/ComboBox.tsx
 function getOptionElements(children) {
 	const options = [];
@@ -13,88 +14,139 @@ function getOptionElements(children) {
 	});
 	return options;
 }
-var Option = forwardRef(function Option({ children, className, value, ...optionProps }, ref) {
+var Option = forwardRef(function Option({ children, className, disabled = false, value, ...optionProps }, ref) {
 	const comboBox = useComboBoxContext();
-	const isVisible = comboBox.visibleValues.includes(value);
 	const isSelected = comboBox.isSelected(value);
+	const isActive = comboBox.activeValue === value;
 	const resolvedClassName = [
 		"chayns-combo-box__option",
 		isSelected ? "chayns-combo-box__option--selected" : "",
-		comboBox.activeValue === value ? "chayns-combo-box__option--active" : "",
+		isActive ? "chayns-combo-box__option--active" : "",
+		disabled ? "chayns-combo-box__option--disabled" : "",
 		className
 	].filter(Boolean).join(" ");
-	if (!isVisible) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		...optionProps,
+		"aria-disabled": disabled || void 0,
 		"aria-selected": isSelected,
 		className: resolvedClassName,
 		id: comboBox.optionId(value),
-		onMouseDown: (event) => event.preventDefault(),
 		onClick: (event) => {
 			optionProps.onClick?.(event);
-			if (!event.defaultPrevented) comboBox.select(value);
+			if (!event.defaultPrevented && !disabled) comboBox.select(value);
 		},
 		onKeyDown: (event) => {
 			optionProps.onKeyDown?.(event);
-			if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+			if (!event.defaultPrevented && !disabled && (event.key === "Enter" || event.key === " ")) {
 				event.preventDefault();
 				comboBox.select(value);
 			}
 		},
 		ref,
 		role: "option",
-		tabIndex: -1,
-		children: [comboBox.multiple ? /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: "chayns-combo-box__checkbox",
-			"data-checked": isSelected || void 0
-		}) : null, children]
+		tabIndex: isActive && !disabled ? 0 : -1,
+		children: [
+			comboBox.multiple ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "chayns-combo-box__checkbox",
+				"data-checked": isSelected || void 0
+			}) : null,
+			children,
+			!comboBox.multiple && isSelected ? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "chayns-combo-box__checkmark",
+				children: /* @__PURE__ */ jsx("i", { className: "fas fa-check" })
+			}) : null
+		]
 	});
 });
 var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
-	const { "aria-label": ariaLabel, children, className, defaultValue, disabled, id, multiple = false, onValueChange, openOnFocus = true, placeholder, value, ...inputProps } = props;
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, defaultValue, disabled, id, multiple = false, onClick, onKeyDown, onValueChange, placeholder, value, ...buttonProps } = props;
 	const generatedId = useId();
-	const inputId = id ?? generatedId;
-	const listboxId = `${inputId}-listbox`;
+	const triggerId = id ?? generatedId;
+	const listboxId = `${triggerId}-listbox`;
+	const labelId = `${triggerId}-label`;
 	const rootRef = useRef(null);
-	const inputRef = useRef(null);
+	const popupRef = useRef(null);
+	const triggerRef = useRef(null);
+	const [popupStyle, setPopupStyle] = useState();
 	const optionElements = useMemo(() => getOptionElements(children), [children]);
 	const optionMap = useMemo(() => new Map(optionElements.map((option) => [option.props.value, option])), [optionElements]);
+	const focusableValues = optionElements.filter((option) => !option.props.disabled).map((option) => option.props.value);
 	const defaultValues = multiple ? defaultValue?.map((option) => option.props.value) ?? [] : [];
 	const controlledValues = multiple ? value?.map((option) => option.props.value) ?? [] : [];
 	const [uncontrolledValue, setUncontrolledValue] = useState(multiple ? "" : defaultValue ?? "");
 	const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);
-	const [inputText, setInputText] = useState(multiple ? "" : defaultValue ?? "");
 	const [open, setOpen] = useState(false);
+	const [popupMounted, setPopupMounted] = useState(false);
+	const [popupClosing, setPopupClosing] = useState(false);
 	const [activeValue, setActiveValue] = useState();
 	const isControlled = value !== void 0;
 	const selectedValue = multiple ? "" : isControlled ? value : uncontrolledValue;
 	const selectedValues = multiple ? isControlled ? controlledValues : uncontrolledValues : [];
-	const normalizedFilter = inputText.trim().toLocaleLowerCase();
-	const visibleValues = optionElements.filter((option) => {
-		const label = getOptionLabel(option.props.children).toLocaleLowerCase();
-		return normalizedFilter === "" || label.includes(normalizedFilter);
-	}).map((option) => option.props.value);
+	const selectedOptions = selectedValues.map((selected) => optionMap.get(selected)).filter((option) => option !== void 0);
+	const selectedOption = optionMap.get(selectedValue);
+	const displayValue = multiple ? selectedOptions.map((option) => getOptionLabel(option.props.children)).join(", ") : selectedOption === void 0 ? "" : getOptionLabel(selectedOption.props.children);
+	const resolvedClassName = ["chayns-combo-box", open ? "chayns-combo-box--open" : ""].filter(Boolean).join(" ");
+	const triggerClassName = ["chayns-combo-box__trigger", className].filter(Boolean).join(" ");
+	const accessibleName = ariaLabelledBy ?? (ariaLabel === void 0 && placeholder !== void 0 ? labelId : void 0);
+	if (ariaLabel === void 0 && ariaLabelledBy === void 0 && placeholder === void 0) throw new Error("ComboBox requires placeholder, aria-label or aria-labelledby.");
+	useEffect(() => {
+		if (open) {
+			if (!popupMounted) {
+				setPopupMounted(true);
+				setPopupClosing(true);
+				return;
+			}
+			if (popupClosing) {
+				const frame = requestAnimationFrame(() => setPopupClosing(false));
+				return () => cancelAnimationFrame(frame);
+			}
+		} else if (popupMounted) setPopupClosing(true);
+	}, [
+		open,
+		popupClosing,
+		popupMounted
+	]);
 	useEffect(() => {
-		if (open && activeValue === void 0) setActiveValue(visibleValues[0]);
+		if (!open || activeValue === void 0) return;
+		document.getElementById(`${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, "-")}`)?.focus();
 	}, [
 		activeValue,
+		listboxId,
 		open,
-		visibleValues
+		popupMounted
 	]);
 	useEffect(() => {
 		if (!open) return;
+		function updatePopupPosition() {
+			const trigger = triggerRef.current;
+			if (!trigger) return;
+			const { bottom, left, width } = trigger.getBoundingClientRect();
+			setPopupStyle({
+				insetBlockStart: `calc(${bottom}px + var(--k4))`,
+				insetInlineStart: left,
+				inlineSize: width
+			});
+		}
 		function closeOnOutsidePress(event) {
-			if (event.target instanceof Node && !rootRef.current?.contains(event.target)) {
-				commitInput();
+			if (event.target instanceof Node && !rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) {
 				setOpen(false);
+				setActiveValue(void 0);
 			}
 		}
+		updatePopupPosition();
+		window.addEventListener("resize", updatePopupPosition);
+		window.addEventListener("scroll", updatePopupPosition, true);
 		document.addEventListener("pointerdown", closeOnOutsidePress);
-		return () => document.removeEventListener("pointerdown", closeOnOutsidePress);
-	});
-	function setInputElement(element) {
-		inputRef.current = element;
+		return () => {
+			window.removeEventListener("resize", updatePopupPosition);
+			window.removeEventListener("scroll", updatePopupPosition, true);
+			document.removeEventListener("pointerdown", closeOnOutsidePress);
+		};
+	}, [open]);
+	function setTriggerElement(element) {
+		triggerRef.current = element;
 		if (typeof ref === "function") ref(element);
 		else if (ref !== null) ref.current = element;
 	}
@@ -107,122 +159,124 @@ var ComboBoxRoot = forwardRef(function ComboBoxRoot(props, ref) {
 		const nextOptions = nextValues.map((nextValue) => optionMap.get(nextValue)).filter((option) => option !== void 0);
 		onValueChange?.(nextOptions);
 	}
-	function commitInput() {
-		if (!multiple && inputText !== selectedValue) emitValue(inputText);
+	function closeAndFocusTrigger() {
+		setOpen(false);
+		setActiveValue(void 0);
+		triggerRef.current?.focus();
 	}
 	function select(nextValue) {
-		if (multiple) {
-			emitValues(selectedValues.includes(nextValue) ? selectedValues.filter((selected) => selected !== nextValue) : [...selectedValues, nextValue]);
-			setInputText("");
-			setActiveValue(void 0);
-			setOpen(true);
-			return;
-		}
-		const option = optionMap.get(nextValue);
-		emitValue(nextValue);
-		setInputText(option === void 0 ? nextValue : getOptionLabel(option.props.children));
-		setActiveValue(void 0);
-		setOpen(false);
+		if (multiple) emitValues(selectedValues.includes(nextValue) ? selectedValues.filter((selected) => selected !== nextValue) : [...selectedValues, nextValue]);
+		else emitValue(nextValue);
+		closeAndFocusTrigger();
 	}
-	function handleChange(event) {
-		setInputText(event.target.value);
-		setActiveValue(void 0);
+	function openPopup() {
+		if (disabled || focusableValues.length === 0) return;
+		const selectedFocusableValue = focusableValues.find((optionValue) => multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue);
+		setActiveValue(selectedFocusableValue ?? focusableValues[0]);
 		setOpen(true);
-		props.onChange?.(event);
 	}
-	function handleBlur(event) {
-		props.onBlur?.(event);
-		if (!rootRef.current?.contains(event.relatedTarget)) {
-			commitInput();
-			setOpen(false);
+	function moveActive(direction) {
+		if (focusableValues.length === 0) return;
+		const currentIndex = activeValue === void 0 ? -1 : focusableValues.indexOf(activeValue);
+		const nextIndex = currentIndex === -1 ? direction === 1 ? 0 : focusableValues.length - 1 : (currentIndex + direction + focusableValues.length) % focusableValues.length;
+		setActiveValue(focusableValues[nextIndex]);
+	}
+	function handleTriggerClick(event) {
+		onClick?.(event);
+		if (!event.defaultPrevented) {
+			if (open) closeAndFocusTrigger();
+			else openPopup();
 		}
 	}
-	function handleKeyDown(event) {
-		const currentIndex = activeValue === void 0 ? -1 : visibleValues.indexOf(activeValue);
-		let nextIndex = currentIndex;
-		if (event.key === "ArrowDown") nextIndex = Math.min(currentIndex + 1, visibleValues.length - 1);
-		if (event.key === "ArrowUp") nextIndex = Math.max(currentIndex - 1, 0);
-		if (event.key === "Home") nextIndex = 0;
-		if (event.key === "End") nextIndex = visibleValues.length - 1;
-		if (nextIndex !== currentIndex && visibleValues[nextIndex] !== void 0) {
+	function handleTriggerKeyDown(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "ArrowDown" && event.altKey) {
+			event.preventDefault();
+			openPopup();
+		}
+	}
+	function handleListboxKeyDown(event) {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			moveActive(1);
+		} else if (event.key === "ArrowUp") {
 			event.preventDefault();
-			setActiveValue(visibleValues[nextIndex]);
-			setOpen(true);
-		} else if (event.key === "Enter" && activeValue !== void 0) {
+			moveActive(-1);
+		} else if (event.key === "Home") {
 			event.preventDefault();
-			select(activeValue);
+			setActiveValue(focusableValues[0]);
+		} else if (event.key === "End") {
+			event.preventDefault();
+			setActiveValue(focusableValues.at(-1));
 		} else if (event.key === "Escape") {
 			event.preventDefault();
-			setInputText(multiple ? "" : selectedValue);
-			setActiveValue(void 0);
+			closeAndFocusTrigger();
+		} else if (event.key === "Tab") {
 			setOpen(false);
+			setActiveValue(void 0);
 		}
-		props.onKeyDown?.(event);
 	}
-	const resolvedClassName = ["chayns-combo-box", open ? "chayns-combo-box--open" : ""].filter(Boolean).join(" ");
-	const describedLabel = placeholder === void 0 ? void 0 : `${inputId}-label`;
-	const selectedOptions = selectedValues.map((selected) => optionMap.get(selected)).filter((option) => option !== void 0);
-	const inputClassName = ["chayns-combo-box__input", className].filter(Boolean).join(" ");
 	return /* @__PURE__ */ jsx(ComboBoxContext.Provider, {
 		value: {
 			activeValue,
-			close: () => setOpen(false),
-			inputText,
 			isSelected: (optionValue) => multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,
 			multiple,
 			optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, "-")}`,
-			select,
-			visibleValues
+			select
 		},
 		children: /* @__PURE__ */ jsxs("div", {
 			className: resolvedClassName,
 			ref: rootRef,
 			children: [
-				multiple ? /* @__PURE__ */ jsx("div", {
-					className: "chayns-combo-box__chips",
-					"aria-hidden": "true",
-					children: selectedOptions.map((option) => /* @__PURE__ */ jsx("span", {
-						className: "chayns-combo-box__chip",
-						children: option.props.children
-					}, option.props.value))
-				}) : null,
-				/* @__PURE__ */ jsx("input", {
-					...inputProps,
-					"aria-activedescendant": open && activeValue ? `${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, "-")}` : void 0,
-					"aria-autocomplete": "list",
+				/* @__PURE__ */ jsxs("button", {
+					...buttonProps,
 					"aria-controls": listboxId,
 					"aria-expanded": open,
+					"aria-haspopup": "listbox",
 					"aria-label": ariaLabel,
-					className: inputClassName,
+					"aria-labelledby": accessibleName,
+					className: triggerClassName,
 					disabled,
-					id: inputId,
-					onBlur: handleBlur,
-					onChange: handleChange,
-					onFocus: () => openOnFocus && setOpen(true),
-					onKeyDown: handleKeyDown,
-					placeholder: placeholder === void 0 ? void 0 : " ",
-					ref: setInputElement,
-					role: "combobox",
-					value: inputText
+					id: triggerId,
+					onClick: handleTriggerClick,
+					onKeyDown: handleTriggerKeyDown,
+					ref: setTriggerElement,
+					type: "button",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "chayns-combo-box__value",
+						children: displayValue || placeholder
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "chayns-combo-box__chevron",
+						children: /* @__PURE__ */ jsx(ButtonIcon, { icon: "fa-chevron-down" })
+					})]
 				}),
-				placeholder !== void 0 ? /* @__PURE__ */ jsx("label", {
+				placeholder !== void 0 ? /* @__PURE__ */ jsx("span", {
 					className: "chayns-combo-box__label",
-					htmlFor: inputId,
-					id: describedLabel,
+					id: labelId,
 					children: placeholder
 				}) : null,
-				/* @__PURE__ */ jsx("span", {
-					"aria-hidden": "true",
-					className: "chayns-combo-box__chevron",
-					children: /* @__PURE__ */ jsx(ButtonIcon, { icon: "fa-chevron-down" })
-				}),
-				open ? /* @__PURE__ */ jsx("div", {
+				popupMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+					"aria-hidden": !open && popupClosing ? true : void 0,
 					"aria-multiselectable": multiple || void 0,
 					className: "chayns-combo-box__popup",
+					"data-state": popupClosing ? "closed" : "open",
 					id: listboxId,
+					inert: !open && popupClosing,
+					onKeyDown: handleListboxKeyDown,
+					onTransitionEnd: (event) => {
+						if (popupClosing && event.propertyName === "opacity") {
+							setPopupMounted(false);
+							setPopupClosing(false);
+						}
+					},
+					ref: popupRef,
 					role: "listbox",
+					style: popupStyle,
+					tabIndex: -1,
 					children
-				}) : null
+				}), document.body) : null
 			]
 		})
 	});

package/dist/components/combo-box/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, ReactNode } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport { ComboBoxContext, getOptionLabel, useComboBoxContext } from './ComboBoxContext.js';\nimport type { ComboBoxOptionProps, ComboBoxProps } from './ComboBox.types.js';\n\nfunction getOptionElements(children: ComboBoxProps['children']) {\n  const options: ReactElement<ComboBoxOptionProps>[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const element = child as ReactElement<{ children?: ReactNode; value?: string }>;\n\n    if (element.type === Fragment) {\n      options.push(...getOptionElements(element.props.children));\n    } else if (typeof element.props.value === 'string') {\n      options.push(element as ReactElement<ComboBoxOptionProps>);\n    }\n  });\n\n  return options;\n}\n\nconst Option = forwardRef<HTMLDivElement, ComboBoxOptionProps>(function Option(\n  { children, className, value, ...optionProps },\n  ref,\n) {\n  const comboBox = useComboBoxContext();\n  const isVisible = comboBox.visibleValues.includes(value);\n  const isSelected = comboBox.isSelected(value);\n  const resolvedClassName = [\n    'chayns-combo-box__option',\n    isSelected ? 'chayns-combo-box__option--selected' : '',\n    comboBox.activeValue === value ? 'chayns-combo-box__option--active' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div\n      {...optionProps}\n      aria-selected={isSelected}\n      className={resolvedClassName}\n      id={comboBox.optionId(value)}\n      onMouseDown={(event) => event.preventDefault()}\n      onClick={(event) => {\n        optionProps.onClick?.(event);\n        if (!event.defaultPrevented) {\n          comboBox.select(value);\n        }\n      }}\n      onKeyDown={(event) => {\n        optionProps.onKeyDown?.(event);\n        if (!event.defaultPrevented && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          comboBox.select(value);\n        }\n      }}\n      ref={ref}\n      role=\"option\"\n      tabIndex={-1}\n    >\n      {comboBox.multiple ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"chayns-combo-box__checkbox\"\n          data-checked={isSelected || undefined}\n        />\n      ) : null}\n      {children}\n    </div>\n  );\n});\n\nconst ComboBoxRoot = forwardRef<HTMLInputElement, ComboBoxProps>(function ComboBoxRoot(props, ref) {\n  const {\n    'aria-label': ariaLabel,\n    children,\n    className,\n    defaultValue,\n    disabled,\n    id,\n    multiple = false,\n    onValueChange,\n    openOnFocus = true,\n    placeholder,\n    value,\n    ...inputProps\n  } = props;\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const listboxId = `${inputId}-listbox`;\n  const rootRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const optionElements = useMemo(() => getOptionElements(children), [children]);\n  const optionMap = useMemo(\n    () => new Map(optionElements.map((option) => [option.props.value, option])),\n    [optionElements],\n  );\n  const defaultValues = multiple\n    ? ((defaultValue as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const controlledValues = multiple\n    ? ((value as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n        (option) => option.props.value,\n      ) ?? [])\n    : [];\n  const [uncontrolledValue, setUncontrolledValue] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);\n  const [inputText, setInputText] = useState(\n    multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n  );\n  const [open, setOpen] = useState(false);\n  const [activeValue, setActiveValue] = useState<string>();\n  const isControlled = value !== undefined;\n  const selectedValue = multiple ? '' : isControlled ? (value as string) : uncontrolledValue;\n  const selectedValues = multiple ? (isControlled ? controlledValues : uncontrolledValues) : [];\n  const normalizedFilter = inputText.trim().toLocaleLowerCase();\n  const visibleValues = optionElements\n    .filter((option) => {\n      const label = getOptionLabel(option.props.children).toLocaleLowerCase();\n      return normalizedFilter === '' || label.includes(normalizedFilter);\n    })\n    .map((option) => option.props.value);\n\n  useEffect(() => {\n    if (open && activeValue === undefined) {\n      setActiveValue(visibleValues[0]);\n    }\n  }, [activeValue, open, visibleValues]);\n\n  useEffect(() => {\n    if (!open) {\n      return undefined;\n    }\n\n    function closeOnOutsidePress(event: PointerEvent) {\n      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) {\n        commitInput();\n        setOpen(false);\n      }\n    }\n\n    document.addEventListener('pointerdown', closeOnOutsidePress);\n    return () => document.removeEventListener('pointerdown', closeOnOutsidePress);\n  });\n\n  function setInputElement(element: HTMLInputElement | null) {\n    inputRef.current = element;\n\n    if (typeof ref === 'function') {\n      ref(element);\n    } else if (ref !== null) {\n      ref.current = element;\n    }\n  }\n\n  function emitValue(nextValue: string) {\n    if (!isControlled) {\n      setUncontrolledValue(nextValue);\n    }\n\n    (onValueChange as ((next: string) => void) | undefined)?.(nextValue);\n  }\n\n  function emitValues(nextValues: string[]) {\n    if (!isControlled) {\n      setUncontrolledValues(nextValues);\n    }\n\n    const nextOptions = nextValues\n      .map((nextValue) => optionMap.get(nextValue))\n      .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n    (onValueChange as ((next: ReactElement<ComboBoxOptionProps>[]) => void) | undefined)?.(\n      nextOptions,\n    );\n  }\n\n  function commitInput() {\n    if (!multiple && inputText !== selectedValue) {\n      emitValue(inputText);\n    }\n  }\n\n  function select(nextValue: string) {\n    if (multiple) {\n      const nextValues = selectedValues.includes(nextValue)\n        ? selectedValues.filter((selected) => selected !== nextValue)\n        : [...selectedValues, nextValue];\n      emitValues(nextValues);\n      setInputText('');\n      setActiveValue(undefined);\n      setOpen(true);\n      return;\n    }\n\n    const option = optionMap.get(nextValue);\n    emitValue(nextValue);\n    setInputText(option === undefined ? nextValue : getOptionLabel(option.props.children));\n    setActiveValue(undefined);\n    setOpen(false);\n  }\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    setInputText(event.target.value);\n    setActiveValue(undefined);\n    setOpen(true);\n    props.onChange?.(event);\n  }\n\n  function handleBlur(event: FocusEvent<HTMLInputElement>) {\n    props.onBlur?.(event);\n    if (!rootRef.current?.contains(event.relatedTarget)) {\n      commitInput();\n      setOpen(false);\n    }\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    const currentIndex = activeValue === undefined ? -1 : visibleValues.indexOf(activeValue);\n    let nextIndex = currentIndex;\n\n    if (event.key === 'ArrowDown') nextIndex = Math.min(currentIndex + 1, visibleValues.length - 1);\n    if (event.key === 'ArrowUp') nextIndex = Math.max(currentIndex - 1, 0);\n    if (event.key === 'Home') nextIndex = 0;\n    if (event.key === 'End') nextIndex = visibleValues.length - 1;\n\n    if (nextIndex !== currentIndex && visibleValues[nextIndex] !== undefined) {\n      event.preventDefault();\n      setActiveValue(visibleValues[nextIndex]);\n      setOpen(true);\n    } else if (event.key === 'Enter' && activeValue !== undefined) {\n      event.preventDefault();\n      select(activeValue);\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      setInputText(multiple ? '' : selectedValue);\n      setActiveValue(undefined);\n      setOpen(false);\n    }\n\n    props.onKeyDown?.(event);\n  }\n\n  const resolvedClassName = ['chayns-combo-box', open ? 'chayns-combo-box--open' : '']\n    .filter(Boolean)\n    .join(' ');\n  const describedLabel = placeholder === undefined ? undefined : `${inputId}-label`;\n  const selectedOptions = selectedValues\n    .map((selected) => optionMap.get(selected))\n    .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n  const inputClassName = ['chayns-combo-box__input', className].filter(Boolean).join(' ');\n\n  return (\n    <ComboBoxContext.Provider\n      value={{\n        activeValue,\n        close: () => setOpen(false),\n        inputText,\n        isSelected: (optionValue) =>\n          multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n        multiple,\n        optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`,\n        select,\n        visibleValues,\n      }}\n    >\n      <div className={resolvedClassName} ref={rootRef}>\n        {multiple ? (\n          <div className=\"chayns-combo-box__chips\" aria-hidden=\"true\">\n            {selectedOptions.map((option) => (\n              <span className=\"chayns-combo-box__chip\" key={option.props.value}>\n                {option.props.children}\n              </span>\n            ))}\n          </div>\n        ) : null}\n        <input\n          {...inputProps}\n          aria-activedescendant={\n            open && activeValue\n              ? `${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`\n              : undefined\n          }\n          aria-autocomplete=\"list\"\n          aria-controls={listboxId}\n          aria-expanded={open}\n          aria-label={ariaLabel}\n          className={inputClassName}\n          disabled={disabled}\n          id={inputId}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={() => openOnFocus && setOpen(true)}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder === undefined ? undefined : ' '}\n          ref={setInputElement}\n          role=\"combobox\"\n          value={inputText}\n        />\n        {placeholder !== undefined ? (\n          <label className=\"chayns-combo-box__label\" htmlFor={inputId} id={describedLabel}>\n            {placeholder}\n          </label>\n        ) : null}\n        <span aria-hidden=\"true\" className=\"chayns-combo-box__chevron\">\n          <ButtonIcon icon=\"fa-chevron-down\" />\n        </span>\n        {open ? (\n          <div\n            aria-multiselectable={multiple || undefined}\n            className=\"chayns-combo-box__popup\"\n            id={listboxId}\n            role=\"listbox\"\n          >\n            {children}\n          </div>\n        ) : null}\n      </div>\n    </ComboBoxContext.Provider>\n  );\n});\n\nconst ComboBox = Object.assign(ComboBoxRoot, { Option });\n\nexport default ComboBox;\n"],"mappings":"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"}
+{"version":3,"file":"ComboBox.js","names":[],"sources":["../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  Fragment,\n  isValidElement,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport type { CSSProperties, KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';\n\nimport ButtonIcon from '../button/button-icon/ButtonIcon.js';\nimport { ComboBoxContext, getOptionLabel, useComboBoxContext } from './ComboBoxContext.js';\nimport type { ComboBoxOptionProps, ComboBoxProps } from './ComboBox.types.js';\n\nfunction getOptionElements(children: ComboBoxProps['children']) {\n  const options: ReactElement<ComboBoxOptionProps>[] = [];\n\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const element = child as ReactElement<{ children?: ReactNode; value?: string }>;\n\n    if (element.type === Fragment) {\n      options.push(...getOptionElements(element.props.children));\n    } else if (typeof element.props.value === 'string') {\n      options.push(element as ReactElement<ComboBoxOptionProps>);\n    }\n  });\n\n  return options;\n}\n\nconst Option = forwardRef<HTMLDivElement, ComboBoxOptionProps>(function Option(\n  { children, className, disabled = false, value, ...optionProps },\n  ref,\n) {\n  const comboBox = useComboBoxContext();\n  const isSelected = comboBox.isSelected(value);\n  const isActive = comboBox.activeValue === value;\n  const resolvedClassName = [\n    'chayns-combo-box__option',\n    isSelected ? 'chayns-combo-box__option--selected' : '',\n    isActive ? 'chayns-combo-box__option--active' : '',\n    disabled ? 'chayns-combo-box__option--disabled' : '',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div\n      {...optionProps}\n      aria-disabled={disabled || undefined}\n      aria-selected={isSelected}\n      className={resolvedClassName}\n      id={comboBox.optionId(value)}\n      onClick={(event) => {\n        optionProps.onClick?.(event);\n        if (!event.defaultPrevented && !disabled) {\n          comboBox.select(value);\n        }\n      }}\n      onKeyDown={(event) => {\n        optionProps.onKeyDown?.(event);\n        if (!event.defaultPrevented && !disabled && (event.key === 'Enter' || event.key === ' ')) {\n          event.preventDefault();\n          comboBox.select(value);\n        }\n      }}\n      ref={ref}\n      role=\"option\"\n      tabIndex={isActive && !disabled ? 0 : -1}\n    >\n      {comboBox.multiple ? (\n        <span\n          aria-hidden=\"true\"\n          className=\"chayns-combo-box__checkbox\"\n          data-checked={isSelected || undefined}\n        />\n      ) : null}\n      {children}\n      {!comboBox.multiple && isSelected ? (\n        <span aria-hidden=\"true\" className=\"chayns-combo-box__checkmark\">\n          <i className=\"fas fa-check\" />\n        </span>\n      ) : null}\n    </div>\n  );\n});\n\nconst ComboBoxRoot = forwardRef<HTMLButtonElement, ComboBoxProps>(\n  function ComboBoxRoot(props, ref) {\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      className,\n      defaultValue,\n      disabled,\n      id,\n      multiple = false,\n      onClick,\n      onKeyDown,\n      onValueChange,\n      placeholder,\n      value,\n      ...buttonProps\n    } = props;\n    const generatedId = useId();\n    const triggerId = id ?? generatedId;\n    const listboxId = `${triggerId}-listbox`;\n    const labelId = `${triggerId}-label`;\n    const rootRef = useRef<HTMLDivElement>(null);\n    const popupRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLButtonElement>(null);\n    const [popupStyle, setPopupStyle] = useState<CSSProperties>();\n    const optionElements = useMemo(() => getOptionElements(children), [children]);\n    const optionMap = useMemo(\n      () => new Map(optionElements.map((option) => [option.props.value, option])),\n      [optionElements],\n    );\n    const focusableValues = optionElements\n      .filter((option) => !option.props.disabled)\n      .map((option) => option.props.value);\n    const defaultValues = multiple\n      ? ((defaultValue as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n          (option) => option.props.value,\n        ) ?? [])\n      : [];\n    const controlledValues = multiple\n      ? ((value as ReactElement<ComboBoxOptionProps>[] | undefined)?.map(\n          (option) => option.props.value,\n        ) ?? [])\n      : [];\n    const [uncontrolledValue, setUncontrolledValue] = useState(\n      multiple ? '' : ((defaultValue as string | undefined) ?? ''),\n    );\n    const [uncontrolledValues, setUncontrolledValues] = useState(defaultValues);\n    const [open, setOpen] = useState(false);\n    const [popupMounted, setPopupMounted] = useState(false);\n    const [popupClosing, setPopupClosing] = useState(false);\n    const [activeValue, setActiveValue] = useState<string>();\n    const isControlled = value !== undefined;\n    const selectedValue = multiple ? '' : isControlled ? (value as string) : uncontrolledValue;\n    const selectedValues = multiple ? (isControlled ? controlledValues : uncontrolledValues) : [];\n    const selectedOptions = selectedValues\n      .map((selected) => optionMap.get(selected))\n      .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n    const selectedOption = optionMap.get(selectedValue);\n    const displayValue = multiple\n      ? selectedOptions.map((option) => getOptionLabel(option.props.children)).join(', ')\n      : selectedOption === undefined\n        ? ''\n        : getOptionLabel(selectedOption.props.children);\n    const resolvedClassName = ['chayns-combo-box', open ? 'chayns-combo-box--open' : '']\n      .filter(Boolean)\n      .join(' ');\n    const triggerClassName = ['chayns-combo-box__trigger', className].filter(Boolean).join(' ');\n    const accessibleName =\n      ariaLabelledBy ??\n      (ariaLabel === undefined && placeholder !== undefined ? labelId : undefined);\n\n    if (ariaLabel === undefined && ariaLabelledBy === undefined && placeholder === undefined) {\n      throw new Error('ComboBox requires placeholder, aria-label or aria-labelledby.');\n    }\n\n    useEffect(() => {\n      if (open) {\n        if (!popupMounted) {\n          setPopupMounted(true);\n          setPopupClosing(true);\n          return undefined;\n        }\n\n        if (popupClosing) {\n          const frame = requestAnimationFrame(() => setPopupClosing(false));\n          return () => cancelAnimationFrame(frame);\n        }\n      } else if (popupMounted) {\n        setPopupClosing(true);\n      }\n\n      return undefined;\n    }, [open, popupClosing, popupMounted]);\n\n    useEffect(() => {\n      if (!open || activeValue === undefined) {\n        return;\n      }\n\n      document\n        .getElementById(`${listboxId}-${activeValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`)\n        ?.focus();\n    }, [activeValue, listboxId, open, popupMounted]);\n\n    useEffect(() => {\n      if (!open) {\n        return undefined;\n      }\n\n      function updatePopupPosition() {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n          return;\n        }\n\n        const { bottom, left, width } = trigger.getBoundingClientRect();\n        setPopupStyle({\n          insetBlockStart: `calc(${bottom}px + var(--k4))`,\n          insetInlineStart: left,\n          inlineSize: width,\n        });\n      }\n\n      function closeOnOutsidePress(event: PointerEvent) {\n        if (\n          event.target instanceof Node &&\n          !rootRef.current?.contains(event.target) &&\n          !popupRef.current?.contains(event.target)\n        ) {\n          setOpen(false);\n          setActiveValue(undefined);\n        }\n      }\n\n      updatePopupPosition();\n      window.addEventListener('resize', updatePopupPosition);\n      window.addEventListener('scroll', updatePopupPosition, true);\n      document.addEventListener('pointerdown', closeOnOutsidePress);\n      return () => {\n        window.removeEventListener('resize', updatePopupPosition);\n        window.removeEventListener('scroll', updatePopupPosition, true);\n        document.removeEventListener('pointerdown', closeOnOutsidePress);\n      };\n    }, [open]);\n\n    function setTriggerElement(element: HTMLButtonElement | null) {\n      triggerRef.current = element;\n\n      if (typeof ref === 'function') {\n        ref(element);\n      } else if (ref !== null) {\n        ref.current = element;\n      }\n    }\n\n    function emitValue(nextValue: string) {\n      if (!isControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      (onValueChange as ((next: string) => void) | undefined)?.(nextValue);\n    }\n\n    function emitValues(nextValues: string[]) {\n      if (!isControlled) {\n        setUncontrolledValues(nextValues);\n      }\n\n      const nextOptions = nextValues\n        .map((nextValue) => optionMap.get(nextValue))\n        .filter((option): option is ReactElement<ComboBoxOptionProps> => option !== undefined);\n      (onValueChange as ((next: ReactElement<ComboBoxOptionProps>[]) => void) | undefined)?.(\n        nextOptions,\n      );\n    }\n\n    function closeAndFocusTrigger() {\n      setOpen(false);\n      setActiveValue(undefined);\n      triggerRef.current?.focus();\n    }\n\n    function select(nextValue: string) {\n      if (multiple) {\n        const nextValues = selectedValues.includes(nextValue)\n          ? selectedValues.filter((selected) => selected !== nextValue)\n          : [...selectedValues, nextValue];\n        emitValues(nextValues);\n      } else {\n        emitValue(nextValue);\n      }\n\n      closeAndFocusTrigger();\n    }\n\n    function openPopup() {\n      if (disabled || focusableValues.length === 0) {\n        return;\n      }\n\n      const selectedFocusableValue = focusableValues.find((optionValue) =>\n        multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n      );\n      setActiveValue(selectedFocusableValue ?? focusableValues[0]);\n      setOpen(true);\n    }\n\n    function moveActive(direction: 1 | -1) {\n      if (focusableValues.length === 0) {\n        return;\n      }\n\n      const currentIndex = activeValue === undefined ? -1 : focusableValues.indexOf(activeValue);\n      const nextIndex =\n        currentIndex === -1\n          ? direction === 1\n            ? 0\n            : focusableValues.length - 1\n          : (currentIndex + direction + focusableValues.length) % focusableValues.length;\n      setActiveValue(focusableValues[nextIndex]);\n    }\n\n    function handleTriggerClick(event: MouseEvent<HTMLButtonElement>) {\n      onClick?.(event);\n      if (!event.defaultPrevented) {\n        if (open) {\n          closeAndFocusTrigger();\n        } else {\n          openPopup();\n        }\n      }\n    }\n\n    function handleTriggerKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n      onKeyDown?.(event);\n      if (event.defaultPrevented) {\n        return;\n      }\n\n      if (\n        event.key === 'Enter' ||\n        event.key === ' ' ||\n        event.key === 'ArrowDown' ||\n        event.key === 'ArrowUp' ||\n        (event.key === 'ArrowDown' && event.altKey)\n      ) {\n        event.preventDefault();\n        openPopup();\n      }\n    }\n\n    function handleListboxKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n      if (event.key === 'ArrowDown') {\n        event.preventDefault();\n        moveActive(1);\n      } else if (event.key === 'ArrowUp') {\n        event.preventDefault();\n        moveActive(-1);\n      } else if (event.key === 'Home') {\n        event.preventDefault();\n        setActiveValue(focusableValues[0]);\n      } else if (event.key === 'End') {\n        event.preventDefault();\n        setActiveValue(focusableValues.at(-1));\n      } else if (event.key === 'Escape') {\n        event.preventDefault();\n        closeAndFocusTrigger();\n      } else if (event.key === 'Tab') {\n        setOpen(false);\n        setActiveValue(undefined);\n      }\n    }\n\n    return (\n      <ComboBoxContext.Provider\n        value={{\n          activeValue,\n          isSelected: (optionValue) =>\n            multiple ? selectedValues.includes(optionValue) : selectedValue === optionValue,\n          multiple,\n          optionId: (optionValue) => `${listboxId}-${optionValue.replace(/[^a-zA-Z0-9_-]/g, '-')}`,\n          select,\n        }}\n      >\n        <div className={resolvedClassName} ref={rootRef}>\n          <button\n            {...buttonProps}\n            aria-controls={listboxId}\n            aria-expanded={open}\n            aria-haspopup=\"listbox\"\n            aria-label={ariaLabel}\n            aria-labelledby={accessibleName}\n            className={triggerClassName}\n            disabled={disabled}\n            id={triggerId}\n            onClick={handleTriggerClick}\n            onKeyDown={handleTriggerKeyDown}\n            ref={setTriggerElement}\n            type=\"button\"\n          >\n            <span className=\"chayns-combo-box__value\">{displayValue || placeholder}</span>\n            <span aria-hidden=\"true\" className=\"chayns-combo-box__chevron\">\n              <ButtonIcon icon=\"fa-chevron-down\" />\n            </span>\n          </button>\n          {placeholder !== undefined ? (\n            <span className=\"chayns-combo-box__label\" id={labelId}>\n              {placeholder}\n            </span>\n          ) : null}\n          {popupMounted && typeof document !== 'undefined'\n            ? createPortal(\n                <div\n                  aria-hidden={!open && popupClosing ? true : undefined}\n                  aria-multiselectable={multiple || undefined}\n                  className=\"chayns-combo-box__popup\"\n                  data-state={popupClosing ? 'closed' : 'open'}\n                  id={listboxId}\n                  inert={!open && popupClosing}\n                  onKeyDown={handleListboxKeyDown}\n                  onTransitionEnd={(event) => {\n                    if (popupClosing && event.propertyName === 'opacity') {\n                      setPopupMounted(false);\n                      setPopupClosing(false);\n                    }\n                  }}\n                  ref={popupRef}\n                  role=\"listbox\"\n                  style={popupStyle}\n                  tabIndex={-1}\n                >\n                  {children}\n                </div>,\n                document.body,\n              )\n            : null}\n        </div>\n      </ComboBoxContext.Provider>\n    );\n  },\n);\n\nconst ComboBox = Object.assign(ComboBoxRoot, { Option });\n\nexport default ComboBox;\n"],"mappings":";;;;;;AAkBA,SAAS,kBAAkB,UAAqC;CAC9D,MAAM,UAA+C,CAAC;CAEtD,SAAS,QAAQ,WAAW,UAAU;EACpC,IAAI,CAAC,eAAe,KAAK,GACvB;EAGF,MAAM,UAAU;EAEhB,IAAI,QAAQ,SAAS,UACnB,QAAQ,KAAK,GAAG,kBAAkB,QAAQ,MAAM,QAAQ,CAAC;OACpD,IAAI,OAAO,QAAQ,MAAM,UAAU,UACxC,QAAQ,KAAK,OAA4C;CAE7D,CAAC;CAED,OAAO;AACT;AAEA,IAAM,SAAS,WAAgD,SAAS,OACtE,EAAE,UAAU,WAAW,WAAW,OAAO,OAAO,GAAG,eACnD,KACA;CACA,MAAM,WAAW,mBAAmB;CACpC,MAAM,aAAa,SAAS,WAAW,KAAK;CAC5C,MAAM,WAAW,SAAS,gBAAgB;CAC1C,MAAM,oBAAoB;EACxB;EACA,aAAa,uCAAuC;EACpD,WAAW,qCAAqC;EAChD,WAAW,uCAAuC;EAClD;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,iBAAe,YAAY,KAAA;EAC3B,iBAAe;EACf,WAAW;EACX,IAAI,SAAS,SAAS,KAAK;EAC3B,UAAU,UAAU;GAClB,YAAY,UAAU,KAAK;GAC3B,IAAI,CAAC,MAAM,oBAAoB,CAAC,UAC9B,SAAS,OAAO,KAAK;EAEzB;EACA,YAAY,UAAU;GACpB,YAAY,YAAY,KAAK;GAC7B,IAAI,CAAC,MAAM,oBAAoB,CAAC,aAAa,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;IACxF,MAAM,eAAe;IACrB,SAAS,OAAO,KAAK;GACvB;EACF;EACK;EACL,MAAK;EACL,UAAU,YAAY,CAAC,WAAW,IAAI;EArBxC,UAAA;GAuBG,SAAS,WACR,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;IACV,gBAAc,cAAc,KAAA;GAC7B,CAAA,IACC;GACH;GACA,CAAC,SAAS,YAAY,aACrB,oBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;IACjC,UAAA,oBAAC,KAAD,EAAG,WAAU,eAAgB,CAAA;GACzB,CAAA,IACJ;EACD;;AAET,CAAC;AAED,IAAM,eAAe,WACnB,SAAS,aAAa,OAAO,KAAK;CAChC,MAAM,EACJ,cAAc,WACd,mBAAmB,gBACnB,UACA,WACA,cACA,UACA,IACA,WAAW,OACX,SACA,WACA,eACA,aACA,OACA,GAAG,gBACD;CACJ,MAAM,cAAc,MAAM;CAC1B,MAAM,YAAY,MAAM;CACxB,MAAM,YAAY,GAAG,UAAU;CAC/B,MAAM,UAAU,GAAG,UAAU;CAC7B,MAAM,UAAU,OAAuB,IAAI;CAC3C,MAAM,WAAW,OAAuB,IAAI;CAC5C,MAAM,aAAa,OAA0B,IAAI;CACjD,MAAM,CAAC,YAAY,iBAAiB,SAAwB;CAC5D,MAAM,iBAAiB,cAAc,kBAAkB,QAAQ,GAAG,CAAC,QAAQ,CAAC;CAC5E,MAAM,YAAY,cACV,IAAI,IAAI,eAAe,KAAK,WAAW,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC,CAAC,GAC1E,CAAC,cAAc,CACjB;CACA,MAAM,kBAAkB,eACrB,QAAQ,WAAW,CAAC,OAAO,MAAM,QAAQ,CAAC,CAC1C,KAAK,WAAW,OAAO,MAAM,KAAK;CACrC,MAAM,gBAAgB,WAChB,cAAkE,KACjE,WAAW,OAAO,MAAM,KAC3B,KAAK,CAAC,IACN,CAAC;CACL,MAAM,mBAAmB,WACnB,OAA2D,KAC1D,WAAW,OAAO,MAAM,KAC3B,KAAK,CAAC,IACN,CAAC;CACL,MAAM,CAAC,mBAAmB,wBAAwB,SAChD,WAAW,KAAO,gBAAuC,EAC3D;CACA,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,aAAa;CAC1E,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,MAAM,CAAC,aAAa,kBAAkB,SAAiB;CACvD,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,gBAAgB,WAAW,KAAK,eAAgB,QAAmB;CACzE,MAAM,iBAAiB,WAAY,eAAe,mBAAmB,qBAAsB,CAAC;CAC5F,MAAM,kBAAkB,eACrB,KAAK,aAAa,UAAU,IAAI,QAAQ,CAAC,CAAC,CAC1C,QAAQ,WAAwD,WAAW,KAAA,CAAS;CACvF,MAAM,iBAAiB,UAAU,IAAI,aAAa;CAClD,MAAM,eAAe,WACjB,gBAAgB,KAAK,WAAW,eAAe,OAAO,MAAM,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,IAChF,mBAAmB,KAAA,IACjB,KACA,eAAe,eAAe,MAAM,QAAQ;CAClD,MAAM,oBAAoB,CAAC,oBAAoB,OAAO,2BAA2B,EAAE,CAAC,CACjF,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACX,MAAM,mBAAmB,CAAC,6BAA6B,SAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAC1F,MAAM,iBACJ,mBACC,cAAc,KAAA,KAAa,gBAAgB,KAAA,IAAY,UAAU,KAAA;CAEpE,IAAI,cAAc,KAAA,KAAa,mBAAmB,KAAA,KAAa,gBAAgB,KAAA,GAC7E,MAAM,IAAI,MAAM,+DAA+D;CAGjF,gBAAgB;EACd,IAAI,MAAM;GACR,IAAI,CAAC,cAAc;IACjB,gBAAgB,IAAI;IACpB,gBAAgB,IAAI;IACpB;GACF;GAEA,IAAI,cAAc;IAChB,MAAM,QAAQ,4BAA4B,gBAAgB,KAAK,CAAC;IAChE,aAAa,qBAAqB,KAAK;GACzC;EACF,OAAO,IAAI,cACT,gBAAgB,IAAI;CAIxB,GAAG;EAAC;EAAM;EAAc;CAAY,CAAC;CAErC,gBAAgB;EACd,IAAI,CAAC,QAAQ,gBAAgB,KAAA,GAC3B;EAGF,SACG,eAAe,GAAG,UAAU,GAAG,YAAY,QAAQ,mBAAmB,GAAG,GAAG,CAAC,EAC5E,MAAM;CACZ,GAAG;EAAC;EAAa;EAAW;EAAM;CAAY,CAAC;CAE/C,gBAAgB;EACd,IAAI,CAAC,MACH;EAGF,SAAS,sBAAsB;GAC7B,MAAM,UAAU,WAAW;GAC3B,IAAI,CAAC,SACH;GAGF,MAAM,EAAE,QAAQ,MAAM,UAAU,QAAQ,sBAAsB;GAC9D,cAAc;IACZ,iBAAiB,QAAQ,OAAO;IAChC,kBAAkB;IAClB,YAAY;GACd,CAAC;EACH;EAEA,SAAS,oBAAoB,OAAqB;GAChD,IACE,MAAM,kBAAkB,QACxB,CAAC,QAAQ,SAAS,SAAS,MAAM,MAAM,KACvC,CAAC,SAAS,SAAS,SAAS,MAAM,MAAM,GACxC;IACA,QAAQ,KAAK;IACb,eAAe,KAAA,CAAS;GAC1B;EACF;EAEA,oBAAoB;EACpB,OAAO,iBAAiB,UAAU,mBAAmB;EACrD,OAAO,iBAAiB,UAAU,qBAAqB,IAAI;EAC3D,SAAS,iBAAiB,eAAe,mBAAmB;EAC5D,aAAa;GACX,OAAO,oBAAoB,UAAU,mBAAmB;GACxD,OAAO,oBAAoB,UAAU,qBAAqB,IAAI;GAC9D,SAAS,oBAAoB,eAAe,mBAAmB;EACjE;CACF,GAAG,CAAC,IAAI,CAAC;CAET,SAAS,kBAAkB,SAAmC;EAC5D,WAAW,UAAU;EAErB,IAAI,OAAO,QAAQ,YACjB,IAAI,OAAO;OACN,IAAI,QAAQ,MACjB,IAAI,UAAU;CAElB;CAEA,SAAS,UAAU,WAAmB;EACpC,IAAI,CAAC,cACH,qBAAqB,SAAS;EAGhC,gBAA0D,SAAS;CACrE;CAEA,SAAS,WAAW,YAAsB;EACxC,IAAI,CAAC,cACH,sBAAsB,UAAU;EAGlC,MAAM,cAAc,WACjB,KAAK,cAAc,UAAU,IAAI,SAAS,CAAC,CAAC,CAC5C,QAAQ,WAAwD,WAAW,KAAA,CAAS;EACvF,gBACE,WACF;CACF;CAEA,SAAS,uBAAuB;EAC9B,QAAQ,KAAK;EACb,eAAe,KAAA,CAAS;EACxB,WAAW,SAAS,MAAM;CAC5B;CAEA,SAAS,OAAO,WAAmB;EACjC,IAAI,UAIF,WAHmB,eAAe,SAAS,SAAS,IAChD,eAAe,QAAQ,aAAa,aAAa,SAAS,IAC1D,CAAC,GAAG,gBAAgB,SAAS,CACZ;OAErB,UAAU,SAAS;EAGrB,qBAAqB;CACvB;CAEA,SAAS,YAAY;EACnB,IAAI,YAAY,gBAAgB,WAAW,GACzC;EAGF,MAAM,yBAAyB,gBAAgB,MAAM,gBACnD,WAAW,eAAe,SAAS,WAAW,IAAI,kBAAkB,WACtE;EACA,eAAe,0BAA0B,gBAAgB,EAAE;EAC3D,QAAQ,IAAI;CACd;CAEA,SAAS,WAAW,WAAmB;EACrC,IAAI,gBAAgB,WAAW,GAC7B;EAGF,MAAM,eAAe,gBAAgB,KAAA,IAAY,KAAK,gBAAgB,QAAQ,WAAW;EACzF,MAAM,YACJ,iBAAiB,KACb,cAAc,IACZ,IACA,gBAAgB,SAAS,KAC1B,eAAe,YAAY,gBAAgB,UAAU,gBAAgB;EAC5E,eAAe,gBAAgB,UAAU;CAC3C;CAEA,SAAS,mBAAmB,OAAsC;EAChE,UAAU,KAAK;EACf,IAAI,CAAC,MAAM,kBAAkB;GAC3B,IAAI,MACF,qBAAqB;QAErB,UAAU;EAEd;CACF;CAEA,SAAS,qBAAqB,OAAyC;EACrE,YAAY,KAAK;EACjB,IAAI,MAAM,kBACR;EAGF,IACE,MAAM,QAAQ,WACd,MAAM,QAAQ,OACd,MAAM,QAAQ,eACd,MAAM,QAAQ,aACb,MAAM,QAAQ,eAAe,MAAM,QACpC;GACA,MAAM,eAAe;GACrB,UAAU;EACZ;CACF;CAEA,SAAS,qBAAqB,OAAsC;EAClE,IAAI,MAAM,QAAQ,aAAa;GAC7B,MAAM,eAAe;GACrB,WAAW,CAAC;EACd,OAAO,IAAI,MAAM,QAAQ,WAAW;GAClC,MAAM,eAAe;GACrB,WAAW,EAAE;EACf,OAAO,IAAI,MAAM,QAAQ,QAAQ;GAC/B,MAAM,eAAe;GACrB,eAAe,gBAAgB,EAAE;EACnC,OAAO,IAAI,MAAM,QAAQ,OAAO;GAC9B,MAAM,eAAe;GACrB,eAAe,gBAAgB,GAAG,EAAE,CAAC;EACvC,OAAO,IAAI,MAAM,QAAQ,UAAU;GACjC,MAAM,eAAe;GACrB,qBAAqB;EACvB,OAAO,IAAI,MAAM,QAAQ,OAAO;GAC9B,QAAQ,KAAK;GACb,eAAe,KAAA,CAAS;EAC1B;CACF;CAEA,OACE,oBAAC,gBAAgB,UAAjB;EACE,OAAO;GACL;GACA,aAAa,gBACX,WAAW,eAAe,SAAS,WAAW,IAAI,kBAAkB;GACtE;GACA,WAAW,gBAAgB,GAAG,UAAU,GAAG,YAAY,QAAQ,mBAAmB,GAAG;GACrF;EACF;EAEA,UAAA,qBAAC,OAAD;GAAK,WAAW;GAAmB,KAAK;GAAxC,UAAA;IACE,qBAAC,UAAD;KACE,GAAI;KACJ,iBAAe;KACf,iBAAe;KACf,iBAAc;KACd,cAAY;KACZ,mBAAiB;KACjB,WAAW;KACD;KACV,IAAI;KACJ,SAAS;KACT,WAAW;KACX,KAAK;KACL,MAAK;KAbP,UAAA,CAeE,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA,gBAAgB;KAAkB,CAAA,GAC7E,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MACjC,UAAA,oBAAC,YAAD,EAAY,MAAK,kBAAmB,CAAA;KAChC,CAAA,CACA;;IACP,gBAAgB,KAAA,IACf,oBAAC,QAAD;KAAM,WAAU;KAA0B,IAAI;KAC3C,UAAA;IACG,CAAA,IACJ;IACH,gBAAgB,OAAO,aAAa,cACjC,aACE,oBAAC,OAAD;KACE,eAAa,CAAC,QAAQ,eAAe,OAAO,KAAA;KAC5C,wBAAsB,YAAY,KAAA;KAClC,WAAU;KACV,cAAY,eAAe,WAAW;KACtC,IAAI;KACJ,OAAO,CAAC,QAAQ;KAChB,WAAW;KACX,kBAAkB,UAAU;MAC1B,IAAI,gBAAgB,MAAM,iBAAiB,WAAW;OACpD,gBAAgB,KAAK;OACrB,gBAAgB,KAAK;MACvB;KACF;KACA,KAAK;KACL,MAAK;KACL,OAAO;KACP,UAAU;KAET;IACE,CAAA,GACL,SAAS,IACX,IACA;GACD;;CACmB,CAAA;AAE9B,CACF;AAEA,IAAM,WAAW,OAAO,OAAO,cAAc,EAAE,OAAO,CAAC"}

package/dist/components/combo-box/ComboBox.types.d.ts

@@ -1,19 +1,15 @@
 import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
-export interface ComboBoxOptionProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'aria-selected'> {
+export interface ComboBoxOptionProps extends Omit<ComponentPropsWithRef<'div'>, 'children' | 'role' | 'aria-selected' | 'tabIndex'> {
     value: string;
     children: Exclude<ReactNode, boolean | null | undefined>;
+    disabled?: boolean;
     role?: never;
     'aria-selected'?: never;
+    tabIndex?: never;
 }
-type ComboBoxBaseProps = Omit<ComponentPropsWithRef<'input'>, 'children' | 'defaultValue' | 'value' | 'multiple' | 'role' | 'aria-activedescendant' | 'aria-controls' | 'aria-expanded' | 'aria-autocomplete' | 'onBlur' | 'onChange' | 'onKeyDown'> & {
+type ComboBoxBaseProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'defaultValue' | 'value' | 'multiple' | 'type' | 'aria-controls' | 'aria-expanded' | 'aria-haspopup'> & {
     children: ReactNode;
-    /** Bodywork floating label. */
     placeholder?: string;
-    /** Opens the popup when the input receives focus. */
-    openOnFocus?: boolean;
-    onBlur?: ComponentPropsWithRef<'input'>['onBlur'];
-    onChange?: ComponentPropsWithRef<'input'>['onChange'];
-    onKeyDown?: ComponentPropsWithRef<'input'>['onKeyDown'];
 };
 export interface ComboBoxSingleProps extends ComboBoxBaseProps {
     multiple?: false;

package/dist/components/combo-box/ComboBox.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,MAAM,GAAG,eAAe,CACtC;IACC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAED,KAAK,iBAAiB,GAAG,IAAI,CAC3B,qBAAqB,CAAC,OAAO,CAAC,EAC5B,UAAU,GACV,cAAc,GACd,OAAO,GACP,UAAU,GACV,MAAM,GACN,uBAAuB,GACvB,eAAe,GACf,eAAe,GACf,mBAAmB,GACnB,QAAQ,GACR,UAAU,GACV,WAAW,CACd,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,+BAA+B;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC;CACzD,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,KAAK,IAAI,CAAC;CACtE;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAC"}
+{"version":3,"file":"ComboBox.types.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,GAAG,MAAM,GAAG,eAAe,GAAG,UAAU,CACnD;IACC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,eAAe,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,KAAK,iBAAiB,GAAG,IAAI,CAC3B,qBAAqB,CAAC,QAAQ,CAAC,EAC7B,UAAU,GACV,cAAc,GACd,OAAO,GACP,UAAU,GACV,MAAM,GACN,eAAe,GACf,eAAe,GACf,eAAe,CAClB,GAAG;IACF,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB;IAC9D,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;IAC5C,YAAY,CAAC,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,CAAC;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,mBAAmB,CAAC,EAAE,KAAK,IAAI,CAAC;CACtE;AAED,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG,qBAAqB,CAAC"}

package/dist/components/combo-box/ComboBoxContext.d.ts

@@ -1,13 +1,10 @@
 import type { ComboBoxOptionProps } from './ComboBox.types.js';
 export interface ComboBoxContextValue {
     activeValue?: string | undefined;
-    close: () => void;
-    inputText: string;
     isSelected: (value: string) => boolean;
     multiple: boolean;
     optionId: (value: string) => string;
     select: (value: string) => void;
-    visibleValues: string[];
 }
 export declare const ComboBoxContext: import("react").Context<ComboBoxContextValue | null>;
 export declare function useComboBoxContext(): ComboBoxContextValue;

package/dist/components/combo-box/ComboBoxContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxContext.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBoxContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAEhF,wBAAgB,kBAAkB,IAAI,oBAAoB,CAQzD;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,CAAC,UAAU,CAAC,GAAG,MAAM,CAM9E"}
+{"version":3,"file":"ComboBoxContext.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/ComboBoxContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAE/D,MAAM,WAAW,oBAAoB;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC;AAEhF,wBAAgB,kBAAkB,IAAI,oBAAoB,CAQzD;AAED,wBAAgB,cAAc,CAAC,MAAM,EAAE,mBAAmB,CAAC,UAAU,CAAC,GAAG,MAAM,CAM9E"}

package/dist/components/combo-box/ComboBoxContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxContext.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ComboBoxOptionProps } from './ComboBox.types.js';\n\nexport interface ComboBoxContextValue {\n  activeValue?: string | undefined;\n  close: () => void;\n  inputText: string;\n  isSelected: (value: string) => boolean;\n  multiple: boolean;\n  optionId: (value: string) => string;\n  select: (value: string) => void;\n  visibleValues: string[];\n}\n\nexport const ComboBoxContext = createContext<ComboBoxContextValue | null>(null);\n\nexport function useComboBoxContext(): ComboBoxContextValue {\n  const context = useContext(ComboBoxContext);\n\n  if (context === null) {\n    throw new Error('ComboBox.Option must be rendered within ComboBox.');\n  }\n\n  return context;\n}\n\nexport function getOptionLabel(option: ComboBoxOptionProps['children']): string {\n  if (typeof option === 'string' || typeof option === 'number') {\n    return String(option);\n  }\n\n  return '';\n}\n"],"mappings":";;AAeA,IAAa,kBAAkB,cAA2C,IAAI;AAE9E,SAAgB,qBAA2C;CACzD,MAAM,UAAU,WAAW,eAAe;CAE1C,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,mDAAmD;CAGrE,OAAO;AACT;AAEA,SAAgB,eAAe,QAAiD;CAC9E,IAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAClD,OAAO,OAAO,MAAM;CAGtB,OAAO;AACT"}
+{"version":3,"file":"ComboBoxContext.js","names":[],"sources":["../../../src/components/combo-box/ComboBoxContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ComboBoxOptionProps } from './ComboBox.types.js';\n\nexport interface ComboBoxContextValue {\n  activeValue?: string | undefined;\n  isSelected: (value: string) => boolean;\n  multiple: boolean;\n  optionId: (value: string) => string;\n  select: (value: string) => void;\n}\n\nexport const ComboBoxContext = createContext<ComboBoxContextValue | null>(null);\n\nexport function useComboBoxContext(): ComboBoxContextValue {\n  const context = useContext(ComboBoxContext);\n\n  if (context === null) {\n    throw new Error('ComboBox.Option must be rendered within ComboBox.');\n  }\n\n  return context;\n}\n\nexport function getOptionLabel(option: ComboBoxOptionProps['children']): string {\n  if (typeof option === 'string' || typeof option === 'number') {\n    return String(option);\n  }\n\n  return '';\n}\n"],"mappings":";;AAYA,IAAa,kBAAkB,cAA2C,IAAI;AAE9E,SAAgB,qBAA2C;CACzD,MAAM,UAAU,WAAW,eAAe;CAE1C,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,mDAAmD;CAGrE,OAAO;AACT;AAEA,SAAgB,eAAe,QAAiD;CAC9E,IAAI,OAAO,WAAW,YAAY,OAAO,WAAW,UAClD,OAAO,OAAO,MAAM;CAGtB,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chayns-ui/core",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "description": "Accessible React core components for chayns UI",
   "license": "MIT",
   "type": "module",