@wordpress/ui 0.12.1-next.v.202604201441.0 → 0.13.0

package/build-module/utils/render-slot-with-children.mjs

@@ -0,0 +1,9 @@
+// packages/ui/src/utils/render-slot-with-children.ts
+import { cloneElement } from "@wordpress/element";
+function renderSlotWithChildren(slot, defaultSlot, children) {
+  return cloneElement(slot ?? defaultSlot, { children });
+}
+export {
+  renderSlotWithChildren
+};
+//# sourceMappingURL=render-slot-with-children.mjs.map

package/build-module/utils/render-slot-with-children.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/render-slot-with-children.ts"],
+  "sourcesContent": ["import { cloneElement } from '@wordpress/element';\nimport type { ReactElement, ReactNode } from 'react';\n\n/**\n * Fills an optional \"slot\" element prop with content by cloning it and\n * injecting the given `children`. When `slot` is undefined, the provided\n * `defaultSlot` is used in its place.\n *\n * Shared by overlay `Popup` components for their slot-shaped customization\n * props (e.g. `portal`, `positioner`), so the merge behavior \u2014 defaults,\n * children injection \u2014 stays consistent across all of them.\n *\n * Callers should type the slot prop as `ReactElement<Omit<Props, 'children'>>`:\n * any subtree passed on the slot element is overwritten by `children`.\n *\n * @param slot        Optional element from the slot prop (e.g. `<Tooltip.Portal \u2026 />`\n *                    or `<Tooltip.Positioner \u2026 />`). When omitted, `defaultSlot`\n *                    is used. Injected `children` replace any subtree the caller\n *                    may have passed on the slot element.\n * @param defaultSlot Unpopulated default element used when `slot` is omitted\n *                    (e.g. `<Tooltip.Portal />`).\n * @param children    Content to inject as the slot's children (backdrop,\n *                    positioner, popup subtree, etc.).\n */\nexport function renderSlotWithChildren(\n\tslot: ReactElement | undefined,\n\tdefaultSlot: ReactElement,\n\tchildren: ReactNode\n): ReactElement {\n\treturn cloneElement( slot ?? defaultSlot, { children } );\n}\n"],
+  "mappings": ";AAAA,SAAS,oBAAoB;AAwBtB,SAAS,uBACf,MACA,aACA,UACe;AACf,SAAO,aAAc,QAAQ,aAAa,EAAE,SAAS,CAAE;AACxD;",
+  "names": []
+}

package/build-module/utils/use-deprioritized-initial-focus.mjs

@@ -1,5 +1,5 @@
 // packages/ui/src/utils/use-deprioritized-initial-focus.ts
