@ariakit/core 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @ariakit/core
 
+## 0.4.2
+
+- Fixed [`Focusable`](https://ariakit.org/reference/focusable) to identify `summary` as a native tabbable element.
+- Added new [`composite`](https://ariakit.org/reference/tab-provider#composite) property to tab store.
+- Improved JSDocs.
+
+## 0.4.1
+
+- Added [`disclosure`](https://ariakit.org/reference/use-disclosure-store#disclosure-1) property to disclosure stores.
+- Improved JSDocs.
+
 ## 0.4.0
 
 ### Improved animation support

package/cjs/collection/collection-store.d.cts

@@ -52,6 +52,9 @@ export interface CollectionStoreFunctions<T extends CollectionStoreItem = Collec
     renderItem: BivariantCallback<(item: T) => () => void>;
     /**
      * Gets an item by its id.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      * @example
      * const item = store.item("item-1");
      */

package/cjs/collection/collection-store.d.ts

@@ -52,6 +52,9 @@ export interface CollectionStoreFunctions<T extends CollectionStoreItem = Collec
     renderItem: BivariantCallback<(item: T) => () => void>;
     /**
      * Gets an item by its id.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      * @example
      * const item = store.item("item-1");
      */

package/cjs/combobox/combobox-store.d.cts

@@ -13,10 +13,16 @@ export interface ComboboxStoreItem extends CompositeStoreItem {
     value?: string;
 }
 export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends CompositeStoreState<ComboboxStoreItem>, PopoverStoreState {
-    /**
-     * @default true
-     */
-    includesBaseElement: boolean;
+    /** @default true */
+    includesBaseElement: CompositeStoreState<ComboboxStoreItem>["includesBaseElement"];
+    /** @default true */
+    focusLoop: CompositeStoreState<ComboboxStoreItem>["focusLoop"];
+    /** @default true */
+    focusWrap: CompositeStoreState<ComboboxStoreItem>["focusWrap"];
+    /** @default "vertical" */
+    orientation: CompositeStoreState<ComboboxStoreItem>["orientation"];
+    /** @default true */
+    virtualFocus: CompositeStoreState<ComboboxStoreItem>["virtualFocus"];
     /**
      * The combobox input value.
      *
@@ -63,6 +69,7 @@ export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = Combo
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      */
     resetValueOnHide: boolean;
     /**
@@ -100,10 +107,8 @@ export interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = C
      */
     setSelectedValue: SetState<ComboboxStoreState<T>["selectedValue"]>;
 }
-export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions, StoreOptions<ComboboxStoreState<T>, "includesBaseElement" | "value" | "selectedValue" | "resetValueOnHide" | "resetValueOnSelect"> {
-    /**
-     * @default null
-     */
+export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends StoreOptions<ComboboxStoreState<T>, "includesBaseElement" | "focusLoop" | "focusWrap" | "orientation" | "virtualFocus" | "value" | "selectedValue" | "resetValueOnHide" | "resetValueOnSelect">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
+    /** @default null */
     defaultActiveId?: CompositeStoreOptions<ComboboxStoreItem>["activeId"];
     /**
      * The initial value of the combobox input.

package/cjs/combobox/combobox-store.d.ts

@@ -13,10 +13,16 @@ export interface ComboboxStoreItem extends CompositeStoreItem {
     value?: string;
 }
 export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends CompositeStoreState<ComboboxStoreItem>, PopoverStoreState {
-    /**
-     * @default true
-     */
-    includesBaseElement: boolean;
+    /** @default true */
+    includesBaseElement: CompositeStoreState<ComboboxStoreItem>["includesBaseElement"];
+    /** @default true */
+    focusLoop: CompositeStoreState<ComboboxStoreItem>["focusLoop"];
+    /** @default true */
+    focusWrap: CompositeStoreState<ComboboxStoreItem>["focusWrap"];
+    /** @default "vertical" */
+    orientation: CompositeStoreState<ComboboxStoreItem>["orientation"];
+    /** @default true */
+    virtualFocus: CompositeStoreState<ComboboxStoreItem>["virtualFocus"];
     /**
      * The combobox input value.
      *
@@ -63,6 +69,7 @@ export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = Combo
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      */
     resetValueOnHide: boolean;
     /**
@@ -100,10 +107,8 @@ export interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = C
      */
     setSelectedValue: SetState<ComboboxStoreState<T>["selectedValue"]>;
 }
-export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions, StoreOptions<ComboboxStoreState<T>, "includesBaseElement" | "value" | "selectedValue" | "resetValueOnHide" | "resetValueOnSelect"> {
-    /**
-     * @default null
-     */
+export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends StoreOptions<ComboboxStoreState<T>, "includesBaseElement" | "focusLoop" | "focusWrap" | "orientation" | "virtualFocus" | "value" | "selectedValue" | "resetValueOnHide" | "resetValueOnSelect">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
+    /** @default null */
     defaultActiveId?: CompositeStoreOptions<ComboboxStoreItem>["activeId"];
     /**
      * The initial value of the combobox input.

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

@@ -112,6 +112,9 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
      *   matches the value of `focusLoop`, it'll wrap between the last item in the
      *   last row or column and the first item in the first row or column and
      *   vice-versa.
+     *
+     * Live examples:
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * @default false
      */
     focusLoop: boolean | Orientation;
@@ -156,7 +159,7 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
      * Live examples:
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * @default false
      */
     includesBaseElement: boolean;
@@ -190,9 +193,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * state _without moving focus_. If you want to move focus, use the
      * [`move`](https://ariakit.org/reference/use-composite-store#move) function
      * instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * // Sets the composite element as the active item
      * store.setActiveId(null);
@@ -226,9 +226,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * Returns the id of the next enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * const nextId = store.next();
      * const nextNextId = store.next(2);
@@ -238,9 +235,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * Returns the id of the previous enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * const previousId = store.previous();
      * const previousPreviousId = store.previous(2);
@@ -266,16 +260,10 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
     down: (skip?: number) => string | null | undefined;
     /**
      * Returns the id of the first enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     first: () => string | null | undefined;
     /**
      * Returns the id of the last enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     last: () => string | null | undefined;
 }

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

@@ -112,6 +112,9 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
      *   matches the value of `focusLoop`, it'll wrap between the last item in the
      *   last row or column and the first item in the first row or column and
      *   vice-versa.
+     *
+     * Live examples:
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * @default false
      */
     focusLoop: boolean | Orientation;
@@ -156,7 +159,7 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
      * Live examples:
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * @default false
      */
     includesBaseElement: boolean;
@@ -190,9 +193,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * state _without moving focus_. If you want to move focus, use the
      * [`move`](https://ariakit.org/reference/use-composite-store#move) function
      * instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * // Sets the composite element as the active item
      * store.setActiveId(null);
@@ -226,9 +226,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * Returns the id of the next enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * const nextId = store.next();
      * const nextNextId = store.next(2);
@@ -238,9 +235,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * Returns the id of the previous enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * const previousId = store.previous();
      * const previousPreviousId = store.previous(2);
@@ -266,16 +260,10 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
     down: (skip?: number) => string | null | undefined;
     /**
      * Returns the id of the first enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     first: () => string | null | undefined;
     /**
      * Returns the id of the last enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     last: () => string | null | undefined;
 }

package/cjs/hovercard/hovercard-store.d.cts

@@ -6,9 +6,7 @@ import type { SetState } from "../utils/types.js";
  */
 export declare function createHovercardStore(props?: HovercardStoreProps): HovercardStore;
 export interface HovercardStoreState extends PopoverStoreState {
-    /**
-     * @default "bottom"
-     */
+    /** @default "bottom" */
     placement: PopoverStoreState["placement"];
     /**
      * The amount of time in milliseconds to wait before showing and hiding the
@@ -57,7 +55,7 @@ export interface HovercardStoreFunctions extends PopoverStoreFunctions {
      */
     setAutoFocusOnShow: SetState<HovercardStoreState["autoFocusOnShow"]>;
 }
-export interface HovercardStoreOptions extends PopoverStoreOptions, StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout"> {
+export interface HovercardStoreOptions extends StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout">, PopoverStoreOptions {
 }
 export interface HovercardStoreProps extends HovercardStoreOptions, StoreProps<HovercardStoreState> {
 }

package/cjs/hovercard/hovercard-store.d.ts

@@ -6,9 +6,7 @@ import type { SetState } from "../utils/types.js";
  */
 export declare function createHovercardStore(props?: HovercardStoreProps): HovercardStore;
 export interface HovercardStoreState extends PopoverStoreState {
-    /**
-     * @default "bottom"
-     */
+    /** @default "bottom" */
     placement: PopoverStoreState["placement"];
     /**
      * The amount of time in milliseconds to wait before showing and hiding the
@@ -57,7 +55,7 @@ export interface HovercardStoreFunctions extends PopoverStoreFunctions {
      */
     setAutoFocusOnShow: SetState<HovercardStoreState["autoFocusOnShow"]>;
 }
-export interface HovercardStoreOptions extends PopoverStoreOptions, StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout"> {
+export interface HovercardStoreOptions extends StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout">, PopoverStoreOptions {
 }
 export interface HovercardStoreProps extends HovercardStoreOptions, StoreProps<HovercardStoreState> {
 }

package/cjs/menu/menu-store.d.cts

@@ -8,6 +8,12 @@ export declare function createMenuStore<T extends MenuStoreValues = MenuStoreVal
 export declare function createMenuStore(props?: MenuStoreProps): MenuStore;
 export type MenuStoreValues = Record<string, string | boolean | number | Array<string | number>>;
 export interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreState, HovercardStoreState {
+    /** @default "vertical" */
+    orientation: CompositeStoreState["orientation"];
+    /** @default "bottom-start" */
+    placement: HovercardStoreState["placement"];
+    /** @default 0 */
+    hideTimeout?: HovercardStoreState["hideTimeout"];
     /**
      * Determines the element that should be focused when the menu is opened.
      */
@@ -24,12 +30,6 @@ export interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues> ext
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      */
     values: T;
-    /** @default "vertical" */
-    orientation: CompositeStoreState["orientation"];
-    /** @default "bottom-start" */
-    placement: HovercardStoreState["placement"];
-    /** @default 0 */
-    hideTimeout?: HovercardStoreState["hideTimeout"];
 }
 export interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreFunctions, HovercardStoreFunctions, Pick<MenuStoreOptions, "combobox" | "parent" | "menubar"> {
     /**
@@ -64,7 +64,7 @@ export interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues>
      */
     setValue: BivariantCallback<(name: string, value: SetStateAction<MenuStoreState<T>["values"][string]>) => void>;
 }
-export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreOptions, HovercardStoreOptions, StoreOptions<MenuStoreState<T>, "orientation" | "placement" | "hideTimeout" | "values"> {
+export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> extends StoreOptions<MenuStoreState<T>, "orientation" | "placement" | "hideTimeout" | "values">, CompositeStoreOptions, HovercardStoreOptions {
     /**
      * A reference to a combobox store. This is used when combining the combobox
      * with a menu (e.g., dropdown menu with a search input). The stores will

package/cjs/menu/menu-store.d.ts

@@ -8,6 +8,12 @@ export declare function createMenuStore<T extends MenuStoreValues = MenuStoreVal
 export declare function createMenuStore(props?: MenuStoreProps): MenuStore;
 export type MenuStoreValues = Record<string, string | boolean | number | Array<string | number>>;
 export interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreState, HovercardStoreState {
+    /** @default "vertical" */
+    orientation: CompositeStoreState["orientation"];
+    /** @default "bottom-start" */
+    placement: HovercardStoreState["placement"];
+    /** @default 0 */
+    hideTimeout?: HovercardStoreState["hideTimeout"];
     /**
      * Determines the element that should be focused when the menu is opened.
      */
@@ -24,12 +30,6 @@ export interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues> ext
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      */
     values: T;
-    /** @default "vertical" */
-    orientation: CompositeStoreState["orientation"];
-    /** @default "bottom-start" */
-    placement: HovercardStoreState["placement"];
-    /** @default 0 */
-    hideTimeout?: HovercardStoreState["hideTimeout"];
 }
 export interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreFunctions, HovercardStoreFunctions, Pick<MenuStoreOptions, "combobox" | "parent" | "menubar"> {
     /**
@@ -64,7 +64,7 @@ export interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues>
      */
     setValue: BivariantCallback<(name: string, value: SetStateAction<MenuStoreState<T>["values"][string]>) => void>;
 }
-export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreOptions, HovercardStoreOptions, StoreOptions<MenuStoreState<T>, "orientation" | "placement" | "hideTimeout" | "values"> {
+export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> extends StoreOptions<MenuStoreState<T>, "orientation" | "placement" | "hideTimeout" | "values">, CompositeStoreOptions, HovercardStoreOptions {
     /**
      * A reference to a combobox store. This is used when combining the combobox
      * with a menu (e.g., dropdown menu with a search input). The stores will

package/cjs/radio/radio-store.d.cts

@@ -6,9 +6,7 @@ import type { SetState } from "../utils/types.js";
  */
 export declare function createRadioStore({ ...props }?: RadioStoreProps): RadioStore;
 export interface RadioStoreState extends CompositeStoreState {
-    /**
-     * @default true
-     */
+    /** @default true */
     focusLoop: CompositeStoreState["focusLoop"];
     /**
      * The value of the radio group.
@@ -26,7 +24,7 @@ export interface RadioStoreFunctions extends CompositeStoreFunctions {
      */
     setValue: SetState<RadioStoreState["value"]>;
 }
-export interface RadioStoreOptions extends CompositeStoreOptions, StoreOptions<RadioStoreState, "focusLoop" | "value"> {
+export interface RadioStoreOptions extends StoreOptions<RadioStoreState, "focusLoop" | "value">, CompositeStoreOptions {
     /**
      * The default value of the radio group.
      * @default null

package/cjs/radio/radio-store.d.ts

@@ -6,9 +6,7 @@ import type { SetState } from "../utils/types.js";
  */
 export declare function createRadioStore({ ...props }?: RadioStoreProps): RadioStore;
 export interface RadioStoreState extends CompositeStoreState {
-    /**
-     * @default true
-     */
+    /** @default true */
     focusLoop: CompositeStoreState["focusLoop"];
     /**
      * The value of the radio group.
@@ -26,7 +24,7 @@ export interface RadioStoreFunctions extends CompositeStoreFunctions {
      */
     setValue: SetState<RadioStoreState["value"]>;
 }
-export interface RadioStoreOptions extends CompositeStoreOptions, StoreOptions<RadioStoreState, "focusLoop" | "value"> {
+export interface RadioStoreOptions extends StoreOptions<RadioStoreState, "focusLoop" | "value">, CompositeStoreOptions {
     /**
      * The default value of the radio group.
      * @default null

package/cjs/select/select-store.d.cts

@@ -13,8 +13,6 @@ export interface SelectStoreItem extends CompositeStoreItem {
 export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue> extends CompositeStoreState<SelectStoreItem>, PopoverStoreState {
     /** @default true */
     virtualFocus: CompositeStoreState<SelectStoreItem>["virtualFocus"];
-    /** @default false */
-    includesBaseElement: CompositeStoreState<SelectStoreItem>["includesBaseElement"];
     /** @default null */
     activeId: CompositeStoreState<SelectStoreItem>["activeId"];
     /** @default "vertical" */
@@ -31,6 +29,8 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
      *   items](https://ariakit.org/examples/select-item-custom)
      * - [Multi-Select](https://ariakit.org/examples/select-multiple)
      * - [Toolbar with Select](https://ariakit.org/examples/toolbar-select)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
     value: MutableValue<T>;
     /**
@@ -77,7 +77,7 @@ export interface SelectStoreFunctions<T extends SelectStoreValue = SelectStoreVa
      */
     setLabelElement: SetState<SelectStoreState<T>["labelElement"]>;
 }
-export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValue> extends CompositeStoreOptions<SelectStoreItem>, PopoverStoreOptions, StoreOptions<SelectStoreState<T>, "virtualFocus" | "includesBaseElement" | "activeId" | "orientation" | "placement" | "value" | "setValueOnMove"> {
+export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValue> extends StoreOptions<SelectStoreState<T>, "virtualFocus" | "activeId" | "orientation" | "placement" | "value" | "setValueOnMove">, CompositeStoreOptions<SelectStoreItem>, PopoverStoreOptions {
     /**
      * A reference to a combobox store. This is used when combining the combobox
      * with a select (e.g., select with a search input). The stores will share the
@@ -92,6 +92,8 @@ export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValu
      * - [Animated Select](https://ariakit.org/examples/select-animated)
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * - [SelectGroup](https://ariakit.org/examples/select-group)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
     defaultValue?: SelectStoreState<T>["value"];
 }

package/cjs/select/select-store.d.ts

@@ -13,8 +13,6 @@ export interface SelectStoreItem extends CompositeStoreItem {
 export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue> extends CompositeStoreState<SelectStoreItem>, PopoverStoreState {
     /** @default true */
     virtualFocus: CompositeStoreState<SelectStoreItem>["virtualFocus"];
-    /** @default false */
-    includesBaseElement: CompositeStoreState<SelectStoreItem>["includesBaseElement"];
     /** @default null */
     activeId: CompositeStoreState<SelectStoreItem>["activeId"];
     /** @default "vertical" */
@@ -31,6 +29,8 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
      *   items](https://ariakit.org/examples/select-item-custom)
      * - [Multi-Select](https://ariakit.org/examples/select-multiple)
      * - [Toolbar with Select](https://ariakit.org/examples/toolbar-select)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
     value: MutableValue<T>;
     /**
@@ -77,7 +77,7 @@ export interface SelectStoreFunctions<T extends SelectStoreValue = SelectStoreVa
      */
     setLabelElement: SetState<SelectStoreState<T>["labelElement"]>;
 }
-export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValue> extends CompositeStoreOptions<SelectStoreItem>, PopoverStoreOptions, StoreOptions<SelectStoreState<T>, "virtualFocus" | "includesBaseElement" | "activeId" | "orientation" | "placement" | "value" | "setValueOnMove"> {
+export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValue> extends StoreOptions<SelectStoreState<T>, "virtualFocus" | "activeId" | "orientation" | "placement" | "value" | "setValueOnMove">, CompositeStoreOptions<SelectStoreItem>, PopoverStoreOptions {
     /**
      * A reference to a combobox store. This is used when combining the combobox
      * with a select (e.g., select with a search input). The stores will share the
@@ -92,6 +92,8 @@ export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValu
      * - [Animated Select](https://ariakit.org/examples/select-animated)
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * - [SelectGroup](https://ariakit.org/examples/select-group)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
     defaultValue?: SelectStoreState<T>["value"];
 }

package/cjs/tab/tab-store.cjs

@@ -10,6 +10,8 @@ var _FFZYCAXAcjs = require('../__chunks/FFZYCAXA.cjs');
 
 
 
+
+
 var _B4LYZ4EMcjs = require('../__chunks/B4LYZ4EM.cjs');
 
 
@@ -19,12 +21,30 @@ require('../__chunks/ULSPM3Y3.cjs');
 
 
 
+
 var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/tab/tab-store.ts
-function createTabStore(props = {}) {
-  var _a;
-  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+function createTabStore(_a = {}) {
+  var _b = _a, {
+    composite: parentComposite
+  } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, [
+    "composite"
+  ]);
+  const store = _B4LYZ4EMcjs.mergeStore.call(void 0, 
+    props.store,
+    _B4LYZ4EMcjs.omit.call(void 0, parentComposite, [
+      "items",
+      "renderedItems",
+      "moves",
+      "orientation",
+      "baseElement",
+      "focusLoop",
+      "focusShift",
+      "focusWrap"
+    ])
+  );
+  const syncState = store == null ? void 0 : store.getState();
   const composite = _Y7KNI5NScjs.createCompositeStore.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), {
     orientation: _EEDWPDM2cjs.defaultValue.call(void 0, 
       props.orientation,
@@ -47,7 +67,7 @@ function createTabStore(props = {}) {
       true
     )
   });
-  const tab = _B4LYZ4EMcjs.createStore.call(void 0, initialState, composite, props.store);
+  const tab = _B4LYZ4EMcjs.createStore.call(void 0, initialState, composite, store);
   _B4LYZ4EMcjs.setup.call(void 0, 
     tab,
     () => _B4LYZ4EMcjs.sync.call(void 0, tab, ["moves"], () => {

package/cjs/tab/tab-store.d.cts

@@ -1,8 +1,8 @@
 import type { CollectionStore, CollectionStoreItem } from "../collection/collection-store.js";
-import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
 import type { SetState } from "../utils/types.js";
-export declare function createTabStore(props?: TabStoreProps): TabStore;
+export declare function createTabStore({ composite: parentComposite, ...props }?: TabStoreProps): TabStore;
 export interface TabStoreItem extends CompositeStoreItem {
     dimmed?: boolean;
 }
@@ -54,6 +54,9 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
     setSelectedId: SetState<TabStoreState["selectedId"]>;
     /**
      * A collection store containing the tab panels.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     panels: CollectionStore<TabStorePanel>;
     /**
@@ -62,9 +65,6 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
      * state without moving focus, use the
      * [`setSelectedId`](https://ariakit.org/reference/use-tab-store#setselectedid-1)
      * function instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * // Selects the tab with id "tab-1"
      * store.select("tab-1");
@@ -76,12 +76,22 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
     select: TabStore["move"];
 }
 export interface TabStoreOptions extends StoreOptions<TabStoreState, "orientation" | "focusLoop" | "selectedId" | "selectOnMove">, CompositeStoreOptions<TabStoreItem> {
+    /**
+     * A reference to another [composite
+     * store](https://ariakit.org/reference/composite-store). This is used when
+     * rendering tabs as part of another composite widget such as
+     * [Combobox](https://ariakit.org/components/combobox) or
+     * [Select](https://ariakit.org/components/select). The stores will share the
+     * same state.
+     */
+    composite?: CompositeStore | null;
     /**
      * The id of the tab whose panel is currently visible. If it's `undefined`, it
      * will be automatically set to the first enabled tab.
      *
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     defaultSelectedId?: TabStoreState["selectedId"];
 }

package/cjs/tab/tab-store.d.ts

@@ -1,8 +1,8 @@
 import type { CollectionStore, CollectionStoreItem } from "../collection/collection-store.js";
-import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
 import type { SetState } from "../utils/types.js";
-export declare function createTabStore(props?: TabStoreProps): TabStore;
+export declare function createTabStore({ composite: parentComposite, ...props }?: TabStoreProps): TabStore;
 export interface TabStoreItem extends CompositeStoreItem {
     dimmed?: boolean;
 }
@@ -54,6 +54,9 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
     setSelectedId: SetState<TabStoreState["selectedId"]>;
     /**
      * A collection store containing the tab panels.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     panels: CollectionStore<TabStorePanel>;
     /**
@@ -62,9 +65,6 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
      * state without moving focus, use the
      * [`setSelectedId`](https://ariakit.org/reference/use-tab-store#setselectedid-1)
      * function instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * // Selects the tab with id "tab-1"
      * store.select("tab-1");
@@ -76,12 +76,22 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
     select: TabStore["move"];
 }
 export interface TabStoreOptions extends StoreOptions<TabStoreState, "orientation" | "focusLoop" | "selectedId" | "selectOnMove">, CompositeStoreOptions<TabStoreItem> {
+    /**
+     * A reference to another [composite
+     * store](https://ariakit.org/reference/composite-store). This is used when
+     * rendering tabs as part of another composite widget such as
+     * [Combobox](https://ariakit.org/components/combobox) or
+     * [Select](https://ariakit.org/components/select). The stores will share the
+     * same state.
+     */
+    composite?: CompositeStore | null;
     /**
      * The id of the tab whose panel is currently visible. If it's `undefined`, it
      * will be automatically set to the first enabled tab.
      *
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     defaultSelectedId?: TabStoreState["selectedId"];
 }

package/cjs/toolbar/toolbar-store.d.cts

@@ -12,7 +12,7 @@ export interface ToolbarStoreState extends CompositeStoreState {
 }
 export interface ToolbarStoreFunctions extends CompositeStoreFunctions {
 }
-export interface ToolbarStoreOptions extends CompositeStoreOptions, StoreOptions<ToolbarStoreState, "orientation" | "focusLoop"> {
+export interface ToolbarStoreOptions extends StoreOptions<ToolbarStoreState, "orientation" | "focusLoop">, CompositeStoreOptions {
 }
 export interface ToolbarStoreProps extends ToolbarStoreOptions, StoreProps<ToolbarStoreState> {
 }

package/cjs/toolbar/toolbar-store.d.ts

@@ -12,7 +12,7 @@ export interface ToolbarStoreState extends CompositeStoreState {
 }
 export interface ToolbarStoreFunctions extends CompositeStoreFunctions {
 }
-export interface ToolbarStoreOptions extends CompositeStoreOptions, StoreOptions<ToolbarStoreState, "orientation" | "focusLoop"> {
+export interface ToolbarStoreOptions extends StoreOptions<ToolbarStoreState, "orientation" | "focusLoop">, CompositeStoreOptions {
 }
 export interface ToolbarStoreProps extends ToolbarStoreOptions, StoreProps<ToolbarStoreState> {
 }

package/cjs/tooltip/tooltip-store.d.cts

@@ -25,7 +25,7 @@ export interface TooltipStoreState extends HovercardStoreState {
     skipTimeout: number;
 }
 export type TooltipStoreFunctions = HovercardStoreFunctions;
-export interface TooltipStoreOptions extends HovercardStoreOptions, StoreOptions<TooltipStoreState, "type" | "placement" | "timeout" | "showTimeout" | "hideTimeout" | "skipTimeout"> {
+export interface TooltipStoreOptions extends StoreOptions<TooltipStoreState, "type" | "placement" | "timeout" | "showTimeout" | "hideTimeout" | "skipTimeout">, HovercardStoreOptions {
 }
 export interface TooltipStoreProps extends TooltipStoreOptions, StoreProps<TooltipStoreState> {
 }

package/cjs/tooltip/tooltip-store.d.ts

@@ -25,7 +25,7 @@ export interface TooltipStoreState extends HovercardStoreState {
     skipTimeout: number;
 }
 export type TooltipStoreFunctions = HovercardStoreFunctions;
-export interface TooltipStoreOptions extends HovercardStoreOptions, StoreOptions<TooltipStoreState, "type" | "placement" | "timeout" | "showTimeout" | "hideTimeout" | "skipTimeout"> {
+export interface TooltipStoreOptions extends StoreOptions<TooltipStoreState, "type" | "placement" | "timeout" | "showTimeout" | "hideTimeout" | "skipTimeout">, HovercardStoreOptions {
 }
 export interface TooltipStoreProps extends TooltipStoreOptions, StoreProps<TooltipStoreState> {
 }

package/cjs/utils/dom.d.cts

@@ -104,11 +104,12 @@ export declare function getScrollingElement(element?: Element | null): HTMLEleme
  */
 export declare function isPartiallyHidden(element: Element): boolean;
 /**
- * SelectionRange only works on a few types of input.
- * Calling `setSelectionRange` on a unsupported input type may throw an error on certain browsers.
- * To avoid it, we check if its type supports SelectionRange first.
- * It will be a noop to non-supported types until we find a workaround.
+ * SelectionRange only works on a few types of input. Calling
+ * `setSelectionRange` on a unsupported input type may throw an error on certain
+ * browsers. To avoid it, we check if its type supports SelectionRange first. It
+ * will be a noop to non-supported types until we find a workaround.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+ * @see
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
  */
 export declare function setSelectionRange(element: HTMLInputElement, ...args: Parameters<typeof HTMLInputElement.prototype.setSelectionRange>): void;

package/cjs/utils/dom.d.ts

@@ -104,11 +104,12 @@ export declare function getScrollingElement(element?: Element | null): HTMLEleme
  */
 export declare function isPartiallyHidden(element: Element): boolean;
 /**
- * SelectionRange only works on a few types of input.
- * Calling `setSelectionRange` on a unsupported input type may throw an error on certain browsers.
- * To avoid it, we check if its type supports SelectionRange first.
- * It will be a noop to non-supported types until we find a workaround.
+ * SelectionRange only works on a few types of input. Calling
+ * `setSelectionRange` on a unsupported input type may throw an error on certain
+ * browsers. To avoid it, we check if its type supports SelectionRange first. It
+ * will be a noop to non-supported types until we find a workaround.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+ * @see
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
  */
 export declare function setSelectionRange(element: HTMLInputElement, ...args: Parameters<typeof HTMLInputElement.prototype.setSelectionRange>): void;

package/cjs/utils/focus.cjs

@@ -12,7 +12,7 @@ var _UKR6TQI3cjs = require('../__chunks/UKR6TQI3.cjs');
 var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/utils/focus.ts
-var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
+var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], summary, iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
 function hasNegativeTabIndex(element) {
   const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
   return tabIndex < 0;

package/esm/collection/collection-store.d.ts

@@ -52,6 +52,9 @@ export interface CollectionStoreFunctions<T extends CollectionStoreItem = Collec
     renderItem: BivariantCallback<(item: T) => () => void>;
     /**
      * Gets an item by its id.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      * @example
      * const item = store.item("item-1");
      */

package/esm/combobox/combobox-store.d.ts

@@ -13,10 +13,16 @@ export interface ComboboxStoreItem extends CompositeStoreItem {
     value?: string;
 }
 export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends CompositeStoreState<ComboboxStoreItem>, PopoverStoreState {
-    /**
-     * @default true
-     */
-    includesBaseElement: boolean;
+    /** @default true */
+    includesBaseElement: CompositeStoreState<ComboboxStoreItem>["includesBaseElement"];
+    /** @default true */
+    focusLoop: CompositeStoreState<ComboboxStoreItem>["focusLoop"];
+    /** @default true */
+    focusWrap: CompositeStoreState<ComboboxStoreItem>["focusWrap"];
+    /** @default "vertical" */
+    orientation: CompositeStoreState<ComboboxStoreItem>["orientation"];
+    /** @default true */
+    virtualFocus: CompositeStoreState<ComboboxStoreItem>["virtualFocus"];
     /**
      * The combobox input value.
      *
@@ -63,6 +69,7 @@ export interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = Combo
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      */
     resetValueOnHide: boolean;
     /**
@@ -100,10 +107,8 @@ export interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = C
      */
     setSelectedValue: SetState<ComboboxStoreState<T>["selectedValue"]>;
 }
-export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions, StoreOptions<ComboboxStoreState<T>, "includesBaseElement" | "value" | "selectedValue" | "resetValueOnHide" | "resetValueOnSelect"> {
-    /**
-     * @default null
-     */
+export interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends StoreOptions<ComboboxStoreState<T>, "includesBaseElement" | "focusLoop" | "focusWrap" | "orientation" | "virtualFocus" | "value" | "selectedValue" | "resetValueOnHide" | "resetValueOnSelect">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
+    /** @default null */
     defaultActiveId?: CompositeStoreOptions<ComboboxStoreItem>["activeId"];
     /**
      * The initial value of the combobox input.

package/esm/composite/composite-store.d.ts

@@ -112,6 +112,9 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
      *   matches the value of `focusLoop`, it'll wrap between the last item in the
      *   last row or column and the first item in the first row or column and
      *   vice-versa.
+     *
+     * Live examples:
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * @default false
      */
     focusLoop: boolean | Orientation;
@@ -156,7 +159,7 @@ export interface CompositeStoreState<T extends CompositeStoreItem = CompositeSto
      * Live examples:
      * - [Submenu with
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Command Menu](https://ariakit.org/examples/dialog-combobox-command-menu)
      * @default false
      */
     includesBaseElement: boolean;
@@ -190,9 +193,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * state _without moving focus_. If you want to move focus, use the
      * [`move`](https://ariakit.org/reference/use-composite-store#move) function
      * instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * // Sets the composite element as the active item
      * store.setActiveId(null);
@@ -226,9 +226,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * Returns the id of the next enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * const nextId = store.next();
      * const nextNextId = store.next(2);
@@ -238,9 +235,6 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
      * Returns the id of the previous enabled item based on the current
      * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
      * state.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * const previousId = store.previous();
      * const previousPreviousId = store.previous(2);
@@ -266,16 +260,10 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
     down: (skip?: number) => string | null | undefined;
     /**
      * Returns the id of the first enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     first: () => string | null | undefined;
     /**
      * Returns the id of the last enabled item.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     last: () => string | null | undefined;
 }

package/esm/hovercard/hovercard-store.d.ts

@@ -6,9 +6,7 @@ import type { SetState } from "../utils/types.js";
  */
 export declare function createHovercardStore(props?: HovercardStoreProps): HovercardStore;
 export interface HovercardStoreState extends PopoverStoreState {
-    /**
-     * @default "bottom"
-     */
+    /** @default "bottom" */
     placement: PopoverStoreState["placement"];
     /**
      * The amount of time in milliseconds to wait before showing and hiding the
@@ -57,7 +55,7 @@ export interface HovercardStoreFunctions extends PopoverStoreFunctions {
      */
     setAutoFocusOnShow: SetState<HovercardStoreState["autoFocusOnShow"]>;
 }
-export interface HovercardStoreOptions extends PopoverStoreOptions, StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout"> {
+export interface HovercardStoreOptions extends StoreOptions<HovercardStoreState, "placement" | "timeout" | "showTimeout" | "hideTimeout">, PopoverStoreOptions {
 }
 export interface HovercardStoreProps extends HovercardStoreOptions, StoreProps<HovercardStoreState> {
 }

package/esm/menu/menu-store.d.ts

@@ -8,6 +8,12 @@ export declare function createMenuStore<T extends MenuStoreValues = MenuStoreVal
 export declare function createMenuStore(props?: MenuStoreProps): MenuStore;
 export type MenuStoreValues = Record<string, string | boolean | number | Array<string | number>>;
 export interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreState, HovercardStoreState {
+    /** @default "vertical" */
+    orientation: CompositeStoreState["orientation"];
+    /** @default "bottom-start" */
+    placement: HovercardStoreState["placement"];
+    /** @default 0 */
+    hideTimeout?: HovercardStoreState["hideTimeout"];
     /**
      * Determines the element that should be focused when the menu is opened.
      */
@@ -24,12 +30,6 @@ export interface MenuStoreState<T extends MenuStoreValues = MenuStoreValues> ext
      *   Combobox](https://ariakit.org/examples/menu-nested-combobox)
      */
     values: T;
-    /** @default "vertical" */
-    orientation: CompositeStoreState["orientation"];
-    /** @default "bottom-start" */
-    placement: HovercardStoreState["placement"];
-    /** @default 0 */
-    hideTimeout?: HovercardStoreState["hideTimeout"];
 }
 export interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreFunctions, HovercardStoreFunctions, Pick<MenuStoreOptions, "combobox" | "parent" | "menubar"> {
     /**
@@ -64,7 +64,7 @@ export interface MenuStoreFunctions<T extends MenuStoreValues = MenuStoreValues>
      */
     setValue: BivariantCallback<(name: string, value: SetStateAction<MenuStoreState<T>["values"][string]>) => void>;
 }
-export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> extends CompositeStoreOptions, HovercardStoreOptions, StoreOptions<MenuStoreState<T>, "orientation" | "placement" | "hideTimeout" | "values"> {
+export interface MenuStoreOptions<T extends MenuStoreValues = MenuStoreValues> extends StoreOptions<MenuStoreState<T>, "orientation" | "placement" | "hideTimeout" | "values">, CompositeStoreOptions, HovercardStoreOptions {
     /**
      * A reference to a combobox store. This is used when combining the combobox
      * with a menu (e.g., dropdown menu with a search input). The stores will

package/esm/radio/radio-store.d.ts

@@ -6,9 +6,7 @@ import type { SetState } from "../utils/types.js";
  */
 export declare function createRadioStore({ ...props }?: RadioStoreProps): RadioStore;
 export interface RadioStoreState extends CompositeStoreState {
-    /**
-     * @default true
-     */
+    /** @default true */
     focusLoop: CompositeStoreState["focusLoop"];
     /**
      * The value of the radio group.
@@ -26,7 +24,7 @@ export interface RadioStoreFunctions extends CompositeStoreFunctions {
      */
     setValue: SetState<RadioStoreState["value"]>;
 }
-export interface RadioStoreOptions extends CompositeStoreOptions, StoreOptions<RadioStoreState, "focusLoop" | "value"> {
+export interface RadioStoreOptions extends StoreOptions<RadioStoreState, "focusLoop" | "value">, CompositeStoreOptions {
     /**
      * The default value of the radio group.
      * @default null

package/esm/select/select-store.d.ts

@@ -13,8 +13,6 @@ export interface SelectStoreItem extends CompositeStoreItem {
 export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue> extends CompositeStoreState<SelectStoreItem>, PopoverStoreState {
     /** @default true */
     virtualFocus: CompositeStoreState<SelectStoreItem>["virtualFocus"];
-    /** @default false */
-    includesBaseElement: CompositeStoreState<SelectStoreItem>["includesBaseElement"];
     /** @default null */
     activeId: CompositeStoreState<SelectStoreItem>["activeId"];
     /** @default "vertical" */
@@ -31,6 +29,8 @@ export interface SelectStoreState<T extends SelectStoreValue = SelectStoreValue>
      *   items](https://ariakit.org/examples/select-item-custom)
      * - [Multi-Select](https://ariakit.org/examples/select-multiple)
      * - [Toolbar with Select](https://ariakit.org/examples/toolbar-select)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
     value: MutableValue<T>;
     /**
@@ -77,7 +77,7 @@ export interface SelectStoreFunctions<T extends SelectStoreValue = SelectStoreVa
      */
     setLabelElement: SetState<SelectStoreState<T>["labelElement"]>;
 }
-export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValue> extends CompositeStoreOptions<SelectStoreItem>, PopoverStoreOptions, StoreOptions<SelectStoreState<T>, "virtualFocus" | "includesBaseElement" | "activeId" | "orientation" | "placement" | "value" | "setValueOnMove"> {
+export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValue> extends StoreOptions<SelectStoreState<T>, "virtualFocus" | "activeId" | "orientation" | "placement" | "value" | "setValueOnMove">, CompositeStoreOptions<SelectStoreItem>, PopoverStoreOptions {
     /**
      * A reference to a combobox store. This is used when combining the combobox
      * with a select (e.g., select with a search input). The stores will share the
@@ -92,6 +92,8 @@ export interface SelectStoreOptions<T extends SelectStoreValue = SelectStoreValu
      * - [Animated Select](https://ariakit.org/examples/select-animated)
      * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * - [SelectGroup](https://ariakit.org/examples/select-group)
+     * - [Select with Next.js App
+     *   Router](https://ariakit.org/examples/select-next-router)
      */
     defaultValue?: SelectStoreState<T>["value"];
 }

package/esm/tab/tab-store.d.ts

@@ -1,8 +1,8 @@
 import type { CollectionStore, CollectionStoreItem } from "../collection/collection-store.js";
-import type { CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
+import type { CompositeStore, CompositeStoreFunctions, CompositeStoreItem, CompositeStoreOptions, CompositeStoreState } from "../composite/composite-store.js";
 import type { Store, StoreOptions, StoreProps } from "../utils/store.js";
 import type { SetState } from "../utils/types.js";
-export declare function createTabStore(props?: TabStoreProps): TabStore;
+export declare function createTabStore({ composite: parentComposite, ...props }?: TabStoreProps): TabStore;
 export interface TabStoreItem extends CompositeStoreItem {
     dimmed?: boolean;
 }
@@ -54,6 +54,9 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
     setSelectedId: SetState<TabStoreState["selectedId"]>;
     /**
      * A collection store containing the tab panels.
+     *
+     * Live examples:
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     panels: CollectionStore<TabStorePanel>;
     /**
@@ -62,9 +65,6 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
      * state without moving focus, use the
      * [`setSelectedId`](https://ariakit.org/reference/use-tab-store#setselectedid-1)
      * function instead.
-     *
-     * Live examples:
-     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      * @example
      * // Selects the tab with id "tab-1"
      * store.select("tab-1");
@@ -76,12 +76,22 @@ export interface TabStoreFunctions extends CompositeStoreFunctions<TabStoreItem>
     select: TabStore["move"];
 }
 export interface TabStoreOptions extends StoreOptions<TabStoreState, "orientation" | "focusLoop" | "selectedId" | "selectOnMove">, CompositeStoreOptions<TabStoreItem> {
+    /**
+     * A reference to another [composite
+     * store](https://ariakit.org/reference/composite-store). This is used when
+     * rendering tabs as part of another composite widget such as
+     * [Combobox](https://ariakit.org/components/combobox) or
+     * [Select](https://ariakit.org/components/select). The stores will share the
+     * same state.
+     */
+    composite?: CompositeStore | null;
     /**
      * The id of the tab whose panel is currently visible. If it's `undefined`, it
      * will be automatically set to the first enabled tab.
      *
      * Live examples:
      * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     * - [Animated TabPanel](https://ariakit.org/examples/tab-panel-animated)
      */
     defaultSelectedId?: TabStoreState["selectedId"];
 }

package/esm/tab/tab-store.js

@@ -8,6 +8,8 @@ import {
 import {
   batch,
   createStore,
+  mergeStore,
+  omit,
   setup,
   sync
 } from "../__chunks/R676XYVY.js";
@@ -17,14 +19,32 @@ import {
 import "../__chunks/RRSZHCH6.js";
 import "../__chunks/7PRQYBBV.js";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "../__chunks/4R3V3JGP.js";
 
 // src/tab/tab-store.ts
-function createTabStore(props = {}) {
-  var _a;
-  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+function createTabStore(_a = {}) {
+  var _b = _a, {
+    composite: parentComposite
+  } = _b, props = __objRest(_b, [
+    "composite"
+  ]);
+  const store = mergeStore(
+    props.store,
+    omit(parentComposite, [
+      "items",
+      "renderedItems",
+      "moves",
+      "orientation",
+      "baseElement",
+      "focusLoop",
+      "focusShift",
+      "focusWrap"
+    ])
+  );
+  const syncState = store == null ? void 0 : store.getState();
   const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
     orientation: defaultValue(
       props.orientation,
@@ -47,7 +67,7 @@ function createTabStore(props = {}) {
       true
     )
   });
-  const tab = createStore(initialState, composite, props.store);
+  const tab = createStore(initialState, composite, store);
   setup(
     tab,
     () => sync(tab, ["moves"], () => {

package/esm/toolbar/toolbar-store.d.ts

@@ -12,7 +12,7 @@ export interface ToolbarStoreState extends CompositeStoreState {
 }
 export interface ToolbarStoreFunctions extends CompositeStoreFunctions {
 }
-export interface ToolbarStoreOptions extends CompositeStoreOptions, StoreOptions<ToolbarStoreState, "orientation" | "focusLoop"> {
+export interface ToolbarStoreOptions extends StoreOptions<ToolbarStoreState, "orientation" | "focusLoop">, CompositeStoreOptions {
 }
 export interface ToolbarStoreProps extends ToolbarStoreOptions, StoreProps<ToolbarStoreState> {
 }

package/esm/tooltip/tooltip-store.d.ts

@@ -25,7 +25,7 @@ export interface TooltipStoreState extends HovercardStoreState {
     skipTimeout: number;
 }
 export type TooltipStoreFunctions = HovercardStoreFunctions;
-export interface TooltipStoreOptions extends HovercardStoreOptions, StoreOptions<TooltipStoreState, "type" | "placement" | "timeout" | "showTimeout" | "hideTimeout" | "skipTimeout"> {
+export interface TooltipStoreOptions extends StoreOptions<TooltipStoreState, "type" | "placement" | "timeout" | "showTimeout" | "hideTimeout" | "skipTimeout">, HovercardStoreOptions {
 }
 export interface TooltipStoreProps extends TooltipStoreOptions, StoreProps<TooltipStoreState> {
 }

package/esm/utils/dom.d.ts

@@ -104,11 +104,12 @@ export declare function getScrollingElement(element?: Element | null): HTMLEleme
  */
 export declare function isPartiallyHidden(element: Element): boolean;
 /**
- * SelectionRange only works on a few types of input.
- * Calling `setSelectionRange` on a unsupported input type may throw an error on certain browsers.
- * To avoid it, we check if its type supports SelectionRange first.
- * It will be a noop to non-supported types until we find a workaround.
+ * SelectionRange only works on a few types of input. Calling
+ * `setSelectionRange` on a unsupported input type may throw an error on certain
+ * browsers. To avoid it, we check if its type supports SelectionRange first. It
+ * will be a noop to non-supported types until we find a workaround.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
+ * @see
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange
  */
 export declare function setSelectionRange(element: HTMLInputElement, ...args: Parameters<typeof HTMLInputElement.prototype.setSelectionRange>): void;

package/esm/utils/focus.js

@@ -12,7 +12,7 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/utils/focus.ts
-var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
+var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], summary, iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])";
 function hasNegativeTabIndex(element) {
   const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10);
   return tabIndex < 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ariakit/core",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Ariakit core",
   "sideEffects": false,
   "license": "MIT",