@kjun-ui/native 0.16.0 → 0.17.0

package/dist/styles.css

@@ -273,6 +273,9 @@
   --_kjun-extension-list-description-gap: 4px;
   --_kjun-extension-list-actions-gap: 8px;
   --_kjun-extension-list-actions-padding: 16px;
+  --_kjun-extension-list-leading-width: 40px;
+  --_kjun-extension-list-bare-heading-padding-bottom: 4px;
+  --_kjun-extension-list-icon-size: 20px;
   --_kjun-extension-navigation-minimum-height: 56px;
   --_kjun-extension-navigation-padding: 16px;
   --_kjun-extension-navigation-gap: 12px;
@@ -327,12 +330,16 @@
   --_kjun-extension-bottom-navigation-badge-offset: 4px;
   --_kjun-extension-bottom-navigation-badge-overlap: 8px;
   --_kjun-extension-bottom-navigation-badge-radius: 9999px;
+  --_kjun-extension-avatar-xs: 24px;
   --_kjun-extension-avatar-sm: 32px;
   --_kjun-extension-avatar-md: 40px;
   --_kjun-extension-avatar-lg: 56px;
+  --_kjun-extension-avatar-xl: 72px;
+  --_kjun-extension-avatar-fallback-icon-sizes-xs: 12px;
   --_kjun-extension-avatar-fallback-icon-sizes-sm: 14px;
   --_kjun-extension-avatar-fallback-icon-sizes-md: 18px;
   --_kjun-extension-avatar-fallback-icon-sizes-lg: 24px;
+  --_kjun-extension-avatar-fallback-icon-sizes-xl: 32px;
   --_kjun-extension-avatar-fallback-icon-size: 18px;
   --_kjun-extension-chip-sm: 28px;
   --_kjun-extension-chip-md: 32px;
@@ -444,23 +451,25 @@
   --_kjun-extension-toast-action-gap: 8px;
   --_kjun-extension-toast-radius: 12px;
   --_kjun-extension-toast-close-radius: 6px;
-  --_kjun-extension-alert-radius: 12px;
-  --_kjun-extension-alert-description-gap: 4px;
+  --_kjun-extension-alert-radius: 16px;
+  --_kjun-extension-alert-description-gap: 2px;
   --_kjun-extension-alert-close-size: 28px;
   --_kjun-extension-alert-close-radius: 8px;
   --_kjun-extension-alert-actions-gap: 8px;
-  --_kjun-extension-alert-sm-padding-x: 12px;
-  --_kjun-extension-alert-sm-padding-y: 8px;
-  --_kjun-extension-alert-sm-gap: 8px;
+  --_kjun-extension-alert-warning-icon-lift: 0.5px;
+  --_kjun-extension-alert-sm-radius: 12px;
+  --_kjun-extension-alert-sm-padding-x: 14px;
+  --_kjun-extension-alert-sm-padding-y: 12px;
+  --_kjun-extension-alert-sm-gap: 10px;
   --_kjun-extension-alert-sm-close-size: 24px;
-  --_kjun-extension-alert-sm-action-gap: 8px;
-  --_kjun-extension-alert-md-padding-x: 14px;
-  --_kjun-extension-alert-md-padding-y: 10px;
-  --_kjun-extension-alert-md-gap: 10px;
+  --_kjun-extension-alert-sm-action-gap: 10px;
+  --_kjun-extension-alert-md-padding-x: 16px;
+  --_kjun-extension-alert-md-padding-y: 16px;
+  --_kjun-extension-alert-md-gap: 12px;
   --_kjun-extension-alert-md-action-gap: 12px;
-  --_kjun-extension-alert-icon-sizes-sm: 14px;
-  --_kjun-extension-alert-icon-sizes-md: 16px;
-  --_kjun-extension-alert-close-icon-size: 14px;
+  --_kjun-extension-alert-icon-sizes-sm: 16px;
+  --_kjun-extension-alert-icon-sizes-md: 18px;
+  --_kjun-extension-alert-close-icon-size: 16px;
   --_kjun-extension-table-card-padding: 12px;
   --_kjun-extension-table-card-radius: 12px;
   --_kjun-extension-table-card-gap: 8px;
@@ -706,6 +715,11 @@
   --_kjun-state-opacity-deviation-low: 0.08;
   --_kjun-state-opacity-deviation-medium: 0.14;
   --_kjun-state-opacity-deviation-strong: 0.22;
+  --_kjun-state-opacity-tint-fill: 0.06;
+  --_kjun-state-opacity-tint-control: 0.08;
+  --_kjun-state-opacity-tint-hover: 0.12;
+  --_kjun-state-opacity-tint-active: 0.16;
+  --_kjun-state-opacity-muted: 0.55;
   --_kjun-state-focus-width: 2px;
   --_kjun-state-focus-offset: 2px;
   --_kjun-state-focus-choice-offset: 3px;
@@ -2124,18 +2138,26 @@
   display: flex;
   align-items: flex-start;
   gap: var(--_kjun-extension-alert-md-gap);
-  border: var(--_kjun-border-default-width) solid;
   border-radius: var(--_kjun-extension-alert-radius);
