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

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

@@ -0,0 +1,211 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { ToggleGroupContext } from "./toggle-group-context.mjs";
+import { useToolbarContext } from "../internal/toolbar-context.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRovingFocus } from "../internal/use-roving-focus.mjs";
+import { useCallback, useEffectEvent, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toggle-group/toggle-group-root.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const EMPTY = /* @__PURE__ */ new Set();
+function toSet(value) {
+	if (value === null) return EMPTY;
+	return typeof value === "string" ? /* @__PURE__ */ new Set([value]) : new Set(value);
+}
+/** The optimistic reducer (design 5.2): apply a patch, so stacked dispatches re-base. */
+function reduce(set, patch) {
+	const next = new Set(set);
+	for (const v of patch.removed) next.delete(v);
+	for (const v of patch.added) next.add(v);
+	return next;
+}
+/** `values` sorted by `order`; values not in `order` keep their iteration order, last. */
+function sortByOrder(values, order) {
+	const wanted = new Set(values);
+	const sorted = [];
+	for (const v of order) if (wanted.delete(v)) sorted.push(v);
+	for (const v of wanted) sorted.push(v);
+	return sorted;
+}
+function arraysEqual(a, b) {
+	return a.length === b.length && a.every((v, i) => v === b[i]);
+}
+function byDocumentOrder(a, b) {
+	if (a === b) return 0;
+	return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+/** Standalone entry (design 6.2): the first pressed item, else the first item (radio-like). */
+function pressedFirst(items) {
+	return items.find((el) => el.getAttribute("aria-pressed") === "true") ?? items[0];
+}
+/** Engine capabilities never change while the page lives. */
+const subscribeNever = () => () => {};
+const NO_LAYOUT = {
+	order: [],
+	disabled: []
+};
+/**
+* `<div role="group">` that owns the pressed set, the transition and, when standalone, the roving
+* focus over its Items (design/components/toggle-group.md 16.2). Inside a `Toolbar.Root` it runs
+* no engine of its own: its Items are members of the Toolbar's sequence.
+*
+* Owned keys (conventions 1.2): `role`, `data-orientation`, `data-pending`, `data-disabled`;
+* standalone also `onKeyDown`, `onFocus`, `onBlur`, `onPointerDown` and, with the flag,
+* `focusgroup`.
+*/
+function ToggleGroupRoot(props) {
+	const { exclusive = false, value, defaultValue, valueChangeAction, deselectable = true, orientation: orientationProp, loop: loopProp, disabled = false, experimental_focusgroup: focusgroupProp, className, style, children, render, ...rest } = props;
+	const toolbar = useToolbarContext();
+	const inToolbar = toolbar !== null;
+	useDevWarning(inToolbar && orientationProp !== void 0, "ToggleGroup.Root: `orientation` is ignored inside a Toolbar.Root; the group follows the Toolbar's orientation.");
+	useDevWarning(inToolbar && loopProp !== void 0, "ToggleGroup.Root: `loop` is ignored inside a Toolbar.Root; the Toolbar's `loop` applies.");
+	useDevWarning(inToolbar && focusgroupProp === true, "ToggleGroup.Root: `experimental_focusgroup` is ignored inside a Toolbar.Root. A nested focusgroup would split the Toolbar's single Tab stop; set the flag on the Toolbar.Root.");
+	const orientation = toolbar?.orientation ?? orientationProp ?? "horizontal";
+	const loop = loopProp ?? true;
+	const flag = !inToolbar && focusgroupProp === true;
+	const [mountExclusive] = useState(exclusive);
+	useDevWarning(mountExclusive !== exclusive, "ToggleGroup.Root: `exclusive` changed after mount. Switching between exclusive and multiple mode is not supported; the group keeps the mode it mounted with.");
+	const controlledKey = value === void 0 ? void 0 : JSON.stringify(value);
+	const controlledSet = useMemo(() => controlledKey === void 0 ? void 0 : toSet(JSON.parse(controlledKey)), [controlledKey]);
+	const defaultKey = defaultValue === void 0 ? void 0 : JSON.stringify(defaultValue);
+	const defaultSet = useMemo(() => defaultKey === void 0 ? void 0 : toSet(JSON.parse(defaultKey)), [defaultKey]);
+	const registry = useRef(/* @__PURE__ */ new Map());
+	const register = useCallback((element, itemValue) => {
+		registry.current.set(element, itemValue);
+		return () => {
+			registry.current.delete(element);
+		};
+	}, []);
+	const sortedItems = () => [...registry.current].sort(([a], [b]) => byDocumentOrder(a, b));
+	/** Sorts by the Items' current document order. Reads the DOM: handlers and effects only. */
+	const sortByDocument = (values) => sortByOrder(values, sortedItems().map(([, v]) => v));
+	const { optimistic, committed, pending, dispatch } = useControllableAction({
+		controlled: controlledSet,
+		defaultValue: defaultSet,
+		initialValue: EMPTY,
+		action: valueChangeAction && ((next, details) => valueChangeAction(mountExclusive ? [...next][0] ?? null : sortByDocument(next), details)),
+		transitionTypes: (_next, _prev, details) => [
+			...transitionTypes("toggle-group"),
+			...details.added.length > 0 ? ["fsui-toggle-group-press"] : [],
+			...details.removed.length > 0 ? ["fsui-toggle-group-release"] : []
+		],
+		reducer: (prev, _next, details) => reduce(prev, details),
+		warn: {
+			component: "ToggleGroup.Root",
+			prop: "value"
+		}
+	});
+	const latest = useLatest({
+		optimistic,
+		exclusive: mountExclusive,
+		deselectable
+	});
+	const toggle = useCallback((itemValue, event) => {
+		const { optimistic, exclusive, deselectable } = latest.current;
+		let patch;
+		if (optimistic.has(itemValue)) {
+			if (exclusive && !deselectable) return;
+			patch = {
+				added: [],
+				removed: [itemValue]
+			};
+		} else patch = {
+			added: [itemValue],
+			removed: exclusive ? [...optimistic] : []
+		};
+		dispatch(reduce(optimistic, patch), createActionDetails(event, patch));
+	}, [dispatch, latest]);
+	const [layout, setLayout] = useState(NO_LAYOUT);
+	const renderedValue = sortByOrder(optimistic, layout.order);
+	const warnedDuplicate = useRef(false);
+	const syncLayout = useEffectEvent(() => {
+		const items = sortedItems();
+		const order = items.map(([, v]) => v);
+		const disabledValues = items.filter(([el]) => el.matches(":disabled")).map(([, v]) => v);
+		const valueChanged = !arraysEqual(sortByOrder(optimistic, order), renderedValue);
+		const startChanged = flag && (!arraysEqual(order, layout.order) || !arraysEqual(disabledValues, layout.disabled));
+		if (valueChanged || startChanged) setLayout({
+			order,
+			disabled: disabledValues
+		});
+		if (!isDev || warnedDuplicate.current) return;
+		const duplicate = order.find((v, i) => order.indexOf(v) !== i);
+		if (duplicate !== void 0) {
+			warnedDuplicate.current = true;
+			console.error(`ToggleGroup.Item: two Items share the value "${duplicate}" in one ToggleGroup.Root. Item values must be unique; both follow the same pressed state.`);
+		}
+	});
+	useLayoutEffect(() => {
+		syncLayout();
+	});
+	const native = useSyncExternalStore(subscribeNever, () => flag && "focusGroup" in HTMLElement.prototype, () => false);
+	const focusgroupStartValue = flag && !disabled ? renderedValue.find((v) => (layout.order.length === 0 || layout.order.includes(v)) && !layout.disabled.includes(v)) ?? null : null;
+	const rootRef = useRef(null);
+	const roving = useRovingFocus(rootRef, {
+		enabled: !inToolbar,
+		orientation,
+		loop,
+		native,
+		entry: pressedFirst,
+		memory: false
+	});
+	const context = useMemo(() => ({
+		optimistic,
+		committed,
+		pending,
+		disabled,
+		orientation,
+		focusgroupStartValue,
+		toggle,
+		register
+	}), [
+		optimistic,
+		committed,
+		pending,
+		disabled,
+		orientation,
+		focusgroupStartValue,
+		toggle,
+		register
+	]);
+	const state = {
+		value: renderedValue,
+		pending,
+		disabled,
+		orientation
+	};
+	const focusgroup = flag ? `toolbar ${orientation === "vertical" ? "block" : "inline"} ${loop ? "wrap" : "nowrap"} nomemory` : void 0;
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			role: "group",
+			"data-orientation": orientation,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			...!inToolbar && roving,
+			...focusgroup !== void 0 && { focusgroup }
+		},
+		ref: rootRef
+	});
+	return /* @__PURE__ */ jsx(ToggleGroupContext, {
+		value: context,
+		children: element
+	});
+}
+ToggleGroupRoot.displayName = "ToggleGroupRoot";
+//#endregion
+export { ToggleGroupRoot };
+
+//# sourceMappingURL=toggle-group-root.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group-root.mjs","names":[],"sources":["../../src/toggle-group/toggle-group-root.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCallback,\n  useEffectEvent,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useToolbarContext } from \"../internal/toolbar-context.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 { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useLatest } from \"../internal/use-latest.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useRovingFocus } from \"../internal/use-roving-focus.js\";\nimport { ToggleGroupContext } from \"./toggle-group-context.js\";\nimport type { ToggleGroupContextValue, ToggleGroupOrientation } from \"./toggle-group-context.js\";\n\nexport type { ToggleGroupOrientation } from \"./toggle-group-context.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\n/** Details passed as the second argument of `valueChangeAction`, in both modes. */\nexport interface ToggleGroupValueChangeDetails extends ActionDetails {\n  /** Values this dispatch pressed (document order of their Items). Exclusive mode: `[next]` or `[]`. */\n  readonly added: readonly string[];\n  /** Values this dispatch released. Exclusive mode: `[previous]` or `[]`. */\n  readonly removed: readonly string[];\n}\n\nexport interface ToggleGroupRootState {\n  /**\n   * Optimistic pressed values in document order of the Items (exclusive mode: `[value]` or `[]`,\n   * so one state shape serves both modes). The server render and the first client render use the\n   * value's own order. Content rendered from it must not suspend.\n   */\n  readonly value: readonly string[];\n  /** An action dispatched through this group is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n  /** The effective orientation: the Toolbar's when inside one. */\n  readonly orientation: ToggleGroupOrientation;\n}\n\ninterface ToggleGroupRootBaseProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  | \"role\"\n  | \"onKeyDown\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onPointerDown\"\n  | \"defaultValue\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Axis of the arrow keys and `data-orientation`. Default `\"horizontal\"`. Ignored inside a Toolbar (dev warning). */\n  orientation?: ToggleGroupOrientation;\n  /** Whether arrows wrap from the last Item to the first. Default `true`. Ignored inside a Toolbar (dev warning). */\n  loop?: boolean;\n  /** Disables every Item (native `disabled`). */\n  disabled?: boolean;\n  /**\n   * Render `focusgroup=\"toolbar …\"` and, where the browser implements it, let the browser move\n   * focus between the Items. Chromium 150+ only; elsewhere the JS path stays active. Ignored\n   * inside a Toolbar (a nested focusgroup would split the Toolbar's sequence; dev warning).\n   * Default `false`.\n   */\n  experimental_focusgroup?: boolean;\n  className?: StateValue<string | undefined, ToggleGroupRootState>;\n  style?: StateValue<CSSProperties | undefined, ToggleGroupRootState>;\n  children?: StateValue<ReactNode, ToggleGroupRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ToggleGroupRootState>;\n}\n\nexport interface ToggleGroupMultipleProps extends ToggleGroupRootBaseProps {\n  exclusive?: false;\n  /** Controlled pressed values. `[]` presses nothing; `undefined` means uncontrolled. Order is not significant; duplicates ignored. */\n  value?: string[];\n  /** Initial pressed values in uncontrolled mode. Default `[]`. */\n  defaultValue?: string[];\n  /**\n   * Runs inside the Root's transition whenever the set of pressed Items changes. Sync or async (a\n   * Server Function may be passed directly); rejections reach the nearest Error Boundary and roll\n   * the change back. `next` is the whole set as a fresh array in document order;\n   * `details.added` / `details.removed` say what changed. A `setState` after your own `await` is\n   * not a Transition update; wrap it in `startTransition`. Prefer a functional update keyed by\n   * `added` / `removed` when controlled.\n   */\n  valueChangeAction?: ChangeAction<string[], ToggleGroupValueChangeDetails>;\n  /** Exclusive mode only: a type error here (TypeScript's union excess-property check would let it through otherwise). */\n  deselectable?: never;\n}\n\nexport interface ToggleGroupExclusiveProps extends ToggleGroupRootBaseProps {\n  /** At most one Item is pressed; `value` is `string | null`. */\n  exclusive: true;\n  /** Controlled pressed value. `null` presses nothing; `undefined` means uncontrolled. */\n  value?: string | null;\n  /** Initial pressed value in uncontrolled mode. Default `null`. */\n  defaultValue?: string | null;\n  /**\n   * Whether pressing the pressed Item releases it (`next === null`). Default `true`. With\n   * `false` that press is a no-op and dispatches nothing; `value` stays `string | null` because\n   * the group may start with nothing pressed, but the action is then never called with `null`.\n   */\n  deselectable?: boolean;\n  /** See {@link ToggleGroupMultipleProps.valueChangeAction}; `next` is the pressed value or `null`. */\n  valueChangeAction?: ChangeAction<string | null, ToggleGroupValueChangeDetails>;\n}\n\n/** Props of `ToggleGroup.Root`, discriminated on `exclusive`. */\nexport type ToggleGroupRootProps = ToggleGroupMultipleProps | ToggleGroupExclusiveProps;\n\ntype GroupValue = string[] | string | null;\ntype ValueSet = ReadonlySet<string>;\n\n/** Both variants as one shape, for the implementation. */\ninterface InternalProps extends ToggleGroupRootBaseProps {\n  exclusive?: boolean;\n  value?: GroupValue;\n  defaultValue?: GroupValue;\n  deselectable?: boolean;\n  valueChangeAction?: ChangeAction<GroupValue, ToggleGroupValueChangeDetails>;\n}\n\nconst EMPTY: ValueSet = new Set();\n\nfunction toSet(value: GroupValue): ValueSet {\n  if (value === null) return EMPTY;\n  return typeof value === \"string\" ? new Set([value]) : new Set(value);\n}\n\ninterface Patch {\n  readonly added: readonly string[];\n  readonly removed: readonly string[];\n}\n\n/** The optimistic reducer (design 5.2): apply a patch, so stacked dispatches re-base. */\nfunction reduce(set: ValueSet, patch: Patch): ValueSet {\n  const next = new Set(set);\n  for (const v of patch.removed) next.delete(v);\n  for (const v of patch.added) next.add(v);\n  return next;\n}\n\n/** `values` sorted by `order`; values not in `order` keep their iteration order, last. */\nfunction sortByOrder(values: Iterable<string>, order: readonly string[]): string[] {\n  const wanted = new Set(values);\n  const sorted: string[] = [];\n  for (const v of order) if (wanted.delete(v)) sorted.push(v);\n  for (const v of wanted) sorted.push(v);\n  return sorted;\n}\n\nfunction arraysEqual(a: readonly string[], b: readonly string[]): boolean {\n  return a.length === b.length && a.every((v, i) => v === b[i]);\n}\n\nfunction byDocumentOrder(a: Node, b: Node): number {\n  if (a === b) return 0;\n  return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;\n}\n\n/** Standalone entry (design 6.2): the first pressed item, else the first item (radio-like). */\nfunction pressedFirst(items: readonly HTMLElement[]): HTMLElement | undefined {\n  return items.find((el) => el.getAttribute(\"aria-pressed\") === \"true\") ?? items[0];\n}\n\n/** Engine capabilities never change while the page lives. */\nconst subscribeNever = () => () => {};\n\n/** The Items' document order and their disabled values, as of the Root's last commit. */\ninterface ItemLayout {\n  readonly order: readonly string[];\n  readonly disabled: readonly string[];\n}\n\nconst NO_LAYOUT: ItemLayout = { order: [], disabled: [] };\n\n/**\n * `<div role=\"group\">` that owns the pressed set, the transition and, when standalone, the roving\n * focus over its Items (design/components/toggle-group.md 16.2). Inside a `Toolbar.Root` it runs\n * no engine of its own: its Items are members of the Toolbar's sequence.\n *\n * Owned keys (conventions 1.2): `role`, `data-orientation`, `data-pending`, `data-disabled`;\n * standalone also `onKeyDown`, `onFocus`, `onBlur`, `onPointerDown` and, with the flag,\n * `focusgroup`.\n */\nexport function ToggleGroupRoot(props: ToggleGroupRootProps) {\n  const {\n    exclusive = false,\n    value,\n    defaultValue,\n    valueChangeAction,\n    deselectable = true,\n    orientation: orientationProp,\n    loop: loopProp,\n    disabled = false,\n    experimental_focusgroup: focusgroupProp,\n    className,\n    style,\n    children,\n    render,\n    ...rest\n  } = props as InternalProps;\n\n  const toolbar = useToolbarContext();\n  const inToolbar = toolbar !== null;\n  useDevWarning(\n    inToolbar && orientationProp !== undefined,\n    \"ToggleGroup.Root: `orientation` is ignored inside a Toolbar.Root; the group follows the \" +\n      \"Toolbar's orientation.\",\n  );\n  useDevWarning(\n    inToolbar && loopProp !== undefined,\n    \"ToggleGroup.Root: `loop` is ignored inside a Toolbar.Root; the Toolbar's `loop` applies.\",\n  );\n  useDevWarning(\n    inToolbar && focusgroupProp === true,\n    \"ToggleGroup.Root: `experimental_focusgroup` is ignored inside a Toolbar.Root. A nested \" +\n      \"focusgroup would split the Toolbar's single Tab stop; set the flag on the Toolbar.Root.\",\n  );\n  const orientation: ToggleGroupOrientation =\n    toolbar?.orientation ?? orientationProp ?? \"horizontal\";\n  const loop = loopProp ?? true;\n  const flag = !inToolbar && focusgroupProp === true;\n\n  // The mode is fixed at mount (design 3.1).\n  const [mountExclusive] = useState(exclusive);\n  useDevWarning(\n    mountExclusive !== exclusive,\n    \"ToggleGroup.Root: `exclusive` changed after mount. Switching between exclusive and \" +\n      \"multiple mode is not supported; the group keeps the mode it mounted with.\",\n  );\n\n  // Committed set keyed on the contents, so an inline `value={[\"a\"]}` does not re-base every render.\n  const controlledKey = value === undefined ? undefined : JSON.stringify(value);\n  const controlledSet = useMemo(\n    () =>\n      controlledKey === undefined ? undefined : toSet(JSON.parse(controlledKey) as GroupValue),\n    [controlledKey],\n  );\n  const defaultKey = defaultValue === undefined ? undefined : JSON.stringify(defaultValue);\n  const defaultSet = useMemo(\n    () => (defaultKey === undefined ? undefined : toSet(JSON.parse(defaultKey) as GroupValue)),\n    [defaultKey],\n  );\n\n  // Item registration (design 16.2): element → value, written from the Items' callback refs.\n  const registry = useRef(new Map<HTMLElement, string>());\n  const register = useCallback((element: HTMLElement, itemValue: string) => {\n    registry.current.set(element, itemValue);\n    return () => {\n      registry.current.delete(element);\n    };\n  }, []);\n  const sortedItems = (): [HTMLElement, string][] =>\n    [...registry.current].sort(([a], [b]) => byDocumentOrder(a, b));\n  /** Sorts by the Items' current document order. Reads the DOM: handlers and effects only. */\n  const sortByDocument = (values: Iterable<string>): string[] =>\n    sortByOrder(\n      values,\n      sortedItems().map(([, v]) => v),\n    );\n\n  const { optimistic, committed, pending, dispatch } = useControllableAction<\n    ValueSet,\n    ToggleGroupValueChangeDetails\n  >({\n    controlled: controlledSet,\n    defaultValue: defaultSet,\n    initialValue: EMPTY,\n    action:\n      valueChangeAction &&\n      ((next, details) =>\n        valueChangeAction(mountExclusive ? ([...next][0] ?? null) : sortByDocument(next), details)),\n    transitionTypes: (_next, _prev, details) => [\n      ...transitionTypes(\"toggle-group\"),\n      ...(details.added.length > 0 ? [\"fsui-toggle-group-press\"] : []),\n      ...(details.removed.length > 0 ? [\"fsui-toggle-group-release\"] : []),\n    ],\n    reducer: (prev, _next, details) => reduce(prev, details),\n    warn: { component: \"ToggleGroup.Root\", prop: \"value\" },\n  });\n\n  // Read by the stable `toggle` (#48): a handler only runs against the committed UI.\n  const latest = useLatest({ optimistic, exclusive: mountExclusive, deselectable });\n  const toggle = useCallback(\n    (itemValue: string, event: Event) => {\n      const { optimistic, exclusive, deselectable } = latest.current;\n      let patch: Patch;\n      if (optimistic.has(itemValue)) {\n        // Exclusive and not deselectable: pressing the pressed Item is a no-op (design 5.2).\n        if (exclusive && !deselectable) return;\n        patch = { added: [], removed: [itemValue] };\n      } else {\n        patch = { added: [itemValue], removed: exclusive ? [...optimistic] : [] };\n      }\n      dispatch(reduce(optimistic, patch), createActionDetails(event, patch));\n    },\n    [dispatch, latest],\n  );\n\n  // `state.value` is in document order. Render cannot read the DOM, so the Items' order (and,\n  // for `focusgroupstart`, which values have a disabled Item) is kept in state, refreshed after a\n  // commit of the Root only when what renders from it would change (CheckboxGroup's approach).\n  const [layout, setLayout] = useState<ItemLayout>(NO_LAYOUT);\n  const renderedValue = sortByOrder(optimistic, layout.order);\n  const warnedDuplicate = useRef(false);\n  const syncLayout = useEffectEvent(() => {\n    const items = sortedItems();\n    const order = items.map(([, v]) => v);\n    const disabledValues = items.filter(([el]) => el.matches(\":disabled\")).map(([, v]) => v);\n    const valueChanged = !arraysEqual(sortByOrder(optimistic, order), renderedValue);\n    const startChanged =\n      flag && (!arraysEqual(order, layout.order) || !arraysEqual(disabledValues, layout.disabled));\n    // A DOM read (the Items' order) that render cannot do; the comparison ends the chain.\n    if (valueChanged || startChanged) setLayout({ order, disabled: disabledValues });\n\n    if (!isDev || warnedDuplicate.current) return;\n    const duplicate = order.find((v, i) => order.indexOf(v) !== i);\n    if (duplicate !== undefined) {\n      warnedDuplicate.current = true;\n      console.error(\n        `ToggleGroup.Item: two Items share the value \"${duplicate}\" in one ToggleGroup.Root. ` +\n          \"Item values must be unique; both follow the same pressed state.\",\n      );\n    }\n  });\n  useLayoutEffect(() => {\n    // oxlint-disable-next-line react/set-state-in-effect -- a DOM read render cannot do (as CheckboxGroup.Root)\n    syncLayout();\n  });\n\n  // Feature detection only when the flag is on, never during SSR or hydration (conventions 8).\n  const native = useSyncExternalStore(\n    subscribeNever,\n    () => flag && \"focusGroup\" in HTMLElement.prototype,\n    () => false,\n  );\n\n  const focusgroupStartValue =\n    flag && !disabled\n      ? (renderedValue.find(\n          (v) =>\n            (layout.order.length === 0 || layout.order.includes(v)) && !layout.disabled.includes(v),\n        ) ?? null)\n      : null;\n\n  const rootRef = useRef<HTMLElement | null>(null);\n  const roving = useRovingFocus(rootRef, {\n    enabled: !inToolbar,\n    orientation,\n    loop,\n    native,\n    entry: pressedFirst,\n    memory: false,\n  });\n\n  const context = useMemo<ToggleGroupContextValue>(\n    () => ({\n      optimistic,\n      committed,\n      pending,\n      disabled,\n      orientation,\n      focusgroupStartValue,\n      toggle,\n      register,\n    }),\n    [optimistic, committed, pending, disabled, orientation, focusgroupStartValue, toggle, register],\n  );\n\n  const state: ToggleGroupRootState = { value: renderedValue, pending, disabled, orientation };\n\n  const focusgroup = flag\n    ? `toolbar ${orientation === \"vertical\" ? \"block\" : \"inline\"} ${loop ? \"wrap\" : \"nowrap\"} nomemory`\n    : undefined;\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, ToggleGroupRootState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"group\",\n      \"data-orientation\": orientation,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      // Inside a Toolbar the group has no engine: the keys are not owned there.\n      ...(!inToolbar && roving),\n      ...(focusgroup !== undefined && { focusgroup }),\n    },\n    ref: rootRef,\n  });\n\n  return <ToggleGroupContext value={context}>{element}</ToggleGroupContext>;\n}\n\nToggleGroupRoot.displayName = \"ToggleGroupRoot\";\n"],"mappings":"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"}

