@windmorph/react 0.0.0-stage → 0.1.1

package/dist/primitives/ButtonBase.js

@@ -0,0 +1,231 @@
+"use client";
+import { TriggerContext } from "./TriggerContext.js";
+import { useM3Interaction } from "./use-m3-interaction.js";
+import { createContext, useContext, useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps, mergeRefs, useButton, useLink, useObjectRef, useToggleButton, useToggleButtonGroupItem } from "react-aria";
+import { useToggleState } from "react-stately";
+//#region src/primitives/ButtonBase.tsx
+/**
+* Selection state of an enclosing toggle group (e.g. a connected `ButtonGroup`). Toggle
+* buttons with a `value` inside it are selected through the group instead of on their own.
+*/
+const ToggleGroupStateContext = createContext(null);
+function splitProps(props) {
+	const { disabled = false, pending: pendingProp = false, className, style, children, onPress, onPressStart, onPressEnd, onPressChange, onPressUp, preventFocusOnPress, dragged, ...dom } = props;
+	const consumerDragged = dom["data-dragged"];
+	const pending = pendingProp && !disabled;
+	return {
+		disabled,
+		pending,
+		/** Presses, hover and the pressed state are off: disabled, or pending. */
+		blocked: disabled || pending,
+		isDragged: dragged ?? (consumerDragged !== void 0 && consumerDragged !== false && consumerDragged !== "false"),
+		element: {
+			className,
+			style
+		},
+		children,
+		press: {
+			onPress,
+			onPressStart,
+			onPressEnd,
+			onPressChange,
+			onPressUp,
+			preventFocusOnPress
+		},
+		dom
+	};
+}
+/**
+* While a submit button is pending it renders `type="button"`, but a form left without a submit
+* button still submits on Enter in its only field (HTML's implicit submission). This stops a
+* submission with no submitter (or this button) before it reaches React or the browser, so
+* Enter doesn't send the form again; another submit button of the form still works.
+*/
+function useBlockImplicitSubmit(ref, enabled) {
+	useEffect(() => {
+		const button = ref.current;
+		const form = button instanceof HTMLButtonElement ? button.form : null;
+		if (!enabled || !form) return;
+		const block = (event) => {
+			const submitter = event.submitter;
+			if (submitter && submitter !== button) return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		form.addEventListener("submit", block, true);
+		return () => form.removeEventListener("submit", block, true);
+	}, [ref, enabled]);
+}
+/** A pending element ignores clicks: a consumer's `onClick` is left out while it waits. */
+function withoutClickWhilePending(dom, pending) {
+	if (!pending) return dom;
+	const { onClick: _onClick, ...rest } = dom;
+	return rest;
+}
+/**
+* What a pending element changes on top of the blocked hooks' props (React Aria's pending
+* `Button`): it stays focusable (React Aria's `isDisabled` would make a `<button>` natively
+* disabled and drop its tab stop), says it's unavailable with `aria-disabled`, and keeps the
+* enabled look (`data-disabled` only for `disabled`).
+*/
+function pendingAttributes(pending, dom) {
+	return pending ? {
+		disabled: void 0,
+		tabIndex: dom.tabIndex ?? 0,
+		"aria-disabled": true,
+		"data-disabled": void 0,
+		"data-pending": true
+	} : {};
+}
+const render = (children, isSelected) => typeof children === "function" ? children({ isSelected }) : children;
+function ActionBase(props) {
+	const { ref, as: elementType = "button", ...rest } = props;
+	const type = elementType === "button" ? rest.type ?? "button" : void 0;
+	const { pending, blocked, isDragged, element, children, press, dom } = splitProps(rest);
+	const domRest = withoutClickWhilePending(dom, pending);
+	const domRef = useObjectRef(ref);
+	const { buttonProps, isPressed } = useButton({
+		...press,
+		type,
+		isDisabled: blocked,
+		elementType
+	}, domRef);
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: blocked,
+		isPressed,
+		isDragged
+	}, domRef);
+	useBlockImplicitSubmit(domRef, pending && type === "submit");
+	const elementProps = {
+		...mergeProps(domRest, buttonProps, interactionProps),
+		...dataAttributes,
+		...pendingAttributes(pending, domRest),
+		...pending && type === "submit" ? { type: "button" } : {},
+		...element
+	};
+	return elementType === "div" ? /* @__PURE__ */ jsx("div", {
+		...elementProps,
+		ref: domRef,
+		children: render(children, false)
+	}) : /* @__PURE__ */ jsx("button", {
+		...elementProps,
+		ref: domRef,
+		children: render(children, false)
+	});
+}
+function LinkBase({ ref, href, ...props }) {
+	const { disabled, pending, blocked, isDragged, element, children, press, dom } = splitProps(props);
+	const domRest = withoutClickWhilePending(dom, pending);
+	const domRef = useObjectRef(ref);
+	const { linkProps, isPressed } = useLink({
+		...press,
+		href,
+		isDisabled: blocked,
+		elementType: "a"
+	}, domRef);
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: blocked,
+		isPressed,
+		isDragged
+	}, domRef);
+	return /* @__PURE__ */ jsx("a", {
+		...mergeProps(domRest, linkProps, interactionProps),
+		...dataAttributes,
+		...pendingAttributes(pending, domRest),
+		...element,
+		href: disabled ? void 0 : href,
+		ref: domRef,
+		children: render(children, false)
+	});
+}
+function ToggleBase({ ref, type = "button", selected, defaultSelected, onSelectedChange, toggle, ...props }) {
+	const { disabled, isDragged, element, children, press, dom } = splitProps(props);
+	const domRef = useObjectRef(ref);
+	const options = {
+		...press,
+		type,
+		isDisabled: disabled,
+		isSelected: selected,
+		defaultSelected,
+		onChange: onSelectedChange,
+		elementType: "button"
+	};
+	const state = useToggleState(options);
+	const { buttonProps, isPressed, isSelected } = useToggleButton(options, state, domRef);
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: disabled,
+		isPressed,
+		isSelected,
+		isDragged
+	}, domRef);
+	return /* @__PURE__ */ jsx("button", {
+		...mergeProps(dom, buttonProps, interactionProps),
+		...dataAttributes,
+		...element,
+		ref: domRef,
+		children: render(children, isSelected)
+	});
+}
+function GroupItemBase({ ref, type = "button", value, state, ...props }) {
+	const { disabled, isDragged, element, children, press, dom } = splitProps(props);
+	const domRef = useObjectRef(ref);
+	const { buttonProps, isPressed, isSelected } = useToggleButtonGroupItem({
+		...press,
+		id: value,
+		isDisabled: disabled,
+		elementType: "button"
+	}, state, domRef);
+	const { interactionProps, dataAttributes } = useM3Interaction({
+		isDisabled: disabled || state.isDisabled,
+		isPressed,
+		isSelected,
+		isDragged
+	}, domRef);
+	return /* @__PURE__ */ jsx("button", {
+		...mergeProps(dom, buttonProps, interactionProps),
+		...dataAttributes,
+		...element,
+		type,
+		value,
+		ref: domRef,
+		children: render(children, isSelected)
+	});
+}
+function withTrigger(props, { ref: triggerRef, ...trigger }) {
+	return {
+		...mergeProps(trigger, props),
+		ref: mergeRefs(props.ref, triggerRef)
+	};
+}
+/**
+* Unstyled button behaviour shared by every button-like component: a `<button>`, a
+* link (`href`) or a toggle (`toggle`), with React Aria press, focus and keyboard
+* handling, and the M3 interaction `data-*` attributes and ripple origin from
+* `useM3Interaction`. DOM props pass through; `className` and `style` go on the element.
+* `pending` blocks presses but keeps focus (see {@link ButtonBasePendingProps}).
+*/
+function ButtonBase(ownProps) {
+	const groupState = useContext(ToggleGroupStateContext);
+	const trigger = useContext(TriggerContext);
+	const props = trigger ? withTrigger(ownProps, trigger) : ownProps;
+	if (props.href !== void 0) return /* @__PURE__ */ jsx(LinkBase, { ...props });
+	if (props.toggle) {
+		if (groupState && props.value !== void 0) {
+			const { selected, defaultSelected, onSelectedChange, toggle, value, ...item } = props;
+			if (process.env.NODE_ENV !== "production" && (selected !== void 0 || defaultSelected !== void 0 || onSelectedChange)) console.warn(`[@windmorph/react] Toggle "${value}" is inside a selection group; use the group's selectedKeys instead of selected / onSelectedChange.`);
+			return /* @__PURE__ */ jsx(GroupItemBase, {
+				...item,
+				value,
+				state: groupState
+			});
+		}
+		return /* @__PURE__ */ jsx(ToggleBase, { ...props });
+	}
+	return /* @__PURE__ */ jsx(ActionBase, { ...props });
+}
+//#endregion
+export { ButtonBase, ToggleGroupStateContext };
+
+//# sourceMappingURL=ButtonBase.js.map

