@cloudscape-design/components-themeable 3.0.470 → 3.0.471

package/lib/internal/scss/cards/styles.scss

@@ -18,10 +18,11 @@
 .header {
   &-variant-full-page.header-refresh {
     @include container.borders-and-shadows;
-    padding-top: 0;
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: calc(#{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom});
+    padding-block-start: 0;
+    padding-block-end: calc(
+      #{awsui.$space-container-header-bottom} + #{awsui.$space-table-header-tools-full-page-bottom}
+    );
+    padding-inline: 0;
   }
 }
 
@@ -30,14 +31,17 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   // reset styles from OL
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
-  margin: 0 0 0 calc(#{awsui.$space-grid-gutter} * -1);
+  margin-block: 0;
+  margin-inline-start: calc(#{awsui.$space-grid-gutter} * -1);
+  margin-inline-end: 0;
 
   @for $i from 1 through 20 {
     &.list-grid-#{$i} {
       > .card {
-        width: math.div(100%, $i);
+        inline-size: math.div(100%, $i);
       }
     }
   }
@@ -46,10 +50,11 @@
 .selection-control {
   position: absolute;
   box-sizing: border-box;
-  width: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
-  top: 0;
-  right: 0;
-  padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
+  inline-size: calc(#{awsui.$size-control} + (2 * #{awsui.$space-card-horizontal}));
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  padding-block: awsui.$space-card-vertical;
+  padding-inline: awsui.$space-card-horizontal;
 }
 
 .loading,
@@ -57,48 +62,55 @@
   overflow: hidden;
   text-align: center;
   color: awsui.$color-text-empty;
-  margin-bottom: awsui.$space-scaled-l;
+  margin-block-end: awsui.$space-scaled-l;
 }
 
 .has-header {
   // Unfortunately, we don't have access to the header of InternalContainer
   // in order to use margin-bottom instead.
-  margin-top: awsui.$space-grid-gutter;
+  margin-block-start: awsui.$space-grid-gutter;
 }
 
 .card {
   display: flex;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
   &-inner {
     position: relative;
     background-color: awsui.$color-background-container-content;
-    margin: 0 0 awsui.$space-grid-gutter awsui.$space-grid-gutter;
-    padding: awsui.$space-card-vertical awsui.$space-card-horizontal;
+    margin-block-start: 0;
+    margin-block-end: awsui.$space-grid-gutter;
+    margin-inline-start: awsui.$space-grid-gutter;
+    margin-inline-end: 0;
+    padding-block: awsui.$space-card-vertical;
+    padding-inline: awsui.$space-card-horizontal;
     @include styles.container-shadow;
-    width: 100%;
-    min-width: 0;
+    inline-size: 100%;
+    min-inline-size: 0;
   }
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      width: 100%;
+      inline-size: 100%;
       display: inline-block;
     }
   }
   &-selectable {
     > .card-inner > .card-header {
-      width: 90%;
+      inline-size: 90%;
     }
   }
   &-selected {
     > .card-inner {
       background-color: awsui.$color-background-item-selected;
       &::before {
-        border: awsui.$border-item-width solid awsui.$color-border-item-selected;
+        border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
+        border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
       }
     }
   }
@@ -108,7 +120,9 @@
   display: inline-block;
   box-sizing: border-box;
   // only scale bottom padding to reduce padding between sections and after the last section.
-  padding: awsui.$space-xs 0 awsui.$space-scaled-xs 0;
+  padding-block-start: awsui.$space-xs;
+  padding-block-end: awsui.$space-scaled-xs;
+  padding-inline: 0;
   vertical-align: top;
   &-header {
     @include styles.font-label;
@@ -119,7 +133,9 @@
   }
 }
 .section:last-child {
-  padding: awsui.$space-xs 0 0 0;
+  padding-block-start: awsui.$space-xs;
+  padding-block-end: 0;
+  padding-inline: 0;
 }
 
 .footer-pagination {

package/lib/internal/scss/code-editor/ace-editor.scss

@@ -12,10 +12,10 @@
 
 .code-editor-refresh :global .ace_editor {
   .ace_gutter {
-    border-top-left-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+    border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
   }
   .ace_scroller {
-    border-top-right-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+    border-start-end-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
   }
 }
 
@@ -50,8 +50,7 @@
   }
 
   .ace_gutter-cell {
-    padding-left: $gutter-padding-left;
-    padding-right: $gutter-padding-right;
+    padding-inline: $gutter-padding-left $gutter-padding-right;
   }
 
   .ace_fold-widget {
@@ -59,16 +58,17 @@
        <<html<<<<
        </html>
     */
-    width: $gutter-padding-right - 2 * 1px; // gutter padding - 1px margin each side
-    margin-right: -$gutter-padding-right + 1px; // leave 1px margin on each side
+    inline-size: $gutter-padding-right - 2 * 1px; // gutter padding - 1px margin each side
+    margin-inline-end: -$gutter-padding-right + 1px; // leave 1px margin on each side
     background-color: transparent;
-    border: none;
+    border-block: none;
+    border-inline: none;
   }
 
   .ace_gutter_annotation {
     // To align our custom icon with the annotation clickable/focus area.
     // Based on -19px in ace's default stylesheet.
-    margin-left: -21px;
+    margin-inline-start: -21px;
   }
 
   .ace_fold-widget,
