@cloudscape-design/components-themeable 3.0.1348 → 3.0.1350

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "32891bf9894685b7ae01b5b50b47280438be105b"
+  "commit": "11363fe937492bc8a63196cfda9cb852f9e1964e"
 }

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

@@ -105,18 +105,21 @@ $dropdown-trigger-icon-offset: 2px;
       }
     }
 
+    &.has-trigger-text {
+      /* this comment keeps the class in the style sheet */
+      @include theming.one-theme-only {
+        & > .trigger-button {
+          padding-inline: calc(#{awsui.$space-xs} + #{$dropdown-trigger-icon-offset});
+        }
+      }
+    }
+
     @include theming.one-theme-only {
       & > .trigger-button {
         // Resets the padding-inline-end override applied by .visual-refresh above,
         // so both sides stay at $space-xs - $dropdown-trigger-icon-offset.
         padding-inline: calc(#{awsui.$space-xs} - #{$dropdown-trigger-icon-offset});
       }
-
-      &.has-trigger-text {
-        & > .trigger-button {
-          padding-inline: calc(#{awsui.$space-xs} + #{$dropdown-trigger-icon-offset});
-        }
-      }
     }
   }
 

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

@@ -31,6 +31,10 @@ $icon-offset-container: awsui.$space-xxs;
 $icon-total-space-normal: calc(#{$icon-width-normal} + #{$icon-margin-left} + #{$icon-margin-right-normal});
 $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{$icon-margin-right-medium});
 
+// Extra inline padding that widens the navigation caret pointer target to 24px (WCAG 2.5.8).
+$nav-caret-pad-normal: calc(24px - #{$icon-width-normal});
+$nav-caret-pad-one-theme: 12px; // 24px minus the one-theme x-small (12px) icon
+
 .root {
   @include styles.styles-reset;
   @include styles.text-wrapping;
@@ -267,6 +271,27 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       text-decoration: none;
       flex-direction: column;
 
+      // Widen the pointer target to 24px (WCAG 2.5.8) with inline padding and an
+      // equal negative margin: the extra width grows away from the header label
+      // into the adjacent gutter, so neither the glyph nor the label moves and
+      // the label link keeps its own clicks. Vertical size already fills the row.
+      &:not(.icon-container-end) {
+        padding-inline-start: $nav-caret-pad-normal;
+        margin-inline-start: calc(#{$icon-margin-left} - #{$nav-caret-pad-normal});
+        @include theming.one-theme-only {
+          padding-inline-start: $nav-caret-pad-one-theme;
+          margin-inline-start: calc(-1 * #{$nav-caret-pad-one-theme});
+        }
+      }
+      &.icon-container-end {
+        padding-inline-end: $nav-caret-pad-normal;
+        margin-inline-end: calc(-1 * #{$nav-caret-pad-normal});
+        @include theming.one-theme-only {
+          padding-inline-end: $nav-caret-pad-one-theme;
+          margin-inline-end: calc(-1 * #{$nav-caret-pad-one-theme});
+        }
+      }
+
       &:hover {
         color: awsui.$color-text-expandable-section-hover;
       }
@@ -325,6 +350,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
 // One-theme only: inner wrapper that collapses to 0 height via the grid-row track.
 .content-inner {
+  /* this comment keeps the class in the style sheet */
   @include theming.one-theme-only {
     // overflow: visible lets negative-margin backgrounds (e.g. side-navigation
     // active/hover/focus states) bleed past the inline edges.
@@ -338,20 +364,26 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     @include styles.with-motion {
       transition: opacity $reveal-exit-motion;
     }
+  }
+}
 
-    &-expanded {
-      opacity: 1;
+.content-inner-expanded {
+  /* this comment keeps the class in the style sheet */
+  @include theming.one-theme-only {
+    opacity: 1;
 
-      // SHOW (expanded state): opacity fades in AFTER height has partially
-      // opened, creating a perceptible fade in the revealed space.
-      @include styles.with-motion {
-        transition: opacity $reveal-enter-delayed-motion;
-      }
+    // SHOW (expanded state): opacity fades in AFTER height has partially
+    // opened, creating a perceptible fade in the revealed space.
+    @include styles.with-motion {
+      transition: opacity $reveal-enter-delayed-motion;
     }
+  }
+}
 
-    &-settled {
-      overflow-y: visible;
-    }
+.content-inner-settled {
+  /* this comment keeps the class in the style sheet */
+  @include theming.one-theme-only {
+    overflow-y: visible;
   }
 }
 

package/lib/internal/scss/header/styles.scss

@@ -170,6 +170,7 @@
 // Inside an expandable section (one-theme), tighten the heading's top padding by the button's
 // top and bottom border widths so it aligns with the button content box.
 .title-variant-h2.title-in-expandable-section {
+  /* this comment keeps the class in the style sheet */
   @include theming.one-theme-only {
     padding-block-start: calc(
       #{space-heading-button-diff(awsui.$line-height-heading-l)} - 2 * #{awsui.$border-width-button}

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "32891bf9";
+    $awsui-commit-hash: "11363fe9";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-esndbs;
 $minContentWidth: --awsui-min-content-width-esndbs;

package/lib/internal/scss/internal/styles/utils/theming.scss

@@ -2,6 +2,12 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:string';
+@use 'awsui:resolved-tokens' as resolved-tokens;
+
 @mixin dark-mode-only($selector: '') {
   @media not print {
     /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
@@ -13,7 +19,44 @@
 }
 
 @mixin one-theme-only($selector: '') {
-  :global(#{$selector}.awsui-one-theme) & {
-    @content;
+  // When One Theme is not part of the components these selectors are not emitted.
+  @each $theme in resolved-tokens.$resolved-tokens {
+    @if map.get($theme, 'selector') == '.awsui-one-theme' {
+      :global(#{$selector}.awsui-one-theme) & {
+        @content;
+      }
+    }
+  }
+}
+
+$expressive-motion-themes: list.append((), '.awsui-one-theme') !default;
+
+/// Two ways to gate on the opt-in above:
+/// - a function `has-expressive-motion` used to wrap `@keyframes`
+/// - a mixin `expressive-motion-only` is the wrapper form for everything
+
+@function has-expressive-motion() {
+  @each $theme in resolved-tokens.$resolved-tokens {
+    @if list.index($expressive-motion-themes, '#{string.unquote(map.get($theme, 'selector'))}') {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+/// Emits `@content` once, scoped to every opted-in theme's selector.
+@mixin expressive-motion-only($selector: '') {
+  $selectors: ();
+  @each $theme in resolved-tokens.$resolved-tokens {
+    $theme-selector: string.unquote(map.get($theme, 'selector'));
+    @if list.index($expressive-motion-themes, '#{$theme-selector}') {
+      $selectors: list.append($selectors, ':global(#{$theme-selector}#{$selector}) &', comma);
+    }
+  }
+  @if list.length($selectors) > 0 {
+    // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant -- every entry in the list already ends with `&`
+    #{$selectors} {
+      @content;
+    }
   }
 }

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

@@ -30,7 +30,7 @@ $_spinner-sizes: (
 
 $_spinner-variants: (
   'normal': currentColor,
-  'disabled': awsui.$color-text-interactive-disabled,
+  'disabled': awsui.$color-text-status-inactive,
   'inverted': awsui.$color-text-inverted,
 );
 

package/lib/internal/scss/tree-view/tree-item/styles.scss

@@ -50,19 +50,22 @@ $item-toggle-column-width: 28px;
       }
     }
 
+    &.with-icon {
+      /* this comment keeps the class in the style sheet */
+      @include theming.one-theme-only {
+        align-items: baseline;
+        > .expand-toggle-wrapper > .toggle {
+          inset-block-start: 2px;
+        }
+      }
+    }
+
     @include theming.one-theme-only {
       align-items: center;
       > .expand-toggle-wrapper > .toggle {
         inset-inline-start: 0px;
         inset-block-start: 3px;
       }
-
-      &.with-icon {
-        align-items: baseline;
-        > .expand-toggle-wrapper > .toggle {
-          inset-block-start: 2px;
-        }
-      }
     }
 
     > .structured-item-wrapper {

package/lib/internal/template/action-card/styles.css.js

@@ -1,22 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_16248_14nng_161",
-  "icon": "awsui_icon_16248_14nng_193",
-  "header-inner": "awsui_header-inner_16248_14nng_209",
-  "disabled": "awsui_disabled_16248_14nng_218",
-  "header": "awsui_header_16248_14nng_209",
-  "body": "awsui_body_16248_14nng_224",
-  "header-row": "awsui_header-row_16248_14nng_228",
-  "description": "awsui_description_16248_14nng_241",
-  "has-header": "awsui_has-header_16248_14nng_247",
-  "header-button": "awsui_header-button_16248_14nng_261",
-  "overlay-button": "awsui_overlay-button_16248_14nng_262",
-  "variant-embedded": "awsui_variant-embedded_16248_14nng_281",
-  "variant-default": "awsui_variant-default_16248_14nng_293",
-  "inner-card": "awsui_inner-card_16248_14nng_394",
-  "no-padding": "awsui_no-padding_16248_14nng_401",
-  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_14nng_412",
-  "icon-align-end": "awsui_icon-align-end_16248_14nng_548"
+  "root": "awsui_root_16248_ukyke_161",
+  "icon": "awsui_icon_16248_ukyke_193",
+  "header-inner": "awsui_header-inner_16248_ukyke_209",
+  "disabled": "awsui_disabled_16248_ukyke_218",
+  "header": "awsui_header_16248_ukyke_209",
+  "body": "awsui_body_16248_ukyke_221",
+  "header-row": "awsui_header-row_16248_ukyke_225",
+  "description": "awsui_description_16248_ukyke_238",
+  "has-header": "awsui_has-header_16248_ukyke_244",
+  "header-button": "awsui_header-button_16248_ukyke_258",
+  "overlay-button": "awsui_overlay-button_16248_ukyke_259",
+  "variant-embedded": "awsui_variant-embedded_16248_ukyke_278",
+  "variant-default": "awsui_variant-default_16248_ukyke_290",
+  "inner-card": "awsui_inner-card_16248_ukyke_391",
+  "no-padding": "awsui_no-padding_16248_ukyke_398",
+  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_ukyke_409",
+  "icon-align-end": "awsui_icon-align-end_16248_ukyke_545"
 };