@zag-js/tabs 1.43.0 → 2.0.0-next.1

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './tabs.anatomy.mjs';
 export { connect } from './tabs.connect.mjs';
 export { machine } from './tabs.machine.mjs';
 export { contentProps, props, splitContentProps, splitProps, splitTriggerProps, triggerProps } from './tabs.props.mjs';
-export { TabsApi as Api, ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.mjs';
+export { TabsApi as Api, ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.mjs';
 import '@zag-js/anatomy';
 import '@zag-js/core';
 import '@zag-js/types';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './tabs.anatomy.js';
 export { connect } from './tabs.connect.js';
 export { machine } from './tabs.machine.js';
 export { contentProps, props, splitContentProps, splitProps, splitTriggerProps, triggerProps } from './tabs.props.js';
-export { TabsApi as Api, ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.js';
+export { TabsApi as Api, ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, TabsMachine as Machine, NavigateDetails, TabsProps as Props, TabsService as Service, TriggerProps, TriggerState, ValueChangeDetails } from './tabs.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/core';
 import '@zag-js/types';

package/dist/tabs.connect.js

@@ -43,7 +43,7 @@ function connect(service, normalize) {
   const focused = state.matches("focused");
   const isVertical = prop("orientation") === "vertical";
   const isHorizontal = prop("orientation") === "horizontal";
-  const composite = prop("composite");
+  const virtualFocus = prop("virtualFocus");
   function getTriggerState(props) {
     return {
       selected: context.get("value") === props.value,
@@ -51,6 +51,9 @@ function connect(service, normalize) {
       disabled: !!props.disabled
     };
   }
+  function getContentState(props) {
+    return { selected: context.get("value") === props.value };
+  }
   return {
     value: context.get("value"),
     focusedValue: context.get("focusedValue"),
@@ -82,8 +85,7 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...import_tabs.parts.root.attrs,
-        id: dom.getRootId(scope),
+        ...import_tabs.parts.root.attrs(scope.id),
         "data-orientation": prop("orientation"),
         "data-focus": (0, import_dom_query.dataAttr)(focused),
         dir: prop("dir")
@@ -91,8 +93,7 @@ function connect(service, normalize) {
     },
     getListProps() {
       return normalize.element({
-        ...import_tabs.parts.list.attrs,
-        id: dom.getListId(scope),
+        ...import_tabs.parts.list.attrs(scope.id),
         role: "tablist",
         dir: prop("dir"),
         "data-focus": (0, import_dom_query.dataAttr)(focused),
@@ -145,7 +146,7 @@ function connect(service, normalize) {
       const { value, disabled } = props;
       const triggerState = getTriggerState(props);
       return normalize.button({
-        ...import_tabs.parts.trigger.attrs,
+        ...import_tabs.parts.trigger.attrs(scope.id),
         role: "tab",
         type: "button",
         disabled,
@@ -158,10 +159,9 @@ function connect(service, normalize) {
         "data-selected": (0, import_dom_query.dataAttr)(triggerState.selected),
         "data-focus": (0, import_dom_query.dataAttr)(triggerState.focused),
         "aria-controls": triggerState.selected ? dom.getContentId(scope, value) : void 0,
-        "data-ownedby": dom.getListId(scope),
         "data-ssr": (0, import_dom_query.dataAttr)(context.get("ssr")),
         id: dom.getTriggerId(scope, value),
-        tabIndex: triggerState.selected && composite ? 0 : -1,
+        tabIndex: triggerState.selected && !virtualFocus ? 0 : -1,
         onFocus() {
           send({ type: "TAB_FOCUS", value });
         },
@@ -182,28 +182,27 @@ function connect(service, normalize) {
         }
       });
     },
+    getContentState,
     getContentProps(props) {
       const { value } = props;
-      const selected = context.get("value") === value;
+      const contentState = getContentState(props);
       return normalize.element({
-        ...import_tabs.parts.content.attrs,
+        ...import_tabs.parts.content.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getContentId(scope, value),
-        tabIndex: composite ? 0 : -1,
+        tabIndex: !virtualFocus ? 0 : -1,
         "aria-labelledby": dom.getTriggerId(scope, value),
         role: "tabpanel",
-        "data-ownedby": dom.getListId(scope),
-        "data-selected": (0, import_dom_query.dataAttr)(selected),
+        "data-selected": (0, import_dom_query.dataAttr)(contentState.selected),
         "data-orientation": prop("orientation"),
-        hidden: !selected
+        hidden: !contentState.selected
       });
     },
     getIndicatorProps() {
       const rect = context.get("indicatorRect");
       const animateIndicator = context.get("animateIndicator");
       return normalize.element({
-        id: dom.getIndicatorId(scope),
-        ...import_tabs.parts.indicator.attrs,
+        ...import_tabs.parts.indicator.attrs(scope.id),
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         hidden: isRectEmpty(rect),

package/dist/tabs.connect.mjs

@@ -17,7 +17,7 @@ function connect(service, normalize) {
   const focused = state.matches("focused");
   const isVertical = prop("orientation") === "vertical";
   const isHorizontal = prop("orientation") === "horizontal";
-  const composite = prop("composite");
+  const virtualFocus = prop("virtualFocus");
   function getTriggerState(props) {
     return {
       selected: context.get("value") === props.value,
@@ -25,6 +25,9 @@ function connect(service, normalize) {
       disabled: !!props.disabled
     };
   }
+  function getContentState(props) {
+    return { selected: context.get("value") === props.value };
+  }
   return {
     value: context.get("value"),
     focusedValue: context.get("focusedValue"),
@@ -56,8 +59,7 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...parts.root.attrs,
-        id: dom.getRootId(scope),
+        ...parts.root.attrs(scope.id),
         "data-orientation": prop("orientation"),
         "data-focus": dataAttr(focused),
         dir: prop("dir")
@@ -65,8 +67,7 @@ function connect(service, normalize) {
     },
     getListProps() {
       return normalize.element({
-        ...parts.list.attrs,
-        id: dom.getListId(scope),
+        ...parts.list.attrs(scope.id),
         role: "tablist",
         dir: prop("dir"),
         "data-focus": dataAttr(focused),
@@ -119,7 +120,7 @@ function connect(service, normalize) {
       const { value, disabled } = props;
       const triggerState = getTriggerState(props);
       return normalize.button({
-        ...parts.trigger.attrs,
+        ...parts.trigger.attrs(scope.id),
         role: "tab",
         type: "button",
         disabled,
@@ -132,10 +133,9 @@ function connect(service, normalize) {
         "data-selected": dataAttr(triggerState.selected),
         "data-focus": dataAttr(triggerState.focused),
         "aria-controls": triggerState.selected ? dom.getContentId(scope, value) : void 0,
-        "data-ownedby": dom.getListId(scope),
         "data-ssr": dataAttr(context.get("ssr")),
         id: dom.getTriggerId(scope, value),
-        tabIndex: triggerState.selected && composite ? 0 : -1,
+        tabIndex: triggerState.selected && !virtualFocus ? 0 : -1,
         onFocus() {
           send({ type: "TAB_FOCUS", value });
         },
@@ -156,28 +156,27 @@ function connect(service, normalize) {
         }
       });
     },
+    getContentState,
     getContentProps(props) {
       const { value } = props;
-      const selected = context.get("value") === value;
+      const contentState = getContentState(props);
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts.content.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getContentId(scope, value),
-        tabIndex: composite ? 0 : -1,
+        tabIndex: !virtualFocus ? 0 : -1,
         "aria-labelledby": dom.getTriggerId(scope, value),
         role: "tabpanel",
-        "data-ownedby": dom.getListId(scope),
-        "data-selected": dataAttr(selected),
+        "data-selected": dataAttr(contentState.selected),
         "data-orientation": prop("orientation"),
-        hidden: !selected
+        hidden: !contentState.selected
       });
     },
     getIndicatorProps() {
       const rect = context.get("indicatorRect");
       const animateIndicator = context.get("animateIndicator");
       return normalize.element({
-        id: dom.getIndicatorId(scope),
-        ...parts.indicator.attrs,
+        ...parts.indicator.attrs(scope.id),
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
         hidden: isRectEmpty(rect),

package/dist/tabs.dom.js

@@ -40,18 +40,18 @@ __export(tabs_dom_exports, {
 module.exports = __toCommonJS(tabs_dom_exports);
 var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
-var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
-var getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
-var getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `tabs:${ctx.id}:content-${value}`;
-var getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `tabs:${ctx.id}:trigger-${value}`;
-var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
-var getListEl = (ctx) => ctx.getById(getListId(ctx));
+var import_tabs = require("./tabs.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getListId = (ctx) => ctx.ids?.list ?? `${ctx.id}:list`;
+var getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `${ctx.id}:content:${value}`;
+var getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `${ctx.id}:trigger:${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `${ctx.id}:indicator`;
+var getListEl = (ctx) => ctx.query(ctx.selector(import_tabs.parts.list));
 var getContentEl = (ctx, value) => ctx.getById(getContentId(ctx, value));
-var getTriggerEl = (ctx, value) => value != null ? ctx.getById(getTriggerId(ctx, value)) : null;
-var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getTriggerEl = (ctx, value) => value != null ? ctx.query(`${ctx.selector(import_tabs.parts.trigger)}[data-value="${value}"]`) : null;
+var getIndicatorEl = (ctx) => ctx.query(ctx.selector(import_tabs.parts.indicator));
 var getElements = (ctx) => {
-  const selector = `[role=tab]${(0, import_dom_query.getByOwnerId)(getListId(ctx))}:not([disabled])`;
-  return (0, import_dom_query.queryAll)(getListEl(ctx), selector);
+  return ctx.queryAll(`${ctx.selector(import_tabs.parts.trigger)}:not([disabled])`);
 };
 var getFirstTriggerEl = (ctx) => (0, import_utils.first)(getElements(ctx));
 var getLastTriggerEl = (ctx) => (0, import_utils.last)(getElements(ctx));

package/dist/tabs.dom.mjs

@@ -1,18 +1,18 @@
 // src/tabs.dom.ts
-import { getByOwnerId, itemById, nextById, prevById, queryAll } from "@zag-js/dom-query";
+import { itemById, nextById, prevById } from "@zag-js/dom-query";
 import { first, last } from "@zag-js/utils";
-var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
-var getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
-var getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `tabs:${ctx.id}:content-${value}`;
-var getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `tabs:${ctx.id}:trigger-${value}`;
-var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
-var getListEl = (ctx) => ctx.getById(getListId(ctx));
+import { parts } from "./tabs.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getListId = (ctx) => ctx.ids?.list ?? `${ctx.id}:list`;
+var getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `${ctx.id}:content:${value}`;
+var getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `${ctx.id}:trigger:${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `${ctx.id}:indicator`;
+var getListEl = (ctx) => ctx.query(ctx.selector(parts.list));
 var getContentEl = (ctx, value) => ctx.getById(getContentId(ctx, value));
-var getTriggerEl = (ctx, value) => value != null ? ctx.getById(getTriggerId(ctx, value)) : null;
-var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getTriggerEl = (ctx, value) => value != null ? ctx.query(`${ctx.selector(parts.trigger)}[data-value="${value}"]`) : null;
+var getIndicatorEl = (ctx) => ctx.query(ctx.selector(parts.indicator));
 var getElements = (ctx) => {
-  const selector = `[role=tab]${getByOwnerId(getListId(ctx))}:not([disabled])`;
-  return queryAll(getListEl(ctx), selector);
+  return ctx.queryAll(`${ctx.selector(parts.trigger)}:not([disabled])`);
 };
 var getFirstTriggerEl = (ctx) => first(getElements(ctx));
 var getLastTriggerEl = (ctx) => last(getElements(ctx));

package/dist/tabs.machine.js

@@ -45,7 +45,6 @@ var machine = createMachine({
       orientation: "horizontal",
       activationMode: "automatic",
       loopFocus: true,
-      composite: true,
       navigate(details) {
         (0, import_dom_query.clickIfLink)(details.node);
       },
@@ -226,10 +225,12 @@ var machine = createMachine({
           loopFocus: prop("loopFocus")
         });
         (0, import_dom_query.raf)(() => {
-          if (prop("composite")) {
+          if (prop("virtualFocus")) {
+            if (triggerEl?.dataset.value != null) {
+              context.set("focusedValue", triggerEl.dataset.value);
+            }
+          } else {
             triggerEl?.focus();
-          } else if (triggerEl?.dataset.value != null) {
-            context.set("focusedValue", triggerEl.dataset.value);
           }
         });
       },
@@ -241,10 +242,12 @@ var machine = createMachine({
           loopFocus: prop("loopFocus")
         });
         (0, import_dom_query.raf)(() => {
-          if (prop("composite")) {
+          if (prop("virtualFocus")) {
+            if (triggerEl?.dataset.value != null) {
+              context.set("focusedValue", triggerEl.dataset.value);
+            }
+          } else {
             triggerEl?.focus();
-          } else if (triggerEl?.dataset.value != null) {
-            context.set("focusedValue", triggerEl.dataset.value);
           }
         });
       },

package/dist/tabs.machine.mjs

@@ -11,7 +11,6 @@ var machine = createMachine({
       orientation: "horizontal",
       activationMode: "automatic",
       loopFocus: true,
-      composite: true,
       navigate(details) {
         clickIfLink(details.node);
       },
@@ -192,10 +191,12 @@ var machine = createMachine({
           loopFocus: prop("loopFocus")
         });
         raf(() => {
-          if (prop("composite")) {
+          if (prop("virtualFocus")) {
+            if (triggerEl?.dataset.value != null) {
+              context.set("focusedValue", triggerEl.dataset.value);
+            }
+          } else {
             triggerEl?.focus();
-          } else if (triggerEl?.dataset.value != null) {
-            context.set("focusedValue", triggerEl.dataset.value);
           }
         });
       },
@@ -207,10 +208,12 @@ var machine = createMachine({
           loopFocus: prop("loopFocus")
         });
         raf(() => {
-          if (prop("composite")) {
+          if (prop("virtualFocus")) {
+            if (triggerEl?.dataset.value != null) {
+              context.set("focusedValue", triggerEl.dataset.value);
+            }
+          } else {
             triggerEl?.focus();
-          } else if (triggerEl?.dataset.value != null) {
-            context.set("focusedValue", triggerEl.dataset.value);
           }
         });
       },

package/dist/tabs.props.js

@@ -32,7 +32,7 @@ var import_types = require("@zag-js/types");
 var import_utils = require("@zag-js/utils");
 var props = (0, import_types.createProps)()([
   "activationMode",
-  "composite",
+  "virtualFocus",
   "deselectable",
   "dir",
   "getRootNode",

package/dist/tabs.props.mjs

@@ -3,7 +3,7 @@ import { createProps } from "@zag-js/types";
 import { createSplitProps } from "@zag-js/utils";
 var props = createProps()([
   "activationMode",
-  "composite",
+  "virtualFocus",
   "deselectable",
   "dir",
   "getRootNode",

package/dist/tabs.types.d.mts

@@ -70,9 +70,15 @@ interface TabsProps extends DirectionProperty, CommonProperties {
      */
     onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
     /**
-     * Whether the tab is composite
+     * Whether the tabs use virtual focus instead of roving tabindex.
+     *
+     * When `true`, triggers receive no DOM focus — arrow keys update `focusedValue`
+     * and all triggers remain `tabIndex: -1`. Useful when tabs live inside another
+     * widget that manages focus (e.g. a combobox).
+     *
+     * @default false
      */
-    composite?: boolean | undefined;
+    virtualFocus?: boolean | undefined;
     /**
      * Whether the active tab can be deselected when clicking on it.
      */
@@ -138,6 +144,12 @@ interface ContentProps {
      */
     value: string;
 }
+interface ContentState {
+    /**
+     * Whether the tab content is selected
+     */
+    selected: boolean;
+}
 interface TabsApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the tabs.
@@ -183,8 +195,12 @@ interface TabsApi<T extends PropTypes = PropTypes> {
     getRootProps: () => T["element"];
     getListProps: () => T["element"];
     getTriggerProps: (props: TriggerProps) => T["button"];
+    /**
+     * Returns the state of the content with the given props
+     */
+    getContentState: (props: ContentProps) => ContentState;
     getContentProps: (props: ContentProps) => T["element"];
     getIndicatorProps: () => T["element"];
 }
 
-export type { ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };
+export type { ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };

package/dist/tabs.types.d.ts

@@ -70,9 +70,15 @@ interface TabsProps extends DirectionProperty, CommonProperties {
      */
     onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
     /**
-     * Whether the tab is composite
+     * Whether the tabs use virtual focus instead of roving tabindex.
+     *
+     * When `true`, triggers receive no DOM focus — arrow keys update `focusedValue`
+     * and all triggers remain `tabIndex: -1`. Useful when tabs live inside another
+     * widget that manages focus (e.g. a combobox).
+     *
+     * @default false
      */
-    composite?: boolean | undefined;
+    virtualFocus?: boolean | undefined;
     /**
      * Whether the active tab can be deselected when clicking on it.
      */
@@ -138,6 +144,12 @@ interface ContentProps {
      */
     value: string;
 }
+interface ContentState {
+    /**
+     * Whether the tab content is selected
+     */
+    selected: boolean;
+}
 interface TabsApi<T extends PropTypes = PropTypes> {
     /**
      * The current value of the tabs.
@@ -183,8 +195,12 @@ interface TabsApi<T extends PropTypes = PropTypes> {
     getRootProps: () => T["element"];
     getListProps: () => T["element"];
     getTriggerProps: (props: TriggerProps) => T["button"];
+    /**
+     * Returns the state of the content with the given props
+     */
+    getContentState: (props: ContentProps) => ContentState;
     getContentProps: (props: ContentProps) => T["element"];
     getIndicatorProps: () => T["element"];
 }
 
-export type { ContentProps, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };
+export type { ContentProps, ContentState, ElementIds, FocusChangeDetails, IntlTranslations, NavigateDetails, TabsApi, TabsMachine, TabsProps, TabsSchema, TabsService, TriggerProps, TriggerState, ValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tabs",
-  "version": "1.43.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the tabs widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,11 +29,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/utils": "1.43.0",
-    "@zag-js/core": "1.43.0",
-    "@zag-js/types": "1.43.0"
+    "@zag-js/anatomy": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1",
+    "@zag-js/types": "2.0.0-next.1",
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/core": "2.0.0-next.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"