@cloudscape-design/components-themeable 3.0.1360 → 3.0.1362

package/lib/internal/template/toggle/styles.scoped.css

@@ -6,7 +6,7 @@
 /* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
 /* 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_root_4yi2u_7q95s_9:not(#\9) {
+.awsui_root_4yi2u_1x2rl_9:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -39,15 +39,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
 }
 
-.awsui_outline_4yi2u_7q95s_42:not(#\9) {
-  --awsui-style-focus-ring-box-shadow-esndbs: 0 0 0 var(--awsui-style-focus-ring-border-width-esndbs, 2px) var(--awsui-style-focus-ring-border-color-esndbs, var(--color-border-item-focused-sewkzn, #0073bb));
+.awsui_outline_4yi2u_1x2rl_42:not(#\9) {
+  --awsui-style-focus-ring-box-shadow-66120l: 0 0 0 var(--awsui-style-focus-ring-border-width-66120l, 2px) var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #0073bb));
   position: relative;
 }
-.awsui_outline_4yi2u_7q95s_42:not(#\9) {
+.awsui_outline_4yi2u_1x2rl_42:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(2px - 1px);
 }
-.awsui_outline_4yi2u_7q95s_42:not(#\9)::before {
+.awsui_outline_4yi2u_1x2rl_42:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -55,14 +55,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: calc(-1 * 2px);
   inline-size: calc(100% + 2px + 2px);
   block-size: calc(100% + 2px + 2px);
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-esndbs);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-66120l);
 }
 
-.awsui_toggle-control_4yi2u_7q95s_65:not(#\9) {
+.awsui_toggle-control_4yi2u_1x2rl_65:not(#\9) {
   forced-color-adjust: none;
   margin-block-start: calc((var(--line-height-body-m-5xw6xo, 22px) - 16px) / 2);
   min-block-size: 16px;
@@ -75,20 +75,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: 8px;
   border-end-end-radius: 8px;
 }
-.awsui_toggle-control-checked_4yi2u_7q95s_78:not(#\9) {
+.awsui_toggle-control-checked_4yi2u_1x2rl_78:not(#\9) {
   background: var(--color-background-control-checked-ksqwhc, #0073bb);
 }
-.awsui_toggle-control-disabled_4yi2u_7q95s_81:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1x2rl_81:not(#\9) {
   background: var(--color-background-control-disabled-m61b8s, #d5dbdb);
 }
-.awsui_toggle-control-disabled_4yi2u_7q95s_81.awsui_toggle-control-checked_4yi2u_7q95s_78:not(#\9) {
+.awsui_toggle-control-disabled_4yi2u_1x2rl_81.awsui_toggle-control-checked_4yi2u_1x2rl_78:not(#\9) {
   background: var(--color-background-toggle-checked-disabled-81loy3, #99cbe4);
 }
-.awsui_toggle-control-readonly_4yi2u_7q95s_87:not(#\9) {
+.awsui_toggle-control-readonly_4yi2u_1x2rl_87:not(#\9) {
   background: var(--color-background-control-disabled-m61b8s, #d5dbdb);
 }
 
-.awsui_toggle-handle_4yi2u_7q95s_91:not(#\9) {
+.awsui_toggle-handle_4yi2u_1x2rl_91:not(#\9) {
   display: block;
   position: absolute;
   border-start-start-radius: 6px;
@@ -104,29 +104,29 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition: transform var(--motion-duration-fast-yb0m8k, 90ms) var(--motion-easing-ease-out-quart-k5q7pi, cubic-bezier(0.165, 0.84, 0.44, 1)), background-color var(--motion-duration-fast-yb0m8k, 90ms) var(--motion-easing-ease-out-quart-k5q7pi, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_toggle-handle_4yi2u_7q95s_91:not(#\9) {
+  .awsui_toggle-handle_4yi2u_1x2rl_91:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_toggle-handle_4yi2u_7q95s_91:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_7q95s_91:not(#\9) {
+.awsui-motion-disabled .awsui_toggle-handle_4yi2u_1x2rl_91:not(#\9), .awsui-mode-entering .awsui_toggle-handle_4yi2u_1x2rl_91:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_toggle-handle-checked_4yi2u_7q95s_116:not(#\9) {
+.awsui_toggle-handle-checked_4yi2u_1x2rl_116:not(#\9) {
   transform: translateX(8px);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_toggle-handle-checked_4yi2u_7q95s_116:not(#\9):dir(rtl) {
+.awsui_toggle-handle-checked_4yi2u_1x2rl_116:not(#\9):dir(rtl) {
   transform: translateX(-8px);
 }
-.awsui_toggle-handle-disabled_4yi2u_7q95s_123:not(#\9) {
+.awsui_toggle-handle-disabled_4yi2u_1x2rl_123:not(#\9) {
   background: var(--color-foreground-control-disabled-bikivj, #ffffff);
   box-shadow: none;
 }
-.awsui_toggle-handle-readonly_4yi2u_7q95s_127:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_7q95s_123) {
+.awsui_toggle-handle-readonly_4yi2u_1x2rl_127:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1x2rl_123) {
   box-shadow: none;
 }
-.awsui_toggle-handle-readonly_4yi2u_7q95s_127:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_7q95s_123).awsui_toggle-handle-checked_4yi2u_7q95s_116 {
+.awsui_toggle-handle-readonly_4yi2u_1x2rl_127:not(#\9):not(.awsui_toggle-handle-disabled_4yi2u_1x2rl_123).awsui_toggle-handle-checked_4yi2u_1x2rl_116 {
   background: var(--color-foreground-control-read-only-8sqxyy, #687078);
 }

package/lib/internal/template/toggle/styles.selectors.js

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_4yi2u_7q95s_9",
-  "outline": "awsui_outline_4yi2u_7q95s_42",
-  "toggle-control": "awsui_toggle-control_4yi2u_7q95s_65",
-  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_7q95s_78",
-  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_7q95s_81",
-  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_7q95s_87",
-  "toggle-handle": "awsui_toggle-handle_4yi2u_7q95s_91",
-  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_7q95s_116",
-  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_7q95s_123",
-  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_7q95s_127"
+  "root": "awsui_root_4yi2u_1x2rl_9",
+  "outline": "awsui_outline_4yi2u_1x2rl_42",
+  "toggle-control": "awsui_toggle-control_4yi2u_1x2rl_65",
+  "toggle-control-checked": "awsui_toggle-control-checked_4yi2u_1x2rl_78",
+  "toggle-control-disabled": "awsui_toggle-control-disabled_4yi2u_1x2rl_81",
+  "toggle-control-readonly": "awsui_toggle-control-readonly_4yi2u_1x2rl_87",
+  "toggle-handle": "awsui_toggle-handle_4yi2u_1x2rl_91",
+  "toggle-handle-checked": "awsui_toggle-handle-checked_4yi2u_1x2rl_116",
+  "toggle-handle-disabled": "awsui_toggle-handle-disabled_4yi2u_1x2rl_123",
+  "toggle-handle-readonly": "awsui_toggle-handle-readonly_4yi2u_1x2rl_127"
 };
   

package/lib/internal/template/token/dismiss-button.js

@@ -23,7 +23,7 @@ function DismissButton({ disabled, dismissLabel, onDismiss, readOnly, inline },
                 return;
             }
             fireNonCancelableEvent(onDismiss);
-        }, "aria-label": dismissLabel, ...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata)) },
-        React.createElement(InternalIcon, { name: "close", size: isOneTheme ? 'x-small' : undefined })));
+        }, "aria-label": dismissLabel, "data-awsui-motion-trigger": "hover", ...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata)) },
+        React.createElement(InternalIcon, { name: "close", size: isOneTheme ? 'x-small' : undefined, nativeAttributes: { 'data-awsui-motion-target': '' } })));
 }
 //# sourceMappingURL=dismiss-button.js.map

package/lib/internal/template/token/dismiss-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAI5D,OAAO,mBAAmB,MAAM,8BAA8B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAsB,EAC3E,GAA2B;IAE3B,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,iBAAiB,GAA2C;QAChE,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB;KACF,CAAC;IACF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,cAAc,CAAC,gBAAgB,CAAC,EAChC,MAAM,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAC1C,mBACc,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;gBACvC,OAAO;YACT,CAAC;YAED,sBAAsB,CAAC,SAAS,CAAC,CAAC;QACpC,CAAC,gBACW,YAAY,KACpB,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QAElF,oBAAC,YAAY,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAI,CAChE,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../icon/internal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { NonCancelableEventHandler } from '../types/events';\nimport { GeneratedAnalyticsMetadataTokenDismiss } from './analytics-metadata/interfaces';\n\nimport legacyTestingStyles from '../token-group/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  readOnly?: boolean;\n  onDismiss?: NonCancelableEventHandler;\n  dismissLabel?: string;\n  inline?: boolean;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton(\n  { disabled, dismissLabel, onDismiss, readOnly, inline }: DismissButtonProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  const isOneTheme = isThemeActive(Theme.OneTheme);\n  const analyticsMetadata: GeneratedAnalyticsMetadataTokenDismiss = {\n    action: 'dismiss',\n    detail: {\n      label: { root: 'self' },\n    },\n  };\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles['dismiss-button'],\n        legacyTestingStyles['dismiss-button'],\n        testUtilStyles['dismiss-button'],\n        inline && styles['dismiss-button-inline']\n      )}\n      aria-disabled={disabled || readOnly ? true : undefined}\n      onClick={() => {\n        if (disabled || readOnly || !onDismiss) {\n          return;\n        }\n\n        fireNonCancelableEvent(onDismiss);\n      }}\n      aria-label={dismissLabel}\n      {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n    >\n      <InternalIcon name=\"close\" size={isOneTheme ? 'x-small' : undefined} />\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"dismiss-button.js","sourceRoot":"","sources":["../../../src/token/dismiss-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAO,MAAM,OAAO,CAAC;AAC/C,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAI5D,OAAO,mBAAmB,MAAM,8BAA8B,CAAC;AAC/D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAU1D,eAAe,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzC,SAAS,aAAa,CACpB,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAsB,EAC3E,GAA2B;IAE3B,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,iBAAiB,GAA2C;QAChE,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE;YACN,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB;KACF,CAAC;IACF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,cAAc,CAAC,gBAAgB,CAAC,EAChC,MAAM,IAAI,MAAM,CAAC,uBAAuB,CAAC,CAC1C,mBACc,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,OAAO,EAAE,GAAG,EAAE;YACZ,IAAI,QAAQ,IAAI,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;gBACvC,OAAO;YACT,CAAC;YAED,sBAAsB,CAAC,SAAS,CAAC,CAAC;QACpC,CAAC,gBACW,YAAY,+BACE,OAAO,KAC7B,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QAElF,oBAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,gBAAgB,EAAE,EAAE,0BAA0B,EAAE,EAAE,EAAE,GACpD,CACK,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, Ref } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../icon/internal';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { NonCancelableEventHandler } from '../types/events';\nimport { GeneratedAnalyticsMetadataTokenDismiss } from './analytics-metadata/interfaces';\n\nimport legacyTestingStyles from '../token-group/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface DismissButtonProps {\n  disabled?: boolean;\n  readOnly?: boolean;\n  onDismiss?: NonCancelableEventHandler;\n  dismissLabel?: string;\n  inline?: boolean;\n}\n\nexport default forwardRef(DismissButton);\n\nfunction DismissButton(\n  { disabled, dismissLabel, onDismiss, readOnly, inline }: DismissButtonProps,\n  ref: Ref<HTMLButtonElement>\n) {\n  const isOneTheme = isThemeActive(Theme.OneTheme);\n  const analyticsMetadata: GeneratedAnalyticsMetadataTokenDismiss = {\n    action: 'dismiss',\n    detail: {\n      label: { root: 'self' },\n    },\n  };\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      className={clsx(\n        styles['dismiss-button'],\n        legacyTestingStyles['dismiss-button'],\n        testUtilStyles['dismiss-button'],\n        inline && styles['dismiss-button-inline']\n      )}\n      aria-disabled={disabled || readOnly ? true : undefined}\n      onClick={() => {\n        if (disabled || readOnly || !onDismiss) {\n          return;\n        }\n\n        fireNonCancelableEvent(onDismiss);\n      }}\n      aria-label={dismissLabel}\n      data-awsui-motion-trigger=\"hover\"\n      {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n    >\n      <InternalIcon\n        name=\"close\"\n        size={isOneTheme ? 'x-small' : undefined}\n        nativeAttributes={{ 'data-awsui-motion-target': '' }}\n      />\n    </button>\n  );\n}\n"]}

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

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1i2wg_1tahk_17",
-  "dismiss-button": "awsui_dismiss-button_1i2wg_1tahk_49",
-  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_1tahk_90",
-  "icon": "awsui_icon_1i2wg_1tahk_96",
-  "icon-inline": "awsui_icon-inline_1i2wg_1tahk_102",
-  "token-normal": "awsui_token-normal_1i2wg_1tahk_107",
-  "token-inline": "awsui_token-inline_1i2wg_1tahk_114",
-  "token-option-inline": "awsui_token-option-inline_1i2wg_1tahk_140",
-  "token-box": "awsui_token-box_1i2wg_1tahk_144",
-  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_1tahk_163",
-  "token-box-inline": "awsui_token-box-inline_1i2wg_1tahk_167",
-  "disable-padding": "awsui_disable-padding_1i2wg_1tahk_187",
-  "token-box-readonly": "awsui_token-box-readonly_1i2wg_1tahk_194",
-  "token-box-disabled": "awsui_token-box-disabled_1i2wg_1tahk_195"
+  "root": "awsui_root_1i2wg_rrrrt_17",
+  "dismiss-button": "awsui_dismiss-button_1i2wg_rrrrt_49",
+  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_rrrrt_90",
+  "icon": "awsui_icon_1i2wg_rrrrt_96",
+  "icon-inline": "awsui_icon-inline_1i2wg_rrrrt_102",
+  "token-normal": "awsui_token-normal_1i2wg_rrrrt_107",
+  "token-inline": "awsui_token-inline_1i2wg_rrrrt_114",
+  "token-option-inline": "awsui_token-option-inline_1i2wg_rrrrt_140",
+  "token-box": "awsui_token-box_1i2wg_rrrrt_144",
+  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_rrrrt_163",
+  "token-box-inline": "awsui_token-box-inline_1i2wg_rrrrt_167",
+  "disable-padding": "awsui_disable-padding_1i2wg_rrrrt_187",
+  "token-box-readonly": "awsui_token-box-readonly_1i2wg_rrrrt_194",
+  "token-box-disabled": "awsui_token-box-disabled_1i2wg_rrrrt_195"
 };
   

package/lib/internal/template/token/styles.scoped.css

@@ -14,7 +14,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1i2wg_1tahk_17:not(#\9) {
+.awsui_root_1i2wg_rrrrt_17:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -46,7 +46,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_dismiss-button_1i2wg_1tahk_49:not(#\9) {
+.awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9) {
   align-self: flex-start;
   margin-block-end: 0;
   margin-inline-start: var(--space-xxs-3o1yoq, 4px);
@@ -54,19 +54,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-width-field-2365x3, 1px) solid transparent;
   padding-block: 0;
   padding-inline: var(--space-xxs-3o1yoq, 4px);
-  color: var(--awsui-token-style-dismiss-color-default-esndbs, var(--color-text-button-inline-icon-default-yujzfi, #545b64));
+  color: var(--awsui-token-style-dismiss-color-default-66120l, var(--color-text-button-inline-icon-default-yujzfi, #545b64));
   background-color: transparent;
   cursor: pointer;
-  --awsui-style-focus-ring-box-shadow-esndbs: 0 0 0 var(--awsui-style-focus-ring-border-width-esndbs, 2px) var(--awsui-style-focus-ring-border-color-esndbs, var(--color-border-item-focused-sewkzn, #0073bb));
+  --awsui-style-focus-ring-box-shadow-66120l: 0 0 0 var(--awsui-style-focus-ring-border-width-66120l, 2px) var(--awsui-style-focus-ring-border-color-66120l, var(--color-border-item-focused-sewkzn, #0073bb));
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -74,55 +74,55 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9
   inset-block-start: calc(-1 * 0px);
   inline-size: calc(100% + 0px + 0px);
   block-size: calc(100% + 0px + 0px);
-  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-esndbs, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
-  box-shadow: var(--awsui-style-focus-ring-box-shadow-esndbs);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-66120l, var(--border-radius-control-default-focus-ring-akwhsf, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-66120l);
 }
-.awsui_dismiss-button_1i2wg_1tahk_49:not(#\9):focus {
+.awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_1i2wg_1tahk_49:not(#\9):hover {
-  color: var(--awsui-token-style-dismiss-color-hover-esndbs, var(--color-text-button-inline-icon-hover-kxgkw7, #16191f));
+.awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9):hover {
+  color: var(--awsui-token-style-dismiss-color-hover-66120l, var(--color-text-button-inline-icon-hover-kxgkw7, #16191f));
 }
-.awsui_dismiss-button-inline_1i2wg_1tahk_90:not(#\9) {
+.awsui_dismiss-button-inline_1i2wg_rrrrt_90:not(#\9) {
   padding-inline: 0;
   display: flex;
   align-items: center;
   align-self: center;
 }
-.awsui_icon_1i2wg_1tahk_96:not(#\9) {
+.awsui_icon_1i2wg_rrrrt_96:not(#\9) {
   padding-inline-end: var(--space-xs-m9b7jf, 8px);
   align-self: flex-start;
   display: flex;
   flex-shrink: 0;
 }
-.awsui_icon-inline_1i2wg_1tahk_102:not(#\9) {
+.awsui_icon-inline_1i2wg_rrrrt_102:not(#\9) {
   padding-inline-end: var(--space-xxs-3o1yoq, 4px);
   align-self: center;
 }
 
-.awsui_token-normal_1i2wg_1tahk_107:not(#\9) {
+.awsui_token-normal_1i2wg_rrrrt_107:not(#\9) {
   block-size: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--space-xxs-3o1yoq, 4px);
 }
 
-.awsui_token-inline_1i2wg_1tahk_114:not(#\9) {
+.awsui_token-inline_1i2wg_rrrrt_114:not(#\9) {
   display: inline-flex;
   max-inline-size: 100%;
 }
-body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1tahk_114:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_rrrrt_114:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1tahk_114:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_rrrrt_114:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1tahk_114:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_rrrrt_114:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -137,22 +137,22 @@ body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1tahk_114:not(#\9)
   box-shadow: 0 0 0 2px var(--color-border-item-focused-sewkzn, #0073bb);
 }
 
-.awsui_token-option-inline_1i2wg_1tahk_140:not(#\9) {
+.awsui_token-option-inline_1i2wg_rrrrt_140:not(#\9) {
   max-block-size: 20px;
 }
 
-.awsui_token-box_1i2wg_1tahk_144:not(#\9) {
+.awsui_token-box_1i2wg_rrrrt_144:not(#\9) {
   position: relative;
   block-size: 100%;
-  border-block: var(--border-width-token-p4a0gu, 1px) solid var(--awsui-token-style-border-color-default-esndbs, var(--color-border-item-selected-7104rh, #0073bb));
-  border-inline: var(--border-width-token-p4a0gu, 1px) solid var(--awsui-token-style-border-color-default-esndbs, var(--color-border-item-selected-7104rh, #0073bb));
+  border-block: var(--border-width-token-p4a0gu, 1px) solid var(--awsui-token-style-border-color-default-66120l, var(--color-border-item-selected-7104rh, #0073bb));
+  border-inline: var(--border-width-token-p4a0gu, 1px) solid var(--awsui-token-style-border-color-default-66120l, var(--color-border-item-selected-7104rh, #0073bb));
   padding-block-start: var(--space-token-vertical-zoq8xd, 4px);
   padding-block-end: var(--space-token-vertical-zoq8xd, 4px);
   padding-inline-start: var(--space-field-horizontal-anki5k, 8px);
   padding-inline-end: var(--space-xxs-3o1yoq, 4px);
   display: flex;
   align-items: flex-start;
-  background: var(--awsui-token-style-background-default-esndbs, var(--color-background-item-selected-dotkup, #f1faff));
+  background: var(--awsui-token-style-background-default-66120l, var(--color-background-item-selected-dotkup, #f1faff));
   border-start-start-radius: var(--border-radius-token-dnq13z, 2px);
   border-start-end-radius: var(--border-radius-token-dnq13z, 2px);
   border-end-start-radius: var(--border-radius-token-dnq13z, 2px);
@@ -160,21 +160,21 @@ body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1tahk_114:not(#\9)
   color: var(--color-text-body-default-b2us04, #16191f);
   box-sizing: border-box;
 }
-.awsui_token-box-without-dismiss_1i2wg_1tahk_163:not(#\9) {
+.awsui_token-box-without-dismiss_1i2wg_rrrrt_163:not(#\9) {
   padding-inline-end: var(--space-field-horizontal-anki5k, 8px);
 }
 
-.awsui_token-box-inline_1i2wg_1tahk_167:not(#\9) {
+.awsui_token-box-inline_1i2wg_rrrrt_167:not(#\9) {
   position: relative;
   block-size: 20px;
   max-block-size: 20px;
-  border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-token-style-border-color-default-esndbs, var(--color-border-item-selected-7104rh, #0073bb));
-  border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-token-style-border-color-default-esndbs, var(--color-border-item-selected-7104rh, #0073bb));
+  border-block: var(--border-width-field-2365x3, 1px) solid var(--awsui-token-style-border-color-default-66120l, var(--color-border-item-selected-7104rh, #0073bb));
+  border-inline: var(--border-width-field-2365x3, 1px) solid var(--awsui-token-style-border-color-default-66120l, var(--color-border-item-selected-7104rh, #0073bb));
   padding-inline-start: var(--space-scaled-xxs-j00t0m, 4px);
   padding-inline-end: var(--space-scaled-xxs-j00t0m, 4px);
   display: flex;
   align-items: center;
-  background: var(--awsui-token-style-background-default-esndbs, var(--color-background-item-selected-dotkup, #f1faff));
+  background: var(--awsui-token-style-background-default-66120l, var(--color-background-item-selected-dotkup, #f1faff));
   border-start-start-radius: var(--border-radius-token-inline-09715z, 2px);
   border-start-end-radius: var(--border-radius-token-inline-09715z, 2px);
   border-end-start-radius: var(--border-radius-token-inline-09715z, 2px);
@@ -184,33 +184,33 @@ body[data-awsui-focus-visible=true] .awsui_token-inline_1i2wg_1tahk_114:not(#\9)
   max-inline-size: 100%;
 }
 
-.awsui_disable-padding_1i2wg_1tahk_187:not(#\9) {
+.awsui_disable-padding_1i2wg_rrrrt_187:not(#\9) {
   padding-block-start: 0;
   padding-block-end: 0;
   padding-inline-start: 0;
   padding-inline-end: 0;
 }
 
-.awsui_token-box-readonly_1i2wg_1tahk_194 > .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9),
-.awsui_token-box-disabled_1i2wg_1tahk_195 > .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9) {
+.awsui_token-box-readonly_1i2wg_rrrrt_194 > .awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9),
+.awsui_token-box-disabled_1i2wg_rrrrt_195 > .awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9) {
   cursor: initial;
   pointer-events: none;
 }
 
-.awsui_token-box-readonly_1i2wg_1tahk_194:not(#\9) {
-  border-color: var(--awsui-token-style-border-color-read-only-esndbs, var(--color-border-input-disabled-5m31k6, #eaeded));
-  background: var(--awsui-token-style-background-read-only-esndbs, var(--color-background-container-content-mjfil9, #ffffff));
+.awsui_token-box-readonly_1i2wg_rrrrt_194:not(#\9) {
+  border-color: var(--awsui-token-style-border-color-read-only-66120l, var(--color-border-input-disabled-5m31k6, #eaeded));
+  background: var(--awsui-token-style-background-read-only-66120l, var(--color-background-container-content-mjfil9, #ffffff));
 }
-.awsui_token-box-readonly_1i2wg_1tahk_194 > .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9) {
-  color: var(--awsui-token-style-dismiss-color-read-only-esndbs, var(--color-text-button-inline-icon-disabled-yeab6p, #aab7b8));
+.awsui_token-box-readonly_1i2wg_rrrrt_194 > .awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9) {
+  color: var(--awsui-token-style-dismiss-color-read-only-66120l, var(--color-text-button-inline-icon-disabled-yeab6p, #aab7b8));
 }
 
-.awsui_token-box-disabled_1i2wg_1tahk_195:not(#\9) {
+.awsui_token-box-disabled_1i2wg_rrrrt_195:not(#\9) {
   pointer-events: none;
-  border-color: var(--awsui-token-style-border-color-disabled-esndbs, var(--color-border-control-disabled-dh8zaw, #d5dbdb));
-  background: var(--awsui-token-style-background-disabled-esndbs, var(--color-background-container-content-mjfil9, #ffffff));
+  border-color: var(--awsui-token-style-border-color-disabled-66120l, var(--color-border-control-disabled-dh8zaw, #d5dbdb));
+  background: var(--awsui-token-style-background-disabled-66120l, var(--color-background-container-content-mjfil9, #ffffff));
   color: var(--color-text-disabled-ybqlwm, #aab7b8);
 }
-.awsui_token-box-disabled_1i2wg_1tahk_195 > .awsui_dismiss-button_1i2wg_1tahk_49:not(#\9) {
-  color: var(--awsui-token-style-dismiss-color-disabled-esndbs, var(--color-text-button-inline-icon-disabled-yeab6p, #aab7b8));
+.awsui_token-box-disabled_1i2wg_rrrrt_195 > .awsui_dismiss-button_1i2wg_rrrrt_49:not(#\9) {
+  color: var(--awsui-token-style-dismiss-color-disabled-66120l, var(--color-text-button-inline-icon-disabled-yeab6p, #aab7b8));
 }

package/lib/internal/template/token/styles.selectors.js

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1i2wg_1tahk_17",
-  "dismiss-button": "awsui_dismiss-button_1i2wg_1tahk_49",
-  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_1tahk_90",
-  "icon": "awsui_icon_1i2wg_1tahk_96",
-  "icon-inline": "awsui_icon-inline_1i2wg_1tahk_102",
-  "token-normal": "awsui_token-normal_1i2wg_1tahk_107",
-  "token-inline": "awsui_token-inline_1i2wg_1tahk_114",
-  "token-option-inline": "awsui_token-option-inline_1i2wg_1tahk_140",
-  "token-box": "awsui_token-box_1i2wg_1tahk_144",
-  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_1tahk_163",
-  "token-box-inline": "awsui_token-box-inline_1i2wg_1tahk_167",
-  "disable-padding": "awsui_disable-padding_1i2wg_1tahk_187",
-  "token-box-readonly": "awsui_token-box-readonly_1i2wg_1tahk_194",
-  "token-box-disabled": "awsui_token-box-disabled_1i2wg_1tahk_195"
+  "root": "awsui_root_1i2wg_rrrrt_17",
+  "dismiss-button": "awsui_dismiss-button_1i2wg_rrrrt_49",
+  "dismiss-button-inline": "awsui_dismiss-button-inline_1i2wg_rrrrt_90",
+  "icon": "awsui_icon_1i2wg_rrrrt_96",
+  "icon-inline": "awsui_icon-inline_1i2wg_rrrrt_102",
+  "token-normal": "awsui_token-normal_1i2wg_rrrrt_107",
+  "token-inline": "awsui_token-inline_1i2wg_rrrrt_114",
+  "token-option-inline": "awsui_token-option-inline_1i2wg_rrrrt_140",
+  "token-box": "awsui_token-box_1i2wg_rrrrt_144",
+  "token-box-without-dismiss": "awsui_token-box-without-dismiss_1i2wg_rrrrt_163",
+  "token-box-inline": "awsui_token-box-inline_1i2wg_rrrrt_167",
+  "disable-padding": "awsui_disable-padding_1i2wg_rrrrt_187",
+  "token-box-readonly": "awsui_token-box-readonly_1i2wg_rrrrt_194",
+  "token-box-disabled": "awsui_token-box-disabled_1i2wg_rrrrt_195"
 };
   

package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAM1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAuRtD,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEjG,eAAO,MAAM,eAAe,oHAQ3B,CAAC;AAEF,KAAK,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,GAAG;IACxD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,CAAC,IAAI,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gBAclD,CAAC"}
+{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAM1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA0RtD,KAAK,oBAAoB,GAAG,kBAAkB,CAAC,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEjG,eAAO,MAAM,eAAe,oHAQ3B,CAAC;AAEF,KAAK,gBAAgB,GAAG,mBAAmB,CAAC,WAAW,GAAG;IACxD,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,mBAAmB,CAAC,IAAI,KAAK,IAAI,CAAC;CAC5E,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,gBAclD,CAAC"}

package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.js

@@ -19,16 +19,16 @@ const LinkItem = forwardRef(({ children, external, href, target, rel, startIcon,
     const anchorTarget = target !== null && target !== void 0 ? target : (external ? '_blank' : undefined);
     const anchorRel = rel !== null && rel !== void 0 ? rel : (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);
     const role = !href ? 'button' : undefined;
-    return (React.createElement("a", { ref: ref, onClick: onClick, className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-link'], context && styles[`overflow-menu-control-${context}`]), role: role, tabIndex: 0, href: href, target: anchorTarget, rel: anchorRel, ...(testId ? { 'data-testid': testId } : {}) },
+    return (React.createElement("a", { ref: ref, onClick: onClick, className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-link'], context && styles[`overflow-menu-control-${context}`]), role: role, tabIndex: 0, href: href, target: anchorTarget, rel: anchorRel, "data-awsui-motion-trigger": "hover", ...(testId ? { 'data-testid': testId } : {}) },
         React.createElement(ListItem, { startIcon: startIcon, endIcon: endIcon }, children)));
 });
 const ButtonItem = forwardRef(({ children, startIcon, endIcon, onClick, testId }, ref) => {
-    return (React.createElement("button", { ref: ref, className: styles['overflow-menu-control'], onClick: onClick, ...(typeof testId === 'string' ? { 'data-testid': testId } : {}) },
+    return (React.createElement("button", { ref: ref, className: styles['overflow-menu-control'], onClick: onClick, "data-awsui-motion-trigger": "hover", ...(typeof testId === 'string' ? { 'data-testid': testId } : {}) },
         React.createElement(ListItem, { startIcon: startIcon, endIcon: endIcon }, children)));
 });
 const NavigationItem = forwardRef(({ startIcon, children, index, testId, ...definition }, ref) => {
     const navigate = useNavigate();
-    return (React.createElement(ButtonItem, { ref: ref, startIcon: startIcon, endIcon: React.createElement(InternalIcon, { name: "angle-right" }), testId: testId, onClick: () => navigate('dropdown-menu', {
+    return (React.createElement(ButtonItem, { ref: ref, startIcon: startIcon, endIcon: React.createElement(InternalIcon, { name: "angle-right", nativeAttributes: { 'data-awsui-motion-target': '' } }), testId: testId, onClick: () => navigate('dropdown-menu', {
             definition,
             headerText: definition.text || definition.title,
             headerSecondaryText: definition.description,
@@ -39,9 +39,9 @@ const ExpandableItem = ({ children, onItemClick, ...definition }) => {
     const [expanded, setExpanded] = useState(false);
     const headerId = useUniqueId('overflow-menu-item');
     return (React.createElement(React.Fragment, null,
-        React.createElement("button", { className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger']), onClick: () => setExpanded(value => !value), "aria-expanded": expanded },
+        React.createElement("button", { className: clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger']), onClick: () => setExpanded(value => !value), "aria-expanded": expanded, "data-awsui-motion-trigger": "hover" },
             React.createElement(ListItem, { endIcon: React.createElement("span", { className: spinWhenOpen(styles, 'icon', expanded) },
-                    React.createElement(InternalIcon, { name: "caret-down-filled" })) },
+                    React.createElement(InternalIcon, { name: "caret-down-filled", nativeAttributes: { 'data-awsui-motion-target': '' } })) },
                 React.createElement("span", { id: headerId }, children))),
         expanded && (React.createElement("ul", { className: clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu']), "aria-labelledby": headerId }, definition.items.map((item, index) => {
             const isGroup = typeof item.items !== 'undefined';

package/lib/internal/template/top-navigation/parts/overflow-menu/menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport { isLinkItem } from '../../../button-dropdown/utils/utils';\nimport InternalIcon from '../../../icon/internal';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { spinWhenOpen } from '../../../internal/styles/motion/utils';\nimport { LinkProps } from '../../../link/interfaces';\nimport { TopNavigationProps } from '../../interfaces';\nimport { useNavigate } from './router';\n\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external' | 'target' | 'rel'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n  ) => {\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n    const role = !href ? 'button' : undefined;\n\n    return (\n      <a\n        ref={ref}\n        onClick={onClick}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        role={role}\n        tabIndex={0}\n        href={href}\n        target={anchorTarget}\n        rel={anchorRel}\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onClick?: (event: React.MouseEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" />}\n        testId={testId}\n        onClick={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps &\n    ButtonDropdownProps.ItemGroup & { onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n      >\n        <ListItem\n          endIcon={\n            <span className={spinWhenOpen(styles, 'icon', expanded)}>\n              <InternalIcon name=\"caret-down-filled\" />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility & { onClose?: () => void },\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: React.MouseEvent) => {\n        if (Boolean(utility.href) && isPlainLeftClick(event)) {\n          fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);\n        }\n\n        fireCancelableEvent(utility.onClick, {}, event);\n        utility.onClose?.();\n      };\n\n      const content = (\n        <>\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </>\n      );\n\n      if (!utility.href) {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onClick={handleClick} testId={`__${index}`}>\n            {content}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          target={utility.target}\n          rel={utility.rel}\n          testId={`__${index}`}\n          onClick={handleClick}\n        >\n          {content}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const isLink = isLinkItem(item);\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={isLink ? item.href : undefined}\n      external={isLink ? item.external : undefined}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onClick={event => onItemClick(event, item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {isLink && item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number; onClose?: () => void };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {\n  onClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void;\n};\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onClick)}\n    </li>\n  );\n};\n"]}
+{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/top-navigation/parts/overflow-menu/menu-item.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, { forwardRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { ButtonDropdownProps } from '../../../button-dropdown/interfaces';\nimport { isLinkItem } from '../../../button-dropdown/utils/utils';\nimport InternalIcon from '../../../icon/internal';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../../internal/events';\nimport { spinWhenOpen } from '../../../internal/styles/motion/utils';\nimport { LinkProps } from '../../../link/interfaces';\nimport { TopNavigationProps } from '../../interfaces';\nimport { useNavigate } from './router';\n\nimport styles from '../../styles.css.js';\n\ninterface ListItemProps {\n  startIcon?: React.ReactNode;\n  endIcon?: React.ReactNode;\n  context?: 'dropdown-menu';\n  children?: React.ReactNode;\n  testId?: string;\n}\n\nconst ListItem = ({ children, startIcon, endIcon }: ListItemProps) => {\n  return (\n    <>\n      {startIcon && <span className={styles['overflow-menu-list-item-icon']}>{startIcon}</span>}\n      <span className={styles['overflow-menu-list-item-text']}>{children}</span>\n      {endIcon && endIcon}\n    </>\n  );\n};\n\ninterface LinkItemProps extends ButtonItemProps, Pick<LinkProps, 'href' | 'external' | 'target' | 'rel'> {}\n\nconst LinkItem = forwardRef(\n  (\n    { children, external, href, target, rel, startIcon, endIcon, onClick, context, testId }: LinkItemProps,\n    ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n  ) => {\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n    const role = !href ? 'button' : undefined;\n\n    return (\n      <a\n        ref={ref}\n        onClick={onClick}\n        className={clsx(\n          styles['overflow-menu-control'],\n          styles['overflow-menu-control-link'],\n          context && styles[`overflow-menu-control-${context}`]\n        )}\n        role={role}\n        tabIndex={0}\n        href={href}\n        target={anchorTarget}\n        rel={anchorRel}\n        data-awsui-motion-trigger=\"hover\"\n        {...(testId ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </a>\n    );\n  }\n);\n\ninterface ButtonItemProps extends ListItemProps {\n  onClick?: (event: React.MouseEvent) => void;\n}\n\nconst ButtonItem = forwardRef(\n  (\n    { children, startIcon, endIcon, onClick, testId }: ButtonItemProps & { testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={styles['overflow-menu-control']}\n        onClick={onClick}\n        data-awsui-motion-trigger=\"hover\"\n        {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}\n      >\n        <ListItem startIcon={startIcon} endIcon={endIcon}>\n          {children}\n        </ListItem>\n      </button>\n    );\n  }\n);\n\nconst NavigationItem = forwardRef(\n  (\n    {\n      startIcon,\n      children,\n      index,\n      testId,\n      ...definition\n    }: ButtonItemProps & TopNavigationProps.MenuDropdownUtility & { index: number; testId?: string },\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const navigate = useNavigate();\n    return (\n      <ButtonItem\n        ref={ref}\n        startIcon={startIcon}\n        endIcon={<InternalIcon name=\"angle-right\" nativeAttributes={{ 'data-awsui-motion-target': '' }} />}\n        testId={testId}\n        onClick={() =>\n          navigate('dropdown-menu', {\n            definition,\n            headerText: definition.text || definition.title,\n            headerSecondaryText: definition.description,\n            utilityIndex: index,\n          })\n        }\n      >\n        {children}\n      </ButtonItem>\n    );\n  }\n);\n\nconst ExpandableItem: React.FC<\n  ButtonItemProps &\n    ButtonDropdownProps.ItemGroup & { onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void }\n> = ({ children, onItemClick, ...definition }) => {\n  const [expanded, setExpanded] = useState(false);\n  const headerId = useUniqueId('overflow-menu-item');\n\n  return (\n    <>\n      <button\n        className={clsx(styles['overflow-menu-control'], styles['overflow-menu-control-expandable-menu-trigger'])}\n        onClick={() => setExpanded(value => !value)}\n        aria-expanded={expanded}\n        data-awsui-motion-trigger=\"hover\"\n      >\n        <ListItem\n          endIcon={\n            <span className={spinWhenOpen(styles, 'icon', expanded)}>\n              <InternalIcon name=\"caret-down-filled\" nativeAttributes={{ 'data-awsui-motion-target': '' }} />\n            </span>\n          }\n        >\n          <span id={headerId}>{children}</span>\n        </ListItem>\n      </button>\n      {expanded && (\n        <ul\n          className={clsx(styles['overflow-menu-list'], styles['overflow-menu-list-submenu'])}\n          aria-labelledby={headerId}\n        >\n          {definition.items.map((item, index) => {\n            const isGroup = typeof (item as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n            return (\n              <li\n                key={index}\n                className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-dropdown-menu`])}\n              >\n                {dropdownComponentFactory(item, isGroup, onItemClick)}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </>\n  );\n};\n\nfunction utilityComponentFactory(\n  utility: TopNavigationProps.Utility & { onClose?: () => void },\n  index: number,\n  ref?: React.Ref<HTMLAnchorElement & HTMLButtonElement>\n) {\n  const label = utility.text || utility.title;\n  const hasIcon = !!utility.iconName || !!utility.iconUrl || !!utility.iconAlt || !!utility.iconSvg;\n  const startIcon = hasIcon && (\n    <InternalIcon name={utility.iconName} url={utility.iconUrl} alt={utility.iconAlt} svg={utility.iconSvg} />\n  );\n\n  switch (utility.type) {\n    case 'button': {\n      const handleClick = (event: React.MouseEvent) => {\n        if (Boolean(utility.href) && isPlainLeftClick(event)) {\n          fireCancelableEvent(utility.onFollow, { href: utility.href, target: utility.target }, event);\n        }\n\n        fireCancelableEvent(utility.onClick, {}, event);\n        utility.onClose?.();\n      };\n\n      const content = (\n        <>\n          {label}\n          {utility.external && (\n            <>\n              {' '}\n              <span aria-label={utility.externalIconAriaLabel} role={utility.externalIconAriaLabel ? 'img' : undefined}>\n                <InternalIcon name=\"external\" size=\"normal\" />\n              </span>\n            </>\n          )}\n        </>\n      );\n\n      if (!utility.href) {\n        return (\n          <ButtonItem ref={ref} startIcon={startIcon} onClick={handleClick} testId={`__${index}`}>\n            {content}\n          </ButtonItem>\n        );\n      }\n\n      return (\n        <LinkItem\n          ref={ref}\n          startIcon={startIcon}\n          href={utility.href}\n          external={utility.external}\n          target={utility.target}\n          rel={utility.rel}\n          testId={`__${index}`}\n          onClick={handleClick}\n        >\n          {content}\n        </LinkItem>\n      );\n    }\n    case 'menu-dropdown': {\n      return (\n        <NavigationItem\n          ref={ref}\n          startIcon={startIcon}\n          index={index}\n          {...(utility as TopNavigationProps.MenuDropdownUtility)}\n          testId={`__${index}`}\n        >\n          {label}\n        </NavigationItem>\n      );\n    }\n  }\n}\n\nfunction dropdownComponentFactory(\n  item: ButtonDropdownProps.ItemOrGroup,\n  expandable: boolean,\n  onItemClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void\n) {\n  const label = item.text;\n  const hasIcon = !!item.iconName || !!item.iconUrl || !!item.iconAlt || !!item.iconSvg;\n  const isLink = isLinkItem(item);\n  const startIcon = hasIcon && (\n    <InternalIcon name={item.iconName} url={item.iconUrl} alt={item.iconAlt} svg={item.iconSvg} />\n  );\n\n  if (expandable) {\n    return (\n      <ExpandableItem {...(item as ButtonDropdownProps.ItemGroup)} onItemClick={onItemClick}>\n        {label}\n      </ExpandableItem>\n    );\n  }\n\n  return (\n    <LinkItem\n      startIcon={startIcon}\n      href={isLink ? item.href : undefined}\n      external={isLink ? item.external : undefined}\n      context=\"dropdown-menu\"\n      testId={item.id}\n      onClick={event => onItemClick(event, item as ButtonDropdownProps.Item)}\n    >\n      {label}\n      {isLink && item.external && (\n        <>\n          {' '}\n          <span aria-label={item.externalIconAriaLabel} role={item.externalIconAriaLabel ? 'img' : undefined}>\n            <InternalIcon name=\"external\" size=\"normal\" />\n          </span>\n        </>\n      )}\n    </LinkItem>\n  );\n}\n\ntype UtilityMenuItemProps = TopNavigationProps.Utility & { index: number; onClose?: () => void };\n\nexport const UtilityMenuItem = forwardRef(\n  ({ index, ...props }: UtilityMenuItemProps, ref: React.Ref<HTMLAnchorElement & HTMLButtonElement>) => {\n    return (\n      <li className={clsx(styles[`overflow-menu-list-item`], styles[`overflow-menu-list-item-utility`])}>\n        {utilityComponentFactory(props, index, ref)}\n      </li>\n    );\n  }\n);\n\ntype SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {\n  onClick: (event: React.MouseEvent, item: ButtonDropdownProps.Item) => void;\n};\n\nexport const SubmenuItem = (props: SubmenuItemProps) => {\n  const expandable = typeof (props as ButtonDropdownProps.ItemGroup).items !== 'undefined';\n\n  return (\n    <li\n      className={clsx(\n        styles[`overflow-menu-list-item`],\n        styles[`overflow-menu-list-item-submenu`],\n        expandable && styles[`overflow-menu-list-item-expandable`]\n      )}\n    >\n      {dropdownComponentFactory(props, expandable, props.onClick)}\n    </li>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.1360",
+  "version": "3.0.1362",
   "files": [
     "lib"
   ],