@cloudscape-design/components-themeable 3.0.475 → 3.0.477

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

@@ -9,7 +9,7 @@
 
 .container {
   grid-area: main;
-  padding-block-end: awsui.$space-layout-content-bottom;
+  padding-bottom: 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-block-end: calc(var(#{custom-props.$splitPanelHeight}) + #{awsui.$space-layout-content-bottom});
+    padding-bottom: calc(var(#{custom-props.$splitPanelHeight}) + #{awsui.$space-layout-content-bottom});
   }
 
   /*
@@ -30,8 +30,7 @@
   */
   &.disable-content-paddings {
     grid-column: 1 / 6;
-    padding-block: 0;
-    padding-inline: 0;
+    padding: 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,23 +10,22 @@
 section.mobile-toolbar {
   align-items: center;
   background-color: awsui.$color-background-home-header;
-  border-block-end: 1px solid awsui.$color-border-divider-default;
+  border-bottom: 1px solid awsui.$color-border-divider-default;
   box-shadow: awsui.$shadow-panel-toggle;
   box-sizing: border-box;
-  block-size: var(#{custom-props.$mobileBarHeight});
+  height: var(#{custom-props.$mobileBarHeight});
   display: grid;
   grid-area: mobileToolbar;
   grid-column: 1 / span 5;
   grid-template-columns: auto minmax(0, 1fr) auto;
-  padding-block: 0;
-  padding-inline: awsui.$space-m;
+  padding: 0 awsui.$space-m;
   position: sticky;
-  inset-block-start: var(#{custom-props.$offsetTop});
+  top: var(#{custom-props.$offsetTop});
   z-index: 1000;
 
   > .mobile-toolbar-nav {
     grid-column: 1;
-    margin-inline-end: awsui.$space-m;
+    margin-right: awsui.$space-m;
   }
 
   > .mobile-toolbar-breadcrumbs {
@@ -36,6 +35,6 @@ section.mobile-toolbar {
 
   > .mobile-toolbar-tools {
     grid-column: 3;
-    margin-inline-start: awsui.$space-m;
+    margin-left: 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;
-  block-size: var(#{custom-props.$contentHeight});
+  height: var(#{custom-props.$contentHeight});
   position: sticky;
-  inset-block-start: var(#{custom-props.$offsetTop});
+  top: var(#{custom-props.$offsetTop});
   z-index: 830;
 
   /*
@@ -34,7 +34,7 @@
   }
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    inset-inline-start: 0;
+    left: 0;
     position: fixed;
     z-index: 1001;
 
@@ -46,14 +46,13 @@
     relative to the body.
     */
     &.disable-body-scroll {
-      inset-block-start: var(#{custom-props.$headerHeight});
+      top: var(#{custom-props.$headerHeight});
     }
   }
 }
 
 nav.show-navigation {
-  padding-block: awsui.$space-scaled-s;
-  padding-inline: awsui.$space-layout-toggle-padding;
+  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
 
   // Animation for the buttons when they are added to the DOM
   @keyframes showButtons {
@@ -89,8 +88,8 @@ nav.show-navigation {
 nav.navigation {
   background-color: awsui.$color-background-container-content;
   box-shadow: awsui.$shadow-panel;
-  inset-block-end: 0;
-  block-size: 100%;
+  bottom: 0;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -103,18 +102,18 @@ nav.navigation {
   @keyframes openNavigation {
     from {
       opacity: 0;
-      inline-size: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
+      width: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
     }
 
     to {
       opacity: 1;
-      inline-size: var(#{custom-props.$navigationWidth});
+      width: var(#{custom-props.$navigationWidth});
     }
   }
 
   // All content is hidden by the overflow-x property
   &:not(.is-navigation-open) {
-    inline-size: 0;
+    width: 0;
     // We need to hide the closed panel to make containing focusable elements not focusable anymore.
     display: none;
   }
@@ -134,7 +133,7 @@ nav.navigation {
   prevent unwanted text wrapping.
   */
   > .animated-content {
-    inline-size: var(#{custom-props.$navigationWidth});
+    width: var(#{custom-props.$navigationWidth});
   }
 
   // The Navigation drawer will take up the entire viewport on mobile
@@ -145,6 +144,6 @@ nav.navigation {
 
 .hide-navigation {
   position: absolute;
-  inset-inline-end: awsui.$space-m;
-  inset-block-start: awsui.$size-vertical-panel-icon-offset;
+  right: awsui.$space-m;
+  top: 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;
-      inset-block-start: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
+      top: 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;
-  inset-block-end: var(#{custom-props.$footerHeight});
+  bottom: var(#{custom-props.$footerHeight});
   display: none;
   grid-column: 1 / 6;
   grid-row: 10;
-  block-size: auto;
+  height: auto;
   overflow-y: hidden;
 
   /*
@@ -37,17 +37,17 @@ section.split-panel-bottom {
   // Animation for the height when opening the split panel
   @keyframes openSplitPanelBottom {
     from {
-      block-size: var(#{custom-props.$splitPanelReportedHeaderSize}, 0);
+      height: var(#{custom-props.$splitPanelReportedHeaderSize}, 0);
     }
 
     to {
-      block-size: var(#{custom-props.$splitPanelReportedSize});
+      height: var(#{custom-props.$splitPanelReportedSize});
     }
   }
 
   // If the Layout is the scrollable element then the footer height is not relevant
   &.disable-body-scroll {
-    inset-block-end: 0;
+    bottom: 0;
   }
 
   &.is-navigation-open.position-bottom {
@@ -93,13 +93,13 @@ section.split-panel-bottom {
 }
 
 section.split-panel-side {
-  block-size: 100%;
+  height: 100%;
   overflow-x: hidden;
   pointer-events: auto;
 
   &:not(.is-split-panel-open),
   &.position-bottom {
-    inline-size: 0;
+    width: 0;
   }
 
   /*
@@ -109,7 +109,7 @@ section.split-panel-side {
   */
   &.is-split-panel-open.position-side {
     box-shadow: awsui.$shadow-panel;
-    max-inline-size: var(#{custom-props.$splitPanelMaxWidth}, 280px);
-    min-inline-size: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
+    min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
   }
 }

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;
-  block-size: var(#{custom-props.$contentHeight});
-  max-inline-size: var(#{custom-props.$toolsMaxWidth});
+  height: var(#{custom-props.$contentHeight});
+  max-width: var(#{custom-props.$toolsMaxWidth});
   position: sticky;
-  inset-block-start: var(#{custom-props.$offsetTop});
+  top: 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;
-    inset-inline-end: 0;
+    right: 0;
     z-index: 1001;
 
     /*
@@ -54,7 +54,7 @@ viewport size and state of the Tools drawer.
     relative to the body.
     */
     &.disable-body-scroll {
-      inset-block-start: var(#{custom-props.$headerHeight});
+      top: var(#{custom-props.$headerHeight});
     }
   }
 }
@@ -63,7 +63,7 @@ viewport size and state of the Tools drawer.
   background-color: awsui.$color-background-container-content;
   box-shadow: awsui.$shadow-panel;
   flex-shrink: 0;
-  block-size: 100%;
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
@@ -76,17 +76,17 @@ viewport size and state of the Tools drawer.
   @keyframes openTools {
     from {
       opacity: var(#{custom-props.$toolsAnimationStartingOpacity}, 0);
-      inline-size: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
+      width: calc(#{awsui.$space-layout-toggle-padding} * 2 + #{awsui.$space-layout-toggle-diameter});
     }
 
     to {
       opacity: 1;
-      inline-size: var(#{custom-props.$toolsWidth});
+      width: var(#{custom-props.$toolsWidth});
     }
   }
 
   &:not(.is-tools-open) {
-    inline-size: 0;
+    width: 0;
     // We need to hide the closed panel to make containing focusable elements not focusable anymore.
     display: none;
   }
@@ -106,7 +106,7 @@ viewport size and state of the Tools drawer.
   prevent unwanted text wrapping.
   */
   > .animated-content {
-    inline-size: var(#{custom-props.$toolsWidth});
+    width: var(#{custom-props.$toolsWidth});
   }
 
   /*
@@ -117,7 +117,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-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+      border-right: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     }
   }
 
@@ -129,8 +129,8 @@ viewport size and state of the Tools drawer.
 
 .hide-tools {
   position: absolute;
-  inset-inline-end: awsui.$space-m;
-  inset-block-start: awsui.$size-vertical-panel-icon-offset;
+  right: awsui.$space-m;
+  top: awsui.$size-vertical-panel-icon-offset;
   z-index: 1;
 }
 
@@ -142,8 +142,7 @@ handleSplitPanelMaxWidth function in the context.
 .show-tools {
   @include styles.styles-reset;
   box-sizing: border-box;
-  padding-block: awsui.$space-scaled-s;
-  padding-inline: awsui.$space-layout-toggle-padding;
+  padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
 
   // Animation for the buttons when they are added to the DOM
   @keyframes showButtons {

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

@@ -21,12 +21,9 @@
 
 @mixin trigger-button-styles {
   background: awsui.$color-background-layout-toggle-default;
-  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;
+  border-radius: 50%;
+  height: awsui.$space-layout-toggle-diameter;
+  width: awsui.$space-layout-toggle-diameter;
 
   &:hover {
     background: awsui.$color-background-layout-toggle-hover;
@@ -41,8 +38,8 @@
   @include trigger-button-styles();
 
   position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
+  top: 0;
+  left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -59,6 +56,7 @@ handleSplitPanelMaxWidth function in the context.
 */
 .trigger {
   @include trigger-button-styles();
+
   border: none;
   color: awsui.$color-text-layout-toggle;
   cursor: pointer;
@@ -91,21 +89,15 @@ handleSplitPanelMaxWidth function in the context.
 .trigger-wrapper {
   position: relative;
   box-shadow: awsui.$shadow-panel-toggle;
-  border-start-start-radius: 50%;
-  border-start-end-radius: 50%;
-  border-end-start-radius: 50%;
-  border-end-end-radius: 50%;
+  border-radius: 50%;
 }
 
 .dot {
   position: absolute;
-  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;
+  width: 9px;
+  height: 9px;
+  border-radius: 8px;
   background-color: awsui.$color-background-badge-icon;
-  inset-block-start: 0;
-  inset-inline-end: 0;
+  top: 0;
+  right: 0;
 }

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

@@ -32,7 +32,6 @@
 }
 
 .popover-divider {
-  margin-block: awsui.$space-xs;
-  margin-inline: 0;
-  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  margin: awsui.$space-xs 0;
+  border-bottom: 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-block-start: calc(#{awsui.$space-xxs} + #{awsui.$line-height-body-m});
+  padding-top: calc(#{awsui.$space-xxs} + #{awsui.$line-height-body-m});
 }
 
 .button-container-nolabel {
-  padding-block-start: #{awsui.$space-xxs};
+  padding-top: #{awsui.$space-xxs};
 }
 
 .divider {
-  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-bottom: 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-block-start: awsui.$space-xxs;
+  margin-top: awsui.$space-xxs;
 
   /* stylelint-disable-next-line selector-max-type */
   > a {
@@ -66,6 +66,5 @@
 }
 
 .right-align {
-  display: flex;
-  justify-content: flex-end;
+  float: right;
 }

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

@@ -4,11 +4,11 @@
 */
 
 .root {
-  inline-size: 100%;
+  width: 100%;
 }
 
 .layout-strut {
-  inline-size: 100%;
+  width: 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,12 +12,8 @@
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  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;
+  border-radius: awsui.$border-radius-badge;
+  padding: 0 awsui.$space-xs;
   color: awsui.$color-text-notification-default;
 
   &.badge-color-grey {

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

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

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

@@ -24,11 +24,9 @@
   }
 }
 
-/* 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-block-end: awsui.$space-key-value-gap;
+      margin-bottom: awsui.$space-key-value-gap;
     }
     &.value-large-variant {
       @include styles.font-display-l;
@@ -90,10 +90,10 @@
 }
 
 .t-left {
-  text-align: start;
+  text-align: left;
 }
 .t-right {
-  text-align: end;
+  text-align: right;
 }
 .t-center {
   text-align: center;

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

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

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

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

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

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