ui-style-kit-css 2.6.1 → 2.7.1

package/styles/cyberpunk.css

@@ -264,7 +264,7 @@
   --usk-native-range-track-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .16);
   --usk-native-range-progress-background: var(--cyber-primary);
   --usk-native-range-thumb-size: 1.25rem;
-  --usk-native-range-thumb-background: var(--cyber-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--cyber-border);
   --usk-native-range-thumb-radius: .1rem;
   --usk-native-range-thumb-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .22);
@@ -427,7 +427,8 @@
 }
 [data-ui="cyberpunk"] *, [data-ui="cyberpunk"] *::before, [data-ui="cyberpunk"] *::after { box-sizing: border-box; }
 [data-ui="cyberpunk"][data-mode] { background: var(--cyber-theme-bg); background-size: var(--cyber-theme-bg-size); }
-[data-ui="cyberpunk"] a { color: var(--cyber-link); text-decoration-color: rgb(var(--cyber-primary-rgb) / 0.6); text-underline-offset: 0.18em; }
+/** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="cyberpunk"] a:where(:not(.cyber-button):not(.cyber-icon-button)) { color: var(--cyber-link); text-decoration-color: rgb(var(--cyber-primary-rgb) / 0.6); text-underline-offset: 0.18em; }
 [data-ui="cyberpunk"] ::selection { background: var(--cyber-primary); color: var(--cyber-on-primary); }
 
 .cyber-page { position: relative; min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
@@ -477,7 +478,9 @@
 /* Theme-responsive component defaults */
 .cyber-card, .cyber-panel { background: var(--cyber-card-bg); }
 .cyber-toolbar, .cyber-table-wrap { background: var(--cyber-control-bg); }
-.cyber-button:not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-warning):not(.cyber-button-ghost), .cyber-icon-button { background: var(--cyber-control-bg); }
+/** Semantic variant attributes take precedence over the legacy neutral-control fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.cyber-button:where(:not([data-ui-variant])):not(.cyber-button-primary):not(.cyber-button-secondary):not(.cyber-button-danger):not(.cyber-button-warning):not(.cyber-button-ghost):not(.cyber-button-outline-heavy), .cyber-icon-button { background: var(--cyber-control-bg); }
 .cyber-button, .cyber-icon-button, .cyber-badge, .cyber-nav-link { font-family: var(--cyber-font-control); }
 
 /* Spinner geometry follows the cyberpunk preset's clipped neon readouts. */
@@ -579,7 +582,7 @@
 .cyber-button.cyber-button-outline-heavy,
 .cyber-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--cyber-primary));
+  color: var(--usk-primary-ink, var(--cyber-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--cyber-primary);
@@ -775,7 +778,7 @@
   --usk-native-range-track-shadow: 0 0 .7rem rgb(var(--cyber-primary-rgb) / .4);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--cyber-primary), var(--cyber-accent));
   --usk-native-range-thumb-size: 1.3rem;
-  --usk-native-range-thumb-background: linear-gradient(135deg, var(--cyber-surface-strong), var(--cyber-primary));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--cyber-accent);
   --usk-native-range-thumb-radius: 28%;
   --usk-native-range-thumb-shadow: 0 0 .85rem rgb(var(--cyber-accent-rgb) / .5);
@@ -798,7 +801,8 @@
 .cyber-card, .cyber-panel { padding: 1.08rem; background: var(--cyber-card-bg); border: 2px solid var(--cyber-primary); border-radius: 0; box-shadow: inset .24rem 0 0 rgb(var(--cyber-accent-rgb) / .26), 0 0 1.2rem rgb(var(--cyber-primary-rgb) / .24); clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem); }
 .cyber-well, .cyber-inset { padding: .82rem; background: var(--cyber-control-bg); border: 1px solid var(--cyber-accent); border-radius: 0; box-shadow: inset 0 0 .8rem rgb(var(--cyber-primary-rgb) / .18); clip-path: polygon(.42rem 0, 100% 0, 100% calc(100% - .42rem), calc(100% - .42rem) 100%, 0 100%, 0 .42rem); }
 .cyber-button, .cyber-icon-button { min-height: 2.85rem; padding: .66rem 1.08rem; background: linear-gradient(135deg, rgb(var(--cyber-primary-rgb) / .2), transparent), var(--cyber-control-bg); border: 2px solid var(--cyber-primary); border-radius: 0; box-shadow: inset .2rem 0 0 rgb(var(--cyber-accent-rgb) / .38), 0 0 .75rem rgb(var(--cyber-primary-rgb) / .32); font-weight: 850; clip-path: polygon(.5rem 0, 100% 0, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, 0 100%, 0 .5rem); }
