@cloudscape-design/components 3.0.1048 → 3.0.1050

package/alert/interfaces.d.ts

@@ -121,18 +121,18 @@ export interface AlertProps extends BaseComponentProps {
   /**
    * Specifies an object of selectors and properties that are used to apply custom styles.
    *
-   * - `root.background` - (string) (Optional) Background for alert.
-   * - `root.borderColor` - (string) (Optional) Border color for alert.
+   * - `root.background` (string) - (Optional) Background for alert.
+   * - `root.borderColor` (string) - (Optional) Border color for alert.
    * - `root.borderRadius` (string) - (Optional) Alert border radius.
    * - `root.borderWidth` (string) - (Optional) Alert border width.
-   * - `root.color`  - (string) (Optional) Text color for alert.
-   * - `root.focusRing.borderColor` - (string) (Optional) Alert focus ring border color.
+   * - `root.color` (string) - (Optional) Text color for alert.
+   * - `root.focusRing.borderColor` (string) - (Optional) Alert focus ring border color.
    * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.
    * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.
-   * - `dismissButton.color.active` - (string) (Optional) Color for dismiss button active state.
-   * - `dismissButton.color.default` - (string) (Optional) Color for dismiss button default state.
-   * - `dismissButton.color.hover` - (string) (Optional) Color for dismiss button hover state.
-   * - `dismissButton.focusRing.borderColor` - (string) (Optional) Dismiss button focus ring border color.
+   * - `dismissButton.color.active` (string) - (Optional) Color for dismiss button active state.
+   * - `dismissButton.color.default` (string) - (Optional) Color for dismiss button default state.
+   * - `dismissButton.color.hover` (string) - (Optional) Color for dismiss button hover state.
+   * - `dismissButton.focusRing.borderColor` (string) - (Optional) Dismiss button focus ring border color.
    * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.
    * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.
    * @awsuiSystem core

package/alert/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n\n  export interface Ref {\n    /**\n     * Sets focus on the alert content.\n     */\n    focus(): void;\n  }\n\n  export interface I18nStrings {\n    /*\n     * Specifies the ARIA label for the alert icon for type `success`.\n     * @property {string} [successIconAriaLabel] - optional\n     */\n    successIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `error`.\n     * @property {string} [errorIconAriaLabel] - optional\n     */\n    errorIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `warning`.\n     * @property {string} [warningIconAriaLabel] - optional\n     */\n    warningIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `info`.\n     * @property {string} [infoIconAriaLabel] - optional\n     */\n    infoIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the dismiss button.\n     * @property {string} [dismissAriaLabel] - optional\n     */\n    dismissAriaLabel?: string;\n  }\n\n  export interface AnalyticsMetadata {\n    errorContext?: ErrorContext;\n  }\n\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      color?: string;\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    dismissButton?: {\n      color?: {\n        active?: string;\n        default?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n\n  /**\n   * Provides a text alternative for the icon.\n   *\n   * @deprecated Use the label properties inside `i18nStrings` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  statusIconAriaLabel?: string;\n\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop.\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   * @i18n\n   *\n   * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * @deprecated Replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated** Replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n   * @i18n\n   */\n  i18nStrings?: AlertProps.I18nStrings;\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: AlertProps.AnalyticsMetadata;\n  /**\n   * Specifies an object of selectors and properties that are used to apply custom styles.\n   *\n   * - `root.background` - (string) (Optional) Background for alert.\n   * - `root.borderColor` - (string) (Optional) Border color for alert.\n   * - `root.borderRadius` (string) - (Optional) Alert border radius.\n   * - `root.borderWidth` (string) - (Optional) Alert border width.\n   * - `root.color`  - (string) (Optional) Text color for alert.\n   * - `root.focusRing.borderColor` - (string) (Optional) Alert focus ring border color.\n   * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.\n   * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.\n   * - `dismissButton.color.active` - (string) (Optional) Color for dismiss button active state.\n   * - `dismissButton.color.default` - (string) (Optional) Color for dismiss button default state.\n   * - `dismissButton.color.hover` - (string) (Optional) Color for dismiss button hover state.\n   * - `dismissButton.focusRing.borderColor` - (string) (Optional) Dismiss button focus ring border color.\n   * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.\n   * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.\n   * @awsuiSystem core\n   */\n  style?: AlertProps.Style;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n\n  export interface Ref {\n    /**\n     * Sets focus on the alert content.\n     */\n    focus(): void;\n  }\n\n  export interface I18nStrings {\n    /*\n     * Specifies the ARIA label for the alert icon for type `success`.\n     * @property {string} [successIconAriaLabel] - optional\n     */\n    successIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `error`.\n     * @property {string} [errorIconAriaLabel] - optional\n     */\n    errorIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `warning`.\n     * @property {string} [warningIconAriaLabel] - optional\n     */\n    warningIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `info`.\n     * @property {string} [infoIconAriaLabel] - optional\n     */\n    infoIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the dismiss button.\n     * @property {string} [dismissAriaLabel] - optional\n     */\n    dismissAriaLabel?: string;\n  }\n\n  export interface AnalyticsMetadata {\n    errorContext?: ErrorContext;\n  }\n\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      color?: string;\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    dismissButton?: {\n      color?: {\n        active?: string;\n        default?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n\n  /**\n   * Provides a text alternative for the icon.\n   *\n   * @deprecated Use the label properties inside `i18nStrings` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  statusIconAriaLabel?: string;\n\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop.\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   * @i18n\n   *\n   * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * @deprecated Replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated** Replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n   * @i18n\n   */\n  i18nStrings?: AlertProps.I18nStrings;\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: AlertProps.AnalyticsMetadata;\n  /**\n   * Specifies an object of selectors and properties that are used to apply custom styles.\n   *\n   * - `root.background` (string) - (Optional) Background for alert.\n   * - `root.borderColor` (string) - (Optional) Border color for alert.\n   * - `root.borderRadius` (string) - (Optional) Alert border radius.\n   * - `root.borderWidth` (string) - (Optional) Alert border width.\n   * - `root.color` (string) - (Optional) Text color for alert.\n   * - `root.focusRing.borderColor` (string) - (Optional) Alert focus ring border color.\n   * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.\n   * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.\n   * - `dismissButton.color.active` (string) - (Optional) Color for dismiss button active state.\n   * - `dismissButton.color.default` (string) - (Optional) Color for dismiss button default state.\n   * - `dismissButton.color.hover` (string) - (Optional) Color for dismiss button hover state.\n   * - `dismissButton.focusRing.borderColor` (string) - (Optional) Dismiss button focus ring border color.\n   * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.\n   * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.\n   * @awsuiSystem core\n   */\n  style?: AlertProps.Style;\n}\n"]}

package/attribute-editor/styles.css.js

@@ -1,20 +1,20 @@
 
     import './styles.scoped.css';
     export default {
-  "empty-appear": "awsui_empty-appear_n4qlp_iv7e8_153",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_iv7e8_1",
-  "root": "awsui_root_n4qlp_iv7e8_175",
-  "empty": "awsui_empty_n4qlp_iv7e8_153",
-  "row": "awsui_row_n4qlp_iv7e8_218",
-  "divider": "awsui_divider_n4qlp_iv7e8_222",
-  "row-control": "awsui_row-control_n4qlp_iv7e8_227",
-  "field": "awsui_field_n4qlp_iv7e8_231",
-  "additional-info": "awsui_additional-info_n4qlp_iv7e8_235",
-  "add-row": "awsui_add-row_n4qlp_iv7e8_281",
-  "add-button": "awsui_add-button_n4qlp_iv7e8_285",
-  "remove-button-container": "awsui_remove-button-container_n4qlp_iv7e8_289",
-  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_iv7e8_293",
-  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_iv7e8_297",
-  "remove-button": "awsui_remove-button_n4qlp_iv7e8_289"
+  "empty-appear": "awsui_empty-appear_n4qlp_1sk08_153",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_1sk08_1",
+  "root": "awsui_root_n4qlp_1sk08_175",
+  "empty": "awsui_empty_n4qlp_1sk08_153",
+  "row": "awsui_row_n4qlp_1sk08_218",
+  "divider": "awsui_divider_n4qlp_1sk08_222",
+  "row-control": "awsui_row-control_n4qlp_1sk08_227",
+  "field": "awsui_field_n4qlp_1sk08_231",
+  "additional-info": "awsui_additional-info_n4qlp_1sk08_235",
+  "add-row": "awsui_add-row_n4qlp_1sk08_281",
+  "add-button": "awsui_add-button_n4qlp_1sk08_285",
+  "remove-button-container": "awsui_remove-button-container_n4qlp_1sk08_289",
+  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_1sk08_293",
+  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_1sk08_297",
+  "remove-button": "awsui_remove-button_n4qlp_1sk08_289"
 };
   

package/attribute-editor/styles.scoped.css

@@ -150,10 +150,10 @@ 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_empty-appear_n4qlp_iv7e8_153:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_n4qlp_iv7e8_1 var(--motion-duration-transition-show-paced-t8d1os, 180ms) var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
+.awsui_empty-appear_n4qlp_1sk08_153:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_n4qlp_1sk08_1 var(--motion-duration-transition-show-paced-t8d1os, 180ms) var(--motion-easing-transition-show-paced-x2k7uh, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_n4qlp_iv7e8_1 {
+@keyframes awsui_awsui-motion-fade-in_n4qlp_1sk08_1 {
   from {
     opacity: 0.2;
   }
@@ -162,17 +162,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_empty-appear_n4qlp_iv7e8_153:not(#\9) {
+  .awsui_empty-appear_n4qlp_1sk08_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_empty-appear_n4qlp_iv7e8_153:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_iv7e8_153:not(#\9) {
+.awsui-motion-disabled .awsui_empty-appear_n4qlp_1sk08_153:not(#\9), .awsui-mode-entering .awsui_empty-appear_n4qlp_1sk08_153:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_n4qlp_iv7e8_175:not(#\9) {
+.awsui_root_n4qlp_1sk08_175:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -208,31 +208,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: start;
 }
 
-.awsui_empty_n4qlp_iv7e8_153:not(#\9) {
+.awsui_empty_n4qlp_1sk08_153:not(#\9) {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
   color: var(--color-text-empty-tlohug, #656871);
   grid-column: 1/-1;
 }
 
-.awsui_row_n4qlp_iv7e8_218:not(#\9) {
+.awsui_row_n4qlp_1sk08_218:not(#\9) {
   display: contents;
 }
 
-.awsui_divider_n4qlp_iv7e8_222:not(#\9) {
+.awsui_divider_n4qlp_1sk08_222:not(#\9) {
   grid-column: 1/-1;
   border-block-start: var(--border-divider-section-width-uwo8my, 1px) solid var(--color-border-divider-default-nr68jt, #c6c6cd);
 }
 
-.awsui_row-control_n4qlp_iv7e8_227:not(#\9) {
+.awsui_row-control_n4qlp_1sk08_227:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_field_n4qlp_iv7e8_231:not(#\9) {
+.awsui_field_n4qlp_1sk08_231:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_additional-info_n4qlp_iv7e8_235:not(#\9) {
+.awsui_additional-info_n4qlp_1sk08_235:not(#\9) {
   color: var(--color-text-form-secondary-1nm780, #656871);
   font-size: var(--font-size-body-s-smc8cv, 12px);
   line-height: var(--line-height-body-s-nu5hx1, 16px);
@@ -242,10 +242,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-xxs-hwfkai, 4px);
   /* stylelint-disable-next-line selector-max-type */
 }
-.awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9) {
+.awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9) {
   text-underline-offset: 0.3em;
   text-decoration-thickness: 1px;
-  color: var(--color-text-link-default-1dmm7z, #006ce0);
+  color: var(--awsui-style-color-default-kcc2gu, var(--color-text-link-default-1dmm7z, #006ce0));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -256,50 +256,50 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9) {
+  .awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9) {
+.awsui-motion-disabled .awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9):hover {
   cursor: pointer;
-  color: var(--color-text-link-hover-sq1gxg, #002b66);
+  color: var(--awsui-style-color-hover-kcc2gu, var(--color-text-link-hover-sq1gxg, #002b66));
 }
-.awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9):focus {
+.awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9):focus {
   outline: none;
 }
-.awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9):active {
-  color: var(--color-text-link-hover-sq1gxg, #002b66);
+.awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9):active {
+  color: var(--awsui-style-color-active-kcc2gu, var(--color-text-link-hover-sq1gxg, #002b66));
 }
-.awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9):active, .awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9):focus, .awsui_additional-info_n4qlp_iv7e8_235 > a:not(#\9):hover {
+.awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9):active, .awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9):focus, .awsui_additional-info_n4qlp_1sk08_235 > a:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
 
-.awsui_add-row_n4qlp_iv7e8_281:not(#\9) {
+.awsui_add-row_n4qlp_1sk08_281:not(#\9) {
   grid-column: 1/-1;
 }
 
-.awsui_add-button_n4qlp_iv7e8_285:not(#\9) {
+.awsui_add-button_n4qlp_1sk08_285:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_remove-button-container_n4qlp_iv7e8_289:not(#\9) {
+.awsui_remove-button-container_n4qlp_1sk08_289:not(#\9) {
   display: inline-block;
 }
 
-.awsui_remove-button-field-padding_n4qlp_iv7e8_293:not(#\9) {
+.awsui_remove-button-field-padding_n4qlp_1sk08_293:not(#\9) {
   padding-block-start: calc(var(--space-xxs-hwfkai, 4px) + var(--line-height-body-m-2mh3ke, 20px));
 }
 
-.awsui_remove-button-own-row_n4qlp_iv7e8_297:not(#\9) {
+.awsui_remove-button-own-row_n4qlp_1sk08_297:not(#\9) {
   justify-self: end;
 }
 
-.awsui_remove-button_n4qlp_iv7e8_289:not(#\9) {
+.awsui_remove-button_n4qlp_1sk08_289:not(#\9) {
   /* used in test-utils */
 }

package/attribute-editor/styles.selectors.js

@@ -2,20 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "empty-appear": "awsui_empty-appear_n4qlp_iv7e8_153",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_iv7e8_1",
-  "root": "awsui_root_n4qlp_iv7e8_175",
-  "empty": "awsui_empty_n4qlp_iv7e8_153",
-  "row": "awsui_row_n4qlp_iv7e8_218",
-  "divider": "awsui_divider_n4qlp_iv7e8_222",
-  "row-control": "awsui_row-control_n4qlp_iv7e8_227",
-  "field": "awsui_field_n4qlp_iv7e8_231",
-  "additional-info": "awsui_additional-info_n4qlp_iv7e8_235",
-  "add-row": "awsui_add-row_n4qlp_iv7e8_281",
-  "add-button": "awsui_add-button_n4qlp_iv7e8_285",
-  "remove-button-container": "awsui_remove-button-container_n4qlp_iv7e8_289",
-  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_iv7e8_293",
-  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_iv7e8_297",
-  "remove-button": "awsui_remove-button_n4qlp_iv7e8_289"
+  "empty-appear": "awsui_empty-appear_n4qlp_1sk08_153",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_1sk08_1",
+  "root": "awsui_root_n4qlp_1sk08_175",
+  "empty": "awsui_empty_n4qlp_1sk08_153",
+  "row": "awsui_row_n4qlp_1sk08_218",
+  "divider": "awsui_divider_n4qlp_1sk08_222",
+  "row-control": "awsui_row-control_n4qlp_1sk08_227",
+  "field": "awsui_field_n4qlp_1sk08_231",
+  "additional-info": "awsui_additional-info_n4qlp_1sk08_235",
+  "add-row": "awsui_add-row_n4qlp_1sk08_281",
+  "add-button": "awsui_add-button_n4qlp_1sk08_285",
+  "remove-button-container": "awsui_remove-button-container_n4qlp_1sk08_289",
+  "remove-button-field-padding": "awsui_remove-button-field-padding_n4qlp_1sk08_293",
+  "remove-button-own-row": "awsui_remove-button-own-row_n4qlp_1sk08_297",
+  "remove-button": "awsui_remove-button_n4qlp_1sk08_289"
 };
   

package/breadcrumb-group/item/styles.css.js

@@ -1,12 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "link": "awsui_link_1kosq_k3g2h_145",
-  "breadcrumb": "awsui_breadcrumb_1kosq_k3g2h_149",
-  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_k3g2h_150",
-  "icon": "awsui_icon_1kosq_k3g2h_153",
-  "anchor": "awsui_anchor_1kosq_k3g2h_159",
-  "text": "awsui_text_1kosq_k3g2h_206",
-  "last": "awsui_last_1kosq_k3g2h_225"
+  "link": "awsui_link_1kosq_2grhb_145",
+  "breadcrumb": "awsui_breadcrumb_1kosq_2grhb_149",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_2grhb_150",
+  "icon": "awsui_icon_1kosq_2grhb_153",
+  "anchor": "awsui_anchor_1kosq_2grhb_159",
+  "text": "awsui_text_1kosq_2grhb_206",
+  "last": "awsui_last_1kosq_2grhb_225"
 };
   

package/breadcrumb-group/item/styles.scoped.css

@@ -142,27 +142,27 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_link_1kosq_k3g2h_145:not(#\9):after {
+.awsui_link_1kosq_2grhb_145:not(#\9):after {
   display: none;
 }
 
-.awsui_breadcrumb_1kosq_k3g2h_149:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150:not(#\9) {
+.awsui_breadcrumb_1kosq_2grhb_149:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_2grhb_150:not(#\9) {
   display: flex;
 }
-.awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_icon_1kosq_k3g2h_153:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_icon_1kosq_k3g2h_153:not(#\9) {
+.awsui_breadcrumb_1kosq_2grhb_149 > .awsui_icon_1kosq_2grhb_153:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_icon_1kosq_2grhb_153:not(#\9) {
   margin-block: 0;
   margin-inline: var(--space-xs-ymlm0b, 8px);
   color: var(--color-text-breadcrumb-icon-9j48ot, #8c8c94);
 }
-.awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9) {
+.awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9) {
   min-inline-size: 0;
   overflow: hidden;
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
-  color: var(--color-text-link-default-1dmm7z, #006ce0);
+  color: var(--awsui-style-color-default-kcc2gu, var(--color-text-link-default-1dmm7z, #006ce0));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -173,42 +173,42 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-5rbn3k, 165ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9),
-  .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9) {
+  .awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9),
+  .awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9) {
+.awsui-motion-disabled .awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9), .awsui-mode-entering .awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9), .awsui-motion-disabled .awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9), .awsui-mode-entering .awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):hover,
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):hover {
+.awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9):hover,
+.awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9):hover {
   cursor: pointer;
-  color: var(--color-text-link-hover-sq1gxg, #002b66);
+  color: var(--awsui-style-color-hover-kcc2gu, var(--color-text-link-hover-sq1gxg, #002b66));
 }
-.awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):focus,
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):focus {
+.awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9):focus,
+.awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9):focus {
   outline: none;
 }
-.awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):active,
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):active {
-  color: var(--color-text-link-hover-sq1gxg, #002b66);
+.awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9):active,
+.awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9):active {
+  color: var(--awsui-style-color-active-kcc2gu, var(--color-text-link-hover-sq1gxg, #002b66));
 }
-.awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):active, .awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):focus, .awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):hover {
+.awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9):active, .awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9):focus, .awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9):hover, .awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9):active, .awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9):focus, .awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159 > .awsui_text_1kosq_k3g2h_206:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159 > .awsui_text_1kosq_k3g2h_206:not(#\9) {
+.awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159 > .awsui_text_1kosq_2grhb_206:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159 > .awsui_text_1kosq_2grhb_206:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: block;
 }
-body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_k3g2h_149 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):focus,
-body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .awsui_anchor_1kosq_k3g2h_159:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_breadcrumb_1kosq_2grhb_149 > .awsui_anchor_1kosq_2grhb_159:not(#\9):focus,
+body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_2grhb_150 > .awsui_anchor_1kosq_2grhb_159:not(#\9):focus {
   outline: thin dotted;
   outline: var(--border-link-focus-ring-outline-1p0hnu, 0);
   outline-offset: 2px;
@@ -219,12 +219,12 @@ body[data-awsui-focus-visible=true] .awsui_ghost-breadcrumb_1kosq_k3g2h_150 > .a
   border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
   box-shadow: 0 0 0 var(--border-link-focus-ring-shadow-spread-39uvxr, 2px) var(--color-border-item-focused-uk47pl, #006ce0);
 }
-.awsui_breadcrumb_1kosq_k3g2h_149.awsui_last_1kosq_k3g2h_225 > .awsui_icon_1kosq_k3g2h_153:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150.awsui_last_1kosq_k3g2h_225 > .awsui_icon_1kosq_k3g2h_153:not(#\9) {
+.awsui_breadcrumb_1kosq_2grhb_149.awsui_last_1kosq_2grhb_225 > .awsui_icon_1kosq_2grhb_153:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_2grhb_150.awsui_last_1kosq_2grhb_225 > .awsui_icon_1kosq_2grhb_153:not(#\9) {
   display: none;
 }
-.awsui_breadcrumb_1kosq_k3g2h_149.awsui_last_1kosq_k3g2h_225 > .awsui_anchor_1kosq_k3g2h_159:not(#\9),
-.awsui_ghost-breadcrumb_1kosq_k3g2h_150.awsui_last_1kosq_k3g2h_225 > .awsui_anchor_1kosq_k3g2h_159:not(#\9) {
+.awsui_breadcrumb_1kosq_2grhb_149.awsui_last_1kosq_2grhb_225 > .awsui_anchor_1kosq_2grhb_159:not(#\9),
+.awsui_ghost-breadcrumb_1kosq_2grhb_150.awsui_last_1kosq_2grhb_225 > .awsui_anchor_1kosq_2grhb_159:not(#\9) {
   color: var(--color-text-breadcrumb-current-2mqnkk, #656871);
   font-weight: 700;
   text-decoration: none;

package/breadcrumb-group/item/styles.selectors.js

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_1kosq_k3g2h_145",
-  "breadcrumb": "awsui_breadcrumb_1kosq_k3g2h_149",
-  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_k3g2h_150",
-  "icon": "awsui_icon_1kosq_k3g2h_153",
-  "anchor": "awsui_anchor_1kosq_k3g2h_159",
-  "text": "awsui_text_1kosq_k3g2h_206",
-  "last": "awsui_last_1kosq_k3g2h_225"
+  "link": "awsui_link_1kosq_2grhb_145",
+  "breadcrumb": "awsui_breadcrumb_1kosq_2grhb_149",
+  "ghost-breadcrumb": "awsui_ghost-breadcrumb_1kosq_2grhb_150",
+  "icon": "awsui_icon_1kosq_2grhb_153",
+  "anchor": "awsui_anchor_1kosq_2grhb_159",
+  "text": "awsui_text_1kosq_2grhb_206",
+  "last": "awsui_last_1kosq_2grhb_225"
 };
   

package/button-dropdown/category-elements/category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,eAAe,qKAalB,aAAa,gBAkCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,eAAe,qKAalB,aAAa,gBAyCf,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/button-dropdown/category-elements/category-element.js

@@ -2,13 +2,18 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import InternalIcon from '../../icon/internal';
 import ItemsList from '../items-list';
 import styles from './styles.css.js';
 const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }) => {
     // Hide the category title element from screen readers because it will be
     // provided as an ARIA label.
     return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled), role: "presentation" },
-        item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" }, item.text)),
+        item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" },
+            React.createElement("span", { className: styles['header-content'] },
+                (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
+                    React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
+                item.text))),
         React.createElement("ul", { className: styles['items-list-container'], role: "group", "aria-label": item.text, "aria-disabled": disabled }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, lastInDropdown: lastInDropdown, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant, position: position })))));
 };
 export default CategoryElement;

package/button-dropdown/category-elements/category-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,QAAQ,EACR,OAAO,EACP,QAAQ,GACM,EAAE,EAAE;IAClB,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc;QAElB,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,mBAAiB,QAAQ,IACvG,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\n\nimport styles from './styles.css.js';\n\nconst CategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  variant,\n  position,\n}: CategoryProps) => {\n  // Hide the category title element from screen readers because it will be\n  // provided as an ARIA label.\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n      role=\"presentation\"\n    >\n      {item.text && (\n        <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n          {item.text}\n        </p>\n      )}\n      <ul className={styles['items-list-container']} role=\"group\" aria-label={item.text} aria-disabled={disabled}>\n        {item.items && (\n          <ItemsList\n            items={item.items}\n            onItemActivate={onItemActivate}\n            onGroupToggle={onGroupToggle}\n            targetItem={targetItem}\n            isHighlighted={isHighlighted}\n            isKeyboardHighlight={isKeyboardHighlight}\n            isExpanded={isExpanded}\n            lastInDropdown={lastInDropdown}\n            highlightItem={highlightItem}\n            categoryDisabled={disabled}\n            hasCategoryHeader={!!item.text}\n            variant={variant}\n            position={position}\n          />\n        )}\n      </ul>\n    </li>\n  );\n};\n\nexport default CategoryElement;\n"]}
+{"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,QAAQ,EACR,OAAO,EACP,QAAQ,GACM,EAAE,EAAE;IAClB,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc;QAElB,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAc,MAAM;YACpF,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;gBACtC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAClD,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;oBACrC,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,CACzF,CACR;gBACA,IAAI,CAAC,IAAI,CACL,CACL,CACL;QACD,4BAAI,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,mBAAiB,QAAQ,IACvG,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\n\nimport styles from './styles.css.js';\n\nconst CategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  variant,\n  position,\n}: CategoryProps) => {\n  // Hide the category title element from screen readers because it will be\n  // provided as an ARIA label.\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n      role=\"presentation\"\n    >\n      {item.text && (\n        <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n          <span className={styles['header-content']}>\n            {(item.iconName || item.iconUrl || item.iconSvg) && (\n              <span className={styles['icon-wrapper']}>\n                <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />\n              </span>\n            )}\n            {item.text}\n          </span>\n        </p>\n      )}\n      <ul className={styles['items-list-container']} role=\"group\" aria-label={item.text} aria-disabled={disabled}>\n        {item.items && (\n          <ItemsList\n            items={item.items}\n            onItemActivate={onItemActivate}\n            onGroupToggle={onGroupToggle}\n            targetItem={targetItem}\n            isHighlighted={isHighlighted}\n            isKeyboardHighlight={isKeyboardHighlight}\n            isExpanded={isExpanded}\n            lastInDropdown={lastInDropdown}\n            highlightItem={highlightItem}\n            categoryDisabled={disabled}\n            hasCategoryHeader={!!item.text}\n            variant={variant}\n            position={position}\n          />\n        )}\n      </ul>\n    </li>\n  );\n};\n\nexport default CategoryElement;\n"]}

package/button-dropdown/category-elements/expandable-category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,QAAA,MAAM,yBAAyB,uLAc5B,aAAa,gBA+Hf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,QAAA,MAAM,yBAAyB,uLAc5B,aAAa,gBAoIf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/button-dropdown/category-elements/expandable-category-element.js

@@ -55,6 +55,8 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
                 id: item.id || '',
             },
         })),
+        (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
+            React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
         item.text,
         React.createElement("span", { className: clsx(styles['expand-icon'], styles['expand-icon-right']) },
             React.createElement(InternalIcon, { name: "caret-down-filled" }))));

package/button-dropdown/category-elements/expandable-category-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.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\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../icon/internal';\nimport Dropdown from '../../internal/components/dropdown';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport {\n  GeneratedAnalyticsMetadataButtonDropdownCollapse,\n  GeneratedAnalyticsMetadataButtonDropdownExpand,\n} from '../analytics-metadata/interfaces.js';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nimport styles from './styles.css.js';\n\nconst ExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  expandToViewport,\n  variant,\n  position,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const isKeyboardHighlighted = isKeyboardHighlight(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n  const ref = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick: React.MouseEventHandler = event => {\n    if (!disabled) {\n      event.preventDefault();\n      onGroupToggle(item, event);\n      triggerRef.current?.focus();\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n        [styles['is-focused']]: isKeyboardHighlighted,\n        [styles['visual-refresh']]: isVisualRefresh,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, expanded, disabled })}\n      {...(isDisabledWithReason ? targetProps : {})}\n      {...getAnalyticsMetadataAttribute(\n        disabled\n          ? {}\n          : ({\n              action: !expanded ? 'expand' : 'collapse',\n              detail: {\n                position: position || '0',\n                label: { root: 'self' },\n                id: item.id || '',\n              },\n            } as GeneratedAnalyticsMetadataButtonDropdownExpand | GeneratedAnalyticsMetadataButtonDropdownCollapse)\n      )}\n    >\n      {item.text}\n      <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n  // If the category element is disabled, we do not render a dropdown.\n  // Screenreaders are confused by additional sections\n  if (isDisabledWithReason) {\n    content = (\n      <Tooltip content={item.disabledReason}>\n        {trigger}\n        {descriptionEl}\n      </Tooltip>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <Dropdown\n        open={expanded}\n        stretchWidth={false}\n        interior={true}\n        expandToViewport={expandToViewport}\n        trigger={trigger}\n      >\n        {item.items && expanded && (\n          <ul\n            role=\"menu\"\n            aria-label={item.text}\n            className={clsx(styles['items-list-container'], styles['in-dropdown'])}\n          >\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isKeyboardHighlight={isKeyboardHighlight}\n              isExpanded={isExpanded}\n              lastInDropdown={lastInDropdown}\n              highlightItem={highlightItem}\n              variant={variant}\n              position={position}\n            />\n          </ul>\n        )}\n      </Dropdown>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default ExpandableCategoryElement;\n"]}
+{"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.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\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../icon/internal';\nimport Dropdown from '../../internal/components/dropdown';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport {\n  GeneratedAnalyticsMetadataButtonDropdownCollapse,\n  GeneratedAnalyticsMetadataButtonDropdownExpand,\n} from '../analytics-metadata/interfaces.js';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nimport styles from './styles.css.js';\n\nconst ExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  expandToViewport,\n  variant,\n  position,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const isKeyboardHighlighted = isKeyboardHighlight(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n  const ref = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick: React.MouseEventHandler = event => {\n    if (!disabled) {\n      event.preventDefault();\n      onGroupToggle(item, event);\n      triggerRef.current?.focus();\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n        [styles['is-focused']]: isKeyboardHighlighted,\n        [styles['visual-refresh']]: isVisualRefresh,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, expanded, disabled })}\n      {...(isDisabledWithReason ? targetProps : {})}\n      {...getAnalyticsMetadataAttribute(\n        disabled\n          ? {}\n          : ({\n              action: !expanded ? 'expand' : 'collapse',\n              detail: {\n                position: position || '0',\n                label: { root: 'self' },\n                id: item.id || '',\n              },\n            } as GeneratedAnalyticsMetadataButtonDropdownExpand | GeneratedAnalyticsMetadataButtonDropdownCollapse)\n      )}\n    >\n      {(item.iconName || item.iconUrl || item.iconSvg) && (\n        <span className={styles['icon-wrapper']}>\n          <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />\n        </span>\n      )}\n      {item.text}\n      <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n  // If the category element is disabled, we do not render a dropdown.\n  // Screenreaders are confused by additional sections\n  if (isDisabledWithReason) {\n    content = (\n      <Tooltip content={item.disabledReason}>\n        {trigger}\n        {descriptionEl}\n      </Tooltip>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <Dropdown\n        open={expanded}\n        stretchWidth={false}\n        interior={true}\n        expandToViewport={expandToViewport}\n        trigger={trigger}\n      >\n        {item.items && expanded && (\n          <ul\n            role=\"menu\"\n            aria-label={item.text}\n            className={clsx(styles['items-list-container'], styles['in-dropdown'])}\n          >\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isKeyboardHighlight={isKeyboardHighlight}\n              isExpanded={isExpanded}\n              lastInDropdown={lastInDropdown}\n              highlightItem={highlightItem}\n              variant={variant}\n              position={position}\n            />\n          </ul>\n        )}\n      </Dropdown>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default ExpandableCategoryElement;\n"]}

package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,QAAA,MAAM,+BAA+B,qKAalC,aAAa,gBAsHf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
+{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,QAAA,MAAM,+BAA+B,qKAalC,aAAa,gBA2Hf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}

package/button-dropdown/category-elements/mobile-expandable-category-element.js

@@ -51,6 +51,8 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
                 expanded: `${!expanded}`,
             },
         })),
+        (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
+            React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
         item.text,
         React.createElement("span", { className: clsx(styles['expand-icon'], {
                 [styles['expand-icon-up']]: expanded,