@kjun-ui/native 0.3.1 → 0.4.0

package/dist/styles.css

@@ -698,7 +698,6 @@
   --_kjun-motion-distance-modal-exit: 8px;
   --_kjun-motion-distance-popup: 4px;
   --_kjun-motion-distance-toast: 8px;
-  font-family: var(--kjun-font); color: var(--kjun-text);
 }
 
 .kjun-scope {
@@ -946,50 +945,103 @@
   --_kjun-card-border: var(--_kjun-color-glass-border);
 }
 
-/* Scoped baseline required by the component utilities. No app-wide reset. */
-.kjun-scope,
-.kjun-scope *,
-.kjun-scope::before,
-.kjun-scope::after,
-.kjun-scope *::before,
-.kjun-scope *::after {
+/* Baseline for kjun-owned markup only. 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. */
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::before,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::after,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::before,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::after {
   box-sizing: border-box;
   border-width: 0;
   border-style: solid;
   border-color: var(--_kjun-color-border);
 }
-.kjun-scope :where(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, pre) {
+.kjun-scope :where([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([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(h1, h2, h3, h4, h5, h6) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(h1, h2, h3, h4, h5, h6),
+.kjun-scope :where([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(button, input, optgroup, select, textarea) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, input, optgroup, select, textarea),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, input, optgroup, select, textarea) {
   font: inherit;
   letter-spacing: inherit;
   color: inherit;
   margin: 0;
   padding: 0;
 }
-.kjun-scope :where(button, select) { text-transform: none; }
-.kjun-scope :where(button, [type="button"], [type="reset"], [type="submit"]) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, select),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, select) { text-transform: none; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [type="button"], [type="reset"], [type="submit"]),
+.kjun-scope :where([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(button, [role="button"]) { cursor: pointer; }
-.kjun-scope :where(:disabled) { cursor: default; }
-.kjun-scope :where(a) { color: inherit; text-decoration: inherit; }
-.kjun-scope :where(ol, ul, menu) { list-style: none; margin: 0; padding: 0; }
-.kjun-scope :where(table) { text-indent: 0; border-color: inherit; border-collapse: collapse; }
-.kjun-scope :where(fieldset, legend) { margin: 0; padding: 0; }
-.kjun-scope :where(textarea) { resize: vertical; }
-.kjun-scope :where(input, textarea)::placeholder { opacity: 1; }
-.kjun-scope :where(img, video) { max-width: 100%; height: auto; }
-.kjun-scope :where([hidden]:not([hidden="until-found"])) { display: none; }
-
-.kjun-scope, .kjun-scope *, .kjun-scope::before, .kjun-scope::after, .kjun-scope *::before, .kjun-scope *::after {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(button, [role="button"]),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(button, [role="button"]) { cursor: pointer; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(:disabled),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(:disabled) { cursor: default; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(a),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(a) { color: inherit; text-decoration: inherit; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(ol, ul, menu),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(ol, ul, menu) { list-style: none; margin: 0; padding: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(table),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(table) { text-indent: 0; border-color: inherit; border-collapse: collapse; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(fieldset, legend),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(fieldset, legend) { margin: 0; padding: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(textarea),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(textarea) { resize: vertical; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(input, textarea)::placeholder,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(input, textarea)::placeholder { opacity: 1; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where(img, video),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(img, video) { max-width: 100%; height: auto; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :where([hidden]:not([hidden="until-found"])),
+.kjun-scope :where([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.
+   Icons (svg) are excluded: they follow the surrounding text's colour and size (currentColor, 1em). */
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]):where(:not(svg)):not(:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *) {
+  font-family: var(--kjun-font);
+  color: var(--kjun-text);
+  font-size: var(--_kjun-type-body-size);
+  line-height: var(--_kjun-type-body-line);
+  font-weight: var(--_kjun-type-body-weight);
+  letter-spacing: var(--_kjun-type-body-tracking);
+}
+/* A Provider nested inside kjun markup (e.g. in a modal) re-reads its own font and color variables;
+   otherwise its content would inherit the outer kjun element's resolved values. */
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .kjun-scope {
+  font-family: var(--kjun-font);
+  color: var(--kjun-text);
+}
+/* A React overlay used without any Provider portals straight to document.body, so it has no .kjun-scope
+   ancestor: its root (kjun-scope plus a kjun- class) is the outermost kjun element. Zero specificity. */
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)),
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *,
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::before,
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: var(--_kjun-color-border);
+}
+:where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) {
+  font-family: var(--kjun-font);
+  color: var(--kjun-text);
+  font-size: var(--_kjun-type-body-size);
+  line-height: var(--_kjun-type-body-line);
+  font-weight: var(--_kjun-type-body-weight);
+  letter-spacing: var(--_kjun-type-body-tracking);
+}
+
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::before, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::after, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::before, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::after, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)), :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::before, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::after, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *::before, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *::after {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -1042,7 +1094,7 @@
     --tw-contain-paint:  ;
     --tw-contain-style:  
 }
-.kjun-scope::backdrop, .kjun-scope *::backdrop {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::backdrop, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) *::backdrop, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *))::backdrop, :where(.kjun-scope[class*=" kjun-"]):not(:where(.kjun-scope *)) *::backdrop {
     --tw-border-spacing-x: 0;
     --tw-border-spacing-y: 0;
     --tw-translate-x: 0;
@@ -1095,7 +1147,7 @@
     --tw-contain-paint:  ;
     --tw-contain-style:  
 }
-.kjun-scope .sr-only {
+.kjun-scope .kj-sr-only {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -1106,245 +1158,221 @@
     white-space: nowrap;
     border-width: 0
 }
-.kjun-scope .pointer-events-none {
+.kjun-scope .kj-pointer-events-none {
     pointer-events: none
 }
-.kjun-scope .visible {
-    visibility: visible
-}
-.kjun-scope .invisible {
+.kjun-scope .kj-invisible {
     visibility: hidden
 }
-.kjun-scope .collapse {
-    visibility: collapse
-}
-.kjun-scope .fixed {
+.kjun-scope .kj-fixed {
     position: fixed
 }
-.kjun-scope .absolute {
+.kjun-scope .kj-absolute {
     position: absolute
 }
-.kjun-scope .relative {
+.kjun-scope .kj-relative {
     position: relative
 }
-.kjun-scope .sticky {
+.kjun-scope .kj-sticky {
     position: sticky
 }
-.kjun-scope .inset-y-0 {
+.kjun-scope .kj-inset-y-0 {
     top: 0px;
     bottom: 0px
 }
-.kjun-scope .top-0 {
+.kjun-scope .kj-top-0 {
     top: 0px
 }
-.kjun-scope .isolate {
-    isolation: isolate
-}
-.kjun-scope .z-10 {
+.kjun-scope .kj-z-10 {
     z-index: 10
 }
-.kjun-scope .z-50 {
+.kjun-scope .kj-z-50 {
     z-index: 50
 }
-.kjun-scope .mx-2 {
+.kjun-scope .kj-mx-2 {
     margin-left: 8px;
     margin-right: 8px
 }
-.kjun-scope .mb-3 {
+.kjun-scope .kj-mb-3 {
     margin-bottom: 12px
 }
-.kjun-scope .ml-0\.5 {
+.kjun-scope .kj-ml-0\.5 {
     margin-left: 2px
 }
-.kjun-scope .ml-1 {
+.kjun-scope .kj-ml-1 {
     margin-left: 4px
 }
-.kjun-scope .ml-2 {
+.kjun-scope .kj-ml-2 {
     margin-left: 8px
 }
-.kjun-scope .ml-3 {
+.kjun-scope .kj-ml-3 {
     margin-left: 12px
 }
-.kjun-scope .ml-financial-affix-gap {
+.kjun-scope .kj-ml-financial-affix-gap {
     margin-left: 4px
 }
-.kjun-scope .mr-1 {
+.kjun-scope .kj-mr-1 {
     margin-right: 4px
 }
-.kjun-scope .mr-1\.5 {
+.kjun-scope .kj-mr-1\.5 {
     margin-right: 6px
 }
-.kjun-scope .mr-2 {
+.kjun-scope .kj-mr-2 {
     margin-right: 8px
 }
-.kjun-scope .mt-0\.5 {
+.kjun-scope .kj-mt-0\.5 {
     margin-top: 2px
 }
-.kjun-scope .mt-1 {
+.kjun-scope .kj-mt-1 {
     margin-top: 4px
 }
-.kjun-scope .mt-4 {
+.kjun-scope .kj-mt-4 {
     margin-top: 16px
 }
-.kjun-scope .mt-form-label-gap {
+.kjun-scope .kj-mt-form-label-gap {
     margin-top: 8px
 }
-.kjun-scope .block {
+.kjun-scope .kj-block {
     display: block
 }
-.kjun-scope .inline-block {
+.kjun-scope .kj-inline-block {
     display: inline-block
 }
-.kjun-scope .\!inline {
-    display: inline !important
-}
-.kjun-scope .inline {
-    display: inline
-}
-.kjun-scope .flex {
+.kjun-scope .kj-flex {
     display: flex
 }
-.kjun-scope .inline-flex {
+.kjun-scope .kj-inline-flex {
     display: inline-flex
 }
-.kjun-scope .table {
-    display: table
-}
-.kjun-scope .grid {
+.kjun-scope .kj-grid {
     display: grid
 }
-.kjun-scope .hidden {
+.kjun-scope .kj-hidden {
     display: none
 }
-.kjun-scope .h-button-heights-lg {
+.kjun-scope .kj-h-button-heights-lg {
     height: 48px
 }
-.kjun-scope .h-button-heights-md {
+.kjun-scope .kj-h-button-heights-md {
     height: 40px
 }
-.kjun-scope .h-button-heights-sm {
+.kjun-scope .kj-h-button-heights-sm {
     height: 32px
 }
-.kjun-scope .h-button-heights-xl {
+.kjun-scope .kj-h-button-heights-xl {
     height: 56px
 }
-.kjun-scope .h-button-heights-xs {
+.kjun-scope .kj-h-button-heights-xs {
     height: 24px
 }
-.kjun-scope .h-full {
+.kjun-scope .kj-h-full {
     height: 100%
 }
-.kjun-scope .h-menu-icon-size {
+.kjun-scope .kj-h-menu-icon-size {
     height: 16px
 }
-.kjun-scope .h-progress-heights-lg {
+.kjun-scope .kj-h-progress-heights-lg {
     height: 12px
 }
-.kjun-scope .h-progress-heights-md {
+.kjun-scope .kj-h-progress-heights-md {
     height: 8px
 }
-.kjun-scope .h-progress-heights-sm {
+.kjun-scope .kj-h-progress-heights-sm {
     height: 4px
 }
-.kjun-scope .h-selection-dot-size {
+.kjun-scope .kj-h-selection-dot-size {
     height: 8px
 }
-.kjun-scope .h-spinner-sizes-lg {
+.kjun-scope .kj-h-spinner-sizes-lg {
     height: 32px
 }
-.kjun-scope .h-spinner-sizes-md {
+.kjun-scope .kj-h-spinner-sizes-md {
     height: 24px
 }
-.kjun-scope .h-spinner-sizes-sm {
+.kjun-scope .kj-h-spinner-sizes-sm {
     height: 16px
 }
-.kjun-scope .h-spinner-sizes-xl {
+.kjun-scope .kj-h-spinner-sizes-xl {
     height: 48px
 }
-.kjun-scope .h-spinner-sizes-xs {
+.kjun-scope .kj-h-spinner-sizes-xs {
     height: 12px
 }
-.kjun-scope .h-tooltip-arrow-size {
+.kjun-scope .kj-h-tooltip-arrow-size {
     height: 8px
 }
-.kjun-scope .max-h-menu-list-max-height {
+.kjun-scope .kj-max-h-menu-list-max-height {
     max-height: 240px
 }
-.kjun-scope .min-h-0 {
+.kjun-scope .kj-min-h-0 {
     min-height: 0px
 }
-.kjun-scope .w-fit {
+.kjun-scope .kj-w-fit {
     width: fit-content
 }
-.kjun-scope .w-full {
+.kjun-scope .kj-w-full {
     width: 100%
 }
-.kjun-scope .w-menu-icon-size {
+.kjun-scope .kj-w-menu-icon-size {
     width: 16px
 }
-.kjun-scope .w-selection-dot-size {
+.kjun-scope .kj-w-selection-dot-size {
     width: 8px
 }
-.kjun-scope .w-spinner-sizes-lg {
+.kjun-scope .kj-w-spinner-sizes-lg {
     width: 32px
 }
-.kjun-scope .w-spinner-sizes-md {
+.kjun-scope .kj-w-spinner-sizes-md {
     width: 24px
 }
-.kjun-scope .w-spinner-sizes-sm {
+.kjun-scope .kj-w-spinner-sizes-sm {
     width: 16px
 }
-.kjun-scope .w-spinner-sizes-xl {
+.kjun-scope .kj-w-spinner-sizes-xl {
     width: 48px
 }
-.kjun-scope .w-spinner-sizes-xs {
+.kjun-scope .kj-w-spinner-sizes-xs {
     width: 12px
 }
-.kjun-scope .w-table-search-width {
+.kjun-scope .kj-w-table-search-width {
     width: 200px
 }
-.kjun-scope .w-tooltip-arrow-size {
+.kjun-scope .kj-w-tooltip-arrow-size {
     width: 8px
 }
-.kjun-scope .min-w-0 {
+.kjun-scope .kj-min-w-0 {
     min-width: 0px
 }
-.kjun-scope .min-w-menu-minimum-width {
+.kjun-scope .kj-min-w-menu-minimum-width {
     min-width: 160px
 }
-.kjun-scope .max-w-\[calc\(100vw-2\*var\(--extension-floating-viewport-inset\)\)\] {
+.kjun-scope .kj-max-w-\[calc\(100vw-2\*var\(--extension-floating-viewport-inset\)\)\] {
     max-width: calc(100vw - 2 * var(--extension-floating-viewport-inset))
 }
-.kjun-scope .max-w-full {
+.kjun-scope .kj-max-w-full {
     max-width: 100%
 }
-.kjun-scope .max-w-tooltip-max-width {
+.kjun-scope .kj-max-w-tooltip-max-width {
     max-width: 256px
 }
-.kjun-scope .flex-1 {
+.kjun-scope .kj-flex-1 {
     flex: 1 1 0%
 }
-.kjun-scope .flex-shrink {
-    flex-shrink: 1
-}
-.kjun-scope .flex-shrink-0 {
+.kjun-scope .kj-flex-shrink-0 {
     flex-shrink: 0
 }
-.kjun-scope .shrink-0 {
+.kjun-scope .kj-shrink-0 {
     flex-shrink: 0
 }
-.kjun-scope .rotate-180 {
+.kjun-scope .kj-rotate-180 {
     --tw-rotate: 180deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.kjun-scope .rotate-45 {
+.kjun-scope .kj-rotate-45 {
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
 }
-.kjun-scope .transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
-}
-@keyframes spin {
+@keyframes kj-spin {
     to {
         transform: rotate(360deg)
     }
@@ -1355,479 +1383,445 @@
         transform: rotate(360deg)
     }
 }
-.kjun-scope .animate-spin {
-    animation: spin 1s linear infinite
+.kjun-scope .kj-animate-spin {
+    animation: kj-spin 1s linear infinite
 }
-.kjun-scope .cursor-not-allowed {
+.kjun-scope .kj-cursor-not-allowed {
     cursor: not-allowed
 }
-.kjun-scope .cursor-pointer {
+.kjun-scope .kj-cursor-pointer {
     cursor: pointer
 }
-.kjun-scope .select-none {
+.kjun-scope .kj-select-none {
     user-select: none
 }
-.kjun-scope .resize-none {
+.kjun-scope .kj-resize-none {
     resize: none
 }
-.kjun-scope .resize-y {
+.kjun-scope .kj-resize-y {
     resize: vertical
 }
-.kjun-scope .resize-x {
+.kjun-scope .kj-resize-x {
     resize: horizontal
 }
-.kjun-scope .resize {
+.kjun-scope .kj-resize {
     resize: both
 }
-.kjun-scope .grid-cols-1 {
+.kjun-scope .kj-grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr))
 }
-.kjun-scope .flex-col {
+.kjun-scope .kj-flex-col {
     flex-direction: column
 }
-.kjun-scope .flex-wrap {
+.kjun-scope .kj-flex-wrap {
     flex-wrap: wrap
 }
-.kjun-scope .flex-nowrap {
+.kjun-scope .kj-flex-nowrap {
     flex-wrap: nowrap
 }
-.kjun-scope .items-center {
+.kjun-scope .kj-items-center {
     align-items: center
 }
-.kjun-scope .justify-end {
+.kjun-scope .kj-justify-end {
     justify-content: flex-end
 }
-.kjun-scope .justify-center {
+.kjun-scope .kj-justify-center {
     justify-content: center
 }
-.kjun-scope .justify-between {
+.kjun-scope .kj-justify-between {
     justify-content: space-between
 }
-.kjun-scope .gap-1 {
+.kjun-scope .kj-gap-1 {
     gap: 4px
 }
-.kjun-scope .gap-1\.5 {
+.kjun-scope .kj-gap-1\.5 {
     gap: 6px
 }
-.kjun-scope .gap-2 {
+.kjun-scope .kj-gap-2 {
     gap: 8px
 }
-.kjun-scope .gap-2\.5 {
+.kjun-scope .kj-gap-2\.5 {
     gap: 10px
 }
-.kjun-scope .gap-4 {
+.kjun-scope .kj-gap-4 {
     gap: 16px
 }
-.kjun-scope .gap-pagination-gap {
+.kjun-scope .kj-gap-pagination-gap {
     gap: 12px
 }
-.kjun-scope .gap-pagination-item-gap {
+.kjun-scope .kj-gap-pagination-item-gap {
     gap: 4px
 }
-.kjun-scope :is(.space-y-3 > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-space-y-3 > :not([hidden]) ~ :not([hidden])) {
     --tw-space-y-reverse: 0;
     margin-top: calc(12px * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(12px * var(--tw-space-y-reverse))
 }
-.kjun-scope :is(.divide-y > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-divide-y > :not([hidden]) ~ :not([hidden])) {
     --tw-divide-y-reverse: 0;
     border-top-width: calc(var(--_kjun-border-default-width) * calc(1 - var(--tw-divide-y-reverse)));
     border-bottom-width: calc(var(--_kjun-border-default-width) * var(--tw-divide-y-reverse))
 }
-.kjun-scope :is(.divide-border > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-divide-border > :not([hidden]) ~ :not([hidden])) {
     border-color: var(--border-primary)
 }
-.kjun-scope :is(.divide-border-primary > :not([hidden]) ~ :not([hidden])) {
+.kjun-scope :is(.kj-divide-border-primary > :not([hidden]) ~ :not([hidden])) {
     border-color: var(--border-primary)
 }
-.kjun-scope .overflow-hidden {
+.kjun-scope .kj-overflow-hidden {
     overflow: hidden
 }
-.kjun-scope .overflow-x-auto {
+.kjun-scope .kj-overflow-x-auto {
     overflow-x: auto
 }
-.kjun-scope .overflow-y-auto {
+.kjun-scope .kj-overflow-y-auto {
     overflow-y: auto
 }
-.kjun-scope .truncate {
+.kjun-scope .kj-truncate {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap
 }
-.kjun-scope .whitespace-normal {
+.kjun-scope .kj-whitespace-normal {
     white-space: normal
 }
-.kjun-scope .whitespace-nowrap {
+.kjun-scope .kj-whitespace-nowrap {
     white-space: nowrap
 }
-.kjun-scope .break-words {
+.kjun-scope .kj-break-words {
     overflow-wrap: break-word
 }
-.kjun-scope .rounded {
+.kjun-scope .kj-rounded {
     border-radius: 6px
 }
-.kjun-scope .rounded-badge {
+.kjun-scope .kj-rounded-badge {
     border-radius: 6px
 }
-.kjun-scope .rounded-card {
+.kjun-scope .kj-rounded-card {
     border-radius: 12px
 }
-.kjun-scope .rounded-financial-pill-radius {
+.kjun-scope .kj-rounded-financial-pill-radius {
     border-radius: 6px
 }
-.kjun-scope .rounded-full {
+.kjun-scope .kj-rounded-full {
     border-radius: 9999px
 }
-.kjun-scope .rounded-pagination-radius {
+.kjun-scope .kj-rounded-pagination-radius {
     border-radius: 6px
 }
-.kjun-scope .border {
-    border-width: var(--_kjun-border-default-width)
-}
-.kjun-scope .border-b {
+.kjun-scope .kj-border-b {
     border-bottom-width: var(--_kjun-border-default-width)
 }
-.kjun-scope .border-t {
+.kjun-scope .kj-border-t {
     border-top-width: var(--_kjun-border-default-width)
 }
-.kjun-scope .border-border {
+.kjun-scope .kj-border-border {
     border-color: var(--border-primary)
 }
-.kjun-scope .border-border-primary {
+.kjun-scope .kj-border-border-primary {
     border-color: var(--border-primary)
 }
-.kjun-scope .bg-bg-secondary {
+.kjun-scope .kj-bg-bg-secondary {
     background-color: var(--bg-secondary)
 }
-.kjun-scope .bg-brand {
+.kjun-scope .kj-bg-brand {
     background-color: var(--brand)
 }
-.kjun-scope .bg-brand-subtle-bg {
+.kjun-scope .kj-bg-brand-subtle-bg {
     background-color: var(--brand-subtle-bg)
 }
-.kjun-scope .bg-card-bg {
+.kjun-scope .kj-bg-card-bg {
     background-color: var(--card-bg)
 }
-.kjun-scope .bg-chart-tooltip-bg {
+.kjun-scope .kj-bg-chart-tooltip-bg {
     background-color: var(--chart-tooltip-bg)
 }
-.kjun-scope .bg-danger {
+.kjun-scope .kj-bg-danger {
     background-color: var(--danger)
 }
-.kjun-scope .bg-danger-bg {
+.kjun-scope .kj-bg-danger-bg {
     background-color: var(--danger-bg)
 }
-.kjun-scope .bg-info {
+.kjun-scope .kj-bg-info {
     background-color: var(--info)
 }
-.kjun-scope .bg-info-bg {
+.kjun-scope .kj-bg-info-bg {
     background-color: var(--info-bg)
 }
-.kjun-scope .bg-price-down {
+.kjun-scope .kj-bg-price-down {
     background-color: var(--price-down)
 }
-.kjun-scope .bg-price-down-bg {
+.kjun-scope .kj-bg-price-down-bg {
     background-color: var(--price-down-bg)
 }
-.kjun-scope .bg-price-up {
+.kjun-scope .kj-bg-price-up {
     background-color: var(--price-up)
 }
-.kjun-scope .bg-price-up-bg {
+.kjun-scope .kj-bg-price-up-bg {
     background-color: var(--price-up-bg)
 }
-.kjun-scope .bg-selected-bg {
+.kjun-scope .kj-bg-selected-bg {
     background-color: var(--selected-bg)
 }
-.kjun-scope .bg-success {
+.kjun-scope .kj-bg-success {
     background-color: var(--success)
 }
-.kjun-scope .bg-success-bg {
+.kjun-scope .kj-bg-success-bg {
     background-color: var(--success-bg)
 }
-.kjun-scope .bg-surface-card {
+.kjun-scope .kj-bg-surface-card {
     background-color: var(--card-bg)
 }
-.kjun-scope .bg-transparent {
+.kjun-scope .kj-bg-transparent {
     background-color: transparent
 }
-.kjun-scope .bg-warning {
+.kjun-scope .kj-bg-warning {
     background-color: var(--warning)
 }
-.kjun-scope .bg-warning-bg {
+.kjun-scope .kj-bg-warning-bg {
     background-color: var(--warning-bg)
 }
-.kjun-scope .p-2 {
+.kjun-scope .kj-p-2 {
     padding: 8px
 }
-.kjun-scope .px-2 {
+.kjun-scope .kj-px-2 {
     padding-left: 8px;
     padding-right: 8px
 }
-.kjun-scope .px-3 {
+.kjun-scope .kj-px-3 {
     padding-left: 12px;
     padding-right: 12px
 }
-.kjun-scope .px-3\.5 {
+.kjun-scope .kj-px-3\.5 {
     padding-left: 14px;
     padding-right: 14px
 }
-.kjun-scope .px-4 {
+.kjun-scope .kj-px-4 {
     padding-left: 16px;
     padding-right: 16px
 }
-.kjun-scope .px-financial-pill-padding-x {
+.kjun-scope .kj-px-financial-pill-padding-x {
     padding-left: 8px;
     padding-right: 8px
 }
-.kjun-scope .px-pagination-label-padding-x {
+.kjun-scope .kj-px-pagination-label-padding-x {
     padding-left: 12px;
     padding-right: 12px
 }
-.kjun-scope .px-pagination-padding {
+.kjun-scope .kj-px-pagination-padding {
     padding-left: 16px;
     padding-right: 16px
 }
-.kjun-scope .px-tooltip-padding-x {
+.kjun-scope .kj-px-tooltip-padding-x {
     padding-left: 8px;
     padding-right: 8px
 }
-.kjun-scope .py-0\.5 {
+.kjun-scope .kj-py-0\.5 {
     padding-top: 2px;
     padding-bottom: 2px
 }
-.kjun-scope .py-2 {
+.kjun-scope .kj-py-2 {
     padding-top: 8px;
     padding-bottom: 8px
 }
-.kjun-scope .py-2\.5 {
+.kjun-scope .kj-py-2\.5 {
     padding-top: 10px;
     padding-bottom: 10px
 }
-.kjun-scope .py-3 {
+.kjun-scope .kj-py-3 {
     padding-top: 12px;
     padding-bottom: 12px
 }
-.kjun-scope .py-3\.5 {
+.kjun-scope .kj-py-3\.5 {
     padding-top: 14px;
     padding-bottom: 14px
 }
-.kjun-scope .py-4 {
+.kjun-scope .kj-py-4 {
     padding-top: 16px;
     padding-bottom: 16px
 }
-.kjun-scope .py-financial-pill-padding-y {
+.kjun-scope .kj-py-financial-pill-padding-y {
     padding-top: 2px;
     padding-bottom: 2px
 }
-.kjun-scope .py-pagination-padding {
+.kjun-scope .kj-py-pagination-padding {
     padding-top: 16px;
     padding-bottom: 16px
 }
-.kjun-scope .py-state-padding-lg {
+.kjun-scope .kj-py-state-padding-lg {
     padding-top: 80px;
     padding-bottom: 80px
 }
-.kjun-scope .py-state-padding-md {
+.kjun-scope .kj-py-state-padding-md {
     padding-top: 48px;
     padding-bottom: 48px
 }
-.kjun-scope .py-state-padding-sm {
+.kjun-scope .kj-py-state-padding-sm {
     padding-top: 24px;
     padding-bottom: 24px
 }
-.kjun-scope .py-tooltip-padding-y {
+.kjun-scope .kj-py-tooltip-padding-y {
     padding-top: 4px;
     padding-bottom: 4px
 }
-.kjun-scope .text-left {
+.kjun-scope .kj-text-left {
     text-align: left
 }
-.kjun-scope .text-center {
+.kjun-scope .kj-text-center {
     text-align: center
 }
-.kjun-scope .text-right {
+.kjun-scope .kj-text-right {
     text-align: right
 }
-.kjun-scope .align-top {
+.kjun-scope .kj-align-top {
     vertical-align: top
 }
-.kjun-scope .align-middle {
+.kjun-scope .kj-align-middle {
     vertical-align: middle
 }
-.kjun-scope .text-\[length\:var\(--control-label-size\)\] {
+.kjun-scope .kj-text-\[length\:var\(--control-label-size\)\] {
     font-size: var(--control-label-size)
 }
-.kjun-scope .text-base {
+.kjun-scope .kj-text-base {
     font-size: 1rem;
     line-height: 1.5rem;
     letter-spacing: 0em
 }
-.kjun-scope .text-lg {
+.kjun-scope .kj-text-lg {
     font-size: 1.25rem;
     line-height: 1.75rem;
     letter-spacing: 0em
 }
-.kjun-scope .text-sm {
+.kjun-scope .kj-text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
     letter-spacing: 0em
 }
-.kjun-scope .text-xs {
+.kjun-scope .kj-text-xs {
     font-size: 0.75rem;
     line-height: 1rem;
     letter-spacing: 0em
 }
-.kjun-scope .font-medium {
+.kjun-scope .kj-font-medium {
     font-weight: var(--_kjun-type-label-weight)
 }
-.kjun-scope .font-semibold {
+.kjun-scope .kj-font-semibold {
     font-weight: var(--_kjun-type-control-weight)
 }
-.kjun-scope .uppercase {
-    text-transform: uppercase
-}
-.kjun-scope .tabular-nums {
+.kjun-scope .kj-tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
 }
-.kjun-scope .leading-relaxed {
+.kjun-scope .kj-leading-relaxed {
     line-height: 1.625
 }
-.kjun-scope .text-brand {
+.kjun-scope .kj-text-brand {
     color: var(--brand)
 }
-.kjun-scope .text-brand-hover {
+.kjun-scope .kj-text-brand-hover {
     color: var(--brand-hover)
 }
-.kjun-scope .text-chart-tooltip-text {
+.kjun-scope .kj-text-chart-tooltip-text {
     color: var(--chart-tooltip-text)
 }
-.kjun-scope .text-danger {
+.kjun-scope .kj-text-danger {
     color: var(--danger)
 }
-.kjun-scope .text-danger-accent {
+.kjun-scope .kj-text-danger-accent {
     color: var(--danger-accent)
 }
-.kjun-scope .text-favorite {
+.kjun-scope .kj-text-favorite {
     color: var(--favorite)
 }
-.kjun-scope .text-info {
+.kjun-scope .kj-text-info {
     color: var(--info)
 }
-.kjun-scope .text-info-accent {
+.kjun-scope .kj-text-info-accent {
     color: var(--info-accent)
 }
-.kjun-scope .text-interest {
+.kjun-scope .kj-text-interest {
     color: var(--interest)
 }
-.kjun-scope .text-on-brand {
+.kjun-scope .kj-text-on-brand {
     color: var(--on-brand)
 }
-.kjun-scope .text-price-down {
+.kjun-scope .kj-text-price-down {
     color: var(--price-down)
 }
-.kjun-scope .text-price-up {
+.kjun-scope .kj-text-price-up {
     color: var(--price-up)
 }
-.kjun-scope .text-success {
+.kjun-scope .kj-text-success {
     color: var(--success)
 }
-.kjun-scope .text-text-disabled {
+.kjun-scope .kj-text-text-disabled {
     color: var(--text-disabled)
 }
-.kjun-scope .text-text-primary {
+.kjun-scope .kj-text-text-primary {
     color: var(--text-primary)
 }
-.kjun-scope .text-text-secondary {
+.kjun-scope .kj-text-text-secondary {
     color: var(--text-secondary)
 }
-.kjun-scope .text-text-tertiary {
+.kjun-scope .kj-text-text-tertiary {
     color: var(--text-tertiary)
 }
-.kjun-scope .text-warning {
+.kjun-scope .kj-text-warning {
     color: var(--warning)
 }
-.kjun-scope .text-warning-accent {
+.kjun-scope .kj-text-warning-accent {
     color: var(--warning-accent)
 }
-.kjun-scope .\!underline {
-    text-decoration-line: underline !important
-}
-.kjun-scope .underline {
-    text-decoration-line: underline
-}
-.kjun-scope .opacity-disabled {
+.kjun-scope .kj-opacity-disabled {
     opacity: var(--_kjun-state-opacity-disabled)
 }
-.kjun-scope .outline {
-    outline-style: solid
-}
-.kjun-scope .blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
-}
-.kjun-scope .filter {
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
-}
-.kjun-scope .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
-}
-.kjun-scope .transition {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-timing-function: var(--ease-out);
-    transition-duration: var(--motion-control)
-}
-.kjun-scope .transition-colors {
+.kjun-scope .kj-transition-colors {
     transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
     transition-timing-function: var(--ease-out);
     transition-duration: var(--motion-control)
 }
-.kjun-scope .transition-transform {
+.kjun-scope .kj-transition-transform {
     transition-property: transform;
     transition-timing-function: var(--ease-out);
     transition-duration: var(--motion-control)
 }
-.kjun-scope .ease-in-out {
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
-}
-.kjun-scope .hover\:bg-bg-hover:hover {
+.kjun-scope .hover\:kj-bg-bg-hover:hover {
     background-color: var(--bg-hover)
 }
-.kjun-scope .hover\:text-brand:hover {
+.kjun-scope .hover\:kj-text-brand:hover {
     color: var(--brand)
 }
-.kjun-scope .hover\:text-text-primary:hover {
+.kjun-scope .hover\:kj-text-text-primary:hover {
     color: var(--text-primary)
 }
-.kjun-scope .disabled\:cursor-not-allowed:disabled {
+.kjun-scope .disabled\:kj-cursor-not-allowed:disabled {
     cursor: not-allowed
 }
-.kjun-scope .disabled\:opacity-disabled:disabled {
+.kjun-scope .disabled\:kj-opacity-disabled:disabled {
     opacity: var(--_kjun-state-opacity-disabled)
 }
 @media (min-width: 640px) {
-    .kjun-scope .pagination\:block {
+    .kjun-scope .pagination\:kj-block {
         display: block
     }
-    .kjun-scope .pagination\:flex {
+    .kjun-scope .pagination\:kj-flex {
         display: flex
     }
-    .kjun-scope .pagination\:hidden {
+    .kjun-scope .pagination\:kj-hidden {
         display: none
     }
-    .kjun-scope .pagination\:flex-row {
+    .kjun-scope .pagination\:kj-flex-row {
         flex-direction: row
     }
-    .kjun-scope .pagination\:items-center {
+    .kjun-scope .pagination\:kj-items-center {
         align-items: center
     }
-    .kjun-scope .pagination\:justify-between {
+    .kjun-scope .pagination\:kj-justify-between {
         justify-content: space-between
     }
 }
 @media (min-width: 1024px) {
-    .kjun-scope .pagination-wide\:px-6 {
+    .kjun-scope .pagination-wide\:kj-px-6 {
         padding-left: 24px;
         padding-right: 24px
     }
@@ -1950,7 +1944,7 @@
 .kjun-scope .ds-form-group { margin-bottom: var(--extension-form-item-gap); min-width: 0; }
 .kjun-scope .ds-form-group:last-child { margin-bottom: 0; }
 /* 그리드·툴바는 부모 gap을 사용하고, 일반 문서 흐름의 기존 폼만 기본 간격을 유지한다. */
-.kjun-scope :where(.flex, .inline-flex, .grid, .inline-grid, .ds-form-layout) > .ds-form-group { margin-bottom: 0; }
+.kjun-scope :where(.flex, .inline-flex, .grid, .inline-grid, .kj-flex, .kj-inline-flex, .kj-grid, .kj-inline-grid, .ds-form-layout) > .ds-form-group { margin-bottom: 0; }
 .kjun-scope .ds-field-menu {
   padding: var(--extension-menu-padding);
   border: var(--_kjun-border-default-width) solid var(--border-primary);
@@ -3954,7 +3948,6 @@
   --_kjun-type-display-lg-line: 3rem;
   --_kjun-type-display-lg-weight: 700;
   --_kjun-type-display-lg-tracking: -0.02em;
-  font-size: var(--_kjun-type-body-size); line-height: var(--_kjun-type-body-line); font-weight: var(--_kjun-type-body-weight); letter-spacing: var(--_kjun-type-body-tracking);
 }
 .kjun-scope .kjun-type-caption { font-size: var(--_kjun-type-caption-size); line-height: var(--_kjun-type-caption-line); font-weight: var(--_kjun-type-caption-weight); letter-spacing: var(--_kjun-type-caption-tracking); }
 .kjun-scope .kjun-type-meta { font-size: var(--_kjun-type-meta-size); line-height: var(--_kjun-type-meta-line); font-weight: var(--_kjun-type-meta-weight); letter-spacing: var(--_kjun-type-meta-tracking); }
@@ -4046,19 +4039,6 @@
 @media (prefers-reduced-motion: reduce) { .kjun-scope [class*="price-flash-"] { animation: none; } }
 
 /* KJUN 공통 구조. 색상과 서체는 프로젝트가 제공한 CSS 변수를 사용한다. */
-.kjun-scope {
-  box-sizing: border-box;
-  line-height: var(--_kjun-type-body-line);
-}
-.kjun-scope *,
-.kjun-scope *::before,
-.kjun-scope *::after {
-  box-sizing: border-box;
-}
-.kjun-scope button,
-.kjun-scope input {
-  font-family: inherit;
-}
 .kjun-button {
   position: relative;
   display: inline-flex;
@@ -4846,10 +4826,6 @@
 .kjun-form-skeleton > div > .kjun-skeleton:last-child .kjun-skeleton-block,
 .kjun-form-skeleton > div > .ds-skeleton:last-child .ds-skeleton-block { border-radius: var(--form-skeleton-radius); }
 
-.kjun-scope textarea,
-.kjun-scope select {
-  font-family: inherit;
-}
 .kjun-sr-only {
   position: absolute;
   width: 1px;

package/package.json

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