@cloudscape-design/components-themeable 3.0.462 → 3.0.464

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "4803ce1233aab440ee5e6aafc6e7ca4986af1ce7"
+  "commit": "2d8a5d0a7c624f8464ad1bd45e14e5b89f8fed38"
 }

package/lib/internal/scss/alert/styles.scss

@@ -25,9 +25,13 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
-  border-radius: awsui.$border-radius-alert;
   border: awsui.$border-field-width solid;
-  padding: awsui.$space-alert-vertical awsui.$space-alert-horizontal;
+  border-start-start-radius: awsui.$border-radius-alert;
+  border-start-end-radius: awsui.$border-radius-alert;
+  border-end-start-radius: awsui.$border-radius-alert;
+  border-end-end-radius: awsui.$border-radius-alert;
+  padding-block: awsui.$space-alert-vertical;
+  padding-inline: awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;
 
   &.with-dismiss,
@@ -52,7 +56,7 @@
 
 .action {
   white-space: nowrap;
-  margin-left: awsui.$space-alert-action-left;
+  margin-inline-start: awsui.$space-alert-action-left;
 }
 
 .action-slot,
@@ -73,14 +77,17 @@
 }
 
 .text {
-  min-width: 0;
-  padding: awsui.$border-field-width 0; // To account for vertical misalignment due to button borders
-  margin: awsui.$space-scaled-xxs awsui.$space-xxs;
+  min-inline-size: 0;
+  // To account for vertical misalignment due to button borders
+  padding-block: awsui.$border-field-width;
+  padding-inline: 0;
+  margin-block: awsui.$space-scaled-xxs;
+  margin-inline: awsui.$space-xxs;
   &.icon {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   &.message {
-    margin-right: awsui.$space-alert-message-right;
+    margin-inline-end: awsui.$space-alert-message-right;
   }
 }
 
@@ -88,18 +95,18 @@
   // Below the breakpoint, arrange actions below the content
   > .action {
     grid-row: 2;
-    margin-bottom: awsui.$space-xxs;
+    margin-block-end: awsui.$space-xxs;
   }
 
   // Indent actions according to the size of the alert icon
   &.icon-size-medium > .action {
-    margin-left: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
+    margin-inline-start: calc(#{awsui.$size-icon-medium} + #{awsui.$space-xs});
   }
   &.icon-size-big > .action {
-    margin-left: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
+    margin-inline-start: calc(#{awsui.$size-icon-big} + #{awsui.$space-xs});
   }
   &.icon-size-normal > .action {
-    margin-left: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
+    margin-inline-start: calc(#{awsui.$size-icon-normal} + #{awsui.$space-xs});
   }
 }
 
@@ -108,8 +115,8 @@
 }
 
 .dismiss {
-  margin-right: calc(-1 * #{awsui.$space-xxs});
-  margin-left: awsui.$space-s;
+  margin-inline-end: calc(-1 * #{awsui.$space-xxs});
+  margin-inline-start: awsui.$space-s;
 }
 
 .dismiss-button {

package/lib/internal/scss/anchor-navigation/styles.scss

@@ -16,20 +16,25 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 
 .anchor-list {
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
   position: relative;
   text-indent: 0;
 
   &::before {
     content: '';
     background-color: awsui.$color-border-divider-default;
-    border-radius: awsui.$border-radius-tabs-focus-ring;
-    bottom: $guide-line-offset;
+    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;
+    inset-block-end: $guide-line-offset;
     pointer-events: none;
     position: absolute;
-    top: $guide-line-offset;
-    width: $guide-line-width;
+    inset-block-start: $guide-line-offset;
+    inline-size: $guide-line-width;
   }
 }
 
@@ -42,7 +47,8 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 
   color: awsui.$color-text-body-secondary;
   font-weight: styles.$font-weight-normal;
-  margin: awsui.$space-scaled-xxs 0;
+  margin-block: awsui.$space-scaled-xxs;
+  margin-inline: 0;
 
   &--active {
     position: relative;
@@ -50,12 +56,15 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
     &::before {
       content: '';
       background-color: awsui.$color-text-accent;
-      border-radius: awsui.$border-radius-tabs-focus-ring;
-      bottom: $guide-line-offset;
+      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;
+      inset-block-end: $guide-line-offset;
       pointer-events: none;
       position: absolute;
-      top: $guide-line-offset;
-      width: $guide-line-width;
+      inset-block-start: $guide-line-offset;
+      inline-size: $guide-line-width;
     }
   }
 }
@@ -104,7 +113,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 }
 
 .anchor-link-info {
-  margin-left: awsui.$space-xs;
+  margin-inline-start: awsui.$space-xs;
   @include styles.font-body-s;
   @include styles.font-smoothing;
   font-weight: awsui.$font-button-weight;

package/lib/internal/scss/annotation-context/annotation/arrow.scss

@@ -26,31 +26,33 @@
   $arrow-width: 2 * styles.$base-size;
   $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,10 +65,13 @@
   }
 
   &-inner {
-    top: 2px;
+    inset-block-start: 2px;
 
     &::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-status-info;
     }
   }

package/lib/internal/scss/annotation-context/annotation/styles.scss

@@ -22,7 +22,7 @@
 
 .description {
   overflow: hidden;
-  margin-top: awsui.$space-xxs;
+  margin-block-start: awsui.$space-xxs;
 }
 
 .actionBar {
@@ -33,24 +33,25 @@
 }
 
 .stepCounter {
-  margin-right: 2 * styles.$base-size;
+  margin-inline-end: 2 * styles.$base-size;
 }
 
 .divider {
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 
 .hotspot {
   @include styles.styles-reset;
   background: transparent;
   border: none;
-  padding: 0;
+  padding-block: 0;
+  padding-inline: 0;
   cursor: pointer;
   scroll-margin: var(#{custom-props.$contentScrollMargin}, 40px 0 0 0);
 
   // These dimensions match the dimensions of the contained SVG icon.
-  width: 16px;
-  height: 16px;
+  inline-size: 16px;
+  block-size: 16px;
 
   &:focus {
     outline: none;

package/lib/internal/scss/app-layout/constants.scss

@@ -8,9 +8,8 @@
 
 // Toggle should have 40px width, whereas button is 26px wide.
 // 40 - 26 = 14px in total or 7px on each side
-$_toggle-padding-horizontal: 0.7 * styles.$base-size;
-$_toggle-padding-vertical: awsui.$space-xxs;
-$toggle-padding: $_toggle-padding-vertical $_toggle-padding-horizontal;
+$toggle-padding-horizontal: 0.7 * styles.$base-size;
+$toggle-padding-vertical: awsui.$space-xxs;
 
 $sidebar-size-closed: 4 * styles.$base-size;
 

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

@@ -8,20 +8,20 @@
 @use '../constants' as constants;
 
 .content-wrapper {
-  padding-left: awsui.$space-layout-content-horizontal;
-  padding-right: awsui.$space-layout-content-horizontal;
+  padding-inline-start: awsui.$space-layout-content-horizontal;
+  padding-inline-end: awsui.$space-layout-content-horizontal;
   &-mobile {
-    padding-left: awsui.$space-l;
-    padding-right: awsui.$space-l;
+    padding-inline-start: awsui.$space-l;
+    padding-inline-end: awsui.$space-l;
   }
 }
 
 .content-type-dashboard {
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline-start: auto;
+  margin-inline-end: auto;
   @each $breakpoint, $width in constants.$dashboard-content-widths {
     @include styles.media-breakpoint-up($breakpoint) {
-      max-width: $width;
+      max-inline-size: $width;
     }
   }
 }

package/lib/internal/scss/app-layout/drawer/styles.scss

@@ -14,7 +14,8 @@ $drawer-z-index-mobile: 1001;
 
 .toggle {
   box-sizing: border-box;
-  padding: constants.$toggle-padding;
+  padding-block: constants.$toggle-padding-vertical;
+  padding-inline: constants.$toggle-padding-horizontal;
 }
 
 .drawer-triggers {
@@ -30,7 +31,7 @@ $drawer-z-index-mobile: 1001;
     z-index: $drawer-z-index;
   }
   &-closed {
-    min-width: constants.$sidebar-size-closed;
+    min-inline-size: constants.$sidebar-size-closed;
     &.drawer-mobile {
       display: none;
     }
@@ -42,13 +43,10 @@ $drawer-z-index-mobile: 1001;
   background-color: awsui.$color-background-layout-panel-content;
   .drawer-mobile > & {
     z-index: $drawer-z-index-mobile;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    inset: 0;
   }
   .drawer-closed > & {
-    width: constants.$sidebar-size-closed;
+    inline-size: constants.$sidebar-size-closed;
     &.drawer-content-clickable {
       cursor: pointer;
       color: awsui.$color-text-interactive-default;
@@ -62,7 +60,7 @@ $drawer-z-index-mobile: 1001;
   }
   > .drawer-resize-content {
     overflow: auto;
-    height: 100%;
+    block-size: 100%;
     position: relative;
   }
 }
@@ -75,11 +73,12 @@ $drawer-z-index-mobile: 1001;
 }
 
 .drawer-trigger {
-  padding: constants.$toggle-padding;
+  padding-block: constants.$toggle-padding-vertical;
+  padding-inline: constants.$toggle-padding-horizontal;
   cursor: pointer;
   color: awsui.$color-text-interactive-default;
   &:not(:first-child) {
-    border-top: 1px solid awsui.$color-border-layout;
+    border-block-start: 1px solid awsui.$color-border-layout;
   }
   &:hover {
     color: awsui.$color-text-layout-toggle-hover;

package/lib/internal/scss/app-layout/mobile-toolbar/styles.scss

@@ -17,33 +17,34 @@
   align-items: center;
   flex-shrink: 0;
   z-index: 1000;
-  width: 100%;
+  inline-size: 100%;
   box-sizing: border-box;
   background-color: awsui.$color-background-layout-mobile-panel;
   box-shadow: awsui.$shadow-panel;
-  height: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
+  block-size: calc(2 * #{awsui.$space-m} + #{awsui.$space-scaled-xs});
 }
 
 .mobile-bar-breadcrumbs {
-  min-width: 0;
+  min-inline-size: 0;
   flex: 1;
-  margin-left: awsui.$space-m;
-  margin-right: awsui.$space-m;
+  margin-inline-start: awsui.$space-m;
+  margin-inline-end: awsui.$space-m;
 }
 
 .mobile-toggle {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
-  padding: constants.$toggle-padding;
-  width: constants.$sidebar-size-closed;
+  padding-block: constants.$toggle-padding-vertical;
+  padding-inline: constants.$toggle-padding-horizontal;
+  inline-size: constants.$sidebar-size-closed;
   color: awsui.$color-text-interactive-default;
   &-type-navigation {
-    border-right: 1px solid awsui.$color-border-layout;
+    border-inline-end: 1px solid awsui.$color-border-layout;
   }
   &-type-tools,
   &-type-drawer {
-    border-left: 1px solid awsui.$color-border-layout;
+    border-inline-start: 1px solid awsui.$color-border-layout;
   }
   &:hover {
     background: awsui.$color-background-layout-panel-hover;

package/lib/internal/scss/app-layout/notifications/styles.scss

@@ -17,7 +17,7 @@
 }
 
 .notifications-sticky {
-  top: 0;
+  inset-block-start: 0;
   position: sticky;
   #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
 }

package/lib/internal/scss/app-layout/split-panel/styles.scss

@@ -5,7 +5,7 @@
 @use '../constants' as constants;
 
 .drawer-displayed {
-  min-width: constants.$sidebar-size-closed;
+  min-inline-size: constants.$sidebar-size-closed;
 }
 
 .drawer-content {

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

@@ -58,7 +58,7 @@
 
 .layout-main {
   flex: 1;
-  min-width: 0;
+  min-inline-size: 0;
   background-color: awsui.$color-background-layout-main;
   position: relative;
   &-scrollable {
@@ -73,24 +73,24 @@
 }
 
 .breadcrumbs-desktop {
-  padding-top: awsui.$space-scaled-m;
-  padding-bottom: awsui.$space-scaled-s;
+  padding-block-start: awsui.$space-scaled-m;
+  padding-block-end: awsui.$space-scaled-s;
 }
 
 .content-header-wrapper {
-  padding-bottom: awsui.$space-content-header-padding-bottom;
+  padding-block-end: awsui.$space-content-header-padding-bottom;
 }
 
 .content-wrapper {
-  padding-bottom: awsui.$space-layout-content-bottom;
+  padding-block-end: awsui.$space-layout-content-bottom;
 }
 
 .content-overlapped {
-  margin-top: calc(-1 * #{awsui.$space-dark-header-overlap-distance});
+  margin-block-start: calc(-1 * #{awsui.$space-dark-header-overlap-distance});
 }
 
 .content-extra-top-padding {
   // extra top padding when there are no breadcrumbs above,
   // applied to content or content header, whatever comes first
-  padding-top: awsui.$space-scaled-m;
+  padding-block-start: awsui.$space-scaled-m;
 }

package/lib/internal/scss/app-layout/toggles/styles.scss

@@ -13,7 +13,8 @@
   // resemble button styles with an extra 1px offset for non-existing here border width
   $padding-vertical: calc(#{awsui.$space-scaled-xxs} + 1px);
   $padding-horizontal: calc(#{awsui.$space-xxs} + 1px);
-  padding: $padding-vertical $padding-horizontal;
+  padding-block: $padding-vertical;
+  padding-inline: $padding-horizontal;
   background: transparent;
   color: currentColor;
   &:focus {
@@ -28,7 +29,7 @@
 .close-button {
   position: absolute;
   outline: none;
-  right: awsui.$space-m;
-  top: awsui.$size-vertical-panel-icon-offset;
+  inset-inline-end: awsui.$space-m;
+  inset-block-start: awsui.$size-vertical-panel-icon-offset;
   z-index: 1;
 }

package/lib/internal/scss/app-layout/visual-refresh/background.scss

@@ -21,15 +21,15 @@ div.background {
     grid-column: 1 / span 5;
     grid-row: 1 / 10;
     position: sticky;
-    top: var(#{custom-props.$headerHeight});
+    inset-block-start: var(#{custom-props.$headerHeight});
     z-index: 799;
 
     &:not(.has-sticky-notifications) {
-      height: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
+      block-size: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
     }
 
     &.has-sticky-notifications {
-      height: calc(
+      block-size: calc(
         var(#{custom-props.$notificationsGap}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight})
       );
     }

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss

@@ -12,10 +12,10 @@
   display: flex;
   grid-column: 5;
   grid-row: 1 / span 10;
-  height: var(#{custom-props.$contentHeight});
+  block-size: var(#{custom-props.$contentHeight});
   pointer-events: none;
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 830;
 
   &.has-open-drawer {
@@ -25,7 +25,7 @@
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     /* stylelint-disable scss/operator-no-newline-after */
-    max-width: calc(
+    max-inline-size: calc(
       var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) -
         var(#{custom-props.$defaultMinContentWidth}) - var(#{custom-props.$contentGapRight})
     );
@@ -34,7 +34,7 @@
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     position: fixed;
-    right: 0;
+    inset-inline-end: 0;
     z-index: 1001;
 
     /*
@@ -45,7 +45,7 @@
     relative to the body.
     */
     &.disable-body-scroll {
-      top: var(#{custom-props.$headerHeight});
+      inset-block-start: var(#{custom-props.$headerHeight});
     }
   }
 }
@@ -54,14 +54,14 @@
   @include styles.styles-reset;
   background-color: transparent;
   box-sizing: border-box;
-  height: 100%;
+  block-size: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   overscroll-behavior-y: contain;
 
   &:not(.has-multiple-triggers).has-open-drawer {
-    width: 0;
+    inline-size: 0;
   }
 
   &.has-multiple-triggers.has-open-drawer {
@@ -69,7 +69,7 @@
   }
 
   &:not(.has-multiple-triggers):not(.has-open-drawer) {
-    width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+    inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
   }
 }
 
@@ -82,8 +82,8 @@
   display: flex;
   flex-direction: column;
   gap: awsui.$space-xs;
-  padding-top: awsui.$space-scaled-s;
-  width: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
+  padding-block-start: awsui.$space-scaled-s;
+  inline-size: calc((awsui.$space-layout-toggle-padding * 2) + awsui.$space-layout-toggle-diameter);
 
   &:not(.has-multiple-triggers).has-open-drawer {
     opacity: 0;
@@ -94,7 +94,8 @@
   }
 
   > .drawers-trigger-overflow {
-    padding: 0 1px;
+    padding-block: 0;
+    padding-inline: 1px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -103,7 +104,7 @@
 
 .drawers-trigger {
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    width: constants.$sidebar-size-closed;
+    inline-size: constants.$sidebar-size-closed;
     display: flex;
     justify-content: center;
   }
@@ -117,7 +118,7 @@
   grid-template-columns: awsui.$space-m 1fr;
   flex-shrink: 0;
 
-  height: 100%;
+  block-size: 100%;
   overflow-y: hidden;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -128,7 +129,7 @@
   > .drawer-content-container {
     grid-column: 1 / span 2;
     grid-row: 1;
-    width: var(#{custom-props.$drawerSize});
+    inline-size: var(#{custom-props.$drawerSize});
     display: grid;
     grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
     grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
@@ -151,20 +152,20 @@
   > .drawer-slider {
     grid-column: 1;
     grid-row: 1;
-    height: 100%;
+    block-size: 100%;
     display: flex;
     align-items: center;
   }
 
   &:not(.is-drawer-open) {
     opacity: 0;
-    width: 0;
+    inline-size: 0;
   }
 
   &.is-drawer-open {
-    border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     opacity: 1;
-    width: var(#{custom-props.$drawerSize});
+    inline-size: var(#{custom-props.$drawerSize});
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-xx-large) {
@@ -176,7 +177,7 @@
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     &.is-drawer-open {
       #{custom-props.$drawerSize}: 100vw;
-      width: 100vw;
+      inline-size: 100vw;
     }
   }
 }

package/lib/internal/scss/app-layout/visual-refresh/layout.scss

@@ -76,7 +76,7 @@ explicitly set in script.
     var(#{custom-props.$mainGap})
     var(#{custom-props.$overlapHeight}) // main template area with overlap
     var(#{custom-props.$mainTemplateRows}); // main template area
-  min-height: var(#{custom-props.$contentHeight});
+  min-block-size: var(#{custom-props.$contentHeight});
   position: relative;
 
   /*
@@ -302,7 +302,7 @@ notifications top margin and some additional vertical space for aesthetics.
 .layout.disable-body-scroll {
   #{custom-props.$mainTemplateRows}: 1fr auto;
   #{custom-props.$offsetTop}: 0px;
-  height: var(#{custom-props.$contentHeight});
+  block-size: var(#{custom-props.$contentHeight});
   overflow-y: scroll;
 
   &.has-split-panel.split-panel-position-bottom {