@cloudscape-design/components-themeable 3.0.1186 → 3.0.1188

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "6c4f30afc65a527cbc53a727540a1298b7f390fa"
+  "commit": "7746a982f5fe8edfd2a7888955c15e0d165af2bf"
 }

package/lib/internal/scss/internal/components/selectable-item/styles.scss

@@ -6,42 +6,107 @@
 @use '../../styles' as styles;
 @use '../../styles/tokens' as awsui;
 
+// Box-shadow spread values for simulating borders without layout shifts
+$border-offset: awsui.$border-item-width;
+$border-offset-double: calc(2 * #{awsui.$border-item-width});
+
+// Divider widths (and negative) for reuse
+$divider-w: awsui.$border-divider-list-width;
+$neg-divider-w: calc(-1 * #{$divider-w});
+
+@mixin logical-radius($radius) {
+  border-start-start-radius: $radius;
+  border-start-end-radius: $radius;
+  border-end-start-radius: $radius;
+  border-end-end-radius: $radius;
+}
+
+@function add-offset($value, $offset: $border-offset) {
+  @return calc(#{$value} + #{$offset});
+}
+
+@mixin content-pad($block, $inline) {
+  padding-block: $block;
+  padding-inline: $inline;
+}
+
+@mixin option-content-pad($v, $h) {
+  > .selectable-item-content {
+    padding-block: $v;
+    padding-inline: $h;
+  }
+}
+
+@mixin option-content-pad-with-offset($v, $h, $offset: $border-offset) {
+  > .selectable-item-content {
+    padding-block: add-offset($v, $offset);
+    padding-inline: add-offset($h, $offset);
+  }
+}
+
+@mixin divider-shadow($top-color, $bottom-color) {
+  box-shadow:
+    inset 0 $divider-w 0 0 $top-color,
+    inset 0 $neg-divider-w 0 0 $bottom-color;
+}
+
+@mixin divider {
+  @include divider-shadow(awsui.$color-border-dropdown-item-default, awsui.$color-border-dropdown-item-default);
+}
+
+@mixin highlighted-shadow {
+  box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-hover;
+  &.is-keyboard {
+    box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-focused;
+  }
+}
+
+@mixin selected-shadow {
+  box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-selected;
+  &.highlighted {
+    box-shadow:
+      inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-selected,
+      inset 0 0 0 $border-offset-double awsui.$color-border-dropdown-item-hover;
+    &.is-keyboard {
+      box-shadow:
+        inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-selected,
+        inset 0 0 0 $border-offset-double awsui.$color-border-dropdown-item-focused;
+    }
+  }
+}
+
 // Outer borders of adjacent cells overlap and we want selected option border
 // to take precedence over the other ones, hence negative margins and z-indices
 .selectable-item {
   @include styles.default-text-style;
+
   position: relative;
   list-style: none;
   z-index: 1;
 
-  border-block: awsui.$border-divider-list-width solid transparent;
-  border-inline: awsui.$border-divider-list-width solid transparent;
-  border-block-start-color: awsui.$color-border-dropdown-item-default;
-  border-block-end-color: awsui.$color-border-dropdown-item-default;
+  border-width: 0;
   background-color: awsui.$color-background-dropdown-item-default;
   color: awsui.$color-text-dropdown-item-default;
 
-  // remove the borders completely to avoid the slating effect at the border ends (AWSUI-10545)
-  border-inline-start-width: 0;
-  border-inline-end-width: 0;
-  // to compensate for the loss of padding due to the removal of the left and right borders
-  // and differences in default divider + selected border widths (visual refresh)
-  padding-block: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
-  padding-inline: awsui.$border-item-width;
+  @include content-pad(awsui.$border-item-width, awsui.$border-item-width);
 
-  // For custom styles and background on the selectable-item-content, the content should not clip through the selectable-item borders..
+  // For custom styles and background on the selectable-item-content, the
+  // content should not clip through the selectable-item borders.
   overflow: hidden;
 
-  > .selectable-item-content {
-    padding-block: styles.$option-padding-vertical;
-    padding-inline: styles.$control-padding-horizontal;
+  @include divider;
+  &.parent.interactiveGroups:not(.highlighted):not(.selected) {
+    // kept explicitly to preserve cascade/overrides
+    @include divider;
   }
 
+  @include option-content-pad(styles.$option-padding-vertical, styles.$control-padding-horizontal);
+
   &.pad-bottom {
-    padding-block-end: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
-    border-block-end-color: transparent;
+    padding-block-end: awsui.$border-item-width;
+    box-shadow: inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-default;
     > .selectable-item-content {
-      padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs});
+      padding-block-end: add-offset(styles.$option-padding-vertical, awsui.$space-xxxs);
     }
   }
 
@@ -67,76 +132,37 @@
   &.highlighted,
   &.selected {
     color: awsui.$color-text-dropdown-item-highlighted;
-    border-width: awsui.$border-item-width;
-    border-start-start-radius: awsui.$border-radius-item;
-    border-start-end-radius: awsui.$border-radius-item;
-    border-end-start-radius: awsui.$border-radius-item;
-    border-end-end-radius: awsui.$border-radius-item;
-    padding-block: 0;
-    padding-inline: 0;
-
-    > .selectable-item-content {
-      padding-block: styles.$option-padding-vertical;
-      padding-inline: styles.$control-padding-horizontal;
-    }
-    &.child {
-      padding-inline-start: 0;
-      > .selectable-item-content {
-        padding-inline-start: awsui.$space-xxl;
-      }
-    }
-    &.pad-bottom {
-      padding-block-end: 0;
-      > .selectable-item-content {
-        padding-block-end: (calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs}));
-      }
-    }
+    @include logical-radius(awsui.$border-radius-item);
   }
 
   &.highlighted {
     z-index: 3;
     background-color: awsui.$color-background-dropdown-item-hover;
-    border-color: awsui.$color-border-dropdown-item-hover;
+    @include highlighted-shadow;
     &.disabled {
-      border-color: awsui.$color-border-dropdown-item-dimmed-hover;
+      box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-dimmed-hover;
       background-color: awsui.$color-background-dropdown-item-dimmed;
       > .selectable-item-content {
         color: awsui.$color-text-dropdown-item-dimmed;
       }
     }
-    &.is-keyboard {
-      border-color: awsui.$color-border-dropdown-item-focused;
-      &:not(.visual-refresh) {
-        box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
-      }
+    &:not(.visual-refresh).is-keyboard {
+      box-shadow: inset 0 0 0 awsui.$border-control-focus-ring-shadow-spread awsui.$color-border-item-focused;
     }
   }
 
   &.selected {
     z-index: 2;
     background-color: awsui.$color-background-dropdown-item-selected;
-    border-color: awsui.$color-border-dropdown-item-selected;
-    // smooth adjacent selected borders to avoid bubble effect (visual refresh)
+    @include selected-shadow;
     &.next-item-selected {
       border-end-start-radius: 0;
       border-end-end-radius: 0;
     }
-    &.highlighted {
-      border-color: awsui.$color-border-dropdown-item-selected;
-      z-index: 3;
-      outline: awsui.$border-item-width solid awsui.$color-border-dropdown-item-hover;
-      outline-offset: calc(-2 * #{awsui.$border-item-width});
+    &.highlighted:not(.visual-refresh) {
+      box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-hover;
       &.is-keyboard {
-        border-color: awsui.$color-border-dropdown-item-selected;
-        outline-color: awsui.$color-border-dropdown-item-focused;
-      }
-
-      &:not(.visual-refresh) {
-        border-color: awsui.$color-border-dropdown-item-hover;
-        outline: none;
-        &.is-keyboard {
-          border-color: awsui.$color-border-dropdown-item-focused;
-        }
+        box-shadow: inset 0 0 0 $border-offset awsui.$color-border-dropdown-item-focused;
       }
     }
   }
@@ -154,12 +180,10 @@
       }
     }
     &:not(.interactiveGroups) {
-      border-block-start-color: awsui.$color-border-dropdown-group;
-      padding-block: 0;
-      padding-inline: 0;
+      @include divider-shadow(awsui.$color-border-dropdown-group, awsui.$color-border-dropdown-item-default);
+      @include content-pad(0, 0);
       &:not(:has(> .selectable-item-content)) {
-        padding-block: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
-        padding-inline: awsui.$border-item-width;
+        @include content-pad(awsui.$border-item-width, awsui.$border-item-width);
       }
 
       > .selectable-item-content {
@@ -177,44 +201,56 @@
       &.highlighted > .selectable-item-content {
         color: awsui.$color-text-dropdown-item-highlighted;
       }
-      &.highlighted,
-      &.selected {
-        padding-block: 0;
-        padding-inline: 0;
-        > .selectable-item-content {
-          padding-block: styles.$group-option-padding-vertical;
-          padding-inline: styles.$control-padding-horizontal;
-        }
-      }
     }
   }
 
+  // Remove top divider from the first item after a sticky item to avoid double
+  // borders. Exclude highlighted/selected states to preserve their box-shadow.
+  &:not(.disabled):not(.parent),
+  &.interactiveGroups:not(.disabled) {
+    cursor: pointer;
+  }
+
+  &.sticky + &:not(.sticky):not(.highlighted):not(.selected) {
+    box-shadow: inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default;
+  }
+
   &.sticky {
     position: sticky;
     inset-block-start: 0;
 
-    // Push the next option down to prevent its border in highlighted or selected state from being partially covered by the sticky option
-    margin-block-end: calc(#{awsui.$border-item-width} - #{awsui.$border-divider-list-width});
+    // Push the next option down to prevent its border in highlighted or
+    // selected state from being partially covered by the sticky option
+    margin-block-end: awsui.$border-item-width;
 
     // Stay on top of the other options when they are scrolled up
     z-index: 4;
 
+    // Keep padding consistent to prevent visual shift on hover
+    padding-inline: awsui.$border-item-width;
+
+    &.highlighted,
+    &.selected {
+      padding-inline: awsui.$border-item-width;
+    }
+    // stylelint-disable-next-line no-descending-specificity
+    > .selectable-item-content {
+      padding-inline: styles.$control-padding-horizontal;
+    }
+
     &:not(.highlighted):not(.selected) {
       // Prevent covering the list border despite the higher z-index
-      border-inline-start-width: awsui.$border-item-width;
-      border-inline-start-color: awsui.$color-border-dropdown-container;
-      border-inline-end-color: awsui.$color-border-dropdown-container;
-      padding-inline: 0;
-      > .selectable-item-content {
-        padding-inline: styles.$control-padding-horizontal;
-      }
+      box-shadow:
+        inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-default,
+        inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
+        inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container;
 
       &:not(.with-scrollbar) {
-        border-inline-end-width: awsui.$border-item-width;
-      }
-
-      &.with-scrollbar {
-        border-inline-end-width: 0;
+        box-shadow:
+          inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-default,
+          inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
+          inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container,
+          inset calc(-1 * #{awsui.$border-width-popover}) 0 0 0 awsui.$color-border-dropdown-container;
       }
 
       // Only display top border when not being rendered after the filter
@@ -225,25 +261,26 @@
         }
       }
       &.after-header {
-        border-block-start-color: awsui.$color-background-dropdown-item-default;
+        box-shadow:
+          inset 0 $divider-w 0 0 awsui.$color-background-dropdown-item-default,
+          inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
+          inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container;
+        &:not(.with-scrollbar) {
+          box-shadow:
+            inset 0 $divider-w 0 0 awsui.$color-background-dropdown-item-default,
+            inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default,
+            inset awsui.$border-width-popover 0 0 0 awsui.$color-border-dropdown-container,
+            inset calc(-1 * #{awsui.$border-width-popover}) 0 0 0 awsui.$color-border-dropdown-container;
+        }
       }
     }
 
     &.disabled.highlighted,
     &.disabled.selected {
-      border-block-end-color: transparent;
-      border-block-start-color: transparent;
-      border-inline-start-color: transparent;
-      border-inline-end-color: transparent;
+      box-shadow: none;
     }
   }
 
-  &:not(.disabled):not(.parent) {
-    cursor: pointer;
-  }
-  &.interactiveGroups:not(.disabled) {
-    cursor: pointer;
-  }
   &.virtual {
     position: absolute;
     inset-block-start: awsui.$border-dropdown-virtual-offset-width;
@@ -251,7 +288,16 @@
     inline-size: 100%;
     box-sizing: border-box;
     &:first-of-type:not(.selected, .highlighted) {
-      border-block-start-color: awsui.$color-border-dropdown-item-top;
+      box-shadow:
+        inset 0 $divider-w 0 0 awsui.$color-border-dropdown-item-top,
+        inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default;
+    }
+
+    // Adds top border between option group and previous element
+    &.parent:not(.interactiveGroups) {
+      box-shadow:
+        inset 0 $divider-w 0 0 awsui.$color-border-dropdown-group,
+        inset 0 $neg-divider-w 0 0 awsui.$color-border-dropdown-item-default;
     }
   }
 }
@@ -263,9 +309,9 @@
   inline-size: 100%;
   inset-block-start: 0;
   inset-inline-start: 0;
-  padding-block-start: awsui.$border-divider-list-width;
-  &-first {
-    padding-block-end: awsui.$border-divider-list-width;
+
+  .selectable-item.virtual > & {
+    block-size: calc(100% - #{$border-offset});
   }
 }
 

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "6c4f30af";
+    $awsui-commit-hash: "7746a982";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-4hh3rt;
 $minContentWidth: --awsui-min-content-width-4hh3rt;

package/lib/internal/scss/slider/mixins.scss

@@ -83,41 +83,57 @@ $border-radius-slider-thumb: 50%;
 @mixin error-thumb-focus-styles {
   background-color: var(
     #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-error-pressed
+    awsui.$color-background-slider-handle-error-active
   );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-error-pressed);
+  border-color: var(
+    #{custom-props.$styleSliderHandleBackgroundActive},
+    awsui.$color-background-slider-handle-error-active
+  );
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-error-pressed);
+    0 0 0 4px
+      var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-error-active);
 }
 
 @mixin warning-thumb-focus-styles {
   background-color: var(
     #{custom-props.$styleSliderHandleBackgroundActive},
-    awsui.$color-background-slider-warning-pressed
+    awsui.$color-background-slider-handle-warning-active
   );
   border-block-width: 2px;
   border-inline-width: 2px;
-  border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-warning-pressed);
+  border-color: var(
+    #{custom-props.$styleSliderHandleBackgroundActive},
+    awsui.$color-background-slider-handle-warning-active
+  );
 
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-warning-pressed);
+    0 0 0 4px
+      var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-warning-active);
 }
 
 @mixin error-thumb-hover-styles {
-  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
+  background-color: var(
+    #{custom-props.$styleSliderHandleBackgroundDefault},
+    awsui.$color-background-slider-handle-error-active
+  );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
+    0 0 0 4px
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-error-active);
 }
 
 @mixin warning-thumb-hover-styles {
-  background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
+  background-color: var(
+    #{custom-props.$styleSliderHandleBackgroundDefault},
+    awsui.$color-background-slider-handle-warning-active
+  );
   box-shadow:
     0px 0 0 2px awsui.$color-background-slider-handle-ring,
-    0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
+    0 0 0 4px
+      var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-warning-active);
 }

