@kjun-ui/native 0.14.0 → 0.16.0

package/dist/index.web.cjs

@@ -1898,13 +1898,25 @@ function KjunFormLayout({
   ) });
 }
 
-// shared/package-runtime/content-presence.ts
+// shared/package-runtime/use-after-close.ts
 var import_react19 = require("react");
+function useAfterClose(present, onAfterClose, enabled2 = true) {
+  const was = (0, import_react19.useRef)(present), callback = (0, import_react19.useRef)(onAfterClose);
+  callback.current = onAfterClose;
+  (0, import_react19.useEffect)(() => {
+    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
+var import_react20 = require("react");
 function hasContent(node) {
   if (node == null || typeof node === "boolean") return false;
   if (typeof node === "string") return node.trim().length > 0;
   if (Array.isArray(node)) return node.some(hasContent);
-  if ((0, import_react19.isValidElement)(node) && node.type === import_react19.Fragment)
+  if ((0, import_react20.isValidElement)(node) && node.type === import_react20.Fragment)
     return hasContent(node.props.children);
   return true;
 }
@@ -1917,7 +1929,7 @@ function LayerBackdrop({ onPress, style }) {
 }
 
 // packages/native/src/modal.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // shared/package-runtime/form-actions.ts
 function formActionsNeedStack(width, widths, gap) {
@@ -1930,17 +1942,17 @@ var import_tokens11 = require("@kjun-ui/tokens");
 var import_react_native14 = require("react-native");
 
 // packages/native/src/overlay-host.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_react_native12 = require("react-native");
 
 // packages/native/src/modal-window.web.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_react_dom = require("react-dom");
 var import_react_native11 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ModalWindow({ generation, children, visible, ...props }) {
-  const [container, setContainer] = (0, import_react20.useState)(null);
-  (0, import_react20.useLayoutEffect)(() => {
+  const [container, setContainer] = (0, import_react21.useState)(null);
+  (0, import_react21.useLayoutEffect)(() => {
     const element = document.createElement("div");
     element.style.display = "contents";
     setContainer(element);
@@ -1961,17 +1973,18 @@ var import_jsx_runtime12 = (
   // a new window even when an interrupted exit retained the old surface.
   require("react/jsx-runtime")
 );
-var FeedbackOverlayContext = (0, import_react21.createContext)(
+var FeedbackOverlayContext = (0, import_react22.createContext)(
   null
 );
 function ScopedNativeModal({ children, visible, ...props }) {
-  var _a;
-  const layers = useLayerState(), scope = (0, import_react21.useContext)(LayerScope);
+  const layers = useLayerState(), scope = (0, import_react22.useContext)(LayerScope);
   const entry = scope ? layers.entries.get(scope) : void 0;
-  const generation = (_a = entry == null ? void 0 : entry.order) != null ? _a : 0;
+  const last = (0, import_react22.useRef)(0);
+  if (entry) last.current = entry.order;
+  const generation = last.current;
   const inactive = !!scope && !layers.isActive(scope);
-  const host = (0, import_react21.useContext)(FeedbackOverlayContext), id = "kjun-" + (0, import_react21.useId)(), register = host == null ? void 0 : host.register;
-  (0, import_react21.useEffect)(
+  const host = (0, import_react22.useContext)(FeedbackOverlayContext), id = "kjun-" + (0, import_react22.useId)(), register = host == null ? void 0 : host.register;
+  (0, import_react22.useEffect)(
     () => visible && register ? register(id) : void 0,
     [visible, register, id, generation]
   );
@@ -2020,7 +2033,7 @@ function KjunFormActions({
   cancelText != null ? cancelText : cancelText = m.cancel;
   confirmText != null ? confirmText : confirmText = m.save;
   const { fontFamily } = useKjunStyles();
-  const [width, setWidth] = (0, import_react22.useState)(0), [measurements, setMeasurements] = (0, import_react22.useState)({});
+  const [width, setWidth] = (0, import_react23.useState)(0), [measurements, setMeasurements] = (0, import_react23.useState)({});
   const labels = [showCancel && { text: cancelText }, showConfirm && { text: confirmText }].filter(Boolean);
   const keyFor = (text) => `${fontFamily}:${size}:${text}`;
   const widths = labels.map((label) => measurements[keyFor(label.text)] === void 0 ? 0 : Math.max(import_tokens11.tokens.button.minWidths[size], measurements[keyFor(label.text)] + import_tokens11.tokens.button.paddingX[size] * 2));
@@ -2092,6 +2105,7 @@ function KjunModal({
   open,
   onOpenChange,
   onClose,
+  onAfterClose,
   onCancel,
   onConfirm,
   title = "",
@@ -2124,7 +2138,7 @@ function KjunModal({
   const motion = useNativePresence(open, import_tokens11.tokens.motion.layerEnter, import_tokens11.tokens.motion.layerExit, true, 0, { fade: import_tokens11.tokens.motion.backdropExit });
   const offset = useMotionValue(open ? 0 : import_tokens11.tokens.motionDistance.modalExit, open ? import_tokens11.tokens.motion.layerEnter : import_tokens11.tokens.motion.layerExit, import_tokens11.tokens.motionDistance.modalEnter, open ? motionOut : motionIn, true);
   const backdrop = useNativePresence(open, import_tokens11.tokens.motion.backdrop, import_tokens11.tokens.motion.backdropExit, true, 0, { fade: import_tokens11.tokens.motion.backdropExit });
-  (0, import_react22.useLayoutEffect)(() => {
+  (0, import_react23.useLayoutEffect)(() => {
     if (!motion.present) {
       offset.stopAnimation();
       offset.setValue(import_tokens11.tokens.motionDistance.modalEnter);
@@ -2139,10 +2153,15 @@ function KjunModal({
   const layer = useLayer(open, motion.present, "window", () => {
     if (closeOnEsc) close();
   });
+  const iosDismiss = import_react_native14.Platform.OS === "ios";
+  useAfterClose(motion.present, onAfterClose, !iosDismiss);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(LayerScope.Provider, { value: layer.id, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ScopedNativeModal,
     {
       visible: motion.present,
+      onDismiss: iosDismiss ? () => {
+        if (!open) onAfterClose == null ? void 0 : onAfterClose();
+      } : void 0,
       transparent: true,
       animationType: "none",
       onRequestClose: () => {
@@ -2300,7 +2319,7 @@ function KjunModal({
 
 // packages/native/src/card.tsx
 var import_tokens12 = require("@kjun-ui/tokens");
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_react_native15 = require("react-native");
 var import_react_native_svg2 = __toESM(require("react-native-svg"), 1);
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -2326,7 +2345,7 @@ function KjunCard({
   onPress
 }) {
   const { colors } = useKjunStyles();
-  const id = "kjun-" + (0, import_react23.useId)().replace(/[^a-z0-9]/gi, "");
+  const id = "kjun-" + (0, import_react24.useId)().replace(/[^a-z0-9]/gi, "");
   const inset = import_tokens12.tokens.card.padding[padding], bodyInset = import_tokens12.tokens.card.padding[bodyPadding];
   const corner = import_tokens12.tokens.card.radii[radius];
   const paint = import_tokens12.tokens.cardSurfaces[surface];
@@ -2410,7 +2429,7 @@ function alertRole(tone, live) {
 
 // packages/native/src/display-primitives.tsx
 var import_tokens14 = require("@kjun-ui/tokens");
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_react_native16 = require("react-native");
 var import_react_native_svg3 = __toESM(require("react-native-svg"), 1);
 
@@ -2534,7 +2553,7 @@ function KjunEmpty({
   text != null ? text : text = m.noData;
   const { colors } = useKjunStyles();
   const spec = import_tokens14.tokens.extensions.empty;
-  const stateContent = (0, import_react24.useContext)(DataStateContentContext);
+  const stateContent = (0, import_react25.useContext)(DataStateContentContext);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     import_react_native16.View,
     {
@@ -2568,8 +2587,8 @@ function KjunEmpty({
 }
 function KjunSpinner({ size = "md", text }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = (0, import_react24.useRef)(new import_react_native16.Animated.Value(0)).current;
-  (0, import_react24.useEffect)(() => {
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), rotation = (0, import_react25.useRef)(new import_react_native16.Animated.Value(0)).current;
+  (0, import_react25.useEffect)(() => {
     if (reduced) return;
     const loop = import_react_native16.Animated.loop(
       import_react_native16.Animated.timing(rotation, {
@@ -2658,7 +2677,7 @@ function KjunAlert({
 }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
-  const [visible, setVisible] = (0, import_react24.useState)(true);
+  const [visible, setVisible] = (0, import_react25.useState)(true);
   if (!visible) return null;
   const tone = variant || (type === "error" ? "danger" : type), small = size === "sm";
   const geometry2 = import_tokens14.tokens.extensions.alert;
@@ -2862,7 +2881,7 @@ function KjunProgress({
 
 // packages/native/src/skeleton-base.tsx
 var import_tokens15 = require("@kjun-ui/tokens");
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_react_native17 = require("react-native");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function KjunSkeleton({
@@ -2874,8 +2893,8 @@ function KjunSkeleton({
   animated = true,
   rounded = true
 }) {
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react25.useRef)(new import_react_native17.Animated.Value(1)).current;
-  (0, import_react25.useEffect)(() => {
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react26.useRef)(new import_react_native17.Animated.Value(1)).current;
+  (0, import_react26.useEffect)(() => {
     if (!animated || reduced) return;
     const loop = import_react_native17.Animated.loop(
       import_react_native17.Animated.sequence([
@@ -3030,7 +3049,7 @@ function KjunSkeleton({
 }
 
 // packages/native/src/layout-primitives.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_native18 = require("react-native");
 var import_tokens16 = require("@kjun-ui/tokens");
 
@@ -3053,13 +3072,15 @@ var toneRole = {
   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__ */ (0, import_jsx_runtime17.jsx)(
     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: [
@@ -3074,23 +3095,23 @@ function KjunText({ variant = "body", tone = "default", align, maxLines, style,
   );
 }
 function flatten(children, path = "") {
-  return import_react26.Children.toArray(children).flatMap((child, i) => {
+  return import_react27.Children.toArray(children).flatMap((child, i) => {
     const key = `${path}${i}`;
-    return (0, import_react26.isValidElement)(child) && child.type === import_react26.Fragment ? flatten(child.props.children, `${key}.`) : [[key, child]];
+    return (0, import_react27.isValidElement)(child) && child.type === import_react27.Fragment ? flatten(child.props.children, `${key}.`) : [[key, child]];
   });
 }
 function items(children, childAlign) {
   return flatten(children).map(([key, child]) => {
     if (typeof child === "string" || typeof child === "number") return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(KText, { children: child }, key);
-    if ((0, import_react26.isValidElement)(child) && child.type === KjunFormGroup) {
+    if ((0, import_react27.isValidElement)(child) && child.type === KjunFormGroup) {
       const group = child;
-      return (0, import_react26.cloneElement)(group, { key, style: [{ marginBottom: 0 }, group.props.style] });
+      return (0, import_react27.cloneElement)(group, { key, style: [{ marginBottom: 0 }, group.props.style] });
     }
-    if (childAlign && (0, import_react26.isValidElement)(child) && (child.type === KjunButton || child.type === KjunBadge)) {
+    if (childAlign && (0, import_react27.isValidElement)(child) && (child.type === KjunButton || child.type === KjunBadge)) {
       const control = child;
-      return (0, import_react26.cloneElement)(control, { key, style: [{ alignSelf: childAlign }, control.props.style] });
+      return (0, import_react27.cloneElement)(control, { key, style: [{ alignSelf: childAlign }, control.props.style] });
     }
-    return (0, import_react26.isValidElement)(child) ? (0, import_react26.cloneElement)(child, { key }) : child;
+    return (0, import_react27.isValidElement)(child) ? (0, import_react27.cloneElement)(child, { key }) : child;
   });
 }
 var followed = (align) => align && align !== "stretch" ? crossAxis[align] : void 0;
@@ -3127,13 +3148,13 @@ function KjunInline({ gap = "sm", align, justify = "start", wrap = true, style,
 }
 
 // shared/package-runtime/feedback-dialog.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
   const options = request.options;
-  const [value, setValue] = (0, import_react27.useState)(options.initialValue || "");
-  const [error, setError] = (0, import_react27.useState)("");
-  const [busy, setBusy] = (0, import_react27.useState)(false);
-  const working = (0, import_react27.useRef)(false);
+  const [value, setValue] = (0, import_react28.useState)(options.initialValue || "");
+  const [error, setError] = (0, import_react28.useState)("");
+  const [busy, setBusy] = (0, import_react28.useState)(false);
+  const working = (0, import_react28.useRef)(false);
   const active = () => {
     var _a;
     return ((_a = controller.getSnapshot().current) == null ? void 0 : _a.id) === request.id;
@@ -3176,11 +3197,11 @@ function useFeedbackDialog(controller, request, messages = kjunMessagesKo) {
 
 // shared/package-runtime/feedback-motion.ts
 var import_tokens17 = require("@kjun-ui/tokens");
-var import_react28 = require("react");
+var import_react29 = require("react");
 function usePresentedToasts(toasts, reduced) {
-  const [items2, setItems] = (0, import_react28.useState)([]);
-  const removals = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react28.useLayoutEffect)(() => {
+  const [items2, setItems] = (0, import_react29.useState)([]);
+  const removals = (0, import_react29.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react29.useLayoutEffect)(() => {
     const ids = new Set(toasts.map((toast) => toast.id));
     setItems((previous) => {
       const old = new Map(previous.map((item) => [item.toast.id, item]));
@@ -3202,15 +3223,15 @@ function usePresentedToasts(toasts, reduced) {
       removals.current.clear();
     }
   }, [toasts, reduced]);
-  (0, import_react28.useLayoutEffect)(() => () => {
+  (0, import_react29.useLayoutEffect)(() => () => {
     for (const timer of removals.current.values()) clearTimeout(timer);
     removals.current.clear();
   }, []);
   return items2;
 }
 function usePresentedRequest(current, reduced) {
-  const [request, setRequest] = (0, import_react28.useState)(current);
-  (0, import_react28.useLayoutEffect)(() => {
+  const [request, setRequest] = (0, import_react29.useState)(current);
+  (0, import_react29.useLayoutEffect)(() => {
     if (!request || request.id === (current == null ? void 0 : current.id) || reduced) {
       setRequest(current);
       return;
@@ -3222,14 +3243,14 @@ function usePresentedRequest(current, reduced) {
 }
 
 // packages/native/src/feedback-context.ts
-var import_react29 = require("react");
-var KjunFeedbackContext = (0, import_react29.createContext)(null);
+var import_react30 = require("react");
+var KjunFeedbackContext = (0, import_react30.createContext)(null);
 function useOptionalKjunFeedback() {
-  return (0, import_react29.useContext)(KjunFeedbackContext);
+  return (0, import_react30.useContext)(KjunFeedbackContext);
 }
 
 // packages/native/src/toast-stack.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_react_native20 = require("react-native");
 var import_tokens20 = require("@kjun-ui/tokens");
 
@@ -3247,7 +3268,7 @@ function shadowLayers(layers, colors) {
 
 // packages/native/src/toast.tsx
 var import_tokens18 = require("@kjun-ui/tokens");
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_react_native19 = require("react-native");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function ToastView({
@@ -3255,14 +3276,14 @@ function ToastView({
   controller
 }) {
   const m = useKjunMessages();
-  const { colors } = useKjunStyles(), reduced = useReducedMotion(), progress = (0, import_react30.useRef)(new import_react_native19.Animated.Value(1)).current;
-  const reasons = (0, import_react30.useRef)({
+  const { colors } = useKjunStyles(), reduced = useReducedMotion(), progress = (0, import_react31.useRef)(new import_react_native19.Animated.Value(1)).current;
+  const reasons = (0, import_react31.useRef)({
     hover: /* @__PURE__ */ Symbol("hover"),
     actionHover: /* @__PURE__ */ Symbol("actionHover"),
     closeHover: /* @__PURE__ */ Symbol("closeHover"),
     focus: /* @__PURE__ */ Symbol("focus")
   }).current;
-  (0, import_react30.useEffect)(() => () => {
+  (0, import_react31.useEffect)(() => () => {
     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 = {
@@ -3271,7 +3292,7 @@ function ToastView({
     warning: "alert-triangle",
     info: "info-circle"
   }[tone];
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     progress.stopAnimation();
     progress.setValue(toast.duration ? toast.remaining / toast.duration : 1);
     if (!toast.paused && !reduced) {
@@ -3385,7 +3406,7 @@ function ToastView({
 }
 
 // packages/native/src/toast-reflow.web.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 
 // shared/package-runtime/toast-layout.ts
 var import_tokens19 = require("@kjun-ui/tokens");
@@ -3448,27 +3469,27 @@ function createToastLayout() {
 
 // packages/native/src/toast-reflow.web.ts
 function useToastReflow(root, reduced) {
-  const layout = (0, import_react31.useRef)(createToastLayout()).current;
-  (0, import_react31.useLayoutEffect)(() => {
+  const layout = (0, import_react32.useRef)(createToastLayout()).current;
+  (0, import_react32.useLayoutEffect)(() => {
     if (root.current) layout.update(root.current, reduced);
   });
-  (0, import_react31.useLayoutEffect)(() => () => layout.destroy(), [layout]);
+  (0, import_react32.useLayoutEffect)(() => () => layout.destroy(), [layout]);
 }
 
 // packages/native/src/toast-stack.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function ToastSlot({ item, controller, boxes }) {
-  const born = (0, import_react32.useRef)(Math.min(import_tokens20.tokens.motion.toastEnter, Date.now() - item.born)).current;
+  const born = (0, import_react33.useRef)(Math.min(import_tokens20.tokens.motion.toastEnter, Date.now() - item.born)).current;
   const motion = useNativePresence(!item.exiting, import_tokens20.tokens.motion.toastEnter - born, import_tokens20.tokens.motion.toastExit, true, born / import_tokens20.tokens.motion.toastEnter);
-  const offset = (0, import_react32.useRef)(new import_react_native20.Animated.Value(0)).current;
+  const offset = (0, import_react33.useRef)(new import_react_native20.Animated.Value(0)).current;
   const box = boxes.get(item.toast.id);
-  (0, import_react32.useLayoutEffect)(() => {
+  (0, import_react33.useLayoutEffect)(() => {
     if (motion.reduced) {
       offset.stopAnimation();
       offset.setValue(0);
     }
   }, [motion.reduced, offset]);
-  (0, import_react32.useLayoutEffect)(() => () => offset.stopAnimation(), [offset]);
+  (0, import_react33.useLayoutEffect)(() => () => offset.stopAnimation(), [offset]);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_react_native20.Animated.View,
     {
@@ -3507,9 +3528,9 @@ function ToastSlot({ item, controller, boxes }) {
 function ToastStack({ items: items2, controller }) {
   var _a;
   const layers = useLayerState();
-  const root = (0, import_react32.useRef)(null), reduced = useReducedMotion();
+  const root = (0, import_react33.useRef)(null), reduced = useReducedMotion();
   useToastReflow(root, reduced);
-  const boxes = (0, import_react32.useRef)(/* @__PURE__ */ new Map()).current;
+  const boxes = (0, import_react33.useRef)(/* @__PURE__ */ new Map()).current;
   for (const id of boxes.keys()) if (!items2.some((item) => item.toast.id === id)) boxes.delete(id);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native20.View, { ref: root, pointerEvents: "box-none", style: {
     position: "absolute",
@@ -3524,7 +3545,7 @@ function ToastStack({ items: items2, controller }) {
 
 // packages/native/src/feedback.tsx
 var import_tokens21 = require("@kjun-ui/tokens");
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_react_native21 = require("react-native");
 var import_tokens22 = require("@kjun-ui/tokens");
 var import_jsx_runtime20 = require("react/jsx-runtime");
@@ -3576,11 +3597,11 @@ function FeedbackDialog({
   );
 }
 function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
-  const [owned] = (0, import_react33.useState)(() => controllerProp ? void 0 : (0, import_tokens21.createFeedbackController)());
+  const [owned] = (0, import_react34.useState)(() => controllerProp ? void 0 : (0, import_tokens21.createFeedbackController)());
   const controller = controllerProp ? (0, import_tokens21.feedbackControllerOf)(controllerProp) : owned;
-  (0, import_react33.useEffect)(() => controller.attach(), [controller]);
-  const life = (0, import_react33.useRef)(0);
-  const snapshot = (0, import_react33.useSyncExternalStore)(
+  (0, import_react34.useEffect)(() => controller.attach(), [controller]);
+  const life = (0, import_react34.useRef)(0);
+  const snapshot = (0, import_react34.useSyncExternalStore)(
     controller.subscribe,
     controller.getSnapshot,
     controller.getSnapshot
@@ -3588,7 +3609,7 @@ function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
   const reduced = useReducedMotion();
   const toasts = usePresentedToasts(snapshot.toasts, reduced);
   const dialog = usePresentedRequest(snapshot.current, reduced);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     const version = ++life.current;
     return () => {
       queueMicrotask(() => {
@@ -3596,8 +3617,8 @@ function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
       });
     };
   }, [controller]);
-  const [layers, setLayers] = (0, import_react33.useState)([]);
-  const register = (0, import_react33.useCallback)((id) => {
+  const [layers, setLayers] = (0, import_react34.useState)([]);
+  const register = (0, import_react34.useCallback)((id) => {
     setLayers((previous) => [...previous, id]);
     return () => setLayers((previous) => previous.filter((item) => item !== id));
   }, []);
@@ -3628,7 +3649,7 @@ function KjunFeedbackProvider({ children, style, controller: controllerProp }) {
 // packages/native/src/choice-controls.tsx
 var import_react_native22 = require("react-native");
 var import_tokens23 = require("@kjun-ui/tokens");
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_native23 = require("react-native");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function KjunCheckbox({
@@ -3699,7 +3720,7 @@ function KjunCheckbox({
 }
 function useControlFocus(disabled) {
   const { colors } = useKjunStyles();
-  const [focused, setFocused] = (0, import_react34.useState)(false);
+  const [focused, setFocused] = (0, import_react35.useState)(false);
   return {
     handlers: {
       focusRing: false,
@@ -3728,7 +3749,7 @@ function KjunSwitch({
   const offset = width - height;
   const motion = useMotionValue(value ? 1 : 0);
   const focus = useControlFocus(disabled);
-  const [hovered, setHovered] = (0, import_react34.useState)(false);
+  const [hovered, setHovered] = (0, import_react35.useState)(false);
   const trackColor = typeof colors.active === "string" && typeof colors.brand === "string" ? motion.interpolate({ inputRange: [0, 1], outputRange: [colors.active, colors.brand] }) : value ? colors.brand : colors.active;
   const offRole = disabled ? colors.borderSecondary : colors.borderStrong;
   const thumbColor = typeof offRole === "string" && typeof colors.switchThumbOn === "string" ? motion.interpolate({ inputRange: [0, 1], outputRange: [offRole, colors.switchThumbOn] }) : value ? colors.switchThumbOn : offRole;
@@ -3813,7 +3834,7 @@ function KjunSwitch({
     }
   );
 }
-var RadioContext = (0, import_react34.createContext)(null);
+var RadioContext = (0, import_react35.createContext)(null);
 function KjunRadio({
   value,
   val,
@@ -3824,10 +3845,10 @@ function KjunRadio({
   onValueChange,
   onChange
 }) {
-  const group = (0, import_react34.useContext)(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
+  const group = (0, import_react35.useContext)(RadioContext), { colors } = useKjunStyles(), selected = (group ? group.value : value) === val;
   const geometry2 = import_tokens23.tokens.extensions.radio;
-  const [hovered, setHovered] = (0, import_react34.useState)(false);
-  (0, import_react34.useEffect)(() => {
+  const [hovered, setHovered] = (0, import_react35.useState)(false);
+  (0, import_react35.useEffect)(() => {
     if (disabled) setHovered(false);
   }, [disabled]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -3899,7 +3920,7 @@ function KjunRadioGroup({
   onValueChange,
   onChange
 }) {
-  const root = (0, import_react34.useRef)(null);
+  const root = (0, import_react35.useRef)(null);
   useRadioKeyboard(root);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     RadioContext.Provider,
@@ -3939,11 +3960,11 @@ function KjunRadioGroup({
 
 // packages/native/src/selection-groups.tsx
 var import_tokens25 = require("@kjun-ui/tokens");
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_react_native25 = require("react-native");
 
 // packages/native/src/button-group-motion.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_native24 = require("react-native");
 var import_tokens24 = require("@kjun-ui/tokens");
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -3952,16 +3973,16 @@ var easing = import_react_native24.Easing.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] = (0, import_react35.useState)(/* @__PURE__ */ new Map());
-  const x = (0, import_react35.useRef)(new import_react_native24.Animated.Value(0)).current;
-  const width = (0, import_react35.useRef)(new import_react_native24.Animated.Value(0)).current;
-  const previous = (0, import_react35.useRef)(null);
+  const [layouts, setLayouts] = (0, import_react36.useState)(/* @__PURE__ */ new Map());
+  const x = (0, import_react36.useRef)(new import_react_native24.Animated.Value(0)).current;
+  const width = (0, import_react36.useRef)(new import_react_native24.Animated.Value(0)).current;
+  const previous = (0, import_react36.useRef)(null);
   const layout = selected && layouts.get(selected.value);
-  const updateLayout = (0, import_react35.useCallback)((value, box) => {
+  const updateLayout = (0, import_react36.useCallback)((value, box) => {
     setLayouts((old) => old.has(value) && sameBox(old.get(value), box) ? old : new Map(old).set(value, box));
   }, []);
-  const measure = (0, import_react35.useCallback)((value, event) => updateLayout(value, event.nativeEvent.layout), [updateLayout]);
-  (0, import_react35.useLayoutEffect)(() => {
+  const measure = (0, import_react36.useCallback)((value, event) => updateLayout(value, event.nativeEvent.layout), [updateLayout]);
+  (0, import_react36.useLayoutEffect)(() => {
     const old = previous.current;
     if (!selected || !layout) {
       previous.current = null;
@@ -3983,7 +4004,7 @@ function useButtonGroupMotion(selected) {
     }
     previous.current = { value: selected.value, box: layout, reduced };
   }, [selected == null ? void 0 : selected.value, layout, reduced, x, width]);
-  (0, import_react35.useEffect)(() => () => {
+  (0, import_react36.useEffect)(() => () => {
     x.stopAnimation();
     width.stopAnimation();
   }, [x, width]);
@@ -3991,9 +4012,9 @@ function useButtonGroupMotion(selected) {
 }
 function ButtonGroupLabel({ label, active, size, reduced }) {
   const { colors, fontFamily } = useKjunStyles();
-  const progress = (0, import_react35.useRef)(new import_react_native24.Animated.Value(active ? 1 : 0)).current;
+  const progress = (0, import_react36.useRef)(new import_react_native24.Animated.Value(active ? 1 : 0)).current;
   const interpolate = typeof colors.textSecondary === "string" && typeof colors.text === "string";
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     progress.stopAnimation();
     if (reduced || !interpolate) progress.setValue(active ? 1 : 0);
     else import_react_native24.Animated.timing(progress, { toValue: active ? 1 : 0, duration: import_tokens24.tokens.motion.indicator, easing, useNativeDriver: false }).start();
@@ -4040,9 +4061,9 @@ function KjunButtonGroup({
   const motion = useButtonGroupMotion(selected);
   const padding = import_tokens25.tokens.buttonGroup.padding[size];
   const itemRadius = import_tokens25.tokens.buttonGroup.itemRadii[size];
-  const itemRefs = (0, import_react36.useRef)(/* @__PURE__ */ new Map());
+  const itemRefs = (0, import_react37.useRef)(/* @__PURE__ */ new Map());
   const { updateLayout } = motion;
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     for (const [value2, node] of itemRefs.current) {
       node.measure((x, y, width, height) => updateLayout(value2, { x, y, width, height }));
     }
@@ -4211,7 +4232,7 @@ function KjunFilterGroup({
                   paddingHorizontal: { xs: import_tokens25.tokens.dimension.value8, sm: import_tokens25.tokens.dimension.value12, md: import_tokens25.tokens.dimension.value12, lg: import_tokens25.tokens.dimension.value14, xl: import_tokens25.tokens.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
                   borderRadius: import_tokens25.tokens.button.radii[size],
-                  backgroundColor: active ? colors.text : colors.secondary
+                  backgroundColor: active ? colors.filterSelectedBg : colors.secondary
                 },
                 children: [
                   option.dot && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -4230,7 +4251,7 @@ function KjunFilterGroup({
                     {
                       name: option.icon,
                       size: import_tokens25.tokens.extensions.selection.iconSize,
-                      color: active ? colors.inverse : colors.textSecondary
+                      color: active ? colors.filterSelectedText : colors.textSecondary
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native25.View, { children: [
@@ -4253,7 +4274,7 @@ function KjunFilterGroup({
                           right: 0,
                           top: 0,
                           ...selectionTypeStyle(size, active),
-                          color: active ? colors.inverse : colors.textSecondary
+                          color: active ? colors.filterSelectedText : colors.textSecondary
                         },
                         children: option.label
                       }
@@ -4281,10 +4302,10 @@ function KjunFilterGroup({
 
 // packages/native/src/textarea.tsx
 var import_tokens26 = require("@kjun-ui/tokens");
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_react_native26 = require("react-native");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var KjunTextarea = (0, import_react37.forwardRef)(
+var KjunTextarea = (0, import_react38.forwardRef)(
   function KjunTextarea2({
     value,
     size = "md",
@@ -4354,7 +4375,7 @@ var KjunTextarea = (0, import_react37.forwardRef)(
 
 // packages/native/src/drawer.tsx
 var import_tokens27 = require("@kjun-ui/tokens");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_native27 = require("react-native");
 
 // shared/package-runtime/drawer-geometry.ts
@@ -4383,8 +4404,8 @@ function drawerFrame({ position, windowHeight, safeAreaTop, safeAreaBottom, gap,
 var import_react_native28 = require("react-native");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function useKeyboardOverlap(enabled2, windowHeight) {
-  const [overlap, setOverlap] = (0, import_react38.useState)(0);
-  (0, import_react38.useEffect)(() => {
+  const [overlap, setOverlap] = (0, import_react39.useState)(0);
+  (0, import_react39.useEffect)(() => {
     var _a, _b;
     setOverlap(0);
     const events = keyboardEvents(import_react_native28.Platform.OS);
@@ -4414,6 +4435,7 @@ function KjunDrawer({
   footer,
   children,
   onClose,
+  onAfterClose,
   ariaLabel,
   safeAreaTop = 0,
   safeAreaBottom = 0,
@@ -4422,7 +4444,7 @@ function KjunDrawer({
 }) {
   const m = useKjunMessages();
   const { colors } = useKjunStyles(), window2 = (0, import_react_native28.useWindowDimensions)(), vertical = position === "left" || position === "right";
-  const [rootHeight, setRootHeight] = (0, import_react38.useState)(0);
+  const [rootHeight, setRootHeight] = (0, import_react39.useState)(0);
   const keyboard = useKeyboardOverlap(open && avoidKeyboard, window2.height);
   const frame = drawerFrame({
     position,
@@ -4433,7 +4455,7 @@ function KjunDrawer({
     keyboard,
     maxHeight
   });
-  const [panelHeight, setPanelHeight] = (0, import_react38.useState)(0);
+  const [panelHeight, setPanelHeight] = (0, import_react39.useState)(0);
   const motion = useNativePresence(open, import_tokens27.tokens.motion.layerEnter, import_tokens27.tokens.motion.layerExit, vertical || panelHeight > 0, 0, { enterEasing: motionEmphasized });
   const backdrop = useNativePresence(open, import_tokens27.tokens.motion.backdrop, import_tokens27.tokens.motion.backdropExit, true, 0, { fade: import_tokens27.tokens.motion.backdropExit });
   const close = () => {
@@ -4444,10 +4466,15 @@ function KjunDrawer({
   const layer = useLayer(open, motion.present, "window", () => {
     if (closeOnEsc) close();
   });
+  const iosDismiss = import_react_native28.Platform.OS === "ios";
+  useAfterClose(motion.present, onAfterClose, !iosDismiss);
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LayerScope.Provider, { value: layer.id, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     ScopedNativeModal,
     {
       visible: motion.present,
+      onDismiss: iosDismiss ? () => {
+        if (!open) onAfterClose == null ? void 0 : onAfterClose();
+      } : void 0,
       transparent: true,
       onRequestClose: () => {
         if (closeOnEsc) close();
@@ -4574,13 +4601,13 @@ function KjunDrawer({
 
 // packages/native/src/dropdown.tsx
 var import_tokens30 = require("@kjun-ui/tokens");
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_react_native32 = require("react-native");
 
 // packages/native/src/floating-panel.tsx
 var import_react_native29 = require("react-native");
 var import_tokens28 = require("@kjun-ui/tokens");
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_native30 = require("react-native");
 var import_react_native_svg4 = __toESM(require("react-native-svg"), 1);
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -4589,9 +4616,9 @@ function LayerTrigger({
   onPress,
   disabled = false
 }) {
-  if ((0, import_react39.isValidElement)(trigger)) {
+  if ((0, import_react40.isValidElement)(trigger)) {
     const child = trigger;
-    return (0, import_react39.cloneElement)(child, {
+    return (0, import_react40.cloneElement)(child, {
       disabled: disabled || child.props.disabled,
       onPress: () => {
         var _a, _b;
@@ -4626,14 +4653,14 @@ function FloatingPanel({
 }) {
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.select;
-  const [headerHeight, setHeaderHeight] = (0, import_react39.useState)(0);
-  const panelRef = (0, import_react39.useRef)(null);
-  const scroll = (0, import_react39.useRef)(null), viewport = (0, import_react39.useRef)(0);
-  const { colors } = useKjunStyles(), window2 = (0, import_react_native30.useWindowDimensions)(), [anchored, setAnchored] = (0, import_react39.useState)(false), [sized, setSized] = (0, import_react39.useState)(false), [anchor, setAnchor] = (0, import_react39.useState)({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = (0, import_react39.useState)({ width: 0, height: 0 });
-  const measurement = (0, import_react39.useRef)(0);
+  const [headerHeight, setHeaderHeight] = (0, import_react40.useState)(0);
+  const panelRef = (0, import_react40.useRef)(null);
+  const scroll = (0, import_react40.useRef)(null), viewport = (0, import_react40.useRef)(0);
+  const { colors } = useKjunStyles(), window2 = (0, import_react_native30.useWindowDimensions)(), [anchored, setAnchored] = (0, import_react40.useState)(false), [sized, setSized] = (0, import_react40.useState)(false), [anchor, setAnchor] = (0, import_react40.useState)({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = (0, import_react40.useState)({ width: 0, height: 0 });
+  const measurement = (0, import_react40.useRef)(0);
   const motion = useNativePresence(open, tooltip ? import_tokens28.tokens.motion.tooltipEnter : import_tokens28.tokens.motion.popupEnter, tooltip ? import_tokens28.tokens.motion.tooltipExit : import_tokens28.tokens.motion.popupExit, anchored && sized);
   const layer = useLayer(open, motion.present, tooltip ? "tooltip" : "popup", () => onOpenChange(false), triggerRef);
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     var _a;
     const revision = ++measurement.current;
     if (open) setAnchored(false);
@@ -4646,20 +4673,20 @@ function FloatingPanel({
       measurement.current++;
     };
   }, [open, window2.width, window2.height, triggerRef]);
-  (0, import_react39.useLayoutEffect)(() => {
+  (0, import_react40.useLayoutEffect)(() => {
     if (!motion.present) {
       setSized(false);
       setAnchored(false);
     }
   }, [motion.present]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     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 ? import_tokens28.tokens.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]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (!open || !anchored || !sized || !focusOnOpen || !panelRef.current) return;
     if (import_react_native30.Platform.OS === "web") {
       const node = panelRef.current;
@@ -4844,7 +4871,7 @@ function FloatingPanel({
 }
 
 // packages/native/src/popover.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_react_native31 = require("react-native");
 var import_tokens29 = require("@kjun-ui/tokens");
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -4865,7 +4892,7 @@ function KjunPopover({
   children
 }) {
   const { colors } = useKjunStyles();
-  const [internal, setInternal] = (0, import_react40.useState)(false), open = controlled != null ? controlled : internal, ref = (0, import_react40.useRef)(null);
+  const [internal, setInternal] = (0, import_react41.useState)(false), open = controlled != null ? controlled : internal, ref = (0, import_react41.useRef)(null);
   const change = (v) => {
     setInternal(v);
     onOpenChange == null ? void 0 : onOpenChange(v);
@@ -4904,7 +4931,10 @@ function KjunPopover({
   ] });
 }
 function KjunTooltip({
-  content: message = "",
+  content: body = "",
+  title,
+  align,
+  width,
   placement = "top",
   delay = 0,
   children,
@@ -4913,13 +4943,14 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
-  const { colors } = useKjunStyles(), [internal, setInternal] = (0, import_react40.useState)(false), open = controlled != null ? controlled : internal, latest = (0, import_react40.useRef)({ open, onOpenChange }), setOpen = (value) => {
+  const message = [title, body].filter(Boolean).join(", ");
+  const { colors } = useKjunStyles(), [internal, setInternal] = (0, import_react41.useState)(false), open = controlled != null ? controlled : internal, latest = (0, import_react41.useRef)({ 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 = (0, import_react40.useRef)(null), timer = (0, import_react40.useRef)(void 0);
+  }, ref = (0, import_react41.useRef)(null), timer = (0, import_react41.useRef)(void 0);
   latest.current = { open, onOpenChange };
   const scopeActive = useActiveLayerScope();
   const hide = () => {
@@ -4931,11 +4962,11 @@ function KjunTooltip({
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setOpen(true), delay);
   };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!scopeActive) hide();
   }, [scopeActive]);
-  (0, import_react40.useEffect)(() => () => clearTimeout(timer.current), []);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => () => clearTimeout(timer.current), []);
+  (0, import_react41.useEffect)(() => {
     if (import_react_native31.Platform.OS !== "web" || !open) return;
     const escape = (event) => {
       if (event.key === "Escape") hide();
@@ -4943,7 +4974,7 @@ function KjunTooltip({
     document.addEventListener("keydown", escape);
     return () => document.removeEventListener("keydown", escape);
   }, [open]);
-  const child = (0, import_react40.isValidElement)(children) ? children : null;
+  const child = (0, import_react41.isValidElement)(children) ? children : null;
   const childProps = child == null ? void 0 : child.props;
   const handlers = {
     // A hint that repeats the trigger's name would be read twice (icon-only RefreshButton, IconToggle).
@@ -4988,7 +5019,7 @@ function KjunTooltip({
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native31.View, { ref, collapsable: false, style: { alignSelf: (childProps == null ? void 0 : childProps.block) ? "stretch" : "flex-start" }, children: child ? (0, import_react40.cloneElement)(child, handlers) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AccessiblePressable, { ...handlers, children }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native31.View, { ref, collapsable: false, style: { alignSelf: (childProps == null ? void 0 : childProps.block) ? "stretch" : "flex-start" }, children: child ? (0, import_react41.cloneElement)(child, handlers) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AccessiblePressable, { ...handlers, children }) }),
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       FloatingPanel,
       {
@@ -4998,25 +5029,29 @@ function KjunTooltip({
         triggerRef: ref,
         placement,
         ariaLabel: message,
-        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           import_react_native31.View,
           {
             style: {
               paddingVertical: import_tokens29.tokens.extensions.tooltip.paddingY,
               paddingHorizontal: import_tokens29.tokens.extensions.tooltip.paddingX,
-              maxWidth: import_tokens29.tokens.extensions.tooltip.maxWidth,
+              maxWidth: width ? import_tokens29.tokens.extensions.tooltip.maxWidths[width] : import_tokens29.tokens.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-              KText,
-              {
-                style: {
-                  ...typeStyle("caption"),
-                  color: colors.chartTooltipText
-                },
-                children: message
-              }
-            )
+            children: [
+              !!title && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(KText, { style: { ...typeStyle("controlSmall"), color: colors.chartTooltipText, ...align ? { textAlign: align === "center" ? "center" : "left" } : {} }, children: title }),
+              !!body && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                KText,
+                {
+                  style: {
+                    ...typeStyle("caption"),
+                    color: colors.chartTooltipText,
+                    ...align ? { textAlign: align === "center" ? "center" : "left" } : {}
+                  },
+                  children: body
+                }
+              )
+            ]
           }
         )
       }
@@ -5026,10 +5061,10 @@ function KjunTooltip({
 
 // packages/native/src/dropdown.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var DropdownContext = (0, import_react41.createContext)(null);
-var MenuIconSlotContext = (0, import_react41.createContext)(false);
+var DropdownContext = (0, import_react42.createContext)(null);
+var MenuIconSlotContext = (0, import_react42.createContext)(false);
 function hasLeadingIcon(node) {
-  return import_react41.Children.toArray(node).some((child) => (0, import_react41.isValidElement)(child) && (child.type === import_react41.Fragment ? hasLeadingIcon(child.props.children) : child.type === KjunDropdownItem && !!child.props.icon));
+  return import_react42.Children.toArray(node).some((child) => (0, import_react42.isValidElement)(child) && (child.type === import_react42.Fragment ? hasLeadingIcon(child.props.children) : child.type === KjunDropdownItem && !!child.props.icon));
 }
 function KjunDropdown({
   disabled = false,
@@ -5040,11 +5075,11 @@ function KjunDropdown({
   onClose
 }) {
   const m = useKjunMessages();
-  const [open, setOpen] = (0, import_react41.useState)(false), currentOpen = (0, import_react41.useRef)(false), ref = (0, import_react41.useRef)(null);
+  const [open, setOpen] = (0, import_react42.useState)(false), currentOpen = (0, import_react42.useRef)(false), ref = (0, import_react42.useRef)(null);
   let control = trigger;
-  while ((0, import_react41.isValidElement)(control) && control.type === KjunTooltip)
+  while ((0, import_react42.isValidElement)(control) && control.type === KjunTooltip)
     control = control.props.children;
-  const unavailable = disabled || (0, import_react41.isValidElement)(control) && !!(control.props.disabled || control.props.loading);
+  const unavailable = disabled || (0, import_react42.isValidElement)(control) && !!(control.props.disabled || control.props.loading);
   const change = (v) => {
     if (v === currentOpen.current || v && unavailable) return;
     currentOpen.current = v;
@@ -5052,7 +5087,7 @@ function KjunDropdown({
     if (v) onOpen == null ? void 0 : onOpen();
     else onClose == null ? void 0 : onClose();
   };
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (unavailable) change(false);
   }, [unavailable]);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DropdownContext.Provider, { value: () => change(false), children: [
@@ -5086,8 +5121,8 @@ function KjunDropdownItem({
   children,
   onPress
 }) {
-  const { colors } = useKjunStyles(), close = (0, import_react41.useContext)(DropdownContext), color = variant === "danger" ? colors.danger : colors.text, iconColor = variant === "danger" ? colors.danger : colors.textSecondary, reserveIcon = (0, import_react41.useContext)(MenuIconSlotContext);
-  const [hovered, setHovered] = (0, import_react41.useState)(false);
+  const { colors } = useKjunStyles(), close = (0, import_react42.useContext)(DropdownContext), color = variant === "danger" ? colors.danger : colors.text, iconColor = variant === "danger" ? colors.danger : colors.textSecondary, reserveIcon = (0, import_react42.useContext)(MenuIconSlotContext);
+  const [hovered, setHovered] = (0, import_react42.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     AccessiblePressable,
     {
@@ -5148,7 +5183,7 @@ function KjunMenuButton({
   ...props
 }) {
   const m = useKjunMessages();
-  const [open, setOpen] = (0, import_react41.useState)(false);
+  const [open, setOpen] = (0, import_react42.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     KjunDropdown,
     {
@@ -5188,7 +5223,7 @@ function KjunMenuButton({
 }
 
 // shared/package-runtime/combobox.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // shared/package-runtime/options.ts
 var optionValue = (option, key = "value") => typeof option === "object" ? option[key] : option;
@@ -5266,10 +5301,10 @@ function useComboboxModel({
 }) {
   const selected = options.find((option) => optionValue(option, valueKey) === value);
   const selectedLabel = selected !== void 0 ? optionLabel(selected, labelKey) : "";
-  const [query, setQuery] = (0, import_react42.useState)(selectedLabel);
-  const [open, setOpen] = (0, import_react42.useState)(false);
-  (0, import_react42.useEffect)(() => setQuery(selectedLabel), [value, selectedLabel]);
-  (0, import_react42.useEffect)(() => {
+  const [query, setQuery] = (0, import_react43.useState)(selectedLabel);
+  const [open, setOpen] = (0, import_react43.useState)(false);
+  (0, import_react43.useEffect)(() => setQuery(selectedLabel), [value, selectedLabel]);
+  (0, import_react43.useEffect)(() => {
     if (disabled) setOpen(false);
   }, [disabled]);
   const change = (next) => {
@@ -5303,7 +5338,7 @@ function useComboboxModel({
 
 // packages/native/src/combobox.tsx
 var import_tokens32 = require("@kjun-ui/tokens");
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_react_native34 = require("react-native");
 
 // packages/native/src/select-options.tsx
@@ -5432,9 +5467,9 @@ function SearchField({
   onEnter
 }) {
   const m = useKjunMessages();
-  const searchId = "kjun-popup-search-" + (0, import_react43.useId)().replace(/:/g, "");
-  const clearing = (0, import_react43.useRef)(false);
-  const ref = (0, import_react43.useRef)(null), { colors } = useKjunStyles();
+  const searchId = "kjun-popup-search-" + (0, import_react44.useId)().replace(/:/g, "");
+  const clearing = (0, import_react44.useRef)(false);
+  const ref = (0, import_react44.useRef)(null), { colors } = useKjunStyles();
   const focusGuard = usePopupFocusGuard(ref);
   const openFromPress = () => {
     if (!disabled) {
@@ -5534,7 +5569,7 @@ function SearchField({
 
 // packages/native/src/date-picker.tsx
 var import_tokens33 = require("@kjun-ui/tokens");
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_react_native35 = require("react-native");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function displayMonth(value) {
@@ -5557,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] = (0, import_react44.useState)(false), [month, setMonth] = (0, import_react44.useState)(() => displayMonth(value)), ref = (0, import_react44.useRef)(null), spec = import_tokens33.tokens.input[size];
+  const { colors } = useKjunStyles(), field = useKjunField(), [open, setOpen] = (0, import_react45.useState)(false), [month, setMonth] = (0, import_react45.useState)(() => displayMonth(value)), ref = (0, import_react45.useRef)(null), spec = import_tokens33.tokens.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")}`;
@@ -5732,10 +5767,10 @@ function KjunDatePicker({
 }
 
 // packages/native/src/search-input.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // shared/package-runtime/search-input.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 function useSearchInputModel({
   value,
   disabled = false,
@@ -5745,20 +5780,20 @@ function useSearchInputModel({
   onValueChange,
   onSearchError
 }, open) {
-  const [query, setQuery] = (0, import_react45.useState)(value), [options, setOptions] = (0, import_react45.useState)([]), [loading, setLoading] = (0, import_react45.useState)(false), [failed, setFailed] = (0, import_react45.useState)(false), version = (0, import_react45.useRef)(0), notify = (0, import_react45.useRef)(onSearchError);
+  const [query, setQuery] = (0, import_react46.useState)(value), [options, setOptions] = (0, import_react46.useState)([]), [loading, setLoading] = (0, import_react46.useState)(false), [failed, setFailed] = (0, import_react46.useState)(false), version = (0, import_react46.useRef)(0), notify = (0, import_react46.useRef)(onSearchError);
   notify.current = onSearchError;
-  const timer = (0, import_react45.useRef)(void 0);
-  const notifyValue = (0, import_react45.useRef)(onValueChange);
+  const timer = (0, import_react46.useRef)(void 0);
+  const notifyValue = (0, import_react46.useRef)(onValueChange);
   notifyValue.current = onValueChange;
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     clearTimeout(timer.current);
     setQuery(value);
   }, [value]);
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react46.useLayoutEffect)(() => {
     clearTimeout(timer.current);
     return () => clearTimeout(timer.current);
   }, [disabled, debounce, !!loadOptions]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const current = ++version.current, abort = new AbortController();
     setFailed(false);
     if (!loadOptions || !open || disabled || query.length < minChars) {
@@ -5849,7 +5884,7 @@ function KjunSearchInput({
   placeholder != null ? placeholder : placeholder = m.search;
   emptyText != null ? emptyText : emptyText = m.noResults;
   errorText != null ? errorText : errorText = m.searchFailed;
-  const [open, setOpen] = (0, import_react46.useState)(false);
+  const [open, setOpen] = (0, import_react47.useState)(false);
   const model = useSearchInputModel({ value, disabled, debounce, loadOptions, minChars, onValueChange, onSearchError }, open);
   const { query, options, loading, failed } = model;
   const update = (value2) => {
@@ -5911,30 +5946,30 @@ function KjunSearchInput({
 
 // packages/native/src/select-control.tsx
 var import_tokens35 = require("@kjun-ui/tokens");
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // packages/native/src/compound-control.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_react_native36 = require("react-native");
 var import_tokens34 = require("@kjun-ui/tokens");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var CompoundControlContext = (0, import_react47.createContext)(null);
+var CompoundControlContext = (0, import_react48.createContext)(null);
 function CompoundTarget({ children, square = false }) {
   const touch = finePointer() ? void 0 : import_tokens34.tokens.native.minimumTouchTarget;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_native36.View, { style: { minHeight: touch, minWidth: square ? touch : void 0, alignItems: "center", justifyContent: "center" }, children });
 }
 
 // shared/package-runtime/select.ts
-var import_react48 = require("react");
+var import_react49 = require("react");
 function useSelectState(controlled, disabled, pageSize, onOpenChange) {
-  const [internal, setInternal] = (0, import_react48.useState)(false);
-  const [query, setQuery] = (0, import_react48.useState)("");
-  const [limit, setLimit] = (0, import_react48.useState)(pageSize);
-  const [session, setSession] = (0, import_react48.useState)(0);
+  const [internal, setInternal] = (0, import_react49.useState)(false);
+  const [query, setQuery] = (0, import_react49.useState)("");
+  const [limit, setLimit] = (0, import_react49.useState)(pageSize);
+  const [session, setSession] = (0, import_react49.useState)(0);
   const isControlled = typeof controlled === "boolean";
   const open = !disabled && (isControlled ? controlled : internal);
-  const previousOpen = (0, import_react48.useRef)(open);
-  (0, import_react48.useEffect)(() => {
+  const previousOpen = (0, import_react49.useRef)(open);
+  (0, import_react49.useEffect)(() => {
     if (disabled && !isControlled) setInternal(false);
     if (previousOpen.current && !open) {
       setQuery("");
@@ -5943,7 +5978,7 @@ function useSelectState(controlled, disabled, pageSize, onOpenChange) {
     }
     previousOpen.current = open;
   }, [open, disabled, isControlled, pageSize]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     setLimit(pageSize);
   }, [pageSize]);
   const changeOpen = (next) => {
@@ -5993,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 = (0, import_react49.useRef)(null), spec = import_tokens35.tokens.input[size];
-  const trigger = (0, import_react49.useRef)(null);
-  const compound = (0, import_react49.useContext)(CompoundControlContext);
-  (0, import_react49.useEffect)(() => {
+  const { colors } = useKjunStyles(), field = useKjunField(), ref = (0, import_react50.useRef)(null), spec = import_tokens35.tokens.input[size];
+  const trigger = (0, import_react50.useRef)(null);
+  const compound = (0, import_react50.useContext)(CompoundControlContext);
+  (0, import_react50.useEffect)(() => {
     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 = (0, import_react49.useRef)(null);
+  const selectedRow = (0, import_react50.useRef)(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);
@@ -6198,16 +6233,17 @@ var import_tokens38 = require("@kjun-ui/tokens");
 
 // packages/native/src/collapse.tsx
 var import_tokens36 = require("@kjun-ui/tokens");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_react_native38 = require("react-native");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-function Collapse({ open, children }) {
+function Collapse({ open, keepMounted = false, children }) {
   const reduced = useReducedMotion();
-  const [retained, setRetained] = (0, import_react50.useState)(open), [height, setHeight] = (0, import_react50.useState)(null);
-  const value = (0, import_react50.useRef)(new import_react_native38.Animated.Value(0)).current;
-  const [settled, setSettled] = (0, import_react50.useState)(open);
-  const version = (0, import_react50.useRef)(0), first = (0, import_react50.useRef)(open);
-  (0, import_react50.useLayoutEffect)(() => {
+  const [retained, setRetained] = (0, import_react51.useState)(open), [height, setHeight] = (0, import_react51.useState)(null);
+  const value = (0, import_react51.useRef)(new import_react_native38.Animated.Value(0)).current;
+  const [settled, setSettled] = (0, import_react51.useState)(open);
+  const version = (0, import_react51.useRef)(0), first = (0, import_react51.useRef)(open), opened = (0, import_react51.useRef)(open);
+  if (open) opened.current = true;
+  (0, import_react51.useLayoutEffect)(() => {
     const revision = ++version.current;
     if (open) setRetained(true);
     if (height === null) return;
@@ -6234,13 +6270,13 @@ function Collapse({ open, children }) {
       value.stopAnimation();
     };
   }, [open, height, reduced, value]);
-  return open || retained ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return open || retained || keepMounted && opened.current ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     import_react_native38.Animated.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__ */ (0, import_jsx_runtime35.jsx)(import_react_native38.View, { onLayout: (event) => setHeight(event.nativeEvent.layout.height), children })
     }
@@ -6248,10 +6284,10 @@ function Collapse({ open, children }) {
 }
 
 // shared/package-runtime/navigation.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 function useInitialTab(value, candidate, change) {
-  const requested = (0, import_react51.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react51.useEffect)(() => {
+  const requested = (0, import_react52.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react52.useEffect)(() => {
     if (value !== "") {
       requested.current.clear();
       return;
@@ -6262,8 +6298,8 @@ function useInitialTab(value, candidate, change) {
   }, [value, candidate, change]);
 }
 function useAccordionState(multiple) {
-  const [opened, setOpened] = (0, import_react51.useState)(/* @__PURE__ */ new Set());
-  (0, import_react51.useEffect)(() => {
+  const [opened, setOpened] = (0, import_react52.useState)(/* @__PURE__ */ new Set());
+  (0, import_react52.useEffect)(() => {
     if (!multiple) setOpened((previous) => previous.size > 1 ? new Set([...previous].slice(-1)) : previous);
   }, [multiple]);
   return {
@@ -6287,16 +6323,16 @@ function useAccordionState(multiple) {
 }
 
 // packages/native/src/navigation.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_react_native40 = require("react-native");
 
 // packages/native/src/tabs.tsx
 var import_tokens37 = require("@kjun-ui/tokens");
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_react_native39 = require("react-native");
 
 // packages/native/src/tabs-accessibility.web.ts
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // shared/package-runtime/tab-keyboard.ts
 function manageTabList(list, select, keyboard = true) {
@@ -6379,16 +6415,16 @@ function panelNeedsFocus(panel) {
 
 // packages/native/src/tabs-accessibility.web.ts
 function useTabKeyboard(root, select) {
-  const callback = (0, import_react52.useRef)(select);
+  const callback = (0, import_react53.useRef)(select);
   callback.current = select;
-  (0, import_react52.useLayoutEffect)(() => {
+  (0, import_react53.useLayoutEffect)(() => {
     var _a;
     const list = (_a = root.current) == null ? void 0 : _a.querySelector('[role="tablist"]');
     if (list) return manageTabList(list, (name) => callback.current(name));
   }, [root]);
 }
 function usePanelFocus(root) {
-  (0, import_react52.useLayoutEffect)(() => {
+  (0, import_react53.useLayoutEffect)(() => {
     const panel = root.current;
     if (panel) panel.tabIndex = panelNeedsFocus(panel) ? 0 : -1;
   });
@@ -6396,7 +6432,7 @@ function usePanelFocus(root) {
 
 // packages/native/src/tabs.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var TabContext = (0, import_react53.createContext)({ value: "", id: "", names: [] });
+var TabContext = (0, import_react54.createContext)({ value: "", id: "", names: [] });
 function KjunTabs({
   value,
   items: items2 = [],
@@ -6412,21 +6448,21 @@ function KjunTabs({
   var _a, _b;
   const m = useKjunMessages();
   ariaLabel != null ? ariaLabel : ariaLabel = m.tabs;
-  const { colors } = useKjunStyles(), panes = import_react53.Children.toArray(children).filter(
-    import_react53.isValidElement
+  const { colors } = useKjunStyles(), panes = import_react54.Children.toArray(children).filter(
+    import_react54.isValidElement
   );
   const tabs = items2.length ? items2 : panes.filter((child) => child.type === KjunTabPane).map((child) => child.props);
-  const id = "kjun-" + (0, import_react53.useId)(), root = (0, import_react53.useRef)(null);
-  const menuState = (0, import_react53.useRef)({ tabs, onTabMenu });
+  const id = "kjun-" + (0, import_react54.useId)(), root = (0, import_react54.useRef)(null);
+  const menuState = (0, import_react54.useRef)({ tabs, onTabMenu });
   menuState.current = { tabs, onTabMenu };
-  const pressedMenu = (0, import_react53.useRef)(null);
-  (0, import_react53.useLayoutEffect)(() => {
+  const pressedMenu = (0, import_react54.useRef)(null);
+  (0, import_react54.useLayoutEffect)(() => {
     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 = import_tokens37.tokens.extensions.tabs;
   const underline = variant === "underline";
-  const [hoveredTab, setHoveredTab] = (0, import_react53.useState)(null);
+  const [hoveredTab, setHoveredTab] = (0, import_react54.useState)(null);
   const singleLine = import_react_native39.Platform.OS === "web" ? { whiteSpace: "nowrap" } : {};
   const paddingX = !underline ? geometry2.pillsPaddingX : density === "compact" ? geometry2.compactPaddingX : geometry2.paddingX;
   const height = density === "compact" ? geometry2.compactHeight : geometry2.height;
@@ -6435,10 +6471,10 @@ function KjunTabs({
   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 = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
+  const tabRefs = (0, import_react54.useRef)(/* @__PURE__ */ new Map());
   const { updateLayout } = selection;
   const firstName = (_a = tabs[0]) == null ? void 0 : _a.name;
-  const measureIndicator = (0, import_react53.useCallback)((name, box) => {
+  const measureIndicator = (0, import_react54.useCallback)((name, box) => {
     const left = underline && name === firstName ? 0 : paddingX;
     updateLayout(name, underline ? {
       x: box.x + left,
@@ -6447,7 +6483,7 @@ function KjunTabs({
       height: geometry2.indicatorHeight
     } : box);
   }, [underline, paddingX, firstName, updateLayout, geometry2]);
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react54.useLayoutEffect)(() => {
     for (const [name, node] of tabRefs.current) {
       node.measure((x, y, width, height2) => measureIndicator(name, { x, y, width, height: height2 }));
     }
@@ -6606,8 +6642,8 @@ function KjunTabs({
   ] }) });
 }
 function KjunTabPane({ name, children }) {
-  const { value, id, names } = (0, import_react53.useContext)(TabContext);
-  const root = (0, import_react53.useRef)(null);
+  const { value, id, names } = (0, import_react54.useContext)(TabContext);
+  const root = (0, import_react54.useRef)(null);
   usePanelFocus(root);
   const hidden = value !== name;
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -6630,7 +6666,7 @@ function KjunTabPane({ name, children }) {
 
 // packages/native/src/navigation.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var AccordionContext = (0, import_react54.createContext)(null);
+var AccordionContext = (0, import_react55.createContext)(null);
 function KjunAccordion({
   multiple = false,
   tone = "card",
@@ -6660,14 +6696,32 @@ function KjunAccordionItem({
   defaultOpen = false,
   disabled = false,
   header,
+  open: openProp,
+  onOpenChange,
+  keepMounted = false,
   children
 }) {
-  const { colors } = useKjunStyles(), group = (0, import_react54.useContext)(AccordionContext), id = "kjun-" + (0, import_react54.useId)(), [own, setOwn] = (0, import_react54.useState)(defaultOpen), open = group ? group.opened.has(id) : own;
+  const controlled = openProp !== void 0, context = (0, import_react55.useContext)(AccordionContext), { colors } = useKjunStyles(), group = controlled ? null : context, id = "kjun-" + (0, import_react55.useId)(), [own, setOwn] = (0, import_react55.useState)(defaultOpen), open = controlled ? openProp : group ? group.opened.has(id) : own;
+  const reported = (0, import_react55.useRef)(open), notify = (0, import_react55.useRef)(onOpenChange), registering = (0, import_react55.useRef)(!!group && defaultOpen);
+  notify.current = onOpenChange;
+  (0, import_react55.useEffect)(() => {
+    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, import_tokens38.tokens.motion.collapse, void 0, void 0, true);
   const geometry2 = import_tokens38.tokens.extensions.accordion;
-  const [hovered, setHovered] = (0, import_react54.useState)(false);
+  const [hovered, setHovered] = (0, import_react55.useState)(false);
   const wrapping = import_react_native40.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     return group == null ? void 0 : group.register(id, defaultOpen);
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_native40.View, { children: [
@@ -6681,7 +6735,10 @@ function KjunAccordionItem({
         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 }) => ({
@@ -6701,7 +6758,7 @@ function KjunAccordionItem({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Collapse, { open, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Collapse, { open, keepMounted, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       import_react_native40.View,
       {
         nativeID: id + "-panel",
@@ -6744,7 +6801,7 @@ function KjunBreadcrumb({
             }
           )
         ] });
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react54.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react55.Fragment, { children: [
           i > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             KjunIcon,
             {
@@ -6898,7 +6955,7 @@ function KjunPagination({
 
 // packages/native/src/actions.tsx
 var import_tokens39 = require("@kjun-ui/tokens");
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_react_native41 = require("react-native");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function KjunIconToggle({
@@ -6917,7 +6974,7 @@ function KjunIconToggle({
   onToggle
 }) {
   const { colors } = useKjunStyles();
-  const navigation = (0, import_react55.useContext)(TopNavigationContext);
+  const navigation = (0, import_react56.useContext)(TopNavigationContext);
   const box = navigation ? navigation.controlSize : size === "xs" ? import_tokens39.tokens.extensions.iconToggle.compactSize : import_tokens39.tokens.extensions.iconToggle.sizes[size];
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KjunTooltip, { content: disabled || loading ? "" : tooltip != null ? tooltip : ariaLabel, placement: tooltipPlacement, delay: tooltipDelay, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     AccessiblePressable,
@@ -6983,8 +7040,8 @@ function KjunCopyButton({
 }) {
   const m = useKjunMessages();
   successText != null ? successText : successText = m.copied;
-  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = (0, import_react55.useState)(false), [failed, setFailed] = (0, import_react55.useState)(false), busy = (0, import_react55.useRef)(false), timer = (0, import_react55.useRef)(void 0), mounted = (0, import_react55.useRef)(true);
-  (0, import_react55.useEffect)(() => {
+  const feedback = useOptionalKjunFeedback(), { colors } = useKjunStyles(), [copied, setCopied] = (0, import_react56.useState)(false), [failed, setFailed] = (0, import_react56.useState)(false), busy = (0, import_react56.useRef)(false), timer = (0, import_react56.useRef)(void 0), mounted = (0, import_react56.useRef)(true);
+  (0, import_react56.useEffect)(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
@@ -7139,14 +7196,14 @@ function KjunScrollFade({ children }) {
 
 // packages/native/src/data-state.tsx
 var import_tokens40 = require("@kjun-ui/tokens");
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_react_native42 = require("react-native");
 
 // shared/package-runtime/use-loading-reveal.ts
-var import_react56 = require("react");
+var import_react57 = require("react");
 function useLoadingReveal(active, delay = 0) {
-  const [revealed, setRevealed] = (0, import_react56.useState)(false);
-  (0, import_react56.useEffect)(() => {
+  const [revealed, setRevealed] = (0, import_react57.useState)(false);
+  (0, import_react57.useEffect)(() => {
     setRevealed(false);
     if (!active || delay <= 0) return;
     const timer = setTimeout(() => setRevealed(true), delay);
@@ -7159,7 +7216,7 @@ function useLoadingReveal(active, delay = 0) {
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function useQueryDisplay(props) {
   var _a;
-  const [state, setState] = (0, import_react57.useState)(() => (0, import_tokens40.initialQueryDisplay)(props));
+  const [state, setState] = (0, import_react58.useState)(() => (0, import_tokens40.initialQueryDisplay)(props));
   let next = state;
   if (state.queryKey !== ((_a = props.queryKey) != null ? _a : null) || state.resultKey !== props.resultKey || state.loading !== !!props.loading) {
     next = (0, import_tokens40.advanceQueryDisplay)(state, props);
@@ -7268,7 +7325,7 @@ function BoundaryDescription() {
   const { colors } = useKjunStyles();
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(KText, { style: { ...typeStyle({ ...import_tokens40.tokens.typography.caption, fontSizePx: import_tokens40.tokens.extensions.state.descriptionSize }), color: colors.textSecondary, textAlign: "center" }, children: m.retryHint });
 }
-var KjunErrorBoundary = class extends import_react57.Component {
+var KjunErrorBoundary = class extends import_react58.Component {
   constructor() {
     super(...arguments);
     this.state = { error: false };
@@ -7316,7 +7373,7 @@ KjunErrorBoundary.contextType = KjunMessageContext;
 
 // packages/native/src/skeletons.tsx
 var import_tokens44 = require("@kjun-ui/tokens");
-var import_react59 = require("react");
+var import_react60 = require("react");
 var import_react_native44 = require("react-native");
 var import_react_native_svg5 = __toESM(require("react-native-svg"), 1);
 
@@ -7363,9 +7420,9 @@ function nativeMarketLayout(columns, showActions, containerWidth) {
 
 // packages/native/src/market-layout.ts
 var import_tokens42 = require("@kjun-ui/tokens");
-var import_react58 = require("react");
+var import_react59 = require("react");
 function useMarketLayout(columns, showActions) {
-  const [containerWidth, setContainerWidth] = (0, import_react58.useState)(0);
+  const [containerWidth, setContainerWidth] = (0, import_react59.useState)(0);
   const onLayout = (event) => setContainerWidth(event.nativeEvent.layout.width);
   return { ...nativeMarketLayout(columns, showActions, containerWidth), onLayout };
 }
@@ -7507,8 +7564,8 @@ function KjunChartSkeleton({
 }) {
   const m = useKjunMessages();
   loadingText != null ? loadingText : loadingText = m.chartLoading;
-  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react59.useRef)(new import_react_native44.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react59.useState)(0), thickness = import_tokens44.tokens.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" };
-  (0, import_react59.useEffect)(() => {
+  const kind = chartSkeletonKind(requestedKind), { colors } = useKjunStyles(), reduced = useReducedMotion(), opacity = (0, import_react60.useRef)(new import_react_native44.Animated.Value(1)).current, revealed = useLoadingReveal(true, loadingDelay), [measured, setMeasured] = (0, import_react60.useState)(0), thickness = import_tokens44.tokens.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" };
+  (0, import_react60.useEffect)(() => {
     if (reduced || !skeleton) return;
     const loop = import_react_native44.Animated.loop(
       import_react_native44.Animated.sequence([
@@ -7589,7 +7646,7 @@ function KjunChartSkeleton({
 
 // packages/native/src/financial-display.tsx
 var import_tokens47 = require("@kjun-ui/tokens");
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_react_native46 = require("react-native");
 var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
 
@@ -7597,7 +7654,7 @@ var import_react_native_svg6 = __toESM(require("react-native-svg"), 1);
 var import_tokens46 = require("@kjun-ui/tokens");
 
 // shared/package-runtime/use-number-motion.ts
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // shared/package-runtime/number-motion.ts
 var import_tokens45 = require("@kjun-ui/tokens");
@@ -7643,14 +7700,14 @@ function createNumberMotion(apply) {
 
 // shared/package-runtime/use-number-motion.ts
 function useNumberMotion(value, animated, fromPrevious, reduced) {
-  const [display, setDisplay] = (0, import_react60.useState)(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
-  const motion = (0, import_react60.useRef)(null);
+  const [display, setDisplay] = (0, import_react61.useState)(typeof value === "string" || fromPrevious || !animated || reduced ? value : 0);
+  const motion = (0, import_react61.useRef)(null);
   if (!motion.current) motion.current = createNumberMotion(setDisplay);
-  (0, import_react60.useLayoutEffect)(() => {
+  (0, import_react61.useLayoutEffect)(() => {
     if (!motion.current) motion.current = createNumberMotion(setDisplay);
     motion.current.update(value, animated, fromPrevious, reduced);
   }, [value, animated, fromPrevious, reduced]);
-  (0, import_react60.useLayoutEffect)(() => () => {
+  (0, import_react61.useLayoutEffect)(() => () => {
     var _a;
     (_a = motion.current) == null ? void 0 : _a.cancel();
     motion.current = null;
@@ -7659,7 +7716,7 @@ function useNumberMotion(value, animated, fromPrevious, reduced) {
 }
 
 // packages/native/src/number-display.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
 var import_react_native45 = require("react-native");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var finiteNumber = (value) => value == null || typeof value === "boolean" || typeof value === "string" && !value.trim() || !["number", "string"].includes(typeof value) || !Number.isFinite(Number(value)) ? null : Number(value) || 0;
@@ -7670,7 +7727,7 @@ var format = (value, decimals = 0) => new Intl.NumberFormat(void 0, {
 function useCountUp(value, animated, fromPrevious) {
   return useNumberMotion(value, animated, fromPrevious, useReducedMotion());
 }
-var MarketQuoteTypeContext = (0, import_react61.createContext)(null);
+var MarketQuoteTypeContext = (0, import_react62.createContext)(null);
 function KjunAnimatedNumber({
   value,
   decimals = 0,
@@ -7731,7 +7788,7 @@ function KjunPriceCell({
   fetchedAt,
   fromPrevious = true
 }) {
-  const { colors } = useKjunStyles(), quoteType = (0, import_react61.useContext)(MarketQuoteTypeContext);
+  const { colors } = useKjunStyles(), quoteType = (0, import_react62.useContext)(MarketQuoteTypeContext);
   return value == null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(KjunSkeleton, { type: "block", height: import_tokens46.tokens.extensions.financial.priceSkeletonHeight, width: import_tokens46.tokens.extensions.financial.priceSkeletonWidth }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native45.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens46.tokens.extensions.financial.affixGap }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       import_react_native45.View,
@@ -7765,7 +7822,7 @@ function KjunSignedValue({
   showFreshness = true,
   formatter
 }) {
-  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), quoteType = (0, import_react61.useContext)(MarketQuoteTypeContext), n = finiteNumber(value), role = n === null || n === 0 ? "priceNeutral" : n > 0 ? "priceUp" : "priceDown", color = loading || n === null ? colors.textSecondary : stale ? colors.textTertiary : domainColor(domainColors, role);
+  const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), quoteType = (0, import_react62.useContext)(MarketQuoteTypeContext), n = finiteNumber(value), role = n === null || n === 0 ? "priceNeutral" : n > 0 ? "priceUp" : "priceDown", color = loading || n === null ? colors.textSecondary : stale ? colors.textTertiary : domainColor(domainColors, role);
   const display = n === null ? "\u2014" : formatter ? formatter(n) : prefix + (showSign && n > 0 ? "+" : "") + format(kind === "percent" && !isRaw ? n * 100 : n, decimals) + (kind === "percent" ? "%" : "") + suffix;
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     import_react_native45.View,
@@ -8061,7 +8118,7 @@ function KjunSparkline({
   stretch = false,
   ariaLabel
 }) {
-  const { colors, domainColors } = useKjunStyles(), id = "kjun-" + (0, import_react62.useId)().replace(/:/g, ""), values = data.filter(Number.isFinite), min = Math.min(...values), max = Math.max(...values), range = max - min || 1, points = values.map(
+  const { colors, domainColors } = useKjunStyles(), id = "kjun-" + (0, import_react63.useId)().replace(/:/g, ""), values = data.filter(Number.isFinite), min = Math.min(...values), max = Math.max(...values), range = max - min || 1, points = values.map(
     (v, i) => `${2 + i / Math.max(1, values.length - 1) * (width - 4)},${2 + height - 4 - (v - min) / range * (height - 4)}`
   ).join(" "), change = values.length > 1 ? values[values.length - 1] - values[0] : 0, line = color || (change === 0 ? colors.textTertiary : semantic === "status" ? change > 0 ? colors.success : colors.danger : domainColor(domainColors, change > 0 ? "priceUp" : "priceDown"));
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
@@ -8107,7 +8164,7 @@ function KjunSparkline({
 
 // shared/package-runtime/table.ts
 var import_tokens48 = require("@kjun-ui/tokens");
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // shared/package-runtime/table-model.ts
 function getValue(row, key) {
@@ -8151,11 +8208,11 @@ function useTableModel(props) {
     expandSingle = false,
     onExpandedRowsChange
   } = props;
-  const [internalSort, setSort] = (0, import_react63.useState)({
+  const [internalSort, setSort] = (0, import_react64.useState)({
     key: "",
     order: "asc"
-  }), [internalExpanded, setExpanded] = (0, import_react63.useState)([]), [search, setSearch] = (0, import_react63.useState)(""), timer = (0, import_react63.useRef)(void 0);
-  (0, import_react63.useEffect)(() => () => clearTimeout(timer.current), []);
+  }), [internalExpanded, setExpanded] = (0, import_react64.useState)([]), [search, setSearch] = (0, import_react64.useState)(""), timer = (0, import_react64.useRef)(void 0);
+  (0, import_react64.useEffect)(() => () => 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);
@@ -8316,7 +8373,7 @@ function TableToolbar({
 
 // packages/native/src/table-grid.tsx
 var import_tokens50 = require("@kjun-ui/tokens");
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_react_native_svg7 = __toESM(require("react-native-svg"), 1);
 var import_react_native48 = require("react-native");
 var import_jsx_runtime45 = require("react/jsx-runtime");
@@ -8324,7 +8381,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
   const m = useKjunMessages();
   const { colors } = useKjunStyles();
   const geometry2 = import_tokens50.tokens.table;
-  const [scroll, setScroll] = (0, import_react64.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + (0, import_react64.useId)().replace(/[^a-z0-9]/gi, "");
+  const [scroll, setScroll] = (0, import_react65.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-table-fade-" + (0, import_react65.useId)().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;
   const totalWidth = visible.reduce((sum, col) => sum + width(col), 0) + (selectable ? geometry2.actionColumnWidth : 0) + (expandable ? geometry2.actionColumnWidth : 0);
@@ -8438,7 +8495,7 @@ function TableGrid({ initialLoading, skeletonRows, skeletonHidden, state, onRowC
                 ))
               ] }, i)) : !state.rows.length ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_native48.View, { style: { paddingVertical: geometry2.emptyPadding.y, paddingHorizontal: geometry2.emptyPadding.x, alignItems: "center" }, children: content(emptyContent || emptyText, {
                 color: colors.textSecondary
-              }) }) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react64.Fragment, { children: [
+              }) }) : state.rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react65.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                   AccessiblePressable,
                   {
@@ -9067,7 +9124,7 @@ function KjunKpiHero(props) {
 
 // packages/native/src/kpi-row.tsx
 var import_tokens54 = require("@kjun-ui/tokens");
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_react_native53 = require("react-native");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function KjunKpiRow({
@@ -9082,7 +9139,7 @@ function KjunKpiRow({
   const { colors, domainColors, numericFontFamily, fontFamily } = useKjunStyles(), mobile = (0, import_react_native53.useWindowDimensions)().width <= import_tokens54.tokens.responsive.kpiRow, small = size === "sm", summary = mobileSummary && mobile && !small;
   const geometry2 = import_tokens54.tokens.extensions.kpiRow;
   const spec = small ? geometry2.sm : mobile ? geometry2.mobile : geometry2.md;
-  const [width, setWidth] = (0, import_react65.useState)(0);
+  const [width, setWidth] = (0, import_react66.useState)(0);
   const paddingX = summary ? geometry2.summary.paddingX : spec.paddingX;
   const gapX = summary ? geometry2.summary.gapX : 0;
   const explicit = items2.some(
@@ -9301,7 +9358,7 @@ var import_tokens56 = require("@kjun-ui/tokens");
 var import_react_native55 = require("react-native");
 
 // shared/package-runtime/market-cards.ts
-var import_react66 = require("react");
+var import_react67 = require("react");
 function useMarketCardsModel(props, persistence) {
   const {
     columns,
@@ -9317,8 +9374,8 @@ function useMarketCardsModel(props, persistence) {
     sortKey: c.sortable ? metricConfig[c.key].sortKey : null,
     isDefaultSort: c.defaultSort
   }));
-  const [key, setKey] = (0, import_react66.useState)(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
-  const mounted = (0, import_react66.useRef)("");
+  const [key, setKey] = (0, import_react67.useState)(""), restoreSignature = JSON.stringify([storageNamespace, pills]);
+  const mounted = (0, import_react67.useRef)("");
   const save = (key2) => {
     var _a;
     try {
@@ -9326,7 +9383,7 @@ function useMarketCardsModel(props, persistence) {
     } catch (e) {
     }
   };
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     var _a, _b;
     if (mounted.current === restoreSignature) return;
     mounted.current = restoreSignature;
@@ -9805,7 +9862,7 @@ function KjunMarketListPanel({
 
 // packages/native/src/market-table.tsx
 var import_tokens59 = require("@kjun-ui/tokens");
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_react_native58 = require("react-native");
 var import_react_native_svg8 = __toESM(require("react-native-svg"), 1);
 var import_jsx_runtime55 = require("react/jsx-runtime");
@@ -9892,7 +9949,7 @@ function KjunMarketTable(props) {
     );
   };
   const layout = useMarketLayout(columns, showActions);
-  const [scroll, setScroll] = (0, import_react67.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-market-fade-" + (0, import_react67.useId)().replace(/[^a-z0-9]/gi, "");
+  const [scroll, setScroll] = (0, import_react68.useState)({ viewport: 0, x: 0 }), fadeId = "kjun-market-fade-" + (0, import_react68.useId)().replace(/[^a-z0-9]/gi, "");
   const tableQuote = { price: {}, change: { fontWeight: typeStyle("body").fontWeight } };
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     import_react_native58.View,
@@ -10107,30 +10164,35 @@ function KjunMarketTable(props) {
 
 // packages/native/src/list.tsx
 var import_tokens60 = require("@kjun-ui/tokens");
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_react_native59 = require("react-native");
 var import_jsx_runtime56 = require("react/jsx-runtime");
-var ListRowContext = (0, import_react68.createContext)({ divider: true, compact: false });
-function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, destructive = false, chevron = false, onPress }) {
-  const { colors } = useKjunStyles(), { divider, compact } = (0, import_react68.useContext)(ListRowContext);
+var ListRowContext = (0, import_react69.createContext)({ divider: true, compact: false });
+function KjunListRow({ title, description, leading, trailing, actions, href, disabled = false, destructive = false, chevron = false, onPress, ariaLabel, children }) {
+  const { colors } = useKjunStyles(), { divider, compact } = (0, import_react69.useContext)(ListRowContext);
   const parts = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
     hasContent(leading) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { children: content(leading) }),
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { ...typeStyle("label"), ...destructive ? { color: colors.danger } : {} }, children: title }),
-      !!description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { marginTop: import_tokens60.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description })
+      !!description && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { style: { marginTop: import_tokens60.tokens.extensions.list.descriptionGap, color: colors.textSecondary, ...typeStyle("caption") }, children: description }),
+      hasContent(children) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style: { marginTop: import_tokens60.tokens.extensions.list.descriptionGap }, children: content(children) })
     ] }),
     hasContent(trailing) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style: { maxWidth: "35%" }, children: content(trailing) }),
     chevron && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { accessible: false, importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KjunIcon, { name: "chevron-right", size: import_tokens60.tokens.iconSizes.default, color: colors.textTertiary }) })
   ] });
   const style = { flex: 1, minWidth: 0, minHeight: compact ? import_tokens60.tokens.extensions.list.compactMinimumHeight : import_tokens60.tokens.extensions.list.minimumHeight, flexDirection: "row", alignItems: "center", gap: import_tokens60.tokens.extensions.list.gap, padding: import_tokens60.tokens.extensions.list.padding, ...compact ? { paddingVertical: import_tokens60.tokens.extensions.list.compactPaddingY } : {} };
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { role: "listitem", style: { flexDirection: "row", alignItems: "center", gap: import_tokens60.tokens.extensions.list.gap, borderBottomWidth: divider ? import_tokens60.tokens.border.defaultWidth : 0, borderBottomColor: colors.divider }, children: [
-    onPress || href ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AccessiblePressable, { ...import_react_native59.Platform.OS === "web" && href && !disabled ? { href } : {}, accessibilityRole: href ? "link" : "button", accessibilityLabel: title + (description ? ", " + description : ""), disabled, accessibilityState: { disabled }, onPress, style: ({ pressed }) => ({ ...style, opacity: disabled ? import_tokens60.tokens.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style, children: parts }),
+    onPress || href ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AccessiblePressable, { ...import_react_native59.Platform.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 ? import_tokens60.tokens.states.opacity.disabled : 1, backgroundColor: pressed ? colors.hover : "transparent" }), children: parts }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { style, children: parts }),
     hasContent(actions) && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { pointerEvents: disabled ? "none" : "auto", ...disabled && import_react_native59.Platform.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: import_tokens60.tokens.extensions.list.actionsGap, paddingRight: import_tokens60.tokens.extensions.list.actionsPadding, opacity: disabled ? import_tokens60.tokens.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-function KjunListSection({ title, description, actions, children, ariaLabel, surface = true, divider = true, density = "default" }) {
+function KjunListSection({ title, description, actions, children, ariaLabel, surface = true, divider = true, density = "default", radius = "none" }) {
   const { colors } = useKjunStyles();
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: {
+    minWidth: 0,
+    backgroundColor: surface ? colors.surface : "transparent",
+    ...radius === "none" ? {} : { borderRadius: import_tokens60.tokens.card.radii[radius], overflow: "hidden" }
+  }, children: [
     !!(title || description || actions) && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { flexDirection: "row", alignItems: "center", gap: import_tokens60.tokens.extensions.list.gap, padding: import_tokens60.tokens.extensions.list.padding }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_react_native59.View, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),
@@ -10138,11 +10200,11 @@ function KjunListSection({ title, description, actions, children, ariaLabel, sur
       ] }),
       content(actions)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { role: "list", accessibilityLabel: ariaLabel || title, children: import_react68.Children.toArray(children).map((row, i, rows) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ListRowContext.Provider, { value: { divider: divider && i < rows.length - 1, compact: density === "compact" }, children: row }, i)) })
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { role: "list", accessibilityLabel: ariaLabel || title, children: import_react69.Children.toArray(children).map((row, i, rows) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ListRowContext.Provider, { value: { divider: divider && i < rows.length - 1, compact: density === "compact" }, children: row }, i)) })
   ] });
 }
 function KjunListItem({ children }) {
-  const { colors } = useKjunStyles(), { divider, compact } = (0, import_react68.useContext)(ListRowContext);
+  const { colors } = useKjunStyles(), { divider, compact } = (0, import_react69.useContext)(ListRowContext);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_native59.View, { role: "listitem", style: {
     padding: import_tokens60.tokens.extensions.list.padding,
     ...compact ? { paddingVertical: import_tokens60.tokens.extensions.list.compactPaddingY } : {},
@@ -10154,7 +10216,7 @@ function KjunListItem({ children }) {
 
 // packages/native/src/app-navigation.tsx
 var import_tokens61 = require("@kjun-ui/tokens");
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_react_native60 = require("react-native");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function KjunTopNavigation({ title, description, leading, actions, safeAreaTop = 0 }) {
@@ -10163,13 +10225,13 @@ function KjunTopNavigation({ title, description, leading, actions, safeAreaTop =
   const titleInset = Math.max(0, (geometry2.controlSize - import_tokens61.tokens.typography.sectionTitle.lineHeightPx) / 2);
   const wrapping = import_react_native60.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
   const edgeInset = (geometry2.controlSize - geometry2.iconSize) / 2;
-  const [iconEdges, setIconEdges] = (0, import_react69.useState)({ leading: false, trailing: false });
+  const [iconEdges, setIconEdges] = (0, import_react70.useState)({ leading: false, trailing: false });
   const square = (key) => (event) => {
     const { width, height } = event.nativeEvent.layout;
     const next = Math.abs(width - height) < 1 && Math.abs(height - geometry2.controlSize) < 1;
     setIconEdges((current) => current[key] === next ? current : { ...current, [key]: next });
   };
-  const flatten2 = (node) => import_react69.Children.toArray(node).flatMap((child) => (0, import_react69.isValidElement)(child) && child.type === import_react69.Fragment ? flatten2(child.props.children) : [child]);
+  const flatten2 = (node) => import_react70.Children.toArray(node).flatMap((child) => (0, import_react70.isValidElement)(child) && child.type === import_react70.Fragment ? flatten2(child.props.children) : [child]);
   const actionList = flatten2(actions);
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TopNavigationContext.Provider, { value: geometry2, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native60.View, { style: { flexShrink: 0, paddingTop: Math.max(0, safeAreaTop), backgroundColor: colors.surface }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_native60.View, { style: { minHeight: geometry2.minimumHeight, flexDirection: "row", flexWrap: "wrap", alignItems: "flex-start", gap: geometry2.gap, paddingVertical: geometry2.paddingY, paddingHorizontal: geometry2.paddingX }, children: [
     hasContent(leading) && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TopNavigationContext.Provider, { value: { ...geometry2, slot: "leading" }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_native60.View, { onLayout: square("leading"), style: { minHeight: geometry2.controlSize, minWidth: 0, maxWidth: "40%", flexShrink: 1, justifyContent: "center", marginLeft: iconEdges.leading ? -edgeInset : 0 }, children: content(leading) }) }),
@@ -10245,7 +10307,7 @@ function KjunBottomNavigation({ items: items2, value, ariaLabel, safeAreaBottom
 }
 function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboardVisible = false, hideOnKeyboard = false }) {
   const { colors } = useKjunStyles();
-  const [width, setWidth] = (0, import_react69.useState)(0);
+  const [width, setWidth] = (0, import_react70.useState)(0);
   const geometry2 = import_tokens61.tokens.extensions.navigation;
   const wide = width >= import_tokens61.tokens.responsive.bottomAction + geometry2.padding * 2;
   const wrapping = import_react_native60.Platform.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : {};
@@ -10267,17 +10329,17 @@ function KjunBottomActionBar({ description, children, safeAreaBottom = 0, keyboa
 }
 
 // packages/native/src/media.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_react_native61 = require("react-native");
 var import_tokens62 = require("@kjun-ui/tokens");
 var import_jsx_runtime58 = require("react/jsx-runtime");
-var ImageBackgroundContext = (0, import_react70.createContext)(void 0);
+var ImageBackgroundContext = (0, import_react71.createContext)(void 0);
 function KjunImage({ src, source, alt, decorative = false, aspectRatio = 1, fit = "cover", fallback: fallback2, onLoad, onError }) {
-  const { colors } = useKjunStyles(), background = (0, import_react70.useContext)(ImageBackgroundContext);
-  const request = JSON.stringify(source != null ? source : src), current = (0, import_react70.useRef)({ request, version: 0 });
+  const { colors } = useKjunStyles(), background = (0, import_react71.useContext)(ImageBackgroundContext);
+  const request = JSON.stringify(source != null ? source : src), current = (0, import_react71.useRef)({ request, version: 0 });
   if (current.current.request !== request) current.current = { request, version: current.current.version + 1 };
   const version = current.current.version;
-  const [failed, setFailed] = (0, import_react70.useState)(null);
+  const [failed, setFailed] = (0, import_react71.useState)(null);
   const missing = !source && !src;
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.View, { 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__ */ (0, import_jsx_runtime58.jsx)(import_react_native61.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();
@@ -10342,7 +10404,7 @@ function KjunFab({ icon, ariaLabel, disabled = false, safeAreaBottom = 0, offset
 }
 
 // packages/native/src/range-input.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_react_native63 = require("react-native");
 var import_tokens65 = require("@kjun-ui/tokens");
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -10367,18 +10429,18 @@ function RangeInput({
   const valid = domain.valid && (!Array.isArray(value) || value.length === 2) && values.every(domain.accepts) && (values.length === 1 || values[0] <= values[1]);
   const blocked = disabled || !valid;
   const effectiveMax = valid ? domain.snap(max) : min;
-  const [hovered, setHovered] = (0, import_react71.useState)(null);
-  const [dragging, setDragging] = (0, import_react71.useState)(null);
-  const [focused, setFocused] = (0, import_react71.useState)(null);
-  const track = (0, import_react71.useRef)(null), measured = (0, import_react71.useRef)({ x: 0, width: 1 }), selected = (0, import_react71.useRef)(0), dirty = (0, import_react71.useRef)(false);
-  const latest = (0, import_react71.useRef)(values);
+  const [hovered, setHovered] = (0, import_react72.useState)(null);
+  const [dragging, setDragging] = (0, import_react72.useState)(null);
+  const [focused, setFocused] = (0, import_react72.useState)(null);
+  const track = (0, import_react72.useRef)(null), measured = (0, import_react72.useRef)({ x: 0, width: 1 }), selected = (0, import_react72.useRef)(0), dirty = (0, import_react72.useRef)(false);
+  const latest = (0, import_react72.useRef)(values);
   latest.current = values;
-  const callbacks = (0, import_react71.useRef)({ onValueChange, onChangeCommit });
+  const callbacks = (0, import_react72.useRef)({ onValueChange, onChangeCommit });
   callbacks.current = { onValueChange, onChangeCommit };
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     if (!valid) console.warn("KJUN Slider: \uBC94\uC704\xB7step\xB7\uAC12\uC744 \uD655\uC778\uD558\uC138\uC694.");
   }, [valid]);
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     if (blocked) {
       setDragging(null);
       setHovered(null);
@@ -10418,7 +10480,7 @@ function RangeInput({
       measured.current = { x: pageX, width: Math.max(1, width) };
     });
   };
-  const responder = (0, import_react71.useMemo)(
+  const responder = (0, import_react72.useMemo)(
     () => import_react_native63.PanResponder.create({
       onStartShouldSetPanResponderCapture: () => !disabled && valid,
       onMoveShouldSetPanResponderCapture: (_event, gesture) => !disabled && valid && Math.abs(gesture.dx) > 3 && Math.abs(gesture.dx) > Math.abs(gesture.dy),
@@ -10643,7 +10705,7 @@ function KjunRangeSlider(props) {
 }
 
 // packages/native/src/quantity-stepper.tsx
-var import_react72 = require("react");
+var import_react73 = require("react");
 var import_react_native64 = require("react-native");
 var import_tokens66 = require("@kjun-ui/tokens");
 
@@ -10666,16 +10728,16 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const increaseStyle = { ...buttonStyle, borderRadius: 0, borderTopRightRadius: outer, borderBottomRightRadius: outer };
   const domain = (0, import_tokens66.createNumberDomain)({ min, max, step, precision }), valid = domain.valid && domain.accepts(value), blocked = disabled || !valid;
   const surface = useFieldSurface(size, { disabled: blocked, invalid });
-  const [draft, setDraft] = (0, import_react72.useState)(String(value));
-  const inputRef = (0, import_react72.useRef)(null);
-  const composing = (0, import_react72.useRef)(false), dirty = (0, import_react72.useRef)(false), accepted = (0, import_react72.useRef)(value);
-  const cancelledEscape = (0, import_react72.useRef)(false);
-  (0, import_react72.useEffect)(() => {
+  const [draft, setDraft] = (0, import_react73.useState)(String(value));
+  const inputRef = (0, import_react73.useRef)(null);
+  const composing = (0, import_react73.useRef)(false), dirty = (0, import_react73.useRef)(false), accepted = (0, import_react73.useRef)(value);
+  const cancelledEscape = (0, import_react73.useRef)(false);
+  (0, import_react73.useEffect)(() => {
     setDraft(String(value));
     accepted.current = value;
     dirty.current = false;
   }, [value, precision, min, max, step]);
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     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) => {
@@ -10712,7 +10774,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 = (0, import_react72.useRef)({ key, edit: (text) => {
+  const handlers = (0, import_react73.useRef)({ key, edit: (text) => {
     dirty.current = true;
     setDraft(text);
   } });
@@ -10720,7 +10782,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
     dirty.current = true;
     setDraft(text);
   } };
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (import_react_native64.Platform.OS !== "web") return;
     const input = inputRef.current;
     const keydown = (event) => handlers.current.key(event);
@@ -10792,7 +10854,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
 }
 
 // packages/native/src/time-picker.tsx
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_react_native65 = require("react-native");
 var import_tokens67 = require("@kjun-ui/tokens");
 var import_jsx_runtime63 = require("react/jsx-runtime");
@@ -10801,12 +10863,12 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
   ariaLabel != null ? ariaLabel : ariaLabel = m.time;
   const geometry2 = import_tokens67.tokens.extensions.timePicker, spec = import_tokens67.tokens.input[size];
   const { colors } = useKjunStyles();
-  const first = (0, import_react73.useRef)(null);
-  const [focused, setFocused] = (0, import_react73.useState)(false), [opened, setOpened] = (0, import_react73.useState)(null);
-  const field = useKjunField(), uid = (0, import_react73.useId)();
+  const first = (0, import_react74.useRef)(null);
+  const [focused, setFocused] = (0, import_react74.useState)(false), [opened, setOpened] = (0, import_react74.useState)(null);
+  const field = useKjunField(), uid = (0, import_react74.useId)();
   const fieldId = (field == null ? void 0 : field.id) || `kjun-time-${uid}`;
-  const domain = (0, import_react73.useMemo)(() => (0, import_tokens67.createTimeDomain)({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
-  (0, import_react73.useEffect)(() => {
+  const domain = (0, import_react74.useMemo)(() => (0, import_tokens67.createTimeDomain)({ precision, min, max, minuteStep, secondStep }), [precision, min, max, minuteStep, secondStep]), valid = domain.valid && domain.accepts(value);
+  (0, import_react74.useEffect)(() => {
     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) => {
@@ -10817,7 +10879,7 @@ function KjunTimePicker({ value, precision = "minute", min, max, minuteStep = 1,
   };
   const time = value === null ? null : domain.parse(value);
   return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react_native65.View, { accessibilityLabel: ariaLabel, style: { flexDirection: "row", alignItems: "center", maxWidth: "100%", minWidth: 0, backgroundColor: colors.inputBg, borderRadius: spec.radius }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_native65.View, { style: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 }, children: [m.hour, m.minute, m.second].slice(0, precision === "second" ? 3 : 2).map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react73.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_native65.View, { style: { flex: 1, flexDirection: "row", alignItems: "center", minWidth: 0 }, children: [m.hour, m.minute, m.second].slice(0, precision === "second" ? 3 : 2).map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react74.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(KText, { "aria-hidden": true, style: { ...inputTypeStyle(size), width: geometry2.separatorWidth, textAlign: "center", color: disabled || !valid ? colors.textDisabled : colors.textSecondary }, children: ":" }),
       /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FieldContext.Provider, { value: { ...field, id: index === 0 ? fieldId : `${fieldId}-${index}` }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CompoundControlContext.Provider, { value: { size, focusRef: index === 0 ? first : void 0, onFocusChange: setFocused, leading: index === 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_native65.View, { style: { flexShrink: 0, minWidth: geometry2.segmentMinimumWidth }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(KjunSelect, { value: time === null ? null : domain.part(time, index), options: domain.options(value, index).map((n) => ({ value: n, label: String(n).padStart(2, "0") })), onValueChange: (next) => {
         if (typeof next === "number") change(domain.select(value, index, next));