@iris-ui-kit/vue 0.2.25 → 0.2.27

package/dist/{chunk-QQ25RKOO.js → chunk-ASFDGYIR.js}

@@ -1,4 +1,4 @@
-import { useFloating, useDismiss } from './chunk-3FJUCHCC.js';
+import { useFloating, useDismiss } from './chunk-IPR5JAVF.js';
 import { useMachine } from './chunk-NNOF7KUH.js';
 import { findFirstElement, mergeSlotProps } from './chunk-F77KIPOH.js';
 import { IrisHeaderLayout, IrisSidebarLayout } from './chunk-3V46HGRC.js';
@@ -6,8 +6,8 @@ import { IrisThemeKey } from './chunk-ZTPIXL7Q.js';
 import { IrisSortable } from './chunk-W3B6E5GN.js';
 import { useStore } from './chunk-75GSYEJS.js';
 import { useI18n } from './chunk-TCAXRWT6.js';
-import { defineComponent, inject, h, computed, shallowRef, onBeforeUnmount, watch, ref, provide, useId, nextTick, Teleport, Fragment, watchEffect, toValue, onMounted } from 'vue';
-import { visibleNav, findNavPath, createExpansion, branchTrail, createFloatingMachine, findNavNode, isBranch, firstLeaf, matchTypeahead, nextEnabledIndex, isClosable, createAdminShell } from '@iris-ui-kit/core';
+import { defineComponent, inject, h, computed, shallowRef, onBeforeUnmount, watch, provide, useId, ref, nextTick, Teleport, Fragment, watchEffect, toValue, onMounted } from 'vue';
+import { visibleNav, findNavPath, createExpansion, branchTrail, createFloatingMachine, isBranch, findNavNode, firstLeaf, matchTypeahead, nextEnabledIndex, isClosable, createAdminShell } from '@iris-ui-kit/core';
 export { createAdminPreferences, createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, localStorageAdminPreferencesStorage, nodeAllowsRoles, visibleNav } from '@iris-ui-kit/core';
 import { defaultIconRegistry, resolveThemedIcon } from '@iris-ui-kit/icons';
 
@@ -73,7 +73,7 @@ var __NAV_MENU_STYLE_ID = "iris-nav-menu-styles";
 var CSS = `
 :where(.iris-nav-menu) {
   --iris-nav-indent-step: 16px;
-  --iris-nav-item-padding-inline: 10px;
+  --iris-nav-item-padding-inline: 12px;
   --iris-nav-item-padding-block: 8px;
   --iris-nav-item-border-radius: var(--iris-radius-md, 6px);
   --iris-nav-item-hover: var(--iris-surface-hover, var(--iris-surface));
@@ -81,7 +81,7 @@ var CSS = `
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 2px;
+  gap: var(--iris-space-xxs, 4px);
   width: 100%;
 }
 
@@ -106,16 +106,16 @@ var CSS = `
   border: none;
   border-radius: var(--iris-nav-item-border-radius);
   background: transparent;
-  color: var(--iris-foreground, var(--iris-color-text, var(--iris-foreground)));
+  color: var(--iris-foreground);
   font: inherit;
-  font-size: 14px;
+  font-size: var(--iris-font-size-md, 14px);
   line-height: 1.2;
   font-weight: 400;
   text-align: start;
   cursor: pointer;
   opacity: 1;
   margin: 0;
-  gap: 10px;
+  gap: var(--iris-space-sm, 12px);
   padding-block: var(--iris-nav-item-padding-block);
   padding-inline: var(--iris-nav-item-padding-inline);
   text-overflow: ellipsis;
@@ -128,7 +128,7 @@ var CSS = `
 }
 
 :where(.iris-nav-menu-item[data-depth='0']) {
-  --iris-nav-item-padding-inline-start: 10px;
+  --iris-nav-item-padding-inline-start: 12px;
 }
 
 :where(.iris-nav-menu-item[data-depth='1']) {
@@ -176,7 +176,7 @@ var CSS = `
   background: var(--iris-nav-item-hover);
 }
 
-:where(.iris-nav-menu-item[data-active='true']) {
+.iris-nav-menu-item[data-active='true'] {
   background: var(--iris-primary);
   color: var(--iris-primary-foreground, #fff);
   font-weight: 600;
@@ -205,13 +205,13 @@ var CSS = `
 }
 
 :where(.iris-nav-menu-badge) {
-  margin-inline-start: 6px;
-  font-size: 11px;
+  margin-inline-start: var(--iris-space-xs, 8px);
+  font-size: var(--iris-font-size-xs, 12px);
   line-height: 1;
-  padding: 2px 6px;
+  padding: var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px);
   border-radius: 999px;
