@wordpress/components 22.0.0 → 23.0.0

package/build-style/style.css

@@ -1,4 +1,10 @@
 @charset "UTF-8";
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -12,6 +18,12 @@
  * 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.
  */
+/**
+*  Converts a hex value into the rgb equivalent.
+*
+* @param {string} hex - the hexadecimal value to convert
+* @return {string} comma separated rgb values
+*/
 /**
  * Colors
  */
@@ -83,6 +95,8 @@
   --wp-admin-theme-color-darker-20: #005a87;
   --wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
   --wp-admin-border-width-focus: 2px;
+  --wp-block-synced-color: #7a00df;
+  --wp-block-synced-color--rgb: 122, 0, 223;
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
   :root {
@@ -171,7 +185,7 @@
   width: 100%;
 }
 .components-autocomplete__result.components-button.is-selected {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-button-group {
@@ -217,7 +231,7 @@
   box-sizing: border-box;
   padding: 6px 12px;
   border-radius: 2px;
-  color: #1e1e1e;
+  color: var(--wp-components-color-foreground, #1e1e1e);
   /**
    * Primary button style.
    */
@@ -256,22 +270,22 @@
 .components-button.is-primary {
   white-space: nowrap;
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
   text-decoration: none;
   text-shadow: none;
   outline: 1px solid transparent;
 }
 .components-button.is-primary:hover:not(:disabled) {
   background: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:active:not(:disabled) {
   background: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
   border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
 }
 .components-button.is-primary:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled {
   color: rgba(255, 255, 255, 0.4);
@@ -281,10 +295,10 @@
   outline: none;
 }
 .components-button.is-primary:disabled:focus:enabled, .components-button.is-primary:disabled:active:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:focus:enabled, .components-button.is-primary[aria-disabled=true]:enabled:focus:enabled, .components-button.is-primary[aria-disabled=true]:active:enabled:focus:enabled {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-button.is-primary.is-busy, .components-button.is-primary.is-busy:disabled, .components-button.is-primary.is-busy[aria-disabled=true] {
-  color: #fff;
+  color: var(--wp-components-color-accent-inverted, #fff);
   background-size: 100px 100%;
   /* stylelint-disable */
   background-image: linear-gradient(-45deg, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 33%, var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87)) 70%, var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba)) 70%);
@@ -295,7 +309,7 @@
   outline: 1px solid transparent;
 }
 .components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
-  background: #ddd;
+  background: var(--wp-components-color-gray-300, #ddd);
   color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   box-shadow: none;
 }
@@ -375,7 +389,7 @@ p + .components-button.is-tertiary {
   border-radius: 2px;
 }
 .components-button:not([aria-disabled=true]):active {
-  color: inherit;
+  color: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button:disabled, .components-button[aria-disabled=true] {
   cursor: default;
@@ -421,16 +435,16 @@ p + .components-button.is-tertiary {
   margin-right: 10px;
 }
 .components-button.is-pressed {
-  color: #fff;
-  background: #1e1e1e;
+  color: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button.is-pressed:focus:not(:disabled) {
-  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  box-shadow: inset 0 0 0 1px var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-button.is-pressed:hover:not(:disabled) {
-  color: #fff;
-  background: #1e1e1e;
+  color: var(--wp-components-color-foreground-inverted, #fff);
+  background: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button svg {
   fill: currentColor;
@@ -456,7 +470,7 @@ p + .components-button.is-tertiary {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -566,12 +580,12 @@ p + .components-button.is-tertiary {
   }
 }
 .components-checkbox-control__input[type=checkbox]:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 .components-checkbox-control__input[type=checkbox]:checked, .components-checkbox-control__input[type=checkbox]:indeterminate {
-  background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-checkbox-control__input[type=checkbox]:checked::-ms-check, .components-checkbox-control__input[type=checkbox]:indeterminate::-ms-check {
   opacity: 0;
@@ -639,6 +653,7 @@ svg.components-checkbox-control__indeterminate {
   vertical-align: top;
   transform: scale(1);
   transition: 100ms transform ease;
+  will-change: transform;
 }
 @media (prefers-reduced-motion: reduce) {
   .components-circular-option-picker__option-wrapper {
@@ -792,7 +807,7 @@ input.components-combobox-control__input[type=text]:focus {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -882,7 +897,7 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 1px solid transparent;
 }
 .components-color-palette__custom-color:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline-width: 2px;
 }
 
@@ -988,6 +1003,11 @@ input.components-combobox-control__input[type=text]:focus {
   outline: 0;
 }
 
+.components-custom-select-control__hint {
+  color: #949494;
+  margin-left: 10px;
+}
+
 .components-custom-select-control__menu {
   border: 1px solid #1e1e1e;
   background-color: #fff;
@@ -1024,7 +1044,7 @@ input.components-combobox-control__input[type=text]:focus {
   background: #ddd;
 }
 .components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #757575;
+  color: #949494;
   text-align: right;
   padding-right: 4px;
 }
@@ -1098,7 +1118,7 @@ body.is-dragging-components-draggable {
   height: 100%;
   width: 100%;
   display: flex;
-  background-color: var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   align-items: center;
   justify-content: center;
   z-index: 50;
@@ -1271,12 +1291,12 @@ body.is-dragging-components-draggable {
   }
 }
 .components-form-toggle.is-checked .components-form-toggle__track {
-  background-color: var(--wp-admin-theme-color);
-  border: 1px solid var(--wp-admin-theme-color);
+  background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  border: 1px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border: 9px solid transparent;
 }
 .components-form-toggle .components-form-toggle__input:focus + .components-form-toggle__track {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
@@ -1314,7 +1334,7 @@ body.is-dragging-components-draggable {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -1420,7 +1440,7 @@ body.is-dragging-components-draggable {
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__token-text {
   background: transparent;
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-form-token-field__token.is-borderless .components-form-token-field__remove-token {
   background: transparent;
@@ -1491,7 +1511,7 @@ body.is-dragging-components-draggable {
   overflow-y: auto;
   transition: all 0.15s ease-in-out;
   list-style: none;
-  border-top: 1px solid #757575;
+  border-top: 1px solid var(--wp-components-color-gray-600, #949494);
   margin: 0;
   padding: 0;
 }
@@ -1511,7 +1531,7 @@ body.is-dragging-components-draggable {
   cursor: pointer;
 }
 .components-form-token-field__suggestion.is-selected {
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   color: #fff;
 }
 
@@ -1631,27 +1651,37 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 
-.is-focusing-regions [role=region]:focus::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  outline: 4px solid transparent;
-  box-shadow: inset 0 0 0 4px var(--wp-admin-theme-color);
+.is-focusing-regions [role=region]:focus {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
 }
-@supports (outline-offset: 1px) {
-  .is-focusing-regions [role=region]:focus::after {
-    content: none;
-  }
-  .is-focusing-regions [role=region]:focus {
-    outline-style: solid;
-    outline-color: var(--wp-admin-theme-color);
-    outline-width: 4px;
-    outline-offset: -4px;
-  }
+.is-focusing-regions [role=region]:focus .interface-navigable-region__stacker {
+  position: relative;
+  z-index: -1;
+}
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .interface-navigable-region__stacker,
+.is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__sidebar .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__sidebar .edit-post-layout__toggle-sidebar-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions .interface-interface-skeleton__actions .interface-navigable-region__stacker,
+.is-focusing-regions .interface-interface-skeleton__actions .edit-post-layout__toggle-publish-panel {
+  outline: inherit;
+  outline-offset: inherit;
+}
+.is-focusing-regions [role=region].interface-interface-skeleton__actions:focus .editor-post-publish-panel {
+  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline-offset: -4px;
+}
+
+.interface-navigable-region__stacker {
+  height: 100%;
+  width: 100%;
 }
 
 .components-menu-group + .components-menu-group {
@@ -1717,7 +1747,7 @@ body.is-dragging-components-draggable {
 .components-menu-item__button.components-button:disabled.is-tertiary,
 .components-menu-item__button.components-button[aria-disabled=true].is-tertiary {
   background: none;
-  color: var(--wp-admin-theme-color-darker-10);
+  color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
   opacity: 0.3;
 }
 
@@ -1788,7 +1818,7 @@ body.is-dragging-components-draggable {
   margin: 0;
   width: 100%;
   background: #fff;
-  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15);
   border-radius: 2px;
   overflow: hidden;
   display: flex;
@@ -1897,7 +1927,7 @@ body.is-dragging-components-draggable {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   background-color: #fff;
-  border-left: 4px solid var(--wp-admin-theme-color);
+  border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   margin: 5px 15px 2px;
   padding: 8px 12px;
   align-items: center;
@@ -2064,7 +2094,7 @@ body.is-dragging-components-draggable {
   }
 }
 .components-panel__body-toggle.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2216,7 +2246,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2309,8 +2339,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
-  -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
+  backface-visibility: hidden;
   border-radius: 2px;
   overflow: hidden;
 }
@@ -2374,6 +2403,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover {
   z-index: 1000000;
+  will-change: transform;
 }
 .components-popover.is-expanded {
   position: fixed;
@@ -2386,21 +2416,17 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 
 .components-popover__content {
   background: #fff;
-  outline: 1px solid #ccc;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 1px #ccc, 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   box-sizing: border-box;
   width: min-content;
 }
 .is-alternate .components-popover__content {
-  outline: 1px solid #1e1e1e;
-  box-shadow: none;
+  box-shadow: 0 0 0 1px #1e1e1e;
 }
 .is-unstyled .components-popover__content {
   background: none;
-  border: none;
   border-radius: 0;
-  outline: none;
   box-shadow: none;
 }
 .components-popover.is-expanded .components-popover__content {
@@ -2408,9 +2434,10 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   height: calc(100% - 48px);
   overflow-y: visible;
   width: auto;
-  border: none;
-  outline: none;
-  border-top: 1px solid #1e1e1e;
+  box-shadow: 0 -1px 0 0 #ccc;
+}
+.components-popover.is-expanded.is-alternate .components-popover__content {
+  box-shadow: 0 -1px 0 #1e1e1e;
 }
 
 .components-popover__header {
@@ -2493,7 +2520,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2589,7 +2616,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   position: absolute;
   top: calc(50% - 8px);
   right: calc(50% - 8px);
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   outline: 2px solid transparent;
 }
 
@@ -2599,12 +2626,13 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   content: "";
   width: 3px;
   height: 3px;
-  background: var(--wp-admin-theme-color);
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
   cursor: inherit;
   position: absolute;
   top: calc(50% - 1px);
   right: calc(50% - 1px);
   transition: transform 0.1s ease-in;
+  will-change: transform;
   opacity: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -2774,7 +2802,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -2785,6 +2813,8 @@ body.lockscroll {
   border: none;
   width: 100%;
   height: 48px;
+  margin-left: 0;
+  margin-right: 0;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
 }
@@ -2823,7 +2853,7 @@ body.lockscroll {
 }
 .components-search-control input[type=search].components-search-control__input:focus {
   background: #fff;
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-search-control input[type=search].components-search-control__input::placeholder {
   color: #757575;
@@ -2890,7 +2920,7 @@ body.lockscroll {
   }
 }
 .components-snackbar:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 .components-snackbar.components-snackbar-explicit-dismiss {
   cursor: default;
@@ -2926,7 +2956,7 @@ body.lockscroll {
   outline: 1px dotted #fff;
 }
 .components-snackbar__action.components-button:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: var(--wp-admin-theme-color);
+  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-snackbar__content {
@@ -2959,47 +2989,62 @@ body.lockscroll {
 }
 
 .components-tab-panel__tabs-item {
+  position: relative;
+  border-radius: 0;
+  height: 48px;
   background: transparent;
   border: none;
   box-shadow: none;
-  border-radius: 0;
   cursor: pointer;
-  height: 48px;
   padding: 3px 16px;
   margin-left: 0;
   font-weight: 500;
-  transition: box-shadow 0.1s linear;
-  box-sizing: border-box;
-}
-.components-tab-panel__tabs-item::after {
-  content: attr(data-label);
-  display: block;
-  height: 0;
-  overflow: hidden;
-  speak: none;
-  visibility: hidden;
 }
 .components-tab-panel__tabs-item:focus:not(:disabled) {
-  box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-}
-.components-tab-panel__tabs-item.is-active {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 -1.5px 0 0 var(--wp-admin-theme-color);
   position: relative;
+  box-shadow: none;
 }
-.components-tab-panel__tabs-item.is-active::before {
+.components-tab-panel__tabs-item::after {
   content: "";
   position: absolute;
-  top: 0;
-  bottom: 1px;
   right: 0;
+  bottom: 0;
   left: 0;
-  border-bottom: 1.5px solid transparent;
+  pointer-events: none;
+  background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  height: calc(0 * var(--wp-admin-border-width-focus));
+  border-radius: 0;
+  transition: all 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-tab-panel__tabs-item::after {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
-.components-tab-panel__tabs-item:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+.components-tab-panel__tabs-item.is-active::after {
+  height: calc(1 * var(--wp-admin-border-width-focus));
 }
-.components-tab-panel__tabs-item.is-active:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
+.components-tab-panel__tabs-item::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  left: 12px;
+  pointer-events: none;
+  box-shadow: 0 0 0 0 transparent;
+  border-radius: 2px;
+  transition: all 0.1s linear;
+}
+@media (prefers-reduced-motion: reduce) {
+  .components-tab-panel__tabs-item::before {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
+}
+.components-tab-panel__tabs-item:focus-visible::before {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 }
 
 .components-text-control__input,
@@ -3022,7 +3067,7 @@ body.lockscroll {
   box-shadow: 0 0 0 transparent;
   transition: box-shadow 0.1s linear;
   border-radius: 2px;
-  border: 1px solid #757575;
+  border: 1px solid #949494;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
@@ -3343,11 +3388,11 @@ div.components-toolbar > div + div.has-left-divider::before {
 }
 
 .components-tooltip .components-popover__content {
-  background: #1e1e1e;
+  background: var(--wp-components-color-foreground, #1e1e1e);
   border-radius: 2px;
   border-width: 0;
   outline: none;
-  color: #fff;
+  color: var(--wp-components-color-foreground-inverted, #fff);
   white-space: nowrap;
   text-align: center;
   line-height: 1.4;

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

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

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

@@ -0,0 +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,eAAe,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,IAAI,CAAE,EAC7B,QAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,+BAA+B,EAAE,MAAM,EAAE,KAAK,CAAE,eAc3E"}

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

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

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

@@ -0,0 +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,eAAe,CAAC;AAI7D,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"}

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import AlignmentMatrixControlIcon from './icon';
+import type { WordPressComponentProps } from '../ui/context';
+import type { AlignmentMatrixControlProps } from './types';
+/**
+ *
+ * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+ *
+ * ```jsx
+ * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ alignment, setAlignment ] = useState( 'center center' );
+ *
+ * 	return (
+ * 		<AlignmentMatrixControl
+ * 			value={ alignment }
+ * 			onChange={ setAlignment }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export declare function AlignmentMatrixControl({ className, id, label, defaultValue, value, onChange, width, ...props }: WordPressComponentProps<AlignmentMatrixControlProps, 'div', false>): JSX.Element;
+export declare namespace AlignmentMatrixControl {
+    var Icon: typeof AlignmentMatrixControlIcon;
+}
+export default AlignmentMatrixControl;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/alignment-matrix-control/index.tsx"],"names":[],"mappings":";AAkBA,OAAO,0BAA0B,MAAM,QAAQ,CAAC;AAEhD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,KAAK,EACX,2BAA2B,EAE3B,MAAM,SAAS,CAAC;AAajB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,sBAAsB,CAAE,EACvC,SAAS,EACT,EAAE,EACF,KAAwC,EACxC,YAA8B,EAC9B,KAAK,EACL,QAAe,EACf,KAAU,EACV,GAAG,KAAK,EACR,EAAE,uBAAuB,CAAE,2BAA2B,EAAE,KAAK,EAAE,KAAK,CAAE,eAiEtE;yBA1Ee,sBAAsB;;;AA8EtC,eAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+/**
+ * Internal dependencies
+ */
+import AlignmentMatrixControl from '..';
+declare const meta: ComponentMeta<typeof AlignmentMatrixControl>;
+export default meta;
+export declare const Default: ComponentStory<typeof AlignmentMatrixControl>;
+export declare const IconSubcomponent: () => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/stories/index.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQtE;;GAEG;AACH,OAAO,sBAAsB,MAAM,IAAI,CAAC;AAIxC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,sBAAsB,CAcvD,CAAC;AACF,eAAe,IAAI,CAAC;AA0BpB,eAAO,MAAM,OAAO,+CAAsB,CAAC;AAE3C,eAAO,MAAM,gBAAgB,mBAkB5B,CAAC"}