package/dist/primitives/ButtonBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBase.js","names":[],"sources":["../../src/primitives/ButtonBase.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  type RefObject,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {\n  mergeProps,\n  mergeRefs,\n  useButton,\n  useLink,\n  useObjectRef,\n  useToggleButton,\n  useToggleButtonGroupItem,\n  type PressEvents,\n} from 'react-aria';\nimport { useToggleState, type ToggleGroupState } from 'react-stately';\nimport { TriggerContext, type TriggerContextValue } from './TriggerContext';\nimport { useM3Interaction } from './use-m3-interaction';\n\n/**\n * Selection state of an enclosing toggle group (e.g. a connected `ButtonGroup`). Toggle\n * buttons with a `value` inside it are selected through the group instead of on their own.\n */\nexport const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);\n\ntype PressHandlers = Pick<\n  PressEvents,\n  'onPress' | 'onPressStart' | 'onPressEnd' | 'onPressChange' | 'onPressUp'\n> & {\n  /** Don't move focus to the element on press (set by menu triggers). @default false */\n  preventFocusOnPress?: boolean;\n};\n\nexport interface ButtonBaseRenderState {\n  isSelected: boolean;\n}\n\ninterface ButtonBaseCommonProps extends PressHandlers {\n  /** Disables the element: it can't be pressed or focused, and shows the disabled style. @default false */\n  disabled?: boolean;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n  /**\n   * The element is being dragged (e.g. a card picked up to move it): sets `data-dragged`\n   * for the dragged state layer. A consumer's own `data-dragged` attribute counts too.\n   * @default false\n   */\n  dragged?: boolean;\n  /** Content, or a function of the selection state (e.g. to swap a toggle's icon). */\n  children?: ReactNode | ((state: ButtonBaseRenderState) => ReactNode);\n}\n\n/**\n * The pending state `Button` and `IconButton` build on. It isn't part of the other props types,\n * so components that extend them (FABs, chips, cards) don't inherit it; pass it to `ButtonBase`\n * alongside them.\n */\nexport interface ButtonBasePendingProps {\n  /**\n   * An action started by the element is running: presses are blocked (`onPress`, `onClick`,\n   * Enter and Space do nothing, no hover or pressed state), but the element stays focusable and\n   * in the Tab order, unlike `disabled`. Sets `aria-disabled=\"true\"` and `data-pending`; a\n   * submit button renders `type=\"button\"` meanwhile, so the form isn't submitted again, and a\n   * link keeps its `href` with its navigation prevented. `disabled` wins when both are set.\n   * A toggle ignores it.\n   * @default false\n   */\n  pending?: boolean;\n}\n\ntype OwnKeys = keyof ButtonBaseCommonProps | 'color';\n\nexport interface ButtonBaseActionProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'button'>, OwnKeys> {\n  /** Ref to the root `<button>` element. */\n  ref?: Ref<HTMLButtonElement>;\n  /** The element rendered: a native `<button>`. @default \"button\" */\n  as?: 'button';\n  /**\n   * The value a submit button sends with its form, under its `name`. On a toggle (`toggle`)\n   * it's a `string` naming the button in a selection group instead, required to take part in\n   * the group's selection.\n   */\n  value?: ComponentPropsWithoutRef<'button'>['value'];\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\n/**\n * A `div` with `role=\"button\"`, for pressable containers whose content a `<button>` may\n * not hold (headings, images, block layout), such as clickable cards.\n */\nexport interface ButtonBaseDivActionProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'div'>, OwnKeys> {\n  /** Ref to the root `<div>` element. */\n  ref?: Ref<HTMLDivElement>;\n  /** Renders a `div` with `role=\"button\"`, for content a `<button>` may not hold. */\n  as: 'div';\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\nexport interface ButtonBaseLinkProps\n  extends ButtonBaseCommonProps, Omit<ComponentPropsWithoutRef<'a'>, OwnKeys | 'href'> {\n  /** Ref to the root `<a>` element. */\n  ref?: Ref<HTMLAnchorElement>;\n  /** Renders a link. Navigation goes through React Aria's `RouterProvider` when one is set. */\n  href: string;\n  /** Makes the button a toggle (`aria-pressed`) with `selected` and `onSelectedChange`. @default false */\n  toggle?: false;\n}\n\nexport interface ButtonBaseToggleProps\n  extends\n    ButtonBaseCommonProps,\n    Omit<ComponentPropsWithoutRef<'button'>, OwnKeys | 'aria-pressed' | 'onChange'> {\n  /** Ref to the root `<button>` element. */\n  ref?: Ref<HTMLButtonElement>;\n  /** Renders a link (`<a>`) instead of a button. */\n  href?: undefined;\n  /** Makes the button a toggle (`aria-pressed`). */\n  toggle: true;\n  /** Identifies the button in a selection group; required to take part in its selection. */\n  value?: string;\n  /** Controlled selection. Ignored inside a selection group. */\n  selected?: boolean;\n  /** Initial selection when uncontrolled. */\n  defaultSelected?: boolean;\n  /** Called with the new selection when the user toggles the button. */\n  onSelectedChange?: (selected: boolean) => void;\n}\n\nexport type ButtonBaseProps =\n  ButtonBaseActionProps | ButtonBaseDivActionProps | ButtonBaseLinkProps | ButtonBaseToggleProps;\n\nfunction splitProps<T extends ButtonBaseCommonProps & { pending?: boolean }>(props: T) {\n  const {\n    disabled = false,\n    pending: pendingProp = false,\n    className,\n    style,\n    children,\n    onPress,\n    onPressStart,\n    onPressEnd,\n    onPressChange,\n    onPressUp,\n    preventFocusOnPress,\n    dragged,\n    ...dom\n  } = props;\n  const consumerDragged = (dom as Record<string, unknown>)['data-dragged'];\n  // `disabled` wins: a disabled element is natively disabled even while its action runs.\n  const pending = pendingProp && !disabled;\n  return {\n    disabled,\n    pending,\n    /** Presses, hover and the pressed state are off: disabled, or pending. */\n    blocked: disabled || pending,\n    // Our `data-*` attributes are spread last, so a consumer's `data-dragged` feeds the state.\n    isDragged:\n      dragged ??\n      (consumerDragged !== undefined && consumerDragged !== false && consumerDragged !== 'false'),\n    element: { className, style },\n    children,\n    // React Aria options, not DOM attributes: they go to the press hooks.\n    press: { onPress, onPressStart, onPressEnd, onPressChange, onPressUp, preventFocusOnPress },\n    dom,\n  };\n}\n\n/**\n * While a submit button is pending it renders `type=\"button\"`, but a form left without a submit\n * button still submits on Enter in its only field (HTML's implicit submission). This stops a\n * submission with no submitter (or this button) before it reaches React or the browser, so\n * Enter doesn't send the form again; another submit button of the form still works.\n */\nfunction useBlockImplicitSubmit(ref: RefObject<HTMLElement | null>, enabled: boolean) {\n  useEffect(() => {\n    const button = ref.current;\n    const form = button instanceof HTMLButtonElement ? button.form : null;\n    if (!enabled || !form) return;\n    const block = (event: Event) => {\n      // A plain `Event` (no `submitter`) counts as implicit too.\n      const submitter = (event as Partial<SubmitEvent>).submitter;\n      if (submitter && submitter !== button) return;\n      event.preventDefault();\n      event.stopPropagation();\n    };\n    form.addEventListener('submit', block, true);\n    return () => form.removeEventListener('submit', block, true);\n  }, [ref, enabled]);\n}\n\n/** A pending element ignores clicks: a consumer's `onClick` is left out while it waits. */\nfunction withoutClickWhilePending<T extends { onClick?: unknown }>(dom: T, pending: boolean) {\n  if (!pending) return dom;\n  const { onClick: _onClick, ...rest } = dom;\n  return rest;\n}\n\n/**\n * What a pending element changes on top of the blocked hooks' props (React Aria's pending\n * `Button`): it stays focusable (React Aria's `isDisabled` would make a `<button>` natively\n * disabled and drop its tab stop), says it's unavailable with `aria-disabled`, and keeps the\n * enabled look (`data-disabled` only for `disabled`).\n */\nfunction pendingAttributes(pending: boolean, dom: { tabIndex?: number }) {\n  return pending\n    ? {\n        disabled: undefined,\n        tabIndex: dom.tabIndex ?? 0,\n        'aria-disabled': true as const,\n        'data-disabled': undefined,\n        'data-pending': true as const,\n      }\n    : {};\n}\n\nconst render = (children: ButtonBaseCommonProps['children'], isSelected: boolean) =>\n  typeof children === 'function' ? children({ isSelected }) : children;\n\nfunction ActionBase(\n  props: (ButtonBaseActionProps | ButtonBaseDivActionProps) & ButtonBasePendingProps,\n) {\n  const { ref, as: elementType = 'button', ...rest } = props;\n  const type =\n    elementType === 'button' ? ((rest as ButtonBaseActionProps).type ?? 'button') : undefined;\n  const { pending, blocked, isDragged, element, children, press, dom } = splitProps(rest);\n  const domRest = withoutClickWhilePending(dom, pending);\n  const domRef = useObjectRef(ref as Ref<HTMLElement>);\n  const { buttonProps, isPressed } = useButton(\n    { ...press, type, isDisabled: blocked, elementType },\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: blocked, isPressed, isDragged },\n    domRef,\n  );\n  useBlockImplicitSubmit(domRef, pending && type === 'submit');\n  const elementProps = {\n    ...mergeProps(domRest, buttonProps, interactionProps),\n    ...dataAttributes,\n    ...pendingAttributes(pending, domRest),\n    // Enter in a form's field would submit it again through a pending submit button.\n    ...(pending && type === 'submit' ? { type: 'button' as const } : {}),\n    ...element,\n  };\n  return elementType === 'div' ? (\n    <div {...elementProps} ref={domRef as Ref<HTMLDivElement>}>\n      {render(children, false)}\n    </div>\n  ) : (\n    <button {...elementProps} ref={domRef as Ref<HTMLButtonElement>}>\n      {render(children, false)}\n    </button>\n  );\n}\n\nfunction LinkBase({ ref, href, ...props }: ButtonBaseLinkProps & ButtonBasePendingProps) {\n  const { disabled, pending, blocked, isDragged, element, children, press, dom } =\n    splitProps(props);\n  const domRest = withoutClickWhilePending(dom, pending);\n  const domRef = useObjectRef(ref);\n  const { linkProps, isPressed } = useLink(\n    // While blocked, the press hook prevents a click's navigation.\n    { ...press, href, isDisabled: blocked, elementType: 'a' },\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: blocked, isPressed, isDragged },\n    domRef,\n  );\n  return (\n    <a\n      {...mergeProps(domRest, linkProps, interactionProps)}\n      {...dataAttributes}\n      {...pendingAttributes(pending, domRest)}\n      {...element}\n      // A pending link stays a link (role and tab stop); only a disabled one drops `href`.\n      href={disabled ? undefined : href}\n      ref={domRef}\n    >\n      {render(children, false)}\n    </a>\n  );\n}\n\nfunction ToggleBase({\n  ref,\n  type = 'button',\n  selected,\n  defaultSelected,\n  onSelectedChange,\n  toggle,\n  ...props\n}: ButtonBaseToggleProps) {\n  const { disabled, isDragged, element, children, press, dom } = splitProps(props);\n  const domRef = useObjectRef(ref);\n  const options = {\n    ...press,\n    type,\n    isDisabled: disabled,\n    isSelected: selected,\n    defaultSelected,\n    onChange: onSelectedChange,\n    elementType: 'button' as const,\n  };\n  const state = useToggleState(options);\n  const { buttonProps, isPressed, isSelected } = useToggleButton(options, state, domRef);\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled, isPressed, isSelected, isDragged },\n    domRef,\n  );\n  return (\n    <button\n      {...mergeProps(dom, buttonProps, interactionProps)}\n      {...dataAttributes}\n      {...element}\n      ref={domRef}\n    >\n      {render(children, isSelected)}\n    </button>\n  );\n}\n\nfunction GroupItemBase({\n  ref,\n  type = 'button',\n  value,\n  state,\n  ...props\n}: Omit<ButtonBaseToggleProps, 'selected' | 'defaultSelected' | 'onSelectedChange' | 'toggle'> & {\n  value: string;\n  state: ToggleGroupState;\n}) {\n  const { disabled, isDragged, element, children, press, dom } = splitProps(props);\n  const domRef = useObjectRef(ref);\n  const { buttonProps, isPressed, isSelected } = useToggleButtonGroupItem(\n    { ...press, id: value, isDisabled: disabled, elementType: 'button' },\n    state,\n    domRef,\n  );\n  const { interactionProps, dataAttributes } = useM3Interaction(\n    { isDisabled: disabled || state.isDisabled, isPressed, isSelected, isDragged },\n    domRef,\n  );\n  return (\n    <button\n      {...mergeProps(dom, buttonProps, interactionProps)}\n      {...dataAttributes}\n      {...element}\n      type={type}\n      value={value}\n      ref={domRef}\n    >\n      {render(children, isSelected)}\n    </button>\n  );\n}\n\nfunction withTrigger(\n  props: ButtonBaseProps,\n  { ref: triggerRef, ...trigger }: TriggerContextValue,\n): ButtonBaseProps {\n  const merged = mergeProps(trigger, props) as ButtonBaseProps;\n  return {\n    ...merged,\n    ref: mergeRefs(props.ref as Ref<HTMLElement>, triggerRef as Ref<HTMLElement>),\n  } as ButtonBaseProps;\n}\n\n/**\n * Unstyled button behaviour shared by every button-like component: a `<button>`, a\n * link (`href`) or a toggle (`toggle`), with React Aria press, focus and keyboard\n * handling, and the M3 interaction `data-*` attributes and ripple origin from\n * `useM3Interaction`. DOM props pass through; `className` and `style` go on the element.\n * `pending` blocks presses but keeps focus (see {@link ButtonBasePendingProps}).\n */\nexport function ButtonBase(ownProps: ButtonBaseProps & ButtonBasePendingProps) {\n  const groupState = useContext(ToggleGroupStateContext);\n  const trigger = useContext(TriggerContext);\n  // An enclosing overlay trigger adds its press handler (chained), ARIA attributes and ref.\n  const props = trigger ? withTrigger(ownProps, trigger) : ownProps;\n  if (props.href !== undefined) return <LinkBase {...props} />;\n  if (props.toggle) {\n    if (groupState && props.value !== undefined) {\n      const { selected, defaultSelected, onSelectedChange, toggle, value, ...item } = props;\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        (selected !== undefined || defaultSelected !== undefined || onSelectedChange)\n      ) {\n        console.warn(\n          `[@windmorph/react] Toggle \"${value}\" is inside a selection group; use the group's selectedKeys instead of selected / onSelectedChange.`,\n        );\n      }\n      return <GroupItemBase {...item} value={value} state={groupState} />;\n    }\n    return <ToggleBase {...props} />;\n  }\n  return <ActionBase {...props} />;\n}\n"],"mappings":"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"}

package/dist/primitives/DomDirectionLocale.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, RefCallback } from "react";
+//#region src/primitives/DomDirectionLocale.d.ts
+export interface DomDirectionLocaleProps {
+  /**
+   * Renders the content. Attach the ref to the element whose laid-out direction should
+   * drive React Aria (usually the component's root).
+   */
+  children: (directionRef: RefCallback<HTMLElement>) => ReactNode;
+}
+/**
+ * React Aria takes keyboard direction (arrow keys, `start` / `end`) from its locale, not
+ * the DOM `dir`, so a component inside an RTL region without an `I18nProvider` would move
+ * the wrong way. This reads the element's computed direction and, when it differs from
+ * the locale's, provides the same locale with the matching direction to its content.
+ */
+export declare function DomDirectionLocale({ children }: DomDirectionLocaleProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=DomDirectionLocale.d.ts.map

package/dist/primitives/DomDirectionLocale.js

@@ -0,0 +1,28 @@
+"use client";
+import { localeWithDirection } from "./locale-with-direction.js";
+import { useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { I18nProvider, useLocale } from "react-aria";
+//#region src/primitives/DomDirectionLocale.tsx
+/**
+* React Aria takes keyboard direction (arrow keys, `start` / `end`) from its locale, not
+* the DOM `dir`, so a component inside an RTL region without an `I18nProvider` would move
+* the wrong way. This reads the element's computed direction and, when it differs from
+* the locale's, provides the same locale with the matching direction to its content.
+*/
+function DomDirectionLocale({ children }) {
+	const { locale, direction: localeDirection } = useLocale();
+	const [direction, setDirection] = useState(localeDirection);
+	const directionRef = useCallback((element) => {
+		if (element) setDirection(getComputedStyle(element).direction === "rtl" ? "rtl" : "ltr");
+	}, []);
+	const effectiveLocale = direction === localeDirection ? locale : localeWithDirection(locale, direction);
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale: effectiveLocale,
+		children: children(directionRef)
+	});
+}
+//#endregion
+export { DomDirectionLocale };
+
+//# sourceMappingURL=DomDirectionLocale.js.map

package/dist/primitives/DomDirectionLocale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DomDirectionLocale.js","names":[],"sources":["../../src/primitives/DomDirectionLocale.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState, type ReactNode, type RefCallback } from 'react';\nimport { I18nProvider, useLocale } from 'react-aria';\nimport { localeWithDirection } from './locale-with-direction';\n\nexport interface DomDirectionLocaleProps {\n  /**\n   * Renders the content. Attach the ref to the element whose laid-out direction should\n   * drive React Aria (usually the component's root).\n   */\n  children: (directionRef: RefCallback<HTMLElement>) => ReactNode;\n}\n\n/**\n * React Aria takes keyboard direction (arrow keys, `start` / `end`) from its locale, not\n * the DOM `dir`, so a component inside an RTL region without an `I18nProvider` would move\n * the wrong way. This reads the element's computed direction and, when it differs from\n * the locale's, provides the same locale with the matching direction to its content.\n */\nexport function DomDirectionLocale({ children }: DomDirectionLocaleProps) {\n  const { locale, direction: localeDirection } = useLocale();\n  const [direction, setDirection] = useState(localeDirection);\n  const directionRef = useCallback<RefCallback<HTMLElement>>((element) => {\n    if (element) setDirection(getComputedStyle(element).direction === 'rtl' ? 'rtl' : 'ltr');\n  }, []);\n  const effectiveLocale =\n    direction === localeDirection ? locale : localeWithDirection(locale, direction);\n  return <I18nProvider locale={effectiveLocale}>{children(directionRef)}</I18nProvider>;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAgB,mBAAmB,EAAE,YAAqC;CACxE,MAAM,EAAE,QAAQ,WAAW,oBAAoB,UAAU;CACzD,MAAM,CAAC,WAAW,gBAAgB,SAAS,eAAe;CAC1D,MAAM,eAAe,aAAuC,YAAY;EACtE,IAAI,SAAS,aAAa,iBAAiB,OAAO,CAAC,CAAC,cAAc,QAAQ,QAAQ,KAAK;CACzF,GAAG,CAAC,CAAC;CACL,MAAM,kBACJ,cAAc,kBAAkB,SAAS,oBAAoB,QAAQ,SAAS;CAChF,OAAO,oBAAC,cAAD;EAAc,QAAQ;EAAkB,UAAA,SAAS,YAAY;CAAgB,CAAA;AACtF"}

package/dist/primitives/Field.d.ts

@@ -0,0 +1,50 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/primitives/Field.d.ts
+/**
+ * Field parts shared by text fields, selects and other form controls. They take
+ * the prop objects returned by React Aria field hooks (`labelProps`,
+ * `descriptionProps`, `errorMessageProps`) by spreading them.
+ */
+export type FieldLabelProps = ComponentPropsWithRef<'label'>;
+/** Field label. Inherits its colour so the field can tint it per state. */
+export declare function FieldLabel({ className, ...props }: FieldLabelProps): import("react").JSX.Element;
+export type SupportingTextProps = ComponentPropsWithRef<'div'>;
+/** Helper text below a field. */
+export declare function SupportingText({ className, ...props }: SupportingTextProps): import("react").JSX.Element;
+export type ErrorTextProps = ComponentPropsWithRef<'div'>;
+/**
+ * Validation message below a field, shown in place of the supporting text. It has the
+ * `alert` role (M3 text field accessibility), so screen readers announce it as it appears;
+ * pass another `role` to change that.
+ */
+export declare function ErrorText({ className, ...props }: ErrorTextProps): import("react").JSX.Element;
+export interface CharacterCounterProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  /** Current number of characters. */
+  count: number;
+  /** Maximum number of characters. */
+  max: number;
+  /**
+   * What assistive tech reads for the counter, e.g. "Character count: 12 of 80" (M3 calls it
+   * the "character count"). Give the counter an `id` and add it to the input's
+   * `aria-describedby`. Without it the counter is hidden from assistive tech.
+   */
+  label?: string | undefined;
+}
+/**
+ * `count/max` character counter. With a `label`, screen readers read the label instead of
+ * the digits; without one, the counter is hidden from them.
+ */
+export declare function CharacterCounter({ count, max, label, className, ...props }: CharacterCounterProps): import("react").JSX.Element;
+export interface FieldErrorIconProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {
+  /** The icon's accessible name. M3: "Error". */
+  label: string;
+  /** Replaces the default Material Symbols `error` icon. */
+  icon?: ReactNode;
+}
+/**
+ * The icon a field shows in its error state (M3 strongly recommends one, as a cue that
+ * doesn't rely on colour). It has the `img` role and an accessible name, "Error" in M3.
+ */
+export declare function FieldErrorIcon({ label, icon, className, ...props }: FieldErrorIconProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Field.d.ts.map

package/dist/primitives/Field.js

@@ -0,0 +1,74 @@
+import { cn } from "../utils/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/Field.tsx
+/** Field label. Inherits its colour so the field can tint it per state. */
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx("label", {
+		...props,
+		className: cn("text-body-large font-plain", className)
+	});
+}
+/** Helper text below a field. */
+function SupportingText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("text-body-small font-plain text-on-surface-variant", className)
+	});
+}
+/**
+* Validation message below a field, shown in place of the supporting text. It has the
+* `alert` role (M3 text field accessibility), so screen readers announce it as it appears;
+* pass another `role` to change that.
+*/
+function ErrorText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		...props,
+		className: cn("text-body-small font-plain text-error", className)
+	});
+}
+/**
+* `count/max` character counter. With a `label`, screen readers read the label instead of
+* the digits; without one, the counter is hidden from them.
+*/
+function CharacterCounter({ count, max, label, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": label === void 0 ? true : void 0,
+		...props,
+		"data-over-limit": count > max ? true : void 0,
+		className: cn("text-body-small font-plain text-on-surface-variant tabular-nums data-over-limit:text-error", className),
+		children: label === void 0 ? `${count}/${max}` : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			"aria-hidden": "true",
+			children: [
+				count,
+				"/",
+				max
+			]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})] })
+	});
+}
+/**
+* The icon a field shows in its error state (M3 strongly recommends one, as a cue that
+* doesn't rely on colour). It has the `img` role and an accessible name, "Error" in M3.
+*/
+function FieldErrorIcon({ label, icon, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		role: "img",
+		"aria-label": label,
+		className: cn("inline-flex", className),
+		children: icon ?? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 -960 960 960",
+			fill: "currentColor",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z" })
+		})
+	});
+}
+//#endregion
+export { CharacterCounter, ErrorText, FieldErrorIcon, FieldLabel, SupportingText };
+
+//# sourceMappingURL=Field.js.map

