@iris-ui-kit/react 0.2.1 → 0.2.2

package/dist/index.js

@@ -1,35 +1,35 @@
 'use client'
-export { createUndoStack, useUndoStack } from './chunk-INEPOSCN.js';
-export { IrisGrid } from './chunk-SJO74IB3.js';
+export { createUndoStack, useUndoStack } from './chunk-CYQO33XH.js';
+export { IrisGrid } from './chunk-7ILMMLK6.js';
 import { useBodyScrollLock, useFocusTrap } from './chunk-AUA5GBT6.js';
 export { __getBodyScrollLockCount, __resetBodyScrollLock, useBodyScrollLock, useFocusTrap } from './chunk-AUA5GBT6.js';
 import { useDataState } from './chunk-HEJGN6UI.js';
 export { DATA_STATE_CLASS, __resetDataStateStyles, installDataStateStyles, useDataState, usePrefersReducedMotion } from './chunk-HEJGN6UI.js';
 export { IrisProvider, PluginStoreContext, usePlugin, usePluginStore } from './chunk-IDD35UJ6.js';
 export { createClientFetcher, createResourceController, useResourceController } from './chunk-TQ33XJIK.js';
-import { IrisCheckbox } from './chunk-B4RS5WKC.js';
-export { IrisAlert, IrisButton, IrisCheckbox, IrisDashboardTemplate, IrisDivider, IrisFormField, IrisInput, IrisLoginTemplate, IrisPasswordInput } from './chunk-B4RS5WKC.js';
+import { IrisCheckbox } from './chunk-V3KHE2WB.js';
+export { IrisAlert, IrisButton, IrisCheckbox, IrisDashboardTemplate, IrisDivider, IrisFormField, IrisInput, IrisLoginTemplate, IrisPasswordInput } from './chunk-V3KHE2WB.js';
 export { IrisContainer, IrisDashboardCard, IrisDashboardGrid, IrisStack } from './chunk-ZKBDUWUD.js';
 export { SkinProvider, SkinResolutionError, applySkin, builtinSkins, createSkinCatalog, createSkinEngine, createSkinRegistry, darkSkin, lightSkin, loadSkin, localStorageSkinStorage, memorySkinStorage, renderSkinStyle, resolveSkin, skinBootScript, skinError, skinToCssEntries, useSkin, useSkinContext, useSkinOptional, validateSkin } from './chunk-WIHBIDVJ.js';
-import { IrisSlot, useMachine } from './chunk-LXMTXHAS.js';
-export { DropdownContext, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, IrisSlot, createAdminPreferences, createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, localStorageAdminPreferencesStorage, nodeAllowsRoles, useAdminPreferences, useAdminShell, useDropdownContext, useMachine, useTabsNav, visibleNav } from './chunk-LXMTXHAS.js';
+import { IrisSlot, useMachine } from './chunk-OD2O3BPM.js';
+export { DropdownContext, IrisAdminBreadcrumb, IrisAdminLayout, IrisAdminTabs, IrisBreadcrumb, IrisBreadcrumbItem, IrisDropdown, IrisDropdownItem, IrisDropdownMenu, IrisDropdownSeparator, IrisDropdownTrigger, IrisIcon, IrisNavMenu, IrisSlot, createAdminPreferences, createTabsNav, filterNavByAccess, findNavNode, findNavPath, firstLeaf, flattenNav, isBranch, isClosable, localStorageAdminPreferencesStorage, nodeAllowsRoles, useAdminPreferences, useAdminShell, useDropdownContext, useMachine, useTabsNav, visibleNav } from './chunk-OD2O3BPM.js';
 export { ThemeProvider, useColorScheme, useDirection, useTheme, useThemeContext, useThemeOptional } from './chunk-XCK4RIXB.js';
 export { IrisHeaderLayout, IrisSidebarLayout } from './chunk-J5FB2UB2.js';
 export { useAsyncResource, usePaginatedResource } from './chunk-TO7YVSAI.js';
-import { useDrag } from './chunk-BCL32KSE.js';
-export { IrisClickOutside, IrisHotkey, IrisLongPress, IrisMovable, IrisResizable, useDrag } from './chunk-BCL32KSE.js';
+import { useDrag } from './chunk-APA5KNCK.js';
+export { IrisClickOutside, IrisHotkey, IrisLongPress, IrisMovable, IrisResizable, useDrag } from './chunk-APA5KNCK.js';
 export { IrisSortable, SORTABLE_ITEM_ATTR } from './chunk-K2F7SC2T.js';
 export { createClientDataSource, createDataSource, createGroupedView, useDataSource, useGroupedView } from './chunk-53KFLVIZ.js';
 export { IrisErrorBoundary } from './chunk-SORLRLS4.js';
 import { useI18n } from './chunk-OMOTUHYI.js';
 export { I18nContext, IrisI18nProvider, useI18n } from './chunk-OMOTUHYI.js';
 import './chunk-YXIO5THG.js';
-import { useFloating, useDismiss } from './chunk-6BMFMCMQ.js';
-export { useDismiss, useFloating } from './chunk-6BMFMCMQ.js';
+import { useFloating, useDismiss } from './chunk-AE2TTLTK.js';
+export { useDismiss, useFloating } from './chunk-AE2TTLTK.js';
 export { FormContext, IrisForm, useField, useFieldArray, useForm, useFormContext } from './chunk-DE6V6NOI.js';
 import { useStore } from './chunk-RZNYIFV2.js';
 export { useStore, useStoreSelector } from './chunk-RZNYIFV2.js';
-import * as React67 from 'react';
+import * as React70 from 'react';
 import { useState, useRef, useEffect } from 'react';
 import { composeEventHandlers, createStore, createVirtualizer, createKeyboardNav, createReconnectingSource, createDisposableScope, createResilientFetcher, createSelectionModel, createHoverIntent, createFloatingMachine, generateId, createAutoDismiss, nextEnabledIndex, getPageRange, flattenLeafColumns, buildHeaderMatrix, createExpansion, flattenTree, withSortedChildren, createCellRange, computeVirtualRange, aggregate, toCsv, downloadFile, toSpreadsheetXml, startOfMonth, clampDate, isSameMonth, buildMonthMatrix, getWeekdayNames, formatMonthYear, startOfDay, endOfMonth, addMonths, isSameDay, isOutOfRange, formatLocalISO, createTreeSelection, rgbaToHsva, hexToRgba, hsvaToRgba, rgbToHex, clamp01, copyText, nextGridCell, compareValues, addDays } 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';
