@iris-ui-kit/vue 0.2.25 → 0.2.26

package/dist/index.js

@@ -2,19 +2,19 @@ export { createUndoStack, useUndoStack } from './chunk-I7PR4ILF.js';
 import './chunk-ROJV6RON.js';
 import { useBodyScrollLock, useFocusTrap } from './chunk-XCNCIG2I.js';
 export { __getBodyScrollLockCount, __resetBodyScrollLock, useBodyScrollLock, useFocusTrap } from './chunk-XCNCIG2I.js';
-export { IrisGrid } from './chunk-WL67XCH5.js';
+export { IrisGrid } from './chunk-IN3DQ55U.js';
 import './chunk-4FQ7XF52.js';
 import { useDataState } from './chunk-S43IHHBU.js';
 export { DATA_STATE_CLASS, __resetDataStateStyles, installDataStateStyles, useDataState, usePrefersReducedMotion } from './chunk-S43IHHBU.js';
 export { IrisProvider, PluginStoreContextKey, usePlugin, usePluginStore } from './chunk-MO7AAXA6.js';
 export { createClientFetcher, createResourceController, useResourceController } from './chunk-25NYWSXP.js';
-import { IrisCheckbox } from './chunk-BEPH6PPL.js';
-export { IrisAlert, IrisButton, IrisCheckbox, IrisDashboardTemplate, IrisDivider, IrisFormField, IrisInput, IrisLoginTemplate, IrisPasswordInput } from './chunk-BEPH6PPL.js';
+import { IrisCheckbox } from './chunk-LWABTQCB.js';
+export { IrisAlert, IrisButton, IrisCheckbox, IrisDashboardTemplate, IrisDivider, IrisFormField, IrisInput, IrisLoginTemplate, IrisPasswordInput } from './chunk-LWABTQCB.js';
 export { IrisContainer, IrisDashboardCard, IrisDashboardGrid, IrisStack } from './chunk-3R3QDLJC.js';
 export { IrisSkinKey, SkinProvider, SkinResolutionError, applySkin, builtinSkins, createSkinCatalog, createSkinEngine, createSkinRegistry, darkSkin, lightSkin, loadSkin, localStorageSkinStorage, memorySkinStorage, renderSkinStyle, resolveSkin, skinBootScript, skinError, skinToCssEntries, useSkin, useSkinContext, validateSkin } from './chunk-UPC4GN3F.js';
-export { DropdownContextKey, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, createAdminPreferences, createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, localStorageAdminPreferencesStorage, nodeAllowsRoles, useAdminPreferences, useAdminShell, useTabsNav, visibleNav } from './chunk-QQ25RKOO.js';
-import { useFloating, useDismiss } from './chunk-3FJUCHCC.js';
-export { useDismiss, useFloating } from './chunk-3FJUCHCC.js';
+export { DropdownContextKey, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, createAdminPreferences, createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, localStorageAdminPreferencesStorage, nodeAllowsRoles, useAdminPreferences, useAdminShell, useTabsNav, visibleNav } from './chunk-ZWFSGMOB.js';
+import { useFloating, useDismiss } from './chunk-IPR5JAVF.js';
+export { useDismiss, useFloating } from './chunk-IPR5JAVF.js';
 import { useMachine } from './chunk-NNOF7KUH.js';
 export { useMachine } from './chunk-NNOF7KUH.js';
 import { findFirstElement, mergeSlotProps, composeRefs } from './chunk-F77KIPOH.js';
@@ -22,18 +22,18 @@ export { IrisSlot, composeRefs, findFirstElement, mergeSlotProps } from './chunk
 export { IrisHeaderLayout, IrisSidebarLayout } from './chunk-3V46HGRC.js';
 export { IrisThemeKey, ThemeProvider, useColorScheme, useDirection, useTheme, useThemeContext } from './chunk-ZTPIXL7Q.js';
 export { useAsyncResource, usePaginatedResource } from './chunk-SJB5DIIY.js';
-import { useDrag } from './chunk-7L6UB6MD.js';
-export { IrisClickOutside, IrisHotkey, IrisLongPress, IrisMovable, IrisResizable, useDrag } from './chunk-7L6UB6MD.js';
+import { useDrag } from './chunk-IOMKC5OI.js';
+export { IrisClickOutside, IrisCompose, IrisHotkey, IrisLongPress, IrisMovable, IrisResizable, useDrag } from './chunk-IOMKC5OI.js';
 export { IrisSortable, SORTABLE_ITEM_ATTR } from './chunk-W3B6E5GN.js';
-export { createClientDataSource, createDataSource, createGroupedView, useDataSource, useGroupedView } from './chunk-DNRQVM3Q.js';
+export { createClientDataSource, createDataSource, createGroupedView, useDataSource, useGroupedView } from './chunk-QBFYIDY7.js';
 export { IrisErrorBoundary } from './chunk-3547J6IN.js';
 export { FormInjectionKey, IrisForm, useField, useFieldArray, useForm, useFormContext } from './chunk-IAG64CHL.js';
 import { useStore } from './chunk-75GSYEJS.js';
 export { useStore, useStoreSelector } from './chunk-75GSYEJS.js';
 import { useI18n } from './chunk-TCAXRWT6.js';
 export { I18nInjectionKey, IrisI18nProvider, useI18n } from './chunk-TCAXRWT6.js';
