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

package/dist/select/select-value.mjs

@@ -0,0 +1,101 @@
+"use client";
+import { useRender } from "../internal/use-render.mjs";
+import { useFormReset } from "../internal/use-form-reset.mjs";
+import { useSelectContext } from "./select-context.mjs";
+import { useSelectPartRef } from "./select-dom.mjs";
+import { useLayoutEffect, useMemo } from "react";
+//#region src/select/select-value.tsx
+const isDev = process.env.NODE_ENV !== "production";
+/** Where the browser clones options into `<selectedcontent>` (Chromium 135+, Safari 27). */
+function supportsSelectedContent() {
+	return typeof globalThis !== "undefined" && "HTMLSelectedContentElement" in globalThis;
+}
+/**
+* Whether a mutation record changes what `<selectedcontent>` shows: a record inside the selected
+* option. Attribute records on the option element itself are ignored (option attributes are not
+* cloned, and the library writes `data-*` there); records inside `<selectedcontent>` are never
+* inside an option, so the refresh's own clone does not loop.
+*/
+function touchesSelected(record, selected) {
+	if (record.type === "attributes" && record.target === selected) return false;
+	return selected.contains(record.target);
+}
+/** Re-clones the selected option into `<selectedcontent>`. */
+function refresh(select) {
+	if (select.selectedIndex === -1) return;
+	select.value = select.value;
+}
+/**
+* `<selectedcontent>`: the browser clones the selected option's content into it (inside
+* `Select.Trigger`). It has no `children`. Rendered with `suppressHydrationWarning` and an empty
+* `dangerouslySetInnerHTML` so that hydration accepts the content the parser cloned before React
+* ran (design/components/select.md 3.3).
+*
+* Also keeps it fresh: the platform re-clones only on selection changes, so when React changes
+* the selected option's content (a label, a state function, a Suspense boundary resolving inside
+* it), a `MutationObserver` re-assigns `select.value = select.value`, which re-clones without
+* events and without touching the selection or an open picker (6.3). The same refresh follows a
+* form reset, which Chromium does not re-clone for. Not installed where
+* `HTMLSelectedContentElement` is undefined (Firefox today, jsdom): nothing is cloned there.
+*
+* Owned keys: `dangerouslySetInnerHTML`, `suppressHydrationWarning`, `children`.
+*/
+function SelectValue({ className, style, render, ...rest }) {
+	const ctx = useSelectContext("Select.Value");
+	const { ref, node } = useSelectPartRef("Select.Value", "selectedcontent");
+	useLayoutEffect(() => {
+		const el = node.current;
+		if (el === null) return;
+		const select = el.closest("select");
+		if (select === null) {
+			if (isDev) console.error("Select.Value: rendered outside the Select.Root's <select>; put it inside Select.Trigger, the select's first child.");
+			return;
+		}
+		if (!supportsSelectedContent()) return;
+		const observer = new MutationObserver((records) => {
+			const selected = select.options[select.selectedIndex];
+			if (selected === void 0) return;
+			if (records.some((record) => touchesSelected(record, selected))) refresh(select);
+		});
+		observer.observe(select, {
+			childList: true,
+			characterData: true,
+			attributes: true,
+			subtree: true
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [node]);
+	const selectRef = useMemo(() => ({ get current() {
+		return node.current?.closest("select") ?? null;
+	} }), [node]);
+	useFormReset(selectRef, () => {
+		const select = selectRef.current;
+		if (select !== null && supportsSelectedContent()) refresh(select);
+	});
+	const state = {
+		value: ctx.optimistic,
+		pending: ctx.pending,
+		disabled: ctx.disabled
+	};
+	return useRender({
+		defaultElement: "selectedcontent",
+		render,
+		state,
+		className,
+		style,
+		children: void 0,
+		props: rest,
+		libraryProps: {
+			suppressHydrationWarning: true,
+			dangerouslySetInnerHTML: { __html: "" }
+		},
+		ref
+	});
+}
+SelectValue.displayName = "SelectValue";
+//#endregion
+export { SelectValue };
+
+//# sourceMappingURL=select-value.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-value.mjs","names":[],"sources":["../../src/select/select-value.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useMemo } from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties } from \"react\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useFormReset } from \"../internal/use-form-reset.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useSelectContext } from \"./select-context.js\";\nimport { useSelectPartRef } from \"./select-dom.js\";\nimport type { SelectRootState } from \"./select-root.js\";\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nexport interface SelectValueProps extends Omit<\n  ComponentPropsWithRef<\"selectedcontent\">,\n  \"children\" | \"dangerouslySetInnerHTML\" | \"className\" | \"style\"\n> {\n  className?: StateValue<string | undefined, SelectRootState>;\n  style?: StateValue<CSSProperties | undefined, SelectRootState>;\n  /** Replace the rendered element. Must keep a `<selectedcontent>`. */\n  render?: RenderProp<ComponentPropsWithRef<\"selectedcontent\">, SelectRootState>;\n}\n\n/** Where the browser clones options into `<selectedcontent>` (Chromium 135+, Safari 27). */\nfunction supportsSelectedContent(): boolean {\n  return typeof globalThis !== \"undefined\" && \"HTMLSelectedContentElement\" in globalThis;\n}\n\n/**\n * Whether a mutation record changes what `<selectedcontent>` shows: a record inside the selected\n * option. Attribute records on the option element itself are ignored (option attributes are not\n * cloned, and the library writes `data-*` there); records inside `<selectedcontent>` are never\n * inside an option, so the refresh's own clone does not loop.\n */\nfunction touchesSelected(record: MutationRecord, selected: HTMLOptionElement): boolean {\n  if (record.type === \"attributes\" && record.target === selected) return false;\n  return selected.contains(record.target);\n}\n\n/** Re-clones the selected option into `<selectedcontent>`. */\nfunction refresh(select: HTMLSelectElement): void {\n  // Nothing selected: assigning the value would select the placeholder (probe case 7).\n  if (select.selectedIndex === -1) return;\n  // The assignment is the re-clone trigger; it fires no event and keeps the selection.\n  const current = select.value;\n  select.value = current;\n}\n\n/**\n * `<selectedcontent>`: the browser clones the selected option's content into it (inside\n * `Select.Trigger`). It has no `children`. Rendered with `suppressHydrationWarning` and an empty\n * `dangerouslySetInnerHTML` so that hydration accepts the content the parser cloned before React\n * ran (design/components/select.md 3.3).\n *\n * Also keeps it fresh: the platform re-clones only on selection changes, so when React changes\n * the selected option's content (a label, a state function, a Suspense boundary resolving inside\n * it), a `MutationObserver` re-assigns `select.value = select.value`, which re-clones without\n * events and without touching the selection or an open picker (6.3). The same refresh follows a\n * form reset, which Chromium does not re-clone for. Not installed where\n * `HTMLSelectedContentElement` is undefined (Firefox today, jsdom): nothing is cloned there.\n *\n * Owned keys: `dangerouslySetInnerHTML`, `suppressHydrationWarning`, `children`.\n */\nexport function SelectValue({ className, style, render, ...rest }: SelectValueProps) {\n  const ctx = useSelectContext(\"Select.Value\");\n  const { ref, node } = useSelectPartRef<HTMLElement>(\"Select.Value\", \"selectedcontent\");\n\n  useLayoutEffect(() => {\n    const el = node.current;\n    if (el === null) return;\n    const select = el.closest(\"select\");\n    if (select === null) {\n      if (isDev) {\n        console.error(\n          \"Select.Value: rendered outside the Select.Root's <select>; put it inside \" +\n            \"Select.Trigger, the select's first child.\",\n        );\n      }\n      return;\n    }\n    if (!supportsSelectedContent()) return;\n    const observer = new MutationObserver((records) => {\n      const selected = select.options[select.selectedIndex];\n      if (selected === undefined) return;\n      if (records.some((record) => touchesSelected(record, selected))) refresh(select);\n    });\n    observer.observe(select, {\n      childList: true,\n      characterData: true,\n      attributes: true,\n      subtree: true,\n    });\n    return () => {\n      observer.disconnect();\n    };\n  }, [node]);\n\n  // A form reset changes the selection without re-cloning (Chromium 156: `form.reset()` leaves\n  // the old option's content in <selectedcontent>; memo/developer/select.md). `useFormReset`\n  // listens on the select's form owner itself (so neither `stopPropagation()` on the form nor a\n  // shadow root hides the event), follows a changed owner or `form` attribute, and calls back in\n  // a microtask after an uncancelled reset. React's own reset after a form action is a\n  // `form.reset()` too.\n  const selectRef = useMemo(\n    () => ({\n      get current(): HTMLSelectElement | null {\n        return node.current?.closest(\"select\") ?? null;\n      },\n    }),\n    [node],\n  );\n  useFormReset(selectRef, () => {\n    const select = selectRef.current;\n    if (select !== null && supportsSelectedContent()) refresh(select);\n  });\n\n  const state: SelectRootState = {\n    value: ctx.optimistic,\n    pending: ctx.pending,\n    disabled: ctx.disabled,\n  };\n  return useRender<ComponentPropsWithRef<\"selectedcontent\">, SelectRootState>({\n    defaultElement: \"selectedcontent\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    props: rest,\n    libraryProps: {\n      suppressHydrationWarning: true,\n      dangerouslySetInnerHTML: { __html: \"\" },\n    },\n    ref,\n  });\n}\n\nSelectValue.displayName = \"SelectValue\";\n"],"mappings":";;;;;;;AAUA,MAAM,QAAQ,QAAQ,IAAI,aAAa;;AAavC,SAAS,0BAAmC;CAC1C,OAAO,OAAO,eAAe,eAAe,gCAAgC;AAC9E;;;;;;;AAQA,SAAS,gBAAgB,QAAwB,UAAsC;CACrF,IAAI,OAAO,SAAS,gBAAgB,OAAO,WAAW,UAAU,OAAO;CACvE,OAAO,SAAS,SAAS,OAAO,MAAM;AACxC;;AAGA,SAAS,QAAQ,QAAiC;CAEhD,IAAI,OAAO,kBAAkB,IAAI;CAGjC,OAAO,QADS,OAAO;AAEzB;;;;;;;;;;;;;;;;AAiBA,SAAgB,YAAY,EAAE,WAAW,OAAO,QAAQ,GAAG,QAA0B;CACnF,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,EAAE,KAAK,SAAS,iBAA8B,gBAAgB,iBAAiB;CAErF,sBAAsB;EACpB,MAAM,KAAK,KAAK;EAChB,IAAI,OAAO,MAAM;EACjB,MAAM,SAAS,GAAG,QAAQ,QAAQ;EAClC,IAAI,WAAW,MAAM;GACnB,IAAI,OACF,QAAQ,MACN,oHAEF;GAEF;EACF;EACA,IAAI,CAAC,wBAAwB,GAAG;EAChC,MAAM,WAAW,IAAI,kBAAkB,YAAY;GACjD,MAAM,WAAW,OAAO,QAAQ,OAAO;GACvC,IAAI,aAAa,KAAA,GAAW;GAC5B,IAAI,QAAQ,MAAM,WAAW,gBAAgB,QAAQ,QAAQ,CAAC,GAAG,QAAQ,MAAM;EACjF,CAAC;EACD,SAAS,QAAQ,QAAQ;GACvB,WAAW;GACX,eAAe;GACf,YAAY;GACZ,SAAS;EACX,CAAC;EACD,aAAa;GACX,SAAS,WAAW;EACtB;CACF,GAAG,CAAC,IAAI,CAAC;CAQT,MAAM,YAAY,eACT,EACL,IAAI,UAAoC;EACtC,OAAO,KAAK,SAAS,QAAQ,QAAQ,KAAK;CAC5C,EACF,IACA,CAAC,IAAI,CACP;CACA,aAAa,iBAAiB;EAC5B,MAAM,SAAS,UAAU;EACzB,IAAI,WAAW,QAAQ,wBAAwB,GAAG,QAAQ,MAAM;CAClE,CAAC;CAED,MAAM,QAAyB;EAC7B,OAAO,IAAI;EACX,SAAS,IAAI;EACb,UAAU,IAAI;CAChB;CACA,OAAO,UAAqE;EAC1E,gBAAgB;EAChB;EACA;EACA;EACA;EACA,UAAU,KAAA;EACV,OAAO;EACP,cAAc;GACZ,0BAA0B;GAC1B,yBAAyB,EAAE,QAAQ,GAAG;EACxC;EACA;CACF,CAAC;AACH;AAEA,YAAY,cAAc"}

package/dist/tabs/tabs-context.mjs

@@ -2,12 +2,13 @@
 import { createContext, use } from "react";
 //#region src/tabs/tabs-context.ts
 const TabsContext = createContext(null);
+const TabsListContext = createContext(null);
 function useTabsContext(part) {
 	const context = use(TabsContext);
 	if (context === null) throw new Error(`${part} must be rendered inside a Tabs.Root.`);
 	return context;
 }
 //#endregion
-export { TabsContext, useTabsContext };
+export { TabsContext, TabsListContext, useTabsContext };
 
 //# sourceMappingURL=tabs-context.mjs.map

package/dist/tabs/tabs-context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-context.mjs","names":[],"sources":["../../src/tabs/tabs-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\nexport type TabsOrientation = \"horizontal\" | \"vertical\";\nexport type TabsActivationMode = \"automatic\" | \"manual\";\n\n/** Why a Tabs change was dispatched (design section 3.1). */\nexport type TabsChangeReason = \"activate\" | \"platform\";\n\nexport interface TabsContextValue {\n  readonly rootId: string;\n  /** Committed value: Panels render this. */\n  readonly committed: string | null;\n  /** Optimistic value: Tabs and the Indicator render this. */\n  readonly optimistic: string | null;\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n  readonly activationMode: TabsActivationMode;\n  readonly loop: boolean;\n  readonly disabled: boolean;\n  /** Dispatches a change. No-op if `value` is the optimistic value. Never checks `disabled`. */\n  readonly select: (value: string, event: Event | undefined, reason: TabsChangeReason) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(part: string): TabsContextValue {\n  const context = use(TabsContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Tabs.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAwBA,MAAa,cAAc,cAAuC,IAAI;AAEtE,SAAgB,eAAe,MAAgC;CAC7D,MAAM,UAAU,IAAI,WAAW;CAC/B,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,sCAAsC;CAEhE,OAAO;AACT"}
+{"version":3,"file":"tabs-context.mjs","names":[],"sources":["../../src/tabs/tabs-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\nexport type TabsOrientation = \"horizontal\" | \"vertical\";\nexport type TabsActivationMode = \"automatic\" | \"manual\";\n\n/** Why a Tabs change was dispatched (design section 3.1). */\nexport type TabsChangeReason = \"activate\" | \"platform\";\n\nexport interface TabsContextValue {\n  readonly rootId: string;\n  /** Committed value: Panels render this. */\n  readonly committed: string | null;\n  /** Optimistic value: Tabs and the Indicator render this. */\n  readonly optimistic: string | null;\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n  readonly activationMode: TabsActivationMode;\n  readonly loop: boolean;\n  readonly disabled: boolean;\n  /** Dispatches a change. No-op if `value` is the optimistic value. Never checks `disabled`. */\n  readonly select: (value: string, event: Event | undefined, reason: TabsChangeReason) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\n/** What a Tabs.List tells its Tabs about `experimental_focusgroup`. */\nexport interface TabsListContextValue {\n  /** `experimental_focusgroup` is on: the selected Tab carries `focusgroupstart`. */\n  readonly focusgroup: boolean;\n  /**\n   * The flag is on and the engine implements `focusgroup` (detected in an effect, so false during\n   * SSR and hydration). Unselected Tabs then drop `tabindex=\"-1\"`: Chromium leaves an element with\n   * a negative tabindex out of the focusgroup, so roving tabindex would disable the native arrows.\n   */\n  readonly nativeFocusgroup: boolean;\n}\n\nexport const TabsListContext = createContext<TabsListContextValue | null>(null);\n\nexport function useTabsContext(part: string): TabsContextValue {\n  const context = use(TabsContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Tabs.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAwBA,MAAa,cAAc,cAAuC,IAAI;AActE,MAAa,kBAAkB,cAA2C,IAAI;AAE9E,SAAgB,eAAe,MAAgC;CAC7D,MAAM,UAAU,IAAI,WAAW;CAC/B,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,sCAAsC;CAEhE,OAAO;AACT"}

package/dist/tabs/tabs-list.d.mts

@@ -26,7 +26,7 @@ export interface TabsListProps extends Omit<ComponentPropsWithRef<"div">, "onKey
  * `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,
  * and `focusgroup` when `experimental_focusgroup` is on.
  */
-export declare function TabsList({ experimental_focusgroup, className, style, children, render, ...rest }: TabsListProps): ReactNode;
+export declare function TabsList({ experimental_focusgroup, className, style, children, render, ...rest }: TabsListProps): import("react").JSX.Element;
 export declare namespace TabsList {
   var displayName: string;
 }

package/dist/tabs/tabs-list.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-list.d.mts","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"mappings":";;;;iBAgBiB;WACN,aAAa;WACb;;iBAGM,sBAAsB,KACrC;;;;;;EAQA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBA4CpC,WACd,yBACA,WACA,OACA,UACA,WACG,QACF,gBAAa;yBAPA"}
+{"version":3,"file":"tabs-list.d.mts","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"mappings":";;;;iBAgBiB;WACN,aAAa;WACb;;iBAGM,sBAAsB,KACrC;;;;;;EAQA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBA+CpC,WACd,yBACA,WACA,OACA,UACA,WACG,QACF,gCAAa,IAAA;yBAPA"}

package/dist/tabs/tabs-list.mjs

@@ -2,8 +2,9 @@
 import { dataAttr } from "../internal/data-attr.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
-import { useTabsContext } from "./tabs-context.mjs";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { TabsListContext, useTabsContext } from "./tabs-context.mjs";
+import { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/tabs/tabs-list.tsx
 function resolveKey(key, orientation, rtl) {
 	switch (key) {
@@ -23,6 +24,8 @@ function tabsOf(list) {
 function focusTab(tab) {
 	tab.focus({ focusVisible: true });
 }
+/** Engine capabilities never change while the page lives. */
+const subscribeNever = () => () => {};
 /**
 * The `role="tablist"` container. Owns arrow-key / Home / End navigation between Tabs: it only
 * moves focus; automatic activation happens in the Tab's focus handler.
@@ -33,10 +36,11 @@ function focusTab(tab) {
 */
 function TabsList({ experimental_focusgroup = false, className, style, children, render, ...rest }) {
 	const { orientation, loop, disabled, optimistic } = useTabsContext("Tabs.List");
-	const nativeFocusgroup = useRef(false);
-	useEffect(() => {
-		nativeFocusgroup.current = experimental_focusgroup && "focusgroup" in HTMLElement.prototype;
-	}, [experimental_focusgroup]);
+	const nativeFocusgroup = useSyncExternalStore(subscribeNever, () => experimental_focusgroup && "focusGroup" in HTMLElement.prototype, () => false);
+	const listContext = useMemo(() => ({
+		focusgroup: experimental_focusgroup,
+		nativeFocusgroup
+	}), [experimental_focusgroup, nativeFocusgroup]);
 	const listRef = useRef(null);
 	const [unmatched, setUnmatched] = useState(false);
 	useLayoutEffect(() => {
@@ -62,7 +66,7 @@ function TabsList({ experimental_focusgroup = false, className, style, children,
 		const rtl = orientation === "horizontal" && getComputedStyle(list).direction === "rtl";
 		const move = resolveKey(event.key, orientation, rtl);
 		if (move === null) return;
-		if (nativeFocusgroup.current) return;
+		if (nativeFocusgroup) return;
 		event.preventDefault();
 		const tabs = tabsOf(list);
 		if (tabs.length === 0) return;
@@ -93,8 +97,8 @@ function TabsList({ experimental_focusgroup = false, className, style, children,
 		const first = tabs.find((tab) => tab.getAttribute("aria-disabled") !== "true") ?? tabs[0];
 		if (first !== void 0) focusTab(first);
 	};
-	const focusgroup = experimental_focusgroup ? `tablist ${orientation === "vertical" ? "block" : "inline"} ${loop ? "wrap" : "nowrap"}` : void 0;
-	return useRender({
+	const focusgroup = experimental_focusgroup ? `tablist ${orientation === "vertical" ? "block" : "inline"} ${loop ? "wrap" : "nowrap"} nomemory` : void 0;
+	const element = useRender({
 		defaultElement: "div",
 		render,
 		state,
@@ -114,6 +118,10 @@ function TabsList({ experimental_focusgroup = false, className, style, children,
 		},
 		ref: listRef
 	});
+	return /* @__PURE__ */ jsx(TabsListContext, {
+		value: listContext,
+		children: element
+	});
 }
 TabsList.displayName = "TabsList";
 //#endregion

package/dist/tabs/tabs-list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-list.mjs","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useTabsContext } from \"./tabs-context.js\";\nimport type { TabsOrientation } from \"./tabs-context.js\";\n\nexport interface TabsListState {\n  readonly orientation: TabsOrientation;\n  readonly disabled: boolean;\n}\n\nexport interface TabsListProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onKeyDown\" | \"onFocus\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Render `focusgroup=\"tablist …\"` and, where the browser implements it, let the browser handle\n   * arrow keys, Home and End. Chromium 150+ only; elsewhere the JS path stays active.\n   * Default `false`.\n   */\n  experimental_focusgroup?: boolean;\n  className?: StateValue<string | undefined, TabsListState>;\n  style?: StateValue<CSSProperties | undefined, TabsListState>;\n  children?: StateValue<ReactNode, TabsListState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsListState>;\n}\n\ntype Move = \"next\" | \"prev\" | \"first\" | \"last\";\n\nfunction resolveKey(key: string, orientation: TabsOrientation, rtl: boolean): Move | null {\n  switch (key) {\n    case \"Home\":\n      return \"first\";\n    case \"End\":\n      return \"last\";\n    case \"ArrowRight\":\n      return orientation === \"horizontal\" ? (rtl ? \"prev\" : \"next\") : null;\n    case \"ArrowLeft\":\n      return orientation === \"horizontal\" ? (rtl ? \"next\" : \"prev\") : null;\n    case \"ArrowDown\":\n      return orientation === \"vertical\" ? \"next\" : null;\n    case \"ArrowUp\":\n      return orientation === \"vertical\" ? \"prev\" : null;\n    default:\n      return null;\n  }\n}\n\n/** The tabs that belong to `list` (not to a nested tablist), in DOM order. Disabled included. */\nfunction tabsOf(list: Element): HTMLElement[] {\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n    (tab) => tab.closest('[role=\"tablist\"]') === list,\n  );\n}\n\nfunction focusTab(tab: HTMLElement): void {\n  // `focusVisible` shows the ring even where the engine's heuristic would not (survey: adopt).\n  tab.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * The `role=\"tablist\"` container. Owns arrow-key / Home / End navigation between Tabs: it only\n * moves focus; automatic activation happens in the Tab's focus handler.\n *\n * Owned keys (a `render` element cannot override them, conventions 1.2): `role`,\n * `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,\n * and `focusgroup` when `experimental_focusgroup` is on.\n */\nexport function TabsList({\n  experimental_focusgroup = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsListProps) {\n  const ctx = useTabsContext(\"Tabs.List\");\n  const { orientation, loop, disabled, optimistic } = ctx;\n\n  // Feature detection only when the flag is on, and only in an effect (conventions 8): markup\n  // never differs between server and client.\n  const nativeFocusgroup = useRef(false);\n  useEffect(() => {\n    nativeFocusgroup.current = experimental_focusgroup && \"focusgroup\" in HTMLElement.prototype;\n  }, [experimental_focusgroup]);\n\n  // A value that matches no Tab (a controlled `value` for a route without a tab, design 11.5)\n  // leaves no tab with tabindex=0, so the List takes over as the tab stop exactly as for `null`.\n  // Read from the DOM (Tabs register nowhere) whenever the value or the List's children change; a\n  // Tab added or removed by a component below that re-renders on its own is picked up on the\n  // List's next render. The state only changes when the answer does.\n  const listRef = useRef<HTMLElement | null>(null);\n  const [unmatched, setUnmatched] = useState(false);\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const next =\n      optimistic !== null &&\n      list !== null &&\n      !tabsOf(list).some((tab) => tab.getAttribute(\"tabindex\") === \"0\");\n    if (next !== unmatched) setUnmatched(next);\n  }, [optimistic, children, unmatched]);\n  useDevWarning(\n    unmatched,\n    `Tabs: the value ${JSON.stringify(optimistic)} matches no Tabs.Tab. No tab is selected; the ` +\n      \"tablist itself is the tab stop. Pass null to select nothing on purpose.\",\n  );\n  const listIsTabStop = optimistic === null || unmatched;\n\n  const state: TabsListState = { orientation, disabled };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const list = event.currentTarget;\n    const target = event.target as Element;\n    if (target.getAttribute(\"role\") !== \"tab\" || target.closest('[role=\"tablist\"]') !== list) {\n      return;\n    }\n    const rtl = orientation === \"horizontal\" && getComputedStyle(list).direction === \"rtl\";\n    const move = resolveKey(event.key, orientation, rtl);\n    if (move === null) return;\n    // The browser moves focus itself where `focusgroup` is implemented.\n    if (nativeFocusgroup.current) return;\n\n    event.preventDefault();\n    const tabs = tabsOf(list);\n    if (tabs.length === 0) return;\n    const index = tabs.indexOf(target as HTMLElement);\n    const last = tabs.length - 1;\n    let nextIndex: number;\n    switch (move) {\n      case \"first\":\n        nextIndex = 0;\n        break;\n      case \"last\":\n        nextIndex = last;\n        break;\n      case \"next\":\n        nextIndex = index >= last ? (loop ? 0 : last) : index + 1;\n        break;\n      case \"prev\":\n        nextIndex = index <= 0 ? (loop ? last : 0) : index - 1;\n        break;\n    }\n    const next = tabs[nextIndex];\n    if (next !== undefined && next !== target) focusTab(next);\n  };\n\n  // With no selected tab (value null or matching no Tab) no Tab has tabindex=0, so the list\n  // itself is the tab stop and hands focus to the first enabled tab (design section 8). Only when\n  // focus arrives from outside the list: Shift+Tab from a tab inside would otherwise bounce\n  // straight back. The redirect never selects: the Tab only dispatches on focus that moves\n  // between tabs.\n  const onFocus = (event: FocusEvent<HTMLElement>) => {\n    const list = event.currentTarget;\n    if (event.target !== list || !listIsTabStop) return;\n    const from = event.relatedTarget;\n    if (from instanceof Node && list.contains(from)) return;\n    const tabs = tabsOf(list);\n    const first = tabs.find((tab) => tab.getAttribute(\"aria-disabled\") !== \"true\") ?? tabs[0];\n    if (first !== undefined) focusTab(first);\n  };\n\n  const focusgroup = experimental_focusgroup\n    ? `tablist ${orientation === \"vertical\" ? \"block\" : \"inline\"} ${loop ? \"wrap\" : \"nowrap\"}`\n    : undefined;\n\n  return useRender<ComponentPropsWithRef<\"div\">, TabsListState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"tablist\",\n      \"aria-orientation\": orientation,\n      \"data-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      tabIndex: listIsTabStop ? 0 : undefined,\n      // Owned only while the flag is on; otherwise the key is omitted, not `undefined`, so it is not\n      // owned (conventions 1.2).\n      ...(focusgroup !== undefined && { focusgroup }),\n      onKeyDown,\n      onFocus,\n    },\n    ref: listRef,\n  });\n}\n\nTabsList.displayName = \"TabsList\";\n"],"mappings":"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"}
+{"version":3,"file":"tabs-list.mjs","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { TabsListContext, useTabsContext } from \"./tabs-context.js\";\nimport type { TabsListContextValue, TabsOrientation } from \"./tabs-context.js\";\n\nexport interface TabsListState {\n  readonly orientation: TabsOrientation;\n  readonly disabled: boolean;\n}\n\nexport interface TabsListProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onKeyDown\" | \"onFocus\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Render `focusgroup=\"tablist …\"` and, where the browser implements it, let the browser handle\n   * arrow keys, Home and End. Chromium 150+ only; elsewhere the JS path stays active.\n   * Default `false`.\n   */\n  experimental_focusgroup?: boolean;\n  className?: StateValue<string | undefined, TabsListState>;\n  style?: StateValue<CSSProperties | undefined, TabsListState>;\n  children?: StateValue<ReactNode, TabsListState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsListState>;\n}\n\ntype Move = \"next\" | \"prev\" | \"first\" | \"last\";\n\nfunction resolveKey(key: string, orientation: TabsOrientation, rtl: boolean): Move | null {\n  switch (key) {\n    case \"Home\":\n      return \"first\";\n    case \"End\":\n      return \"last\";\n    case \"ArrowRight\":\n      return orientation === \"horizontal\" ? (rtl ? \"prev\" : \"next\") : null;\n    case \"ArrowLeft\":\n      return orientation === \"horizontal\" ? (rtl ? \"next\" : \"prev\") : null;\n    case \"ArrowDown\":\n      return orientation === \"vertical\" ? \"next\" : null;\n    case \"ArrowUp\":\n      return orientation === \"vertical\" ? \"prev\" : null;\n    default:\n      return null;\n  }\n}\n\n/** The tabs that belong to `list` (not to a nested tablist), in DOM order. Disabled included. */\nfunction tabsOf(list: Element): HTMLElement[] {\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n    (tab) => tab.closest('[role=\"tablist\"]') === list,\n  );\n}\n\nfunction focusTab(tab: HTMLElement): void {\n  // `focusVisible` shows the ring even where the engine's heuristic would not (survey: adopt).\n  tab.focus({ focusVisible: true } as FocusOptions);\n}\n\n/** Engine capabilities never change while the page lives. */\nconst subscribeNever = () => () => {};\n\n/**\n * The `role=\"tablist\"` container. Owns arrow-key / Home / End navigation between Tabs: it only\n * moves focus; automatic activation happens in the Tab's focus handler.\n *\n * Owned keys (a `render` element cannot override them, conventions 1.2): `role`,\n * `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,\n * and `focusgroup` when `experimental_focusgroup` is on.\n */\nexport function TabsList({\n  experimental_focusgroup = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsListProps) {\n  const ctx = useTabsContext(\"Tabs.List\");\n  const { orientation, loop, disabled, optimistic } = ctx;\n\n  // Feature detection only when the flag is on, and never during SSR or hydration (conventions\n  // 8): the server snapshot is `false`, so hydration markup matches the server and React re-renders\n  // with the client answer afterwards. The IDL attribute is camel-cased `focusGroup`\n  // (`\"focusgroup\" in HTMLElement.prototype` is always false, issue #43). The Tabs read it too:\n  // they drop `tabindex=\"-1\"` on the native path (TabsListContextValue).\n  const nativeFocusgroup = useSyncExternalStore(\n    subscribeNever,\n    () => experimental_focusgroup && \"focusGroup\" in HTMLElement.prototype,\n    () => false,\n  );\n  const listContext = useMemo<TabsListContextValue>(\n    () => ({ focusgroup: experimental_focusgroup, nativeFocusgroup }),\n    [experimental_focusgroup, nativeFocusgroup],\n  );\n\n  // A value that matches no Tab (a controlled `value` for a route without a tab, design 11.5)\n  // leaves no tab with tabindex=0, so the List takes over as the tab stop exactly as for `null`.\n  // Read from the DOM (Tabs register nowhere) whenever the value or the List's children change; a\n  // Tab added or removed by a component below that re-renders on its own is picked up on the\n  // List's next render. The state only changes when the answer does.\n  const listRef = useRef<HTMLElement | null>(null);\n  const [unmatched, setUnmatched] = useState(false);\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const next =\n      optimistic !== null &&\n      list !== null &&\n      !tabsOf(list).some((tab) => tab.getAttribute(\"tabindex\") === \"0\");\n    if (next !== unmatched) setUnmatched(next);\n  }, [optimistic, children, unmatched]);\n  useDevWarning(\n    unmatched,\n    `Tabs: the value ${JSON.stringify(optimistic)} matches no Tabs.Tab. No tab is selected; the ` +\n      \"tablist itself is the tab stop. Pass null to select nothing on purpose.\",\n  );\n  const listIsTabStop = optimistic === null || unmatched;\n\n  const state: TabsListState = { orientation, disabled };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const list = event.currentTarget;\n    const target = event.target as Element;\n    if (target.getAttribute(\"role\") !== \"tab\" || target.closest('[role=\"tablist\"]') !== list) {\n      return;\n    }\n    const rtl = orientation === \"horizontal\" && getComputedStyle(list).direction === \"rtl\";\n    const move = resolveKey(event.key, orientation, rtl);\n    if (move === null) return;\n    // The browser moves focus itself where `focusgroup` is implemented.\n    if (nativeFocusgroup) return;\n\n    event.preventDefault();\n    const tabs = tabsOf(list);\n    if (tabs.length === 0) return;\n    const index = tabs.indexOf(target as HTMLElement);\n    const last = tabs.length - 1;\n    let nextIndex: number;\n    switch (move) {\n      case \"first\":\n        nextIndex = 0;\n        break;\n      case \"last\":\n        nextIndex = last;\n        break;\n      case \"next\":\n        nextIndex = index >= last ? (loop ? 0 : last) : index + 1;\n        break;\n      case \"prev\":\n        nextIndex = index <= 0 ? (loop ? last : 0) : index - 1;\n        break;\n    }\n    const next = tabs[nextIndex];\n    if (next !== undefined && next !== target) focusTab(next);\n  };\n\n  // With no selected tab (value null or matching no Tab) no Tab has tabindex=0, so the list\n  // itself is the tab stop and hands focus to the first enabled tab (design section 8). Only when\n  // focus arrives from outside the list: Shift+Tab from a tab inside would otherwise bounce\n  // straight back. The redirect never selects: the Tab only dispatches on focus that moves\n  // between tabs.\n  const onFocus = (event: FocusEvent<HTMLElement>) => {\n    const list = event.currentTarget;\n    if (event.target !== list || !listIsTabStop) return;\n    const from = event.relatedTarget;\n    if (from instanceof Node && list.contains(from)) return;\n    const tabs = tabsOf(list);\n    const first = tabs.find((tab) => tab.getAttribute(\"aria-disabled\") !== \"true\") ?? tabs[0];\n    if (first !== undefined) focusTab(first);\n  };\n\n  const focusgroup = experimental_focusgroup\n    ? // `nomemory` + `focusgroupstart` on the selected Tab: Tab always enters on the selected tab\n      // (APG), not on the last focused one, which differs in manual activation.\n      `tablist ${orientation === \"vertical\" ? \"block\" : \"inline\"} ${loop ? \"wrap\" : \"nowrap\"} nomemory`\n    : undefined;\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, TabsListState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"tablist\",\n      \"aria-orientation\": orientation,\n      \"data-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      tabIndex: listIsTabStop ? 0 : undefined,\n      // Owned only while the flag is on; otherwise the key is omitted, not `undefined`, so it is not\n      // owned (conventions 1.2).\n      ...(focusgroup !== undefined && { focusgroup }),\n      onKeyDown,\n      onFocus,\n    },\n    ref: listRef,\n  });\n\n  return <TabsListContext value={listContext}>{element}</TabsListContext>;\n}\n\nTabsList.displayName = \"TabsList\";\n"],"mappings":"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"}

