@cloudscape-design/components-themeable 3.0.530 → 3.0.532

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "b4da3b8e1a16b4eb746e1f603dce3b49175c633d"
+  "commit": "2607709e89c50b171f1cc3ec919ef2905ba9f4b0"
 }

package/lib/internal/scss/pagination/styles.scss

@@ -14,15 +14,17 @@
   flex-wrap: wrap;
   box-sizing: border-box;
   //reset base styles for ul
-  padding-left: 0;
-  margin: 0;
+  padding-inline-start: 0;
+  margin-block: 0;
+  margin-inline: 0;
   list-style: none;
 }
 
 .button,
 .dots {
-  min-width: awsui.$space-l;
-  border: styles.$control-border-width solid transparent;
+  min-inline-size: awsui.$space-l;
+  border-block: styles.$control-border-width solid transparent;
+  border-inline: styles.$control-border-width solid transparent;
 }
 
 .button {
@@ -31,7 +33,8 @@
   box-sizing: border-box;
   background: transparent;
   line-height: inherit;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
 
   &:focus {
     outline: none;
@@ -81,15 +84,17 @@
 
 .page-item,
 .dots {
-  margin: styles.$control-padding-vertical awsui.$space-xxs;
+  margin-block: styles.$control-padding-vertical;
+  margin-inline: awsui.$space-xxs;
   text-align: center;
   box-sizing: border-box;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   &:first-child {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   &:last-child {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
 }
 

package/lib/internal/scss/pie-chart/styles.scss

@@ -19,17 +19,17 @@
       $sizes: map.get(constants.$pie-chart-sizes, $size);
       $fitSizes: map.get(constants.$pie-chart-sizes-fit-height, $size);
 
-      min-height: calc(
+      min-block-size: calc(
         2 * (#{map.get($sizes, 'radius')} + #{map.get($sizes, 'innerPadding')} + #{map.get($sizes, 'labelPadding')})
       );
       &.content--fit-height {
-        min-height: calc(2 * (#{map.get($fitSizes, 'radius')} + #{map.get($fitSizes, 'labelPadding')}));
+        min-block-size: calc(2 * (#{map.get($fitSizes, 'radius')} + #{map.get($fitSizes, 'labelPadding')}));
       }
 
       &.content--without-labels {
-        min-height: calc(2 * (#{map.get($sizes, 'radius')} + #{map.get($sizes, 'innerPadding')}));
+        min-block-size: calc(2 * (#{map.get($sizes, 'radius')} + #{map.get($sizes, 'innerPadding')}));
         &.content--fit-height {
-          min-height: calc(2 * (#{map.get($fitSizes, 'radius')}));
+          min-block-size: calc(2 * (#{map.get($fitSizes, 'radius')}));
         }
       }
     }
@@ -49,8 +49,8 @@
   flex: 1;
 
   &--fit-height {
-    height: 100%;
-    min-height: inherit;
+    block-size: 100%;
+    min-block-size: inherit;
   }
 }
 
@@ -60,10 +60,7 @@
   &--fit-height {
     display: block;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
   }
 }
 
@@ -74,10 +71,7 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
+  inset: 0;
   pointer-events: none;
 }
 
@@ -121,7 +115,7 @@
 
   /* stylelint-disable-next-line selector-max-type */
   > div {
-    margin-top: -0.75em;
+    margin-block-start: -0.75em;
   }
 
   &.label--dimmed {
@@ -131,7 +125,7 @@
   &.label--align-right {
     /* stylelint-disable-next-line selector-max-type */
     > div {
-      text-align: right;
+      text-align: end;
     }
   }
 }

package/lib/internal/scss/popover/arrow.scss

@@ -26,31 +26,32 @@
   $arrow-width: 20px;
   $arrow-height: $arrow-width * 0.5;
 
-  width: $arrow-width;
-  height: $arrow-height;
+  inline-size: $arrow-width;
+  block-size: $arrow-height;
 
   &-outer,
   &-inner {
     position: absolute;
     overflow: hidden;
-    width: $arrow-width;
-    height: $arrow-height;
+    inline-size: $arrow-width;
+    block-size: $arrow-height;
 
-    top: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline-start: 0;
 
     &::after {
       content: '';
       box-sizing: border-box;
       display: inline-block;
       position: absolute;
-      border-radius: 2px 0 0 0;
-
-      bottom: 0;
-      left: 0;
-
-      width: $arrow-edge-length;
-      height: $arrow-edge-length;
+      border-start-start-radius: 2px;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+      inset-block-end: 0;
+      inset-inline-start: 0;
+      inline-size: $arrow-edge-length;
+      block-size: $arrow-edge-length;
       transform: rotate(45deg);
       transform-origin: 0 100%;
     }
@@ -63,14 +64,17 @@
   }
 
   &-inner {
-    top: 2px;
+    inset-block-start: 2px;
 
     &.refresh {
-      top: 3px;
+      inset-block-start: 3px;
     }
 
     &::after {
-      border-radius: 1px 0 0 0;
+      border-start-start-radius: 1px;
+      border-start-end-radius: 0;
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
       background-color: awsui.$color-background-popover;
     }
   }

package/lib/internal/scss/popover/body.scss

@@ -10,7 +10,8 @@
   @include styles.styles-reset;
   @include styles.text-flex-wrapping;
 
-  padding: awsui.$space-s awsui.$space-m;
+  padding-block: awsui.$space-s;
+  padding-inline: awsui.$space-m;
 
   &-overflow-visible {
     overflow: visible;
@@ -23,9 +24,9 @@
 }
 
 .dismiss {
-  margin: calc(-1 * (#{awsui.$space-scaled-xxs} + #{awsui.$border-field-width}))
-    calc(-1 * (#{awsui.$space-xxs} + #{awsui.$border-field-width}));
-  margin-left: 0;
+  margin-block: calc(-1 * (#{awsui.$space-scaled-xxs} + #{awsui.$border-field-width}));
+  margin-inline-start: 0;
+  margin-inline-end: calc(-1 * (#{awsui.$space-xxs} + #{awsui.$border-field-width}));
   flex: 0 0 auto;
   order: 1;
 }
@@ -35,7 +36,7 @@
 }
 
 .header-row {
-  margin-bottom: awsui.$space-xs;
+  margin-block-end: awsui.$space-xs;
 }
 
 .header {
@@ -55,7 +56,7 @@
   @include styles.text-flex-wrapping;
   color: awsui.$color-text-body-secondary;
   flex: 1 1 auto;
-  min-width: 0;
+  min-inline-size: 0;
   &-overflow-visible {
     overflow: visible;
   }

package/lib/internal/scss/popover/container.scss

@@ -9,19 +9,21 @@
 .container {
   display: inline-block;
   position: fixed;
-  top: -9999px;
-  left: -9999px;
+  inset-block-start: -9999px;
+  inset-inline-start: -9999px;
   z-index: 2000;
 }
 
 .container-body {
   @include styles.styles-reset;
-
-  border-radius: awsui.$border-radius-popover;
-
+  border-start-start-radius: awsui.$border-radius-popover;
+  border-start-end-radius: awsui.$border-radius-popover;
+  border-end-start-radius: awsui.$border-radius-popover;
+  border-end-end-radius: awsui.$border-radius-popover;
   background-color: awsui.$color-background-popover;
   box-shadow: awsui.$shadow-popover;
-  border: awsui.$border-field-width solid awsui.$color-border-popover;
+  border-block: awsui.$border-field-width solid awsui.$color-border-popover;
+  border-inline: awsui.$border-field-width solid awsui.$color-border-popover;
 }
 
 .container-body-variant-annotation {
@@ -30,27 +32,27 @@
 }
 
 .container-body-size-small {
-  max-width: 210px;
+  max-inline-size: 210px;
   &.fixed-width {
-    width: 210px;
+    inline-size: 210px;
   }
 }
 
 .container-body-size-medium {
-  max-width: 310px;
+  max-inline-size: 310px;
   &.fixed-width {
-    width: 310px;
+    inline-size: 310px;
   }
 }
 
 .container-body-size-large {
-  max-width: 480px;
+  max-inline-size: 480px;
   @media (max-width: 480px) {
     // On viewports smaller than 480px, we default to the body-size-medium width
-    max-width: 310px;
+    max-inline-size: 310px;
   }
   &.fixed-width {
-    width: 480px;
+    inline-size: 480px;
   }
 }
 
@@ -69,13 +71,13 @@
   }
 
   &-position-right-top {
-    top: calc(#{$arrow-offset} + #{$arrow-height});
-    left: 0;
+    inset-block-start: calc(#{$arrow-offset} + #{$arrow-height});
+    inset-inline-start: 0;
   }
 
   &-position-right-bottom {
-    bottom: $arrow-offset;
-    left: 0;
+    inset-block-end: $arrow-offset;
+    inset-inline-start: 0;
   }
 
   &-position-left-top,
@@ -85,13 +87,13 @@
   }
 
   &-position-left-top {
-    top: calc(#{$arrow-offset} + #{$arrow-height});
-    right: 0;
+    inset-block-start: calc(#{$arrow-offset} + #{$arrow-height});
+    inset-inline-end: 0;
   }
 
   &-position-left-bottom {
-    bottom: $arrow-offset;
-    right: 0;
+    inset-block-end: $arrow-offset;
+    inset-inline-end: 0;
   }
 
   &-position-top-center,
@@ -103,32 +105,32 @@
   }
 
   &-position-top-center {
-    bottom: -$arrow-width * 0.5;
-    left: calc(50% - #{$arrow-height});
+    inset-block-end: -$arrow-width * 0.5;
+    inset-inline-start: calc(50% - #{$arrow-height});
   }
 
   &-position-top-right {
-    bottom: -$arrow-width * 0.5;
-    left: $arrow-offset;
+    inset-block-end: -$arrow-width * 0.5;
+    inset-inline-start: $arrow-offset;
   }
 
   &-position-top-left {
-    bottom: -$arrow-width * 0.5;
-    left: calc(100% - #{$arrow-width} - #{$arrow-offset});
+    inset-block-end: -$arrow-width * 0.5;
+    inset-inline-start: calc(100% - #{$arrow-width} - #{$arrow-offset});
   }
 
   &-position-bottom-center {
-    top: -$arrow-width * 0.5;
-    left: calc(50% - #{$arrow-height});
+    inset-block-start: -$arrow-width * 0.5;
+    inset-inline-start: calc(50% - #{$arrow-height});
   }
 
   &-position-bottom-right {
-    top: -$arrow-width * 0.5;
-    left: $arrow-offset;
+    inset-block-start: -$arrow-width * 0.5;
+    inset-inline-start: $arrow-offset;
   }
 
   &-position-bottom-left {
-    top: -$arrow-width * 0.5;
-    left: calc(100% - #{$arrow-width} - #{$arrow-offset});
+    inset-block-start: -$arrow-width * 0.5;
+    inset-inline-start: calc(100% - #{$arrow-width} - #{$arrow-offset});
   }
 }

package/lib/internal/scss/popover/styles.scss

@@ -19,19 +19,22 @@
 
 .trigger {
   display: inline-block;
-  max-width: 100%;
+  max-inline-size: 100%;
   color: inherit;
   text-align: inherit;
 }
 
 .trigger-type-text {
-  border: 0;
-  margin: 0;
-  padding: 0;
+  border-block: 0;
+  border-inline: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   background-color: transparent;
 
   cursor: pointer;
-  border-bottom: awsui.$border-divider-list-width dashed currentColor;
+  border-block-end: awsui.$border-divider-list-width dashed currentColor;
 
   &:focus {
     outline: none;

package/lib/internal/scss/progress-bar/styles.scss

@@ -12,7 +12,7 @@
 }
 
 .with-result-button {
-  padding-right: awsui.$space-m;
+  padding-inline-end: awsui.$space-m;
 }
 
 .result-text {
@@ -27,7 +27,8 @@
 }
 .result-button {
   display: inline-block;
-  margin: awsui.$space-scaled-xxs 0;
+  margin-block: awsui.$space-scaled-xxs;
+  margin-inline: 0;
 }
 
 .word-wrap {
@@ -42,7 +43,7 @@
   &-key-value {
     @include styles.font-label;
     color: awsui.$color-text-label;
-    margin-bottom: awsui.$space-scaled-xxxs;
+    margin-block-end: awsui.$space-scaled-xxxs;
   }
 }
 
@@ -53,15 +54,15 @@
 .progress-container {
   display: flex;
   align-items: center;
-  max-width: 800px;
-  height: awsui.$line-height-body-m;
+  max-inline-size: 800px;
+  block-size: awsui.$line-height-body-m;
 }
 
 .percentage-container {
-  width: 3.3 * styles.$base-size;
+  inline-size: 3.3 * styles.$base-size;
   flex-shrink: 0;
   white-space: nowrap;
-  text-align: right;
+  text-align: end;
   @include styles.font(body-s);
 }
 
@@ -70,14 +71,21 @@
 }
 
 @mixin general-progress-background-style {
-  height: 0.4 * styles.$base-size;
-  border: 0 none;
+  block-size: 0.4 * styles.$base-size;
+  border-block: 0;
+  border-inline: none;
   box-sizing: border-box;
-  border-radius: 10px;
+  border-start-start-radius: 10px;
+  border-start-end-radius: 10px;
+  border-end-start-radius: 10px;
+  border-end-end-radius: 10px;
 }
 
 @mixin general-progress-bar-style {
-  border-radius: 10px 0px 0px 10px;
+  border-start-start-radius: 10px;
+  border-start-end-radius: 0;
+  border-end-start-radius: 10px;
+  border-end-end-radius: 0;
 }
 
 $background-color: awsui.$color-background-progress-bar-layout-default;
@@ -91,9 +99,9 @@ $bar-color-edge: #0073bb;
 $bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
 
 .progress {
-  width: 100%;
-  margin-right: awsui.$space-s;
-  min-width: 0;
+  inline-size: 100%;
+  margin-inline-end: awsui.$space-s;
+  min-inline-size: 0;
   @include general-progress-background-style;
   background-color: $background-color;
 
@@ -108,7 +116,10 @@ $bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
   }
 
   &.complete::-webkit-progress-value {
-    border-radius: 10px;
+    border-start-start-radius: 10px;
+    border-start-end-radius: 10px;
+    border-end-start-radius: 10px;
+    border-end-end-radius: 10px;
   }
 
   &::-moz-progress-bar {
@@ -119,11 +130,15 @@ $bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
   &::-ms-fill {
     @include general-progress-bar-style;
     background-color: $bar-color-edge;
-    border: none;
+    border-block: none;
+    border-inline: none;
   }
 
   &.complete::-ms-fill {
-    border-radius: 10px;
+    border-start-start-radius: 10px;
+    border-start-end-radius: 10px;
+    border-end-start-radius: 10px;
+    border-end-end-radius: 10px;
   }
 
   &.progress-in-flash {

package/lib/internal/scss/property-filter/styles.scss

@@ -14,7 +14,7 @@
   display: flex;
   align-items: flex-end;
   // The xs breakpoint, minus the table tools container padding
-  max-width: calc(#{styles.$breakpoint-x-small} - 2 * #{awsui.$space-l});
+  max-inline-size: calc(#{styles.$breakpoint-x-small} - 2 * #{awsui.$space-l});
 }
 
 .input-wrapper {
@@ -22,14 +22,15 @@
 }
 
 .add-token {
-  border-left: 1px solid awsui.$color-border-divider-default;
+  border-inline-start: 1px solid awsui.$color-border-divider-default;
   box-sizing: border-box;
-  margin-left: awsui.$space-m;
-  padding-left: awsui.$space-m;
+  margin-inline-start: awsui.$space-m;
+  padding-inline-start: awsui.$space-m;
 }
 
 .tokens {
-  margin: awsui.$space-xs 0;
+  margin-block: awsui.$space-xs;
+  margin-inline: 0;
 }
 
 .token-operator {
@@ -39,21 +40,23 @@
 .property-editor,
 .token-editor {
   user-select: text;
-  margin: awsui.$space-xxs;
+  margin-block: awsui.$space-xxs;
+  margin-inline: awsui.$space-xxs;
+
   &-form {
-    margin-bottom: awsui.$space-scaled-l;
+    margin-block-end: awsui.$space-scaled-l;
   }
   &-field-property {
     /* used in test-utils */
   }
   &-field-operator {
-    margin-top: awsui.$space-scaled-l;
+    margin-block-start: awsui.$space-scaled-l;
   }
   &-field-value {
-    margin-top: awsui.$space-scaled-l;
+    margin-block-start: awsui.$space-scaled-l;
   }
   &-cancel {
-    margin-right: awsui.$space-xs;
+    margin-inline-end: awsui.$space-xs;
   }
   &-submit {
     /* used in test-utils */
@@ -61,20 +64,20 @@
   &-actions {
     display: flex;
     justify-content: flex-end;
-    padding-top: awsui.$space-s;
-    border-top: 1px solid #{awsui.$color-border-dropdown-item-default};
+    padding-block-start: awsui.$space-s;
+    border-block-start: 1px solid #{awsui.$color-border-dropdown-item-default};
   }
 }
 .token-editor {
   &-actions {
     // The below code cancels horizontal padding of the popover and horizontal margin of the token-editor.
-    padding-right: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
-    margin-left: calc(-1 * #{awsui.$space-m} + -1 * #{awsui.$space-xxs});
-    margin-right: calc(-1 * #{awsui.$space-m} + -1 * #{awsui.$space-xxs});
+    padding-inline-end: calc(#{awsui.$space-m} + #{awsui.$space-xxs});
+    margin-inline: calc(-1 * #{awsui.$space-m} + -1 * #{awsui.$space-xxs});
   }
 }
 .property-editor {
-  padding: awsui.$space-m;
+  padding-block: awsui.$space-m;
+  padding-inline: awsui.$space-m;
   overflow-y: auto;
 }
 
@@ -83,7 +86,7 @@
 }
 
 .custom-control {
-  margin-right: awsui.$space-s;
+  margin-inline-end: awsui.$space-s;
 }
 
 .input {
@@ -92,9 +95,8 @@
 
 .results {
   // Align with the filter input's vertical padding and border sizes.
-  padding: calc(#{styles.$control-padding-vertical} + #{styles.$control-border-width});
-  padding-left: 0;
-  padding-right: 0;
+  padding-block: calc(#{styles.$control-padding-vertical} + #{styles.$control-border-width});
+  padding-inline: 0;
 }
 
 .token-trigger {

package/lib/internal/scss/radio-group/styles.scss

@@ -19,11 +19,11 @@ $radio-size: awsui.$size-control;
 }
 
 .radio + .radio {
-  margin-top: awsui.$space-scaled-xxs;
+  margin-block-start: awsui.$space-scaled-xxs;
 }
 
 .radio--has-description + .radio {
-  margin-top: awsui.$space-scaled-xs;
+  margin-block-start: awsui.$space-scaled-xs;
 }
 
 .radio-control {

package/lib/internal/scss/s3-resource-selector/s3-in-context/styles.scss

@@ -21,25 +21,27 @@
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
-  margin: calc(-1 * #{awsui.$space-xs});
+  margin-block: calc(-1 * #{awsui.$space-xs});
+  margin-inline: calc(-1 * #{awsui.$space-xs});
 
   /* stylelint-disable selector-max-universal */
   & > * {
-    margin: awsui.$space-xs;
+    margin-block: awsui.$space-xs;
+    margin-inline: awsui.$space-xs;
   }
   &-uri {
-    min-width: 200px;
+    min-inline-size: 200px;
     flex: 1;
   }
   &-version {
-    max-width: 180px;
-    min-width: 140px;
-    width: 20%;
+    max-inline-size: 180px;
+    min-inline-size: 140px;
+    inline-size: 20%;
   }
   &-divider {
-    height: calc(
+    block-size: calc(
       2 * #{awsui.$border-divider-section-width} + 2 * #{awsui.$space-scaled-xxs} + #{awsui.$line-height-body-m}
     ); // replicate the button layout: 2x border, 2x vertical padding, text line-height
-    border-left: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   }
 }