@funstack/ui 0.1.0-alpha.2 → 0.1.0-alpha.3

package/dist/menu/menu-radio-group.mjs

@@ -5,7 +5,7 @@ import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { MenuGroupContext, MenuRadioGroupContext } from "./menu-context.mjs";
-import { useId, useRef } from "react";
+import { useId, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/menu/menu-radio-group.tsx
 /**
@@ -31,7 +31,7 @@ function MenuRadioGroup({ value, defaultValue, valueChangeAction, className, sty
 			prop: "value"
 		}
 	});
-	const context = {
+	const context = useMemo(() => ({
 		value: optimistic,
 		pending,
 		select: (next, event, then) => {
@@ -39,7 +39,12 @@ function MenuRadioGroup({ value, defaultValue, valueChangeAction, className, sty
 			if (then !== void 0) after.current.set(details, then);
 			dispatch(next, details);
 		}
-	};
+	}), [
+		optimistic,
+		pending,
+		dispatch
+	]);
+	const groupContext = useMemo(() => ({ labelId }), [labelId]);
 	const element = useRender({
 		defaultElement: "div",
 		render,
@@ -58,7 +63,7 @@ function MenuRadioGroup({ value, defaultValue, valueChangeAction, className, sty
 		}
 	});
 	return /* @__PURE__ */ jsx(MenuGroupContext, {
-		value: { labelId },
+		value: groupContext,
 		children: /* @__PURE__ */ jsx(MenuRadioGroupContext, {
 			value: context,
 			children: element

package/dist/menu/menu-radio-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu-radio-group.mjs","names":[],"sources":["../../src/menu/menu-radio-group.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { MenuGroupContext, MenuRadioGroupContext } from \"./menu-context.js\";\nimport type { MenuRadioGroupContextValue } from \"./menu-context.js\";\n\nexport interface MenuRadioGroupState {\n  /** Optimistic value; `null` when no item is selected. */\n  readonly value: string | null;\n  /** `valueChangeAction` is in flight. */\n  readonly pending: boolean;\n}\n\nexport interface MenuRadioGroupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"role\" | \"defaultValue\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Controlled value; `null` selects nothing, `undefined` means uncontrolled. */\n  value?: string | null;\n  /** Initial value when uncontrolled. Default `null`. */\n  defaultValue?: string | null;\n  /**\n   * Receives the chosen item's `value`, awaited inside the group's transition; the items'\n   * `aria-checked` follow at once and roll back on rejection. Re-activating the selected item\n   * dispatches nothing. May be a Server Function.\n   */\n  valueChangeAction?: ChangeAction<string>;\n  className?: StateValue<string | undefined, MenuRadioGroupState>;\n  style?: StateValue<CSSProperties | undefined, MenuRadioGroupState>;\n  children?: StateValue<ReactNode, MenuRadioGroupState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, MenuRadioGroupState>;\n}\n\n/**\n * The state owner of a set of `Menu.RadioItem`s: `<div role=\"group\" aria-labelledby>` (named by\n * a `Menu.GroupLabel` inside it). Emits `data-pending` while `valueChangeAction` runs.\n *\n * Owned keys (conventions 1.2): `role`, `aria-labelledby` (token-merged), `data-pending`.\n */\nexport function MenuRadioGroup({\n  value,\n  defaultValue,\n  valueChangeAction,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuRadioGroupProps) {\n  const labelId = `${useId()}-label`;\n  // The work to run after a dispatch's action resolved (an item's `closeOnActivate`), keyed by\n  // the dispatch's details object.\n  const after = useRef(new WeakMap<object, () => void>());\n\n  const { optimistic, pending, dispatch } = useControllableAction<string | null>({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    action: async (next, details) => {\n      if (next !== null) await valueChangeAction?.(next, details);\n      after.current.get(details)?.();\n    },\n    transitionTypes: () => transitionTypes(\"menu\", \"select\"),\n    warn: { component: \"Menu.RadioGroup\", prop: \"value\" },\n  });\n\n  const context: MenuRadioGroupContextValue = {\n    value: optimistic,\n    pending,\n    select: (next, event, then) => {\n      const details = createActionDetails(event, {}) as ActionDetails;\n      if (then !== undefined) after.current.set(details, then);\n      dispatch(next, details);\n    },\n  };\n\n  const state: MenuRadioGroupState = { value: optimistic, pending };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, MenuRadioGroupState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"group\",\n      \"aria-labelledby\": labelId,\n      \"data-pending\": dataAttr(pending),\n    },\n  });\n\n  return (\n    <MenuGroupContext value={{ labelId }}>\n      <MenuRadioGroupContext value={context}>{element}</MenuRadioGroupContext>\n    </MenuGroupContext>\n  );\n}\n\nMenuRadioGroup.displayName = \"MenuRadioGroup\";\n"],"mappings":";;;;;;;;;;;;;;;;AA6CA,SAAgB,eAAe,EAC7B,OACA,cACA,mBACA,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,UAAU,GAAG,MAAM,EAAE;CAG3B,MAAM,QAAQ,uBAAO,IAAI,QAA4B,CAAC;CAEtD,MAAM,EAAE,YAAY,SAAS,aAAa,sBAAqC;EAC7E,YAAY;EACZ;EACA,cAAc;EACd,QAAQ,OAAO,MAAM,YAAY;GAC/B,IAAI,SAAS,MAAM,MAAM,oBAAoB,MAAM,OAAO;GAC1D,MAAM,QAAQ,IAAI,OAAO,CAAC,GAAG;EAC/B;EACA,uBAAuB,gBAAgB,QAAQ,QAAQ;EACvD,MAAM;GAAE,WAAW;GAAmB,MAAM;EAAQ;CACtD,CAAC;CAED,MAAM,UAAsC;EAC1C,OAAO;EACP;EACA,SAAS,MAAM,OAAO,SAAS;GAC7B,MAAM,UAAU,oBAAoB,OAAO,CAAC,CAAC;GAC7C,IAAI,SAAS,KAAA,GAAW,MAAM,QAAQ,IAAI,SAAS,IAAI;GACvD,SAAS,MAAM,OAAO;EACxB;CACF;CAIA,MAAM,UAAU,UAA6D;EAC3E,gBAAgB;EAChB;EACA,OAAA;GALmC,OAAO;GAAY;EAKlD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,MAAM;GACN,mBAAmB;GACnB,gBAAgB,SAAS,OAAO;EAClC;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,QAAQ;EACjC,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAU,UAAA;EAA+B,CAAA;CACvD,CAAA;AAEtB;AAEA,eAAe,cAAc"}
+{"version":3,"file":"menu-radio-group.mjs","names":[],"sources":["../../src/menu/menu-radio-group.tsx"],"sourcesContent":["\"use client\";\nimport { useId, useMemo, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type { ActionDetails, ChangeAction, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { MenuGroupContext, MenuRadioGroupContext } from \"./menu-context.js\";\nimport type { MenuRadioGroupContextValue } from \"./menu-context.js\";\n\nexport interface MenuRadioGroupState {\n  /** Optimistic value; `null` when no item is selected. */\n  readonly value: string | null;\n  /** `valueChangeAction` is in flight. */\n  readonly pending: boolean;\n}\n\nexport interface MenuRadioGroupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"role\" | \"defaultValue\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Controlled value; `null` selects nothing, `undefined` means uncontrolled. */\n  value?: string | null;\n  /** Initial value when uncontrolled. Default `null`. */\n  defaultValue?: string | null;\n  /**\n   * Receives the chosen item's `value`, awaited inside the group's transition; the items'\n   * `aria-checked` follow at once and roll back on rejection. Re-activating the selected item\n   * dispatches nothing. May be a Server Function.\n   */\n  valueChangeAction?: ChangeAction<string>;\n  className?: StateValue<string | undefined, MenuRadioGroupState>;\n  style?: StateValue<CSSProperties | undefined, MenuRadioGroupState>;\n  children?: StateValue<ReactNode, MenuRadioGroupState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, MenuRadioGroupState>;\n}\n\n/**\n * The state owner of a set of `Menu.RadioItem`s: `<div role=\"group\" aria-labelledby>` (named by\n * a `Menu.GroupLabel` inside it). Emits `data-pending` while `valueChangeAction` runs.\n *\n * Owned keys (conventions 1.2): `role`, `aria-labelledby` (token-merged), `data-pending`.\n */\nexport function MenuRadioGroup({\n  value,\n  defaultValue,\n  valueChangeAction,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: MenuRadioGroupProps) {\n  const labelId = `${useId()}-label`;\n  // The work to run after a dispatch's action resolved (an item's `closeOnActivate`), keyed by\n  // the dispatch's details object.\n  const after = useRef(new WeakMap<object, () => void>());\n\n  const { optimistic, pending, dispatch } = useControllableAction<string | null>({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    action: async (next, details) => {\n      if (next !== null) await valueChangeAction?.(next, details);\n      after.current.get(details)?.();\n    },\n    transitionTypes: () => transitionTypes(\"menu\", \"select\"),\n    warn: { component: \"Menu.RadioGroup\", prop: \"value\" },\n  });\n\n  // Memoised (#48): `dispatch` is stable.\n  const context = useMemo<MenuRadioGroupContextValue>(\n    () => ({\n      value: optimistic,\n      pending,\n      select: (next, event, then) => {\n        const details = createActionDetails(event, {}) as ActionDetails;\n        if (then !== undefined) after.current.set(details, then);\n        dispatch(next, details);\n      },\n    }),\n    [optimistic, pending, dispatch],\n  );\n  const groupContext = useMemo(() => ({ labelId }), [labelId]);\n\n  const state: MenuRadioGroupState = { value: optimistic, pending };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, MenuRadioGroupState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"group\",\n      \"aria-labelledby\": labelId,\n      \"data-pending\": dataAttr(pending),\n    },\n  });\n\n  return (\n    <MenuGroupContext value={groupContext}>\n      <MenuRadioGroupContext value={context}>{element}</MenuRadioGroupContext>\n    </MenuGroupContext>\n  );\n}\n\nMenuRadioGroup.displayName = \"MenuRadioGroup\";\n"],"mappings":";;;;;;;;;;;;;;;;AA6CA,SAAgB,eAAe,EAC7B,OACA,cACA,mBACA,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,UAAU,GAAG,MAAM,EAAE;CAG3B,MAAM,QAAQ,uBAAO,IAAI,QAA4B,CAAC;CAEtD,MAAM,EAAE,YAAY,SAAS,aAAa,sBAAqC;EAC7E,YAAY;EACZ;EACA,cAAc;EACd,QAAQ,OAAO,MAAM,YAAY;GAC/B,IAAI,SAAS,MAAM,MAAM,oBAAoB,MAAM,OAAO;GAC1D,MAAM,QAAQ,IAAI,OAAO,CAAC,GAAG;EAC/B;EACA,uBAAuB,gBAAgB,QAAQ,QAAQ;EACvD,MAAM;GAAE,WAAW;GAAmB,MAAM;EAAQ;CACtD,CAAC;CAGD,MAAM,UAAU,eACP;EACL,OAAO;EACP;EACA,SAAS,MAAM,OAAO,SAAS;GAC7B,MAAM,UAAU,oBAAoB,OAAO,CAAC,CAAC;GAC7C,IAAI,SAAS,KAAA,GAAW,MAAM,QAAQ,IAAI,SAAS,IAAI;GACvD,SAAS,MAAM,OAAO;EACxB;CACF,IACA;EAAC;EAAY;EAAS;CAAQ,CAChC;CACA,MAAM,eAAe,eAAe,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;CAI3D,MAAM,UAAU,UAA6D;EAC3E,gBAAgB;EAChB;EACA,OAAA;GALmC,OAAO;GAAY;EAKlD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,MAAM;GACN,mBAAmB;GACnB,gBAAgB,SAAS,OAAO;EAClC;CACF,CAAC;CAED,OACE,oBAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAU,UAAA;EAA+B,CAAA;CACvD,CAAA;AAEtB;AAEA,eAAe,cAAc"}

package/dist/menu/menu-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu-root.mjs","names":[],"sources":["../../src/menu/menu-root.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ActionDetails, ChangeAction, ChangeReason, StateValue } from \"../internal/types.js\";\nimport { useDelayedPair } from \"../internal/use-delayed-pair.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverRoot } from \"../internal/use-popover-root.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { MenuContext, MenuListContext } from \"./menu-context.js\";\nimport type { MenuContextValue, MenuOpenFocus } from \"./menu-context.js\";\n\n/** Details passed as the second argument of `Menu.Root`'s `openChangeAction`. */\nexport interface MenuOpenChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user acted on a part: the Trigger or SubmenuTrigger (click, Enter / Space,\n   * arrow keys), an item's activation (the close after its action), ArrowLeft in a submenu, or a\n   * foreign invoker.\n   * `\"dismiss\"`: Escape, a click outside, Tab or focus leaving the menu, the pointer leaving a\n   * hover-opened submenu, the parent menu closing (a submenu when the whole stack closes), script.\n   * `\"platform\"`: the menu was found open on mount (opened before hydration); `event` is\n   * `undefined`.\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface MenuRootState {\n  /** Optimistic open state. Content rendered from it must not suspend. */\n  readonly open: boolean;\n  /** An open or close of this Root is in flight (its `openChangeAction`). */\n  readonly pending: boolean;\n  /** This Root is a submenu (rendered inside a `Menu.Popup`). */\n  readonly submenu: boolean;\n}\n\nexport interface MenuRootProps {\n  /** Controlled open state. `undefined` means uncontrolled. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. Opens after hydration. */\n  defaultOpen?: boolean;\n  /**\n   * Awaited for `true` (the menu opens when it resolves and the items have rendered) and for the\n   * closes the user asks a part for (Trigger toggle, an item's activation, ArrowLeft in a\n   * submenu); a notification for dismissals (Escape, a click outside, Tab, the parent menu\n   * closing). May be a Server Function. A `setState` placed after your own `await` needs\n   * `startTransition` (React limitation).\n   */\n  openChangeAction?: ChangeAction<boolean, MenuOpenChangeDetails>;\n  /** Arrow keys wrap from the last item to the first and back. Default `true`. */\n  loop?: boolean;\n  /** Submenu only: milliseconds from hovering the SubmenuTrigger to the open. Default 100. */\n  delay?: number;\n  /**\n   * Submenu only: milliseconds from the pointer leaving the SubmenuTrigger and the submenu to the\n   * close. Default 150.\n   */\n  closeDelay?: number;\n  children?: StateValue<ReactNode, MenuRootState>;\n}\n\n/**\n * Owns the ids, the open state and the context of one menu level. Renders no DOM. A `Menu.Root`\n * rendered inside a `Menu.Popup` is a **submenu**: its Trigger is a `Menu.SubmenuTrigger` (an\n * item of the parent menu) and its Popup opens beside that item.\n *\n * A menu is always in library mode (design/components/menu.md 2.1): opening and the closes a\n * part asks for are transitions (pending Trigger, items render from committed state,\n * `showPopover()` / `hidePopover()` once the change has committed); dismissals are the\n * browser's and `openChangeAction(false)` is a notification.\n */\nconst DEFAULT_FOCUS: MenuOpenFocus = { cause: \"first\", pointer: false };\n\nexport function MenuRoot({\n  open,\n  defaultOpen,\n  openChangeAction,\n  loop = true,\n  delay,\n  closeDelay,\n  children,\n}: MenuRootProps) {\n  const parent = use(MenuContext);\n  const list = use(MenuListContext);\n  // A Root inside a Popup's content is a submenu (design 1); the enclosing menu is the Popup's.\n  const parentMenu = list !== null ? list.menu : null;\n  const submenu = parentMenu !== null;\n\n  useDevWarning(\n    !submenu && (delay !== undefined || closeDelay !== undefined),\n    \"Menu.Root: `delay` and `closeDelay` only apply to a submenu (a Menu.Root inside a \" +\n      \"Menu.Popup); a top-level menu does not open on hover.\",\n  );\n  useDevWarning(\n    parent !== null && !submenu,\n    \"Menu.Root: rendered inside another Menu.Root but outside its Menu.Popup. A submenu's Root \" +\n      \"goes inside the parent's Menu.Popup.\",\n  );\n\n  const timers = useDelayedPair();\n  // The cause recorded by the part about to dispatch an open, and the cause of the open being\n  // shown (design 14, \"Open cause\").\n  const nextCause = useRef<MenuOpenFocus | null>(null);\n  const openCause = useRef<MenuOpenFocus | null>(null);\n\n  const popover = usePopoverRoot<MenuOpenChangeDetails>({\n    component: \"menu\",\n    part: \"Menu.Root\",\n    mode: \"library\",\n    open,\n    defaultOpen,\n    openChangeAction,\n    onDispatch: (next) => {\n      // Any dispatch cancels hover intent (walkthrough 9).\n      timers.cancel();\n      if (next) openCause.current = nextCause.current ?? DEFAULT_FOCUS;\n      nextCause.current = null;\n    },\n  });\n\n  const setOpenCause = useCallback((cause: MenuOpenFocus[\"cause\"], pointer = false) => {\n    nextCause.current = { cause, pointer };\n  }, []);\n  const takeOpenCause = useCallback(() => {\n    const cause = openCause.current ?? DEFAULT_FOCUS;\n    openCause.current = null;\n    return cause;\n  }, []);\n\n  const resolvedDelay = delay ?? 100;\n  const resolvedCloseDelay = closeDelay ?? 150;\n  // Note: `popover` is a new object on every render (the shared `usePopoverRoot` is not memoised:\n  // its `dispatch` closes over the render's state), so today this recomputes on every render of\n  // the Root and the parts re-render with it, as Popover's do. The other members are stable; the\n  // memo starts to hit without further change once that hook returns a stable value.\n  const value = useMemo<MenuContextValue>(() => {\n    const self: MenuContextValue = {\n      popover,\n      submenu,\n      // The top-level menu: this one, or the parent's root (design 2.2).\n      get root() {\n        return parentMenu?.root ?? self;\n      },\n      parent: parentMenu,\n      loop,\n      delay: resolvedDelay,\n      closeDelay: resolvedCloseDelay,\n      triggerId: `${popover.ids.popup}-trigger`,\n      setOpenCause,\n      takeOpenCause,\n      timers,\n    };\n    return self;\n  }, [\n    popover,\n    submenu,\n    parentMenu,\n    loop,\n    resolvedDelay,\n    resolvedCloseDelay,\n    setOpenCause,\n    takeOpenCause,\n    timers,\n  ]);\n\n  const state: MenuRootState = {\n    open: popover.optimistic,\n    pending: popover.pending,\n    submenu,\n  };\n\n  return <MenuContext value={value}>{resolveStateValue(children, state)}</MenuContext>;\n}\n\nMenuRoot.displayName = \"MenuRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqEA,MAAM,gBAA+B;CAAE,OAAO;CAAS,SAAS;AAAM;AAEtE,SAAgB,SAAS,EACvB,MACA,aACA,kBACA,OAAO,MACP,OACA,YACA,YACgB;CAChB,MAAM,SAAS,IAAI,WAAW;CAC9B,MAAM,OAAO,IAAI,eAAe;CAEhC,MAAM,aAAa,SAAS,OAAO,KAAK,OAAO;CAC/C,MAAM,UAAU,eAAe;CAE/B,cACE,CAAC,YAAY,UAAU,KAAA,KAAa,eAAe,KAAA,IACnD,yIAEF;CACA,cACE,WAAW,QAAQ,CAAC,SACpB,gIAEF;CAEA,MAAM,SAAS,eAAe;CAG9B,MAAM,YAAY,OAA6B,IAAI;CACnD,MAAM,YAAY,OAA6B,IAAI;CAEnD,MAAM,UAAU,eAAsC;EACpD,WAAW;EACX,MAAM;EACN,MAAM;EACN;EACA;EACA;EACA,aAAa,SAAS;GAEpB,OAAO,OAAO;GACd,IAAI,MAAM,UAAU,UAAU,UAAU,WAAW;GACnD,UAAU,UAAU;EACtB;CACF,CAAC;CAED,MAAM,eAAe,aAAa,OAA+B,UAAU,UAAU;EACnF,UAAU,UAAU;GAAE;GAAO;EAAQ;CACvC,GAAG,CAAC,CAAC;CACL,MAAM,gBAAgB,kBAAkB;EACtC,MAAM,QAAQ,UAAU,WAAW;EACnC,UAAU,UAAU;EACpB,OAAO;CACT,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,SAAS;CAC/B,MAAM,qBAAqB,cAAc;CAKzC,MAAM,QAAQ,cAAgC;EAC5C,MAAM,OAAyB;GAC7B;GACA;GAEA,IAAI,OAAO;IACT,OAAO,YAAY,QAAQ;GAC7B;GACA,QAAQ;GACR;GACA,OAAO;GACP,YAAY;GACZ,WAAW,GAAG,QAAQ,IAAI,MAAM;GAChC;GACA;GACA;EACF;EACA,OAAO;CACT,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAuB;EAC3B,MAAM,QAAQ;EACd,SAAS,QAAQ;EACjB;CACF;CAEA,OAAO,oBAAC,aAAD;EAAoB;EAAQ,UAAA,kBAAkB,UAAU,KAAK;CAAe,CAAA;AACrF;AAEA,SAAS,cAAc"}
+{"version":3,"file":"menu-root.mjs","names":[],"sources":["../../src/menu/menu-root.tsx"],"sourcesContent":["\"use client\";\nimport { use, useCallback, useMemo, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { ActionDetails, ChangeAction, ChangeReason, StateValue } from \"../internal/types.js\";\nimport { useDelayedPair } from \"../internal/use-delayed-pair.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { usePopoverRoot } from \"../internal/use-popover-root.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { MenuContext, MenuListContext } from \"./menu-context.js\";\nimport type { MenuContextValue, MenuOpenFocus } from \"./menu-context.js\";\n\n/** Details passed as the second argument of `Menu.Root`'s `openChangeAction`. */\nexport interface MenuOpenChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user acted on a part: the Trigger or SubmenuTrigger (click, Enter / Space,\n   * arrow keys), an item's activation (the close after its action), ArrowLeft in a submenu, or a\n   * foreign invoker.\n   * `\"dismiss\"`: Escape, a click outside, Tab or focus leaving the menu, the pointer leaving a\n   * hover-opened submenu, the parent menu closing (a submenu when the whole stack closes), script.\n   * `\"platform\"`: the menu was found open on mount (opened before hydration); `event` is\n   * `undefined`.\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface MenuRootState {\n  /** Optimistic open state. Content rendered from it must not suspend. */\n  readonly open: boolean;\n  /** An open or close of this Root is in flight (its `openChangeAction`). */\n  readonly pending: boolean;\n  /** This Root is a submenu (rendered inside a `Menu.Popup`). */\n  readonly submenu: boolean;\n}\n\nexport interface MenuRootProps {\n  /** Controlled open state. `undefined` means uncontrolled. */\n  open?: boolean;\n  /** Initial open state when uncontrolled. Opens after hydration. */\n  defaultOpen?: boolean;\n  /**\n   * Awaited for `true` (the menu opens when it resolves and the items have rendered) and for the\n   * closes the user asks a part for (Trigger toggle, an item's activation, ArrowLeft in a\n   * submenu); a notification for dismissals (Escape, a click outside, Tab, the parent menu\n   * closing). May be a Server Function. A `setState` placed after your own `await` needs\n   * `startTransition` (React limitation).\n   */\n  openChangeAction?: ChangeAction<boolean, MenuOpenChangeDetails>;\n  /** Arrow keys wrap from the last item to the first and back. Default `true`. */\n  loop?: boolean;\n  /** Submenu only: milliseconds from hovering the SubmenuTrigger to the open. Default 100. */\n  delay?: number;\n  /**\n   * Submenu only: milliseconds from the pointer leaving the SubmenuTrigger and the submenu to the\n   * close. Default 150.\n   */\n  closeDelay?: number;\n  children?: StateValue<ReactNode, MenuRootState>;\n}\n\n/**\n * Owns the ids, the open state and the context of one menu level. Renders no DOM. A `Menu.Root`\n * rendered inside a `Menu.Popup` is a **submenu**: its Trigger is a `Menu.SubmenuTrigger` (an\n * item of the parent menu) and its Popup opens beside that item.\n *\n * A menu is always in library mode (design/components/menu.md 2.1): opening and the closes a\n * part asks for are transitions (pending Trigger, items render from committed state,\n * `showPopover()` / `hidePopover()` once the change has committed); dismissals are the\n * browser's and `openChangeAction(false)` is a notification.\n */\nconst DEFAULT_FOCUS: MenuOpenFocus = { cause: \"first\", pointer: false };\n\nexport function MenuRoot({\n  open,\n  defaultOpen,\n  openChangeAction,\n  loop = true,\n  delay,\n  closeDelay,\n  children,\n}: MenuRootProps) {\n  const parent = use(MenuContext);\n  const list = use(MenuListContext);\n  // A Root inside a Popup's content is a submenu (design 1); the enclosing menu is the Popup's.\n  const parentMenu = list !== null ? list.menu : null;\n  const submenu = parentMenu !== null;\n\n  useDevWarning(\n    !submenu && (delay !== undefined || closeDelay !== undefined),\n    \"Menu.Root: `delay` and `closeDelay` only apply to a submenu (a Menu.Root inside a \" +\n      \"Menu.Popup); a top-level menu does not open on hover.\",\n  );\n  useDevWarning(\n    parent !== null && !submenu,\n    \"Menu.Root: rendered inside another Menu.Root but outside its Menu.Popup. A submenu's Root \" +\n      \"goes inside the parent's Menu.Popup.\",\n  );\n\n  const timers = useDelayedPair();\n  // The cause recorded by the part about to dispatch an open, and the cause of the open being\n  // shown (design 14, \"Open cause\").\n  const nextCause = useRef<MenuOpenFocus | null>(null);\n  const openCause = useRef<MenuOpenFocus | null>(null);\n\n  const popover = usePopoverRoot<MenuOpenChangeDetails>({\n    component: \"menu\",\n    part: \"Menu.Root\",\n    mode: \"library\",\n    open,\n    defaultOpen,\n    openChangeAction,\n    onDispatch: (next) => {\n      // Any dispatch cancels hover intent (walkthrough 9).\n      timers.cancel();\n      if (next) openCause.current = nextCause.current ?? DEFAULT_FOCUS;\n      nextCause.current = null;\n    },\n  });\n\n  const setOpenCause = useCallback((cause: MenuOpenFocus[\"cause\"], pointer = false) => {\n    nextCause.current = { cause, pointer };\n  }, []);\n  const takeOpenCause = useCallback(() => {\n    const cause = openCause.current ?? DEFAULT_FOCUS;\n    openCause.current = null;\n    return cause;\n  }, []);\n\n  const resolvedDelay = delay ?? 100;\n  const resolvedCloseDelay = closeDelay ?? 150;\n  // `popover` is memoised by `usePopoverRoot` (#48) and the other members are stable, so this\n  // changes only with the open state, pending and the props listed below.\n  const value = useMemo<MenuContextValue>(() => {\n    const self: MenuContextValue = {\n      popover,\n      submenu,\n      // The top-level menu: this one, or the parent's root (design 2.2).\n      get root() {\n        return parentMenu?.root ?? self;\n      },\n      parent: parentMenu,\n      loop,\n      delay: resolvedDelay,\n      closeDelay: resolvedCloseDelay,\n      triggerId: `${popover.ids.popup}-trigger`,\n      setOpenCause,\n      takeOpenCause,\n      timers,\n    };\n    return self;\n  }, [\n    popover,\n    submenu,\n    parentMenu,\n    loop,\n    resolvedDelay,\n    resolvedCloseDelay,\n    setOpenCause,\n    takeOpenCause,\n    timers,\n  ]);\n\n  const state: MenuRootState = {\n    open: popover.optimistic,\n    pending: popover.pending,\n    submenu,\n  };\n\n  return <MenuContext value={value}>{resolveStateValue(children, state)}</MenuContext>;\n}\n\nMenuRoot.displayName = \"MenuRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqEA,MAAM,gBAA+B;CAAE,OAAO;CAAS,SAAS;AAAM;AAEtE,SAAgB,SAAS,EACvB,MACA,aACA,kBACA,OAAO,MACP,OACA,YACA,YACgB;CAChB,MAAM,SAAS,IAAI,WAAW;CAC9B,MAAM,OAAO,IAAI,eAAe;CAEhC,MAAM,aAAa,SAAS,OAAO,KAAK,OAAO;CAC/C,MAAM,UAAU,eAAe;CAE/B,cACE,CAAC,YAAY,UAAU,KAAA,KAAa,eAAe,KAAA,IACnD,yIAEF;CACA,cACE,WAAW,QAAQ,CAAC,SACpB,gIAEF;CAEA,MAAM,SAAS,eAAe;CAG9B,MAAM,YAAY,OAA6B,IAAI;CACnD,MAAM,YAAY,OAA6B,IAAI;CAEnD,MAAM,UAAU,eAAsC;EACpD,WAAW;EACX,MAAM;EACN,MAAM;EACN;EACA;EACA;EACA,aAAa,SAAS;GAEpB,OAAO,OAAO;GACd,IAAI,MAAM,UAAU,UAAU,UAAU,WAAW;GACnD,UAAU,UAAU;EACtB;CACF,CAAC;CAED,MAAM,eAAe,aAAa,OAA+B,UAAU,UAAU;EACnF,UAAU,UAAU;GAAE;GAAO;EAAQ;CACvC,GAAG,CAAC,CAAC;CACL,MAAM,gBAAgB,kBAAkB;EACtC,MAAM,QAAQ,UAAU,WAAW;EACnC,UAAU,UAAU;EACpB,OAAO;CACT,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,SAAS;CAC/B,MAAM,qBAAqB,cAAc;CAGzC,MAAM,QAAQ,cAAgC;EAC5C,MAAM,OAAyB;GAC7B;GACA;GAEA,IAAI,OAAO;IACT,OAAO,YAAY,QAAQ;GAC7B;GACA,QAAQ;GACR;GACA,OAAO;GACP,YAAY;GACZ,WAAW,GAAG,QAAQ,IAAI,MAAM;GAChC;GACA;GACA;EACF;EACA,OAAO;CACT,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAuB;EAC3B,MAAM,QAAQ;EACd,SAAS,QAAQ;EACjB;CACF;CAEA,OAAO,oBAAC,aAAD;EAAoB;EAAQ,UAAA,kBAAkB,UAAU,KAAK;CAAe,CAAA;AACrF;AAEA,SAAS,cAAc"}

package/dist/radio-group/radio-group-root.d.mts

@@ -76,7 +76,9 @@ export interface RadioGroupRootProps extends Omit<ComponentPropsWithRef<"fieldse
  * Carries `data-pending` while `valueChangeAction` is in flight.
  *
  * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,
- * `data-disabled`.
+ * `data-disabled`; inside a `Field.Root` also `aria-labelledby` (→ `Field.Label`, token-merged),
+ * `aria-describedby` (token-merged), `aria-invalid` and `data-invalid`, and `name` / `required` /
+ * `disabled` default from the Field.
  *
  * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial
  * hydration of a group (a boundary between Root and Items that stays dehydrated while the user
@@ -84,7 +86,7 @@ export interface RadioGroupRootProps extends Omit<ComponentPropsWithRef<"fieldse
  * still dehydrated makes react-dom throw "Mixing React and non-React radio inputs with the same
  * `name` is not supported". Development warns when Items hydrate after their Root.
  */
-export declare function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required, disabled, className, style, children, render, ...rest }: RadioGroupRootProps): import("react").JSX.Element;
+export declare function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required: requiredProp, disabled: disabledProp, className, style, children, render, ...rest }: RadioGroupRootProps): import("react").JSX.Element;
 export declare namespace RadioGroupRoot {
   var displayName: string;
 }

