@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToggleGroupControl should render correctly with icons 1`] = `
+exports[`ToggleGroupControl controlled should render correctly with icons 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
@@ -39,7 +39,334 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-8 {
+  background: var(--wp-components-color-background, #fff);
+  border: 1px solid transparent;
+  border-radius: 2px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-width: 0;
+  position: relative;
+  min-height: 36px;
+  padding: 2px;
+}
+
+.emotion-8:hover {
+  border-color: var(--wp-components-color-gray-700, #757575);
+}
+
+.emotion-8: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));
+  z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.emotion-10 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-12 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
+  color: #1e1e1e;
+  height: 30px;
+  aspect-ratio: 1;
+  padding-left: 0;
+  padding-right: 0;
+  color: #fff;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-12 {
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-12::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-12:active {
+  background: #fff;
+}
+
+.emotion-12:active {
+  background: transparent;
+}
+
+.emotion-13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.emotion-15 {
+  background: #1e1e1e;
+  border-radius: 2px;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+}
+
+.emotion-18 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
+  border-radius: 2px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
+  color: #1e1e1e;
+  height: 30px;
+  aspect-ratio: 1;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media ( prefers-reduced-motion: reduce ) {
+  .emotion-18 {
+    transition-duration: 0ms;
+  }
+}
+
+.emotion-18::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-18:active {
   background: #fff;
+}
+
+<div>
+  <div
+    class="components-base-control emotion-0 emotion-1"
+  >
+    <div
+      class="components-base-control__field emotion-2 emotion-3"
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
+        >
+          Test Toggle Group Control
+        </span>
+      </div>
+      <div
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-10"
+        role="radiogroup"
+      >
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="true"
+            aria-label="Uppercase"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-active-item=""
+            data-value="uppercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-10-24"
+            role="radio"
+            type="button"
+            value="uppercase"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M6.1 6.8L2.1 18h1.6l1.1-3h4.3l1.1 3h1.6l-4-11.2H6.1zm-.8 6.8L7 8.9l1.7 4.7H5.3zm15.1-.7c-.4-.5-.9-.8-1.6-1 .4-.2.7-.5.8-.9.2-.4.3-.9.3-1.4 0-.9-.3-1.6-.8-2-.6-.5-1.3-.7-2.4-.7h-3.5V18h4.2c1.1 0 2-.3 2.6-.8.6-.6 1-1.4 1-2.4-.1-.8-.3-1.4-.6-1.9zm-5.7-4.7h1.8c.6 0 1.1.1 1.4.4.3.2.5.7.5 1.3 0 .6-.2 1.1-.5 1.3-.3.2-.8.4-1.4.4h-1.8V8.2zm4 8c-.4.3-.9.5-1.5.5h-2.6v-3.8h2.6c1.4 0 2 .6 2 1.9.1.6-.1 1-.5 1.4z"
+                />
+              </svg>
+            </div>
+          </button>
+          <div
+            class="emotion-15"
+            role="presentation"
+            style="opacity: 1;"
+          />
+        </div>
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="Lowercase"
+            class="emotion-18 components-toggle-group-control-option-base"
+            data-value="lowercase"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-10-25"
+            role="radio"
+            type="button"
+            value="lowercase"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              <svg
+                aria-hidden="true"
+                focusable="false"
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M11 16.8c-.1-.1-.2-.3-.3-.5v-2.6c0-.9-.1-1.7-.3-2.2-.2-.5-.5-.9-.9-1.2-.4-.2-.9-.3-1.6-.3-.5 0-1 .1-1.5.2s-.9.3-1.2.6l.2 1.2c.4-.3.7-.4 1.1-.5.3-.1.7-.2 1-.2.6 0 1 .1 1.3.4.3.2.4.7.4 1.4-1.2 0-2.3.2-3.3.7s-1.4 1.1-1.4 2.1c0 .7.2 1.2.7 1.6.4.4 1 .6 1.8.6.9 0 1.7-.4 2.4-1.2.1.3.2.5.4.7.1.2.3.3.6.4.3.1.6.1 1.1.1h.1l.2-1.2h-.1c-.4.1-.6 0-.7-.1zM9.2 16c-.2.3-.5.6-.9.8-.3.1-.7.2-1.1.2-.4 0-.7-.1-.9-.3-.2-.2-.3-.5-.3-.9 0-.6.2-1 .7-1.3.5-.3 1.3-.4 2.5-.5v2zm10.6-3.9c-.3-.6-.7-1.1-1.2-1.5-.6-.4-1.2-.6-1.9-.6-.5 0-.9.1-1.4.3-.4.2-.8.5-1.1.8V6h-1.4v12h1.3l.2-1c.2.4.6.6 1 .8.4.2.9.3 1.4.3.7 0 1.2-.2 1.8-.5.5-.4 1-.9 1.3-1.5.3-.6.5-1.3.5-2.1-.1-.6-.2-1.3-.5-1.9zm-1.7 4c-.4.5-.9.8-1.6.8s-1.2-.2-1.7-.7c-.4-.5-.7-1.2-.7-2.1 0-.9.2-1.6.7-2.1.4-.5 1-.7 1.7-.7s1.2.3 1.6.8c.4.5.6 1.2.6 2s-.2 1.4-.6 2z"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    class="components-button"
+    type="button"
+  >
+    Reset
+  </button>
+</div>
+`;
+
+exports[`ToggleGroupControl controlled should render correctly with text options 1`] = `
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.emotion-2 {
+  margin-bottom: calc(4px * 2);
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
+  display: inline-block;
+  margin-bottom: calc(4px * 2);
+  padding: 0;
+}
+
+.emotion-8 {
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -47,25 +374,17 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
-  -webkit-transition: -webkit-transform 100ms linear;
-  transition: transform 100ms linear;
   min-height: 36px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
-    transition-duration: 0ms;
-  }
+  padding: 2px;
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  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));
   z-index: 1;
   outline: 2px solid transparent;
@@ -73,26 +392,226 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 }
 
 .emotion-10 {
-  background: #1e1e1e;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+  min-width: 0;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.emotion-12 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: none;
   border-radius: 2px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  bottom: 2px;
-  -webkit-transition: -webkit-transform 160ms ease;
-  transition: transform 160ms ease;
-  z-index: 1;
-  outline: 2px solid transparent;
-  outline-offset: -3px;
+  color: #757575;
+  fill: currentColor;
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-family: inherit;
+  height: 100%;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  line-height: 100%;
+  outline: none;
+  padding: 0 12px;
+  position: relative;
+  text-align: center;
+  -webkit-transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  transition: background 160ms linear,color 160ms linear,font-weight 60ms linear;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 100%;
+  z-index: 2;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-10 {
+  .emotion-12 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-12 {
+.emotion-12::-moz-focus-inner {
+  border: 0;
+}
+
+.emotion-12:active {
+  background: #fff;
+}
+
+.emotion-13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  font-size: 13px;
+  line-height: 1;
+}
+
+<div>
+  <div
+    class="components-base-control emotion-0 emotion-1"
+  >
+    <div
+      class="components-base-control__field emotion-2 emotion-3"
+    >
+      <div
+        class="emotion-4 emotion-5"
+      >
+        <span
+          class="components-base-control__label emotion-6 emotion-7"
+        >
+          Test Toggle Group Control
+        </span>
+      </div>
+      <div
+        aria-label="Test Toggle Group Control"
+        class="components-toggle-group-control emotion-8 emotion-9"
+        data-wp-c16t="true"
+        data-wp-component="ToggleGroupControl"
+        id="toggle-group-control-as-radio-group-9"
+        role="radiogroup"
+      >
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="R"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="rigas"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-9-22"
+            role="radio"
+            type="button"
+            value="rigas"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              R
+            </div>
+          </button>
+        </div>
+        <div
+          class="emotion-10 emotion-11"
+        >
+          <button
+            aria-checked="false"
+            aria-label="J"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-value="jack"
+            data-wp-c16t="true"
+            data-wp-component="ToggleGroupControlOptionBase"
+            id="toggle-group-control-as-radio-group-9-23"
+            role="radio"
+            type="button"
+            value="jack"
+          >
+            <div
+              class="emotion-13 emotion-14"
+            >
+              J
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button
+    class="components-button"
+    type="button"
+  >
+    Reset
+  </button>
+</div>
+`;
+
+exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`] = `
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.emotion-2 {
+  margin-bottom: calc(4px * 2);
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.emotion-6 {
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+  text-transform: uppercase;
+  display: inline-block;
+  margin-bottom: calc(4px * 2);
+  padding: 0;
+}
+
+.emotion-8 {
+  background: var(--wp-components-color-background, #fff);
+  border: 1px solid transparent;
+  border-radius: 2px;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-width: 0;
+  position: relative;
+  min-height: 36px;
+  padding: 2px;
+}
+
+.emotion-8:hover {
+  border-color: var(--wp-components-color-gray-700, #757575);
+}
+
+.emotion-8: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));
+  z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+}
+
+.emotion-10 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -105,7 +624,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   flex: 1;
 }
 
-.emotion-14 {
+.emotion-12 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -144,31 +663,32 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-14 {
+  .emotion-12 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-14::-moz-focus-inner {
+.emotion-12::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-14:active {
+.emotion-12:active {
   background: #fff;
 }
 
-.emotion-14:active {
+.emotion-12:active {
   background: transparent;
 }
 
-.emotion-15 {
+.emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -177,7 +697,17 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   line-height: 1;
 }
 
-.emotion-19 {
+.emotion-15 {
+  background: #1e1e1e;
+  border-radius: 2px;
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  outline: 2px solid transparent;
+  outline-offset: -3px;
+}
+
+.emotion-18 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -216,22 +746,23 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
   width: 100%;
   z-index: 2;
   color: #1e1e1e;
-  width: 30px;
+  height: 30px;
+  aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-19 {
+  .emotion-18 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-19::-moz-focus-inner {
+.emotion-18::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-19:active {
+.emotion-18:active {
   background: #fff;
 }
 
@@ -259,31 +790,24 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
         id="toggle-group-control-as-radio-group-1"
         role="radiogroup"
       >
-        <div
-          aria-hidden="true"
-          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-        />
         <div
           class="emotion-10 emotion-11"
-          role="presentation"
-          style="transform: translateX(0px); transition: none; width: 0px;"
-        />
-        <div
-          class="emotion-12 emotion-13"
         >
           <button
             aria-checked="true"
             aria-label="Uppercase"
-            class="emotion-14 components-toggle-group-control-option-base"
+            class="emotion-12 components-toggle-group-control-option-base"
+            data-active-item=""
             data-value="uppercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-1-2"
             role="radio"
-            tabindex="0"
+            type="button"
+            value="uppercase"
           >
             <div
-              class="emotion-15 emotion-16"
+              class="emotion-13 emotion-14"
             >
               <svg
                 aria-hidden="true"
@@ -299,23 +823,29 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
               </svg>
             </div>
           </button>
+          <div
+            class="emotion-15"
+            role="presentation"
+            style="opacity: 1;"
+          />
         </div>
         <div
-          class="emotion-12 emotion-13"
+          class="emotion-10 emotion-11"
         >
           <button
             aria-checked="false"
             aria-label="Lowercase"
-            class="emotion-19 components-toggle-group-control-option-base"
+            class="emotion-18 components-toggle-group-control-option-base"
             data-value="lowercase"
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-1-3"
             role="radio"
-            tabindex="-1"
+            type="button"
+            value="lowercase"
           >
             <div
-              class="emotion-15 emotion-16"
+              class="emotion-13 emotion-14"
             >
               <svg
                 aria-hidden="true"
@@ -338,7 +868,7 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
 </div>
 `;
 
-exports[`ToggleGroupControl should render correctly with text options 1`] = `
+exports[`ToggleGroupControl uncontrolled should render correctly with text options 1`] = `
 .emotion-0 {
   font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
   font-size: 13px;
@@ -377,7 +907,7 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
 }
 
 .emotion-8 {
-  background: #fff;
+  background: var(--wp-components-color-background, #fff);
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -385,25 +915,17 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
-  -webkit-transition: -webkit-transform 100ms linear;
-  transition: transform 100ms linear;
   min-height: 36px;
-}
-
-@media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
-    transition-duration: 0ms;
-  }
+  padding: 2px;
 }
 
 .emotion-8:hover {
-  border-color: #757575;
+  border-color: var(--wp-components-color-gray-700, #757575);
 }
 
 .emotion-8:focus-within {
-  border-color: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
+  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));
   z-index: 1;
   outline: 2px solid transparent;
@@ -510,10 +1032,6 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
         id="toggle-group-control-as-radio-group-0"
         role="radiogroup"
       >
-        <div
-          aria-hidden="true"
-          style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
-        />
         <div
           class="emotion-10 emotion-11"
         >
@@ -526,7 +1044,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-0-0"
             role="radio"
-            tabindex="0"
+            type="button"
+            value="rigas"
           >
             <div
               class="emotion-13 emotion-14"
@@ -547,7 +1066,8 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
             data-wp-component="ToggleGroupControlOptionBase"
             id="toggle-group-control-as-radio-group-0-1"
             role="radio"
-            tabindex="-1"
+            type="button"
+            value="jack"
           >
             <div
               class="emotion-13 emotion-14"