@wordpress/ui 0.11.1-next.v.202604091042.0 → 0.12.0

package/build-module/tooltip/provider.mjs

@@ -1,8 +1,8 @@
 // packages/ui/src/tooltip/provider.tsx
-import { Tooltip } from "@base-ui/react/tooltip";
+import { Tooltip as _Tooltip } from "@base-ui/react/tooltip";
 import { jsx } from "react/jsx-runtime";
-function Provider({ children, ...props }) {
-  return /* @__PURE__ */ jsx(Tooltip.Provider, { ...props, children });
+function Provider({ ...props }) {
+  return /* @__PURE__ */ jsx(_Tooltip.Provider, { ...props });
 }
 export {
   Provider

package/build-module/tooltip/provider.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tooltip/provider.tsx"],
-  "sourcesContent": ["import { Tooltip } from '@base-ui/react/tooltip';\nimport type { ProviderProps } from './types';\n\nfunction Provider( { children, ...props }: ProviderProps ) {\n\treturn <Tooltip.Provider { ...props }>{ children }</Tooltip.Provider>;\n}\n\nexport { Provider };\n"],
-  "mappings": ";AAAA,SAAS,eAAe;AAIhB;AADR,SAAS,SAAU,EAAE,UAAU,GAAG,MAAM,GAAmB;AAC1D,SAAO,oBAAC,QAAQ,UAAR,EAAmB,GAAG,OAAU,UAAU;AACnD;",
+  "sourcesContent": ["import { Tooltip as _Tooltip } from '@base-ui/react/tooltip';\nimport type { ProviderProps } from './types';\n\nfunction Provider( { ...props }: ProviderProps ) {\n\treturn <_Tooltip.Provider { ...props } />;\n}\n\nexport { Provider };\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AAI5B;AADR,SAAS,SAAU,EAAE,GAAG,MAAM,GAAmB;AAChD,SAAO,oBAAC,SAAS,UAAT,EAAoB,GAAG,OAAQ;AACxC;",
   "names": []
 }

package/build-module/tooltip/root.mjs

@@ -1,8 +1,8 @@
 // packages/ui/src/tooltip/root.tsx
-import { Tooltip } from "@base-ui/react/tooltip";
+import { Tooltip as _Tooltip } from "@base-ui/react/tooltip";
 import { jsx } from "react/jsx-runtime";
 function Root(props) {
-  return /* @__PURE__ */ jsx(Tooltip.Root, { ...props });
+  return /* @__PURE__ */ jsx(_Tooltip.Root, { ...props });
 }
 export {
   Root

package/build-module/tooltip/root.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tooltip/root.tsx"],
-  "sourcesContent": ["import { Tooltip } from '@base-ui/react/tooltip';\nimport type { RootProps } from './types';\n\n/**\n * `Tooltip` is used to visually show the label of an icon button, or other such interactive controls\n * that don't have a visual text label.\n *\n * Tooltips are not available on touch devices, and thus should not be used for infotips,\n * descriptions, or dynamic status messages.\n *\n * The tooltip itself does not provide any accessible labeling, so when using the\n * `Tooltip` primitive you must ensure that the trigger is accessibly labeled (e.g. with an `aria-label`).\n *\n * See also: [IconButton](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-iconbutton--docs)\n */\nfunction Root( props: RootProps ) {\n\treturn <Tooltip.Root { ...props } />;\n}\n\nexport { Root };\n"],
-  "mappings": ";AAAA,SAAS,eAAe;AAgBhB;AADR,SAAS,KAAM,OAAmB;AACjC,SAAO,oBAAC,QAAQ,MAAR,EAAe,GAAG,OAAQ;AACnC;",
+  "sourcesContent": ["import { Tooltip as _Tooltip } from '@base-ui/react/tooltip';\nimport type { RootProps } from './types';\n\n/**\n * `Tooltip` is used to visually show the label of an icon button, or other such\n * interactive controls that don't have a visual text label.\n *\n * Tooltip popups are visual-only and not exposed to assistive technologies.\n * The trigger's accessible name (e.g. `aria-label`) is the source of truth\n * for screen reader users. Tooltips are not available on touch devices,\n * and thus should not be used for infotips, descriptions, or dynamic status\n * messages.\n *\n * @see {@link https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-tooltip-usage-guidelines--docs Usage Guidelines}\n * @see {@link https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-iconbutton--docs IconButton}\n */\nfunction Root( props: RootProps ) {\n\treturn <_Tooltip.Root { ...props } />;\n}\n\nexport { Root };\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AAiB5B;AADR,SAAS,KAAM,OAAmB;AACjC,SAAO,oBAAC,SAAS,MAAT,EAAgB,GAAG,OAAQ;AACpC;",
   "names": []
 }

package/build-module/tooltip/trigger.mjs

@@ -1,10 +1,10 @@
 // packages/ui/src/tooltip/trigger.tsx
-import { Tooltip } from "@base-ui/react/tooltip";
+import { Tooltip as _Tooltip } from "@base-ui/react/tooltip";
 import { forwardRef } from "@wordpress/element";
 import { jsx } from "react/jsx-runtime";
 var Trigger = forwardRef(
-  function TooltipTrigger({ children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(Tooltip.Trigger, { ref, ...props, children });
+  function TooltipTrigger(props, ref) {
+    return /* @__PURE__ */ jsx(_Tooltip.Trigger, { ref, ...props });
   }
 );
 export {

package/build-module/tooltip/trigger.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tooltip/trigger.tsx"],
-  "sourcesContent": ["import { Tooltip } from '@base-ui/react/tooltip';\nimport { forwardRef } from '@wordpress/element';\nimport type { TriggerProps } from './types';\n\nconst Trigger = forwardRef< HTMLButtonElement, TriggerProps >(\n\tfunction TooltipTrigger( { children, ...props }, ref ) {\n\t\treturn (\n\t\t\t<Tooltip.Trigger ref={ ref } { ...props }>\n\t\t\t\t{ children }\n\t\t\t</Tooltip.Trigger>\n\t\t);\n\t}\n);\n\nexport { Trigger };\n"],
-  "mappings": ";AAAA,SAAS,eAAe;AACxB,SAAS,kBAAkB;AAMxB;AAHH,IAAM,UAAU;AAAA,EACf,SAAS,eAAgB,EAAE,UAAU,GAAG,MAAM,GAAG,KAAM;AACtD,WACC,oBAAC,QAAQ,SAAR,EAAgB,KAAc,GAAG,OAC/B,UACH;AAAA,EAEF;AACD;",
+  "sourcesContent": ["import { Tooltip as _Tooltip } from '@base-ui/react/tooltip';\nimport { forwardRef } from '@wordpress/element';\nimport type { TriggerProps } from './types';\n\nconst Trigger = forwardRef< HTMLButtonElement, TriggerProps >(\n\tfunction TooltipTrigger( props, ref ) {\n\t\treturn <_Tooltip.Trigger ref={ ref } { ...props } />;\n\t}\n);\n\nexport { Trigger };\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB;AAKlB;AAFT,IAAM,UAAU;AAAA,EACf,SAAS,eAAgB,OAAO,KAAM;AACrC,WAAO,oBAAC,SAAS,SAAT,EAAiB,KAAc,GAAG,OAAQ;AAAA,EACnD;AACD;",
   "names": []
 }

package/build-module/utils/create-overlay-modal-context.mjs

@@ -0,0 +1,23 @@
+// packages/ui/src/utils/create-overlay-modal-context.tsx
+import { createContext, useContext } from "@wordpress/element";
+import { jsx } from "react/jsx-runtime";
+function createOverlayModalContext(initialValue) {
+  const OverlayModalContext = createContext(initialValue);
+  function OverlayModalProvider({
+    modal,
+    children
+  }) {
+    return /* @__PURE__ */ jsx(OverlayModalContext.Provider, { value: modal, children });
+  }
+  function useOverlayModal() {
+    return useContext(OverlayModalContext);
+  }
+  return {
+    Provider: OverlayModalProvider,
+    useModal: useOverlayModal
+  };
+}
+export {
+  createOverlayModalContext
+};
+//# sourceMappingURL=create-overlay-modal-context.mjs.map

package/build-module/utils/create-overlay-modal-context.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/create-overlay-modal-context.tsx"],
+  "sourcesContent": ["import { createContext, useContext } from '@wordpress/element';\n\ntype OverlayModalProviderProps< Modal > = {\n\tmodal: Modal;\n\tchildren: React.ReactNode;\n};\n\n/**\n * Creates a modal context pair (`Provider` + `useModal`) for overlay\n * primitives like Dialog and Drawer.\n */\nexport function createOverlayModalContext< Modal >( initialValue: Modal ) {\n\tconst OverlayModalContext = createContext< Modal >( initialValue );\n\n\tfunction OverlayModalProvider( {\n\t\tmodal,\n\t\tchildren,\n\t}: OverlayModalProviderProps< Modal > ) {\n\t\treturn (\n\t\t\t<OverlayModalContext.Provider value={ modal }>\n\t\t\t\t{ children }\n\t\t\t</OverlayModalContext.Provider>\n\t\t);\n\t}\n\n\tfunction useOverlayModal() {\n\t\treturn useContext( OverlayModalContext );\n\t}\n\n\treturn {\n\t\tProvider: OverlayModalProvider,\n\t\tuseModal: useOverlayModal,\n\t};\n}\n"],
+  "mappings": ";AAAA,SAAS,eAAe,kBAAkB;AAmBvC;AARI,SAAS,0BAAoC,cAAsB;AACzE,QAAM,sBAAsB,cAAwB,YAAa;AAEjE,WAAS,qBAAsB;AAAA,IAC9B;AAAA,IACA;AAAA,EACD,GAAwC;AACvC,WACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,OACnC,UACH;AAAA,EAEF;AAEA,WAAS,kBAAkB;AAC1B,WAAO,WAAY,mBAAoB;AAAA,EACxC;AAEA,SAAO;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,EACX;AACD;",
+  "names": []
+}

package/build-module/utils/create-overlay-title-validation.mjs

@@ -0,0 +1,75 @@
+// packages/ui/src/utils/create-overlay-title-validation.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef
+} from "@wordpress/element";
+import { useScheduleValidation } from "./use-schedule-validation.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+var VALIDATION_ENABLED = process.env.NODE_ENV !== "production";
+function createOverlayTitleValidation(componentName) {
+  const componentNameLowerCase = componentName.toLowerCase();
+  const OverlayValidationContext = VALIDATION_ENABLED ? createContext(null) : null;
+  function useValidationContextDev() {
+    return useContext(OverlayValidationContext);
+  }
+  function useValidationContextProd() {
+    return null;
+  }
+  const useValidationContext = VALIDATION_ENABLED ? useValidationContextDev : useValidationContextProd;
+  function ValidationProviderDev({
+    children
+  }) {
+    const titleElementRef = useRef(null);
+    const scheduleValidation = useScheduleValidation(() => {
+      const titleElement = titleElementRef.current;
+      if (!titleElement) {
+        throw new Error(
+          `${componentName}: Missing <${componentName}.Title>. For accessibility, every ${componentNameLowerCase} requires a title. If needed, the title can be visually hidden but must not be omitted.`
+        );
+      }
+      const textContent = titleElement.textContent?.trim();
+      if (!textContent) {
+        throw new Error(
+          `${componentName}: <${componentName}.Title> cannot be empty. Provide meaningful text content for the ${componentNameLowerCase} title.`
+        );
+      }
+    });
+    const registerTitle = useCallback(
+      (element) => {
+        titleElementRef.current = element;
+        scheduleValidation();
+        return () => {
+          titleElementRef.current = null;
+          scheduleValidation();
+        };
+      },
+      [scheduleValidation]
+    );
+    const contextValue = useMemo(
+      () => ({ registerTitle }),
+      [registerTitle]
+    );
+    useEffect(() => {
+      scheduleValidation();
+    }, [scheduleValidation]);
+    return /* @__PURE__ */ jsx(OverlayValidationContext.Provider, { value: contextValue, children });
+  }
+  function ValidationProviderProd({
+    children
+  }) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const ValidationProvider = VALIDATION_ENABLED ? ValidationProviderDev : ValidationProviderProd;
+  return {
+    ValidationProvider,
+    useValidationContext
+  };
+}
+export {
+  createOverlayTitleValidation
+};
+//# sourceMappingURL=create-overlay-title-validation.mjs.map

package/build-module/utils/create-overlay-title-validation.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/create-overlay-title-validation.tsx"],
+  "sourcesContent": ["import {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\nimport { useScheduleValidation } from './use-schedule-validation';\n\n/**\n * Whether validation is enabled. This is a build-time constant that allows\n * bundlers to tree-shake all validation code in production builds.\n */\nconst VALIDATION_ENABLED = process.env.NODE_ENV !== 'production';\n\ntype OverlayValidationContextType = {\n\tregisterTitle: ( element: HTMLElement | null ) => () => void;\n};\n\ntype OverlayValidationProviderProps = {\n\tchildren: React.ReactNode;\n};\n\n/**\n * Creates development-only title validation helpers for overlay primitives.\n */\nexport function createOverlayTitleValidation( componentName: string ) {\n\tconst componentNameLowerCase = componentName.toLowerCase();\n\tconst OverlayValidationContext = VALIDATION_ENABLED\n\t\t? createContext< OverlayValidationContextType | null >( null )\n\t\t: ( null as unknown as React.Context< OverlayValidationContextType | null > );\n\n\tfunction useValidationContextDev() {\n\t\treturn useContext( OverlayValidationContext );\n\t}\n\n\tfunction useValidationContextProd() {\n\t\treturn null;\n\t}\n\n\tconst useValidationContext = VALIDATION_ENABLED\n\t\t? useValidationContextDev\n\t\t: useValidationContextProd;\n\n\tfunction ValidationProviderDev( {\n\t\tchildren,\n\t}: OverlayValidationProviderProps ) {\n\t\tconst titleElementRef = useRef< HTMLElement | null >( null );\n\n\t\tconst scheduleValidation = useScheduleValidation( () => {\n\t\t\tconst titleElement = titleElementRef.current;\n\n\t\t\tif ( ! titleElement ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`${ componentName }: Missing <${ componentName }.Title>. ` +\n\t\t\t\t\t\t`For accessibility, every ${ componentNameLowerCase } requires a title. ` +\n\t\t\t\t\t\t'If needed, the title can be visually hidden but must not be omitted.'\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst textContent = titleElement.textContent?.trim();\n\t\t\tif ( ! textContent ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`${ componentName }: <${ componentName }.Title> cannot be empty. ` +\n\t\t\t\t\t\t`Provide meaningful text content for the ${ componentNameLowerCase } title.`\n\t\t\t\t);\n\t\t\t}\n\t\t} );\n\n\t\tconst registerTitle = useCallback(\n\t\t\t( element: HTMLElement | null ) => {\n\t\t\t\ttitleElementRef.current = element;\n\t\t\t\tscheduleValidation();\n\n\t\t\t\treturn () => {\n\t\t\t\t\ttitleElementRef.current = null;\n\t\t\t\t\tscheduleValidation();\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ scheduleValidation ]\n\t\t);\n\n\t\tconst contextValue = useMemo(\n\t\t\t() => ( { registerTitle } ),\n\t\t\t[ registerTitle ]\n\t\t);\n\n\t\t// Schedule an initial validation on mount to catch missing titles\n\t\t// (when no Title component is rendered, registerTitle is never called).\n\t\tuseEffect( () => {\n\t\t\tscheduleValidation();\n\t\t}, [ scheduleValidation ] );\n\n\t\treturn (\n\t\t\t<OverlayValidationContext.Provider value={ contextValue }>\n\t\t\t\t{ children }\n\t\t\t</OverlayValidationContext.Provider>\n\t\t);\n\t}\n\n\tfunction ValidationProviderProd( {\n\t\tchildren,\n\t}: OverlayValidationProviderProps ) {\n\t\treturn <>{ children }</>;\n\t}\n\n\tconst ValidationProvider = VALIDATION_ENABLED\n\t\t? ValidationProviderDev\n\t\t: ValidationProviderProd;\n\n\treturn {\n\t\tValidationProvider,\n\t\tuseValidationContext,\n\t};\n}\n"],
+  "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,6BAA6B;AAuFnC,SASM,UATN;AAjFH,IAAM,qBAAqB,QAAQ,IAAI,aAAa;AAa7C,SAAS,6BAA8B,eAAwB;AACrE,QAAM,yBAAyB,cAAc,YAAY;AACzD,QAAM,2BAA2B,qBAC9B,cAAsD,IAAK,IACzD;AAEL,WAAS,0BAA0B;AAClC,WAAO,WAAY,wBAAyB;AAAA,EAC7C;AAEA,WAAS,2BAA2B;AACnC,WAAO;AAAA,EACR;AAEA,QAAM,uBAAuB,qBAC1B,0BACA;AAEH,WAAS,sBAAuB;AAAA,IAC/B;AAAA,EACD,GAAoC;AACnC,UAAM,kBAAkB,OAA8B,IAAK;AAE3D,UAAM,qBAAqB,sBAAuB,MAAM;AACvD,YAAM,eAAe,gBAAgB;AAErC,UAAK,CAAE,cAAe;AACrB,cAAM,IAAI;AAAA,UACT,GAAI,aAAc,cAAe,aAAc,qCACjB,sBAAuB;AAAA,QAEtD;AAAA,MACD;AAEA,YAAM,cAAc,aAAa,aAAa,KAAK;AACnD,UAAK,CAAE,aAAc;AACpB,cAAM,IAAI;AAAA,UACT,GAAI,aAAc,MAAO,aAAc,oEACM,sBAAuB;AAAA,QACrE;AAAA,MACD;AAAA,IACD,CAAE;AAEF,UAAM,gBAAgB;AAAA,MACrB,CAAE,YAAiC;AAClC,wBAAgB,UAAU;AAC1B,2BAAmB;AAEnB,eAAO,MAAM;AACZ,0BAAgB,UAAU;AAC1B,6BAAmB;AAAA,QACpB;AAAA,MACD;AAAA,MACA,CAAE,kBAAmB;AAAA,IACtB;AAEA,UAAM,eAAe;AAAA,MACpB,OAAQ,EAAE,cAAc;AAAA,MACxB,CAAE,aAAc;AAAA,IACjB;AAIA,cAAW,MAAM;AAChB,yBAAmB;AAAA,IACpB,GAAG,CAAE,kBAAmB,CAAE;AAE1B,WACC,oBAAC,yBAAyB,UAAzB,EAAkC,OAAQ,cACxC,UACH;AAAA,EAEF;AAEA,WAAS,uBAAwB;AAAA,IAChC;AAAA,EACD,GAAoC;AACnC,WAAO,gCAAI,UAAU;AAAA,EACtB;AAEA,QAAM,qBAAqB,qBACxB,wBACA;AAEH,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;",
+  "names": []
+}

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

@@ -0,0 +1,12 @@
+// packages/ui/src/utils/render-portal-with-children.ts
+import { cloneElement } from "@wordpress/element";
+function renderPortalWithChildren(portal, defaultPortal, children) {
+  const rootPortal = portal ?? defaultPortal;
+  return cloneElement(rootPortal, {
+    children
+  });
+}
+export {
+  renderPortalWithChildren
+};
+//# sourceMappingURL=render-portal-with-children.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/render-portal-with-children.ts"],
+  "sourcesContent": ["import { cloneElement } from '@wordpress/element';\nimport type { ReactElement, ReactNode } from 'react';\n\n/**\n * Renders overlay markup (`children`) through an optional `portal` element from\n * `portal={ <Component.Portal \u2026 /> }`, or through the package default portal.\n *\n * Shared by overlay `Popup` components so portal merge behavior stays consistent.\n *\n * @param portal        Optional element from the `portal` prop (should have no\n *                      `children`; callers type this via `Omit<PortalProps,'children'>`).\n *                      When omitted, `defaultPortal` is used. Injected `children`\n *                      replace any subtree on the portal element.\n * @param defaultPortal Unpopulated default portal element (e.g. `<Dialog.Portal />`).\n * @param children      Popup subtree (backdrop, positioner, etc.) to inject as the portal\u2019s children.\n */\nexport function renderPortalWithChildren(\n\tportal: ReactElement | undefined,\n\tdefaultPortal: ReactElement,\n\tchildren: ReactNode\n): ReactElement {\n\tconst rootPortal = portal ?? defaultPortal;\n\n\treturn cloneElement( rootPortal, {\n\t\tchildren,\n\t} );\n}\n"],
+  "mappings": ";AAAA,SAAS,oBAAoB;AAgBtB,SAAS,yBACf,QACA,eACA,UACe;AACf,QAAM,aAAa,UAAU;AAE7B,SAAO,aAAc,YAAY;AAAA,IAChC;AAAA,EACD,CAAE;AACH;",
+  "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/utils/use-schedule-validation.mjs

@@ -0,0 +1,34 @@
+// packages/ui/src/utils/use-schedule-validation.ts
+import { useCallback, useEffect, useRef } from "@wordpress/element";
+function useScheduleValidation(validate) {
+  const validateRef = useRef(validate);
+  validateRef.current = validate;
+  const timerRef = useRef(null);
+  const unmountedRef = useRef(false);
+  const scheduleValidation = useCallback(() => {
+    if (unmountedRef.current) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(() => {
+      validateRef.current();
+      timerRef.current = null;
+    }, 0);
+  }, []);
+  useEffect(() => {
+    unmountedRef.current = false;
+    return () => {
+      unmountedRef.current = true;
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  return scheduleValidation;
+}
+export {
+  useScheduleValidation
+};
+//# sourceMappingURL=use-schedule-validation.mjs.map

package/build-module/utils/use-schedule-validation.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/utils/use-schedule-validation.ts"],
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Dev-only hook that returns a stable `scheduleValidation` function.\n *\n * Each call debounces to `setTimeout(\u2026, 0)` so that rapid\n * register / unregister cycles (e.g. React strict-mode double-mount)\n * settle before the check runs. The timer is cleaned up on unmount,\n * and calls after unmount are silently ignored.\n *\n * @param validate Callback that performs the actual validation.\n *                 Stored in a ref \u2014 safe to pass an unstable closure.\n */\nexport function useScheduleValidation( validate: () => void ) {\n\tconst validateRef = useRef( validate );\n\tvalidateRef.current = validate;\n\n\tconst timerRef = useRef< ReturnType< typeof setTimeout > | null >( null );\n\tconst unmountedRef = useRef( false );\n\n\tconst scheduleValidation = useCallback( () => {\n\t\tif ( unmountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( timerRef.current ) {\n\t\t\tclearTimeout( timerRef.current );\n\t\t}\n\t\ttimerRef.current = setTimeout( () => {\n\t\t\tvalidateRef.current();\n\t\t\ttimerRef.current = null;\n\t\t}, 0 );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tunmountedRef.current = false;\n\t\treturn () => {\n\t\t\tunmountedRef.current = true;\n\t\t\tif ( timerRef.current ) {\n\t\t\t\tclearTimeout( timerRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn scheduleValidation;\n}\n"],
+  "mappings": ";AAAA,SAAS,aAAa,WAAW,cAAc;AAaxC,SAAS,sBAAuB,UAAuB;AAC7D,QAAM,cAAc,OAAQ,QAAS;AACrC,cAAY,UAAU;AAEtB,QAAM,WAAW,OAAkD,IAAK;AACxE,QAAM,eAAe,OAAQ,KAAM;AAEnC,QAAM,qBAAqB,YAAa,MAAM;AAC7C,QAAK,aAAa,SAAU;AAC3B;AAAA,IACD;AACA,QAAK,SAAS,SAAU;AACvB,mBAAc,SAAS,OAAQ;AAAA,IAChC;AACA,aAAS,UAAU,WAAY,MAAM;AACpC,kBAAY,QAAQ;AACpB,eAAS,UAAU;AAAA,IACpB,GAAG,CAAE;AAAA,EACN,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,iBAAa,UAAU;AACvB,WAAO,MAAM;AACZ,mBAAa,UAAU;AACvB,UAAK,SAAS,SAAU;AACvB,qBAAc,SAAS,OAAQ;AAAA,MAChC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SAAO;AACR;",
+  "names": []
+}

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

@@ -19,7 +19,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 */\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;;;ADG9D,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;",
+  "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", "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;;;ADqB9D,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").AlertDialogPortalProps, "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,sNAIX,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { AlertDialog } from '../..';
+import * as AlertDialog from '../';
 declare const meta: Meta<typeof AlertDialog.Root>;
 export default meta;
 type Story = StoryObj<typeof AlertDialog.Root>;
@@ -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