@kjun-ui/native 0.9.0 → 0.11.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;
@@ -416,6 +417,7 @@
   --_kjun-extension-drawer-bottom-radius: 16px;
   --_kjun-extension-drawer-radius: 0px;
   --_kjun-extension-drawer-close-radius: 8px;
+  --_kjun-extension-drawer-sheet-gap: 48px;
   --_kjun-extension-drawer-width: 400px;
   --_kjun-extension-drawer-close-size: 32px;
   --_kjun-extension-drawer-close-icon-size: 16px;
@@ -946,28 +948,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 +979,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 +1774,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 +2431,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 {
@@ -2548,6 +2560,19 @@
   flex-direction: column;
   outline: none;
 }
+/* Safe areas arrive as --_kjun-drawer-safe-top/bottom on the overlay; the panel surface extends under them. */
+.kjun-drawer-overlay:not([data-position="bottom"]) .kjun-drawer-dialog { padding-top: var(--_kjun-drawer-safe-top); }
+.kjun-drawer-overlay:not([data-position="top"]) .kjun-drawer-dialog { padding-bottom: var(--_kjun-drawer-safe-bottom); }
+/* Top and bottom sheets stop short of the opposite edge (its safe area plus the sheet gap); only the body scrolls. */
+.kjun-drawer-overlay[data-position="bottom"] {
+  --_kjun-drawer-sheet-max: calc(100dvh - var(--_kjun-drawer-safe-top) - var(--_kjun-extension-drawer-sheet-gap));
+}
+.kjun-drawer-overlay[data-position="top"] {
+  --_kjun-drawer-sheet-max: calc(100dvh - var(--_kjun-drawer-safe-bottom) - var(--_kjun-extension-drawer-sheet-gap));
+}
+.kjun-drawer-overlay:is([data-position="top"], [data-position="bottom"]) :is(.kjun-drawer, .kjun-drawer-dialog) {
+  max-height: var(--_kjun-drawer-max-height, var(--_kjun-drawer-sheet-max));
+}
 .kjun-drawer-header {
   display: flex;
   align-items: center;
@@ -4382,6 +4407,8 @@
     .kjun-kpi-row__value {
     white-space: normal;
     overflow-wrap: anywhere;
+    /* Korean labels and values wrap at spaces, not between syllables; anywhere stays the last resort. */
+    word-break: keep-all;
   }
   .kjun-kpi-row--mobile-summary
     .kjun-kpi-row__item--secondary

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/drawer.d.cts

@@ -14,5 +14,13 @@ export interface KjunDrawerProps {
     children: ReactNode;
     onClose?: () => void;
     ariaLabel?: string;
+    /** Top safe area, padded inside top and side drawers and kept clear above a bottom sheet. */
+    safeAreaTop?: number;
+    /** Bottom safe area, padded inside bottom and side drawers and kept clear below a top sheet. */
+    safeAreaBottom?: number;
+    /** Height limit for top and bottom drawers; by default they stop a sheet gap short of the opposite edge. */
+    maxHeight?: number;
+    /** Keeps the panel above the on-screen keyboard (devices only). */
+    avoidKeyboard?: boolean;
 }
-export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,5 +14,13 @@ export interface KjunDrawerProps {
     children: ReactNode;
     onClose?: () => void;
     ariaLabel?: string;
+    /** Top safe area, padded inside top and side drawers and kept clear above a bottom sheet. */
+    safeAreaTop?: number;
+    /** Bottom safe area, padded inside bottom and side drawers and kept clear below a top sheet. */
+    safeAreaBottom?: number;
+    /** Height limit for top and bottom drawers; by default they stop a sheet gap short of the opposite edge. */
+    maxHeight?: number;
+    /** Keeps the panel above the on-screen keyboard (devices only). */
+    avoidKeyboard?: boolean;
 }
-export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunDrawer({ open, onOpenChange, title, position, width, closable, closeOnOverlay, closeOnEsc, noPadding, header, footer, children, onClose, ariaLabel, safeAreaTop, safeAreaBottom, maxHeight, avoidKeyboard, }: KjunDrawerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,10 @@
 import { type KjunFeedback } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export declare function useKjunFeedback(): KjunFeedback;
-export declare function KjunFeedbackProvider({ children }: {
+export interface KjunFeedbackProviderProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function KjunFeedbackProvider({ children, style }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
 export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";

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

@@ -1,7 +1,10 @@
 import { type KjunFeedback } from "@kjun-ui/tokens";
 import { type ReactNode } from "react";
+import { type StyleProp, type ViewStyle } from "react-native";
 export declare function useKjunFeedback(): KjunFeedback;
-export declare function KjunFeedbackProvider({ children }: {
+export interface KjunFeedbackProviderProps {
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+    style?: StyleProp<ViewStyle>;
+}
+export declare function KjunFeedbackProvider({ children, style }: KjunFeedbackProviderProps): import("react/jsx-runtime").JSX.Element;
 export type { ConfirmOptions, KjunFeedback, PromptOptions, ToastOptions } from "@kjun-ui/tokens";

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/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/drawer-geometry.d.cts

@@ -0,0 +1,36 @@
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export interface DrawerFrameInput {
+    position: DrawerPosition;
+    windowHeight: number;
+    safeAreaTop: number;
+    safeAreaBottom: number;
+    /** Space a top or bottom sheet leaves at the opposite edge. */
+    gap: number;
+    /** Height of the window the keyboard covers (0 when hidden). */
+    keyboard: number;
+    maxHeight?: number;
+}
+export interface DrawerFrame {
+    maxHeight: number;
+    height: number | undefined;
+    paddingTop: number;
+    paddingBottom: number;
+    lift: number;
+}
+/**
+ * Keyboard events a drawer listens to. Only iOS: React Native's Android Modal window is adjustResize,
+ * so the system already shrinks the modal and a measured root height covers it.
+ */
+export declare function keyboardEvents(os: string): {
+    readonly show: "keyboardWillShow";
+    readonly hide: "keyboardWillHide";
+} | null;
+/** The part of the window the keyboard covers; 0 when the platform already resized the window. */
+export declare function keyboardOverlap(windowHeight: number, keyboardScreenY: number): number;
+export declare function drawerFrame({ position, windowHeight, safeAreaTop, safeAreaBottom, gap, keyboard, maxHeight }: DrawerFrameInput): DrawerFrame;
+/** Web overlay variables read by the drawer CSS (tokens controls.css). */
+export declare function drawerOverlayVars({ safeAreaTop, safeAreaBottom, maxHeight }: {
+    safeAreaTop?: number;
+    safeAreaBottom?: number;
+    maxHeight?: number;
+}): Record<string, string>;

package/dist/types/shared/package-runtime/drawer-geometry.d.ts

@@ -0,0 +1,36 @@
+export type DrawerPosition = "left" | "right" | "top" | "bottom";
+export interface DrawerFrameInput {
+    position: DrawerPosition;
+    windowHeight: number;
+    safeAreaTop: number;
+    safeAreaBottom: number;
+    /** Space a top or bottom sheet leaves at the opposite edge. */
+    gap: number;
+    /** Height of the window the keyboard covers (0 when hidden). */
+    keyboard: number;
+    maxHeight?: number;
+}
+export interface DrawerFrame {
+    maxHeight: number;
+    height: number | undefined;
+    paddingTop: number;
+    paddingBottom: number;
+    lift: number;
+}
+/**
+ * Keyboard events a drawer listens to. Only iOS: React Native's Android Modal window is adjustResize,
+ * so the system already shrinks the modal and a measured root height covers it.
+ */
+export declare function keyboardEvents(os: string): {
+    readonly show: "keyboardWillShow";
+    readonly hide: "keyboardWillHide";
+} | null;
+/** The part of the window the keyboard covers; 0 when the platform already resized the window. */
+export declare function keyboardOverlap(windowHeight: number, keyboardScreenY: number): number;
+export declare function drawerFrame({ position, windowHeight, safeAreaTop, safeAreaBottom, gap, keyboard, maxHeight }: DrawerFrameInput): DrawerFrame;
+/** Web overlay variables read by the drawer CSS (tokens controls.css). */
+export declare function drawerOverlayVars({ safeAreaTop, safeAreaBottom, maxHeight }: {
+    safeAreaTop?: number;
+    safeAreaBottom?: number;
+    maxHeight?: number;
+}): Record<string, string>;

package/package.json

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