@cloudscape-design/components-themeable 3.0.663 → 3.0.665

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "0ceb772ef63ac435021e9990f90da93c75146139"
+  "commit": "09430c09110f6a6ccbffd9d77d535176850c010d"
 }

package/lib/internal/scss/app-layout/visual-refresh/background.scss

@@ -15,23 +15,4 @@ div.background {
     grid-column: 1 / span 5;
     grid-row: 1 / 10;
   }
-
-  > .sticky-background {
-    background-color: awsui.$color-background-layout-main;
-    grid-column: 1 / span 5;
-    grid-row: 1 / 10;
-    position: sticky;
-    inset-block-start: var(#{custom-props.$headerHeight});
-    z-index: 799;
-
-    &:not(.has-sticky-notifications) {
-      block-size: calc(#{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight}));
-    }
-
-    &.has-sticky-notifications {
-      block-size: calc(
-        var(#{custom-props.$notificationsGap}) + var(#{custom-props.$notificationsHeight}) + #{awsui.$space-scaled-s} + var(#{custom-props.$overlapHeight})
-      );
-    }
-  }
 }

package/lib/internal/scss/app-layout/visual-refresh/breadcrumbs.scss

@@ -10,14 +10,4 @@
 .breadcrumbs {
   background-color: awsui.$color-background-layout-main;
   grid-area: breadcrumbs;
-
-  /*
-  If a child component tells the AppLayout to have a sticky 
-  background (typically because of a stickyHeader with a 
-  full-page variant) the z-index of the breadcrumbs needs to 
-  be lifted so it doesn't render behind the background element.
-  */
-  &.has-sticky-background {
-    z-index: 799;
-  }
 }

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss

@@ -23,13 +23,11 @@
   }
 
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
-    /* stylelint-disable scss/operator-no-newline-after */
     max-inline-size: calc(
       var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) - var(
           #{custom-props.$defaultMinContentWidth}
         ) - var(#{custom-props.$contentGapRight})
     );
-    /* stylelint-enable scss/operator-no-newline-after */
   }
 
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {

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

@@ -169,11 +169,6 @@ explicitly set in script.
     #{custom-props.$contentGapRight}: #{awsui.$space-l};
   }
 