-import { useMemo, useRef } from "@wordpress/element";
+import { useRef } from "@wordpress/element";
 import { tabbable } from "tabbable";
 var getTabbableOptions = () => ({
   getShadowRoot: true,
@@ -7,14 +7,12 @@ var getTabbableOptions = () => ({
 });
 function useDeprioritizedInitialFocus({
   initialFocus,
-  deprioritizedAttribute
+  deprioritizedAttributes
 }) {
   const popupRef = useRef(null);
-  const resolvedInitialFocus = useMemo(() => {
-    if (initialFocus !== void 0 && initialFocus !== true) {
-      return initialFocus;
-    }
-    return (interactionType) => {
+  let resolvedInitialFocus = initialFocus;
+  if (initialFocus === void 0 || initialFocus === true) {
+    resolvedInitialFocus = (interactionType) => {
       if (interactionType === "touch") {
         return popupRef.current ?? true;
       }
@@ -24,13 +22,15 @@ function useDeprioritizedInitialFocus({
       }
       const tabbables = tabbable(popup, getTabbableOptions());
       for (const el of tabbables) {
-        if (el instanceof HTMLElement && !el.hasAttribute(deprioritizedAttribute)) {
+        if (el instanceof HTMLElement && !deprioritizedAttributes.some(
+          (attr) => el.hasAttribute(attr)
+        )) {
           return el;
         }
       }
       return true;
     };
-  }, [initialFocus, deprioritizedAttribute]);
+  }
   return { resolvedInitialFocus, popupRef };
 }
 export {

package/build-module/utils/use-deprioritized-initial-focus.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/utils/use-deprioritized-initial-focus.ts"],
-  "sourcesContent": ["import type { Popover as _Popover } from '@base-ui/react/popover';\nimport { useMemo, useRef } from '@wordpress/element';\nimport { tabbable } from 'tabbable';\n\n/**\n * The `initialFocus` type shared by Base UI overlay popups (Dialog, Popover,\n * AlertDialog, etc.). We derive it from `Popover.Popup.Props` here, but it\n * is identical across all overlay components.\n */\ntype InitialFocus = _Popover.Popup.Props[ 'initialFocus' ];\n\n/**\n * Options matching Base UI's internal tabbable configuration.\n * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/utils/tabbable.ts\n */\nconst getTabbableOptions = () => ( {\n\tgetShadowRoot: true,\n\tdisplayCheck:\n\t\ttypeof ResizeObserver === 'function' &&\n\t\tResizeObserver.toString().includes( '[native code]' )\n\t\t\t? ( 'full' as const )\n\t\t\t: ( 'none' as const ),\n} );\n\n/**\n * Returns a resolved `initialFocus` value that deprioritizes elements\n * marked with a given data attribute (e.g. a close icon), and an internal\n * ref that must be merged onto the popup element.\n *\n * When `initialFocus` is `undefined` or `true` (the default behavior),\n * the hook replaces it with a callback that:\n * 1. On touch interactions \u2014 focuses the popup element itself (preventing\n *    the virtual keyboard on Android), matching Base UI's default.\n * 2. On other interactions \u2014 returns the first tabbable element that does\n *    *not* carry `deprioritizedAttribute`. Falls back to Base UI's default\n *    when the deprioritized element is the only tabbable element.\n *\n * All other `initialFocus` values (`false`, `RefObject`, callback) pass\n * through unchanged.\n *\n * @param props\n * @param props.initialFocus           The consumer-provided `initialFocus` value.\n * @param props.deprioritizedAttribute The data attribute whose elements should be deprioritized.\n */\nexport function useDeprioritizedInitialFocus( {\n\tinitialFocus,\n\tdeprioritizedAttribute,\n}: {\n\tinitialFocus: InitialFocus;\n\tdeprioritizedAttribute: string;\n} ) {\n\tconst popupRef = useRef< HTMLDivElement >( null );\n\n\tconst resolvedInitialFocus = useMemo( (): InitialFocus => {\n\t\tif ( initialFocus !== undefined && initialFocus !== true ) {\n\t\t\treturn initialFocus;\n\t\t}\n\n\t\treturn ( interactionType ): HTMLElement | boolean | null => {\n\t\t\tif ( interactionType === 'touch' ) {\n\t\t\t\treturn popupRef.current ?? true;\n\t\t\t}\n\n\t\t\tconst popup = popupRef.current;\n\t\t\tif ( ! popup ) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tconst tabbables = tabbable( popup, getTabbableOptions() );\n\t\t\tfor ( const el of tabbables ) {\n\t\t\t\tif (\n\t\t\t\t\tel instanceof HTMLElement &&\n\t\t\t\t\t! el.hasAttribute( deprioritizedAttribute )\n\t\t\t\t) {\n\t\t\t\t\treturn el;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn true;\n\t\t};\n\t}, [ initialFocus, deprioritizedAttribute ] );\n\n\treturn { resolvedInitialFocus, popupRef };\n}\n"],
-  "mappings": ";AACA,SAAS,SAAS,cAAc;AAChC,SAAS,gBAAgB;AAazB,IAAM,qBAAqB,OAAQ;AAAA,EAClC,eAAe;AAAA,EACf,cACC,OAAO,mBAAmB,cAC1B,eAAe,SAAS,EAAE,SAAU,eAAgB,IAC/C,SACA;AACP;AAsBO,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AACD,GAGI;AACH,QAAM,WAAW,OAA0B,IAAK;AAEhD,QAAM,uBAAuB,QAAS,MAAoB;AACzD,QAAK,iBAAiB,UAAa,iBAAiB,MAAO;AAC1D,aAAO;AAAA,IACR;AAEA,WAAO,CAAE,oBAAmD;AAC3D,UAAK,oBAAoB,SAAU;AAClC,eAAO,SAAS,WAAW;AAAA,MAC5B;AAEA,YAAM,QAAQ,SAAS;AACvB,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,YAAM,YAAY,SAAU,OAAO,mBAAmB,CAAE;AACxD,iBAAY,MAAM,WAAY;AAC7B,YACC,cAAc,eACd,CAAE,GAAG,aAAc,sBAAuB,GACzC;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,EACD,GAAG,CAAE,cAAc,sBAAuB,CAAE;AAE5C,SAAO,EAAE,sBAAsB,SAAS;AACzC;",
+  "sourcesContent": ["import type { Popover as _Popover } from '@base-ui/react/popover';\nimport { useRef } from '@wordpress/element';\nimport { tabbable } from 'tabbable';\n\n/**\n * The `initialFocus` type shared by Base UI overlay popups (Dialog, Popover,\n * AlertDialog, etc.). We derive it from `Popover.Popup.Props` here, but it\n * is identical across all overlay components.\n */\ntype InitialFocus = _Popover.Popup.Props[ 'initialFocus' ];\n\n/**\n * Options matching Base UI's internal tabbable configuration.\n * @see https://github.com/floating-ui/floating-ui/blob/master/packages/react/src/utils/tabbable.ts\n */\nconst getTabbableOptions = () => ( {\n\tgetShadowRoot: true,\n\tdisplayCheck:\n\t\ttypeof ResizeObserver === 'function' &&\n\t\tResizeObserver.toString().includes( '[native code]' )\n\t\t\t? ( 'full' as const )\n\t\t\t: ( 'none' as const ),\n} );\n\n/**\n * Returns a resolved `initialFocus` value that deprioritizes elements\n * marked with any of the given data attributes (e.g. a close icon, a\n * library-managed scroll container), and an internal ref that must be\n * merged onto the popup element.\n *\n * When `initialFocus` is `undefined` or `true` (the default behavior),\n * the hook replaces it with a callback that:\n * 1. On touch interactions \u2014 focuses the popup element itself (preventing\n *    the virtual keyboard on Android), matching Base UI's default.\n * 2. On other interactions \u2014 returns the first tabbable element that does\n *    *not* carry any of `deprioritizedAttributes`. Falls back to Base\n *    UI's default when every tabbable element is deprioritized.\n *\n * All other `initialFocus` values (`false`, `RefObject`, callback) pass\n * through unchanged.\n *\n * @param props\n * @param props.initialFocus            The consumer-provided `initialFocus` value.\n * @param props.deprioritizedAttributes The data attributes whose elements should be deprioritized.\n */\nexport function useDeprioritizedInitialFocus( {\n\tinitialFocus,\n\tdeprioritizedAttributes,\n}: {\n\tinitialFocus: InitialFocus;\n\tdeprioritizedAttributes: string[];\n} ) {\n\tconst popupRef = useRef< HTMLDivElement >( null );\n\n\t// Returning a fresh callback on every render is intentional. Base UI\n\t// stores `initialFocus` via `useValueAsRef` (see its FloatingFocusManager\n\t// source) and reads it through `ref.current` only at open time, so\n\t// reference identity doesn't affect behavior. Skipping `useMemo` also\n\t// avoids either forcing callers to memoize their attributes array or\n\t// fighting the React Compiler with a stringified dep key.\n\tlet resolvedInitialFocus: InitialFocus = initialFocus;\n\tif ( initialFocus === undefined || initialFocus === true ) {\n\t\tresolvedInitialFocus = ( interactionType ) => {\n\t\t\tif ( interactionType === 'touch' ) {\n\t\t\t\treturn popupRef.current ?? true;\n\t\t\t}\n\n\t\t\tconst popup = popupRef.current;\n\t\t\tif ( ! popup ) {\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\tconst tabbables = tabbable( popup, getTabbableOptions() );\n\t\t\tfor ( const el of tabbables ) {\n\t\t\t\tif (\n\t\t\t\t\tel instanceof HTMLElement &&\n\t\t\t\t\t! deprioritizedAttributes.some( ( attr ) =>\n\t\t\t\t\t\tel.hasAttribute( attr )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn el;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn true;\n\t\t};\n\t}\n\n\treturn { resolvedInitialFocus, popupRef };\n}\n"],
+  "mappings": ";AACA,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAazB,IAAM,qBAAqB,OAAQ;AAAA,EAClC,eAAe;AAAA,EACf,cACC,OAAO,mBAAmB,cAC1B,eAAe,SAAS,EAAE,SAAU,eAAgB,IAC/C,SACA;AACP;AAuBO,SAAS,6BAA8B;AAAA,EAC7C;AAAA,EACA;AACD,GAGI;AACH,QAAM,WAAW,OAA0B,IAAK;AAQhD,MAAI,uBAAqC;AACzC,MAAK,iBAAiB,UAAa,iBAAiB,MAAO;AAC1D,2BAAuB,CAAE,oBAAqB;AAC7C,UAAK,oBAAoB,SAAU;AAClC,eAAO,SAAS,WAAW;AAAA,MAC5B;AAEA,YAAM,QAAQ,SAAS;AACvB,UAAK,CAAE,OAAQ;AACd,eAAO;AAAA,MACR;AAEA,YAAM,YAAY,SAAU,OAAO,mBAAmB,CAAE;AACxD,iBAAY,MAAM,WAAY;AAC7B,YACC,cAAc,eACd,CAAE,wBAAwB;AAAA,UAAM,CAAE,SACjC,GAAG,aAAc,IAAK;AAAA,QACvB,GACC;AACD,iBAAO;AAAA,QACR;AAAA,MACD;AAEA,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO,EAAE,sBAAsB,SAAS;AACzC;",
   "names": []
 }

package/build-module/utils/use-overlay-scroll-state-attributes.mjs

@@ -0,0 +1,114 @@
+// packages/ui/src/utils/use-overlay-scroll-state-attributes.ts
+import { useCallback, useLayoutEffect, useState } from "@wordpress/element";
+var SCROLL_CONTAINER_ATTR = "data-wp-ui-overlay-scroll-container";
+var SCROLLED_FROM_TOP_ATTR = "data-wp-ui-overlay-scrolled-from-top";
+var SCROLLED_FROM_BOTTOM_ATTR = "data-wp-ui-overlay-scrolled-from-bottom";
+var SCROLL_TABBABLE_FLAG_ATTR = "data-wp-ui-overlay-scroll-tabbable";
+var SCROLL_END_EPSILON = 1;
+function reconcileTabbableFlag(el) {
+  if (el.hasAttribute(SCROLL_TABBABLE_FLAG_ATTR) && el.getAttribute("tabindex") !== "0") {
+    el.removeAttribute(SCROLL_TABBABLE_FLAG_ATTR);
+  }
+}
+function updateScrollAttributes(el) {
+  const { scrollTop, clientHeight, scrollHeight } = el;
+  const overflows = scrollHeight - clientHeight > SCROLL_END_EPSILON;
+  el.toggleAttribute(SCROLLED_FROM_TOP_ATTR, scrollTop > 0);
+  el.toggleAttribute(
+    SCROLLED_FROM_BOTTOM_ATTR,
+    scrollTop + clientHeight < scrollHeight - SCROLL_END_EPSILON
+  );
+  reconcileTabbableFlag(el);
+  if (overflows) {
+    if (!el.hasAttribute(SCROLL_TABBABLE_FLAG_ATTR) && el.getAttribute("tabindex") === null) {
+      el.setAttribute("tabindex", "0");
+      el.setAttribute(SCROLL_TABBABLE_FLAG_ATTR, "");
+    }
+  } else if (el.hasAttribute(SCROLL_TABBABLE_FLAG_ATTR)) {
+    el.removeAttribute("tabindex");
+    el.removeAttribute(SCROLL_TABBABLE_FLAG_ATTR);
+  }
+}
+var HOOK_OWNED_ATTRS = [
+  SCROLL_CONTAINER_ATTR,
+  SCROLLED_FROM_TOP_ATTR,
+  SCROLLED_FROM_BOTTOM_ATTR
+];
+function cleanupScrollAttributes(el) {
+  for (const attr of HOOK_OWNED_ATTRS) {
+    el.removeAttribute(attr);
+  }
+  reconcileTabbableFlag(el);
+  if (el.hasAttribute(SCROLL_TABBABLE_FLAG_ATTR)) {
+    el.removeAttribute("tabindex");
+    el.removeAttribute(SCROLL_TABBABLE_FLAG_ATTR);
+  }
+}
+function useOverlayScrollStateAttributes(onScroll) {
+  const [node, setNode] = useState(null);
+  const ref = useCallback((el) => {
+    setNode(el);
+  }, []);
+  useLayoutEffect(() => {
+    if (!node) {
+      return;
+    }
+    node.setAttribute(SCROLL_CONTAINER_ATTR, "");
+    updateScrollAttributes(node);
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        cleanupScrollAttributes(node);
+      };
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      updateScrollAttributes(node);
+    });
+    resizeObserver.observe(node);
+    for (const child of Array.from(node.children)) {
+      resizeObserver.observe(child);
+    }
+    let mutationObserver;
+    if (typeof MutationObserver !== "undefined") {
+      mutationObserver = new MutationObserver((records) => {
+        for (const record of records) {
+          if (record.target === node) {
+            for (const added of Array.from(record.addedNodes)) {
+              if (added instanceof Element) {
+                resizeObserver.observe(added);
+              }
+            }
+            for (const removed of Array.from(
+              record.removedNodes
+            )) {
+              if (removed instanceof Element) {
+                resizeObserver.unobserve(removed);
+              }
+            }
+          }
+        }
+        updateScrollAttributes(node);
+      });
+      mutationObserver.observe(node, {
+        childList: true
+      });
+    }
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver?.disconnect();
+      cleanupScrollAttributes(node);
+    };
+  }, [node]);
+  const handleScroll = useCallback(
+    (event) => {
+      updateScrollAttributes(event.currentTarget);
+      onScroll?.(event);
+    },
+    [onScroll]
+  );
+  return { ref, onScroll: handleScroll };
+}
+export {
+  SCROLL_CONTAINER_ATTR,
+  useOverlayScrollStateAttributes
+};
+//# sourceMappingURL=use-overlay-scroll-state-attributes.mjs.map

package/build-module/utils/use-overlay-scroll-state-attributes.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/use-overlay-scroll-state-attributes.ts"],
+  "sourcesContent": ["import type { UIEvent, UIEventHandler } from 'react';\nimport { useCallback, useLayoutEffect, useState } from '@wordpress/element';\n\nexport const SCROLL_CONTAINER_ATTR = 'data-wp-ui-overlay-scroll-container';\nconst SCROLLED_FROM_TOP_ATTR = 'data-wp-ui-overlay-scrolled-from-top';\nconst SCROLLED_FROM_BOTTOM_ATTR = 'data-wp-ui-overlay-scrolled-from-bottom';\n/**\n * Marks a `tabindex` that this hook installed, so subsequent runs can tell\n * a hook-managed tabindex apart from one the consumer set on the element\n * themselves.\n *\n * Internal: the constant is not exported, but the literal string is named\n * in the public JSDoc on `useOverlayScrollStateAttributes` so consumers\n * grepping for \"why does this element have a `tabindex='0'` I didn't set?\"\n * can find the breadcrumb. If this string changes, update the JSDoc too.\n */\nconst SCROLL_TABBABLE_FLAG_ATTR = 'data-wp-ui-overlay-scroll-tabbable';\n\n/**\n * Allow fractional-pixel rounding when comparing scroll offsets. Browsers can\n * report `scrollTop + clientHeight` as slightly less than `scrollHeight` even\n * when fully scrolled to the bottom.\n */\nconst SCROLL_END_EPSILON = 1;\n\n/**\n * Detect consumer takeover of a previously hook-managed `tabindex` after the\n * hook had already installed its own: if the flag is set but the current\n * `tabindex` is no longer `\"0\"`, the consumer has overridden our value. Drop\n * the flag so subsequent ticks treat the `tabindex` as consumer-owned and\n * never touch it again.\n *\n * Limitation: the heuristic compares the DOM attribute, so a consumer who\n * passes `tabIndex={ 0 }` explicitly is indistinguishable from our own\n * managed `\"0\"` and would still be cleaned up on the next non-overflow\n * tick. See the contract paragraph on `useOverlayScrollStateAttributes`.\n *\n * @param el The scroll container.\n */\nfunction reconcileTabbableFlag( el: HTMLElement ) {\n\tif (\n\t\tel.hasAttribute( SCROLL_TABBABLE_FLAG_ATTR ) &&\n\t\tel.getAttribute( 'tabindex' ) !== '0'\n\t) {\n\t\tel.removeAttribute( SCROLL_TABBABLE_FLAG_ATTR );\n\t}\n}\n\nfunction updateScrollAttributes( el: HTMLElement ) {\n\tconst { scrollTop, clientHeight, scrollHeight } = el;\n\tconst overflows = scrollHeight - clientHeight > SCROLL_END_EPSILON;\n\n\tel.toggleAttribute( SCROLLED_FROM_TOP_ATTR, scrollTop > 0 );\n\tel.toggleAttribute(\n\t\tSCROLLED_FROM_BOTTOM_ATTR,\n\t\tscrollTop + clientHeight < scrollHeight - SCROLL_END_EPSILON\n\t);\n\n\t// Keyboard-scrollable regions must be reachable via Tab (WCAG 2.1.1),\n\t// but adding a stray tab stop to a non-scrolling `<div>` is an\n\t// anti-pattern. Toggle `tabindex=\"0\"` only while the element actually\n\t// overflows. The flag attribute guards against clobbering a\n\t// consumer-supplied tabindex: we only touch attributes we installed.\n\n\t// Takeover-after-install: detect a consumer who started overriding\n\t// our managed `\"0\"` *after* the hook installed it (e.g. a re-render\n\t// passing `tabIndex={ -1 }`). The flag is dropped so the install /\n\t// cleanup branches below leave the consumer's value untouched.\n\treconcileTabbableFlag( el );\n\n\tif ( overflows ) {\n\t\t// Pre-install opt-out: a consumer-supplied `tabindex` (including\n\t\t// `tabindex=\"-1\"` to hide the region from Tab order) keeps its\n\t\t// value because the flag is never installed in the first place.\n\t\t// If that consumer-supplied value is later *removed*, the hook\n\t\t// will install its own on the next overflow tick \u2014 the DOM\n\t\t// attribute alone can't distinguish a prior explicit opt-out\n\t\t// from an unconfigured state.\n\t\tif (\n\t\t\t! el.hasAttribute( SCROLL_TABBABLE_FLAG_ATTR ) &&\n\t\t\tel.getAttribute( 'tabindex' ) === null\n\t\t) {\n\t\t\tel.setAttribute( 'tabindex', '0' );\n\t\t\tel.setAttribute( SCROLL_TABBABLE_FLAG_ATTR, '' );\n\t\t}\n\t} else if ( el.hasAttribute( SCROLL_TABBABLE_FLAG_ATTR ) ) {\n\t\tel.removeAttribute( 'tabindex' );\n\t\tel.removeAttribute( SCROLL_TABBABLE_FLAG_ATTR );\n\t}\n}\n\nconst HOOK_OWNED_ATTRS = [\n\tSCROLL_CONTAINER_ATTR,\n\tSCROLLED_FROM_TOP_ATTR,\n\tSCROLLED_FROM_BOTTOM_ATTR,\n] as const;\n\nfunction cleanupScrollAttributes( el: HTMLElement ) {\n\tfor ( const attr of HOOK_OWNED_ATTRS ) {\n\t\tel.removeAttribute( attr );\n\t}\n\t// Reconcile first so a flag left over from a consumer-takeover never\n\t// causes us to clobber the consumer's `tabindex` here.\n\treconcileTabbableFlag( el );\n\t// After reconciliation the flag is set only when the current\n\t// `tabindex` is still `\"0\"` (i.e. ours). Any other value belongs to\n\t// the consumer and is left alone.\n\tif ( el.hasAttribute( SCROLL_TABBABLE_FLAG_ATTR ) ) {\n\t\tel.removeAttribute( 'tabindex' );\n\t\tel.removeAttribute( SCROLL_TABBABLE_FLAG_ATTR );\n\t}\n}\n\n/**\n * Keeps `data-wp-ui-overlay-scrolled-from-top` and\n * `data-wp-ui-overlay-scrolled-from-bottom` attributes in sync with a\n * scrollable overlay element's scroll position, and marks the element with\n * `data-wp-ui-overlay-scroll-container` so shared CSS (see\n * `overlay-chrome.module.css`) can target it without coupling to a specific\n * class name. Descendant selectors (e.g. sticky header/footer chrome) read\n * these attributes to toggle their separator border without forcing a React\n * re-render on every scroll frame.\n *\n * When the element overflows, a `tabindex=\"0\"` is also installed so keyboard\n * users can focus the region and arrow-scroll it (WCAG 2.1.1). The tabindex\n * is removed again as soon as the element no longer overflows \u2014 a stray tab\n * stop on a non-scrolling region is an anti-pattern. An internal flag\n * attribute (`data-wp-ui-overlay-scroll-tabbable`) marks tabindex values\n * the hook installed, so a consumer-supplied `tabindex` is never\n * overwritten.\n *\n * Tabindex contract:\n * - **Pre-install opt-out**: a `tabindex` set on the element before the\n *   first overflow is detected is left alone forever. The flag is never\n *   installed, so the hook never owns the attribute. (This means\n *   `tabIndex={ -1 }` on `Dialog.Content` / `Drawer.Content` reliably\n *   suppresses the auto tab stop.)\n * - **Takeover after install**: if the consumer overrides the hook's\n *   `\"0\"` with a *different* value after the fact, the flag is dropped\n *   on the next tick (`reconcileTabbableFlag`) and the consumer's value\n *   is preserved through subsequent overflow / non-overflow transitions\n *   and through cleanup.\n * - **Indistinguishable case**: a consumer who passes `tabIndex={ 0 }`\n *   explicitly while the hook also has `\"0\"` installed cannot be\n *   detected \u2014 the DOM attribute is identical to the hook-managed\n *   value, so the hook will still strip it on the next non-overflow\n *   tick. This is rarely intentional (the consumer's `0` matches the\n *   hook's behavior anyway), but consumers needing a guaranteed\n *   sticky `0` should avoid relying on it across overflow flips.\n *\n * Overflow detection is block-axis-only. Overlay popups are expected to\n * constrain content width (`overlay-chrome.module.css` clips `.content`\n * with `overflow-inline: hidden`); horizontal scrolling is intentionally\n * not supported, so this hook doesn't toggle tabindex on inline-axis\n * overflow and the scroll-state attributes don't track it.\n *\n * Returns a callback `ref` that the caller must attach to the scroll\n * container, and an `onScroll` handler to wire up to the same element. A\n * callback ref (not a `RefObject`) is used because overlay libraries like\n * Base UI mount the popup DOM lazily when the overlay opens, so the\n * attributes must be initialized the moment the node is attached, not when\n * the host component first renders. `useState` also absorbs repeated\n * attachments of the same node (Strict Mode remount, stable refs) without\n * re-running the effect.\n *\n * Change detection combines a `ResizeObserver` scoped to the container\n * and its direct children (to catch flex-layout growth) with a\n * `MutationObserver` on direct-child additions/removals only (to keep\n * the resize-observer set in sync as direct children come and go).\n *\n * Deeper subtree mutations are intentionally not observed: in practice,\n * any descendant whose growth changes the scroll size also propagates a\n * resize up the layout tree, so the existing `ResizeObserver` on direct\n * children catches it. Watching the full subtree would fan out the\n * mutation callback over every text-node insertion in content-heavy\n * overlays (rich-text editors, virtualized lists), which isn't worth\n * the cost of the rare deep-mutation-without-resize case. Revisit\n * (and consider rAF-coalescing the callback) if a real consumer hits\n * an attribute-staleness regression.\n *\n * Once CSS scroll-state container queries are supported across target\n * browsers, both the data attributes and this hook can be replaced with\n * `@container scroll-state(scrollable: top)` / `(scrollable: bottom)`.\n * See: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Conditional_rules/Container_scroll-state_queries\n *\n * @param onScroll Optional `onScroll` from the parent; invoked after the\n *                 overlay scroll-state attributes are updated, so by the\n *                 time this handler runs, `data-wp-ui-overlay-scrolled-*`\n *                 on `event.currentTarget` already reflect the post-scroll\n *                 state.\n */\nexport function useOverlayScrollStateAttributes<\n\tT extends HTMLElement = HTMLElement,\n>( onScroll?: UIEventHandler< T > | undefined ) {\n\tconst [ node, setNode ] = useState< T | null >( null );\n\n\tconst ref = useCallback( ( el: T | null ) => {\n\t\tsetNode( el );\n\t}, [] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.setAttribute( SCROLL_CONTAINER_ATTR, '' );\n\t\tupdateScrollAttributes( node );\n\n\t\tif ( typeof ResizeObserver === 'undefined' ) {\n\t\t\treturn () => {\n\t\t\t\tcleanupScrollAttributes( node );\n\t\t\t};\n\t\t}\n\n\t\tconst resizeObserver = new ResizeObserver( () => {\n\t\t\tupdateScrollAttributes( node );\n\t\t} );\n\t\tresizeObserver.observe( node );\n\t\tfor ( const child of Array.from( node.children ) ) {\n\t\t\tresizeObserver.observe( child );\n\t\t}\n\n\t\tlet mutationObserver: MutationObserver | undefined;\n\t\tif ( typeof MutationObserver !== 'undefined' ) {\n\t\t\tmutationObserver = new MutationObserver( ( records ) => {\n\t\t\t\tfor ( const record of records ) {\n\t\t\t\t\t// Only direct-child additions/removals affect what the\n\t\t\t\t\t// ResizeObserver is observing; deeper descendant changes\n\t\t\t\t\t// reach us through this callback for attribute refresh,\n\t\t\t\t\t// but we don't observe them individually to keep the\n\t\t\t\t\t// cost bounded on large subtrees.\n\t\t\t\t\tif ( record.target === node ) {\n\t\t\t\t\t\tfor ( const added of Array.from( record.addedNodes ) ) {\n\t\t\t\t\t\t\tif ( added instanceof Element ) {\n\t\t\t\t\t\t\t\tresizeObserver.observe( added );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tfor ( const removed of Array.from(\n\t\t\t\t\t\t\trecord.removedNodes\n\t\t\t\t\t\t) ) {\n\t\t\t\t\t\t\tif ( removed instanceof Element ) {\n\t\t\t\t\t\t\t\tresizeObserver.unobserve( removed );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tupdateScrollAttributes( node );\n\t\t\t} );\n\t\t\t// Direct children only \u2014 see the JSDoc above for why we\n\t\t\t// intentionally don't observe the full subtree.\n\t\t\tmutationObserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver?.disconnect();\n\t\t\tcleanupScrollAttributes( node );\n\t\t};\n\t}, [ node ] );\n\n\tconst handleScroll = useCallback(\n\t\t( event: UIEvent< T > ) => {\n\t\t\tupdateScrollAttributes( event.currentTarget );\n\t\t\tonScroll?.( event );\n\t\t},\n\t\t[ onScroll ]\n\t);\n\n\treturn { ref, onScroll: handleScroll };\n}\n"],
+  "mappings": ";AACA,SAAS,aAAa,iBAAiB,gBAAgB;AAEhD,IAAM,wBAAwB;AACrC,IAAM,yBAAyB;AAC/B,IAAM,4BAA4B;AAWlC,IAAM,4BAA4B;AAOlC,IAAM,qBAAqB;AAgB3B,SAAS,sBAAuB,IAAkB;AACjD,MACC,GAAG,aAAc,yBAA0B,KAC3C,GAAG,aAAc,UAAW,MAAM,KACjC;AACD,OAAG,gBAAiB,yBAA0B;AAAA,EAC/C;AACD;AAEA,SAAS,uBAAwB,IAAkB;AAClD,QAAM,EAAE,WAAW,cAAc,aAAa,IAAI;AAClD,QAAM,YAAY,eAAe,eAAe;AAEhD,KAAG,gBAAiB,wBAAwB,YAAY,CAAE;AAC1D,KAAG;AAAA,IACF;AAAA,IACA,YAAY,eAAe,eAAe;AAAA,EAC3C;AAYA,wBAAuB,EAAG;AAE1B,MAAK,WAAY;AAQhB,QACC,CAAE,GAAG,aAAc,yBAA0B,KAC7C,GAAG,aAAc,UAAW,MAAM,MACjC;AACD,SAAG,aAAc,YAAY,GAAI;AACjC,SAAG,aAAc,2BAA2B,EAAG;AAAA,IAChD;AAAA,EACD,WAAY,GAAG,aAAc,yBAA0B,GAAI;AAC1D,OAAG,gBAAiB,UAAW;AAC/B,OAAG,gBAAiB,yBAA0B;AAAA,EAC/C;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACD;AAEA,SAAS,wBAAyB,IAAkB;AACnD,aAAY,QAAQ,kBAAmB;AACtC,OAAG,gBAAiB,IAAK;AAAA,EAC1B;AAGA,wBAAuB,EAAG;AAI1B,MAAK,GAAG,aAAc,yBAA0B,GAAI;AACnD,OAAG,gBAAiB,UAAW;AAC/B,OAAG,gBAAiB,yBAA0B;AAAA,EAC/C;AACD;AAgFO,SAAS,gCAEb,UAA6C;AAC/C,QAAM,CAAE,MAAM,OAAQ,IAAI,SAAsB,IAAK;AAErD,QAAM,MAAM,YAAa,CAAE,OAAkB;AAC5C,YAAS,EAAG;AAAA,EACb,GAAG,CAAC,CAAE;AAEN,kBAAiB,MAAM;AACtB,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,aAAc,uBAAuB,EAAG;AAC7C,2BAAwB,IAAK;AAE7B,QAAK,OAAO,mBAAmB,aAAc;AAC5C,aAAO,MAAM;AACZ,gCAAyB,IAAK;AAAA,MAC/B;AAAA,IACD;AAEA,UAAM,iBAAiB,IAAI,eAAgB,MAAM;AAChD,6BAAwB,IAAK;AAAA,IAC9B,CAAE;AACF,mBAAe,QAAS,IAAK;AAC7B,eAAY,SAAS,MAAM,KAAM,KAAK,QAAS,GAAI;AAClD,qBAAe,QAAS,KAAM;AAAA,IAC/B;AAEA,QAAI;AACJ,QAAK,OAAO,qBAAqB,aAAc;AAC9C,yBAAmB,IAAI,iBAAkB,CAAE,YAAa;AACvD,mBAAY,UAAU,SAAU;AAM/B,cAAK,OAAO,WAAW,MAAO;AAC7B,uBAAY,SAAS,MAAM,KAAM,OAAO,UAAW,GAAI;AACtD,kBAAK,iBAAiB,SAAU;AAC/B,+BAAe,QAAS,KAAM;AAAA,cAC/B;AAAA,YACD;AACA,uBAAY,WAAW,MAAM;AAAA,cAC5B,OAAO;AAAA,YACR,GAAI;AACH,kBAAK,mBAAmB,SAAU;AACjC,+BAAe,UAAW,OAAQ;AAAA,cACnC;AAAA,YACD;AAAA,UACD;AAAA,QACD;AACA,+BAAwB,IAAK;AAAA,MAC9B,CAAE;AAGF,uBAAiB,QAAS,MAAM;AAAA,QAC/B,WAAW;AAAA,MACZ,CAAE;AAAA,IACH;AAEA,WAAO,MAAM;AACZ,qBAAe,WAAW;AAC1B,wBAAkB,WAAW;AAC7B,8BAAyB,IAAK;AAAA,IAC/B;AAAA,EACD,GAAG,CAAE,IAAK,CAAE;AAEZ,QAAM,eAAe;AAAA,IACpB,CAAE,UAAyB;AAC1B,6BAAwB,MAAM,aAAc;AAC5C,iBAAY,KAAM;AAAA,IACnB;AAAA,IACA,CAAE,QAAS;AAAA,EACZ;AAEA,SAAO,EAAE,KAAK,UAAU,aAAa;AACtC;",
+  "names": []
+}

