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

package/build-module/popover/context.mjs

@@ -1,55 +1,8 @@
 // packages/ui/src/popover/context.tsx
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef
-} from "@wordpress/element";
-import { Fragment, jsx } from "react/jsx-runtime";
-var VALIDATION_ENABLED = process.env.NODE_ENV !== "production";
-var PopoverValidationContext = VALIDATION_ENABLED ? createContext(null) : null;
-function usePopoverValidationContextDev() {
-  return useContext(PopoverValidationContext);
-}
-function usePopoverValidationContextProd() {
-  return null;
-}
-var usePopoverValidationContext = VALIDATION_ENABLED ? usePopoverValidationContextDev : usePopoverValidationContextProd;
-function PopoverValidationProviderDev({
-  children
-}) {
-  const titleElementRef = useRef(null);
-  const registerTitle = useCallback((element) => {
-    titleElementRef.current = element;
-  }, []);
-  const contextValue = useMemo(
-    () => ({ registerTitle }),
-    [registerTitle]
-  );
-  useEffect(() => {
-    const titleElement = titleElementRef.current;
-    if (!titleElement) {
-      throw new Error(
-        "Popover: Missing <Popover.Title>. For accessibility, every popover 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(
-        "Popover: <Popover.Title> cannot be empty. Provide meaningful text content for the popover title."
-      );
-    }
-  }, []);
-  return /* @__PURE__ */ jsx(PopoverValidationContext.Provider, { value: contextValue, children });
-}
-function PopoverValidationProviderProd({
-  children
-}) {
-  return /* @__PURE__ */ jsx(Fragment, { children });
-}
-var PopoverValidationProvider = VALIDATION_ENABLED ? PopoverValidationProviderDev : PopoverValidationProviderProd;
+import { createOverlayTitleValidation } from "../utils/create-overlay-title-validation.mjs";
+var popoverTitleValidation = createOverlayTitleValidation("Popover");
+var usePopoverValidationContext = popoverTitleValidation.useValidationContext;
+var PopoverValidationProvider = popoverTitleValidation.ValidationProvider;
 export {
   PopoverValidationProvider,
   usePopoverValidationContext

package/build-module/popover/context.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/popover/context.tsx"],
-  "sourcesContent": ["import {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\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 PopoverValidationContextType = {\n\tregisterTitle: ( element: HTMLElement | null ) => void;\n};\n\nconst PopoverValidationContext = VALIDATION_ENABLED\n\t? createContext< PopoverValidationContextType | null >( null )\n\t: ( null as unknown as React.Context< PopoverValidationContextType | null > );\n\nfunction usePopoverValidationContextDev() {\n\treturn useContext( PopoverValidationContext );\n}\n\nfunction usePopoverValidationContextProd() {\n\treturn null;\n}\n\n/**\n * Hook to access the popover validation context.\n * Returns null in production or if not within a Popover.Popup.\n */\nexport const usePopoverValidationContext = VALIDATION_ENABLED\n\t? usePopoverValidationContextDev\n\t: usePopoverValidationContextProd;\n\n/**\n * Development-only provider that tracks whether Popover.Title is rendered.\n */\nfunction PopoverValidationProviderDev( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst titleElementRef = useRef< HTMLElement | null >( null );\n\n\tconst registerTitle = useCallback( ( element: HTMLElement | null ) => {\n\t\ttitleElementRef.current = element;\n\t}, [] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( { registerTitle } ),\n\t\t[ registerTitle ]\n\t);\n\n\tuseEffect( () => {\n\t\tconst titleElement = titleElementRef.current;\n\n\t\tif ( ! titleElement ) {\n\t\t\tthrow new Error(\n\t\t\t\t'Popover: Missing <Popover.Title>. ' +\n\t\t\t\t\t'For accessibility, every popover requires a title. ' +\n\t\t\t\t\t'If needed, the title can be visually hidden but must not be omitted.'\n\t\t\t);\n\t\t}\n\n\t\tconst textContent = titleElement.textContent?.trim();\n\t\tif ( ! textContent ) {\n\t\t\tthrow new Error(\n\t\t\t\t'Popover: <Popover.Title> cannot be empty. ' +\n\t\t\t\t\t'Provide meaningful text content for the popover title.'\n\t\t\t);\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<PopoverValidationContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</PopoverValidationContext.Provider>\n\t);\n}\n\nfunction PopoverValidationProviderProd( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\treturn <>{ children }</>;\n}\n\n/**\n * Provider component that validates Popover.Title presence in development mode.\n * In production, this component is a no-op and just renders children.\n */\nexport const PopoverValidationProvider = VALIDATION_ENABLED\n\t? PopoverValidationProviderDev\n\t: PopoverValidationProviderProd;\n"],
-  "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAwEL,SAWM,UAXN;AAlEF,IAAM,qBAAqB,QAAQ,IAAI,aAAa;AAMpD,IAAM,2BAA2B,qBAC9B,cAAsD,IAAK,IACzD;AAEL,SAAS,iCAAiC;AACzC,SAAO,WAAY,wBAAyB;AAC7C;AAEA,SAAS,kCAAkC;AAC1C,SAAO;AACR;AAMO,IAAM,8BAA8B,qBACxC,iCACA;AAKH,SAAS,6BAA8B;AAAA,EACtC;AACD,GAEI;AACH,QAAM,kBAAkB,OAA8B,IAAK;AAE3D,QAAM,gBAAgB,YAAa,CAAE,YAAiC;AACrE,oBAAgB,UAAU;AAAA,EAC3B,GAAG,CAAC,CAAE;AAEN,QAAM,eAAe;AAAA,IACpB,OAAQ,EAAE,cAAc;AAAA,IACxB,CAAE,aAAc;AAAA,EACjB;AAEA,YAAW,MAAM;AAChB,UAAM,eAAe,gBAAgB;AAErC,QAAK,CAAE,cAAe;AACrB,YAAM,IAAI;AAAA,QACT;AAAA,MAGD;AAAA,IACD;AAEA,UAAM,cAAc,aAAa,aAAa,KAAK;AACnD,QAAK,CAAE,aAAc;AACpB,YAAM,IAAI;AAAA,QACT;AAAA,MAED;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,SACC,oBAAC,yBAAyB,UAAzB,EAAkC,OAAQ,cACxC,UACH;AAEF;AAEA,SAAS,8BAA+B;AAAA,EACvC;AACD,GAEI;AACH,SAAO,gCAAI,UAAU;AACtB;AAMO,IAAM,4BAA4B,qBACtC,+BACA;",
+  "sourcesContent": ["import { createOverlayTitleValidation } from '../utils/create-overlay-title-validation';\n\nconst popoverTitleValidation = createOverlayTitleValidation( 'Popover' );\n\n/**\n * Hook to access the popover validation context.\n * Returns null in production or if not within a Popover.Popup.\n */\nexport const usePopoverValidationContext =\n\tpopoverTitleValidation.useValidationContext;\n\n/**\n * Provider component that validates Popover.Title presence in development mode.\n * In production, this component is a no-op and just renders children.\n */\nexport const PopoverValidationProvider =\n\tpopoverTitleValidation.ValidationProvider;\n"],
+  "mappings": ";AAAA,SAAS,oCAAoC;AAE7C,IAAM,yBAAyB,6BAA8B,SAAU;AAMhE,IAAM,8BACZ,uBAAuB;AAMjB,IAAM,4BACZ,uBAAuB;",
   "names": []
 }

package/build-module/popover/description.mjs

@@ -1,29 +1,16 @@
 // packages/ui/src/popover/description.tsx
 import { Popover as _Popover } from "@base-ui/react/popover";
-import clsx from "clsx";
 import { forwardRef } from "@wordpress/element";
 import { Text } from "../text/index.mjs";
