@ariakit/core 0.4.1 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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.

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/composite/composite-store.d.cts

@@ -159,7 +159,6 @@ 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
      */
@@ -194,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);
@@ -230,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);
@@ -242,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);
@@ -270,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

@@ -159,7 +159,6 @@ 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
      */
@@ -194,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);
@@ -230,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);
@@ -242,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);
@@ -270,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/select/select-store.d.cts

@@ -29,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>;
     /**
@@ -90,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

@@ -29,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>;
     /**
@@ -90,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/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/composite/composite-store.d.ts

@@ -159,7 +159,6 @@ 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
      */
@@ -194,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);
@@ -230,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);
@@ -242,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);
@@ -270,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/select/select-store.d.ts

@@ -29,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>;
     /**
@@ -90,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/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.1",
+  "version": "0.4.2",
   "description": "Ariakit core",
   "sideEffects": false,
   "license": "MIT",