package/build-module/visually-hidden/visually-hidden.mjs

@@ -2,12 +2,91 @@
 import { mergeProps, useRender } from "@base-ui/react";
 import { forwardRef } from "@wordpress/element";
 
+// packages/style-runtime/src/index.ts
+var STYLE_HASH_ATTRIBUTE = "data-wp-hash";
+function getRuntime() {
+  const globalScope = globalThis;
+  if (globalScope.__wpStyleRuntime) {
+    return globalScope.__wpStyleRuntime;
+  }
+  globalScope.__wpStyleRuntime = {
+    documents: /* @__PURE__ */ new Map(),
+    styles: /* @__PURE__ */ new Map(),
+    injectedStyles: /* @__PURE__ */ new WeakMap()
+  };
+  if (typeof document !== "undefined") {
+    registerDocument(document);
+  }
+  return globalScope.__wpStyleRuntime;
+}
+function documentContainsStyleHash(targetDocument, hash) {
+  if (!targetDocument.head) {
+    return false;
+  }
+  for (const style of targetDocument.head.querySelectorAll(
+    `style[${STYLE_HASH_ATTRIBUTE}]`
+  )) {
+    if (style.getAttribute(STYLE_HASH_ATTRIBUTE) === hash) {
+      return true;
+    }
+  }
+  return false;
+}
+function injectStyle(targetDocument, hash, css) {
+  if (!targetDocument.head) {
+    return;
+  }
+  const runtime = getRuntime();
+  let injectedStyles = runtime.injectedStyles.get(targetDocument);
+  if (!injectedStyles) {
+    injectedStyles = /* @__PURE__ */ new Set();
+    runtime.injectedStyles.set(targetDocument, injectedStyles);
+  }
+  if (injectedStyles.has(hash)) {
+    return;
+  }
+  if (documentContainsStyleHash(targetDocument, hash)) {
+    injectedStyles.add(hash);
+    return;
+  }
+  const style = targetDocument.createElement("style");
+  style.setAttribute(STYLE_HASH_ATTRIBUTE, hash);
+  style.appendChild(targetDocument.createTextNode(css));
+  targetDocument.head.appendChild(style);
+  injectedStyles.add(hash);
+}
+function registerDocument(targetDocument) {
+  const runtime = getRuntime();
+  runtime.documents.set(
+    targetDocument,
+    (runtime.documents.get(targetDocument) ?? 0) + 1
+  );
+  for (const [hash, css] of runtime.styles) {
+    injectStyle(targetDocument, hash, css);
+  }
+  return () => {
+    const count = runtime.documents.get(targetDocument);
+    if (count === void 0) {
+      return;
+    }
+    if (count <= 1) {
+      runtime.documents.delete(targetDocument);
+      return;
+    }
+    runtime.documents.set(targetDocument, count - 1);
+  };
+}
+function registerStyle(hash, css) {
+  const runtime = getRuntime();
+  runtime.styles.set(hash, css);
+  for (const targetDocument of runtime.documents.keys()) {
+    injectStyle(targetDocument, hash, css);
+  }
+}
+
 // packages/ui/src/visually-hidden/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='c46e8cb841']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "c46e8cb841");
