@wordpress/components 25.6.1 → 25.8.0

package/build-types/view/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,IAAI,EAAE,kBAAkB,CACpC,KAAK,EACL,SAAS,GAAG,aAAa,CAAE,GAAG,CAAE,EAChC,IAAI,CACW,CAAC;AAKjB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;GAEG;AACH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI,EAAE,kBAAkB,CACpC,KAAK,EACL,SAAS,GAAG,aAAa,CAAE,GAAG,CAAE,EAChC,IAAI,CACW,CAAC;AAKjB,eAAe,IAAI,CAAC"}

package/build-types/view/stories/index.story.d.ts

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
 import { View } from '..';
-declare const meta: ComponentMeta<typeof View>;
+declare const meta: Meta<typeof View>;
 export default meta;
-export declare const Default: ComponentStory<typeof View>;
+export declare const Default: StoryFn<typeof View>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/view/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,IAAI,CAWrC,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,IAAI,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/view/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAE1B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,IAAI,CAW5B,CAAC;AACF,eAAe,IAAI,CAAC;AAMpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,IAAI,CAAwB,CAAC"}

package/build-types/visually-hidden/stories/index.story.d.ts

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 /**
  * Internal dependencies
  */
 import { VisuallyHidden } from '..';
-declare const meta: ComponentMeta<typeof VisuallyHidden>;
+declare const meta: Meta<typeof VisuallyHidden>;
 export default meta;
-export declare const Default: ComponentStory<typeof VisuallyHidden>;
-export declare const WithForwardedProps: ComponentStory<typeof VisuallyHidden>;
-export declare const WithAdditionalClassNames: ComponentStory<typeof VisuallyHidden>;
+export declare const Default: StoryFn<typeof VisuallyHidden>;
+export declare const WithForwardedProps: StoryFn<typeof VisuallyHidden>;
+export declare const WithAdditionalClassNames: StoryFn<typeof VisuallyHidden>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/visually-hidden/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,cAAc,CAa/C,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,cAAc,CAa1D,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAAc,CAAE,OAAO,cAAc,CAWrE,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,cAAc,CACpD,OAAO,cAAc,CAUrB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/visually-hidden/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,IAAI,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,cAAc,CAatC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,cAAc,CAanD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAE,OAAO,cAAc,CAW9D,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAE,OAAO,cAAc,CAWpE,CAAC"}

package/build-types/z-stack/stories/index.story.d.ts

@@ -1,6 +1,6 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import { ZStack } from '..';
-declare const meta: ComponentMeta<typeof ZStack>;
+declare const meta: Meta<typeof ZStack>;
 export default meta;
-export declare const Default: ComponentStory<typeof ZStack>;
+export declare const Default: StoryFn<typeof ZStack>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/z-stack/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAOtE,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,MAAM,CAavC,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,MAAM,CAAwB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/z-stack/stories/index.story.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAE5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAa9B,CAAC;AACF,eAAe,IAAI,CAAC;AAsCpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,MAAM,CAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.6.1",
+	"version": "25.8.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -38,26 +38,26 @@
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
 		"@emotion/utils": "^1.0.0",
-		"@floating-ui/react-dom": "1.0.0",
+		"@floating-ui/react-dom": "^2.0.1",
 		"@radix-ui/react-dropdown-menu": "2.0.4",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.40.1",
-		"@wordpress/compose": "^6.17.1",
-		"@wordpress/date": "^4.40.1",
-		"@wordpress/deprecated": "^3.40.1",
-		"@wordpress/dom": "^3.40.1",
-		"@wordpress/element": "^5.17.1",
-		"@wordpress/escape-html": "^2.40.1",
-		"@wordpress/hooks": "^3.40.1",
-		"@wordpress/html-entities": "^3.40.1",
-		"@wordpress/i18n": "^4.40.1",
-		"@wordpress/icons": "^9.31.1",
-		"@wordpress/is-shallow-equal": "^4.40.1",
-		"@wordpress/keycodes": "^3.40.1",
-		"@wordpress/primitives": "^3.38.1",
-		"@wordpress/private-apis": "^0.22.1",
-		"@wordpress/rich-text": "^6.17.1",
-		"@wordpress/warning": "^2.40.1",
+		"@wordpress/a11y": "^3.42.0",
+		"@wordpress/compose": "^6.19.0",
+		"@wordpress/date": "^4.42.0",
+		"@wordpress/deprecated": "^3.42.0",
+		"@wordpress/dom": "^3.42.0",
+		"@wordpress/element": "^5.19.0",
+		"@wordpress/escape-html": "^2.42.0",
+		"@wordpress/hooks": "^3.42.0",
+		"@wordpress/html-entities": "^3.42.0",
+		"@wordpress/i18n": "^4.42.0",
+		"@wordpress/icons": "^9.33.0",
+		"@wordpress/is-shallow-equal": "^4.42.0",
+		"@wordpress/keycodes": "^3.42.0",
+		"@wordpress/primitives": "^3.40.0",
+		"@wordpress/private-apis": "^0.24.0",
+		"@wordpress/rich-text": "^6.19.0",
+		"@wordpress/warning": "^2.42.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "bb1fbf87bb0f451744530fc6a85de2dff1263bed"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

