@cloudscape-design/components 3.0.1274 → 3.0.1275

package/action-card/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type ActionCardProps } from './interfaces';
+export { ActionCardProps };
+declare const ActionCard: React.ForwardRefExoticComponent<ActionCardProps & React.RefAttributes<ActionCardProps.Ref>>;
+export default ActionCard;

package/action-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/action-card/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FA2Cf,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/action-card/index.js

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import React from 'react';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import InternalActionCard from './internal';
+const ActionCard = React.forwardRef(({ disabled = false, disableHeaderPaddings = false, disableContentPaddings = false, iconVerticalAlignment = 'top', variant = 'default', ...props }, ref) => {
+    const baseComponentProps = useBaseComponent('ActionCard', {
+        props: {
+            disabled,
+            disableHeaderPaddings,
+            disableContentPaddings,
+            iconVerticalAlignment,
+            variant,
+        },
+        metadata: {
+            hasHeader: Boolean(props.header),
+            hasDescription: Boolean(props.description),
+            hasContent: Boolean(props.children),
+            hasIcon: Boolean(props.icon),
+        },
+    });
+    const externalProps = getExternalProps(props);
+    return (React.createElement(InternalActionCard, { ref: ref, disabled: disabled, disableHeaderPaddings: disableHeaderPaddings, disableContentPaddings: disableContentPaddings, iconVerticalAlignment: iconVerticalAlignment, variant: variant, ...externalProps, ...baseComponentProps }));
+});
+applyDisplayName(ActionCard, 'ActionCard');
+export default ActionCard;
+//# sourceMappingURL=index.js.map

package/action-card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/action-card/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,kBAAkB,MAAM,YAAY,CAAC;AAI5C,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CACE,EACE,QAAQ,GAAG,KAAK,EAChB,qBAAqB,GAAG,KAAK,EAC7B,sBAAsB,GAAG,KAAK,EAC9B,qBAAqB,GAAG,KAAK,EAC7B,OAAO,GAAG,SAAS,EACnB,GAAG,KAAK,EACQ,EAClB,GAAmC,EACnC,EAAE;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,YAAY,EAAE;QACxD,KAAK,EAAE;YACL,QAAQ;YACR,qBAAqB;YACrB,sBAAsB;YACtB,qBAAqB;YACrB,OAAO;SACR;QACD,QAAQ,EAAE;YACR,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC;YAChC,cAAc,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC;YAC1C,UAAU,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC;YACnC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;SAC7B;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,kBAAkB,IACjB,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,sBAAsB,EAAE,sBAAsB,EAC9C,qBAAqB,EAAE,qBAAqB,EAC5C,OAAO,EAAE,OAAO,KACZ,aAAa,KACb,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;AAC3C,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { type ActionCardProps } from './interfaces';\nimport InternalActionCard from './internal';\n\nexport { ActionCardProps };\n\nconst ActionCard = React.forwardRef(\n  (\n    {\n      disabled = false,\n      disableHeaderPaddings = false,\n      disableContentPaddings = false,\n      iconVerticalAlignment = 'top',\n      variant = 'default',\n      ...props\n    }: ActionCardProps,\n    ref: React.Ref<ActionCardProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('ActionCard', {\n      props: {\n        disabled,\n        disableHeaderPaddings,\n        disableContentPaddings,\n        iconVerticalAlignment,\n        variant,\n      },\n      metadata: {\n        hasHeader: Boolean(props.header),\n        hasDescription: Boolean(props.description),\n        hasContent: Boolean(props.children),\n        hasIcon: Boolean(props.icon),\n      },\n    });\n\n    const externalProps = getExternalProps(props);\n\n    return (\n      <InternalActionCard\n        ref={ref}\n        disabled={disabled}\n        disableHeaderPaddings={disableHeaderPaddings}\n        disableContentPaddings={disableContentPaddings}\n        iconVerticalAlignment={iconVerticalAlignment}\n        variant={variant}\n        {...externalProps}\n        {...baseComponentProps}\n      />\n    );\n  }\n);\n\napplyDisplayName(ActionCard, 'ActionCard');\nexport default ActionCard;\n"]}

package/action-card/interfaces.d.ts