-  style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.f37b9e2e191ebd66__visually-hidden{word-wrap:normal;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal}}"));
-  document.head.appendChild(style);
+if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
+  registerStyle("c46e8cb841", "@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.f37b9e2e191ebd66__visually-hidden{word-wrap:normal;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal}}");
 }
 var style_default = { "visually-hidden": "f37b9e2e191ebd66__visually-hidden" };
 
@@ -19,7 +98,11 @@ var VisuallyHidden = forwardRef(
       ref,
       props: mergeProps(
         { className: style_default["visually-hidden"] },
-        restProps
+        restProps,
+        {
+          // @ts-expect-error Arbitrary data-* attributes aren't indexable on the typed div props. Kept hardcoded so consumers can't change or remove it.
+          "data-visually-hidden": ""
+        }
       )
     });
     return element;

package/build-module/visually-hidden/visually-hidden.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/visually-hidden/visually-hidden.tsx", "../../src/visually-hidden/style.module.css"],
-  "sourcesContent": ["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport type { VisuallyHiddenProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful when providing context that's only meaningful to assistive technology.\n *\n * Renders a `<div>` by default. Use the `render` prop to swap the\n * underlying element while preserving the visually-hidden behavior.\n *\n * ## Composing with other components\n *\n * When composing with another component that uses the `render` prop\n * pattern, there are two directions \u2014 and they produce different results.\n *\n * Most of the time you'll want `VisuallyHidden` as the **host** (outer\n * component) and pass the other component via `render`. This keeps the\n * other component's HTML element and semantics intact, while\n * `VisuallyHidden` only adds its hiding styles:\n *\n * ```jsx\n * // OtherComponent keeps its semantic element (e.g. <h2>).\n * <VisuallyHidden render={ <OtherComponent /> }>\n *   Accessible text\n * </VisuallyHidden>\n * ```\n *\n * The opposite direction is also possible, but be aware that it replaces\n * the other component's element with VisuallyHidden's default `<div>`:\n *\n * ```jsx\n * // OtherComponent's element becomes a <div>.\n * <OtherComponent render={ <VisuallyHidden /> }>\n *   Accessible text\n * </OtherComponent>\n * ```\n *\n * Choose based on what you need: if the other component's semantic\n * element matters (e.g. `<label>`, `<legend>`, `<h2>`), keep\n * `VisuallyHidden` as the host so the element is preserved.\n */\nexport const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(\n\tfunction VisuallyHidden( { render, ...restProps }, ref ) {\n\t\tconst element = useRender( {\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >(\n\t\t\t\t{ className: styles[ 'visually-hidden' ] },\n\t\t\t\trestProps\n\t\t\t),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='c46e8cb841']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c46e8cb841\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.f37b9e2e191ebd66__visually-hidden{word-wrap:normal;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"visually-hidden\":\"f37b9e2e191ebd66__visually-hidden\"};\n"],
-  "mappings": ";AAAA,SAAS,YAAY,iBAAiB;AACtC,SAAS,kBAAkB;;;ACD3B,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0RAA0R,CAAC;AACrU,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,mBAAkB,oCAAmC;;;ADqC9D,IAAM,iBAAiB;AAAA,EAC7B,SAASA,gBAAgB,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAM;AACxD,UAAM,UAAU,UAAW;AAAA,MAC1B;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACN,EAAE,WAAW,cAAQ,iBAAkB,EAAE;AAAA,QACzC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
+  "sources": ["../../src/visually-hidden/visually-hidden.tsx", "../../../style-runtime/src/index.ts", "../../src/visually-hidden/style.module.css"],
+  "sourcesContent": ["import { mergeProps, useRender } from '@base-ui/react';\nimport { forwardRef } from '@wordpress/element';\nimport type { VisuallyHiddenProps } from './types';\nimport styles from './style.module.css';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful when providing context that's only meaningful to assistive technology.\n *\n * Renders a `<div>` by default. Use the `render` prop to swap the\n * underlying element while preserving the visually-hidden behavior.\n *\n * ## Composing with other components\n *\n * When composing with another component that uses the `render` prop\n * pattern, keep `VisuallyHidden` as the **host** (outer component) and\n * pass the other component via `render`. This keeps the other\n * component's HTML element and semantics intact, while `VisuallyHidden`\n * only adds its hiding styles:\n *\n * ```jsx\n * // OtherComponent keeps its semantic element (e.g. <h2>).\n * <VisuallyHidden render={ <OtherComponent /> }>\n *   Accessible text\n * </VisuallyHidden>\n * ```\n */\nexport const VisuallyHidden = forwardRef< HTMLDivElement, VisuallyHiddenProps >(\n\tfunction VisuallyHidden( { render, ...restProps }, ref ) {\n\t\tconst element = useRender( {\n\t\t\trender,\n\t\t\tref,\n\t\t\tprops: mergeProps< 'div' >(\n\t\t\t\t{ className: styles[ 'visually-hidden' ] },\n\t\t\t\trestProps,\n\t\t\t\t{\n\t\t\t\t\t// @ts-expect-error Arbitrary data-* attributes aren't indexable on the typed div props. Kept hardcoded so consumers can't change or remove it.\n\t\t\t\t\t'data-visually-hidden': '',\n\t\t\t\t}\n\t\t\t),\n\t\t} );\n\n\t\treturn element;\n\t}\n);\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash           Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash           Stable hash for the transformed CSS.\n * @param css            CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css  CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"c46e8cb841\", \"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.f37b9e2e191ebd66__visually-hidden{word-wrap:normal;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-break:normal}}\");\n}\nexport default {\"visually-hidden\":\"f37b9e2e191ebd66__visually-hidden\"};\n"],
+  "mappings": ";AAAA,SAAS,YAAY,iBAAiB;AACtC,SAAS,kBAAkB;;;ACS3B,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACrB,QAAM,cAAc;AAEpB,MAAK,YAAY,kBAAmB;AACnC,WAAO,YAAY;AAAA,EACpB;AAEA,cAAY,mBAAmB;AAAA,IAC9B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC7B;AAEA,MAAK,OAAO,aAAa,aAAc;AACtC,qBAAkB,QAAS;AAAA,EAC5B;AAEA,SAAO,YAAY;AACpB;AAUA,SAAS,0BACR,gBACA,MACU;AACV,MAAK,CAAE,eAAe,MAAO;AAC5B,WAAO;AAAA,EACR;AAEA,aAAY,SAAS,eAAe,KAAK;AAAA,IACxC,SAAU,oBAAqB;AAAA,EAChC,GAAI;AACH,QAAK,MAAM,aAAc,oBAAqB,MAAM,MAAO;AAC1D,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,YAAa,gBAA0B,MAAc,KAAc;AAC3E,MAAK,CAAE,eAAe,MAAO;AAC5B;AAAA,EACD;AAEA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAK,cAAe;AAEhE,MAAK,CAAE,gBAAiB;AACvB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAK,gBAAgB,cAAe;AAAA,EAC5D;AAEA,MAAK,eAAe,IAAK,IAAK,GAAI;AACjC;AAAA,EACD;AAKA,MAAK,0BAA2B,gBAAgB,IAAK,GAAI;AACxD,mBAAe,IAAK,IAAK;AACzB;AAAA,EACD;AAEA,QAAM,QAAQ,eAAe,cAAe,OAAQ;AACpD,QAAM,aAAc,sBAAsB,IAAK;AAC/C,QAAM,YAAa,eAAe,eAAgB,GAAI,CAAE;AACxD,iBAAe,KAAK,YAAa,KAAM;AACvC,iBAAe,IAAK,IAAK;AAC1B;AAaO,SAAS,iBAAkB,gBAA2B;AAC5D,QAAM,UAAU,WAAW;AAE3B,UAAQ,UAAU;AAAA,IACjB;AAAA,KACE,QAAQ,UAAU,IAAK,cAAe,KAAK,KAAM;AAAA,EACpD;AAEA,aAAY,CAAE,MAAM,GAAI,KAAK,QAAQ,QAAS;AAC7C,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AAEA,SAAO,MAAM;AACZ,UAAM,QAAQ,QAAQ,UAAU,IAAK,cAAe;AAEpD,QAAK,UAAU,QAAY;AAC1B;AAAA,IACD;AAEA,QAAK,SAAS,GAAI;AACjB,cAAQ,UAAU,OAAQ,cAAe;AACzC;AAAA,IACD;AAEA,YAAQ,UAAU,IAAK,gBAAgB,QAAQ,CAAE;AAAA,EAClD;AACD;AAaO,SAAS,cAAe,MAAc,KAAc;AAC1D,QAAM,UAAU,WAAW;AAE3B,UAAQ,OAAO,IAAK,MAAM,GAAI;AAE9B,aAAY,kBAAkB,QAAQ,UAAU,KAAK,GAAI;AACxD,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AACD;;;ACpKA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,0RAA0R;AACvT;AACA,IAAO,gBAAQ,EAAC,mBAAkB,oCAAmC;;;AFuB9D,IAAM,iBAAiB;AAAA,EAC7B,SAASA,gBAAgB,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAM;AACxD,UAAM,UAAU,UAAW;AAAA,MAC1B;AAAA,MACA;AAAA,MACA,OAAO;AAAA,QACN,EAAE,WAAW,cAAQ,iBAAkB,EAAE;AAAA,QACzC;AAAA,QACA;AAAA;AAAA,UAEC,wBAAwB;AAAA,QACzB;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO;AAAA,EACR;AACD;",
   "names": ["VisuallyHidden"]
 }

