@cloudscape-design/components-themeable 3.0.187 → 3.0.189

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "f13bb5caa9bac0e3b101cf077e3c551c16dfcdad"
+  "commit": "12a60d0d0418078b5367a66cb82f3470eab6a878"
 }

package/lib/internal/scss/collection-preferences/visible-content.scss

@@ -17,6 +17,7 @@ $border: awsui.$border-divider-list-width solid awsui.$color-border-divider-defa
 .visible-content-title {
   @include styles.font-label;
   color: awsui.$color-text-form-label;
+  margin: 0;
   margin-bottom: awsui.$space-scaled-l;
 }
 

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

@@ -0,0 +1,23 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as tokens;
+
+.stack {
+  > .animation-running > .item,
+  > .animation-running > .flash-list-item,
+  > .animation-running.toggle {
+    @include styles.with-motion {
+      transition-timing-function: tokens.$motion-easing-refresh-only-a;
+      transition-duration: tokens.$motion-duration-refresh-only-fast;
+    }
+  }
+  > .collapsed.animation-ready > .expanded-only,
+  > .collapsed.animation-running > .expanded-only {
+    // When collapsing, hide the exiting items right away, otherwise our animation calculations will be off
+    // because of React Transition keeping the elements in the DOM for a bit longer.
+    display: none;
+  }
+}

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

