@wordpress/components 28.4.0 → 28.6.0

package/build-style/style-rtl.css

@@ -35,10 +35,13 @@
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
 /**
- * Dimensions.
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -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;
@@ -921,7 +937,7 @@ input.components-combobox-control__input[type=text]:focus {
   box-sizing: border-box;
   cursor: pointer;
   outline: 1px solid transparent;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 }
 .components-color-palette__custom-color-button:focus {
@@ -943,7 +959,7 @@ input.components-combobox-control__input[type=text]:focus {
 
 .components-color-palette__custom-color-text-wrapper {
   padding: 12px 16px;
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 4px 4px;
   position: relative;
   font-size: 13px;
   box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2);
@@ -1620,7 +1636,6 @@ body.is-dragging-components-draggable {
 .components-guide .components-modal__content {
   padding: 0;
   margin-top: 0;
-  border-radius: 2px;
 }
 .components-guide .components-modal__content::before {
   content: none;
@@ -1886,7 +1901,7 @@ body.is-dragging-components-draggable {
   width: 100%;
   background: #fff;
   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: 4px 4px 0 0;
+  border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
   animation: components-modal__appear-animation 0.1s ease-out;
@@ -1905,7 +1920,7 @@ body.is-dragging-components-draggable {
 }
 @media (min-width: 600px) {
   .components-modal__frame {
-    border-radius: 4px;
+    border-radius: 8px;
     margin: auto;
     width: auto;
     min-width: 350px;
@@ -2414,11 +2429,11 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   color: inherit;
   display: flex;
   box-shadow: none;
+  border-radius: 0;
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
   backface-visibility: hidden;
-  border-radius: 2px;
   overflow: hidden;
 }
 .is-dark-theme .components-placeholder.has-illustration {
@@ -2503,7 +2518,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-popover__content {
   background: #fff;
   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;
+  border-radius: 4px;
   box-sizing: border-box;
   width: min-content;
 }
@@ -2598,12 +2613,29 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   stroke: #1e1e1e;
 }
 
+.components-radio-control {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 13px;
+}
+
+.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;
@@ -2624,7 +2656,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   max-width: 24px;
   position: relative;
   display: inline-flex;
-  margin: 0 0 0 8px;
+  margin: 0;
   padding: 0;
   appearance: none;
   cursor: pointer;
@@ -2706,6 +2738,8 @@ 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;
 }
@@ -2715,6 +2749,15 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   }
 }
 
+.components-radio-control__option-description {
+  grid-column: 2;
+  grid-row: 2;
+  padding-block-start: 4px;
+}
+.components-radio-control__option-description.components-radio-control__option-description {
+  margin-top: 0;
+}
+
 .components-resizable-box__handle {
   display: none;
   width: 23px;
@@ -2925,7 +2968,7 @@ body.lockscroll {
   background: rgba(0, 0, 0, 0.85);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
           backdrop-filter: blur(16px) saturate(180%);
-  border-radius: 2px;
+  border-radius: 4px;
   box-shadow: 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);
   color: #fff;
   padding: 12px 20px;
@@ -3235,6 +3278,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 {
@@ -3259,7 +3304,8 @@ body.lockscroll {
 }
 
 .components-toggle-control__help {
-  margin-right: 40px;
+  display: inline-block;
+  margin-inline-start: 40px;
 }
 
 .components-accessible-toolbar {

package/build-style/style.css

@@ -35,10 +35,13 @@
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
 /**
- * Dimensions.
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -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-left: 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;
@@ -921,7 +937,7 @@ input.components-combobox-control__input[type=text]:focus {
   box-sizing: border-box;
   cursor: pointer;
   outline: 1px solid transparent;
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
 }
 .components-color-palette__custom-color-button:focus {
@@ -945,7 +961,7 @@ input.components-combobox-control__input[type=text]:focus {
 
 .components-color-palette__custom-color-text-wrapper {
   padding: 12px 16px;
-  border-radius: 0 0 2px 2px;
+  border-radius: 0 0 4px 4px;
   position: relative;
   font-size: 13px;
   box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), inset 1px 0 0 0 rgba(0, 0, 0, 0.2), inset -1px 0 0 0 rgba(0, 0, 0, 0.2);
@@ -1625,7 +1641,6 @@ body.is-dragging-components-draggable {
 .components-guide .components-modal__content {
   padding: 0;
   margin-top: 0;
-  border-radius: 2px;
 }
 .components-guide .components-modal__content::before {
   content: none;
@@ -1891,7 +1906,7 @@ body.is-dragging-components-draggable {
   width: 100%;
   background: #fff;
   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: 4px 4px 0 0;
+  border-radius: 8px 8px 0 0;
   overflow: hidden;
   display: flex;
   animation: components-modal__appear-animation 0.1s ease-out;
@@ -1910,7 +1925,7 @@ body.is-dragging-components-draggable {
 }
 @media (min-width: 600px) {
   .components-modal__frame {
-    border-radius: 4px;
+    border-radius: 8px;
     margin: auto;
     width: auto;
     min-width: 350px;
@@ -2421,11 +2436,11 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   color: inherit;
   display: flex;
   box-shadow: none;
+  border-radius: 0;
   -webkit-backdrop-filter: blur(100px);
           backdrop-filter: blur(100px);
   background-color: transparent;
   backface-visibility: hidden;
-  border-radius: 2px;
   overflow: hidden;
 }
 .is-dark-theme .components-placeholder.has-illustration {
@@ -2510,7 +2525,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-popover__content {
   background: #fff;
   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;
+  border-radius: 4px;
   box-sizing: border-box;
   width: min-content;
 }
@@ -2607,12 +2622,29 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   stroke: #1e1e1e;
 }
 
+.components-radio-control {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-size: 13px;
+}
+
+.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;
@@ -2633,7 +2665,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   max-width: 24px;
   position: relative;
   display: inline-flex;
-  margin: 0 8px 0 0;
+  margin: 0;
   padding: 0;
   appearance: none;
   cursor: pointer;
@@ -2715,6 +2747,8 @@ 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;
 }
@@ -2724,6 +2758,15 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   }
 }
 
+.components-radio-control__option-description {
+  grid-column: 2;
+  grid-row: 2;
+  padding-block-start: 4px;
+}
+.components-radio-control__option-description.components-radio-control__option-description {
+  margin-top: 0;
+}
+
 .components-resizable-box__handle {
   display: none;
   width: 23px;
@@ -2937,7 +2980,7 @@ body.lockscroll {
   background: rgba(0, 0, 0, 0.85);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
           backdrop-filter: blur(16px) saturate(180%);
-  border-radius: 2px;
+  border-radius: 4px;
   box-shadow: 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);
   color: #fff;
   padding: 12px 20px;
@@ -3247,6 +3290,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-left: 16px;
+  padding-right: 16px;
 }
 
 .components-tip {
@@ -3271,7 +3316,8 @@ body.lockscroll {
 }
 
 .components-toggle-control__help {
-  margin-left: 40px;
+  display: inline-block;
+  margin-inline-start: 40px;
 }
 
 .components-accessible-toolbar {

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,+BAwDtE;yBAjEe,sBAAsB;;;AAqEtC,eAAe,sBAAsB,CAAC"}
+{"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,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/styles/alignment-matrix-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alignment-matrix-control-styles.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,2BAA2B,EAC3B,+BAA+B,EAC/B,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,QAAQ,iDASpB,CAAC;AASF,eAAO,MAAM,IAAI;;SANN,MACN,WAAW;;UAMT,2BAA2B,CAAE,OAAO,CAAE;yGAS5C,CAAC;AAEF,eAAO,MAAM,GAAG;;eAjBX,WAAW;yGAqBf,CAAC;AAmBF,eAAO,MAAM,SAAS,UACd,IAAI,CAAE,+BAA+B,EAAE,UAAU,CAAE,8CAa1D,CAAC;AAEF,eAAO,MAAM,KAAK;;eAxDb,WAAW;+JA4Df,CAAC;AAEF,eAAO,MAAM,IAAI;;eA9DZ,WAAW;2GAyEf,CAAC"}
+{"version":3,"file":"alignment-matrix-control-styles.d.ts","sourceRoot":"","sources":["../../../src/alignment-matrix-control/styles/alignment-matrix-control-styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,2BAA2B,EAC3B,+BAA+B,EAC/B,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,QAAQ,iDASpB,CAAC;AASF,eAAO,MAAM,IAAI;;SAPK,MAAO,WAC7B;;UAOO,2BAA2B,CAAE,OAAO,CAAE;yGAS5C,CAAC;AAEF,eAAO,MAAM,GAAG;;eAnBa,WAC7B;yGAsBC,CAAC;AAmBF,eAAO,MAAM,SAAS,UACd,IAAI,CAAE,+BAA+B,EAAE,UAAU,CAAE,8CAa1D,CAAC;AAEF,eAAO,MAAM,KAAK;;eA1DW,WAC7B;+JA6DC,CAAC;AAEF,eAAO,MAAM,IAAI;;eAhEY,WAC7B;2GA0EC,CAAC"}

package/build-types/angle-picker-control/styles/angle-picker-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"angle-picker-control-styles.d.ts","sourceRoot":"","sources":["../../../src/angle-picker-control/styles/angle-picker-control-styles.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,UAAU;;SAMX,MACX,WAAU;yGAKV,CAAC;AAEF,eAAO,MAAM,sBAAsB;;eAPlC,WAAU;yGAgBV,CAAC;AAEF,eAAO,MAAM,eAAe;;eAlB3B,WAAU;yGA6BV,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;UAGpB,CAAC"}
+{"version":3,"file":"angle-picker-control-styles.d.ts","sourceRoot":"","sources":["../../../src/angle-picker-control/styles/angle-picker-control-styles.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,UAAU;;SAKF,MACpB,WAAS;yGAMT,CAAC;AAEF,eAAO,MAAM,sBAAsB;;eARlC,WAAS;yGAiBT,CAAC;AAEF,eAAO,MAAM,eAAe;;eAnB3B,WAAS;yGA8BT,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;UAGpB,CAAC"}

package/build-types/autocomplete/autocompleter-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AAmD9E,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAe1D,oBAAoB,wCAuHvB"}
+{"version":3,"file":"autocompleter-ui.d.ts","sourceRoot":"","sources":["../../src/autocomplete/autocompleter-ui.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,oBAAoB,EAAe,WAAW,EAAE,MAAM,SAAS,CAAC;AAqD9E,wBAAgB,kBAAkB,CAAE,aAAa,EAAE,WAAW,8HAe1D,oBAAoB,wCAuHvB"}

package/build-types/base-control/hooks.d.ts

@@ -12,6 +12,7 @@ export declare function useBaseControlProps(props: Omit<BaseControlProps, 'child
         className?: string;
         hideLabelFromVision?: boolean;
         __nextHasNoMarginBottom?: boolean;
+        __associatedWPComponentName?: string;
         id: string;
         help: import("react").ReactNode;
     };

package/build-types/base-control/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/base-control/hooks.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,IAAI,CAAE,gBAAgB,EAAE,UAAU,CAAE;;;;;;;;;;;;;EAqB3C"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/base-control/hooks.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CAClC,KAAK,EAAE,IAAI,CAAE,gBAAgB,EAAE,UAAU,CAAE;;;;;;;;;;;;;;EAqB3C"}