@wow-two-beta/ui-vue 0.0.5 → 0.0.6

package/dist/chunks/LinkItem.vue_vue_type_script_setup_true_lang-BjPIqvPc.js

@@ -0,0 +1,1809 @@
+import { defineComponent, useAttrs, useTemplateRef, computed, openBlock, createElementBlock, mergeProps, createElementVNode, Fragment, renderList, unref, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode, normalizeClass, inject, provide, createBlock, withCtx, shallowRef, watch, onScopeDispose, useSlots, onMounted, toValue, normalizeProps, guardReactiveProps, normalizeStyle } from "vue";
+import { U as UrlExtensions } from "./UrlExtensions-DqgLm0KY.js";
+import { ChevronRight, ChevronsLeft, ChevronLeft, ChevronsRight, ChevronDown } from "lucide-vue-next";
+import { c as cn } from "./Cn-CzDCF-Ah.js";
+import { _ as _sfc_main$q } from "./Icon.vue_vue_type_script_setup_true_lang-BVWSqaoe.js";
+import { d as dataAttr } from "./DataAttr-7BR67dTj.js";
+import { D as DomOrderExtensions } from "./DomOrderExtensions-Czsyvn6e.js";
+import { u as useId } from "./UseId-CtgAhGrn.js";
+import { u as useControlled } from "./UseControlled-BQneb7BW.js";
+import { P as Primitive } from "./Primitive-Bt_MgDir.js";
+import { u as useReducedMotion } from "./UseReducedMotion-NZ5fg-Xb.js";
+import { P as Presence } from "./Presence-BwBquQOQ.js";
+import { _ as _sfc_main$v, b as useRovingFocusItem } from "./RovingFocusGroup.vue_vue_type_script_setup_true_lang-BGZe5AX4.js";
+import { tv } from "tailwind-variants";
+import { s as surfaceVariants } from "./SurfaceStyles-BYLzCbuJ.js";
+import { _ as _sfc_main$r } from "./Portal.vue_vue_type_script_setup_true_lang-C2_xSIMy.js";
+import { _ as _sfc_main$s } from "./AnchoredPositioner.vue_vue_type_script_setup_true_lang-BpBVI2Cu.js";
+import { _ as _sfc_main$t, a as _sfc_main$u } from "./DismissableLayer.vue_vue_type_script_setup_true_lang-DElE4ZeQ.js";
+import { A as AriaAttribute } from "./AriaAttribute-CmUjjXjp.js";
+import { H as HtmlElement } from "./HtmlValues-jlKY5f9C.js";
+const _hoisted_1$9 = { class: "flex flex-wrap items-center gap-1.5" };
+const _hoisted_2$3 = ["href"];
+const _hoisted_3$1 = ["aria-current"];
+const _hoisted_4$1 = {
+  key: 0,
+  "aria-hidden": "true",
+  class: "text-subtle-foreground"
+};
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
+  ...{ name: "Breadcrumb", inheritAttrs: false },
+  __name: "Breadcrumb",
+  props: {
+    items: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn("text-sm", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    const lastIndex = computed(() => props.items.length - 1);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", mergeProps({
+        ref_key: "el",
+        ref: el,
+        "aria-label": "Breadcrumb"
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("ol", _hoisted_1$9, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item, i) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: item.href ?? item.label
+            }, [
+              createElementVNode("li", null, [
+                item.href && i !== lastIndex.value ? (openBlock(), createElementBlock("a", {
+                  key: 0,
+                  href: unref(UrlExtensions).safeNavigation(item.href),
+                  class: "text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
+                }, [
+                  renderSlot(_ctx.$slots, "label", {
+                    item,
+                    index: i
+                  }, () => [
+                    createTextVNode(toDisplayString(item.label), 1)
+                  ])
+                ], 8, _hoisted_2$3)) : (openBlock(), createElementBlock("span", {
+                  key: 1,
+                  "aria-current": i === lastIndex.value ? "page" : void 0,
+                  class: "text-foreground"
+                }, [
+                  renderSlot(_ctx.$slots, "label", {
+                    item,
+                    index: i
+                  }, () => [
+                    createTextVNode(toDisplayString(item.label), 1)
+                  ])
+                ], 8, _hoisted_3$1))
+              ]),
+              i !== lastIndex.value ? (openBlock(), createElementBlock("li", _hoisted_4$1, [
+                renderSlot(_ctx.$slots, "separator", {}, () => [
+                  createVNode(unref(_sfc_main$q), {
+                    icon: unref(ChevronRight),
+                    size: 14
+                  }, null, 8, ["icon"])
+                ])
+              ])) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$8 = ["disabled"];
+const _hoisted_2$2 = ["disabled"];
+const _hoisted_3 = ["aria-current", "onClick"];
+const _hoisted_4 = ["disabled"];
+const _hoisted_5 = ["disabled"];
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function buildPages(total, page, siblings) {
+  if (total <= 1) return [1];
+  const left = Math.max(2, page - siblings);
+  const right = Math.min(total - 1, page + siblings);
+  const pages = [1];
+  if (left > 2) pages.push("ellipsis");
+  pages.push(...range(left, right));
+  if (right < total - 1) pages.push("ellipsis");
+  if (total > 1) pages.push(total);
+  return pages;
+}
+const BaseButton = "inline-flex h-8 min-w-8 items-center justify-center rounded-md border border-transparent px-2 text-sm transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
+  ...{ name: "Pagination", inheritAttrs: false },
+  __name: "Pagination",
+  props: {
+    total: {},
+    page: {},
+    siblings: { default: 1 },
+    hideFirstLast: { type: Boolean, default: false }
+  },
+  emits: ["update:page"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const pages = computed(() => buildPages(props.total, props.page, props.siblings));
+    function go(page) {
+      const next = Math.min(props.total, Math.max(1, page));
+      emit("update:page", next);
+    }
+    const classes = computed(() => cn("inline-flex items-center gap-1", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", mergeProps({
+        ref_key: "el",
+        ref: el,
+        "aria-label": "Pagination"
+      }, rest.value, { class: classes.value }), [
+        !props.hideFirstLast ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          type: "button",
+          "aria-label": "First page",
+          disabled: props.page <= 1,
+          class: normalizeClass(unref(cn)(BaseButton, "hover:bg-muted")),
+          onClick: _cache[0] || (_cache[0] = ($event) => go(1))
+        }, [
+          createVNode(unref(_sfc_main$q), {
+            icon: unref(ChevronsLeft),
+            size: 16
+          }, null, 8, ["icon"])
+        ], 10, _hoisted_1$8)) : createCommentVNode("", true),
+        createElementVNode("button", {
+          type: "button",
+          "aria-label": "Previous page",
+          disabled: props.page <= 1,
+          class: normalizeClass(unref(cn)(BaseButton, "hover:bg-muted")),
+          onClick: _cache[1] || (_cache[1] = ($event) => go(props.page - 1))
+        }, [
+          createVNode(unref(_sfc_main$q), {
+            icon: unref(ChevronLeft),
+            size: 16
+          }, null, 8, ["icon"])
+        ], 10, _hoisted_2$2),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(pages.value, (p, i) => {
+          return openBlock(), createElementBlock(Fragment, null, [
+            p === "ellipsis" ? (openBlock(), createElementBlock("span", {
+              key: `e-${i}`,
+              class: "px-1 text-muted-foreground"
+            }, "…")) : (openBlock(), createElementBlock("button", {
+              key: p,
+              type: "button",
+              "aria-current": p === props.page ? "page" : void 0,
+              class: normalizeClass(
+                unref(cn)(BaseButton, p === props.page ? "border-primary bg-primary text-primary-foreground" : "hover:bg-muted")
+              ),
+              onClick: ($event) => go(p)
+            }, toDisplayString(p), 11, _hoisted_3))
+          ], 64);
+        }), 256)),
+        createElementVNode("button", {
+          type: "button",
+          "aria-label": "Next page",
+          disabled: props.page >= props.total,
+          class: normalizeClass(unref(cn)(BaseButton, "hover:bg-muted")),
+          onClick: _cache[2] || (_cache[2] = ($event) => go(props.page + 1))
+        }, [
+          createVNode(unref(_sfc_main$q), {
+            icon: unref(ChevronRight),
+            size: 16
+          }, null, 8, ["icon"])
+        ], 10, _hoisted_4),
+        !props.hideFirstLast ? (openBlock(), createElementBlock("button", {
+          key: 1,
+          type: "button",
+          "aria-label": "Last page",
+          disabled: props.page >= props.total,
+          class: normalizeClass(unref(cn)(BaseButton, "hover:bg-muted")),
+          onClick: _cache[3] || (_cache[3] = ($event) => go(props.total))
+        }, [
+          createVNode(unref(_sfc_main$q), {
+            icon: unref(ChevronsRight),
+            size: 16
+          }, null, 8, ["icon"])
+        ], 10, _hoisted_5)) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
+const MenuKey = Symbol("wow-two.menu");
+function useMenuContext() {
+  const context = inject(MenuKey, null);
+  if (!context) {
+    throw new Error("MenuItem / MenuGroup / MenuLabel / MenuSeparator must be used inside <Menu>");
+  }
+  return context;
+}
+const menuVariants = tv({
+  base: "flex min-w-[8rem] flex-col gap-0.5 rounded-md border border-border bg-popover p-1 text-sm text-popover-foreground shadow-md outline-hidden"
+});
+const menuItemVariants = tv({
+  base: "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm outline-hidden transition-colors focus:bg-muted focus:text-foreground hover:bg-muted hover:text-foreground",
+  variants: {
+    state: {
+      default: "text-popover-foreground",
+      destructive: "text-destructive focus:bg-destructive-soft hover:bg-destructive-soft",
+      disabled: "pointer-events-none opacity-50"
+    }
+  },
+  defaultVariants: { state: "default" }
+});
+const menuLabelVariants = tv({
+  base: "px-2 py-1.5 text-xs font-semibold text-muted-foreground"
+});
+const menuSeparatorVariants = tv({
+  base: "-mx-1 my-1 h-px bg-border"
+});
+const MenuItemState = {
+  /** Refers to the default, neutral item. */
+  Default: "default",
+  /** Refers to a destructive item (e.g. delete). */
+  Destructive: "destructive",
+  /** Refers to a non-interactive, dimmed item. */
+  Disabled: "disabled"
+};
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
+  ...{ name: "Menu", inheritAttrs: false },
+  __name: "Menu",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    anchor: {},
+    placement: { default: "bottom-start" },
+    offset: { default: 6 },
+    variant: { default: void 0 },
+    tone: { default: void 0 },
+    radius: { default: void 0 },
+    padding: { default: void 0 },
+    elevation: { default: void 0 }
+  },
+  emits: ["update:open", "keydown"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const isMenuOpen = computed(() => props.open ?? false);
+    const items = [];
+    function registerItem(entry) {
+      const index = items.findIndex((i) => i.id === entry.id);
+      if (index >= 0) items[index] = entry;
+      else items.push(entry);
+    }
+    function unregisterItem(id) {
+      const index = items.findIndex((i) => i.id === id);
+      if (index >= 0) items.splice(index, 1);
+    }
+    provide(MenuKey, { registerItem, unregisterItem, items, close: () => emit("update:open", false) });
+    const classes = computed(
+      () => cn(
+        surfaceVariants({
+          variant: props.variant ?? "surface",
+          tone: props.tone,
+          radius: props.radius ?? "md",
+          padding: props.padding ?? "xs",
+          elevation: props.elevation
+        }),
+        menuVariants(),
+        "motion-safe:data-[state=open]:animate-(--animate-pop-in)",
+        "motion-safe:data-[state=closed]:animate-(--animate-pop-out)",
+        "motion-reduce:animate-none",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    function handleEscape() {
+      emit("update:open", false);
+    }
+    function handleOutsidePointerDown(event) {
+      if (props.anchor?.contains(event.target)) return;
+      emit("update:open", false);
+    }
+    function handleKeydown(event) {
+      emit("keydown", event);
+      if (event.defaultPrevented) return;
+      if (event.key === "Tab") {
+        event.preventDefault();
+        emit("update:open", false);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$r), null, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$s), {
+            anchor: props.anchor,
+            placement: props.placement,
+            offset: props.offset,
+            class: "z-dropdown"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Presence), { "is-present": isMenuOpen.value }, {
+                default: withCtx(() => [
+                  createVNode(unref(_sfc_main$t), {
+                    "as-child": "",
+                    trapped: "",
+                    loop: ""
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(_sfc_main$u), mergeProps({
+                        role: "menu",
+                        "on-escape": handleEscape,
+                        "on-outside-pointer-down": handleOutsidePointerDown
+                      }, rest.value, {
+                        class: classes.value,
+                        onKeydown: handleKeydown
+                      }), {
+                        default: withCtx(() => [
+                          renderSlot(_ctx.$slots, "default")
+                        ]),
+                        _: 3
+                      }, 16, ["class"])
+                    ]),
+                    _: 3
+                  })
+                ]),
+                _: 3
+              }, 8, ["is-present"])
+            ]),
+            _: 3
+          }, 8, ["anchor", "placement", "offset"])
+        ]),
+        _: 3
+      });
+    };
+  }
+});
+const _hoisted_1$7 = ["disabled", "aria-disabled", "data-disabled"];
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
+  ...{ name: "MenuItem", inheritAttrs: false },
+  __name: "MenuItem",
+  props: {
+    state: { default: void 0 },
+    isDisabled: { type: Boolean, default: void 0 }
+  },
+  emits: ["select"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const menu = useMenuContext();
+    const id = useId();
+    const el = shallowRef(null);
+    watch(
+      [el, () => props.isDisabled],
+      ([node, isDisabled]) => {
+        menu.registerItem({ id, el: node, disabled: isDisabled === true });
+      },
+      { immediate: true, flush: "post" }
+    );
+    onScopeDispose(() => menu.unregisterItem(id));
+    function moveFocus(target) {
+      const list = DomOrderExtensions.inDocumentOrder(
+        menu.items.filter((i) => !i.disabled),
+        (item) => item.el
+      );
+      if (list.length === 0) return;
+      if (target === "first" || target === "last") {
+        list[target === "first" ? 0 : list.length - 1]?.el?.focus();
+        return;
+      }
+      const index = list.findIndex((i) => i.id === id);
+      let nextIndex = index + target;
+      if (index === -1) nextIndex = target === 1 ? 0 : list.length - 1;
+      if (nextIndex < 0) nextIndex = list.length - 1;
+      if (nextIndex >= list.length) nextIndex = 0;
+      list[nextIndex]?.el?.focus();
+    }
+    function handleKeydown(event) {
+      if (event.defaultPrevented || props.isDisabled) return;
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          moveFocus(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          moveFocus(-1);
+          break;
+        case "Home":
+          event.preventDefault();
+          moveFocus("first");
+          break;
+        case "End":
+          event.preventDefault();
+          moveFocus("last");
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          emit("select");
+          menu.close();
+          break;
+      }
+    }
+    function handleClick(event) {
+      if (event.defaultPrevented || props.isDisabled) return;
+      emit("select");
+      menu.close();
+    }
+    const itemState = computed(
+      () => props.state ?? (props.isDisabled ? MenuItemState.Disabled : MenuItemState.Default)
+    );
+    const classes = computed(() => cn(menuItemVariants({ state: itemState.value }), attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps({
+        ref_key: "el",
+        ref: el,
+        type: "button",
+        role: "menuitem",
+        disabled: __props.isDisabled,
+        "aria-disabled": __props.isDisabled || void 0,
+        "data-disabled": unref(dataAttr)(__props.isDisabled)
+      }, rest.value, {
+        class: classes.value,
+        onClick: handleClick,
+        onKeydown: handleKeydown
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$7);
+    };
+  }
+});
+const _hoisted_1$6 = ["aria-labelledby"];
+const _hoisted_2$1 = ["id"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
+  ...{ name: "MenuGroup", inheritAttrs: false },
+  __name: "MenuGroup",
+  props: {
+    label: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const el = useTemplateRef("el");
+    const labelId = useId();
+    const hasLabel = computed(() => Boolean(props.label) || Boolean(slots.label));
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "group",
+        "aria-labelledby": hasLabel.value ? unref(labelId) : void 0
+      }, unref(attrs)), [
+        hasLabel.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: unref(labelId),
+          class: normalizeClass(unref(menuLabelVariants)())
+        }, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(props.label), 1)
+          ])
+        ], 10, _hoisted_2$1)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$6);
+    };
+  }
+});
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
+  ...{ name: "MenuLabel", inheritAttrs: false },
+  __name: "MenuLabel",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn(menuLabelVariants(), attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  ...{ name: "MenuSeparator", inheritAttrs: false },
+  __name: "MenuSeparator",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn(menuSeparatorVariants(), attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "separator"
+      }, rest.value, { class: classes.value }), null, 16);
+    };
+  }
+});
+const dropdownMenuContextKey = Symbol("wow-two.dropdownMenu");
+function useDropdownMenuContext() {
+  const context = inject(dropdownMenuContextKey, null);
+  if (!context) throw new Error("DropdownMenu.* must be used inside <DropdownMenu>");
+  return context;
+}
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  ...{ name: "DropdownMenu", inheritAttrs: false },
+  __name: "DropdownMenu",
+  props: {
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    placement: { default: "bottom-start" },
+    offset: { default: 6 }
+  },
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const controlled = useControlled({
+      controlled: () => props.open,
+      default: () => props.defaultOpen,
+      onChange: (value) => {
+        emit("update:open", value);
+      }
+    });
+    provide(dropdownMenuContextKey, {
+      open: controlled.value,
+      setOpen: controlled.setValue,
+      triggerEl: shallowRef(null),
+      openFocus: { current: "first" },
+      placement: computed(() => props.placement),
+      offset: computed(() => props.offset)
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+const NavExtensions = {
+  /**
+   * The DOM node behind a template ref, or `null`.
+   *
+   * The `typeof` guard is load-bearing rather than defensive. Every trigger here
+   * seeds its anchor element from a `watch(..., { immediate: true, flush: 'post' })`,
+   * and Vue runs an *immediate* watcher once during SSR — where `HTMLElement` is
+   * not a global, so a bare `value instanceof HTMLElement` throws `ReferenceError`
+   * and takes the whole server render down. Returning `null` on the server is
+   * correct as well as safe: there is no element to anchor to until hydration.
+   */
+  toHtmlElement(value) {
+    if (typeof HTMLElement === "undefined") return null;
+    return value instanceof HTMLElement ? value : null;
+  }
+};
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  ...{ name: "DropdownMenuTrigger", inheritAttrs: false },
+  __name: "DropdownMenuTrigger",
+  props: {
+    asChild: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const context = useDropdownMenuContext();
+    const inner = useTemplateRef("inner");
+    const isOpen = context.open;
+    watch(
+      inner,
+      (instance) => {
+        context.triggerEl.value = NavExtensions.toHtmlElement(instance?.$el);
+      },
+      { immediate: true, flush: "post" }
+    );
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      context.openFocus.current = "first";
+      context.setOpen(!context.open.value);
+    }
+    function handleKeydown(event) {
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        context.openFocus.current = event.key === "ArrowUp" ? "last" : "first";
+        context.setOpen(true);
+      }
+    }
+    const el = computed(() => inner.value?.$el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        as: "button",
+        "as-child": __props.asChild,
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": unref(isOpen),
+        "data-state": unref(isOpen) ? "open" : "closed"
+      }, unref(attrs), {
+        onClick: handleClick,
+        onKeydown: handleKeydown
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as-child", "aria-expanded", "data-state"]);
+    };
+  }
+});
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  ...{ name: "DropdownMenuContent", inheritAttrs: false },
+  __name: "DropdownMenuContent",
+  setup(__props) {
+    const attrs = useAttrs();
+    const context = useDropdownMenuContext();
+    const reducedMotion = useReducedMotion();
+    const isOpen = context.open;
+    const anchor = computed(() => context.triggerEl.value);
+    const placement = context.placement;
+    const offset = context.offset;
+    const panelEl = shallowRef(null);
+    const mounted = shallowRef(context.open.value);
+    watch(
+      [() => context.open.value, reducedMotion],
+      ([open, isReduced], _previous, onCleanup) => {
+        if (open) {
+          mounted.value = true;
+          return;
+        }
+        if (!isReduced) return;
+        if (typeof requestAnimationFrame === "undefined") return;
+        const raf = requestAnimationFrame(() => {
+          mounted.value = false;
+        });
+        onCleanup(() => cancelAnimationFrame(raf));
+      },
+      { immediate: true, flush: "post" }
+    );
+    function focusLastEnabledItem(panel) {
+      if (context.openFocus.current !== "last") return;
+      context.openFocus.current = "first";
+      const items = panel.querySelectorAll('[role="menuitem"]:not([disabled])');
+      items[items.length - 1]?.focus();
+    }
+    watch(
+      [panelEl, () => context.open.value],
+      ([panel, open]) => {
+        if (!panel || !open) return;
+        focusLastEnabledItem(panel);
+      },
+      { flush: "post" }
+    );
+    function setPanel(node) {
+      panelEl.value = node ?? null;
+    }
+    function handleClose() {
+      context.setOpen(false);
+      requestAnimationFrame(() => context.triggerEl.value?.focus());
+    }
+    function handleAnimationEnd() {
+      if (!context.open.value) mounted.value = false;
+    }
+    const panelClasses = computed(
+      () => cn(
+        /* pop (fade + slight scale) gated on data-state; motion-safe so
+           reduced-motion users get no movement. */
+        "motion-safe:data-[state=open]:animate-(--animate-pop-in)",
+        "motion-safe:data-[state=closed]:animate-(--animate-pop-out)",
+        "motion-reduce:animate-none",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    return (_ctx, _cache) => {
+      return mounted.value ? (openBlock(), createBlock(_sfc_main$n, mergeProps({
+        key: 0,
+        open: mounted.value,
+        anchor: anchor.value,
+        placement: unref(placement),
+        offset: unref(offset)
+      }, rest.value, { "onUpdate:open": handleClose }), {
+        default: withCtx(() => [
+          createVNode(unref(Presence), { "is-present": unref(isOpen) }, {
+            default: withCtx(() => [
+              createElementVNode("div", {
+                ref: setPanel,
+                class: normalizeClass(panelClasses.value),
+                onAnimationend: handleAnimationEnd
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 34)
+            ]),
+            _: 3
+          }, 8, ["is-present"])
+        ]),
+        _: 3
+      }, 16, ["open", "anchor", "placement", "offset"])) : createCommentVNode("", true);
+    };
+  }
+});
+const contextMenuContextKey = Symbol("wow-two.contextMenu");
+function useContextMenuContext() {
+  const context = inject(contextMenuContextKey, null);
+  if (!context) throw new Error("ContextMenu.* must be used inside <ContextMenu>");
+  return context;
+}
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
+  ...{ name: "ContextMenu", inheritAttrs: false },
+  __name: "ContextMenu",
+  setup(__props) {
+    const open = shallowRef(false);
+    const anchor = shallowRef(null);
+    const triggerEl = shallowRef(null);
+    const restoreFocus = { current: null };
+    let restoreRaf = 0;
+    function setAnchor(el) {
+      const previous = anchor.value;
+      if (previous && typeof document !== "undefined" && previous.parentNode === document.body) {
+        previous.remove();
+      }
+      anchor.value = el;
+    }
+    function setOpen(next) {
+      if (next && !open.value) {
+        cancelAnimationFrame(restoreRaf);
+        restoreFocus.current ??= document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+      }
+      open.value = next;
+      if (next) return;
+      setAnchor(null);
+      const restoreTarget = restoreFocus.current;
+      restoreFocus.current = null;
+      if (!restoreTarget) return;
+      let attempts = 0;
+      const tryRestore = () => {
+        restoreTarget.focus();
+        if (document.activeElement !== restoreTarget && attempts++ < 30) {
+          restoreRaf = requestAnimationFrame(tryRestore);
+        }
+      };
+      restoreRaf = requestAnimationFrame(tryRestore);
+    }
+    onScopeDispose(() => {
+      if (typeof cancelAnimationFrame !== "undefined") cancelAnimationFrame(restoreRaf);
+      const current = anchor.value;
+      if (current && typeof document !== "undefined" && current.parentNode === document.body) {
+        current.remove();
+      }
+    });
+    provide(contextMenuContextKey, { open, setOpen, anchor, setAnchor, triggerEl, restoreFocus });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+const LongPressMs = 600;
+function makeVirtualAnchor(x, y) {
+  const el = document.createElement("div");
+  el.style.position = "fixed";
+  el.style.left = `${x}px`;
+  el.style.top = `${y}px`;
+  el.style.width = "0px";
+  el.style.height = "0px";
+  el.style.pointerEvents = "none";
+  document.body.appendChild(el);
+  return el;
+}
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  ...{ name: "ContextMenuTrigger", inheritAttrs: false },
+  __name: "ContextMenuTrigger",
+  props: {
+    asChild: { type: Boolean, default: false },
+    isDisabled: { type: Boolean, default: void 0 }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const context = useContextMenuContext();
+    const inner = useTemplateRef("inner");
+    let longPressTimer = null;
+    watch(
+      inner,
+      (instance) => {
+        context.triggerEl.value = NavExtensions.toHtmlElement(instance?.$el);
+      },
+      { immediate: true, flush: "post" }
+    );
+    function clearLongPress() {
+      if (longPressTimer) clearTimeout(longPressTimer);
+      longPressTimer = null;
+    }
+    onScopeDispose(clearLongPress);
+    function handleContextMenu(event) {
+      if (event.defaultPrevented || props.isDisabled) return;
+      event.preventDefault();
+      context.setAnchor(makeVirtualAnchor(event.clientX, event.clientY));
+      context.setOpen(true);
+    }
+    function handlePointerDown(event) {
+      if (!props.isDisabled && !context.open.value && (event.button === 2 || event.pointerType === "touch")) {
+        context.restoreFocus.current = document.activeElement instanceof HTMLElement && document.activeElement !== document.body ? document.activeElement : null;
+      }
+      if (event.defaultPrevented || props.isDisabled || event.pointerType !== "touch") return;
+      const x = event.clientX;
+      const y = event.clientY;
+      longPressTimer = setTimeout(() => {
+        context.setAnchor(makeVirtualAnchor(x, y));
+        context.setOpen(true);
+      }, LongPressMs);
+    }
+    const el = computed(() => inner.value?.$el ?? null);
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        ref_key: "inner",
+        ref: inner,
+        as: "div",
+        "as-child": __props.asChild
+      }, unref(attrs), {
+        onContextmenu: handleContextMenu,
+        onPointerdown: handlePointerDown,
+        onPointerup: clearLongPress,
+        onPointercancel: clearLongPress
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as-child"]);
+    };
+  }
+});
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  ...{ name: "ContextMenuContent", inheritAttrs: false },
+  __name: "ContextMenuContent",
+  props: {
+    placement: { default: "bottom-start" },
+    offset: { default: 2 }
+  },
+  setup(__props) {
+    const attrs = useAttrs();
+    const context = useContextMenuContext();
+    const isOpen = context.open;
+    const anchor = context.anchor;
+    const classes = computed(() => cn("motion-safe:animate-(--animate-pop-in)", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$n, mergeProps({
+        open: unref(isOpen),
+        anchor: unref(anchor),
+        placement: __props.placement,
+        offset: __props.offset
+      }, rest.value, {
+        class: classes.value,
+        "onUpdate:open": _cache[0] || (_cache[0] = ($event) => unref(context).setOpen(false))
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["open", "anchor", "placement", "offset", "class"]);
+    };
+  }
+});
+const menubarContextKey = Symbol("wow-two.menubar");
+function useMenubarContext() {
+  const context = inject(menubarContextKey, null);
+  if (!context) throw new Error("Menubar.* must be used inside <Menubar>");
+  return context;
+}
+const menubarMenuContextKey = Symbol("wow-two.menubarMenu");
+function useMenubarMenuContext() {
+  const context = inject(menubarMenuContextKey, null);
+  if (!context) throw new Error("MenubarTrigger / MenubarContent must be used inside <MenubarMenu>");
+  return context;
+}
+const menubarVariants = tv({
+  base: "flex items-center gap-1 rounded-md border border-border bg-background p-1"
+});
+const menubarTriggerVariants = tv({
+  base: "inline-flex select-none items-center rounded-sm px-3 py-1 text-sm font-medium text-foreground outline-hidden transition-colors hover:bg-muted focus-visible:bg-muted data-[state=open]:bg-muted"
+});
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  ...{ name: "Menubar", inheritAttrs: false },
+  __name: "Menubar",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: null }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const { value: activeId, setValue: setActiveId } = useControlled({
+      controlled: () => props.modelValue,
+      default: () => props.defaultValue,
+      onChange: (next) => emit("update:modelValue", next)
+    });
+    const triggers = [];
+    function registerTrigger(id, triggerEl) {
+      const index = triggers.findIndex((t) => t.id === id);
+      if (index >= 0) triggers[index] = { id, el: triggerEl };
+      else triggers.push({ id, el: triggerEl });
+    }
+    function unregisterTrigger(id) {
+      const index = triggers.findIndex((t) => t.id === id);
+      if (index >= 0) triggers.splice(index, 1);
+    }
+    function moveAcross(fromId, direction) {
+      const index = triggers.findIndex((t) => t.id === fromId);
+      if (index === -1) return;
+      let nextIndex = index + direction;
+      if (nextIndex < 0) nextIndex = triggers.length - 1;
+      if (nextIndex >= triggers.length) nextIndex = 0;
+      const next = triggers[nextIndex];
+      if (!next) return;
+      next.el?.focus();
+      if (activeId.value !== null) setActiveId(next.id);
+    }
+    provide(menubarContextKey, {
+      activeId,
+      setActiveId,
+      registerTrigger,
+      unregisterTrigger,
+      moveAcross
+    });
+    const classes = computed(() => cn(menubarVariants(), attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    const rootElement = computed(() => {
+      const node = el.value?.el;
+      const elementType = node?.ownerDocument.defaultView?.HTMLElement;
+      return elementType && node instanceof elementType ? node : null;
+    });
+    __expose({ el: rootElement });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$v), mergeProps({
+        ref_key: "el",
+        ref: el,
+        orientation: "horizontal",
+        "can-loop": "",
+        role: "menubar"
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  ...{ name: "MenubarMenu", inheritAttrs: false },
+  __name: "MenubarMenu",
+  props: {
+    value: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const bar = useMenubarContext();
+    provide(menubarMenuContextKey, {
+      get id() {
+        return props.value;
+      },
+      open: computed(() => bar.activeId.value === props.value),
+      setOpen: (next) => bar.setActiveId(next ? props.value : null),
+      triggerEl: shallowRef(null)
+    });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
+const _hoisted_1$5 = ["aria-expanded", "data-state", "tabindex"];
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
+  ...{ name: "MenubarTrigger", inheritAttrs: false },
+  __name: "MenubarTrigger",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const bar = useMenubarContext();
+    const menu = useMenubarMenuContext();
+    const item = useRovingFocusItem();
+    const el = shallowRef(null);
+    function setRef(node) {
+      const button = node ?? null;
+      el.value = button;
+      menu.triggerEl.value = button;
+      item.ref(node);
+    }
+    watch(
+      [() => menu.id, el],
+      ([id, node], _, onCleanup) => {
+        bar.registerTrigger(id, node);
+        onCleanup(() => bar.unregisterTrigger(id));
+      },
+      { immediate: true, flush: "post" }
+    );
+    const isOpen = menu.open;
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      menu.setOpen(!menu.open.value);
+    }
+    function handlePointerEnter() {
+      if (bar.activeId.value !== null && bar.activeId.value !== menu.id) {
+        bar.setActiveId(menu.id);
+      }
+    }
+    function handleFocus() {
+      item.onFocus();
+    }
+    function handleKeydown(event) {
+      if (event.defaultPrevented) return;
+      switch (event.key) {
+        case "ArrowDown":
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          menu.setOpen(true);
+          return;
+        case "ArrowRight":
+        case "ArrowLeft":
+          if (bar.activeId.value !== null) {
+            event.preventDefault();
+            bar.moveAcross(menu.id, event.key === "ArrowRight" ? 1 : -1);
+            return;
+          }
+          break;
+      }
+      item.onKeydown(event);
+    }
+    const classes = computed(() => cn(menubarTriggerVariants(), attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps({
+        type: "button",
+        role: "menuitem",
+        "aria-haspopup": "menu",
+        "aria-expanded": unref(isOpen),
+        "data-state": unref(isOpen) ? "open" : "closed",
+        tabindex: unref(item).tabindex,
+        "data-roving-focus-item": true
+      }, rest.value, {
+        ref: setRef,
+        class: classes.value,
+        onClick: handleClick,
+        onPointerenter: handlePointerEnter,
+        onFocus: handleFocus,
+        onKeydown: handleKeydown
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$5);
+    };
+  }
+});
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...{ name: "MenubarContent", inheritAttrs: false },
+  __name: "MenubarContent",
+  props: {
+    placement: { default: "bottom-start" },
+    offset: { default: 4 }
+  },
+  setup(__props) {
+    const attrs = useAttrs();
+    const bar = useMenubarContext();
+    const menu = useMenubarMenuContext();
+    const isOpen = menu.open;
+    const anchor = computed(() => menu.triggerEl.value);
+    function handleClose() {
+      menu.setOpen(false);
+      requestAnimationFrame(() => menu.triggerEl.value?.focus());
+    }
+    function handleKeydown(event) {
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          bar.moveAcross(menu.id, 1);
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          bar.moveAcross(menu.id, -1);
+          break;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$n, mergeProps({
+        open: unref(isOpen),
+        anchor: anchor.value,
+        placement: __props.placement,
+        offset: __props.offset
+      }, unref(attrs), {
+        "onUpdate:open": handleClose,
+        onKeydown: handleKeydown
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["open", "anchor", "placement", "offset"]);
+    };
+  }
+});
+const navigationMenuContextKey = Symbol("wow-two.navigationMenu");
+function useNavigationMenuContext() {
+  const context = inject(navigationMenuContextKey, null);
+  if (!context) throw new Error("NavigationMenu.* must be used inside <NavigationMenu>");
+  return context;
+}
+const navigationMenuItemContextKey = Symbol("wow-two.navigationMenuItem");
+function useNavigationMenuItemContext() {
+  const context = inject(navigationMenuItemContextKey, null);
+  if (!context) {
+    throw new Error("NavigationMenuTrigger / NavigationMenuContent must be used inside <NavigationMenuItem>");
+  }
+  return context;
+}
+const _hoisted_1$4 = ["aria-label"];
+const DefaultAriaLabel = "Main navigation";
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{ name: "NavigationMenu", inheritAttrs: false },
+  __name: "NavigationMenu",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: { default: null }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const { value: activeId, setValue: setActiveId } = useControlled({
+      controlled: () => props.modelValue,
+      default: () => props.defaultValue,
+      onChange: (next) => emit("update:modelValue", next)
+    });
+    provide(navigationMenuContextKey, { activeId, setActiveId });
+    const ariaLabel = computed(() => attrs[AriaAttribute.Label] ?? DefaultAriaLabel);
+    const classes = computed(() => cn("relative", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, [AriaAttribute.Label]: _ariaLabel, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("nav", mergeProps({
+        ref_key: "el",
+        ref: el,
+        "aria-label": ariaLabel.value
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$4);
+    };
+  }
+});
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...{ name: "NavigationMenuList", inheritAttrs: false },
+  __name: "NavigationMenuList",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const classes = computed(() => cn("flex items-center gap-1", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    const rootElement = computed(() => {
+      const node = el.value?.el;
+      const elementType = node?.ownerDocument.defaultView?.HTMLElement;
+      return elementType && node instanceof elementType ? node : null;
+    });
+    __expose({ el: rootElement });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$v), mergeProps({
+        ref_key: "el",
+        ref: el,
+        orientation: "horizontal",
+        "can-loop": "",
+        role: "list"
+      }, rest.value, { class: classes.value }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{ name: "NavigationMenuItem", inheritAttrs: false },
+  __name: "NavigationMenuItem",
+  props: {
+    value: {}
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const nav = useNavigationMenuContext();
+    provide(navigationMenuItemContextKey, {
+      get value() {
+        return props.value;
+      },
+      open: computed(() => nav.activeId.value === props.value),
+      triggerEl: shallowRef(null),
+      contentId: useId(),
+      triggerId: useId()
+    });
+    const classes = computed(() => cn("relative list-none", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("li", mergeProps({
+        ref_key: "el",
+        ref: el,
+        role: "listitem"
+      }, rest.value, { class: classes.value }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16);
+    };
+  }
+});
+const _hoisted_1$3 = ["id", "aria-expanded", "aria-controls", "data-state", "tabindex"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...{ name: "NavigationMenuTrigger", inheritAttrs: false },
+  __name: "NavigationMenuTrigger",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const nav = useNavigationMenuContext();
+    const item = useNavigationMenuItemContext();
+    const roving = useRovingFocusItem();
+    const el = shallowRef(null);
+    function setRef(node) {
+      const button = node ?? null;
+      el.value = button;
+      item.triggerEl.value = button;
+      roving.ref(node);
+    }
+    const isOpen = item.open;
+    let wasOpenedByPointer = false;
+    function handleClick(event) {
+      if (event.defaultPrevented) return;
+      if (wasOpenedByPointer) {
+        wasOpenedByPointer = false;
+        return;
+      }
+      nav.setActiveId(item.open.value ? null : item.value);
+    }
+    function handlePointerEnter() {
+      if (nav.activeId.value !== null && nav.activeId.value !== item.value) {
+        nav.setActiveId(item.value);
+        wasOpenedByPointer = true;
+      }
+    }
+    function handlePointerLeave() {
+      wasOpenedByPointer = false;
+    }
+    function handleFocus() {
+      roving.onFocus();
+    }
+    function handleKeydown(event) {
+      if (event.defaultPrevented) return;
+      roving.onKeydown(event);
+    }
+    const classes = computed(
+      () => cn(
+        "inline-flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-muted",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", mergeProps({
+        id: unref(item).triggerId,
+        type: "button",
+        "aria-haspopup": "true",
+        "aria-expanded": unref(isOpen),
+        "aria-controls": unref(item).contentId,
+        "data-state": unref(isOpen) ? "open" : "closed",
+        tabindex: unref(roving).tabindex,
+        "data-roving-focus-item": true
+      }, rest.value, {
+        ref: setRef,
+        class: classes.value,
+        onClick: handleClick,
+        onPointerenter: handlePointerEnter,
+        onPointerleave: handlePointerLeave,
+        onFocus: handleFocus,
+        onKeydown: handleKeydown
+      }), [
+        renderSlot(_ctx.$slots, "default"),
+        createVNode(unref(ChevronDown), {
+          class: normalizeClass(unref(cn)("h-4 w-4 transition-transform", unref(isOpen) && "rotate-180"))
+        }, null, 8, ["class"])
+      ], 16, _hoisted_1$3);
+    };
+  }
+});
+const _hoisted_1$2 = ["id", "aria-labelledby"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{ name: "NavigationMenuContent", inheritAttrs: false },
+  __name: "NavigationMenuContent",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const nav = useNavigationMenuContext();
+    const item = useNavigationMenuItemContext();
+    const reducedMotion = useReducedMotion();
+    const isOpen = item.open;
+    const anchor = computed(() => item.triggerEl.value);
+    const el = shallowRef(null);
+    const mounted = shallowRef(item.open.value);
+    watch(
+      [() => item.open.value, reducedMotion],
+      ([open, isReduced], _previous, onCleanup) => {
+        if (open) {
+          mounted.value = true;
+          return;
+        }
+        if (!isReduced) return;
+        if (typeof requestAnimationFrame === "undefined") return;
+        const raf = requestAnimationFrame(() => {
+          mounted.value = false;
+        });
+        onCleanup(() => cancelAnimationFrame(raf));
+      },
+      { immediate: true, flush: "post" }
+    );
+    function handleClose() {
+      nav.setActiveId(null);
+      requestAnimationFrame(() => item.triggerEl.value?.focus());
+    }
+    function handleOutsidePointerDown(event) {
+      if (item.triggerEl.value?.contains(event.target)) return;
+      nav.setActiveId(null);
+    }
+    function handleAnimationEnd() {
+      if (!item.open.value) mounted.value = false;
+    }
+    function setPanel(node) {
+      el.value = node ?? null;
+    }
+    const classes = computed(
+      () => cn(
+        /* pop (fade + slight scale) gated on data-state; motion-safe so
+           reduced-motion users get no movement. */
+        "min-w-[12rem] outline-hidden",
+        "motion-safe:data-[state=open]:animate-(--animate-pop-in)",
+        "motion-safe:data-[state=closed]:animate-(--animate-pop-out)",
+        "motion-reduce:animate-none",
+        surfaceVariants({ variant: "surface", radius: "md", padding: "md" }),
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return mounted.value ? (openBlock(), createBlock(unref(_sfc_main$r), { key: 0 }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$s), {
+            anchor: anchor.value,
+            placement: "bottom-start",
+            offset: 6,
+            class: "z-dropdown"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$u), {
+                "on-escape": handleClose,
+                "on-outside-pointer-down": handleOutsidePointerDown
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Presence), { "is-present": unref(isOpen) }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", mergeProps({
+                        id: unref(item).contentId,
+                        "aria-labelledby": unref(item).triggerId
+                      }, rest.value, {
+                        ref: setPanel,
+                        class: classes.value,
+                        onAnimationend: handleAnimationEnd
+                      }), [
+                        renderSlot(_ctx.$slots, "default")
+                      ], 16, _hoisted_1$2)
+                    ]),
+                    _: 3
+                  }, 8, ["is-present"])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 8, ["anchor"])
+        ]),
+        _: 3
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$1 = ["tabindex"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...{ name: "NavigationMenuLink", inheritAttrs: false },
+  __name: "NavigationMenuLink",
+  setup(__props, { expose: __expose }) {
+    const attrs = useAttrs();
+    const roving = useRovingFocusItem();
+    const el = shallowRef(null);
+    function setRef(node) {
+      el.value = node ?? null;
+      roving.ref(node);
+    }
+    function handleFocus() {
+      roving.onFocus();
+    }
+    function handleKeydown(event) {
+      if (event.defaultPrevented) return;
+      roving.onKeydown(event);
+    }
+    const classes = computed(
+      () => cn(
+        "inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted hover:underline-offset-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+        attrs.class
+      )
+    );
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("a", mergeProps({
+        tabindex: unref(roving).tabindex,
+        "data-roving-focus-item": true
+      }, rest.value, {
+        ref: setRef,
+        class: classes.value,
+        onFocus: handleFocus,
+        onKeydown: handleKeydown
+      }), [
+        renderSlot(_ctx.$slots, "default")
+      ], 16, _hoisted_1$1);
+    };
+  }
+});
+function useScrollSpy(ids, options = {}) {
+  const activeId = shallowRef(null);
+  const mounted = shallowRef(false);
+  onMounted(() => {
+    mounted.value = true;
+  });
+  watch(
+    [
+      () => toValue(ids),
+      () => toValue(options.rootMargin) ?? "0px 0px -60% 0px",
+      () => toValue(options.threshold) ?? 0,
+      () => toValue(options.root) ?? null,
+      mounted
+    ],
+    ([idList, rootMargin, threshold, root, isMounted], _previous, onCleanup) => {
+      activeId.value = null;
+      if (!isMounted) return;
+      if (typeof document === "undefined" || typeof IntersectionObserver === "undefined" || idList.length === 0) {
+        return;
+      }
+      const seen = /* @__PURE__ */ new Map();
+      const elements = idList.map((id) => document.getElementById(id)).filter((el) => el != null);
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const e of entries) {
+            if (e.isIntersecting) {
+              seen.set(e.target.id, e.boundingClientRect.top);
+            } else {
+              seen.delete(e.target.id);
+            }
+          }
+          if (seen.size === 0) {
+            activeId.value = null;
+            return;
+          }
+          let bestId = null;
+          let bestTop = Number.POSITIVE_INFINITY;
+          for (const [id, top] of seen) {
+            if (top < bestTop) {
+              bestTop = top;
+              bestId = id;
+            }
+          }
+          activeId.value = bestId;
+        },
+        /* `IntersectionObserverInit.threshold` is spelled `number[]`; the option keeps the readonly form for
+           callers, and the observer only reads the list. */
+        { rootMargin, threshold, root }
+      );
+      for (const el of elements) observer.observe(el);
+      onCleanup(() => observer.disconnect());
+    },
+    { immediate: true, flush: "post" }
+  );
+  return activeId;
+}
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ name: "ScrollSpy" },
+  __name: "ScrollSpy",
+  props: {
+    ids: {},
+    rootMargin: {},
+    threshold: {},
+    root: {}
+  },
+  emits: ["active-change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const activeId = useScrollSpy(() => props.ids, {
+      rootMargin: () => props.rootMargin,
+      threshold: () => props.threshold,
+      root: () => props.root
+    });
+    watch(activeId, (id) => emit("active-change", id), { immediate: true, flush: "post" });
+    return (_ctx, _cache) => {
+      return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({ activeId: unref(activeId) })));
+    };
+  }
+});
+const _hoisted_1 = { class: "space-y-1 text-sm" };
+const _hoisted_2 = ["href", "aria-current"];
+function depthFromTagName(tag) {
+  const match = /^H([1-6])$/i.exec(tag);
+  return match ? Number(match[1]) - 2 : 0;
+}
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "TableOfContents", inheritAttrs: false },
+  __name: "TableOfContents",
+  props: {
+    items: {},
+    source: {},
+    headingSelector: { default: "h2, h3" },
+    activeId: { default: void 0 },
+    isSticky: { type: Boolean }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const el = useTemplateRef("el");
+    const extracted = shallowRef([]);
+    watch(
+      [() => props.items, () => props.source, () => props.headingSelector],
+      ([itemsProp, source, headingSelector]) => {
+        if (itemsProp || !source) return;
+        const headings = Array.from(source.querySelectorAll(headingSelector));
+        extracted.value = headings.filter((h) => h.id).map((h) => ({
+          id: h.id,
+          label: h.textContent ?? "",
+          depth: Math.max(0, depthFromTagName(h.tagName))
+        }));
+      },
+      { immediate: true, flush: "post" }
+    );
+    const items = computed(() => props.items ?? extracted.value);
+    const ids = computed(() => items.value.map((i) => i.id));
+    const spyId = useScrollSpy(() => ids.value);
+    const activeId = computed(() => props.activeId !== void 0 ? props.activeId : spyId.value);
+    const classes = computed(() => cn(props.isSticky && "sticky top-4 self-start", attrs.class));
+    const rest = computed(() => {
+      const { class: _class, ...others } = attrs;
+      return others;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return items.value.length > 0 ? (openBlock(), createElementBlock("nav", mergeProps({
+        key: 0,
+        ref_key: "el",
+        ref: el,
+        "aria-label": "Table of contents"
+      }, rest.value, { class: classes.value }), [
+        createElementVNode("ul", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, i) => {
+            return openBlock(), createElementBlock("li", {
+              key: item.id,
+              style: normalizeStyle({ paddingLeft: `${(item.depth ?? 0) * 12}px` })
+            }, [
+              createElementVNode("a", {
+                href: `#${item.id}`,
+                "aria-current": item.id === activeId.value ? "location" : void 0,
+                class: normalizeClass(
+                  unref(cn)(
+                    "block rounded-sm px-2 py-1 transition-colors",
+                    item.id === activeId.value ? "bg-muted font-medium text-foreground" : "text-muted-foreground hover:bg-muted/40 hover:text-foreground"
+                  )
+                )
+              }, [
+                renderSlot(_ctx.$slots, "label", {
+                  item,
+                  index: i
+                }, () => [
+                  createTextVNode(toDisplayString(item.label), 1)
+                ])
+              ], 10, _hoisted_2)
+            ], 4);
+          }), 128))
+        ])
+      ], 16)) : createCommentVNode("", true);
+    };
+  }
+});
+const LinkItemVariant = {
+  /** Refers to the primary-colored link. */
+  Default: "default",
+  /** Refers to a foreground-colored, underline-on-hover link. */
+  Subtle: "subtle",
+  /** Refers to a muted link that brightens on hover. */
+  Muted: "muted",
+  /** Refers to a link that inherits the surrounding text color. */
+  Inherit: "inherit"
+};
+const LinkItemSize = {
+  /** Refers to the small text size. */
+  Sm: "sm",
+  /** Refers to the base (default) text size. */
+  Md: "md",
+  /** Refers to the large text size. */
+  Lg: "lg"
+};
+const linkVariants = tv({
+  base: "inline-flex items-center transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring rounded-sm",
+  variants: {
+    variant: {
+      /* `-soft-foreground`, not `text-primary`: a link has no fill of its own, so it lands on
+         whatever surface hosts it — the pairing `--color-primary-soft-foreground` is toned for.
+         `text-primary` measured 4.19:1 on `theme-smart-qr`'s own page background, under AA for
+         body text. Same fix as `Button.variants.ts` and `foundation/styles/constants/Tones.ts`. */
+      default: "text-primary-soft-foreground hover:text-primary-soft-foreground/85 hover:underline",
+      subtle: "text-foreground hover:underline",
+      muted: "text-muted-foreground hover:text-foreground hover:underline",
+      inherit: "text-current underline-offset-2 hover:underline"
+    },
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "LinkItem", inheritAttrs: false },
+  __name: "LinkItem",
+  props: {
+    variant: {},
+    size: {},
+    asChild: { type: Boolean, default: false }
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const OwnedAttributes = /* @__PURE__ */ new Set(["class"]);
+    const passthroughAttrs = computed(() => ({
+      ...Object.fromEntries(Object.entries(attrs).filter(([key]) => !OwnedAttributes.has(key))),
+      href: UrlExtensions.safeNavigation(attrs.href)
+    }));
+    const rootClass = computed(
+      () => cn(linkVariants({ variant: props.variant, size: props.size }), attrs.class)
+    );
+    const root = useTemplateRef("root");
+    const el = computed(() => {
+      const node = root.value?.$el;
+      return node instanceof HTMLElement ? node : null;
+    });
+    __expose({ el });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        ref_key: "root",
+        ref: root,
+        as: unref(HtmlElement).Anchor,
+        "as-child": __props.asChild,
+        class: rootClass.value
+      }, passthroughAttrs.value), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["as", "as-child", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main$1 as A,
+  contextMenuContextKey as B,
+  dropdownMenuContextKey as C,
+  linkVariants as D,
+  menuItemVariants as E,
+  menuLabelVariants as F,
+  menuSeparatorVariants as G,
+  menuVariants as H,
+  menubarContextKey as I,
+  menubarMenuContextKey as J,
+  navigationMenuContextKey as K,
+  LinkItemSize as L,
+  MenuItemState as M,
+  navigationMenuItemContextKey as N,
+  useContextMenuContext as O,
+  useDropdownMenuContext as P,
+  useMenuContext as Q,
+  useMenubarContext as R,
+  useMenubarMenuContext as S,
+  useNavigationMenuContext as T,
+  useNavigationMenuItemContext as U,
+  useScrollSpy as V,
+  _sfc_main$p as _,
+  _sfc_main$f as a,
+  _sfc_main$d as b,
+  _sfc_main$e as c,
+  _sfc_main$i as d,
+  _sfc_main$g as e,
+  _sfc_main$h as f,
+  _sfc_main as g,
+  LinkItemVariant as h,
+  _sfc_main$n as i,
+  _sfc_main$l as j,
+  _sfc_main$m as k,
+  MenuKey as l,
+  _sfc_main$k as m,
+  _sfc_main$j as n,
+  _sfc_main$c as o,
+  _sfc_main$9 as p,
+  _sfc_main$b as q,
+  _sfc_main$a as r,
+  _sfc_main$8 as s,
+  _sfc_main$4 as t,
+  _sfc_main$6 as u,
+  _sfc_main$3 as v,
+  _sfc_main$7 as w,
+  _sfc_main$5 as x,
+  _sfc_main$o as y,
+  _sfc_main$2 as z
+};
+//# sourceMappingURL=LinkItem.vue_vue_type_script_setup_true_lang-BjPIqvPc.js.map