@mortenbrudvik/waveui 0.8.0 → 0.10.0

package/dist/components/input/Label.mjs

@@ -1,29 +1,35 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
-import { labelClassNames as t } from "../../lib/classNames.mjs";
+import { materialiseSlotContent as t, slotRendersContent as n } from "../../lib/slot.mjs";
+import { labelClassNames as r } from "../../lib/classNames.mjs";
+import { markFieldLabel as i } from "./fieldLabel.mjs";
 import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/input/Label.tsx
-var i = {
+var s = {
 	small: "text-caption-1",
 	medium: "text-body-1",
 	large: "text-body-2"
-}, a = {
+}, c = {
 	regular: void 0,
 	semibold: "font-semibold",
 	bold: "font-bold"
-}, o = ({ required: o = !1, disabled: s = !1, size: c = "medium", weight: l = "regular", className: u, children: d, ref: f, ...p }) => /* @__PURE__ */ r("label", {
-	ref: f,
-	className: e(t.root, s ? "text-muted-foreground" : "text-foreground", i[c], a[l], u),
-	...p,
-	children: [d, o && /* @__PURE__ */ n("span", {
-		className: e(t.required, "ms-1 text-error"),
+}, l = ({ required: i = !1, disabled: l = !1, size: u = "medium", weight: d = "regular", className: f, children: p, ref: m, ...h }) => /* @__PURE__ */ o("label", {
+	ref: m,
+	className: e(r.root, l ? "text-muted-foreground" : "text-foreground", s[u], c[d], f),
+	...h,
+	children: [p, i === !0 ? /* @__PURE__ */ a("span", {
+		className: e(r.required, "ms-1 text-error"),
 		"aria-hidden": "true",
 		children: "*"
-	})]
+	}) : i !== !1 && n(i) ? /* @__PURE__ */ a("span", {
+		className: e(r.required, "ms-1 text-error"),
+		"aria-hidden": "true",
+		children: t(i)
+	}) : null]
 });
-o.displayName = "Label";
+l.displayName = "Label", i(l);
 //#endregion
-export { o as Label };
+export { l as Label };
 
 //# sourceMappingURL=Label.mjs.map

package/dist/components/input/Label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.mjs","names":["sizeMap","weightMap","Label","rest","cn","labelClassNames","disabled","size","weight","className","children","required"],"sources":["../../../src/components/input/Label.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { labelClassNames } from '../../lib/classNames';\nimport type { Size, TextWeight } from '../../lib/types';\n\n/** Properties for the Label component. */\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /** Whether to show a required indicator asterisk (hidden from assistive technology; mark the\n   * control itself `required`).\n   * @default false\n   */\n  required?: boolean;\n  /** Whether the label is visually dimmed.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Text size of the label: `small` = caption-1, `medium` = body-1, `large` = body-2.\n   * @default 'medium'\n   */\n  size?: Extract<Size, 'small' | 'medium' | 'large'>;\n  /** Font weight of the label (the shared `TextWeight` vocabulary).\n   * @default 'regular'\n   */\n  weight?: TextWeight;\n  /** Ref to the `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\nconst sizeMap: Record<'small' | 'medium' | 'large', string> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\nconst weightMap: Record<TextWeight, string | undefined> = {\n  regular: undefined,\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\n/**\n * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required\n * asterisk is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom\n * layouts.\n *\n * @example\n * <Label htmlFor=\"email\" required>Email</Label>\n * <Input id=\"email\" required />\n */\nexport const Label = ({\n  required = false,\n  disabled = false,\n  size = 'medium',\n  weight = 'regular',\n  className,\n  children,\n  ref,\n  ...rest\n}: LabelProps) => {\n  return (\n    <label\n      ref={ref}\n      className={cn(\n        labelClassNames.root,\n        disabled ? 'text-muted-foreground' : 'text-foreground',\n        sizeMap[size],\n        weightMap[weight],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <span className={cn(labelClassNames.required, 'ms-1 text-error')} aria-hidden=\"true\">\n          *\n        </span>\n      )}\n    </label>\n  );\n};\n\nLabel.displayName = 'Label';\n"],"mappings":";;;;;;AA4BA,IAAMA,IAAwD;CAC5D,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEMC,IAAoD;CACxD,SAAS,KAAA;CACT,UAAU;CACV,MAAM;AACR,GAWaC,KAAS,EACpB,cAAW,IACX,cAAW,IACX,UAAO,UACP,YAAS,WACT,cACA,aACA,QACA,GAAGC,QAGD,kBAAC,SAAD;CACO;CACL,WAAWC,EACTC,EAAgB,MAChBC,IAAW,0BAA0B,mBACrCN,EAAQO,IACRN,EAAUO,IACVC,CACF;CACA,GAAIN;CATN,UAAA,CAWGO,GACAC,KACC,kBAAC,QAAD;EAAM,WAAWP,EAAGC,EAAgB,UAAU,iBAAiB;EAAG,eAAY;EAAO,UAAA;CAE/E,CAAA,CAEH;;AAIX,EAAM,cAAc"}
+{"version":3,"file":"Label.mjs","names":["sizeMap","weightMap","Label","rest","cn","labelClassNames","disabled","size","weight","className","children","required","slotRendersContent","materialiseSlotContent","markFieldLabel"],"sources":["../../../src/components/input/Label.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { labelClassNames } from '../../lib/classNames';\nimport { markFieldLabel } from './fieldLabel';\nimport { materialiseSlotContent, slotRendersContent } from '../../lib/slot';\nimport type { CoreSize, TextWeight } from '../../lib/types';\n\n/** Properties for the Label component. */\nexport interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /** Whether to show a required indicator. `true` shows a decorative asterisk; other content\n   * replaces it (for example a `(required)` text). Decorative (`aria-hidden`), so it must not be\n   * focusable; mark the control itself `required`.\n   * @default false\n   */\n  required?: boolean | React.ReactNode;\n  /** Whether the label is visually dimmed.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Text size of the label: `small` = caption-1, `medium` = body-1, `large` = body-2.\n   * @default 'medium'\n   */\n  size?: CoreSize;\n  /** Font weight of the label (the shared `TextWeight` vocabulary).\n   * @default 'regular'\n   */\n  weight?: TextWeight;\n  /** Ref to the `<label>` element. */\n  ref?: React.Ref<HTMLLabelElement>;\n}\n\nconst sizeMap: Record<CoreSize, string> = {\n  small: 'text-caption-1',\n  medium: 'text-body-1',\n  large: 'text-body-2',\n};\n\nconst weightMap: Record<TextWeight, string | undefined> = {\n  regular: undefined,\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n};\n\n/**\n * A text label for a form control (`htmlFor`), on the Fluent type ramp. The optional required\n * indicator is decorative (`aria-hidden`). `Field` renders its own label; use `Label` for custom\n * layouts.\n *\n * @example\n * <Label htmlFor=\"email\" required>Email</Label>\n * <Input id=\"email\" required />\n */\nexport const Label = ({\n  required = false,\n  disabled = false,\n  size = 'medium',\n  weight = 'regular',\n  className,\n  children,\n  ref,\n  ...rest\n}: LabelProps) => {\n  return (\n    <label\n      ref={ref}\n      className={cn(\n        labelClassNames.root,\n        disabled ? 'text-muted-foreground' : 'text-foreground',\n        sizeMap[size],\n        weightMap[weight],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n      {required === true ? (\n        <span className={cn(labelClassNames.required, 'ms-1 text-error')} aria-hidden=\"true\">\n          *\n        </span>\n      ) : required !== false && slotRendersContent(required) ? (\n        <span className={cn(labelClassNames.required, 'ms-1 text-error')} aria-hidden=\"true\">\n          {materialiseSlotContent(required)}\n        </span>\n      ) : null}\n    </label>\n  );\n};\n\nLabel.displayName = 'Label';\nmarkFieldLabel(Label);\n"],"mappings":";;;;;;;;AA+BA,IAAMA,IAAoC;CACxC,OAAO;CACP,QAAQ;CACR,OAAO;AACT,GAEMC,IAAoD;CACxD,SAAS,KAAA;CACT,UAAU;CACV,MAAM;AACR,GAWaC,KAAS,EACpB,cAAW,IACX,cAAW,IACX,UAAO,UACP,YAAS,WACT,cACA,aACA,QACA,GAAGC,QAGD,kBAAC,SAAD;CACO;CACL,WAAWC,EACTC,EAAgB,MAChBC,IAAW,0BAA0B,mBACrCN,EAAQO,IACRN,EAAUO,IACVC,CACF;CACA,GAAIN;CATN,UAAA,CAWGO,GACAC,MAAa,KACZ,kBAAC,QAAD;EAAM,WAAWP,EAAGC,EAAgB,UAAU,iBAAiB;EAAG,eAAY;EAAO,UAAA;CAE/E,CAAA,IACJM,MAAa,MAASC,EAAmBD,CAAQ,IACnD,kBAAC,QAAD;EAAM,WAAWP,EAAGC,EAAgB,UAAU,iBAAiB;EAAG,eAAY;EAC3E,UAAAQ,EAAuBF,CAAQ;CAC5B,CAAA,IACJ,IACC;;AAIX,EAAM,cAAc,SACpBG,EAAeZ,CAAK"}

package/dist/components/input/Listbox.cjs

@@ -0,0 +1,2 @@
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),ee=require("../../lib/classNames.cjs"),i=require("../../hooks/useControllable.cjs"),a=require("../../lib/focus.cjs"),te=require("../../hooks/useMergedRefs.cjs"),ne=require("../../hooks/useIsClient.cjs"),o=require("../../hooks/useFieldControl.cjs"),s=require("../../hooks/useListbox.cjs"),c=require("../../lib/styles.cjs"),l=require("../../hooks/useFormReset.cjs"),re=require("../internal/HiddenInput.cjs"),u=require("./Option.cjs"),d=require("./pickerLabels.cjs"),f=require("./pickerValues.cjs"),p=require("../../lib/events.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g="Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.",_={"aria-disabled":!0,"data-disabled":``},v=e=>{let{multiselect:v=!1,value:y,defaultValue:b,onValueChange:x,onActiveOptionChange:ie,disabled:S=!1,disabledOptionsFocusable:ae=!1,autoFocus:C=!1,labels:oe,name:se,form:w,required:T,id:E,"aria-label":D,"aria-labelledby":O,"aria-describedby":k,"aria-invalid":A,"aria-required":j,onFocus:M,onBlur:N,onKeyDown:P,onKeyUp:F,className:I,children:L,ref:R,...z}=e,ce=o.useFieldContext(),B=o.useFieldControl({id:E,"aria-label":D,"aria-labelledby":O,"aria-describedby":k,"aria-invalid":A,"aria-required":j??T},{labelable:!1}),[V,H]=i.useControllable(y,b??(v?f.EMPTY_VALUES:``),e=>{x?.(typeof e==`string`?e:[...e])}),U=f.toValues(V),[W,G]=m.useState(!1),K=m.useRef(null),q=ne.useIsClient(),J=m.useRef(!1);m.useLayoutEffect(()=>{let e=K.current;e&&(J.current||(J.current=!0,C&&!S&&q&&e.focus()),G(!S&&a.isFocused(e)))},[C,S,q]);let Y=s.useListbox({open:W&&!S,mode:`standalone`,multiselect:v,selectedValues:U,loop:!1,disabledOptionsFocusable:ae,onSelect:(e,t)=>{if(S)return;if(!v){H(e);return}let{values:n,added:r}=f.toggleValue(U,e);H(n),d.announceToggle(oe,t?.item.label??e,r,n.length)},onActiveValueChange:ie,idPrefix:`listbox`}),{ref:le,...X}=Y.getListboxProps(),ue=te.useMergedRefs(R,K,le),Z=X[`aria-activedescendant`],[de,Q]=m.useState(!1),[fe,pe]=m.useState(Z);fe!==Z&&(pe(Z),Q(!1)),m.useEffect(()=>{let e=K.current;if(Z===void 0||!e||typeof IntersectionObserver>`u`)return;let t=Array.from(e.querySelectorAll(`[role="option"]`)).find(e=>e.id===Z);if(!t)return;let n=new IntersectionObserver(e=>{let t=e[e.length-1];t&&Q(!t.isIntersecting)},{root:e});return n.observe(t),()=>n.disconnect()},[Z]),l.useFormReset(K,()=>{if(!v){H(b??``);return}H(e=>f.resetValues(e,b))},w);let $=!B[`aria-label`]?.trim()&&!B[`aria-labelledby`]?.trim();m.useEffect(()=>{$&&n.warnOnce(`Listbox:unnamed`,g)},[$]);let me=e=>{!S&&p.isOwnEvent(e)&&Y.onKeyDown(e)},he=e=>{e.target===e.currentTarget&&G(!0)},ge=e=>{let t=e.currentTarget;e.target===t&&!a.isFocused(t)&&G(!1)};return(0,h.jsxs)(`ul`,{...z,...B,...X,id:B.id??X.id,tabIndex:S?void 0:X.tabIndex,"aria-activedescendant":X[`aria-activedescendant`],"aria-multiselectable":X[`aria-multiselectable`],...S?_:void 0,autoFocus:C||void 0,ref:ue,onKeyDown:r.composeEventHandlers(P,me),onKeyUp:r.composeEventHandlers(F,Y.onKeyUp),onFocus:r.composeEventHandlers(M,he,{checkDefaultPrevented:!1}),onBlur:r.composeEventHandlers(N,ge,{checkDefaultPrevented:!1}),className:t.cn(ee.listboxClassNames.root,`relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground`,Y.activeValue===null||de?c.focusRing:`focus:outline-hidden`,S&&`cursor-not-allowed opacity-50 *:pointer-events-none`,I),children:[v&&(0,h.jsx)(d.PickerAnnouncer,{}),(0,h.jsx)(u.ListboxProvider,{value:Y.context,children:L}),(0,h.jsx)(re.HiddenInput,{name:se,form:w,disabled:S,value:v?U:U[0]??``,type:`text`,required:T??ce?.required??!1,onInvalid:()=>K.current?.focus()})]})};v.displayName=`Listbox`;var y=u.Option,b=u.OptionGroup,x=Object.assign(v,{Option:u.Option,OptionGroup:u.OptionGroup});exports.Listbox=x,exports.ListboxOption=y,exports.ListboxOptionGroup=b;
+//# sourceMappingURL=Listbox.cjs.map

package/dist/components/input/Listbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.cjs","names":["useFieldContext","useFieldControl","useControllable","EMPTY_VALUES","toValues","React","useIsClient","isFocused","useListbox","toggleValue","useMergedRefs","resetValues","isOwnEvent","composeEventHandlers","cn","listboxClassNames","focusRing","PickerAnnouncer","ListboxProvider","HiddenInput","Option","OptionGroup","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_focus","require_useMergedRefs","require_useIsClient","require_useFieldControl","require_useListbox","require_styles","require_useFormReset","require_HiddenInput","require_Option","require_pickerLabels","require_pickerValues","require_events","react","react_jsx_runtime","UNNAMED_WARNING","DISABLED_ATTRIBUTES","ListboxRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","props","field","fieldProps","required","value","setValue","defaultValue","multiselect","onValueChange","next","values","focused","setFocused","listRef","isClient","autoFocusHandledRef","list","autoFocus","disabled","listbox","updated","labels","details","added","onActiveOptionChange","listElementRef","listProps","mergedRef","ref","activeId","activeOutOfView","setActiveOutOfView","observedId","setObservedId","option","el","observer","entry","entries","current","form","unnamed","handleKeyDown","event","handleFocus","handleBlur","onKeyDown","onKeyUp","onFocus","onBlur","className","ListboxOption","ListboxOptionGroup","Listbox"],"sources":["../../../src/components/input/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { listboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { isFocused } from '../../lib/focus';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { ListboxProvider, Option, OptionGroup } from './Option';\nimport { announceToggle, PickerAnnouncer } from './pickerLabels';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox                                                           */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Listbox's built-in texts, for localization: the announcements of a `multiselect` toggle.\n * Each member is optional and falls back to its English default.\n */\nexport interface ListboxLabels {\n  /**\n   * Announced when a `multiselect` toggle selects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /**\n   * Announced when a `multiselect` toggle deselects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n}\n\n/** Properties for the Listbox component. */\nexport interface ListboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`; List's `selectionMode=\"multiple\"` is\n   * the other widget): the value is an array, options draw a checkbox, Space, Enter and a click\n   * toggle an option, and each toggle is announced. A non-literal `multiselect={flag}` is a type\n   * error: render two elements, one for each mode.\n   * @default false\n   */\n  multiselect?: M;\n  /**\n   * Controlled selected value (`''` for none), or with `multiselect` the selected values in\n   * selection order (Fluent's `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage, which a form reset restores.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes (a new array with `multiselect`; Fluent's\n   * `onOptionSelect`, under WaveUI's value/onValueChange naming). In single-select mode, selecting\n   * the selected option again changes nothing: the Listbox never deselects it.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — focus, arrow keys, typeahead, the\n   * pointer — and with `null` when focus leaves the list (a switch to another window keeps the\n   * active option). It reports what `aria-activedescendant` points at, from an effect once the\n   * change commits. Fluent's `onActiveOptionChange` reports neither the pointer (its options have\n   * no hover highlight) nor the loss of focus.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Takes the list out of the tab order (a click does not focus it either, as a disabled native\n   * `<select>`) and dims it: its options take no pointer input, nothing can be selected, and\n   * nothing is submitted or validated. Renders `aria-disabled` and `data-disabled`. An\n   * `aria-disabled` of your own without `disabled` is passed through as it is: the list stays\n   * interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Focuses the list when it mounts in the browser (React focuses only form controls itself), not\n   * while `disabled`. Server-rendered HTML carries the `autofocus` attribute for the browser's own\n   * autofocus, so a hydrating list takes no focus, as React leaves a hydrated form control alone.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * option that is active on focus may then be a disabled one too); they still cannot be\n   * selected (Space, Enter and a click do nothing). Unlike Fluent, which always keeps disabled\n   * options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /** The `multiselect` toggle announcements, for localization. Unset members keep their English defaults. */\n  labels?: ListboxLabels;\n  /**\n   * Name of the value in form submissions (renders a hidden input inside the list; one per value\n   * with `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Listbox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation); when validation finds\n   * it empty, focus moves to the list.\n   */\n  required?: boolean;\n  /**\n   * Called on a key press on the list, before the built-in keys; `event.preventDefault()` skips\n   * them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  /** Ref to the `<ul role=\"listbox\">`. */\n  ref?: React.Ref<HTMLUListElement>;\n}\n\n/** The Listbox component's type: a multi-select signature, then the single-select one. */\nexport interface ListboxComponent {\n  (props: ListboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ListboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\nconst UNNAMED_WARNING =\n  'Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or ' +\n  'render it inside a Field.';\n\n/** The state attributes of a disabled list, rendered only while `disabled` (C-DISABLED). */\nconst DISABLED_ATTRIBUTES = { 'aria-disabled': true, 'data-disabled': '' } as const;\n\nconst ListboxRoot = (props: ListboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onActiveOptionChange,\n    disabled = false,\n    disabledOptionsFocusable = false,\n    autoFocus = false,\n    labels,\n    name,\n    form,\n    required,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const field = useFieldContext();\n  // `<label for>` does not reach a listbox, so a Field names it through aria-labelledby. An\n  // explicit `required={false}` wins over a required Field, so aria-required matches the native\n  // requirement below.\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n\n  const [value, setValue] = useControllable<string | readonly string[]>(\n    valueProp,\n    defaultValue ?? (multiselect ? EMPTY_VALUES : ''),\n    (next) => {\n      // The two call signatures make `onValueChange` a union of incompatible functions from here:\n      // the root itself is written against the wider, internal shape (D9).\n      (onValueChange as ((value: string | string[]) => void) | undefined)?.(\n        typeof next === 'string' ? next : [...next],\n      );\n    },\n  );\n  // Normalised for the listbox, the hidden inputs and the reset: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript is none rather than a crash.\n  const values = toValues(value);\n\n  // The focus of the list itself (not of anything inside it): an option is active only while the\n  // list has focus, so its outline never shows on a list the user is not in (D17).\n  const [focused, setFocused] = React.useState(false);\n  const listRef = React.useRef<HTMLUListElement | null>(null);\n  const isClient = useIsClient();\n  // Whether the mount's autoFocus was handled: a later change never focuses the list.\n  const autoFocusHandledRef = React.useRef(false);\n\n  // The focus state follows the DOM, not only focus events, on mount, once hydrated and whenever\n  // `disabled` changes: a list focused before hydration (a tab, the browser's autofocus) has focus\n  // without a focus event React saw, and a browser that moves focus off a list whose tab stop went\n  // away fires no blur. React focuses only form controls for `autoFocus`, so a list mounted in the\n  // browser focuses itself; a hydrating one leaves focus where it is, as React does for a control.\n  React.useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    if (!autoFocusHandledRef.current) {\n      autoFocusHandledRef.current = true;\n      if (autoFocus && !disabled && isClient) list.focus();\n    }\n    setFocused(!disabled && isFocused(list));\n  }, [autoFocus, disabled, isClient]);\n\n  const listbox = useListbox({\n    open: focused && !disabled,\n    mode: 'standalone',\n    multiselect,\n    selectedValues: values,\n    // APG listbox: the arrows stop at the ends.\n    loop: false,\n    disabledOptionsFocusable,\n    onSelect: (next, details) => {\n      if (disabled) return;\n      if (!multiselect) {\n        // Selecting the selected option again is no change: useControllable skips it.\n        setValue(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      // A toggle the user made (D41): a controlled change and a form reset never reach this\n      // callback. `details` carries the registered option, whose label is its text.\n      announceToggle(labels, details?.item.label ?? next, added, updated.length);\n    },\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'listbox',\n  });\n  // The hook's ref must reach the list: a pointer press on an option focuses the list through it.\n  const { ref: listElementRef, ...listProps } = listbox.getListboxProps();\n  const mergedRef = useMergedRefs<HTMLUListElement>(ref, listRef, listElementRef);\n\n  // The active option's outline shows focus only while the option is in the list's view: scrolled\n  // away (the wheel, a smaller list), the list draws its own ring as well (WCAG 2.4.7). A new active\n  // option counts as shown until the browser reports otherwise, since the keys scroll it into view\n  // (adjust-during-render pattern, C-HOOKS); without IntersectionObserver nothing is observed.\n  const activeId = listProps['aria-activedescendant'];\n  const [activeOutOfView, setActiveOutOfView] = React.useState(false);\n  const [observedId, setObservedId] = React.useState(activeId);\n  if (observedId !== activeId) {\n    setObservedId(activeId);\n    setActiveOutOfView(false);\n  }\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (activeId === undefined || !list || typeof IntersectionObserver === 'undefined') return;\n    const option = Array.from(list.querySelectorAll('[role=\"option\"]')).find(\n      (el) => el.id === activeId,\n    );\n    if (!option) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (entry) setActiveOutOfView(!entry.isIntersecting);\n      },\n      { root: list },\n    );\n    observer.observe(option);\n    return () => observer.disconnect();\n  }, [activeId]);\n\n  useFormReset(\n    listRef,\n    () => {\n      if (!multiselect) {\n        setValue(defaultValue ?? '');\n        return;\n      }\n      // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n      setValue((current) => resetValues(current, defaultValue));\n    },\n    form,\n  );\n\n  // C-DEV: a listbox needs a name; a blank one names nothing.\n  const unnamed = !fieldProps['aria-label']?.trim() && !fieldProps['aria-labelledby']?.trim();\n  React.useEffect(() => {\n    if (unnamed) warnOnce('Listbox:unnamed', UNNAMED_WARNING);\n  }, [unnamed]);\n\n  // C-COMPOSE: keys typed in a portal rendered inside the list bubble through it in React; they\n  // are not the list's.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (disabled || !isOwnEvent(event)) return;\n    listbox.onKeyDown(event);\n  };\n  // Only the list's own focus counts: focus inside a portal rendered in it, or on its hidden\n  // input (which hands focus back to the list), is not the list's.\n  const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    if (event.target === event.currentTarget) setFocused(true);\n  };\n  // A switch to another window blurs the list but leaves it the active element, so the list keeps\n  // its active option for the return, as a native `<select size>` keeps its keyboard position;\n  // focus that moves elsewhere in the page changes the active element before the blur.\n  const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    const list = event.currentTarget;\n    if (event.target === list && !isFocused(list)) setFocused(false);\n  };\n\n  return (\n    <ul\n      {...rest}\n      {...fieldProps}\n      {...listProps}\n      // The consumer's id (or the Field's control id), else the hook's; the option ids keep the\n      // hook's prefix.\n      id={fieldProps.id ?? listProps.id}\n      tabIndex={disabled ? undefined : listProps.tabIndex}\n      aria-activedescendant={listProps['aria-activedescendant']}\n      aria-multiselectable={listProps['aria-multiselectable']}\n      // Rendered only while disabled, so a consumer `aria-disabled` on an enabled list passes\n      // through as it is (C-DISABLED: the list stays interactive).\n      {...(disabled ? DISABLED_ATTRIBUTES : undefined)}\n      // The server renders the `autofocus` attribute for the browser; the effect above focuses a\n      // list mounted in the browser. Without autoFocus the prop stays out of hydration's check.\n      autoFocus={autoFocus || undefined}\n      ref={mergedRef}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n      // Bookkeeping that mirrors the DOM: it runs even when a consumer handler prevents the event.\n      onFocus={composeEventHandlers(onFocus, handleFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, handleBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        listboxClassNames.root,\n        // The list's own margin, padding and markers are set here, not left to the native reset\n        // (C-NATIVE).\n        'relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground',\n        // The active option's outline shows focus; while no option can be active (an empty list,\n        // every option hidden, or every option disabled without disabledOptionsFocusable), or the\n        // active one is scrolled out of view, the list's own ring does (WCAG 2.4.7). The outline\n        // is hidden only while focused, so forced colors still draw one (C-FOCUS).\n        listbox.activeValue === null || activeOutOfView ? focusRing : 'focus:outline-hidden',\n        // Disabled: the options take no pointer input (inherited by the options of a group), so\n        // none hovers and the list's own not-allowed cursor shows over them.\n        disabled && 'cursor-not-allowed opacity-50 *:pointer-events-none',\n        className,\n      )}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <ListboxProvider value={listbox.context}>{children}</ListboxProvider>\n      {/* Inside the list: a focused hidden input hands focus back to its parent element. */}\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={required ?? field?.required ?? false}\n        onInvalid={() => listRef.current?.focus()}\n      />\n    </ul>\n  );\n};\nListboxRoot.displayName = 'Listbox';\n\n/** Flat name of `Listbox.Option` for React Server Components. */\nexport const ListboxOption = Option;\n/** Flat name of `Listbox.OptionGroup` for React Server Components. */\nexport const ListboxOptionGroup = OptionGroup;\n\n/**\n * A list of options that holds focus itself (APG listbox): one `<ul role=\"listbox\">` of\n * `Option`s, whose `aria-activedescendant` points at the active option while the list has focus.\n * It is the picker option model shown in the page — typeahead, groups, disabled options and the\n * option look of Dropdown and Combobox. Use `List` with `selectable` (`selectionMode`) instead\n * when each item needs real focus, actions of its own or interactive content.\n *\n * - **Focus.** One tab stop. The active option exists only while the list has focus, and a\n *   switch to another window keeps it: the selected option (with `multiselect`, the first\n *   selected one in list order), else the first. While no option can be active (an empty list,\n *   every option hidden, or every option disabled without `disabledOptionsFocusable`), and while\n *   the active option is scrolled out of the list's view, the list draws its own focus ring. A\n *   press on an option with the primary button focuses the list and makes that option active\n *   without scrolling, so the click selects it even while the selected option is scrolled out of\n *   view; a right or middle press is left to the browser. `autoFocus` focuses the list when it\n *   mounts.\n * - **Keys.** ArrowDown and ArrowUp move without wrapping, Home and End go to the first and last\n *   option, PageUp and PageDown move ten options, and typing moves to the matching option\n *   (typeahead). Space and Enter select the active option: the selection does not follow the\n *   active option. Tab, Escape and Alt+Arrow keys are left to the page, so an enclosing Dialog\n *   closes on Escape.\n * - **Selection.** `value`, `defaultValue` and `onValueChange` are Fluent's `selectedOptions`,\n *   `defaultSelectedOptions` and `onOptionSelect` under WaveUI's value naming. A single-select\n *   Listbox keeps the selected option when it is selected again (no deselection). `multiselect`\n *   turns the value into an array: options draw a checkbox, Space, Enter and a click toggle an\n *   option, the value keeps selection order, and every toggle the user makes is announced\n *   (`labels.added`/`labels.removed`; never a controlled change or a form reset). A non-literal\n *   `multiselect={flag}` is a type error: render two elements, one for each mode.\n * - **Disabled.** `disabled` takes the list out of the tab order (a click does not focus it\n *   either), dims it, takes pointer input off its options, selects nothing and submits nothing.\n *   Disabled options are skipped by the keys unless `disabledOptionsFocusable`, and are never\n *   selected.\n * - **Forms and Field.** With `name` the value is submitted with its form (one entry, or one per\n *   value with `multiselect`), and `required` needs a value (native validation; a missing value\n *   moves focus to the list). A reset of its form restores `defaultValue`, with or without a\n *   `name` (a `multiselect` reset is compared by content, so restoring the same values reports\n *   nothing). Inside a `Field` the list is labelled by its label, described by its message and\n *   hint, and takes its invalid and required state; otherwise name it with `aria-label` or\n *   `aria-labelledby` (development warns once when it has no name).\n * - It has no built-in height: give it one through `className` and it scrolls.\n *\n * Every prop, the `ref` and the handlers go to the `<ul>`. Sub-components: `Listbox.Option`,\n * `Listbox.OptionGroup`. React Server Components import the flat names `ListboxOption` /\n * `ListboxOptionGroup` (dotted access needs a client file).\n *\n * @example\n * <Listbox aria-label=\"Fruit\" name=\"fruit\" defaultValue=\"banana\">\n *   <Listbox.Option value=\"apple\">Apple</Listbox.Option>\n *   <Listbox.Option value=\"banana\">Banana</Listbox.Option>\n * </Listbox>\n */\nexport const Listbox = /* @__PURE__ */ Object.assign(ListboxRoot, {\n  Option,\n  OptionGroup,\n}) as ListboxComponent;\n"],"mappings":"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"}

package/dist/components/input/Listbox.mjs

@@ -0,0 +1,134 @@
+"use client";
+import { cn as e } from "../../lib/cn.mjs";
+import { warnOnce as t } from "../../lib/dev.mjs";
+import { composeEventHandlers as n } from "../../lib/composeEventHandlers.mjs";
+import { listboxClassNames as r } from "../../lib/classNames.mjs";
+import { useControllable as i } from "../../hooks/useControllable.mjs";
+import { isFocused as a } from "../../lib/focus.mjs";
+import { useMergedRefs as o } from "../../hooks/useMergedRefs.mjs";
+import { useIsClient as ee } from "../../hooks/useIsClient.mjs";
+import { useFieldContext as te, useFieldControl as ne } from "../../hooks/useFieldControl.mjs";
+import { useListbox as s } from "../../hooks/useListbox.mjs";
+import { focusRing as c } from "../../lib/styles.mjs";
+import { useFormReset as l } from "../../hooks/useFormReset.mjs";
+import { HiddenInput as u } from "../internal/HiddenInput.mjs";
+import { ListboxProvider as d, Option as f, OptionGroup as p } from "./Option.mjs";
+import { PickerAnnouncer as m, announceToggle as re } from "./pickerLabels.mjs";
+import { EMPTY_VALUES as ie, resetValues as ae, toValues as oe, toggleValue as se } from "./pickerValues.mjs";
+import { isOwnEvent as ce } from "../../lib/events.mjs";
+import * as h from "react";
+import { jsx as g, jsxs as le } from "react/jsx-runtime";
+//#region src/components/input/Listbox.tsx
+var ue = "Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or render it inside a Field.", de = {
+	"aria-disabled": !0,
+	"data-disabled": ""
+}, _ = (f) => {
+	let { multiselect: p = !1, value: _, defaultValue: v, onValueChange: y, onActiveOptionChange: b, disabled: x = !1, disabledOptionsFocusable: S = !1, autoFocus: C = !1, labels: w, name: T, form: E, required: D, id: O, "aria-label": k, "aria-labelledby": A, "aria-describedby": j, "aria-invalid": M, "aria-required": N, onFocus: P, onBlur: F, onKeyDown: I, onKeyUp: L, className: fe, children: R, ref: z, ...B } = f, V = te(), H = ne({
+		id: O,
+		"aria-label": k,
+		"aria-labelledby": A,
+		"aria-describedby": j,
+		"aria-invalid": M,
+		"aria-required": N ?? D
+	}, { labelable: !1 }), [pe, U] = i(_, v ?? (p ? ie : ""), (e) => {
+		y?.(typeof e == "string" ? e : [...e]);
+	}), W = oe(pe), [me, G] = h.useState(!1), K = h.useRef(null), q = ee(), J = h.useRef(!1);
+	h.useLayoutEffect(() => {
+		let e = K.current;
+		e && (J.current || (J.current = !0, C && !x && q && e.focus()), G(!x && a(e)));
+	}, [
+		C,
+		x,
+		q
+	]);
+	let Y = s({
+		open: me && !x,
+		mode: "standalone",
+		multiselect: p,
+		selectedValues: W,
+		loop: !1,
+		disabledOptionsFocusable: S,
+		onSelect: (e, t) => {
+			if (x) return;
+			if (!p) {
+				U(e);
+				return;
+			}
+			let { values: n, added: r } = se(W, e);
+			U(n), re(w, t?.item.label ?? e, r, n.length);
+		},
+		onActiveValueChange: b,
+		idPrefix: "listbox"
+	}), { ref: he, ...X } = Y.getListboxProps(), ge = o(z, K, he), Z = X["aria-activedescendant"], [_e, Q] = h.useState(!1), [ve, ye] = h.useState(Z);
+	ve !== Z && (ye(Z), Q(!1)), h.useEffect(() => {
+		let e = K.current;
+		if (Z === void 0 || !e || typeof IntersectionObserver > "u") return;
+		let t = Array.from(e.querySelectorAll("[role=\"option\"]")).find((e) => e.id === Z);
+		if (!t) return;
+		let n = new IntersectionObserver((e) => {
+			let t = e[e.length - 1];
+			t && Q(!t.isIntersecting);
+		}, { root: e });
+		return n.observe(t), () => n.disconnect();
+	}, [Z]), l(K, () => {
+		if (!p) {
+			U(v ?? "");
+			return;
+		}
+		U((e) => ae(e, v));
+	}, E);
+	let $ = !H["aria-label"]?.trim() && !H["aria-labelledby"]?.trim();
+	h.useEffect(() => {
+		$ && t("Listbox:unnamed", ue);
+	}, [$]);
+	let be = (e) => {
+		!x && ce(e) && Y.onKeyDown(e);
+	}, xe = (e) => {
+		e.target === e.currentTarget && G(!0);
+	}, Se = (e) => {
+		let t = e.currentTarget;
+		e.target === t && !a(t) && G(!1);
+	};
+	return /* @__PURE__ */ le("ul", {
+		...B,
+		...H,
+		...X,
+		id: H.id ?? X.id,
+		tabIndex: x ? void 0 : X.tabIndex,
+		"aria-activedescendant": X["aria-activedescendant"],
+		"aria-multiselectable": X["aria-multiselectable"],
+		...x ? de : void 0,
+		autoFocus: C || void 0,
+		ref: ge,
+		onKeyDown: n(I, be),
+		onKeyUp: n(L, Y.onKeyUp),
+		onFocus: n(P, xe, { checkDefaultPrevented: !1 }),
+		onBlur: n(F, Se, { checkDefaultPrevented: !1 }),
+		className: e(r.root, "relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground", Y.activeValue === null || _e ? c : "focus:outline-hidden", x && "cursor-not-allowed opacity-50 *:pointer-events-none", fe),
+		children: [
+			p && /* @__PURE__ */ g(m, {}),
+			/* @__PURE__ */ g(d, {
+				value: Y.context,
+				children: R
+			}),
+			/* @__PURE__ */ g(u, {
+				name: T,
+				form: E,
+				disabled: x,
+				value: p ? W : W[0] ?? "",
+				type: "text",
+				required: D ?? V?.required ?? !1,
+				onInvalid: () => K.current?.focus()
+			})
+		]
+	});
+};
+_.displayName = "Listbox";
+var v = f, y = p, b = /* @__PURE__ */ Object.assign(_, {
+	Option: f,
+	OptionGroup: p
+});
+//#endregion
+export { b as Listbox, v as ListboxOption, y as ListboxOptionGroup };
+
+//# sourceMappingURL=Listbox.mjs.map

package/dist/components/input/Listbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.mjs","names":["React","UNNAMED_WARNING","DISABLED_ATTRIBUTES","ListboxRoot","valueProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaInvalid","ariaRequired","rest","props","field","useFieldContext","fieldProps","useFieldControl","required","value","setValue","useControllable","defaultValue","multiselect","EMPTY_VALUES","next","values","toValues","focused","setFocused","listRef","isClient","useIsClient","autoFocusHandledRef","list","autoFocus","disabled","isFocused","listbox","useListbox","updated","toggleValue","announceToggle","labels","details","added","onActiveOptionChange","listElementRef","listProps","mergedRef","useMergedRefs","ref","activeId","activeOutOfView","setActiveOutOfView","observedId","setObservedId","option","el","observer","entry","entries","useFormReset","resetValues","current","form","unnamed","warnOnce","handleKeyDown","isOwnEvent","event","handleFocus","handleBlur","composeEventHandlers","onKeyDown","onKeyUp","onFocus","onBlur","cn","listboxClassNames","focusRing","className","PickerAnnouncer","ListboxProvider","HiddenInput","ListboxOption","Option","ListboxOptionGroup","OptionGroup","Listbox"],"sources":["../../../src/components/input/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { listboxClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { isFocused } from '../../lib/focus';\nimport { focusRing } from '../../lib/styles';\nimport { useControllable } from '../../hooks/useControllable';\nimport { useFieldContext, useFieldControl } from '../../hooks/useFieldControl';\nimport { useFormReset } from '../../hooks/useFormReset';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { useListbox } from '../../hooks/useListbox';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { HiddenInput } from '../internal/HiddenInput';\nimport { ListboxProvider, Option, OptionGroup } from './Option';\nimport { announceToggle, PickerAnnouncer } from './pickerLabels';\nimport { EMPTY_VALUES, resetValues, toggleValue, toValues } from './pickerValues';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox                                                           */\n/* ------------------------------------------------------------------ */\n\n/**\n * The Listbox's built-in texts, for localization: the announcements of a `multiselect` toggle.\n * Each member is optional and falls back to its English default.\n */\nexport interface ListboxLabels {\n  /**\n   * Announced when a `multiselect` toggle selects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} added, ${count} selected`\n   */\n  added?: (label: string, count: number) => string;\n  /**\n   * Announced when a `multiselect` toggle deselects an option; `count` is the number of values\n   * selected after the change.\n   * @default (label, count) => `${label} removed, ${count} selected`\n   */\n  removed?: (label: string, count: number) => string;\n}\n\n/** Properties for the Listbox component. */\nexport interface ListboxProps<M extends boolean = false> extends Omit<\n  React.HTMLAttributes<HTMLUListElement>,\n  'onChange' | 'defaultValue'\n> {\n  /**\n   * Several options can be selected (Fluent's `multiselect`; List's `selectionMode=\"multiple\"` is\n   * the other widget): the value is an array, options draw a checkbox, Space, Enter and a click\n   * toggle an option, and each toggle is announced. A non-literal `multiselect={flag}` is a type\n   * error: render two elements, one for each mode.\n   * @default false\n   */\n  multiselect?: M;\n  /**\n   * Controlled selected value (`''` for none), or with `multiselect` the selected values in\n   * selection order (Fluent's `selectedOptions`).\n   */\n  value?: M extends true ? readonly string[] : string;\n  /**\n   * Initial selected value for uncontrolled usage, which a form reset restores.\n   * @default '' (`[]` with `multiselect`)\n   */\n  defaultValue?: M extends true ? readonly string[] : string;\n  /**\n   * Called with the new value when it changes (a new array with `multiselect`; Fluent's\n   * `onOptionSelect`, under WaveUI's value/onValueChange naming). In single-select mode, selecting\n   * the selected option again changes nothing: the Listbox never deselects it.\n   */\n  onValueChange?: M extends true ? (value: string[]) => void : (value: string) => void;\n  /**\n   * Called after the active (highlighted) option changes — focus, arrow keys, typeahead, the\n   * pointer — and with `null` when focus leaves the list (a switch to another window keeps the\n   * active option). It reports what `aria-activedescendant` points at, from an effect once the\n   * change commits. Fluent's `onActiveOptionChange` reports neither the pointer (its options have\n   * no hover highlight) nor the loss of focus.\n   */\n  onActiveOptionChange?: (value: string | null) => void;\n  /**\n   * Takes the list out of the tab order (a click does not focus it either, as a disabled native\n   * `<select>`) and dims it: its options take no pointer input, nothing can be selected, and\n   * nothing is submitted or validated. Renders `aria-disabled` and `data-disabled`. An\n   * `aria-disabled` of your own without `disabled` is passed through as it is: the list stays\n   * interactive.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Focuses the list when it mounts in the browser (React focuses only form controls itself), not\n   * while `disabled`. Server-rendered HTML carries the `autofocus` attribute for the browser's own\n   * autofocus, so a hydrating list takes no focus, as React leaves a hydrated form control alone.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Keeps disabled options in the arrow-key, Home/End, PageUp/PageDown and typeahead order (the\n   * option that is active on focus may then be a disabled one too); they still cannot be\n   * selected (Space, Enter and a click do nothing). Unlike Fluent, which always keeps disabled\n   * options reachable, WaveUI skips them by default.\n   * @default false\n   */\n  disabledOptionsFocusable?: boolean;\n  /** The `multiselect` toggle announcements, for localization. Unset members keep their English defaults. */\n  labels?: ListboxLabels;\n  /**\n   * Name of the value in form submissions (renders a hidden input inside the list; one per value\n   * with `multiselect`).\n   */\n  name?: string;\n  /** Id of the form the value belongs to, when the Listbox is outside it. */\n  form?: string;\n  /**\n   * A value is required to submit the form (native constraint validation); when validation finds\n   * it empty, focus moves to the list.\n   */\n  required?: boolean;\n  /**\n   * Called on a key press on the list, before the built-in keys; `event.preventDefault()` skips\n   * them.\n   */\n  onKeyDown?: React.KeyboardEventHandler<HTMLUListElement>;\n  /** Ref to the `<ul role=\"listbox\">`. */\n  ref?: React.Ref<HTMLUListElement>;\n}\n\n/** The Listbox component's type: a multi-select signature, then the single-select one. */\nexport interface ListboxComponent {\n  (props: ListboxProps<true> & { multiselect: true }): React.ReactNode;\n  (props: ListboxProps): React.ReactNode;\n  displayName?: string;\n  Option: typeof Option;\n  OptionGroup: typeof OptionGroup;\n}\n\nconst UNNAMED_WARNING =\n  'Listbox: the listbox has no accessible name. Pass `aria-label` or `aria-labelledby`, or ' +\n  'render it inside a Field.';\n\n/** The state attributes of a disabled list, rendered only while `disabled` (C-DISABLED). */\nconst DISABLED_ATTRIBUTES = { 'aria-disabled': true, 'data-disabled': '' } as const;\n\nconst ListboxRoot = (props: ListboxProps<boolean>) => {\n  const {\n    multiselect = false,\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    onActiveOptionChange,\n    disabled = false,\n    disabledOptionsFocusable = false,\n    autoFocus = false,\n    labels,\n    name,\n    form,\n    required,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    'aria-invalid': ariaInvalid,\n    'aria-required': ariaRequired,\n    onFocus,\n    onBlur,\n    onKeyDown,\n    onKeyUp,\n    className,\n    children,\n    ref,\n    ...rest\n  } = props;\n\n  const field = useFieldContext();\n  // `<label for>` does not reach a listbox, so a Field names it through aria-labelledby. An\n  // explicit `required={false}` wins over a required Field, so aria-required matches the native\n  // requirement below.\n  const fieldProps = useFieldControl(\n    {\n      id,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      'aria-invalid': ariaInvalid,\n      'aria-required': ariaRequired ?? required,\n    },\n    { labelable: false },\n  );\n\n  const [value, setValue] = useControllable<string | readonly string[]>(\n    valueProp,\n    defaultValue ?? (multiselect ? EMPTY_VALUES : ''),\n    (next) => {\n      // The two call signatures make `onValueChange` a union of incompatible functions from here:\n      // the root itself is written against the wider, internal shape (D9).\n      (onValueChange as ((value: string | string[]) => void) | undefined)?.(\n        typeof next === 'string' ? next : [...next],\n      );\n    },\n  );\n  // Normalised for the listbox, the hidden inputs and the reset: a single value is its own\n  // one-element array, and a `value` passed as `null` from JavaScript is none rather than a crash.\n  const values = toValues(value);\n\n  // The focus of the list itself (not of anything inside it): an option is active only while the\n  // list has focus, so its outline never shows on a list the user is not in (D17).\n  const [focused, setFocused] = React.useState(false);\n  const listRef = React.useRef<HTMLUListElement | null>(null);\n  const isClient = useIsClient();\n  // Whether the mount's autoFocus was handled: a later change never focuses the list.\n  const autoFocusHandledRef = React.useRef(false);\n\n  // The focus state follows the DOM, not only focus events, on mount, once hydrated and whenever\n  // `disabled` changes: a list focused before hydration (a tab, the browser's autofocus) has focus\n  // without a focus event React saw, and a browser that moves focus off a list whose tab stop went\n  // away fires no blur. React focuses only form controls for `autoFocus`, so a list mounted in the\n  // browser focuses itself; a hydrating one leaves focus where it is, as React does for a control.\n  React.useLayoutEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n    if (!autoFocusHandledRef.current) {\n      autoFocusHandledRef.current = true;\n      if (autoFocus && !disabled && isClient) list.focus();\n    }\n    setFocused(!disabled && isFocused(list));\n  }, [autoFocus, disabled, isClient]);\n\n  const listbox = useListbox({\n    open: focused && !disabled,\n    mode: 'standalone',\n    multiselect,\n    selectedValues: values,\n    // APG listbox: the arrows stop at the ends.\n    loop: false,\n    disabledOptionsFocusable,\n    onSelect: (next, details) => {\n      if (disabled) return;\n      if (!multiselect) {\n        // Selecting the selected option again is no change: useControllable skips it.\n        setValue(next);\n        return;\n      }\n      const { values: updated, added } = toggleValue(values, next);\n      setValue(updated);\n      // A toggle the user made (D41): a controlled change and a form reset never reach this\n      // callback. `details` carries the registered option, whose label is its text.\n      announceToggle(labels, details?.item.label ?? next, added, updated.length);\n    },\n    onActiveValueChange: onActiveOptionChange,\n    idPrefix: 'listbox',\n  });\n  // The hook's ref must reach the list: a pointer press on an option focuses the list through it.\n  const { ref: listElementRef, ...listProps } = listbox.getListboxProps();\n  const mergedRef = useMergedRefs<HTMLUListElement>(ref, listRef, listElementRef);\n\n  // The active option's outline shows focus only while the option is in the list's view: scrolled\n  // away (the wheel, a smaller list), the list draws its own ring as well (WCAG 2.4.7). A new active\n  // option counts as shown until the browser reports otherwise, since the keys scroll it into view\n  // (adjust-during-render pattern, C-HOOKS); without IntersectionObserver nothing is observed.\n  const activeId = listProps['aria-activedescendant'];\n  const [activeOutOfView, setActiveOutOfView] = React.useState(false);\n  const [observedId, setObservedId] = React.useState(activeId);\n  if (observedId !== activeId) {\n    setObservedId(activeId);\n    setActiveOutOfView(false);\n  }\n  React.useEffect(() => {\n    const list = listRef.current;\n    if (activeId === undefined || !list || typeof IntersectionObserver === 'undefined') return;\n    const option = Array.from(list.querySelectorAll('[role=\"option\"]')).find(\n      (el) => el.id === activeId,\n    );\n    if (!option) return;\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[entries.length - 1];\n        if (entry) setActiveOutOfView(!entry.isIntersecting);\n      },\n      { root: list },\n    );\n    observer.observe(option);\n    return () => observer.disconnect();\n  }, [activeId]);\n\n  useFormReset(\n    listRef,\n    () => {\n      if (!multiselect) {\n        setValue(defaultValue ?? '');\n        return;\n      }\n      // Compared by content (C-FORMS), so a reset that keeps the same values reports nothing.\n      setValue((current) => resetValues(current, defaultValue));\n    },\n    form,\n  );\n\n  // C-DEV: a listbox needs a name; a blank one names nothing.\n  const unnamed = !fieldProps['aria-label']?.trim() && !fieldProps['aria-labelledby']?.trim();\n  React.useEffect(() => {\n    if (unnamed) warnOnce('Listbox:unnamed', UNNAMED_WARNING);\n  }, [unnamed]);\n\n  // C-COMPOSE: keys typed in a portal rendered inside the list bubble through it in React; they\n  // are not the list's.\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    if (disabled || !isOwnEvent(event)) return;\n    listbox.onKeyDown(event);\n  };\n  // Only the list's own focus counts: focus inside a portal rendered in it, or on its hidden\n  // input (which hands focus back to the list), is not the list's.\n  const handleFocus = (event: React.FocusEvent<HTMLUListElement>) => {\n    if (event.target === event.currentTarget) setFocused(true);\n  };\n  // A switch to another window blurs the list but leaves it the active element, so the list keeps\n  // its active option for the return, as a native `<select size>` keeps its keyboard position;\n  // focus that moves elsewhere in the page changes the active element before the blur.\n  const handleBlur = (event: React.FocusEvent<HTMLUListElement>) => {\n    const list = event.currentTarget;\n    if (event.target === list && !isFocused(list)) setFocused(false);\n  };\n\n  return (\n    <ul\n      {...rest}\n      {...fieldProps}\n      {...listProps}\n      // The consumer's id (or the Field's control id), else the hook's; the option ids keep the\n      // hook's prefix.\n      id={fieldProps.id ?? listProps.id}\n      tabIndex={disabled ? undefined : listProps.tabIndex}\n      aria-activedescendant={listProps['aria-activedescendant']}\n      aria-multiselectable={listProps['aria-multiselectable']}\n      // Rendered only while disabled, so a consumer `aria-disabled` on an enabled list passes\n      // through as it is (C-DISABLED: the list stays interactive).\n      {...(disabled ? DISABLED_ATTRIBUTES : undefined)}\n      // The server renders the `autofocus` attribute for the browser; the effect above focuses a\n      // list mounted in the browser. Without autoFocus the prop stays out of hydration's check.\n      autoFocus={autoFocus || undefined}\n      ref={mergedRef}\n      onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}\n      onKeyUp={composeEventHandlers(onKeyUp, listbox.onKeyUp)}\n      // Bookkeeping that mirrors the DOM: it runs even when a consumer handler prevents the event.\n      onFocus={composeEventHandlers(onFocus, handleFocus, { checkDefaultPrevented: false })}\n      onBlur={composeEventHandlers(onBlur, handleBlur, { checkDefaultPrevented: false })}\n      className={cn(\n        listboxClassNames.root,\n        // The list's own margin, padding and markers are set here, not left to the native reset\n        // (C-NATIVE).\n        'relative m-0 flex list-none flex-col overflow-y-auto px-0 py-1 text-foreground',\n        // The active option's outline shows focus; while no option can be active (an empty list,\n        // every option hidden, or every option disabled without disabledOptionsFocusable), or the\n        // active one is scrolled out of view, the list's own ring does (WCAG 2.4.7). The outline\n        // is hidden only while focused, so forced colors still draw one (C-FOCUS).\n        listbox.activeValue === null || activeOutOfView ? focusRing : 'focus:outline-hidden',\n        // Disabled: the options take no pointer input (inherited by the options of a group), so\n        // none hovers and the list's own not-allowed cursor shows over them.\n        disabled && 'cursor-not-allowed opacity-50 *:pointer-events-none',\n        className,\n      )}\n    >\n      {multiselect && <PickerAnnouncer />}\n      <ListboxProvider value={listbox.context}>{children}</ListboxProvider>\n      {/* Inside the list: a focused hidden input hands focus back to its parent element. */}\n      <HiddenInput\n        name={name}\n        form={form}\n        disabled={disabled}\n        value={multiselect ? values : (values[0] ?? '')}\n        type=\"text\"\n        required={required ?? field?.required ?? false}\n        onInvalid={() => listRef.current?.focus()}\n      />\n    </ul>\n  );\n};\nListboxRoot.displayName = 'Listbox';\n\n/** Flat name of `Listbox.Option` for React Server Components. */\nexport const ListboxOption = Option;\n/** Flat name of `Listbox.OptionGroup` for React Server Components. */\nexport const ListboxOptionGroup = OptionGroup;\n\n/**\n * A list of options that holds focus itself (APG listbox): one `<ul role=\"listbox\">` of\n * `Option`s, whose `aria-activedescendant` points at the active option while the list has focus.\n * It is the picker option model shown in the page — typeahead, groups, disabled options and the\n * option look of Dropdown and Combobox. Use `List` with `selectable` (`selectionMode`) instead\n * when each item needs real focus, actions of its own or interactive content.\n *\n * - **Focus.** One tab stop. The active option exists only while the list has focus, and a\n *   switch to another window keeps it: the selected option (with `multiselect`, the first\n *   selected one in list order), else the first. While no option can be active (an empty list,\n *   every option hidden, or every option disabled without `disabledOptionsFocusable`), and while\n *   the active option is scrolled out of the list's view, the list draws its own focus ring. A\n *   press on an option with the primary button focuses the list and makes that option active\n *   without scrolling, so the click selects it even while the selected option is scrolled out of\n *   view; a right or middle press is left to the browser. `autoFocus` focuses the list when it\n *   mounts.\n * - **Keys.** ArrowDown and ArrowUp move without wrapping, Home and End go to the first and last\n *   option, PageUp and PageDown move ten options, and typing moves to the matching option\n *   (typeahead). Space and Enter select the active option: the selection does not follow the\n *   active option. Tab, Escape and Alt+Arrow keys are left to the page, so an enclosing Dialog\n *   closes on Escape.\n * - **Selection.** `value`, `defaultValue` and `onValueChange` are Fluent's `selectedOptions`,\n *   `defaultSelectedOptions` and `onOptionSelect` under WaveUI's value naming. A single-select\n *   Listbox keeps the selected option when it is selected again (no deselection). `multiselect`\n *   turns the value into an array: options draw a checkbox, Space, Enter and a click toggle an\n *   option, the value keeps selection order, and every toggle the user makes is announced\n *   (`labels.added`/`labels.removed`; never a controlled change or a form reset). A non-literal\n *   `multiselect={flag}` is a type error: render two elements, one for each mode.\n * - **Disabled.** `disabled` takes the list out of the tab order (a click does not focus it\n *   either), dims it, takes pointer input off its options, selects nothing and submits nothing.\n *   Disabled options are skipped by the keys unless `disabledOptionsFocusable`, and are never\n *   selected.\n * - **Forms and Field.** With `name` the value is submitted with its form (one entry, or one per\n *   value with `multiselect`), and `required` needs a value (native validation; a missing value\n *   moves focus to the list). A reset of its form restores `defaultValue`, with or without a\n *   `name` (a `multiselect` reset is compared by content, so restoring the same values reports\n *   nothing). Inside a `Field` the list is labelled by its label, described by its message and\n *   hint, and takes its invalid and required state; otherwise name it with `aria-label` or\n *   `aria-labelledby` (development warns once when it has no name).\n * - It has no built-in height: give it one through `className` and it scrolls.\n *\n * Every prop, the `ref` and the handlers go to the `<ul>`. Sub-components: `Listbox.Option`,\n * `Listbox.OptionGroup`. React Server Components import the flat names `ListboxOption` /\n * `ListboxOptionGroup` (dotted access needs a client file).\n *\n * @example\n * <Listbox aria-label=\"Fruit\" name=\"fruit\" defaultValue=\"banana\">\n *   <Listbox.Option value=\"apple\">Apple</Listbox.Option>\n *   <Listbox.Option value=\"banana\">Banana</Listbox.Option>\n * </Listbox>\n */\nexport const Listbox = /* @__PURE__ */ Object.assign(ListboxRoot, {\n  Option,\n  OptionGroup,\n}) as ListboxComponent;\n"],"mappings":"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"}

package/dist/components/input/Option.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useId.cjs"),a=require("../../hooks/useMergedRefs.cjs"),o=require("../../hooks/useDismiss.cjs"),s=require("../portal/Portal.cjs"),c=require("../../lib/styles.cjs"),l=require("../../lib/icons.cjs"),u=require("../../hooks/useListbox.cjs"),d=require("../../hooks/usePopupPosition.cjs");let f=require("react");f=e.__toESM(f,1);let p=require("react/jsx-runtime");var m=f.createContext(!0);m.displayName=`OptionCheckContext`;var h=t.cn(`flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground`,`bg-(--option-bg) [--option-bg:transparent]`,`not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]`,`data-[selected]:[--option-bg:var(--wave-subtle-selected)]`,`data-[active]:[--option-bg:var(--wave-subtle-hover)]`,`data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring`,`aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground`),g=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},_=f.createContext([]);_.displayName=`OptionGroupContext`;var v=f.createContext(!1);v.displayName=`OptionGroupHiddenContext`;function y(e){let t=f.useContext(_);f.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}function b(e){let{value:i,label:a,textValue:o,disabled:s=!1,hidden:d=!1,className:g,children:_,onClick:b,onPointerMove:x,ref:S,...C}=e,w=f.useContext(m),T=f.useContext(v),{selected:E,optionProps:D}=u.useListboxOption({value:i,label:a,textValue:o,disabled:s,hidden:d||T},S);y(i);let{ref:O,onClick:k,onPointerMove:A,...j}=D;return(0,p.jsxs)(`li`,{"data-value":i,...C,...j,ref:O,onClick:n.composeEventHandlers(b,k),onPointerMove:n.composeEventHandlers(x,A),className:t.cn(r.optionClassNames.root,h,E&&c.forcedColors.selectedContainer,g),children:[w&&(0,p.jsx)(l.CheckIcon,{className:t.cn(r.optionClassNames.checkIcon,`shrink-0`,!E&&`invisible`)}),(0,p.jsx)(`span`,{className:t.cn(r.optionClassNames.content,`min-w-0 flex-1`),children:_??i})]})}b.displayName=`Option`;var x=f.memo(b);x.displayName=`Option`;var S=u.markListboxElement(x,`option`);function C({label:e,className:n,children:a,hidden:o,ref:s,...c}){let l=i.useId(`option-group`),d=f.useContext(u.ListboxContext)?.store,m=f.useContext(_),h=f.useContext(v)||!!o,[y]=f.useState(()=>new g),b=f.useMemo(()=>[...m,y],[m,y]),x=f.useCallback(e=>{let t=y.subscribe(e),n=d?.subscribe(e);return()=>{t(),n?.()}},[y,d]),S=f.useSyncExternalStore(x,()=>y.allHidden(d),()=>!1);return(0,p.jsxs)(`li`,{...c,ref:s,role:`presentation`,hidden:o||S||void 0,className:t.cn(r.optionGroupClassNames.root,n),children:[(0,p.jsx)(`div`,{id:l,role:`presentation`,className:t.cn(r.optionGroupClassNames.label,`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`),children:e}),(0,p.jsx)(`ul`,{role:`group`,"aria-labelledby":l,className:r.optionGroupClassNames.list,children:(0,p.jsx)(v.Provider,{value:h,children:(0,p.jsx)(_.Provider,{value:b,children:a})})})]})}C.displayName=`OptionGroup`;var w=u.markListboxElement(C,`group`);function T(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:i,anchorRef:s}=e,c=f.useRef(null),{setReference:l,setFloating:u,floatingProps:p}=d.usePopupPosition({open:n,side:`bottom`,align:`start`,matchReferenceWidth:!0,fitViewport:!0}),{layerId:m}=o.useDismiss({open:t,onDismiss:e=>r(e),refs:[i,c],anchorRef:s,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:m,setReference:l,surfaceRef:a.useMergedRefs(c,u),floatingProps:p}}function E(e){e.preventDefault()}function D(e){let{listbox:n,layerId:r,surfaceRef:i,floatingProps:a,open:o,expanded:c,emptyContent:l,"aria-label":d,"aria-labelledby":f,showCheck:h=!0,listboxClassName:g,surfaceClassName:_,children:v}=e,y=(0,p.jsx)(m.Provider,{value:h,children:(0,p.jsx)(u.ListboxContext.Provider,{value:n.context,children:(0,p.jsx)(`ul`,{...n.getListboxProps(),"aria-label":d,"aria-labelledby":f,hidden:!c||void 0,className:t.cn(g,`min-h-0 max-h-60 overflow-auto`),children:v})})});return!c&&(!o||c||l==null)?y:(0,p.jsxs)(p.Fragment,{children:[!c&&y,(0,p.jsx)(s.Portal,{layerId:r,children:(0,p.jsx)(`div`,{ref:i,...a,"data-wave-listbox-surface":``,onMouseDown:E,className:t.cn(_,`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`),children:c?y:l})})]})}D.displayName=`ListboxSurface`,exports.ListboxSurface=D,exports.Option=S,exports.OptionGroup=w,exports.useListboxPopup=T;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/classNames.cjs"),o=require("../../hooks/useId.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/useListbox.cjs"),l=require("../../hooks/useDismiss.cjs"),u=require("../portal/Portal.cjs"),d=require("../../lib/styles.cjs"),f=require("../../lib/icons.cjs"),p=require("../../hooks/usePopupPosition.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=m.createContext(!0);g.displayName=`OptionCheckContext`;var _=t.cn(`flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground`,`bg-(--option-bg) [--option-bg:transparent]`,`not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]`,`data-[selected]:[--option-bg:var(--wave-subtle-selected)]`,`data-[active]:[--option-bg:var(--wave-subtle-hover)]`,`data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring`,`aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground`),v=class{counts=new Map;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});add(e){return this.counts.set(e,(this.counts.get(e)??0)+1),this.notify(),()=>{let t=(this.counts.get(e)??1)-1;t>0?this.counts.set(e,t):this.counts.delete(e),this.notify()}}allHidden(e){if(e===void 0||this.counts.size===0)return!1;for(let t of this.counts.keys())if(!e.isHidden(t))return!1;return!0}notify(){for(let e of[...this.listeners])e()}},y=m.createContext([]);y.displayName=`OptionGroupContext`;var b=m.createContext(!1);b.displayName=`OptionGroupHiddenContext`;function x(e){let t=m.useContext(y);m.useLayoutEffect(()=>{if(t.length===0)return;let n=t.map(t=>t.add(e));return()=>{for(let e of n)e()}},[t,e])}var S=`forced-colors:border-[GrayText] forced-colors:bg-[Canvas]`,C=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`;function w(e,{selected:n,multiselect:i,disabled:o}){if(!i){let i=t.cn(a.optionClassNames.checkIcon,`shrink-0`,!n&&`invisible`);return e===void 0?(0,h.jsx)(f.CheckIcon,{className:i}):r.renderSlot(e,`span`,t.cn(`inline-flex`,i),{"aria-hidden":!0})}let s;s=o?t.cn(`border-current bg-transparent`,S):n?t.cn(`border-primary bg-primary text-primary-foreground`,d.forcedColors.selectedLeaf):t.cn(`border-stroke-accessible bg-transparent`,d.forcedColors.control);let c=o?C:void 0;return(0,h.jsx)(`span`,{"aria-hidden":`true`,"data-wave-option-box":``,className:t.cn(a.optionClassNames.indicator,`flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border`,s),children:n&&(e===void 0?(0,h.jsx)(f.CheckIcon,{size:12,className:t.cn(a.optionClassNames.checkIcon,c)}):r.renderSlot(e,`span`,t.cn(a.optionClassNames.checkIcon,`inline-flex shrink-0`,c),{"aria-hidden":!0}))})}function T(e){let{value:o,label:s,textValue:l,disabled:u=!1,hidden:f=!1,checkIcon:p,className:v,children:y,onClick:S,onMouseDown:C,onPointerMove:T,ref:E,...D}=e,O=m.useContext(g),k=m.useContext(b),{selected:A,multiselect:j,optionProps:M}=c.useListboxOption({value:o,label:s,textValue:l,disabled:u,hidden:f||k},E);x(o);let{ref:N,onClick:P,onMouseDown:F,onPointerMove:I,...L}=M,R=p!=null&&r.slotRendersContent(p),z=p!=null&&!R;return m.useEffect(()=>{z&&n.warnOnce(`Option:checkIcon-empty`,"Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.")},[z]),(0,h.jsxs)(`li`,{"data-value":o,...D,...L,ref:N,onClick:i.composeEventHandlers(S,P),onMouseDown:i.composeEventHandlers(C,F),onPointerMove:i.composeEventHandlers(T,I),className:t.cn(a.optionClassNames.root,_,A&&!(j&&O)&&d.forcedColors.selectedContainer,v),children:[O&&w(R?p:void 0,{selected:A,multiselect:j,disabled:u}),(0,h.jsx)(`span`,{className:t.cn(a.optionClassNames.content,`min-w-0 flex-1`),children:y??o})]})}T.displayName=`Option`;var E=m.memo(T);E.displayName=`Option`;var D=c.markListboxElement(E,`option`),O=1,k=3;function A(e){if(e===null)return``;if(e.nodeType===k)return e.textContent??``;if(e.nodeType!==O)return``;let t=e;if(t.getAttribute(`aria-hidden`)===`true`||t.hasAttribute(`hidden`))return``;let n=t.getAttribute(`aria-label`)?.trim();if(n)return n;if(t.localName===`img`)return t.getAttribute(`alt`)??``;let r=``;for(let e of Array.from(t.childNodes))r+=A(e);return r}function j(e,t,n,r,i){return n!==void 0&&n!==r&&n.trim()!==``||t!==void 0&&t.trim()!==``?!0:n===r?typeof e==`string`||typeof e==`number`?String(e).trim()!==``:A(i).trim()!==``:!1}var M=`OptionGroup:unnamed`;function N({label:e,className:i,children:s,hidden:l,"aria-label":u,"aria-labelledby":d,ref:f,...p}){let g=o.useId(`option-group`),_=m.useContext(c.ListboxContext)?.store,x=m.useContext(y),S=m.useContext(b)||!!l,[C]=m.useState(()=>new v),w=m.useMemo(()=>[...x,C],[x,C]),T=m.useCallback(e=>{let t=C.subscribe(e),n=_?.subscribe(e);return()=>{t(),n?.()}},[C,_]),E=m.useSyncExternalStore(T,()=>C.allHidden(_),()=>!1),D=r.slotRendersContent(e),O=d??(u===void 0&&D?g:void 0),k=m.useRef(null);return m.useEffect(()=>{n.isDev&&!n.hasWarned(M)&&(j(e,u,O,g,k.current)||n.warnOnce(M,"OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`."))},[e,u,O,g]),(0,h.jsxs)(`li`,{...p,ref:f,role:`presentation`,hidden:l||E||void 0,className:t.cn(a.optionGroupClassNames.root,i),children:[D&&(0,h.jsx)(`div`,{ref:k,id:g,role:`presentation`,className:t.cn(a.optionGroupClassNames.label,`px-3 py-1 text-caption-1 font-semibold text-muted-foreground`),children:r.materialiseSlotContent(e)}),(0,h.jsx)(`ul`,{role:`group`,"aria-label":u,"aria-labelledby":O,className:a.optionGroupClassNames.list,children:(0,h.jsx)(b.Provider,{value:S,children:(0,h.jsx)(y.Provider,{value:w,children:s})})})]})}N.displayName=`OptionGroup`;var P=c.markListboxElement(N,`group`);function F({value:e,children:t}){return(0,h.jsx)(c.ListboxContext.Provider,{value:e,children:t})}F.displayName=`ListboxProvider`;function I(e){let{open:t,surfaceOpen:n,onDismiss:r,rootRef:i,anchorRef:a}=e,o=m.useRef(null),{setReference:c,setFloating:u,floatingProps:d}=p.usePopupPosition({open:n,side:`bottom`,align:`start`,matchReferenceWidth:!0,fitViewport:!0}),{layerId:f}=l.useDismiss({open:t,onDismiss:e=>r(e),refs:[i,o],anchorRef:a,kind:`listbox`,escape:n,focusOutside:!0});return{layerId:f,setReference:c,surfaceRef:s.useMergedRefs(o,u),floatingProps:d}}function L(e){e.preventDefault()}function R(e){let{listbox:n,layerId:r,surfaceRef:i,floatingProps:o,open:s,expanded:c,emptyContent:l,"aria-label":d,"aria-labelledby":f,showCheck:p=!0,listClassName:m,surfaceClassName:_,children:v}=e,y=(0,h.jsx)(g.Provider,{value:p,children:(0,h.jsx)(F,{value:n.context,children:(0,h.jsx)(`ul`,{...n.getListboxProps(),"aria-label":d,"aria-labelledby":f,hidden:!c||void 0,className:t.cn(a.listboxSurfaceClassNames.list,`min-h-0 max-h-60 overflow-auto`,m),children:v})})});return!c&&(!s||c||l==null)?y:(0,h.jsxs)(h.Fragment,{children:[!c&&y,(0,h.jsx)(u.Portal,{layerId:r,children:(0,h.jsx)(`div`,{ref:i,...o,"data-wave-listbox-surface":``,onMouseDown:L,className:t.cn(a.listboxSurfaceClassNames.root,`flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4`,_),children:c?y:l})})]})}R.displayName=`ListboxSurface`,exports.ListboxProvider=F,exports.ListboxSurface=R,exports.Option=D,exports.OptionGroup=P,exports.useListboxPopup=I;
 //# sourceMappingURL=Option.cjs.map

package/dist/components/input/Option.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Option.cjs","names":["React","cn","useListboxOption","composeEventHandlers","optionClassNames","forcedColors","CheckIcon","useId","ListboxContext","optionGroupClassNames","usePopupPosition","useDismiss","useMergedRefs","_Fragment","Portal","require_runtime","require_cn","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useDismiss","require_Portal","require_styles","require_icons","require_useListbox","require_usePopupPosition","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","highlightOption","optionAttributes","optionProps","onClick","onPointerMove","selected","className","children","MemoOption","Option","OptionGroupImpl","labelId","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","label","OptionGroup","useListboxPopup","options","surfaceElementRef","surfaceOpen","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","ariaLabel","ariaLabelledBy","list","listbox","expanded","listboxClassName","emptyContent","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { optionClassNames, optionGroupClassNames } from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { CheckIcon } from '../../lib/icons';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the Option component used within Combobox and Dropdown. */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays visible but is skipped by keyboard navigation and\n   * cannot be selected.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    className,\n    children,\n    onClick,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        selected && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck && (\n        <CheckIcon\n          className={cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible')}\n        />\n      )}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a `Combobox`, `Dropdown` (and `TagPicker`'s generated list). Renders\n * `<li role=\"option\">` with a stable id (`aria-activedescendant` target), `aria-selected`, a check\n * mark while selected and `data-active`/`data-selected`/`data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a `Combobox` or `Dropdown` only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/** Properties for the OptionGroup component used to group options. */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /** Heading label for the option group (names the group). */\n  label: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nfunction OptionGroupImpl({ label, className, children, hidden, ref, ...rest }: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      <div\n        id={labelId}\n        role=\"presentation\"\n        className={cn(\n          optionGroupClassNames.label,\n          'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n        )}\n      >\n        {label}\n      </div>\n      <ul role=\"group\" aria-labelledby={labelId} className={optionGroupClassNames.list}>\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under a heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\" aria-labelledby>` of the options. Hidden while a filter (or their own `hidden`)\n * hides all its options, also options wrapped in a component or in nested groups.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup (P05-internal, shared by Combobox, Dropdown, TagPicker) */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /** The listbox is open (dismiss layer registered: outside press, focus outside). */\n  open: boolean;\n  /**\n   * The portaled surface is shown: positioning runs and the layer takes Escape. While the listbox\n   * is open with nothing shown (no options), Escape is left to an enclosing layer (overlays#1).\n   */\n  surfaceOpen: boolean;\n  /** Close the listbox. */\n  onDismiss: (reason: DismissReason) => void;\n  /** The component root: presses and focus inside it are not \"outside\". */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /** The combobox element (the layer's anchor). */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/** Result of {@link useListboxPopup}. Destructure it (react-hooks/refs). */\nexport interface ListboxPopup {\n  /** The dismiss layer id (pass to {@link ListboxSurface}). */\n  layerId: string;\n  /** Ref callback for the element the surface is positioned against. */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `data-side`, `data-align` and the position style for the surface. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a listbox surface (C-POPUPS, spec §5.4): `useDismiss` (Escape,\n * outside press, focus outside; `kind: 'listbox'`) and `usePopupPosition` (bottom-start, flip,\n * shift, the anchor's width, limited to the available space).\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): ListboxPopup {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/** Props of {@link ListboxSurface}. */\nexport interface ListboxSurfaceProps {\n  /** The listbox (from `useListbox`). */\n  listbox: UseListboxResult;\n  /** From {@link useListboxPopup}. */\n  layerId: string;\n  surfaceRef: React.RefCallback<HTMLElement>;\n  floatingProps: ListboxPopup['floatingProps'];\n  /** The listbox is open: `emptyContent` is shown only while it is (input-pickers#21). */\n  open: boolean;\n  /** The listbox is displayed: the list renders in the portaled surface. */\n  expanded: boolean;\n  /** While open but not expanded, show the surface with this content (e.g. \"No matches\"). */\n  emptyContent?: React.ReactNode;\n  /** Accessible name of the listbox. */\n  'aria-label'?: string;\n  'aria-labelledby'?: string;\n  /** Options draw a check mark while selected. @default true */\n  showCheck?: boolean;\n  /** The host's stable class for the listbox element (its `listbox` part). */\n  listboxClassName?: string;\n  /** The host's stable class for the portaled surface (its `surface` part). */\n  surfaceClassName?: string;\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * Renders the option list in a single container at a time (spec §2.5, §5.5): inline and `hidden`\n * inside the component root while closed (registration and ids exist from the first client\n * commit), and in a `Portal` surface while expanded — never both.\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listboxClassName,\n    surfaceClassName,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxContext.Provider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(listboxClassName, 'min-h-0 max-h-60 overflow-auto')}\n        >\n          {children}\n        </ul>\n      </ListboxContext.Provider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            surfaceClassName,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"qjBAuDA,IAAM6B,EAAqB7B,EAAM,cAAc,EAAI,EACnD,EAAmB,YAAc,qBAiBjC,IAAM8B,EAAiB7B,EAAAA,GACrB,6FACA,6CACA,8EACA,4DACA,uDACA,qFACA,sEACF,EAMM8B,EAAN,KAAyB,CACvB,OAA0B,IAAI,IAC9B,UAA6B,IAAI,IAEjC,UAAa,IACX,KAAK,UAAU,IAAIC,CAAQ,MACd,CACX,KAAK,UAAU,OAAOA,CAAQ,CAChC,GAGF,IAAI,EAA2B,CAG7B,OAFA,KAAK,OAAO,IAAIC,GAAQ,KAAK,OAAO,IAAIA,CAAK,GAAK,GAAK,CAAC,EACxD,KAAK,OAAO,MACC,CACX,IAAMC,GAAS,KAAK,OAAO,IAAID,CAAK,GAAK,GAAK,EAC1CC,EAAQ,EAAG,KAAK,OAAO,IAAID,EAAOC,CAAK,EACtC,KAAK,OAAO,OAAOD,CAAK,EAC7B,KAAK,OAAO,CACd,CACF,CAGA,UAAU,EAA0C,CAClD,GAAIE,IAAU,IAAA,IAAa,KAAK,OAAO,OAAS,EAAG,MAAO,GAC1D,IAAK,IAAMF,KAAS,KAAK,OAAO,KAAK,EAAG,GAAI,CAACE,EAAM,SAASF,CAAK,EAAG,MAAO,GAC3E,MAAO,EACT,CAEA,QAAuB,CACrB,IAAK,IAAMD,IAAY,CAAC,GAAG,KAAK,SAAS,EAAGA,EAAS,CACvD,CACF,EAGMI,EAAqBpC,EAAM,cAA6C,CAAC,CAAC,EAChF,EAAmB,YAAc,qBAGjC,IAAMqC,EAA2BrC,EAAM,cAAc,EAAK,EAC1D,EAAyB,YAAc,2BAGvC,SAASsC,EAAyB,EAAqB,CACrD,IAAMC,EAASvC,EAAM,WAAWoC,CAAkB,EAClDT,EAAM,oBAAsB,CAC1B,GAAIY,EAAO,SAAW,EAAG,OACzB,IAAMC,EAAUD,EAAO,IAAK,GAAUE,EAAM,IAAIR,CAAK,CAAC,EACtD,UAAa,CACX,IAAK,IAAMS,KAAUF,EAASE,EAAO,CACvC,CACF,EAAG,CAACH,EAAQN,CAAK,CAAC,CACpB,CAEA,SAASU,EAAW,EAAoB,CACtC,GAAM,CACJ,QACA,QACA,YACA,WAAW,GACX,SAAS,GACT,YACA,WACA,UACA,gBACA,MACA,GAAGC,GACDC,EACEC,EAAY9C,EAAM,WAAW6B,CAAkB,EAC/CkB,EAAc/C,EAAM,WAAWqC,CAAwB,EAEvD,CAAE,WAAU,eAAgBnC,EAAAA,iBAChC,CAAE,QAAO,QAAO,YAAW,WAAU,OAAQ8C,GAAUD,CAAY,EACnEE,CACF,EACAX,EAAyBL,CAAK,EAC9B,GAAM,CACJ,IAAKiB,EACL,QAASC,EACT,cAAeC,EACf,GAAGC,GACDC,EAEJ,OACE,EAAA1B,EAAA,KAAA,CAAC,KAAD,CACE,aAAYK,EACZ,GAAIW,EACJ,GAAIS,EACJ,IAAKH,EACL,QAAS/C,EAAAA,qBAAqBoD,EAASJ,CAAY,EACnD,cAAehD,EAAAA,qBAAqBqD,EAAeJ,CAAe,EAClE,UAAWnD,EAAAA,GACTG,EAAAA,iBAAiB,KACjB0B,EACA2B,GAAYpD,EAAAA,aAAa,kBACzBqD,CACF,EAZF,SAAA,CAcGZ,IACC,EAAAlB,EAAA,IAAA,CAACtB,EAAAA,UAAD,CACE,UAAWL,EAAAA,GAAGG,EAAAA,iBAAiB,UAAW,WAAY,CAACqD,GAAY,WAAW,CAC/E,CAAA,GAEH,EAAA7B,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW3B,EAAAA,GAAGG,EAAAA,iBAAiB,QAAS,gBAAgB,EAAI,SAAAuD,GAAY1B,CAAY,CAAA,CACxF,GAER,CACA,EAAW,YAAc,SAEzB,IAAM2B,EAA6BjC,EAAM,KAAKgB,CAAU,EACxD,EAAW,YAAc,SAkBzB,IAAakB,EAAkEpC,EAAA,mBAC7EmC,EACA,QACF,EAoBA,SAASE,EAAgB,CAAE,QAAO,YAAW,WAAU,SAAQ,MAAK,GAAGlB,GAA0B,CAC/F,IAAMmB,EAAUxD,EAAAA,MAAM,cAAc,EAC9B4B,EAAQnC,EAAM,WAAWQ,EAAAA,cAAc,CAAC,EAAE,MAC1CwD,EAAehE,EAAM,WAAWoC,CAAkB,EAClD6B,EAAmBjE,EAAM,WAAWqC,CAAwB,GAAK,CAAC,CAACW,EACnE,CAACkB,GAAWlE,EAAM,aAAe,IAAI+B,CAAoB,EACzDQ,EAASvC,EAAM,YAAc,CAAC,GAAGgE,EAAcE,CAAO,EAAG,CAACF,EAAcE,CAAO,CAAC,EAChFC,EAAYnE,EAAM,YACrB,GAAyB,CACxB,IAAMoE,EAAqBF,EAAQ,UAAUlC,CAAQ,EAC/CqC,EAAmBlC,GAAO,UAAUH,CAAQ,EAClD,UAAa,CACXoC,EAAmB,EACnBC,IAAmB,CACrB,CACF,EACA,CAACH,EAAS/B,CAAK,CACjB,EAKMmC,EAAQtE,EAAM,qBAClBmE,MACMD,EAAQ,UAAU/B,CAAK,MACvB,EACR,EAEA,OACE,EAAAP,EAAA,KAAA,CAAC,KAAD,CACE,GAAIgB,EACC,MACL,KAAK,eACL,OAAQI,GAAUsB,GAAS,IAAA,GAC3B,UAAWrE,EAAAA,GAAGQ,EAAAA,sBAAsB,KAAMiD,CAAS,EALrD,SAAA,EAOE,EAAA9B,EAAA,IAAA,CAAC,MAAD,CACE,GAAImC,EACJ,KAAK,eACL,UAAW9D,EAAAA,GACTQ,EAAAA,sBAAsB,MACtB,8DACF,EAEC,SAAA8D,CACE,CAAA,GACL,EAAA3C,EAAA,IAAA,CAAC,KAAD,CAAI,KAAK,QAAQ,kBAAiBmC,EAAS,UAAWtD,EAAAA,sBAAsB,KAC1E,UAAA,EAAAmB,EAAA,IAAA,CAACS,EAAyB,SAA1B,CAAmC,MAAO4B,EACxC,UAAA,EAAArC,EAAA,IAAA,CAACQ,EAAmB,SAApB,CAA6B,MAAOG,EAAS,UAAsC,CAAA,CAClD,CAAA,CACjC,CAAA,CACF,GAER,CACA,EAAgB,YAAc,cAO9B,IAAaiC,EAA0D/C,EAAA,mBACrEqC,EACA,OACF,EAwCA,SAAgBW,EAAgB,EAA+C,CAC7E,GAAM,CAAE,OAAM,cAAa,YAAW,UAAS,aAAcC,EACvDC,EAAoB3E,EAAM,OAA2B,IAAI,EACzD,CAAE,eAAc,cAAa,iBAAkBU,EAAAA,iBAAiB,CACpE,KAAMkE,EACN,KAAM,SACN,MAAO,QACP,oBAAqB,GACrB,YAAa,EACf,CAAC,EACK,CAAE,WAAYjE,EAAAA,WAAW,CAC7B,OACA,UAAY,GAAWkE,EAAUC,CAAM,EACvC,KAAM,CAACC,EAASJ,CAAiB,EACjC,YACA,KAAM,UACN,OAAQC,EACR,aAAc,EAChB,CAAC,EAED,MAAO,CAAE,UAAS,eAAc,WADbhE,EAAAA,cAA2B+D,EAAmBK,CACjC,EAAY,eAAc,CAC5D,CA4BA,SAASC,EAAiB,EAAyB,CACjDC,EAAM,eAAe,CACvB,CAOA,SAAgBC,EAAe,EAA4B,CACzD,GAAM,CACJ,UACA,UACA,aACA,gBACA,OACA,WACA,eACA,aAAcC,EACd,kBAAmBC,EACnB,YAAY,GACZ,mBACA,mBACA,YACExC,EAEEyC,GACJ,EAAA1D,EAAA,IAAA,CAACC,EAAmB,SAApB,CAA6B,MAAOiB,EAClC,UAAA,EAAAlB,EAAA,IAAA,CAACpB,EAAAA,eAAe,SAAhB,CAAyB,MAAO+E,EAAQ,QACtC,UAAA,EAAA3D,EAAA,IAAA,CAAC,KAAD,CACE,GAAI2D,EAAQ,gBAAgB,EAC5B,aAAYH,EACZ,kBAAiBC,EACjB,OAAQ,CAACG,GAAY,IAAA,GACrB,UAAWvF,EAAAA,GAAGwF,EAAkB,gCAAgC,EAE/D,UACC,CAAA,CACmB,CAAA,CACE,CAAA,EAO/B,MAFI,CAACD,IADa,IAASA,GAAYE,GAA+C,MAClDJ,GAGlC,EAAA1D,EAAA,KAAA,CAAAf,EAAAA,SAAA,CAAA,SAAA,CACG,CAAC2E,GAAYF,GACd,EAAA1D,EAAA,IAAA,CAACd,EAAAA,OAAD,CAAiB,UACf,UAAA,EAAAc,EAAA,IAAA,CAAC,MAAD,CACE,IAAK+D,EACL,GAAIC,EACJ,4BAA0B,GAC1B,YAAaX,EACb,UAAWhF,EAAAA,GACT4F,EACA,wGACF,EAEC,SAAAL,EAAWF,EAAOI,CAChB,CAAA,CACC,CAAA,CACR,CAAA,CAAA,CAEN,CACA,EAAe,YAAc"}
+{"version":3,"file":"Option.cjs","names":["React","cn","optionClassNames","CheckIcon","renderSlot","forcedColors","useListboxOption","slotRendersContent","composeEventHandlers","useId","ListboxContext","isDev","hasWarned","optionGroupClassNames","materialiseSlotContent","usePopupPosition","useDismiss","useMergedRefs","listboxSurfaceClassNames","_Fragment","Portal","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_classNames","require_useId","require_useMergedRefs","require_useListbox","require_useDismiss","require_Portal","require_styles","require_icons","require_usePopupPosition","react","react_jsx_runtime","OptionCheckContext","OPTION_CLASSES","OptionGroupMembers","listener","value","count","store","OptionGroupContext","OptionGroupHiddenContext","useOptionGroupMembership","groups","removes","group","remove","DISABLED_BOX_FORCED_COLORS","DISABLED_GLYPH_FORCED_COLORS","renderCheck","multiselect","classes","selected","glyph","boxClasses","disabled","glyphClasses","OptionImpl","rest","props","showCheck","groupHidden","hidden","ref","optionRef","selectOption","pressOption","highlightOption","optionAttributes","optionProps","checkIconRenders","checkIcon","checkIconEmpty","onClick","onMouseDown","onPointerMove","className","children","MemoOption","Option","ELEMENT_NODE","TEXT_NODE","nameText","node","element","ownLabel","text","child","groupHasName","labelledBy","labelId","ariaLabel","label","heading","UNNAMED_GROUP_WARNING","OptionGroupImpl","ariaLabelledBy","parentGroups","hiddenByConsumer","members","subscribe","unsubscribeMembers","unsubscribeStore","empty","hasLabel","headingRef","OptionGroup","ListboxProvider","useListboxPopup","options","surfaceElementRef","surfaceOpen","onDismiss","reason","rootRef","setFloating","preventMouseDown","event","ListboxSurface","list","listbox","expanded","listClassName","emptyContent","surfaceRef","floatingProps","surfaceClassName"],"sources":["../../../src/components/input/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  listboxSurfaceClassNames,\n  optionClassNames,\n  optionGroupClassNames,\n} from '../../lib/classNames';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { hasWarned, isDev, warnOnce } from '../../lib/dev';\nimport { CheckIcon } from '../../lib/icons';\nimport { materialiseSlotContent, renderSlot, slotRendersContent, type Slot } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useDismiss } from '../../hooks/useDismiss';\nimport type { DismissReason } from '../../hooks/useDismiss';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport {\n  ListboxContext,\n  markListboxElement,\n  useListboxOption,\n  type ListboxContextValue,\n  type ListboxStore,\n  type UseListboxResult,\n} from '../../hooks/useListbox';\nimport { Portal } from '../portal/Portal';\n\n/* ------------------------------------------------------------------ */\n/*  Option                                                             */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link Option}, an option of a listbox (Listbox, Combobox, Dropdown or a custom\n * picker's list).\n */\nexport interface OptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'value'> {\n  /** Value associated with this option. Unique within its listbox. */\n  value: string;\n  /**\n   * Text shown in the combobox (Combobox input, Dropdown trigger) when this option is selected.\n   * Defaults to `textValue`, then the option's text content, then `value`. Pass it when the\n   * children are not plain text (icons, custom components).\n   */\n  label?: string;\n  /** Text matched by typeahead and filtering instead of the label. */\n  textValue?: string;\n  /**\n   * Whether the option is disabled: it stays in the list but can never be selected (a click, Enter\n   * and Space do nothing). Keyboard navigation and typeahead skip it, unless the listbox keeps\n   * disabled options focusable (`disabledOptionsFocusable`), where they reach it. It is drawn in\n   * the muted text colour, its check included: in a multi-select list the checkbox square takes\n   * that colour instead of the brand colour, checked or not.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Replaces the check glyph that marks the option while it is selected (decorative,\n   * `aria-hidden`); in a multi-select list the glyph is drawn inside the option's 16px checkbox\n   * square. The check is a required indicator, the sign of the selection that does not rely on\n   * colour: `null` and `undefined` keep the default glyph, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `Combobox.expandIcon`, a value that renders nothing does not hide the indicator (Fluent's\n   * `checkIcon={null}` removes it).\n   * @default a check mark\n   */\n  checkIcon?: Slot<'span'>;\n  /**\n   * Hides the option, like a native `<option hidden>`: it is not shown, keyboard navigation and\n   * typeahead skip it, and it never becomes the active option. Its label stays known, so a\n   * selected hidden option (a placeholder) still shows in the combobox. The options of a hidden\n   * `OptionGroup` are hidden the same way.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the option `<li>` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\n/** Whether options draw the selected check mark (P05-internal; TagPicker lists no selected options). */\nconst OptionCheckContext = React.createContext(true);\nOptionCheckContext.displayName = 'OptionCheckContext';\n\n/*\n * State is exposed as data attributes (C-CLASS): `data-active` (keyboard/pointer highlight),\n * `data-selected`, `data-disabled`. State classes come before the consumer's `className` in `cn()`.\n *\n * Backgrounds (input-pickers#20): one unconditional `bg-(--option-bg)` paints the option, and the\n * hover/selected/active variants only set `--option-bg`. A variant that set `background-color`\n * itself (class + attribute or pseudo-class) would out-specify a consumer's plain `bg-*` class in\n * the cascade even though `cn()` keeps it; instead tailwind-merge replaces `bg-(--option-bg)` with\n * the consumer's class, which is then the only background declaration on the option. A consumer\n * `data-[active]:bg-…` / `data-[selected]:bg-…` restyles a single state (it out-specifies the\n * unconditional reader). The active outline is the focus indicator and stays a state variant.\n *\n * A filtered-out option carries the `hidden` attribute; base.css's scoped `[hidden]` rule hides\n * it over `flex` and over a consumer's display class.\n */\nconst OPTION_CLASSES = cn(\n  'flex cursor-pointer select-none items-center gap-2 px-3 py-1.5 text-body-1 text-foreground',\n  'bg-(--option-bg) [--option-bg:transparent]',\n  'not-disabled:not-aria-disabled:hover:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[selected]:[--option-bg:var(--wave-subtle-selected)]',\n  'data-[active]:[--option-bg:var(--wave-subtle-hover)]',\n  'data-[active]:outline-2 data-[active]:-outline-offset-2 data-[active]:outline-ring',\n  'aria-disabled:cursor-not-allowed aria-disabled:text-muted-foreground',\n);\n\n/**\n * The values of the options rendered inside an `OptionGroup`, whatever wraps them (custom\n * components, Fragments, nested groups): each option adds its value from a layout effect.\n */\nclass OptionGroupMembers {\n  private readonly counts = new Map<string, number>();\n  private readonly listeners = new Set<() => void>();\n\n  subscribe = (listener: () => void): (() => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  add(value: string): () => void {\n    this.counts.set(value, (this.counts.get(value) ?? 0) + 1);\n    this.notify();\n    return () => {\n      const count = (this.counts.get(value) ?? 1) - 1;\n      if (count > 0) this.counts.set(value, count);\n      else this.counts.delete(value);\n      this.notify();\n    };\n  }\n\n  /** At least one option, and every one of them is hidden (filtered out, or by the consumer). */\n  allHidden(store: ListboxStore | undefined): boolean {\n    if (store === undefined || this.counts.size === 0) return false;\n    for (const value of this.counts.keys()) if (!store.isHidden(value)) return false;\n    return true;\n  }\n\n  private notify(): void {\n    for (const listener of [...this.listeners]) listener();\n  }\n}\n\n/** The groups around an option, outermost first (P05-internal). */\nconst OptionGroupContext = React.createContext<readonly OptionGroupMembers[]>([]);\nOptionGroupContext.displayName = 'OptionGroupContext';\n\n/** A group around the option has the consumer's `hidden` attribute (P05-internal). */\nconst OptionGroupHiddenContext = React.createContext(false);\nOptionGroupHiddenContext.displayName = 'OptionGroupHiddenContext';\n\n/** Adds an option's value to every group around it while the option is mounted. */\nfunction useOptionGroupMembership(value: string): void {\n  const groups = React.useContext(OptionGroupContext);\n  React.useLayoutEffect(() => {\n    if (groups.length === 0) return;\n    const removes = groups.map((group) => group.add(value));\n    return () => {\n      for (const remove of removes) remove();\n    };\n  }, [groups, value]);\n}\n\n/*\n * Forced colours of a disabled option's box, as Checkbox draws a disabled box: GrayText on Canvas\n * for the square and its glyph, without the Highlight background of `forcedColors.selectedLeaf`.\n */\nconst DISABLED_BOX_FORCED_COLORS = 'forced-colors:border-[GrayText] forced-colors:bg-[Canvas]';\nconst DISABLED_GLYPH_FORCED_COLORS =\n  'forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none';\n\n/** What the check column of an option draws (see {@link renderCheck}). */\ninterface CheckState {\n  selected: boolean;\n  multiselect: boolean;\n  disabled: boolean;\n}\n\n/**\n * The check column of an option. Single-select: the check glyph, kept in its place but not drawn\n * while the option is not selected, so the option texts line up. Multi-select: a 16px checkbox\n * square in Checkbox's colours, with the glyph inside only while selected; as a leaf indicator it\n * takes `forcedColors.selectedLeaf` while checked. A disabled option's square follows the row, as\n * the single-select glyph does: its muted text colour draws the square and the glyph, in place of\n * the brand colour. `glyph` is the consumer's `checkIcon` when it renders content, else\n * `undefined` for the default glyph.\n */\nfunction renderCheck(\n  glyph: Slot<'span'> | undefined,\n  { selected, multiselect, disabled }: CheckState,\n): React.ReactNode {\n  if (!multiselect) {\n    const classes = cn(optionClassNames.checkIcon, 'shrink-0', !selected && 'invisible');\n    return glyph === undefined ? (\n      <CheckIcon className={classes} />\n    ) : (\n      renderSlot(glyph, 'span', cn('inline-flex', classes), { 'aria-hidden': true })\n    );\n  }\n  // One class set per state, so a disabled box never carries the brand classes it replaces.\n  let boxClasses: string;\n  if (disabled) {\n    boxClasses = cn('border-current bg-transparent', DISABLED_BOX_FORCED_COLORS);\n  } else if (selected) {\n    boxClasses = cn('border-primary bg-primary text-primary-foreground', forcedColors.selectedLeaf);\n  } else {\n    boxClasses = cn('border-stroke-accessible bg-transparent', forcedColors.control);\n  }\n  const glyphClasses = disabled ? DISABLED_GLYPH_FORCED_COLORS : undefined;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-wave-option-box=\"\"\n      className={cn(\n        optionClassNames.indicator,\n        'flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border',\n        boxClasses,\n      )}\n    >\n      {selected &&\n        (glyph === undefined ? (\n          <CheckIcon size={12} className={cn(optionClassNames.checkIcon, glyphClasses)} />\n        ) : (\n          renderSlot(\n            glyph,\n            'span',\n            cn(optionClassNames.checkIcon, 'inline-flex shrink-0', glyphClasses),\n            {\n              'aria-hidden': true,\n            },\n          )\n        ))}\n    </span>\n  );\n}\n\nfunction OptionImpl(props: OptionProps) {\n  const {\n    value,\n    label,\n    textValue,\n    disabled = false,\n    hidden = false,\n    checkIcon,\n    className,\n    children,\n    onClick,\n    onMouseDown,\n    onPointerMove,\n    ref,\n    ...rest\n  } = props;\n  const showCheck = React.useContext(OptionCheckContext);\n  const groupHidden = React.useContext(OptionGroupHiddenContext);\n  // A consumer-hidden option is not navigable; optionProps renders `hidden`.\n  const { selected, multiselect, optionProps } = useListboxOption<HTMLLIElement>(\n    { value, label, textValue, disabled, hidden: hidden || groupHidden },\n    ref,\n  );\n  useOptionGroupMembership(value);\n  const {\n    ref: optionRef,\n    onClick: selectOption,\n    // Standalone mode only: the pointer press that focuses the list.\n    onMouseDown: pressOption,\n    onPointerMove: highlightOption,\n    ...optionAttributes\n  } = optionProps;\n\n  // The check is a required indicator (C-SLOTS): a `checkIcon` that renders nothing keeps the\n  // default glyph and warns once.\n  const checkIconRenders = checkIcon != null && slotRendersContent(checkIcon);\n  const checkIconEmpty = checkIcon != null && !checkIconRenders;\n  React.useEffect(() => {\n    if (checkIconEmpty) {\n      warnOnce(\n        'Option:checkIcon-empty',\n        'Option: `checkIcon` renders nothing, so the default check shows: a selected option must show its state. Pass a glyph, or leave it unset.',\n      );\n    }\n  }, [checkIconEmpty]);\n\n  return (\n    <li\n      data-value={value}\n      {...rest}\n      {...optionAttributes}\n      ref={optionRef}\n      onClick={composeEventHandlers(onClick, selectOption)}\n      onMouseDown={composeEventHandlers(onMouseDown, pressOption)}\n      onPointerMove={composeEventHandlers(onPointerMove, highlightOption)}\n      className={cn(\n        optionClassNames.root,\n        OPTION_CLASSES,\n        // While a multi-select option draws its box, the box carries the state, and\n        // `forcedColors.selectedContainer` would draw every selected option like the active one.\n        selected && !(multiselect && showCheck) && forcedColors.selectedContainer,\n        className,\n      )}\n    >\n      {showCheck &&\n        renderCheck(checkIconRenders ? checkIcon : undefined, { selected, multiselect, disabled })}\n      <span className={cn(optionClassNames.content, 'min-w-0 flex-1')}>{children ?? value}</span>\n    </li>\n  );\n}\nOptionImpl.displayName = 'Option';\n\nconst MemoOption = /* @__PURE__ */ React.memo(OptionImpl);\nMemoOption.displayName = 'Option';\n\n/**\n * An option of a listbox: a `Listbox`, `Combobox` or `Dropdown` (and `TagPicker`'s generated\n * list), or a custom picker's list, rendered through `ListboxSurface` or under a\n * `ListboxProvider`. Renders `<li role=\"option\">` with a stable id (`aria-activedescendant`\n * target), `aria-selected`, a check mark while selected (`checkIcon` replaces it; in a\n * multi-select list it sits in a checkbox square) and `data-active`/`data-selected`/\n * `data-disabled` attributes for styling.\n *\n * Options register with the surrounding listbox (in DOM order, groups included), so they can be\n * wrapped, grouped or rendered conditionally. The option is memoized: moving the highlight\n * re-renders only the previously and the newly active option.\n *\n * Styling: `className` comes last. A plain background class (`className=\"bg-primary\"`) replaces\n * the built-in hover, selected and active backgrounds in every state. To restyle one state only,\n * use its data variant (`data-[active]:bg-…`, `data-[selected]:bg-…`). The active option keeps\n * its focus outline.\n *\n * Use it inside a listbox only; it throws in development elsewhere.\n */\nexport const Option: React.NamedExoticComponent<OptionProps> = /* @__PURE__ */ markListboxElement(\n  MemoOption,\n  'option',\n);\n\n/* ------------------------------------------------------------------ */\n/*  OptionGroup                                                        */\n/* ------------------------------------------------------------------ */\n\n/**\n * Props of {@link OptionGroup}. `aria-label` and `aria-labelledby` go to the group's\n * `role=\"group\"` list; the other props go to its `<li role=\"presentation\">` item.\n */\nexport interface OptionGroupProps extends React.LiHTMLAttributes<HTMLLIElement> {\n  /**\n   * The group's heading, which names the group. Keep it text (an icon next to the text is fine): a\n   * label cannot be interactive, since nothing in it is reachable inside a listbox. Without a\n   * label no heading renders; name the group with `aria-label` or `aria-labelledby` then. A group\n   * without a name logs a development warning.\n   */\n  label?: React.ReactNode;\n  /**\n   * Names the group's list in place of the label (the heading still shows). A prop that holds\n   * `undefined`, as from a wrapper that forwards it, leaves the label in charge.\n   */\n  'aria-label'?: string;\n  /**\n   * Ids of the elements that name the group's list, in place of the label (the heading still\n   * shows). A prop that holds `undefined` leaves the label in charge.\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Hides the group and every option in it (see `Option`'s `hidden`): keyboard navigation and\n   * typeahead skip its options.\n   * @default false\n   */\n  hidden?: boolean;\n  /** Ref to the group's `<li role=\"presentation\">` element. */\n  ref?: React.Ref<HTMLLIElement>;\n}\n\nconst ELEMENT_NODE = 1;\nconst TEXT_NODE = 3;\n\n/**\n * The text a heading gives the name of its group, for the development check of `OptionGroup`: its\n * text without `aria-hidden` or `hidden` parts, where an element's `aria-label` or an image's `alt`\n * stands for its content.\n */\nfunction nameText(node: Node | null): string {\n  if (node === null) return '';\n  if (node.nodeType === TEXT_NODE) return node.textContent ?? '';\n  if (node.nodeType !== ELEMENT_NODE) return '';\n  const element = node as Element;\n  if (element.getAttribute('aria-hidden') === 'true' || element.hasAttribute('hidden')) return '';\n  const ownLabel = element.getAttribute('aria-label')?.trim();\n  if (ownLabel) return ownLabel;\n  if (element.localName === 'img') return element.getAttribute('alt') ?? '';\n  let text = '';\n  for (const child of Array.from(element.childNodes)) text += nameText(child);\n  return text;\n}\n\n/**\n * Whether a group's list has a name, for the development check of `OptionGroup`, in the order the\n * name is computed: a consumer `aria-labelledby` that is not blank (its presence counts; the\n * elements it names are not read), else a non-blank `aria-label`, else the heading that labels the\n * list. A string or number label is its own text; only an element label is read from the rendered\n * heading ({@link nameText}).\n */\nfunction groupHasName(\n  label: React.ReactNode,\n  ariaLabel: string | undefined,\n  labelledBy: string | undefined,\n  labelId: string,\n  heading: HTMLElement | null,\n): boolean {\n  if (labelledBy !== undefined && labelledBy !== labelId && labelledBy.trim() !== '') return true;\n  if (ariaLabel !== undefined && ariaLabel.trim() !== '') return true;\n  if (labelledBy !== labelId) return false;\n  if (typeof label === 'string' || typeof label === 'number') return String(label).trim() !== '';\n  return nameText(heading).trim() !== '';\n}\n\nconst UNNAMED_GROUP_WARNING = 'OptionGroup:unnamed';\n\nfunction OptionGroupImpl({\n  label,\n  className,\n  children,\n  hidden,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ref,\n  ...rest\n}: OptionGroupProps) {\n  const labelId = useId('option-group');\n  const store = React.useContext(ListboxContext)?.store;\n  const parentGroups = React.useContext(OptionGroupContext);\n  const hiddenByConsumer = React.useContext(OptionGroupHiddenContext) || !!hidden;\n  const [members] = React.useState(() => new OptionGroupMembers());\n  const groups = React.useMemo(() => [...parentGroups, members], [parentGroups, members]);\n  const subscribe = React.useCallback(\n    (listener: () => void) => {\n      const unsubscribeMembers = members.subscribe(listener);\n      const unsubscribeStore = store?.subscribe(listener);\n      return () => {\n        unsubscribeMembers();\n        unsubscribeStore?.();\n      };\n    },\n    [members, store],\n  );\n  // Hidden while every option inside it is filtered out or hidden, also options wrapped in a\n  // component (the options register with the group; re-read when they do and when the listbox\n  // state changes).\n  // The server render and the first client render show the group: no option has registered yet.\n  const empty = React.useSyncExternalStore(\n    subscribe,\n    () => members.allHidden(store),\n    () => false,\n  );\n\n  // The heading renders only for a label that renders content, so the list never points at an\n  // empty heading. A consumer name wins over the heading; a prop that holds `undefined` (a wrapper\n  // forwarding it) is no name of the consumer's.\n  const hasLabel = slotRendersContent(label);\n  const labelledBy = ariaLabelledBy ?? (ariaLabel === undefined && hasLabel ? labelId : undefined);\n\n  // C-DEV: warn once when nothing names the group, checked again whenever the label, the\n  // consumer `aria-label` or the resolved `aria-labelledby` changes.\n  const headingRef = React.useRef<HTMLDivElement | null>(null);\n  React.useEffect(() => {\n    if (!isDev || hasWarned(UNNAMED_GROUP_WARNING)) return;\n    if (groupHasName(label, ariaLabel, labelledBy, labelId, headingRef.current)) return;\n    warnOnce(\n      UNNAMED_GROUP_WARNING,\n      'OptionGroup: the group has no name. Give it a text `label`, `aria-label` or `aria-labelledby`.',\n    );\n  }, [label, ariaLabel, labelledBy, labelId]);\n\n  return (\n    <li\n      {...rest}\n      ref={ref}\n      role=\"presentation\"\n      hidden={hidden || empty || undefined}\n      className={cn(optionGroupClassNames.root, className)}\n    >\n      {hasLabel && (\n        <div\n          ref={headingRef}\n          id={labelId}\n          role=\"presentation\"\n          className={cn(\n            optionGroupClassNames.label,\n            'px-3 py-1 text-caption-1 font-semibold text-muted-foreground',\n          )}\n        >\n          {materialiseSlotContent(label)}\n        </div>\n      )}\n      <ul\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={labelledBy}\n        className={optionGroupClassNames.list}\n      >\n        <OptionGroupHiddenContext.Provider value={hiddenByConsumer}>\n          <OptionGroupContext.Provider value={groups}>{children}</OptionGroupContext.Provider>\n        </OptionGroupHiddenContext.Provider>\n      </ul>\n    </li>\n  );\n}\nOptionGroupImpl.displayName = 'OptionGroup';\n\n/**\n * Groups options under an optional heading: `<li role=\"presentation\">` with the heading and a\n * `<ul role=\"group\">` of the options, named by the heading (`label`) or by your `aria-label` or\n * `aria-labelledby`, which win over it. Hidden while a filter (or their own `hidden`) hides all\n * its options, also options wrapped in a component or in nested groups. Use it inside a listbox,\n * as `Option`.\n */\nexport const OptionGroup: React.FC<OptionGroupProps> = /* @__PURE__ */ markListboxElement(\n  OptionGroupImpl,\n  'group',\n);\n\n/* ------------------------------------------------------------------ */\n/*  ListboxProvider                                                    */\n/* ------------------------------------------------------------------ */\n\n/** Props of {@link ListboxProvider}. */\nexport interface ListboxProviderProps {\n  /** The context of a listbox: `useListbox(...).context`. */\n  value: ListboxContextValue;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\n/**\n * Provides a listbox's context to its options, for a custom picker that renders its list without\n * `ListboxSurface`: `<ListboxProvider value={listbox.context}><ul {...listbox.getListboxProps()}>…</ul></ListboxProvider>`.\n */\nexport function ListboxProvider({ value, children }: ListboxProviderProps) {\n  return <ListboxContext.Provider value={value}>{children}</ListboxContext.Provider>;\n}\nListboxProvider.displayName = 'ListboxProvider';\n\n/* ------------------------------------------------------------------ */\n/*  Listbox popup: useListboxPopup and ListboxSurface                  */\n/* ------------------------------------------------------------------ */\n\n/** Options of {@link useListboxPopup}. */\nexport interface UseListboxPopupOptions {\n  /**\n   * The listbox is open (your open state). While it is, a press outside your picker and its\n   * surface, and focus leaving them, dismiss it.\n   */\n  open: boolean;\n  /**\n   * The surface is shown (the list, or the empty content of {@link ListboxSurface}): it is\n   * positioned, and Escape dismisses it. While the listbox is open with nothing shown (no options\n   * to show), Escape is left to an enclosing layer, such as a Dialog around the picker.\n   */\n  surfaceOpen: boolean;\n  /**\n   * Called when the popup should close: set your open state to `false`. `reason` is `'escape'`,\n   * `'outside-press'` or `'focus-outside'`.\n   */\n  onDismiss: (reason: DismissReason) => void;\n  /** Your picker's root element: presses and focus inside it are not outside the popup. */\n  rootRef: React.RefObject<HTMLElement | null>;\n  /**\n   * The combobox element, which anchors the popup's dismiss layer. Pass the element to\n   * `setReference` too (merged into its ref), which places the surface against it.\n   */\n  anchorRef: React.RefObject<HTMLElement | null>;\n}\n\n/**\n * Result of {@link useListboxPopup}. Destructure it: `eslint-plugin-react-hooks` treats an object\n * with a member passed to a `ref` prop as a ref, and rejects reading its other members during\n * render (`react-hooks/refs`).\n */\nexport interface UseListboxPopupResult {\n  /** The popup's dismiss layer: pass it to {@link ListboxSurface}. */\n  layerId: string;\n  /**\n   * Ref callback for the element the surface is placed against: merge it into your combobox's ref.\n   */\n  setReference: (el: HTMLElement | null) => void;\n  /** Ref callback for the surface: pass it to {@link ListboxSurface}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** The surface's `data-side`, `data-align` and position style: pass them to {@link ListboxSurface}. */\n  floatingProps: { 'data-side': string; 'data-align': string; style: React.CSSProperties };\n}\n\n/**\n * Dismissal and positioning of a custom picker's listbox popup, for {@link ListboxSurface}. The\n * popup is dismissed by Escape, by a press outside your picker and its surface, and by focus\n * leaving them (`onDismiss` says which). The surface opens below the anchor and as wide as it,\n * flips above it when there is no room below, and is limited to the space available; its\n * `data-side` and `data-align` attributes give the final placement.\n *\n * While the listbox is open with nothing to show (`surfaceOpen` is `false`), Escape is left to an\n * enclosing layer, such as a Dialog around the picker. Let your combobox's key handler leave it\n * too: on such an Escape, set your open state to `false` without calling `listbox.onKeyDown`,\n * which handles Escape (and prevents its default) whenever the listbox is open. Do so only when\n * `!event.nativeEvent.isComposing`, as Dropdown, Combobox and TagPicker do: an Escape that only\n * cancels an IME composition must not close the listbox, and `listbox.onKeyDown` ignores such\n * keys too.\n *\n * @example\n * const expanded = open && listbox.items.length > 0;\n * const { layerId, setReference, surfaceRef, floatingProps } = useListboxPopup({\n *   open,\n *   surfaceOpen: expanded,\n *   onDismiss: () => setOpen(false),\n *   rootRef,\n *   anchorRef: buttonRef,\n * });\n * const buttonMergedRef = useMergedRefs(buttonRef, setReference);\n */\nexport function useListboxPopup(options: UseListboxPopupOptions): UseListboxPopupResult {\n  const { open, surfaceOpen, onDismiss, rootRef, anchorRef } = options;\n  const surfaceElementRef = React.useRef<HTMLElement | null>(null);\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: surfaceOpen,\n    side: 'bottom',\n    align: 'start',\n    matchReferenceWidth: true,\n    fitViewport: true,\n  });\n  const { layerId } = useDismiss({\n    open,\n    onDismiss: (reason) => onDismiss(reason),\n    refs: [rootRef, surfaceElementRef],\n    anchorRef,\n    kind: 'listbox',\n    escape: surfaceOpen,\n    focusOutside: true,\n  });\n  const surfaceRef = useMergedRefs<HTMLElement>(surfaceElementRef, setFloating);\n  return { layerId, setReference, surfaceRef, floatingProps };\n}\n\n/**\n * Props of {@link ListboxSurface}. The options of one listbox live in one list at a time, and this\n * surface renders that list: render every option of the listbox inside it, never in a second list\n * of your own, not even for an exit animation.\n */\nexport interface ListboxSurfaceProps {\n  /** The listbox: the result of `useListbox` in select-only or editable mode. */\n  listbox: UseListboxResult;\n  /** `layerId` from {@link useListboxPopup}: the surface joins the popup's dismiss layer. */\n  layerId: string;\n  /** `surfaceRef` from {@link useListboxPopup}. */\n  surfaceRef: React.RefCallback<HTMLElement>;\n  /** `floatingProps` from {@link useListboxPopup}: the surface's placement. */\n  floatingProps: UseListboxPopupResult['floatingProps'];\n  /** The listbox is open (your open state). `emptyContent` shows only while it is. */\n  open: boolean;\n  /**\n   * The list is shown: the listbox is open and has options to show (`open &&\n   * listbox.items.length > 0`). The list then renders in the surface, and otherwise `hidden`, in\n   * place inside your picker. Set your combobox's `aria-expanded` to this value after spreading\n   * `getComboboxProps()`, which reports `open`, so the combobox is not announced as expanded while\n   * nothing is shown.\n   */\n  expanded: boolean;\n  /**\n   * Shown in the surface while the listbox is open but not expanded, such as a \"No matches\"\n   * message. `undefined` and `null` show no surface; any other value shows one, so `false` and\n   * `''` show an empty surface.\n   */\n  emptyContent?: React.ReactNode;\n  /** Names the list. Name it with this or `aria-labelledby`, usually your picker's label. */\n  'aria-label'?: string;\n  /** Ids of the elements that name the list, usually your picker's label. */\n  'aria-labelledby'?: string;\n  /**\n   * Options draw a check while selected (in a multi-select list, a checkbox square). Turn it off\n   * for a list that never shows selected options, such as the suggestions of a tag picker.\n   * @default true\n   */\n  showCheck?: boolean;\n  /**\n   * Classes merged last onto the list: they replace the list's own classes they conflict with,\n   * its maximum height included.\n   */\n  listClassName?: string;\n  /**\n   * Classes merged last onto the surface, the popup around the list: they replace its own\n   * classes they conflict with.\n   */\n  surfaceClassName?: string;\n  /** The options (`Option`, `OptionGroup` or options of your own on `useListboxOption`). */\n  children?: React.ReactNode;\n}\n\nfunction preventMouseDown(event: React.MouseEvent) {\n  event.preventDefault();\n}\n\n/**\n * The option list of a custom picker and the popup it opens in: a `<ul role=\"listbox\">` with the\n * options (spread from `listbox.getListboxProps()`), rendered `hidden` in place inside your\n * picker while the list is not shown, so the options register and their ids exist from the first\n * render, and in a portaled surface placed by {@link useListboxPopup} while it is, never in both.\n * While the listbox is open with nothing to show, the surface shows `emptyContent` instead, if\n * any. A press on the surface keeps focus on your combobox. It provides the listbox's context to\n * the options, so it needs no {@link ListboxProvider}.\n *\n * @example\n * <ListboxSurface\n *   listbox={listbox}\n *   layerId={layerId}\n *   surfaceRef={surfaceRef}\n *   floatingProps={floatingProps}\n *   open={open}\n *   expanded={expanded}\n *   aria-labelledby={labelId}\n * >\n *   <Option value=\"georgia\">Georgia</Option>\n * </ListboxSurface>\n */\nexport function ListboxSurface(props: ListboxSurfaceProps) {\n  const {\n    listbox,\n    layerId,\n    surfaceRef,\n    floatingProps,\n    open,\n    expanded,\n    emptyContent,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    showCheck = true,\n    listClassName,\n    surfaceClassName,\n    children,\n  } = props;\n\n  const list = (\n    <OptionCheckContext.Provider value={showCheck}>\n      <ListboxProvider value={listbox.context}>\n        <ul\n          {...listbox.getListboxProps()}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          hidden={!expanded || undefined}\n          className={cn(\n            listboxSurfaceClassNames.list,\n            'min-h-0 max-h-60 overflow-auto',\n            listClassName,\n          )}\n        >\n          {children}\n        </ul>\n      </ListboxProvider>\n    </OptionCheckContext.Provider>\n  );\n\n  // A closed listbox never leaves a surface behind: the text typed before closing survives it.\n  const showEmpty = open && !expanded && emptyContent !== undefined && emptyContent !== null;\n  if (!expanded && !showEmpty) return list;\n\n  return (\n    <>\n      {!expanded && list}\n      <Portal layerId={layerId}>\n        <div\n          ref={surfaceRef}\n          {...floatingProps}\n          data-wave-listbox-surface=\"\"\n          onMouseDown={preventMouseDown}\n          className={cn(\n            listboxSurfaceClassNames.root,\n            'flex flex-col overflow-hidden rounded border border-border bg-background py-1 text-foreground shadow-4',\n            surfaceClassName,\n          )}\n        >\n          {expanded ? list : emptyContent}\n        </div>\n      </Portal>\n    </>\n  );\n}\nListboxSurface.displayName = 'ListboxSurface';\n"],"mappings":"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"}