+  word-break: keep-all;
   padding: var(--_kjun-extension-alert-md-padding-y) var(--_kjun-extension-alert-md-padding-x);
   --_kjun-alert-line: var(--_kjun-type-control-line);
   --_kjun-alert-close: var(--_kjun-extension-alert-close-size);
   --_kjun-alert-action-gap: var(--_kjun-extension-alert-md-action-gap);
-}
+  /* Text-role tints stay readable on any fill and page background, light or dark. */
+  --_kjun-alert-tint-fill: color-mix(in srgb, var(--_kjun-color-text) calc(var(--_kjun-state-opacity-tint-fill) * 100%), transparent);
+  --_kjun-alert-tint-control: color-mix(in srgb, var(--_kjun-color-text) calc(var(--_kjun-state-opacity-tint-control) * 100%), transparent);
+  --_kjun-alert-tint-hover: color-mix(in srgb, var(--_kjun-color-text) calc(var(--_kjun-state-opacity-tint-hover) * 100%), transparent);
+  --_kjun-alert-tint-active: color-mix(in srgb, var(--_kjun-color-text) calc(var(--_kjun-state-opacity-tint-active) * 100%), transparent);
+}
+/* Info has no fill role: a translucent tint keeps its edge on white and gray pages alike. */
+.kjun-alert[data-tone="info"] { background: var(--_kjun-alert-tint-fill); }
 .kjun-alert[data-size="sm"] {
   --_kjun-alert-line: var(--_kjun-type-control-small-line);
   --_kjun-alert-close: var(--_kjun-extension-alert-sm-close-size);
   --_kjun-alert-action-gap: var(--_kjun-extension-alert-sm-action-gap);
   gap: var(--_kjun-extension-alert-sm-gap);
+  border-radius: var(--_kjun-extension-alert-sm-radius);
   padding: var(--_kjun-extension-alert-sm-padding-y) var(--_kjun-extension-alert-sm-padding-x);
 }
 .kjun-alert-icon {
@@ -2144,6 +2166,8 @@
   flex-shrink: 0;
   height: var(--_kjun-alert-line);
 }
+/* A triangle's optical center sits below its box center. */
+.kjun-alert[data-tone="warning"] .kjun-alert-icon svg { transform: translateY(calc(-1 * var(--_kjun-extension-alert-warning-icon-lift))); }
 .kjun-alert-content {
   min-height: var(--_kjun-alert-line);
   overflow-wrap: anywhere;
@@ -2152,15 +2176,16 @@
 }
 .kjun-alert-title {
   margin: 0;
-  font-size: var(--_kjun-type-control-size);
   color: var(--_kjun-color-text);
+  font-size: var(--_kjun-type-control-size);
   line-height: var(--_kjun-type-control-line);
   font-weight: var(--_kjun-type-control-weight);
   letter-spacing: var(--_kjun-type-control-tracking);
 }
+/* Body copy stays on the text role: secondary gray turns muddy on tinted fills. */
 .kjun-alert-description {
   font-size: var(--_kjun-type-body-size);
-  color: var(--_kjun-color-text-secondary);
+  color: var(--_kjun-color-text);
   line-height: var(--_kjun-type-body-line);
   font-weight: var(--_kjun-type-body-weight);
   letter-spacing: var(--_kjun-type-body-tracking);
@@ -2192,7 +2217,7 @@
   background: transparent;
   border: 0;
   padding: 0;
-  color: var(--_kjun-color-text-tertiary);
+  color: color-mix(in srgb, var(--_kjun-color-text) calc(var(--_kjun-state-opacity-muted) * 100%), transparent);
   cursor: pointer;
 }
 .kjun-alert-actions {
@@ -2202,15 +2227,15 @@
   gap: var(--_kjun-extension-alert-actions-gap);
   margin-top: var(--_kjun-alert-action-gap);
 }
-/* Secondary actions sit on the surface role so they stay clean on tinted alerts. */
-.kjun-alert-actions .kjun-button[data-variant="secondary"] { background: var(--_kjun-color-surface); }
-.kjun-alert-actions .kjun-button[data-variant="secondary"]:hover:not(:disabled) { background: var(--_kjun-color-hover); }
-.kjun-alert-actions .kjun-button[data-variant="secondary"]:active:not(:disabled) { background: var(--_kjun-color-active); }
+/* Secondary actions and the close button tint the alert's own fill instead of sitting on it as gray or white. */
+.kjun-alert-actions .kjun-button[data-variant="secondary"] { background: var(--_kjun-alert-tint-control); }
+.kjun-alert-actions .kjun-button[data-variant="secondary"]:hover:not(:disabled) { background: var(--_kjun-alert-tint-hover); }
+.kjun-alert-actions .kjun-button[data-variant="secondary"]:active:not(:disabled) { background: var(--_kjun-alert-tint-active); }
 @media (hover: none), (pointer: coarse) {
-  .kjun-alert-actions .kjun-button[data-variant="secondary"]:hover:not(:disabled):not(:active) { background: var(--_kjun-color-surface); }
+  .kjun-alert-actions .kjun-button[data-variant="secondary"]:hover:not(:disabled):not(:active) { background: var(--_kjun-alert-tint-control); }
 }