package/build-types/alert-dialog/index.d.ts

@@ -1,4 +1,5 @@
 export { Root } from './root';
 export { Trigger } from './trigger';
 export { Popup } from './popup';
+export { Portal } from './portal';
 //# sourceMappingURL=index.d.ts.map

package/build-types/alert-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/build-types/alert-dialog/popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/popup.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,QAAA,MAAM,KAAK,uGA4FV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/popup.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAK1C,QAAA,MAAM,KAAK,uGAuJV,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/build-types/alert-dialog/portal.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Root element that portals `AlertDialog` overlay content. Pass to
+ * `AlertDialog.Popup`'s `portal` prop to customize the portal target and
+ * wrapper. When `portal` is omitted, `AlertDialog.Popup` uses this component
+ * with default props.
+ */
+declare const Portal: import("react").ForwardRefExoticComponent<Omit<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Portal };
+//# sourceMappingURL=portal.d.ts.map

package/build-types/alert-dialog/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/portal.tsx"],"names":[],"mappings":"AAIA;;;;;GAKG;AACH,QAAA,MAAM,MAAM,iNAIX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/build-types/alert-dialog/root.d.ts

@@ -13,6 +13,6 @@ import type { RootProps } from './types';
  * See the [Destructive Actions guidelines](https://wordpress.github.io/gutenberg/?path=/docs/design-system-patterns-destructive-actions--docs)
  * for more details on when to use each pattern.
  */
-declare function Root({ children, open: openProp, onOpenChange, defaultOpen, onConfirm, }: RootProps): import("react").JSX.Element;
+declare function Root({ children, open: openProp, onOpenChange, defaultOpen, onConfirm }: RootProps): import("react").JSX.Element;
 export { Root };
 //# sourceMappingURL=root.d.ts.map

package/build-types/alert-dialog/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/root.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAUzC;;;;;;;;;;;;;GAaG;AACH,iBAAS,IAAI,CAAE,EACd,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,WAAW,EACX,SAAS,GACT,EAAE,SAAS,+BAqLX;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/root.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAUzC;;;;;;;;;;;;;GAaG;AACH,iBAAS,IAAI,CAAE,EACd,QAAQ,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EACZ,WAAW,EACX,SAAS,EACT,EAAE,SAAS,+BAqLX;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/build-types/alert-dialog/stories/index.story.d.ts

@@ -24,6 +24,24 @@ export declare const CustomLabels: Story;
  * accessibility (`aria-describedby`); `children` adds supplementary detail.
  */
 export declare const WithCustomContent: Story;
+/**
+ * Popovers in Gutenberg are managed with explicit z-index values, which can
+ * create situations where an alert dialog renders below another popover when
+ * you want it above.
+ *
+ * `AlertDialog` reuses `Dialog`'s styles, so the same
+ * `--wp-ui-dialog-z-index` CSS variable controls the z-index of the alert
+ * dialog's backdrop and popup. Override it either:
+ *
+ * - **Globally**, by setting the variable on `:root` or `body` (raises every
+ *   dialog and alert dialog in the page), or
+ * - **Per instance**, by passing an `AlertDialog.Portal` with a `style` (or
+ *   `className`) to `AlertDialog.Popup`'s `portal` prop. The variable
+ *   cascades from the portal wrapper to everything rendered inside it.
+ *
+ * This story demonstrates the per-instance approach.
+ */
+export declare const WithCustomZIndex: Story;
 /**
  * Example showing composition with a menu. The `AlertDialog.Trigger` is
  * composed with Base UI's `Menu.Item` using the `render` prop, allowing the
@@ -47,6 +65,16 @@ export declare const MenuTrigger: Story;
  * reopens.
  */
 export declare const AsyncConfirm: Story;
+/**
+ * When the dialog's body overflows the available height, the title/description
+ * area stays pinned to the top of the popup and the action buttons stay pinned
+ * to the bottom so users keep sight of the context and primary actions while
+ * scrolling. Separator borders appear only when there is off-screen content
+ * above or below. Pass `stickyHeader={ false }` or `stickyFooter={ false }` on
+ * `AlertDialog.Popup` to opt out — the toggles in this story drive both props
+ * independently.
+ */
+export declare const Scrollable: Story;
 /**
  * The `AlertDialog.Trigger` element is not necessary when the open state is
  * controlled externally. This is useful when the dialog needs to be opened

package/build-types/alert-dialog/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alert-dialog/stories/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,WAAW,MAAM,KAAK,CAAC;AAGnC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAAC,IAAI,CAWxC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,WAAW,CAAC,IAAI,CAAE,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAC;AAuBF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KA+CzB,CAAC;AAMF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,KAkE1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alert-dialog/stories/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D,OAAO,KAAK,WAAW,MAAM,KAAK,CAAC;AAInC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAAC,IAAI,CAmBxC,CAAC;eACa,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,WAAW,CAAC,IAAI,CAAE,CAAC;AAEjD;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,KAc1B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAkB9B,CAAC;AAuBF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,EAAE,KA+CzB,CAAC;AAMF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,YAAY,EAAE,KAkE1B,CAAC;AAqEF;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC"}

package/build-types/alert-dialog/types.d.ts

@@ -1,6 +1,7 @@
 import type { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';
-import type { ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
 import type { ComponentProps } from '../utils/types';
+export type PortalProps = ComponentPropsWithoutRef<typeof _AlertDialog.Portal>;
 /**
  * The return type of `onConfirm`. Return `void` (or nothing) to auto-close
  * the dialog after the confirm handler completes. Return `{ close: false }`
@@ -54,9 +55,15 @@ export interface TriggerProps extends ComponentProps<'button'> {
 }
 export interface PopupProps extends ComponentProps<'div'>, Pick<_AlertDialog.Popup.Props, 'initialFocus' | 'finalFocus'> {
     /**
-     * A parent element to render the portal into.
+     * Optional portal element, typically `<AlertDialog.Portal />` with
+     * custom `container`, `className`, or `style`. Overlay content is
+     * rendered as this portal's children (do not pass `children` on the portal
+     * element; they would be ignored).
+     *
+     * When omitted, `AlertDialog.Popup` uses `AlertDialog.Portal` with default
+     * props.
      */
-    container?: _AlertDialog.Portal.Props['container'];
+    portal?: ReactElement<Omit<PortalProps, 'children'>>;
     /**
      * The semantic intent of the dialog, which determines its styling.
      *
@@ -101,5 +108,20 @@ export interface PopupProps extends ComponentProps<'div'>, Pick<_AlertDialog.Pop
      * @default 'Cancel'
      */
     cancelButtonText?: string;
+    /**
+     * When `true`, the dialog's title stays pinned to the top of the popup
+     * as the body scrolls. When `false`, the title scrolls with the body.
+     *
+     * @default true
+     */
+    stickyHeader?: boolean;
+    /**
+     * When `true`, the dialog's action buttons (and error message, if any)
+     * stay pinned to the bottom of the popup as the body scrolls. When
+     * `false`, they scroll with the body.
+     *
+     * @default true
+     */
+    stickyFooter?: boolean;
 }
 //# sourceMappingURL=types.d.ts.map

