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

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

package/dist/tooltip/tooltip-popup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-popup.mjs","names":[],"sources":["../../src/tooltip/tooltip-popup.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { POSITION_TRY_FALLBACKS, positionArea } from \"../internal/anchor-position.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useTooltipContext } from \"./tooltip-context.js\";\n\nexport type TooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipAlign = \"start\" | \"center\" | \"end\";\n\nexport interface TooltipPopupState {\n  readonly disabled: boolean;\n  readonly side: TooltipSide | null;\n  readonly align: TooltipAlign;\n}\n\nexport interface TooltipPopupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"popover\" | \"role\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Placement relative to the trigger through inline `position-area`, with\n   * `position-try-fallbacks` flipping it when it does not fit. Default `\"top\"`. `null` emits no\n   * inline positioning (and no `data-side` / `data-align`), so a stylesheet owns placement.\n   */\n  side?: TooltipSide | null;\n  /** Alignment along the side. Default `\"center\"`. Ignored when `side` is `null`. */\n  align?: TooltipAlign;\n  /**\n   * Experimental (Chrome 151+, Firefox 153+; Safari 27.0 treats it as `\"manual\"`). Renders\n   * `popover=\"hint\"` instead of `popover=\"manual\"`: native light dismiss, and the tooltip can\n   * open over an `auto` popover (a menu) without closing it. The JS Escape / pointerdown handling\n   * stays in place for engines that do not know `hint`. Default `false`.\n   */\n  experimental_hint?: boolean;\n  className?: StateValue<string | undefined, TooltipPopupState>;\n  style?: StateValue<CSSProperties | undefined, TooltipPopupState>;\n  /**\n   * Rendered at mount (hidden by the popover's `display: none`), not at open time. Tooltip\n   * content should be static; if it must suspend, put the `<Suspense>` boundary inside the Popup.\n   */\n  children?: StateValue<ReactNode, TooltipPopupState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TooltipPopupState>;\n}\n\n/**\n * The tooltip content: a `div` with `popover` and `role=\"tooltip\"`, shown in the top layer and\n * anchored to the trigger implicitly (`interestfor` or `showPopover({ source })`). Open state is\n * browser-owned: style it with `:popover-open` and animate it with `@starting-style` in CSS.\n *\n * Owned keys (conventions 1.2): `id`, `popover`, `role`, `data-disabled`, and `data-side` /\n * `data-align` unless `side` is `null`.\n */\nexport function TooltipPopup({\n  side = \"top\",\n  align = \"center\",\n  experimental_hint = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TooltipPopupProps) {\n  const ctx = useTooltipContext(\"Tooltip.Popup\");\n  const state: TooltipPopupState = { disabled: ctx.disabled, side, align };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: ctx.popupId,\n    popover: experimental_hint ? \"hint\" : \"manual\",\n    role: \"tooltip\",\n    \"data-disabled\": dataAttr(ctx.disabled),\n    // Not owned with `side={null}`: the stylesheet (or a render element) may set them.\n    ...(side !== null && { \"data-side\": side, \"data-align\": align }),\n  };\n\n  return useRender<ComponentPropsWithRef<\"div\">, TooltipPopupState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    // The inline placement sits under the consumer's style: the consumer wins (design 3).\n    style:\n      side === null\n        ? style\n        : (s) => ({\n            positionArea: positionArea(side, align),\n            positionTryFallbacks: POSITION_TRY_FALLBACKS,\n            ...resolveStateValue(style, s),\n          }),\n    children,\n    props: rest,\n    libraryProps,\n    ref: ctx.setPopupElement,\n  });\n}\n\nTooltipPopup.displayName = \"TooltipPopup\";\n"],"mappings":";;;;;;;;;;;;;;AAuDA,SAAgB,aAAa,EAC3B,OAAO,OACP,QAAQ,UACR,oBAAoB,OACpB,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,QAA2B;EAAE,UAAU,IAAI;EAAU;EAAM;CAAM;CAEvE,MAAM,eAA8D;EAClE,IAAI,IAAI;EACR,SAAS,oBAAoB,SAAS;EACtC,MAAM;EACN,iBAAiB,SAAS,IAAI,QAAQ;EAEtC,GAAI,SAAS,QAAQ;GAAE,aAAa;GAAM,cAAc;EAAM;CAChE;CAEA,OAAO,UAA2D;EAChE,gBAAgB;EAChB;EACA;EACA;EAEA,OACE,SAAS,OACL,SACC,OAAO;GACN,cAAc,aAAa,MAAM,KAAK;GACtC,sBAAsB;GACtB,GAAG,kBAAkB,OAAO,CAAC;EAC/B;EACN;EACA,OAAO;EACP;EACA,KAAK,IAAI;CACX,CAAC;AACH;AAEA,aAAa,cAAc"}
+{"version":3,"file":"tooltip-popup.mjs","names":[],"sources":["../../src/tooltip/tooltip-popup.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { POSITION_TRY_FALLBACKS, positionArea } from \"../internal/anchor-position.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useTooltipContext } from \"./tooltip-context.js\";\n\nexport type TooltipSide = \"top\" | \"bottom\" | \"left\" | \"right\";\nexport type TooltipAlign = \"start\" | \"center\" | \"end\";\n\nexport interface TooltipPopupState {\n  readonly disabled: boolean;\n  readonly side: TooltipSide | null;\n  readonly align: TooltipAlign;\n}\n\nexport interface TooltipPopupProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"id\" | \"popover\" | \"role\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Placement relative to the trigger through inline `position-area`, with\n   * `position-try-fallbacks` flipping it when it does not fit. Default `\"top\"`. `null` emits no\n   * inline positioning (and no `data-side` / `data-align`), so a stylesheet owns placement.\n   */\n  side?: TooltipSide | null;\n  /** Alignment along the side. Default `\"center\"`. Ignored when `side` is `null`. */\n  align?: TooltipAlign;\n  /**\n   * Experimental (Chrome 151+, Firefox 153+; Safari 27.0 treats it as `\"manual\"`). Renders\n   * `popover=\"hint\"` instead of `popover=\"manual\"`: native light dismiss, and the tooltip can\n   * open over an `auto` popover (a menu) without closing it. The JS Escape / pointerdown handling\n   * stays in place for engines that do not know `hint`. Default `false`.\n   */\n  experimental_hint?: boolean;\n  className?: StateValue<string | undefined, TooltipPopupState>;\n  style?: StateValue<CSSProperties | undefined, TooltipPopupState>;\n  /**\n   * Rendered at mount (hidden by the popover's `display: none`), not at open time. Tooltip\n   * content should be static; if it must suspend, put the `<Suspense>` boundary inside the Popup.\n   */\n  children?: StateValue<ReactNode, TooltipPopupState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TooltipPopupState>;\n}\n\n/**\n * The tooltip content: a `div` with `popover` and `role=\"tooltip\"`, shown in the top layer and\n * anchored to the trigger implicitly (`interestfor` or `showPopover({ source })`). Open state is\n * browser-owned: style it with `:popover-open` and animate it with `@starting-style` in CSS.\n *\n * Owned keys (conventions 1.2): `id`, `popover`, `role`, `data-disabled`, and `data-side` /\n * `data-align` unless `side` is `null`.\n */\nexport function TooltipPopup({\n  side = \"top\",\n  align = \"center\",\n  experimental_hint = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TooltipPopupProps) {\n  const ctx = useTooltipContext(\"Tooltip.Popup\");\n  const state: TooltipPopupState = { disabled: ctx.disabled, side, align };\n\n  const libraryProps: ComponentPropsWithRef<\"div\"> & DataAttributes = {\n    id: ctx.popupId,\n    popover: experimental_hint ? \"hint\" : \"manual\",\n    role: \"tooltip\",\n    \"data-disabled\": dataAttr(ctx.disabled),\n    // Not owned with `side={null}`: the stylesheet (or a render element) may set them.\n    ...(side !== null && { \"data-side\": side, \"data-align\": align }),\n  };\n\n  return useRender<ComponentPropsWithRef<\"div\">, TooltipPopupState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    // The inline placement sits under the consumer's style: the consumer wins (design 3).\n    style:\n      side === null\n        ? style\n        : (s) => ({\n            positionArea: positionArea(side, align),\n            positionTryFallbacks: POSITION_TRY_FALLBACKS,\n            ...resolveStateValue(style, s),\n          }),\n    children,\n    props: rest,\n    libraryProps,\n    ref: ctx.setPopupElement,\n  });\n}\n\nTooltipPopup.displayName = \"TooltipPopup\";\n"],"mappings":";;;;;;;;;;;;;;;AAuDA,SAAgB,aAAa,EAC3B,OAAO,OACP,QAAQ,UACR,oBAAoB,OACpB,WACA,OACA,UACA,QACA,GAAG,QACiB;CACpB,MAAM,MAAM,kBAAkB,eAAe;CAC7C,MAAM,QAA2B;EAAE,UAAU,IAAI;EAAU;EAAM;CAAM;CAEvE,MAAM,eAA8D;EAClE,IAAI,IAAI;EACR,SAAS,oBAAoB,SAAS;EACtC,MAAM;EACN,iBAAiB,SAAS,IAAI,QAAQ;EAEtC,GAAI,SAAS,QAAQ;GAAE,aAAa;GAAM,cAAc;EAAM;CAChE;CAEA,OAAO,UAA2D;EAChE,gBAAgB;EAChB;EACA;EACA;EAEA,OACE,SAAS,OACL,SACC,OAAO;GACN,cAAc,aAAa,MAAM,KAAK;GACtC,sBAAsB;GACtB,GAAG,kBAAkB,OAAO,CAAC;EAC/B;EACN;EACA,OAAO;EACP;EACA,KAAK,IAAI;CACX,CAAC;AACH;AAEA,aAAa,cAAc"}