package/dist/radio-group/radio-group-root.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group-root.d.mts","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"mappings":";;;;iBAsBiB,qCAAqC;;;;;;;WAO3C,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,4BAA4B,KAC3C;;;;;;;;;;;EAoBA;;;;;EAKA;;;;;;;;;;;;EAYA,oBAAoB,4BAA4B;;;;;;EAMhD;;EAEA;;;;;;EAMA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;;;;;;;;;;;wBAkCzC,iBACd,OACA,cACA,mBACA,MAAM,UACN,MACA,UACA,UACA,WACA,OACA,UACA,WACG,QACF,sCAAmB,IAAA;yBAbN"}
+{"version":3,"file":"radio-group-root.d.mts","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"mappings":";;;;iBA2BiB,qCAAqC;;;;;;;WAO3C,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,4BAA4B,KAC3C;;;;;;;;;;;EAoBA;;;;;EAKA;;;;;;;;;;;;EAYA,oBAAoB,4BAA4B;;;;;;EAMhD;;EAEA;;;;;;EAMA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;;;;;;;;;;;;;wBAoCzC,iBACd,OACA,cACA,mBACA,MAAM,UACN,MACA,UAAU,cACV,UAAU,cACV,WACA,OACA,UACA,WACG,QACF,sCAAmB,IAAA;yBAbN"}

package/dist/radio-group/radio-group-root.mjs

@@ -4,9 +4,10 @@ import { dataAttr } from "../internal/data-attr.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { RadioGroupContext } from "./radio-group-context.mjs";
 import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";
-import { useCallback, useId, useLayoutEffect, useRef } from "react";
+import { useCallback, useId, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/radio-group/radio-group-root.tsx
 const isDev = process.env.NODE_ENV !== "production";
@@ -26,7 +27,9 @@ function readGroup(fieldset, name, prop) {
 * Carries `data-pending` while `valueChangeAction` is in flight.
 *
 * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,
-* `data-disabled`.
+* `data-disabled`; inside a `Field.Root` also `aria-labelledby` (→ `Field.Label`, token-merged),
+* `aria-describedby` (token-merged), `aria-invalid` and `data-invalid`, and `name` / `required` /
+* `disabled` default from the Field.
 *
 * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial
 * hydration of a group (a boundary between Root and Items that stays dehydrated while the user
@@ -34,9 +37,18 @@ function readGroup(fieldset, name, prop) {
 * still dehydrated makes react-dom throw "Mixing React and non-React radio inputs with the same
 * `name` is not supported". Development warns when Items hydrate after their Root.
 */
-function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required = false, disabled = false, className, style, children, render, ...rest }) {
+function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp, form, required: requiredProp, disabled: disabledProp, className, style, children, render, ...rest }) {
+	const field = useFieldControl({
+		labelable: false,
+		name: nameProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		component: "RadioGroup.Root"
+	});
+	const required = field.required;
+	const disabled = field.disabled;
 	const fallbackName = useId();
-	const name = nameProp ?? fallbackName;
+	const name = field.name ?? fallbackName;
 	const fieldsetRef = useRef(null);
 	const warnedElement = useRef(false);
 	const { optimistic, pending, dispatch, latestInFlight } = useControllableAction({
@@ -50,6 +62,7 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 			prop: "value"
 		}
 	});
+	useFieldValueChange(optimistic);
 	/** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */
 	const base = () => {
 		const inFlight = latestInFlight();
@@ -89,20 +102,32 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 			fieldsetRef.current = null;
 		};
 	}, []);
-	const context = {
+	const rootRef = useMergedRef(libraryRef, field.ref);
+	const contextDefault = value === void 0 ? defaultValue ?? null : void 0;
+	const context = useMemo(() => ({
 		name,
 		form,
 		required,
 		optimistic,
 		pending,
 		disabled,
-		defaultValue: value === void 0 ? defaultValue ?? null : void 0,
+		defaultValue: contextDefault,
 		onItemMounted: onItemMountedWithCheck,
 		select: (next, event) => {
 			if (next === optimistic) return;
 			dispatch(next, createActionDetails(event, { reason: "activate" }));
 		}
-	};
+	}), [
+		name,
+		form,
+		required,
+		optimistic,
+		pending,
+		disabled,
+		contextDefault,
+		onItemMountedWithCheck,
+		dispatch
+	]);
 	const element = useRender({
 		defaultElement: "fieldset",
 		render,
@@ -116,6 +141,7 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 		children,
 		props: rest,
 		libraryProps: {
+			...field.attributes,
 			role: "radiogroup",
 			"aria-required": required ? "true" : void 0,
 			disabled,
@@ -123,7 +149,7 @@ function RadioGroupRoot({ value, defaultValue, valueChangeAction, name: nameProp
 			"data-pending": dataAttr(pending),
 			"data-disabled": dataAttr(disabled)
 		},
-		ref: libraryRef
+		ref: rootRef
 	});
 	return /* @__PURE__ */ jsx(RadioGroupContext, {
 		value: context,

package/dist/radio-group/radio-group-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group-root.mjs","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useId, useLayoutEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeGroupReconciliation } from \"../internal/use-native-group-reconciliation.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { RadioGroupContext } from \"./radio-group-context.js\";\nimport type { RadioGroupContextValue } from \"./radio-group-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface RadioGroupValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user checked a radio (click, Space, label click, or an arrow key, all of\n   * which arrive as a native `click`). `\"platform\"`: the browser changed the checked radio\n   * itself: a form reset (`details.event` is the `reset` event), or a click before hydration /\n   * Firefox form-state restoration found at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface RadioGroupRootState {\n  /** Optimistic checked value, or `null`. Content rendered from it must not suspend. */\n  readonly value: string | null;\n  /** An action dispatched through this group is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface RadioGroupRootProps extends Omit<\n  ComponentPropsWithRef<\"fieldset\">,\n  | \"className\"\n  | \"style\"\n  | \"children\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n  | \"name\"\n  | \"disabled\"\n  | \"form\"\n> {\n  /**\n   * Controlled checked value. `null` checks nothing; `undefined` means uncontrolled.\n   *\n   * A form reset returns each radio to the `checked` it had when *that radio* mounted (React sets\n   * `defaultChecked` once, from the initial `checked`). An Item added on the client while `value`\n   * equals its value therefore also gets `defaultChecked`, so two radios may carry it and the\n   * reset target is not necessarily the group's mount-time value. The reset is offered to\n   * `valueChangeAction` as usual; for a stable target remount the group with a `key` or use\n   * `defaultValue`, whose latest value every Item mirrors.\n   */\n  value?: string | null;\n  /**\n   * Initial value in uncontrolled mode. Defaults to `null` (nothing checked). Also the value a\n   * form reset returns to: the latest prop value is mirrored into the radios' `defaultChecked`.\n   */\n  defaultValue?: string | null;\n  /**\n   * Runs inside the Root's transition whenever the checked radio changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * `next` is a string for every user interaction. It is `null` only with\n   * `details.reason === \"platform\"`, when a form reset returned the group to \"nothing checked\".\n   * Every arrow key press dispatches; the latest dispatch wins. A `setState` placed after your\n   * own `await` is not a Transition update; wrap it in `startTransition` (React limitation).\n   * `details.event.preventDefault()` is not a veto; use controlled mode to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string | null, RadioGroupValueChangeDetails>;\n  /**\n   * The `name` shared by every radio in the group (form data key). Defaults to a `useId()` value;\n   * pass a real name when the group is inside a `<form>` you submit. Must be unique within the\n   * form: react-dom throws if a non-React radio shares it.\n   */\n  name?: string;\n  /** The `form` attribute, applied to the fieldset and to every radio. */\n  form?: string;\n  /**\n   * Marks every radio `required`, which makes the group required (one checked radio satisfies it),\n   * and renders `aria-required=\"true\"` on the fieldset so the radiogroup itself is exposed as\n   * required.\n   */\n  required?: boolean;\n  /** Renders `<fieldset disabled>`: every radio is disabled, unfocusable and skipped by arrows. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, RadioGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, RadioGroupRootState>;\n  children?: StateValue<ReactNode, RadioGroupRootState>;\n  /** Replace the rendered element. Must keep a `<fieldset>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>;\n}\n\n/**\n * Value of the group's checked radio as the DOM shows it (`prop: \"checked\"`) or as a form reset\n * leaves it (`prop: \"defaultChecked\"`), or `null`. Only radios of this group's `name` count, so a\n * nested group is ignored.\n */\nfunction readGroup(\n  fieldset: HTMLFieldSetElement | null,\n  name: string,\n  prop: \"checked\" | \"defaultChecked\",\n): string | null {\n  if (fieldset === null) return null;\n  for (const radio of fieldset.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]')) {\n    if (radio.name === name && radio[prop]) return radio.value;\n  }\n  return null;\n}\n\n/**\n * `<fieldset role=\"radiogroup\">` that owns the group's state, the transition, the shared `name`,\n * the form-reset listener and the mount reconciliation (design/components/radio-group.md 13.3).\n * Carries `data-pending` while `valueChangeAction` is in flight.\n *\n * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,\n * `data-disabled`.\n *\n * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial\n * hydration of a group (a boundary between Root and Items that stays dehydrated while the user\n * interacts) is not supported by React: clicking a hydrated radio while same-`name` siblings are\n * still dehydrated makes react-dom throw \"Mixing React and non-React radio inputs with the same\n * `name` is not supported\". Development warns when Items hydrate after their Root.\n */\nexport function RadioGroupRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  name: nameProp,\n  form,\n  required = false,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: RadioGroupRootProps) {\n  const fallbackName = useId();\n  const name = nameProp ?? fallbackName;\n  const fieldsetRef = useRef<HTMLFieldSetElement | null>(null);\n  const warnedElement = useRef(false);\n\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    string | null,\n    RadioGroupValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"radio-group\"),\n    warn: { component: \"RadioGroup.Root\", prop: \"value\" },\n  });\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: an unchecked group\n  // is the HTML default (design decision 2).\n\n  /** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */\n  const base = (): string | null => {\n    const inFlight = latestInFlight();\n    // Not `?.next ?? optimistic`: an in-flight reset to `null` is a real intent.\n    return inFlight === null ? optimistic : inFlight.next;\n  };\n\n  // The residual browser paths (design section 5): one dispatch per group, from here. Items that\n  // mount after the Root report through `onItemMounted` so the group is reconciled again.\n  const { onItemMounted } = useNativeGroupReconciliation<string | null>({\n    element: fieldsetRef,\n    readCurrent: () => readGroup(fieldsetRef.current, name, \"checked\"),\n    readDefault: () => readGroup(fieldsetRef.current, name, \"defaultChecked\"),\n    base,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  // Dev-only partial-hydration detection. The radios present in the fieldset when the Root\n  // mounts are either mounted in the Root's commit or still dehydrated server HTML. An Item that\n  // mounts later on one of those elements hydrated after the Root (an Item created on the client\n  // gets a new element). Items of the Root's own commit run their mount effect before this one,\n  // while the snapshot is still `null`; StrictMode's re-run finds it reset by the cleanup.\n  const serverRadios = useRef<ReadonlySet<Element> | null>(null);\n  const warnedPartialHydration = useRef(false);\n  useLayoutEffect(() => {\n    if (!isDev) return;\n    const el = fieldsetRef.current;\n    serverRadios.current = new Set(el === null ? [] : el.querySelectorAll('input[type=\"radio\"]'));\n    return () => {\n      serverRadios.current = null;\n    };\n  }, []);\n  const onItemMountedWithCheck = useCallback(\n    (element?: Element | null) => {\n      if (\n        isDev &&\n        !warnedPartialHydration.current &&\n        element != null &&\n        serverRadios.current?.has(element) === true\n      ) {\n        warnedPartialHydration.current = true;\n        console.error(\n          `RadioGroup.Item: an Item hydrated after its RadioGroup.Root (a Suspense boundary ` +\n            `between them). Partial hydration of a radio group is not supported by React: ` +\n            `clicking a hydrated radio while same-name radios are still dehydrated makes ` +\n            `react-dom throw \"Mixing React and non-React radio inputs with the same name is not ` +\n            `supported\". Keep every Item in the same Suspense boundary as its Root.`,\n        );\n      }\n      onItemMounted(element);\n    },\n    [onItemMounted],\n  );\n\n  const libraryRef = useCallback((el: HTMLFieldSetElement) => {\n    fieldsetRef.current = el;\n    if (isDev && !warnedElement.current && el.tagName !== \"FIELDSET\") {\n      warnedElement.current = true;\n      console.error(\n        `RadioGroup.Root: expected to render a <fieldset> element but got ` +\n          `<${el.tagName.toLowerCase()}>. The platform semantics (legend naming, disabled ` +\n          `inheritance, form reset) need a real <fieldset>.`,\n      );\n    }\n    return () => {\n      fieldsetRef.current = null;\n    };\n  }, []);\n\n  const context: RadioGroupContextValue = {\n    name,\n    form,\n    required,\n    optimistic,\n    pending,\n    disabled,\n    defaultValue: value === undefined ? (defaultValue ?? null) : undefined,\n    onItemMounted: onItemMountedWithCheck,\n    select: (next, event) => {\n      // No-op rule against the optimistic value (conventions 2.3 item 7, design 4.2).\n      if (next === optimistic) return;\n      dispatch(next, createActionDetails(event, { reason: \"activate\" }));\n    },\n  };\n\n  const state: RadioGroupRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>({\n    defaultElement: \"fieldset\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"radiogroup\",\n      \"aria-required\": required ? \"true\" : undefined,\n      disabled,\n      form,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: libraryRef,\n  });\n\n  return <RadioGroupContext value={context}>{element}</RadioGroupContext>;\n}\n\nRadioGroupRoot.displayName = \"RadioGroupRoot\";\n"],"mappings":";;;;;;;;;;;AAmBA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;AAyFvC,SAAS,UACP,UACA,MACA,MACe;CACf,IAAI,aAAa,MAAM,OAAO;CAC9B,KAAK,MAAM,SAAS,SAAS,iBAAmC,uBAAqB,GACnF,IAAI,MAAM,SAAS,QAAQ,MAAM,OAAO,OAAO,MAAM;CAEvD,OAAO;AACT;;;;;;;;;;;;;;;AAgBA,SAAgB,eAAe,EAC7B,OACA,cACA,mBACA,MAAM,UACN,MACA,WAAW,OACX,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,eAAe,MAAM;CAC3B,MAAM,OAAO,YAAY;CACzB,MAAM,cAAc,OAAmC,IAAI;CAC3D,MAAM,gBAAgB,OAAO,KAAK;CAElC,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,aAAa;EACpD,MAAM;GAAE,WAAW;GAAmB,MAAM;EAAQ;CACtD,CAAC;;CAKD,MAAM,aAA4B;EAChC,MAAM,WAAW,eAAe;EAEhC,OAAO,aAAa,OAAO,aAAa,SAAS;CACnD;CAIA,MAAM,EAAE,kBAAkB,6BAA4C;EACpE,SAAS;EACT,mBAAmB,UAAU,YAAY,SAAS,MAAM,SAAS;EACjE,mBAAmB,UAAU,YAAY,SAAS,MAAM,gBAAgB;EACxE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAOD,MAAM,eAAe,OAAoC,IAAI;CAC7D,MAAM,yBAAyB,OAAO,KAAK;CAC3C,sBAAsB;EACpB,IAAI,CAAC,OAAO;EACZ,MAAM,KAAK,YAAY;EACvB,aAAa,UAAU,IAAI,IAAI,OAAO,OAAO,CAAC,IAAI,GAAG,iBAAiB,uBAAqB,CAAC;EAC5F,aAAa;GACX,aAAa,UAAU;EACzB;CACF,GAAG,CAAC,CAAC;CACL,MAAM,yBAAyB,aAC5B,YAA6B;EAC5B,IACE,SACA,CAAC,uBAAuB,WACxB,WAAW,QACX,aAAa,SAAS,IAAI,OAAO,MAAM,MACvC;GACA,uBAAuB,UAAU;GACjC,QAAQ,MACN,uYAKF;EACF;EACA,cAAc,OAAO;CACvB,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,aAAa,aAAa,OAA4B;EAC1D,YAAY,UAAU;EACtB,IAAI,SAAS,CAAC,cAAc,WAAW,GAAG,YAAY,YAAY;GAChE,cAAc,UAAU;GACxB,QAAQ,MACN,qEACM,GAAG,QAAQ,YAAY,EAAE,oGAEjC;EACF;EACA,aAAa;GACX,YAAY,UAAU;EACxB;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,UAAkC;EACtC;EACA;EACA;EACA;EACA;EACA;EACA,cAAc,UAAU,KAAA,IAAa,gBAAgB,OAAQ,KAAA;EAC7D,eAAe;EACf,SAAS,MAAM,UAAU;GAEvB,IAAI,SAAS,YAAY;GACzB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;EACnE;CACF;CAIA,MAAM,UAAU,UAAkE;EAChF,gBAAgB;EAChB;EACA,OAAA;GALmC,OAAO;GAAY;GAAS;EAK3D;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,MAAM;GACN,iBAAiB,WAAW,SAAS,KAAA;GACrC;GACA;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;EACpC;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,mBAAD;EAAmB,OAAO;EAAU,UAAA;CAA2B,CAAA;AACxE;AAEA,eAAe,cAAc"}
+{"version":3,"file":"radio-group-root.mjs","names":[],"sources":["../../src/radio-group/radio-group-root.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback, useId, useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeGroupReconciliation } from \"../internal/use-native-group-reconciliation.js\";\nimport {\n  useFieldControl,\n  useFieldValueChange,\n  useMergedRef,\n} from \"../internal/use-field-control.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { RadioGroupContext } from \"./radio-group-context.js\";\nimport type { RadioGroupContextValue } from \"./radio-group-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface RadioGroupValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user checked a radio (click, Space, label click, or an arrow key, all of\n   * which arrive as a native `click`). `\"platform\"`: the browser changed the checked radio\n   * itself: a form reset (`details.event` is the `reset` event), or a click before hydration /\n   * Firefox form-state restoration found at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface RadioGroupRootState {\n  /** Optimistic checked value, or `null`. Content rendered from it must not suspend. */\n  readonly value: string | null;\n  /** An action dispatched through this group is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface RadioGroupRootProps extends Omit<\n  ComponentPropsWithRef<\"fieldset\">,\n  | \"className\"\n  | \"style\"\n  | \"children\"\n  | \"defaultValue\"\n  | \"defaultChecked\"\n  | \"name\"\n  | \"disabled\"\n  | \"form\"\n> {\n  /**\n   * Controlled checked value. `null` checks nothing; `undefined` means uncontrolled.\n   *\n   * A form reset returns each radio to the `checked` it had when *that radio* mounted (React sets\n   * `defaultChecked` once, from the initial `checked`). An Item added on the client while `value`\n   * equals its value therefore also gets `defaultChecked`, so two radios may carry it and the\n   * reset target is not necessarily the group's mount-time value. The reset is offered to\n   * `valueChangeAction` as usual; for a stable target remount the group with a `key` or use\n   * `defaultValue`, whose latest value every Item mirrors.\n   */\n  value?: string | null;\n  /**\n   * Initial value in uncontrolled mode. Defaults to `null` (nothing checked). Also the value a\n   * form reset returns to: the latest prop value is mirrored into the radios' `defaultChecked`.\n   */\n  defaultValue?: string | null;\n  /**\n   * Runs inside the Root's transition whenever the checked radio changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * `next` is a string for every user interaction. It is `null` only with\n   * `details.reason === \"platform\"`, when a form reset returned the group to \"nothing checked\".\n   * Every arrow key press dispatches; the latest dispatch wins. A `setState` placed after your\n   * own `await` is not a Transition update; wrap it in `startTransition` (React limitation).\n   * `details.event.preventDefault()` is not a veto; use controlled mode to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string | null, RadioGroupValueChangeDetails>;\n  /**\n   * The `name` shared by every radio in the group (form data key). Defaults to a `useId()` value;\n   * pass a real name when the group is inside a `<form>` you submit. Must be unique within the\n   * form: react-dom throws if a non-React radio shares it.\n   */\n  name?: string;\n  /** The `form` attribute, applied to the fieldset and to every radio. */\n  form?: string;\n  /**\n   * Marks every radio `required`, which makes the group required (one checked radio satisfies it),\n   * and renders `aria-required=\"true\"` on the fieldset so the radiogroup itself is exposed as\n   * required.\n   */\n  required?: boolean;\n  /** Renders `<fieldset disabled>`: every radio is disabled, unfocusable and skipped by arrows. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, RadioGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, RadioGroupRootState>;\n  children?: StateValue<ReactNode, RadioGroupRootState>;\n  /** Replace the rendered element. Must keep a `<fieldset>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>;\n}\n\n/**\n * Value of the group's checked radio as the DOM shows it (`prop: \"checked\"`) or as a form reset\n * leaves it (`prop: \"defaultChecked\"`), or `null`. Only radios of this group's `name` count, so a\n * nested group is ignored.\n */\nfunction readGroup(\n  fieldset: HTMLFieldSetElement | null,\n  name: string,\n  prop: \"checked\" | \"defaultChecked\",\n): string | null {\n  if (fieldset === null) return null;\n  for (const radio of fieldset.querySelectorAll<HTMLInputElement>('input[type=\"radio\"]')) {\n    if (radio.name === name && radio[prop]) return radio.value;\n  }\n  return null;\n}\n\n/**\n * `<fieldset role=\"radiogroup\">` that owns the group's state, the transition, the shared `name`,\n * the form-reset listener and the mount reconciliation (design/components/radio-group.md 13.3).\n * Carries `data-pending` while `valueChangeAction` is in flight.\n *\n * Owned keys (conventions 1.2): `role`, `aria-required`, `disabled`, `form`, `data-pending`,\n * `data-disabled`; inside a `Field.Root` also `aria-labelledby` (→ `Field.Label`, token-merged),\n * `aria-describedby` (token-merged), `aria-invalid` and `data-invalid`, and `name` / `required` /\n * `disabled` default from the Field.\n *\n * Keep every Item in the same Suspense boundary as its Root when server rendering. Partial\n * hydration of a group (a boundary between Root and Items that stays dehydrated while the user\n * interacts) is not supported by React: clicking a hydrated radio while same-`name` siblings are\n * still dehydrated makes react-dom throw \"Mixing React and non-React radio inputs with the same\n * `name` is not supported\". Development warns when Items hydrate after their Root.\n */\nexport function RadioGroupRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  name: nameProp,\n  form,\n  required: requiredProp,\n  disabled: disabledProp,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: RadioGroupRootProps) {\n  // Inside a Field.Root (design/components/field-form.md 7.2) the fieldset is the Field's group\n  // control: `aria-labelledby` → `Field.Label`, the ARIA wiring, and `name` / `required` /\n  // `disabled` defaulting from the Field.\n  const field = useFieldControl({\n    labelable: false,\n    name: nameProp,\n    disabled: disabledProp,\n    required: requiredProp,\n    component: \"RadioGroup.Root\",\n  });\n  const required = field.required;\n  const disabled = field.disabled;\n  const fallbackName = useId();\n  const name = field.name ?? fallbackName;\n  const fieldsetRef = useRef<HTMLFieldSetElement | null>(null);\n  const warnedElement = useRef(false);\n\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    string | null,\n    RadioGroupValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"radio-group\"),\n    warn: { component: \"RadioGroup.Root\", prop: \"value\" },\n  });\n  // Inside a Field: a value React writes with no event (a rejected action rolling back, a\n  // controlled change) re-reads validity and `validate` after the commit.\n  useFieldValueChange(optimistic);\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: an unchecked group\n  // is the HTML default (design decision 2).\n\n  /** What the user intends: the latest in-flight dispatch, else optimistic (conventions 3.8 rule 1). */\n  const base = (): string | null => {\n    const inFlight = latestInFlight();\n    // Not `?.next ?? optimistic`: an in-flight reset to `null` is a real intent.\n    return inFlight === null ? optimistic : inFlight.next;\n  };\n\n  // The residual browser paths (design section 5): one dispatch per group, from here. Items that\n  // mount after the Root report through `onItemMounted` so the group is reconciled again.\n  const { onItemMounted } = useNativeGroupReconciliation<string | null>({\n    element: fieldsetRef,\n    readCurrent: () => readGroup(fieldsetRef.current, name, \"checked\"),\n    readDefault: () => readGroup(fieldsetRef.current, name, \"defaultChecked\"),\n    base,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  // Dev-only partial-hydration detection. The radios present in the fieldset when the Root\n  // mounts are either mounted in the Root's commit or still dehydrated server HTML. An Item that\n  // mounts later on one of those elements hydrated after the Root (an Item created on the client\n  // gets a new element). Items of the Root's own commit run their mount effect before this one,\n  // while the snapshot is still `null`; StrictMode's re-run finds it reset by the cleanup.\n  const serverRadios = useRef<ReadonlySet<Element> | null>(null);\n  const warnedPartialHydration = useRef(false);\n  useLayoutEffect(() => {\n    if (!isDev) return;\n    const el = fieldsetRef.current;\n    serverRadios.current = new Set(el === null ? [] : el.querySelectorAll('input[type=\"radio\"]'));\n    return () => {\n      serverRadios.current = null;\n    };\n  }, []);\n  const onItemMountedWithCheck = useCallback(\n    (element?: Element | null) => {\n      if (\n        isDev &&\n        !warnedPartialHydration.current &&\n        element != null &&\n        serverRadios.current?.has(element) === true\n      ) {\n        warnedPartialHydration.current = true;\n        console.error(\n          `RadioGroup.Item: an Item hydrated after its RadioGroup.Root (a Suspense boundary ` +\n            `between them). Partial hydration of a radio group is not supported by React: ` +\n            `clicking a hydrated radio while same-name radios are still dehydrated makes ` +\n            `react-dom throw \"Mixing React and non-React radio inputs with the same name is not ` +\n            `supported\". Keep every Item in the same Suspense boundary as its Root.`,\n        );\n      }\n      onItemMounted(element);\n    },\n    [onItemMounted],\n  );\n\n  const libraryRef = useCallback((el: HTMLFieldSetElement) => {\n    fieldsetRef.current = el;\n    if (isDev && !warnedElement.current && el.tagName !== \"FIELDSET\") {\n      warnedElement.current = true;\n      console.error(\n        `RadioGroup.Root: expected to render a <fieldset> element but got ` +\n          `<${el.tagName.toLowerCase()}>. The platform semantics (legend naming, disabled ` +\n          `inheritance, form reset) need a real <fieldset>.`,\n      );\n    }\n    return () => {\n      fieldsetRef.current = null;\n    };\n  }, []);\n  const rootRef = useMergedRef<HTMLFieldSetElement>(libraryRef, field.ref);\n\n  // Memoised (#48): `dispatch` and `onItemMountedWithCheck` are stable, so this changes only with\n  // the state and the props below.\n  const contextDefault = value === undefined ? (defaultValue ?? null) : undefined;\n  const context = useMemo<RadioGroupContextValue>(\n    () => ({\n      name,\n      form,\n      required,\n      optimistic,\n      pending,\n      disabled,\n      defaultValue: contextDefault,\n      onItemMounted: onItemMountedWithCheck,\n      select: (next, event) => {\n        // No-op rule against the optimistic value (conventions 2.3 item 7, design 4.2).\n        if (next === optimistic) return;\n        dispatch(next, createActionDetails(event, { reason: \"activate\" }));\n      },\n    }),\n    [\n      name,\n      form,\n      required,\n      optimistic,\n      pending,\n      disabled,\n      contextDefault,\n      onItemMountedWithCheck,\n      dispatch,\n    ],\n  );\n\n  const state: RadioGroupRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"fieldset\">, RadioGroupRootState>({\n    defaultElement: \"fieldset\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...field.attributes,\n      role: \"radiogroup\",\n      \"aria-required\": required ? \"true\" : undefined,\n      disabled,\n      form,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n    },\n    ref: rootRef,\n  });\n\n  return <RadioGroupContext value={context}>{element}</RadioGroupContext>;\n}\n\nRadioGroupRoot.displayName = \"RadioGroupRoot\";\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;;;;;AAyFvC,SAAS,UACP,UACA,MACA,MACe;CACf,IAAI,aAAa,MAAM,OAAO;CAC9B,KAAK,MAAM,SAAS,SAAS,iBAAmC,uBAAqB,GACnF,IAAI,MAAM,SAAS,QAAQ,MAAM,OAAO,OAAO,MAAM;CAEvD,OAAO;AACT;;;;;;;;;;;;;;;;;AAkBA,SAAgB,eAAe,EAC7B,OACA,cACA,mBACA,MAAM,UACN,MACA,UAAU,cACV,UAAU,cACV,WACA,OACA,UACA,QACA,GAAG,QACmB;CAItB,MAAM,QAAQ,gBAAgB;EAC5B,WAAW;EACX,MAAM;EACN,UAAU;EACV,UAAU;EACV,WAAW;CACb,CAAC;CACD,MAAM,WAAW,MAAM;CACvB,MAAM,WAAW,MAAM;CACvB,MAAM,eAAe,MAAM;CAC3B,MAAM,OAAO,MAAM,QAAQ;CAC3B,MAAM,cAAc,OAAmC,IAAI;CAC3D,MAAM,gBAAgB,OAAO,KAAK;CAElC,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,aAAa;EACpD,MAAM;GAAE,WAAW;GAAmB,MAAM;EAAQ;CACtD,CAAC;CAGD,oBAAoB,UAAU;;CAK9B,MAAM,aAA4B;EAChC,MAAM,WAAW,eAAe;EAEhC,OAAO,aAAa,OAAO,aAAa,SAAS;CACnD;CAIA,MAAM,EAAE,kBAAkB,6BAA4C;EACpE,SAAS;EACT,mBAAmB,UAAU,YAAY,SAAS,MAAM,SAAS;EACjE,mBAAmB,UAAU,YAAY,SAAS,MAAM,gBAAgB;EACxE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAOD,MAAM,eAAe,OAAoC,IAAI;CAC7D,MAAM,yBAAyB,OAAO,KAAK;CAC3C,sBAAsB;EACpB,IAAI,CAAC,OAAO;EACZ,MAAM,KAAK,YAAY;EACvB,aAAa,UAAU,IAAI,IAAI,OAAO,OAAO,CAAC,IAAI,GAAG,iBAAiB,uBAAqB,CAAC;EAC5F,aAAa;GACX,aAAa,UAAU;EACzB;CACF,GAAG,CAAC,CAAC;CACL,MAAM,yBAAyB,aAC5B,YAA6B;EAC5B,IACE,SACA,CAAC,uBAAuB,WACxB,WAAW,QACX,aAAa,SAAS,IAAI,OAAO,MAAM,MACvC;GACA,uBAAuB,UAAU;GACjC,QAAQ,MACN,uYAKF;EACF;EACA,cAAc,OAAO;CACvB,GACA,CAAC,aAAa,CAChB;CAEA,MAAM,aAAa,aAAa,OAA4B;EAC1D,YAAY,UAAU;EACtB,IAAI,SAAS,CAAC,cAAc,WAAW,GAAG,YAAY,YAAY;GAChE,cAAc,UAAU;GACxB,QAAQ,MACN,qEACM,GAAG,QAAQ,YAAY,EAAE,oGAEjC;EACF;EACA,aAAa;GACX,YAAY,UAAU;EACxB;CACF,GAAG,CAAC,CAAC;CACL,MAAM,UAAU,aAAkC,YAAY,MAAM,GAAG;CAIvE,MAAM,iBAAiB,UAAU,KAAA,IAAa,gBAAgB,OAAQ,KAAA;CACtE,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd,eAAe;EACf,SAAS,MAAM,UAAU;GAEvB,IAAI,SAAS,YAAY;GACzB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;EACnE;CACF,IACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;CAIA,MAAM,UAAU,UAAkE;EAChF,gBAAgB;EAChB;EACA,OAAA;GALmC,OAAO;GAAY;GAAS;EAK3D;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG,MAAM;GACT,MAAM;GACN,iBAAiB,WAAW,SAAS,KAAA;GACrC;GACA;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;EACpC;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,mBAAD;EAAmB,OAAO;EAAU,UAAA;CAA2B,CAAA;AACxE;AAEA,eAAe,cAAc"}

package/dist/select/select-group.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"select-group.d.mts","names":[],"sources":["../../src/select/select-group.tsx"],"mappings":";;;;iBAQiB,yBAAyB,KACxC;;;;;EAOA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;wBAOzC,cACd,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mCAAgB,IAAA;yBARH"}
+{"version":3,"file":"select-group.d.mts","names":[],"sources":["../../src/select/select-group.tsx"],"mappings":";;;;iBASiB,yBAAyB,KACxC;;;;;EAOA;;EAEA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,mCAAmC;;;;;;wBAOzC,cACd,OACA,UACA,WACA,OACA,UACA,WACG,QACF,mCAAgB,IAAA;yBARH"}

package/dist/select/select-group.mjs

@@ -2,6 +2,7 @@
 import { useRender } from "../internal/use-render.mjs";
 import { SelectContext, useSelectContext } from "./select-context.mjs";
 import { useSelectPartRef } from "./select-dom.mjs";
+import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/select/select-group.tsx
 /**
@@ -30,11 +31,12 @@ function SelectGroup({ label, disabled = false, className, style, children, rend
 		libraryProps: { label },
 		ref
 	});
+	const context = useMemo(() => ({
+		...ctx,
+		groupDisabled: disabled
+	}), [ctx, disabled]);
 	return /* @__PURE__ */ jsx(SelectContext, {
-		value: {
-			...ctx,
-			groupDisabled: disabled
-		},
+		value: context,
 		children: element
 	});
 }

