@cloudscape-design/components-themeable 3.0.534 → 3.0.536

package/lib/internal/scss/internal/components/options-list/styles.scss

@@ -7,18 +7,24 @@
 @use '../../styles/tokens' as awsui;
 
 .options-list {
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
   outline: none;
-  border: none;
+  border-block: none;
+  border-inline: none;
   @include styles.styles-reset;
   white-space: inherit;
   overflow-y: auto;
   flex: 1 1 auto;
-  min-height: 0;
-  border-radius: awsui.$border-radius-dropdown;
+  min-block-size: 0;
+  border-start-start-radius: awsui.$border-radius-dropdown;
+  border-start-end-radius: awsui.$border-radius-dropdown;
+  border-end-start-radius: awsui.$border-radius-dropdown;
+  border-end-end-radius: awsui.$border-radius-dropdown;
 }
 
 .decrease-top-margin {
-  margin-top: -1px;
+  margin-block-start: -1px;
 }

package/lib/internal/scss/internal/components/selectable-item/styles.scss

@@ -14,27 +14,28 @@
   list-style: none;
   z-index: 1;
 
-  border: awsui.$border-divider-list-width solid transparent;
-  border-top-color: awsui.$color-border-dropdown-item-default;
-  border-bottom-color: awsui.$color-border-dropdown-item-default;
+  border-block: awsui.$border-divider-list-width solid transparent;
+  border-inline: awsui.$border-divider-list-width solid transparent;
+  border-block-start-color: awsui.$color-border-dropdown-item-default;
+  border-block-end-color: awsui.$color-border-dropdown-item-default;
   background-color: awsui.$color-background-dropdown-item-default;
   color: awsui.$color-text-dropdown-item-default;
 
   // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
-  border-left-width: 0;
-  border-right-width: 0;
+  border-inline-start-width: 0;
+  border-inline-end-width: 0;
   // to compensate for the loss of padding due to the removal of the left and right borders
   // and differences in default divider + selected border widths (visual refresh)
