diff --git a/src/action-card/internal.tsx b/src/action-card/internal.tsx
index cca176a92f..3b7b8206b1 100644
--- a/src/action-card/internal.tsx
+++ b/src/action-card/internal.tsx
@@ -79,7 +79,7 @@ const InternalActionCard = React.forwardRef(
     const headerRowEmpty = !header && !description;
 
     const iconWrapper = icon && (
-      <div className={clsx(styles.icon, testStyles.icon)} aria-hidden="true">
+      <div className={clsx(styles.icon, testStyles.icon)} aria-hidden="true" data-awsui-motion-target="">
         {icon}
       </div>
     );
@@ -104,6 +104,9 @@ const InternalActionCard = React.forwardRef(
       onClick: handleButtonClick,
       'aria-describedby': ariaDescribedby,
       'aria-disabled': disabled || undefined,
+      // The hover region is the whole card (see the root element); focusing
+      // the inner control also plays the motion.
+      'data-awsui-motion-trigger': 'focus',
     };
 
     // <a>-tag specific props
@@ -237,6 +240,7 @@ const InternalActionCard = React.forwardRef(
           baseProps.className
         )}
         aria-disabled={disabled || undefined}
+        data-awsui-motion-trigger="hover"
       >
         {standaloneButton}
         {contentElement}
