@cloudscape-design/components-themeable 3.0.769 → 3.0.771

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "093fdc0ea9a52ac78f1e8db74933f74aef92c089"
+  "commit": "337ca4866ff03fa741b05d1140eaeebf8dfd74bc"
 }

package/lib/internal/scss/alert/motion.scss

@@ -8,7 +8,7 @@
 
 .alert {
   @include styles.with-motion {
-    @include styles.animation-fade-in;
     animation: awsui-motion-fade-in awsui.$motion-duration-show-paced awsui.$motion-easing-show-paced;
+    @include styles.animation-fade-in;
   }
 }

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

@@ -39,10 +39,6 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 }
 
 .anchor-item {
-  @include styles.with-motion {
-    transition: awsui.$motion-duration-slow;
-    transition-property: all;
-  }
   @include styles.font-body-m;
 
   color: awsui.$color-text-body-secondary;
@@ -50,6 +46,11 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
   margin-block: awsui.$space-scaled-xxs;
   margin-inline: 0;
 
+  @include styles.with-motion {
+    transition: awsui.$motion-duration-slow;
+    transition-property: all;
+  }
+
   &--active {
     position: relative;
 
@@ -70,15 +71,6 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
 }
 
 .anchor-link {
-  @include styles.with-motion {
-    transition: awsui.$motion-duration-slow;
-    transition-property: all;
-  }
-
-  @include focus-visible.when-visible {
-    @include styles.link-focus;
-  }
-
   @include styles.font-body-m;
 
   align-items: baseline;
@@ -88,6 +80,15 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
   font-weight: styles.$font-weight-normal;
   text-decoration: none;
 
+  @include styles.with-motion {
+    transition: awsui.$motion-duration-slow;
+    transition-property: all;
+  }
+
+  @include focus-visible.when-visible {
+    @include styles.link-focus;
+  }
+
   &:hover {
     color: awsui.$color-text-accent;
   }

package/lib/internal/scss/app-layout/visual-refresh/trigger-button.scss

@@ -19,7 +19,7 @@
   }
 }
 
-@mixin trigger-button-styles {
+.trigger-button-styles {
   background: awsui.$color-background-layout-toggle-default;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
@@ -38,7 +38,6 @@
 }
 
 .trigger-badge-wrapper {
-  @include trigger-button-styles();
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -57,12 +56,11 @@
 }
 
 /*
-Warning! If these design tokens for width change it will adversely impact 
-the calculation used to determine the Split Panel maximum width in the 
+Warning! If these design tokens for width change it will adversely impact
+the calculation used to determine the Split Panel maximum width in the
 handleSplitPanelMaxWidth function in the context.
 */
 .trigger {
-  @include trigger-button-styles();
   border-block: none;
   border-inline: none;
   padding-inline: 0;
@@ -106,6 +104,10 @@ handleSplitPanelMaxWidth function in the context.
   }
 }
 
+.trigger-wrapper-tooltip-visible {
+  /* used in test-utils*/
+}
+
 .dot {
   position: absolute;
   inline-size: 9px;
@@ -118,3 +120,7 @@ handleSplitPanelMaxWidth function in the context.
   inset-block-start: 0;
   inset-inline-end: 0;
 }
+
+.trigger-tooltip {
+  /* used in test-utils */
+}

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

@@ -153,11 +153,11 @@
   margin-block-start: awsui.$space-scaled-s;
   margin-block-end: awsui.$space-layout-content-bottom;
   &-disable-paddings {
+    margin-block: 0;
     grid-column: 1 / -1;
     @include desktop-only {
       grid-column: 2 / span 3;
     }
-    margin-block: 0;
   }
 }
 

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

@@ -19,7 +19,7 @@
   }
 }
 
-@mixin trigger-button-styles {
+.trigger-button-styles {
   background: transparent;
   color: awsui.$color-text-interactive-default;
   border-start-start-radius: 50%;
@@ -45,7 +45,6 @@
 }
 
 .trigger-badge-wrapper {
-  @include trigger-button-styles();
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -63,13 +62,7 @@
   }
 }
 