package/dist/toolbar/index.d.mts

@@ -0,0 +1,18 @@
+import "../internal/platform-attributes.mjs";
+import { ToolbarButton, ToolbarButtonActionDetails, ToolbarButtonProps, ToolbarButtonState } from "./toolbar-button.mjs";
+import { ToolbarOrientation, ToolbarRoot, ToolbarRootProps, ToolbarRootState } from "./toolbar-root.mjs";
+import { ToolbarSeparator, ToolbarSeparatorProps, ToolbarSeparatorState } from "./toolbar-separator.mjs";
+//#region src/toolbar/index.d.ts
+/**
+ * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role="toolbar") with one Tab stop and
+ * arrow keys over its focusable descendants, `Button` (an action button, focusable when
+ * disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.
+ */
+export declare const Toolbar: {
+  readonly Root: typeof ToolbarRoot;
+  readonly Button: typeof ToolbarButton;
+  readonly Separator: typeof ToolbarSeparator;
+};
+//#endregion
+export type { ToolbarButtonActionDetails, ToolbarButtonProps, ToolbarButtonState, ToolbarOrientation, ToolbarRootProps, ToolbarRootState, ToolbarSeparatorProps, ToolbarSeparatorState };
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/toolbar/index.ts"],"mappings":";;;;;;;;;;qBAWa;WACX,aAAI;WACJ,eAAM;WACN,kBAAS"}

