@zag-js/tabs 0.82.2 → 1.0.0

package/dist/index.js

@@ -4,77 +4,66 @@ var anatomy$1 = require('@zag-js/anatomy');
 var domQuery = require('@zag-js/dom-query');
 var utils = require('@zag-js/utils');
 var core = require('@zag-js/core');
-var elementRect = require('@zag-js/element-rect');
 var types = require('@zag-js/types');
 
 // src/tabs.anatomy.ts
 var anatomy = anatomy$1.createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
 var parts = anatomy.build();
-var dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`,
-  getListId: (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`,
-  getContentId: (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`,
-  getTriggerId: (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`,
-  getIndicatorId: (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`,
-  getListEl: (ctx) => dom.getById(ctx, dom.getListId(ctx)),
-  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
-  getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
-  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
-  getElements: (ctx) => {
-    const ownerId = CSS.escape(dom.getListId(ctx));
-    const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
-    return domQuery.queryAll(dom.getListEl(ctx), selector);
-  },
-  getFirstTriggerEl: (ctx) => utils.first(dom.getElements(ctx)),
-  getLastTriggerEl: (ctx) => utils.last(dom.getElements(ctx)),
-  getNextTriggerEl: (ctx, id) => domQuery.nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getPrevTriggerEl: (ctx, id) => domQuery.prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loopFocus),
-  getSelectedContentEl: (ctx) => {
-    if (!ctx.value) return;
-    return dom.getContentEl(ctx, ctx.value);
-  },
-  getSelectedTriggerEl: (ctx) => {
-    if (!ctx.value) return;
-    return dom.getTriggerEl(ctx, ctx.value);
-  },
-  getOffsetRect: (el) => {
-    return {
-      left: el?.offsetLeft ?? 0,
-      top: el?.offsetTop ?? 0,
-      width: el?.offsetWidth ?? 0,
-      height: el?.offsetHeight ?? 0
-    };
-  },
-  getRectById: (ctx, id) => {
-    const tab = domQuery.itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id));
-    return dom.resolveRect(dom.getOffsetRect(tab));
-  },
-  resolveRect: (rect) => ({
-    width: `${rect.width}px`,
-    height: `${rect.height}px`,
-    left: `${rect.left}px`,
-    top: `${rect.top}px`
-  })
+var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
+var getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
+var getContentId = (ctx, id) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`;
+var getTriggerId = (ctx, id) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
+var getListEl = (ctx) => ctx.getById(getListId(ctx));
+var getContentEl = (ctx, id) => ctx.getById(getContentId(ctx, id));
+var getTriggerEl = (ctx, id) => ctx.getById(getTriggerId(ctx, id));
+var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getElements = (ctx) => {
+  const ownerId = CSS.escape(getListId(ctx));
+  const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
+  return domQuery.queryAll(getListEl(ctx), selector);
+};
+var getFirstTriggerEl = (ctx) => utils.first(getElements(ctx));
+var getLastTriggerEl = (ctx) => utils.last(getElements(ctx));
+var getNextTriggerEl = (ctx, opts) => domQuery.nextById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
+var getPrevTriggerEl = (ctx, opts) => domQuery.prevById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
+var getOffsetRect = (el) => {
+  return {
+    left: el?.offsetLeft ?? 0,
+    top: el?.offsetTop ?? 0,
+    width: el?.offsetWidth ?? 0,
+    height: el?.offsetHeight ?? 0
+  };
+};
+var getRectById = (ctx, id) => {
+  const tab = domQuery.itemById(getElements(ctx), getTriggerId(ctx, id));
+  return resolveRect(getOffsetRect(tab));
+};
+var resolveRect = (rect) => ({
+  width: `${rect.width}px`,
+  height: `${rect.height}px`,
+  left: `${rect.left}px`,
+  top: `${rect.top}px`
 });
 
 // src/tabs.connect.ts
-function connect(state, send, normalize) {
-  const translations = state.context.translations;
+function connect(service, normalize) {
+  const { state, send, context, prop, scope } = service;
+  const translations = prop("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;
+  const isVertical = prop("orientation") === "vertical";
+  const isHorizontal = prop("orientation") === "horizontal";
+  const composite = prop("composite");
   function getTriggerState(props2) {
     return {
-      selected: state.context.value === props2.value,
-      focused: state.context.focusedValue === props2.value,
+      selected: context.get("value") === props2.value,
+      focused: context.get("focusedValue") === props2.value,
       disabled: !!props2.disabled
     };
   }
   return {
-    value: state.context.value,
-    focusedValue: state.context.focusedValue,
+    value: context.get("value"),
+    focusedValue: context.get("focusedValue"),
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
@@ -82,11 +71,11 @@ function connect(state, send, normalize) {
       send({ type: "CLEAR_VALUE" });
     },
     setIndicatorRect(value) {
-      const id = dom.getTriggerId(state.context, value);
+      const id = getTriggerId(scope, value);
       send({ type: "SET_INDICATOR_RECT", id });
     },
     syncTabIndex() {
-      send("SYNC_TAB_INDEX");
+      send({ type: "SYNC_TAB_INDEX" });
     },
     selectNext(fromValue) {
       send({ type: "TAB_FOCUS", value: fromValue, src: "selectNext" });
@@ -97,26 +86,28 @@ function connect(state, send, normalize) {
       send({ type: "ARROW_PREV", src: "selectPrev" });
     },
     focus() {
-      dom.getSelectedTriggerEl(state.context)?.focus();
+      const value = context.get("value");
+      if (!value) return;
+      getTriggerEl(scope, value)?.focus();
     },
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        id: dom.getRootId(state.context),
-        "data-orientation": state.context.orientation,
+        id: getRootId(scope),
+        "data-orientation": prop("orientation"),
         "data-focus": domQuery.dataAttr(focused),
-        dir: state.context.dir
+        dir: prop("dir")
       });
     },
     getListProps() {
       return normalize.element({
         ...parts.list.attrs,
-        id: dom.getListId(state.context),
+        id: getListId(scope),
         role: "tablist",
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-focus": domQuery.dataAttr(focused),
-        "aria-orientation": state.context.orientation,
-        "data-orientation": state.context.orientation,
+        "aria-orientation": prop("orientation"),
+        "data-orientation": prop("orientation"),
         "aria-label": translations?.listLabel,
         onKeyDown(event) {
           if (event.defaultPrevented) return;
@@ -140,16 +131,19 @@ function connect(state, send, normalize) {
               send({ type: "ARROW_NEXT", key: "ArrowRight" });
             },
             Home() {
-              send("HOME");
+              send({ type: "HOME" });
             },
             End() {
-              send("END");
+              send({ type: "END" });
             },
             Enter() {
               send({ type: "ENTER" });
             }
           };
-          let key = domQuery.getEventKey(event, state.context);
+          let key = domQuery.getEventKey(event, {
+            dir: prop("dir"),
+            orientation: prop("orientation")
+          });
           const exec = keyMap[key];
           if (exec) {
             event.preventDefault();
@@ -167,18 +161,18 @@ function connect(state, send, normalize) {
         role: "tab",
         type: "button",
         disabled,
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
         "data-disabled": domQuery.dataAttr(disabled),
         "aria-disabled": disabled,
         "data-value": value,
         "aria-selected": triggerState.selected,
         "data-selected": domQuery.dataAttr(triggerState.selected),
         "data-focus": domQuery.dataAttr(triggerState.focused),
-        "aria-controls": triggerState.selected ? dom.getContentId(state.context, value) : void 0,
-        "data-ownedby": dom.getListId(state.context),
-        "data-ssr": domQuery.dataAttr(state.context.ssr),
-        id: dom.getTriggerId(state.context, value),
+        "aria-controls": triggerState.selected ? getContentId(scope, value) : void 0,
+        "data-ownedby": getListId(scope),
+        "data-ssr": domQuery.dataAttr(context.get("ssr")),
+        id: getTriggerId(scope, value),
         tabIndex: triggerState.selected && composite ? 0 : -1,
         onFocus() {
           send({ type: "TAB_FOCUS", value });
@@ -201,36 +195,38 @@ function connect(state, send, normalize) {
     },
     getContentProps(props2) {
       const { value } = props2;
-      const selected = state.context.value === value;
+      const selected = context.get("value") === value;
       return normalize.element({
         ...parts.content.attrs,
-        dir: state.context.dir,
-        id: dom.getContentId(state.context, value),
+        dir: prop("dir"),
+        id: getContentId(scope, value),
         tabIndex: composite ? 0 : -1,
-        "aria-labelledby": dom.getTriggerId(state.context, value),
+        "aria-labelledby": getTriggerId(scope, value),
         role: "tabpanel",
-        "data-ownedby": dom.getListId(state.context),
+        "data-ownedby": getListId(scope),
         "data-selected": domQuery.dataAttr(selected),
-        "data-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
         hidden: !selected
       });
     },
     getIndicatorProps() {
+      const indicatorRect = context.get("indicatorRect");
+      const indicatorTransition = context.get("indicatorTransition");
       return normalize.element({
-        id: dom.getIndicatorId(state.context),
+        id: getIndicatorId(scope),
         ...parts.indicator.attrs,
-        dir: state.context.dir,
-        "data-orientation": state.context.orientation,
+        dir: prop("dir"),
+        "data-orientation": prop("orientation"),
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
-          "--left": indicator.rect?.left,
-          "--top": indicator.rect?.top,
-          "--width": indicator.rect?.width,
-          "--height": indicator.rect?.height,
+          "--left": indicatorRect.left,
+          "--top": indicatorRect.top,
+          "--width": indicatorRect.width,
+          "--height": indicatorRect.height,
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: indicator.transition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: indicatorTransition ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
           [isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
         }
@@ -238,270 +234,276 @@ function connect(state, send, normalize) {
     }
   };
 }
-var { not } = core.guards;
-function machine(userContext) {
-  const ctx = utils.compact(userContext);
-  return core.createMachine(
-    {
-      initial: "idle",
-      context: {
-        dir: "ltr",
-        orientation: "horizontal",
-        activationMode: "automatic",
-        value: null,
-        loopFocus: true,
-        composite: true,
-        navigate(details) {
-          domQuery.clickIfLink(details.node);
+var { not } = core.createGuards();
+var machine = core.createMachine({
+  props({ props: props2 }) {
+    return {
+      dir: "ltr",
+      orientation: "horizontal",
+      activationMode: "automatic",
+      loopFocus: true,
+      composite: true,
+      navigate(details) {
+        domQuery.clickIfLink(details.node);
+      },
+      defaultValue: null,
+      ...props2
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          prop("onValueChange")?.({ value });
+        }
+      })),
+      focusedValue: bindable(() => ({
+        defaultValue: prop("value") || prop("defaultValue"),
+        onChange(value) {
+          prop("onFocusChange")?.({ focusedValue: value });
+        }
+      })),
+      ssr: bindable(() => ({ defaultValue: true })),
+      indicatorTransition: bindable(() => ({ defaultValue: false })),
+      indicatorRect: bindable(() => ({
+        defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" }
+      }))
+    };
+  },
+  watch({ context, prop, track, action }) {
+    track([() => context.get("value")], () => {
+      action(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+    });
+    track([() => prop("dir"), () => prop("orientation")], () => {
+      action(["syncIndicatorRect"]);
+    });
+  },
+  on: {
+    SET_VALUE: {
+      actions: ["setValue"]
+    },
+    CLEAR_VALUE: {
+      actions: ["clearValue"]
+    },
+    SET_INDICATOR_RECT: {
+      actions: ["setIndicatorRect"]
+    },
+    SYNC_TAB_INDEX: {
+      actions: ["syncTabIndex"]
+    }
+  },
+  entry: ["syncIndicatorRect", "syncTabIndex", "syncSsr"],
+  exit: ["cleanupObserver"],
+  states: {
+    idle: {
+      on: {
+        TAB_FOCUS: {
+          target: "focused",
+          actions: ["setFocusedValue"]
         },
-        ...ctx,
-        focusedValue: ctx.value ?? null,
-        ssr: true,
-        indicatorState: {
-          rendered: false,
-          transition: false,
-          rect: { left: "0px", top: "0px", width: "0px", height: "0px" }
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
         }
-      },
-      watch: {
-        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"],
-        dir: ["syncIndicatorRect"],
-        orientation: ["syncIndicatorRect"]
-      },
+      }
+    },
+    focused: {
       on: {
-        SET_VALUE: {
-          actions: "setValue"
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
         },
-        CLEAR_VALUE: {
-          actions: "clearValue"
+        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: ["focusLastTab", "selectFocusedTab"]
+          },
+          {
+            actions: ["focusLastTab"]
+          }
+        ],
+        ENTER: {
+          guard: not("selectOnFocus"),
+          actions: ["selectFocusedTab"]
         },
-        SET_INDICATOR_RECT: {
-          actions: "setIndicatorRect"
+        TAB_FOCUS: {
+          actions: ["setFocusedValue"]
         },
-        SYNC_TAB_INDEX: {
-          actions: "syncTabIndex"
+        TAB_BLUR: {
+          target: "idle",
+          actions: ["clearFocusedValue"]
         }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      selectOnFocus: ({ prop }) => prop("activationMode") === "automatic"
+    },
+    actions: {
+      selectFocusedTab({ context, prop }) {
+        domQuery.raf(() => {
+          const focusedValue = context.get("focusedValue");
+          if (!focusedValue) return;
+          const nullable = prop("deselectable") && context.get("value") === focusedValue;
+          const value = nullable ? null : focusedValue;
+          context.set("value", value);
+        });
       },
-      created: ["syncFocusedValue"],
-      entry: ["checkRenderedElements", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
-      exit: ["cleanupObserver"],
-      states: {
-        idle: {
-          on: {
-            TAB_FOCUS: {
-              target: "focused",
-              actions: "setFocusedValue"
-            },
-            TAB_CLICK: {
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            }
+      setFocusedValue({ context, event, flush }) {
+        if (event.value == null) return;
+        flush(() => {
+          context.set("focusedValue", event.value);
+        });
+      },
+      clearFocusedValue({ context }) {
+        context.set("focusedValue", null);
+      },
+      setValue({ context, event, prop }) {
+        const nullable = prop("deselectable") && context.get("value") === context.get("focusedValue");
+        context.set("value", nullable ? null : event.value);
+      },
+      clearValue({ context }) {
+        context.set("value", null);
+      },
+      focusFirstTab({ scope }) {
+        domQuery.raf(() => {
+          getFirstTriggerEl(scope)?.focus();
+        });
+      },
+      focusLastTab({ scope }) {
+        domQuery.raf(() => {
+          getLastTriggerEl(scope)?.focus();
+        });
+      },
+      focusNextTab({ context, prop, scope, event }) {
+        const focusedValue = event.value ?? context.get("focusedValue");
+        if (!focusedValue) return;
+        const triggerEl = getNextTriggerEl(scope, {
+          value: focusedValue,
+          loopFocus: prop("loopFocus")
+        });
+        domQuery.raf(() => {
+          if (prop("composite")) {
+            triggerEl?.focus();
+          } else if (triggerEl?.dataset.value != null) {
+            context.set("focusedValue", triggerEl.dataset.value);
           }
-        },
-        focused: {
-          on: {
-            TAB_CLICK: {
-              target: "focused",
-              actions: ["setFocusedValue", "setValue"]
-            },
-            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: ["focusLastTab", "selectFocusedTab"]
-              },
-              {
-                actions: "focusLastTab"
-              }
-            ],
-            ENTER: {
-              guard: not("selectOnFocus"),
-              actions: "selectFocusedTab"
-            },
-            TAB_FOCUS: {
-              actions: ["setFocusedValue"]
-            },
-            TAB_BLUR: {
-              target: "idle",
-              actions: "clearFocusedValue"
-            }
+        });
+      },
+      focusPrevTab({ context, prop, scope, event }) {
+        const focusedValue = event.value ?? context.get("focusedValue");
+        if (!focusedValue) return;
+        const triggerEl = getPrevTriggerEl(scope, {
+          value: focusedValue,
+          loopFocus: prop("loopFocus")
+        });
+        domQuery.raf(() => {
+          if (prop("composite")) {
+            triggerEl?.focus();
+          } else if (triggerEl?.dataset.value != null) {
+            context.set("focusedValue", triggerEl.dataset.value);
           }
-        }
-      }
-    },
-    {
-      guards: {
-        selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
+        });
       },
-      actions: {
-        syncFocusedValue(ctx2) {
-          if (ctx2.value != null && ctx2.focusedValue == null) {
-            ctx2.focusedValue = ctx2.value;
+      syncTabIndex({ context, scope }) {
+        domQuery.raf(() => {
+          const value = context.get("value");
+          if (!value) return;
+          const contentEl = getContentEl(scope, value);
+          if (!contentEl) return;
+          const focusables = domQuery.getFocusables(contentEl);
+          if (focusables.length > 0) {
+            contentEl.removeAttribute("tabindex");
+          } else {
+            contentEl.setAttribute("tabindex", "0");
           }
-        },
-        selectFocusedTab(ctx2) {
-          domQuery.raf(() => {
-            const nullable = ctx2.deselectable && ctx2.value === ctx2.focusedValue;
-            const value = nullable ? null : ctx2.focusedValue;
-            set.value(ctx2, value);
-          });
-        },
-        setFocusedValue(ctx2, evt) {
-          if (evt.value == null) return;
-          set.focusedValue(ctx2, evt.value);
-        },
-        clearFocusedValue(ctx2) {
-          set.focusedValue(ctx2, null);
-        },
-        setValue(ctx2, evt) {
-          const nullable = ctx2.deselectable && ctx2.value === ctx2.focusedValue;
-          const value = nullable ? null : evt.value;
-          set.value(ctx2, value);
-        },
-        clearValue(ctx2) {
-          set.value(ctx2, null);
-        },
-        focusFirstTab(ctx2) {
-          domQuery.raf(() => {
-            dom.getFirstTriggerEl(ctx2)?.focus();
-          });
-        },
-        focusLastTab(ctx2) {
-          domQuery.raf(() => {
-            dom.getLastTriggerEl(ctx2)?.focus();
-          });
-        },
-        focusNextTab(ctx2) {
-          if (!ctx2.focusedValue) return;
-          const triggerEl = dom.getNextTriggerEl(ctx2, ctx2.focusedValue);
-          domQuery.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 triggerEl = dom.getPrevTriggerEl(ctx2, ctx2.focusedValue);
-          domQuery.raf(() => {
-            if (ctx2.composite) {
-              triggerEl?.focus();
-            } else if (triggerEl?.dataset.value != null) {
-              set.focusedValue(ctx2, triggerEl.dataset.value);
-            }
-          });
-        },
-        checkRenderedElements(ctx2) {
-          ctx2.indicatorState.rendered = !!dom.getIndicatorEl(ctx2);
-        },
-        syncTabIndex(ctx2) {
-          domQuery.raf(() => {
-            const contentEl = dom.getSelectedContentEl(ctx2);
-            if (!contentEl) return;
-            const focusables = domQuery.getFocusables(contentEl);
-            if (focusables.length > 0) {
-              contentEl.removeAttribute("tabindex");
-            } else {
-              contentEl.setAttribute("tabindex", "0");
-            }
-          });
-        },
-        cleanupObserver(ctx2) {
-          ctx2.indicatorCleanup?.();
-        },
-        allowIndicatorTransition(ctx2) {
-          ctx2.indicatorState.transition = true;
-        },
-        setIndicatorRect(ctx2, evt) {
-          const value = evt.id ?? ctx2.value;
-          if (!ctx2.indicatorState.rendered || !value) return;
-          const triggerEl = dom.getTriggerEl(ctx2, value);
-          if (!triggerEl) return;
-          ctx2.indicatorState.rect = dom.getRectById(ctx2, value);
+        });
+      },
+      cleanupObserver({ refs }) {
+        const cleanup = refs.get("indicatorCleanup");
+        if (cleanup) cleanup();
+      },
+      allowIndicatorTransition({ context }) {
+        context.set("indicatorTransition", true);
+      },
+      setIndicatorRect({ context, event, scope }) {
+        const value = event.id ?? context.get("value");
+        const indicatorEl = getIndicatorEl(scope);
+        if (!indicatorEl || !value) return;
+        const triggerEl = getTriggerEl(scope, value);
+        if (!triggerEl) return;
+        context.set("indicatorRect", getRectById(scope, value));
+        domQuery.nextTick(() => {
+          context.set("indicatorTransition", false);
+        });
+      },
+      syncSsr({ context }) {
+        context.set("ssr", false);
+      },
+      syncIndicatorRect({ context, refs, scope }) {
+        const cleanup = refs.get("indicatorCleanup");
+        if (cleanup) cleanup();
+        const value = context.get("value");
+        if (!value) return;
+        const triggerEl = getTriggerEl(scope, value);
+        const indicatorEl = getIndicatorEl(scope);
+        if (!triggerEl || !indicatorEl) return;
+        const exec = () => {
+          const rect = getOffsetRect(triggerEl);
+          context.set("indicatorRect", resolveRect(rect));
           domQuery.nextTick(() => {
-            ctx2.indicatorState.transition = false;
+            context.set("indicatorTransition", false);
           });
-        },
-        syncSsr(ctx2) {
-          ctx2.ssr = false;
-        },
-        syncIndicatorRect(ctx2) {
-          ctx2.indicatorCleanup?.();
-          const value = ctx2.value;
-          if (!ctx2.indicatorState.rendered || !value) return;
-          const triggerEl = dom.getSelectedTriggerEl(ctx2);
-          if (!triggerEl) return;
-          ctx2.indicatorCleanup = elementRect.trackElementRect(triggerEl, {
-            getRect(el) {
-              return dom.getOffsetRect(el);
-            },
-            onChange(rect) {
-              ctx2.indicatorState.rect = dom.resolveRect(rect);
-              domQuery.nextTick(() => {
-                ctx2.indicatorState.transition = false;
-              });
-            }
-          });
-        },
-        navigateIfNeeded(ctx2) {
-          const triggerEl = dom.getSelectedTriggerEl(ctx2);
-          if (!domQuery.isAnchorElement(triggerEl)) return;
-          ctx2.navigate({ value: ctx2.value, node: triggerEl });
-        }
+        };
+        exec();
+        const win = scope.getWin();
+        const obs = new win.ResizeObserver(exec);
+        obs.observe(triggerEl);
+        refs.set("indicatorCleanup", () => obs.disconnect());
+      },
+      navigateIfNeeded({ context, prop, scope }) {
+        const value = context.get("value");
+        if (!value) return;
+        const triggerEl = getTriggerEl(scope, value);
+        if (!domQuery.isAnchorElement(triggerEl)) return;
+        prop("navigate")?.({ value, node: triggerEl });
       }
     }
-  );
-}
-var invoke = {
-  change: (ctx) => {
-    if (ctx.value == null) return;
-    ctx.onValueChange?.({ value: ctx.value });
-  },
-  focusChange: (ctx) => {
-    if (ctx.focusedValue == null) return;
-    ctx.onFocusChange?.({ focusedValue: ctx.focusedValue });
-  }
-};
-var set = {
-  value: (ctx, value) => {
-    if (utils.isEqual(value, ctx.value)) return;
-    ctx.value = value;
-    invoke.change(ctx);
-  },
-  focusedValue: (ctx, value) => {
-    if (utils.isEqual(value, ctx.focusedValue)) return;
-    ctx.focusedValue = value;
-    invoke.focusChange(ctx);
   }
-};
+});
 var props = types.createProps()([
   "activationMode",
   "composite",
@@ -516,7 +518,8 @@ var props = types.createProps()([
   "onValueChange",
   "orientation",
   "translations",
-  "value"
+  "value",
+  "defaultValue"
 ]);
 var splitProps = utils.createSplitProps(props);
 var triggerProps = types.createProps()(["disabled", "value"]);