-.cyber-button:active, .cyber-button[aria-pressed="true"], .cyber-button.is-active { transform: translateY(1px); background: linear-gradient(135deg, var(--cyber-primary), var(--cyber-accent)); box-shadow: inset 0 0 .6rem rgb(var(--cyber-text-rgb) / .24); }
+/** Press feedback retains each variant's paired fill and foreground. */
+.cyber-button:active, .cyber-button[aria-pressed="true"], .cyber-button.is-active { transform: translateY(1px); box-shadow: inset 0 0 .6rem rgb(var(--cyber-text-rgb) / .24); }
 .cyber-input, .cyber-textarea, .cyber-select { min-height: 2.55rem; padding: .54rem .82rem; background: var(--cyber-control-bg); border: 1px solid var(--cyber-primary); border-radius: 0; box-shadow: inset .18rem 0 0 rgb(var(--cyber-accent-rgb) / .3); clip-path: polygon(.34rem 0, 100% 0, 100% calc(100% - .34rem), calc(100% - .34rem) 100%, 0 100%, 0 .34rem); }
 .cyber-nav, .cyber-toolbar { border: 2px solid var(--cyber-primary); border-radius: 0; box-shadow: inset 0 -.18rem 0 rgb(var(--cyber-accent-rgb) / .28); }
 .cyber-nav-link { border-radius: 0; clip-path: polygon(.35rem 0, 100% 0, calc(100% - .35rem) 100%, 0 100%); }
@@ -902,7 +906,7 @@
   --usk-native-range-track-shadow: 0 0 .45rem rgb(var(--cyber-primary-rgb) / .16);
   --usk-native-range-progress-background: var(--cyber-primary);
   --usk-native-range-thumb-size: 1.25rem;
-  --usk-native-range-thumb-background: var(--cyber-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--cyber-primary);
   --usk-native-range-thumb-radius: .08rem;
   --usk-native-range-thumb-shadow: 0 0 .55rem rgb(var(--cyber-primary-rgb) / .24);
@@ -1045,7 +1049,7 @@
 .cyber-button:hover,
 .cyber-icon-button:hover {
   border-color: var(--cyber-primary);
-  color: var(--usk-primary-ink, var(--cyber-primary));
+  color: var(--usk-primary-ink, var(--cyber-text));
   box-shadow: 0 0 .75rem rgb(var(--cyber-primary-rgb) / .2);
 }
 
@@ -1616,7 +1620,8 @@
   border-color: transparent;
   background-color: transparent;
   background-image: none;
-  color: var(--usk-primary-ink, var(--cyber-primary));
+  /** Unfilled native controls use readable surface ink rather than neon fill pigment. */
+  color: var(--usk-primary-ink, var(--cyber-text));
   box-shadow: none;
 }
 
@@ -1625,7 +1630,8 @@
   border-color: var(--cyber-danger);
   background-color: rgb(var(--cyber-danger-rgb) / .12);
   background-image: linear-gradient(135deg, rgb(var(--cyber-danger-rgb) / .16), transparent 62%);
-  color: var(--cyber-danger);
+  /** The signal tint is decorative; its label uses the contrasting surface foreground. */
+  color: var(--cyber-text);
   box-shadow: var(--cyber-template-danger-glow);
 }
 
@@ -2411,3 +2417,8 @@
   font-weight: 800;
   line-height: 1;
 }
+
+@layer ui-style-kit.cyberpunk {
+/** Console content scrolls inside its frame instead of expanding a narrow parent. */
+.cyber-console { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; margin-inline: 0; overflow-x: auto; }
+}

package/styles/data-terminal.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 0 0 9px var(--terminal-primary);
   --usk-native-range-progress-background: var(--terminal-primary);
   --usk-native-range-thumb-size: 1.1rem;
-  --usk-native-range-thumb-background: var(--terminal-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--terminal-border);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 0 0 9px var(--terminal-primary);
@@ -437,7 +437,10 @@
 /* Theme-responsive component defaults */
 .terminal-card, .terminal-panel { background: var(--terminal-card-bg); }
 .terminal-toolbar, .terminal-table-wrap { background: var(--terminal-control-bg); }
-.terminal-button:not(.terminal-button-primary):not(.terminal-button-secondary):not(.terminal-button-danger):not(.terminal-button-warning):not(.terminal-button-ghost):not(.is-active):not([aria-pressed="true"]),
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Native press state bypasses the neutral fallback just like persistent pressed hooks. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.terminal-button:where(:not([data-ui-variant])):not(.terminal-button-primary):not(.terminal-button-secondary):not(.terminal-button-danger):not(.terminal-button-warning):not(.terminal-button-ghost):not(.terminal-button-outline-heavy):not(.is-active):not([aria-pressed="true"]):not(:active),
 .terminal-icon-button:not(.is-active):not([aria-pressed="true"]) { background: var(--terminal-control-bg); }
 .terminal-button, .terminal-icon-button, .terminal-badge, .terminal-nav-link { font-family: var(--terminal-font-control); }
 