@@ -0,0 +1,224 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/hooks/focus-visible' as focus-visible;
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+@use '../internal/styles/typography' as typography;
+@use './collapsible.motion';
+
+.stack {
+  display: grid;
+  grid-template-columns: 1fr minmax(70px, auto) 1fr;
+}
+
+.stack > .expanded {
+  grid-column: 1 / 4;
+}
+
+@mixin stacked-flash-z-index {
+  // The first item should have the highest z index than the second item, and so forth...
+  z-index: calc(var(#{custom-props.$flashbarStackDepth}) - var(#{custom-props.$flashbarStackIndex}));
+}
+
+/*
+The collapsed stack is a dynamic grid that creates the necessary number of
+rows and columns based on the number of items passed to CSS via the
+`flashbarStackDepth` custom property. Assuming there are three flashbar items,
+the grid layout will be:
+
+[item 1 start] [10px] [10px] [fractional unit] [10px] [10px] [item 1 end]
+[10px] [item 2 start] [10px] [fractional unit] [10px] [item 2 end] [10px]
+[10px] [10px] [item 3 start] [fractional unit] [item 3 end] [10px] [10px]
+*/
+.stack > .collapsed {
+  display: grid;
+  grid-column: 1 / 4;
+  grid-template-columns:
+    repeat(var(#{custom-props.$flashbarStackDepth}), 10px)
+    1fr
+    repeat(var(#{custom-props.$flashbarStackDepth}), 10px);
+  row-gap: 8px;
+  z-index: 0;
+
+  > .item {
+    // Each item will have a unique custom property `flashbarStackIndex`
+    // Add +1 is because the array is indexed at zero but grid positions are indexed at 1.
+    grid-column-start: calc(var(#{custom-props.$flashbarStackIndex}) + 1);
+
+    // Add +1 to include the fractional unit in the column count
+    // Add +1 because the array indexed at zero but grid positions at indexed at 1.
+    grid-column-end: calc(
+      var(#{custom-props.$flashbarStackDepth}) * 2 + 1 - var(#{custom-props.$flashbarStackIndex}) + 1
+    );
+    grid-row-start: 1;
+    grid-row-end: calc(var(#{custom-props.$flashbarStackIndex}) + 2);
+
+    @include stacked-flash-z-index;
+  }
+
+  > .item:not(:first-of-type) {
+    align-self: end;
+    /* Give placeholder elements in the stacked state the height of a notification
+       with one single line of text.
+       This makes them look better during the collapse animation, in which they are already empty.
+     */
+    min-height: calc(
+      #{awsui.$font-body-m-line-height} + (
+          #{awsui.$space-scaled-xs} + #{awsui.$border-field-width} + #{awsui.$space-scaled-xxs}
+        ) * 2
+    );
+  }
+
+  > .item:not(:last-child) > .flash,
+  > .item.flash {
+    box-shadow: awsui.$shadow-flash-collapsed;
+  }
+}
+
+.stack > .expanded.animation-running > .flash-list-item {
+  position: relative;
+  @include stacked-flash-z-index;
+}
+
+@mixin toggle-button-layout($top-overlap-collapsed, $border-width) {
+  $margin-top-when-collapsed: -$top-overlap-collapsed;
+  $line-height: awsui.$font-body-m-line-height;
+  $padding-vertical: styles.$control-padding-vertical;
+  $margin-top-when-expanded: -12px;
+
+  padding-top: $padding-vertical;
+  padding-bottom: $padding-vertical;
+
+  &:not(.expanded) {
+    margin-top: #{$margin-top-when-collapsed};
+    margin-bottom: calc(
+      #{-$margin-top-when-collapsed} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
+    );
+  }
+
+  &.expanded {
+    margin-top: #{$margin-top-when-expanded};
+    margin-bottom: calc(
+      #{-$margin-top-when-expanded} - (#{$line-height} + 2 * (#{$padding-vertical} + #{$border-width}))
+    );
+  }
+}
+
+.stack > .toggle {
+  @include styles.text-wrapping;
+
+  background: awsui.$color-background-layout-toggle-default;
+  border-color: awsui.$color-background-layout-toggle-default;
+  border-radius: awsui.$border-radius-button;
+  border-style: solid;
+  box-shadow: awsui.$shadow-panel-toggle;
+  color: awsui.$color-text-layout-toggle;
+  cursor: pointer;
+  display: flex;
+  grid-column: 2;
+  grid-row: 2;
+  gap: awsui.$space-xs;
+  letter-spacing: awsui.$font-button-letter-spacing;
+  margin-left: auto;
+  margin-right: auto;
+  text-decoration: none;
+  z-index: 1;
+
+  > .status > .header,
+  > .status > .item-count,
+  > .button {
+    @include typography.default-text-style;
+    color: awsui.$color-text-layout-toggle;
+    cursor: pointer;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  > .status {
+    > .header {
+      font-weight: awsui.$font-button-weight;
+      display: inline;
+      margin-right: awsui.$space-s;
+    }
+
+    > .item-count {
+      margin-left: awsui.$space-xxs;
+
+      > .type-count {
+        margin-right: awsui.$space-s;
+
+        > .count-number {
+          margin-left: awsui.$space-xxs;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background: awsui.$color-background-layout-toggle-hover;
+    border-color: awsui.$color-background-layout-toggle-hover;
+  }
+
+  &:active {
+    background: awsui.$color-background-layout-toggle-active;
+  }
+
+  &.visual-refresh {
+    $border-width: 2px;
+    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
+    $top-overlap-collapsed: 27px;
+    @include toggle-button-layout($top-overlap-collapsed, $border-width);
+    border-width: $border-width;
+    padding-left: awsui.$space-l;
+    padding-right: awsui.$space-l;
+  }
+
+  &:not(.visual-refresh) {
+    $border-width: 1px;
+    // Amount of pixels that the element is pushed up to overlap the Flashbar (when collapsed)
+    $top-overlap-collapsed: 24px;
+    @include toggle-button-layout($top-overlap-collapsed, $border-width);
+    border-width: $border-width;
+    padding-left: awsui.$space-s;
+    padding-right: awsui.$space-s;
+
+    &:focus {
+      text-decoration: none;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  > .button {
+    display: inline-block;
+    background: none;
+    border: 0 none;
+
+    > .icon {
+      @include styles.with-motion {
+        transition: transform awsui.$motion-duration-rotate-90 awsui.$motion-easing-rotate-90;
+      }
+    }
+    &.expanded > .icon {
+      transform: rotate(180deg);
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    @include focus-visible.when-visible {
+      @include styles.focus-highlight(0px);
+    }
+  }
+}
+
+// Leave some space below the Flashbar, but only when it reaches the end of the page.
+.stack.spaced-bottom {
+  padding-bottom: awsui.$space-xxl;
+}

package/lib/internal/scss/flashbar/motion.scss

@@ -5,7 +5,7 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as tokens;
-.flash-refresh {
+.flash-with-motion {
   $flashbar-translate-y-content: -8px;
   $flashbar-translate-y: -20px;
 
@@ -15,7 +15,6 @@
   $flash-button-wrapper-transition-delay: calc(tokens.$motion-duration-refresh-only-slow * 2 - 100ms);
 
   &.enter {
-    position: absolute;
     @include styles.with-motion {
       opacity: 0;
       transform: translateY($flashbar-translate-y);

package/lib/internal/scss/flashbar/styles.scss

@@ -6,7 +6,9 @@
 @use '../internal/hooks/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
+@use '../internal/styles/typography' as typography;
 @use './motion';
+@use './collapsible';
 
 .flashbar {
   position: relative;
@@ -53,8 +55,10 @@
   padding: 0;
   margin: 0;
 
-  > li:not(:last-child) {
-    margin-bottom: awsui.$space-xxxs;
+  &:not(.collapsed) {
+    > li:not(:last-child) {
+      margin-bottom: awsui.$space-xxxs;
+    }
   }
 }
 
@@ -62,22 +66,21 @@
   display: flex;
   flex-grow: 1;
   min-width: 0;
+}
+
+.flash-focus-container {
+  display: flex;
+  flex: 1;
+  min-width: 0;
 
   &:focus {
     outline: none;
   }
-
   @include focus-visible.when-visible {
     @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
   }
 }
 
-.flash-focus-container {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-}
-
 .flash-text {
   margin: awsui.$border-field-width 0;
   padding: awsui.$space-scaled-xxs awsui.$space-xxs;
@@ -145,141 +148,3 @@
 .flash-type-info {
   background-color: awsui.$color-background-notification-blue;
 }
-
-// `stackItems` feature beta test
-
-.stack {
-  display: grid;
-  grid-template-columns: 1fr minmax(70px, auto) 1fr;
-}
-
-.stack > .expanded {
-  grid-column: 1 / 4;
-}
-
-/*
-The collapsed stack is a dynamic grid that creates the necessary number of 
-rows and columns based on the number of items passed to CSS via the 
-`flashbarStackDepth` custom property. Assuming there are three flashbar items, 
-the grid layout will be: 
-
-[item 1 start] [12px] [12px] [fractional unit] [12px] [12px] [item 1 end]
-[12px] [item 2 start] [12px] [fractional unit] [12px] [item 2 end] [12px]
-[12px] [12px] [item 3 start] [fractional unit] [item 3 end] [12px] [12px]
-*/
-.stack > .collapsed {
-  display: grid;
-  grid-column: 1 / 4;
-  grid-template-columns:
-    repeat(var(#{custom-props.$flashbarStackDepth}), 12px)
-    1fr
-    repeat(var(#{custom-props.$flashbarStackDepth}), 12px);
-  row-gap: 8px;
-
-  > .item {
-    // Each item will have a unique custom property `flashbarStackIndex`
-    // Add +1 is because the array is indexed at zero but grid positions are indexed at 1.
-    grid-column-start: calc(var(#{custom-props.$flashbarStackIndex}) + 1);
-
-    // Add +1 to include the fractional unit in the column count
-    // Add +1 because the array indexed at zero but grid positions at indexed at 1.
-    grid-column-end: calc(
-      var(#{custom-props.$flashbarStackDepth}) * 2 + 1 - var(#{custom-props.$flashbarStackIndex}) + 1
-    );
-    grid-row-start: 1;
-    grid-row-end: calc(var(#{custom-props.$flashbarStackIndex}) + 2);
-
-    // The first item should have the highest z index than the second item, and so forth...
-    z-index: calc(var(#{custom-props.$flashbarStackDepth}) - var(#{custom-props.$flashbarStackIndex}));
-  }
-
-  > .item:not(:first-of-type) {
-    align-self: end;
-  }
-
-  &.visual-refresh > .item:not(:last-of-type) > .flash {
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  }
-
-  &:not(.visual-refresh) > .item:not(:last-of-type) > .flash {
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
-  }
-
-  &.visual-refresh > .item:not(:last-of-type) > .flash-items > li:first-child > .flash {
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  }
-
-  &:not(.visual-refresh) > .item:not(:last-of-type) > .flash-items > li:first-child > .flash {
-    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.stack > .toggle {
-  grid-column: 2;
-  grid-row: 2;
-
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
-  }
-
-  &.visual-refresh {
-    background: awsui.$color-background-layout-toggle-default;
-    border: none;
-    border-radius: 0 0 10px 10px;
-    box-shadow: awsui.$shadow-panel-toggle;
-    color: awsui.$color-text-layout-toggle;
-    cursor: pointer;
-    padding: awsui.$space-scaled-xxs;
-    z-index: var(#{custom-props.$flashbarStackDepth});
-
-    &:focus {
-      outline: none;
-    }
-
-    &:hover {
-      background: awsui.$color-background-layout-toggle-hover;
-    }
-
-    &:active {
-      background: awsui.$color-background-layout-toggle-active;
-    }
-  }
-
-  &:not(.visual-refresh) {
-    background: awsui.$color-background-button-normal-default;
-    border: styles.$control-border-width solid awsui.$color-border-button-normal-default;
-    border-radius: awsui.$border-radius-button;
-    border-top: none;
-    cursor: pointer;
-    padding: styles.$control-padding-vertical awsui.$space-l;
-    text-decoration: none;
-
-    &:focus {
-      outline: none;
-      text-decoration: none;
-    }
-
-    &:hover {
-      background: awsui.$color-background-button-normal-hover;
-      border-color: awsui.$color-border-button-normal-hover;
-      text-decoration: none;
-    }
-
-    &:active {
-      background: awsui.$color-background-button-normal-active;
-      border-color: awsui.$color-border-button-normal-active;
-    }
-  }
-
-  > .icon {
-    display: inline-block;
-
-    @include styles.with-motion {
-      transition: transform awsui.$motion-duration-rotate-90 awsui.$motion-easing-rotate-90;
-    }
-
-    &.expanded {
-      transform: rotate(180deg);
-    }
-  }
-}

package/lib/internal/template/collection-preferences/styles.css.js

@@ -1,25 +1,25 @@
 
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_rdaxh_185",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_rdaxh_186",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_rdaxh_187",
-  "visible-content-group": "awsui_visible-content-group_tc96w_rdaxh_187",
-  "visible-content-title": "awsui_visible-content-title_tc96w_rdaxh_192",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_rdaxh_200",
-  "visible-content-option": "awsui_visible-content-option_tc96w_rdaxh_206",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_rdaxh_217",
-  "root": "awsui_root_tc96w_rdaxh_224",
-  "modal-root": "awsui_modal-root_tc96w_rdaxh_225",
-  "trigger-button": "awsui_trigger-button_tc96w_rdaxh_226",
-  "cancel-button": "awsui_cancel-button_tc96w_rdaxh_227",
-  "confirm-button": "awsui_confirm-button_tc96w_rdaxh_228",
-  "custom": "awsui_custom_tc96w_rdaxh_229",
-  "second-column-small": "awsui_second-column-small_tc96w_rdaxh_233",
-  "wrap-lines": "awsui_wrap-lines_tc96w_rdaxh_237",
-  "striped-rows": "awsui_striped-rows_tc96w_rdaxh_238",
-  "page-size": "awsui_page-size_tc96w_rdaxh_239",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_rdaxh_240",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_rdaxh_241"
+  "visible-content": "awsui_visible-content_tc96w_dbhe3_185",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_dbhe3_186",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_dbhe3_187",
+  "visible-content-group": "awsui_visible-content-group_tc96w_dbhe3_187",
+  "visible-content-title": "awsui_visible-content-title_tc96w_dbhe3_192",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_dbhe3_201",
+  "visible-content-option": "awsui_visible-content-option_tc96w_dbhe3_207",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_dbhe3_218",
+  "root": "awsui_root_tc96w_dbhe3_225",
+  "modal-root": "awsui_modal-root_tc96w_dbhe3_226",
+  "trigger-button": "awsui_trigger-button_tc96w_dbhe3_227",
+  "cancel-button": "awsui_cancel-button_tc96w_dbhe3_228",
+  "confirm-button": "awsui_confirm-button_tc96w_dbhe3_229",
+  "custom": "awsui_custom_tc96w_dbhe3_230",
+  "second-column-small": "awsui_second-column-small_tc96w_dbhe3_234",
+  "wrap-lines": "awsui_wrap-lines_tc96w_dbhe3_238",
+  "striped-rows": "awsui_striped-rows_tc96w_dbhe3_239",
+  "page-size": "awsui_page-size_tc96w_dbhe3_240",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_dbhe3_241",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_dbhe3_242"
 };
   

package/lib/internal/template/collection-preferences/styles.scoped.css

@@ -182,62 +182,63 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_visible-content_tc96w_rdaxh_185:not(#\9),
-.awsui_visible-content-toggle_tc96w_rdaxh_186:not(#\9),
-.awsui_visible-content-groups_tc96w_rdaxh_187:not(#\9),
-.awsui_visible-content-group_tc96w_rdaxh_187:not(#\9) {
+.awsui_visible-content_tc96w_dbhe3_185:not(#\9),
+.awsui_visible-content-toggle_tc96w_dbhe3_186:not(#\9),
+.awsui_visible-content-groups_tc96w_dbhe3_187:not(#\9),
+.awsui_visible-content-group_tc96w_dbhe3_187:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_visible-content-title_tc96w_rdaxh_192:not(#\9) {
+.awsui_visible-content-title_tc96w_dbhe3_192:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: var(--font-display-label-weight-tjy9e4, 400);
   color: var(--color-text-form-label-i9s99a, #16191f);
+  margin: 0;
   margin-bottom: var(--space-scaled-l-t03y3z, 20px);
 }
 
-.awsui_visible-content-group-label_tc96w_rdaxh_200:not(#\9) {
+.awsui_visible-content-group-label_tc96w_dbhe3_201:not(#\9) {
   color: var(--color-text-group-label-5rxtyp, #545b64);
   padding-bottom: var(--space-xs-rsr2qu, 8px);
   border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
 
-.awsui_visible-content-option_tc96w_rdaxh_206:not(#\9) {
+.awsui_visible-content-option_tc96w_dbhe3_207:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   padding: var(--space-xs-rsr2qu, 8px) 0px var(--space-xs-rsr2qu, 8px) var(--space-scaled-l-t03y3z, 20px);
   border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
-.awsui_visible-content-option_tc96w_rdaxh_206:not(#\9):last-child {
+.awsui_visible-content-option_tc96w_dbhe3_207:not(#\9):last-child {
   border-bottom: none;
 }
 
-.awsui_visible-content-option-label_tc96w_rdaxh_217:not(#\9) {
+.awsui_visible-content-option-label_tc96w_dbhe3_218:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: var(--space-l-4vl6xu, 20px);
   flex-grow: 1;
 }
 
-.awsui_root_tc96w_rdaxh_224:not(#\9),
-.awsui_modal-root_tc96w_rdaxh_225:not(#\9),
-.awsui_trigger-button_tc96w_rdaxh_226:not(#\9),
-.awsui_cancel-button_tc96w_rdaxh_227:not(#\9),
-.awsui_confirm-button_tc96w_rdaxh_228:not(#\9),
-.awsui_custom_tc96w_rdaxh_229:not(#\9) {
+.awsui_root_tc96w_dbhe3_225:not(#\9),
+.awsui_modal-root_tc96w_dbhe3_226:not(#\9),
+.awsui_trigger-button_tc96w_dbhe3_227:not(#\9),
+.awsui_cancel-button_tc96w_dbhe3_228:not(#\9),
+.awsui_confirm-button_tc96w_dbhe3_229:not(#\9),
+.awsui_custom_tc96w_dbhe3_230:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_second-column-small_tc96w_rdaxh_233:not(#\9) {
+.awsui_second-column-small_tc96w_dbhe3_234:not(#\9) {
   padding-top: calc(2 * var(--space-scaled-l-t03y3z, 20px));
 }
 
-.awsui_wrap-lines_tc96w_rdaxh_237:not(#\9),
-.awsui_striped-rows_tc96w_rdaxh_238:not(#\9),
-.awsui_page-size_tc96w_rdaxh_239:not(#\9),
-.awsui_page-size-form-field_tc96w_rdaxh_240:not(#\9),
-.awsui_page-size-radio-group_tc96w_rdaxh_241:not(#\9) {
+.awsui_wrap-lines_tc96w_dbhe3_238:not(#\9),
+.awsui_striped-rows_tc96w_dbhe3_239:not(#\9),
+.awsui_page-size_tc96w_dbhe3_240:not(#\9),
+.awsui_page-size-form-field_tc96w_dbhe3_241:not(#\9),
+.awsui_page-size-radio-group_tc96w_dbhe3_242:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/collection-preferences/styles.selectors.js

@@ -2,25 +2,25 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "visible-content": "awsui_visible-content_tc96w_rdaxh_185",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_rdaxh_186",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_rdaxh_187",
-  "visible-content-group": "awsui_visible-content-group_tc96w_rdaxh_187",
-  "visible-content-title": "awsui_visible-content-title_tc96w_rdaxh_192",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_rdaxh_200",
-  "visible-content-option": "awsui_visible-content-option_tc96w_rdaxh_206",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_rdaxh_217",
-  "root": "awsui_root_tc96w_rdaxh_224",
-  "modal-root": "awsui_modal-root_tc96w_rdaxh_225",
-  "trigger-button": "awsui_trigger-button_tc96w_rdaxh_226",
-  "cancel-button": "awsui_cancel-button_tc96w_rdaxh_227",
-  "confirm-button": "awsui_confirm-button_tc96w_rdaxh_228",
-  "custom": "awsui_custom_tc96w_rdaxh_229",
-  "second-column-small": "awsui_second-column-small_tc96w_rdaxh_233",
-  "wrap-lines": "awsui_wrap-lines_tc96w_rdaxh_237",
-  "striped-rows": "awsui_striped-rows_tc96w_rdaxh_238",
-  "page-size": "awsui_page-size_tc96w_rdaxh_239",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_rdaxh_240",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_rdaxh_241"
+  "visible-content": "awsui_visible-content_tc96w_dbhe3_185",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_dbhe3_186",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_dbhe3_187",
+  "visible-content-group": "awsui_visible-content-group_tc96w_dbhe3_187",
+  "visible-content-title": "awsui_visible-content-title_tc96w_dbhe3_192",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_dbhe3_201",
+  "visible-content-option": "awsui_visible-content-option_tc96w_dbhe3_207",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_dbhe3_218",
+  "root": "awsui_root_tc96w_dbhe3_225",
+  "modal-root": "awsui_modal-root_tc96w_dbhe3_226",
+  "trigger-button": "awsui_trigger-button_tc96w_dbhe3_227",
+  "cancel-button": "awsui_cancel-button_tc96w_dbhe3_228",
+  "confirm-button": "awsui_confirm-button_tc96w_dbhe3_229",
+  "custom": "awsui_custom_tc96w_dbhe3_230",
+  "second-column-small": "awsui_second-column-small_tc96w_dbhe3_234",
+  "wrap-lines": "awsui_wrap-lines_tc96w_dbhe3_238",
+  "striped-rows": "awsui_striped-rows_tc96w_dbhe3_239",
+  "page-size": "awsui_page-size_tc96w_dbhe3_240",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_dbhe3_241",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_dbhe3_242"
 };
   

package/lib/internal/template/collection-preferences/visible-content.js

@@ -31,7 +31,7 @@ export default function VisibleContentPreference(_a) {
     };
     var outerGroupLabelId = "".concat(idPrefix, "-outer");
     return (React.createElement("div", { className: styles['visible-content'] },
-        React.createElement("div", __assign({}, className('title'), { id: outerGroupLabelId }), title),
+        React.createElement("h3", __assign({}, className('title'), { id: outerGroupLabelId }), title),
         React.createElement(InternalSpaceBetween, __assign({}, className('groups'), { size: "xs" }), options.map(function (optionGroup, optionGroupIndex) {
             var groupLabelId = "".concat(idPrefix, "-").concat(optionGroupIndex);
             return (React.createElement("div", __assign({ key: optionGroupIndex }, className('group'), { role: "group", "aria-labelledby": "".concat(outerGroupLabelId, " ").concat(groupLabelId) }),