package/dist/primitives/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","names":[],"sources":["../../src/primitives/Field.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cn } from '../utils/cn';\n\n/**\n * Field parts shared by text fields, selects and other form controls. They take\n * the prop objects returned by React Aria field hooks (`labelProps`,\n * `descriptionProps`, `errorMessageProps`) by spreading them.\n */\n\nexport type FieldLabelProps = ComponentPropsWithRef<'label'>;\n\n/** Field label. Inherits its colour so the field can tint it per state. */\nexport function FieldLabel({ className, ...props }: FieldLabelProps) {\n  return <label {...props} className={cn('text-body-large font-plain', className)} />;\n}\n\nexport type SupportingTextProps = ComponentPropsWithRef<'div'>;\n\n/** Helper text below a field. */\nexport function SupportingText({ className, ...props }: SupportingTextProps) {\n  return (\n    <div\n      {...props}\n      className={cn('text-body-small font-plain text-on-surface-variant', className)}\n    />\n  );\n}\n\nexport type ErrorTextProps = ComponentPropsWithRef<'div'>;\n\n/**\n * Validation message below a field, shown in place of the supporting text. It has the\n * `alert` role (M3 text field accessibility), so screen readers announce it as it appears;\n * pass another `role` to change that.\n */\nexport function ErrorText({ className, ...props }: ErrorTextProps) {\n  return (\n    <div\n      role=\"alert\"\n      {...props}\n      className={cn('text-body-small font-plain text-error', className)}\n    />\n  );\n}\n\nexport interface CharacterCounterProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  /** Current number of characters. */\n  count: number;\n  /** Maximum number of characters. */\n  max: number;\n  /**\n   * What assistive tech reads for the counter, e.g. \"Character count: 12 of 80\" (M3 calls it\n   * the \"character count\"). Give the counter an `id` and add it to the input's\n   * `aria-describedby`. Without it the counter is hidden from assistive tech.\n   */\n  label?: string | undefined;\n}\n\n/**\n * `count/max` character counter. With a `label`, screen readers read the label instead of\n * the digits; without one, the counter is hidden from them.\n */\nexport function CharacterCounter({\n  count,\n  max,\n  label,\n  className,\n  ...props\n}: CharacterCounterProps) {\n  return (\n    <div\n      aria-hidden={label === undefined ? true : undefined}\n      {...props}\n      data-over-limit={count > max ? true : undefined}\n      className={cn(\n        'text-body-small font-plain text-on-surface-variant tabular-nums data-over-limit:text-error',\n        className,\n      )}\n    >\n      {label === undefined ? (\n        `${count}/${max}`\n      ) : (\n        <>\n          <span aria-hidden=\"true\">\n            {count}/{max}\n          </span>\n          <span className=\"sr-only\">{label}</span>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport interface FieldErrorIconProps extends Omit<ComponentPropsWithRef<'span'>, 'children'> {\n  /** The icon's accessible name. M3: \"Error\". */\n  label: string;\n  /** Replaces the default Material Symbols `error` icon. */\n  icon?: ReactNode;\n}\n\n/**\n * The icon a field shows in its error state (M3 strongly recommends one, as a cue that\n * doesn't rely on colour). It has the `img` role and an accessible name, \"Error\" in M3.\n */\nexport function FieldErrorIcon({ label, icon, className, ...props }: FieldErrorIconProps) {\n  return (\n    <span {...props} role=\"img\" aria-label={label} className={cn('inline-flex', className)}>\n      {icon ?? (\n        <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\" aria-hidden=\"true\">\n          <path d=\"M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z\" />\n        </svg>\n      )}\n    </span>\n  );\n}\n"],"mappings":";;;;AAYA,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;CACnE,OAAO,oBAAC,SAAD;EAAO,GAAI;EAAO,WAAW,GAAG,8BAA8B,SAAS;CAAI,CAAA;AACpF;;AAKA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAA8B;CAC3E,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,sDAAsD,SAAS;CAC9E,CAAA;AAEL;;;;;;AASA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;CACjE,OACE,oBAAC,OAAD;EACE,MAAK;EACL,GAAI;EACJ,WAAW,GAAG,yCAAyC,SAAS;CACjE,CAAA;AAEL;;;;;AAmBA,SAAgB,iBAAiB,EAC/B,OACA,KACA,OACA,WACA,GAAG,SACqB;CACxB,OACE,oBAAC,OAAD;EACE,eAAa,UAAU,KAAA,IAAY,OAAO,KAAA;EAC1C,GAAI;EACJ,mBAAiB,QAAQ,MAAM,OAAO,KAAA;EACtC,WAAW,GACT,8FACA,SACF;EAEC,UAAA,UAAU,KAAA,IACT,GAAG,MAAM,GAAG,QAEZ,qBAAA,UAAA,EAAA,UAAA,CACE,qBAAC,QAAD;GAAM,eAAY;GAAlB,UAAA;IACG;IAAM;IAAE;GACL;EACN,CAAA,GAAA,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,CACvC,EAAA,CAAA;CAED,CAAA;AAET;;;;;AAaA,SAAgB,eAAe,EAAE,OAAO,MAAM,WAAW,GAAG,SAA8B;CACxF,OACE,oBAAC,QAAD;EAAM,GAAI;EAAO,MAAK;EAAM,cAAY;EAAO,WAAW,GAAG,eAAe,SAAS;EAClF,UAAA,QACC,oBAAC,OAAD;GAAK,SAAQ;GAAiB,MAAK;GAAe,eAAY;GAC5D,UAAA,oBAAC,QAAD,EAAM,GAAE,+TAAgU,CAAA;EACrU,CAAA;CAEH,CAAA;AAEV"}

