@cloudscape-design/components-themeable 3.0.1332 → 3.0.1334

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

@@ -9,7 +9,8 @@
 
 // ==========================================================================
 // Item sizing — single source of truth for navigation density.
-// Adjust awsui.$size-side-navigation-item-height and awsui.$space-side-navigation-item-gap/awsui.$space-side-navigation-item-collapsed-gap to scale all items uniformly.
+// Adjust awsui.$size-side-navigation-item-height and the item gap tokens
+// (awsui.$space-side-navigation-item-default-gap / awsui.$space-side-navigation-item-icon-gap) to scale all items uniformly.
 // ==========================================================================
 $item-icon-text-gap: awsui.$space-xs;
 // Padding is calculated to be able to horizontally align items without having to use align-items: center for wrapping
@@ -45,13 +46,6 @@ $expandable-icon-negative-margin: awsui.$space-l;
   padding-inline-start: awsui.$space-panel-nav-left;
   // Additional xl space to prevent text from overlapping the close button.
   padding-inline-end: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
-
-  &--collapsed {
-    padding-inline: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 }
 
 .header-link {
@@ -95,6 +89,10 @@ $expandable-icon-negative-margin: awsui.$space-l;
 .items-control,
 .list-container {
   margin-block-start: calc(#{awsui.$space-panel-content-top} - #{$item-padding-block});
+  .root--collapsed > & {
+    margin-block-start: awsui.$space-xs;
+  }
+
   // Toolbar removes margin and item padding for whatever comes first after the header
   .with-toolbar > .divider-header + & {
     margin-block-start: calc(-1 * #{$item-padding-block});
@@ -150,17 +148,23 @@ $expandable-icon-negative-margin: awsui.$space-l;
 // ==========================================================================
 .list-item {
   margin-inline: 0;
-  margin-block: awsui.$space-side-navigation-item-gap;
+  margin-block: awsui.$space-side-navigation-item-default-gap;
   padding-block: 0;
   padding-inline: $item-padding-inline;
   list-style: none;
+
+  // When any top-level item has an icon, use the wider icon gap between items.
+  .list--with-icons > & {
+    margin-block: awsui.$space-side-navigation-item-icon-gap;
+  }
+
   // Remove margin from first item in side nav, outer block margins are covered by list-container
   .list-variant-root--first > &:first-child {
     margin-block-start: 0px;
   }
 
   &--collapsed {
-    margin-block: awsui.$space-side-navigation-item-collapsed-gap;
+    margin-block: awsui.$space-side-navigation-item-icon-gap;
     display: flex;
     justify-content: center;
     padding-block: 0;

package/lib/internal/scss/status-indicator/styles.scss

@@ -20,6 +20,7 @@ $_status-colors: (
   'in-progress': awsui.$color-text-status-inactive,
   'loading': awsui.$color-text-status-inactive,
   'not-started': awsui.$color-text-status-inactive,
+  'log': awsui.$color-text-status-inactive,
 );
 
 $_color-overrides: (
@@ -40,6 +41,7 @@ $_status-backgrounds: (
   'in-progress': awsui.$color-background-status-indicator-neutral,
   'loading': awsui.$color-background-status-indicator-neutral,
   'not-started': awsui.$color-background-status-indicator-neutral,
+  'log': awsui.$color-background-status-indicator-neutral,
 );
 
 $_background-overrides: (
@@ -106,7 +108,7 @@ $_background-overrides: (
     word-break: break-all;
     @include theming.one-theme-only {
       display: inline-flex;
-      align-items: flex-start;
+      vertical-align: top;
     }
 
     > .icon {
@@ -115,7 +117,7 @@ $_background-overrides: (
       @include theming.one-theme-only {
         display: inline-flex;
         align-items: center;
-        margin-block-start: awsui.$space-xxxs;
+        block-size: awsui.$line-height-body-m;
       }
     }
   }

package/lib/internal/scss/steps/styles.scss

@@ -13,6 +13,10 @@
   background-color: transparent;
 }
 
+.header {
+  /* used in test-utils */
+}
+
 .root {
   @include styles.styles-reset;
   @include styles.text-wrapping;
@@ -27,7 +31,13 @@
       grid-template-columns: awsui.$space-static-l 1fr;
       grid-template-rows: minmax(awsui.$space-static-l, auto);
 
-      > .header {
+      > .annotation {
+        justify-self: flex-end;
+        min-inline-size: 0;
+        color: awsui.$color-text-status-inactive;
+      }
+
+      > .step-layout {
         display: flex;
         gap: awsui.$space-xxs;
         grid-row: 1;
@@ -40,23 +50,6 @@
         grid-column: 2;
         margin-block-end: awsui.$space-static-xs;
       }
-
-      > .connector {
-        grid-row: 2;
-        grid-column: 1;
-        margin-block: 0;
-        border-block: 0;
-        border-inline: 0;
-        inline-size: awsui.$border-divider-list-width;
-        block-size: auto;
-        min-block-size: awsui.$space-static-xs;
-        position: relative;
-        inset-inline-end: awsui.$space-static-xxxs;
-      }
-    }
-
-    > :last-of-type > .connector {
-      display: none;
     }
 
     &.custom > .details {
@@ -71,18 +64,26 @@
     display: grid;
     align-items: flex-start;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    // Shared rows: annotation | icon and connector | header and details.
+    grid-template-rows: auto minmax(awsui.$space-static-l, auto) auto;
     grid-auto-flow: column;
 
     > .container {
-      display: grid;
-      grid-template-columns: awsui.$space-static-l 1fr;
-      grid-template-rows: minmax(awsui.$space-static-l, auto);
+      // Spanning the subgrid rows keeps steps with different-height annotations aligned.
+      grid-row: 1 / -1;
+      grid-template-rows: subgrid;
       align-items: center;
 
-      > .header {
-        display: flex;
+      > .annotation {
+        justify-self: flex-start;
+        align-self: flex-end;
         grid-row: 1;
         grid-column: 1 / span 2;
+        padding-inline-end: awsui.$space-xs;
+      }
+
+      > .step-layout {
+        grid-row: 2;
         align-items: center;
 
         > .connector {
@@ -101,27 +102,68 @@
         }
       }
 
-      > .horizontal-header {
-        grid-row: 2;
-        grid-column: 1 / span 3;
-        padding-inline-end: awsui.$space-xs;
-      }
-
-      > .details {
+      > .content {
+        align-self: flex-start;
         grid-row: 3;
         grid-column: 1 / span 3;
+        min-inline-size: 0;
         padding-inline-end: awsui.$space-xs;
+
+        > .details {
+          margin-block-end: awsui.$space-static-xs;
+        }
       }
     }
 
     > .container:last-child {
-      > .header > .connector {
+      > .step-layout > .connector {
         display: none;
       }
     }
   }
 }
 
+.vertical {
+  > .list {
+    // A single connector fills extra annotation/details height and provides the default spacing otherwise.
+    > .container > .step-layout {
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: auto 1fr;
+      gap: 0;
+
+      > :first-child {
+        grid-column: 1 / -1;
+      }
+
+      > .details {
+        grid-row: 2;
+        grid-column: 2;
+        margin-block-end: awsui.$space-static-xs;
+      }
+
+      > .connector-continuation {
+        grid-row: 2;
+        grid-column: 1;
+        justify-self: center;
+        margin-block: 0;
+        margin-inline: 0;
+        border-block: 0;
+        border-inline: 0;
+        inline-size: awsui.$border-divider-list-width;
+        block-size: auto;
+        min-block-size: awsui.$space-static-xs;
+        position: relative;
+        inset-inline-end: awsui.$space-static-xxxs;
+      }
+    }
+
+    > :last-of-type > .step-layout > .connector-continuation {
+      display: none;
+    }
+  }
+}
+
 // Vertical custom steps: a column-1 "rail" stacks the icon above a connector that grows to fill
 // the full height of the step (header + details), keeping the vertical line continuous and
 // connecting consecutive steps regardless of header height. Placed after `.horizontal` so
@@ -156,6 +198,46 @@
   }
 }
 
+// Shared columns via subgrid: widest annotation | icon and connector | remaining content.
+.root > .list.with-annotation {
+  display: grid;
+  grid-template-columns: fit-content(50%) awsui.$space-static-l 1fr;
+
+  > .container {
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+
+    > .annotation {
+      grid-row: 1;
+      grid-column: 1;
+      padding-inline-end: awsui.$space-xxs;
+    }
+  }
+
+  // The step layout spans the icon and content columns.
+  > .container:not(.custom-vertical) {
+    > .step-layout {
+      grid-column: 2 / span 2;
+    }
+
+    > .details {
+      grid-column: 3;
+    }
+  }
+
+  // Custom DOM: rail in the icon column, header and details in the content column.
+  > .container.custom-vertical {
+    > .rail {
+      grid-column: 2;
+    }
+
+    > .content {
+      grid-column: 3;
+    }
+  }
+}
+
+// Hide the connector after the final custom/rail step. Placed last so its higher specificity
 .root > .list > .container.custom-vertical:last-of-type > .rail > .connector {
   display: none;
 }

package/lib/internal/scss/table/header-cell/styles.scss

@@ -150,6 +150,15 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   color: awsui.$color-text-column-sorting-icon;
 }
 
+.header-cell-main {
+  /* When the wrapper is present without a sort menu, behave as if it weren't there. */
+  display: contents;
+}
+
+.sort-priority-badge {
+  margin-inline-end: awsui.$space-xxs;
+}
+
 .edit-icon {
   margin-inline-start: awsui.$space-xxs;
   margin-block-start: awsui.$space-scaled-xxs;
@@ -162,15 +171,10 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   padding-inline-end: awsui.$space-s;
   @include cell-offset(awsui.$space-s);
 
-  .header-cell-group > &,
-  .header-cell-grouped > &,
-  .header-cell-spans-rows > & {
+  .header-cell-group > & {
     padding-block: awsui.$space-xxxs;
   }
 
-  .header-cell-sortable > & {
-    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
-  }
   &:focus {
     outline: none;
     text-decoration: none;
@@ -178,18 +182,44 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
 
   @include header-cell-focus-outline(awsui.$space-table-header-focus-outline-gutter);
 
-  .header-cell-disabled.header-cell-sorted > & {
+  .header-cell-grouped > .header-cell-main > &,
+  .header-cell-spans-rows > .header-cell-main > & {
+    padding-block: awsui.$space-xxxs;
+  }
+
+  .header-cell-sortable > .header-cell-main > & {
+    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
+  }
+
+  // The multi-sort priority badge renders alongside the sort arrow inside the
+  // absolutely-positioned sort icon. Reserve extra inline-end space for it so it
+  // does not overlap long, non-truncated header text (e.g. resizable columns off).
+  .header-cell-sortable > .header-cell-main > &.header-cell-content-multi-sorted {
+    padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs} + #{awsui.$space-m});
+  }
+
+  .header-cell-disabled.header-cell-sorted > .header-cell-main > & {
     & > .sorting-icon {
       color: awsui.$color-text-interactive-disabled;
     }
   }
 }
 
+.header-cell-main-with-menu {
+  display: flex;
+  align-items: center;
+}
+
+.header-cell-content-with-menu {
+  flex-grow: 1;
+  min-inline-size: 0;
+}
+
 .header-cell-spans-rows {
   block-size: 100%;
   vertical-align: bottom;
 
-  > .header-cell-content {
+  > .header-cell-main > .header-cell-content {
     block-size: 100%;
     box-sizing: border-box;
     display: flex;
@@ -206,11 +236,9 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
 }
 
 .header-cell-sortable:not(.header-cell-disabled) {
-  & > .header-cell-content {
-    cursor: pointer;
-  }
-  & > .header-cell-content:hover,
-  &.header-cell-sorted > .header-cell-content {
+  cursor: pointer;
+  & > .header-cell-main > .header-cell-content:hover,
+  &.header-cell-sorted > .header-cell-main > .header-cell-content {
     color: awsui.$color-text-interactive-active;
     & > .sorting-icon {
       color: awsui.$color-text-interactive-active;
@@ -251,7 +279,7 @@ settings icon in the pagination slot.
   &:first-child {
     @include header-cell-focus-outline-first(awsui.$space-scaled-xxs);
   }
-  &:first-child:not(.header-cell-grouped):not(.header-cell-group) > .header-cell-content {
+  &:first-child:not(.header-cell-grouped):not(.header-cell-group) > .header-cell-main > .header-cell-content {
     @include cell-offset(0px);
     @include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
   }

package/lib/internal/scss/table/styles.scss

@@ -37,6 +37,12 @@
     margin-inline-start: auto;
   }
 
+  &-clear-sort {
+    align-self: center;
+  }
+
+  &-clear-sort + &-pagination,
+  &-clear-sort + &-preferences,
   &-pagination + &-preferences {
     border-inline-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     box-sizing: border-box;

package/lib/internal/scss/tooltip/styles.scss

@@ -0,0 +1,22 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+
+.root {
+  @include styles.with-motion {
+    animation: awsui-motion-fade-in-tooltip awsui.$motion-duration-tooltip-enter awsui.$motion-easing-tooltip-enter;
+
+    @keyframes awsui-motion-fade-in-tooltip {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_17gah_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_17gah_1",
-  "root": "awsui_root_mx3cw_17gah_215",
-  "hidden": "awsui_hidden_mx3cw_17gah_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_17gah_301",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_17gah_313",
-  "header": "awsui_header_mx3cw_17gah_318",
-  "header-replacement": "awsui_header-replacement_mx3cw_17gah_319",
-  "action": "awsui_action_mx3cw_17gah_323",
-  "action-slot": "awsui_action-slot_mx3cw_17gah_327",
-  "action-button": "awsui_action-button_mx3cw_17gah_328",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_17gah_332",
-  "text": "awsui_text_mx3cw_17gah_363",
-  "icon": "awsui_icon_mx3cw_17gah_370",
-  "message": "awsui_message_mx3cw_17gah_373",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_17gah_377",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_17gah_381",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_17gah_385",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_17gah_389",
-  "content": "awsui_content_mx3cw_17gah_393",
-  "content-replacement": "awsui_content-replacement_mx3cw_17gah_394",
-  "dismiss": "awsui_dismiss_mx3cw_17gah_398",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_17gah_403",
-  "type-error": "awsui_type-error_mx3cw_17gah_407",
-  "type-warning": "awsui_type-warning_mx3cw_17gah_415",
-  "type-success": "awsui_type-success_mx3cw_17gah_423",
-  "type-info": "awsui_type-info_mx3cw_17gah_431"
+  "alert": "awsui_alert_mx3cw_15eqv_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_15eqv_1",
+  "root": "awsui_root_mx3cw_15eqv_215",
+  "hidden": "awsui_hidden_mx3cw_15eqv_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_15eqv_301",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_15eqv_313",
+  "header": "awsui_header_mx3cw_15eqv_318",
+  "header-replacement": "awsui_header-replacement_mx3cw_15eqv_319",
+  "action": "awsui_action_mx3cw_15eqv_323",
+  "action-slot": "awsui_action-slot_mx3cw_15eqv_327",
+  "action-button": "awsui_action-button_mx3cw_15eqv_328",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_15eqv_332",
+  "text": "awsui_text_mx3cw_15eqv_363",
+  "icon": "awsui_icon_mx3cw_15eqv_370",
+  "message": "awsui_message_mx3cw_15eqv_373",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_15eqv_377",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_15eqv_381",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_15eqv_385",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_15eqv_389",
+  "content": "awsui_content_mx3cw_15eqv_393",
+  "content-replacement": "awsui_content-replacement_mx3cw_15eqv_394",
+  "dismiss": "awsui_dismiss_mx3cw_15eqv_398",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_15eqv_403",
+  "type-error": "awsui_type-error_mx3cw_15eqv_407",
+  "type-warning": "awsui_type-warning_mx3cw_15eqv_415",
+  "type-success": "awsui_type-success_mx3cw_15eqv_423",
+  "type-info": "awsui_type-info_mx3cw_15eqv_431"
 };