-  background: var(--iris-danger, #e5484d);
-  color: #fff;
+  background: var(--iris-danger, #ef4444);
+  color: var(--iris-primary-foreground, #fff);
   flex: 0 0 auto;
 }
 
@@ -241,44 +241,68 @@ var CSS = `
   opacity: 0.75;
 }
 
-:where(.iris-nav-menu-group--depth-0 > .iris-nav-menu-children) {
-  display: none;
+/* Vertical branches stay in the DOM and animate height via the grid-rows
+   trick (0fr \u2192 1fr); the inner wrapper provides the overflow clipping so the
+   transition is a smooth accordion without a max-height cap. */
+:where(.iris-nav-menu--vertical .iris-nav-menu-group > .iris-nav-menu-children) {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    grid-template-rows 200ms ease,
+    opacity 150ms ease,
+    visibility 0s linear 200ms;
 }
 
-:where(.iris-nav-menu-group--depth-1 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-2 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-3 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-4 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-5 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-6 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-7 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-8 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group--depth-9 > .iris-nav-menu-children),
-:where(.iris-nav-menu-group > .iris-nav-menu-children) {
-  display: none;
+:where(.iris-nav-menu--vertical .iris-nav-menu-group > .iris-nav-menu-children > .iris-nav-menu-children-inner) {
+  overflow: hidden;
+  min-height: 0;
 }
 
-:where(.iris-nav-menu-group[data-open='true'] > .iris-nav-menu-children) {
-  display: block;
+:where(.iris-nav-menu--vertical .iris-nav-menu-group[data-open='true'] > .iris-nav-menu-children) {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+  transition:
+    grid-template-rows 200ms ease,
+    opacity 150ms ease;
 }
 
-:where(.iris-nav-menu--horizontal .iris-nav-menu-group > .iris-nav-menu-children) {
+/* Flyout popups (horizontal mode + the collapsed rail) share the popup chrome
+   and are hard-hidden when closed (no height animation needed). */
+:where(.iris-nav-menu--horizontal .iris-nav-menu-group > .iris-nav-menu-children),
+:where(.iris-nav-menu--collapsed .iris-nav-menu-group > .iris-nav-menu-children) {
+  display: none;
   position: absolute;
   min-width: 220px;
-  padding: 6px;
+  padding: var(--iris-space-xs, 8px);
   border: 1px solid var(--iris-border);
   border-radius: var(--iris-radius-md, 6px);
   background: var(--iris-surface);
   box-shadow: var(--iris-shadow-md);
 }
 
+:where(.iris-nav-menu--horizontal .iris-nav-menu-group[data-open='true'] > .iris-nav-menu-children),
+:where(.iris-nav-menu--collapsed .iris-nav-menu-group[data-open='true'] > .iris-nav-menu-children) {
+  display: block;
+}
+
 :where(.iris-nav-menu--horizontal .iris-nav-menu-group[data-depth='0'] > .iris-nav-menu-children) {
   inset-block-start: 100%;
   inset-inline-start: 0;
   z-index: 60;
 }
 
-:where(.iris-nav-menu--horizontal .iris-nav-menu-group[data-depth]:not([data-depth='0']) > .iris-nav-menu-children) {
+/* A9: the collapsed rail popup opens to the right of the icon. */
+:where(.iris-nav-menu--collapsed .iris-nav-menu-group[data-depth='0'] > .iris-nav-menu-children) {
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  z-index: 60;
+}
+
+:where(.iris-nav-menu--horizontal .iris-nav-menu-group[data-depth]:not([data-depth='0']) > .iris-nav-menu-children),
+:where(.iris-nav-menu--collapsed .iris-nav-menu-group[data-depth]:not([data-depth='0']) > .iris-nav-menu-children) {
   inset-block-start: 0;
   inset-inline-start: 100%;
   z-index: 61;
@@ -294,10 +318,20 @@ var CSS = `
   padding-inline: var(--iris-nav-item-padding-inline);
 }
 
+/* A9: the collapsed rail stays centered even though rows carry data-depth
+   (the vertical indent rules would otherwise win the specificity tie). */
+:where(.iris-nav-menu--collapsed .iris-nav-menu-item[data-depth]) {
+  justify-content: center;
+  padding-inline: var(--iris-nav-item-padding-inline);
+}
+
 @media (prefers-reduced-motion: reduce) {
   :where(.iris-nav-menu-arrow) {
     transition: none;
   }
+  :where(.iris-nav-menu--vertical .iris-nav-menu-group > .iris-nav-menu-children) {
+    transition: none;
+  }
 }
 `.trim();
 var installed = false;
@@ -314,6 +348,315 @@ function installNavMenuStyles() {
   document.head.appendChild(style);
   installed = true;
 }
+var HOVER_OPEN_DELAY_VAL = 60;
+var HOVER_CLOSE_DELAY_VAL = 150;
+function createNavMenuFlyout(ctx) {
+  const hovered = ref(null);
+  const hoveredBranches = ref([]);
+  const focusedBranches = ref([]);
+  const clickedBranches = ref([]);
+  let suppressFocusOpen = false;
+  let openTimer = null;
+  const closeTimers = /* @__PURE__ */ new Map();
+  const clearOpenTimer = () => {
+    if (openTimer) {
+      clearTimeout(openTimer);
+      openTimer = null;
+    }
+  };
+  const cancelClose = (key) => {
+    const timer = closeTimers.get(key);
+    if (timer) {
+      clearTimeout(timer);
+      closeTimers.delete(key);
+    }
+  };
+  const cancelAllTimers = () => {
+    clearOpenTimer();
+    for (const timer of closeTimers.values()) clearTimeout(timer);
+    closeTimers.clear();
+  };
+  onBeforeUnmount(cancelAllTimers);
+  const flyoutTriggers = /* @__PURE__ */ new Map();
+  const flyoutPanels = /* @__PURE__ */ new Map();
+  const setFlyoutRef = (map, key, el) => {
+    if (el instanceof HTMLElement) map.set(key, el);
+    else map.delete(key);
+  };
+  const positionFlyout = (key) => {
+    const trigger = flyoutTriggers.get(key);
+    const panel = flyoutPanels.get(key);
+    if (!trigger || !panel || typeof document === "undefined") return;
+    const rect = trigger.getBoundingClientRect();
+    const dir = getComputedStyle(trigger).direction;
+    panel.style.position = "fixed";
+    panel.style.top = `${ctx.collapsed ? rect.top : rect.bottom}px`;
+    if (dir === "rtl") {
+      panel.style.left = "";
+      panel.style.right = `${window.innerWidth - (ctx.collapsed ? rect.left : rect.right)}px`;
+    } else {
+      panel.style.right = "";
+      panel.style.left = `${ctx.collapsed ? rect.right : rect.left}px`;
+    }
+  };
+  onBeforeUnmount(() => {
+    detachViewportListeners();
+    flyoutTriggers.clear();
+    flyoutPanels.clear();
+  });
+  const isolateAtDepth = (key) => {
+    const depth = findNavPath(ctx.items, key).length - 1;
+    const isSameDepthOther = (k) => k !== key && findNavPath(ctx.items, k).length - 1 === depth;
+    for (const state of [hoveredBranches, clickedBranches, focusedBranches]) {
+      if (state.value.some(isSameDepthOther)) {
+        state.value = state.value.filter((k) => !isSameDepthOther(k));
+      }
+    }
+  };
+  const scheduleOpen = (key) => {
+    clearOpenTimer();
+    openTimer = setTimeout(() => {
+      openTimer = null;
+      isolateAtDepth(key);
+      setBranchInteraction(hoveredBranches, key, true);
+    }, HOVER_OPEN_DELAY_VAL);
+  };
+  const scheduleClose = (key) => {
+    cancelClose(key);
+    closeTimers.set(
+      key,
+      setTimeout(() => {
+        closeTimers.delete(key);
+        setBranchInteraction(hoveredBranches, key, false);
+      }, HOVER_CLOSE_DELAY_VAL)
+    );
+  };
+  const closeHorizontalMenus = () => {
+    if (!ctx.flyoutMode.value) return;
+    cancelAllTimers();
+    hovered.value = null;
+    hoveredBranches.value = [];
+    focusedBranches.value = [];
+    clickedBranches.value = [];
+  };
+  const select = (node) => {
+    if (node.disabled) return;
+    closeHorizontalMenus();
+    ctx.emitSelect(node.key, node);
+  };
+  const toggleFlyout = (key) => {
+    cancelAllTimers();
+    const current = clickedBranches.value;
+    if (current.includes(key)) {
+      clickedBranches.value = current.filter((k) => k !== key);
+      setBranchInteraction(hoveredBranches, key, false);
+      setBranchInteraction(focusedBranches, key, false);
+    } else {
+      isolateAtDepth(key);
+      clickedBranches.value = [...clickedBranches.value, key];
+    }
+  };
+  const openFlyout = (key) => {
+    cancelAllTimers();
+    isolateAtDepth(key);
+    setBranchInteraction(focusedBranches, key, true);
+  };
+  const setBranchInteraction = (state, key, enabled) => {
+    const current = state.value;
+    if (enabled) {
+      if (!current.includes(key)) state.value = [...current, key];
+    } else if (current.includes(key)) {
+      state.value = current.filter((item) => item !== key);
+    }
+  };
+  const keepsPointerInside = (container, event) => {
+    if (!container || !(container instanceof HTMLElement)) return false;
+    const next = event.relatedTarget;
+    return !!(next && next instanceof Node && container.contains(next));
+  };
+  const interactionKeyAtDepth = (keys, depth) => keys.find((key) => findNavPath(ctx.items, key).length === depth + 1);
+  const horizontalBranchVisible = (key, depth) => {
+    const hoveredAtDepth = interactionKeyAtDepth(hoveredBranches.value, depth);
+    if (hoveredAtDepth) return hoveredAtDepth === key;
+    const clickedAtDepth = interactionKeyAtDepth(clickedBranches.value, depth);
+    if (clickedAtDepth) return clickedAtDepth === key;
+    return interactionKeyAtDepth(focusedBranches.value, depth) === key;
+  };
+  const shownFlyoutKeys = computed(() => {
+    if (!ctx.flyoutMode.value) return [];
+    const keys = [];
+    for (const node of ctx.tree.value) {
+      if (isBranch(node) && horizontalBranchVisible(node.key, 0)) keys.push(node.key);
+    }
+    return keys;
+  });
+  const repositionOpenFlyouts = () => {
+    for (const key of shownFlyoutKeys.value) positionFlyout(key);
+  };
+  let viewportListenersActive = false;
+  const attachViewportListeners = () => {
+    if (viewportListenersActive || typeof document === "undefined") return;
+    viewportListenersActive = true;
+    document.addEventListener("scroll", repositionOpenFlyouts, true);
+    window.addEventListener("resize", repositionOpenFlyouts);
+  };
+  const detachViewportListeners = () => {
+    if (!viewportListenersActive || typeof document === "undefined") return;
+    viewportListenersActive = false;
+    document.removeEventListener("scroll", repositionOpenFlyouts, true);
+    window.removeEventListener("resize", repositionOpenFlyouts);
+  };
+  watch(
+    shownFlyoutKeys,
+    (keys, prev) => {
+      if (keys.length > 0 && prev.length === 0) attachViewportListeners();
+      else if (keys.length === 0 && prev.length > 0) detachViewportListeners();
+      for (const key of keys) positionFlyout(key);
+    },
+    { flush: "post" }
+  );
+  return {
+    hovered,
+    hoveredBranches,
+    focusedBranches,
+    clickedBranches,
+    select,
+    toggleFlyout,
+    openFlyout,
+    closeHorizontalMenus,
+    setBranchInteraction,
+    keepsPointerInside,
+    interactionKeyAtDepth,
+    horizontalBranchVisible,
+    shownFlyoutKeys,
+    setFlyoutRef,
+    flyoutTriggers,
+    flyoutPanels,
+    suppressFocusOpen: { get: () => suppressFocusOpen },
+    setSuppressFocusOpen: (value) => {
+      suppressFocusOpen = value;
+    },
+    cancelClose,
+    scheduleOpen,
+    scheduleClose,
+    cancelAllTimers
+  };
+}
+function createNavMenuKeydownHandler(deps) {
+  const {
+    items,
+    flyoutMode,
+    expanded,
+    toggle,
+    openFlyout,
+    closeHorizontalMenus,
+    horizontalBranchVisible,
+    setBranchInteraction,
+    focusedBranches,
+    collapsed,
+    hoveredBranches,
+    clickedBranches,
+    setSuppressFocusOpen
+  } = deps;
+  return (e) => {
+    const root = e.currentTarget;
+    const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]")).filter(
+      (button) => !button.closest('[data-iris-nav-children][aria-hidden="true"]')
+    );
+    if (buttons.length === 0) return;
+    const idx = buttons.indexOf(document.activeElement);
+    const focusAt = (i) => buttons[(i + buttons.length) % buttons.length]?.focus();
+    const key = idx >= 0 ? buttons[idx]?.getAttribute("data-key") : void 0;
+    const node = key ? findNavNode(items, key) : void 0;
+    const depth = idx >= 0 ? Number(buttons[idx]?.getAttribute("data-depth") ?? 0) : 0;
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (flyoutMode() && node && isBranch(node)) {
+          openFlyout(key);
+          const group = buttons[idx].closest("[data-iris-nav-group]");
+          void nextTick(() => {
+            group?.querySelector("[data-iris-nav-children] [data-iris-nav-item]")?.focus();
+          });
+          return;
+        }
+        focusAt(idx < 0 ? 0 : idx + 1);
+        return;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (flyoutMode() && node && isBranch(node) && horizontalBranchVisible(key, depth)) {
+          setBranchInteraction(focusedBranches, key, false);
+          setBranchInteraction(clickedBranches, key, false);
+          return;
+        }
+        focusAt(idx < 0 ? buttons.length - 1 : idx - 1);
+        return;
+      }
+      case "Home":
+        e.preventDefault();
+        buttons[0]?.focus();
+        return;
+      case "End":
+        e.preventDefault();
+        buttons[buttons.length - 1]?.focus();
+        return;
+      case "Escape": {
+        if (flyoutMode()) {
+          const openKeys = [
+            ...hoveredBranches.value,
+            ...clickedBranches.value,
+            ...focusedBranches.value
+          ];
+          if (openKeys.length > 0) {
+            e.preventDefault();
+            const openTop = openKeys.find((k) => findNavPath(items, k).length === 1);
+            closeHorizontalMenus();
+            if (openTop) {
+              setSuppressFocusOpen(true);
+              buttons.find((b) => b.getAttribute("data-key") === openTop)?.focus();
+              void nextTick(() => {
+                setSuppressFocusOpen(false);
+              });
+            }
+          }
+        }
+        return;
+      }
+    }
+    if (collapsed || idx < 0 || !key || !node) return;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (isBranch(node)) {
+        if (flyoutMode() || !expanded().includes(key)) {
+          if (flyoutMode()) openFlyout(key);
+          else toggle(key);
+          const group = buttons[idx].closest("[data-iris-nav-group]");
+          void nextTick(() => {
+            group?.querySelector("[data-iris-nav-children] [data-iris-nav-item]")?.focus();
+          });
+        } else {
+          focusAt(idx + 1);
+        }
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      if (flyoutMode() && isBranch(node)) {
+        setBranchInteraction(focusedBranches, key, false);
+        setBranchInteraction(clickedBranches, key, false);
+        return;
+      }
+      if (isBranch(node) && expanded().includes(key)) {
+        toggle(key);
+      } else {
+        const parentKey = findNavPath(items, key).at(-2)?.key;
+        if (parentKey) {
+          buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
+        }
+      }
+    }
+  };
+}
 
 // src/admin/NavMenu.ts
 var IrisNavMenu = defineComponent({
@@ -347,6 +690,7 @@ var IrisNavMenu = defineComponent({
     const activePath = computed(
       () => props.activeKey ? findNavPath(props.items, props.activeKey).map((n) => n.key) : []
     );
+    const flyoutMode = computed(() => props.orientation === "horizontal" || props.collapsed);
     const isControlled = computed(() => props.expandedKeys !== void 0);
     const model = createExpansion({
       mode: "multiple",
@@ -361,12 +705,9 @@ var IrisNavMenu = defineComponent({
     const expanded = computed(
       () => isControlled.value ? props.expandedKeys : internalExpanded.value
     );
-    watch(
-      () => props.activeKey,
-      (key) => {
-        if (!isControlled.value) model.merge(key ? branchTrail(props.items, key) : []);
-      }
-    );
+    watch([() => props.activeKey, () => props.items], ([key]) => {
+      if (!isControlled.value) model.merge(key ? branchTrail(props.items, key) : []);
+    });
     const toggle = (key) => {
       if (isControlled.value) {
         const cur = props.expandedKeys;
@@ -379,39 +720,35 @@ var IrisNavMenu = defineComponent({
         emit("update:expandedKeys", model.get());
       }
     };
-    const hovered = ref(null);
-    const hoveredBranches = ref([]);
-    const focusedBranches = ref([]);
-    const closeHorizontalMenus = () => {
-      if (props.orientation !== "horizontal") return;
-      hovered.value = null;
-      hoveredBranches.value = [];
-      focusedBranches.value = [];
-    };
-    const select = (node) => {
-      if (node.disabled) return;
-      closeHorizontalMenus();
-      emit("select", node.key, node);
-    };
-    const setBranchInteraction = (state, key, enabled) => {
-      const current = state.value;
-      if (enabled) {
-        if (!current.includes(key)) state.value = [...current, key];
-      } else if (current.includes(key)) {
-        state.value = current.filter((item) => item !== key);
-      }
-    };
-    const keepsPointerInside = (container, event) => {
-      if (!container || !(container instanceof HTMLElement)) return false;
-      const next = event.relatedTarget;
-      return !!(next && next instanceof Node && container.contains(next));
-    };
-    const interactionKeyAtDepth = (keys, depth) => keys.find((key) => findNavPath(props.items, key).length === depth + 1);
-    const horizontalBranchVisible = (key, depth) => {
-      const hoveredAtDepth = interactionKeyAtDepth(hoveredBranches.value, depth);
-      if (hoveredAtDepth) return hoveredAtDepth === key;
-      return interactionKeyAtDepth(focusedBranches.value, depth) === key;
-    };
+    const flyout = createNavMenuFlyout({
+      items: props.items,
+      tree,
+      expanded,
+      flyoutMode: { value: flyoutMode.value },
+      collapsed: props.collapsed,
+      toggle,
+      emitSelect: (key, node) => emit("select", key, node)
+    });
+    const {
+      hovered,
+      hoveredBranches,
+      focusedBranches,
+      clickedBranches,
+      select,
+      toggleFlyout,
+      openFlyout,
+      closeHorizontalMenus,
+      setBranchInteraction,
+      keepsPointerInside,
+      horizontalBranchVisible,
+      setFlyoutRef,
+      flyoutTriggers,
+      flyoutPanels,
+      suppressFocusOpen,
+      cancelClose,
+      scheduleOpen,
+      scheduleClose
+    } = flyout;
     const itemClass = (opts) => {
       const depth = Math.min(9, opts.depth);
       return [
@@ -434,81 +771,47 @@ var IrisNavMenu = defineComponent({
       },
       String(node.badge)
     ) : null;
-    const renderCollapsed = () => tree.value.map((node) => {
+    const renderItem = (node, depth) => {
       const branch = isBranch(node);
-      const active = branch ? activePath.value.includes(node.key) : node.key === props.activeKey;
-      return h(
+      const horizontal = flyoutMode.value;
+      const open = expanded.value.includes(node.key);
+      const shown = horizontal ? horizontalBranchVisible(node.key, depth) : open;
+      const active = node.key === props.activeKey;
+      const trail = branch && !active && activePath.value.includes(node.key);
+      const rowHovered = hovered.value === node.key || horizontal && shown;
+      const arrowReversed = branch && !node.disabled && (active || trail || shown || rowHovered);
+      const isFlyoutRoot = horizontal && branch && depth === 0;
+      const row = h(
         "button",
         {
-          key: node.key,
           type: "button",
+          ref: (el) => {
+            if (isFlyoutRoot) setFlyoutRef(flyoutTriggers, node.key, el);
+          },
           class: [
             ...itemClass({
-              depth: 0,
+              depth,
               active,
-              trail: false,
-              hovered: hovered.value === node.key,
-              open: false,
+              trail,
+              hovered: rowHovered,
+              open: branch ? shown : false,
               disabled: !!node.disabled,
               branch
             }),
-            "is-collapsed"
+            ...props.collapsed && depth === 0 ? ["is-collapsed"] : []
           ],
           "data-iris-nav-item": "",
           "data-key": node.key,
-          "data-active": active ? "true" : void 0,
-          "data-branch": branch ? "true" : void 0,
-          "data-hovered": hovered.value === node.key ? "true" : void 0,
-          disabled: node.disabled,
-          title: node.title,
-          "aria-label": branch ? `${node.title} (section)` : node.title,
-          "aria-current": active && !branch ? "page" : void 0,
-          onMouseenter: () => {
-            if (!node.disabled) hovered.value = node.key;
-          },
-          onMouseleave: (event) => {
-            if (hovered.value === node.key && !keepsPointerInside(event.currentTarget, event)) {
-              hovered.value = null;
-            }
-          },
-          onClick: () => select(branch ? firstLeaf(node) : node)
-        },
-        [
-          iconNode(node, 20) ?? h("span", { class: "iris-nav-menu-fallback-icon" }, node.title.charAt(0))
-        ]
-      );
-    });
-    const renderItem = (node, depth) => {
-      const branch = isBranch(node);
-      const open = expanded.value.includes(node.key);
-      const horizontal = props.orientation === "horizontal";
-      const shown = horizontal ? horizontalBranchVisible(node.key, depth) : open;
-      const active = node.key === props.activeKey;
-      const trail = branch && !active && activePath.value.includes(node.key);
-      const arrowReversed = branch && !node.disabled && (active || trail || shown || hovered.value === node.key);
-      const row = h(
-        "button",
-        {
-          type: "button",
-          class: itemClass({
-            depth,
-            active,
-            trail,
-            hovered: hovered.value === node.key,
-            open: branch ? shown : false,
-            disabled: !!node.disabled,
-            branch
-          }),
-          "data-iris-nav-item": "",
-          "data-key": node.key,
           "data-branch": branch ? "true" : void 0,
           "data-active": active ? "true" : void 0,
           "data-active-trail": trail ? "true" : void 0,
           "data-open": branch && shown ? "true" : void 0,
-          "data-hovered": hovered.value === node.key ? "true" : void 0,
+          "data-hovered": rowHovered ? "true" : void 0,
           "data-depth": String(depth),
           "data-orientation": props.orientation,
           disabled: node.disabled,
+          title: props.collapsed ? node.title : void 0,
+          "aria-label": props.collapsed ? branch ? `${node.title} (section)` : node.title : void 0,
           "aria-expanded": branch ? shown ? "true" : "false" : void 0,
           "aria-current": active ? "page" : void 0,
           onMouseenter: () => {
@@ -519,7 +822,17 @@ var IrisNavMenu = defineComponent({
               hovered.value = null;
             }
           },
-          onClick: () => branch ? toggle(node.key) : select(node)
+          onClick: () => {
+            if (props.collapsed && branch) {
+              select(firstLeaf(node));
+            } else if (horizontal && branch) {
+              toggleFlyout(node.key);
+            } else if (branch) {
+              toggle(node.key);
+            } else {
+              select(node);
+            }
+          }
         },
         [
           iconNode(node),
@@ -531,54 +844,49 @@ var IrisNavMenu = defineComponent({
             node.title
           ),
           badgeNode(node),
-          branch ? h(IrisIcon, {
-            name: horizontal && depth === 0 ? "chevron-down" : "chevron-right",
+          branch && !(props.collapsed && depth === 0) ? h(IrisIcon, {
+            name: horizontal && depth === 0 && !props.collapsed ? "chevron-down" : "chevron-right",
             size: 16,
             class: "iris-nav-menu-arrow",
             "data-reversed": arrowReversed ? "true" : void 0
           }) : null
         ]
       );
-      if (!branch || !horizontal && !open)
-        return h(
-          "div",
-          {
-            key: node.key,
-            "data-iris-nav-group": branch ? "" : void 0,
-            class: ["iris-nav-menu-group", `iris-nav-menu-group--depth-${Math.min(9, depth)}`]
-          },
-          [row]
-        );
       return h(
         "div",
         {
           key: node.key,
-          "data-iris-nav-group": "",
-          "data-open": shown ? "true" : void 0,
+          "data-iris-nav-group": branch ? "" : void 0,
+          "data-open": branch && shown ? "true" : void 0,
           "data-depth": String(depth),
           class: ["iris-nav-menu-group", `iris-nav-menu-group--depth-${Math.min(9, depth)}`],
-          ...horizontal ? {
+          ...horizontal && branch ? {
             onMouseenter: (event) => {
-              if (!keepsPointerInside(event.currentTarget, event)) {
-                setBranchInteraction(hoveredBranches, node.key, true);
+              if (!node.disabled && !keepsPointerInside(event.currentTarget, event)) {
+                cancelClose(node.key);
+                scheduleOpen(node.key);
               }
             },
             onMouseover: (event) => {
-              if (!keepsPointerInside(event.currentTarget, event)) {
-                setBranchInteraction(hoveredBranches, node.key, true);
+              if (!node.disabled && !keepsPointerInside(event.currentTarget, event)) {
+                cancelClose(node.key);
+                scheduleOpen(node.key);
               }
             },
             onMouseout: (event) => {
-              if (!keepsPointerInside(event.currentTarget, event)) {
-                setBranchInteraction(hoveredBranches, node.key, false);
+              if (!node.disabled && !keepsPointerInside(event.currentTarget, event)) {
+                scheduleClose(node.key);
               }
             },
             onMouseleave: (event) => {
-              if (!keepsPointerInside(event.currentTarget, event)) {
-                setBranchInteraction(hoveredBranches, node.key, false);
+              if (!node.disabled && !keepsPointerInside(event.currentTarget, event)) {
+                scheduleClose(node.key);
               }
             },
-            onFocusin: () => setBranchInteraction(focusedBranches, node.key, true),
+            onFocusin: () => {
+              if (suppressFocusOpen.get()) return;
+              setBranchInteraction(focusedBranches, node.key, true);
+            },
             onFocusout: (event) => {
               const group = event.currentTarget;
               const next = event.relatedTarget;
@@ -590,66 +898,62 @@ var IrisNavMenu = defineComponent({
         },
         [
           row,
-          h(
+          branch ? h(
             "div",
             {
               class: "iris-nav-menu-children",
               "data-iris-nav-children": "",
+              ref: (el) => {
+                if (isFlyoutRoot) setFlyoutRef(flyoutPanels, node.key, el);
+              },
               role: "group",
-              "aria-hidden": horizontal && !shown ? "true" : void 0
+              "aria-hidden": shown ? void 0 : "true"
             },
-            (node.children ?? []).map((child) => renderItem(child, depth + 1))
-          )
+            [
+              h(
+                "div",
+                { class: "iris-nav-menu-children-inner" },
+                (node.children ?? []).map((child) => renderItem(child, depth + 1))
+              )
+            ]
+          ) : null
         ]
       );
     };
-    const onKeydown = (e) => {
-      const root = e.currentTarget;
-      const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]")).filter(
-        (button) => !button.closest('[data-iris-nav-children][aria-hidden="true"]')
-      );
-      if (buttons.length === 0) return;
-      const idx = buttons.indexOf(document.activeElement);
-      const focusAt = (i) => buttons[(i + buttons.length) % buttons.length]?.focus();
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault();
-          focusAt(idx < 0 ? 0 : idx + 1);
-          return;
-        case "ArrowUp":
-          e.preventDefault();
-          focusAt(idx < 0 ? buttons.length - 1 : idx - 1);
-          return;
-        case "Home":
-          e.preventDefault();
-          buttons[0]?.focus();
-          return;
-        case "End":
-          e.preventDefault();
-          buttons[buttons.length - 1]?.focus();
-          return;
-      }
-      if (props.collapsed || idx < 0) return;
-      const key = buttons[idx]?.getAttribute("data-key");
-      if (!key) return;
-      const node = findNavNode(props.items, key);
-      if (e.key === "ArrowRight" && node && isBranch(node)) {
-        e.preventDefault();
-        if (!expanded.value.includes(key)) toggle(key);
-        else focusAt(idx + 1);
-      } else if (e.key === "ArrowLeft") {
-        if (node && isBranch(node) && expanded.value.includes(key)) {
-          e.preventDefault();
-          toggle(key);
-        } else {
-          const parentKey = findNavPath(props.items, key).at(-2)?.key;
-          if (parentKey) {
-            e.preventDefault();
-            buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
-          }
+    const rootRef = shallowRef(null);
+    watch(
+      [() => props.activeKey, () => props.items],
+      () => {
+        if (!props.activeKey) return;
+        const root = rootRef.value;
+        if (!root) return;
+        const el = root.querySelector('[data-iris-nav-item][data-active="true"]');
+        if (!el || typeof el.scrollIntoView !== "function") return;
+        let behavior = "auto";
+        if (typeof window !== "undefined" && typeof window.matchMedia === "function" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          behavior = "smooth";
         }
-      }
-    };
+        el.scrollIntoView({ block: "nearest", inline: "nearest", behavior });
+      },
+      { flush: "post" }
+    );
+    const onKeydown = createNavMenuKeydownHandler({
+      items: props.items,
+      flyoutMode: () => flyoutMode.value,
+      expanded: () => expanded.value,
+      toggle,
+      openFlyout,
+      closeHorizontalMenus,
+      horizontalBranchVisible,
+      setBranchInteraction,
+      focusedBranches,
+      hoveredBranches,
+      clickedBranches,
+      setSuppressFocusOpen: (v) => {
+        flyout.setSuppressFocusOpen(v);
+      },
+      collapsed: props.collapsed
+    });
     const menuClass = [
       "iris-nav-menu",
       `iris-nav-menu--${props.orientation}`,
@@ -659,6 +963,9 @@ var IrisNavMenu = defineComponent({
       "nav",
       {
         ...attrs,
+        ref: (el) => {
+          rootRef.value = el ?? null;
+        },
         class: [...menuClass, attrs.class],
         "data-iris-nav-menu": "",
         "data-collapsed": props.collapsed ? "true" : void 0,
@@ -667,7 +974,7 @@ var IrisNavMenu = defineComponent({
         onKeydown,
         style: attrs.style
       },
-      props.collapsed ? renderCollapsed() : tree.value.map((node) => renderItem(node, 0))
+      tree.value.map((node) => renderItem(node, 0))
     );
   }
 });
@@ -737,11 +1044,11 @@ var IrisBreadcrumb = defineComponent({
             style: {
               display: "inline-flex",
               alignItems: "center",
-              gap: "6px",
+              gap: "var(--iris-space-xs, 8px)",
               margin: "0",
               padding: "0",
               listStyle: "none",
-              fontSize: "14px"
+              fontSize: "var(--iris-font-size-md, 14px)"
             }
           },
           items
@@ -1069,12 +1376,12 @@ var IrisDropdownMenu = defineComponent({
           onKeydown: onKeyDown,
           style: {
             ...floatingStyles.value,
-            background: "var(--iris-surface)",
+            background: "var(--iris-surface-floating)",
             color: "var(--iris-foreground)",
             border: "1px solid var(--iris-border)",
             borderRadius: "var(--iris-radius-md)",
             padding: "var(--iris-padding-sm)",
-            boxShadow: "0 8px 24px -8px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.08)",
+            boxShadow: "var(--iris-shadow-lg)",
             minWidth: "160px",
             outline: "none",
             zIndex: "1000",
@@ -1139,14 +1446,14 @@ var IrisDropdownItem = defineComponent({
           display: "flex",
           alignItems: "center",
           gap: "var(--iris-gap-sm)",
-          padding: "6px var(--iris-padding-md)",
+          padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md)",
           borderRadius: "var(--iris-radius-sm)",
           cursor: props.disabled ? "not-allowed" : "pointer",
           opacity: props.disabled ? "0.5" : "1",
           background: hovered.value && !props.disabled ? "var(--iris-surface-hover)" : "transparent",
           color: "inherit",
           outline: "none",
-          fontSize: "14px",
+          fontSize: "var(--iris-font-size-md, 14px)",
           transition: "background-color 80ms ease",
           ...attrs.style ?? {}
         }
@@ -1259,12 +1566,12 @@ var IrisAdminTabs = defineComponent({
           style: {
             display: "inline-flex",
             alignItems: "center",
-            gap: "6px",
+            gap: "var(--iris-space-xs, 8px)",
             border: "none",
             background: "transparent",
             color: "inherit",
             font: "inherit",
-            fontSize: "13px",
+            fontSize: "var(--iris-font-size-sm, 13px)",
             cursor: "pointer",
             padding: "0"
           },
@@ -1314,7 +1621,7 @@ var IrisAdminTabs = defineComponent({
             display: "inline-flex",
             alignItems: "center",
             gap: "4px",
-            padding: "5px 8px 5px 10px",
+            padding: "var(--iris-padding-sm, 6px) var(--iris-space-xs, 8px) var(--iris-padding-sm, 6px) var(--iris-space-sm, 12px)",
             borderRadius: "var(--iris-radius-md, 6px)",
             border: `1px solid ${active ? "var(--iris-primary)" : "var(--iris-border)"}`,
             background: active ? "var(--iris-primary)" : "var(--iris-surface)",
@@ -1330,27 +1637,23 @@ var IrisAdminTabs = defineComponent({
       default: () => [
         h(
           IrisDropdownTrigger,
-          { "aria-label": tr("admin.tabActions") },
           {
-            default: () => h(
-              "span",
-              {
-                "data-iris-tab-actions": "",
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: "28px",
-                  height: "28px",
-                  borderRadius: "var(--iris-radius-md, 6px)",
-                  border: "1px solid var(--iris-border)",
-                  background: "var(--iris-surface)",
-                  color: "var(--iris-foreground)",
-                  cursor: "pointer"
-                }
-              },
-              [h(IrisIcon, { name: "more-horizontal", size: 16 })]
-            )
+            "aria-label": tr("admin.tabActions"),
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "28px",
+              height: "28px",
+              borderRadius: "var(--iris-radius-md, 6px)",
+              border: "1px solid var(--iris-border)",
+              background: "var(--iris-surface)",
+              color: "var(--iris-foreground)",
+              cursor: "pointer"
+            }
+          },
+          {
+            default: () => h(IrisIcon, { name: "more-horizontal", size: 16 })
           }
         ),
         h(IrisDropdownMenu, null, {
@@ -1379,8 +1682,8 @@ var IrisAdminTabs = defineComponent({
         style: {
           display: "flex",
           alignItems: "center",
-          gap: "6px",
-          padding: "6px 10px",
+          gap: "var(--iris-space-xs, 8px)",
+          padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
           borderBottom: "1px solid var(--iris-border)",
           background: "var(--iris-background)",
           ...attrs.style ?? {}
@@ -1410,7 +1713,7 @@ var IrisAdminTabs = defineComponent({
                 orientation: "horizontal",
                 style: {
                   alignItems: "center",
-                  gap: "6px",
+                  gap: "var(--iris-space-xs, 8px)",
                   width: "max-content"
                 }
               },
@@ -1537,12 +1840,12 @@ var IrisAdminLayout = defineComponent({
           style: {
             display: "flex",
             alignItems: "center",
-            gap: "10px",
+            gap: "var(--iris-space-sm, 12px)",
             height: "52px",
-            padding: "0 16px",
+            padding: "0 var(--iris-space-md, 16px)",
             color: "var(--iris-foreground)",
             fontWeight: "700",
-            fontSize: "16px",
+            fontSize: "var(--iris-font-size-lg, 16px)",
             whiteSpace: "nowrap",
             overflow: "hidden",
             flexShrink: 0
@@ -1821,5 +2124,5 @@ function useAdminPreferences(preferences, hydrate = true) {
 }
 
 export { DropdownContextKey, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, useAdminPreferences, useAdminShell, useTabsNav };
-//# sourceMappingURL=chunk-QQ25RKOO.js.map
-//# sourceMappingURL=chunk-QQ25RKOO.js.map
+//# sourceMappingURL=chunk-ASFDGYIR.js.map
+//# sourceMappingURL=chunk-ASFDGYIR.js.map