ui-style-kit-css 2.0.3 → 2.1.0

package/styles/native-elements.css

@@ -34,8 +34,16 @@
   --usk-native-border-width: 1px;
   --usk-native-field-gap: .5rem;
   --usk-native-panel-padding: 1rem;
+  --usk-native-control-min-block-size: 2.75rem;
   --usk-native-control-padding-block: .72rem;
   --usk-native-control-padding-inline: .95rem;
+  --usk-native-subcontrol-padding-block: .55rem;
+  --usk-native-subcontrol-padding-inline: .8rem;
+  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
+  --usk-native-track-fill: var(--usk-native-primary);
+  --usk-native-thumb: var(--usk-native-surface-strong);
+  --usk-native-thumb-border: var(--usk-native-primary);
+  --usk-native-indicator: var(--usk-native-primary);
   --usk-native-shadow: none;
   --usk-native-shadow-md: var(--usk-native-shadow);
   --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -49,6 +57,12 @@
   text-wrap: balance;
 }
 
+[data-ui][data-theme][data-mode] :where(hgroup) {
+  display: grid;
+  gap: .35rem;
+  margin-block: 0 1rem;
+}
+
 [data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
 [data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
 [data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
@@ -148,6 +162,12 @@
   font-size: .9rem;
 }
 
+[data-ui][data-theme][data-mode] :where(form) {
+  display: grid;
+  gap: var(--usk-native-field-gap);
+  min-inline-size: 0;
+}
+
 [data-ui][data-theme][data-mode] :where(fieldset) {
   display: grid;
   gap: .9rem;
@@ -184,7 +204,7 @@
 
 [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
   width: 100%;
-  min-height: 2.75rem;
+  min-block-size: var(--usk-native-control-min-block-size);
   padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
   color: var(--usk-native-text);
   background: var(--usk-native-control-bg);
@@ -193,6 +213,16 @@
   font: inherit;
 }
 
+[data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
+  color-scheme: inherit;
+  accent-color: var(--usk-native-primary);
+}
+
+[data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
+  color: var(--usk-native-text-muted);
+  opacity: .78;
+}
+
 [data-ui][data-theme][data-mode] :where(textarea) {
   min-height: 7rem;
   resize: vertical;
@@ -201,7 +231,7 @@
 [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
 
 [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
-  min-height: 2.75rem;
+  min-block-size: var(--usk-native-control-min-block-size);
   padding: .7rem 1rem;
   color: var(--usk-native-on-primary);
   background: var(--usk-native-primary);
@@ -218,16 +248,53 @@
 }
 
 [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
-  inline-size: 1.1rem;
-  block-size: 1.1rem;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
   accent-color: var(--usk-native-primary);
 }
 
 [data-ui][data-theme][data-mode] :where(input[type="range"]) {
+  -webkit-appearance: none;
+  appearance: none;
   width: 100%;
+  min-block-size: 1.5rem;
+  background: transparent;
   accent-color: var(--usk-native-primary);
 }
 
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
+  block-size: .45rem;
+  background: var(--usk-native-track);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-track {
+  block-size: .45rem;
+  background: var(--usk-native-track);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+  margin-block-start: -.38rem;
+  background: var(--usk-native-thumb);
+  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
+  border-radius: 999px;
+  box-shadow: var(--usk-native-shadow);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-thumb {
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+  background: var(--usk-native-thumb);
+  border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
+  border-radius: 999px;
+  box-shadow: var(--usk-native-shadow);
+}
+
 [data-ui][data-theme][data-mode] :where(input[type="color"]) {
   inline-size: 3rem;
   block-size: 2.4rem;
@@ -237,11 +304,27 @@
   border-radius: var(--usk-native-radius-sm);
 }
 
+[data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch {
+  border: 0;
+  border-radius: calc(var(--usk-native-radius-sm) / 1.5);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="color"])::-moz-color-swatch {
+  border: 0;
+  border-radius: calc(var(--usk-native-radius-sm) / 1.5);
+}
+
 [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
 
-[data-ui][data-theme][data-mode] :where(input[type="file"]::file-selector-button) {
+/* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
+[data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
   margin-inline-end: .75rem;
-  padding: .55rem .8rem;
+  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
   color: var(--usk-native-on-primary);
   background: var(--usk-native-primary);
   border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -250,15 +333,63 @@
   cursor: pointer;
 }
 
-[data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
-  opacity: .55;
+[data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
+  background: var(--usk-native-primary-hover);
+  border-color: var(--usk-native-primary-hover);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
+  box-shadow: var(--usk-native-focus-ring);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="file"]:active)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
+  filter: brightness(.96);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
+[data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
+  color: var(--usk-native-text-muted);
+  background: var(--usk-native-surface-soft);
+  border-color: var(--usk-native-border);
   cursor: not-allowed;
 }
 
-[data-ui][data-theme][data-mode] :where(input:invalid, textarea:invalid, select:invalid, [aria-invalid="true"]) {
+[data-ui][data-theme][data-mode] :where(input:read-only, textarea:read-only) {
+  background: var(--usk-native-surface-soft);
+}
+
+[data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
+  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
+  border-color: var(--usk-native-success);
+}
+
+[data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
   border-color: var(--usk-native-danger);
 }
 
+[data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
+  accent-color: var(--usk-native-warning);
+}
+
+[data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
+  filter: brightness(.96);
+}
+
+[data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
+  color: var(--usk-native-text-muted);
+  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
+  border-color: var(--usk-native-border);
+  box-shadow: none;
+  opacity: .55;
+  cursor: not-allowed;
+}
+
 [data-ui][data-theme][data-mode] :where(table) {
   width: 100%;
   margin: 1rem 0;
@@ -314,7 +445,7 @@
   box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
 }
 
-[data-ui][data-theme][data-mode] :where(dialog::backdrop) { background: rgb(0 0 0 / .62); }
+[data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
 
 [data-ui][data-theme][data-mode] :where(progress, meter) {
   width: 100%;
@@ -322,6 +453,32 @@
   accent-color: var(--usk-native-primary);
 }
 
+[data-ui][data-theme][data-mode] :where(progress, meter)::-webkit-progress-bar,
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-bar {
+  background: var(--usk-native-track);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(progress)::-webkit-progress-value,
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-optimum-value {
+  background: var(--usk-native-track-fill);
+  border-radius: inherit;
+}
+
+[data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
+[data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
+  background: var(--usk-native-track-fill);
+  border-radius: 999px;
+}
+
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
+  background: var(--usk-native-warning);
+}
+
+[data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
+  background: var(--usk-native-danger);
+}
+
 [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
   color: var(--usk-native-text);
 }
@@ -347,6 +504,8 @@
 
 [data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
 [data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
+[data-ui][data-theme][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
+[data-ui][data-theme][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
 [data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
 [data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
 [data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
@@ -354,6 +513,30 @@
 [data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
 [data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
 [data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
+[data-ui][data-theme][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
+[data-ui][data-theme][data-mode] :where(datalist) { display: none; }
+
+[data-ui][data-theme][data-mode] :where(summary, li)::marker {
+  color: var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
+  opacity: .78;
+  accent-color: var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
+  accent-color: var(--usk-native-indicator);
+}
+
+[data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
+[data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
+  opacity: .72;
+}
+
+[data-ui][data-theme][data-mode] :where(select)::picker-icon {
+  color: var(--usk-native-indicator);
+}
 
 [data-ui][data-theme][data-mode] :where(:focus-visible) {
   outline: 3px solid var(--usk-native-focus);
@@ -371,4 +554,24 @@
 [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
 [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
 [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
+[data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
+[data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
+[data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
+  [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
+    transition-duration: 1ms !important;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
+    forced-color-adjust: auto;
+  }
+
+  [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
+    border-color: Mark;
+  }
+}
 }

package/styles/neumorphism.css

@@ -13,6 +13,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.neumorphism {
 :root {

package/styles/retro-glass.css

@@ -14,6 +14,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.retro_glass {
 :root {
@@ -276,11 +277,11 @@
 .rg-inset, .rg-well { background: linear-gradient(180deg, rgb(0 0 0 / .08), rgb(255 255 255 / .04)), var(--rg-surface-soft); border: 1px solid rgb(var(--rg-border-rgb) / .36); border-radius: var(--rg-radius-lg); box-shadow: inset 0 8px 22px rgb(0 0 0 / .16); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); } .rg-well { padding: var(--rg-space-5); }
 
 .rg-button, .rg-icon-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--rg-space-2); min-height: 2.85rem; padding: .75rem 1.1rem; background: linear-gradient(135deg, rgb(255 255 255 / .24), rgb(255 255 255 / .04)), var(--rg-surface); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .56); border-top-color: rgb(255 255 255 / .32); border-radius: var(--rg-radius-md); box-shadow: var(--rg-shadow-sm); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); font: inherit; font-family: var(--rg-font-display); font-weight: 900; letter-spacing: .08em; cursor: pointer; text-decoration: none; transition: transform var(--rg-transition-fast), box-shadow var(--rg-transition-fast), background var(--rg-transition-fast), border-color var(--rg-transition-fast); }
-.rg-button:hover, .rg-icon-button:hover { transform: translateY(-2px); border-color: rgb(var(--rg-primary-rgb) / .68); box-shadow: var(--rg-shadow-md), 0 0 24px var(--rg-glow-primary); } .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"] { transform: translateY(1px); box-shadow: inset 0 8px 18px rgb(0 0 0 / .18), 0 0 18px var(--rg-glow-primary); } .rg-button-primary { background: linear-gradient(135deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04)), var(--rg-primary); color: var(--rg-on-primary); border-color: rgb(var(--rg-primary-rgb) / .72); } .rg-button-primary:hover { background: var(--rg-primary-hover); } .rg-button-secondary { background: linear-gradient(135deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04)), var(--rg-secondary); color: var(--rg-on-secondary); border-color: rgb(var(--rg-secondary-rgb) / .72); } .rg-button-secondary:hover { background: var(--rg-secondary-hover); } .rg-button-danger { background: var(--rg-danger); color: #fff; } .rg-icon-button { width: 2.85rem; padding: 0; }
+.rg-button:hover, .rg-icon-button:hover { transform: translateY(-2px); border-color: rgb(var(--rg-primary-rgb) / .68); box-shadow: var(--rg-shadow-md), 0 0 24px var(--rg-glow-primary); } .rg-button:active, .rg-icon-button:active, .rg-button.is-active, .rg-button[aria-pressed="true"] { transform: translateY(1px); box-shadow: inset 0 8px 18px rgb(0 0 0 / .18), 0 0 18px var(--rg-glow-primary); } .rg-button-primary { background: linear-gradient(135deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04)), var(--rg-primary); color: var(--rg-on-primary); border-color: rgb(var(--rg-primary-rgb) / .72); } .rg-button-primary:hover { background: var(--rg-primary-hover); } .rg-button-secondary { background: linear-gradient(135deg, rgb(255 255 255 / .22), rgb(255 255 255 / .04)), var(--rg-secondary); color: var(--rg-on-secondary); border-color: rgb(var(--rg-secondary-rgb) / .72); } .rg-button-secondary:hover { background: var(--rg-secondary-hover); } .rg-button-danger { background: var(--rg-danger); color: var(--rg-on-danger); } .rg-icon-button { width: 2.85rem; padding: 0; }
 
 .rg-field { display: flex; flex-direction: column; gap: var(--rg-space-2); } .rg-label { font-family: var(--rg-font-heading); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: .8rem; } .rg-input, .rg-textarea, .rg-select { width: 100%; min-height: 2.9rem; padding: .8rem 1rem; background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(0 0 0 / .08)), var(--rg-surface-soft); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .44); border-radius: var(--rg-radius-md); box-shadow: inset 0 8px 18px rgb(0 0 0 / .14); font: inherit; outline: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .rg-textarea { min-height: 8rem; resize: vertical; } .rg-input:focus, .rg-textarea:focus, .rg-select:focus { border-color: var(--rg-focus); box-shadow: inset 0 8px 18px rgb(0 0 0 / .14), 0 0 0 3px rgb(var(--rg-focus-rgb) / .24), 0 0 26px rgb(var(--rg-focus-rgb) / .22); } .rg-help-text { color: var(--rg-text-muted); font-size: .9rem; }
 
-.rg-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .35rem .75rem; background: linear-gradient(135deg, rgb(255 255 255 / .2), rgb(255 255 255 / .04)), var(--rg-surface); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .5); border-radius: var(--rg-radius-pill); box-shadow: var(--rg-shadow-sm); font-size: .78rem; font-weight: 900; letter-spacing: .08em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .rg-badge-primary { background: var(--rg-primary); color: var(--rg-on-primary); } .rg-badge-secondary { background: var(--rg-secondary); color: var(--rg-on-secondary); } .rg-badge-success { background: var(--rg-success); color: #fff; } .rg-badge-warning { background: var(--rg-warning); color: #111; } .rg-badge-danger { background: var(--rg-danger); color: #fff; }
+.rg-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .35rem .75rem; background: linear-gradient(135deg, rgb(255 255 255 / .2), rgb(255 255 255 / .04)), var(--rg-surface); color: var(--rg-text); border: 1px solid rgb(var(--rg-border-rgb) / .5); border-radius: var(--rg-radius-pill); box-shadow: var(--rg-shadow-sm); font-size: .78rem; font-weight: 900; letter-spacing: .08em; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .rg-badge-primary { background: var(--rg-primary); color: var(--rg-on-primary); } .rg-badge-secondary { background: var(--rg-secondary); color: var(--rg-on-secondary); } .rg-badge-success { background: var(--rg-success); color: var(--rg-on-success); } .rg-badge-warning { background: var(--rg-warning); color: var(--rg-on-warning); } .rg-badge-danger { background: var(--rg-danger); color: var(--rg-on-danger); }
 .rg-nav { display: flex; flex-wrap: wrap; gap: var(--rg-space-2); padding: var(--rg-space-2); background: linear-gradient(135deg, rgb(255 255 255 / .18), rgb(255 255 255 / .04)), var(--rg-surface); border: 1px solid var(--rg-border); border-radius: var(--rg-radius-xl); box-shadow: var(--rg-shadow-md), 0 0 24px var(--rg-glow-primary); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } .rg-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: .65rem 1rem; color: var(--rg-text-muted); border: 1px solid transparent; border-radius: var(--rg-radius-pill); text-decoration: none; font-weight: 900; letter-spacing: .08em; } .rg-nav-link:hover { color: var(--rg-text); background: rgb(255 255 255 / .1); border-color: rgb(var(--rg-primary-rgb) / .36); } .rg-nav-link.is-active, .rg-nav-link[aria-current="page"] { background: var(--rg-primary); color: var(--rg-on-primary); box-shadow: 0 0 22px var(--rg-glow-primary); }
 /* Tooltips use compact contrast surfaces that stay readable across theme modes. */
 .rg-tooltip, [data-ui="retro-glass"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .62rem .88rem; background: linear-gradient(135deg, rgb(255 255 255 / .28), rgb(255 255 255 / .06)), var(--rg-surface); color: var(--rg-text); border: 1px solid rgb(255 255 255 / .34); border-radius: 38% 62% 48% 52% / 52% 42% 58% 48%; box-shadow: var(--rg-shadow-md), 0 0 1.25rem var(--rg-glow-primary); -webkit-backdrop-filter: blur(14px) saturate(145%); backdrop-filter: blur(14px) saturate(145%); font-size: .82rem; font-weight: 900; line-height: 1.3; letter-spacing: .04em; }

package/styles/retrofuturism.css

@@ -13,6 +13,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.retrofuturism {
 :root {

package/styles/tactile.css

@@ -13,6 +13,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.tactile {
 :root {

package/styles/y2k.css

@@ -14,6 +14,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.y2k {
 :root {
@@ -275,11 +276,11 @@
 
 .y2k-button, .y2k-icon-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--y2k-space-2); min-height: 2.85rem; padding: .75rem 1.15rem; background: linear-gradient(180deg, rgb(255 255 255 / .42), rgb(255 255 255 / .08)), var(--y2k-surface-strong); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .42); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-sm), inset 0 1px 0 rgb(255 255 255 / .5); font: inherit; font-family: var(--y2k-font-display); font-weight: 900; letter-spacing: .02em; cursor: pointer; text-decoration: none; transition: transform var(--y2k-transition-fast), box-shadow var(--y2k-transition-fast), background var(--y2k-transition-fast); }
 .y2k-button:hover, .y2k-icon-button:hover { transform: translateY(-2px); box-shadow: var(--y2k-shadow-md), 0 0 26px var(--y2k-glow-accent); } .y2k-button:active, .y2k-icon-button:active, .y2k-button.is-active, .y2k-button[aria-pressed="true"] { transform: translateY(1px) scale(.99); box-shadow: inset 0 8px 16px rgb(0 0 0 / .14); }
-.y2k-button-primary { background: linear-gradient(180deg, rgb(255 255 255 / .46), rgb(255 255 255 / .08)), var(--y2k-primary); color: var(--y2k-on-primary); } .y2k-button-primary:hover { background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / .1)), var(--y2k-primary-hover); } .y2k-button-secondary { background: linear-gradient(180deg, rgb(255 255 255 / .46), rgb(255 255 255 / .08)), var(--y2k-secondary); color: var(--y2k-on-secondary); } .y2k-button-secondary:hover { background: var(--y2k-secondary-hover); } .y2k-button-danger { background: var(--y2k-danger); color: #fff; } .y2k-icon-button { width: 2.85rem; padding: 0; }
+.y2k-button-primary { background: linear-gradient(180deg, rgb(255 255 255 / .46), rgb(255 255 255 / .08)), var(--y2k-primary); color: var(--y2k-on-primary); } .y2k-button-primary:hover { background: linear-gradient(180deg, rgb(255 255 255 / .5), rgb(255 255 255 / .1)), var(--y2k-primary-hover); } .y2k-button-secondary { background: linear-gradient(180deg, rgb(255 255 255 / .46), rgb(255 255 255 / .08)), var(--y2k-secondary); color: var(--y2k-on-secondary); } .y2k-button-secondary:hover { background: var(--y2k-secondary-hover); } .y2k-button-danger { background: var(--y2k-danger); color: var(--y2k-on-danger); } .y2k-icon-button { width: 2.85rem; padding: 0; }
 
 .y2k-field { display: flex; flex-direction: column; gap: var(--y2k-space-2); } .y2k-label { font-weight: 900; letter-spacing: .04em; } .y2k-input, .y2k-textarea, .y2k-select { width: 100%; min-height: 2.9rem; padding: .8rem 1rem; background: linear-gradient(180deg, rgb(255 255 255 / .22), rgb(0 0 0 / .05)), var(--y2k-surface-soft); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .38); border-radius: var(--y2k-radius-lg); box-shadow: inset 0 6px 14px rgb(0 0 0 / .12); font: inherit; outline: none; } .y2k-textarea { min-height: 8rem; resize: vertical; } .y2k-input:focus, .y2k-textarea:focus, .y2k-select:focus { border-color: var(--y2k-focus); box-shadow: inset 0 6px 14px rgb(0 0 0 / .12), 0 0 0 3px rgb(var(--y2k-focus-rgb) / .25), 0 0 24px rgb(var(--y2k-focus-rgb) / .22); } .y2k-help-text { color: var(--y2k-text-muted); font-size: .9rem; }
 
-.y2k-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .35rem .8rem; background: linear-gradient(180deg, rgb(255 255 255 / .4), rgb(255 255 255 / .08)), var(--y2k-surface-strong); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .42); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-sm); font-size: .78rem; font-weight: 900; } .y2k-badge-primary { background: var(--y2k-primary); color: var(--y2k-on-primary); } .y2k-badge-secondary { background: var(--y2k-secondary); color: var(--y2k-on-secondary); } .y2k-badge-success { background: var(--y2k-success); color: #fff; } .y2k-badge-warning { background: var(--y2k-warning); color: #111; } .y2k-badge-danger { background: var(--y2k-danger); color: #fff; }
+.y2k-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: .35rem .8rem; background: linear-gradient(180deg, rgb(255 255 255 / .4), rgb(255 255 255 / .08)), var(--y2k-surface-strong); color: var(--y2k-text); border: 1px solid rgb(255 255 255 / .42); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-sm); font-size: .78rem; font-weight: 900; } .y2k-badge-primary { background: var(--y2k-primary); color: var(--y2k-on-primary); } .y2k-badge-secondary { background: var(--y2k-secondary); color: var(--y2k-on-secondary); } .y2k-badge-success { background: var(--y2k-success); color: var(--y2k-on-success); } .y2k-badge-warning { background: var(--y2k-warning); color: var(--y2k-on-warning); } .y2k-badge-danger { background: var(--y2k-danger); color: var(--y2k-on-danger); }
 .y2k-nav { display: flex; flex-wrap: wrap; gap: var(--y2k-space-2); padding: var(--y2k-space-2); background: linear-gradient(180deg, rgb(255 255 255 / .38), rgb(255 255 255 / .08)), var(--y2k-surface); border: 1px solid rgb(255 255 255 / .42); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-md); } .y2k-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: .65rem 1rem; color: var(--y2k-text-muted); border-radius: var(--y2k-radius-pill); text-decoration: none; font-weight: 900; } .y2k-nav-link:hover { color: var(--y2k-text); background: rgb(255 255 255 / .16); } .y2k-nav-link.is-active, .y2k-nav-link[aria-current="page"] { background: var(--y2k-primary); color: var(--y2k-on-primary); box-shadow: 0 0 20px var(--y2k-glow-primary); }
 /* Tooltips use compact contrast surfaces that stay readable across theme modes. */
 .y2k-tooltip, [data-ui="y2k"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .62rem .9rem; background: radial-gradient(circle at 28% 18%, rgb(255 255 255 / .76), transparent 26%), linear-gradient(135deg, var(--y2k-primary), var(--y2k-secondary)); color: var(--y2k-on-primary); border: 1px solid rgb(255 255 255 / .54); border-radius: var(--y2k-radius-pill); box-shadow: var(--y2k-shadow-md), 0 0 1.1rem var(--y2k-glow-primary); font-size: .82rem; font-weight: 900; line-height: 1.3; }