@cloudscape-design/components-themeable 3.0.537 → 3.0.538

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

@@ -9,7 +9,7 @@
 
 .container {
   grid-area: main;
-  padding-bottom: awsui.$space-layout-content-bottom;
+  padding-block-end: awsui.$space-layout-content-bottom;
 
   /*
   If the split panel is in the bottom position additional padding will need to be
@@ -18,7 +18,7 @@
   sticky position of the split panel.
   */
   &.has-split-panel.split-panel-position-bottom {
-    padding-bottom: calc(var(#{custom-props.$splitPanelHeight}) + #{awsui.$space-layout-content-bottom});
+    padding-block-end: calc(var(#{custom-props.$splitPanelHeight}) + #{awsui.$space-layout-content-bottom});
   }
 
   /*
@@ -30,7 +30,8 @@
   */
   &.disable-content-paddings {
     grid-column: 1 / 6;
-    padding: 0;
+    padding-block: 0;
+    padding-inline: 0;
 
     @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
       &.is-navigation-open {

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

@@ -10,17 +10,18 @@
 section.mobile-toolbar {
   align-items: center;
   background-color: awsui.$color-background-layout-main;
-  border-bottom: 1px solid awsui.$color-border-divider-default;
+  border-block-end: 1px solid awsui.$color-border-divider-default;
   box-shadow: awsui.$shadow-sticky;
   box-sizing: border-box;
-  height: var(#{custom-props.$mobileBarHeight});
+  block-size: var(#{custom-props.$mobileBarHeight});
   display: grid;
   grid-area: mobileToolbar;
   grid-column: 1 / span 5;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  padding: 0 awsui.$space-m;
+  padding-block: 0;
+  padding-inline: awsui.$space-m;
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 1000;
   &:not(.remove-high-contrast-header) {
     background-color: awsui.$color-background-layout-main;
@@ -29,7 +30,7 @@ section.mobile-toolbar {
 
   > .mobile-toolbar-nav {
     grid-column: 1;
-    margin-right: awsui.$space-m;
+    margin-inline-end: awsui.$space-m;
   }
 
   > .mobile-toolbar-breadcrumbs {
@@ -39,6 +40,6 @@ section.mobile-toolbar {
 
   > .mobile-toolbar-tools {
     grid-column: 3;
-    margin-left: awsui.$space-m;
+    margin-inline-start: awsui.$space-m;
   }
 }

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

@@ -12,9 +12,9 @@
   display: flex;
   grid-column: 1;
   grid-row: 1 / span 10;
-  height: var(#{custom-props.$contentHeight});
+  block-size: var(#{custom-props.$contentHeight});
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 830;
 
   /*
@@ -34,7 +34,7 @@
   }
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    left: 0;
+    inset-inline-start: 0;
     position: fixed;
     z-index: 1001;
 
@@ -46,13 +46,14 @@
     relative to the body.
     */
     &.disable-body-scroll {
-      top: var(#{custom-props.$headerHeight});
+      inset-block-start: var(#{custom-props.$headerHeight});
     }
   }
 }
 
 nav.show-navigation {
-  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
+  padding-block: awsui.$space-scaled-s;
+  padding-inline: awsui.$space-layout-toggle-padding;
 
   // Animation for the buttons when they are added to the DOM
   @keyframes showButtons {
@@ -87,8 +88,8 @@ nav.show-navigation {
 
 nav.navigation {
   background-color: awsui.$color-background-container-content;
-  bottom: 0;
-  height: 100%;
+  inset-block-end: 0;
+  block-size: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -96,24 +97,24 @@ nav.navigation {
   position: relative;
   word-wrap: break-word;
   pointer-events: auto;
-  border-right: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  border-inline-end: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
   // Animation for the Navigation opacity and width when it is added to the DOM
   @keyframes openNavigation {
     from {
       opacity: 0;
-      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});
     }
 
     to {
       opacity: 1;
-      width: var(#{custom-props.$navigationWidth});
+      inline-size: var(#{custom-props.$navigationWidth});
     }
   }
 
   // All content is hidden by the overflow-x property
   &:not(.is-navigation-open) {
-    width: 0;
+    inline-size: 0;
     // We need to hide the closed panel to make containing focusable elements not focusable anymore.
     display: none;
   }
@@ -133,7 +134,7 @@ nav.navigation {
   prevent unwanted text wrapping.
   */
   > .animated-content {
-    width: var(#{custom-props.$navigationWidth});
+    inline-size: var(#{custom-props.$navigationWidth});
   }
 
   // The Navigation drawer will take up the entire viewport on mobile
@@ -144,6 +145,6 @@ nav.navigation {
 
 .hide-navigation {
   position: absolute;
-  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;
 }

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

@@ -16,7 +16,7 @@
     &.sticky-notifications {
       #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
       position: sticky;
-      top: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
+      inset-block-start: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
     }
   }
 }

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

@@ -19,11 +19,11 @@ section.split-panel-bottom {
   This could be off the viewport if the content area has enough content to be scrollable.
   */
   align-self: end;
-  bottom: var(#{custom-props.$footerHeight});
+  inset-block-end: var(#{custom-props.$footerHeight});
   display: none;
   grid-column: 1 / 6;
   grid-row: 10;
-  height: auto;
+  block-size: auto;
   overflow-y: hidden;
 
   /*
@@ -37,17 +37,17 @@ section.split-panel-bottom {
   // Animation for the height when opening the split panel
   @keyframes openSplitPanelBottom {
     from {
-      height: var(#{custom-props.$splitPanelReportedHeaderSize}, 0);
+      block-size: var(#{custom-props.$splitPanelReportedHeaderSize}, 0);
     }
 
     to {
-      height: var(#{custom-props.$splitPanelReportedSize});
+      block-size: var(#{custom-props.$splitPanelReportedSize});
     }
   }
 
   // If the Layout is the scrollable element then the footer height is not relevant
   &.disable-body-scroll {
-    bottom: 0;
+    inset-block-end: 0;
   }
 
   &.is-navigation-open.position-bottom {
@@ -84,7 +84,6 @@ section.split-panel-bottom {
   */
   &.is-split-panel-open.position-bottom {
     box-shadow: awsui.$shadow-split-bottom;
-
     &.animating {
       @include styles.with-motion {
         animation: openSplitPanelBottom awsui.$motion-duration-refresh-only-fast;
@@ -94,13 +93,13 @@ section.split-panel-bottom {
 }
 
 section.split-panel-side {
-  height: 100%;
+  block-size: 100%;
   overflow-x: hidden;
   pointer-events: auto;
 
   &:not(.is-split-panel-open),
   &.position-bottom {
-    width: 0;
+    inline-size: 0;
   }
 
   /*
@@ -109,12 +108,12 @@ section.split-panel-side {
   be persistent in the DOM when closed.
   */
   &.is-split-panel-open.position-side {
-    max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
-    min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
-    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    max-inline-size: var(#{custom-props.$splitPanelMaxWidth}, 280px);
+    min-inline-size: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    border-inline-start: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
     &:not(.has-open-drawer) {
-      border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
+      border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-panel-side;
     }
   }
 }

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

@@ -27,10 +27,10 @@ viewport size and state of the Tools drawer.
   display: flex;
   grid-column: 5;
   grid-row: 1 / span 10;
-  height: var(#{custom-props.$contentHeight});
-  max-width: var(#{custom-props.$toolsMaxWidth});
+  block-size: var(#{custom-props.$contentHeight});
+  max-inline-size: var(#{custom-props.$toolsMaxWidth});
   position: sticky;
-  top: var(#{custom-props.$offsetTop});
+  inset-block-start: var(#{custom-props.$offsetTop});
   z-index: 830;
 
   pointer-events: none;
@@ -43,7 +43,7 @@ viewport size and state of the Tools drawer.
     #{custom-props.$toolsMaxWidth}: none;
     #{custom-props.$toolsWidth}: auto;
     position: fixed;
-    right: 0;
+    inset-inline-end: 0;
     z-index: 1001;
 
     /*
@@ -54,7 +54,7 @@ viewport size and state of the Tools drawer.
     relative to the body.
     */
     &.disable-body-scroll {
-      top: var(#{custom-props.$headerHeight});
+      inset-block-start: var(#{custom-props.$headerHeight});
     }
   }
 }
@@ -62,7 +62,7 @@ viewport size and state of the Tools drawer.
 .tools {
   background-color: awsui.$color-background-container-content;
   flex-shrink: 0;
-  height: 100%;
+  block-size: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -75,24 +75,24 @@ viewport size and state of the Tools drawer.
   @keyframes openTools {
     from {
       opacity: var(#{custom-props.$toolsAnimationStartingOpacity}, 0);
-      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});
     }
 
     to {
       opacity: 1;
-      width: var(#{custom-props.$toolsWidth});
+      inline-size: var(#{custom-props.$toolsWidth});
     }
   }
 
   &:not(.is-tools-open) {
-    width: 0;
+    inline-size: 0;
     // We need to hide the closed panel to make containing focusable elements not focusable anymore.
     display: none;
   }
 
   // Apply the animation when the Tools is opened
   &.is-tools-open {
-    border-left: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-inline-start: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
 
     &.animating {
       @include styles.with-motion {
@@ -107,7 +107,7 @@ viewport size and state of the Tools drawer.
   prevent unwanted text wrapping.
   */
   > .animated-content {
-    width: var(#{custom-props.$toolsWidth});
+    inline-size: var(#{custom-props.$toolsWidth});
   }
 
   /*
@@ -118,7 +118,7 @@ viewport size and state of the Tools drawer.
   */
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     &.is-tools-open.has-tools-form-persistence {
-      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;
     }
   }
 
@@ -130,8 +130,8 @@ viewport size and state of the Tools drawer.
 
 .hide-tools {
   position: absolute;
-  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;
 }
 
@@ -143,7 +143,8 @@ handleSplitPanelMaxWidth function in the context.
 .show-tools {
   @include styles.styles-reset;
   box-sizing: border-box;
-  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
+  padding-block: awsui.$space-scaled-s;
+  padding-inline: awsui.$space-layout-toggle-padding;
 
   // Animation for the buttons when they are added to the DOM
   @keyframes showButtons {
@@ -169,7 +170,6 @@ handleSplitPanelMaxWidth function in the context.
       display: flex;
       flex-direction: column;
       gap: awsui.$space-xs;
-
       &.animating {
         @include styles.with-motion {
           animation: showButtons awsui.$motion-duration-refresh-only-fast;

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

@@ -21,9 +21,12 @@
 
 @mixin trigger-button-styles {
   background: awsui.$color-background-layout-toggle-default;
-  border-radius: 50%;
-  height: awsui.$space-layout-toggle-diameter;
-  width: awsui.$space-layout-toggle-diameter;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  block-size: awsui.$space-layout-toggle-diameter;
+  inline-size: awsui.$space-layout-toggle-diameter;
 
   &:hover {
     background: awsui.$color-background-layout-toggle-hover;
@@ -38,8 +41,8 @@
   @include trigger-button-styles();
 
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -56,8 +59,8 @@ handleSplitPanelMaxWidth function in the context.
 */
 .trigger {
   @include trigger-button-styles();
-
-  border: none;
+  border-block: none;
+  border-inline: none;
   color: awsui.$color-text-layout-toggle;
   cursor: pointer;
   pointer-events: auto;
@@ -88,7 +91,10 @@ handleSplitPanelMaxWidth function in the context.
 
 .trigger-wrapper {
   position: relative;
-  border-radius: 50%;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
 
   &:not(.remove-high-contrast-header) {
     box-shadow: awsui.$shadow-panel-toggle;
@@ -97,10 +103,13 @@ handleSplitPanelMaxWidth function in the context.
 
 .dot {
   position: absolute;
-  width: 9px;
-  height: 9px;
-  border-radius: 8px;
+  inline-size: 9px;
+  block-size: 9px;
+  border-start-start-radius: 8px;
+  border-start-end-radius: 8px;
+  border-end-start-radius: 8px;
+  border-end-end-radius: 8px;
   background-color: awsui.$color-background-badge-icon;
-  top: 0;
-  right: 0;
+  inset-block-start: 0;
+  inset-inline-end: 0;
 }

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

@@ -32,6 +32,7 @@
 }
 
 .popover-divider {
-  margin: awsui.$space-xs 0;
-  border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin-block: awsui.$space-xs;
+  margin-inline: 0;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }

package/lib/internal/scss/attribute-editor/styles.scss

@@ -42,22 +42,22 @@
   // The value is calculated as follows:
   // padding-top = awsui-form-field-controls: 4px +
   // line height (also applies to icon size) awsui-form-field-label: 22px
-  padding-top: calc(#{awsui.$space-xxs} + #{awsui.$line-height-body-m});
+  padding-block-start: calc(#{awsui.$space-xxs} + #{awsui.$line-height-body-m});
 }
 
 .button-container-nolabel {
-  padding-top: #{awsui.$space-xxs};
+  padding-block-start: #{awsui.$space-xxs};
 }
 
 .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;
 }
 
 .additional-info {
   @include styles.form-control-description;
   display: block;
   word-wrap: break-word;
-  margin-top: awsui.$space-xxs;
+  margin-block-start: awsui.$space-xxs;
 
   /* stylelint-disable-next-line selector-max-type */
   > a {
@@ -66,5 +66,6 @@
 }
 
 .right-align {
-  float: right;
+  display: flex;
+  justify-content: flex-end;
 }

package/lib/internal/scss/autosuggest/styles.scss

@@ -4,11 +4,11 @@
 */
 
 .root {
-  width: 100%;
+  inline-size: 100%;
 }
 
 .layout-strut {
-  width: 100%;
+  inline-size: 100%;
   position: relative;
   // Prevent incorrect layer ordering in Safari by making sure
   // this element is also offloaded to the GPU along with the virtual items

package/lib/internal/scss/badge/styles.scss

@@ -12,8 +12,12 @@
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-radius: awsui.$border-radius-badge;
-  padding: 0 awsui.$space-xs;
+  border-start-start-radius: awsui.$border-radius-badge;
+  border-start-end-radius: awsui.$border-radius-badge;
+  border-end-start-radius: awsui.$border-radius-badge;
+  border-end-end-radius: awsui.$border-radius-badge;
+  padding-block: 0;
+  padding-inline: awsui.$space-xs;
   color: awsui.$color-text-notification-default;
 
   &.badge-color-grey {

package/lib/internal/scss/box/base-styles.scss

@@ -129,9 +129,11 @@ $font-styles: (
 }
 
 @mixin headings-paragraphs-extra-defaults {
-  margin: 0;
+  margin-block: 0;
+  margin-inline: 0;
   text-decoration: none;
-  padding: awsui.$space-xxs 0;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
 }
 
 @mixin code-extra-defaults {

package/lib/internal/scss/box/layout.scss

@@ -24,9 +24,11 @@
   }
 }
 
+/* stylelint-disable csstools/use-logical */
 .f-left {
   float: left;
 }
 .f-right {
   float: right;
 }
+/* stylelint-enable csstools/use-logical */

package/lib/internal/scss/box/text.scss

@@ -41,7 +41,7 @@
     &.key-label-variant {
       @include styles.font-label;
       color: awsui.$color-text-label;
-      margin-bottom: awsui.$space-key-value-gap;
+      margin-block-end: awsui.$space-key-value-gap;
     }
     &.value-large-variant {
       @include styles.font-display-l;
@@ -90,10 +90,10 @@
 }
 
 .t-left {
-  text-align: left;
+  text-align: start;
 }
 .t-right {
-  text-align: right;
+  text-align: end;
 }
 .t-center {
   text-align: center;

package/lib/internal/scss/breadcrumb-group/item/styles.scss

@@ -15,7 +15,8 @@
   display: flex;
 
   > .icon {
-    margin: 0 awsui.$space-xs;
+    margin-block: 0;
+    margin-inline: awsui.$space-xs;
     color: awsui.$color-text-breadcrumb-icon;
   }
 
@@ -40,7 +41,7 @@
   }
 }
 .compressed {
-  min-width: 0;
+  min-inline-size: 0;
   overflow: hidden;
   > .text {
     overflow: hidden;

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

@@ -8,8 +8,10 @@
 
 .breadcrumb-group {
   @include styles.styles-reset;
-  margin: 0;
-  padding: awsui.$space-xxs 0;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: awsui.$space-xxs;
+  padding-inline: 0;
 
   > .item {
     @include styles.styles-reset;
@@ -19,24 +21,29 @@
   > .breadcrumb-group-list {
     display: flex;
     align-items: center;
-    padding: 0;
-    margin: 0;
+    padding-block: 0;
+    padding-inline: 0;
+    margin-block: 0;
+    margin-inline: 0;
     list-style: none;
-    width: 100%;
+    inline-size: 100%;
     flex-wrap: wrap;
 
     > .item,
     > .ellipsis {
       display: inline-block;
-      padding: 0;
-      margin: 0;
+      padding-block: 0;
+      padding-inline: 0;
+      margin-block: 0;
+      margin-inline: 0;
     }
 
     > .ellipsis {
       display: none;
 
       > .icon {
-        margin: 0 styles.$base-size;
+        margin-block: 0;
+        margin-inline: styles.$base-size;
         color: awsui.$color-text-breadcrumb-icon;
       }
     }
@@ -54,7 +61,7 @@
         flex-shrink: 0;
       }
       > .item {
-        min-width: 0;
+        min-inline-size: 0;
         &:not(:first-child):not(:last-child) {
           display: none;
         }

package/lib/internal/scss/button/styles.scss

@@ -13,7 +13,8 @@
   background: map.get($variant, 'default-background');
   color: map.get($variant, 'default-color');
   border-color: map.get($variant, 'default-border-color');
-  border-width: map.get($variant, 'border-width');
+  border-block-width: map.get($variant, 'border-width');
+  border-inline-width: map.get($variant, 'border-width');
   position: relative;
   text-decoration: none;
   padding-block: map.get($variant, 'padding');