package/build-types/alert-dialog/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE,MAAM,WAAW,SAChB,SAAQ,IAAI,CACX,YAAY,CAAC,IAAI,CAAC,KAAK,EACvB,MAAM,GAAG,cAAc,GAAG,aAAa,CACvC;IACD;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,SAAS,CAAC,EAAE,MAAM,aAAa,GAAG,OAAO,CAAE,aAAa,CAAE,CAAC;CAC3D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAChB,SAAQ,cAAc,CAAE,KAAK,CAAE,EAC9B,IAAI,CAAE,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAAE;IAChE;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAE,WAAW,CAAE,CAAC;IAErD;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAEpC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/alert-dialog/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,KAAK,EAAE,wBAAwB,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,wBAAwB,CACjD,OAAO,YAAY,CAAC,MAAM,CAC1B,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvE,MAAM,WAAW,SAChB,SAAQ,IAAI,CACX,YAAY,CAAC,IAAI,CAAC,KAAK,EACvB,MAAM,GAAG,cAAc,GAAG,aAAa,CACvC;IACD;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,SAAS,CAAC,EAAE,MAAM,aAAa,GAAG,OAAO,CAAE,aAAa,CAAE,CAAC;CAC3D;AAED,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAE,QAAQ,CAAE;IAC/D;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,UAChB,SAAQ,cAAc,CAAE,KAAK,CAAE,EAC9B,IAAI,CAAE,YAAY,CAAC,KAAK,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAAE;IAChE;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,YAAY,CAAE,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE,CAAE,CAAC;IAEzD;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IAEpC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB"}

