@kjun-ui/native 0.9.0 → 0.10.0

package/dist/index.web.js

@@ -26,9 +26,23 @@ function mergeIcons(parent, own) {
 function withFallbackIcons(registry, fallbacks) {
   return mergeIcons(fallbacks, registry);
 }
+var warnedIcons = /* @__PURE__ */ new Set();
+function developmentMode() {
+  try {
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+function warnMissingIcon(name) {
+  if (!developmentMode() || warnedIcons.has(name)) return;
+  warnedIcons.add(name);
+  console.warn(`KJUN Icon: "${name}" \uC544\uC774\uCF58\uC774 \uB4F1\uB85D\uB418\uC9C0 \uC54A\uC544 help-circle\uB85C \uB300\uC2E0\uD569\uB2C8\uB2E4. @kjun-ui/icons/icons/${name}\uB97C import\uD574 KjunProvider\uC758 icons\uC5D0 \uB4F1\uB85D\uD558\uC138\uC694.`);
+}
 function resolveIcon(registry, name, filled = false) {
   var _a;
   const definition = Object.prototype.hasOwnProperty.call(registry, name) ? registry[name] : void 0;
+  if (!definition && name) warnMissingIcon(name);
   const filledNodes = filled && (definition == null ? void 0 : definition.filled);
   return { nodes: filledNodes || (definition == null ? void 0 : definition.outline) || ((_a = registry["help-circle"]) == null ? void 0 : _a.outline) || defaultIcons["help-circle"].outline, filled: !!filledNodes };
 }
@@ -773,6 +787,7 @@ function KjunButton(input) {
     size: declaredSize = "md",
     loading = false,
     block = false,
+    wrap = false,
     disabled = false,
     prefixIcon,
     suffixIcon,
@@ -793,7 +808,7 @@ function KjunButton(input) {
   const formActions = useContext5(FormActionsContext);
   const cardActions = useContext5(CardActionsContext);
   const stateContent = useContext5(DataStateContentContext);
-  const multiline = !!formActions || cardActions || !!stateContent || (navigation == null ? void 0 : navigation.slot) === "actions";
+  const multiline = wrap || !!formActions || cardActions || !!stateContent || (navigation == null ? void 0 : navigation.slot) === "actions";
   const height = Math.max(tokens3.button.heights[size], (_a = navigation == null ? void 0 : navigation.controlSize) != null ? _a : 0);
   const iconSize = (_b = navigation == null ? void 0 : navigation.iconSize) != null ? _b : tokens3.button.iconSizes[size];
   const hasContent2 = children !== void 0 && children !== null && children !== false && children !== "";
@@ -954,6 +969,16 @@ function FieldClear({ size, disabled, label, onPress }) {
   );
 }
 
+// shared/package-runtime/aria-ids.ts
+function mergeIds(...lists) {
+  const ids = [...new Set(lists.flatMap((list) => (list != null ? list : "").split(/\s+/)).filter(Boolean))];
+  return ids.length ? ids.join(" ") : void 0;
+}
+function joinHints(...parts) {
+  const text = parts.filter(Boolean);
+  return text.length ? text.join(". ") : void 0;
+}
+
 // packages/native/src/field-surface.ts
 import { useState as useState6 } from "react";
 import { Animated as Animated3, Platform as Platform5, TextInput } from "react-native";
@@ -1141,6 +1166,7 @@ function KjunFormGroup({
   required = false,
   error = "",
   hint = "",
+  labelHidden = false,
   children,
   style
 }) {
@@ -1150,9 +1176,17 @@ function KjunFormGroup({
   return /* @__PURE__ */ jsx8(
     FieldContext.Provider,
     {
-      value: { id: fieldId, label, error, hint, required, describedBy: error ? fieldId + "-error" : hint ? fieldId + "-hint" : void 0 },
+      value: {
+        id: fieldId,
+        label,
+        error,
+        hint,
+        required,
+        labelHidden,
+        describedBy: mergeIds(hint ? fieldId + "-hint" : void 0, error ? fieldId + "-error" : void 0)
+      },
       children: /* @__PURE__ */ jsxs2(View4, { style: [{ minWidth: 0, marginBottom: tokens7.extensions.form.itemGap }, style], children: [
-        label && /* @__PURE__ */ jsxs2(
+        label && !labelHidden && /* @__PURE__ */ jsxs2(
           Text3,
           {
             nativeID: fieldId + "-label",
@@ -1169,7 +1203,15 @@ function KjunFormGroup({
           }
         ),
         children,
-        (error || hint) && /* @__PURE__ */ jsxs2(
+        !!hint && /* @__PURE__ */ jsx8(
+          Text3,
+          {
+            nativeID: fieldId + "-hint",
+            style: { fontFamily, ...typeStyle("caption"), marginTop: tokens7.extensions.form.messageGap, color: c.textSecondary },
+            children: hint
+          }
+        ),
+        !!error && /* @__PURE__ */ jsxs2(
           View4,
           {
             style: {
@@ -1179,19 +1221,14 @@ function KjunFormGroup({
               marginTop: tokens7.extensions.form.messageGap
             },
             children: [
-              !!error && /* @__PURE__ */ jsx8(KjunIcon, { name: "alert-circle", size: tokens7.extensions.form.messageIconSize, color: c.danger }),
+              /* @__PURE__ */ jsx8(KjunIcon, { name: "alert-circle", size: tokens7.extensions.form.messageIconSize, color: c.danger }),
               /* @__PURE__ */ jsx8(
                 Text3,
                 {
-                  nativeID: fieldId + (error ? "-error" : "-hint"),
-                  accessibilityRole: error ? "alert" : void 0,
-                  style: {
-                    fontFamily,
-                    ...typeStyle("caption"),
-                    flexShrink: 1,
-                    color: error ? c.danger : c.textSecondary
-                  },
-                  children: error || hint
+                  nativeID: fieldId + "-error",
+                  accessibilityRole: "alert",
+                  style: { fontFamily, ...typeStyle("caption"), flexShrink: 1, color: c.danger },
+                  children: error
                 }
               )
             ]
@@ -1265,8 +1302,8 @@ var KjunInput = forwardRef2(function KjunInput2({
           editable: canEdit,
           readOnly,
           accessibilityLabel: ariaLabel || props.accessibilityLabel || (field == null ? void 0 : field.label),
-          accessibilityLabelledBy: (field == null ? void 0 : field.label) ? field.id + "-label" : void 0,
-          accessibilityHint: errorMessage || (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint) || props.accessibilityHint,
+          accessibilityLabelledBy: (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0,
+          accessibilityHint: joinHints(field == null ? void 0 : field.hint, errorMessage || (field == null ? void 0 : field.error)) || props.accessibilityHint,
           accessibilityState: { disabled },
           ...Platform6.OS === "web" ? {
             // Native Web TextInput does not translate accessibilityState.
@@ -1879,6 +1916,13 @@ function KjunCard({
   ] });
 }
 
+// shared/package-runtime/alert-live.ts
+function alertRole(tone, live) {
+  if (live === "off") return void 0;
+  if (live) return live === "assertive" ? "alert" : "status";
+  return tone === "danger" ? "alert" : "status";
+}
+
 // packages/native/src/display-primitives.tsx
 import { tokens as tokens10 } from "@kjun-ui/tokens";
 import { useContext as useContext8, useEffect as useEffect5, useRef as useRef6, useState as useState10 } from "react";
@@ -2076,6 +2120,7 @@ function KjunAlert({
   size = "md",
   title,
   closable = false,
+  live,
   children,
   actions,
   onClose
@@ -2092,7 +2137,7 @@ function KjunAlert({
   return /* @__PURE__ */ jsxs7(
     View10,
     {
-      role: tone === "danger" ? "alert" : "status",
+      role: alertRole(tone, live),
       style: {
         flexDirection: "row",
         alignItems: "flex-start",
@@ -3609,13 +3654,13 @@ var KjunTextarea = forwardRef3(
         editable: !disabled && !readonly && !props.readOnly && props.editable !== false,
         nativeID: props.nativeID || (field == null ? void 0 : field.id),
         accessibilityLabel: ariaLabel || props.accessibilityLabel || (field == null ? void 0 : field.label),
-        accessibilityHint: (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint) || props.accessibilityHint,
+        accessibilityHint: joinHints(field == null ? void 0 : field.hint, field == null ? void 0 : field.error) || props.accessibilityHint,
         accessibilityState: { disabled },
         ...Platform13.OS === "web" ? {
           "aria-disabled": disabled,
           "aria-invalid": invalid || void 0,
           "aria-describedby": field == null ? void 0 : field.describedBy,
-          "aria-labelledby": (field == null ? void 0 : field.label) ? field.id + "-label" : void 0,
+          "aria-labelledby": (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0,
           "aria-required": (field == null ? void 0 : field.required) || void 0
         } : {},
         placeholderTextColor: disabled ? colors.textDisabled : colors.inputPlaceholder,
@@ -3885,8 +3930,11 @@ function FloatingPanel({
   flip = true,
   minimumWidth = 0,
   focusOnOpen = false,
-  reveal
+  reveal,
+  header,
+  nonModal = false
 }) {
+  const [headerHeight, setHeaderHeight] = useState17(0);
   const panelRef = useRef17(null);
   const scroll = useRef17(null), viewport = useRef17(0);
   const { colors } = useKjunStyles(), window2 = useWindowDimensions4(), [anchored, setAnchored] = useState17(false), [sized, setSized] = useState17(false), [anchor, setAnchor] = useState17({ x: 0, y: 0, width: 0, height: 0 }), [panel, setPanel] = useState17({ width: 0, height: 0 });
@@ -3941,7 +3989,7 @@ function FloatingPanel({
     maximumWidth,
     Math.max(minimumPanelWidth, contentSizedMenu ? panel.width : matchTriggerWidth ? anchor.width : tokens22.extensions.popover.width)
   );
-  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens22.extensions.menu.listMaxHeight : tokens22.extensions.floating.maxHeight, window2.height - 2 * tokens22.extensions.floating.viewportInset), height = Math.min(panel.height, available), roomAbove = anchor.y - gap - tokens22.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens22.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
+  const available = Math.min(maxHeight != null ? maxHeight : field ? tokens22.extensions.menu.listMaxHeight : tokens22.extensions.floating.maxHeight, window2.height - 2 * tokens22.extensions.floating.viewportInset), height = Math.min(panel.height + (header != null ? headerHeight : 0), available), roomAbove = anchor.y - gap - tokens22.extensions.floating.viewportInset, roomBelow = window2.height - anchor.y - anchor.height - gap - tokens22.extensions.floating.viewportInset, above = placement.startsWith("top") ? !(flip && height > roomAbove && roomBelow > roomAbove) : flip && height > roomBelow && roomAbove > roomBelow;
   let left = placement.endsWith("end") ? anchor.x + anchor.width - width : placement === "top" || placement === "bottom" ? anchor.x + (anchor.width - width) / 2 : anchor.x, top = above ? anchor.y - height - gap : anchor.y + anchor.height + gap;
   if (placement === "left" || placement === "right") {
     left = placement === "left" ? anchor.x - width - gap : anchor.x + anchor.width + gap;
@@ -4025,7 +4073,7 @@ function FloatingPanel({
                 }
               }
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsxs15(
               Animated13.View,
               {
                 ref: panelRef,
@@ -4036,7 +4084,7 @@ function FloatingPanel({
                 pointerEvents: open && anchored && sized ? "auto" : "none",
                 accessibilityElementsHidden: !open || !anchored || !sized,
                 ...!open || !anchored || !sized ? { inert: true } : {},
-                accessibilityViewIsModal: true,
+                accessibilityViewIsModal: !nonModal,
                 accessibilityLabel: ariaLabel,
                 style: {
                   opacity: anchored && sized ? motion.opacity : 0,
@@ -4058,26 +4106,42 @@ function FloatingPanel({
                   boxShadow: (tooltip ? tokens22.extensions.tooltip.elevation : popover ? tokens22.extensions.popover.elevation : tokens22.extensions.menu.elevation).map(({ colorRole, ...layer2 }) => ({ ...layer2, color: colors[colorRole] })),
                   overflow: "hidden"
                 },
-                children: /* @__PURE__ */ jsx24(
-                  ScrollView4,
-                  {
-                    ref: scroll,
-                    onLayout: (event) => {
-                      viewport.current = event.nativeEvent.layout.height;
-                    },
-                    keyboardShouldPersistTaps: "handled",
-                    style: { maxHeight: available },
-                    contentContainerStyle: { padding: menu || field ? tokens22.extensions.menu.padding : 0 },
-                    onContentSizeChange: (width2, height2) => {
-                      if (contentSizedMenu) return;
-                      setSized(true);
-                      setPanel(
-                        (previous) => previous.width === width2 && previous.height === height2 ? previous : { width: width2, height: height2 }
-                      );
-                    },
-                    children
-                  }
-                )
+                children: [
+                  header != null && /* @__PURE__ */ jsx24(
+                    View19,
+                    {
+                      onLayout: ({ nativeEvent: { layout } }) => setHeaderHeight(layout.height),
+                      style: {
+                        paddingTop: tokens22.extensions.popover.padding,
+                        paddingHorizontal: tokens22.extensions.popover.padding,
+                        paddingBottom: tokens22.extensions.popover.headerPaddingBottom,
+                        borderBottomWidth: tokens22.border.defaultWidth,
+                        borderBottomColor: colors.divider
+                      },
+                      children: header
+                    }
+                  ),
+                  /* @__PURE__ */ jsx24(
+                    ScrollView4,
+                    {
+                      ref: scroll,
+                      onLayout: (event) => {
+                        viewport.current = event.nativeEvent.layout.height;
+                      },
+                      keyboardShouldPersistTaps: "handled",
+                      style: { maxHeight: available - (header != null ? headerHeight : 0), flexShrink: 1 },
+                      contentContainerStyle: { padding: menu || field ? tokens22.extensions.menu.padding : 0 },
+                      onContentSizeChange: (width2, height2) => {
+                        if (contentSizedMenu) return;
+                        setSized(true);
+                        setPanel(
+                          (previous) => previous.width === width2 && previous.height === height2 ? previous : { width: width2, height: height2 }
+                        );
+                      },
+                      children
+                    }
+                  )
+                ]
               }
             )
           ]
@@ -4112,9 +4176,12 @@ function KjunPopover({
   focusOnOpen = false,
   ariaLabel,
   placement = "bottom",
+  header,
+  modal = true,
   trigger,
   children
 }) {
+  const { colors } = useKjunStyles();
   const [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, ref = useRef18(null);
   const change = (v) => {
     setInternal(v);
@@ -4143,6 +4210,8 @@ function KjunPopover({
         popover: true,
         focusOnOpen,
         ariaLabel,
+        header: header != null ? content(header, { ...typeStyle("cardTitle"), color: colors.text }) : void 0,
+        nonModal: !modal,
         children: /* @__PURE__ */ jsx25(View20, { style: { padding: noPadding ? 0 : tokens23.extensions.popover.padding, gap: noPadding ? 0 : tokens23.extensions.popover.gap }, children: content(
           typeof children === "function" ? children(() => change(false)) : children,
           Platform16.OS === "web" ? { wordBreak: "keep-all", overflowWrap: "anywhere" } : void 0
@@ -4157,9 +4226,18 @@ function KjunTooltip({
   delay = 0,
   children,
   onPress,
-  disabled
+  disabled,
+  open: controlled,
+  onOpenChange
 }) {
-  const { colors } = useKjunStyles(), [open, setOpen] = useState18(false), ref = useRef18(null), timer = useRef18(void 0);
+  const { colors } = useKjunStyles(), [internal, setInternal] = useState18(false), open = controlled != null ? controlled : internal, latest = useRef18({ open, onOpenChange }), setOpen = (value) => {
+    var _a, _b;
+    if (latest.current.open === value) return;
+    latest.current.open = value;
+    setInternal(value);
+    (_b = (_a = latest.current).onOpenChange) == null ? void 0 : _b.call(_a, value);
+  }, ref = useRef18(null), timer = useRef18(void 0);
+  latest.current = { open, onOpenChange };
   const scopeActive = useActiveLayerScope();
   const hide = () => {
     clearTimeout(timer.current);
@@ -7527,7 +7605,7 @@ function TableToolbar({
     selectable && selected.length > 0 && /* @__PURE__ */ jsxs30(
       View36,
       {
-        accessibilityRole: "toolbar",
+        role: "group",
         accessibilityLabel: "\uC120\uD0DD \uC791\uC5C5",
         style: [toolbarStyle, { backgroundColor: colors.selectedBg }],
         children: [
@@ -9879,7 +9957,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
   const { colors, fontFamily } = useKjunStyles();
   const field = useKjunField();
   const invalid = error || !!(field == null ? void 0 : field.error);
-  const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) ? field.id + "-label" : void 0;
+  const labelledBy = !ariaLabel && (field == null ? void 0 : field.label) && !field.labelHidden ? field.id + "-label" : void 0;
   const geometry2 = tokens58.extensions.compound;
   const buttonStyle = { width: tokens58.input[size].height, paddingHorizontal: 0 };
   const outer = tokens58.input[size].radius;
@@ -9987,7 +10065,7 @@ function KjunQuantityStepper({ value, min = 0, max, step = 1, precision = 0, dis
         nativeID: id || (field == null ? void 0 : field.id),
         accessibilityLabel: ariaLabel || (field == null ? void 0 : field.label) || "\uC218\uB7C9",
         accessibilityLabelledBy: labelledBy,
-        accessibilityHint: (field == null ? void 0 : field.error) || (field == null ? void 0 : field.hint),
+        accessibilityHint: joinHints(field == null ? void 0 : field.hint, field == null ? void 0 : field.error),
         role: "spinbutton",
         accessibilityValue: { min, max, now: value },
         accessibilityState: { disabled: blocked },

package/dist/styles.css

@@ -250,6 +250,7 @@
   --_kjun-extension-popover-radius: 12px;
   --_kjun-extension-popover-padding: 16px;
   --_kjun-extension-popover-gap: 12px;
+  --_kjun-extension-popover-header-padding-bottom: 12px;
   --_kjun-extension-state-title-size: 1.25rem;
   --_kjun-extension-state-description-size: 0.75rem;
   --_kjun-extension-state-padding-sm: 24px;
@@ -946,28 +947,30 @@
 /* Baseline for kjun-owned markup only: an element with a class that starts with kjun- (kjun- is reserved;
    my-kjun-logo is app markup). Component roots carry a kjun- class (Vue adds kjun-root, the Vue layer host is kjun-layers);
    portal roots pair kjun-scope with a kjun- class. The bare Provider root (kjun-scope) is excluded, so app markup inside the Provider keeps its own styles.
-   Slot content placed inside a kjun component follows this baseline; style it with classes. */
+   Slot content placed inside a kjun component follows this baseline; style it with classes.
+   App markup under [data-kjun-content] opts out of the descendant resets, while kjun elements inside it get them back;
+   both branches keep the same specificity as before (the exclusion sits in :where). */
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *,
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *:not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) *,
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"])::before,
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"])::after,
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::before,
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::after {
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *:not(:where([data-kjun-content] *))::before, .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) *::before,
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *:not(:where([data-kjun-content] *))::after, .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) *::after {
   box-sizing: border-box;
   border-width: 0;
   border-style: solid;
   border-color: var(--_kjun-color-border);
 }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre) {
   margin: 0;
 }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(h1, h2, h3, h4, h5, h6),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(h1, h2, h3, h4, h5, h6):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(h1, h2, h3, h4, h5, h6),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(h1, h2, h3, h4, h5, h6) {
   font-size: inherit;
   font-weight: inherit;
 }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, input, optgroup, select, textarea),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, input, optgroup, select, textarea):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(button, input, optgroup, select, textarea),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, input, optgroup, select, textarea) {
   font: inherit;
   letter-spacing: inherit;
@@ -975,33 +978,33 @@
   margin: 0;
   padding: 0;
 }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, select),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, select):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(button, select),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, select) { text-transform: none; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [type="button"], [type="reset"], [type="submit"]),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [type="button"], [type="reset"], [type="submit"]):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(button, [type="button"], [type="reset"], [type="submit"]),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, [type="button"], [type="reset"], [type="submit"]) {
   -webkit-appearance: button;
   background-color: transparent;
   background-image: none;
 }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [role="button"]),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [role="button"]):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(button, [role="button"]),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, [role="button"]) { cursor: pointer; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(:disabled),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(:disabled):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(:disabled),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(:disabled) { cursor: default; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(a),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(a):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(a),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(a) { color: inherit; text-decoration: inherit; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(ol, ul, menu),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(ol, ul, menu):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(ol, ul, menu),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(ol, ul, menu) { list-style: none; margin: 0; padding: 0; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(table),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(table):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(table),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(table) { text-indent: 0; border-color: inherit; border-collapse: collapse; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(fieldset, legend),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(fieldset, legend):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(fieldset, legend),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(fieldset, legend) { margin: 0; padding: 0; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(textarea),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(textarea):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(textarea),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(textarea) { resize: vertical; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(input, textarea)::placeholder,
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(input, textarea):not(:where([data-kjun-content] *))::placeholder, .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(input, textarea)::placeholder,
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(input, textarea)::placeholder { opacity: 1; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(img, video),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(img, video):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where(img, video),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(img, video) { max-width: 100%; height: auto; }
-.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where([hidden]:not([hidden="until-found"])),
+.kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where([hidden]:not([hidden="until-found"])):not(:where([data-kjun-content] *)), .kjun-scope :where([data-kjun-content] :is([class^="kjun-"], [class*=" kjun-"])) :where([hidden]:not([hidden="until-found"])),
 .kjun-scope :where(:is([class^="kjun-"], [class*=" kjun-"]):not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where([hidden]:not([hidden="until-found"])) { display: none; }
 /* Last so it wins over the element resets above (e.g. font: inherit on a root <button>).
    The outermost kjun element takes the scope's text style; nested kjun elements inherit it.
@@ -1770,6 +1773,9 @@
   justify-content: flex-end;
   gap: var(--_kjun-geometry-modal-actions-gap);
 }
+/* wrap: the inline height becomes a minimum (set by the component) and the label may break lines. */
+.kjun-button[data-wrap] { flex-shrink: 1; max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
+.kjun-button[data-wrap] > .kjun-button-label { min-width: 0; }
 .kjun-form-actions > .kjun-button {
   --_kjun-action-height: var(--_kjun-geometry-button-heights-lg);
   height: auto !important;
@@ -2424,6 +2430,11 @@
   font-weight:var(--_kjun-type-body-weight); letter-spacing:var(--_kjun-type-body-tracking);
 }
 .kjun-popover-dialog { outline:none; }
+/* With a header only the body scrolls: the panel and dialog become clipping flex columns. */
+.kjun-popover-has-header { display:flex; flex-direction:column; overflow:hidden; }
+.kjun-popover-has-header .kjun-popover-dialog { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
+.kjun-popover-header { flex:none; padding:var(--_kjun-extension-popover-padding) var(--_kjun-extension-popover-padding) var(--_kjun-extension-popover-header-padding-bottom); border-bottom:var(--_kjun-border-default-width) solid var(--_kjun-color-divider); font-size:var(--_kjun-type-card-title-size); line-height:var(--_kjun-type-card-title-line); font-weight:var(--_kjun-type-card-title-weight); letter-spacing:var(--_kjun-type-card-title-tracking); word-break:keep-all; overflow-wrap:anywhere; }
+.kjun-popover-body { flex:1 1 auto; min-height:0; overflow-y:auto; }
 .kjun-popover-content { display:flex; flex-direction:column; gap:var(--_kjun-extension-popover-gap); padding:var(--_kjun-extension-popover-padding); min-width:0; word-break:keep-all; overflow-wrap:anywhere; }
 .kjun-popover-content[data-no-padding="true"] { padding:0; gap:0; }
 .kjun-tooltip {

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

@@ -14,6 +14,8 @@ export interface KjunButtonProps extends Omit<PressableProps, "children" | "styl
     size?: ButtonSize;
     loading?: boolean;
     block?: boolean;
+    /** Long labels wrap: the size's height becomes a minimum and the button grows instead of overflowing. */
+    wrap?: boolean;
     prefixIcon?: string;
     suffixIcon?: string;
     prefixIconFilled?: boolean;

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

@@ -14,6 +14,8 @@ export interface KjunButtonProps extends Omit<PressableProps, "children" | "styl
     size?: ButtonSize;
     loading?: boolean;
     block?: boolean;
+    /** Long labels wrap: the size's height becomes a minimum and the button grows instead of overflowing. */
+    wrap?: boolean;
     prefixIcon?: string;
     suffixIcon?: string;
     prefixIconFilled?: boolean;

package/dist/types/packages/native/src/display-primitives.d.cts

@@ -1,3 +1,4 @@
+import { type AlertLive } from "../../../shared/package-runtime/alert-live.cjs";
 import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 export type DisplaySize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -32,12 +33,14 @@ export interface KjunAlertProps {
     size?: "sm" | "md" | "lg";
     title?: ReactNode;
     closable?: boolean;
+    /** How screen readers announce it: assertive (role alert), polite (status) or off; defaults to alert for danger, status otherwise. */
+    live?: AlertLive;
     children?: ReactNode;
     /** Buttons placed under the message; unsized KjunButtons follow the alert size. */
     actions?: ReactNode;
     onClose?: () => void;
 }
-export declare function KjunAlert({ type, variant, size, title, closable, children, actions, onClose, }: KjunAlertProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function KjunAlert({ type, variant, size, title, closable, live, children, actions, onClose, }: KjunAlertProps): import("react/jsx-runtime").JSX.Element | null;
 export interface KjunProgressProps {
     value?: number;
     max?: number;

package/dist/types/packages/native/src/display-primitives.d.ts

@@ -1,3 +1,4 @@
+import { type AlertLive } from "../../../shared/package-runtime/alert-live.js";
 import { type ReactNode } from "react";
 import { type StyleProp, type ViewStyle } from "react-native";
 export type DisplaySize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -32,12 +33,14 @@ export interface KjunAlertProps {
     size?: "sm" | "md" | "lg";
     title?: ReactNode;
     closable?: boolean;
+    /** How screen readers announce it: assertive (role alert), polite (status) or off; defaults to alert for danger, status otherwise. */
+    live?: AlertLive;
     children?: ReactNode;
     /** Buttons placed under the message; unsized KjunButtons follow the alert size. */
     actions?: ReactNode;
     onClose?: () => void;
 }
-export declare function KjunAlert({ type, variant, size, title, closable, children, actions, onClose, }: KjunAlertProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function KjunAlert({ type, variant, size, title, closable, live, children, actions, onClose, }: KjunAlertProps): import("react/jsx-runtime").JSX.Element | null;
 export interface KjunProgressProps {
     value?: number;
     max?: number;

package/dist/types/packages/native/src/floating-panel.d.cts

@@ -6,7 +6,7 @@ export declare function LayerTrigger({ trigger, onPress, disabled, }: {
     disabled?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export type Placement = "top" | "bottom" | "left" | "right" | "bottom-start" | "bottom-end" | "top-start" | "top-end";
-export declare function FloatingPanel({ open, onOpenChange, triggerRef, children, placement, matchTriggerWidth, maxHeight, ariaLabel, menu, field, tooltip, popover, flip, minimumWidth, focusOnOpen, reveal, }: {
+export declare function FloatingPanel({ open, onOpenChange, triggerRef, children, placement, matchTriggerWidth, maxHeight, ariaLabel, menu, field, tooltip, popover, flip, minimumWidth, focusOnOpen, reveal, header, nonModal, }: {
     open: boolean;
     onOpenChange: (v: boolean) => void;
     triggerRef: RefObject<View | null>;
@@ -28,4 +28,8 @@ export declare function FloatingPanel({ open, onOpenChange, triggerRef, children
         y: number;
         height: number;
     } | null>;
+    /** Popover header drawn above the scroll view, so only the body scrolls. */
+    header?: ReactNode;
+    /** Popover modal={false}: screen readers are not confined to the panel. */
+    nonModal?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/packages/native/src/floating-panel.d.ts

@@ -6,7 +6,7 @@ export declare function LayerTrigger({ trigger, onPress, disabled, }: {
     disabled?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export type Placement = "top" | "bottom" | "left" | "right" | "bottom-start" | "bottom-end" | "top-start" | "top-end";
-export declare function FloatingPanel({ open, onOpenChange, triggerRef, children, placement, matchTriggerWidth, maxHeight, ariaLabel, menu, field, tooltip, popover, flip, minimumWidth, focusOnOpen, reveal, }: {
+export declare function FloatingPanel({ open, onOpenChange, triggerRef, children, placement, matchTriggerWidth, maxHeight, ariaLabel, menu, field, tooltip, popover, flip, minimumWidth, focusOnOpen, reveal, header, nonModal, }: {
     open: boolean;
     onOpenChange: (v: boolean) => void;
     triggerRef: RefObject<View | null>;
@@ -28,4 +28,8 @@ export declare function FloatingPanel({ open, onOpenChange, triggerRef, children
         y: number;
         height: number;
     } | null>;
+    /** Popover header drawn above the scroll view, so only the body scrolls. */
+    header?: ReactNode;
+    /** Popover modal={false}: screen readers are not confined to the panel. */
+    nonModal?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;

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

@@ -8,6 +8,7 @@ interface FieldValue {
     hint?: string;
     required?: boolean;
     describedBy?: string;
+    labelHidden?: boolean;
 }
 export declare const FieldContext: import("react").Context<FieldValue | null>;
 export declare const useKjunField: () => FieldValue | null;
@@ -17,10 +18,12 @@ export interface KjunFormGroupProps {
     required?: boolean;
     error?: string;
     hint?: string;
+    /** Hides the label visually while it still names the field. */
+    labelHidden?: boolean;
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function KjunFormGroup({ label, id, required, error, hint, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunFormGroup({ label, id, required, error, hint, labelHidden, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunInputProps extends Omit<TextInputProps, "value" | "onChange"> {
     value: string | number;
     size?: InputSize;

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

@@ -8,6 +8,7 @@ interface FieldValue {
     hint?: string;
     required?: boolean;
     describedBy?: string;
+    labelHidden?: boolean;
 }
 export declare const FieldContext: import("react").Context<FieldValue | null>;
 export declare const useKjunField: () => FieldValue | null;
@@ -17,10 +18,12 @@ export interface KjunFormGroupProps {
     required?: boolean;
     error?: string;
     hint?: string;
+    /** Hides the label visually while it still names the field. */
+    labelHidden?: boolean;
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export declare function KjunFormGroup({ label, id, required, error, hint, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunFormGroup({ label, id, required, error, hint, labelHidden, children, style, }: KjunFormGroupProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunInputProps extends Omit<TextInputProps, "value" | "onChange"> {
     value: string | number;
     size?: InputSize;