@iris-ui-kit/vue 0.2.25 → 0.2.26

package/dist/index.cjs

@@ -605,6 +605,7 @@ function useGroupedView(config) {
   });
   return {
     store: controller.store,
+    expansion: controller.expansion,
     setRows: (rows, columns) => controller.setRows(rows, columns),
     toggleGroup: (key) => controller.toggleGroup(key),
     expandGroup: (key) => controller.expandGroup(key),
@@ -912,7 +913,7 @@ var __NAV_MENU_STYLE_ID = "iris-nav-menu-styles";
 var CSS2 = `
 :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));
@@ -920,7 +921,7 @@ var CSS2 = `
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  gap: 2px;
+  gap: var(--iris-space-xxs, 4px);
   width: 100%;
 }
 
@@ -945,16 +946,16 @@ var CSS2 = `
   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;
@@ -967,7 +968,7 @@ var CSS2 = `
 }
 
 :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']) {
@@ -1015,7 +1016,7 @@ var CSS2 = `
   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;
@@ -1044,13 +1045,13 @@ var CSS2 = `
 }
 
 :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;
 }
 
@@ -1080,44 +1081,68 @@ var CSS2 = `
   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;
@@ -1133,10 +1158,20 @@ var CSS2 = `
   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 installed2 = false;
@@ -1155,6 +1190,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,
@@ -1186,6 +1223,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",
@@ -1200,12 +1238,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;
@@ -1221,17 +1256,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) {
@@ -1249,8 +1380,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 [
@@ -1273,81 +1439,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: () => {
@@ -1358,7 +1490,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),
@@ -1370,54 +1512,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;
@@ -1429,19 +1566,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(
@@ -1450,15 +1613,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();
@@ -1467,23 +1648,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();
           }
         }
@@ -1498,6 +1712,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,
@@ -1506,7 +1723,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))
     );
   }
 });
@@ -1576,11 +1793,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
@@ -1896,6 +2113,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();
@@ -1941,6 +2159,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;
@@ -1953,6 +2172,7 @@ function useFloating(options) {
       cleanupAutoUpdate = null;
       epoch++;
       if (isOpen && anchorEl && floatingEl) {
+        positioned.value = false;
         cleanupAutoUpdate = dom.autoUpdate(anchorEl, floatingEl, () => {
           void update();
         });
@@ -1979,7 +2199,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 };
 }
@@ -1998,6 +2222,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) => {
@@ -2145,12 +2370,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",
@@ -2215,14 +2440,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 ?? {}
         }
@@ -2497,12 +2722,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"
           },
@@ -2552,7 +2777,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)",
@@ -2568,27 +2793,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, {
@@ -2617,8 +2838,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 ?? {}
@@ -2648,7 +2869,7 @@ var IrisAdminTabs = vue.defineComponent({
                 orientation: "horizontal",
                 style: {
                   alignItems: "center",
-                  gap: "6px",
+                  gap: "var(--iris-space-xs, 8px)",
                   width: "max-content"
                 }
               },
@@ -2775,12 +2996,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
@@ -3326,7 +3547,10 @@ var CSS3 = `
   opacity: 0.6;
 }
 .iris-button[data-iris-button-variant="solid"]:not([disabled]):not([aria-busy="true"]):hover {
-  filter: brightness(1.08);
+  background: color-mix(in srgb, var(--iris-danger) 92%, var(--iris-surface));
+}
+.iris-button:not([disabled]):not([aria-busy="true"]):active {
+  transform: scale(0.98);
 }
 .iris-button[data-iris-button-variant="outline"]:not([disabled]):not([aria-busy="true"]):hover,
 .iris-button[data-iris-button-variant="ghost"]:not([disabled]):not([aria-busy="true"]):hover {
@@ -3368,15 +3592,15 @@ function installButtonStyles() {
 var SIZE_STYLES = {
   sm: {
     padding: "var(--iris-padding-sm) var(--iris-padding-md)",
-    fontSize: "12px"
+    fontSize: "var(--iris-font-size-xs, 12px)"
   },
   md: {
     padding: "var(--iris-padding-sm) var(--iris-padding-lg)",
-    fontSize: "14px"
+    fontSize: "var(--iris-font-size-md, 14px)"
   },
   lg: {
     padding: "var(--iris-padding-md) var(--iris-padding-lg)",
-    fontSize: "16px"
+    fontSize: "var(--iris-font-size-lg, 16px)"
   }
 };
 var VARIANT_STYLES = {
@@ -3400,6 +3624,11 @@ var VARIANT_STYLES = {
     color: "var(--iris-primary)",
     border: "1px solid transparent",
     textDecoration: "none"
+  },
+  danger: {
+    background: "var(--iris-danger)",
+    color: "var(--iris-on-color, #ffffff)",
+    border: "1px solid var(--iris-danger)"
   }
 };
 function buildInlineStyle(variant, size) {
@@ -3620,6 +3849,74 @@ var IrisPopoverTrigger = vue.defineComponent({
     };
   }
 });
+
+// src/primitives/floating/animations.ts
+var STYLE_ID2 = "iris-floating-animations";
+var installed4 = false;
+var ANIM_DIALOG = "var(--iris-anim-dialog)";
+var ANIM_POPOVER = "var(--iris-anim-popover)";
+var ANIM_TOAST = "var(--iris-anim-toast)";
+var ANIM_TOOLTIP = "var(--iris-anim-tooltip)";
+function installFloatingAnimations() {
+  if (installed4 || typeof document === "undefined") return;
+  installed4 = true;
+  if (document.getElementById(STYLE_ID2)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = `
+:root {
+  --iris-anim-dialog: iris-dialog-in 150ms ease-out;
+  --iris-anim-popover: iris-popover-in 150ms ease-out;
+  --iris-anim-toast: iris-toast-in 200ms ease-out;
+  --iris-anim-tooltip: iris-tooltip-in 120ms ease-out;
+}
+/*
+ * NOTE: these keyframes animate OPACITY ONLY. The floating layers are
+ * positioned via inline transform: translate3d(...) (Floating UI), and any
+ * transform in the keyframes would override it for the animation duration \u2014
+ * flashing the panel at the viewport origin (0,0) before it jumps into place.
+ * Fade-only keeps the entrance motion without touching positioning.
+ */
+@keyframes iris-dialog-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes iris-popover-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes iris-toast-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes iris-tooltip-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --iris-anim-dialog: none;
+    --iris-anim-popover: none;
+    --iris-anim-toast: none;
+    --iris-anim-tooltip: none;
+  }
+}
+/* P4: global focus-visible ring for interactive controls */
+[data-iris-tabs-trigger]:focus-visible,
+[data-iris-switch]:focus-visible,
+[data-iris-checkbox]:focus-visible,
+[data-iris-select-trigger]:focus-visible,
+[data-iris-segmented-item]:focus-visible,
+[data-iris-menu-item]:focus-visible,
+[data-iris-nav-menu-item]:focus-visible {
+  outline: 2px solid var(--iris-primary);
+  outline-offset: 2px;
+}
+`;
+  document.head.appendChild(style);
+}
+
+// src/primitives/popover/PopoverContent.ts
 var IrisPopoverContent = vue.defineComponent({
   name: "IrisPopoverContent",
   inheritAttrs: false,
@@ -3631,6 +3928,7 @@ var IrisPopoverContent = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    installFloatingAnimations();
     const ctx = vue.inject(PopoverContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisPopoverContent must be a descendant of IrisPopover");
@@ -3676,13 +3974,14 @@ var IrisPopoverContent = vue.defineComponent({
         "data-placement": ctx.placement,
         style: {
           ...floatingStyles.value,
-          background: "var(--iris-surface)",
+          background: "var(--iris-surface-floating)",
+          animation: ANIM_POPOVER,
           color: "var(--iris-foreground)",
           border: "1px solid var(--iris-border)",
           borderRadius: "var(--iris-radius-md)",
           padding: "var(--iris-padding-md)",
-          boxShadow: "0 8px 24px -8px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.08)",
-          fontSize: "14px",
+          boxShadow: "var(--iris-shadow-lg)",
+          fontSize: "var(--iris-font-size-md, 14px)",
           zIndex: "1000",
           outline: "none",
           ...attrs.style ?? {}
@@ -3726,6 +4025,7 @@ var IrisTooltip = vue.defineComponent({
     disabled: { type: Boolean, default: false }
   },
   setup(props, { slots, attrs }) {
+    installFloatingAnimations();
     const triggerRef = vue.ref(null);
     const tooltipRef = vue.ref(null);
     const tooltipId = vue.useId();
@@ -3833,9 +4133,10 @@ var IrisTooltip = vue.defineComponent({
             ...floatingStyles.value,
             background: "var(--iris-foreground)",
             color: "var(--iris-background)",
-            padding: "4px 8px",
+            animation: ANIM_TOOLTIP,
+            padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
             borderRadius: "var(--iris-radius-sm)",
-            fontSize: "12px",
+            fontSize: "var(--iris-font-size-xs, 12px)",
             lineHeight: "1.4",
             maxWidth: "240px",
             pointerEvents: "none",
@@ -4134,6 +4435,7 @@ var IrisDialogContent = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    installFloatingAnimations();
     const ctx = vue.inject(DialogContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisDialogContent must be a descendant of IrisDialog");
@@ -4182,7 +4484,7 @@ var IrisDialogContent = vue.defineComponent({
           style: {
             position: "fixed",
             inset: "0",
-            background: "rgba(0, 0, 0, 0.5)",
+            background: "var(--iris-backdrop, rgba(0, 0, 0, 0.5))",
             zIndex: "1200",
             display: "flex",
             alignItems: "center",
@@ -4207,12 +4509,13 @@ var IrisDialogContent = vue.defineComponent({
               "data-state": "open",
               onPointerdown: onContentPointerDown,
               style: {
-                background: "var(--iris-surface)",
+                background: "var(--iris-surface-floating)",
+                animation: ANIM_DIALOG,
                 color: "var(--iris-foreground)",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-lg)",
                 padding: "var(--iris-padding-lg)",
-                boxShadow: "0 24px 48px -16px rgba(0,0,0,0.32), 0 8px 16px -4px rgba(0,0,0,0.16)",
+                boxShadow: "var(--iris-shadow-xl)",
                 maxWidth: "90vw",
                 maxHeight: "85vh",
                 overflow: "auto",
@@ -4247,7 +4550,7 @@ var IrisDialogTitle = vue.defineComponent({
         id: ctx.titleId,
         style: {
           margin: "0 0 var(--iris-gap-md) 0",
-          fontSize: "18px",
+          fontSize: "var(--iris-font-size-xl, 18px)",
           fontWeight: "600",
           ...attrs.style ?? {}
         }
@@ -4275,7 +4578,7 @@ var IrisDialogDescription = vue.defineComponent({
         style: {
           margin: "0 0 var(--iris-gap-lg) 0",
           color: "var(--iris-muted)",
-          fontSize: "14px",
+          fontSize: "var(--iris-font-size-md, 14px)",
           ...attrs.style ?? {}
         }
       },
@@ -4673,18 +4976,18 @@ var IrisInput = vue.defineComponent({
     const sizeStyles = vue.computed(() => {
       const map = {
         sm: {
-          padding: "4px var(--iris-padding-sm)",
-          fontSize: "12px",
+          padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm)",
+          fontSize: "var(--iris-font-size-xs, 12px)",
           minHeight: "28px"
         },
         md: {
-          padding: "6px var(--iris-padding-md)",
-          fontSize: "14px",
+          padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+          fontSize: "var(--iris-font-size-md, 14px)",
           minHeight: "34px"
         },
         lg: {
-          padding: "8px var(--iris-padding-md)",
-          fontSize: "16px",
+          padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+          fontSize: "var(--iris-font-size-lg, 16px)",
           minHeight: "40px"
         }
       };
@@ -4692,7 +4995,7 @@ var IrisInput = vue.defineComponent({
     });
     const wrapperStyle = vue.computed(() => {
       const borderColor = props.invalid ? "var(--iris-danger)" : focused.value ? "var(--iris-primary)" : "var(--iris-border)";
-      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "color-mix(in srgb, var(--iris-danger) 18%, transparent)" : "color-mix(in srgb, var(--iris-primary) 18%, transparent)"}` : "none";
       return {
         display: "inline-flex",
         alignItems: "center",
@@ -4813,15 +5116,27 @@ var IrisTextarea = vue.defineComponent({
     const textareaRef = vue.ref(null);
     const sizeStyles = vue.computed(() => {
       const map = {
-        sm: { padding: "6px var(--iris-padding-sm)", fontSize: "12px", lineHeight: "1.5" },
-        md: { padding: "8px var(--iris-padding-md)", fontSize: "14px", lineHeight: "1.5" },
-        lg: { padding: "10px var(--iris-padding-md)", fontSize: "16px", lineHeight: "1.5" }
+        sm: {
+          padding: "var(--iris-space-xs, 8px) var(--iris-padding-sm)",
+          fontSize: "var(--iris-font-size-xs, 12px)",
+          lineHeight: "1.5"
+        },
+        md: {
+          padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+          fontSize: "var(--iris-font-size-md, 14px)",
+          lineHeight: "1.5"
+        },
+        lg: {
+          padding: "var(--iris-space-sm, 12px) var(--iris-padding-md)",
+          fontSize: "var(--iris-font-size-lg, 16px)",
+          lineHeight: "1.5"
+        }
       };
       return map[props.size];
     });
     const wrapperStyle = vue.computed(() => {
       const borderColor = props.invalid ? "var(--iris-danger)" : focused.value ? "var(--iris-primary)" : "var(--iris-border)";
-      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "color-mix(in srgb, var(--iris-danger) 18%, transparent)" : "color-mix(in srgb, var(--iris-primary) 18%, transparent)"}` : "none";
       return {
         display: "flex",
         background: "var(--iris-background)",
@@ -5020,15 +5335,27 @@ var IrisNumberInput = vue.defineComponent({
     };
     const sizeStyles = vue.computed(() => {
       const map = {
-        sm: { padding: "4px var(--iris-padding-sm)", fontSize: "12px", minHeight: "28px" },
-        md: { padding: "6px var(--iris-padding-md)", fontSize: "14px", minHeight: "34px" },
-        lg: { padding: "8px var(--iris-padding-md)", fontSize: "16px", minHeight: "40px" }
+        sm: {
+          padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm)",
+          fontSize: "var(--iris-font-size-xs, 12px)",
+          minHeight: "28px"
+        },
+        md: {
+          padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+          fontSize: "var(--iris-font-size-md, 14px)",
+          minHeight: "34px"
+        },
+        lg: {
+          padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+          fontSize: "var(--iris-font-size-lg, 16px)",
+          minHeight: "40px"
+        }
       };
       return map[props.size];
     });
     const wrapperStyle = vue.computed(() => {
       const borderColor = props.invalid ? "var(--iris-danger)" : focused.value ? "var(--iris-primary)" : "var(--iris-border)";
-      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+      const boxShadow = focused.value ? `0 0 0 3px ${props.invalid ? "color-mix(in srgb, var(--iris-danger) 18%, transparent)" : "color-mix(in srgb, var(--iris-primary) 18%, transparent)"}` : "none";
       return {
         display: "inline-flex",
         alignItems: "center",
@@ -5137,9 +5464,9 @@ var IrisNumberInput = vue.defineComponent({
   }
 });
 var SIZE_MAP = {
-  sm: { box: "32px", height: "36px", fontSize: "14px" },
-  md: { box: "38px", height: "44px", fontSize: "18px" },
-  lg: { box: "44px", height: "52px", fontSize: "20px" }
+  sm: { box: "32px", height: "36px", fontSize: "var(--iris-font-size-md, 14px)" },
+  md: { box: "38px", height: "44px", fontSize: "var(--iris-font-size-xl, 18px)" },
+  lg: { box: "44px", height: "52px", fontSize: "var(--iris-font-size-2xl, 20px)" }
 };
 var PATTERNS = {
   numeric: /[0-9]/,
@@ -5315,7 +5642,7 @@ var IrisOtpInput = vue.defineComponent({
               borderRadius: "var(--iris-radius-md, 6px)",
               outline: "none",
               opacity: props.disabled ? "0.6" : "1",
-              boxShadow: focused ? `0 0 0 3px ${props.invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none",
+              boxShadow: focused ? `0 0 0 3px ${props.invalid ? "color-mix(in srgb, var(--iris-danger) 18%, transparent)" : "color-mix(in srgb, var(--iris-primary) 18%, transparent)"}` : "none",
               transition: "border-color 120ms ease, box-shadow 120ms ease"
             }
           });
@@ -5487,10 +5814,24 @@ var IrisRating = vue.defineComponent({
   }
 });
 var SIZE_MAP3 = {
-  sm: { padding: "4px 8px", fontSize: "12px", minHeight: "28px" },
-  md: { padding: "6px 12px", fontSize: "14px", minHeight: "34px" },
-  lg: { padding: "8px 12px", fontSize: "16px", minHeight: "40px" }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    minHeight: "28px"
+  },
+  md: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "34px"
+  },
+  lg: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    minHeight: "40px"
+  }
 };
