@cloudscape-design/components-themeable 3.0.1344 → 3.0.1345

package/lib/internal/manifest.json

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

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/internal/generated/custom-css-properties/index.scss

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "abe35802";
+    $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;
+    }
+  }
+}