@kjun-ui/native 0.13.0 → 0.15.0

package/dist/index.web.js

@@ -1818,6 +1818,18 @@ function KjunFormLayout({
   ) });
 }
 
+// shared/package-runtime/use-after-close.ts
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6 } from "react";
+function useAfterClose(present, onAfterClose, enabled2 = true) {
+  const was = useRef6(present), callback = useRef6(onAfterClose);
+  callback.current = onAfterClose;
+  useEffect4(() => {
+    var _a;
+    if (was.current && !present && enabled2) (_a = callback.current) == null ? void 0 : _a.call(callback);
+    was.current = present;
+  }, [present, enabled2]);
+}
+
 // shared/package-runtime/content-presence.ts
 import { Fragment as Fragment2, isValidElement as isValidElement2 } from "react";
 function hasContent(node) {
@@ -1859,8 +1871,9 @@ import {
 import {
   createContext as createContext14,
   useContext as useContext9,
-  useEffect as useEffect4,
-  useId as useId3
+  useEffect as useEffect5,
+  useId as useId3,
+  useRef as useRef7
 } from "react";
 import { Platform as Platform9, View as View7 } from "react-native";
 
@@ -1892,13 +1905,14 @@ var FeedbackOverlayContext = createContext14(
   null
 );
 function ScopedNativeModal({ children, visible, ...props }) {
-  var _a;
   const layers = useLayerState(), scope = useContext9(LayerScope);
   const entry = scope ? layers.entries.get(scope) : void 0;
-  const generation = (_a = entry == null ? void 0 : entry.order) != null ? _a : 0;
+  const last = useRef7(0);
+  if (entry) last.current = entry.order;
+  const generation = last.current;
   const inactive = !!scope && !layers.isActive(scope);
   const host = useContext9(FeedbackOverlayContext), id = "kjun-" + useId3(), register = host == null ? void 0 : host.register;
-  useEffect4(
+  useEffect5(
     () => visible && register ? register(id) : void 0,
     [visible, register, id, generation]
   );
@@ -2023,6 +2037,7 @@ function KjunModal({
   open,
   onOpenChange,
   onClose,
+  onAfterClose,
   onCancel,
   onConfirm,
   title = "",
@@ -2070,10 +2085,15 @@ function KjunModal({
   const layer = useLayer(open, motion.present, "window", () => {
     if (closeOnEsc) close();
   });
+  const iosDismiss = Platform10.OS === "ios";
+  useAfterClose(motion.present, onAfterClose, !iosDismiss);
   return /* @__PURE__ */ jsx13(LayerScope.Provider, { value: layer.id, children: /* @__PURE__ */ jsx13(
     ScopedNativeModal,
     {
       visible: motion.present,
+      onDismiss: iosDismiss ? () => {
+        if (!open) onAfterClose == null ? void 0 : onAfterClose();
+      } : void 0,
       transparent: true,
       animationType: "none",
       onRequestClose: () => {
@@ -2250,7 +2270,11 @@ function KjunCard({
   border = false,
   dividers = false,
   children,
-  style
+  style,
+  pressable = false,
+  disabled = false,
+  ariaLabel,
+  onPress
 }) {
   const { colors } = useKjunStyles();
   const id = "kjun-" + useId4().replace(/[^a-z0-9]/gi, "");
@@ -2261,7 +2285,7 @@ function KjunCard({
   const hasHeading = hasContent(header) || hasContent(title) || hasContent(subtitle);
   const hasHeader = hasHeading || hasContent(headerActions);
   const hasBody = hasContent(children), hasFooter = hasContent(footer), hasMedia = hasContent(media);
-  return /* @__PURE__ */ jsxs6(View9, { style: [
+  const base = [
     {
       minWidth: 0,
       borderRadius: corner,
@@ -2270,7 +2294,8 @@ function KjunCard({
     },
     Platform11.OS === "web" && surface === "glass" ? { backdropFilter: `blur(${tokens10.card.glassBlur}px)` } : {},
     style
-  ], children: [
+  ];
+  const parts = /* @__PURE__ */ jsxs6(Fragment4, { children: [
     paint.gradientEnd && /* @__PURE__ */ jsx14(View9, { pointerEvents: "none", style: { position: "absolute", inset: 0, borderRadius: corner, overflow: "hidden" }, children: /* @__PURE__ */ jsxs6(Svg2, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ jsx14(Defs, { children: /* @__PURE__ */ jsxs6(LinearGradient, { id, x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
         /* @__PURE__ */ jsx14(Stop, { offset: "0", stopColor: colors[paint.background] }),
@@ -2313,6 +2338,18 @@ function KjunCard({
       boxShadow: [{ offsetX: 0, offsetY: 0, blurRadius: 0, spreadDistance: tokens10.card.borderWidth, inset: true, color: borderColor }]
     } })
   ] });
+  return pressable ? /* @__PURE__ */ jsx14(
+    AccessiblePressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: ariaLabel != null ? ariaLabel : title,
+      accessibilityState: { disabled },
+      disabled,
+      onPress,
+      style: ({ pressed }) => [base, pressed ? { transform: [{ scale: 0.99 }] } : null, disabled ? { opacity: tokens10.states.opacity.disabled } : null],
+      children: parts
+    }
+  ) : /* @__PURE__ */ jsx14(View9, { style: base, children: parts });
 }
 
 // shared/package-runtime/alert-live.ts
@@ -2323,8 +2360,8 @@ function alertRole(tone, live) {
 }
 
 // packages/native/src/display-primitives.tsx
-import { tokens as tokens11 } from "@kjun-ui/tokens";
-import { useContext as useContext10, useEffect as useEffect5, useRef as useRef6, useState as useState10 } from "react";
+import { tokens as tokens12 } from "@kjun-ui/tokens";
+import { useContext as useContext10, useEffect as useEffect6, useRef as useRef8, useState as useState10 } from "react";
 import {
   Animated as Animated5,
   Easing as Easing3,
@@ -2333,6 +2370,25 @@ import {
   View as View10
 } from "react-native";
 import Svg3, { Circle as Circle2, Path as Path2 } from "react-native-svg";
+
+// shared/package-runtime/progress-circle.ts
+import { tokens as tokens11 } from "@kjun-ui/tokens";
+function progressCircle(size, percentage) {
+  const { size: diameter, stroke } = tokens11.extensions.progress.circle[size];
+  const radius = (diameter - stroke) / 2, circumference = 2 * Math.PI * radius;
+  return {
+    diameter,
+    stroke,
+    radius,
+    centre: diameter / 2,
+    circumference,
+    offset: circumference * (1 - percentage / 100),
+    // Small circles are too narrow for the centre percentage; screen readers still get the value.
+    showsPercentage: size !== "sm"
+  };
+}
+
+// packages/native/src/display-primitives.tsx
 import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var badgeLayoutKeys = /* @__PURE__ */ new Set([
   "alignSelf",
@@ -2372,10 +2428,10 @@ function BadgeView({
   dot = false,
   children,
   style,
-  dotSize = tokens11.extensions.badge.dotSize
+  dotSize = tokens12.extensions.badge.dotSize
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const { x, y } = tokens11.extensions.badge.padding[size];
+  const { x, y } = tokens12.extensions.badge.padding[size];
   const type = typeStyle(size === "xl" ? "controlLarge" : size === "lg" ? "control" : "controlSmall");
   const neutral = variant === "default" || variant === "secondary";
   const financial = variant.startsWith("price-");
@@ -2393,10 +2449,10 @@ function BadgeView({
           maxWidth: "100%",
           minWidth: 0,
           flexShrink: 1,
-          gap: tokens11.extensions.badge.gap,
+          gap: tokens12.extensions.badge.gap,
           paddingHorizontal: x,
           paddingVertical: y,
-          borderRadius: tokens11.extensions.badge.radius,
+          borderRadius: tokens12.extensions.badge.radius,
           backgroundColor: background
         },
         inner
@@ -2434,7 +2490,7 @@ function KjunEmpty({
   const m = useKjunMessages();
   text != null ? text : text = m.noData;
   const { colors } = useKjunStyles();
-  const spec = tokens11.extensions.empty;
+  const spec = tokens12.extensions.empty;
   const stateContent = useContext10(DataStateContentContext);
   return /* @__PURE__ */ jsxs7(
     View10,
@@ -2442,7 +2498,7 @@ function KjunEmpty({
       style: {
         alignItems: "center",
         justifyContent: "center",
-        paddingVertical: stateContent === "empty" ? 0 : tokens11.dimension.value32
+        paddingVertical: stateContent === "empty" ? 0 : tokens12.dimension.value32
       },
       children: [
         !!icon && /* @__PURE__ */ jsx15(View10, { style: { marginBottom: spec.iconGap }, children: /* @__PURE__ */ jsx15(KjunIcon, { name: icon, size: spec.iconSize, color: colors.textSecondary }) }),
@@ -2469,13 +2525,13 @@ function KjunEmpty({
 }
 function KjunSpinner({ size = "md", text }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = useRef6(new Animated5.Value(0)).current;
-  useEffect5(() => {
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = useRef8(new Animated5.Value(0)).current;
+  useEffect6(() => {
     if (reduced) return;
     const loop = Animated5.loop(
       Animated5.timing(rotation, {
         toValue: 1,
-        duration: tokens11.motion.spin,
+        duration: tokens12.motion.spin,
         easing: Easing3.linear,
         useNativeDriver: Platform12.OS !== "web"
       })
@@ -2486,8 +2542,8 @@ function KjunSpinner({ size = "md", text }) {
       rotation.setValue(0);
     };
   }, [reduced, rotation]);
-  const dimension = tokens11.extensions.spinner.sizes[size];
-  const stroke = tokens11.extensions.spinner.strokeWidths[size] * 24 / dimension;
+  const dimension = tokens12.extensions.spinner.sizes[size];
+  const stroke = tokens12.extensions.spinner.strokeWidths[size] * 24 / dimension;
   return /* @__PURE__ */ jsxs7(
     View10,
     {
@@ -2541,7 +2597,7 @@ function KjunSpinner({ size = "md", text }) {
             )
           }
         ),
-        !!text && /* @__PURE__ */ jsx15(KText, { style: { marginLeft: tokens11.dimension.value8, color: colors.textSecondary }, children: text })
+        !!text && /* @__PURE__ */ jsx15(KText, { style: { marginLeft: tokens12.dimension.value8, color: colors.textSecondary }, children: text })
       ]
     }
   );
@@ -2562,8 +2618,8 @@ function KjunAlert({
   const [visible, setVisible] = useState10(true);
   if (!visible) return null;
   const tone = variant || (type === "error" ? "danger" : type), small = size === "sm";
-  const geometry2 = tokens11.extensions.alert;
-  const lineHeight = tokens11.typography[small ? "controlSmall" : "control"].lineHeightPx;
+  const geometry2 = tokens12.extensions.alert;
+  const lineHeight = tokens12.typography[small ? "controlSmall" : "control"].lineHeightPx;
   const titled = hasContent(title);
   const closeSize = small ? geometry2.sm.closeSize : geometry2.closeSize;
   const pick = (suffix) => tone === "primary" ? suffix === "Bg" ? colors.brandSubtleBg : suffix === "Light" ? colors.brandLight : colors.brand : colors[tone + suffix];
@@ -2574,11 +2630,11 @@ function KjunAlert({
       style: {
         flexDirection: "row",
         alignItems: "flex-start",
-        gap: tokens11.extensions.alert[small ? "sm" : "md"].gap,
-        borderWidth: tokens11.border.defaultWidth,
-        borderRadius: tokens11.extensions.alert.radius,
-        paddingVertical: tokens11.extensions.alert[small ? "sm" : "md"].paddingY,
-        paddingHorizontal: tokens11.extensions.alert[small ? "sm" : "md"].paddingX,
+        gap: tokens12.extensions.alert[small ? "sm" : "md"].gap,
+        borderWidth: tokens12.border.defaultWidth,
+        borderRadius: tokens12.extensions.alert.radius,
+        paddingVertical: tokens12.extensions.alert[small ? "sm" : "md"].paddingY,
+        paddingHorizontal: tokens12.extensions.alert[small ? "sm" : "md"].paddingX,
         backgroundColor: pick("Bg"),
         borderColor: pick("Light")
       },
@@ -2593,7 +2649,7 @@ function KjunAlert({
               warning: "alert-triangle",
               danger: "alert-circle"
             }[tone],
-            size: tokens11.extensions.alert.iconSizes[small ? "sm" : "md"],
+            size: tokens12.extensions.alert.iconSizes[small ? "sm" : "md"],
             color: pick("Accent")
           }
         ) }),
@@ -2610,7 +2666,7 @@ function KjunAlert({
           {
             accessibilityRole: "button",
             accessibilityLabel: m.close,
-            hitSlop: Math.max(0, (tokens11.native.minimumTouchTarget - closeSize) / 2),
+            hitSlop: Math.max(0, (tokens12.native.minimumTouchTarget - closeSize) / 2),
             style: ({ pressed, hovered }) => ({
               width: closeSize,
               height: closeSize,
@@ -2648,11 +2704,58 @@ function KjunProgress({
   variant = "primary",
   showLabel = false,
   label,
-  subLabel
+  subLabel,
+  shape = "bar"
 }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles();
+  const { colors, numericFontFamily, fontFamily } = useKjunStyles();
   const percentage = Number.isFinite(value) && max > 0 ? Math.min(100, Math.max(0, Math.round(value / max * 100))) : 0;
+  const name = typeof label === "string" ? label : m.progress, color = variant === "primary" ? colors.brand : colors[variant];
+  const semantics = {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: name,
+    accessibilityValue: { min: 0, max: 100, now: percentage },
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": percentage
+  };
+  if (shape === "circle") {
+    const c = progressCircle(size, percentage);
+    return /* @__PURE__ */ jsxs7(View10, { style: { alignSelf: "flex-start", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs7(View10, { ...semantics, style: { width: c.diameter, height: c.diameter, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsxs7(Svg3, { width: c.diameter, height: c.diameter, viewBox: `0 0 ${c.diameter} ${c.diameter}`, style: StyleSheet4.absoluteFill, children: [
+          /* @__PURE__ */ jsx15(Circle2, { cx: c.centre, cy: c.centre, r: c.radius, stroke: colors.secondary, strokeWidth: c.stroke, fill: "none" }),
+          percentage > 0 && /* @__PURE__ */ jsx15(
+            Circle2,
+            {
+              cx: c.centre,
+              cy: c.centre,
+              r: c.radius,
+              stroke: color,
+              strokeWidth: c.stroke,
+              fill: "none",
+              strokeLinecap: "round",
+              strokeDasharray: c.circumference,
+              strokeDashoffset: c.offset,
+              rotation: -90,
+              origin: `${c.centre}, ${c.centre}`
+            }
+          )
+        ] }),
+        showLabel && c.showsPercentage && /* @__PURE__ */ jsxs7(KText, { style: {
+          ...typeStyle(size === "lg" ? "numberMd" : "meta"),
+          fontFamily: numericFontFamily || fontFamily,
+          fontVariant: ["tabular-nums"],
+          color: colors.text
+        }, children: [
+          percentage,
+          "%"
+        ] })
+      ] }),
+      content(label, { ...typeStyle("caption"), marginTop: tokens12.dimension.value8, color: colors.textSecondary, textAlign: "center" }),
+      content(subLabel, { ...typeStyle("caption"), marginTop: tokens12.dimension.value4, color: colors.textTertiary, textAlign: "center" })
+    ] });
+  }
   return /* @__PURE__ */ jsxs7(View10, { children: [
     !!(label || showLabel) && /* @__PURE__ */ jsxs7(
       View10,
@@ -2660,7 +2763,7 @@ function KjunProgress({
         style: {
           flexDirection: "row",
           justifyContent: "space-between",
-          marginBottom: tokens11.dimension.value8
+          marginBottom: tokens12.dimension.value8
         },
         children: [
           content(label, {
@@ -2686,13 +2789,11 @@ function KjunProgress({
     /* @__PURE__ */ jsx15(
       View10,
       {
-        accessibilityRole: "progressbar",
-        accessibilityLabel: typeof label === "string" ? label : m.progress,
-        accessibilityValue: { min: 0, max: 100, now: percentage },
+        ...semantics,
         style: {
-          height: tokens11.extensions.progress.heights[size],
+          height: tokens12.extensions.progress.heights[size],
           backgroundColor: colors.secondary,
-          borderRadius: tokens11.radius.radius9999,
+          borderRadius: tokens12.radius.radius9999,
           overflow: "hidden"
         },
         children: /* @__PURE__ */ jsx15(
@@ -2701,8 +2802,8 @@ function KjunProgress({
             style: {
               width: `${percentage}%`,
               height: "100%",
-              borderRadius: tokens11.radius.radius9999,
-              backgroundColor: variant === "primary" ? colors.brand : colors[variant]
+              borderRadius: tokens12.radius.radius9999,
+              backgroundColor: color
             }
           }
         )
@@ -2710,15 +2811,15 @@ function KjunProgress({
     ),
     content(subLabel, {
       ...typeStyle("caption"),
-      marginTop: tokens11.dimension.value4,
+      marginTop: tokens12.dimension.value4,
       color: colors.textTertiary
     })
   ] });
 }
 
 // packages/native/src/skeleton-base.tsx
-import { tokens as tokens12 } from "@kjun-ui/tokens";
-import { useEffect as useEffect6, useRef as useRef7 } from "react";
+import { tokens as tokens13 } from "@kjun-ui/tokens";
+import { useEffect as useEffect7, useRef as useRef9 } from "react";
 import {
   Animated as Animated6,
   View as View11
@@ -2733,19 +2834,19 @@ function KjunSkeleton({
   animated = true,
   rounded = true
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef7(new Animated6.Value(1)).current;
-  useEffect6(() => {
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef9(new Animated6.Value(1)).current;
+  useEffect7(() => {
     if (!animated || reduced) return;
     const loop = Animated6.loop(
       Animated6.sequence([
         Animated6.timing(opacity, {
           toValue: 0.6,
-          duration: tokens12.motion.shimmer / 2,
+          duration: tokens13.motion.shimmer / 2,
           useNativeDriver: false
         }),
         Animated6.timing(opacity, {
           toValue: 1,
-          duration: tokens12.motion.shimmer / 2,
+          duration: tokens13.motion.shimmer / 2,
           useNativeDriver: false
         })
       ])
@@ -2764,18 +2865,18 @@ function KjunSkeleton({
         width: w,
         height: h,
         backgroundColor: shimmer,
-        borderRadius: tokens12.extensions.skeleton.lineRadius,
+        borderRadius: tokens13.extensions.skeleton.lineRadius,
         ...extra
       }
     }
   );
   const count = (n) => Array.from({ length: Math.max(0, Math.floor(n)) }, (_, i) => i + 1);
-  const line = (w, key, h = tokens12.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ jsx16(View11, { style: { marginBottom: key === rows ? 0 : tokens12.extensions.skeleton.gap }, children: block(w, h) }, key);
+  const line = (w, key, h = tokens13.extensions.skeleton.lineHeights.md) => /* @__PURE__ */ jsx16(View11, { style: { marginBottom: key === rows ? 0 : tokens13.extensions.skeleton.gap }, children: block(w, h) }, key);
   const frame = {
-    padding: tokens12.extensions.skeleton.padding,
-    borderWidth: tokens12.border.defaultWidth,
+    padding: tokens13.extensions.skeleton.padding,
+    borderWidth: tokens13.border.defaultWidth,
     borderColor: colors.border,
-    borderRadius: tokens12.extensions.skeleton.radius,
+    borderRadius: tokens13.extensions.skeleton.radius,
     backgroundColor: colors.background
   };
   return /* @__PURE__ */ jsxs8(
@@ -2791,7 +2892,7 @@ function KjunSkeleton({
             i
           )
         ),
-        type === "avatar" && block(width || tokens12.extensions.skeleton.avatarSize, height || tokens12.extensions.skeleton.avatarSize, { borderRadius: rounded ? tokens12.radius.radius9999 : tokens12.extensions.skeleton.blockRadius }),
+        type === "avatar" && block(width || tokens13.extensions.skeleton.avatarSize, height || tokens13.extensions.skeleton.avatarSize, { borderRadius: rounded ? tokens13.radius.radius9999 : tokens13.extensions.skeleton.blockRadius }),
         type === "card" && /* @__PURE__ */ jsxs8(View11, { style: frame, children: [
           /* @__PURE__ */ jsxs8(
             View11,
@@ -2799,19 +2900,19 @@ function KjunSkeleton({
               style: {
                 flexDirection: "row",
                 alignItems: "center",
-                gap: tokens12.extensions.skeleton.gap,
-                marginBottom: tokens12.dimension.value16
+                gap: tokens13.extensions.skeleton.gap,
+                marginBottom: tokens13.dimension.value16
               },
               children: [
-                block(tokens12.extensions.skeleton.cardAvatarSize, tokens12.extensions.skeleton.cardAvatarSize, { borderRadius: tokens12.radius.radius9999 }),
-                /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens12.dimension.value8 }, children: [
+                block(tokens13.extensions.skeleton.cardAvatarSize, tokens13.extensions.skeleton.cardAvatarSize, { borderRadius: tokens13.radius.radius9999 }),
+                /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens13.dimension.value8 }, children: [
                   block("60%"),
-                  block("40%", tokens12.extensions.skeleton.lineHeights.sm)
+                  block("40%", tokens13.extensions.skeleton.lineHeights.sm)
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs8(View11, { style: { gap: tokens12.dimension.value10 }, children: [
+          /* @__PURE__ */ jsxs8(View11, { style: { gap: tokens13.dimension.value10 }, children: [
             block("100%"),
             block("80%"),
             block("60%")
@@ -2821,9 +2922,9 @@ function KjunSkeleton({
           View11,
           {
             style: {
-              borderWidth: tokens12.border.defaultWidth,
+              borderWidth: tokens13.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: tokens12.extensions.skeleton.blockRadius,
+              borderRadius: tokens13.extensions.skeleton.blockRadius,
               overflow: "hidden"
             },
             children: [0, ...count(rows)].map((row) => /* @__PURE__ */ jsx16(
@@ -2832,7 +2933,7 @@ function KjunSkeleton({
                 style: {
                   flexDirection: "row",
                   backgroundColor: row === 0 ? colors.secondary : void 0,
-                  borderBottomWidth: row === rows ? 0 : tokens12.border.defaultWidth,
+                  borderBottomWidth: row === rows ? 0 : tokens13.border.defaultWidth,
                   borderBottomColor: colors.border
                 },
                 children: count(columns).map((col) => /* @__PURE__ */ jsx16(
@@ -2840,8 +2941,8 @@ function KjunSkeleton({
                   {
                     style: {
                       flex: 1,
-                      paddingVertical: tokens12.dimension.value12,
-                      paddingHorizontal: tokens12.dimension.value16
+                      paddingVertical: tokens13.dimension.value12,
+                      paddingHorizontal: tokens13.dimension.value16
                     },
                     children: block(
                       row === 0 ? "70%" : [
@@ -2851,7 +2952,7 @@ function KjunSkeleton({
                         "75%",
                         "85%"
                       ][(row + col) % 5],
-                      tokens12.extensions.skeleton.tableLineHeight
+                      tokens13.extensions.skeleton.tableLineHeight
                     )
                   },
                   col
@@ -2873,16 +2974,16 @@ function KjunSkeleton({
               }
             ],
             children: [
-              /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens12.dimension.value8 }, children: [
-                block("40%", tokens12.extensions.skeleton.lineHeights.sm),
-                block("60%", tokens12.extensions.skeleton.lineHeights.lg),
-                block("30%", tokens12.extensions.skeleton.lineHeights.sm)
+              /* @__PURE__ */ jsxs8(View11, { style: { flex: 1, gap: tokens13.dimension.value8 }, children: [
+                block("40%", tokens13.extensions.skeleton.lineHeights.sm),
+                block("60%", tokens13.extensions.skeleton.lineHeights.lg),
+                block("30%", tokens13.extensions.skeleton.lineHeights.sm)
               ] }),
-              block(tokens12.extensions.skeleton.statWidth, tokens12.extensions.skeleton.statHeight)
+              block(tokens13.extensions.skeleton.statWidth, tokens13.extensions.skeleton.statHeight)
             ]
           }
         ),
-        type === "block" && block(width || "100%", height != null ? height : tokens12.extensions.skeleton.blockHeight, { borderRadius: tokens12.extensions.skeleton.blockRadius })
+        type === "block" && block(width || "100%", height != null ? height : tokens13.extensions.skeleton.blockHeight, { borderRadius: tokens13.extensions.skeleton.blockRadius })
       ]
     }
   );
@@ -2891,7 +2992,7 @@ function KjunSkeleton({
 // packages/native/src/layout-primitives.tsx
 import { Children as Children2, Fragment as Fragment5, cloneElement as cloneElement2, isValidElement as isValidElement3 } from "react";
 import { View as View12 } from "react-native";
-import { tokens as tokens13 } from "@kjun-ui/tokens";
+import { tokens as tokens14 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/layout-primitives.ts
 var titleVariants = ["pageTitle", "sectionTitle", "cardTitle"];
@@ -2900,15 +3001,27 @@ var isNumericVariant = (variant) => numeric.test(variant);
 
 // packages/native/src/layout-primitives.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-var toneRole = { default: "text", secondary: "textSecondary", tertiary: "textTertiary", disabled: "textDisabled" };
+var toneRole = {
+  default: "text",
+  secondary: "textSecondary",
+  tertiary: "textTertiary",
+  disabled: "textDisabled",
+  brand: "brand",
+  danger: "danger",
+  success: "success",
+  warning: "warning",
+  inverse: "onBrand"
+};
 var textAlign = { start: "left", center: "center", end: "right" };
-function KjunText({ variant = "body", tone = "default", align, maxLines, style, children }) {
+function KjunText({ variant = "body", tone = "default", align, maxLines, style, children, ...rest }) {
+  var _a;
   const { colors, fontFamily, numericFontFamily } = useKjunStyles();
   const lines = maxLines && maxLines > 0 ? Math.floor(maxLines) : void 0;
   return /* @__PURE__ */ jsx17(
     KText,
     {
-      accessibilityRole: titleVariants.includes(variant) ? "header" : void 0,
+      ...rest,
+      accessibilityRole: (_a = rest.accessibilityRole) != null ? _a : titleVariants.includes(variant) ? "header" : void 0,
       numberOfLines: lines,
       ellipsizeMode: lines ? "tail" : void 0,
       style: [
@@ -2928,56 +3041,61 @@ function flatten(children, path = "") {
     return isValidElement3(child) && child.type === Fragment5 ? flatten(child.props.children, `${key}.`) : [[key, child]];
   });
 }
-function items(children) {
+function items(children, childAlign) {
   return flatten(children).map(([key, child]) => {
     if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ jsx17(KText, { children: child }, key);
     if (isValidElement3(child) && child.type === KjunFormGroup) {
       const group = child;
       return cloneElement2(group, { key, style: [{ marginBottom: 0 }, group.props.style] });
     }
+    if (childAlign && isValidElement3(child) && (child.type === KjunButton || child.type === KjunBadge)) {
+      const control = child;
+      return cloneElement2(control, { key, style: [{ alignSelf: childAlign }, control.props.style] });
+    }
     return isValidElement3(child) ? cloneElement2(child, { key }) : child;
   });
 }
+var followed = (align) => align && align !== "stretch" ? crossAxis[align] : void 0;
 var stackGap = {
   none: 0,
-  sm: tokens13.space.stack.sm,
-  md: tokens13.space.stack.md,
-  lg: tokens13.space.stack.lg,
-  "section-sm": tokens13.space.section.sm,
-  "section-md": tokens13.space.section.md,
-  "section-lg": tokens13.space.section.lg
+  sm: tokens14.space.stack.sm,
+  md: tokens14.space.stack.md,
+  lg: tokens14.space.stack.lg,
+  "section-sm": tokens14.space.section.sm,
+  "section-md": tokens14.space.section.md,
+  "section-lg": tokens14.space.section.lg
 };
 var inlineGap = {
   none: 0,
-  xs: tokens13.space.inline.xs,
-  sm: tokens13.space.inline.sm,
-  md: tokens13.space.inline.md,
-  lg: tokens13.space.inline.lg
+  xs: tokens14.space.inline.xs,
+  sm: tokens14.space.inline.sm,
+  md: tokens14.space.inline.md,
+  lg: tokens14.space.inline.lg
 };
 var crossAxis = { stretch: "stretch", start: "flex-start", center: "center", end: "flex-end", baseline: "baseline" };
 var mainAxis = { start: "flex-start", center: "center", end: "flex-end", between: "space-between" };
-function KjunStack({ gap = "md", align = "stretch", style, children }) {
-  return /* @__PURE__ */ jsx17(View12, { style: [{ flexDirection: "column", alignItems: crossAxis[align], gap: stackGap[gap], minWidth: 0 }, style], children: items(children) });
+function KjunStack({ gap = "md", align, style, children }) {
+  return /* @__PURE__ */ jsx17(View12, { style: [{ flexDirection: "column", alignItems: crossAxis[align != null ? align : "stretch"], gap: stackGap[gap], minWidth: 0 }, style], children: items(children, followed(align)) });
 }
-function KjunInline({ gap = "sm", align = "center", justify = "start", wrap = true, style, children }) {
+function KjunInline({ gap = "sm", align, justify = "start", wrap = true, style, children }) {
   return /* @__PURE__ */ jsx17(View12, { style: [{
     flexDirection: "row",
     flexWrap: wrap ? "wrap" : "nowrap",
-    alignItems: crossAxis[align],
+    alignItems: crossAxis[align != null ? align : "center"],
     justifyContent: mainAxis[justify],
     gap: inlineGap[gap],
     minWidth: 0
-  }, style], children: items(children) });
+  }, style], children: items(children, followed(align)) });
 }
 
 // shared/package-runtime/feedback-dialog.ts
-import { useRef as useRef8, useState as useState11 } from "react";
+import { useRef as useRef10, useState as useState11 } from "react";
 function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
   const options = request.options;
   const [value, setValue] = useState11(options.initialValue || "");
   const [error, setError] = useState11("");
   const [busy, setBusy] = useState11(false);
-  const working = useRef8(false);
+  const working = useRef10(false);
   const active = () => {
     var _a;
     return ((_a = controller.getSnapshot().current) == null ? void 0 : _a.id) === request.id;
@@ -3019,11 +3137,11 @@ function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
 }
 
 // shared/package-runtime/feedback-motion.ts
-import { tokens as tokens14 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef9, useState as useState12 } from "react";
+import { tokens as tokens15 } from "@kjun-ui/tokens";
+import { useLayoutEffect as useLayoutEffect6, useRef as useRef11, useState as useState12 } from "react";
 function usePresentedToasts(toasts, reduced) {
   const [items2, setItems] = useState12([]);
-  const removals = useRef9(/* @__PURE__ */ new Map());
+  const removals = useRef11(/* @__PURE__ */ new Map());
   useLayoutEffect6(() => {
     const ids = new Set(toasts.map((toast) => toast.id));
     setItems((previous) => {
@@ -3037,7 +3155,7 @@ function usePresentedToasts(toasts, reduced) {
         if (!removals.current.has(item.toast.id)) removals.current.set(item.toast.id, setTimeout(() => {
           removals.current.delete(item.toast.id);
           setItems((current) => current.filter((value) => value.toast.id !== item.toast.id));
-        }, tokens14.motion.toastExit));
+        }, tokens15.motion.toastExit));
       }
       return next;
     });
@@ -3059,7 +3177,7 @@ function usePresentedRequest(current, reduced) {
       setRequest(current);
       return;
     }
-    const timer = setTimeout(() => setRequest(current), tokens14.motion.layerExit);
+    const timer = setTimeout(() => setRequest(current), tokens15.motion.layerExit);
     return () => clearTimeout(timer);
   }, [current, request, reduced]);
   return { request, open: !!request && (current == null ? void 0 : current.id) === request.id };
@@ -3073,9 +3191,9 @@ function useOptionalKjunFeedback() {
 }
 
 // packages/native/src/toast-stack.tsx
-import { useLayoutEffect as useLayoutEffect8, useRef as useRef12 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef14 } from "react";
 import { Animated as Animated8, Platform as Platform13, View as View14 } from "react-native";
-import { tokens as tokens17 } from "@kjun-ui/tokens";
+import { tokens as tokens18 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/elevation.ts
 function directionalShadow(layers, direction) {
@@ -3090,8 +3208,8 @@ function shadowLayers(layers, colors) {
 }
 
 // packages/native/src/toast.tsx
-import { tokens as tokens15 } from "@kjun-ui/tokens";
-import { useEffect as useEffect7, useRef as useRef10 } from "react";
+import { tokens as tokens16 } from "@kjun-ui/tokens";
+import { useEffect as useEffect8, useRef as useRef12 } from "react";
 import { Animated as Animated7, View as View13 } from "react-native";
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function ToastView({
@@ -3099,14 +3217,14 @@ function ToastView({
   controller
 }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), progress = useRef10(new Animated7.Value(1)).current;
-  const reasons = useRef10({
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), progress = useRef12(new Animated7.Value(1)).current;
+  const reasons = useRef12({
     hover: /* @__PURE__ */ Symbol("hover"),
     actionHover: /* @__PURE__ */ Symbol("actionHover"),
     closeHover: /* @__PURE__ */ Symbol("closeHover"),
     focus: /* @__PURE__ */ Symbol("focus")
   }).current;
-  useEffect7(() => () => {
+  useEffect8(() => () => {
     for (const reason of Object.values(reasons)) controller.resumeToast(toast.id, reason);
   }, [controller, toast.id, reasons]);
   const tone = toast.type === "error" ? "danger" : toast.type || "info", icon = {
@@ -3115,7 +3233,7 @@ function ToastView({
     warning: "alert-triangle",
     info: "info-circle"
   }[tone];
-  useEffect7(() => {
+  useEffect8(() => {
     progress.stopAnimation();
     progress.setValue(toast.duration ? toast.remaining / toast.duration : 1);
     if (!toast.paused && !reduced) {
@@ -3134,7 +3252,7 @@ function ToastView({
       accessible: false,
       onHoverIn: () => controller.pauseToast(toast.id, reasons.hover),
       onHoverOut: () => controller.resumeToast(toast.id, reasons.hover),
-      style: { width: "100%", maxWidth: tokens15.extensions.toast.maxWidth, alignSelf: "flex-end" },
+      style: { width: "100%", maxWidth: tokens16.extensions.toast.maxWidth, alignSelf: "flex-end" },
       children: /* @__PURE__ */ jsxs9(
         View13,
         {
@@ -3143,19 +3261,19 @@ function ToastView({
           style: {
             flexDirection: "row",
             alignItems: toast.title ? "flex-start" : "center",
-            gap: tokens15.extensions.toast.gap,
-            padding: tokens15.extensions.toast.padding,
-            borderRadius: tokens15.extensions.toast.radius,
+            gap: tokens16.extensions.toast.gap,
+            padding: tokens16.extensions.toast.padding,
+            borderRadius: tokens16.extensions.toast.radius,
             backgroundColor: colors.surface,
-            boxShadow: shadowLayers(tokens15.extensions.toast.elevation, colors),
-            borderWidth: tokens15.border.defaultWidth,
+            boxShadow: shadowLayers(tokens16.extensions.toast.elevation, colors),
+            borderWidth: tokens16.border.defaultWidth,
             borderColor: colors.border,
             overflow: "hidden"
           },
           children: [
             /* @__PURE__ */ jsx18(KjunIcon, { name: icon, color: colors[`${tone}Accent`] }),
             /* @__PURE__ */ jsxs9(View13, { style: { flex: 1, minWidth: 0 }, children: [
-              !!toast.title && /* @__PURE__ */ jsx18(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens15.extensions.toast.titleGap }, children: toast.title }),
+              !!toast.title && /* @__PURE__ */ jsx18(KText, { style: { fontWeight: typeStyle("control").fontWeight, marginBottom: tokens16.extensions.toast.titleGap }, children: toast.title }),
               /* @__PURE__ */ jsx18(KText, { style: { color: colors.textSecondary }, children: toast.message }),
               toast.action && /* @__PURE__ */ jsx18(
                 AccessiblePressable,
@@ -3173,7 +3291,7 @@ function ToastView({
                       dismiss();
                     }
                   },
-                  style: { minHeight: tokens15.native.minimumTouchTarget, justifyContent: "center", marginTop: tokens15.extensions.toast.actionGap },
+                  style: { minHeight: tokens16.native.minimumTouchTarget, justifyContent: "center", marginTop: tokens16.extensions.toast.actionGap },
                   children: /* @__PURE__ */ jsx18(
                     KText,
                     {
@@ -3195,11 +3313,11 @@ function ToastView({
                 onBlur: () => controller.resumeToast(toast.id, reasons.focus),
                 onPress: dismiss,
                 style: {
-                  minWidth: Math.max(tokens15.extensions.toast.closeSize, tokens15.native.minimumTouchTarget),
-                  minHeight: Math.max(tokens15.extensions.toast.closeSize, tokens15.native.minimumTouchTarget),
+                  minWidth: Math.max(tokens16.extensions.toast.closeSize, tokens16.native.minimumTouchTarget),
+                  minHeight: Math.max(tokens16.extensions.toast.closeSize, tokens16.native.minimumTouchTarget),
                   alignItems: "center",
                   justifyContent: "center",
-                  borderRadius: tokens15.extensions.toast.closeRadius
+                  borderRadius: tokens16.extensions.toast.closeRadius
                 },
                 children: /* @__PURE__ */ jsx18(KjunIcon, { name: "x", color: colors.textTertiary })
               }
@@ -3212,7 +3330,7 @@ function ToastView({
                   position: "absolute",
                   bottom: 0,
                   left: 0,
-                  height: tokens15.extensions.toast.progressHeight,
+                  height: tokens16.extensions.toast.progressHeight,
                   width: progress.interpolate({
                     inputRange: [0, 1],
                     outputRange: ["0%", "100%"]
@@ -3229,10 +3347,10 @@ function ToastView({
 }
 
 // packages/native/src/toast-reflow.web.ts
-import { useLayoutEffect as useLayoutEffect7, useRef as useRef11 } from "react";
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef13 } from "react";
 
 // shared/package-runtime/toast-layout.ts
-import { tokens as tokens16 } from "@kjun-ui/tokens";
+import { tokens as tokens17 } from "@kjun-ui/tokens";
 function createToastLayout() {
   let root = null;
   const boxes = /* @__PURE__ */ new Map();
@@ -3275,7 +3393,7 @@ function createToastLayout() {
         const top = node.offsetTop, left = node.offsetLeft;
         (_a = animations.get(node)) == null ? void 0 : _a.cancel();
         if (old && !reduced && Math.abs(old.top + offset - top) > 0.5) {
-          const animation = node.animate([{ transform: `translateY(${old.top + offset - top}px)` }, { transform: "translateY(0)" }], { duration: tokens16.motion.toastMove, easing: tokens16.motion.easeOut });
+          const animation = node.animate([{ transform: `translateY(${old.top + offset - top}px)` }, { transform: "translateY(0)" }], { duration: tokens17.motion.toastMove, easing: tokens17.motion.easeOut });
           animations.set(node, animation);
         }
         boxes.set(id, { top, left, width: node.offsetWidth, height: node.offsetHeight });
@@ -3292,7 +3410,7 @@ function createToastLayout() {
 
 // packages/native/src/toast-reflow.web.ts
 function useToastReflow(root, reduced) {
-  const layout = useRef11(createToastLayout()).current;
+  const layout = useRef13(createToastLayout()).current;
   useLayoutEffect7(() => {
     if (root.current) layout.update(root.current, reduced);
   });
@@ -3302,9 +3420,9 @@ function useToastReflow(root, reduced) {
 // packages/native/src/toast-stack.tsx
 import { jsx as jsx19 } from "react/jsx-runtime";
 function ToastSlot({ item, controller, boxes }) {
-  const born = useRef12(Math.min(tokens17.motion.toastEnter, Date.now() - item.born)).current;
-  const motion = useNativePresence(!item.exiting, tokens17.motion.toastEnter - born, tokens17.motion.toastExit, true, born / tokens17.motion.toastEnter);
-  const offset = useRef12(new Animated8.Value(0)).current;
+  const born = useRef14(Math.min(tokens18.motion.toastEnter, Date.now() - item.born)).current;
+  const motion = useNativePresence(!item.exiting, tokens18.motion.toastEnter - born, tokens18.motion.toastExit, true, born / tokens18.motion.toastEnter);
+  const offset = useRef14(new Animated8.Value(0)).current;
   const box = boxes.get(item.toast.id);
   useLayoutEffect8(() => {
     if (motion.reduced) {
@@ -3324,7 +3442,7 @@ function ToastSlot({ item, controller, boxes }) {
         boxes.set(item.toast.id, next);
         if (old && old.y !== next.y && !motion.reduced) offset.stopAnimation((current) => {
           offset.setValue(current + old.y - next.y);
-          Animated8.timing(offset, { toValue: 0, duration: tokens17.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
+          Animated8.timing(offset, { toValue: 0, duration: tokens18.motion.toastMove, easing: motionOut, useNativeDriver: nativeDriver }).start();
         });
       },
       style: { transform: [{ translateY: offset }], ...item.exiting && box ? {
@@ -3341,7 +3459,7 @@ function ToastSlot({ item, controller, boxes }) {
           accessibilityElementsHidden: item.exiting,
           importantForAccessibility: item.exiting ? "no-hide-descendants" : "auto",
           ...item.exiting ? { inert: true } : {},
-          style: { opacity: motion.opacity, transform: [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [-tokens17.motionDistance.toast, 0] }) }] },
+          style: { opacity: motion.opacity, transform: [{ translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [-tokens18.motionDistance.toast, 0] }) }] },
           children: /* @__PURE__ */ jsx19(ToastView, { toast: item.toast, controller })
         }
       )
@@ -3351,16 +3469,16 @@ function ToastSlot({ item, controller, boxes }) {
 function ToastStack({ items: items2, controller }) {
   var _a;
   const layers = useLayerState();
-  const root = useRef12(null), reduced = useReducedMotion();
+  const root = useRef14(null), reduced = useReducedMotion();
   useToastReflow(root, reduced);
-  const boxes = useRef12(/* @__PURE__ */ new Map()).current;
+  const boxes = useRef14(/* @__PURE__ */ new Map()).current;
   for (const id of boxes.keys()) if (!items2.some((item) => item.toast.id === id)) boxes.delete(id);
   return /* @__PURE__ */ jsx19(View14, { ref: root, pointerEvents: "box-none", style: {
     position: "absolute",
-    top: tokens17.extensions.toast.inset,
-    right: tokens17.extensions.toast.inset,
-    left: tokens17.extensions.toast.inset,
-    gap: tokens17.extensions.toast.stackGap,
+    top: tokens18.extensions.toast.inset,
+    right: tokens18.extensions.toast.inset,
+    left: tokens18.extensions.toast.inset,
+    gap: tokens18.extensions.toast.stackGap,
     minHeight: items2.some((item) => item.exiting) ? Math.max(0, ...[...boxes.values()].map((box) => box.y + box.height)) : void 0,
     zIndex: layers.zIndex((_a = layers.topWindow()) == null ? void 0 : _a.id, "toast")
   }, children: items2.map((item) => /* @__PURE__ */ jsx19(ToastSlot, { item, controller, boxes }, item.toast.id)) });
@@ -3368,17 +3486,19 @@ function ToastStack({ items: items2, controller }) {
 
 // packages/native/src/feedback.tsx
 import {
-  tokens as tokens18,
-  createFeedbackController
+  tokens as tokens19,
+  createFeedbackController,
+  feedbackControllerOf
 } from "@kjun-ui/tokens";
 import {
-  useCallback as useCallback3,
-  useEffect as useEffect8,
-  useRef as useRef13,
+  useCallback as useCallback4,
+  useEffect as useEffect9,
+  useRef as useRef15,
   useState as useState13,
   useSyncExternalStore as useSyncExternalStore2
 } from "react";
 import { View as View15 } from "react-native";
+import { createKjunFeedback } from "@kjun-ui/tokens";
 import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function useKjunFeedback() {
   const value = useOptionalKjunFeedback();
@@ -3410,7 +3530,7 @@ function FeedbackDialog({
       onConfirm: submit,
       confirmVariant: options.type === "danger" ? "danger" : "primary",
       children: [
-        !!options.message && /* @__PURE__ */ jsx20(KText, { style: { marginBottom: tokens18.dimension.value16 }, children: options.message }),
+        !!options.message && /* @__PURE__ */ jsx20(KText, { style: { marginBottom: tokens19.dimension.value16 }, children: options.message }),
         request.kind === "prompt" && /* @__PURE__ */ jsx20(
           KjunInput,
           {
@@ -3427,9 +3547,11 @@ function FeedbackDialog({
     }
   );
 }
-function KjunFeedbackProvider({ children, style }) {
-  const [controller] = useState13(createFeedbackController);
-  const life = useRef13(0);
+function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
+  const [owned] = useState13(() => controllerProp ? void 0 : createFeedbackController());
+  const controller = controllerProp ? feedbackControllerOf(controllerProp) : owned;
+  useEffect9(() => controller.attach(), [controller]);
+  const life = useRef15(0);
   const snapshot = useSyncExternalStore2(
     controller.subscribe,
     controller.getSnapshot,
@@ -3438,16 +3560,16 @@ function KjunFeedbackProvider({ children, style }) {
   const reduced = useReducedMotion();
   const toasts = usePresentedToasts(snapshot.toasts, reduced);
   const dialog = usePresentedRequest(snapshot.current, reduced);
-  useEffect8(() => {
+  useEffect9(() => {
     const version = ++life.current;
     return () => {
       queueMicrotask(() => {
-        if (life.current === version) controller.dispose();
+        if (life.current === version && !controllerProp) controller.dispose();
       });
     };
   }, [controller]);
   const [layers, setLayers] = useState13([]);
-  const register = useCallback3((id) => {
+  const register = useCallback4((id) => {
     setLayers((previous) => [...previous, id]);
     return () => setLayers((previous) => previous.filter((item) => item !== id));
   }, []);
@@ -3477,13 +3599,13 @@ function KjunFeedbackProvider({ children, style }) {
 
 // packages/native/src/choice-controls.tsx
 import { Animated as Animated9 } from "react-native";
-import { tokens as tokens19 } from "@kjun-ui/tokens";
+import { tokens as tokens20 } from "@kjun-ui/tokens";
 import {
   createContext as createContext16,
   useContext as useContext12,
   useState as useState14,
-  useEffect as useEffect9,
-  useRef as useRef14
+  useEffect as useEffect10,
+  useRef as useRef16
 } from "react";
 import {
   View as View16
@@ -3500,7 +3622,7 @@ function KjunCheckbox({
   onValueChange,
   onChange
 }) {
-  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = tokens19.extensions.checkbox.sizes[size];
+  const { colors } = useKjunStyles(), checked = Array.isArray(value) ? value.includes(val) : value, dimension = tokens20.extensions.checkbox.sizes[size];
   return /* @__PURE__ */ jsxs11(
     AccessiblePressable,
     {
@@ -3519,8 +3641,8 @@ function KjunCheckbox({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
-        opacity: disabled ? tokens19.states.opacity.disabled : pressed ? tokens19.states.opacity.pressed : 1
+        minHeight: finePointer() ? tokens20.extensions.choice.minimumHeight : tokens20.native.minimumTouchTarget,
+        opacity: disabled ? tokens20.states.opacity.disabled : pressed ? tokens20.states.opacity.pressed : 1
       }),
       children: [
         /* @__PURE__ */ jsx21(
@@ -3531,8 +3653,8 @@ function KjunCheckbox({
               justifyContent: "center",
               width: dimension,
               height: dimension,
-              borderRadius: tokens19.extensions.checkbox.radii[size],
-              borderWidth: tokens19.border.controlWidth,
+              borderRadius: tokens20.extensions.checkbox.radii[size],
+              borderWidth: tokens20.border.controlWidth,
               // Same boundary roles as Radio: strong while enabled, secondary once disabled.
               borderColor: checked ? colors.brand : disabled ? colors.borderSecondary : colors.borderStrong,
               backgroundColor: checked ? colors.brand : colors.surface
@@ -3541,14 +3663,14 @@ function KjunCheckbox({
               KjunIcon,
               {
                 name: "check",
-                size: tokens19.extensions.checkbox.iconSizes[size],
+                size: tokens20.extensions.checkbox.iconSizes[size],
                 color: colors.onBrand
               }
             )
           }
         ),
         !!(children || label) && content(children || label, {
-          marginLeft: tokens19.extensions.checkbox.labelGap,
+          marginLeft: tokens20.extensions.checkbox.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3564,7 +3686,7 @@ function useControlFocus(disabled) {
       onFocus: (event) => setFocused(focusVisible(event.currentTarget)),
       onBlur: () => setFocused(false)
     },
-    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens19.states.focus.width, outlineOffset: tokens19.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
+    ring: focused && !disabled ? { outlineStyle: "solid", outlineWidth: tokens20.states.focus.width, outlineOffset: tokens20.states.focus.choiceOffset, outlineColor: colors.focusRing } : {}
   };
 }
 function KjunSwitch({
@@ -3579,10 +3701,10 @@ function KjunSwitch({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const width = tokens19.extensions.switch.widths[size];
-  const height = tokens19.extensions.switch.heights[size];
-  const thumb = height - 2 * tokens19.extensions.switch.padding;
-  const offScale = (thumb - 2 * tokens19.border.controlWidth) / thumb;
+  const width = tokens20.extensions.switch.widths[size];
+  const height = tokens20.extensions.switch.heights[size];
+  const thumb = height - 2 * tokens20.extensions.switch.padding;
+  const offScale = (thumb - 2 * tokens20.border.controlWidth) / thumb;
   const offset = width - height;
   const motion = useMotionValue(value ? 1 : 0);
   const focus = useControlFocus(disabled);
@@ -3611,8 +3733,8 @@ function KjunSwitch({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
-        opacity: disabled ? tokens19.states.opacity.disabled : 1
+        minHeight: finePointer() ? tokens20.extensions.choice.minimumHeight : tokens20.native.minimumTouchTarget,
+        opacity: disabled ? tokens20.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ jsxs11(
@@ -3621,8 +3743,8 @@ function KjunSwitch({
             style: {
               width,
               height,
-              padding: tokens19.extensions.switch.padding,
-              borderRadius: tokens19.extensions.switch.radius,
+              padding: tokens20.extensions.switch.padding,
+              borderRadius: tokens20.extensions.switch.radius,
               backgroundColor: trackColor,
               ...focus.ring
             },
@@ -3634,8 +3756,8 @@ function KjunSwitch({
                   style: {
                     position: "absolute",
                     inset: 0,
-                    borderRadius: tokens19.extensions.switch.radius,
-                    borderWidth: tokens19.border.controlWidth,
+                    borderRadius: tokens20.extensions.switch.radius,
+                    borderWidth: tokens20.border.controlWidth,
                     // Hover turns the boundary to brand, like Checkbox on Web.
                     borderColor: hovered && !disabled ? colors.brand : offRole,
                     opacity: motion.interpolate({ inputRange: [0, 1], outputRange: [1, 0] })
@@ -3648,7 +3770,7 @@ function KjunSwitch({
                   style: {
                     width: thumb,
                     height: thumb,
-                    borderRadius: tokens19.extensions.switch.radius,
+                    borderRadius: tokens20.extensions.switch.radius,
                     backgroundColor: thumbColor,
                     transform: [
                       { translateX: motion.interpolate({ inputRange: [0, 1], outputRange: [0, offset] }) },
@@ -3660,11 +3782,11 @@ function KjunSwitch({
             ]
           }
         ),
-        description ? /* @__PURE__ */ jsxs11(View16, { style: { marginLeft: tokens19.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
+        description ? /* @__PURE__ */ jsxs11(View16, { style: { marginLeft: tokens20.extensions.switch.labelGap, flexShrink: 1, minWidth: 0 }, children: [
           !!(children || label) && content(children || label, typeStyle("label")),
-          /* @__PURE__ */ jsx21(KText, { style: { ...typeStyle("caption"), marginTop: tokens19.dimension.value4, color: colors.textSecondary }, children: description })
+          /* @__PURE__ */ jsx21(KText, { style: { ...typeStyle("caption"), marginTop: tokens20.dimension.value4, color: colors.textSecondary }, children: description })
         ] }) : !!(children || label) && content(children || label, {
-          marginLeft: tokens19.extensions.switch.labelGap,
+          marginLeft: tokens20.extensions.switch.labelGap,
           ...typeStyle("label")
         })
       ]
@@ -3683,9 +3805,9 @@ function KjunRadio({
   onChange
 }) {
   const group = useContext12(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
-  const geometry2 = tokens19.extensions.radio;
+  const geometry2 = tokens20.extensions.radio;
   const [hovered, setHovered] = useState14(false);
-  useEffect9(() => {
+  useEffect10(() => {
     if (disabled) setHovered(false);
   }, [disabled]);
   return /* @__PURE__ */ jsx21(
@@ -3710,8 +3832,8 @@ function KjunRadio({
         flexDirection: "row",
         alignItems: "center",
         // Like Web's choice row on a mouse-like pointer; touch layouts keep the 44px target.
-        minHeight: finePointer() ? tokens19.extensions.choice.minimumHeight : tokens19.native.minimumTouchTarget,
-        opacity: disabled ? tokens19.states.opacity.disabled : 1
+        minHeight: finePointer() ? tokens20.extensions.choice.minimumHeight : tokens20.native.minimumTouchTarget,
+        opacity: disabled ? tokens20.states.opacity.disabled : 1
       },
       children: ({ pressed }) => /* @__PURE__ */ jsxs11(Fragment6, { children: [
         /* @__PURE__ */ jsx21(
@@ -3721,7 +3843,7 @@ function KjunRadio({
               width: geometry2.size,
               height: geometry2.size,
               borderWidth: geometry2.borderWidth,
-              borderRadius: tokens19.radius.radius9999,
+              borderRadius: tokens20.radius.radius9999,
               alignItems: "center",
               justifyContent: "center",
               borderColor: disabled ? selected ? colors.brand : colors.borderSecondary : pressed ? colors.brandActive : hovered ? colors.brandHover : selected ? colors.brand : colors.borderStrong,
@@ -3733,7 +3855,7 @@ function KjunRadio({
                 style: {
                   width: geometry2.dot,
                   height: geometry2.dot,
-                  borderRadius: tokens19.radius.radius9999,
+                  borderRadius: tokens20.radius.radius9999,
                   backgroundColor: colors.brand
                 }
               }
@@ -3757,7 +3879,7 @@ function KjunRadioGroup({
   onValueChange,
   onChange
 }) {
-  const root = useRef14(null);
+  const root = useRef16(null);
   useRadioKeyboard(root);
   return /* @__PURE__ */ jsx21(
     RadioContext.Provider,
@@ -3778,7 +3900,7 @@ function KjunRadioGroup({
           style: {
             flexDirection: direction === "vertical" ? "column" : "row",
             flexWrap: direction === "vertical" ? "nowrap" : "wrap",
-            gap: direction === "vertical" ? tokens19.dimension.value8 : tokens19.dimension.value16
+            gap: direction === "vertical" ? tokens20.dimension.value8 : tokens20.dimension.value16
           },
           children: children || options.map((option) => /* @__PURE__ */ jsx21(
             KjunRadio,
@@ -3796,8 +3918,8 @@ function KjunRadioGroup({
 }
 
 // packages/native/src/selection-groups.tsx
-import { tokens as tokens21 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect10, useRef as useRef16 } from "react";
+import { tokens as tokens22 } from "@kjun-ui/tokens";
+import { useLayoutEffect as useLayoutEffect10, useRef as useRef18 } from "react";
 import {
   Animated as Animated11,
   ScrollView as ScrollView2,
@@ -3806,24 +3928,24 @@ import {
 } from "react-native";
 
 // packages/native/src/button-group-motion.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useLayoutEffect as useLayoutEffect9, useRef as useRef15, useState as useState15 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useLayoutEffect as useLayoutEffect9, useRef as useRef17, useState as useState15 } from "react";
 import { Animated as Animated10, Easing as Easing4, StyleSheet as StyleSheet5, View as View17 } from "react-native";
-import { tokens as tokens20 } from "@kjun-ui/tokens";
+import { tokens as tokens21 } from "@kjun-ui/tokens";
 import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
-var curve = tokens20.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
+var curve = tokens21.motion.easeOut.match(/-?\d*\.?\d+/g).map(Number);
 var easing = Easing4.bezier(...curve);
 var sameBox = (a, b) => a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
 function useButtonGroupMotion(selected) {
   const reduced = useReducedMotion();
   const [layouts, setLayouts] = useState15(/* @__PURE__ */ new Map());
-  const x = useRef15(new Animated10.Value(0)).current;
-  const width = useRef15(new Animated10.Value(0)).current;
-  const previous = useRef15(null);
+  const x = useRef17(new Animated10.Value(0)).current;
+  const width = useRef17(new Animated10.Value(0)).current;
+  const previous = useRef17(null);
   const layout = selected && layouts.get(selected.value);
-  const updateLayout = useCallback4((value, box) => {
+  const updateLayout = useCallback5((value, box) => {
     setLayouts((old) => old.has(value) && sameBox(old.get(value), box) ? old : new Map(old).set(value, box));
   }, []);
-  const measure = useCallback4((value, event) => updateLayout(value, event.nativeEvent.layout), [updateLayout]);
+  const measure = useCallback5((value, event) => updateLayout(value, event.nativeEvent.layout), [updateLayout]);
   useLayoutEffect9(() => {
     const old = previous.current;
     if (!selected || !layout) {
@@ -3837,8 +3959,8 @@ function useButtonGroupMotion(selected) {
     width.stopAnimation();
     if (old && old.value !== selected.value && !reduced) {
       Animated10.parallel([
-        Animated10.timing(x, { toValue: layout.x, duration: tokens20.motion.indicator, easing, useNativeDriver: false }),
-        Animated10.timing(width, { toValue: layout.width, duration: tokens20.motion.indicator, easing, useNativeDriver: false })
+        Animated10.timing(x, { toValue: layout.x, duration: tokens21.motion.indicator, easing, useNativeDriver: false }),
+        Animated10.timing(width, { toValue: layout.width, duration: tokens21.motion.indicator, easing, useNativeDriver: false })
       ]).start();
     } else {
       x.setValue(layout.x);
@@ -3846,7 +3968,7 @@ function useButtonGroupMotion(selected) {
     }
     previous.current = { value: selected.value, box: layout, reduced };
   }, [selected == null ? void 0 : selected.value, layout, reduced, x, width]);
-  useEffect10(() => () => {
+  useEffect11(() => () => {
     x.stopAnimation();
     width.stopAnimation();
   }, [x, width]);
@@ -3854,12 +3976,12 @@ function useButtonGroupMotion(selected) {
 }
 function ButtonGroupLabel({ label, active, size, reduced }) {
   const { colors, fontFamily } = useKjunStyles();
-  const progress = useRef15(new Animated10.Value(active ? 1 : 0)).current;
+  const progress = useRef17(new Animated10.Value(active ? 1 : 0)).current;
   const interpolate = typeof colors.textSecondary === "string" && typeof colors.text === "string";
-  useEffect10(() => {
+  useEffect11(() => {
     progress.stopAnimation();
     if (reduced || !interpolate) progress.setValue(active ? 1 : 0);
-    else Animated10.timing(progress, { toValue: active ? 1 : 0, duration: tokens20.motion.indicator, easing, useNativeDriver: false }).start();
+    else Animated10.timing(progress, { toValue: active ? 1 : 0, duration: tokens21.motion.indicator, easing, useNativeDriver: false }).start();
     return () => progress.stopAnimation();
   }, [active, reduced, interpolate, progress]);
   const resolveFont = useResolveFont();
@@ -3901,9 +4023,9 @@ function KjunButtonGroup({
   const { colors } = useKjunStyles();
   const selected = options.find((option) => option.value === value);
   const motion = useButtonGroupMotion(selected);
-  const padding = tokens21.buttonGroup.padding[size];
-  const itemRadius = tokens21.buttonGroup.itemRadii[size];
-  const itemRefs = useRef16(/* @__PURE__ */ new Map());
+  const padding = tokens22.buttonGroup.padding[size];
+  const itemRadius = tokens22.buttonGroup.itemRadii[size];
+  const itemRefs = useRef18(/* @__PURE__ */ new Map());
   const { updateLayout } = motion;
   useLayoutEffect10(() => {
     for (const [value2, node] of itemRefs.current) {
@@ -3928,7 +4050,7 @@ function KjunButtonGroup({
           style: {
             flexDirection: "row",
             padding,
-            borderRadius: tokens21.buttonGroup.radii[size],
+            borderRadius: tokens22.buttonGroup.radii[size],
             backgroundColor: colors.secondary,
             flexGrow: fullWidth ? 1 : 0
           },
@@ -3952,7 +4074,7 @@ function KjunButtonGroup({
                   // Disabled options dim their own labels; the selected value stays readable. The edge keeps it
                   // apart from the track when surface and secondary are close.
                   backgroundColor: colors.surface,
-                  borderWidth: tokens21.border.defaultWidth,
+                  borderWidth: tokens22.border.defaultWidth,
                   borderColor: colors.border
                 }
               }
@@ -3980,22 +4102,22 @@ function KjunButtonGroup({
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "center",
-                    gap: tokens21.dimension.value6,
+                    gap: tokens22.dimension.value6,
                     flex: fullWidth ? 1 : void 0,
-                    minWidth: tokens21.native.minimumTouchTarget,
-                    minHeight: tokens21.native.minimumTouchTarget,
-                    height: Math.max(tokens21.native.minimumTouchTarget, tokens21.buttonGroup.heights[size] - 2 * padding),
-                    paddingHorizontal: tokens21.buttonGroup.itemPaddingX[size],
+                    minWidth: tokens22.native.minimumTouchTarget,
+                    minHeight: tokens22.native.minimumTouchTarget,
+                    height: Math.max(tokens22.native.minimumTouchTarget, tokens22.buttonGroup.heights[size] - 2 * padding),
+                    paddingHorizontal: tokens22.buttonGroup.itemPaddingX[size],
                     borderRadius: itemRadius,
                     backgroundColor: active && !motion.layout ? colors.surface : pressed && !active ? colors.hover : "transparent",
-                    opacity: blocked ? tokens21.states.opacity.disabled : 1
+                    opacity: blocked ? tokens22.states.opacity.disabled : 1
                   }),
                   children: [
                     !!option.icon && /* @__PURE__ */ jsx23(
                       KjunIcon,
                       {
                         name: option.icon,
-                        size: tokens21.extensions.selection.iconSize,
+                        size: tokens22.extensions.selection.iconSize,
                         color: active ? colors.text : colors.textSecondary
                       }
                     ),
@@ -4031,7 +4153,7 @@ function KjunFilterGroup({
   onChange
 }) {
   const { colors } = useKjunStyles();
-  const wide = useWindowDimensions2().width >= tokens21.responsive.selection, roomy = wide && finePointer();
+  const wide = useWindowDimensions2().width >= tokens22.responsive.selection, roomy = wide && finePointer();
   const selected = (v) => multiple ? Array.isArray(value) && (v === null ? value.length === 0 : value.includes(v)) : value === v;
   const children = /* @__PURE__ */ jsx23(
     View18,
@@ -4040,7 +4162,7 @@ function KjunFilterGroup({
       style: {
         flexDirection: "row",
         flexWrap: scroll ? "nowrap" : "wrap",
-        gap: tokens21.dimension.value8
+        gap: tokens22.dimension.value8
       },
       children: options.map((option) => {
         const active = selected(option.value), blocked = disabled || option.disabled;
@@ -4057,9 +4179,9 @@ function KjunFilterGroup({
               onChange == null ? void 0 : onChange(next);
             },
             style: {
-              minHeight: roomy ? void 0 : tokens21.native.minimumTouchTarget,
+              minHeight: roomy ? void 0 : tokens22.native.minimumTouchTarget,
               justifyContent: "center",
-              opacity: blocked ? tokens21.states.opacity.disabledStrong : 1
+              opacity: blocked ? tokens22.states.opacity.disabledStrong : 1
             },
             children: /* @__PURE__ */ jsxs13(
               View18,
@@ -4068,12 +4190,12 @@ function KjunFilterGroup({
                   flexDirection: "row",
                   alignItems: "center",
                   justifyContent: "center",
-                  gap: tokens21.dimension.value4,
-                  minHeight: roomy ? void 0 : tokens21.extensions.selection.minimumHeight,
-                  height: roomy ? tokens21.button.heights[size] : Math.max(tokens21.extensions.selection.minimumHeight, tokens21.button.heights[size]),
-                  paddingHorizontal: { xs: tokens21.dimension.value8, sm: tokens21.dimension.value12, md: tokens21.dimension.value12, lg: tokens21.dimension.value14, xl: tokens21.dimension.value16 }[size],
+                  gap: tokens22.dimension.value4,
+                  minHeight: roomy ? void 0 : tokens22.extensions.selection.minimumHeight,
+                  height: roomy ? tokens22.button.heights[size] : Math.max(tokens22.extensions.selection.minimumHeight, tokens22.button.heights[size]),
+                  paddingHorizontal: { xs: tokens22.dimension.value8, sm: tokens22.dimension.value12, md: tokens22.dimension.value12, lg: tokens22.dimension.value14, xl: tokens22.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
-                  borderRadius: tokens21.button.radii[size],
+                  borderRadius: tokens22.button.radii[size],
                   backgroundColor: active ? colors.text : colors.secondary
                 },
                 children: [
@@ -4081,9 +4203,9 @@ function KjunFilterGroup({
                     View18,
                     {
                       style: {
-                        width: tokens21.extensions.selection.dotSize,
-                        height: tokens21.extensions.selection.dotSize,
-                        borderRadius: tokens21.radius.radius4,
+                        width: tokens22.extensions.selection.dotSize,
+                        height: tokens22.extensions.selection.dotSize,
+                        borderRadius: tokens22.radius.radius4,
                         backgroundColor: option.dot
                       }
                     }
@@ -4092,7 +4214,7 @@ function KjunFilterGroup({
                     KjunIcon,
                     {
                       name: option.icon,
-                      size: tokens21.extensions.selection.iconSize,
+                      size: tokens22.extensions.selection.iconSize,
                       color: active ? colors.inverse : colors.textSecondary
                     }
                   ),
@@ -4143,7 +4265,7 @@ function KjunFilterGroup({
 }
 
 // packages/native/src/textarea.tsx
-import { tokens as tokens22 } from "@kjun-ui/tokens";
+import { tokens as tokens23 } from "@kjun-ui/tokens";
 import {
   forwardRef as forwardRef4
 } from "react";
@@ -4165,7 +4287,7 @@ var KjunTextarea = forwardRef4(
     onBlur,
     ...props
   }, ref) {
-    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = tokens22.input[size];
+    const field = useKjunField(), { colors, fontFamily } = useKjunStyles(), spec = tokens23.input[size];
     const invalid = error || !!(field == null ? void 0 : field.error);
     const surface = useFieldSurface(size, { disabled, readOnly: readonly || props.readOnly || props.editable === false, invalid });
     return /* @__PURE__ */ jsx24(
@@ -4206,8 +4328,8 @@ var KjunTextarea = forwardRef4(
             ...inputTypeStyle(size),
             ...surface.style,
             height: void 0,
-            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * tokens22.border.controlWidth),
-            paddingHorizontal: spec.padding - tokens22.border.controlWidth,
+            minHeight: Math.max(spec.height, rows * spec.lineHeight + spec.textareaPaddingY * 2 + 2 * tokens23.border.controlWidth),
+            paddingHorizontal: spec.padding - tokens23.border.controlWidth,
             paddingVertical: spec.textareaPaddingY,
             textAlignVertical: "top",
             color: surface.ink
@@ -4220,8 +4342,8 @@ var KjunTextarea = forwardRef4(
 );
 
 // packages/native/src/drawer.tsx
-import { tokens as tokens23 } from "@kjun-ui/tokens";
-import { useEffect as useEffect11, useState as useState16 } from "react";
+import { tokens as tokens24 } from "@kjun-ui/tokens";
+import { useEffect as useEffect12, useState as useState16 } from "react";
 import { Animated as Animated12, Keyboard } from "react-native";
 
 // shared/package-runtime/drawer-geometry.ts
@@ -4256,7 +4378,7 @@ import {
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function useKeyboardOverlap(enabled2, windowHeight) {
   const [overlap, setOverlap] = useState16(0);
-  useEffect11(() => {
+  useEffect12(() => {
     var _a, _b;
     setOverlap(0);
     const events = keyboardEvents(Platform15.OS);
@@ -4277,7 +4399,7 @@ function KjunDrawer({
   onOpenChange,
   title,
   position = "right",
-  width = tokens23.extensions.drawer.width,
+  width = tokens24.extensions.drawer.width,
   closable = true,
   closeOnOverlay = true,
   closeOnEsc = true,
@@ -4286,6 +4408,7 @@ function KjunDrawer({
   footer,
   children,
   onClose,
+  onAfterClose,
   ariaLabel,
   safeAreaTop = 0,
   safeAreaBottom = 0,
@@ -4301,13 +4424,13 @@ function KjunDrawer({
     windowHeight: rootHeight || window2.height,
     safeAreaTop: Math.max(0, safeAreaTop),
     safeAreaBottom: Math.max(0, safeAreaBottom),
-    gap: tokens23.extensions.drawer.sheetGap,
+    gap: tokens24.extensions.drawer.sheetGap,
     keyboard,
     maxHeight
   });
   const [panelHeight, setPanelHeight] = useState16(0);
-  const motion = useNativePresence(open, tokens23.motion.layerEnter, tokens23.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
-  const backdrop = useNativePresence(open, tokens23.motion.backdrop, tokens23.motion.backdropExit, true, 0, { fade: tokens23.motion.backdropExit });
+  const motion = useNativePresence(open, tokens24.motion.layerEnter, tokens24.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
+  const backdrop = useNativePresence(open, tokens24.motion.backdrop, tokens24.motion.backdropExit, true, 0, { fade: tokens24.motion.backdropExit });
   const close = () => {
     if (!open) return;
     onOpenChange(false);
@@ -4316,10 +4439,15 @@ function KjunDrawer({
   const layer = useLayer(open, motion.present, "window", () => {
     if (closeOnEsc) close();
   });
+  const iosDismiss = Platform15.OS === "ios";
+  useAfterClose(motion.present, onAfterClose, !iosDismiss);
   return /* @__PURE__ */ jsx25(LayerScope.Provider, { value: layer.id, children: /* @__PURE__ */ jsx25(
     ScopedNativeModal,
     {
       visible: motion.present,
+      onDismiss: iosDismiss ? () => {
+        if (!open) onAfterClose == null ? void 0 : onAfterClose();
+      } : void 0,
       transparent: true,
       onRequestClose: () => {
         if (closeOnEsc) close();
@@ -4372,10 +4500,10 @@ function KjunDrawer({
                   paddingTop: frame.paddingTop,
                   paddingBottom: frame.paddingBottom,
                   marginBottom: frame.lift,
-                  borderRadius: tokens23.extensions.drawer.radius,
-                  borderTopLeftRadius: position === "bottom" ? tokens23.extensions.drawer.bottomRadius : tokens23.extensions.drawer.radius,
-                  borderTopRightRadius: position === "bottom" ? tokens23.extensions.drawer.bottomRadius : tokens23.extensions.drawer.radius,
-                  boxShadow: directionalShadow(tokens23.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  borderRadius: tokens24.extensions.drawer.radius,
+                  borderTopLeftRadius: position === "bottom" ? tokens24.extensions.drawer.bottomRadius : tokens24.extensions.drawer.radius,
+                  borderTopRightRadius: position === "bottom" ? tokens24.extensions.drawer.bottomRadius : tokens24.extensions.drawer.radius,
+                  boxShadow: directionalShadow(tokens24.extensions.drawer.elevation, position).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   backgroundColor: colors.surface
                 },
                 children: [
@@ -4386,9 +4514,9 @@ function KjunDrawer({
                         flexDirection: "row",
                         alignItems: "center",
                         justifyContent: "space-between",
-                        paddingVertical: tokens23.extensions.drawer.paddingY,
-                        paddingHorizontal: tokens23.extensions.drawer.paddingX,
-                        borderBottomWidth: tokens23.border.defaultWidth,
+                        paddingVertical: tokens24.extensions.drawer.paddingY,
+                        paddingHorizontal: tokens24.extensions.drawer.paddingX,
+                        borderBottomWidth: tokens24.border.defaultWidth,
                         borderBottomColor: colors.border
                       },
                       children: [
@@ -4406,8 +4534,8 @@ function KjunDrawer({
                             variant: "ghost",
                             ariaLabel: m.close,
                             onPress: close,
-                            style: { borderRadius: tokens23.extensions.drawer.closeRadius, width: tokens23.extensions.drawer.closeSize, height: tokens23.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
-                            children: /* @__PURE__ */ jsx25(KjunIcon, { name: "x", size: tokens23.extensions.drawer.closeIconSize })
+                            style: { borderRadius: tokens24.extensions.drawer.closeRadius, width: tokens24.extensions.drawer.closeSize, height: tokens24.extensions.drawer.closeSize, paddingHorizontal: 0, paddingVertical: 0 },
+                            children: /* @__PURE__ */ jsx25(KjunIcon, { name: "x", size: tokens24.extensions.drawer.closeIconSize })
                           }
                         )
                       ]
@@ -4418,7 +4546,7 @@ function KjunDrawer({
                     {
                       keyboardShouldPersistTaps: "handled",
                       style: vertical ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
-                      contentContainerStyle: { padding: noPadding ? 0 : tokens23.extensions.drawer.bodyPadding },
+                      contentContainerStyle: { padding: noPadding ? 0 : tokens24.extensions.drawer.bodyPadding },
                       children: content(children)
                     }
                   ),
@@ -4426,9 +4554,9 @@ function KjunDrawer({
                     View19,
                     {
                       style: {
-                        paddingVertical: tokens23.extensions.drawer.paddingY,
-                        paddingHorizontal: tokens23.extensions.drawer.paddingX,
-                        borderTopWidth: tokens23.border.defaultWidth,
+                        paddingVertical: tokens24.extensions.drawer.paddingY,
+                        paddingHorizontal: tokens24.extensions.drawer.paddingX,
+                        borderTopWidth: tokens24.border.defaultWidth,
                         borderTopColor: colors.border
                       },
                       children: content(footer)
@@ -4445,15 +4573,15 @@ function KjunDrawer({
 }
 
 // packages/native/src/dropdown.tsx
-import { tokens as tokens26 } from "@kjun-ui/tokens";
+import { tokens as tokens27 } from "@kjun-ui/tokens";
 import {
   Children as Children3,
   Fragment as Fragment8,
   createContext as createContext17,
   isValidElement as isValidElement6,
   useContext as useContext13,
-  useEffect as useEffect14,
-  useRef as useRef19,
+  useEffect as useEffect15,
+  useRef as useRef21,
   useState as useState19
 } from "react";
 import {
@@ -4462,13 +4590,13 @@ import {
 
 // packages/native/src/floating-panel.tsx
 import { Animated as Animated13 } from "react-native";
-import { tokens as tokens24 } from "@kjun-ui/tokens";
+import { tokens as tokens25 } from "@kjun-ui/tokens";
 import {
   cloneElement as cloneElement3,
   isValidElement as isValidElement4,
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useLayoutEffect as useLayoutEffect11,
-  useRef as useRef17,
+  useRef as useRef19,
   useState as useState17
 } from "react";
 import {
@@ -4525,11 +4653,11 @@ function FloatingPanel({
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.select;
   const [headerHeight, setHeaderHeight] = useState17(0);
-  const panelRef = useRef17(null);
-  const scroll = useRef17(null), viewport = useRef17(0);
+  const panelRef = useRef19(null);
+  const scroll = useRef19(null), viewport = useRef19(0);
   const { colors } = useKjunStyles(), window2 = useWindowDimensions4(), [anchored, setAnchored] = useState17(false), [sized, setSized] = useState17(false), [anchor, setAnchor] = useState17({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = useState17({ width: 0, height: 0 });
-  const measurement = useRef17(0);
-  const motion = useNativePresence(open, tooltip ? tokens24.motion.tooltipEnter : tokens24.motion.popupEnter, tooltip ? tokens24.motion.tooltipExit : tokens24.motion.popupExit, anchored && sized);
+  const measurement = useRef19(0);
+  const motion = useNativePresence(open, tooltip ? tokens25.motion.tooltipEnter : tokens25.motion.popupEnter, tooltip ? tokens25.motion.tooltipExit : tokens25.motion.popupExit, anchored && sized);
   const layer = useLayer(open, motion.present, tooltip ? "tooltip" : "popup", () => onOpenChange(false), triggerRef);
   useLayoutEffect11(() => {
     var _a;
@@ -4550,14 +4678,14 @@ function FloatingPanel({
       setAnchored(false);
     }
   }, [motion.present]);
-  useEffect12(() => {
+  useEffect13(() => {
     var _a;
     const row = reveal == null ? void 0 : reveal.current;
     if (!open || !anchored || !sized || !row || !viewport.current) return;
-    const offset = row.y + row.height + (menu || field ? tokens24.extensions.menu.padding : 0) - viewport.current;
+    const offset = row.y + row.height + (menu || field ? tokens25.extensions.menu.padding : 0) - viewport.current;
     if (offset > 0) (_a = scroll.current) == null ? void 0 : _a.scrollTo({ y: offset, animated: false });
   }, [open, anchored, sized, reveal, menu, field]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open || !anchored || !sized || !focusOnOpen || !panelRef.current) return;
     if (Platform16.OS === "web") {
       const node = panelRef.current;
@@ -4567,30 +4695,30 @@ function FloatingPanel({
       if (tag) AccessibilityInfo3.setAccessibilityFocus(tag);
     }
   }, [open, anchored, sized, focusOnOpen]);
-  const gap = field ? tokens24.extensions.floating.fieldGap : tokens24.extensions.floating.anchorGap;
+  const gap = field ? tokens25.extensions.floating.fieldGap : tokens25.extensions.floating.anchorGap;
   const contentSizedMenu = menu && !matchTriggerWidth;
-  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * tokens24.extensions.floating.viewportInset), tokens24.extensions.tooltip.maxWidth);
-  const maximumWidth = Math.max(0, window2.width - 2 * tokens24.extensions.floating.viewportInset);
+  const tooltipWidth = Math.min(Math.max(0, window2.width - 2 * tokens25.extensions.floating.viewportInset), tokens25.extensions.tooltip.maxWidth);
+  const maximumWidth = Math.max(0, window2.width - 2 * tokens25.extensions.floating.viewportInset);
   const minimumPanelWidth = Math.min(
     maximumWidth,
-    Math.max(minimumWidth, menu || field ? tokens24.extensions.menu.minimumWidth : 0)
+    Math.max(minimumWidth, menu || field ? tokens25.extensions.menu.minimumWidth : 0)
   );
   const width = tooltip ? Math.min(tooltipWidth, panel.width || tooltipWidth) : Math.min(
     maximumWidth,
-    Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : tokens24.extensions.popover.width)
+    Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : tokens25.extensions.popover.width)
   );
-  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens24.extensions.menu.listMaxHeight : tokens24.extensions.floating.maxHeight, window2.height - 2 * tokens24.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - tokens24.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens24.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
+  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens25.extensions.menu.listMaxHeight : tokens25.extensions.floating.maxHeight, window2.height - 2 * tokens25.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - tokens25.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens25.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
   let left = placement.endsWith("end") ? anchor.x + anchor.width - width : placement === "top" || placement === "bottom" ? anchor.x + (anchor.width - width) / 2 : anchor.x, top = above ? anchor.y - height - gap : anchor.y + anchor.height + gap;
   if (placement === "left" || placement === "right") {
     left = placement === "left" ? anchor.x - width - gap : anchor.x + anchor.width + gap;
     top = anchor.y + (anchor.height - height) / 2;
   }
-  left = Math.max(tokens24.extensions.floating.viewportInset, Math.min(window2.width - width - tokens24.extensions.floating.viewportInset, left));
-  top = Math.max(tokens24.extensions.floating.viewportInset, Math.min(window2.height - height - tokens24.extensions.floating.viewportInset, top));
+  left = Math.max(tokens25.extensions.floating.viewportInset, Math.min(window2.width - width - tokens25.extensions.floating.viewportInset, left));
+  top = Math.max(tokens25.extensions.floating.viewportInset, Math.min(window2.height - height - tokens25.extensions.floating.viewportInset, top));
   if (layer.blocked) return null;
   if (tooltip && Platform16.OS === "web") {
     if (!motion.present) return null;
-    const arrow = tokens24.extensions.tooltip.arrowSize, corner = tokens24.radius.radius6, side = placement === "left" ? "right" : placement === "right" ? "left" : above ? "bottom" : "top", along = side === "top" || side === "bottom" ? Math.max(corner, Math.min(width - corner - arrow, anchor.x + anchor.width / 2 - left - arrow / 2)) : Math.max(corner, Math.min(height - corner - arrow, anchor.y + anchor.height / 2 - top - arrow / 2));
+    const arrow = tokens25.extensions.tooltip.arrowSize, corner = tokens25.radius.radius6, side = placement === "left" ? "right" : placement === "right" ? "left" : above ? "bottom" : "top", along = side === "top" || side === "bottom" ? Math.max(corner, Math.min(width - corner - arrow, anchor.x + anchor.width / 2 - left - arrow / 2)) : Math.max(corner, Math.min(height - corner - arrow, anchor.y + anchor.height / 2 - top - arrow / 2));
     return /* @__PURE__ */ jsxs15(
       Animated13.View,
       {
@@ -4617,7 +4745,7 @@ function FloatingPanel({
                 borderRadius: corner,
                 overflow: "hidden",
                 backgroundColor: colors.chartTooltipBg,
-                boxShadow: shadowLayers(tokens24.extensions.tooltip.elevation, colors)
+                boxShadow: shadowLayers(tokens25.extensions.tooltip.elevation, colors)
               },
               children
             }
@@ -4679,8 +4807,8 @@ function FloatingPanel({
                 style: {
                   opacity: anchored && sized ? motion.opacity : 0,
                   transform: tooltip ? void 0 : [
-                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? tokens24.motionDistance.popup : placement === "right" ? -tokens24.motionDistance.popup : 0, 0] }) },
-                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? tokens24.motionDistance.popup : -tokens24.motionDistance.popup, 0] }) }
+                    { translateX: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" ? tokens25.motionDistance.popup : placement === "right" ? -tokens25.motionDistance.popup : 0, 0] }) },
+                    { translateY: motion.progress.interpolate({ inputRange: [0, 1], outputRange: [placement === "left" || placement === "right" ? 0 : above ? tokens25.motionDistance.popup : -tokens25.motionDistance.popup, 0] }) }
                   ],
                   position: "absolute",
                   top,
@@ -4689,11 +4817,11 @@ function FloatingPanel({
                   minWidth: contentSizedMenu ? minimumPanelWidth : void 0,
                   maxWidth: tooltip ? tooltipWidth : maximumWidth,
                   maxHeight: available,
-                  borderRadius: popover ? tokens24.extensions.popover.radius : field ? tokens24.radius.radius12 : tokens24.extensions.menu.radius,
-                  borderWidth: popover ? 0 : tokens24.border.defaultWidth,
+                  borderRadius: popover ? tokens25.extensions.popover.radius : field ? tokens25.radius.radius12 : tokens25.extensions.menu.radius,
+                  borderWidth: popover ? 0 : tokens25.border.defaultWidth,
                   borderColor: colors.border,
                   backgroundColor: colors.surface,
-                  boxShadow: (tooltip ? tokens24.extensions.tooltip.elevation : popover ? tokens24.extensions.popover.elevation : tokens24.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
+                  boxShadow: (tooltip ? tokens25.extensions.tooltip.elevation : popover ? tokens25.extensions.popover.elevation : tokens25.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   overflow: "hidden"
                 },
                 children: [
@@ -4702,10 +4830,10 @@ function FloatingPanel({
                     {
                       onLayout: ({ nativeEvent: { layout } }) => setHeaderHeight(layout.height),
                       style: {
-                        paddingTop: tokens24.extensions.popover.padding,
-                        paddingHorizontal: tokens24.extensions.popover.padding,
-                        paddingBottom: tokens24.extensions.popover.headerPaddingBottom,
-                        borderBottomWidth: tokens24.border.defaultWidth,
+                        paddingTop: tokens25.extensions.popover.padding,
+                        paddingHorizontal: tokens25.extensions.popover.padding,
+                        paddingBottom: tokens25.extensions.popover.headerPaddingBottom,
+                        borderBottomWidth: tokens25.border.defaultWidth,
                         borderBottomColor: colors.divider
                       },
                       children: content(header, typeStyle("cardTitle"))
@@ -4720,7 +4848,7 @@ function FloatingPanel({
                       },
                       keyboardShouldPersistTaps: "handled",
                       style: { maxHeight: available - (header != null ? headerHeight : 0), flexShrink: 1 },
-                      contentContainerStyle: { padding: menu || field ? tokens24.extensions.menu.padding : 0 },
+                      contentContainerStyle: { padding: menu || field ? tokens25.extensions.menu.padding : 0 },
                       onContentSizeChange: (width2, height2) => {
                         if (contentSizedMenu) return;
                         setSized(true);
@@ -4745,15 +4873,15 @@ function FloatingPanel({
 import {
   cloneElement as cloneElement4,
   isValidElement as isValidElement5,
-  useEffect as useEffect13,
-  useRef as useRef18,
+  useEffect as useEffect14,
+  useRef as useRef20,
   useState as useState18
 } from "react";
 import {
   Platform as Platform17,
   View as View21
 } from "react-native";
-import { tokens as tokens25 } from "@kjun-ui/tokens";
+import { tokens as tokens26 } from "@kjun-ui/tokens";
 import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 function KjunPopover({
   noPadding = false,
@@ -4772,7 +4900,7 @@ function KjunPopover({
   children
 }) {
   const { colors } = useKjunStyles();
-  const [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, ref = useRef18(null);
+  const [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, ref = useRef20(null);
   const change = (v) => {
     setInternal(v);
     onOpenChange == null ? void 0 : onOpenChange(v);
@@ -4802,7 +4930,7 @@ function KjunPopover({
         ariaLabel,
         header: header != null ? content(header, { ...typeStyle("cardTitle"), color: colors.text }) : void 0,
         nonModal: !modal,
-        children: /* @__PURE__ */ jsx27(View21, { style: { padding: noPadding ? 0 : tokens25.extensions.popover.padding, gap: noPadding ? 0 : tokens25.extensions.popover.gap }, children: content(
+        children: /* @__PURE__ */ jsx27(View21, { style: { padding: noPadding ? 0 : tokens26.extensions.popover.padding, gap: noPadding ? 0 : tokens26.extensions.popover.gap }, children: content(
           typeof children === "function" ? children(() => change(false)) : children,
           Platform17.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : void 0
         ) })
@@ -4820,13 +4948,13 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
-  const { colors } = useKjunStyles(), [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, latest = useRef18({ open, onOpenChange }), setOpen = (value) => {
+  const { colors } = useKjunStyles(), [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, latest = useRef20({ open, onOpenChange }), setOpen = (value) => {
     var _a, _b;
     if (latest.current.open === value) return;
     latest.current.open = value;
     setInternal(value);
     (_b = (_a = latest.current).onOpenChange) == null ? void 0 : _b.call(_a, value);
-  }, ref = useRef18(null), timer = useRef18(void 0);
+  }, ref = useRef20(null), timer = useRef20(void 0);
   latest.current = { open, onOpenChange };
   const scopeActive = useActiveLayerScope();
   const hide = () => {
@@ -4838,11 +4966,11 @@ function KjunTooltip({
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setOpen(true), delay);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     if (!scopeActive) hide();
   }, [scopeActive]);
-  useEffect13(() => () => clearTimeout(timer.current), []);
-  useEffect13(() => {
+  useEffect14(() => () => clearTimeout(timer.current), []);
+  useEffect14(() => {
     if (Platform17.OS !== "web" || !open) return;
     const escape = (event) => {
       if (event.key === "Escape") hide();
@@ -4909,9 +5037,9 @@ function KjunTooltip({
           View21,
           {
             style: {
-              paddingVertical: tokens25.extensions.tooltip.paddingY,
-              paddingHorizontal: tokens25.extensions.tooltip.paddingX,
-              maxWidth: tokens25.extensions.tooltip.maxWidth,
+              paddingVertical: tokens26.extensions.tooltip.paddingY,
+              paddingHorizontal: tokens26.extensions.tooltip.paddingX,
+              maxWidth: tokens26.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
             children: /* @__PURE__ */ jsx27(
@@ -4947,7 +5075,7 @@ function KjunDropdown({
   onClose
 }) {
   const m = useKjunMessages();
-  const [open, setOpen] = useState19(false), currentOpen = useRef19(false), ref = useRef19(null);
+  const [open, setOpen] = useState19(false), currentOpen = useRef21(false), ref = useRef21(null);
   let control = trigger;
   while (isValidElement6(control) && control.type === KjunTooltip)
     control = control.props.children;
@@ -4959,7 +5087,7 @@ function KjunDropdown({
     if (v) onOpen == null ? void 0 : onOpen();
     else onClose == null ? void 0 : onClose();
   };
-  useEffect14(() => {
+  useEffect15(() => {
     if (unavailable) change(false);
   }, [unavailable]);
   return /* @__PURE__ */ jsxs17(DropdownContext.Provider, { value: () => change(false), children: [
@@ -5014,18 +5142,18 @@ function KjunDropdownItem({
       style: ({ pressed }) => ({
         flexDirection: "row",
         alignItems: "center",
-        gap: tokens26.dimension.value8,
-        paddingVertical: tokens26.extensions.menu.optionPaddingY,
-        paddingHorizontal: tokens26.extensions.menu.optionPaddingX,
-        minHeight: tokens26.extensions.menu.optionHeight,
-        borderRadius: tokens26.extensions.menu.optionRadius,
+        gap: tokens27.dimension.value8,
+        paddingVertical: tokens27.extensions.menu.optionPaddingY,
+        paddingHorizontal: tokens27.extensions.menu.optionPaddingX,
+        minHeight: tokens27.extensions.menu.optionHeight,
+        borderRadius: tokens27.extensions.menu.optionRadius,
         backgroundColor: selected ? colors.selectedBg : !disabled && (pressed || hovered) ? variant === "danger" ? colors.dangerBg : colors.hover : void 0,
-        opacity: disabled ? tokens26.states.opacity.disabled : 1
+        opacity: disabled ? tokens27.states.opacity.disabled : 1
       }),
       children: [
-        icon ? /* @__PURE__ */ jsx28(KjunIcon, { name: icon, size: tokens26.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx28(View22, { style: { width: tokens26.extensions.menu.iconSize }, accessible: false }),
-        /* @__PURE__ */ jsx28(View22, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens26.extensions.menu.optionFontSize, lineHeight: tokens26.extensions.menu.optionLineHeight }) }),
-        selected !== null && /* @__PURE__ */ jsx28(View22, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx28(KjunIcon, { name: "check", size: tokens26.extensions.menu.iconSize, color: colors.brand }) })
+        icon ? /* @__PURE__ */ jsx28(KjunIcon, { name: icon, size: tokens27.extensions.menu.iconSize, color: iconColor }) : reserveIcon && /* @__PURE__ */ jsx28(View22, { style: { width: tokens27.extensions.menu.iconSize }, accessible: false }),
+        /* @__PURE__ */ jsx28(View22, { style: { flexGrow: 1, flexShrink: 1 }, children: content(children, { color, fontSize: tokens27.extensions.menu.optionFontSize, lineHeight: tokens27.extensions.menu.optionLineHeight }) }),
+        selected !== null && /* @__PURE__ */ jsx28(View22, { style: { opacity: selected ? 1 : 0 }, accessible: false, children: /* @__PURE__ */ jsx28(KjunIcon, { name: "check", size: tokens27.extensions.menu.iconSize, color: colors.brand }) })
       ]
     }
   );
@@ -5036,7 +5164,7 @@ function KjunDropdownDivider() {
     View22,
     {
       role: "separator",
-      style: { height: tokens26.extensions.menu.dividerHeight, marginVertical: tokens26.dimension.value4, backgroundColor: colors.border }
+      style: { height: tokens27.extensions.menu.dividerHeight, marginVertical: tokens27.dimension.value4, backgroundColor: colors.border }
     }
   );
 }
@@ -5095,7 +5223,7 @@ function KjunMenuButton({
 }
 
 // shared/package-runtime/combobox.ts
-import { useEffect as useEffect15, useState as useState20 } from "react";
+import { useEffect as useEffect16, useState as useState20 } from "react";
 
 // shared/package-runtime/options.ts
 var optionValue = (option, key = "value") => typeof option === "object" ? option[key] : option;
@@ -5175,8 +5303,8 @@ function useComboboxModel({
   const selectedLabel = selected !== void 0 ? optionLabel(selected, labelKey) : "";
   const [query, setQuery] = useState20(selectedLabel);
   const [open, setOpen] = useState20(false);
-  useEffect15(() => setQuery(selectedLabel), [value, selectedLabel]);
-  useEffect15(() => {
+  useEffect16(() => setQuery(selectedLabel), [value, selectedLabel]);
+  useEffect16(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const change = (next) => {
@@ -5209,12 +5337,12 @@ function useComboboxModel({
 }
 
 // packages/native/src/combobox.tsx
-import { tokens as tokens28 } from "@kjun-ui/tokens";
-import { useId as useId5, useRef as useRef20 } from "react";
+import { tokens as tokens29 } from "@kjun-ui/tokens";
+import { useId as useId5, useRef as useRef22 } from "react";
 import { Platform as Platform18, View as View24 } from "react-native";
 
 // packages/native/src/select-options.tsx
-import { tokens as tokens27 } from "@kjun-ui/tokens";
+import { tokens as tokens28 } from "@kjun-ui/tokens";
 import { View as View23 } from "react-native";
 import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 function OptionRow({
@@ -5237,20 +5365,20 @@ function OptionRow({
       onPress,
       onLayout,
       style: ({ pressed }) => ({
-        borderRadius: tokens27.radius.radius8,
-        minHeight: tokens27.extensions.menu.optionHeight,
+        borderRadius: tokens28.radius.radius8,
+        minHeight: tokens28.extensions.menu.optionHeight,
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: tokens27.dimension.value8,
-        paddingVertical: tokens27.extensions.menu.optionPaddingY,
-        paddingHorizontal: tokens27.extensions.menu.optionPaddingX,
+        gap: tokens28.dimension.value8,
+        paddingVertical: tokens28.extensions.menu.optionPaddingY,
+        paddingHorizontal: tokens28.extensions.menu.optionPaddingX,
         backgroundColor: selected ? colors.selectedBg : pressed ? colors.hover : void 0,
-        opacity: disabled ? tokens27.states.opacity.disabled : 1
+        opacity: disabled ? tokens28.states.opacity.disabled : 1
       }),
       children: [
-        /* @__PURE__ */ jsx29(View23, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens27.extensions.menu.optionFontSize, lineHeight: tokens27.extensions.menu.optionLineHeight }) }),
-        selected && /* @__PURE__ */ jsx29(KjunIcon, { name: "check", size: tokens27.extensions.menu.iconSize, color: colors.brand })
+        /* @__PURE__ */ jsx29(View23, { style: { flex: 1 }, children: content(children || label, { fontSize: tokens28.extensions.menu.optionFontSize, lineHeight: tokens28.extensions.menu.optionLineHeight }) }),
+        selected && /* @__PURE__ */ jsx29(KjunIcon, { name: "check", size: tokens28.extensions.menu.iconSize, color: colors.brand })
       ]
     }
   );
@@ -5340,8 +5468,8 @@ function SearchField({
 }) {
   const m = useKjunMessages();
   const searchId = "kjun-popup-search-" + useId5().replace(/:/g, "");
-  const clearing = useRef20(false);
-  const ref = useRef20(null), { colors } = useKjunStyles();
+  const clearing = useRef22(false);
+  const ref = useRef22(null), { colors } = useKjunStyles();
   const focusGuard = usePopupFocusGuard(ref);
   const openFromPress = () => {
     if (!disabled) {
@@ -5388,8 +5516,8 @@ function SearchField({
             View24,
             {
               style: {
-                padding: tokens28.dimension.value8,
-                borderBottomWidth: tokens28.border.defaultWidth,
+                padding: tokens29.dimension.value8,
+                borderBottomWidth: tokens29.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx30(KjunInput, { ...inputProps, nativeID: searchId, autoFocus: true })
@@ -5397,13 +5525,13 @@ function SearchField({
           ),
           loading ? (
             // Centered like the Select loading row on every platform.
-            /* @__PURE__ */ jsx30(View24, { style: { padding: tokens28.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx30(KjunSpinner, { size: "sm", text: m.searching }) })
+            /* @__PURE__ */ jsx30(View24, { style: { padding: tokens29.dimension.value12, alignItems: "center" }, children: /* @__PURE__ */ jsx30(KjunSpinner, { size: "sm", text: m.searching }) })
           ) : failed ? /* @__PURE__ */ jsx30(
             KText,
             {
               accessibilityRole: "alert",
               style: {
-                padding: tokens28.dimension.value12,
+                padding: tokens29.dimension.value12,
                 textAlign: "center",
                 color: colors.danger
               },
@@ -5426,7 +5554,7 @@ function SearchField({
             KText,
             {
               style: {
-                padding: tokens28.dimension.value12,
+                padding: tokens29.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -5440,8 +5568,8 @@ function SearchField({
 }
 
 // packages/native/src/date-picker.tsx
-import { tokens as tokens29 } from "@kjun-ui/tokens";
-import { useRef as useRef21, useState as useState21 } from "react";
+import { tokens as tokens30 } from "@kjun-ui/tokens";
+import { useRef as useRef23, useState as useState21 } from "react";
 import { Platform as Platform19, View as View25 } from "react-native";
 import { Fragment as Fragment10, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
 function displayMonth(value) {
@@ -5464,7 +5592,7 @@ function KjunDatePicker({
   const scope = useKjunMessageScope();
   placeholder != null ? placeholder : placeholder = scope.messages.datePlaceholder;
   const clear = clearable && !!value && !disabled;
-  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState21(false), [month, setMonth] = useState21(() => displayMonth(value)), ref = useRef21(null), spec = tokens29.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = useState21(false), [month, setMonth] = useState21(() => displayMonth(value)), ref = useRef23(null), spec = tokens30.input[size];
   const surface = useFieldSurface(size, { disabled, invalid: error || !!(field == null ? void 0 : field.error), open });
   const year = month.getFullYear(), m = month.getMonth(), first = new Date(year, m, 1).getDay(), count = new Date(year, m + 1, 0).getDate();
   const date = (day) => `${year}-${String(m + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
@@ -5472,7 +5600,7 @@ function KjunDatePicker({
     /* @__PURE__ */ jsxs20(View25, { ref, collapsable: false, ...fieldTarget(() => {
       setMonth(displayMonth(value));
       setOpen(true);
-    }, disabled), style: { minHeight: tokens29.native.minimumTouchTarget, justifyContent: "center" }, children: [
+    }, disabled), style: { minHeight: tokens30.native.minimumTouchTarget, justifyContent: "center" }, children: [
       /* @__PURE__ */ jsxs20(
         FieldPressable,
         {
@@ -5498,7 +5626,7 @@ function KjunDatePicker({
           },
           style: {
             ...surface.style,
-            paddingHorizontal: spec.padding - tokens29.border.controlWidth,
+            paddingHorizontal: spec.padding - tokens30.border.controlWidth,
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between"
@@ -5541,9 +5669,9 @@ function KjunDatePicker({
         triggerRef: ref,
         placement: "bottom-start",
         matchTriggerWidth: true,
-        minimumWidth: tokens29.extensions.calendar.minimumWidth,
+        minimumWidth: tokens30.extensions.calendar.minimumWidth,
         ariaLabel: scope.messages.datePlaceholder,
-        children: /* @__PURE__ */ jsxs20(View25, { style: { padding: tokens29.dimension.value8 }, children: [
+        children: /* @__PURE__ */ jsxs20(View25, { style: { padding: tokens30.dimension.value8 }, children: [
           /* @__PURE__ */ jsxs20(
             View25,
             {
@@ -5584,7 +5712,7 @@ function KjunDatePicker({
                 style: {
                   width: "14.2857%",
                   textAlign: "center",
-                  paddingVertical: tokens29.dimension.value8,
+                  paddingVertical: tokens30.dimension.value8,
                   color: colors.textTertiary
                 },
                 children: day
@@ -5611,12 +5739,12 @@ function KjunDatePicker({
                   },
                   style: {
                     width: "14.2857%",
-                    minHeight: tokens29.native.minimumTouchTarget,
+                    minHeight: tokens30.native.minimumTouchTarget,
                     alignItems: "center",
                     justifyContent: "center",
-                    borderRadius: tokens29.radius.radius6,
+                    borderRadius: tokens30.radius.radius6,
                     backgroundColor: v === value ? colors.brand : void 0,
-                    opacity: blocked ? tokens29.states.opacity.disabledStrong : 1
+                    opacity: blocked ? tokens30.states.opacity.disabledStrong : 1
                   },
                   children: /* @__PURE__ */ jsx31(
                     KText,
@@ -5642,7 +5770,7 @@ function KjunDatePicker({
 import { useState as useState23 } from "react";
 
 // shared/package-runtime/search-input.ts
-import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect12, useRef as useRef22, useState as useState22 } from "react";
+import { useEffect as useEffect17, useLayoutEffect as useLayoutEffect12, useRef as useRef24, useState as useState22 } from "react";
 function useSearchInputModel({
   value,
   disabled = false,
@@ -5652,10 +5780,10 @@ function useSearchInputModel({
   onValueChange,
   onSearchError
 }, open) {
-  const [query, setQuery] = useState22(value), [options, setOptions] = useState22([]), [loading, setLoading] = useState22(false), [failed, setFailed] = useState22(false), version = useRef22(0), notify = useRef22(onSearchError);
+  const [query, setQuery] = useState22(value), [options, setOptions] = useState22([]), [loading, setLoading] = useState22(false), [failed, setFailed] = useState22(false), version = useRef24(0), notify = useRef24(onSearchError);
   notify.current = onSearchError;
-  const timer = useRef22(void 0);
-  const notifyValue = useRef22(onValueChange);
+  const timer = useRef24(void 0);
+  const notifyValue = useRef24(onValueChange);
   notifyValue.current = onValueChange;
   useLayoutEffect12(() => {
     clearTimeout(timer.current);
@@ -5665,7 +5793,7 @@ function useSearchInputModel({
     clearTimeout(timer.current);
     return () => clearTimeout(timer.current);
   }, [disabled, debounce, !!loadOptions]);
-  useEffect16(() => {
+  useEffect17(() => {
     const current = ++version.current, abort = new AbortController();
     setFailed(false);
     if (!loadOptions || !open || disabled || query.length < minChars) {
@@ -5817,22 +5945,22 @@ function KjunSearchInput({
 }
 
 // packages/native/src/select-control.tsx
-import { tokens as tokens31 } from "@kjun-ui/tokens";
-import { useContext as useContext14, useEffect as useEffect18, useRef as useRef24 } from "react";
+import { tokens as tokens32 } from "@kjun-ui/tokens";
+import { useContext as useContext14, useEffect as useEffect19, useRef as useRef26 } from "react";
 
 // packages/native/src/compound-control.tsx
 import { createContext as createContext18 } from "react";
 import { View as View26 } from "react-native";
-import { tokens as tokens30 } from "@kjun-ui/tokens";
+import { tokens as tokens31 } from "@kjun-ui/tokens";
 import { jsx as jsx33 } from "react/jsx-runtime";
 var CompoundControlContext = createContext18(null);
 function CompoundTarget({ children, square = false }) {
-  const touch = finePointer() ? void 0 : tokens30.native.minimumTouchTarget;
+  const touch = finePointer() ? void 0 : tokens31.native.minimumTouchTarget;
   return /* @__PURE__ */ jsx33(View26, { style: { minHeight: touch, minWidth: square ? touch : void 0, alignItems: "center", justifyContent: "center" }, children });
 }
 
 // shared/package-runtime/select.ts
-import { useEffect as useEffect17, useRef as useRef23, useState as useState24 } from "react";
+import { useEffect as useEffect18, useRef as useRef25, useState as useState24 } from "react";
 function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const [internal, setInternal] = useState24(false);
   const [query, setQuery] = useState24("");
@@ -5840,8 +5968,8 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
   const [session, setSession] = useState24(0);
   const isControlled = typeof controlled === "boolean";
   const open = !disabled && (isControlled ? controlled : internal);
-  const previousOpen = useRef23(open);
-  useEffect17(() => {
+  const previousOpen = useRef25(open);
+  useEffect18(() => {
     if (disabled && !isControlled) setInternal(false);
     if (previousOpen.current && !open) {
       setQuery("");
@@ -5850,7 +5978,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
     }
     previousOpen.current = open;
   }, [open, disabled, isControlled, pageSize]);
-  useEffect17(() => {
+  useEffect18(() => {
     setLimit(pageSize);
   }, [pageSize]);
   const changeOpen = (next) => {
@@ -5900,14 +6028,14 @@ function KjunSelect({
   placeholder != null ? placeholder : placeholder = m.select;
   searchPlaceholder != null ? searchPlaceholder : searchPlaceholder = m.search;
   const { open, query, limit, changeOpen, search, showMore } = useSelectState(controlled, disabled, optionPageSize, onOpenChange);
-  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef24(null), spec = tokens31.input[size];
-  const trigger = useRef24(null);
+  const { colors } = useKjunStyles(), field = useKjunField(), ref = useRef26(null), spec = tokens32.input[size];
+  const trigger = useRef26(null);
   const compound = useContext14(CompoundControlContext);
-  useEffect18(() => {
+  useEffect19(() => {
     if (compound == null ? void 0 : compound.focusRef) compound.focusRef.current = trigger.current;
   }, [compound == null ? void 0 : compound.focusRef]);
   const expanded = usePopupExpanded(open, ref);
-  const selectedRow = useRef24(null);
+  const selectedRow = useRef26(null);
   const surface = useFieldSurface(size, { disabled, invalid: error || !!(field == null ? void 0 : field.error), open: expanded });
   const change = (v) => {
     onValueChange == null ? void 0 : onValueChange(v);
@@ -5932,10 +6060,10 @@ function KjunSelect({
   return /* @__PURE__ */ jsxs21(Fragment11, { children: [
     /* @__PURE__ */ jsxs21(View27, { ref, collapsable: false, ...fieldTarget(() => changeOpen(!open), disabled), style: {
       position: "relative",
-      minHeight: tokens31.native.minimumTouchTarget,
+      minHeight: tokens32.native.minimumTouchTarget,
       justifyContent: "center",
       // Inside a compound field the touch target overflows so the shared surface keeps its size height.
-      ...compound ? { marginVertical: Math.min(0, (spec.height - tokens31.native.minimumTouchTarget) / 2) } : {}
+      ...compound ? { marginVertical: Math.min(0, (spec.height - tokens32.native.minimumTouchTarget) / 2) } : {}
     }, children: [
       /* @__PURE__ */ jsxs21(
         FieldPressable,
@@ -5971,14 +6099,14 @@ function KjunSelect({
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "space-between",
-            gap: tokens31.dimension.value8,
+            gap: tokens32.dimension.value8,
             ...surface.style,
-            paddingHorizontal: spec.padding - tokens31.border.controlWidth,
-            paddingRight: spec.padding - tokens31.border.controlWidth,
-            ...compound ? { paddingHorizontal: tokens31.extensions.timePicker.segmentPadding, paddingRight: tokens31.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - tokens31.border.controlWidth : tokens31.extensions.timePicker.segmentPadding, gap: tokens31.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
+            paddingHorizontal: spec.padding - tokens32.border.controlWidth,
+            paddingRight: spec.padding - tokens32.border.controlWidth,
+            ...compound ? { paddingHorizontal: tokens32.extensions.timePicker.segmentPadding, paddingRight: tokens32.extensions.timePicker.segmentPadding, paddingLeft: compound.leading ? spec.padding - tokens32.border.controlWidth : tokens32.extensions.timePicker.segmentPadding, gap: tokens32.extensions.timePicker.segmentPadding, backgroundColor: !disabled && (surface.active || surface.hovered) ? colors.hover : "transparent", borderColor: "transparent", outlineWidth: 0 } : {}
           },
           children: [
-            /* @__PURE__ */ jsxs21(View27, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? tokens31.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
+            /* @__PURE__ */ jsxs21(View27, { style: { ...compound ? { flexGrow: 1, flexShrink: 0 } : { flex: 1, minWidth: 0 }, paddingRight: clearable && label ? tokens32.native.minimumTouchTarget + spec.affixGap : 0 }, children: [
               compound && /* @__PURE__ */ jsx34(KText, { "aria-hidden": true, importantForAccessibility: "no-hide-descendants", style: { ...inputTypeStyle(size), fontVariant: ["tabular-nums"], opacity: 0 }, children: "00" }),
               (renderSelected == null ? void 0 : renderSelected(selectedOption)) || /* @__PURE__ */ jsx34(KText, { numberOfLines: 1, style: {
                 ...inputTypeStyle(size),
@@ -5990,7 +6118,7 @@ function KjunSelect({
               KjunIcon,
               {
                 name: "chevron-down",
-                size: compound ? tokens31.extensions.timePicker.iconSize : spec.iconSize,
+                size: compound ? tokens32.extensions.timePicker.iconSize : spec.iconSize,
                 color: surface.icon
               }
             ) })
@@ -6034,8 +6162,8 @@ function KjunSelect({
             View27,
             {
               style: {
-                padding: tokens31.dimension.value8,
-                borderBottomWidth: tokens31.border.defaultWidth,
+                padding: tokens32.dimension.value8,
+                borderBottomWidth: tokens32.border.defaultWidth,
                 borderBottomColor: colors.border
               },
               children: /* @__PURE__ */ jsx34(
@@ -6055,7 +6183,7 @@ function KjunSelect({
               )
             }
           ),
-          loading ? /* @__PURE__ */ jsx34(View27, { style: { padding: tokens31.dimension.value12 }, children: /* @__PURE__ */ jsx34(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx34(
+          loading ? /* @__PURE__ */ jsx34(View27, { style: { padding: tokens32.dimension.value12 }, children: /* @__PURE__ */ jsx34(KjunSpinner, { size: "sm", text: m.searching }) }) : visible.map(({ option: o, key }, index) => /* @__PURE__ */ jsx34(
             OptionRow,
             {
               selected: selected(o),
@@ -6077,7 +6205,7 @@ function KjunSelect({
             KText,
             {
               style: {
-                padding: tokens31.dimension.value12,
+                padding: tokens32.dimension.value12,
                 textAlign: "center",
                 color: colors.textTertiary
               },
@@ -6101,19 +6229,20 @@ function KjunSelect({
 }
 
 // packages/native/src/navigation.tsx
-import { tokens as tokens34 } from "@kjun-ui/tokens";
+import { tokens as tokens35 } from "@kjun-ui/tokens";
 
 // packages/native/src/collapse.tsx
-import { tokens as tokens32 } from "@kjun-ui/tokens";
-import { useLayoutEffect as useLayoutEffect13, useRef as useRef25, useState as useState25 } from "react";
+import { tokens as tokens33 } from "@kjun-ui/tokens";
+import { useLayoutEffect as useLayoutEffect13, useRef as useRef27, useState as useState25 } from "react";
 import { Animated as Animated14, View as View28 } from "react-native";
 import { jsx as jsx35 } from "react/jsx-runtime";
-function Collapse({ open, children }) {
+function Collapse({ open, keepMounted = false, children }) {
   const reduced = useReducedMotion();
   const [retained, setRetained] = useState25(open), [height, setHeight] = useState25(null);
-  const value = useRef25(new Animated14.Value(0)).current;
+  const value = useRef27(new Animated14.Value(0)).current;
   const [settled, setSettled] = useState25(open);
-  const version = useRef25(0), first = useRef25(open);
+  const version = useRef27(0), first = useRef27(open), opened = useRef27(open);
+  if (open) opened.current = true;
   useLayoutEffect13(() => {
     const revision = ++version.current;
     if (open) setRetained(true);
@@ -6131,7 +6260,7 @@ function Collapse({ open, children }) {
       finish();
     } else {
       setSettled(false);
-      Animated14.timing(value, { toValue: target, duration: tokens32.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
+      Animated14.timing(value, { toValue: target, duration: tokens33.motion.collapse, easing: motionOut, useNativeDriver: false }).start(({ finished }) => {
         if (finished) finish();
       });
     }
@@ -6141,13 +6270,13 @@ function Collapse({ open, children }) {
       value.stopAnimation();
     };
   }, [open, height, reduced, value]);
-  return open || retained ? /* @__PURE__ */ jsx35(
+  return open || retained || keepMounted && opened.current ? /* @__PURE__ */ jsx35(
     Animated14.View,
     {
       pointerEvents: open ? "auto" : "none",
       accessibilityElementsHidden: !open,
       importantForAccessibility: open ? "auto" : "no-hide-descendants",
-      ...!open ? { inert: true } : {},
+      ...!open ? { inert: true, "aria-hidden": true } : {},
       style: { height: settled && open ? void 0 : value, overflow: "hidden" },
       children: /* @__PURE__ */ jsx35(View28, { onLayout: (event) => setHeight(event.nativeEvent.layout.height), children })
     }
@@ -6155,10 +6284,10 @@ function Collapse({ open, children }) {
 }
 
 // shared/package-runtime/navigation.ts
-import { useEffect as useEffect19, useRef as useRef26, useState as useState26 } from "react";
+import { useEffect as useEffect20, useRef as useRef28, useState as useState26 } from "react";
 function useInitialTab(value, candidate, change) {
-  const requested = useRef26(/* @__PURE__ */ new Set());
-  useEffect19(() => {
+  const requested = useRef28(/* @__PURE__ */ new Set());
+  useEffect20(() => {
     if (value !== "") {
       requested.current.clear();
       return;
@@ -6170,7 +6299,7 @@ function useInitialTab(value, candidate, change) {
 }
 function useAccordionState(multiple) {
   const [opened, setOpened] = useState26(/* @__PURE__ */ new Set());
-  useEffect19(() => {
+  useEffect20(() => {
     if (!multiple) setOpened((previous) => previous.size > 1 ? new Set([...previous].slice(-1)) : previous);
   }, [multiple]);
   return {
@@ -6198,19 +6327,20 @@ import {
   Fragment as Fragment12,
   createContext as createContext20,
   useContext as useContext16,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useId as useId7,
+  useRef as useRef31,
   useState as useState28
 } from "react";
 import { Animated as Animated16, View as View30, useWindowDimensions as useWindowDimensions5, Platform as Platform22 } from "react-native";
 
 // packages/native/src/tabs.tsx
-import { tokens as tokens33 } from "@kjun-ui/tokens";
-import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback5, useLayoutEffect as useLayoutEffect15, useRef as useRef28, useId as useId6, useState as useState27 } from "react";
+import { tokens as tokens34 } from "@kjun-ui/tokens";
+import { Children as Children4, createContext as createContext19, isValidElement as isValidElement7, useContext as useContext15, useCallback as useCallback6, useLayoutEffect as useLayoutEffect15, useRef as useRef30, useId as useId6, useState as useState27 } from "react";
 import { Animated as Animated15, Platform as Platform21, ScrollView as ScrollView5, View as View29 } from "react-native";
 
 // packages/native/src/tabs-accessibility.web.ts
-import { useLayoutEffect as useLayoutEffect14, useRef as useRef27 } from "react";
+import { useLayoutEffect as useLayoutEffect14, useRef as useRef29 } from "react";
 
 // shared/package-runtime/tab-keyboard.ts
 function manageTabList(list, select, keyboard = true) {
@@ -6293,7 +6423,7 @@ function panelNeedsFocus(panel) {
 
 // packages/native/src/tabs-accessibility.web.ts
 function useTabKeyboard(root, select) {
-  const callback = useRef27(select);
+  const callback = useRef29(select);
   callback.current = select;
   useLayoutEffect14(() => {
     var _a;
@@ -6330,29 +6460,29 @@ function KjunTabs({
     isValidElement7
   );
   const tabs = items2.length ? items2 : panes.filter((child) => child.type === KjunTabPane).map((child) => child.props);
-  const id = "kjun-" + useId6(), root = useRef28(null);
-  const menuState = useRef28({ tabs, onTabMenu });
+  const id = "kjun-" + useId6(), root = useRef30(null);
+  const menuState = useRef30({ tabs, onTabMenu });
   menuState.current = { tabs, onTabMenu };
-  const pressedMenu = useRef28(null);
+  const pressedMenu = useRef30(null);
   useLayoutEffect15(() => {
     if (!onTabMenu || !tabs.some((tab) => tab.name === pressedMenu.current && !tab.disabled)) pressedMenu.current = null;
   }, [tabs, onTabMenu]);
   const panelNames = panes.filter((child) => child.type === KjunTabPane).map((child) => child.props.name);
-  const geometry2 = tokens33.extensions.tabs;
+  const geometry2 = tokens34.extensions.tabs;
   const underline = variant === "underline";
   const [hoveredTab, setHoveredTab] = useState27(null);
   const singleLine = Platform21.OS === "web" ? { whiteSpace: "nowrap" } : {};
   const paddingX = !underline ? geometry2.pillsPaddingX : density === "compact" ? geometry2.compactPaddingX : geometry2.paddingX;
   const height = density === "compact" ? geometry2.compactHeight : geometry2.height;
-  const ringRoom = tokens33.states.focus.width + tokens33.states.focus.offset;
-  const slop = Math.max(0, (tokens33.native.minimumTouchTarget - height) / 2);
+  const ringRoom = tokens34.states.focus.width + tokens34.states.focus.offset;
+  const slop = Math.max(0, (tokens34.native.minimumTouchTarget - height) / 2);
   const roomX = underline ? ringRoom : 0, roomY = Math.max(underline ? ringRoom : 0, slop);
   const selectedTab = tabs.find((tab) => tab.name === value);
   const selection = useButtonGroupMotion(selectedTab ? { ...selectedTab, value: selectedTab.name } : void 0);
-  const tabRefs = useRef28(/* @__PURE__ */ new Map());
+  const tabRefs = useRef30(/* @__PURE__ */ new Map());
   const { updateLayout } = selection;
   const firstName = (_a = tabs[0]) == null ? void 0 : _a.name;
-  const measureIndicator = useCallback5((name, box) => {
+  const measureIndicator = useCallback6((name, box) => {
     const left = underline && name === firstName ? 0 : paddingX;
     updateLayout(name, underline ? {
       x: box.x + left,
@@ -6404,7 +6534,7 @@ function KjunTabs({
                 transform: [{ translateX: selection.x }],
                 borderRadius: underline ? geometry2.indicatorHeight / 2 : geometry2.radius,
                 backgroundColor: variant === "underline" ? colors.brand : colors.active,
-                opacity: (selectedTab == null ? void 0 : selectedTab.disabled) ? tokens33.states.opacity.disabled : 1
+                opacity: (selectedTab == null ? void 0 : selectedTab.disabled) ? tokens34.states.opacity.disabled : 1
               }
             }
           ),
@@ -6464,7 +6594,7 @@ function KjunTabs({
                   borderRadius: geometry2.radius,
                   // Pills answer hover with the hover surface, like ButtonGroup and Web.
                   backgroundColor: !underline && !active && !tab.disabled && hoveredTab === tab.name ? colors.hover : void 0,
-                  opacity: tab.disabled ? tokens33.states.opacity.disabled : 1
+                  opacity: tab.disabled ? tokens34.states.opacity.disabled : 1
                 },
                 children: [
                   !!tab.icon && /* @__PURE__ */ jsx36(
@@ -6521,7 +6651,7 @@ function KjunTabs({
 }
 function KjunTabPane({ name, children }) {
   const { value, id, names } = useContext15(TabContext);
-  const root = useRef28(null);
+  const root = useRef30(null);
   usePanelFocus(root);
   const hidden = value !== name;
   return /* @__PURE__ */ jsx36(
@@ -6559,7 +6689,7 @@ function KjunAccordion({
         View30,
         {
           style: {
-            borderRadius: tokens34.extensions.accordion.radius,
+            borderRadius: tokens35.extensions.accordion.radius,
             overflow: "hidden",
             backgroundColor: tone === "muted" ? colors.secondary : colors.surface
           },
@@ -6574,14 +6704,32 @@ function KjunAccordionItem({
   defaultOpen = false,
   disabled = false,
   header,
+  open: openProp,
+  onOpenChange,
+  keepMounted = false,
   children
 }) {
-  const { colors } = useKjunStyles(), group = useContext16(AccordionContext), id = "kjun-" + useId7(), [own, setOwn] = useState28(defaultOpen), open = group ? group.opened.has(id) : own;
-  const rotation = useMotionValue(open ? 1 : 0, tokens34.motion.collapse, void 0, void 0, true);
-  const geometry2 = tokens34.extensions.accordion;
+  const controlled = openProp !== void 0, context = useContext16(AccordionContext), { colors } = useKjunStyles(), group = controlled ? null : context, id = "kjun-" + useId7(), [own, setOwn] = useState28(defaultOpen), open = controlled ? openProp : group ? group.opened.has(id) : own;
+  const reported = useRef31(open), notify = useRef31(onOpenChange), registering = useRef31(!!group && defaultOpen);
+  notify.current = onOpenChange;
+  useEffect21(() => {
+    var _a;
+    if (registering.current) {
+      if (open) {
+        registering.current = false;
+        reported.current = open;
+      }
+      return;
+    }
+    if (controlled || reported.current === open) return;
+    reported.current = open;
+    (_a = notify.current) == null ? void 0 : _a.call(notify, open);
+  }, [open, controlled]);
+  const rotation = useMotionValue(open ? 1 : 0, tokens35.motion.collapse, void 0, void 0, true);
+  const geometry2 = tokens35.extensions.accordion;
   const [hovered, setHovered] = useState28(false);
   const wrapping = Platform22.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
-  useEffect20(() => {
+  useEffect21(() => {
     return group == null ? void 0 : group.register(id, defaultOpen);
   }, []);
   return /* @__PURE__ */ jsxs23(View30, { children: [
@@ -6591,11 +6739,14 @@ function KjunAccordionItem({
         nativeID: id + "-heading",
         accessibilityRole: "button",
         focusRingInset: true,
-        focusRingRadius: tokens34.extensions.accordion.radius,
+        focusRingRadius: tokens35.extensions.accordion.radius,
         accessibilityLabel: title,
         accessibilityState: { expanded: open, disabled },
         disabled,
-        onPress: () => group ? group.toggle(id) : setOwn(!own),
+        onPress: () => {
+          registering.current = false;
+          controlled ? onOpenChange == null ? void 0 : onOpenChange(!open) : group ? group.toggle(id) : setOwn(!own);
+        },
         onHoverIn: () => setHovered(true),
         onHoverOut: () => setHovered(false),
         style: ({ pressed }) => ({
@@ -6607,7 +6758,7 @@ function KjunAccordionItem({
           paddingVertical: geometry2.headerPaddingY,
           paddingHorizontal: geometry2.paddingX,
           backgroundColor: !disabled && (pressed || hovered) ? colors.hover : void 0,
-          opacity: disabled ? tokens34.states.opacity.disabled : 1
+          opacity: disabled ? tokens35.states.opacity.disabled : 1
         }),
         children: [
           /* @__PURE__ */ jsx37(View30, { style: { flex: 1, minWidth: 0 }, children: content(header || title, { ...typeStyle("control"), ...wrapping }) }),
@@ -6615,7 +6766,7 @@ function KjunAccordionItem({
         ]
       }
     ),
-    /* @__PURE__ */ jsx37(Collapse, { open, children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx37(Collapse, { open, keepMounted, children: /* @__PURE__ */ jsx37(
       View30,
       {
         nativeID: id + "-panel",
@@ -6642,11 +6793,11 @@ function KjunBreadcrumb({
         flexDirection: "row",
         alignItems: "center",
         flexWrap: "wrap",
-        gap: tokens34.dimension.value8
+        gap: tokens35.dimension.value8
       },
       children: items2.map((item, i) => {
-        const label = /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens34.dimension.value4 }, children: [
-          !!item.icon && /* @__PURE__ */ jsx37(KjunIcon, { name: item.icon, size: tokens34.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
+        const label = /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens35.dimension.value4 }, children: [
+          !!item.icon && /* @__PURE__ */ jsx37(KjunIcon, { name: item.icon, size: tokens35.extensions.breadcrumb.iconSize, color: colors.textSecondary }),
           /* @__PURE__ */ jsx37(
             KText,
             {
@@ -6663,7 +6814,7 @@ function KjunBreadcrumb({
             KjunIcon,
             {
               name: "chevron-right",
-              size: tokens34.extensions.breadcrumb.separatorSize,
+              size: tokens35.extensions.breadcrumb.separatorSize,
               color: colors.textTertiary
             }
           ),
@@ -6673,7 +6824,7 @@ function KjunBreadcrumb({
             {
               accessibilityRole: "link",
               onPress: () => onNavigate == null ? void 0 : onNavigate(item),
-              style: { minHeight: tokens34.native.minimumTouchTarget, justifyContent: "center" },
+              style: { minHeight: tokens35.native.minimumTouchTarget, justifyContent: "center" },
               children: label
             }
           ) : label
@@ -6702,7 +6853,7 @@ function KjunPagination({
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), window2 = useWindowDimensions5(), current = Math.max(1, Math.min(totalPages, (_a = currentPage != null ? currentPage : page) != null ? _a : 1));
   if (totalPages <= 1 && !showSizeSelector && !(showInfo && totalRows > 0)) return null;
-  const compact = window2.width < tokens34.responsive.pagination;
+  const compact = window2.width < tokens35.responsive.pagination;
   const change = (v) => {
     if (v < 1 || v > totalPages || v === current) return;
     onPageChange == null ? void 0 : onPageChange(v);
@@ -6718,12 +6869,12 @@ function KjunPagination({
   ]);
   const pages = [...visible].sort((a, b) => a - b).flatMap((v, i, all) => i && v - all[i - 1] > 1 ? ["...", v] : [v]);
   const pageButtonStyle = {
-    width: Math.max(tokens34.extensions.pagination.itemSize, tokens34.native.minimumTouchTarget),
-    height: Math.max(tokens34.extensions.pagination.itemSize, tokens34.native.minimumTouchTarget),
-    borderRadius: tokens34.extensions.pagination.radius,
+    width: Math.max(tokens35.extensions.pagination.itemSize, tokens35.native.minimumTouchTarget),
+    height: Math.max(tokens35.extensions.pagination.itemSize, tokens35.native.minimumTouchTarget),
+    borderRadius: tokens35.extensions.pagination.radius,
     paddingHorizontal: 0
   };
-  const arrowSize = (_b = Object.keys(tokens34.button.iconSizes).find((size) => tokens34.button.iconSizes[size] === tokens34.extensions.pagination.iconSize)) != null ? _b : "sm";
+  const arrowSize = (_b = Object.keys(tokens35.button.iconSizes).find((size) => tokens35.button.iconSizes[size] === tokens35.extensions.pagination.iconSize)) != null ? _b : "sm";
   const button = (target, label, icon) => /* @__PURE__ */ jsx37(
     KjunButton,
     {
@@ -6744,9 +6895,9 @@ function KjunPagination({
         flexDirection: compact ? "column" : "row",
         alignItems: compact ? "stretch" : "center",
         justifyContent: "space-between",
-        gap: tokens34.extensions.pagination.gap,
-        padding: tokens34.extensions.pagination.padding,
-        borderTopWidth: tokens34.border.defaultWidth,
+        gap: tokens35.extensions.pagination.gap,
+        padding: tokens35.extensions.pagination.padding,
+        borderTopWidth: tokens35.border.defaultWidth,
         borderTopColor: colors.border
       },
       children: [
@@ -6757,11 +6908,11 @@ function KjunPagination({
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens34.extensions.pagination.itemGap,
+              gap: tokens35.extensions.pagination.itemGap,
               flexWrap: "wrap"
             },
             children: [
-              showSizeSelector && /* @__PURE__ */ jsx37(View30, { style: { minWidth: tokens34.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx37(
+              showSizeSelector && /* @__PURE__ */ jsx37(View30, { style: { minWidth: tokens35.extensions.pagination.selectorMinimumWidth }, children: /* @__PURE__ */ jsx37(
                 KjunSelect,
                 {
                   size: "sm",
@@ -6778,10 +6929,10 @@ function KjunPagination({
                   }
                 }
               ) }),
-              totalPages > 1 && /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens34.extensions.pagination.itemGap, marginLeft: compact ? "auto" : void 0 }, children: [
+              totalPages > 1 && /* @__PURE__ */ jsxs23(View30, { style: { flexDirection: "row", alignItems: "center", gap: tokens35.extensions.pagination.itemGap, marginLeft: compact ? "auto" : void 0 }, children: [
                 !compact && showFirstLast && button(1, m.firstPage, "chevrons-left"),
                 button(current - 1, m.previousPage, "chevron-left"),
-                compact ? /* @__PURE__ */ jsxs23(KText, { style: { paddingHorizontal: tokens34.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
+                compact ? /* @__PURE__ */ jsxs23(KText, { style: { paddingHorizontal: tokens35.extensions.pagination.labelPaddingX, color: colors.text, fontVariant: ["tabular-nums"] }, children: [
                   /* @__PURE__ */ jsx37(KText, { style: { fontWeight: typeStyle("control").fontWeight }, children: current }),
                   " / ",
                   totalPages
@@ -6811,8 +6962,8 @@ function KjunPagination({
 }
 
 // packages/native/src/actions.tsx
-import { tokens as tokens35 } from "@kjun-ui/tokens";
-import { useContext as useContext17, useEffect as useEffect21, useRef as useRef29, useState as useState29 } from "react";
+import { tokens as tokens36 } from "@kjun-ui/tokens";
+import { useContext as useContext17, useEffect as useEffect22, useRef as useRef32, useState as useState29 } from "react";
 import { Platform as Platform23, ScrollView as ScrollView7, View as View31 } from "react-native";
 import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 function KjunIconToggle({
@@ -6832,7 +6983,7 @@ function KjunIconToggle({
 }) {
   const { colors } = useKjunStyles();
   const navigation = useContext17(TopNavigationContext);
-  const box = navigation ? navigation.controlSize : size === "xs" ? tokens35.extensions.iconToggle.compactSize : tokens35.extensions.iconToggle.sizes[size];
+  const box = navigation ? navigation.controlSize : size === "xs" ? tokens36.extensions.iconToggle.compactSize : tokens36.extensions.iconToggle.sizes[size];
   return /* @__PURE__ */ jsx38(KjunTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ jsx38(
     AccessiblePressable,
     {
@@ -6858,24 +7009,24 @@ function KjunIconToggle({
         ...Platform23.OS === "web" ? { pointerEvents: "auto" } : {},
         // The touch target stays 44pt; the visible square follows the icon-toggle scale.
         alignSelf: "flex-start",
-        minWidth: Math.max(tokens35.native.minimumTouchTarget, box),
-        minHeight: Math.max(tokens35.native.minimumTouchTarget, box),
+        minWidth: Math.max(tokens36.native.minimumTouchTarget, box),
+        minHeight: Math.max(tokens36.native.minimumTouchTarget, box),
         alignItems: "center",
         justifyContent: "center",
         ...navigation ? { width: navigation.controlSize, height: navigation.controlSize, flexShrink: 0 } : {},
-        borderRadius: tokens35.extensions.iconToggle.radii[size],
+        borderRadius: tokens36.extensions.iconToggle.radii[size],
         // Loading blocks presses but stays legible; only disabled dims.
-        opacity: disabled ? tokens35.states.opacity.disabled : 1,
+        opacity: disabled ? tokens36.states.opacity.disabled : 1,
         transform: [{ scale: pressed ? 0.94 : 1 }]
       }),
       children: ({ pressed, hovered }) => {
         var _a;
-        return /* @__PURE__ */ jsx38(View31, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens35.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx38(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx38(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ jsx38(
+        return /* @__PURE__ */ jsx38(View31, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", borderRadius: tokens36.extensions.iconToggle.radii[size], backgroundColor: !disabled && !loading && (pressed || hovered) ? colors.hover : "transparent" }, children: loading ? navigation ? /* @__PURE__ */ jsx38(KjunIcon, { name: "loader-2", spin: true, size: navigation.iconSize }) : /* @__PURE__ */ jsx38(KjunSpinner, { size: "sm" }) : /* @__PURE__ */ jsx38(
           KjunIcon,
           {
             name: active ? activeIcon : inactiveIcon || activeIcon,
             filled: active,
-            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : tokens35.button.iconSizes[size],
+            size: (_a = navigation == null ? void 0 : navigation.iconSize) != null ? _a : tokens36.button.iconSizes[size],
             color: active ? activeColor != null ? activeColor : colors.brand : hovered && !disabled && !loading ? colors.textSecondary : inactiveColor != null ? inactiveColor : colors.textTertiary
           }
         ) });
@@ -6897,8 +7048,8 @@ function KjunCopyButton({
 }) {
   const m = useKjunMessages();
   successText != null ? successText : successText = m.copied;
-  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = useState29(false), [failed, setFailed] = useState29(false), busy = useRef29(false), timer = useRef29(void 0), mounted = useRef29(true);
-  useEffect21(() => {
+  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = useState29(false), [failed, setFailed] = useState29(false), busy = useRef32(false), timer = useRef32(void 0), mounted = useRef32(true);
+  useEffect22(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -6936,24 +7087,24 @@ function KjunCopyButton({
       },
       style: ({ pressed }) => ({
         alignSelf: "flex-start",
-        minWidth: tokens35.native.minimumTouchTarget,
-        minHeight: tokens35.native.minimumTouchTarget,
+        minWidth: tokens36.native.minimumTouchTarget,
+        minHeight: tokens36.native.minimumTouchTarget,
         alignItems: "center",
         justifyContent: "center",
         flexDirection: "row",
-        gap: tokens35.dimension.value6,
-        paddingHorizontal: { xs: tokens35.dimension.value2, sm: tokens35.dimension.value8, md: tokens35.dimension.value12 }[size],
-        paddingVertical: { xs: tokens35.dimension.value2, sm: tokens35.dimension.value4, md: tokens35.dimension.value6 }[size],
-        borderRadius: tokens35.radius.radius6,
+        gap: tokens36.dimension.value6,
+        paddingHorizontal: { xs: tokens36.dimension.value2, sm: tokens36.dimension.value8, md: tokens36.dimension.value12 }[size],
+        paddingVertical: { xs: tokens36.dimension.value2, sm: tokens36.dimension.value4, md: tokens36.dimension.value6 }[size],
+        borderRadius: tokens36.radius.radius6,
         backgroundColor: pressed && !inline ? colors.hover : void 0,
-        opacity: disabled ? tokens35.states.opacity.disabled : 1
+        opacity: disabled ? tokens36.states.opacity.disabled : 1
       }),
       children: [
         /* @__PURE__ */ jsx38(
           KjunIcon,
           {
             name: copied ? "check" : "copy",
-            size: tokens35.button.iconSizes[size],
+            size: tokens36.button.iconSizes[size],
             color: copied ? colors.success : colors.textSecondary
           }
         ),
@@ -7028,12 +7179,12 @@ function KjunExternalLink({
       accessibilityRole: "link",
       accessibilityLabel: name ? name + m.newWindow : void 0,
       onPress: () => openUrl(url),
-      style: { alignSelf: "flex-start", minHeight: tokens35.native.minimumTouchTarget, justifyContent: "center" },
+      style: { alignSelf: "flex-start", minHeight: tokens36.native.minimumTouchTarget, justifyContent: "center" },
       children: mode === "text" ? (
         // Like Web, text links show the new-window cue after the text.
-        /* @__PURE__ */ jsxs24(View31, { style: { flexDirection: "row", alignItems: "center", gap: tokens35.dimension.value4 }, children: [
+        /* @__PURE__ */ jsxs24(View31, { style: { flexDirection: "row", alignItems: "center", gap: tokens36.dimension.value4 }, children: [
           body,
-          /* @__PURE__ */ jsx38(KjunIcon, { name: "external-link", size: tokens35.iconSizes.small, color: colors.text })
+          /* @__PURE__ */ jsx38(KjunIcon, { name: "external-link", size: tokens36.iconSizes.small, color: colors.text })
         ] })
       ) : body
     }
@@ -7053,7 +7204,7 @@ function KjunScrollFade({ children }) {
 
 // packages/native/src/data-state.tsx
 import {
-  tokens as tokens36,
+  tokens as tokens37,
   advanceQueryDisplay,
   initialQueryDisplay,
   queryDisplayStatus
@@ -7062,10 +7213,10 @@ import { Component, useState as useState31 } from "react";
 import { Platform as Platform24, View as View32 } from "react-native";
 
 // shared/package-runtime/use-loading-reveal.ts
-import { useEffect as useEffect22, useState as useState30 } from "react";
+import { useEffect as useEffect23, useState as useState30 } from "react";
 function useLoadingReveal(active, delay = 0) {
   const [revealed, setRevealed] = useState30(false);
-  useEffect22(() => {
+  useEffect23(() => {
     setRevealed(false);
     if (!active || delay <= 0) return;
     const timer = setTimeout(() => setRevealed(true), delay);
@@ -7116,7 +7267,7 @@ function KjunDataState({
   emptyText != null ? emptyText : emptyText = m.noData;
   loadingText != null ? loadingText : loadingText = m.loadingEllipsis;
   retryText != null ? retryText : retryText = m.retry;
-  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens36.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
+  const state = useQueryDisplay(query), blockingError = query.error && !(state.usesQueryState && state.hasCurrentResult), visibleRefreshError = refreshError || (state.usesQueryState && state.hasCurrentResult ? query.error : null), concealed = state.initialLoading || !!blockingError || empty, padding = tokens37.extensions.state.padding[size], revealed = useLoadingReveal(state.initialLoading, loadingDelay);
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ jsxs25(
     View32,
@@ -7131,13 +7282,13 @@ function KjunDataState({
             style: {
               alignSelf: "flex-end",
               maxWidth: "100%",
-              marginBottom: tokens36.dimension.value12,
+              marginBottom: tokens37.dimension.value12,
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens36.dimension.value6,
-              paddingVertical: tokens36.dimension.value4,
-              paddingHorizontal: tokens36.dimension.value8,
-              borderRadius: tokens36.radius.radius12,
+              gap: tokens37.dimension.value6,
+              paddingVertical: tokens37.dimension.value4,
+              paddingHorizontal: tokens37.dimension.value8,
+              borderRadius: tokens37.radius.radius12,
               backgroundColor: colors.surface
             },
             children: [
@@ -7153,7 +7304,7 @@ function KjunDataState({
             "aria-hidden": revealed ? void 0 : true,
             importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
             style: { paddingVertical: loadingPadding === "none" ? 0 : padding, opacity: revealed ? void 0 : 0 },
-            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx39(View32, { style: { gap: tokens36.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx39(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs25(View32, { style: { alignItems: "center", gap: tokens36.dimension.value12 }, children: [
+            children: loadingContent || (skeleton ? /* @__PURE__ */ jsx39(View32, { style: { gap: tokens37.dimension.value12 }, children: Array.from({ length: skeletonCount }, (_, i) => /* @__PURE__ */ jsx39(KjunSkeleton, { type: skeletonType }, i)) }) : /* @__PURE__ */ jsxs25(View32, { style: { alignItems: "center", gap: tokens37.dimension.value12 }, children: [
               /* @__PURE__ */ jsx39(KjunSpinner, { size: "md" }),
               /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
             ] }))
@@ -7172,12 +7323,12 @@ function KjunDataState({
               right: 0,
               opacity: 0,
               ...Platform24.OS === "web" ? { visibility: "hidden" } : {}
-            } : { opacity: query.loading && !state.usesQueryState ? tokens36.states.opacity.pending : 1 },
+            } : { opacity: query.loading && !state.usesQueryState ? tokens37.states.opacity.pending : 1 },
             children: content(children)
           },
           "content"
         ),
-        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx39(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx39(View32, { style: { marginTop: tokens36.dimension.value12 }, children: /* @__PURE__ */ jsx39(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx39(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
+        visibleRefreshError && !state.initialLoading && /* @__PURE__ */ jsx39(DataStateContentContext.Provider, { value: "message", children: /* @__PURE__ */ jsx39(View32, { style: { marginTop: tokens37.dimension.value12 }, children: /* @__PURE__ */ jsx39(KjunAlert, { type: "warning", size: "sm", actions: onRetry && /* @__PURE__ */ jsx39(KjunButton, { variant: "secondary", onPress: onRetry, children: retryText }), children: m.refreshError(String(visibleRefreshError)) }) }) })
       ]
     }
   );
@@ -7185,7 +7336,7 @@ function KjunDataState({
 function BoundaryDescription() {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens36.typography.caption, fontSizePx: tokens36.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
+  return /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens37.typography.caption, fontSizePx: tokens37.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
 }
 var KjunErrorBoundary = class extends Component {
   constructor() {
@@ -7205,13 +7356,13 @@ var KjunErrorBoundary = class extends Component {
       {
         style: {
           alignItems: "center",
-          paddingVertical: tokens36.dimension.value64,
-          paddingHorizontal: tokens36.dimension.value24,
-          gap: tokens36.dimension.value16
+          paddingVertical: tokens37.dimension.value64,
+          paddingHorizontal: tokens37.dimension.value24,
+          gap: tokens37.dimension.value16
         },
         children: [
-          /* @__PURE__ */ jsxs25(View32, { style: { gap: tokens36.dimension.value8, alignItems: "center" }, children: [
-            /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens36.typography.sectionTitle, fontSizePx: tokens36.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
+          /* @__PURE__ */ jsxs25(View32, { style: { gap: tokens37.dimension.value8, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx39(KText, { style: { ...typeStyle({ ...tokens37.typography.sectionTitle, fontSizePx: tokens37.extensions.state.titleSize }), textAlign: "center" }, children: this.props.fallbackMessage || this.context.messages.somethingWentWrong }),
             /* @__PURE__ */ jsx39(BoundaryDescription, {})
           ] }),
           /* @__PURE__ */ jsx39(
@@ -7234,8 +7385,8 @@ var KjunErrorBoundary = class extends Component {
 KjunErrorBoundary.contextType = KjunMessageContext;
 
 // packages/native/src/skeletons.tsx
-import { tokens as tokens40 } from "@kjun-ui/tokens";
-import { useEffect as useEffect23, useRef as useRef30, useState as useState33 } from "react";
+import { tokens as tokens41 } from "@kjun-ui/tokens";
+import { useEffect as useEffect24, useRef as useRef33, useState as useState33 } from "react";
 import { Animated as Animated17, Platform as Platform25, View as View34, useWindowDimensions as useWindowDimensions6 } from "react-native";
 import Svg5, { Path as Path4 } from "react-native-svg";
 
@@ -7258,12 +7409,12 @@ function chartSkeletonKind(kind) {
 }
 
 // packages/native/src/market-skeleton.tsx
-import { tokens as tokens39 } from "@kjun-ui/tokens";
+import { tokens as tokens40 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView8, View as View33 } from "react-native";
 
 // shared/package-runtime/market-layout.ts
-import { tokens as tokens37 } from "@kjun-ui/tokens";
-var marketGeometry = tokens37.extensions.marketTable;
+import { tokens as tokens38 } from "@kjun-ui/tokens";
+var marketGeometry = tokens38.extensions.marketTable;
 var isMarketIdentity = (key) => ["stock_name", "name", "symbol"].includes(key || "");
 var normalizeMarketColumns = (columns) => columns.map((column) => typeof column === "string" ? { key: column, label: column } : column);
 var defaultWidth = (column) => isMarketIdentity(column.key) ? marketGeometry.identityWidth : marketGeometry.columnWidth;
@@ -7281,33 +7432,33 @@ function nativeMarketLayout(columns, showActions, containerWidth) {
 }
 
 // packages/native/src/market-layout.ts
-import { tokens as tokens38 } from "@kjun-ui/tokens";
+import { tokens as tokens39 } from "@kjun-ui/tokens";
 import { useState as useState32 } from "react";
 function useMarketLayout(columns, showActions) {
   const [containerWidth, setContainerWidth] = useState32(0);
   const onLayout = (event) => setContainerWidth(event.nativeEvent.layout.width);
   return { ...nativeMarketLayout(columns, showActions, containerWidth), onLayout };
 }
-var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: tokens38.border.defaultWidth };
-var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: tokens38.border.defaultWidth };
+var marketHeaderStyle = { minHeight: marketGeometry.headerHeight, flexDirection: "row", borderBottomWidth: tokens39.border.defaultWidth };
+var marketRowStyle = { minHeight: marketGeometry.rowHeight, flexDirection: "row", borderBottomWidth: tokens39.border.defaultWidth };
 
 // packages/native/src/market-skeleton.tsx
 import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 function KjunMarketTableSkeleton({ columns = [], rows = 8, showActions = false }) {
   const { colors } = useKjunStyles();
   const cols = normalizeMarketColumns(columns), layout = useMarketLayout(cols, showActions);
-  const actions = { width: marketGeometry.actionsWidth, paddingVertical: tokens39.dimension.value12, paddingHorizontal: tokens39.dimension.value4, justifyContent: "center", alignItems: "center" };
+  const actions = { width: marketGeometry.actionsWidth, paddingVertical: tokens40.dimension.value12, paddingHorizontal: tokens40.dimension.value4, justifyContent: "center", alignItems: "center" };
   return /* @__PURE__ */ jsx40(ScrollView8, { horizontal: true, onLayout: layout.onLayout, accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: /* @__PURE__ */ jsxs26(View33, { style: { width: layout.width }, children: [
     /* @__PURE__ */ jsxs26(View33, { style: { ...marketHeaderStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.marketTable.actionSkeletonWidth, height: tokens39.extensions.marketTable.headerSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], padding: tokens39.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
+      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens40.extensions.marketTable.actionSkeletonWidth, height: tokens40.extensions.marketTable.headerSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], padding: tokens40.dimension.value12, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KText, { style: { ...typeStyle("meta"), color: colors.textTertiary, textAlign: col.align }, children: col.label }) }, col.key || i))
     ] }),
     Array.from({ length: Math.max(0, rows) }, (_, row) => /* @__PURE__ */ jsxs26(View33, { style: { ...marketRowStyle, borderBottomColor: colors.border }, children: [
-      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.marketTable.actionSkeletonWidth, height: tokens39.extensions.financial.priceSkeletonHeight }) }),
-      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], paddingVertical: tokens39.dimension.value14, paddingHorizontal: tokens39.dimension.value12, justifyContent: "center", alignItems: isMarketIdentity(col.key) ? void 0 : col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start" }, children: isMarketIdentity(col.key) ? /* @__PURE__ */ jsxs26(View33, { style: { gap: tokens39.dimension.value2 }, children: [
-        /* @__PURE__ */ jsx40(View33, { style: { height: tokens39.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "80%", height: tokens39.extensions.skeleton.lineHeights.md }) }),
-        /* @__PURE__ */ jsx40(View33, { style: { height: tokens39.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "60%", height: tokens39.extensions.skeleton.lineHeights.sm }) })
-      ] }) : /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens39.extensions.financial.priceSkeletonWidth, height: tokens39.extensions.financial.priceSkeletonHeight }) }, col.key || i))
+      showActions && /* @__PURE__ */ jsx40(View33, { style: actions, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens40.extensions.marketTable.actionSkeletonWidth, height: tokens40.extensions.financial.priceSkeletonHeight }) }),
+      cols.map((col, i) => /* @__PURE__ */ jsx40(View33, { style: { width: layout.widths[i], paddingVertical: tokens40.dimension.value14, paddingHorizontal: tokens40.dimension.value12, justifyContent: "center", alignItems: isMarketIdentity(col.key) ? void 0 : col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start" }, children: isMarketIdentity(col.key) ? /* @__PURE__ */ jsxs26(View33, { style: { gap: tokens40.dimension.value2 }, children: [
+        /* @__PURE__ */ jsx40(View33, { style: { height: tokens40.typography.body.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "80%", height: tokens40.extensions.skeleton.lineHeights.md }) }),
+        /* @__PURE__ */ jsx40(View33, { style: { height: tokens40.typography.caption.lineHeightPx, justifyContent: "center" }, children: /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: "60%", height: tokens40.extensions.skeleton.lineHeights.sm }) })
+      ] }) : /* @__PURE__ */ jsx40(KjunSkeleton, { type: "block", width: tokens40.extensions.financial.priceSkeletonWidth, height: tokens40.extensions.financial.priceSkeletonHeight }) }, col.key || i))
     ] }, row))
   ] }) });
 }
@@ -7318,11 +7469,11 @@ function KjunListSkeleton({
   rows = 8,
   variant = "market",
   avatar = true,
-  avatarSize = tokens40.extensions.skeleton.listAvatarSize,
+  avatarSize = tokens41.extensions.skeleton.listAvatarSize,
   quote = true
 }) {
   const { colors } = useKjunStyles();
-  const market = variant === "market", narrow = useWindowDimensions6().width < tokens40.responsive.market;
+  const market = variant === "market", narrow = useWindowDimensions6().width < tokens41.responsive.market;
   const slots = market ? [typeStyle(narrow ? "input" : "label").lineHeight, typeStyle(narrow ? "body" : "caption").lineHeight] : null;
   const slot = (index, child) => slots ? /* @__PURE__ */ jsx41(View34, { style: { height: slots[index], justifyContent: "center" }, children: child }) : child;
   return /* @__PURE__ */ jsx41(
@@ -7336,29 +7487,29 @@ function KjunListSkeleton({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: tokens40.extensions.skeleton.gap,
-            minHeight: market ? narrow ? tokens40.extensions.marketList.minimumHeight : void 0 : tokens40.extensions.skeleton.listHeights[variant],
-            paddingVertical: market ? narrow ? tokens40.dimension.value14 : tokens40.dimension.value16 : tokens40.extensions.skeleton.list[variant].paddingY,
-            paddingHorizontal: market ? narrow ? tokens40.dimension.value20 : tokens40.dimension.value16 : tokens40.extensions.skeleton.list[variant].paddingX,
-            borderBottomWidth: tokens40.border.defaultWidth,
+            gap: tokens41.extensions.skeleton.gap,
+            minHeight: market ? narrow ? tokens41.extensions.marketList.minimumHeight : void 0 : tokens41.extensions.skeleton.listHeights[variant],
+            paddingVertical: market ? narrow ? tokens41.dimension.value14 : tokens41.dimension.value16 : tokens41.extensions.skeleton.list[variant].paddingY,
+            paddingHorizontal: market ? narrow ? tokens41.dimension.value20 : tokens41.dimension.value16 : tokens41.extensions.skeleton.list[variant].paddingX,
+            borderBottomWidth: tokens41.border.defaultWidth,
             borderBottomColor: colors.border
           },
           children: [
             avatar && /* @__PURE__ */ jsx41(KjunSkeleton, { type: "avatar", width: avatarSize, height: avatarSize }),
-            /* @__PURE__ */ jsxs27(View34, { style: { flex: 1, minWidth: 0, gap: market ? tokens40.dimension.value2 : tokens40.extensions.skeleton.detailGap }, children: [
+            /* @__PURE__ */ jsxs27(View34, { style: { flex: 1, minWidth: 0, gap: market ? tokens41.dimension.value2 : tokens41.extensions.skeleton.detailGap }, children: [
               slot(0, /* @__PURE__ */ jsx41(
                 KjunSkeleton,
                 {
                   type: "block",
-                  height: tokens40.extensions.skeleton.lineHeights.md,
+                  height: tokens41.extensions.skeleton.lineHeights.md,
                   width: i % 2 ? "80%" : "65%"
                 }
               )),
-              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.lineHeights.sm, width: "50%" }))
+              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.lineHeights.sm, width: "50%" }))
             ] }),
-            quote && /* @__PURE__ */ jsxs27(View34, { style: { alignItems: "flex-end", gap: market ? tokens40.dimension.value2 : tokens40.extensions.skeleton.detailGap }, children: [
-              slot(0, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.quoteHeight, width: tokens40.extensions.skeleton.quoteWidth })),
-              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.lineHeights.sm, width: tokens40.extensions.skeleton.detailWidth }))
+            quote && /* @__PURE__ */ jsxs27(View34, { style: { alignItems: "flex-end", gap: market ? tokens41.dimension.value2 : tokens41.extensions.skeleton.detailGap }, children: [
+              slot(0, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.quoteHeight, width: tokens41.extensions.skeleton.quoteWidth })),
+              slot(1, /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.lineHeights.sm, width: tokens41.extensions.skeleton.detailWidth }))
             ] })
           ]
         },
@@ -7375,7 +7526,7 @@ function KjunFormSkeleton({
 }) {
   const { colors } = useKjunStyles();
   const window2 = useWindowDimensions6();
-  const twoColumns = columns === 2 && window2.width >= tokens40.responsive.formColumns;
+  const twoColumns = columns === 2 && window2.width >= tokens41.responsive.formColumns;
   return /* @__PURE__ */ jsx41(
     View34,
     {
@@ -7384,13 +7535,13 @@ function KjunFormSkeleton({
       style: {
         flexDirection: twoColumns ? "row" : "column",
         flexWrap: twoColumns ? "wrap" : "nowrap",
-        gap: tokens40.extensions.skeleton.formGap
+        gap: tokens41.extensions.skeleton.formGap
       },
       children: fields.map((field, i) => /* @__PURE__ */ jsxs27(
         View34,
         {
           style: {
-            gap: tokens40.extensions.skeleton.fieldGap,
+            gap: tokens41.extensions.skeleton.fieldGap,
             minWidth: 0,
             flexBasis: twoColumns ? "45%" : void 0,
             flexGrow: 1
@@ -7398,13 +7549,13 @@ function KjunFormSkeleton({
           children: [
             field ? /* @__PURE__ */ jsx41(KText, { style: { color: colors.text, ...typeStyle("label") }, children: typeof field === "string" ? field : field.label }) : (
               // The bar sits in a label-line slot so the field starts where the real input will.
-              /* @__PURE__ */ jsx41(View34, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens40.extensions.skeleton.formLabelHeight, width: tokens40.extensions.skeleton.formLabelWidth }) })
+              /* @__PURE__ */ jsx41(View34, { style: { height: typeStyle("label").lineHeight, justifyContent: "center" }, children: /* @__PURE__ */ jsx41(KjunSkeleton, { type: "block", height: tokens41.extensions.skeleton.formLabelHeight, width: tokens41.extensions.skeleton.formLabelWidth }) })
             ),
-            /* @__PURE__ */ jsx41(View34, { style: { borderRadius: tokens40.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx41(View34, { style: { borderRadius: tokens41.input[size].radius, overflow: "hidden" }, children: /* @__PURE__ */ jsx41(
               KjunSkeleton,
               {
                 type: "block",
-                height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens40.input[size].lineHeight * 3 + tokens40.input[size].textareaPaddingY * 2 + 2 * tokens40.border.controlWidth : tokens40.input[size].height
+                height: typeof field === "object" && field.height != null ? field.height : multiline ? tokens41.input[size].lineHeight * 3 + tokens41.input[size].textareaPaddingY * 2 + 2 * tokens41.border.controlWidth : tokens41.input[size].height
               }
             ) })
           ]
@@ -7417,7 +7568,7 @@ function KjunFormSkeleton({
 var chartPart = (name) => Platform25.OS === "web" ? { dataSet: { kjunChartPart: name } } : {};
 function KjunChartSkeleton({
   kind: requestedKind = "frame",
-  height = tokens40.extensions.chartSkeleton.height,
+  height = tokens41.extensions.chartSkeleton.height,
   loadingText,
   skeleton = true,
   loadingDelay = 0,
@@ -7426,13 +7577,13 @@ function KjunChartSkeleton({
 }) {
   const m = useKjunMessages();
   loadingText != null ? loadingText : loadingText = m.chartLoading;
-  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef30(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens40.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
-  useEffect23(() => {
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = useRef33(new Animated17.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = useState33(0), thickness = tokens41.extensions.chartSkeleton.donutThickness, boxHeight = typeof height === "number" ? height : measured, hole = boxHeight > 0 ? chartDonutHole(boxHeight, thickness) : void 0, rowCount = chartSkeletonCount(rows), columnCount = chartSkeletonCount(columns), status = revealed && loadingText ? "status" : void 0, hidden = { "aria-hidden": true, importantForAccessibility: "no-hide-descendants" };
+  useEffect24(() => {
     if (reduced || !skeleton) return;
     const loop = Animated17.loop(
       Animated17.sequence([
-        Animated17.timing(opacity, { toValue: 0.55, duration: tokens40.motion.shimmer / 2, useNativeDriver: true }),
-        Animated17.timing(opacity, { toValue: 1, duration: tokens40.motion.shimmer / 2, useNativeDriver: true })
+        Animated17.timing(opacity, { toValue: 0.55, duration: tokens41.motion.shimmer / 2, useNativeDriver: true }),
+        Animated17.timing(opacity, { toValue: 1, duration: tokens41.motion.shimmer / 2, useNativeDriver: true })
       ])
     );
     loop.start();
@@ -7449,7 +7600,7 @@ function KjunChartSkeleton({
       "aria-hidden": revealed ? void 0 : true,
       importantForAccessibility: revealed ? void 0 : "no-hide-descendants",
       ...Platform25.OS === "web" ? { dataSet: { kjunChartKind: kind, skeleton: skeleton ? void 0 : "false" } } : {},
-      children: !skeleton ? /* @__PURE__ */ jsxs27(View34, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: tokens40.dimension.value12 }, children: [
+      children: !skeleton ? /* @__PURE__ */ jsxs27(View34, { ...chartPart("loading"), role: status, style: { alignItems: "center", gap: tokens41.dimension.value12 }, children: [
         /* @__PURE__ */ jsx41(View34, { ...hidden, children: /* @__PURE__ */ jsx41(KjunSpinner, { size: "md" }) }),
         !!loadingText && /* @__PURE__ */ jsx41(KText, { style: { ...typeStyle("body"), color: colors.textSecondary, textAlign: "center", maxWidth: "100%" }, children: loadingText })
       ] }) : /* @__PURE__ */ jsxs27(Fragment13, { children: [
@@ -7458,21 +7609,21 @@ function KjunChartSkeleton({
           {
             ...chartPart("donut"),
             ...hidden,
-            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens40.radius.radius9999 }
+            style: { height: `${chartDonutRatio * 100}%`, aspectRatio: 1, borderWidth: thickness, borderColor: colors.skeleton, borderRadius: tokens41.radius.radius9999 }
           }
-        ) : kind === "matrix" ? /* @__PURE__ */ jsx41(View34, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens40.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx41(View34, { style: { flex: 1, flexDirection: "row", gap: tokens40.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx41(
+        ) : kind === "matrix" ? /* @__PURE__ */ jsx41(View34, { ...chartPart("matrix"), ...hidden, style: { alignSelf: "stretch", flex: 1, gap: tokens41.dimension.value4 }, children: Array.from({ length: rowCount }, (_, row) => /* @__PURE__ */ jsx41(View34, { style: { flex: 1, flexDirection: "row", gap: tokens41.dimension.value4 }, children: Array.from({ length: columnCount }, (_2, column) => /* @__PURE__ */ jsx41(
           View34,
           {
             ...chartPart("cell"),
             style: {
               flex: 1,
-              borderRadius: tokens40.extensions.skeleton.lineRadius,
+              borderRadius: tokens41.extensions.skeleton.lineRadius,
               backgroundColor: colors.skeleton,
-              opacity: chartMatrixMuted(row, column) ? tokens40.states.opacity.pending : 1
+              opacity: chartMatrixMuted(row, column) ? tokens41.states.opacity.pending : 1
             }
           },
           column
-        )) }, row)) }) : /* @__PURE__ */ jsx41(View34, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ jsx41(Svg5, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ jsx41(Path4, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: tokens40.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
+        )) }, row)) }) : /* @__PURE__ */ jsx41(View34, { ...chartPart("plot"), ...hidden, style: { alignSelf: "stretch", flex: 1 }, children: /* @__PURE__ */ jsx41(Svg5, { viewBox: chartFrameViewBox, preserveAspectRatio: "none", width: "100%", height: "100%", children: /* @__PURE__ */ jsx41(Path4, { d: chartFramePath, fill: "none", stroke: colors.chartGrid, strokeWidth: tokens41.border.defaultWidth, vectorEffect: "non-scaling-stroke" }) }) }),
         !!loadingText && /* @__PURE__ */ jsx41(
           View34,
           {
@@ -7486,10 +7637,10 @@ function KjunChartSkeleton({
               {
                 style: {
                   ...typeStyle("body"),
-                  paddingHorizontal: tokens40.dimension.value12,
-                  paddingVertical: tokens40.dimension.value4,
-                  borderRadius: tokens40.radius.radius6,
-                  borderWidth: kind === "donut" ? 0 : tokens40.border.defaultWidth,
+                  paddingHorizontal: tokens41.dimension.value12,
+                  paddingVertical: tokens41.dimension.value4,
+                  borderRadius: tokens41.radius.radius6,
+                  borderWidth: kind === "donut" ? 0 : tokens41.border.defaultWidth,
                   borderColor: colors.chartGrid,
                   backgroundColor: colors.surface,
                   color: colors.textSecondary,
@@ -7507,7 +7658,7 @@ function KjunChartSkeleton({
 }
 
 // packages/native/src/financial-display.tsx
-import { deviationLevel, tokens as tokens43 } from "@kjun-ui/tokens";
+import { deviationLevel, tokens as tokens44 } from "@kjun-ui/tokens";
 import { useId as useId8 } from "react";
 import {
   View as View36
@@ -7522,13 +7673,13 @@ import Svg6, {
 } from "react-native-svg";
 
 // packages/native/src/number-display.tsx
-import { tokens as tokens42 } from "@kjun-ui/tokens";
+import { tokens as tokens43 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/use-number-motion.ts
-import { useLayoutEffect as useLayoutEffect16, useRef as useRef31, useState as useState34 } from "react";
+import { useLayoutEffect as useLayoutEffect16, useRef as useRef34, useState as useState34 } from "react";
 
 // shared/package-runtime/number-motion.ts
-import { tokens as tokens41 } from "@kjun-ui/tokens";
+import { tokens as tokens42 } from "@kjun-ui/tokens";
 function createNumberMotion(apply) {
   let frame = 0, revision = 0, current = 0;
   let previous;
@@ -7559,7 +7710,7 @@ function createNumberMotion(apply) {
       if (from === target) return;
       const tick = (now) => {
         if (version !== revision) return;
-        const progress = Math.min(1, Math.max(0, (now - started) / tokens41.motion.number));
+        const progress = Math.min(1, Math.max(0, (now - started) / tokens42.motion.number));
         show(progress === 1 ? target : from + (target - from) * (1 - Math.pow(1 - progress, 3)));
         if (progress < 1) frame = requestAnimationFrame(tick);
       };
@@ -7572,7 +7723,7 @@ function createNumberMotion(apply) {
 // shared/package-runtime/use-number-motion.ts
 function useNumberMotion(value, animated, fromPrevious, reduced) {
   const [display, setDisplay] = useState34(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
-  const motion = useRef31(null);
+  const motion = useRef34(null);
   if (!motion.current) motion.current = createNumberMotion(setDisplay);
   useLayoutEffect16(() => {
     if (!motion.current) motion.current = createNumberMotion(setDisplay);
@@ -7648,7 +7799,7 @@ function KjunFreshness({
     KjunTooltip,
     {
       content: (source === "close" ? scope.messages.noRealtimeQuote : scope.messages.realtimeDelayed) + (fetchedAt ? " \xB7 " + ((formatter == null ? void 0 : formatter(fetchedAt)) || formatRelativeTime(fetchedAt, void 0, scope)) : ""),
-      children: /* @__PURE__ */ jsx42(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens42.extensions.badge.radius, children: /* @__PURE__ */ jsx42(KjunBadge, { variant: "warning", size: "xs", children: label }) })
+      children: /* @__PURE__ */ jsx42(AccessiblePressable, { accessibilityLabel: label, focusRingRadius: tokens43.extensions.badge.radius, children: /* @__PURE__ */ jsx42(KjunBadge, { variant: "warning", size: "xs", children: label }) })
     }
   ) : null;
 }
@@ -7662,11 +7813,11 @@ function KjunPriceCell({
   fromPrevious = true
 }) {
   const { colors } = useKjunStyles(), quoteType = useContext18(MarketQuoteTypeContext);
-  return value == null ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", height: tokens42.extensions.financial.priceSkeletonHeight, width: tokens42.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs28(View35, { style: { flexDirection: "row", alignItems: "center", gap: tokens42.extensions.financial.affixGap }, children: [
+  return value == null ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", height: tokens43.extensions.financial.priceSkeletonHeight, width: tokens43.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs28(View35, { style: { flexDirection: "row", alignItems: "center", gap: tokens43.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ jsx42(
       View35,
       {
-        style: quoteType ? void 0 : { paddingVertical: tokens42.extensions.financial.pillPaddingY, paddingHorizontal: tokens42.extensions.financial.pillPaddingX, borderRadius: tokens42.radius.radius9999 },
+        style: quoteType ? void 0 : { paddingVertical: tokens43.extensions.financial.pillPaddingY, paddingHorizontal: tokens43.extensions.financial.pillPaddingX, borderRadius: tokens43.radius.radius9999 },
         children: /* @__PURE__ */ jsx42(
           KjunAnimatedNumber,
           {
@@ -7705,14 +7856,14 @@ function KjunSignedValue({
         flexDirection: "row",
         alignItems: "center",
         alignSelf: "flex-start",
-        gap: tokens42.extensions.financial.affixGap,
-        paddingVertical: tone === "pill" ? tokens42.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: tone === "pill" ? tokens42.extensions.financial.pillPaddingX : 0,
-        borderRadius: tokens42.extensions.financial.pillRadius,
+        gap: tokens43.extensions.financial.affixGap,
+        paddingVertical: tone === "pill" ? tokens43.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: tone === "pill" ? tokens43.extensions.financial.pillPaddingX : 0,
+        borderRadius: tokens43.extensions.financial.pillRadius,
         backgroundColor: tone === "pill" && !stale && !loading && n !== null ? domainColor(domainColors, role + "Bg") : void 0
       },
       children: [
-        loading ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", width: tokens42.extensions.financial.signedSkeletonWidth, height: tokens42.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx42(
+        loading ? /* @__PURE__ */ jsx42(KjunSkeleton, { type: "block", width: tokens43.extensions.financial.signedSkeletonWidth, height: tokens43.extensions.financial.signedSkeletonHeight }) : /* @__PURE__ */ jsx42(
           KText,
           {
             style: {
@@ -7734,7 +7885,7 @@ function KjunSignedValue({
 
 // packages/native/src/financial-display.tsx
 import { Fragment as Fragment14, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
-var deviationFill = { neutral: 1, low: tokens43.states.opacity.deviationLow, medium: tokens43.states.opacity.deviationMedium, strong: tokens43.states.opacity.deviationStrong };
+var deviationFill = { neutral: 1, low: tokens44.states.opacity.deviationLow, medium: tokens44.states.opacity.deviationMedium, strong: tokens44.states.opacity.deviationStrong };
 function KjunDeviation({
   value,
   variant = "pill",
@@ -7755,7 +7906,7 @@ function KjunDeviation({
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "flex-end",
-          gap: tokens43.extensions.financial.badgeGap
+          gap: tokens44.extensions.financial.badgeGap
         },
         children: [
           /* @__PURE__ */ jsx43(
@@ -7774,22 +7925,22 @@ function KjunDeviation({
               }, children: label })
             }
           ),
-          !signal && /* @__PURE__ */ jsx43(View36, { style: { width: tokens43.extensions.financial.warningIconSize, flexShrink: 0 } }),
+          !signal && /* @__PURE__ */ jsx43(View36, { style: { width: tokens44.extensions.financial.warningIconSize, flexShrink: 0 } }),
           signal && /* @__PURE__ */ jsx43(Fragment14, { children: /* @__PURE__ */ jsx43(View36, { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx43(KjunTooltip, { content: m.deviationWarning(signalThreshold), children: /* @__PURE__ */ jsx43(
             AccessiblePressable,
             {
               accessibilityRole: "image",
               accessibilityLabel: m.arbitrage,
               focusRingInset: true,
-              focusRingRadius: tokens43.radius.radius4,
+              focusRingRadius: tokens44.radius.radius4,
               style: {
-                width: tokens43.extensions.financial.warningTargetSize,
-                height: tokens43.extensions.financial.warningTargetSize,
-                margin: (tokens43.extensions.financial.warningIconSize - tokens43.extensions.financial.warningTargetSize) / 2,
+                width: tokens44.extensions.financial.warningTargetSize,
+                height: tokens44.extensions.financial.warningTargetSize,
+                margin: (tokens44.extensions.financial.warningIconSize - tokens44.extensions.financial.warningTargetSize) / 2,
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ jsx43(KjunIcon, { name: "alert-triangle", size: tokens43.extensions.financial.warningIconSize, color: colors.warning })
+              children: /* @__PURE__ */ jsx43(KjunIcon, { name: "alert-triangle", size: tokens44.extensions.financial.warningIconSize, color: colors.warning })
             }
           ) }) }) })
         ]
@@ -7801,9 +7952,9 @@ function KjunDeviation({
       style: {
         alignSelf: "flex-start",
         position: "relative",
-        borderRadius: tokens43.extensions.financial.cellRadius,
-        paddingVertical: variant === "pill" ? tokens43.extensions.financial.pillPaddingY : 0,
-        paddingHorizontal: variant === "pill" ? tokens43.extensions.financial.pillPaddingX : 0
+        borderRadius: tokens44.extensions.financial.cellRadius,
+        paddingVertical: variant === "pill" ? tokens44.extensions.financial.pillPaddingY : 0,
+        paddingHorizontal: variant === "pill" ? tokens44.extensions.financial.pillPaddingX : 0
       },
       children: [
         variant === "pill" && /* @__PURE__ */ jsx43(
@@ -7813,7 +7964,7 @@ function KjunDeviation({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: tokens43.extensions.financial.cellRadius,
+              borderRadius: tokens44.extensions.financial.cellRadius,
               backgroundColor: neutral ? colors.secondary : color,
               opacity: deviationFill[level]
             }
@@ -7854,9 +8005,9 @@ function KjunHeatmapCell({
       style: {
         position: "relative",
         alignSelf: "flex-start",
-        paddingVertical: tokens43.extensions.financial.pillPaddingY,
-        paddingHorizontal: tokens43.extensions.financial.pillPaddingX,
-        borderRadius: tokens43.extensions.financial.cellRadius
+        paddingVertical: tokens44.extensions.financial.pillPaddingY,
+        paddingHorizontal: tokens44.extensions.financial.pillPaddingX,
+        borderRadius: tokens44.extensions.financial.cellRadius
       },
       children: [
         /* @__PURE__ */ jsx43(
@@ -7866,10 +8017,10 @@ function KjunHeatmapCell({
             style: {
               position: "absolute",
               inset: 0,
-              borderRadius: tokens43.extensions.financial.cellRadius,
+              borderRadius: tokens44.extensions.financial.cellRadius,
               // A zero cell keeps its shape on the neutral fill; any other value starts from a visible minimum.
               backgroundColor: magnitude ? background : colors.secondary,
-              opacity: magnitude ? tokens43.states.opacity.heatMinimum + (tokens43.states.opacity.heatMaximum - tokens43.states.opacity.heatMinimum) * magnitude : 1
+              opacity: magnitude ? tokens44.states.opacity.heatMinimum + (tokens44.states.opacity.heatMaximum - tokens44.states.opacity.heatMinimum) * magnitude : 1
             }
           }
         ),
@@ -7887,7 +8038,7 @@ function KjunProgressCell({
   showLabel = true,
   color = "auto",
   customColor,
-  height = tokens43.extensions.financial.progressHeight
+  height = tokens44.extensions.financial.progressHeight
 }) {
   const { colors, numericFontFamily, fontFamily } = useKjunStyles(), percent = max > 0 && Number.isFinite(value) ? Math.min(100, Math.max(0, value / max * 100)) : 0, role = color === "auto" ? percent < 30 ? "danger" : percent < 70 ? "warning" : "success" : color;
   return /* @__PURE__ */ jsxs29(
@@ -7896,8 +8047,8 @@ function KjunProgressCell({
       style: {
         flexDirection: "row",
         alignItems: "center",
-        gap: tokens43.extensions.financial.progressGap,
-        minWidth: tokens43.extensions.financial.progressMinimumWidth
+        gap: tokens44.extensions.financial.progressGap,
+        minWidth: tokens44.extensions.financial.progressMinimumWidth
       },
       children: [
         /* @__PURE__ */ jsx43(
@@ -7907,7 +8058,7 @@ function KjunProgressCell({
               height,
               flex: 1,
               backgroundColor: colors.tertiary,
-              borderRadius: tokens43.extensions.financial.progressRadius,
+              borderRadius: tokens44.extensions.financial.progressRadius,
               overflow: "hidden"
             },
             children: /* @__PURE__ */ jsx43(
@@ -7916,7 +8067,7 @@ function KjunProgressCell({
                 style: {
                   width: `${percent}%`,
                   height: "100%",
-                  borderRadius: tokens43.extensions.financial.progressRadius,
+                  borderRadius: tokens44.extensions.financial.progressRadius,
                   backgroundColor: color === "custom" ? customColor : colors[role]
                 }
               }
@@ -7929,7 +8080,7 @@ function KjunProgressCell({
             style: {
               ...typeStyle("caption"),
               color: colors.textSecondary,
-              minWidth: tokens43.extensions.financial.progressLabelWidth,
+              minWidth: tokens44.extensions.financial.progressLabelWidth,
               textAlign: "right",
               fontFamily: numericFontFamily || fontFamily,
               fontVariant: ["tabular-nums"]
@@ -7950,7 +8101,7 @@ function KjunCollectionMark({
   size = "md"
 }) {
   const { colors, domainColors } = useKjunStyles();
-  const box = tokens43.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens43.extensions.financial.heartMarkSizes[size] : box;
+  const box = tokens44.extensions.financial.markSizes[size], glyph = kind === "interest" ? tokens44.extensions.financial.heartMarkSizes[size] : box;
   return /* @__PURE__ */ jsx43(View36, { style: { width: box, height: box, alignItems: "center", justifyContent: "center", overflow: "visible" }, children: /* @__PURE__ */ jsx43(
     KjunIcon,
     {
@@ -7982,8 +8133,8 @@ function KjunExecutionStatusBadge({
 }
 function KjunSparkline({
   data = [],
-  width = tokens43.extensions.financial.sparklineWidth,
-  height = tokens43.extensions.financial.sparklineHeight,
+  width = tokens44.extensions.financial.sparklineWidth,
+  height = tokens44.extensions.financial.sparklineHeight,
   color,
   semantic = "price",
   fill = true,
@@ -8037,7 +8188,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 import { nextTableSort } from "@kjun-ui/tokens";
-import { useEffect as useEffect25, useRef as useRef33, useState as useState36 } from "react";
+import { useEffect as useEffect26, useRef as useRef36, useState as useState36 } from "react";
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -8084,8 +8235,8 @@ function useTableModel(props) {
   const [internalSort, setSort] = useState36({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = useState36([]), [search, setSearch] = useState36(""), timer = useRef33(void 0);
-  useEffect25(() => () => clearTimeout(timer.current), []);
+  }), [internalExpanded, setExpanded] = useState36([]), [search, setSearch] = useState36(""), timer = useRef36(void 0);
+  useEffect26(() => () => clearTimeout(timer.current), []);
   const sort = props.sort === void 0 ? internalSort : (_a = props.sort) != null ? _a : { key: "", order: "asc" };
   const rows = sortTableRows(data, sort, { sortable, sortMode });
   const key = (row, index = 0) => tableRowKey(row, rowKey, index);
@@ -8174,7 +8325,7 @@ function tableCellValue(props, column, row, index) {
 }
 
 // packages/native/src/table-toolbar.tsx
-import { tokens as tokens44 } from "@kjun-ui/tokens";
+import { tokens as tokens45 } from "@kjun-ui/tokens";
 import { View as View37 } from "react-native";
 import { Fragment as Fragment15, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 function TableToolbar({
@@ -8194,12 +8345,12 @@ function TableToolbar({
   const toolbarStyle = {
     flexDirection: "row",
     alignItems: "center",
-    gap: tokens44.dimension.value8,
+    gap: tokens45.dimension.value8,
     flexWrap: "wrap",
-    paddingVertical: tokens44.dimension.value8,
-    paddingHorizontal: tokens44.dimension.value12,
+    paddingVertical: tokens45.dimension.value8,
+    paddingHorizontal: tokens45.dimension.value12,
     backgroundColor: colors.secondary,
-    borderBottomWidth: tokens44.border.defaultWidth,
+    borderBottomWidth: tokens45.border.defaultWidth,
     borderBottomColor: colors.border
   };
   return /* @__PURE__ */ jsxs30(Fragment15, { children: [
@@ -8227,7 +8378,7 @@ function TableToolbar({
     ),
     (searchable || toolbar) && // Like Web: the search toolbar sits on the surface so the filled search field stands out from it.
     /* @__PURE__ */ jsxs30(View37, { style: { ...toolbarStyle, backgroundColor: colors.surface }, children: [
-      searchable && /* @__PURE__ */ jsx44(View37, { style: { width: tokens44.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx44(
+      searchable && /* @__PURE__ */ jsx44(View37, { style: { width: tokens45.table.searchWidth, maxWidth: "100%" }, children: /* @__PURE__ */ jsx44(
         KjunInput,
         {
           size: "sm",
@@ -8245,7 +8396,7 @@ function TableToolbar({
 }
 
 // packages/native/src/table-grid.tsx
-import { tokens as tokens45 } from "@kjun-ui/tokens";
+import { tokens as tokens46 } from "@kjun-ui/tokens";
 import { Fragment as Fragment16, useId as useId9, useState as useState37 } from "react";
 import Svg7, { Defs as Defs3, LinearGradient as LinearGradient3, Rect as Rect3, Stop as Stop3 } from "react-native-svg";
 import { ScrollView as ScrollView9, View as View38 } from "react-native";
@@ -8253,7 +8404,7 @@ import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
 function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowClick, selectable, checkbox, cell, expandable, expand, renderExpand, emptyContent, emptyText, visible, maxHeight, stickyHeader, sortable, compact, striped, hoverable }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  const geometry2 = tokens45.table;
+  const geometry2 = tokens46.table;
   const [scroll, setScroll] = useState37({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + useId9().replace(/[^a-z0-9]/gi, "");
   const cellPadding = geometry2.cellPadding[compact ? "compact" : "regular"];
   const width = (col) => typeof col.width === "number" ? col.width : typeof col.width === "string" && /^\d+(px)?$/.test(col.width) ? parseFloat(col.width) : geometry2.columnWidth;
@@ -8286,7 +8437,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                   style: {
                     flexDirection: "row",
                     backgroundColor: colors.tableHeaderBg,
-                    borderBottomWidth: tokens45.border.defaultWidth,
+                    borderBottomWidth: tokens46.border.defaultWidth,
                     borderBottomColor: colors.border
                   },
                   children: [
@@ -8310,13 +8461,13 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                         onPress: () => state.sortColumn(col),
                         style: {
                           width: width(col),
-                          minHeight: tokens45.native.minimumTouchTarget,
+                          minHeight: tokens46.native.minimumTouchTarget,
                           paddingVertical: geometry2.headerPadding.y,
                           paddingHorizontal: geometry2.headerPadding.x,
                           flexDirection: "row",
                           alignItems: "center",
                           justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
-                          gap: tokens45.dimension.value4
+                          gap: tokens46.dimension.value4
                         },
                         children: [
                           /* @__PURE__ */ jsx45(
@@ -8333,7 +8484,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                             KjunIcon,
                             {
                               name: state.sort.order === "asc" ? "sort-ascending" : "sort-descending",
-                              size: tokens45.table.sortIconSize,
+                              size: tokens46.table.sortIconSize,
                               color: colors.text
                             }
                           )
@@ -8360,7 +8511,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                       {
                         type: "block",
                         height: geometry2.skeletonHeight,
-                        width: col.key === "actions" ? tokens45.table.actionColumnWidth : "75%"
+                        width: col.key === "actions" ? tokens46.table.actionColumnWidth : "75%"
                       }
                     )
                   },
@@ -8376,7 +8527,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                     onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
                     style: ({ pressed }) => ({
                       flexDirection: "row",
-                      borderBottomWidth: tokens45.border.defaultWidth,
+                      borderBottomWidth: tokens46.border.defaultWidth,
                       borderBottomColor: colors.border,
                       backgroundColor: pressed && hoverable ? colors.tableRowHover : striped && i % 2 ? colors.secondary : void 0
                     }),
@@ -8436,7 +8587,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
         )
       }
     ),
-    fade && /* @__PURE__ */ jsx45(View38, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens45.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs31(Svg7, { width: "100%", height: "100%", children: [
+    fade && /* @__PURE__ */ jsx45(View38, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens46.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs31(Svg7, { width: "100%", height: "100%", children: [
       /* @__PURE__ */ jsx45(Defs3, { children: /* @__PURE__ */ jsxs31(LinearGradient3, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
         /* @__PURE__ */ jsx45(Stop3, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
         /* @__PURE__ */ jsx45(Stop3, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -8447,14 +8598,14 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
 }
 
 // packages/native/src/table-view.tsx
-import { tokens as tokens47 } from "@kjun-ui/tokens";
+import { tokens as tokens48 } from "@kjun-ui/tokens";
 import {
   View as View40,
   useWindowDimensions as useWindowDimensions7
 } from "react-native";
 
 // packages/native/src/table-cards.tsx
-import { tokens as tokens46 } from "@kjun-ui/tokens";
+import { tokens as tokens47 } from "@kjun-ui/tokens";
 import {
   View as View39
 } from "react-native";
@@ -8480,7 +8631,7 @@ function TableCards({
   return /* @__PURE__ */ jsxs32(
     View39,
     {
-      style: { gap: tokens46.extensions.tableCard.gap, padding: tokens46.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
+      style: { gap: tokens47.extensions.tableCard.gap, padding: tokens47.extensions.tableCard.listPadding, opacity: skeletonHidden ? 0 : void 0 },
       "aria-hidden": skeletonHidden || void 0,
       children: [
         initialLoading ? Array.from({ length: skeletonRows }, (_, i) => /* @__PURE__ */ jsx46(KjunSkeleton, { type: "card" }, i)) : state.rows.map((row, i) => /* @__PURE__ */ jsxs32(
@@ -8489,10 +8640,10 @@ function TableCards({
             accessible: false,
             onPress: () => onRowClick == null ? void 0 : onRowClick(row, i),
             style: ({ pressed }) => ({
-              padding: tokens46.extensions.tableCard.padding,
-              borderWidth: tokens46.border.defaultWidth,
+              padding: tokens47.extensions.tableCard.padding,
+              borderWidth: tokens47.border.defaultWidth,
               borderColor: colors.border,
-              borderRadius: tokens46.extensions.tableCard.radius,
+              borderRadius: tokens47.extensions.tableCard.radius,
               backgroundColor: pressed ? colors.hover : colors.background
             }),
             children: [
@@ -8502,8 +8653,8 @@ function TableCards({
                   style: {
                     flexDirection: "row",
                     alignItems: "center",
-                    gap: tokens46.extensions.tableCard.gap,
-                    marginBottom: tokens46.dimension.value8
+                    gap: tokens47.extensions.tableCard.gap,
+                    marginBottom: tokens47.dimension.value8
                   },
                   children: [
                     /* @__PURE__ */ jsxs32(
@@ -8513,7 +8664,7 @@ function TableCards({
                           flexDirection: "row",
                           flex: 1,
                           alignItems: "center",
-                          gap: tokens46.extensions.tableCard.gap,
+                          gap: tokens47.extensions.tableCard.gap,
                           minWidth: 0
                         },
                         children: [
@@ -8522,8 +8673,8 @@ function TableCards({
                         ]
                       }
                     ),
-                    badges.length ? /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens46.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
-                    inline.length > 0 && /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens46.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) })
+                    badges.length ? /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens47.extensions.tableCard.fieldGap }, children: badges.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) }) : subtitle ? cell(subtitle, row, i) : null,
+                    inline.length > 0 && /* @__PURE__ */ jsx46(View39, { style: { flexDirection: "row", gap: tokens47.extensions.tableCard.fieldGap }, children: inline.map((col) => /* @__PURE__ */ jsx46(View39, { children: cell(col, row, i) }, col.key)) })
                   ]
                 }
               ),
@@ -8533,10 +8684,10 @@ function TableCards({
                   View39,
                   {
                     style: {
-                      borderTopWidth: index ? tokens46.border.defaultWidth : 0,
+                      borderTopWidth: index ? tokens47.border.defaultWidth : 0,
                       borderTopColor: colors.border,
-                      paddingTop: index ? tokens46.dimension.value12 : 0,
-                      marginTop: index ? tokens46.dimension.value12 : 0
+                      paddingTop: index ? tokens47.dimension.value12 : 0,
+                      marginTop: index ? tokens47.dimension.value12 : 0
                     },
                     children: [
                       !!section.label && /* @__PURE__ */ jsx46(
@@ -8545,7 +8696,7 @@ function TableCards({
                           style: {
                             ...typeStyle("controlSmall"),
                             color: colors.textTertiary,
-                            marginBottom: tokens46.dimension.value6
+                            marginBottom: tokens47.dimension.value6
                           },
                           children: section.label
                         }
@@ -8556,7 +8707,7 @@ function TableCards({
                           style: {
                             flexDirection: "row",
                             flexWrap: "wrap",
-                            gap: section.layout === "metrics" ? tokens46.extensions.tableCard.gap : tokens46.extensions.tableCard.metricGap
+                            gap: section.layout === "metrics" ? tokens47.extensions.tableCard.gap : tokens47.extensions.tableCard.metricGap
                           },
                           children: cols.map((col) => /* @__PURE__ */ jsxs32(
                             View39,
@@ -8565,7 +8716,7 @@ function TableCards({
                                 flexBasis: col.fullWidthInCard || section.layout === "stack" ? "100%" : section.layout === "metrics" ? "30%" : "47%",
                                 flexGrow: 1,
                                 minWidth: 0,
-                                gap: tokens46.extensions.tableCard.valueGap
+                                gap: tokens47.extensions.tableCard.valueGap
                               },
                               children: [
                                 /* @__PURE__ */ jsx46(
@@ -8596,10 +8747,10 @@ function TableCards({
                 View39,
                 {
                   style: {
-                    borderTopWidth: tokens46.border.defaultWidth,
+                    borderTopWidth: tokens47.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: tokens46.dimension.value8,
-                    marginTop: tokens46.dimension.value4
+                    paddingTop: tokens47.dimension.value8,
+                    marginTop: tokens47.dimension.value4
                   },
                   children: content(renderExpand == null ? void 0 : renderExpand(row, i))
                 }
@@ -8608,10 +8759,10 @@ function TableCards({
                 View39,
                 {
                   style: {
-                    borderTopWidth: tokens46.border.defaultWidth,
+                    borderTopWidth: tokens47.border.defaultWidth,
                     borderTopColor: colors.border,
-                    paddingTop: tokens46.dimension.value8,
-                    marginTop: tokens46.dimension.value8,
+                    paddingTop: tokens47.dimension.value8,
+                    marginTop: tokens47.dimension.value8,
                     alignItems: "flex-end"
                   },
                   children: /* @__PURE__ */ jsx46(View39, { style: { alignSelf: "flex-end" }, children: cell(actions, row, i) })
@@ -8621,7 +8772,7 @@ function TableCards({
           },
           state.key(row, i)
         )),
-        !initialLoading && !state.rows.length && /* @__PURE__ */ jsx46(View39, { style: { padding: tokens46.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
+        !initialLoading && !state.rows.length && /* @__PURE__ */ jsx46(View39, { style: { padding: tokens47.extensions.tableCard.emptyPadding, alignItems: "center" }, children: content(emptyContent || emptyText, {
           color: colors.textTertiary
         }) })
       ]
@@ -8658,7 +8809,7 @@ function KjunTable(props) {
     onRowClick,
     onRetry
   } = props;
-  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = useWindowDimensions7().width < tokens47.table.mobileBreakpoint;
+  const { colors, domainColors } = useKjunStyles(), state = useTableModel2(props), query = useQueryDisplay(props), revealed = useLoadingReveal(query.initialLoading, skeleton ? loadingDelay : 0), mobile = useWindowDimensions7().width < tokens48.table.mobileBreakpoint;
   const layout = tablePresentation(props, mobile);
   const { card, visible } = layout;
   const cell = (col, row, index, role) => {
@@ -8670,9 +8821,9 @@ function KjunTable(props) {
         {
           style: {
             alignSelf: "flex-start",
-            paddingVertical: tokens47.dimension.value2,
-            paddingHorizontal: tokens47.dimension.value8,
-            borderRadius: tokens47.radius.radius4,
+            paddingVertical: tokens48.dimension.value2,
+            paddingHorizontal: tokens48.dimension.value8,
+            borderRadius: tokens48.radius.radius4,
             backgroundColor: role2 ? domainColor(domainColors, role2 + "Bg") : void 0
           },
           children: content(body, {
@@ -8775,7 +8926,7 @@ function KpiNumberLine({ prefix, suffix, prefixGap, suffixGap, style, unitStyle,
 }
 
 // packages/native/src/kpi-hero.tsx
-import { tokens as tokens48 } from "@kjun-ui/tokens";
+import { tokens as tokens49 } from "@kjun-ui/tokens";
 import {
   View as View42,
   useWindowDimensions as useWindowDimensions8
@@ -8808,8 +8959,8 @@ function KjunKpiHero(props) {
     deltaFormatter,
     renderSecondary
   } = props;
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = useWindowDimensions8().width, mobile = windowWidth <= tokens48.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
-  const geometry2 = tokens48.extensions.kpiHero;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), windowWidth = useWindowDimensions8().width, mobile = windowWidth <= tokens49.responsive.kpiHero, small = size === "sm", numberRole = small ? "displaySm" : mobile ? "displayMd" : "displayLg", font = typeStyle(numberRole).fontSize, unitStyle = typeStyle(small ? "numberSm" : mobile ? "numberMd" : "numberLg");
+  const geometry2 = tokens49.extensions.kpiHero;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const numeric2 = {
     fontFamily: numericFontFamily || fontFamily,
@@ -8821,7 +8972,7 @@ function KjunKpiHero(props) {
   );
   const delta = (v, kind, style) => {
     if (deltaFormatter) return /* @__PURE__ */ jsx49(KText, { style, children: deltaFormatter(v, kind) });
-    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = tokens48.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
+    const sign = v > 0 ? "+" : v < 0 ? "\u2212" : "", gap = tokens49.extensions.financial.affixGap, number = new Intl.NumberFormat(void 0, {
       minimumFractionDigits: kind === "absolute" ? decimals : 1,
       maximumFractionDigits: kind === "absolute" ? decimals : 1
     }).format(Math.abs(v));
@@ -8924,11 +9075,11 @@ function KjunKpiHero(props) {
               gap: small && mobile ? geometry2.smallMobileGap : spec.secondaryGap,
               marginTop: spec.secondaryMargin,
               paddingTop: spec.secondaryPadding,
-              borderTopWidth: tokens48.border.defaultWidth,
+              borderTopWidth: tokens49.border.defaultWidth,
               borderTopColor: colors.border
             },
             children: secondary.map((item, i) => {
-              const columns = mobile && !small && windowWidth <= tokens48.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
+              const columns = mobile && !small && windowWidth <= tokens49.responsive.kpiHeroSecondary && secondary.length >= 3 ? 2 : 0;
               const first = columns ? i % columns === 0 : i === 0;
               const last = columns ? i % columns === columns - 1 || i === secondary.length - 1 : i === secondary.length - 1;
               return /* @__PURE__ */ jsxs35(
@@ -8939,7 +9090,7 @@ function KjunKpiHero(props) {
                     minWidth: 0,
                     paddingLeft: first ? 0 : geometry2.itemPadding,
                     paddingRight: last ? 0 : geometry2.itemPadding,
-                    borderLeftWidth: first ? 0 : tokens48.border.defaultWidth,
+                    borderLeftWidth: first ? 0 : tokens49.border.defaultWidth,
                     borderLeftColor: colors.border
                   } : { minWidth: 0, maxWidth: "100%", flexShrink: 1 },
                   children: [
@@ -9004,7 +9155,7 @@ function KjunKpiHero(props) {
 }
 
 // packages/native/src/kpi-row.tsx
-import { tokens as tokens49 } from "@kjun-ui/tokens";
+import { tokens as tokens50 } from "@kjun-ui/tokens";
 import { useState as useState38 } from "react";
 import {
   View as View43,
@@ -9020,8 +9171,8 @@ function KjunKpiRow({
   onItemClick,
   renderValue
 }) {
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions9().width <= tokens49.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
-  const geometry2 = tokens49.extensions.kpiRow;
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = useWindowDimensions9().width <= tokens50.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
+  const geometry2 = tokens50.extensions.kpiRow;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
   const [width, setWidth] = useState38(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
@@ -9100,8 +9251,8 @@ function KjunKpiRow({
               minWidth: 0,
               paddingVertical: summary ? 0 : small && mobile ? geometry2.smallMobile.itemPaddingY : spec.itemPaddingY,
               paddingHorizontal: summary ? 0 : small && mobile ? geometry2.smallMobile.itemPaddingX : spec.itemPaddingX,
-              borderLeftWidth: summary ? 0 : mobile && !small ? i % 2 && !full ? tokens49.border.defaultWidth : 0 : i ? tokens49.border.defaultWidth : 0,
-              borderTopWidth: mobile && !small && !summary && i >= 2 ? tokens49.border.defaultWidth : 0,
+              borderLeftWidth: summary ? 0 : mobile && !small ? i % 2 && !full ? tokens50.border.defaultWidth : 0 : i ? tokens50.border.defaultWidth : 0,
+              borderTopWidth: mobile && !small && !summary && i >= 2 ? tokens50.border.defaultWidth : 0,
               borderColor: colors.border,
               borderRadius: item.clickable ? geometry2.itemRadius : 0,
               flexDirection: sub ? "row" : "column",
@@ -9144,7 +9295,7 @@ function KjunKpiRow({
                           summary && seg.label && /* @__PURE__ */ jsx50(
                             KText,
                             {
-                              style: { ...typeStyle("caption"), marginRight: sub ? tokens49.dimension.value4 : 0, color: colors.textTertiary },
+                              style: { ...typeStyle("caption"), marginRight: sub ? tokens50.dimension.value4 : 0, color: colors.textTertiary },
                               children: seg.label
                             }
                           ),
@@ -9238,11 +9389,11 @@ function KjunKpiRow({
 }
 
 // packages/native/src/market-cards.tsx
-import { tokens as tokens51 } from "@kjun-ui/tokens";
+import { tokens as tokens52 } from "@kjun-ui/tokens";
 import { ScrollView as ScrollView10, View as View45 } from "react-native";
 
 // shared/package-runtime/market-cards.ts
-import { useEffect as useEffect26, useRef as useRef34, useState as useState39 } from "react";
+import { useEffect as useEffect27, useRef as useRef37, useState as useState39 } from "react";
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -9259,7 +9410,7 @@ function useMarketCardsModel(props, persistence) {
     isDefaultSort: c.defaultSort
   }));
   const [key, setKey] = useState39(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
-  const mounted = useRef34("");
+  const mounted = useRef37("");
   const save = (key2) => {
     var _a;
     try {
@@ -9267,7 +9418,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  useEffect26(() => {
+  useEffect27(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -9304,7 +9455,7 @@ function useMarketCards(props) {
 }
 
 // packages/native/src/market-parts.tsx
-import { tokens as tokens50 } from "@kjun-ui/tokens";
+import { tokens as tokens51 } from "@kjun-ui/tokens";
 import { View as View44, useWindowDimensions as useWindowDimensions10 } from "react-native";
 import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
 function MarketIdentity({
@@ -9314,7 +9465,7 @@ function MarketIdentity({
   compact = false
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const { colors } = useKjunStyles(), mobile = useWindowDimensions10().width < tokens50.responsive.market && !table && !compact, label = (_c = (_a = props.primaryLabel) == null ? void 0 : _a.call(props, row)) != null ? _c : String((_b = getValue(row, "name")) != null ? _b : ""), meta = ((_d = props.subMeta) == null ? void 0 : _d.call(props, row)) || "", id = getValue(row, props.rowKey || "id");
+  const { colors } = useKjunStyles(), mobile = useWindowDimensions10().width < tokens51.responsive.market && !table && !compact, label = (_c = (_a = props.primaryLabel) == null ? void 0 : _a.call(props, row)) != null ? _c : String((_b = getValue(row, "name")) != null ? _b : ""), meta = ((_d = props.subMeta) == null ? void 0 : _d.call(props, row)) || "", id = getValue(row, props.rowKey || "id");
   const body = /* @__PURE__ */ jsxs37(Fragment18, { children: [
     (_e = props.renderNamePrefix) == null ? void 0 : _e.call(props, row),
     /* @__PURE__ */ jsxs37(View44, { style: { flex: 1, minWidth: 0 }, children: [
@@ -9324,7 +9475,7 @@ function MarketIdentity({
           style: {
             flexDirection: "row",
             alignItems: "center",
-            gap: tokens50.dimension.value4,
+            gap: tokens51.dimension.value4,
             minWidth: 0
           },
           children: [
@@ -9346,7 +9497,7 @@ function MarketIdentity({
           ]
         }
       ),
-      (meta || props.renderSubMeta) && /* @__PURE__ */ jsx51(View44, { style: { marginTop: tokens50.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ jsx51(
+      (meta || props.renderSubMeta) && /* @__PURE__ */ jsx51(View44, { style: { marginTop: tokens51.dimension.value2 }, children: ((_i = props.renderSubMeta) == null ? void 0 : _i.call(props, row)) || /* @__PURE__ */ jsx51(
         KText,
         {
           numberOfLines: 1,
@@ -9408,9 +9559,9 @@ function MarketFooter({
           flexWrap: "wrap",
           alignItems: "center",
           justifyContent: "space-between",
-          gap: tokens50.dimension.value8,
-          paddingVertical: tokens50.dimension.value12,
-          paddingHorizontal: tokens50.dimension.value16
+          gap: tokens51.dimension.value8,
+          paddingVertical: tokens51.dimension.value12,
+          paddingHorizontal: tokens51.dimension.value16
         },
         children: [
           /* @__PURE__ */ jsx51(KText, { style: { ...typeStyle("caption"), color: colors.textTertiary }, children: calculatedAt ? m.lastUpdated + (((_a = props.formatDate) == null ? void 0 : _a.call(props, calculatedAt)) || calculatedAt) : footerNote }),
@@ -9456,9 +9607,9 @@ function KjunMarketCards(props) {
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: {
           flexDirection: "row",
-          gap: tokens51.dimension.value8,
-          paddingVertical: tokens51.dimension.value10,
-          paddingHorizontal: tokens51.dimension.value16
+          gap: tokens52.dimension.value8,
+          paddingVertical: tokens52.dimension.value10,
+          paddingHorizontal: tokens52.dimension.value16
         },
         children: state.pills.map((pill) => /* @__PURE__ */ jsxs38(
           AccessiblePressable,
@@ -9467,14 +9618,14 @@ function KjunMarketCards(props) {
             accessibilityLabel: pill.label,
             accessibilityState: { selected: state.key === pill.key },
             onPress: () => state.select(pill.key),
-            hitSlop: { top: (tokens51.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens51.dimension.value8) / 2, bottom: (tokens51.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens51.dimension.value8) / 2 },
+            hitSlop: { top: (tokens52.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens52.dimension.value8) / 2, bottom: (tokens52.native.minimumTouchTarget - typeStyle("label").lineHeight - 2 * tokens52.dimension.value8) / 2 },
             style: {
               flexDirection: "row",
               alignItems: "center",
-              gap: tokens51.dimension.value4,
-              paddingVertical: tokens51.dimension.value8,
-              paddingHorizontal: tokens51.dimension.value16,
-              borderRadius: tokens51.radius.radius9999,
+              gap: tokens52.dimension.value4,
+              paddingVertical: tokens52.dimension.value8,
+              paddingHorizontal: tokens52.dimension.value16,
+              borderRadius: tokens52.radius.radius9999,
               backgroundColor: state.key === pill.key ? colors.brand : colors.secondary
             },
             children: [
@@ -9510,7 +9661,7 @@ function KjunMarketCards(props) {
           loadingContent: props.skeleton === false ? void 0 : /* @__PURE__ */ jsx52(KjunListSkeleton, { variant: "compact" }),
           emptyContent: /* @__PURE__ */ jsx52(KjunEmpty, { text: emptyMessage, description: emptySubMessage }),
           children: /* @__PURE__ */ jsxs38(View45, { children: [
-            state.pill && /* @__PURE__ */ jsx52(KText, { style: { textAlign: "right", paddingHorizontal: tokens51.dimension.value16, paddingVertical: tokens51.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
+            state.pill && /* @__PURE__ */ jsx52(KText, { style: { textAlign: "right", paddingHorizontal: tokens52.dimension.value16, paddingVertical: tokens52.dimension.value8, ...typeStyle("caption"), color: colors.textSecondary }, children: state.pill.label }),
             rows.map((row, i) => {
               var _a, _b, _c;
               return /* @__PURE__ */ jsxs38(
@@ -9525,22 +9676,22 @@ function KjunMarketCards(props) {
                     flexDirection: "row",
                     alignItems: "center",
                     justifyContent: "space-between",
-                    paddingVertical: tokens51.dimension.value10,
-                    paddingHorizontal: tokens51.dimension.value16,
-                    borderBottomWidth: tokens51.border.defaultWidth,
+                    paddingVertical: tokens52.dimension.value10,
+                    paddingHorizontal: tokens52.dimension.value16,
+                    borderBottomWidth: tokens52.border.defaultWidth,
                     borderBottomColor: colors.border,
                     backgroundColor: pressed ? colors.hover : void 0
                   }),
                   children: [
                     /* @__PURE__ */ jsx52(MarketIdentity, { row, props, compact: true }),
-                    /* @__PURE__ */ jsx52(View45, { style: { marginLeft: tokens51.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ jsx52(
+                    /* @__PURE__ */ jsx52(View45, { style: { marginLeft: tokens52.dimension.value12, alignItems: "flex-end" }, children: ((_b = state.pill) == null ? void 0 : _b.format) === "sparkline" ? /* @__PURE__ */ jsx52(
                       KjunSparkline,
                       {
                         data: getValue(row, state.key) || [],
-                        width: tokens51.extensions.marketTable.sparklineWidth,
-                        height: tokens51.extensions.marketTable.sparklineHeight
+                        width: tokens52.extensions.marketTable.sparklineWidth,
+                        height: tokens52.extensions.marketTable.sparklineHeight
                       }
-                    ) : state.pill ? /* @__PURE__ */ jsx52(Fragment19, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens51.extensions.marketTable.valueSkeletonHeight, width: tokens51.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx52(
+                    ) : state.pill ? /* @__PURE__ */ jsx52(Fragment19, { children: metricLoading(row, state.key) ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens52.extensions.marketTable.valueSkeletonHeight, width: tokens52.extensions.marketTable.valueSkeletonWidth }) : isChange && getValue(row, state.key) != null ? /* @__PURE__ */ jsx52(
                       KjunSignedValue,
                       {
                         value: finiteNumber(getValue(row, state.key)),
@@ -9548,14 +9699,14 @@ function KjunMarketCards(props) {
                         stale: !!getValue(row, "stale"),
                         tone: "pill"
                       }
-                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens51.extensions.financial.priceSkeletonHeight, width: tokens51.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs38(
+                    ) : isPrice && getValue(row, state.key) == null ? /* @__PURE__ */ jsx52(KjunSkeleton, { type: "block", height: tokens52.extensions.financial.priceSkeletonHeight, width: tokens52.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ jsxs38(
                       View45,
                       {
                         style: {
                           flexDirection: "row",
                           alignItems: "center",
                           justifyContent: "flex-end",
-                          gap: tokens51.dimension.value4
+                          gap: tokens52.dimension.value4
                         },
                         children: [
                           (_c = props.renderMetricPrefix) == null ? void 0 : _c.call(
@@ -9592,7 +9743,7 @@ function KjunMarketCards(props) {
 }
 
 // packages/native/src/market-list.tsx
-import { tokens as tokens52 } from "@kjun-ui/tokens";
+import { tokens as tokens53 } from "@kjun-ui/tokens";
 import { View as View46, useWindowDimensions as useWindowDimensions11 } from "react-native";
 import { jsx as jsx53, jsxs as jsxs39 } from "react/jsx-runtime";
 var changeWeight = { fontWeight: typeStyle("label").fontWeight };
@@ -9610,7 +9761,7 @@ function KjunMarketSimpleList(props) {
     closingPrice = false,
     emptyMessage = m.noItems,
     emptySubMessage = ""
-  } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens52.responsive.market;
+  } = props, { colors } = useKjunStyles(), mobile = useWindowDimensions11().width < tokens53.responsive.market;
   return /* @__PURE__ */ jsxs39(View46, { children: [
     /* @__PURE__ */ jsx53(
       KjunDataState,
@@ -9636,11 +9787,11 @@ function KjunMarketSimpleList(props) {
                 flexDirection: "row",
                 alignItems: "center",
                 justifyContent: "space-between",
-                paddingVertical: mobile ? tokens52.dimension.value14 : tokens52.dimension.value16,
-                paddingHorizontal: mobile ? tokens52.dimension.value20 : tokens52.dimension.value16,
+                paddingVertical: mobile ? tokens53.dimension.value14 : tokens53.dimension.value16,
+                paddingHorizontal: mobile ? tokens53.dimension.value20 : tokens53.dimension.value16,
                 // Like Web, the minimum height belongs to the narrow layout only.
-                minHeight: mobile ? tokens52.extensions.marketList.minimumHeight : void 0,
-                borderBottomWidth: tokens52.border.defaultWidth,
+                minHeight: mobile ? tokens53.extensions.marketList.minimumHeight : void 0,
+                borderBottomWidth: tokens53.border.defaultWidth,
                 borderBottomColor: colors.border,
                 backgroundColor: pressed ? colors.hover : void 0
               }),
@@ -9650,8 +9801,8 @@ function KjunMarketSimpleList(props) {
                   View46,
                   {
                     style: {
-                      marginLeft: tokens52.dimension.value12,
-                      minWidth: mobile ? tokens52.extensions.marketList.mobileQuoteMinimumWidth : void 0,
+                      marginLeft: tokens53.dimension.value12,
+                      minWidth: mobile ? tokens53.extensions.marketList.mobileQuoteMinimumWidth : void 0,
                       maxWidth: "50%",
                       alignItems: "flex-end"
                     },
@@ -9673,8 +9824,8 @@ function KjunMarketSimpleList(props) {
                             flexWrap: "wrap",
                             alignItems: "center",
                             justifyContent: "flex-end",
-                            gap: tokens52.dimension.value6,
-                            marginTop: tokens52.dimension.value2
+                            gap: tokens53.dimension.value6,
+                            marginTop: tokens53.dimension.value2
                           },
                           children: [
                             price !== null && ((_b = props.renderPricePrefix) == null ? void 0 : _b.call(props, row)),
@@ -9686,7 +9837,7 @@ function KjunMarketSimpleList(props) {
                                 fetchedAt
                               }
                             )),
-                            changeLoading(row) ? /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens52.extensions.marketList.changeSkeletonHeight, width: tokens52.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx53(
+                            changeLoading(row) ? /* @__PURE__ */ jsx53(KjunSkeleton, { type: "block", height: tokens53.extensions.marketList.changeSkeletonHeight, width: tokens53.extensions.marketList.changeSkeletonWidth }) : change !== null ? /* @__PURE__ */ jsx53(
                               KjunSignedValue,
                               {
                                 value: change,
@@ -9720,7 +9871,7 @@ function KjunMarketSimpleList(props) {
 }
 
 // packages/native/src/market-panel.tsx
-import { tokens as tokens53 } from "@kjun-ui/tokens";
+import { tokens as tokens54 } from "@kjun-ui/tokens";
 import { View as View47 } from "react-native";
 import { jsx as jsx54, jsxs as jsxs40 } from "react/jsx-runtime";
 function KjunMarketListPanel({
@@ -9734,8 +9885,8 @@ function KjunMarketListPanel({
       View47,
       {
         style: {
-          marginTop: tokens53.dimension.value16,
-          borderTopWidth: tokens53.border.defaultWidth,
+          marginTop: tokens54.dimension.value16,
+          borderTopWidth: tokens54.border.defaultWidth,
           borderTopColor: colors.border
         },
         children
@@ -9745,7 +9896,7 @@ function KjunMarketListPanel({
 }
 
 // packages/native/src/market-table.tsx
-import { tokens as tokens54 } from "@kjun-ui/tokens";
+import { tokens as tokens55 } from "@kjun-ui/tokens";
 import { useId as useId10, useState as useState40 } from "react";
 import { ScrollView as ScrollView11, View as View48 } from "react-native";
 import Svg8, { Defs as Defs4, LinearGradient as LinearGradient4, Rect as Rect4, Stop as Stop4 } from "react-native-svg";
@@ -9773,7 +9924,7 @@ function KjunMarketTable(props) {
   const render = (row, col) => {
     const value = getValue(row, col.key), stale = !!getValue(row, "stale");
     if (cellLoading(row, col))
-      return /* @__PURE__ */ jsx55(KjunSkeleton, { type: "block", height: tokens54.extensions.marketTable.valueSkeletonHeight, width: tokens54.extensions.marketTable.valueSkeletonWidth });
+      return /* @__PURE__ */ jsx55(KjunSkeleton, { type: "block", height: tokens55.extensions.marketTable.valueSkeletonHeight, width: tokens55.extensions.marketTable.valueSkeletonWidth });
     if (renderCell) return content(renderCell(row, col));
     if (["stock_name", "name", "symbol"].includes(col.key))
       return /* @__PURE__ */ jsx55(MarketIdentity, { row, props, table: true });
@@ -9782,8 +9933,8 @@ function KjunMarketTable(props) {
         KjunSparkline,
         {
           data: Array.isArray(value) ? value : [],
-          width: tokens54.extensions.marketTable.sparklineWidth,
-          height: tokens54.extensions.marketTable.sparklineHeight
+          width: tokens55.extensions.marketTable.sparklineWidth,
+          height: tokens55.extensions.marketTable.sparklineHeight
         }
       );
     if (col.type === "price")
@@ -9841,7 +9992,7 @@ function KjunMarketTable(props) {
       onLayout: layout.onLayout,
       style: {
         backgroundColor: embedded ? void 0 : colors.surface,
-        borderRadius: embedded ? 0 : tokens54.radius.radius12
+        borderRadius: embedded ? 0 : tokens55.radius.radius12
       },
       children: [
         /* @__PURE__ */ jsx55(
@@ -9881,13 +10032,13 @@ function KjunMarketTable(props) {
                             {
                               style: {
                                 width: marketGeometry.actionsWidth,
-                                paddingVertical: tokens54.dimension.value12,
-                                paddingHorizontal: tokens54.dimension.value4,
+                                paddingVertical: tokens55.dimension.value12,
+                                paddingHorizontal: tokens55.dimension.value4,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: "center"
                               },
-                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx55(View48, { style: { width: Math.max(tokens54.native.minimumTouchTarget, tokens54.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx55(KjunCollectionMark, { kind, size: "md" }) }, kind))
+                              children: ["interest", "favorite"].map((kind) => /* @__PURE__ */ jsx55(View48, { style: { width: Math.max(tokens55.native.minimumTouchTarget, tokens55.extensions.iconToggle.sizes.xs), alignItems: "center" }, children: /* @__PURE__ */ jsx55(KjunCollectionMark, { kind, size: "md" }) }, kind))
                             }
                           ),
                           columns.map((col, columnIndex) => /* @__PURE__ */ jsxs41(
@@ -9902,11 +10053,11 @@ function KjunMarketTable(props) {
                               },
                               style: {
                                 width: layout.widths[columnIndex],
-                                padding: tokens54.dimension.value12,
+                                padding: tokens55.dimension.value12,
                                 flexDirection: "row",
                                 alignItems: "center",
                                 justifyContent: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : "flex-start",
-                                gap: tokens54.dimension.value4
+                                gap: tokens55.dimension.value4
                               },
                               children: [
                                 /* @__PURE__ */ jsx55(
@@ -9923,7 +10074,7 @@ function KjunMarketTable(props) {
                                   KjunIcon,
                                   {
                                     name: sortKey === col.key ? sortOrder === "asc" ? "sort-ascending" : "sort-descending" : "arrows-sort",
-                                    size: tokens54.extensions.marketTable.sortIconSize,
+                                    size: tokens55.extensions.marketTable.sortIconSize,
                                     color: sortKey === col.key ? colors.brand : colors.textTertiary
                                   }
                                 )
@@ -9958,8 +10109,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: marketGeometry.actionsWidth,
-                                  paddingVertical: tokens54.dimension.value12,
-                                  paddingHorizontal: tokens54.dimension.value4,
+                                  paddingVertical: tokens55.dimension.value12,
+                                  paddingHorizontal: tokens55.dimension.value4,
                                   flexDirection: "row",
                                   alignItems: "center",
                                   justifyContent: "center"
@@ -10003,8 +10154,8 @@ function KjunMarketTable(props) {
                               {
                                 style: {
                                   width: layout.widths[columnIndex],
-                                  paddingVertical: tokens54.dimension.value14,
-                                  paddingHorizontal: tokens54.dimension.value12,
+                                  paddingVertical: tokens55.dimension.value14,
+                                  paddingHorizontal: tokens55.dimension.value12,
                                   justifyContent: "center",
                                   alignItems: col.align === "right" ? "flex-end" : col.align === "center" ? "center" : void 0
                                 },
@@ -10030,7 +10181,7 @@ function KjunMarketTable(props) {
                   ] })
                 }
               ),
-              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ jsx55(View48, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens54.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs41(Svg8, { width: "100%", height: "100%", children: [
+              layout.width - scroll.viewport - scroll.x > 1 && /* @__PURE__ */ jsx55(View48, { pointerEvents: "none", style: { position: "absolute", top: 0, right: 0, bottom: 0, width: tokens55.extensions.scrollFade.width }, children: /* @__PURE__ */ jsxs41(Svg8, { width: "100%", height: "100%", children: [
                 /* @__PURE__ */ jsx55(Defs4, { children: /* @__PURE__ */ jsxs41(LinearGradient4, { id: fadeId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
                   /* @__PURE__ */ jsx55(Stop4, { offset: "0", stopColor: colors.surface, stopOpacity: 0 }),
                   /* @__PURE__ */ jsx55(Stop4, { offset: "1", stopColor: colors.surface, stopOpacity: 1 })
@@ -10047,50 +10198,62 @@ function KjunMarketTable(props) {
 }
 
 // packages/native/src/list.tsx
-import { tokens as tokens55 } from "@kjun-ui/tokens";
+import { tokens as tokens56 } from "@kjun-ui/tokens";
 import { Children as Children5, createContext as createContext22, useContext as useContext19 } from "react";
 import { View as View49, Platform as Platform26 } from "react-native";
 import { Fragment as Fragment20, jsx as jsx56, jsxs as jsxs42 } from "react/jsx-runtime";
 var ListRowContext = createContext22({ divider: true, compact: false });
-function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, onPress }) {
+function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, destructive = false, chevron = false, onPress, ariaLabel, children }) {
   const { colors } = useKjunStyles(), { divider, compact } = useContext19(ListRowContext);
   const parts = /* @__PURE__ */ jsxs42(Fragment20, { children: [
     hasContent(leading) && /* @__PURE__ */ jsx56(View49, { children: content(leading) }),
     /* @__PURE__ */ jsxs42(View49, { style: { flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label") }, children: title }),
-      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      /* @__PURE__ */ jsx56(KText, { style: { ...typeStyle("label"), ...destructive ? { color: colors.danger } : {} }, children: title }),
+      !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens56.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description }),
+      hasContent(children) && /* @__PURE__ */ jsx56(View49, { style: { marginTop: tokens56.extensions.list.descriptionGap }, children: content(children) })
     ] }),
-    hasContent(trailing) && /* @__PURE__ */ jsx56(View49, { style: { maxWidth: "35%" }, children: content(trailing) })
+    hasContent(trailing) && /* @__PURE__ */ jsx56(View49, { style: { maxWidth: "35%" }, children: content(trailing) }),
+    chevron && /* @__PURE__ */ jsx56(View49, { accessible: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: /* @__PURE__ */ jsx56(KjunIcon, { name: "chevron-right", size: tokens56.iconSizes.default, color: colors.textTertiary }) })
   ] });
-  const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens55.extensions.list.compactMinimumHeight : tokens55.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding, ...compact ? { paddingVertical: tokens55.extensions.list.compactPaddingY } : {} };
-  return /* @__PURE__ */ jsxs42(View49, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, borderBottomWidth: divider ? tokens55.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
-    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens55.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View49, { style, children: parts }),
-    hasContent(actions) && /* @__PURE__ */ jsx56(View49, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens55.extensions.list.actionsGap, paddingRight: tokens55.extensions.list.actionsPadding, opacity: disabled ? tokens55.states.opacity.disabled : 1 }, children: content(actions) })
+  const style = { flex: 1, minWidth: 0, minHeight: compact ? tokens56.extensions.list.compactMinimumHeight : tokens56.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, padding: tokens56.extensions.list.padding, ...compact ? { paddingVertical: tokens56.extensions.list.compactPaddingY } : {} };
+  return /* @__PURE__ */ jsxs42(View49, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, borderBottomWidth: divider ? tokens56.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
+    onPress || href ? /* @__PURE__ */ jsx56(AccessiblePressable, { ...Platform26.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: ariaLabel != null ? ariaLabel : title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? tokens56.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ jsx56(View49, { style, children: parts }),
+    hasContent(actions) && /* @__PURE__ */ jsx56(View49, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens56.extensions.list.actionsGap, paddingRight: tokens56.extensions.list.actionsPadding, opacity: disabled ? tokens56.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-function KjunListSection({ title, description, actions, children, ariaLabel, divider = true, density = "default" }) {
+function KjunListSection({ title, description, actions, children, ariaLabel, surface = true, divider = true, density = "default" }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs42(View49, { style: { minWidth: 0, backgroundColor: colors.surface }, children: [
-    !!(title || description || actions) && /* @__PURE__ */ jsxs42(View49, { style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding }, children: [
+  return /* @__PURE__ */ jsxs42(View49, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+    !!(title || description || actions) && /* @__PURE__ */ jsxs42(View49, { style: { flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, padding: tokens56.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs42(View49, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ jsx56(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
-        !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens55.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+        !!description && /* @__PURE__ */ jsx56(KText, { style: { marginTop: tokens56.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
       ] }),
       content(actions)
     ] }),
     /* @__PURE__ */ jsx56(View49, { role: "list", accessibilityLabel: ariaLabel || title, children: Children5.toArray(children).map((row, i, rows) => /* @__PURE__ */ jsx56(ListRowContext.Provider, { value: { divider: divider && i < rows.length - 1, compact: density === "compact" }, children: row }, i)) })
   ] });
 }
+function KjunListItem({ children }) {
+  const { colors } = useKjunStyles(), { divider, compact } = useContext19(ListRowContext);
+  return /* @__PURE__ */ jsx56(View49, { role: "listitem", style: {
+    padding: tokens56.extensions.list.padding,
+    ...compact ? { paddingVertical: tokens56.extensions.list.compactPaddingY } : {},
+    borderBottomWidth: divider ? tokens56.border.defaultWidth : 0,
+    borderBottomColor: colors.divider,
+    minWidth: 0
+  }, children: content(children) });
+}
 
 // packages/native/src/app-navigation.tsx
-import { tokens as tokens56 } from "@kjun-ui/tokens";
+import { tokens as tokens57 } from "@kjun-ui/tokens";
 import { Children as Children6, Fragment as Fragment21, isValidElement as isValidElement8, useState as useState41 } from "react";
 import { View as View50, Platform as Platform27 } from "react-native";
 import { jsx as jsx57, jsxs as jsxs43 } from "react/jsx-runtime";
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
   const { colors } = useKjunStyles();
-  const geometry2 = tokens56.extensions.topNavigation;
-  const titleInset = Math.max(0, (geometry2.controlSize - tokens56.typography.sectionTitle.lineHeightPx) / 2);
+  const geometry2 = tokens57.extensions.topNavigation;
+  const titleInset = Math.max(0, (geometry2.controlSize - tokens57.typography.sectionTitle.lineHeightPx) / 2);
   const wrapping = Platform27.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   const edgeInset = (geometry2.controlSize - geometry2.iconSize) / 2;
   const [iconEdges, setIconEdges] = useState41({ leading: false, trailing: false });
@@ -10114,13 +10277,13 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.mainNavigation;
   const { colors } = useKjunStyles();
-  const geometry2 = tokens56.extensions.bottomNavigation;
+  const geometry2 = tokens57.extensions.bottomNavigation;
   const hasIcons = items2.some((item) => item.icon);
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ jsx57(View50, { role: "navigation", accessibilityLabel: ariaLabel, style: { flexShrink: 0, flexDirection: "row", backgroundColor: colors.surface, paddingBottom: Math.max(0, safeAreaBottom) }, children: items2.map((item) => {
     const selected = item.key === value;
     const ink = selected ? colors.brand : colors.textSecondary;
-    const ring = tokens56.border.controlWidth;
+    const ring = tokens57.border.controlWidth;
     const badge = item.badge != null && /* @__PURE__ */ jsx57(View50, { pointerEvents: "none", "aria-hidden": true, style: {
       position: "absolute",
       top: -geometry2.badgeOffset - ring,
@@ -10155,7 +10318,7 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
           gap: geometry2.itemGap,
           paddingHorizontal: geometry2.itemPaddingX,
           paddingVertical: geometry2.itemPaddingY,
-          opacity: item.disabled ? tokens56.states.opacity.disabled : 1
+          opacity: item.disabled ? tokens57.states.opacity.disabled : 1
         },
         children: [
           hasIcons && /* @__PURE__ */ jsxs43(View50, { style: { width: geometry2.iconSize, height: geometry2.iconSize, flexShrink: 0 }, children: [
@@ -10176,8 +10339,8 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
 function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
   const [width, setWidth] = useState41(0);
-  const geometry2 = tokens56.extensions.navigation;
-  const wide = width >= tokens56.responsive.bottomAction + geometry2.padding * 2;
+  const geometry2 = tokens57.extensions.navigation;
+  const wide = width >= tokens57.responsive.bottomAction + geometry2.padding * 2;
   const wrapping = Platform27.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   if (keyboardVisible && hideOnKeyboard) return null;
   return /* @__PURE__ */ jsx57(BottomActionBarContext.Provider, { value: !wide, children: /* @__PURE__ */ jsxs43(View50, { onLayout: (event) => setWidth(event.nativeEvent.layout.width), style: {
@@ -10197,52 +10360,53 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-import { useRef as useRef35, useState as useState42 } from "react";
+import { createContext as createContext23, useContext as useContext20, useRef as useRef38, useState as useState42 } from "react";
 import { Image, View as View51 } from "react-native";
-import { tokens as tokens57 } from "@kjun-ui/tokens";
+import { tokens as tokens58 } from "@kjun-ui/tokens";
 import { jsx as jsx58 } from "react/jsx-runtime";
+var ImageBackgroundContext = createContext23(void 0);
 function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
-  const { colors } = useKjunStyles();
-  const request = JSON.stringify(source != null ? source : src), current = useRef35({ request, version: 0 });
+  const { colors } = useKjunStyles(), background = useContext20(ImageBackgroundContext);
+  const request = JSON.stringify(source != null ? source : src), current = useRef38({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
   const [failed, setFailed] = useState42(null);
   const missing = !source && !src;
-  return /* @__PURE__ */ jsx58(View51, { accessibilityElementsHidden: decorative, importantForAccessibility: decorative ? "no-hide-descendants" : "auto", "aria-hidden": decorative || void 0, style: { width: "100%", aspectRatio: aspectRatio > 0 ? aspectRatio : 1, overflow: "hidden", backgroundColor: colors.secondary }, children: !missing && failed !== version ? /* @__PURE__ */ jsx58(Image, { source: source != null ? source : { uri: src }, accessible: !decorative, accessibilityLabel: decorative ? void 0 : alt, resizeMode: fit, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onLoad: () => {
+  return /* @__PURE__ */ jsx58(View51, { accessibilityElementsHidden: decorative, importantForAccessibility: decorative ? "no-hide-descendants" : "auto", "aria-hidden": decorative || void 0, style: { width: "100%", aspectRatio: aspectRatio > 0 ? aspectRatio : 1, overflow: "hidden", backgroundColor: background != null ? background : colors.secondary }, children: !missing && failed !== version ? /* @__PURE__ */ jsx58(Image, { source: source != null ? source : { uri: src }, accessible: !decorative, accessibilityLabel: decorative ? void 0 : alt, resizeMode: fit, style: { position: "absolute", inset: 0, width: "100%", height: "100%" }, onLoad: () => {
     if (version === current.current.version) onLoad == null ? void 0 : onLoad();
   }, onError: () => {
     if (version === current.current.version) {
       setFailed(version);
       onError == null ? void 0 : onError();
     }
-  } }, version) : /* @__PURE__ */ jsx58(View51, { accessible: !decorative, accessibilityRole: "image", accessibilityLabel: decorative ? void 0 : alt, "aria-hidden": decorative || void 0, style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: content(fallback2 != null ? fallback2 : /* @__PURE__ */ jsx58(KjunIcon, { name: "image", size: tokens57.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
+  } }, version) : /* @__PURE__ */ jsx58(View51, { accessible: !decorative, accessibilityRole: "image", accessibilityLabel: decorative ? void 0 : alt, "aria-hidden": decorative || void 0, style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: content(fallback2 != null ? fallback2 : /* @__PURE__ */ jsx58(KjunIcon, { name: "image", size: tokens58.extensions.image.fallbackIconSize, color: colors.textSecondary }), { color: colors.textSecondary, fontWeight: typeStyle("control").fontWeight, textAlign: "center" }) }) });
 }
-function KjunAvatar({ src, source, name = "", alt, decorative = false, size = "md", shape = "circle", fallback: fallback2, onLoad, onError }) {
+function KjunAvatar({ src, source, name = "", alt, decorative = false, size = "md", shape = "circle", color, textColor, fallback: fallback2, onLoad, onError }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), initial = Array.from(name.trim())[0];
-  return /* @__PURE__ */ jsx58(View51, { style: { width: tokens57.extensions.avatar[size], height: tokens57.extensions.avatar[size], borderRadius: shape === "circle" ? tokens57.radius.radius9999 : tokens57.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx58(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx58(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx58(KjunIcon, { name: "user", size: tokens57.extensions.avatar.fallbackIconSizes[size] }), onLoad, onError }) });
+  return /* @__PURE__ */ jsx58(View51, { style: { width: tokens58.extensions.avatar[size], height: tokens58.extensions.avatar[size], borderRadius: shape === "circle" ? tokens58.radius.radius9999 : tokens58.radius.radius8, overflow: "hidden", flexShrink: 0 }, children: /* @__PURE__ */ jsx58(ImageBackgroundContext.Provider, { value: color, children: /* @__PURE__ */ jsx58(KjunImage, { src, source, alt: alt || name || m.user, decorative, fallback: fallback2 != null ? fallback2 : initial ? /* @__PURE__ */ jsx58(KText, { style: { ...typeStyle(size === "sm" ? "control" : size === "lg" ? "sectionTitle" : "input"), fontWeight: typeStyle("control").fontWeight, color: textColor != null ? textColor : colors.textSecondary }, children: initial.toLocaleUpperCase() }) : /* @__PURE__ */ jsx58(KjunIcon, { name: "user", size: tokens58.extensions.avatar.fallbackIconSizes[size], color: textColor }), onLoad, onError }) }) });
 }
 
 // packages/native/src/chip.tsx
 import { View as View52 } from "react-native";
-import { tokens as tokens58 } from "@kjun-ui/tokens";
+import { tokens as tokens59 } from "@kjun-ui/tokens";
 import { jsx as jsx59, jsxs as jsxs44 } from "react/jsx-runtime";
 function KjunChip({ label, icon, removable = false, disabled = false, size = "md", removeLabel, onRemove }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ jsxs44(View52, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens58.extensions.chip.gap, minHeight: removable ? tokens58.extensions.chip.nativeRemoveSize : tokens58.extensions.chip[size], paddingVertical: removable ? 0 : tokens58.extensions.chip.paddingY, paddingLeft: tokens58.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens58.extensions.chip.paddingX, borderRadius: tokens58.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens58.states.opacity.disabled : 1 }, children: [
-    !!icon && /* @__PURE__ */ jsx59(KjunIcon, { name: icon, size: tokens58.extensions.chip.iconSizes[size] }),
-    /* @__PURE__ */ jsx59(KText, { style: { ...typeStyle(tokens58.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
-    removable && /* @__PURE__ */ jsx59(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens58.extensions.chip.nativeRemoveSize, height: tokens58.extensions.chip.nativeRemoveSize, borderRadius: tokens58.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx59(KjunIcon, { name: "x", size: tokens58.extensions.chip.removeIconSizes[size] }) })
+  return /* @__PURE__ */ jsxs44(View52, { style: { alignSelf: "flex-start", maxWidth: "100%", minWidth: 0, flexShrink: 1, flexDirection: "row", alignItems: "center", gap: tokens59.extensions.chip.gap, minHeight: removable ? tokens59.extensions.chip.nativeRemoveSize : tokens59.extensions.chip[size], paddingVertical: removable ? 0 : tokens59.extensions.chip.paddingY, paddingLeft: tokens59.extensions.chip.paddingX, paddingRight: removable ? 0 : tokens59.extensions.chip.paddingX, borderRadius: tokens59.extensions.chip.radius, backgroundColor: colors.secondary, opacity: disabled ? tokens59.states.opacity.disabled : 1 }, children: [
+    !!icon && /* @__PURE__ */ jsx59(KjunIcon, { name: icon, size: tokens59.extensions.chip.iconSizes[size] }),
+    /* @__PURE__ */ jsx59(KText, { style: { ...typeStyle(tokens59.extensions.chip.typography[size]), flexShrink: 1, minWidth: 0 }, children: label }),
+    removable && /* @__PURE__ */ jsx59(AccessiblePressable, { accessibilityRole: "button", accessibilityLabel: removeLabel || m.remove(label), disabled, accessibilityState: { disabled }, onPress: onRemove, style: { width: tokens59.extensions.chip.nativeRemoveSize, height: tokens59.extensions.chip.nativeRemoveSize, borderRadius: tokens59.extensions.chip.radius, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx59(KjunIcon, { name: "x", size: tokens59.extensions.chip.removeIconSizes[size] }) })
   ] });
 }
 
 // packages/native/src/fab.tsx
-import { tokens as tokens59 } from "@kjun-ui/tokens";
+import { tokens as tokens60 } from "@kjun-ui/tokens";
 import { jsx as jsx60 } from "react/jsx-runtime";
 function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offsetBottom = 0, onPress }) {
   const { colors } = useKjunStyles();
-  const { size, inset, iconSize } = tokens59.extensions.fab;
+  const { size, inset, iconSize } = tokens60.extensions.fab;
   return /* @__PURE__ */ jsx60(
     AccessiblePressable,
     {
@@ -10255,15 +10419,15 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
         position: "absolute",
         right: inset,
         bottom: inset + Math.max(0, safeAreaBottom) + Math.max(0, offsetBottom),
-        zIndex: tokens59.layers.page.navigation,
+        zIndex: tokens60.layers.page.navigation,
         width: size,
         height: size,
         borderRadius: size / 2,
         alignItems: "center",
         justifyContent: "center",
         backgroundColor: pressed ? colors.brandActive : colors.brand,
-        opacity: disabled ? tokens59.states.opacity.disabled : 1,
-        boxShadow: shadowLayers(tokens59.elevation.floating, colors)
+        opacity: disabled ? tokens60.states.opacity.disabled : 1,
+        boxShadow: shadowLayers(tokens60.elevation.floating, colors)
       }),
       children: /* @__PURE__ */ jsx60(KjunIcon, { name: icon, size: iconSize, color: colors.onBrand })
     }
@@ -10271,12 +10435,12 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
 }
 
 // packages/native/src/range-input.tsx
-import { useEffect as useEffect27, useMemo as useMemo3, useRef as useRef36, useState as useState43 } from "react";
+import { useEffect as useEffect28, useMemo as useMemo3, useRef as useRef39, useState as useState43 } from "react";
 import { PanResponder, Platform as Platform28, Pressable as Pressable3, View as View53 } from "react-native";
-import { tokens as tokens60, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
+import { tokens as tokens61, createSliderDomain, sliderKey } from "@kjun-ui/tokens";
 import { jsx as jsx61, jsxs as jsxs45 } from "react/jsx-runtime";
-var geometry = tokens60.extensions.slider;
-var targetSize = tokens60.native.minimumTouchTarget;
+var geometry = tokens61.extensions.slider;
+var targetSize = tokens61.native.minimumTouchTarget;
 var trackFocus = { tabIndex: -1 };
 function RangeInput({
   value,
@@ -10299,15 +10463,15 @@ function RangeInput({
   const [hovered, setHovered] = useState43(null);
   const [dragging, setDragging] = useState43(null);
   const [focused, setFocused] = useState43(null);
-  const track = useRef36(null), measured = useRef36({ x: 0, width: 1 }), selected = useRef36(0), dirty = useRef36(false);
-  const latest = useRef36(values);
+  const track = useRef39(null), measured = useRef39({ x: 0, width: 1 }), selected = useRef39(0), dirty = useRef39(false);
+  const latest = useRef39(values);
   latest.current = values;
-  const callbacks = useRef36({ onValueChange, onChangeCommit });
+  const callbacks = useRef39({ onValueChange, onChangeCommit });
   callbacks.current = { onValueChange, onChangeCommit };
-  useEffect27(() => {
+  useEffect28(() => {
     if (!valid) console.warn("KJUN Slider: \uBC94\uC704\xB7step\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (blocked) {
       setDragging(null);
       setHovered(null);
@@ -10376,10 +10540,10 @@ function RangeInput({
     View53,
     {
       style: {
-        minWidth: tokens60.extensions.slider.minimumWidth,
+        minWidth: tokens61.extensions.slider.minimumWidth,
         width: "100%",
-        gap: tokens60.dimension.value4,
-        opacity: blocked ? tokens60.states.opacity.disabled : 1
+        gap: tokens61.dimension.value4,
+        opacity: blocked ? tokens61.states.opacity.disabled : 1
       },
       children: [
         /* @__PURE__ */ jsxs45(
@@ -10389,7 +10553,7 @@ function RangeInput({
               flexDirection: "row",
               alignItems: "baseline",
               justifyContent: "space-between",
-              gap: tokens60.dimension.value12,
+              gap: tokens61.dimension.value12,
               minWidth: 0
             },
             children: [
@@ -10450,7 +10614,7 @@ function RangeInput({
                     {
                       style: {
                         height: geometry.track,
-                        borderRadius: tokens60.radius.radius9999,
+                        borderRadius: tokens61.radius.radius9999,
                         backgroundColor: colors.border
                       }
                     }
@@ -10465,7 +10629,7 @@ function RangeInput({
                     position: "absolute",
                     top: (targetSize - geometry.track) / 2,
                     height: geometry.track,
-                    borderRadius: tokens60.radius.radius9999,
+                    borderRadius: tokens61.radius.radius9999,
                     left: pct(values.length === 2 ? percent(values[0]) : 0),
                     width: pct(
                       percent(values[values.length - 1]) - (values.length === 2 ? percent(values[0]) : 0)
@@ -10541,14 +10705,14 @@ function RangeInput({
                       style: {
                         width: geometry.thumb,
                         height: geometry.thumb,
-                        borderRadius: tokens60.radius.radius9999,
-                        borderWidth: tokens60.border.controlWidth,
+                        borderRadius: tokens61.radius.radius9999,
+                        borderWidth: tokens61.border.controlWidth,
                         borderColor: !blocked && dragging === index ? colors.brandActive : !blocked && hovered === index ? colors.brandHover : colors.brand,
                         backgroundColor: colors.surface,
                         ...Platform28.OS === "web" && !blocked && focused === index ? {
                           outlineStyle: "solid",
-                          outlineWidth: tokens60.states.focus.width,
-                          outlineOffset: tokens60.states.focus.choiceOffset,
+                          outlineWidth: tokens61.states.focus.width,
+                          outlineOffset: tokens61.states.focus.choiceOffset,
                           outlineColor: colors.focusRing
                         } : {}
                       }
@@ -10572,9 +10736,9 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-import { useEffect as useEffect28, useRef as useRef37, useState as useState44 } from "react";
+import { useEffect as useEffect29, useRef as useRef40, useState as useState44 } from "react";
 import { Platform as Platform29, View as View54 } from "react-native";
-import { createNumberDomain, quantityKeyAction, tokens as tokens61 } from "@kjun-ui/tokens";
+import { createNumberDomain, quantityKeyAction, tokens as tokens62 } from "@kjun-ui/tokens";
 
 // shared/package-runtime/component-icons.ts
 import minus from "@kjun-ui/icons/icons/minus";
@@ -10588,23 +10752,23 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const field = useKjunField();
   const invalid = error || !!(field == null ? void 0 : field.error);
   const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0;
-  const geometry2 = tokens61.extensions.compound;
-  const buttonStyle = { width: tokens61.input[size].height, paddingHorizontal: 0 };
-  const outer = tokens61.input[size].radius;
+  const geometry2 = tokens62.extensions.compound;
+  const buttonStyle = { width: tokens62.input[size].height, paddingHorizontal: 0 };
+  const outer = tokens62.input[size].radius;
   const decreaseStyle = { ...buttonStyle, borderRadius: 0, borderTopLeftRadius: outer, borderBottomLeftRadius: outer };
   const increaseStyle = { ...buttonStyle, borderRadius: 0, borderTopRightRadius: outer, borderBottomRightRadius: outer };
   const domain = createNumberDomain({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
   const surface = useFieldSurface(size, { disabled: blocked, invalid });
   const [draft, setDraft] = useState44(String(value));
-  const inputRef = useRef37(null);
-  const composing = useRef37(false), dirty = useRef37(false), accepted = useRef37(value);
-  const cancelledEscape = useRef37(false);
-  useEffect28(() => {
+  const inputRef = useRef40(null);
+  const composing = useRef40(false), dirty = useRef40(false), accepted = useRef40(value);
+  const cancelledEscape = useRef40(false);
+  useEffect29(() => {
     setDraft(String(value));
     accepted.current = value;
     dirty.current = false;
   }, [value, precision, min, max, step]);
-  useEffect28(() => {
+  useEffect29(() => {
     if (!valid) console.warn("KJUN QuantityStepper: \uBC94\uC704\xB7step\xB7\uC815\uBC00\uB3C4\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
   const emit = (next) => {
@@ -10641,7 +10805,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     } else if (action === "commit") commit();
     else move(action === "increment" ? 1 : -1);
   };
-  const handlers = useRef37({ key, edit: (text) => {
+  const handlers = useRef40({ key, edit: (text) => {
     dirty.current = true;
     setDraft(text);
   } });
@@ -10649,7 +10813,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     dirty.current = true;
     setDraft(text);
   } };
-  useEffect28(() => {
+  useEffect29(() => {
     if (Platform29.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
@@ -10678,12 +10842,12 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
       input.removeEventListener("compositionend", end);
     };
   }, []);
-  const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens61.input[size].height, marginTop: -tokens61.input[size].height / 2, borderRadius: surface.spec.radius };
+  const surfaceBox = { position: "absolute", left: 0, right: 0, top: "50%", height: tokens62.input[size].height, marginTop: -tokens62.input[size].height / 2, borderRadius: surface.spec.radius };
   const hug = Platform29.OS === "web" && !block ? { width: "fit-content" } : {};
   return /* @__PURE__ */ jsx62(IconFallbacks, { icons: componentIcons, children: /* @__PURE__ */ jsxs46(View54, { style: { flexDirection: "row", alignItems: "center", alignSelf: block ? "stretch" : "flex-start", maxWidth: "100%", borderRadius: surface.spec.radius, ...hug }, children: [
     /* @__PURE__ */ jsx62(View54, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, backgroundColor: colors.inputBg } }),
     /* @__PURE__ */ jsx62(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx62(KjunButton, { size, style: decreaseStyle, variant: "ghost", ariaLabel: m.decreaseQuantity, disabled: blocked || value <= min, onPress: () => move(-1), prefixIcon: "minus" }) }),
-    /* @__PURE__ */ jsx62(View54, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens61.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
+    /* @__PURE__ */ jsx62(View54, { style: { flex: block ? 1 : void 0, width: block ? void 0 : geometry2.valueWidth, minWidth: 0, minHeight: finePointer() ? void 0 : tokens62.native.minimumTouchTarget, justifyContent: "center" }, ...fieldTarget(() => {
       var _a;
       return (_a = inputRef.current) == null ? void 0 : _a.focus();
     }, blocked), children: /* @__PURE__ */ jsx62(
@@ -10712,30 +10876,30 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
         },
         onSubmitEditing: Platform29.OS === "web" ? void 0 : commit,
         ...Platform29.OS === "web" ? { "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-labelledby": labelledBy, "aria-describedby": field == null ? void 0 : field.describedBy, "aria-invalid": invalid || void 0, "aria-required": (field == null ? void 0 : field.required) || void 0 } : { onKeyPress: key },
-        style: { width: "100%", minWidth: 0, ...surface.style, borderRadius: 0, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "transparent", borderRightColor: "transparent", backgroundColor: !blocked && (surface.active || surface.hovered) ? colors.hover : "transparent", outlineWidth: 0, color: surface.ink, fontFamily, ...inputTypeStyle(size), textAlign: "center", paddingHorizontal: surface.spec.padding - tokens61.border.controlWidth, paddingVertical: 0 }
+        style: { width: "100%", minWidth: 0, ...surface.style, borderRadius: 0, borderTopColor: "transparent", borderBottomColor: "transparent", borderLeftColor: "transparent", borderRightColor: "transparent", backgroundColor: !blocked && (surface.active || surface.hovered) ? colors.hover : "transparent", outlineWidth: 0, color: surface.ink, fontFamily, ...inputTypeStyle(size), textAlign: "center", paddingHorizontal: surface.spec.padding - tokens62.border.controlWidth, paddingVertical: 0 }
       }
     ) }),
     /* @__PURE__ */ jsx62(CompoundTarget, { square: true, children: /* @__PURE__ */ jsx62(KjunButton, { size, style: increaseStyle, variant: "ghost", ariaLabel: m.increaseQuantity, disabled: blocked || max !== void 0 && value >= max, onPress: () => move(1), prefixIcon: "plus" }) }),
-    (invalid || surface.active) && /* @__PURE__ */ jsx62(View54, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens61.border.controlWidth : tokens61.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
+    (invalid || surface.active) && /* @__PURE__ */ jsx62(View54, { pointerEvents: "none", "aria-hidden": true, style: { ...surfaceBox, borderWidth: invalid ? tokens62.border.controlWidth : tokens62.states.focus.width, borderColor: invalid ? colors.danger : colors.focusRing } })
   ] }) });
 }
 
 // packages/native/src/time-picker.tsx
-import { Fragment as Fragment22, useEffect as useEffect29, useId as useId11, useMemo as useMemo4, useRef as useRef38, useState as useState45 } from "react";
+import { Fragment as Fragment22, useEffect as useEffect30, useId as useId11, useMemo as useMemo4, useRef as useRef41, useState as useState45 } from "react";
 import { View as View55 } from "react-native";
-import { createTimeDomain, tokens as tokens62 } from "@kjun-ui/tokens";
+import { createTimeDomain, tokens as tokens63 } from "@kjun-ui/tokens";
 import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
 function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1, secondStep = 1, disabled = false, error = false, clearable = true, size = "md", ariaLabel, onValueChange, onChangeCommit }) {
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.time;
-  const geometry2 = tokens62.extensions.timePicker, spec = tokens62.input[size];
+  const geometry2 = tokens63.extensions.timePicker, spec = tokens63.input[size];
   const { colors } = useKjunStyles();
-  const first = useRef38(null);
+  const first = useRef41(null);
   const [focused, setFocused] = useState45(false), [opened, setOpened] = useState45(null);
   const field = useKjunField(), uid = useId11();
   const fieldId = (field == null ? void 0 : field.id) || `kjun-time-${uid}`;
   const domain = useMemo4(() => createTimeDomain({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
-  useEffect29(() => {
+  useEffect30(() => {
     if (!valid) console.warn("KJUN TimePicker: \uC2DC\uAC01 \uBC94\uC704\xB7\uAC04\uACA9\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
   const change = (next) => {
@@ -10752,12 +10916,12 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
         if (typeof next === "number") change(domain.select(value, index, next));
       }, onOpenChange: (open) => setOpened(open ? index : null), ariaLabel: ((field == null ? void 0 : field.label) || ariaLabel) + " " + label, placeholder: label, disabled: disabled || !valid, error, size, clearable: false, searchable: false }) }) }) })
     ] }, label)) }),
-    clearable && value !== null && /* @__PURE__ */ jsx63(View55, { style: { marginVertical: Math.min(0, (spec.height - tokens62.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ jsx63(FieldClear, { size, label: m.clearValue(ariaLabel), disabled: disabled || !valid, onPress: () => {
+    clearable && value !== null && /* @__PURE__ */ jsx63(View55, { style: { marginVertical: Math.min(0, (spec.height - tokens63.native.minimumTouchTarget) / 2) }, children: /* @__PURE__ */ jsx63(FieldClear, { size, label: m.clearValue(ariaLabel), disabled: disabled || !valid, onPress: () => {
       var _a;
       change(null);
       (_a = first.current) == null ? void 0 : _a.focus();
     } }) }),
-    !!(error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx63(View55, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens62.border.controlWidth : tokens62.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
+    !!(error || !!(field == null ? void 0 : field.error) || focused || opened !== null) && /* @__PURE__ */ jsx63(View55, { pointerEvents: "none", "aria-hidden": true, style: { position: "absolute", inset: 0, borderRadius: spec.radius, borderWidth: error || !!(field == null ? void 0 : field.error) ? tokens63.border.controlWidth : tokens63.states.focus.width, borderColor: error || (field == null ? void 0 : field.error) ? colors.danger : colors.focusRing } })
   ] });
 }
 export {
@@ -10806,6 +10970,7 @@ export {
   KjunInput,
   KjunKpiHero,
   KjunKpiRow,
+  KjunListItem,
   KjunListRow,
   KjunListSection,
   KjunListSkeleton,
@@ -10845,6 +11010,7 @@ export {
   KjunTimePicker,
   KjunTooltip,
   KjunTopNavigation,
+  createKjunFeedback,
   kjunMessagesEn,
   kjunMessagesKo,
   useKjunFeedback,