@cloudscape-design/components-themeable 3.0.1200 → 3.0.1202

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "83dc70581d08ddb866a76914f7be63d0e01d0720"
+  "commit": "825e839b2672cf96b76ee7250b0569d06d6bc939"
 }

package/lib/internal/scss/cards/styles.scss

@@ -7,47 +7,9 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../container/shared' as container;
-@use './motion';
-
-@mixin card-style {
-  border-start-start-radius: awsui.$border-radius-container;
-  border-start-end-radius: awsui.$border-radius-container;
-  border-end-start-radius: awsui.$border-radius-container;
-  border-end-end-radius: awsui.$border-radius-container;
-  box-sizing: border-box;
-
-  &::before {
-    @include styles.base-pseudo-element;
-    // Reset border color to prevent it from flashing black during card selection animation
-    border-color: transparent;
-    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
-    z-index: 1;
-  }
-
-  &::after {
-    @include styles.base-pseudo-element;
-    border-start-start-radius: awsui.$border-radius-container;
-    border-start-end-radius: awsui.$border-radius-container;
-    border-end-start-radius: awsui.$border-radius-container;
-    border-end-end-radius: awsui.$border-radius-container;
-  }
-  &:not(.refresh)::after {
-    box-shadow: awsui.$shadow-container;
-  }
-  &.refresh::after {
-    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
-  }
-}
 
 .root {
   @include styles.styles-reset();
-  @include styles.default-text-style;
 }
 
 .header {
@@ -112,7 +74,6 @@
 }
 
 .card {
-  display: flex;
   overflow-wrap: break-word;
   word-wrap: break-word;
   box-sizing: border-box;
@@ -123,45 +84,23 @@
   padding-inline-start: awsui.$space-grid-gutter;
   padding-inline-end: 0;
   list-style: none;
-  &-inner {
-    position: relative;
-    background-color: awsui.$color-background-container-content;
-    margin-block: 0;
-    margin-inline: 0;
-    padding-block: awsui.$space-card-vertical;
-    padding-inline: awsui.$space-card-horizontal;
-    inline-size: 100%;
-    min-inline-size: 0;
-    @include card-style;
-  }
   &-header {
     @include styles.font-heading-m;
     &-inner {
-      inline-size: 100%;
-      display: inline-block;
-    }
-  }
-  &-selectable {
-    > .card-inner > .card-header {
-      inline-size: 90%;
+      padding-block-start: styles.$control-padding-vertical;
+      &-selectable {
+        inline-size: 90%;
+      }
     }
   }
   &-selected {
-    > .card-inner {
-      background-color: awsui.$color-background-item-selected;
-      &::before {
-        border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
-        border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
-      }
-    }
+    /* Used in test utils */
   }
 }
 
 .section {
   display: inline-block;
   box-sizing: border-box;
-  // only scale bottom padding to reduce padding between sections and after the last section.
-  padding-block-start: awsui.$space-xs;
   padding-block-end: awsui.$space-scaled-xs;
   padding-inline: 0;
   vertical-align: top;
@@ -173,10 +112,15 @@
     /* used in test-utils */
   }
 }