diff --git a/src/app-layout/toggles/index.tsx b/src/app-layout/toggles/index.tsx
index fc94ebd1aa..f94358b4cb 100644
--- a/src/app-layout/toggles/index.tsx
+++ b/src/app-layout/toggles/index.tsx
@@ -63,6 +63,8 @@ export const ToggleButton = React.forwardRef(
         aria-haspopup={ariaExpanded ? undefined : true}
         aria-controls={ariaControls}
         data-testid={testId}
+        data-awsui-motion-trigger="hover"
+        data-awsui-motion-target=""
       >
         <InternalIcon svg={iconSvg} name={iconName} badge={badge} />
       </button>
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx
index 495eafe2a8..2077dbc816 100644
--- a/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx
+++ b/src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx
@@ -241,6 +241,8 @@ function TriggerButton(
         type="button"
         data-testid={testId}
         data-shift-focus="awsui-layout-drawer-trigger"
+        data-awsui-motion-trigger="hover"
+        data-awsui-motion-target=""
         {...getAnalyticsMetadataAttribute(triggerEventMetadata)}
       >
         {customSvg ?? ((iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />)}
diff --git a/src/app-layout/visual-refresh/trigger-button.tsx b/src/app-layout/visual-refresh/trigger-button.tsx
index b8b9e1cfd9..8b37f093ff 100644
--- a/src/app-layout/visual-refresh/trigger-button.tsx
+++ b/src/app-layout/visual-refresh/trigger-button.tsx
@@ -96,6 +96,8 @@ function TriggerButton(
             ref={ref as Ref<HTMLButtonElement>}
             type="button"
             data-testid={testId}
+            data-awsui-motion-trigger="hover"
+            data-awsui-motion-target=""
           >
             <span className={clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles']))}>
               {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}
diff --git a/src/breadcrumb-group/all-items-dropdown.tsx b/src/breadcrumb-group/all-items-dropdown.tsx
index 9a326a7695..ea5d03193d 100644
--- a/src/breadcrumb-group/all-items-dropdown.tsx
+++ b/src/breadcrumb-group/all-items-dropdown.tsx
@@ -77,8 +77,13 @@ const getDropdownTrigger =
         aria-haspopup={true}
         aria-label={ariaLabel}
         formAction="none"
+        data-awsui-motion-trigger="hover"
       >
-        <InternalIcon name="caret-down-filled" className={spinWhenOpen(styles, 'button-icon', isOpen)} />
+        <InternalIcon
+          name="caret-down-filled"
+          className={spinWhenOpen(styles, 'button-icon', isOpen)}
+          nativeAttributes={{ 'data-awsui-motion-target': '' }}
+        />
         <span>{currentPage}</span>
       </button>
     );
diff --git a/src/button-dropdown/category-elements/expandable-category-element.tsx b/src/button-dropdown/category-elements/expandable-category-element.tsx
index 11e87689cd..af89703dcc 100644
--- a/src/button-dropdown/category-elements/expandable-category-element.tsx
+++ b/src/button-dropdown/category-elements/expandable-category-element.tsx
@@ -110,6 +110,7 @@ const ExpandableCategoryElement = ({
       // tabindex=-1 so we can focus them when necessary.
       tabIndex={filteringEnabled ? -1 : highlighted ? 0 : -1}
       ref={triggerRef}
+      data-awsui-motion-trigger="hover"
       {...getMenuItemProps({ parent: true, expanded, disabled })}
       {...(isDisabledWithReason ? targetProps : {})}
       {...getAnalyticsMetadataAttribute(
@@ -139,6 +140,7 @@ const ExpandableCategoryElement = ({
             <InternalIcon
               name={isOneTheme ? 'angle-down' : 'caret-down-filled'}
               size={isOneTheme ? 'x-small' : 'normal'}
+              nativeAttributes={{ 'data-awsui-motion-target': '' }}
             />
           </span>
         </>
diff --git a/src/button/__tests__/internal.test.tsx b/src/button/__tests__/internal.test.tsx
index 15e16f2f10..d627bb5f80 100644
--- a/src/button/__tests__/internal.test.tsx
+++ b/src/button/__tests__/internal.test.tsx
@@ -17,6 +17,28 @@ test('supports __iconClass property', () => {
   expect(container.querySelector(`button .${styles.icon}`)).toHaveClass('example-class');
 });
 
+describe('hover-motion attributes', () => {
+  test('the rendered button is trigger and target, so consumer-provided icons animate too', () => {
+    const { container } = render(<InternalButton iconName="settings">Label</InternalButton>);
+    const button = container.querySelector('button')!;
+    expect(button).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+    expect(button).toHaveAttribute('data-awsui-motion-target', '');
+    expect(button.querySelector(`.${styles.icon}`)).toBeTruthy();
+  });
+
+  test('the rendered anchor (link button) is trigger and target', () => {
+    const { container } = render(
+      <InternalButton href="#" iconName="settings">
+        Label
+      </InternalButton>
+    );
+    const anchor = container.querySelector('a')!;
+    expect(anchor).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+    expect(anchor).toHaveAttribute('data-awsui-motion-target', '');
+    expect(anchor.querySelector(`.${styles.icon}`)).toBeTruthy();
+  });
+});
+
 test('sets disabled and does not set aria-disabled, when __focusable is not provided', () => {
   const { container } = render(<InternalButton disabled={true} />);
 
diff --git a/src/button/internal.tsx b/src/button/internal.tsx
index 5696aa7adc..1cc605fc8f 100644
--- a/src/button/internal.tsx
+++ b/src/button/internal.tsx
@@ -236,6 +236,8 @@ export const InternalButton = React.forwardRef(
       title: __title ?? ariaLabel,
       className: buttonClass,
       onClick: handleClick,
+      'data-awsui-motion-trigger': 'hover',
+      'data-awsui-motion-target': '',
       [DATA_ATTR_FUNNEL_VALUE]: uniqueId,
       ...getAnalyticsMetadataAttribute(analyticsMetadata),
       ...getAnalyticsLabelAttribute(shouldHaveContent ? `.${analyticsSelectors.label}` : ''),
diff --git a/src/code-editor/tab-button.tsx b/src/code-editor/tab-button.tsx
index b408b1f9a8..a881196607 100644
--- a/src/code-editor/tab-button.tsx
+++ b/src/code-editor/tab-button.tsx
@@ -69,6 +69,8 @@ export const TabButton = React.forwardRef(
         aria-controls={paneId}
         aria-hidden={ariaHidden}
         aria-label={ariaLabel}
+        data-awsui-motion-trigger="hover"
+        data-awsui-motion-target=""
       >
         <InternalIcon name={iconName} />
         <span className={styles.count}>{count}</span>
diff --git a/src/expandable-section/__tests__/expandable-section.test.tsx b/src/expandable-section/__tests__/expandable-section.test.tsx
index 3c240ba9bf..3fadd5a1ef 100644
--- a/src/expandable-section/__tests__/expandable-section.test.tsx
+++ b/src/expandable-section/__tests__/expandable-section.test.tsx
@@ -880,4 +880,68 @@ describe('__expandIconPosition', () => {
       expect(tags).toEqual(['A', 'BUTTON']);
     });
   });
+
+  describe('hover-motion trigger/target attributes on the caret', () => {
+    // The same `icon` element is used across every header shape, so the target attribute must
+    // land on it regardless of variant/position — this is the "target closest to the icon" rule.
+    test.each<ExpandableSectionProps.Variant>(['default', 'footer', 'container', 'navigation', 'stacked', 'inline'])(
+      'the caret icon always carries data-awsui-motion-target for the "%s" variant',
+      variant => {
+        const wrapper = renderExpandableSection({ variant, headerText: 'Test Header' });
+        const targets = wrapper.getElement().querySelectorAll('[data-awsui-motion-target]');
+        expect(targets.length).toBeGreaterThan(0);
+      }
+    );
+
+    test('a real caret button (navigation variant) is itself the hover trigger, containing the target', () => {
+      const wrapper = renderExpandableSection({ variant: 'navigation', headerText: 'Test Header' });
+      const button = wrapper.getElement().querySelector('button')!;
+      expect(button).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+      expect(button.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+    });
+
+    test('default variant with headerText: the whole clickable row is the hover trigger and contains the target', () => {
+      const wrapper = renderExpandableSection({ variant: 'default', headerText: 'Test Header' });
+      const triggers = wrapper.getElement().querySelectorAll('[data-awsui-motion-trigger="hover"]');
+      expect(triggers.length).toBeGreaterThan(0);
+      const withTarget = Array.from(triggers).some(trigger => trigger.querySelector('[data-awsui-motion-target]'));
+      expect(withTarget).toBe(true);
+    });
+
+    test('restricted clickable area (headerActions present): the trigger narrows to the header button, still containing the target', () => {
+      const wrapper = renderExpandableSection({
+        variant: 'default',
+        headerText: 'Test Header',
+        headerActions: <Button>Action</Button>,
+      });
+      const headerButton = wrapper.getElement().querySelector('[role="button"]')!;
+      expect(headerButton).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+      expect(headerButton.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+
+      // The outer row must NOT also claim the trigger — the click handler moved to the header button only.
+      const outerRow = wrapper.getElement();
+      expect(outerRow).not.toHaveAttribute('data-awsui-motion-trigger');
+    });
+
+    test('outside-icon case (container variant, end position): the standalone caret button is its own independent trigger', () => {
+      const { container } = render(
+        <InternalExpandableSection variant="container" headerText="Test Header" __expandIconPosition="end">
+          Content
+        </InternalExpandableSection>
+      );
+      const wrapper = createWrapper(container).findExpandableSection()!;
+      const captions = wrapper.getElement().querySelectorAll('button[data-awsui-motion-trigger="hover"]');
+      expect(captions.length).toBeGreaterThan(0);
+      for (const button of Array.from(captions)) {
+        expect(button.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+      }
+    });
+
+    test('navigation variant: the whole header row is also a hover trigger, so hovering the adjacent link plays the caret motion', () => {
+      const wrapper = renderExpandableSection({ variant: 'navigation', headerText: 'Test Header' });
+      const headerRow = wrapper.getElement().querySelector('[data-awsui-motion-trigger="hover"]:not(button)')!;
+      expect(headerRow).toBeTruthy();
+      expect(headerRow.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+    });
+  });
 });
diff --git a/src/expandable-section/expandable-section-header.tsx b/src/expandable-section/expandable-section-header.tsx
index 09245de032..41a5453fea 100644
--- a/src/expandable-section/expandable-section-header.tsx
+++ b/src/expandable-section/expandable-section-header.tsx
@@ -69,6 +69,7 @@ const ExpandIconButton = ({
       aria-labelledby={ariaLabelledBy}
       aria-controls={ariaControls}
       aria-expanded={expanded}
+      data-awsui-motion-trigger="hover"
       onClick={
         stopPropagation
           ? event => {
@@ -169,6 +170,7 @@ const ExpandableDeprecatedHeader = ({
       aria-label={ariaLabel}
       aria-controls={ariaControls}
       aria-expanded={expanded}
+      data-awsui-motion-trigger="hover"
       {...getExpandActionAnalyticsMetadataAttribute(expanded)}
     >
       <div className={clsx(styles['icon-container'], styles[`icon-container-${variant}`])}>{icon}</div>
@@ -210,6 +212,7 @@ const ExpandableNavigationHeader = ({
         analyticsSelectors['header-label'],
         expandIconPosition === 'end' && styles['header-icon-end']
       )}
+      data-awsui-motion-trigger="hover"
     >
       {expandIconPosition === 'end' ? (
         <>
@@ -273,6 +276,13 @@ const ExpandableHeaderTextWrapper = ({
   // For all other cases, make the entire header clickable for backwards compatibility.
   const wrapperListeners = !headerButtonListeners && !headingTagListeners ? listeners : undefined;
 
+  // The hover-motion trigger follows whichever element actually owns the click handler above —
+  // that element is the real interactive surface, so it's also the sane hover boundary for the caret.
+  const motionTriggerAttribute = { 'data-awsui-motion-trigger': 'hover' } as const;
+  const headerButtonMotionTrigger = headerButtonListeners ? motionTriggerAttribute : undefined;
+  const headingTagMotionTrigger = headingTagListeners ? motionTriggerAttribute : undefined;
+  const wrapperMotionTrigger = wrapperListeners ? motionTriggerAttribute : undefined;
+
   // Standalone caret button — used when the icon is rendered OUTSIDE the headerButton
   // (end-position with container or actions). Must be its own <button> for accessibility.
   const expandButton = (
@@ -325,6 +335,7 @@ const ExpandableHeaderTextWrapper = ({
       aria-controls={ariaControls}
       aria-expanded={expanded}
       {...headerButtonListeners}
+      {...headerButtonMotionTrigger}
       {...(headerButtonListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}
     >
       {renderIconOutsideHeader ? (
@@ -347,6 +358,7 @@ const ExpandableHeaderTextWrapper = ({
     <div
       className={clsx(className, wrapperListeners && styles['click-target'], iconAtEnd && styles['header-icon-end'])}
       {...wrapperListeners}
+      {...wrapperMotionTrigger}
       {...(wrapperListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}
     >
       {isContainer ? (
@@ -370,6 +382,7 @@ const ExpandableHeaderTextWrapper = ({
             <HeadingTag
               className={clsx(styles['header-wrapper'], headingTagListeners && styles['click-target'])}
               {...headingTagListeners}
+              {...headingTagMotionTrigger}
               {...(headingTagListeners ? getExpandActionAnalyticsMetadataAttribute(expanded) : {})}
             >
               {headerButton}
@@ -412,6 +425,7 @@ export const ExpandableSectionHeader = ({
       size={isThemeActive(Theme.OneTheme) ? 'x-small' : variant === 'container' ? 'medium' : 'normal'}
       className={clsx(styles.icon, expanded && styles.expanded)}
       name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}
+      nativeAttributes={{ 'data-awsui-motion-target': '' }}
     />
   );
   const defaultHeaderProps = {
diff --git a/src/flashbar/__tests__/collapsible.test.tsx b/src/flashbar/__tests__/collapsible.test.tsx
index 9dac776908..ee7ddf4224 100644
--- a/src/flashbar/__tests__/collapsible.test.tsx
+++ b/src/flashbar/__tests__/collapsible.test.tsx
@@ -288,6 +288,16 @@ describe('Collapsible Flashbar', () => {
         expect(button).toHaveAttribute('aria-controls', listId);
       });
 
+      it('hovering the notification bar or focusing the toggle button plays the caret motion', () => {
+        const flashbar = renderFlashbar();
+        const button = flashbar.findToggleButton()!.getElement();
+        const bar = button.closest('[data-awsui-motion-trigger~="hover"]');
+
+        expect(bar).toBeTruthy();
+        expect(button).toHaveAttribute('data-awsui-motion-trigger', 'focus');
+        expect(button.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+      });
+
       it('applies aria-describedby attribute to the list, referencing the item counter', () => {
         const flashbar = renderFlashbar();
         const list = findList(flashbar)!;
diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx
index 8e045c3fb4..71e408913e 100644
--- a/src/flashbar/collapsible-flashbar.tsx
+++ b/src/flashbar/collapsible-flashbar.tsx
@@ -356,6 +356,7 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Inte
           onClick={toggleCollapseExpand}
           ref={notificationBarRef}
           style={getNotificationBarStyles(style)}
+          data-awsui-motion-trigger="hover"
           {...getAnalyticsMetadataAttribute({
             action: !isFlashbarStackExpanded ? 'expand' : 'collapse',
             detail: {
@@ -389,8 +390,14 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }: Inte
             aria-expanded={isFlashbarStackExpanded}
             aria-label={notificationBarAriaLabel}
             className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}
+            data-awsui-motion-trigger="focus"
           >
-            <InternalIcon className={styles.icon} size="normal" name="angle-down" />
+            <InternalIcon
+              className={styles.icon}
+              size="normal"
+              name="angle-down"
+              nativeAttributes={{ 'data-awsui-motion-target': '' }}
+            />
           </button>
         </div>
       )}
diff --git a/src/internal/components/button-trigger/index.tsx b/src/internal/components/button-trigger/index.tsx
index abc46867bc..462a77c0fe 100644
--- a/src/internal/components/button-trigger/index.tsx
+++ b/src/internal/components/button-trigger/index.tsx
@@ -128,6 +128,7 @@ const ButtonTrigger = (
     <button
       ref={ref}
       {...attributes}
+      data-awsui-motion-trigger="hover"
       {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}
     >
       {children}
@@ -137,6 +138,7 @@ const ButtonTrigger = (
             name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}
             size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal'}
             variant={disabled || readOnly ? 'disabled' : 'normal'}
+            nativeAttributes={{ 'data-awsui-motion-target': '' }}
           />
         </span>
       )}
diff --git a/src/internal/components/drag-handle/button.tsx b/src/internal/components/drag-handle/button.tsx
index 03da884862..5714e8fc45 100644
--- a/src/internal/components/drag-handle/button.tsx
+++ b/src/internal/components/drag-handle/button.tsx
@@ -80,6 +80,9 @@ const DragHandleButton = forwardRef(
         onPointerDown={onPointerDown}
         onClick={onClick}
         onKeyDown={onKeyDown}
+        {...(variant === 'drag-indicator'
+          ? { 'data-awsui-motion-trigger': 'hover', 'data-awsui-motion-target': '' }
+          : {})}
       >
         {/* ensure that events happen on the parent div, not the icon */}
         <div className={styles['prevent-pointer']}>
diff --git a/src/internal/components/expand-toggle-button/index.tsx b/src/internal/components/expand-toggle-button/index.tsx
index 6aa2953247..0d7bf9d4e5 100644
--- a/src/internal/components/expand-toggle-button/index.tsx
+++ b/src/internal/components/expand-toggle-button/index.tsx
@@ -39,6 +39,8 @@ export function ExpandToggleButton({
       aria-expanded={isExpanded}
       className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}
       onClick={onExpandableItemToggle}
+      data-awsui-motion-trigger="hover"
+      data-awsui-motion-target=""
     >
       {customIcon ?? (
         <InternalIcon
diff --git a/src/internal/components/menu-dropdown/index.tsx b/src/internal/components/menu-dropdown/index.tsx
index 18477397cc..35cd37270a 100644
--- a/src/internal/components/menu-dropdown/index.tsx
+++ b/src/internal/components/menu-dropdown/index.tsx
@@ -51,6 +51,8 @@ export const ButtonTrigger = React.forwardRef(
           event.preventDefault();
           onClick?.();
         }}
+        data-awsui-motion-trigger="hover"
+        data-awsui-motion-target=""
       >
         {hasIcon && (
           <InternalIcon
diff --git a/src/internal/components/token-list/token-limit-toggle.tsx b/src/internal/components/token-list/token-limit-toggle.tsx
index 01b2ef090e..3c1d0408b6 100644
--- a/src/internal/components/token-list/token-limit-toggle.tsx
+++ b/src/internal/components/token-list/token-limit-toggle.tsx
@@ -64,9 +64,13 @@ export default function TokenLimitToggle({
       aria-controls={controlId}
       aria-expanded={expanded}
       aria-label={ariaLabel}
+      data-awsui-motion-trigger="hover"
       {...getAnalyticsMetadataAttribute(analyticsMetadata)}
     >
-      <InternalIcon name={expanded ? 'treeview-collapse' : 'treeview-expand'} />
+      <InternalIcon
+        name={expanded ? 'treeview-collapse' : 'treeview-expand'}
+        nativeAttributes={{ 'data-awsui-motion-target': '' }}
+      />
       <span className={styles.description}>{description}</span>
     </button>
   );
diff --git a/src/link/__tests__/index.test.tsx b/src/link/__tests__/index.test.tsx
index f033577bf9..e2f404f153 100644
--- a/src/link/__tests__/index.test.tsx
+++ b/src/link/__tests__/index.test.tsx
@@ -47,6 +47,19 @@ describe('Link component', () => {
     expect(createWrapper(wrapper.getElement()).find('[aria-label="External link"]')).toBeTruthy();
   });
 
+  describe('icon hover motion', () => {
+    test('every link is hover-motion trigger and target', () => {
+      const wrapper = renderLink({ href: '#', children: 'Internal' });
+      expect(wrapper.getElement()).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+      expect(wrapper.getElement()).toHaveAttribute('data-awsui-motion-target', '');
+    });
+
+    test('the external icon sits inside the link and needs no own target', () => {
+      const wrapper = renderLink({ href: '#', external: true, children: 'External' });
+      expect(wrapper.getElement().querySelector(`.${styles['icon-wrapper']}`)).toBeTruthy();
+    });
+  });
+
   describe('i18n', () => {
     test('supports providing externalIconAriaLabel through i18n provider', () => {
       const { container } = render(
diff --git a/src/link/internal.tsx b/src/link/internal.tsx
index 74f4bfe670..2aa0a80fec 100644
--- a/src/link/internal.tsx
+++ b/src/link/internal.tsx
@@ -182,6 +182,8 @@ const InternalLink = React.forwardRef(
       'aria-label': ariaLabel,
       'aria-labelledby': undefined as string | undefined,
       [DATA_ATTR_FUNNEL_VALUE]: uniqueId,
+      'data-awsui-motion-trigger': 'hover',
+      'data-awsui-motion-target': '',
     };
 
     if (variant === 'info' && infoLinkLabelFromContext && !ariaLabel) {
diff --git a/src/pagination/internal.tsx b/src/pagination/internal.tsx
index 413b01b2d3..f83debe7c5 100644
--- a/src/pagination/internal.tsx
+++ b/src/pagination/internal.tsx
@@ -70,6 +70,7 @@ function PageButton({
         tabIndex={disabled ? -1 : 0}
         onClick={handleClick}
         aria-current={isCurrent}
+        data-awsui-motion-trigger="hover"
         {...(disabled
           ? {}
           : getAnalyticsMetadataAttribute({
@@ -259,7 +260,11 @@ const InternalPagination = React.forwardRef(
                 },
               }))}
         >
-          <InternalIcon name="angle-left" variant={disabled ? 'disabled' : 'normal'} />
+          <InternalIcon
+            name="angle-left"
+            variant={disabled ? 'disabled' : 'normal'}
+            nativeAttributes={{ 'data-awsui-motion-target': '' }}
+          />
         </PageButton>
         {pagesVariant === 'compact' ? (
           <li aria-disabled={disabled ? true : undefined} className={styles['pages-compact']}>
@@ -317,7 +322,11 @@ const InternalPagination = React.forwardRef(
                 },
               }))}
         >
-          <InternalIcon name="angle-right" variant={disabled ? 'disabled' : 'normal'} />
+          <InternalIcon
+            name="angle-right"
+            variant={disabled ? 'disabled' : 'normal'}
+            nativeAttributes={{ 'data-awsui-motion-target': '' }}
+          />
         </PageButton>
         {jumpToPage && (
           <li className={styles['jump-to-page']}>
diff --git a/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx b/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx
index aa6cd76841..9e7c1c86c4 100644
--- a/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx
+++ b/src/property-filter/filtering-token/__tests__/filtering-token.test.tsx
@@ -84,6 +84,13 @@ test('renders a single token as role="group" with token ARIA label and dismiss b
   expect(token.findTokenOperation()!).toBeNull();
 });
 
+test('the dismiss button is a hover-motion trigger and its close icon carries the motion target', () => {
+  const token = renderToken({ tokens: [token1] });
+  const removeButton = token.findRemoveButton()!.getElement();
+  expect(removeButton).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+  expect(removeButton.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+});
+
 test('renders 3 tokens as role="group" with group ARIA label no dismiss button', () => {
   const token = renderToken({ tokens: [token1, token2, token3], groupAriaLabel: 'filter group with 3 tokens' });
   expect(token.getElement()).toHaveAttribute('role', 'group');
diff --git a/src/property-filter/filtering-token/index.tsx b/src/property-filter/filtering-token/index.tsx
index a631178e3d..5e0cabb6d6 100644
--- a/src/property-filter/filtering-token/index.tsx
+++ b/src/property-filter/filtering-token/index.tsx
@@ -340,9 +340,10 @@ function TokenDismissButton({
       aria-label={ariaLabel}
       onClick={onClick}
       disabled={disabled}
+      data-awsui-motion-trigger="hover"
       {...getAnalyticsMetadataAttribute({ action: 'dismiss' })}
     >
-      <InternalIcon name="close" />
+      <InternalIcon name="close" nativeAttributes={{ 'data-awsui-motion-target': '' }} />
     </button>
   );
 }
@@ -354,8 +355,9 @@ function TokenEditButton({ ariaLabel, disabled }: { ariaLabel: string; disabled?
       className={clsx(styles['edit-button'], testUtilStyles['filtering-token-edit-button'])}
       aria-label={ariaLabel}
       disabled={disabled}
+      data-awsui-motion-trigger="hover"
     >
-      <InternalIcon name="edit" />
+      <InternalIcon name="edit" nativeAttributes={{ 'data-awsui-motion-target': '' }} />
     </button>
   );
 }
diff --git a/src/segmented-control/segment.tsx b/src/segmented-control/segment.tsx
index 035204c0fa..2388bdc39b 100644
--- a/src/segmented-control/segment.tsx
+++ b/src/segmented-control/segment.tsx
@@ -71,6 +71,8 @@ export const Segment = React.forwardRef(
         onMouseLeave={isDisabledWithReason ? () => setShowTooltip(false) : undefined}
         {...(isDisabledWithReason ? targetProps : {})}
         data-testid={id}
+        data-awsui-motion-trigger="hover"
+        data-awsui-motion-target=""
         style={getSegmentedControlSegmentStyles(style)}
       >
         {(iconName || iconUrl || iconSvg) && (
diff --git a/src/select/__tests__/trigger.test.tsx b/src/select/__tests__/trigger.test.tsx
index 571ae3d19c..e8f557a942 100644
--- a/src/select/__tests__/trigger.test.tsx
+++ b/src/select/__tests__/trigger.test.tsx
@@ -34,6 +34,12 @@ const defaultProps: any = {
 };
 
 describe('Trigger component', () => {
+  test('is a hover-motion trigger and its caret icon carries the motion target', () => {
+    const wrapper = renderComponent(defaultProps);
+    expect(wrapper.getElement()).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+    expect(wrapper.getElement().querySelector('[data-awsui-motion-target]')).toBeTruthy();
+  });
+
   describe('Empty state', () => {
     const wrapper = renderComponent(defaultProps);
     const buttonTriggerEl = wrapper.getElement();
diff --git a/src/side-navigation/__tests__/side-navigation.test.tsx b/src/side-navigation/__tests__/side-navigation.test.tsx
index ec35b3a89b..bb2020dcd9 100644
--- a/src/side-navigation/__tests__/side-navigation.test.tsx
+++ b/src/side-navigation/__tests__/side-navigation.test.tsx
@@ -273,6 +273,46 @@ describe('SideNavigation', () => {
       expect(createWrapper(wrapper.getElement()).find('[role="img"][aria-label="External link"]')).toBeTruthy();
     });
 
+    it('external link is a hover-motion trigger and its icon carries the motion target', () => {
+      const wrapper = renderSideNavigation({
+        items: [{ type: 'link', text: 'Page 1', href: '#something', external: true }],
+      });
+      const externalLink = wrapper.findItemByIndex(1)!.findLink()!.getElement();
+
+      expect(externalLink).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+      expect(externalLink.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+    });
+
+    it('link with an icon slot is a hover-motion trigger and the icon wrapper is the target', () => {
+      const wrapper = renderSideNavigation({
+        items: [{ type: 'link', text: 'Page 1', href: '#something', icon: <svg data-testid="custom-icon" /> }],
+      });
+      const link = wrapper.findItemByIndex(1)!.findLink()!.getElement();
+
+      expect(link).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+      // Target sits on the wrapper (not the icon itself) so that slot-provided icons animate too.
+      const target = link.querySelector('[data-awsui-motion-target]')!;
+      expect(target.querySelector('[data-testid="custom-icon"]')).toBeTruthy();
+    });
+
+    it('expandable link group header with an icon slot is a hover-motion trigger containing the target', () => {
+      const wrapper = renderSideNavigation({
+        items: [
+          {
+            type: 'expandable-link-group',
+            text: 'Group',
+            href: '#group',
+            icon: <svg data-testid="group-icon" />,
+            items: [{ type: 'link', text: 'Child', href: '#child' }],
+          },
+        ],
+      });
+      const header = wrapper.getElement().querySelector('a[href="#group"]')!;
+
+      expect(header).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+      expect(header.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+    });
+
     it('has an additional info when "info" property is specified', () => {
       const wrapper = renderSideNavigation({
         items: [{ type: 'link', text: 'Page 1', href: '#something', info: <Badge>Additional info</Badge> }],
diff --git a/src/side-navigation/parts.tsx b/src/side-navigation/parts.tsx
index a8c3934159..02b7c93891 100644
--- a/src/side-navigation/parts.tsx
+++ b/src/side-navigation/parts.tsx
@@ -413,6 +413,7 @@ const ItemIcon = React.forwardRef<HTMLSpanElement, ItemIconProps>(function ItemI
         collapsed && styles['item-icon--collapsed'],
         className
       )}
+      data-awsui-motion-target=""
       {...rest}
     >
       {icon}
@@ -527,6 +528,7 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
       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)}
@@ -540,7 +542,11 @@ function Link({ definition, activeHref, fireFollow, position, collapsed, activeT
           <span className={analyticsSelectors['link-text']}>{definition.text}</span>
           {definition.external && (
             <span aria-label={renderedExternalIconAriaLabel} role={renderedExternalIconAriaLabel ? 'img' : undefined}>
-              <InternalIcon name="external" className={styles['external-icon']} />
+              <InternalIcon
+                name="external"
+                className={styles['external-icon']}
+                nativeAttributes={{ 'data-awsui-motion-target': '' }}
+              />
             </span>
           )}
         </span>
diff --git a/src/table/body-cell/index.tsx b/src/table/body-cell/index.tsx
index 23e7da4499..29be28ca7b 100644
--- a/src/table/body-cell/index.tsx
+++ b/src/table/body-cell/index.tsx
@@ -126,9 +126,10 @@ function TableCellEditable<ItemType>({
               ref={editActivateRef}
               onClick={!isEditing && isExpandableColumn ? onEditStart : undefined}
               tabIndex={editActivateTabIndex}
+              data-awsui-motion-trigger="hover"
             >
               <span className={styles['body-cell-editor-icon']}>
-                <Icon name="edit" />
+                <Icon name="edit" nativeAttributes={{ 'data-awsui-motion-target': '' }} />
               </span>
             </button>
           </div>
diff --git a/src/table/header-cell/index.tsx b/src/table/header-cell/index.tsx
index 62e4c45d12..75c1e9e0fe 100644
--- a/src/table/header-cell/index.tsx
+++ b/src/table/header-cell/index.tsx
@@ -271,6 +271,7 @@ export function TableHeaderCell<ItemType>({
                 tabIndex: clickableHeaderTabIndex,
                 role: 'button',
                 onClick: event => handleClick(event.shiftKey),
+                'data-awsui-motion-trigger': 'hover',
                 // Prevent the browser from extending the text selection on Shift+click.
                 onMouseDown: (event: React.MouseEvent) => {
                   if (event.shiftKey) {
@@ -297,6 +298,7 @@ export function TableHeaderCell<ItemType>({
                     'columnDefinitions.editConfig.editIconAriaLabel',
                     column.editConfig?.editIconAriaLabel
                   )}
+                  nativeAttributes={{ 'data-awsui-motion-target': '' }}
                 />
               </span>
             ) : null}
@@ -309,7 +311,10 @@ export function TableHeaderCell<ItemType>({
                   {multiSortIndex}
                 </span>
               )}
-              <InternalIcon name={getSortingIconName(sortingStatus)} />
+              <InternalIcon
+                name={getSortingIconName(sortingStatus)}
+                nativeAttributes={{ 'data-awsui-motion-target': '' }}
+              />
             </span>
           )}
         </div>
diff --git a/src/tabs/tab-header-bar.tsx b/src/tabs/tab-header-bar.tsx
index 014ada060a..c7e2de6d41 100644
--- a/src/tabs/tab-header-bar.tsx
+++ b/src/tabs/tab-header-bar.tsx
@@ -619,11 +619,16 @@ const TabTrigger = forwardRef(
     };
 
     return tab.href ? (
-      <a {...commonProps} href={tab.href}>
+      <a {...commonProps} href={tab.href} data-awsui-motion-trigger="hover">
         {children}
       </a>
     ) : (
-      <button {...commonProps} type="button" disabled={tab.disabled && !isDisabledWithReason}>
+      <button
+        {...commonProps}
+        type="button"
+        disabled={tab.disabled && !isDisabledWithReason}
+        data-awsui-motion-trigger="hover"
+      >
         {children}
       </button>
     );
diff --git a/src/token/__tests__/token.test.tsx b/src/token/__tests__/token.test.tsx
index 53d6069da3..0808b3b842 100644
--- a/src/token/__tests__/token.test.tsx
+++ b/src/token/__tests__/token.test.tsx
@@ -108,6 +108,13 @@ describe('Token', () => {
       expect(onDismiss).toHaveBeenCalledTimes(1);
     });
 
+    test('is a hover-motion trigger and its close icon carries the motion target', () => {
+      const wrapper = renderToken({ label: 'Test token', onDismiss: jest.fn() });
+      const dismiss = wrapper.findDismiss()!.getElement();
+      expect(dismiss).toHaveAttribute('data-awsui-motion-trigger', 'hover');
+      expect(dismiss.querySelector('[data-awsui-motion-target]')).toBeTruthy();
+    });
+
     test('shows for inline readonly tokens', () => {
       const onDismiss = jest.fn();
       const wrapper = renderToken({
diff --git a/src/token/dismiss-button.tsx b/src/token/dismiss-button.tsx
index 1b42412dba..f751760eb6 100644
--- a/src/token/dismiss-button.tsx
+++ b/src/token/dismiss-button.tsx
@@ -55,9 +55,14 @@ function DismissButton(
         fireNonCancelableEvent(onDismiss);
       }}
       aria-label={dismissLabel}
+      data-awsui-motion-trigger="hover"
       {...(disabled || readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}
     >
-      <InternalIcon name="close" size={isOneTheme ? 'x-small' : undefined} />
+      <InternalIcon
+        name="close"
+        size={isOneTheme ? 'x-small' : undefined}
+        nativeAttributes={{ 'data-awsui-motion-target': '' }}
+      />
     </button>
   );
 }
diff --git a/src/top-navigation/parts/overflow-menu/menu-item.tsx b/src/top-navigation/parts/overflow-menu/menu-item.tsx
index 3cafabe5b6..2b4fe958eb 100644
--- a/src/top-navigation/parts/overflow-menu/menu-item.tsx
+++ b/src/top-navigation/parts/overflow-menu/menu-item.tsx
@@ -59,6 +59,7 @@ const LinkItem = forwardRef(
         href={href}
         target={anchorTarget}
         rel={anchorRel}
+        data-awsui-motion-trigger="hover"
         {...(testId ? { 'data-testid': testId } : {})}
       >
         <ListItem startIcon={startIcon} endIcon={endIcon}>
@@ -83,6 +84,7 @@ const ButtonItem = forwardRef(
         ref={ref}
         className={styles['overflow-menu-control']}
         onClick={onClick}
+        data-awsui-motion-trigger="hover"
         {...(typeof testId === 'string' ? { 'data-testid': testId } : {})}
       >
         <ListItem startIcon={startIcon} endIcon={endIcon}>
@@ -109,7 +111,7 @@ const NavigationItem = forwardRef(
       <ButtonItem
         ref={ref}
         startIcon={startIcon}
-        endIcon={<InternalIcon name="angle-right" />}
+        endIcon={<InternalIcon name="angle-right" nativeAttributes={{ 'data-awsui-motion-target': '' }} />}
         testId={testId}
         onClick={() =>
           navigate('dropdown-menu', {
@@ -139,11 +141,12 @@ const ExpandableItem: React.FC<
         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"
       >
         <ListItem
           endIcon={
             <span className={spinWhenOpen(styles, 'icon', expanded)}>
-              <InternalIcon name="caret-down-filled" />
+              <InternalIcon name="caret-down-filled" nativeAttributes={{ 'data-awsui-motion-target': '' }} />
             </span>
           }
         >