@wordpress/components 28.4.0 → 28.5.0

package/build-types/select-control/types.d.ts

@@ -1,16 +1,19 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
+import type { ChangeEvent, ReactNode } from 'react';
 /**
  * Internal dependencies
  */
 import type { InputBaseProps } from '../input-control/types';
 import type { BaseControlProps } from '../base-control/types';
-type SelectControlBaseProps = Pick<InputBaseProps, '__next36pxDefaultSize' | '__next40pxDefaultSize' | 'disabled' | 'hideLabelFromVision' | 'label' | 'labelPosition' | 'prefix' | 'size' | 'suffix'> & Pick<BaseControlProps, 'help' | '__nextHasNoMarginBottom'> & {
-    onBlur?: (event: FocusEvent<HTMLSelectElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLSelectElement>) => void;
-    options?: {
+type SelectControlBaseProps<V extends string> = Pick<InputBaseProps, '__next36pxDefaultSize' | '__next40pxDefaultSize' | 'disabled' | 'hideLabelFromVision' | 'label' | 'labelPosition' | 'prefix' | 'size' | 'suffix'> & Pick<BaseControlProps, 'help' | '__nextHasNoMarginBottom'> & {
+    /**
+     * An array of option property objects to be rendered,
+     * each with a `label` and `value` property, as well as any other
+     * `<option>` attributes.
+     */
+    options?: readonly ({
         /**
          * The label to be shown to the user.
          */
@@ -19,21 +22,8 @@ type SelectControlBaseProps = Pick<InputBaseProps, '__next36pxDefaultSize' | '__
          * The internal value used to choose the selected value.
          * This is also the value passed to `onChange` when the option is selected.
          */
-        value: string;
-        id?: string;
-        /**
-         * Whether or not the option should have the disabled attribute.
-         *
-         * @default false
-         */
-        disabled?: boolean;
-        /**
-         * Whether or not the option should be hidden.
-         *
-         * @default false
-         */
-        hidden?: boolean;
-    }[];
+        value: V;
+    } & Omit<React.OptionHTMLAttributes<HTMLOptionElement>, 'label' | 'value'>)[];
     /**
      * As an alternative to the `options` prop, `optgroup`s and `options` can be
      * passed in as `children` for more customizability.
@@ -46,7 +36,7 @@ type SelectControlBaseProps = Pick<InputBaseProps, '__next36pxDefaultSize' | '__
      */
     variant?: 'default' | 'minimal';
 };
-export type SelectControlSingleSelectionProps = SelectControlBaseProps & {
+export type SelectControlSingleSelectionProps<V extends string = string> = SelectControlBaseProps<V> & {
     /**
      * If this property is added, multiple values can be selected. The `value` passed should be an array.
      *
@@ -55,18 +45,23 @@ export type SelectControlSingleSelectionProps = SelectControlBaseProps & {
      * @default false
      */
     multiple?: false;
-    value?: string;
+    /**
+     * The value of the selected option.
+     *
+     * If `multiple` is true, the `value` should be an array with the values of the selected options.
+     */
+    value?: NoInfer<V>;
     /**
      * A function that receives the value of the new option that is being selected as input.
      *
      * If `multiple` is `true`, the value received is an array of the selected value.
      * Otherwise, the value received is a single value with the new selected value.
      */
-    onChange?: (value: string, extra?: {
+    onChange?: (value: NoInfer<V>, extra?: {
         event?: ChangeEvent<HTMLSelectElement>;
     }) => void;
 };
-export type SelectControlMultipleSelectionProps = SelectControlBaseProps & {
+export type SelectControlMultipleSelectionProps<V extends string> = SelectControlBaseProps<V> & {
     /**
      * If this property is added, multiple values can be selected. The `value` passed should be an array.
      *
@@ -75,17 +70,22 @@ export type SelectControlMultipleSelectionProps = SelectControlBaseProps & {
      * @default false
      */
     multiple: true;
-    value?: string[];
+    /**
+     * The value of the selected option.
+     *
+     * If `multiple` is true, the `value` should be an array with the values of the selected options.
+     */
+    value?: NoInfer<V>[];
     /**
      * A function that receives the value of the new option that is being selected as input.
      *
      * If `multiple` is `true`, the value received is an array of the selected value.
      * Otherwise, the value received is a single value with the new selected value.
      */
-    onChange?: (value: string[], extra?: {
+    onChange?: (value: NoInfer<V>[], extra?: {
         event?: ChangeEvent<HTMLSelectElement>;
     }) => void;
 };
-export type SelectControlProps = SelectControlSingleSelectionProps | SelectControlMultipleSelectionProps;
+export type SelectControlProps<V extends string = string> = SelectControlSingleSelectionProps<V> | SelectControlMultipleSelectionProps<V>;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/build-types/select-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/select-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhE;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,KAAK,sBAAsB,GAAG,IAAI,CACjC,cAAc,EACZ,uBAAuB,GACvB,uBAAuB,GACvB,UAAU,GACV,qBAAqB,GACrB,OAAO,GACP,eAAe,GACf,QAAQ,GACR,MAAM,GACN,QAAQ,CACV,GACA,IAAI,CAAE,gBAAgB,EAAE,MAAM,GAAG,yBAAyB,CAAE,GAAG;IAC9D,MAAM,CAAC,EAAE,CAAE,KAAK,EAAE,UAAU,CAAE,iBAAiB,CAAE,KAAM,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAE,KAAK,EAAE,UAAU,CAAE,iBAAiB,CAAE,KAAM,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE;QACT;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ;;;;WAIG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;;WAIG;QACH,MAAM,CAAC,EAAE,OAAO,CAAC;KACjB,EAAE,CAAC;IACJ;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAChC,CAAC;AAEH,MAAM,MAAM,iCAAiC,GAAG,sBAAsB,GAAG;IACxE;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,EACb,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,WAAW,CAAE,iBAAiB,CAAE,CAAA;KAAE,KAChD,IAAI,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,mCAAmC,GAAG,sBAAsB,GAAG;IAC1E;;;;;;OAMG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,EAAE,EACf,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,WAAW,CAAE,iBAAiB,CAAE,CAAA;KAAE,KAChD,IAAI,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC3B,iCAAiC,GACjC,mCAAmC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/select-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9D,KAAK,sBAAsB,CAAE,CAAC,SAAS,MAAM,IAAK,IAAI,CACrD,cAAc,EACZ,uBAAuB,GACvB,uBAAuB,GACvB,UAAU,GACV,qBAAqB,GACrB,OAAO,GACP,eAAe,GACf,QAAQ,GACR,MAAM,GACN,QAAQ,CACV,GACA,IAAI,CAAE,gBAAgB,EAAE,MAAM,GAAG,yBAAyB,CAAE,GAAG;IAC9D;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAE;QACpB;;WAEG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;;WAGG;QACH,KAAK,EAAE,CAAC,CAAC;KACT,GAAG,IAAI,CACP,KAAK,CAAC,oBAAoB,CAAE,iBAAiB,CAAE,EAC/C,OAAO,GAAG,OAAO,CACjB,CAAE,EAAE,CAAC;IACN;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAChC,CAAC;AAEH,MAAM,MAAM,iCAAiC,CAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IACvE,sBAAsB,CAAE,CAAC,CAAE,GAAG;IAC7B;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAE,CAAC,CAAE,CAAC;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,OAAO,CAAE,CAAC,CAAE,EACnB,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,WAAW,CAAE,iBAAiB,CAAE,CAAA;KAAE,KAChD,IAAI,CAAC;CACV,CAAC;AAEH,MAAM,MAAM,mCAAmC,CAAE,CAAC,SAAS,MAAM,IAChE,sBAAsB,CAAE,CAAC,CAAE,GAAG;IAC7B;;;;;;OAMG;IACH,QAAQ,EAAE,IAAI,CAAC;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAE,CAAC,CAAE,EAAE,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,OAAO,CAAE,CAAC,CAAE,EAAE,EACrB,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,WAAW,CAAE,iBAAiB,CAAE,CAAA;KAAE,KAChD,IAAI,CAAC;CACV,CAAC;AAEH,MAAM,MAAM,kBAAkB,CAAE,CAAC,SAAS,MAAM,GAAG,MAAM,IACtD,iCAAiC,CAAE,CAAC,CAAE,GACtC,mCAAmC,CAAE,CAAC,CAAE,CAAC"}

package/build-types/tabs/styles.d.ts

@@ -3,24 +3,18 @@ export declare const TabListWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Tab: import("@emotion/styled").StyledComponent<Ariakit.TabOptions<"button"> & {
-    [index: `data-${string}`]: unknown;
-    wrapElement?: import("@ariakit/react-core/cjs/utils/types").WrapElement;
-    children?: import("@ariakit/react-core/cjs/utils/types").Children;
-    render?: import("@ariakit/react-core/cjs/utils/types").RenderProp | import("react").ReactElement;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+export declare const Tab: import("@emotion/styled").StyledComponent<Ariakit.TabOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "children" | keyof Ariakit.TabOptions<"button">> & {
+}, keyof Ariakit.TabOptions<T>> & {
+    [index: `data-${string}`]: unknown;
+} & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const TabPanel: import("@emotion/styled").StyledComponent<Ariakit.TabPanelOptions<"div"> & {
-    [index: `data-${string}`]: unknown;
-    wrapElement?: import("@ariakit/react-core/cjs/utils/types").WrapElement;
-    children?: import("@ariakit/react-core/cjs/utils/types").Children;
-    render?: import("@ariakit/react-core/cjs/utils/types").RenderProp | import("react").ReactElement;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+export declare const TabPanel: import("@emotion/styled").StyledComponent<Ariakit.TabPanelOptions<"div"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "children" | keyof Ariakit.TabPanelOptions<"div">> & {
+}, keyof Ariakit.TabPanelOptions<T>> & {
+    [index: `data-${string}`]: unknown;
+} & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/tabs/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tabs/styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAQ1C,eAAO,MAAM,cAAc;;SAaL,MAAO,WACvB;yGA8BL,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;;;;UAuEf,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;UAcpB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/tabs/styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAQ1C,eAAO,MAAM,cAAc;;SAaL,MAAO,WACvB;yGA8BL,CAAC;AAEF,eAAO,MAAM,GAAG;;;;;;UAuEf,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;UAcpB,CAAC"}

package/build-types/text-control/index.d.ts

@@ -10,6 +10,7 @@
  *
  *   return (
  *     <TextControl
+ *       __nextHasNoMarginBottom
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }

package/build-types/text-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text-control/index.tsx"],"names":[],"mappings":"AAiEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,WAAW;;;;;sVAAuC,CAAC;AAEhE,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/text-control/index.tsx"],"names":[],"mappings":"AAiEA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW;;;;;sVAAuC,CAAC;AAEhE,eAAe,WAAW,CAAC"}

package/build-types/toggle-control/index.d.ts

@@ -1,9 +1,3 @@
-/**
- * External dependencies
- */
-import type { ForwardedRef } from 'react';
-import type { WordPressComponentProps } from '../context/wordpress-component';
-import type { ToggleControlProps } from './types';
 /**
  * ToggleControl is used to generate a toggle user interface.
  *
@@ -16,6 +10,7 @@ import type { ToggleControlProps } from './types';
  *
  *   return (
  *     <ToggleControl
+ *       __nextHasNoMarginBottom
  *       label="Fixed Background"
  *       checked={ value }
  *       onChange={ () => setValue( ( state ) => ! state ) }
@@ -24,11 +19,10 @@ import type { ToggleControlProps } from './types';
  * };
  * ```
  */
-export declare function ToggleControl({ __nextHasNoMarginBottom, label, checked, help, className, onChange, disabled, }: WordPressComponentProps<ToggleControlProps, 'input', false>, ref: ForwardedRef<HTMLInputElement>): import("react").JSX.Element;
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
+export declare const ToggleControl: import("react").ForwardRefExoticComponent<Pick<import("../form-toggle/types").FormToggleProps, "disabled" | "checked"> & Pick<import("../base-control/types").BaseControlProps, "className" | "__nextHasNoMarginBottom"> & {
     help?: import("react").ReactNode | ((checked: boolean) => import("react").ReactNode);
     label: import("react").ReactNode;
     onChange: (value: boolean) => void;
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "help" | "disabled" | "label" | "className" | "children" | "onChange" | "checked" | "as" | "__nextHasNoMarginBottom"> & import("react").RefAttributes<HTMLInputElement>>;
-export default _default;
+export default ToggleControl;
 //# sourceMappingURL=index.d.ts.map

package/build-types/toggle-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toggle-control/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBvD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAC9E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,aAAa,CAC5B,EACC,uBAAuB,EACvB,KAAK,EACL,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,GACR,EAAE,uBAAuB,CAAE,kBAAkB,EAAE,OAAO,EAAE,KAAK,CAAE,EAChE,GAAG,EAAE,YAAY,CAAE,gBAAgB,CAAE,+BAkErC;;;;;;AAED,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/toggle-control/index.tsx"],"names":[],"mappings":"AAuGA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,aAAa;;;;0SAAyC,CAAC;AAEpE,eAAe,aAAa,CAAC"}

package/build-types/toggle-group-control/toggle-group-control/component.d.ts

@@ -19,7 +19,12 @@
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>

package/build-types/toggle-group-control/toggle-group-control/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":"AAgGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;8CAG9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control/component.tsx"],"names":[],"mappings":"AAgGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;8CAG9B,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts

@@ -10,7 +10,12 @@
  *
  * function Example() {
  *   return (
- *     <ToggleGroupControl label="my label" value="vertical" isBlock>
+ *     <ToggleGroupControl
+ *       label="my label"
+ *       value="vertical"
+ *       isBlock
+ *       __nextHasNoMarginBottom
+ *     >
  *       <ToggleGroupControlOption value="horizontal" label="Horizontal" />
  *       <ToggleGroupControlOption value="vertical" label="Vertical" />
  *     </ToggleGroupControl>

package/build-types/toggle-group-control/toggle-group-control-option/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":[],"mappings":"AAsCA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,wBAAwB;;iOAEpC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option/component.tsx"],"names":[],"mappings":"AAsCA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,wBAAwB;;iOAEpC,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/build-types/toggle-group-control/toggle-group-control-option-icon/component.d.ts

@@ -11,20 +11,20 @@
  * import { formatLowercase, formatUppercase } from '@wordpress/icons';
  *
  * function Example() {
- *	return (
- *		<ToggleGroupControl>
- *			<ToggleGroupControlOptionIcon
- *				value="uppercase"
- *				label="Uppercase"
- *				icon={ formatUppercase }
- *			/>
- *			<ToggleGroupControlOptionIcon
- *				value="lowercase"
- *				label="Lowercase"
- *				icon={ formatLowercase }
- *			/>
- *		</ToggleGroupControl>
- *	);
+ *  return (
+ *    <ToggleGroupControl __nextHasNoMarginBottom>
+ *      <ToggleGroupControlOptionIcon
+ *        value="uppercase"
+ *        label="Uppercase"
+ *        icon={ formatUppercase }
+ *      />
+ *      <ToggleGroupControlOptionIcon
+ *        value="lowercase"
+ *        label="Lowercase"
+ *        icon={ formatLowercase }
+ *      />
+ *    </ToggleGroupControl>
+ *  );
  * }
  * ```
  */

package/build-types/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":"AAkBA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AAuGjC,eAAO,MAAM,OAAO,8FAAmC,CAAC;AAExD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":"AAmBA;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAEZ,MAAM,SAAS,CAAC;AAQjB;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AAmHjC,eAAO,MAAM,OAAO,8FAAmC,CAAC;AAExD,eAAe,OAAO,CAAC"}

package/build-types/tooltip/test/utils/index.d.ts

@@ -1,11 +1,7 @@
-/**
- * External dependencies
- */
-import type { UserEvent } from '@testing-library/user-event/dist/types/setup/setup';
 /**
  * Ensures the async behaviors and animations in tooltip complete
  * to avoid leaking into other tests
  *
  */
-export default function cleanupTooltip(user: UserEvent): Promise<void>;
+export default function cleanupTooltip(): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/tooltip/test/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tooltip/test/utils/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oDAAoD,CAAC;AAOpF;;;;GAIG;AACH,wBAA8B,cAAc,CAAE,IAAI,EAAE,SAAS,iBAI5D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tooltip/test/utils/index.tsx"],"names":[],"mappings":"AAUA;;;;GAIG;AACH,wBAA8B,cAAc,kBAI3C"}

package/build-types/tree-select/index.d.ts

@@ -11,7 +11,7 @@ import type { TreeSelectProps } from './types';
  *
  * 	return (
  * 		<TreeSelect
- *      __nextHasNoMarginBottom
+ * 			__nextHasNoMarginBottom
  * 			label="Parent page"
  * 			noOptionLabel="No parent page"
  * 			onChange={ ( newPage ) => setPage( newPage ) }

package/build-types/tree-select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tree-select/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAgB,MAAM,SAAS,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,wBAAgB,UAAU,CAAE,KAAK,EAAE,eAAe,+BAwBjD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tree-select/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,eAAe,EAAgB,MAAM,SAAS,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,wBAAgB,UAAU,CAAE,KAAK,EAAE,eAAe,+BAwBjD;AAED,eAAe,UAAU,CAAC"}

package/build-types/utils/config-values.d.ts

@@ -26,6 +26,12 @@ declare const _default: {
     colorScrollbarThumbHover: string;
     colorScrollbarTrack: string;
     elevationIntensity: number;
+    radiusXSmall: string;
+    radiusSmall: string;
+    radiusMedium: string;
+    radiusLarge: string;
+    radiusFull: string;
+    radiusRound: string;
     radiusBlockUi: string;
     borderWidth: string;
     borderWidthFocus: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.4.0",
+	"version": "28.5.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,7 +31,7 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.3.12",
+		"@ariakit/react": "^0.4.7",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -43,23 +43,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.4.0",
-		"@wordpress/compose": "^7.4.0",
-		"@wordpress/date": "^5.4.0",
-		"@wordpress/deprecated": "^4.4.0",
-		"@wordpress/dom": "^4.4.0",
-		"@wordpress/element": "^6.4.0",
-		"@wordpress/escape-html": "^3.4.0",
-		"@wordpress/hooks": "^4.4.0",
-		"@wordpress/html-entities": "^4.4.0",
-		"@wordpress/i18n": "^5.4.0",
-		"@wordpress/icons": "^10.4.0",
-		"@wordpress/is-shallow-equal": "^5.4.0",
-		"@wordpress/keycodes": "^4.4.0",
-		"@wordpress/primitives": "^4.4.0",
-		"@wordpress/private-apis": "^1.4.0",
-		"@wordpress/rich-text": "^7.4.0",
-		"@wordpress/warning": "^3.4.0",
+		"@wordpress/a11y": "^4.5.0",
+		"@wordpress/compose": "^7.5.0",
+		"@wordpress/date": "^5.5.0",
+		"@wordpress/deprecated": "^4.5.0",
+		"@wordpress/dom": "^4.5.0",
+		"@wordpress/element": "^6.5.0",
+		"@wordpress/escape-html": "^3.5.0",
+		"@wordpress/hooks": "^4.5.0",
+		"@wordpress/html-entities": "^4.5.0",
+		"@wordpress/i18n": "^5.5.0",
+		"@wordpress/icons": "^10.5.0",
+		"@wordpress/is-shallow-equal": "^5.5.0",
+		"@wordpress/keycodes": "^4.5.0",
+		"@wordpress/primitives": "^4.5.0",
+		"@wordpress/private-apis": "^1.5.0",
+		"@wordpress/rich-text": "^7.5.0",
+		"@wordpress/warning": "^3.5.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
+	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
 }

package/src/alignment-matrix-control/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor, within } from '@testing-library/react';
-import { press, click, sleep } from '@ariakit/test';
+import { press, click } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -39,7 +39,6 @@ describe( 'AlignmentMatrixControl', () => {
 		it( 'should be centered by default', async () => {
 			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
-			await sleep();
 			await press.Tab();
 
 			expect( getCell( 'center center' ) ).toHaveFocus();
@@ -110,7 +109,6 @@ describe( 'AlignmentMatrixControl', () => {
 						<AlignmentMatrixControl onChange={ spy } />
 					);
 
-					await sleep();
 					await press.Tab();
 					await press[ keyRef ]();
 

package/src/autocomplete/autocompleter-ui.tsx

@@ -64,9 +64,11 @@ function ListBox( {
 						'components-autocomplete__result',
 						className,
 						{
+							// Unused, for backwards compatibility.
 							'is-selected': index === selectedIndex,
 						}
 					) }
+					variant={ index === selectedIndex ? 'primary' : undefined }
 					onClick={ () => onSelect( option ) }
 				>
 					{ option.label }

package/src/autocomplete/style.scss

@@ -13,10 +13,4 @@
 	&:focus:not(:disabled) {
 		@include block-toolbar-button-style__focus();
 	}
-
-	&.is-selected,
-	&:not(:disabled,[aria-disabled="true"]):active {
-		background: $components-color-accent;
-		color: $white;
-	}
 }

package/src/base-control/styles/base-control-styles.ts

@@ -37,7 +37,7 @@ export const StyledField = styled.div`
 const labelStyles = css`
 	${ baseLabelTypography };
 
-	display: inline-block;
+	display: block;
 	margin-bottom: ${ space( 2 ) };
 	/**
 	 * Removes Chrome/Safari/Firefox user agent stylesheet padding from

package/src/border-control/styles.ts

@@ -16,10 +16,6 @@ import {
 
 import type { Border } from './types';
 
-const labelStyles = css`
-	font-weight: 500;
-`;
-
 const focusBoxShadow = css`
 	box-shadow: inset ${ CONFIG.controlBoxShadowFocus };
 `;
@@ -140,7 +136,6 @@ export const borderControlPopoverControls = css`
 
 	> div:first-of-type > ${ StyledLabel } {
 		margin-bottom: 0;
-		${ labelStyles }
 	}
 
 	&& ${ StyledLabel } + button:not( .has-text ) {

package/src/button/stories/e2e/index.story.tsx

@@ -31,28 +31,110 @@ export const VariantStates: StoryFn< typeof Button > = (
 		'link',
 	];
 
-	return (
-		<div style={ { display: 'flex', flexDirection: 'column', gap: 24 } }>
-			{ variants.map( ( variant ) => (
-				<div
-					style={ { display: 'flex', gap: 8 } }
-					key={ variant ?? 'undefined' }
+	const VariantsRow = ( {
+		buttonProps,
+		name,
+	}: {
+		buttonProps?: ButtonAsButtonProps;
+		name: string;
+	} ) => {
+		return (
+			<tr>
+				<th
+					style={ {
+						fontSize: 13,
+						fontWeight: 'normal',
+						padding: 8,
+						background: '#f3f4f5',
+					} }
 				>
-					<Button { ...props } variant={ variant } />
-					{ /* eslint-disable-next-line no-restricted-syntax */ }
-					<Button { ...props } variant={ variant } disabled />
-					<Button
-						{ ...props }
-						variant={ variant }
-						disabled
-						accessibleWhenDisabled
-					/>
-					<Button { ...props } variant={ variant } isBusy />
-					<Button { ...props } variant={ variant } isDestructive />
-					<Button { ...props } variant={ variant } isPressed />
-				</div>
-			) ) }
-		</div>
+					{ name }
+				</th>
+				{ variants.map( ( variant ) => (
+					<td key={ variant ?? 'undefined' } style={ { padding: 4 } }>
+						<Button
+							{ ...props }
+							variant={ variant }
+							{ ...buttonProps }
+						/>
+					</td>
+				) ) }
+			</tr>
+		);
+	};
+
+	return (
+		<table>
+			<thead>
+				<tr style={ { background: '#f3f4f5' } }>
+					<th />
+					{ variants.map( ( variant ) => (
+						<th
+							key={ variant ?? 'undefined' }
+							style={ { padding: 8 } }
+						>
+							{ variant ?? '(default)' }
+						</th>
+					) ) }
+				</tr>
+			</thead>
+			<tbody>
+				<VariantsRow name="(default)" />
+				<VariantsRow
+					name="disabled"
+					buttonProps={ { disabled: true } }
+				/>
+				<VariantsRow
+					name="focusable disabled"
+					buttonProps={ {
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isBusy"
+					buttonProps={ {
+						isBusy: true,
+					} }
+				/>
+				<VariantsRow
+					name="isBusy disabled"
+					buttonProps={ {
+						isBusy: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isDestructive"
+					buttonProps={ {
+						isDestructive: true,
+					} }
+				/>
+				<VariantsRow
+					name="isDestructive disabled"
+					buttonProps={ {
+						isDestructive: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+				<VariantsRow
+					name="isPressed"
+					buttonProps={ {
+						isPressed: true,
+					} }
+				/>
+				<VariantsRow
+					name="isPressed disabled"
+					buttonProps={ {
+						isPressed: true,
+						accessibleWhenDisabled: true,
+						disabled: true,
+					} }
+				/>
+			</tbody>
+		</table>
 	);
 };
 VariantStates.args = {