-import { defineComponent, computed, watch, ref, useId, provide, inject, h, nextTick, Teleport, onScopeDispose, Fragment, onMounted, onBeforeUnmount, onBeforeMount, shallowRef, toValue, Comment, onUnmounted } from 'vue';
-import { createFloatingMachine, createHoverIntent, createKeyboardNav, getPageRange, createSelectionModel, flattenLeafColumns, buildHeaderMatrix, createExpansion, flattenTree, withSortedChildren, createTreeSelection, createCellRange, computeVirtualRange, aggregate, createStore, firstEnabledIndex, startOfMonth, clampDate, isSameMonth, buildMonthMatrix, getWeekdayNames, formatMonthYear, startOfDay, endOfMonth, isSameDay, isOutOfRange, formatLocalISO, hexToRgba, rgbaToHsva, hsvaToRgba, rgbToHex, addMonths, createVirtualizer, compareValues, nextGridCell, nextEnabledIndex, copyText, addDays, clamp01, createAutoDismiss, createReconnectingSource, createResilientFetcher, createDisposableScope, toCsv, downloadFile, toSpreadsheetXml, generateId } from '@iris-ui-kit/core';
+import { defineComponent, computed, watch, ref, useId, provide, inject, h, nextTick, Teleport, onScopeDispose, Fragment, onMounted, watchEffect, onBeforeUnmount, onBeforeMount, shallowRef, toValue, Comment, onUnmounted } from 'vue';
+import { createFloatingMachine, createHoverIntent, createVirtualizer, createKeyboardNav, getPageRange, createSelectionModel, flattenLeafColumns, buildHeaderMatrix, createExpansion, flattenTree, withSortedChildren, createTreeSelection, createCellRange, computeVirtualRange, aggregate, createStore, firstEnabledIndex, createCalendarNav, clampDate, startOfMonth, isSameMonth, buildMonthMatrix, getWeekdayNames, formatMonthYear, startOfDay, endOfMonth, isSameDay, isOutOfRange, formatLocalISO, hexToRgba, rgbaToHsva, hsvaToRgba, rgbToHex, addMonths, compareValues, nextGridCell, nextEnabledIndex, copyText, clamp01, validateEditRulesAsync, createAutoDismiss, createReconnectingSource, createResilientFetcher, createDisposableScope, toCsv, downloadFile, toSpreadsheetXml, generateId } from '@iris-ui-kit/core';
 export { addDays, addMonths, buildMonthMatrix, clamp01, clampDate, composeEventHandlers, createFloatingMachine, createMachine, createStore, endOfMonth, formatLocalISO, formatMonthYear, generateId, getPageRange, getWeekdayNames, hexToRgba, hsvToRgb, hsvaToRgba, isOutOfRange, isSameDay, isSameMonth, mergeProps, rgbToHex, rgbToHsv, rgbaToHsva, startOfDay, startOfMonth } from '@iris-ui-kit/core';
 import { getDirection } from '@iris-ui-kit/theme';
 export { applyTheme, createThemeStore, getCssVar, toCssVarName } from '@iris-ui-kit/theme';
@@ -190,6 +190,74 @@ var IrisPopoverTrigger = defineComponent({
     };
   }
 });
+
+// src/primitives/floating/animations.ts
+var STYLE_ID = "iris-floating-animations";
+var installed = 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 (installed || typeof document === "undefined") return;
+  installed = true;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  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 = defineComponent({
   name: "IrisPopoverContent",
   inheritAttrs: false,
@@ -201,6 +269,7 @@ var IrisPopoverContent = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    installFloatingAnimations();
     const ctx = inject(PopoverContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisPopoverContent must be a descendant of IrisPopover");
@@ -246,13 +315,14 @@ var IrisPopoverContent = 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 ?? {}
@@ -296,6 +366,7 @@ var IrisTooltip = defineComponent({
     disabled: { type: Boolean, default: false }
   },
   setup(props, { slots, attrs }) {
+    installFloatingAnimations();
     const triggerRef = ref(null);
     const tooltipRef = ref(null);
     const tooltipId = useId();
@@ -403,9 +474,10 @@ var IrisTooltip = 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",
@@ -544,6 +616,7 @@ var IrisDialogContent = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
+    installFloatingAnimations();
     const ctx = inject(DialogContextKey);
     if (!ctx) {
       throw new Error("[iris-ui] IrisDialogContent must be a descendant of IrisDialog");
@@ -592,7 +665,7 @@ var IrisDialogContent = 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",
@@ -617,12 +690,13 @@ var IrisDialogContent = 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",
@@ -657,7 +731,7 @@ var IrisDialogTitle = 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 ?? {}
         }
@@ -685,7 +759,7 @@ var IrisDialogDescription = 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 ?? {}
         }
       },
@@ -1087,15 +1161,27 @@ var IrisTextarea = defineComponent({
     const textareaRef = ref(null);
     const sizeStyles = 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 = 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)",
@@ -1294,15 +1380,27 @@ var IrisNumberInput = defineComponent({
     };
     const sizeStyles = 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 = 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",
@@ -1411,9 +1509,9 @@ var IrisNumberInput = 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]/,
@@ -1589,7 +1687,7 @@ var IrisOtpInput = 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"
             }
           });
@@ -1761,10 +1859,24 @@ var IrisRating = 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 = defineComponent({
   name: "IrisCombobox",
   inheritAttrs: false,
@@ -1776,6 +1888,12 @@ var IrisCombobox = 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
@@ -1808,10 +1926,53 @@ var IrisCombobox = defineComponent({
       const needle = query.value.trim().toLowerCase();
       return filtering.value && needle ? props.options.filter((o) => o.label.toLowerCase().startsWith(needle)) : props.options;
     });
+    const listboxRef = ref(null);
+    const vstate = ref({
+      items: [],
+      offsetBefore: 0,
+      totalSize: 0,
+      startIndex: 0,
+      endIndex: -1
+    });
+    let v = null;
+    let unsub = null;
+    watchEffect(() => {
+      if (!props.virtual) return;
+      if (!v) {
+        v = 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;
+      }
+    });
+    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;
@@ -1843,10 +2004,16 @@ var IrisCombobox = 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();
@@ -1864,11 +2031,14 @@ var IrisCombobox = 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);
         }
       }
     };
@@ -1944,7 +2114,7 @@ var IrisCombobox = 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"
             }
           }),
