@zag-js/tabs 0.49.0 → 0.50.0

package/dist/index.d.mts

@@ -29,7 +29,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
+    translations?: IntlTranslations;
     /**
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
@@ -51,6 +51,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * The activation mode of the tabs. Can be `manual` or `automatic`
      * - `manual`: Tabs are activated when clicked or press `enter` key.
      * - `automatic`: Tabs are activated when receiving focus
+     *
      * @default "automatic"
      */
     activationMode?: "manual" | "automatic";
@@ -62,20 +63,13 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Callback to be called when the focused tab changes
      */
     onFocusChange?: (details: FocusChangeDetails) => void;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the tab is in the horizontal orientation
-     */
-    isHorizontal: boolean;
     /**
-     * @computed
-     * Whether the tab is in the vertical orientation
+     * Whether the tab is composite
      */
-    isVertical: boolean;
-}>;
+    composite: boolean;
+}
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{}>;
 interface PrivateContext {
 }
 interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
@@ -136,6 +130,23 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Sets the indicator rect to the tab with the given value
      */
     setIndicatorRect(value: string): void;
+    /**
+     * Synchronizes the tab index of the content element.
+     * Useful when rendering tabs within a select or combobox
+     */
+    syncTabIndex(): void;
+    /**
+     * Set focus on the selected tab trigger
+     */
+    focus(): void;
+    /**
+     * Selects the next tab
+     */
+    selectNext(fromValue?: string): void;
+    /**
+     * Selects the previous tab
+     */
+    selectPrev(fromValue?: string): void;
     /**
      * Returns the state of the trigger with the given props
      */
@@ -151,8 +162,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
+declare const props: ("value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];

package/dist/index.d.ts

@@ -29,7 +29,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
     /**
      * Specifies the localized strings that identifies the accessibility elements and their states
      */
-    translations: IntlTranslations;
+    translations?: IntlTranslations;
     /**
      * Whether the keyboard navigation will loop from last tab to first, and vice versa.
      * @default true
@@ -51,6 +51,7 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * The activation mode of the tabs. Can be `manual` or `automatic`
      * - `manual`: Tabs are activated when clicked or press `enter` key.
      * - `automatic`: Tabs are activated when receiving focus
+     *
      * @default "automatic"
      */
     activationMode?: "manual" | "automatic";
@@ -62,20 +63,13 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      * Callback to be called when the focused tab changes
      */
     onFocusChange?: (details: FocusChangeDetails) => void;
-}
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the tab is in the horizontal orientation
-     */
-    isHorizontal: boolean;
     /**
-     * @computed
-     * Whether the tab is in the vertical orientation
+     * Whether the tab is composite
      */
-    isVertical: boolean;
-}>;
+    composite: boolean;
+}
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type ComputedContext = Readonly<{}>;
 interface PrivateContext {
 }
 interface MachineContext extends PublicContext, ComputedContext, PrivateContext {
@@ -136,6 +130,23 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Sets the indicator rect to the tab with the given value
      */
     setIndicatorRect(value: string): void;
+    /**
+     * Synchronizes the tab index of the content element.
+     * Useful when rendering tabs within a select or combobox
+     */
+    syncTabIndex(): void;
+    /**
+     * Set focus on the selected tab trigger
+     */
+    focus(): void;
+    /**
+     * Selects the next tab
+     */
+    selectNext(fromValue?: string): void;
+    /**
+     * Selects the previous tab
+     */
+    selectPrev(fromValue?: string): void;
     /**
      * Returns the state of the trigger with the given props
      */
@@ -151,8 +162,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const props: ("value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode")[];
-declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "getRootNode">];
+declare const props: ("value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite")[];
+declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "value" | "dir" | "id" | "getRootNode" | "orientation" | "ids" | "translations" | "loopFocus" | "activationMode" | "onValueChange" | "onFocusChange" | "composite">];
 declare const triggerProps: (keyof TriggerProps)[];
 declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
 declare const contentProps: "value"[];

package/dist/index.js

@@ -59,16 +59,16 @@ var dom = (0, import_dom_query.createScope)({
     const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
     return (0, import_dom_query.queryAll)(dom.getListEl(ctx), selector);
   },
-  getFirstEl: (ctx) => (0, import_utils.first)(dom.getElements(ctx)),
-  getLastEl: (ctx) => (0, import_utils.last)(dom.getElements(ctx)),
-  getNextEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getPrevEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getActiveContentEl: (ctx) => {
+  getFirstTriggerEl: (ctx) => (0, import_utils.first)(dom.getElements(ctx)),
+  getLastTriggerEl: (ctx) => (0, import_utils.last)(dom.getElements(ctx)),
+  getNextTriggerEl: (ctx, id) => (0, import_dom_query.nextById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+  getPrevTriggerEl: (ctx, id) => (0, import_dom_query.prevById)(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
+  getSelectedContentEl: (ctx) => {
     if (!ctx.value)
       return;
     return dom.getContentEl(ctx, ctx.value);
   },
-  getActiveTabEl: (ctx) => {
+  getSelectedTriggerEl: (ctx) => {
     if (!ctx.value)
       return;
     return dom.getTriggerEl(ctx, ctx.value);
@@ -97,6 +97,10 @@ var dom = (0, import_dom_query.createScope)({
 function connect(state, send, normalize) {
   const translations = state.context.translations;
   const focused = state.matches("focused");
+  const isVertical = state.context.orientation === "vertical";
+  const isHorizontal = state.context.orientation === "horizontal";
+  const composite = state.context.composite;
+  const indicator = state.context.indicatorState;
   function getTriggerState(props2) {
     return {
       selected: state.context.value === props2.value,
@@ -117,6 +121,20 @@ function connect(state, send, normalize) {
       const id = dom.getTriggerId(state.context, value);
       send({ type: "SET_INDICATOR_RECT", id });
     },
+    syncTabIndex() {
+      send("SYNC_TAB_INDEX");
+    },
+    selectNext(fromValue) {
+      send({ type: "TAB_FOCUS", value: fromValue, src: "selectNext" });
+      send({ type: "ARROW_NEXT", src: "selectNext" });
+    },
+    selectPrev(fromValue) {
+      send({ type: "TAB_FOCUS", value: fromValue, src: "selectPrev" });
+      send({ type: "ARROW_PREV", src: "selectPrev" });
+    },
+    focus() {
+      dom.getSelectedTriggerEl(state.context)?.focus();
+    },
     getTriggerState,
     rootProps: normalize.element({
       ...parts.root.attrs,
@@ -133,25 +151,35 @@ function connect(state, send, normalize) {
       "data-focus": (0, import_dom_query2.dataAttr)(focused),
       "aria-orientation": state.context.orientation,
       "data-orientation": state.context.orientation,
-      "aria-label": translations.listLabel,
+      "aria-label": translations?.listLabel,
       onKeyDown(event) {
         if (event.defaultPrevented)
           return;
         const evt = (0, import_dom_event.getNativeEvent)(event);
         if (!(0, import_dom_query2.isSelfTarget)(evt))
           return;
+        if (evt.isComposing)
+          return;
         const keyMap = {
           ArrowDown() {
-            send("ARROW_DOWN");
+            if (isHorizontal)
+              return;
+            send({ type: "ARROW_NEXT", key: "ArrowDown" });
           },
           ArrowUp() {
-            send("ARROW_UP");
+            if (isHorizontal)
+              return;
+            send({ type: "ARROW_PREV", key: "ArrowUp" });
           },
           ArrowLeft() {
-            send("ARROW_LEFT");
+            if (isVertical)
+              return;
+            send({ type: "ARROW_PREV", key: "ArrowLeft" });
           },
           ArrowRight() {
-            send("ARROW_RIGHT");
+            if (isVertical)
+              return;
+            send({ type: "ARROW_NEXT", key: "ArrowRight" });
           },
           Home() {
             send("HOME");
@@ -160,7 +188,7 @@ function connect(state, send, normalize) {
             send("END");
           },
           Enter() {
-            send({ type: "ENTER", value: state.context.focusedValue });
+            send({ type: "ENTER" });
           }
         };
         let key = (0, import_dom_event.getEventKey)(event, state.context);
@@ -187,10 +215,10 @@ function connect(state, send, normalize) {
         "aria-selected": triggerState.selected,
         "data-selected": (0, import_dom_query2.dataAttr)(triggerState.selected),
         "data-focus": (0, import_dom_query2.dataAttr)(triggerState.focused),
-        "aria-controls": dom.getContentId(state.context, value),
+        "aria-controls": triggerState.selected ? dom.getContentId(state.context, value) : void 0,
         "data-ownedby": dom.getListId(state.context),
         id: dom.getTriggerId(state.context, value),
-        tabIndex: triggerState.selected ? 0 : -1,
+        tabIndex: triggerState.selected && composite ? 0 : -1,
         onFocus() {
           send({ type: "TAB_FOCUS", value });
         },
@@ -219,7 +247,7 @@ function connect(state, send, normalize) {
         ...parts.content.attrs,
         dir: state.context.dir,
         id: dom.getContentId(state.context, value),
-        tabIndex: 0,
+        tabIndex: composite ? 0 : -1,
         "aria-labelledby": dom.getTriggerId(state.context, value),
         role: "tabpanel",
         "data-ownedby": dom.getListId(state.context),
@@ -235,16 +263,16 @@ function connect(state, send, normalize) {
       "data-orientation": state.context.orientation,
       style: {
         "--transition-property": "left, right, top, bottom, width, height",
-        "--left": state.context.indicatorRect?.left,
-        "--top": state.context.indicatorRect?.top,
-        "--width": state.context.indicatorRect?.width,
-        "--height": state.context.indicatorRect?.height,
+        "--left": indicator.rect?.left,
+        "--top": indicator.rect?.top,
+        "--width": indicator.rect?.width,
+        "--height": indicator.rect?.height,
         position: "absolute",
         willChange: "var(--transition-property)",
         transitionProperty: "var(--transition-property)",
-        transitionDuration: state.context.canIndicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
+        transitionDuration: indicator.transition ? "var(--transition-duration, 150ms)" : "0ms",
         transitionTimingFunction: "var(--transition-timing-function)",
-        [state.context.orientation === "horizontal" ? "left" : "top"]: state.context.orientation === "horizontal" ? "var(--left)" : "var(--top)"
+        [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
       }
     })
   };
@@ -255,7 +283,6 @@ var import_core = require("@zag-js/core");
 var import_dom_event2 = require("@zag-js/dom-event");
 var import_dom_query3 = require("@zag-js/dom-query");
 var import_element_rect = require("@zag-js/element-rect");
-var import_tabbable = require("@zag-js/tabbable");
 var import_utils2 = require("@zag-js/utils");
 var { not } = import_core.guards;
 function machine(userContext) {
@@ -268,27 +295,18 @@ function machine(userContext) {
         orientation: "horizontal",
         activationMode: "automatic",
         value: null,
-        focusedValue: null,
-        indicatorRect: {
-          left: "0px",
-          top: "0px",
-          width: "0px",
-          height: "0px"
-        },
-        canIndicatorTransition: false,
-        isIndicatorRendered: false,
         loopFocus: true,
-        translations: {},
-        ...ctx
-      },
-      computed: {
-        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-        isVertical: (ctx2) => ctx2.orientation === "vertical"
+        composite: true,
+        ...ctx,
+        focusedValue: ctx.value ?? null,
+        indicatorState: {
+          rendered: false,
+          transition: false,
+          rect: { left: "0px", top: "0px", width: "0px", height: "0px" }
+        }
       },
-      entry: ["checkRenderedElements", "syncIndicatorRect", "setContentTabIndex"],
-      exit: ["cleanupObserver"],
       watch: {
-        value: ["enableIndicatorTransition", "syncIndicatorRect", "setContentTabIndex", "clickIfLink"],
+        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
         dir: ["syncIndicatorRect"],
         orientation: ["syncIndicatorRect"]
       },
@@ -301,22 +319,21 @@ function machine(userContext) {
         },
         SET_INDICATOR_RECT: {
           actions: "setIndicatorRect"
+        },
+        SYNC_TAB_INDEX: {
+          actions: "syncTabIndex"
         }
       },
+      created: ["syncFocusedValue"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "syncTabIndex"],
+      exit: ["cleanupObserver"],
       states: {
         idle: {
           on: {
-            TAB_FOCUS: [
-              {
-                guard: "selectOnFocus",
-                target: "focused",
-                actions: ["setFocusedValue", "setValue"]
-              },
-              {
-                target: "focused",
-                actions: "setFocusedValue"
-              }
-            ],
+            TAB_FOCUS: {
+              target: "focused",
+              actions: "setFocusedValue"
+            },
             TAB_CLICK: {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]
@@ -329,39 +346,49 @@ function machine(userContext) {
               target: "focused",
               actions: ["setFocusedValue", "setValue"]
             },
-            ARROW_LEFT: {
-              guard: "isHorizontal",
-              actions: "focusPrevTab"
-            },
-            ARROW_RIGHT: {
-              guard: "isHorizontal",
-              actions: "focusNextTab"
-            },
-            ARROW_UP: {
-              guard: "isVertical",
-              actions: "focusPrevTab"
-            },
-            ARROW_DOWN: {
-              guard: "isVertical",
-              actions: "focusNextTab"
-            },
-            HOME: {
-              actions: "focusFirstTab"
-            },
-            END: {
-              actions: "focusLastTab"
-            },
-            ENTER: {
-              guard: not("selectOnFocus"),
-              actions: "setValue"
-            },
-            TAB_FOCUS: [
+            ARROW_PREV: [
+              {
+                guard: "selectOnFocus",
+                actions: ["focusPrevTab", "selectFocusedTab"]
+              },
+              {
+                actions: "focusPrevTab"
+              }
+            ],
+            ARROW_NEXT: [
+              {
+                guard: "selectOnFocus",
+                actions: ["focusNextTab", "selectFocusedTab"]
+              },
+              {
+                actions: "focusNextTab"
+              }
+            ],
+            HOME: [
+              {
+                guard: "selectOnFocus",
+                actions: ["focusFirstTab", "selectFocusedTab"]
+              },
+              {
+                actions: "focusFirstTab"
+              }
+            ],
+            END: [
               {
                 guard: "selectOnFocus",
-                actions: ["setFocusedValue", "setValue"]
+                actions: ["focusLastTab", "selectFocusedTab"]
               },
-              { actions: "setFocusedValue" }
+              {
+                actions: "focusLastTab"
+              }
             ],
+            ENTER: {
+              guard: not("selectOnFocus"),
+              actions: "selectFocusedTab"
+            },
+            TAB_FOCUS: {
+              actions: ["setFocusedValue"]
+            },
             TAB_BLUR: {
               target: "idle",
               actions: "clearFocusedValue"
@@ -372,12 +399,22 @@ function machine(userContext) {
     },
     {
       guards: {
-        isVertical: (ctx2) => ctx2.isVertical,
-        isHorizontal: (ctx2) => ctx2.isHorizontal,
         selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
       },
       actions: {
+        syncFocusedValue(ctx2) {
+          if (ctx2.value != null && ctx2.focusedValue == null) {
+            ctx2.focusedValue = ctx2.value;
+          }
+        },
+        selectFocusedTab(ctx2) {
+          (0, import_dom_query3.raf)(() => {
+            set.value(ctx2, ctx2.focusedValue);
+          });
+        },
         setFocusedValue(ctx2, evt) {
+          if (evt.value == null)
+            return;
           set.focusedValue(ctx2, evt.value);
         },
         clearFocusedValue(ctx2) {
@@ -390,80 +427,95 @@ function machine(userContext) {
           set.value(ctx2, null);
         },
         focusFirstTab(ctx2) {
-          (0, import_dom_query3.raf)(() => dom.getFirstEl(ctx2)?.focus());
+          (0, import_dom_query3.raf)(() => {
+            dom.getFirstTriggerEl(ctx2)?.focus();
+          });
         },
         focusLastTab(ctx2) {
-          (0, import_dom_query3.raf)(() => dom.getLastEl(ctx2)?.focus());
+          (0, import_dom_query3.raf)(() => {
+            dom.getLastTriggerEl(ctx2)?.focus();
+          });
         },
         focusNextTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
-          const next = dom.getNextEl(ctx2, ctx2.focusedValue);
-          (0, import_dom_query3.raf)(() => next?.focus());
+          const triggerEl = dom.getNextTriggerEl(ctx2, ctx2.focusedValue);
+          (0, import_dom_query3.raf)(() => {
+            if (ctx2.composite) {
+              triggerEl?.focus();
+            } else if (triggerEl?.dataset.value != null) {
+              set.focusedValue(ctx2, triggerEl.dataset.value);
+            }
+          });
         },
         focusPrevTab(ctx2) {
           if (!ctx2.focusedValue)
             return;
-          const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
-          (0, import_dom_query3.raf)(() => prev?.focus());
+          const triggerEl = dom.getPrevTriggerEl(ctx2, ctx2.focusedValue);
+          (0, import_dom_query3.raf)(() => {
+            if (ctx2.composite) {
+              triggerEl?.focus();
+            } else if (triggerEl?.dataset.value != null) {
+              set.focusedValue(ctx2, triggerEl.dataset.value);
+            }
+          });
         },
         checkRenderedElements(ctx2) {
-          ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
+          ctx2.indicatorState.rendered = !!dom.getIndicatorEl(ctx2);
         },
-        // if tab panel contains focusable elements, remove the tabindex attribute
-        setContentTabIndex(ctx2) {
+        syncTabIndex(ctx2) {
           (0, import_dom_query3.raf)(() => {
-            const panel = dom.getActiveContentEl(ctx2);
-            if (!panel)
+            const contentEl = dom.getSelectedContentEl(ctx2);
+            if (!contentEl)
               return;
-            const focusables = (0, import_tabbable.getFocusables)(panel);
+            const focusables = (0, import_dom_query3.getFocusables)(contentEl);
             if (focusables.length > 0) {
-              panel.removeAttribute("tabindex");
+              contentEl.removeAttribute("tabindex");
             } else {
-              panel.setAttribute("tabindex", "0");
+              contentEl.setAttribute("tabindex", "0");
             }
           });
         },
         cleanupObserver(ctx2) {
           ctx2.indicatorCleanup?.();
         },
-        enableIndicatorTransition(ctx2) {
-          ctx2.canIndicatorTransition = true;
+        allowIndicatorTransition(ctx2) {
+          ctx2.indicatorState.transition = true;
         },
         setIndicatorRect(ctx2, evt) {
           const value = evt.id ?? ctx2.value;
-          if (!ctx2.isIndicatorRendered || !value)
+          if (!ctx2.indicatorState.rendered || !value)
             return;
-          const tabEl = dom.getTriggerEl(ctx2, value);
-          if (!tabEl)
+          const triggerEl = dom.getTriggerEl(ctx2, value);
+          if (!triggerEl)
             return;
-          ctx2.indicatorRect = dom.getRectById(ctx2, value);
+          ctx2.indicatorState.rect = dom.getRectById(ctx2, value);
           (0, import_dom_query3.nextTick)(() => {
-            ctx2.canIndicatorTransition = false;
+            ctx2.indicatorState.transition = false;
           });
         },
         syncIndicatorRect(ctx2) {
           ctx2.indicatorCleanup?.();
           const value = ctx2.value;
-          if (!ctx2.isIndicatorRendered || !value)
+          if (!ctx2.indicatorState.rendered || !value)
             return;
-          const tabEl = dom.getActiveTabEl(ctx2);
-          if (!tabEl)
+          const triggerEl = dom.getSelectedTriggerEl(ctx2);
+          if (!triggerEl)
             return;
-          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(tabEl, {
+          ctx2.indicatorCleanup = (0, import_element_rect.trackElementRect)(triggerEl, {
             getRect(el) {
               return dom.getOffsetRect(el);
             },
             onChange(rect) {
-              ctx2.indicatorRect = dom.resolveRect(rect);
+              ctx2.indicatorState.rect = dom.resolveRect(rect);
               (0, import_dom_query3.nextTick)(() => {
-                ctx2.canIndicatorTransition = false;
+                ctx2.indicatorState.transition = false;
               });
             }
           });
         },
         clickIfLink(ctx2) {
-          (0, import_dom_event2.clickIfLink)(dom.getActiveTabEl(ctx2));
+          (0, import_dom_event2.clickIfLink)(dom.getSelectedTriggerEl(ctx2));
         }
       }
     }
@@ -501,6 +553,7 @@ var import_types = require("@zag-js/types");
 var import_utils3 = require("@zag-js/utils");
 var props = (0, import_types.createProps)()([
   "activationMode",
+  "composite",
   "dir",
   "getRootNode",
   "id",