@@ -630,7 +633,7 @@
 .terminal-button.terminal-button-outline-heavy,
 .terminal-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--terminal-primary));
+  color: var(--usk-primary-ink, var(--terminal-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--terminal-primary);
@@ -873,7 +876,7 @@
   --usk-native-range-track-shadow: none;
   --usk-native-range-progress-background: linear-gradient(90deg, var(--terminal-success), var(--terminal-warning), var(--terminal-danger));
   --usk-native-range-thumb-size: .9rem;
-  --usk-native-range-thumb-background: var(--terminal-text);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--terminal-surface);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 0 0 0 1px var(--terminal-primary);
@@ -1691,7 +1694,8 @@
   --usk-native-range-track-shadow: none;
   --usk-native-range-progress-background: linear-gradient(var(--terminal-primary), var(--terminal-primary));
   --usk-native-range-thumb-size: .75rem;
-  --usk-native-range-thumb-background: var(--terminal-surface);
+  /** Paired signal hues keep the compact terminal thumb visible. */
+  --usk-native-range-thumb-background: linear-gradient(135deg, var(--terminal-primary), var(--terminal-accent));
   --usk-native-range-thumb-border: 2px solid var(--terminal-text);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: none;

package/styles/editorial-luxe.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: none;
   --usk-native-range-progress-background: var(--luxe-primary);
   --usk-native-range-thumb-size: .85rem;
-  --usk-native-range-thumb-background: var(--luxe-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--luxe-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: none;
@@ -437,7 +437,9 @@
 /* Theme-responsive component defaults */
 .luxe-card, .luxe-panel { background: var(--luxe-card-bg); }
 .luxe-toolbar, .luxe-table-wrap { background: var(--luxe-control-bg); }
-.luxe-button:not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-warning):not(.luxe-button-ghost), .luxe-icon-button { background: var(--luxe-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.luxe-button:where(:not([data-ui-variant])):not(.luxe-button-primary):not(.luxe-button-secondary):not(.luxe-button-danger):not(.luxe-button-warning):not(.luxe-button-ghost):not(.luxe-button-outline-heavy), .luxe-icon-button { background: var(--luxe-control-bg); }
 .luxe-button, .luxe-icon-button, .luxe-badge, .luxe-nav-link { font-family: var(--luxe-font-control); }
 
 
@@ -629,7 +631,7 @@
 .luxe-button.luxe-button-outline-heavy,
 .luxe-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--luxe-primary));
+  color: var(--usk-primary-ink, var(--luxe-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--luxe-primary);
@@ -779,7 +781,8 @@
 .luxe-nav-link[aria-current="page"], .luxe-nav-link.is-active { color: var(--luxe-text); background: transparent; box-shadow: inset 0 -2px 0 var(--luxe-primary); }
 .luxe-input, .luxe-textarea, .luxe-select { border-radius: var(--luxe-radius-sm); background: transparent; }
 .luxe-card-media, .luxe-media-scrim, .luxe-feature-strip, .luxe-callout-bar { border-radius: var(--luxe-radius-md); }
-.luxe-icon-medallion { background: var(--luxe-surface-strong); color: var(--usk-primary-ink, var(--luxe-primary)); border: 1px solid var(--luxe-primary); box-shadow: none; }
+/** The unfilled medallion uses surface-readable link ink in native palettes. */
+.luxe-icon-medallion { background: var(--luxe-surface-strong); color: var(--usk-primary-ink, var(--luxe-link)); border: 1px solid var(--luxe-primary); box-shadow: none; }
 .luxe-badge-seal { border-style: double; border-width: 4px; background: transparent; font-family: var(--luxe-font-display); }
 .luxe-feature-item { align-items: start; }
 .luxe-card-accent-edge { border-inline-start-width: 1px; box-shadow: inset .2rem 0 0 rgb(var(--luxe-primary-rgb) / .2); }
@@ -862,7 +865,7 @@
   --usk-native-range-track-shadow: 0 1px 0 var(--luxe-surface-strong);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--luxe-success), var(--luxe-warning));
   --usk-native-range-thumb-size: .82rem;
-  --usk-native-range-thumb-background: var(--luxe-warning);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--luxe-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 0 0 2px var(--luxe-surface-strong);
@@ -1071,6 +1074,7 @@
   --usk-native-control-padding-inline: .75rem;
   --usk-native-range-track-background: var(--luxe-border);
   --usk-native-range-progress-background: var(--luxe-border);