@@ -1954,6 +2124,12 @@ var IrisCombobox = 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",
@@ -1969,7 +2145,7 @@ var IrisCombobox = 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 ? [
@@ -1979,13 +2155,65 @@ var IrisCombobox = 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 ? [
+              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 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
+                );
+              }),
+              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;
@@ -2005,7 +2233,7 @@ var IrisCombobox = 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",
@@ -2058,7 +2286,7 @@ var IrisSwitch = 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"
@@ -2074,8 +2302,8 @@ var IrisSwitch = 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) => {
@@ -2287,7 +2515,7 @@ var LIST_STATE_STYLE = {
   padding: "12px",
   textAlign: "center",
   color: "var(--iris-muted)",
-  fontSize: "14px"
+  fontSize: "var(--iris-font-size-md, 14px)"
 };
 var IrisList = defineComponent({
   name: "IrisList",
@@ -2406,13 +2634,14 @@ var IrisList = 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?.({
@@ -2443,7 +2672,28 @@ var IrisList = defineComponent({
           },
           style: baseStyle
         },
-        slotContent ?? item.label ?? String(item.value)
+        [
+          h(
+            "span",
+            { style: { flex: "1", minWidth: "0" } },
+            slotContent ?? item.label ?? String(item.value)
+          ),
+          selected ? 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"
+            },
+            [h("path", { d: "M20 6 9 17l-5-5" })]
+          ) : null
+        ]
       );
     });
     return () => h(
@@ -2467,8 +2717,10 @@ var IrisList = 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 ?? {}
         }
       },
@@ -2482,6 +2734,7 @@ var IrisSelect = 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" },
@@ -2496,7 +2749,13 @@ var IrisSelect = 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,
@@ -2508,25 +2767,157 @@ var IrisSelect = defineComponent({
     const internalValue = ref(props.defaultValue);
     const controlled = computed(() => props.modelValue !== void 0);
     const currentValue = computed(() => controlled.value ? props.modelValue : internalValue.value);
+    const selectedValues = computed(() => {
+      if (!props.multiple) return [];
+      const v2 = currentValue.value;
+      return Array.isArray(v2) ? v2 : v2 !== void 0 ? [v2] : [];
+    });
     const selectedItem = computed(
       () => props.items.find((item) => item.value === currentValue.value) ?? null
     );
     const triggerLabel = 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 = ref(null);
+    const vstate = ref({
+      items: [],
+      offsetBefore: 0,
+      totalSize: 0,
+      startIndex: 0,
+      endIndex: -1
+    });
+    let v = null;
+    let vUnsub = null;
+    const nav = ref(null);
+    const activeIndex = ref(-1);
+    const isEnabled = (i) => !props.items[i]?.disabled;
+    watchEffect(() => {
+      if (!props.virtual) return;
+      if (!v) {
+        v = 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 = 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;
+      }
+    });
+    onBeforeUnmount(() => vUnsub?.());
+    watch(
+      () => props.items,
+      () => {
+        if (!props.virtual || !nav.value) return;
+        nav.value.reset(props.items.length);
+        activeIndex.value = nav.value.index;
+      },
+      { flush: "post" }
+    );
+    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;
+      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 = 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];
     });
