@@ -2,7 +2,7 @@ import { forwardRef } from '@wordpress/element';
 import clsx from 'clsx';
 import * as Card from '../card';
 import * as Collapsible from '../collapsible';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import type { ContentProps } from './types';
 
 /**
 
@@ -3,7 +3,7 @@ import { forwardRef, useContext, useEffect, useId } from '@wordpress/element';
 import { HeaderDescriptionIdContext } from './context';
 import type { HeaderDescriptionProps } from './types';
 import { Text } from '../text';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 const DEFAULT_TAG = <div />;
 
 
@@ -12,9 +12,8 @@ import { chevronDown } from '@wordpress/icons';
 import * as Card from '../card';
 import * as Collapsible from '../collapsible';
 import { Icon } from '../icon';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import defenseStyles from '../utils/css/global-css-defense.module.css';
-import focusStyles from '../utils/css/focus.module.scss';
 import { HeaderDescriptionIdContext } from './context';
 import type { HeaderProps } from './types';
 
@@ -123,10 +122,7 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 				children: (
 					<HeaderDescriptionIdContext.Provider value={ contextValue }>
 						<Collapsible.Trigger
-							className={ clsx(
-								styles.header,
-								focusStyles[ 'outset-ring-parent' ]
-							) }
+							className={ styles.header }
 							render={ <Card.Header /> }
 							nativeButton={ false }
 							aria-describedby={ ariaDescribedBy }
@@ -145,13 +141,7 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 								<div
 									className={ clsx(
 										styles[ 'header-trigger-wrapper' ],
-										defenseStyles.div,
-										// 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'
-										]
+										defenseStyles.div
 									) }
 								>
 									<Icon
 
@@ -1,3 +1,5 @@
+@use "../utils/css/mixins";
+
 @layer wp-ui {
 	@layer utilities, components, compositions, overrides;
 
@@ -52,6 +54,12 @@
 			border-radius: var(--wpds-border-radius-sm);
 		}
 
+		/* The whole header is the trigger, but the focus ring is shown only
+		   on the icon to visually emulate it being the button. */
+		.header:focus-visible .header-trigger-wrapper {
+			@include mixins.focus-ring();
+		}
+
 		.header-trigger {
 			@media not (prefers-reduced-motion) {
 				transition: rotate 0.15s ease-out;
 
@@ -10,8 +10,7 @@
 		 */
 		.outset-ring--focus:focus,
 		.outset-ring--focus-visible:focus-visible,
-		.outset-ring--focus-within:focus-within,
-		.outset-ring-parent:focus-visible .outset-ring--focus-parent-visible {
+		.outset-ring--focus-within:focus-within {
 			@include mixins.focus-ring();
 		}
Original file line number	Diff line number	Diff line change
`@@ -10,8 +10,7 @@`
`10`	`10`	`*/`
`11`	`11`	`.outset-ring--focus:focus,`
`12`	`12`	`.outset-ring--focus-visible:focus-visible,`
`13`		`- .outset-ring--focus-within:focus-within,`
`14`		`- .outset-ring-parent:focus-visible .outset-ring--focus-parent-visible {`
	`13`	`+ .outset-ring--focus-within:focus-within {`
`15`	`14`	`@include mixins.focus-ring();`
`16`	`15`	`}`
`17`	`16`