package/src/alignment-matrix-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -16,9 +16,13 @@ import AlignmentMatrixControl from '..';
 import { HStack } from '../../h-stack';
 import type { AlignmentMatrixControlProps } from '../types';
 
-const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
+const meta: Meta< typeof AlignmentMatrixControl > = {
 	title: 'Components (Experimental)/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
+	},
 	argTypes: {
 		onChange: { action: 'onChange', control: { type: null } },
 		value: { control: { type: null } },
@@ -30,7 +34,7 @@ const meta: ComponentMeta< typeof AlignmentMatrixControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof AlignmentMatrixControl > = ( {
+const Template: StoryFn< typeof AlignmentMatrixControl > = ( {
 	defaultValue,
 	onChange,
 	...props

package/src/angle-picker-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { AnglePickerControl } from '..';
 
-const meta: ComponentMeta< typeof AnglePickerControl > = {
+const meta: Meta< typeof AnglePickerControl > = {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
 	argTypes: {
@@ -31,7 +31,7 @@ const meta: ComponentMeta< typeof AnglePickerControl > = {
 
 export default meta;
 
-const AnglePickerWithState: ComponentStory< typeof AnglePickerControl > = ( {
+const AnglePickerWithState: StoryFn< typeof AnglePickerControl > = ( {
 	onChange,
 	...args
 } ) => {

package/src/animate/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, Story } from '@storybook/react';
 import { Animate } from '..';
 import Notice from '../../notice';
 
-const meta: ComponentMeta< typeof Animate > = {
+const meta: Meta< typeof Animate > = {
 	title: 'Components/Animate',
 	component: Animate,
 	parameters: {
@@ -19,9 +19,11 @@ const meta: ComponentMeta< typeof Animate > = {
 };
 export default meta;
 
-const Template: Story< typeof Animate > = ( props ) => <Animate { ...props } />;
+const Template: StoryFn< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
 
-export const Default: Story< typeof Animate > = Template.bind( {} );
+export const Default = Template.bind( {} );
 Default.args = {
 	children: ( { className } ) => (
 		<Notice className={ className } status="success">
@@ -30,7 +32,7 @@ Default.args = {
 	),
 };
 
-export const AppearTopLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopLeft = Template.bind( {} );
 AppearTopLeft.args = {
 	type: 'appear',
 	options: { origin: 'top left' },
@@ -40,7 +42,7 @@ AppearTopLeft.args = {
 		</Notice>
 	),
 };
-export const AppearTopRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearTopRight = Template.bind( {} );
 AppearTopRight.args = {
 	type: 'appear',
 	options: { origin: 'top right' },
@@ -50,7 +52,7 @@ AppearTopRight.args = {
 		</Notice>
 	),
 };
-export const AppearBottomLeft: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomLeft = Template.bind( {} );
 AppearBottomLeft.args = {
 	type: 'appear',
 	options: { origin: 'bottom left' },
@@ -60,7 +62,7 @@ AppearBottomLeft.args = {
 		</Notice>
 	),
 };
-export const AppearBottomRight: Story< typeof Animate > = Template.bind( {} );
+export const AppearBottomRight = Template.bind( {} );
 AppearBottomRight.args = {
 	type: 'appear',
 	options: { origin: 'bottom right' },
@@ -71,7 +73,7 @@ AppearBottomRight.args = {
 	),
 };
 
-export const Loading: Story< typeof Animate > = Template.bind( {} );
+export const Loading = Template.bind( {} );
 Loading.args = {
 	type: 'loading',
 	children: ( { className } ) => (
@@ -81,7 +83,7 @@ Loading.args = {
 	),
 };
 
-export const SlideIn: Story< typeof Animate > = Template.bind( {} );
+export const SlideIn = Template.bind( {} );
 SlideIn.args = {
 	type: 'slide-in',
 	options: { origin: 'left' },

package/src/animation/index.tsx

@@ -10,4 +10,5 @@
 export {
 	motion as __unstableMotion,
 	AnimatePresence as __unstableAnimatePresence,
+	MotionContext as __unstableMotionContext,
 } from 'framer-motion';

package/src/base-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import BaseControl, { useBaseControlProps } from '..';
 import Button from '../../button';
 
-const meta: ComponentMeta< typeof BaseControl > = {
+const meta: Meta< typeof BaseControl > = {
 	title: 'Components/BaseControl',
 	component: BaseControl,
 	argTypes: {
@@ -24,9 +24,7 @@ const meta: ComponentMeta< typeof BaseControl > = {
 };
 export default meta;
 
-const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+const BaseControlWithTextarea: StoryFn< typeof BaseControl > = ( props ) => {
 	const { baseControlProps, controlProps } = useBaseControlProps( props );
 
 	return (
@@ -36,7 +34,7 @@ const BaseControlWithTextarea: ComponentStory< typeof BaseControl > = (
 	);
 };
 
-export const Default: ComponentStory< typeof BaseControl > =
+export const Default: StoryFn< typeof BaseControl > =
 	BaseControlWithTextarea.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
@@ -56,9 +54,7 @@ WithHelpText.args = {
  * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would
  * otherwise use if the `label` prop was passed.
  */
-export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
-	props
-) => {
+export const WithVisualLabel: StoryFn< typeof BaseControl > = ( props ) => {
 	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 

package/src/border-box-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
-import Popover from '../../popover';
 import { BorderBoxControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
 
-const meta: ComponentMeta< typeof BorderBoxControl > = {
+const meta: Meta< typeof BorderBoxControl > = {
 	title: 'Components (Experimental)/BorderBoxControl',
 	component: BorderBoxControl,
 	argTypes: {
@@ -41,7 +39,7 @@ const colors = [
 	{ name: 'Yellow 40', color: '#bd8600' },
 ];
 
-const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
+const Template: StoryFn< typeof BorderBoxControl > = ( props ) => {
 	const { onChange, ...otherProps } = props;
 	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
 
@@ -53,7 +51,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 	};
 
 	return (
-		<SlotFillProvider>
+		<>
 			<BorderBoxControl
 				{ ...otherProps }
 				onChange={ onChangeMerged }
@@ -78,9 +76,7 @@ const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 			>
 				Reset
 			</Button>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		</>
 	);
 };
 export const Default = Template.bind( {} );

package/src/border-control/border-control/README.md

@@ -22,6 +22,7 @@ a "shape" abstraction.
 ```jsx
 import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 const colors = [
 	{ name: 'Blue 20', color: '#72aee6' },
@@ -30,13 +31,12 @@ const colors = [
 
 const MyBorderControl = () => {
 	const [ border, setBorder ] = useState();
-	const onChange = ( newBorder ) => setBorder( newBorder );
 
 	return (
 		<BorderControl
 			colors={ colors }
 			label={ __( 'Border' ) }
-			onChange={ onChange }
+			onChange={ setBorder }
 			value={ border }
 		/>
 	);

package/src/border-control/border-control-dropdown/component.tsx

@@ -235,7 +235,7 @@ const BorderControlDropdown = (
 							onClose();
 						} }
 					>
-						{ __( 'Reset to default' ) }
+						{ __( 'Reset' ) }
 					</Button>
 				</DropdownContentWrapper>
 			) }

package/src/border-control/stories/index.story.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { ComponentProps } from 'react';
 
 /**
@@ -13,11 +13,9 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { BorderControl } from '..';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import Popover from '../../popover';
 import type { Border } from '../types';
 
-const meta: ComponentMeta< typeof BorderControl > = {
+const meta: Meta< typeof BorderControl > = {
 	title: 'Components (Experimental)/BorderControl',
 	component: BorderControl,
 	argTypes: {
@@ -70,7 +68,7 @@ const multipleOriginColors = [
 	},
 ];
 
-const Template: ComponentStory< typeof BorderControl > = ( {
+const Template: StoryFn< typeof BorderControl > = ( {
 	onChange,
 	...props
 } ) => {
@@ -83,15 +81,11 @@ const Template: ComponentStory< typeof BorderControl > = ( {
 	};
 
 	return (
-		<SlotFillProvider>
-			<BorderControl
-				onChange={ onChangeMerged }
-				value={ border }
-				{ ...props }
-			/>
-			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
-			<Popover.Slot />
-		</SlotFillProvider>
+		<BorderControl
+			onChange={ onChangeMerged }
+			value={ border }
+			{ ...props }
+		/>
 	);
 };
 

package/src/border-control/styles.ts

@@ -21,7 +21,7 @@ const labelStyles = css`
 `;
 
 const focusBoxShadow = css`
-	box-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };
+	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
 `;
 
 export const borderControl = css`
@@ -165,10 +165,10 @@ export const resetButton = css`
 
 	/* Override button component styling */
 	&& {
-		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
+		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
-		height: 46px;
+		height: 40px;
 	}
 `;
 
@@ -180,10 +180,10 @@ export const borderControlStylePicker = css`
 
 export const borderStyleButton = css`
 	&&&&& {
-		min-width: 30px;
-		width: 30px;
-		height: 30px;
-		padding: 3px;
+		min-width: 32px;
+		width: 32px;
+		height: 32px;
+		padding: 4px;
 	}
 `;