-.kjun-alert-close:hover { background: var(--_kjun-color-hover); color: var(--_kjun-color-text); }
-.kjun-alert-close:active { background: var(--_kjun-color-active); color: var(--_kjun-color-text); }
+.kjun-alert-close:hover { background: var(--_kjun-alert-tint-hover); color: var(--_kjun-color-text); }
+.kjun-alert-close:active { background: var(--_kjun-alert-tint-active); color: var(--_kjun-color-text); }
 .kjun-alert-close:focus-visible {
   outline: var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring);
   outline-offset: var(--_kjun-state-focus-offset);
@@ -2235,6 +2260,20 @@
   border-radius: inherit;
   transition: width var(--_kjun-motion-progress) var(--_kjun-ease-out);
 }
+.kjun-progress[data-state="indeterminate"] .kjun-progress-track > div {
+  animation: kjun-progress-indeterminate var(--_kjun-motion-spin) linear infinite;
+  transition: none;
+}
+@keyframes kjun-progress-indeterminate {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(334%); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .kjun-progress[data-state="indeterminate"] .kjun-progress-track > div {
+    animation: none;
+    transform: translateX(116%);
+  }
+}
 .kjun-progress-sub {
   font-size: var(--_kjun-type-caption-size);
   margin-top: var(--_kjun-geometry-dimension-value4);
@@ -4820,7 +4859,11 @@
 
 .kjun-list-section,.kjun-top-navigation,.kjun-bottom-navigation,.kjun-bottom-action-bar{min-width:0;max-width:100%;color:var(--_kjun-color-text);background:var(--_kjun-color-surface)}
 .kjun-list-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--_kjun-extension-list-gap);padding:var(--_kjun-extension-list-padding)}.kjun-list-heading h3{font-size:var(--_kjun-type-card-title-size);margin:0;line-height:var(--_kjun-type-card-title-line);font-weight:var(--_kjun-type-card-title-weight);letter-spacing:var(--_kjun-type-card-title-tracking)}.kjun-list-heading p{margin:var(--_kjun-geometry-dimension-value4) 0 0;font-size:var(--_kjun-type-caption-size);color:var(--_kjun-color-text-secondary);overflow-wrap:anywhere;line-height:var(--_kjun-type-caption-line);font-weight:var(--_kjun-type-caption-weight);letter-spacing:var(--_kjun-type-caption-tracking)}
-.kjun-list{list-style:none;padding:0;margin:0}.kjun-list-row{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);border-bottom:var(--_kjun-border-default-width) solid var(--_kjun-color-divider);min-width:0}.kjun-list-row:last-child{border-bottom:0}.kjun-list[data-divider=false]>.kjun-list-row{border-bottom:0}.kjun-list[data-density=compact] .kjun-list-main{min-height:var(--_kjun-extension-list-compact-minimum-height);padding-block:var(--_kjun-extension-list-compact-padding-y)}.kjun-list-main{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);flex:1;min-width:0;min-height:var(--_kjun-extension-list-minimum-height);padding:var(--_kjun-extension-list-padding);text-align:start;color:inherit;text-decoration:none;background:transparent;border:0;font:inherit}.kjun-list-main:is(button,a):hover{background:var(--_kjun-color-hover)}.kjun-list-body{flex:1;min-width:0}.kjun-list-content{display:block;margin-top:var(--_kjun-extension-list-description-gap)}.kjun-list-title,.kjun-list-description{display:block;overflow-wrap:anywhere;line-height:1.5}.kjun-list-title{font-size:var(--_kjun-type-label-size);line-height:var(--_kjun-type-label-line);font-weight:var(--_kjun-type-label-weight);letter-spacing:var(--_kjun-type-label-tracking)}.kjun-list-description{font-size:var(--_kjun-type-caption-size);color:var(--_kjun-color-text-secondary);line-height:var(--_kjun-type-caption-line);font-weight:var(--_kjun-type-caption-weight);letter-spacing:var(--_kjun-type-caption-tracking)}.kjun-list-leading{flex-shrink:0}.kjun-list-trailing{overflow-wrap:anywhere;max-width:35%}.kjun-list-actions{display:flex;flex-wrap:wrap;gap:var(--_kjun-extension-list-actions-gap);padding-inline-end:var(--_kjun-extension-list-actions-padding);max-width:45%}
+.kjun-list{list-style:none;padding:0;margin:0}.kjun-list-row{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);position:relative;min-width:0}/* Dividers start where the text does: the row inset, or past the fixed leading column. */
+.kjun-list-row:not(:last-child)::after,.kjun-list-item:not(:last-child)::after{content:"";position:absolute;inset-inline:var(--_kjun-list-divider-inset,var(--_kjun-extension-list-padding)) 0;bottom:0;height:var(--_kjun-border-default-width);background:var(--_kjun-color-divider);pointer-events:none}
+.kjun-list-row[data-leading]{--_kjun-list-divider-inset:calc(var(--_kjun-extension-list-padding) + var(--_kjun-extension-list-leading-width) + var(--_kjun-extension-list-gap))}.kjun-list[data-divider=false]>:is(.kjun-list-row,.kjun-list-item)::after{content:none}.kjun-list[data-density=compact] .kjun-list-main{min-height:var(--_kjun-extension-list-compact-minimum-height);padding-block:var(--_kjun-extension-list-compact-padding-y)}.kjun-list-main{display:flex;align-items:center;gap:var(--_kjun-extension-list-gap);flex:1;min-width:0;min-height:var(--_kjun-extension-list-minimum-height);padding:var(--_kjun-extension-list-padding);text-align:start;color:inherit;text-decoration:none;background:transparent;border:0;font:inherit}.kjun-list-main:is(button,a):hover{background:var(--_kjun-color-hover)}.kjun-list-body{flex:1;min-width:0}.kjun-list-content{display:block;margin-top:var(--_kjun-extension-list-description-gap)}.kjun-list-title,.kjun-list-description{display:block;overflow-wrap:anywhere;line-height:1.5}.kjun-list-title{font-size:var(--_kjun-type-control-size);line-height:var(--_kjun-type-control-line);font-weight:var(--_kjun-type-control-weight);letter-spacing:var(--_kjun-type-control-tracking)}.kjun-list-description{font-size:var(--_kjun-type-caption-size);color:var(--_kjun-color-text-secondary);line-height:var(--_kjun-type-caption-line);font-weight:var(--_kjun-type-caption-weight);letter-spacing:var(--_kjun-type-caption-tracking)}/* A fixed leading column keeps titles on one line whether a row shows an icon, an avatar or a wider image. */
+.kjun-list-leading{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-width:var(--_kjun-extension-list-leading-width)}
+.kjun-list-icon{color:var(--_kjun-color-text-secondary)}.kjun-list-trailing{overflow-wrap:anywhere;max-width:35%}.kjun-list-actions{display:flex;flex-wrap:wrap;gap:var(--_kjun-extension-list-actions-gap);padding-inline-end:var(--_kjun-extension-list-actions-padding);max-width:45%}
 /* A disabled row disables its actions too, so the row never reads as partly available. */
 .kjun-list-actions[data-disabled]{opacity:var(--_kjun-state-opacity-disabled)}
 .kjun-navigation-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--_kjun-extension-navigation-actions-gap);min-width:0}
