@aws-amplify/ui 5.6.7 → 5.6.9

package/dist/styles.css

@@ -677,13 +677,17 @@
   --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
   --amplify-components-select-icon-wrapper-transform: translateY(-50%);
   --amplify-components-select-icon-wrapper-pointer-events: none;
+  --amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
+  --amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
   --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
   --amplify-components-select-option-color: var(--amplify-colors-font-primary);
   --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
   --amplify-components-select-white-space: nowrap;
   --amplify-components-select-min-width: 6.5rem;
   --amplify-components-select-small-min-width: 5.5rem;
+  --amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
   --amplify-components-select-large-min-width: 7.5rem;
+  --amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
   --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
   --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
   --amplify-components-selectfield-flex-direction: column;
@@ -807,7 +811,9 @@
   --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
   --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
-  --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
+  --amplify-components-switchfield-thumb-border-color: transparent;
+  --amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small);
+  --amplify-components-switchfield-thumb-border-style: solid;
   --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
   --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
   --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);
@@ -1222,14 +1228,6 @@ select {
   display: block;
   overflow: auto;
 }
-.amplify-scrollview--horizontal {
-  overflow-x: scroll;
-  overflow-y: initial;
-}
-.amplify-scrollview--vertical {
-  overflow-x: initial;
-  overflow-y: scroll;
-}
 
 .amplify-text {
   display: block;
@@ -3695,6 +3693,12 @@ html[dir=rtl] .amplify-field-group__inner-start {
   transform: var(--amplify-components-select-icon-wrapper-transform);
   pointer-events: var(--amplify-components-select-icon-wrapper-pointer-events);
 }
+.amplify-select__icon-wrapper--small {
+  right: var(--amplify-components-select-icon-wrapper-small-right);
+}
+.amplify-select__icon-wrapper--large {
+  right: var(--amplify-components-select-icon-wrapper-large-right);
+}
 
 .amplify-select {
   box-sizing: border-box;
@@ -3796,9 +3800,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-select--small {
   min-width: var(--amplify-components-select-small-min-width);
+  -webkit-padding-end: var(--amplify-components-select-small-padding-inline-end);
+          padding-inline-end: var(--amplify-components-select-small-padding-inline-end);
 }
 .amplify-select--large {
   min-width: var(--amplify-components-select-large-min-width);
+  -webkit-padding-end: var(--amplify-components-select-large-padding-inline-end);
+          padding-inline-end: var(--amplify-components-select-large-padding-inline-end);
 }
 
 .amplify-selectfield {
@@ -4049,6 +4057,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-switchfield {
   display: inline-block;
   font-size: var(--amplify-components-switchfield-font-size);
+  cursor: pointer;
 }
 .amplify-switchfield--small {
   font-size: var(--amplify-components-switchfield-small-font-size);
@@ -4105,6 +4114,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-radius: var(--amplify-components-switchfield-thumb-border-radius);
   width: var(--amplify-components-switchfield-thumb-width);
   height: var(--amplify-components-switchfield-thumb-width);
+  border-width: var(--amplify-components-switchfield-thumb-border-width);
+  border-style: var(--amplify-components-switchfield-thumb-border-style);
   border-color: var(--amplify-components-switchfield-thumb-border-color);
   overflow-wrap: break-word;
 }

package/dist/theme.css

@@ -674,13 +674,17 @@
 --amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
 --amplify-components-select-icon-wrapper-transform: translateY(-50%);
 --amplify-components-select-icon-wrapper-pointer-events: none;
+--amplify-components-select-icon-wrapper-small-right: var(--amplify-space-xs);
+--amplify-components-select-icon-wrapper-large-right: var(--amplify-space-medium);
 --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
 --amplify-components-select-option-color: var(--amplify-colors-font-primary);
 --amplify-components-select-option-disabled-color: var(--amplify-colors-font-disabled);
 --amplify-components-select-white-space: nowrap;
 --amplify-components-select-min-width: 6.5rem;
 --amplify-components-select-small-min-width: 5.5rem;
+--amplify-components-select-small-padding-inline-end: var(--amplify-space-xl);
 --amplify-components-select-large-min-width: 7.5rem;
+--amplify-components-select-large-padding-inline-end: var(--amplify-space-xxl);
 --amplify-components-selectfield-border-color: var(--amplify-components-fieldcontrol-border-color);
 --amplify-components-selectfield-color: var(--amplify-components-fieldcontrol-color);
 --amplify-components-selectfield-flex-direction: column;
@@ -804,7 +808,9 @@
 --amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
 --amplify-components-switchfield-label-padding: var(--amplify-space-xs);
 --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
---amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
+--amplify-components-switchfield-thumb-border-color: transparent;
+--amplify-components-switchfield-thumb-border-width: var(--amplify-border-widths-small);
+--amplify-components-switchfield-thumb-border-style: solid;
 --amplify-components-switchfield-thumb-border-radius: var(--amplify-radii-xxxl);
 --amplify-components-switchfield-thumb-checked-transform: var(--amplify-transforms-slide-x-medium);
 --amplify-components-switchfield-thumb-transition-duration: var(--amplify-time-medium);

package/dist/types/theme/tokens/components/select.d.ts

@@ -1,8 +1,12 @@
 import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
-type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth', Output>;
+type SelectSizeTokens<Output> = DesignTokenProperties<'minWidth' | 'paddingInlineEnd', Output>;
+type SelectIconWrapperTokens<Output> = DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents', Output> & {
+    small?: DesignTokenProperties<'right', Output>;
+    large?: DesignTokenProperties<'right', Output>;
+};
 export type SelectTokens<Output extends OutputVariantKey> = DesignTokenProperties<'paddingInlineEnd' | 'whiteSpace' | 'minWidth', Output> & {
     wrapper?: DesignTokenProperties<'cursor' | 'display' | 'flex' | 'position', Output>;
-    iconWrapper?: DesignTokenProperties<'alignItems' | 'position' | 'top' | 'right' | 'transform' | 'pointerEvents', Output>;
+    iconWrapper?: SelectIconWrapperTokens<Output>;
     option?: DesignTokenProperties<'backgroundColor' | 'color', Output> & {
         _disabled?: DesignTokenProperties<'color', Output>;
     };

package/dist/types/theme/tokens/components/switchField.d.ts

@@ -7,7 +7,7 @@ export type SwitchFieldTokens<OutputType extends OutputVariantKey> = DesignToken
     large?: SwitchFieldSizeTokens<OutputType>;
     small?: SwitchFieldSizeTokens<OutputType>;
     label?: DesignTokenProperties<'padding', OutputType>;
-    thumb?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderRadius' | 'width', OutputType> & {
+    thumb?: DesignTokenProperties<'backgroundColor' | 'borderColor' | 'borderStyle' | 'borderWidth' | 'borderRadius' | 'width', OutputType> & {
         checked?: DesignTokenProperties<'transform', OutputType>;
         transition?: DesignTokenProperties<'duration', OutputType>;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui",
-  "version": "5.6.7",
+  "version": "5.6.9",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {