@cloudscape-design/components-themeable 3.0.1343 → 3.0.1345

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "21c5e82cac052ddeb69a09b6dc20090543f19fff"
+  "commit": "7f29935f2cd22d493380f1731e1bccbdb7996676"
 }

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

@@ -24,6 +24,7 @@
 
 .alert {
   @include styles.styles-reset;
+  color: awsui.$color-text-alert-default;
   position: relative;
   display: flex;
   flex-direction: row;
@@ -144,17 +145,17 @@ $_border-colors: (
 );
 
 $_background-colors: (
-  'error': awsui.$color-background-status-error,
-  'warning': awsui.$color-background-status-warning,
-  'success': awsui.$color-background-status-success,
-  'info': awsui.$color-background-status-info,
+  'error': awsui.$color-background-alert-error,
+  'warning': awsui.$color-background-alert-warning,
+  'success': awsui.$color-background-alert-success,
+  'info': awsui.$color-background-alert-info,
 );
 
 $_text-colors: (
-  'error': awsui.$color-text-status-error,
-  'warning': awsui.$color-text-status-warning,
-  'success': awsui.$color-text-status-success,
-  'info': awsui.$color-text-status-info,
+  'error': awsui.$color-text-alert-icon-error,
+  'warning': awsui.$color-text-alert-icon-warning,
+  'success': awsui.$color-text-alert-icon-success,
+  'info': awsui.$color-text-alert-icon-info,
 );
 
 @each $type in map.keys($_text-colors) {

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

@@ -35,8 +35,5 @@ $toolbar-z-index: 1000;
 // Shared toolbar drawer component values
 $toolbar-vertical-panel-icon-offset: 14px;
 
-// Default collapsed navigation rail width
-$navigation-collapsed-width-default: 54px;
-
 $ai-drawer-background: #161d26;
 $ai-drawer-background: awsui.$color-background-layout-ai-drawer;

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

@@ -329,6 +329,8 @@ $ai-drawer-heider-height: 42px;
             }
 
             @include theming.dark-mode-only {
+              border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-layout;
+
               @include desktop-only {
                 &:has(+ .drawer-back-to-console-slot) {
                   border-inline-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;

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

@@ -8,7 +8,7 @@
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../../constants.scss' as constants;
 
-$collapsed-width: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+$collapsed-width: var(#{custom-props.$navigationCollapsedWidth}, awsui.$size-side-navigation-collapsed-width);
 
 .hide-navigation {
   position: absolute;

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

@@ -155,7 +155,7 @@
 
   &.navigation-collapsed {
     @include desktop-only {
-      inline-size: var(#{custom-props.$navigationCollapsedWidth}, constants.$navigation-collapsed-width-default);
+      inline-size: var(#{custom-props.$navigationCollapsedWidth}, awsui.$size-side-navigation-collapsed-width);
     }
   }
 }

package/lib/internal/scss/expandable-section/styles.scss

@@ -8,7 +8,13 @@
 @use '../container/shared' as container;
 @use '../internal/styles/utils/theming';
 
-@use './motion';
+// Show/hide animation (show = height leads, opacity trails; hide = equal, no delay).
+$reveal-enter-duration: awsui.$motion-duration-expandable-content-enter;
+$reveal-enter-easing: awsui.$motion-easing-expandable-content-enter;
+$reveal-enter-delay: calc(#{$reveal-enter-duration} / 3);
+$reveal-enter-motion: $reveal-enter-duration $reveal-enter-easing;
+$reveal-enter-delayed-motion: $reveal-enter-motion $reveal-enter-delay;
+$reveal-exit-motion: awsui.$motion-duration-show-quick $reveal-enter-easing;
 
 $icon-width-normal: awsui.$size-icon-normal;
 $icon-width-medium: awsui.$size-icon-medium;
@@ -38,6 +44,10 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 .icon {
   transform: rotate(-90deg);
 
+  @include styles.with-motion {
+    transition: transform awsui.$motion-duration-rotate-90 awsui.$motion-easing-rotate-90;
+  }
+
   &.expanded {
     transform: rotate(0deg);
   }
@@ -126,9 +136,20 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     &:not(.header-deprecated) {
       padding-inline-start: $icon-total-space-normal;
     }
+
+    // HIDE (collapsed): quick collapse, no delay
+    @include styles.with-motion {
+      transition: border-block-end-color $reveal-exit-motion;
+    }
+
     &.wrapper-expanded {
       padding-block-end: awsui.$space-scaled-xxs;
       border-block-end-color: awsui.$color-border-expandable-section-default;
+
+      // SHOW (expanded): border fades in with the same delay as content opacity so both appear together
+      @include styles.with-motion {
+        transition: border-block-end-color $reveal-enter-delayed-motion;
+      }
     }
   }
 
@@ -151,6 +172,11 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     padding-block: awsui.$space-container-header-top awsui.$space-container-header-bottom;
     padding-inline-end: container.$header-padding-horizontal;
 
+    // HIDE (collapsed state): padding settles back to symmetric top/bottom.
+    @include styles.with-motion {
+      transition: padding-block-end $reveal-exit-motion;
+    }
+
     &:not(.wrapper-expanded) {
       // Equal top and bottom padding so standalone header has vertical symmetry.
       padding-block-end: awsui.$space-container-header-top;
@@ -267,23 +293,82 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 .content {
   display: none;
 
+  &-expanded {
+    display: block;
+  }
+
+  &-compact {
+    padding-inline-start: $icon-total-space-normal;
+  }
+
+  // One-theme only: animated grid-template-rows reveal instead of the true/false display:none. VR keeps
+  // instantaneous display toggling, to prevent breaking reliance on synchronous isDisplayed()/isExisting() checks.
+  @include theming.one-theme-only {
+    display: grid;
+    grid-template-rows: 0fr;
+
+    // HIDE (collapsed state): quick collapse, no delay
+    @include styles.with-motion {
+      transition: grid-template-rows $reveal-exit-motion;
+    }
+
+    &-expanded {
+      grid-template-rows: 1fr;
+
+      // SHOW (expanded state): paced height opening, no delay — height leads.
+      @include styles.with-motion {
+        transition: grid-template-rows $reveal-enter-motion;
+      }
+    }
+  }
+}
+
+// One-theme only: inner wrapper that collapses to 0 height via the grid-row track.
+.content-inner {
+  @include theming.one-theme-only {
+    // overflow: visible lets negative-margin backgrounds (e.g. side-navigation
+    // active/hover/focus states) bleed past the inline edges.
+    overflow-x: visible;
+    // overflow: clip (not hidden, which would coerce x-axis to auto) still lets the grid-row track collapse.
+    overflow-y: clip;
+    min-block-size: 0;
+    opacity: 0;
+
+    // HIDE (collapsed state): quick opacity collapse, no delay.
+    @include styles.with-motion {
+      transition: opacity $reveal-exit-motion;
+    }
+
+    &-expanded {
+      opacity: 1;
+
+      // SHOW (expanded state): opacity fades in AFTER height has partially
+      // opened, creating a perceptible fade in the revealed space.
+      @include styles.with-motion {
+        transition: opacity $reveal-enter-delayed-motion;
+      }
+    }
+
+    &-settled {
+      overflow-y: visible;
+    }
+  }
+}
+
+// Padding lives here rather than outer content wrapper so the grid track can fully collapse to zero at 0fr.
+.content-inner-body {
   &-default,
   &-inline {
     padding-block: awsui.$space-scaled-xs;
-    padding-inline: 0;
   }
 
   &-footer {
     padding-block: awsui.$space-xs;
-    padding-inline: 0;
-  }
-
-  &-expanded {
-    display: block;
   }
 
-  &-compact {
-    padding-inline-start: $icon-total-space-normal;
+  &-container {
+    padding-block: awsui.$space-container-content-top awsui.$space-scaled-l;
+    padding-inline: awsui.$space-container-horizontal;
   }
 }
 
@@ -319,7 +404,6 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 }
 
-// When the expand/collapse icon is rendered at the end of the header.
 // For non-container variants the icon is rendered at the end of the headerButton
 // (taking the full width of the header). For the container variant the icon is
 // rendered as a sibling of the InternalHeader so it appears past any actions.
@@ -425,12 +509,16 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 }
 
-// Semantic wrapper around HeadingTag + actions in non-container variants
-.header-icon-end > .header-content {
-  flex: 1;
-  min-inline-size: 0;
+// min-block-size: 0 lets this grid item collapse to zero height when an ancestor
+// uses grid-template-rows: 0fr (side-navigation section header collapse).
+// Must remain global (not scoped to .header-icon-end) because the side-nav
+// collapse targets the header wrapper regardless of icon position.
+.header-content {
+  min-block-size: 0;
 }
 
+// In the end-icon layout, header content elements must shrink without overflowing.
+.header-icon-end > .header-content,
 .header-icon-end > .header-navigation-content {
   flex: 1;
   min-inline-size: 0;

package/lib/internal/scss/flashbar/collapsible.scss

@@ -304,7 +304,7 @@ the grid layout will be:
     padding-block: 0;
     #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
       var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+      var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-notification-stack-bar-focused);
 
     > .icon {
       @include styles.with-motion {

package/lib/internal/scss/flashbar/styles.scss

@@ -151,7 +151,7 @@
   border-inline-start-color: awsui.$color-border-status-success;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-success;
+    color: awsui.$color-text-flashbar-icon-success;
   }
 }
 
@@ -160,7 +160,7 @@
   border-inline-start-color: awsui.$color-border-status-error;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-error;
+    color: awsui.$color-text-flashbar-icon-error;
   }
 }
 
@@ -170,7 +170,7 @@
   border-inline-start-color: awsui.$color-border-status-info;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-info;
+    color: awsui.$color-text-flashbar-icon-info;
   }
 }
 
@@ -180,6 +180,6 @@
   border-inline-start-color: awsui.$color-border-status-warning;
 
   > .flash-body > .flash-focus-container > .flash-icon {
-    color: awsui.$color-text-status-warning;
+    color: awsui.$color-text-flashbar-icon-warning;
   }
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "21c5e82c";
+    $awsui-commit-hash: "7f29935f";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-esndbs;
 $minContentWidth: --awsui-min-content-width-esndbs;

package/lib/internal/scss/internal/styles/motion/mixins.scss

@@ -21,3 +21,12 @@
   }
 }
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+
+// A wrapper for animation related styles that should be applied to one-theme only.
+@mixin one-theme-with-motion($selector: '') {
+  @include theming.one-theme-only($selector) {
+    @include with-motion {
+      @content;
+    }
+  }
+}

package/lib/internal/scss/link/styles.scss

@@ -47,7 +47,7 @@
         letter-spacing: normal;
       }
       &.color-inverted {
-        color: awsui.$color-text-notification-default;
+        color: awsui.$color-text-link-inverted-default;
         text-decoration-color: currentColor;
         &:hover {
           color: awsui.$color-text-link-inverted-hover;
@@ -57,7 +57,7 @@
   }
 
   &.color-inverted {
-    color: awsui.$color-text-notification-default;
+    color: awsui.$color-text-link-inverted-default;
     &:not(.button) {
       text-decoration-line: underline;
       text-decoration-color: currentColor;

package/lib/internal/scss/progress-bar/styles.scss

@@ -129,6 +129,26 @@ $progress-value-background-color: var(
     @include general-progress-bar-style;
     background-color: $progress-value-background-color;
   }
+
+  &.progress-flash {
+    background-color: var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-flash);
+
+    &::-webkit-progress-bar {
+      background-color: var(#{custom-props.$progressBarBackgroundColor}, awsui.$color-background-progress-bar-flash);
+    }
+    &::-webkit-progress-value {
+      background-color: var(
+        #{custom-props.$progressValueBackgroundColor},
+        awsui.$color-background-progress-bar-value-flash
+      );
+    }
+    &::-moz-progress-bar {
+      background-color: var(
+        #{custom-props.$progressValueBackgroundColor},
+        awsui.$color-background-progress-bar-value-flash
+      );
+    }
+  }
 }
 
 .additional-info {