@@ -4828,7 +4871,7 @@
 /* Initials scale with the avatar (about 40% of its side) and show Latin initials in capitals. */
 .kjun-avatar .kjun-image-fallback{text-transform:uppercase;font-size:var(--_kjun-type-input-size);line-height:var(--_kjun-type-input-line)}
 .kjun-avatar[data-size=sm] .kjun-image-fallback{font-size:var(--_kjun-type-control-size);line-height:var(--_kjun-type-control-line)}
-.kjun-avatar[data-size=lg] .kjun-image-fallback{font-size:var(--_kjun-type-section-title-size);line-height:var(--_kjun-type-section-title-line)}.kjun-avatar[data-shape=square]{border-radius:var(--_kjun-geometry-radius-radius8)}
+.kjun-avatar[data-size=lg] .kjun-image-fallback{font-size:var(--_kjun-type-section-title-size);line-height:var(--_kjun-type-section-title-line)}.kjun-avatar[data-size=xs] .kjun-image-fallback{font-size:var(--_kjun-type-control-small-size);line-height:var(--_kjun-type-control-small-line)}.kjun-avatar[data-size=xl] .kjun-image-fallback{font-size:var(--_kjun-type-page-title-size);line-height:var(--_kjun-type-page-title-line)}.kjun-avatar[data-shape=square]{border-radius:var(--_kjun-geometry-radius-radius8)}
 /* App colors (color/textColor) arrive as private custom properties; without them the image roles stay. */
 .kjun-avatar .kjun-image{background:var(--_kjun-avatar-color,var(--_kjun-color-secondary))}.kjun-avatar .kjun-image-fallback{color:var(--_kjun-avatar-text-color,var(--_kjun-color-text-secondary))}
 .kjun-chip{--_kjun-chip-remove-icon:var(--_kjun-extension-chip-remove-icon-sizes-md);display:inline-flex;max-width:100%;align-items:center;gap:var(--_kjun-extension-chip-gap);min-height:var(--_kjun-extension-chip-md);padding:var(--_kjun-extension-chip-padding-y) var(--_kjun-extension-chip-padding-x);border-radius:var(--_kjun-extension-chip-radius);background:var(--_kjun-color-secondary);font-size:var(--_kjun-extension-chip-typography-md-font-size-px);line-height:var(--_kjun-extension-chip-typography-md-line-height-px);font-weight:var(--_kjun-extension-chip-typography-md-font-weight);letter-spacing:var(--_kjun-extension-chip-typography-md-letter-spacing-em)}
@@ -5034,6 +5077,9 @@
 .kjun-list-description { margin-top:var(--_kjun-extension-list-description-gap); }
 
 .kjun-list-heading > div { flex:1; min-width:0; overflow-wrap:anywhere; }
