@cloudscape-design/components-themeable 3.0.534 → 3.0.535

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "41a2e0e1f201171f2162e13518d052010c254cba"
+  "commit": "108c3901c92b32438a703f4ffc4dd4c66efd5238"
 }

package/lib/internal/scss/grid/styles.scss

@@ -15,23 +15,26 @@ $grid-gutter-width: awsui.$space-grid-gutter;
   @include styles.styles-reset;
   display: flex;
   flex-wrap: wrap;
-  margin: calc(#{$grid-gutter-width} / -2);
+  margin-block: calc(#{$grid-gutter-width} / -2);
+  margin-inline: calc(#{$grid-gutter-width} / -2);
   pointer-events: none;
 
   &.no-gutters {
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
   }
 }
 
 .grid-column {
   box-sizing: border-box;
   position: relative;
-  padding: calc(#{$grid-gutter-width} / 2);
-
+  padding-block: calc(#{$grid-gutter-width} / 2);
+  padding-inline: calc(#{$grid-gutter-width} / 2);
   display: flex;
 
   .grid.no-gutters > & {
-    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
   }
 
   @for $i from 1 through $grid-columns {
@@ -40,24 +43,24 @@ $grid-gutter-width: awsui.$space-grid-gutter;
       // Add a `max-width` to ensure content within each column does not blow out
       // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
       // do not appear to require this.
-      max-width: math.percentage(math.div($i, $grid-columns));
+      max-inline-size: math.percentage(math.div($i, $grid-columns));
     }
 
     &.push-#{$i} {
-      left: math.percentage(math.div($i, $grid-columns));
+      inset-inline-start: math.percentage(math.div($i, $grid-columns));
     }
 
     &.pull-#{$i} {
-      right: math.percentage(math.div($i, $grid-columns));
+      inset-inline-end: math.percentage(math.div($i, $grid-columns));
     }
   }
 
   &.push-0 {
-    left: auto;
+    inset-inline-start: auto;
   }
 
   &.pull-0 {
-    right: auto;
+    inset-inline-end: auto;
   }
 
   // `$grid-columns - 1` because offsetting by the width of an entire row isn't possible
@@ -65,7 +68,7 @@ $grid-gutter-width: awsui.$space-grid-gutter;
     // Avoid emitting useless .offset-0
     @if $i != 0 {
       &.offset-#{$i} {
-        margin-left: math.percentage(math.div($i, $grid-columns));
+        margin-inline-start: math.percentage(math.div($i, $grid-columns));
       }
     }
   }
@@ -73,5 +76,5 @@ $grid-gutter-width: awsui.$space-grid-gutter;
 
 .restore-pointer-events {
   pointer-events: auto;
-  width: 100%;
+  inline-size: 100%;
 }

package/lib/internal/scss/header/styles.scss

@@ -14,7 +14,7 @@
   @include styles.styles-reset();
   cursor: inherit;
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   flex-wrap: wrap;
   justify-content: space-between;
 
@@ -27,13 +27,13 @@
   &-has-description {
     &.root-variant-h2:not(.refresh),
     &.root-variant-h3:not(.refresh) {
-      padding-bottom: awsui.$space-scaled-xxs;
+      padding-block-end: awsui.$space-scaled-xxs;
     }
   }
 
   &-no-actions:not(.root-has-description):not(.refresh) {
     // Make sure the header is just as high without actions
-    padding-bottom: calc(#{awsui.$space-scaled-xs} + #{awsui.$space-xxxs});
+    padding-block-end: calc(#{awsui.$space-scaled-xs} + #{awsui.$space-xxxs});
   }
 
   &-no-actions.refresh {
@@ -50,21 +50,21 @@
   // H3s are most often used inside containers, so minimal headings have extra padding below
   // to prevent info links from having overlapping touch targets with surrounding elements.
   &-no-actions:not(.root-has-description).refresh.root-variant-h3 {
-    padding-bottom: awsui.$space-scaled-xs;
+    padding-block-end: awsui.$space-scaled-xs;
   }
 
   &.root-variant-h1.root-has-description:not(.refresh) {
-    padding-bottom: awsui.$space-scaled-2x-xxs;
+    padding-block-end: awsui.$space-scaled-2x-xxs;
   }
 }
 
 .main {
   // Like styles.text-flex-wrapping, but without overflow: hidden, to prevent headings from being partially cut off.
   word-wrap: break-word;
-  max-width: 100%;
+  max-inline-size: 100%;
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  inline-size: 100%;
   flex-wrap: wrap;
   column-gap: awsui.$space-xs;
   row-gap: calc(#{awsui.$space-scaled-xxs} + #{awsui.$space-scaled-xxxs});
@@ -92,7 +92,7 @@
   // https://github.com/philipwalton/flexbugs/issues/170
   display: flex;
   align-items: flex-start;
-  min-height: awsui.$size-vertical-input;
+  min-block-size: awsui.$size-vertical-input;
 
   // we can align actions to center in most cases, cause if the header is too long, actions will wrap the first.
   // exception is Modal header, where __disableActionsWrapping makes header text wrap to multiple lines, shifting the close button
@@ -103,25 +103,30 @@
   // Calculate padding so the heading text is better aligned with the buttons.
   // Can't align-items: middle because we want buttons to stay at the top of the container when text wraps to multiple lines.
   &-variant-h1.refresh {
-    padding: calc((#{awsui.$line-height-heading-xl} - #{awsui.$size-vertical-input}) / 2) 0;
+    padding-block: calc((#{awsui.$line-height-heading-xl} - #{awsui.$size-vertical-input}) / 2);
+    padding-inline: 0;
   }
   &-variant-h2.refresh {
-    padding: calc((#{awsui.$line-height-heading-l} - #{awsui.$size-vertical-input}) / 2) 0;
+    padding-block: calc((#{awsui.$line-height-heading-l} - #{awsui.$size-vertical-input}) / 2);
+    padding-inline: 0;
   }
   &-variant-h3.refresh {
-    padding: calc((#{awsui.$line-height-heading-m} - #{awsui.$size-vertical-input}) / 2) 0;
+    padding-block: calc((#{awsui.$line-height-heading-m} - #{awsui.$size-vertical-input}) / 2);
+    padding-inline: 0;
   }
 
   &-variant-h1:not(.refresh) {
-    padding: awsui.$space-scaled-xs 0;
+    padding-block: awsui.$space-scaled-xs;
+    padding-inline: 0;
   }
   &-variant-h2:not(.refresh),
   &-variant-h3:not(.refresh) {
-    padding: awsui.$space-scaled-xxs 0;
+    padding-block: awsui.$space-scaled-xxs;
+    padding-inline: 0;
   }
 
   .root-has-description > .main > & {
-    padding-bottom: 0;
+    padding-block-end: 0;
   }
 }
 
@@ -130,46 +135,46 @@
   color: awsui.$color-text-heading-default;
   &-variant-h1 {
     font-size: awsui.$font-size-heading-xl;
-    padding-top: awsui.$space-scaled-2x-xxs;
+    padding-block-start: awsui.$space-scaled-2x-xxs;
     // Use padding rather than center align with min height to avoid having extra bottom space when no actions are present.
     // Having top padding always present ensures that all headers of the same variant start at the same height in the container,
     // whether there are buttons present or not; otherwise configurable dashboard handles are misaligned.
     &.refresh {
-      padding-top: space-heading-button-diff(awsui.$line-height-heading-xl);
+      padding-block-start: space-heading-button-diff(awsui.$line-height-heading-xl);
     }
   }
   &-variant-h2 {
     font-size: awsui.$font-size-heading-l;
     &.refresh {
-      padding-top: space-heading-button-diff(awsui.$line-height-heading-l);
+      padding-block-start: space-heading-button-diff(awsui.$line-height-heading-l);
     }
   }
   &-variant-h3 {
     font-size: awsui.$font-size-heading-m;
     &.refresh {
-      padding-top: space-heading-button-diff(awsui.$line-height-heading-m);
+      padding-block-start: space-heading-button-diff(awsui.$line-height-heading-m);
     }
   }
   &-variant-h2:not(.refresh),
   &-variant-h3:not(.refresh) {
-    padding-top: awsui.$space-scaled-xs;
+    padding-block-start: awsui.$space-scaled-xs;
   }
 
   .no-wrap > &:not(.refresh) {
     // Additional padding to make it the same height as a header with wrapping
-    padding-bottom: calc(#{awsui.$space-scaled-xxs} + #{awsui.$space-scaled-xxxs});
+    padding-block-end: calc(#{awsui.$space-scaled-xxs} + #{awsui.$space-scaled-xxxs});
   }
 }
 
 .root-no-actions.root-has-description > .main > :not(.refresh) {
   &.title-variant-h2,
   &.title-variant-h3 {
-    padding-bottom: awsui.$space-scaled-xxs;
+    padding-block-end: awsui.$space-scaled-xxs;
   }
 }
 
 .root-variant-h1.root-no-actions:not(.root-has-description):not(.refresh) {
-  padding-bottom: awsui.$space-scaled-2x-xxs;
+  padding-block-end: awsui.$space-scaled-2x-xxs;
 }
 
 .virtual-space {
@@ -178,13 +183,15 @@
 
 .info {
   // Space 's' used as it's the smallest value that works in all browsers
-  padding-right: awsui.$space-s;
+  padding-inline-end: awsui.$space-s;
 }
 
 .description {
   // Override built-in styles and global typography from 2.1 for <p> tag
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   color: awsui.$color-text-heading-secondary;
 
   &-variant-h1 {
@@ -194,19 +201,20 @@
     font-size: awsui.$font-header-h2-description-size;
     line-height: awsui.$font-header-h2-description-line-height;
     &:not(.refresh) {
-      padding-bottom: awsui.$space-scaled-xxs;
+      padding-block-end: awsui.$space-scaled-xxs;
     }
   }
   &-variant-h3 {
     @include styles.font-body-s;
     &:not(.refresh) {
-      padding-bottom: awsui.$space-scaled-xxs;
+      padding-block-end: awsui.$space-scaled-xxs;
     }
   }
 }
 
 .heading {
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   // We display heading element inline to achieve the proper line-wrapping with info links
   display: inline;
   font-size: inherit;

package/lib/internal/scss/help-panel/styles.scss

@@ -10,22 +10,29 @@
 .help-panel {
   @include styles.styles-reset;
   word-wrap: break-word;
-  padding: awsui.$space-scaled-l awsui.$space-panel-side-right 0 awsui.$space-panel-side-left;
+  padding-block-start: awsui.$space-scaled-l;
+  padding-block-end: 0;
+  padding-inline-end: awsui.$space-panel-side-right;
+  padding-inline-start: awsui.$space-panel-side-left;
 
   hr {
-    border: none;
-    border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-    margin: awsui.$space-scaled-xl calc(-1 * #{awsui.$space-xs});
+    border-block: none;
+    border-inline: none;
+    border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    margin-block: awsui.$space-scaled-xl;
+    margin-inline: calc(-1 * #{awsui.$space-xs});
   }
 
   ol,
   ul {
-    padding-left: awsui.$space-l;
+    padding-inline-start: awsui.$space-l;
     list-style-position: outside;
-    margin: awsui.$space-s 0;
+    margin-block: awsui.$space-s;
+    margin-inline: 0;
   }
   li {
-    margin: awsui.$space-scaled-xxs 0;
+    margin-block: awsui.$space-scaled-xxs;
+    margin-inline: 0;
   }
 
   a,
@@ -35,9 +42,9 @@
   h5,
   pre,
   code {
-    margin: awsui.$space-xs 0;
-    padding-top: 0;
-    padding-bottom: 0;
+    margin-block: awsui.$space-xs;
+    margin-inline: 0;
+    padding-block: 0;
   }
 
   code {
@@ -46,23 +53,26 @@
 
   pre {
     @include styles.code-highlight;
-    padding: awsui.$space-xxs;
+    padding-block: awsui.$space-xxs;
+    padding-inline: awsui.$space-xxs;
   }
 
   dl {
-    margin: awsui.$space-s 0;
+    margin-block: awsui.$space-s;
+    margin-inline: 0;
     /* stylelint-disable-next-line selector-max-universal */
     * {
-      margin-top: 0;
-      margin-bottom: 0;
+      margin-block: 0;
     }
   }
   dt {
-    margin-top: awsui.$space-xs;
+    margin-block-start: awsui.$space-xs;
     font-weight: styles.$font-weight-bold;
   }
   dd {
-    margin: 0 0 awsui.$space-xs;
+    margin-block-start: 0;
+    margin-block-end: awsui.$space-xs;
+    margin-inline: 0;
   }
 
   h2,
@@ -70,19 +80,20 @@
   h4,
   h5,
   h6 {
-    margin-top: awsui.$space-xl;
+    margin-block-start: awsui.$space-xl;
     color: awsui.$color-text-heading-default;
   }
   // sets padding at the bottom of the panel
   & > :last-child {
-    margin-bottom: awsui.$space-scaled-xxxl;
+    margin-block-end: awsui.$space-scaled-xxxl;
   }
 
   // add basic font-sizes
   p {
     color: inherit;
     text-decoration: none;
-    margin: awsui.$space-s 0;
+    margin-block: awsui.$space-s;
+    margin-inline: 0;
   }
   h1 {
     @include styles.font-heading-xl;
@@ -107,24 +118,25 @@
   .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: none;
-    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: none;
+    border-inline: none;
+    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,
     h4,
     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;
     }
   }
 }
@@ -137,7 +149,7 @@
   h4:first-child,
   h5:first-child,
   h6:first-child {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 
   a {
@@ -147,15 +159,17 @@
 
 .footer {
   color: awsui.$color-text-body-secondary;
-  border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
-  margin: awsui.$space-scaled-xl calc(-1 * #{awsui.$space-xs});
-  padding: 0 awsui.$space-s;
+  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin-block: awsui.$space-scaled-xl;
+  margin-inline: calc(-1 * #{awsui.$space-xs});
+  padding-block: 0;
+  padding-inline: awsui.$space-s;
   > :first-child {
-    margin-top: awsui.$space-scaled-xl;
+    margin-block-start: awsui.$space-scaled-xl;
   }
   ul {
     list-style: none;
-    padding-left: 0;
+    padding-inline-start: 0;
   }
   a {
     @include styles.link-default;

package/lib/internal/scss/hotspot/styles.scss

@@ -21,19 +21,19 @@
 .markerWrapper {
   position: absolute;
 
-  top: 0;
+  inset-block-start: 0;
 }
 
 .placement-right {
-  left: 100%;
-  margin-left: awsui.$space-xxs;
+  inset-inline-start: 100%;
+  margin-inline-start: awsui.$space-xxs;
 }
 
 .placement-left {
-  right: 100%;
-  margin-right: awsui.$space-xxs;
+  inset-inline-end: 100%;
+  margin-inline-end: awsui.$space-xxs;
 }
 
 .inlineWrapper {
-  margin-left: awsui.$space-xxs;
+  margin-inline-start: awsui.$space-xxs;
 }

package/lib/internal/scss/icon/mixins.scss

@@ -61,17 +61,18 @@ $_icon-sizes: (
     $padding: calc((#{$supportedLineHeight} - #{$size}) / 2);
 
     &.size-#{$name} {
-      width: $size;
+      inline-size: $size;
       box-sizing: border-box;
       &-mapped-height {
-        height: $supportedLineHeight;
-        padding: $padding 0;
+        block-size: $supportedLineHeight;
+        padding-block: $padding;
+        padding-inline: 0;
       }
 
       > svg,
       > img {
-        width: $size;
-        height: $size;
+        inline-size: $size;
+        block-size: $size;
         vertical-align: top;
       }
 

package/lib/internal/scss/icon/styles.scss

@@ -32,10 +32,13 @@
 .badge::after {
   content: '';
   position: absolute;
-  width: 6px;
-  height: 6px;
-  border-radius: 4px;
+  inline-size: 6px;
+  block-size: 6px;
+  border-start-start-radius: 4px;
+  border-start-end-radius: 4px;
+  border-end-start-radius: 4px;
+  border-end-end-radius: 4px;
   background-color: awsui.$color-background-badge-icon;
-  top: 0px;
-  right: -3px;
+  inset-block-start: 0px;
+  inset-inline-end: -3px;
 }

package/lib/internal/scss/input/styles.scss

@@ -39,17 +39,22 @@
 
 .input {
   @include styles.styles-reset;
-  padding: styles.$control-padding;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: styles.$control-padding-horizontal;
   color: awsui.$color-text-body-default;
-  width: 100%;
+  inline-size: 100%;
   cursor: text;
   box-sizing: border-box;
   background-color: awsui.$color-background-input-default;
-  border-radius: styles.$control-border-radius;
-  border: styles.$control-border-width solid awsui.$color-border-input-default;
+  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;
   @include styles.font-body-m;
   // IE requires input height to be explicitly set
-  height: awsui.$size-vertical-input;
+  block-size: awsui.$size-vertical-input;
 
   &.input-readonly {
     @include styles.form-readonly-element;
@@ -79,7 +84,7 @@
   &.input-invalid {
     @include styles.form-invalid-control();
     &.input-has-icon-left {
-      padding-left: calc(
+      padding-inline-start: calc(
         #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{styles.$control-border-width})
       );
     }
@@ -104,13 +109,16 @@
     }
   }
   &.input-has-icon-left {
-    padding-left: styles.$control-icon-horizontal-padding;
+    padding-inline-start: styles.$control-icon-horizontal-padding;
   }
   &.input-has-icon-right {
-    padding-right: styles.$control-icon-horizontal-padding;
+    padding-inline-end: styles.$control-icon-horizontal-padding;
   }
   &.input-has-no-border-radius {
-    border-radius: awsui.$border-radius-dropdown;
+    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;
   }
 }
 
@@ -122,14 +130,14 @@
 .input-icon-left {
   position: absolute;
   pointer-events: none;
-  left: styles.$control-icon-horizontal-offset;
-  top: styles.$control-icon-vertical-offset;
+  inset-inline-start: styles.$control-icon-horizontal-offset;
+  inset-block-start: styles.$control-icon-vertical-offset;
 }
 
 .input-icon-right {
   position: absolute;
-  top: styles.$control-icon-vertical-offset;
-  right: calc(#{styles.$control-icon-horizontal-offset} - #{awsui.$space-xxs});
+  inset-block-start: styles.$control-icon-vertical-offset;
+  inset-inline-end: calc(#{styles.$control-icon-horizontal-offset} - #{awsui.$space-xxs});
 }
 
 .input-button-right {

package/lib/internal/scss/internal/components/abstract-switch/styles.scss

@@ -47,19 +47,19 @@
   @include styles.text-wrapping;
 }
 .empty-content {
-  width: 0px;
+  inline-size: 0px;
 }
 
 .description {
   @include styles.form-control-description;
   &-bottom-padding {
-    padding-bottom: awsui.$space-scaled-xxs;
+    padding-block-end: awsui.$space-scaled-xxs;
   }
 }
 
 .label,
 .description {
-  padding-left: awsui.$space-xs;
+  padding-inline-start: awsui.$space-xs;
   &-disabled {
     color: awsui.$color-text-control-disabled;
   }
@@ -72,17 +72,18 @@
   & > svg,
   & > .outline {
     position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    inset-block-start: 0;
+    inset-inline-start: 0;
   }
   & > input {
     opacity: 0;
     z-index: 1;
     user-select: none;
     cursor: default;
-    margin: 0;
+    margin-block: 0;
+    margin-inline: 0;
   }
 }
 /* stylelint-enable selector-max-type */