@cloudscape-design/components-themeable 3.0.1384 → 3.0.1386

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "ea381b71fcac6b61d0a81b1c96a90ae8419d9943"
+  "commit": "1bcfdb2f41dd554258b4637eae3e07190ab7eee7"
 }

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

@@ -34,8 +34,6 @@ $tokens: style-api.resolve($props, carrier);
     border-block-width: style-api.value($tokens, border-width, map.get($variant, 'border-width'));
     border-inline-width: style-api.value($tokens, border-width, map.get($variant, 'border-width'));
   }
-  position: relative;
-  text-decoration: none;
   @if map.get($variant, 'padding') {
     padding-block: style-api.value($tokens, padding-block, map.get($variant, 'padding'));
     padding-inline: style-api.value($tokens, padding-inline, map.get($variant, 'padding'));
@@ -55,7 +53,6 @@ $tokens: style-api.resolve($props, carrier);
     );
     color: style-api.value($tokens, color, var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color')));
     box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowHover}));
-    text-decoration: none;
   }
 
   &:active {
@@ -90,7 +87,6 @@ $tokens: style-api.resolve($props, carrier);
       var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'))
     );
     box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowDisabled}));
-    text-decoration: none;
     cursor: auto;
   }
 }
@@ -116,6 +112,7 @@ $tokens: style-api.resolve($props, carrier);
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;
+  position: relative;
 
   @each $variant in map.keys(constants.$variants) {
     &.variant-#{$variant} {

package/lib/internal/scss/icon/mixins.scss

@@ -91,7 +91,6 @@ $_icon-sizes: (
 
     &.size-#{$name} {
       inline-size: $size;
-      box-sizing: border-box;
       &-mapped-height {
         block-size: $supportedLineHeight;
         padding-block: $padding;
@@ -102,7 +101,6 @@ $_icon-sizes: (
       > img {
         inline-size: $size;
         block-size: $size;
-        vertical-align: top;
       }
 
       > svg {

package/lib/internal/scss/icon/styles.scss

@@ -12,18 +12,25 @@
   position: relative;
   display: inline-block;
   vertical-align: top;
+  box-sizing: border-box;
   &-flex-height {
     display: inline-flex;
     align-items: center;
   }
 
-  /* stylelint-disable-next-line selector-max-type */
+  // stylelint-disable selector-max-type
   > svg {
     // SVG is focusable by default
     // https://stackoverflow.com/questions/18646111/disable-onfocus-event-for-svg-element
     pointer-events: none;
   }
 
+  > svg,
+  > img {
+    vertical-align: top;
+  }
+  // stylelint-enable selector-max-type
+
   @include mixins.style-svg();
 
   @include mixins.make-icon-sizes;

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "ea381b71";
+    $awsui-commit-hash: "1bcfdb2f";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-ka4djm;
 $minContentWidth: --awsui-min-content-width-ka4djm;

package/lib/internal/scss/key-value-pairs/styles.scss

@@ -26,13 +26,20 @@
 }
 
 .term {
+  color: awsui.$color-text-label;
+  margin-block-end: awsui.$space-key-value-gap;
+  // Prevent inline elements in the label from adding extra space below the term.
+  // The internal label and info elements reset the line height to the desired value.
+  line-height: 0;
+}
+
+.key-label,
+.info {
   @include styles.font-label(
     awsui.$font-size-key-value-pairs-label,
     awsui.$line-height-key-value-pairs-label,
     awsui.$font-weight-key-value-pairs-label
   );
-  color: awsui.$color-text-label;
-  margin-block-end: awsui.$space-key-value-gap;
 }
 
 .key-label {

package/lib/internal/scss/space-between/styles.scss

@@ -80,3 +80,11 @@ $sizes-vertical: (
 .align-end {
   align-items: end;
 }
+
+// Propagate `align-items` to the internal wrapper element to prevent possible misalignments.
+// When the consumer-provided content is an inline element shorter than the line height,
+// this component-rendered child can be taller than it, giving room for misalignment.
+.child-aligned {
+  display: flex;
+  align-items: inherit;
+}

package/lib/internal/scss/spinner/mixins.scss

@@ -53,7 +53,6 @@ $_spinner-variants: (
       padding-block: $padding;
       padding-inline: $padding;
       margin-block: $margin;
-      box-sizing: border-box;
     }
   }
 }

package/lib/internal/scss/tiles/styles.scss

@@ -90,7 +90,6 @@ $selected-line: calc(awsui.$border-width-item-selected - 1px);
       & > .tile-container {
         margin-block: calc((#{$gutter} / 4));
         margin-inline: calc((#{$gutter} / 4));
-        box-sizing: border-box;
         @include make-column(12);
         &.breakpoint-xs {
           @include make-column(map.get($columns-setting, 'xs'));

package/lib/internal/scss/toggle/motion.scss

@@ -0,0 +1,76 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles/utils/theming' as theming;
+
+// Scopes @content to themes that opted in to $expressive-motion-themes in theming.scss.
+@mixin toggle-expressive-with-motion {
+  @media (prefers-reduced-motion: no-preference) {
+    @include theming.expressive-motion-only(':not(.awsui-motion-disabled):not(.awsui-mode-entering)') {
+      @content;
+    }
+  }
+}
+
+$travel-duration: awsui.$motion-duration-fast;
+$settle-easing: awsui.$motion-easing-refresh-only-a;
+$tail-duration: awsui.$motion-duration-refresh-only-medium;
+$tail-stretch: 4px;
+
+// Include inside the track rule.
+@mixin control {
+  @include toggle-expressive-with-motion {
+    transition: background-color $travel-duration $settle-easing;
+  }
+}
+
+// Include inside the handle rule. `$handle-size` is the handle's resting inline size.
+@mixin handle($handle-size) {
+  @include toggle-expressive-with-motion {
+    transition:
+      transform $travel-duration $settle-easing,
+      background-color $travel-duration $settle-easing;
+  }
+
+  // The tail only plays once the state has changed since mount.
+  &[data-awsui-motion-ready] {
+    @include toggle-expressive-with-motion {
+      animation: awsui-toggle-tail-off $tail-duration $settle-easing;
+    }
+    &.toggle-handle-checked {
+      @include toggle-expressive-with-motion {
+        animation-name: awsui-toggle-tail-on;
+      }
+    }
+  }
+
+  @if theming.has-expressive-motion() {
+    @keyframes awsui-toggle-tail-on {
+      0% {
+        inline-size: $handle-size;
+        margin-inline-start: 0;
+      }
+      35% {
+        inline-size: $handle-size + $tail-stretch;
+        margin-inline-start: -$tail-stretch;
+      }
+      100% {
+        inline-size: $handle-size;
+        margin-inline-start: 0;
+      }
+    }
+    // Going off, the trailing edge is the end edge, so the width alone grows.
+    @keyframes awsui-toggle-tail-off {
+      0% {
+        inline-size: $handle-size;
+      }
+      35% {
+        inline-size: $handle-size + $tail-stretch;
+      }
+      100% {
+        inline-size: $handle-size;
+      }
+    }
+  }
+}

package/lib/internal/scss/toggle/styles.scss

@@ -8,6 +8,7 @@
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/style-api' as style-api;
+@use './motion' as motion;
 
 $toggle-width: 2.4 * styles.$base-size;
 $toggle-height: 1.6 * styles.$base-size;
@@ -62,6 +63,7 @@ $description-tokens: style-api.resolve((color), public);
   &-readonly {
     background: style-api.value($control-tokens, background-color, awsui.$color-background-control-disabled);
   }
+  @include motion.control;
 }
 
 .toggle-handle {
@@ -106,4 +108,6 @@ $description-tokens: style-api.resolve((color), public);
       background: style-api.value($control-tokens, color, awsui.$color-foreground-control-read-only);
     }
   }
+
+  @include motion.handle($handle-size);
 }

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

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_184ir_13",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_184ir_1",
-  "root": "awsui_root_mx3cw_184ir_84",
-  "hidden": "awsui_hidden_mx3cw_184ir_119",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_184ir_182",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_184ir_194",
-  "header": "awsui_header_mx3cw_184ir_199",
-  "header-replacement": "awsui_header-replacement_mx3cw_184ir_200",
-  "action": "awsui_action_mx3cw_184ir_204",
-  "action-slot": "awsui_action-slot_mx3cw_184ir_208",
-  "action-button": "awsui_action-button_mx3cw_184ir_209",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_184ir_213",
-  "icon": "awsui_icon_mx3cw_184ir_245",
-  "text": "awsui_text_mx3cw_184ir_249",
-  "message": "awsui_message_mx3cw_184ir_259",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_184ir_263",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_184ir_267",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_184ir_271",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_184ir_275",
-  "content": "awsui_content_mx3cw_184ir_279",
-  "content-replacement": "awsui_content-replacement_mx3cw_184ir_280",
-  "dismiss": "awsui_dismiss_mx3cw_184ir_284",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_184ir_290",
-  "type-error": "awsui_type-error_mx3cw_184ir_294",
-  "type-warning": "awsui_type-warning_mx3cw_184ir_302",
-  "type-success": "awsui_type-success_mx3cw_184ir_310",
-  "type-info": "awsui_type-info_mx3cw_184ir_318"
+  "alert": "awsui_alert_mx3cw_xzff1_13",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_xzff1_1",
+  "root": "awsui_root_mx3cw_xzff1_84",
+  "hidden": "awsui_hidden_mx3cw_xzff1_119",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_xzff1_182",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_xzff1_194",
+  "header": "awsui_header_mx3cw_xzff1_199",
+  "header-replacement": "awsui_header-replacement_mx3cw_xzff1_200",
+  "action": "awsui_action_mx3cw_xzff1_204",
+  "action-slot": "awsui_action-slot_mx3cw_xzff1_208",
+  "action-button": "awsui_action-button_mx3cw_xzff1_209",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_xzff1_213",
+  "icon": "awsui_icon_mx3cw_xzff1_245",
+  "text": "awsui_text_mx3cw_xzff1_249",
+  "message": "awsui_message_mx3cw_xzff1_259",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_xzff1_263",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_xzff1_267",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_xzff1_271",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_xzff1_275",
+  "content": "awsui_content_mx3cw_xzff1_279",
+  "content-replacement": "awsui_content-replacement_mx3cw_xzff1_280",
+  "dismiss": "awsui_dismiss_mx3cw_xzff1_284",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_xzff1_290",
+  "type-error": "awsui_type-error_mx3cw_xzff1_294",
+  "type-warning": "awsui_type-warning_mx3cw_xzff1_302",
+  "type-success": "awsui_type-success_mx3cw_xzff1_310",
+  "type-info": "awsui_type-info_mx3cw_xzff1_318"
 };
   

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

@@ -10,10 +10,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_alert_mx3cw_184ir_13:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_mx3cw_184ir_1 var(--motion-duration-show-paced-i87eux, 180ms) var(--motion-easing-show-paced-r4ee22, ease-out);
+.awsui_alert_mx3cw_xzff1_13:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_mx3cw_xzff1_1 var(--motion-duration-show-paced-i87eux, 180ms) var(--motion-easing-show-paced-r4ee22, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_mx3cw_184ir_1 {
+@keyframes awsui_awsui-motion-fade-in_mx3cw_xzff1_1 {
   from {
     opacity: 0.2;
   }
@@ -22,12 +22,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_alert_mx3cw_184ir_13:not(#\9) {
+  .awsui_alert_mx3cw_xzff1_13:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_alert_mx3cw_184ir_13:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_184ir_13:not(#\9) {
+.awsui-motion-disabled .awsui_alert_mx3cw_xzff1_13:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_xzff1_13:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -80,8 +80,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   syntax: "*";
   inherits: false;
 }
-/* awsui:style-api-slot name=root tokens=color, background-color, border-color, border-width, border-radius, padding-block, padding-inline, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline */
-.awsui_root_mx3cw_184ir_84:not(#\9) {
+/* awsui:style-api-slot name=root tokens=color, background-color, border-color, border-width, border-radius, padding-block, padding-inline, focus-ring-color, focus-ring-width, focus-ring-radius, focus-ring-gutter-block, focus-ring-gutter-inline properties= */
+.awsui_root_mx3cw_xzff1_84:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -116,11 +116,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
   display: block;
 }
-.awsui_root_mx3cw_184ir_84.awsui_hidden_mx3cw_184ir_119:not(#\9) {
+.awsui_root_mx3cw_xzff1_84.awsui_hidden_mx3cw_xzff1_119:not(#\9) {
   display: none;
 }
 
-.awsui_alert_mx3cw_184ir_13:not(#\9) {
+.awsui_alert_mx3cw_xzff1_13:not(#\9) {
   --awsui-internal-style-color: var(--awsui-style-color);
   --awsui-internal-style-background-color: var(--awsui-style-background-color);
   --awsui-internal-style-border-color: var(--awsui-style-border-color);
@@ -179,7 +179,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background-color: var(--awsui-internal-style-background-color, var(--color-background-container-content-mjfil9, #ffffff));
 }
 
-.awsui_alert-wrapper_mx3cw_184ir_182:not(#\9) {
+.awsui_alert-wrapper_mx3cw_xzff1_182:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -187,46 +187,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   column-gap: var(--space-alert-action-left-6trzof, 20px);
 }
 
-.awsui_hidden_mx3cw_184ir_119:not(#\9) {
+.awsui_hidden_mx3cw_xzff1_119:not(#\9) {
   display: none;
 }
 
-.awsui_initial-hidden_mx3cw_184ir_194:not(#\9) {
+.awsui_initial-hidden_mx3cw_xzff1_194:not(#\9) {
   overflow: hidden;
   block-size: 0;
 }
 
-.awsui_header_mx3cw_184ir_199:not(#\9),
-.awsui_header-replacement_mx3cw_184ir_200:not(#\9) {
+.awsui_header_mx3cw_xzff1_199:not(#\9),
+.awsui_header-replacement_mx3cw_xzff1_200:not(#\9) {
   font-weight: var(--font-weight-alert-header-ym3e4s, 700);
 }
 
-.awsui_action_mx3cw_184ir_204:not(#\9) {
+.awsui_action_mx3cw_xzff1_204:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_action-slot_mx3cw_184ir_208:not(#\9),
-.awsui_action-button_mx3cw_184ir_209:not(#\9) {
+.awsui_action-slot_mx3cw_xzff1_208:not(#\9),
+.awsui_action-button_mx3cw_xzff1_209:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9) {
+.awsui_alert-focus-wrapper_mx3cw_xzff1_213:not(#\9) {
   flex: 1;
   min-inline-size: 70%;
   display: grid;
   grid-template-columns: min-content auto;
 }
-.awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus {
+.awsui_alert-focus-wrapper_mx3cw_xzff1_213:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_xzff1_213:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_xzff1_213:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--awsui-internal-style-focus-ring-gutter-inline, var(--space-button-focus-outline-gutter-dzjnny, 3px)) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_184ir_213:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_xzff1_213:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -241,84 +241,84 @@ body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_184ir_213:n
   box-shadow: 0 0 0 var(--awsui-internal-style-focus-ring-width, var(--awsui-alert-focus-ring-border-width-ka4djm, 2px)) var(--awsui-internal-style-focus-ring-color, var(--awsui-alert-focus-ring-border-color-ka4djm, var(--color-border-item-focused-sewkzn, #0073bb)));
 }
 
-/* awsui:style-api-slot name=icon tokens=color */
-.awsui_icon_mx3cw_184ir_245:not(#\9) {
+/* awsui:style-api-slot name=icon tokens=color properties= */
+.awsui_icon_mx3cw_xzff1_245:not(#\9) {
   --awsui-internal-style-color: var(--awsui-style-color);
 }
 
-.awsui_text_mx3cw_184ir_249:not(#\9) {
+.awsui_text_mx3cw_xzff1_249:not(#\9) {
   min-inline-size: 0;
   padding-block: var(--border-width-button-lffd4t, 1px);
   padding-inline: 0;
   margin-block: var(--space-scaled-xxs-j00t0m, 4px);
   margin-inline: var(--space-xxs-3o1yoq, 4px);
 }
-.awsui_text_mx3cw_184ir_249.awsui_icon_mx3cw_184ir_245:not(#\9) {
+.awsui_text_mx3cw_xzff1_249.awsui_icon_mx3cw_xzff1_245:not(#\9) {
   margin-inline-start: 0;
 }
-.awsui_text_mx3cw_184ir_249.awsui_message_mx3cw_184ir_259:not(#\9) {
+.awsui_text_mx3cw_xzff1_249.awsui_message_mx3cw_xzff1_259:not(#\9) {
   margin-inline-end: var(--space-alert-message-right-3i2sx2, 0px);
 }
 
-.awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
+.awsui_action-wrapped_mx3cw_xzff1_263:not(#\9) {
   margin-block-end: var(--space-xxs-3o1yoq, 4px);
 }
 
-.awsui_icon-size-medium_mx3cw_184ir_267 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
+.awsui_icon-size-medium_mx3cw_xzff1_267 > .awsui_alert-wrapper_mx3cw_xzff1_182 > .awsui_action-wrapped_mx3cw_xzff1_263:not(#\9) {
   margin-inline-start: calc(var(--size-icon-medium-0cbske, 16px) + var(--space-xs-m9b7jf, 8px));
 }
 
-.awsui_icon-size-big_mx3cw_184ir_271 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
+.awsui_icon-size-big_mx3cw_xzff1_271 > .awsui_alert-wrapper_mx3cw_xzff1_182 > .awsui_action-wrapped_mx3cw_xzff1_263:not(#\9) {
   margin-inline-start: calc(var(--size-icon-big-z6z1yl, 32px) + var(--space-xs-m9b7jf, 8px));
 }
 
-.awsui_icon-size-normal_mx3cw_184ir_275 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_action-wrapped_mx3cw_184ir_263:not(#\9) {
+.awsui_icon-size-normal_mx3cw_xzff1_275 > .awsui_alert-wrapper_mx3cw_xzff1_182 > .awsui_action-wrapped_mx3cw_xzff1_263:not(#\9) {
   margin-inline-start: calc(var(--size-icon-normal-311gry, 16px) + var(--space-xs-m9b7jf, 8px));
 }
 
-.awsui_content_mx3cw_184ir_279:not(#\9),
-.awsui_content-replacement_mx3cw_184ir_280:not(#\9) {
+.awsui_content_mx3cw_xzff1_279:not(#\9),
+.awsui_content-replacement_mx3cw_xzff1_280:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dismiss_mx3cw_184ir_284:not(#\9) {
+.awsui_dismiss_mx3cw_xzff1_284:not(#\9) {
   margin-inline-end: calc(-1 * var(--space-xxs-3o1yoq, 4px));
   margin-inline-start: var(--space-s-kll7oj, 12px);
 }
 
 /* awsui:style-api-slot name=dismissButton component=button slot=root */
-.awsui_dismiss-button_mx3cw_184ir_290:not(#\9) {
+.awsui_dismiss-button_mx3cw_xzff1_290:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_type-error_mx3cw_184ir_294:not(#\9) {
+.awsui_type-error_mx3cw_xzff1_294:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-error-nczvil, #d13212));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-error-dpj69i, #fdf3f1));
 }
-.awsui_type-error_mx3cw_184ir_294 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+.awsui_type-error_mx3cw_xzff1_294 > .awsui_alert-wrapper_mx3cw_xzff1_182 > .awsui_alert-focus-wrapper_mx3cw_xzff1_213 > .awsui_icon_mx3cw_xzff1_245:not(#\9) {
   color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-error-6ivbnd, #d13212)));
 }
 
-.awsui_type-warning_mx3cw_184ir_302:not(#\9) {
+.awsui_type-warning_mx3cw_xzff1_302:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-warning-zj1tu9, #906806));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-warning-021z3n, #fffef0));
 }
-.awsui_type-warning_mx3cw_184ir_302 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+.awsui_type-warning_mx3cw_xzff1_302 > .awsui_alert-wrapper_mx3cw_xzff1_182 > .awsui_alert-focus-wrapper_mx3cw_xzff1_213 > .awsui_icon_mx3cw_xzff1_245:not(#\9) {
   color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-warning-lan9qr, #906806)));
 }
 
-.awsui_type-success_mx3cw_184ir_310:not(#\9) {
+.awsui_type-success_mx3cw_xzff1_310:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-success-zsy8d6, #1d8102));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-success-9dyn87, #f2f8f0));
 }
-.awsui_type-success_mx3cw_184ir_310 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+.awsui_type-success_mx3cw_xzff1_310 > .awsui_alert-wrapper_mx3cw_xzff1_182 > .awsui_alert-focus-wrapper_mx3cw_xzff1_213 > .awsui_icon_mx3cw_xzff1_245:not(#\9) {
   color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-success-1ldpm2, #1d8102)));
 }
 
-.awsui_type-info_mx3cw_184ir_318:not(#\9) {
+.awsui_type-info_mx3cw_xzff1_318:not(#\9) {
   border-color: var(--awsui-internal-style-border-color, var(--color-border-status-info-e5c14y, #0073bb));
   background-color: var(--awsui-internal-style-background-color, var(--color-background-alert-info-lqhdg0, #f1faff));
 }
-.awsui_type-info_mx3cw_184ir_318 > .awsui_alert-wrapper_mx3cw_184ir_182 > .awsui_alert-focus-wrapper_mx3cw_184ir_213 > .awsui_icon_mx3cw_184ir_245:not(#\9) {
+.awsui_type-info_mx3cw_xzff1_318 > .awsui_alert-wrapper_mx3cw_xzff1_182 > .awsui_alert-focus-wrapper_mx3cw_xzff1_213 > .awsui_icon_mx3cw_xzff1_245:not(#\9) {
   color: var(--awsui-internal-style-color, var(--awsui-alert-icon-color-ka4djm, var(--color-text-alert-icon-info-ud5q0o, #0073bb)));
 }

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

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "alert": "awsui_alert_mx3cw_184ir_13",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_184ir_1",
-  "root": "awsui_root_mx3cw_184ir_84",
-  "hidden": "awsui_hidden_mx3cw_184ir_119",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_184ir_182",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_184ir_194",
-  "header": "awsui_header_mx3cw_184ir_199",
-  "header-replacement": "awsui_header-replacement_mx3cw_184ir_200",
-  "action": "awsui_action_mx3cw_184ir_204",
-  "action-slot": "awsui_action-slot_mx3cw_184ir_208",
-  "action-button": "awsui_action-button_mx3cw_184ir_209",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_184ir_213",
-  "icon": "awsui_icon_mx3cw_184ir_245",
-  "text": "awsui_text_mx3cw_184ir_249",
-  "message": "awsui_message_mx3cw_184ir_259",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_184ir_263",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_184ir_267",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_184ir_271",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_184ir_275",
-  "content": "awsui_content_mx3cw_184ir_279",
-  "content-replacement": "awsui_content-replacement_mx3cw_184ir_280",
-  "dismiss": "awsui_dismiss_mx3cw_184ir_284",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_184ir_290",
-  "type-error": "awsui_type-error_mx3cw_184ir_294",
-  "type-warning": "awsui_type-warning_mx3cw_184ir_302",
-  "type-success": "awsui_type-success_mx3cw_184ir_310",
-  "type-info": "awsui_type-info_mx3cw_184ir_318"
+  "alert": "awsui_alert_mx3cw_xzff1_13",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_xzff1_1",
+  "root": "awsui_root_mx3cw_xzff1_84",
+  "hidden": "awsui_hidden_mx3cw_xzff1_119",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_xzff1_182",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_xzff1_194",
+  "header": "awsui_header_mx3cw_xzff1_199",
+  "header-replacement": "awsui_header-replacement_mx3cw_xzff1_200",
+  "action": "awsui_action_mx3cw_xzff1_204",
+  "action-slot": "awsui_action-slot_mx3cw_xzff1_208",
+  "action-button": "awsui_action-button_mx3cw_xzff1_209",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_xzff1_213",
+  "icon": "awsui_icon_mx3cw_xzff1_245",
+  "text": "awsui_text_mx3cw_xzff1_249",
+  "message": "awsui_message_mx3cw_xzff1_259",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_xzff1_263",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_xzff1_267",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_xzff1_271",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_xzff1_275",
+  "content": "awsui_content_mx3cw_xzff1_279",
+  "content-replacement": "awsui_content-replacement_mx3cw_xzff1_280",
+  "dismiss": "awsui_dismiss_mx3cw_xzff1_284",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_xzff1_290",
+  "type-error": "awsui_type-error_mx3cw_xzff1_294",
+  "type-warning": "awsui_type-warning_mx3cw_xzff1_302",
+  "type-success": "awsui_type-success_mx3cw_xzff1_310",
+  "type-info": "awsui_type-info_mx3cw_xzff1_318"
 };
   

package/lib/internal/template/app-layout/utils/feature-flags.d.ts

@@ -1,3 +1,4 @@
 export declare const useAppLayoutFlagEnabled: () => boolean | undefined;
 export declare const useAppLayoutToolbarDesignEnabled: () => boolean | undefined;
+export declare const isAppLayoutHideToolbarBreadcrumbsEnabled: () => boolean;
 //# sourceMappingURL=feature-flags.d.ts.map

package/lib/internal/template/app-layout/utils/feature-flags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/feature-flags.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,uBAAuB,2BAGnC,CAAC;AAMF,eAAO,MAAM,gCAAgC,2BAK5C,CAAC"}
+{"version":3,"file":"feature-flags.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/feature-flags.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,uBAAuB,2BAGnC,CAAC;AAMF,eAAO,MAAM,gCAAgC,2BAK5C,CAAC;AAEF,eAAO,MAAM,wCAAwC,eAA2D,CAAC"}

package/lib/internal/template/app-layout/utils/feature-flags.js

@@ -19,4 +19,5 @@ export const useAppLayoutToolbarDesignEnabled = () => {
     const isToolbarPublic = (_a = useContext(AppLayoutToolbarPublicContext)) !== null && _a !== void 0 ? _a : false;
     return isToolbarPublic || isToolbarPrivate;
 };
+export const isAppLayoutHideToolbarBreadcrumbsEnabled = () => !!getGlobalFlag('appLayoutHideToolbarBreadcrumbs');
 //# sourceMappingURL=feature-flags.js.map

package/lib/internal/template/app-layout/utils/feature-flags.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-flags.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/feature-flags.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEnF,uGAAuG;AACvG,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,OAAO,SAAS,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC9F,CAAC,CAAC;AAEF,gDAAgD;AAChD,6HAA6H;AAC7H,qHAAqH;AACrH,+EAA+E;AAC/E,MAAM,CAAC,MAAM,gCAAgC,GAAG,GAAG,EAAE;;IACnD,MAAM,gBAAgB,GAAG,uBAAuB,EAAE,CAAC;IACnD,MAAM,eAAe,GAAG,MAAA,UAAU,CAAC,6BAA6B,CAAC,mCAAI,KAAK,CAAC;IAE3E,OAAO,eAAe,IAAI,gBAAgB,CAAC;AAC7C,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext } from 'react';\n\nimport { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { AppLayoutToolbarPublicContext } from '../visual-refresh-toolbar/contexts';\n\n//   useAppLayoutFlagEnabled is set to true only in consoles. It controls if AppLayout theme is toolbar\nexport const useAppLayoutFlagEnabled = () => {\n  const isRefresh = useVisualRefresh();\n  return isRefresh && (getGlobalFlag('appLayoutWidget') || getGlobalFlag('appLayoutToolbar'));\n};\n\n// AppLayoutToolbar component will have 2 modes:\n//   - for those who use AppLayout component with toolbar. they expect to have all existing features, including deduplication\n//   - for non-console usage. in this case we don't need \"hidden\" features to be enabled, now it's only deduplication\n// the hooks I want to name will exist only internally to control this behavior\nexport const useAppLayoutToolbarDesignEnabled = () => {\n  const isToolbarPrivate = useAppLayoutFlagEnabled();\n  const isToolbarPublic = useContext(AppLayoutToolbarPublicContext) ?? false;\n\n  return isToolbarPublic || isToolbarPrivate;\n};\n"]}
+{"version":3,"file":"feature-flags.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/feature-flags.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAE9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,6BAA6B,EAAE,MAAM,oCAAoC,CAAC;AAEnF,uGAAuG;AACvG,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,EAAE;IAC1C,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,OAAO,SAAS,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,IAAI,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC;AAC9F,CAAC,CAAC;AAEF,gDAAgD;AAChD,6HAA6H;AAC7H,qHAAqH;AACrH,+EAA+E;AAC/E,MAAM,CAAC,MAAM,gCAAgC,GAAG,GAAG,EAAE;;IACnD,MAAM,gBAAgB,GAAG,uBAAuB,EAAE,CAAC;IACnD,MAAM,eAAe,GAAG,MAAA,UAAU,CAAC,6BAA6B,CAAC,mCAAI,KAAK,CAAC;IAE3E,OAAO,eAAe,IAAI,gBAAgB,CAAC;AAC7C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,wCAAwC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useContext } from 'react';\n\nimport { getGlobalFlag } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport { AppLayoutToolbarPublicContext } from '../visual-refresh-toolbar/contexts';\n\n//   useAppLayoutFlagEnabled is set to true only in consoles. It controls if AppLayout theme is toolbar\nexport const useAppLayoutFlagEnabled = () => {\n  const isRefresh = useVisualRefresh();\n  return isRefresh && (getGlobalFlag('appLayoutWidget') || getGlobalFlag('appLayoutToolbar'));\n};\n\n// AppLayoutToolbar component will have 2 modes:\n//   - for those who use AppLayout component with toolbar. they expect to have all existing features, including deduplication\n//   - for non-console usage. in this case we don't need \"hidden\" features to be enabled, now it's only deduplication\n// the hooks I want to name will exist only internally to control this behavior\nexport const useAppLayoutToolbarDesignEnabled = () => {\n  const isToolbarPrivate = useAppLayoutFlagEnabled();\n  const isToolbarPublic = useContext(AppLayoutToolbarPublicContext) ?? false;\n\n  return isToolbarPublic || isToolbarPrivate;\n};\n\nexport const isAppLayoutHideToolbarBreadcrumbsEnabled = () => !!getGlobalFlag('appLayoutHideToolbarBreadcrumbs');\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts

@@ -88,7 +88,7 @@ export interface AppLayoutInternals {
     onActiveAiDrawerResize: (size: number) => void;
 }
 export interface AppLayoutWidgetizedState extends AppLayoutInternals {
-    breadcrumbsExternallyOwned?: boolean;
+    hideBreadcrumbsInToolbar?: boolean;
     reportOwnBreadcrumbsProps?: BreadcrumbsSlotContextType['reportOwnBreadcrumbsProps'];
     isNested: boolean;
     verticalOffsets: VerticalLayoutOutput;