+var LISTBOX_MAX_HEIGHT = 240;
+var ROW_HEIGHT = { sm: 28, md: 34, lg: 40 };
 var IrisCombobox = vue.defineComponent({
   name: "IrisCombobox",
   inheritAttrs: false,
@@ -5502,6 +5843,12 @@ var IrisCombobox = vue.defineComponent({
     disabled: { type: Boolean, default: false },
     invalid: { type: Boolean, default: false },
     size: { type: String, default: "md" },
+    /**
+     * Opt-in windowed rendering of the listbox via the core virtualizer.
+     * When true, only the visible window (+ buffer) of options is rendered;
+     * keyboard navigation scrolls the active option into view. Default false.
+     */
+    virtual: { type: Boolean, default: false },
     /** Text shown when no option matches the query. Defaults to the i18n value. */
     emptyText: { type: String, default: void 0 },
     /** Allow committing free text that matches no option: Enter/blur emits
@@ -5534,10 +5881,53 @@ var IrisCombobox = vue.defineComponent({
       const needle = query.value.trim().toLowerCase();
       return filtering.value && needle ? props.options.filter((o) => o.label.toLowerCase().startsWith(needle)) : props.options;
     });
+    const listboxRef = vue.ref(null);
+    const vstate = vue.ref({
+      items: [],
+      offsetBefore: 0,
+      totalSize: 0,
+      startIndex: 0,
+      endIndex: -1
+    });
+    let v = null;
+    let unsub = null;
+    vue.watchEffect(() => {
+      if (!props.virtual) return;
+      if (!v) {
+        v = core.createVirtualizer({
+          count: 0,
+          estimateSize: () => ROW_HEIGHT[props.size],
+          getItemKey: (i) => filtered.value[i]?.value ?? i,
+          viewportSize: LISTBOX_MAX_HEIGHT,
+          buffer: 4
+        });
+        vstate.value = v.getState();
+        unsub = v.subscribe((s) => {
+          vstate.value = s;
+        });
+      }
+      v.setCount(filtered.value.length);
+      const el = listboxRef.value;
+      if (el) {
+        const max = Math.max(0, v.totalSize() - LISTBOX_MAX_HEIGHT);
+        if (el.scrollTop > max) el.scrollTop = max;
+      }
+    });
+    vue.onBeforeUnmount(() => unsub?.());
+    const ensureVisible = (index) => {
+      if (!props.virtual || !v || index < 0 || index >= filtered.value.length) return;
+      const el = listboxRef.value;
+      if (!el) return;
+      const top = el.scrollTop;
+      const start = index * ROW_HEIGHT[props.size];
+      if (start >= top && start + ROW_HEIGHT[props.size] <= top + LISTBOX_MAX_HEIGHT) return;
+      el.scrollTop = v.scrollToIndex(index, start < top ? "start" : "end");
+    };
     const close = () => {
       open.value = false;
       filtering.value = false;
       activeIndex.value = -1;
+      v?.setScroll(0);
     };
     const selectOption = (opt) => {
       if (opt.disabled) return;
@@ -5569,10 +5959,16 @@ var IrisCombobox = vue.defineComponent({
           activeIndex.value = 0;
           return;
         }
-        activeIndex.value = Math.min(list.length - 1, activeIndex.value + 1);
+        const next = Math.min(list.length - 1, activeIndex.value + 1);
+        activeIndex.value = next;
+        ensureVisible(next);
       } else if (event.key === "ArrowUp") {
         event.preventDefault();
-        if (open.value) activeIndex.value = Math.max(0, activeIndex.value - 1);
+        if (open.value) {
+          const next = Math.max(0, activeIndex.value - 1);
+          activeIndex.value = next;
+          ensureVisible(next);
+        }
       } else if (event.key === "Enter") {
         if (open.value && activeIndex.value >= 0 && list[activeIndex.value]) {
           event.preventDefault();
@@ -5590,11 +5986,14 @@ var IrisCombobox = vue.defineComponent({
         if (open.value) {
           event.preventDefault();
           activeIndex.value = 0;
+          ensureVisible(0);
         }
       } else if (event.key === "End") {
         if (open.value) {
           event.preventDefault();
-          activeIndex.value = list.length - 1;
+          const next = list.length - 1;
+          activeIndex.value = next;
+          ensureVisible(next);
         }
       }
     };
@@ -5670,7 +6069,7 @@ var IrisCombobox = vue.defineComponent({
               borderRadius: "var(--iris-radius-md, 6px)",
               outline: "none",
               opacity: props.disabled ? "0.6" : "1",
-              boxShadow: focused.value ? `0 0 0 3px ${props.invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none",
+              boxShadow: focused.value ? `0 0 0 3px ${props.invalid ? "color-mix(in srgb, var(--iris-danger) 18%, transparent)" : "color-mix(in srgb, var(--iris-primary) 18%, transparent)"}` : "none",
               transition: "border-color 120ms ease, box-shadow 120ms ease"
             }
           }),
@@ -5680,6 +6079,12 @@ var IrisCombobox = vue.defineComponent({
               id: listboxId,
               role: "listbox",
               "data-iris-combobox-listbox": "",
+              ref: (el) => {
+                listboxRef.value = el ?? null;
+              },
+              onScroll: (e) => {
+                v?.setScroll(e.currentTarget.scrollTop);
+              },
               style: {
                 position: "absolute",
                 insetInlineStart: "0",
@@ -5695,7 +6100,7 @@ var IrisCombobox = vue.defineComponent({
                 background: "var(--iris-background)",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-md, 6px)",
-                boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
+                boxShadow: "var(--iris-shadow-lg)"
               }
             },
             list.length === 0 ? [
@@ -5705,13 +6110,65 @@ var IrisCombobox = vue.defineComponent({
                   "data-iris-combobox-empty": "",
                   "aria-disabled": "true",
                   style: {
-                    padding: "6px 10px",
+                    padding: "var(--iris-padding-sm, 6px) var(--iris-space-sm, 12px)",
                     color: "var(--iris-muted)",
                     fontSize: sz.fontSize
                   }
                 },
                 resolvedEmpty
               )
+            ] : props.virtual && v && vstate.value.items.length > 0 ? [
+              vue.h("li", {
+                role: "presentation",
+                "aria-hidden": "true",
+                "data-iris-combobox-spacer": "",
+                "data-iris-combobox-spacer-type": "top",
+                style: { height: `${vstate.value.offsetBefore}px` }
+              }),
+              ...vstate.value.items.map((item) => {
+                const opt = list[item.index];
+                if (!opt) return null;
+                const isActive = item.index === activeIndex.value;
+                const isSelected = opt.value === props.modelValue;
+                return vue.h(
+                  "li",
+                  {
+                    key: opt.value,
+                    id: optionId(item.index),
+                    role: "option",
+                    "aria-selected": isSelected ? "true" : "false",
+                    "aria-disabled": opt.disabled ? "true" : void 0,
+                    "aria-setsize": list.length,
+                    "aria-posinset": item.index + 1,
+                    "data-iris-combobox-option": "",
+                    "data-active": isActive ? "true" : void 0,
+                    onMousedown: (e) => e.preventDefault(),
+                    onMouseenter: () => {
+                      activeIndex.value = item.index;
+                    },
+                    onClick: () => selectOption(opt),
+                    style: {
+                      padding: "var(--iris-padding-sm, 6px) var(--iris-space-sm, 12px)",
+                      fontSize: sz.fontSize,
+                      borderRadius: "var(--iris-radius-sm, 4px)",
+                      cursor: opt.disabled ? "not-allowed" : "pointer",
+                      color: opt.disabled ? "var(--iris-muted)" : "var(--iris-foreground)",
+                      background: isActive ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent",
+                      fontWeight: isSelected ? "600" : "400"
+                    }
+                  },
+                  opt.label
+                );
+              }),
+              vue.h("li", {
+                role: "presentation",
+                "aria-hidden": "true",
+                "data-iris-combobox-spacer": "",
+                "data-iris-combobox-spacer-type": "bottom",
+                style: {
+                  height: `${vstate.value.totalSize - vstate.value.offsetBefore - vstate.value.items.length * ROW_HEIGHT[props.size]}px`
+                }
+              })
             ] : list.map((opt, i) => {
               const isActive = i === activeIndex.value;
               const isSelected = opt.value === props.modelValue;
@@ -5731,7 +6188,7 @@ var IrisCombobox = vue.defineComponent({
                   },
                   onClick: () => selectOption(opt),
                   style: {
-                    padding: "6px 10px",
+                    padding: "var(--iris-padding-sm, 6px) var(--iris-space-sm, 12px)",
                     fontSize: sz.fontSize,
                     borderRadius: "var(--iris-radius-sm, 4px)",
                     cursor: opt.disabled ? "not-allowed" : "pointer",
@@ -5812,8 +6269,8 @@ var IrisPasswordInput = vue.defineComponent({
                 border: "none",
                 cursor: props.disabled ? "not-allowed" : "pointer",
                 color: "var(--iris-muted)",
-                padding: "0 2px",
-                fontSize: "13px",
+                padding: "0 var(--iris-space-xxs, 4px)",
+                fontSize: "var(--iris-font-size-sm, 13px)",
                 lineHeight: "1"
               }
             },
@@ -5914,7 +6371,7 @@ var IrisFormField = vue.defineComponent({
             {
               id: hintId,
               "data-iris-form-field-hint": "",
-              style: { fontSize: "12px", color: "var(--iris-muted)" }
+              style: { fontSize: "var(--iris-font-size-xs, 12px)", color: "var(--iris-muted)" }
             },
             props.hint
           ) : null,
@@ -5924,7 +6381,10 @@ var IrisFormField = vue.defineComponent({
               id: errorId,
               "data-iris-form-field-error": "",
               role: "alert",
-              style: { fontSize: "12px", color: "var(--iris-danger)" }
+              style: {
+                fontSize: "var(--iris-font-size-xs, 12px)",
+                color: "var(--iris-danger)"
+              }
             },
             props.error
           ) : null
@@ -5968,7 +6428,7 @@ var IrisSwitch = vue.defineComponent({
       height: dims.value.height,
       background: props.modelValue ? "var(--iris-primary)" : "var(--iris-border)",
       borderRadius: "999px",
-      transition: "background-color 120ms ease",
+      transition: "background-color var(--iris-transition-fast, 150ms) ease",
       cursor: props.disabled ? "not-allowed" : "pointer",
       opacity: props.disabled ? "0.6" : "1",
       verticalAlign: "middle"
@@ -5984,8 +6444,8 @@ var IrisSwitch = vue.defineComponent({
         height: dims.value.thumb,
         background: "var(--iris-background)",
         borderRadius: "999px",
-        transition: "left 140ms ease",
-        boxShadow: "0 1px 3px rgba(0,0,0,0.18)"
+        transition: "left var(--iris-transition-fast, 150ms) ease",
+        boxShadow: "var(--iris-shadow-sm)"
       };
     });
     const onChange = (event) => {
@@ -6327,7 +6787,7 @@ var LIST_STATE_STYLE = {
   padding: "12px",
   textAlign: "center",
   color: "var(--iris-muted)",
-  fontSize: "14px"
+  fontSize: "var(--iris-font-size-md, 14px)"
 };
 var IrisList = vue.defineComponent({
   name: "IrisList",
@@ -6446,13 +6906,14 @@ var IrisList = 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: item.disabled ? "not-allowed" : "pointer",
         opacity: item.disabled ? "0.5" : "1",
-        fontSize: "14px",
-        background: selected ? "var(--iris-primary)" : hoveredIndex.value === index ? "var(--iris-surface-hover)" : active ? "var(--iris-surface-hover)" : "transparent",
-        color: selected ? "var(--iris-primary-foreground)" : "var(--iris-foreground)",
+        fontSize: "var(--iris-font-size-md, 14px)",
+        background: selected ? "var(--iris-surface-selected, rgba(99, 102, 241, 0.12))" : hoveredIndex.value === index ? "var(--iris-surface-hover)" : active ? "var(--iris-surface-hover)" : "transparent",
+        color: "var(--iris-foreground)",
+        fontWeight: selected ? "600" : "400",
         outline: "none"
       };
       const slotContent = slots.item?.({
@@ -6483,7 +6944,28 @@ var IrisList = vue.defineComponent({
           },
           style: baseStyle
         },
-        slotContent ?? item.label ?? String(item.value)
+        [
+          vue.h(
+            "span",
+            { style: { flex: "1", minWidth: "0" } },
+            slotContent ?? item.label ?? String(item.value)
+          ),
+          selected ? vue.h(
+            "svg",
+            {
+              "aria-hidden": "true",
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "var(--iris-primary)",
+              "stroke-width": "2.5",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            [vue.h("path", { d: "M20 6 9 17l-5-5" })]
+          ) : null
+        ]
       );
     });
     return () => vue.h(
@@ -6507,8 +6989,10 @@ var IrisList = vue.defineComponent({
           padding: "var(--iris-padding-sm)",
           display: "flex",
           flexDirection: "column",
-          gap: "2px",
+          gap: "var(--iris-space-xxs, 4px)",
           outline: "none",
+          maxHeight: "240px",
+          overflowY: "auto",
           ...attrs.style ?? {}
         }
       },
@@ -6522,6 +7006,7 @@ var IrisSelect = vue.defineComponent({
   props: {
     items: { type: Array, required: true },
     modelValue: { type: null },
+    multiple: { type: Boolean, default: false },
     defaultValue: { type: null, default: void 0 },
     placeholder: { type: String, default: void 0 },
     size: { type: String, default: "md" },
@@ -6536,7 +7021,13 @@ var IrisSelect = vue.defineComponent({
     teleport: {
       type: [Boolean, Object],
       default: void 0
-    }
+    },
+    /**
+     * Opt-in windowed rendering of the listbox via the core virtualizer.
+     * When true, only the visible window (+ buffer) of options is rendered;
+     * keyboard navigation scrolls the active option into view. Default false.
+     */
+    virtual: { type: Boolean, default: false }
   },
   emits: {
     "update:modelValue": (_value) => true,
@@ -6548,25 +7039,157 @@ var IrisSelect = vue.defineComponent({
     const internalValue = vue.ref(props.defaultValue);
     const controlled = vue.computed(() => props.modelValue !== void 0);
     const currentValue = vue.computed(() => controlled.value ? props.modelValue : internalValue.value);
+    const selectedValues = vue.computed(() => {
+      if (!props.multiple) return [];
+      const v2 = currentValue.value;
+      return Array.isArray(v2) ? v2 : v2 !== void 0 ? [v2] : [];
+    });
     const selectedItem = vue.computed(
       () => props.items.find((item) => item.value === currentValue.value) ?? null
     );
     const triggerLabel = vue.computed(() => {
+      if (props.multiple) {
+        const items = props.items.filter((it) => selectedValues.value.includes(it.value));
+        if (items.length === 0) return props.placeholder ?? t("select.placeholder");
+        return items.map((it) => it.label ?? String(it.value)).join(", ");
+      }
       const item = selectedItem.value;
       if (!item) return props.placeholder ?? t("select.placeholder");
       return item.label ?? String(item.value);
     });
     const onSelect = (item) => {
+      if (props.multiple) {
+        const exists = selectedValues.value.includes(item.value);
+        const next = exists ? selectedValues.value.filter((v2) => v2 !== item.value) : [...selectedValues.value, item.value];
+        if (!controlled.value) internalValue.value = next;
+        emit("update:modelValue", next);
+        emit("valueChange", next);
+        return;
+      }
       if (!controlled.value) internalValue.value = item.value;
       emit("update:modelValue", item.value);
       emit("valueChange", item.value);
       open.value = false;
     };
+    const LISTBOX_MAX_HEIGHT3 = 240;
+    const ROW_HEIGHT3 = 36;
+    const listboxRef = vue.ref(null);
+    const vstate = vue.ref({
+      items: [],
+      offsetBefore: 0,
+      totalSize: 0,
+      startIndex: 0,
+      endIndex: -1
+    });
+    let v = null;
+    let vUnsub = null;
+    const nav = vue.ref(null);
+    const activeIndex = vue.ref(-1);
+    const isEnabled = (i) => !props.items[i]?.disabled;
+    vue.watchEffect(() => {
+      if (!props.virtual) return;
+      if (!v) {
+        v = core.createVirtualizer({
+          count: 0,
+          estimateSize: () => ROW_HEIGHT3,
+          getItemKey: (i) => String(props.items[i]?.value ?? i),
+          viewportSize: LISTBOX_MAX_HEIGHT3,
+          buffer: 4
+        });
+        vstate.value = v.getState();
+        vUnsub = v.subscribe((s) => {
+          vstate.value = s;
+        });
+        nav.value = core.createKeyboardNav({
+          count: props.items.length,
+          loop: true,
+          isEnabled
+        });
+        activeIndex.value = nav.value.index;
+      }
+      v.setCount(props.items.length);
+      const el = listboxRef.value;
+      if (el) {
+        const max = Math.max(0, v.totalSize() - LISTBOX_MAX_HEIGHT3);
+        if (el.scrollTop > max) el.scrollTop = max;
+      }
+    });
+    vue.onBeforeUnmount(() => vUnsub?.());
+    vue.watch(
+      () => props.items,
+      () => {
+        if (!props.virtual || !nav.value) return;
+        nav.value.reset(props.items.length);
+        activeIndex.value = nav.value.index;
+      },
+      { flush: "post" }
+    );
+    vue.watch(
+      () => open.value,
+      (isOpen) => {
+        if (!isOpen) {
+          v?.setScroll(0);
+          return;
+        }
+        if (!props.virtual || !nav.value) return;
+        const selIdx = props.items.findIndex(
+          (it) => it.value === currentValue.value && !it.disabled
+        );
+        if (selIdx >= 0) nav.value.focus(selIdx);
+        else nav.value.goFirst();
+        activeIndex.value = nav.value.index;
+        ensureVisible(activeIndex.value);
+        focusOption(activeIndex.value);
+      },
+      { flush: "post" }
+    );
+    const ensureVisible = (index) => {
+      if (!props.virtual || !v || index < 0 || index >= props.items.length) return;
+      const el = listboxRef.value;
+      if (!el) return;
+      const top = el.scrollTop;
+      const start = index * ROW_HEIGHT3;
+      if (start >= top && start + ROW_HEIGHT3 <= top + LISTBOX_MAX_HEIGHT3) return;
+      el.scrollTop = v.scrollToIndex(index, start < top ? "start" : "end");
+    };
+    const focusOption = (index) => {
+      if (index < 0) return;
+      vue.nextTick(() => {
+        listboxRef.value?.querySelector(`[data-iris-list-index="${index}"]`)?.focus();
+      });
+    };
+    const onListKeyDown = (event) => {
+      if (!nav.value) return;
+      const action = nav.value.handleKeyDown({
+        key: event.key,
+        preventDefault: () => event.preventDefault()
+      });
+      if (action.type === "focus" || action.type === "typeahead") {
+        activeIndex.value = action.target;
+        ensureVisible(action.target);
+        focusOption(action.target);
+      } else if (action.type === "select") {
+        const item = props.items[action.target];
+        if (item) onSelect(item);
+      }
+    };
     const sizeStyles = vue.computed(() => {
       const map = {
-        sm: { padding: "4px 24px 4px 8px", fontSize: "12px", minHeight: "28px" },
-        md: { padding: "6px 28px 6px 12px", fontSize: "14px", minHeight: "34px" },
-        lg: { padding: "8px 32px 8px 12px", fontSize: "16px", minHeight: "40px" }
+        sm: {
+          padding: "var(--iris-space-xxs, 4px) 24px var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+          fontSize: "var(--iris-font-size-xs, 12px)",
+          minHeight: "28px"
+        },
+        md: {
+          padding: "var(--iris-space-xs, 8px) var(--iris-space-xl, 24px) var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+          fontSize: "var(--iris-font-size-md, 14px)",
+          minHeight: "34px"
+        },
+        lg: {
+          padding: "var(--iris-space-xs, 8px) var(--iris-space-2xl, 32px) var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+          fontSize: "var(--iris-font-size-lg, 16px)",
+          minHeight: "40px"
+        }
       };
       return map[props.size];
     });
@@ -6614,12 +7237,144 @@ var IrisSelect = vue.defineComponent({
         })
       ]
     );
+    const renderVirtualListbox = () => {
+      const list = props.items;
+      const optionStyle = (selected, active, disabled) => ({
+        display: "flex",
+        alignItems: "center",
+        gap: "var(--iris-gap-sm)",
+        padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md)",
+        borderRadius: "var(--iris-radius-sm)",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? "0.5" : "1",
+        fontSize: "var(--iris-font-size-md, 14px)",
+        background: selected ? "var(--iris-surface-selected, rgba(99, 102, 241, 0.12))" : active ? "var(--iris-surface-hover)" : "transparent",
+        color: "var(--iris-foreground)",
+        fontWeight: selected ? "600" : "400",
+        outline: "none"
+      });
+      const check = () => vue.h(
+        "svg",
+        {
+          "aria-hidden": "true",
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "var(--iris-primary)",
+          "stroke-width": "2.5",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round"
+        },
+        [vue.h("path", { d: "M20 6 9 17l-5-5" })]
+      );
+      return vue.h(
+        "ul",
+        {
+          role: "listbox",
+          "aria-label": t("select.options"),
+          "data-iris-list": "",
+          ref: (el) => {
+            listboxRef.value = el ?? null;
+          },
+          onKeydown: onListKeyDown,
+          onScroll: (e) => {
+            v?.setScroll(e.currentTarget.scrollTop);
+          },
+          style: {
+            listStyle: "none",
+            margin: "0",
+            padding: "var(--iris-padding-sm)",
+            display: "flex",
+            flexDirection: "column",
+            outline: "none",
+            maxHeight: "240px",
+            overflowY: "auto"
+          }
+        },
+        list.length === 0 ? [
+          vue.h(
+            "li",
+            {
+              role: "presentation",
+              "data-iris-list-state": "empty",
+              "aria-live": "polite",
+              style: {
+                listStyle: "none",
+                padding: "12px",
+                textAlign: "center",
+                color: "var(--iris-muted)",
+                fontSize: "var(--iris-font-size-md, 14px)"
+              }
+            },
+            t("list.empty")
+          )
+        ] : [
+          vue.h("li", {
+            role: "presentation",
+            "aria-hidden": "true",
+            "data-iris-select-spacer": "",
+            "data-iris-select-spacer-type": "top",
+            style: { height: `${vstate.value.offsetBefore}px` }
+          }),
+          ...vstate.value.items.map((item) => {
+            const opt = list[item.index];
+            if (!opt) return null;
+            const active = item.index === activeIndex.value;
+            const selected = props.multiple ? selectedValues.value.includes(opt.value) : opt.value === currentValue.value;
+            return vue.h(
+              "li",
+              {
+                key: String(opt.value ?? item.index),
+                role: "option",
+                tabindex: active ? 0 : -1,
+                "aria-selected": selected ? "true" : "false",
+                "aria-disabled": opt.disabled ? "true" : void 0,
+                "aria-setsize": list.length,
+                "aria-posinset": item.index + 1,
+                "data-iris-list-index": item.index,
+                "data-iris-list-item": "",
+                "data-state": selected ? "selected" : active ? "active" : "idle",
+                onClick: opt.disabled ? void 0 : () => {
+                  activeIndex.value = item.index;
+                  onSelect(opt);
+                },
+                onFocus: () => {
+                  activeIndex.value = item.index;
+                },
+                onMouseenter: () => {
+                  activeIndex.value = item.index;
+                },
+                style: optionStyle(selected, active, !!opt.disabled)
+              },
+              [
+                vue.h(
+                  "span",
+                  { style: { flex: "1", minWidth: "0" } },
+                  opt.label ?? String(opt.value)
+                ),
+                selected ? check() : null
+              ]
+            );
+          }),
+          vue.h("li", {
+            role: "presentation",
+            "aria-hidden": "true",
+            "data-iris-select-spacer": "",
+            "data-iris-select-spacer-type": "bottom",
+            style: {
+              height: `${vstate.value.totalSize - vstate.value.offsetBefore - vstate.value.items.length * ROW_HEIGHT3}px`
+            }
+          })
+        ]
+      );
+    };
     return () => vue.h(
       IrisPopover,
       {
         open: open.value,
         placement: props.placement,
-        "onUpdate:open": (v) => open.value = v
+        "onUpdate:open": (v2) => open.value = v2
       },
       {
         default: () => [
@@ -6660,7 +7415,7 @@ var IrisSelect = vue.defineComponent({
               style: { padding: "var(--iris-padding-sm)", minWidth: "180px" },
               ...props.teleport !== void 0 ? { teleport: props.teleport } : {}
             },
-            () => vue.h(IrisList, {
+            () => props.virtual ? renderVirtualListbox() : vue.h(IrisList, {
               items: props.items,
               modelValue: currentValue.value,
               onSelect,
@@ -6765,7 +7520,7 @@ function badgeStyle(variant, tone, size) {
     fontWeight: "500",
     lineHeight: "1",
     whiteSpace: "nowrap",
-    fontSize: size === "sm" ? "11px" : "12px",
+    fontSize: size === "sm" ? "var(--iris-font-size-xs, 12px)" : "12px",
     padding: size === "sm" ? "2px 6px" : "3px 8px"
   };
   switch (variant) {
@@ -6773,7 +7528,7 @@ function badgeStyle(variant, tone, size) {
       return {
         ...base,
         background: v,
-        color: "var(--iris-primary-foreground, #fff)",
+        color: tone === "warning" ? "var(--iris-warning-foreground, #451a03)" : tone === "primary" ? "var(--iris-primary-foreground, #fff)" : tone === "success" ? "var(--iris-success-foreground, #0f172a)" : tone === "danger" ? "var(--iris-danger-foreground, #0f172a)" : "var(--iris-foreground, #0f172a)",
         border: "1px solid transparent"
       };
     case "outline":
@@ -6926,22 +7681,22 @@ var CSS4 = `
   }
 }
 `.trim();
-var installed4 = false;
+var installed5 = false;
 function installSpinnerStyles() {
-  if (installed4) return;
+  if (installed5) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__SPINNER_STYLE_ID)) {
-    installed4 = true;
+    installed5 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __SPINNER_STYLE_ID;
   el.textContent = CSS4;
   document.head.appendChild(el);
-  installed4 = true;
+  installed5 = true;
 }
 function __resetSpinnerStyles() {
-  installed4 = false;
+  installed5 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__SPINNER_STYLE_ID)?.remove();
   }
@@ -7016,7 +7771,7 @@ var IrisSpinner = vue.defineComponent({
                 width: "1px",
                 height: "1px",
                 padding: "0",
-                margin: "-1px",
+                margin: "calc(-1px)",
                 overflow: "hidden",
                 clip: "rect(0,0,0,0)",
                 whiteSpace: "nowrap",
@@ -7073,22 +7828,22 @@ var CSS5 = `
   }
 }
 `.trim();
-var installed5 = false;
+var installed6 = false;
 function installSkeletonStyles() {
-  if (installed5) return;
+  if (installed6) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__SKELETON_STYLE_ID)) {
-    installed5 = true;
+    installed6 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __SKELETON_STYLE_ID;
   el.textContent = CSS5;
   document.head.appendChild(el);
-  installed5 = true;
+  installed6 = true;
 }
 function __resetSkeletonStyles() {
-  installed5 = false;
+  installed6 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__SKELETON_STYLE_ID)?.remove();
   }
@@ -7122,8 +7877,8 @@ var IrisSkeleton = vue.defineComponent({
     vue.onMounted(installSkeletonStyles);
     const style = vue.computed(() => {
       const w = props.width !== void 0 ? toCss(props.width) : defaultWidth(props.shape);
-      const h123 = props.height !== void 0 ? toCss(props.height) : defaultHeight(props.shape, props.width);
-      return { width: w, height: h123 };
+      const h124 = props.height !== void 0 ? toCss(props.height) : defaultHeight(props.shape, props.width);
+      return { width: w, height: h124 };
     });
     return () => vue.h("div", {
       ...attrs,
@@ -7173,22 +7928,22 @@ var CSS6 = `
   }
 }
 `.trim();
-var installed6 = false;
+var installed7 = false;
 function installProgressStyles() {
-  if (installed6) return;
+  if (installed7) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__PROGRESS_STYLE_ID)) {
-    installed6 = true;
+    installed7 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __PROGRESS_STYLE_ID;
   el.textContent = CSS6;
   document.head.appendChild(el);
-  installed6 = true;
+  installed7 = true;
 }
 function __resetProgressStyles() {
-  installed6 = false;
+  installed7 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__PROGRESS_STYLE_ID)?.remove();
   }
@@ -7254,7 +8009,7 @@ var IrisProgress = vue.defineComponent({
   }
 });
 var TONE_TO_VAR3 = {
-  info: "--iris-primary",
+  info: "--iris-info",
   success: "--iris-success",
   warning: "--iris-warning",
   danger: "--iris-danger"
@@ -7346,7 +8101,7 @@ var IrisAlert = vue.defineComponent({
                 border: "none",
                 cursor: "pointer",
                 color: "var(--iris-muted)",
-                fontSize: "16px",
+                fontSize: "var(--iris-font-size-lg, 16px)",
                 padding: "0",
                 lineHeight: "1",
                 flexShrink: "0"
@@ -7360,7 +8115,7 @@ var IrisAlert = vue.defineComponent({
   }
 });
 var TONE_TO_VAR4 = {
-  info: "--iris-primary",
+  info: "--iris-info",
   success: "--iris-success",
   warning: "--iris-warning",
   danger: "--iris-danger",
@@ -7462,8 +8217,8 @@ var IrisBanner = vue.defineComponent({
                 border: "none",
                 cursor: "pointer",
                 color: "var(--iris-muted)",
-                fontSize: "16px",
-                padding: "0 4px",
+                fontSize: "var(--iris-font-size-lg, 16px)",
+                padding: "0 var(--iris-space-xxs, 4px)",
                 lineHeight: "1",
                 flexShrink: "0"
               }
@@ -7629,7 +8384,7 @@ var IrisSlider = vue.defineComponent({
         borderRadius: "50%",
         background: "var(--iris-background)",
         border: "2px solid var(--iris-primary)",
-        boxShadow: dragging.value ? "0 0 0 4px rgba(99, 102, 241, 0.18)" : "0 1px 2px rgba(0,0,0,.15)",
+        boxShadow: dragging.value ? "0 0 0 4px color-mix(in srgb, var(--iris-primary) 18%, transparent)" : "0 1px 2px rgba(0,0,0,.15)",
         cursor: props.disabled ? "not-allowed" : "grab",
         transition: "box-shadow 120ms ease",
         touchAction: "none",
@@ -7824,11 +8579,27 @@ var IrisPagination = vue.defineComponent({
     );
   }
 });
+var STYLE_ID3 = "iris-card-styles";
+var installed8 = false;
+function installCardStyles() {
+  if (installed8 || typeof document === "undefined") return;
+  installed8 = true;
+  if (document.getElementById(STYLE_ID3)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID3;
+  style.textContent = `
+[data-iris-card-hover="true"]:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--iris-shadow-lg);
+}
+`;
+  document.head.appendChild(style);
+}
 var PADDING_MAP = {
   none: "0",
   sm: "12px",
-  md: "var(--iris-padding-md, 16px)",
-  lg: "24px"
+  md: "var(--iris-padding-lg, 20px)",
+  lg: "var(--iris-space-xl, 24px)"
 };
 var IrisCard = vue.defineComponent({
   name: "IrisCard",
@@ -7839,6 +8610,7 @@ var IrisCard = vue.defineComponent({
     hover: { type: Boolean, default: false }
   },
   setup(props, { slots, attrs }) {
+    installCardStyles();
     const containerStyle = vue.computed(() => {
       const base = {
         display: "flex",
@@ -7851,7 +8623,7 @@ var IrisCard = vue.defineComponent({
       };
       switch (props.variant) {
         case "elevated":
-          return { ...base, boxShadow: "0 1px 2px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.06)" };
+          return { ...base, boxShadow: "var(--iris-shadow-md)" };
         case "outline":
           return { ...base, border: "1px solid var(--iris-border)" };
         case "subtle":
@@ -7976,9 +8748,9 @@ var IrisDivider = vue.defineComponent({
             gap: "8px",
             margin: `${SPACING_MAP[props.spacing]} 0`,
             color: "var(--iris-muted)",
-            fontSize: "12px",
+            fontSize: "var(--iris-font-size-xs, 12px)",
             textTransform: "uppercase",
-            letterSpacing: "0.04em",
+            letterSpacing: "var(--iris-letter-spacing-wide, 0.04em)",
             ...attrs.style ?? {}
           }
         },
@@ -8034,7 +8806,19 @@ var IrisEmptyState = vue.defineComponent({
             "div",
             {
               "data-iris-empty-state-icon": "",
-              style: { color: "var(--iris-muted)", fontSize: "32px", lineHeight: "1" }
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "48px",
+                height: "48px",
+                borderRadius: "var(--iris-radius-lg, 12px)",
+                background: "var(--iris-surface)",
+                color: "var(--iris-muted)",
+                opacity: "0.9",
+                fontSize: "var(--iris-font-size-2xl, 20px)",
+                lineHeight: "1"
+              }
             },
             icon
           ) : null,
@@ -8042,7 +8826,7 @@ var IrisEmptyState = vue.defineComponent({
             "div",
             {
               "data-iris-empty-state-title": "",
-              style: { fontWeight: "600", fontSize: "16px" }
+              style: { fontWeight: "600", fontSize: "var(--iris-font-size-lg, 16px)" }
             },
             titleNode
           ) : null,
@@ -8050,7 +8834,11 @@ var IrisEmptyState = vue.defineComponent({
             "div",
             {
               "data-iris-empty-state-description": "",
-              style: { color: "var(--iris-muted)", fontSize: "14px", maxWidth: "380px" }
+              style: {
+                color: "var(--iris-muted)",
+                fontSize: "var(--iris-font-size-md, 14px)",
+                maxWidth: "380px"
+              }
             },
             descNode
           ) : null,
@@ -8072,7 +8860,7 @@ function chipStyle(variant, tone, size, clickable, disabled) {
   const base = {
     display: "inline-flex",
     alignItems: "center",
-    gap: "6px",
+    gap: "var(--iris-space-xs, 8px)",
     borderRadius: "9999px",
     fontFamily: "var(--iris-font-family, inherit)",
     fontWeight: "500",
@@ -8173,8 +8961,8 @@ var IrisChip = vue.defineComponent({
               cursor: props.disabled ? "not-allowed" : "pointer",
               color: "inherit",
               padding: "0",
-              marginInlineStart: "2px",
-              fontSize: "12px",
+              marginInlineStart: "var(--iris-space-xxs, 4px)",
+              fontSize: "var(--iris-font-size-xs, 12px)",
               lineHeight: "1",
               flexShrink: "0",
               opacity: "0.7"
@@ -8563,7 +9351,7 @@ var IrisStepperStep = vue.defineComponent({
             background: s === "completed" ? color : "var(--iris-background)",
             color: s === "completed" ? "var(--iris-primary-foreground, #fff)" : color,
             border: `2px solid ${color}`,
-            fontSize: "13px",
+            fontSize: "var(--iris-font-size-sm, 13px)",
             fontWeight: "600",
             lineHeight: "1",
             transition: "background-color 120ms ease, color 120ms ease, border-color 120ms ease"
@@ -8576,7 +9364,7 @@ var IrisStepperStep = vue.defineComponent({
         {
           "data-iris-stepper-title": "",
           style: {
-            fontSize: "13px",
+            fontSize: "var(--iris-font-size-sm, 13px)",
             fontWeight: s === "active" ? "600" : "500",
             color: s === "pending" ? "var(--iris-muted)" : "var(--iris-foreground)"
           }
@@ -8587,7 +9375,7 @@ var IrisStepperStep = vue.defineComponent({
         "div",
         {
           "data-iris-stepper-description": "",
-          style: { fontSize: "12px", color: "var(--iris-muted)" }
+          style: { fontSize: "var(--iris-font-size-xs, 12px)", color: "var(--iris-muted)" }
         },
         slots.description?.() ?? props.description
       ) : null;
@@ -8772,7 +9560,7 @@ var IrisToggleGroupItem = vue.defineComponent({
             display: "inline-flex",
             alignItems: "center",
             justifyContent: "center",
-            gap: "6px",
+            gap: "var(--iris-space-xs, 8px)",
             padding: SIZE_PADDING[size],
             fontSize: SIZE_FONT[size],
             fontFamily: "inherit",
@@ -8894,8 +9682,14 @@ var IrisToggleGroup = vue.defineComponent({
   }
 });
 var SIZE_MAP6 = {
-  sm: { fontSize: "10px", padding: "2px 5px" },
-  md: { fontSize: "12px", padding: "3px 6px" }
+  sm: {
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)"
+  },
+  md: {
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)"
+  }
 };
 var IrisKbd = vue.defineComponent({
   name: "IrisKbd",
@@ -8916,7 +9710,7 @@ var IrisKbd = vue.defineComponent({
     const baseStyle = {
       display: "inline-flex",
       alignItems: "center",
-      gap: "3px",
+      gap: "var(--iris-space-xxs, 4px)",
       fontFamily: "var(--iris-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)",
       fontSize: SIZE_MAP6[props.size].fontSize,
       verticalAlign: "middle"
@@ -9695,11 +10489,16 @@ var IrisTable = vue.defineComponent({
     },
     data: {
       type: Array,
-      required: true
+      required: false,
+      default: void 0
     },
     rowKey: { type: String, default: "id" },
     ...tableControlProps,
     striped: { type: Boolean, default: false },
+    editConfig: {
+      type: Object,
+      default: void 0
+    },
     bordered: { type: Boolean, default: true },
     /** Enable per-column resize handles. Combine with `v-model:columnWidths` for persistence. */
     resizableColumns: { type: Boolean, default: false },
@@ -9717,6 +10516,7 @@ var IrisTable = vue.defineComponent({
     loading: { type: Boolean, default: false },
     /** Show the error state instead of rows (takes precedence over loading). */
     error: { type: Boolean, default: false },
+    onRetry: { type: Function, default: void 0 },
     /** Render only the horizontally-visible columns (+ pinned + overscan) for wide tables. */
     columnVirtualization: { type: Boolean, default: false },
     /**
@@ -9784,6 +10584,19 @@ var IrisTable = vue.defineComponent({
     expandedRowsChange: (_keys) => true
   },
   setup(props, { slots, attrs, emit }) {
+    if (typeof document !== "undefined" && !document.getElementById("iris-table-row-styles")) {
+      const style = document.createElement("style");
+      style.id = "iris-table-row-styles";
+      style.textContent = `
+[data-iris-table] [role="row"]:hover {
+  --iris-cell-bg: var(--iris-surface-hover);
+}
+[data-iris-table-row-selected="true"] {
+  --iris-cell-bg: var(--iris-surface-selected);
+}
+`;
+      document.head.appendChild(style);
+    }
     const { t } = useI18n();
     const grouped = vue.computed(() => props.columns.some((c) => c.children && c.children.length > 0));
     const leafColumns = vue.computed(
@@ -9968,6 +10781,16 @@ var IrisTable = vue.defineComponent({
       const oldValue = getCellValue2(row, column);
       const draft = editingDraft.value;
       const newValue = column.editor === "number" ? draft === "" || Number.isNaN(Number(draft)) ? oldValue : Number(draft) : draft;
+      if (column.editRules && column.editRules.length > 0) {
+        core.validateEditRulesAsync(column.editRules, draft, row).then((r) => {
+          if (!r.valid) {
+            editError.value = r.messages[0] ?? null;
+            return;
+          }
+          finishCommit(row, column, rowIndex, oldValue, newValue);
+        });
+        return;
+      }
       if (column.validate) {
         const error = column.validate(newValue, row);
         if (error) {
@@ -9975,6 +10798,14 @@ var IrisTable = vue.defineComponent({
           return;
         }
       }
+      finishCommit(row, column, rowIndex, oldValue, newValue);
+      editError.value = null;
+      editingCellId.value = null;
+      if (newValue !== oldValue) {
+        emit("cellEdit", { row, column, oldValue, newValue, rowIndex });
+      }
+    };
+    const finishCommit = (row, column, rowIndex, oldValue, newValue) => {
       editError.value = null;
       editingCellId.value = null;
       if (newValue !== oldValue) {
@@ -10021,9 +10852,9 @@ var IrisTable = vue.defineComponent({
           style: {
             display: "inline-flex",
             flexDirection: "column",
-            marginInlineStart: "4px",
+            marginInlineStart: "var(--iris-space-xxs, 4px)",
             lineHeight: "0.6",
-            fontSize: "8px",
+            fontSize: "var(--iris-font-size-xs, 12px)",
             color
           }
         },
@@ -10234,18 +11065,33 @@ var IrisTable = vue.defineComponent({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  padding: "8px",
+                  padding: "8px 12px",
                   background: "var(--iris-surface)",
                   borderBottom: "1px solid var(--iris-border)"
                 }
               },
               props.selectable === "multi" ? [
-                vue.h(IrisCheckbox, {
-                  modelValue: allSelected.value ? true : someSelected.value ? "indeterminate" : false,
-                  size: "sm",
-                  ariaLabel: t("table.selectAll"),
-                  "onUpdate:modelValue": toggleAll
-                })
+                [
+                  vue.h(IrisCheckbox, {
+                    modelValue: allSelected.value ? true : someSelected.value ? "indeterminate" : false,
+                    size: "sm",
+                    ariaLabel: t("table.selectAll"),
+                    "onUpdate:modelValue": toggleAll
+                  }),
+                  props.selection && props.selection.length > 0 ? vue.h(
+                    "span",
+                    {
+                      "data-iris-table-selected-count": "",
+                      style: {
+                        marginInlineStart: "var(--iris-space-xs, 8px)",
+                        fontSize: "var(--iris-font-size-sm, 13px)",
+                        color: "var(--iris-muted)",
+                        whiteSpace: "nowrap"
+                      }
+                    },
+                    t("table.selectedCount", { count: String(props.selection.length) })
+                  ) : null
+                ]
               ] : ""
             )
           );
@@ -10281,7 +11127,7 @@ var IrisTable = vue.defineComponent({
                     background: "var(--iris-surface)",
                     borderBottom: "1px solid var(--iris-border)",
                     fontWeight: "600",
-                    fontSize: "13px",
+                    fontSize: "var(--iris-font-size-md, 14px)",
                     color: "var(--iris-foreground)",
                     whiteSpace: "nowrap",
                     overflow: "hidden",
@@ -10338,7 +11184,7 @@ var IrisTable = vue.defineComponent({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                padding: "8px",
+                padding: "8px 12px",
                 background: "var(--iris-surface)",
                 borderBottom: "1px solid var(--iris-border)"
               }
@@ -10417,7 +11263,7 @@ var IrisTable = vue.defineComponent({
                 background: "var(--iris-surface)",
                 borderBottom: "1px solid var(--iris-border)",
                 fontWeight: "600",
-                fontSize: "13px",
+                fontSize: "var(--iris-font-size-md, 14px)",
                 color: "var(--iris-foreground)",
                 whiteSpace: "nowrap",
                 overflow: "hidden",
@@ -10461,7 +11307,7 @@ var IrisTable = vue.defineComponent({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  padding: "8px",
+                  padding: "8px 12px",
                   borderBottom: "1px solid var(--iris-border)"
                 }
               },
@@ -10504,7 +11350,7 @@ var IrisTable = vue.defineComponent({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  padding: "8px",
+                  padding: "8px 12px",
                   borderBottom: "1px solid var(--iris-border)"
                 }
               },
@@ -10558,12 +11404,12 @@ var IrisTable = vue.defineComponent({
                 width: "100%",
                 border: `1px solid ${error ? "var(--iris-danger)" : "var(--iris-primary)"}`,
                 borderRadius: "var(--iris-radius-sm)",
-                padding: "4px 6px",
+                padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
                 font: "inherit",
                 background: "var(--iris-background)",
                 color: "var(--iris-foreground)",
                 outline: "none",
-                boxShadow: "0 0 0 3px rgba(99, 102, 241, 0.18)"
+                boxShadow: "0 0 0 3px color-mix(in srgb, var(--iris-primary) 18%, transparent)"
               }
             });
             content = error ? [
@@ -10575,8 +11421,8 @@ var IrisTable = vue.defineComponent({
                   role: "alert",
                   "data-iris-table-editor-error": "",
                   style: {
-                    marginTop: "2px",
-                    fontSize: "12px",
+                    marginTop: "var(--iris-space-xxs, 4px)",
+                    fontSize: "var(--iris-font-size-xs, 12px)",
                     color: "var(--iris-danger)"
                   }
                 },
@@ -10667,13 +11513,15 @@ var IrisTable = vue.defineComponent({
                   }
                 } : {},
                 onDblclick: col.editable ? () => beginEdit(row, col, id) : void 0,
+                onClick: col.editable && props.editConfig?.trigger === "click" ? () => beginEdit(row, col, id) : void 0,
                 style: {
                   display: "flex",
                   alignItems: "center",
                   justifyContent: align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start",
-                  padding: isEditing ? "4px" : "8px var(--iris-padding-md)",
+                  background: "var(--iris-cell-bg, transparent)",
+                  padding: isEditing ? "var(--iris-space-xxs, 4px)" : "var(--iris-space-xs, 8px) var(--iris-padding-md)",
                   borderBottom: "1px solid var(--iris-border)",
-                  fontSize: "14px",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   whiteSpace: "nowrap",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -10707,7 +11555,7 @@ var IrisTable = vue.defineComponent({
             style: {
               display: "grid",
               gridTemplateColumns: gridTemplate.value,
-              background: selected ? "var(--iris-surface-hover)" : props.striped && index % 2 === 1 ? "var(--iris-surface)" : "transparent",
+              background: selected ? "var(--iris-surface-hover)" : "transparent",
               transition: "background-color 120ms ease",
               cursor: "default",
               ...style
@@ -10723,11 +11571,31 @@ var IrisTable = vue.defineComponent({
       };
       let bodyNode;
       if (props.error) {
-        bodyNode = vue.h(
-          "div",
-          { role: "row", "data-iris-table-row": "error", style: stateRowStyle },
-          slots.error ? slots.error() : t("table.error")
-        );
+        bodyNode = vue.h("div", { role: "row", "data-iris-table-row": "error", style: stateRowStyle }, [
+          vue.h(
+            "span",
+            { style: { marginInlineEnd: props.onRetry ? "var(--iris-space-sm, 12px)" : "0px" } },
+            slots.error ? slots.error() : t("table.error")
+          ),
+          props.onRetry ? vue.h(
+            "button",
+            {
+              type: "button",
+              "data-iris-table-retry": "",
+              onClick: props.onRetry,
+              style: {
+                border: "1px solid var(--iris-border)",
+                background: "var(--iris-surface)",
+                color: "var(--iris-foreground)",
+                borderRadius: "var(--iris-radius-sm, 4px)",
+                padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+                fontSize: "var(--iris-font-size-sm, 13px)",
+                cursor: "pointer"
+              }
+            },
+            t("table.retry")
+          ) : null
+        ]);
       } else if (props.loading) {
         bodyNode = vue.h(
           "div",
@@ -10821,7 +11689,7 @@ var IrisTable = vue.defineComponent({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                padding: "8px"
+                padding: "8px 12px"
               }
             })
           );
@@ -10846,8 +11714,8 @@ var IrisTable = vue.defineComponent({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start",
-                  padding: "8px var(--iris-padding-md)",
-                  fontSize: "14px",
+                  padding: "var(--iris-space-xs, 8px) var(--iris-padding-md)",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   whiteSpace: "nowrap",
                   overflow: "hidden",
                   textOverflow: "ellipsis",
@@ -10898,6 +11766,7 @@ var IrisTable = vue.defineComponent({
           style: {
             background: "var(--iris-background)",
             color: "var(--iris-foreground)",
+            fontSize: "var(--iris-font-size-md, 14px)",
             border: props.bordered ? "1px solid var(--iris-border)" : "none",
             borderRadius: "var(--iris-radius-md)",
             // Column virtualization turns the table into a horizontal scroll container.
@@ -11024,11 +11893,11 @@ var IrisTabs = vue.defineComponent({
 });
 
 // src/primitives/tabs/styles.ts
-var STYLE_ID2 = "iris-tabs-styles";
+var STYLE_ID4 = "iris-tabs-styles";
 var CSS7 = `
 :where(.iris-tabs-list) {
   display: flex;
-  gap: 2px;
+  gap: var(--iris-space-xxs, 4px);
 }
 :where(.iris-tabs-list[data-orientation="horizontal"]) {
   flex-direction: row;
@@ -11039,8 +11908,8 @@ var CSS7 = `
   border-inline-end: 1px solid var(--iris-border);
 }
 :where(.iris-tabs-trigger) {
-  padding: 8px var(--iris-padding-md);
-  font-size: 14px;
+  padding: var(--iris-space-xs, 8px) var(--iris-padding-md);
+  font-size: var(--iris-font-size-md, 14px);
   font-weight: 500;
   font-family: inherit;
   cursor: pointer;
@@ -11052,11 +11921,11 @@ var CSS7 = `
   transition: color 120ms ease, border-color 120ms ease;
 }
 :where(.iris-tabs-trigger[data-orientation="horizontal"]) {
-  margin-bottom: -1px;
+  margin-bottom: calc(-1px);
   border-bottom: 2px solid transparent;
 }
 :where(.iris-tabs-trigger[data-orientation="vertical"]) {
-  margin-inline-end: -1px;
+  margin-inline-end: calc(-1px);
   border-inline-end: 2px solid transparent;
 }
 :where(.iris-tabs-trigger[data-state="active"]) {
@@ -11077,19 +11946,19 @@ var CSS7 = `
   outline-offset: 2px;
 }
 `.trim();
-var installed7 = false;
+var installed9 = false;
 function installTabsStyles() {
-  if (installed7) return;
+  if (installed9) return;
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID2)) {
-    installed7 = true;
+  if (document.getElementById(STYLE_ID4)) {
+    installed9 = true;
     return;
   }
   const style = document.createElement("style");
-  style.id = STYLE_ID2;
+  style.id = STYLE_ID4;
   style.textContent = CSS7;
   document.head.appendChild(style);
-  installed7 = true;
+  installed9 = true;
 }
 
 // src/primitives/tabs/TabsList.ts
@@ -11290,6 +12159,7 @@ var IrisMenu = vue.defineComponent({
       triggerRef: vue.ref(null),
       contentRef: vue.ref(null),
       contentId: vue.useId(),
+      treeId: vue.useId(),
       placement: props.placement,
       offset: props.offset,
       closeRoot
@@ -11377,6 +12247,10 @@ var IrisMenuContent = vue.defineComponent({
     useDismiss({
       enabled: ctx.open,
       exclude: [ctx.triggerRef, innerRef],
+      // B1: nested submenu surfaces (teleported to body) belong to this menu
+      // tree — pointerdown inside them must not dismiss the root. `Element`
+      // (not `HTMLElement`) so SVG icons inside teleported items also match.
+      excludePredicate: (target) => target instanceof Element ? !!target.closest(`[data-iris-menu-tree="${ctx.treeId}"]`) : false,
       onDismiss: () => ctx.setOpen(false)
     });
     vue.watch(ctx.open, async (open) => {
@@ -11439,12 +12313,12 @@ var IrisMenuContent = 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: "180px",
             outline: "none",
             zIndex: "1000",
@@ -11507,14 +12381,14 @@ var IrisMenuItem = 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 ?? {}
         }
@@ -11540,7 +12414,8 @@ var IrisMenuSeparator = vue.defineComponent({
     });
   }
 });
-var HOVER_OPEN_DELAY = 100;
+var HOVER_OPEN_DELAY2 = 100;
+var HOVER_CLOSE_DELAY2 = 150;
 var IrisMenuSub = vue.defineComponent({
   name: "IrisMenuSub",
   inheritAttrs: false,
@@ -11560,20 +12435,42 @@ var IrisMenuSub = vue.defineComponent({
     const triggerRef = vue.ref(null);
     const contentRef = vue.ref(null);
     let openTimer = null;
+    let closeTimer = null;
+    let focusOnOpen = false;
+    let keyboardManaged = false;
     const clearTimer = () => {
       if (openTimer) {
         clearTimeout(openTimer);
         openTimer = null;
       }
     };
+    const clearCloseTimer = () => {
+      if (closeTimer) {
+        clearTimeout(closeTimer);
+        closeTimer = null;
+      }
+    };
     const scheduleOpen = () => {
       clearTimer();
+      clearCloseTimer();
       openTimer = setTimeout(() => {
         open.value = true;
         openTimer = null;
-      }, HOVER_OPEN_DELAY);
+      }, HOVER_OPEN_DELAY2);
     };
-    vue.onScopeDispose(clearTimer);
+    const scheduleClose = () => {
+      clearTimer();
+      clearCloseTimer();
+      closeTimer = setTimeout(() => {
+        closeTimer = null;
+        keyboardManaged = false;
+        open.value = false;
+      }, HOVER_CLOSE_DELAY2);
+    };
+    vue.onScopeDispose(() => {
+      clearTimer();
+      clearCloseTimer();
+    });
     const { floatingStyles } = useFloating({
       anchor: triggerRef,
       floating: contentRef,
@@ -11587,32 +12484,50 @@ var IrisMenuSub = vue.defineComponent({
       triggerRef,
       contentRef,
       contentId: "",
+      treeId: parentCtx.treeId,
       placement: "right-start",
       offset: 0,
       closeRoot: parentCtx.closeRoot
     });
     const onTriggerPointerEnter = () => scheduleOpen();
-    const onTriggerPointerLeave = () => clearTimer();
+    const onTriggerPointerLeave = () => scheduleClose();
     const onTriggerClick = (event) => {
       if (event.defaultPrevented) return;
       clearTimer();
+      clearCloseTimer();
+      keyboardManaged = false;
       open.value = !open.value;
     };
     const onTriggerKeyDown = (event) => {
-      if (event.key === "ArrowRight" || event.key === "Enter" || event.key === " ") {
+      if (event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
         event.preventDefault();
-        open.value = true;
+        event.stopPropagation();
+        focusOnOpen = true;
+        keyboardManaged = true;
+        if (open.value) {
+          focusOnOpen = false;
+          focusFirstItem();
+        } else {
+          open.value = true;
+        }
       } else if (event.key === "ArrowLeft") {
         event.preventDefault();
+        event.stopPropagation();
         open.value = false;
       }
     };
-    vue.watch(open, async (next) => {
+    const focusFirstItem = () => {
+      void vue.nextTick(() => {
+        contentRef.value?.querySelector('[role="menuitem"]')?.focus();
+      });
+    };
+    vue.watch(open, (next) => {
       if (next) {
-        await new Promise((r) => setTimeout(r, 0));
-        const first = contentRef.value?.querySelector('[role="menuitem"]');
-        first?.focus();
-      } else {
+        if (!focusOnOpen) return;
+        focusOnOpen = false;
+        focusFirstItem();
+      } else if (keyboardManaged) {
+        keyboardManaged = false;
         triggerRef.value?.focus?.();
       }
     });
@@ -11658,11 +12573,11 @@ var IrisMenuSub = vue.defineComponent({
             alignItems: "center",
             justifyContent: "space-between",
             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: "pointer",
             outline: "none",
-            fontSize: "14px",
+            fontSize: "var(--iris-font-size-md, 14px)",
             background: open.value ? "var(--iris-surface-hover)" : "transparent"
           }
         },
@@ -11690,17 +12605,24 @@ var IrisMenuSub = vue.defineComponent({
           role: "menu",
           tabindex: -1,
           "data-iris-menu-sub": "",
+          // B1: tag the surface with the root menu's tree id so the root
+          // dismiss ignores pointerdown inside teleported submenus.
+          "data-iris-menu-tree": parentCtx.treeId,
           "data-state": "open",
           onKeydown: onContentKeyDown,
-          onPointerenter: clearTimer,
+          onPointerenter: () => {
+            clearTimer();
+            clearCloseTimer();
+          },
+          onPointerleave: scheduleClose,
           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: "180px",
             outline: "none",
             zIndex: "1001"
@@ -11763,14 +12685,14 @@ var VARIANT_BORDER = {
   success: "var(--iris-success)",
   danger: "var(--iris-danger)",
   warning: "var(--iris-warning)",
-  info: "var(--iris-primary)"
+  info: "var(--iris-info)"
 };
 var VARIANT_ACCENT = {
   default: "var(--iris-muted)",
   success: "var(--iris-success)",
   danger: "var(--iris-danger)",
   warning: "var(--iris-warning)",
-  info: "var(--iris-primary)"
+  info: "var(--iris-info)"
 };
 var SWIPE_DISMISS_PX = 80;
 var IrisToastViewport = vue.defineComponent({
@@ -11791,6 +12713,7 @@ var IrisToastViewport = vue.defineComponent({
     max: { type: Number, default: 5 }
   },
   setup(props, { attrs }) {
+    installFloatingAnimations();
     const { t } = useI18n();
     const toasts = vue.ref(getToasts());
     const hovered = vue.ref(false);
@@ -11943,15 +12866,16 @@ var IrisToastViewport = vue.defineComponent({
             display: "flex",
             alignItems: "flex-start",
             gap: "var(--iris-gap-md)",
-            background: "var(--iris-surface)",
+            background: "var(--iris-surface-floating)",
+            animation: ANIM_TOAST,
             color: "var(--iris-foreground)",
             border: `1px solid ${VARIANT_BORDER[toast.variant]}`,
             borderInlineStart: `4px solid ${VARIANT_ACCENT[toast.variant]}`,
             borderRadius: "var(--iris-radius-md)",
             padding: "var(--iris-padding-md)",
-            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: "280px",
-            fontSize: "14px"
+            fontSize: "var(--iris-font-size-md, 14px)"
           }
         },
         [
@@ -11959,7 +12883,13 @@ var IrisToastViewport = vue.defineComponent({
             toast.title && vue.h("div", { style: { fontWeight: "600" } }, toast.title),
             toast.description && vue.h(
               "div",
-              { style: { color: "var(--iris-muted)", fontSize: "13px", marginTop: "2px" } },
+              {
+                style: {
+                  color: "var(--iris-muted)",
+                  fontSize: "var(--iris-font-size-sm, 13px)",
+                  marginTop: "var(--iris-space-xxs, 4px)"
+                }
+              },
               toast.description
             )
           ]),
@@ -11977,8 +12907,8 @@ var IrisToastViewport = vue.defineComponent({
                 color: VARIANT_ACCENT[toast.variant],
                 fontWeight: "600",
                 cursor: "pointer",
-                padding: "4px 8px",
-                fontSize: "13px",
+                padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+                fontSize: "var(--iris-font-size-sm, 13px)",
                 fontFamily: "inherit"
               }
             },
@@ -11994,11 +12924,11 @@ var IrisToastViewport = vue.defineComponent({
                 background: "transparent",
                 border: "none",
                 cursor: "pointer",
-                padding: "4px",
+                padding: "var(--iris-space-xxs, 4px)",
                 color: "var(--iris-muted)",
                 lineHeight: "1",
                 fontFamily: "inherit",
-                fontSize: "16px"
+                fontSize: "var(--iris-font-size-lg, 16px)"
               }
             },
             "\xD7"
@@ -12029,10 +12959,10 @@ var IrisToastViewport = vue.defineComponent({
   }
 });
 var TREE_STATE_STYLE = {
-  padding: "12px",
+  padding: "var(--iris-space-sm, 12px)",
   textAlign: "center",
   color: "var(--iris-muted)",
-  fontSize: "14px"
+  fontSize: "var(--iris-font-size-md, 14px)"
 };
 var IrisTree = vue.defineComponent({
   name: "IrisTree",
@@ -12384,7 +13314,7 @@ var IrisTree = vue.defineComponent({
               background: isSelected ? "var(--iris-primary)" : isActive ? "var(--iris-surface-hover)" : "transparent",
               color: isSelected ? "var(--iris-primary-foreground)" : "var(--iris-foreground)",
               outline: "none",
-              fontSize: "14px"
+              fontSize: "var(--iris-font-size-md, 14px)"
             }
           },
           [chevron, checkbox, vue.h("span", { style: { flex: "1", minWidth: "0" } }, node.label)]
@@ -12405,7 +13335,7 @@ var IrisTree = vue.defineComponent({
         style: {
           display: "flex",
           flexDirection: "column",
-          gap: "2px",
+          gap: "var(--iris-space-xxs, 4px)",
           outline: "none",
           ...attrs.style ?? {}
         }
@@ -12416,7 +13346,7 @@ var IrisTree = vue.defineComponent({
 });
 var VARIANT_COLOR = {
   default: "var(--iris-primary)",
-  success: "var(--iris-success, #16a34a)",
+  success: "var(--iris-success, #10b981)",
   warning: "var(--iris-warning, #f59e0b)",
   danger: "var(--iris-danger)",
   info: "var(--iris-info, #0ea5e9)"
@@ -12500,7 +13430,10 @@ var IrisTimeline = vue.defineComponent({
                   "div",
                   {
                     "data-iris-timeline-time": "",
-                    style: { fontSize: "12px", color: "var(--iris-muted)" }
+                    style: {
+                      fontSize: "var(--iris-font-size-xs, 12px)",
+                      color: "var(--iris-muted)"
+                    }
                   },
                   item.time
                 ) : null,
@@ -12516,7 +13449,10 @@ var IrisTimeline = vue.defineComponent({
                   "div",
                   {
                     "data-iris-timeline-desc": "",
-                    style: { fontSize: "14px", color: "var(--iris-foreground)" }
+                    style: {
+                      fontSize: "var(--iris-font-size-md, 14px)",
+                      color: "var(--iris-foreground)"
+                    }
                   },
                   item.description
                 ) : null
@@ -12543,7 +13479,7 @@ var ARROW_BTN = {
   background: "var(--iris-background)",
   color: "var(--iris-foreground)",
   cursor: "pointer",
-  fontSize: "18px",
+  fontSize: "var(--iris-font-size-xl, 18px)",
   lineHeight: "1"
 };
 function prefersReducedMotion() {
@@ -12725,7 +13661,7 @@ var IrisCarousel = vue.defineComponent({
               style: {
                 display: "flex",
                 justifyContent: "center",
-                gap: "6px",
+                gap: "var(--iris-space-xs, 8px)",
                 marginBlockStart: "8px"
               }
             },
@@ -12771,13 +13707,22 @@ var IrisCarousel = vue.defineComponent({
     };
   }
 });
-var VALUE_FONT = { sm: 20, md: 28, lg: 36 };
+var VALUE_FONT = {
+  sm: "var(--iris-font-size-2xl, 20px)",
+  md: "var(--iris-font-size-3xl, 24px)",
+  lg: "var(--iris-font-size-4xl, 30px)"
+};
 var TREND_COLOR = {
-  up: "var(--iris-success, #16a34a)",
+  up: "var(--iris-success, #10b981)",
   down: "var(--iris-danger)",
   neutral: "var(--iris-muted)"
 };
 var TREND_ARROW = { up: "\u25B2", down: "\u25BC", neutral: "" };
+var TREND_TONE = {
+  success: "var(--iris-success, #10b981)",
+  danger: "var(--iris-danger)",
+  neutral: "var(--iris-muted)"
+};
 var IrisStatistic = vue.defineComponent({
   name: "IrisStatistic",
   inheritAttrs: false,
@@ -12789,6 +13734,7 @@ var IrisStatistic = vue.defineComponent({
     description: { type: [String, Number], default: void 0 },
     trend: { type: String, default: void 0 },
     trendValue: { type: [String, Number], default: void 0 },
+    trendTone: { type: String, default: void 0 },
     size: { type: String, default: "md" }
   },
   setup(props, { attrs }) {
@@ -12811,7 +13757,7 @@ var IrisStatistic = vue.defineComponent({
           "div",
           {
             "data-iris-statistic-label": "",
-            style: { fontSize: "13px", color: "var(--iris-muted)" }
+            style: { fontSize: "var(--iris-font-size-sm, 13px)", color: "var(--iris-muted)" }
           },
           String(props.label)
         ) : null,
@@ -12851,8 +13797,8 @@ var IrisStatistic = vue.defineComponent({
               display: "inline-flex",
               alignItems: "center",
               gap: "4px",
-              fontSize: "13px",
-              color: props.trend ? TREND_COLOR[props.trend] : "var(--iris-muted)"
+              fontSize: "var(--iris-font-size-sm, 13px)",
+              color: props.trend ? props.trendTone ? TREND_TONE[props.trendTone] : TREND_COLOR[props.trend] : "var(--iris-muted)"
             }
           },
           [
@@ -12864,7 +13810,7 @@ var IrisStatistic = vue.defineComponent({
           "div",
           {
             "data-iris-statistic-desc": "",
-            style: { fontSize: "12px", color: "var(--iris-muted)" }
+            style: { fontSize: "var(--iris-font-size-xs, 12px)", color: "var(--iris-muted)" }
           },
           String(props.description)
         ) : null
@@ -12890,7 +13836,7 @@ var IrisDescriptions = vue.defineComponent({
       const pad3 = props.bordered ? "8px 12px" : void 0;
       const labelStyle = {
         margin: "0",
-        fontSize: "13px",
+        fontSize: "var(--iris-font-size-sm, 13px)",
         fontWeight: "500",
         color: "var(--iris-muted)",
         padding: pad3,
@@ -12898,7 +13844,7 @@ var IrisDescriptions = vue.defineComponent({
       };
       const valueStyle = {
         margin: "0",
-        fontSize: "14px",
+        fontSize: "var(--iris-font-size-md, 14px)",
         color: "var(--iris-foreground)",
         padding: pad3
       };
@@ -12990,7 +13936,12 @@ var IrisTransfer = vue.defineComponent({
     titles: { type: Array, default: void 0 },
     /** Show a search box per pane. */
     searchable: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    /**
+     * Opt-in windowed rendering of both pane lists via the core virtualizer
+     * (10k+ options stay smooth). Off by default — the plain path is unchanged.
+     */
+    virtual: { type: Object, default: void 0 }
   },
   emits: {
     "update:modelValue": (_values) => true
@@ -13053,9 +14004,30 @@ var IrisTransfer = vue.defineComponent({
       background: "var(--iris-background)",
       color: "var(--iris-foreground)",
       cursor: "pointer",
-      fontSize: "16px",
+      fontSize: "var(--iris-font-size-lg, 16px)",
       lineHeight: "1"
     };
+    const listStyle = {
+      listStyle: "none",
+      margin: "0",
+      padding: "4px",
+      maxHeight: "200px",
+      overflowY: "auto",
+      flex: "1"
+    };
+    const emptyRow = vue.h(
+      "li",
+      {
+        "data-iris-transfer-empty": "",
+        style: {
+          padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+          color: "var(--iris-muted)",
+          fontSize: "var(--iris-font-size-sm, 13px)",
+          textAlign: "center"
+        }
+      },
+      t("transfer.empty")
+    );
     const renderPane = (side) => {
       const items = (side === "source" ? sourceItems : targetItems).value;
       const model = side === "source" ? sourceModel : targetModel;
@@ -13072,6 +14044,34 @@ var IrisTransfer = vue.defineComponent({
         if (allChecked) model.clear();
         else model.set(selectable.map((o) => o.value));
       };
+      const renderRow = (o, tag) => vue.h(tag, { key: o.value, "data-iris-transfer-item": "", "data-value": o.value }, [
+        vue.h(
+          "label",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+              borderRadius: "var(--iris-radius-sm, 4px)",
+              cursor: o.disabled ? "not-allowed" : "pointer",
+              opacity: o.disabled ? "0.5" : "1",
+              fontSize: "var(--iris-font-size-md, 14px)"
+            }
+          },
+          [
+            vue.h("input", {
+              type: "checkbox",
+              checked: checked.has(o.value),
+              disabled: props.disabled || o.disabled || void 0,
+              onChange: () => toggle(o.value)
+            }),
+            vue.h("span", o.label)
+          ]
+        )
+      ]);
+      const virtualHeight = props.virtual?.height ?? 200;
+      const virtualized = props.virtual !== void 0 && visible.length > 0;
       return vue.h("div", { "data-iris-transfer-pane": "", "data-side": side, style: paneStyle }, [
         vue.h(
           "div",
@@ -13081,10 +14081,10 @@ var IrisTransfer = vue.defineComponent({
               display: "flex",
               alignItems: "center",
               justifyContent: "space-between",
-              gap: "8px",
-              padding: "6px 10px",
+              gap: "var(--iris-space-xs, 8px)",
+              padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
               borderBlockEnd: "1px solid var(--iris-border)",
-              fontSize: "13px",
+              fontSize: "var(--iris-font-size-sm, 13px)",
               fontWeight: "500"
             }
           },
@@ -13092,7 +14092,12 @@ var IrisTransfer = vue.defineComponent({
             vue.h(
               "label",
               {
-                style: { display: "inline-flex", alignItems: "center", gap: "6px", minWidth: "0" }
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "var(--iris-space-xs, 8px)",
+                  minWidth: "0"
+                }
               },
               [
                 vue.h("input", {
@@ -13112,7 +14117,7 @@ var IrisTransfer = vue.defineComponent({
               "span",
               {
                 "data-iris-transfer-count": "",
-                style: { color: "var(--iris-muted)", fontSize: "12px" }
+                style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" }
               },
               `${checkedCount}/${items.length}`
             )
@@ -13129,9 +14134,9 @@ var IrisTransfer = vue.defineComponent({
             queryRef.value = e.target.value;
           },
           style: {
-            margin: "8px",
-            padding: "4px 8px",
-            fontSize: "13px",
+            margin: "var(--iris-space-xs, 8px)",
+            padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+            fontSize: "var(--iris-font-size-sm, 13px)",
             border: "1px solid var(--iris-border)",
             borderRadius: "var(--iris-radius-sm, 4px)",
             background: "var(--iris-background)",
@@ -13139,61 +14144,31 @@ var IrisTransfer = vue.defineComponent({
             outline: "none"
           }
         }) : null,
-        vue.h(
-          "ul",
+        virtualized ? vue.h(
+          IrisVirtualScroll,
           {
+            items: visible,
+            itemHeight: props.virtual.itemHeight,
+            height: virtualHeight,
+            buffer: props.virtual.buffer,
+            keyOf: (o) => String(o.value),
             "data-iris-transfer-list": "",
             style: {
-              listStyle: "none",
-              margin: "0",
-              padding: "4px",
-              maxHeight: "200px",
-              overflowY: "auto",
-              flex: "1"
+              flex: "1",
+              maxHeight: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
+              boxSizing: "content-box"
             }
           },
-          visible.length === 0 ? [
-            vue.h(
-              "li",
-              {
-                "data-iris-transfer-empty": "",
-                style: {
-                  padding: "8px 10px",
-                  color: "var(--iris-muted)",
-                  fontSize: "13px",
-                  textAlign: "center"
-                }
-              },
-              t("transfer.empty")
-            )
-          ] : visible.map(
-            (o) => vue.h("li", { key: o.value, "data-iris-transfer-item": "", "data-value": o.value }, [
-              vue.h(
-                "label",
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    padding: "4px 8px",
-                    borderRadius: "var(--iris-radius-sm, 4px)",
-                    cursor: o.disabled ? "not-allowed" : "pointer",
-                    opacity: o.disabled ? "0.5" : "1",
-                    fontSize: "14px"
-                  }
-                },
-                [
-                  vue.h("input", {
-                    type: "checkbox",
-                    checked: checked.has(o.value),
-                    disabled: props.disabled || o.disabled || void 0,
-                    onChange: () => toggle(o.value)
-                  }),
-                  vue.h("span", o.label)
-                ]
-              )
-            ])
-          )
+          {
+            item: ({ item }) => renderRow(item, "div")
+          }
+        ) : vue.h(
+          "ul",
+          {
+            "data-iris-transfer-list": "",
+            style: listStyle
+          },
+          visible.length === 0 ? [emptyRow] : visible.map((o) => renderRow(o, "li"))
         )
       ]);
     };
@@ -13395,11 +14370,11 @@ var IrisBackTop = vue.defineComponent({
           background: "var(--iris-surface, var(--iris-background))",
           color: "var(--iris-foreground)",
           cursor: "pointer",
-          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          boxShadow: "var(--iris-shadow-md)",
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: "18px",
+          fontSize: "var(--iris-font-size-xl, 18px)",
           ...attrs.style ?? {}
         }
       },
@@ -13494,7 +14469,7 @@ var IrisAffix = vue.defineComponent({
   }
 });
 var STATUS = {
-  success: { color: "var(--iris-success, #16a34a)", glyph: "\u2713" },
+  success: { color: "var(--iris-success, #10b981)", glyph: "\u2713" },
   error: { color: "var(--iris-danger)", glyph: "\u2715" },
   info: { color: "var(--iris-info, #0ea5e9)", glyph: "i" },
   warning: { color: "var(--iris-warning, #f59e0b)", glyph: "!" }
@@ -13523,9 +14498,9 @@ var IrisResult = vue.defineComponent({
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
-              fontSize: "30px",
+              fontSize: "var(--iris-font-size-4xl, 30px)",
               fontWeight: "700",
-              color: "#fff",
+              color: "var(--iris-primary-foreground, #fff)",
               background: s.color,
               marginBlockEnd: "8px"
             }
@@ -13536,7 +14511,11 @@ var IrisResult = vue.defineComponent({
           "div",
           {
             "data-iris-result-title": "",
-            style: { fontSize: "20px", fontWeight: "600", color: "var(--iris-foreground)" }
+            style: {
+              fontSize: "var(--iris-font-size-2xl, 20px)",
+              fontWeight: "600",
+              color: "var(--iris-foreground)"
+            }
           },
           props.title
         ) : null,
@@ -13544,7 +14523,11 @@ var IrisResult = vue.defineComponent({
           "div",
           {
             "data-iris-result-subtitle": "",
-            style: { fontSize: "14px", color: "var(--iris-muted)", maxWidth: "480px" }
+            style: {
+              fontSize: "var(--iris-font-size-md, 14px)",
+              color: "var(--iris-muted)",
+              maxWidth: "480px"
+            }
           },
           props.subtitle
         ) : null,
@@ -13590,9 +14573,21 @@ var IrisResult = vue.defineComponent({
   }
 });
 var SIZE_MAP7 = {
-  sm: { padding: "4px 8px", fontSize: "12px", minHeight: "28px" },
-  md: { padding: "6px 12px", fontSize: "14px", minHeight: "34px" },
-  lg: { padding: "8px 12px", fontSize: "16px", minHeight: "40px" }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    minHeight: "28px"
+  },
+  md: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "34px"
+  },
+  lg: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    minHeight: "40px"
+  }
 };
 function findNode(nodes, value) {
   for (const n of nodes) {
@@ -13695,7 +14690,7 @@ var IrisTreeSelect = vue.defineComponent({
                     background: "transparent",
                     cursor: "pointer",
                     color: "var(--iris-muted)",
-                    fontSize: "10px"
+                    fontSize: "var(--iris-font-size-xs, 12px)"
                   }
                 },
                 isExpanded ? "\u25BE" : "\u25B8"
@@ -13804,7 +14799,10 @@ var IrisTreeSelect = vue.defineComponent({
               ),
               vue.h(
                 "span",
-                { "aria-hidden": "true", style: { color: "var(--iris-muted)", fontSize: "10px" } },
+                {
+                  "aria-hidden": "true",
+                  style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" }
+                },
                 "\u25BE"
               )
             ]
@@ -13828,7 +14826,7 @@ var IrisTreeSelect = vue.defineComponent({
                 background: "var(--iris-background)",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-md, 6px)",
-                boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
+                boxShadow: "var(--iris-shadow-lg)"
               }
             },
             renderNodes(props.options, 0, sz)
@@ -13851,8 +14849,8 @@ function detect(text, caret, prefix) {
 var TEXTAREA_STYLE = {
   boxSizing: "border-box",
   width: "100%",
-  padding: "8px 12px",
-  fontSize: "14px",
+  padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+  fontSize: "var(--iris-font-size-md, 14px)",
   fontFamily: "inherit",
   color: "var(--iris-foreground)",
   background: "var(--iris-background)",
@@ -13875,8 +14873,10 @@ var LIST_STYLE = {
   background: "var(--iris-background)",
   border: "1px solid var(--iris-border)",
   borderRadius: "var(--iris-radius-md, 6px)",
-  boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
+  boxShadow: "var(--iris-shadow-lg)"
 };
+var LISTBOX_MAX_HEIGHT2 = 200;
+var ROW_HEIGHT2 = 32;
 var IrisMentions = vue.defineComponent({
   name: "IrisMentions",
   inheritAttrs: false,
@@ -13889,6 +14889,13 @@ var IrisMentions = vue.defineComponent({
     disabled: { type: Boolean, default: false },
     invalid: { type: Boolean, default: false },
     rows: { type: Number, default: 3 },
+    /**
+     * Opt-in windowed rendering of the suggestion listbox via the core
+     * virtualizer. When true, only the visible window (+ buffer) of options is
+     * rendered; keyboard navigation scrolls the active option into view and
+     * every keystroke re-anchors the window to the top. Default false.
+     */
+    virtual: { type: Boolean, default: false },
     id: { type: String, default: void 0 },
     ariaDescribedby: { type: String, default: void 0 }
   },
@@ -13909,6 +14916,61 @@ var IrisMentions = vue.defineComponent({
       ) : []
     );
     const open = vue.computed(() => active.value !== null && filtered.value.length > 0);
+    const listboxRef = vue.ref(null);
+    const vstate = vue.ref({
+      items: [],
+      offsetBefore: 0,
+      totalSize: 0,
+      startIndex: 0,
+      endIndex: -1
+    });
+    let v = null;
+    let unsub = null;
+    let lastText;
+    let lastActiveIndex = 0;
+    vue.watchEffect(() => {
+      if (!props.virtual) return;
+      if (!v) {
+        v = core.createVirtualizer({
+          count: 0,
+          estimateSize: () => ROW_HEIGHT2,
+          getItemKey: (i) => filtered.value[i]?.value ?? i,
+          viewportSize: LISTBOX_MAX_HEIGHT2,
+          buffer: 4
+        });
+        vstate.value = v.getState();
+        unsub = v.subscribe((s) => {
+          vstate.value = s;
+        });
+      }
+      const list = filtered.value;
+      v.setCount(list.length);
+      const idx = activeIndex.value;
+      if (props.modelValue !== lastText) {
+        lastText = props.modelValue;
+        lastActiveIndex = 0;
+        v.setScroll(0);
+        const el2 = listboxRef.value;
+        if (el2) el2.scrollTop = 0;
+        return;
+      }
+      const el = listboxRef.value;
+      if (el) {
+        const max = Math.max(0, v.totalSize() - LISTBOX_MAX_HEIGHT2);
+        if (el.scrollTop > max) el.scrollTop = max;
+      }
+      if (idx !== lastActiveIndex) {
+        lastActiveIndex = idx;
+        if (idx >= 0 && idx < list.length && el) {
+          const top = el.scrollTop;
+          const start = idx * ROW_HEIGHT2;
+          if (start < top || start + ROW_HEIGHT2 > top + LISTBOX_MAX_HEIGHT2) {
+            el.scrollTop = v.scrollToIndex(idx, start < top ? "start" : "end");
+          }
+        }
+      }
+    });
+    vue.onBeforeUnmount(() => unsub?.());
     const onInput = (e) => {
       const ta = e.target;
       const val = ta.value;
@@ -13959,6 +15021,7 @@ var IrisMentions = vue.defineComponent({
     };
     return () => {
       const activeId = open.value ? `${reactId}-opt-${activeIndex.value}` : void 0;
+      const list = filtered.value;
       return vue.h(
         "div",
         {
@@ -14002,9 +15065,63 @@ var IrisMentions = vue.defineComponent({
               id: listboxId,
               role: "listbox",
               "data-iris-mentions-listbox": "",
+              ref: (el) => {
+                listboxRef.value = el ?? null;
+              },
+              onScroll: (e) => {
+                v?.setScroll(e.currentTarget.scrollTop);
+              },
               style: LIST_STYLE
             },
-            filtered.value.map(
+            props.virtual && v && vstate.value.items.length > 0 ? [
+              vue.h("li", {
+                role: "presentation",
+                "aria-hidden": "true",
+                "data-iris-mentions-spacer": "",
+                "data-iris-mentions-spacer-type": "top",
+                style: { height: `${vstate.value.offsetBefore}px` }
+              }),
+              ...vstate.value.items.map((item) => {
+                const opt = list[item.index];
+                if (!opt) return null;
+                const isActive = item.index === activeIndex.value;
+                return vue.h(
+                  "li",
+                  {
+                    key: opt.value,
+                    id: `${reactId}-opt-${item.index}`,
+                    role: "option",
+                    "aria-selected": isActive ? "true" : "false",
+                    "aria-setsize": list.length,
+                    "aria-posinset": item.index + 1,
+                    "data-iris-mentions-option": "",
+                    "data-value": opt.value,
+                    onMousedown: (e) => e.preventDefault(),
+                    onMouseenter: () => {
+                      activeIndex.value = item.index;
+                    },
+                    onClick: () => insert(opt),
+                    style: {
+                      padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+                      fontSize: "var(--iris-font-size-md, 14px)",
+                      borderRadius: "var(--iris-radius-sm, 4px)",
+                      cursor: "pointer",
+                      background: isActive ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
+                    }
+                  },
+                  opt.label
+                );
+              }),
+              vue.h("li", {
+                role: "presentation",
+                "aria-hidden": "true",
+                "data-iris-mentions-spacer": "",
+                "data-iris-mentions-spacer-type": "bottom",
+                style: {
+                  height: `${vstate.value.totalSize - vstate.value.offsetBefore - vstate.value.items.length * ROW_HEIGHT2}px`
+                }
+              })
+            ] : list.map(
               (opt, i) => vue.h(
                 "li",
                 {
@@ -14020,8 +15137,8 @@ var IrisMentions = vue.defineComponent({
                   },
                   onClick: () => insert(opt),
                   style: {
-                    padding: "6px 10px",
-                    fontSize: "14px",
+                    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+                    fontSize: "var(--iris-font-size-md, 14px)",
                     borderRadius: "var(--iris-radius-sm, 4px)",
                     cursor: "pointer",
                     background: i === activeIndex.value ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
@@ -14037,10 +15154,25 @@ var IrisMentions = vue.defineComponent({
   }
 });
 var SIZE_MAP8 = {
-  sm: { padding: "4px 8px", fontSize: "12px", minHeight: "28px" },
-  md: { padding: "6px 12px", fontSize: "14px", minHeight: "34px" },
-  lg: { padding: "8px 12px", fontSize: "16px", minHeight: "40px" }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    minHeight: "28px"
+  },
+  md: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "34px"
+  },
+  lg: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    minHeight: "40px"
+  }
 };
+var CASCADER_COLUMN_VIEWPORT = 240;
+var CASCADER_ROW_HEIGHT = { sm: 28, md: 34, lg: 40 };
+var CASCADER_VIRTUAL_BUFFER = 4;
 function pathLabels(options, path) {
   const labels = [];
   let level = options;
@@ -14074,6 +15206,7 @@ var IrisCascader = vue.defineComponent({
     invalid: { type: Boolean, default: false },
     separator: { type: String, default: " / " },
     size: { type: String, default: "md" },
+    virtual: { type: Boolean, default: false },
     id: { type: String, default: void 0 },
     ariaDescribedby: { type: String, default: void 0 }
   },
@@ -14112,6 +15245,59 @@ var IrisCascader = vue.defineComponent({
       const columns = buildColumns(props.options, activePath.value);
       const labels = pathLabels(props.options, props.modelValue);
       const borderColor = props.invalid ? "var(--iris-danger)" : focused.value || open.value ? "var(--iris-primary)" : "var(--iris-border)";
+      const renderOption = (ci, node) => {
+        const isActive = activePath.value[ci] === node.value;
+        const hasChildren = !!node.children && node.children.length > 0;
+        return vue.h(
+          "li",
+          {
+            key: node.value,
+            role: "option",
+            "aria-selected": isActive ? "true" : "false",
+            "aria-disabled": node.disabled ? "true" : void 0,
+            "data-iris-cascader-option": "",
+            "data-value": node.value,
+            onClick: () => selectOption(ci, node),
+            onMouseenter: () => {
+              hoveredValue.value = node.value;
+            },
+            onMouseleave: () => {
+              if (hoveredValue.value === node.value) hoveredValue.value = null;
+            },
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "8px",
+              padding: "var(--iris-padding-sm, 6px) var(--iris-space-sm, 12px)",
+              fontSize: sz.fontSize,
+              borderRadius: "var(--iris-radius-sm, 4px)",
+              cursor: node.disabled ? "not-allowed" : "pointer",
+              color: node.disabled ? "var(--iris-muted)" : "var(--iris-foreground)",
+              background: isActive || hoveredValue.value === node.value ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent",
+              ...props.virtual ? { height: "100%", boxSizing: "border-box" } : null
+            }
+          },
+          [
+            vue.h("span", node.label),
+            hasChildren ? vue.h(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  color: "var(--iris-muted)",
+                  fontSize: "var(--iris-font-size-xs, 12px)"
+                }
+              },
+              "\u203A"
+            ) : null
+          ]
+        );
+      };
+      const columnStyle = (ci) => ({
+        minWidth: "140px",
+        borderInlineStart: ci > 0 ? "1px solid var(--iris-border)" : void 0
+      });
       return vue.h(
         "div",
         {
@@ -14185,7 +15371,10 @@ var IrisCascader = vue.defineComponent({
               ),
               vue.h(
                 "span",
-                { "aria-hidden": "true", style: { color: "var(--iris-muted)", fontSize: "10px" } },
+                {
+                  "aria-hidden": "true",
+                  style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" }
+                },
                 "\u25BE"
               )
             ]
@@ -14204,12 +15393,29 @@ var IrisCascader = vue.defineComponent({
                 background: "var(--iris-background)",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-md, 6px)",
-                boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
+                boxShadow: "var(--iris-shadow-lg)",
                 overflow: "hidden"
               }
             },
             columns.map(
-              (col, ci) => vue.h(
+              (col, ci) => props.virtual ? vue.h(
+                IrisVirtualScroll,
+                {
+                  key: ci,
+                  items: col,
+                  itemHeight: CASCADER_ROW_HEIGHT[props.size],
+                  height: CASCADER_COLUMN_VIEWPORT,
+                  buffer: CASCADER_VIRTUAL_BUFFER,
+                  keyOf: (item) => item.value,
+                  role: "listbox",
+                  "data-iris-cascader-column": "",
+                  "data-level": ci,
+                  style: columnStyle(ci)
+                },
+                {
+                  item: ({ item }) => renderOption(ci, item)
+                }
+              ) : vue.h(
                 "ul",
                 {
                   key: ci,
@@ -14220,57 +15426,12 @@ var IrisCascader = vue.defineComponent({
                     listStyle: "none",
                     margin: "0",
                     padding: "4px",
-                    minWidth: "140px",
+                    ...columnStyle(ci),
                     maxHeight: "240px",
-                    overflowY: "auto",
-                    borderInlineStart: ci > 0 ? "1px solid var(--iris-border)" : void 0
+                    overflowY: "auto"
                   }
                 },
-                col.map((node) => {
-                  const isActive = activePath.value[ci] === node.value;
-                  const hasChildren = !!node.children && node.children.length > 0;
-                  return vue.h(
-                    "li",
-                    {
-                      key: node.value,
-                      role: "option",
-                      "aria-selected": isActive ? "true" : "false",
-                      "aria-disabled": node.disabled ? "true" : void 0,
-                      "data-iris-cascader-option": "",
-                      "data-value": node.value,
-                      onClick: () => selectOption(ci, node),
-                      onMouseenter: () => {
-                        hoveredValue.value = node.value;
-                      },
-                      onMouseleave: () => {
-                        if (hoveredValue.value === node.value) hoveredValue.value = null;
-                      },
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        gap: "8px",
-                        padding: "6px 10px",
-                        fontSize: sz.fontSize,
-                        borderRadius: "var(--iris-radius-sm, 4px)",
-                        cursor: node.disabled ? "not-allowed" : "pointer",
-                        color: node.disabled ? "var(--iris-muted)" : "var(--iris-foreground)",
-                        background: isActive || hoveredValue.value === node.value ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
-                      }
-                    },
-                    [
-                      vue.h("span", node.label),
-                      hasChildren ? vue.h(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          style: { color: "var(--iris-muted)", fontSize: "10px" }
-                        },
-                        "\u203A"
-                      ) : null
-                    ]
-                  );
-                })
+                col.map((node) => renderOption(ci, node))
               )
             )
           ) : null
@@ -14280,9 +15441,21 @@ var IrisCascader = vue.defineComponent({
   }
 });
 var SIZE_MAP9 = {
-  sm: { padding: "2px 8px", fontSize: "12px", height: "24px" },
-  md: { padding: "4px 12px", fontSize: "14px", height: "30px" },
-  lg: { padding: "6px 16px", fontSize: "16px", height: "36px" }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    height: "24px"
+  },
+  md: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    height: "30px"
+  },
+  lg: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-md, 16px)",
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    height: "36px"
+  }
 };
 var normalize = (options) => options.map((o) => typeof o === "string" ? { label: o, value: o } : o);
 var IrisSegmented = vue.defineComponent({
@@ -14342,8 +15515,8 @@ var IrisSegmented = vue.defineComponent({
           style: {
             display: props.block ? "flex" : "inline-flex",
             width: props.block ? "100%" : void 0,
-            gap: "2px",
-            padding: "2px",
+            gap: "var(--iris-space-xxs, 4px)",
+            padding: "var(--iris-space-xxs, 4px)",
             background: "var(--iris-surface)",
             borderRadius: "var(--iris-radius-md, 6px)",
             opacity: props.disabled ? "0.6" : "1",
@@ -14514,8 +15687,8 @@ var IrisImage = vue.defineComponent({
                     borderRadius: "50%",
                     border: "none",
                     background: "rgba(0,0,0,0.5)",
-                    color: "#fff",
-                    fontSize: "22px",
+                    color: "var(--iris-primary-foreground, #fff)",
+                    fontSize: "var(--iris-font-size-2xl, 20px)",
                     lineHeight: "1",
                     cursor: "pointer"
                   }
@@ -14538,10 +15711,10 @@ var fab = (size, primary) => ({
   justifyContent: "center",
   border: primary ? "none" : "1px solid var(--iris-border)",
   background: primary ? "var(--iris-primary)" : "var(--iris-background)",
-  color: primary ? "#fff" : "var(--iris-foreground)",
+  color: primary ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
   cursor: "pointer",
-  boxShadow: "0 4px 12px rgba(0,0,0,0.18)",
-  fontSize: size > 44 ? "22px" : "16px",
+  boxShadow: "var(--iris-shadow-md)",
+  fontSize: size > 44 ? "var(--iris-font-size-2xl, 20px)" : "var(--iris-font-size-lg, 16px)",
   lineHeight: "1"
 });
 var IrisFloatButton = vue.defineComponent({
@@ -14738,7 +15911,7 @@ var IrisAnchor = vue.defineComponent({
                   color: isActive ? "var(--iris-primary)" : "var(--iris-foreground)",
                   fontWeight: isActive ? "600" : "400",
                   textDecoration: "none",
-                  fontSize: "14px"
+                  fontSize: "var(--iris-font-size-md, 14px)"
                 }
               },
               item.title
@@ -14828,7 +16001,7 @@ var IrisCountdown = vue.defineComponent({
             "div",
             {
               "data-iris-countdown-title": "",
-              style: { fontSize: "13px", color: "var(--iris-muted)" }
+              style: { fontSize: "var(--iris-font-size-sm, 13px)", color: "var(--iris-muted)" }
             },
             String(props.title)
           ) : null,
@@ -14862,8 +16035,8 @@ var IrisCountdown = vue.defineComponent({
   }
 });
 var btnBase = {
-  padding: "4px 12px",
-  fontSize: "13px",
+  padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+  fontSize: "var(--iris-font-size-sm, 13px)",
   borderRadius: "var(--iris-radius-sm, 4px)",
   cursor: "pointer"
 };
@@ -14877,7 +16050,7 @@ var btnPrimary = {
   ...btnBase,
   border: "none",
   background: "var(--iris-primary)",
-  color: "#fff"
+  color: "var(--iris-primary-foreground, #fff)"
 };
 var IrisTour = vue.defineComponent({
   name: "IrisTour",
@@ -14968,7 +16141,7 @@ var IrisTour = vue.defineComponent({
             height: `${sl.height + 8}px`,
             border: "2px solid var(--iris-primary)",
             borderRadius: "var(--iris-radius-sm, 4px)",
-            boxShadow: "0 0 0 9999px rgba(0,0,0,0.45)",
+            boxShadow: "0 0 0 9999px color-mix(in srgb, var(--iris-foreground) 45%, transparent)",
             zIndex: "1001",
             pointerEvents: "none"
           }
@@ -14988,7 +16161,7 @@ var IrisTour = vue.defineComponent({
               background: "var(--iris-background)",
               border: "1px solid var(--iris-border)",
               borderRadius: "var(--iris-radius-md, 6px)",
-              boxShadow: "0 8px 24px rgba(0,0,0,0.18)",
+              boxShadow: "var(--iris-shadow-lg)",
               ...cardPos
             }
           },
@@ -15006,7 +16179,7 @@ var IrisTour = vue.defineComponent({
               {
                 "data-iris-tour-description": "",
                 style: {
-                  fontSize: "14px",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   color: "var(--iris-foreground)",
                   marginBlockEnd: "12px"
                 }
@@ -15028,7 +16201,10 @@ var IrisTour = vue.defineComponent({
                   "span",
                   {
                     "data-iris-tour-indicator": "",
-                    style: { fontSize: "12px", color: "var(--iris-muted)" }
+                    style: {
+                      fontSize: "var(--iris-font-size-xs, 12px)",
+                      color: "var(--iris-muted)"
+                    }
                   },
                   t("tour.step", { current: current + 1, total })
                 ),
@@ -15134,9 +16310,9 @@ var IrisTagInput = vue.defineComponent({
             style: {
               display: "inline-flex",
               alignItems: "center",
-              gap: "4px",
-              padding: "2px 6px",
-              fontSize: "13px",
+              gap: "var(--iris-space-xxs, 4px)",
+              padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+              fontSize: "var(--iris-font-size-sm, 13px)",
               background: "var(--iris-surface)",
               border: "1px solid var(--iris-border)",
               borderRadius: "var(--iris-radius-sm, 4px)",
@@ -15158,7 +16334,7 @@ var IrisTagInput = vue.defineComponent({
                   background: "transparent",
                   color: "var(--iris-muted)",
                   cursor: props.disabled ? "not-allowed" : "pointer",
-                  fontSize: "14px",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   lineHeight: "1",
                   padding: "0"
                 }
@@ -15194,8 +16370,8 @@ var IrisTagInput = vue.defineComponent({
             background: "transparent",
             color: "var(--iris-foreground)",
             fontFamily: "inherit",
-            fontSize: "14px",
-            padding: "2px 0"
+            fontSize: "var(--iris-font-size-md, 14px)",
+            padding: "var(--iris-space-xxs, 4px) 0"
           }
         })
       );
@@ -15209,14 +16385,14 @@ var IrisTagInput = vue.defineComponent({
             display: "flex",
             flexWrap: "wrap",
             alignItems: "center",
-            gap: "6px",
-            padding: "4px 8px",
+            gap: "var(--iris-space-xs, 8px)",
+            padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
             minHeight: "34px",
             background: "var(--iris-background)",
             border: `1px solid ${borderColor}`,
             borderRadius: "var(--iris-radius-md, 6px)",
             opacity: props.disabled ? "0.6" : "1",
-            boxShadow: focused.value ? "0 0 0 3px rgba(99, 102, 241, 0.18)" : "none",
+            boxShadow: focused.value ? "0 0 0 3px color-mix(in srgb, var(--iris-primary) 18%, transparent)" : "none",
             transition: "border-color 120ms ease, box-shadow 120ms ease",
             ...attrs.style ?? {}
           }
@@ -15227,9 +16403,18 @@ var IrisTagInput = vue.defineComponent({
   }
 });
 var SIZE_MAP10 = {
-  sm: { padding: "4px 8px", fontSize: "12px" },
-  md: { padding: "6px 12px", fontSize: "14px" },
-  lg: { padding: "8px 16px", fontSize: "16px" }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+    fontSize: "var(--iris-font-size-xs, 12px)"
+  },
+  md: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)"
+  },
+  lg: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-md, 16px)",
+    fontSize: "var(--iris-font-size-lg, 16px)"
+  }
 };
 var IrisCopyButton = vue.defineComponent({
   name: "IrisCopyButton",
@@ -15284,14 +16469,14 @@ var IrisCopyButton = vue.defineComponent({
           style: {
             display: "inline-flex",
             alignItems: "center",
-            gap: "6px",
+            gap: "var(--iris-space-xs, 8px)",
             padding: sz.padding,
             fontSize: sz.fontSize,
             fontFamily: "inherit",
             border: "1px solid var(--iris-border)",
             borderRadius: "var(--iris-radius-md, 6px)",
-            background: copied.value ? "var(--iris-success, #16a34a)" : "var(--iris-surface)",
-            color: copied.value ? "#fff" : "var(--iris-foreground)",
+            background: copied.value ? "var(--iris-success, #10b981)" : "var(--iris-surface)",
+            color: copied.value ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
             cursor: props.disabled ? "not-allowed" : "pointer",
             opacity: props.disabled ? "0.6" : "1",
             transition: "background-color 120ms ease, color 120ms ease",
@@ -15305,7 +16490,7 @@ var IrisCopyButton = vue.defineComponent({
 });
 var COLOR = {
   default: "var(--iris-primary)",
-  success: "var(--iris-success, #16a34a)",
+  success: "var(--iris-success, #10b981)",
   danger: "var(--iris-danger)",
   warning: "var(--iris-warning, #f59e0b)"
 };
@@ -15410,9 +16595,21 @@ var IrisProgressCircle = vue.defineComponent({
   }
 });
 var SIZE_MAP11 = {
-  sm: { padding: "4px 10px", fontSize: "12px", height: "28px" },
-  md: { padding: "6px 14px", fontSize: "14px", height: "34px" },
-  lg: { padding: "8px 18px", fontSize: "16px", height: "40px" }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    height: "28px"
+  },
+  md: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-md, 16px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    height: "34px"
+  },
+  lg: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-lg, 20px)",
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    height: "40px"
+  }
 };
 var IrisSplitButton = vue.defineComponent({
   name: "IrisSplitButton",
@@ -15505,9 +16702,9 @@ var IrisSplitButton = vue.defineComponent({
               style: {
                 ...colors,
                 borderInlineStart: props.variant === "primary" ? "1px solid rgba(255,255,255,0.3)" : "1px solid var(--iris-border)",
-                padding: "0 8px",
+                padding: "0 var(--iris-space-xs, 8px)",
                 minHeight: sz.height,
-                fontSize: "10px",
+                fontSize: "var(--iris-font-size-xs, 12px)",
                 borderStartEndRadius: "var(--iris-radius-md, 6px)",
                 borderEndEndRadius: "var(--iris-radius-md, 6px)",
                 cursor: props.disabled ? "not-allowed" : "pointer",
@@ -15541,7 +16738,7 @@ var IrisSplitButton = vue.defineComponent({
                 background: "var(--iris-background)",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-md, 6px)",
-                boxShadow: "0 8px 24px rgba(0,0,0,0.12)"
+                boxShadow: "var(--iris-shadow-lg)"
               }
             },
             props.actions.map(
@@ -15555,8 +16752,8 @@ var IrisSplitButton = vue.defineComponent({
                   "data-key": a.key,
                   onClick: () => select(a),
                   style: {
-                    padding: "6px 10px",
-                    fontSize: "14px",
+                    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+                    fontSize: "var(--iris-font-size-md, 14px)",
                     borderRadius: "var(--iris-radius-sm, 4px)",
                     cursor: a.disabled ? "not-allowed" : "pointer",
                     color: a.disabled ? "var(--iris-muted)" : "var(--iris-foreground)"
@@ -15625,7 +16822,7 @@ var SR_ONLY = {
   width: "1px",
   height: "1px",
   padding: "0",
-  margin: "-1px",
+  margin: "calc(-1px)",
   overflow: "hidden",
   clip: "rect(0, 0, 0, 0)",
   whiteSpace: "nowrap",
@@ -15723,11 +16920,11 @@ var IrisRibbon = vue.defineComponent({
                 position: "absolute",
                 insetBlockStart: "8px",
                 background: props.color ?? "var(--iris-primary)",
-                color: "#fff",
-                padding: "2px 10px",
-                fontSize: "12px",
+                color: "var(--iris-primary-foreground, #fff)",
+                padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+                fontSize: "var(--iris-font-size-xs, 12px)",
                 fontWeight: "600",
-                boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
+                boxShadow: "var(--iris-shadow-sm)",
                 whiteSpace: "nowrap",
                 ...side
               }
@@ -15741,7 +16938,7 @@ var IrisRibbon = vue.defineComponent({
 });
 var COLOR2 = {
   default: "var(--iris-primary)",
-  success: "var(--iris-success, #16a34a)",
+  success: "var(--iris-success, #10b981)",
   danger: "var(--iris-danger)",
   warning: "var(--iris-warning, #f59e0b)"
 };
@@ -15755,6 +16952,7 @@ var IrisGauge = vue.defineComponent({
     /** Diameter in px. */
     size: { type: Number, default: 120 },
     strokeWidth: { type: Number, default: 10 },
+    /** Semantic status (explicit by design; derive thresholds in the consumer). */
     status: { type: String, default: "default" },
     showValue: { type: Boolean, default: true },
     /** Custom center label given the value and rounded percent. */
@@ -15785,7 +16983,7 @@ var IrisGauge = vue.defineComponent({
           "aria-valuenow": props.value,
           "aria-valuemin": props.min,
           "aria-valuemax": props.max,
-          "aria-valuetext": `${percent}%`,
+          "aria-valuetext": props.min === 0 && props.max === 100 ? `${percent}%` : `${props.value} (${percent}%)`,
           "aria-label": props.ariaLabel,
           style: {
             position: "relative",
@@ -15840,7 +17038,7 @@ var IrisGauge = vue.defineComponent({
                 fontVariantNumeric: "tabular-nums"
               }
             },
-            props.format ? props.format(props.value, percent) : `${percent}%`
+            props.format ? props.format(props.value, percent) : props.min === 0 && props.max === 100 ? `${percent}%` : String(props.value)
           ) : null
         ]
       );
@@ -15986,8 +17184,8 @@ var IrisFieldset = vue.defineComponent({
         {
           "data-iris-fieldset-legend": "",
           style: {
-            padding: "0 6px",
-            fontSize: "14px",
+            padding: "0 var(--iris-space-xs, 8px)",
+            fontSize: "var(--iris-font-size-md, 14px)",
             fontWeight: "600",
             color: "var(--iris-foreground)"
           }
@@ -15998,7 +17196,11 @@ var IrisFieldset = vue.defineComponent({
         "div",
         {
           "data-iris-fieldset-hint": "",
-          style: { fontSize: "12px", color: "var(--iris-muted)", marginBlockEnd: "8px" }
+          style: {
+            fontSize: "var(--iris-font-size-xs, 12px)",
+            color: "var(--iris-muted)",
+            marginBlockEnd: "8px"
+          }
         },
         props.hint
       ) : null;
@@ -16115,20 +17317,26 @@ var IrisCalendar = vue.defineComponent({
   setup(props, { attrs, emit }) {
     const { t } = useI18n();
     const initialMonth = props.defaultMonth ?? props.modelValue ?? /* @__PURE__ */ new Date();
-    const visibleMonth = vue.ref(core.startOfMonth(initialMonth));
-    const focusDate = vue.ref(core.clampDate(props.modelValue ?? /* @__PURE__ */ new Date(), props.min, props.max));
+    const nav = core.createCalendarNav({
+      initialMonth: core.startOfMonth(initialMonth),
+      initialFocusDate: core.clampDate(props.modelValue ?? /* @__PURE__ */ new Date(), props.min, props.max),
+      weekStartsOn: props.weekStartsOn,
+      min: props.min,
+      max: props.max
+    });
+    const state = useStore(nav.store);
     vue.watch(
       () => props.modelValue,
       (value) => {
-        if (value && !core.isSameMonth(value, visibleMonth.value)) {
-          visibleMonth.value = core.startOfMonth(value);
-          focusDate.value = core.clampDate(value, props.min, props.max);
+        if (value && !core.isSameMonth(value, nav.getVisibleMonth())) {
+          nav.setVisibleMonth(core.startOfMonth(value));
+          nav.setFocusDate(core.clampDate(value, props.min, props.max));
         }
       }
     );
-    const matrix = vue.computed(() => core.buildMonthMatrix(visibleMonth.value, props.weekStartsOn));
+    const matrix = vue.computed(() => core.buildMonthMatrix(state.value.visibleMonth, props.weekStartsOn));
     const weekdays = vue.computed(() => core.getWeekdayNames(props.weekStartsOn, props.locale));
-    const title = vue.computed(() => core.formatMonthYear(visibleMonth.value, props.locale));
+    const title = vue.computed(() => core.formatMonthYear(state.value.visibleMonth, props.locale));
     const dayLabelFmt = vue.computed(
       () => new Intl.DateTimeFormat(safeLocale(props.locale), {
         weekday: "long",
@@ -16138,17 +17346,10 @@ var IrisCalendar = vue.defineComponent({
       })
     );
     const goPrevMonth = () => {
-      visibleMonth.value = core.addMonths(visibleMonth.value, -1);
+      nav.goToMonth(-1);
     };
     const goNextMonth = () => {
-      visibleMonth.value = core.addMonths(visibleMonth.value, 1);
-    };
-    const moveFocus = (delta) => {
-      const next = core.clampDate(core.addDays(focusDate.value, delta), props.min, props.max);
-      focusDate.value = next;
-      if (!core.isSameMonth(next, visibleMonth.value)) {
-        visibleMonth.value = core.startOfMonth(next);
-      }
+      nav.goToMonth(1);
     };
     const selectDate = (date) => {
       if (props.disabled) return;
@@ -16156,60 +17357,23 @@ var IrisCalendar = vue.defineComponent({
       emit("update:modelValue", core.startOfDay(date));
     };
     const onGridKeyDown = (event) => {
-      switch (event.key) {
-        case "ArrowLeft":
-          event.preventDefault();
-          moveFocus(-1);
-          break;
-        case "ArrowRight":
-          event.preventDefault();
-          moveFocus(1);
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          moveFocus(-7);
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          moveFocus(7);
-          break;
-        case "Home": {
-          event.preventDefault();
-          const offset = focusDate.value.getDay() - props.weekStartsOn;
-          moveFocus(-((offset + 7) % 7));
-          break;
-        }
-        case "End": {
-          event.preventDefault();
-          const offset = (focusDate.value.getDay() - props.weekStartsOn + 7) % 7;
-          moveFocus(6 - offset);
-          break;
-        }
-        case "PageUp":
-          event.preventDefault();
-          visibleMonth.value = core.addMonths(visibleMonth.value, -1);
-          focusDate.value = core.clampDate(core.addMonths(focusDate.value, -1), props.min, props.max);
-          break;
-        case "PageDown":
-          event.preventDefault();
-          visibleMonth.value = core.addMonths(visibleMonth.value, 1);
-          focusDate.value = core.clampDate(core.addMonths(focusDate.value, 1), props.min, props.max);
-          break;
-        case "Enter":
-        case " ":
-          event.preventDefault();
-          selectDate(focusDate.value);
-          break;
+      if (nav.handleKey(event.key)) {
+        event.preventDefault();
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        selectDate(state.value.focusDate);
       }
     };
     const today = core.startOfDay(/* @__PURE__ */ new Date());
     const prevDisabled = vue.computed(() => {
       if (!props.min) return false;
-      return core.startOfMonth(visibleMonth.value) <= core.startOfMonth(props.min);
+      return core.startOfMonth(state.value.visibleMonth) <= core.startOfMonth(props.min);
     });
     const nextDisabled = vue.computed(() => {
       if (!props.max) return false;
-      const endOfVisible = core.endOfMonth(visibleMonth.value);
+      const endOfVisible = core.endOfMonth(state.value.visibleMonth);
       return core.startOfMonth(endOfVisible) >= core.startOfMonth(props.max);
     });
     const navButtonStyle = {
@@ -16279,7 +17443,7 @@ var IrisCalendar = vue.defineComponent({
               {
                 "data-iris-calendar-title": "",
                 "aria-live": "polite",
-                style: { fontWeight: "600", fontSize: "14px" }
+                style: { fontWeight: "600", fontSize: "var(--iris-font-size-md, 14px)" }
               },
               title.value
             ),
@@ -16310,8 +17474,8 @@ var IrisCalendar = vue.defineComponent({
             style: {
               display: "grid",
               gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-              gap: "2px",
-              fontSize: "12px",
+              gap: "var(--iris-space-xxs, 4px)",
+              fontSize: "var(--iris-font-size-xs, 12px)",
               color: "var(--iris-muted)",
               textAlign: "center"
             }
@@ -16322,7 +17486,7 @@ var IrisCalendar = vue.defineComponent({
               {
                 key: name,
                 role: "columnheader",
-                style: { padding: "2px 0" }
+                style: { padding: "var(--iris-space-xxs, 4px) 0" }
               },
               name
             )
@@ -16339,7 +17503,7 @@ var IrisCalendar = vue.defineComponent({
             style: {
               display: "grid",
               gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-              gap: "2px"
+              gap: "var(--iris-space-xxs, 4px)"
             }
           },
           matrix.value.map(
@@ -16351,9 +17515,9 @@ var IrisCalendar = vue.defineComponent({
                 "div",
                 { key: `week-${wi}`, role: "row", style: { display: "contents" } },
                 week.map((date) => {
-                  const inMonth = core.isSameMonth(date, visibleMonth.value);
+                  const inMonth = core.isSameMonth(date, state.value.visibleMonth);
                   const selected = props.modelValue ? core.isSameDay(date, props.modelValue) : false;
-                  const focused = core.isSameDay(date, focusDate.value);
+                  const focused = core.isSameDay(date, state.value.focusDate);
                   const isToday = core.isSameDay(date, today);
                   const oof = core.isOutOfRange(date, props.min, props.max);
                   const isDisabled = props.disabled || oof;
@@ -16374,11 +17538,11 @@ var IrisCalendar = vue.defineComponent({
                       "data-outside-month": !inMonth ? "true" : void 0,
                       disabled: isDisabled || void 0,
                       onClick: () => {
-                        focusDate.value = date;
+                        nav.setFocusDate(date);
                         selectDate(date);
                       },
                       onFocus: () => {
-                        focusDate.value = date;
+                        nav.setFocusDate(date);
                       },
                       style: {
                         height: "32px",
@@ -16391,7 +17555,7 @@ var IrisCalendar = vue.defineComponent({
                         borderRadius: "var(--iris-radius-sm, 4px)",
                         cursor: isDisabled ? "not-allowed" : "pointer",
                         opacity: isDisabled ? "0.45" : "1",
-                        fontSize: "13px",
+                        fontSize: "var(--iris-font-size-sm, 13px)",
                         fontFamily: "inherit",
                         outline: "none"
                       }
@@ -16471,15 +17635,15 @@ var IrisDatePicker = vue.defineComponent({
                 style: {
                   display: "inline-flex",
                   alignItems: "center",
-                  gap: "6px",
-                  padding: "6px 12px",
+                  gap: "var(--iris-space-xs, 8px)",
+                  padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
                   background: "var(--iris-background)",
                   color: props.modelValue ? "var(--iris-foreground)" : "var(--iris-muted)",
                   border: `1px solid ${props.invalid ? "var(--iris-danger)" : "var(--iris-border)"}`,
                   borderRadius: "var(--iris-radius-md, 6px)",
                   cursor: props.disabled ? "not-allowed" : "pointer",
                   opacity: props.disabled ? "0.6" : "1",
-                  fontSize: "14px",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   fontFamily: "inherit",
                   minHeight: "34px",
                   minWidth: "180px",
@@ -16649,7 +17813,7 @@ var IrisFileUpload = vue.defineComponent({
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
-      gap: "6px",
+      gap: "var(--iris-space-xs, 8px)",
       padding: "var(--iris-padding-lg, 20px)",
       border: `2px dashed ${dragOver.value ? "var(--iris-primary)" : "var(--iris-border)"}`,
       borderRadius: "var(--iris-radius-md, 6px)",
@@ -16687,7 +17851,7 @@ var IrisFileUpload = vue.defineComponent({
             width: "1px",
             height: "1px",
             padding: "0",
-            margin: "-1px",
+            margin: "calc(-1px)",
             overflow: "hidden",
             clip: "rect(0,0,0,0)",
             whiteSpace: "nowrap",
@@ -16715,7 +17879,7 @@ var IrisFileUpload = vue.defineComponent({
               "div",
               {
                 "data-iris-file-upload-label": "",
-                style: { fontSize: "14px", fontWeight: "500" }
+                style: { fontSize: "var(--iris-font-size-md, 14px)", fontWeight: "500" }
               },
               resolvedLabel.value
             ),
@@ -16723,7 +17887,7 @@ var IrisFileUpload = vue.defineComponent({
               "div",
               {
                 style: {
-                  fontSize: "12px",
+                  fontSize: "var(--iris-font-size-xs, 12px)",
                   color: "var(--iris-muted)"
                 }
               },
@@ -16755,18 +17919,23 @@ var IrisFileUpload = vue.defineComponent({
                   display: "flex",
                   alignItems: "center",
                   gap: "8px",
-                  padding: "6px 10px",
+                  padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
                   background: "var(--iris-surface)",
                   border: "1px solid var(--iris-border)",
                   borderRadius: "var(--iris-radius-sm, 4px)",
-                  fontSize: "13px"
+                  fontSize: "var(--iris-font-size-sm, 13px)"
                 }
               },
               [
                 vue.h("span", { style: { flex: "1", minWidth: "0" } }, item.name),
                 vue.h(
                   "span",
-                  { style: { color: "var(--iris-muted)", fontSize: "12px" } },
+                  {
+                    style: {
+                      color: "var(--iris-muted)",
+                      fontSize: "var(--iris-font-size-xs, 12px)"
+                    }
+                  },
                   formatBytes(item.size)
                 ),
                 vue.h(
@@ -16784,9 +17953,9 @@ var IrisFileUpload = vue.defineComponent({
                       border: "none",
                       color: "var(--iris-muted)",
                       cursor: props.disabled ? "not-allowed" : "pointer",
-                      fontSize: "16px",
+                      fontSize: "var(--iris-font-size-lg, 16px)",
                       lineHeight: "1",
-                      padding: "0 4px"
+                      padding: "0 var(--iris-space-xxs, 4px)"
                     }
                   },
                   "\xD7"
@@ -16949,7 +18118,7 @@ var IrisRangeSlider = vue.defineComponent({
           style: {
             position: "relative",
             width: "100%",
-            padding: "14px 8px",
+            padding: "var(--iris-space-md, 16px) var(--iris-space-xs, 8px)",
             ...attrs.style ?? {}
           }
         },
@@ -17404,12 +18573,12 @@ function defaultFilter(query, item) {
   if (!q) return 0;
   const haystacks = [item.label, ...item.keywords ?? []].map((s) => s.toLowerCase());
   let best = null;
-  for (const h123 of haystacks) {
+  for (const h124 of haystacks) {
     let qi = 0;
     let lastIdx = -1;
     let score = 0;
-    for (let i = 0; i < h123.length && qi < q.length; i += 1) {
-      if (h123[i] === q[qi]) {
+    for (let i = 0; i < h124.length && qi < q.length; i += 1) {
+      if (h124[i] === q[qi]) {
         score += lastIdx === -1 ? i : i - lastIdx - 1;
         lastIdx = i;
         qi += 1;
@@ -17584,7 +18753,7 @@ var IrisCommandPalette = vue.defineComponent({
                 color: "var(--iris-foreground)",
                 border: "1px solid var(--iris-border)",
                 borderRadius: "var(--iris-radius-lg, 8px)",
-                boxShadow: "0 20px 40px -12px rgba(0,0,0,0.25)",
+                boxShadow: "var(--iris-shadow-xl)",
                 overflow: "hidden",
                 ...attrs.style ?? {}
               }
@@ -17612,11 +18781,11 @@ var IrisCommandPalette = vue.defineComponent({
                   },
                   style: {
                     width: "100%",
-                    padding: "8px 10px",
+                    padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
                     background: "transparent",
                     border: "none",
                     outline: "none",
-                    fontSize: "16px",
+                    fontSize: "var(--iris-font-size-lg, 16px)",
                     fontFamily: "inherit",
                     color: "inherit"
                   }
@@ -17645,7 +18814,7 @@ var IrisCommandPalette = vue.defineComponent({
                         padding: "20px",
                         textAlign: "center",
                         color: "var(--iris-muted)",
-                        fontSize: "13px"
+                        fontSize: "var(--iris-font-size-sm, 13px)"
                       }
                     },
                     resolvedEmptyText.value
@@ -17658,11 +18827,11 @@ var IrisCommandPalette = vue.defineComponent({
                         key: `g-${row.label}-${i}`,
                         "data-iris-command-palette-group": "",
                         style: {
-                          padding: "6px 12px",
-                          fontSize: "11px",
+                          padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+                          fontSize: "var(--iris-font-size-xs, 12px)",
                           fontWeight: "600",
                           textTransform: "uppercase",
-                          letterSpacing: "0.04em",
+                          letterSpacing: "var(--iris-letter-spacing-wide, 0.04em)",
                           color: "var(--iris-muted)"
                         }
                       },
@@ -17693,14 +18862,14 @@ var IrisCommandPalette = vue.defineComponent({
                       style: {
                         display: "flex",
                         alignItems: "center",
-                        gap: "10px",
-                        padding: "8px 12px",
+                        gap: "var(--iris-space-sm, 12px)",
+                        padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
                         borderRadius: "var(--iris-radius-sm, 4px)",
                         cursor: item.disabled ? "not-allowed" : "pointer",
                         opacity: item.disabled ? "0.5" : "1",
                         background: isActive ? "var(--iris-surface-hover)" : "transparent",
                         color: "inherit",
-                        fontSize: "14px"
+                        fontSize: "var(--iris-font-size-md, 14px)"
                       }
                     },
                     [
@@ -17718,8 +18887,8 @@ var IrisCommandPalette = vue.defineComponent({
                         {
                           "data-iris-command-palette-shortcut": "",
                           style: {
-                            fontSize: "11px",
-                            padding: "2px 6px",
+                            fontSize: "var(--iris-font-size-xs, 12px)",
+                            padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
                             background: "var(--iris-background)",
                             border: "1px solid var(--iris-border)",
                             borderRadius: "var(--iris-radius-sm, 4px)",
@@ -17775,8 +18944,8 @@ var IrisTimePicker = vue.defineComponent({
       if (props.format === "24h") {
         return { h: value.value.hours, m: value.value.minutes };
       }
-      const h123 = value.value.hours % 12 === 0 ? 12 : value.value.hours % 12;
-      return { h: h123, m: value.value.minutes };
+      const h124 = value.value.hours % 12 === 0 ? 12 : value.value.hours % 12;
+      return { h: h124, m: value.value.minutes };
     });
     const emitNew = (next) => {
       emit("update:modelValue", next);
@@ -17792,16 +18961,16 @@ var IrisTimePicker = vue.defineComponent({
     };
     const toggleMeridiem = () => {
       const isPM = meridiem.value === "PM";
-      const h123 = value.value.hours % 12;
-      const newH24 = isPM ? h123 : h123 + 12;
+      const h124 = value.value.hours % 12;
+      const newH24 = isPM ? h124 : h124 + 12;
       emitNew({ hours: newH24, minutes: value.value.minutes });
     };
     const onHoursInput = (e) => {
       const v = parseInt(e.target.value || "0", 10);
       if (Number.isNaN(v)) return;
       if (props.format === "12h") {
-        const h123 = clamp5(v, 1, 12);
-        const wrap = h123 === 12 ? 0 : h123;
+        const h124 = clamp5(v, 1, 12);
+        const wrap = h124 === 12 ? 0 : h124;
         const newH24 = meridiem.value === "PM" ? wrap + 12 : wrap;
         setHours24(newH24);
       } else {
@@ -17853,12 +19022,12 @@ var IrisTimePicker = vue.defineComponent({
     const fieldStyle = vue.computed(() => ({
       width: "48px",
       height: "34px",
-      padding: "4px 6px",
+      padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
       background: "var(--iris-background)",
       color: "var(--iris-foreground)",
       border: `1px solid ${props.invalid ? "var(--iris-danger)" : "var(--iris-border)"}`,
       borderRadius: "var(--iris-radius-sm, 4px)",
-      fontSize: "15px",
+      fontSize: "var(--iris-font-size-md, 14px)",
       fontFamily: "inherit",
       textAlign: "center",
       outline: "none"
@@ -17897,7 +19066,7 @@ var IrisTimePicker = vue.defineComponent({
           "span",
           {
             "aria-hidden": "true",
-            style: { color: "var(--iris-muted)", fontSize: "15px" }
+            style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-md, 14px)" }
           },
           ":"
         ),
@@ -17931,7 +19100,7 @@ var IrisTimePicker = vue.defineComponent({
               border: "1px solid var(--iris-border)",
               borderRadius: "var(--iris-radius-sm, 4px)",
               cursor: props.disabled ? "not-allowed" : "pointer",
-              fontSize: "13px",
+              fontSize: "var(--iris-font-size-sm, 13px)",
               fontFamily: "inherit",
               fontWeight: "600"
             }
@@ -18023,14 +19192,14 @@ var IrisDateRangePicker = vue.defineComponent({
                 style: {
                   display: "inline-flex",
                   alignItems: "center",
-                  padding: "6px 12px",
+                  padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
                   background: "var(--iris-background)",
                   color: display.value ? "var(--iris-foreground)" : "var(--iris-muted)",
                   border: `1px solid ${props.invalid ? "var(--iris-danger)" : "var(--iris-border)"}`,
                   borderRadius: "var(--iris-radius-md, 6px)",
                   cursor: props.disabled ? "not-allowed" : "pointer",
                   opacity: props.disabled ? "0.6" : "1",
-                  fontSize: "14px",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   fontFamily: "inherit",
                   minHeight: "34px",
                   minWidth: "260px",
@@ -18353,8 +19522,8 @@ var IrisLoginTemplate = vue.defineComponent({
               background: "var(--iris-surface)",
               border: "1px solid var(--iris-border)",
               borderRadius: "var(--iris-radius-lg, 8px)",
-              padding: "32px",
-              boxShadow: "0 6px 20px -8px rgba(0, 0, 0, 0.16)"
+              padding: "var(--iris-space-2xl, 32px)",
+              boxShadow: "var(--iris-shadow-lg)"
             }
           },
           [
@@ -18364,8 +19533,8 @@ var IrisLoginTemplate = vue.defineComponent({
                   "h1",
                   {
                     style: {
-                      margin: "0 0 4px 0",
-                      fontSize: "22px",
+                      margin: "0 0 var(--iris-space-xxs, 4px) 0",
+                      fontSize: "var(--iris-font-size-2xl, 20px)",
                       fontWeight: "700"
                     }
                   },
@@ -18377,7 +19546,7 @@ var IrisLoginTemplate = vue.defineComponent({
                     style: {
                       margin: "0",
                       color: "var(--iris-muted)",
-                      fontSize: "14px"
+                      fontSize: "var(--iris-font-size-md, 14px)"
                     }
                   },
                   props.description
@@ -18519,8 +19688,8 @@ var IrisDashboardTemplate = vue.defineComponent({
               "div",
               {
                 style: {
-                  padding: "8px 12px",
-                  fontSize: "14px",
+                  padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   fontWeight: "600",
                   color: "var(--iris-foreground)",
                   opacity: state.collapsed ? 0 : 1,
@@ -18535,7 +19704,11 @@ var IrisDashboardTemplate = vue.defineComponent({
               "nav",
               {
                 "aria-label": "Primary",
-                style: { display: "flex", flexDirection: "column", gap: "2px" }
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "var(--iris-space-xxs, 4px)"
+                }
               },
               props.nav.map((item) => {
                 const isActive = item.id === props.activeId;
@@ -18550,14 +19723,14 @@ var IrisDashboardTemplate = vue.defineComponent({
                     style: {
                       display: "flex",
                       alignItems: "center",
-                      gap: "10px",
-                      padding: "8px 12px",
+                      gap: "var(--iris-space-sm, 12px)",
+                      padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
                       background: isActive ? "var(--iris-primary)" : "transparent",
                       color: isActive ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
                       border: "none",
                       borderRadius: "var(--iris-radius-sm, 4px)",
                       cursor: "pointer",
-                      fontSize: "14px",
+                      fontSize: "var(--iris-font-size-md, 14px)",
                       fontFamily: "inherit",
                       textAlign: "start",
                       outline: "none"
@@ -18597,8 +19770,8 @@ var IrisDashboardTemplate = vue.defineComponent({
               "div",
               {
                 style: {
-                  padding: "12px 20px",
-                  fontSize: "16px",
+                  padding: "var(--iris-space-sm, 12px) var(--iris-space-lg, 20px)",
+                  fontSize: "var(--iris-font-size-lg, 16px)",
                   fontWeight: "600"
                 }
               },
@@ -18624,8 +19797,8 @@ var IrisDashboardTemplate = vue.defineComponent({
                         "h3",
                         {
                           style: {
-                            margin: "0 0 8px 0",
-                            fontSize: "14px",
+                            margin: "0 0 var(--iris-space-xs, 8px) 0",
+                            fontSize: "var(--iris-font-size-md, 14px)",
                             fontWeight: "600",
                             color: "var(--iris-foreground)"
                           }
@@ -18634,7 +19807,12 @@ var IrisDashboardTemplate = vue.defineComponent({
                       ),
                       slots[`card.${card.id}`] ? slots[`card.${card.id}`]() : card.body ? vue.h(
                         "div",
-                        { style: { fontSize: "13px", color: "var(--iris-muted)" } },
+                        {
+                          style: {
+                            fontSize: "var(--iris-font-size-sm, 13px)",
+                            color: "var(--iris-muted)"
+                          }
+                        },
                         card.body
                       ) : null
                     ]
@@ -19112,6 +20290,54 @@ var IrisLongPress = vue.defineComponent({
     );
   }
 });
+var IrisCompose = vue.defineComponent({
+  name: "IrisCompose",
+  props: {
+    resizable: { type: Object, default: void 0 },
+    movable: { type: Object, default: void 0 },
+    sortable: { type: Object, default: void 0 },
+    clickOutside: { type: Object, default: void 0 },
+    hotkey: { type: Object, default: void 0 }
+  },
+  setup(props, { slots }) {
+    return () => {
+      const features = {
+        resizable: props.resizable,
+        movable: props.movable,
+        sortable: props.sortable,
+        clickOutside: props.clickOutside,
+        hotkey: props.hotkey
+      };
+      if (!core.hasComposableFeatures(features)) return slots.default?.();
+      const active = core.composeFeatures(features);
+      let node = slots.default?.() ?? [];
+      for (const feature of active) {
+        switch (feature) {
+          case "hotkey":
+            if (props.hotkey) node = [vue.h(IrisHotkey, props.hotkey, { default: () => node })];
+            break;
+          case "clickOutside":
+            if (props.clickOutside)
+              node = [vue.h(IrisClickOutside, props.clickOutside, { default: () => node })];
+            break;
+          case "sortable":
+            if (props.sortable)
+              node = [vue.h(IrisSortable, props.sortable, { default: () => node })];
+            break;
+          case "movable":
+            if (props.movable)
+              node = [vue.h(IrisMovable, props.movable, { default: () => node })];
+            break;
+          case "resizable":
+            if (props.resizable)
+              node = [vue.h(IrisResizable, props.resizable, { default: () => node })];
+            break;
+        }
+      }
+      return node;
+    };
+  }
+});
 
 Object.defineProperty(exports, "addDays", {
   enumerable: true,
@@ -19458,6 +20684,7 @@ exports.IrisClickOutside = IrisClickOutside;
 exports.IrisColorPicker = IrisColorPicker;
 exports.IrisCombobox = IrisCombobox;
 exports.IrisCommandPalette = IrisCommandPalette;
+exports.IrisCompose = IrisCompose;
 exports.IrisContainer = IrisContainer;
 exports.IrisCopyButton = IrisCopyButton;
 exports.IrisCountdown = IrisCountdown;