@automattic/vip-design-system 2.20.3 → 2.20.4

package/build/system/Accordion/Accordion.js

@@ -57,9 +57,6 @@ export var Item = function Item(_ref) {
       '&:last-child': {
         borderBottomLeftRadius: 1,
         borderBottomRightRadius: 1
-      },
-      '&:focus-within': function focusWithin(theme) {
-        return theme.outline;
       }
     },
     children: children
@@ -108,6 +105,19 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (_ref2, forwardedRef
         },
         '&:hover': {
           backgroundColor: 'accordion.background.hover'
+        },
+        // Keyboard-only focus ring on the header (the trigger button
+        // fills the header). Rendered inset, reusing the shared
+        // focus-ring colors, because the parent Item has overflow:hidden
+        // for its rounded corners which would clip an outset ring.
+        '&:focus-visible': function focusVisible(theme) {
+          var _theme$outline;
+          var ring = (_theme$outline = theme.outline) == null ? void 0 : _theme$outline.boxShadow;
+          return ring ? {
+            boxShadow: ring.split(/,(?![^(]*\))/).map(function (layer) {
+              return "inset " + layer.trim();
+            }).join(', ')
+          } : {};
         }
       }, sx)
     }, props, {

package/build/system/Form/Input.styles.d.ts

@@ -11,7 +11,6 @@ export declare const inputBaseText = "input.text.default";
 export declare const inputBaseBackground = "input.background.default";
 export declare const baseControlFocusStyle: {
     '&:focus-visible': (theme: InputTheme) => Record<string, string> | undefined;
-    '&:focus-within': (theme: InputTheme) => Record<string, string> | undefined;
 };
 export declare const baseControlStyle: {
     '&:disabled': {
@@ -26,7 +25,6 @@ export declare const baseControlStyle: {
         opacity: number;
     };
     '&:focus-visible': (theme: InputTheme) => Record<string, string> | undefined;
-    '&:focus-within': (theme: InputTheme) => Record<string, string> | undefined;
     backgroundColor: string;
     color: string;
     borderRadius: number;

package/build/system/Form/Input.styles.js

@@ -11,9 +11,6 @@ export var inputBaseBackground = 'input.background.default';
 export var baseControlFocusStyle = {
   '&:focus-visible': function focusVisible(theme) {
     return theme.outline;
-  },
-  '&:focus-within': function focusWithin(theme) {
-    return theme.outline;
   }
 };
 export var baseControlStyle = _extends({}, baseControlBorderStyle, {

package/build/system/Form/Radio/styles.js

@@ -11,7 +11,7 @@ export var inputStyle = function inputStyle(variant) {
     clipPath: 'inset(50%)',
     width: RADIO_SIZE,
     height: RADIO_SIZE,
-    '&:focus ~ label:before': {
+    '&:focus-visible ~ label:before': {
       variant: 'outline',
       content: '""',
       border: '1px solid',

package/build/system/NewDialog/DialogTitle.js

@@ -28,8 +28,7 @@ export var DialogTitle = function DialogTitle(_ref) {
   return _jsx(DialogPrimitive.Title, {
     sx: {
       margin: 0,
-      fontSize: 3,
-      fontWeight: 'medium',
+      variant: 'text.h3',
       color: 'heading'
     },
     children: titleNode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automattic/vip-design-system",
-  "version": "2.20.3",
+  "version": "2.20.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/Automattic/vip-design-system"

package/src/system/Accordion/Accordion.tsx

@@ -92,7 +92,6 @@ export const Item = ( { children, ...props }: AccordionItemProps ) => (
 				borderBottomLeftRadius: 1,
 				borderBottomRightRadius: 1,
 			},
-			'&:focus-within': ( theme: AccordionTheme ) => theme.outline,
 		} }
 	>
 		{ children }
@@ -136,6 +135,21 @@ export const Trigger = React.forwardRef< HTMLButtonElement, TriggerProps >(
 						'.vip-accordion-trigger-indicator': { transform: 'rotate(270deg)' },
 					},
 					'&:hover': { backgroundColor: 'accordion.background.hover' },
+					// Keyboard-only focus ring on the header (the trigger button
+					// fills the header). Rendered inset, reusing the shared
+					// focus-ring colors, because the parent Item has overflow:hidden
+					// for its rounded corners which would clip an outset ring.
+					'&:focus-visible': ( theme: AccordionTheme ) => {
+						const ring = theme.outline?.boxShadow;
+						return ring
+							? {
+									boxShadow: ring
+										.split( /,(?![^(]*\))/ )
+										.map( layer => `inset ${ layer.trim() }` )
+										.join( ', ' ),
+							  }
+							: {};
+					},
 					...sx,
 				} }
 				{ ...props }

package/src/system/Form/Input.styles.ts

@@ -14,7 +14,6 @@ export const inputBaseText = 'input.text.default';
 export const inputBaseBackground = 'input.background.default';
 export const baseControlFocusStyle = {
 	'&:focus-visible': ( theme: InputTheme ) => theme.outline,
-	'&:focus-within': ( theme: InputTheme ) => theme.outline,
 };
 
 export const baseControlStyle = {

package/src/system/Form/Radio/styles.ts

@@ -13,7 +13,7 @@ export const inputStyle = ( variant: string ): ThemeUIStyleObject => ( {
 	clipPath: 'inset(50%)',
 	width: RADIO_SIZE,
 	height: RADIO_SIZE,
-	'&:focus ~ label:before': {
+	'&:focus-visible ~ label:before': {
 		variant: 'outline',
 		content: '""',
 		border: '1px solid',

package/src/system/NewDialog/DialogTitle.tsx

@@ -34,9 +34,7 @@ export const DialogTitle: React.FC< DialogTitleProps > = ( { title, hidden = fal
 	}
 
 	return (
-		<DialogPrimitive.Title
-			sx={ { margin: 0, fontSize: 3, fontWeight: 'medium', color: 'heading' } }
-		>
+		<DialogPrimitive.Title sx={ { margin: 0, variant: 'text.h3', color: 'heading' } }>
 			{ titleNode }
 		</DialogPrimitive.Title>
 	);