-/*
-Warning! If these design tokens for width change it will adversely impact 
-the calculation used to determine the Split Panel maximum width in the 
-handleSplitPanelMaxWidth function in the context.
-*/
 .trigger {
-  @include trigger-button-styles();
   border-block: none;
   border-inline: none;
   cursor: pointer;
@@ -106,6 +99,10 @@ handleSplitPanelMaxWidth function in the context.
   border-end-end-radius: 50%;
 }
 
+.trigger-wrapper-tooltip-visible {
+  /* used in test-utils*/
+}
+
 .dot {
   position: absolute;
   inline-size: 8px;
@@ -118,3 +115,7 @@ handleSplitPanelMaxWidth function in the context.
   inset-block-start: 1px;
   inset-inline-end: 1px;
 }
+
+.trigger-tooltip {
+  /* used in test-utils */
+}

package/lib/internal/scss/attribute-editor/motion.scss

@@ -8,8 +8,8 @@
 
 .empty-appear {
   @include styles.with-motion {
-    @include styles.animation-fade-in;
     animation: awsui-motion-fade-in tokens.$motion-duration-transition-show-paced
       tokens.$motion-easing-transition-show-paced;
+    @include styles.animation-fade-in;
   }
 }

package/lib/internal/scss/breadcrumb-group/item/styles.scss

@@ -11,7 +11,8 @@
   display: none;
 }
 
-.breadcrumb {
+.breadcrumb,
+.ghost-breadcrumb {
   display: flex;
 
   > .icon {
@@ -21,7 +22,15 @@
   }
 
   > .anchor {
+    min-inline-size: 0;
+    overflow: hidden;
     @include styles.link-inline('body-m');
+    > .text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+    }
 
     @include focus-visible.when-visible {
       @include styles.link-focus;
@@ -40,20 +49,6 @@
     }
   }
 }
-.compressed {
-  min-inline-size: 0;
-  overflow: hidden;
-  > .text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-  }
-}
-.virtual-item {
-  @include styles.awsui-util-hide;
-  visibility: hidden;
-}
 
 .text-hidden {
   display: none;

package/lib/internal/scss/breadcrumb-group/styles.scss

@@ -13,11 +13,6 @@
   padding-block: awsui.$space-xxs;
   padding-inline: 0;
 
-  > .item {
-    @include styles.styles-reset;
-    display: inline;
-  }
-
   > .breadcrumb-group-list {
     display: flex;
     align-items: center;
@@ -27,7 +22,13 @@
     margin-inline: 0;
     list-style: none;
     inline-size: 100%;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+
+    &.ghost {
+      flex-wrap: wrap;
+      position: absolute;
+      inset-inline-start: -9000px;
+    }
 
     > .item,
     > .ellipsis {
@@ -38,43 +39,22 @@
       margin-inline: 0;
     }
 
-    > .ellipsis {
+    > .item.hide {
       display: none;
-
-      > .icon {
-        margin-block: 0;
-        margin-inline: styles.$base-size;
-        color: awsui.$color-text-breadcrumb-icon;
-      }
     }
-  }
 
-  // In the smallest screen, breadcrumbs truncate into
-  // BC1 > ... > BCL
-  // and we apply ellipsis if the breadcrumb items are too long
-  &.mobile {
-    > .breadcrumb-group-list {
-      flex-wrap: nowrap;
+    > .ellipsis {
+      display: none;
 
-      > .ellipsis {
+      &.visible {
         display: flex;
         flex-shrink: 0;
       }
-      > .item {
-        min-inline-size: 0;
-        &:not(:first-child):not(:last-child) {
-          display: none;
-        }
-      }
-    }
-  }
 
-  // Test utils rely on the ellipsis being present even if there are
-  // only 2 items in the list, so we display but hide it.
-  &.mobile-short {
-    > .breadcrumb-group-list {
-      > .ellipsis {
-        display: none;
+      > .icon {
+        margin-block: 0;
+        margin-inline: styles.$base-size;
+        color: awsui.$color-text-breadcrumb-icon;
       }
     }
   }

package/lib/internal/scss/button-dropdown/category-elements/styles.scss

@@ -101,6 +101,10 @@
   inline-size: awsui.$space-m;
   display: inline-block;
 
+  @include styles.with-motion {
+    transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
+  }
+
   &-up {
     transform: rotate(-180deg);
   }
@@ -112,10 +116,6 @@
       transform: rotate(90deg);
     }
   }
-
-  @include styles.with-motion {
-    transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
-  }
 }
 
 .items-list-container {

package/lib/internal/scss/button-dropdown/item-element/styles.scss

@@ -62,8 +62,8 @@
   text-decoration: none;
 
   &.link-style {
-    @include styles.link-inline('body-m');
     padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs});
+    @include styles.link-inline('body-m');
   }
 
   &:focus {

package/lib/internal/scss/calendar/motion.scss

@@ -8,8 +8,8 @@
 
 .calendar {
   @include styles.with-motion {
-    @include styles.animation-fade-in-0;
     animation: awsui-motion-fade-in-0 awsui.$motion-duration-show-quick awsui.$motion-easing-show-quick;
     animation-fill-mode: both;
+    @include styles.animation-fade-in-0;
   }
 }

package/lib/internal/scss/calendar/styles.scss

@@ -23,6 +23,7 @@
 }
 
 .calendar {
+  @include styles.styles-reset;
   display: block;
   inline-size: awsui.$size-calendar-grid-width;
   overflow: auto;
@@ -200,8 +201,6 @@
       }
     }
   }
