@wordpress/components 37.0.1-next.v.202607070741.0 → 39.0.0

package/build-style/style-rtl.css

@@ -167,6 +167,7 @@
   min-height: 36px;
   text-align: right;
   width: 100%;
+  font-weight: var(--wpds-typography-font-weight-default, 400);
 }
 .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);
@@ -238,7 +239,7 @@
   border-radius: 0;
   display: inline-flex;
   color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
+  border-color: #1e1e1e;
 }
 .components-button-group .components-button + .components-button {
   margin-right: -1px;
@@ -253,9 +254,6 @@
   position: relative;
   z-index: 1;
 }
-.components-button-group .components-button.is-primary {
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-}
 
 /**
  * For easier testing of potential regressions, you can use a Button variant matrix
@@ -263,8 +261,15 @@
  *
  * @see https://github.com/WordPress/gutenberg/blob/trunk/test/storybook-playwright/README.md
  */
+.components-button:focus:is(a) {
+  box-shadow: none;
+}
+.components-button:focus {
+  outline: none;
+}
 .components-button:focus:not(:active) {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
   outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
 }
 .components-button {
@@ -272,9 +277,8 @@
   text-decoration: none;
   font-family: inherit;
   font-size: 13px;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   margin: 0;
-  border: 0;
   cursor: var(--wpds-cursor-control, pointer);
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -286,6 +290,7 @@
   padding: 4px 12px;
   border-radius: 2px;
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+  border: 1px solid transparent;
 }
 .components-button.is-next-40px-default-size {
   height: 40px;
@@ -324,29 +329,16 @@
   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 */
 }
-@media (forced-colors: active) {
-  .components-button.is-primary {
-    outline: 1px solid ButtonBorder;
-  }
-}
 .components-button {
   /**
    * Secondary and tertiary buttons.
    */
 }
-.components-button.is-secondary:active:not(:disabled), .components-button.is-tertiary:active:not(:disabled) {
-  box-shadow: none;
-}
 .components-button.is-secondary:disabled, .components-button.is-secondary[aria-disabled=true], .components-button.is-secondary[aria-disabled=true]:hover, .components-button.is-tertiary:disabled, .components-button.is-tertiary[aria-disabled=true], .components-button.is-tertiary[aria-disabled=true]:hover {
   color: #949494;
   background: transparent;
   transform: none;
 }