package/dist/tabs/tabs-tab.d.mts

@@ -38,7 +38,7 @@ export interface TabsTabProps extends Omit<ComponentPropsWithRef<"button">, "onC
  * roving `tabindex`) and carries `anchor-name` for the Indicator.
  *
  * Owned keys (conventions 1.2): `role`, `id`, `aria-selected`, `aria-controls` (token-merged),
- * `aria-disabled`, `tabIndex`, `data-selected`, `data-pending`, `data-disabled`,
+ * `aria-disabled`, `tabIndex`, `focusgroupstart` (with `experimental_focusgroup`), `data-selected`, `data-pending`, `data-disabled`,
  * `data-orientation`, `onClick`, `onKeyDown`, `onFocus`.
  */
 export declare function TabsTab({ value, disabled: disabledProp, transition, className, style, children, render, ...rest }: TabsTabProps): ReactNode;

package/dist/tabs/tabs-tab.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-tab.d.mts","names":[],"sources":["../../src/tabs/tabs-tab.tsx"],"mappings":";;;;iBAkBiB;WACN;;WAEA;;WAEA;WACA;WACA,aAAa;;iBAGP,qBAAqB,KACpC;;EAIA;;EAEA;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;wBA2BvC,UACd,OACA,UAAU,cACV,YACA,WACA,OACA,UACA,WACG,QACF,eAAY;yBATC"}
+{"version":3,"file":"tabs-tab.d.mts","names":[],"sources":["../../src/tabs/tabs-tab.tsx"],"mappings":";;;;iBAmBiB;WACN;;WAEA;;WAEA;WACA;WACA,aAAa;;iBAGP,qBAAqB,KACpC;;EAIA;;EAEA;;;;;;;;;;;EAWA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;EAE9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;;wBA2BvC,UACd,OACA,UAAU,cACV,YACA,WACA,OACA,UACA,WACG,QACF,eAAY;yBATC"}