+  /** Brass keeps the editorial thumb visible against its inked rule. */
   --usk-native-range-thumb-background: var(--luxe-brass-light);
   --usk-native-range-thumb-border: 1px solid var(--luxe-brass);
   --usk-native-progress-value-background: var(--luxe-primary);

package/styles/industrial-utility.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 2px 2px 0 rgb(0 0 0 / .3);
   --usk-native-range-progress-background: var(--utility-primary);
   --usk-native-range-thumb-size: 1.25rem;
-  --usk-native-range-thumb-background: var(--utility-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--utility-border);
   --usk-native-range-thumb-radius: .08rem;
   --usk-native-range-thumb-shadow: 2px 2px 0 rgb(0 0 0 / .3);
@@ -437,7 +437,9 @@
 /* Theme-responsive component defaults */
 .utility-card, .utility-panel { background: var(--utility-card-bg); }
 .utility-toolbar, .utility-table-wrap { background: var(--utility-control-bg); }
-.utility-button:not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-warning):not(.utility-button-ghost):not(.utility-button-guarded), .utility-icon-button { background: var(--utility-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.utility-button:where(:not([data-ui-variant])):not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-warning):not(.utility-button-ghost):not(.utility-button-outline-heavy):not(.utility-button-guarded), .utility-icon-button { background: var(--utility-control-bg); }
 .utility-button, .utility-icon-button, .utility-badge, .utility-nav-link { font-family: var(--utility-font-control); }
 
 
@@ -629,7 +631,7 @@
 .utility-button.utility-button-outline-heavy,
 .utility-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--utility-primary));
+  color: var(--usk-primary-ink, var(--utility-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--utility-primary);
@@ -865,7 +867,7 @@
   --usk-native-range-track-shadow: inset 0 2px 3px rgb(var(--utility-text-rgb) / .3);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--utility-success), var(--utility-primary));
   --usk-native-range-thumb-size: 1.26rem;
-  --usk-native-range-thumb-background: linear-gradient(90deg, var(--utility-surface), var(--utility-surface-strong), var(--utility-surface));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px outset var(--utility-border);
   --usk-native-range-thumb-radius: .1rem;
   --usk-native-range-thumb-shadow: 1px 2px 0 rgb(var(--utility-text-rgb) / .3);