-  // Vertically align the notifications with the trigger buttons
-  &.content-first-child-notifications {
-    #{custom-props.$notificationsGap}: #{awsui.$space-xs};
-  }
-
   // Vertically align the breadcrumbs with the trigger buttons
   &.has-breadcrumbs {
     #{custom-props.$breadcrumbsGap}: #{awsui.$space-scaled-m};
@@ -218,10 +213,6 @@ explicitly set in script.
   components for mobile viewports.
   */
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
-    &.content-first-child-notifications {
-      #{custom-props.$notificationsGap}: #{awsui.$space-scaled-s};
-    }
-
     &.content-first-child-header {
       #{custom-props.$headerGap}: #{awsui.$space-scaled-s};
     }

package/lib/internal/scss/app-layout/visual-refresh/notifications.scss

@@ -12,11 +12,21 @@
   grid-area: notifications;
   z-index: 850;
 
+  &.has-notification-content {
+    padding-block-start: awsui.$space-scaled-s;
+  }
+
   @include styles.media-breakpoint-up(styles.$breakpoint-x-small) {
     &.sticky-notifications {
       #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
       position: sticky;
-      inset-block-start: calc(var(#{custom-props.$offsetTop}) + #{awsui.$space-xs});
+      inset-block-start: var(#{custom-props.$offsetTop});
+      &:not(.high-contrast) {
+        background-color: awsui.$color-background-layout-main;
+      }
+    }
+    &.has-notification-content {
+      padding-block-start: awsui.$space-xs;
     }
   }
 }

package/lib/internal/scss/app-layout/visual-refresh/tools.scss

@@ -17,13 +17,11 @@ property. The content gap right is computed in the Layout styles based on the
 viewport size and state of the Tools drawer.
 */
 .tools-container {
-  /* stylelint-disable scss/operator-no-newline-after */
   #{custom-props.$toolsMaxWidth}: calc(
     var(#{custom-props.$layoutWidth}) - var(#{custom-props.$mainOffsetLeft}) - var(
         #{custom-props.$defaultMinContentWidth}
       ) - var(#{custom-props.$contentGapRight})
   );
-  /* stylelint-enable scss/operator-no-newline-after */
   display: flex;
   grid-column: 5;
   grid-row: 1 / span 10;

package/lib/internal/scss/box/styles.scss

@@ -4,12 +4,9 @@
 */
 
 @use '../internal/styles' as styles;
+@use './text';
+@use './layout';
 
 .root {
   @include styles.default-text-style;
 }
-
-/* stylelint-disable no-invalid-position-at-import-rule */
-@import './text';
-@import './layout';
-/* stylelint-enable no-invalid-position-at-import-rule */

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

@@ -65,11 +65,12 @@
     outline: none;
   }
 
-  /* stylelint-disable-next-line selector-max-type */
+  /* stylelint-disable selector-max-type */
   .has-category-header:not(.has-checkmark) > &,
   .has-category-header:not(.has-checkmark) > span > & {
     padding-inline-start: calc(#{awsui.$space-s} + #{awsui.$space-l});
   }
+  /* stylelint-enable selector-max-type */
 }
 
 .icon {

package/lib/internal/scss/code-editor/background-inline-svg.scss

@@ -16,7 +16,6 @@
     @if ($selector == ':root') {
       @include _themed-background-inline-svg($path, $tokens, $stroke, $fill, 'light');
       // dark mode is not supported in browsers that do not support css variables
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
       @supports (--css-variable-support-check: #000) {
         @include theming.dark-mode-only {
           @include _themed-background-inline-svg($path, $tokens, $stroke, $fill, 'dark');
@@ -24,7 +23,6 @@
       }
     } @else {
       // secondary themes (e.g. visual refresh) are not supported in browsers that do not support css variables
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
       @supports (--css-variable-support-check: #000) {
         :global(#{$selector}) & {
           @include _themed-background-inline-svg($path, $tokens, $stroke, $fill, 'light');

package/lib/internal/scss/container/styles.scss

@@ -87,7 +87,7 @@
   overflow: hidden;
   flex-shrink: 0;
 
-  // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type
+  // stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type
   img,
   video,
   picture {
@@ -97,13 +97,13 @@
     object-position: center;
   }
 
-  // stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type
   iframe {
     inline-size: 100%;
     block-size: 100%;
     border-block: 0;
     border-inline: 0;
   }
+  // stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type
 
   // reduce border-radius size to fill the visual gap between the parent border and image
   &-top {
@@ -209,6 +209,14 @@
     &.header-stuck {
       box-shadow: none;
 
+      > .header-cover {
+        background-color: awsui.$color-background-layout-main;
+        inline-size: 100%;
+        position: absolute;
+        block-size: awsui.$space-scaled-s;
+        inset-block-start: calc(-1 * awsui.$space-scaled-s);
+      }
+
       &::before {
         content: '';
 

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

@@ -3,7 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-/* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 
@@ -28,6 +27,7 @@
   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,
@@ -37,6 +37,7 @@
     padding-block: 0;
     margin-block: 0;
   }
+  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 
 .test-utils-drawer-content {

package/lib/internal/scss/flashbar/collapsible.scss

@@ -125,7 +125,6 @@ the grid layout will be:
     margin-block-start: calc(-1 * #{$top-overlap} + #{$offset-bottom});
     /* $notification-bar-line-height + 2 * $notification-bar-padding-vertical + 2 * $border-width
     is the full height of the notification bar */
-    /* stylelint-disable scss/operator-no-newline-after */
     margin-block-end: calc(
       #{$top-overlap} - #{$notification-bar-line-height} - 2 * #{$notification-bar-padding-vertical} - 2 * #{$border-width} -
         #{$offset-bottom}

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

@@ -3,7 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-/* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 
@@ -15,6 +14,7 @@
   padding-inline-end: awsui.$space-panel-side-right;
   padding-inline-start: awsui.$space-panel-side-left;
 
+  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   hr {
     border-block: none;
     border-inline: none;
@@ -114,8 +114,9 @@
   strong {
     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;
@@ -129,6 +130,7 @@
     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,
@@ -138,12 +140,14 @@
       padding-block: 0;
       margin-block: 0;
     }
+    /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
   }
 }
 
 .content {
   color: awsui.$color-text-body-secondary;
 
+  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   h2:first-child,
   h3:first-child,
   h4:first-child,
@@ -155,6 +159,7 @@
   a {
     @include styles.link-inline;
   }
+  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 
 .footer {
@@ -167,6 +172,7 @@
   > :first-child {
     margin-block-start: awsui.$space-scaled-xl;
   }
+  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   ul {
     list-style: none;
     padding-inline-start: 0;
@@ -174,11 +180,14 @@
   a {
     @include styles.link-default;
   }
+  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }
 
 .content,
 .footer {
+  /* stylelint-disable @cloudscape-design/no-implicit-descendant, selector-max-type */
   a:focus {
     @include styles.link-focus;
   }
+  /* stylelint-enable @cloudscape-design/no-implicit-descendant, selector-max-type */
 }

package/lib/internal/scss/icon/mixins.scss

@@ -3,7 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-/* stylelint-disable selector-max-universal, selector-max-type */
 @use 'sass:map';
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
@@ -95,6 +94,7 @@ $_icon-sizes: (
 }
 
 @mixin style-svg {
+  /* stylelint-disable selector-max-type, selector-max-universal */
   > svg {
     fill: none;
 
@@ -118,4 +118,5 @@ $_icon-sizes: (
       }
     }
   }
+  /* stylelint-enable selector-max-type, selector-max-universal */
 }

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

@@ -100,11 +100,11 @@
 
   &.input-type-search {
     box-sizing: border-box; // Overrides the [type='search'] CSS from normalize
-    -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
+    -webkit-appearance: none;
 
     &::-webkit-search-decoration {
       // Remove extra space for default Safari browser search icon
-      -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */
+      -webkit-appearance: none;
     }
 
     &::-webkit-search-cancel-button {

package/lib/internal/scss/internal/components/abstract-switch/styles.scss

@@ -65,9 +65,9 @@
   }
 }
 
-/* stylelint-disable selector-max-type */
 .control {
   position: relative;
+  /* stylelint-disable selector-max-type */
   & > input,
   & > svg,
   & > .outline {
@@ -85,5 +85,5 @@
     margin-block: 0;
     margin-inline: 0;
   }
+  /* stylelint-enable selector-max-type */
 }
-/* stylelint-enable selector-max-type */

package/lib/internal/scss/internal/components/chart-popover-footer/styles.scss

@@ -6,7 +6,7 @@
 
 .root {
   margin-block-start: awsui.$space-xs;
-  /* stylelint-disable selector-max-type */
+  /* stylelint-disable-next-line selector-max-type */
   > hr {
     border-block: none;
     border-inline: none;

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

@@ -78,7 +78,6 @@
   &:focus,
   &:hover {
     text-decoration: none;
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     text-decoration-color: transparent;
   }
 

package/lib/internal/scss/internal/styles/direction.scss

@@ -3,10 +3,9 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-/* stylelint-disable plugin/no-unsupported-browser-features */
 @mixin with-direction($direction) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:dir(#{$direction}) {
     @content;
   }
 }
-/* stylelint-enable plugin/no-unsupported-browser-features */

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -4,6 +4,7 @@
 */
 
 @use 'sass:map';
+@use 'sass:meta';
 @use '../tokens' as awsui;
 @use '../typography' as typography;
 @use '../foundation' as foundation;
@@ -46,7 +47,7 @@
 ) {
   $gutter-vertical: $gutter;
   $gutter-horizontal: $gutter;
-  @if type-of($gutter) == 'map' {
+  @if meta.type-of($gutter) == 'map' {
     $gutter-vertical: map.get($gutter, 'vertical');
     $gutter-horizontal: map.get($gutter, 'horizontal');
   }

package/lib/internal/scss/popover/body.scss

@@ -46,12 +46,11 @@ $header-row-margin-block-end: awsui.$space-xs;
   @include styles.font-heading-xs;
   flex: 1 1 auto;
 
-  /* stylelint-disable selector-max-type */
+  /* stylelint-disable-next-line selector-max-type */
   > h2 {
     @include styles.font-heading-xs;
     display: inline;
   }
-  /* stylelint-enable selector-max-type */
 }
 
 .content {

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

@@ -24,6 +24,11 @@
   text-align: inherit;
 }
 
+.overflow-ellipsis {
+  @include styles.text-overflow-ellipsis;
+  @include styles.text-wrapping;
+}
+
 .trigger-type-text {
   border-block: 0;
   border-inline: 0;

package/lib/internal/scss/s3-resource-selector/s3-in-context/styles.scss

@@ -24,7 +24,7 @@
   margin-block: calc(-1 * #{awsui.$space-xs});
   margin-inline: calc(-1 * #{awsui.$space-xs});
 
-  /* stylelint-disable selector-max-universal */
+  /* stylelint-disable-next-line selector-max-universal */
   & > * {
     margin-block: awsui.$space-xs;
     margin-inline: awsui.$space-xs;

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

@@ -124,7 +124,6 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
 }
 
 .pane-header-wrapper-bottom {
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   inset-block-start: 0;
   display: flex;

package/lib/internal/scss/table/styles.scss

@@ -108,7 +108,6 @@
     padding-block-start: awsui.$space-scaled-m;
     padding-block-end: awsui.$space-scaled-l;
     padding-inline: awsui.$space-l;
-    /* stylelint-disable plugin/no-unsupported-browser-features */
     @supports (position: sticky) {
       position: sticky;
       inset-inline-start: 0;
@@ -116,7 +115,6 @@
       margin-block: 0;
       margin-inline: calc(-2 * #{awsui.$space-table-horizontal});
     }
-    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 }
 

package/lib/internal/scss/textarea/styles.scss

@@ -13,7 +13,7 @@
 .textarea {
   @include styles.styles-reset;
   // Restore browsers' default resize values
-  resize: auto; /* stylelint-disable-line plugin/no-unsupported-browser-features */
+  resize: auto;
   // Restore default text cursor
   cursor: text;
   // Allow multi-line placeholders

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

@@ -96,7 +96,6 @@
     color: awsui.$color-text-button-inline-icon-disabled;
 
     &:hover {
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
       cursor: initial;
       color: awsui.$color-text-button-inline-icon-disabled;
     }

package/lib/internal/scss/tutorial-panel/components/tutorial-list/styles.scss

@@ -47,7 +47,6 @@
 .tutorial-description {
   /* stylelint-disable-next-line @cloudscape-design/no-implicit-descendant, selector-max-type -- Customers can nest their list items inside Box components. */
   ul {
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     list-style-type: initial;
   }
 }

package/lib/internal/scss/wizard/styles.scss

@@ -3,7 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-/* stylelint-disable selector-max-universal, selector-max-type */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/hooks/focus-visible' as focus-visible;
@@ -35,6 +34,7 @@
   grid-row: 1 / span 2;
   padding-block-start: calc(awsui.$space-xs + awsui.$space-scaled-xxs);
 
+  /* stylelint-disable selector-max-type */
   > ul.refresh {
     background: awsui.$color-background-container-content;
     position: relative;
@@ -177,6 +177,7 @@
       color: awsui.$color-background-control-checked;
     }
   }
+  /* stylelint-enable selector-max-type */
 }
 
 .navigation:not(.refresh) {
@@ -187,6 +188,7 @@
   padding-block-start: awsui.$space-xxs;
   inline-size: 20 * styles.$base-size;
 
+  /* stylelint-disable selector-max-type */
   > ul:not(.refresh) {
     list-style: none;
     padding-block: 0;
@@ -207,6 +209,7 @@
       border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-layout;
     }
   }
+  /* stylelint-enable selector-max-type */
 }
 
 .form:not(.refresh) {

package/lib/internal/template/alert/styles.css.js

@@ -1,30 +1,30 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_1wjkv_99",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1wjkv_1",
-  "root": "awsui_root_mx3cw_1wjkv_125",
-  "hidden": "awsui_hidden_mx3cw_1wjkv_163",
-  "with-dismiss": "awsui_with-dismiss_mx3cw_1wjkv_213",
-  "with-action": "awsui_with-action_mx3cw_1wjkv_213",
-  "breakpoint-default": "awsui_breakpoint-default_mx3cw_1wjkv_219",
-  "header": "awsui_header_mx3cw_1wjkv_226",
-  "action": "awsui_action_mx3cw_1wjkv_230",
-  "action-slot": "awsui_action-slot_mx3cw_1wjkv_235",
-  "action-button": "awsui_action-button_mx3cw_1wjkv_236",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1wjkv_240",
-  "text": "awsui_text_mx3cw_1wjkv_269",
-  "icon": "awsui_icon_mx3cw_1wjkv_276",
-  "message": "awsui_message_mx3cw_1wjkv_279",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1wjkv_287",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_1wjkv_290",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1wjkv_293",
-  "content": "awsui_content_mx3cw_1wjkv_297",
-  "dismiss": "awsui_dismiss_mx3cw_1wjkv_301",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_1wjkv_306",
-  "type-error": "awsui_type-error_mx3cw_1wjkv_310",
-  "type-warning": "awsui_type-warning_mx3cw_1wjkv_318",
-  "type-success": "awsui_type-success_mx3cw_1wjkv_326",
-  "type-info": "awsui_type-info_mx3cw_1wjkv_334"
+  "alert": "awsui_alert_mx3cw_1pqlj_97",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1pqlj_1",
+  "root": "awsui_root_mx3cw_1pqlj_123",
+  "hidden": "awsui_hidden_mx3cw_1pqlj_161",
+  "with-dismiss": "awsui_with-dismiss_mx3cw_1pqlj_211",
+  "with-action": "awsui_with-action_mx3cw_1pqlj_211",
+  "breakpoint-default": "awsui_breakpoint-default_mx3cw_1pqlj_217",
+  "header": "awsui_header_mx3cw_1pqlj_224",
+  "action": "awsui_action_mx3cw_1pqlj_228",
+  "action-slot": "awsui_action-slot_mx3cw_1pqlj_233",
+  "action-button": "awsui_action-button_mx3cw_1pqlj_234",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1pqlj_238",
+  "text": "awsui_text_mx3cw_1pqlj_267",
+  "icon": "awsui_icon_mx3cw_1pqlj_274",
+  "message": "awsui_message_mx3cw_1pqlj_277",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_1pqlj_285",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_1pqlj_288",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_1pqlj_291",
+  "content": "awsui_content_mx3cw_1pqlj_295",
+  "dismiss": "awsui_dismiss_mx3cw_1pqlj_299",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_1pqlj_304",
+  "type-error": "awsui_type-error_mx3cw_1pqlj_308",
+  "type-warning": "awsui_type-warning_mx3cw_1pqlj_316",
+  "type-success": "awsui_type-success_mx3cw_1pqlj_324",
+  "type-info": "awsui_type-info_mx3cw_1pqlj_332"
 };