-@media (forced-colors: active) {
-  .components-button.is-secondary, .components-button.is-tertiary {
-    outline: 1px solid ButtonBorder;
-  }
-}
 .components-button {
   /**
    * Secondary button style.
@@ -354,27 +346,28 @@
 }
 @media not (prefers-reduced-motion) {
   .components-button.is-secondary {
-    transition: box-shadow 0.1s linear;
+    transition: border-color 0.1s linear;
   }
 }
 .components-button.is-secondary {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)), 0 0 0 currentColor;
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   white-space: nowrap;
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   background: transparent;
 }
+.components-button.is-secondary:active:not(:disabled) {
+  border-color: transparent;
+}
 .components-button.is-secondary:hover:not(:disabled, [aria-disabled=true], .is-pressed) {
-  box-shadow: inset 0 0 0 1px var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
+  border-color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
   color: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
   background: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
 }
-.components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
-  box-shadow: inset 0 0 0 1px var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
+.components-button.is-secondary:focus:not(:active) {
+  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
 }
-@media (forced-colors: active) {
-  .components-button.is-secondary {
-    box-shadow: none;
-  }
+.components-button.is-secondary:disabled:not(:focus), .components-button.is-secondary[aria-disabled=true]:not(:focus), .components-button.is-secondary[aria-disabled=true]:hover:not(:focus) {
+  border-color: var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb);
 }
 .components-button {
   /**
@@ -432,13 +425,12 @@ p + .components-button.is-tertiary {
 .components-button.is-link {
   margin: 0;
   padding: 0;
-  box-shadow: none;
   border: 0;
   border-radius: 0;
   background: none;
   outline: none;
   text-align: right;
-  font-weight: 400;
+  font-weight: var(--wpds-typography-font-weight-default, 400);
   color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
   text-decoration: underline;
   text-underline-offset: 0.2em;
@@ -521,6 +513,10 @@ p + .components-button.is-tertiary {
   padding-left: 8px;
   padding-right: 12px;
 }
+.components-button.has-icon:not(.has-text) svg,
+.components-button.has-icon:not(.has-text) .dashicon {
+  margin-inline: -1px;
+}
 .components-button.is-pressed, .components-button.is-pressed:hover {
   color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
 }
@@ -550,369 +546,6 @@ p + .components-button.is-tertiary {
     background-position: right 200px top 0;
   }
 }
-/* Root of the component. */
-.components-calendar {
-  position: relative; /* Required to position the navigation toolbar. */
-  box-sizing: border-box;
-  display: inline flow-root;
-  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
-  background-color: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
-  font-size: 13px;
-  font-weight: 400;
-  z-index: 0;
-}
-.components-calendar *,
-.components-calendar *::before,
-.components-calendar *::after {
-  box-sizing: border-box;
-}
-
-.components-calendar__day {
-  padding: 0;
-  position: relative;
-}
-.components-calendar__day:has(.components-calendar__day-button:disabled) {
-  color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
-}
-.components-calendar__day:has(.components-calendar__day-button:hover:not(:disabled)), .components-calendar__day:has(.components-calendar__day-button:focus-visible) {
-  color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
-
-.components-calendar__day-button {
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: var(--wpds-cursor-control, pointer);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 2px;
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  color: inherit;
-}
-.components-calendar__day-button::before {
-  content: "";
-  position: absolute;
-  z-index: -1;
-  inset: 0;
-  border: none;
-  border-radius: 2px;
-}
-.components-calendar__day-button::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  inset: 0;
-  pointer-events: none;
-}
-.components-calendar__day-button:disabled {
-  cursor: revert;
-}
-@media (forced-colors: active) {
-  .components-calendar__day-button:disabled {
-    text-decoration: line-through;
-  }
-}
-.components-calendar__day-button:focus-visible {
-  outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  outline-offset: 1px;
-}
-
-.components-calendar__caption-label {
-  z-index: 1;
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  white-space: nowrap;
-  border: 0;
-  text-transform: capitalize;
-}
-
-.components-calendar__button-next,
-.components-calendar__button-previous {
-  border: none;
-  border-radius: 2px;
-  background: none;
-  padding: 0;
-  margin: 0;
-  cursor: var(--wpds-cursor-control, pointer);
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  width: 32px;
-  height: 32px;
-  color: inherit;
-}
-.components-calendar__button-next:disabled, .components-calendar__button-next[aria-disabled=true],
-.components-calendar__button-previous:disabled,
-.components-calendar__button-previous[aria-disabled=true] {
-  cursor: revert;
-  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
-}
-.components-calendar__button-next:focus-visible,
-.components-calendar__button-previous:focus-visible {
-  outline: var(--wp-admin-border-width-focus) solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-}
-
-.components-calendar__chevron {
-  display: inline-block;
-  fill: currentColor;
-  width: 16px;
-  height: 16px;
-}
-
-.components-calendar[dir=rtl] .components-calendar__nav .components-calendar__chevron {
-  transform: rotate(-180deg);
-  transform-origin: 50%;
-}
-
-.components-calendar__month-caption {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  height: 32px;
-  margin-bottom: 12px;
-}
-
-.components-calendar__months {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 16px;
-  max-width: -moz-fit-content;
-  max-width: fit-content;
-}
-
-.components-calendar__month-grid {
-  border-collapse: separate;
-  border-spacing: 0 4px;
-}
-
-.components-calendar__nav {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 32px;
-}
-
-.components-calendar__weekday {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
-  text-align: center;
-  text-transform: uppercase;
-}
-
-/* DAY MODIFIERS */
-.components-calendar__day--today::after {
-  content: "";
-  position: absolute;
-  z-index: 1;
-  inset-block-start: 2px;
-  inset-inline-end: 2px;
-  width: 0;
-  height: 0;
-  border-radius: 50%;
-  border: 2px solid currentColor;
-}
-
-.components-calendar__day--selected:not(.components-calendar__range-middle):has(.components-calendar__day-button,
-.components-calendar__day-button:hover:not(:disabled)) {
-  color: var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc));
-}
-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button::before {
-  background-color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
-  border: 1px solid transparent;
-}
-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:disabled::before {
-  background-color: var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
-}
-.components-calendar__day--selected:not(.components-calendar__range-middle) .components-calendar__day-button:hover:not(:disabled)::before {
-  background-color: var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e));
-}
-
-.components-calendar__day--outside {
-  color: var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d));
-}
-
-.components-calendar__day--hidden {
-  visibility: hidden;
-}
-
-.components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button, .components-calendar__range-start:not(.components-calendar__range-end) .components-calendar__day-button::before {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.components-calendar__range-middle .components-calendar__day-button::before {
-  background-color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, transparent);
-  border-radius: 0;
-  border-width: 1px 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button, .components-calendar__range-end:not(.components-calendar__range-start) .components-calendar__day-button::before {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-/*
- * RANGE PREVIEW (range calendar only)
- *
- * The preview is rendered in the button's ::after pseudo-element, so that it
- * can be rendered over the button's contents.
- * The selection preview is shown with a dashed border. In order to have
- * control over the dash pattern (especially the seams between days), the
- * dashed borders are rendered as SVGs via the url() CSS function.
- * Since SVGs rendered in the url() function don't seem to be able to access
- * CSS variables, we're using the SVGs as masks, and using `background-color`
- * to consume the accent color variable.
- */
-.components-calendar__day--preview svg {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  color: color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 16%, transparent);
-}
-@media (forced-colors: active) {
-  .components-calendar__day--preview svg {
-    color: inherit;
-  }
-}
-.components-calendar[dir=rtl] .components-calendar__day--preview svg {
-  transform: scaleX(-1);
-}
-
-.components-calendar__day--preview.components-calendar__range-middle .components-calendar__day-button::before {
-  border: none;
-}
-
-/* ANIMATIONS */
-@keyframes slide-in-left {
-  0% {
-    transform: translateX(100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slide-in-right {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slide-out-left {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-@keyframes slide-out-right {
-  0% {
-    transform: translateX(0);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-.components-calendar__weeks-before-enter,
-.components-calendar__weeks-before-exit,
-.components-calendar__weeks-after-enter,
-.components-calendar__weeks-after-exit,
-.components-calendar__caption-after-enter,
-.components-calendar__caption-after-exit,
-.components-calendar__caption-before-enter,
-.components-calendar__caption-before-exit {
-  animation-duration: 0s;
-  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  animation-fill-mode: forwards;
-}
-@media not (prefers-reduced-motion) {
-  .components-calendar__weeks-before-enter,
-  .components-calendar__weeks-before-exit,
-  .components-calendar__weeks-after-enter,
-  .components-calendar__weeks-after-exit,
-  .components-calendar__caption-after-enter,
-  .components-calendar__caption-after-exit,
-  .components-calendar__caption-before-enter,
-  .components-calendar__caption-before-exit {
-    animation-duration: 0.3s;
-  }
-}
-
-.components-calendar__weeks-before-enter,
-.components-calendar[dir=rtl] .components-calendar__weeks-after-enter {
-  animation-name: slide-in-left;
-}
-
-.components-calendar__weeks-before-exit,
-.components-calendar[dir=rtl] .components-calendar__weeks-after-exit {
-  animation-name: slide-out-left;
-}
-
-.components-calendar__weeks-after-enter,
-.components-calendar[dir=rtl] .components-calendar__weeks-before-enter {
-  animation-name: slide-in-right;
-}
-
-.components-calendar__weeks-after-exit,
-.components-calendar[dir=rtl] .components-calendar__weeks-before-exit {
-  animation-name: slide-out-right;
-}
-
-.components-calendar__caption-after-enter {
-  animation-name: fade-in;
-}
-
-.components-calendar__caption-after-exit {
-  animation-name: fade-out;
-}
-
-.components-calendar__caption-before-enter {
-  animation-name: fade-in;
-}
-
-.components-calendar__caption-before-exit {
-  animation-name: fade-out;
-}
-
 .components-checkbox-control {
   --checkbox-input-size: 24px;
 }
@@ -937,7 +570,7 @@ p + .components-button.is-tertiary {
   margin-left: 12px;
   transition: none;
   border-radius: 2px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
@@ -1277,7 +910,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-combobox-control__suggestions-container {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
@@ -1300,8 +933,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-combobox-control__suggestions-container:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container::-moz-placeholder {
@@ -1318,8 +951,8 @@ input.components-combobox-control__input[type=text]:focus {
   padding: 0;
 }
 .components-combobox-control__suggestions-container:focus-within {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-combobox-control__suggestions-container .components-spinner {
@@ -1526,7 +1159,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-drop-zone__content-text {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
 }
 
@@ -1565,7 +1198,7 @@ input.components-combobox-control__input[type=text]:focus {
 
 .components-dropdown-menu__menu {
   width: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   line-height: 1.4;
 }
@@ -1576,7 +1209,7 @@ input.components-combobox-control__input[type=text]:focus {
   outline: none;
   cursor: var(--wpds-cursor-control, pointer);
   white-space: nowrap;
-  font-weight: 400;
+  font-weight: var(--wpds-typography-font-weight-default, 400);
 }
 .components-dropdown-menu__menu .components-dropdown-menu__menu-item.has-separator,
 .components-dropdown-menu__menu .components-menu-item.has-separator {
@@ -1654,15 +1287,6 @@ input.components-combobox-control__input[type=text]:focus {
   color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
   text-decoration: none;
 }
-@media not (prefers-reduced-motion) {
-  .components-external-link {
-    transition: outline 0.1s ease-out;
-  }
-}
-.components-external-link {
-  outline: 0 solid transparent;
-  outline-offset: 1px;
-}
 .components-external-link:visited {
   color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 }
@@ -1670,10 +1294,14 @@ input.components-combobox-control__input[type=text]:focus {
   color: var(--wpds-color-foreground-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 52%, black));
 }
 .components-external-link:focus {
-  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
   box-shadow: none;
   border-radius: 0;
 }
+.components-external-link:focus:not(:active) {
+  --focus-color: var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+  outline: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid var(--focus-color);
+  outline-offset: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+}
 
 .components-external-link__contents {
   text-decoration: underline;
@@ -1685,7 +1313,7 @@ input.components-combobox-control__input[type=text]:focus {
   line-height: 1;
   display: inline-block;
   margin-inline-start: var(--wpds-dimension-padding-xs, 4px);
-  font-weight: var(--wpds-typography-font-weight-regular, 400);
+  font-weight: var(--wpds-typography-font-weight-default, 400);
 }
 
 .components-form-toggle {
@@ -1823,7 +1451,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 
 .components-form-token-field__input-container {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
@@ -1846,8 +1474,8 @@ input.components-combobox-control__input[type=text]:focus {
   }
 }
 .components-form-token-field__input-container:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container::-moz-placeholder {
@@ -1867,8 +1495,8 @@ input.components-combobox-control__input[type=text]:focus {
   cursor: default;
 }
 .components-form-token-field__input-container.is-active {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-form-token-field__input-container input[type=text].components-form-token-field__input {
@@ -2183,14 +1811,14 @@ input.components-combobox-control__input[type=text]:focus {
   color: #757575;
   text-transform: uppercase;
   font-size: 11px;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   white-space: nowrap;
 }
 
 .components-menu-item__button,
 .components-menu-item__button.components-button {
   width: 100%;
-  font-weight: 400;
+  font-weight: var(--wpds-typography-font-weight-default, 400);
 }
 .components-menu-item__button[role=menuitemradio] .components-menu-item__item:only-child, .components-menu-item__button[role=menuitemcheckbox] .components-menu-item__item:only-child,
 .components-menu-item__button.components-button[role=menuitemradio] .components-menu-item__item:only-child,
@@ -2282,6 +1910,10 @@ input.components-combobox-control__input[type=text]:focus {
   padding-right: 12px;
 }
 
+body.modal-open {
+  overflow: hidden;
+}
+
 .components-modal__screen-overlay {
   position: fixed;
   top: 0;
@@ -2476,7 +2108,7 @@ input.components-combobox-control__input[type=text]:focus {
 }
 .components-modal__header .components-modal__header-heading {
   font-size: 20px;
-  font-weight: 600;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
 }
 .components-modal__header h1 {
   line-height: 1;
@@ -2670,13 +2302,10 @@ input.components-combobox-control__input[type=text]:focus {
 .components-panel__body-toggle.components-button {
   position: relative;
   padding: 16px 16px 16px 48px;
-  outline: none;
   width: 100%;
-  font-weight: 499;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   text-align: right;
   color: #1e1e1e;
-  border: none;
-  box-shadow: none;
 }
 @media not (prefers-reduced-motion) {
   .components-panel__body-toggle.components-button {
@@ -2687,7 +2316,7 @@ input.components-combobox-control__input[type=text]:focus {
   height: auto;
 }
 .components-panel__body-toggle.components-button:focus {
-  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  outline-offset: calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) * -1);
   border-radius: 0;
 }
 .components-panel__body-toggle.components-button .components-panel__arrow {
@@ -2773,7 +2402,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 .components-placeholder__instructions,
 .components-placeholder__label,
 .components-placeholder__fieldset {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   letter-spacing: initial;
   line-height: initial;
@@ -2782,7 +2411,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 
 .components-placeholder__label {
-  font-weight: 600;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   align-items: center;
   display: flex;
 }
@@ -2814,7 +2443,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 .components-placeholder__fieldset p,
 .components-placeholder__fieldset form p {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
 }
 
@@ -2824,7 +2453,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
 }
 
 .components-placeholder__input[type=url] {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
@@ -3086,7 +2715,7 @@ body.rtl .components-panel__body-toggle.components-button .dashicons-arrow-right
   border: 0;
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
 }
 
@@ -3406,7 +3035,7 @@ body.lockscroll {
 }
 
 .components-snackbar {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
   background: rgba(0, 0, 0, 0.85);
   backdrop-filter: blur(16px) saturate(180%);
@@ -3502,7 +3131,7 @@ body.lockscroll {
   cursor: var(--wpds-cursor-control, pointer);
   padding: 3px var(--wpds-dimension-padding-lg, 16px);
   margin-right: 0;
-  font-weight: var(--wpds-typography-font-weight-regular, 400);
+  font-weight: var(--wpds-typography-font-weight-default, 400);
   color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 }
 .components-tab-panel__tabs-item:disabled, .components-tab-panel__tabs-item[aria-disabled=true] {
@@ -3593,7 +3222,7 @@ body.lockscroll {
   margin: 0;
   background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   /* Fonts smaller than 16px causes mobile safari to zoom. */
   font-size: 16px;
@@ -3655,8 +3284,8 @@ body.lockscroll {
 .components-text-control__input[type=email]:focus,
 .components-text-control__input[type=month]:focus,
 .components-text-control__input[type=number]:focus {
-  border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-  box-shadow: 0 0 0 0.5px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
 .components-text-control__input::-moz-placeholder, .components-text-control__input[type=text]::-moz-placeholder, .components-text-control__input[type=tel]::-moz-placeholder, .components-text-control__input[type=time]::-moz-placeholder, .components-text-control__input[type=url]::-moz-placeholder, .components-text-control__input[type=week]::-moz-placeholder, .components-text-control__input[type=password]::-moz-placeholder, .components-text-control__input[type=color]::-moz-placeholder, .components-text-control__input[type=date]::-moz-placeholder, .components-text-control__input[type=datetime]::-moz-placeholder, .components-text-control__input[type=datetime-local]::-moz-placeholder, .components-text-control__input[type=email]::-moz-placeholder, .components-text-control__input[type=month]::-moz-placeholder, .components-text-control__input[type=number]::-moz-placeholder {
@@ -3846,9 +3475,9 @@ body.lockscroll {
 }
 .components-toolbar__control.components-button[data-subscript]::after {
   content: attr(data-subscript);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 13px;
-  font-weight: 600;
+  font-weight: var(--wpds-typography-font-weight-emphasis, 600);
   line-height: 12px;
   position: absolute;
   left: 8px;
@@ -3929,7 +3558,7 @@ div.components-toolbar > div + div.has-left-divider::before {
 
 .components-tooltip {
   background: #000;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   border-radius: var(--wpds-border-radius-md, 4px);
   color: #f0f0f0;
   text-align: center;
@@ -3948,13 +3577,13 @@ div.components-toolbar > div + div.has-left-divider::before {
   --wp-components-color-accent: #cc1818;
   border-color: #cc1818;
 }
-.components-validated-control :is(textarea, input[type=text]):invalid[data-validity-visible] {
+.components-validated-control textarea:invalid[data-validity-visible] {
   --wp-admin-theme-color: #cc1818;
   --wp-components-color-accent: #cc1818;
   border-color: #cc1818;
 }
 .components-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
 }
 
 .components-validated-control__wrapper-with-error-delegate {
@@ -3968,7 +3597,11 @@ div.components-toolbar > div + div.has-left-divider::before {
   --wp-components-color-accent: #cc1818;
 }
 .components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
-  --wp-components-color-accent: #cc1818;
+  --wp-admin-theme-color: #cc1818;
+  border-color: #cc1818;
+}
+.components-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-validated-control__content-editable [role=textbox] {
+  --wp-admin-theme-color: #cc1818;
   border-color: #cc1818;
 }
 
@@ -3986,7 +3619,7 @@ div.components-toolbar > div + div.has-left-divider::before {
   align-items: flex-start;
   gap: 4px;
   margin: 8px 0 0;
-  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 12px;
   line-height: 16px;
   color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));