@@ -943,7 +945,8 @@
 @media print {
   [data-ui="industrial-utility"] { background: #fff !important; color: #000 !important; }
   [data-ui="industrial-utility"] * { box-shadow: none !important; text-shadow: none !important; }
-  [data-ui="industrial-utility"] a { color: #000 !important; text-decoration: underline; }
+  /** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="industrial-utility"] a { color: #000 !important; text-decoration: underline; }
 }
 }
 
@@ -1095,15 +1098,15 @@
   outline-offset: 2px;
 }
 
-[data-ui="industrial-utility"] a {
+[data-ui="industrial-utility"] a:where(:not(.utility-button):not(.utility-icon-button):not(.utility-nav-link)) {
   color: var(--utility-material-lamp-blue);
   font-weight: 700;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
 }
 
-[data-ui="industrial-utility"] a:hover,
-[data-ui="industrial-utility"] a.is-hover {
+[data-ui="industrial-utility"] a:where(:not(.utility-button):not(.utility-icon-button):not(.utility-nav-link)):hover,
+[data-ui="industrial-utility"] a:where(:not(.utility-button):not(.utility-icon-button):not(.utility-nav-link)).is-hover {
   color: var(--utility-material-warning);
 }
 
@@ -2300,6 +2303,12 @@ div.utility-dialog { display: block; }
   animation: utility-spin .8s steps(8, end) infinite;
 }
 
+/** Native standalone rotors use the same base size as the current classed rotor. */
+[data-ui="industrial-utility"] :where(.loading-spinner, [data-loading-spinner]) {
+  inline-size: 20px;
+  block-size: 20px;
+}
+
 .utility-button.is-loading::before,
 .utility-button[aria-busy="true"]:not(.is-loading)::after {
   inline-size: 14px;

package/styles/maximalist.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: .22rem .22rem 0 var(--max-ink);
   --usk-native-range-progress-background: var(--max-warning);
   --usk-native-range-thumb-size: 1.62rem;
-  --usk-native-range-thumb-background: var(--max-warning);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 3px solid var(--max-ink);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: .18rem .18rem 0 rgb(var(--max-secondary-rgb) / .8);
@@ -440,7 +440,8 @@
 .max-button:hover, .max-icon-button:hover { transform: translate(-2px, -2px); border-color: var(--max-ink); box-shadow: .4rem .4rem 0 rgb(var(--max-secondary-rgb) / .76); }
 .max-button:active, .max-icon-button:active, .max-button[aria-pressed="true"], .max-icon-button[aria-pressed="true"], .max-button.is-active, .max-icon-button.is-active { transform: translate(.12rem, .12rem); box-shadow: .12rem .12rem 0 var(--max-ink); }
 .max-button-primary { background: var(--max-poster-fill); color: var(--max-on-primary); border-color: var(--max-ink); }
-.max-button-primary:hover { background: linear-gradient(110deg, var(--max-primary-hover), var(--max-danger), var(--max-accent)); border-color: var(--max-ink); }
+/** A single foreground can span only gradient stops from its paired color role. */
+.max-button-primary:hover { background: linear-gradient(110deg, var(--max-primary-hover), var(--max-primary)); border-color: var(--max-ink); }
 .max-button-secondary { background: var(--max-secondary); color: var(--max-on-secondary); border-color: var(--max-secondary); }
 .max-button-secondary:hover { background: var(--max-secondary-hover); border-color: var(--max-secondary-hover); }
 .max-button-danger { background: var(--max-danger); color: var(--max-on-danger); border-color: var(--max-ink); }
@@ -451,7 +452,9 @@
 /* Theme-responsive component defaults */
 .max-card, .max-panel { background: var(--max-card-bg); }
 .max-toolbar, .max-table-wrap { background: var(--max-control-bg); }
-.max-button:not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-warning):not(.max-button-ghost):not(.max-button-outline-heavy), .max-icon-button { background: var(--max-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.max-button:where(:not([data-ui-variant])):not(.max-button-primary):not(.max-button-secondary):not(.max-button-danger):not(.max-button-warning):not(.max-button-ghost):not(.max-button-outline-heavy), .max-icon-button { background: var(--max-control-bg); }
 .max-button, .max-icon-button, .max-badge, .max-nav-link { font-family: var(--max-font-control); }
 
 
@@ -865,7 +868,7 @@
   --usk-native-range-track-shadow: .2rem .2rem 0 var(--max-ink);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--max-success), var(--max-warning), var(--max-danger), var(--max-accent));
   --usk-native-range-thumb-size: 1.78rem;
-  --usk-native-range-thumb-background: conic-gradient(var(--max-warning), var(--max-primary), var(--max-accent), var(--max-warning));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 3px solid var(--max-ink);
   --usk-native-range-thumb-radius: 42% 58% 46% 54%;
   --usk-native-range-thumb-shadow: .16rem .16rem 0 var(--max-ink), .28rem .28rem 0 rgb(var(--max-secondary-rgb) / .62);
@@ -1080,7 +1083,7 @@
   --usk-native-range-track-radius: 0;
   --usk-native-range-track-shadow: 3px 3px 0 var(--max-ink);
   --usk-native-range-progress-background: var(--max-warning);
-  --usk-native-range-thumb-background: var(--max-accent);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 3px solid var(--max-ink);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 2px 2px 0 var(--max-ink);
@@ -1371,6 +1374,8 @@
   border-width: .12em;
   flex-shrink: 0;
   clip-path: none;
+  /* A busy wedge follows its button ink; the standalone loader keeps accent paint. */
+  background: conic-gradient(currentColor 0 28%, transparent 28% 100%);
 }
 
 .max-nav {

package/styles/minimal-saas.css

@@ -254,7 +254,7 @@
   --usk-native-range-track-shadow: none;
   --usk-native-range-progress-background: var(--saas-primary);
   --usk-native-range-thumb-size: .95rem;
-  --usk-native-range-thumb-background: var(--saas-primary);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--saas-surface-strong);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 .2rem .5rem rgb(var(--saas-text-rgb) / .12);
@@ -430,7 +430,10 @@
   font: inherit; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
   transition: color var(--saas-transition-fast), background var(--saas-transition-fast), border-color var(--saas-transition-fast), box-shadow var(--saas-transition-fast), transform var(--saas-transition-fast);
 }
-.saas-button:hover, .saas-icon-button:hover { transform: none; border-color: rgb(var(--saas-primary-rgb) / .48); background: var(--saas-surface-soft); }
+/** Neutral hover paint must not replace a filled variant's paired background. */
+.saas-button:hover, .saas-icon-button:hover { transform: none; border-color: rgb(var(--saas-primary-rgb) / .48); }
+.saas-button:where(:not(.saas-button-primary):not(.saas-button-danger):not(.saas-button-warning)):hover,
+.saas-icon-button:hover { background: var(--saas-surface-soft); color: var(--saas-text); }
 .saas-button:active, .saas-icon-button:active, .saas-button[aria-pressed="true"], .saas-icon-button[aria-pressed="true"], .saas-button.is-active, .saas-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgb(var(--saas-text-rgb) / .12); }
 .saas-button-primary { background: linear-gradient(135deg, var(--saas-primary), var(--saas-brand-2)); color: var(--saas-on-primary); border-color: var(--saas-primary); }
 .saas-button-primary:hover { background: linear-gradient(135deg, var(--saas-brand-2), var(--saas-primary)); border-color: var(--saas-primary-hover); }