+/* A title without a description labels the rows below as a small group header instead of floating above them. */
+.kjun-list-heading[data-bare] { padding-bottom:var(--_kjun-extension-list-bare-heading-padding-bottom); }
+.kjun-list-heading[data-bare] h3 { font-size:var(--_kjun-type-control-small-size); line-height:var(--_kjun-type-control-small-line); font-weight:var(--_kjun-type-control-small-weight); letter-spacing:var(--_kjun-type-control-small-tracking); color:var(--_kjun-color-text-secondary); }
 
 /* KjunFab: a round action pinned to the viewport's bottom end, above page content and clear of the safe area. */
 .kjun-fab{position:fixed;right:var(--_kjun-extension-fab-inset);z-index:var(--_kjun-layer-page-navigation);display:inline-flex;align-items:center;justify-content:center;width:var(--_kjun-extension-fab-size);height:var(--_kjun-extension-fab-size);padding:0;border:0;border-radius:50%;background:var(--_kjun-color-brand);color:var(--_kjun-color-on-brand);box-shadow:var(--_kjun-elevation-floating);cursor:pointer}
@@ -5042,15 +5088,13 @@
 .kjun-fab:disabled{opacity:var(--_kjun-state-opacity-disabled);cursor:not-allowed}
 
 /* 0.14.0: plain sections, destructive rows, decorative chevrons and non-row list items share the row inset. */
-.kjun-list-section[data-surface="false"]{background:transparent}
+.kjun-list-section[data-surface="false"],.kjun-top-navigation[data-surface="false"],.kjun-bottom-navigation[data-surface="false"],.kjun-bottom-action-bar[data-surface="false"]{background:transparent}
 /* A rounded section clips its rows to the corners; row focus rings move inside so the clip does not cut them. */
 .kjun-list-section[data-radius]{overflow:hidden;overflow:clip}
 .kjun-list-section[data-radius] .kjun-list-main:focus-visible{outline-offset:var(--_kjun-state-focus-inset-offset)}
 .kjun-list-row[data-destructive] .kjun-list-title{color:var(--_kjun-color-danger)}
 .kjun-list-chevron{flex-shrink:0;color:var(--_kjun-color-text-tertiary)}
-.kjun-list-item{padding:var(--_kjun-extension-list-padding);border-bottom:var(--_kjun-border-default-width) solid var(--_kjun-color-divider);min-width:0}
-.kjun-list-item:last-child{border-bottom:0}
-.kjun-list[data-divider=false]>.kjun-list-item{border-bottom:0}
+.kjun-list-item{padding:var(--_kjun-extension-list-padding);position:relative;min-width:0}
 .kjun-list[data-density=compact]>.kjun-list-item{padding-block:var(--_kjun-extension-list-compact-padding-y)}
 
 /* Compound fields share input geometry; buttons retain their own size contract. */

package/dist/types/packages/native/src/alert-actions-context.d.cts

@@ -1 +1,4 @@
+import type { ColorValue } from "react-native";
 export declare const AlertActionsContext: import("react").Context<boolean>;
+/** Text-role tint at a state opacity, like the web color-mix; colors it cannot parse use the fallback role. */
+export declare function alertTint(text: ColorValue, amount: 'tintFill' | 'tintControl' | 'tintHover' | 'tintActive' | 'muted', fallback: ColorValue): ColorValue;

package/dist/types/packages/native/src/alert-actions-context.d.ts

@@ -1 +1,4 @@
+import type { ColorValue } from "react-native";
 export declare const AlertActionsContext: import("react").Context<boolean>;
+/** Text-role tint at a state opacity, like the web color-mix; colors it cannot parse use the fallback role. */
+export declare function alertTint(text: ColorValue, amount: 'tintFill' | 'tintControl' | 'tintHover' | 'tintActive' | 'muted', fallback: ColorValue): ColorValue;

package/dist/types/packages/native/src/app-navigation.d.cts

@@ -6,8 +6,10 @@ export interface KjunTopNavigationProps {
     leading?: ReactNode;
     actions?: ReactNode;
     safeAreaTop?: number;
+    /** Paints the surface background (default true); false lets the page background show through, so the bar does not read as a separate band. */
+    surface?: boolean;
 }