@@ -102,7 +102,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) {
@@ -110,7 +110,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":
@@ -172,8 +172,8 @@ function IrisAvatar({
   style,
   ...rest
 }) {
-  const [failed, setFailed] = React67.useState(false);
-  React67.useEffect(() => {
+  const [failed, setFailed] = React70.useState(false);
+  React70.useEffect(() => {
     setFailed(false);
   }, [src]);
   const px = resolveSize(size);
@@ -280,7 +280,7 @@ function IrisSpinner({
   ...rest
 }) {
   const { t } = useI18n();
-  React67.useEffect(installSpinnerStyles, []);
+  React70.useEffect(installSpinnerStyles, []);
   const px = resolveSize2(size);
   const sw = strokeWidth || Math.max(1.5, Math.round(px * 0.12));
   const resolvedLabel = label ?? t("spinner.loading");
@@ -327,11 +327,27 @@ function IrisSpinner({
     }
   );
 }
+var STYLE_ID = "iris-card-styles";
+var installed2 = false;
+function installCardStyles() {
+  if (installed2 || typeof document === "undefined") return;
+  installed2 = true;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  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)"
 };
 function variantStyle(variant) {
   const base = {
@@ -344,7 +360,7 @@ function variantStyle(variant) {
   };
   switch (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":
@@ -367,6 +383,9 @@ function IrisCard({
     transition: hover ? "transform 160ms ease, box-shadow 160ms ease" : "none",
     ...style
   };
+  React70.useEffect(() => {
+    installCardStyles();
+  }, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -437,7 +456,7 @@ var CSS2 = `
   border-radius: 50%;
 }
 [data-iris-skeleton-shape="text"] {
-  border-radius: 4px;
+  border-radius: var(--iris-radius-sm, 4px);
 }
 @media (prefers-reduced-motion: reduce) {
   [data-iris-skeleton][data-iris-skeleton-animated="true"] {
@@ -445,22 +464,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();
   }
@@ -487,7 +506,7 @@ function IrisSkeleton({
   ...rest
 }) {
   const { t } = useI18n();
-  React67.useEffect(installSkeletonStyles, []);
+  React70.useEffect(installSkeletonStyles, []);
   const w = width !== void 0 ? toCss(width) : defaultWidth(shape);
   const h = height !== void 0 ? toCss(height) : defaultHeight(shape, width);
   return /* @__PURE__ */ jsx(
@@ -540,22 +559,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();
   }
@@ -579,7 +598,7 @@ function IrisProgress({
   style,
   ...rest
 }) {
-  React67.useEffect(installProgressStyles, []);
+  React70.useEffect(installProgressStyles, []);
   const isIndeterminate = indeterminate || value === null || value === void 0;
   const clamped = !isIndeterminate && value !== null ? Math.max(0, Math.min(max, value)) : 0;
   const percent = isIndeterminate ? 0 : clamped / Math.max(1, max) * 100;
@@ -621,7 +640,7 @@ function chipStyle(variant, tone, size, clickable, disabled) {
   const base = {
     display: "inline-flex",
     alignItems: "center",
-    gap: 6,
+    gap: "var(--iris-space-xs, 8px)",
     borderRadius: 9999,
     fontFamily: "var(--iris-font-family, inherit)",
     fontWeight: 500,
@@ -711,8 +730,8 @@ function IrisChip({
           cursor: disabled ? "not-allowed" : "pointer",
           color: "inherit",
           padding: 0,
-          marginInlineStart: 2,
-          fontSize: 12,
+          marginInlineStart: "var(--iris-space-xxs, 4px)",
+          fontSize: "var(--iris-font-size-xs, 12px)",
           lineHeight: 1,
           flexShrink: 0,
           opacity: 0.7
@@ -727,8 +746,14 @@ function IrisChip({
   return /* @__PURE__ */ jsx("span", { ...sharedProps, children: content });
 }
 var SIZE_MAP3 = {
-  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-padding-sm, 6px)"
+  },
+  md: {
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)"
+  }
 };
 function IrisKbd({
   keys = [],
@@ -741,7 +766,7 @@ function IrisKbd({
   const baseStyle = {
     display: "inline-flex",
     alignItems: "center",
-    gap: 3,
+    gap: "var(--iris-space-xxs, 4px)",
     fontFamily: "var(--iris-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)",
     fontSize: SIZE_MAP3[size].fontSize,
     verticalAlign: "middle",
@@ -818,16 +843,39 @@ function IrisEmptyState({
           "div",
           {
             "data-iris-empty-state-icon": "",
-            style: { color: "var(--iris-muted)", fontSize: 32, lineHeight: 1 },
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 48,
+              height: 48,
+              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
+            },
             children: icon
           }
         ) : null,
-        title ? /* @__PURE__ */ jsx("div", { "data-iris-empty-state-title": "", style: { fontWeight: 600, fontSize: 16 }, children: title }) : null,
+        title ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-iris-empty-state-title": "",
+            style: { fontWeight: 600, fontSize: "var(--iris-font-size-lg, 16px)" },
+            children: title
+          }
+        ) : null,
         description || children ? /* @__PURE__ */ jsx(
           "div",
           {
             "data-iris-empty-state-description": "",
-            style: { color: "var(--iris-muted)", fontSize: 14, maxWidth: 380 },
+            style: {
+              color: "var(--iris-muted)",
+              fontSize: "var(--iris-font-size-md, 14px)",
+              maxWidth: 380
+            },
             children: description ?? children
           }
         ) : null,
@@ -837,11 +885,17 @@ function IrisEmptyState({
   );
 }
 var SIZE_MAP4 = {
-  sm: { padding: "6px 8px", fontSize: "12px" },
-  md: { padding: "8px 12px", fontSize: "14px" },
-  lg: { padding: "10px 12px", fontSize: "16px" }
+  sm: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-space-xs, 8px)",
+    fontSize: "var(--iris-font-size-xs, 12px)"
+  },
+  md: { padding: "8px 12px", fontSize: "var(--iris-font-size-md, 14px)" },
+  lg: {
+    padding: "var(--iris-space-sm, 12px) var(--iris-padding-md, 12px)",
+    fontSize: "var(--iris-font-size-lg, 16px)"
+  }
 };
-var IrisTextarea = React67.forwardRef(
+var IrisTextarea = React70.forwardRef(
   function IrisTextarea2({
     size = "md",
     invalid = false,
@@ -857,10 +911,10 @@ var IrisTextarea = React67.forwardRef(
     defaultValue,
     ...rest
   }, ref) {
-    const [focused, setFocused] = React67.useState(false);
-    const innerRef = React67.useRef(null);
-    React67.useImperativeHandle(ref, () => innerRef.current, []);
-    const resize = React67.useCallback(() => {
+    const [focused, setFocused] = React70.useState(false);
+    const innerRef = React70.useRef(null);
+    React70.useImperativeHandle(ref, () => innerRef.current, []);
+    const resize = React70.useCallback(() => {
       const el = innerRef.current;
       if (!el || !autosize) return;
       const lineHeight = parseFloat(getComputedStyle(el).lineHeight || "0") || 20;
@@ -868,12 +922,12 @@ var IrisTextarea = React67.forwardRef(
       const maxPx = maxRows > 0 ? lineHeight * maxRows : Infinity;
       el.style.height = `${Math.min(maxPx, el.scrollHeight)}px`;
     }, [autosize, maxRows]);
-    React67.useEffect(() => {
+    React70.useEffect(() => {
       if (autosize) resize();
     }, [autosize, resize, value]);
     const sizeStyles = SIZE_MAP4[size];
     const borderColor = invalid ? "var(--iris-danger)" : focused ? "var(--iris-primary)" : "var(--iris-border)";
-    const boxShadow = focused ? `0 0 0 3px ${invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+    const boxShadow = focused ? `0 0 0 3px ${invalid ? "color-mix(in srgb, var(--iris-danger) 18%, transparent)" : "color-mix(in srgb, var(--iris-primary) 18%, transparent)"}` : "none";
     const wrapperStyle = {
       display: "flex",
       background: "var(--iris-background)",
@@ -940,7 +994,7 @@ var DIM_MAP = {
   md: { width: "36px", height: "20px", thumb: "16px" },
   lg: { width: "44px", height: "24px", thumb: "20px" }
 };
-var IrisSwitch = React67.forwardRef(function IrisSwitch2({
+var IrisSwitch = React70.forwardRef(function IrisSwitch2({
   checked,
   defaultChecked,
   onChange,
@@ -951,7 +1005,7 @@ var IrisSwitch = React67.forwardRef(function IrisSwitch2({
   style,
   ...rest
 }, ref) {
-  const [internalChecked, setInternalChecked] = React67.useState(Boolean(defaultChecked));
+  const [internalChecked, setInternalChecked] = React70.useState(Boolean(defaultChecked));
   const isControlled = checked !== void 0;
   const value = isControlled ? Boolean(checked) : internalChecked;
   const handleChange = (e) => {
@@ -968,7 +1022,7 @@ var IrisSwitch = React67.forwardRef(function IrisSwitch2({
     height: dim.height,
     background: value ? "var(--iris-primary)" : "var(--iris-border)",
     borderRadius: 999,
-    transition: "background-color 120ms ease",
+    transition: "background-color var(--iris-transition-fast, 150ms) ease",
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.6 : 1,
     verticalAlign: "middle"
@@ -983,8 +1037,8 @@ var IrisSwitch = React67.forwardRef(function IrisSwitch2({
     height: dim.thumb,
     background: "var(--iris-background)",
     borderRadius: 999,
-    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)"
   };
   return /* @__PURE__ */ jsxs(
     "label",
@@ -1029,9 +1083,13 @@ var IrisSwitch = React67.forwardRef(function IrisSwitch2({
   );
 });
 var SIZE_MAP5 = {
-  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: "4px 8px", fontSize: "var(--iris-font-size-xs, 12px)", minHeight: "28px" },
+  md: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "34px"
+  },
+  lg: { padding: "8px 12px", fontSize: "var(--iris-font-size-lg, 16px)", minHeight: "40px" }
 };
 function decimalsOf(step) {
   if (!Number.isFinite(step)) return 0;
@@ -1046,7 +1104,7 @@ function roundToStep(value, step) {
   const places = decimalsOf(step);
   return Number(value.toFixed(places));
 }
-var IrisNumberInput = React67.forwardRef(
+var IrisNumberInput = React70.forwardRef(
   function IrisNumberInput2({
     value,
     defaultValue = null,
@@ -1065,19 +1123,19 @@ var IrisNumberInput = React67.forwardRef(
   }, ref) {
     const { t } = useI18n();
     const isControlled = value !== void 0;
-    const [internal, setInternal] = React67.useState(defaultValue ?? null);
+    const [internal, setInternal] = React70.useState(defaultValue ?? null);
     const current = isControlled ? value : internal;
-    const [rawText, setRawText] = React67.useState(
+    const [rawText, setRawText] = React70.useState(
       current === null || current === void 0 ? "" : String(current)
     );
-    React67.useEffect(() => {
+    React70.useEffect(() => {
       if (current === null || current === void 0) {
         setRawText("");
       } else {
         setRawText(String(current));
       }
     }, [current]);
-    const [focused, setFocused] = React67.useState(false);
+    const [focused, setFocused] = React70.useState(false);
     const setValue = (next) => {
       if (next === null) {
         if (!isControlled) setInternal(null);
@@ -1137,7 +1195,7 @@ var IrisNumberInput = React67.forwardRef(
     };
     const sizeStyles = SIZE_MAP5[size];
     const borderColor = invalid ? "var(--iris-danger)" : focused ? "var(--iris-primary)" : "var(--iris-border)";
-    const boxShadow = focused ? `0 0 0 3px ${invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none";
+    const boxShadow = focused ? `0 0 0 3px ${invalid ? "color-mix(in srgb, var(--iris-danger) 18%, transparent)" : "color-mix(in srgb, var(--iris-primary) 18%, transparent)"}` : "none";
     const atMin = current !== null && current !== void 0 && current <= min;
     const atMax = current !== null && current !== void 0 && current >= max;
     const ctrlBtnStyle = {
@@ -1241,9 +1299,9 @@ var IrisNumberInput = React67.forwardRef(
   }
 );
 var SIZE_MAP6 = {
-  sm: { box: 32, height: 36, fontSize: 14 },
-  md: { box: 38, height: 44, fontSize: 18 },
-  lg: { box: 44, height: 52, fontSize: 20 }
+  sm: { box: 32, height: 36, fontSize: "var(--iris-font-size-md, 14px)" },
+  md: { box: 38, height: 44, fontSize: "var(--iris-font-size-xl, 18px)" },
+  lg: { box: 44, height: 52, fontSize: "var(--iris-font-size-2xl, 20px)" }
 };
 var PATTERNS = {
   numeric: /[0-9]/,
@@ -1276,12 +1334,12 @@ function IrisOtpInput({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(
+  const [internal, setInternal] = React70.useState(
     () => sanitize(defaultValue, type).slice(0, length)
   );
   const value = sanitize(isControlled ? valueProp : internal, type).slice(0, length);
-  const cellsRef = React67.useRef([]);
-  const [focusedIndex, setFocusedIndex] = React67.useState(-1);
+  const cellsRef = React70.useRef([]);
+  const [focusedIndex, setFocusedIndex] = React70.useState(-1);
   const focusCell = (i) => {
     const el = cellsRef.current[Math.max(0, Math.min(length - 1, i))];
     if (el) {
@@ -1345,7 +1403,7 @@ function IrisOtpInput({
     if (disabled) return;
     writeFrom(i, e.clipboardData.getData("text"));
   };
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (autoFocus) cellsRef.current[0]?.focus();
   }, [autoFocus]);
   const sz = SIZE_MAP6[size];
@@ -1404,7 +1462,7 @@ function IrisOtpInput({
               borderRadius: "var(--iris-radius-md, 6px)",
               outline: "none",
               opacity: disabled ? 0.6 : 1,
-              boxShadow: focused ? `0 0 0 3px ${invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none",
+              boxShadow: focused ? `0 0 0 3px ${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"
             }
           },
@@ -1442,9 +1500,9 @@ function IrisRating({
   const { t } = useI18n();
   const step = allowHalf ? 0.5 : 1;
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const value = clamp2(isControlled ? valueProp : internal, 0, max);
-  const [hover, setHover] = React67.useState(null);
+  const [hover, setHover] = React70.useState(null);
   const interactive = !readonly && !disabled;
   const display = hover ?? value;
   const setValue = (next) => {
@@ -1567,9 +1625,13 @@ function IrisRating({
   );
 }
 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: "4px 8px", fontSize: "var(--iris-font-size-xs, 12px)", minHeight: "28px" },
+  md: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "34px"
+  },
+  lg: { padding: "8px 12px", fontSize: "var(--iris-font-size-lg, 16px)", minHeight: "40px" }
 };
 function IrisCombobox({
   value: valueProp,
@@ -1588,17 +1650,17 @@ function IrisCombobox({
   ...rest
 }) {
   const { t } = useI18n();
-  const reactId = React67.useId();
+  const reactId = React70.useId();
   const listboxId = `${reactId}-listbox`;
   const optionId = (i) => `${reactId}-opt-${i}`;
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const currentValue = isControlled ? valueProp : internal;
-  const [query, setQuery] = React67.useState("");
-  const [filtering, setFiltering] = React67.useState(false);
-  const [open, setOpen] = React67.useState(false);
-  const [activeIndex, setActiveIndex] = React67.useState(-1);
-  const [focused, setFocused] = React67.useState(false);
+  const [query, setQuery] = React70.useState("");
+  const [filtering, setFiltering] = React70.useState(false);
+  const [open, setOpen] = React70.useState(false);
+  const [activeIndex, setActiveIndex] = React70.useState(-1);
+  const [focused, setFocused] = React70.useState(false);
   const selected = options.find((o) => o.value === currentValue);
   const display = filtering ? query : selected?.label ?? "";
   const needle = query.trim().toLowerCase();
@@ -1714,7 +1776,7 @@ function IrisCombobox({
               borderRadius: "var(--iris-radius-md, 6px)",
               outline: "none",
               opacity: disabled ? 0.6 : 1,
-              boxShadow: focused ? `0 0 0 3px ${invalid ? "rgba(239, 68, 68, 0.18)" : "rgba(99, 102, 241, 0.18)"}` : "none",
+              boxShadow: focused ? `0 0 0 3px ${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"
             }
           }
@@ -1740,14 +1802,18 @@ function IrisCombobox({
               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)"
             },
             children: filtered.length === 0 ? /* @__PURE__ */ jsx(
               "li",
               {
                 "data-iris-combobox-empty": "",
                 "aria-disabled": "true",
-                style: { padding: "6px 10px", color: "var(--iris-muted)", fontSize: sz.fontSize },
+                style: {
+                  padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+                  color: "var(--iris-muted)",
+                  fontSize: sz.fontSize
+                },
                 children: resolvedEmpty
               }
             ) : filtered.map((opt, i) => {
@@ -1766,7 +1832,7 @@ function IrisCombobox({
                   onMouseEnter: () => setActiveIndex(i),
                   onClick: () => selectOption(opt),
                   style: {
-                    padding: "6px 10px",
+                    padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
                     fontSize: sz.fontSize,
                     borderRadius: "var(--iris-radius-sm, 4px)",
                     cursor: opt.disabled ? "not-allowed" : "pointer",
@@ -1787,7 +1853,7 @@ function IrisCombobox({
 }
 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)"
@@ -1869,7 +1935,10 @@ function IrisTimeline({
                       "div",
                       {
                         "data-iris-timeline-time": "",
-                        style: { fontSize: 12, color: "var(--iris-muted)" },
+                        style: {
+                          fontSize: "var(--iris-font-size-xs, 12px)",
+                          color: "var(--iris-muted)"
+                        },
                         children: item.time
                       }
                     ) : null,
@@ -1885,7 +1954,10 @@ function IrisTimeline({
                       "div",
                       {
                         "data-iris-timeline-desc": "",
-                        style: { fontSize: 14, color: "var(--iris-foreground)" },
+                        style: {
+                          fontSize: "var(--iris-font-size-md, 14px)",
+                          color: "var(--iris-foreground)"
+                        },
                         children: item.description
                       }
                     ) : null
@@ -1915,7 +1987,7 @@ var ARROW_BTN = {
   background: "var(--iris-background)",
   color: "var(--iris-foreground)",
   cursor: "pointer",
-  fontSize: 18,
+  fontSize: "var(--iris-font-size-xl, 18px)",
   lineHeight: 1
 };
 function prefersReducedMotion() {
@@ -1938,10 +2010,10 @@ function IrisCarousel({
   ...rest
 }) {
   const { t } = useI18n();
-  const slides = React67.Children.toArray(children);
+  const slides = React70.Children.toArray(children);
   const count = slides.length;
   const isControlled = indexProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultIndex);
+  const [internal, setInternal] = React70.useState(defaultIndex);
   const current = Math.min(
     Math.max(0, isControlled ? indexProp : internal),
     Math.max(0, count - 1)
@@ -1953,12 +2025,12 @@ function IrisCarousel({
     if (!isControlled) setInternal(next);
     onIndexChange?.(next);
   };
-  const onIndexChangeRef = React67.useRef(onIndexChange);
+  const onIndexChangeRef = React70.useRef(onIndexChange);
   onIndexChangeRef.current = onIndexChange;
-  const [hovered, setHovered] = React67.useState(false);
-  const [focusedWithin, setFocusedWithin] = React67.useState(false);
+  const [hovered, setHovered] = React70.useState(false);
+  const [focusedWithin, setFocusedWithin] = React70.useState(false);
   const paused = pauseOnHover && hovered || focusedWithin;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!autoplay || paused || count <= 1 || prefersReducedMotion()) return;
     const id = setTimeout(() => {
       const target = (current + 1) % count;
@@ -2062,7 +2134,7 @@ function IrisCarousel({
             style: {
               display: "flex",
               justifyContent: "center",
-              gap: 6,
+              gap: "var(--iris-space-xs, 8px)",
               marginBlockStart: 8
             },
             children: slides.map((_, i) => /* @__PURE__ */ jsx(
@@ -2108,13 +2180,22 @@ function IrisCarousel({
     }
   );
 }
-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)"
+};
 function IrisStatistic({
   label,
   value,
@@ -2122,6 +2203,7 @@ function IrisStatistic({
   suffix,
   description,
   trend,
+  trendTone,
   trendValue,
   size = "md",
   style,
@@ -2138,7 +2220,14 @@ function IrisStatistic({
       ...rest,
       style: { display: "flex", flexDirection: "column", gap: 4, ...style },
       children: [
-        label != null ? /* @__PURE__ */ jsx("div", { "data-iris-statistic-label": "", style: { fontSize: 13, color: "var(--iris-muted)" }, children: label }) : null,
+        label != null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-iris-statistic-label": "",
+            style: { fontSize: "var(--iris-font-size-sm, 13px)", color: "var(--iris-muted)" },
+            children: label
+          }
+        ) : null,
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -2167,8 +2256,8 @@ function IrisStatistic({
               display: "inline-flex",
               alignItems: "center",
               gap: 4,
-              fontSize: 13,
-              color: trend ? TREND_COLOR[trend] : "var(--iris-muted)"
+              fontSize: "var(--iris-font-size-sm, 13px)",
+              color: trend ? trendTone ? TREND_TONE[trendTone] : TREND_COLOR[trend] : "var(--iris-muted)"
             },
             children: [
               trend && TREND_ARROW[trend] ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: TREND_ARROW[trend] }) : null,
@@ -2176,7 +2265,14 @@ function IrisStatistic({
             ]
           }
         ) : null,
-        description != null ? /* @__PURE__ */ jsx("div", { "data-iris-statistic-desc": "", style: { fontSize: 12, color: "var(--iris-muted)" }, children: description }) : null
+        description != null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-iris-statistic-desc": "",
+            style: { fontSize: "var(--iris-font-size-xs, 12px)", color: "var(--iris-muted)" },
+            children: description
+          }
+        ) : null
       ]
     }
   );
@@ -2194,7 +2290,7 @@ function IrisDescriptions({
   const pad3 = bordered ? "8px 12px" : void 0;
   const labelStyle = {
     margin: 0,
-    fontSize: 13,
+    fontSize: "var(--iris-font-size-sm, 13px)",
     fontWeight: 500,
     color: "var(--iris-muted)",
     padding: pad3,
@@ -2202,7 +2298,7 @@ function IrisDescriptions({
   };
   const valueStyle = {
     margin: 0,
-    fontSize: 14,
+    fontSize: "var(--iris-font-size-md, 14px)",
     color: "var(--iris-foreground)",
     padding: pad3
   };
@@ -2228,7 +2324,7 @@ function IrisDescriptions({
       children: items.map((item, i) => {
         const rowBorder = bordered && i >= columns ? "1px solid var(--iris-border)" : void 0;
         if (horizontal) {
-          return /* @__PURE__ */ jsxs(React67.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React70.Fragment, { children: [
             /* @__PURE__ */ jsx(
               "dt",
               {
@@ -2285,14 +2381,14 @@ function IrisTransfer({
   const safeOptions = options ?? [];
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const value = isControlled ? valueProp : internal;
   const valueSet = new Set(value);
-  const sourceModelRef = React67.useRef(null);
+  const sourceModelRef = React70.useRef(null);
   if (sourceModelRef.current === null) {
     sourceModelRef.current = createSelectionModel({ mode: "multiple" });
   }
-  const targetModelRef = React67.useRef(null);
+  const targetModelRef = React70.useRef(null);
   if (targetModelRef.current === null) {
     targetModelRef.current = createSelectionModel({ mode: "multiple" });
   }
@@ -2300,8 +2396,8 @@ function IrisTransfer({
   const targetModel = targetModelRef.current;
   const sourceChecked = useStore(sourceModel.store);
   const targetChecked = useStore(targetModel.store);
-  const [sourceQuery, setSourceQuery] = React67.useState("");
-  const [targetQuery, setTargetQuery] = React67.useState("");
+  const [sourceQuery, setSourceQuery] = React70.useState("");
+  const [targetQuery, setTargetQuery] = React70.useState("");
   const setValue = (next) => {
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
@@ -2341,7 +2437,7 @@ function IrisTransfer({
     background: "var(--iris-background)",
     color: "var(--iris-foreground)",
     cursor: "pointer",
-    fontSize: 16,
+    fontSize: "var(--iris-font-size-lg, 16px)",
     lineHeight: 1
   };
   const renderPane = (side) => {
@@ -2369,33 +2465,51 @@ function IrisTransfer({
             alignItems: "center",
             justifyContent: "space-between",
             gap: 8,
-            padding: "6px 10px",
+            padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
             borderBlockEnd: "1px solid var(--iris-border)",
-            fontSize: 13,
+            fontSize: "var(--iris-font-size-sm, 13px)",
             fontWeight: 500
           },
           children: [
-            /* @__PURE__ */ jsxs("label", { style: { display: "inline-flex", alignItems: "center", gap: 6, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  "data-iris-transfer-select-all": "",
-                  checked: allChecked,
-                  disabled: disabled || selectable.length === 0,
-                  ref: (el) => {
-                    if (el) el.indeterminate = someChecked && !allChecked;
-                  },
-                  onChange: toggleAll
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { children: titles?.[side === "source" ? 0 : 1] })
-            ] }),
-            /* @__PURE__ */ jsxs("span", { "data-iris-transfer-count": "", style: { color: "var(--iris-muted)", fontSize: 12 }, children: [
-              checkedCount,
-              "/",
-              items.length
-            ] })
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "var(--iris-space-xs, 8px)",
+                  minWidth: 0
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      "data-iris-transfer-select-all": "",
+                      checked: allChecked,
+                      disabled: disabled || selectable.length === 0,
+                      ref: (el) => {
+                        if (el) el.indeterminate = someChecked && !allChecked;
+                      },
+                      onChange: toggleAll
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { children: titles?.[side === "source" ? 0 : 1] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-iris-transfer-count": "",
+                style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" },
+                children: [
+                  checkedCount,
+                  "/",
+                  items.length
+                ]
+              }
+            )
           ]
         }
       ),
@@ -2412,7 +2526,7 @@ function IrisTransfer({
           style: {
             margin: 8,
             padding: "4px 8px",
-            fontSize: 13,
+            fontSize: "var(--iris-font-size-sm, 13px)",
             border: "1px solid var(--iris-border)",
             borderRadius: "var(--iris-radius-sm, 4px)",
             background: "var(--iris-background)",
@@ -2438,9 +2552,9 @@ function IrisTransfer({
             {
               "data-iris-transfer-empty": "",
               style: {
-                padding: "8px 10px",
+                padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
                 color: "var(--iris-muted)",
-                fontSize: 13,
+                fontSize: "var(--iris-font-size-sm, 13px)",
                 textAlign: "center"
               },
               children: t("transfer.empty")
@@ -2456,7 +2570,7 @@ function IrisTransfer({
                 borderRadius: "var(--iris-radius-sm, 4px)",
                 cursor: o.disabled ? "not-allowed" : "pointer",
                 opacity: o.disabled ? 0.5 : 1,
-                fontSize: 14
+                fontSize: "var(--iris-font-size-md, 14px)"
               },
               children: [
                 /* @__PURE__ */ jsx(
@@ -2602,10 +2716,10 @@ function IrisBackTop({
   ...rest
 }) {
   const { t } = useI18n();
-  const [visible, setVisible] = React67.useState(false);
-  const targetRef = React67.useRef(target);
+  const [visible, setVisible] = React70.useState(false);
+  const targetRef = React70.useRef(target);
   targetRef.current = target;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     const el = resolve(targetRef.current);
     const onScroll = () => {
       const top = el === window ? window.scrollY ?? 0 : el.scrollTop;
@@ -2647,11 +2761,11 @@ function IrisBackTop({
         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: 18,
+        fontSize: "var(--iris-font-size-xl, 18px)",
         ...style
       },
       children: children ?? "\u2191"
@@ -2669,17 +2783,17 @@ function IrisAffix({
   className,
   ...rest
 }) {
-  const placeholderRef = React67.useRef(null);
-  const contentRef = React67.useRef(null);
-  const [affixed, setAffixed] = React67.useState(false);
-  const [fixedStyle, setFixedStyle] = React67.useState(void 0);
-  const [reserve, setReserve] = React67.useState(void 0);
-  const onChangeRef = React67.useRef(onChange);
+  const placeholderRef = React70.useRef(null);
+  const contentRef = React70.useRef(null);
+  const [affixed, setAffixed] = React70.useState(false);
+  const [fixedStyle, setFixedStyle] = React70.useState(void 0);
+  const [reserve, setReserve] = React70.useState(void 0);
+  const onChangeRef = React70.useRef(onChange);
   onChangeRef.current = onChange;
-  const targetRef = React67.useRef(target);
+  const targetRef = React70.useRef(target);
   targetRef.current = target;
-  const affixedRef = React67.useRef(false);
-  React67.useEffect(() => {
+  const affixedRef = React70.useRef(false);
+  React70.useEffect(() => {
     const el = resolve2(targetRef.current);
     const useTop = offsetTop != null || offsetBottom == null;
     const ot = offsetTop ?? 0;
@@ -2728,7 +2842,7 @@ function IrisAffix({
   );
 }
 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: "!" }
@@ -2774,9 +2888,9 @@ function IrisResult({
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
-              fontSize: 30,
+              fontSize: "var(--iris-font-size-4xl, 30px)",
               fontWeight: 700,
-              color: "#fff",
+              color: "var(--iris-primary-foreground, #fff)",
               background: s.color,
               marginBlockEnd: 8
             },
@@ -2787,7 +2901,11 @@ function IrisResult({
           "div",
           {
             "data-iris-result-title": "",
-            style: { fontSize: 20, fontWeight: 600, color: "var(--iris-foreground)" },
+            style: {
+              fontSize: "var(--iris-font-size-2xl, 20px)",
+              fontWeight: 600,
+              color: "var(--iris-foreground)"
+            },
             children: title
           }
         ) : null,
@@ -2795,7 +2913,11 @@ function IrisResult({
           "div",
           {
             "data-iris-result-subtitle": "",
-            style: { fontSize: 14, color: "var(--iris-muted)", maxWidth: 480 },
+            style: {
+              fontSize: "var(--iris-font-size-md, 14px)",
+              color: "var(--iris-muted)",
+              maxWidth: 480
+            },
             children: subtitle
           }
         ) : null,
@@ -2819,9 +2941,13 @@ function IrisResult({
   );
 }
 var SIZE_MAP9 = {
-  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: "4px 8px", fontSize: "var(--iris-font-size-xs, 12px)", minHeight: "28px" },
+  md: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "34px"
+  },
+  lg: { padding: "8px 12px", fontSize: "var(--iris-font-size-lg, 16px)", minHeight: "40px" }
 };
 function findNode(nodes, value) {
   for (const n of nodes) {
@@ -2850,13 +2976,13 @@ function IrisTreeSelect({
   ...rest
 }) {
   const { t } = useI18n();
-  const rootRef = React67.useRef(null);
+  const rootRef = React70.useRef(null);
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const currentValue = isControlled ? value : internal;
-  const [open, setOpen] = React67.useState(false);
-  const [expanded, setExpanded] = React67.useState(() => new Set(defaultExpanded ?? []));
-  const [focused, setFocused] = React67.useState(false);
+  const [open, setOpen] = React70.useState(false);
+  const [expanded, setExpanded] = React70.useState(() => new Set(defaultExpanded ?? []));
+  const [focused, setFocused] = React70.useState(false);
   const selected = currentValue ? findNode(options, currentValue) : void 0;
   const selectNode = (node) => {
     if (node.disabled) return;
@@ -2870,7 +2996,7 @@ function IrisTreeSelect({
     else next.add(v);
     return next;
   });
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
@@ -2902,7 +3028,7 @@ function IrisTreeSelect({
                 alignItems: "center",
                 gap: 4,
                 paddingInlineStart: depth * 16 + 6,
-                paddingInlineEnd: 6,
+                paddingInlineEnd: "var(--iris-space-xs, 8px)",
                 paddingBlock: 4,
                 borderRadius: "var(--iris-radius-sm, 4px)",
                 background: isSelected ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
@@ -2922,7 +3048,7 @@ function IrisTreeSelect({
                       background: "transparent",
                       cursor: "pointer",
                       color: "var(--iris-muted)",
-                      fontSize: 10
+                      fontSize: "var(--iris-font-size-xs, 12px)"
                     },
                     children: isExpanded ? "\u25BE" : "\u25B8"
                   }
@@ -3006,7 +3132,14 @@ function IrisTreeSelect({
             },
             children: [
               /* @__PURE__ */ jsx("span", { "data-iris-tree-select-value": "", children: selected ? selected.label : placeholder ?? t("select.placeholder") }),
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "var(--iris-muted)", fontSize: 10 }, children: "\u25BE" })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" },
+                  children: "\u25BE"
+                }
+              )
             ]
           }
         ),
@@ -3029,7 +3162,7 @@ function IrisTreeSelect({
               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)"
             },
             children: renderNodes(options, 0)
           }
@@ -3066,17 +3199,17 @@ function IrisMentions({
   className,
   ...rest
 }) {
-  const reactId = React67.useId();
+  const reactId = React70.useId();
   const listboxId = `${reactId}-listbox`;
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const text = isControlled ? value : internal;
-  const textareaRef = React67.useRef(null);
-  const startRef = React67.useRef(0);
-  const caretRef = React67.useRef(0);
-  const pendingCaret = React67.useRef(null);
-  const [active, setActive] = React67.useState(null);
-  const [activeIndex, setActiveIndex] = React67.useState(0);
+  const textareaRef = React70.useRef(null);
+  const startRef = React70.useRef(0);
+  const caretRef = React70.useRef(0);
+  const pendingCaret = React70.useRef(null);
+  const [active, setActive] = React70.useState(null);
+  const [activeIndex, setActiveIndex] = React70.useState(0);
   const filtered = active ? options.filter((o) => o.label.toLowerCase().includes(active.query.toLowerCase())) : [];
   const open = active !== null && filtered.length > 0;
   const setText = (next) => {
@@ -3124,7 +3257,7 @@ function IrisMentions({
       setActive(null);
     }
   };
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (pendingCaret.current != null && textareaRef.current) {
       const pos = pendingCaret.current;
       textareaRef.current.focus();
@@ -3164,7 +3297,7 @@ function IrisMentions({
               boxSizing: "border-box",
               width: "100%",
               padding: "8px 12px",
-              fontSize: 14,
+              fontSize: "var(--iris-font-size-md, 14px)",
               fontFamily: "inherit",
               color: "var(--iris-foreground)",
               background: "var(--iris-background)",
@@ -3196,7 +3329,7 @@ function IrisMentions({
               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)"
             },
             children: filtered.map((opt, i) => /* @__PURE__ */ jsx(
               "li",
@@ -3210,8 +3343,8 @@ function IrisMentions({
                 onMouseEnter: () => setActiveIndex(i),
                 onClick: () => insert(opt),
                 style: {
-                  padding: "6px 10px",
-                  fontSize: 14,
+                  padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+                  fontSize: "var(--iris-font-size-md, 14px)",
                   borderRadius: "var(--iris-radius-sm, 4px)",
                   cursor: "pointer",
                   background: i === activeIndex ? "var(--iris-surface-hover, rgba(99,102,241,0.1))" : "transparent"
@@ -3227,9 +3360,13 @@ function IrisMentions({
   );
 }
 var SIZE_MAP10 = {
-  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: "4px 8px", fontSize: "var(--iris-font-size-xs, 12px)", minHeight: "28px" },
+  md: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: "34px"
+  },
+  lg: { padding: "8px 12px", fontSize: "var(--iris-font-size-lg, 16px)", minHeight: "40px" }
 };
 function pathLabels(options, path) {
   const labels = [];
@@ -3270,13 +3407,13 @@ function IrisCascader({
   ...rest
 }) {
   const { t } = useI18n();
-  const rootRef = React67.useRef(null);
+  const rootRef = React70.useRef(null);
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const currentValue = isControlled ? value : internal;
-  const [open, setOpen] = React67.useState(false);
-  const [activePath, setActivePath] = React67.useState(defaultValue);
-  const [focused, setFocused] = React67.useState(false);
+  const [open, setOpen] = React70.useState(false);
+  const [activePath, setActivePath] = React70.useState(defaultValue);
+  const [focused, setFocused] = React70.useState(false);
   const columns = buildColumns(options, activePath);
   const labels = pathLabels(options, currentValue);
   const toggleOpen = () => {
@@ -3297,7 +3434,7 @@ function IrisCascader({
       setOpen(false);
     }
   };
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
@@ -3362,7 +3499,14 @@ function IrisCascader({
             },
             children: [
               /* @__PURE__ */ jsx("span", { "data-iris-cascader-value": "", children: labels.length ? labels.join(separator) : placeholder ?? t("select.placeholder") }),
-              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "var(--iris-muted)", fontSize: 10 }, children: "\u25BE" })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" },
+                  children: "\u25BE"
+                }
+              )
             ]
           }
         ),
@@ -3380,7 +3524,7 @@ function IrisCascader({
               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"
             },
             children: columns.map((col, ci) => /* @__PURE__ */ jsx(
@@ -3415,7 +3559,7 @@ function IrisCascader({
                         alignItems: "center",
                         justifyContent: "space-between",
                         gap: 8,
-                        padding: "6px 10px",
+                        padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
                         fontSize: sz.fontSize,
                         borderRadius: "var(--iris-radius-sm, 4px)",
                         cursor: node.disabled ? "not-allowed" : "pointer",
@@ -3424,7 +3568,17 @@ function IrisCascader({
                       },
                       children: [
                         /* @__PURE__ */ jsx("span", { children: node.label }),
-                        hasChildren ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "var(--iris-muted)", fontSize: 10 }, children: "\u203A" }) : null
+                        hasChildren ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            style: {
+                              color: "var(--iris-muted)",
+                              fontSize: "var(--iris-font-size-xs, 12px)"
+                            },
+                            children: "\u203A"
+                          }
+                        ) : null
                       ]
                     },
                     node.value
@@ -3440,9 +3594,17 @@ function IrisCascader({
   );
 }
 var SIZE_MAP11 = {
-  sm: { padding: "2px 8px", fontSize: 12, height: 24 },
-  md: { padding: "4px 12px", fontSize: 14, height: 30 },
-  lg: { padding: "6px 16px", fontSize: 16, height: 36 }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-xs, 8px)",
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    height: 24
+  },
+  md: { padding: "4px 12px", fontSize: "var(--iris-font-size-md, 14px)", height: 30 },
+  lg: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-space-md, 16px)",
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    height: 36
+  }
 };
 var normalize = (options) => options.map((o) => typeof o === "string" ? { label: o, value: o } : o);
 function IrisSegmented({
@@ -3461,9 +3623,9 @@ function IrisSegmented({
   const safeOptions = options ?? [];
   const norm = normalize(safeOptions);
   const isControlled = value !== void 0;
-  const refs = React67.useRef([]);
+  const refs = React70.useRef([]);
   const toKeys = (v) => v ? [v] : [];
-  const modelRef = React67.useRef(null);
+  const modelRef = React70.useRef(null);
   if (modelRef.current === null) {
     modelRef.current = createSelectionModel({
       mode: "single",
@@ -3473,16 +3635,16 @@ function IrisSegmented({
   }
   const model = modelRef.current;
   const currentValue = useStore(model.store)[0] ?? "";
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (isControlled) model.sync(toKeys(value));
   }, [value, isControlled, model]);
   const displayValue = isControlled ? toKeys(value)[0] ?? "" : currentValue;
   const rebaseToProp = () => {
     if (isControlled) model.sync(toKeys(value));
   };
-  const isOptionEnabled = React67.useCallback((i) => !norm[i]?.disabled, [norm]);
+  const isOptionEnabled = React70.useCallback((i) => !norm[i]?.disabled, [norm]);
   const selectedIndex = norm.findIndex((o) => o.value === displayValue);
-  const navRef = React67.useRef(null);
+  const navRef = React70.useRef(null);
   if (navRef.current === null) {
     navRef.current = createKeyboardNav({
       count: norm.length,
@@ -3493,7 +3655,7 @@ function IrisSegmented({
     });
   }
   const nav = navRef.current;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     nav.reset(norm.length);
   });
   const rovingIndex = nav.index;
@@ -3527,8 +3689,8 @@ function IrisSegmented({
       style: {
         display: block ? "flex" : "inline-flex",
         width: block ? "100%" : void 0,
-        gap: 2,
-        padding: 2,
+        gap: "var(--iris-space-xxs, 4px)",
+        padding: "var(--iris-space-xxs, 4px)",
         background: "var(--iris-surface)",
         borderRadius: "var(--iris-radius-md, 6px)",
         opacity: disabled ? 0.6 : 1,
@@ -3588,12 +3750,12 @@ function IrisImage({
   ...rest
 }) {
   const { t } = useI18n();
-  const [errored, setErrored] = React67.useState(false);
-  const [open, setOpen] = React67.useState(false);
-  React67.useEffect(() => {
+  const [errored, setErrored] = React70.useState(false);
+  const [open, setOpen] = React70.useState(false);
+  React70.useEffect(() => {
     setErrored(false);
   }, [src]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -3677,8 +3839,8 @@ function IrisImage({
                 borderRadius: "50%",
                 border: "none",
                 background: "rgba(0,0,0,0.5)",
-                color: "#fff",
-                fontSize: 22,
+                color: "var(--iris-primary-foreground, #fff)",
+                fontSize: "var(--iris-font-size-2xl, 20px)",
                 lineHeight: 1,
                 cursor: "pointer"
               },
@@ -3698,10 +3860,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 ? 22 : 16,
+  boxShadow: "var(--iris-shadow-md)",
+  fontSize: size > 44 ? "var(--iris-font-size-2xl, 20px)" : "var(--iris-font-size-lg, 16px)",
   lineHeight: 1
 });
 function IrisFloatButton({
@@ -3717,12 +3879,12 @@ function IrisFloatButton({
   ...rest
 }) {
   const { t } = useI18n();
-  const rootRef = React67.useRef(null);
-  const [open, setOpen] = React67.useState(false);
+  const rootRef = React70.useRef(null);
+  const [open, setOpen] = React70.useState(false);
   const hasActions = !!actions && actions.length > 0;
   const content = children ?? icon ?? "+";
   const radius = shape === "circle" ? "50%" : "var(--iris-radius-md, 6px)";
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
@@ -3820,17 +3982,17 @@ function IrisAnchor({
   className,
   ...rest
 }) {
-  const [active, setActive] = React67.useState("");
-  const activeRef = React67.useRef("");
-  const itemsRef = React67.useRef(items);
+  const [active, setActive] = React70.useState("");
+  const activeRef = React70.useRef("");
+  const itemsRef = React70.useRef(items);
   itemsRef.current = items;
-  const offsetRef = React67.useRef(offset);
+  const offsetRef = React70.useRef(offset);
   offsetRef.current = offset;
-  const onChangeRef = React67.useRef(onChange);
+  const onChangeRef = React70.useRef(onChange);
   onChangeRef.current = onChange;
-  const targetRef = React67.useRef(target);
+  const targetRef = React70.useRef(target);
   targetRef.current = target;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     const el = resolve3(targetRef.current);
     const compute = () => {
       let current = "";
@@ -3886,7 +4048,7 @@ function IrisAnchor({
               color: isActive ? "var(--iris-primary)" : "var(--iris-foreground)",
               fontWeight: isActive ? 600 : 400,
               textDecoration: "none",
-              fontSize: 14
+              fontSize: "var(--iris-font-size-md, 14px)"
             },
             children: item.title
           }
@@ -3918,11 +4080,11 @@ function IrisCountdown({
   className,
   ...rest
 }) {
-  const [now, setNow] = React67.useState(() => Date.now());
-  const onFinishRef = React67.useRef(onFinish);
+  const [now, setNow] = React70.useState(() => Date.now());
+  const onFinishRef = React70.useRef(onFinish);
   onFinishRef.current = onFinish;
-  const finishedRef = React67.useRef(false);
-  React67.useEffect(() => {
+  const finishedRef = React70.useRef(false);
+  React70.useEffect(() => {
     finishedRef.current = false;
     const tick = format.includes("SSS") ? 100 : 1e3;
     const finishIfDue = (n, id2) => {
@@ -3953,7 +4115,14 @@ function IrisCountdown({
       ...rest,
       style: { display: "flex", flexDirection: "column", gap: 4, ...style },
       children: [
-        title != null ? /* @__PURE__ */ jsx("div", { "data-iris-countdown-title": "", style: { fontSize: 13, color: "var(--iris-muted)" }, children: title }) : null,
+        title != null ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-iris-countdown-title": "",
+            style: { fontSize: "var(--iris-font-size-sm, 13px)", color: "var(--iris-muted)" },
+            children: title
+          }
+        ) : null,
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -3980,7 +4149,7 @@ function IrisCountdown({
 }
 var btnBase = {
   padding: "4px 12px",
-  fontSize: 13,
+  fontSize: "var(--iris-font-size-sm, 13px)",
   borderRadius: "var(--iris-radius-sm, 4px)",
   cursor: "pointer"
 };
@@ -3994,7 +4163,7 @@ var btnPrimary = {
   ...btnBase,
   border: "none",
   background: "var(--iris-primary)",
-  color: "#fff"
+  color: "var(--iris-primary-foreground, #fff)"
 };
 function IrisTour({
   steps,
@@ -4009,19 +4178,19 @@ function IrisTour({
 }) {
   const { t } = useI18n();
   const isControlled = open !== void 0;
-  const [internalOpen, setInternalOpen] = React67.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
   const isOpen = isControlled ? open : internalOpen;
-  const [step, setStep] = React67.useState(0);
-  const [spotlight, setSpotlight] = React67.useState(null);
-  const wasOpen = React67.useRef(false);
+  const [step, setStep] = React70.useState(0);
+  const [spotlight, setSpotlight] = React70.useState(null);
+  const wasOpen = React70.useRef(false);
   const total = steps.length;
   const current = Math.min(step, Math.max(0, total - 1));
   const stepData = steps[current];
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (isOpen && !wasOpen.current) setStep(0);
     wasOpen.current = isOpen;
   }, [isOpen]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isOpen || !stepData) return;
     const el = stepData.target?.();
     if (el) {
@@ -4035,7 +4204,7 @@ function IrisTour({
     if (!isControlled) setInternalOpen(false);
     onClose?.();
   };
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isOpen) return;
     const onKey = (e) => {
       if (e.key === "Escape") close();
@@ -4105,16 +4274,27 @@ function IrisTour({
           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
         },
         children: [
-          stepData.title != null ? /* @__PURE__ */ jsx("div", { "data-iris-tour-title": "", style: { fontWeight: 600, marginBlockEnd: 6 }, children: stepData.title }) : null,
+          stepData.title != null ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-iris-tour-title": "",
+              style: { fontWeight: 600, marginBlockEnd: "var(--iris-space-xs, 8px)" },
+              children: stepData.title
+            }
+          ) : null,
           stepData.description != null ? /* @__PURE__ */ jsx(
             "div",
             {
               "data-iris-tour-description": "",
-              style: { fontSize: 14, color: "var(--iris-foreground)", marginBlockEnd: 12 },
+              style: {
+                fontSize: "var(--iris-font-size-md, 14px)",
+                color: "var(--iris-foreground)",
+                marginBlockEnd: 12
+              },
               children: stepData.description
             }
           ) : null,
@@ -4123,7 +4303,14 @@ function IrisTour({
             {
               style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 },
               children: [
-                /* @__PURE__ */ jsx("span", { "data-iris-tour-indicator": "", style: { fontSize: 12, color: "var(--iris-muted)" }, children: t("tour.step", { current: current + 1, total }) }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-iris-tour-indicator": "",
+                    style: { fontSize: "var(--iris-font-size-xs, 12px)", color: "var(--iris-muted)" },
+                    children: t("tour.step", { current: current + 1, total })
+                  }
+                ),
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
                   /* @__PURE__ */ jsx("button", { type: "button", "data-iris-tour-skip": "", onClick: close, style: btnGhost, children: t("tour.skip") }),
                   current > 0 ? /* @__PURE__ */ jsx("button", { type: "button", "data-iris-tour-prev": "", onClick: prev, style: btnGhost, children: t("tour.prev") }) : null,
@@ -4154,10 +4341,10 @@ function IrisTagInput({
 }) {
   const { t } = useI18n();
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const tags = isControlled ? value : internal;
-  const [input, setInput] = React67.useState("");
-  const [focused, setFocused] = React67.useState(false);
+  const [input, setInput] = React70.useState("");
+  const [focused, setFocused] = React70.useState(false);
   const setTags = (next) => {
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
@@ -4209,14 +4396,14 @@ function IrisTagInput({
         display: "flex",
         flexWrap: "wrap",
         alignItems: "center",
-        gap: 6,
+        gap: "var(--iris-space-xs, 8px)",
         padding: "4px 8px",
         minHeight: 34,
         background: "var(--iris-background)",
         border: `1px solid ${borderColor}`,
         borderRadius: "var(--iris-radius-md, 6px)",
         opacity: disabled ? 0.6 : 1,
-        boxShadow: focused ? `0 0 0 3px rgba(99, 102, 241, 0.18)` : "none",
+        boxShadow: focused ? `0 0 0 3px color-mix(in srgb, var(--iris-primary) 18%, transparent)` : "none",
         transition: "border-color 120ms ease, box-shadow 120ms ease",
         ...style
       },
@@ -4230,8 +4417,8 @@ function IrisTagInput({
               display: "inline-flex",
               alignItems: "center",
               gap: 4,
-              padding: "2px 6px",
-              fontSize: 13,
+              padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
+              fontSize: "var(--iris-font-size-sm, 13px)",
               background: "var(--iris-surface)",
               border: "1px solid var(--iris-border)",
               borderRadius: "var(--iris-radius-sm, 4px)",
@@ -4252,7 +4439,7 @@ function IrisTagInput({
                     background: "transparent",
                     color: "var(--iris-muted)",
                     cursor: disabled ? "not-allowed" : "pointer",
-                    fontSize: 14,
+                    fontSize: "var(--iris-font-size-md, 14px)",
                     lineHeight: 1,
                     padding: 0
                   },
@@ -4286,8 +4473,8 @@ function IrisTagInput({
               background: "transparent",
               color: "var(--iris-foreground)",
               fontFamily: "inherit",
-              fontSize: 14,
-              padding: "2px 0"
+              fontSize: "var(--iris-font-size-md, 14px)",
+              padding: "var(--iris-space-xxs, 4px) 0"
             }
           }
         )
@@ -4296,9 +4483,12 @@ function IrisTagInput({
   );
 }
 var SIZE_MAP12 = {
-  sm: { padding: "4px 8px", fontSize: 12 },
-  md: { padding: "6px 12px", fontSize: 14 },
-  lg: { padding: "8px 16px", fontSize: 16 }
+  sm: { padding: "4px 8px", fontSize: "var(--iris-font-size-xs, 12px)" },
+  md: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)"
+  },
+  lg: { padding: "8px 16px", fontSize: "var(--iris-font-size-lg, 16px)" }
 };
 function IrisCopyButton({
   text,
@@ -4313,8 +4503,8 @@ function IrisCopyButton({
   ...rest
 }) {
   const { t } = useI18n();
-  const [copied, setCopied] = React67.useState(false);
-  const timerRef = React67.useRef(void 0);
+  const [copied, setCopied] = React70.useState(false);
+  const timerRef = React70.useRef(void 0);
   const copy = async () => {
     if (disabled) return;
     try {
@@ -4329,7 +4519,7 @@ function IrisCopyButton({
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setCopied(false), timeout);
   };
-  React67.useEffect(
+  React70.useEffect(
     () => () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     },
@@ -4349,14 +4539,14 @@ function IrisCopyButton({
       style: {
         display: "inline-flex",
         alignItems: "center",
-        gap: 6,
+        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 ? "var(--iris-success, #16a34a)" : "var(--iris-surface)",
-        color: copied ? "#fff" : "var(--iris-foreground)",
+        background: copied ? "var(--iris-success, #10b981)" : "var(--iris-surface)",
+        color: copied ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
         cursor: disabled ? "not-allowed" : "pointer",
         opacity: disabled ? 0.6 : 1,
         transition: "background-color 120ms ease, color 120ms ease",
@@ -4368,7 +4558,7 @@ function IrisCopyButton({
 }
 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)"
 };
@@ -4459,9 +4649,21 @@ function IrisProgressCircle({
   );
 }
 var SIZE_MAP13 = {
-  sm: { padding: "4px 10px", fontSize: 12, height: 28 },
-  md: { padding: "6px 14px", fontSize: 14, height: 34 },
-  lg: { padding: "8px 18px", fontSize: 16, height: 40 }
+  sm: {
+    padding: "var(--iris-space-xxs, 4px) var(--iris-space-sm, 12px)",
+    fontSize: "var(--iris-font-size-xs, 12px)",
+    height: 28
+  },
+  md: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-space-md, 16px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    height: 34
+  },
+  lg: {
+    padding: "var(--iris-space-xs, 8px) var(--iris-space-lg, 20px)",
+    fontSize: "var(--iris-font-size-lg, 16px)",
+    height: 40
+  }
 };
 function IrisSplitButton({
   children,
@@ -4476,10 +4678,10 @@ function IrisSplitButton({
   ...rest
 }) {
   const { t } = useI18n();
-  const rootRef = React67.useRef(null);
-  const [open, setOpen] = React67.useState(false);
+  const rootRef = React70.useRef(null);
+  const [open, setOpen] = React70.useState(false);
   const hasActions = !!actions && actions.length > 0;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!open) return;
     const onDown = (e) => {
       if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false);
@@ -4497,7 +4699,7 @@ function IrisSplitButton({
   const sz = SIZE_MAP13[size];
   const colors = variant === "primary" ? {
     background: "var(--iris-primary)",
-    color: "#fff",
+    color: "var(--iris-primary-foreground, #fff)",
     border: "1px solid var(--iris-primary)"
   } : {
     background: "var(--iris-surface)",
@@ -4556,7 +4758,7 @@ function IrisSplitButton({
               borderInlineStart: variant === "primary" ? "1px solid rgba(255,255,255,0.3)" : "1px solid var(--iris-border)",
               padding: "0 8px",
               minHeight: sz.height,
-              fontSize: 10,
+              fontSize: "var(--iris-font-size-xs, 12px)",
               borderStartEndRadius: "var(--iris-radius-md, 6px)",
               borderEndEndRadius: "var(--iris-radius-md, 6px)",
               cursor: disabled ? "not-allowed" : "pointer",
@@ -4586,7 +4788,7 @@ function IrisSplitButton({
               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)"
             },
             children: actions.map((a) => /* @__PURE__ */ jsx(
               "li",
@@ -4597,8 +4799,8 @@ function IrisSplitButton({
                 "data-key": a.key,
                 onClick: () => select(a),
                 style: {
-                  padding: "6px 10px",
-                  fontSize: 14,
+                  padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 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)"
@@ -4720,11 +4922,11 @@ function IrisRibbon({
               position: "absolute",
               insetBlockStart: 8,
               background: color ?? "var(--iris-primary)",
-              color: "#fff",
-              padding: "2px 10px",
-              fontSize: 12,
+              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
             },
@@ -4737,7 +4939,7 @@ function IrisRibbon({
 }
 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)"
 };
@@ -4773,7 +4975,7 @@ function IrisGauge({
       "aria-valuenow": value,
       "aria-valuemin": min,
       "aria-valuemax": max,
-      "aria-valuetext": `${percent}%`,
+      "aria-valuetext": min === 0 && max === 100 ? `${percent}%` : `${value} (${percent}%)`,
       "aria-label": ariaLabel,
       className,
       ...rest,
@@ -4820,7 +5022,7 @@ function IrisGauge({
               color: "var(--iris-foreground)",
               fontVariantNumeric: "tabular-nums"
             },
-            children: format ? format(value, percent) : `${percent}%`
+            children: format ? format(value, percent) : min === 0 && max === 100 ? `${percent}%` : String(value)
           }
         ) : null
       ]
@@ -4840,9 +5042,9 @@ function IrisMarquee({
   className,
   ...rest
 }) {
-  const trackRef = React67.useRef(null);
-  const animRef = React67.useRef(null);
-  React67.useEffect(() => {
+  const trackRef = React70.useRef(null);
+  const animRef = React70.useRef(null);
+  React70.useEffect(() => {
     const el = trackRef.current;
     if (!el || typeof el.animate !== "function" || prefersReducedMotion4()) return;
     const frames = direction === "left" ? [{ transform: "translateX(0%)" }, { transform: "translateX(-50%)" }] : [{ transform: "translateX(-50%)" }, { transform: "translateX(0%)" }];
@@ -4915,7 +5117,7 @@ function IrisMasonry({
       className,
       ...rest,
       style: { columnCount: columns, columnGap: gap, ...style },
-      children: React67.Children.map(children, (child) => /* @__PURE__ */ jsx("div", { "data-iris-masonry-item": "", style: { breakInside: "avoid", marginBlockEnd: gap }, children: child }))
+      children: React70.Children.map(children, (child) => /* @__PURE__ */ jsx("div", { "data-iris-masonry-item": "", style: { breakInside: "avoid", marginBlockEnd: gap }, children: child }))
     }
   );
 }
@@ -4950,8 +5152,8 @@ function IrisFieldset({
           {
             "data-iris-fieldset-legend": "",
             style: {
-              padding: "0 6px",
-              fontSize: 14,
+              padding: "0 var(--iris-padding-sm, 6px)",
+              fontSize: "var(--iris-font-size-md, 14px)",
               fontWeight: 600,
               color: "var(--iris-foreground)"
             },
@@ -4962,7 +5164,11 @@ function IrisFieldset({
           "div",
           {
             "data-iris-fieldset-hint": "",
-            style: { fontSize: 12, color: "var(--iris-muted)", marginBlockEnd: 8 },
+            style: {
+              fontSize: "var(--iris-font-size-xs, 12px)",
+              color: "var(--iris-muted)",
+              marginBlockEnd: 8
+            },
             children: hint
           }
         ) : null,
@@ -4980,15 +5186,15 @@ function IrisToolbar({
   className,
   ...rest
 }) {
-  const ref = React67.useRef(null);
-  const items = React67.useCallback(() => {
+  const ref = React70.useRef(null);
+  const items = React70.useCallback(() => {
     const root = ref.current;
     if (!root) return [];
     return Array.from(root.querySelectorAll(SELECTOR)).filter(
       (el) => !el.hasAttribute("disabled")
     );
   }, []);
-  const navRef = React67.useRef(null);
+  const navRef = React70.useRef(null);
   if (navRef.current === null) {
     navRef.current = createKeyboardNav({
       count: 0,
@@ -4998,10 +5204,10 @@ function IrisToolbar({
     });
   }
   const nav = navRef.current;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     nav.reset(items().length);
   });
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     items().forEach((el, i) => {
       el.tabIndex = i === 0 ? 0 : -1;
     });
@@ -5054,14 +5260,14 @@ function IrisToolbar({
     }
   );
 }
-var RadioGroupContext = React67.createContext(null);
+var RadioGroupContext = React70.createContext(null);
 var DIM_MAP2 = {
   sm: "14px",
   md: "18px",
   lg: "22px"
 };
-var IrisRadio = React67.forwardRef(function IrisRadio2({ value, size = "md", disabled, children, style, ...rest }, ref) {
-  const ctx = React67.useContext(RadioGroupContext);
+var IrisRadio = React70.forwardRef(function IrisRadio2({ value, size = "md", disabled, children, style, ...rest }, ref) {
+  const ctx = React70.useContext(RadioGroupContext);
   if (!ctx) throw new Error("IrisRadio must be used inside <IrisRadioGroup>");
   const isDisabled = disabled || ctx.disabled;
   const isChecked = ctx.value === value;
@@ -5146,7 +5352,7 @@ function IrisRadioGroup({
 }) {
   const isControlled = value !== void 0;
   const toKeys = (v) => v == null ? [] : [v];
-  const modelRef = React67.useRef(null);
+  const modelRef = React70.useRef(null);
   if (modelRef.current === null) {
     modelRef.current = createSelectionModel({
       mode: "single",
@@ -5156,10 +5362,10 @@ function IrisRadioGroup({
   }
   const model = modelRef.current;
   const current = useStore(model.store)[0] ?? null;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (isControlled) model.sync(toKeys(value));
   }, [value, isControlled, model]);
-  const autoName = React67.useId();
+  const autoName = React70.useId();
   const groupName = name ?? `iris-radio-${autoName}`;
   const setValue = (next) => {
     if (disabled) return;
@@ -5183,6 +5389,65 @@ function IrisRadioGroup({
     }
   ) });
 }
+
+// src/floating/animations.ts
+var STYLE_ID2 = "iris-floating-animations";
+var installed5 = 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 (installed5 || typeof document === "undefined") return;
+  installed5 = true;
+  if (document.getElementById(STYLE_ID2)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID2;
+  style.textContent = `
+:root {
+  --iris-anim-dialog: iris-dialog-in 150ms ease-out;
+  --iris-anim-popover: iris-popover-in 150ms ease-out;
+  --iris-anim-toast: iris-toast-in 200ms ease-out;
+  --iris-anim-tooltip: iris-tooltip-in 120ms ease-out;
+}
+@keyframes iris-dialog-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes iris-popover-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes iris-toast-in {
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@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);
+}
 function IrisTooltip({
   content,
   placement = "top",
@@ -5194,16 +5459,17 @@ function IrisTooltip({
   children,
   ...rest
 }) {
-  const triggerRef = React67.useRef(null);
-  const floatingRef = React67.useRef(null);
-  const tooltipId = React67.useId();
-  const [open, setOpen] = React67.useState(false);
-  const hi = React67.useMemo(
+  installFloatingAnimations();
+  const triggerRef = React70.useRef(null);
+  const floatingRef = React70.useRef(null);
+  const tooltipId = React70.useId();
+  const [open, setOpen] = React70.useState(false);
+  const hi = React70.useMemo(
     () => createHoverIntent({ openDelay, closeDelay, onChange: setOpen }),
     [openDelay, closeDelay]
   );
-  React67.useEffect(() => () => hi.stop(), [hi]);
-  React67.useEffect(() => {
+  React70.useEffect(() => () => hi.stop(), [hi]);
+  React70.useEffect(() => {
     if (!open) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") hi.close();
@@ -5211,7 +5477,7 @@ function IrisTooltip({
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, hi]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (disabled && open) hi.close();
   }, [disabled, open, hi]);
   const { floatingStyles } = useFloating({
@@ -5221,23 +5487,23 @@ function IrisTooltip({
     placement,
     offset
   });
-  const captureTriggerRef = React67.useCallback((el) => {
+  const captureTriggerRef = React70.useCallback((el) => {
     triggerRef.current = el;
   }, []);
-  const captureFloatingRef = React67.useCallback((el) => {
+  const captureFloatingRef = React70.useCallback((el) => {
     floatingRef.current = el;
   }, []);
-  if (!React67.isValidElement(children)) {
+  if (!React70.isValidElement(children)) {
     if (process.env.NODE_ENV !== "production") {
       console.warn("[iris-ui] IrisTooltip requires a single React element child as trigger");
     }
     return null;
   }
-  const handleEnter = React67.useCallback(
+  const handleEnter = React70.useCallback(
     () => openDelay > 0 ? hi.pointerEnter() : hi.open(),
     [openDelay, hi]
   );
-  const handleLeave = React67.useCallback(
+  const handleLeave = React70.useCallback(
     () => closeDelay > 0 ? hi.pointerLeave() : hi.close(),
     [closeDelay, hi]
   );
@@ -5254,13 +5520,14 @@ function IrisTooltip({
         ...floatingStyles,
         background: "var(--iris-foreground)",
         color: "var(--iris-background)",
+        animation: ANIM_TOOLTIP,
         padding: "4px 8px",
         borderRadius: "var(--iris-radius-sm, 4px)",
-        fontSize: "12px",
+        fontSize: "var(--iris-font-size-xs, 12px)",
         lineHeight: 1.4,
         maxWidth: "240px",
         pointerEvents: "none",
-        zIndex: 1100
+        zIndex: "var(--iris-z-tooltip, 1100)"
       },
       children: content
     }
@@ -5282,9 +5549,9 @@ function IrisTooltip({
     portaled
   ] });
 }
-var PopoverContext = React67.createContext(null);
+var PopoverContext = React70.createContext(null);
 function usePopoverContext(componentName) {
-  const ctx = React67.useContext(PopoverContext);
+  const ctx = React70.useContext(PopoverContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be a descendant of <IrisPopover>`);
   }
@@ -5301,7 +5568,7 @@ function IrisPopover({
   const isControlled = openProp !== void 0;
   const [state, send] = useMachine(() => createFloatingMachine(defaultOpen ? "open" : "closed"));
   const internalOpen = state.value === "open";
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isControlled) return;
     const target = openProp ? "open" : "closed";
     if (state.value !== target) {
@@ -5309,7 +5576,7 @@ function IrisPopover({
     }
   }, [isControlled, openProp, state.value, send]);
   const open = isControlled ? Boolean(openProp) : internalOpen;
-  const setOpen = React67.useCallback(
+  const setOpen = React70.useCallback(
     (next) => {
       if (!isControlled) {
         send({ type: next ? "OPEN" : "CLOSE" });
@@ -5318,10 +5585,10 @@ function IrisPopover({
     },
     [isControlled, send, onOpenChange]
   );
-  const triggerRef = React67.useRef(null);
-  const contentRef = React67.useRef(null);
-  const contentId = React67.useId();
-  const value = React67.useMemo(
+  const triggerRef = React70.useRef(null);
+  const contentRef = React70.useRef(null);
+  const contentId = React70.useId();
+  const value = React70.useMemo(
     () => ({
       open,
       setOpen,
@@ -5335,10 +5602,10 @@ function IrisPopover({
   );
   return /* @__PURE__ */ jsx(PopoverContext.Provider, { value, children });
 }
-var IrisPopoverTrigger = React67.forwardRef(
+var IrisPopoverTrigger = React70.forwardRef(
   function IrisPopoverTrigger2({ asChild = false, onClick, children, ...rest }, forwardedRef) {
     const ctx = usePopoverContext("IrisPopoverTrigger");
-    const captureRef = React67.useCallback(
+    const captureRef = React70.useCallback(
       (el) => {
         ctx.triggerRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -5359,7 +5626,7 @@ var IrisPopoverTrigger = React67.forwardRef(
       onClick: handleClick
     };
     if (asChild) {
-      if (!React67.isValidElement(children)) {
+      if (!React70.isValidElement(children)) {
         if (process.env.NODE_ENV !== "production") {
           console.warn("[iris-ui] IrisPopoverTrigger asChild requires a single React element");
         }
@@ -5379,12 +5646,13 @@ var IrisPopoverTrigger = React67.forwardRef(
     );
   }
 );
-var IrisPopoverContent = React67.forwardRef(
+var IrisPopoverContent = React70.forwardRef(
   function IrisPopoverContent2({ portalTarget, autoFocus = true, restoreFocus = true, style, children, ...rest }, forwardedRef) {
     const ctx = usePopoverContext("IrisPopoverContent");
-    const innerRef = React67.useRef(null);
-    const captureRef = React67.useCallback(
+    const innerRef = React70.useRef(null);
+    const captureRef = React70.useCallback(
       (el) => {
+        installFloatingAnimations();
         innerRef.current = el;
         ctx.contentRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -5405,9 +5673,9 @@ var IrisPopoverContent = React67.forwardRef(
       exclude: [ctx.triggerRef, ctx.contentRef],
       onDismiss: () => ctx.setOpen(false)
     });
-    const lastFocusedRef = React67.useRef(null);
-    const wasOpenRef = React67.useRef(false);
-    React67.useEffect(() => {
+    const lastFocusedRef = React70.useRef(null);
+    const wasOpenRef = React70.useRef(false);
+    React70.useEffect(() => {
       if (ctx.open && !wasOpenRef.current) {
         lastFocusedRef.current = document.activeElement ?? ctx.triggerRef.current;
         if (autoFocus) {
@@ -5436,14 +5704,15 @@ var IrisPopoverContent = React67.forwardRef(
         "data-placement": ctx.placement,
         style: {
           ...floatingStyles,
-          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, 6px)",
           padding: "var(--iris-padding-md, 12px)",
-          boxShadow: "0 8px 24px -8px rgba(0, 0, 0, 0.16), 0 4px 8px -2px rgba(0, 0, 0, 0.08)",
-          fontSize: 14,
-          zIndex: 1e3,
+          boxShadow: "var(--iris-shadow-lg)",
+          fontSize: "var(--iris-font-size-md, 14px)",
+          zIndex: "var(--iris-z-popover, 1000)",
           outline: "none",
           ...style
         },
@@ -5455,9 +5724,9 @@ var IrisPopoverContent = React67.forwardRef(
     return createPortal(node, portalTarget ?? document.body);
   }
 );
-var DialogContext = React67.createContext(null);
+var DialogContext = React70.createContext(null);
 function useDialogContext(componentName) {
-  const ctx = React67.useContext(DialogContext);
+  const ctx = React70.useContext(DialogContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be a descendant of <IrisDialog>`);
   }
@@ -5474,7 +5743,7 @@ function IrisDialog({
   const isControlled = openProp !== void 0;
   const [state, send] = useMachine(() => createFloatingMachine(defaultOpen ? "open" : "closed"));
   const internalOpen = state.value === "open";
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isControlled) return;
     const target = openProp ? "open" : "closed";
     if (state.value !== target) {
@@ -5482,7 +5751,7 @@ function IrisDialog({
     }
   }, [isControlled, openProp, state.value, send]);
   const open = isControlled ? Boolean(openProp) : internalOpen;
-  const setOpen = React67.useCallback(
+  const setOpen = React70.useCallback(
     (next) => {
       if (!isControlled) {
         send({ type: next ? "OPEN" : "CLOSE" });
@@ -5491,16 +5760,16 @@ function IrisDialog({
     },
     [isControlled, send, onOpenChange]
   );
-  const triggerRef = React67.useRef(null);
-  const contentRef = React67.useRef(null);
-  const contentId = React67.useId();
-  const titleId = React67.useId();
-  const descriptionId = React67.useId();
-  const titleCountRef = React67.useRef(0);
-  const descCountRef = React67.useRef(0);
-  const [hasTitle, setHasTitle] = React67.useState(false);
-  const [hasDescription, setHasDescription] = React67.useState(false);
-  const registerTitle = React67.useCallback(() => {
+  const triggerRef = React70.useRef(null);
+  const contentRef = React70.useRef(null);
+  const contentId = React70.useId();
+  const titleId = React70.useId();
+  const descriptionId = React70.useId();
+  const titleCountRef = React70.useRef(0);
+  const descCountRef = React70.useRef(0);
+  const [hasTitle, setHasTitle] = React70.useState(false);
+  const [hasDescription, setHasDescription] = React70.useState(false);
+  const registerTitle = React70.useCallback(() => {
     titleCountRef.current += 1;
     setHasTitle(true);
     return () => {
@@ -5508,7 +5777,7 @@ function IrisDialog({
       if (titleCountRef.current <= 0) setHasTitle(false);
     };
   }, []);
-  const registerDescription = React67.useCallback(() => {
+  const registerDescription = React70.useCallback(() => {
     descCountRef.current += 1;
     setHasDescription(true);
     return () => {
@@ -5516,7 +5785,7 @@ function IrisDialog({
       if (descCountRef.current <= 0) setHasDescription(false);
     };
   }, []);
-  const value = React67.useMemo(
+  const value = React70.useMemo(
     () => ({
       open,
       setOpen,
@@ -5548,10 +5817,10 @@ function IrisDialog({
   );
   return /* @__PURE__ */ jsx(DialogContext.Provider, { value, children });
 }
-var IrisDialogTrigger = React67.forwardRef(
+var IrisDialogTrigger = React70.forwardRef(
   function IrisDialogTrigger2({ asChild = false, onClick, children, ...rest }, forwardedRef) {
     const ctx = useDialogContext("IrisDialogTrigger");
-    const captureRef = React67.useCallback(
+    const captureRef = React70.useCallback(
       (el) => {
         ctx.triggerRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -5572,7 +5841,7 @@ var IrisDialogTrigger = React67.forwardRef(
       onClick: handleClick
     };
     if (asChild) {
-      if (!React67.isValidElement(children)) {
+      if (!React70.isValidElement(children)) {
         if (process.env.NODE_ENV !== "production") {
           console.warn("[iris-ui] IrisDialogTrigger asChild requires a single React element");
         }
@@ -5592,11 +5861,11 @@ var IrisDialogTrigger = React67.forwardRef(
     );
   }
 );
-var IrisDialogContent = React67.forwardRef(
+var IrisDialogContent = React70.forwardRef(
   function IrisDialogContent2({ portalTarget, style, onPointerDown, children, ...rest }, forwardedRef) {
     const ctx = useDialogContext("IrisDialogContent");
-    const innerRef = React67.useRef(null);
-    const captureRef = React67.useCallback(
+    const innerRef = React70.useRef(null);
+    const captureRef = React70.useCallback(
       (el) => {
         innerRef.current = el;
         ctx.contentRef.current = el;
@@ -5606,13 +5875,14 @@ var IrisDialogContent = React67.forwardRef(
       },
       [ctx, forwardedRef]
     );
+    installFloatingAnimations();
     useBodyScrollLock(ctx.open);
     useFocusTrap({
       container: innerRef,
       active: ctx.open,
       returnFocusTo: ctx.triggerRef
     });
-    React67.useEffect(() => {
+    React70.useEffect(() => {
       if (!ctx.open || !ctx.closeOnEscape) return;
       const onKeyDown = (e) => {
         if (e.key === "Escape") {
@@ -5640,8 +5910,8 @@ var IrisDialogContent = React67.forwardRef(
         style: {
           position: "fixed",
           inset: 0,
-          background: "rgba(0, 0, 0, 0.5)",
-          zIndex: 1200,
+          background: "var(--iris-backdrop, rgba(0, 0, 0, 0.5))",
+          zIndex: "var(--iris-z-modal, 1200)",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
@@ -5661,12 +5931,13 @@ var IrisDialogContent = React67.forwardRef(
             "data-state": "open",
             onPointerDown: handleContentPointerDown,
             style: {
-              background: "var(--iris-surface)",
+              background: "var(--iris-surface-floating)",
               color: "var(--iris-foreground)",
               border: "1px solid var(--iris-border)",
               borderRadius: "var(--iris-radius-lg, 8px)",
+              animation: ANIM_DIALOG,
               padding: "var(--iris-padding-lg, 20px)",
-              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",
@@ -5683,11 +5954,11 @@ var IrisDialogContent = React67.forwardRef(
     return createPortal(node, portalTarget ?? document.body);
   }
 );
-var IrisDialogTitle = React67.forwardRef(
+var IrisDialogTitle = React70.forwardRef(
   function IrisDialogTitle2({ as = "h2", style, children, ...rest }, ref) {
     const ctx = useDialogContext("IrisDialogTitle");
-    React67.useEffect(() => ctx.registerTitle(), [ctx.registerTitle]);
-    return React67.createElement(
+    React70.useEffect(() => ctx.registerTitle(), [ctx.registerTitle]);
+    return React70.createElement(
       as,
       {
         ...rest,
@@ -5695,7 +5966,7 @@ var IrisDialogTitle = React67.forwardRef(
         id: ctx.titleId,
         style: {
           margin: "0 0 var(--iris-gap-md, 12px) 0",
-          fontSize: "18px",
+          fontSize: "var(--iris-font-size-xl, 18px)",
           fontWeight: 600,
           ...style
         }
@@ -5704,11 +5975,11 @@ var IrisDialogTitle = React67.forwardRef(
     );
   }
 );
-var IrisDialogDescription = React67.forwardRef(
+var IrisDialogDescription = React70.forwardRef(
   function IrisDialogDescription2({ as = "p", style, children, ...rest }, ref) {
     const ctx = useDialogContext("IrisDialogDescription");
-    React67.useEffect(() => ctx.registerDescription(), [ctx.registerDescription]);
-    return React67.createElement(
+    React70.useEffect(() => ctx.registerDescription(), [ctx.registerDescription]);
+    return React70.createElement(
       as,
       {
         ...rest,
@@ -5717,7 +5988,7 @@ var IrisDialogDescription = React67.forwardRef(
         style: {
           margin: "0 0 var(--iris-gap-lg, 16px) 0",
           color: "var(--iris-muted)",
-          fontSize: "14px",
+          fontSize: "var(--iris-font-size-md, 14px)",
           ...style
         }
       },
@@ -5725,7 +5996,7 @@ var IrisDialogDescription = React67.forwardRef(
     );
   }
 );
-var IrisDialogClose = React67.forwardRef(
+var IrisDialogClose = React70.forwardRef(
   function IrisDialogClose2({ asChild = false, onClick, children, ...rest }, forwardedRef) {
     const ctx = useDialogContext("IrisDialogClose");
     const handleClick = composeEventHandlers(
@@ -5733,7 +6004,7 @@ var IrisDialogClose = React67.forwardRef(
       () => ctx.setOpen(false)
     );
     if (asChild) {
-      if (!React67.isValidElement(children)) {
+      if (!React70.isValidElement(children)) {
         if (process.env.NODE_ENV !== "production") {
           console.warn("[iris-ui] IrisDialogClose asChild requires a single React element");
         }
@@ -5753,9 +6024,9 @@ var IrisDialogClose = React67.forwardRef(
     );
   }
 );
-var DrawerContext = React67.createContext(null);
+var DrawerContext = React70.createContext(null);
 function useDrawerContext(componentName) {
-  const ctx = React67.useContext(DrawerContext);
+  const ctx = React70.useContext(DrawerContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be a descendant of <IrisDrawer>`);
   }
@@ -5774,7 +6045,7 @@ function IrisDrawer({
   const isControlled = openProp !== void 0;
   const [state, send] = useMachine(() => createFloatingMachine(defaultOpen ? "open" : "closed"));
   const internalOpen = state.value === "open";
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isControlled) return;
     const target = openProp ? "open" : "closed";
     if (state.value !== target) {
@@ -5782,7 +6053,7 @@ function IrisDrawer({
     }
   }, [isControlled, openProp, state.value, send]);
   const open = isControlled ? Boolean(openProp) : internalOpen;
-  const setOpen = React67.useCallback(
+  const setOpen = React70.useCallback(
     (next) => {
       if (!isControlled) {
         send({ type: next ? "OPEN" : "CLOSE" });
@@ -5791,14 +6062,14 @@ function IrisDrawer({
     },
     [isControlled, send, onOpenChange]
   );
-  const triggerRef = React67.useRef(null);
-  const contentRef = React67.useRef(null);
-  const id = React67.useId();
+  const triggerRef = React70.useRef(null);
+  const contentRef = React70.useRef(null);
+  const id = React70.useId();
   const contentId = `${id}-content`;
   const titleId = `${id}-title`;
-  const titleCountRef = React67.useRef(0);
-  const [hasTitle, setHasTitle] = React67.useState(false);
-  const registerTitle = React67.useCallback(() => {
+  const titleCountRef = React70.useRef(0);
+  const [hasTitle, setHasTitle] = React70.useState(false);
+  const registerTitle = React70.useCallback(() => {
     titleCountRef.current += 1;
     setHasTitle(true);
     return () => {
@@ -5806,7 +6077,7 @@ function IrisDrawer({
       if (titleCountRef.current <= 0) setHasTitle(false);
     };
   }, []);
-  const value = React67.useMemo(
+  const value = React70.useMemo(
     () => ({
       open,
       setOpen,
@@ -5836,10 +6107,10 @@ function IrisDrawer({
   );
   return /* @__PURE__ */ jsx(DrawerContext.Provider, { value, children });
 }
-var IrisDrawerTrigger = React67.forwardRef(
+var IrisDrawerTrigger = React70.forwardRef(
   function IrisDrawerTrigger2({ asChild = false, onClick, children, ...rest }, forwardedRef) {
     const ctx = useDrawerContext("IrisDrawerTrigger");
-    const captureRef = React67.useCallback(
+    const captureRef = React70.useCallback(
       (el) => {
         ctx.triggerRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -5860,7 +6131,7 @@ var IrisDrawerTrigger = React67.forwardRef(
       onClick: handleClick
     };
     if (asChild) {
-      if (!React67.isValidElement(children)) {
+      if (!React70.isValidElement(children)) {
         if (process.env.NODE_ENV !== "production") {
           console.warn("[iris-ui] IrisDrawerTrigger asChild requires a single React element");
         }
@@ -5943,11 +6214,11 @@ function panelPositionStyle(side, size) {
   }
 }
 var EXIT_DURATION_MS = 220;
-var IrisDrawerContent = React67.forwardRef(
+var IrisDrawerContent = React70.forwardRef(
   function IrisDrawerContent2({ portalTarget, style, children, ...rest }, forwardedRef) {
     const ctx = useDrawerContext("IrisDrawerContent");
-    const innerRef = React67.useRef(null);
-    const captureRef = React67.useCallback(
+    const innerRef = React70.useRef(null);
+    const captureRef = React70.useCallback(
       (el) => {
         innerRef.current = el;
         ctx.contentRef.current = el;
@@ -5957,9 +6228,9 @@ var IrisDrawerContent = React67.forwardRef(
       },
       [ctx, forwardedRef]
     );
-    const [mounted, setMounted] = React67.useState(ctx.open);
-    const [visible, setVisible] = React67.useState(ctx.open);
-    React67.useEffect(() => {
+    const [mounted, setMounted] = React70.useState(ctx.open);
+    const [visible, setVisible] = React70.useState(ctx.open);
+    React70.useEffect(() => {
       if (ctx.open) {
         setMounted(true);
         const raf = requestAnimationFrame(() => setVisible(true));
@@ -5976,7 +6247,7 @@ var IrisDrawerContent = React67.forwardRef(
       active: ctx.open,
       returnFocusTo: ctx.triggerRef
     });
-    React67.useEffect(() => {
+    React70.useEffect(() => {
       if (!ctx.open || !ctx.closeOnEscape) return;
       const onKeyDown = (e) => {
         if (e.key === "Escape") {
@@ -6042,10 +6313,10 @@ var IrisDrawerContent = React67.forwardRef(
     return createPortal(node, portalTarget ?? document.body);
   }
 );
-var IrisDrawerTitle = React67.forwardRef(
+var IrisDrawerTitle = React70.forwardRef(
   function IrisDrawerTitle2({ style, children, ...rest }, ref) {
     const ctx = useDrawerContext("IrisDrawerTitle");
-    React67.useEffect(() => ctx.registerTitle(), [ctx.registerTitle]);
+    React70.useEffect(() => ctx.registerTitle(), [ctx.registerTitle]);
     return /* @__PURE__ */ jsx(
       "h2",
       {
@@ -6066,7 +6337,7 @@ var IrisDrawerTitle = React67.forwardRef(
     );
   }
 );
-var IrisDrawerClose = React67.forwardRef(
+var IrisDrawerClose = React70.forwardRef(
   function IrisDrawerClose2({ asChild = false, onClick, children, ...rest }, forwardedRef) {
     const ctx = useDrawerContext("IrisDrawerClose");
     const handleClick = composeEventHandlers(
@@ -6074,7 +6345,7 @@ var IrisDrawerClose = React67.forwardRef(
       () => ctx.setOpen(false)
     );
     if (asChild) {
-      if (!React67.isValidElement(children)) {
+      if (!React70.isValidElement(children)) {
         if (process.env.NODE_ENV !== "production") {
           console.warn("[iris-ui] IrisDrawerClose asChild requires a single React element");
         }
@@ -6154,19 +6425,19 @@ 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)"
 };
 function positionStyle(position) {
   const base = {
     position: "fixed",
-    zIndex: 1400,
+    zIndex: "var(--iris-z-toast, 1400)",
     display: "flex",
     flexDirection: "column",
     gap: "var(--iris-gap-md, 12px)",
@@ -6205,25 +6476,26 @@ function IrisToastViewport({
   style,
   ...rest
 }) {
+  installFloatingAnimations();
   const { t } = useI18n();
-  const allToasts = React67.useSyncExternalStore(subscribeToasts, getToasts, () => []);
-  const toasts = React67.useMemo(
+  const allToasts = React70.useSyncExternalStore(subscribeToasts, getToasts, () => []);
+  const toasts = React70.useMemo(
     () => allToasts.length > max ? allToasts.slice(-max) : allToasts,
     [allToasts, max]
   );
-  const [hovered, setHovered] = React67.useState(false);
-  const dismissersRef = React67.useRef(/* @__PURE__ */ new Map());
+  const [hovered, setHovered] = React70.useState(false);
+  const dismissersRef = React70.useRef(/* @__PURE__ */ new Map());
   const SWIPE_DISMISS_PX = 80;
-  const [drag, setDrag] = React67.useState(null);
-  const dragRef = React67.useRef(null);
-  const cancelDismisser = React67.useCallback((id) => {
+  const [drag, setDrag] = React70.useState(null);
+  const dragRef = React70.useRef(null);
+  const cancelDismisser = React70.useCallback((id) => {
     const d = dismissersRef.current.get(id);
     if (d) {
       d.cancel();
       dismissersRef.current.delete(id);
     }
   }, []);
-  const armDismisser = React67.useCallback((toast) => {
+  const armDismisser = React70.useCallback((toast) => {
     if (!toast.duration || toast.duration === Infinity) return;
     const remaining = Math.max(0, toast.createdAt + toast.duration - Date.now());
     const dismisser = createAutoDismiss({
@@ -6236,7 +6508,7 @@ function IrisToastViewport({
     dismissersRef.current.set(toast.id, dismisser);
     dismisser.start();
   }, []);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     const liveIds = new Set(toasts.map((t2) => t2.id));
     for (const id of Array.from(dismissersRef.current.keys())) {
       if (!liveIds.has(id)) cancelDismisser(id);
@@ -6248,14 +6520,14 @@ function IrisToastViewport({
       }
     }
   }, [toasts, hovered, armDismisser, cancelDismisser]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (hovered) {
       for (const d of dismissersRef.current.values()) d.pause();
     } else {
       for (const d of dismissersRef.current.values()) d.resume();
     }
   }, [hovered]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     const dismissers = dismissersRef.current;
     return () => {
       for (const d of dismissers.values()) d.cancel();
@@ -6314,15 +6586,16 @@ function IrisToastViewport({
               display: "flex",
               alignItems: "flex-start",
               gap: "var(--iris-gap-md, 12px)",
-              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, 6px)",
               padding: "var(--iris-padding-md, 12px)",
-              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: 280,
-              fontSize: 14
+              fontSize: "var(--iris-font-size-md, 14px)"
             },
             children: [
               /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
@@ -6332,8 +6605,8 @@ function IrisToastViewport({
                   {
                     style: {
                       color: "var(--iris-muted)",
-                      fontSize: 13,
-                      marginTop: 2
+                      fontSize: "var(--iris-font-size-sm, 13px)",
+                      marginTop: "var(--iris-space-xxs, 4px)"
                     },
                     children: toast.description
                   }
@@ -6354,7 +6627,7 @@ function IrisToastViewport({
                     fontWeight: 600,
                     cursor: "pointer",
                     padding: "4px 8px",
-                    fontSize: 13,
+                    fontSize: "var(--iris-font-size-sm, 13px)",
                     fontFamily: "inherit"
                   },
                   children: toast.action.label
@@ -6374,7 +6647,7 @@ function IrisToastViewport({
                     color: "var(--iris-muted)",
                     lineHeight: 1,
                     fontFamily: "inherit",
-                    fontSize: 16
+                    fontSize: "var(--iris-font-size-lg, 16px)"
                   },
                   children: "\xD7"
                 }
@@ -6390,9 +6663,9 @@ function IrisToastViewport({
   if (typeof document === "undefined") return null;
   return createPortal(node, portalTarget ?? document.body);
 }
-var TabsContext = React67.createContext(null);
+var TabsContext = React70.createContext(null);
 function useTabsContext(componentName) {
-  const ctx = React67.useContext(TabsContext);
+  const ctx = React70.useContext(TabsContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be inside an <IrisTabs>`);
   }
@@ -6408,24 +6681,24 @@ function IrisTabs({
   children
 }) {
   const isControlled = valueProp !== void 0;
-  const [internalValue, setInternalValue] = React67.useState(defaultValue ?? null);
+  const [internalValue, setInternalValue] = React70.useState(defaultValue ?? null);
   const effectiveValue = isControlled ? valueProp : internalValue;
-  const setValue = React67.useCallback(
+  const setValue = React70.useCallback(
     (next) => {
       if (!isControlled) setInternalValue(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const triggersRef = React67.useRef([]);
-  const listRef = React67.useRef(null);
-  const focusTriggerByValue = React67.useCallback((value2) => {
+  const triggersRef = React70.useRef([]);
+  const listRef = React70.useRef(null);
+  const focusTriggerByValue = React70.useCallback((value2) => {
     const root = listRef.current;
     if (!root) return;
     const el = root.querySelector(`[data-iris-tabs-trigger][data-value="${value2}"]`);
     el?.focus();
   }, []);
-  const registerTrigger = React67.useCallback(
+  const registerTrigger = React70.useCallback(
     (value2, isDisabled) => {
       if (triggersRef.current.some((t) => t.value === value2)) {
         return () => {
@@ -6444,7 +6717,7 @@ function IrisTabs({
     },
     [isControlled]
   );
-  const moveFocus = React67.useCallback(
+  const moveFocus = React70.useCallback(
     (from, delta) => {
       const enabled = triggersRef.current.filter((t) => !t.isDisabled());
       if (enabled.length === 0) return;
@@ -6461,7 +6734,7 @@ function IrisTabs({
     },
     [setValue, focusTriggerByValue]
   );
-  const value = React67.useMemo(
+  const value = React70.useMemo(
     () => ({
       value: effectiveValue,
       setValue,
@@ -6476,10 +6749,10 @@ function IrisTabs({
   );
   return /* @__PURE__ */ jsx(TabsContext.Provider, { value, children });
 }
-var IrisTabsList = React67.forwardRef(
+var IrisTabsList = React70.forwardRef(
   function IrisTabsList2({ style, children, ...rest }, forwardedRef) {
     const ctx = useTabsContext("IrisTabsList");
-    const captureRef = React67.useCallback(
+    const captureRef = React70.useCallback(
       (el) => {
         ctx.listRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -6500,7 +6773,7 @@ var IrisTabsList = React67.forwardRef(
         style: {
           display: "flex",
           flexDirection: ctx.orientation === "horizontal" ? "row" : "column",
-          gap: 2,
+          gap: "var(--iris-space-xxs, 4px)",
           borderBottom: ctx.orientation === "horizontal" ? "1px solid var(--iris-border)" : "none",
           borderInlineEnd: ctx.orientation === "vertical" ? "1px solid var(--iris-border)" : "none",
           ...style
@@ -6510,15 +6783,15 @@ var IrisTabsList = React67.forwardRef(
     );
   }
 );
-var IrisTabsTrigger = React67.forwardRef(
+var IrisTabsTrigger = React70.forwardRef(
   function IrisTabsTrigger2({ value, asChild = false, disabled, onClick, onKeyDown, style, children, ...rest }, forwardedRef) {
     const ctx = useTabsContext("IrisTabsTrigger");
     const isDisabled = Boolean(disabled) || ctx.disabled;
     const isActive = ctx.value === value;
-    const isDisabledRef = React67.useRef(isDisabled);
+    const isDisabledRef = React70.useRef(isDisabled);
     isDisabledRef.current = isDisabled;
     const register = ctx.registerTrigger;
-    React67.useEffect(() => {
+    React70.useEffect(() => {
       return register(value, () => isDisabledRef.current);
     }, [register, value]);
     const handleClick = composeEventHandlers(
@@ -6567,7 +6840,7 @@ var IrisTabsTrigger = React67.forwardRef(
       onKeyDown: handleKeyDown
     };
     if (asChild) {
-      if (!React67.isValidElement(children)) {
+      if (!React70.isValidElement(children)) {
         if (process.env.NODE_ENV !== "production") {
           console.warn("[iris-ui] IrisTabsTrigger asChild requires a single React element");
         }
@@ -6586,13 +6859,12 @@ var IrisTabsTrigger = React67.forwardRef(
         disabled: isDisabled ? true : void 0,
         style: {
           padding: "8px var(--iris-padding-md, 12px)",
-          fontSize: 14,
+          fontSize: "var(--iris-font-size-md, 14px)",
           fontWeight: 500,
           fontFamily: "inherit",
           cursor: isDisabled ? "not-allowed" : "pointer",
           opacity: isDisabled ? 0.5 : 1,
           border: "none",
-          outline: "none",
           background: "transparent",
           color: isActive ? "var(--iris-primary)" : "var(--iris-muted)",
           marginBottom: horizontal ? -1 : void 0,
@@ -6607,7 +6879,7 @@ var IrisTabsTrigger = React67.forwardRef(
     );
   }
 );
-var IrisTabsContent = React67.forwardRef(
+var IrisTabsContent = React70.forwardRef(
   function IrisTabsContent2({ value, forceMount = false, style, children, ...rest }, ref) {
     const ctx = useTabsContext("IrisTabsContent");
     const isActive = ctx.value === value;
@@ -6626,7 +6898,6 @@ var IrisTabsContent = React67.forwardRef(
         tabIndex: 0,
         style: {
           padding: "var(--iris-padding-md, 12px) 0",
-          outline: "none",
           ...style
         },
         children
@@ -6634,9 +6905,9 @@ var IrisTabsContent = React67.forwardRef(
     );
   }
 );
-var AccordionContext = React67.createContext(null);
+var AccordionContext = React70.createContext(null);
 function useAccordionContext(componentName) {
-  const ctx = React67.useContext(AccordionContext);
+  const ctx = React70.useContext(AccordionContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be inside an <IrisAccordion>`);
   }
@@ -6653,9 +6924,9 @@ function IrisAccordion({
 }) {
   const isControlled = valueProp !== void 0;
   const initial = defaultValue !== void 0 ? defaultValue : multiple ? [] : null;
-  const [internal, setInternal] = React67.useState(initial);
+  const [internal, setInternal] = React70.useState(initial);
   const current = isControlled ? valueProp : internal;
-  const isOpen = React67.useCallback(
+  const isOpen = React70.useCallback(
     (v) => {
       const c = current;
       if (c === null || c === void 0) return false;
@@ -6664,9 +6935,9 @@ function IrisAccordion({
     },
     [current]
   );
-  const controlledRef = React67.useRef(valueProp);
+  const controlledRef = React70.useRef(valueProp);
   controlledRef.current = valueProp;
-  const toggle = React67.useCallback(
+  const toggle = React70.useCallback(
     (v) => {
       const compute = (prev) => {
         if (multiple) {
@@ -6690,9 +6961,9 @@ function IrisAccordion({
     },
     [multiple, collapsible, isControlled, onValueChange]
   );
-  const rootId = React67.useId();
-  const itemsRef = React67.useRef([]);
-  const navRef = React67.useRef(null);
+  const rootId = React70.useId();
+  const itemsRef = React70.useRef([]);
+  const navRef = React70.useRef(null);
   if (navRef.current === null) {
     navRef.current = createKeyboardNav({
       count: itemsRef.current.length,
@@ -6701,11 +6972,11 @@ function IrisAccordion({
     });
   }
   const nav = navRef.current;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     nav.reset(itemsRef.current.length);
   });
   const activeIndex = useStore(nav.store);
-  const registerItem = React67.useCallback(
+  const registerItem = React70.useCallback(
     (value, el) => {
       if (!itemsRef.current.find((it) => it.value === value)) {
         itemsRef.current = [...itemsRef.current, { value, el }];
@@ -6716,7 +6987,7 @@ function IrisAccordion({
     },
     []
   );
-  const focusItem = React67.useCallback(
+  const focusItem = React70.useCallback(
     (value) => {
       const idx = itemsRef.current.findIndex((it) => it.value === value);
       if (idx >= 0) nav.focus(idx);
@@ -6733,7 +7004,7 @@ function IrisAccordion({
       items[action.target]?.el.current?.focus();
     }
   };
-  const ctx = React67.useMemo(
+  const ctx = React70.useMemo(
     () => ({ isOpen, toggle, rootId, collapsible, multiple, activeIndex, registerItem, focusItem }),
     [isOpen, toggle, rootId, collapsible, multiple, activeIndex, registerItem, focusItem]
   );
@@ -6748,14 +7019,14 @@ function IrisAccordion({
     }
   ) });
 }
-var IrisAccordionItem = React67.forwardRef(
+var IrisAccordionItem = React70.forwardRef(
   function IrisAccordionItem2({ value, title, disabled = false, style, children, ...rest }, ref) {
     const ctx = useAccordionContext("IrisAccordionItem");
     const open = ctx.isOpen(value);
     const headerId = `${ctx.rootId}-h-${value}`;
     const contentId = `${ctx.rootId}-c-${value}`;
-    const triggerRef = React67.useRef(null);
-    React67.useEffect(() => {
+    const triggerRef = React70.useRef(null);
+    React70.useEffect(() => {
       return ctx.registerItem(value, triggerRef);
     }, [ctx.registerItem, value]);
     const onTrigger = () => {
@@ -6847,9 +7118,9 @@ var IrisAccordionItem = React67.forwardRef(
     );
   }
 );
-var StepperContext = React67.createContext(null);
+var StepperContext = React70.createContext(null);
 function useStepperContext(componentName) {
-  const ctx = React67.useContext(StepperContext);
+  const ctx = React70.useContext(StepperContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be inside an <IrisStepper>`);
   }
@@ -6866,19 +7137,19 @@ function IrisStepper({
   ...rest
 }) {
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
-  const [total, setTotal] = React67.useState(0);
+  const [internal, setInternal] = React70.useState(defaultValue);
+  const [total, setTotal] = React70.useState(0);
   const rawValue = isControlled ? valueProp : internal;
   const current = Math.max(0, Math.min(total - 1, rawValue));
-  const setValue = React67.useCallback(
+  const setValue = React70.useCallback(
     (next) => {
       if (!isControlled) setInternal(next);
       onValueChange?.(next);
     },
     [isControlled, onValueChange]
   );
-  const nextIndexRef = React67.useRef(0);
-  const registerStep = React67.useCallback(() => {
+  const nextIndexRef = React70.useRef(0);
+  const registerStep = React70.useCallback(() => {
     const index = nextIndexRef.current;
     nextIndexRef.current += 1;
     setTotal((t) => Math.max(t, index + 1));
@@ -6888,7 +7159,7 @@ function IrisStepper({
       }
     };
   }, []);
-  const goTo = React67.useCallback(
+  const goTo = React70.useCallback(
     (index) => {
       if (index < 0 || index >= total) return;
       if (linear && index > current) return;
@@ -6897,7 +7168,7 @@ function IrisStepper({
     },
     [total, linear, current, setValue]
   );
-  const computeStatus = React67.useCallback(
+  const computeStatus = React70.useCallback(
     (index) => {
       if (index < current) return "completed";
       if (index === current) return "active";
@@ -6905,7 +7176,7 @@ function IrisStepper({
     },
     [current]
   );
-  const ctx = React67.useMemo(
+  const ctx = React70.useMemo(
     () => ({
       current,
       total,
@@ -6943,12 +7214,12 @@ var STATUS_COLOR = {
   completed: "var(--iris-success)",
   error: "var(--iris-danger)"
 };
-var IrisStepperStep = React67.forwardRef(
+var IrisStepperStep = React70.forwardRef(
   function IrisStepperStep2({ title, description, status, disabled = false, style, ...rest }, ref) {
     const ctx = useStepperContext("IrisStepperStep");
-    const [index, setIndex] = React67.useState(-1);
+    const [index, setIndex] = React70.useState(-1);
     const register = ctx.registerStep;
-    React67.useEffect(() => {
+    React70.useEffect(() => {
       const { index: i, unregister } = register();
       setIndex(i);
       return unregister;
@@ -6980,7 +7251,7 @@ var IrisStepperStep = React67.forwardRef(
           background: s === "completed" ? color : "var(--iris-background)",
           color: s === "completed" ? "var(--iris-primary-foreground, #fff)" : color,
           border: `2px solid ${color}`,
-          fontSize: 13,
+          fontSize: "var(--iris-font-size-sm, 13px)",
           fontWeight: 600,
           lineHeight: 1,
           transition: "background-color 120ms ease, color 120ms ease, border-color 120ms ease"
@@ -6993,14 +7264,21 @@ var IrisStepperStep = React67.forwardRef(
       {
         "data-iris-stepper-title": "",
         style: {
-          fontSize: 13,
+          fontSize: "var(--iris-font-size-sm, 13px)",
           fontWeight: s === "active" ? 600 : 500,
           color: s === "pending" ? "var(--iris-muted)" : "var(--iris-foreground)"
         },
         children: title
       }
     ) : null;
-    const descNode = description ? /* @__PURE__ */ jsx("div", { "data-iris-stepper-description": "", style: { fontSize: 12, color: "var(--iris-muted)" }, children: description }) : null;
+    const descNode = description ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-iris-stepper-description": "",
+        style: { fontSize: "var(--iris-font-size-xs, 12px)", color: "var(--iris-muted)" },
+        children: description
+      }
+    ) : null;
     const connector = !isLast ? /* @__PURE__ */ jsx(
       "span",
       {
@@ -7016,7 +7294,7 @@ var IrisStepperStep = React67.forwardRef(
           width: 1,
           minHeight: 24,
           background: index < ctx.current ? STATUS_COLOR.completed : "var(--iris-border)",
-          marginInlineStart: 13,
+          marginInlineStart: "var(--iris-space-md, 16px)",
           marginTop: 4,
           marginBottom: 4
         }
@@ -7079,9 +7357,9 @@ var IrisStepperStep = React67.forwardRef(
     );
   }
 );
-var ToggleGroupContext = React67.createContext(null);
+var ToggleGroupContext = React70.createContext(null);
 function useToggleGroupContext(componentName) {
-  const ctx = React67.useContext(ToggleGroupContext);
+  const ctx = React70.useContext(ToggleGroupContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be inside an <IrisToggleGroup>`);
   }
@@ -7105,7 +7383,7 @@ function IrisToggleGroup(props) {
   const isControlled = valueProp !== void 0;
   const toKeys = (v) => v == null ? [] : Array.isArray(v) ? v : [v];
   const fromKeys = (keys) => isMultiple ? keys : keys[0] ?? null;
-  const modelRef = React67.useRef(null);
+  const modelRef = React70.useRef(null);
   if (modelRef.current === null) {
     const initial = defaultValue !== void 0 ? defaultValue : isMultiple ? [] : null;
     modelRef.current = createSelectionModel({
@@ -7116,15 +7394,15 @@ function IrisToggleGroup(props) {
   }
   const model = modelRef.current;
   const selected = useStore(model.store);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (isControlled) model.sync(toKeys(valueProp));
   }, [valueProp, isControlled, model]);
   const displaySelected = isControlled ? toKeys(valueProp) : selected;
-  const isActive = React67.useCallback(
+  const isActive = React70.useCallback(
     (v) => displaySelected.includes(v),
     [displaySelected]
   );
-  const toggle = React67.useCallback(
+  const toggle = React70.useCallback(
     (v) => {
       if (disabled) return;
       if (isControlled) model.sync(toKeys(valueProp));
@@ -7132,8 +7410,8 @@ function IrisToggleGroup(props) {
     },
     [disabled, model, isControlled, valueProp]
   );
-  const itemsRef = React67.useRef([]);
-  const navRef = React67.useRef(null);
+  const itemsRef = React70.useRef([]);
+  const navRef = React70.useRef(null);
   if (navRef.current === null) {
     navRef.current = createKeyboardNav({
       count: itemsRef.current.length,
@@ -7142,10 +7420,10 @@ function IrisToggleGroup(props) {
     });
   }
   const nav = navRef.current;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     nav.reset(itemsRef.current.length);
   });
-  const registerItem = React67.useCallback((value, el) => {
+  const registerItem = React70.useCallback((value, el) => {
     if (!itemsRef.current.find((it) => it.value === value)) {
       itemsRef.current = [...itemsRef.current, { value, el }];
     }
@@ -7153,7 +7431,7 @@ function IrisToggleGroup(props) {
       itemsRef.current = itemsRef.current.filter((it) => it.value !== value);
     };
   }, []);
-  const moveFocus = React67.useCallback((from, delta) => {
+  const moveFocus = React70.useCallback((from, delta) => {
     const items = itemsRef.current;
     if (items.length === 0) return;
     const idx = items.findIndex((it) => it.value === from);
@@ -7163,7 +7441,7 @@ function IrisToggleGroup(props) {
     else nextIdx = (idx + delta + items.length) % items.length;
     items[nextIdx]?.el.current?.focus();
   }, []);
-  const focusItem = React67.useCallback(
+  const focusItem = React70.useCallback(
     (value) => {
       const idx = itemsRef.current.findIndex((it) => it.value === value);
       if (idx >= 0) nav.focus(idx);
@@ -7186,7 +7464,7 @@ function IrisToggleGroup(props) {
       }
     }
   };
-  const ctx = React67.useMemo(
+  const ctx = React70.useMemo(
     () => ({
       type,
       orientation,
@@ -7247,11 +7525,11 @@ var SIZE_FONT = {
   md: "13px",
   lg: "14px"
 };
-var IrisToggleGroupItem = React67.forwardRef(
+var IrisToggleGroupItem = React70.forwardRef(
   function IrisToggleGroupItem2({ value, disabled, onClick, onKeyDown, onFocus, style, children, ...rest }, forwardedRef) {
     const ctx = useToggleGroupContext("IrisToggleGroupItem");
-    const elRef = React67.useRef(null);
-    const captureRef = React67.useCallback(
+    const elRef = React70.useRef(null);
+    const captureRef = React70.useCallback(
       (el) => {
         elRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -7261,7 +7539,7 @@ var IrisToggleGroupItem = React67.forwardRef(
       [forwardedRef]
     );
     const register = ctx.registerItem;
-    React67.useEffect(() => {
+    React70.useEffect(() => {
       return register(value, elRef);
     }, [register, value]);
     const active = ctx.isActive(value);
@@ -7300,7 +7578,7 @@ var IrisToggleGroupItem = React67.forwardRef(
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center",
-          gap: 6,
+          gap: "var(--iris-space-xs, 8px)",
           padding: SIZE_PADDING[ctx.size],
           fontSize: SIZE_FONT[ctx.size],
           fontFamily: "inherit",
@@ -7334,7 +7612,7 @@ function IrisPagination({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const totalPages = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   const raw = isControlled ? valueProp : internal;
   const current = Math.min(totalPages, Math.max(1, raw));
@@ -7472,15 +7750,15 @@ function IrisDragger({
   ...rest
 }) {
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const position = isControlled ? valueProp : internal;
-  const positionRef = React67.useRef(position);
+  const positionRef = React70.useRef(position);
   positionRef.current = position;
-  const rootRef = React67.useRef(null);
-  const handleRef = React67.useRef(null);
+  const rootRef = React70.useRef(null);
+  const handleRef = React70.useRef(null);
   const dragHandleRef = handle ? handleRef : rootRef;
-  const [dragging, setDragging] = React67.useState(false);
-  const startPosRef = React67.useRef({ x: 0, y: 0 });
+  const [dragging, setDragging] = React70.useState(false);
+  const startPosRef = React70.useRef({ x: 0, y: 0 });
   const clamp6 = (p) => ({
     x: Math.max(bounds.minX ?? -Infinity, Math.min(bounds.maxX ?? Infinity, p.x)),
     y: Math.max(bounds.minY ?? -Infinity, Math.min(bounds.maxY ?? Infinity, p.y))
@@ -7554,16 +7832,16 @@ function IrisSplitter({
   ...rest
 }) {
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const ratio = isControlled ? valueProp : internal;
-  const ratioRef = React67.useRef(ratio);
+  const ratioRef = React70.useRef(ratio);
   ratioRef.current = ratio;
-  const containerRef = React67.useRef(null);
-  const handleRef = React67.useRef(null);
-  const [dragging, setDragging] = React67.useState(false);
+  const containerRef = React70.useRef(null);
+  const handleRef = React70.useRef(null);
+  const [dragging, setDragging] = React70.useState(false);
   const isHorizontal = orientation === "horizontal";
-  const startRatioRef = React67.useRef(0);
-  const totalSizeRef = React67.useRef(0);
+  const startRatioRef = React70.useRef(0);
+  const totalSizeRef = React70.useRef(0);
   const setRatio = (next) => {
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
@@ -7705,9 +7983,9 @@ function handlePosition(handle) {
   return s;
 }
 function ResizerHandle(props) {
-  const handleRef = React67.useRef(null);
-  const startSizeRef = React67.useRef({ width: 0, height: 0 });
-  const aspectRef = React67.useRef(1);
+  const handleRef = React70.useRef(null);
+  const startSizeRef = React70.useRef({ width: 0, height: 0 });
+  const aspectRef = React70.useRef(1);
   useDrag({
     handle: handleRef,
     disabled: props.disabled,
@@ -7769,7 +8047,7 @@ function IrisResizer({
   children,
   ...rest
 }) {
-  const sizeRef = React67.useRef(value);
+  const sizeRef = React70.useRef(value);
   sizeRef.current = value;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -7808,9 +8086,13 @@ function IrisResizer({
   );
 }
 var SIZE_STYLES = {
-  sm: { padding: "4px 24px 4px 8px", fontSize: 12, minHeight: 28 },
-  md: { padding: "6px 28px 6px 12px", fontSize: 14, minHeight: 34 },
-  lg: { padding: "8px 32px 8px 12px", fontSize: 16, minHeight: 40 }
+  sm: { padding: "4px 24px 4px 8px", fontSize: "var(--iris-font-size-xs, 12px)", minHeight: 28 },
+  md: {
+    padding: "var(--iris-padding-sm, 6px) var(--iris-space-xl, 24px) var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+    fontSize: "var(--iris-font-size-md, 14px)",
+    minHeight: 34
+  },
+  lg: { padding: "8px 32px 8px 12px", fontSize: "var(--iris-font-size-lg, 16px)", minHeight: 40 }
 };
 function IrisSelect({
   items,
@@ -7833,21 +8115,21 @@ function IrisSelect({
   const safeItems = items ?? [];
   const resolvedPlaceholder = placeholder ?? t("select.placeholder");
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const value = isControlled ? valueProp : internal;
-  const [open, setOpen] = React67.useState(false);
+  const [open, setOpen] = React70.useState(false);
   const selectedItem = safeItems.find((it) => it.value === value) ?? null;
   const label = selectedItem ? selectedItem.label ?? String(selectedItem.value) : resolvedPlaceholder;
   const setValue = (next) => {
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
   };
-  const isEnabled = React67.useCallback((i) => !safeItems[i]?.disabled, [safeItems]);
-  const labels = React67.useMemo(
+  const isEnabled = React70.useCallback((i) => !safeItems[i]?.disabled, [safeItems]);
+  const labels = React70.useMemo(
     () => safeItems.map((it) => it.label ?? String(it.value)),
     [safeItems]
   );
-  const navRef = React67.useRef(null);
+  const navRef = React70.useRef(null);
   if (navRef.current === null) {
     const selIdx = safeItems.findIndex((it) => it.value === value);
     const initial = selIdx >= 0 && !safeItems[selIdx]?.disabled ? selIdx : void 0;
@@ -7860,10 +8142,10 @@ function IrisSelect({
     });
   }
   const nav = navRef.current;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     nav.reset(safeItems.length);
   });
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (open) {
       const selIdx = safeItems.findIndex((it) => it.value === value);
       if (selIdx >= 0 && !safeItems[selIdx]?.disabled) {
@@ -7874,8 +8156,8 @@ function IrisSelect({
     }
   }, [open, safeItems, value, nav]);
   const activeIndex = useStore(nav.store);
-  const listRef = React67.useRef(null);
-  React67.useEffect(() => {
+  const listRef = React70.useRef(null);
+  React70.useEffect(() => {
     if (!open || activeIndex < 0) return;
     const el = listRef.current?.querySelector(
       `[data-iris-select-option-index="${activeIndex}"]`
@@ -7973,7 +8255,7 @@ function IrisSelect({
       {
         autoFocus: false,
         style: { padding: "var(--iris-padding-sm, 4px)", minWidth: 180 },
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
           "ul",
           {
             ref: listRef,
@@ -7988,49 +8270,82 @@ function IrisSelect({
               padding: 0,
               display: "flex",
               flexDirection: "column",
-              gap: 2,
-              outline: "none"
+              gap: "var(--iris-space-xxs, 4px)",
+              maxHeight: 240,
+              overflowY: "auto"
             },
-            children: safeItems.map((item, index) => {
-              const isSelected = item.value === value;
-              const isActive = index === activeIndex;
-              return /* @__PURE__ */ jsx(
+            children: [
+              safeItems.length === 0 ? /* @__PURE__ */ jsx(
                 "li",
                 {
-                  role: "option",
-                  tabIndex: isActive ? 0 : -1,
-                  "aria-selected": isSelected,
-                  "aria-disabled": item.disabled ? "true" : void 0,
-                  "data-iris-select-option": "",
-                  "data-iris-select-option-index": index,
-                  "data-state": isSelected ? "selected" : isActive ? "active" : "idle",
-                  onClick: item.disabled ? void 0 : () => selectItem(item),
-                  onFocus: () => nav.focus(index),
+                  "data-iris-select-empty": "",
                   style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "var(--iris-gap-sm, 6px)",
-                    padding: "6px var(--iris-padding-md, 12px)",
-                    borderRadius: "var(--iris-radius-sm, 4px)",
-                    cursor: item.disabled ? "not-allowed" : "pointer",
-                    opacity: item.disabled ? 0.5 : 1,
-                    fontSize: 14,
-                    background: isSelected ? "var(--iris-primary)" : isActive ? "var(--iris-surface-hover)" : "transparent",
-                    color: isSelected ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
-                    outline: "none"
+                    padding: "var(--iris-space-xs, 8px) var(--iris-padding-sm, 6px)",
+                    color: "var(--iris-muted)",
+                    fontSize: "var(--iris-font-size-sm, 13px)",
+                    textAlign: "center"
                   },
-                  children: item.label ?? String(item.value)
-                },
-                String(item.value ?? index)
-              );
-            })
+                  children: t("select.empty")
+                }
+              ) : null,
+              safeItems.map((item, index) => {
+                const isSelected = item.value === value;
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    role: "option",
+                    tabIndex: isActive ? 0 : -1,
+                    "aria-selected": isSelected,
+                    "aria-disabled": item.disabled ? "true" : void 0,
+                    "data-iris-select-option": "",
+                    "data-iris-select-option-index": index,
+                    "data-state": isSelected ? "selected" : isActive ? "active" : "idle",
+                    onClick: item.disabled ? void 0 : () => selectItem(item),
+                    onFocus: () => nav.focus(index),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "var(--iris-gap-sm, 6px)",
+                      padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
+                      borderRadius: "var(--iris-radius-sm, 4px)",
+                      cursor: item.disabled ? "not-allowed" : "pointer",
+                      opacity: item.disabled ? 0.5 : 1,
+                      fontSize: "var(--iris-font-size-md, 14px)",
+                      background: isSelected ? "var(--iris-surface-selected, rgba(99, 102, 241, 0.12))" : isActive ? "var(--iris-surface-hover)" : "transparent",
+                      color: "var(--iris-foreground)",
+                      fontWeight: isSelected ? 600 : 400
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: item.label ?? String(item.value) }),
+                      isSelected ? /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          "aria-hidden": "true",
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "var(--iris-primary)",
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+                        }
+                      ) : null
+                    ]
+                  },
+                  String(item.value ?? index)
+                );
+              })
+            ]
           }
         )
       }
     )
   ] });
 }
-var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
+var IrisVirtualScroll = React70.forwardRef(function IrisVirtualScroll2({
   items,
   itemHeight,
   estimatedItemHeight = 40,
@@ -8044,23 +8359,23 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
   className,
   ...rest
 }, forwardedRef) {
-  const viewportRef = React67.useRef(null);
-  const [scrollTop, setScrollTop] = React67.useState(0);
-  const [viewportHeight, setViewportHeight] = React67.useState(
+  const viewportRef = React70.useRef(null);
+  const [scrollTop, setScrollTop] = React70.useState(0);
+  const [viewportHeight, setViewportHeight] = React70.useState(
     typeof height === "number" ? height : 0
   );
-  const rafRef = React67.useRef(null);
+  const rafRef = React70.useRef(null);
   const auto = itemHeight === "auto";
   const userFn = typeof itemHeight === "function" ? itemHeight : null;
   const fixedHeight = typeof itemHeight === "number" ? itemHeight : 0;
   const variable = userFn !== null || auto;
-  const measuredRef = React67.useRef(/* @__PURE__ */ new Map());
-  const [measureVersion, setMeasureVersion] = React67.useState(0);
-  const itemsRef = React67.useRef(items);
+  const measuredRef = React70.useRef(/* @__PURE__ */ new Map());
+  const [measureVersion, setMeasureVersion] = React70.useState(0);
+  const itemsRef = React70.useRef(items);
   itemsRef.current = items;
-  const keyOfRef = React67.useRef(keyOf);
+  const keyOfRef = React70.useRef(keyOf);
   keyOfRef.current = keyOf;
-  const estimateSize = React67.useCallback(
+  const estimateSize = React70.useCallback(
     (index) => {
       if (userFn) return userFn(index);
       if (auto) return measuredRef.current.get(index) ?? estimatedItemHeight;
@@ -8068,9 +8383,9 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
     },
     [userFn, auto, estimatedItemHeight, fixedHeight]
   );
-  const estimateRef = React67.useRef(estimateSize);
+  const estimateRef = React70.useRef(estimateSize);
   estimateRef.current = estimateSize;
-  const virtualizer = React67.useMemo(
+  const virtualizer = React70.useMemo(
     () => createVirtualizer({
       count: items.length,
       estimateSize: (index) => estimateRef.current(index),
@@ -8088,19 +8403,19 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
     // not deps (recreating would reset the controller's scroll + cache).
     [items.length, buffer, variable]
   );
-  React67.useLayoutEffect(() => {
+  React70.useLayoutEffect(() => {
     if (variable) virtualizer.remeasure();
   }, [virtualizer, userFn, measureVersion, estimatedItemHeight, variable]);
-  React67.useLayoutEffect(() => {
+  React70.useLayoutEffect(() => {
     virtualizer.setViewportSize(viewportHeight);
     virtualizer.setScroll(scrollTop);
   }, [virtualizer, viewportHeight, scrollTop]);
-  const vstate = React67.useSyncExternalStore(virtualizer.subscribe, virtualizer.getState);
+  const vstate = React70.useSyncExternalStore(virtualizer.subscribe, virtualizer.getState);
   const totalHeight = vstate.totalSize;
   const itemInState = (i) => vstate.items.find((it) => it.index === i);
   const offsetOf = (i) => variable ? itemInState(i)?.start ?? i * estimateRef.current(i) : i * fixedHeight;
   const heightOf = (i) => variable ? itemInState(i)?.size ?? estimateRef.current(i) : fixedHeight;
-  const range = React67.useMemo(() => {
+  const range = React70.useMemo(() => {
     if (variable) return { start: vstate.startIndex, end: vstate.endIndex + 1 };
     const startRaw = Math.floor(scrollTop / Math.max(1, fixedHeight));
     const visibleCount = fixedHeight <= 0 ? 0 : Math.ceil(viewportHeight / fixedHeight);
@@ -8108,8 +8423,8 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
     const end = Math.min(items.length, startRaw + visibleCount + buffer);
     return { start, end };
   }, [variable, vstate, scrollTop, viewportHeight, fixedHeight, buffer, items.length]);
-  const rangeRef = React67.useRef(range);
-  React67.useEffect(() => {
+  const rangeRef = React70.useRef(range);
+  React70.useEffect(() => {
     if (rangeRef.current.start !== range.start || rangeRef.current.end !== range.end) {
       rangeRef.current = range;
       onRangeChange?.(range);
@@ -8129,12 +8444,12 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
       });
     });
   };
-  const measureViewport = React67.useCallback(() => {
+  const measureViewport = React70.useCallback(() => {
     const el = viewportRef.current;
     if (!el) return;
     setViewportHeight(el.clientHeight);
   }, []);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     measureViewport();
     if (typeof ResizeObserver === "undefined") return;
     const el = viewportRef.current;
@@ -8143,15 +8458,15 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
     ro.observe(el);
     return () => ro.disconnect();
   }, [measureViewport]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     return () => {
       if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
     };
   }, []);
-  const rowObserverRef = React67.useRef(null);
-  const indexByEl = React67.useRef(/* @__PURE__ */ new WeakMap());
-  const elByIndex = React67.useRef(/* @__PURE__ */ new Map());
-  React67.useEffect(() => {
+  const rowObserverRef = React70.useRef(null);
+  const indexByEl = React70.useRef(/* @__PURE__ */ new WeakMap());
+  const elByIndex = React70.useRef(/* @__PURE__ */ new Map());
+  React70.useEffect(() => {
     if (!auto || typeof ResizeObserver === "undefined") return;
     const ro = new ResizeObserver((entries) => {
       let changed = false;
@@ -8187,13 +8502,13 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
       ro?.observe(el);
     }
   };
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     const el = viewportRef.current;
     if (!el) return;
     const max = Math.max(0, totalHeight - viewportHeight);
     if (el.scrollTop > max) el.scrollTop = max;
   }, [items.length, totalHeight, viewportHeight]);
-  const scrollToIndex = React67.useCallback(
+  const scrollToIndex = React70.useCallback(
     (index, align = "start") => {
       const el = viewportRef.current;
       if (!el) return;
@@ -8202,7 +8517,7 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
     },
     [virtualizer]
   );
-  const scrollToOffset = React67.useCallback(
+  const scrollToOffset = React70.useCallback(
     (offset) => {
       const el = viewportRef.current;
       if (!el) return;
@@ -8210,11 +8525,11 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
     },
     [virtualizer]
   );
-  const refresh = React67.useCallback(() => {
+  const refresh = React70.useCallback(() => {
     measureViewport();
     handleScroll();
   }, [measureViewport]);
-  React67.useImperativeHandle(forwardedRef, () => ({ scrollToIndex, scrollToOffset, refresh }), [
+  React70.useImperativeHandle(forwardedRef, () => ({ scrollToIndex, scrollToOffset, refresh }), [
     scrollToIndex,
     scrollToOffset,
     refresh
@@ -8276,11 +8591,11 @@ var IrisVirtualScroll = React67.forwardRef(function IrisVirtualScroll2({
 function useTableSort(data, options) {
   const { leafColumns, sort: sortProp, defaultSort, onSortChange } = options;
   const sortControlled = sortProp !== void 0;
-  const [sortInternal, setSortInternal] = React67.useState(
+  const [sortInternal, setSortInternal] = React70.useState(
     defaultSort ?? null
   );
   const sortState = sortControlled ? sortProp ?? null : sortInternal;
-  const sortComparator = React67.useMemo(() => {
+  const sortComparator = React70.useMemo(() => {
     if (!sortState) return null;
     const col = leafColumns.find((c) => c.key === sortState.key);
     if (!col) return null;
@@ -8288,18 +8603,18 @@ function useTableSort(data, options) {
     const sorter = col.sorter ?? ((a, b) => compareValues(getCellValue(a, col), getCellValue(b, col)));
     return (a, b) => sorter(a, b) * dir;
   }, [leafColumns, sortState]);
-  const sortedData = React67.useMemo(() => {
+  const sortedData = React70.useMemo(() => {
     if (!sortComparator) return data;
     return [...data].sort(sortComparator);
   }, [data, sortComparator]);
-  const setSort = React67.useCallback(
+  const setSort = React70.useCallback(
     (next) => {
       if (!sortControlled) setSortInternal(next);
       onSortChange?.(next);
     },
     [sortControlled, onSortChange]
   );
-  const cycleSort = React67.useCallback(
+  const cycleSort = React70.useCallback(
     (col) => {
       if (!col.sortable) return;
       if (!sortState || sortState.key !== col.key) {
@@ -8326,6 +8641,14 @@ function getCellValue(row, column) {
   const key = column.dataIndex ?? column.key;
   return row[key];
 }
+var TABLE_ROW_CSS = `
+[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);
+}
+`;
 var RESIZE_STEP = 16;
 var SELECTION_COL_WIDTH = 40;
 var EXPAND_COL_WIDTH = 40;
@@ -8343,8 +8666,8 @@ function ColumnResizeHandle({
   maxWidth,
   onResize
 }) {
-  const ref = React67.useRef(null);
-  const startRef = React67.useRef(0);
+  const ref = React70.useRef(null);
+  const startRef = React70.useRef(0);
   const clamp6 = (w) => Math.max(minWidth, Math.min(maxWidth, Math.round(w)));
   const measure = () => width ?? ref.current?.parentElement?.getBoundingClientRect().width ?? minWidth;
   useDrag({
@@ -8426,21 +8749,30 @@ function IrisTable({
   error = false,
   loadingState,
   errorState,
+  onRetry,
   style,
   className,
   ...rest
 }) {
+  React70.useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById("iris-table-row-styles")) return;
+    const style2 = document.createElement("style");
+    style2.id = "iris-table-row-styles";
+    style2.textContent = TABLE_ROW_CSS;
+    document.head.appendChild(style2);
+  }, []);
   const { t } = useI18n();
-  const safeColumns = React67.useMemo(() => columns ?? [], [columns]);
-  const grouped = React67.useMemo(
+  const safeColumns = React70.useMemo(() => columns ?? [], [columns]);
+  const grouped = React70.useMemo(
     () => safeColumns.some((c) => c.children && c.children.length > 0),
     [safeColumns]
   );
-  const leafColumns = React67.useMemo(
+  const leafColumns = React70.useMemo(
     () => grouped ? flattenLeafColumns(safeColumns) : safeColumns,
     [grouped, safeColumns]
   );
-  const headerMatrix = React67.useMemo(
+  const headerMatrix = React70.useMemo(
     () => grouped ? buildHeaderMatrix(safeColumns) : null,
     [grouped, safeColumns]
   );
@@ -8456,7 +8788,7 @@ function IrisTable({
     onSortChange
   });
   const selControlled = selectionProp !== void 0;
-  const selModelRef = React67.useRef(null);
+  const selModelRef = React70.useRef(null);
   if (selModelRef.current === null) {
     selModelRef.current = createSelectionModel({
       mode: selectable === "single" ? "single" : "multiple",
@@ -8466,7 +8798,7 @@ function IrisTable({
   }
   const selModel = selModelRef.current;
   const selection = useStore(selModel.store);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (selControlled) selModel.sync(selectionProp);
   }, [selectionProp, selControlled, selModel]);
   const displaySelection = selControlled ? selectionProp : selection;
@@ -8474,7 +8806,7 @@ function IrisTable({
     if (selControlled) selModel.sync(selectionProp);
   };
   const hasDetail = renderDetail !== void 0;
-  const expansionRef = React67.useRef(null);
+  const expansionRef = React70.useRef(null);
   if (expansionRef.current === null) {
     expansionRef.current = createExpansion({
       mode: "multiple",
@@ -8486,7 +8818,7 @@ function IrisTable({
   const expandedKeys = useStore(expansion.store);
   const isRowExpandable = (row, idx) => hasDetail && (rowExpandable ? rowExpandable(row, idx) : true);
   const widthsControlled = columnWidthsProp !== void 0;
-  const [widthsInternal, setWidthsInternal] = React67.useState(
+  const [widthsInternal, setWidthsInternal] = React70.useState(
     defaultColumnWidths ?? {}
   );
   const columnWidths = widthsControlled ? columnWidthsProp : widthsInternal;
@@ -8495,13 +8827,13 @@ function IrisTable({
     if (!widthsControlled) setWidthsInternal(next);
     onColumnWidthsChange?.(next);
   };
-  const [editingCellId, setEditingCellId] = React67.useState(null);
-  const [editingDraft, setEditingDraft] = React67.useState("");
-  const [editError, setEditError] = React67.useState(null);
-  const draftRef = React67.useRef("");
-  const editorRef = React67.useRef(null);
+  const [editingCellId, setEditingCellId] = React70.useState(null);
+  const [editingDraft, setEditingDraft] = React70.useState("");
+  const [editError, setEditError] = React70.useState(null);
+  const draftRef = React70.useRef("");
+  const editorRef = React70.useRef(null);
   const cellId = (rowIdent, colKey) => `${rowIdent}::${colKey}`;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (editingCellId !== null) editorRef.current?.focus();
   }, [editingCellId]);
   const setDraft = (value) => {
@@ -8553,7 +8885,7 @@ function IrisTable({
     selModel.toggle(rowKeyOf(row));
   };
   const treeMode = getSubRows !== void 0;
-  const flatTree = React67.useMemo(
+  const flatTree = React70.useMemo(
     () => treeMode ? flattenTree(sortedData, {
       getKey: (r) => String(rowKeyOf(r)),
       // With an active sort, sort each level's children by the same
@@ -8573,7 +8905,7 @@ function IrisTable({
   const allKeys = bodyData.map(rowKeyOf);
   const allSelected = selectable === "multi" && (selControlled ? allKeys.length > 0 && allKeys.every((k) => displaySelection.includes(k)) : selModel.isAllSelected(allKeys));
   const someSelected = selectable === "multi" && allKeys.some((k) => displaySelection.includes(k)) && !allSelected;
-  const gridTemplateColumns = React67.useMemo(() => {
+  const gridTemplateColumns = React70.useMemo(() => {
     const widths = [];
     if (hasDetail) widths.push(`${EXPAND_COL_WIDTH}px`);
     if (selectable !== "none") widths.push("40px");
@@ -8586,7 +8918,7 @@ function IrisTable({
     }
     return widths.join(" ");
   }, [leafColumns, selectable, columnWidths, hasDetail]);
-  const pinnedOffsets = React67.useMemo(() => {
+  const pinnedOffsets = React70.useMemo(() => {
     const map = {};
     const widthOf = (col) => columnWidths[col.key] ?? (typeof col.width === "number" ? col.width : DEFAULT_PINNED_WIDTH);
     let left = (hasDetail ? EXPAND_COL_WIDTH : 0) + (selectable !== "none" ? SELECTION_COL_WIDTH : 0);
@@ -8616,20 +8948,20 @@ function IrisTable({
       background: "var(--iris-background)"
     };
   };
-  const rootRef = React67.useRef(null);
-  const [scrollLeft, setScrollLeft] = React67.useState(0);
-  const [viewportWidth, setViewportWidth] = React67.useState(0);
-  const cellRangeRef = React67.useRef(null);
+  const rootRef = React70.useRef(null);
+  const [scrollLeft, setScrollLeft] = React70.useState(0);
+  const [viewportWidth, setViewportWidth] = React70.useState(0);
+  const cellRangeRef = React70.useRef(null);
   if (cellRangeRef.current === null) {
     cellRangeRef.current = createCellRange();
   }
   const cellRangeCtrl = cellRangeRef.current;
-  const cellRangeState = React67.useSyncExternalStore(
+  const cellRangeState = React70.useSyncExternalStore(
     cellRangeCtrl.subscribe,
     cellRangeCtrl.getState,
     cellRangeCtrl.getState
   );
-  const isInRange = React67.useCallback(
+  const isInRange = React70.useCallback(
     (row, col) => {
       const { anchor, active } = cellRangeState;
       if (!anchor || !active) return false;
@@ -8641,7 +8973,7 @@ function IrisTable({
     },
     [cellRangeState]
   );
-  const [focusedCell, setFocusedCell] = React67.useState(null);
+  const [focusedCell, setFocusedCell] = React70.useState(null);
   const GRID_NAV_KEYS = /* @__PURE__ */ new Set([
     "ArrowUp",
     "ArrowDown",
@@ -8694,13 +9026,13 @@ function IrisTable({
     else nextCol = Math.min(leafColumns.length - 1, nextCol + 1);
     cellRangeCtrl.extendRange(nextRow, nextCol);
   };
-  const resolvedColWidths = React67.useMemo(
+  const resolvedColWidths = React70.useMemo(
     () => leafColumns.map(
       (col) => columnWidths[col.key] ?? (typeof col.width === "number" ? col.width : DEFAULT_PINNED_WIDTH)
     ),
     [leafColumns, columnWidths]
   );
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!columnVirtualization) return;
     const el = rootRef.current;
     if (!el) return;
@@ -8711,7 +9043,7 @@ function IrisTable({
     ro.observe(el);
     return () => ro.disconnect();
   }, [columnVirtualization]);
-  const visibleColSet = React67.useMemo(() => {
+  const visibleColSet = React70.useMemo(() => {
     if (!columnVirtualization) return null;
     const w = computeVirtualRange({
       itemCount: leafColumns.length,
@@ -8762,7 +9094,7 @@ function IrisTable({
               style: {
                 ...baseCellStyle,
                 justifyContent: "center",
-                background: striped && idx % 2 === 1 ? "var(--iris-surface)" : "transparent",
+                background: "var(--iris-cell-bg, transparent)",
                 borderBottom: borderStyle
               },
               children: isRowExpandable(row, idx) ? /* @__PURE__ */ jsx(
@@ -8801,7 +9133,7 @@ function IrisTable({
               style: {
                 ...baseCellStyle,
                 justifyContent: "center",
-                background: striped && idx % 2 === 1 ? "var(--iris-surface)" : "transparent",
+                background: "var(--iris-cell-bg, transparent)",
                 borderBottom: borderStyle
               },
               children: /* @__PURE__ */ jsx(
@@ -8848,7 +9180,7 @@ function IrisTable({
                 style: {
                   ...baseCellStyle,
                   ...visibleColSet ? { gridColumnStart: colTrack(ci) } : null,
-                  justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
+                  justifyContent: (col.align ?? (typeof getCellValue2(row, col) === "number" ? "right" : "left")) === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
                   background: cellRange && isInRange(idx, ci) ? "var(--iris-surface-selected, rgba(99,102,241,0.12))" : striped && idx % 2 === 1 ? "var(--iris-surface)" : "transparent",
                   borderBottom: borderStyle,
                   cursor: col.editable ? "cell" : cellRange ? "default" : void 0,
@@ -8921,7 +9253,7 @@ function IrisTable({
                           width: "100%",
                           border: `1px solid ${editError ? "var(--iris-danger)" : "var(--iris-primary)"}`,
                           borderRadius: "var(--iris-radius-sm, 4px)",
-                          padding: "4px 6px",
+                          padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
                           font: "inherit",
                           background: "var(--iris-background)",
                           color: "var(--iris-foreground)",
@@ -8935,7 +9267,11 @@ function IrisTable({
                         id: `${cellId(k, col.key)}-error`,
                         role: "alert",
                         "data-iris-table-editor-error": "",
-                        style: { marginTop: 2, fontSize: 12, color: "var(--iris-danger)" },
+                        style: {
+                          marginTop: "var(--iris-space-xxs, 4px)",
+                          fontSize: "var(--iris-font-size-xs, 12px)",
+                          color: "var(--iris-danger)"
+                        },
                         children: editError
                       }
                     ) : null
@@ -8969,7 +9305,7 @@ function IrisTable({
       style: {
         background: "var(--iris-background)",
         color: "var(--iris-foreground)",
-        fontSize: 14,
+        fontSize: "var(--iris-font-size-md, 14px)",
         border: borderStyle,
         borderRadius: "var(--iris-radius-md, 6px)",
         // Column virtualization turns the table into a horizontal scroll container.
@@ -8990,7 +9326,7 @@ function IrisTable({
             },
             children: [
               hasDetail ? /* @__PURE__ */ jsx("div", { role: "columnheader", style: { gridColumn: "1", gridRow: "1 / -1" } }) : null,
-              selectable !== "none" ? /* @__PURE__ */ jsx(
+              selectable !== "none" ? /* @__PURE__ */ jsxs(
                 "div",
                 {
                   role: "columnheader",
@@ -9003,14 +9339,29 @@ function IrisTable({
                     borderBottom: borderStyle,
                     justifyContent: "center"
                   },
-                  children: selectable === "multi" ? /* @__PURE__ */ jsx(
-                    IrisCheckbox,
-                    {
-                      checked: allSelected ? true : someSelected ? "indeterminate" : false,
-                      onChange: toggleAll,
-                      "aria-label": t("table.selectAll")
-                    }
-                  ) : null
+                  children: [
+                    selectable === "multi" ? /* @__PURE__ */ jsx(
+                      IrisCheckbox,
+                      {
+                        checked: allSelected ? true : someSelected ? "indeterminate" : false,
+                        onChange: toggleAll,
+                        "aria-label": t("table.selectAll")
+                      }
+                    ) : null,
+                    selectable === "multi" && displaySelection.length > 0 ? /* @__PURE__ */ jsx(
+                      "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"
+                        },
+                        children: t("table.selectedCount", { count: String(displaySelection.length) })
+                      }
+                    ) : null
+                  ]
                 }
               ) : null,
               headerMatrix.flatMap(
@@ -9052,8 +9403,8 @@ function IrisTable({
                             "aria-hidden": "true",
                             "data-iris-table-sort-indicator": "",
                             style: {
-                              marginInlineStart: 6,
-                              fontSize: 11,
+                              marginInlineStart: "var(--iris-space-xs, 8px)",
+                              fontSize: "var(--iris-font-size-xs, 12px)",
                               color: dir ? "var(--iris-primary)" : "var(--iris-muted)"
                             },
                             children: dir === "asc" ? "\u2191" : dir === "desc" ? "\u2193" : "\u2195"
@@ -9158,8 +9509,8 @@ function IrisTable({
                             "aria-hidden": "true",
                             "data-iris-table-sort-indicator": "",
                             style: {
-                              marginInlineStart: 6,
-                              fontSize: 11,
+                              marginInlineStart: "var(--iris-space-xs, 8px)",
+                              fontSize: "var(--iris-font-size-xs, 12px)",
                               color: dir ? "var(--iris-primary)" : "var(--iris-muted)"
                             },
                             children: dir === "asc" ? "\u2191" : dir === "desc" ? "\u2193" : "\u2195"
@@ -9185,7 +9536,27 @@ function IrisTable({
             }
           )
         ),
-        error ? /* @__PURE__ */ jsx("div", { role: "row", "data-iris-table-row": "error", style: STATE_ROW_STYLE, children: errorState ?? t("table.error") }) : loading ? /* @__PURE__ */ jsx("div", { role: "row", "aria-busy": "true", "data-iris-table-row": "loading", style: STATE_ROW_STYLE, children: loadingState ?? t("table.loading") }) : bodyData.length === 0 ? /* @__PURE__ */ jsx("div", { role: "row", "data-iris-table-row": "empty", style: STATE_ROW_STYLE, children: emptyState ?? t("table.empty") }) : virtualScroll && (!treeMode || !hasDetail) ? (
+        error ? /* @__PURE__ */ jsxs("div", { role: "row", "data-iris-table-row": "error", style: STATE_ROW_STYLE, children: [
+          /* @__PURE__ */ jsx("span", { style: { marginInlineEnd: onRetry ? "var(--iris-space-sm, 12px)" : 0 }, children: errorState ?? t("table.error") }),
+          onRetry ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-iris-table-retry": "",
+              onClick: 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"
+              },
+              children: t("table.retry")
+            }
+          ) : null
+        ] }) : loading ? /* @__PURE__ */ jsx("div", { role: "row", "aria-busy": "true", "data-iris-table-row": "loading", style: STATE_ROW_STYLE, children: loadingState ?? t("table.loading") }) : bodyData.length === 0 ? /* @__PURE__ */ jsx("div", { role: "row", "data-iris-table-row": "empty", style: STATE_ROW_STYLE, children: emptyState ?? t("table.empty") }) : virtualScroll && (!treeMode || !hasDetail) ? (
           // Virtualize flat mode, and tree mode too — tree rows are uniform height,
           // so the only thing that bars it is variable-height detail panels, hence
           // the `!hasDetail` guard. `bodyData` is the flattened visible rows (=
@@ -9206,7 +9577,7 @@ function IrisTable({
           const main = renderRow(row, idx, void 0, flatTree?.[idx]);
           if (!hasDetail || !isRowExpandable(row, idx) || !expandedKeys.includes(String(rowKeyOf(row))))
             return main;
-          return /* @__PURE__ */ jsxs(React67.Fragment, { children: [
+          return /* @__PURE__ */ jsxs(React70.Fragment, { children: [
             main,
             /* @__PURE__ */ jsx(
               "div",
@@ -9324,29 +9695,29 @@ function IrisCalendar({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue ?? null);
+  const [internal, setInternal] = React70.useState(defaultValue ?? null);
   const selectedValue = isControlled ? valueProp : internal;
   const initialMonth = defaultMonth ?? selectedValue ?? /* @__PURE__ */ new Date();
-  const [visibleMonth, setVisibleMonth] = React67.useState(startOfMonth(initialMonth));
-  const [focusDate, setFocusDate] = React67.useState(
+  const [visibleMonth, setVisibleMonth] = React70.useState(startOfMonth(initialMonth));
+  const [focusDate, setFocusDate] = React70.useState(
     clampDate(selectedValue ?? /* @__PURE__ */ new Date(), min, max)
   );
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (selectedValue && !isSameMonth(selectedValue, visibleMonth)) {
       setVisibleMonth(startOfMonth(selectedValue));
       setFocusDate(clampDate(selectedValue, min, max));
     }
   }, [selectedValue, visibleMonth, min, max]);
-  const matrix = React67.useMemo(
+  const matrix = React70.useMemo(
     () => buildMonthMatrix(visibleMonth, weekStartsOn),
     [visibleMonth, weekStartsOn]
   );
-  const weekdays = React67.useMemo(
+  const weekdays = React70.useMemo(
     () => getWeekdayNames(weekStartsOn, locale),
     [weekStartsOn, locale]
   );
-  const title = React67.useMemo(() => formatMonthYear(visibleMonth, locale), [visibleMonth, locale]);
-  const dayLabelFmt = React67.useMemo(
+  const title = React70.useMemo(() => formatMonthYear(visibleMonth, locale), [visibleMonth, locale]);
+  const dayLabelFmt = React70.useMemo(
     () => new Intl.DateTimeFormat(safeLocale(locale), {
       weekday: "long",
       year: "numeric",
@@ -9486,7 +9857,7 @@ function IrisCalendar({
                 {
                   "data-iris-calendar-title": "",
                   "aria-live": "polite",
-                  style: { fontWeight: 600, fontSize: 14 },
+                  style: { fontWeight: 600, fontSize: "var(--iris-font-size-md, 14px)" },
                   children: title
                 }
               ),
@@ -9517,12 +9888,12 @@ function IrisCalendar({
             style: {
               display: "grid",
               gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-              gap: 2,
-              fontSize: 12,
+              gap: "var(--iris-space-xxs, 4px)",
+              fontSize: "var(--iris-font-size-xs, 12px)",
               color: "var(--iris-muted)",
               textAlign: "center"
             },
-            children: weekdays.map((name) => /* @__PURE__ */ jsx("div", { role: "columnheader", style: { padding: "2px 0" }, children: name }, name))
+            children: weekdays.map((name) => /* @__PURE__ */ jsx("div", { role: "columnheader", style: { padding: "var(--iris-space-xxs, 4px) 0" }, children: name }, name))
           }
         ),
         /* @__PURE__ */ jsx(
@@ -9535,7 +9906,7 @@ function IrisCalendar({
             style: {
               display: "grid",
               gridTemplateColumns: "repeat(7, minmax(0, 1fr))",
-              gap: 2
+              gap: "var(--iris-space-xxs, 4px)"
             },
             children: matrix.map((week, wi) => /* @__PURE__ */ jsx(
               "div",
@@ -9580,7 +9951,7 @@ function IrisCalendar({
                         borderRadius: "var(--iris-radius-sm, 4px)",
                         cursor: isDisabled ? "not-allowed" : "pointer",
                         opacity: isDisabled ? 0.45 : 1,
-                        fontSize: 13,
+                        fontSize: "var(--iris-font-size-sm, 13px)",
                         fontFamily: "inherit",
                         outline: "none"
                       },
@@ -9622,9 +9993,9 @@ function IrisDatePicker({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue ?? null);
+  const [internal, setInternal] = React70.useState(defaultValue ?? null);
   const value = isControlled ? valueProp : internal;
-  const [open, setOpen] = React67.useState(false);
+  const [open, setOpen] = React70.useState(false);
   const display = formatDisplay(value, locale);
   const handleSelect = (next) => {
     if (!isControlled) setInternal(next);
@@ -9648,15 +10019,15 @@ function IrisDatePicker({
         style: {
           display: "inline-flex",
           alignItems: "center",
-          gap: 6,
-          padding: "6px 12px",
+          gap: "var(--iris-space-xs, 8px)",
+          padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
           background: "var(--iris-background)",
           color: value ? "var(--iris-foreground)" : "var(--iris-muted)",
           border: `1px solid ${invalid ? "var(--iris-danger)" : "var(--iris-border)"}`,
           borderRadius: "var(--iris-radius-md, 6px)",
           cursor: disabled ? "not-allowed" : "pointer",
           opacity: disabled ? 0.6 : 1,
-          fontSize: 14,
+          fontSize: "var(--iris-font-size-md, 14px)",
           fontFamily: "inherit",
           minHeight: 34,
           minWidth: 180,
@@ -9685,7 +10056,7 @@ var TREE_STATE_STYLE = {
   padding: "12px",
   textAlign: "center",
   color: "var(--iris-muted)",
-  fontSize: 14
+  fontSize: "var(--iris-font-size-md, 14px)"
 };
 function IrisTree({
   nodes,
@@ -9712,8 +10083,8 @@ function IrisTree({
   const safeNodes = nodes ?? [];
   const expControlled = expandedProp !== void 0;
   const selControlled = selectedProp !== void 0;
-  const [expInternal, setExpInternal] = React67.useState(defaultExpanded);
-  const [selInternal, setSelInternal] = React67.useState(defaultSelected);
+  const [expInternal, setExpInternal] = React70.useState(defaultExpanded);
+  const [selInternal, setSelInternal] = React70.useState(defaultSelected);
   const expanded = expControlled ? expandedProp : expInternal;
   const selected = selControlled ? selectedProp : selInternal;
   const { t } = useI18n();
@@ -9722,19 +10093,19 @@ function IrisTree({
     error,
     empty: safeNodes.length === 0
   });
-  const [lazyCache, setLazyCache] = React67.useState(/* @__PURE__ */ new Map());
-  const [loadingIds, setLoadingIds] = React67.useState(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = React67.useState(/* @__PURE__ */ new Set());
-  const expandedSet = React67.useMemo(() => new Set(expanded), [expanded]);
-  const selectedSet = React67.useMemo(() => new Set(selected), [selected]);
-  const childrenOf = React67.useCallback(
+  const [lazyCache, setLazyCache] = React70.useState(/* @__PURE__ */ new Map());
+  const [loadingIds, setLoadingIds] = React70.useState(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = React70.useState(/* @__PURE__ */ new Set());
+  const expandedSet = React70.useMemo(() => new Set(expanded), [expanded]);
+  const selectedSet = React70.useMemo(() => new Set(selected), [selected]);
+  const childrenOf = React70.useCallback(
     (node) => {
       if (node.children && node.children.length > 0) return node.children;
       return lazyCache.get(node.id) ?? null;
     },
     [lazyCache]
   );
-  const hasChildrenFn = React67.useCallback(
+  const hasChildrenFn = React70.useCallback(
     (node) => {
       if (node.isLeaf) return false;
       if (node.children && node.children.length > 0) return true;
@@ -9743,7 +10114,7 @@ function IrisTree({
     },
     [lazyCache]
   );
-  const flat = React67.useMemo(() => {
+  const flat = React70.useMemo(() => {
     const out = [];
     const walk = (ns, depth, parentId) => {
       for (const node of ns) {
@@ -9758,7 +10129,7 @@ function IrisTree({
     walk(safeNodes, 0, null);
     return out;
   }, [safeNodes, expandedSet, childrenOf, hasChildrenFn]);
-  const checkNodes = React67.useMemo(() => {
+  const checkNodes = React70.useMemo(() => {
     const out = [];
     const walk = (ns, parentKey) => {
       for (const node of ns) {
@@ -9770,9 +10141,9 @@ function IrisTree({
     walk(safeNodes, void 0);
     return out;
   }, [safeNodes, lazyCache]);
-  const onCheckedRef = React67.useRef(onCheckedChange);
+  const onCheckedRef = React70.useRef(onCheckedChange);
   onCheckedRef.current = onCheckedChange;
-  const checkModel = React67.useMemo(
+  const checkModel = React70.useMemo(
     () => createTreeSelection({
       nodes: checkNodes,
       defaultChecked,
@@ -9780,18 +10151,18 @@ function IrisTree({
     }),
     [checkNodes, defaultChecked]
   );
-  React67.useSyncExternalStore(
+  React70.useSyncExternalStore(
     checkModel.selection.store.subscribe,
     checkModel.selection.get,
     checkModel.selection.get
   );
-  const [activeId, setActiveId] = React67.useState(flat[0]?.node.id ?? null);
-  React67.useEffect(() => {
+  const [activeId, setActiveId] = React70.useState(flat[0]?.node.id ?? null);
+  React70.useEffect(() => {
     if (!activeId || !flat.some((f) => f.node.id === activeId)) {
       setActiveId(flat[0]?.node.id ?? null);
     }
   }, [flat, activeId]);
-  const expandedRef = React67.useRef(expanded);
+  const expandedRef = React70.useRef(expanded);
   expandedRef.current = expanded;
   const setExpanded = (next) => {
     if (!expControlled) setExpInternal(next);
@@ -9909,7 +10280,7 @@ function IrisTree({
         color: "var(--iris-foreground)",
         border: "1px solid var(--iris-border)",
         borderRadius: "var(--iris-radius-md, 6px)",
-        fontSize: 14,
+        fontSize: "var(--iris-font-size-md, 14px)",
         ...style
       },
       children: isContent ? flat.map(({ node, depth, hasChildren }) => {
@@ -9975,7 +10346,7 @@ function IrisTree({
                     color: "inherit",
                     cursor: "pointer",
                     padding: 0,
-                    fontSize: 11,
+                    fontSize: "var(--iris-font-size-xs, 12px)",
                     fontFamily: "inherit",
                     transition: "transform 120ms ease",
                     transform: isLoading ? "none" : isExpanded ? "rotate(90deg)" : "rotate(0deg)"
@@ -10057,7 +10428,7 @@ var LIST_STATE_STYLE = {
   padding: "12px",
   textAlign: "center",
   color: "var(--iris-muted)",
-  fontSize: 14
+  fontSize: "var(--iris-font-size-md, 14px)"
 };
 function IrisList({
   items,
@@ -10083,7 +10454,7 @@ function IrisList({
   const asKey = (v) => v;
   const toKeys = (v) => v == null ? [] : Array.isArray(v) ? v.map(asKey) : [asKey(v)];
   const fromKeys = (keys) => multi ? keys : keys[0] ?? null;
-  const modelRef = React67.useRef(null);
+  const modelRef = React70.useRef(null);
   if (modelRef.current === null) {
     const initial = defaultValue !== void 0 ? defaultValue : multi ? [] : null;
     modelRef.current = createSelectionModel({
@@ -10094,7 +10465,7 @@ function IrisList({
   }
   const model = modelRef.current;
   const selectedKeys = useStore(model.store);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (isControlled) model.sync(toKeys(valueProp));
   }, [valueProp, isControlled, model]);
   const displaySelectedKeys = isControlled ? toKeys(valueProp) : selectedKeys;
@@ -10107,12 +10478,12 @@ function IrisList({
     error,
     empty: safeItems.length === 0
   });
-  const isSelected = React67.useCallback(
+  const isSelected = React70.useCallback(
     (v) => displaySelectedKeys.includes(v),
     [displaySelectedKeys]
   );
-  const isEnabled = React67.useCallback((i) => !safeItems[i]?.disabled, [safeItems]);
-  const ctxRef = React67.useRef({
+  const isEnabled = React70.useCallback((i) => !safeItems[i]?.disabled, [safeItems]);
+  const ctxRef = React70.useRef({
     items: safeItems,
     multi,
     loop,
@@ -10122,7 +10493,7 @@ function IrisList({
     onSelect,
     asKey
   });
-  const navRef = React67.useRef(null);
+  const navRef = React70.useRef(null);
   if (navRef.current === null) {
     navRef.current = createKeyboardNav({
       count: safeItems.length,
@@ -10131,7 +10502,7 @@ function IrisList({
     });
   }
   const nav = navRef.current;
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     nav.reset(safeItems.length);
   });
   ctxRef.current = {
@@ -10145,7 +10516,8 @@ function IrisList({
     asKey
   };
   const activeIndex = useStore(nav.store);
-  const listRef = React67.useRef(null);
+  const [hoveredIndex, setHoveredIndex] = React70.useState(-1);
+  const listRef = React70.useRef(null);
   const focusAt = (index) => {
     const el = listRef.current?.querySelector(`[data-iris-list-index="${index}"]`);
     el?.focus();
@@ -10193,8 +10565,10 @@ function IrisList({
         padding: "var(--iris-padding-sm, 4px)",
         display: "flex",
         flexDirection: "column",
-        gap: 2,
+        gap: "var(--iris-space-xxs, 4px)",
         outline: "none",
+        maxHeight: 240,
+        overflowY: "auto",
         ...style
       },
       children: isContent ? safeItems.map((item, index) => {
@@ -10204,16 +10578,17 @@ function IrisList({
           display: "flex",
           alignItems: "center",
           gap: "var(--iris-gap-sm, 6px)",
-          padding: "6px var(--iris-padding-md, 12px)",
+          padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
           borderRadius: "var(--iris-radius-sm, 4px)",
           cursor: item.disabled ? "not-allowed" : "pointer",
           opacity: item.disabled ? 0.5 : 1,
-          fontSize: 14,
-          background: selected ? "var(--iris-primary)" : active ? "var(--iris-surface-hover)" : "transparent",
-          color: selected ? "var(--iris-primary-foreground, #fff)" : "var(--iris-foreground)",
+          fontSize: "var(--iris-font-size-md, 14px)",
+          background: selected ? "var(--iris-surface-selected, rgba(99, 102, 241, 0.12))" : hoveredIndex === index ? "var(--iris-surface-hover)" : active ? "var(--iris-surface-hover)" : "transparent",
+          color: "var(--iris-foreground)",
+          fontWeight: selected ? 600 : 400,
           outline: "none"
         };
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "li",
           {
             role: "option",
@@ -10223,10 +10598,29 @@ function IrisList({
             "data-iris-list-index": index,
             "data-iris-list-item": "",
             "data-state": selected ? "selected" : active ? "active" : "idle",
+            onMouseEnter: () => setHoveredIndex(index),
+            onMouseLeave: () => setHoveredIndex((current) => current === index ? -1 : current),
             onClick: item.disabled ? void 0 : () => select(item),
             onFocus: () => nav.focus(index),
             style: baseStyle,
-            children: renderItem ? renderItem(item, { selected, active, index }) : item.label ?? String(item.value)
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: renderItem ? renderItem(item, { selected, active, index }) : item.label ?? String(item.value) }),
+              selected ? /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "var(--iris-primary)",
+                  strokeWidth: "2.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+                }
+              ) : null
+            ]
           },
           String(item.value ?? index)
         );
@@ -10275,11 +10669,11 @@ function IrisFileUpload({
   const { t } = useI18n();
   const resolvedLabel = label ?? t("fileUpload.label");
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const files = isControlled ? valueProp : internal;
-  const inputRef = React67.useRef(null);
-  const dragCountRef = React67.useRef(0);
-  const [dragOver, setDragOver] = React67.useState(false);
+  const inputRef = React70.useRef(null);
+  const dragCountRef = React70.useRef(0);
+  const [dragOver, setDragOver] = React70.useState(false);
   const acceptMatches = (file) => {
     if (!accept) return true;
     const tokens = accept.split(",").map((t2) => t2.trim()).filter(Boolean);
@@ -10378,7 +10772,7 @@ function IrisFileUpload({
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: 6,
+    gap: "var(--iris-space-xs, 8px)",
     padding: "var(--iris-padding-lg, 20px)",
     border: `2px dashed ${dragOver ? "var(--iris-primary)" : "var(--iris-border)"}`,
     borderRadius: "var(--iris-radius-md, 6px)",
@@ -10438,8 +10832,15 @@ function IrisFileUpload({
             onDrop,
             style: zoneStyle,
             children: [
-              /* @__PURE__ */ jsx("div", { "data-iris-file-upload-label": "", style: { fontSize: 14, fontWeight: 500 }, children: resolvedLabel }),
-              accept ? /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--iris-muted)" }, children: accept }) : null
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-iris-file-upload-label": "",
+                  style: { fontSize: "var(--iris-font-size-md, 14px)", fontWeight: 500 },
+                  children: resolvedLabel
+                }
+              ),
+              accept ? /* @__PURE__ */ jsx("div", { style: { fontSize: "var(--iris-font-size-xs, 12px)", color: "var(--iris-muted)" }, children: accept }) : null
             ]
           }
         ),
@@ -10463,15 +10864,21 @@ function IrisFileUpload({
                   display: "flex",
                   alignItems: "center",
                   gap: 8,
-                  padding: "6px 10px",
+                  padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
                   background: "var(--iris-surface)",
                   border: "1px solid var(--iris-border)",
                   borderRadius: "var(--iris-radius-sm, 4px)",
-                  fontSize: 13
+                  fontSize: "var(--iris-font-size-sm, 13px)"
                 },
                 children: [
                   /* @__PURE__ */ jsx("span", { style: { flex: 1, minWidth: 0 }, children: item.name }),
-                  /* @__PURE__ */ jsx("span", { style: { color: "var(--iris-muted)", fontSize: 12 }, children: formatBytes(item.size) }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-xs, 12px)" },
+                      children: formatBytes(item.size)
+                    }
+                  ),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
@@ -10487,7 +10894,7 @@ function IrisFileUpload({
                         border: "none",
                         color: "var(--iris-muted)",
                         cursor: disabled ? "not-allowed" : "pointer",
-                        fontSize: 16,
+                        fontSize: "var(--iris-font-size-lg, 16px)",
                         lineHeight: 1,
                         padding: "0 4px"
                       },
@@ -10504,9 +10911,9 @@ function IrisFileUpload({
     }
   );
 }
-var MenuContext = React67.createContext(null);
+var MenuContext = React70.createContext(null);
 function useMenuContext(componentName) {
-  const ctx = React67.useContext(MenuContext);
+  const ctx = React70.useContext(MenuContext);
   if (!ctx) {
     throw new Error(`[iris-ui] ${componentName} must be a descendant of <IrisMenu>`);
   }
@@ -10523,7 +10930,7 @@ function IrisMenu({
   const isControlled = openProp !== void 0;
   const [state, send] = useMachine(() => createFloatingMachine(defaultOpen ? "open" : "closed"));
   const internalOpen = state.value === "open";
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isControlled) return;
     const target = openProp ? "open" : "closed";
     if (state.value !== target) {
@@ -10531,18 +10938,18 @@ function IrisMenu({
     }
   }, [isControlled, openProp, state.value, send]);
   const open = isControlled ? Boolean(openProp) : internalOpen;
-  const setOpen = React67.useCallback(
+  const setOpen = React70.useCallback(
     (next) => {
       if (!isControlled) send({ type: next ? "OPEN" : "CLOSE" });
       onOpenChange?.(next);
     },
     [isControlled, send, onOpenChange]
   );
-  const triggerRef = React67.useRef(null);
-  const contentRef = React67.useRef(null);
-  const contentId = React67.useId();
-  const closeRoot = React67.useCallback(() => setOpen(false), [setOpen]);
-  const value = React67.useMemo(
+  const triggerRef = React70.useRef(null);
+  const contentRef = React70.useRef(null);
+  const contentId = React70.useId();
+  const closeRoot = React70.useCallback(() => setOpen(false), [setOpen]);
+  const value = React70.useMemo(
     () => ({
       open,
       setOpen,
@@ -10557,10 +10964,10 @@ function IrisMenu({
   );
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children });
 }
-var IrisMenuTrigger = React67.forwardRef(
+var IrisMenuTrigger = React70.forwardRef(
   function IrisMenuTrigger2({ asChild = false, onClick, onKeyDown, children, ...rest }, forwardedRef) {
     const ctx = useMenuContext("IrisMenuTrigger");
-    const captureRef = React67.useCallback(
+    const captureRef = React70.useCallback(
       (el) => {
         ctx.triggerRef.current = el;
         if (typeof forwardedRef === "function") forwardedRef(el);
@@ -10591,7 +10998,7 @@ var IrisMenuTrigger = React67.forwardRef(
       onKeyDown: handleKeyDown
     };
     if (asChild) {
-      if (!React67.isValidElement(children)) {
+      if (!React70.isValidElement(children)) {
         if (process.env.NODE_ENV !== "production") {
           console.warn("[iris-ui] IrisMenuTrigger asChild requires a single React element");
         }
@@ -10611,11 +11018,11 @@ var IrisMenuTrigger = React67.forwardRef(
     );
   }
 );
-var IrisMenuContent = React67.forwardRef(
+var IrisMenuContent = React70.forwardRef(
   function IrisMenuContent2({ portalTarget, style, onKeyDown, children, ...rest }, forwardedRef) {
     const ctx = useMenuContext("IrisMenuContent");
-    const innerRef = React67.useRef(null);
-    const captureRef = React67.useCallback(
+    const innerRef = React70.useRef(null);
+    const captureRef = React70.useCallback(
       (el) => {
         innerRef.current = el;
         ctx.contentRef.current = el;
@@ -10637,8 +11044,8 @@ var IrisMenuContent = React67.forwardRef(
       exclude: [ctx.triggerRef, ctx.contentRef],
       onDismiss: () => ctx.setOpen(false)
     });
-    const wasOpenRef = React67.useRef(false);
-    React67.useEffect(() => {
+    const wasOpenRef = React70.useRef(false);
+    React70.useEffect(() => {
       if (ctx.open && !wasOpenRef.current) {
         queueMicrotask(() => {
           const items = innerRef.current?.querySelectorAll('[role="menuitem"]');
@@ -10649,7 +11056,7 @@ var IrisMenuContent = React67.forwardRef(
       }
       wasOpenRef.current = ctx.open;
     }, [ctx.open, ctx.triggerRef]);
-    const navRef = React67.useRef(null);
+    const navRef = React70.useRef(null);
     if (navRef.current === null) {
       navRef.current = createKeyboardNav({ count: 0, loop: true });
     }
@@ -10693,15 +11100,14 @@ var IrisMenuContent = React67.forwardRef(
         onKeyDown: handleKeyDown,
         style: {
           ...floatingStyles,
-          background: "var(--iris-surface)",
+          background: "var(--iris-surface-floating)",
           color: "var(--iris-foreground)",
           border: "1px solid var(--iris-border)",
           borderRadius: "var(--iris-radius-md, 6px)",
           padding: "var(--iris-padding-sm, 4px)",
-          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: 180,
-          outline: "none",
-          zIndex: 1e3,
+          zIndex: "var(--iris-z-popover, 1000)",
           ...style
         },
         children
@@ -10712,10 +11118,10 @@ var IrisMenuContent = React67.forwardRef(
     return createPortal(node, portalTarget ?? document.body);
   }
 );
-var IrisMenuItem = React67.forwardRef(
+var IrisMenuItem = React70.forwardRef(
   function IrisMenuItem2({ disabled = false, keepOpen = false, onSelect, onClick, onKeyDown, style, children, ...rest }, ref) {
     const ctx = useMenuContext("IrisMenuItem");
-    const [hovered, setHovered] = React67.useState(false);
+    const [hovered, setHovered] = React70.useState(false);
     const fire = (event) => {
       if (disabled) return;
       onSelect?.(event);
@@ -10754,14 +11160,13 @@ var IrisMenuItem = React67.forwardRef(
           display: "flex",
           alignItems: "center",
           gap: "var(--iris-gap-sm, 6px)",
-          padding: "6px var(--iris-padding-md, 12px)",
+          padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
           borderRadius: "var(--iris-radius-sm, 4px)",
           cursor: disabled ? "not-allowed" : "pointer",
           opacity: disabled ? 0.5 : 1,
           background: hovered && !disabled ? "var(--iris-surface-hover)" : "transparent",
           color: "inherit",
-          outline: "none",
-          fontSize: 14,
+          fontSize: "var(--iris-font-size-md, 14px)",
           transition: "background-color 80ms ease",
           ...style
         },
@@ -10770,7 +11175,7 @@ var IrisMenuItem = React67.forwardRef(
     );
   }
 );
-var IrisMenuSeparator = React67.forwardRef(
+var IrisMenuSeparator = React70.forwardRef(
   function IrisMenuSeparator2({ style, ...rest }, ref) {
     return /* @__PURE__ */ jsx(
       "div",
@@ -10791,11 +11196,11 @@ function IrisMenuSub({
   children
 }) {
   const parentCtx = useMenuContext("IrisMenuSub");
-  const [open, setOpenState] = React67.useState(false);
-  const triggerRef = React67.useRef(null);
-  const contentRef = React67.useRef(null);
-  const openTimerRef = React67.useRef(null);
-  const clearTimer = React67.useCallback(() => {
+  const [open, setOpenState] = React70.useState(false);
+  const triggerRef = React70.useRef(null);
+  const contentRef = React70.useRef(null);
+  const openTimerRef = React70.useRef(null);
+  const clearTimer = React70.useCallback(() => {
     if (openTimerRef.current) {
       clearTimeout(openTimerRef.current);
       openTimerRef.current = null;
@@ -10808,7 +11213,7 @@ function IrisMenuSub({
       openTimerRef.current = null;
     }, HOVER_OPEN_DELAY);
   };
-  React67.useEffect(() => clearTimer, [clearTimer]);
+  React70.useEffect(() => clearTimer, [clearTimer]);
   const { floatingStyles } = useFloating({
     anchor: triggerRef,
     floating: contentRef,
@@ -10816,9 +11221,9 @@ function IrisMenuSub({
     placement: "right-start",
     offset: -4
   });
-  const setOpen = React67.useCallback((v) => setOpenState(v), []);
-  const wasOpenRef = React67.useRef(false);
-  React67.useEffect(() => {
+  const setOpen = React70.useCallback((v) => setOpenState(v), []);
+  const wasOpenRef = React70.useRef(false);
+  React70.useEffect(() => {
     if (open && !wasOpenRef.current) {
       queueMicrotask(() => {
         const first = contentRef.current?.querySelector('[role="menuitem"]');
@@ -10863,7 +11268,7 @@ function IrisMenuSub({
       parentCtx.closeRoot();
     }
   };
-  const ctxValue = React67.useMemo(
+  const ctxValue = React70.useMemo(
     () => ({
       open,
       setOpen,
@@ -10897,11 +11302,10 @@ function IrisMenuSub({
         alignItems: "center",
         justifyContent: "space-between",
         gap: "var(--iris-gap-sm, 6px)",
-        padding: "6px var(--iris-padding-md, 12px)",
+        padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 12px)",
         borderRadius: "var(--iris-radius-sm, 4px)",
         cursor: "pointer",
-        outline: "none",
-        fontSize: 14,
+        fontSize: "var(--iris-font-size-md, 14px)",
         background: open ? "var(--iris-surface-hover)" : "transparent"
       },
       children: [
@@ -10934,14 +11338,13 @@ function IrisMenuSub({
       onPointerEnter: clearTimer,
       style: {
         ...floatingStyles,
-        background: "var(--iris-surface)",
+        background: "var(--iris-surface-floating)",
         color: "var(--iris-foreground)",
         border: "1px solid var(--iris-border)",
         borderRadius: "var(--iris-radius-md, 6px)",
         padding: "var(--iris-padding-sm, 4px)",
-        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: 180,
-        outline: "none",
         zIndex: 1001
       },
       children: /* @__PURE__ */ jsx(MenuContext.Provider, { value: ctxValue, children })
@@ -10954,7 +11357,7 @@ function IrisMenuSub({
   ] });
 }
 var TONE_TO_VAR4 = {
-  info: "--iris-primary",
+  info: "--iris-info",
   success: "--iris-success",
   warning: "--iris-warning",
   danger: "--iris-danger",
@@ -10975,7 +11378,7 @@ function IrisBanner({
 }) {
   const { t } = useI18n();
   const isControlled = openProp !== void 0;
-  const [internalOpen, setInternalOpen] = React67.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React70.useState(defaultOpen);
   const isOpen = isControlled ? Boolean(openProp) : internalOpen;
   const handleClose = () => {
     if (!isControlled) setInternalOpen(false);
@@ -11032,7 +11435,7 @@ function IrisBanner({
               border: "none",
               cursor: "pointer",
               color: "var(--iris-muted)",
-              fontSize: 16,
+              fontSize: "var(--iris-font-size-lg, 16px)",
               padding: "0 4px",
               lineHeight: 1,
               flexShrink: 0
@@ -11066,7 +11469,7 @@ function IrisTimePicker({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const value = isControlled ? valueProp ?? defaultValue : internal;
   const setValue = (next) => {
     if (!isControlled) setInternal(next);
@@ -11145,12 +11548,12 @@ function IrisTimePicker({
   const fieldStyle = {
     width: 48,
     height: 34,
-    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 ${invalid ? "var(--iris-danger)" : "var(--iris-border)"}`,
     borderRadius: "var(--iris-radius-sm, 4px)",
-    fontSize: 15,
+    fontSize: "var(--iris-font-size-md, 14px)",
     fontFamily: "inherit",
     textAlign: "center",
     outline: "none"
@@ -11188,7 +11591,14 @@ function IrisTimePicker({
             style: fieldStyle
           }
         ),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "var(--iris-muted)", fontSize: 15 }, children: ":" }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: { color: "var(--iris-muted)", fontSize: "var(--iris-font-size-md, 14px)" },
+            children: ":"
+          }
+        ),
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -11222,7 +11632,7 @@ function IrisTimePicker({
               border: "1px solid var(--iris-border)",
               borderRadius: "var(--iris-radius-sm, 4px)",
               cursor: disabled ? "not-allowed" : "pointer",
-              fontSize: 13,
+              fontSize: "var(--iris-font-size-sm, 13px)",
               fontFamily: "inherit",
               fontWeight: 600
             },
@@ -11257,14 +11667,14 @@ function IrisDateRangePicker({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const value = isControlled ? valueProp ?? { start: null, end: null } : internal;
-  const [open, setOpen] = React67.useState(false);
-  const leftMonth = React67.useMemo(
+  const [open, setOpen] = React70.useState(false);
+  const leftMonth = React70.useMemo(
     () => value.start ? startOfMonth(value.start) : startOfMonth(/* @__PURE__ */ new Date()),
     [value.start]
   );
-  const display = React67.useMemo(() => {
+  const display = React70.useMemo(() => {
     const s = formatDisplay2(value.start, locale);
     const e = formatDisplay2(value.end, locale);
     if (s && e) return `${s}  \u2192  ${e}`;
@@ -11305,14 +11715,14 @@ function IrisDateRangePicker({
         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 ? "var(--iris-foreground)" : "var(--iris-muted)",
           border: `1px solid ${invalid ? "var(--iris-danger)" : "var(--iris-border)"}`,
           borderRadius: "var(--iris-radius-md, 6px)",
           cursor: disabled ? "not-allowed" : "pointer",
           opacity: disabled ? 0.6 : 1,
-          fontSize: 14,
+          fontSize: "var(--iris-font-size-md, 14px)",
           fontFamily: "inherit",
           minHeight: 34,
           minWidth: 260,
@@ -11383,14 +11793,14 @@ function IrisSlider({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const raw = isControlled ? valueProp : internal;
   const value = clamp4(roundToStep2(raw, step, min), min, max);
-  const valueRef = React67.useRef(value);
+  const valueRef = React70.useRef(value);
   valueRef.current = value;
-  const trackRef = React67.useRef(null);
-  const thumbRef = React67.useRef(null);
-  const [dragging, setDragging] = React67.useState(false);
+  const trackRef = React70.useRef(null);
+  const thumbRef = React70.useRef(null);
+  const [dragging, setDragging] = React70.useState(false);
   const isHorizontal = orientation === "horizontal";
   const setValue = (next) => {
     const clamped = clamp4(roundToStep2(next, step, min), min, max);
@@ -11558,16 +11968,16 @@ function IrisRangeSlider({
 }) {
   const { t } = useI18n();
   const isControlled = valueProp !== void 0;
-  const [internal, setInternal] = React67.useState(defaultValue);
+  const [internal, setInternal] = React70.useState(defaultValue);
   const raw = isControlled ? valueProp : internal;
   const startVal = clamp5(roundToStep3(raw[0] ?? min, step, min), min, max);
   const endVal = clamp5(roundToStep3(raw[1] ?? max, step, min), min, max);
-  const trackRef = React67.useRef(null);
-  const startRef = React67.useRef(null);
-  const endRef = React67.useRef(null);
-  const [dragging, setDragging] = React67.useState(null);
+  const trackRef = React70.useRef(null);
+  const startRef = React70.useRef(null);
+  const endRef = React70.useRef(null);
+  const [dragging, setDragging] = React70.useState(null);
   const percent = (v) => (v - min) / Math.max(1e-9, max - min) * 100;
-  const setRange = React67.useCallback(
+  const setRange = React70.useCallback(
     (next) => {
       if (!isControlled) setInternal(next);
       onChange?.(next);
@@ -11650,7 +12060,7 @@ function IrisRangeSlider({
       style: {
         position: "relative",
         width: "100%",
-        padding: "14px 8px",
+        padding: "var(--iris-space-md, 16px) var(--iris-space-xs, 8px)",
         ...style
       },
       children: /* @__PURE__ */ jsxs(
@@ -11770,14 +12180,14 @@ function IrisColorPicker({
 }) {
   const { t } = useI18n();
   const initialHex = value ?? defaultValue ?? "#000000";
-  const [hsva, setHsva] = React67.useState(
+  const [hsva, setHsva] = React70.useState(
     () => rgbaToHsva(hexToRgba(initialHex) ?? { r: 0, g: 0, b: 0, a: 1 })
   );
-  const [hexDraft, setHexDraft] = React67.useState(null);
-  const padRef = React67.useRef(null);
-  const hueRef = React67.useRef(null);
-  const alphaRef = React67.useRef(null);
-  React67.useEffect(() => {
+  const [hexDraft, setHexDraft] = React70.useState(null);
+  const padRef = React70.useRef(null);
+  const hueRef = React70.useRef(null);
+  const alphaRef = React70.useRef(null);
+  React70.useEffect(() => {
     if (value === void 0) return;
     const parsed = hexToRgba(value);
     if (!parsed) return;
@@ -12108,10 +12518,10 @@ function IrisCommandPalette({
   const { t } = useI18n();
   const resolvedPlaceholder = placeholder ?? t("commandPalette.placeholder");
   const resolvedEmptyText = emptyText ?? t("commandPalette.empty");
-  const [query, setQuery] = React67.useState("");
-  const [activeIndex, setActiveIndex] = React67.useState(0);
-  const surfaceRef = React67.useRef(null);
-  const matches = React67.useMemo(() => {
+  const [query, setQuery] = React70.useState("");
+  const [activeIndex, setActiveIndex] = React70.useState(0);
+  const surfaceRef = React70.useRef(null);
+  const matches = React70.useMemo(() => {
     const result = [];
     for (const item of items) {
       const score = filter(query, item);
@@ -12120,7 +12530,7 @@ function IrisCommandPalette({
     result.sort((a, b) => a.score - b.score);
     return result;
   }, [items, query, filter]);
-  const groupedFlat = React67.useMemo(() => {
+  const groupedFlat = React70.useMemo(() => {
     const out = [];
     let currentGroup;
     for (const m of matches) {
@@ -12133,19 +12543,19 @@ function IrisCommandPalette({
     }
     return out;
   }, [matches]);
-  const itemRows = React67.useMemo(() => {
+  const itemRows = React70.useMemo(() => {
     const out = [];
     groupedFlat.forEach((row, i) => {
       if (row.kind === "item" && !row.item.disabled) out.push({ item: row.item, flat: i });
     });
     return out;
   }, [groupedFlat]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!open) return;
     setQuery("");
     setActiveIndex(0);
   }, [open]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     setActiveIndex(0);
   }, [query]);
   useBodyScrollLock(open);
@@ -12162,7 +12572,7 @@ function IrisCommandPalette({
     if (total === 0) return;
     setActiveIndex((prev) => (prev + delta + total) % total);
   };
-  const keyHandlerRef = React67.useRef(() => {
+  const keyHandlerRef = React70.useRef(() => {
   });
   keyHandlerRef.current = (event) => {
     switch (event.key) {
@@ -12186,7 +12596,7 @@ function IrisCommandPalette({
         break;
     }
   };
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!open) return;
     const onKey = (e) => keyHandlerRef.current(e);
     document.addEventListener("keydown", onKey);
@@ -12230,7 +12640,7 @@ function IrisCommandPalette({
             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",
             ...style
           },
@@ -12246,11 +12656,11 @@ function IrisCommandPalette({
                 onChange: (e) => setQuery(e.target.value),
                 style: {
                   width: "100%",
-                  padding: "8px 10px",
+                  padding: "var(--iris-space-xs, 8px) var(--iris-space-sm, 12px)",
                   background: "transparent",
                   border: "none",
                   outline: "none",
-                  fontSize: 16,
+                  fontSize: "var(--iris-font-size-lg, 16px)",
                   fontFamily: "inherit",
                   color: "inherit"
                 }
@@ -12267,7 +12677,12 @@ function IrisCommandPalette({
                   "li",
                   {
                     "data-iris-command-palette-empty": "",
-                    style: { padding: 20, textAlign: "center", color: "var(--iris-muted)", fontSize: 13 },
+                    style: {
+                      padding: 20,
+                      textAlign: "center",
+                      color: "var(--iris-muted)",
+                      fontSize: "var(--iris-font-size-sm, 13px)"
+                    },
                     children: resolvedEmptyText
                   }
                 ) : groupedFlat.map((row, i) => {
@@ -12277,11 +12692,11 @@ function IrisCommandPalette({
                       {
                         "data-iris-command-palette-group": "",
                         style: {
-                          padding: "6px 12px",
-                          fontSize: 11,
+                          padding: "var(--iris-padding-sm, 6px) var(--iris-padding-md, 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)"
                         },
                         children: row.label
@@ -12311,14 +12726,14 @@ function IrisCommandPalette({
                       style: {
                         display: "flex",
                         alignItems: "center",
-                        gap: 10,
+                        gap: "var(--iris-space-sm, 12px)",
                         padding: "8px 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: 14
+                        fontSize: "var(--iris-font-size-md, 14px)"
                       },
                       children: [
                         item.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 20, textAlign: "center" }, children: item.icon }) : null,
@@ -12328,8 +12743,8 @@ function IrisCommandPalette({
                           {
                             "data-iris-command-palette-shortcut": "",
                             style: {
-                              fontSize: 11,
-                              padding: "2px 6px",
+                              fontSize: "var(--iris-font-size-xs, 12px)",
+                              padding: "var(--iris-space-xxs, 4px) var(--iris-padding-sm, 6px)",
                               background: "var(--iris-background)",
                               border: "1px solid var(--iris-border)",
                               borderRadius: "var(--iris-radius-sm, 4px)",