@kjun-ui/native 0.4.0 → 0.4.1

package/dist/styles.css

@@ -1828,7 +1828,7 @@
 }
 /* KJUN-owned field geometry and interaction styles. */
 /* 입력의 표면·상태는 한 곳에서 관리한다. 모든 크기는 같은 size의 버튼 높이와 정렬한다. */
-.kjun-scope .ds-field--sm {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--sm, .kjun-scope .ds-field--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --field-height: var(--_kjun-geometry-input-sm-height);
   --field-font-size: var(--_kjun-geometry-input-sm-font-size);
   --field-placeholder-size: var(--_kjun-geometry-input-sm-placeholder-size);
@@ -1841,7 +1841,7 @@
   --field-textarea-padding-y: var(--_kjun-geometry-input-sm-textarea-padding-y);
 }
 
-.kjun-scope .ds-field--md {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--md, .kjun-scope .ds-field--md:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --field-height: var(--_kjun-geometry-input-md-height);
   --field-font-size: var(--_kjun-geometry-input-md-font-size);
   --field-placeholder-size: var(--_kjun-geometry-input-md-placeholder-size);
@@ -1854,7 +1854,7 @@
   --field-textarea-padding-y: var(--_kjun-geometry-input-md-textarea-padding-y);
 }
 
-.kjun-scope .ds-field--lg {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--lg, .kjun-scope .ds-field--lg:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --field-height: var(--_kjun-geometry-input-lg-height);
   --field-font-size: var(--_kjun-geometry-input-lg-font-size);
   --field-placeholder-size: var(--_kjun-geometry-input-lg-placeholder-size);
@@ -1867,7 +1867,7 @@
   --field-textarea-padding-y: var(--_kjun-geometry-input-lg-textarea-padding-y);
 }
 
-.kjun-scope .ds-field {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field, .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   display: block;
   width: 100%;
   min-width: 0;
@@ -1884,48 +1884,52 @@
   transition: background-color var(--motion-control) var(--ease-out), border-color var(--motion-control) var(--ease-out);
 }
 