-export declare function KjunTopNavigation({ title, description, leading, actions, safeAreaTop }: KjunTopNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTopNavigation({ title, description, leading, actions, safeAreaTop, surface }: KjunTopNavigationProps): import("react/jsx-runtime").JSX.Element;
 export interface NavigationDestination {
     key: string;
     label: string;
@@ -24,13 +26,17 @@ export interface KjunBottomNavigationProps {
     keyboardVisible?: boolean;
     hideOnKeyboard?: boolean;
     onNavigate?: (key: string, event: GestureResponderEvent) => void;
+    /** Paints the surface background (default true); false lets the page background show through, so the bar does not read as a separate band. */
+    surface?: boolean;
 }
-export declare function KjunBottomNavigation({ items, value, ariaLabel, safeAreaBottom, keyboardVisible, hideOnKeyboard, onNavigate }: KjunBottomNavigationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function KjunBottomNavigation({ items, value, ariaLabel, safeAreaBottom, keyboardVisible, hideOnKeyboard, onNavigate, surface }: KjunBottomNavigationProps): import("react/jsx-runtime").JSX.Element | null;
 export interface KjunBottomActionBarProps {
     description?: string;
     children: ReactNode;
     safeAreaBottom?: number;
     keyboardVisible?: boolean;
     hideOnKeyboard?: boolean;
+    /** Paints the surface background (default true); false lets the page background show through, so the bar does not read as a separate band. */
+    surface?: boolean;
 }
-export declare function KjunBottomActionBar({ description, children, safeAreaBottom, keyboardVisible, hideOnKeyboard }: KjunBottomActionBarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function KjunBottomActionBar({ description, children, safeAreaBottom, keyboardVisible, hideOnKeyboard, surface }: KjunBottomActionBarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/packages/native/src/app-navigation.d.ts

@@ -6,8 +6,10 @@ export interface KjunTopNavigationProps {
     leading?: ReactNode;
     actions?: ReactNode;
     safeAreaTop?: number;
+    /** Paints the surface background (default true); false lets the page background show through, so the bar does not read as a separate band. */
+    surface?: boolean;
 }
-export declare function KjunTopNavigation({ title, description, leading, actions, safeAreaTop }: KjunTopNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunTopNavigation({ title, description, leading, actions, safeAreaTop, surface }: KjunTopNavigationProps): import("react/jsx-runtime").JSX.Element;
 export interface NavigationDestination {
     key: string;
     label: string;
@@ -24,13 +26,17 @@ export interface KjunBottomNavigationProps {
     keyboardVisible?: boolean;
     hideOnKeyboard?: boolean;
     onNavigate?: (key: string, event: GestureResponderEvent) => void;
+    /** Paints the surface background (default true); false lets the page background show through, so the bar does not read as a separate band. */
+    surface?: boolean;
 }
-export declare function KjunBottomNavigation({ items, value, ariaLabel, safeAreaBottom, keyboardVisible, hideOnKeyboard, onNavigate }: KjunBottomNavigationProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function KjunBottomNavigation({ items, value, ariaLabel, safeAreaBottom, keyboardVisible, hideOnKeyboard, onNavigate, surface }: KjunBottomNavigationProps): import("react/jsx-runtime").JSX.Element | null;
 export interface KjunBottomActionBarProps {
     description?: string;
     children: ReactNode;
     safeAreaBottom?: number;
     keyboardVisible?: boolean;
     hideOnKeyboard?: boolean;
+    /** Paints the surface background (default true); false lets the page background show through, so the bar does not read as a separate band. */
+    surface?: boolean;
 }
-export declare function KjunBottomActionBar({ description, children, safeAreaBottom, keyboardVisible, hideOnKeyboard }: KjunBottomActionBarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function KjunBottomActionBar({ description, children, safeAreaBottom, keyboardVisible, hideOnKeyboard, surface }: KjunBottomActionBarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/types/packages/native/src/choice-controls.d.cts

@@ -11,6 +11,8 @@ export interface ChoiceOption<T = ChoiceValue> {
 }
 export interface KjunCheckboxProps<T = ChoiceValue> {
     value: boolean | T[];
+    /** Mixed selection display; value and change callbacks keep their boolean/array shape. */
+    indeterminate?: boolean;
     val?: T;
     label?: string;
     ariaLabel?: string;
@@ -20,7 +22,7 @@ export interface KjunCheckboxProps<T = ChoiceValue> {
     onValueChange?: (value: boolean | T[]) => void;
     onChange?: (value: boolean | T[]) => void;
 }
-export declare function KjunCheckbox<T = ChoiceValue>({ value, val, label, ariaLabel, disabled, size, children, onValueChange, onChange, }: KjunCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function KjunCheckbox<T = ChoiceValue>({ value, indeterminate, val, label, ariaLabel, disabled, size, children, onValueChange, onChange, }: KjunCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface KjunSwitchProps {
     value: boolean;
     label?: string;

package/dist/types/packages/native/src/choice-controls.d.ts

@@ -11,6 +11,8 @@ export interface ChoiceOption<T = ChoiceValue> {
 }
 export interface KjunCheckboxProps<T = ChoiceValue> {
     value: boolean | T[];
+    /** Mixed selection display; value and change callbacks keep their boolean/array shape. */
+    indeterminate?: boolean;
     val?: T;
     label?: string;
     ariaLabel?: string;
@@ -20,7 +22,7 @@ export interface KjunCheckboxProps<T = ChoiceValue> {
     onValueChange?: (value: boolean | T[]) => void;
     onChange?: (value: boolean | T[]) => void;
 }
-export declare function KjunCheckbox<T = ChoiceValue>({ value, val, label, ariaLabel, disabled, size, children, onValueChange, onChange, }: KjunCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function KjunCheckbox<T = ChoiceValue>({ value, indeterminate, val, label, ariaLabel, disabled, size, children, onValueChange, onChange, }: KjunCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface KjunSwitchProps {
     value: boolean;
     label?: string;

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

@@ -41,14 +41,4 @@ export interface KjunAlertProps {
     onClose?: () => void;
 }
 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;
-    size?: "sm" | "md" | "lg";
-    variant?: SemanticTone;
-    showLabel?: boolean;
-    label?: ReactNode;
-    subLabel?: ReactNode;
-    shape?: "bar" | "circle";
-}
-export declare function KjunProgress({ value, max, size, variant, showLabel, label, subLabel, shape, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;
+export { KjunProgress, type KjunProgressProps } from "./progress.cjs";

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

@@ -41,14 +41,4 @@ export interface KjunAlertProps {
     onClose?: () => void;
 }
 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;
-    size?: "sm" | "md" | "lg";
-    variant?: SemanticTone;
-    showLabel?: boolean;
-    label?: ReactNode;
-    subLabel?: ReactNode;
-    shape?: "bar" | "circle";
-}
-export declare function KjunProgress({ value, max, size, variant, showLabel, label, subLabel, shape, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;
+export { KjunProgress, type KjunProgressProps } from "./progress.js";

package/dist/types/packages/native/src/kpi-row.d.cts

@@ -1,7 +1,11 @@
 import { type ReactNode } from "react";
 import { type ColorValue } from "react-native";
 import { KpiValue } from "./kpi-hero.cjs";
-export interface KpiRowItem extends KpiValue {
+export interface KpiRowItem extends Omit<KpiValue, "value"> {
+    /** null/undefined and non-finite numbers are missing, never zero. Loading still takes precedence. */
+    value?: number | string | null;
+    /** Shown for a missing value; defaults to an em dash. */
+    missingText?: string;
     loading?: boolean;
     clickable?: boolean;
     mobileFull?: boolean;
@@ -18,7 +22,7 @@ export interface KpiRowItem extends KpiValue {
     badge?: {
         text: string;
         variant?: "warning" | "success" | "danger" | "price-up" | "price-down" | "info" | "neutral";
-    };
+    } | null;
     badgePlacement?: "label" | "value";
 }
 export interface KjunKpiRowProps {

package/dist/types/packages/native/src/kpi-row.d.ts

@@ -1,7 +1,11 @@
 import { type ReactNode } from "react";
 import { type ColorValue } from "react-native";
 import { KpiValue } from "./kpi-hero.js";
-export interface KpiRowItem extends KpiValue {
+export interface KpiRowItem extends Omit<KpiValue, "value"> {
+    /** null/undefined and non-finite numbers are missing, never zero. Loading still takes precedence. */
+    value?: number | string | null;
+    /** Shown for a missing value; defaults to an em dash. */
+    missingText?: string;
     loading?: boolean;
     clickable?: boolean;
     mobileFull?: boolean;
@@ -18,7 +22,7 @@ export interface KpiRowItem extends KpiValue {
     badge?: {
         text: string;
         variant?: "warning" | "success" | "danger" | "price-up" | "price-down" | "info" | "neutral";
-    };
+    } | null;
     badgePlacement?: "label" | "value";
 }
 export interface KjunKpiRowProps {

package/dist/types/packages/native/src/layer-backdrop.d.cts

@@ -1,4 +1,9 @@
 import { type StyleProp, type ViewStyle } from "react-native";
+/**
+ * Where a modal backdrop sits: from the root's top to at least the screen's bottom. Android lays out a
+ * new modal root a navigation bar short for its first frames; an inset of 0 would leave that strip bright.
+ */
+export declare function screenCover(): ViewStyle;
 /** The backdrop accepts pointer dismissal and never participates in focus traversal. */
 export declare function LayerBackdrop({ onPress, style }: {
     onPress: () => void;

package/dist/types/packages/native/src/layer-backdrop.d.ts

@@ -1,4 +1,9 @@
 import { type StyleProp, type ViewStyle } from "react-native";
+/**
+ * Where a modal backdrop sits: from the root's top to at least the screen's bottom. Android lays out a
+ * new modal root a navigation bar short for its first frames; an inset of 0 would leave that strip bright.
+ */
+export declare function screenCover(): ViewStyle;
 /** The backdrop accepts pointer dismissal and never participates in focus traversal. */
 export declare function LayerBackdrop({ onPress, style }: {
     onPress: () => void;

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

@@ -4,6 +4,8 @@ import { type GestureResponderEvent } from "react-native";
 export interface KjunListRowProps {
     title: string;
     description?: string;
+    /** Icon name drawn in the leading column at the list icon size; `leading` replaces it when both are given. */
+    icon?: string;
     leading?: ReactNode;
     trailing?: ReactNode;
     actions?: ReactNode;
@@ -19,7 +21,7 @@ export interface KjunListRowProps {
     /** Display-only content under the description (a budget bar); no buttons or links inside a pressable row. */
     children?: ReactNode;
 }
-export declare function KjunListRow({ title, description, leading, trailing, actions, href, disabled, destructive, chevron, onPress, ariaLabel, children }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListRow({ title, description, icon, leading, trailing, actions, href, disabled, destructive, chevron, onPress, ariaLabel, children }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListSectionProps {
     title?: string;
     description?: string;

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

@@ -4,6 +4,8 @@ import { type GestureResponderEvent } from "react-native";
 export interface KjunListRowProps {
     title: string;
     description?: string;
+    /** Icon name drawn in the leading column at the list icon size; `leading` replaces it when both are given. */
+    icon?: string;
     leading?: ReactNode;
     trailing?: ReactNode;
     actions?: ReactNode;
@@ -19,7 +21,7 @@ export interface KjunListRowProps {
     /** Display-only content under the description (a budget bar); no buttons or links inside a pressable row. */
     children?: ReactNode;
 }
-export declare function KjunListRow({ title, description, leading, trailing, actions, href, disabled, destructive, chevron, onPress, ariaLabel, children }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function KjunListRow({ title, description, icon, leading, trailing, actions, href, disabled, destructive, chevron, onPress, ariaLabel, children }: KjunListRowProps): import("react/jsx-runtime").JSX.Element;
 export interface KjunListSectionProps {
     title?: string;
     description?: string;

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

@@ -18,7 +18,7 @@ export interface KjunAvatarProps {
     name?: string;
     alt?: string;
     decorative?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     shape?: "circle" | "square";
     color?: ColorValue;
     textColor?: ColorValue;

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

@@ -18,7 +18,7 @@ export interface KjunAvatarProps {
     name?: string;
     alt?: string;
     decorative?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     shape?: "circle" | "square";
     color?: ColorValue;
     textColor?: ColorValue;

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import type { SemanticTone } from "./display-primitives.cjs";
+export interface KjunProgressProps {
+    /** null is missing data; omission keeps the zero default. */
+    value?: number | null;
+    /** Work is active but its completion percentage is unknown; takes precedence over null. */
+    indeterminate?: boolean;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: SemanticTone;
+    showLabel?: boolean;
+    label?: ReactNode;
+    subLabel?: ReactNode;
+    shape?: "bar" | "circle";
+}
+export declare function KjunProgress({ value, indeterminate, max, size, variant, showLabel, label, subLabel, shape, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+import type { SemanticTone } from "./display-primitives.js";
+export interface KjunProgressProps {
+    /** null is missing data; omission keeps the zero default. */
+    value?: number | null;
+    /** Work is active but its completion percentage is unknown; takes precedence over null. */
+    indeterminate?: boolean;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    variant?: SemanticTone;
+    showLabel?: boolean;
+    label?: ReactNode;
+    subLabel?: ReactNode;
+    shape?: "bar" | "circle";
+}
+export declare function KjunProgress({ value, indeterminate, max, size, variant, showLabel, label, subLabel, shape, }: KjunProgressProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,6 +6,10 @@ export interface KjunSliderProps {
     disabled?: boolean;
     label?: string;
     ariaLabel?: string;
+    /** Hides the visible value only; each thumb still reports its value to assistive technology. */
+    showValue?: boolean;
+    /** Formats the visible value and each thumb's accessible value text. Values stay numeric. */
+    formatValue?: (value: number) => string;
     onValueChange?: (value: number) => void;
     onChangeCommit?: (value: number) => void;
 }

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

@@ -6,6 +6,10 @@ export interface KjunSliderProps {
     disabled?: boolean;
     label?: string;
     ariaLabel?: string;
+    /** Hides the visible value only; each thumb still reports its value to assistive technology. */
+    showValue?: boolean;
+    /** Formats the visible value and each thumb's accessible value text. Values stay numeric. */
+    formatValue?: (value: number) => string;
     onValueChange?: (value: number) => void;
     onChangeCommit?: (value: number) => void;
 }

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

@@ -0,0 +1,11 @@
+/**
+ * Color roles a soft-fill Alert paints per tone. Info has no fill role: it uses a translucent text tint so it
+ * stays visible on any page background; the semantic tones carry the color, titles stay on the text role.
+ */
+export declare function alertToneRoles(tone: string): {
+    bg: string | null;
+    icon: string;
+};
+export declare const alertIcons: Record<string, string>;
+/** Native has no color-mix: tints a hex or rgb() color with alpha, or returns undefined for other formats. */
+export declare function tintColor(color: string, alpha: number): string | undefined;

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

@@ -0,0 +1,11 @@
+/**
+ * Color roles a soft-fill Alert paints per tone. Info has no fill role: it uses a translucent text tint so it
+ * stays visible on any page background; the semantic tones carry the color, titles stay on the text role.
+ */
+export declare function alertToneRoles(tone: string): {
+    bg: string | null;
+    icon: string;
+};
+export declare const alertIcons: Record<string, string>;
+/** Native has no color-mix: tints a hex or rgb() color with alpha, or returns undefined for other formats. */
+export declare function tintColor(color: string, alpha: number): string | undefined;

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

@@ -18,15 +18,21 @@ export interface DrawerFrame {
     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.
+ * Keyboard events a drawer listens to. Android reports only after the keyboard moved; edge-to-edge
+ * windows no longer resize for it (adjustResize), so the drawer lifts itself there too.
  */
 export declare function keyboardEvents(os: string): {
     readonly show: "keyboardWillShow";
     readonly hide: "keyboardWillHide";
+} | {
+    readonly show: "keyboardDidShow";
+    readonly hide: "keyboardDidHide";
 } | 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;
+/**
+ * The part of the modal root the keyboard covers. Measured against the root, a window the platform
+ * already resized ends at or above the keyboard and gives 0, so the drawer never lifts twice.
+ */
+export declare function keyboardOverlap(rootHeight: 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 }: {