package/dist/select/select-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-group.mjs","names":[],"sources":["../../src/select/select-group.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext, useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectGroupProps extends Omit<\n  ComponentPropsWithRef<\"optgroup\">,\n  \"label\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * The `<optgroup label>`: shown by native pickers (Firefox today) and read by assistive\n   * technology. Required. Keep it equal to the text of a `Select.GroupLabel`, if any.\n   */\n  label: string;\n  /** Native `disabled`: every option in the group is disabled. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep an `<optgroup>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"optgroup\">, SelectRootState>;\n}\n\n/**\n * An `<optgroup>` of options. Its state is the Root's state. Owned key: `label`. Its `disabled`\n * reaches the Options' `state.disabled` / `data-disabled` through context, as `:disabled` does.\n */\nexport function SelectGroup({\n  label,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectGroupProps) {\n  const ctx = useSelectContext(\"Select.Group\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  const { ref } = useSelectPartRef<HTMLOptGroupElement>(\"Select.Group\", \"optgroup\");\n  const element = useRender<ComponentPropsWithRef<\"optgroup\">, SelectRootState>({\n    defaultElement: \"optgroup\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: { ...rest, disabled },\n    libraryProps: { label },\n    ref,\n  });\n  // Nested groups are not valid HTML, so this only ever turns `false` into the group's value.\n  return <SelectContext value={{ ...ctx, groupDisabled: disabled }}>{element}</SelectContext>;\n}\n\nSelectGroup.displayName = \"SelectGroup\";\n"],"mappings":";;;;;;;;;;AA8BA,SAAgB,YAAY,EAC1B,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,MAAM,EAAE,QAAQ,iBAAsC,gBAAgB,UAAU;CAChF,MAAM,UAAU,UAA8D;EAC5E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;GAAE,GAAG;GAAM;EAAS;EAC3B,cAAc,EAAE,MAAM;EACtB;CACF,CAAC;CAED,OAAO,oBAAC,eAAD;EAAe,OAAO;GAAE,GAAG;GAAK,eAAe;EAAS;EAAI,UAAA;CAAuB,CAAA;AAC5F;AAEA,YAAY,cAAc"}
+{"version":3,"file":"select-group.mjs","names":[],"sources":["../../src/select/select-group.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext, useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nexport interface SelectGroupProps extends Omit<\n  ComponentPropsWithRef<\"optgroup\">,\n  \"label\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * The `<optgroup label>`: shown by native pickers (Firefox today) and read by assistive\n   * technology. Required. Keep it equal to the text of a `Select.GroupLabel`, if any.\n   */\n  label: string;\n  /** Native `disabled`: every option in the group is disabled. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep an `<optgroup>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"optgroup\">, SelectRootState>;\n}\n\n/**\n * An `<optgroup>` of options. Its state is the Root's state. Owned key: `label`. Its `disabled`\n * reaches the Options' `state.disabled` / `data-disabled` through context, as `:disabled` does.\n */\nexport function SelectGroup({\n  label,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectGroupProps) {\n  const ctx = useSelectContext(\"Select.Group\");\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  const { ref } = useSelectPartRef<HTMLOptGroupElement>(\"Select.Group\", \"optgroup\");\n  const element = useRender<ComponentPropsWithRef<\"optgroup\">, SelectRootState>({\n    defaultElement: \"optgroup\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: { ...rest, disabled },\n    libraryProps: { label },\n    ref,\n  });\n  // Nested groups are not valid HTML, so this only ever turns `false` into the group's value.\n  const context = useMemo(() => ({ ...ctx, groupDisabled: disabled }), [ctx, disabled]);\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectGroup.displayName = \"SelectGroup\";\n"],"mappings":";;;;;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,OACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,MAAM,EAAE,QAAQ,iBAAsC,gBAAgB,UAAU;CAChF,MAAM,UAAU,UAA8D;EAC5E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;GAAE,GAAG;GAAM;EAAS;EAC3B,cAAc,EAAE,MAAM;EACtB;CACF,CAAC;CAED,MAAM,UAAU,eAAe;EAAE,GAAG;EAAK,eAAe;CAAS,IAAI,CAAC,KAAK,QAAQ,CAAC;CACpF,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,YAAY,cAAc"}

