@wordpress/components 27.4.0 → 27.6.0

package/build-style/style-rtl.css

@@ -171,8 +171,8 @@
   }
 }
 .components-autocomplete__popover .components-popover__content {
-  padding: 16px;
-  min-width: 220px;
+  padding: 8px;
+  min-width: 200px;
 }
 
 .components-autocomplete__result.components-button {
@@ -182,8 +182,13 @@
   text-align: right;
   width: 100%;
 }
-.components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+.components-autocomplete__result.components-button:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.components-autocomplete__result.components-button.is-selected, .components-autocomplete__result.components-button:not(:disabled, [aria-disabled=true]):active {
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  color: #fff;
 }
 
 .components-button-group {
@@ -301,7 +306,7 @@
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: var(--wp-components-color-accent-inverted, #fff);
   background-size: 100px 100%;
-  /* stylelint-disable */
+  /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   background-image: linear-gradient(45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
   /* stylelint-enable */
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -337,11 +342,11 @@
   background: transparent;
 }
 .components-button.is-tertiary:hover:not(:disabled, [aria-disabled=true]) {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
 .components-button.is-tertiary:active:not(:disabled, [aria-disabled=true]) {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
   background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
 p + .components-button.is-tertiary {
@@ -404,7 +409,7 @@ p + .components-button.is-tertiary {
   animation: components-button__busy-animation 2500ms infinite linear;
   opacity: 1;
   background-size: 100px 100%;
-  /* stylelint-disable */
+  /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   background-image: linear-gradient(45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
   /* stylelint-enable */
 }
@@ -492,6 +497,10 @@ p + .components-button.is-tertiary {
   }
 }
 
+.components-checkbox-control__label {
+  line-height: var(--checkbox-input-size);
+}
+
 .components-checkbox-control__input[type=checkbox] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -582,9 +591,8 @@ p + .components-button.is-tertiary {
   display: inline-block;
   vertical-align: middle;
   width: 16px;
-  /* stylelint-disable */
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
   font: normal 30px/1 dashicons;
-  /* stylelint-enable */
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -630,6 +638,7 @@ p + .components-button.is-tertiary {
   vertical-align: middle;
   width: var(--checkbox-input-size);
   aspect-ratio: 1;
+  flex-shrink: 0;
 }
 
 svg.components-checkbox-control__checked,
@@ -654,6 +663,11 @@ svg.components-checkbox-control__indeterminate {
   }
 }
 
+.components-checkbox-control__help {
+  display: inline-block;
+  margin-inline-start: calc(var(--checkbox-input-size) + 12px);
+}
+
 .components-circular-option-picker {
   display: inline-block;
   width: 100%;
@@ -708,7 +722,7 @@ svg.components-checkbox-control__indeterminate {
   left: 1px;
   border-radius: 50%;
   z-index: -1;
-  /* stylelint-disable-next-line function-url-quotes */
+  /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
   background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 
@@ -1629,6 +1643,13 @@ body.is-dragging-components-draggable {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   color: #fff;
 }
+.components-form-token-field__suggestion[aria-disabled=true] {
+  pointer-events: none;
+  color: #949494;
+}
+.components-form-token-field__suggestion[aria-disabled=true].is-selected {
+  background-color: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
+}
 
 @media (min-width: 600px) {
   .components-guide {
@@ -1742,9 +1763,9 @@ body.is-dragging-components-draggable {
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
-.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
-.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
-.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
+.is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 .is-focusing-regions .editor-post-publish-panel {
   outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: -4px;
@@ -2131,6 +2152,7 @@ body.is-dragging-components-draggable {
 
 .components-panel__header {
   display: flex;
+  flex-shrink: 0;
   justify-content: space-between;
   align-items: center;
   padding: 0 16px;
@@ -2262,7 +2284,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-size: 13px;
   box-sizing: border-box;
   position: relative;
-  padding: 1em;
+  padding: 24px;
   width: 100%;
   text-align: right;
   margin: 0;
@@ -2270,6 +2292,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  gap: 16px;
   -moz-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: subpixel-antialiased;
   border-radius: 2px;
@@ -2291,15 +2314,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 
 .components-placeholder__label {
-  display: flex;
   font-weight: 600;
-  margin-bottom: 16px;
   align-items: center;
+  display: flex;
 }
 .components-placeholder__label > svg,
 .components-placeholder__label .dashicon,
 .components-placeholder__label .block-editor-block-icon {
-  margin-left: 12px;
+  margin-left: 4px;
   fill: currentColor;
 }
 @media (forced-colors: active) {
@@ -2319,6 +2341,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   flex-direction: row;
   width: 100%;
   flex-wrap: wrap;
+  gap: 16px;
+  justify-content: flex-start;
 }
 .components-placeholder__fieldset p,
 .components-placeholder__fieldset form p {
@@ -2342,7 +2366,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  margin: 0 0 0 8px;
   flex: 1 1 auto;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2374,22 +2397,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   color: rgba(30, 30, 30, 0.62);
 }
 
-.components-placeholder__instructions {
-  margin-bottom: 1em;
-}
-
 .components-placeholder__error {
-  margin-top: 1em;
   width: 100%;
-}
-
-.components-placeholder__fieldset .components-button {
-  margin-left: 12px;
-  margin-bottom: 12px;
-}
-.components-placeholder__fieldset .components-button:last-child {
-  margin-bottom: 0;
-  margin-left: 0;
+  gap: 8px;
 }
 
 .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
@@ -2400,10 +2410,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   margin-left: 0;
 }
 
-.components-placeholder.is-large .components-placeholder__label {
-  font-size: 18pt;
-  font-weight: normal;
-}
 .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions {
   display: none;
 }
@@ -2412,11 +2418,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.is-small .components-placeholder__fieldset form {
   flex-direction: column;
 }
-.components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button {
-  margin-left: auto;
-}
+.components-placeholder.is-medium .components-placeholder__fieldset > *,
+.components-placeholder.is-medium .components-button, .components-placeholder.is-small .components-placeholder__fieldset > *,
 .components-placeholder.is-small .components-button {
-  padding: 0 8px 2px;
+  width: 100%;
+  justify-content: center;
+}
+.components-placeholder.is-small {
+  padding: 16px;
 }
 
 /**
@@ -2437,7 +2446,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   background-color: rgba(0, 0, 0, 0.1);
 }
 .components-placeholder.has-illustration .components-placeholder__fieldset {
-  width: auto;
   margin-right: 0;
   margin-left: 0;
 }
@@ -2633,6 +2641,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   border-radius: 50%;
   width: 24px;
   height: 24px;
+  min-width: 24px;
+  max-width: 24px;
   display: inline-flex;
   margin: 0 0 0 6px;
   padding: 0;
@@ -2672,6 +2682,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   .components-radio-control__input[type=radio] {
     height: 20px;
     width: 20px;
+    min-width: 20px;
+    max-width: 20px;
   }
 }
 .components-radio-control__input[type=radio]:checked::before {
@@ -3311,21 +3323,10 @@ body.lockscroll {
 }
 .components-accessible-toolbar .components-button.has-icon.has-icon,
 .components-toolbar .components-button.has-icon.has-icon {
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
   min-width: 48px;
 }
-.components-accessible-toolbar .components-button.components-tab-button,
-.components-toolbar .components-button.components-tab-button {
-  font-weight: 500;
-}
-.components-accessible-toolbar .components-button.components-tab-button span,
-.components-toolbar .components-button.components-tab-button span {
-  display: inline-block;
-  padding-right: 0;
-  padding-left: 0;
-  position: relative;
-}
 
 @keyframes components-button__appear-animation {
   from {

package/build-style/style.css

@@ -171,8 +171,8 @@
   }
 }
 .components-autocomplete__popover .components-popover__content {
-  padding: 16px;
-  min-width: 220px;
+  padding: 8px;
+  min-width: 200px;
 }
 
 .components-autocomplete__result.components-button {
@@ -182,8 +182,13 @@
   text-align: left;
   width: 100%;
 }
-.components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+.components-autocomplete__result.components-button:focus:not(:disabled) {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.components-autocomplete__result.components-button.is-selected, .components-autocomplete__result.components-button:not(:disabled, [aria-disabled=true]):active {
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  color: #fff;
 }
 
 .components-button-group {
@@ -301,7 +306,7 @@
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
   color: var(--wp-components-color-accent-inverted, #fff);
   background-size: 100px 100%;
-  /* stylelint-disable */
+  /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   background-image: linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 70%);
   /* stylelint-enable */
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -337,11 +342,11 @@
   background: transparent;
 }
 .components-button.is-tertiary:hover:not(:disabled, [aria-disabled=true]) {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
 .components-button.is-tertiary:active:not(:disabled, [aria-disabled=true]) {
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list -- Allow tertiary buttons to use colors from the user admin color scheme. */
   background: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
 p + .components-button.is-tertiary {
@@ -404,7 +409,7 @@ p + .components-button.is-tertiary {
   animation: components-button__busy-animation 2500ms infinite linear;
   opacity: 1;
   background-size: 100px 100%;
-  /* stylelint-disable */
+  /* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
   background-image: linear-gradient(-45deg, #fafafa 33%, #e0e0e0 33%, #e0e0e0 70%, #fafafa 70%);
   /* stylelint-enable */
 }
@@ -492,6 +497,10 @@ p + .components-button.is-tertiary {
   }
 }
 
+.components-checkbox-control__label {
+  line-height: var(--checkbox-input-size);
+}
+
 .components-checkbox-control__input[type=checkbox] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
@@ -582,9 +591,8 @@ p + .components-button.is-tertiary {
   display: inline-block;
   vertical-align: middle;
   width: 16px;
-  /* stylelint-disable */
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
   font: normal 30px/1 dashicons;
-  /* stylelint-enable */
   speak: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -630,6 +638,7 @@ p + .components-button.is-tertiary {
   vertical-align: middle;
   width: var(--checkbox-input-size);
   aspect-ratio: 1;
+  flex-shrink: 0;
 }
 
 svg.components-checkbox-control__checked,
@@ -654,6 +663,11 @@ svg.components-checkbox-control__indeterminate {
   }
 }
 
+.components-checkbox-control__help {
+  display: inline-block;
+  margin-inline-start: calc(var(--checkbox-input-size) + 12px);
+}
+
 .components-circular-option-picker {
   display: inline-block;
   width: 100%;
@@ -708,7 +722,7 @@ svg.components-checkbox-control__indeterminate {
   right: 1px;
   border-radius: 50%;
   z-index: -1;
-  /* stylelint-disable-next-line function-url-quotes */
+  /* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
   background: url('data:image/svg+xml,%3Csvg width="28" height="28" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M6 8V6H4v2h2zM8 8V6h2v2H8zM10 16H8v-2h2v2zM12 16v-2h2v2h-2zM12 18v-2h-2v2H8v2h2v-2h2zM14 18v2h-2v-2h2zM16 18h-2v-2h2v2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M18 18h2v-2h-2v-2h2v-2h-2v-2h2V8h-2v2h-2V8h-2v2h2v2h-2v2h2v2h2v2zm-2-4v-2h2v2h-2z" fill="%23555D65"/%3E%3Cpath d="M18 18v2h-2v-2h2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M8 10V8H6v2H4v2h2v2H4v2h2v2H4v2h2v2H4v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2v2h-2V4h-2v2h-2V4h-2v2h-2V4h-2v2h2v2h-2v2H8zm0 2v-2H6v2h2zm2 0v-2h2v2h-2zm0 2v-2H8v2H6v2h2v2H6v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h-2v2h-2V6h-2v2h-2v2h2v2h-2v2h-2z" fill="%23555D65"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M4 0H2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v2H0v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2h-2V0h-2v2H8V0H6v2H4V0zm0 4V2H2v2h2zm2 0V2h2v2H6zm0 2V4H4v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2H2v2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h2v2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2v-2h-2v-2h2V8h-2V6h2V4h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2h-2V2h-2v2H8v2H6z" fill="%23555D65"/%3E%3C/svg%3E');
 }
 
@@ -1634,6 +1648,13 @@ body.is-dragging-components-draggable {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   color: #fff;
 }
+.components-form-token-field__suggestion[aria-disabled=true] {
+  pointer-events: none;
+  color: #949494;
+}
+.components-form-token-field__suggestion[aria-disabled=true].is-selected {
+  background-color: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
+}
 
 @media (min-width: 600px) {
   .components-guide {
@@ -1747,9 +1768,9 @@ body.is-dragging-components-draggable {
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
-.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel,
-.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel,
-.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-entities-saved-states-panel,
+.is-focusing-regions .interface-interface-skeleton__sidebar .editor-layout__toggle-sidebar-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-publish-panel,
+.is-focusing-regions .interface-interface-skeleton__actions .editor-layout__toggle-entities-saved-states-panel,
 .is-focusing-regions .editor-post-publish-panel {
   outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline-offset: -4px;
@@ -2136,6 +2157,7 @@ body.is-dragging-components-draggable {
 
 .components-panel__header {
   display: flex;
+  flex-shrink: 0;
   justify-content: space-between;
   align-items: center;
   padding: 0 16px;
@@ -2269,7 +2291,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-size: 13px;
   box-sizing: border-box;
   position: relative;
-  padding: 1em;
+  padding: 24px;
   width: 100%;
   text-align: left;
   margin: 0;
@@ -2277,6 +2299,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  gap: 16px;
   -moz-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: subpixel-antialiased;
   border-radius: 2px;
@@ -2298,15 +2321,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 
 .components-placeholder__label {
-  display: flex;
   font-weight: 600;
-  margin-bottom: 16px;
   align-items: center;
+  display: flex;
 }
 .components-placeholder__label > svg,
 .components-placeholder__label .dashicon,
 .components-placeholder__label .block-editor-block-icon {
-  margin-right: 12px;
+  margin-right: 4px;
   fill: currentColor;
 }
 @media (forced-colors: active) {
@@ -2326,6 +2348,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   flex-direction: row;
   width: 100%;
   flex-wrap: wrap;
+  gap: 16px;
+  justify-content: flex-start;
 }
 .components-placeholder__fieldset p,
 .components-placeholder__fieldset form p {
@@ -2349,7 +2373,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  margin: 0 8px 0 0;
   flex: 1 1 auto;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2381,22 +2404,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   color: rgba(30, 30, 30, 0.62);
 }
 
-.components-placeholder__instructions {
-  margin-bottom: 1em;
-}
-
 .components-placeholder__error {
-  margin-top: 1em;
   width: 100%;
-}
-
-.components-placeholder__fieldset .components-button {
-  margin-right: 12px;
-  margin-bottom: 12px;
-}
-.components-placeholder__fieldset .components-button:last-child {
-  margin-bottom: 0;
-  margin-right: 0;
+  gap: 8px;
 }
 
 .components-placeholder__fieldset .components-button:not(.is-link) ~ .components-button.is-link {
@@ -2407,10 +2417,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   margin-right: 0;
 }
 
-.components-placeholder.is-large .components-placeholder__label {
-  font-size: 18pt;
-  font-weight: normal;
-}
 .components-placeholder.is-medium .components-placeholder__instructions, .components-placeholder.is-small .components-placeholder__instructions {
   display: none;
 }
@@ -2419,11 +2425,14 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder.is-small .components-placeholder__fieldset form {
   flex-direction: column;
 }
-.components-placeholder.is-medium .components-placeholder__fieldset .components-button, .components-placeholder.is-small .components-placeholder__fieldset .components-button {
-  margin-right: auto;
-}
+.components-placeholder.is-medium .components-placeholder__fieldset > *,
+.components-placeholder.is-medium .components-button, .components-placeholder.is-small .components-placeholder__fieldset > *,
 .components-placeholder.is-small .components-button {
-  padding: 0 8px 2px;
+  width: 100%;
+  justify-content: center;
+}
+.components-placeholder.is-small {
+  padding: 16px;
 }
 
 /**
@@ -2444,7 +2453,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   background-color: rgba(0, 0, 0, 0.1);
 }
 .components-placeholder.has-illustration .components-placeholder__fieldset {
-  width: auto;
   margin-left: 0;
   margin-right: 0;
 }
@@ -2642,6 +2650,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   border-radius: 50%;
   width: 24px;
   height: 24px;
+  min-width: 24px;
+  max-width: 24px;
   display: inline-flex;
   margin: 0 6px 0 0;
   padding: 0;
@@ -2681,6 +2691,8 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   .components-radio-control__input[type=radio] {
     height: 20px;
     width: 20px;
+    min-width: 20px;
+    max-width: 20px;
   }
 }
 .components-radio-control__input[type=radio]:checked::before {
@@ -3323,21 +3335,10 @@ body.lockscroll {
 }
 .components-accessible-toolbar .components-button.has-icon.has-icon,
 .components-toolbar .components-button.has-icon.has-icon {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 8px;
+  padding-right: 8px;
   min-width: 48px;
 }
-.components-accessible-toolbar .components-button.components-tab-button,
-.components-toolbar .components-button.components-tab-button {
-  font-weight: 500;
-}
-.components-accessible-toolbar .components-button.components-tab-button span,
-.components-toolbar .components-button.components-tab-button span {
-  display: inline-block;
-  padding-left: 0;
-  padding-right: 0;
-  position: relative;
-}
 
 @keyframes components-button__appear-animation {
   from {

package/build-types/alignment-matrix-control/cell.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
-export default function Cell({ id, isActive, value, ...props }: WordPressComponentProps<AlignmentMatrixControlCellProps, 'span', false>): JSX.Element;
+export default function Cell({ id, isActive, value, ...props }: WordPressComponentProps<AlignmentMatrixControlCellProps, 'span', false>): import("react").JSX.Element;
 //# sourceMappingURL=cell.d.ts.map

package/build-types/alignment-matrix-control/cell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/cell.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAE,EAC7B,EAAE,EACF,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,MAAM,EAAE,KAAK,CAAE,eAiB3E"}
+{"version":3,"file":"cell.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/cell.tsx"],"names":[],"mappings":";AAeA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAE,EAC7B,EAAE,EACF,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,MAAM,EAAE,KAAK,CAAE,+BAiB3E"}

package/build-types/alignment-matrix-control/icon.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { AlignmentMatrixControlIconProps } from './types';
 import type { WordPressComponentProps } from '../context';
-declare function AlignmentMatrixControlIcon({ className, disablePointerEvents, size, style, value, ...props }: WordPressComponentProps<AlignmentMatrixControlIconProps, 'div', false>): JSX.Element;
+declare function AlignmentMatrixControlIcon({ className, disablePointerEvents, size, style, value, ...props }: WordPressComponentProps<AlignmentMatrixControlIconProps, 'div', false>): import("react").JSX.Element;
 export default AlignmentMatrixControlIcon;
 //# sourceMappingURL=icon.d.ts.map

package/build-types/alignment-matrix-control/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/icon.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAI1D,iBAAS,0BAA0B,CAAE,EACpC,SAAS,EACT,oBAA2B,EAC3B,IAAgB,EAChB,KAAU,EACV,KAAgB,EAChB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,KAAK,EAAE,KAAK,CAAE,eAiC1E;AAED,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/icon.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,+BAA+B,EAAE,MAAM,SAAS,CAAC;AAC/D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAI1D,iBAAS,0BAA0B,CAAE,EACpC,SAAS,EACT,oBAA2B,EAC3B,IAAgB,EAChB,KAAU,EACV,KAAgB,EAChB,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,KAAK,EAAE,KAAK,CAAE,+BAiC1E;AAED,eAAe,0BAA0B,CAAC"}

package/build-types/alignment-matrix-control/index.d.ts

@@ -22,7 +22,7 @@ import type { AlignmentMatrixControlProps } from './types';
  * };
  * ```
  */
-export declare function AlignmentMatrixControl({ className, id, label, defaultValue, value, onChange, width, ...props }: WordPressComponentProps<AlignmentMatrixControlProps, 'div', false>): JSX.Element;
+export declare function AlignmentMatrixControl({ className, id, label, defaultValue, value, onChange, width, ...props }: WordPressComponentProps<AlignmentMatrixControlProps, 'div', false>): import("react").JSX.Element;
 export declare namespace AlignmentMatrixControl {
     var Icon: typeof AlignmentMatrixControlIcon;
 }

package/build-types/alignment-matrix-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,0BAA0B,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAE,EACvC,SAAS,EACT,EAAE,EACF,KAAwC,EACxC,YAA8B,EAC9B,KAAK,EACL,QAAQ,EACR,KAAU,EACV,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,CAAE,eAyDtE;yBAlEe,sBAAsB;;;AAsEtC,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,0BAA0B,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,SAAS,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAE,EACvC,SAAS,EACT,EAAE,EACF,KAAwC,EACxC,YAA8B,EAC9B,KAAK,EACL,QAAQ,EACR,KAAU,EACV,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,CAAE,+BAwDtE;yBAjEe,sBAAsB;;;AAqEtC,eAAe,sBAAsB,CAAC"}

package/build-types/alignment-matrix-control/stories/index.story.d.ts

@@ -10,6 +10,6 @@ import AlignmentMatrixControl from '..';
 import type { AlignmentMatrixControlProps } from '../types';
 declare const meta: Meta<typeof AlignmentMatrixControl>;
 export default meta;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, AlignmentMatrixControlProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "children" | "as" | keyof AlignmentMatrixControlProps>>;
-export declare const IconSubcomponent: () => JSX.Element;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, AlignmentMatrixControlProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children" | "as" | keyof AlignmentMatrixControlProps>>;
+export declare const IconSubcomponent: () => import("react").JSX.Element;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/alignment-matrix-control/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAExC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAgB9C,CAAC;AACF,eAAe,IAAI,CAAC;AAqBpB,eAAO,MAAM,OAAO,yVAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mBAkB5B,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAQtD;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAExC,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAE5D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,sBAAsB,CAgB9C,CAAC;AACF,eAAe,IAAI,CAAC;AAqBpB,eAAO,MAAM,OAAO,kSAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mCAkB5B,CAAC"}