@wordpress/interface 9.25.1-next.v.202602271551.0 → 9.26.1-next.v.202603102151.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 9.26.0 (2026-03-04)
+
 ## 9.25.0 (2026-02-18)
 
 ## 9.24.0 (2026-01-29)

package/build/components/interface-skeleton/index.cjs

@@ -135,7 +135,7 @@ function InterfaceSkeleton({
             {
               as: import_components.__unstableMotion.div,
               className: "interface-interface-skeleton__header",
-              "aria-label": mergedLabels.header,
+              ariaLabel: mergedLabels.header,
               initial: isDistractionFree && !isMobileViewport ? "distractionFreeHidden" : "hidden",
               whileHover: isDistractionFree && !isMobileViewport ? "distractionFreeHover" : "visible",
               animate: isDistractionFree && !isMobileViewport ? "distractionFreeDisabled" : "visible",

package/build/components/interface-skeleton/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/interface-skeleton/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NavigableRegion } from '@wordpress/admin-ui';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: _x( 'Header', 'header landmark area' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: _x( 'Settings', 'settings landmark area' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NavigableRegion } from '@wordpress/admin-ui';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: _x( 'Header', 'header landmark area' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: _x( 'Settings', 'settings landmark area' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],
+  "mappings": "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",
   "names": ["clsx", "AnimatePresence", "motion"]
 }

package/build-module/components/interface-skeleton/index.mjs

@@ -109,7 +109,7 @@ function InterfaceSkeleton({
             {
               as: motion.div,
               className: "interface-interface-skeleton__header",
-              "aria-label": mergedLabels.header,
+              ariaLabel: mergedLabels.header,
               initial: isDistractionFree && !isMobileViewport ? "distractionFreeHidden" : "hidden",
               whileHover: isDistractionFree && !isMobileViewport ? "distractionFreeHover" : "visible",
               animate: isDistractionFree && !isMobileViewport ? "distractionFreeDisabled" : "visible",

package/build-module/components/interface-skeleton/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/interface-skeleton/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NavigableRegion } from '@wordpress/admin-ui';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: _x( 'Header', 'header landmark area' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: _x( 'Settings', 'settings landmark area' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NavigableRegion } from '@wordpress/admin-ui';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: _x( 'Header', 'header landmark area' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: _x( 'Settings', 'settings landmark area' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],
+  "mappings": "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",
   "names": []
 }

package/build-style/style-rtl.css

@@ -1,97 +1,8 @@
-/**
- * Colors
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
- * Typography
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Breakpoint mixins
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
 .admin-ui-page {
   display: flex;
   height: 100%;
-  background-color: #fff;
-  color: #2f2f2f;
+  background-color: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
+  color: var(--wpds-color-fg-content-neutral, #1e1e1e);
   position: relative;
   z-index: 1;
   flex-flow: column;
@@ -99,25 +10,34 @@
 }
 
 .admin-ui-page__header {
-  padding: 16px 24px;
-  border-bottom: 1px solid #f0f0f0;
-  background: #fff;
+  padding: var(--wpds-dimension-padding-lg, 16px) 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;
   top: 0;
   z-index: 1;
 }
 
+.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-weight: var(--wpds-font-weight-medium, 499);
+  line-height: var(--wpds-font-line-height-xl, 32px);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .admin-ui-page__sidebar-toggle-slot:empty {
   display: none;
 }
 
 .admin-ui-page__header-subtitle {
-  padding-block-end: 8px;
-  color: #757575;
-  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 20px;
+  padding-block-end: var(--wpds-dimension-padding-xs, 4px);
+  color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
+  font-size: var(--wpds-font-size-md, 13px);
+  line-height: var(--wpds-font-line-height-md, 24px);
   margin: 0;
 }
 
@@ -129,12 +49,12 @@
 }
 
 .admin-ui-page__content.has-padding {
-  padding: 16px 24px;
+  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
   width: auto;
-  padding: 0 8px;
+  padding: 0 var(--wpds-dimension-padding-xs, 4px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
@@ -143,9 +63,54 @@
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
   content: attr(aria-label);
-  font-size: 12px;
+  font-size: var(--wpds-font-size-sm, 12px);
 }
 
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
 .admin-ui-breadcrumbs__list {
   list-style: none;
   padding: 0;

package/build-style/style.css

@@ -1,97 +1,8 @@
-/**
- * Colors
- */
-/**
- * SCSS Variables.
- *
- * Please use variables from this sheet to ensure consistency across the UI.
- * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
- * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
- */
-/**
- * Fonts & basic variables.
- */
-/**
- * Typography
- */
-/**
- * Grid System.
- * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
- */
-/**
- * Radius scale.
- */
-/**
- * Elevation scale.
- */
-/**
- * Dimensions.
- */
-/**
- * Mobile specific styles
- */
-/**
- * Editor styles.
- */
-/**
- * Block & Editor UI.
- */
-/**
- * Block paddings.
- */
-/**
- * React Native specific.
- * These variables do not appear to be used anywhere else.
- */
-/**
- * Typography
- */
-/**
- * Breakpoints & Media Queries
- */
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-/**
- * Breakpoint mixins
- */
-/**
- * Focus styles.
- */
-/**
- * Applies editor left position to the selector passed as argument
- */
-/**
- * Styles that are reused verbatim in a few places
- */
-/**
- * Allows users to opt-out of animations via OS-level preferences.
- */
-/**
- * Reset default styles for JavaScript UI based pages.
- * This is a WP-admin agnostic reset
- */
-/**
- * Reset the WP Admin page styles for Gutenberg-like pages.
- */
-/**
- * Creates a checkerboard pattern background to indicate transparency.
- * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
- */
 .admin-ui-page {
   display: flex;
   height: 100%;
-  background-color: #fff;
-  color: #2f2f2f;
+  background-color: var(--wpds-color-bg-surface-neutral-strong, #ffffff);
+  color: var(--wpds-color-fg-content-neutral, #1e1e1e);
   position: relative;
   z-index: 1;
   flex-flow: column;
@@ -99,25 +10,34 @@
 }
 
 .admin-ui-page__header {
-  padding: 16px 24px;
-  border-bottom: 1px solid #f0f0f0;
-  background: #fff;
+  padding: var(--wpds-dimension-padding-lg, 16px) 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;
   top: 0;
   z-index: 1;
 }
 
+.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-weight: var(--wpds-font-weight-medium, 499);
+  line-height: var(--wpds-font-line-height-xl, 32px);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .admin-ui-page__sidebar-toggle-slot:empty {
   display: none;
 }
 
 .admin-ui-page__header-subtitle {
-  padding-block-end: 8px;
-  color: #757575;
-  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 20px;
+  padding-block-end: var(--wpds-dimension-padding-xs, 4px);
+  color: var(--wpds-color-fg-content-neutral-weak, #6d6d6d);
+  font-size: var(--wpds-font-size-md, 13px);
+  line-height: var(--wpds-font-line-height-md, 24px);
   margin: 0;
 }
 
@@ -129,12 +49,12 @@
 }
 
 .admin-ui-page__content.has-padding {
-  padding: 16px 24px;
+  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon {
   width: auto;
-  padding: 0 8px;
+  padding: 0 var(--wpds-dimension-padding-xs, 4px);
 }
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon svg {
@@ -143,9 +63,54 @@
 
 .show-icon-labels .admin-ui-page__header-actions .components-button.has-icon::after {
   content: attr(aria-label);
-  font-size: 12px;
+  font-size: var(--wpds-font-size-sm, 12px);
 }
 
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
 .admin-ui-breadcrumbs__list {
   list-style: none;
   padding: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "9.25.1-next.v.202602271551.0+464abe399",
+	"version": "9.26.1-next.v.202603102151.0+59e17f9ec",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -53,19 +53,19 @@
 		"build-module/store/index.mjs"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/admin-ui": "^1.8.1-next.v.202602271551.0+464abe399",
-		"@wordpress/base-styles": "^6.16.1-next.v.202602271551.0+464abe399",
-		"@wordpress/components": "^32.3.1-next.v.202602271551.0+464abe399",
-		"@wordpress/compose": "^7.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/data": "^10.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/deprecated": "^4.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/element": "^6.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/i18n": "^6.13.1-next.v.202602271551.0+464abe399",
-		"@wordpress/icons": "^11.7.1-next.v.202602271551.0+464abe399",
-		"@wordpress/plugins": "^7.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/preferences": "^4.40.1-next.v.202602271551.0+464abe399",
-		"@wordpress/viewport": "^6.40.1-next.v.202602271551.0+464abe399",
+		"@wordpress/a11y": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/admin-ui": "^1.9.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/deprecated": "^4.41.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/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/plugins": "^7.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/preferences": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/viewport": "^6.41.1-next.v.202603102151.0+59e17f9ec",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -75,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "95aa7055a5757219e2d96a91efc69f7dd1b2d4c3"
+	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
 }

package/src/components/interface-skeleton/index.js

@@ -125,7 +125,7 @@ function InterfaceSkeleton(
 						<NavigableRegion
 							as={ motion.div }
 							className="interface-interface-skeleton__header"
-							aria-label={ mergedLabels.header }
+							ariaLabel={ mergedLabels.header }
 							initial={
 								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHidden'