@aws-amplify/ui-react 2.16.2 → 2.18.0

package/dist/styles.css

@@ -4,7 +4,7 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 17:14:39 GMT
+ * Generated on Tue, 17 May 2022 21:59:14 GMT
  */
 
 :root, [data-amplify-theme] {
@@ -103,7 +103,7 @@
   --amplify-colors-neutral-100: hsl(210, 50%, 10%);
   --amplify-colors-neutral-90: hsl(210, 25%, 25%);
   --amplify-colors-neutral-80: hsl(210, 10%, 40%);
-  --amplify-colors-neutral-60: hsl(210, 6%, 70%);
+  --amplify-colors-neutral-60: hsl(210, 8%, 55%);
   --amplify-colors-neutral-40: hsl(210, 5%, 87%);
   --amplify-colors-neutral-20: hsl(210, 5%, 94%);
   --amplify-colors-neutral-10: hsl(210, 5%, 98%);
@@ -355,6 +355,7 @@
   --amplify-colors-background-error: var(--amplify-colors-red-20);
   --amplify-colors-background-warning: var(--amplify-colors-orange-20);
   --amplify-colors-background-info: var(--amplify-colors-blue-20);
+  --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
   --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
   --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
   --amplify-colors-background-primary: var(--amplify-colors-white);
@@ -508,8 +509,6 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
-  --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
-  --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
@@ -669,8 +668,8 @@
   --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
-  --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
-  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-80);
+  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
@@ -678,7 +677,7 @@
   --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
-  --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary);
   --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
   --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
   --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
@@ -919,19 +918,19 @@ select {
   overflow: auto;
 }
 