package/dist/primitives/IconFaces.js

@@ -0,0 +1,23 @@
+import { iconFacesStyles } from "./icon-faces-styles.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/primitives/IconFaces.tsx
+/**
+* The two faces of a two-icon button, for an icon slot styled with `iconFacesStyles().cell`.
+* Both stay mounted in one grid cell and hand over with `transition`.
+*/
+function IconFaces({ icon, alternateIcon, alternate, transition }) {
+	const face = (kind, shown, content) => /* @__PURE__ */ jsx("span", {
+		"data-icon-face": kind,
+		"data-active": shown || void 0,
+		className: iconFacesStyles({
+			transition,
+			face: kind
+		}).face(),
+		children: content
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [face("primary", !alternate, icon), face("alternate", alternate, alternateIcon)] });
+}
+//#endregion
+export { IconFaces };
+
+//# sourceMappingURL=IconFaces.js.map

package/dist/primitives/IconFaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconFaces.js","names":[],"sources":["../../src/primitives/IconFaces.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { iconFacesStyles, type IconTransition } from './icon-faces-styles';\n\nexport interface IconFacesProps {\n  /** The resting icon (closed, or collapsed). */\n  icon: ReactElement;\n  /** The icon shown while `alternate` is true (open, or expanded). */\n  alternateIcon: ReactElement;\n  /** Shows `alternateIcon`. */\n  alternate: boolean;\n  /** @default \"swap\" */\n  transition?: IconTransition;\n}\n\n/**\n * The two faces of a two-icon button, for an icon slot styled with `iconFacesStyles().cell`.\n * Both stay mounted in one grid cell and hand over with `transition`.\n */\nexport function IconFaces({ icon, alternateIcon, alternate, transition }: IconFacesProps) {\n  const face = (kind: 'primary' | 'alternate', shown: boolean, content: ReactElement) => (\n    <span\n      data-icon-face={kind}\n      data-active={shown || undefined}\n      className={iconFacesStyles({ transition, face: kind }).face()}\n    >\n      {content}\n    </span>\n  );\n  return (\n    <>\n      {face('primary', !alternate, icon)}\n      {face('alternate', alternate, alternateIcon)}\n    </>\n  );\n}\n"],"mappings":";;;;;;;AAkBA,SAAgB,UAAU,EAAE,MAAM,eAAe,WAAW,cAA8B;CACxF,MAAM,QAAQ,MAA+B,OAAgB,YAC3D,oBAAC,QAAD;EACE,kBAAgB;EAChB,eAAa,SAAS,KAAA;EACtB,WAAW,gBAAgB;GAAE;GAAY,MAAM;EAAK,CAAC,CAAC,CAAC,KAAK;EAE3D,UAAA;CACG,CAAA;CAER,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,KAAK,WAAW,CAAC,WAAW,IAAI,GAChC,KAAK,aAAa,WAAW,aAAa,CAC3C,EAAA,CAAA;AAEN"}