-.section:last-child {
+
+.section:not(:first-child) {
+  // The space above the first section is already given by the paddings of the card header and the card body.
+  // Only scale bottom padding to reduce padding between sections and after the last section.
   padding-block-start: awsui.$space-xs;
+}
+
+.section:last-child {
   padding-block-end: 0;
-  padding-inline: 0;
 }
 
 .footer-pagination {

package/lib/internal/scss/{cards → internal/components/card}/motion.scss

@@ -3,10 +3,10 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-@use '../internal/styles' as styles;
-@use '../internal/styles/tokens' as awsui;
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
 
-.card-inner {
+.root {
   @include styles.with-motion {
     transition-property: background-color;
     transition-duration: awsui.$motion-duration-transition-show-paced;
@@ -14,7 +14,7 @@
   }
 }
 
-.card-inner::before {
+.root::before {
   @include styles.with-motion {
     transition-property: border-top-color, border-right-color, border-bottom-color, border-left-color;
     transition-duration: awsui.$motion-duration-transition-show-paced;

package/lib/internal/scss/internal/components/card/styles.scss

@@ -0,0 +1,112 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use 'sass:math';
+
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
+@use './motion';
+
+@mixin card-style {
+  border-start-start-radius: awsui.$border-radius-container;
+  border-start-end-radius: awsui.$border-radius-container;
+  border-end-start-radius: awsui.$border-radius-container;
+  border-end-end-radius: awsui.$border-radius-container;
+  box-sizing: border-box;
+
+  &::before {
+    @include styles.base-pseudo-element;
+    // Reset border color to prevent it from flashing black during card selection animation
+    border-color: transparent;
+    border-block-start: awsui.$border-container-top-width solid awsui.$color-border-container-top;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
+    z-index: 1;
+  }
+
+  &::after {
+    @include styles.base-pseudo-element;
+    border-start-start-radius: awsui.$border-radius-container;
+    border-start-end-radius: awsui.$border-radius-container;
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
+  }
+  &:not(.refresh)::after {
+    box-shadow: awsui.$shadow-container;
+  }
+  &.refresh::after {
+    border-block: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+    border-inline: solid awsui.$border-divider-section-width awsui.$color-border-divider-default;
+  }
+}
+
+.root {
+  @include styles.styles-reset();
+  box-sizing: border-box;
+  position: relative;
+  background-color: awsui.$color-background-container-content;
+  min-inline-size: 0;
+  @include card-style;
+}
+
+$button-padding-vertical: styles.$control-padding-vertical;
+$button-padding-horizontal: awsui.$space-xxs;
+$padding-block-start-base: calc(awsui.$space-card-vertical - $button-padding-vertical);
+
+.header {
+  &:not(.no-padding) {
+    padding-block-end: awsui.$space-xxs;
+    padding-inline-start: awsui.$space-card-horizontal;
+    &:not(.with-actions) {
+      padding-block-start: $padding-block-start-base;
+      padding-inline-end: awsui.$space-card-horizontal;
+    }
+    &.with-actions {
+      // Compensate the padding given by the buttons in the actions slot
+      padding-block-start: calc($padding-block-start-base - $button-padding-vertical);
+      padding-inline-end: calc(awsui.$space-card-horizontal - $button-padding-horizontal);
+    }
+  }
+  &-inner {
+    @include styles.font-heading-s;
+  }
+}
+
+.body {
+  &:not(.no-padding) {
+    padding-block-start: awsui.$space-xxs;
+    padding-block-end: awsui.$space-card-vertical;
+    padding-inline: awsui.$space-card-horizontal;
+  }
+  &.no-padding {
+    border-end-start-radius: awsui.$border-radius-container;
+    border-end-end-radius: awsui.$border-radius-container;
+  }
+}
+
+.no-header,
+.no-content {
+  // No need to preserve the space between header and content when one of them is missing.
+  > .header:not(.no-padding) {
+    padding-block-end: 0;
+  }
+  > .body:not(.no-padding) {
+    padding-block-start: 0;
+  }
+}
+
+.selected {
+  background-color: awsui.$color-background-item-selected;
+  &::before {
+    border-block: awsui.$border-item-width solid awsui.$color-border-item-selected;
+    border-inline: awsui.$border-item-width solid awsui.$color-border-item-selected;
+  }
+}
+
+.description {
+  color: awsui.$color-text-heading-secondary;
+}

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

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

package/lib/internal/scss/table/body-cell/styles.scss

@@ -153,6 +153,14 @@ $cell-negative-space-vertical: 2px;
       text-overflow: ellipsis;
     }
   }
+
+  &-counter {
+    display: inline;
+    color: awsui.$color-text-body-secondary;
+    font-size: awsui.$font-size-body-s;
+    vertical-align: bottom;
+  }
+
   &:first-child {
     border-inline-start: $border-placeholder;
     @include cell-padding-inline-start($cell-edge-horizontal-padding);

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

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

package/lib/internal/template/cards/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,EAsML,mBAAmB,CAAC;AAE1B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"AAwCA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/D,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,EAsML,mBAAmB,CAAC;AAE1B,eAAe,KAAK,CAAC"}

package/lib/internal/template/cards/index.js

@@ -10,6 +10,7 @@ import { InternalContainerAsSubstep } from '../container/internal';
 import { useInternalI18n } from '../i18n/context';
 import { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';
 import { getBaseProps } from '../internal/base-component';
+import Card from '../internal/components/card';
 import { CollectionLabelContext } from '../internal/context/collection-label-context';
 import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
 import useBaseComponent from '../internal/hooks/use-base-component';
@@ -117,7 +118,6 @@ export default Cards;
 const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isItemSelected, getItemSelectionProps, visibleSections, onFocus, ariaLabelledby, ariaLabel, entireCardClickable, }) => {
     const selectable = !!selectionType;
     const canClickEntireCard = selectable && entireCardClickable;
-    const isRefresh = useVisualRefresh();
     const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);
     let visibleSectionsDefinition = cardDefinition.sections || [];
     visibleSectionsDefinition = visibleSections
@@ -146,7 +146,6 @@ const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isI
             },
         };
         return (React.createElement("li", { className: clsx(styles.card, {
-                [styles['card-selectable']]: selectable,
                 [styles['card-selected']]: selectable && selected,
             }), key: key, onFocus: onFocus, ...(focusMarkers && focusMarkers.item), role: listItemRole, ...getAnalyticsMetadataAttribute({
                 component: {
@@ -156,20 +155,19 @@ const CardsList = ({ items, cardDefinition, trackBy, selectionType, columns, isI
                     },
                 },
             }) },
-            React.createElement("div", { className: clsx(styles['card-inner'], isRefresh && styles.refresh), ...(canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}), onClick: canClickEntireCard
+            React.createElement(Card, { selected: selectable && selected, header: React.createElement("div", { className: styles['card-header'] },
+                    React.createElement("div", { className: clsx(styles['card-header-inner'], selectable && styles['card-header-inner-selectable'], analyticsSelectors['card-header']) }, cardDefinition.header ? cardDefinition.header(item) : ''),
+                    selectionProps && (React.createElement("div", { className: styles['selection-control'], ...(!canClickEntireCard && !disabled
+                            ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)
+                            : {}) },
+                        React.createElement(SelectionControl, { onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, ...selectionProps })))), metadataAttributes: canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}, onClick: canClickEntireCard
                     ? event => {
                         var _a;
                         selectionProps === null || selectionProps === void 0 ? void 0 : selectionProps.onChange();
                         // Manually move focus to the native input (checkbox or radio button)
                         (_a = event.currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus();
                     }
-                    : undefined },
-                React.createElement("div", { className: styles['card-header'] },
-                    React.createElement("div", { className: clsx(styles['card-header-inner'], analyticsSelectors['card-header']) }, cardDefinition.header ? cardDefinition.header(item) : ''),
-                    selectionProps && (React.createElement("div", { className: styles['selection-control'], ...(!canClickEntireCard && !disabled
-                            ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)
-                            : {}) },
-                        React.createElement(SelectionControl, { onFocusDown: moveFocusDown, onFocusUp: moveFocusUp, ...selectionProps })))),
+                    : undefined }, visibleSectionsDefinition.length > 0 &&
                 visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (React.createElement("div", { key: id || index, className: styles.section, style: { width: `${width}%` } },
                     header ? React.createElement("div", { className: styles['section-header'] }, header) : '',
                     content ? React.createElement("div", { className: styles['section-content'] }, content(item)) : ''))))));