package/dist/tooltip/tooltip-root.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { resolveStateValue } from "../internal/use-render.mjs";
+import { resolveStateValue } from "../internal/render-element.mjs";
 import { TooltipContext } from "./tooltip-context.mjs";
 import { useTooltipInteraction } from "./use-tooltip-interaction.mjs";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
@@ -50,6 +50,20 @@ function TooltipRoot({ delay = 250, closeDelay = 150, disabled = false, provides
 	});
 }
 TooltipRoot.displayName = "TooltipRoot";
+/**
+* The containers that move focus among their items with the arrow keys (roving tabindex, or a
+* native `focusgroup`): Menu, Tabs, Toolbar, a radio group, and the other APG composites.
+*/
+const COMPOSITE = "[role=\"menu\"],[role=\"menubar\"],[role=\"tablist\"],[role=\"toolbar\"],[role=\"radiogroup\"],[role=\"listbox\"],[role=\"grid\"],[role=\"treegrid\"],[role=\"tree\"],[focusgroup]";
+/**
+* Whether keyboard users can focus the trigger: it is in the tab order, or it is a
+* roving-tabindex item (`tabindex="-1"` set explicitly, so script can focus it) inside a
+* composite widget that moves focus to it (#57).
+*/
+function isKeyboardReachable(trigger) {
+	if (trigger.tabIndex >= 0) return true;
+	return trigger.hasAttribute("tabindex") && trigger.parentElement?.closest(COMPOSITE) != null;
+}
 /** Development-only checks that need the mounted elements (design 12.5). Each fires once. */
 function useTooltipDevWarnings(trigger, popup, provides) {
 	const warned = useRef({
@@ -65,7 +79,7 @@ function useTooltipDevWarnings(trigger, popup, provides) {
 				w.label = true;
 				console.error("[Tooltip] provides=\"name\" together with aria-label on the trigger announces the name twice. Remove aria-label.");
 			}
-			if (trigger.tabIndex < 0 && !w.focusable) {
+			if (!isKeyboardReachable(trigger) && !w.focusable) {
 				w.focusable = true;
 				console.error("[Tooltip] The trigger is not focusable; keyboard users cannot open the tooltip. Render a <button> or a link, or set tabIndex={0}.");
 			}

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip-root.mjs","names":[],"sources":["../../src/tooltip/tooltip-root.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { StateValue } from \"../internal/types.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { TooltipContext } from \"./tooltip-context.js\";\nimport type { TooltipContextValue, TooltipProvides } from \"./tooltip-context.js\";\nimport { useTooltipInteraction } from \"./use-tooltip-interaction.js\";\n\nexport type { TooltipProvides } from \"./tooltip-context.js\";\n\nexport interface TooltipRootState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipRootProps {\n  /**\n   * Milliseconds from hover or keyboard focus to open. Default 250 (Chromium's\n   * `interest-delay-start`). The same delay applies to hover and focus.\n   */\n  delay?: number;\n  /** Milliseconds from de-hover or blur to close. Default 150 (Chromium's `interest-delay-end`). */\n  closeDelay?: number;\n  /** When true the tooltip never opens. The ARIA relation stays in place. */\n  disabled?: boolean;\n  /**\n   * Which accessibility relation the tooltip provides for the trigger.\n   * `\"description\"` (default): `aria-describedby`, for triggers that have their own name.\n   * `\"name\"`: `aria-labelledby`, for icon-only triggers; do not also set `aria-label`.\n   */\n  provides?: TooltipProvides;\n  children?: StateValue<ReactNode, TooltipRootState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nconst FOCUSABLE =\n  \"a[href],area[href],button,input,select,textarea,iframe,[tabindex],[contenteditable]\";\n\n/**\n * Owns the popup id, the options and the one interaction effect. Renders no DOM, so it has no\n * `ref`, `className` or `style`. The open state is browser-owned (the popover's top-layer state):\n * there is no `open` prop, no action, and no `data-open`; style with `:popover-open`.\n *\n * Render `Tooltip.Popup` immediately after `Tooltip.Trigger` in DOM order: the HTML spec\n * recommends that reading order for popovers, and some screen readers attach an adjacent tooltip\n * to the wrong control otherwise. This is documented, not enforced.\n */\nexport function TooltipRoot({\n  delay = 250,\n  closeDelay = 150,\n  disabled = false,\n  provides = \"description\",\n  children,\n}: TooltipRootProps) {\n  const popupId = useId();\n  const [trigger, setTriggerElement] = useState<HTMLElement | null>(null);\n  const [popup, setPopupElement] = useState<HTMLElement | null>(null);\n  const [interestForRequested, setInterestForRequested] = useState(false);\n\n  useTooltipInteraction(trigger, popup, { delay, closeDelay, disabled, interestForRequested });\n  useTooltipDevWarnings(trigger, popup, provides);\n\n  const context = useMemo<TooltipContextValue>(\n    () => ({\n      popupId,\n      disabled,\n      delay,\n      closeDelay,\n      provides,\n      setTriggerElement,\n      setPopupElement,\n      setInterestForRequested,\n    }),\n    [popupId, disabled, delay, closeDelay, provides],\n  );\n\n  const state: TooltipRootState = { disabled };\n  return <TooltipContext value={context}>{resolveStateValue(children, state)}</TooltipContext>;\n}\n\nTooltipRoot.displayName = \"TooltipRoot\";\n\n/** Development-only checks that need the mounted elements (design 12.5). Each fires once. */\nfunction useTooltipDevWarnings(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  provides: TooltipProvides,\n): void {\n  const warned = useRef({ label: false, focusable: false, interactive: false });\n  useEffect(() => {\n    if (!isDev) return;\n    const w = warned.current;\n    if (trigger !== null) {\n      if (provides === \"name\" && trigger.hasAttribute(\"aria-label\") && !w.label) {\n        w.label = true;\n        console.error(\n          '[Tooltip] provides=\"name\" together with aria-label on the trigger announces the name twice. Remove aria-label.',\n        );\n      }\n      if (trigger.tabIndex < 0 && !w.focusable) {\n        w.focusable = true;\n        console.error(\n          \"[Tooltip] The trigger is not focusable; keyboard users cannot open the tooltip. Render a <button> or a link, or set tabIndex={0}.\",\n        );\n      }\n    }\n    if (popup !== null && popup.querySelector(FOCUSABLE) !== null && !w.interactive) {\n      w.interactive = true;\n      console.error(\n        \"[Tooltip] Tooltips must not contain interactive content. Use a non-modal dialog or a popover instead.\",\n      );\n    }\n  }, [trigger, popup, provides]);\n}\n"],"mappings":";;;;;;;AAkCA,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,MAAM,YACJ;;;;;;;;;;AAWF,SAAgB,YAAY,EAC1B,QAAQ,KACR,aAAa,KACb,WAAW,OACX,WAAW,eACX,YACmB;CACnB,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,SAAS,qBAAqB,SAA6B,IAAI;CACtE,MAAM,CAAC,OAAO,mBAAmB,SAA6B,IAAI;CAClE,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,KAAK;CAEtE,sBAAsB,SAAS,OAAO;EAAE;EAAO;EAAY;EAAU;CAAqB,CAAC;CAC3F,sBAAsB,SAAS,OAAO,QAAQ;CAE9C,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAU;EAAO;EAAY;CAAQ,CACjD;CAGA,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA,kBAAkB,UAAU,EADlC,SACsC,CAAC;CAAkB,CAAA;AAC7F;AAEA,YAAY,cAAc;;AAG1B,SAAS,sBACP,SACA,OACA,UACM;CACN,MAAM,SAAS,OAAO;EAAE,OAAO;EAAO,WAAW;EAAO,aAAa;CAAM,CAAC;CAC5E,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,IAAI,OAAO;EACjB,IAAI,YAAY,MAAM;GACpB,IAAI,aAAa,UAAU,QAAQ,aAAa,YAAY,KAAK,CAAC,EAAE,OAAO;IACzE,EAAE,QAAQ;IACV,QAAQ,MACN,kHACF;GACF;GACA,IAAI,QAAQ,WAAW,KAAK,CAAC,EAAE,WAAW;IACxC,EAAE,YAAY;IACd,QAAQ,MACN,mIACF;GACF;EACF;EACA,IAAI,UAAU,QAAQ,MAAM,cAAc,SAAS,MAAM,QAAQ,CAAC,EAAE,aAAa;GAC/E,EAAE,cAAc;GAChB,QAAQ,MACN,uGACF;EACF;CACF,GAAG;EAAC;EAAS;EAAO;CAAQ,CAAC;AAC/B"}
+{"version":3,"file":"tooltip-root.mjs","names":[],"sources":["../../src/tooltip/tooltip-root.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { StateValue } from \"../internal/types.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { TooltipContext } from \"./tooltip-context.js\";\nimport type { TooltipContextValue, TooltipProvides } from \"./tooltip-context.js\";\nimport { useTooltipInteraction } from \"./use-tooltip-interaction.js\";\n\nexport type { TooltipProvides } from \"./tooltip-context.js\";\n\nexport interface TooltipRootState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipRootProps {\n  /**\n   * Milliseconds from hover or keyboard focus to open. Default 250 (Chromium's\n   * `interest-delay-start`). The same delay applies to hover and focus.\n   */\n  delay?: number;\n  /** Milliseconds from de-hover or blur to close. Default 150 (Chromium's `interest-delay-end`). */\n  closeDelay?: number;\n  /** When true the tooltip never opens. The ARIA relation stays in place. */\n  disabled?: boolean;\n  /**\n   * Which accessibility relation the tooltip provides for the trigger.\n   * `\"description\"` (default): `aria-describedby`, for triggers that have their own name.\n   * `\"name\"`: `aria-labelledby`, for icon-only triggers; do not also set `aria-label`.\n   */\n  provides?: TooltipProvides;\n  children?: StateValue<ReactNode, TooltipRootState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nconst FOCUSABLE =\n  \"a[href],area[href],button,input,select,textarea,iframe,[tabindex],[contenteditable]\";\n\n/**\n * Owns the popup id, the options and the one interaction effect. Renders no DOM, so it has no\n * `ref`, `className` or `style`. The open state is browser-owned (the popover's top-layer state):\n * there is no `open` prop, no action, and no `data-open`; style with `:popover-open`.\n *\n * Render `Tooltip.Popup` immediately after `Tooltip.Trigger` in DOM order: the HTML spec\n * recommends that reading order for popovers, and some screen readers attach an adjacent tooltip\n * to the wrong control otherwise. This is documented, not enforced.\n */\nexport function TooltipRoot({\n  delay = 250,\n  closeDelay = 150,\n  disabled = false,\n  provides = \"description\",\n  children,\n}: TooltipRootProps) {\n  const popupId = useId();\n  const [trigger, setTriggerElement] = useState<HTMLElement | null>(null);\n  const [popup, setPopupElement] = useState<HTMLElement | null>(null);\n  const [interestForRequested, setInterestForRequested] = useState(false);\n\n  useTooltipInteraction(trigger, popup, { delay, closeDelay, disabled, interestForRequested });\n  useTooltipDevWarnings(trigger, popup, provides);\n\n  const context = useMemo<TooltipContextValue>(\n    () => ({\n      popupId,\n      disabled,\n      delay,\n      closeDelay,\n      provides,\n      setTriggerElement,\n      setPopupElement,\n      setInterestForRequested,\n    }),\n    [popupId, disabled, delay, closeDelay, provides],\n  );\n\n  const state: TooltipRootState = { disabled };\n  return <TooltipContext value={context}>{resolveStateValue(children, state)}</TooltipContext>;\n}\n\nTooltipRoot.displayName = \"TooltipRoot\";\n\n/**\n * The containers that move focus among their items with the arrow keys (roving tabindex, or a\n * native `focusgroup`): Menu, Tabs, Toolbar, a radio group, and the other APG composites.\n */\nconst COMPOSITE =\n  '[role=\"menu\"],[role=\"menubar\"],[role=\"tablist\"],[role=\"toolbar\"],[role=\"radiogroup\"],[role=\"listbox\"],[role=\"grid\"],[role=\"treegrid\"],[role=\"tree\"],[focusgroup]';\n\n/**\n * Whether keyboard users can focus the trigger: it is in the tab order, or it is a\n * roving-tabindex item (`tabindex=\"-1\"` set explicitly, so script can focus it) inside a\n * composite widget that moves focus to it (#57).\n */\nfunction isKeyboardReachable(trigger: HTMLElement): boolean {\n  if (trigger.tabIndex >= 0) return true;\n  return trigger.hasAttribute(\"tabindex\") && trigger.parentElement?.closest(COMPOSITE) != null;\n}\n\n/** Development-only checks that need the mounted elements (design 12.5). Each fires once. */\nfunction useTooltipDevWarnings(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  provides: TooltipProvides,\n): void {\n  const warned = useRef({ label: false, focusable: false, interactive: false });\n  useEffect(() => {\n    if (!isDev) return;\n    const w = warned.current;\n    if (trigger !== null) {\n      if (provides === \"name\" && trigger.hasAttribute(\"aria-label\") && !w.label) {\n        w.label = true;\n        console.error(\n          '[Tooltip] provides=\"name\" together with aria-label on the trigger announces the name twice. Remove aria-label.',\n        );\n      }\n      if (!isKeyboardReachable(trigger) && !w.focusable) {\n        w.focusable = true;\n        console.error(\n          \"[Tooltip] The trigger is not focusable; keyboard users cannot open the tooltip. Render a <button> or a link, or set tabIndex={0}.\",\n        );\n      }\n    }\n    if (popup !== null && popup.querySelector(FOCUSABLE) !== null && !w.interactive) {\n      w.interactive = true;\n      console.error(\n        \"[Tooltip] Tooltips must not contain interactive content. Use a non-modal dialog or a popover instead.\",\n      );\n    }\n  }, [trigger, popup, provides]);\n}\n"],"mappings":";;;;;;;AAkCA,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,MAAM,YACJ;;;;;;;;;;AAWF,SAAgB,YAAY,EAC1B,QAAQ,KACR,aAAa,KACb,WAAW,OACX,WAAW,eACX,YACmB;CACnB,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,SAAS,qBAAqB,SAA6B,IAAI;CACtE,MAAM,CAAC,OAAO,mBAAmB,SAA6B,IAAI;CAClE,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,KAAK;CAEtE,sBAAsB,SAAS,OAAO;EAAE;EAAO;EAAY;EAAU;CAAqB,CAAC;CAC3F,sBAAsB,SAAS,OAAO,QAAQ;CAE9C,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAU;EAAO;EAAY;CAAQ,CACjD;CAGA,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA,kBAAkB,UAAU,EADlC,SACsC,CAAC;CAAkB,CAAA;AAC7F;AAEA,YAAY,cAAc;;;;;AAM1B,MAAM,YACJ;;;;;;AAOF,SAAS,oBAAoB,SAA+B;CAC1D,IAAI,QAAQ,YAAY,GAAG,OAAO;CAClC,OAAO,QAAQ,aAAa,UAAU,KAAK,QAAQ,eAAe,QAAQ,SAAS,KAAK;AAC1F;;AAGA,SAAS,sBACP,SACA,OACA,UACM;CACN,MAAM,SAAS,OAAO;EAAE,OAAO;EAAO,WAAW;EAAO,aAAa;CAAM,CAAC;CAC5E,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,IAAI,OAAO;EACjB,IAAI,YAAY,MAAM;GACpB,IAAI,aAAa,UAAU,QAAQ,aAAa,YAAY,KAAK,CAAC,EAAE,OAAO;IACzE,EAAE,QAAQ;IACV,QAAQ,MACN,kHACF;GACF;GACA,IAAI,CAAC,oBAAoB,OAAO,KAAK,CAAC,EAAE,WAAW;IACjD,EAAE,YAAY;IACd,QAAQ,MACN,mIACF;GACF;EACF;EACA,IAAI,UAAU,QAAQ,MAAM,cAAc,SAAS,MAAM,QAAQ,CAAC,EAAE,aAAa;GAC/E,EAAE,cAAc;GAChB,QAAQ,MACN,uGACF;EACF;CACF,GAAG;EAAC;EAAS;EAAO;CAAQ,CAAC;AAC/B"}

package/dist/tooltip/tooltip-trigger.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { rendersButton, resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { rendersButton, resolveStateValue } from "../internal/render-element.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { useTooltipContext } from "./tooltip-context.mjs";
 import { useLayoutEffect } from "react";
 //#region src/tooltip/tooltip-trigger.tsx

package/dist/tooltip/tooltip-trigger.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-trigger.mjs","names":[],"sources":["../../src/tooltip/tooltip-trigger.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useTooltipContext } from \"./tooltip-context.js\";\n\nexport interface TooltipTriggerState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Experimental (Chromium 142+). Renders `interestfor` and `interest-delay-start/end` so the\n   * browser owns hover, focus, Escape and long-press; the library's JS trigger path is skipped\n   * where the rendered element implements `interestForElement`. No effect in other engines (the\n   * attribute is ignored and the JS path runs). Pair with `Tooltip.Popup experimental_hint`.\n   * Default `false`.\n   */\n  experimental_interestFor?: boolean;\n  className?: StateValue<string | undefined, TooltipTriggerState>;\n  style?: StateValue<CSSProperties | undefined, TooltipTriggerState>;\n  children?: StateValue<ReactNode, TooltipTriggerState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, TooltipTriggerState>;\n}\n\n/**\n * The element the user hovers or focuses: a `<button type=\"button\">` by default. `render` may\n * substitute a link or a custom button; the element must be focusable (a dev warning fires when\n * it is not). A natively `disabled` button never opens a tooltip; use `aria-disabled` instead.\n *\n * The library attaches its hover / focus listeners with `addEventListener` from `Tooltip.Root`,\n * so every `on*` prop passes through untouched.\n *\n * Owned keys (conventions 1.2): `aria-describedby` (with `provides=\"description\"`) or\n * `aria-labelledby` (with `provides=\"name\"`), both token-merged with the consumer's ids;\n * `data-disabled`; and `interestfor` when `experimental_interestFor` is on.\n */\nexport function TooltipTrigger({\n  experimental_interestFor = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TooltipTriggerProps) {\n  const ctx = useTooltipContext(\"Tooltip.Trigger\");\n  const { disabled, popupId, provides, setInterestForRequested } = ctx;\n  const native = experimental_interestFor && !disabled;\n\n  useLayoutEffect(() => {\n    setInterestForRequested(native);\n  }, [native, setInterestForRequested]);\n\n  const state: TooltipTriggerState = { disabled };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    // Only the relation in use is owned; the other one passes through untouched.\n    ...(provides === \"name\" ? { \"aria-labelledby\": popupId } : { \"aria-describedby\": popupId }),\n    \"data-disabled\": dataAttr(disabled),\n    // Owned while the flag is on: a disabled tooltip removes the attribute, so the browser\n    // cannot open it either. Unflagged, the key is omitted (conventions 1.2).\n    ...(experimental_interestFor && { interestfor: native ? popupId : undefined }),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, TooltipTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    // The native delays sit under the consumer's style: the consumer wins.\n    style: native\n      ? (s) => ({\n          interestDelayStart: `${ctx.delay}ms`,\n          interestDelayEnd: `${ctx.closeDelay}ms`,\n          ...resolveStateValue(style, s),\n        })\n      : style,\n    children,\n    // `type=\"button\"` only on a real button (the consumer may override it); a link or a\n    // component element does not get it.\n    props: rendersButton(render) ? { type: \"button\", ...rest } : rest,\n    libraryProps,\n    ref: ctx.setTriggerElement,\n  });\n}\n\nTooltipTrigger.displayName = \"TooltipTrigger\";\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,SAAgB,eAAe,EAC7B,2BAA2B,OAC3B,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,kBAAkB,iBAAiB;CAC/C,MAAM,EAAE,UAAU,SAAS,UAAU,4BAA4B;CACjE,MAAM,SAAS,4BAA4B,CAAC;CAE5C,sBAAsB;EACpB,wBAAwB,MAAM;CAChC,GAAG,CAAC,QAAQ,uBAAuB,CAAC;CAEpC,MAAM,QAA6B,EAAE,SAAS;CAE9C,MAAM,eAAiE;EAErE,GAAI,aAAa,SAAS,EAAE,mBAAmB,QAAQ,IAAI,EAAE,oBAAoB,QAAQ;EACzF,iBAAiB,SAAS,QAAQ;EAGlC,GAAI,4BAA4B,EAAE,aAAa,SAAS,UAAU,KAAA,EAAU;CAC9E;CAEA,OAAO,UAAgE;EACrE,gBAAgB;EAChB;EACA;EACA;EAEA,OAAO,UACF,OAAO;GACN,oBAAoB,GAAG,IAAI,MAAM;GACjC,kBAAkB,GAAG,IAAI,WAAW;GACpC,GAAG,kBAAkB,OAAO,CAAC;EAC/B,KACA;EACJ;EAGA,OAAO,cAAc,MAAM,IAAI;GAAE,MAAM;GAAU,GAAG;EAAK,IAAI;EAC7D;EACA,KAAK,IAAI;CACX,CAAC;AACH;AAEA,eAAe,cAAc"}
+{"version":3,"file":"tooltip-trigger.mjs","names":[],"sources":["../../src/tooltip/tooltip-trigger.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { useTooltipContext } from \"./tooltip-context.js\";\n\nexport interface TooltipTriggerState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipTriggerProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Experimental (Chromium 142+). Renders `interestfor` and `interest-delay-start/end` so the\n   * browser owns hover, focus, Escape and long-press; the library's JS trigger path is skipped\n   * where the rendered element implements `interestForElement`. No effect in other engines (the\n   * attribute is ignored and the JS path runs). Pair with `Tooltip.Popup experimental_hint`.\n   * Default `false`.\n   */\n  experimental_interestFor?: boolean;\n  className?: StateValue<string | undefined, TooltipTriggerState>;\n  style?: StateValue<CSSProperties | undefined, TooltipTriggerState>;\n  children?: StateValue<ReactNode, TooltipTriggerState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, TooltipTriggerState>;\n}\n\n/**\n * The element the user hovers or focuses: a `<button type=\"button\">` by default. `render` may\n * substitute a link or a custom button; the element must be focusable (a dev warning fires when\n * it is not). A natively `disabled` button never opens a tooltip; use `aria-disabled` instead.\n *\n * The library attaches its hover / focus listeners with `addEventListener` from `Tooltip.Root`,\n * so every `on*` prop passes through untouched.\n *\n * Owned keys (conventions 1.2): `aria-describedby` (with `provides=\"description\"`) or\n * `aria-labelledby` (with `provides=\"name\"`), both token-merged with the consumer's ids;\n * `data-disabled`; and `interestfor` when `experimental_interestFor` is on.\n */\nexport function TooltipTrigger({\n  experimental_interestFor = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TooltipTriggerProps) {\n  const ctx = useTooltipContext(\"Tooltip.Trigger\");\n  const { disabled, popupId, provides, setInterestForRequested } = ctx;\n  const native = experimental_interestFor && !disabled;\n\n  useLayoutEffect(() => {\n    setInterestForRequested(native);\n  }, [native, setInterestForRequested]);\n\n  const state: TooltipTriggerState = { disabled };\n\n  const libraryProps: ComponentPropsWithRef<\"button\"> & DataAttributes = {\n    // Only the relation in use is owned; the other one passes through untouched.\n    ...(provides === \"name\" ? { \"aria-labelledby\": popupId } : { \"aria-describedby\": popupId }),\n    \"data-disabled\": dataAttr(disabled),\n    // Owned while the flag is on: a disabled tooltip removes the attribute, so the browser\n    // cannot open it either. Unflagged, the key is omitted (conventions 1.2).\n    ...(experimental_interestFor && { interestfor: native ? popupId : undefined }),\n  };\n\n  return useRender<ComponentPropsWithRef<\"button\">, TooltipTriggerState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    // The native delays sit under the consumer's style: the consumer wins.\n    style: native\n      ? (s) => ({\n          interestDelayStart: `${ctx.delay}ms`,\n          interestDelayEnd: `${ctx.closeDelay}ms`,\n          ...resolveStateValue(style, s),\n        })\n      : style,\n    children,\n    // `type=\"button\"` only on a real button (the consumer may override it); a link or a\n    // component element does not get it.\n    props: rendersButton(render) ? { type: \"button\", ...rest } : rest,\n    libraryProps,\n    ref: ctx.setTriggerElement,\n  });\n}\n\nTooltipTrigger.displayName = \"TooltipTrigger\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2CA,SAAgB,eAAe,EAC7B,2BAA2B,OAC3B,WACA,OACA,UACA,QACA,GAAG,QACmB;CACtB,MAAM,MAAM,kBAAkB,iBAAiB;CAC/C,MAAM,EAAE,UAAU,SAAS,UAAU,4BAA4B;CACjE,MAAM,SAAS,4BAA4B,CAAC;CAE5C,sBAAsB;EACpB,wBAAwB,MAAM;CAChC,GAAG,CAAC,QAAQ,uBAAuB,CAAC;CAEpC,MAAM,QAA6B,EAAE,SAAS;CAE9C,MAAM,eAAiE;EAErE,GAAI,aAAa,SAAS,EAAE,mBAAmB,QAAQ,IAAI,EAAE,oBAAoB,QAAQ;EACzF,iBAAiB,SAAS,QAAQ;EAGlC,GAAI,4BAA4B,EAAE,aAAa,SAAS,UAAU,KAAA,EAAU;CAC9E;CAEA,OAAO,UAAgE;EACrE,gBAAgB;EAChB;EACA;EACA;EAEA,OAAO,UACF,OAAO;GACN,oBAAoB,GAAG,IAAI,MAAM;GACjC,kBAAkB,GAAG,IAAI,WAAW;GACpC,GAAG,kBAAkB,OAAO,CAAC;EAC/B,KACA;EACJ;EAGA,OAAO,cAAc,MAAM,IAAI;GAAE,MAAM;GAAU,GAAG;EAAK,IAAI;EAC7D;EACA,KAAK,IAAI;CACX,CAAC;AACH;AAEA,eAAe,cAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funstack/ui",
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.4",
   "description": "Headless UI library for React — the first Async React-native UI library",
   "keywords": [
     "components",
@@ -34,13 +34,22 @@
     "./checkbox-group": "./dist/checkbox-group/index.mjs",
     "./combobox": "./dist/combobox/index.mjs",
     "./dialog": "./dist/dialog/index.mjs",
+    "./field": "./dist/field/index.mjs",
+    "./form": "./dist/form/index.mjs",
     "./menu": "./dist/menu/index.mjs",
+    "./meter": "./dist/meter/index.mjs",
+    "./number-field": "./dist/number-field/index.mjs",
     "./popover": "./dist/popover/index.mjs",
+    "./progress": "./dist/progress/index.mjs",
     "./radio-group": "./dist/radio-group/index.mjs",
     "./select": "./dist/select/index.mjs",
+    "./slider": "./dist/slider/index.mjs",
     "./switch": "./dist/switch/index.mjs",
     "./tabs": "./dist/tabs/index.mjs",
+    "./toast": "./dist/toast/index.mjs",
     "./toggle": "./dist/toggle/index.mjs",
+    "./toggle-group": "./dist/toggle-group/index.mjs",
+    "./toolbar": "./dist/toolbar/index.mjs",
     "./tooltip": "./dist/tooltip/index.mjs",
     "./package.json": "./package.json"
   },