@@ -444,7 +447,9 @@
 /* Theme-responsive component defaults */
 .saas-card, .saas-panel { background: var(--saas-card-bg); }
 .saas-toolbar, .saas-table-wrap { background: var(--saas-control-bg); }
-.saas-button:not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-warning):not(.saas-button-ghost), .saas-icon-button { background: var(--saas-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.saas-button:where(:not([data-ui-variant])):not(.saas-button-primary):not(.saas-button-secondary):not(.saas-button-danger):not(.saas-button-warning):not(.saas-button-ghost):not(.saas-button-outline-heavy), .saas-icon-button { background: var(--saas-control-bg); }
 .saas-button, .saas-icon-button, .saas-badge, .saas-nav-link { font-family: var(--saas-font-control); }
 
 
@@ -651,7 +656,7 @@
 .saas-button.saas-button-outline-heavy,
 .saas-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--saas-primary));
+  color: var(--usk-primary-ink, var(--saas-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--saas-primary);

package/styles/native-elements.css

@@ -405,8 +405,11 @@
 [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
 
 [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
-  background-color: var(--usk-native-choice-checked-background);
-  background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
+  /* The final background layer accepts both solid and gradient preset fills. */
+  background:
+    linear-gradient(45deg, transparent 38%, var(--usk-native-choice-mark-color) 38% 62%, transparent 62%) 24% 62% / 32% 36% no-repeat,
+    linear-gradient(135deg, transparent 40%, var(--usk-native-choice-mark-color) 40% 60%, transparent 60%) 68% 43% / 52% 58% no-repeat,
+    var(--usk-native-choice-checked-background);
 }
 
 [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
@@ -826,3 +829,30 @@
   }
 }
 }
+
+/** Choice-state paint follows preset geometry, including presets with material surface tokens. */
+@layer ui-style-kit.clean_defaults {
+/** Disabled choices remain recognizable without relying on faded opacity alone. */
+[data-ui][data-mode] :where(input[type="radio"]:disabled) {
+  background: var(--usk-native-bg);
+  border-color: var(--usk-native-text-muted);
+  border-style: dashed;
+  opacity: .7;
+}
+@supports (color: color-mix(in srgb, black, white)) {
+  [data-ui][data-mode] :where(input[type="radio"]:disabled) {
+    background: color-mix(in srgb, var(--usk-native-text-muted) 24%, var(--usk-native-bg));
+  }
+}
+[data-ui][data-mode] :where(input[type="radio"]:disabled:checked) {
+  background: radial-gradient(circle, var(--usk-native-text-muted) 0 31%, transparent 34%), var(--usk-native-bg);
+}
+
+
+@media (forced-colors: active) {
+  [data-ui][data-mode] :where(input[type="radio"]:disabled) {
+    border-color: GrayText;
+    background: Canvas;
+  }
+}
+}

package/styles/neo-noir.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 0 0 12px var(--noir-primary);
   --usk-native-range-progress-background: var(--noir-primary);
   --usk-native-range-thumb-size: 1.35rem;
-  --usk-native-range-thumb-background: var(--noir-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--noir-border);
   --usk-native-range-thumb-radius: 44% 56%;
   --usk-native-range-thumb-shadow: 0 0 12px var(--noir-primary);
@@ -437,7 +437,8 @@
 /* Theme-responsive component defaults */
 .noir-card, .noir-panel { background: var(--noir-card-bg); }
 .noir-toolbar, .noir-table-wrap { background: var(--noir-control-bg); }
-.noir-button:where(:not(.noir-button-primary):not(.noir-button-secondary):not(.noir-button-danger):not(.noir-button-warning):not(.noir-button-ghost)), .noir-icon-button { background: var(--noir-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.noir-button:where(:not(.noir-button-primary):not(.noir-button-secondary):not(.noir-button-danger):not(.noir-button-warning):not(.noir-button-ghost):not(.noir-button-outline-heavy)), .noir-icon-button { background: var(--noir-control-bg); }
 .noir-button, .noir-icon-button, .noir-badge, .noir-nav-link { font-family: var(--noir-font-control); }
 
 
@@ -629,17 +630,20 @@
 .noir-button.noir-button-outline-heavy,
 .noir-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--noir-primary));
+  color: var(--usk-primary-ink, var(--noir-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--noir-primary);
   box-shadow: none;
 }
