@ariakit/react-core 0.3.11 → 0.3.13

package/cjs/composite/composite-container.cjs

@@ -2,16 +2,16 @@
 
 
 
-var _VQJ44BSYcjs = require('../__chunks/VQJ44BSY.cjs');
-require('../__chunks/RV3PHHWM.cjs');
+var _JQS6X2I5cjs = require('../__chunks/JQS6X2I5.cjs');
+require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CompositeContainer = _VQJ44BSYcjs.CompositeContainer; exports.useCompositeContainer = _VQJ44BSYcjs.useCompositeContainer;
+exports.CompositeContainer = _JQS6X2I5cjs.CompositeContainer; exports.useCompositeContainer = _JQS6X2I5cjs.useCompositeContainer;

package/cjs/composite/composite-container.d.cts

@@ -20,24 +20,31 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeContainer: import("../utils/types.js").Hook<CompositeContainerOptions<"div">>;
 /**
  * Renders a container for interactive widgets inside composite items. This
- * should be used in conjunction with the `CompositeItem` component or a
- * component that uses `CompositeItem` underneath.
+ * should be used in conjunction with the
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) component or
+ * a component that uses
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) underneath.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem render={<CompositeContainer />}>
- *     <input type="text" />
- *   </CompositeItem>
- * </Composite>
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem render={<CompositeContainer />}>
+ *       <input type="text" />
+ *     </CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeContainer: import("../utils/types.js").Component<CompositeContainerOptions<"div">>;
 export interface CompositeContainerOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-container.d.ts

@@ -20,24 +20,31 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeContainer: import("../utils/types.js").Hook<CompositeContainerOptions<"div">>;
 /**
  * Renders a container for interactive widgets inside composite items. This
- * should be used in conjunction with the `CompositeItem` component or a
- * component that uses `CompositeItem` underneath.
+ * should be used in conjunction with the
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) component or
+ * a component that uses
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) underneath.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem render={<CompositeContainer />}>
- *     <input type="text" />
- *   </CompositeItem>
- * </Composite>
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem render={<CompositeContainer />}>
+ *       <input type="text" />
+ *     </CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeContainer: import("../utils/types.js").Component<CompositeContainerOptions<"div">>;
 export interface CompositeContainerOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-group-label.d.cts

@@ -16,26 +16,31 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeGroupLabel: import("../utils/types.js").Hook<CompositeGroupLabelOptions<"div">>;
 /**
  * Renders a label in a composite group. This component must be wrapped with
- * `CompositeGroup` so the `aria-labelledby` prop is properly set on the
- * composite group element.
+ * [`CompositeGroup`](https://ariakit.org/reference/composite-group) so the
+ * `aria-labelledby` prop is properly set on the group element.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeGroup>
- *     <CompositeGroupLabel>Label</CompositeGroupLabel>
- *     <CompositeItem>Item 1</CompositeItem>
- *     <CompositeItem>Item 2</CompositeItem>
- *   </CompositeGroup>
- * </Composite>
+ * ```jsx {4}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeGroup>
+ *       <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *       <CompositeItem>Item 1</CompositeItem>
+ *       <CompositeItem>Item 2</CompositeItem>
+ *     </CompositeGroup>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeGroupLabel: import("../utils/types.js").Component<CompositeGroupLabelOptions<"div">>;
 export interface CompositeGroupLabelOptions<T extends As = "div"> extends GroupLabelOptions<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-group-label.d.ts

@@ -16,26 +16,31 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeGroupLabel: import("../utils/types.js").Hook<CompositeGroupLabelOptions<"div">>;
 /**
  * Renders a label in a composite group. This component must be wrapped with
- * `CompositeGroup` so the `aria-labelledby` prop is properly set on the
- * composite group element.
+ * [`CompositeGroup`](https://ariakit.org/reference/composite-group) so the
+ * `aria-labelledby` prop is properly set on the group element.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeGroup>
- *     <CompositeGroupLabel>Label</CompositeGroupLabel>
- *     <CompositeItem>Item 1</CompositeItem>
- *     <CompositeItem>Item 2</CompositeItem>
- *   </CompositeGroup>
- * </Composite>
+ * ```jsx {4}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeGroup>
+ *       <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *       <CompositeItem>Item 1</CompositeItem>
+ *       <CompositeItem>Item 2</CompositeItem>
+ *     </CompositeGroup>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeGroupLabel: import("../utils/types.js").Component<CompositeGroupLabelOptions<"div">>;
 export interface CompositeGroupLabelOptions<T extends As = "div"> extends GroupLabelOptions<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-group.d.cts

@@ -19,25 +19,33 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeGroup: import("../utils/types.js").Hook<CompositeGroupOptions<"div">>;
 /**
- * Renders a group element for composite items.
+ * Renders a group element for composite items. The
+ * [`CompositeGroupLabel`](https://ariakit.org/reference/composite-group-label)
+ * component can be used inside this component so the `aria-labelledby` prop is
+ * properly set on the group element.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeGroup>
- *     <CompositeGroupLabel>Label</CompositeGroupLabel>
- *     <CompositeItem>Item 1</CompositeItem>
- *     <CompositeItem>Item 2</CompositeItem>
- *   </CompositeGroup>
- * </Composite>
+ * ```jsx {3-7}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeGroup>
+ *       <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *       <CompositeItem>Item 1</CompositeItem>
+ *       <CompositeItem>Item 2</CompositeItem>
+ *     </CompositeGroup>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeGroup: import("../utils/types.js").Component<CompositeGroupOptions<"div">>;
 export interface CompositeGroupOptions<T extends As = "div"> extends GroupOptions<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-group.d.ts

@@ -19,25 +19,33 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeGroup: import("../utils/types.js").Hook<CompositeGroupOptions<"div">>;
 /**
- * Renders a group element for composite items.
+ * Renders a group element for composite items. The
+ * [`CompositeGroupLabel`](https://ariakit.org/reference/composite-group-label)
+ * component can be used inside this component so the `aria-labelledby` prop is
+ * properly set on the group element.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeGroup>
- *     <CompositeGroupLabel>Label</CompositeGroupLabel>
- *     <CompositeItem>Item 1</CompositeItem>
- *     <CompositeItem>Item 2</CompositeItem>
- *   </CompositeGroup>
- * </Composite>
+ * ```jsx {3-7}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeGroup>
+ *       <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *       <CompositeItem>Item 1</CompositeItem>
+ *       <CompositeItem>Item 2</CompositeItem>
+ *     </CompositeGroup>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeGroup: import("../utils/types.js").Component<CompositeGroupOptions<"div">>;
 export interface CompositeGroupOptions<T extends As = "div"> extends GroupOptions<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-hover.d.cts

@@ -19,16 +19,25 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeHover: import("../utils/types.js").Hook<CompositeHoverOptions<"div">>;
 /**
  * Renders an element in a composite widget that receives focus on mouse move
- * and loses focus to the composite base element on mouse leave. This should be
- * combined with the `CompositeItem` component, the `useCompositeItem` hook or
- * any component/hook that uses them underneath.
+ * and loses focus to the composite base element on mouse leave.
+ *
+ * This should be combined with the
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) component.
+ * The
+ * [`focusOnHover`](https://ariakit.org/reference/composite-hover#focusonhover)
+ * and
+ * [`blurOnHoverEnd`](https://ariakit.org/reference/composite-hover#bluronhoverend)
+ * props can be used to customize the behavior.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeHover render={<CompositeItem />}>Item</CompositeHover>
- * </Composite>
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeHover render={<CompositeItem />}>
+ *       Item
+ *     </CompositeHover>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeHover: import("../utils/types.js").Component<CompositeHoverOptions<"div">>;
@@ -60,6 +69,7 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
      * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @default true
      */
     focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
