ui/CollapsibleCard: do not animate focus ring (WordPress#76682)

* ui/CollapsibleCard: prevent focus ring from animating when expanding/collapsing the card

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

Author: ciampo

packages/ui/CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Bug Fixes
 
 -   `Card`: Add `overflow: clip` to `Card.Root` to prevent child content from overflowing rounded corners ([#76678](https://github.com/WordPress/gutenberg/pull/76678)).
+-   `CollapsibleCard`: do not animate the focus ring when expanding/collapsing the card ([#76459](https://github.com/WordPress/gutenberg/pull/76459)).
 
 ### Internal
 

packages/ui/src/collapsible-card/header.tsx

@@ -35,17 +35,23 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 				nativeButton={ false }
 			>
 				<div className={ styles[ 'header-content' ] }>{ children }</div>
-				<div className={ styles[ 'header-trigger-wrapper' ] }>
-					<Icon
-						icon={ chevronDown }
+				<div
+					className={ clsx( styles[ 'header-trigger-positioner' ] ) }
+				>
+					<div
 						className={ clsx(
-							styles[ 'header-trigger' ],
+							styles[ 'header-trigger-wrapper' ],
 							// While the interactive trigger element is the whole header,
 							// the focus ring will be displayed only on the icon to visually
 							// emulate it being the button.
 							focusStyles[ 'outset-ring--focus-parent-visible' ]
 						) }
-					/>
+					>
+						<Icon
+							icon={ chevronDown }
+							className={ styles[ 'header-trigger' ] }
+						/>
+					</div>
 				</div>
 			</Collapsible.Trigger>
 		);

packages/ui/src/collapsible-card/style.module.css

@@ -6,7 +6,7 @@
 		min-width: 0;
 	}
 
-	.header-trigger-wrapper {
+	.header-trigger-positioner {
 		flex-shrink: 0;
 		align-self: center;
 		/* Prevent the trigger from making the header taller than its content,
@@ -15,15 +15,19 @@
 		overflow: visible;
 	}
 
-	.header-trigger {
+	.header-trigger-wrapper {
+		display: flex;
+
 		/* Offset by half the button's own height so it visually centers
 		   at the wrapper's midpoint (which `align-self: center` places at
 		   the vertical center of the header). */
 		translate: 0 -50%;
 
 		/* For an outline that looks like `IconButton`'s */
 		border-radius: var(--wpds-border-radius-sm);
+	}
 
+	.header-trigger {
 		@media not (prefers-reduced-motion) {
 			transition: rotate 0.15s ease-out;
 		}