@cloudscape-design/components-themeable 3.0.533 → 3.0.535

package/lib/internal/scss/internal/components/button-trigger/styles.scss

@@ -15,18 +15,23 @@
 
   position: relative;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: space-between;
   align-items: center;
-  padding: styles.$control-padding-vertical styles.$control-padding-horizontal;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: styles.$control-padding-horizontal;
 
   background-color: awsui.$color-background-input-default;
-  border-radius: styles.$control-border-radius;
-  border: styles.$control-border-width solid awsui.$color-border-input-default;
-  min-height: awsui.$size-vertical-input;
+  border-start-start-radius: styles.$control-border-radius;
+  border-start-end-radius: styles.$control-border-radius;
+  border-end-start-radius: styles.$control-border-radius;
+  border-end-end-radius: styles.$control-border-radius;
+  border-block: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
+  min-block-size: awsui.$size-vertical-input;
 
   &.has-caret {
-    padding-right: styles.$control-icon-horizontal-padding;
+    padding-inline-end: styles.$control-icon-horizontal-padding;
   }
 
   > .placeholder {
@@ -35,8 +40,8 @@
 
   > .arrow {
     position: absolute;
-    right: styles.$control-icon-horizontal-offset;
-    top: styles.$control-icon-vertical-offset;
+    inset-inline-end: styles.$control-icon-horizontal-offset;
+    inset-block-start: styles.$control-icon-vertical-offset;
     color: awsui.$color-text-button-inline-icon-default;
   }
 
@@ -91,9 +96,9 @@
 
   &.in-filtering-token {
     border-color: tokenGroup.$token-border-color;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    height: 100%;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    block-size: 100%;
     @include focus-visible.when-visible {
       @include styles.focus-highlight(awsui.$space-filtering-token-operation-select-focus-outline-gutter);
     }
@@ -101,7 +106,6 @@
 
   &.inline-tokens {
     // Remove default paddings and just rely on center alignment of the content
-    padding-top: 0;
-    padding-bottom: 0;
+    padding-block: 0;
   }
 }

package/lib/internal/scss/internal/components/cartesian-chart/styles.scss

@@ -57,7 +57,7 @@
 
 .labels-left {
   position: relative;
-  margin-right: 12px;
+  margin-inline-end: 12px;
 
   > .axis-label {
     position: absolute;
@@ -82,7 +82,7 @@
 .labels-bottom {
   position: relative;
   display: block;
-  width: 100%;
+  inline-size: 100%;
   overflow: visible;
 }
 
@@ -112,12 +112,12 @@
 
 .chart-container {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex-direction: column;
 
   &.fit-height {
-    height: 100%;
-    min-height: inherit;
+    block-size: 100%;
+    min-block-size: inherit;
   }
 }
 
@@ -133,7 +133,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .chart-container-plot-wrapper {
@@ -148,10 +148,7 @@
   &.fit-height {
     display: block;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
   }
 }
 

package/lib/internal/scss/internal/components/chart-legend/styles.scss

@@ -24,16 +24,20 @@
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
 }
 
 .marker {
   display: inline-flex;
   align-items: flex-start;
-  margin-right: awsui.$space-m;
-  padding: 0;
-  border: 0;
+  margin-inline-end: awsui.$space-m;
+  padding-block: 0;
+  padding-inline: 0;
+  border-block: 0;
+  border-inline: 0;
   background-color: transparent;
   cursor: pointer;
   opacity: 1;
@@ -47,7 +51,7 @@
   }
 
   &:last-child {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   &.marker--dimmed {

package/lib/internal/scss/internal/components/chart-plot/styles.scss

@@ -14,8 +14,8 @@
   // These attributes are needed to ensure that the chart does not grow indefinitely
   // when placed in a parent container without a width constraint.
   display: flex;
-  width: 100%;
-  max-width: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
 }
 
 .clickable {

package/lib/internal/scss/internal/components/chart-popover/styles.scss

@@ -12,8 +12,10 @@
 }
 .hover-area {
   pointer-events: none;
-  padding: awsui.$space-static-s;
-  margin: calc(-1 * #{awsui.$space-static-s});
+  padding-block: awsui.$space-static-s;
+  padding-inline: awsui.$space-static-s;
+  margin-block: calc(-1 * #{awsui.$space-static-s});
+  margin-inline: calc(-1 * #{awsui.$space-static-s});
 }
 
 .popover-body {

package/lib/internal/scss/internal/components/chart-popover-footer/styles.scss

@@ -5,11 +5,13 @@
 @use '../../styles/tokens' as awsui;
 
 .root {
-  margin-top: awsui.$space-xs;
+  margin-block-start: awsui.$space-xs;
   /* stylelint-disable selector-max-type */
   > hr {
-    border: none;
-    border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-    margin: awsui.$space-xs 0;
+    border-block: none;
+    border-inline: none;
+    border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    margin-block: awsui.$space-xs;
+    margin-inline: 0;
   }
 }

package/lib/internal/scss/internal/components/chart-series-details/styles.scss

@@ -16,7 +16,7 @@ $font-weight-bold: awsui.$font-weight-heading-s;
 }
 
 .value {
-  text-align: right;
+  text-align: end;
   margin-inline-start: awsui.$space-xxl;
   &.expandable {
     font-weight: $font-weight-bold;
@@ -34,7 +34,7 @@ $font-weight-bold: awsui.$font-weight-heading-s;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 100%;
+  inline-size: 100%;
   > .key {
     display: inline-flex;
     color: awsui.$color-text-group-label;
@@ -55,8 +55,10 @@ $font-weight-bold: awsui.$font-weight-heading-s;
 
 .list {
   display: flex;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   list-style: none;
   flex-direction: column;
 
@@ -73,7 +75,7 @@ $font-weight-bold: awsui.$font-weight-heading-s;
 
 .list:not(.compact) > .list-item:not(:first-child),
 .inner-list-item {
-  margin-top: awsui.$space-scaled-xxs;
+  margin-block-start: awsui.$space-scaled-xxs;
 }
 
 .list-item.with-sub-items:not(.expandable) > .key-value-pair {
@@ -84,7 +86,7 @@ $font-weight-bold: awsui.$font-weight-heading-s;
 }
 
 .full-width {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .announced {

package/lib/internal/scss/internal/components/chart-series-marker/styles.scss

@@ -11,53 +11,66 @@ $marker-margin-right: awsui.$space-xxs;
 
 .marker {
   @include styles.styles-reset;
-  margin-right: $marker-margin-right;
-  margin-top: awsui.$space-xxs;
-  border-radius: 2px;
-  width: $marker-width;
+  margin-inline-end: $marker-margin-right;
+  margin-block-start: awsui.$space-xxs;
+  border-start-start-radius: 2px;
+  border-start-end-radius: 2px;
+  border-end-start-radius: 2px;
+  border-end-end-radius: 2px;
+  inline-size: $marker-width;
   flex-shrink: 0;
   cursor: inherit;
 
   &--line {
     // same margin as in filled marker + half the difference in their size
-    margin-top: 0.9 * styles.$base-size;
-    height: 0.4 * styles.$base-size;
+    margin-block-start: 0.9 * styles.$base-size;
+    block-size: 0.4 * styles.$base-size;
   }
 
   &--rectangle {
-    height: 1.4 * styles.$base-size;
-    border-radius: 2px;
+    block-size: 1.4 * styles.$base-size;
+    border-start-start-radius: 2px;
+    border-start-end-radius: 2px;
+    border-end-start-radius: 2px;
+    border-end-end-radius: 2px;
   }
 
   &--hollow-rectangle {
-    height: 1.4 * styles.$base-size;
-    border-radius: 2px;
+    block-size: 1.4 * styles.$base-size;
+    border-start-start-radius: 2px;
+    border-start-end-radius: 2px;
+    border-end-start-radius: 2px;
+    border-end-end-radius: 2px;
 
     // inner rectangle
     &::after {
       content: '';
       display: block;
-      margin: 0.2 * styles.$base-size;
-      height: 1 * styles.$base-size;
+      margin-block: 0.2 * styles.$base-size;
+      margin-inline: 0.2 * styles.$base-size;
+      block-size: 1 * styles.$base-size;
       background-color: awsui.$color-background-container-content;
       opacity: 0.5;
     }
   }
 
   &--dashed {
-    height: 0.4 * styles.$base-size;
-    width: 0.6 * styles.$base-size;
+    block-size: 0.4 * styles.$base-size;
+    inline-size: 0.6 * styles.$base-size;
     // same margins as in filled marker + half the difference in their size
-    margin-top: 0.9 * styles.$base-size;
-    margin-right: 1.2 * styles.$base-size;
+    margin-block-start: 0.9 * styles.$base-size;
+    margin-inline-end: 1.2 * styles.$base-size;
 
     &::after {
       content: '';
       display: block;
-      width: 0.6 * styles.$base-size;
-      height: 0.4 * styles.$base-size;
-      margin-left: 0.8 * styles.$base-size;
-      border-radius: 2px;
+      inline-size: 0.6 * styles.$base-size;
+      block-size: 0.4 * styles.$base-size;
+      margin-inline-start: 0.8 * styles.$base-size;
+      border-start-start-radius: 2px;
+      border-start-end-radius: 2px;
+      border-end-start-radius: 2px;
+      border-end-end-radius: 2px;
       background-color: inherit;
     }
   }

package/lib/internal/scss/internal/components/chart-wrapper/styles.scss

@@ -12,7 +12,7 @@
   display: block;
 
   &--fit-height {
-    height: 100%;
+    block-size: 100%;
     overflow-y: auto;
   }
 }
@@ -21,7 +21,7 @@
   &--fit-height {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    block-size: 100%;
   }
 }
 
@@ -39,11 +39,11 @@
 }
 
 .content--reserve-filter {
-  margin-top: calc(2 * #{awsui.$line-height-body-m});
+  margin-block-start: calc(2 * #{awsui.$line-height-body-m});
 }
 
 .content--reserve-legend {
-  margin-bottom: calc(2 * #{awsui.$line-height-body-m});
+  margin-block-end: calc(2 * #{awsui.$line-height-body-m});
 }
 
 .content--fit-height {

package/lib/internal/scss/internal/components/checkbox-icon/styles.scss

@@ -8,10 +8,10 @@
 
 .root {
   position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 
   > .styled-box {
     fill: awsui.$color-background-control-default;

package/lib/internal/scss/internal/components/dropdown/styles.scss

@@ -46,10 +46,11 @@
     // HACK: because of the issues with IE's box shadow rendering we draw
     // a border and don't mind the pixel fitting
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      border: styles.$control-border-width solid awsui.$color-border-container-top;
+      border-block: styles.$control-border-width solid awsui.$color-border-container-top;
+      border-inline: styles.$control-border-width solid awsui.$color-border-container-top;
     }
 
-    border-bottom: none;
+    border-block-end: none;
 
     // Don't show dropdown border when there's no dropdown content
     &.is-empty::after {
@@ -64,28 +65,28 @@
     }
 
     &.with-limited-width > .dropdown-content-wrapper {
-      border-top: none;
+      border-block-start: none;
     }
   }
   &-drop-left {
-    right: 0;
+    inset-inline-end: 0;
   }
   &-drop-right {
-    left: 0;
+    inset-inline-start: 0;
   }
   &.occupy-entire-width {
-    min-width: 100%;
+    min-inline-size: 100%;
   }
   &.stretch-beyond-trigger-width {
-    width: max-content;
-    max-width: var(#{custom-props.$dropdownDefaultMaxWidth}, 100%);
+    inline-size: max-content;
+    max-inline-size: var(#{custom-props.$dropdownDefaultMaxWidth}, 100%);
   }
   &.hide-upper-border > .dropdown-content-wrapper {
-    border-top: none;
+    border-block-start: none;
   }
   &.interior > .dropdown-content-wrapper {
-    margin-top: -1px;
-    border-top: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
+    margin-block-start: -1px;
+    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-container-top;
   }
   &.open {
     display: block;
@@ -108,9 +109,9 @@
 .dropdown-content {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .stretch-trigger-height {
-  height: 100%;
+  block-size: 100%;
 }

package/lib/internal/scss/internal/components/dropdown-footer/styles.scss

@@ -10,11 +10,11 @@
   @include styles.styles-reset;
 
   &:not(.hidden) {
-    border-top: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-item-default;
+    border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-item-default;
 
     // Hide border if there are no options (visual-refresh)
     &.no-items {
-      border-top: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-item-top;
+      border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-dropdown-item-top;
     }
   }
 }

package/lib/internal/scss/internal/components/dropdown-status/styles.scss

@@ -8,8 +8,9 @@
 
 .root {
   @include styles.styles-reset;
-  padding: styles.$option-padding-vertical styles.$control-padding-horizontal
-    calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs});
+  padding-block-start: styles.$option-padding-vertical;
+  padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs});
+  padding-inline: styles.$control-padding-horizontal;
   color: awsui.$color-text-dropdown-footer;
 
   > .recovery {

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

@@ -14,20 +14,24 @@
 }
 
 .token {
-  border: awsui.$border-field-width solid constants.$token-border-color;
+  border-block: awsui.$border-field-width solid constants.$token-border-color;
+  border-inline: awsui.$border-field-width solid constants.$token-border-color;
   display: flex;
   align-items: stretch;
   background: constants.$token-background;
-  border-radius: awsui.$border-radius-token;
+  border-start-start-radius: awsui.$border-radius-token;
+  border-start-end-radius: awsui.$border-radius-token;
+  border-end-start-radius: awsui.$border-radius-token;
+  border-end-end-radius: awsui.$border-radius-token;
   color: awsui.$color-text-body-default;
-  height: 100%;
+  block-size: 100%;
   box-sizing: border-box;
 }
 
 .show-operation {
-  border-left: none;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-inline-start: none;
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
 }
 
 .select {
@@ -35,17 +39,21 @@
 }
 
 .token-content {
-  padding: styles.$control-padding-vertical styles.$control-padding-horizontal;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: styles.$control-padding-horizontal;
 }
 
 .dismiss-button {
-  width: 30px;
-  margin: 0;
-  border: none;
-  padding: 0 awsui.$space-xxs;
+  inline-size: 30px;
+  margin-block: 0;
+  margin-inline: 0;
+  border-block: none;
+  border-inline: none;
+  padding-block: 0;
+  padding-inline: awsui.$space-xxs;
   color: awsui.$color-text-interactive-default;
   background-color: transparent;
-  border-left: styles.$control-border-width solid constants.$token-border-color;
+  border-inline-start: styles.$control-border-width solid constants.$token-border-color;
 
   @include focus-visible.when-visible {
     @include styles.focus-highlight(awsui.$space-filtering-token-dismiss-button-focus-outline-gutter);

package/lib/internal/scss/internal/components/handle/styles.scss

@@ -10,9 +10,12 @@
 .handle {
   appearance: none;
   background: transparent;
-  border: none;
-  padding: 0 awsui.$space-scaled-xxxs;
-  margin: 0 awsui.$space-scaled-xxs;
+  border-block: none;
+  border-inline: none;
+  padding-block: 0;
+  padding-inline: awsui.$space-scaled-xxxs;
+  margin-block: 0;
+  margin-inline: awsui.$space-scaled-xxs;
 
   color: awsui.$color-text-interactive-default;
 

package/lib/internal/scss/internal/components/menu-dropdown/styles.scss

@@ -17,13 +17,13 @@
   align-items: center;
   white-space: nowrap;
 
-  height: 100%;
-  padding-left: awsui.$space-xs;
-  padding-right: awsui.$space-xs;
+  block-size: 100%;
+  padding-inline: awsui.$space-xs;
   text-decoration: none;
   cursor: pointer;
 
-  border: transparent;
+  border-block: transparent;
+  border-inline: transparent;
   background: transparent;
   color: awsui.$color-text-interactive-default;
 
@@ -48,15 +48,15 @@
   }
 
   &.offset-right-none {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 
   &.offset-right-l {
-    margin-right: awsui.$space-s;
+    margin-inline-end: awsui.$space-s;
   }
 
   &.offset-right-xxl {
-    margin-right: awsui.$space-xl;
+    margin-inline-end: awsui.$space-xl;
   }
 
   @include focus-visible.when-visible {
@@ -66,9 +66,9 @@
 }
 
 .text {
-  margin-right: awsui.$space-xs;
+  margin-inline-end: awsui.$space-xs;
 }
 
 .icon + .text {
-  margin-left: awsui.$space-xs;
+  margin-inline-start: awsui.$space-xs;
 }

package/lib/internal/scss/internal/components/option/styles.scss

@@ -12,9 +12,9 @@
 
   display: flex;
   align-items: flex-start;
-  width: 100%;
+  inline-size: 100%;
   // Hack to truncate flex boxes
-  min-width: 0;
+  min-inline-size: 0;
   box-sizing: border-box;
   color: inherit;
 
@@ -30,11 +30,11 @@
 }
 
 .content {
-  width: 100%;
+  inline-size: 100%;
   display: flex;
   flex-direction: column;
   // Hack to truncate flex boxes
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .label-content {
@@ -59,9 +59,9 @@
 }
 
 .label-tag {
-  padding-left: awsui.$space-s;
+  padding-inline-start: awsui.$space-s;
   flex: auto;
-  text-align: right;
+  text-align: end;
 
   &:empty {
     display: none;
@@ -89,18 +89,18 @@
 }
 
 .tag:not(:last-child) {
-  padding-right: awsui.$space-m;
+  padding-inline-end: awsui.$space-m;
 }
 
 .icon {
-  padding-right: awsui.$space-xs;
+  padding-inline-end: awsui.$space-xs;
   align-content: center;
   display: flex;
   flex-shrink: 0;
 }
 
 .icon-size-big {
-  padding-top: awsui.$space-option-icon-big-top;
+  padding-block-start: awsui.$space-option-icon-big-top;
 }
 
 .filtering-match-highlight {