@cloudscape-design/components 3.0.287 → 3.0.288

package/cards/interfaces.d.ts

@@ -161,6 +161,21 @@ export interface CardsProps<T = any> extends BaseComponentProps {
      * need to position the sticky header below other fixed position elements on the page.
      */
     stickyHeaderVerticalOffset?: number;
+    /**
+     * Use this property to inform screen readers how many cards there are.
+     * It specifies the total number of cards.
+     * If there is an unknown total number of cards, leave this property undefined.   */
+    totalItemsCount?: number;
+    /**
+     *  Use this property to inform screen readers which range of cards is currently displayed.
+     *  It specifies the index (1-based) of the first card.
+     *  If the cards list has no pagination, leave this property undefined.   */
+    firstIndex?: number;
+    /**
+     * Use this function to announce page changes to screen reader users.
+     * Requires the properties firstIndex and totalItemsCount to be set correctly.
+     */
+    renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;
     /**
      * Specify a cards variant with one of the following:
      * * `container` - Use this variant to have the cards displayed as a container.
@@ -199,6 +214,11 @@ export declare namespace CardsProps {
         selectionGroupLabel: string;
         cardsLabel?: string;
     }
+    interface LiveAnnouncement {
+        totalItemsCount?: number;
+        firstIndex: number;
+        lastIndex: number;
+    }
     interface Ref {
         /**
          * When the sticky header is enabled, calling this function scrolls cards's

package/cards/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,mBAAmB;IAClC,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAC9E;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,kBAAkB;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;OAIG;IACH,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAExB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;;;;;;;;OAcG;IACH,cAAc,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+CG;IACH,WAAW,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IACpD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAChC;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC;IACzC;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IACjC;;OAEG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9C;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACtC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACxC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAEpC;;;wFAGoF;IACpF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;gFAG4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,gBAAgB,KAAK,MAAM,CAAC;IAE/D;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,WAAW,CAAC;CACrC;AAED,yBAAiB,UAAU,CAAC;IAC1B,UAAiB,cAAc,CAAC,CAAC;QAC/B,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAClC,QAAQ,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;KAChD;IAED,UAAiB,iBAAiB,CAAC,CAAC;QAClC,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACnC,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB;IAED,UAAiB,WAAW;QAC1B,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB;IAED,KAAY,OAAO,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAExD,KAAY,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;IAE/C,UAAiB,cAAc,CAAC,CAAC;QAC/B,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;KACjC;IAED,UAAiB,qBAAqB,CAAC,CAAC;QACtC,aAAa,EAAE,CAAC,EAAE,CAAC;KACpB;IAED,KAAY,cAAc,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;IAErD,UAAiB,UAAU,CAAC,CAAC;QAC3B,kBAAkB,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;QAC3E,mBAAmB,EAAE,MAAM,CAAC;QAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB;IAED,UAAiB,gBAAgB;QAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,UAAU,EAAE,MAAM,CAAC;QACnB,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,GAAG;QAClB;;;WAGG;QACH,WAAW,IAAI,IAAI,CAAC;KACrB;CACF"}

package/cards/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"heading-m\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["cards/interfaces.tsx"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface CardsForwardRefType {\n  <T>(props: CardsProps<T> & { ref?: React.Ref<CardsProps.Ref> }): JSX.Element;\n}\n\nexport interface CardsProps<T = any> extends BaseComponentProps {\n  /**\n   * Displayed only when the list of items is empty.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Heading element of the table container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Use this slot to add filtering controls to the component.\n   */\n  filter?: React.ReactNode;\n\n  /**\n   * Use this slot to add the [pagination component](/components/pagination/) to the component.\n   */\n  pagination?: React.ReactNode;\n\n  /**\n   * Use this slot to add [collection preferences](/components/collection-preferences/) to the component.\n   */\n  preferences?: React.ReactNode;\n\n  /**\n   * Specifies the items that serve as data source for a card.\n   *\n   * The `cardDefinition` property handles the display of this data.\n   */\n  items: ReadonlyArray<T>;\n\n  /**\n   * Renders the cards in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text to display when in loading state.\n   */\n  loadingText?: string;\n\n  /**\n   *  Defines what to display in each card. It has the following properties:\n   *  * `header` ((item) => ReactNode) - Responsible for displaying the card header. You receive the current item as an argument.\n   *      Use `fontSize=\"heading-m\"` on [link](/components/link/) components inside card header.\n   *  * `sections` (array) - Responsible for displaying the card content. Cards can have many sections in their\n   *    body. Each entry in the array is responsible for displaying a section. An entry has the following properties:\n   *    * `id`: (string) - A unique identifier for the section. The property is used as a [keys](https://reactjs.org/docs/lists-and-keys.html#keys)\n   *   source for React rendering, and to match entries in the `visibleSections` property (if it's defined).\n   *    * `header`: (ReactNode) - Responsible for displaying the section header.\n   *    * `content`: ((item) => ReactNode) - Responsible for displaying the section content. You receive the current item as an argument.\n   *    * `width`: (number) - Specifies the width of the card section in percent. Use this to display multiple sections in\n   *    the same row. The default value is 100%.\n   *\n   *  All of the above properties are optional.\n   */\n  cardDefinition: CardsProps.CardDefinition<T>;\n  /**\n   * Determines the number of cards per row for any interval of container width.\n   * It's an array whose entries are objects containing the following:\n   * - `cards` (number) - Specifies the number of cards per row.\n   * - `minWidth` (number) - Specifies the minimum container width (in pixels) for which this configuration object should apply.\n   *\n   * For example, with this configuration:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 500,\n   *   cards: 2\n   * }, {\n   *   minWidth: 800,\n   *   cards: 3\n   * }]\n   * ```\n   *\n   * the cards component displays:\n   * * 1 card per row when the container width is below 500px.\n   * * 2 cards per row when the container width is between 500px and 799px.\n   * * 3 cards per row when the container width is 800px or wider.\n   *\n   * The number of cards per row can't be greater than 20.\n   *\n   * Default value:\n   * ```\n   * [{\n   *   cards: 1\n   * }, {\n   *   minWidth: 768,\n   *   cards: 2\n   * }, {\n   *   minWidth: 992,\n   *   cards: 3\n   * }, {\n   *   minWidth: 1200,\n   *   cards: 4\n   * }, {\n   *   minWidth: 1400,\n   *   cards: 5\n   * }, {\n   *   minWidth: 1920,\n   *   cards: 6\n   * }]\n   * ```\n   */\n  cardsPerRow?: ReadonlyArray<CardsProps.CardsLayout>;\n  /**\n   * Specifies the property inside items that uniquely identifies them.\n   * When it's set, it's used to provide [keys for React](https://reactjs.org/docs/lists-and-keys.html#keys)\n   * for performance optimizations.\n   *\n   * It's also used for connecting `items` and `selectedItems` values when they don't reference the same object.\n   */\n  trackBy?: CardsProps.TrackBy<T>;\n  /**\n   * Specifies the selection mode. It can be either `single` or `multi`.\n   */\n  selectionType?: CardsProps.SelectionType;\n  /**\n   * Specifies the list of selected items.\n   */\n  selectedItems?: ReadonlyArray<T>;\n  /**\n   * Determines which items are disabled. If an item is disabled, users can't select it.\n   */\n  isItemDisabled?: CardsProps.IsItemDisabled<T>;\n  /**\n   * Adds labels to the selection components (checkboxes and radio buttons) as follows:\n   * * `itemSelectionLabel` ((SelectionState, Item) => string) - Determines the label for an item.\n   * * `selectionGroupLabel` (string) - Specifies the label for the group selection control.\n   * * `cardsLabel` (string) - Provides alternative text for the cards list.\n   *                            By default the contents of the `header` are used.\n   *\n   * You can use the first arguments of type `SelectionState` to access the current selection\n   * state of the component (for example, the `selectedItems` list). The label function for individual\n   * items also receives the corresponding  `Item` object. You can use the group label to\n   * add a meaningful description to the whole selection.\n   */\n  ariaLabels?: CardsProps.AriaLabels<T>;\n  /**\n   * Specifies an array containing the `id` of each visible section. If not set, all sections are displayed.\n   *\n   * Use it in conjunction with the visible content preference of the [collection preferences](/components/collection-preferences/) component.\n   *\n   * The order of `id`s doesn't influence the order of display of sections, which is controlled by the `cardDefinition` property.\n   */\n  visibleSections?: ReadonlyArray<string>;\n  /**\n   * Called when a user interaction causes a change in the list of selected items.\n   * The event `detail` contains the current list of `selectedItems`.\n   */\n  onSelectionChange?: NonCancelableEventHandler<CardsProps.SelectionChangeDetail<T>>;\n  /**\n   * If set to true, the cards header remains visible when the user scrolls down.\n   */\n  stickyHeader?: boolean;\n  /**\n   * Optionally provide a vertical offset (in pixels) for the sticky header, for example if you\n   * need to position the sticky header below other fixed position elements on the page.\n   */\n  stickyHeaderVerticalOffset?: number;\n\n  /**\n   * Use this property to inform screen readers how many cards there are.\n   * It specifies the total number of cards.\n   * If there is an unknown total number of cards, leave this property undefined.   */\n  totalItemsCount?: number;\n  /**\n   *  Use this property to inform screen readers which range of cards is currently displayed.\n   *  It specifies the index (1-based) of the first card.\n   *  If the cards list has no pagination, leave this property undefined.   */\n  firstIndex?: number;\n  /**\n   * Use this function to announce page changes to screen reader users.\n   * Requires the properties firstIndex and totalItemsCount to be set correctly.\n   */\n  renderAriaLive?: (data: CardsProps.LiveAnnouncement) => string;\n\n  /**\n   * Specify a cards variant with one of the following:\n   * * `container` - Use this variant to have the cards displayed as a container.\n   * * `full-page` – Use this variant when cards are the entire content of a page. Full page variants\n   *                 implement the high contrast header and content behavior automatically.\n   * @visualrefresh `full-page` variant\n   */\n  variant?: 'container' | 'full-page';\n}\n\nexport namespace CardsProps {\n  export interface CardDefinition<T> {\n    header?(item: T): React.ReactNode;\n    sections?: ReadonlyArray<SectionDefinition<T>>;\n  }\n\n  export interface SectionDefinition<T> {\n    id?: string;\n    header?: React.ReactNode;\n    content?(item: T): React.ReactNode;\n    width?: number;\n  }\n\n  export interface CardsLayout {\n    cards: number;\n    minWidth?: number;\n  }\n\n  export type TrackBy<T> = string | ((item: T) => string);\n\n  export type SelectionType = 'single' | 'multi';\n\n  export interface SelectionState<T> {\n    selectedItems: ReadonlyArray<T>;\n  }\n\n  export interface SelectionChangeDetail<T> {\n    selectedItems: T[];\n  }\n\n  export type IsItemDisabled<T> = (item: T) => boolean;\n\n  export interface AriaLabels<T> {\n    itemSelectionLabel: (data: CardsProps.SelectionState<T>, row: T) => string;\n    selectionGroupLabel: string;\n    cardsLabel?: string;\n  }\n\n  export interface LiveAnnouncement {\n    totalItemsCount?: number;\n    firstIndex: number;\n    lastIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * When the sticky header is enabled, calling this function scrolls cards's\n     * scroll parent up to reveal the first card or row of cards.\n     */\n    scrollToTop(): void;\n  }\n}\n"]}

package/cards/styles.css.js

@@ -1,42 +1,42 @@
 
     import './styles.scoped.css';
     export default {
-  "card-inner": "awsui_card-inner_p8a6i_1f0po_97",
-  "root": "awsui_root_p8a6i_1f0po_133",
-  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_1f0po_153",
-  "header-refresh": "awsui_header-refresh_p8a6i_1f0po_153",
-  "list": "awsui_list_p8a6i_1f0po_196",
-  "list-grid-1": "awsui_list-grid-1_p8a6i_1f0po_204",
-  "card": "awsui_card_p8a6i_1f0po_97",
-  "list-grid-2": "awsui_list-grid-2_p8a6i_1f0po_207",
-  "list-grid-3": "awsui_list-grid-3_p8a6i_1f0po_210",
-  "list-grid-4": "awsui_list-grid-4_p8a6i_1f0po_213",
-  "list-grid-5": "awsui_list-grid-5_p8a6i_1f0po_216",
-  "list-grid-6": "awsui_list-grid-6_p8a6i_1f0po_219",
-  "list-grid-7": "awsui_list-grid-7_p8a6i_1f0po_222",
-  "list-grid-8": "awsui_list-grid-8_p8a6i_1f0po_225",
-  "list-grid-9": "awsui_list-grid-9_p8a6i_1f0po_228",
-  "list-grid-10": "awsui_list-grid-10_p8a6i_1f0po_231",
-  "list-grid-11": "awsui_list-grid-11_p8a6i_1f0po_234",
-  "list-grid-12": "awsui_list-grid-12_p8a6i_1f0po_237",
-  "list-grid-13": "awsui_list-grid-13_p8a6i_1f0po_240",
-  "list-grid-14": "awsui_list-grid-14_p8a6i_1f0po_243",
-  "list-grid-15": "awsui_list-grid-15_p8a6i_1f0po_246",
-  "list-grid-16": "awsui_list-grid-16_p8a6i_1f0po_249",
-  "list-grid-17": "awsui_list-grid-17_p8a6i_1f0po_252",
-  "list-grid-18": "awsui_list-grid-18_p8a6i_1f0po_255",
-  "list-grid-19": "awsui_list-grid-19_p8a6i_1f0po_258",
-  "list-grid-20": "awsui_list-grid-20_p8a6i_1f0po_261",
-  "selection-control": "awsui_selection-control_p8a6i_1f0po_265",
-  "loading": "awsui_loading_p8a6i_1f0po_274",
-  "empty": "awsui_empty_p8a6i_1f0po_275",
-  "has-header": "awsui_has-header_p8a6i_1f0po_282",
-  "card-header": "awsui_card-header_p8a6i_1f0po_343",
-  "card-header-inner": "awsui_card-header-inner_p8a6i_1f0po_351",
-  "card-selectable": "awsui_card-selectable_p8a6i_1f0po_355",
-  "card-selected": "awsui_card-selected_p8a6i_1f0po_358",
-  "section": "awsui_section_p8a6i_1f0po_365",
-  "section-header": "awsui_section-header_p8a6i_1f0po_371",
-  "section-content": "awsui_section-content_p8a6i_1f0po_377"
+  "card-inner": "awsui_card-inner_p8a6i_e5c72_97",
+  "root": "awsui_root_p8a6i_e5c72_133",
+  "header-variant-full-page": "awsui_header-variant-full-page_p8a6i_e5c72_153",
+  "header-refresh": "awsui_header-refresh_p8a6i_e5c72_153",
+  "list": "awsui_list_p8a6i_e5c72_196",
+  "list-grid-1": "awsui_list-grid-1_p8a6i_e5c72_204",
+  "card": "awsui_card_p8a6i_e5c72_97",
+  "list-grid-2": "awsui_list-grid-2_p8a6i_e5c72_207",
+  "list-grid-3": "awsui_list-grid-3_p8a6i_e5c72_210",
+  "list-grid-4": "awsui_list-grid-4_p8a6i_e5c72_213",
+  "list-grid-5": "awsui_list-grid-5_p8a6i_e5c72_216",
+  "list-grid-6": "awsui_list-grid-6_p8a6i_e5c72_219",
+  "list-grid-7": "awsui_list-grid-7_p8a6i_e5c72_222",
+  "list-grid-8": "awsui_list-grid-8_p8a6i_e5c72_225",
+  "list-grid-9": "awsui_list-grid-9_p8a6i_e5c72_228",
+  "list-grid-10": "awsui_list-grid-10_p8a6i_e5c72_231",
+  "list-grid-11": "awsui_list-grid-11_p8a6i_e5c72_234",
+  "list-grid-12": "awsui_list-grid-12_p8a6i_e5c72_237",
+  "list-grid-13": "awsui_list-grid-13_p8a6i_e5c72_240",
+  "list-grid-14": "awsui_list-grid-14_p8a6i_e5c72_243",
+  "list-grid-15": "awsui_list-grid-15_p8a6i_e5c72_246",
+  "list-grid-16": "awsui_list-grid-16_p8a6i_e5c72_249",
+  "list-grid-17": "awsui_list-grid-17_p8a6i_e5c72_252",
+  "list-grid-18": "awsui_list-grid-18_p8a6i_e5c72_255",
+  "list-grid-19": "awsui_list-grid-19_p8a6i_e5c72_258",
+  "list-grid-20": "awsui_list-grid-20_p8a6i_e5c72_261",
+  "selection-control": "awsui_selection-control_p8a6i_e5c72_265",
+  "loading": "awsui_loading_p8a6i_e5c72_274",
+  "empty": "awsui_empty_p8a6i_e5c72_275",
+  "has-header": "awsui_has-header_p8a6i_e5c72_282",
+  "card-header": "awsui_card-header_p8a6i_e5c72_343",
+  "card-header-inner": "awsui_card-header-inner_p8a6i_e5c72_351",
+  "card-selectable": "awsui_card-selectable_p8a6i_e5c72_355",
+  "card-selected": "awsui_card-selected_p8a6i_e5c72_358",
+  "section": "awsui_section_p8a6i_e5c72_365",
+  "section-header": "awsui_section-header_p8a6i_e5c72_371",
+  "section-content": "awsui_section-content_p8a6i_e5c72_377"
 };
   

package/cards/styles.scoped.css

@@ -94,34 +94,34 @@ 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_card-inner_p8a6i_1f0po_97:not(#\9) {
+.awsui_card-inner_p8a6i_e5c72_97:not(#\9) {
   transition-property: background-color;
-  transition-duration: var(--motion-duration-transition-show-paced-ai4wlf, 180ms);
-  transition-timing-function: var(--motion-easing-transition-show-paced-bg1hyg, ease-out);
+  transition-duration: var(--motion-duration-transition-show-paced-qcfnau, 180ms);
+  transition-timing-function: var(--motion-easing-transition-show-paced-qe3gc9, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_card-inner_p8a6i_1f0po_97:not(#\9) {
+  .awsui_card-inner_p8a6i_e5c72_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_card-inner_p8a6i_1f0po_97:not(#\9), .awsui-mode-entering .awsui_card-inner_p8a6i_1f0po_97:not(#\9) {
+.awsui-motion-disabled .awsui_card-inner_p8a6i_e5c72_97:not(#\9), .awsui-mode-entering .awsui_card-inner_p8a6i_e5c72_97:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_card-inner_p8a6i_1f0po_97:not(#\9)::before {
+.awsui_card-inner_p8a6i_e5c72_97:not(#\9)::before {
   transition-property: border-top-color, border-right-color, border-bottom-color, border-left-color;
-  transition-duration: var(--motion-duration-transition-show-paced-ai4wlf, 180ms);
-  transition-timing-function: var(--motion-easing-transition-show-paced-bg1hyg, ease-out);
+  transition-duration: var(--motion-duration-transition-show-paced-qcfnau, 180ms);
+  transition-timing-function: var(--motion-easing-transition-show-paced-qe3gc9, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_card-inner_p8a6i_1f0po_97:not(#\9)::before {
+  .awsui_card-inner_p8a6i_e5c72_97:not(#\9)::before {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_card-inner_p8a6i_1f0po_97:not(#\9)::before, .awsui-mode-entering .awsui_card-inner_p8a6i_1f0po_97:not(#\9)::before {
+.awsui-motion-disabled .awsui_card-inner_p8a6i_e5c72_97:not(#\9)::before, .awsui-mode-entering .awsui_card-inner_p8a6i_e5c72_97:not(#\9)::before {
   animation: none;
   transition: none;
 }
@@ -130,7 +130,7 @@ 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_root_p8a6i_1f0po_133:not(#\9) {
+.awsui_root_p8a6i_e5c72_133:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -160,31 +160,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   widows: 2;
   word-spacing: normal;
   box-sizing: border-box;
-  font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-size: var(--font-body-m-size-cqtcam, 14px);
+  line-height: var(--font-body-m-line-height-83azrc, 22px);
+  color: var(--color-text-body-default-01bwmw, #000716);
   font-weight: 400;
-  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-family: var(--font-family-base-kd6hgy, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-  font-size: var(--font-body-m-size-sregvd, 14px);
-  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
-  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-size: var(--font-body-m-size-cqtcam, 14px);
+  line-height: var(--font-body-m-line-height-83azrc, 22px);
+  color: var(--color-text-body-default-01bwmw, #000716);
   font-weight: 400;
-  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  font-family: var(--font-family-base-kd6hgy, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_header-variant-full-page_p8a6i_1f0po_153.awsui_header-refresh_p8a6i_1f0po_153:not(#\9) {
-  border-radius: var(--border-radius-container-gh9ysk, 16px);
+.awsui_header-variant-full-page_p8a6i_e5c72_153.awsui_header-refresh_p8a6i_e5c72_153:not(#\9) {
+  border-radius: var(--border-radius-container-b3z48i, 16px);
   box-sizing: border-box;
-  padding-top: var(--space-container-header-vertical-zsjhel, 12px);
+  padding-top: var(--space-container-header-vertical-gho8eg, 12px);
   padding-left: 0;
   padding-right: 0;
-  padding-bottom: calc(var(--space-container-header-vertical-zsjhel, 12px) + var(--space-scaled-xxs-95dhkm, 4px));
+  padding-bottom: calc(var(--space-container-header-vertical-gho8eg, 12px) + var(--space-scaled-xxs-ugy2pw, 4px));
 }
-.awsui_header-variant-full-page_p8a6i_1f0po_153.awsui_header-refresh_p8a6i_1f0po_153:not(#\9)::before {
+.awsui_header-variant-full-page_p8a6i_e5c72_153.awsui_header-refresh_p8a6i_e5c72_153:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -195,11 +195,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: transparent;
   box-sizing: border-box;
   border-color: transparent;
-  border-top: var(--border-container-top-width-jk6fhm, 0px) solid var(--color-border-container-top-srcvx4, transparent);
-  border-radius: var(--border-radius-container-gh9ysk, 16px);
+  border-top: var(--border-container-top-width-nb80xs, 0px) solid var(--color-border-container-top-4rl1tb, transparent);
+  border-radius: var(--border-radius-container-b3z48i, 16px);
   z-index: 1;
 }
-.awsui_header-variant-full-page_p8a6i_1f0po_153.awsui_header-refresh_p8a6i_1f0po_153:not(#\9)::after {
+.awsui_header-variant-full-page_p8a6i_e5c72_153.awsui_header-refresh_p8a6i_e5c72_153:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -209,107 +209,107 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: none;
   background: transparent;
   box-sizing: border-box;
-  box-shadow: var(--shadow-container-fx563k, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
-  border-radius: var(--border-radius-container-gh9ysk, 16px);
+  box-shadow: var(--shadow-container-pkcyo6, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
+  border-radius: var(--border-radius-container-b3z48i, 16px);
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_header-variant-full-page_p8a6i_1f0po_153.awsui_header-refresh_p8a6i_1f0po_153:not(#\9) {
-    border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
+  .awsui_header-variant-full-page_p8a6i_e5c72_153.awsui_header-refresh_p8a6i_e5c72_153:not(#\9) {
+    border: var(--border-field-width-egrqih, 2px) solid var(--color-border-container-top-4rl1tb, transparent);
   }
 }
 
-.awsui_list_p8a6i_1f0po_196:not(#\9) {
+.awsui_list_p8a6i_e5c72_196:not(#\9) {
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;
   padding: 0;
   list-style: none;
-  margin: 0 0 0 calc(var(--space-grid-gutter-0subky, 20px) * -1);
+  margin: 0 0 0 calc(var(--space-grid-gutter-pfst95, 20px) * -1);
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-1_p8a6i_1f0po_204 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-1_p8a6i_e5c72_204 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 100%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-2_p8a6i_1f0po_207 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-2_p8a6i_e5c72_207 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 50%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-3_p8a6i_1f0po_210 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-3_p8a6i_e5c72_210 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 33.3333333333%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-4_p8a6i_1f0po_213 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-4_p8a6i_e5c72_213 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 25%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-5_p8a6i_1f0po_216 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-5_p8a6i_e5c72_216 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 20%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-6_p8a6i_1f0po_219 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-6_p8a6i_e5c72_219 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 16.6666666667%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-7_p8a6i_1f0po_222 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-7_p8a6i_e5c72_222 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 14.2857142857%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-8_p8a6i_1f0po_225 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-8_p8a6i_e5c72_225 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 12.5%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-9_p8a6i_1f0po_228 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-9_p8a6i_e5c72_228 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 11.1111111111%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-10_p8a6i_1f0po_231 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-10_p8a6i_e5c72_231 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 10%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-11_p8a6i_1f0po_234 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-11_p8a6i_e5c72_234 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 9.0909090909%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-12_p8a6i_1f0po_237 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-12_p8a6i_e5c72_237 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 8.3333333333%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-13_p8a6i_1f0po_240 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-13_p8a6i_e5c72_240 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 7.6923076923%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-14_p8a6i_1f0po_243 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-14_p8a6i_e5c72_243 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 7.1428571429%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-15_p8a6i_1f0po_246 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-15_p8a6i_e5c72_246 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 6.6666666667%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-16_p8a6i_1f0po_249 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-16_p8a6i_e5c72_249 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 6.25%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-17_p8a6i_1f0po_252 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-17_p8a6i_e5c72_252 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 5.8823529412%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-18_p8a6i_1f0po_255 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-18_p8a6i_e5c72_255 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 5.5555555556%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-19_p8a6i_1f0po_258 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-19_p8a6i_e5c72_258 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 5.2631578947%;
 }
-.awsui_list_p8a6i_1f0po_196.awsui_list-grid-20_p8a6i_1f0po_261 > .awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_list_p8a6i_e5c72_196.awsui_list-grid-20_p8a6i_e5c72_261 > .awsui_card_p8a6i_e5c72_97:not(#\9) {
   width: 5%;
 }
 
-.awsui_selection-control_p8a6i_1f0po_265:not(#\9) {
+.awsui_selection-control_p8a6i_e5c72_265:not(#\9) {
   position: absolute;
   box-sizing: border-box;
-  width: calc(var(--size-control-n9i4yo, 16px) + (2 * var(--space-card-horizontal-di7llb, 20px)));
+  width: calc(var(--size-control-ql70lu, 16px) + (2 * var(--space-card-horizontal-ai1anx, 20px)));
   top: 0;
   right: 0;
-  padding: var(--space-scaled-l-t03y3z, 20px) var(--space-card-horizontal-di7llb, 20px);
+  padding: var(--space-scaled-l-x5pubp, 20px) var(--space-card-horizontal-ai1anx, 20px);
 }
 
-.awsui_loading_p8a6i_1f0po_274:not(#\9),
-.awsui_empty_p8a6i_1f0po_275:not(#\9) {
+.awsui_loading_p8a6i_e5c72_274:not(#\9),
+.awsui_empty_p8a6i_e5c72_275:not(#\9) {
   overflow: hidden;
   text-align: center;
-  color: var(--color-text-empty-fjv325, #5f6b7a);
-  margin-bottom: var(--space-scaled-l-t03y3z, 20px);
+  color: var(--color-text-empty-qnnj2s, #5f6b7a);
+  margin-bottom: var(--space-scaled-l-x5pubp, 20px);
 }
 
-.awsui_has-header_p8a6i_1f0po_282:not(#\9) {
-  margin-top: var(--space-grid-gutter-0subky, 20px);
+.awsui_has-header_p8a6i_e5c72_282:not(#\9) {
+  margin-top: var(--space-grid-gutter-pfst95, 20px);
 }
 
-.awsui_card_p8a6i_1f0po_97:not(#\9) {
+.awsui_card_p8a6i_e5c72_97:not(#\9) {
   display: flex;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -317,22 +317,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding: 0;
   list-style: none;
 }
-.awsui_card-inner_p8a6i_1f0po_97:not(#\9) {
+.awsui_card-inner_p8a6i_e5c72_97:not(#\9) {
   position: relative;
-  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
-  margin: 0 0 var(--space-grid-gutter-0subky, 20px) var(--space-grid-gutter-0subky, 20px);
-  padding: var(--space-scaled-l-t03y3z, 20px) var(--space-card-horizontal-di7llb, 20px) var(--space-scaled-l-t03y3z, 20px);
-  border-radius: var(--border-radius-container-gh9ysk, 16px);
+  background-color: var(--color-background-container-content-em2lah, #ffffff);
+  margin: 0 0 var(--space-grid-gutter-pfst95, 20px) var(--space-grid-gutter-pfst95, 20px);
+  padding: var(--space-scaled-l-x5pubp, 20px) var(--space-card-horizontal-ai1anx, 20px) var(--space-scaled-l-x5pubp, 20px);
+  border-radius: var(--border-radius-container-b3z48i, 16px);
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_card-inner_p8a6i_1f0po_97:not(#\9) {
-    padding: calc(var(--space-scaled-l-t03y3z, 20px) - var(--border-item-width-qbbbsa, 2px)) calc(var(--space-card-horizontal-di7llb, 20px) - var(--border-item-width-qbbbsa, 2px)) calc(var(--space-scaled-l-t03y3z, 20px) - var(--border-item-width-qbbbsa, 2px));
+  .awsui_card-inner_p8a6i_e5c72_97:not(#\9) {
+    padding: calc(var(--space-scaled-l-x5pubp, 20px) - var(--border-item-width-4pi0dw, 2px)) calc(var(--space-card-horizontal-ai1anx, 20px) - var(--border-item-width-4pi0dw, 2px)) calc(var(--space-scaled-l-x5pubp, 20px) - var(--border-item-width-4pi0dw, 2px));
   }
 }
-.awsui_card-inner_p8a6i_1f0po_97:not(#\9)::before {
+.awsui_card-inner_p8a6i_e5c72_97:not(#\9)::before {
   content: "";
   position: absolute;
   left: 0px;
@@ -343,11 +343,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: transparent;
   box-sizing: border-box;
   border-color: transparent;
-  border-top: var(--border-container-top-width-jk6fhm, 0px) solid var(--color-border-container-top-srcvx4, transparent);
-  border-radius: var(--border-radius-container-gh9ysk, 16px);
+  border-top: var(--border-container-top-width-nb80xs, 0px) solid var(--color-border-container-top-4rl1tb, transparent);
+  border-radius: var(--border-radius-container-b3z48i, 16px);
   z-index: 1;
 }
-.awsui_card-inner_p8a6i_1f0po_97:not(#\9)::after {
+.awsui_card-inner_p8a6i_e5c72_97:not(#\9)::after {
   content: "";
   position: absolute;
   left: 0px;
@@ -357,53 +357,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: none;
   background: transparent;
   box-sizing: border-box;
-  box-shadow: var(--shadow-container-fx563k, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
-  border-radius: var(--border-radius-container-gh9ysk, 16px);
+  box-shadow: var(--shadow-container-pkcyo6, 0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12));
+  border-radius: var(--border-radius-container-b3z48i, 16px);
   mix-blend-mode: multiply;
 }
 @media screen and (-ms-high-contrast: active) {
-  .awsui_card-inner_p8a6i_1f0po_97:not(#\9) {
-    border: var(--border-field-width-idlekx, 2px) solid var(--color-border-container-top-srcvx4, transparent);
+  .awsui_card-inner_p8a6i_e5c72_97:not(#\9) {
+    border: var(--border-field-width-egrqih, 2px) solid var(--color-border-container-top-4rl1tb, transparent);
   }
 }
-.awsui_card-header_p8a6i_1f0po_343:not(#\9) {
-  font-size: var(--font-heading-m-size-6e3jmg, 20px);
-  line-height: var(--font-heading-m-line-height-u3t54f, 24px);
-  letter-spacing: var(--font-heading-m-letter-spacing-r00pg3, -0.01em);
-  font-weight: var(--font-heading-m-weight-hi5n0j, 800);
-  -webkit-font-smoothing: var(--font-smoothing-webkit-vu3hx4, antialiased);
-  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-nkh1jb, grayscale);
+.awsui_card-header_p8a6i_e5c72_343:not(#\9) {
+  font-size: var(--font-heading-m-size-sbbndt, 20px);
+  line-height: var(--font-heading-m-line-height-25bzvw, 24px);
+  letter-spacing: var(--font-heading-m-letter-spacing-afjv68, -0.01em);
+  font-weight: var(--font-heading-m-weight-9nrubn, 800);
+  -webkit-font-smoothing: var(--font-smoothing-webkit-imui5j, antialiased);
+  -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-zc5t56, grayscale);
 }
-.awsui_card-header-inner_p8a6i_1f0po_351:not(#\9) {
+.awsui_card-header-inner_p8a6i_e5c72_351:not(#\9) {
   width: 100%;
   display: inline-block;
 }
-.awsui_card-selectable_p8a6i_1f0po_355 > .awsui_card-inner_p8a6i_1f0po_97 > .awsui_card-header_p8a6i_1f0po_343:not(#\9) {
+.awsui_card-selectable_p8a6i_e5c72_355 > .awsui_card-inner_p8a6i_e5c72_97 > .awsui_card-header_p8a6i_e5c72_343:not(#\9) {
   width: 90%;
 }
-.awsui_card-selected_p8a6i_1f0po_358 > .awsui_card-inner_p8a6i_1f0po_97:not(#\9) {
-  background-color: var(--color-background-item-selected-ebt4bi, #f2f8fd);
+.awsui_card-selected_p8a6i_e5c72_358 > .awsui_card-inner_p8a6i_e5c72_97:not(#\9) {
+  background-color: var(--color-background-item-selected-fjyxf3, #f2f8fd);
 }
-.awsui_card-selected_p8a6i_1f0po_358 > .awsui_card-inner_p8a6i_1f0po_97:not(#\9)::before {
-  border: var(--border-item-width-qbbbsa, 2px) solid var(--color-border-item-selected-ppkssz, #0972d3);
+.awsui_card-selected_p8a6i_e5c72_358 > .awsui_card-inner_p8a6i_e5c72_97:not(#\9)::before {
+  border: var(--border-item-width-4pi0dw, 2px) solid var(--color-border-item-selected-474jz2, #0972d3);
 }
 
-.awsui_section_p8a6i_1f0po_365:not(#\9) {
+.awsui_section_p8a6i_e5c72_365:not(#\9) {
   display: inline-block;
   box-sizing: border-box;
-  padding: var(--space-xs-rsr2qu, 8px) 0 var(--space-scaled-xs-6859qs, 8px) 0;
+  padding: var(--space-xs-inub5w, 8px) 0 var(--space-scaled-xs-u0e7ft, 8px) 0;
   vertical-align: top;
 }
-.awsui_section-header_p8a6i_1f0po_371: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-m18hjh, 700);
-  color: var(--color-text-label-gxskdy, #000716);
+.awsui_section-header_p8a6i_e5c72_371:not(#\9) {
+  font-size: var(--font-body-m-size-cqtcam, 14px);
+  line-height: var(--font-body-m-line-height-83azrc, 22px);
+  font-weight: var(--font-display-label-weight-vmf03j, 700);
+  color: var(--color-text-label-flava6, #000716);
 }
-.awsui_section-content_p8a6i_1f0po_377:not(#\9) {
+.awsui_section-content_p8a6i_e5c72_377:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_section_p8a6i_1f0po_365:not(#\9):last-child {
-  padding: var(--space-xs-rsr2qu, 8px) 0 0 0;
+.awsui_section_p8a6i_e5c72_365:not(#\9):last-child {
+  padding: var(--space-xs-inub5w, 8px) 0 0 0;
 }