-.amplify-scrollview[data-orientation=horizontal] {
+.amplify-scrollview--horizontal {
   overflow-x: scroll;
   overflow-y: initial;
 }
 
-.amplify-scrollview[data-orientation=vertical] {
+.amplify-scrollview--vertical {
   overflow-x: initial;
   overflow-y: scroll;
 }
 
 .amplify-text {
-  color: var(--amplify-components-text-color);
   display: block;
+  color: var(--amplify-components-text-color);
 }
 
 b.amplify-text,
@@ -942,7 +941,7 @@ strong.amplify-text {
   display: inline;
 }
 
-.amplify-text[data-truncate=true] {
+.amplify-text--truncated {
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
@@ -950,72 +949,72 @@ strong.amplify-text {
   white-space: nowrap;
 }
 
-.amplify-text[data-variation=primary] {
+.amplify-text--primary {
   color: var(--amplify-components-text-primary-color);
 }
 
-.amplify-text[data-variation=secondary] {
+.amplify-text--secondary {
   color: var(--amplify-components-text-secondary-color);
 }
 
-.amplify-text[data-variation=tertiary] {
+.amplify-text--tertiary {
   color: var(--amplify-components-text-tertiary-color);
 }
 
-.amplify-text[data-variation=error] {
+.amplify-text--error {
   color: var(--amplify-components-text-error-color);
 }
 
-.amplify-text[data-variation=info] {
+.amplify-text--info {
   color: var(--amplify-components-text-info-color);
 }
 
-.amplify-text[data-variation=success] {
+.amplify-text--success {
   color: var(--amplify-components-text-success-color);
 }
 
-.amplify-text[data-variation=warning] {
+.amplify-text--warning {
   color: var(--amplify-components-text-warning-color);
 }
 
 .amplify-badge {
-  color: var(--amplify-components-badge-color);
   background-color: var(--amplify-components-badge-background-color);
   border-radius: var(--amplify-components-badge-border-radius);
+  color: var(--amplify-components-badge-color);
   display: inline-flex;
   font-size: var(--amplify-components-badge-font-size);
   font-weight: var(--amplify-components-badge-font-weight);
+  line-height: var(--amplify-components-badge-line-height);
   padding: var(--amplify-components-badge-padding-vertical) var(--amplify-components-badge-padding-horizontal);
   text-align: var(--amplify-components-badge-text-align);
-  line-height: var(--amplify-components-badge-line-height);
 }
 
-.amplify-badge[data-variation=info] {
+.amplify-badge--info {
   color: var(--amplify-components-badge-info-color);
   background-color: var(--amplify-components-badge-info-background-color);
 }
 
-.amplify-badge[data-variation=error] {
+.amplify-badge--error {
   color: var(--amplify-components-badge-error-color);
   background-color: var(--amplify-components-badge-error-background-color);
 }
 
-.amplify-badge[data-variation=warning] {
+.amplify-badge--warning {
   color: var(--amplify-components-badge-warning-color);
   background-color: var(--amplify-components-badge-warning-background-color);
 }
 
-.amplify-badge[data-variation=success] {
+.amplify-badge--success {
   color: var(--amplify-components-badge-success-color);
   background-color: var(--amplify-components-badge-success-background-color);
 }
 
-.amplify-badge[data-size=small] {
+.amplify-badge--small {
   font-size: var(--amplify-components-badge-small-font-size);
   padding: var(--amplify-components-badge-small-padding-vertical) var(--amplify-components-badge-small-padding-horizontal);
 }
 
-.amplify-badge[data-size=large] {
+.amplify-badge--large {
   font-size: var(--amplify-components-badge-large-font-size);
   padding: var(--amplify-components-badge-large-padding-vertical) var(--amplify-components-badge-large-padding-horizontal);
 }
@@ -1025,19 +1024,18 @@ strong.amplify-text {
  */
 
 .amplify-button {
-  display: inline-flex;
-  justify-content: center;
   align-items: center;
-  border-radius: var(--amplify-components-button-border-radius);
-  box-sizing: border-box;
-  font-weight: var(--amplify-components-button-font-weight);
-  transition: all var(--amplify-components-button-transition-duration);
-  border-width: var(--amplify-components-button-border-width);
-  border-style: var(--amplify-components-button-border-style);
   border-color: var(--amplify-components-button-border-color);
   border-radius: var(--amplify-components-button-border-radius);
+  border-style: var(--amplify-components-button-border-style);
+  border-width: var(--amplify-components-button-border-width);
+  box-sizing: border-box;
   color: var(--amplify-components-button-color);
+  cursor: pointer;
+  display: inline-flex;
   font-size: var(--amplify-components-button-font-size);
+  font-weight: var(--amplify-components-button-font-weight);
+  justify-content: center;
   line-height: var(--amplify-components-button-line-height);
   -webkit-padding-before: var(--amplify-components-button-padding-block-start);
   padding-block-start: var(--amplify-components-button-padding-block-start);
@@ -1047,11 +1045,31 @@ strong.amplify-text {
   padding-inline-start: var(--amplify-components-button-padding-inline-start);
   -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
   padding-inline-end: var(--amplify-components-button-padding-inline-end);
+  transition: all var(--amplify-components-button-transition-duration);
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  cursor: pointer;
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-disabled-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-disabled-background-color
+  );
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-disabled-border-color
+  );
+  --amplify-internal-button-disabled-text-decoration: initial;
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-loading-color
+  );
+  --amplify-internal-button-loading-text-decoration: initial;
 }
 
 .amplify-button:hover {
@@ -1073,127 +1091,125 @@ strong.amplify-text {
   color: var(--amplify-components-button-active-color);
 }
 
-.amplify-button[disabled] {
-  background-color: var(--amplify-components-button-disabled-background-color);
-  border-color: var(--amplify-components-button-disabled-border-color);
-  color: var(--amplify-components-button-disabled-color);
-  cursor: not-allowed;
-}
-
-.amplify-button[data-loading=true] {
-  background-color: var(--amplify-components-button-loading-background-color);
-  border-color: var(--amplify-components-button-loading-border-color);
-  color: var(--amplify-components-button-loading-color);
-}
-
-.amplify-button[data-fullwidth=true] {
+.amplify-button--fullwidth {
   width: 100%;
 }
 
-.amplify-button[data-variation=menu] {
+.amplify-button--menu {
   border-width: var(--amplify-components-button-menu-border-width);
   background-color: var(--amplify-components-button-menu-background-color);
   justify-content: var(--amplify-components-button-menu-justify-content);
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-menu-disabled-color
+  );
 }
 
-.amplify-button[data-variation=menu]:hover {
+.amplify-button--menu:hover {
   color: var(--amplify-components-button-menu-hover-color);
   background-color: var(--amplify-components-button-menu-hover-background-color);
 }
 
-.amplify-button[data-variation=menu]:focus {
+.amplify-button--menu:focus {
   box-shadow: none;
   color: var(--amplify-components-button-menu-focus-color);
   background-color: var(--amplify-components-button-menu-focus-background-color);
 }
 
-.amplify-button[data-variation=menu]:active {
+.amplify-button--menu:active {
   color: var(--amplify-components-button-menu-active-color);
   background-color: var(--amplify-components-button-menu-active-background-color);
 }
 
-.amplify-button[data-variation=menu][disabled] {
-  color: var(--amplify-components-button-menu-disabled-color);
-}
-
-.amplify-button[data-variation=primary] {
+.amplify-button--primary {
   border-width: var(--amplify-components-button-primary-border-width);
   background-color: var(--amplify-components-button-primary-background-color);
   border-color: var(--amplify-components-button-primary-border-color);
   color: var(--amplify-components-button-primary-color);
-}
-
-.amplify-button[data-variation=primary]:hover {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-primary-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-primary-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-primary-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-primary-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-primary-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-primary-loading-color
+  );
+}
+
+.amplify-button--primary:hover {
   background-color: var(--amplify-components-button-primary-hover-background-color);
   border-color: var(--amplify-components-button-primary-hover-border-color);
   color: var(--amplify-components-button-primary-hover-color);
 }
 
-.amplify-button[data-variation=primary]:focus {
+.amplify-button--primary:focus {
   background-color: var(--amplify-components-button-primary-focus-background-color);
   border-color: var(--amplify-components-button-primary-focus-border-color);
   color: var(--amplify-components-button-primary-focus-color);
   box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
 }
 
-.amplify-button[data-variation=primary]:active {
+.amplify-button--primary:active {
   background-color: var(--amplify-components-button-primary-active-background-color);
   border-color: var(--amplify-components-button-primary-active-border-color);
   color: var(--amplify-components-button-primary-active-color);
 }
 
-.amplify-button[data-variation=primary][disabled] {
-  background-color: var(--amplify-components-button-primary-disabled-background-color);
-  border-color: var(--amplify-components-button-primary-disabled-border-color);
-  color: var(--amplify-components-button-primary-disabled-color);
-}
-
-.amplify-button[data-variation=primary][data-loading=true] {
-  background-color: var(--amplify-components-button-primary-loading-background-color);
-  border-color: var(--amplify-components-button-primary-loading-border-color);
-  color: var(--amplify-components-button-primary-loading-color);
-}
-
-.amplify-button[data-variation=link] {
+.amplify-button--link {
   border-width: var(--amplify-components-button-link-border-width);
   background-color: var(--amplify-components-button-link-background-color);
   color: var(--amplify-components-button-link-color);
-}
-
-.amplify-button[data-variation=link]:hover {
+  --amplify-internal-button-disabled-text-decoration: none;
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-link-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-link-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-link-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-link-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-link-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-link-loading-color
+  );
+  --amplify-internal-button-loading-text-decoration: none;
+}
+
+.amplify-button--link:hover {
   background-color: var(--amplify-components-button-link-hover-background-color);
   border-color: var(--amplify-components-button-link-hover-border-color);
   color: var(--amplify-components-button-link-hover-color);
 }
 
-.amplify-button[data-variation=link]:focus {
+.amplify-button--link:focus {
   background-color: var(--amplify-components-button-link-focus-background-color);
   border-color: var(--amplify-components-button-link-focus-border-color);
   color: var(--amplify-components-button-link-focus-color);
   box-shadow: var(--amplify-components-button-link-focus-box-shadow);
 }
 
-.amplify-button[data-variation=link]:active {
+.amplify-button--link:active {
   background-color: var(--amplify-components-button-link-active-background-color);
   border-color: var(--amplify-components-button-link-active-border-color);
   color: var(--amplify-components-button-link-active-color);
 }
 
-.amplify-button[data-variation=link][disabled] {
-  background-color: var(--amplify-components-button-link-disabled-background-color);
-  border-color: var(--amplify-components-button-link-disabled-border-color);
-  color: var(--amplify-components-button-link-disabled-color);
-  text-decoration: none;
-}
-
-.amplify-button[data-variation=link][data-loading=true] {
-  background-color: var(--amplify-components-button-link-loading-background-color);
-  border-color: var(--amplify-components-button-link-loading-border-color);
-  color: var(--amplify-components-button-link-loading-color);
-  text-decoration: none;
-}
-
-.amplify-button[data-size=small] {
+.amplify-button--small {
   font-size: var(--amplify-components-button-small-font-size);
   -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
   padding-block-start: var(--amplify-components-button-small-padding-block-start);
@@ -1205,7 +1221,7 @@ strong.amplify-text {
   padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
 }
 
-.amplify-button[data-size=large] {
+.amplify-button--large {
   font-size: var(--amplify-components-button-large-font-size);
   -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
   padding-block-start: var(--amplify-components-button-large-padding-block-start);
@@ -1217,6 +1233,71 @@ strong.amplify-text {
   padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
 }
 
+.amplify-button--disabled {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  cursor: not-allowed;
+}
+
+.amplify-button--disabled:hover {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+}
+
+.amplify-button--disabled :focus {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+}
+
+.amplify-button--disabled:active {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+}
+
+.amplify-button--loading {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
+
+.amplify-button--loading:hover {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
+
+.amplify-button--loading:focus {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
+
+.amplify-button--loading:active {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+  text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
+
 .amplify-button__loader-wrapper {
   align-items: var(--amplify-components-button-loader-wrapper-align-items);
   gap: var(--amplify-components-button-loader-wrapper-gap);
@@ -1245,32 +1326,32 @@ strong.amplify-text {
   display: block;
 }
 
-h1.amplify-heading {
+.amplify-heading--1 {
   font-size: var(--amplify-components-heading-1-font-size);
   font-weight: var(--amplify-components-heading-1-font-weight);
 }
 
-h2.amplify-heading {
+.amplify-heading--2 {
   font-size: var(--amplify-components-heading-2-font-size);
   font-weight: var(--amplify-components-heading-2-font-weight);
 }
 
-h3.amplify-heading {
+.amplify-heading--3 {
   font-size: var(--amplify-components-heading-3-font-size);
   font-weight: var(--amplify-components-heading-3-font-weight);
 }
 
-h4.amplify-heading {
+.amplify-heading--4 {
   font-size: var(--amplify-components-heading-4-font-size);
   font-weight: var(--amplify-components-heading-4-font-weight);
 }
 
-h5.amplify-heading {
+.amplify-heading--5 {
   font-size: var(--amplify-components-heading-5-font-size);
   font-weight: var(--amplify-components-heading-5-font-weight);
 }
 
-h6.amplify-heading {
+.amplify-heading--6 {
   font-size: var(--amplify-components-heading-6-font-size);
   font-weight: var(--amplify-components-heading-6-font-weight);
 }
@@ -1292,6 +1373,192 @@ h6.amplify-heading {
   width: var(--amplify-components-icon-height);
 }
 
+.amplify-input {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+}
+
+.amplify-input:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+
+.amplify-input--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+
+.amplify-input--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+
+.amplify-input--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+
+.amplify-input--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+
+.amplify-input[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+
+.amplify-input--quiet {
+  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+
+.amplify-input--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+
+.amplify-input--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+
+.amplify-input--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
+
+.amplify-textarea {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+}
+
+.amplify-textarea:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+
+.amplify-textarea--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+
+.amplify-textarea--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+
+.amplify-textarea--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+
+.amplify-textarea--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+
+.amplify-textarea[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+
+.amplify-textarea--quiet {
+  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+
+.amplify-textarea--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+
+.amplify-textarea--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+
+.amplify-textarea--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
+
 .amplify-image {
   height: var(--amplify-components-image-height);
   max-width: var(--amplify-components-image-max-width);
@@ -1332,20 +1599,18 @@ h6.amplify-heading {
   text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
 
-.amplify-link[data-size=small] {
-  font-size: var(--amplify-components-link-small-font-size);
-}
-
-.amplify-link[data-size=large] {
-  font-size: var(--amplify-components-link-large-font-size);
-}
-
 .amplify-loader {
   width: var(--amplify-components-loader-width);
   height: var(--amplify-components-loader-height);
   font-size: var(--amplify-components-loader-font-size);
   fill: none;
   stroke: var(--amplify-components-loader-stroke-empty);
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-font-size
+  );
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-stroke-width
+  );
 }
 
 .amplify-loader circle:last-of-type {
@@ -1371,18 +1636,6 @@ h6.amplify-heading {
   }
 }
 
-.amplify-loader[data-size=small] {
-  width: var(--amplify-components-loader-small-width);
-  height: var(--amplify-components-loader-small-height);
-  font-size: var(--amplify-components-loader-small-font-size);
-}
-
-.amplify-loader[data-size=large] {
-  width: var(--amplify-components-loader-large-width);
-  height: var(--amplify-components-loader-large-height);
-  font-size: var(--amplify-components-loader-large-font-size);
-}
-
 .amplify-loader line:last-of-type {
   stroke: var(--amplify-components-loader-linear-stroke-filled);
   stroke-dasharray: 50% 200%;
@@ -1404,23 +1657,37 @@ h6.amplify-heading {
   }
 }
 
-.amplify-loader[data-variation=linear] {
-  width: var(--amplify-components-loader-linear-width);
-  min-width: var(--amplify-components-loader-linear-min-width);
-  font-size: var(--amplify-components-loader-linear-font-size);
-  stroke: var(--amplify-components-loader-linear-stroke-empty);
-  stroke-width: var(--amplify-components-loader-linear-stroke-width);
-  stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
+.amplify-loader--small {
+  width: var(--amplify-components-loader-small-width);
+  height: var(--amplify-components-loader-small-height);
+  font-size: var(--amplify-components-loader-small-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-small-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-small-font-size
+  );
 }
 
-.amplify-loader[data-variation=linear][data-size=small] {
-  font-size: var(--amplify-components-loader-linear-small-font-size);
-  stroke-width: var(--amplify-components-loader-linear-small-stroke-width);
+.amplify-loader--large {
+  width: var(--amplify-components-loader-large-width);
+  height: var(--amplify-components-loader-large-height);
+  font-size: var(--amplify-components-loader-large-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-large-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-large-font-size
+  );
 }
 
-.amplify-loader[data-variation=linear][data-size=large] {
-  font-size: var(--amplify-components-loader-linear-large-font-size);
-  stroke-width: var(--amplify-components-loader-linear-large-stroke-width);
+.amplify-loader--linear {
+  width: var(--amplify-components-loader-linear-width);
+  min-width: var(--amplify-components-loader-linear-min-width);
+  stroke: var(--amplify-components-loader-linear-stroke-empty);
+  stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
+  stroke-width: var(--amplify-internal-loader-linear-stroke-width);
+  font-size: var(--amplify-internal-loader-linear-font-size);
 }
 
 .amplify-loader--determinate circle:last-of-type {
@@ -1508,11 +1775,11 @@ h6.amplify-heading {
   display: block;
 }
 
-.amplify-placeholder[data-size=small] {
+.amplify-placeholder--small {
   height: var(--amplify-components-placeholder-small-height);
 }
 
-.amplify-placeholder[data-size=large] {
+.amplify-placeholder--large {
   height: var(--amplify-components-placeholder-large-height);
 }
 
@@ -1576,28 +1843,28 @@ h6.amplify-heading {
 
 .amplify-alert {
   align-items: var(--amplify-components-alert-align-items);
-  justify-content: var(--amplify-components-alert-justify-content);
   background-color: var(--amplify-components-alert-background-color);
+  justify-content: var(--amplify-components-alert-justify-content);
   padding-block: var(--amplify-components-alert-padding-block);
   padding-inline: var(--amplify-components-alert-padding-inline);
 }
 
-.amplify-alert[data-variation=info] {
+.amplify-alert--info {
   color: var(--amplify-components-alert-info-color);
   background-color: var(--amplify-components-alert-info-background-color);
 }
 
-.amplify-alert[data-variation=error] {
+.amplify-alert--error {
   color: var(--amplify-components-alert-error-color);
   background-color: var(--amplify-components-alert-error-background-color);
 }
 
-.amplify-alert[data-variation=warning] {
+.amplify-alert--warning {
   color: var(--amplify-components-alert-warning-color);
   background-color: var(--amplify-components-alert-warning-background-color);
 }
 
-.amplify-alert[data-variation=success] {
+.amplify-alert--success {
   color: var(--amplify-components-alert-success-color);
   background-color: var(--amplify-components-alert-success-background-color);
 }
@@ -1617,7 +1884,7 @@ h6.amplify-heading {
   display: block;
 }
 
-.amplify-button.amplify-alert__dismiss {
+.amplify-alert__dismiss {
   color: inherit;
 }
 
@@ -1704,7 +1971,7 @@ h6.amplify-heading {
   padding: var(--amplify-components-card-padding);
 }
 
-.amplify-card[data-variation=outlined] {
+.amplify-card--outlined {
   background-color: var(--amplify-components-card-outlined-background-color);
   border-radius: var(--amplify-components-card-outlined-border-radius);
   border-width: var(--amplify-components-card-outlined-border-width);
@@ -1713,7 +1980,7 @@ h6.amplify-heading {
   box-shadow: var(--amplify-components-card-outlined-box-shadow);
 }
 
-.amplify-card[data-variation=elevated] {
+.amplify-card--elevated {
   background-color: var(--amplify-components-card-elevated-background-color);
   border-radius: var(--amplify-components-card-elevated-border-radius);
   border-width: var(--amplify-components-card-elevated-border-width);
@@ -1738,11 +2005,11 @@ h6.amplify-heading {
 .amplify-checkbox {
   cursor: var(--amplify-components-checkbox-cursor);
   align-items: var(--amplify-components-checkbox-align-items);
-  gap: inherit;
   flex-direction: row-reverse;
+  gap: inherit;
 }
 
-.amplify-checkbox[data-disabled=true] {
+.amplify-checkbox--disabled {
   cursor: var(--amplify-components-checkbox-disabled-cursor);
 }
 
@@ -1751,6 +2018,12 @@ h6.amplify-heading {
   align-items: var(--amplify-components-checkbox-button-align-items);
   justify-content: var(--amplify-components-checkbox-button-justify-content);
   color: var(--amplify-components-checkbox-button-color);
+  --amplify-internal-checkbox_button-focused-before-border-color: var(
+    --amplify-components-checkbox-button-focus-border-color
+  );
+  --amplify-internal-checkbox_button-focused-before-box-shadow: var(
+    --amplify-components-checkbox-button-focus-box-shadow
+  );
 }
 
 .amplify-checkbox__button::before {
@@ -1766,25 +2039,29 @@ h6.amplify-heading {
   border-color: var(--amplify-components-checkbox-button-before-border-color);
 }
 
-.amplify-checkbox__button[data-focus=true]::before {
+.amplify-checkbox__button--focused::before {
   outline-color: var(--amplify-components-checkbox-button-focus-outline-color);
   outline-style: var(--amplify-components-checkbox-button-focus-outline-style);
   outline-width: var(--amplify-components-checkbox-button-focus-outline-width);
   outline-offset: var(--amplify-components-checkbox-button-focus-outline-offset);
-  border-color: var(--amplify-components-checkbox-button-focus-border-color);
-  box-shadow: var(--amplify-components-checkbox-button-focus-box-shadow);
+  border-color: var(--amplify-internal-checkbox_button-focused-before-border-color);
+  box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow);
 }
 
-.amplify-checkbox__button[data-error=true]::before {
-  border-color: var(--amplify-components-checkbox-button-error-border-color);
+.amplify-checkbox__button--error {
+  --amplify-internal-checkbox_button-focused-before-border-color: var(
+    --amplify-components-checkbox-button-error-focus-border-color
+  );
+  --amplify-internal-checkbox_button-focused-before-box-shadow: var(
+    --amplify-components-checkbox-button-error-focus-box-shadow
+  );
 }
 
-.amplify-checkbox__button[data-error=true][data-focus=true]::before {
-  border-color: var(--amplify-components-checkbox-button-error-focus-border-color);
-  box-shadow: var(--amplify-components-checkbox-button-error-focus-box-shadow);
+.amplify-checkbox__button--error::before {
+  border-color: var(--amplify-components-checkbox-button-error-border-color);
 }
 
-.amplify-checkbox__button[data-disabled=true]::before {
+.amplify-checkbox__button--disabled::before {
   border-color: var(--amplify-components-checkbox-button-disabled-border-color);
 }
 
@@ -1796,15 +2073,21 @@ h6.amplify-heading {
   transition-property: var(--amplify-components-checkbox-icon-transition-property);
   transition-duration: var(--amplify-components-checkbox-icon-transition-duration);
   transition-timing-function: var(--amplify-components-checkbox-icon-transition-timing-function);
+  --amplify-internal-checkbox-icon-disabled-background-color: var(
+    --amplify-components-checkbox-icon-background-color
+  );
 }
 
-.amplify-checkbox__icon[data-checked=true] {
+.amplify-checkbox__icon--checked {
   opacity: var(--amplify-components-checkbox-icon-checked-opacity);
   transform: var(--amplify-components-checkbox-icon-checked-transform);
+  --amplify-internal-checkbox-icon-disabled-background-color: var(
+    --amplify-components-checkbox-icon-checked-disabled-background-color
+  );
 }
 
-.amplify-checkbox__icon[data-checked=true][data-disabled=true] {
-  background-color: var(--amplify-components-checkbox-icon-checked-disabled-background-color);
+.amplify-checkbox__icon--disabled {
+  background-color: var(--amplify-internal-checkbox-icon-disabled-background-color);
 }
 
 .amplify-checkbox__label[data-disabled=true] {
@@ -1829,33 +2112,32 @@ h6.amplify-heading {
   opacity: var(--amplify-components-divider-opacity);
   padding: 0;
   display: block;
+  --amplify-internal-divider-size: var(
+    --amplify-components-divider-border-width
+  );
   position: relative;
   text-align: center;
 }
 
-.amplify-divider[aria-orientation=horizontal] {
-  width: 100%;
-  border-bottom-width: var(--amplify-components-divider-border-width);
-}
-
-.amplify-divider[aria-orientation=horizontal][data-size=small] {
-  border-bottom-width: var(--amplify-components-divider-small-border-width);
-}
-
-.amplify-divider[aria-orientation=horizontal][data-size=large] {
-  border-bottom-width: var(--amplify-components-divider-large-border-width);
+.amplify-divider--small {
+  --amplify-internal-divider-size: var(
+    --amplify-components-divider-small-border-width
+  );
 }
 
-.amplify-divider[aria-orientation=vertical] {
-  border-left-width: var(--amplify-components-divider-border-width);
+.amplify-divider--large {
+  --amplify-internal-divider-size: var(
+    --amplify-components-divider-large-border-width
+  );
 }
 
-.amplify-divider[aria-orientation=vertical][data-size=small] {
-  border-left-width: var(--amplify-components-divider-small-border-width);
+.amplify-divider--horizontal {
+  width: 100%;
+  border-bottom-width: var(--amplify-internal-divider-size);
 }
 
-.amplify-divider[aria-orientation=vertical][data-size=large] {
-  border-left-width: var(--amplify-components-divider-large-border-width);
+.amplify-divider--vertical {
+  border-left-width: var(--amplify-internal-divider-size);
 }
 
 .amplify-divider--label {
@@ -1961,169 +2243,76 @@ h6.amplify-heading {
   animation-name: amplify-expander-slide-down;
   -webkit-animation-duration: var(--amplify-components-expander-content-open-animation-duration);
   animation-duration: var(--amplify-components-expander-content-open-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
-  animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
-}
-
-.amplify-expander__content[data-state=closed] {
-  -webkit-animation-name: amplify-expander-slide-up;
-  animation-name: amplify-expander-slide-up;
-  -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-  animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
-  -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
-  animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
-}
-
-.amplify-expander__content__text {
-  display: block;
-  color: var(--amplify-components-expander-content-text-color);
-  -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
-  padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
-  padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
-}
-
-.amplify-expander__icon {
-  transition-property: transform;
-  transition-duration: var(--amplify-components-expander-icon-transition-duration);
-  transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
-}
-
-[data-state=open] .amplify-expander__icon {
-  transform: rotate(180deg);
-}
-
-@-webkit-keyframes amplify-expander-slide-down {
-  from {
-    height: 0;
-  }
-
-  to {
-    height: auto;
-  }
-}
-
-@keyframes amplify-expander-slide-down {
-  from {
-    height: 0;
-  }
-
-  to {
-    height: auto;
-  }
-}
-
-@-webkit-keyframes amplify-expander-slide-up {
-  from {
-    height: auto;
-  }
-
-  to {
-    height: 0;
-  }
-}
-
-@keyframes amplify-expander-slide-up {
-  from {
-    height: auto;
-  }
-
-  to {
-    height: 0;
-  }
-}
-
-.amplify-select, .amplify-input, .amplify-textarea {
-  box-sizing: border-box;
-  color: var(--amplify-components-fieldcontrol-color);
-  font-size: var(--amplify-components-fieldcontrol-font-size);
-  line-height: var(--amplify-components-fieldcontrol-line-height);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
-  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
-  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
-  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
-  transition: all var(--amplify-components-fieldcontrol-transition-duration);
-  width: 100%;
-  border-color: var(--amplify-components-fieldcontrol-border-color);
-  border-radius: var(--amplify-components-fieldcontrol-border-radius);
-  border-style: var(--amplify-components-fieldcontrol-border-style);
-  border-width: var(--amplify-components-fieldcontrol-border-width);
-  outline-color: var(--amplify-components-fieldcontrol-outline-color);
-  outline-style: var(--amplify-components-fieldcontrol-outline-style);
-  outline-width: var(--amplify-components-fieldcontrol-outline-width);
-  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-}
-
-.amplify-select:focus, .amplify-input:focus, .amplify-textarea:focus {
-  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
-  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
-}
-
-[data-size=small].amplify-select, [data-size=small].amplify-input, [data-size=small].amplify-textarea {
-  font-size: var(--amplify-components-fieldcontrol-small-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
-  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
-  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
-  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+  -webkit-animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
+  animation-timing-function: var(--amplify-components-expander-content-open-animation-timing-function);
 }
 
-[data-size=large].amplify-select, [data-size=large].amplify-input, [data-size=large].amplify-textarea {
-  font-size: var(--amplify-components-fieldcontrol-large-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
-  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
-  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
-  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+.amplify-expander__content[data-state=closed] {
+  -webkit-animation-name: amplify-expander-slide-up;
+  animation-name: amplify-expander-slide-up;
+  -webkit-animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
+  animation-duration: var(--amplify-components-expander-content-closed-animation-duration);
+  -webkit-animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
+  animation-timing-function: var(--amplify-components-expander-content-closed-animation-timing-function);
 }
 
-[aria-invalid=true].amplify-select, [aria-invalid=true].amplify-input, [aria-invalid=true].amplify-textarea {
-  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+.amplify-expander__content__text {
+  display: block;
+  color: var(--amplify-components-expander-content-text-color);
+  -webkit-padding-before: var(--amplify-components-expander-content-text-padding-block-start);
+  padding-block-start: var(--amplify-components-expander-content-text-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-expander-content-text-padding-block-end);
+  padding-block-end: var(--amplify-components-expander-content-text-padding-block-end);
 }
 
-[aria-invalid=true].amplify-select:focus, [aria-invalid=true].amplify-input:focus, [aria-invalid=true].amplify-textarea:focus {
-  border-color: var(--amplify-components-fieldcontrol-error-border-color);
-  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+.amplify-expander__icon {
+  transition-property: transform;
+  transition-duration: var(--amplify-components-expander-icon-transition-duration);
+  transition-timing-function: var(--amplify-components-expander-icon-transition-timing-function);
 }
 
-[disabled].amplify-select, [disabled].amplify-input, [disabled].amplify-textarea {
-  color: var(--amplify-components-fieldcontrol-disabled-color);
-  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
-  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
-  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+[data-state=open] .amplify-expander__icon {
+  transform: rotate(180deg);
 }
 
-[data-variation=quiet].amplify-select, [data-variation=quiet].amplify-input, [data-variation=quiet].amplify-textarea {
-  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
-  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
-  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+@-webkit-keyframes amplify-expander-slide-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: auto;
+  }
 }
 
-[data-variation=quiet].amplify-select:focus, [data-variation=quiet].amplify-input:focus, [data-variation=quiet].amplify-textarea:focus {
-  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
-  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+@keyframes amplify-expander-slide-down {
+  from {
+    height: 0;
+  }
+
+  to {
+    height: auto;
+  }
 }
 
-[data-variation=quiet][aria-invalid=true].amplify-select, [data-variation=quiet][aria-invalid=true].amplify-input, [data-variation=quiet][aria-invalid=true].amplify-textarea {
-  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+@-webkit-keyframes amplify-expander-slide-up {
+  from {
+    height: auto;
+  }
+
+  to {
+    height: 0;
+  }
 }
 
-[data-variation=quiet][aria-invalid=true].amplify-select:focus, [data-variation=quiet][aria-invalid=true].amplify-input:focus, [data-variation=quiet][aria-invalid=true].amplify-textarea:focus {
-  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+@keyframes amplify-expander-slide-up {
+  from {
+    height: auto;
+  }
+
+  to {
+    height: 0;
+  }
 }
 
 .amplify-field {
@@ -2131,12 +2320,12 @@ h6.amplify-heading {
   gap: var(--amplify-components-field-gap);
 }
 
-.amplify-field[data-size=small] {
+.amplify-field--small {
   font-size: var(--amplify-components-field-small-font-size);
   gap: var(--amplify-components-field-small-gap);
 }
 
-.amplify-field[data-size=large] {
+.amplify-field--large {
   font-size: var(--amplify-components-field-large-font-size);
   gap: var(--amplify-components-field-large-gap);
 }
@@ -2145,25 +2334,25 @@ h6.amplify-heading {
   color: var(--amplify-components-field-label-color);
 }
 
-.amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+.amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 
 @supports not (border-start-start-radius: 0) {
-  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 }
 
-.amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+.amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
   border-end-end-radius: 0;
   border-start-end-radius: 0;
 }
 
 @supports not (border-end-end-radius: 0) {
-  .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+  .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
@@ -2173,11 +2362,11 @@ h6.amplify-heading {
   gap: var(--amplify-components-fieldgroup-gap);
 }
 
-.amplify-field-group[data-orientation=horizontal] {
+.amplify-field-group--horizontal {
   flex-direction: row;
 }
 
-.amplify-field-group[data-orientation=vertical] {
+.amplify-field-group--vertical {
   flex-direction: column;
   align-items: var(--amplify-components-fieldgroup-vertical-align-items);
 }
@@ -2198,23 +2387,31 @@ h6.amplify-heading {
  */
 
 .amplify-field-group__outer-start .amplify-field-group__control:not(:focus) {
-  -webkit-border-end: none;
-  border-inline-end: none;
+  border-inline-end-color: transparent;
 }
 
 .amplify-field-group__outer-start .amplify-field-group__control:focus {
   z-index: 1;
 }
 
+.amplify-field-group__outer-start--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-start-color: transparent;
+}
+
 .amplify-field-group__outer-end .amplify-field-group__control:not(:focus) {
-  -webkit-border-start: none;
-  border-inline-start: none;
+  border-inline-start-color: transparent;
 }
 
 .amplify-field-group__outer-end .amplify-field-group__control:focus {
   z-index: 1;
 }
 
+.amplify-field-group__outer-end--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-end-color: transparent;
+}
+
 /**
  * Inner field group components
  */
@@ -2224,7 +2421,7 @@ h6.amplify-heading {
   width: 100%;
 }
 
-.amplify-field-group__field-wrapper[data-orientation=vertical] {
+.amplify-field-group__field-wrapper--vertical {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -2309,7 +2506,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-menu-content__item {
-  min-height: var(--amplify-components-menu-item-min-width);
+  min-height: var(--amplify-components-menu-item-min-height);
   -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
   padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
   -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
@@ -2344,7 +2541,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
 
-.amplify-pagination__item-current, .amplify-pagination__item-button[data-variation=link] {
+.amplify-pagination__item-current, .amplify-pagination__item-button {
   height: var(--amplify-components-pagination-item-shared-height);
   min-width: var(--amplify-components-pagination-item-shared-min-width);
   border-radius: var(--amplify-components-pagination-item-shared-border-radius);
@@ -2359,7 +2556,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   margin-right: var(--amplify-components-pagination-item-container-margin-right);
 }
 
-.amplify-pagination__item-button[data-variation=link] {
+.amplify-pagination__item-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2373,13 +2570,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   transition-duration: var(--amplify-components-pagination-button-transition-duration);
 }
 
-.amplify-pagination__item-button[data-variation=link]:hover {
+.amplify-pagination__item-button:hover {
   text-decoration: none;
   color: var(--amplify-components-pagination-button-hover-color);
   background-color: var(--amplify-components-pagination-button-hover-background-color);
 }
 
-.amplify-pagination__item-button[data-variation=link][disabled] {
+.amplify-pagination__item-button--disabled {
   color: var(--amplify-components-pagination-button-disabled-color);
   pointer-events: none;
 }
@@ -2413,22 +2610,22 @@ html[dir=rtl] .amplify-field-group__inner-start {
   line-height: var(--amplify-components-rating-default-size);
 }
 
-.amplify-rating[data-size=small] {
+.amplify-rating .amplify-icon {
+  font-size: unset;
+  line-height: unset;
+  height: 1em;
+}
+
+.amplify-rating--small {
   font-size: var(--amplify-components-rating-small-size);
   line-height: var(--amplify-components-rating-small-size);
 }
 
-.amplify-rating[data-size=large] {
+.amplify-rating--large {
   font-size: var(--amplify-components-rating-large-size);
   line-height: var(--amplify-components-rating-large-size);
 }
 
-.amplify-rating .amplify-icon {
-  font-size: unset;
-  line-height: unset;
-  height: 1em;
-}
-
 .amplify-rating-filled {
   fill: currentColor;
   display: inline-block;
@@ -2470,15 +2667,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: row-reverse;
 }
 
-.amplify-radio[data-disabled=true] {
+.amplify-radio--disabled {
   cursor: var(--amplify-components-radio-disabled-cursor);
 }
 
 .amplify-radio__button {
   align-items: var(--amplify-components-radio-button-align-items);
   justify-content: var(--amplify-components-radio-button-justify-content);
-  width: var(--amplify-components-radio-button-width);
-  height: var(--amplify-components-radio-button-height);
   padding: var(--amplify-components-radio-button-padding);
   box-sizing: var(--amplify-components-radio-button-box-sizing);
   border-width: var(--amplify-components-radio-button-border-width);
@@ -2489,6 +2684,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
   background-color: var(--amplify-components-radio-button-background-color);
   transition-property: var(--amplify-components-radio-button-transition-property);
   transition-duration: var(--amplify-components-radio-button-transition-duration);
+  width: var(--amplify-components-radio-button-width);
+  height: var(--amplify-components-radio-button-height);
   outline-color: var(--amplify-components-radio-button-outline-color);
   outline-style: var(--amplify-components-radio-button-outline-style);
   outline-width: var(--amplify-components-radio-button-outline-width);
@@ -2505,12 +2702,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-radius: 50%;
 }
 
-.amplify-radio__button[data-size=small] {
+.amplify-radio__button--small {
   width: var(--amplify-components-radio-button-small-width);
   height: var(--amplify-components-radio-button-small-height);
 }
 
-.amplify-radio__button[data-size=large] {
+.amplify-radio__button--large {
   width: var(--amplify-components-radio-button-large-width);
   height: var(--amplify-components-radio-button-large-height);
 }
@@ -2573,12 +2770,102 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-select {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  min-width: var(--amplify-components-select-min-width);
   -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
   padding-inline-end: var(--amplify-components-select-padding-inline-end);
-  min-width: var(--amplify-components-select-min-width);
   white-space: var(--amplify-components-select-white-space);
 }
 
+.amplify-select:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+
+.amplify-select--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+
+.amplify-select--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+  padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+
+.amplify-select--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+
+.amplify-select--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+
+.amplify-select[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+
+.amplify-select--quiet {
+  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+
+.amplify-select--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+
+.amplify-select--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+
+.amplify-select--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
+
 @-moz-document url-prefix() {
   .amplify-select option {
     background-color: var(--amplify-components-select-option-background-color);
@@ -2589,11 +2876,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   color: initial;
 }
 
-.amplify-select[data-size=small] {
+.amplify-select--small {
   min-width: var(--amplify-components-select-small-min-width);
 }
 
-.amplify-select[data-size=large] {
+.amplify-select--large {
   min-width: var(--amplify-components-select-large-min-width);
 }
 
@@ -2611,45 +2898,53 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 
 .amplify-sliderfield__root {
-  position: relative;
-  display: flex;
   align-items: center;
+  box-sizing: content-box;
+  display: flex;
+  padding-block: var(--amplify-components-sliderfield-padding-block);
+  position: relative;
+  touch-action: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  touch-action: none;
-  box-sizing: content-box;
-  padding-block: var(--amplify-components-sliderfield-padding-block);
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-thumb-height
+  );
 }
 
 .amplify-sliderfield__root[data-disabled] {
   cursor: not-allowed;
 }
 
-.amplify-sliderfield__root[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-thumb-height);
+.amplify-sliderfield__root--horizontal {
+  height: var(--amplify-internal-sliderfield-root-height);
 }
 
-.amplify-sliderfield__root[data-orientation=vertical] {
+.amplify-sliderfield__root--vertical {
   flex-direction: column;
-  width: var(--amplify-components-sliderfield-thumb-width);
-}
-
-[data-size=large] .amplify-sliderfield__root[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-large-thumb-height);
-}
-
-[data-size=large] .amplify-sliderfield__root[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-large-thumb-height);
+  width: var(--amplify-internal-sliderfield-root-width);
 }
 
-[data-size=small] .amplify-sliderfield__root[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-small-thumb-height);
+.amplify-sliderfield__root--large {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
 }
 
-[data-size=small] .amplify-sliderfield__root[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-small-thumb-height);
+.amplify-sliderfield__root--small {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
 }
 
 .amplify-sliderfield__track {
@@ -2657,32 +2952,46 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-grow: 1;
   border-radius: var(--amplify-components-sliderfield-track-border-radius);
   background-color: var(--amplify-components-sliderfield-track-background-color);
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-width: var(
+    --amplify-components-sliderfield-track-min-width
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-height: var(
+    --amplify-components-sliderfield-track-min-width
+  );
 }
 
-.amplify-sliderfield__track[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-track-height);
-  min-width: var(--amplify-components-sliderfield-track-min-width);
-}
-
-.amplify-sliderfield__track[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-track-height);
-  min-height: var(--amplify-components-sliderfield-track-min-width);
-}
-
-[data-size=large] .amplify-sliderfield__track[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-large-track-height);
+.amplify-sliderfield__track--horizontal {
+  height: var(--amplify-internal-sliderfield-track-height);
+  min-width: var(--amplify-internal-sliderfield-track-min-width);
 }
 
-[data-size=large] .amplify-sliderfield__track[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-large-track-height);
+.amplify-sliderfield__track--vertical {
+  width: var(--amplify-internal-sliderfield-track-width);
+  min-height: var(--amplify-internal-sliderfield-track-min-height);
 }
 
-[data-size=small] .amplify-sliderfield__track[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-small-track-height);
+.amplify-sliderfield__track--large {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-large-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-large-track-height
+  );
 }
 
-[data-size=small] .amplify-sliderfield__track[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-small-track-height);
+.amplify-sliderfield__track--small {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-small-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-small-track-height
+  );
 }
 
 .amplify-sliderfield__range {
@@ -2695,11 +3004,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
 }
 
-.amplify-sliderfield__range[data-orientation=horizontal] {
+.amplify-sliderfield__range--horizontal {
   height: 100%;
 }
 
-.amplify-sliderfield__range[data-orientation=vertical] {
+.amplify-sliderfield__range--vertical {
   width: 100%;
 }
 
@@ -2730,12 +3039,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
 }
 
-[data-size=large] .amplify-sliderfield__thumb {
+.amplify-sliderfield__thumb--large {
   width: var(--amplify-components-sliderfield-large-thumb-width);
   height: var(--amplify-components-sliderfield-large-thumb-height);
 }
 
-[data-size=small] .amplify-sliderfield__thumb {
+.amplify-sliderfield__thumb--small {
   width: var(--amplify-components-sliderfield-small-thumb-width);
   height: var(--amplify-components-sliderfield-small-thumb-height);
 }
@@ -2749,7 +3058,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-inline-end: none;
 }
 
-[data-variation=quiet] .amplify-stepperfield__button--decrease {
+.amplify-stepperfield__button--decrease--quiet {
   border-width: 0 0 var(--amplify-components-button-border-width) 0;
   border-radius: 0;
 }
@@ -2759,7 +3068,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-inline-start: none;
 }
 
-[data-variation=quiet] .amplify-stepperfield__button--increase {
+.amplify-stepperfield__button--increase--quiet {
   border-width: 0 0 var(--amplify-components-button-border-width) 0;
   border-radius: 0;
 }
@@ -2785,11 +3094,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   display: inline-block;
 }
 
-.amplify-switchfield[data-size=small] {
+.amplify-switchfield--small {
   font-size: var(--amplify-components-switchfield-small-font-size);
 }
 
-.amplify-switchfield[data-size=large] {
+.amplify-switchfield--large {
   font-size: var(--amplify-components-switchfield-large-font-size);
 }
 
@@ -2798,19 +3107,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
   align-items: center;
 }
 
-.amplify-switch__wrapper[data-label-position=start] {
+.amplify-switch__wrapper--start {
   flex-direction: row;
 }
 
-.amplify-switch__wrapper[data-label-position=end] {
+.amplify-switch__wrapper--end {
   flex-direction: row-reverse;
 }
 
-.amplify-switch__wrapper[data-label-position=top] {
+.amplify-switch__wrapper--top {
   flex-direction: column;
 }
 
-.amplify-switch__wrapper[data-label-position=bottom] {
+.amplify-switch__wrapper--bottom {
   flex-direction: column-reverse;
 }
 
@@ -2826,16 +3135,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
   background-color: var(--amplify-components-switchfield-track-background-color);
 }
 
-.amplify-switch-track[data-checked=true] {
+.amplify-switch-track--checked {
   background-color: var(--amplify-components-switchfield-track-checked-background-color);
 }
 
-.amplify-switch-track[data-disabled=true] {
+.amplify-switch-track--disabled {
   opacity: var(--amplify-components-switchfield-disabled-opacity);
   cursor: not-allowed;
 }
 
-.amplify-switch-track[data-focused=true] {
+.amplify-switch-track--focused {
   box-shadow: var(--amplify-components-switchfield-focused-shadow);
 }
 
@@ -2849,11 +3158,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   overflow-wrap: break-word;
 }
 
-.amplify-switch-thumb[data-checked=true] {
+.amplify-switch-thumb--checked {
   transform: var(--amplify-components-switchfield-thumb-checked-transform);
 }
 
-.amplify-switch-thumb[data-disabled=true] {
+.amplify-switch-thumb--disabled {
   cursor: not-allowed;
 }
 
@@ -2869,72 +3178,152 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-collapse: var(--amplify-components-table-border-collapse);
   display: var(--amplify-components-table-display);
   width: var(--amplify-components-table-width);
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-padding
+  );
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    0px var(--amplify-components-table-data-border-width) 0px;
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    0px var(--amplify-components-table-header-border-width) 0px;
   /**
    * Data attribute stylings
    */
 }
 
-.amplify-table .amplify-table__caption {
+.amplify-table--small {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-small-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-small-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-small-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-small-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-small-padding
+  );
+}
+
+.amplify-table--large {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-large-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-large-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-large-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-large-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-large-padding
+  );
+}
+
+.amplify-table--bordered {
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width);
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width);
+}
+
+.amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
   display: var(--amplify-components-table-caption-display);
-  font-size: var(--amplify-components-table-caption-font-size);
+  font-size: var(--amplify-internal-table-caption-font-size);
   text-align: var(--amplify-components-table-caption-text-align);
   word-break: var(--amplify-components-table-caption-word-break);
 }
 
-.amplify-table .amplify-table__head {
+.amplify-table__head {
   display: var(--amplify-components-table-head-display);
   vertical-align: var(--amplify-components-table-head-vertical-align);
 }
 
-.amplify-table .amplify-table__body {
+.amplify-table__body {
   display: var(--amplify-components-table-body-display);
   vertical-align: var(--amplify-components-table-body-vertical-align);
 }
 
-.amplify-table .amplify-table__foot {
+.amplify-table__foot {
   display: var(--amplify-components-table-foot-display);
   vertical-align: var(--amplify-components-table-foot-vertical-align);
 }
 
-.amplify-table .amplify-table__row {
+.amplify-table__row {
   display: var(--amplify-components-table-row-display);
   vertical-align: var(--amplify-components-table-row-vertical-align);
 }
 
-.amplify-table .amplify-table__th {
+.amplify-table__th {
   border-color: var(--amplify-components-table-header-border-color);
   border-style: var(--amplify-components-table-header-border-style);
-  border-width: var(--amplify-components-table-header-border-width);
+  border-width: var(--amplify-internal-table-th-border-width);
   color: var(--amplify-components-table-header-color);
   display: var(--amplify-components-table-header-display);
-  font-size: var(--amplify-components-table-header-font-size);
+  font-size: var(--amplify-internal-table-th-font-size);
   font-weight: var(--amplify-components-table-header-font-weight);
-  padding: var(--amplify-components-table-header-padding);
+  padding: var(--amplify-internal-table-th-padding);
   vertical-align: var(--amplify-components-table-header-vertical-align);
 }
 
-.amplify-table .amplify-table__td {
+.amplify-table__th:first-child {
+  border-left-width: var(--amplify-components-table-header-border-width);
+}
+
+.amplify-table__th:last-child {
+  border-right-width: var(--amplify-components-table-header-border-width);
+}
+
+.amplify-table__td {
   border-color: var(--amplify-components-table-data-border-color);
   border-style: var(--amplify-components-table-data-border-style);
-  border-width: var(--amplify-components-table-data-border-width);
+  border-width: var(--amplify-internal-table-td-border-width);
   color: var(--amplify-components-table-data-color);
   display: var(--amplify-components-table-data-display);
-  font-size: var(--amplify-components-table-data-font-size);
+  font-size: var(--amplify-internal-table-td-font-size);
   font-weight: var(--amplify-components-table-data-font-weight);
-  padding: var(--amplify-components-table-data-padding);
+  padding: var(--amplify-internal-table-td-padding);
   vertical-align: var(--amplify-components-table-data-vertical-align);
 }
 
-.amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:first-child),
-.amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:first-child) {
-  border-left: none;
+.amplify-table__td:first-child {
+  border-left-width: var(--amplify-components-table-data-border-width);
 }
 
-.amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:last-child),
-.amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:last-child) {
-  border-right: none;
+.amplify-table__td:last-child {
+  border-right-width: var(--amplify-components-table-data-border-width);
 }
 
 .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
@@ -2945,34 +3334,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }
 
-.amplify-table[data-size=small] .amplify-table__caption {
-  font-size: var(--amplify-components-table-caption-small-font-size);
-}
-
-.amplify-table[data-size=small] .amplify-table__th {
-  font-size: var(--amplify-components-table-header-small-font-size);
-  padding: var(--amplify-components-table-header-small-padding);
-}
-
-.amplify-table[data-size=small] .amplify-table__td {
-  font-size: var(--amplify-components-table-data-small-font-size);
-  padding: var(--amplify-components-table-data-small-padding);
-}
-
-.amplify-table[data-size=large] .amplify-table__caption {
-  font-size: var(--amplify-components-table-caption-large-font-size);
-}
-
-.amplify-table[data-size=large] .amplify-table__th {
-  font-size: var(--amplify-components-table-header-large-font-size);
-  padding: var(--amplify-components-table-header-large-padding);
-}
-
-.amplify-table[data-size=large] .amplify-table__td {
-  font-size: var(--amplify-components-table-data-large-font-size);
-  padding: var(--amplify-components-table-data-large-padding);
-}
-
 .amplify-tabs {
   background-color: var(--amplify-components-tabs-background-color);
   box-shadow: var(--amplify-components-tabs-box-shadow);
@@ -3053,102 +3414,330 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: column;
 }
 
-.amplify-togglebutton[data-variation=primary], .amplify-togglebutton:hover, .amplify-togglebutton {
-  border-color: var(--amplify-components-togglebutton-border-color);
-  color: var(--amplify-components-togglebutton-color);
+.amplify-togglebutton {
+  background-color: var(--amplify-internal-togglebutton-background-color);
+  border-color: var(--amplify-internal-togglebutton-border-color);
+  color: var(--amplify-internal-togglebutton-color);
+  --amplify-internal-togglebutton-background-color: initial;
+  --amplify-internal-togglebutton-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-components-togglebutton-hover-background-color
+  );
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-background-color
+  );
+  --amplify-internal-togglebutton-focus-border-color: var(
+    --amplify-components-togglebutton-focus-border-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-components-togglebutton-focus-color
+  );
+  --amplify-internal-togglebutton-active-background-color: var(
+    --amplify-components-togglebutton-active-background-color
+  );
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-components-togglebutton-disabled-background-color
+  );
+  --amplify-internal-togglebutton-disabled-border-color: var(
+    --amplify-components-togglebutton-disabled-border-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-disabled-color
+  );
 }
 
 .amplify-togglebutton:hover {
-  background-color: var(--amplify-components-togglebutton-hover-background-color);
+  background-color: var(--amplify-internal-togglebutton-hover-background-color);
+  border-color: var(--amplify-internal-togglebutton-border-color);
+  color: var(--amplify-internal-togglebutton-color);
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-hover-background-color
+  );
 }
 
 .amplify-togglebutton:focus {
-  border-color: var(--amplify-components-togglebutton-focus-border-color);
-  color: var(--amplify-components-togglebutton-focus-color);
+  background-color: var(--amplify-internal-togglebutton-focus-background-color);
+  border-color: var(--amplify-internal-togglebutton-focus-border-color);
+  color: var(--amplify-internal-togglebutton-focus-color);
 }
 
 .amplify-togglebutton:active {
-  background-color: var(--amplify-components-togglebutton-active-background-color);
+  background-color: var(--amplify-internal-togglebutton-active-background-color);
 }
 
 .amplify-togglebutton:disabled {
-  background-color: var(--amplify-components-togglebutton-disabled-background-color);
-  border-color: var(--amplify-components-togglebutton-disabled-border-color);
-  color: var(--amplify-components-togglebutton-disabled-color);
-}
-
-.amplify-togglebutton[aria-pressed=true] {
-  background-color: var(--amplify-components-togglebutton-pressed-background-color);
-  color: var(--amplify-components-togglebutton-pressed-color);
-}
-
-.amplify-togglebutton[aria-pressed=true]:hover:not(:disabled) {
-  background-color: var(--amplify-components-togglebutton-pressed-hover-background-color);
-}
-
-.amplify-togglebutton[data-variation=primary] {
-  background-color: var(--amplify-components-togglebutton-primary-background-color);
+  background-color: var(--amplify-internal-togglebutton-disabled-background-color);
+  border-color: var(--amplify-internal-togglebutton-disabled-border-color);
+  color: var(--amplify-internal-togglebutton-disabled-color);
+}
+
+.amplify-togglebutton--pressed {
+  --amplify-internal-togglebutton-background-color: var(
+    --amplify-components-togglebutton-pressed-background-color
+  );
+  --amplify-internal-togglebutton-color: var(
+    --amplify-components-togglebutton-pressed-color
+  );
+}
+
+.amplify-togglebutton--pressed:hover:not(:disabled) {
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-components-togglebutton-pressed-hover-background-color
+  );
+}
+
+.amplify-togglebutton--pressed:disabled {
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-components-togglebutton-pressed-background-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-pressed-color
+  );
+}
+
+.amplify-togglebutton--primary {
+  --amplify-internal-togglebutton-primary-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-background-color: var(
+    --amplify-internal-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-primary-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-color: var(
+    --amplify-internal-togglebutton-primary-color
+  );
   border-width: var(--amplify-components-togglebutton-primary-border-width);
-}
-
-.amplify-togglebutton[data-variation=primary]:focus {
-  background-color: var(--amplify-components-togglebutton-primary-focus-background-color);
-  border-color: var(--amplify-components-togglebutton-primary-focus-border-color);
-  color: var(--amplify-components-togglebutton-primary-focus-color);
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-focus-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-active-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-disabled-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-primary-focus-background-color: var(
+    --amplify-components-togglebutton-primary-focus-background-color
+  );
+  --amplify-internal-togglebutton-primary-focus-border-color: var(
+    --amplify-components-togglebutton-primary-focus-border-color
+  );
+  --amplify-internal-togglebutton-primary-focus-color: var(
+    --amplify-components-togglebutton-primary-focus-color
+  );
+  --amplify-internal-togglebutton-primary-hover-background-color: var(
+    --amplify-components-togglebutton-primary-hover-background-color
+  );
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-hover-color: var(
+    --amplify-components-togglebutton-primary-hover-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-background-color: var(
+    --amplify-components-togglebutton-primary-disabled-background-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-color: var(
+    --amplify-components-togglebutton-primary-disabled-color
+  );
+}
+
+.amplify-togglebutton--primary:focus {
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-primary-focus-background-color
+  );
+  --amplify-internal-togglebutton-focus-border-color: var(
+    --amplify-internal-togglebutton-primary-focus-border-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-internal-togglebutton-primary-focus-color
+  );
   box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
-}
-
-.amplify-togglebutton[data-variation=primary]:hover {
-  background-color: var(--amplify-components-togglebutton-primary-hover-background-color);
-  color: var(--amplify-components-togglebutton-primary-hover-color);
-}
-
-.amplify-togglebutton[data-variation=primary]:disabled {
-  background-color: var(--amplify-components-togglebutton-primary-disabled-background-color);
-  color: var(--amplify-components-togglebutton-primary-disabled-color);
-}
-
-.amplify-togglebutton[data-variation=primary][aria-pressed=true] {
-  background-color: var(--amplify-components-togglebutton-primary-pressed-background-color);
-  border-color: var(--amplify-components-togglebutton-primary-pressed-border-color);
-  color: var(--amplify-components-togglebutton-primary-pressed-color);
-}
-
-.amplify-togglebutton[data-variation=primary][aria-pressed=true]:focus {
-  border-color: var(--amplify-components-togglebutton-primary-pressed-focus-border-color);
-  background-color: var(--amplify-components-togglebutton-primary-pressed-focus-background-color);
-}
-
-.amplify-togglebutton[data-variation=primary][aria-pressed=true]:hover:not(:disabled) {
-  border-color: var(--amplify-components-togglebutton-primary-pressed-hover-border-color);
-  background-color: var(--amplify-components-togglebutton-primary-pressed-hover-background-color);
-}
-
-.amplify-togglebutton[data-variation=link] {
-  color: var(--amplify-components-togglebutton-link-color);
-}
-
-.amplify-togglebutton[data-variation=link]:hover {
-  background-color: var(--amplify-components-togglebutton-link-hover-background-color);
-  color: var(--amplify-components-togglebutton-link-hover-color);
-}
-
-.amplify-togglebutton[data-variation=link]:focus {
-  background-color: var(--amplify-components-togglebutton-link-focus-background-color);
-  color: var(--amplify-components-togglebutton-link-focus-color);
-}
-
-.amplify-togglebutton[data-variation=link]:disabled {
-  color: var(--amplify-components-togglebutton-link-disabled-color);
-}
-
-.amplify-togglebutton[data-variation=link][aria-pressed=true] {
-  background-color: var(--amplify-components-togglebutton-link-pressed-background-color);
-  color: var(--amplify-components-togglebutton-link-pressed-color);
-}
-
-.amplify-togglebutton[data-variation=link][aria-pressed=true]:hover {
-  background-color: var(--amplify-components-togglebutton-link-pressed-hover-background-color);
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-internal-togglebutton-primary-focus-border-color
+  );
+}
+
+.amplify-togglebutton--primary:hover {
+  background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
+  border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
+  color: var(--amplify-internal-togglebutton-primary-hover-color);
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-primary-hover-background-color
+  );
+}
+
+.amplify-togglebutton--primary:disabled {
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-internal-togglebutton-primary-disabled-background-color
+  );
+  --amplify-internal-togglebutton-disabled-border-color: var(
+    --amplify-internal-togglebutton-primary-disabled-border-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-internal-togglebutton-primary-disabled-color
+  );
+}
+
+.amplify-togglebutton--pressed {
+  --amplify-internal-togglebutton-primary-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-background-color
+  );
+  --amplify-internal-togglebutton-primary-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-border-color
+  );
+  --amplify-internal-togglebutton-primary-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+
+.amplify-togglebutton--pressed:focus {
+  --amplify-internal-togglebutton-primary-focus-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-focus-background-color
+  );
+  --amplify-internal-togglebutton-primary-focus-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-focus-border-color
+  );
+}
+
+.amplify-togglebutton--pressed:hover:not(:disabled) {
+  --amplify-internal-togglebutton-primary-hover-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-hover-background-color
+  );
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-hover-border-color
+  );
+  --amplify-internal-togglebutton-primary-focus-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-hover-background-color
+  );
+}
+
+.amplify-togglebutton--pressed:focus {
+  --amplify-internal-togglebutton-primary-focus-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+
+.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-primary-hover-background-color: var(
+    --amplify-components-togglebutton-primary-hover-background-color
+  );
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-hover-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+
+.amplify-togglebutton--pressed:disabled {
+  --amplify-internal-togglebutton-primary-disabled-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-background-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-border-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+
+.amplify-togglebutton--link {
+  --amplify-internal-togglebutton-link-background-color: var(
+    --amplify-components-togglebutton-background-color
+  );
+  --amplify-internal-togglebutton-link-color: var(
+    --amplify-components-togglebutton-link-color
+  );
+  background-color: var(--amplify-internal-togglebutton-link-background-color);
+  color: var(--amplify-internal-togglebutton-link-color);
+  --amplify-internal-togglebutton-link-hover-background-color: var(
+    --amplify-components-togglebutton-link-hover-background-color
+  );
+  --amplify-internal-togglebutton-link-hover-color: var(
+    --amplify-components-togglebutton-link-hover-color
+  );
+}
+
+.amplify-togglebutton--link:hover {
+  background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
+  color: var(--amplify-internal-togglebutton-link-hover-color);
+}
+
+.amplify-togglebutton--link:focus {
+  --amplify-internal-togglebutton-link-focus-background-color: var(
+    --amplify-components-togglebutton-link-focus-background-color
+  );
+  --amplify-internal-togglebutton-link-focus-color: var(
+    --amplify-components-togglebutton-link-focus-color
+  );
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-link-focus-background-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-internal-togglebutton-link-focus-color
+  );
+}
+
+.amplify-togglebutton--link:disabled {
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-link-disabled-color
+  );
+}
+
+.amplify-togglebutton--pressed {
+  --amplify-internal-togglebutton-link-color: var(
+    --amplify-components-togglebutton-link-pressed-color
+  );
+  --amplify-internal-togglebutton-link-background-color: var(
+    --amplify-components-togglebutton-link-pressed-background-color
+  );
+}
+
+.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-link-hover-background-color: var(
+    --amplify-components-togglebutton-link-pressed-hover-background-color
+  );
+  --amplify-internal-togglebutton-link-hover-color: var(
+    --amplify-components-togglebutton-link-pressed-color
+  );
+}
+
+.amplify-togglebutton--pressed:focus {
+  --amplify-internal-togglebutton-link-focus-background-color: var(
+    --amplify-components-togglebutton-link-pressed-background-color
+  );
+  --amplify-internal-togglebutton-link-focus-color: var(
+    --amplify-components-togglebutton-link-pressed-color
+  );
 }
 
 .amplify-togglebuttongroup {