@kjun-ui/native 0.8.1 → 0.10.0

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;

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

@@ -11,14 +11,21 @@ export interface KjunPopoverProps {
     focusOnOpen?: boolean;
     ariaLabel?: string;
     placement?: "top" | "bottom" | "left" | "right";
+    /** Fixed header above the body; only the body scrolls and maxHeight covers both. */
+    header?: ReactNode;
+    /** false stops confining screen readers to the panel; Native has no Tab order to release. */
+    modal?: boolean;
     trigger: ReactNode | ((open: boolean) => ReactNode);
     children: ReactNode | ((close: () => void) => ReactNode);
 }
-export declare function KjunPopover({ noPadding, open: controlled, onOpenChange, manualTrigger, matchTriggerWidth, maxHeight, flip, focusOnOpen, ariaLabel, placement, trigger, children, }: KjunPopoverProps): import("react/jsx-runtime").JSX.Element;
+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;
     placement?: "top" | "bottom" | "left" | "right";
     delay?: number;
+    /** Controlled visibility; omit to let hover and focus drive it. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,14 +11,21 @@ export interface KjunPopoverProps {
     focusOnOpen?: boolean;
     ariaLabel?: string;
     placement?: "top" | "bottom" | "left" | "right";
+    /** Fixed header above the body; only the body scrolls and maxHeight covers both. */
+    header?: ReactNode;
+    /** false stops confining screen readers to the panel; Native has no Tab order to release. */
+    modal?: boolean;
     trigger: ReactNode | ((open: boolean) => ReactNode);
     children: ReactNode | ((close: () => void) => ReactNode);
 }
-export declare function KjunPopover({ noPadding, open: controlled, onOpenChange, manualTrigger, matchTriggerWidth, maxHeight, flip, focusOnOpen, ariaLabel, placement, trigger, children, }: KjunPopoverProps): import("react/jsx-runtime").JSX.Element;
+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;
     placement?: "top" | "bottom" | "left" | "right";
     delay?: number;
+    /** Controlled visibility; omit to let hover and focus drive it. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     children: ReactNode;
 }
-export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTooltip({ content: message, placement, delay, children, onPress, disabled, open: controlled, onOpenChange, }: KjunTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/select-control.d.cts

@@ -25,6 +25,10 @@ export interface KjunSelectProps<T extends SelectOption = SelectOption> {
     onChange?: (v: OptionValue | OptionValue[] | null) => void;
     onOpenChange?: (v: boolean) => void;
     onSearch?: (v: string) => void;
+    /** Replaces the default ranked label/searchKeys match; results keep the original order. */
+    filterFn?: (option: T, query: string) => boolean;
+    /** Extra option fields searched after the label. */
+    searchKeys?: string[];
     onClear?: () => void;
 }
-export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, filterFn, searchKeys, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/packages/native/src/select-control.d.ts

@@ -25,6 +25,10 @@ export interface KjunSelectProps<T extends SelectOption = SelectOption> {
     onChange?: (v: OptionValue | OptionValue[] | null) => void;
     onOpenChange?: (v: boolean) => void;
     onSearch?: (v: string) => void;
+    /** Replaces the default ranked label/searchKeys match; results keep the original order. */
+    filterFn?: (option: T, query: string) => boolean;
+    /** Extra option fields searched after the label. */
+    searchKeys?: string[];
     onClear?: () => void;
 }
-export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function KjunSelect<T extends SelectOption = SelectOption>({ value, options, placeholder, ariaLabel, labelKey, valueKey, size, disabled, searchable, open: controlled, loading, searchPlaceholder, optionPageSize, clearable, multiple, error, menuHeader, renderOption, renderSelected, onValueChange, onChange, onOpenChange, onSearch, onClear, filterFn, searchKeys, }: KjunSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/shared/package-runtime/alert-live.d.cts

@@ -0,0 +1,3 @@
+export type AlertLive = "assertive" | "polite" | "off";
+/** Alert announcement role: `live` overrides the tone default (danger interrupts, others are polite); off announces nothing. */
+export declare function alertRole(tone: string, live?: AlertLive): "alert" | "status" | undefined;

package/dist/types/shared/package-runtime/alert-live.d.ts

@@ -0,0 +1,3 @@
+export type AlertLive = "assertive" | "polite" | "off";
+/** Alert announcement role: `live` overrides the tone default (danger interrupts, others are polite); off announces nothing. */
+export declare function alertRole(tone: string, live?: AlertLive): "alert" | "status" | undefined;

package/dist/types/shared/package-runtime/aria-ids.d.cts

@@ -0,0 +1,4 @@
+/** Joins space-separated id lists, keeping each id once; empty input gives undefined so the attribute is omitted. */
+export declare function mergeIds(...lists: (string | null | undefined)[]): string | undefined;
+/** Joins hint and error text for platforms that announce one accessibility hint string. */
+export declare function joinHints(...parts: (string | null | undefined)[]): string | undefined;

package/dist/types/shared/package-runtime/aria-ids.d.ts

@@ -0,0 +1,4 @@
+/** Joins space-separated id lists, keeping each id once; empty input gives undefined so the attribute is omitted. */
+export declare function mergeIds(...lists: (string | null | undefined)[]): string | undefined;
+/** Joins hint and error text for platforms that announce one accessibility hint string. */
+export declare function joinHints(...parts: (string | null | undefined)[]): string | undefined;

package/dist/types/shared/package-runtime/layer-state.d.cts

@@ -6,6 +6,8 @@ export interface FocusTarget {
     }) => void;
     isConnected?: boolean;
 }