@@ -85,13 +85,13 @@
   .ace_marker-layer > .ace_active-line {
     background: transparent;
     box-sizing: border-box;
-    border-top: 1px solid $active-line-border-color-light;
-    border-bottom: 1px solid $active-line-border-color-light;
+    border-block-start: 1px solid $active-line-border-color-light;
+    border-block-end: 1px solid $active-line-border-color-light;
   }
 
   &.ace_dark .ace_marker-layer > .ace_active-line {
-    border-top: 1px solid $active-line-border-color-dark;
-    border-bottom: 1px solid $active-line-border-color-dark;
+    border-block-start: 1px solid $active-line-border-color-dark;
+    border-block-end: 1px solid $active-line-border-color-dark;
   }
 
   .ace_gutter {

package/lib/internal/scss/code-editor/pane.scss

@@ -11,17 +11,17 @@
   $border: awsui.$border-item-width solid $border-color;
   $radius: awsui.$border-radius-item;
   > .pane__cell {
-    border-top: $border;
-    border-bottom: $border;
+    border-block-start: $border;
+    border-block-end: $border;
     &:first-child {
-      border-left: $border;
-      border-top-left-radius: $radius;
-      border-bottom-left-radius: $radius;
+      border-inline-start: $border;
+      border-start-start-radius: $radius;
+      border-end-start-radius: $radius;
     }
     &:last-child {
-      border-right: $border;
-      border-top-right-radius: $radius;
-      border-bottom-right-radius: $radius;
+      border-inline-end: $border;
+      border-start-end-radius: $radius;
+      border-end-end-radius: $radius;
     }
   }
 }
@@ -32,30 +32,31 @@
   flex-direction: row;
   flex: 1;
 