package/dist/primitives/Overlay.d.ts

@@ -0,0 +1,39 @@
+import { Density } from "../tokens/density.js";
+import { ReactNode } from "react";
+//#region src/primitives/Overlay.d.ts
+export interface OverlayProps {
+  children: ReactNode;
+  /** Element to portal into. @default document.body */
+  portalContainer?: Element;
+  /** Leave focus handling to the caller instead of restoring it on unmount. */
+  disableFocusManagement?: boolean;
+  /** Whether the overlay is animating out; focus containment is released meanwhile. */
+  exiting?: boolean;
+  /**
+   * Float above every other layer, for overlays that must stay reachable whatever is open
+   * (tooltips). A modal open underneath (a dialog, sheet or viewer) does not hide it from
+   * assistive technology, does not pull focus out of it, and does not treat a press on it
+   * as a press outside. Uses React Aria's top-layer marker, as its toasts do.
+   */
+  topLayer?: boolean;
+  /**
+   * The density of the component the overlay belongs to, when it sets its own (`density`
+   * prop); by default the overlay takes the enclosing `ThemeProvider` / `ThemeScope`'s.
+   */
+  density?: Density | undefined;
+}
+/**
+ * Portals overlay content (dialogs, menus, sheets, tooltips) to `document.body`
+ * while keeping the theme, mode, contrast, motion scheme, density, **text direction and the
+ * enclosing `ThemeScope`s' classes and inline CSS variables** of the place it was rendered from, so overlays opened
+ * inside a `ThemeScope` or an RTL region still match it, and CSS variables set through a
+ * scope's class (component tokens) reach them. The wrapper is `display: contents`, so the
+ * classes affect only what children inherit. Dismissal, focus containment and scroll locking come from the React
+ * Aria overlay hooks (`useModalOverlay`, `usePopover`, …) of the component using it.
+ *
+ * A portalled overlay sits outside any modal it was opened from, so the modal's
+ * `ariaHideOutside` would mark it `aria-hidden`; `topLayer` keeps it visible.
+ */
+export declare function Overlay({ children, portalContainer, disableFocusManagement, exiting, topLayer, density }: OverlayProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Overlay.d.ts.map

package/dist/primitives/Overlay.js

@@ -0,0 +1,86 @@
+"use client";
+import { themeAttributes, themeAttributesOver } from "../theme/state.js";
+import { DocumentThemeContext, InheritedThemeContext, useThemeScope, useThemeScopeLayers } from "../theme/context.js";
+import { ToolbarContext } from "./ToolbarContext.js";
+import { useCallback, useContext, useId, useLayoutEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Overlay } from "react-aria";
+//#region src/primitives/Overlay.tsx
+/**
+* Portals overlay content (dialogs, menus, sheets, tooltips) to `document.body`
+* while keeping the theme, mode, contrast, motion scheme, density, **text direction and the
+* enclosing `ThemeScope`s' classes and inline CSS variables** of the place it was rendered from, so overlays opened
+* inside a `ThemeScope` or an RTL region still match it, and CSS variables set through a
+* scope's class (component tokens) reach them. The wrapper is `display: contents`, so the
+* classes affect only what children inherit. Dismissal, focus containment and scroll locking come from the React
+* Aria overlay hooks (`useModalOverlay`, `usePopover`, …) of the component using it.
+*
+* A portalled overlay sits outside any modal it was opened from, so the modal's
+* `ariaHideOutside` would mark it `aria-hidden`; `topLayer` keeps it visible.
+*/
+function Overlay$1({ children, portalContainer, disableFocusManagement, exiting, topLayer, density }) {
+	const scope = useThemeScope();
+	const themed = density === void 0 ? scope : {
+		...scope,
+		density
+	};
+	const documentTheme = useContext(DocumentThemeContext);
+	const [outerLayer, ...innerLayers] = useThemeScopeLayers();
+	const { "data-theme": layerTheme, "data-mode": layerMode, "data-contrast": layerContrast } = themeAttributes(themed);
+	const colorAttributes = {
+		"data-theme": layerTheme,
+		"data-mode": layerMode,
+		"data-contrast": layerContrast
+	};
+	const scopeId = useId();
+	const markerRef = useRef(null);
+	const scopeRef = useRef(null);
+	useLayoutEffect(() => {
+		if (markerRef.current && scopeRef.current) scopeRef.current.dir = getComputedStyle(markerRef.current).direction;
+	});
+	const attachMarker = useCallback((marker) => {
+		markerRef.current = marker;
+		if (!marker || typeof CSS === "undefined" || !CSS.supports("selector(:dir(rtl))")) return;
+		const wrapper = marker.ownerDocument.querySelector(`[data-overlay-scope="${CSS.escape(scopeId)}"]`);
+		if (wrapper) wrapper.dir = marker.matches(":dir(rtl)") ? "rtl" : "ltr";
+	}, [scopeId]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		ref: attachMarker,
+		hidden: true
+	}), /* @__PURE__ */ jsx(Overlay, {
+		portalContainer,
+		disableFocusManagement,
+		isExiting: exiting,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: scopeRef,
+			...themeAttributesOver(themed, portalContainer ? null : documentTheme, outerLayer !== void 0),
+			className: outerLayer?.className || void 0,
+			"data-overlay-scope": scopeId,
+			"data-react-aria-top-layer": topLayer || void 0,
+			style: {
+				...outerLayer?.variables,
+				display: "contents",
+				color: "var(--md-sys-color-on-surface)"
+			},
+			children: innerLayers.reduceRight((content, layer) => /* @__PURE__ */ jsx("div", {
+				...colorAttributes,
+				className: layer.className || void 0,
+				style: {
+					...layer.variables,
+					display: "contents"
+				},
+				children: content
+			}), /* @__PURE__ */ jsx(InheritedThemeContext, {
+				value: themed,
+				children: /* @__PURE__ */ jsx(ToolbarContext, {
+					value: null,
+					children
+				})
+			}))
+		})
+	})] });
+}
+//#endregion
+export { Overlay$1 as Overlay };
+
+//# sourceMappingURL=Overlay.js.map