@@ -0,0 +1,79 @@
+import React, { ReactNode } from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { CancelableEventHandler } from '../internal/events';
+import { NativeAttributes } from '../internal/utils/with-native-attributes';
+export interface ActionCardProps extends BaseComponentProps {
+  /**
+   * The header content displayed at the top of the action card.
+   */
+  header?: ReactNode;
+  /**
+   * The description content displayed below the header.
+   */
+  description?: ReactNode;
+  /**
+   * The main content of the action card.
+   */
+  children?: ReactNode;
+  /**
+   * Called when the user clicks on the action card.
+   */
+  onClick?: CancelableEventHandler<ActionCardProps.ClickDetail>;
+  /**
+   * Adds an aria-label to the action card.
+   */
+  ariaLabel?: string;
+  /**
+   * Adds an aria-describedby reference for the action card.
+   */
+  ariaDescribedby?: string;
+  /**
+   * Determines whether the action card is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Removes the default padding from the header area.
+   */
+  disableHeaderPaddings?: boolean;
+  /**
+   * Removes the default padding from the content area.
+   */
+  disableContentPaddings?: boolean;
+  /**
+   * Displays an icon next to the content. You can use the `iconVerticalAlignment` property to control vertical alignment.
+   */
+  icon?: React.ReactNode;
+  /**
+   * Specifies the vertical alignment of the icon.
+   */
+  iconVerticalAlignment?: ActionCardProps.IconVerticalAlignment;
+  /**
+   * Specifies the visual variant of the card, which controls the border radius and padding.
+   *
+   * - `default` - Uses container-level border radius and padding (larger).
+   * - `embedded` - Uses compact border radius and padding (smaller).
+   */
+  variant?: ActionCardProps.Variant;
+  /**
+   * Attributes to add to the native button element.
+   * Some attributes will be automatically combined with internal attribute values:
+   * - `className` will be appended.
+   * - Event handlers will be chained, unless the default is prevented.
+   *
+   * We do not support using this attribute to apply custom styling.
+   *
+   * @awsuiSystem core
+   */
+  nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+}
+export declare namespace ActionCardProps {
+  interface ClickDetail {}
+  type IconVerticalAlignment = 'top' | 'center';
+  type Variant = 'default' | 'embedded';
+  interface Ref {
+    /**
+     * Sets focus on the action card.
+     */
+    focus(): void;
+  }
+}

package/action-card/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/action-card/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;IAE9D;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,qBAAqB,CAAC,EAAE,eAAe,CAAC,qBAAqB,CAAC;IAE9D;;;;;OAKG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAElC;;;;;;;;;OASG;IACH,sBAAsB,CAAC,EAAE,gBAAgB,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,CAAC;CAC1F;AAED,yBAAiB,eAAe,CAAC;IAE/B,UAAiB,WAAW;KAAG;IAE/B,KAAY,qBAAqB,GAAG,KAAK,GAAG,QAAQ,CAAC;IACrD,KAAY,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;IAE7C,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/action-card/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/action-card/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/action-card/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ReactNode } from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { CancelableEventHandler } from '../internal/events';\nimport { NativeAttributes } from '../internal/utils/with-native-attributes';\n\nexport interface ActionCardProps extends BaseComponentProps {\n  /**\n   * The header content displayed at the top of the action card.\n   */\n  header?: ReactNode;\n\n  /**\n   * The description content displayed below the header.\n   */\n  description?: ReactNode;\n\n  /**\n   * The main content of the action card.\n   */\n  children?: ReactNode;\n\n  /**\n   * Called when the user clicks on the action card.\n   */\n  onClick?: CancelableEventHandler<ActionCardProps.ClickDetail>;\n\n  /**\n   * Adds an aria-label to the action card.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds an aria-describedby reference for the action card.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * Determines whether the action card is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Removes the default padding from the header area.\n   */\n  disableHeaderPaddings?: boolean;\n\n  /**\n   * Removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Displays an icon next to the content. You can use the `iconVerticalAlignment` property to control vertical alignment.\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Specifies the vertical alignment of the icon.\n   */\n  iconVerticalAlignment?: ActionCardProps.IconVerticalAlignment;\n\n  /**\n   * Specifies the visual variant of the card, which controls the border radius and padding.\n   *\n   * - `default` - Uses container-level border radius and padding (larger).\n   * - `embedded` - Uses compact border radius and padding (smaller).\n   */\n  variant?: ActionCardProps.Variant;\n\n  /**\n   * Attributes to add to the native button element.\n   * Some attributes will be automatically combined with internal attribute values:\n   * - `className` will be appended.\n   * - Event handlers will be chained, unless the default is prevented.\n   *\n   * We do not support using this attribute to apply custom styling.\n   *\n   * @awsuiSystem core\n   */\n  nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;\n}\n\nexport namespace ActionCardProps {\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  export interface ClickDetail {}\n\n  export type IconVerticalAlignment = 'top' | 'center';\n  export type Variant = 'default' | 'embedded';\n\n  export interface Ref {\n    /**\n     * Sets focus on the action card.\n     */\n    focus(): void;\n  }\n}\n"]}

