@wordpress/components 28.3.0 → 28.4.0

package/build-types/utils/element-rect.d.ts

@@ -0,0 +1,111 @@
+/**
+ * `useTrackElementRectUpdates` options.
+ */
+export type UseTrackElementRectUpdatesOptions = {
+    /**
+     * Whether to trigger the callback when an element's ResizeObserver is
+     * first set up, including when the target element changes.
+     *
+     * @default true
+     */
+    fireOnElementInit?: boolean;
+};
+/**
+ * Tracks an element's "rect" (size and position) and fires `onRect` for all
+ * of its discrete values. The element can be changed dynamically and **it
+ * must not be stored in a ref**. Instead, it should be stored in a React
+ * state or equivalent.
+ *
+ * By default, `onRect` is called initially for the target element (including
+ * when the target element changes), not only on size or position updates.
+ * This allows consumers of the hook to always be in sync with all rect values
+ * of the target element throughout its lifetime. This behavior can be
+ * disabled by setting the `fireOnElementInit` option to `false`.
+ *
+ * Under the hood, it sets up a `ResizeObserver` that tracks the element. The
+ * target element can be changed dynamically, and the observer will be
+ * updated accordingly.
+ *
+ * @example
+ *
+ * ```tsx
+ * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();
+ *
+ * useTrackElementRectUpdates( targetElement, ( element ) => {
+ *   console.log( 'Element resized:', element );
+ * } );
+ *
+ * <div ref={ setTargetElement } />;
+ * ```
+ */
+export declare function useTrackElementRectUpdates(
+/**
+ * The target element to observe. It can be changed dynamically.
+ */
+targetElement: HTMLElement | undefined | null, 
+/**
+ * Callback to fire when the element is resized. It will also be
+ * called when the observer is set up, unless `fireOnElementInit` is
+ * set to `false`.
+ */
+onRect: (
+/**
+ * The element being tracked at the time of this update.
+ */
+element: HTMLElement, 
+/**
+ * The list of
+ * [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)
+ * objects passed to the `ResizeObserver.observe` callback. This list
+ * won't be available when the observer is set up, and only on updates.
+ */
+resizeObserverEntries?: ResizeObserverEntry[]) => void, { fireOnElementInit }?: UseTrackElementRectUpdatesOptions): void;
+/**
+ * The position and dimensions of an element, relative to its offset parent.
+ */
+export type ElementOffsetRect = {
+    /**
+     * The distance from the left edge of the offset parent to the left edge of
+     * the element.
+     */
+    left: number;
+    /**
+     * The distance from the top edge of the offset parent to the top edge of
+     * the element.
+     */
+    top: number;
+    /**
+     * The width of the element.
+     */
+    width: number;
+    /**
+     * The height of the element.
+     */
+    height: number;
+};
+/**
+ * An `ElementOffsetRect` object with all values set to zero.
+ */
+export declare const NULL_ELEMENT_OFFSET_RECT: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+/**
+ * Returns the position and dimensions of an element, relative to its offset
+ * parent. This is useful in contexts where `getBoundingClientRect` is not
+ * suitable, such as when the element is transformed.
+ *
+ * **Note:** the `left` and `right` values are adjusted due to a limitation
+ * in the way the browser calculates the offset position of the element,
+ * which can cause unwanted scrollbars to appear. This adjustment makes the
+ * values potentially inaccurate within a range of 1 pixel.
+ */
+export declare function getElementOffsetRect(element: HTMLElement): ElementOffsetRect;
+/**
+ * Tracks the position and dimensions of an element, relative to its offset
+ * parent. The element can be changed dynamically.
+ */
+export declare function useTrackElementOffsetRect(targetElement: HTMLElement | undefined | null): ElementOffsetRect;
+//# sourceMappingURL=element-rect.d.ts.map

package/build-types/utils/element-rect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-rect.d.ts","sourceRoot":"","sources":["../../src/utils/element-rect.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,MAAM,MAAM,iCAAiC,GAAG;IAC/C;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,0BAA0B;AACzC;;GAEG;AACH,aAAa,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI;AAC7C;;;;GAIG;AACH,MAAM,EAAE;AACP;;GAEG;AACH,OAAO,EAAE,WAAW;AACpB;;;;;GAKG;AACH,qBAAqB,CAAC,EAAE,mBAAmB,EAAE,KACzC,IAAI,EACT,EAAE,iBAAwB,EAAE,GAAE,iCAAsC,QA0CpE;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC/B;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;;CAKR,CAAC;AAE9B;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CACnC,OAAO,EAAE,WAAW,GAClB,iBAAiB,CAanB;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACxC,aAAa,EAAE,WAAW,GAAG,SAAS,GAAG,IAAI,qBAU7C"}

