@cloudscape-design/components-themeable 3.0.1326 → 3.0.1327

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "83708957b95f02bdbbdd4a0e59f8d57955569f25"
+  "commit": "3f01803dd43a9bc50956b6ebcd760b686c18aa38"
 }

package/lib/internal/scss/action-card/styles.scss

@@ -163,11 +163,13 @@
     @include mixins.apply-state-styles('disabled');
   }
 
-  &:not(.disabled):has(button:hover) {
+  &:not(.disabled):has(.header-button:hover),
+  &:not(.disabled):has(.overlay-button:hover) {
     @include mixins.apply-state-styles('hover');
   }
 
-  &:not(.disabled):has(button:active) {
+  &:not(.disabled):has(.header-button:active),
+  &:not(.disabled):has(.overlay-button:active) {
     @include mixins.apply-state-styles('active');
   }
 

package/lib/internal/scss/box/styles.scss

@@ -6,6 +6,7 @@
 @use '../internal/styles' as styles;
 @use './text';
 @use './layout';
+@use './visual-accent';
 
 .root {
   @include styles.default-text-style;

package/lib/internal/scss/box/visual-accent.scss

@@ -0,0 +1,117 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '../internal/styles/tokens' as awsui;
+
+// T-shirt size keywords mirror the Box spacing scale (see spacing.scss).
+// `full` renders fully rounded corners (a circle when combined with `aspectRatio: 'equal'`).
+$accent-radii: (
+  'xxxs': awsui.$space-xxxs,
+  'xxs': awsui.$space-xxs,
+  'xs': awsui.$space-xs,
+  's': awsui.$space-s,
+  'm': awsui.$space-m,
+  'l': awsui.$space-l,
+  'xl': awsui.$space-xl,
+  'xxl': awsui.$space-xxl,
+  'xxxl': awsui.$space-xxxl,
+  'full': 50%,
+);
+
+@mixin accent-radius($value) {
+  border-start-start-radius: $value;
+  border-start-end-radius: $value;
+  border-end-start-radius: $value;
+  border-end-end-radius: $value;
+}
+
+// ─── Base visual accent container ─────────────────────────────────────────────
+// Applied whenever the `visualAccent` prop is set. Provides the container layout. Corners are
+// square by default; the `.visual-accent-radius-*` classes below apply corner rounding for the
+// curated `borderRadius` keywords.
+.visual-accent {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: awsui.$space-xxs;
+  padding-inline: awsui.$space-xs;
+  box-sizing: border-box;
+}
+
+// ─── Accent border radius (t-shirt size keywords) ─────────────────────────────
+// Mirror the Box spacing scale so `borderRadius` keywords align with `padding` / `margin`.
+@each $name, $value in $accent-radii {
+  .visual-accent-radius-#{$name} {
+    @include accent-radius($value);
+  }
+}
+
+// ─── Accent aspect ratio ──────────────────────────────────────────────────────
+// `auto`  — default; the container's width follows its content.
+// `equal` — equal width and height, suitable for icon wrapping. Combine with
+//           `borderRadius: 'full'` to render a circle.
+
+.visual-accent-aspect-auto {
+  // Reset any square constraints so content can size the container naturally.
+  aspect-ratio: auto;
+  inline-size: auto;
+}
+
+.visual-accent-aspect-equal {
+  // Equal padding on all sides.
+  padding-block: awsui.$space-xs;
+  padding-inline: awsui.$space-xs;
+  // Force the element to be a square regardless of content dimensions.
+  // The width is constrained to match the height (content + padding).
+  aspect-ratio: 1 / 1;
+  // Prevent content from stretching the box wider than tall.
+  overflow: hidden;
+  // Let the box shrink-wrap to its height, width follows via aspect-ratio.
+  inline-size: fit-content;
+}
+
+// ─── Accent colors ──────────────────────────────────────────────────────────────
+// Light/dark values are resolved by the design tokens, so no explicit dark-mode
+// overrides are needed here.
+//
+// The selectors chain the `.visual-accent` base class with the `.visual-accent-{color}`
+// modifier (both are always applied together whenever `visualAccent` is set) to reach a
+// specificity of (0,3,0). This intentionally beats the `color` prop's `.box.color-*`
+// selector (0,2,0) so the accent's coordinated foreground color always wins, regardless of
+// stylesheet source order. Winning here preserves the guaranteed background/foreground color
+// contrast of the accent pair. Descendants (nested Box, Icon) inherit this color.
+//
+// Token variables are looked up dynamically from the tokens module, so adding a color only
+// requires extending `$accent-colors`.
+$accent-colors: (
+  'red',
+  'yellow',
+  'indigo',
+  'green',
+  'orange',
+  'purple',
+  'mint',
+  'lime',
+  'grey',
+  'teal',
+  'cyan',
+  'blue',
+  'violet',
+  'fuchsia',
+  'magenta',
+  'pink',
+  'rose',
+  'amber'
+);
+$tokens: meta.module-variables('awsui');
+
+@each $accent in $accent-colors {
+  .box.visual-accent.visual-accent-#{$accent} {
+    background-color: map.get($tokens, 'color-background-accent-#{$accent}');
+    color: map.get($tokens, 'color-text-accent-#{$accent}');
+  }
+}

package/lib/internal/scss/button-dropdown/styles.scss

@@ -145,6 +145,12 @@ $dropdown-trigger-icon-offset: 2px;
   flex: 0 0 auto;
 }
 