package/dist/select/select-root.d.mts

@@ -56,9 +56,11 @@ export interface SelectRootProps extends Omit<ComponentPropsWithRef<"select">, "
  * `value={optimistic}`: react-dom restores a controlled select to its props after every event,
  * and only the sync-lane optimistic value survives that restore.
  *
- * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`.
+ * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;
+ * inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`
+ * (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.
  */
-export declare function SelectRoot({ value, defaultValue, valueChangeAction, disabled, className, style, children, render, ...rest }: SelectRootProps): import("react").JSX.Element;
+export declare function SelectRoot({ value, defaultValue, valueChangeAction, disabled: disabledProp, className, style, children, render, ...rest }: SelectRootProps): import("react").JSX.Element;
 export declare namespace SelectRoot {
   var displayName: string;
 }

package/dist/select/select-root.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"select-root.d.mts","names":[],"sources":["../../src/select/select-root.tsx"],"mappings":";;;;iBAqBiB,iCAAiC;;;;;;;;WAQvC,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,wBAAwB,KACvC;;EAYA;;;;;;;;EAQA;;;;;;;;;;;EAWA,oBAAoB,qBAAqB;;EAEzC;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;wBAWvC,aACd,OACA,cACA,mBACA,UACA,WACA,OACA,UACA,WACG,QACF,kCAAe,IAAA;yBAVF"}
+{"version":3,"file":"select-root.d.mts","names":[],"sources":["../../src/select/select-root.tsx"],"mappings":";;;;iBA2BiB,iCAAiC;;;;;;;;WAQvC,QAAQ;;iBAGF;;WAEN;;WAEA;;WAEA;;iBAGM,wBAAwB,KACvC;;EAYA;;;;;;;;EAQA;;;;;;;;;;;EAWA,oBAAoB,qBAAqB;;EAEzC;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;;EAEjC,SAAS,WAAW,iCAAiC;;;;;;;;;;;;wBAavC,aACd,OACA,cACA,mBACA,UAAU,cACV,WACA,OACA,UACA,WACG,QACF,kCAAe,IAAA;yBAVF"}

