@iris-ui-kit/vue 0.2.25 → 0.2.27

package/dist/admin.cjs

@@ -351,7 +351,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));
@@ -359,7 +359,7 @@ var CSS = `
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 2px;
+  gap: var(--iris-space-xxs, 4px);
   width: 100%;
 }
 
@@ -384,16 +384,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;
@@ -406,7 +406,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']) {
@@ -454,7 +454,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;
@@ -483,13 +483,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;
 }
 
@@ -519,44 +519,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;
@@ -572,10 +596,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;
@@ -592,6 +626,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 = vue.ref(null);
+  const hoveredBranches = vue.ref([]);
+  const focusedBranches = vue.ref([]);
+  const clickedBranches = vue.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();
+  };
+  vue.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`;
+    }
+  };
+  vue.onBeforeUnmount(() => {
+    detachViewportListeners();
+    flyoutTriggers.clear();
+    flyoutPanels.clear();
+  });
+  const isolateAtDepth = (key) => {
+    const depth = core.findNavPath(ctx.items, key).length - 1;
+    const isSameDepthOther = (k) => k !== key && core.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) => core.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 = vue.computed(() => {
+    if (!ctx.flyoutMode.value) return [];
+    const keys = [];
+    for (const node of ctx.tree.value) {
+      if (core.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);
+  };
+  vue.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 ? core.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 && core.isBranch(node)) {
+          openFlyout(key);
+          const group = buttons[idx].closest("[data-iris-nav-group]");
+          void vue.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 && core.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) => core.findNavPath(items, k).length === 1);
+            closeHorizontalMenus();
+            if (openTop) {
+              setSuppressFocusOpen(true);
+              buttons.find((b) => b.getAttribute("data-key") === openTop)?.focus();
+              void vue.nextTick(() => {
+                setSuppressFocusOpen(false);
+              });
+            }
+          }
+        }
+        return;
+      }
+    }
+    if (collapsed || idx < 0 || !key || !node) return;
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (core.isBranch(node)) {
+        if (flyoutMode() || !expanded().includes(key)) {
+          if (flyoutMode()) openFlyout(key);
+          else toggle(key);
+          const group = buttons[idx].closest("[data-iris-nav-group]");
+          void vue.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() && core.isBranch(node)) {
+        setBranchInteraction(focusedBranches, key, false);
+        setBranchInteraction(clickedBranches, key, false);
+        return;
+      }
+      if (core.isBranch(node) && expanded().includes(key)) {
+        toggle(key);
+      } else {
+        const parentKey = core.findNavPath(items, key).at(-2)?.key;
+        if (parentKey) {
+          buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
+        }
+      }
+    }
+  };
+}
 
 // src/admin/NavMenu.ts
 var IrisNavMenu = vue.defineComponent({
@@ -625,6 +968,7 @@ var IrisNavMenu = vue.defineComponent({
     const activePath = vue.computed(
       () => props.activeKey ? core.findNavPath(props.items, props.activeKey).map((n) => n.key) : []
     );
+    const flyoutMode = vue.computed(() => props.orientation === "horizontal" || props.collapsed);
     const isControlled = vue.computed(() => props.expandedKeys !== void 0);
     const model = core.createExpansion({
       mode: "multiple",
@@ -639,12 +983,9 @@ var IrisNavMenu = vue.defineComponent({
     const expanded = vue.computed(
       () => isControlled.value ? props.expandedKeys : internalExpanded.value
     );
-    vue.watch(
-      () => props.activeKey,
-      (key) => {
-        if (!isControlled.value) model.merge(key ? core.branchTrail(props.items, key) : []);
-      }
-    );
+    vue.watch([() => props.activeKey, () => props.items], ([key]) => {
+      if (!isControlled.value) model.merge(key ? core.branchTrail(props.items, key) : []);
+    });
     const toggle = (key) => {
       if (isControlled.value) {
         const cur = props.expandedKeys;
@@ -657,39 +998,35 @@ var IrisNavMenu = vue.defineComponent({
         emit("update:expandedKeys", model.get());
       }
     };
-    const hovered = vue.ref(null);
-    const hoveredBranches = vue.ref([]);
-    const focusedBranches = vue.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) => core.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 [
@@ -712,81 +1049,47 @@ var IrisNavMenu = vue.defineComponent({
       },
       String(node.badge)
     ) : null;
-    const renderCollapsed = () => tree.value.map((node) => {
+    const renderItem = (node, depth) => {
       const branch = core.isBranch(node);
-      const active = branch ? activePath.value.includes(node.key) : node.key === props.activeKey;
-      return vue.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 = vue.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 ? core.firstLeaf(node) : node)
-        },
-        [
-          iconNode(node, 20) ?? vue.h("span", { class: "iris-nav-menu-fallback-icon" }, node.title.charAt(0))
-        ]
-      );
-    });
-    const renderItem = (node, depth) => {
-      const branch = core.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 = vue.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: () => {
@@ -797,7 +1100,17 @@ var IrisNavMenu = vue.defineComponent({
               hovered.value = null;
             }
           },
-          onClick: () => branch ? toggle(node.key) : select(node)
+          onClick: () => {
+            if (props.collapsed && branch) {
+              select(core.firstLeaf(node));
+            } else if (horizontal && branch) {
+              toggleFlyout(node.key);
+            } else if (branch) {
+              toggle(node.key);
+            } else {
+              select(node);
+            }
+          }
         },
         [
           iconNode(node),
@@ -809,54 +1122,49 @@ var IrisNavMenu = vue.defineComponent({
             node.title
           ),
           badgeNode(node),
-          branch ? vue.h(IrisIcon, {
-            name: horizontal && depth === 0 ? "chevron-down" : "chevron-right",
+          branch && !(props.collapsed && depth === 0) ? vue.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 vue.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 vue.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;
@@ -868,66 +1176,62 @@ var IrisNavMenu = vue.defineComponent({
         },
         [
           row,
-          vue.h(
+          branch ? vue.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))
-          )
+            [
+              vue.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 = core.findNavNode(props.items, key);
-      if (e.key === "ArrowRight" && node && core.isBranch(node)) {
-        e.preventDefault();
-        if (!expanded.value.includes(key)) toggle(key);
-        else focusAt(idx + 1);
-      } else if (e.key === "ArrowLeft") {
-        if (node && core.isBranch(node) && expanded.value.includes(key)) {
-          e.preventDefault();
-          toggle(key);
-        } else {
-          const parentKey = core.findNavPath(props.items, key).at(-2)?.key;
-          if (parentKey) {
-            e.preventDefault();
-            buttons.find((b) => b.getAttribute("data-key") === parentKey)?.focus();
-          }
+    const rootRef = vue.shallowRef(null);
+    vue.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}`,
@@ -937,6 +1241,9 @@ var IrisNavMenu = vue.defineComponent({
       "nav",
       {
         ...attrs,
+        ref: (el) => {
+          rootRef.value = el ?? null;
+        },
         class: [...menuClass, attrs.class],
         "data-iris-nav-menu": "",
         "data-collapsed": props.collapsed ? "true" : void 0,
@@ -945,7 +1252,7 @@ var IrisNavMenu = vue.defineComponent({
         onKeydown,
         style: attrs.style
       },
-      props.collapsed ? renderCollapsed() : tree.value.map((node) => renderItem(node, 0))
+      tree.value.map((node) => renderItem(node, 0))
     );
   }
 });
@@ -1015,11 +1322,11 @@ var IrisBreadcrumb = vue.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
@@ -1352,6 +1659,7 @@ var IrisDropdownTrigger = vue.defineComponent({
 function useFloating(options) {
   const x = vue.ref(0);
   const y = vue.ref(0);
+  const positioned = vue.ref(false);
   const strategy = vue.ref(options.strategy ?? "absolute");
   const finalPlacement = vue.ref(options.placement ?? "bottom");
   const arrowX = vue.ref();
@@ -1397,6 +1705,7 @@ function useFloating(options) {
     if (token !== epoch) return;
     x.value = result.x;
     y.value = result.y;
+    positioned.value = true;
     finalPlacement.value = result.placement;
     const arrowData = result.middlewareData.arrow;
     arrowX.value = arrowData?.x;
@@ -1409,6 +1718,7 @@ function useFloating(options) {
       cleanupAutoUpdate = null;
       epoch++;
       if (isOpen && anchorEl && floatingEl) {
+        positioned.value = false;
         cleanupAutoUpdate = dom.autoUpdate(anchorEl, floatingEl, () => {
           void update();
         });
@@ -1435,7 +1745,11 @@ function useFloating(options) {
     top: "0",
     left: "0",
     transform: `translate3d(${Math.round(x.value)}px, ${Math.round(y.value)}px, 0)`,
-    width: "max-content"
+    width: "max-content",
+    // Hidden until the first positioning cycle lands — prevents a flash at
+    // the viewport origin. visibility (not display:none) keeps the panel
+    // measurable so Floating UI can compute its real coordinates.
+    visibility: positioned.value ? "visible" : "hidden"
   }));
   return { x, y, strategy, finalPlacement, floatingStyles, update, arrowX, arrowY, arrowSide };
 }
@@ -1454,6 +1768,7 @@ function useDismiss(options) {
   const onPointerDown = (event) => {
     if (!options.enabled.value) return;
     if (isExcluded(event.target)) return;
+    if (options.excludePredicate?.(event.target)) return;
     options.onDismiss();
   };
   const onKeyDown = (event) => {
@@ -1601,12 +1916,12 @@ var IrisDropdownMenu = vue.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",
@@ -1671,14 +1986,14 @@ var IrisDropdownItem = vue.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 ?? {}
         }
@@ -1953,12 +2268,12 @@ var IrisAdminTabs = vue.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"
           },
@@ -2008,7 +2323,7 @@ var IrisAdminTabs = vue.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)",
@@ -2024,27 +2339,23 @@ var IrisAdminTabs = vue.defineComponent({
       default: () => [
         vue.h(
           IrisDropdownTrigger,
-          { "aria-label": tr("admin.tabActions") },
           {
-            default: () => vue.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"
-                }
-              },
-              [vue.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: () => vue.h(IrisIcon, { name: "more-horizontal", size: 16 })
           }
         ),
         vue.h(IrisDropdownMenu, null, {
@@ -2073,8 +2384,8 @@ var IrisAdminTabs = vue.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 ?? {}
@@ -2104,7 +2415,7 @@ var IrisAdminTabs = vue.defineComponent({
                 orientation: "horizontal",
                 style: {
                   alignItems: "center",
-                  gap: "6px",
+                  gap: "var(--iris-space-xs, 8px)",
                   width: "max-content"
                 }
               },
@@ -2238,12 +2549,12 @@ var IrisAdminLayout = vue.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