@zag-js/tabs 1.41.0 → 2.0.0-next.0

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,
@@ -82,8 +82,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 +90,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 +143,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 +156,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 });
         },
@@ -186,13 +183,12 @@ function connect(service, normalize) {
       const { value } = props;
       const selected = context.get("value") === value;
       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-orientation": prop("orientation"),
         hidden: !selected
@@ -202,8 +198,7 @@ function connect(service, normalize) {
       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,
@@ -56,8 +56,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 +64,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 +117,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 +130,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 });
         },
@@ -160,13 +157,12 @@ function connect(service, normalize) {
       const { value } = props;
       const selected = context.get("value") === value;
       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-orientation": prop("orientation"),
         hidden: !selected
@@ -176,8 +172,7 @@ function connect(service, normalize) {
       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,19 +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 ownerId = CSS.escape(getListId(ctx));
-  const selector = `[role=tab][data-ownedby='${ownerId}']: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,19 +1,18 @@
 // src/tabs.dom.ts
-import { 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 ownerId = CSS.escape(getListId(ctx));
-  const selector = `[role=tab][data-ownedby='${ownerId}']: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.
      */

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.
      */

package/package.json

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