package/dist/select/select-root.mjs

@@ -4,10 +4,11 @@ import { dataAttr } from "../internal/data-attr.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { SelectContext } from "./select-context.mjs";
 import { useSelectPartRef } from "./select-dom.mjs";
 import { useNativeSelectValue } from "../internal/use-native-select-value.mjs";
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/select/select-root.tsx
 /**
@@ -16,10 +17,22 @@ import { jsx } from "react/jsx-runtime";
 * `value={optimistic}`: react-dom restores a controlled select to its props after every event,
 * and only the sync-lane optimistic value survives that restore.
 *
-* Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`.
+* Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;
+* inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`
+* (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.
 */
-function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false, className, style, children, render, ...rest }) {
+function SelectRoot({ value, defaultValue, valueChangeAction, disabled: disabledProp, className, style, children, render, ...rest }) {
 	const { ref: libraryRef, node: selectRef } = useSelectPartRef("Select.Root", "select");
+	const field = useFieldControl({
+		labelable: true,
+		name: rest.name,
+		disabled: disabledProp,
+		required: rest.required,
+		id: rest.id,
+		component: "Select.Root"
+	});
+	const disabled = field.disabled;
+	const rootRef = useMergedRef(libraryRef, field.ref);
 	const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction({
 		controlled: value,
 		defaultValue,
@@ -31,6 +44,7 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 			prop: "value"
 		}
 	});
+	useFieldValueChange(optimistic);
 	const [mountValue] = useState(value);
 	const resetTarget = value === void 0 ? defaultValue : mountValue ?? value;
 	const established = useRef(false);
@@ -49,13 +63,18 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 		} : void 0,
 		onPlatformChange: (next, event) => dispatchChange(next, createActionDetails(event, { reason: "platform" }))
 	});