@@ -75,6 +85,7 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
      *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     blurOnHoverEnd?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
 }

package/cjs/composite/composite-hover.d.ts

@@ -19,16 +19,25 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeHover: import("../utils/types.js").Hook<CompositeHoverOptions<"div">>;
 /**
  * Renders an element in a composite widget that receives focus on mouse move
- * and loses focus to the composite base element on mouse leave. This should be
- * combined with the `CompositeItem` component, the `useCompositeItem` hook or
- * any component/hook that uses them underneath.
+ * and loses focus to the composite base element on mouse leave.
+ *
+ * This should be combined with the
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) component.
+ * The
+ * [`focusOnHover`](https://ariakit.org/reference/composite-hover#focusonhover)
+ * and
+ * [`blurOnHoverEnd`](https://ariakit.org/reference/composite-hover#bluronhoverend)
+ * props can be used to customize the behavior.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeHover render={<CompositeItem />}>Item</CompositeHover>
- * </Composite>
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeHover render={<CompositeItem />}>
+ *       Item
+ *     </CompositeHover>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeHover: import("../utils/types.js").Component<CompositeHoverOptions<"div">>;
@@ -60,6 +69,7 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
      * - [Navigation Menubar](https://ariakit.org/examples/menubar-navigation)
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @default true
      */
     focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
@@ -75,6 +85,7 @@ export interface CompositeHoverOptions<T extends As = "div"> extends Options<T>
      *   filter](https://ariakit.org/examples/combobox-filtering-integrated)
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     blurOnHoverEnd?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
 }

package/cjs/composite/composite-input.cjs

@@ -2,8 +2,8 @@
 
 
 
-var _FM5S6RADcjs = require('../__chunks/FM5S6RAD.cjs');
-require('../__chunks/RV3PHHWM.cjs');
+var _XW252ITLcjs = require('../__chunks/XW252ITL.cjs');
+require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/RNZNGEL4.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -11,4 +11,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CompositeInput = _FM5S6RADcjs.CompositeInput; exports.useCompositeInput = _FM5S6RADcjs.useCompositeInput;
+exports.CompositeInput = _XW252ITLcjs.CompositeInput; exports.useCompositeInput = _XW252ITLcjs.useCompositeInput;