-  padding: styles.$option-padding-with-border-placeholder-vertical
-    calc(#{styles.$control-padding-horizontal} + #{awsui.$border-item-width});
+  padding-block: styles.$option-padding-with-border-placeholder-vertical;
+  padding-inline: calc(#{styles.$control-padding-horizontal} + #{awsui.$border-item-width});
 
   &.pad-bottom {
-    padding-bottom: calc(#{styles.$option-padding-with-border-placeholder-vertical} + #{awsui.$space-xxxs});
-    border-bottom-color: transparent;
+    padding-block-end: calc(#{styles.$option-padding-with-border-placeholder-vertical} + #{awsui.$space-xxxs});
+    border-block-end-color: transparent;
   }
 
   &:not(:first-child) {
-    margin-top: calc(-1 * #{awsui.$border-item-width});
+    margin-block-start: calc(-1 * #{awsui.$border-item-width});
   }
 
   &.has-background {
@@ -45,10 +46,15 @@
   &.selected {
     color: awsui.$color-text-dropdown-item-highlighted;
     border-width: awsui.$border-item-width;
-    border-radius: awsui.$border-radius-item;
-    padding: styles.$option-padding-vertical styles.$control-padding-horizontal;
+    border-start-start-radius: awsui.$border-radius-item;
+    border-start-end-radius: awsui.$border-radius-item;
+    border-end-start-radius: awsui.$border-radius-item;
+    border-end-end-radius: awsui.$border-radius-item;
+    padding-block: styles.$option-padding-vertical;
+    padding-inline: styles.$control-padding-horizontal;
+
     &.pad-bottom {
-      padding-bottom: (calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs}));
+      padding-block-end: (calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs}));
     }
   }
 
@@ -69,8 +75,8 @@
     border-color: awsui.$color-border-dropdown-item-selected;
     // smooth adjacent selected borders to avoid bubble effect (visual refresh)
     &.next-item-selected {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
     }
     &.highlighted {
       border-color: awsui.$color-border-dropdown-item-hover;
@@ -79,8 +85,8 @@
   }
 
   &.selected + &.selected {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
   }
 
   &.highlighted.is-keyboard {
@@ -92,27 +98,29 @@
     font-weight: bold;
     color: awsui.$color-text-dropdown-group-label;
     &:not(.interactiveGroups) {
-      border-top-color: awsui.$color-border-dropdown-group;
-      padding: awsui.$space-xs;
+      border-block-start-color: awsui.$color-border-dropdown-group;
+      padding-block: awsui.$space-xs;
+      padding-inline: awsui.$space-xs;
     }
     &.interactiveGroups {
-      padding: styles.$group-option-padding-with-border-placeholder-vertical
-        calc(#{styles.$control-padding-horizontal} + #{awsui.$border-item-width});
+      padding-block: styles.$group-option-padding-with-border-placeholder-vertical;
+      padding-inline: calc(#{styles.$control-padding-horizontal} + #{awsui.$border-item-width});
       &.highlighted {
         color: awsui.$color-text-dropdown-item-highlighted;
       }
       &.highlighted,
       &.selected {
-        padding: styles.$group-option-padding-vertical styles.$control-padding-horizontal;
+        padding-block: styles.$group-option-padding-vertical;
+        padding-inline: styles.$control-padding-horizontal;
       }
     }
   }
 
   &.child {
-    padding-left: calc(#{awsui.$space-xxl} + #{awsui.$border-item-width});
+    padding-inline-start: calc(#{awsui.$space-xxl} + #{awsui.$border-item-width});
     &.highlighted,
     &.selected {
-      padding-left: awsui.$space-xxl;
+      padding-inline-start: awsui.$space-xxl;
     }
   }
 
@@ -128,12 +136,12 @@
   }
   &.virtual {
     position: absolute;
-    top: awsui.$border-dropdown-virtual-offset-width;
-    left: 0;
-    width: 100%;
+    inset-block-start: awsui.$border-dropdown-virtual-offset-width;
+    inset-inline-start: 0;
+    inline-size: 100%;
     box-sizing: border-box;
     &:first-of-type:not(.selected, .highlighted) {
-      border-top-color: awsui.$color-border-dropdown-item-top;
+      border-block-start-color: awsui.$color-border-dropdown-item-top;
     }
   }
 }
@@ -141,13 +149,13 @@
 .measure-strut {
   position: absolute;
   pointer-events: none;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  padding-top: awsui.$border-divider-list-width;
+  block-size: 100%;
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  padding-block-start: awsui.$border-divider-list-width;
   &-first {
-    padding-bottom: awsui.$border-divider-list-width;
+    padding-block-end: awsui.$border-divider-list-width;
   }
 }
 

package/lib/internal/scss/internal/components/token-list/styles.scss

@@ -24,8 +24,10 @@
 .list {
   display: contents;
   list-style: none;
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 
   &.horizontal,
   &.vertical {
@@ -43,12 +45,14 @@
 
 .list-item {
   // To override v2.1 list styling
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .toggle-container-inline {
-  padding-left: awsui.$space-xs;
+  padding-inline-start: awsui.$space-xs;
   display: flex;
   align-items: center;
 }
@@ -60,13 +64,15 @@
   display: flex;
   align-items: center;
   background-color: transparent;
-  border: styles.$control-border-width solid transparent;
+  border-block: styles.$control-border-width solid transparent;
+  border-inline: styles.$control-border-width solid transparent;
 
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
 
   // Icon svg has one pixel around it. We need to shift the button one
   // pixel to the left to vertically align it with the input field
-  margin-left: -1px;
+  margin-inline-start: -1px;
 
   &:active,
   &:focus,
@@ -81,12 +87,13 @@
   }
 
   > .description {
-    margin-left: awsui.$space-xxs;
+    margin-inline-start: awsui.$space-xxs;
   }
 }
 
 .separator {
-  margin: 0px awsui.$space-scaled-m;
-  width: awsui.$border-divider-section-width;
+  margin-block: 0;
+  margin-inline: awsui.$space-scaled-m;
+  inline-size: awsui.$border-divider-section-width;
   background-color: awsui.$color-border-divider-default;
 }

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -17,7 +17,10 @@
   outline-offset: 2px;
   outline-color: awsui.$color-border-item-focused;
   // For visual refresh
-  border-radius: awsui.$border-radius-control-default-focus-ring;
+  border-start-start-radius: awsui.$border-radius-control-default-focus-ring;
+  border-start-end-radius: awsui.$border-radius-control-default-focus-ring;
+  border-end-start-radius: awsui.$border-radius-control-default-focus-ring;
+  border-end-end-radius: awsui.$border-radius-control-default-focus-ring;
   box-shadow: 0 0 0 awsui.$border-link-focus-ring-shadow-spread awsui.$color-border-item-focused;
 }
 
@@ -29,8 +32,10 @@
   // Window High Contrast Mode
   outline: 2px dotted transparent;
   outline-offset: 2px;
-
-  border-radius: $border-radius;
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
   box-shadow: foundation.$box-shadow-focused;
 }
 
@@ -61,11 +66,14 @@
     content: ' ';
     display: block;
     position: absolute;
-    left: calc(-1 * #{$gutter-horizontal});
-    top: calc(-1 * #{$gutter-vertical});
-    width: calc(100% + 2 * #{$gutter-horizontal});
-    height: calc(100% + 2 * #{$gutter-vertical});
-    border-radius: $border-radius;
+    inset-inline-start: calc(-1 * #{$gutter-horizontal});
+    inset-block-start: calc(-1 * #{$gutter-vertical});
+    inline-size: calc(100% + 2 * #{$gutter-horizontal});
+    block-size: calc(100% + 2 * #{$gutter-vertical});
+    border-start-start-radius: $border-radius;
+    border-start-end-radius: $border-radius;
+    border-end-start-radius: $border-radius;
+    border-end-end-radius: $border-radius;
     box-shadow: $box-shadow;
   }
 }
@@ -76,9 +84,12 @@
   // Using a special transparent outline only visible in Windows High Contrast Mode.
   // See focus-highlight above.
   outline: 2px dotted transparent;
-
-  border: constants.$control-border-width solid awsui.$color-border-item-focused;
-  border-radius: $border-radius;
+  border-block: constants.$control-border-width solid awsui.$color-border-item-focused;
+  border-inline: constants.$control-border-width solid awsui.$color-border-item-focused;
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
   box-shadow: foundation.$box-shadow-focused-light;
 }
 
@@ -89,21 +100,28 @@
   // See focus-highlight above.
   outline: 2px dotted transparent;
 
-  border: constants.$control-border-width solid awsui.$color-border-input-focused;
-  border-radius: $border-radius;
+  border-block: constants.$control-border-width solid awsui.$color-border-input-focused;
+  border-inline: constants.$control-border-width solid awsui.$color-border-input-focused;
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
+
   box-shadow: foundation.$box-shadow-focused-light;
 }
 
 @mixin form-disabled-element {
   background-color: awsui.$color-background-input-disabled;
-  border: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-block: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-inline: constants.$control-border-width solid awsui.$color-border-input-disabled;
   color: awsui.$color-text-input-disabled;
   cursor: auto;
 }
 
 @mixin form-readonly-element {
   background-color: awsui.$color-background-input-default;
-  border: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-block: constants.$control-border-width solid awsui.$color-border-input-disabled;
+  border-inline: constants.$control-border-width solid awsui.$color-border-input-disabled;
 }
 
 @mixin form-placeholder {
@@ -123,8 +141,8 @@
 @mixin form-invalid-control {
   color: awsui.$color-text-status-error;
   border-color: awsui.$color-text-status-error;
-  padding-left: constants.$invalid-control-left-padding;
-  border-left-width: constants.$invalid-control-left-border;
+  padding-inline-start: constants.$invalid-control-left-padding;
+  border-inline-start-width: constants.$invalid-control-left-border;
   &:focus {
     box-shadow: foundation.$box-shadow-focused-light-invalid;
   }
@@ -132,65 +150,83 @@
 }
 
 @mixin label-info-link {
-  margin-left: typography.$base-size;
+  margin-inline-start: typography.$base-size;
 }
 
 @mixin info-link-spacing {
-  margin-right: awsui.$space-xs;
+  margin-inline-end: awsui.$space-xs;
   &:only-child {
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
   }
 }
 
 @mixin container-style {
-  border-radius: awsui.$border-radius-container;
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
+  border-end-start-radius: awsui.$border-radius-container;
+  border-end-end-radius: awsui.$border-radius-container;
   box-sizing: border-box;
 
   &.refresh {
-    border: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
   }
 
   &:not(.refresh)::before {
     @include utils.base-pseudo-element;
     // Reset border color to prevent it from flashing black during card selection animation
     border-color: transparent;
-    border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-    border-radius: awsui.$border-radius-container;
+    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
     z-index: 1;
   }
 
   &:not(.refresh)::after {
     @include utils.base-pseudo-element;
-    border-radius: awsui.$border-radius-container;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
     box-shadow: awsui.$shadow-container;
   }
 }
 
 @mixin dropdown-shadow {
   box-shadow: awsui.$shadow-dropdown;
-  border-radius: awsui.$border-radius-dropdown;
-  border-top: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
+  border-start-start-radius: awsui.$border-radius-dropdown;
+  border-start-end-radius: awsui.$border-radius-dropdown;
+  border-end-start-radius: awsui.$border-radius-dropdown;
+  border-end-end-radius: awsui.$border-radius-dropdown;
+  border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
   box-sizing: border-box;
 
   &::after {
     content: '';
     position: absolute;
     z-index: 1;
-    top: -1px;
-    left: 0px;
-    bottom: 0px;
-    right: 0px;
+    inset-block-start: -1px;
+    inset-block-end: 0px;
+    inset-inline-start: 0px;
+    inset-inline-end: 0px;
     background-color: transparent;
-    border: awsui.$border-field-width solid awsui.$color-border-dropdown-container;
-    border-radius: awsui.$border-radius-dropdown;
+    border-block: awsui.$border-field-width solid awsui.$color-border-dropdown-container;
+    border-inline: awsui.$border-field-width solid awsui.$color-border-dropdown-container;
+    border-start-start-radius: awsui.$border-radius-dropdown;
+    border-start-end-radius: awsui.$border-radius-dropdown;
+    border-end-start-radius: awsui.$border-radius-dropdown;
+    border-end-end-radius: awsui.$border-radius-dropdown;
     pointer-events: none;
   }
 }
 
 @mixin make-control-size($height, $width: $height) {
-  margin-top: calc((#{awsui.$line-height-body-m} - #{$height}) / 2);
-  min-height: $height;
-  min-width: $width;
-  height: $height;
-  width: $width;
+  margin-block-start: calc((#{awsui.$line-height-body-m} - #{$height}) / 2);
+  min-block-size: $height;
+  min-inline-size: $width;
+  block-size: $height;
+  inline-size: $width;
 }

package/lib/internal/scss/internal/styles/utils/mixins.scss

@@ -8,14 +8,14 @@
 
 @mixin awsui-util-hide {
   position: absolute !important;
-  top: -9999px !important;
-  left: -9999px !important;
+  inset-block-start: -9999px !important;
+  inset-inline-start: -9999px !important;
 }
 
 @mixin text-wrapping {
   // When using with Flexbox, a flex item has min-width set to "auto" by default, which
   // prevents the text wrapping. We need to override the min-width by setting it to "0"
-  min-width: 0;
+  min-inline-size: 0;
 
   // `word-break: break-word` is deprecated.
   // But its replacement, `overflow-wrap: anywhere`, is not supported in Safari 14.0 and 15.0.
@@ -24,7 +24,7 @@
 
 @mixin text-flex-wrapping {
   word-wrap: break-word;
-  max-width: 100%;
+  max-inline-size: 100%;
   overflow: hidden;
 }
 
@@ -32,7 +32,8 @@
   @include typography.font-body-s;
   font-family: typography.$font-family-monospace;
   background-color: awsui.$color-background-layout-main;
-  padding: 0 awsui.$space-xxs;
+  padding-block: 0;
+  padding-inline: awsui.$space-xxs;
   word-wrap: break-word;
   white-space: pre-wrap;
 }
@@ -46,10 +47,10 @@
 @mixin base-pseudo-element {
   content: '';
   position: absolute;
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
+  inset-inline-start: 0px;
+  inset-block-start: 0px;
+  inline-size: 100%;
+  block-size: 100%;
   pointer-events: none;
   background: transparent;
   box-sizing: border-box;

package/lib/internal/scss/modal/styles.scss

@@ -17,11 +17,7 @@ $modal-z-index: 5000;
   display: flex;
   align-items: center;
   justify-items: center;
-
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
+  inset: 0;
   position: fixed;
   z-index: $modal-z-index;
 
@@ -37,18 +33,20 @@ $modal-z-index: 5000;
 
 .focus-lock {
   align-self: flex-start;
-  margin: auto;
-  padding: awsui.$space-s 0;
+  margin-block: auto;
+  margin-inline: auto;
+  padding-block: awsui.$space-s;
+  padding-inline: 0;
   z-index: $modal-z-index;
   pointer-events: none;
 }
 
 .dialog {
   position: static;
-  top: 0;
+  inset-block-start: 0;
   transform: translate(0, 0);
 
-  width: calc(100vw - #{awsui.$space-s} * 2);
+  inline-size: calc(100vw - #{awsui.$space-s} * 2);
 
   box-sizing: border-box;
   outline: none; // prevent highlight when focus set for ESC support
@@ -57,21 +55,22 @@ $modal-z-index: 5000;
   pointer-events: all;
 
   &.small {
-    max-width: 320px;
+    max-inline-size: 320px;
   }
 
   &.medium {
-    max-width: 600px;
+    max-inline-size: 600px;
   }
 
   &.large {
-    max-width: 820px;
+    max-inline-size: 820px;
   }
 
   &.max.breakpoint-xs {
     // viewport - (closed app layout panel widths + 20px on each side)
-    max-width: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
-    margin: auto;
+    max-inline-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));
+    margin-block: auto;
+    margin-inline: auto;
   }
 }
 
@@ -80,23 +79,35 @@ $modal-z-index: 5000;
   display: block;
   background-color: awsui.$color-background-container-content;
   word-wrap: break-word;
-  border-top: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-  border-radius: awsui.$border-radius-container;
+  border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
+  border-end-start-radius: awsui.$border-radius-container;
+  border-end-end-radius: awsui.$border-radius-container;
   box-shadow: awsui.$shadow-modal;
 }
 
 .content {
-  padding: awsui.$space-container-content-top awsui.$space-modal-horizontal awsui.$space-modal-content-bottom;
+  padding-block-start: awsui.$space-container-content-top;
+  padding-block-end: awsui.$space-modal-content-bottom;
+  padding-inline: awsui.$space-modal-horizontal;
+
   &.no-paddings {
-    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
   }
 }
 
 .header {
-  padding: awsui.$space-container-header-top awsui.$space-modal-horizontal awsui.$space-container-header-bottom;
+  padding-block-start: awsui.$space-container-header-top;
+  padding-block-end: awsui.$space-container-header-bottom;
+  padding-inline: awsui.$space-modal-horizontal;
   background-color: awsui.$color-background-container-header;
-  border-bottom: 1px solid awsui.$color-border-container-divider;
-  border-radius: awsui.$border-radius-container awsui.$border-radius-container 0 0;
+  border-block-end: 1px solid awsui.$color-border-container-divider;
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
 }
 
 .header--text {
@@ -105,16 +116,20 @@ $modal-z-index: 5000;
 
 .footer {
   @include container.divider;
-  padding: container.$footer-padding;
+  padding-block: awsui.$space-scaled-s;
+  padding-inline: awsui.$space-container-horizontal;
   background-color: awsui.$color-background-container-content;
 
   // Make sure that the footer is always visible
   position: sticky;
-  bottom: 0;
+  inset-block-end: 0;
   z-index: 800;
 
   &--stuck {
-    border-radius: 0 0 awsui.$border-radius-container awsui.$border-radius-container;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
   }
 
   &:after {

package/lib/internal/scss/multiselect/styles.scss

@@ -11,5 +11,5 @@
 }
 
 .tokens {
-  margin-top: awsui.$space-scaled-xs;
+  margin-block-start: awsui.$space-scaled-xs;
 }