@serendie/ui 2.0.0 → 2.1.0

package/dist/node_modules/@zag-js/tabs/dist/index.js

@@ -1,478 +1,475 @@
-import { createAnatomy as A } from "../../anatomy/dist/index.js";
-import { clickIfLink as C, getEventKey as F } from "../../dom-event/dist/index.js";
-import { createScope as S, nextTick as V, raf as T, getFocusables as L, dataAttr as g, isSafari as _, isSelfTarget as O, isComposingEvent as w, prevById as B, nextById as N, itemById as P, queryAll as k } from "../../dom-query/dist/index.js";
-import { compact as U, last as $, first as D, isEqual as h } from "../../utils/dist/index.js";
-import { createMachine as W, guards as M } from "../../core/dist/index.js";
-import { trackElementRect as X } from "../../element-rect/dist/index.js";
-import { createProps as E } from "../../types/dist/index.js";
-var H = A("tabs").parts("root", "list", "trigger", "content", "indicator"), v = H.build(), r = S({
-  getRootId: (e) => {
-    var o;
-    return ((o = e.ids) == null ? void 0 : o.root) ?? `tabs:${e.id}`;
-  },
-  getListId: (e) => {
-    var o;
-    return ((o = e.ids) == null ? void 0 : o.list) ?? `tabs:${e.id}:list`;
-  },
-  getContentId: (e, o) => {
-    var t;
-    return ((t = e.ids) == null ? void 0 : t.content) ?? `tabs:${e.id}:content-${o}`;
-  },
-  getTriggerId: (e, o) => {
-    var t;
-    return ((t = e.ids) == null ? void 0 : t.trigger) ?? `tabs:${e.id}:trigger-${o}`;
-  },
-  getIndicatorId: (e) => {
-    var o;
-    return ((o = e.ids) == null ? void 0 : o.indicator) ?? `tabs:${e.id}:indicator`;
-  },
-  getListEl: (e) => r.getById(e, r.getListId(e)),
-  getContentEl: (e, o) => r.getById(e, r.getContentId(e, o)),
-  getTriggerEl: (e, o) => r.getById(e, r.getTriggerId(e, o)),
-  getIndicatorEl: (e) => r.getById(e, r.getIndicatorId(e)),
-  getElements: (e) => {
-    const t = `[role=tab][data-ownedby='${CSS.escape(r.getListId(e))}']:not([disabled])`;
-    return k(r.getListEl(e), t);
-  },
-  getFirstTriggerEl: (e) => D(r.getElements(e)),
-  getLastTriggerEl: (e) => $(r.getElements(e)),
-  getNextTriggerEl: (e, o) => N(r.getElements(e), r.getTriggerId(e, o), e.loopFocus),
-  getPrevTriggerEl: (e, o) => B(r.getElements(e), r.getTriggerId(e, o), e.loopFocus),
-  getSelectedContentEl: (e) => {
-    if (e.value)
-      return r.getContentEl(e, e.value);
-  },
-  getSelectedTriggerEl: (e) => {
-    if (e.value)
-      return r.getTriggerEl(e, e.value);
-  },
-  getOffsetRect: (e) => ({
-    left: (e == null ? void 0 : e.offsetLeft) ?? 0,
-    top: (e == null ? void 0 : e.offsetTop) ?? 0,
-    width: (e == null ? void 0 : e.offsetWidth) ?? 0,
-    height: (e == null ? void 0 : e.offsetHeight) ?? 0
-  }),
-  getRectById: (e, o) => {
-    const t = P(r.getElements(e), r.getTriggerId(e, o));
-    return r.resolveRect(r.getOffsetRect(t));
-  },
-  resolveRect: (e) => ({
-    width: `${e.width}px`,
-    height: `${e.height}px`,
-    left: `${e.left}px`,
-    top: `${e.top}px`
-  })
+import { createAnatomy as L } from "../../anatomy/dist/index.js";
+import { isAnchorElement as N, trackElementRect as P, nextTick as S, raf as v, prevById as U, nextById as $, clickIfLink as D, dataAttr as d, isOpeningInNewTab as k, isSafari as W, isSelfTarget as x, isComposingEvent as M, getEventKey as X, itemById as H, queryAll as K, getFocusables as Y } from "../../dom-query/dist/index.js";
+import { last as q, first as j } from "../../utils/dist/index.js";
+import { setup as G } from "../../core/dist/index.js";
+import { createProps as F } from "../../types/dist/index.js";
+var J = L("tabs").parts("root", "list", "trigger", "content", "indicator"), b = J.build(), Q = (e) => {
+  var t;
+  return ((t = e.ids) == null ? void 0 : t.root) ?? `tabs:${e.id}`;
+}, y = (e) => {
+  var t;
+  return ((t = e.ids) == null ? void 0 : t.list) ?? `tabs:${e.id}:list`;
+}, E = (e, t) => {
+  var o;
+  return ((o = e.ids) == null ? void 0 : o.content) ?? `tabs:${e.id}:content-${t}`;
+}, f = (e, t) => {
+  var o;
+  return ((o = e.ids) == null ? void 0 : o.trigger) ?? `tabs:${e.id}:trigger-${t}`;
+}, w = (e) => {
+  var t;
+  return ((t = e.ids) == null ? void 0 : t.indicator) ?? `tabs:${e.id}:indicator`;
+}, Z = (e) => e.getById(y(e)), z = (e, t) => e.getById(E(e, t)), h = (e, t) => e.getById(f(e, t)), _ = (e) => e.getById(w(e)), V = (e) => {
+  const o = `[role=tab][data-ownedby='${CSS.escape(y(e))}']:not([disabled])`;
+  return K(Z(e), o);
+}, ee = (e) => j(V(e)), te = (e) => q(V(e)), ae = (e, t) => $(V(e), f(e, t.value), t.loopFocus), oe = (e, t) => U(V(e), f(e, t.value), t.loopFocus), O = (e) => ({
+  left: (e == null ? void 0 : e.offsetLeft) ?? 0,
+  top: (e == null ? void 0 : e.offsetTop) ?? 0,
+  width: (e == null ? void 0 : e.offsetWidth) ?? 0,
+  height: (e == null ? void 0 : e.offsetHeight) ?? 0
+}), re = (e, t) => {
+  const o = H(V(e), f(e, t));
+  return B(O(o));
+}, B = (e) => ({
+  width: `${e.width}px`,
+  height: `${e.height}px`,
+  left: `${e.left}px`,
+  top: `${e.top}px`
 });
-function z(e, o, t) {
-  const n = e.context.translations, s = e.matches("focused"), u = e.context.orientation === "vertical", d = e.context.orientation === "horizontal", y = e.context.composite, p = e.context.indicatorState;
-  function R(a) {
+function de(e, t) {
+  const { state: o, send: a, context: n, prop: r, scope: u } = e, p = r("translations"), g = o.matches("focused"), R = r("orientation") === "vertical", I = r("orientation") === "horizontal", m = r("composite");
+  function C(i) {
     return {
-      selected: e.context.value === a.value,
-      focused: e.context.focusedValue === a.value,
-      disabled: !!a.disabled
+      selected: n.get("value") === i.value,
+      focused: n.get("focusedValue") === i.value,
+      disabled: !!i.disabled
     };
   }
   return {
-    value: e.context.value,
-    focusedValue: e.context.focusedValue,
-    setValue(a) {
-      o({ type: "SET_VALUE", value: a });
+    value: n.get("value"),
+    focusedValue: n.get("focusedValue"),
+    setValue(i) {
+      a({ type: "SET_VALUE", value: i });
     },
     clearValue() {
-      o({ type: "CLEAR_VALUE" });
+      a({ type: "CLEAR_VALUE" });
     },
-    setIndicatorRect(a) {
-      const i = r.getTriggerId(e.context, a);
-      o({ type: "SET_INDICATOR_RECT", id: i });
+    setIndicatorRect(i) {
+      const s = f(u, i);
+      a({ type: "SET_INDICATOR_RECT", id: s });
     },
     syncTabIndex() {
-      o("SYNC_TAB_INDEX");
+      a({ type: "SYNC_TAB_INDEX" });
     },
-    selectNext(a) {
-      o({ type: "TAB_FOCUS", value: a, src: "selectNext" }), o({ type: "ARROW_NEXT", src: "selectNext" });
+    selectNext(i) {
+      a({ type: "TAB_FOCUS", value: i, src: "selectNext" }), a({ type: "ARROW_NEXT", src: "selectNext" });
     },
-    selectPrev(a) {
-      o({ type: "TAB_FOCUS", value: a, src: "selectPrev" }), o({ type: "ARROW_PREV", src: "selectPrev" });
+    selectPrev(i) {
+      a({ type: "TAB_FOCUS", value: i, src: "selectPrev" }), a({ type: "ARROW_PREV", src: "selectPrev" });
     },
     focus() {
-      var a;
-      (a = r.getSelectedTriggerEl(e.context)) == null || a.focus();
+      var s;
+      const i = n.get("value");
+      i && ((s = h(u, i)) == null || s.focus());
     },
     getRootProps() {
       return t.element({
-        ...v.root.attrs,
-        id: r.getRootId(e.context),
-        "data-orientation": e.context.orientation,
-        "data-focus": g(s),
-        dir: e.context.dir
+        ...b.root.attrs,
+        id: Q(u),
+        "data-orientation": r("orientation"),
+        "data-focus": d(g),
+        dir: r("dir")
       });
     },
     getListProps() {
       return t.element({
-        ...v.list.attrs,
-        id: r.getListId(e.context),
+        ...b.list.attrs,
+        id: y(u),
         role: "tablist",
-        dir: e.context.dir,
-        "data-focus": g(s),
-        "aria-orientation": e.context.orientation,
-        "data-orientation": e.context.orientation,
-        "aria-label": n == null ? void 0 : n.listLabel,
-        onKeyDown(a) {
-          if (a.defaultPrevented || !O(a) || w(a)) return;
-          const i = {
+        dir: r("dir"),
+        "data-focus": d(g),
+        "aria-orientation": r("orientation"),
+        "data-orientation": r("orientation"),
+        "aria-label": p == null ? void 0 : p.listLabel,
+        onKeyDown(i) {
+          if (i.defaultPrevented || !x(i) || M(i)) return;
+          const s = {
             ArrowDown() {
-              d || o({ type: "ARROW_NEXT", key: "ArrowDown" });
+              I || a({ type: "ARROW_NEXT", key: "ArrowDown" });
             },
             ArrowUp() {
-              d || o({ type: "ARROW_PREV", key: "ArrowUp" });
+              I || a({ type: "ARROW_PREV", key: "ArrowUp" });
             },
             ArrowLeft() {
-              u || o({ type: "ARROW_PREV", key: "ArrowLeft" });
+              R || a({ type: "ARROW_PREV", key: "ArrowLeft" });
             },
             ArrowRight() {
-              u || o({ type: "ARROW_NEXT", key: "ArrowRight" });
+              R || a({ type: "ARROW_NEXT", key: "ArrowRight" });
             },
             Home() {
-              o("HOME");
+              a({ type: "HOME" });
             },
             End() {
-              o("END");
-            },
-            Enter() {
-              o({ type: "ENTER" });
+              a({ type: "END" });
             }
           };
-          let l = F(a, e.context);
-          const c = i[l];
-          c && (a.preventDefault(), c(a));
+          let c = X(i, {
+            dir: r("dir"),
+            orientation: r("orientation")
+          });
+          const l = s[c];
+          if (l) {
+            i.preventDefault(), l(i);
+            return;
+          }
         }
       });
     },
-    getTriggerState: R,
-    getTriggerProps(a) {
-      const { value: i, disabled: l } = a, c = R(a);
+    getTriggerState: C,
+    getTriggerProps(i) {
+      const { value: s, disabled: c } = i, l = C(i);
       return t.button({
-        ...v.trigger.attrs,
+        ...b.trigger.attrs,
         role: "tab",
         type: "button",
-        disabled: l,
-        dir: e.context.dir,
-        "data-orientation": e.context.orientation,
-        "data-disabled": g(l),
-        "aria-disabled": l,
-        "data-value": i,
-        "aria-selected": c.selected,
-        "data-selected": g(c.selected),
-        "data-focus": g(c.focused),
-        "aria-controls": c.selected ? r.getContentId(e.context, i) : void 0,
-        "data-ownedby": r.getListId(e.context),
-        "data-ssr": g(e.context.ssr),
-        id: r.getTriggerId(e.context, i),
-        tabIndex: c.selected && y ? 0 : -1,
+        disabled: c,
+        dir: r("dir"),
+        "data-orientation": r("orientation"),
+        "data-disabled": d(c),
+        "aria-disabled": c,
+        "data-value": s,
+        "aria-selected": l.selected,
+        "data-selected": d(l.selected),
+        "data-focus": d(l.focused),
+        "aria-controls": l.selected ? E(u, s) : void 0,
+        "data-ownedby": y(u),
+        "data-ssr": d(n.get("ssr")),
+        id: f(u, s),
+        tabIndex: l.selected && m ? 0 : -1,
         onFocus() {
-          o({ type: "TAB_FOCUS", value: i });
+          a({ type: "TAB_FOCUS", value: s });
         },
-        onBlur(b) {
-          const I = b.relatedTarget;
-          (I == null ? void 0 : I.getAttribute("role")) !== "tab" && o({ type: "TAB_BLUR" });
+        onBlur(T) {
+          const A = T.relatedTarget;
+          (A == null ? void 0 : A.getAttribute("role")) !== "tab" && a({ type: "TAB_BLUR" });
         },
-        onClick(b) {
-          b.defaultPrevented || l || (_() && b.currentTarget.focus(), o({ type: "TAB_CLICK", value: i }));
+        onClick(T) {
+          T.defaultPrevented || k(T) || c || (W() && T.currentTarget.focus(), a({ type: "TAB_CLICK", value: s }));
         }
       });
     },
-    getContentProps(a) {
-      const { value: i } = a, l = e.context.value === i;
+    getContentProps(i) {
+      const { value: s } = i, c = n.get("value") === s;
       return t.element({
-        ...v.content.attrs,
-        dir: e.context.dir,
-        id: r.getContentId(e.context, i),
-        tabIndex: y ? 0 : -1,
-        "aria-labelledby": r.getTriggerId(e.context, i),
+        ...b.content.attrs,
+        dir: r("dir"),
+        id: E(u, s),
+        tabIndex: m ? 0 : -1,
+        "aria-labelledby": f(u, s),
         role: "tabpanel",
-        "data-ownedby": r.getListId(e.context),
-        "data-selected": g(l),
-        "data-orientation": e.context.orientation,
-        hidden: !l
+        "data-ownedby": y(u),
+        "data-selected": d(c),
+        "data-orientation": r("orientation"),
+        hidden: !c
       });
     },
     getIndicatorProps() {
-      var a, i, l, c;
+      const i = n.get("indicatorRect"), s = n.get("indicatorTransition");
       return t.element({
-        id: r.getIndicatorId(e.context),
-        ...v.indicator.attrs,
-        dir: e.context.dir,
-        "data-orientation": e.context.orientation,
+        id: w(u),
+        ...b.indicator.attrs,
+        dir: r("dir"),
+        "data-orientation": r("orientation"),
         style: {
           "--transition-property": "left, right, top, bottom, width, height",
-          "--left": (a = p.rect) == null ? void 0 : a.left,
-          "--top": (i = p.rect) == null ? void 0 : i.top,
-          "--width": (l = p.rect) == null ? void 0 : l.width,
-          "--height": (c = p.rect) == null ? void 0 : c.height,
+          "--left": i.left,
+          "--top": i.top,
+          "--width": i.width,
+          "--height": i.height,
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
-          transitionDuration: p.transition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionDuration: s ? "var(--transition-duration, 150ms)" : "0ms",
           transitionTimingFunction: "var(--transition-timing-function)",
-          [d ? "left" : "top"]: d ? "var(--left)" : "var(--top)"
+          [I ? "left" : "top"]: I ? "var(--left)" : "var(--top)"
         }
       });
     }
   };
 }
-var { not: K } = M;
-function x(e) {
-  const o = U(e);
-  return W(
-    {
-      initial: "idle",
-      context: {
-        dir: "ltr",
-        orientation: "horizontal",
-        activationMode: "automatic",
-        value: null,
-        loopFocus: !0,
-        composite: !0,
-        ...o,
-        focusedValue: o.value ?? null,
-        ssr: !0,
-        indicatorState: {
-          rendered: !1,
-          transition: !1,
-          rect: { left: "0px", top: "0px", width: "0px", height: "0px" }
-        }
-      },
-      watch: {
-        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
-        dir: ["syncIndicatorRect"],
-        orientation: ["syncIndicatorRect"]
+var { createMachine: ie } = G(), fe = ie({
+  props({ props: e }) {
+    return {
+      dir: "ltr",
+      orientation: "horizontal",
+      activationMode: "automatic",
+      loopFocus: !0,
+      composite: !0,
+      navigate(t) {
+        D(t.node);
       },
+      defaultValue: null,
+      ...e
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop: e, bindable: t }) {
+    return {
+      value: t(() => ({
+        defaultValue: e("defaultValue"),
+        value: e("value"),
+        onChange(o) {
+          var a;
+          (a = e("onValueChange")) == null || a({ value: o });
+        }
+      })),
+      focusedValue: t(() => ({
+        defaultValue: e("value") || e("defaultValue"),
+        sync: !0,
+        onChange(o) {
+          var a;
+          (a = e("onFocusChange")) == null || a({ focusedValue: o });
+        }
+      })),
+      ssr: t(() => ({ defaultValue: !0 })),
+      indicatorTransition: t(() => ({ defaultValue: !1 })),
+      indicatorRect: t(() => ({
+        defaultValue: { left: "0px", top: "0px", width: "0px", height: "0px" }
+      }))
+    };
+  },
+  watch({ context: e, prop: t, track: o, action: a }) {
+    o([() => e.get("value")], () => {
+      a(["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "navigateIfNeeded"]);
+    }), o([() => t("dir"), () => t("orientation")], () => {
+      a(["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: {
-        SET_VALUE: {
-          actions: "setValue"
-        },
-        CLEAR_VALUE: {
-          actions: "clearValue"
-        },
-        SET_INDICATOR_RECT: {
-          actions: "setIndicatorRect"
+        TAB_FOCUS: {
+          target: "focused",
+          actions: ["setFocusedValue"]
         },
-        SYNC_TAB_INDEX: {
-          actions: "syncTabIndex"
+        TAB_CLICK: {
+          target: "focused",
+          actions: ["setFocusedValue", "setValue"]
         }
-      },
-      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"]
-            }
-          }
+      }
+    },
+    focused: {
+      on: {
+        TAB_CLICK: {
+          actions: ["setFocusedValue", "setValue"]
         },
-        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: K("selectOnFocus"),
-              actions: "selectFocusedTab"
-            },
-            TAB_FOCUS: {
-              actions: ["setFocusedValue"]
-            },
-            TAB_BLUR: {
-              target: "idle",
-              actions: "clearFocusedValue"
-            }
+        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"]
+          }
+        ],
+        TAB_FOCUS: {
+          actions: ["setFocusedValue"]
+        },
+        TAB_BLUR: {
+          target: "idle",
+          actions: ["clearFocusedValue"]
         }
       }
+    }
+  },
+  implementations: {
+    guards: {
+      selectOnFocus: ({ prop: e }) => e("activationMode") === "automatic"
     },
-    {
-      guards: {
-        selectOnFocus: (t) => t.activationMode === "automatic"
+    actions: {
+      selectFocusedTab({ context: e, prop: t }) {
+        v(() => {
+          const o = e.get("focusedValue");
+          if (!o) return;
+          const n = t("deselectable") && e.get("value") === o ? null : o;
+          e.set("value", n);
+        });
       },
-      actions: {
-        syncFocusedValue(t) {
-          t.value != null && t.focusedValue == null && (t.focusedValue = t.value);
-        },
-        selectFocusedTab(t) {
-          T(() => {
-            const s = t.deselectable && t.value === t.focusedValue ? null : t.focusedValue;
-            f.value(t, s);
-          });
-        },
-        setFocusedValue(t, n) {
-          n.value != null && f.focusedValue(t, n.value);
-        },
-        clearFocusedValue(t) {
-          f.focusedValue(t, null);
-        },
-        setValue(t, n) {
-          const u = t.deselectable && t.value === t.focusedValue ? null : n.value;
-          f.value(t, u);
-        },
-        clearValue(t) {
-          f.value(t, null);
-        },
-        focusFirstTab(t) {
-          T(() => {
-            var n;
-            (n = r.getFirstTriggerEl(t)) == null || n.focus();
-          });
-        },
-        focusLastTab(t) {
-          T(() => {
-            var n;
-            (n = r.getLastTriggerEl(t)) == null || n.focus();
-          });
-        },
-        focusNextTab(t) {
-          if (!t.focusedValue) return;
-          const n = r.getNextTriggerEl(t, t.focusedValue);
-          T(() => {
-            t.composite ? n == null || n.focus() : (n == null ? void 0 : n.dataset.value) != null && f.focusedValue(t, n.dataset.value);
-          });
-        },
-        focusPrevTab(t) {
-          if (!t.focusedValue) return;
-          const n = r.getPrevTriggerEl(t, t.focusedValue);
-          T(() => {
-            t.composite ? n == null || n.focus() : (n == null ? void 0 : n.dataset.value) != null && f.focusedValue(t, n.dataset.value);
-          });
-        },
-        checkRenderedElements(t) {
-          t.indicatorState.rendered = !!r.getIndicatorEl(t);
-        },
-        syncTabIndex(t) {
-          T(() => {
-            const n = r.getSelectedContentEl(t);
-            if (!n) return;
-            L(n).length > 0 ? n.removeAttribute("tabindex") : n.setAttribute("tabindex", "0");
-          });
-        },
-        cleanupObserver(t) {
-          var n;
-          (n = t.indicatorCleanup) == null || n.call(t);
-        },
-        allowIndicatorTransition(t) {
-          t.indicatorState.transition = !0;
-        },
-        setIndicatorRect(t, n) {
-          const s = n.id ?? t.value;
-          !t.indicatorState.rendered || !s || !r.getTriggerEl(t, s) || (t.indicatorState.rect = r.getRectById(t, s), V(() => {
-            t.indicatorState.transition = !1;
-          }));
-        },
-        syncSsr(t) {
-          t.ssr = !1;
-        },
-        syncIndicatorRect(t) {
-          var u;
-          (u = t.indicatorCleanup) == null || u.call(t);
-          const n = t.value;
-          if (!t.indicatorState.rendered || !n) return;
-          const s = r.getSelectedTriggerEl(t);
-          s && (t.indicatorCleanup = X(s, {
-            getRect(d) {
-              return r.getOffsetRect(d);
-            },
-            onChange(d) {
-              t.indicatorState.rect = r.resolveRect(d), V(() => {
-                t.indicatorState.transition = !1;
-              });
-            }
-          }));
-        },
-        clickIfLink(t) {
-          C(r.getSelectedTriggerEl(t));
+      setFocusedValue({ context: e, event: t, flush: o }) {
+        t.value != null && o(() => {
+          e.set("focusedValue", t.value);
+        });
+      },
+      clearFocusedValue({ context: e }) {
+        e.set("focusedValue", null);
+      },
+      setValue({ context: e, event: t, prop: o }) {
+        const a = o("deselectable") && e.get("value") === e.get("focusedValue");
+        e.set("value", a ? null : t.value);
+      },
+      clearValue({ context: e }) {
+        e.set("value", null);
+      },
+      focusFirstTab({ scope: e }) {
+        v(() => {
+          var t;
+          (t = ee(e)) == null || t.focus();
+        });
+      },
+      focusLastTab({ scope: e }) {
+        v(() => {
+          var t;
+          (t = te(e)) == null || t.focus();
+        });
+      },
+      focusNextTab({ context: e, prop: t, scope: o, event: a }) {
+        const n = a.value ?? e.get("focusedValue");
+        if (!n) return;
+        const r = ae(o, {
+          value: n,
+          loopFocus: t("loopFocus")
+        });
+        v(() => {
+          t("composite") ? r == null || r.focus() : (r == null ? void 0 : r.dataset.value) != null && e.set("focusedValue", r.dataset.value);
+        });
+      },
+      focusPrevTab({ context: e, prop: t, scope: o, event: a }) {
+        const n = a.value ?? e.get("focusedValue");
+        if (!n) return;
+        const r = oe(o, {
+          value: n,
+          loopFocus: t("loopFocus")
+        });
+        v(() => {
+          t("composite") ? r == null || r.focus() : (r == null ? void 0 : r.dataset.value) != null && e.set("focusedValue", r.dataset.value);
+        });
+      },
+      syncTabIndex({ context: e, scope: t }) {
+        v(() => {
+          const o = e.get("value");
+          if (!o) return;
+          const a = z(t, o);
+          if (!a) return;
+          Y(a).length > 0 ? a.removeAttribute("tabindex") : a.setAttribute("tabindex", "0");
+        });
+      },
+      cleanupObserver({ refs: e }) {
+        const t = e.get("indicatorCleanup");
+        t && t();
+      },
+      allowIndicatorTransition({ context: e }) {
+        e.set("indicatorTransition", !0);
+      },
+      setIndicatorRect({ context: e, event: t, scope: o }) {
+        const a = t.id ?? e.get("value");
+        if (!_(o)) return;
+        if (!a) {
+          e.set("indicatorTransition", !1);
+          return;
+        }
+        h(o, a) && (e.set("indicatorRect", re(o, a)), S(() => {
+          e.set("indicatorTransition", !1);
+        }));
+      },
+      syncSsr({ context: e }) {
+        e.set("ssr", !1);
+      },
+      syncIndicatorRect({ context: e, refs: t, scope: o }) {
+        const a = t.get("indicatorCleanup");
+        a && a();
+        const n = e.get("value");
+        if (!n) {
+          e.set("indicatorTransition", !1);
+          return;
         }
+        const r = h(o, n), u = _(o);
+        if (!r || !u) return;
+        const p = P([r], {
+          measure(g) {
+            return O(g);
+          },
+          onEntry({ rects: g }) {
+            const [R] = g;
+            e.set("indicatorRect", B(R));
+          }
+        });
+        t.set("indicatorCleanup", p);
+      },
+      navigateIfNeeded({ context: e, prop: t, scope: o }) {
+        var r;
+        const a = e.get("value");
+        if (!a) return;
+        const n = h(o, a);
+        N(n) && ((r = t("navigate")) == null || r({ value: a, node: n, href: n.href }));
       }
     }
-  );
-}
-var m = {
-  change: (e) => {
-    var o;
-    e.value != null && ((o = e.onValueChange) == null || o.call(e, { value: e.value }));
-  },
-  focusChange: (e) => {
-    var o;
-    e.focusedValue != null && ((o = e.onFocusChange) == null || o.call(e, { focusedValue: e.focusedValue }));
   }
-}, f = {
-  value: (e, o) => {
-    h(o, e.value) || (e.value = o, m.change(e));
-  },
-  focusedValue: (e, o) => {
-    h(o, e.focusedValue) || (e.focusedValue = o, m.focusChange(e));
-  }
-};
-E()([
+});
+F()([
   "activationMode",
   "composite",
+  "deselectable",
   "dir",
   "getRootNode",
   "id",
   "ids",
   "loopFocus",
+  "navigate",
   "onFocusChange",
   "onValueChange",
   "orientation",
   "translations",
-  "deselectable",
-  "value"
+  "value",
+  "defaultValue"
 ]);
-E()(["disabled", "value"]);
-E()(["value"]);
+F()(["disabled", "value"]);
+F()(["value"]);
 export {
-  H as anatomy,
-  z as connect,
-  x as machine
+  J as anatomy,
+  de as connect,
+  fe as machine
 };