@cloudscape-design/components-themeable 3.0.461 → 3.0.463

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,22 +10,23 @@
 section.mobile-toolbar {
   align-items: center;
   background-color: awsui.$color-background-home-header;
-  border-bottom: 1px solid awsui.$color-border-divider-default;
+  border-block-end: 1px solid awsui.$color-border-divider-default;
   box-shadow: awsui.$shadow-panel-toggle;
   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;
 
   > .mobile-toolbar-nav {
     grid-column: 1;
-    margin-right: awsui.$space-m;
+    margin-inline-end: awsui.$space-m;
   }
 
   > .mobile-toolbar-breadcrumbs {
@@ -35,6 +36,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 {
@@ -88,8 +89,8 @@ nav.show-navigation {
 nav.navigation {
   background-color: awsui.$color-background-container-content;
   box-shadow: awsui.$shadow-panel;
-  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 */
@@ -102,18 +103,18 @@ nav.navigation {
   @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 {
@@ -93,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,7 +109,7 @@ section.split-panel-side {
   */
   &.is-split-panel-open.position-side {
     box-shadow: awsui.$shadow-panel;
-    max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
-    min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
+    max-inline-size: var(#{custom-props.$splitPanelMaxWidth}, 280px);
+    min-inline-size: 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;
-  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});
     }
   }
 }
@@ -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;
-  height: 100%;
+  block-size: 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);
-      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;
   }
@@ -106,7 +106,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});
   }
 
   /*
@@ -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-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;
     }
   }
 
@@ -129,8 +129,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;
 }
 
@@ -142,7 +142,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 {

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,7 +59,6 @@ handleSplitPanelMaxWidth function in the context.
 */
 .trigger {
   @include trigger-button-styles();
-
   border: none;
   color: awsui.$color-text-layout-toggle;
   cursor: pointer;
@@ -89,15 +91,21 @@ handleSplitPanelMaxWidth function in the context.
 .trigger-wrapper {
   position: relative;
   box-shadow: awsui.$shadow-panel-toggle;
-  border-radius: 50%;
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
 }
 
 .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/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');

package/lib/internal/template/alert/styles.css.js

@@ -1,30 +1,30 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_s7vra_93",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_s7vra_1",
-  "root": "awsui_root_mx3cw_s7vra_119",
-  "hidden": "awsui_hidden_mx3cw_s7vra_135",
-  "with-dismiss": "awsui_with-dismiss_mx3cw_s7vra_158",
-  "with-action": "awsui_with-action_mx3cw_s7vra_158",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_s7vra_164",
-  "header": "awsui_header_mx3cw_s7vra_171",
-  "action": "awsui_action_mx3cw_s7vra_175",
-  "action-slot": "awsui_action-slot_mx3cw_s7vra_180",
-  "action-button": "awsui_action-button_mx3cw_s7vra_181",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_s7vra_185",
-  "text": "awsui_text_mx3cw_s7vra_211",
-  "icon": "awsui_icon_mx3cw_s7vra_216",
-  "message": "awsui_message_mx3cw_s7vra_219",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_s7vra_227",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_s7vra_230",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_s7vra_233",
-  "content": "awsui_content_mx3cw_s7vra_237",
-  "dismiss": "awsui_dismiss_mx3cw_s7vra_241",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_s7vra_246",
-  "type-error": "awsui_type-error_mx3cw_s7vra_250",
-  "type-warning": "awsui_type-warning_mx3cw_s7vra_258",
-  "type-success": "awsui_type-success_mx3cw_s7vra_266",
-  "type-info": "awsui_type-info_mx3cw_s7vra_274"
+  "alert": "awsui_alert_mx3cw_k5ogv_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_k5ogv_1",
+  "root": "awsui_root_mx3cw_k5ogv_119",
+  "hidden": "awsui_hidden_mx3cw_k5ogv_135",
+  "with-dismiss": "awsui_with-dismiss_mx3cw_k5ogv_162",
+  "with-action": "awsui_with-action_mx3cw_k5ogv_162",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_k5ogv_168",
+  "header": "awsui_header_mx3cw_k5ogv_175",
+  "action": "awsui_action_mx3cw_k5ogv_179",
+  "action-slot": "awsui_action-slot_mx3cw_k5ogv_184",
+  "action-button": "awsui_action-button_mx3cw_k5ogv_185",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_k5ogv_189",
+  "text": "awsui_text_mx3cw_k5ogv_215",
+  "icon": "awsui_icon_mx3cw_k5ogv_222",
+  "message": "awsui_message_mx3cw_k5ogv_225",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_k5ogv_233",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_k5ogv_236",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_k5ogv_239",
+  "content": "awsui_content_mx3cw_k5ogv_243",
+  "dismiss": "awsui_dismiss_mx3cw_k5ogv_247",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_k5ogv_252",
+  "type-error": "awsui_type-error_mx3cw_k5ogv_256",
+  "type-warning": "awsui_type-warning_mx3cw_k5ogv_264",
+  "type-success": "awsui_type-success_mx3cw_k5ogv_272",
+  "type-info": "awsui_type-info_mx3cw_k5ogv_280"
 };