@kjun-ui/native 0.15.0 → 0.16.0

package/dist/index.cjs

@@ -4070,7 +4070,7 @@ function KjunFilterGroup({
                   paddingHorizontal: { xs: import_tokens24.tokens.dimension.value8, sm: import_tokens24.tokens.dimension.value12, md: import_tokens24.tokens.dimension.value12, lg: import_tokens24.tokens.dimension.value14, xl: import_tokens24.tokens.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
                   borderRadius: import_tokens24.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)(
@@ -4089,7 +4089,7 @@ function KjunFilterGroup({
                     {
                       name: option.icon,
                       size: import_tokens24.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: [
@@ -4112,7 +4112,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
                       }
@@ -4769,7 +4769,10 @@ function KjunPopover({
   ] });
 }
 function KjunTooltip({
-  content: message = "",
+  content: body = "",
+  title,
+  align,
+  width,
   placement = "top",
   delay = 0,
   children,
@@ -4778,6 +4781,7 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
+  const message = [title, body].filter(Boolean).join(", ");
   const { colors } = useKjunStyles(), [internal, setInternal] = (0, import_react38.useState)(false), open = controlled != null ? controlled : internal, latest = (0, import_react38.useRef)({ open, onOpenChange }), setOpen = (value) => {
     var _a, _b;
     if (latest.current.open === value) return;
@@ -4863,25 +4867,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_tokens28.tokens.extensions.tooltip.paddingY,
               paddingHorizontal: import_tokens28.tokens.extensions.tooltip.paddingX,
-              maxWidth: import_tokens28.tokens.extensions.tooltip.maxWidth,
+              maxWidth: width ? import_tokens28.tokens.extensions.tooltip.maxWidths[width] : import_tokens28.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
+                }
+              )
+            ]
           }
         )
       }
@@ -9923,9 +9931,13 @@ function KjunListRow({ title, description, leading, trailing, actions, href, dis
     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_tokens59.tokens.extensions.list.actionsGap, paddingRight: import_tokens59.tokens.extensions.list.actionsPadding, opacity: disabled ? import_tokens59.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_tokens59.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_tokens59.tokens.extensions.list.gap, padding: import_tokens59.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 }),

package/dist/index.js

@@ -4034,7 +4034,7 @@ function KjunFilterGroup({
                   paddingHorizontal: { xs: tokens21.dimension.value8, sm: tokens21.dimension.value12, md: tokens21.dimension.value12, lg: tokens21.dimension.value14, xl: tokens21.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
                   borderRadius: tokens21.button.radii[size],
-                  backgroundColor: active ? colors.text : colors.secondary
+                  backgroundColor: active ? colors.filterSelectedBg : colors.secondary
                 },
                 children: [
                   option.dot && /* @__PURE__ */ jsx23(
@@ -4053,7 +4053,7 @@ function KjunFilterGroup({
                     {
                       name: option.icon,
                       size: tokens21.extensions.selection.iconSize,
-                      color: active ? colors.inverse : colors.textSecondary
+                      color: active ? colors.filterSelectedText : colors.textSecondary
                     }
                   ),
                   /* @__PURE__ */ jsxs12(View17, { children: [
@@ -4076,7 +4076,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
                       }
@@ -4777,7 +4777,10 @@ function KjunPopover({
   ] });
 }
 function KjunTooltip({
-  content: message = "",
+  content: body = "",
+  title,
+  align,
+  width,
   placement = "top",
   delay = 0,
   children,
@@ -4786,6 +4789,7 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
+  const message = [title, body].filter(Boolean).join(", ");
   const { colors } = useKjunStyles(), [internal, setInternal] = useState17(false), open = controlled != null ? controlled : internal, latest = useRef19({ open, onOpenChange }), setOpen = (value) => {
     var _a, _b;
     if (latest.current.open === value) return;
@@ -4871,25 +4875,29 @@ function KjunTooltip({
         triggerRef: ref,
         placement,
         ariaLabel: message,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsxs15(
           View20,
           {
             style: {
               paddingVertical: tokens25.extensions.tooltip.paddingY,
               paddingHorizontal: tokens25.extensions.tooltip.paddingX,
-              maxWidth: tokens25.extensions.tooltip.maxWidth,
+              maxWidth: width ? tokens25.extensions.tooltip.maxWidths[width] : tokens25.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
-            children: /* @__PURE__ */ jsx27(
-              KText,
-              {
-                style: {
-                  ...typeStyle("caption"),
-                  color: colors.chartTooltipText
-                },
-                children: message
-              }
-            )
+            children: [
+              !!title && /* @__PURE__ */ jsx27(KText, { style: { ...typeStyle("controlSmall"), color: colors.chartTooltipText, ...align ? { textAlign: align === "center" ? "center" : "left" } : {} }, children: title }),
+              !!body && /* @__PURE__ */ jsx27(
+                KText,
+                {
+                  style: {
+                    ...typeStyle("caption"),
+                    color: colors.chartTooltipText,
+                    ...align ? { textAlign: align === "center" ? "center" : "left" } : {}
+                  },
+                  children: body
+                }
+              )
+            ]
           }
         )
       }
@@ -9966,9 +9974,13 @@ function KjunListRow({ title, description, leading, trailing, actions, href, dis
     hasContent(actions) && /* @__PURE__ */ jsx56(View48, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens55.extensions.list.actionsGap, paddingRight: tokens55.extensions.list.actionsPadding, opacity: disabled ? tokens55.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-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__ */ jsxs41(View48, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+  return /* @__PURE__ */ jsxs41(View48, { style: {
+    minWidth: 0,
+    backgroundColor: surface ? colors.surface : "transparent",
+    ...radius === "none" ? {} : { borderRadius: tokens55.card.radii[radius], overflow: "hidden" }
+  }, children: [
     !!(title || description || actions) && /* @__PURE__ */ jsxs41(View48, { style: { flexDirection: "row", alignItems: "center", gap: tokens55.extensions.list.gap, padding: tokens55.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs41(View48, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ jsx56(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),

package/dist/index.web.cjs

@@ -4232,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)(
@@ -4251,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: [
@@ -4274,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
                       }
@@ -4931,7 +4931,10 @@ function KjunPopover({
   ] });
 }
 function KjunTooltip({
-  content: message = "",
+  content: body = "",
+  title,
+  align,
+  width,
   placement = "top",
   delay = 0,
   children,
@@ -4940,6 +4943,7 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
+  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;
@@ -5025,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
+                }
+              )
+            ]
           }
         )
       }
@@ -10178,9 +10186,13 @@ function KjunListRow({ title, description, leading, trailing, actions, href, dis
     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 }),

package/dist/index.web.js

@@ -4196,7 +4196,7 @@ function KjunFilterGroup({
                   paddingHorizontal: { xs: tokens22.dimension.value8, sm: tokens22.dimension.value12, md: tokens22.dimension.value12, lg: tokens22.dimension.value14, xl: tokens22.dimension.value16 }[size],
                   // Corners follow the button scale with the height, so every size keeps the same shape.
                   borderRadius: tokens22.button.radii[size],
-                  backgroundColor: active ? colors.text : colors.secondary
+                  backgroundColor: active ? colors.filterSelectedBg : colors.secondary
                 },
                 children: [
                   option.dot && /* @__PURE__ */ jsx23(
@@ -4215,7 +4215,7 @@ function KjunFilterGroup({
                     {
                       name: option.icon,
                       size: tokens22.extensions.selection.iconSize,
-                      color: active ? colors.inverse : colors.textSecondary
+                      color: active ? colors.filterSelectedText : colors.textSecondary
                     }
                   ),
                   /* @__PURE__ */ jsxs13(View18, { children: [
@@ -4238,7 +4238,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
                       }
@@ -4939,7 +4939,10 @@ function KjunPopover({
   ] });
 }
 function KjunTooltip({
-  content: message = "",
+  content: body = "",
+  title,
+  align,
+  width,
   placement = "top",
   delay = 0,
   children,
@@ -4948,6 +4951,7 @@ function KjunTooltip({
   open: controlled,
   onOpenChange
 }) {
+  const message = [title, body].filter(Boolean).join(", ");
   const { colors } = useKjunStyles(), [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, latest = useRef20({ open, onOpenChange }), setOpen = (value) => {
     var _a, _b;
     if (latest.current.open === value) return;
@@ -5033,25 +5037,29 @@ function KjunTooltip({
         triggerRef: ref,
         placement,
         ariaLabel: message,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsxs16(
           View21,
           {
             style: {
               paddingVertical: tokens26.extensions.tooltip.paddingY,
               paddingHorizontal: tokens26.extensions.tooltip.paddingX,
-              maxWidth: tokens26.extensions.tooltip.maxWidth,
+              maxWidth: width ? tokens26.extensions.tooltip.maxWidths[width] : tokens26.extensions.tooltip.maxWidth,
               backgroundColor: colors.chartTooltipBg
             },
-            children: /* @__PURE__ */ jsx27(
-              KText,
-              {
-                style: {
-                  ...typeStyle("caption"),
-                  color: colors.chartTooltipText
-                },
-                children: message
-              }
-            )
+            children: [
+              !!title && /* @__PURE__ */ jsx27(KText, { style: { ...typeStyle("controlSmall"), color: colors.chartTooltipText, ...align ? { textAlign: align === "center" ? "center" : "left" } : {} }, children: title }),
+              !!body && /* @__PURE__ */ jsx27(
+                KText,
+                {
+                  style: {
+                    ...typeStyle("caption"),
+                    color: colors.chartTooltipText,
+                    ...align ? { textAlign: align === "center" ? "center" : "left" } : {}
+                  },
+                  children: body
+                }
+              )
+            ]
           }
         )
       }
@@ -10221,9 +10229,13 @@ function KjunListRow({ title, description, leading, trailing, actions, href, dis
     hasContent(actions) && /* @__PURE__ */ jsx56(View49, { pointerEvents: disabled ? "none" : "auto", ...disabled && Platform26.OS === "web" ? { inert: true } : {}, style: { maxWidth: "45%", flexDirection: "row", flexWrap: "wrap", gap: tokens56.extensions.list.actionsGap, paddingRight: tokens56.extensions.list.actionsPadding, opacity: disabled ? tokens56.states.opacity.disabled : 1 }, children: content(actions) })
   ] });
 }
-function KjunListSection({ title, description, actions, children, ariaLabel, 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__ */ jsxs42(View49, { style: { minWidth: 0, backgroundColor: surface ? colors.surface : "transparent" }, children: [
+  return /* @__PURE__ */ jsxs42(View49, { style: {
+    minWidth: 0,
+    backgroundColor: surface ? colors.surface : "transparent",
+    ...radius === "none" ? {} : { borderRadius: tokens56.card.radii[radius], overflow: "hidden" }
+  }, children: [
     !!(title || description || actions) && /* @__PURE__ */ jsxs42(View49, { style: { flexDirection: "row", alignItems: "center", gap: tokens56.extensions.list.gap, padding: tokens56.extensions.list.padding }, children: [
       /* @__PURE__ */ jsxs42(View49, { style: { flex: 1 }, children: [
         !!title && /* @__PURE__ */ jsx56(KText, { accessibilityRole: "header", style: { ...typeStyle("cardTitle") }, children: title }),

package/dist/styles.css

@@ -79,6 +79,8 @@
   --_kjun-color-selected-bg: var(--kjun-selected-bg, var(--kjun-active));
   --_kjun-color-on-brand: var(--kjun-on-brand, var(--kjun-inverse));
   --_kjun-color-switch-thumb-on: var(--kjun-switch-thumb-on, var(--kjun-on-brand, var(--kjun-inverse)));
+  --_kjun-color-filter-selected-bg: var(--kjun-filter-selected-bg, var(--kjun-text));
+  --_kjun-color-filter-selected-text: var(--kjun-filter-selected-text, var(--kjun-inverse));
   --_kjun-color-on-danger: var(--kjun-on-danger, var(--kjun-inverse));
   --_kjun-color-on-success: var(--kjun-on-success, var(--kjun-inverse));
   --_kjun-color-on-warning: var(--kjun-on-warning, var(--kjun-inverse));
@@ -182,6 +184,8 @@
   --_kjun-selected-bg: var(--_kjun-color-selected-bg);
   --_kjun-on-brand: var(--_kjun-color-on-brand);
   --_kjun-switch-thumb-on: var(--_kjun-color-switch-thumb-on);
+  --_kjun-filter-selected-bg: var(--_kjun-color-filter-selected-bg);
+  --_kjun-filter-selected-text: var(--_kjun-color-filter-selected-text);
   --_kjun-on-danger: var(--_kjun-color-on-danger);
   --_kjun-on-success: var(--_kjun-color-on-success);
   --_kjun-on-warning: var(--_kjun-color-on-warning);
@@ -532,6 +536,9 @@
   --_kjun-extension-switch-label-gap: 8px;
   --_kjun-extension-tooltip-padding-x: 8px;
   --_kjun-extension-tooltip-padding-y: 4px;
+  --_kjun-extension-tooltip-max-widths-sm: 192px;
+  --_kjun-extension-tooltip-max-widths-md: 256px;
+  --_kjun-extension-tooltip-max-widths-lg: 320px;
   --_kjun-extension-tooltip-max-width: 256px;
   --_kjun-extension-tooltip-arrow-size: 8px;
   --_kjun-extension-financial-affix-gap: 4px;
@@ -833,6 +840,7 @@
   --_kjun-geometry-card-radii-sm: 8px;
   --_kjun-geometry-card-radii-md: 12px;
   --_kjun-geometry-card-radii-lg: 16px;
+  --_kjun-geometry-card-radii-xl: 24px;
   --_kjun-geometry-card-subtitle-gap: 4px;
   --_kjun-geometry-card-title-gap: 8px;
   --_kjun-geometry-card-glass-blur: 10px;
@@ -882,6 +890,7 @@
   --_kjun-geometry-radius-radius9999: 9999px;
   --_kjun-geometry-radius-radius14: 14px;
   --_kjun-geometry-radius-radius20: 20px;
+  --_kjun-geometry-radius-radius24: 24px;
   --_kjun-geometry-native-minimum-touch-target: 44px;
   --_kjun-geometry-space-inline-xs: 4px;
   --_kjun-geometry-space-inline-sm: 8px;
@@ -2421,8 +2430,8 @@
   white-space: nowrap;
 }
 .kjun-filter-chip[aria-pressed="true"] > span {
-  background: var(--_kjun-color-text);
-  color: var(--_kjun-color-inverse);
+  background: var(--_kjun-color-filter-selected-bg);
+  color: var(--_kjun-color-filter-selected-text);
   font-weight: var(--_kjun-type-control-weight);
 }
 .kjun-filter-chip:disabled {
@@ -2520,6 +2529,17 @@
   font-weight: var(--_kjun-type-caption-weight);
   letter-spacing: var(--_kjun-type-caption-tracking);
 }
+/* Title above the body: a bolder small role in the same tooltip text color. */
+.kjun-tooltip-title {
+  display: block;
+  font-size: var(--_kjun-type-control-small-size);
+  line-height: var(--_kjun-type-control-small-line);
+  font-weight: var(--_kjun-type-control-small-weight);
+  letter-spacing: var(--_kjun-type-control-small-tracking);
+}
+.kjun-tooltip-body { display: block; }
+.kjun-tooltip[data-align="start"] { text-align: start; }
+.kjun-tooltip[data-align="center"] { text-align: center; }
 .kjun-tooltip svg {
   display: block;
   color: var(--_kjun-color-chart-tooltip-bg);
@@ -5023,6 +5043,9 @@
 
 /* 0.14.0: plain sections, destructive rows, decorative chevrons and non-row list items share the row inset. */
 .kjun-list-section[data-surface="false"]{background:transparent}
+/* A rounded section clips its rows to the corners; row focus rings move inside so the clip does not cut them. */
+.kjun-list-section[data-radius]{overflow:hidden;overflow:clip}
+.kjun-list-section[data-radius] .kjun-list-main:focus-visible{outline-offset:var(--_kjun-state-focus-inset-offset)}
 .kjun-list-row[data-destructive] .kjun-list-title{color:var(--_kjun-color-danger)}
 .kjun-list-chevron{flex-shrink:0;color:var(--_kjun-color-text-tertiary)}
 .kjun-list-item{padding:var(--_kjun-extension-list-padding);border-bottom:var(--_kjun-border-default-width) solid var(--_kjun-color-divider);min-width:0}

package/dist/types/packages/native/src/list.d.cts

@@ -1,3 +1,4 @@
+import { type CardRadius } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
 import { type GestureResponderEvent } from "react-native";
 export interface KjunListRowProps {
@@ -31,8 +32,10 @@ export interface KjunListSectionProps {
     divider?: boolean;
     /** "compact" rows keep the 16px inset but are 44 tall (the touch minimum) instead of 56. */
     density?: "default" | "compact";
+    /** Rounds the section on the card radius steps and clips its rows to the corners (default "none"). */
+    radius?: CardRadius;
 }
-export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density, radius }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListItemProps {
     children: ReactNode;
 }

package/dist/types/packages/native/src/list.d.ts

@@ -1,3 +1,4 @@
+import { type CardRadius } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
 import { type GestureResponderEvent } from "react-native";
 export interface KjunListRowProps {
@@ -31,8 +32,10 @@ export interface KjunListSectionProps {
     divider?: boolean;
     /** "compact" rows keep the 16px inset but are 44 tall (the touch minimum) instead of 56. */
     density?: "default" | "compact";
+    /** Rounds the section on the card radius steps and clips its rows to the corners (default "none"). */
+    radius?: CardRadius;
 }
-export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListSection({ title, description, actions, children, ariaLabel, surface, divider, density, radius }: KjunListSectionProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListItemProps {
     children: ReactNode;
 }

package/dist/types/packages/native/src/popover.d.cts

@@ -21,6 +21,11 @@ export interface KjunPopoverProps {
 export declare function KjunPopover({ noPadding, open: controlled, onOpenChange, manualTrigger, matchTriggerWidth, maxHeight, flip, focusOnOpen, ariaLabel, placement, header, modal, trigger, children, }: KjunPopoverProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disabled"> {
     content?: string;
+    /** A bolder line above content (a file name above its path). Read together with content. */
+    title?: string;
+    align?: "start" | "center";
+    /** Maximum width step (tooltip.maxWidths); default is md, the earlier width. */
+    width?: "sm" | "md" | "lg";
     placement?: "top" | "bottom" | "left" | "right";
     delay?: number;
     /** Controlled visibility; omit to let hover and focus drive it. */
@@ -28,4 +33,4 @@ export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disa
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTooltip({ content: body, title, align, width, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/popover.d.ts

@@ -21,6 +21,11 @@ export interface KjunPopoverProps {
 export declare function KjunPopover({ noPadding, open: controlled, onOpenChange, manualTrigger, matchTriggerWidth, maxHeight, flip, focusOnOpen, ariaLabel, placement, header, modal, trigger, children, }: KjunPopoverProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disabled"> {
     content?: string;
+    /** A bolder line above content (a file name above its path). Read together with content. */
+    title?: string;
+    align?: "start" | "center";
+    /** Maximum width step (tooltip.maxWidths); default is md, the earlier width. */
+    width?: "sm" | "md" | "lg";
     placement?: "top" | "bottom" | "left" | "right";
     delay?: number;
     /** Controlled visibility; omit to let hover and focus drive it. */
@@ -28,4 +33,4 @@ export interface KjunTooltipProps extends Pick<PressableProps, "onPress" | "disa
     onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTooltip({ content: body, title, align, width, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kjun-ui/native",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "MIT",
   "homepage": "https://ui.kjun.dev",
   "repository": {
@@ -47,8 +47,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@kjun-ui/tokens": "0.15.0",
-    "@kjun-ui/icons": "0.15.0"
+    "@kjun-ui/tokens": "0.16.0",
+    "@kjun-ui/icons": "0.16.0"
   },
   "peerDependencies": {
     "react": "^19.2.3",