package/action-card/internal.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { type ActionCardProps } from './interfaces';
+export type InternalActionCardProps = ActionCardProps & InternalBaseComponentProps;
+declare const InternalActionCard: React.ForwardRefExoticComponent<ActionCardProps & InternalBaseComponentProps & React.RefAttributes<ActionCardProps.Ref>>;
+export default InternalActionCard;

package/action-card/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/action-card/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAKpD,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG,0BAA0B,CAAC;AAEnF,QAAA,MAAM,kBAAkB,0HA8LvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/action-card/internal.js

@@ -0,0 +1,74 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { getBaseProps } from '../internal/base-component';
+import InternalStructuredItem from '../internal/components/structured-item';
+import { fireCancelableEvent } from '../internal/events';
+import useForwardFocus from '../internal/hooks/forward-focus';
+import WithNativeAttributes from '../internal/utils/with-native-attributes';
+import styles from './styles.css.js';
+import testStyles from './test-classes/styles.css.js';
+const InternalActionCard = React.forwardRef(({ header, description, children, onClick, ariaLabel, ariaDescribedby, disabled, disableHeaderPaddings, disableContentPaddings, icon, iconVerticalAlignment, variant, nativeButtonAttributes, __internalRootRef, ...rest }, ref) => {
+    const baseProps = getBaseProps(rest);
+    const buttonRef = useRef(null);
+    const rootRef = useRef(null);
+    const headerId = useUniqueId('action-card-header-');
+    const standaloneButtonId = useUniqueId('action-card-button-');
+    const descriptionId = useUniqueId('action-card-description-');
+    const bodyId = useUniqueId('action-card-body-');
+    useForwardFocus(ref, buttonRef);
+    if (!header && !ariaLabel) {
+        warnOnce('ActionCard', 'An accessible name is required. Provide either a `header` or an `ariaLabel` prop so the action card has a meaningful label for screen reader users.');
+    }
+    const handleButtonClick = (event) => {
+        if (disabled) {
+            return event.preventDefault();
+        }
+        fireCancelableEvent(onClick, {}, event);
+    };
+    const headerRowEmpty = !header && !description;
+    const iconWrapper = icon && (React.createElement("div", { className: clsx(styles.icon, testStyles.icon), "aria-hidden": "true" }, icon));
+    const iconInHeaderRow = icon && iconVerticalAlignment === 'top' && !!header;
+    const mergedRootRef = useMergeRefs(rootRef, __internalRootRef);
+    // Link the description element as the button's accessible description
+    // when the button already has a name (via header text or ariaLabel).
+    if (!ariaDescribedby && description && (ariaLabel || header)) {
+        ariaDescribedby = descriptionId;
+    }
+    const buttonProps = {
+        type: 'button',
+        className: clsx(styles['header-button'], testStyles.button, disabled && styles.disabled, variant && styles[`variant-${variant}`]),
+        onClick: handleButtonClick,
+        'aria-describedby': ariaDescribedby,
+        'aria-disabled': disabled || undefined,
+    };
+    const headerSection = !headerRowEmpty ? (React.createElement("div", { className: clsx(styles.header, disableHeaderPaddings && styles['no-padding']) },
+        React.createElement(InternalStructuredItem, { content: header && (React.createElement("div", { className: clsx(styles['header-inner'], testStyles.header, disabled && styles.disabled) },
+                React.createElement(WithNativeAttributes, { ...buttonProps, tag: "button", componentName: "ActionCard", nativeAttributes: nativeButtonAttributes, ref: buttonRef, id: headerId }, header))), secondaryContent: description && (React.createElement("div", { id: descriptionId, className: clsx(styles.description, testStyles.description, disabled && styles.disabled, header && styles['has-header']) }, description)), disablePaddings: disableHeaderPaddings }))) : null;
+    // When there's no header, a standalone overlay button is rendered.
+    // If ariaLabel is provided, it's used directly. Otherwise, derive the button's
+    // accessible name from the first available content: description or children.
+    let standaloneButtonLabelledBy;
+    if (!ariaLabel) {
+        if (description) {
+            standaloneButtonLabelledBy = descriptionId;
+        }
+        else if (children) {
+            standaloneButtonLabelledBy = bodyId;
+        }
+    }
+    const standaloneButton = !header ? (React.createElement(WithNativeAttributes, { ...buttonProps, tag: "button", componentName: "ActionCard", nativeAttributes: nativeButtonAttributes, ref: buttonRef, id: standaloneButtonId, className: clsx(styles['overlay-button'], testStyles.button, disabled && styles.disabled, variant && styles[`variant-${variant}`]), "aria-label": ariaLabel || undefined, "aria-labelledby": standaloneButtonLabelledBy })) : null;
+    const contentElement = (React.createElement("div", { className: styles['inner-card'] },
+        iconInHeaderRow ? (React.createElement("div", { className: styles['header-row'] },
+            headerSection,
+            iconWrapper)) : (headerSection),
+        children && (React.createElement("div", { className: clsx(styles.body, testStyles.body, disableContentPaddings && styles['no-padding']), id: bodyId }, children))));
+    return (React.createElement("div", { ...baseProps, ref: mergedRootRef, role: "group", "aria-labelledby": header ? headerId : standaloneButtonId, className: clsx(styles.root, styles[`variant-${variant}`], disabled && styles.disabled, disabled && testStyles.disabled, !!icon && styles['has-icon'], !!icon && styles['icon-align-end'], !!icon && styles[`icon-vertical-align-${iconVerticalAlignment}`], baseProps.className), "aria-disabled": disabled || undefined },
+        standaloneButton,
+        contentElement,
+        !iconInHeaderRow && iconWrapper));
+});
+export default InternalActionCard;
+//# sourceMappingURL=internal.js.map