package/lib/internal/template/cards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport {\n  focusMarkers,\n  SelectionControl,\n  SelectionControlProps,\n  useSelection,\n  useSelectionFocusMove,\n} from '../table/selection';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n  GeneratedAnalyticsMetadataCardsComponent,\n  GeneratedAnalyticsMetadataCardsDeselect,\n  GeneratedAnalyticsMetadataCardsSelect,\n} from './analytics-metadata/interfaces';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n  {\n    items = [],\n    cardDefinition,\n    cardsPerRow = [],\n    header,\n    filter,\n    pagination,\n    preferences,\n    empty,\n    loading,\n    loadingText,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels,\n    visibleSections,\n    stickyHeader,\n    stickyHeaderVerticalOffset,\n    variant = 'container',\n    renderAriaLive,\n    firstIndex = 1,\n    totalItemsCount,\n    entireCardClickable,\n    ...rest\n  }: CardsProps<T>,\n  ref: React.Ref<CardsProps.Ref>\n) {\n  const { __internalRootRef } = useBaseComponent('Cards', {\n    props: { entireCardClickable, selectionType, stickyHeader, variant },\n    metadata: { usesVisibleSections: !!visibleSections },\n  });\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n  const isMobile = useMobile();\n\n  const computedVariant = isRefresh ? variant : 'container';\n\n  const headerIdRef = useRef<string | undefined>(undefined);\n  const setHeaderRef = useCallback((id: string) => {\n    headerIdRef.current = id;\n  }, []);\n  const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n  const [columns, measureRef] = useContainerQuery<number>(\n    ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n    [cardsPerRow]\n  );\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n  const getMouseDownTarget = useMouseDownTarget();\n\n  const i18n = useInternalI18n('cards');\n  const { isItemSelected, getItemSelectionProps } = useSelection({\n    items,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels: {\n      itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n      selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n    },\n  });\n  const hasToolsHeader = header || filter || pagination || preferences;\n  const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n  stickyHeader = !isMobile && stickyHeader;\n  const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n    // When an element inside card receives focus we want to adjust the scroll.\n    // However, that behavior is unwanted when the focus is received as result of a click\n    // as it causes the click to never reach the target element.\n    if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n      scrollToItem(event.currentTarget);\n    }\n  };\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToTop: () => {\n        if (stickyHeader) {\n          scrollToTop();\n        }\n      },\n    }),\n    [stickyHeader, scrollToTop]\n  );\n  let status;\n  if (loading) {\n    status = (\n      <div className={styles.loading}>\n        <InternalStatusIndicator type=\"loading\">\n          <InternalLiveRegion tagName=\"span\">{loadingText}</InternalLiveRegion>\n        </InternalStatusIndicator>\n      </div>\n    );\n  } else if (empty && !items.length) {\n    status = <div className={styles.empty}>{empty}</div>;\n  }\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataCardsComponent = {\n    name: 'awsui.Cards',\n    label: `.${analyticsSelectors.container}`,\n    properties: {\n      selectionType: selectionType || 'none',\n      itemsCount: `${items.length}`,\n      selectedItemsCount: `${(selectedItems || []).length}`,\n      selectedItemsLabels: {\n        root: 'self',\n        selector: `.${styles['card-selected']} .${analyticsSelectors['card-header']}`,\n      },\n      variant,\n    },\n  };\n\n  if (trackBy) {\n    analyticsComponentMetadata.properties.selectedItems = (selectedItems || []).map(\n      (item, index) => `${getItemKey(trackBy, item, index)}`\n    );\n  }\n\n  return (\n    <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n      <AnalyticsFunnelSubStep>\n        <div\n          {...baseProps}\n          className={clsx(baseProps.className, styles.root)}\n          ref={mergedRef}\n          {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n        >\n          <InternalContainerAsSubstep\n            header={\n              hasToolsHeader && (\n                <div\n                  className={clsx(\n                    styles.header,\n                    isRefresh && styles['header-refresh'],\n                    styles[`header-variant-${computedVariant}`]\n                  )}\n                >\n                  <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n                    <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n                  </CollectionLabelContext.Provider>\n                </div>\n              )\n            }\n            footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n            disableContentPaddings={true}\n            disableHeaderPaddings={computedVariant === 'full-page'}\n            variant={computedVariant === 'container' ? 'cards' : computedVariant}\n            __stickyHeader={stickyHeader}\n            __stickyOffset={stickyHeaderVerticalOffset}\n            __headerRef={headerRef}\n            __fullPage={computedVariant === 'full-page'}\n            __disableFooterDivider={true}\n            className={analyticsSelectors.container}\n          >\n            <div\n              className={clsx(\n                hasToolsHeader && styles['has-header'],\n                isRefresh && styles.refresh,\n                styles[`header-variant-${computedVariant}`]\n              )}\n            >\n              {!!renderAriaLive && !!firstIndex && (\n                <InternalLiveRegion hidden={true} tagName=\"span\">\n                  <span>\n                    {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n                  </span>\n                </InternalLiveRegion>\n              )}\n              {status ?? (\n                <CardsList\n                  items={items}\n                  cardDefinition={cardDefinition}\n                  trackBy={trackBy}\n                  selectionType={selectionType}\n                  columns={columns}\n                  isItemSelected={isItemSelected}\n                  getItemSelectionProps={getItemSelectionProps}\n                  visibleSections={visibleSections}\n                  onFocus={onCardFocus}\n                  ariaLabel={ariaLabels?.cardsLabel}\n                  ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n                  entireCardClickable={entireCardClickable}\n                />\n              )}\n            </div>\n          </InternalContainerAsSubstep>\n        </div>\n      </AnalyticsFunnelSubStep>\n    </LinkDefaultVariantContext.Provider>\n  );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n  items,\n  cardDefinition,\n  trackBy,\n  selectionType,\n  columns,\n  isItemSelected,\n  getItemSelectionProps,\n  visibleSections,\n  onFocus,\n  ariaLabelledby,\n  ariaLabel,\n  entireCardClickable,\n}: Pick<\n  CardsProps<T>,\n  'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n> & {\n  columns: number | null;\n  isItemSelected: (item: T) => boolean;\n  getItemSelectionProps?: (item: T) => SelectionControlProps;\n  onFocus: FocusEventHandler<HTMLElement>;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n}) => {\n  const selectable = !!selectionType;\n  const canClickEntireCard = selectable && entireCardClickable;\n  const isRefresh = useVisualRefresh();\n\n  const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n  let visibleSectionsDefinition = cardDefinition.sections || [];\n  visibleSectionsDefinition = visibleSections\n    ? visibleSectionsDefinition.filter(\n        (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n      )\n    : visibleSectionsDefinition;\n\n  let listRole: 'group' | undefined = undefined;\n  let listItemRole: 'presentation' | undefined = undefined;\n\n  if (selectable) {\n    listRole = 'group';\n    listItemRole = 'presentation';\n  }\n\n  return (\n    <ol\n      className={clsx(styles.list, styles[`list-grid-${columns || 1}`], analyticsSelectors['cards-list'])}\n      role={listRole}\n      aria-labelledby={ariaLabelledby}\n      aria-label={ariaLabel}\n      {...(focusMarkers && focusMarkers.root)}\n    >\n      {items.map((item, index) => {\n        const key = getItemKey(trackBy, item, index);\n        const selectionProps = getItemSelectionProps ? getItemSelectionProps(item) : null;\n        const selected = isItemSelected(item);\n        const disabled = selectionProps && selectionProps.disabled;\n        const selectionAnalyticsMetadata:\n          | GeneratedAnalyticsMetadataCardsSelect\n          | GeneratedAnalyticsMetadataCardsDeselect = {\n          action: selected ? 'deselect' : 'select',\n          detail: {\n            label: {\n              selector: `.${analyticsSelectors['cards-list']} li:nth-child(${index + 1}) .${analyticsSelectors['card-header']}`,\n              root: 'component',\n            },\n            position: `${index + 1}`,\n            item: `${key}`,\n          },\n        };\n        return (\n          <li\n            className={clsx(styles.card, {\n              [styles['card-selectable']]: selectable,\n              [styles['card-selected']]: selectable && selected,\n            })}\n            key={key}\n            onFocus={onFocus}\n            {...(focusMarkers && focusMarkers.item)}\n            role={listItemRole}\n            {...getAnalyticsMetadataAttribute({\n              component: {\n                innerContext: {\n                  position: `${index + 1}`,\n                  item: `${key}`,\n                },\n              },\n            })}\n          >\n            <div\n              className={clsx(styles['card-inner'], isRefresh && styles.refresh)}\n              {...(canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {})}\n              onClick={\n                canClickEntireCard\n                  ? event => {\n                      selectionProps?.onChange();\n                      // Manually move focus to the native input (checkbox or radio button)\n                      event.currentTarget.querySelector('input')?.focus();\n                    }\n                  : undefined\n              }\n            >\n              <div className={styles['card-header']}>\n                <div className={clsx(styles['card-header-inner'], analyticsSelectors['card-header'])}>\n                  {cardDefinition.header ? cardDefinition.header(item) : ''}\n                </div>\n                {selectionProps && (\n                  <div\n                    className={styles['selection-control']}\n                    {...(!canClickEntireCard && !disabled\n                      ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)\n                      : {})}\n                  >\n                    <SelectionControl onFocusDown={moveFocusDown} onFocusUp={moveFocusUp} {...selectionProps} />\n                  </div>\n                )}\n              </div>\n              {visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n                <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n                  {header ? <div className={styles['section-header']}>{header}</div> : ''}\n                  {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n                </div>\n              ))}\n            </div>\n          </li>\n        );\n      })}\n    </ol>\n  );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/cards/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { FocusEventHandler, useCallback, useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalContainerAsSubstep } from '../container/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { AnalyticsFunnelSubStep } from '../internal/analytics/components/analytics-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport Card from '../internal/components/card';\nimport { CollectionLabelContext } from '../internal/context/collection-label-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport useMouseDownTarget from '../internal/hooks/use-mouse-down-target';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport {\n  focusMarkers,\n  SelectionControl,\n  SelectionControlProps,\n  useSelection,\n  useSelectionFocusMove,\n} from '../table/selection';\nimport stickyScrolling from '../table/sticky-scrolling';\nimport ToolsHeader from '../table/tools-header';\nimport { getItemKey } from '../table/utils';\nimport {\n  GeneratedAnalyticsMetadataCardsComponent,\n  GeneratedAnalyticsMetadataCardsDeselect,\n  GeneratedAnalyticsMetadataCardsSelect,\n} from './analytics-metadata/interfaces';\nimport { getCardsPerRow } from './cards-layout-helper';\nimport { CardsForwardRefType, CardsProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { CardsProps };\n\nconst Cards = React.forwardRef(function <T = any>(\n  {\n    items = [],\n    cardDefinition,\n    cardsPerRow = [],\n    header,\n    filter,\n    pagination,\n    preferences,\n    empty,\n    loading,\n    loadingText,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels,\n    visibleSections,\n    stickyHeader,\n    stickyHeaderVerticalOffset,\n    variant = 'container',\n    renderAriaLive,\n    firstIndex = 1,\n    totalItemsCount,\n    entireCardClickable,\n    ...rest\n  }: CardsProps<T>,\n  ref: React.Ref<CardsProps.Ref>\n) {\n  const { __internalRootRef } = useBaseComponent('Cards', {\n    props: { entireCardClickable, selectionType, stickyHeader, variant },\n    metadata: { usesVisibleSections: !!visibleSections },\n  });\n  const baseProps = getBaseProps(rest);\n  const isRefresh = useVisualRefresh();\n  const isMobile = useMobile();\n\n  const computedVariant = isRefresh ? variant : 'container';\n\n  const headerIdRef = useRef<string | undefined>(undefined);\n  const setHeaderRef = useCallback((id: string) => {\n    headerIdRef.current = id;\n  }, []);\n  const isLabelledByHeader = !ariaLabels?.cardsLabel && !!header;\n\n  const [columns, measureRef] = useContainerQuery<number>(\n    ({ contentBoxWidth }) => getCardsPerRow(contentBoxWidth, cardsPerRow),\n    [cardsPerRow]\n  );\n  const refObject = useRef(null);\n  const mergedRef = useMergeRefs(measureRef, refObject, __internalRootRef);\n  const getMouseDownTarget = useMouseDownTarget();\n\n  const i18n = useInternalI18n('cards');\n  const { isItemSelected, getItemSelectionProps } = useSelection({\n    items,\n    trackBy,\n    selectedItems,\n    selectionType,\n    isItemDisabled,\n    onSelectionChange,\n    ariaLabels: {\n      itemSelectionLabel: ariaLabels?.itemSelectionLabel,\n      selectionGroupLabel: i18n('ariaLabels.selectionGroupLabel', ariaLabels?.selectionGroupLabel),\n    },\n  });\n  const hasToolsHeader = header || filter || pagination || preferences;\n  const hasFooterPagination = isMobile && variant === 'full-page' && !!pagination;\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  const { scrollToTop, scrollToItem } = stickyScrolling(refObject, headerRef);\n  stickyHeader = !isMobile && stickyHeader;\n  const onCardFocus: FocusEventHandler<HTMLElement> = event => {\n    // When an element inside card receives focus we want to adjust the scroll.\n    // However, that behavior is unwanted when the focus is received as result of a click\n    // as it causes the click to never reach the target element.\n    if (stickyHeader && !event.currentTarget.contains(getMouseDownTarget())) {\n      scrollToItem(event.currentTarget);\n    }\n  };\n  useImperativeHandle(\n    ref,\n    () => ({\n      scrollToTop: () => {\n        if (stickyHeader) {\n          scrollToTop();\n        }\n      },\n    }),\n    [stickyHeader, scrollToTop]\n  );\n  let status;\n  if (loading) {\n    status = (\n      <div className={styles.loading}>\n        <InternalStatusIndicator type=\"loading\">\n          <InternalLiveRegion tagName=\"span\">{loadingText}</InternalLiveRegion>\n        </InternalStatusIndicator>\n      </div>\n    );\n  } else if (empty && !items.length) {\n    status = <div className={styles.empty}>{empty}</div>;\n  }\n\n  const analyticsComponentMetadata: GeneratedAnalyticsMetadataCardsComponent = {\n    name: 'awsui.Cards',\n    label: `.${analyticsSelectors.container}`,\n    properties: {\n      selectionType: selectionType || 'none',\n      itemsCount: `${items.length}`,\n      selectedItemsCount: `${(selectedItems || []).length}`,\n      selectedItemsLabels: {\n        root: 'self',\n        selector: `.${styles['card-selected']} .${analyticsSelectors['card-header']}`,\n      },\n      variant,\n    },\n  };\n\n  if (trackBy) {\n    analyticsComponentMetadata.properties.selectedItems = (selectedItems || []).map(\n      (item, index) => `${getItemKey(trackBy, item, index)}`\n    );\n  }\n\n  return (\n    <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n      <AnalyticsFunnelSubStep>\n        <div\n          {...baseProps}\n          className={clsx(baseProps.className, styles.root)}\n          ref={mergedRef}\n          {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n        >\n          <InternalContainerAsSubstep\n            header={\n              hasToolsHeader && (\n                <div\n                  className={clsx(\n                    styles.header,\n                    isRefresh && styles['header-refresh'],\n                    styles[`header-variant-${computedVariant}`]\n                  )}\n                >\n                  <CollectionLabelContext.Provider value={{ assignId: setHeaderRef }}>\n                    <ToolsHeader header={header} filter={filter} pagination={pagination} preferences={preferences} />\n                  </CollectionLabelContext.Provider>\n                </div>\n              )\n            }\n            footer={hasFooterPagination && <div className={styles['footer-pagination']}>{pagination}</div>}\n            disableContentPaddings={true}\n            disableHeaderPaddings={computedVariant === 'full-page'}\n            variant={computedVariant === 'container' ? 'cards' : computedVariant}\n            __stickyHeader={stickyHeader}\n            __stickyOffset={stickyHeaderVerticalOffset}\n            __headerRef={headerRef}\n            __fullPage={computedVariant === 'full-page'}\n            __disableFooterDivider={true}\n            className={analyticsSelectors.container}\n          >\n            <div\n              className={clsx(\n                hasToolsHeader && styles['has-header'],\n                isRefresh && styles.refresh,\n                styles[`header-variant-${computedVariant}`]\n              )}\n            >\n              {!!renderAriaLive && !!firstIndex && (\n                <InternalLiveRegion hidden={true} tagName=\"span\">\n                  <span>\n                    {renderAriaLive({ totalItemsCount, firstIndex, lastIndex: firstIndex + items.length - 1 })}\n                  </span>\n                </InternalLiveRegion>\n              )}\n              {status ?? (\n                <CardsList\n                  items={items}\n                  cardDefinition={cardDefinition}\n                  trackBy={trackBy}\n                  selectionType={selectionType}\n                  columns={columns}\n                  isItemSelected={isItemSelected}\n                  getItemSelectionProps={getItemSelectionProps}\n                  visibleSections={visibleSections}\n                  onFocus={onCardFocus}\n                  ariaLabel={ariaLabels?.cardsLabel}\n                  ariaLabelledby={isLabelledByHeader && headerIdRef.current ? headerIdRef.current : undefined}\n                  entireCardClickable={entireCardClickable}\n                />\n              )}\n            </div>\n          </InternalContainerAsSubstep>\n        </div>\n      </AnalyticsFunnelSubStep>\n    </LinkDefaultVariantContext.Provider>\n  );\n}) as CardsForwardRefType;\n\nexport default Cards;\n\nconst CardsList = <T,>({\n  items,\n  cardDefinition,\n  trackBy,\n  selectionType,\n  columns,\n  isItemSelected,\n  getItemSelectionProps,\n  visibleSections,\n  onFocus,\n  ariaLabelledby,\n  ariaLabel,\n  entireCardClickable,\n}: Pick<\n  CardsProps<T>,\n  'items' | 'cardDefinition' | 'trackBy' | 'selectionType' | 'visibleSections' | 'entireCardClickable'\n> & {\n  columns: number | null;\n  isItemSelected: (item: T) => boolean;\n  getItemSelectionProps?: (item: T) => SelectionControlProps;\n  onFocus: FocusEventHandler<HTMLElement>;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n}) => {\n  const selectable = !!selectionType;\n  const canClickEntireCard = selectable && entireCardClickable;\n\n  const { moveFocusDown, moveFocusUp } = useSelectionFocusMove(selectionType, items.length);\n\n  let visibleSectionsDefinition = cardDefinition.sections || [];\n  visibleSectionsDefinition = visibleSections\n    ? visibleSectionsDefinition.filter(\n        (section: CardsProps.SectionDefinition<T>) => section.id && visibleSections.indexOf(section.id) !== -1\n      )\n    : visibleSectionsDefinition;\n\n  let listRole: 'group' | undefined = undefined;\n  let listItemRole: 'presentation' | undefined = undefined;\n\n  if (selectable) {\n    listRole = 'group';\n    listItemRole = 'presentation';\n  }\n\n  return (\n    <ol\n      className={clsx(styles.list, styles[`list-grid-${columns || 1}`], analyticsSelectors['cards-list'])}\n      role={listRole}\n      aria-labelledby={ariaLabelledby}\n      aria-label={ariaLabel}\n      {...(focusMarkers && focusMarkers.root)}\n    >\n      {items.map((item, index) => {\n        const key = getItemKey(trackBy, item, index);\n        const selectionProps = getItemSelectionProps ? getItemSelectionProps(item) : null;\n        const selected = isItemSelected(item);\n        const disabled = selectionProps && selectionProps.disabled;\n        const selectionAnalyticsMetadata:\n          | GeneratedAnalyticsMetadataCardsSelect\n          | GeneratedAnalyticsMetadataCardsDeselect = {\n          action: selected ? 'deselect' : 'select',\n          detail: {\n            label: {\n              selector: `.${analyticsSelectors['cards-list']} li:nth-child(${index + 1}) .${analyticsSelectors['card-header']}`,\n              root: 'component',\n            },\n            position: `${index + 1}`,\n            item: `${key}`,\n          },\n        };\n        return (\n          <li\n            className={clsx(styles.card, {\n              [styles['card-selected']]: selectable && selected,\n            })}\n            key={key}\n            onFocus={onFocus}\n            {...(focusMarkers && focusMarkers.item)}\n            role={listItemRole}\n            {...getAnalyticsMetadataAttribute({\n              component: {\n                innerContext: {\n                  position: `${index + 1}`,\n                  item: `${key}`,\n                },\n              },\n            })}\n          >\n            <Card\n              selected={selectable && selected}\n              header={\n                <div className={styles['card-header']}>\n                  <div\n                    className={clsx(\n                      styles['card-header-inner'],\n                      selectable && styles['card-header-inner-selectable'],\n                      analyticsSelectors['card-header']\n                    )}\n                  >\n                    {cardDefinition.header ? cardDefinition.header(item) : ''}\n                  </div>\n                  {selectionProps && (\n                    <div\n                      className={styles['selection-control']}\n                      {...(!canClickEntireCard && !disabled\n                        ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata)\n                        : {})}\n                    >\n                      <SelectionControl onFocusDown={moveFocusDown} onFocusUp={moveFocusUp} {...selectionProps} />\n                    </div>\n                  )}\n                </div>\n              }\n              metadataAttributes={\n                canClickEntireCard && !disabled ? getAnalyticsMetadataAttribute(selectionAnalyticsMetadata) : {}\n              }\n              onClick={\n                canClickEntireCard\n                  ? event => {\n                      selectionProps?.onChange();\n                      // Manually move focus to the native input (checkbox or radio button)\n                      event.currentTarget.querySelector('input')?.focus();\n                    }\n                  : undefined\n              }\n            >\n              {visibleSectionsDefinition.length > 0 &&\n                visibleSectionsDefinition.map(({ width = 100, header, content, id }, index) => (\n                  <div key={id || index} className={styles.section} style={{ width: `${width}%` }}>\n                    {header ? <div className={styles['section-header']}>{header}</div> : ''}\n                    {content ? <div className={styles['section-content']}>{content(item)}</div> : ''}\n                  </div>\n                ))}\n            </Card>\n          </li>\n        );\n      })}\n    </ol>\n  );\n};\n\napplyDisplayName(Cards, 'Cards');\n"]}

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

@@ -1,44 +1,43 @@
 
     import './styles.scoped.css';
     export default {
-  "card-inner": "awsui_card-inner_p8a6i_169tu_161",
-  "root": "awsui_root_p8a6i_169tu_193",
-  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_169tu_232",
-  "header-refresh": "awsui_header-refresh_p8a6i_169tu_232",
-  "list": "awsui_list_p8a6i_169tu_239",
-  "list-grid-1": "awsui_list-grid-1_p8a6i_169tu_250",
-  "card": "awsui_card_p8a6i_169tu_161",
-  "list-grid-2": "awsui_list-grid-2_p8a6i_169tu_253",
-  "list-grid-3": "awsui_list-grid-3_p8a6i_169tu_256",
-  "list-grid-4": "awsui_list-grid-4_p8a6i_169tu_259",
-  "list-grid-5": "awsui_list-grid-5_p8a6i_169tu_262",
-  "list-grid-6": "awsui_list-grid-6_p8a6i_169tu_265",
-  "list-grid-7": "awsui_list-grid-7_p8a6i_169tu_268",
-  "list-grid-8": "awsui_list-grid-8_p8a6i_169tu_271",
-  "list-grid-9": "awsui_list-grid-9_p8a6i_169tu_274",
-  "list-grid-10": "awsui_list-grid-10_p8a6i_169tu_277",
-  "list-grid-11": "awsui_list-grid-11_p8a6i_169tu_280",
-  "list-grid-12": "awsui_list-grid-12_p8a6i_169tu_283",
-  "list-grid-13": "awsui_list-grid-13_p8a6i_169tu_286",
-  "list-grid-14": "awsui_list-grid-14_p8a6i_169tu_289",
-  "list-grid-15": "awsui_list-grid-15_p8a6i_169tu_292",
-  "list-grid-16": "awsui_list-grid-16_p8a6i_169tu_295",
-  "list-grid-17": "awsui_list-grid-17_p8a6i_169tu_298",
-  "list-grid-18": "awsui_list-grid-18_p8a6i_169tu_301",
-  "list-grid-19": "awsui_list-grid-19_p8a6i_169tu_304",
-  "list-grid-20": "awsui_list-grid-20_p8a6i_169tu_307",
-  "selection-control": "awsui_selection-control_p8a6i_169tu_311",
-  "loading": "awsui_loading_p8a6i_169tu_321",
-  "empty": "awsui_empty_p8a6i_169tu_322",
-  "has-header": "awsui_has-header_p8a6i_169tu_329",
-  "refresh": "awsui_refresh_p8a6i_169tu_332",
-  "card-header": "awsui_card-header_p8a6i_169tu_404",
-  "card-header-inner": "awsui_card-header-inner_p8a6i_169tu_412",
-  "card-selectable": "awsui_card-selectable_p8a6i_169tu_416",
-  "card-selected": "awsui_card-selected_p8a6i_169tu_419",
-  "section": "awsui_section_p8a6i_169tu_427",
-  "section-header": "awsui_section-header_p8a6i_169tu_435",
-  "section-content": "awsui_section-content_p8a6i_169tu_441",
-  "footer-pagination": "awsui_footer-pagination_p8a6i_169tu_451"
+  "root": "awsui_root_p8a6i_1s5sk_145",
+  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_1s5sk_177",
+  "header-refresh": "awsui_header-refresh_p8a6i_1s5sk_177",
+  "list": "awsui_list_p8a6i_1s5sk_184",
+  "list-grid-1": "awsui_list-grid-1_p8a6i_1s5sk_195",
+  "card": "awsui_card_p8a6i_1s5sk_195",
+  "list-grid-2": "awsui_list-grid-2_p8a6i_1s5sk_198",
+  "list-grid-3": "awsui_list-grid-3_p8a6i_1s5sk_201",
+  "list-grid-4": "awsui_list-grid-4_p8a6i_1s5sk_204",
+  "list-grid-5": "awsui_list-grid-5_p8a6i_1s5sk_207",
+  "list-grid-6": "awsui_list-grid-6_p8a6i_1s5sk_210",
+  "list-grid-7": "awsui_list-grid-7_p8a6i_1s5sk_213",
+  "list-grid-8": "awsui_list-grid-8_p8a6i_1s5sk_216",
+  "list-grid-9": "awsui_list-grid-9_p8a6i_1s5sk_219",
+  "list-grid-10": "awsui_list-grid-10_p8a6i_1s5sk_222",
+  "list-grid-11": "awsui_list-grid-11_p8a6i_1s5sk_225",
+  "list-grid-12": "awsui_list-grid-12_p8a6i_1s5sk_228",
+  "list-grid-13": "awsui_list-grid-13_p8a6i_1s5sk_231",
+  "list-grid-14": "awsui_list-grid-14_p8a6i_1s5sk_234",
+  "list-grid-15": "awsui_list-grid-15_p8a6i_1s5sk_237",
+  "list-grid-16": "awsui_list-grid-16_p8a6i_1s5sk_240",
+  "list-grid-17": "awsui_list-grid-17_p8a6i_1s5sk_243",
+  "list-grid-18": "awsui_list-grid-18_p8a6i_1s5sk_246",
+  "list-grid-19": "awsui_list-grid-19_p8a6i_1s5sk_249",
+  "list-grid-20": "awsui_list-grid-20_p8a6i_1s5sk_252",
+  "selection-control": "awsui_selection-control_p8a6i_1s5sk_256",
+  "loading": "awsui_loading_p8a6i_1s5sk_266",
+  "empty": "awsui_empty_p8a6i_1s5sk_267",
+  "has-header": "awsui_has-header_p8a6i_1s5sk_274",
+  "refresh": "awsui_refresh_p8a6i_1s5sk_277",
+  "card-header": "awsui_card-header_p8a6i_1s5sk_293",
+  "card-header-inner": "awsui_card-header-inner_p8a6i_1s5sk_301",
+  "card-header-inner-selectable": "awsui_card-header-inner-selectable_p8a6i_1s5sk_304",
+  "card-selected": "awsui_card-selected_p8a6i_1s5sk_307",
+  "section": "awsui_section_p8a6i_1s5sk_311",
+  "section-header": "awsui_section-header_p8a6i_1s5sk_318",
+  "section-content": "awsui_section-content_p8a6i_1s5sk_324",
+  "footer-pagination": "awsui_footer-pagination_p8a6i_1s5sk_336"
 };