@@ -2574,12 +2965,144 @@ var IrisSelect = 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 = () => 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"
+        },
+        [h("path", { d: "M20 6 9 17l-5-5" })]
+      );
+      return 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 ? [
+          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")
+          )
+        ] : [
+          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 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)
+              },
+              [
+                h(
+                  "span",
+                  { style: { flex: "1", minWidth: "0" } },
+                  opt.label ?? String(opt.value)
+                ),
+                selected ? check() : null
+              ]
+            );
+          }),
+          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 () => h(
       IrisPopover,
       {
         open: open.value,
         placement: props.placement,
-        "onUpdate:open": (v) => open.value = v
+        "onUpdate:open": (v2) => open.value = v2
       },
       {
         default: () => [
@@ -2620,7 +3143,7 @@ var IrisSelect = defineComponent({
               style: { padding: "var(--iris-padding-sm)", minWidth: "180px" },
               ...props.teleport !== void 0 ? { teleport: props.teleport } : {}
             },
-            () => h(IrisList, {
+            () => props.virtual ? renderVirtualListbox() : h(IrisList, {
               items: props.items,
               modelValue: currentValue.value,
               onSelect,
@@ -2650,7 +3173,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) {
@@ -2658,7 +3181,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":
@@ -2811,22 +3334,22 @@ var CSS = `
   }
 }
 `.trim();
-var installed = false;
+var installed2 = false;
 function installSpinnerStyles() {
-  if (installed) return;
+  if (installed2) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__SPINNER_STYLE_ID)) {
-    installed = true;
+    installed2 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __SPINNER_STYLE_ID;
   el.textContent = CSS;
   document.head.appendChild(el);
-  installed = true;
+  installed2 = true;
 }
 function __resetSpinnerStyles() {
-  installed = false;
+  installed2 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__SPINNER_STYLE_ID)?.remove();
   }
@@ -2901,7 +3424,7 @@ var IrisSpinner = defineComponent({
                 width: "1px",
                 height: "1px",
                 padding: "0",
-                margin: "-1px",
+                margin: "calc(-1px)",
                 overflow: "hidden",
                 clip: "rect(0,0,0,0)",
                 whiteSpace: "nowrap",
@@ -2958,22 +3481,22 @@ var CSS2 = `
   }
 }
 `.trim();
-var installed2 = false;
+var installed3 = false;
 function installSkeletonStyles() {
-  if (installed2) return;
+  if (installed3) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__SKELETON_STYLE_ID)) {
-    installed2 = true;
+    installed3 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __SKELETON_STYLE_ID;
   el.textContent = CSS2;
   document.head.appendChild(el);
-  installed2 = true;
+  installed3 = true;
 }
 function __resetSkeletonStyles() {
-  installed2 = false;
+  installed3 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__SKELETON_STYLE_ID)?.remove();
   }
@@ -3058,22 +3581,22 @@ var CSS3 = `
   }
 }
 `.trim();
-var installed3 = false;
+var installed4 = false;
 function installProgressStyles() {
-  if (installed3) return;
+  if (installed4) return;
   if (typeof document === "undefined") return;
   if (document.getElementById(__PROGRESS_STYLE_ID)) {
-    installed3 = true;
+    installed4 = true;
     return;
   }
   const el = document.createElement("style");
   el.id = __PROGRESS_STYLE_ID;
   el.textContent = CSS3;
   document.head.appendChild(el);
-  installed3 = true;
+  installed4 = true;
 }
 function __resetProgressStyles() {
-  installed3 = false;
+  installed4 = false;
   if (typeof document !== "undefined") {
     document.getElementById(__PROGRESS_STYLE_ID)?.remove();
   }
@@ -3139,7 +3662,7 @@ var IrisProgress = defineComponent({
   }
 });
 var TONE_TO_VAR3 = {
-  info: "--iris-primary",
+  info: "--iris-info",
   success: "--iris-success",
   warning: "--iris-warning",
   danger: "--iris-danger",
@@ -3241,8 +3764,8 @@ var IrisBanner = 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"
               }
@@ -3408,7 +3931,7 @@ var IrisSlider = 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",
@@ -3603,11 +4126,27 @@ var IrisPagination = defineComponent({
     );
   }
 });
+var STYLE_ID2 = "iris-card-styles";
+var installed5 = false;
+function installCardStyles() {
+  if (installed5 || typeof document === "undefined") return;
+  installed5 = true;
+  if (document.getElementById(STYLE_ID2)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  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 = defineComponent({
   name: "IrisCard",
@@ -3618,6 +4157,7 @@ var IrisCard = defineComponent({
     hover: { type: Boolean, default: false }
   },
   setup(props, { slots, attrs }) {
+    installCardStyles();
     const containerStyle = computed(() => {
       const base = {
         display: "flex",
@@ -3630,7 +4170,7 @@ var IrisCard = 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":
@@ -3728,7 +4268,19 @@ var IrisEmptyState = 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,
@@ -3736,7 +4288,7 @@ var IrisEmptyState = defineComponent({
             "div",
             {
               "data-iris-empty-state-title": "",
-              style: { fontWeight: "600", fontSize: "16px" }
+              style: { fontWeight: "600", fontSize: "var(--iris-font-size-lg, 16px)" }
             },
             titleNode
           ) : null,
@@ -3744,7 +4296,11 @@ var IrisEmptyState = 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,
@@ -3766,7 +4322,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",
@@ -3867,8 +4423,8 @@ var IrisChip = 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"
@@ -4257,7 +4813,7 @@ var IrisStepperStep = 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"
@@ -4270,7 +4826,7 @@ var IrisStepperStep = 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)"
           }
@@ -4281,7 +4837,7 @@ var IrisStepperStep = 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;
@@ -4466,7 +5022,7 @@ var IrisToggleGroupItem = 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",
@@ -4588,8 +5144,14 @@ var IrisToggleGroup = 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 = defineComponent({
   name: "IrisKbd",
@@ -4610,7 +5172,7 @@ var IrisKbd = 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"
@@ -5389,11 +5951,16 @@ var IrisTable = 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 },
@@ -5411,6 +5978,7 @@ var IrisTable = 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 },
     /**
@@ -5478,6 +6046,19 @@ var IrisTable = 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 = computed(() => props.columns.some((c) => c.children && c.children.length > 0));
     const leafColumns = computed(
@@ -5662,6 +6243,16 @@ var IrisTable = 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) {
+        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) {
@@ -5669,6 +6260,14 @@ var IrisTable = 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) {
@@ -5715,9 +6314,9 @@ var IrisTable = 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
           }
         },
@@ -5928,19 +6527,34 @@ var IrisTable = 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" ? [
-                h(IrisCheckbox, {
-                  modelValue: allSelected.value ? true : someSelected.value ? "indeterminate" : false,
-                  size: "sm",
-                  ariaLabel: t("table.selectAll"),
-                  "onUpdate:modelValue": toggleAll
-                })
-              ] : ""
+                [
+                  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 ? 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
+                ]
+              ] : ""
             )
           );
         }
@@ -5975,7 +6589,7 @@ var IrisTable = 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",
@@ -6032,7 +6646,7 @@ var IrisTable = defineComponent({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                padding: "8px",
+                padding: "8px 12px",
                 background: "var(--iris-surface)",
                 borderBottom: "1px solid var(--iris-border)"
               }
@@ -6111,7 +6725,7 @@ var IrisTable = 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",
@@ -6155,7 +6769,7 @@ var IrisTable = defineComponent({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  padding: "8px",
+                  padding: "8px 12px",
                   borderBottom: "1px solid var(--iris-border)"
                 }
               },
@@ -6198,7 +6812,7 @@ var IrisTable = defineComponent({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  padding: "8px",
+                  padding: "8px 12px",
                   borderBottom: "1px solid var(--iris-border)"
                 }
               },
@@ -6252,12 +6866,12 @@ var IrisTable = 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 ? [
@@ -6269,8 +6883,8 @@ var IrisTable = 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)"
                   }
                 },
@@ -6361,13 +6975,15 @@ var IrisTable = 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",
@@ -6401,7 +7017,7 @@ var IrisTable = 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
@@ -6417,11 +7033,31 @@ var IrisTable = defineComponent({
       };
       let bodyNode;
       if (props.error) {
-        bodyNode = h(
-          "div",
-          { role: "row", "data-iris-table-row": "error", style: stateRowStyle },
-          slots.error ? slots.error() : t("table.error")
-        );
+        bodyNode = h("div", { role: "row", "data-iris-table-row": "error", style: stateRowStyle }, [
+          h(
+            "span",
+            { style: { marginInlineEnd: props.onRetry ? "var(--iris-space-sm, 12px)" : "0px" } },
+            slots.error ? slots.error() : t("table.error")
+          ),
+          props.onRetry ? 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 = h(
           "div",
@@ -6515,7 +7151,7 @@ var IrisTable = defineComponent({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                padding: "8px"
+                padding: "8px 12px"
               }
             })
           );
@@ -6540,8 +7176,8 @@ var IrisTable = 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",
@@ -6592,6 +7228,7 @@ var IrisTable = 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.
@@ -6718,11 +7355,11 @@ var IrisTabs = defineComponent({
 });
 
 // src/primitives/tabs/styles.ts
-var STYLE_ID = "iris-tabs-styles";
+var STYLE_ID3 = "iris-tabs-styles";
 var CSS4 = `
 :where(.iris-tabs-list) {
   display: flex;
-  gap: 2px;
+  gap: var(--iris-space-xxs, 4px);
 }
 :where(.iris-tabs-list[data-orientation="horizontal"]) {
   flex-direction: row;
@@ -6733,8 +7370,8 @@ var CSS4 = `
   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;
@@ -6746,11 +7383,11 @@ var CSS4 = `
   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"]) {
@@ -6771,19 +7408,19 @@ var CSS4 = `
   outline-offset: 2px;
 }
 `.trim();
-var installed4 = false;
+var installed6 = false;
 function installTabsStyles() {
-  if (installed4) return;
+  if (installed6) return;
   if (typeof document === "undefined") return;
-  if (document.getElementById(STYLE_ID)) {
-    installed4 = true;
+  if (document.getElementById(STYLE_ID3)) {
+    installed6 = true;
     return;
   }
   const style = document.createElement("style");
-  style.id = STYLE_ID;
+  style.id = STYLE_ID3;
   style.textContent = CSS4;
   document.head.appendChild(style);
-  installed4 = true;
+  installed6 = true;
 }
 
 // src/primitives/tabs/TabsList.ts
@@ -6984,6 +7621,7 @@ var IrisMenu = defineComponent({
       triggerRef: ref(null),
       contentRef: ref(null),
       contentId: useId(),
+      treeId: useId(),
       placement: props.placement,
       offset: props.offset,
       closeRoot
@@ -7071,6 +7709,10 @@ var IrisMenuContent = 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)
     });
     watch(ctx.open, async (open) => {
@@ -7133,12 +7775,12 @@ var IrisMenuContent = 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",
@@ -7201,14 +7843,14 @@ var IrisMenuItem = 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 ?? {}
         }
@@ -7235,6 +7877,7 @@ var IrisMenuSeparator = defineComponent({
   }
 });
 var HOVER_OPEN_DELAY = 100;
+var HOVER_CLOSE_DELAY = 150;
 var IrisMenuSub = defineComponent({
   name: "IrisMenuSub",
   inheritAttrs: false,
@@ -7254,20 +7897,42 @@ var IrisMenuSub = defineComponent({
     const triggerRef = ref(null);
     const contentRef = 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);
     };
-    onScopeDispose(clearTimer);
+    const scheduleClose = () => {
+      clearTimer();
+      clearCloseTimer();
+      closeTimer = setTimeout(() => {
+        closeTimer = null;
+        keyboardManaged = false;
+        open.value = false;
+      }, HOVER_CLOSE_DELAY);
+    };
+    onScopeDispose(() => {
+      clearTimer();
+      clearCloseTimer();
+    });
     const { floatingStyles } = useFloating({
       anchor: triggerRef,
       floating: contentRef,
@@ -7281,32 +7946,50 @@ var IrisMenuSub = 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;
       }
     };
-    watch(open, async (next) => {
+    const focusFirstItem = () => {
+      void nextTick(() => {
+        contentRef.value?.querySelector('[role="menuitem"]')?.focus();
+      });
+    };
+    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?.();
       }
     });
@@ -7352,11 +8035,11 @@ var IrisMenuSub = 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"
           }
         },
@@ -7384,17 +8067,24 @@ var IrisMenuSub = 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"
@@ -7457,14 +8147,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 = defineComponent({
@@ -7485,6 +8175,7 @@ var IrisToastViewport = defineComponent({
     max: { type: Number, default: 5 }
   },
   setup(props, { attrs }) {
+    installFloatingAnimations();
     const { t } = useI18n();
     const toasts = ref(getToasts());
     const hovered = ref(false);
@@ -7637,15 +8328,16 @@ var IrisToastViewport = 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)"
           }
         },
         [
@@ -7653,7 +8345,13 @@ var IrisToastViewport = defineComponent({
             toast.title && h("div", { style: { fontWeight: "600" } }, toast.title),
             toast.description && 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
             )
           ]),
@@ -7671,8 +8369,8 @@ var IrisToastViewport = 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"
               }
             },
@@ -7688,11 +8386,11 @@ var IrisToastViewport = 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"
@@ -7723,10 +8421,10 @@ var IrisToastViewport = 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 = defineComponent({
   name: "IrisTree",
@@ -8078,7 +8776,7 @@ var IrisTree = 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, h("span", { style: { flex: "1", minWidth: "0" } }, node.label)]
@@ -8099,7 +8797,7 @@ var IrisTree = defineComponent({
         style: {
           display: "flex",
           flexDirection: "column",
-          gap: "2px",
+          gap: "var(--iris-space-xxs, 4px)",
           outline: "none",
           ...attrs.style ?? {}
         }
@@ -8110,7 +8808,7 @@ var IrisTree = 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)"
@@ -8194,7 +8892,10 @@ var IrisTimeline = 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,
@@ -8210,7 +8911,10 @@ var IrisTimeline = 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
@@ -8237,7 +8941,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() {
@@ -8419,7 +9123,7 @@ var IrisCarousel = defineComponent({
               style: {
                 display: "flex",
                 justifyContent: "center",
-                gap: "6px",
+                gap: "var(--iris-space-xs, 8px)",
                 marginBlockStart: "8px"
               }
             },
@@ -8465,13 +9169,22 @@ var IrisCarousel = 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 = defineComponent({
   name: "IrisStatistic",
   inheritAttrs: false,
@@ -8483,6 +9196,7 @@ var IrisStatistic = 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 }) {
@@ -8505,7 +9219,7 @@ var IrisStatistic = 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,
@@ -8545,8 +9259,8 @@ var IrisStatistic = 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)"
             }
           },
           [
@@ -8558,7 +9272,7 @@ var IrisStatistic = 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
@@ -8584,7 +9298,7 @@ var IrisDescriptions = 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,
@@ -8592,7 +9306,7 @@ var IrisDescriptions = defineComponent({
       };
       const valueStyle = {
         margin: "0",
-        fontSize: "14px",
+        fontSize: "var(--iris-font-size-md, 14px)",
         color: "var(--iris-foreground)",
         padding: pad3
       };
@@ -8684,7 +9398,12 @@ var IrisTransfer = 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
@@ -8747,9 +9466,30 @@ var IrisTransfer = 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 = 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;
@@ -8766,6 +9506,34 @@ var IrisTransfer = defineComponent({
         if (allChecked) model.clear();
         else model.set(selectable.map((o) => o.value));
       };
+      const renderRow = (o, tag) => h(tag, { key: o.value, "data-iris-transfer-item": "", "data-value": o.value }, [
+        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)"
+            }
+          },
+          [
+            h("input", {
+              type: "checkbox",
+              checked: checked.has(o.value),
+              disabled: props.disabled || o.disabled || void 0,
+              onChange: () => toggle(o.value)
+            }),
+            h("span", o.label)
+          ]
+        )
+      ]);
+      const virtualHeight = props.virtual?.height ?? 200;
+      const virtualized = props.virtual !== void 0 && visible.length > 0;
       return h("div", { "data-iris-transfer-pane": "", "data-side": side, style: paneStyle }, [
         h(
           "div",
@@ -8775,10 +9543,10 @@ var IrisTransfer = 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"
             }
           },
@@ -8786,7 +9554,12 @@ var IrisTransfer = defineComponent({
             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"
+                }
               },
               [
                 h("input", {
@@ -8806,7 +9579,7 @@ var IrisTransfer = 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}`
             )
@@ -8823,9 +9596,9 @@ var IrisTransfer = 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)",
@@ -8833,61 +9606,31 @@ var IrisTransfer = defineComponent({
             outline: "none"
           }
         }) : null,
-        h(
-          "ul",
+        virtualized ? 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 ? [
-            h(
-              "li",
-              {
-                "data-iris-transfer-empty": "",
-                style: {
-                  padding: "8px 10px",
-                  color: "var(--iris-muted)",
-                  fontSize: "13px",
-                  textAlign: "center"
-                }
-              },
-              t("transfer.empty")
-            )
-          ] : visible.map(
-            (o) => h("li", { key: o.value, "data-iris-transfer-item": "", "data-value": o.value }, [
-              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"
-                  }
-                },
-                [
-                  h("input", {
-                    type: "checkbox",
-                    checked: checked.has(o.value),
-                    disabled: props.disabled || o.disabled || void 0,
-                    onChange: () => toggle(o.value)
-                  }),
-                  h("span", o.label)
-                ]
-              )
-            ])
-          )
+          {
+            item: ({ item }) => renderRow(item, "div")
+          }
+        ) : h(
+          "ul",
+          {
+            "data-iris-transfer-list": "",
+            style: listStyle
+          },
+          visible.length === 0 ? [emptyRow] : visible.map((o) => renderRow(o, "li"))
         )
       ]);
     };
@@ -9089,11 +9832,11 @@ var IrisBackTop = 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 ?? {}
         }
       },
@@ -9188,7 +9931,7 @@ var IrisAffix = 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: "!" }
@@ -9217,9 +9960,9 @@ var IrisResult = 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"
             }
@@ -9230,7 +9973,11 @@ var IrisResult = 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,
@@ -9238,7 +9985,11 @@ var IrisResult = 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,
@@ -9284,9 +10035,21 @@ var IrisResult = 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) {
@@ -9389,7 +10152,7 @@ var IrisTreeSelect = defineComponent({
                     background: "transparent",
                     cursor: "pointer",
                     color: "var(--iris-muted)",
-                    fontSize: "10px"
+                    fontSize: "var(--iris-font-size-xs, 12px)"
                   }
                 },
                 isExpanded ? "\u25BE" : "\u25B8"
@@ -9498,7 +10261,10 @@ var IrisTreeSelect = defineComponent({
               ),
               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"
               )
             ]
@@ -9522,7 +10288,7 @@ var IrisTreeSelect = 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)
@@ -9545,8 +10311,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)",
@@ -9569,8 +10335,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 = defineComponent({
   name: "IrisMentions",
   inheritAttrs: false,
@@ -9583,6 +10351,13 @@ var IrisMentions = 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 }
   },
@@ -9603,6 +10378,61 @@ var IrisMentions = defineComponent({
       ) : []
     );
     const open = computed(() => active.value !== null && filtered.value.length > 0);
+    const listboxRef = ref(null);
+    const vstate = ref({
+      items: [],
+      offsetBefore: 0,
+      totalSize: 0,
+      startIndex: 0,
+      endIndex: -1
+    });
+    let v = null;
+    let unsub = null;
+    let lastText;
+    let lastActiveIndex = 0;
+    watchEffect(() => {
+      if (!props.virtual) return;
+      if (!v) {
+        v = 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");
+          }
+        }
+      }
+    });
+    onBeforeUnmount(() => unsub?.());
     const onInput = (e) => {
       const ta = e.target;
       const val = ta.value;
@@ -9653,6 +10483,7 @@ var IrisMentions = defineComponent({
     };
     return () => {
       const activeId = open.value ? `${reactId}-opt-${activeIndex.value}` : void 0;
+      const list = filtered.value;
       return h(
         "div",
         {
@@ -9696,9 +10527,63 @@ var IrisMentions = 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 ? [
+              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 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
+                );
+              }),
+              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) => h(
                 "li",
                 {
@@ -9714,8 +10599,8 @@ var IrisMentions = 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"
@@ -9731,10 +10616,25 @@ var IrisMentions = 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;
@@ -9768,6 +10668,7 @@ var IrisCascader = 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 }
   },
@@ -9806,6 +10707,59 @@ var IrisCascader = 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 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
+            }
+          },
+          [
+            h("span", node.label),
+            hasChildren ? 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 h(
         "div",
         {
@@ -9879,7 +10833,10 @@ var IrisCascader = defineComponent({
               ),
               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"
               )
             ]
@@ -9898,12 +10855,29 @@ var IrisCascader = 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) => h(
+              (col, ci) => props.virtual ? 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)
+                }
+              ) : h(
                 "ul",
                 {
                   key: ci,
@@ -9914,57 +10888,12 @@ var IrisCascader = 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 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"
-                      }
-                    },
-                    [
-                      h("span", node.label),
-                      hasChildren ? h(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          style: { color: "var(--iris-muted)", fontSize: "10px" }
-                        },
-                        "\u203A"
-                      ) : null
-                    ]
-                  );
-                })
+                col.map((node) => renderOption(ci, node))
               )
             )
           ) : null
@@ -9974,9 +10903,21 @@ var IrisCascader = 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 = defineComponent({
@@ -10036,8 +10977,8 @@ var IrisSegmented = 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",
@@ -10208,8 +11149,8 @@ var IrisImage = 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"
                   }
@@ -10232,10 +11173,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 = defineComponent({
@@ -10432,7 +11373,7 @@ var IrisAnchor = 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
@@ -10522,7 +11463,7 @@ var IrisCountdown = 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,
@@ -10556,8 +11497,8 @@ var IrisCountdown = 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"
 };
@@ -10571,7 +11512,7 @@ var btnPrimary = {
   ...btnBase,
   border: "none",
   background: "var(--iris-primary)",
-  color: "#fff"
+  color: "var(--iris-primary-foreground, #fff)"
 };
 var IrisTour = defineComponent({
   name: "IrisTour",
@@ -10662,7 +11603,7 @@ var IrisTour = 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"
           }
@@ -10682,7 +11623,7 @@ var IrisTour = 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
             }
           },
@@ -10700,7 +11641,7 @@ var IrisTour = defineComponent({
               {
                 "data-iris-tour-description": "",
                 style: {
-                  fontSize: "14px",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   color: "var(--iris-foreground)",
                   marginBlockEnd: "12px"
                 }
@@ -10722,7 +11663,10 @@ var IrisTour = 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 })
                 ),
@@ -10828,9 +11772,9 @@ var IrisTagInput = 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)",
@@ -10852,7 +11796,7 @@ var IrisTagInput = 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"
                 }
@@ -10888,8 +11832,8 @@ var IrisTagInput = 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"
           }
         })
       );
@@ -10903,14 +11847,14 @@ var IrisTagInput = 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 ?? {}
           }
@@ -10921,9 +11865,18 @@ var IrisTagInput = 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 = defineComponent({
   name: "IrisCopyButton",
@@ -10978,14 +11931,14 @@ var IrisCopyButton = 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",
@@ -10999,7 +11952,7 @@ var IrisCopyButton = 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)"
 };
@@ -11104,9 +12057,21 @@ var IrisProgressCircle = 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 = defineComponent({
   name: "IrisSplitButton",
@@ -11199,9 +12164,9 @@ var IrisSplitButton = 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",
@@ -11235,7 +12200,7 @@ var IrisSplitButton = 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(
@@ -11249,8 +12214,8 @@ var IrisSplitButton = 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)"
@@ -11319,7 +12284,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",
@@ -11417,11 +12382,11 @@ var IrisRibbon = 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
               }
@@ -11435,7 +12400,7 @@ var IrisRibbon = 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)"
 };
@@ -11449,6 +12414,7 @@ var IrisGauge = 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. */
@@ -11479,7 +12445,7 @@ var IrisGauge = 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",
@@ -11534,7 +12500,7 @@ var IrisGauge = 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
         ]
       );
@@ -11680,8 +12646,8 @@ var IrisFieldset = 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)"
           }
@@ -11692,7 +12658,11 @@ var IrisFieldset = 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;
@@ -11809,20 +12779,26 @@ var IrisCalendar = defineComponent({
   setup(props, { attrs, emit }) {
     const { t } = useI18n();
     const initialMonth = props.defaultMonth ?? props.modelValue ?? /* @__PURE__ */ new Date();
-    const visibleMonth = ref(startOfMonth(initialMonth));
-    const focusDate = ref(clampDate(props.modelValue ?? /* @__PURE__ */ new Date(), props.min, props.max));
+    const nav = createCalendarNav({
+      initialMonth: startOfMonth(initialMonth),
+      initialFocusDate: clampDate(props.modelValue ?? /* @__PURE__ */ new Date(), props.min, props.max),
+      weekStartsOn: props.weekStartsOn,
+      min: props.min,
+      max: props.max
+    });
+    const state = useStore(nav.store);
     watch(
       () => props.modelValue,
       (value) => {
-        if (value && !isSameMonth(value, visibleMonth.value)) {
-          visibleMonth.value = startOfMonth(value);
-          focusDate.value = clampDate(value, props.min, props.max);
+        if (value && !isSameMonth(value, nav.getVisibleMonth())) {
+          nav.setVisibleMonth(startOfMonth(value));
+          nav.setFocusDate(clampDate(value, props.min, props.max));
         }
       }
     );
-    const matrix = computed(() => buildMonthMatrix(visibleMonth.value, props.weekStartsOn));
+    const matrix = computed(() => buildMonthMatrix(state.value.visibleMonth, props.weekStartsOn));
     const weekdays = computed(() => getWeekdayNames(props.weekStartsOn, props.locale));
-    const title = computed(() => formatMonthYear(visibleMonth.value, props.locale));
+    const title = computed(() => formatMonthYear(state.value.visibleMonth, props.locale));
     const dayLabelFmt = computed(
       () => new Intl.DateTimeFormat(safeLocale(props.locale), {
         weekday: "long",
@@ -11832,17 +12808,10 @@ var IrisCalendar = defineComponent({
       })
     );
     const goPrevMonth = () => {
-      visibleMonth.value = addMonths(visibleMonth.value, -1);
+      nav.goToMonth(-1);
     };
     const goNextMonth = () => {
-      visibleMonth.value = addMonths(visibleMonth.value, 1);
-    };
-    const moveFocus = (delta) => {
-      const next = clampDate(addDays(focusDate.value, delta), props.min, props.max);
-      focusDate.value = next;
-      if (!isSameMonth(next, visibleMonth.value)) {
-        visibleMonth.value = startOfMonth(next);
-      }
+      nav.goToMonth(1);
     };
     const selectDate = (date) => {
       if (props.disabled) return;
@@ -11850,60 +12819,23 @@ var IrisCalendar = defineComponent({
       emit("update:modelValue", 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 = addMonths(visibleMonth.value, -1);
-          focusDate.value = clampDate(addMonths(focusDate.value, -1), props.min, props.max);
-          break;
-        case "PageDown":
-          event.preventDefault();
-          visibleMonth.value = addMonths(visibleMonth.value, 1);
-          focusDate.value = clampDate(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 = startOfDay(/* @__PURE__ */ new Date());
     const prevDisabled = computed(() => {
       if (!props.min) return false;
-      return startOfMonth(visibleMonth.value) <= startOfMonth(props.min);
+      return startOfMonth(state.value.visibleMonth) <= startOfMonth(props.min);
     });
     const nextDisabled = computed(() => {
       if (!props.max) return false;
-      const endOfVisible = endOfMonth(visibleMonth.value);
+      const endOfVisible = endOfMonth(state.value.visibleMonth);
       return startOfMonth(endOfVisible) >= startOfMonth(props.max);
     });
     const navButtonStyle = {
@@ -11973,7 +12905,7 @@ var IrisCalendar = 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
             ),
@@ -12004,8 +12936,8 @@ var IrisCalendar = 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"
             }
@@ -12016,7 +12948,7 @@ var IrisCalendar = defineComponent({
               {
                 key: name,
                 role: "columnheader",
-                style: { padding: "2px 0" }
+                style: { padding: "var(--iris-space-xxs, 4px) 0" }
               },
               name
             )
@@ -12033,7 +12965,7 @@ var IrisCalendar = defineComponent({
             style: {
               display: "grid",
               gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-              gap: "2px"
+              gap: "var(--iris-space-xxs, 4px)"
             }
           },
           matrix.value.map(
@@ -12045,9 +12977,9 @@ var IrisCalendar = defineComponent({
                 "div",
                 { key: `week-${wi}`, role: "row", style: { display: "contents" } },
                 week.map((date) => {
-                  const inMonth = isSameMonth(date, visibleMonth.value);
+                  const inMonth = isSameMonth(date, state.value.visibleMonth);
                   const selected = props.modelValue ? isSameDay(date, props.modelValue) : false;
-                  const focused = isSameDay(date, focusDate.value);
+                  const focused = isSameDay(date, state.value.focusDate);
                   const isToday = isSameDay(date, today);
                   const oof = isOutOfRange(date, props.min, props.max);
                   const isDisabled = props.disabled || oof;
@@ -12068,11 +13000,11 @@ var IrisCalendar = 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",
@@ -12085,7 +13017,7 @@ var IrisCalendar = 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"
                       }
@@ -12165,15 +13097,15 @@ var IrisDatePicker = 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",
@@ -12343,7 +13275,7 @@ var IrisFileUpload = 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)",
@@ -12381,7 +13313,7 @@ var IrisFileUpload = defineComponent({
             width: "1px",
             height: "1px",
             padding: "0",
-            margin: "-1px",
+            margin: "calc(-1px)",
             overflow: "hidden",
             clip: "rect(0,0,0,0)",
             whiteSpace: "nowrap",
@@ -12409,7 +13341,7 @@ var IrisFileUpload = defineComponent({
               "div",
               {
                 "data-iris-file-upload-label": "",
-                style: { fontSize: "14px", fontWeight: "500" }
+                style: { fontSize: "var(--iris-font-size-md, 14px)", fontWeight: "500" }
               },
               resolvedLabel.value
             ),
@@ -12417,7 +13349,7 @@ var IrisFileUpload = defineComponent({
               "div",
               {
                 style: {
-                  fontSize: "12px",
+                  fontSize: "var(--iris-font-size-xs, 12px)",
                   color: "var(--iris-muted)"
                 }
               },
@@ -12449,18 +13381,23 @@ var IrisFileUpload = 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)"
                 }
               },
               [
                 h("span", { style: { flex: "1", minWidth: "0" } }, item.name),
                 h(
                   "span",
-                  { style: { color: "var(--iris-muted)", fontSize: "12px" } },
+                  {
+                    style: {
+                      color: "var(--iris-muted)",
+                      fontSize: "var(--iris-font-size-xs, 12px)"
+                    }
+                  },
                   formatBytes(item.size)
                 ),
                 h(
@@ -12478,9 +13415,9 @@ var IrisFileUpload = 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"
@@ -12643,7 +13580,7 @@ var IrisRangeSlider = defineComponent({
           style: {
             position: "relative",
             width: "100%",
-            padding: "14px 8px",
+            padding: "var(--iris-space-md, 16px) var(--iris-space-xs, 8px)",
             ...attrs.style ?? {}
           }
         },
@@ -13278,7 +14215,7 @@ var IrisCommandPalette = 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 ?? {}
               }
@@ -13306,11 +14243,11 @@ var IrisCommandPalette = 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"
                   }
@@ -13339,7 +14276,7 @@ var IrisCommandPalette = defineComponent({
                         padding: "20px",
                         textAlign: "center",
                         color: "var(--iris-muted)",
-                        fontSize: "13px"
+                        fontSize: "var(--iris-font-size-sm, 13px)"
                       }
                     },
                     resolvedEmptyText.value
@@ -13352,11 +14289,11 @@ var IrisCommandPalette = 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)"
                         }
                       },
@@ -13387,14 +14324,14 @@ var IrisCommandPalette = 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)"
                       }
                     },
                     [
@@ -13412,8 +14349,8 @@ var IrisCommandPalette = 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)",
@@ -13547,12 +14484,12 @@ var IrisTimePicker = defineComponent({
     const fieldStyle = 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"
@@ -13591,7 +14528,7 @@ var IrisTimePicker = defineComponent({
           "span",
           {
             "aria-hidden": "true",
-            style: { color: "var(--iris-muted)", fontSize: "15px" }
+            style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-md, 14px)" }
           },
           ":"
         ),
@@ -13625,7 +14562,7 @@ var IrisTimePicker = 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"
             }
@@ -13717,14 +14654,14 @@ var IrisDateRangePicker = 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",