+.filter {
+  position: relative;
+  z-index: 4;
+  flex-shrink: 0;
+}
+
 .test-utils-button-trigger {
   /* used in test-utils */
 }

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

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "83708957";
+    $awsui-commit-hash: "3f01803d";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

package/lib/internal/template/action-card/interfaces.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { BaseComponentProps } from '../types/base-component';
-import { CancelableEventHandler } from '../types/events';
+import { BaseNavigationDetail, CancelableEventHandler } from '../types/events';
 import { NativeAttributes } from '../types/native-attributes';
 export interface ActionCardProps extends BaseComponentProps {
     /**
@@ -19,6 +19,33 @@ export interface ActionCardProps extends BaseComponentProps {
      * Called when the user clicks on the action card.
      */
     onClick?: CancelableEventHandler<ActionCardProps.ClickDetail>;
+    /**
+     * Turns the action card into a link, pointing to the given URL. The card is rendered using an `a` element instead of a `button`.
+     * For example, use this property if selecting the card should navigate the user to another page.
+     */
+    href?: string;
+    /**
+     * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).
+     * This property only applies when an `href` is provided.
+     */
+    target?: string;
+    /**
+     * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to "noopener noreferrer" when `target` is `"_blank"`.
+     * If the `rel` property is provided, it overrides the default behavior.
+     * This property only applies when an `href` is provided.
+     */
+    rel?: string;
+    /**
+     * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.
+     * You can specify a string value that will be suggested as the name of the downloaded file.
+     * This property only applies when an `href` is provided.
+     */
+    download?: boolean | string;
+    /**
+     * Called when the user clicks on the action card with the left mouse button without pressing
+     * modifier keys (that is, CTRL, ALT, SHIFT, META), and the action card has an `href` set.
+     */
+    onFollow?: CancelableEventHandler<ActionCardProps.FollowDetail>;
     /**
      * Adds an aria-label to the action card.
      */
@@ -65,10 +92,22 @@ export interface ActionCardProps extends BaseComponentProps {
      * @awsuiSystem core
      */
     nativeButtonAttributes?: NativeAttributes<React.ButtonHTMLAttributes<HTMLButtonElement>>;
+    /**
+     * Attributes to add to the native `a` element (when `href` is provided).
+     * 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
+     */
+    nativeAnchorAttributes?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;
 }
 export declare namespace ActionCardProps {
     interface ClickDetail {
     }
+    type FollowDetail = BaseNavigationDetail;
     type IconVerticalAlignment = 'top' | 'center';
     type Variant = 'default' | 'embedded';
     interface Ref {

package/lib/internal/template/action-card/interfaces.d.ts.map

@@ -1 +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,yBAAyB,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,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"}
+{"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,yBAAyB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,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;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IAEhE;;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;IAEzF;;;;;;;;;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,YAAY,GAAG,oBAAoB,CAAC;IAEhD,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/lib/internal/template/action-card/interfaces.js.map

@@ -1 +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 '../types/base-component';\nimport { CancelableEventHandler } from '../types/events';\nimport { NativeAttributes } from '../types/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"]}
+{"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 '../types/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler } from '../types/events';\nimport { NativeAttributes } from '../types/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   * Turns the action card into a link, pointing to the given URL. The card is rendered using an `a` element instead of a `button`.\n   * For example, use this property if selecting the card should navigate the user to another page.\n   */\n  href?: string;\n\n  /**\n   * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n   * This property only applies when an `href` is provided.\n   */\n  target?: string;\n\n  /**\n   * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n   * If the `rel` property is provided, it overrides the default behavior.\n   * This property only applies when an `href` is provided.\n   */\n  rel?: string;\n\n  /**\n   * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n   * You can specify a string value that will be suggested as the name of the downloaded file.\n   * This property only applies when an `href` is provided.\n   */\n  download?: boolean | string;\n\n  /**\n   * Called when the user clicks on the action card with the left mouse button without pressing\n   * modifier keys (that is, CTRL, ALT, SHIFT, META), and the action card has an `href` set.\n   */\n  onFollow?: CancelableEventHandler<ActionCardProps.FollowDetail>;\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  /**\n   * Attributes to add to the native `a` element (when `href` is provided).\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  nativeAnchorAttributes?: NativeAttributes<React.AnchorHTMLAttributes<HTMLAnchorElement>>;\n}\n\nexport namespace ActionCardProps {\n  // eslint-disable-next-line @typescript-eslint/no-empty-object-type\n  export interface ClickDetail {}\n\n  export type FollowDetail = BaseNavigationDetail;\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/lib/internal/template/action-card/internal.d.ts.map

@@ -1 +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,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG,0BAA0B,CAAC;AAEnF,QAAA,MAAM,kBAAkB,0HA8LvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"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;AAGlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG,0BAA0B,CAAC;AAEnF,QAAA,MAAM,kBAAkB,0HAiOvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/internal/template/action-card/internal.js

@@ -5,20 +5,23 @@ 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 { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
+import { checkSafeUrl } from '../internal/utils/check-safe-url';
 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 InternalActionCard = React.forwardRef(({ header, description, children, onClick, onFollow, href, target, rel, download, ariaLabel, ariaDescribedby, disabled, disableHeaderPaddings, disableContentPaddings, icon, iconVerticalAlignment, variant, nativeButtonAttributes, nativeAnchorAttributes, __internalRootRef, ...rest }, ref) => {
     const baseProps = getBaseProps(rest);
-    const buttonRef = useRef(null);
+    const containerRef = 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);
+    useForwardFocus(ref, containerRef);
+    checkSafeUrl('ActionCard', href);
+    const isAnchor = Boolean(href);
     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.');
     }
@@ -26,6 +29,9 @@ const InternalActionCard = React.forwardRef(({ header, description, children, on
         if (disabled) {
             return event.preventDefault();
         }
+        if (isAnchor && isPlainLeftClick(event)) {
+            fireCancelableEvent(onFollow, { href, target }, event);
+        }
         fireCancelableEvent(onClick, {}, event);
     };
     const headerRowEmpty = !header && !description;
@@ -37,16 +43,26 @@ const InternalActionCard = React.forwardRef(({ header, description, children, on
     if (!ariaDescribedby && description && (ariaLabel || header)) {
         ariaDescribedby = descriptionId;
     }
-    const buttonProps = {
-        type: 'button',
+    // Shared props between <a>-tag and <button>-tag
+    const interactiveProps = {
         className: clsx(styles['header-button'], testStyles.button, disabled && styles.disabled, variant && styles[`variant-${variant}`]),
         onClick: handleButtonClick,
         'aria-describedby': ariaDescribedby,
         'aria-disabled': disabled || undefined,
     };
+    // <a>-tag specific props
+    const anchorProps = {
+        href: disabled ? undefined : href,
+        role: disabled ? 'link' : undefined,
+        tabIndex: disabled ? 0 : undefined,
+        target,
+        // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target
+        rel: rel !== null && rel !== void 0 ? rel : (target === '_blank' ? 'noopener noreferrer' : undefined),
+        download,
+    };
+    const renderInteractiveElement = (props, children) => isAnchor ? (React.createElement(WithNativeAttributes, { ...props, ...anchorProps, tag: "a", componentName: "ActionCard", nativeAttributes: nativeAnchorAttributes, ref: containerRef }, children)) : (React.createElement(WithNativeAttributes, { ...props, type: "button", tag: "button", componentName: "ActionCard", nativeAttributes: nativeButtonAttributes, ref: containerRef }, children));
     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;
+        React.createElement(InternalStructuredItem, { content: header && (React.createElement("div", { className: clsx(styles['header-inner'], testStyles.header, disabled && styles.disabled) }, renderInteractiveElement({ ...interactiveProps, 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.
@@ -59,7 +75,14 @@ const InternalActionCard = React.forwardRef(({ header, description, children, on
             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 standaloneOverlayProps = {
+        ...interactiveProps,
+        id: standaloneButtonId,
+        className: clsx(styles['overlay-button'], testStyles.button, disabled && styles.disabled, variant && styles[`variant-${variant}`]),
+        'aria-label': ariaLabel || undefined,
+        'aria-labelledby': standaloneButtonLabelledBy,
+    };
+    const standaloneButton = !header ? renderInteractiveElement(standaloneOverlayProps) : null;
     const contentElement = (React.createElement("div", { className: styles['inner-card'] },
         iconInHeaderRow ? (React.createElement("div", { className: styles['header-row'] },
             headerSection,

package/lib/internal/template/action-card/internal.js.map

@@ -1 +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 { 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"]}
+{"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, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport { 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      onFollow,\n      href,\n      target,\n      rel,\n      download,\n      ariaLabel,\n      ariaDescribedby,\n      disabled,\n      disableHeaderPaddings,\n      disableContentPaddings,\n      icon,\n      iconVerticalAlignment,\n      variant,\n      nativeButtonAttributes,\n      nativeAnchorAttributes,\n      __internalRootRef,\n      ...rest\n    }: InternalActionCardProps,\n    ref: React.Ref<ActionCardProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const containerRef = useRef<HTMLButtonElement | HTMLAnchorElement>(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, containerRef);\n\n    checkSafeUrl('ActionCard', href);\n    const isAnchor = Boolean(href);\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 | HTMLAnchorElement>) => {\n      if (disabled) {\n        return event.preventDefault();\n      }\n      if (isAnchor && isPlainLeftClick(event)) {\n        fireCancelableEvent(onFollow, { href, target }, event);\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    // Shared props between <a>-tag and <button>-tag\n    const interactiveProps = {\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    // <a>-tag specific props\n    const anchorProps = {\n      href: disabled ? undefined : href,\n      role: disabled ? 'link' : undefined,\n      tabIndex: disabled ? 0 : undefined,\n      target,\n      // security recommendation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n      rel: rel ?? (target === '_blank' ? 'noopener noreferrer' : undefined),\n      download,\n    };\n\n    const renderInteractiveElement = (props: Record<string, unknown>, children?: React.ReactNode) =>\n      isAnchor ? (\n        <WithNativeAttributes<HTMLAnchorElement, React.AnchorHTMLAttributes<HTMLAnchorElement>>\n          {...props}\n          {...anchorProps}\n          tag=\"a\"\n          componentName=\"ActionCard\"\n          nativeAttributes={nativeAnchorAttributes}\n          ref={containerRef as React.Ref<HTMLAnchorElement>}\n        >\n          {children}\n        </WithNativeAttributes>\n      ) : (\n        <WithNativeAttributes<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>\n          {...props}\n          type=\"button\"\n          tag=\"button\"\n          componentName=\"ActionCard\"\n          nativeAttributes={nativeButtonAttributes}\n          ref={containerRef as React.Ref<HTMLButtonElement>}\n        >\n          {children}\n        </WithNativeAttributes>\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                {renderInteractiveElement({ ...interactiveProps, id: headerId }, header)}\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 standaloneOverlayProps = {\n      ...interactiveProps,\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\n    const standaloneButton = !header ? renderInteractiveElement(standaloneOverlayProps) : 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/lib/internal/template/action-card/styles.css.js

@@ -1,22 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_16248_1xlcm_161",
-  "icon": "awsui_icon_16248_1xlcm_193",
-  "header-inner": "awsui_header-inner_16248_1xlcm_209",
-  "disabled": "awsui_disabled_16248_1xlcm_218",
-  "header": "awsui_header_16248_1xlcm_209",
-  "body": "awsui_body_16248_1xlcm_224",
-  "header-row": "awsui_header-row_16248_1xlcm_228",
-  "description": "awsui_description_16248_1xlcm_241",
-  "has-header": "awsui_has-header_16248_1xlcm_247",
-  "header-button": "awsui_header-button_16248_1xlcm_261",
-  "overlay-button": "awsui_overlay-button_16248_1xlcm_262",
-  "variant-embedded": "awsui_variant-embedded_16248_1xlcm_281",
-  "variant-default": "awsui_variant-default_16248_1xlcm_293",
-  "inner-card": "awsui_inner-card_16248_1xlcm_394",
-  "no-padding": "awsui_no-padding_16248_1xlcm_401",
-  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_1xlcm_412",
-  "icon-align-end": "awsui_icon-align-end_16248_1xlcm_546"
+  "root": "awsui_root_16248_11dsh_161",
+  "icon": "awsui_icon_16248_11dsh_193",
+  "header-inner": "awsui_header-inner_16248_11dsh_209",
+  "disabled": "awsui_disabled_16248_11dsh_218",
+  "header": "awsui_header_16248_11dsh_209",
+  "body": "awsui_body_16248_11dsh_224",
+  "header-row": "awsui_header-row_16248_11dsh_228",
+  "description": "awsui_description_16248_11dsh_241",
+  "has-header": "awsui_has-header_16248_11dsh_247",
+  "header-button": "awsui_header-button_16248_11dsh_261",
+  "overlay-button": "awsui_overlay-button_16248_11dsh_262",
+  "variant-embedded": "awsui_variant-embedded_16248_11dsh_281",
+  "variant-default": "awsui_variant-default_16248_11dsh_293",
+  "inner-card": "awsui_inner-card_16248_11dsh_394",
+  "no-padding": "awsui_no-padding_16248_11dsh_401",
+  "icon-vertical-align-center": "awsui_icon-vertical-align-center_16248_11dsh_412",
+  "icon-align-end": "awsui_icon-align-end_16248_11dsh_548"
 };