@wordpress/components 28.3.0 → 28.5.0

package/build-style/style-rtl.css

@@ -34,6 +34,9 @@
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
+/**
+ * Radius scale.
+ */
 /**
  * Dimensions.
  */
@@ -186,10 +189,6 @@
   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 {
   display: inline-block;
@@ -217,6 +216,12 @@
   box-shadow: inset 0 0 0 1px #1e1e1e;
 }
 
+/**
+ * For easier testing of potential regressions, you can use a Button variant matrix
+ * available in a special Storybook instance by running `npm run storybook:e2e:dev`.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
+ */
 .components-button {
   display: inline-flex;
   text-decoration: none;
@@ -263,12 +268,9 @@
 .components-button.is-next-40px-default-size {
   height: 40px;
 }
-.components-button[aria-expanded=true], .components-button:hover {
+.components-button[aria-expanded=true], .components-button:hover:not(:disabled, [aria-disabled=true]) {
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
-.components-button:disabled:hover, .components-button[aria-disabled=true]:hover {
-  color: initial;
-}
 .components-button:focus:not(:disabled) {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   outline: 3px solid transparent;
@@ -297,7 +299,6 @@
   color: rgba(255, 255, 255, 0.4);
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  opacity: 1;
   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 {
@@ -321,7 +322,6 @@
   color: #949494;
   background: transparent;
   transform: none;
-  opacity: 1;
 }
 .components-button.is-secondary {
   box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -364,15 +364,24 @@ p + .components-button.is-tertiary {
 .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link) {
   color: #cc1818;
 }
-.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):hover:not(:disabled, [aria-disabled=true]) {
   color: #710d0d;
 }
-.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):focus {
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #cc1818;
 }
-.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled) {
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):active:not(:disabled, [aria-disabled=true]) {
   background: #ccc;
 }
+.components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link):disabled, .components-button.is-destructive:not(.is-primary):not(.is-secondary):not(.is-tertiary):not(.is-link)[aria-disabled=true] {
+  color: #949494;
+}
+.components-button.is-destructive.is-tertiary:hover:not(:disabled, [aria-disabled=true]) {
+  background: rgba(204, 24, 24, 0.04);
+}
+.components-button.is-destructive.is-tertiary:active:not(:disabled, [aria-disabled=true]) {
+  background: rgba(204, 24, 24, 0.08);
+}
 .components-button.is-link {
   margin: 0;
   padding: 0;
@@ -398,16 +407,18 @@ p + .components-button.is-tertiary {
 .components-button.is-link:focus {
   border-radius: 2px;
 }
+.components-button.is-link:disabled, .components-button.is-link[aria-disabled=true] {
+  color: #949494;
+}
 .components-button:not(:disabled, [aria-disabled=true]):active {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 .components-button:disabled, .components-button[aria-disabled=true] {
   cursor: default;
-  opacity: 0.3;
+  color: #949494;
 }
 .components-button.is-busy, .components-button.is-secondary.is-busy, .components-button.is-secondary.is-busy:disabled, .components-button.is-secondary.is-busy[aria-disabled=true] {
   animation: components-button__busy-animation 2500ms infinite linear;
-  opacity: 1;
   background-size: 100px 100%;
   /* 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%);
@@ -458,18 +469,23 @@ p + .components-button.is-tertiary {
   padding-right: 8px;
   gap: 4px;
 }
-.components-button.is-pressed {
+.components-button.is-pressed, .components-button.is-pressed:hover {
   color: var(--wp-components-color-foreground-inverted, #fff);
+}
+.components-button.is-pressed:not(:disabled, [aria-disabled=true]), .components-button.is-pressed:hover:not(:disabled, [aria-disabled=true]) {
   background: var(--wp-components-color-foreground, #1e1e1e);
 }
+.components-button.is-pressed:disabled, .components-button.is-pressed[aria-disabled=true] {
+  color: #949494;
+}
+.components-button.is-pressed:disabled:not(.is-primary):not(.is-secondary):not(.is-tertiary), .components-button.is-pressed[aria-disabled=true]:not(.is-primary):not(.is-secondary):not(.is-tertiary) {
+  color: var(--wp-components-color-foreground-inverted, #fff);
+  background: #949494;
+}
 .components-button.is-pressed:focus:not(:disabled) {
   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, #3858e9));
   outline: 2px solid transparent;
 }
-.components-button.is-pressed:hover:not(:disabled) {
-  color: var(--wp-components-color-foreground-inverted, #fff);
-  background: var(--wp-components-color-foreground, #1e1e1e);
-}
 .components-button svg {
   fill: currentColor;
   outline: none;
@@ -494,12 +510,13 @@ p + .components-button.is-tertiary {
 }
 @media (min-width: 600px) {
   .components-checkbox-control {
-    --checkbox-input-size: 20px;
+    --checkbox-input-size: 16px;
   }
 }
 
 .components-checkbox-control__label {
   line-height: var(--checkbox-input-size);
+  cursor: pointer;
 }
 
 .components-checkbox-control__input[type=checkbox] {
@@ -638,6 +655,7 @@ p + .components-button.is-tertiary {
   vertical-align: middle;
   width: var(--checkbox-input-size);
   aspect-ratio: 1;
+  line-height: 1;
   flex-shrink: 0;
 }
 
@@ -1051,75 +1069,6 @@ input.components-combobox-control__input[type=text]:focus {
   z-index: 0;
 }
 
-.components-custom-select-control {
-  position: relative;
-  font-size: 13px;
-}
-
-.components-custom-select-control__button {
-  position: relative;
-  text-align: right;
-  outline: 0;
-}
-
-.components-custom-select-control__hint {
-  color: #949494;
-  margin-right: 10px;
-}
-
-.components-custom-select-control__menu-wrapper {
-  position: absolute;
-  min-width: 100%;
-  bottom: 0;
-}
-
-.components-custom-select-control__menu {
-  border: 1px solid #1e1e1e;
-  background-color: #fff;
-  border-radius: 2px;
-  outline: none;
-  transition: none;
-  max-height: 400px;
-  min-width: 100%;
-  overflow: auto;
-  padding: 0;
-  position: absolute;
-  z-index: 1000000;
-}
-.components-custom-select-control__menu[aria-hidden=true] {
-  display: none;
-}
-
-.components-custom-select-control__item {
-  align-items: center;
-  display: grid;
-  grid-template-columns: auto auto;
-  list-style-type: none;
-  padding: 8px 16px;
-  cursor: default;
-  line-height: 28px;
-}
-.components-custom-select-control__item:not(.is-next-40px-default-size) {
-  padding: 8px;
-}
-.components-custom-select-control__item.has-hint {
-  grid-template-columns: auto auto 30px;
-}
-.components-custom-select-control__item.is-highlighted {
-  background: #ddd;
-}
-.components-custom-select-control__item .components-custom-select-control__item-hint {
-  color: #949494;
-  text-align: left;
-  padding-left: 4px;
-}
-.components-custom-select-control__item .components-custom-select-control__item-icon {
-  margin-right: auto;
-}
-.components-custom-select-control__item:last-child {
-  margin-bottom: 0;
-}
-
 .block-editor-dimension-control .components-base-control__field {
   display: flex;
   align-items: center;
@@ -1371,6 +1320,7 @@ body.is-dragging-components-draggable {
 .components-form-toggle {
   position: relative;
   display: inline-block;
+  height: 16px;
 }
 .components-form-toggle .components-form-toggle__track {
   position: relative;
@@ -1379,10 +1329,10 @@ body.is-dragging-components-draggable {
   box-sizing: border-box;
   vertical-align: top;
   background-color: #fff;
-  border: 1px solid #1e1e1e;
-  width: 36px;
-  height: 18px;
-  border-radius: 9px;
+  border: 1px solid #949494;
+  width: 32px;
+  height: 16px;
+  border-radius: 8px;
   transition: 0.2s background-color ease, 0.2s border-color ease;
   overflow: hidden;
 }
@@ -1397,7 +1347,7 @@ body.is-dragging-components-draggable {
   position: absolute;
   inset: 0;
   box-sizing: border-box;
-  border-top: 18px solid transparent;
+  border-top: 16px solid transparent;
   transition: 0.2s opacity ease;
   opacity: 0;
 }
@@ -1411,8 +1361,8 @@ body.is-dragging-components-draggable {
   display: block;
   position: absolute;
   box-sizing: border-box;
-  top: 3px;
-  right: 3px;
+  top: 2px;
+  right: 2px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
@@ -1441,7 +1391,7 @@ body.is-dragging-components-draggable {
 .components-form-toggle.is-checked .components-form-toggle__thumb {
   background-color: #fff;
   border-width: 0;
-  transform: translateX(-18px);
+  transform: translateX(-16px);
 }
 .components-form-toggle.is-disabled, .components-disabled .components-form-toggle {
   opacity: 0.3;
@@ -1465,6 +1415,9 @@ body.is-dragging-components-draggable {
 .components-form-toggle input.components-form-toggle__input[type=checkbox]::before {
   content: "";
 }
+.components-form-toggle input.components-form-toggle__input[type=checkbox]:not(:disabled, [aria-disabled=true]) {
+  cursor: pointer;
+}
 
 .components-form-token-field__input-container {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -1774,28 +1727,32 @@ body.is-dragging-components-draggable {
   position: relative;
 }
 [role=region].interface-interface-skeleton__content:focus-visible::after {
+  content: "";
   position: absolute;
+  pointer-events: none;
   top: 0;
-  right: 0;
   left: 0;
   bottom: 0;
-  content: "";
-  pointer-events: none;
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: -4px;
+  right: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1000000;
 }
 
 .is-focusing-regions [role=region]:focus::after {
+  content: "";
   position: absolute;
+  pointer-events: none;
   top: 0;
-  right: 0;
   left: 0;
   bottom: 0;
-  content: "";
-  pointer-events: none;
-  outline: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: -4px;
+  right: 0;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
   z-index: 1000000;
 }
 .is-focusing-regions.is-distraction-free .interface-interface-skeleton__header .edit-post-header,
@@ -1803,8 +1760,10 @@ body.is-dragging-components-draggable {
 .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;
+  outline-color: var(--wp-admin-theme-color);
+  outline-style: solid;
+  outline-width: calc(2 * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+  outline-offset: calc(2 * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
 }
 
 .components-menu-group + .components-menu-group {
@@ -2475,7 +2434,6 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
           backdrop-filter: blur(100px);
   background-color: transparent;
   backface-visibility: hidden;
-  border-radius: 2px;
   overflow: hidden;
 }
 .is-dark-theme .components-placeholder.has-illustration {
@@ -2655,12 +2613,21 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   stroke: #1e1e1e;
 }
 
+.components-radio-control__group-wrapper.has-help {
+  margin-block-end: 12px;
+}
+
 .components-radio-control__option {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto minmax(0, max-content);
+  column-gap: 8px;
   align-items: center;
 }
 
 .components-radio-control__input[type=radio] {
+  grid-column: 1;
+  grid-row: 1;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
@@ -2679,8 +2646,9 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   height: 24px;
   min-width: 24px;
   max-width: 24px;
+  position: relative;
   display: inline-flex;
-  margin: 0 0 0 8px;
+  margin: 0;
   padding: 0;
   appearance: none;
   cursor: pointer;
@@ -2715,24 +2683,28 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 @media (min-width: 600px) {
   .components-radio-control__input[type=radio] {
-    height: 20px;
-    width: 20px;
-    min-width: 20px;
-    max-width: 20px;
+    height: 16px;
+    width: 16px;
+    min-width: 16px;
+    max-width: 16px;
   }
 }
 .components-radio-control__input[type=radio]:checked::before {
   box-sizing: inherit;
-  width: 8px;
-  height: 8px;
-  transform: translate(-7px, 7px);
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
   margin: 0;
   background-color: #fff;
   border: 4px solid #fff;
 }
 @media (min-width: 600px) {
   .components-radio-control__input[type=radio]:checked::before {
-    transform: translate(-5px, 5px);
+    width: 8px;
+    height: 8px;
   }
 }
 .components-radio-control__input[type=radio]:focus {
@@ -2741,10 +2713,12 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 .components-radio-control__input[type=radio]:checked {
   background: var(--wp-admin-theme-color);
-  border-color: var(--wp-admin-theme-color);
+  border: none;
 }
 .components-radio-control__input[type=radio]:focus {
-  box-shadow: 0 0 0 2px var(--wp-components-color-background, #fff), 0 0 0 4px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+  outline-offset: 2px;
 }
 .components-radio-control__input[type=radio]:checked {
   background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
@@ -2756,7 +2730,22 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 
 .components-radio-control__label {
+  grid-column: 2;
+  grid-row: 1;
   cursor: pointer;
+  line-height: 24px;
+}
+@media (min-width: 600px) {
+  .components-radio-control__label {
+    line-height: 16px;
+  }
+}
+
+.components-radio-control__option-description {
+  grid-column: 2;
+  grid-row: 2;
+  padding-block-start: 4px;
+  margin-top: 0;
 }
 
 .components-resizable-box__handle {
@@ -3279,6 +3268,8 @@ body.lockscroll {
 .components-text-control__input[type=month].is-next-40px-default-size,
 .components-text-control__input[type=number].is-next-40px-default-size {
   height: 40px;
+  padding-right: 16px;
+  padding-left: 16px;
 }
 
 .components-tip {
@@ -3295,6 +3286,18 @@ body.lockscroll {
   margin: 0;
 }
 
+.components-toggle-control__label {
+  line-height: 16px;
+}
+.components-toggle-control__label:not(.is-disabled) {
+  cursor: pointer;
+}
+
+.components-toggle-control__help {
+  display: inline-block;
+  margin-inline-start: 40px;
+}
+
 .components-accessible-toolbar {
   display: inline-flex;
   border: 1px solid #1e1e1e;