@cloudscape-design/components-themeable 3.0.708 → 3.0.709

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "2b4e1756c9b63768af29a6eb1f52edfd58b1fd83"
+  "commit": "e23c1092e833639a13c819a6fe5565ef5bfc2f49"
 }

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

@@ -29,3 +29,6 @@ $dashboard-content-widths: (
 $drawer-z-index: 830;
 // should be above mobile toolbar
 $drawer-z-index-mobile: 1001;
+
+// Shared toolbar drawer component values
+$toolbar-vertical-panel-icon-offset: 10px;

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

@@ -25,7 +25,7 @@
     grid-row: 1;
     display: grid;
     grid-template-columns: awsui.$space-m 1fr auto awsui.$space-m;
-    grid-template-rows: awsui.$size-vertical-panel-icon-offset auto 1fr;
+    grid-template-rows: constants.$toolbar-vertical-panel-icon-offset auto 1fr;
     overflow-y: auto;
 
     > .drawer-close-button {

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

@@ -6,6 +6,7 @@
 @use '../../../internal/styles' as styles;
 @use '../../../internal/styles/tokens' as awsui;
 @use '../../../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../../constants.scss' as constants;
 
 .navigation {
   position: sticky;
@@ -67,5 +68,5 @@
 .hide-navigation {
   position: absolute;
   inset-inline-end: awsui.$space-m;
-  inset-block-start: awsui.$size-vertical-panel-icon-offset;
+  inset-block-start: constants.$toolbar-vertical-panel-icon-offset;
 }

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

@@ -23,9 +23,9 @@
 
   // mobile grid
   grid-template-areas:
-    'topBar    topBar     topBar'
-    '.      notifications .'
-    '.          main      .';
+    'toolbar    toolbar     toolbar'
+    '.       notifications  .'
+    '.           main       .';
   grid-template-columns:
     awsui.$space-layout-content-horizontal
     1fr

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

@@ -10,30 +10,24 @@
 @mixin trigger-selected-styles {
   background: awsui.$color-background-layout-toggle-selected-default;
   color: awsui.$color-text-layout-toggle-selected;
-  border-block: awsui.$border-field-width solid awsui.$color-background-layout-toggle-selected-default;
-  border-inline: awsui.$border-field-width solid awsui.$color-background-layout-toggle-selected-default;
 
   &:hover {
     background: awsui.$color-background-layout-toggle-selected-hover;
-    border-color: awsui.$color-background-layout-toggle-selected-hover;
   }
   &:active {
     background: awsui.$color-background-layout-toggle-selected-active;
-    border-color: awsui.$color-background-layout-toggle-selected-active;
   }
 }
 
 @mixin trigger-button-styles {
   background: transparent;
   color: awsui.$color-text-interactive-default;
-  border-block: awsui.$border-field-width solid transparent;
-  border-inline: awsui.$border-field-width solid transparent;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
-  block-size: awsui.$space-layout-toggle-diameter;
-  inline-size: awsui.$space-layout-toggle-diameter;
+  block-size: 34px;
+  inline-size: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,13 +36,11 @@
   &:hover {
     background: awsui.$color-background-input-disabled;
     color: awsui.$color-text-interactive-hover;
-    border-color: awsui.$color-background-input-disabled;
   }
 
   &:active {
     background: awsui.$color-background-control-disabled;
     color: awsui.$color-text-interactive-hover;
-    border-color: awsui.$color-background-control-disabled;
   }
 }
 
@@ -61,12 +53,12 @@
   justify-content: center;
   align-items: center;
   clip-path: path(
-    'M34.2193 10.1845C33.3961 10.579 32.4739 10.8 31.5 10.8C28.0206 10.8 25.2 7.97939 25.2 4.5C25.2 3.52614 25.421 2.6039 25.8155 1.78066C23.4518 0.639587 20.8006 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18C36 15.1994 35.3604 12.5482 34.2193 10.1845Z'
+    'M32.185 9.34876C31.1913 10.1916 29.905 10.7 28.4999 10.7C25.3519 10.7 22.7999 8.14803 22.7999 5C22.7999 3.68192 23.2473 2.46833 23.9985 1.50281C21.8642 0.537421 19.4948 0 17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34C26.3888 34 34 26.3888 34 17C34 14.2479 33.346 11.6485 32.185 9.34876Z'
   );
 
   @include styles.with-direction('rtl') {
     clip-path: path(
-      'M1.78066 10.1845C2.6039 10.579 3.52615 10.8 4.5 10.8C7.97939 10.8 10.8 7.97939 10.8 4.5C10.8 3.52614 10.579 2.6039 10.1845 1.78066C12.5482 0.639587 15.1994 0 18 0C27.9411 0 36 8.05887 36 18C36 27.9411 27.9411 36 18 36C8.05887 36 0 27.9411 0 18C0 15.1994 0.639587 12.5482 1.78066 10.1845Z'
+      'M1.81502 9.34876C2.80869 10.1916 4.09501 10.7 5.50007 10.7C8.6481 10.7 11.2001 8.14803 11.2001 5C11.2001 3.68192 10.7527 2.46833 10.0015 1.50281C12.1358 0.537421 14.5052 0 17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 14.2479 0.653984 11.6485 1.81502 9.34876Z'
     );
   }
 }
@@ -78,6 +70,8 @@ handleSplitPanelMaxWidth function in the context.
 */
 .trigger {
   @include trigger-button-styles();
+  border-block: none;
+  border-inline: none;
   cursor: pointer;
   pointer-events: auto;
 
@@ -114,8 +108,8 @@ handleSplitPanelMaxWidth function in the context.
 
 .dot {
   position: absolute;
-  inline-size: 9px;
-  block-size: 9px;
+  inline-size: 8px;
+  block-size: 8px;
   border-start-start-radius: 8px;
   border-start-end-radius: 8px;
   border-end-start-radius: 8px;

package/lib/internal/scss/button-dropdown/analytics-metadata/styles.scss

@@ -0,0 +1,10 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.trigger-label,
+.menu-item,
+.main-action-label {
+  /* used in analytics metadata */
+}

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

@@ -58,7 +58,8 @@ $dropdown-trigger-icon-offset: 2px;
   display: flex;
 
   & > .trigger-item {
-    & > button:focus {
+    & > .trigger-button:focus,
+    & > .trigger-button:hover {
       z-index: 1;
     }
   }
@@ -85,6 +86,23 @@ $dropdown-trigger-icon-offset: 2px;
       }
     }
   }
+
+  & > .trigger-item.disabled,
+  & > .trigger-item.loading {
+    & > .trigger-button:not(:focus) {
+      z-index: -1;
+    }
+  }
+
+  & > .trigger-item.variant-normal {
+    &:not(:last-child) > .trigger-button {
+      margin-inline-end: 0;
+    }
+
+    &:not(:first-child) > .trigger-button {
+      margin-inline-start: calc(#{styles.$control-border-width} * -1);
+    }
+  }
 }
 .split-trigger {
   display: contents;

package/lib/internal/scss/container/analytics-metadata/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.header {
+  /* used in analytics metadata */
+}

package/lib/internal/scss/drawer/styles.scss

@@ -13,6 +13,9 @@
   padding-block-end: awsui.$space-panel-content-bottom;
   padding-inline-start: awsui.$space-panel-side-left;
   padding-inline-end: awsui.$space-panel-side-right;
+  &.with-toolbar {
+    padding-block-start: awsui.$space-static-m;
+  }
 }
 
 .header {
@@ -26,6 +29,11 @@
   margin-block-end: awsui.$space-panel-content-top;
   margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
   margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
+  .with-toolbar > & {
+    border-color: transparent;
+    padding-block-end: awsui.$space-static-m;
+    margin-block-end: 0px;
+  }
 
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   h2,

package/lib/internal/scss/form/analytics-metadata/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.header {
+  /* used in analytics metadata */
+}

package/lib/internal/scss/header/analytics-metadata/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.heading-text {
+  /* used in analytics metadata */
+}

package/lib/internal/scss/help-panel/styles.scss

@@ -13,6 +13,9 @@
   padding-block-end: 0;
   padding-inline-end: awsui.$space-panel-side-right;
   padding-inline-start: awsui.$space-panel-side-left;
+  &.with-toolbar {
+    padding-block-start: awsui.$space-static-m;
+  }
 
   /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   hr {
@@ -115,33 +118,38 @@
     font-weight: styles.$font-weight-bold;
   }
   /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
+}
 
-  & > .header {
+.header {
+  @include styles.font-panel-header;
+  color: awsui.$color-text-heading-default;
+  padding-block-end: awsui.$space-panel-header-vertical;
+  padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
+  // padding to make sure the header doesn't overlap with the close icon
+  border-block: none;
+  border-inline: none;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+  margin-block-start: 0;
+  margin-block-end: awsui.$space-panel-content-top;
+  margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
+  margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
+  .with-toolbar > & {
+    border-color: transparent;
+    padding-block-end: awsui.$space-static-m;
+    margin-block-end: 0px;
+  }
+
+  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     @include styles.font-panel-header;
-    color: awsui.$color-text-heading-default;
-    padding-block-end: awsui.$space-panel-header-vertical;
-    padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
-    // padding to make sure the header doesn't overlap with the close icon
-    border-block: none;
-    border-inline: none;
-    border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
-    margin-block-start: 0;
-    margin-block-end: awsui.$space-panel-content-top;
-    margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
-    margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
-
-    /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @include styles.font-panel-header;
-      padding-block: 0;
-      margin-block: 0;
-    }
-    /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
+    padding-block: 0;
+    margin-block: 0;
   }
+  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 
 .content {

package/lib/internal/scss/internal/components/button-trigger/styles.scss

@@ -10,6 +10,9 @@
 
 @use './motion';
 
+$padding-inline-inner-filtering-token: styles.$control-padding-horizontal;
+$padding-block-inner-filtering-token: 0px;
+
 .button-trigger {
   @include styles.styles-reset;
 
@@ -30,6 +33,21 @@
   border-inline: styles.$control-border-width solid awsui.$color-border-input-default;
   min-block-size: awsui.$size-vertical-input;
 
+  &.in-filtering-token {
+    padding-block: $padding-block-inner-filtering-token;
+    padding-inline: $padding-inline-inner-filtering-token;
+
+    border-color: tokenGroup.$token-border-color;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    block-size: 100%;
+    min-block-size: unset;
+
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(awsui.$space-filtering-token-operation-select-focus-outline-gutter);
+    }
+  }
+
   &.has-caret {
     padding-inline-end: styles.$control-icon-horizontal-padding;
   }
@@ -59,12 +77,15 @@
 
   &.disabled {
     @include styles.form-disabled-element;
+
     > .arrow {
       color: awsui.$color-text-button-inline-icon-disabled;
     }
+
     &.in-filtering-token {
       border-color: awsui.$color-border-control-disabled;
     }
+
     > .placeholder {
       @include styles.form-placeholder-disabled;
     }
@@ -83,6 +104,7 @@
     @include focus-visible.when-visible {
       @include styles.form-focus-element();
     }
+
     &:invalid {
       // discard built-in invalid styles, customers should use `invalid` property only (AWSUI-3947)
       box-shadow: none;
@@ -99,16 +121,6 @@
     }
   }
 
-  &.in-filtering-token {
-    border-color: tokenGroup.$token-border-color;
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-    block-size: 100%;
-    @include focus-visible.when-visible {
-      @include styles.focus-highlight(awsui.$space-filtering-token-operation-select-focus-outline-gutter);
-    }
-  }
-
   &.inline-tokens {
     // Remove default paddings and just rely on center alignment of the content
     padding-block: 0;

package/lib/internal/scss/popover/styles.scss

@@ -17,6 +17,10 @@
   color: inherit;
 }
 
+.root-filtering-token {
+  display: flex;
+}
+
 .trigger {
   display: inline-block;
   max-inline-size: 100%;
@@ -50,6 +54,10 @@
   }
 }
 
+.trigger-type-filtering-token {
+  display: flex;
+}
+
 .popover-inline-content {
   display: inline;
 }

package/lib/internal/scss/property-filter/filtering-token/styles.scss

@@ -8,13 +8,32 @@
 @use '../../internal/styles/tokens' as awsui;
 @use '../../token-group/constants' as constants;
 
-.root {
+$token-padding-block: styles.$control-padding-vertical;
+$token-padding-inline: styles.$control-padding-horizontal;
+$token-grouped-padding-block: 2px;
+$token-grouped-padding-inline: styles.$control-padding-horizontal;
+$inner-token-padding-block: 1px;
+$inner-token-padding-inline: styles.$control-padding-horizontal;
+
+.root,
+.inner-root {
+  @include styles.styles-reset;
+
   display: flex;
   align-content: stretch;
+
+  // Make tokens larger so that individual and group tokens appear of the same size.
+  &.has-groups {
+    min-block-size: calc(2px + #{awsui.$size-vertical-input});
+
+    &.compact-mode {
+      min-block-size: calc(2px + 2 * #{styles.$control-border-width} + #{awsui.$size-vertical-input});
+    }
+  }
 }
 
-.token {
-  flex-grow: 1;
+.token,
+.inner-token {
   border-block: awsui.$border-field-width solid constants.$token-border-color;
   border-inline: awsui.$border-field-width solid constants.$token-border-color;
   display: flex;
@@ -26,6 +45,21 @@
   border-end-end-radius: awsui.$border-radius-token;
   color: awsui.$color-text-body-default;
   box-sizing: border-box;
+
+  &.grouped {
+    justify-content: space-between;
+  }
+}
+
+.list {
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: awsui.$space-xs;
 }
 
 .show-operation {
@@ -34,16 +68,32 @@
   border-end-start-radius: 0;
 }
 
-.select {
+.select,
+.inner-select {
   /* used in test-utils */
 }
 
 .token-content {
-  padding-block: styles.$control-padding-vertical;
-  padding-inline: styles.$control-padding-horizontal;
+  display: flex;
+  align-items: center;
+
+  padding-block: $token-padding-block;
+  padding-inline: $token-padding-inline;
+
+  &-grouped {
+    padding-block: $token-grouped-padding-block;
+    padding-inline: $token-grouped-padding-inline;
+  }
 }
 
-.dismiss-button {
+.inner-token-content {
+  padding-block: $inner-token-padding-block;
+  padding-inline: $inner-token-padding-inline;
+}
+
+.edit-button,
+.dismiss-button,
+.inner-dismiss-button {
   inline-size: 30px;
   margin-block: 0;
   margin-inline: 0;
@@ -68,6 +118,11 @@
     cursor: pointer;
     color: awsui.$color-text-interactive-hover;
   }
+
+  &:disabled {
+    color: awsui.$color-text-interactive-disabled;
+    border-color: awsui.$color-border-control-disabled;
+  }
 }
 
 .token-disabled {
@@ -75,9 +130,4 @@
   background-color: awsui.$color-background-container-content;
   color: awsui.$color-text-disabled;
   pointer-events: none;
-
-  > .dismiss-button {
-    color: awsui.$color-text-interactive-disabled;
-    border-color: awsui.$color-border-control-disabled;
-  }
 }

package/lib/internal/scss/property-filter/styles.scss

@@ -46,21 +46,27 @@
   &-form {
     margin-block-end: awsui.$space-scaled-l;
   }
+
   &-field-property {
     /* used in test-utils */
   }
+
   &-field-operator {
     margin-block-start: awsui.$space-scaled-l;
   }
+
   &-field-value {
     margin-block-start: awsui.$space-scaled-l;
   }
+
   &-cancel {
     margin-inline-end: awsui.$space-xs;
   }
+
   &-submit {
     /* used in test-utils */
   }
+
   &-actions {
     display: flex;
     justify-content: flex-end;
@@ -68,6 +74,7 @@
     border-block-start: 1px solid #{awsui.$color-border-dropdown-item-default};
   }
 }
+
 .token-editor {
   &-actions {
     // The below code cancels horizontal padding of the popover and horizontal margin of the token-editor.
@@ -75,6 +82,7 @@
     margin-inline: calc(-1 * #{awsui.$space-m} + -1 * #{awsui.$space-xxs});
   }
 }
+
 .property-editor {
   padding-block: awsui.$space-m;
   padding-inline: awsui.$space-m;
@@ -104,7 +112,6 @@
 }
 
 .remove-all,
-.token-label,
 .join-operation,
 .custom-filter-actions {
   /* used in test-utils */

package/lib/internal/scss/property-filter/test-classes/styles.scss

@@ -15,6 +15,21 @@
 .filtering-token-content {
   /* used in test-utils */
 }
+.filtering-token-inner {
+  /* used in test-utils */
+}
+.filtering-token-inner-dismiss-button {
+  /* used in test-utils */
+}
+.filtering-token-inner-select {
+  /* used in test-utils */
+}
+.filtering-token-inner-content {
+  /* used in test-utils */
+}
+.filtering-token-edit-button {
+  /* used in test-utils */
+}
 
 .token-editor-field-property {
   /* used in test-utils */

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

@@ -20,6 +20,9 @@
   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});
+  .with-toolbar > & {
+    padding-block: awsui.$space-static-m;
+  }
 }
 
 .header-link {
@@ -51,6 +54,9 @@
 
 .list-container {
   margin-block-start: awsui.$space-panel-content-top;
+  .with-toolbar > & {
+    margin-block-start: 0px;
+  }
 }
 
 .list {
@@ -183,4 +189,7 @@
 .divider-header {
   margin-block-start: 0;
   border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+  .with-toolbar > & {
+    border-color: transparent;
+  }
 }

package/lib/internal/scss/split-panel/styles.scss

@@ -93,6 +93,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   border-block-start: none;
   box-shadow: awsui.$shadow-split-side;
   block-size: 100%;
+  &.with-toolbar {
+    box-shadow: none;
+  }
 }
 
 .slider-wrapper-bottom {
@@ -146,7 +149,10 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   }
   :not(.drawer-closed) > .drawer-content-bottom > & {
     background-color: awsui.$color-background-layout-panel-content;
-    border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-panel-header;
+  }
+  .with-toolbar:not(.drawer-closed) > .drawer-content-bottom > & {
+    border-color: transparent;
   }
 }
 
@@ -156,6 +162,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   margin-block-start: awsui.$space-panel-split-top;
   position: relative;
   z-index: 0; // the content inside .content-bottom should not be above pane-header-wrapper-bottom
+  .with-toolbar > .drawer-content-bottom > & {
+    margin-block-start: 0px;
+  }
   .drawer-mobile > .drawer-content-bottom > & {
     padding-block: 0;
     padding-inline: awsui.$space-l;
@@ -197,7 +206,10 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     padding-block: 0;
     padding-inline-end: awsui.$space-m;
     padding-inline-start: awsui.$space-panel-side-left;
-    border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-panel-header-width solid awsui.$color-border-panel-header;
+  }
+  &.with-toolbar > .pane-header-wrapper-side {
+    border-color: transparent;
   }
   > .pane-content-wrapper-side {
     padding-block: 0;
@@ -206,6 +218,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
     margin-block-start: awsui.$space-panel-split-top;
     margin-block-end: awsui.$space-panel-split-bottom;
   }
+  &.with-toolbar > .pane-content-wrapper-side {
+    margin-block-start: 0px;
+  }
 }
 
 .header {
@@ -217,6 +232,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   inline-size: 100%;
   margin-block: awsui.$size-vertical-panel-icon-offset;
   margin-inline: 0;
+  &.with-toolbar {
+    margin-block: constants.$toolbar-vertical-panel-icon-offset;
+  }
 
   &-text {
     @include styles.font-panel-header;