+/** Outlined hover paints the skewed face together with its on-primary label. */
 .noir-button.noir-button-outline-heavy:hover,
 .noir-button-outline-heavy:hover {
-  background: var(--noir-primary);
+  background: transparent;
   color: var(--noir-on-primary);
   border-color: var(--noir-primary-hover);
+  --noir-action-fill: var(--noir-primary);
+  --noir-action-line: var(--noir-primary-hover);
 }
 
 .noir-badge-seal {
@@ -778,7 +782,8 @@
 .noir-input, .noir-textarea, .noir-select { background: rgb(var(--noir-surface-strong-rgb) / .68); }
 .noir-card-media { border-color: rgb(var(--noir-primary-rgb) / .25); }
 .noir-media-scrim > :where(figcaption, [data-media-caption]) { background: linear-gradient(to top, rgb(0 0 0 / .96), rgb(var(--noir-primary-rgb) / .18) 54%, transparent); }
-.noir-icon-medallion { background: transparent; color: var(--usk-primary-ink, var(--noir-primary)); border-color: var(--noir-primary); box-shadow: 0 0 1.2rem rgb(var(--noir-primary-rgb) / .18); }
+/** The outlined tile uses link ink rather than its luminous border fill as text. */
+.noir-icon-medallion { background: transparent; color: var(--usk-primary-ink, var(--noir-link)); border-color: var(--noir-primary); box-shadow: 0 0 1.2rem rgb(var(--noir-primary-rgb) / .18); }
 .noir-badge-seal { background: transparent; border-color: var(--noir-primary); }
 .noir-card-accent-edge { border-inline-start-color: var(--noir-primary); }
 [data-ui="neo-noir"][data-mode="contrast"] :where(.noir-surface, .noir-card, .noir-panel, .noir-toolbar, .noir-table-wrap, .noir-icon-medallion) { box-shadow: none; text-shadow: none; }
@@ -866,7 +871,7 @@
   --usk-native-range-track-shadow: 0 0 .62rem rgb(var(--noir-warning-rgb) / .34);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--noir-warning), var(--noir-primary));
   --usk-native-range-thumb-size: 1.26rem;
-  --usk-native-range-thumb-background: linear-gradient(135deg, var(--noir-warning), var(--noir-surface-strong));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--noir-warning);
   --usk-native-range-thumb-radius: 0 .18rem 0 .18rem;
   --usk-native-range-thumb-shadow: -.2rem 0 .62rem rgb(var(--noir-focus-rgb) / .42);
@@ -1030,7 +1035,7 @@
   --usk-native-checkbox-radius: 0; --usk-native-radio-radius: 50%;
   --usk-native-range-track-background: var(--noir-border);
   --usk-native-range-track-shadow: none; --usk-native-range-track-radius: 0;
-  --usk-native-range-thumb-background: var(--noir-primary);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-shadow: none;
   --usk-native-progress-track-background: var(--noir-surface-soft);
   --usk-native-progress-track-shadow: none; --usk-native-progress-track-radius: 0;
@@ -1068,7 +1073,8 @@
 }
 .noir-button::before { content: ""; position: absolute; inset: 0 8px; z-index: -1; border: 1px solid var(--noir-action-line); background: var(--noir-action-fill); transform: skewX(-16deg); }
 .noir-button-primary { --noir-action-fill: var(--noir-primary); --noir-action-line: var(--noir-warning); color: var(--noir-on-primary); }
-.noir-button-secondary { --noir-action-line: var(--noir-secondary); }
+/** The skewed face must paint the same secondary fill as its paired foreground. */
+.noir-button-secondary { --noir-action-fill: var(--noir-secondary); --noir-action-line: var(--noir-secondary); }
 .noir-button-outline, .noir-button-ghost { --noir-action-fill: var(--noir-surface); color: var(--noir-text); }
 .noir-button-danger { --noir-action-line: var(--noir-danger); color: var(--noir-danger); }
 .noir-button:hover, .noir-button[data-noir-state="hover"] { background: transparent; color: var(--noir-text); box-shadow: none; transform: none; filter: none; }