package/build-types/utils/font.d.ts

@@ -3,10 +3,5 @@
  * @param {keyof FONT} value Path of value from `FONT`
  * @return {string} Font rule value
  */
-export function font(value: keyof {
-    'default.fontFamily': string;
-    'default.fontSize': string;
-    'helpText.fontSize': string;
-    mobileTextMinFontSize: string;
-}): string;
+export function font(value: "default.fontFamily" | "default.fontSize" | "helpText.fontSize" | "mobileTextMinFontSize"): string;
 //# sourceMappingURL=font.d.ts.map

package/build-types/utils/font.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/utils/font.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,4BAHW;;;;;CAAU,GACT,MAAM,CAIjB"}
+{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../src/utils/font.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wHAFY,MAAM,CAIjB"}

package/build-types/utils/hooks/use-controlled-state.d.ts

@@ -32,5 +32,5 @@ export type Options<T> = {
  *
  * @return {[T | "", (nextState: T) => void]} The controlled value and the value setter.
  */
-declare function useControlledState<T>(currentState: T | undefined, options?: Options<T> | undefined): ["" | T, (nextState: T) => void];
+declare function useControlledState<T>(currentState: T | undefined, options?: Options<T> | undefined): [T | "", (nextState: T) => void];
 //# sourceMappingURL=use-controlled-state.d.ts.map

package/build-types/utils/hooks/use-controlled-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-controlled-state.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-controlled-state.js"],"names":[],"mappings":";;;;;;;;;cAcc,CAAC,GAAG,EAAE;;AAapB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,kIAFuC,IAAI,EAmC1C"}
+{"version":3,"file":"use-controlled-state.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-controlled-state.js"],"names":[],"mappings":";oBAWa,CAAC;;;;;;;;cAGA,CAAC,GAAG,EAAE;;AAapB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,oCAPa,CAAC,gBAEH,CAAC,GAAG,SAAS,qCAGZ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,CAAC,KAAK,IAAI,CAAC,CAmC3C"}

package/build-types/utils/hooks/use-controlled-value.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props<T> = {
     defaultValue?: T;
     value?: T;

package/build-types/utils/hooks/use-controlled-value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-controlled-value.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-controlled-value.ts"],"names":[],"mappings":";AAKA,KAAK,KAAK,CAAE,CAAC,IAAK;IACjB,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,CAAC,KAAM,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAE,CAAC,EAAI,EACxC,YAAY,EACZ,QAAQ,EACR,KAAK,EAAE,SAAS,GAChB,EAAE,KAAK,CAAE,CAAC,CAAE,qGAmBZ"}
+{"version":3,"file":"use-controlled-value.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-controlled-value.ts"],"names":[],"mappings":"AAKA,KAAK,KAAK,CAAE,CAAC,IAAK;IACjB,YAAY,CAAC,EAAE,CAAC,CAAC;IACjB,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,QAAQ,CAAC,EAAE,CAAE,KAAK,EAAE,CAAC,KAAM,IAAI,CAAC;CAChC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAE,CAAC,EAAI,EACxC,YAAY,EACZ,QAAQ,EACR,KAAK,EAAE,SAAS,GAChB,EAAE,KAAK,CAAE,CAAC,CAAE,qGAmBZ"}

package/build-types/utils/hooks/use-event.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Any function.
+ */
+export type AnyFunction = (...args: any) => any;
+/**
+ * Creates a stable callback function that has access to the latest state and
+ * can be used within event handlers and effect callbacks. Throws when used in
+ * the render phase.
+ *
+ * @example
+ *
+ * ```tsx
+ * function Component(props) {
+ *   const onClick = useEvent(props.onClick);
+ *   React.useEffect(() => {}, [onClick]);
+ * }
+ * ```
+ */
+export declare function useEvent<T extends AnyFunction>(callback?: T): T;
+//# sourceMappingURL=use-event.d.ts.map

package/build-types/utils/hooks/use-event.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-event.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-event.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,CAAE,GAAG,IAAI,EAAE,GAAG,KAAM,GAAG,CAAC;AAElD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAE,CAAC,SAAS,WAAW,EAAI,QAAQ,CAAC,EAAE,CAAC,GAUzD,CAAC,CACN"}

package/build-types/utils/hooks/use-on-value-update.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Context object for the `onUpdate` callback of `useOnValueUpdate`.
+ */
+export type ValueUpdateContext<T> = {
+    previousValue: T;
+};
+/**
+ * Calls the `onUpdate` callback when the `value` changes.
+ */
+export declare function useOnValueUpdate<T>(
+/**
+ * The value to watch for changes.
+ */
+value: T, 
+/**
+ * Callback to fire when the value changes.
+ */
+onUpdate: (context: ValueUpdateContext<T>) => void): void;
+//# sourceMappingURL=use-on-value-update.d.ts.map

package/build-types/utils/hooks/use-on-value-update.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-on-value-update.d.ts","sourceRoot":"","sources":["../../../src/utils/hooks/use-on-value-update.ts"],"names":[],"mappings":"AAUA;;GAEG;AACH,MAAM,MAAM,kBAAkB,CAAE,CAAC,IAAK;IACrC,aAAa,EAAE,CAAC,CAAC;CACjB,CAAC;AAEF;;GAEG;AACH,wBAAgB,gBAAgB,CAAE,CAAC;AAClC;;GAEG;AACH,KAAK,EAAE,CAAC;AACR;;GAEG;AACH,QAAQ,EAAE,CAAE,OAAO,EAAE,kBAAkB,CAAE,CAAC,CAAE,KAAM,IAAI,QAYtD"}

package/build-types/utils/hooks/use-update-effect.d.ts

@@ -7,5 +7,5 @@ export default useUpdateEffect;
  * @param {import('react').EffectCallback} effect
  * @param {import('react').DependencyList} deps
  */
-declare function useUpdateEffect(effect: import('react').EffectCallback, deps: import('react').DependencyList): void;
+declare function useUpdateEffect(effect: import("react").EffectCallback, deps: import("react").DependencyList): void;
 //# sourceMappingURL=use-update-effect.d.ts.map

package/build-types/utils/math.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../src/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,iCAJW,OAAO,GAEN,MAAM,CAMjB;AAED;;;;;;GAMG;AACH,6BAJW,MAAM,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAQjB;AAED;;;;;;GAMG;AACH,kCAJW,MAAM,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAWjB;AAcD;;;;;;;;GAQG;AACH,6BANW,MAAM,OACN,MAAM,OACN,MAAM,GAEL,MAAM,CAKjB;AAED;;;;;;;;;GASG;AACH,mCAPW,MAAM,GAAG,MAAM,QACf,MAAM,QACN,MAAM,SACN,MAAM,GAEL,MAAM,CAiBjB"}
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../src/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,iCAJW,OAAO,GAEN,MAAM,CAMjB;AAED;;;;;;GAMG;AACH,6BAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAQjB;AAED;;;;;;GAMG;AACH,kCAJW,KAAK,CAAC,MAAM,GAAC,MAAM,CAAC,GAEnB,MAAM,CAWjB;AAcD;;;;;;;;GAQG;AACH,6BANW,MAAM,OACN,MAAM,OACN,MAAM,GAEL,MAAM,CAKjB;AAED;;;;;;;;;GASG;AACH,mCAPW,MAAM,GAAG,MAAM,QACf,MAAM,QACN,MAAM,SACN,MAAM,GAEL,MAAM,CAiBjB"}

package/build-types/utils/rtl.d.ts

@@ -6,7 +6,7 @@
  *
  * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer
  */
-export function rtl(ltrStyles?: import('react').CSSProperties, rtlStyles?: import("react").CSSProperties | undefined): () => import('@emotion/react').SerializedStyles;
+export function rtl(ltrStyles?: import("react").CSSProperties, rtlStyles?: import("react").CSSProperties | undefined): () => import("@emotion/react").SerializedStyles;
 export namespace rtl {
     /**
      * Call this in the `useMemo` dependency array to ensure that subsequent renders will
@@ -22,5 +22,5 @@ export namespace rtl {
      */
     function watch(): boolean;
 }
-export function convertLTRToRTL(ltrStyles?: import('react').CSSProperties): import('react').CSSProperties;
+export function convertLTRToRTL(ltrStyles?: import("react").CSSProperties): import("react").CSSProperties;
 //# sourceMappingURL=rtl.d.ts.map

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

@@ -13,7 +13,7 @@ export function isValueDefined<T>(value: T): value is Exclude<T, null | undefine
  * @param {string | number | null | undefined} value The value to check.
  * @return {value is ("" | null | undefined)} Whether value is empty.
  */
-export function isValueEmpty(value: string | number | null | undefined): value is "" | null | undefined;
+export function isValueEmpty(value: string | number | null | undefined): value is ("" | null | undefined);
 /**
  * Get the first defined/non-null value from an array.
  *
@@ -23,7 +23,7 @@ export function isValueEmpty(value: string | number | null | undefined): value i
  * @param {T}                           fallbackValue Fallback value if there are no defined values.
  * @return {T} A defined value or the fallback value.
  */
-export function getDefinedValue<T>(values: (T | null | undefined)[] | undefined, fallbackValue: T): T;
+export function getDefinedValue<T>(values: Array<T | null | undefined> | undefined, fallbackValue: T): T;
 export function stringToNumber(value: string): number;
 export function ensureNumber(value: string | number): number;
 //# sourceMappingURL=values.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"values.d.ts","sourceRoot":"","sources":["../../src/utils/values.js"],"names":[],"mappings":"AACA;;;;;;;GAOG;AACH,mFAEC;AAID;;;;;GAKG;AACH,oCAHW,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,kCAO5C;AAGD;;;;;;;;GAQG;AACH,sGAEC;AAQM,sCAHI,MAAM,GACL,MAAM,CAIjB;AAUM,oCAHI,MAAM,GAAG,MAAM,GACd,MAAM,CAIjB"}
+{"version":3,"file":"values.d.ts","sourceRoot":"","sources":["../../src/utils/values.js"],"names":[],"mappings":"AACA;;;;;;;GAOG;AACH,+BALa,CAAC,SAEH,CAAC,GACA,KAAK,IAAI,OAAO,CAAC,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC,CAIhD;AAID;;;;;GAKG;AACH,oCAHW,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GACjC,KAAK,IAAI,CAAC,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC,CAM3C;AAGD;;;;;;;;GAQG;AACH,gCANa,CAAC,UAEH,KAAK,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,6BAC3B,CAAC,GACA,CAAC,CAIZ;AAQM,sCAHI,MAAM,GACL,MAAM,CAIjB;AAUM,oCAHI,MAAM,GAAG,MAAM,GACd,MAAM,CAIjB"}

package/build-types/utils/with-ignore-ime-events.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * A higher-order function that wraps a keydown event handler to ensure it is not an IME event.
  *

package/build-types/utils/with-ignore-ime-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-ignore-ime-events.d.ts","sourceRoot":"","sources":["../../src/utils/with-ignore-ime-events.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAClC,CAAC,SAAS,KAAK,CAAC,aAAa,GAAG,aAAa,EAC3C,cAAc,EAAE,CAAE,KAAK,EAAE,CAAC,KAAM,IAAI,WACtB,CAAC,UAgBjB"}
+{"version":3,"file":"with-ignore-ime-events.d.ts","sourceRoot":"","sources":["../../src/utils/with-ignore-ime-events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CAClC,CAAC,SAAS,KAAK,CAAC,aAAa,GAAG,aAAa,EAC3C,cAAc,EAAE,CAAE,KAAK,EAAE,CAAC,KAAM,IAAI,WACtB,CAAC,UAgBjB"}

package/build-types/v-stack/component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * `VStack` (or Vertical Stack) is a layout component that arranges child
  * elements in a vertical line.
@@ -23,8 +22,8 @@
  * ```
  */
 export declare const VStack: import("../context").WordPressComponent<"div", Omit<import("../h-stack/types").Props, "spacing" | "alignment"> & {
-    alignment?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "left" | "right" | "bottom" | "top" | "edge" | "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
-    spacing?: import("csstype").Property.Width<string | number> | undefined;
+    alignment?: import("../h-stack/types").HStackAlignment | import("react").CSSProperties["alignItems"];
+    spacing?: import("react").CSSProperties["width"];
 } & import("react").RefAttributes<any>, true>;
 export default VStack;
 //# sourceMappingURL=component.d.ts.map

package/build-types/v-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/v-stack/component.tsx"],"names":[],"mappings":";AAuBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;;;6CAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/v-stack/component.tsx"],"names":[],"mappings":"AAuBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM;;;6CAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}

package/build-types/v-stack/hook.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-/// <reference types="react" />
 /**
  * Internal dependencies
  */
@@ -21,27 +19,27 @@ export declare function useVStack(props: WordPressComponentProps<VStackProps, 'd
     tabIndex?: number | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
-    "aria-autocomplete"?: "both" | "none" | "inline" | "list" | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "false" | "true") | undefined;
-    "aria-checked"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-colcount"?: number | undefined;
     "aria-colindex"?: number | undefined;
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "false" | "true") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "move" | "link" | "execute" | "popup" | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
     "aria-errormessage"?: string | undefined;
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "listbox" | "grid" | "menu" | "false" | "true" | "dialog" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -56,9 +54,9 @@ export declare function useVStack(props: WordPressComponentProps<VStackProps, 'd
     "aria-owns"?: string | undefined;
     "aria-placeholder"?: string | undefined;
     "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | "mixed" | "false" | "true" | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
     "aria-readonly"?: (boolean | "false" | "true") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "false" | "true") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
@@ -242,7 +240,7 @@ export declare function useVStack(props: WordPressComponentProps<VStackProps, 'd
     suppressContentEditableWarning?: boolean | undefined;
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
-    contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
+    contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
@@ -270,7 +268,7 @@ export declare function useVStack(props: WordPressComponentProps<VStackProps, 'd
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "text" | "numeric" | "search" | "tel" | "url" | "email" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
     is?: string | undefined;
     as?: keyof JSX.IntrinsicElements | undefined;
 };

package/build-types/v-stack/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/v-stack/hook.ts"],"names":[],"mappings":";;AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,SAAS,CACxB,KAAK,EAAE,uBAAuB,CAAE,WAAW,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBpD"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../src/v-stack/hook.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAG1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,SAAS,CACxB,KAAK,EAAE,uBAAuB,CAAE,WAAW,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBpD"}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * External dependencies
  */
@@ -7,8 +6,8 @@ import { VStack } from '..';
 declare const meta: Meta<typeof VStack>;
 export default meta;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<import("../../h-stack/types").Props, "spacing" | "alignment"> & {
-    alignment?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | "left" | "right" | "bottom" | "top" | "edge" | "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
-    spacing?: import("csstype").Property.Width<string | number> | undefined;
+    alignment?: import("../../h-stack/types").HStackAlignment | import("react").CSSProperties["alignItems"];
+    spacing?: import("react").CSSProperties["width"];
 } & import("react").RefAttributes<any> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "wrap" | "expanded" | "justify" | "direction" | "spacing" | "children" | "as" | "alignment" | keyof import("react").RefAttributes<any> | "isReversed"> & {
     as?: keyof JSX.IntrinsicElements | undefined;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/v-stack/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAgB5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAkB9B,CAAC;AACF,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,OAAO;;;;;EAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/v-stack/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAMtD,OAAO,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC;AAgB5B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,MAAM,CAkB9B,CAAC;AACF,eAAe,IAAI,CAAC;AAiBpB,eAAO,MAAM,OAAO;;;;;EAAsB,CAAC"}

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

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-/// <reference types="react" />
 /**
  * `View` is a core component that renders everything in the library.
  * It is the principle component in the entire library.

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":";;AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;AAEJ,eAAe,IAAI,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/view/component.tsx"],"names":[],"mappings":"AAwBA;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEd,CAAC;AAEJ,eAAe,IAAI,CAAC"}

package/build-types/visually-hidden/component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { VisuallyHiddenProps } from './types';
 /**
  * `VisuallyHidden` is a component used to render text intended to be visually

package/build-types/visually-hidden/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":";AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,gHAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/visually-hidden/component.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAmBnD;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,cAAc,gHAG1B,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/build-types/z-stack/component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ZStackProps } from './types';
 /**
  * `ZStack` allows you to stack things along the Z-axis.

package/build-types/z-stack/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkD3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,wGAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../src/z-stack/component.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAkD3C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,wGAAgD,CAAC;AAEpE,eAAe,MAAM,CAAC"}

package/build-types/z-stack/styles.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 export declare const ZStackChildView: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     offsetAmount: number;
     zIndex: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ZStackView: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     isLayered: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build-types/z-stack/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/z-stack/styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,eAAe;;;;kBACb,MAAM;YACZ,MAAM;yGAUd,CAAC;AAEF,eAAO,MAAM,UAAU;;;;eACX,OAAO;yGAgBlB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/z-stack/styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe;;SAqBF,MACrB,WAAW;;kBArBD,MAAM;YACZ,MAAM;yGAUd,CAAC;AAEF,eAAO,MAAM,UAAU;;eAQlB,WAAW;;eAPJ,OAAO;yGAgBlB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "28.3.0",
+	"version": "28.4.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,29 +43,28 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.3.0",
-		"@wordpress/compose": "^7.3.0",
-		"@wordpress/date": "^5.3.0",
-		"@wordpress/deprecated": "^4.3.0",
-		"@wordpress/dom": "^4.3.0",
-		"@wordpress/element": "^6.3.0",
-		"@wordpress/escape-html": "^3.3.0",
-		"@wordpress/hooks": "^4.3.0",
-		"@wordpress/html-entities": "^4.3.0",
-		"@wordpress/i18n": "^5.3.0",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/is-shallow-equal": "^5.3.0",
-		"@wordpress/keycodes": "^4.3.0",
-		"@wordpress/primitives": "^4.3.0",
-		"@wordpress/private-apis": "^1.3.0",
-		"@wordpress/rich-text": "^7.3.0",
-		"@wordpress/warning": "^3.3.0",
+		"@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",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
 		"date-fns": "^3.6.0",
 		"deepmerge": "^4.3.0",
-		"downshift": "^6.0.15",
 		"fast-deep-equal": "^3.1.3",
 		"framer-motion": "^11.1.9",
 		"gradient-parser": "^0.1.5",
@@ -86,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
+	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
 }

package/src/autocomplete/README.md

@@ -8,7 +8,7 @@ The following props are used to control the behavior of the component.
 
 ### record
 
-The rich text value object the autocomleter is being applied to.
+The rich text value object the autocompleter is being applied to.
 
 -   Required: Yes
 -   Type: `RichTextValue`
@@ -50,7 +50,7 @@ A function that returns nodes to be rendered within the Autocomplete.
 
 ### isSelected
 
-Whether or not the Autocomplte componenet is selected, and if its `Popover` should be displayed.
+Whether or not the Autocomplete component is selected, and if its `Popover` should be displayed.
 
 - Required: Yes
 - Type: `Boolean`

package/src/autocomplete/types.ts

@@ -200,9 +200,8 @@ export type AutocompleteProps = UseAutocompleteProps & {
 		props: Omit< ReturnType< typeof useAutocomplete >, 'popover' >
 	) => React.ReactNode;
 	/**
-	 * Whether or not the Autocomplte componenet is selected, and if its
-	 * `Popover`
-	 * should be displayed.
+	 * Whether or not the Autocomplete component is selected, and if its
+	 * `Popover` should be displayed.
 	 */
 	isSelected: boolean;
 };

package/src/base-control/README.md

@@ -53,7 +53,7 @@ If true, the label will only be visible to screen readers.
 
 ### help
 
-Additional description for the control. The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
+Additional description for the control. Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 
 -   Type: `ReactNode`
 -   Required: No

package/src/base-control/types.ts

@@ -21,7 +21,7 @@ export type BaseControlProps = {
 	/**
 	 * Additional description for the control.
 	 *
-	 * The element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
+	 * Only use for meaningful description or instructions for the control. An element containing the description will be programmatically associated to the BaseControl by the means of an `aria-describedby` attribute.
 	 */
 	help?: ReactNode;
 	/**

package/src/button/README.md

@@ -138,7 +138,7 @@ An optional additional class name to apply to the rendered button.
 
 -   Required: No
 
-#### `describedBy`: `string`
+#### `description`: `string`
 
 An accessible description for the button.