package/dist/toolbar/index.mjs

@@ -0,0 +1,18 @@
+import { ToolbarButton } from "./toolbar-button.mjs";
+import { ToolbarRoot } from "./toolbar-root.mjs";
+import { ToolbarSeparator } from "./toolbar-separator.mjs";
+//#region src/toolbar/index.ts
+/**
+* Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role="toolbar") with one Tab stop and
+* arrow keys over its focusable descendants, `Button` (an action button, focusable when
+* disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.
+*/
+const Toolbar = {
+	Root: ToolbarRoot,
+	Button: ToolbarButton,
+	Separator: ToolbarSeparator
+};
+//#endregion
+export { Toolbar };
+
+//# sourceMappingURL=index.mjs.map

package/dist/toolbar/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toolbar/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only.\nimport \"../internal/platform-attributes.js\";\nimport { ToolbarButton } from \"./toolbar-button.js\";\nimport { ToolbarRoot } from \"./toolbar-root.js\";\nimport { ToolbarSeparator } from \"./toolbar-separator.js\";\n\n/**\n * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role=\"toolbar\") with one Tab stop and\n * arrow keys over its focusable descendants, `Button` (an action button, focusable when\n * disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.\n */\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Button: ToolbarButton,\n  Separator: ToolbarSeparator,\n} as const;\n\nexport type { ToolbarRootProps, ToolbarRootState, ToolbarOrientation } from \"./toolbar-root.js\";\nexport type {\n  ToolbarButtonProps,\n  ToolbarButtonState,\n  ToolbarButtonActionDetails,\n} from \"./toolbar-button.js\";\nexport type { ToolbarSeparatorProps, ToolbarSeparatorState } from \"./toolbar-separator.js\";\n"],"mappings":";;;;;;;;;AAWA,MAAa,UAAU;CACrB,MAAM;CACN,QAAQ;CACR,WAAW;AACb"}

