@kjun-ui/native 0.4.1 → 0.4.2

package/dist/styles.css

@@ -4918,16 +4918,16 @@
   cursor: not-allowed;
 }
 /* Narrow groups scroll; the clipped edge fades so a cut option reads as more content. Vue keeps its ds- root class. */
-:is(.kjun-button-group, .ds-button-group) { scrollbar-width: none; }
-:is(.kjun-button-group, .ds-button-group)[data-overflow="end"] {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-button-group, .ds-button-group), :is(.kjun-button-group, .ds-button-group):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { scrollbar-width: none; }
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-button-group, .ds-button-group)[data-overflow="end"], :is(.kjun-button-group, .ds-button-group)[data-overflow="end"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   -webkit-mask-image: linear-gradient(to right, currentColor calc(100% - var(--extension-scroll-fade-width)), transparent);
   mask-image: linear-gradient(to right, currentColor calc(100% - var(--extension-scroll-fade-width)), transparent);
 }
-:is(.kjun-button-group, .ds-button-group)[data-overflow="start"] {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-button-group, .ds-button-group)[data-overflow="start"], :is(.kjun-button-group, .ds-button-group)[data-overflow="start"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   -webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--extension-scroll-fade-width));
   mask-image: linear-gradient(to right, transparent, currentColor var(--extension-scroll-fade-width));
 }
-:is(.kjun-button-group, .ds-button-group)[data-overflow="both"] {
+:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-button-group, .ds-button-group)[data-overflow="both"], :is(.kjun-button-group, .ds-button-group)[data-overflow="both"]:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) {
   -webkit-mask-image: linear-gradient(to right, transparent, currentColor var(--extension-scroll-fade-width), currentColor calc(100% - var(--extension-scroll-fade-width)), transparent);
   mask-image: linear-gradient(to right, transparent, currentColor var(--extension-scroll-fade-width), currentColor calc(100% - var(--extension-scroll-fade-width)), transparent);
 }
@@ -7293,11 +7293,11 @@
 .kjun-chip button:hover{background:var(--_kjun-color-hover)}
 .kjun-chip[data-disabled=true]{opacity:var(--_kjun-state-opacity-disabled)}
 /* Links and page buttons use the system ring instead of the browser default; Vue Breadcrumb and Pagination use their own ds- classes. */
-.kjun-scope :is(.kjun-list-main,.kjun-bottom-navigation a,.kjun-chip button,.kjun-breadcrumb a,.ds-breadcrumb-link,.kjun-external-link,.ds-pagination-button):focus-visible{outline:var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring);outline-offset:var(--_kjun-state-focus-offset)}
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-list-main,.kjun-bottom-navigation a,.kjun-chip button,.kjun-breadcrumb a,.ds-breadcrumb-link,.kjun-external-link,.ds-pagination-button):focus-visible,.kjun-scope :is(.kjun-list-main,.kjun-bottom-navigation a,.kjun-chip button,.kjun-breadcrumb a,.ds-breadcrumb-link,.kjun-external-link,.ds-pagination-button):focus-visible:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]){outline:var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring);outline-offset:var(--_kjun-state-focus-offset)}
 /* Kept out of the :is() above: its :not() would raise that whole rule over the inset overrides below. */
 .kjun-scope .kjun-pagination button:not(.kjun-select-trigger):focus-visible{outline:var(--_kjun-state-focus-width) solid var(--_kjun-color-focus-ring);outline-offset:var(--_kjun-state-focus-offset)}
 /* Inline text links round the ring so it does not box the glyphs. */
-.kjun-scope :is(.kjun-breadcrumb a,.ds-breadcrumb-link,.kjun-external-link):focus-visible{border-radius:var(--_kjun-geometry-radius-radius4)}
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-breadcrumb a,.ds-breadcrumb-link,.kjun-external-link):focus-visible,.kjun-scope :is(.kjun-breadcrumb a,.ds-breadcrumb-link,.kjun-external-link):focus-visible:where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]){border-radius:var(--_kjun-geometry-radius-radius4)}
 /* Draw the removal ring inside its circle so it stays within the chip outline and clear of the label. */
 .kjun-scope .kjun-chip button:focus-visible{outline-offset:var(--_kjun-state-focus-inset-offset)}
 /* Bottom bars meet the screen edges, so their items draw the ring inside, like tabs. */