package/cjs/composite/composite-input.d.cts

@@ -17,22 +17,28 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeInput: import("../utils/types.js").Hook<CompositeInputOptions<"input">>;
 /**
  * Renders an input as a composite item. This should be used in conjunction with
- * the `CompositeItem` component or a component that uses `CompositeItem`
- * underneath.
+ * the [`CompositeItem`](https://ariakit.org/reference/composite-item) component
+ * or a component that uses
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) underneath.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem render={<CompositeInput />} />
- * </Composite>
+ * ```jsx {3}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem render={<CompositeInput />} />
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeInput: import("../utils/types.js").Component<CompositeInputOptions<"input">>;
 export interface CompositeInputOptions<T extends As = "input"> extends Options<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-input.d.ts

@@ -17,22 +17,28 @@ import type { CompositeStore } from "./composite-store.js";
 export declare const useCompositeInput: import("../utils/types.js").Hook<CompositeInputOptions<"input">>;
 /**
  * Renders an input as a composite item. This should be used in conjunction with
- * the `CompositeItem` component or a component that uses `CompositeItem`
- * underneath.
+ * the [`CompositeItem`](https://ariakit.org/reference/composite-item) component
+ * or a component that uses
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) underneath.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem render={<CompositeInput />} />
- * </Composite>
+ * ```jsx {3}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem render={<CompositeInput />} />
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeInput: import("../utils/types.js").Component<CompositeInputOptions<"input">>;
 export interface CompositeInputOptions<T extends As = "input"> extends Options<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-item.cjs

@@ -2,20 +2,20 @@
 
 
 
-var _3RUODFRUcjs = require('../__chunks/3RUODFRU.cjs');
-require('../__chunks/DAJUUBUI.cjs');
+var _GSETTLOUcjs = require('../__chunks/GSETTLOU.cjs');
+require('../__chunks/OSTQZD2E.cjs');
 require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/RV3PHHWM.cjs');
+require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/VUEWHLYH.cjs');
 require('../__chunks/75KXQZJX.cjs');
 require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CompositeItem = _3RUODFRUcjs.CompositeItem; exports.useCompositeItem = _3RUODFRUcjs.useCompositeItem;
+exports.CompositeItem = _GSETTLOUcjs.CompositeItem; exports.useCompositeItem = _GSETTLOUcjs.useCompositeItem;

package/cjs/composite/composite-item.d.cts

@@ -16,16 +16,27 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeItem: import("../utils/types.js").Hook<CompositeItemOptions<"button">>;
 /**
- * Renders a composite item.
+ * Renders a focusable item as part of a composite widget. The `tabindex`
+ * attribute is automatically managed by this component based on the
+ * [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus)
+ * option.
+ *
+ * When this component receives DOM focus or is virtually focused (when the
+ * [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus)
+ * option is set to `true`), the element will automatically receive the
+ * [`data-active-item`](https://ariakit.org/guide/styling#data-active-item)
+ * attribute. This can be used to style the focused item, no matter the focus
+ * approach employed.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem>Item 1</CompositeItem>
- *   <CompositeItem>Item 2</CompositeItem>
- *   <CompositeItem>Item 3</CompositeItem>
- * </Composite>
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeItem: import("../utils/types.js").Component<CompositeItemOptions<"button">>;
@@ -39,6 +50,14 @@ export interface CompositeItemOptions<T extends As = "button"> extends CommandOp
      * components' context will be used.
      */
     store?: CompositeStore;
+    /**
+     * Determines if the item should be registered as part of the collection. If
+     * this is set to `false`, the item won't be accessible via arrow keys.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     */
+    shouldRegisterItem?: CollectionItemOptions<T>["shouldRegisterItem"];
     /**
      * The id that will be used to group items in the same row. This is usually
      * retrieved by the
@@ -49,12 +68,33 @@ export interface CompositeItemOptions<T extends As = "button"> extends CommandOp
     /**
      * Whether the scroll behavior should be prevented when pressing arrow keys on
      * the first or the last items.
+     * @deprecated Use CSS
+     * [`scroll-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin)
+     * instead.
      * @default false
      */
     preventScrollOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**
-     * Whether pressing arrow keys should move the focus to a different item.
+     * Determines if pressing arrow keys while this item is in focus should move
+     * focus to a different item.
+     *
+     * **Note**: To entirely disable focus moving within a composite widget, you
+     * can use the
+     * [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) prop
+     * on the composite component instead. If you want to control the behavior
+     * _only when arrow keys are pressed_, where
+     * [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) may
+     * not be applicable, this prop must be set on all composite items because
+     * they each manage their own key presses, as well as on the composite
+     * component itself.
      * @default true
+     * @example
+     * ```jsx
+     * <Composite moveOnKeyPress={false}>
+     *   <CompositeItem moveOnKeyPress={false} />
+     *   <CompositeItem moveOnKeyPress={false} />
+     * </Composite>
+     * ```
      */
     moveOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**