-.kjun-scope .ds-field::placeholder { color: var(--input-placeholder); font-size: var(--field-placeholder-size); opacity: 1; }
-.kjun-scope .ds-field-placeholder { color: var(--input-placeholder); font-size: var(--field-placeholder-size); }
-.kjun-scope .ds-field:hover:not(:disabled):not(:focus):not([readonly]):not([aria-expanded="true"]):not(.ds-field--open):not(.ds-field--error) { background: var(--bg-hover); }
-.kjun-scope .ds-field:focus, .kjun-scope .ds-field--open, .kjun-scope .ds-field[aria-expanded="true"] {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field::placeholder, .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::placeholder { color: var(--input-placeholder); font-size: var(--field-placeholder-size); opacity: 1; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-placeholder, .kjun-scope .ds-field-placeholder:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { color: var(--input-placeholder); font-size: var(--field-placeholder-size); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:hover:not(:disabled):not(:focus):not([readonly]):not([aria-expanded="true"]):not(.ds-field--open):not(.ds-field--error), .kjun-scope .ds-field:hover:not(:disabled):not(:focus):not([readonly]):not([aria-expanded="true"]):not(.ds-field--open):not(.ds-field--error):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--bg-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:focus, .kjun-scope .ds-field:focus:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--open, .kjun-scope .ds-field--open:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field[aria-expanded="true"], .kjun-scope .ds-field[aria-expanded="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: none;
   border-color: var(--input-border-focus);
   background: var(--input-bg);
 }
-.kjun-scope .ds-field--error, .kjun-scope .ds-field--error:focus, .kjun-scope .ds-field--error.ds-field--open, .kjun-scope .ds-field--error[aria-expanded="true"] {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error, .kjun-scope .ds-field--error:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error:focus, .kjun-scope .ds-field--error:focus:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error.ds-field--open, .kjun-scope .ds-field--error.ds-field--open:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error[aria-expanded="true"], .kjun-scope .ds-field--error[aria-expanded="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   border-color: var(--danger);
   background: var(--input-bg);
 }
-.kjun-scope .ds-field[readonly] { color: var(--text-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field[readonly], .kjun-scope .ds-field[readonly]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { color: var(--text-secondary); }
 /* The ring covers the control border so keyboard focus reads as one outline. */
-.kjun-scope .ds-field:focus-visible:not(:disabled) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:focus-visible:not(:disabled), .kjun-scope .ds-field:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: var(--_kjun-state-focus-width) solid var(--focus-ring);
   outline-offset: var(--_kjun-state-focus-inset-offset);
 }
-.kjun-scope .ds-field--error:focus-visible:not(:disabled),
-.kjun-scope .ds-field[aria-invalid="true"]:focus-visible:not(:disabled) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--error:focus-visible:not(:disabled),
+.kjun-scope .ds-field--error:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field[aria-invalid="true"]:focus-visible:not(:disabled),
+.kjun-scope .ds-field[aria-invalid="true"]:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline-offset: var(--_kjun-state-focus-offset);
 }
-.kjun-scope .ds-field-shell[data-disabled="true"] :is(.ds-field-prefix, .ds-field-suffix), .kjun-scope .ds-field-shell:has(> :disabled) :is(.ds-field-prefix, .ds-field-suffix, .ds-select-indicator) { color: var(--text-disabled); }
-.kjun-scope .ds-field-shell[data-disabled="true"] .ds-field-suffix .ds-icon,
-.kjun-scope .ds-field-shell .ds-field-clear:disabled { color: var(--text-disabled); }
-.kjun-scope .ds-field-shell .ds-field-clear:disabled { opacity: 1; }
-.kjun-scope .ds-field:disabled .ds-field-placeholder { color: var(--text-disabled); }
-.kjun-scope .ds-field:disabled {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell[data-disabled="true"] :is(.ds-field-prefix, .ds-field-suffix), .kjun-scope .ds-field-shell[data-disabled="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.ds-field-prefix, .ds-field-suffix), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell:has(> :disabled) :is(.ds-field-prefix, .ds-field-suffix, .ds-select-indicator), .kjun-scope .ds-field-shell:has(> :disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.ds-field-prefix, .ds-field-suffix, .ds-select-indicator) { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell[data-disabled="true"] .ds-field-suffix .ds-icon,
+.kjun-scope .ds-field-shell[data-disabled="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-suffix .ds-icon,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell .ds-field-clear:disabled,
+.kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear:disabled { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell .ds-field-clear:disabled, .kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear:disabled { opacity: 1; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:disabled .ds-field-placeholder, .kjun-scope .ds-field:disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-placeholder { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:disabled, .kjun-scope .ds-field:disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   cursor: not-allowed;
   color: var(--text-disabled);
   background: var(--input-bg);
 }
-.kjun-scope .ds-field:disabled::placeholder { color: var(--text-disabled); }
-.kjun-scope .ds-field--prefix { padding-left: calc(var(--field-padding) + var(--field-icon-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-field--suffix { padding-right: calc(var(--field-padding) + var(--field-clear-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-input-native.ds-field--prefix { padding-left: calc(var(--field-padding) + var(--input-prefix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-input-native.ds-field--suffix { padding-right: calc(var(--field-padding) + var(--input-suffix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
-.kjun-scope .ds-field--clearable > .truncate { padding-right: calc(var(--field-clear-size) + var(--field-affix-gap)); }
-.kjun-scope .ds-field--select { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: var(--_kjun-geometry-dimension-value8); }
-.kjun-scope .ds-field--textarea { height: auto; padding-top: var(--field-textarea-padding-y); padding-bottom: var(--field-textarea-padding-y); }
-.kjun-scope .ds-field-shell { position: relative; min-width: 0; --input-prefix-width: 0px; --input-suffix-width: 0px; }
-.kjun-scope .ds-field-prefix, .kjun-scope .ds-field-suffix {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field:disabled::placeholder, .kjun-scope .ds-field:disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"])::placeholder { color: var(--text-disabled); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--prefix, .kjun-scope .ds-field--prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-left: calc(var(--field-padding) + var(--field-icon-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--suffix, .kjun-scope .ds-field--suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-right: calc(var(--field-padding) + var(--field-clear-size) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-input-native.ds-field--prefix, .kjun-scope .ds-input-native.ds-field--prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-left: calc(var(--field-padding) + var(--input-prefix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-input-native.ds-field--suffix, .kjun-scope .ds-input-native.ds-field--suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { padding-right: calc(var(--field-padding) + var(--input-suffix-width) + var(--field-affix-gap) - var(--_kjun-border-control-width)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--clearable > .truncate, .kjun-scope .ds-field--clearable:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) > .truncate { padding-right: calc(var(--field-clear-size) + var(--field-affix-gap)); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--select, .kjun-scope .ds-field--select:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: var(--_kjun-geometry-dimension-value8); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field--textarea, .kjun-scope .ds-field--textarea:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { height: auto; padding-top: var(--field-textarea-padding-y); padding-bottom: var(--field-textarea-padding-y); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell, .kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { position: relative; min-width: 0; --input-prefix-width: 0px; --input-suffix-width: 0px; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-prefix, .kjun-scope .ds-field-prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-suffix, .kjun-scope .ds-field-suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -1935,25 +1939,25 @@
   color: var(--text-tertiary);
   font-size: var(--field-icon-size);
 }
-.kjun-scope .ds-field-prefix { left: var(--field-padding); pointer-events: none; }
-.kjun-scope .ds-field-suffix { right: var(--field-padding); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-prefix, .kjun-scope .ds-field-prefix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { left: var(--field-padding); pointer-events: none; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-suffix, .kjun-scope .ds-field-suffix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { right: var(--field-padding); }
 /* Override the shared Button's inline geometry only inside a field. */
-.kjun-scope .ds-field-shell .ds-field-clear { padding: 0 !important; width: var(--field-clear-size) !important; height: var(--field-clear-size) !important; min-height: var(--field-clear-size) !important; border-radius: 50% !important; flex-shrink: 0; }
-.kjun-scope .ds-field-clear .ds-icon, .kjun-scope .ds-select-indicator { width: var(--field-icon-size); height: var(--field-icon-size); }
-.kjun-scope .ds-field-error { margin-top: var(--extension-form-message-gap); font-size: var(--_kjun-type-caption-size); color: var(--danger); line-height: var(--_kjun-type-caption-line); font-weight: var(--_kjun-type-caption-weight); letter-spacing: var(--_kjun-type-caption-tracking); }
-.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; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-shell .ds-field-clear, .kjun-scope .ds-field-shell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear { padding: 0 !important; width: var(--field-clear-size) !important; height: var(--field-clear-size) !important; min-height: var(--field-clear-size) !important; border-radius: 50% !important; flex-shrink: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-clear .ds-icon, .kjun-scope .ds-field-clear:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-icon, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-select-indicator, .kjun-scope .ds-select-indicator:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--field-icon-size); height: var(--field-icon-size); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-error, .kjun-scope .ds-field-error:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-top: var(--extension-form-message-gap); font-size: var(--_kjun-type-caption-size); color: var(--danger); line-height: var(--_kjun-type-caption-line); font-weight: var(--_kjun-type-caption-weight); letter-spacing: var(--_kjun-type-caption-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-form-group, .kjun-scope .ds-form-group:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-bottom: var(--extension-form-item-gap); min-width: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-form-group:last-child, .kjun-scope .ds-form-group:last-child:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-bottom: 0; }
 /* 그리드·툴바는 부모 gap을 사용하고, 일반 문서 흐름의 기존 폼만 기본 간격을 유지한다. */
-.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 {
+.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:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-bottom: 0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-menu, .kjun-scope .ds-field-menu:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   padding: var(--extension-menu-padding);
   border: var(--_kjun-border-default-width) solid var(--border-primary);
   border-radius: var(--_kjun-geometry-radius-radius12);
   background: var(--card-bg);
   box-shadow: var(--_kjun-menu-elevation);
 }
-.kjun-scope .ds-field-menu[role="menu"] { border-radius: var(--extension-menu-radius); }
-.kjun-scope .ds-field-option {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-menu[role="menu"], .kjun-scope .ds-field-menu[role="menu"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { border-radius: var(--extension-menu-radius); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option, .kjun-scope .ds-field-option:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1966,11 +1970,11 @@
   color: var(--text-primary);
   cursor: pointer;
 }
-.kjun-scope .ds-field-option:hover:not([aria-disabled="true"]), .kjun-scope .ds-field-option--highlighted:not([aria-disabled="true"]) { background: var(--bg-hover); }
-.kjun-scope .ds-field-option[aria-selected="true"] { background: var(--selected-bg); }
-.kjun-scope .ds-field-option:focus-visible { outline: var(--_kjun-state-focus-width) solid var(--focus-ring); outline-offset: var(--_kjun-state-focus-inset-offset); }
-.kjun-scope .ds-field-option[aria-disabled="true"] { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
-.kjun-scope .ds-dropdown-item {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option:hover:not([aria-disabled="true"]), .kjun-scope .ds-field-option:hover:not([aria-disabled="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option--highlighted:not([aria-disabled="true"]), .kjun-scope .ds-field-option--highlighted:not([aria-disabled="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--bg-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option[aria-selected="true"], .kjun-scope .ds-field-option[aria-selected="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--selected-bg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option:focus-visible, .kjun-scope .ds-field-option:focus-visible:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { outline: var(--_kjun-state-focus-width) solid var(--focus-ring); outline-offset: var(--_kjun-state-focus-inset-offset); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field-option[aria-disabled="true"], .kjun-scope .ds-field-option[aria-disabled="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item, .kjun-scope .ds-dropdown-item:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   gap: var(--_kjun-geometry-dimension-value8);
   min-height: var(--extension-menu-option-height);
   padding: var(--extension-menu-option-padding-y) var(--extension-menu-option-padding-x);
@@ -1980,26 +1984,26 @@
   letter-spacing: var(--_kjun-type-body-tracking);
   line-height: var(--extension-menu-option-line-height);
 }
-.kjun-scope .ds-dropdown-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-label, .kjun-scope .ds-dropdown-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
 /* Same border role and inset as the React and Native menu dividers. */
-.kjun-scope .ds-dropdown-divider { height: var(--extension-menu-divider-height); margin: var(--_kjun-geometry-dimension-value4) 0; background: var(--border-primary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-divider, .kjun-scope .ds-dropdown-divider:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { height: var(--extension-menu-divider-height); margin: var(--_kjun-geometry-dimension-value4) 0; background: var(--border-primary); }
 /* Pointer hover moves focus (DropdownItem), so only the focused item paints as current. */
-.kjun-scope .ds-dropdown-item:focus:not(:disabled):not([aria-checked="true"]) { background: var(--bg-hover); }
-.kjun-scope .ds-dropdown-item[data-variant="danger"]:focus:not(:disabled):not([aria-checked="true"]) { background: var(--danger-bg); }
-.kjun-scope .ds-dropdown-item[aria-checked="true"] { background: var(--selected-bg); }
-.kjun-scope .ds-dropdown-item:not([data-variant="danger"]) .ds-dropdown-icon { color: var(--text-secondary); }
-.kjun-scope [role="menu"]:has(.ds-dropdown-icon) .ds-dropdown-item:not(:has(.ds-dropdown-icon)) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:focus:not(:disabled):not([aria-checked="true"]), .kjun-scope .ds-dropdown-item:focus:not(:disabled):not([aria-checked="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--bg-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item[data-variant="danger"]:focus:not(:disabled):not([aria-checked="true"]), .kjun-scope .ds-dropdown-item[data-variant="danger"]:focus:not(:disabled):not([aria-checked="true"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--danger-bg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item[aria-checked="true"], .kjun-scope .ds-dropdown-item[aria-checked="true"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--selected-bg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:not([data-variant="danger"]) .ds-dropdown-icon, .kjun-scope .ds-dropdown-item:not([data-variant="danger"]):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-icon { color: var(--text-secondary); }
+.kjun-scope [role="menu"]:has(.ds-dropdown-icon) :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:not(:has(.ds-dropdown-icon)), .kjun-scope [role="menu"]:has(.ds-dropdown-icon) .ds-dropdown-item:not(:has(.ds-dropdown-icon)):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   padding-left: calc(var(--extension-menu-option-padding-x) + var(--extension-menu-icon-size) + var(--_kjun-geometry-dimension-value8));
 }
-.kjun-scope .ds-dropdown-item:focus-visible:not(:disabled) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-dropdown-item:focus-visible:not(:disabled), .kjun-scope .ds-dropdown-item:focus-visible:not(:disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: var(--_kjun-state-focus-width) solid var(--focus-ring);
   outline-offset: var(--_kjun-state-focus-inset-offset);
 }
 
-.kjun-scope .ds-choice { position: relative; display: inline-flex; align-items: center; min-height: var(--extension-choice-minimum-height); cursor: pointer; vertical-align: middle; }
-.kjun-scope .ds-choice--disabled { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
-.kjun-scope .ds-choice-label { margin-left: var(--extension-checkbox-label-gap); font-size: var(--_kjun-type-label-size); color: var(--text-primary); line-height: var(--_kjun-type-label-line); font-weight: var(--_kjun-type-label-weight); letter-spacing: var(--_kjun-type-label-tracking); }
-.kjun-scope .ds-choice-control {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice, .kjun-scope .ds-choice:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { position: relative; display: inline-flex; align-items: center; min-height: var(--extension-choice-minimum-height); cursor: pointer; vertical-align: middle; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled, .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { opacity: var(--_kjun-state-opacity-disabled); cursor: not-allowed; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-label, .kjun-scope .ds-choice-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { margin-left: var(--extension-checkbox-label-gap); font-size: var(--_kjun-type-label-size); color: var(--text-primary); line-height: var(--_kjun-type-label-line); font-weight: var(--_kjun-type-label-weight); letter-spacing: var(--_kjun-type-label-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-control, .kjun-scope .ds-choice-control:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   display: flex;
   flex-shrink: 0;
   align-items: center;
@@ -2011,34 +2015,36 @@
   background: var(--card-bg);
   transition: border-color var(--motion-control) var(--ease-out), background-color var(--motion-control) var(--ease-out);
 }
-.kjun-scope .ds-checkbox { border-radius: var(--extension-checkbox-radii-md); }
-.kjun-scope .ds-checkbox--sm { width: var(--extension-checkbox-sizes-sm); height: var(--extension-checkbox-sizes-sm); border-radius: var(--extension-checkbox-radii-sm); }
-.kjun-scope .ds-checkbox--lg { width: var(--extension-checkbox-sizes-lg); height: var(--extension-checkbox-sizes-lg); border-radius: var(--extension-checkbox-radii-lg); }
-.kjun-scope .ds-checkbox--checked { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
-.kjun-scope .ds-radio {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox, .kjun-scope .ds-checkbox:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { border-radius: var(--extension-checkbox-radii-md); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox--sm, .kjun-scope .ds-checkbox--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--extension-checkbox-sizes-sm); height: var(--extension-checkbox-sizes-sm); border-radius: var(--extension-checkbox-radii-sm); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox--lg, .kjun-scope .ds-checkbox--lg:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--extension-checkbox-sizes-lg); height: var(--extension-checkbox-sizes-lg); border-radius: var(--extension-checkbox-radii-lg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-checkbox--checked, .kjun-scope .ds-checkbox--checked:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio, .kjun-scope .ds-radio:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   width: var(--extension-radio-size);
   height: var(--extension-radio-size);
   border-width: var(--extension-radio-border-width);
   border-radius: 50%;
   border-color: var(--border-strong);
 }
-.kjun-scope .ds-radio--checked { border-color: var(--brand); }
-.kjun-scope .ds-radio-dot { width: var(--extension-radio-dot); height: var(--extension-radio-dot); border-radius: 50%; background: var(--brand); }
-.kjun-scope .ds-radio + .ds-choice-label { margin-left: var(--extension-radio-label-gap); }
-.kjun-scope .ds-choice--disabled :is(.ds-radio:not(.ds-radio--checked), .ds-checkbox:not(.ds-checkbox--checked)) { border-color: var(--border-secondary); }
-.kjun-scope .ds-choice--disabled .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--border-secondary); }
-.kjun-scope .ds-choice--disabled .ds-switch:not(.ds-switch--on) .ds-switch-thumb { background: var(--border-secondary); }
-.kjun-scope .ds-choice input:focus-visible + .ds-choice-control, .kjun-scope .ds-switch:focus-visible {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio--checked, .kjun-scope .ds-radio--checked:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { border-color: var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio-dot, .kjun-scope .ds-radio-dot:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { width: var(--extension-radio-dot); height: var(--extension-radio-dot); border-radius: 50%; background: var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio + .ds-choice-label, .kjun-scope .ds-radio:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) + .ds-choice-label { margin-left: var(--extension-radio-label-gap); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled :is(.ds-radio:not(.ds-radio--checked), .ds-checkbox:not(.ds-checkbox--checked)), .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.ds-radio:not(.ds-radio--checked), .ds-checkbox:not(.ds-checkbox--checked)) { border-color: var(--border-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled .ds-switch:not(.ds-switch--on), .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--border-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice--disabled .ds-switch:not(.ds-switch--on) .ds-switch-thumb, .kjun-scope .ds-choice--disabled:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:not(.ds-switch--on) .ds-switch-thumb { background: var(--border-secondary); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice input:focus-visible + .ds-choice-control, .kjun-scope .ds-choice:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) input:focus-visible + .ds-choice-control, .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:focus-visible, .kjun-scope .ds-switch:focus-visible:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   outline: var(--_kjun-state-focus-width) solid var(--focus-ring);
   outline-offset: var(--_kjun-state-focus-choice-offset);
 }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):hover .ds-choice-control { border-color: var(--brand); }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):hover .ds-radio { border-color: var(--brand-hover); }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):hover .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--brand); }
-.kjun-scope .ds-choice:not(.ds-choice--disabled):active .ds-radio,
-.kjun-scope .ds-choice:not(.ds-choice--disabled) input:active + .ds-radio { border-color: var(--brand-active); }
-.kjun-scope .ds-switch + .ds-choice-label { margin-left: var(--extension-switch-label-gap); }
-.kjun-scope .ds-switch {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):hover .ds-choice-control, .kjun-scope .ds-choice:not(.ds-choice--disabled):hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-control { border-color: var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):hover .ds-radio, .kjun-scope .ds-choice:not(.ds-choice--disabled):hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio { border-color: var(--brand-hover); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):hover .ds-switch:not(.ds-switch--on), .kjun-scope .ds-choice:not(.ds-choice--disabled):hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch:not(.ds-switch--on) { box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--brand); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled):active .ds-radio,
+.kjun-scope .ds-choice:not(.ds-choice--disabled):active:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-radio,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice:not(.ds-choice--disabled) input:active + .ds-radio,
+.kjun-scope .ds-choice:not(.ds-choice--disabled):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) input:active + .ds-radio { border-color: var(--brand-active); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch + .ds-choice-label, .kjun-scope .ds-switch:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) + .ds-choice-label { margin-left: var(--extension-switch-label-gap); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch, .kjun-scope .ds-switch:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   position: relative;
   flex-shrink: 0;
   --_kjun-switch-width: var(--extension-switch-widths-md);
@@ -2052,12 +2058,12 @@
   box-shadow: inset 0 0 0 var(--_kjun-border-control-width) var(--border-strong);
   transition: background-color var(--motion-control) var(--ease-out), box-shadow var(--motion-control) var(--ease-out);
 }
-.kjun-scope .ds-switch--sm { --_kjun-switch-width: var(--extension-switch-widths-sm); --_kjun-switch-height: var(--extension-switch-heights-sm); }
-.kjun-scope .ds-switch--lg { --_kjun-switch-width: var(--extension-switch-widths-lg); --_kjun-switch-height: var(--extension-switch-heights-lg); }
-.kjun-scope .ds-switch--on { background: var(--brand); box-shadow: none; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--sm, .kjun-scope .ds-switch--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { --_kjun-switch-width: var(--extension-switch-widths-sm); --_kjun-switch-height: var(--extension-switch-heights-sm); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--lg, .kjun-scope .ds-switch--lg:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { --_kjun-switch-width: var(--extension-switch-widths-lg); --_kjun-switch-height: var(--extension-switch-heights-lg); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--on, .kjun-scope .ds-switch--on:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { background: var(--brand); box-shadow: none; }
 /* The off boundary sits inside the padding, so the off thumb also clears the border width:
    both states keep the same gap between thumb and edge, and the thumb grows as it turns on. */
-.kjun-scope .ds-switch-thumb {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch-thumb, .kjun-scope .ds-switch-thumb:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   --_kjun-switch-thumb-inset: calc(var(--extension-switch-padding) + var(--_kjun-border-control-width));
   display: block;
   width: calc(var(--_kjun-switch-height) - 2 * var(--_kjun-switch-thumb-inset));
@@ -2069,7 +2075,7 @@
   transition: transform var(--motion-control) var(--ease-out), background-color var(--motion-control) var(--ease-out),
     width var(--motion-control) var(--ease-out), height var(--motion-control) var(--ease-out), margin var(--motion-control) var(--ease-out);
 }
-.kjun-scope .ds-switch--on .ds-switch-thumb {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch--on .ds-switch-thumb, .kjun-scope .ds-switch--on:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch-thumb {
   --_kjun-switch-thumb-inset: var(--extension-switch-padding);
   margin: 0;
   background: var(--on-brand);
@@ -2077,11 +2083,11 @@
 }
 
 @media (pointer: coarse) {
-  .kjun-scope .ds-choice { min-height: var(--_kjun-geometry-native-minimum-touch-target); }
+  .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice, .kjun-scope .ds-choice:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { min-height: var(--_kjun-geometry-native-minimum-touch-target); }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kjun-scope .ds-field { transition: none; }
+  .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field, .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { transition: none; }
 }
 
 
@@ -4030,7 +4036,7 @@
 .kjun-scope .price-flash-down-bg-pop { animation: price-flash-down-bg-pop var(--motion-price-background) var(--ease-out); }
 
 
-.kjun-scope .ds-price-cell, .kjun-scope .kjun-price-cell {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-price-cell, .kjun-scope .ds-price-cell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]), .kjun-scope .kjun-price-cell {
   display: inline-block;
   padding: var(--_kjun-geometry-dimension-value2) var(--_kjun-geometry-dimension-value8);
   border-radius: var(--_kjun-geometry-radius-radius9999);
@@ -4151,7 +4157,8 @@
   vertical-align: middle;
 }
 .kjun-spin,
-.ds-icon-spin {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-icon-spin,
+.ds-icon-spin:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   animation: kjun-spin var(--motion-spin) linear infinite;
 }
 @keyframes kjun-spin {
@@ -4422,7 +4429,8 @@
     transition-duration: 0.01ms !important;
   }
   .kjun-scope .kjun-input,
-  .kjun-scope .ds-field { transition: none !important; }
+  .kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-field,
+  .kjun-scope .ds-field:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { transition: none !important; }
 }
 
 .kjun-skeleton {
@@ -4838,12 +4846,14 @@
   white-space: nowrap;
   border: 0;
 }
-.kjun-scope .ds-choice[data-focus-visible] .ds-choice-control,
-.kjun-scope .ds-choice[data-focus-visible] .ds-switch {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice[data-focus-visible] .ds-choice-control,
+.kjun-scope .ds-choice[data-focus-visible]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice-control,
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-choice[data-focus-visible] .ds-switch,
+.kjun-scope .ds-choice[data-focus-visible]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch {
   outline: var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring);
   outline-offset: var(--_kjun-state-focus-choice-offset);
 }
-.kjun-scope .ds-switch {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-switch, .kjun-scope .ds-switch:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   border: 0;
 }
 .kjun-textarea {
@@ -5422,7 +5432,8 @@
 }
 /* Underlined as well as recolored: with a near-text brand color, hover would otherwise look like the current page. */
 .kjun-breadcrumb a:hover,
-.ds-breadcrumb-link:hover {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-breadcrumb-link:hover,
+.ds-breadcrumb-link:hover:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   color: var(--_kjun-color-brand);
   text-decoration: underline;
   text-underline-offset: var(--_kjun-geometry-dimension-value2);
@@ -5750,11 +5761,16 @@
 .kjun-state-actions .kjun-button > .kjun-button-label { min-width: 0; }
 
 .kjun-animated-number,
-.ds-signed-value,
-.ds-deviation,
-.ds-deviation-badge .ds-badge,
-.ds-heatmap-cell,
-.ds-progress-cell-label,
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-signed-value,
+.ds-signed-value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-deviation,
+.ds-deviation:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-deviation-badge .ds-badge,
+.ds-deviation-badge:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-badge,
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-heatmap-cell,
+.ds-heatmap-cell:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-progress-cell-label,
+.ds-progress-cell-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]),
 .kjun-signed-value,
 .kjun-deviation,
 .kjun-deviation-badge .kjun-badge,
@@ -5819,7 +5835,7 @@
   outline: none;
 }
 /* Vue's tooltip wrapper is inline-block; as a flex box it centres the target instead of seating it on the baseline. */
-.ds-deviation-badge > .ds-tooltip-wrapper {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-deviation-badge > .ds-tooltip-wrapper, .ds-deviation-badge:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) > .ds-tooltip-wrapper {
   display: flex;
 }
 /* Freshness badges are tooltip targets: focusable, with the system ring around the badge. */
@@ -6544,7 +6560,7 @@
     letter-spacing: var(--_kjun-type-body-tracking);
   }
   /* Vue's signed value carries text-xs; inherit the change line like Web .kjun-market-change .kjun-signed-value. */
-  .mobile-simple-list .mobile-simple-list__change .ds-signed-value {
+  .mobile-simple-list .mobile-simple-list__change :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-signed-value, .mobile-simple-list .mobile-simple-list__change .ds-signed-value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
     font-size: inherit;
     line-height: inherit;
     font-weight: var(--_kjun-type-label-weight);
@@ -7590,67 +7606,95 @@
 
 /* Shared financial typography. Geometry remains in the component styles. */
 .kjun-scope .kjun-kpi-hero__label,
-.kjun-scope .ds-kpi-hero__label { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__label,
+.kjun-scope .ds-kpi-hero__label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-hero__sec-label,
-.kjun-scope .ds-kpi-hero__sec-label { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__sec-label,
+.kjun-scope .ds-kpi-hero__sec-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-hero__sec-desc,
-.kjun-scope .ds-kpi-hero__sec-desc { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__sec-desc,
+.kjun-scope .ds-kpi-hero__sec-desc:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-hero__delta-desc,
-.kjun-scope .ds-kpi-hero__delta-desc { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__delta-desc,
+.kjun-scope .ds-kpi-hero__delta-desc:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-hero__value,
-.kjun-scope .ds-kpi-hero__value { font-size:var(--_kjun-type-display-lg-size); line-height:var(--_kjun-type-display-lg-line); font-weight:var(--_kjun-type-display-lg-weight); letter-spacing:var(--_kjun-type-display-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__value,
+.kjun-scope .ds-kpi-hero__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-display-lg-size); line-height:var(--_kjun-type-display-lg-line); font-weight:var(--_kjun-type-display-lg-weight); letter-spacing:var(--_kjun-type-display-lg-tracking); }
 .kjun-scope .kjun-kpi-hero__affix,
-.kjun-scope .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__affix,
+.kjun-scope .ds-kpi-hero__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
 .kjun-scope .kjun-kpi-hero__sec-value,
-.kjun-scope .ds-kpi-hero__sec-value { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__sec-value,
+.kjun-scope .ds-kpi-hero__sec-value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 .kjun-scope .kjun-kpi-hero__delta-abs,
-.kjun-scope .ds-kpi-hero__delta-abs { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__delta-abs,
+.kjun-scope .ds-kpi-hero__delta-abs:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 .kjun-scope .kjun-kpi-hero__sec-value .kjun-number-affix,
 .kjun-scope .ds-kpi-hero__sec-value .kjun-number-affix { 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-kpi-hero__delta-pct,
-.kjun-scope .ds-kpi-hero__delta-pct { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__delta-pct,
+.kjun-scope .ds-kpi-hero__delta-pct:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 .kjun-scope .kjun-kpi-row__label,
-.kjun-scope .ds-kpi-row__label { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__label,
+.kjun-scope .ds-kpi-row__label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-row__desc,
-.kjun-scope .ds-kpi-row__desc { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__desc,
+.kjun-scope .ds-kpi-row__desc:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-row__segment-label,
-.kjun-scope .ds-kpi-row__segment-label { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__segment-label,
+.kjun-scope .ds-kpi-row__segment-label:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-row__badge,
-.kjun-scope .ds-kpi-row__badge { 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); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__badge,
+.kjun-scope .ds-kpi-row__badge:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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); }
 .kjun-scope .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
 .kjun-scope .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 @media (width <= 768px) {
 .kjun-scope .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row__value { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
 .kjun-scope .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row__affix { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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-kpi-row--mobile-summary .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
 .kjun-scope .kjun-kpi-row--mobile-summary .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 .kjun-scope .kjun-kpi-row--mobile-summary .kjun-kpi-row__item--secondary .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__affix { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__item--secondary .ds-kpi-row__affix { 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-kpi-row--mobile-summary .kjun-kpi-row__item--secondary .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__value { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--mobile-summary .ds-kpi-row__item--secondary .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row--mobile-summary:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__item--secondary .ds-kpi-row__value { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 }
 @media (width <= 640px) {
 .kjun-scope .kjun-kpi-hero__value,
-.kjun-scope .ds-kpi-hero__value { font-size:var(--_kjun-type-display-md-size); line-height:var(--_kjun-type-display-md-line); font-weight:var(--_kjun-type-display-md-weight); letter-spacing:var(--_kjun-type-display-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__value,
+.kjun-scope .ds-kpi-hero__value:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-display-md-size); line-height:var(--_kjun-type-display-md-line); font-weight:var(--_kjun-type-display-md-weight); letter-spacing:var(--_kjun-type-display-md-tracking); }
 .kjun-scope .kjun-kpi-hero__affix,
-.kjun-scope .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__affix,
+.kjun-scope .ds-kpi-hero__affix:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { font-size:var(--_kjun-type-number-md-size); line-height:var(--_kjun-type-number-md-line); font-weight:var(--_kjun-type-number-md-weight); letter-spacing:var(--_kjun-type-number-md-tracking); }
 }
 .kjun-scope .kjun-kpi-hero--sm .kjun-kpi-hero__value,
-.kjun-scope .ds-kpi-hero--sm .ds-kpi-hero__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero--sm .ds-kpi-hero__value,
+.kjun-scope .ds-kpi-hero--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__value { font-size:var(--_kjun-type-display-sm-size); line-height:var(--_kjun-type-display-sm-line); font-weight:var(--_kjun-type-display-sm-weight); letter-spacing:var(--_kjun-type-display-sm-tracking); }
 .kjun-scope .kjun-kpi-hero--sm .kjun-kpi-hero__affix,
-.kjun-scope .ds-kpi-hero--sm .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero--sm .ds-kpi-hero__affix,
+.kjun-scope .ds-kpi-hero--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-hero__affix { font-size:var(--_kjun-type-number-sm-size); line-height:var(--_kjun-type-number-sm-line); font-weight:var(--_kjun-type-number-sm-weight); letter-spacing:var(--_kjun-type-number-sm-tracking); }
 .kjun-scope .kjun-kpi-row--sm .kjun-kpi-row__value,
-.kjun-scope .ds-kpi-row--sm .ds-kpi-row__value { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--sm .ds-kpi-row__value,
+.kjun-scope .ds-kpi-row--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value { font-size:var(--_kjun-type-number-lg-size); line-height:var(--_kjun-type-number-lg-line); font-weight:var(--_kjun-type-number-lg-weight); letter-spacing:var(--_kjun-type-number-lg-tracking); }
 .kjun-scope .kjun-kpi-row--sm .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row--sm .ds-kpi-row__affix { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row--sm .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row--sm:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__affix { 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-kpi-row .kjun-kpi-row__item .kjun-kpi-row__value--text,
-.kjun-scope .ds-kpi-row .ds-kpi-row__item .ds-kpi-row__value--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-"]) .ds-kpi-row .ds-kpi-row__item .ds-kpi-row__value--text,
+.kjun-scope .ds-kpi-row:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__item .ds-kpi-row__value--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 :is(.kjun-kpi-row__badge,.ds-kpi-row__badge,.kjun-kpi-hero__sec-label,.ds-kpi-hero__sec-label) { white-space:normal; overflow-wrap:anywhere; }
 
 .kjun-scope :is(.kjun-kpi-hero__sec-affix,.ds-kpi-hero__sec-affix,.kjun-number-affix,.ds-animated-number__affix) { font-size:var(--_kjun-type-caption-size); line-height:var(--_kjun-type-caption-line); }
@@ -7664,7 +7708,8 @@
 .kjun-scope .ds-kpi-hero__delta-line .kjun-number-affix { 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-kpi-row .kjun-kpi-row__value--text .kjun-kpi-row__affix,
-.kjun-scope .ds-kpi-row .ds-kpi-row__value--text .ds-kpi-row__affix { 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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row .ds-kpi-row__value--text .ds-kpi-row__affix,
+.kjun-scope .ds-kpi-row:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) .ds-kpi-row__value--text .ds-kpi-row__affix { 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 :is(.kjun-kpi-row__value--text, .ds-kpi-row__value--text) :is(.kjun-animated-number, .ds-animated-number) {
   font-family: var(--kjun-font);
   font-variant-numeric: normal;

package/package.json

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