package/dist/tabs/tabs-tab.mjs

@@ -2,8 +2,9 @@
 import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
 import { rendersButton, resolveStateValue, useRender } from "../internal/use-render.mjs";
-import { useTabsContext } from "./tabs-context.mjs";
+import { TabsListContext, useTabsContext } from "./tabs-context.mjs";
 import { anchorName, panelId, tabId } from "./tabs-ids.mjs";
+import { use } from "react";
 //#region src/tabs/tabs-tab.tsx
 function isActivationKey(event) {
 	return (event.key === "Enter" || event.key === " ") && !event.altKey && !event.ctrlKey && !event.metaKey;
@@ -19,11 +20,12 @@ function movedWithinList(event) {
 * roving `tabindex`) and carries `anchor-name` for the Indicator.
 *
 * Owned keys (conventions 1.2): `role`, `id`, `aria-selected`, `aria-controls` (token-merged),
-* `aria-disabled`, `tabIndex`, `data-selected`, `data-pending`, `data-disabled`,
+* `aria-disabled`, `tabIndex`, `focusgroupstart` (with `experimental_focusgroup`), `data-selected`, `data-pending`, `data-disabled`,
 * `data-orientation`, `onClick`, `onKeyDown`, `onFocus`.
 */
 function TabsTab({ value, disabled: disabledProp = false, transition, className, style, children, render, ...rest }) {
 	const ctx = useTabsContext("Tabs.Tab");
+	const listCtx = use(TabsListContext);
 	const selected = ctx.optimistic === value;
 	const pending = ctx.pending && selected;
 	const disabled = ctx.disabled || disabledProp;
@@ -55,7 +57,8 @@ function TabsTab({ value, disabled: disabledProp = false, transition, className,
 			"aria-selected": selected,
 			"aria-controls": panelId(ctx.rootId, value),
 			"aria-disabled": disabled ? true : void 0,
-			tabIndex: selected ? 0 : -1,
+			tabIndex: selected ? 0 : listCtx?.nativeFocusgroup ? void 0 : -1,
+			...listCtx?.focusgroup === true && { focusgroupstart: selected ? "" : void 0 },
 			"data-selected": dataAttr(selected),
 			"data-pending": dataAttr(pending),
 			"data-disabled": dataAttr(disabled),

package/dist/tabs/tabs-tab.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-tab.mjs","names":[],"sources":["../../src/tabs/tabs-tab.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\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 { useTabsContext } from \"./tabs-context.js\";\nimport type { TabsOrientation } from \"./tabs-context.js\";\nimport { anchorName, panelId, tabId } from \"./tabs-ids.js\";\n\nexport interface TabsTabState {\n  readonly value: string;\n  /** Optimistic: true as soon as the user selects this tab, before the action settles. */\n  readonly selected: boolean;\n  /** The Root is pending and this tab is the optimistic target. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n  readonly orientation: TabsOrientation;\n}\n\nexport interface TabsTabProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"onKeyDown\" | \"onFocus\" | \"id\" | \"value\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The value this tab selects. Must be unique within the Root. */\n  value: string;\n  /** Focusable but inert: `aria-disabled=\"true\"`, never dispatches. */\n  disabled?: boolean;\n  /**\n   * Forwarded to the Tab's `<ViewTransition default>`. Default: no boundary. Fires only on the commit\n   * that settles the action (or rolls it back), never on the optimistic selection; animate the\n   * selection itself with a CSS `transition` on `[data-selected]`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, TabsTabState>;\n  style?: StateValue<CSSProperties | undefined, TabsTabState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, TabsTabState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, TabsTabState>;\n}\n\nfunction isActivationKey(event: KeyboardEvent): boolean {\n  return (\n    (event.key === \"Enter\" || event.key === \" \") &&\n    !event.altKey &&\n    !event.ctrlKey &&\n    !event.metaKey\n  );\n}\n\n/** Focus came from another element inside the tab's own tablist (not from the list itself). */\nfunction movedWithinList(event: FocusEvent<HTMLElement>): boolean {\n  const list = event.currentTarget.closest('[role=\"tablist\"]');\n  const from = event.relatedTarget;\n  return list !== null && from instanceof Node && from !== list && list.contains(from);\n}\n\n/**\n * A `button[role=tab]`. Renders the optimistic selection (`aria-selected`, `data-selected`,\n * roving `tabindex`) and carries `anchor-name` for the Indicator.\n *\n * Owned keys (conventions 1.2): `role`, `id`, `aria-selected`, `aria-controls` (token-merged),\n * `aria-disabled`, `tabIndex`, `data-selected`, `data-pending`, `data-disabled`,\n * `data-orientation`, `onClick`, `onKeyDown`, `onFocus`.\n */\nexport function TabsTab({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsTabProps) {\n  const ctx = useTabsContext(\"Tabs.Tab\");\n  const selected = ctx.optimistic === value;\n  const pending = ctx.pending && selected;\n  const disabled = ctx.disabled || disabledProp;\n  const anchor = anchorName(ctx.rootId, value);\n\n  const state: TabsTabState = {\n    value,\n    selected,\n    pending,\n    disabled,\n    orientation: ctx.orientation,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, TabsTabState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    // `anchor-name` sits under the consumer's style: the consumer wins (design 13.5).\n    style: (s) => ({ anchorName: anchor, ...resolveStateValue(style, s) }),\n    children,\n    // `type=\"button\"` only on a real button (no form submission); an `<a>` must not get it.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    libraryProps: {\n      role: \"tab\",\n      id: tabId(ctx.rootId, value),\n      \"aria-selected\": selected,\n      \"aria-controls\": panelId(ctx.rootId, value),\n      \"aria-disabled\": disabled ? true : undefined,\n      tabIndex: selected ? 0 : -1,\n      \"data-selected\": dataAttr(selected),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": ctx.orientation,\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n      // Enter and Space are handled on keydown so a `render`ed non-button element (a link)\n      // behaves the same; `preventDefault` also stops the native click / navigation.\n      onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n        if (!isActivationKey(event)) return;\n        event.preventDefault();\n        if (disabled) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n      // Automatic activation is selection-follows-focus (design 4.1), but only for focus that\n      // moves between tabs inside this list (the arrow-key path, the native `focusgroup` path,\n      // programmatic movement). Focus entering from outside never selects: the Tab key, window\n      // re-activation, focus restore, `autoFocus`, and the List's own redirect when no tab is the\n      // tab stop. A click still selects through `onClick`.\n      onFocus: (event: FocusEvent<HTMLButtonElement>) => {\n        if (ctx.activationMode !== \"automatic\" || disabled || selected) return;\n        if (!movedWithinList(event)) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Tabs.Tab\", transition, element);\n}\n\nTabsTab.displayName = \"TabsTab\";\n"],"mappings":";;;;;;;AAsDA,SAAS,gBAAgB,OAA+B;CACtD,QACG,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,CAAC,MAAM,UACP,CAAC,MAAM,WACP,CAAC,MAAM;AAEX;;AAGA,SAAS,gBAAgB,OAAyC;CAChE,MAAM,OAAO,MAAM,cAAc,QAAQ,oBAAkB;CAC3D,MAAM,OAAO,MAAM;CACnB,OAAO,SAAS,QAAQ,gBAAgB,QAAQ,SAAS,QAAQ,KAAK,SAAS,IAAI;AACrF;;;;;;;;;AAUA,SAAgB,QAAQ,EACtB,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,UACA,QACA,GAAG,QACY;CACf,MAAM,MAAM,eAAe,UAAU;CACrC,MAAM,WAAW,IAAI,eAAe;CACpC,MAAM,UAAU,IAAI,WAAW;CAC/B,MAAM,WAAW,IAAI,YAAY;CACjC,MAAM,SAAS,WAAW,IAAI,QAAQ,KAAK;CAE3C,MAAM,QAAsB;EAC1B;EACA;EACA;EACA;EACA,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,UAAyD;EACvE,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GAAE,YAAY;GAAQ,GAAG,kBAAkB,OAAO,CAAC;EAAE;EACpE;EAEA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAC7D,cAAc;GACZ,MAAM;GACN,IAAI,MAAM,IAAI,QAAQ,KAAK;GAC3B,iBAAiB;GACjB,iBAAiB,QAAQ,IAAI,QAAQ,KAAK;GAC1C,iBAAiB,WAAW,OAAO,KAAA;GACnC,UAAU,WAAW,IAAI;GACzB,iBAAiB,SAAS,QAAQ;GAClC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,oBAAoB,IAAI;GACxB,UAAU,UAAyC;IACjD,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;GAGA,YAAY,UAA4C;IACtD,IAAI,CAAC,gBAAgB,KAAK,GAAG;IAC7B,MAAM,eAAe;IACrB,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;GAMA,UAAU,UAAyC;IACjD,IAAI,IAAI,mBAAmB,eAAe,YAAY,UAAU;IAChE,IAAI,CAAC,gBAAgB,KAAK,GAAG;IAC7B,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,YAAY,YAAY,OAAO;AAC9D;AAEA,QAAQ,cAAc"}
+{"version":3,"file":"tabs-tab.mjs","names":[],"sources":["../../src/tabs/tabs-tab.tsx"],"sourcesContent":["\"use client\";\nimport { use } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\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 { TabsListContext, useTabsContext } from \"./tabs-context.js\";\nimport type { TabsOrientation } from \"./tabs-context.js\";\nimport { anchorName, panelId, tabId } from \"./tabs-ids.js\";\n\nexport interface TabsTabState {\n  readonly value: string;\n  /** Optimistic: true as soon as the user selects this tab, before the action settles. */\n  readonly selected: boolean;\n  /** The Root is pending and this tab is the optimistic target. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n  readonly orientation: TabsOrientation;\n}\n\nexport interface TabsTabProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"onKeyDown\" | \"onFocus\" | \"id\" | \"value\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The value this tab selects. Must be unique within the Root. */\n  value: string;\n  /** Focusable but inert: `aria-disabled=\"true\"`, never dispatches. */\n  disabled?: boolean;\n  /**\n   * Forwarded to the Tab's `<ViewTransition default>`. Default: no boundary. Fires only on the commit\n   * that settles the action (or rolls it back), never on the optimistic selection; animate the\n   * selection itself with a CSS `transition` on `[data-selected]`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, TabsTabState>;\n  style?: StateValue<CSSProperties | undefined, TabsTabState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, TabsTabState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, TabsTabState>;\n}\n\nfunction isActivationKey(event: KeyboardEvent): boolean {\n  return (\n    (event.key === \"Enter\" || event.key === \" \") &&\n    !event.altKey &&\n    !event.ctrlKey &&\n    !event.metaKey\n  );\n}\n\n/** Focus came from another element inside the tab's own tablist (not from the list itself). */\nfunction movedWithinList(event: FocusEvent<HTMLElement>): boolean {\n  const list = event.currentTarget.closest('[role=\"tablist\"]');\n  const from = event.relatedTarget;\n  return list !== null && from instanceof Node && from !== list && list.contains(from);\n}\n\n/**\n * A `button[role=tab]`. Renders the optimistic selection (`aria-selected`, `data-selected`,\n * roving `tabindex`) and carries `anchor-name` for the Indicator.\n *\n * Owned keys (conventions 1.2): `role`, `id`, `aria-selected`, `aria-controls` (token-merged),\n * `aria-disabled`, `tabIndex`, `focusgroupstart` (with `experimental_focusgroup`), `data-selected`, `data-pending`, `data-disabled`,\n * `data-orientation`, `onClick`, `onKeyDown`, `onFocus`.\n */\nexport function TabsTab({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsTabProps) {\n  const ctx = useTabsContext(\"Tabs.Tab\");\n  const listCtx = use(TabsListContext);\n  const selected = ctx.optimistic === value;\n  const pending = ctx.pending && selected;\n  const disabled = ctx.disabled || disabledProp;\n  const anchor = anchorName(ctx.rootId, value);\n\n  const state: TabsTabState = {\n    value,\n    selected,\n    pending,\n    disabled,\n    orientation: ctx.orientation,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, TabsTabState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    // `anchor-name` sits under the consumer's style: the consumer wins (design 13.5).\n    style: (s) => ({ anchorName: anchor, ...resolveStateValue(style, s) }),\n    children,\n    // `type=\"button\"` only on a real button (no form submission); an `<a>` must not get it.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    libraryProps: {\n      role: \"tab\",\n      id: tabId(ctx.rootId, value),\n      \"aria-selected\": selected,\n      \"aria-controls\": panelId(ctx.rootId, value),\n      \"aria-disabled\": disabled ? true : undefined,\n      // Roving tabindex, except on the native `focusgroup` path, where the browser owns the tab\n      // stop and a negative tabindex would take the Tab out of the group (TabsListContextValue).\n      tabIndex: selected ? 0 : listCtx?.nativeFocusgroup ? undefined : -1,\n      // Always rendered with the flag (inert where unsupported), so markup is stable.\n      ...(listCtx?.focusgroup === true && { focusgroupstart: selected ? \"\" : undefined }),\n      \"data-selected\": dataAttr(selected),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": ctx.orientation,\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        if (disabled) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n      // Enter and Space are handled on keydown so a `render`ed non-button element (a link)\n      // behaves the same; `preventDefault` also stops the native click / navigation.\n      onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n        if (!isActivationKey(event)) return;\n        event.preventDefault();\n        if (disabled) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n      // Automatic activation is selection-follows-focus (design 4.1), but only for focus that\n      // moves between tabs inside this list (the arrow-key path, the native `focusgroup` path,\n      // programmatic movement). Focus entering from outside never selects: the Tab key, window\n      // re-activation, focus restore, `autoFocus`, and the List's own redirect when no tab is the\n      // tab stop. A click still selects through `onClick`.\n      onFocus: (event: FocusEvent<HTMLButtonElement>) => {\n        if (ctx.activationMode !== \"automatic\" || disabled || selected) return;\n        if (!movedWithinList(event)) return;\n        ctx.select(value, event.nativeEvent, \"activate\");\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Tabs.Tab\", transition, element);\n}\n\nTabsTab.displayName = \"TabsTab\";\n"],"mappings":";;;;;;;;AAuDA,SAAS,gBAAgB,OAA+B;CACtD,QACG,MAAM,QAAQ,WAAW,MAAM,QAAQ,QACxC,CAAC,MAAM,UACP,CAAC,MAAM,WACP,CAAC,MAAM;AAEX;;AAGA,SAAS,gBAAgB,OAAyC;CAChE,MAAM,OAAO,MAAM,cAAc,QAAQ,oBAAkB;CAC3D,MAAM,OAAO,MAAM;CACnB,OAAO,SAAS,QAAQ,gBAAgB,QAAQ,SAAS,QAAQ,KAAK,SAAS,IAAI;AACrF;;;;;;;;;AAUA,SAAgB,QAAQ,EACtB,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,UACA,QACA,GAAG,QACY;CACf,MAAM,MAAM,eAAe,UAAU;CACrC,MAAM,UAAU,IAAI,eAAe;CACnC,MAAM,WAAW,IAAI,eAAe;CACpC,MAAM,UAAU,IAAI,WAAW;CAC/B,MAAM,WAAW,IAAI,YAAY;CACjC,MAAM,SAAS,WAAW,IAAI,QAAQ,KAAK;CAE3C,MAAM,QAAsB;EAC1B;EACA;EACA;EACA;EACA,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,UAAyD;EACvE,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GAAE,YAAY;GAAQ,GAAG,kBAAkB,OAAO,CAAC;EAAE;EACpE;EAEA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAC7D,cAAc;GACZ,MAAM;GACN,IAAI,MAAM,IAAI,QAAQ,KAAK;GAC3B,iBAAiB;GACjB,iBAAiB,QAAQ,IAAI,QAAQ,KAAK;GAC1C,iBAAiB,WAAW,OAAO,KAAA;GAGnC,UAAU,WAAW,IAAI,SAAS,mBAAmB,KAAA,IAAY;GAEjE,GAAI,SAAS,eAAe,QAAQ,EAAE,iBAAiB,WAAW,KAAK,KAAA,EAAU;GACjF,iBAAiB,SAAS,QAAQ;GAClC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,oBAAoB,IAAI;GACxB,UAAU,UAAyC;IACjD,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;GAGA,YAAY,UAA4C;IACtD,IAAI,CAAC,gBAAgB,KAAK,GAAG;IAC7B,MAAM,eAAe;IACrB,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;GAMA,UAAU,UAAyC;IACjD,IAAI,IAAI,mBAAmB,eAAe,YAAY,UAAU;IAChE,IAAI,CAAC,gBAAgB,KAAK,GAAG;IAC7B,IAAI,OAAO,OAAO,MAAM,aAAa,UAAU;GACjD;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,YAAY,YAAY,OAAO;AAC9D;AAEA,QAAQ,cAAc"}

package/dist/tooltip/tooltip-popup.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-popup.d.mts","names":[],"sources":["../../src/tooltip/tooltip-popup.tsx"],"mappings":";;;YAQY;YACA;iBAEK;WACN;WACA,MAAM;WACN,OAAO;;iBAGD,0BAA0B,KACzC;;;;;;EAQA,OAAO;;EAEP,QAAQ;;;;;;;EAOR;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;EAK9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBA2BpC,eACd,MACA,OACA,mBACA,WACA,OACA,UACA,WACG,QACF,oBAAiB;yBATJ"}
+{"version":3,"file":"tooltip-popup.d.mts","names":[],"sources":["../../src/tooltip/tooltip-popup.tsx"],"mappings":";;;YASY;YACA;iBAEK;WACN;WACA,MAAM;WACN,OAAO;;iBAGD,0BAA0B,KACzC;;;;;;EAQA,OAAO;;EAEP,QAAQ;;;;;;;EAOR;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;EAK9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBAWpC,eACd,MACA,OACA,mBACA,WACA,OACA,UACA,WACG,QACF,oBAAiB;yBATJ"}

package/dist/tooltip/tooltip-popup.mjs

@@ -1,14 +1,9 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
 import { resolveStateValue, 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
-const FALLBACKS = "flip-block, flip-inline, flip-block flip-inline";
-/** Design section 7.1: the `position-area` for each side and alignment. */
-function positionArea(side, align) {
-	if (align === "center") return side;
-	return `${side} ${side === "top" || side === "bottom" ? align === "start" ? "span-right" : "span-left" : align === "start" ? "span-bottom" : "span-top"}`;
-}
 /**
 * The tooltip content: a `div` with `popover` and `role="tooltip"`, shown in the top layer and
 * anchored to the trigger implicitly (`interestfor` or `showPopover({ source })`). Open state is
@@ -41,7 +36,7 @@ function TooltipPopup({ side = "top", align = "center", experimental_hint = fals
 		className,
 		style: side === null ? style : (s) => ({
 			positionArea: positionArea(side, align),
-			positionTryFallbacks: FALLBACKS,
+			positionTryFallbacks: POSITION_TRY_FALLBACKS,
 			...resolveStateValue(style, s)
 		}),
 		children,

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 { 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\nconst FALLBACKS = \"flip-block, flip-inline, flip-block flip-inline\";\n\n/** Design section 7.1: the `position-area` for each side and alignment. */\nfunction positionArea(side: TooltipSide, align: TooltipAlign): string {\n  if (align === \"center\") return side;\n  const vertical = side === \"top\" || side === \"bottom\";\n  const span = vertical\n    ? align === \"start\"\n      ? \"span-right\"\n      : \"span-left\"\n    : align === \"start\"\n      ? \"span-bottom\"\n      : \"span-top\";\n  return `${side} ${span}`;\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: 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":";;;;;AA8CA,MAAM,YAAY;;AAGlB,SAAS,aAAa,MAAmB,OAA6B;CACpE,IAAI,UAAU,UAAU,OAAO;CAS/B,OAAO,GAAG,KAAK,GARE,SAAS,SAAS,SAAS,WAExC,UAAU,UACR,eACA,cACF,UAAU,UACR,gBACA;AAER;;;;;;;;;AAUA,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/use-tooltip-interaction.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { createDelayedPair } from "../internal/use-delayed-pair.mjs";
 import { useEffect, useEffectEvent } from "react";
 //#region src/tooltip/use-tooltip-interaction.ts
 /**
@@ -29,13 +30,8 @@ function useTooltipInteraction(trigger, popup, options) {
 		if (trigger === null) return;
 		if (interestForRequested && trigger.hasAttribute("interestfor") && "interestForElement" in trigger) return;
 		const doc = trigger.ownerDocument;
-		let timer;
-		const clear = () => {
-			if (timer !== void 0) {
-				clearTimeout(timer);
-				timer = void 0;
-			}
-		};
+		const timers = createDelayedPair();
+		const clear = timers.cancel;
 		const show = () => {
 			if (isOpen(popup) || !popup.isConnected || !trigger.isConnected) return;
 			popup.showPopover({ source: trigger });
@@ -47,18 +43,10 @@ function useTooltipInteraction(trigger, popup, options) {
 			listenDocument(false);
 		};
 		const showLater = () => {
-			clear();
-			timer = setTimeout(() => {
-				timer = void 0;
-				show();
-			}, getDelays().delay);
+			timers.open(getDelays().delay, show);
 		};
 		const hideLater = () => {
-			clear();
-			timer = setTimeout(() => {
-				timer = void 0;
-				hide();
-			}, getDelays().closeDelay);
+			timers.close(getDelays().closeDelay, hide);
 		};
 		const hideNow = () => {
 			clear();

package/dist/tooltip/use-tooltip-interaction.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tooltip-interaction.mjs","names":[],"sources":["../../src/tooltip/use-tooltip-interaction.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useEffectEvent } from \"react\";\n\nexport interface TooltipInteractionOptions {\n  readonly delay: number;\n  readonly closeDelay: number;\n  readonly disabled: boolean;\n  /** The Trigger renders `interestfor` (flag on and not disabled). Re-runs the detection. */\n  readonly interestForRequested: boolean;\n}\n\n/**\n * The cross-engine JS path of design section 2.2: hover / keyboard focus with delays,\n * `showPopover({ source })`, Escape and pointerdown-anywhere. Listeners go through\n * `addEventListener` (conventions 7.4) so they can be feature-detected away: where the trigger\n * renders `interestfor` and the element implements `interestForElement`, the browser owns the\n * whole interaction and nothing is attached.\n *\n * Open state is browser-owned (conventions 3.5): every decision reads\n * `popup.matches(\":popover-open\")`, never a copy. The document listeners are attached right after\n * `showPopover()` (the `toggle` event is queued as a task, so waiting for it would leave a window\n * in which an Escape or pointerdown does nothing) and detached when `toggle` reports a close,\n * including closes the library did not perform (native light dismiss of `popover=\"hint\"`).\n */\nexport function useTooltipInteraction(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  options: TooltipInteractionOptions,\n): void {\n  const getDelays = useEffectEvent(() => ({\n    delay: options.delay,\n    closeDelay: options.closeDelay,\n  }));\n  const { disabled, interestForRequested } = options;\n\n  useEffect(() => {\n    if (popup === null) return;\n    // Disabling while open hides the popup on both paths (design section 13, Disabled row). On the\n    // JS path the previous run's cleanup already did; on the native path nothing else would, and\n    // removing `interestfor` does not close an open popover.\n    if (disabled) {\n      if (isOpen(popup)) popup.hidePopover();\n      return;\n    }\n    if (trigger === null) return;\n    // Native path (conventions 8): only when the flag put `interestfor` on the element, and per\n    // element, so a `render`ed `<span>` (no `interestForElement`) keeps the JS path. Nothing is\n    // attached here, Escape included: the browser's interest handling and the `hint` close watcher\n    // decide, so in Chromium an Escape that closes the tooltip may also close an enclosing modal\n    // `<dialog>` (the library cannot `preventDefault()` a keydown it never sees).\n    if (\n      interestForRequested &&\n      trigger.hasAttribute(\"interestfor\") &&\n      \"interestForElement\" in trigger\n    ) {\n      return;\n    }\n\n    const doc = trigger.ownerDocument;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n\n    const clear = () => {\n      if (timer !== undefined) {\n        clearTimeout(timer);\n        timer = undefined;\n      }\n    };\n    const show = () => {\n      if (isOpen(popup) || !popup.isConnected || !trigger.isConnected) return;\n      popup.showPopover({ source: trigger });\n      listenDocument(true);\n    };\n    const hide = () => {\n      // A removed popover is already hidden (`isOpen` is false), so this never throws.\n      if (!isOpen(popup)) return;\n      popup.hidePopover();\n      listenDocument(false);\n    };\n    const showLater = () => {\n      clear();\n      timer = setTimeout(() => {\n        timer = undefined;\n        show();\n      }, getDelays().delay);\n    };\n    const hideLater = () => {\n      clear();\n      timer = setTimeout(() => {\n        timer = undefined;\n        hide();\n      }, getDelays().closeDelay);\n    };\n    const hideNow = () => {\n      clear();\n      hide();\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      clear();\n      // Escape while closed passes through untouched.\n      if (!isOpen(popup)) return;\n      hide();\n      // This Escape was the tooltip's: an enclosing modal `<dialog>` or `popover=\"auto\"` menu\n      // stays open (the close request sees a canceled keydown). A second Escape reaches them.\n      event.preventDefault();\n    };\n    function listenDocument(listen: boolean) {\n      if (listen) {\n        doc.addEventListener(\"keydown\", onKeyDown);\n        doc.addEventListener(\"pointerdown\", hideNow, true);\n      } else {\n        doc.removeEventListener(\"keydown\", onKeyDown);\n        doc.removeEventListener(\"pointerdown\", hideNow, true);\n      }\n    }\n    // Follows opens and closes the library did not perform; reads the DOM, not `newState`, so a\n    // toggle task that is stale by the time it runs cannot detach the listeners of an open popup.\n    const onToggle = () => {\n      listenDocument(isOpen(popup));\n    };\n    const onTriggerEnter = (event: PointerEvent) => {\n      // No hover on touch; the ARIA relation still works for screen-reader focus (design 5.3).\n      if (event.pointerType !== \"touch\") showLater();\n    };\n    const onTriggerFocus = () => {\n      // Pointer focus (a click) does not open; keyboard focus does (design 5.2).\n      if (trigger.matches(\":focus-visible\")) showLater();\n    };\n    // The document listeners exist only while the popup is open, so before that the trigger\n    // itself cancels a pending open: a click or Escape before `delay` elapses must not open the\n    // tooltip afterwards. Once open, the document listeners do the hiding.\n    const onTriggerKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") clear();\n    };\n\n    trigger.addEventListener(\"pointerenter\", onTriggerEnter);\n    trigger.addEventListener(\"pointerleave\", hideLater);\n    trigger.addEventListener(\"pointerdown\", clear);\n    trigger.addEventListener(\"keydown\", onTriggerKeyDown);\n    trigger.addEventListener(\"focus\", onTriggerFocus);\n    trigger.addEventListener(\"blur\", hideLater);\n    popup.addEventListener(\"pointerenter\", clear);\n    popup.addEventListener(\"pointerleave\", hideLater);\n    popup.addEventListener(\"toggle\", onToggle);\n\n    return () => {\n      hideNow();\n      listenDocument(false);\n      trigger.removeEventListener(\"pointerenter\", onTriggerEnter);\n      trigger.removeEventListener(\"pointerleave\", hideLater);\n      trigger.removeEventListener(\"pointerdown\", clear);\n      trigger.removeEventListener(\"keydown\", onTriggerKeyDown);\n      trigger.removeEventListener(\"focus\", onTriggerFocus);\n      trigger.removeEventListener(\"blur\", hideLater);\n      popup.removeEventListener(\"pointerenter\", clear);\n      popup.removeEventListener(\"pointerleave\", hideLater);\n      popup.removeEventListener(\"toggle\", onToggle);\n    };\n  }, [trigger, popup, disabled, interestForRequested]);\n}\n\n/** The popover's top-layer state, read from the DOM. A removed popover is never open. */\nfunction isOpen(popup: HTMLElement): boolean {\n  return popup.isConnected && popup.matches(\":popover-open\");\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-tooltip-interaction.mjs","names":[],"sources":["../../src/tooltip/use-tooltip-interaction.ts"],"sourcesContent":["\"use client\";\nimport { useEffect, useEffectEvent } from \"react\";\nimport { createDelayedPair } from \"../internal/use-delayed-pair.js\";\n\nexport interface TooltipInteractionOptions {\n  readonly delay: number;\n  readonly closeDelay: number;\n  readonly disabled: boolean;\n  /** The Trigger renders `interestfor` (flag on and not disabled). Re-runs the detection. */\n  readonly interestForRequested: boolean;\n}\n\n/**\n * The cross-engine JS path of design section 2.2: hover / keyboard focus with delays,\n * `showPopover({ source })`, Escape and pointerdown-anywhere. Listeners go through\n * `addEventListener` (conventions 7.4) so they can be feature-detected away: where the trigger\n * renders `interestfor` and the element implements `interestForElement`, the browser owns the\n * whole interaction and nothing is attached.\n *\n * Open state is browser-owned (conventions 3.5): every decision reads\n * `popup.matches(\":popover-open\")`, never a copy. The document listeners are attached right after\n * `showPopover()` (the `toggle` event is queued as a task, so waiting for it would leave a window\n * in which an Escape or pointerdown does nothing) and detached when `toggle` reports a close,\n * including closes the library did not perform (native light dismiss of `popover=\"hint\"`).\n */\nexport function useTooltipInteraction(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  options: TooltipInteractionOptions,\n): void {\n  const getDelays = useEffectEvent(() => ({\n    delay: options.delay,\n    closeDelay: options.closeDelay,\n  }));\n  const { disabled, interestForRequested } = options;\n\n  useEffect(() => {\n    if (popup === null) return;\n    // Disabling while open hides the popup on both paths (design section 13, Disabled row). On the\n    // JS path the previous run's cleanup already did; on the native path nothing else would, and\n    // removing `interestfor` does not close an open popover.\n    if (disabled) {\n      if (isOpen(popup)) popup.hidePopover();\n      return;\n    }\n    if (trigger === null) return;\n    // Native path (conventions 8): only when the flag put `interestfor` on the element, and per\n    // element, so a `render`ed `<span>` (no `interestForElement`) keeps the JS path. Nothing is\n    // attached here, Escape included: the browser's interest handling and the `hint` close watcher\n    // decide, so in Chromium an Escape that closes the tooltip may also close an enclosing modal\n    // `<dialog>` (the library cannot `preventDefault()` a keydown it never sees).\n    if (\n      interestForRequested &&\n      trigger.hasAttribute(\"interestfor\") &&\n      \"interestForElement\" in trigger\n    ) {\n      return;\n    }\n\n    const doc = trigger.ownerDocument;\n    // One pending open or close at a time (the timer helper shared with Menu's hover intent).\n    const timers = createDelayedPair();\n    const clear = timers.cancel;\n    const show = () => {\n      if (isOpen(popup) || !popup.isConnected || !trigger.isConnected) return;\n      popup.showPopover({ source: trigger });\n      listenDocument(true);\n    };\n    const hide = () => {\n      // A removed popover is already hidden (`isOpen` is false), so this never throws.\n      if (!isOpen(popup)) return;\n      popup.hidePopover();\n      listenDocument(false);\n    };\n    const showLater = () => {\n      timers.open(getDelays().delay, show);\n    };\n    const hideLater = () => {\n      timers.close(getDelays().closeDelay, hide);\n    };\n    const hideNow = () => {\n      clear();\n      hide();\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"Escape\") return;\n      clear();\n      // Escape while closed passes through untouched.\n      if (!isOpen(popup)) return;\n      hide();\n      // This Escape was the tooltip's: an enclosing modal `<dialog>` or `popover=\"auto\"` menu\n      // stays open (the close request sees a canceled keydown). A second Escape reaches them.\n      event.preventDefault();\n    };\n    function listenDocument(listen: boolean) {\n      if (listen) {\n        doc.addEventListener(\"keydown\", onKeyDown);\n        doc.addEventListener(\"pointerdown\", hideNow, true);\n      } else {\n        doc.removeEventListener(\"keydown\", onKeyDown);\n        doc.removeEventListener(\"pointerdown\", hideNow, true);\n      }\n    }\n    // Follows opens and closes the library did not perform; reads the DOM, not `newState`, so a\n    // toggle task that is stale by the time it runs cannot detach the listeners of an open popup.\n    const onToggle = () => {\n      listenDocument(isOpen(popup));\n    };\n    const onTriggerEnter = (event: PointerEvent) => {\n      // No hover on touch; the ARIA relation still works for screen-reader focus (design 5.3).\n      if (event.pointerType !== \"touch\") showLater();\n    };\n    const onTriggerFocus = () => {\n      // Pointer focus (a click) does not open; keyboard focus does (design 5.2).\n      if (trigger.matches(\":focus-visible\")) showLater();\n    };\n    // The document listeners exist only while the popup is open, so before that the trigger\n    // itself cancels a pending open: a click or Escape before `delay` elapses must not open the\n    // tooltip afterwards. Once open, the document listeners do the hiding.\n    const onTriggerKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") clear();\n    };\n\n    trigger.addEventListener(\"pointerenter\", onTriggerEnter);\n    trigger.addEventListener(\"pointerleave\", hideLater);\n    trigger.addEventListener(\"pointerdown\", clear);\n    trigger.addEventListener(\"keydown\", onTriggerKeyDown);\n    trigger.addEventListener(\"focus\", onTriggerFocus);\n    trigger.addEventListener(\"blur\", hideLater);\n    popup.addEventListener(\"pointerenter\", clear);\n    popup.addEventListener(\"pointerleave\", hideLater);\n    popup.addEventListener(\"toggle\", onToggle);\n\n    return () => {\n      hideNow();\n      listenDocument(false);\n      trigger.removeEventListener(\"pointerenter\", onTriggerEnter);\n      trigger.removeEventListener(\"pointerleave\", hideLater);\n      trigger.removeEventListener(\"pointerdown\", clear);\n      trigger.removeEventListener(\"keydown\", onTriggerKeyDown);\n      trigger.removeEventListener(\"focus\", onTriggerFocus);\n      trigger.removeEventListener(\"blur\", hideLater);\n      popup.removeEventListener(\"pointerenter\", clear);\n      popup.removeEventListener(\"pointerleave\", hideLater);\n      popup.removeEventListener(\"toggle\", onToggle);\n    };\n  }, [trigger, popup, disabled, interestForRequested]);\n}\n\n/** The popover's top-layer state, read from the DOM. A removed popover is never open. */\nfunction isOpen(popup: HTMLElement): boolean {\n  return popup.isConnected && popup.matches(\":popover-open\");\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,SAAgB,sBACd,SACA,OACA,SACM;CACN,MAAM,YAAY,sBAAsB;EACtC,OAAO,QAAQ;EACf,YAAY,QAAQ;CACtB,EAAE;CACF,MAAM,EAAE,UAAU,yBAAyB;CAE3C,gBAAgB;EACd,IAAI,UAAU,MAAM;EAIpB,IAAI,UAAU;GACZ,IAAI,OAAO,KAAK,GAAG,MAAM,YAAY;GACrC;EACF;EACA,IAAI,YAAY,MAAM;EAMtB,IACE,wBACA,QAAQ,aAAa,aAAa,KAClC,wBAAwB,SAExB;EAGF,MAAM,MAAM,QAAQ;EAEpB,MAAM,SAAS,kBAAkB;EACjC,MAAM,QAAQ,OAAO;EACrB,MAAM,aAAa;GACjB,IAAI,OAAO,KAAK,KAAK,CAAC,MAAM,eAAe,CAAC,QAAQ,aAAa;GACjE,MAAM,YAAY,EAAE,QAAQ,QAAQ,CAAC;GACrC,eAAe,IAAI;EACrB;EACA,MAAM,aAAa;GAEjB,IAAI,CAAC,OAAO,KAAK,GAAG;GACpB,MAAM,YAAY;GAClB,eAAe,KAAK;EACtB;EACA,MAAM,kBAAkB;GACtB,OAAO,KAAK,UAAU,CAAC,CAAC,OAAO,IAAI;EACrC;EACA,MAAM,kBAAkB;GACtB,OAAO,MAAM,UAAU,CAAC,CAAC,YAAY,IAAI;EAC3C;EACA,MAAM,gBAAgB;GACpB,MAAM;GACN,KAAK;EACP;EAEA,MAAM,aAAa,UAAyB;GAC1C,IAAI,MAAM,QAAQ,UAAU;GAC5B,MAAM;GAEN,IAAI,CAAC,OAAO,KAAK,GAAG;GACpB,KAAK;GAGL,MAAM,eAAe;EACvB;EACA,SAAS,eAAe,QAAiB;GACvC,IAAI,QAAQ;IACV,IAAI,iBAAiB,WAAW,SAAS;IACzC,IAAI,iBAAiB,eAAe,SAAS,IAAI;GACnD,OAAO;IACL,IAAI,oBAAoB,WAAW,SAAS;IAC5C,IAAI,oBAAoB,eAAe,SAAS,IAAI;GACtD;EACF;EAGA,MAAM,iBAAiB;GACrB,eAAe,OAAO,KAAK,CAAC;EAC9B;EACA,MAAM,kBAAkB,UAAwB;GAE9C,IAAI,MAAM,gBAAgB,SAAS,UAAU;EAC/C;EACA,MAAM,uBAAuB;GAE3B,IAAI,QAAQ,QAAQ,gBAAgB,GAAG,UAAU;EACnD;EAIA,MAAM,oBAAoB,UAAyB;GACjD,IAAI,MAAM,QAAQ,UAAU,MAAM;EACpC;EAEA,QAAQ,iBAAiB,gBAAgB,cAAc;EACvD,QAAQ,iBAAiB,gBAAgB,SAAS;EAClD,QAAQ,iBAAiB,eAAe,KAAK;EAC7C,QAAQ,iBAAiB,WAAW,gBAAgB;EACpD,QAAQ,iBAAiB,SAAS,cAAc;EAChD,QAAQ,iBAAiB,QAAQ,SAAS;EAC1C,MAAM,iBAAiB,gBAAgB,KAAK;EAC5C,MAAM,iBAAiB,gBAAgB,SAAS;EAChD,MAAM,iBAAiB,UAAU,QAAQ;EAEzC,aAAa;GACX,QAAQ;GACR,eAAe,KAAK;GACpB,QAAQ,oBAAoB,gBAAgB,cAAc;GAC1D,QAAQ,oBAAoB,gBAAgB,SAAS;GACrD,QAAQ,oBAAoB,eAAe,KAAK;GAChD,QAAQ,oBAAoB,WAAW,gBAAgB;GACvD,QAAQ,oBAAoB,SAAS,cAAc;GACnD,QAAQ,oBAAoB,QAAQ,SAAS;GAC7C,MAAM,oBAAoB,gBAAgB,KAAK;GAC/C,MAAM,oBAAoB,gBAAgB,SAAS;GACnD,MAAM,oBAAoB,UAAU,QAAQ;EAC9C;CACF,GAAG;EAAC;EAAS;EAAO;EAAU;CAAoB,CAAC;AACrD;;AAGA,SAAS,OAAO,OAA6B;CAC3C,OAAO,MAAM,eAAe,MAAM,QAAQ,eAAe;AAC3D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funstack/ui",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "description": "Headless UI library for React — the first Async React-native UI library",
   "keywords": [
     "components",
@@ -31,8 +31,13 @@
     ".": "./dist/index.mjs",
     "./accordion": "./dist/accordion/index.mjs",
     "./checkbox": "./dist/checkbox/index.mjs",
+    "./checkbox-group": "./dist/checkbox-group/index.mjs",
+    "./combobox": "./dist/combobox/index.mjs",
     "./dialog": "./dist/dialog/index.mjs",
+    "./menu": "./dist/menu/index.mjs",
+    "./popover": "./dist/popover/index.mjs",
     "./radio-group": "./dist/radio-group/index.mjs",
+    "./select": "./dist/select/index.mjs",
     "./switch": "./dist/switch/index.mjs",
     "./tabs": "./dist/tabs/index.mjs",
     "./toggle": "./dist/toggle/index.mjs",