@mortenbrudvik/waveui 0.14.1 → 0.16.0

package/dist/components/data-display/InfoLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoLabel.cjs","names":["resolveDeprecatedProp","useId","React","infoLabelClassNames","cn","Label","InfoNoteClassContext","InfoButton","markFieldLabel","require_runtime","require_cn","require_dev","require_classNames","require_useId","require_fieldLabel","require_Label","require_InfoButton","react","react_jsx_runtime","InfoLabel","rest","content","children","label","generatedLabelId","labelId","id","buttonId","noteClass","className","infoButtonLabel"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { infoLabelClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { useId } from '../../hooks/useId';\nimport { markFieldLabel } from '../input/fieldLabel';\nimport { Label, type LabelProps } from '../input/Label';\nimport { InfoButton, InfoNoteClassContext } from './InfoButton';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,\n    Pick<LabelProps, 'htmlFor' | 'required' | 'size' | 'weight' | 'disabled'> {\n  /** The label content (Fluent's `children`). */\n  children?: React.ReactNode;\n  /**\n   * The label content.\n   * @deprecated Use `children`.\n   */\n  label?: React.ReactNode;\n  /** The information the info button's note shows: text, links or other rich content. */\n  info: React.ReactNode;\n  /**\n   * Accessible name of the info button: the second half of its name, after the label text\n   * (\"Password Information\"). Localize it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /**\n   * Opens the note on a mouse hover, after a short delay, and on keyboard focus, next to a click\n   * (see `InfoButton`'s `openOnHover`, which this passes through unchanged).\n   * @default true\n   */\n  openOnHover?: boolean;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * A label followed by a button that reveals more information about it (Fluent's InfoLabel): the\n * label renders in a real `<label htmlFor>`, and the button shows `info` — text, links or other\n * rich content — in a note next to it, rendered once whether the note is open or closed (see\n * `InfoButton`, which owns that note and its opening, closing and Tab order).\n *\n * - `children` is the label content; `label` is a deprecated alias (a warning fires once, and\n *   `children` wins when both are given).\n * - `htmlFor`, `required`, `size`, `weight` and `disabled` route to the `<label>`; `disabled` dims\n *   only the label text, and the info button stays usable.\n * - The button is named \"‹label text› ‹infoButtonLabel›\" through `aria-labelledby`, which points\n *   at the `<label>` and at the button's own id (whose `aria-label` supplies the second half), so\n *   several InfoLabels on a page are told apart; `infoButtonLabel` localizes that second half.\n *   `openOnHover` and `size` reach the button too.\n * - No `controlRef`: InfoLabel is a label, not a form control, so C-ROUTING's composite-control\n *   routing does not apply to it; a layout that needs the button's own element renders `InfoButton`\n *   next to a `Label` instead.\n *\n * @example\n * <InfoLabel info=\"Use at least 8 characters.\">Password</InfoLabel>\n */\nexport const InfoLabel = ({\n  children,\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  openOnHover,\n  id,\n  htmlFor,\n  required,\n  size = 'medium',\n  weight,\n  disabled,\n  className,\n  ref,\n  ...rest\n}: InfoLabelProps) => {\n  const content = resolveDeprecatedProp('InfoLabel', children, label, 'label', 'children');\n  const generatedLabelId = useId('info-label');\n  // An empty `id` counts as unset, so the button's name never points at an empty id.\n  const labelId = id || generatedLabelId;\n  const buttonId = useId('info-label-button');\n  // The note of this InfoButton carries the label's `info` class, its 0.8 popup class (P3-00 D8).\n  const noteClass = React.useMemo(\n    () => ({ buttonId, className: infoLabelClassNames.info }),\n    [buttonId],\n  );\n  return (\n    <span\n      ref={ref}\n      className={cn(infoLabelClassNames.root, 'inline-flex items-center gap-0', className)}\n      {...rest}\n    >\n      <Label\n        className={infoLabelClassNames.label}\n        id={labelId}\n        htmlFor={htmlFor}\n        required={required}\n        size={size}\n        weight={weight}\n        disabled={disabled}\n      >\n        {content}\n      </Label>\n      <InfoNoteClassContext.Provider value={noteClass}>\n        <InfoButton\n          id={buttonId}\n          className={infoLabelClassNames.infoButton}\n          info={info}\n          size={size}\n          openOnHover={openOnHover}\n          aria-label={infoButtonLabel}\n          aria-labelledby={`${labelId} ${buttonId}`}\n        />\n      </InfoNoteClassContext.Provider>\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\nmarkFieldLabel(InfoLabel);\n"],"mappings":"yXA4DA,IAAamB,GAAa,CACxB,WACA,QACA,OACA,kBAAkB,cAClB,cACA,KACA,UACA,WACA,OAAO,SACP,SACA,WACA,YACA,MACA,GAAGC,KACiB,CACpB,IAAMC,EAAUrB,EAAAA,sBAAsB,YAAasB,EAAUC,EAAO,QAAS,UAAU,EACjFC,EAAmBvB,EAAAA,MAAM,YAAY,EAErCwB,EAAUC,GAAMF,EAChBG,EAAW1B,EAAAA,MAAM,mBAAmB,EAEpC2B,EAAY1B,EAAM,aACf,CAAE,WAAU,UAAWC,EAAAA,oBAAoB,IAAK,GACvD,CAACwB,CAAQ,CACX,EACA,OACE,EAAAT,EAAA,KAAA,CAAC,OAAD,CACO,MACL,UAAWd,EAAAA,GAAGD,EAAAA,oBAAoB,KAAM,iCAAkC0B,CAAS,EACnF,GAAIT,EAHN,SAAA,EAKE,EAAAF,EAAA,IAAA,CAACb,EAAAA,MAAD,CACE,UAAWF,EAAAA,oBAAoB,MAC/B,GAAIsB,EACK,UACC,WACJ,OACE,SACE,WAET,SAAAJ,CACI,CAAA,GACP,EAAAH,EAAA,IAAA,CAACZ,EAAAA,qBAAqB,SAAtB,CAA+B,MAAOsB,EACpC,UAAA,EAAAV,EAAA,IAAA,CAACX,EAAAA,WAAD,CACE,GAAIoB,EACJ,UAAWxB,EAAAA,oBAAoB,WACzB,OACA,OACO,cACb,aAAY2B,EACZ,kBAAiB,GAAGL,EAAQ,GAAGE,GAChC,CAAA,CAC4B,CAAA,CAC3B,GAEV,EAEA,EAAU,YAAc,YACxBnB,EAAAA,eAAeW,CAAS"}
+{"version":3,"file":"InfoLabel.cjs","names":["resolveDeprecatedProp","useId","React","infoLabelClassNames","cn","Label","InfoNoteClassContext","InfoButton","markFieldLabel","require_runtime","require_cn","require_dev","require_classNames","require_useId","require_fieldLabel","require_Label","require_InfoButton","react","react_jsx_runtime","InfoLabel","rest","content","children","label","generatedLabelId","labelId","id","buttonId","noteClass","className","infoButtonLabel"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { infoLabelClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { MotionSlot } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { markFieldLabel } from '../input/fieldLabel';\nimport { Label, type LabelProps } from '../input/Label';\nimport { InfoButton, InfoNoteClassContext } from './InfoButton';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,\n    Pick<LabelProps, 'htmlFor' | 'required' | 'size' | 'weight' | 'disabled'> {\n  /** The label content (Fluent's `children`). */\n  children?: React.ReactNode;\n  /**\n   * The label content.\n   * @deprecated Use `children`.\n   */\n  label?: React.ReactNode;\n  /** The information the info button's note shows: text, links or other rich content. */\n  info: React.ReactNode;\n  /**\n   * Accessible name of the info button: the second half of its name, after the label text\n   * (\"Password Information\"). Localize it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /**\n   * Opens the note on a mouse hover, after a short delay, and on keyboard focus, next to a click\n   * (see `InfoButton`'s `openOnHover`, which this passes through unchanged).\n   * @default true\n   */\n  openOnHover?: boolean;\n  /**\n   * The motion of the info button's note, passed through unchanged (see `InfoButton`'s `motion`:\n   * `undefined` is the default fade and slide, `null` none, a value replaces it). Fluent's\n   * `Popover` `surfaceMotion`.\n   * @default the fade and slide of InfoButton's note\n   */\n  motion?: MotionSlot | null;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * A label followed by a button that reveals more information about it (Fluent's InfoLabel): the\n * label renders in a real `<label htmlFor>`, and the button shows `info` — text, links or other\n * rich content — in a note next to it, rendered once whether the note is open or closed (see\n * `InfoButton`, which owns that note and its opening, closing and Tab order).\n *\n * - `children` is the label content; `label` is a deprecated alias (a warning fires once, and\n *   `children` wins when both are given).\n * - `htmlFor`, `required`, `size`, `weight` and `disabled` route to the `<label>`; `disabled` dims\n *   only the label text, and the info button stays usable.\n * - The button is named \"‹label text› ‹infoButtonLabel›\" through `aria-labelledby`, which points\n *   at the `<label>` and at the button's own id (whose `aria-label` supplies the second half), so\n *   several InfoLabels on a page are told apart; `infoButtonLabel` localizes that second half.\n *   `openOnHover`, `motion` and `size` reach the button too.\n * - No `controlRef`: InfoLabel is a label, not a form control, so C-ROUTING's composite-control\n *   routing does not apply to it; a layout that needs the button's own element renders `InfoButton`\n *   next to a `Label` instead.\n *\n * @example\n * <InfoLabel info=\"Use at least 8 characters.\">Password</InfoLabel>\n */\nexport const InfoLabel = ({\n  children,\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  openOnHover,\n  motion,\n  id,\n  htmlFor,\n  required,\n  size = 'medium',\n  weight,\n  disabled,\n  className,\n  ref,\n  ...rest\n}: InfoLabelProps) => {\n  const content = resolveDeprecatedProp('InfoLabel', children, label, 'label', 'children');\n  const generatedLabelId = useId('info-label');\n  // An empty `id` counts as unset, so the button's name never points at an empty id.\n  const labelId = id || generatedLabelId;\n  const buttonId = useId('info-label-button');\n  // The note of this InfoButton carries the label's `info` class, its 0.8 popup class (P3-00 D8).\n  const noteClass = React.useMemo(\n    () => ({ buttonId, className: infoLabelClassNames.info }),\n    [buttonId],\n  );\n  return (\n    <span\n      ref={ref}\n      className={cn(infoLabelClassNames.root, 'inline-flex items-center gap-0', className)}\n      {...rest}\n    >\n      <Label\n        className={infoLabelClassNames.label}\n        id={labelId}\n        htmlFor={htmlFor}\n        required={required}\n        size={size}\n        weight={weight}\n        disabled={disabled}\n      >\n        {content}\n      </Label>\n      <InfoNoteClassContext.Provider value={noteClass}>\n        <InfoButton\n          id={buttonId}\n          className={infoLabelClassNames.infoButton}\n          info={info}\n          size={size}\n          openOnHover={openOnHover}\n          motion={motion}\n          aria-label={infoButtonLabel}\n          aria-labelledby={`${labelId} ${buttonId}`}\n        />\n      </InfoNoteClassContext.Provider>\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\nmarkFieldLabel(InfoLabel);\n"],"mappings":"yXAoEA,IAAamB,GAAa,CACxB,WACA,QACA,OACA,kBAAkB,cAClB,cACA,SACA,KACA,UACA,WACA,OAAO,SACP,SACA,WACA,YACA,MACA,GAAGC,KACiB,CACpB,IAAMC,EAAUrB,EAAAA,sBAAsB,YAAasB,EAAUC,EAAO,QAAS,UAAU,EACjFC,EAAmBvB,EAAAA,MAAM,YAAY,EAErCwB,EAAUC,GAAMF,EAChBG,EAAW1B,EAAAA,MAAM,mBAAmB,EAEpC2B,EAAY1B,EAAM,aACf,CAAE,WAAU,UAAWC,EAAAA,oBAAoB,IAAK,GACvD,CAACwB,CAAQ,CACX,EACA,OACE,EAAAT,EAAA,KAAA,CAAC,OAAD,CACO,MACL,UAAWd,EAAAA,GAAGD,EAAAA,oBAAoB,KAAM,iCAAkC0B,CAAS,EACnF,GAAIT,EAHN,SAAA,EAKE,EAAAF,EAAA,IAAA,CAACb,EAAAA,MAAD,CACE,UAAWF,EAAAA,oBAAoB,MAC/B,GAAIsB,EACK,UACC,WACJ,OACE,SACE,WAET,SAAAJ,CACI,CAAA,GACP,EAAAH,EAAA,IAAA,CAACZ,EAAAA,qBAAqB,SAAtB,CAA+B,MAAOsB,EACpC,UAAA,EAAAV,EAAA,IAAA,CAACX,EAAAA,WAAD,CACE,GAAIoB,EACJ,UAAWxB,EAAAA,oBAAoB,WACzB,OACA,OACO,cACL,SACR,aAAY2B,EACZ,kBAAiB,GAAGL,EAAQ,GAAGE,GAChC,CAAA,CAC4B,CAAA,CAC3B,GAEV,EAEA,EAAU,YAAc,YACxBnB,EAAAA,eAAeW,CAAS"}

package/dist/components/data-display/InfoLabel.mjs

@@ -9,34 +9,35 @@ import { InfoButton as o, InfoNoteClassContext as s } from "./InfoButton.mjs";
 import * as c from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/data-display/InfoLabel.tsx
-var d = ({ children: i, label: d, info: f, infoButtonLabel: p = "Information", openOnHover: m, id: h, htmlFor: g, required: _, size: v = "medium", weight: y, disabled: b, className: x, ref: S, ...C }) => {
-	let w = t("InfoLabel", i, d, "label", "children"), T = r("info-label"), E = h || T, D = r("info-label-button"), O = c.useMemo(() => ({
-		buttonId: D,
+var d = ({ children: i, label: d, info: f, infoButtonLabel: p = "Information", openOnHover: m, motion: h, id: g, htmlFor: _, required: v, size: y = "medium", weight: b, disabled: x, className: S, ref: C, ...w }) => {
+	let T = t("InfoLabel", i, d, "label", "children"), E = r("info-label"), D = g || E, O = r("info-label-button"), k = c.useMemo(() => ({
+		buttonId: O,
 		className: n.info
-	}), [D]);
+	}), [O]);
 	return /* @__PURE__ */ u("span", {
-		ref: S,
-		className: e(n.root, "inline-flex items-center gap-0", x),
-		...C,
+		ref: C,
+		className: e(n.root, "inline-flex items-center gap-0", S),
+		...w,
 		children: [/* @__PURE__ */ l(a, {
 			className: n.label,
-			id: E,
-			htmlFor: g,
-			required: _,
-			size: v,
-			weight: y,
-			disabled: b,
-			children: w
+			id: D,
+			htmlFor: _,
+			required: v,
+			size: y,
+			weight: b,
+			disabled: x,
+			children: T
 		}), /* @__PURE__ */ l(s.Provider, {
-			value: O,
+			value: k,
 			children: /* @__PURE__ */ l(o, {
-				id: D,
+				id: O,
 				className: n.infoButton,
 				info: f,
-				size: v,
+				size: y,
 				openOnHover: m,
+				motion: h,
 				"aria-label": p,
-				"aria-labelledby": `${E} ${D}`
+				"aria-labelledby": `${D} ${O}`
 			})
 		})]
 	});

package/dist/components/data-display/InfoLabel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InfoLabel.mjs","names":["useId","useId$1","React","InfoLabel","rest","content","resolveDeprecatedProp","children","label","generatedLabelId","labelId","id","buttonId","noteClass","infoLabelClassNames","cn","className","Label","InfoNoteClassContext","InfoButton","infoButtonLabel","markFieldLabel"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { infoLabelClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport { useId } from '../../hooks/useId';\nimport { markFieldLabel } from '../input/fieldLabel';\nimport { Label, type LabelProps } from '../input/Label';\nimport { InfoButton, InfoNoteClassContext } from './InfoButton';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,\n    Pick<LabelProps, 'htmlFor' | 'required' | 'size' | 'weight' | 'disabled'> {\n  /** The label content (Fluent's `children`). */\n  children?: React.ReactNode;\n  /**\n   * The label content.\n   * @deprecated Use `children`.\n   */\n  label?: React.ReactNode;\n  /** The information the info button's note shows: text, links or other rich content. */\n  info: React.ReactNode;\n  /**\n   * Accessible name of the info button: the second half of its name, after the label text\n   * (\"Password Information\"). Localize it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /**\n   * Opens the note on a mouse hover, after a short delay, and on keyboard focus, next to a click\n   * (see `InfoButton`'s `openOnHover`, which this passes through unchanged).\n   * @default true\n   */\n  openOnHover?: boolean;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * A label followed by a button that reveals more information about it (Fluent's InfoLabel): the\n * label renders in a real `<label htmlFor>`, and the button shows `info` — text, links or other\n * rich content — in a note next to it, rendered once whether the note is open or closed (see\n * `InfoButton`, which owns that note and its opening, closing and Tab order).\n *\n * - `children` is the label content; `label` is a deprecated alias (a warning fires once, and\n *   `children` wins when both are given).\n * - `htmlFor`, `required`, `size`, `weight` and `disabled` route to the `<label>`; `disabled` dims\n *   only the label text, and the info button stays usable.\n * - The button is named \"‹label text› ‹infoButtonLabel›\" through `aria-labelledby`, which points\n *   at the `<label>` and at the button's own id (whose `aria-label` supplies the second half), so\n *   several InfoLabels on a page are told apart; `infoButtonLabel` localizes that second half.\n *   `openOnHover` and `size` reach the button too.\n * - No `controlRef`: InfoLabel is a label, not a form control, so C-ROUTING's composite-control\n *   routing does not apply to it; a layout that needs the button's own element renders `InfoButton`\n *   next to a `Label` instead.\n *\n * @example\n * <InfoLabel info=\"Use at least 8 characters.\">Password</InfoLabel>\n */\nexport const InfoLabel = ({\n  children,\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  openOnHover,\n  id,\n  htmlFor,\n  required,\n  size = 'medium',\n  weight,\n  disabled,\n  className,\n  ref,\n  ...rest\n}: InfoLabelProps) => {\n  const content = resolveDeprecatedProp('InfoLabel', children, label, 'label', 'children');\n  const generatedLabelId = useId('info-label');\n  // An empty `id` counts as unset, so the button's name never points at an empty id.\n  const labelId = id || generatedLabelId;\n  const buttonId = useId('info-label-button');\n  // The note of this InfoButton carries the label's `info` class, its 0.8 popup class (P3-00 D8).\n  const noteClass = React.useMemo(\n    () => ({ buttonId, className: infoLabelClassNames.info }),\n    [buttonId],\n  );\n  return (\n    <span\n      ref={ref}\n      className={cn(infoLabelClassNames.root, 'inline-flex items-center gap-0', className)}\n      {...rest}\n    >\n      <Label\n        className={infoLabelClassNames.label}\n        id={labelId}\n        htmlFor={htmlFor}\n        required={required}\n        size={size}\n        weight={weight}\n        disabled={disabled}\n      >\n        {content}\n      </Label>\n      <InfoNoteClassContext.Provider value={noteClass}>\n        <InfoButton\n          id={buttonId}\n          className={infoLabelClassNames.infoButton}\n          info={info}\n          size={size}\n          openOnHover={openOnHover}\n          aria-label={infoButtonLabel}\n          aria-labelledby={`${labelId} ${buttonId}`}\n        />\n      </InfoNoteClassContext.Provider>\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\nmarkFieldLabel(InfoLabel);\n"],"mappings":";;;;;;;;;;;AA4DA,IAAaG,KAAa,EACxB,aACA,UACA,SACA,qBAAkB,eAClB,gBACA,OACA,YACA,aACA,UAAO,UACP,WACA,aACA,cACA,QACA,GAAGC,QACiB;CACpB,IAAMC,IAAUC,EAAsB,aAAaC,GAAUC,GAAO,SAAS,UAAU,GACjFC,IAAmBT,EAAM,YAAY,GAErCU,IAAUC,KAAMF,GAChBG,IAAWZ,EAAM,mBAAmB,GAEpCa,IAAYX,EAAM,eACf;EAAE;EAAU,WAAWY,EAAoB;CAAK,IACvD,CAACF,CAAQ,CACX;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWG,EAAGD,EAAoB,MAAM,kCAAkCE,CAAS;EACnF,GAAIZ;EAHN,UAAA,CAKE,kBAACa,GAAD;GACE,WAAWH,EAAoB;GAC/B,IAAIJ;GACK;GACC;GACJ;GACE;GACE;GAET,UAAAL;EACI,CAAA,GACP,kBAACa,EAAqB,UAAtB;GAA+B,OAAOL;GACpC,UAAA,kBAACM,GAAD;IACE,IAAIP;IACJ,WAAWE,EAAoB;IACzB;IACA;IACO;IACb,cAAYM;IACZ,mBAAiB,GAAGV,EAAQ,GAAGE;GAChC,CAAA;EAC4B,CAAA,CAC3B;;AAEV;AAEA,EAAU,cAAc,aACxBS,EAAelB,CAAS"}
+{"version":3,"file":"InfoLabel.mjs","names":["useId","useId$1","React","InfoLabel","rest","content","resolveDeprecatedProp","children","label","generatedLabelId","labelId","id","buttonId","noteClass","infoLabelClassNames","cn","className","Label","InfoNoteClassContext","InfoButton","infoButtonLabel","markFieldLabel"],"sources":["../../../src/components/data-display/InfoLabel.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { infoLabelClassNames } from '../../lib/classNames';\nimport { resolveDeprecatedProp } from '../../lib/dev';\nimport type { MotionSlot } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { markFieldLabel } from '../input/fieldLabel';\nimport { Label, type LabelProps } from '../input/Label';\nimport { InfoButton, InfoNoteClassContext } from './InfoButton';\n\n/** Properties for the InfoLabel component. */\nexport interface InfoLabelProps\n  extends\n    Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,\n    Pick<LabelProps, 'htmlFor' | 'required' | 'size' | 'weight' | 'disabled'> {\n  /** The label content (Fluent's `children`). */\n  children?: React.ReactNode;\n  /**\n   * The label content.\n   * @deprecated Use `children`.\n   */\n  label?: React.ReactNode;\n  /** The information the info button's note shows: text, links or other rich content. */\n  info: React.ReactNode;\n  /**\n   * Accessible name of the info button: the second half of its name, after the label text\n   * (\"Password Information\"). Localize it here.\n   * @default 'Information'\n   */\n  infoButtonLabel?: string;\n  /**\n   * Opens the note on a mouse hover, after a short delay, and on keyboard focus, next to a click\n   * (see `InfoButton`'s `openOnHover`, which this passes through unchanged).\n   * @default true\n   */\n  openOnHover?: boolean;\n  /**\n   * The motion of the info button's note, passed through unchanged (see `InfoButton`'s `motion`:\n   * `undefined` is the default fade and slide, `null` none, a value replaces it). Fluent's\n   * `Popover` `surfaceMotion`.\n   * @default the fade and slide of InfoButton's note\n   */\n  motion?: MotionSlot | null;\n  /** Ref to the root `<span>`. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * A label followed by a button that reveals more information about it (Fluent's InfoLabel): the\n * label renders in a real `<label htmlFor>`, and the button shows `info` — text, links or other\n * rich content — in a note next to it, rendered once whether the note is open or closed (see\n * `InfoButton`, which owns that note and its opening, closing and Tab order).\n *\n * - `children` is the label content; `label` is a deprecated alias (a warning fires once, and\n *   `children` wins when both are given).\n * - `htmlFor`, `required`, `size`, `weight` and `disabled` route to the `<label>`; `disabled` dims\n *   only the label text, and the info button stays usable.\n * - The button is named \"‹label text› ‹infoButtonLabel›\" through `aria-labelledby`, which points\n *   at the `<label>` and at the button's own id (whose `aria-label` supplies the second half), so\n *   several InfoLabels on a page are told apart; `infoButtonLabel` localizes that second half.\n *   `openOnHover`, `motion` and `size` reach the button too.\n * - No `controlRef`: InfoLabel is a label, not a form control, so C-ROUTING's composite-control\n *   routing does not apply to it; a layout that needs the button's own element renders `InfoButton`\n *   next to a `Label` instead.\n *\n * @example\n * <InfoLabel info=\"Use at least 8 characters.\">Password</InfoLabel>\n */\nexport const InfoLabel = ({\n  children,\n  label,\n  info,\n  infoButtonLabel = 'Information',\n  openOnHover,\n  motion,\n  id,\n  htmlFor,\n  required,\n  size = 'medium',\n  weight,\n  disabled,\n  className,\n  ref,\n  ...rest\n}: InfoLabelProps) => {\n  const content = resolveDeprecatedProp('InfoLabel', children, label, 'label', 'children');\n  const generatedLabelId = useId('info-label');\n  // An empty `id` counts as unset, so the button's name never points at an empty id.\n  const labelId = id || generatedLabelId;\n  const buttonId = useId('info-label-button');\n  // The note of this InfoButton carries the label's `info` class, its 0.8 popup class (P3-00 D8).\n  const noteClass = React.useMemo(\n    () => ({ buttonId, className: infoLabelClassNames.info }),\n    [buttonId],\n  );\n  return (\n    <span\n      ref={ref}\n      className={cn(infoLabelClassNames.root, 'inline-flex items-center gap-0', className)}\n      {...rest}\n    >\n      <Label\n        className={infoLabelClassNames.label}\n        id={labelId}\n        htmlFor={htmlFor}\n        required={required}\n        size={size}\n        weight={weight}\n        disabled={disabled}\n      >\n        {content}\n      </Label>\n      <InfoNoteClassContext.Provider value={noteClass}>\n        <InfoButton\n          id={buttonId}\n          className={infoLabelClassNames.infoButton}\n          info={info}\n          size={size}\n          openOnHover={openOnHover}\n          motion={motion}\n          aria-label={infoButtonLabel}\n          aria-labelledby={`${labelId} ${buttonId}`}\n        />\n      </InfoNoteClassContext.Provider>\n    </span>\n  );\n};\n\nInfoLabel.displayName = 'InfoLabel';\nmarkFieldLabel(InfoLabel);\n"],"mappings":";;;;;;;;;;;AAoEA,IAAaG,KAAa,EACxB,aACA,UACA,SACA,qBAAkB,eAClB,gBACA,WACA,OACA,YACA,aACA,UAAO,UACP,WACA,aACA,cACA,QACA,GAAGC,QACiB;CACpB,IAAMC,IAAUC,EAAsB,aAAaC,GAAUC,GAAO,SAAS,UAAU,GACjFC,IAAmBT,EAAM,YAAY,GAErCU,IAAUC,KAAMF,GAChBG,IAAWZ,EAAM,mBAAmB,GAEpCa,IAAYX,EAAM,eACf;EAAE;EAAU,WAAWY,EAAoB;CAAK,IACvD,CAACF,CAAQ,CACX;CACA,OACE,kBAAC,QAAD;EACO;EACL,WAAWG,EAAGD,EAAoB,MAAM,kCAAkCE,CAAS;EACnF,GAAIZ;EAHN,UAAA,CAKE,kBAACa,GAAD;GACE,WAAWH,EAAoB;GAC/B,IAAIJ;GACK;GACC;GACJ;GACE;GACE;GAET,UAAAL;EACI,CAAA,GACP,kBAACa,EAAqB,UAAtB;GAA+B,OAAOL;GACpC,UAAA,kBAACM,GAAD;IACE,IAAIP;IACJ,WAAWE,EAAoB;IACzB;IACA;IACO;IACL;IACR,cAAYM;IACZ,mBAAiB,GAAGV,EAAQ,GAAGE;GAChC,CAAA;EAC4B,CAAA,CAC3B;;AAEV;AAEA,EAAU,cAAc,aACxBS,EAAelB,CAAS"}

package/dist/components/data-display/List.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useControllable.cjs"),ee=require("../../hooks/useId.cjs"),l=require("../../lib/direction.cjs"),u=require("../../lib/focus.cjs"),d=require("../../hooks/useRovingTabIndex.cjs"),te=require("../../hooks/useMergedRefs.cjs"),f=require("../../lib/aria.cjs"),ne=require("../../lib/styles.cjs"),p=require("../../lib/icons.cjs"),m=require("../../lib/events.cjs"),h=require("./List.registry.cjs");let g=require("react");g=e.__toESM(g,1);let _=require("react/jsx-runtime");var v=g.createContext(null);v.displayName=`ListContext`;var y=null;function b(){return y??={mode:`list`,navigable:!1,selection:!1,checkmark:!1,selectedValues:new Set,toggleItem:()=>{},getTabIndex:()=>-1,registry:new h.ListRegistry},y}function re(e){return g.useContext(v)||(r.reportMissingContext(e,`a List`),b())}var x=[];function S(e,t,n){return n===`composite`||e&&t?{mode:`grid`,navigation:`composite`}:e?{mode:`listbox`,navigation:`items`}:{mode:`list`,navigation:n===`items`?`items`:`none`}}function C(e){r.warnOnce(`List:duplicate:${e}`,`List: several items share the value "${e}". Item values must be unique within a List; items with the same value are selected (and tab stops) together.`)}function ie(e){return n.flattenChildren(e).some(({node:e})=>n.isElementOfType(e,z)&&i.slotRendersContent(e.props.action))}var w={interactive:`${m.INTERACTIVE_SELECTOR}, [data-list-action]`};function T(e){return m.isForeignEvent(e,w)}function E(e){return e.ctrlKey||e.altKey||e.metaKey?!1:e.key===`Enter`||e.key===` `}var D=new Set([`textbox`,`searchbox`,`combobox`,`spinbutton`,`slider`]),O=new Set([`button`,`checkbox`,`color`,`file`,`hidden`,`image`,`radio`,`reset`,`submit`]);function k(e){let t=e.getAttribute(`role`);if(t!==null&&D.has(t))return!0;let n=e.localName;return n===`textarea`||n===`select`?!0:n===`input`?!O.has(e.type):e.matches(`[contenteditable]:not([contenteditable="false"])`)}function A(e){return Array.from(e.querySelectorAll(u.FOCUSABLE_SELECTOR)).filter(e=>u.isFocusable(e))}function j(e){if(!e.parentElement)return-1;let t=0;for(let n=e.previousElementSibling;n;n=n.previousElementSibling)t++;return t}function M(e,t){let n=null,r=null,i=null,a=0;for(let o=e.firstElementChild;o;o=o.nextElementSibling,a++){if(t.value!==void 0&&o.getAttribute(`data-roving-value`)===t.value){n=o;break}a===t.index&&(r=o),i=o}let o=n??r??(t.index>=0?i:null);return o?o.hasAttribute(`tabindex`)?o:A(o)[0]??null:null}function N(e){for(let t=e.firstElementChild;t;t=t.nextElementSibling)if(t.hasAttribute(`data-list-action`))return t;return null}function P(e){let t=[];for(let n of A(e)){let r=k(n)?e:n;t.includes(r)||t.push(r)}return t}var F=e=>{let{selectable:n=!1,selectionMode:i,selectedItems:s,defaultSelectedItems:ee,onSelectionChange:l,selectedItem:u,defaultSelectedItem:f,onSelectedItemChange:ne,navigationMode:p,checkmark:m=!1,className:y,children:b,ref:re,onKeyDown:w,onKeyDownCapture:T,onFocus:E,...D}=e;i===`multi`&&r.warnDeprecated(`List`,`selectionMode="multi"`,`selectionMode="multiple"`);let O=i===`multiple`||i===`multi`,k=g.useMemo(()=>!O&&u!==void 0?u===null?x:[u]:s,[O,u,s]),j=g.useMemo(()=>!O&&f!=null?[f]:ee??x,[O,f,ee]),[N,P]=c.useControllable(k,j,e=>{let t=[...e];l?.(t),O||ne?.(t[0]??null)}),[F]=g.useState(()=>new h.ListRegistry),I=g.useSyncExternalStore(F.subscribe,F.getSnapshot,F.getServerSnapshot),L=g.useMemo(()=>I?N.filter(e=>I.valueSet.has(e)):N,[I,N]),R=g.useMemo(()=>new Set(L),[L]),z=n&&p!==`composite`&&(I?I.hasActions:ie(b)),{mode:B,navigation:V}=S(n,z,p),H=V!==`none`,U=n&&m;g.useLayoutEffect(()=>{F.setActive(H)},[F,H]);let W=I?I.values.find(e=>R.has(e))??null:L[0]??null,{containerProps:G,getTabIndex:K}=d.useRovingTabIndex({activeValue:n?W:null,orientation:`vertical`,typeahead:(I?.count??0)>7,tabStop:n?`active`:`last-focused`,itemSelector:`:scope > [data-roving-value]`}),{ref:ae,onKeyDown:q,onKeyDownCapture:J,onFocus:Y}=G,X=g.useRef(null),Z=te.useMergedRefs(re,H?ae:null,X);g.useLayoutEffect(()=>{let e=F.takeFocusLoss(),t=X.current;if(!e||!t)return;let n=t.ownerDocument,r=n.activeElement;r&&r!==n.body&&r.isConnected||M(t,e)?.focus()},[B,F]),g.useLayoutEffect(()=>{if(H)return;let e=X.current,t=e?.ownerDocument.activeElement;t&&t.parentElement===e&&!t.hasAttribute(`tabindex`)&&A(t)[0]?.focus()},[H]),g.useLayoutEffect(()=>{F.syncOrder(X.current)});let Q=g.useCallback(e=>{P(t=>{let n=F.prune(t),r=n.includes(e);return O?r?n.filter(t=>t!==e):[...n,e]:r?[]:[e]})},[O,F,P]),oe=I?.duplicates??x;g.useEffect(()=>{for(let e of oe)C(e)},[oe]);let $=L.length;g.useEffect(()=>{n&&!O&&$>1&&r.warnOnce(`List:single-several-selected`,`List: a single-selection list (selectionMode "single") received ${$} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`)},[n,O,$]);let se=n&&p===`items`&&z,ce=n&&p===`none`;g.useEffect(()=>{se&&r.warnOnce(`List:items-with-actions`,`List: a selectable list whose items have actions is a grid (an option cannot hold interactive content), so navigationMode="items" acts as "composite". Set navigationMode="composite".`),ce&&r.warnOnce(`List:none-selectable`,`List: navigationMode="none" has no effect on a selectable list, whose items are always reached with the arrow keys. Remove it, or use "items" or "composite".`)},[se,ce]);let le=g.useMemo(()=>({mode:B,navigable:H,selection:n,checkmark:U,selectedValues:R,toggleItem:Q,getTabIndex:K,registry:F}),[B,H,n,U,R,Q,K,F]),ue=B===`grid`?`div`:`ul`,de=B===`grid`?`grid`:B===`listbox`?`listbox`:`list`;return(0,_.jsx)(v.Provider,{value:le,children:(0,_.jsx)(ue,{role:de,"aria-multiselectable":n&&O?!0:void 0,"data-navigation-mode":V,"data-checkmark":U?``:void 0,className:t.cn(o.listClassNames.root,`m-0 list-none p-0`,y),...D,ref:Z,"data-roving-container":H?``:void 0,onKeyDown:H?a.composeEventHandlers(w,q):w,onKeyDownCapture:H?a.composeEventHandlers(T,J):T,onFocus:H?a.composeEventHandlers(E,Y,{checkDefaultPrevented:!1}):E,children:b})})};F.displayName=`List`;var I=`forced-colors:text-[Highlight] forced-colors:forced-color-adjust-none`,L=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`;function R(e,{selected:n,disabled:r}){let a=t.cn(o.listItemClassNames.checkmark,`order-first me-2 inline-flex shrink-0 items-center justify-center`,r?[`text-muted-foreground`,L]:[`text-primary`,I],!n&&`invisible`);return e===void 0?(0,_.jsx)(`span`,{"aria-hidden":`true`,className:a,children:(0,_.jsx)(p.CheckIcon,{})}):i.renderSlot(e,`span`,a,{"aria-hidden":!0})}var z=({value:e,action:n,onAction:c,disabledSelection:u=!1,checkmark:d,className:p,children:m,onClick:h,onKeyDown:v,ref:y,...b})=>{let{mode:x,navigable:S,selection:C,checkmark:ie,selectedValues:w,toggleItem:D,getTabIndex:O,registry:M}=re(`ListItem`),F=ee.useId(`list-item`),I=e||void 0,L=I??F,z=i.slotRendersContent(n),[B]=g.useState(()=>({})),V=g.useRef(null),H=te.useMergedRefs(y,V);g.useLayoutEffect(()=>{M.set(B,{value:I,hasAction:z,element:V})},[M,B,I,z]),g.useLayoutEffect(()=>()=>M.delete(B),[M,B]);let W=s.useEventCallback(e=>{let t=e.parentElement;M.recordFocusLoss({value:I,index:t?j(t):-1})});g.useLayoutEffect(()=>{let e=V.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&M.recordFocusLoss({value:I,index:j(e)})}},[M,I]);let G=c!==void 0&&!S;g.useEffect(()=>{G&&r.warnOnce(`List.Item:action-not-navigable`,'List.Item: `onAction` runs only on clicks here: the List does not navigate its items, so keyboard users cannot reach them. Set navigationMode="items" (or "composite") on the List, or make it selectable.')},[G]);let K=C&&I!==void 0&&w.has(I),ae=C&&I!==void 0,q=C&&u,J=q&&c===void 0,Y=()=>{C&&!u&&I!==void 0&&D(I)},X=e=>{c?.(e),e.isDefaultPrevented()||Y()},Z=e=>{T(e)||X(e)},Q=e=>{if(e.key===` `&&ae){e.preventDefault(),Y();return}(C||c!==void 0)&&(X(e),e.preventDefault())},oe=e=>{T(e)||E(e)&&Q(e)},$=e=>{let t=e.currentTarget,n=e.target,r=N(t);if(!r||!r.contains(n)){if(n!==t)return;if(E(e)){Q(e);return}let i=l.getArrowIntent(e.key,{orientation:`horizontal`,dir:l.getDirection(t)})===`next`&&r?P(r)[0]:void 0;i&&(e.preventDefault(),i.focus());return}if(n!==r&&k(n)){e.key===`Escape`&&(e.preventDefault(),r.focus());return}if(n===r&&(e.key===`Enter`||e.key===`F2`)){let t=A(r).find(e=>k(e));t&&(e.preventDefault(),t.focus());return}let i=l.getArrowIntent(e.key,{orientation:`horizontal`,dir:l.getDirection(t)});if(!i)return;e.preventDefault();let a=P(r),o=a.indexOf(n);i===`next`?a[o+1]?.focus():o>0?a[o-1].focus():t.focus()},se=x===`grid`?`div`:`li`,ce=x===`grid`?`div`:`span`,le=x===`grid`?`row`:x===`listbox`?`option`:`listitem`,ue=S?{"aria-selected":C?K:void 0,tabIndex:O(L),"data-roving-value":L,"data-selected":K?``:void 0,...f.focusableDisabledProps(J,{reachable:!0}),onClick:a.composeEventHandlers(h,Z),onKeyDown:a.composeEventHandlers(v,x===`grid`?$:oe)}:{onClick:c?a.composeEventHandlers(h,Z):h,onKeyDown:v},de=C?J?`cursor-default`:`cursor-pointer`:c&&`cursor-pointer`,fe=C?!J:c!==void 0,pe=d!=null&&i.slotRendersContent(d),me=C&&(d==null?ie:pe);return(0,_.jsxs)(se,{role:le,"data-disabled-selection":q?``:void 0,className:t.cn(o.listItemClassNames.root,`flex items-center border-b border-border px-4 py-2 text-body-1`,S?[`relative`,de,ne.focusRingInset]:de,K?[`bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary`,ne.forcedColors.selectedContainer]:fe&&`hover:bg-subtle-hover`,p),...b,ref:H,...ue,children:[(0,_.jsx)(ce,{role:x===`grid`?`gridcell`:void 0,className:t.cn(o.listItemClassNames.content,`min-w-0 flex-1`),children:m}),z&&(0,_.jsx)(U,{grid:x===`grid`,onRemovedWithFocus:W,children:i.materialiseSlotContent(n)}),me&&R(pe?d:void 0,{selected:K,disabled:q})]})};z.displayName=`ListItem`;var B=[`[data-roving-container]`,...[`toolbar`,`radiogroup`,`listbox`,`grid`,`treegrid`,`tablist`,`menu`,`menubar`,`tree`].map(e=>`[role="${e}"]`)].join(`, `),V=[`tabindex`,`href`,`contenteditable`,`controls`];function H(e){let t=new Map,n=new WeakSet,r=()=>{for(let n of t.keys())e.contains(n)||t.delete(n);for(let r of e.querySelectorAll(u.FOCUSABLE_SELECTOR)){let i=r.getAttribute(`tabindex`);if(i===`-1`||n.has(r))continue;let a=r.closest(B);a&&e.contains(a)||(t.set(r,i),r.setAttribute(`tabindex`,`-1`))}};if(r(),typeof MutationObserver>`u`)return()=>{};let i=new MutationObserver(e=>{let a=new Set;for(let n of e){let e=n.target;n.attributeName===`tabindex`&&t.has(e)&&a.add(e)}for(let e of a){let r=e.getAttribute(`tabindex`);r!==`-1`&&r===t.get(e)?(t.delete(e),n.add(e)):t.set(e,r)}r(),i.takeRecords()});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:V}),()=>{i.disconnect();for(let[e,n]of t)n===null?e.removeAttribute(`tabindex`):e.setAttribute(`tabindex`,n);t.clear()}}function U({grid:e,onRemovedWithFocus:n,children:r}){let i=g.useRef(null);return g.useLayoutEffect(()=>{let e=i.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&n(e)}},[n,e]),g.useLayoutEffect(()=>{let t=i.current;return e&&t?H(t):void 0},[e]),(0,_.jsx)(e?`div`:`span`,{ref:i,role:e?`gridcell`:void 0,tabIndex:e?-1:void 0,"data-list-action":``,className:t.cn(o.listItemClassNames.action,`ms-2 shrink-0`,e&&`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`),children:r})}U.displayName=`ListActionCell`;var W=Object.assign(F,{Item:z});exports.List=W,exports.ListItem=z;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/slot.cjs"),a=require("../../lib/composeEventHandlers.cjs"),o=require("../../lib/classNames.cjs"),s=require("../../hooks/useEventCallback.cjs"),c=require("../../hooks/useControllable.cjs"),ee=require("../../hooks/useId.cjs"),l=require("../../lib/direction.cjs"),u=require("../../lib/focus.cjs"),d=require("../../hooks/useRovingTabIndex.cjs"),te=require("../../hooks/useMergedRefs.cjs"),f=require("../../lib/aria.cjs"),p=require("../../lib/styles.cjs"),ne=require("../../lib/icons.cjs"),m=require("../../lib/events.cjs"),re=require("./List.registry.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _=h.createContext(null);_.displayName=`ListContext`;var ie=h.createContext(null);ie.displayName=`ListItemIndexContext`;var v=null;function y(){return v??={mode:`list`,navigable:!1,selection:!1,checkmark:!1,selectedValues:new Set,toggleItem:()=>{},getTabIndex:()=>-1,registry:new re.ListRegistry,listWindow:null},v}function ae(e){return h.useContext(_)||(r.reportMissingContext(e,`a List`),y())}var oe=[];function b(e,t,n){return n===`composite`||e&&t?{mode:`grid`,navigation:`composite`}:e?{mode:`listbox`,navigation:`items`}:{mode:`list`,navigation:n===`items`?`items`:`none`}}function se(e){r.warnOnce(`List:duplicate:${e}`,`List: several items share the value "${e}". Item values must be unique within a List; items with the same value are selected (and tab stops) together.`)}function x(e){return n.flattenChildren(e).some(({node:e})=>n.isElementOfType(e,H)&&i.slotRendersContent(e.props.action))}var ce={interactive:`${m.INTERACTIVE_SELECTOR}, [data-list-action]`};function S(e){return m.isForeignEvent(e,ce)}function le(e){return e.ctrlKey||e.altKey||e.metaKey?!1:e.key===`Enter`||e.key===` `}var C=new Set([`textbox`,`searchbox`,`combobox`,`spinbutton`,`slider`]),w=new Set([`button`,`checkbox`,`color`,`file`,`hidden`,`image`,`radio`,`reset`,`submit`]);function T(e){let t=e.getAttribute(`role`);if(t!==null&&C.has(t))return!0;let n=e.localName;return n===`textarea`||n===`select`?!0:n===`input`?!w.has(e.type):e.matches(`[contenteditable]:not([contenteditable="false"])`)}function E(e){return Array.from(e.querySelectorAll(u.FOCUSABLE_SELECTOR)).filter(e=>u.isFocusable(e))}function D(e){if(!e.parentElement)return-1;let t=0;for(let n=e.previousElementSibling;n;n=n.previousElementSibling)t++;return t}function O(e){return e.hasAttribute(`tabindex`)?e:E(e)[0]??null}function k(e,t,n){let r=null,i=null,a=null,o=0;for(let s=e.firstElementChild;s;s=s.nextElementSibling,o++){let e=n?j(s):o;if(e!==null){if(t.value!==void 0&&s.getAttribute(`data-roving-value`)===t.value){r=s;break}e===t.index&&(i=s),a=s}}let s=r??i??(t.index>=0?a:null);return s?O(s):null}function A(e){return e!==void 0&&Number.isFinite(e)?Math.max(0,Math.floor(e)):0}function ue(...e){return e.filter(e=>e!==null)}function j(e){let t=e.getAttribute(`data-index`);return t!==null&&/^\d+$/.test(t)?Number(t):null}function de(e,t){let n=t instanceof Element?t:null;for(;n&&n.parentElement!==e;)n=n.parentElement;return n?j(n):null}function M(e,t){for(let n=e.firstElementChild;n;n=n.nextElementSibling)if(j(n)===t)return n;return null}var N=10;function P(e,t,n){let r=n-1,i=t===null?null:Math.min(t,r);switch(e){case`ArrowDown`:return i===null||i===r?0:i+1;case`ArrowUp`:return i===null||i===0?r:i-1;case`PageDown`:return i===null?0:Math.min(i+N,r);case`PageUp`:return i===null?r:Math.max(i-N,0);case`Home`:return 0;case`End`:return r;default:return}}var F={focused:null,pending:null},I=class{state=F;listeners=new Set;subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});getSnapshot=()=>this.state;getServerSnapshot=()=>F;update(e){let t={...this.state,...e};if(t.focused!==this.state.focused||t.pending!==this.state.pending){this.state=t;for(let e of this.listeners)e()}}};function fe({grid:e,size:t}){return(0,g.jsx)(e?`div`:`li`,{"aria-hidden":`true`,role:`presentation`,"data-virtual-spacer":``,className:o.listClassNames.spacer,style:{height:t}})}fe.displayName=`ListSpacer`;function L(e){for(let t=e.firstElementChild;t;t=t.nextElementSibling)if(t.hasAttribute(`data-list-action`))return t;return null}function R(e){let t=[];for(let n of E(e)){let r=T(n)?e:n;t.includes(r)||t.push(r)}return t}var z=e=>{let{selectable:n=!1,selectionMode:i,selectedItems:ee,defaultSelectedItems:l,onSelectionChange:u,selectedItem:f,defaultSelectedItem:p,onSelectedItemChange:ne,navigationMode:m,checkmark:v=!1,virtualWindow:y,count:ae,className:ce,children:S,ref:le,onKeyDown:C,onKeyDownCapture:w,onFocus:T,onBlur:D,...j}=e,N=typeof S==`function`?S:null,L=y!==void 0&&ae!==void 0&&N?y:null,R=L!==null,z=!R&&(y!==void 0||ae!==void 0||N!==null),B=R?A(ae):0,V=L?.itemSize,pe=h.useMemo(()=>V===void 0?null:{count:B,itemSize:V},[B,V]);i===`multi`&&r.warnDeprecated(`List`,`selectionMode="multi"`,`selectionMode="multiple"`);let H=i===`multiple`||i===`multi`,U=h.useMemo(()=>!H&&f!==void 0?f===null?oe:[f]:ee,[H,f,ee]),W=h.useMemo(()=>!H&&p!=null?[p]:l??oe,[H,p,l]),[G,me]=c.useControllable(U,W,e=>{let t=[...e];u?.(t),H||ne?.(t[0]??null)}),[K]=h.useState(()=>new re.ListRegistry),q=h.useSyncExternalStore(K.subscribe,K.getSnapshot,K.getServerSnapshot),J=h.useMemo(()=>q&&!R?G.filter(e=>q.valueSet.has(e)):G,[q,G,R]),he=h.useMemo(()=>new Set(J),[J]),[Y]=h.useState(()=>new I),{focused:ge,pending:_e}=h.useSyncExternalStore(Y.subscribe,Y.getSnapshot,Y.getServerSnapshot),ve=h.useMemo(()=>ue(ge,_e),[ge,_e]),X=L&&N?L.layout(B,{keep:ve}).map(e=>e.kind===`item`?{...e,node:N(e.index)}:e):null,ye=N?null:S,be=n&&m!==`composite`&&(q?q.hasActions:x(X?X.map(e=>e.kind===`item`?e.node:null):ye)),xe=be&&!R,Se=be&&R,{mode:Z,navigation:Ce}=b(n,xe,m),Q=Ce!==`none`,we=n&&v;h.useLayoutEffect(()=>{K.setActive(Q)},[K,Q]);let Te=q?q.values.find(e=>he.has(e))??null:J[0]??null,Ee=s.useEventCallback((e,t)=>{let n=t.currentTarget,r=n.ownerDocument.activeElement,i=r?de(n,r):null;i!==null&&L?.scrollToIndex(i,{align:`auto`})}),{containerProps:De,getTabIndex:Oe}=d.useRovingTabIndex({activeValue:n?Te:null,orientation:`vertical`,onFocusMove:R?Ee:void 0,typeahead:(R?B:q?.count??0)>7,tabStop:n&&!(R&&ge!==null)?`active`:`last-focused`,itemSelector:`:scope > [data-roving-value]`}),{ref:ke,onKeyDown:Ae,onKeyDownCapture:je,onFocus:Me}=De,$=h.useRef(null),Ne=te.useMergedRefs(le,Q?ke:null,$,L?.scrollRef),Pe=h.useRef(!1),Fe=s.useEventCallback(e=>{Q&&Me(e);let t=e.currentTarget;Pe.current=!t.contains(e.target);let n=de(t,e.target);n!==null&&Y.update({focused:n,pending:null})}),Ie=R?Fe:Q?Me:void 0,Le=s.useEventCallback(e=>{let t=e.currentTarget,n=e.relatedTarget;n&&t.contains(n)||(Pe.current=!1,queueMicrotask(()=>{if(!t.isConnected||Pe.current)return;let e=t.ownerDocument.activeElement;e&&t.contains(e)||Y.update(F)}))}),Re=s.useEventCallback(e=>{if(!L||e.defaultPrevented||B===0||e.ctrlKey||e.altKey||e.metaKey)return;let t=e.currentTarget;if(!t.contains(e.target)||d.ownsArrowKeys(e.target))return;let n=de(t,e.target),r=P(e.key,Y.getSnapshot().pending??n,B);if(r===void 0)return;if(e.preventDefault(),r===n){Y.update({pending:null}),L.scrollToIndex(r,{align:`auto`});return}let i=M(t,r);if(i){Y.update({pending:null}),i.scrollIntoView?.({block:`nearest`}),O(i)?.focus();return}let a=Y.getSnapshot().pending;Y.update({pending:r}),a!==r&&L.scrollToIndex(r,{align:`auto`})}),ze=s.useEventCallback(e=>{R&&Re(e),Ae(e)});h.useLayoutEffect(()=>{let e=K.takeFocusLoss(),t=$.current;if(!e||!t)return;let n=t.ownerDocument,r=n.activeElement;r&&r!==n.body&&r.isConnected||k(t,e,R)?.focus()},[Z,K,R]),h.useLayoutEffect(()=>{let e=$.current;if(!R||!e){Y.update(F);return}let t=e.ownerDocument,n=t.activeElement,r=!n||n===t.body||!n.isConnected||n===e,{pending:i}=Y.getSnapshot();if(i!==null){Y.update({pending:null});let t=i<B?M(e,i):null;t&&(r||e.contains(n))&&O(t)?.focus()}let{focused:a}=Y.getSnapshot();if(!(a===null||a<B)){if(r&&B>0){let t=M(e,B-1);if(t)O(t)?.focus();else{Y.update({focused:null,pending:B-1}),L?.scrollToIndex(B-1,{align:`auto`});return}}Y.getSnapshot().focused===a&&Y.update({focused:null})}}),h.useLayoutEffect(()=>{if(Q)return;let e=$.current,t=e?.ownerDocument.activeElement;t&&t.parentElement===e&&!t.hasAttribute(`tabindex`)&&E(t)[0]?.focus()},[Q]),h.useLayoutEffect(()=>{K.syncOrder($.current)});let Be=h.useCallback(e=>{me(t=>{let n=R?t:K.prune(t),r=n.includes(e);return H?r?n.filter(t=>t!==e):[...n,e]:r?[]:[e]})},[H,K,me,R]),Ve=q?.duplicates??oe;h.useEffect(()=>{for(let e of Ve)se(e)},[Ve]);let He=J.length;h.useEffect(()=>{n&&!H&&He>1&&r.warnOnce(`List:single-several-selected`,`List: a single-selection list (selectionMode "single") received ${He} selected items. Pass one value with \`selectedItem\`, or use selectionMode="multiple".`)},[n,H,He]);let Ue=n&&m===`items`&&xe,We=n&&m===`none`;h.useEffect(()=>{Ue&&r.warnOnce(`List:items-with-actions`,`List: a selectable list whose items have actions is a grid (an option cannot hold interactive content), so navigationMode="items" acts as "composite". Set navigationMode="composite".`),We&&r.warnOnce(`List:none-selectable`,`List: navigationMode="none" has no effect on a selectable list, whose items are always reached with the arrow keys. Remove it, or use "items" or "composite".`)},[Ue,We]),h.useEffect(()=>{z&&r.warnOnce(`List:virtual-window-children`,"List: a windowed list needs `virtualWindow`, `count` and a function child that returns the `List.Item` at an index; without one of them the window is ignored (a function child then renders nothing, and element children are all rendered).")},[z]),h.useEffect(()=>{Se&&r.warnOnce(`List:virtual-window-actions`,`List: a selectable windowed list keeps its listbox structure whatever items are rendered, so an item action sits inside an option, which cannot hold interactive content. Set navigationMode="composite" to render a grid whose rows hold the actions.`)},[Se]);let Ge=h.useMemo(()=>({mode:Z,navigable:Q,selection:n,checkmark:we,selectedValues:he,toggleItem:Be,getTabIndex:Oe,registry:K,listWindow:pe}),[Z,Q,n,we,he,Be,Oe,K,pe]),Ke=Z===`grid`?`div`:`ul`,qe=Z===`grid`?`grid`:Z===`listbox`?`listbox`:`list`,Je=X?X.map(e=>e.kind===`item`?(0,g.jsx)(ie.Provider,{value:e.index,children:e.node},e.index):(0,g.jsx)(fe,{grid:Z===`grid`,size:e.size},e.key)):ye;return(0,g.jsx)(_.Provider,{value:Ge,children:(0,g.jsx)(Ke,{role:qe,"aria-multiselectable":n&&H?!0:void 0,"aria-rowcount":R&&Z===`grid`?B:void 0,"data-navigation-mode":Ce,"data-checkmark":we?``:void 0,tabIndex:R&&Q?-1:void 0,className:t.cn(o.listClassNames.root,`m-0 list-none p-0`,R&&`overflow-y-auto [overflow-anchor:none]`,ce),...j,ref:Ne,"data-roving-container":Q?``:void 0,onKeyDown:Q?a.composeEventHandlers(C,ze):C,onKeyDownCapture:Q?a.composeEventHandlers(w,je):w,onFocus:Ie?a.composeEventHandlers(T,Ie,{checkDefaultPrevented:!1}):T,onBlur:R?a.composeEventHandlers(D,Le,{checkDefaultPrevented:!1}):D,children:Je})})};z.displayName=`List`;var B=`forced-colors:text-[Highlight] forced-colors:forced-color-adjust-none`,V=`forced-colors:text-[GrayText] forced-colors:forced-color-adjust-none`;function pe(e,{selected:n,disabled:r}){let a=t.cn(o.listItemClassNames.checkmark,`order-first me-2 inline-flex shrink-0 items-center justify-center`,r?[`text-muted-foreground`,V]:[`text-primary`,B],!n&&`invisible`);return e===void 0?(0,g.jsx)(`span`,{"aria-hidden":`true`,className:a,children:(0,g.jsx)(ne.CheckIcon,{})}):i.renderSlot(e,`span`,a,{"aria-hidden":!0})}var H=({value:e,action:n,onAction:c,disabledSelection:u=!1,checkmark:d,className:ne,style:m,children:re,onClick:_,onKeyDown:v,ref:y,...oe})=>{let{mode:b,navigable:se,selection:x,checkmark:ce,selectedValues:C,toggleItem:w,getTabIndex:O,registry:k,listWindow:A}=ae(`ListItem`),ue=h.useContext(ie),j=A?ue:null,de=ee.useId(`list-item`),M=e||void 0,N=M??de,P=i.slotRendersContent(n),[F]=h.useState(()=>({})),I=h.useRef(null),fe=te.useMergedRefs(y,I);h.useLayoutEffect(()=>{k.set(F,{value:M,hasAction:P,element:I,index:j??void 0})},[k,F,M,P,j]),h.useLayoutEffect(()=>()=>k.delete(F),[k,F]);let z=s.useEventCallback(e=>{let t=e.parentElement;k.recordFocusLoss({value:M,index:j??(t?D(t):-1)})});h.useLayoutEffect(()=>{let e=I.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&k.recordFocusLoss({value:M,index:j??D(e)})}},[k,M,j]);let B=c!==void 0&&!se;h.useEffect(()=>{B&&r.warnOnce(`List.Item:action-not-navigable`,'List.Item: `onAction` runs only on clicks here: the List does not navigate its items, so keyboard users cannot reach them. Set navigationMode="items" (or "composite") on the List, or make it selectable.')},[B]);let V=x&&M!==void 0&&C.has(M),H=x&&M!==void 0,U=x&&u,W=U&&c===void 0,G=()=>{x&&!u&&M!==void 0&&w(M)},K=e=>{c?.(e),e.isDefaultPrevented()||G()},q=e=>{S(e)||K(e)},J=e=>{if(e.key===` `&&H){e.preventDefault(),G();return}(x||c!==void 0)&&(K(e),e.preventDefault())},he=e=>{S(e)||le(e)&&J(e)},Y=e=>{let t=e.currentTarget,n=e.target,r=L(t);if(!r||!r.contains(n)){if(n!==t)return;if(le(e)){J(e);return}let i=l.getArrowIntent(e.key,{orientation:`horizontal`,dir:l.getDirection(t)})===`next`&&r?R(r)[0]:void 0;i&&(e.preventDefault(),i.focus());return}if(n!==r&&T(n)){e.key===`Escape`&&(e.preventDefault(),r.focus());return}if(n===r&&(e.key===`Enter`||e.key===`F2`)){let t=E(r).find(e=>T(e));t&&(e.preventDefault(),t.focus());return}let i=l.getArrowIntent(e.key,{orientation:`horizontal`,dir:l.getDirection(t)});if(!i)return;e.preventDefault();let a=R(r),o=a.indexOf(n);i===`next`?a[o+1]?.focus():o>0?a[o-1].focus():t.focus()},ge=b===`grid`?`div`:`li`,_e=b===`grid`?`div`:`span`,ve=b===`grid`?`row`:b===`listbox`?`option`:`listitem`,X=se?{"aria-selected":x?V:void 0,tabIndex:O(N),"data-roving-value":N,"data-selected":V?``:void 0,...f.focusableDisabledProps(W,{reachable:!0}),onClick:a.composeEventHandlers(_,q),onKeyDown:a.composeEventHandlers(v,b===`grid`?Y:he)}:{onClick:c?a.composeEventHandlers(_,q):_,onKeyDown:v},ye=x?W?`cursor-default`:`cursor-pointer`:c&&`cursor-pointer`,be=x?!W:c!==void 0,xe=d!=null&&i.slotRendersContent(d),Se=x&&(d==null?ce:xe),Z=A&&j!==null?{"data-index":j,...b===`grid`?{"aria-rowindex":j+1}:{"aria-setsize":A.count,"aria-posinset":j+1}}:{};return(0,g.jsxs)(ge,{role:ve,"data-disabled-selection":U?``:void 0,className:t.cn(o.listItemClassNames.root,`flex items-center border-b border-border px-4 py-2 text-body-1`,j!==null&&`box-border`,se?[`relative`,ye,p.focusRingInset]:ye,V?[`bg-subtle-selected before:absolute before:inset-y-2 before:start-0 before:w-0.5 before:rounded-full before:bg-primary`,p.forcedColors.selectedContainer]:be&&`hover:bg-subtle-hover`,ne),style:A&&j!==null?{...m,height:A.itemSize}:m,...oe,ref:fe,...X,...Z,children:[(0,g.jsx)(_e,{role:b===`grid`?`gridcell`:void 0,className:t.cn(o.listItemClassNames.content,`min-w-0 flex-1`),children:re}),P&&(0,g.jsx)(me,{grid:b===`grid`,onRemovedWithFocus:z,children:i.materialiseSlotContent(n)}),Se&&pe(xe?d:void 0,{selected:V,disabled:U})]})};H.displayName=`ListItem`;var U=[`[data-roving-container]`,...[`toolbar`,`radiogroup`,`listbox`,`grid`,`treegrid`,`tablist`,`menu`,`menubar`,`tree`].map(e=>`[role="${e}"]`)].join(`, `),W=[`tabindex`,`href`,`contenteditable`,`controls`];function G(e){let t=new Map,n=new WeakSet,r=()=>{for(let n of t.keys())e.contains(n)||t.delete(n);for(let r of e.querySelectorAll(u.FOCUSABLE_SELECTOR)){let i=r.getAttribute(`tabindex`);if(i===`-1`||n.has(r))continue;let a=r.closest(U);a&&e.contains(a)||(t.set(r,i),r.setAttribute(`tabindex`,`-1`))}};if(r(),typeof MutationObserver>`u`)return()=>{};let i=new MutationObserver(e=>{let a=new Set;for(let n of e){let e=n.target;n.attributeName===`tabindex`&&t.has(e)&&a.add(e)}for(let e of a){let r=e.getAttribute(`tabindex`);r!==`-1`&&r===t.get(e)?(t.delete(e),n.add(e)):t.set(e,r)}r(),i.takeRecords()});return i.observe(e,{subtree:!0,childList:!0,attributes:!0,attributeFilter:W}),()=>{i.disconnect();for(let[e,n]of t)n===null?e.removeAttribute(`tabindex`):e.setAttribute(`tabindex`,n);t.clear()}}function me({grid:e,onRemovedWithFocus:n,children:r}){let i=h.useRef(null);return h.useLayoutEffect(()=>{let e=i.current;return()=>{if(!e)return;let t=e.ownerDocument.activeElement;t&&e.contains(t)&&n(e)}},[n,e]),h.useLayoutEffect(()=>{let t=i.current;return e&&t?G(t):void 0},[e]),(0,g.jsx)(e?`div`:`span`,{ref:i,role:e?`gridcell`:void 0,tabIndex:e?-1:void 0,"data-list-action":``,className:t.cn(o.listItemClassNames.action,`ms-2 shrink-0`,e&&`focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring`),children:r})}me.displayName=`ListActionCell`;var K=Object.assign(z,{Item:H});exports.List=K,exports.ListItem=H;
 //# sourceMappingURL=List.cjs.map