@iris-ui-kit/vue 0.2.24 → 0.2.26

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;
@@ -594,6 +628,8 @@ function installNavMenuStyles() {
 }
 
 // src/admin/NavMenu.ts
+var HOVER_OPEN_DELAY = 100;
+var HOVER_CLOSE_DELAY = 150;
 var IrisNavMenu = vue.defineComponent({
   name: "IrisNavMenu",
   inheritAttrs: false,
@@ -625,6 +661,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 +676,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;
@@ -660,17 +694,113 @@ var IrisNavMenu = vue.defineComponent({
     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 = `${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`;
+      }
+    };
+    vue.onBeforeUnmount(() => {
+      detachViewportListeners();
+      flyoutTriggers.clear();
+      flyoutPanels.clear();
+    });
+    const isolateAtDepth = (key) => {
+      const depth = core.findNavPath(props.items, key).length - 1;
+      const isSameDepthOther = (k) => k !== key && core.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) {
@@ -688,8 +818,43 @@ var IrisNavMenu = vue.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 = vue.computed(() => {
+      if (!flyoutMode.value) return [];
+      const keys = [];
+      for (const node of 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" }
+    );
     const itemClass = (opts) => {
       const depth = Math.min(9, opts.depth);
       return [
@@ -712,81 +877,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 +928,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 +950,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) return;
+              setBranchInteraction(focusedBranches, node.key, true);
+            },
             onFocusout: (event) => {
               const group = event.currentTarget;
               const next = event.relatedTarget;
@@ -868,19 +1004,45 @@ 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 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 = (e) => {
       const root = e.currentTarget;
       const buttons = Array.from(root.querySelectorAll("[data-iris-nav-item]")).filter(
@@ -889,15 +1051,33 @@ var IrisNavMenu = vue.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 ? core.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 && 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":
+        }
+        case "ArrowUp": {
           e.preventDefault();
+          if (flyoutMode.value && 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();
@@ -906,23 +1086,56 @@ var IrisNavMenu = vue.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) => core.findNavPath(props.items, k).length === 1);
+              closeHorizontalMenus();
+              if (openTop) {
+                suppressFocusOpen = true;
+                buttons.find((b) => b.getAttribute("data-key") === openTop)?.focus();
+                void vue.nextTick(() => {
+                  suppressFocusOpen = false;
+                });
+              }
+            }
+          }
+          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)) {
+      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 (core.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 vue.nextTick(() => {
+              group?.querySelector("[data-iris-nav-children] [data-iris-nav-item]")?.focus();
+            });
+          } else {
+            focusAt(idx + 1);
+          }
+        }
       } else if (e.key === "ArrowLeft") {
-        if (node && core.isBranch(node) && expanded.value.includes(key)) {
-          e.preventDefault();
+        e.preventDefault();
+        if (flyoutMode.value && core.isBranch(node)) {
+          setBranchInteraction(focusedBranches, key, false);
+          setBranchInteraction(clickedBranches, key, false);
+          return;
+        }
+        if (core.isBranch(node) && expanded.value.includes(key)) {
           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();
           }
         }
@@ -937,6 +1150,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 +1161,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 +1231,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 +1568,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 +1614,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 +1627,7 @@ function useFloating(options) {
       cleanupAutoUpdate = null;
       epoch++;
       if (isOpen && anchorEl && floatingEl) {
+        positioned.value = false;
         cleanupAutoUpdate = dom.autoUpdate(anchorEl, floatingEl, () => {
           void update();
         });
@@ -1435,7 +1654,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 +1677,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 +1825,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 +1895,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 +2177,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 +2232,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 +2248,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 +2293,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 +2324,7 @@ var IrisAdminTabs = vue.defineComponent({
                 orientation: "horizontal",
                 style: {
                   alignItems: "center",
-                  gap: "6px",
+                  gap: "var(--iris-space-xs, 8px)",
                   width: "max-content"
                 }
               },
@@ -2238,12 +2458,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