-
-  @include styles.styles-reset;
 }
 
 .disabled-reason-tooltip {

package/lib/internal/scss/code-editor/resizable-box/styles.scss

@@ -25,6 +25,7 @@
   box-sizing: border-box;
   background-position: bottom right;
   background-size: awsui.$space-l;
+  cursor: ns-resize;
   @include utils.background-inline-svg(
     $path: '../assets/resize-handler.svg',
     $stroke: 'colorStrokeCodeEditorResizeHandler'
@@ -33,8 +34,6 @@
   @include styles.with-direction('rtl') {
     transform: scaleX(-1);
   }
-
-  cursor: ns-resize;
 }
 
 .resize-active {

package/lib/internal/scss/code-editor/styles.scss

@@ -27,9 +27,9 @@
   inset: 0;
 
   &:focus {
-    @include styles.focus-highlight(3px);
     position: absolute;
     overflow: visible;
+    @include styles.focus-highlight(3px);
   }
 }
 
@@ -44,13 +44,13 @@
   vertical-align: middle;
   border-block-start: awsui.$border-item-width solid awsui.$color-border-code-editor-default;
   background-color: awsui.$color-background-code-editor-status-bar;
+  @include styles.text-wrapping;
+
   &-with-hidden-pane {
     border-end-start-radius: awsui.$border-radius-code-editor;
     border-end-end-radius: awsui.$border-radius-code-editor;
   }
 
-  @include styles.text-wrapping;
-
   &__left {
     flex: 1;
     display: flex;

package/lib/internal/scss/column-layout/styles.scss

@@ -112,9 +112,9 @@ div.column-layout {
     }
 
     &.grid-variant-text-grid {
-      @include make-vertical-borders('inline-start');
       margin-block: calc(-1 * #{$grid-gutter-width} / 2);
       margin-inline: calc(-1 * #{$grid-gutter-width});
+      @include make-vertical-borders('inline-start');
     }
     /* stylelint-disable-next-line selector-max-universal */
     &:not(.grid-no-gutters) > * {

package/lib/internal/scss/date-range-picker/motion.scss

@@ -8,8 +8,8 @@
 
 .calendar {
   @include styles.with-motion {
-    @include styles.animation-fade-in-0;
     animation: awsui-motion-fade-in-0 awsui.$motion-duration-show-quick awsui.$motion-easing-show-quick;
     animation-fill-mode: both;
+    @include styles.animation-fade-in-0;
   }
 }

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

@@ -9,8 +9,8 @@
 .content {
   &-enter {
     @include styles.with-motion {
-      @include styles.animation-fade-in;
       animation: awsui-motion-fade-in tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
+      @include styles.animation-fade-in;
     }
   }
 }

package/lib/internal/scss/form-field/motion.scss

@@ -2,26 +2,28 @@
  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;
 
 .error-icon-shake-wrapper,
 .warning-icon-shake-wrapper {
   @include styles.with-motion {
-    @include styles.animation-shake-horizontally;
     animation: awsui-motion-shake-horizontally awsui.$motion-duration-refresh-only-medium;
+    @include styles.animation-shake-horizontally;
   }
 }
 .error-icon-scale-wrapper,
 .warning-icon-scale-wrapper {
   @include styles.with-motion {
-    @include styles.animation-scale-popup;
     animation: awsui-motion-scale-popup awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-a;
+    @include styles.animation-scale-popup;
   }
 }
 
 .warning,
 .error {
   @include styles.with-motion {
-    @include styles.animation-fade-in-0;
     animation: awsui-motion-fade-in-0 awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-a;
+    @include styles.animation-fade-in-0;
   }
 }

package/lib/internal/scss/form-field/styles.scss

@@ -7,7 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
-@import './motion';
+@use './motion';
 
 .root {
   @include styles.styles-reset;

package/lib/internal/scss/internal/components/chart-series-details/motion.scss

@@ -7,10 +7,9 @@
 @use '../../styles/tokens' as awsui;
 
 .dimmed {
+  @include styles.styles-reset;
   @include styles.with-motion {
     transition: opacity awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
     transition-delay: awsui.$motion-duration-transition-quick;
   }
-
-  @include styles.styles-reset;
 }

package/lib/internal/scss/internal/components/checkbox-icon/styles.scss

@@ -17,6 +17,11 @@
     fill: awsui.$color-background-control-default;
     stroke: awsui.$color-border-control-default;
     stroke-width: styles.$control-border-width;
+    @include styles.with-motion {
+      transition:
+        fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
+        stroke awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
+    }
     &-checked,
     &-indeterminate {
       fill: awsui.$color-background-control-checked;
@@ -27,11 +32,6 @@
       fill: awsui.$color-background-control-disabled;
       stroke: awsui.$color-border-control-disabled;
     }
-    @include styles.with-motion {
-      transition:
-        fill awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
-        stroke awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
-    }
   }
 
   > .styled-line {

package/lib/internal/scss/internal/components/dropdown/motion.scss

@@ -8,18 +8,17 @@
 
 .dropdown-content-wrapper {
   @include styles.with-motion {
-    @include styles.animation-fade-in-dropdown;
     animation: awsui-motion-fade-in-dropdown awsui.$motion-duration-show-quick awsui.$motion-easing-show-quick;
+    @include styles.animation-fade-in-dropdown;
   }
 
   &.refresh {
     transform-origin: top;
     @include styles.with-motion {
-      @include styles.animation-fade-in-0;
-
       animation-name: awsui-motion-fade-in-0;
       animation-duration: awsui.$motion-duration-show-quick;
       animation-timing-function: awsui.$motion-easing-show-quick;
+      @include styles.animation-fade-in-0;
     }
   }
 }

package/lib/internal/scss/internal/components/token-list/styles.scss

@@ -59,7 +59,6 @@
 
 .toggle {
   @include styles.styles-reset;
-  @include styles.link-default('body-m');
 
   display: flex;
   align-items: center;
@@ -74,6 +73,8 @@
   // pixel to the left to vertically align it with the input field
   margin-inline-start: -1px;
 
+  @include styles.link-default('body-m');
+
   &:active,
   &:focus,
   &:hover {

package/lib/internal/scss/internal/styles/links.scss

@@ -50,20 +50,20 @@
 }
 
 @mixin link-default($font-size: 'inherit') {
-  @include link-variant-style(map.get(constants.$link-variants, 'secondary'));
   @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
+  @include link-variant-style(map.get(constants.$link-variants, 'secondary'));
 }
 
-/* Style used for links in slots/components that are text heavy, to help links stand out among 
+/* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 @mixin link-inline($font-size: 'inherit') {
-  @include link-variant-style(map.get(constants.$link-variants, 'primary'));
   @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
+  @include link-variant-style(map.get(constants.$link-variants, 'primary'));
 }
 
 // Need style as a mixin for tag editor only, because it needs special keyup/keydown behavior and thus cannot use the Link component
 @mixin link-recovery($font-size: 'inherit') {
   @include typography.font-smoothing;
-  @include link-variant-style(map.get(constants.$link-variants, 'recovery'));
   @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size));
+  @include link-variant-style(map.get(constants.$link-variants, 'recovery'));
 }

package/lib/internal/scss/mixed-line-bar-chart/motion.scss

@@ -15,7 +15,7 @@
 
 .exiting {
   @include styles.with-motion {
-    @include styles.animation-fade-out-0;
     animation: awsui-motion-fade-out-0 awsui.$motion-duration-refresh-only-fast awsui.$motion-easing-refresh-only-b;
+    @include styles.animation-fade-out-0;
   }
 }

package/lib/internal/scss/modal/motion.scss

@@ -21,33 +21,33 @@
 // standard variables from that group.
 .dialog {
   @include styles.with-motion {
-    @include styles.animation-fade-in-0;
     animation:
       modal-slide-up awsui.$motion-duration-slow ease-out,
       awsui-motion-fade-in-0 awsui.$motion-duration-slow ease-out;
     animation-delay: awsui.$motion-duration-fast;
     animation-fill-mode: both;
+    @include styles.animation-fade-in-0;
   }
 
   &.refresh {
     @include styles.with-motion {
-      @include styles.animation-fade-in-0;
-      @include styles.animation-scale-popup;
-
       animation: awsui-motion-scale-popup, awsui-motion-fade-in-0;
       animation-duration: awsui.$motion-duration-refresh-only-fast;
       animation-timing-function: awsui.$motion-easing-refresh-only-a;
 
       animation-fill-mode: both;
+
+      @include styles.animation-fade-in-0;
+      @include styles.animation-scale-popup;
     }
   }
 }
 
 .root {
   @include styles.with-motion {
-    @include styles.animation-fade-in;
     animation: awsui-motion-fade-in awsui.$motion-duration-extra-slow ease-out;
     animation-fill-mode: both;
+    @include styles.animation-fade-in;
   }
 
   &.refresh {

package/lib/internal/scss/popover/motion.scss

@@ -8,14 +8,14 @@
 
 .container {
   @include styles.with-motion {
-    @include styles.animation-fade-in;
     animation: awsui-motion-fade-in tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
+    @include styles.animation-fade-in;
   }
 
   &.refresh {
     @include styles.with-motion {
-      @include styles.animation-fade-in;
       animation: awsui-motion-fade-in tokens.$motion-duration-refresh-only-fast tokens.$motion-easing-refresh-only-a;
+      @include styles.animation-fade-in;
     }
   }
 }

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

@@ -17,8 +17,8 @@
 
 .result-state {
   @include styles.with-motion {
-    @include styles.animation-fade-in;
     animation: awsui-motion-fade-in awsui.$motion-duration-transition-show-paced
       awsui.$motion-easing-transition-show-paced;
+    @include styles.animation-fade-in;
   }
 }