-	const context = {
+	const context = useMemo(() => ({
 		optimistic,
 		pending,
 		disabled,
 		groupDisabled: false,
 		optionMounted
-	};
+	}), [
+		optimistic,
+		pending,
+		disabled,
+		optionMounted
+	]);
 	const element = useRender({
 		defaultElement: "select",
 		render,
@@ -69,6 +88,7 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 		children,
 		props: rest,
 		libraryProps: {
+			...fieldInputProps(field),
 			value: optimistic,
 			disabled,
 			"data-pending": dataAttr(pending),
@@ -80,7 +100,7 @@ function SelectRoot({ value, defaultValue, valueChangeAction, disabled = false,
 				dispatchChange(next, createActionDetails(event.nativeEvent, { reason: "activate" }));
 			}
 		},
-		ref: libraryRef
+		ref: rootRef
 	});
 	return /* @__PURE__ */ jsx(SelectContext, {
 		value: context,

package/dist/select/select-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select-root.mjs","names":[],"sources":["../../src/select/select-root.tsx"],"sourcesContent":["\"use client\";\nimport { useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeSelectValue } from \"../internal/use-native-select-value.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext } from \"./select-context.js\";\nimport type { SelectContextValue } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface SelectValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user picked an option (pointer, keyboard, typeahead, or browser autofill,\n   * which the library cannot tell from a pick); `details.event` is the native `change` event.\n   * `\"platform\"`: the browser changed the value without a pick the library saw: a form reset\n   * (`details.event` is the `reset` event), or a pick before hydration / Firefox form-state\n   * restoration reconciled at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SelectRootState {\n  /** Optimistic value. Content rendered from it must not suspend. */\n  readonly value: string;\n  /** An action dispatched through this Select is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface SelectRootProps extends Omit<\n  ComponentPropsWithRef<\"select\">,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"multiple\"\n  | \"size\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled value. `undefined` means uncontrolled. Use `\"\"` for the placeholder option. */\n  value?: string;\n  /**\n   * Initial value in uncontrolled mode, and the value a form reset returns to (the latest prop is\n   * mirrored into the options' `defaultSelected`). When omitted, the browser's choice (an option\n   * whose value is `\"\"`, else the first enabled option) is adopted at mount, without a dispatch,\n   * and is what a form reset returns to. Until a pick (or a platform change) sets the value,\n   * options that mount later without the adopted one (a Suspense fallback) adopt again.\n   */\n  defaultValue?: string;\n  /**\n   * Runs inside the Root's transition whenever the selected option changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * In engines whose closed select changes the value on every arrow press (Firefox, Safari with\n   * native appearance), every press dispatches; the latest dispatch wins. A `setState` placed\n   * after your own `await` is not a Transition update; wrap it in `startTransition` (React\n   * limitation). Controlled mode is the way to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string, SelectValueChangeDetails>;\n  /** Native `disabled`. Never set by the library while pending. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<select>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"select\">, SelectRootState>;\n}\n\n/**\n * The `<select>` itself: owns the value, the transition, the form-reset listener, the mount\n * reconciliation and the re-apply of late options (design/components/select.md 15.2). Renders\n * `value={optimistic}`: react-dom restores a controlled select to its props after every event,\n * and only the sync-lane optimistic value survives that restore.\n *\n * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`.\n */\nexport function SelectRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  disabled = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectRootProps) {\n  const { ref: libraryRef, node: selectRef } = useSelectPartRef<HTMLSelectElement>(\n    \"Select.Root\",\n    \"select\",\n  );\n\n  const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction<\n    string,\n    SelectValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: \"\",\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"select\"),\n    warn: { component: \"Select.Root\", prop: \"value\" },\n  });\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: the browser's\n  // first-option default is adopted (design decision 3, product-owner decision 4).\n\n  // Controlled: the mount-time value is the reset target (conventions 3.8 rule 6). Neither\n  // `value` nor `defaultValue`: the value adopted at mount, chosen inside the hook.\n  const [mountValue] = useState(value);\n  const resetTarget = value === undefined ? defaultValue : (mountValue ?? value);\n\n  // Any dispatch, a pick or a platform change, ends the adoption of the browser's default.\n  const established = useRef(false);\n  const dispatchChange = (next: string, details: SelectValueChangeDetails) => {\n    established.current = true;\n    dispatch(next, details);\n  };\n\n  const { optionMounted } = useNativeSelectValue({\n    ref: selectRef,\n    optimistic,\n    latestInFlight,\n    resetTarget,\n    adoptDefault:\n      value === undefined && defaultValue === undefined\n        ? { adopt, established: () => established.current }\n        : undefined,\n    onPlatformChange: (next, event) =>\n      dispatchChange(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  const context: SelectContextValue = {\n    optimistic,\n    pending,\n    disabled,\n    groupDisabled: false,\n    optionMounted,\n  };\n  const state: SelectRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"select\">, SelectRootState>({\n    defaultElement: \"select\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      value: optimistic,\n      disabled,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLSelectElement>) => {\n        // A natively disabled select fires no change; this covers `render` elements.\n        if (disabled) return;\n        const next = event.currentTarget.value;\n        // No-op rule against the optimistic value (conventions 2.3, design 4.2).\n        if (next === optimistic) return;\n        dispatchChange(next, createActionDetails(event.nativeEvent, { reason: \"activate\" }));\n      },\n    },\n    ref: libraryRef,\n  });\n\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectRoot.displayName = \"SelectRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2FA,SAAgB,WAAW,EACzB,OACA,cACA,mBACA,WAAW,OACX,WACA,OACA,UACA,QACA,GAAG,QACe;CAClB,MAAM,EAAE,KAAK,YAAY,MAAM,cAAc,iBAC3C,eACA,QACF;CAEA,MAAM,EAAE,YAAY,SAAS,UAAU,gBAAgB,UAAU,sBAG/D;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,QAAQ;EAC/C,MAAM;GAAE,WAAW;GAAe,MAAM;EAAQ;CAClD,CAAC;CAMD,MAAM,CAAC,cAAc,SAAS,KAAK;CACnC,MAAM,cAAc,UAAU,KAAA,IAAY,eAAgB,cAAc;CAGxE,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,kBAAkB,MAAc,YAAsC;EAC1E,YAAY,UAAU;EACtB,SAAS,MAAM,OAAO;CACxB;CAEA,MAAM,EAAE,kBAAkB,qBAAqB;EAC7C,KAAK;EACL;EACA;EACA;EACA,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,IACpC;GAAE;GAAO,mBAAmB,YAAY;EAAQ,IAChD,KAAA;EACN,mBAAmB,MAAM,UACvB,eAAe,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CAC3E,CAAC;CAED,MAAM,UAA8B;EAClC;EACA;EACA;EACA,eAAe;EACf;CACF;CAGA,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA,OAAA;GAL+B,OAAO;GAAY;GAAS;EAKvD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,OAAO;GACP;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAA0C;IAEnD,IAAI,UAAU;IACd,MAAM,OAAO,MAAM,cAAc;IAEjC,IAAI,SAAS,YAAY;IACzB,eAAe,MAAM,oBAAoB,MAAM,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC;GACrF;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,WAAW,cAAc"}
+{"version":3,"file":"select-root.mjs","names":[],"sources":["../../src/select/select-root.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useNativeSelectValue } from \"../internal/use-native-select-value.js\";\nimport {\n  fieldInputProps,\n  useFieldControl,\n  useFieldValueChange,\n  useMergedRef,\n} from \"../internal/use-field-control.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { SelectContext } from \"./select-context.js\";\nimport type { SelectContextValue } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\n\n/** Details passed as the second argument of `valueChangeAction`. */\nexport interface SelectValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user picked an option (pointer, keyboard, typeahead, or browser autofill,\n   * which the library cannot tell from a pick); `details.event` is the native `change` event.\n   * `\"platform\"`: the browser changed the value without a pick the library saw: a form reset\n   * (`details.event` is the `reset` event), or a pick before hydration / Firefox form-state\n   * restoration reconciled at mount (`details.event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SelectRootState {\n  /** Optimistic value. Content rendered from it must not suspend. */\n  readonly value: string;\n  /** An action dispatched through this Select is in flight. */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\nexport interface SelectRootProps extends Omit<\n  ComponentPropsWithRef<\"select\">,\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"multiple\"\n  | \"size\"\n  | \"disabled\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled value. `undefined` means uncontrolled. Use `\"\"` for the placeholder option. */\n  value?: string;\n  /**\n   * Initial value in uncontrolled mode, and the value a form reset returns to (the latest prop is\n   * mirrored into the options' `defaultSelected`). When omitted, the browser's choice (an option\n   * whose value is `\"\"`, else the first enabled option) is adopted at mount, without a dispatch,\n   * and is what a form reset returns to. Until a pick (or a platform change) sets the value,\n   * options that mount later without the adopted one (a Suspense fallback) adopt again.\n   */\n  defaultValue?: string;\n  /**\n   * Runs inside the Root's transition whenever the selected option changes. May be sync or async\n   * (also a Server Function); rejections reach the nearest Error Boundary and roll the selection\n   * back.\n   *\n   * In engines whose closed select changes the value on every arrow press (Firefox, Safari with\n   * native appearance), every press dispatches; the latest dispatch wins. A `setState` placed\n   * after your own `await` is not a Transition update; wrap it in `startTransition` (React\n   * limitation). Controlled mode is the way to veto a change.\n   */\n  valueChangeAction?: ChangeAction<string, SelectValueChangeDetails>;\n  /** Native `disabled`. Never set by the library while pending. */\n  disabled?: boolean;\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  children?: StateValue<ReactNode, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<select>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"select\">, SelectRootState>;\n}\n\n/**\n * The `<select>` itself: owns the value, the transition, the form-reset listener, the mount\n * reconciliation and the re-apply of late options (design/components/select.md 15.2). Renders\n * `value={optimistic}`: react-dom restores a controlled select to its props after every event,\n * and only the sync-lane optimistic value survives that restore.\n *\n * Owned keys (conventions 1.2): `value`, `disabled`, `data-pending`, `data-disabled`, `onChange`;\n * inside a `Field.Root` also `id`, `name`, `required`, `aria-invalid`, `aria-describedby`\n * (token-merged) and `data-invalid`, and `disabled` / `name` / `required` default from the Field.\n */\nexport function SelectRoot({\n  value,\n  defaultValue,\n  valueChangeAction,\n  disabled: disabledProp,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: SelectRootProps) {\n  const { ref: libraryRef, node: selectRef } = useSelectPartRef<HTMLSelectElement>(\n    \"Select.Root\",\n    \"select\",\n  );\n  // Inside a Field.Root (design/components/field-form.md 7.2) the Field owns the id and the ARIA\n  // wiring, and `name` / `required` / `disabled` default from it.\n  const field = useFieldControl({\n    labelable: true,\n    name: rest.name,\n    disabled: disabledProp,\n    required: rest.required,\n    id: rest.id,\n    component: \"Select.Root\",\n  });\n  const disabled = field.disabled;\n  const rootRef = useMergedRef<HTMLSelectElement>(libraryRef, field.ref);\n\n  const { optimistic, pending, dispatch, latestInFlight, adopt } = useControllableAction<\n    string,\n    SelectValueChangeDetails\n  >({\n    controlled: value,\n    defaultValue,\n    initialValue: \"\",\n    action: valueChangeAction,\n    transitionTypes: () => transitionTypes(\"select\"),\n    warn: { component: \"Select.Root\", prop: \"value\" },\n  });\n  // Inside a Field: a value React writes with no event (a rejected action rolling back, a\n  // controlled change) re-reads validity and `validate` after the commit.\n  useFieldValueChange(optimistic);\n  // Deliberately no warning when neither `value` nor `defaultValue` is given: the browser's\n  // first-option default is adopted (design decision 3, product-owner decision 4).\n\n  // Controlled: the mount-time value is the reset target (conventions 3.8 rule 6). Neither\n  // `value` nor `defaultValue`: the value adopted at mount, chosen inside the hook.\n  const [mountValue] = useState(value);\n  const resetTarget = value === undefined ? defaultValue : (mountValue ?? value);\n\n  // Any dispatch, a pick or a platform change, ends the adoption of the browser's default.\n  const established = useRef(false);\n  const dispatchChange = (next: string, details: SelectValueChangeDetails) => {\n    established.current = true;\n    dispatch(next, details);\n  };\n\n  const { optionMounted } = useNativeSelectValue({\n    ref: selectRef,\n    optimistic,\n    latestInFlight,\n    resetTarget,\n    adoptDefault:\n      value === undefined && defaultValue === undefined\n        ? { adopt, established: () => established.current }\n        : undefined,\n    onPlatformChange: (next, event) =>\n      dispatchChange(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  // Memoised (#48): every member is a state value, a prop or a stable callback.\n  const context = useMemo<SelectContextValue>(\n    () => ({ optimistic, pending, disabled, groupDisabled: false, optionMounted }),\n    [optimistic, pending, disabled, optionMounted],\n  );\n  const state: SelectRootState = { value: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"select\">, SelectRootState>({\n    defaultElement: \"select\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...fieldInputProps(field),\n      value: optimistic,\n      disabled,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLSelectElement>) => {\n        // A natively disabled select fires no change; this covers `render` elements.\n        if (disabled) return;\n        const next = event.currentTarget.value;\n        // No-op rule against the optimistic value (conventions 2.3, design 4.2).\n        if (next === optimistic) return;\n        dispatchChange(next, createActionDetails(event.nativeEvent, { reason: \"activate\" }));\n      },\n    },\n    ref: rootRef,\n  });\n\n  return <SelectContext value={context}>{element}</SelectContext>;\n}\n\nSelectRoot.displayName = \"SelectRoot\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAgB,WAAW,EACzB,OACA,cACA,mBACA,UAAU,cACV,WACA,OACA,UACA,QACA,GAAG,QACe;CAClB,MAAM,EAAE,KAAK,YAAY,MAAM,cAAc,iBAC3C,eACA,QACF;CAGA,MAAM,QAAQ,gBAAgB;EAC5B,WAAW;EACX,MAAM,KAAK;EACX,UAAU;EACV,UAAU,KAAK;EACf,IAAI,KAAK;EACT,WAAW;CACb,CAAC;CACD,MAAM,WAAW,MAAM;CACvB,MAAM,UAAU,aAAgC,YAAY,MAAM,GAAG;CAErE,MAAM,EAAE,YAAY,SAAS,UAAU,gBAAgB,UAAU,sBAG/D;EACA,YAAY;EACZ;EACA,cAAc;EACd,QAAQ;EACR,uBAAuB,gBAAgB,QAAQ;EAC/C,MAAM;GAAE,WAAW;GAAe,MAAM;EAAQ;CAClD,CAAC;CAGD,oBAAoB,UAAU;CAM9B,MAAM,CAAC,cAAc,SAAS,KAAK;CACnC,MAAM,cAAc,UAAU,KAAA,IAAY,eAAgB,cAAc;CAGxE,MAAM,cAAc,OAAO,KAAK;CAChC,MAAM,kBAAkB,MAAc,YAAsC;EAC1E,YAAY,UAAU;EACtB,SAAS,MAAM,OAAO;CACxB;CAEA,MAAM,EAAE,kBAAkB,qBAAqB;EAC7C,KAAK;EACL;EACA;EACA;EACA,cACE,UAAU,KAAA,KAAa,iBAAiB,KAAA,IACpC;GAAE;GAAO,mBAAmB,YAAY;EAAQ,IAChD,KAAA;EACN,mBAAmB,MAAM,UACvB,eAAe,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CAC3E,CAAC;CAGD,MAAM,UAAU,eACP;EAAE;EAAY;EAAS;EAAU,eAAe;EAAO;CAAc,IAC5E;EAAC;EAAY;EAAS;EAAU;CAAa,CAC/C;CAGA,MAAM,UAAU,UAA4D;EAC1E,gBAAgB;EAChB;EACA,OAAA;GAL+B,OAAO;GAAY;GAAS;EAKvD;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAG,gBAAgB,KAAK;GACxB,OAAO;GACP;GACA,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAA0C;IAEnD,IAAI,UAAU;IACd,MAAM,OAAO,MAAM,cAAc;IAEjC,IAAI,SAAS,YAAY;IACzB,eAAe,MAAM,oBAAoB,MAAM,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC;GACrF;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,eAAD;EAAe,OAAO;EAAU,UAAA;CAAuB,CAAA;AAChE;AAEA,WAAW,cAAc"}

package/dist/slider/index.d.mts

@@ -0,0 +1,32 @@
+import "../internal/platform-attributes.mjs";
+import { SliderOrientation, SliderRootProps, SliderRootState, SliderValue, SliderValueChangeDetails, SliderValueCommitDetails } from "./slider-root.mjs";
+import { SliderTrack, SliderTrackProps, SliderTrackState } from "./slider-track.mjs";
+import { SliderIndicator, SliderIndicatorProps, SliderIndicatorState } from "./slider-indicator.mjs";
+import { SliderLabel, SliderLabelProps } from "./slider-label.mjs";
+import { SliderThumb, SliderThumbProps, SliderThumbState } from "./slider-thumb.mjs";
+import { SliderValuePart, SliderValueProps, SliderValueState } from "./slider-value.mjs";
+//#region src/slider/index.d.ts
+/**
+ * Slider (WAI-ARIA APG Slider and Slider (Multi-Thumb) patterns): `Root` (`role="group"` with
+ * several thumbs), `Label`, `Track` (owns the pointer), `Indicator` (the fill), one `Thumb` per
+ * value (a styled element containing a visually hidden native `<input type="range">`), and
+ * `Value`. Two actions: `valueChangeAction` on every step (a transition; keep it cheap) and
+ * `valueCommitAction` once per gesture (the save; uncontrolled state is committed when it
+ * resolves and rolls back when it rejects).
+ */
+export declare const Slider: {
+  readonly Root: {
+    (props: SliderRootProps<number>): import("react").ReactNode;
+    (props: SliderRootProps<readonly number[]>): import("react").ReactNode;
+    (props: SliderRootProps<SliderValue>): import("react").ReactNode;
+    displayName?: string;
+  };
+  readonly Label: typeof SliderLabel;
+  readonly Track: typeof SliderTrack;
+  readonly Indicator: typeof SliderIndicator;
+  readonly Thumb: typeof SliderThumb;
+  readonly Value: typeof SliderValuePart;
+};
+//#endregion
+export type { SliderIndicatorProps, SliderIndicatorState, SliderLabelProps, SliderOrientation, SliderRootProps, SliderRootState, SliderThumbProps, SliderThumbState, SliderTrackProps, SliderTrackState, SliderValue, SliderValueChangeDetails, SliderValueCommitDetails, SliderValueProps, SliderValueState };
+//# sourceMappingURL=index.d.mts.map

package/dist/slider/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":["_$__slider_root_js0.SliderRootProps","_$__slider_root_js0.SliderValue"],"sources":["../../src/slider/index.ts"],"mappings":";;;;;;;;;;;;;;;;qBAkBa;WACX;K,OADWA,0C;;;;;WAEX,cAAK;WACL,cAAK;WACL,kBAAS;WACT,cAAK;WACL,cAAK"}

package/dist/slider/index.mjs

@@ -0,0 +1,27 @@
+import { SliderIndicator } from "./slider-indicator.mjs";
+import { SliderLabel } from "./slider-label.mjs";
+import { SliderRoot } from "./slider-root.mjs";
+import { SliderThumb } from "./slider-thumb.mjs";
+import { SliderTrack } from "./slider-track.mjs";
+import { SliderValuePart } from "./slider-value.mjs";
+//#region src/slider/index.ts
+/**
+* Slider (WAI-ARIA APG Slider and Slider (Multi-Thumb) patterns): `Root` (`role="group"` with
+* several thumbs), `Label`, `Track` (owns the pointer), `Indicator` (the fill), one `Thumb` per
+* value (a styled element containing a visually hidden native `<input type="range">`), and
+* `Value`. Two actions: `valueChangeAction` on every step (a transition; keep it cheap) and
+* `valueCommitAction` once per gesture (the save; uncontrolled state is committed when it
+* resolves and rolls back when it rejects).
+*/
+const Slider = {
+	Root: SliderRoot,
+	Label: SliderLabel,
+	Track: SliderTrack,
+	Indicator: SliderIndicator,
+	Thumb: SliderThumb,
+	Value: SliderValuePart
+};
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=index.mjs.map

package/dist/slider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/slider/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only: the\n// built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { SliderIndicator } from \"./slider-indicator.js\";\nimport { SliderLabel } from \"./slider-label.js\";\nimport { SliderRoot } from \"./slider-root.js\";\nimport { SliderThumb } from \"./slider-thumb.js\";\nimport { SliderTrack } from \"./slider-track.js\";\nimport { SliderValuePart } from \"./slider-value.js\";\n\n/**\n * Slider (WAI-ARIA APG Slider and Slider (Multi-Thumb) patterns): `Root` (`role=\"group\"` with\n * several thumbs), `Label`, `Track` (owns the pointer), `Indicator` (the fill), one `Thumb` per\n * value (a styled element containing a visually hidden native `<input type=\"range\">`), and\n * `Value`. Two actions: `valueChangeAction` on every step (a transition; keep it cheap) and\n * `valueCommitAction` once per gesture (the save; uncontrolled state is committed when it\n * resolves and rolls back when it rejects).\n */\nexport const Slider = {\n  Root: SliderRoot,\n  Label: SliderLabel,\n  Track: SliderTrack,\n  Indicator: SliderIndicator,\n  Thumb: SliderThumb,\n  Value: SliderValuePart,\n} as const;\n\nexport type {\n  SliderValue,\n  SliderOrientation,\n  SliderRootProps,\n  SliderRootState,\n  SliderValueChangeDetails,\n  SliderValueCommitDetails,\n} from \"./slider-root.js\";\nexport type { SliderLabelProps } from \"./slider-label.js\";\nexport type { SliderTrackProps, SliderTrackState } from \"./slider-track.js\";\nexport type { SliderIndicatorProps, SliderIndicatorState } from \"./slider-indicator.js\";\nexport type { SliderThumbProps, SliderThumbState } from \"./slider-thumb.js\";\nexport type { SliderValueProps, SliderValueState } from \"./slider-value.js\";\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,SAAS;CACpB,MAAM;CACN,OAAO;CACP,OAAO;CACP,WAAW;CACX,OAAO;CACP,OAAO;AACT"}