@cloudscape-design/components-themeable 3.0.537 → 3.0.539

package/lib/internal/scss/expandable-section/styles.scss

@@ -40,28 +40,29 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
 .icon-container {
   position: relative;
-  margin-left: calc(#{$icon-margin-left});
+  margin-inline: calc(#{$icon-margin-left}) calc(#{$icon-margin-right-normal});
   // For vertical alignment of text in side navigation items
-  margin-right: calc(#{$icon-margin-right-normal});
   &-container {
-    margin-right: $icon-margin-right-medium;
+    margin-inline-end: $icon-margin-right-medium;
   }
 }
 
 .wrapper {
   box-sizing: border-box;
-  border: none;
-  width: 100%;
+  border-block: none;
+  border-inline: none;
+  inline-size: 100%;
   line-height: awsui.$line-height-body-m;
-  text-align: left;
+  text-align: start;
 
   &-default,
   &-footer {
-    border: awsui.$border-divider-section-width solid transparent;
+    border-block: awsui.$border-divider-section-width solid transparent;
+    border-inline: awsui.$border-divider-section-width solid transparent;
   }
   &-navigation {
     // not needed for focus ring compensation, but to keep this variant vertically aligned with other variants when used together
-    border-left: awsui.$border-divider-section-width solid transparent;
+    border-inline-start: awsui.$border-divider-section-width solid transparent;
   }
 
   &-navigation,
@@ -86,57 +87,55 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 
   &-default {
-    padding-top: awsui.$space-scaled-xxs;
-    padding-bottom: awsui.$space-scaled-xxs;
-    padding-right: awsui.$space-xxs;
+    padding-block: awsui.$space-scaled-xxs;
+    padding-inline-end: awsui.$space-xxs;
     &.header-deprecated {
-      padding-left: awsui.$space-xxs;
+      padding-inline-start: awsui.$space-xxs;
     }
     &:not(.header-deprecated) {
-      padding-left: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
+      padding-inline-start: calc(#{awsui.$space-xxs} + #{$icon-total-space-normal});
     }
   }
 
   &-footer {
-    padding-top: awsui.$space-scaled-xxs;
-    padding-bottom: awsui.$space-scaled-xxs;
+    padding-block: awsui.$space-scaled-xxs;
   }
 
   &-footer,
   &-compact {
-    padding-right: 0;
+    padding-inline-end: 0;
     &.header-deprecated {
-      padding-left: 0;
+      padding-inline-start: 0;
     }
     &:not(.header-deprecated) {
-      padding-left: $icon-total-space-normal;
+      padding-inline-start: $icon-total-space-normal;
     }
   }
 
   &-container {
-    padding-top: awsui.$space-container-header-top;
-    padding-bottom: awsui.$space-container-header-bottom;
-    padding-right: container.$header-padding-horizontal;
+    padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
+    padding-inline-end: container.$header-padding-horizontal;
 
     &:not(.wrapper-expanded) {
       // Equal top and bottom padding so standalone header has vertical symmetry.
-      padding-bottom: awsui.$space-container-header-top;
+      padding-block-end: awsui.$space-container-header-top;
     }
     &.header-deprecated {
-      padding-left: container.$header-padding-horizontal;
+      padding-inline-start: container.$header-padding-horizontal;
     }
     &:not(.header-deprecated) {
-      padding-left: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
+      padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
     }
 
     @include focus-visible.when-visible {
       // HACK: Remediate focus border
-      padding: container.$header-focus-visible-padding;
+      padding-block: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width});
+      padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
     }
   }
 
   &-default.wrapper-expanded {
-    border-bottom-color: awsui.$color-border-divider-default;
+    border-block-end-color: awsui.$color-border-divider-default;
   }
 }
 
@@ -152,8 +151,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-wrapper {
     font-size: inherit;
     letter-spacing: inherit;
-    margin: 0;
-    padding: 0;
+    margin-block: 0;
+    margin-inline: 0;
+    padding-block: 0;
+    padding-inline: 0;
   }
 
   &-actions-wrapper {
@@ -172,18 +173,18 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   &-button {
     box-sizing: border-box;
     display: flex;
-    margin-left: calc(-1 * #{$icon-total-space-normal});
+    margin-inline-start: calc(-1 * #{$icon-total-space-normal});
   }
 
   &-container-button {
-    margin-left: calc(-1 * #{$icon-total-space-medium});
+    margin-inline-start: calc(-1 * #{$icon-total-space-medium});
   }
 
   &-container {
-    width: 100%;
+    inline-size: 100%;
     // The icon-container style is kept for variant='container' and header
     > .icon-container {
-      margin-top: awsui.$space-expandable-section-icon-offset-top;
+      margin-block-start: awsui.$space-expandable-section-icon-offset-top;
     }
   }
 
@@ -192,8 +193,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       display: inline-flex;
       cursor: pointer;
       color: awsui.$color-text-expandable-section-navigation-icon-default;
-      border: 0;
-      padding: 0;
+      border-block: 0;
+      border-inline: 0;
+      padding-block: 0;
+      padding-inline: 0;
       background: transparent;
       outline: none;
       text-decoration: none;
@@ -218,11 +221,13 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   display: none;
 
   &-default {
-    padding: awsui.$space-scaled-xs 0;
+    padding-block: awsui.$space-scaled-xs;
+    padding-inline: 0;
   }
 
   &-footer {
-    padding: awsui.$space-xs 0;
+    padding-block: awsui.$space-xs;
+    padding-inline: 0;
   }
 
   &-expanded {

package/lib/internal/scss/file-upload/dropzone/styles.scss

@@ -12,8 +12,12 @@
   align-items: center;
   justify-content: center;
   gap: awsui.$space-static-xxs;
-  padding: awsui.$space-static-l;
-  border-radius: awsui.$border-radius-dropzone;
+  padding-block: awsui.$space-static-l;
+  padding-inline: awsui.$space-static-l;
+  border-start-start-radius: awsui.$border-radius-dropzone;
+  border-start-end-radius: awsui.$border-radius-dropzone;
+  border-end-start-radius: awsui.$border-radius-dropzone;
+  border-end-end-radius: awsui.$border-radius-dropzone;
   color: awsui.$color-dropzone-text-active;
   background-color: awsui.$color-dropzone-background-active;
   font-weight: styles.$font-weight-bold;

package/lib/internal/scss/file-upload/file-option/styles.scss

@@ -13,22 +13,22 @@
 }
 
 .file-option {
-  width: 100%;
-  min-width: 0;
+  inline-size: 100%;
+  min-inline-size: 0;
   display: flex;
   gap: awsui.$space-scaled-xs;
 }
 
 .file-option-thumbnail {
-  margin-top: awsui.$space-static-xxs;
-  max-width: 60px;
+  margin-block-start: awsui.$space-static-xxs;
+  max-inline-size: 60px;
 }
 
 .file-option-thumbnail-image {
-  width: 100%;
-  height: auto;
+  inline-size: 100%;
+  block-size: auto;
 }
 
 .file-option-metadata {
-  width: 100%;
+  inline-size: 100%;
 }

package/lib/internal/scss/file-upload/styles.scss

@@ -11,5 +11,5 @@
 }
 
 .hints {
-  margin-top: awsui.$space-static-xxs;
+  margin-block-start: awsui.$space-static-xxs;
 }

package/lib/internal/scss/flashbar/collapsible.scss

@@ -83,7 +83,7 @@ the grid layout will be:
        with one single line of text.
        This makes them look better during the collapse animation, in which they are already empty.
      */
-    min-height: calc(
+    min-block-size: calc(
       #{awsui.$line-height-body-m} + (
           #{awsui.$space-scaled-xs} + #{awsui.$border-field-width} + #{awsui.$space-scaled-xxs}
         ) * 2
@@ -114,7 +114,7 @@ the grid layout will be:
   #{custom-props.$stackedNotificationsDefaultBottomMargin}: calc(
     #{$notification-bar-line-height} + 2 * #{$notification-bar-padding-vertical} + 2 * #{$border-width} - #{$top-overlap}
   );
-  margin-bottom: calc(
+  margin-block-end: calc(
     var(
         #{custom-props.$stackedNotificationsBottomMargin},
         var(#{custom-props.$stackedNotificationsDefaultBottomMargin})
@@ -122,16 +122,15 @@ the grid layout will be:
   );
 
   > .notification-bar {
-    margin-top: calc(-1 * #{$top-overlap} + #{$offset-bottom});
+    margin-block-start: calc(-1 * #{$top-overlap} + #{$offset-bottom});
     /* $notification-bar-line-height + 2 * $notification-bar-padding-vertical + 2 * $border-width
     is the full height of the notification bar */
     /* stylelint-disable scss/operator-no-newline-after */
-    margin-bottom: calc(
+    margin-block-end: calc(
       #{$top-overlap} - #{$notification-bar-line-height} - 2 * #{$notification-bar-padding-vertical} - 2 * #{$border-width} -
         #{$offset-bottom}
     );
-    padding-top: $notification-bar-padding-vertical;
-    padding-bottom: $notification-bar-padding-vertical;
+    padding-block: $notification-bar-padding-vertical;
   }
 }
 
@@ -201,8 +200,12 @@ the grid layout will be:
   @include styles.text-wrapping;
   background: awsui.$color-background-notification-stack-bar;
   border-color: awsui.$color-border-notification-stack-bar;
-  border-radius: awsui.$border-radius-button;
-  border-style: solid;
+  border-start-start-radius: awsui.$border-radius-button;
+  border-start-end-radius: awsui.$border-radius-button;
+  border-end-start-radius: awsui.$border-radius-button;
+  border-end-end-radius: awsui.$border-radius-button;
+  border-block-style: solid;
+  border-inline-style: solid;
   box-shadow: awsui.$shadow-panel-toggle;
   color: awsui.$color-text-notification-stack-bar;
   cursor: pointer;
@@ -214,8 +217,7 @@ the grid layout will be:
   column-gap: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
   justify-content: center;
   letter-spacing: awsui.$font-button-letter-spacing;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
   row-gap: 0;
   text-align: center;
   text-decoration: none;
@@ -227,10 +229,8 @@ the grid layout will be:
     @include typography.default-text-style;
     color: awsui.$color-text-notification-stack-bar;
     cursor: pointer;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-block: 0;
+    padding-block: 0;
   }
 
   > .status {
@@ -255,7 +255,7 @@ the grid layout will be:
       row-gap: 0;
 
       > .type-count > .count-number {
-        margin-left: awsui.$space-xxs;
+        margin-inline-start: awsui.$space-xxs;
       }
     }
   }
@@ -271,16 +271,16 @@ the grid layout will be:
 
   &.visual-refresh {
     $border-width: map.get($notification-bar-border-width, 'visual-refresh');
-    border-width: $border-width;
-    padding-left: awsui.$space-l;
-    padding-right: awsui.$space-l;
+    border-block-width: $border-width;
+    border-inline-width: $border-width;
+    padding-inline: awsui.$space-l;
   }
 
   &:not(.visual-refresh) {
     $border-width: map.get($notification-bar-border-width, 'classic');
-    border-width: $border-width;
-    padding-left: awsui.$space-s;
-    padding-right: awsui.$space-s;
+    border-block-width: $border-width;
+    border-inline-width: $border-width;
+    padding-inline: awsui.$space-s;
 
     &:focus {
       text-decoration: none;
@@ -295,9 +295,9 @@ the grid layout will be:
     display: inline-block;
     flex-grow: 1;
     background: none;
-    border: 0 none;
-    padding-top: 0;
-    padding-bottom: 0;
+    border-block: 0;
+    border-inline: none;
+    padding-block: 0;
 
     > .icon {
       @include styles.with-motion {
@@ -321,5 +321,5 @@ the grid layout will be:
 // Prevent the sticky Flashbar from reaching the end of the window by leaving some space below.
 .stack.expanded:not(.floating) {
   // Default to 0 so that this does not apply to non-sticky Flashbar.
-  padding-bottom: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
+  padding-block-end: var(#{custom-props.$flashbarStickyBottomMargin}, 0);
 }

package/lib/internal/scss/flashbar/styles.scss

@@ -15,7 +15,7 @@
   /* stylelint-disable-next-line selector-max-type */
   > li + li {
     // Avoid Flashbar list gets additional padding to fix issue AWSUI-20382
-    padding-top: 0;
+    padding-block-start: 0;
   }
 }
 
@@ -29,15 +29,22 @@
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
-  padding: awsui.$space-scaled-xs awsui.$space-flashbar-horizontal;
-  border-radius: awsui.$border-radius-flashbar;
+  padding-block: awsui.$space-scaled-xs;
+  padding-inline: awsui.$space-flashbar-horizontal;
+  border-start-start-radius: awsui.$border-radius-flashbar;
+  border-start-end-radius: awsui.$border-radius-flashbar;
+  border-end-start-radius: awsui.$border-radius-flashbar;
+  border-end-end-radius: awsui.$border-radius-flashbar;
   color: awsui.$color-text-notification-default;
   overflow-wrap: break-word;
   word-wrap: break-word;
 
   &::before {
     @include styles.base-pseudo-element;
-    border-radius: awsui.$border-radius-flashbar;
+    border-start-start-radius: awsui.$border-radius-flashbar;
+    border-start-end-radius: awsui.$border-radius-flashbar;
+    border-end-start-radius: awsui.$border-radius-flashbar;
+    border-end-end-radius: awsui.$border-radius-flashbar;
     box-shadow: awsui.$shadow-flash-sticky;
   }
   &-refresh::before {
@@ -47,12 +54,14 @@
 
 .flash-list {
   list-style: none;
-  padding: 0;
-  margin: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
 
   &:not(.collapsed) {
     > li:not(:last-child) {
-      margin-bottom: awsui.$space-xxxs;
+      margin-block-end: awsui.$space-xxxs;
     }
   }
 }
@@ -60,13 +69,13 @@
 .flash-body {
   display: flex;
   flex-grow: 1;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .flash-focus-container {
   display: flex;
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
 
   &:focus {
     outline: none;
@@ -77,13 +86,15 @@
 }
 
 .flash-text {
-  margin: awsui.$border-field-width 0;
-  padding: awsui.$space-scaled-xxs awsui.$space-xxs;
+  margin-block: awsui.$border-field-width;
+  margin-inline: 0;
+  padding-block: awsui.$space-scaled-xxs;
+  padding-inline: awsui.$space-xxs;
 }
 
 .flash-icon {
   flex: 0 0 auto;
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .flash-message {
@@ -101,9 +112,8 @@
 
 .dismiss-button-wrapper {
   flex: 0 0 auto;
-  margin-left: awsui.$space-s;
-  margin-right: calc(-1 * #{awsui.$space-xxs});
-  padding-right: awsui.$space-flashbar-dismiss-right;
+  margin-inline: awsui.$space-s calc(-1 * #{awsui.$space-xxs});
+  padding-inline-end: awsui.$space-flashbar-dismiss-right;
 }
 
 .dismiss-button {
@@ -112,15 +122,15 @@
 
 .action-button-wrapper {
   white-space: nowrap;
-  margin-left: awsui.$space-flashbar-action-left;
+  margin-inline-start: awsui.$space-flashbar-action-left;
 }
 
 .flashbar.breakpoint-default > .flash-list > .flash-list-item > .flash > .flash-body {
   display: block;
   & > .action-button-wrapper {
-    margin-left: awsui.$space-l;
-    padding-left: awsui.$space-xxs;
-    margin-bottom: awsui.$space-xxs;
+    margin-inline-start: awsui.$space-l;
+    padding-inline-start: awsui.$space-xxs;
+    margin-block-end: awsui.$space-xxs;
   }
 }
 

package/lib/internal/scss/form/styles.scss

@@ -11,7 +11,7 @@
 }
 
 .header:not(.full-page) {
-  margin-bottom: awsui.$space-scaled-m;
+  margin-block-end: awsui.$space-scaled-m;
 }
 
 .content {
@@ -23,23 +23,23 @@
 }
 
 .footer {
-  margin-top: awsui.$space-scaled-l;
+  margin-block-start: awsui.$space-scaled-l;
 }
 .actions-section {
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   flex-wrap: wrap;
-  margin-left: calc(-1 * #{awsui.$space-scaled-m});
-  margin-bottom: calc(-1 * #{awsui.$space-scaled-m});
+  margin-inline-start: calc(-1 * #{awsui.$space-scaled-m});
+  margin-block-end: calc(-1 * #{awsui.$space-scaled-m});
 }
 .secondary-actions {
-  min-width: 1px;
-  margin-left: awsui.$space-scaled-m;
-  margin-bottom: awsui.$space-scaled-m;
+  min-inline-size: 1px;
+  margin-inline-start: awsui.$space-scaled-m;
+  margin-block-end: awsui.$space-scaled-m;
 }
 .actions {
-  min-width: 1px;
-  margin-left: awsui.$space-scaled-m;
-  margin-bottom: awsui.$space-scaled-m;
+  min-inline-size: 1px;
+  margin-inline-start: awsui.$space-scaled-m;
+  margin-block-end: awsui.$space-scaled-m;
 }

package/lib/internal/scss/form-field/styles.scss

@@ -24,8 +24,8 @@
 }
 
 .info {
-  padding-left: awsui.$space-xs;
-  border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  padding-inline-start: awsui.$space-xs;
+  border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 
 .description,
@@ -35,7 +35,7 @@
 
 .hints,
 .constraint-has-error {
-  padding-top: awsui.$space-xxs;
+  padding-block-start: awsui.$space-xxs;
 }
 
 .secondary-control {
@@ -44,7 +44,7 @@
 
 .controls {
   &:not(.label-hidden) {
-    padding-top: awsui.$space-xxs;
+    padding-block-start: awsui.$space-xxs;
   }
 }
 
@@ -61,7 +61,7 @@
 }
 
 .error__message {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }
 
 .visually-hidden {

package/lib/internal/template/alert/styles.css.js

@@ -1,30 +1,30 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_d6kbg_93",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_d6kbg_1",
-  "root": "awsui_root_mx3cw_d6kbg_119",
-  "hidden": "awsui_hidden_mx3cw_d6kbg_157",
-  "with-dismiss": "awsui_with-dismiss_mx3cw_d6kbg_202",
-  "with-action": "awsui_with-action_mx3cw_d6kbg_202",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_d6kbg_208",
-  "header": "awsui_header_mx3cw_d6kbg_215",
-  "action": "awsui_action_mx3cw_d6kbg_219",
-  "action-slot": "awsui_action-slot_mx3cw_d6kbg_224",
-  "action-button": "awsui_action-button_mx3cw_d6kbg_225",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_d6kbg_229",
-  "text": "awsui_text_mx3cw_d6kbg_258",
-  "icon": "awsui_icon_mx3cw_d6kbg_263",
-  "message": "awsui_message_mx3cw_d6kbg_266",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_d6kbg_274",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_d6kbg_277",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_d6kbg_280",
-  "content": "awsui_content_mx3cw_d6kbg_284",
-  "dismiss": "awsui_dismiss_mx3cw_d6kbg_288",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_d6kbg_293",
-  "type-error": "awsui_type-error_mx3cw_d6kbg_297",
-  "type-warning": "awsui_type-warning_mx3cw_d6kbg_305",
-  "type-success": "awsui_type-success_mx3cw_d6kbg_313",
-  "type-info": "awsui_type-info_mx3cw_d6kbg_321"
+  "alert": "awsui_alert_mx3cw_15610_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_15610_1",
+  "root": "awsui_root_mx3cw_15610_119",
+  "hidden": "awsui_hidden_mx3cw_15610_157",
+  "with-dismiss": "awsui_with-dismiss_mx3cw_15610_207",
+  "with-action": "awsui_with-action_mx3cw_15610_207",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_15610_213",
+  "header": "awsui_header_mx3cw_15610_220",
+  "action": "awsui_action_mx3cw_15610_224",
+  "action-slot": "awsui_action-slot_mx3cw_15610_229",
+  "action-button": "awsui_action-button_mx3cw_15610_230",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_15610_234",
+  "text": "awsui_text_mx3cw_15610_263",
+  "icon": "awsui_icon_mx3cw_15610_270",
+  "message": "awsui_message_mx3cw_15610_273",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_15610_281",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_15610_284",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_15610_287",
+  "content": "awsui_content_mx3cw_15610_291",
+  "dismiss": "awsui_dismiss_mx3cw_15610_295",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_15610_300",
+  "type-error": "awsui_type-error_mx3cw_15610_304",
+  "type-warning": "awsui_type-warning_mx3cw_15610_312",
+  "type-success": "awsui_type-success_mx3cw_15610_320",
+  "type-info": "awsui_type-info_mx3cw_15610_328"
 };