@wordpress/admin-ui 1.4.0 → 1.4.1-next.6deb34194.0

package/build/page/header.js

@@ -24,39 +24,40 @@ __export(header_exports, {
 });
 module.exports = __toCommonJS(header_exports);
 var import_components = require("@wordpress/components");
+var import_sidebar_toggle_slot = require("./sidebar-toggle-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Header({
   breadcrumbs,
   badges,
   title,
   subTitle,
-  actions
+  actions,
+  showSidebarToggle = true
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { className: "admin-ui-page__header", as: "header", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_components.__experimentalHStack,
-      {
-        className: "admin-ui-page__header-title",
-        justify: "space-between",
-        spacing: 2,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
-            breadcrumbs,
-            badges
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.__experimentalHStack,
-            {
-              style: { width: "auto", flexShrink: 0 },
-              spacing: 2,
-              className: "admin-ui-page__header-actions",
-              children: actions
-            }
-          )
-        ]
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "space-between", spacing: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 2, justify: "left", children: [
+        showSidebarToggle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_sidebar_toggle_slot.SidebarToggleSlot,
+          {
+            bubblesVirtually: true,
+            className: "admin-ui-page__sidebar-toggle-slot"
+          }
+        ),
+        title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
+        breadcrumbs,
+        badges
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalHStack,
+        {
+          style: { width: "auto", flexShrink: 0 },
+          spacing: 2,
+          className: "admin-ui-page__header-actions",
+          children: actions
+        }
+      )
+    ] }),
     subTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
   ] });
 }

package/build/page/header.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/header.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\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<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack\n\t\t\t\tclassName=\"admin-ui-page__header-title\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tspacing={ 2 }\n\t\t\t>\n\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\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</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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</VStack>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AAuBH;AArBW,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOI;AACH,SACC,6CAAC,kBAAAA,sBAAA,EAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,SAAU;AAAA,QAEV;AAAA,uDAAC,kBAAAA,sBAAA,EAAO,SAAU,GACf;AAAA,qBACD,4CAAC,kBAAAC,uBAAA,EAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC,kBAAAD;AAAA,YAAA;AAAA,cACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,SAAU;AAAA,cACV,WAAU;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACD;AAAA,IACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\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<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack justify=\"space-between\" spacing={ 2 }>\n\t\t\t\t<HStack spacing={ 2 } justify=\"left\">\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<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\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</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AAKP,iCAAkC;AAoB9B;AAlBW,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC,6CAAC,kBAAAA,sBAAA,EAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA,iDAAC,kBAAAC,sBAAA,EAAO,SAAQ,iBAAgB,SAAU,GACzC;AAAA,mDAAC,kBAAAA,sBAAA,EAAO,SAAU,GAAI,SAAQ,QAC3B;AAAA,6BACD;AAAA,UAAC;AAAA;AAAA,YACA,kBAAgB;AAAA,YAChB,WAAU;AAAA;AAAA,QACX;AAAA,QAEC,SACD,4CAAC,kBAAAC,uBAAA,EAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,QAEC;AAAA,QACA;AAAA,SACH;AAAA,MACA;AAAA,QAAC,kBAAAD;AAAA,QAAA;AAAA,UACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,UACvC,SAAU;AAAA,UACV,WAAU;AAAA,UAER;AAAA;AAAA,MACH;AAAA,OACD;AAAA,IACE,YACD,4CAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
   "names": ["VStack", "HStack", "Heading"]
 }

package/build/page/index.js

@@ -36,6 +36,7 @@ module.exports = __toCommonJS(page_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_header = __toESM(require("./header"));
 var import_navigable_region = __toESM(require("../navigable-region"));
+var import_sidebar_toggle_slot = require("./sidebar-toggle-slot");
 var import_jsx_runtime = require("react/jsx-runtime");
 function Page({
   breadcrumbs,
@@ -45,7 +46,8 @@ function Page({
   children,
   className,
   actions,
-  hasPadding = false
+  hasPadding = false,
+  showSidebarToggle = true
 }) {
   const classes = (0, import_clsx.default)("admin-ui-page", className);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_navigable_region.default, { className: classes, ariaLabel: title, children: [
@@ -56,11 +58,13 @@ function Page({
         badges,
         title,
         subTitle,
-        actions
+        actions,
+        showSidebarToggle
       }
     ),
     hasPadding ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "admin-ui-page__content has-padding", children }) : children
   ] });
 }
+Page.SidebarToggleFill = import_sidebar_toggle_slot.SidebarToggleFill;
 var page_default = Page;
 //# sourceMappingURL=index.js.map