package/dist/toolbar/toolbar-button.d.mts

@@ -0,0 +1,42 @@
+import { Action, ActionDetails, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
+//#region src/toolbar/toolbar-button.d.ts
+/** Details passed to `Toolbar.Button`'s `action`. */
+export interface ToolbarButtonActionDetails extends ActionDetails {}
+export interface ToolbarButtonState {
+  /** This button's action is in flight. */
+  readonly pending: boolean;
+  readonly disabled: boolean;
+}
+export interface ToolbarButtonProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "type" | "tabIndex" | "aria-disabled" | "className" | "style" | "children"> {
+  /** Runs inside this button's own transition on click, Enter or Space. Sync or async; rejections reach the nearest Error Boundary. */
+  action?: Action<[details: ToolbarButtonActionDetails]>;
+  /**
+   * `aria-disabled="true"`: the button stays focusable and in the arrow-key sequence so
+   * assistive technology still finds it (APG Toolbar example), and never dispatches.
+   */
+  disabled?: boolean;
+  /**
+   * Forwarded as `default` to the button's `<ViewTransition>`: animates the commit that ends the
+   * action (content keyed on `pending`), not a click. Static; any value makes a mount inside a
+   * transition start a document view transition (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, ToolbarButtonState>;
+  style?: StateValue<CSSProperties | undefined, ToolbarButtonState>;
+  children?: StateValue<ReactNode, ToolbarButtonState>;
+  render?: RenderProp<ComponentPropsWithRef<"button">, ToolbarButtonState>;
+}
+/**
+ * A toolbar command: `<button type="button">` that runs `action` in its own transition
+ * (`data-pending` while it runs). Disabled is `aria-disabled`, so it stays focusable.
+ *
+ * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-disabled`, `data-pending`,
+ * `data-disabled`, `onClick`.
+ */
+export declare function ToolbarButton({ action, disabled, transition, className, style, children, render, ...rest }: ToolbarButtonProps): ReactNode;
+export declare namespace ToolbarButton {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toolbar-button.d.mts.map

package/dist/toolbar/toolbar-button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-button.d.mts","names":[],"sources":["../../src/toolbar/toolbar-button.tsx"],"mappings":";;;;iBAgBiB,mCAAmC;iBAEnC;;WAEN;WACA;;iBAGM,2BAA2B,KAC1C;;EAIA,SAAS,QAAQ,SAAS;;;;;EAK1B;;;;;;EAMA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;wBAUvC,gBACd,QACA,UACA,YACA,WACA,OACA,UACA,WACG,QACF,qBAAkB;yBATL"}

package/dist/toolbar/toolbar-button.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { rendersButton } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+//#region src/toolbar/toolbar-button.tsx
+/**
+* A toolbar command: `<button type="button">` that runs `action` in its own transition
+* (`data-pending` while it runs). Disabled is `aria-disabled`, so it stays focusable.
+*
+* Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-disabled`, `data-pending`,
+* `data-disabled`, `onClick`.
+*/
+function ToolbarButton({ action, disabled = false, transition, className, style, children, render, ...rest }) {
+	const { pending, run } = useActionTrigger();
+	const element = useRender({
+		defaultElement: "button",
+		render,
+		state: {
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			...rendersButton(render) && { type: "button" },
+			"aria-disabled": disabled ? true : void 0,
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onClick: (event) => {
+				if (disabled) {
+					event.preventDefault();
+					return;
+				}
+				const details = createActionDetails(event.nativeEvent, {});
+				run(() => action?.(details));
+			}
+		}
+	});
+	return useTransitionBoundary("Toolbar.Button", transition, element);
+}
+ToolbarButton.displayName = "ToolbarButton";
+//#endregion
+export { ToolbarButton };
+
+//# sourceMappingURL=toolbar-button.mjs.map

package/dist/toolbar/toolbar-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-button.mjs","names":[],"sources":["../../src/toolbar/toolbar-button.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { Action, ActionDetails, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\n\n/** Details passed to `Toolbar.Button`'s `action`. */\nexport interface ToolbarButtonActionDetails extends ActionDetails {}\n\nexport interface ToolbarButtonState {\n  /** This button's action is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface ToolbarButtonProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"tabIndex\" | \"aria-disabled\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Runs inside this button's own transition on click, Enter or Space. Sync or async; rejections reach the nearest Error Boundary. */\n  action?: Action<[details: ToolbarButtonActionDetails]>;\n  /**\n   * `aria-disabled=\"true\"`: the button stays focusable and in the arrow-key sequence so\n   * assistive technology still finds it (APG Toolbar example), and never dispatches.\n   */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the button's `<ViewTransition>`: animates the commit that ends the\n   * action (content keyed on `pending`), not a click. Static; any value makes a mount inside a\n   * transition start a document view transition (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ToolbarButtonState>;\n  style?: StateValue<CSSProperties | undefined, ToolbarButtonState>;\n  children?: StateValue<ReactNode, ToolbarButtonState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToolbarButtonState>;\n}\n\n/**\n * A toolbar command: `<button type=\"button\">` that runs `action` in its own transition\n * (`data-pending` while it runs). Disabled is `aria-disabled`, so it stays focusable.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-disabled`, `data-pending`,\n * `data-disabled`, `onClick`.\n */\nexport function ToolbarButton({\n  action,\n  disabled = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToolbarButtonProps) {\n  const { pending, run } = useActionTrigger();\n  const state: ToolbarButtonState = { pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToolbarButtonState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...(rendersButton(render) && { type: \"button\" as const }),\n      \"aria-disabled\": disabled ? true : undefined,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          // A disabled link must not navigate either.\n          event.preventDefault();\n          return;\n        }\n        const details: ToolbarButtonActionDetails = createActionDetails(event.nativeEvent, {});\n        run(() => action?.(details));\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Toolbar.Button\", transition, element);\n}\n\nToolbarButton.displayName = \"ToolbarButton\";\n"],"mappings":";;;;;;;;;;;;;;;AAsDA,SAAgB,cAAc,EAC5B,QACA,WAAW,OACX,YACA,WACA,OACA,UACA,QACA,GAAG,QACkB;CACrB,MAAM,EAAE,SAAS,QAAQ,iBAAiB;CAG1C,MAAM,UAAU,UAA+D;EAC7E,gBAAgB;EAChB;EACA,OAAA;GALkC;GAAS;EAKvC;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;GACvD,iBAAiB,WAAW,OAAO,KAAA;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,UAAU,UAAyC;IACjD,IAAI,UAAU;KAEZ,MAAM,eAAe;KACrB;IACF;IACA,MAAM,UAAsC,oBAAoB,MAAM,aAAa,CAAC,CAAC;IACrF,UAAU,SAAS,OAAO,CAAC;GAC7B;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,kBAAkB,YAAY,OAAO;AACpE;AAEA,cAAc,cAAc"}

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

@@ -0,0 +1,38 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/toolbar/toolbar-root.d.ts
+export type ToolbarOrientation = "horizontal" | "vertical";
+export interface ToolbarRootState {
+  readonly orientation: ToolbarOrientation;
+}
+export interface ToolbarRootProps extends Omit<ComponentPropsWithRef<"div">, "role" | "aria-orientation" | "onKeyDown" | "onFocus" | "onBlur" | "onPointerDown" | "className" | "style" | "children"> {
+  /** Axis of the arrow keys; also `aria-orientation`. Default `"horizontal"`. */
+  orientation?: ToolbarOrientation;
+  /** Whether arrows wrap from the last item to the first. Default `true`. */
+  loop?: boolean;
+  /**
+   * Render `focusgroup="toolbar …"` and, where the browser implements it, let the browser handle
+   * arrow keys, Home and End and the single Tab stop. Chromium 150+ only; elsewhere the JS path
+   * stays active. Default `false`.
+   */
+  experimental_focusgroup?: boolean;
+  className?: StateValue<string | undefined, ToolbarRootState>;
+  style?: StateValue<CSSProperties | undefined, ToolbarRootState>;
+  children?: StateValue<ReactNode, ToolbarRootState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, ToolbarRootState>;
+}
+/**
+ * `<div role="toolbar" aria-orientation>` (WAI-ARIA APG Toolbar). Its items are its focusable
+ * descendants, found in the DOM: one Tab stop (the last focused item), arrow keys, Home and End
+ * between them (design/components/toggle-group.md section 6). Name it with `aria-label` or
+ * `aria-labelledby`.
+ *
+ * Owned keys (conventions 1.2): `role`, `aria-orientation`, `data-orientation`, `onKeyDown`,
+ * `onFocus`, `onBlur`, `onPointerDown`, and `focusgroup` while the flag is on.
+ */
+export declare function ToolbarRoot({ orientation, loop, experimental_focusgroup, className, style, children, render, ...rest }: ToolbarRootProps): import("react").JSX.Element;
+export declare namespace ToolbarRoot {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toolbar-root.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-root.d.mts","names":[],"sources":["../../src/toolbar/toolbar-root.tsx"],"mappings":";;;YASY;iBAEK;WACN,aAAa;;iBAGP,yBAAyB,KACxC;;EAYA,cAAc;;EAEd;;;;;;EAMA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;;wBAwBpC,cACd,aACA,MACA,yBACA,WACA,OACA,UACA,WACG,QACF,mCAAgB,IAAA;yBATH"}

package/dist/toolbar/toolbar-root.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { ToolbarContext } from "../internal/toolbar-context.mjs";
+import { useRovingFocus } from "../internal/use-roving-focus.mjs";
+import { useMemo, useRef, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/toolbar/toolbar-root.tsx
+/**
+* First entry: the first item. Natively `disabled` controls are not items; `aria-disabled` ones
+* are, and are entered like any other, as Chromium's native `focusgroup` does (the APG allows
+* focusable disabled items in a toolbar).
+*/
+function firstItem(items) {
+	return items[0];
+}
+/** Engine capabilities never change while the page lives. */
+const subscribeNever = () => () => {};
+/**
+* `<div role="toolbar" aria-orientation>` (WAI-ARIA APG Toolbar). Its items are its focusable
+* descendants, found in the DOM: one Tab stop (the last focused item), arrow keys, Home and End
+* between them (design/components/toggle-group.md section 6). Name it with `aria-label` or
+* `aria-labelledby`.
+*
+* Owned keys (conventions 1.2): `role`, `aria-orientation`, `data-orientation`, `onKeyDown`,
+* `onFocus`, `onBlur`, `onPointerDown`, and `focusgroup` while the flag is on.
+*/
+function ToolbarRoot({ orientation = "horizontal", loop = true, experimental_focusgroup = false, className, style, children, render, ...rest }) {
+	const native = useSyncExternalStore(subscribeNever, () => experimental_focusgroup && "focusGroup" in HTMLElement.prototype, () => false);
+	const rootRef = useRef(null);
+	const roving = useRovingFocus(rootRef, {
+		orientation,
+		loop,
+		native,
+		entry: firstItem,
+		memory: true
+	});
+	const context = useMemo(() => ({ orientation }), [orientation]);
+	const state = { orientation };
+	const focusgroup = experimental_focusgroup ? `toolbar ${orientation === "vertical" ? "block" : "inline"} ${loop ? "wrap" : "nowrap"}` : void 0;
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			role: "toolbar",
+			"aria-orientation": orientation,
+			"data-orientation": orientation,
+			...roving,
+			...focusgroup !== void 0 && { focusgroup }
+		},
+		ref: rootRef
+	});
+	return /* @__PURE__ */ jsx(ToolbarContext, {
+		value: context,
+		children: element
+	});
+}
+ToolbarRoot.displayName = "ToolbarRoot";
+//#endregion
+export { ToolbarRoot };
+
+//# sourceMappingURL=toolbar-root.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-root.mjs","names":[],"sources":["../../src/toolbar/toolbar-root.tsx"],"sourcesContent":["\"use client\";\nimport { useMemo, useRef, useSyncExternalStore } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { ToolbarContext } from \"../internal/toolbar-context.js\";\nimport type { ToolbarContextValue } from \"../internal/toolbar-context.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useRovingFocus } from \"../internal/use-roving-focus.js\";\n\nexport type ToolbarOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ToolbarRootState {\n  readonly orientation: ToolbarOrientation;\n}\n\nexport interface ToolbarRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  | \"role\"\n  | \"aria-orientation\"\n  | \"onKeyDown\"\n  | \"onFocus\"\n  | \"onBlur\"\n  | \"onPointerDown\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Axis of the arrow keys; also `aria-orientation`. Default `\"horizontal\"`. */\n  orientation?: ToolbarOrientation;\n  /** Whether arrows wrap from the last item to the first. Default `true`. */\n  loop?: boolean;\n  /**\n   * Render `focusgroup=\"toolbar …\"` and, where the browser implements it, let the browser handle\n   * arrow keys, Home and End and the single Tab stop. Chromium 150+ only; elsewhere the JS path\n   * stays active. Default `false`.\n   */\n  experimental_focusgroup?: boolean;\n  className?: StateValue<string | undefined, ToolbarRootState>;\n  style?: StateValue<CSSProperties | undefined, ToolbarRootState>;\n  children?: StateValue<ReactNode, ToolbarRootState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, ToolbarRootState>;\n}\n\n/**\n * First entry: the first item. Natively `disabled` controls are not items; `aria-disabled` ones\n * are, and are entered like any other, as Chromium's native `focusgroup` does (the APG allows\n * focusable disabled items in a toolbar).\n */\nfunction firstItem(items: readonly HTMLElement[]): HTMLElement | undefined {\n  return items[0];\n}\n\n/** Engine capabilities never change while the page lives. */\nconst subscribeNever = () => () => {};\n\n/**\n * `<div role=\"toolbar\" aria-orientation>` (WAI-ARIA APG Toolbar). Its items are its focusable\n * descendants, found in the DOM: one Tab stop (the last focused item), arrow keys, Home and End\n * between them (design/components/toggle-group.md section 6). Name it with `aria-label` or\n * `aria-labelledby`.\n *\n * Owned keys (conventions 1.2): `role`, `aria-orientation`, `data-orientation`, `onKeyDown`,\n * `onFocus`, `onBlur`, `onPointerDown`, and `focusgroup` while the flag is on.\n */\nexport function ToolbarRoot({\n  orientation = \"horizontal\",\n  loop = true,\n  experimental_focusgroup = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToolbarRootProps) {\n  // Conventions 8: the server snapshot is `false`, so hydration markup matches the server.\n  const native = useSyncExternalStore(\n    subscribeNever,\n    () => experimental_focusgroup && \"focusGroup\" in HTMLElement.prototype,\n    () => false,\n  );\n  const rootRef = useRef<HTMLElement | null>(null);\n  const roving = useRovingFocus(rootRef, {\n    orientation,\n    loop,\n    native,\n    entry: firstItem,\n    memory: true,\n  });\n\n  const context = useMemo<ToolbarContextValue>(() => ({ orientation }), [orientation]);\n  const state: ToolbarRootState = { orientation };\n\n  const focusgroup = experimental_focusgroup\n    ? `toolbar ${orientation === \"vertical\" ? \"block\" : \"inline\"} ${loop ? \"wrap\" : \"nowrap\"}`\n    : undefined;\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, ToolbarRootState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"toolbar\",\n      \"aria-orientation\": orientation,\n      \"data-orientation\": orientation,\n      ...roving,\n      ...(focusgroup !== undefined && { focusgroup }),\n    },\n    ref: rootRef,\n  });\n\n  return <ToolbarContext value={context}>{element}</ToolbarContext>;\n}\n\nToolbarRoot.displayName = \"ToolbarRoot\";\n"],"mappings":";;;;;;;;;;;;AAgDA,SAAS,UAAU,OAAwD;CACzE,OAAO,MAAM;AACf;;AAGA,MAAM,6BAA6B,CAAC;;;;;;;;;;AAWpC,SAAgB,YAAY,EAC1B,cAAc,cACd,OAAO,MACP,0BAA0B,OAC1B,WACA,OACA,UACA,QACA,GAAG,QACgB;CAEnB,MAAM,SAAS,qBACb,sBACM,2BAA2B,gBAAgB,YAAY,iBACvD,KACR;CACA,MAAM,UAAU,OAA2B,IAAI;CAC/C,MAAM,SAAS,eAAe,SAAS;EACrC;EACA;EACA;EACA,OAAO;EACP,QAAQ;CACV,CAAC;CAED,MAAM,UAAU,eAAoC,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;CACnF,MAAM,QAA0B,EAAE,YAAY;CAE9C,MAAM,aAAa,0BACf,WAAW,gBAAgB,aAAa,UAAU,SAAS,GAAG,OAAO,SAAS,aAC9E,KAAA;CAEJ,MAAM,UAAU,UAA0D;EACxE,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,MAAM;GACN,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,GAAI,eAAe,KAAA,KAAa,EAAE,WAAW;EAC/C;EACA,KAAK;CACP,CAAC;CAED,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA;CAAwB,CAAA;AAClE;AAEA,YAAY,cAAc"}

package/dist/toolbar/toolbar-separator.d.mts

@@ -0,0 +1,25 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { ToolbarOrientation } from "./toolbar-root.mjs";
+import { CSSProperties, ComponentPropsWithRef } from "react";
+//#region src/toolbar/toolbar-separator.d.ts
+export interface ToolbarSeparatorState {
+  /** The separator's own orientation: perpendicular to the Toolbar's. */
+  readonly orientation: ToolbarOrientation;
+}
+export interface ToolbarSeparatorProps extends Omit<ComponentPropsWithRef<"hr">, "aria-orientation" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, ToolbarSeparatorState>;
+  style?: StateValue<CSSProperties | undefined, ToolbarSeparatorState>;
+  render?: RenderProp<ComponentPropsWithRef<"hr">, ToolbarSeparatorState>;
+}
+/**
+ * `<hr aria-orientation>` between toolbar items: vertical in a horizontal Toolbar, horizontal in
+ * a vertical one. Not focusable, not an item.
+ *
+ * Owned keys (conventions 1.2): `aria-orientation`, `data-orientation`.
+ */
+export declare function ToolbarSeparator({ className, style, render, ...rest }: ToolbarSeparatorProps): import("react").ReactNode;
+export declare namespace ToolbarSeparator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=toolbar-separator.d.mts.map

package/dist/toolbar/toolbar-separator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-separator.d.mts","names":[],"sources":["../../src/toolbar/toolbar-separator.tsx"],"mappings":";;;;iBAOiB;;WAEN,aAAa;;iBAGP,8BAA8B,KAC7C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,SAAS,WAAW,6BAA6B;;;;;;;;wBASnC,mBAAmB,WAAW,OAAO,WAAW,QAAQ,wCAAqB;yBAA7E"}

package/dist/toolbar/toolbar-separator.mjs

@@ -0,0 +1,31 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useToolbarContext } from "../internal/toolbar-context.mjs";
+//#region src/toolbar/toolbar-separator.tsx
+/**
+* `<hr aria-orientation>` between toolbar items: vertical in a horizontal Toolbar, horizontal in
+* a vertical one. Not focusable, not an item.
+*
+* Owned keys (conventions 1.2): `aria-orientation`, `data-orientation`.
+*/
+function ToolbarSeparator({ className, style, render, ...rest }) {
+	const orientation = useToolbarContext()?.orientation === "vertical" ? "horizontal" : "vertical";
+	return useRender({
+		defaultElement: "hr",
+		render,
+		state: { orientation },
+		className,
+		style,
+		children: void 0,
+		props: rest,
+		libraryProps: {
+			"aria-orientation": orientation,
+			"data-orientation": orientation
+		}
+	});
+}
+ToolbarSeparator.displayName = "ToolbarSeparator";
+//#endregion
+export { ToolbarSeparator };
+
+//# sourceMappingURL=toolbar-separator.mjs.map

package/dist/toolbar/toolbar-separator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-separator.mjs","names":[],"sources":["../../src/toolbar/toolbar-separator.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties } from \"react\";\nimport { useToolbarContext } from \"../internal/toolbar-context.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport type { ToolbarOrientation } from \"./toolbar-root.js\";\n\nexport interface ToolbarSeparatorState {\n  /** The separator's own orientation: perpendicular to the Toolbar's. */\n  readonly orientation: ToolbarOrientation;\n}\n\nexport interface ToolbarSeparatorProps extends Omit<\n  ComponentPropsWithRef<\"hr\">,\n  \"aria-orientation\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, ToolbarSeparatorState>;\n  style?: StateValue<CSSProperties | undefined, ToolbarSeparatorState>;\n  render?: RenderProp<ComponentPropsWithRef<\"hr\">, ToolbarSeparatorState>;\n}\n\n/**\n * `<hr aria-orientation>` between toolbar items: vertical in a horizontal Toolbar, horizontal in\n * a vertical one. Not focusable, not an item.\n *\n * Owned keys (conventions 1.2): `aria-orientation`, `data-orientation`.\n */\nexport function ToolbarSeparator({ className, style, render, ...rest }: ToolbarSeparatorProps) {\n  const toolbar = useToolbarContext();\n  const orientation: ToolbarOrientation =\n    toolbar?.orientation === \"vertical\" ? \"horizontal\" : \"vertical\";\n  const state: ToolbarSeparatorState = { orientation };\n\n  return useRender<ComponentPropsWithRef<\"hr\">, ToolbarSeparatorState>({\n    defaultElement: \"hr\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    props: rest,\n    libraryProps: {\n      \"aria-orientation\": orientation,\n      \"data-orientation\": orientation,\n    },\n  });\n}\n\nToolbarSeparator.displayName = \"ToolbarSeparator\";\n"],"mappings":";;;;;;;;;;AA2BA,SAAgB,iBAAiB,EAAE,WAAW,OAAO,QAAQ,GAAG,QAA+B;CAE7F,MAAM,cADU,kBAER,CAAC,EAAE,gBAAgB,aAAa,eAAe;CAGvD,OAAO,UAA8D;EACnE,gBAAgB;EAChB;EACA,OAAA,EALqC,YAKjC;EACJ;EACA;EACA,UAAU,KAAA;EACV,OAAO;EACP,cAAc;GACZ,oBAAoB;GACpB,oBAAoB;EACtB;CACF,CAAC;AACH;AAEA,iBAAiB,cAAc"}

package/dist/tooltip/tooltip-popup.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { POSITION_TRY_FALLBACKS, positionArea } from "../internal/anchor-position.mjs";
 import { useTooltipContext } from "./tooltip-context.mjs";
 //#region src/tooltip/tooltip-popup.tsx