-
-// packages/ui/src/popover/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='3b666a02be']")) {
-  const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "3b666a02be");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-md,13px);line-height:var(--wpds-font-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#6d6d6d)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}'));
-  document.head.appendChild(style);
-}
-var style_default = { "positioner": "_10450722b9676f78__positioner", "popup": "_84e8f597bcf683b8__popup", "arrow": "ca05d3eb89321fcd__arrow", "arrow-fill": "_12d8edd9eb946b5f__arrow-fill", "arrow-stroke": "_6ddab482bd929dad__arrow-stroke", "description": "_42cb9ed02a2f0782__description", "backdrop": "e4d544aa033f05c6__backdrop" };
-
-// packages/ui/src/popover/description.tsx
 import { jsx } from "react/jsx-runtime";
 var Description = forwardRef(
-  function PopoverDescription({ className, children, render, ...props }, ref) {
+  function PopoverDescription({ children, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       Text,
       {
         ref,
         variant: "body-md",
-        render: /* @__PURE__ */ jsx(_Popover.Description, { render, ...props }),
-        className: clsx(style_default.description, className),
+        render: /* @__PURE__ */ jsx(_Popover.Description, { ...props }),
         children
       }
     );

package/build-module/popover/description.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/popover/description.tsx", "../../src/popover/style.module.css"],
-  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport styles from './style.module.css';\nimport type { DescriptionProps } from './types';\n\n/**\n * Renders an optional paragraph that describes the popover content.\n *\n * The rendered element is linked to the popup via `aria-describedby`.\n * Uses the `body-md` text variant by default.\n */\nconst Description = forwardRef< HTMLParagraphElement, DescriptionProps >(\n\tfunction PopoverDescription(\n\t\t{ className, children, render, ...props },\n\t\tref\n\t) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"body-md\"\n\t\t\t\trender={\n\t\t\t\t\t<_Popover.Description render={ render } { ...props } />\n\t\t\t\t}\n\t\t\t\tclassName={ clsx( styles.description, className ) }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n\nexport { Description };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='3b666a02be']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"3b666a02be\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-font-size-md,13px);line-height:var(--wpds-font-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#6d6d6d)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"positioner\":\"_10450722b9676f78__positioner\",\"popup\":\"_84e8f597bcf683b8__popup\",\"arrow\":\"ca05d3eb89321fcd__arrow\",\"arrow-fill\":\"_12d8edd9eb946b5f__arrow-fill\",\"arrow-stroke\":\"_6ddab482bd929dad__arrow-stroke\",\"description\":\"_42cb9ed02a2f0782__description\",\"backdrop\":\"e4d544aa033f05c6__backdrop\"};\n"],
-  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,YAAY;;;ACHrB,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,0+CAAs/C,CAAC;AACjiD,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,cAAa,iCAAgC,SAAQ,4BAA2B,SAAQ,2BAA0B,cAAa,iCAAgC,gBAAe,mCAAkC,eAAc,kCAAiC,YAAW,6BAA4B;;;ADiBjT;AAVL,IAAM,cAAc;AAAA,EACnB,SAAS,mBACR,EAAE,WAAW,UAAU,QAAQ,GAAG,MAAM,GACxC,KACC;AACD,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR,QACC,oBAAC,SAAS,aAAT,EAAqB,QAAoB,GAAG,OAAQ;AAAA,QAEtD,WAAY,KAAM,cAAO,aAAa,SAAU;AAAA,QAE9C;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
+  "sources": ["../../src/popover/description.tsx"],
+  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport { forwardRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport type { DescriptionProps } from './types';\n\n/**\n * Renders an optional paragraph that describes the popover content.\n *\n * The rendered element is linked to the popup via `aria-describedby`.\n */\nconst Description = forwardRef< HTMLParagraphElement, DescriptionProps >(\n\tfunction PopoverDescription( { children, ...props }, ref ) {\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"body-md\"\n\t\t\t\trender={ <_Popover.Description { ...props } /> }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n\nexport { Description };\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAcR;AANb,IAAM,cAAc;AAAA,EACnB,SAAS,mBAAoB,EAAE,UAAU,GAAG,MAAM,GAAG,KAAM;AAC1D,WACC;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,SAAQ;AAAA,QACR,QAAS,oBAAC,SAAS,aAAT,EAAuB,GAAG,OAAQ;AAAA,QAE1C;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
   "names": []
 }

package/build-module/popover/index.mjs

@@ -3,6 +3,7 @@ import { Arrow } from "./arrow.mjs";
 import { Close } from "./close.mjs";
 import { Description } from "./description.mjs";
 import { Popup } from "./popup.mjs";
+import { Portal } from "./portal.mjs";
 import { Root } from "./root.mjs";
 import { Title } from "./title.mjs";
 import { Trigger } from "./trigger.mjs";
@@ -11,6 +12,7 @@ export {
   Close,
   Description,
   Popup,
+  Portal,
   Root,
   Title,
   Trigger

package/build-module/popover/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/popover/index.ts"],
-  "sourcesContent": ["import { Arrow } from './arrow';\nimport { Close } from './close';\nimport { Description } from './description';\nimport { Popup } from './popup';\nimport { Root } from './root';\nimport { Title } from './title';\nimport { Trigger } from './trigger';\n\nexport { Arrow, Close, Description, Popup, Root, Title, Trigger };\n"],
-  "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,eAAe;",
+  "sourcesContent": ["import { Arrow } from './arrow';\nimport { Close } from './close';\nimport { Description } from './description';\nimport { Popup } from './popup';\nimport { Portal } from './portal';\nimport { Root } from './root';\nimport { Title } from './title';\nimport { Trigger } from './trigger';\n\nexport { Arrow, Close, Description, Portal, Popup, Root, Title, Trigger };\n"],
+  "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,aAAa;AACtB,SAAS,eAAe;",
   "names": []
 }

package/build-module/popover/popup.mjs

@@ -19,19 +19,21 @@ var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" };
 
 // packages/ui/src/popover/popup.tsx
 import { useDeprioritizedInitialFocus } from "../utils/use-deprioritized-initial-focus.mjs";
+import { renderPortalWithChildren } from "../utils/render-portal-with-children.mjs";
 import { PopoverValidationProvider } from "./context.mjs";
+import { Portal } from "./portal.mjs";
 
 // packages/ui/src/popover/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='3b666a02be']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='cc851ac208']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "3b666a02be");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-md,13px);line-height:var(--wpds-font-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#6d6d6d)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}'));
+  style.setAttribute("data-wp-hash", "cc851ac208");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:#0000}@media (forced-colors:active){._84e8f597bcf683b8__popup,.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:CanvasText}}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}._6d7e4729cd96960e__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}'));
   document.head.appendChild(style);
 }
-var style_default = { "positioner": "_10450722b9676f78__positioner", "popup": "_84e8f597bcf683b8__popup", "arrow": "ca05d3eb89321fcd__arrow", "arrow-fill": "_12d8edd9eb946b5f__arrow-fill", "arrow-stroke": "_6ddab482bd929dad__arrow-stroke", "description": "_42cb9ed02a2f0782__description", "backdrop": "e4d544aa033f05c6__backdrop" };
+var style_default = { "positioner": "_10450722b9676f78__positioner", "popup": "_84e8f597bcf683b8__popup", "backdrop": "e4d544aa033f05c6__backdrop", "arrow": "ca05d3eb89321fcd__arrow", "arrow-fill": "_12d8edd9eb946b5f__arrow-fill", "arrow-stroke": "_6ddab482bd929dad__arrow-stroke", "title": "_6d7e4729cd96960e__title" };
 
 // packages/ui/src/popover/popup.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ThemeProvider = unlock(themePrivateApis).ThemeProvider;
 var CLOSE_ATTR = "data-wp-ui-popover-close";
 var Popup = forwardRef(function PopoverPopup({
@@ -46,19 +48,18 @@ var Popup = forwardRef(function PopoverPopup({
   collisionAvoidance,
   collisionBoundary,
   collisionPadding,
-  container,
+  portal,
   finalFocus,
   initialFocus,
   side = "bottom",
   sideOffset = 8,
   sticky,
-  style,
   variant = "default",
   ...props
 }, ref) {
   const { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus({
     initialFocus,
-    deprioritizedAttribute: CLOSE_ATTR
+    deprioritizedAttributes: [CLOSE_ATTR]
   });
   const mergedPopupRef = useMergeRefs([ref, popupRef]);
   const backdropElement = backdrop ? /* @__PURE__ */ jsx(_Popover.Backdrop, { className: style_default.backdrop }) : null;
@@ -75,29 +76,28 @@ var Popup = forwardRef(function PopoverPopup({
       side,
       sideOffset,
       sticky,
-      style,
-      className: clsx(
-        resets_default["box-sizing"],
-        style_default.positioner,
-        className
-      ),
+      className: clsx(resets_default["box-sizing"], style_default.positioner),
       children: /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(
         _Popover.Popup,
         {
           ref: mergedPopupRef,
           initialFocus: resolvedInitialFocus,
           finalFocus,
-          className: clsx(variant !== "unstyled" && style_default.popup),
+          className: clsx(
+            variant !== "unstyled" && style_default.popup,
+            className
+          ),
           ...props,
           children: /* @__PURE__ */ jsx(PopoverValidationProvider, { children })
         }
       ) })
     }
   );
-  return /* @__PURE__ */ jsxs(_Popover.Portal, { container, children: [
+  const portalChildren = /* @__PURE__ */ jsxs(Fragment, { children: [
     backdropElement,
     positioner
   ] });
+  return renderPortalWithChildren(portal, /* @__PURE__ */ jsx(Portal, {}), portalChildren);
 });
 export {
   Popup

package/build-module/popover/popup.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/popover/popup.tsx", "../../src/utils/css/resets.module.css", "../../src/popover/style.module.css"],
-  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../lock-unlock';\nimport resetStyles from '../utils/css/resets.module.css';\nimport { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';\nimport { PopoverValidationProvider } from './context';\nimport styles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst CLOSE_ATTR = 'data-wp-ui-popover-close';\n\n/**\n * Renders the floating popup container for the popover content.\n *\n * Handles portal rendering, positioning relative to the anchor, collision\n * avoidance, focus management, and optional backdrop. Supply a `container`\n * element for cross-document scenarios such as iframes.\n */\nconst Popup = forwardRef< HTMLDivElement, PopupProps >( function PopoverPopup(\n\t{\n\t\talign = 'center',\n\t\talignOffset,\n\t\tanchor,\n\t\t// Matches the popup's border-radius (--wpds-border-radius-md).\n\t\tarrowPadding = 8,\n\t\tbackdrop = false,\n\t\tchildren,\n\t\tclassName,\n\t\tcollisionAvoidance,\n\t\tcollisionBoundary,\n\t\tcollisionPadding,\n\t\tcontainer,\n\t\tfinalFocus,\n\t\tinitialFocus,\n\t\tside = 'bottom',\n\t\tsideOffset = 8,\n\t\tsticky,\n\t\tstyle,\n\t\tvariant = 'default',\n\t\t...props\n\t},\n\tref\n) {\n\tconst { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus( {\n\t\tinitialFocus,\n\t\tdeprioritizedAttribute: CLOSE_ATTR,\n\t} );\n\tconst mergedPopupRef = useMergeRefs( [ ref, popupRef ] );\n\n\tconst backdropElement = backdrop ? (\n\t\t<_Popover.Backdrop className={ styles.backdrop } />\n\t) : null;\n\n\tconst positioner = (\n\t\t<_Popover.Positioner\n\t\t\talign={ align }\n\t\t\talignOffset={ alignOffset }\n\t\t\tanchor={ anchor }\n\t\t\tarrowPadding={ arrowPadding }\n\t\t\tcollisionAvoidance={ collisionAvoidance }\n\t\t\tcollisionBoundary={ collisionBoundary }\n\t\t\tcollisionPadding={ collisionPadding }\n\t\t\tside={ side }\n\t\t\tsideOffset={ sideOffset }\n\t\t\tsticky={ sticky }\n\t\t\tstyle={ style }\n\t\t\tclassName={ clsx(\n\t\t\t\tresetStyles[ 'box-sizing' ],\n\t\t\t\tstyles.positioner,\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<ThemeProvider>\n\t\t\t\t<_Popover.Popup\n\t\t\t\t\tref={ mergedPopupRef }\n\t\t\t\t\tinitialFocus={ resolvedInitialFocus }\n\t\t\t\t\tfinalFocus={ finalFocus }\n\t\t\t\t\tclassName={ clsx( variant !== 'unstyled' && styles.popup ) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t<PopoverValidationProvider>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</PopoverValidationProvider>\n\t\t\t\t</_Popover.Popup>\n\t\t\t</ThemeProvider>\n\t\t</_Popover.Positioner>\n\t);\n\n\treturn (\n\t\t<_Popover.Portal container={ container }>\n\t\t\t{ backdropElement }\n\t\t\t{ positioner }\n\t\t</_Popover.Portal>\n\t);\n} );\n\nexport { Popup };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e3ae230cea']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e3ae230cea\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='3b666a02be']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"3b666a02be\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-font-size-md,13px);line-height:var(--wpds-font-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0)}._42cb9ed02a2f0782__description{color:var(--wpds-color-fg-content-neutral-weak,#6d6d6d)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"positioner\":\"_10450722b9676f78__positioner\",\"popup\":\"_84e8f597bcf683b8__popup\",\"arrow\":\"ca05d3eb89321fcd__arrow\",\"arrow-fill\":\"_12d8edd9eb946b5f__arrow-fill\",\"arrow-stroke\":\"_6ddab482bd929dad__arrow-stroke\",\"description\":\"_42cb9ed02a2f0782__description\",\"backdrop\":\"e4d544aa033f05c6__backdrop\"};\n"],
-  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B;AAAA,EAEC,eAAe;AAAA,OACT;AACP,SAAS,cAAc;;;ACRvB,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,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ADI5D,SAAS,oCAAoC;AAC7C,SAAS,iCAAiC;;;AEX1C,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,0+CAAs/C,CAAC;AACjiD,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,cAAa,iCAAgC,SAAQ,4BAA2B,SAAQ,2BAA0B,cAAa,iCAAgC,gBAAe,mCAAkC,eAAc,kCAAiC,YAAW,6BAA4B;;;AFqDpT,cAuCA,YAvCA;AA5CF,IAAM,gBACL,OAAQ,gBAAiB,EAAE;AAE5B,IAAM,aAAa;AASnB,IAAM,QAAQ,WAA0C,SAAS,aAChE;AAAA,EACC,QAAQ;AAAA,EACR;AAAA,EACA;AAAA;AAAA,EAEA,eAAe;AAAA,EACf,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACJ,GACA,KACC;AACD,QAAM,EAAE,sBAAsB,SAAS,IAAI,6BAA8B;AAAA,IACxE;AAAA,IACA,wBAAwB;AAAA,EACzB,CAAE;AACF,QAAM,iBAAiB,aAAc,CAAE,KAAK,QAAS,CAAE;AAEvD,QAAM,kBAAkB,WACvB,oBAAC,SAAS,UAAT,EAAkB,WAAY,cAAO,UAAW,IAC9C;AAEJ,QAAM,aACL;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAY;AAAA,QACX,eAAa,YAAa;AAAA,QAC1B,cAAO;AAAA,QACP;AAAA,MACD;AAAA,MAEA,8BAAC,iBACA;AAAA,QAAC,SAAS;AAAA,QAAT;AAAA,UACA,KAAM;AAAA,UACN,cAAe;AAAA,UACf;AAAA,UACA,WAAY,KAAM,YAAY,cAAc,cAAO,KAAM;AAAA,UACvD,GAAG;AAAA,UAEL,8BAAC,6BACE,UACH;AAAA;AAAA,MACD,GACD;AAAA;AAAA,EACD;AAGD,SACC,qBAAC,SAAS,QAAT,EAAgB,WACd;AAAA;AAAA,IACA;AAAA,KACH;AAEF,CAAE;",
+  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport clsx from 'clsx';\nimport { forwardRef } from '@wordpress/element';\nimport { useMergeRefs } from '@wordpress/compose';\nimport {\n\ttype ThemeProvider as ThemeProviderType,\n\tprivateApis as themePrivateApis,\n} from '@wordpress/theme';\nimport { unlock } from '../lock-unlock';\nimport resetStyles from '../utils/css/resets.module.css';\nimport { useDeprioritizedInitialFocus } from '../utils/use-deprioritized-initial-focus';\nimport { renderPortalWithChildren } from '../utils/render-portal-with-children';\nimport { PopoverValidationProvider } from './context';\nimport { Portal } from './portal';\nimport styles from './style.module.css';\nimport type { PopupProps } from './types';\n\nconst ThemeProvider: typeof ThemeProviderType =\n\tunlock( themePrivateApis ).ThemeProvider;\n\nconst CLOSE_ATTR = 'data-wp-ui-popover-close';\n\n/**\n * Renders the floating popup container for the popover content.\n *\n * Handles portal rendering, positioning relative to the anchor, collision\n * avoidance, focus management, and optional backdrop. Use\n * `portal={ <Popover.Portal container={ ... } /> }` for cross-document\n * scenarios such as iframes.\n */\nconst Popup = forwardRef< HTMLDivElement, PopupProps >( function PopoverPopup(\n\t{\n\t\talign = 'center',\n\t\talignOffset,\n\t\tanchor,\n\t\t// Matches the popup's border-radius (--wpds-border-radius-md).\n\t\tarrowPadding = 8,\n\t\tbackdrop = false,\n\t\tchildren,\n\t\tclassName,\n\t\tcollisionAvoidance,\n\t\tcollisionBoundary,\n\t\tcollisionPadding,\n\t\tportal,\n\t\tfinalFocus,\n\t\tinitialFocus,\n\t\tside = 'bottom',\n\t\tsideOffset = 8,\n\t\tsticky,\n\t\tvariant = 'default',\n\t\t...props\n\t},\n\tref\n) {\n\tconst { resolvedInitialFocus, popupRef } = useDeprioritizedInitialFocus( {\n\t\tinitialFocus,\n\t\tdeprioritizedAttributes: [ CLOSE_ATTR ],\n\t} );\n\tconst mergedPopupRef = useMergeRefs( [ ref, popupRef ] );\n\n\tconst backdropElement = backdrop ? (\n\t\t<_Popover.Backdrop className={ styles.backdrop } />\n\t) : null;\n\n\tconst positioner = (\n\t\t<_Popover.Positioner\n\t\t\talign={ align }\n\t\t\talignOffset={ alignOffset }\n\t\t\tanchor={ anchor }\n\t\t\tarrowPadding={ arrowPadding }\n\t\t\tcollisionAvoidance={ collisionAvoidance }\n\t\t\tcollisionBoundary={ collisionBoundary }\n\t\t\tcollisionPadding={ collisionPadding }\n\t\t\tside={ side }\n\t\t\tsideOffset={ sideOffset }\n\t\t\tsticky={ sticky }\n\t\t\tclassName={ clsx( resetStyles[ 'box-sizing' ], styles.positioner ) }\n\t\t>\n\t\t\t<ThemeProvider>\n\t\t\t\t<_Popover.Popup\n\t\t\t\t\tref={ mergedPopupRef }\n\t\t\t\t\tinitialFocus={ resolvedInitialFocus }\n\t\t\t\t\tfinalFocus={ finalFocus }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\tvariant !== 'unstyled' && styles.popup,\n\t\t\t\t\t\tclassName\n\t\t\t\t\t) }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t<PopoverValidationProvider>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</PopoverValidationProvider>\n\t\t\t\t</_Popover.Popup>\n\t\t\t</ThemeProvider>\n\t\t</_Popover.Positioner>\n\t);\n\n\tconst portalChildren = (\n\t\t<>\n\t\t\t{ backdropElement }\n\t\t\t{ positioner }\n\t\t</>\n\t);\n\n\treturn renderPortalWithChildren( portal, <Portal />, portalChildren );\n} );\n\nexport { Popup };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e3ae230cea']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e3ae230cea\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"box-sizing\":\"_336cd3e4e743482f__box-sizing\"};\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='cc851ac208']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"cc851ac208\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:#0000}@media (forced-colors:active){._84e8f597bcf683b8__popup,.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:CanvasText}}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}._6d7e4729cd96960e__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"positioner\":\"_10450722b9676f78__positioner\",\"popup\":\"_84e8f597bcf683b8__popup\",\"backdrop\":\"e4d544aa033f05c6__backdrop\",\"arrow\":\"ca05d3eb89321fcd__arrow\",\"arrow-fill\":\"_12d8edd9eb946b5f__arrow-fill\",\"arrow-stroke\":\"_6ddab482bd929dad__arrow-stroke\",\"title\":\"_6d7e4729cd96960e__title\"};\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B;AAAA,EAEC,eAAe;AAAA,OACT;AACP,SAAS,cAAc;;;ACRvB,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,kMAAkM,CAAC;AAC7O,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,iBAAQ,EAAC,cAAa,gCAA+B;;;ADI5D,SAAS,oCAAoC;AAC7C,SAAS,gCAAgC;AACzC,SAAS,iCAAiC;AAC1C,SAAS,cAAc;;;AEbvB,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,uwDAAmxD,CAAC;AAC9zD,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,cAAa,iCAAgC,SAAQ,4BAA2B,YAAW,8BAA6B,SAAQ,2BAA0B,cAAa,iCAAgC,gBAAe,mCAAkC,SAAQ,2BAA0B;;;AFuDxS,SAqCA,UArCA,KAqCA,YArCA;AA5CF,IAAM,gBACL,OAAQ,gBAAiB,EAAE;AAE5B,IAAM,aAAa;AAUnB,IAAM,QAAQ,WAA0C,SAAS,aAChE;AAAA,EACC,QAAQ;AAAA,EACR;AAAA,EACA;AAAA;AAAA,EAEA,eAAe;AAAA,EACf,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACJ,GACA,KACC;AACD,QAAM,EAAE,sBAAsB,SAAS,IAAI,6BAA8B;AAAA,IACxE;AAAA,IACA,yBAAyB,CAAE,UAAW;AAAA,EACvC,CAAE;AACF,QAAM,iBAAiB,aAAc,CAAE,KAAK,QAAS,CAAE;AAEvD,QAAM,kBAAkB,WACvB,oBAAC,SAAS,UAAT,EAAkB,WAAY,cAAO,UAAW,IAC9C;AAEJ,QAAM,aACL;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAY,KAAM,eAAa,YAAa,GAAG,cAAO,UAAW;AAAA,MAEjE,8BAAC,iBACA;AAAA,QAAC,SAAS;AAAA,QAAT;AAAA,UACA,KAAM;AAAA,UACN,cAAe;AAAA,UACf;AAAA,UACA,WAAY;AAAA,YACX,YAAY,cAAc,cAAO;AAAA,YACjC;AAAA,UACD;AAAA,UACE,GAAG;AAAA,UAEL,8BAAC,6BACE,UACH;AAAA;AAAA,MACD,GACD;AAAA;AAAA,EACD;AAGD,QAAM,iBACL,iCACG;AAAA;AAAA,IACA;AAAA,KACH;AAGD,SAAO,yBAA0B,QAAQ,oBAAC,UAAO,GAAI,cAAe;AACrE,CAAE;",
   "names": []
 }

package/build-module/popover/portal.mjs

@@ -0,0 +1,13 @@
+// packages/ui/src/popover/portal.tsx
+import { Popover as _Popover } from "@base-ui/react/popover";
+import { forwardRef } from "@wordpress/element";
+import { jsx } from "react/jsx-runtime";
+var Portal = forwardRef(
+  function PopoverPortal(props, ref) {
+    return /* @__PURE__ */ jsx(_Popover.Portal, { ref, ...props });
+  }
+);
+export {
+  Portal
+};
+//# sourceMappingURL=portal.mjs.map

package/build-module/popover/portal.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/popover/portal.tsx"],
+  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport { forwardRef } from '@wordpress/element';\nimport type { PortalProps } from './types';\n\n/**\n * Root element that portals `Popover` floating content. Pass to\n * `Popover.Popup`'s `portal` prop (for example `container` for\n * cross-document rendering). When `portal` is omitted, `Popover.Popup` uses\n * this component with default props.\n */\nconst Portal = forwardRef< HTMLDivElement, PortalProps >(\n\tfunction PopoverPortal( props, ref ) {\n\t\treturn <_Popover.Portal ref={ ref } { ...props } />;\n\t}\n);\n\nexport { Portal };\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB;AAWlB;AAFT,IAAM,SAAS;AAAA,EACd,SAAS,cAAe,OAAO,KAAM;AACpC,WAAO,oBAAC,SAAS,QAAT,EAAgB,KAAc,GAAG,OAAQ;AAAA,EAClD;AACD;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/popover/root.tsx"],
-  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport type { RootProps } from './types';\n\n/**\n * An accessible popup anchored to a trigger element.\n *\n * Popover renders ARIA-compliant floating content that appears next to its\n * trigger. It can contain interactive content such as form controls, menus,\n * and rich descriptions.\n *\n * Compose the compound components to build a popover:\n *\n * - `Popover.Root` \u2014 provides open state and context to all sub-components.\n * - `Popover.Trigger` \u2014 the button that toggles the popup.\n * - `Popover.Popup` \u2014 the floating container (portal, positioning, collision\n *   avoidance).\n * - `Popover.Arrow` \u2014 an optional arrow pointing toward the anchor.\n * - `Popover.Title` \u2014 **required** heading that labels the popover for\n *   accessibility (can be visually hidden).\n * - `Popover.Description` \u2014 optional paragraph linked via `aria-describedby`.\n * - `Popover.Close` \u2014 a button that closes the popover when clicked.\n *   **Required** when `modal` is `true` or `'trap-focus'` so that focus\n *   can cycle correctly and the user can dismiss the popover.\n *\n * ```jsx\n * <Popover.Root>\n *   <Popover.Trigger>Open</Popover.Trigger>\n *   <Popover.Popup>\n *     <Popover.Arrow />\n *     <Popover.Title>Popover title</Popover.Title>\n *     <Popover.Description>Popover description</Popover.Description>\n *     <Popover.Close>Close</Popover.Close>\n *   </Popover.Popup>\n * </Popover.Root>\n * ```\n */\nfunction Root( props: RootProps ) {\n\treturn <_Popover.Root { ...props } />;\n}\n\nexport { Root };\n"],
+  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport type { RootProps } from './types';\n\n/**\n * An accessible popup anchored to a trigger element.\n *\n * Popover renders ARIA-compliant floating content that appears next to its\n * trigger. It can contain interactive content such as form controls, menus,\n * and rich descriptions.\n *\n * Compose the compound components to build a popover:\n *\n * - `Popover.Root` \u2014 provides open state and context to all sub-components.\n * - `Popover.Trigger` \u2014 the button that toggles the popup.\n * - `Popover.Popup` \u2014 the floating container (positioning, collision\n *   avoidance); portals by default or via `portal={ <Popover.Portal /> }`.\n * - `Popover.Arrow` \u2014 an optional arrow pointing toward the anchor.\n * - `Popover.Title` \u2014 **required** heading that labels the popover for\n *   accessibility (can be visually hidden).\n * - `Popover.Description` \u2014 optional paragraph linked via `aria-describedby`.\n * - `Popover.Close` \u2014 a button that closes the popover when clicked.\n *   **Required** when `modal` is `true` or `'trap-focus'` so that focus\n *   can cycle correctly and the user can dismiss the popover.\n *\n * ```jsx\n * <Popover.Root>\n *   <Popover.Trigger>Open</Popover.Trigger>\n *   <Popover.Popup>\n *     <Popover.Arrow />\n *     <Popover.Title>Popover title</Popover.Title>\n *     <Popover.Description>Popover description</Popover.Description>\n *     <Popover.Close>Close</Popover.Close>\n *   </Popover.Popup>\n * </Popover.Root>\n * ```\n */\nfunction Root( props: RootProps ) {\n\treturn <_Popover.Root { ...props } />;\n}\n\nexport { Root };\n"],
   "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AAqC5B;AADR,SAAS,KAAM,OAAmB;AACjC,SAAO,oBAAC,SAAS,MAAT,EAAgB,GAAG,OAAQ;AACpC;",
   "names": []
 }

package/build-module/popover/title.mjs

@@ -1,25 +1,39 @@
 // packages/ui/src/popover/title.tsx
 import { Popover as _Popover } from "@base-ui/react/popover";
 import { useMergeRefs } from "@wordpress/compose";
-import { forwardRef, useLayoutEffect, useRef } from "@wordpress/element";
+import { forwardRef, useEffect, useRef } from "@wordpress/element";
 import { Text } from "../text/index.mjs";
 import { usePopoverValidationContext } from "./context.mjs";
+
+// packages/ui/src/popover/style.module.css
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='cc851ac208']")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-wp-hash", "cc851ac208");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:#0000}@media (forced-colors:active){._84e8f597bcf683b8__popup,.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:CanvasText}}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}._6d7e4729cd96960e__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}'));
+  document.head.appendChild(style);
+}
+var style_default = { "positioner": "_10450722b9676f78__positioner", "popup": "_84e8f597bcf683b8__popup", "backdrop": "e4d544aa033f05c6__backdrop", "arrow": "ca05d3eb89321fcd__arrow", "arrow-fill": "_12d8edd9eb946b5f__arrow-fill", "arrow-stroke": "_6ddab482bd929dad__arrow-stroke", "title": "_6d7e4729cd96960e__title" };
+
+// packages/ui/src/popover/title.tsx
 import { jsx } from "react/jsx-runtime";
 var Title = forwardRef(
-  function PopoverTitle({ className, children, render, ...props }, forwardedRef) {
+  function PopoverTitle({ children, ...props }, forwardedRef) {
     const validationContext = usePopoverValidationContext();
     const internalRef = useRef(null);
     const mergedRef = useMergeRefs([internalRef, forwardedRef]);
-    useLayoutEffect(() => {
-      validationContext?.registerTitle(internalRef.current);
+    useEffect(() => {
+      if (validationContext) {
+        return validationContext.registerTitle(internalRef.current);
+      }
+      return void 0;
     }, [validationContext]);
     return /* @__PURE__ */ jsx(
       Text,
       {
         ref: mergedRef,
         variant: "heading-xl",
-        render: /* @__PURE__ */ jsx(_Popover.Title, { render, ...props }),
-        className,
+        render: /* @__PURE__ */ jsx(_Popover.Title, { ...props }),
+        className: style_default.title,
         children
       }
     );

package/build-module/popover/title.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/popover/title.tsx"],
-  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport { usePopoverValidationContext } from './context';\nimport type { TitleProps } from './types';\n\n/**\n * Renders a heading that labels the popover for accessibility.\n *\n * **Required** \u2014 every popover must include a `Popover.Title`, even if\n * visually hidden. The rendered element is linked to the popup via\n * `aria-labelledby`. Uses the `heading-xl` text variant, matching Dialog.\n *\n * To visually hide the title while keeping it accessible, wrap it with\n * `VisuallyHidden` using the `render` prop:\n *\n * ```jsx\n * <VisuallyHidden render={ <Popover.Title /> }>\n *   Accessible title text\n * </VisuallyHidden>\n * ```\n */\nconst Title = forwardRef< HTMLHeadingElement, TitleProps >(\n\tfunction PopoverTitle(\n\t\t{ className, children, render, ...props },\n\t\tforwardedRef\n\t) {\n\t\tconst validationContext = usePopoverValidationContext();\n\t\tconst internalRef = useRef< HTMLHeadingElement >( null );\n\t\tconst mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );\n\n\t\tuseLayoutEffect( () => {\n\t\t\tvalidationContext?.registerTitle( internalRef.current );\n\t\t}, [ validationContext ] );\n\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ mergedRef }\n\t\t\t\tvariant=\"heading-xl\"\n\t\t\t\trender={ <_Popover.Title render={ render } { ...props } /> }\n\t\t\t\tclassName={ className }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n\nexport { Title };\n"],
-  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,YAAY,iBAAiB,cAAc;AACpD,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAoC/B;AAjBb,IAAM,QAAQ;AAAA,EACb,SAAS,aACR,EAAE,WAAW,UAAU,QAAQ,GAAG,MAAM,GACxC,cACC;AACD,UAAM,oBAAoB,4BAA4B;AACtD,UAAM,cAAc,OAA8B,IAAK;AACvD,UAAM,YAAY,aAAc,CAAE,aAAa,YAAa,CAAE;AAE9D,oBAAiB,MAAM;AACtB,yBAAmB,cAAe,YAAY,OAAQ;AAAA,IACvD,GAAG,CAAE,iBAAkB,CAAE;AAEzB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAS,oBAAC,SAAS,OAAT,EAAe,QAAoB,GAAG,OAAQ;AAAA,QACxD;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
+  "sources": ["../../src/popover/title.tsx", "../../src/popover/style.module.css"],
+  "sourcesContent": ["import { Popover as _Popover } from '@base-ui/react/popover';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useEffect, useRef } from '@wordpress/element';\nimport { Text } from '../text';\nimport { usePopoverValidationContext } from './context';\nimport styles from './style.module.css';\nimport type { TitleProps } from './types';\n\n/**\n * Renders a heading that labels the popover for accessibility.\n *\n * **Required** \u2014 every popover must include a `Popover.Title`, even if\n * visually hidden. The rendered element is linked to the popup via\n * `aria-labelledby`. Uses the `heading-xl` text variant, matching Dialog.\n *\n * To visually hide the title while keeping it accessible, wrap it with\n * `VisuallyHidden` using the `render` prop:\n *\n * ```jsx\n * <VisuallyHidden render={ <Popover.Title /> }>\n *   Accessible title text\n * </VisuallyHidden>\n * ```\n */\nconst Title = forwardRef< HTMLHeadingElement, TitleProps >(\n\tfunction PopoverTitle( { children, ...props }, forwardedRef ) {\n\t\tconst validationContext = usePopoverValidationContext();\n\t\tconst internalRef = useRef< HTMLHeadingElement >( null );\n\t\tconst mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );\n\n\t\tuseEffect( () => {\n\t\t\tif ( validationContext ) {\n\t\t\t\treturn validationContext.registerTitle( internalRef.current );\n\t\t\t}\n\t\t\treturn undefined;\n\t\t}, [ validationContext ] );\n\n\t\treturn (\n\t\t\t<Text\n\t\t\t\tref={ mergedRef }\n\t\t\t\tvariant=\"heading-xl\"\n\t\t\t\trender={ <_Popover.Title { ...props } /> }\n\t\t\t\tclassName={ styles.title }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Text>\n\t\t);\n\t}\n);\n\nexport { Title };\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='cc851ac208']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"cc851ac208\");\n\tstyle.appendChild(document.createTextNode(\"@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._10450722b9676f78__positioner{z-index:var(--wp-ui-popover-z-index,initial)}._84e8f597bcf683b8__popup{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#dbdbdb);border-radius:var(--wpds-border-radius-md,4px);box-shadow:var(--wpds-elevation-md,0 2px 3px 0 #0000000d,0 4px 5px 0 #0000000a,0 12px 12px 0 #00000008,0 16px 16px 0 #00000005);color:var(--wpds-color-fg-content-neutral,#1e1e1e);font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,\\\"Segoe UI\\\",\\\"Roboto\\\",\\\"Oxygen-Sans\\\",\\\"Ubuntu\\\",\\\"Cantarell\\\",\\\"Helvetica Neue\\\",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);line-height:var(--wpds-typography-line-height-md,24px);outline:0;padding:var(--wpds-dimension-padding-lg,16px)}.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:#0000}@media (forced-colors:active){._84e8f597bcf683b8__popup,.e4d544aa033f05c6__backdrop~* ._84e8f597bcf683b8__popup{border-color:CanvasText}}.ca05d3eb89321fcd__arrow{display:flex;&[data-side=top]{bottom:-8px;rotate:180deg}&[data-side=bottom]{rotate:0deg;top:-8px}&[data-side=left]{inset-inline-end:-13px;rotate:90deg}&[data-side=right]{inset-inline-start:-13px;rotate:-90deg}}._12d8edd9eb946b5f__arrow-fill{fill:var(--wpds-color-bg-surface-neutral-strong,#fff)}._6ddab482bd929dad__arrow-stroke{fill:var(--wpds-color-stroke-surface-neutral,#dbdbdb)}._6d7e4729cd96960e__title{--_gcd-heading-color:var(--wpds-color-fg-content-neutral,#1e1e1e);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}.e4d544aa033f05c6__backdrop{background-color:#00000026;inset:0;position:fixed;z-index:var(--wp-ui-popover-z-index,initial)}}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"positioner\":\"_10450722b9676f78__positioner\",\"popup\":\"_84e8f597bcf683b8__popup\",\"backdrop\":\"e4d544aa033f05c6__backdrop\",\"arrow\":\"ca05d3eb89321fcd__arrow\",\"arrow-fill\":\"_12d8edd9eb946b5f__arrow-fill\",\"arrow-stroke\":\"_6ddab482bd929dad__arrow-stroke\",\"title\":\"_6d7e4729cd96960e__title\"};\n"],
+  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,YAAY,WAAW,cAAc;AAC9C,SAAS,YAAY;AACrB,SAAS,mCAAmC;;;ACJ5C,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,uwDAAmxD,CAAC;AAC9zD,WAAS,KAAK,YAAY,KAAK;AAChC;AACA,IAAO,gBAAQ,EAAC,cAAa,iCAAgC,SAAQ,4BAA2B,YAAW,8BAA6B,SAAQ,2BAA0B,cAAa,iCAAgC,gBAAe,mCAAkC,SAAQ,2BAA0B;;;ADmC7R;AAjBb,IAAM,QAAQ;AAAA,EACb,SAAS,aAAc,EAAE,UAAU,GAAG,MAAM,GAAG,cAAe;AAC7D,UAAM,oBAAoB,4BAA4B;AACtD,UAAM,cAAc,OAA8B,IAAK;AACvD,UAAM,YAAY,aAAc,CAAE,aAAa,YAAa,CAAE;AAE9D,cAAW,MAAM;AAChB,UAAK,mBAAoB;AACxB,eAAO,kBAAkB,cAAe,YAAY,OAAQ;AAAA,MAC7D;AACA,aAAO;AAAA,IACR,GAAG,CAAE,iBAAkB,CAAE;AAEzB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,SAAQ;AAAA,QACR,QAAS,oBAAC,SAAS,OAAT,EAAiB,GAAG,OAAQ;AAAA,QACtC,WAAY,cAAO;AAAA,QAEjB;AAAA;AAAA,IACH;AAAA,EAEF;AACD;",
   "names": []
 }

package/build-module/tabs/context.mjs

@@ -3,10 +3,11 @@ import {
   createContext,
   useContext,
   useCallback,
+  useEffect,
   useMemo,
-  useRef,
-  useEffect
+  useRef
 } from "@wordpress/element";
+import { useScheduleValidation } from "../utils/use-schedule-validation.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 var VALIDATION_ENABLED = process.env.NODE_ENV !== "production";
 var TabsValidationContext = VALIDATION_ENABLED ? createContext(null) : null;
@@ -39,22 +40,15 @@ function TabsValidationProviderDev({
 }) {
   const tabCountRef = useRef(0);
   const panelCountRef = useRef(0);
-  const validationScheduledRef = useRef(null);
-  const scheduleValidation = useCallback(() => {
-    if (validationScheduledRef.current) {
-      clearTimeout(validationScheduledRef.current);
+  const scheduleValidation = useScheduleValidation(() => {
+    const tabCount = tabCountRef.current;
+    const panelCount = panelCountRef.current;
+    if (tabCount !== panelCount) {
+      throw new Error(
+        `Tabs: Tab/Panel count mismatch (${tabCount} Tabs, ${panelCount} Panels). Each Tab must be associated with exactly one Panel. Mismatched or missing associations can break screen reader navigation and violate WAI-ARIA Tabs pattern requirements.`
+      );
     }
-    validationScheduledRef.current = setTimeout(() => {
-      const tabCount = tabCountRef.current;
-      const panelCount = panelCountRef.current;
-      if (tabCount !== panelCount) {
-        throw new Error(
-          `Tabs: Tab/Panel count mismatch (${tabCount} Tabs, ${panelCount} Panels). Each Tab must be associated with exactly one Panel. Mismatched or missing associations can break screen reader navigation and violate WAI-ARIA Tabs pattern requirements.`
-        );
-      }
-      validationScheduledRef.current = null;
-    }, 0);
-  }, []);
+  });
   const registerTab = useCallback(() => {
     tabCountRef.current += 1;
     scheduleValidation();
@@ -71,13 +65,6 @@ function TabsValidationProviderDev({
       scheduleValidation();
     };
   }, [scheduleValidation]);
-  useEffect(() => {
-    return () => {
-      if (validationScheduledRef.current) {
-        clearTimeout(validationScheduledRef.current);
-      }
-    };
-  }, []);
   const contextValue = useMemo(
     () => ({
       registerTab,

package/build-module/tabs/context.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/tabs/context.tsx"],
-  "sourcesContent": ["import {\n\tcreateContext,\n\tuseContext,\n\tuseCallback,\n\tuseMemo,\n\tuseRef,\n\tuseEffect,\n} from '@wordpress/element';\n\ntype TabsValidationContextType = {\n\tregisterTab: () => () => void;\n\tregisterPanel: () => () => void;\n};\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\nconst TabsValidationContext = VALIDATION_ENABLED\n\t? createContext< TabsValidationContextType | null >( null )\n\t: ( null as unknown as React.Context< TabsValidationContextType | null > );\n\nfunction useRegisterTabDev() {\n\tconst context = useContext( TabsValidationContext );\n\n\tuseEffect( () => {\n\t\tif ( context ) {\n\t\t\treturn context.registerTab();\n\t\t}\n\t\treturn undefined;\n\t}, [ context ] );\n}\n\nfunction useRegisterTabProd() {\n\t// No-op in production.\n}\n\n/**\n * Hook that registers a Tab for count validation in development mode.\n */\nexport const useRegisterTab = VALIDATION_ENABLED\n\t? useRegisterTabDev\n\t: useRegisterTabProd;\n\nfunction useRegisterPanelDev() {\n\tconst context = useContext( TabsValidationContext );\n\n\tuseEffect( () => {\n\t\tif ( context ) {\n\t\t\treturn context.registerPanel();\n\t\t}\n\t\treturn undefined;\n\t}, [ context ] );\n}\n\nfunction useRegisterPanelProd() {\n\t// No-op in production.\n}\n\n/**\n * Hook that registers a Panel for count validation in development mode.\n */\nexport const useRegisterPanel = VALIDATION_ENABLED\n\t? useRegisterPanelDev\n\t: useRegisterPanelProd;\n\n/**\n * Development-only provider that tracks the number of registered tabs and\n * panels, and warns when the counts don't match.\n */\nfunction TabsValidationProviderDev( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst tabCountRef = useRef( 0 );\n\tconst panelCountRef = useRef( 0 );\n\tconst validationScheduledRef = useRef< ReturnType<\n\t\ttypeof setTimeout\n\t> | null >( null );\n\n\tconst scheduleValidation = useCallback( () => {\n\t\tif ( validationScheduledRef.current ) {\n\t\t\tclearTimeout( validationScheduledRef.current );\n\t\t}\n\n\t\t// Schedule validation for the next tick to allow all\n\t\t// registrations/unregistrations to complete.\n\t\tvalidationScheduledRef.current = setTimeout( () => {\n\t\t\tconst tabCount = tabCountRef.current;\n\t\t\tconst panelCount = panelCountRef.current;\n\n\t\t\tif ( tabCount !== panelCount ) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Tabs: Tab/Panel count mismatch (${ tabCount } Tabs, ${ panelCount } Panels). ` +\n\t\t\t\t\t\t`Each Tab must be associated with exactly one Panel. ` +\n\t\t\t\t\t\t`Mismatched or missing associations can break screen reader navigation ` +\n\t\t\t\t\t\t`and violate WAI-ARIA Tabs pattern requirements.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tvalidationScheduledRef.current = null;\n\t\t}, 0 );\n\t}, [] );\n\n\tconst registerTab = useCallback( () => {\n\t\ttabCountRef.current += 1;\n\t\tscheduleValidation();\n\n\t\treturn () => {\n\t\t\ttabCountRef.current -= 1;\n\t\t\tscheduleValidation();\n\t\t};\n\t}, [ scheduleValidation ] );\n\n\tconst registerPanel = useCallback( () => {\n\t\tpanelCountRef.current += 1;\n\t\tscheduleValidation();\n\n\t\treturn () => {\n\t\t\tpanelCountRef.current -= 1;\n\t\t\tscheduleValidation();\n\t\t};\n\t}, [ scheduleValidation ] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( validationScheduledRef.current ) {\n\t\t\t\tclearTimeout( validationScheduledRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tregisterTab,\n\t\t\tregisterPanel,\n\t\t} ),\n\t\t[ registerTab, registerPanel ]\n\t);\n\n\treturn (\n\t\t<TabsValidationContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</TabsValidationContext.Provider>\n\t);\n}\n\n/**\n * Production no-op provider that just renders children.\n */\nfunction TabsValidationProviderProd( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\treturn <>{ children }</>;\n}\n\n/**\n * Provider component that validates the number of tabs matches the number\n * of panels in development mode.\n *\n * In production, this component is a no-op and just renders children.\n */\nexport const TabsValidationProvider = VALIDATION_ENABLED\n\t? TabsValidationProviderDev\n\t: TabsValidationProviderProd;\n"],
-  "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAyIL,SAcM,UAdN;AA9HF,IAAM,qBAAqB,QAAQ,IAAI,aAAa;AAEpD,IAAM,wBAAwB,qBAC3B,cAAmD,IAAK,IACtD;AAEL,SAAS,oBAAoB;AAC5B,QAAM,UAAU,WAAY,qBAAsB;AAElD,YAAW,MAAM;AAChB,QAAK,SAAU;AACd,aAAO,QAAQ,YAAY;AAAA,IAC5B;AACA,WAAO;AAAA,EACR,GAAG,CAAE,OAAQ,CAAE;AAChB;AAEA,SAAS,qBAAqB;AAE9B;AAKO,IAAM,iBAAiB,qBAC3B,oBACA;AAEH,SAAS,sBAAsB;AAC9B,QAAM,UAAU,WAAY,qBAAsB;AAElD,YAAW,MAAM;AAChB,QAAK,SAAU;AACd,aAAO,QAAQ,cAAc;AAAA,IAC9B;AACA,WAAO;AAAA,EACR,GAAG,CAAE,OAAQ,CAAE;AAChB;AAEA,SAAS,uBAAuB;AAEhC;AAKO,IAAM,mBAAmB,qBAC7B,sBACA;AAMH,SAAS,0BAA2B;AAAA,EACnC;AACD,GAEI;AACH,QAAM,cAAc,OAAQ,CAAE;AAC9B,QAAM,gBAAgB,OAAQ,CAAE;AAChC,QAAM,yBAAyB,OAEnB,IAAK;AAEjB,QAAM,qBAAqB,YAAa,MAAM;AAC7C,QAAK,uBAAuB,SAAU;AACrC,mBAAc,uBAAuB,OAAQ;AAAA,IAC9C;AAIA,2BAAuB,UAAU,WAAY,MAAM;AAClD,YAAM,WAAW,YAAY;AAC7B,YAAM,aAAa,cAAc;AAEjC,UAAK,aAAa,YAAa;AAC9B,cAAM,IAAI;AAAA,UACT,mCAAoC,QAAS,UAAW,UAAW;AAAA,QAIpE;AAAA,MACD;AAEA,6BAAuB,UAAU;AAAA,IAClC,GAAG,CAAE;AAAA,EACN,GAAG,CAAC,CAAE;AAEN,QAAM,cAAc,YAAa,MAAM;AACtC,gBAAY,WAAW;AACvB,uBAAmB;AAEnB,WAAO,MAAM;AACZ,kBAAY,WAAW;AACvB,yBAAmB;AAAA,IACpB;AAAA,EACD,GAAG,CAAE,kBAAmB,CAAE;AAE1B,QAAM,gBAAgB,YAAa,MAAM;AACxC,kBAAc,WAAW;AACzB,uBAAmB;AAEnB,WAAO,MAAM;AACZ,oBAAc,WAAW;AACzB,yBAAmB;AAAA,IACpB;AAAA,EACD,GAAG,CAAE,kBAAmB,CAAE;AAE1B,YAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAK,uBAAuB,SAAU;AACrC,qBAAc,uBAAuB,OAAQ;AAAA,MAC9C;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAE,aAAa,aAAc;AAAA,EAC9B;AAEA,SACC,oBAAC,sBAAsB,UAAtB,EAA+B,OAAQ,cACrC,UACH;AAEF;AAKA,SAAS,2BAA4B;AAAA,EACpC;AACD,GAEI;AACH,SAAO,gCAAI,UAAU;AACtB;AAQO,IAAM,yBAAyB,qBACnC,4BACA;",
+  "sourcesContent": ["import {\n\tcreateContext,\n\tuseContext,\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n} from '@wordpress/element';\nimport { useScheduleValidation } from '../utils/use-schedule-validation';\n\ntype TabsValidationContextType = {\n\tregisterTab: () => () => void;\n\tregisterPanel: () => () => void;\n};\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\nconst TabsValidationContext = VALIDATION_ENABLED\n\t? createContext< TabsValidationContextType | null >( null )\n\t: ( null as unknown as React.Context< TabsValidationContextType | null > );\n\nfunction useRegisterTabDev() {\n\tconst context = useContext( TabsValidationContext );\n\n\tuseEffect( () => {\n\t\tif ( context ) {\n\t\t\treturn context.registerTab();\n\t\t}\n\t\treturn undefined;\n\t}, [ context ] );\n}\n\nfunction useRegisterTabProd() {\n\t// No-op in production.\n}\n\n/**\n * Hook that registers a Tab for count validation in development mode.\n */\nexport const useRegisterTab = VALIDATION_ENABLED\n\t? useRegisterTabDev\n\t: useRegisterTabProd;\n\nfunction useRegisterPanelDev() {\n\tconst context = useContext( TabsValidationContext );\n\n\tuseEffect( () => {\n\t\tif ( context ) {\n\t\t\treturn context.registerPanel();\n\t\t}\n\t\treturn undefined;\n\t}, [ context ] );\n}\n\nfunction useRegisterPanelProd() {\n\t// No-op in production.\n}\n\n/**\n * Hook that registers a Panel for count validation in development mode.\n */\nexport const useRegisterPanel = VALIDATION_ENABLED\n\t? useRegisterPanelDev\n\t: useRegisterPanelProd;\n\n/**\n * Development-only provider that tracks the number of registered tabs and\n * panels, and warns when the counts don't match.\n */\nfunction TabsValidationProviderDev( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\tconst tabCountRef = useRef( 0 );\n\tconst panelCountRef = useRef( 0 );\n\n\tconst scheduleValidation = useScheduleValidation( () => {\n\t\tconst tabCount = tabCountRef.current;\n\t\tconst panelCount = panelCountRef.current;\n\n\t\tif ( tabCount !== panelCount ) {\n\t\t\tthrow new Error(\n\t\t\t\t`Tabs: Tab/Panel count mismatch (${ tabCount } Tabs, ${ panelCount } Panels). ` +\n\t\t\t\t\t`Each Tab must be associated with exactly one Panel. ` +\n\t\t\t\t\t`Mismatched or missing associations can break screen reader navigation ` +\n\t\t\t\t\t`and violate WAI-ARIA Tabs pattern requirements.`\n\t\t\t);\n\t\t}\n\t} );\n\n\tconst registerTab = useCallback( () => {\n\t\ttabCountRef.current += 1;\n\t\tscheduleValidation();\n\n\t\treturn () => {\n\t\t\ttabCountRef.current -= 1;\n\t\t\tscheduleValidation();\n\t\t};\n\t}, [ scheduleValidation ] );\n\n\tconst registerPanel = useCallback( () => {\n\t\tpanelCountRef.current += 1;\n\t\tscheduleValidation();\n\n\t\treturn () => {\n\t\t\tpanelCountRef.current -= 1;\n\t\t\tscheduleValidation();\n\t\t};\n\t}, [ scheduleValidation ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tregisterTab,\n\t\t\tregisterPanel,\n\t\t} ),\n\t\t[ registerTab, registerPanel ]\n\t);\n\n\treturn (\n\t\t<TabsValidationContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</TabsValidationContext.Provider>\n\t);\n}\n\n/**\n * Production no-op provider that just renders children.\n */\nfunction TabsValidationProviderProd( {\n\tchildren,\n}: {\n\tchildren: React.ReactNode;\n} ) {\n\treturn <>{ children }</>;\n}\n\n/**\n * Provider component that validates the number of tabs matches the number\n * of panels in development mode.\n *\n * In production, this component is a no-op and just renders children.\n */\nexport const TabsValidationProvider = VALIDATION_ENABLED\n\t? TabsValidationProviderDev\n\t: TabsValidationProviderProd;\n"],
+  "mappings": ";AAAA;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,6BAA6B;AAoHpC,SAcM,UAdN;AAzGF,IAAM,qBAAqB,QAAQ,IAAI,aAAa;AAEpD,IAAM,wBAAwB,qBAC3B,cAAmD,IAAK,IACtD;AAEL,SAAS,oBAAoB;AAC5B,QAAM,UAAU,WAAY,qBAAsB;AAElD,YAAW,MAAM;AAChB,QAAK,SAAU;AACd,aAAO,QAAQ,YAAY;AAAA,IAC5B;AACA,WAAO;AAAA,EACR,GAAG,CAAE,OAAQ,CAAE;AAChB;AAEA,SAAS,qBAAqB;AAE9B;AAKO,IAAM,iBAAiB,qBAC3B,oBACA;AAEH,SAAS,sBAAsB;AAC9B,QAAM,UAAU,WAAY,qBAAsB;AAElD,YAAW,MAAM;AAChB,QAAK,SAAU;AACd,aAAO,QAAQ,cAAc;AAAA,IAC9B;AACA,WAAO;AAAA,EACR,GAAG,CAAE,OAAQ,CAAE;AAChB;AAEA,SAAS,uBAAuB;AAEhC;AAKO,IAAM,mBAAmB,qBAC7B,sBACA;AAMH,SAAS,0BAA2B;AAAA,EACnC;AACD,GAEI;AACH,QAAM,cAAc,OAAQ,CAAE;AAC9B,QAAM,gBAAgB,OAAQ,CAAE;AAEhC,QAAM,qBAAqB,sBAAuB,MAAM;AACvD,UAAM,WAAW,YAAY;AAC7B,UAAM,aAAa,cAAc;AAEjC,QAAK,aAAa,YAAa;AAC9B,YAAM,IAAI;AAAA,QACT,mCAAoC,QAAS,UAAW,UAAW;AAAA,MAIpE;AAAA,IACD;AAAA,EACD,CAAE;AAEF,QAAM,cAAc,YAAa,MAAM;AACtC,gBAAY,WAAW;AACvB,uBAAmB;AAEnB,WAAO,MAAM;AACZ,kBAAY,WAAW;AACvB,yBAAmB;AAAA,IACpB;AAAA,EACD,GAAG,CAAE,kBAAmB,CAAE;AAE1B,QAAM,gBAAgB,YAAa,MAAM;AACxC,kBAAc,WAAW;AACzB,uBAAmB;AAEnB,WAAO,MAAM;AACZ,oBAAc,WAAW;AACzB,yBAAmB;AAAA,IACpB;AAAA,EACD,GAAG,CAAE,kBAAmB,CAAE;AAE1B,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA,MACP;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAE,aAAa,aAAc;AAAA,EAC9B;AAEA,SACC,oBAAC,sBAAsB,UAAtB,EAA+B,OAAQ,cACrC,UACH;AAEF;AAKA,SAAS,2BAA4B;AAAA,EACpC;AACD,GAEI;AACH,SAAO,gCAAI,UAAU;AACtB;AAQO,IAAM,yBAAyB,qBACnC,4BACA;",
   "names": []
 }

package/build-module/tabs/list.mjs

@@ -5,13 +5,13 @@ import { Tabs as _Tabs } from "@base-ui/react/tabs";
 import { useMergeRefs } from "@wordpress/compose";
 
 // packages/ui/src/tabs/style.module.css
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='abbf48f53e']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='b8cf8136a5']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "abbf48f53e");
-  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#6c6c6c);bottom:0;height:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));left:0;translate:var(--active-tab-left) 0;width:var(--active-tab-width);z-index:1}&[data-orientation=vertical]{background-color:var(--wpds-color-bg-interactive-neutral-weak-active,#eaeaea);border-radius:var(--wpds-border-radius-sm,2px);height:var(--active-tab-height);left:50%;top:0;translate:-50% var(--active-tab-top);width:100%;z-index:0}._7313adbc8a112e90__tablist[data-select-on-move=true]:has(:focus-visible)\n		&[data-orientation=vertical]{border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));box-sizing:border-box}}.a5fd8814f195aa5e__tab{align-items:center;background:#0000;border:none;border-radius:0;box-shadow:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);cursor:var(--wpds-cursor-control,pointer);display:flex;flex:1 0 auto;font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-md,13px);font-weight:400;line-height:1.2;outline:none;padding:0;position:relative;white-space:nowrap;z-index:1;&[data-disabled]{color:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a);cursor:default;@media (forced-colors:active){color:GrayText}}&:not([data-disabled]):is(:hover,:focus-visible){color:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e)}&:after{border-radius:var(--wpds-border-radius-sm,2px);opacity:0;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));pointer-events:none;position:absolute;z-index:-1;@media not (prefers-reduced-motion){transition:opacity .1s linear}}&:focus-visible:after{opacity:1}[data-orientation=horizontal] &{height:48px;padding-inline:var(--wpds-dimension-padding-lg,16px);scroll-margin:24px;&:after{content:"";inset:var(--wpds-dimension-padding-md,12px)}}._59228b5227f38a99__is-minimal-variant[data-orientation=horizontal] &{padding-inline:0;&:after{inset-inline:round(up,var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)),1px)}}[data-orientation=vertical] &{min-height:40px;padding:var(--wpds-dimension-padding-sm,8px) var(--wpds-dimension-padding-md,12px)}[data-orientation=vertical][data-select-on-move=false] &:after{content:"";inset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}._5dfc77e6edd345d4__tab-children{align-items:center;display:flex;flex-grow:1;[data-orientation=horizontal] &{justify-content:center}[data-orientation=vertical] &{justify-content:start}}._4a20e969d15e5ac1__tab-chevron{flex-shrink:0;margin-inline-end:calc(var(--wpds-dimension-gap-xs, 4px)*-1);opacity:0;[data-orientation=horizontal] &{display:none}[role=tab]:is([aria-selected=true],:focus-visible,:hover) &{opacity:1}@media not (prefers-reduced-motion){[data-select-on-move=true]\n			[role=tab]:is([aria-selected=true])\n			&{transition:opacity .15s linear .15s}}&:dir(rtl){rotate:180deg}}._49f4bf715948892a__tabpanel{&:focus{box-shadow:none;outline:none}&:focus-visible{box-shadow:0 0 0 var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline:2px solid #0000;outline-offset:0}}}'));
+  style.setAttribute("data-wp-hash", "b8cf8136a5");
+  style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._7313adbc8a112e90__tablist{--direction-factor:1;--direction-start:left;--direction-end:right;align-items:stretch;display:flex;overflow-inline:auto;overscroll-behavior-inline:none;position:relative;&:dir(rtl){--direction-factor:-1;--direction-start:right;--direction-end:left}&[data-orientation=horizontal]{--fade-width:4rem;--fade-gradient-base:#0000 0%,#000 var(--fade-width);--fade-gradient-composed:var(--fade-gradient-base),#000 60%,#0000 50%;width:fit-content;&._9f2ac729c68a735a__is-overflowing-first{mask-image:linear-gradient(to var(--direction-end),var(--fade-gradient-base))}&._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to var(--direction-start),var(--fade-gradient-base))}&._9f2ac729c68a735a__is-overflowing-first._81c799c1f3cdd261__is-overflowing-last{mask-image:linear-gradient(to right,var(--fade-gradient-composed)),linear-gradient(to left,var(--fade-gradient-composed))}&._59228b5227f38a99__is-minimal-variant{gap:1rem}}&[data-orientation=vertical]{flex-direction:column}}._1c37dcfaa1ad8cda__indicator{@media not (prefers-reduced-motion){transition-duration:.2s;transition-property:translate,width,height,border-radius,border-block;transition-timing-function:ease-out}outline:2px solid #0000;outline-offset:-1px;pointer-events:none;position:absolute;&[data-orientation=horizontal]{background-color:var(--wpds-color-stroke-interactive-neutral-strong,#6e6e6e);bottom:0;height:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px));left:0;translate:var(--active-tab-left) 0;width:var(--active-tab-width);z-index:1}&[data-orientation=vertical]{background-color:var(--wpds-color-bg-interactive-neutral-weak-active,#ededed);border-radius:var(--wpds-border-radius-sm,2px);height:var(--active-tab-height);left:50%;top:0;translate:-50% var(--active-tab-top);width:100%;z-index:0}._7313adbc8a112e90__tablist[data-select-on-move=true]:has(:focus-visible)\n		&[data-orientation=vertical]{border:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));box-sizing:border-box}}.a5fd8814f195aa5e__tab{align-items:center;background:#0000;border:none;border-radius:0;box-shadow:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);cursor:var(--wpds-cursor-control,pointer);display:flex;flex:1 0 auto;font-family:var(--wpds-typography-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-typography-font-size-md,13px);font-weight:400;line-height:1.2;outline:none;padding:0;position:relative;white-space:nowrap;z-index:1;&[data-disabled]{color:var(--wpds-color-fg-interactive-neutral-disabled,#8d8d8d);cursor:default;@media (forced-colors:active){color:GrayText}}&:not([data-disabled]):is(:hover,:focus-visible){color:var(--wpds-color-fg-interactive-neutral-active,#1e1e1e)}&:after{border-radius:var(--wpds-border-radius-sm,2px);opacity:0;outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));pointer-events:none;position:absolute;z-index:-1;@media not (prefers-reduced-motion){transition:opacity .1s linear}}&:focus-visible:after{opacity:1}[data-orientation=horizontal] &{height:48px;padding-inline:var(--wpds-dimension-padding-lg,16px);scroll-margin:24px;&:after{content:"";inset:var(--wpds-dimension-padding-md,12px)}}._59228b5227f38a99__is-minimal-variant[data-orientation=horizontal] &{padding-inline:0;&:after{inset-inline:round(up,var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)),1px)}}[data-orientation=vertical] &{min-height:40px;padding:var(--wpds-dimension-padding-sm,8px) var(--wpds-dimension-padding-md,12px)}[data-orientation=vertical][data-select-on-move=false] &:after{content:"";inset:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}._5dfc77e6edd345d4__tab-children{align-items:center;display:flex;flex-grow:1;[data-orientation=horizontal] &{justify-content:center}[data-orientation=vertical] &{justify-content:start}}._4a20e969d15e5ac1__tab-chevron{flex-shrink:0;margin-inline-end:calc(var(--wpds-dimension-gap-xs, 4px)*-1);opacity:0;[data-orientation=horizontal] &{display:none}[role=tab]:is([aria-selected=true],:focus-visible,:hover) &{opacity:1}@media not (prefers-reduced-motion){[data-select-on-move=true]\n			[role=tab]:is([aria-selected=true])\n			&{transition:opacity .15s linear .15s}}&:dir(rtl){rotate:180deg}}}'));
   document.head.appendChild(style);
 }
-var style_default = { "tablist": "_7313adbc8a112e90__tablist", "is-overflowing-first": "_9f2ac729c68a735a__is-overflowing-first", "is-overflowing-last": "_81c799c1f3cdd261__is-overflowing-last", "is-minimal-variant": "_59228b5227f38a99__is-minimal-variant", "indicator": "_1c37dcfaa1ad8cda__indicator", "tab": "a5fd8814f195aa5e__tab", "tab-children": "_5dfc77e6edd345d4__tab-children", "tab-chevron": "_4a20e969d15e5ac1__tab-chevron", "tabpanel": "_49f4bf715948892a__tabpanel" };
+var style_default = { "tablist": "_7313adbc8a112e90__tablist", "is-overflowing-first": "_9f2ac729c68a735a__is-overflowing-first", "is-overflowing-last": "_81c799c1f3cdd261__is-overflowing-last", "is-minimal-variant": "_59228b5227f38a99__is-minimal-variant", "indicator": "_1c37dcfaa1ad8cda__indicator", "tab": "a5fd8814f195aa5e__tab", "tab-children": "_5dfc77e6edd345d4__tab-children", "tab-chevron": "_4a20e969d15e5ac1__tab-chevron" };
 
 // packages/ui/src/tabs/list.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -22,7 +22,6 @@ var List = forwardRef(
     variant = "default",
     className,
     activateOnFocus,
-    render,
     ...otherProps
   }, forwardedRef) {
     const [listEl, setListEl] = useState(null);