package/build/page/index.js.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';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\thasPadding = false,\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\thasPadding?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\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/>\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\nexport default Page;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,oBAAmB;AACnB,8BAA4B;AAwB1B;AAtBF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACd,GASI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AAEjD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,OAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC,cAAAC;AAAA,MAAA;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,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\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\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\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\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;AA0BhC;AAxBF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAUI;AACH,QAAM,cAAU,YAAAA,SAAM,iBAAiB,SAAU;AAEjD,SACC,6CAAC,wBAAAC,SAAA,EAAgB,WAAY,SAAU,WAAY,OAC9C;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;",
   "names": ["clsx", "NavigableRegion", "Header"]
 }

package/build/page/sidebar-toggle-slot.js

@@ -0,0 +1,34 @@
+"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/page/sidebar-toggle-slot.tsx
+var sidebar_toggle_slot_exports = {};
+__export(sidebar_toggle_slot_exports, {
+  SidebarToggleFill: () => SidebarToggleFill,
+  SidebarToggleSlot: () => SidebarToggleSlot
+});
+module.exports = __toCommonJS(sidebar_toggle_slot_exports);
+var import_components = require("@wordpress/components");
+var { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } = (0, import_components.createSlotFill)("SidebarToggle");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SidebarToggleFill,
+  SidebarToggleSlot
+});
+//# sourceMappingURL=sidebar-toggle-slot.js.map

package/build/page/sidebar-toggle-slot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/page/sidebar-toggle-slot.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } =\n\tcreateSlotFill( 'SidebarToggle' );\n\nexport { SidebarToggleFill, SidebarToggleSlot };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA+B;AAE/B,IAAM,EAAE,MAAM,mBAAmB,MAAM,kBAAkB,QACxD,kCAAgB,eAAgB;",
+  "names": []
+}

package/build-module/page/header.js

@@ -4,39 +4,40 @@ import {
   __experimentalHStack as HStack,
   __experimentalVStack as VStack
 } from "@wordpress/components";
+import { SidebarToggleSlot } from "./sidebar-toggle-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Header({
   breadcrumbs,
   badges,
   title,
   subTitle,
-  actions
+  actions,
+  showSidebarToggle = true
 }) {
   return /* @__PURE__ */ jsxs(VStack, { className: "admin-ui-page__header", as: "header", children: [
-    /* @__PURE__ */ jsxs(
-      HStack,
-      {
-        className: "admin-ui-page__header-title",
-        justify: "space-between",
-        spacing: 2,
-        children: [
-          /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
-            title && /* @__PURE__ */ jsx(Heading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
-            breadcrumbs,
-            badges
-          ] }),
-          /* @__PURE__ */ jsx(
-            HStack,
-            {
-              style: { width: "auto", flexShrink: 0 },
-              spacing: 2,
-              className: "admin-ui-page__header-actions",
-              children: actions
-            }
-          )
-        ]
-      }
-    ),
+    /* @__PURE__ */ jsxs(HStack, { justify: "space-between", spacing: 2, children: [
+      /* @__PURE__ */ jsxs(HStack, { spacing: 2, justify: "left", children: [
+        showSidebarToggle && /* @__PURE__ */ jsx(
+          SidebarToggleSlot,
+          {
+            bubblesVirtually: true,
+            className: "admin-ui-page__sidebar-toggle-slot"
+          }
+        ),
+        title && /* @__PURE__ */ jsx(Heading, { as: "h2", level: 3, weight: 500, truncate: true, children: title }),
+        breadcrumbs,
+        badges
+      ] }),
+      /* @__PURE__ */ jsx(
+        HStack,
+        {
+          style: { width: "auto", flexShrink: 0 },
+          spacing: 2,
+          className: "admin-ui-page__header-actions",
+          children: actions
+        }
+      )
+    ] }),
     subTitle && /* @__PURE__ */ jsx("p", { className: "admin-ui-page__header-subtitle", children: subTitle })
   ] });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/page/header.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\n\nexport default function Header( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tactions,\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<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack\n\t\t\t\tclassName=\"admin-ui-page__header-title\"\n\t\t\t\tjustify=\"space-between\"\n\t\t\t\tspacing={ 2 }\n\t\t\t>\n\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t{ title && (\n\t\t\t\t\t\t<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\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</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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</VStack>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAuBH,SAEE,KAFF;AArBW,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAOI;AACH,SACC,qBAAC,UAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,SAAU;AAAA,QAEV;AAAA,+BAAC,UAAO,SAAU,GACf;AAAA,qBACD,oBAAC,WAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,YAEC;AAAA,YACA;AAAA,aACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,cACvC,SAAU;AAAA,cACV,WAAU;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACD;AAAA,IACE,YACD,oBAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\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<VStack className=\"admin-ui-page__header\" as=\"header\">\n\t\t\t<HStack justify=\"space-between\" spacing={ 2 }>\n\t\t\t\t<HStack spacing={ 2 } justify=\"left\">\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<Heading as=\"h2\" level={ 3 } weight={ 500 } truncate>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\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</HStack>\n\t\t\t\t<HStack\n\t\t\t\t\tstyle={ { width: 'auto', flexShrink: 0 } }\n\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\tclassName=\"admin-ui-page__header-actions\"\n\t\t\t\t>\n\t\t\t\t\t{ actions }\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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</VStack>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,OAClB;AAKP,SAAS,yBAAyB;AAoB9B,SAEE,KAFF;AAlBW,SAAR,OAAyB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AACrB,GAOI;AACH,SACC,qBAAC,UAAO,WAAU,yBAAwB,IAAG,UAC5C;AAAA,yBAAC,UAAO,SAAQ,iBAAgB,SAAU,GACzC;AAAA,2BAAC,UAAO,SAAU,GAAI,SAAQ,QAC3B;AAAA,6BACD;AAAA,UAAC;AAAA;AAAA,YACA,kBAAgB;AAAA,YAChB,WAAU;AAAA;AAAA,QACX;AAAA,QAEC,SACD,oBAAC,WAAQ,IAAG,MAAK,OAAQ,GAAI,QAAS,KAAM,UAAQ,MACjD,iBACH;AAAA,QAEC;AAAA,QACA;AAAA,SACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ,EAAE,OAAO,QAAQ,YAAY,EAAE;AAAA,UACvC,SAAU;AAAA,UACV,WAAU;AAAA,UAER;AAAA;AAAA,MACH;AAAA,OACD;AAAA,IACE,YACD,oBAAC,OAAE,WAAU,kCAAmC,oBAAU;AAAA,KAE5D;AAEF;",
   "names": []
 }

