@cloudscape-design/components-themeable 3.0.1340 → 3.0.1342

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "154aba5d90a8762f424b37f51b22021521238da5"
+  "commit": "2041ec8f9027e7c42c879f7113759c67d545a585"
 }

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

@@ -198,6 +198,8 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    flex: 1;
+    min-inline-size: 0;
   }
 
   &-button,
@@ -285,6 +287,20 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
   }
 }
 
+// Internal-only class: zeros header wrapper padding when __disableHeaderPaddings is set.
+// Allows parent components to control spacing without brittle positional selectors.
+.disable-header-paddings {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+// Internal-only class: zeros content wrapper padding when the disableContentPaddings prop is set.
+// Paired with disable-header-paddings for consistent zero-padding on both wrapper divs.
+.disable-content-paddings {
+  padding-block: 0;
+  padding-inline: 0;
+}
+
 .focusable {
   &:focus {
     outline: none;
@@ -302,3 +318,129 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     color: awsui.$color-text-expandable-section-hover;
   }
 }
+
+// When the expand/collapse icon is rendered at the end of the header.
+// For non-container variants the icon is rendered at the end of the headerButton
+// (taking the full width of the header). For the container variant the icon is
+// rendered as a sibling of the InternalHeader so it appears past any actions.
+.header-icon-end {
+  &.wrapper-default,
+  &.wrapper-inline,
+  &.wrapper-footer,
+  &.wrapper-compact {
+    padding-inline-start: 0;
+  }
+
+  &.wrapper-navigation {
+    justify-content: space-between;
+    align-items: flex-start;
+    column-gap: awsui.$space-xs;
+  }
+
+  &.wrapper-container,
+  &.wrapper-default {
+    display: flex;
+    align-items: flex-start;
+    column-gap: awsui.$space-m;
+  }
+
+  &.wrapper-container {
+    &:not(.header-deprecated) {
+      padding-inline-start: container.$header-padding-horizontal;
+    }
+  }
+}
+
+.header-button-icon-end {
+  margin-inline-start: 0;
+  column-gap: awsui.$space-xs;
+  justify-content: space-between;
+
+  // For non-container variants the icon lives inside this button, so it
+  // needs to be a full-width flex row to push the icon to the inline-end.
+  // The container variant renders the icon outside InternalHeader, so
+  // making this element a block-level flex container with 100% width would
+  // force the title to consume all available space and push the info slot
+  // (rendered as a sibling inside InternalHeader) to a new line.
+  &:not(.header-container-button) {
+    display: flex;
+    inline-size: 100%;
+
+    > .header-text {
+      flex: 1;
+      min-inline-size: 0;
+    }
+  }
+}
+
+.icon-container-end {
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+  flex-shrink: 0;
+
+  // Stretch the button to fill the parent's block-size so the entire caret
+  // column is clickable/hoverable, matching start-position behavior.
+  align-self: stretch;
+  align-items: flex-start;
+
+  // Reset native <button> chrome for the outside caret in end-icon-position.
+  // The navigation variant already has its own reset via .header-navigation > .icon-container
+  // so this is harmless-but-redundant for that path, and necessary for default/container.
+  border-block: none;
+  border-inline: none;
+  background: none;
+  padding-block: 0;
+  padding-inline: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(2px);
+  }
+
+  // Align the navigation end-layout caret to the first line of header text.
+  // The header link has padding-block equal to (item-height - line-height) / 2
+  // (set by side-navigation). Mirror that on the caret so it sits at the same
+  // vertical position as the first text line — identical to the start layout.
+  .header-icon-end.wrapper-navigation > & {
+    padding-block-start: calc((#{awsui.$size-side-navigation-item-height} - #{awsui.$line-height-body-m}) / 2);
+  }
+
+  // In the end layout the icon is a flex child governed by the parent's
+  // align-items: flex-start. Reset the inset-block-start offsets that the
+  // start layout uses (they assume relative positioning within text flow)
+  // so the icon aligns with the first line of header text via flex.
+  @include theming.one-theme-only {
+    // Override the base .icon-container one-theme rule that re-introduces
+    // margin-inline-end via the margin-inline shorthand (equal specificity,
+    // later source order wins).
+    margin-inline-end: 0;
+    &:not(.icon-container-container) {
+      inset-block-start: $icon-offset-block;
+    }
+    > .icon {
+      inset-block-start: 0;
+    }
+  }
+}
+
+// Semantic wrapper around HeadingTag + actions in non-container variants
+.header-icon-end > .header-content {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.header-icon-end > .header-navigation-content {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+// Navigation variant, start icon: align the expand caret to the first line of text
+// when header paddings are disabled (side-navigation use case).
+// Mirrors the end-icon alignment at .icon-container-end (same formula).
+.disable-header-paddings.wrapper-navigation:not(.header-icon-end) > .icon-container {
+  display: grid;
+  align-items: flex-start;
+  padding-block: calc((#{awsui.$size-side-navigation-item-height} - #{awsui.$line-height-body-m}) / 2);
+}

package/lib/internal/scss/input/styles.scss

@@ -28,6 +28,47 @@
   }
 }
 
+%input-default-styles {
+  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
+  border-block: awsui.$border-width-field solid
+    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
+  border-inline: awsui.$border-width-field solid
+    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
+  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
+}
+
+%input-hover-styles {
+  border-color: var(
+    #{custom-props.$styleBorderColorHover},
+    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
+  );
+  background-color: var(
+    #{custom-props.$styleBackgroundHover},
+    var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+  );
+  box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
+}
+
+%input-readonly-styles {
+  @include styles.form-readonly-element(
+    $background-color: var(
+        #{custom-props.$styleBackgroundReadonly},
+        var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
+      ),
+    $border-color: var(
+        #{custom-props.$styleBorderColorReadonly},
+        var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
+      )
+  );
+}
+
+%input-focus-styles {
+  @include styles.form-focus-element(
+    $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
+    $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+  );
+}
+
 .root {
   /* used in test-utils for component to distinguish input from other input-like components, for example autosuggest */
 }
@@ -40,54 +81,31 @@
   inline-size: 100%;
   cursor: text;
   box-sizing: border-box;
-  background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
   border-start-start-radius: styles.$control-border-radius;
   border-start-end-radius: styles.$control-border-radius;
   border-end-start-radius: styles.$control-border-radius;
   border-end-end-radius: styles.$control-border-radius;
 
-  border-block: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
-  border-inline: awsui.$border-width-field solid
-    var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
-
-  box-shadow: var(#{custom-props.$styleBoxShadowDefault});
-
   @include styles.font-body-m;
   min-block-size: awsui.$size-vertical-input;
 
+  @extend %input-default-styles;
+
   &:hover {
-    border-color: var(
-      #{custom-props.$styleBorderColorHover},
-      var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
-    );
     color: var(
       #{custom-props.$styleColorHover},
       var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
     );
-    background-color: var(
-      #{custom-props.$styleBackgroundHover},
-      var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
-    );
-    box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
+    @extend %input-hover-styles;
   }
 
   &.input-readonly {
-    @include styles.form-readonly-element(
-      $background-color: var(
-          #{custom-props.$styleBackgroundReadonly},
-          var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
-        ),
-      $border-color: var(
-          #{custom-props.$styleBorderColorReadonly},
-          var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
-        )
-    );
     color: var(
       #{custom-props.$styleColorReadonly},
       var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default)
     );
     box-shadow: var(#{custom-props.$styleBoxShadowReadonly});
+    @extend %input-readonly-styles;
   }
 
   @include placeholder {
@@ -100,12 +118,9 @@
   }
 
   &:focus {
-    @include styles.form-focus-element(
-      $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
-      $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
-    );
     color: var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default);
     background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
+    @extend %input-focus-styles;
   }
 
   &:disabled {
@@ -134,7 +149,7 @@
       $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-error),
       $focus-box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid)
     );
-    &.input-has-icon-left {
+    &.input-has-icon-start {
       padding-inline-start: calc(
         #{styles.$control-icon-horizontal-padding} -
           (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
@@ -148,7 +163,7 @@
       $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-warning),
       $focus-box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid)
     );
-    &.input-has-icon-left {
+    &.input-has-icon-start {
       padding-inline-start: calc(
         #{styles.$control-icon-horizontal-padding} -
           (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field})
@@ -169,10 +184,10 @@
       display: none;
     }
   }
-  &.input-has-icon-left {
+  &.input-has-icon-start {
     padding-inline-start: styles.$control-icon-horizontal-padding;
   }
-  &.input-has-icon-right {
+  &.input-has-icon-end {
     padding-inline-end: styles.$control-icon-horizontal-padding;
   }
   &.input-has-no-border-radius {
@@ -188,14 +203,14 @@
   position: relative;
 }
 
-.input-icon-left {
+.input-icon-start {
   position: absolute;
   pointer-events: none;
   inset-inline-start: styles.$control-icon-horizontal-offset;
   inset-block-start: styles.$control-icon-vertical-offset;
 }
 
-.input-icon-right {
+.input-icon-end {
   position: absolute;
   inset-block-start: calc(#{styles.$control-icon-vertical-offset} - #{awsui.$space-xxxs});
   inset-inline-end: calc(#{styles.$control-icon-horizontal-offset} - #{awsui.$space-xxs});
@@ -224,3 +239,179 @@
 .inline-label {
   @include forms.inline-label;
 }
+
+.input-adorned-container {
+  display: flex;
+  align-items: stretch;
+  inline-size: 100%;
+  box-sizing: border-box;
+  color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-form-secondary);
+  border-start-start-radius: styles.$control-border-radius;
+  border-start-end-radius: styles.$control-border-radius;
+  border-end-start-radius: styles.$control-border-radius;
+  border-end-end-radius: styles.$control-border-radius;
+  min-block-size: awsui.$size-vertical-input;
+
+  @extend %input-default-styles;
+
+  &:hover {
+    @extend %input-hover-styles;
+    color: var(
+      #{custom-props.$styleColorHover},
+      var(#{custom-props.$styleColorDefault}, awsui.$color-text-form-secondary)
+    );
+  }
+
+  &.input-adorned-container-readonly {
+    @extend %input-readonly-styles;
+    color: var(
+      #{custom-props.$styleColorReadonly},
+      var(#{custom-props.$styleColorDefault}, awsui.$color-text-form-secondary)
+    );
+  }
+
+  &:focus-within {
+    @extend %input-focus-styles;
+    color: var(
+      #{custom-props.$styleColorFocus},
+      var(#{custom-props.$styleColorDefault}, awsui.$color-text-form-secondary)
+    );
+  }
+
+  &.input-adorned-container-invalid {
+    @include styles.form-invalid-control(
+      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-error),
+      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-error),
+      $focus-box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid)
+    ) {
+      padding-inline-start: 0;
+    }
+
+    &:focus-within {
+      box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid);
+    }
+  }
+
+  &.input-adorned-container-warning {
+    @include styles.form-warning-control(
+      $color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-status-warning),
+      $border-color: var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-status-warning),
+      $focus-box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid)
+    ) {
+      padding-inline-start: 0;
+    }
+
+    &:focus-within {
+      box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light-invalid);
+    }
+  }
+
+  &.input-adorned-container-disabled {
+    @include styles.form-disabled-element(
+      $background-color: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled),
+      $border-color: var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled),
+      $color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled),
+      $cursor: default
+    );
+    box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
+  }
+}
+
+.input-prefix,
+.input-suffix {
+  display: flex;
+  align-items: center;
+  flex-shrink: 1;
+  max-inline-size: calc(50% - 6rem);
+  min-inline-size: 0;
+  padding-block: styles.$control-padding-vertical;
+  padding-inline: styles.$control-padding-horizontal;
+  color: inherit;
+  @include styles.font-body-m;
+}
+
+.input-adornment-content {
+  display: block;
+  flex: 1;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.input-adornment-divider {
+  display: block;
+  flex-shrink: 0;
+  inline-size: awsui.$border-width-field;
+  background-color: awsui.$color-border-divider-default;
+  align-self: stretch;
+}
+
+.input-adorned {
+  flex: 1;
+  min-inline-size: 0;
+  border-block: none;
+  border-inline: none;
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  min-block-size: unset;
+
+  &.input:focus {
+    border-block: 0;
+    border-inline: 0;
+    box-shadow: none;
+    outline: none;
+  }
+
+  &:hover {
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+    border-block: 0;
+    border-inline: 0;
+  }
+
+  &.input-readonly {
+    background-color: transparent;
+    border-color: transparent;
+    border-block: 0;
+    border-inline: 0;
+  }
+
+  &.input-invalid,
+  &.input-warning {
+    padding-inline-start: styles.$control-padding-horizontal;
+    border-block: 0;
+    border-inline: 0;
+    border-inline-start-width: 0;
+    box-shadow: none;
+
+    &:focus {
+      border-block: 0;
+      border-inline: 0;
+      box-shadow: none;
+      outline: none;
+    }
+  }
+}
+
+.input-adorned-container-invalid,
+.input-adorned-container-warning {
+  > .input-prefix,
+  > .input-adorned:first-child {
+    padding-inline-start: styles.$invalid-control-left-padding;
+  }
+
+  > .input-prefix,
+  > .input-suffix {
+    max-inline-size: calc(50% - 6rem + (#{styles.$invalid-control-left-border} - #{awsui.$border-width-field}) / 2);
+  }
+}

package/lib/internal/scss/internal/components/chart-legend/styles.scss

@@ -32,6 +32,7 @@
 }
 
 .marker {
+  @include styles.text-wrapping;
   display: inline-flex;
   align-items: flex-start;
   padding-block: 0;

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "154aba5d";
+    $awsui-commit-hash: "2041ec8f";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-esndbs;
 $minContentWidth: --awsui-min-content-width-esndbs;

package/lib/internal/scss/multiselect/styles.scss

@@ -18,3 +18,17 @@
 .tokens {
   margin-block-start: awsui.$space-scaled-xs;
 }
+
+// Custom dropdown header/footer regions (renderDropdownHeader / renderDropdownFooter). Duplicated in the
+// Select stylesheet. The header can sit directly above the options list, so it is lifted with z-index to
+// keep focusable content's focus ring above the list; the footer sits below the list with natural
+// clearance and needs no lift.
+.dropdown-header {
+  inline-size: 100%;
+  position: relative;
+  z-index: 4;
+}
+
+.dropdown-footer {
+  inline-size: 100%;
+}

package/lib/internal/scss/pagination/styles.scss

@@ -98,8 +98,14 @@
   color: awsui.$color-text-interactive-default;
 }
 
+.pages-compact {
+  color: awsui.$color-text-pagination-page-number-default;
+  white-space: nowrap;
+}
+
 .page-item,
-.dots {
+.dots,
+.pages-compact {
   margin-block: styles.$control-padding-vertical;
   margin-inline: awsui.$space-xxs;
   text-align: center;
@@ -114,6 +120,7 @@
   }
 }
 
-.root-disabled > .dots {
+.root-disabled > .dots,
+.root-disabled > .pages-compact {
   color: awsui.$color-text-interactive-disabled;
 }

package/lib/internal/scss/pagination/test-classes/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.pages-compact-text {
+  /* used in test-utils or tests */
+}

package/lib/internal/scss/select/styles.scss

@@ -4,8 +4,21 @@
 */
 
 @use '../internal/styles' as styles;
-@use '../internal/styles/tokens' as awsui;
 
 .root {
   @include styles.styles-reset;
 }
+
+// Custom dropdown header/footer regions (renderDropdownHeader / renderDropdownFooter). Duplicated in the
+// Multiselect stylesheet. The header can sit directly above the options list, so it is lifted with z-index
+// to keep focusable content's focus ring above the list; the footer sits below the list with natural
+// clearance and needs no lift.
+.dropdown-header {
+  inline-size: 100%;
+  position: relative;
+  z-index: 4;
+}
+
+.dropdown-footer {
+  inline-size: 100%;
+}