package/build-types/badge/stories/choosing-intent.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"choosing-intent.story.d.ts","sourceRoot":"","sources":["../../../src/badge/stories/choosing-intent.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAc7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAOjB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC"}
+{"version":3,"file":"choosing-intent.story.d.ts","sourceRoot":"","sources":["../../../src/badge/stories/choosing-intent.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAc7B,CAAC;eACa,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,UAAU,EAAE,KAYxB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAOjB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAOpB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAOlB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAO1B,CAAC"}

package/build-types/badge/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/badge/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAI7B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAMjB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/badge/stories/index.story.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,KAAK,CAU7B,CAAC;eACa,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,KAAK,CAAE,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,GAAG,EAAE,KAMjB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAMnB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAMlB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KA6CxB,CAAC"}

package/build-types/button/button.d.ts

@@ -1,3 +1,6 @@
 import { type ButtonProps } from './types';
+/**
+ * A versatile button component with multiple variants, tones, and sizes.
+ */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=button.d.ts.map

package/build-types/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAM3C,eAAO,MAAM,MAAM,2GA+ClB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/button/button.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAM3C;;GAEG;AACH,eAAO,MAAM,MAAM,2GA+ClB,CAAC"}

package/build-types/button/icon.d.ts

@@ -1,10 +1,3 @@
-import { type IconProps } from '../icon/types';
-interface ButtonIconProps extends IconProps {
-    /**
-     * The icon to display, from the `@wordpress/icons` package.
-     */
-    icon: IconProps['icon'];
-}
+import { type ButtonIconProps } from './types';
 export declare const ButtonIcon: import("react").ForwardRefExoticComponent<Omit<ButtonIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
-export {};
 //# sourceMappingURL=icon.d.ts.map

package/build-types/button/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/button/icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,eAAe,CAAC;AAG/C,UAAU,eAAgB,SAAQ,SAAS;IAC1C;;OAEG;IACH,IAAI,EAAE,SAAS,CAAE,MAAM,CAAE,CAAC;CAC1B;AAED,eAAO,MAAM,UAAU,wHAYtB,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/button/icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,eAAO,MAAM,UAAU,wHAYtB,CAAC"}

package/build-types/button/index.d.ts

@@ -1,10 +1,11 @@
-import { Button as ButtonButton } from './button';
-import { ButtonIcon } from './icon';
 /**
  * A versatile button component with multiple variants, tones, and sizes.
- * Built on design tokens for consistent theming and accessibility.
  */
-export declare const Button: typeof ButtonButton & {
-    Icon: typeof ButtonIcon;
+export declare const Button: import("react").ForwardRefExoticComponent<import("./types").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
+    /**
+     * An icon component specifically designed to work well when rendered inside
+     * a `Button` component.
+     */
+    Icon: import("react").ForwardRefExoticComponent<Omit<import("./types").ButtonIconProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 };
 //# sourceMappingURL=index.d.ts.map