package/dist/primitives/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","names":["Overlay","AriaOverlay"],"sources":["../../src/primitives/Overlay.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useContext, useId, useLayoutEffect, useRef, type ReactNode } from 'react';\nimport { Overlay as AriaOverlay } from 'react-aria';\nimport {\n  DocumentThemeContext,\n  InheritedThemeContext,\n  useThemeScope,\n  useThemeScopeLayers,\n} from '../theme/context';\nimport { themeAttributes, themeAttributesOver } from '../theme/state';\nimport type { Density } from '../tokens/density';\nimport { ToolbarContext } from './ToolbarContext';\n\nexport interface OverlayProps {\n  children: ReactNode;\n  /** Element to portal into. @default document.body */\n  portalContainer?: Element;\n  /** Leave focus handling to the caller instead of restoring it on unmount. */\n  disableFocusManagement?: boolean;\n  /** Whether the overlay is animating out; focus containment is released meanwhile. */\n  exiting?: boolean;\n  /**\n   * Float above every other layer, for overlays that must stay reachable whatever is open\n   * (tooltips). A modal open underneath (a dialog, sheet or viewer) does not hide it from\n   * assistive technology, does not pull focus out of it, and does not treat a press on it\n   * as a press outside. Uses React Aria's top-layer marker, as its toasts do.\n   */\n  topLayer?: boolean;\n  /**\n   * The density of the component the overlay belongs to, when it sets its own (`density`\n   * prop); by default the overlay takes the enclosing `ThemeProvider` / `ThemeScope`'s.\n   */\n  density?: Density | undefined;\n}\n\n/**\n * Portals overlay content (dialogs, menus, sheets, tooltips) to `document.body`\n * while keeping the theme, mode, contrast, motion scheme, density, **text direction and the\n * enclosing `ThemeScope`s' classes and inline CSS variables** of the place it was rendered from, so overlays opened\n * inside a `ThemeScope` or an RTL region still match it, and CSS variables set through a\n * scope's class (component tokens) reach them. The wrapper is `display: contents`, so the\n * classes affect only what children inherit. Dismissal, focus containment and scroll locking come from the React\n * Aria overlay hooks (`useModalOverlay`, `usePopover`, …) of the component using it.\n *\n * A portalled overlay sits outside any modal it was opened from, so the modal's\n * `ariaHideOutside` would mark it `aria-hidden`; `topLayer` keeps it visible.\n */\nexport function Overlay({\n  children,\n  portalContainer,\n  disableFocusManagement,\n  exiting,\n  topLayer,\n  density,\n}: OverlayProps) {\n  const scope = useThemeScope();\n  const themed = density === undefined ? scope : { ...scope, density };\n  // In `document.body`, the wrapper carries only what differs from `<html>`, so an app's own\n  // `:root` values for the system tokens reach the overlay too.\n  const documentTheme = useContext(DocumentThemeContext);\n  const [outerLayer, ...innerLayers] = useThemeScopeLayers();\n  // A scope's class or variables may set a colour role: each layer carries the colour\n  // attributes, so the values derived from the roles (elevation) resolve again with them.\n  const {\n    'data-theme': layerTheme,\n    'data-mode': layerMode,\n    'data-contrast': layerContrast,\n  } = themeAttributes(themed);\n  const colorAttributes = {\n    'data-theme': layerTheme,\n    'data-mode': layerMode,\n    'data-contrast': layerContrast,\n  };\n  const scopeId = useId();\n  const markerRef = useRef<HTMLSpanElement>(null);\n  const scopeRef = useRef<HTMLDivElement>(null);\n\n  // `dir` is inherited through the DOM, which a portal leaves; copy the direction in\n  // effect where the overlay is declared onto the portalled wrapper.\n  useLayoutEffect(() => {\n    if (markerRef.current && scopeRef.current) {\n      scopeRef.current.dir = getComputedStyle(markerRef.current).direction;\n    }\n  });\n  // On mount, copy it before the content's own layout effects run: they may read layout\n  // (React Aria's scroll lock does), which resolves the content's first style, and so its\n  // `@starting-style` transitions, in the wrong direction. The marker's ref is attached\n  // before them, and `:dir()` reads the direction without resolving styles.\n  const attachMarker = useCallback(\n    (marker: HTMLSpanElement | null) => {\n      markerRef.current = marker;\n      if (!marker || typeof CSS === 'undefined' || !CSS.supports('selector(:dir(rtl))')) return;\n      const wrapper = marker.ownerDocument.querySelector<HTMLElement>(\n        `[data-overlay-scope=\"${CSS.escape(scopeId)}\"]`,\n      );\n      if (wrapper) wrapper.dir = marker.matches(':dir(rtl)') ? 'rtl' : 'ltr';\n    },\n    [scopeId],\n  );\n\n  return (\n    <>\n      <span ref={attachMarker} hidden />\n      <AriaOverlay\n        portalContainer={portalContainer}\n        disableFocusManagement={disableFocusManagement}\n        isExiting={exiting}\n      >\n        <div\n          ref={scopeRef}\n          {...themeAttributesOver(\n            themed,\n            portalContainer ? null : documentTheme,\n            outerLayer !== undefined,\n          )}\n          className={outerLayer?.className || undefined}\n          data-overlay-scope={scopeId}\n          data-react-aria-top-layer={topLayer || undefined}\n          style={{\n            ...outerLayer?.variables,\n            display: 'contents',\n            color: 'var(--md-sys-color-on-surface)',\n          }}\n        >\n          {/* Each inner scope's class and variables around the last, as on the page, so the\n              innermost scope's value wins whether a class or its style sets it. */}\n          {innerLayers.reduceRight<ReactNode>(\n            (content, layer) => (\n              <div\n                {...colorAttributes}\n                className={layer.className || undefined}\n                style={{ ...layer.variables, display: 'contents' }}\n              >\n                {content}\n              </div>\n            ),\n            // An overlay opened from a toolbar isn't part of it.\n            <InheritedThemeContext value={themed}>\n              <ToolbarContext value={null}>{children}</ToolbarContext>\n            </InheritedThemeContext>,\n          )}\n        </div>\n      </AriaOverlay>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAgDA,SAAgBA,UAAQ,EACtB,UACA,iBACA,wBACA,SACA,UACA,WACe;CACf,MAAM,QAAQ,cAAc;CAC5B,MAAM,SAAS,YAAY,KAAA,IAAY,QAAQ;EAAE,GAAG;EAAO;CAAQ;CAGnE,MAAM,gBAAgB,WAAW,oBAAoB;CACrD,MAAM,CAAC,YAAY,GAAG,eAAe,oBAAoB;CAGzD,MAAM,EACJ,cAAc,YACd,aAAa,WACb,iBAAiB,kBACf,gBAAgB,MAAM;CAC1B,MAAM,kBAAkB;EACtB,cAAc;EACd,aAAa;EACb,iBAAiB;CACnB;CACA,MAAM,UAAU,MAAM;CACtB,MAAM,YAAY,OAAwB,IAAI;CAC9C,MAAM,WAAW,OAAuB,IAAI;CAI5C,sBAAsB;EACpB,IAAI,UAAU,WAAW,SAAS,SAChC,SAAS,QAAQ,MAAM,iBAAiB,UAAU,OAAO,CAAC,CAAC;CAE/D,CAAC;CAKD,MAAM,eAAe,aAClB,WAAmC;EAClC,UAAU,UAAU;EACpB,IAAI,CAAC,UAAU,OAAO,QAAQ,eAAe,CAAC,IAAI,SAAS,qBAAqB,GAAG;EACnF,MAAM,UAAU,OAAO,cAAc,cACnC,wBAAwB,IAAI,OAAO,OAAO,EAAE,GAC9C;EACA,IAAI,SAAS,QAAQ,MAAM,OAAO,QAAQ,WAAW,IAAI,QAAQ;CACnE,GACA,CAAC,OAAO,CACV;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,KAAK;EAAc,QAAA;CAAQ,CAAA,GACjC,oBAACC,SAAD;EACmB;EACO;EACxB,WAAW;EAEX,UAAA,oBAAC,OAAD;GACE,KAAK;GACL,GAAI,oBACF,QACA,kBAAkB,OAAO,eACzB,eAAe,KAAA,CACjB;GACA,WAAW,YAAY,aAAa,KAAA;GACpC,sBAAoB;GACpB,6BAA2B,YAAY,KAAA;GACvC,OAAO;IACL,GAAG,YAAY;IACf,SAAS;IACT,OAAO;GACT;GAIC,UAAA,YAAY,aACV,SAAS,UACR,oBAAC,OAAD;IACE,GAAI;IACJ,WAAW,MAAM,aAAa,KAAA;IAC9B,OAAO;KAAE,GAAG,MAAM;KAAW,SAAS;IAAW;IAEhD,UAAA;GACE,CAAA,GAGP,oBAAC,uBAAD;IAAuB,OAAO;IAC5B,UAAA,oBAAC,gBAAD;KAAgB,OAAO;KAAO;IAAyB,CAAA;GAClC,CAAA,CACzB;EACG,CAAA;CACM,CAAA,CACb,EAAA,CAAA;AAEN"}