@@ -1298,7 +1304,10 @@
 [data-ui="neo-noir"][data-mode="contrast"] { --noir-grain: none; --noir-corner: none; --noir-border-alpha: 1; }
 /** Warning actions inherit preset geometry and use the paired semantic warning colors. */
 [data-ui="neo-noir"][data-mode] .noir-button.noir-button-warning {
-  background: var(--noir-warning);
+  /** The skewed face owns the warning fill; a rectangular host fill sits behind it. */
+  --noir-action-fill: var(--noir-warning);
+  --noir-action-line: var(--noir-warning);
+  background: transparent;
   color: var(--noir-on-warning);
   border-color: var(--noir-warning);
   text-shadow: none;

package/styles/neumorphism.css

@@ -253,7 +253,7 @@
   --usk-native-range-track-shadow: 4px 4px 8px rgb(0 0 0 / .22);
   --usk-native-range-progress-background: var(--neo-primary);
   --usk-native-range-thumb-size: 1.45rem;
-  --usk-native-range-thumb-background: var(--neo-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--neo-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 4px 4px 8px rgb(0 0 0 / .22);
@@ -441,7 +441,9 @@
 /* Theme-responsive component defaults */
 .neo-card, .neo-panel { background: var(--neo-card-bg); }
 .neo-toolbar, .neo-table-wrap { background: var(--neo-control-bg); }
-.neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost), .neo-icon-button { background: var(--neo-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.neo-button:where(:not([data-ui-variant])):not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost):not(.neo-button-outline-heavy), .neo-icon-button { background: var(--neo-control-bg); }
 .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link { font-family: var(--neo-font-control); }
 
 
@@ -519,7 +521,8 @@
 .neo-table { width: 100%; border-collapse: collapse; }
 .neo-table th, .neo-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--neo-border); }
 .neo-table th { color: var(--neo-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--neo-primary-rgb) / .08); }
-.neo-table td { color: var(--neo-text-muted); }
+/** Table values use surface text because the inset material can reduce muted-ink contrast. */
+.neo-table td { color: var(--neo-text); }
 .neo-table tr:hover td { background: rgb(var(--neo-primary-rgb) / .045); }
 
 /* =========================================================
@@ -640,7 +643,7 @@
   --usk-native-range-track-radius: var(--neo-radius-pill);
   --usk-native-range-track-shadow: var(--neo-inset-shadow-sm);
   --usk-native-range-thumb-size: 1.65rem;
-  --usk-native-range-thumb-background: var(--neo-material-raised);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--neo-material-edge);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: var(--neo-button-shadow);
@@ -800,7 +803,8 @@
 .neo-button-primary,
 .neo-button-secondary,
 .neo-button-danger {
-  background-image: linear-gradient(155deg, rgb(255 255 255 / .28), transparent 52%, rgb(0 0 0 / .08));
+  /** Keep the molded highlight at the edges, outside the central label lane. */
+  background-image: linear-gradient(155deg, rgb(255 255 255 / .28), transparent 20%, transparent 80%, rgb(0 0 0 / .08));
 }
 
 .neo-button-primary {
@@ -841,8 +845,10 @@
   box-shadow: inset .28rem .28rem .58rem rgb(0 0 0 / .34), inset -.22rem -.22rem .5rem rgb(255 255 255 / .22);
 }
 
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+
 .neo-button-ghost,
-.neo-button:not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost),
+.neo-button:where(:not([data-ui-variant])):not(.neo-button-primary):not(.neo-button-secondary):not(.neo-button-danger):not(.neo-button-warning):not(.neo-button-ghost):not(.neo-button-outline-heavy),
 .neo-icon-button {
   background-color: var(--neo-material-raised);
   background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
@@ -862,7 +868,7 @@
 .neo-button-outline-heavy {
   background-color: var(--neo-material-raised);
   background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);
-  color: var(--usk-primary-ink, var(--neo-primary));
+  color: var(--usk-primary-ink, var(--neo-text));
   border: 1px solid var(--neo-material-edge);
   border-radius: var(--neo-radius-md);
   box-shadow: var(--neo-button-shadow);

package/styles/organic-modern.css

@@ -252,7 +252,7 @@
   --usk-native-range-track-shadow: 0 3px 8px rgb(0 0 0 / .18);
   --usk-native-range-progress-background: var(--organic-primary);
   --usk-native-range-thumb-size: 1.45rem;
-  --usk-native-range-thumb-background: var(--organic-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--organic-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 3px 8px rgb(0 0 0 / .18);
@@ -630,7 +630,7 @@
 .organic-button.organic-button-outline-heavy,
 .organic-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--organic-primary));
+  color: var(--usk-primary-ink, var(--organic-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--organic-primary);
@@ -885,7 +885,7 @@
   --usk-native-range-track-shadow: none;
   --usk-native-range-progress-background: linear-gradient(90deg, var(--organic-primary), rgb(var(--organic-primary-rgb) / .72));
   --usk-native-range-thumb-size: 1.15rem;
-  --usk-native-range-thumb-background: var(--organic-material-bg);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--organic-hairline);
   --usk-native-range-thumb-radius: 48% 52% 44% 56%;
   --usk-native-range-thumb-shadow: var(--organic-quiet-shadow);
@@ -1044,7 +1044,7 @@
   --usk-native-range-track-background: var(--organic-surface-soft);
   --usk-native-range-track-radius: 99px;
   --usk-native-range-track-size: 5px;
-  --usk-native-range-thumb-background: var(--organic-primary);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-border: 0;
   --usk-native-range-progress-background: var(--organic-primary);