@wordpress/admin-ui 1.9.1-next.v.202603102151.0 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 1.10.0 (2026-03-18)
+
+- Update Title and Breadcrumbs font sizes. [#76452](https://github.com/WordPress/gutenberg/pull/76452)
+
 ## 1.9.0 (2026-03-04)
 
 ### Bug Fixes

package/build/lock-unlock.cjs

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/admin-ui/src/lock-unlock.ts
+var lock_unlock_exports = {};
+__export(lock_unlock_exports, {
+  lock: () => lock,
+  unlock: () => unlock
+});
+module.exports = __toCommonJS(lock_unlock_exports);
+var import_private_apis = require("@wordpress/private-apis");
+var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)(
+  "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
+  "@wordpress/admin-ui"
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  lock,
+  unlock
+});
+//# sourceMappingURL=lock-unlock.cjs.map

package/build/lock-unlock.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/lock-unlock.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/admin-ui'\n\t);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAAiE;AAE1D,IAAM,EAAE,MAAM,OAAO,QAC3B;AAAA,EACC;AAAA,EACA;AACD;",
+  "names": []
+}

package/build/page/header.cjs

@@ -27,6 +27,7 @@ var import_ui = require("@wordpress/ui");
 var import_sidebar_toggle_slot = require("./sidebar-toggle-slot.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Header({
+  headingLevel = 2,
   breadcrumbs,
   badges,
   title,
@@ -34,6 +35,7 @@ function Header({
   actions,
   showSidebarToggle = true
 }) {
+  const HeadingTag = `h${headingLevel}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ui.Stack,
     {
@@ -50,7 +52,7 @@ function Header({
                 className: "admin-ui-page__sidebar-toggle-slot"
               }
             ),
-            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "admin-ui-page__header-title", children: title }),
+            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HeadingTag, { className: "admin-ui-page__header-title", children: title }),
             breadcrumbs,
             badges
           ] }),

package/build/page/header.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/header.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"admin-ui-page__header\"\n\t\t\trender={ <header /> }\n\t\t>\n\t\t\t<Stack direction=\"row\" justify=\"space-between\" gap=\"sm\">\n\t\t\t\t<Stack direction=\"row\" gap=\"sm\" align=\"center\" justify=\"start\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<h2 className=\"admin-ui-page__header-title\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAAsB;AAKtB,iCAAkC;AAqBtB;AAnBG,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,QAAS,4CAAC,YAAO;AAAA,MAEjB;AAAA,qDAAC,mBAAM,WAAU,OAAM,SAAQ,iBAAgB,KAAI,MAClD;AAAA,uDAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UAAS,SAAQ,SACpD;AAAA,iCACD;AAAA,cAAC;AAAA;AAAA,gBACA,kBAAgB;AAAA,gBAChB,WAAU;AAAA;AAAA,YACX;AAAA,YAEC,SACD,4CAAC,QAAG,WAAU,+BACX,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,KAAI;AAAA,cACJ,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,WAAU;AAAA,cACV,OAAM;AAAA,cAEJ;AAAA;AAAA,UACH;AAAA,WACD;AAAA,QACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA;AAAA;AAAA,EAE5D;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\theadingLevel = 2,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst HeadingTag = `h${ headingLevel }` as const;\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"admin-ui-page__header\"\n\t\t\trender={ <header /> }\n\t\t>\n\t\t\t<Stack direction=\"row\" justify=\"space-between\" gap=\"sm\">\n\t\t\t\t<Stack direction=\"row\" gap=\"sm\" align=\"center\" justify=\"start\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<HeadingTag className=\"admin-ui-page__header-title\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</HeadingTag>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,gBAAsB;AAKtB,iCAAkC;AAwBtB;AAtBG,SAAR,OAAyB;AAAA,EAC/B,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAQI;AACH,QAAM,aAAa,IAAK,YAAa;AACrC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,QAAS,4CAAC,YAAO;AAAA,MAEjB;AAAA,qDAAC,mBAAM,WAAU,OAAM,SAAQ,iBAAgB,KAAI,MAClD;AAAA,uDAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UAAS,SAAQ,SACpD;AAAA,iCACD;AAAA,cAAC;AAAA;AAAA,gBACA,kBAAgB;AAAA,gBAChB,WAAU;AAAA;AAAA,YACX;AAAA,YAEC,SACD,4CAAC,cAAW,WAAU,+BACnB,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,KAAI;AAAA,cACJ,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,WAAU;AAAA,cACV,OAAM;AAAA,cAEJ;AAAA;AAAA,UACH;AAAA,WACD;AAAA,QACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA;AAAA;AAAA,EAE5D;AAEF;",
   "names": []
 }

package/build/page/index.cjs

@@ -39,6 +39,7 @@ var import_navigable_region = __toESM(require("../navigable-region/index.cjs"));
 var import_sidebar_toggle_slot = require("./sidebar-toggle-slot.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Page({
+  headingLevel,
   breadcrumbs,
   badges,
   title,
@@ -56,6 +57,7 @@ function Page({
     (title || breadcrumbs || badges) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_header.default,
       {
+        headingLevel,
         breadcrumbs,
         badges,
         title,

package/build/page/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAC5B,iCAAkC;AA8BhC;AA5BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAWI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\theadingLevel,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAC5B,iCAAkC;AAgChC;AA9BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAYI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,4CAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
   "names": ["clsx", "NavigableRegion", "Header"]
 }

package/build-module/lock-unlock.mjs

@@ -0,0 +1,11 @@
+// packages/admin-ui/src/lock-unlock.ts
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from "@wordpress/private-apis";
+var { lock, unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules(
+  "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.",
+  "@wordpress/admin-ui"
+);
+export {
+  lock,
+  unlock
+};
+//# sourceMappingURL=lock-unlock.mjs.map

package/build-module/lock-unlock.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/lock-unlock.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';\n\nexport const { lock, unlock } =\n\t__dangerousOptInToUnstableAPIsOnlyForCoreModules(\n\t\t'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',\n\t\t'@wordpress/admin-ui'\n\t);\n"],
+  "mappings": ";AAGA,SAAS,wDAAwD;AAE1D,IAAM,EAAE,MAAM,OAAO,IAC3B;AAAA,EACC;AAAA,EACA;AACD;",
+  "names": []
+}

package/build-module/page/header.mjs

@@ -3,6 +3,7 @@ import { Stack } from "@wordpress/ui";
 import { SidebarToggleSlot } from "./sidebar-toggle-slot.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Header({
+  headingLevel = 2,
   breadcrumbs,
   badges,
   title,
@@ -10,6 +11,7 @@ function Header({
   actions,
   showSidebarToggle = true
 }) {
+  const HeadingTag = `h${headingLevel}`;
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -26,7 +28,7 @@ function Header({
                 className: "admin-ui-page__sidebar-toggle-slot"
               }
             ),
-            title && /* @__PURE__ */ jsx("h2", { className: "admin-ui-page__header-title", children: title }),
+            title && /* @__PURE__ */ jsx(HeadingTag, { className: "admin-ui-page__header-title", children: title }),
             breadcrumbs,
             badges
           ] }),

package/build-module/page/header.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/header.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"admin-ui-page__header\"\n\t\t\trender={ <header /> }\n\t\t>\n\t\t\t<Stack direction=\"row\" justify=\"space-between\" gap=\"sm\">\n\t\t\t\t<Stack direction=\"row\" gap=\"sm\" align=\"center\" justify=\"start\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<h2 className=\"admin-ui-page__header-title\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": ";AAGA,SAAS,aAAa;AAKtB,SAAS,yBAAyB;AAqBtB,cAGR,YAHQ;AAnBG,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,QAAS,oBAAC,YAAO;AAAA,MAEjB;AAAA,6BAAC,SAAM,WAAU,OAAM,SAAQ,iBAAgB,KAAI,MAClD;AAAA,+BAAC,SAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UAAS,SAAQ,SACpD;AAAA,iCACD;AAAA,cAAC;AAAA;AAAA,gBACA,kBAAgB;AAAA,gBAChB,WAAU;AAAA;AAAA,YACX;AAAA,YAEC,SACD,oBAAC,QAAG,WAAU,+BACX,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,KAAI;AAAA,cACJ,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,WAAU;AAAA,cACV,OAAM;AAAA,cAEJ;AAAA;AAAA,UACH;AAAA,WACD;AAAA,QACE,YACD,oBAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA;AAAA;AAAA,EAE5D;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { SidebarToggleSlot } from './sidebar-toggle-slot';\n\nexport default function Header( {\n\theadingLevel = 2,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle: React.ReactNode;\n\tactions?: React.ReactNode;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst HeadingTag = `h${ headingLevel }` as const;\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tclassName=\"admin-ui-page__header\"\n\t\t\trender={ <header /> }\n\t\t>\n\t\t\t<Stack direction=\"row\" justify=\"space-between\" gap=\"sm\">\n\t\t\t\t<Stack direction=\"row\" gap=\"sm\" align=\"center\" justify=\"start\">\n\t\t\t\t\t{ showSidebarToggle && (\n\t\t\t\t\t\t<SidebarToggleSlot\n\t\t\t\t\t\t\tbubblesVirtually\n\t\t\t\t\t\t\tclassName=\"admin-ui-page__sidebar-toggle-slot\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<HeadingTag className=\"admin-ui-page__header-title\">\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</HeadingTag>\n\t\t\t\t\t) }\n\t\t\t\t\t{ breadcrumbs }\n\t\t\t\t\t{ badges }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t\t{ subTitle && (\n\t\t\t\t<p className=\"admin-ui-page__header-subtitle\">{ subTitle }</p>\n\t\t\t) }\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,aAAa;AAKtB,SAAS,yBAAyB;AAwBtB,cAGR,YAHQ;AAtBG,SAAR,OAAyB;AAAA,EAC/B,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAQI;AACH,QAAM,aAAa,IAAK,YAAa;AACrC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,QAAS,oBAAC,YAAO;AAAA,MAEjB;AAAA,6BAAC,SAAM,WAAU,OAAM,SAAQ,iBAAgB,KAAI,MAClD;AAAA,+BAAC,SAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UAAS,SAAQ,SACpD;AAAA,iCACD;AAAA,cAAC;AAAA;AAAA,gBACA,kBAAgB;AAAA,gBAChB,WAAU;AAAA;AAAA,YACX;AAAA,YAEC,SACD,oBAAC,cAAW,WAAU,+BACnB,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAU;AAAA,cACV,KAAI;AAAA,cACJ,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,WAAU;AAAA,cACV,OAAM;AAAA,cAEJ;AAAA;AAAA,UACH;AAAA,WACD;AAAA,QACE,YACD,oBAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA;AAAA;AAAA,EAE5D;AAEF;",
   "names": []
 }

package/build-module/page/index.mjs

@@ -5,6 +5,7 @@ import NavigableRegion from "../navigable-region/index.mjs";
 import { SidebarToggleFill } from "./sidebar-toggle-slot.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Page({
+  headingLevel,
   breadcrumbs,
   badges,
   title,
@@ -22,6 +23,7 @@ function Page({
     (title || breadcrumbs || badges) && /* @__PURE__ */ jsx(
       Header,
       {
+        headingLevel,
         breadcrumbs,
         badges,
         title,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAC5B,SAAS,yBAAyB;AA8BhC,SAEE,KAFF;AA5BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAWI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport Header from './header';\nimport NavigableRegion from '../navigable-region';\nimport { SidebarToggleFill } from './sidebar-toggle-slot';\n\nfunction Page( {\n\theadingLevel,\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\tariaLabel,\n\thasPadding = false,\n\tshowSidebarToggle = true,\n}: {\n\theadingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\tbreadcrumbs?: React.ReactNode;\n\tbadges?: React.ReactNode;\n\ttitle?: React.ReactNode;\n\tsubTitle?: React.ReactNode;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n\tactions?: React.ReactNode;\n\tariaLabel?: string;\n\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\tconst effectiveAriaLabel =\n\t\tariaLabel ?? ( typeof title === 'string' ? title : '' );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>\n\t\t\t{ ( title || breadcrumbs || badges ) && (\n\t\t\t\t<Header\n\t\t\t\t\theadingLevel={ headingLevel }\n\t\t\t\t\tbreadcrumbs={ breadcrumbs }\n\t\t\t\t\tbadges={ badges }\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tsubTitle={ subTitle }\n\t\t\t\t\tactions={ actions }\n\t\t\t\t\tshowSidebarToggle={ showSidebarToggle }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasPadding ? (\n\t\t\t\t<div className=\"admin-ui-page__content has-padding\">\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\tchildren\n\t\t\t) }\n\t\t</NavigableRegion>\n\t);\n}\n\nPage.SidebarToggleFill = SidebarToggleFill;\n\nexport default Page;\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAC5B,SAAS,yBAAyB;AAgChC,SAEE,KAFF;AA9BF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAYI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AACjD,QAAM,qBACL,cAAe,OAAO,UAAU,WAAW,QAAQ;AAEpD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,oBAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEC,aACD,oBAAC,SAAI,WAAU,sCACZ,UACH,IAEA;AAAA,KAEF;AAEF;AAEA,KAAK,oBAAoB;AAEzB,IAAO,eAAQ;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -10,7 +10,7 @@
 }
 
 .admin-ui-page__header {
-  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+  padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
   border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
   background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
   position: sticky;
@@ -20,9 +20,9 @@
 
 .admin-ui-page__header-title {
   font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
-  font-size: var(--wpds-font-size-xl, 20px);
+  font-size: var(--wpds-font-size-lg, 15px);
   font-weight: var(--wpds-font-weight-medium, 499);
-  line-height: var(--wpds-font-line-height-xl, 32px);
+  line-height: var(--wpds-font-line-height-lg, 28px);
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -109,13 +109,15 @@
  * These variables do not appear to be used anywhere else.
  */
 .admin-ui-breadcrumbs__list {
+  font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
+  font-size: var(--wpds-font-size-lg, 15px);
+  font-weight: var(--wpds-font-weight-medium, 499);
+  line-height: var(--wpds-font-line-height-lg, 28px);
   list-style: none;
   padding: 0;
   margin: 0;
   gap: 0;
-  font-size: 15px;
   min-height: 32px;
-  font-weight: 500;
 }
 .admin-ui-breadcrumbs__list li:not(:last-child)::after {
   content: "/";

package/build-style/style.css

@@ -10,7 +10,7 @@
 }
 
 .admin-ui-page__header {
-  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+  padding: var(--wpds-dimension-padding-md, 12px) var(--wpds-dimension-padding-2xl, 24px);
   border-bottom: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
   background: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
   position: sticky;
@@ -20,9 +20,9 @@
 
 .admin-ui-page__header-title {
   font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
-  font-size: var(--wpds-font-size-xl, 20px);
+  font-size: var(--wpds-font-size-lg, 15px);
   font-weight: var(--wpds-font-weight-medium, 499);
-  line-height: var(--wpds-font-line-height-xl, 32px);
+  line-height: var(--wpds-font-line-height-lg, 28px);
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -109,13 +109,15 @@
  * These variables do not appear to be used anywhere else.
  */
 .admin-ui-breadcrumbs__list {
+  font-family: var(--wpds-font-family-heading, -apple-system, system-ui, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif);
+  font-size: var(--wpds-font-size-lg, 15px);
+  font-weight: var(--wpds-font-weight-medium, 499);
+  line-height: var(--wpds-font-line-height-lg, 28px);
   list-style: none;
   padding: 0;
   margin: 0;
   gap: 0;
-  font-size: 15px;
   min-height: 32px;
-  font-weight: 500;
 }
 .admin-ui-breadcrumbs__list li:not(:last-child)::after {
   content: "/";

package/build-types/breadcrumbs/stories/index.story.d.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+/**
+ * Internal dependencies
+ */
+import Breadcrumbs from '..';
+declare const meta: Meta<typeof Breadcrumbs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SingleItem: Story;
+export declare const TwoLevels: Story;
+export declare const ThreeLevels: Story;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/breadcrumbs/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;GAEG;AACH,OAAO,WAAW,MAAM,IAAI,CAAC;AAG7B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,WAAW,CAInC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAQzB,CAAC"}

package/build-types/lock-unlock.d.ts

@@ -0,0 +1,2 @@
+export declare const lock: (object: unknown, privateData: unknown) => void, unlock: <T = any>(object: unknown) => T;
+//# sourceMappingURL=lock-unlock.d.ts.map

package/build-types/lock-unlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lock-unlock.d.ts","sourceRoot":"","sources":["../src/lock-unlock.ts"],"names":[],"mappings":"AAKA,eAAO,MAAQ,IAAI,mDAAE,MAAM,iCAIzB,CAAC"}

package/build-types/page/header.d.ts

@@ -1,4 +1,5 @@
-export default function Header({ breadcrumbs, badges, title, subTitle, actions, showSidebarToggle, }: {
+export default function Header({ headingLevel, breadcrumbs, badges, title, subTitle, actions, showSidebarToggle, }: {
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     breadcrumbs?: React.ReactNode;
     badges?: React.ReactNode;
     title?: React.ReactNode;

package/build-types/page/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/page/header.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,iBAAwB,GACxB,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BAsCA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/page/header.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,YAAgB,EAChB,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,iBAAwB,GACxB,EAAE;IACF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BAuCA"}

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

@@ -1,4 +1,5 @@
-declare function Page({ breadcrumbs, badges, title, subTitle, children, className, actions, ariaLabel, hasPadding, showSidebarToggle, }: {
+declare function Page({ headingLevel, breadcrumbs, badges, title, subTitle, children, className, actions, ariaLabel, hasPadding, showSidebarToggle, }: {
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     breadcrumbs?: React.ReactNode;
     badges?: React.ReactNode;
     title?: React.ReactNode;

package/build-types/page/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/index.tsx"],"names":[],"mappings":"AAYA,iBAAS,IAAI,CAAE,EACd,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,UAAkB,EAClB,iBAAwB,GACxB,EAAE;IACF,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BA0BA;kBAhDQ,IAAI;;;;;;AAoDb,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/index.tsx"],"names":[],"mappings":"AAYA,iBAAS,IAAI,CAAE,EACd,YAAY,EACZ,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,EACT,UAAkB,EAClB,iBAAwB,GACxB,EAAE;IACF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BA2BA;kBAnDQ,IAAI;;;;;;AAuDb,eAAe,IAAI,CAAC"}

package/build-types/page/stories/index.story.d.ts

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+/**
+ * Internal dependencies
+ */
+import Page from '..';
+declare const meta: Meta<typeof Page>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithSubtitle: Story;
+export declare const WithBreadcrumbs: Story;
+export declare const WithBreadcrumbsAndSubtitle: Story;
+//# sourceMappingURL=index.story.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/page/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAG5D;;GAEG;AACH,OAAO,IAAI,MAAM,IAAI,CAAC;AAItB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAc5B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAE,OAAO,IAAI,CAAE,CAAC;AAErC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAc7B,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAexC,CAAC"}

package/build-types/stories/with-router.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Storybook decorator that provides a router context.
+ *
+ * Wraps stories in a minimal tanstack router (via @wordpress/route private
+ * APIs) so that components consuming `Link` from `@wordpress/route` can
+ * render without errors.
+ */
+export declare function withRouter(Story: React.ComponentType): import("react").JSX.Element;
+//# sourceMappingURL=with-router.d.ts.map

package/build-types/stories/with-router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-router.d.ts","sourceRoot":"","sources":["../../src/stories/with-router.tsx"],"names":[],"mappings":"AAaA;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAE,KAAK,EAAE,KAAK,CAAC,aAAa,+BAQrD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/admin-ui",
-	"version": "1.9.1-next.v.202603102151.0+59e17f9ec",
+	"version": "1.10.0",
 	"description": "Generic components to be used in the Admin UI.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -45,12 +45,13 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/route": "^0.7.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/ui": "^0.9.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/base-styles": "^6.18.0",
+		"@wordpress/components": "^32.4.0",
+		"@wordpress/element": "^6.42.0",
+		"@wordpress/i18n": "^6.15.0",
+		"@wordpress/private-apis": "^1.42.0",
+		"@wordpress/route": "^0.8.0",
+		"@wordpress/ui": "^0.9.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -59,5 +60,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

package/src/breadcrumbs/stories/index.story.tsx

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+/**
+ * Internal dependencies
+ */
+import Breadcrumbs from '..';
+import { withRouter } from '../../stories/with-router';
+
+const meta: Meta< typeof Breadcrumbs > = {
+	component: Breadcrumbs,
+	title: 'Admin UI/Breadcrumbs',
+	decorators: [ withRouter ],
+};
+
+export default meta;
+
+type Story = StoryObj< typeof meta >;
+
+export const SingleItem: Story = {
+	args: {
+		items: [ { label: 'Root breadcrumb' } ],
+	},
+};
+
+export const TwoLevels: Story = {
+	args: {
+		items: [
+			{ label: 'Root breadcrumb', to: '/settings' },
+			{ label: 'Level 1 breadcrumb' },
+		],
+	},
+};
+
+export const ThreeLevels: Story = {
+	args: {
+		items: [
+			{ label: 'Root breadcrumb', to: '/settings' },
+			{ label: 'Level 1 breadcrumb', to: '/settings/connectors' },
+			{ label: 'Level 2 breadcrumb' },
+		],
+	},
+};

package/src/breadcrumbs/style.scss

@@ -1,14 +1,17 @@
 @use "@wordpress/base-styles/variables";
 
 .admin-ui-breadcrumbs__list {
+	// @TODO: use Text component from UI when available.
+	font-family: var(--wpds-font-family-heading);
+	font-size: var(--wpds-font-size-lg);
+	font-weight: var(--wpds-font-weight-medium);
+	line-height: var(--wpds-font-line-height-lg);
 	list-style: none;
 	padding: 0;
 	margin: 0;
 	// gap prop don't seem to be working properly.
 	gap: 0;
-	font-size: 15px;
 	min-height: 32px;
-	font-weight: 500;
 
 	li:not(:last-child)::after {
 		content: "/";

package/src/lock-unlock.ts

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/admin-ui'
+	);

package/src/page/header.tsx

@@ -9,6 +9,7 @@ import { Stack } from '@wordpress/ui';
 import { SidebarToggleSlot } from './sidebar-toggle-slot';
 
 export default function Header( {
+	headingLevel = 2,
 	breadcrumbs,
 	badges,
 	title,
@@ -16,6 +17,7 @@ export default function Header( {
 	actions,
 	showSidebarToggle = true,
 }: {
+	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 	breadcrumbs?: React.ReactNode;
 	badges?: React.ReactNode;
 	title?: React.ReactNode;
@@ -23,6 +25,7 @@ export default function Header( {
 	actions?: React.ReactNode;
 	showSidebarToggle?: boolean;
 } ) {
+	const HeadingTag = `h${ headingLevel }` as const;
 	return (
 		<Stack
 			direction="column"
@@ -38,9 +41,9 @@ export default function Header( {
 						/>
 					) }
 					{ title && (
-						<h2 className="admin-ui-page__header-title">
+						<HeadingTag className="admin-ui-page__header-title">
 							{ title }
-						</h2>
+						</HeadingTag>
 					) }
 					{ breadcrumbs }
 					{ badges }

package/src/page/index.tsx

@@ -11,6 +11,7 @@ import NavigableRegion from '../navigable-region';
 import { SidebarToggleFill } from './sidebar-toggle-slot';
 
 function Page( {
+	headingLevel,
 	breadcrumbs,
 	badges,
 	title,
@@ -22,6 +23,7 @@ function Page( {
 	hasPadding = false,
 	showSidebarToggle = true,
 }: {
+	headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 	breadcrumbs?: React.ReactNode;
 	badges?: React.ReactNode;
 	title?: React.ReactNode;
@@ -41,6 +43,7 @@ function Page( {
 		<NavigableRegion className={ classes } ariaLabel={ effectiveAriaLabel }>
 			{ ( title || breadcrumbs || badges ) && (
 				<Header
+					headingLevel={ headingLevel }
 					breadcrumbs={ breadcrumbs }
 					badges={ badges }
 					title={ title }

package/src/page/stories/index.story.tsx

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Page from '..';
+import Breadcrumbs from '../../breadcrumbs';
+import { withRouter } from '../../stories/with-router';
+
+const meta: Meta< typeof Page > = {
+	component: Page,
+	title: 'Admin UI/Page',
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [
+		( Story ) => (
+			<div style={ { minHeight: '400px' } }>
+				<Story />
+			</div>
+		),
+		withRouter,
+	],
+};
+
+export default meta;
+
+type Story = StoryObj< typeof meta >;
+
+export const Default: Story = {
+	args: {
+		title: 'Page title',
+		showSidebarToggle: false,
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};
+
+export const WithSubtitle: Story = {
+	args: {
+		title: 'Page title',
+		subTitle: 'All of the subtitle text you need goes here.',
+		showSidebarToggle: false,
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};
+
+export const WithBreadcrumbs: Story = {
+	args: {
+		showSidebarToggle: false,
+		breadcrumbs: (
+			<Breadcrumbs
+				items={ [
+					{ label: 'Root breadcrumb', to: '/connectors' },
+					{ label: 'Level 1 breadcrumb' },
+				] }
+			/>
+		),
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};
+
+export const WithBreadcrumbsAndSubtitle: Story = {
+	args: {
+		showSidebarToggle: false,
+		subTitle: 'All of the subtitle text you need goes here.',
+		breadcrumbs: (
+			<Breadcrumbs
+				items={ [
+					{ label: 'Root breadcrumb', to: '/connectors' },
+					{ label: 'Level 1 breadcrumb' },
+				] }
+			/>
+		),
+		hasPadding: true,
+		children: <Text>Page content here</Text>,
+	},
+};

package/src/page/style.scss

@@ -10,7 +10,7 @@
 }
 
 .admin-ui-page__header {
-	padding: var(--wpds-dimension-padding-lg) var(--wpds-dimension-padding-2xl);
+	padding: var(--wpds-dimension-padding-md) var(--wpds-dimension-padding-2xl);
 	border-bottom: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
 	background: var(--wpds-color-bg-surface-neutral-strong);
 	position: sticky;
@@ -19,10 +19,11 @@
 }
 
 .admin-ui-page__header-title {
+	// @TODO: use Text component from UI when available.
 	font-family: var(--wpds-font-family-heading);
-	font-size: var(--wpds-font-size-xl);
+	font-size: var(--wpds-font-size-lg);
 	font-weight: var(--wpds-font-weight-medium);
-	line-height: var(--wpds-font-line-height-xl);
+	line-height: var(--wpds-font-line-height-lg);
 	margin: 0;
 	overflow: hidden;
 	text-overflow: ellipsis;

package/src/stories/with-router.tsx

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routePrivateApis } from '@wordpress/route';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { createMemoryHistory, createRootRoute, createRouter, RouterProvider } =
+	unlock( routePrivateApis );
+
+/**
+ * Storybook decorator that provides a router context.
+ *
+ * Wraps stories in a minimal tanstack router (via @wordpress/route private
+ * APIs) so that components consuming `Link` from `@wordpress/route` can
+ * render without errors.
+ */
+export function withRouter( Story: React.ComponentType ) {
+	const rootRoute = createRootRoute( { component: Story } );
+	const router = createRouter( {
+		routeTree: rootRoute,
+		history: createMemoryHistory( { initialEntries: [ '/' ] } ),
+		defaultNotFoundComponent: () => null,
+	} );
+	return <RouterProvider router={ router } />;
+}