@cloudscape-design/components-themeable 3.0.1360 → 3.0.1362

package/lib/internal/template/segmented-control/segment.js.map

@@ -1 +1 @@
-{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.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, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../icon/internal';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport Tooltip from '../tooltip/internal.js';\nimport { SegmentedControlProps } from './interfaces';\nimport { getSegmentedControlSegmentStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isActive: boolean;\n  tabIndex: number;\n  style: SegmentedControlProps['style'];\n}\n\nexport const Segment = React.forwardRef(\n  (\n    {\n      disabled,\n      disabledReason,\n      text,\n      iconName,\n      iconAlt,\n      iconUrl,\n      iconSvg,\n      isActive,\n      onClick,\n      onKeyDown,\n      tabIndex,\n      id,\n      style,\n    }: SegmentProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const buttonRef = useRef<HTMLElement>(null);\n    const [showTooltip, setShowTooltip] = useState(false);\n    const isDisabledWithReason = disabled && !!disabledReason;\n\n    const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n    const isVisualRefresh = useVisualRefresh();\n\n    return (\n      <button\n        className={clsx(\n          styles.segment,\n          { [styles.disabled]: !!disabled },\n          { [styles.selected]: isActive },\n          { [styles.refresh]: isVisualRefresh }\n        )}\n        ref={useMergeRefs(ref, buttonRef)}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        disabled={disabled && !disabledReason}\n        aria-disabled={isDisabledWithReason ? 'true' : undefined}\n        type=\"button\"\n        tabIndex={tabIndex}\n        aria-pressed={isActive ? 'true' : 'false'}\n        aria-label={!text ? iconAlt : undefined}\n        onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        {...(isDisabledWithReason ? targetProps : {})}\n        data-testid={id}\n        style={getSegmentedControlSegmentStyles(style)}\n      >\n        {(iconName || iconUrl || iconSvg) && (\n          <InternalIcon\n            className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n            name={iconName}\n            url={iconUrl}\n            svg={iconSvg}\n            alt={iconAlt}\n            variant={disabled ? 'disabled' : 'normal'}\n          />\n        )}\n        <span>{text}</span>\n\n        {isDisabledWithReason && (\n          <>\n            {descriptionEl}\n            {showTooltip && (\n              <Tooltip\n                className={styles['disabled-reason-tooltip']}\n                getTrack={() => buttonRef.current}\n                content={disabledReason!}\n                onEscape={() => setShowTooltip(false)}\n              />\n            )}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n"]}
+{"version":3,"file":"segment.js","sourceRoot":"","sources":["../../../src/segmented-control/segment.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, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../icon/internal';\nimport useHiddenDescription from '../internal/hooks/use-hidden-description';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport Tooltip from '../tooltip/internal.js';\nimport { SegmentedControlProps } from './interfaces';\nimport { getSegmentedControlSegmentStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface SegmentProps extends SegmentedControlProps.Option {\n  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;\n  isActive: boolean;\n  tabIndex: number;\n  style: SegmentedControlProps['style'];\n}\n\nexport const Segment = React.forwardRef(\n  (\n    {\n      disabled,\n      disabledReason,\n      text,\n      iconName,\n      iconAlt,\n      iconUrl,\n      iconSvg,\n      isActive,\n      onClick,\n      onKeyDown,\n      tabIndex,\n      id,\n      style,\n    }: SegmentProps,\n    ref: React.Ref<HTMLButtonElement>\n  ) => {\n    const buttonRef = useRef<HTMLElement>(null);\n    const [showTooltip, setShowTooltip] = useState(false);\n    const isDisabledWithReason = disabled && !!disabledReason;\n\n    const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);\n    const isVisualRefresh = useVisualRefresh();\n\n    return (\n      <button\n        className={clsx(\n          styles.segment,\n          { [styles.disabled]: !!disabled },\n          { [styles.selected]: isActive },\n          { [styles.refresh]: isVisualRefresh }\n        )}\n        ref={useMergeRefs(ref, buttonRef)}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        disabled={disabled && !disabledReason}\n        aria-disabled={isDisabledWithReason ? 'true' : undefined}\n        type=\"button\"\n        tabIndex={tabIndex}\n        aria-pressed={isActive ? 'true' : 'false'}\n        aria-label={!text ? iconAlt : undefined}\n        onFocus={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onBlur={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        onMouseEnter={isDisabledWithReason ? () => setShowTooltip(true) : undefined}\n        onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}\n        {...(isDisabledWithReason ? targetProps : {})}\n        data-testid={id}\n        data-awsui-motion-trigger=\"hover\"\n        data-awsui-motion-target=\"\"\n        style={getSegmentedControlSegmentStyles(style)}\n      >\n        {(iconName || iconUrl || iconSvg) && (\n          <InternalIcon\n            className={clsx(styles.icon, text ? styles['with-text'] : styles['with-no-text'])}\n            name={iconName}\n            url={iconUrl}\n            svg={iconSvg}\n            alt={iconAlt}\n            variant={disabled ? 'disabled' : 'normal'}\n          />\n        )}\n        <span>{text}</span>\n\n        {isDisabledWithReason && (\n          <>\n            {descriptionEl}\n            {showTooltip && (\n              <Tooltip\n                className={styles['disabled-reason-tooltip']}\n                getTrack={() => buttonRef.current}\n                content={disabledReason!}\n                onEscape={() => setShowTooltip(false)}\n              />\n            )}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n"]}

package/lib/internal/template/segmented-control/styles.css.js

@@ -1,21 +1,21 @@
 
     import './styles.scoped.css';
     export default {
-  "segment": "awsui_segment_8cbea_17kep_17",
-  "refresh": "awsui_refresh_8cbea_17kep_44",
-  "disabled": "awsui_disabled_8cbea_17kep_50",
-  "selected": "awsui_selected_8cbea_17kep_107",
-  "icon": "awsui_icon_8cbea_17kep_117",
-  "with-text": "awsui_with-text_8cbea_17kep_121",
-  "with-no-text": "awsui_with-no-text_8cbea_17kep_127",
-  "root": "awsui_root_8cbea_17kep_132",
-  "segment-part": "awsui_segment-part_8cbea_17kep_164",
-  "select": "awsui_select_8cbea_17kep_107",
-  "segment-count-2": "awsui_segment-count-2_8cbea_17kep_199",
-  "segment-count-3": "awsui_segment-count-3_8cbea_17kep_203",
-  "segment-count-4": "awsui_segment-count-4_8cbea_17kep_207",
-  "segment-count-5": "awsui_segment-count-5_8cbea_17kep_211",
-  "segment-count-6": "awsui_segment-count-6_8cbea_17kep_215",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_17kep_219"
+  "segment": "awsui_segment_8cbea_17mt7_17",
+  "refresh": "awsui_refresh_8cbea_17mt7_44",
+  "disabled": "awsui_disabled_8cbea_17mt7_50",
+  "selected": "awsui_selected_8cbea_17mt7_107",
+  "icon": "awsui_icon_8cbea_17mt7_117",
+  "with-text": "awsui_with-text_8cbea_17mt7_121",
+  "with-no-text": "awsui_with-no-text_8cbea_17mt7_127",
+  "root": "awsui_root_8cbea_17mt7_132",
+  "segment-part": "awsui_segment-part_8cbea_17mt7_164",
+  "select": "awsui_select_8cbea_17mt7_107",
+  "segment-count-2": "awsui_segment-count-2_8cbea_17mt7_199",
+  "segment-count-3": "awsui_segment-count-3_8cbea_17mt7_203",
+  "segment-count-4": "awsui_segment-count-4_8cbea_17mt7_207",
+  "segment-count-5": "awsui_segment-count-5_8cbea_17mt7_211",
+  "segment-count-6": "awsui_segment-count-6_8cbea_17mt7_215",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_17mt7_219"
 };
   

package/lib/internal/template/segmented-control/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_segment_8cbea_17kep_17:not(#\9) {
+.awsui_segment_8cbea_17mt7_17:not(#\9) {
   font-size: var(--font-size-body-m-tq5a14, 14px);
   line-height: var(--line-height-body-m-5xw6xo, 22px);
   word-wrap: break-word;
@@ -26,8 +26,8 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   letter-spacing: 0.25px;
   padding-block: calc(var(--space-field-vertical-77df8s, 4px) - var(--border-width-field-2365x3, 1px));
   padding-inline: calc(var(--space-button-horizontal-ojp1rq, 20px) - var(--space-static-xxs-vzto3j, 4px));
-  background: var(--awsui-style-background-default-esndbs, var(--color-background-segment-default-6rgn11, #ffffff));
-  color: var(--awsui-style-color-default-esndbs, var(--color-text-segment-default-nk7mbi, #545b64));
+  background: var(--awsui-style-background-default-66120l, var(--color-background-segment-default-6rgn11, #ffffff));
+  color: var(--awsui-style-color-default-66120l, var(--color-text-segment-default-nk7mbi, #545b64));
   overflow: visible;
   border-start-start-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
   border-start-end-radius: calc(var(--border-radius-button-9k0hrl, 2px) - (var(--border-width-field-2365x3, 1px) + var(--border-width-button-lffd4t, 1px)));
@@ -39,26 +39,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   align-items: center;
   border-inline: none;
   border-block: none;
-  --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));
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):not(.awsui_refresh_8cbea_17kep_44) {
+.awsui_segment_8cbea_17mt7_17:not(#\9):not(.awsui_refresh_8cbea_17mt7_44) {
   block-size: calc(100% - var(--space-static-xxs-vzto3j, 4px) - 2 * var(--border-width-field-2365x3, 1px));
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):focus {
+.awsui_segment_8cbea_17mt7_17:not(#\9):focus {
   outline: none;
 }
-.awsui_segment_8cbea_17kep_17.awsui_disabled_8cbea_17kep_50:not(#\9) {
-  background: var(--awsui-style-background-disabled-esndbs, var(--color-background-segment-disabled-mjubn7, #ffffff));
-  color: var(--awsui-style-color-disabled-esndbs, var(--color-text-interactive-disabled-tuxgxq, #aab7b8));
+.awsui_segment_8cbea_17mt7_17.awsui_disabled_8cbea_17mt7_50:not(#\9) {
+  background: var(--awsui-style-background-disabled-66120l, var(--color-background-segment-disabled-mjubn7, #ffffff));
+  color: var(--awsui-style-color-disabled-66120l, var(--color-text-interactive-disabled-tuxgxq, #aab7b8));
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17kep_17:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17kep_17:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17kep_17:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17mt7_17:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -66,14 +66,14 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17kep_17:not(#\9):focus
   inset-block-start: calc(-1 * var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px));
   inline-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px) + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px));
   block-size: calc(100% + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px) + var(--space-segmented-control-focus-outline-gutter-sz9jgo, 3px));
-  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);
   z-index: 1;
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):not(:last-child)::after {
+.awsui_segment_8cbea_17mt7_17:not(#\9):not(:last-child)::after {
   content: "";
   position: absolute;
   inset-inline-end: calc(-1 * (var(--space-static-xxs-vzto3j, 4px) + 1px));
@@ -83,53 +83,53 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17kep_17:not(#\9):focus
   background: var(--color-border-segment-divider-mq01bu, #687078);
   z-index: 1;
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):not(.awsui_refresh_8cbea_17kep_44):not(:last-child)::after {
+.awsui_segment_8cbea_17mt7_17:not(#\9):not(.awsui_refresh_8cbea_17mt7_44):not(:last-child)::after {
   inset-inline-end: calc(-1 * var(--space-static-xxs-vzto3j, 4px));
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):nth-child(1) {
+.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(1) {
   grid-column: 1;
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):nth-child(2) {
+.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(2) {
   grid-column: 2;
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):nth-child(3) {
+.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(3) {
   grid-column: 3;
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):nth-child(4) {
+.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(4) {
   grid-column: 4;
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):nth-child(5) {
+.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(5) {
   grid-column: 5;
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):nth-child(6) {
+.awsui_segment_8cbea_17mt7_17:not(#\9):nth-child(6) {
   grid-column: 6;
 }
-.awsui_segment_8cbea_17kep_17.awsui_selected_8cbea_17kep_107:not(#\9) {
-  background: var(--awsui-style-background-active-esndbs, var(--color-background-segment-active-ns5rt6, #0073bb));
-  color: var(--awsui-style-color-active-esndbs, var(--color-text-segment-active-hbbf1h, #ffffff));
+.awsui_segment_8cbea_17mt7_17.awsui_selected_8cbea_17mt7_107:not(#\9) {
+  background: var(--awsui-style-background-active-66120l, var(--color-background-segment-active-ns5rt6, #0073bb));
+  color: var(--awsui-style-color-active-66120l, var(--color-text-segment-active-hbbf1h, #ffffff));
 }
-.awsui_segment_8cbea_17kep_17:not(#\9):hover:not(.awsui_selected_8cbea_17kep_107):not(.awsui_disabled_8cbea_17kep_50):not(:focus) {
-  background: var(--awsui-style-background-hover-esndbs, var(--color-background-segment-hover-el4hte, #fafafa));
-  color: var(--awsui-style-color-hover-esndbs, var(--color-text-segment-hover-qq2b2e, #16191f));
+.awsui_segment_8cbea_17mt7_17:not(#\9):hover:not(.awsui_selected_8cbea_17mt7_107):not(.awsui_disabled_8cbea_17mt7_50):not(:focus) {
+  background: var(--awsui-style-background-hover-66120l, var(--color-background-segment-hover-el4hte, #fafafa));
+  color: var(--awsui-style-color-hover-66120l, var(--color-text-segment-hover-qq2b2e, #16191f));
   cursor: pointer;
 }
 
-.awsui_icon_8cbea_17kep_117:not(#\9) {
+.awsui_icon_8cbea_17mt7_117:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_with-text_8cbea_17kep_121:not(#\9) {
+.awsui_with-text_8cbea_17mt7_121:not(#\9) {
   position: relative;
   inset-inline-start: calc(-1 * var(--space-xxs-3o1yoq, 4px));
   margin-inline-end: var(--space-xxs-3o1yoq, 4px);
 }
 
-.awsui_with-no-text_8cbea_17kep_127:not(#\9) {
+.awsui_with-no-text_8cbea_17mt7_127:not(#\9) {
   margin-inline: auto;
   inset-inline: 0;
 }
 
-.awsui_root_8cbea_17kep_132:not(#\9) {
+.awsui_root_8cbea_17mt7_132:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -161,7 +161,7 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17kep_17:not(#\9):focus
   -moz-osx-font-smoothing: auto;
 }
 
-.awsui_segment-part_8cbea_17kep_164:not(#\9) {
+.awsui_segment-part_8cbea_17mt7_164:not(#\9) {
   display: inline-grid;
   border-inline: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-ofstpm, #687078);
   border-block: solid var(--border-width-field-2365x3, 1px) var(--color-border-segment-wrapper-ofstpm, #687078);
@@ -176,46 +176,46 @@ body[data-awsui-focus-visible=true] .awsui_segment_8cbea_17kep_17:not(#\9):focus
   padding-inline: calc(var(--space-static-xxs-vzto3j, 4px) - var(--border-width-field-2365x3, 1px));
   gap: calc(var(--space-static-xxs-vzto3j, 4px) * 2 + 1px);
 }
-.awsui_segment-part_8cbea_17kep_164:not(#\9):not(.awsui_refresh_8cbea_17kep_44) {
+.awsui_segment-part_8cbea_17mt7_164:not(#\9):not(.awsui_refresh_8cbea_17mt7_44) {
   padding-inline: calc(var(--space-static-xxxs-opeihl, 2px) + var(--border-width-field-2365x3, 1px));
   padding-block: 0;
   gap: calc(var(--space-static-xxs-vzto3j, 4px) * 2 - 1px);
 }
 @media (max-width: 688px) {
-  .awsui_segment-part_8cbea_17kep_164:not(#\9) {
+  .awsui_segment-part_8cbea_17mt7_164:not(#\9) {
     display: none;
   }
 }
 
-.awsui_select_8cbea_17kep_107:not(#\9) {
+.awsui_select_8cbea_17mt7_107:not(#\9) {
   display: none;
 }
 @media (max-width: 688px) {
-  .awsui_select_8cbea_17kep_107:not(#\9) {
+  .awsui_select_8cbea_17mt7_107:not(#\9) {
     display: block;
   }
 }
 
-.awsui_segment-count-2_8cbea_17kep_199:not(#\9) {
+.awsui_segment-count-2_8cbea_17mt7_199:not(#\9) {
   grid-template-columns: repeat(2, auto);
 }
 
-.awsui_segment-count-3_8cbea_17kep_203:not(#\9) {
+.awsui_segment-count-3_8cbea_17mt7_203:not(#\9) {
   grid-template-columns: repeat(3, auto);
 }
 
-.awsui_segment-count-4_8cbea_17kep_207:not(#\9) {
+.awsui_segment-count-4_8cbea_17mt7_207:not(#\9) {
   grid-template-columns: repeat(4, auto);
 }
 
-.awsui_segment-count-5_8cbea_17kep_211:not(#\9) {
+.awsui_segment-count-5_8cbea_17mt7_211:not(#\9) {
   grid-template-columns: repeat(5, auto);
 }
 
-.awsui_segment-count-6_8cbea_17kep_215:not(#\9) {
+.awsui_segment-count-6_8cbea_17mt7_215:not(#\9) {
   grid-template-columns: repeat(6, auto);
 }
 
-.awsui_disabled-reason-tooltip_8cbea_17kep_219:not(#\9) {
+.awsui_disabled-reason-tooltip_8cbea_17mt7_219:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/segmented-control/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment": "awsui_segment_8cbea_17kep_17",
-  "refresh": "awsui_refresh_8cbea_17kep_44",
-  "disabled": "awsui_disabled_8cbea_17kep_50",
-  "selected": "awsui_selected_8cbea_17kep_107",
-  "icon": "awsui_icon_8cbea_17kep_117",
-  "with-text": "awsui_with-text_8cbea_17kep_121",
-  "with-no-text": "awsui_with-no-text_8cbea_17kep_127",
-  "root": "awsui_root_8cbea_17kep_132",
-  "segment-part": "awsui_segment-part_8cbea_17kep_164",
-  "select": "awsui_select_8cbea_17kep_107",
-  "segment-count-2": "awsui_segment-count-2_8cbea_17kep_199",
-  "segment-count-3": "awsui_segment-count-3_8cbea_17kep_203",
-  "segment-count-4": "awsui_segment-count-4_8cbea_17kep_207",
-  "segment-count-5": "awsui_segment-count-5_8cbea_17kep_211",
-  "segment-count-6": "awsui_segment-count-6_8cbea_17kep_215",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_17kep_219"
+  "segment": "awsui_segment_8cbea_17mt7_17",
+  "refresh": "awsui_refresh_8cbea_17mt7_44",
+  "disabled": "awsui_disabled_8cbea_17mt7_50",
+  "selected": "awsui_selected_8cbea_17mt7_107",
+  "icon": "awsui_icon_8cbea_17mt7_117",
+  "with-text": "awsui_with-text_8cbea_17mt7_121",
+  "with-no-text": "awsui_with-no-text_8cbea_17mt7_127",
+  "root": "awsui_root_8cbea_17mt7_132",
+  "segment-part": "awsui_segment-part_8cbea_17mt7_164",
+  "select": "awsui_select_8cbea_17mt7_107",
+  "segment-count-2": "awsui_segment-count-2_8cbea_17mt7_199",
+  "segment-count-3": "awsui_segment-count-3_8cbea_17mt7_203",
+  "segment-count-4": "awsui_segment-count-4_8cbea_17mt7_207",
+  "segment-count-5": "awsui_segment-count-5_8cbea_17mt7_211",
+  "segment-count-6": "awsui_segment-count-6_8cbea_17mt7_215",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_17mt7_219"
 };
   

package/lib/internal/template/select/parts/filter.d.ts

@@ -5,6 +5,6 @@ export interface FilterProps extends InternalInputProps {
     ref?: React.Ref<HTMLInputElement>;
     filteringType: SelectProps.FilteringType;
 }
-declare const Filter: React.ForwardRefExoticComponent<Pick<FilterProps, "style" | "disabled" | "className" | "id" | "name" | "type" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "placeholder" | "prefix" | "inputMode" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "step" | "invalid" | "ariaLabel" | "ariaDescribedby" | "__internalRootRef" | "warning" | "ariaLabelledby" | "filteringType" | "__injectAnalyticsComponentMetadata" | "__skipNativeAttributesWarnings" | "ariaRequired" | "controlId" | "suffix" | "nativeInputAttributes" | "disableBrowserAutocorrect" | "spellcheck" | "clearAriaLabel" | "__startIcon" | "__startIconVariant" | "__onStartIconClick" | "__endIcon" | "__onEndIconClick" | "__noBorderRadius" | "__onDelayedInput" | "__onBlurWithDetail" | "__inheritFormFieldProps" | "__inlineLabelText" | "__fullWidth"> & React.RefAttributes<HTMLInputElement>>;
+declare const Filter: React.ForwardRefExoticComponent<Pick<FilterProps, "style" | "disabled" | "className" | "id" | "name" | "type" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onKeyUp" | "placeholder" | "prefix" | "inputMode" | "autoFocus" | "value" | "autoComplete" | "readOnly" | "step" | "invalid" | "ariaLabel" | "ariaDescribedby" | "__internalRootRef" | "warning" | "ariaLabelledby" | "filteringType" | "__injectAnalyticsComponentMetadata" | "__skipNativeAttributesWarnings" | "ariaRequired" | "controlId" | "inlineLabelText" | "suffix" | "nativeInputAttributes" | "disableBrowserAutocorrect" | "spellcheck" | "clearAriaLabel" | "__startIcon" | "__startIconVariant" | "__onStartIconClick" | "__endIcon" | "__onEndIconClick" | "__noBorderRadius" | "__onDelayedInput" | "__onBlurWithDetail" | "__inheritFormFieldProps" | "__fullWidth"> & React.RefAttributes<HTMLInputElement>>;
 export default Filter;
 //# sourceMappingURL=filter.d.ts.map

package/lib/internal/template/select/parts/filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAsB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,aAAa,CAAC;CAC1C;AAED,QAAA,MAAM,MAAM,s2BA0BV,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"filter.d.ts","sourceRoot":"","sources":["../../../../src/select/parts/filter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAsB,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAI5C,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,aAAa,CAAC;CAC1C;AAED,QAAA,MAAM,MAAM,o2BA0BV,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/lib/internal/template/select/parts/styles.css.js

@@ -1,26 +1,26 @@
 
     import './styles.scoped.css';
     export default {
-  "placeholder": "awsui_placeholder_dwuol_bpl0z_9",
-  "disabled": "awsui_disabled_dwuol_bpl0z_14",
-  "item": "awsui_item_dwuol_bpl0z_18",
-  "checkbox": "awsui_checkbox_dwuol_bpl0z_22",
-  "option-group": "awsui_option-group_dwuol_bpl0z_31",
-  "filter": "awsui_filter_dwuol_bpl0z_35",
-  "trigger": "awsui_trigger_dwuol_bpl0z_40",
-  "layout-strut": "awsui_layout-strut_dwuol_bpl0z_46",
-  "list-bottom": "awsui_list-bottom_dwuol_bpl0z_52",
-  "selected-icon": "awsui_selected-icon_dwuol_bpl0z_56",
-  "show-label-tag": "awsui_show-label-tag_dwuol_bpl0z_61",
-  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_bpl0z_65",
-  "inline-token-list": "awsui_inline-token-list_dwuol_bpl0z_72",
-  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_bpl0z_86",
-  "inline-token-counter": "awsui_inline-token-counter_dwuol_bpl0z_92",
-  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_bpl0z_96",
-  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_bpl0z_100",
-  "inline-label": "awsui_inline-label_dwuol_bpl0z_96",
-  "inline-label-disabled": "awsui_inline-label-disabled_dwuol_bpl0z_125",
-  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_bpl0z_129",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_bpl0z_134"
+  "placeholder": "awsui_placeholder_dwuol_dkafd_9",
+  "disabled": "awsui_disabled_dwuol_dkafd_14",
+  "item": "awsui_item_dwuol_dkafd_18",
+  "checkbox": "awsui_checkbox_dwuol_dkafd_22",
+  "option-group": "awsui_option-group_dwuol_dkafd_31",
+  "filter": "awsui_filter_dwuol_dkafd_35",
+  "trigger": "awsui_trigger_dwuol_dkafd_40",
+  "layout-strut": "awsui_layout-strut_dwuol_dkafd_46",
+  "list-bottom": "awsui_list-bottom_dwuol_dkafd_52",
+  "selected-icon": "awsui_selected-icon_dwuol_dkafd_56",
+  "show-label-tag": "awsui_show-label-tag_dwuol_dkafd_61",
+  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_dkafd_65",
+  "inline-token-list": "awsui_inline-token-list_dwuol_dkafd_72",
+  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_dkafd_86",
+  "inline-token-counter": "awsui_inline-token-counter_dwuol_dkafd_92",
+  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_dkafd_96",
+  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_dkafd_100",
+  "inline-label": "awsui_inline-label_dwuol_dkafd_96",
+  "inline-label-disabled": "awsui_inline-label-disabled_dwuol_dkafd_125",
+  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_dkafd_129",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_dkafd_134"
 };
   

package/lib/internal/template/select/parts/styles.scoped.css

@@ -6,21 +6,21 @@
 /* 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_placeholder_dwuol_bpl0z_9:not(#\9) {
+.awsui_placeholder_dwuol_dkafd_9:not(#\9) {
   color: var(--color-text-input-placeholder-l6klmg, #687078);
   font-style: italic;
   -webkit-user-select: none;
           user-select: none;
 }
-.awsui_placeholder_dwuol_bpl0z_9.awsui_disabled_dwuol_bpl0z_14:not(#\9) {
+.awsui_placeholder_dwuol_dkafd_9.awsui_disabled_dwuol_dkafd_14:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-8cf69l, #687078);
 }
 
-.awsui_item_dwuol_bpl0z_18:not(#\9) {
+.awsui_item_dwuol_dkafd_18:not(#\9) {
   display: flex;
   align-items: center;
 }
-.awsui_item_dwuol_bpl0z_18 > .awsui_checkbox_dwuol_bpl0z_22:not(#\9) {
+.awsui_item_dwuol_dkafd_18 > .awsui_checkbox_dwuol_dkafd_22:not(#\9) {
   position: relative;
   min-block-size: var(--size-control-jpgj8e, 14px);
   min-inline-size: var(--size-control-jpgj8e, 14px);
@@ -29,48 +29,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline-end: var(--space-field-horizontal-anki5k, 8px);
 }
 
-.awsui_option-group_dwuol_bpl0z_31:not(#\9):not(:first-child) {
+.awsui_option-group_dwuol_dkafd_31:not(#\9):not(:first-child) {
   margin-block-start: calc(-1 * var(--border-item-width-pyfg4s, 1px));
 }
 
-.awsui_filter_dwuol_bpl0z_35:not(#\9) {
+.awsui_filter_dwuol_dkafd_35:not(#\9) {
   z-index: 4;
   flex-shrink: 0;
 }
 
-.awsui_trigger_dwuol_bpl0z_40:not(#\9) {
+.awsui_trigger_dwuol_dkafd_40:not(#\9) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.awsui_layout-strut_dwuol_bpl0z_46:not(#\9) {
+.awsui_layout-strut_dwuol_dkafd_46:not(#\9) {
   inline-size: 100%;
   position: relative;
   transform: translate3d(0, 0, 0);
 }
 
-.awsui_list-bottom_dwuol_bpl0z_52:not(#\9) {
+.awsui_list-bottom_dwuol_dkafd_52:not(#\9) {
   /* used in unit-tests */
 }
 
-.awsui_selected-icon_dwuol_bpl0z_56:not(#\9) {
+.awsui_selected-icon_dwuol_dkafd_56:not(#\9) {
   color: var(--color-item-selected-2irl78, #0073bb);
   padding-inline-start: var(--space-xs-m9b7jf, 8px);
 }
 
-.awsui_show-label-tag_dwuol_bpl0z_61 > .awsui_selected-icon_dwuol_bpl0z_56:not(#\9) {
+.awsui_show-label-tag_dwuol_dkafd_61 > .awsui_selected-icon_dwuol_dkafd_56:not(#\9) {
   padding-inline-start: var(--space-scaled-s-2crg2b, 12px);
 }
 
-.awsui_inline-token-trigger_dwuol_bpl0z_65:not(#\9) {
+.awsui_inline-token-trigger_dwuol_dkafd_65:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   column-gap: var(--space-xxs-3o1yoq, 4px);
   inline-size: 100%;
 }
 
-.awsui_inline-token-list_dwuol_bpl0z_72:not(#\9) {
+.awsui_inline-token-list_dwuol_dkafd_72:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -80,30 +80,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   mask-image: linear-gradient(270deg, transparent, white 20px, white);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_inline-token-list_dwuol_bpl0z_72:not(#\9):dir(rtl) {
+.awsui_inline-token-list_dwuol_dkafd_72:not(#\9):dir(rtl) {
   mask-image: linear-gradient(-270deg, transparent, white 20px, white);
 }
 
-.awsui_inline-token-hidden-placeholder_dwuol_bpl0z_86:not(#\9) {
+.awsui_inline-token-hidden-placeholder_dwuol_dkafd_86:not(#\9) {
   position: absolute !important;
   inset-block-start: -9999px !important;
   inset-inline-start: -9999px !important;
 }
 
-.awsui_inline-token-counter_dwuol_bpl0z_92:not(#\9) {
+.awsui_inline-token-counter_dwuol_dkafd_92:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_inline-label-trigger-wrapper_dwuol_bpl0z_96:not(#\9) {
+.awsui_inline-label-trigger-wrapper_dwuol_dkafd_96:not(#\9) {
   margin-block-start: -7px;
 }
 
-.awsui_inline-label-wrapper_dwuol_bpl0z_100:not(#\9) {
+.awsui_inline-label-wrapper_dwuol_dkafd_100:not(#\9) {
   margin-block-start: calc(var(--space-scaled-xs-pajbd1, 8px) * -1);
 }
 
-.awsui_inline-label_dwuol_bpl0z_96:not(#\9) {
-  background: linear-gradient(to bottom, var(--color-background-layout-main-y4565g, #f2f3f3), var(--color-background-input-default-1u0v1p, #ffffff));
+.awsui_inline-label_dwuol_dkafd_96:not(#\9) {
+  background: linear-gradient(to bottom, var(--awsui-inline-label-background-color-66120l, var(--color-background-layout-main-y4565g, #f2f3f3)), var(--color-background-input-default-1u0v1p, #ffffff));
   border-start-start-radius: 2px;
   border-start-end-radius: 2px;
   border-end-start-radius: 2px;
@@ -123,15 +123,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   max-inline-size: calc(100% - 2 * var(--space-field-horizontal-anki5k, 8px));
   z-index: 1;
 }
-.awsui_inline-label-disabled_dwuol_bpl0z_125:not(#\9) {
-  background: linear-gradient(to bottom, var(--color-background-layout-main-y4565g, #f2f3f3), var(--color-background-input-disabled-pyvhb1, #eaeded));
+.awsui_inline-label-disabled_dwuol_dkafd_125:not(#\9) {
+  background: linear-gradient(to bottom, var(--awsui-inline-label-background-color-66120l, var(--color-background-layout-main-y4565g, #f2f3f3)), var(--color-background-input-disabled-pyvhb1, #eaeded));
 }
 
-.awsui_inline-label-inline-tokens_dwuol_bpl0z_129:not(#\9) {
+.awsui_inline-label-inline-tokens_dwuol_dkafd_129:not(#\9) {
   padding-block-end: 0;
   transform: translateY(-1.5px);
 }
 
-.awsui_disabled-reason-tooltip_dwuol_bpl0z_134:not(#\9) {
+.awsui_disabled-reason-tooltip_dwuol_dkafd_134:not(#\9) {
   /* used in test-utils or tests */
 }

package/lib/internal/template/select/parts/styles.selectors.js

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "placeholder": "awsui_placeholder_dwuol_bpl0z_9",
-  "disabled": "awsui_disabled_dwuol_bpl0z_14",
-  "item": "awsui_item_dwuol_bpl0z_18",
-  "checkbox": "awsui_checkbox_dwuol_bpl0z_22",
-  "option-group": "awsui_option-group_dwuol_bpl0z_31",
-  "filter": "awsui_filter_dwuol_bpl0z_35",
-  "trigger": "awsui_trigger_dwuol_bpl0z_40",
-  "layout-strut": "awsui_layout-strut_dwuol_bpl0z_46",
-  "list-bottom": "awsui_list-bottom_dwuol_bpl0z_52",
-  "selected-icon": "awsui_selected-icon_dwuol_bpl0z_56",
-  "show-label-tag": "awsui_show-label-tag_dwuol_bpl0z_61",
-  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_bpl0z_65",
-  "inline-token-list": "awsui_inline-token-list_dwuol_bpl0z_72",
-  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_bpl0z_86",
-  "inline-token-counter": "awsui_inline-token-counter_dwuol_bpl0z_92",
-  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_bpl0z_96",
-  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_bpl0z_100",
-  "inline-label": "awsui_inline-label_dwuol_bpl0z_96",
-  "inline-label-disabled": "awsui_inline-label-disabled_dwuol_bpl0z_125",
-  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_bpl0z_129",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_bpl0z_134"
+  "placeholder": "awsui_placeholder_dwuol_dkafd_9",
+  "disabled": "awsui_disabled_dwuol_dkafd_14",
+  "item": "awsui_item_dwuol_dkafd_18",
+  "checkbox": "awsui_checkbox_dwuol_dkafd_22",
+  "option-group": "awsui_option-group_dwuol_dkafd_31",
+  "filter": "awsui_filter_dwuol_dkafd_35",
+  "trigger": "awsui_trigger_dwuol_dkafd_40",
+  "layout-strut": "awsui_layout-strut_dwuol_dkafd_46",
+  "list-bottom": "awsui_list-bottom_dwuol_dkafd_52",
+  "selected-icon": "awsui_selected-icon_dwuol_dkafd_56",
+  "show-label-tag": "awsui_show-label-tag_dwuol_dkafd_61",
+  "inline-token-trigger": "awsui_inline-token-trigger_dwuol_dkafd_65",
+  "inline-token-list": "awsui_inline-token-list_dwuol_dkafd_72",
+  "inline-token-hidden-placeholder": "awsui_inline-token-hidden-placeholder_dwuol_dkafd_86",
+  "inline-token-counter": "awsui_inline-token-counter_dwuol_dkafd_92",
+  "inline-label-trigger-wrapper": "awsui_inline-label-trigger-wrapper_dwuol_dkafd_96",
+  "inline-label-wrapper": "awsui_inline-label-wrapper_dwuol_dkafd_100",
+  "inline-label": "awsui_inline-label_dwuol_dkafd_96",
+  "inline-label-disabled": "awsui_inline-label-disabled_dwuol_dkafd_125",
+  "inline-label-inline-tokens": "awsui_inline-label-inline-tokens_dwuol_dkafd_129",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_dwuol_dkafd_134"
 };
   

package/lib/internal/template/side-navigation/parts.js

@@ -161,7 +161,7 @@ const ItemIcon = React.forwardRef(function ItemIcon({ icon, collapsed, className
     if (!icon) {
         return null;
     }
-    return (React.createElement("span", { ref: ref, className: clsx(styles['item-icon'], testUtilStyles['item-icon'], collapsed && styles['item-icon--collapsed'], className), ...rest }, icon));
+    return (React.createElement("span", { ref: ref, className: clsx(styles['item-icon'], testUtilStyles['item-icon'], collapsed && styles['item-icon--collapsed'], className), "data-awsui-motion-target": "", ...rest }, icon));
 });
 // Manages a tooltip that shows the item's text label on focus or hover.
 // Used in the collapsed state, where the visible labels are hidden, to give
@@ -231,13 +231,13 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
     const internalLink = (React.createElement("a", { ref: mergedRef, href: definition.href, className: clsx(styles.link, {
             [styles['link-active']]: isActive,
             [styles['link--collapsed']]: collapsed,
-        }), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-current": definition.href === activeHref ? 'page' : undefined, "aria-label": collapsed ? definition.text : undefined, onClick: onClick, ...(collapsed ? collapsedTooltip.triggerProps : {}), ...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata) },
+        }), target: definition.external ? '_blank' : undefined, rel: definition.external ? 'noopener noreferrer' : undefined, "aria-current": definition.href === activeHref ? 'page' : undefined, "aria-label": collapsed ? definition.text : undefined, ...(definition.external || definition.icon ? { 'data-awsui-motion-trigger': 'hover' } : {}), onClick: onClick, ...(collapsed ? collapsedTooltip.triggerProps : {}), ...getAnalyticsMetadataAttribute(clickActionAnalyticsMetadata) },
         React.createElement(ItemIcon, { icon: definition.icon, collapsed: collapsed, "aria-hidden": collapsed ? true : undefined }),
         React.createElement("span", { className: clsx(styles['link-text-wrapper'], collapsed && styles['link-text-wrapper--collapsed']), "aria-hidden": collapsed ? true : undefined },
             React.createElement("span", { className: clsx(styles['link-text-wrapper-content']) },
                 React.createElement("span", { className: analyticsSelectors['link-text'] }, definition.text),
                 definition.external && (React.createElement("span", { "aria-label": renderedExternalIconAriaLabel, role: renderedExternalIconAriaLabel ? 'img' : undefined },
-                    React.createElement(InternalIcon, { name: "external", className: styles['external-icon'] }))))),
+                    React.createElement(InternalIcon, { name: "external", className: styles['external-icon'], nativeAttributes: { 'data-awsui-motion-target': '' } }))))),
         collapsed && collapsedTooltip.tooltip));
     return showInfo ? (React.createElement("div", { className: styles['list-item--link-with-info'] },
         internalLink,