@cloudscape-design/components-themeable 3.0.537 → 3.0.538

package/lib/internal/scss/container/styles.scss

@@ -15,7 +15,7 @@
   &.fit-height {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    block-size: 100%;
     &.with-side-media {
       flex-direction: row;
     }
@@ -28,20 +28,21 @@
       // Border and shadows are applied with ::before and ::after elements (respectively)
       @include styles.container-style;
     }
+
     // Meld container bottom corners into next adjoining container
     &-stacked:not(:last-child),
     &-stacked:not(:last-child)::before,
     &-stacked:not(:last-child)::after {
-      border-bottom-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-width: 0;
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
+      border-block-end-width: 0;
     }
     // Meld container top corners into preceding container
     &-stacked + &-stacked,
     &-stacked + &-stacked::before,
     &-stacked + &-stacked::after {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
     }
     // Replace container border with a divider
     &-stacked + &-stacked:not(.refresh)::before {
@@ -52,10 +53,10 @@
   // To ensure the top border/divider is visible on sticky elements which have a higher z-index
   &.sticky-enabled:not(.refresh) {
     &::before {
-      top: calc(-1 * #{awsui.$border-container-top-width});
+      inset-block-start: calc(-1 * #{awsui.$border-container-top-width});
     }
     &.variant-stacked::before {
-      top: calc(-1 * #{awsui.$border-divider-section-width});
+      inset-block-start: calc(-1 * #{awsui.$border-divider-section-width});
     }
   }
 }
@@ -73,9 +74,9 @@
 .content-wrapper {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
   &-fit-height {
-    height: 100%;
+    block-size: 100%;
     overflow: hidden;
   }
 }
@@ -88,42 +89,43 @@
   img,
   video,
   picture {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     object-fit: cover;
     object-position: center;
   }
 
   // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type
   iframe {
-    width: 100%;
-    height: 100%;
-    border: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border-block: 0;
+    border-inline: 0;
   }
 
   // reduce border-radius size to fill the visual gap between the parent border and image
   &-top {
-    max-height: 66%;
-    border-top-left-radius: calc(awsui.$border-radius-container - 1px);
-    border-top-right-radius: calc(awsui.$border-radius-container - 1px);
+    max-block-size: 66%;
+    border-start-start-radius: calc(awsui.$border-radius-container - 1px);
+    border-start-end-radius: calc(awsui.$border-radius-container - 1px);
   }
 
   &-side {
-    max-width: 66%;
-    border-top-left-radius: calc(awsui.$border-radius-container - 1px);
-    border-bottom-left-radius: calc(awsui.$border-radius-container - 1px);
+    max-inline-size: 66%;
+    border-start-start-radius: calc(awsui.$border-radius-container - 1px);
+    border-end-start-radius: calc(awsui.$border-radius-container - 1px);
   }
 }
 
 .header {
   background-color: awsui.$color-background-container-header;
-  border-top-left-radius: awsui.$border-radius-container;
-  border-top-right-radius: awsui.$border-radius-container;
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
 
   &.header-with-media {
     background: none;
     &:not(:empty) {
-      border-bottom: none;
+      border-block-end: none;
     }
   }
 
@@ -135,16 +137,21 @@
   }
 
   &-sticky-enabled {
-    top: 0;
+    inset-block-start: 0;
     /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     position: sticky;
     z-index: 800;
   }
 
   &-stuck {
-    border-radius: 0;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+
     &::before {
-      border: 0;
+      border-block: 0;
+      border-inline: 0;
     }
     &:not(.header-variant-cards) {
       box-shadow: awsui.$shadow-sticky-embedded;
@@ -153,23 +160,27 @@
 
   &-dynamic-height.header-stuck {
     // to prevent the block from changing its height when variant dynamically changes
-    margin-bottom: calc(#{awsui.$line-height-heading-xl} - #{awsui.$line-height-heading-l});
+    margin-block-end: calc(#{awsui.$line-height-heading-xl} - #{awsui.$line-height-heading-l});
   }
 
   &:not(:empty) {
-    border-bottom: awsui.$border-container-sticky-width solid awsui.$color-border-container-divider;
+    border-block-end: awsui.$border-container-sticky-width solid awsui.$color-border-container-divider;
   }
 
   &.with-paddings {
-    padding: shared.$header-padding;
+    padding-block-start: awsui.$space-container-header-top;
+    padding-block-end: awsui.$space-container-header-bottom;
+    padding-inline: awsui.$space-container-horizontal;
+
     &.header-variant-cards {
-      padding: awsui.$space-container-header-top awsui.$space-container-horizontal;
+      padding-block: awsui.$space-container-header-top;
+      padding-inline: awsui.$space-container-horizontal;
     }
   }
 
   &.with-hidden-content {
-    border-bottom-left-radius: awsui.$border-radius-container;
-    border-bottom-right-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
   }
 
   &-variant-cards {
@@ -178,11 +189,13 @@
     &:not(.header-sticky-enabled) {
       position: relative;
     }
+
     &.header-stuck::after,
     &.header-stuck::before {
-      border: 0;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      border-block: 0;
+      border-inline: 0;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
     }
   }
 
@@ -194,21 +207,18 @@
 
       position: absolute;
       pointer-events: none;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      top: 0;
-      border-bottom: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+      inset-inline-end: 0;
+      inset-inline-start: 0;
+      inset-block-end: 0;
+      inset-block-start: 0;
+      border-block-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
     }
 
     &::after {
       content: '';
 
       position: absolute;
-      right: 0;
-      left: 0;
-      bottom: 0;
-      top: 0;
+      inset: 0;
 
       box-shadow: awsui.$shadow-sticky;
       // This polygon only shows the part of the shadow that is lower than the element itself.
@@ -218,7 +228,7 @@
     &:not(.remove-high-contrast-header) {
       &::before {
         content: '';
-        border-bottom: none;
+        border-block-end: none;
       }
     }
   }
@@ -239,12 +249,13 @@ the default white background of the container component.
     overflow: auto;
   }
   &.with-paddings {
-    padding: awsui.$space-scaled-l awsui.$space-container-horizontal;
+    padding-block: awsui.$space-scaled-l;
+    padding-inline: awsui.$space-container-horizontal;
 
     .header + & {
-      padding-top: awsui.$space-container-content-top;
+      padding-block-start: awsui.$space-container-content-top;
       &.content-with-media {
-        padding-top: 0;
+        padding-block-start: 0;
       }
     }
   }
@@ -252,7 +263,8 @@ the default white background of the container component.
 
 .footer {
   &.with-paddings {
-    padding: shared.$footer-padding;
+    padding-block: awsui.$space-scaled-s;
+    padding-inline: awsui.$space-container-horizontal;
   }
 
   &.with-divider {

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

@@ -20,7 +20,7 @@ nodes will directly touch with no gap between them.
   }
 
   > .header {
-    padding-bottom: awsui.$space-content-header-padding-bottom;
+    padding-block-end: awsui.$space-content-header-padding-bottom;
   }
 }
 
@@ -28,7 +28,7 @@ nodes will directly touch with no gap between them.
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   grid-template-rows: auto #{awsui.$space-dark-header-overlap-distance} 1fr;
-  min-height: 100%;
+  min-block-size: 100%;
 
   > .background {
     background-color: awsui.$color-background-layout-main;
@@ -44,7 +44,7 @@ nodes will directly touch with no gap between them.
   > .header {
     grid-column: 1;
     grid-row: 1;
-    padding-bottom: awsui.$space-content-header-padding-bottom;
+    padding-block-end: awsui.$space-content-header-padding-bottom;
   }
 
   > .content {
@@ -60,7 +60,7 @@ nodes will directly touch with no gap between them.
       1fr;
 
     > .content {
-      padding-top: var(#{custom-props.$containerFirstGap}, 0px);
+      padding-block-start: var(#{custom-props.$containerFirstGap}, 0px);
     }
   }
 

package/lib/internal/scss/date-picker/styles.scss

@@ -29,7 +29,7 @@
 
 .date-picker-container {
   position: relative;
-  max-width: 234px;
+  max-inline-size: 234px;
 }
 
 .date-picker-trigger {
@@ -37,8 +37,8 @@
 }
 
 .date-picker-input {
-  padding-right: awsui.$space-xs;
-  width: 100%;
+  padding-inline-end: awsui.$space-xs;
+  inline-size: 100%;
 }
 
 .open-calendar-button {

package/lib/internal/scss/date-range-picker/calendar/grids/styles.scss

@@ -31,17 +31,19 @@
 }
 
 .grid {
-  width: awsui.$size-calendar-grid-width;
+  inline-size: awsui.$size-calendar-grid-width;
   border-spacing: 0;
 }
 .grid-cell {
-  width: calc(100% / 7);
+  inline-size: calc(100% / 7);
   word-break: break-word;
   text-align: center;
   font-weight: unset;
 }
 .day-header {
-  padding: awsui.$space-s 0 awsui.$space-xxs;
+  padding-block-start: awsui.$space-s;
+  padding-block-end: awsui.$space-xxs;
+  padding-inline: 0;
   color: calendar.$grid-day-name-color;
   @include styles.font-body-s;
 }
@@ -51,9 +53,10 @@
 }
 
 .day {
-  border-bottom: calendar.$grid-border;
-  border-right: calendar.$grid-border;
-  padding: awsui.$space-xxs 0;
+  border-block-end: calendar.$grid-border;
+  border-inline-end: calendar.$grid-border;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
   color: calendar.$grid-disabled-day-color;
   position: relative;
 
@@ -65,10 +68,10 @@
     content: '';
     position: absolute;
     z-index: 1;
-    top: calc(-1 * #{awsui.$border-item-width});
-    left: -1px;
-    bottom: -1px;
-    right: calc(-1 * #{awsui.$border-item-width});
+    inset-block-start: calc(-1 * #{awsui.$border-item-width});
+    inset-block-end: -1px;
+    inset-inline-start: -1px;
+    inset-inline-end: calc(-1 * #{awsui.$border-item-width});
     background-color: transparent;
   }
 
@@ -87,11 +90,11 @@
 }
 
 .in-first-row:not(.in-previous-month) {
-  border-top: calendar.$grid-border;
+  border-block-start: calendar.$grid-border;
 }
 
 .in-previous-month:not(.last-day-of-month) {
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
 }
 
 .in-next-month {
@@ -99,10 +102,10 @@
 }
 
 .in-first-column {
-  border-left: 1px solid transparent;
+  border-inline-start: 1px solid transparent;
 
   &.in-current-month {
-    border-left: calendar.$grid-border;
+    border-inline-start: calendar.$grid-border;
   }
 }
 
@@ -116,7 +119,10 @@
     &.no-range {
       &,
       &::after {
-        border-radius: awsui.$border-radius-item;
+        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;
       }
     }
     &:hover {
@@ -124,7 +130,8 @@
       background-color: calendar.$grid-hover-background-color;
       &:not(.selected) {
         &::after {
-          border: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+          border-block: awsui.$border-item-width solid calendar.$grid-hover-border-color;
+          border-inline: awsui.$border-item-width solid calendar.$grid-hover-border-color;
         }
       }
     }
@@ -133,7 +140,10 @@
 
 .today:not(.in-range) {
   background-color: calendar.$grid-today-background-color;
-  border-radius: awsui.$border-radius-item;
+  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;
   font-weight: styles.$font-weight-bold;
 }
 
@@ -155,7 +165,8 @@
 
   &::after {
     background-color: calendar.$grid-selected-background-color;
-    border: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+    border-block: awsui.$border-item-width solid calendar.$grid-selected-border-color;
+    border-inline: awsui.$border-item-width solid calendar.$grid-selected-border-color;
     z-index: 0;
   }
 

package/lib/internal/scss/date-range-picker/relative-range/styles.scss

@@ -9,26 +9,26 @@
 
 .custom-range {
   // This padding aligns the custom range selection with the radio labels
-  padding-left: calc(#{1.4 * styles.$base-size} + #{awsui.$space-xs});
+  padding-inline-start: calc(#{1.4 * styles.$base-size} + #{awsui.$space-xs});
 
   display: flex;
-  width: 80%;
+  inline-size: 80%;
 }
 .custom-range--no-padding {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .custom-range-form-controls {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
 
   > .custom-range-duration,
   > .custom-range-unit {
-    width: 50%;
+    inline-size: 50%;
   }
 
   > .custom-range-duration {
-    margin-right: awsui.$space-xs;
+    margin-inline-end: awsui.$space-xs;
   }
 
   &.vertical {
@@ -36,11 +36,11 @@
 
     > .custom-range-duration,
     > .custom-range-unit {
-      width: 100%;
+      inline-size: 100%;
     }
 
     > .custom-range-unit {
-      margin-top: awsui.$space-s;
+      margin-block-start: awsui.$space-s;
     }
   }
 }

package/lib/internal/scss/date-range-picker/styles.scss

@@ -14,7 +14,7 @@ $calendar-header-color: awsui.$color-text-body-default;
 
 .root {
   @include styles.styles-reset;
-  max-width: 32em;
+  max-inline-size: 32em;
 }
 
 .focus-lock {
@@ -22,7 +22,7 @@ $calendar-header-color: awsui.$color-text-body-default;
 }
 
 .trigger-wrapper {
-  min-width: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
+  min-inline-size: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
 }
 
 .trigger-flexbox {
@@ -30,10 +30,10 @@ $calendar-header-color: awsui.$color-text-body-default;
 }
 
 .calendar-container {
-  width: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs});
+  inline-size: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs});
 
   &.one-grid {
-    width: $calendar-grid-width;
+    inline-size: $calendar-grid-width;
   }
 }
 
@@ -47,12 +47,10 @@ $calendar-header-color: awsui.$color-text-body-default;
 
   &-header-months-wrapper {
     position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
-    bottom: 0;
+    inset: 0;
 
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
 
     display: flex;
     justify-content: space-around;
@@ -92,7 +90,7 @@ $calendar-header-color: awsui.$color-text-body-default;
   gap: awsui.$space-xs;
 }
 .date-and-time-wrapper {
-  width: $calendar-grid-width;
+  inline-size: $calendar-grid-width;
   display: grid;
   gap: awsui.$space-xs;
   grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -102,29 +100,33 @@ $calendar-header-color: awsui.$color-text-body-default;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  border-top: 1px solid #{awsui.$color-border-dropdown-item-default};
-  padding: 0 awsui.$space-l awsui.$space-s;
+  border-block-start: 1px solid #{awsui.$color-border-dropdown-item-default};
+  padding-block-start: 0;
+  padding-block-end: awsui.$space-s;
+  padding-inline: awsui.$space-l;
 
   &.has-clear-button {
     justify-content: space-between;
   }
 
   &.one-grid {
-    padding: 0 awsui.$space-xs awsui.$space-s;
+    padding-block-start: 0;
+    padding-block-end: awsui.$space-s;
+    padding-inline: awsui.$space-xs;
   }
 }
 
 .footer-button-wrapper {
-  padding-top: awsui.$space-s;
+  padding-block-start: awsui.$space-s;
 
   &:last-child {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
 
 .icon-wrapper {
   color: awsui.$color-text-interactive-default;
-  margin-right: awsui.$space-xs;
+  margin-inline-end: awsui.$space-xs;
 }
 
 .label {
@@ -154,9 +156,12 @@ $calendar-header-color: awsui.$color-text-body-default;
   // widths.
   overflow: auto;
 
-  border-top: 1px solid #{awsui.$color-border-container-top};
-  border-bottom: 1px solid #{awsui.$color-border-container-top};
-  border-radius: awsui.$border-radius-dropdown;
+  border-block-start: 1px solid #{awsui.$color-border-container-top};
+  border-block-end: 1px 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;
 
   &:focus {
     outline: none;
@@ -169,10 +174,10 @@ $calendar-header-color: awsui.$color-text-body-default;
 .dropdown-content {
   user-select: text;
   background-color: awsui.$color-background-container-content;
-  width: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs} + 2 * #{awsui.$space-l});
+  inline-size: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs} + 2 * #{awsui.$space-l});
 
   &.one-grid {
-    width: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
+    inline-size: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
   }
 }
 

package/lib/internal/scss/drawer/styles.scss

@@ -10,18 +10,23 @@
 .drawer {
   @include styles.styles-reset;
   word-wrap: break-word;
-  padding: awsui.$space-scaled-l awsui.$space-panel-side-right awsui.$space-scaled-xxxl awsui.$space-panel-side-left;
+  padding-block-start: awsui.$space-scaled-l;
+  padding-block-end: awsui.$space-scaled-xxxl;
+  padding-inline-start: awsui.$space-panel-side-left;
+  padding-inline-end: awsui.$space-panel-side-right;
 }
 
 .header {
   @include styles.font-panel-header;
   color: awsui.$color-text-heading-default;
-  padding-bottom: awsui.$space-scaled-l;
-  padding-left: awsui.$space-panel-side-left;
+  padding-block-end: awsui.$space-scaled-l;
+  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
   // padding to make sure the header doesn't overlap with the close icon
-  padding-right: calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  margin: 0 calc(-1 * #{awsui.$space-panel-side-right}) awsui.$space-scaled-l calc(-1 * #{awsui.$space-panel-side-left});
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin-block-start: 0;
+  margin-block-end: awsui.$space-scaled-l;
+  margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
+  margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
 
   h2,
   h3,
@@ -29,10 +34,8 @@
   h5,
   h6 {
     @include styles.font-panel-header;
-    padding-top: 0;
-    padding-bottom: 0;
-    margin-top: 0;
-    margin-bottom: 0;
+    padding-block: 0;
+    margin-block: 0;
   }
 }