package/build-module/page/index.js

@@ -2,6 +2,7 @@
 import clsx from "clsx";
 import Header from "./header";
 import NavigableRegion from "../navigable-region";
+import { SidebarToggleFill } from "./sidebar-toggle-slot";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Page({
   breadcrumbs,
@@ -11,7 +12,8 @@ function Page({
   children,
   className,
   actions,
-  hasPadding = false
+  hasPadding = false,
+  showSidebarToggle = true
 }) {
   const classes = clsx("admin-ui-page", className);
   return /* @__PURE__ */ jsxs(NavigableRegion, { className: classes, ariaLabel: title, children: [
@@ -22,12 +24,14 @@ function Page({
         badges,
         title,
         subTitle,
-        actions
+        actions,
+        showSidebarToggle
       }
     ),
     hasPadding ? /* @__PURE__ */ jsx("div", { className: "admin-ui-page__content has-padding", children }) : children
   ] });
 }
+Page.SidebarToggleFill = SidebarToggleFill;
 var page_default = Page;
 export {
   page_default as default

package/build-module/page/index.js.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';\n\nfunction Page( {\n\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\n\thasPadding = false,\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\thasPadding?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\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/>\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\nexport default Page;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,OAAO,YAAY;AACnB,OAAO,qBAAqB;AAwB1B,SAEE,KAFF;AAtBF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACd,GASI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AAEjD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,OAC9C;AAAA,cAAS,eAAe,WAC3B;AAAA,MAAC;AAAA;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,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\tbreadcrumbs,\n\tbadges,\n\ttitle,\n\tsubTitle,\n\tchildren,\n\tclassName,\n\tactions,\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\thasPadding?: boolean;\n\tshowSidebarToggle?: boolean;\n} ) {\n\tconst classes = clsx( 'admin-ui-page', className );\n\n\treturn (\n\t\t<NavigableRegion className={ classes } ariaLabel={ title }>\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;AA0BhC,SAEE,KAFF;AAxBF,SAAS,KAAM;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AACrB,GAUI;AACH,QAAM,UAAU,KAAM,iBAAiB,SAAU;AAEjD,SACC,qBAAC,mBAAgB,WAAY,SAAU,WAAY,OAC9C;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;",
   "names": []
 }

package/build-module/page/sidebar-toggle-slot.js

@@ -0,0 +1,8 @@
+// packages/admin-ui/src/page/sidebar-toggle-slot.tsx
+import { createSlotFill } from "@wordpress/components";
+var { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } = createSlotFill("SidebarToggle");
+export {
+  SidebarToggleFill,
+  SidebarToggleSlot
+};
+//# sourceMappingURL=sidebar-toggle-slot.js.map

package/build-module/page/sidebar-toggle-slot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/page/sidebar-toggle-slot.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } =\n\tcreateSlotFill( 'SidebarToggle' );\n\nexport { SidebarToggleFill, SidebarToggleSlot };\n"],
+  "mappings": ";AAGA,SAAS,sBAAsB;AAE/B,IAAM,EAAE,MAAM,mBAAmB,MAAM,kBAAkB,IACxD,eAAgB,eAAgB;",
+  "names": []
+}