@@ -7695,14 +7695,14 @@
 .kjun-scope .kjun-kpi-row .kjun-kpi-row__item .kjun-kpi-row__value--text,
 .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 :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-kpi-row__badge,.ds-kpi-row__badge,.kjun-kpi-hero__sec-label,.ds-kpi-hero__sec-label),.kjun-scope :is(.kjun-kpi-row__badge,.ds-kpi-row__badge,.kjun-kpi-hero__sec-label,.ds-kpi-hero__sec-label):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { 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); }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-kpi-hero__sec-affix,.ds-kpi-hero__sec-affix,.kjun-number-affix,.ds-animated-number__affix),.kjun-scope :is(.kjun-kpi-hero__sec-affix,.ds-kpi-hero__sec-affix,.kjun-number-affix,.ds-animated-number__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); }
 
-.kjun-scope :is(.kjun-kpi-hero,.ds-kpi-hero,.kjun-kpi-row,.ds-kpi-row) { min-width:0; overflow-wrap:anywhere; }
-.kjun-scope :is(.kjun-kpi-hero__value,.ds-kpi-hero__value,.kjun-kpi-hero__sec-value,.ds-kpi-hero__sec-value,.kjun-kpi-row__value,.ds-kpi-row__value) { min-width:0; overflow-wrap:anywhere; }
-.kjun-scope :is(.kjun-kpi-hero__secondary,.ds-kpi-hero__secondary) { min-width:0; }
-.kjun-scope :is(.kjun-badge,.ds-badge) { max-width:100%; min-width:0; overflow-wrap:anywhere; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-kpi-hero,.ds-kpi-hero,.kjun-kpi-row,.ds-kpi-row),.kjun-scope :is(.kjun-kpi-hero,.ds-kpi-hero,.kjun-kpi-row,.ds-kpi-row):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { min-width:0; overflow-wrap:anywhere; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-kpi-hero__value,.ds-kpi-hero__value,.kjun-kpi-hero__sec-value,.ds-kpi-hero__sec-value,.kjun-kpi-row__value,.ds-kpi-row__value),.kjun-scope :is(.kjun-kpi-hero__value,.ds-kpi-hero__value,.kjun-kpi-hero__sec-value,.ds-kpi-hero__sec-value,.kjun-kpi-row__value,.ds-kpi-row__value):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { min-width:0; overflow-wrap:anywhere; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-kpi-hero__secondary,.ds-kpi-hero__secondary),.kjun-scope :is(.kjun-kpi-hero__secondary,.ds-kpi-hero__secondary):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { min-width:0; }
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-badge,.ds-badge),.kjun-scope :is(.kjun-badge,.ds-badge):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) { max-width:100%; min-width:0; overflow-wrap:anywhere; }
 
 .kjun-scope .kjun-kpi-hero__delta-line .kjun-number-affix,
 .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); }
@@ -7710,7 +7710,7 @@
 .kjun-scope .kjun-kpi-row .kjun-kpi-row__value--text .kjun-kpi-row__affix,
 .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) {
+.kjun-scope :where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :is(.kjun-kpi-row__value--text, .ds-kpi-row__value--text) :is(.kjun-animated-number, .ds-animated-number), .kjun-scope :is(.kjun-kpi-row__value--text, .ds-kpi-row__value--text):where([class*="kjun-"]:not(.kjun-scope), .kjun-scope[class*=" kjun-"]) :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.1",
+  "version": "0.4.2",
   "license": "MIT",
   "homepage": "https://ui.kjun.dev",
   "repository": {
@@ -47,8 +47,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@kjun-ui/tokens": "0.4.1",
-    "@kjun-ui/icons": "0.4.1"
+    "@kjun-ui/tokens": "0.4.2",
+    "@kjun-ui/icons": "0.4.2"
   },
   "peerDependencies": {
     "react": "^19.2.3",