+/** A caller-chosen return target wins while it is still in the document; false means the caller moves focus itself. */
+export declare function chooseReturnTarget(chosen: FocusTarget | null | false | undefined, fallback: FocusTarget | null | undefined): FocusTarget | null | undefined;
 export interface LayerEntry {
     id: string;
     kind: LayerKind;
@@ -24,6 +26,7 @@ export declare function createLayerState(): {
     entries: Map<string, LayerEntry>;
     topWindow: () => LayerEntry | undefined;
     top: () => LayerEntry | undefined;
+    topPopup: () => LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;

package/dist/types/shared/package-runtime/layer-state.d.ts

@@ -6,6 +6,8 @@ export interface FocusTarget {
     }) => void;
     isConnected?: boolean;
 }
+/** A caller-chosen return target wins while it is still in the document; false means the caller moves focus itself. */
+export declare function chooseReturnTarget(chosen: FocusTarget | null | false | undefined, fallback: FocusTarget | null | undefined): FocusTarget | null | undefined;
 export interface LayerEntry {
     id: string;
     kind: LayerKind;
@@ -24,6 +26,7 @@ export declare function createLayerState(): {
     entries: Map<string, LayerEntry>;
     topWindow: () => LayerEntry | undefined;
     top: () => LayerEntry | undefined;
+    topPopup: () => LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;

package/dist/types/shared/package-runtime/options.d.cts

@@ -8,7 +8,9 @@ export declare const optionDisabled: (option: SelectOption) => boolean;
 export declare function optionKey(option: SelectOption, key: string, index: number): string;
 export declare function optionSelected(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string): boolean;
 export declare function nextOptionValue(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string, multiple: boolean): OptionValue | OptionValue[];
-export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, }: {
+/** 0 label starts with the query, 1 label contains it, 2 a searchKeys field contains it, -1 no match; an empty query matches as 0. */
+export declare function optionMatchRank(option: SelectOption, query: string, labelKey: string, searchKeys?: readonly string[]): 0 | 1 | -1 | 2;
+export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, filterFn, searchKeys, }: {
     options: T[];
     value: OptionValue | OptionValue[] | null;
     labelKey: string;
@@ -18,6 +20,8 @@ export declare function selectOptions<T extends SelectOption>({ options, value,
     limit: number;
     loading: boolean;
     multiple: boolean;
+    filterFn?: (option: T, query: string) => boolean;
+    searchKeys?: readonly string[];
 }): {
     selected: (option: T) => boolean;
     matching: {

package/dist/types/shared/package-runtime/options.d.ts

@@ -8,7 +8,9 @@ export declare const optionDisabled: (option: SelectOption) => boolean;
 export declare function optionKey(option: SelectOption, key: string, index: number): string;
 export declare function optionSelected(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string): boolean;
 export declare function nextOptionValue(value: OptionValue | OptionValue[] | null, option: SelectOption, key: string, multiple: boolean): OptionValue | OptionValue[];
-export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, }: {
+/** 0 label starts with the query, 1 label contains it, 2 a searchKeys field contains it, -1 no match; an empty query matches as 0. */
+export declare function optionMatchRank(option: SelectOption, query: string, labelKey: string, searchKeys?: readonly string[]): 0 | 1 | -1 | 2;
+export declare function selectOptions<T extends SelectOption>({ options, value, labelKey, valueKey, query, pageSize, limit, loading, multiple, filterFn, searchKeys, }: {
     options: T[];
     value: OptionValue | OptionValue[] | null;
     labelKey: string;
@@ -18,6 +20,8 @@ export declare function selectOptions<T extends SelectOption>({ options, value,
     limit: number;
     loading: boolean;
     multiple: boolean;
+    filterFn?: (option: T, query: string) => boolean;
+    searchKeys?: readonly string[];
 }): {
     selected: (option: T) => boolean;
     matching: {

package/dist/types/shared/package-runtime/table-presentation.d.cts

@@ -11,6 +11,10 @@ export declare function tablePresentation<Row extends object>(props: TableProps<
     sections: TableCardSection[];
     columnsForSection(row: Row, section: TableCardSection): TableColumn<Row>[];
 };
+export declare function columnFormat<Format>(column: {
+    key: string;
+    format?: Format;
+}): Format | undefined;
 export declare function tableCellValue<Row extends object>(props: TableProps<Row, unknown>, column: TableColumn<Row>, row: Row, index: number): {
     value: unknown;
     body: ReactNode;

package/dist/types/shared/package-runtime/table-presentation.d.ts

@@ -11,6 +11,10 @@ export declare function tablePresentation<Row extends object>(props: TableProps<
     sections: TableCardSection[];
     columnsForSection(row: Row, section: TableCardSection): TableColumn<Row>[];
 };
+export declare function columnFormat<Format>(column: {
+    key: string;
+    format?: Format;
+}): Format | undefined;
 export declare function tableCellValue<Row extends object>(props: TableProps<Row, unknown>, column: TableColumn<Row>, row: Row, index: number): {
     value: unknown;
     body: ReactNode;

package/dist/types/shared/package-runtime/use-layer.d.cts

@@ -9,6 +9,7 @@ export declare function useLayerState(): {
     entries: Map<string, import("./layer-state.cjs").LayerEntry>;
     topWindow: () => import("./layer-state.cjs").LayerEntry | undefined;
     top: () => import("./layer-state.cjs").LayerEntry | undefined;
+    topPopup: () => import("./layer-state.cjs").LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;
@@ -36,12 +37,13 @@ export declare function useActiveLayerScope(): boolean;
 export declare function focusTrigger(target: FocusTarget | null | undefined): FocusTarget | HTMLElement | null | undefined;
 export declare function useLayer(open: boolean, present: boolean, kind: LayerKind, close: () => void, trigger?: {
     current: FocusTarget | null;
-}): {
+}, returnFocus?: () => FocusTarget | null | false | undefined): {
     id: string;
     state: {
         entries: Map<string, import("./layer-state.cjs").LayerEntry>;
         topWindow: () => import("./layer-state.cjs").LayerEntry | undefined;
         top: () => import("./layer-state.cjs").LayerEntry | undefined;
+        topPopup: () => import("./layer-state.cjs").LayerEntry | undefined;
         windowOf: (id?: string) => string | undefined;
         isRestoredFocus(target?: FocusTarget | null): boolean;
         clearRestoredFocus(target?: FocusTarget | null): void;

package/dist/types/shared/package-runtime/use-layer.d.ts

@@ -9,6 +9,7 @@ export declare function useLayerState(): {
     entries: Map<string, import("./layer-state.js").LayerEntry>;
     topWindow: () => import("./layer-state.js").LayerEntry | undefined;
     top: () => import("./layer-state.js").LayerEntry | undefined;
+    topPopup: () => import("./layer-state.js").LayerEntry | undefined;
     windowOf: (id?: string) => string | undefined;
     isRestoredFocus(target?: FocusTarget | null): boolean;
     clearRestoredFocus(target?: FocusTarget | null): void;
@@ -36,12 +37,13 @@ export declare function useActiveLayerScope(): boolean;
 export declare function focusTrigger(target: FocusTarget | null | undefined): FocusTarget | HTMLElement | null | undefined;
 export declare function useLayer(open: boolean, present: boolean, kind: LayerKind, close: () => void, trigger?: {
     current: FocusTarget | null;
-}): {
+}, returnFocus?: () => FocusTarget | null | false | undefined): {
     id: string;
     state: {
         entries: Map<string, import("./layer-state.js").LayerEntry>;
         topWindow: () => import("./layer-state.js").LayerEntry | undefined;
         top: () => import("./layer-state.js").LayerEntry | undefined;
+        topPopup: () => import("./layer-state.js").LayerEntry | undefined;
         windowOf: (id?: string) => string | undefined;
         isRestoredFocus(target?: FocusTarget | null): boolean;
         clearRestoredFocus(target?: FocusTarget | null): void;

package/package.json

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