package/build-style/style-rtl.css

@@ -91,25 +91,18 @@
   position: relative;
   z-index: 1;
   flex-flow: column;
-  container: admin-ui-page/inline-size;
-}
-@media not (prefers-reduced-motion) {
-  .admin-ui-page {
-    transition: width ease-out 0.2s;
-  }
 }
 
 .admin-ui-page__header {
-  padding: 16px 48px;
+  padding: 16px 24px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   position: sticky;
   top: 0;
 }
-@container (max-width: 430px) {
-  .admin-ui-page__header {
-    padding: 16px 24px;
-  }
+
+.admin-ui-page__sidebar-toggle-slot:empty {
+  display: none;
 }
 
 .admin-ui-page__header-subtitle {
@@ -129,12 +122,7 @@
   flex-direction: column;
 }
 .admin-ui-page__content.has-padding {
-  padding: 16px 20px;
-}
-@container (max-width: 430px) {
-  .admin-ui-page__content.has-padding {
-    padding: 16px 24px;
-  }
+  padding: 16px 24px;
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {

package/build-style/style.css

@@ -91,25 +91,18 @@
   position: relative;
   z-index: 1;
   flex-flow: column;
-  container: admin-ui-page/inline-size;
-}
-@media not (prefers-reduced-motion) {
-  .admin-ui-page {
-    transition: width ease-out 0.2s;
-  }
 }
 
 .admin-ui-page__header {
-  padding: 16px 48px;
+  padding: 16px 24px;
   border-bottom: 1px solid #f0f0f0;
   background: #fff;
   position: sticky;
   top: 0;
 }
-@container (max-width: 430px) {
-  .admin-ui-page__header {
-    padding: 16px 24px;
-  }
+
+.admin-ui-page__sidebar-toggle-slot:empty {
+  display: none;
 }
 
 .admin-ui-page__header-subtitle {
@@ -129,12 +122,7 @@
   flex-direction: column;
 }
 .admin-ui-page__content.has-padding {
-  padding: 16px 20px;
-}
-@container (max-width: 430px) {
-  .admin-ui-page__content.has-padding {
-    padding: 16px 24px;
-  }
+  padding: 16px 24px;
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {

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

@@ -1,4 +1,4 @@
-export default function Header({ breadcrumbs, badges, title, subTitle, actions, }: {
+export default function Header({ breadcrumbs, badges, title, subTitle, actions, showSidebarToggle, }: {
     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":"AASA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,GACP,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,+BA8BA"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/page/header.tsx"],"names":[],"mappings":"AAcA,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,+BAgCA"}

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

@@ -1,4 +1,4 @@
-declare function Page({ breadcrumbs, badges, title, subTitle, children, className, actions, hasPadding, }: {
+declare function Page({ breadcrumbs, badges, title, subTitle, children, className, actions, hasPadding, showSidebarToggle, }: {
     breadcrumbs?: React.ReactNode;
     badges?: React.ReactNode;
     title?: React.ReactNode;
@@ -7,6 +7,13 @@ declare function Page({ breadcrumbs, badges, title, subTitle, children, classNam
     className?: string;
     actions?: React.ReactNode;
     hasPadding?: boolean;
+    showSidebarToggle?: boolean;
 }): import("react").JSX.Element;
+declare namespace Page {
+    var SidebarToggleFill: {
+        (props: Omit<import("@wordpress/components/build-types/slot-fill/types").FillComponentProps, "name">): import("react").JSX.Element;
+        displayName: string;
+    };
+}
 export default Page;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/page/index.tsx"],"names":[],"mappings":"AAWA,iBAAS,IAAI,CAAE,EACd,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,UAAkB,GAClB,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,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,+BAuBA;AAED,eAAe,IAAI,CAAC"}
+{"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,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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,+BAwBA;kBA5CQ,IAAI;;;;;;AAgDb,eAAe,IAAI,CAAC"}

package/build-types/page/sidebar-toggle-slot.d.ts

@@ -0,0 +1,10 @@
+declare const SidebarToggleFill: {
+    (props: Omit<import("@wordpress/components/build-types/slot-fill/types").FillComponentProps, "name">): import("react").JSX.Element;
+    displayName: string;
+}, SidebarToggleSlot: {
+    (props: import("@wordpress/components/build-types/slot-fill/types").DistributiveOmit<import("@wordpress/components/build-types/slot-fill/types").SlotComponentProps, "name">): import("react").JSX.Element;
+    displayName: string;
+    __unstableName: import("@wordpress/components/build-types/slot-fill/types").SlotKey;
+};
+export { SidebarToggleFill, SidebarToggleSlot };
+//# sourceMappingURL=sidebar-toggle-slot.d.ts.map

package/build-types/page/sidebar-toggle-slot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-toggle-slot.d.ts","sourceRoot":"","sources":["../../src/page/sidebar-toggle-slot.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAc,iBAAiB;;;GAAQ,iBAAiB;;;;CACtB,CAAC;AAEnC,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/admin-ui",
-	"version": "1.4.0",
+	"version": "1.4.1-next.6deb34194.0",
 	"description": "Generic components to be used in the Admin UI.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,11 +37,11 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@wordpress/base-styles": "^6.12.0",
-		"@wordpress/components": "^30.9.0",
-		"@wordpress/element": "^6.36.0",
-		"@wordpress/i18n": "^6.9.0",
-		"@wordpress/route": "^0.2.0",
+		"@wordpress/base-styles": "^6.12.1-next.6deb34194.0",
+		"@wordpress/components": "^31.0.1-next.6deb34194.0",
+		"@wordpress/element": "^6.36.1-next.6deb34194.0",
+		"@wordpress/i18n": "^6.9.1-next.6deb34194.0",
+		"@wordpress/route": "^0.2.1-next.6deb34194.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -50,5 +50,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
+	"gitHead": "457096e9e9b3896d2d4fe54fc19d7fb571ee9a44"
 }

package/src/page/header.tsx

@@ -7,12 +7,18 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { SidebarToggleSlot } from './sidebar-toggle-slot';
+
 export default function Header( {
 	breadcrumbs,
 	badges,
 	title,
 	subTitle,
 	actions,
+	showSidebarToggle = true,
 }: {
 	breadcrumbs?: React.ReactNode;
 	badges?: React.ReactNode;
@@ -23,12 +29,14 @@ export default function Header( {
 } ) {
 	return (
 		<VStack className="admin-ui-page__header" as="header">
-			<HStack
-				className="admin-ui-page__header-title"
-				justify="space-between"
-				spacing={ 2 }
-			>
-				<HStack spacing={ 2 }>
+			<HStack justify="space-between" spacing={ 2 }>
+				<HStack spacing={ 2 } justify="left">
+					{ showSidebarToggle && (
+						<SidebarToggleSlot
+							bubblesVirtually
+							className="admin-ui-page__sidebar-toggle-slot"
+						/>
+					) }
 					{ title && (
 						<Heading as="h2" level={ 3 } weight={ 500 } truncate>
 							{ title }

package/src/page/index.tsx

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import Header from './header';
 import NavigableRegion from '../navigable-region';
+import { SidebarToggleFill } from './sidebar-toggle-slot';
 
 function Page( {
 	breadcrumbs,
@@ -18,6 +19,7 @@ function Page( {
 	className,
 	actions,
 	hasPadding = false,
+	showSidebarToggle = true,
 }: {
 	breadcrumbs?: React.ReactNode;
 	badges?: React.ReactNode;
@@ -27,6 +29,7 @@ function Page( {
 	className?: string;
 	actions?: React.ReactNode;
 	hasPadding?: boolean;
+	showSidebarToggle?: boolean;
 } ) {
 	const classes = clsx( 'admin-ui-page', className );
 
@@ -39,6 +42,7 @@ function Page( {
 					title={ title }
 					subTitle={ subTitle }
 					actions={ actions }
+					showSidebarToggle={ showSidebarToggle }
 				/>
 			) }
 			{ hasPadding ? (
@@ -52,4 +56,6 @@ function Page( {
 	);
 }
 
+Page.SidebarToggleFill = SidebarToggleFill;
+
 export default Page;

package/src/page/sidebar-toggle-slot.tsx

@@ -0,0 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } =
+	createSlotFill( 'SidebarToggle' );
+
+export { SidebarToggleFill, SidebarToggleSlot };