@iris-ui-kit/vue 0.2.25 → 0.2.26

package/dist/{chunk-QQ25RKOO.js → chunk-ZWFSGMOB.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';
@@ -7,7 +7,7 @@ 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 { visibleNav, findNavPath, createExpansion, branchTrail, isBranch, createFloatingMachine, 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;
@@ -316,6 +350,8 @@ function installNavMenuStyles() {
 }
 
 // src/admin/NavMenu.ts
+var HOVER_OPEN_DELAY = 100;
+var HOVER_CLOSE_DELAY = 150;
 var IrisNavMenu = defineComponent({
   name: "IrisNavMenu",
   inheritAttrs: false,
@@ -347,6 +383,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 +398,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;
@@ -382,17 +416,113 @@ var IrisNavMenu = defineComponent({
     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 = `${props.collapsed ? rect.top : rect.bottom}px`;
+      if (dir === "rtl") {
+        panel.style.left = "";
+        panel.style.right = `${window.innerWidth - (props.collapsed ? rect.left : rect.right)}px`;
+      } else {
+        panel.style.right = "";
+        panel.style.left = `${props.collapsed ? rect.right : rect.left}px`;
+      }
+    };
+    onBeforeUnmount(() => {
+      detachViewportListeners();
+      flyoutTriggers.clear();
+      flyoutPanels.clear();
+    });
+    const isolateAtDepth = (key) => {
+      const depth = findNavPath(props.items, key).length - 1;
+      const isSameDepthOther = (k) => k !== key && findNavPath(props.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);
+    };
+    const scheduleClose = (key) => {
+      cancelClose(key);
+      closeTimers.set(
+        key,
+        setTimeout(() => {
+          closeTimers.delete(key);
+          setBranchInteraction(hoveredBranches, key, false);
+        }, HOVER_CLOSE_DELAY)
+      );
+    };
     const closeHorizontalMenus = () => {
-      if (props.orientation !== "horizontal") return;
+      if (!flyoutMode.value) return;
+      cancelAllTimers();
       hovered.value = null;
       hoveredBranches.value = [];
       focusedBranches.value = [];
+      clickedBranches.value = [];
     };
     const select = (node) => {
       if (node.disabled) return;
       closeHorizontalMenus();
       emit("select", 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) {
@@ -410,8 +540,43 @@ var IrisNavMenu = defineComponent({
     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 (!flyoutMode.value) return [];
+      const keys = [];
+      for (const node of 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" }
+    );
     const itemClass = (opts) => {
       const depth = Math.min(9, opts.depth);
       return [
@@ -434,81 +599,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 +650,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 +672,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) return;
+              setBranchInteraction(focusedBranches, node.key, true);
+            },
             onFocusout: (event) => {
               const group = event.currentTarget;
               const next = event.relatedTarget;
@@ -590,19 +726,45 @@ 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 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 = (e) => {
       const root = e.currentTarget;
       const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]")).filter(
@@ -611,15 +773,33 @@ var IrisNavMenu = defineComponent({
       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(props.items, key) : void 0;
+      const depth = idx >= 0 ? Number(buttons[idx]?.getAttribute("data-depth") ?? 0) : 0;
       switch (e.key) {
-        case "ArrowDown":
+        case "ArrowDown": {
           e.preventDefault();
+          if (flyoutMode.value && 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":
+        }
+        case "ArrowUp": {
           e.preventDefault();
+          if (flyoutMode.value && 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();
@@ -628,23 +808,56 @@ var IrisNavMenu = defineComponent({
           e.preventDefault();
           buttons[buttons.length - 1]?.focus();
           return;
+        case "Escape": {
+          if (flyoutMode.value) {
+            const openKeys = [
+              ...hoveredBranches.value,
+              ...clickedBranches.value,
+              ...focusedBranches.value
+            ];
+            if (openKeys.length > 0) {
+              e.preventDefault();
+              const openTop = openKeys.find((k) => findNavPath(props.items, k).length === 1);
+              closeHorizontalMenus();
+              if (openTop) {
+                suppressFocusOpen = true;
+                buttons.find((b) => b.getAttribute("data-key") === openTop)?.focus();
+                void nextTick(() => {
+                  suppressFocusOpen = false;
+                });
+              }
+            }
+          }
+          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)) {
+      if (props.collapsed || idx < 0 || !key || !node) return;
+      if (e.key === "ArrowRight") {
         e.preventDefault();
-        if (!expanded.value.includes(key)) toggle(key);
-        else focusAt(idx + 1);
+        if (isBranch(node)) {
+          if (flyoutMode.value || !expanded.value.includes(key)) {
+            if (flyoutMode.value) 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") {
-        if (node && isBranch(node) && expanded.value.includes(key)) {
-          e.preventDefault();
+        e.preventDefault();
+        if (flyoutMode.value && isBranch(node)) {
+          setBranchInteraction(focusedBranches, key, false);
+          setBranchInteraction(clickedBranches, key, false);
+          return;
+        }
+        if (isBranch(node) && expanded.value.includes(key)) {
           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();
           }
         }
@@ -659,6 +872,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 +883,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 +953,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 +1285,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 +1355,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 +1475,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 +1530,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 +1546,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 +1591,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 +1622,7 @@ var IrisAdminTabs = defineComponent({
                 orientation: "horizontal",
                 style: {
                   alignItems: "center",
-                  gap: "6px",
+                  gap: "var(--iris-space-xs, 8px)",
                   width: "max-content"
                 }
               },
@@ -1537,12 +1749,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 +2033,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-ZWFSGMOB.js.map
+//# sourceMappingURL=chunk-ZWFSGMOB.js.map