package/action-card/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/action-card/internal.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, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport InternalStructuredItem from '../internal/components/structured-item';\nimport { fireCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { type ActionCardProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport type InternalActionCardProps = ActionCardProps & InternalBaseComponentProps;\n\nconst InternalActionCard = React.forwardRef(\n  (\n    {\n      header,\n      description,\n      children,\n      onClick,\n      ariaLabel,\n      ariaDescribedby,\n      disabled,\n      disableHeaderPaddings,\n      disableContentPaddings,\n      icon,\n      iconVerticalAlignment,\n      variant,\n      nativeButtonAttributes,\n      __internalRootRef,\n      ...rest\n    }: InternalActionCardProps,\n    ref: React.Ref<ActionCardProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const rootRef = useRef<HTMLDivElement>(null);\n    const headerId = useUniqueId('action-card-header-');\n    const standaloneButtonId = useUniqueId('action-card-button-');\n    const descriptionId = useUniqueId('action-card-description-');\n    const bodyId = useUniqueId('action-card-body-');\n\n    useForwardFocus(ref, buttonRef);\n\n    if (!header && !ariaLabel) {\n      warnOnce(\n        'ActionCard',\n        'An accessible name is required. Provide either a `header` or an `ariaLabel` prop so the action card has a meaningful label for screen reader users.'\n      );\n    }\n\n    const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (disabled) {\n        return event.preventDefault();\n      }\n      fireCancelableEvent(onClick, {}, event);\n    };\n\n    const headerRowEmpty = !header && !description;\n\n    const iconWrapper = icon && (\n      <div className={clsx(styles.icon, testStyles.icon)} aria-hidden=\"true\">\n        {icon}\n      </div>\n    );\n    const iconInHeaderRow = icon && iconVerticalAlignment === 'top' && !!header;\n\n    const mergedRootRef = useMergeRefs(rootRef, __internalRootRef);\n\n    // Link the description element as the button's accessible description\n    // when the button already has a name (via header text or ariaLabel).\n    if (!ariaDescribedby && description && (ariaLabel || header)) {\n      ariaDescribedby = descriptionId;\n    }\n\n    const buttonProps = {\n      type: 'button' as const,\n      className: clsx(\n        styles['header-button'],\n        testStyles.button,\n        disabled && styles.disabled,\n        variant && styles[`variant-${variant}`]\n      ),\n      onClick: handleButtonClick,\n      'aria-describedby': ariaDescribedby,\n      'aria-disabled': disabled || undefined,\n    };\n\n    const headerSection = !headerRowEmpty ? (\n      <div className={clsx(styles.header, disableHeaderPaddings && styles['no-padding'])}>\n        <InternalStructuredItem\n          content={\n            header && (\n              <div className={clsx(styles['header-inner'], testStyles.header, disabled && styles.disabled)}>\n                <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>\n                  {...buttonProps}\n                  tag=\"button\"\n                  componentName=\"ActionCard\"\n                  nativeAttributes={nativeButtonAttributes}\n                  ref={buttonRef}\n                  id={headerId}\n                >\n                  {header}\n                </WithNativeAttributes>\n              </div>\n            )\n          }\n          secondaryContent={\n            description && (\n              <div\n                id={descriptionId}\n                className={clsx(\n                  styles.description,\n                  testStyles.description,\n                  disabled && styles.disabled,\n                  header && styles['has-header']\n                )}\n              >\n                {description}\n              </div>\n            )\n          }\n          disablePaddings={disableHeaderPaddings}\n        />\n      </div>\n    ) : null;\n\n    // When there's no header, a standalone overlay button is rendered.\n    // If ariaLabel is provided, it's used directly. Otherwise, derive the button's\n    // accessible name from the first available content: description or children.\n    let standaloneButtonLabelledBy: string | undefined;\n    if (!ariaLabel) {\n      if (description) {\n        standaloneButtonLabelledBy = descriptionId;\n      } else if (children) {\n        standaloneButtonLabelledBy = bodyId;\n      }\n    }\n\n    const standaloneButton = !header ? (\n      <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>\n        {...buttonProps}\n        tag=\"button\"\n        componentName=\"ActionCard\"\n        nativeAttributes={nativeButtonAttributes}\n        ref={buttonRef}\n        id={standaloneButtonId}\n        className={clsx(\n          styles['overlay-button'],\n          testStyles.button,\n          disabled && styles.disabled,\n          variant && styles[`variant-${variant}`]\n        )}\n        aria-label={ariaLabel || undefined}\n        aria-labelledby={standaloneButtonLabelledBy}\n      />\n    ) : null;\n\n    const contentElement = (\n      <div className={styles['inner-card']}>\n        {iconInHeaderRow ? (\n          <div className={styles['header-row']}>\n            {headerSection}\n            {iconWrapper}\n          </div>\n        ) : (\n          headerSection\n        )}\n        {children && (\n          <div\n            className={clsx(styles.body, testStyles.body, disableContentPaddings && styles['no-padding'])}\n            id={bodyId}\n          >\n            {children}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <div\n        {...baseProps}\n        ref={mergedRootRef}\n        role=\"group\"\n        aria-labelledby={header ? headerId : standaloneButtonId}\n        className={clsx(\n          styles.root,\n          styles[`variant-${variant}`],\n          disabled && styles.disabled,\n          disabled && testStyles.disabled,\n          !!icon && styles['has-icon'],\n          !!icon && styles['icon-align-end'],\n          !!icon && styles[`icon-vertical-align-${iconVerticalAlignment}`],\n          baseProps.className\n        )}\n        aria-disabled={disabled || undefined}\n      >\n        {standaloneButton}\n        {contentElement}\n        {!iconInHeaderRow && iconWrapper}\n      </div>\n    );\n  }\n);\n\nexport default InternalActionCard;\n"]}

package/action-card/styles.css.js

@@ -0,0 +1,22 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_16248_1lp59_161",
+  "icon": "awsui_icon_16248_1lp59_193",
+  "header-inner": "awsui_header-inner_16248_1lp59_209",
+  "disabled": "awsui_disabled_16248_1lp59_218",
+  "header": "awsui_header_16248_1lp59_209",
+  "body": "awsui_body_16248_1lp59_221",
+  "header-row": "awsui_header-row_16248_1lp59_225",
+  "description": "awsui_description_16248_1lp59_238",
+  "has-header": "awsui_has-header_16248_1lp59_244",
+  "header-button": "awsui_header-button_16248_1lp59_258",
+  "overlay-button": "awsui_overlay-button_16248_1lp59_259",
+  "variant-embedded": "awsui_variant-embedded_16248_1lp59_278",
+  "variant-default": "awsui_variant-default_16248_1lp59_290",
+  "inner-card": "awsui_inner-card_16248_1lp59_391",
+  "no-padding": "awsui_no-padding_16248_1lp59_398",
+  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_1lp59_409",
+  "icon-align-end": "awsui_icon-align-end_16248_1lp59_543"
+};
+