package/lib/internal/scss/slider/styles.scss

@@ -62,11 +62,17 @@
     inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-size);
 
     &.error {
-      background-color: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-text-status-error);
+      background-color: var(
+        #{custom-props.$styleSliderRangeBackgroundDefault},
+        awsui.$color-background-slider-range-error-default
+      );
     }
 
     &.warning {
-      background-color: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-text-status-warning);
+      background-color: var(
+        #{custom-props.$styleSliderRangeBackgroundDefault},
+        awsui.$color-background-slider-range-warning-default
+      );
     }
 
     &.active {
@@ -79,14 +85,14 @@
     &.error-active {
       background-color: var(
         #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-error-pressed
+        awsui.$color-background-slider-range-error-active
       );
     }
 
     &.warning-active {
       background-color: var(
         #{custom-props.$styleSliderRangeBackgroundActive},
-        awsui.$color-background-slider-warning-pressed
+        awsui.$color-background-slider-range-warning-active
       );
     }
 
@@ -213,24 +219,30 @@
   }
 
   &.error {
-    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-text-status-error);
+    background: var(
+      #{custom-props.$styleSliderTrackBackgroundColor},
+      awsui.$color-background-slider-range-error-default
+    );
   }
 
   &.warning {
-    background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-text-status-warning);
+    background: var(
+      #{custom-props.$styleSliderTrackBackgroundColor},
+      awsui.$color-background-slider-range-warning-default
+    );
   }
 
   &.error-active {
     background-color: var(
       #{custom-props.$styleSliderRangeBackgroundActive},
-      awsui.$color-background-slider-error-pressed
+      awsui.$color-background-slider-range-error-active
     );
   }
 
   &.warning-active {
     background-color: var(
       #{custom-props.$styleSliderRangeBackgroundActive},
-      awsui.$color-background-slider-warning-pressed
+      awsui.$color-background-slider-range-warning-active
     );
   }
 
@@ -330,13 +342,25 @@
 
 .error {
   &::-webkit-slider-thumb {
-    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
-    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
+    background-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-error-default
+    );
+    border-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-error-default
+    );
   }
 
   &::-moz-range-thumb {
-    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
-    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
+    background-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-error-default
+    );
+    border-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-error-default
+    );
   }
   &:hover::-webkit-slider-thumb {
     @include mixins.error-thumb-hover-styles;
@@ -359,13 +383,25 @@
 
 .warning {
   &::-webkit-slider-thumb {
-    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
-    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
+    background-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-warning-default
+    );
+    border-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-warning-default
+    );
   }
 
   &::-moz-range-thumb {
-    background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
-    border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
+    background-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-warning-default
+    );
+    border-color: var(
+      #{custom-props.$styleSliderHandleBackgroundDefault},
+      awsui.$color-background-slider-handle-warning-default
+    );
   }
   &:hover::-webkit-slider-thumb {
     @include mixins.warning-thumb-hover-styles;