-  border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-bottom-left-radius: awsui.$border-radius-code-editor;
-  border-bottom-right-radius: awsui.$border-radius-code-editor;
+  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-end-start-radius: awsui.$border-radius-code-editor;
+  border-end-end-radius: awsui.$border-radius-code-editor;
   background: awsui.$color-background-code-editor-status-bar;
   color: awsui.$color-text-body-default;
 
   &__close-container {
     position: absolute;
-    top: 0;
-    right: calc(#{awsui.$space-s} / 2);
+    inset-block-start: 0;
+    inset-inline-end: calc(#{awsui.$space-s} / 2);
   }
 
   &__list {
     flex: 1;
     overflow: auto;
-    max-height: 100%;
+    max-block-size: 100%;
     box-sizing: border-box;
-    margin-right: calc(#{awsui.$line-height-body-m} + 2 * #{awsui.$space-xs});
+    margin-inline-end: calc(#{awsui.$line-height-body-m} + 2 * #{awsui.$space-xs});
   }
 
   &__table {
-    width: 100%;
+    inline-size: 100%;
     border-spacing: 0;
-    margin: awsui.$space-s 0;
+    margin-block: awsui.$space-s;
+    margin-inline: 0;
   }
 
   &__item {
@@ -75,21 +76,22 @@
 
   &__location,
   &__description {
-    padding: awsui.$space-xxs awsui.$space-s;
+    padding-block: awsui.$space-xxs;
+    padding-inline: awsui.$space-s;
   }
 
   &__location {
     vertical-align: baseline;
     white-space: nowrap;
-    padding-left: calc(#{awsui.$space-l} + #{awsui.$space-s});
+    padding-inline-start: calc(#{awsui.$space-l} + #{awsui.$space-s});
   }
 
   &__description {
-    padding-right: 0;
+    padding-inline-end: 0;
     @include styles.text-wrapping;
   }
 }
 
 .focus-lock {
-  height: 100%;
+  block-size: 100%;
 }

package/lib/internal/scss/code-editor/resizable-box/styles.scss

@@ -7,17 +7,17 @@
 
 .resizable-box {
   position: relative;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .resizable-box-handle {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  inset-inline-end: 0;
+  inset-block-end: 0;
   z-index: 10; // above editor, when editor is overflowing
 
-  width: awsui.$space-l;
-  height: awsui.$space-l;
+  inline-size: awsui.$space-l;
+  block-size: awsui.$space-l;
 
   background-repeat: no-repeat;
   background-origin: content-box;

package/lib/internal/scss/code-editor/styles.scss

@@ -13,17 +13,18 @@
 .code-editor {
   @include styles.styles-reset;
   display: inline-block;
-  border: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
-  border-radius: awsui.$border-radius-code-editor;
-  width: 100%;
+  border-block: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-inline: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-start-start-radius: awsui.$border-radius-code-editor;
+  border-start-end-radius: awsui.$border-radius-code-editor;
+  border-end-start-radius: awsui.$border-radius-code-editor;
+  border-end-end-radius: awsui.$border-radius-code-editor;
+  inline-size: 100%;
 }
 
 .editor {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 
   &:focus {
     @include styles.focus-highlight(3px);
@@ -33,19 +34,19 @@
 }
 
 .editor-refresh {
-  border-top-left-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
-  border-top-right-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+  border-start-start-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
+  border-start-end-radius: calc(awsui.$border-radius-code-editor - awsui.$border-item-width);
 }
 
 .status-bar {
   display: flex;
   vertical-align: middle;
 
-  border-top: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+  border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   background-color: awsui.$color-background-code-editor-status-bar;
   &-with-hidden-pane {
-    border-bottom-left-radius: awsui.$border-radius-code-editor;
-    border-bottom-right-radius: awsui.$border-radius-code-editor;
+    border-end-start-radius: awsui.$border-radius-code-editor;
+    border-end-end-radius: awsui.$border-radius-code-editor;
   }
 
   @include styles.text-wrapping;
@@ -54,8 +55,8 @@
     flex: 1;
     display: flex;
     flex-wrap: wrap;
-    padding-left: awsui.$space-l;
-    border-right: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
+    padding-inline-start: awsui.$space-l;
+    border-inline-end: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   }
 
   &__left-virtual {
@@ -72,11 +73,13 @@
   &__cursor-position {
     display: inline-block;
     color: awsui.$color-text-body-default;
-    padding: awsui.$space-scaled-xs awsui.$space-s;
+    padding-block: awsui.$space-scaled-xs;
+    padding-inline: awsui.$space-s;
   }
 
   &__cog-button {
-    padding: calc(#{awsui.$space-scaled-xxs} - 1px) calc(#{awsui.$space-xs} - 2px);
+    padding-block: calc(#{awsui.$space-scaled-xxs} - 1px);
+    padding-inline: calc(#{awsui.$space-xs} - 2px);
   }
 }
 
@@ -87,11 +90,13 @@
 .tab-button {
   position: relative;
   display: inline-block;
-  padding: awsui.$space-scaled-xs awsui.$space-s;
+  padding-block: awsui.$space-scaled-xs;
+  padding-inline: awsui.$space-s;
   line-height: inherit;
   color: awsui.$color-text-status-error;
   background: none;
-  border: none;
+  border-block: none;
+  border-inline: none;
   font-weight: bold;
   outline: none;
   cursor: pointer;
@@ -105,17 +110,19 @@
   &::after {
     content: '';
     position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: awsui.$border-active-width;
-    border-radius: awsui.$border-radius-tabs-focus-ring;
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: awsui.$border-active-width;
+    border-start-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-start-end-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-start-radius: awsui.$border-radius-tabs-focus-ring;
+    border-end-end-radius: awsui.$border-radius-tabs-focus-ring;
     background: awsui.$color-text-status-error;
     opacity: 0;
   }
 
   &--refresh {
-    padding-bottom: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
+    padding-block-end: calc(#{awsui.$space-scaled-xs} + #{awsui.$border-active-width} - 2px);
   }
 
   &--warnings {
@@ -161,8 +168,8 @@
 
   &--divider {
     display: inline-block;
-    height: awsui.$line-height-body-m;
-    width: awsui.$border-code-editor-status-divider-width;
+    block-size: awsui.$line-height-body-m;
+    inline-size: awsui.$border-code-editor-status-divider-width;
     background: awsui.$color-border-tabs-divider;
     vertical-align: middle;
   }
@@ -178,12 +185,13 @@ $default-height: 480px;
   display: flex;
   align-items: center;
   justify-content: center;
-
-  height: $default-height;
-
+  block-size: $default-height;
   color: awsui.$color-text-body-secondary;
   background: awsui.$color-background-code-editor-loading;
-  border-radius: awsui.$border-radius-code-editor;
+  border-start-start-radius: awsui.$border-radius-code-editor;
+  border-start-end-radius: awsui.$border-radius-code-editor;
+  border-end-start-radius: awsui.$border-radius-code-editor;
+  border-end-end-radius: awsui.$border-radius-code-editor;
 }
 
 .error-screen {

package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss

@@ -29,15 +29,20 @@ $border-radius: awsui.$border-radius-item;
   @include styles.styles-reset;
   display: flex;
   align-items: flex-start;
-  padding: awsui.$space-xs awsui.$space-scaled-xs awsui.$space-xs 0;
+  padding-block: awsui.$space-xs;
+  padding-inline-start: 0;
+  padding-inline-end: awsui.$space-scaled-xs;
   background-color: awsui.$color-background-container-content;
-  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;
 }
 
 .content-display-option {
   list-style: none;
   position: relative;
-  border-top: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
+  border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-default;
   &:not(.placeholder).sorting {
     @include animated;
   }
@@ -47,12 +52,12 @@ $border-radius: awsui.$border-radius-item;
       &:after {
         content: ' ';
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset: 0;
         background: awsui.$color-drag-placeholder-hover;
-        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;
       }
     }
   }
@@ -61,12 +66,15 @@ $border-radius: awsui.$border-radius-item;
 .content-display-option-label {
   flex-grow: 1;
   @include styles.text-wrapping;
-  padding-right: awsui.$space-l;
+  padding-inline-end: awsui.$space-l;
 }
 
 .drag-overlay {
   box-shadow: awsui.$shadow-container-active;
-  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;
   @include focus-visible {
     @include styles.focus-highlight(0px, $border-radius);
   }

package/lib/internal/scss/collection-preferences/content-display/styles.scss

@@ -15,16 +15,18 @@
 .content-display-title {
   @include styles.font-label;
   color: awsui.$color-text-form-label;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .content-display-description {
   @include styles.form-control-description;
-  margin-top: awsui.$space-scaled-xxxs;
+  margin-block-start: awsui.$space-scaled-xxxs;
 }
 
 .content-display-option-list {
   position: relative;
   list-style: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
 }

package/lib/internal/scss/collection-preferences/styles.scss

@@ -18,7 +18,7 @@
 }
 
 .second-column-small {
-  padding-top: calc(2 * #{awsui.$space-scaled-l});
+  padding-block-start: calc(2 * #{awsui.$space-scaled-l});
 }
 
 .wrap-lines,

package/lib/internal/scss/collection-preferences/visible-content.scss

@@ -18,30 +18,33 @@ $border: awsui.$border-divider-list-width solid awsui.$color-border-divider-defa
 .visible-content-title {
   @include styles.font-label;
   color: awsui.$color-text-form-label;
-  margin: 0;
-  margin-bottom: awsui.$space-scaled-l;
+  margin-block-start: 0;
+  margin-block-end: awsui.$space-scaled-l;
+  margin-inline: 0;
 }
 
 .visible-content-group-label {
   color: awsui.$color-text-group-label;
-  padding-bottom: awsui.$space-xs;
-  border-bottom: $border;
+  padding-block-end: awsui.$space-xs;
+  border-block-end: $border;
 }
 
 .visible-content-option {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
-  padding: awsui.$space-xs 0px awsui.$space-xs awsui.$space-scaled-l;
-  border-bottom: $border;
+  padding-block: awsui.$space-xs;
+  padding-inline-start: awsui.$space-scaled-l;
+  padding-inline-end: 0px;
+  border-block-end: $border;
   &:last-child {
-    border-bottom: none;
+    border-block-end: none;
   }
 }
 
 .visible-content-option-label {
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-right: awsui.$space-l;
+  padding-inline-end: awsui.$space-l;
   flex-grow: 1;
 }

package/lib/internal/scss/column-layout/flexible-column-layout/styles.scss

@@ -14,13 +14,12 @@
 
   &.grid-variant-text-grid {
     > .item {
-      border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-      padding-left: awsui.$space-grid-gutter;
-      padding-right: awsui.$space-grid-gutter;
+      border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      padding-inline: awsui.$space-grid-gutter;
 
       &.first-column {
-        border-left: 0;
-        padding-left: 0;
+        border-inline-start: 0;
+        padding-inline-start: 0;
       }
     }
   }

package/lib/internal/scss/column-layout/styles.scss

@@ -63,10 +63,10 @@ $column-breakpoint-spans: (
 @mixin make-horizontal-borders() {
   /* stylelint-disable selector-max-universal */
   > * {
-    border-bottom: $column-layout-border;
+    border-block-end: $column-layout-border;
 
     &:last-child {
-      border-bottom-width: 0;
+      border-block-end-width: 0;
     }
   }
   /* stylelint-enable selector-max-universal */
@@ -89,7 +89,7 @@ $column-breakpoint-spans: (
       @for $h from 1 through $items-per-row - $m + 1 {
         @if $h > 0 {
           > *:nth-last-child(#{$m}):nth-child(#{$items-per-row}n + #{$h}) {
-            border-bottom-width: 0;
+            border-block-end-width: 0;
           }
         }
       }
@@ -103,25 +103,31 @@ div.column-layout {
   word-wrap: break-word;
 
   > .grid {
-    margin: calc(#{$grid-gutter-width} / -2);
+    margin-block: calc(#{$grid-gutter-width} / -2);
+    margin-inline: calc(#{$grid-gutter-width} / -2);
 
     &.grid-no-gutters {
-      margin: 0;
+      margin-block: 0;
+      margin-inline: 0;
     }
 
     &.grid-variant-text-grid {
       @include make-vertical-borders('left');
-      margin: calc(-1 * #{$grid-gutter-width} / 2) calc(-1 * #{$grid-gutter-width});
+      margin-block: calc(-1 * #{$grid-gutter-width} / 2);
+      margin-inline: calc(-1 * #{$grid-gutter-width});
     }
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters) > * {
-      padding: calc(#{$grid-gutter-width} / 2);
+      padding-block: calc(#{$grid-gutter-width} / 2);
+      padding-inline: calc(#{$grid-gutter-width} / 2);
     }
 
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters).grid-variant-text-grid > * {
-      padding: 0 $grid-gutter-width;
-      margin: calc(#{$grid-gutter-width} / 2) 0;
+      padding-block: 0;
+      padding-inline: $grid-gutter-width;
+      margin-block: calc(#{$grid-gutter-width} / 2);
+      margin-inline: 0;
     }
 
     &.grid-vertical-borders {