ui-style-kit-css 2.6.0 → 2.7.0

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);
@@ -778,7 +778,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 +867,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 +1031,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 +1069,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; }

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,8 @@
 /* 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. */
+.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), .neo-icon-button { background: var(--neo-control-bg); }
 .neo-button, .neo-icon-button, .neo-badge, .neo-nav-link { font-family: var(--neo-font-control); }
 
 
@@ -640,7 +641,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);
@@ -842,7 +843,7 @@
 }
 
 .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),
 .neo-icon-button {
   background-color: var(--neo-material-raised);
   background-image: linear-gradient(145deg, var(--neo-material-top-light), transparent 52%);

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);
@@ -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);

package/styles/paper-editorial.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 2px 2px 0 rgb(0 0 0 / .16);
   --usk-native-range-progress-background: var(--paper-primary);
   --usk-native-range-thumb-size: 1.15rem;
-  --usk-native-range-thumb-background: var(--paper-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--paper-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 2px 2px 0 rgb(0 0 0 / .16);
@@ -437,7 +437,8 @@
 /* Theme-responsive component defaults */
 .paper-card, .paper-panel { background: var(--paper-card-bg); }
 .paper-toolbar, .paper-table-wrap { background: var(--paper-control-bg); }
-.paper-button:not(.paper-button-primary):not(.paper-button-secondary):not(.paper-button-danger):not(.paper-button-warning):not(.paper-button-ghost), .paper-icon-button { background: var(--paper-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.paper-button:where(:not([data-ui-variant])):not(.paper-button-primary):not(.paper-button-secondary):not(.paper-button-danger):not(.paper-button-warning):not(.paper-button-ghost), .paper-icon-button { background: var(--paper-control-bg); }
 .paper-button, .paper-icon-button, .paper-badge, .paper-nav-link { font-family: var(--paper-font-control); }
 
 
@@ -863,7 +864,7 @@
   --usk-native-range-track-shadow: 0 1px 0 rgb(var(--paper-text-rgb) / .22);
   --usk-native-range-progress-background: var(--paper-primary);
   --usk-native-range-thumb-size: 1rem;
-  --usk-native-range-thumb-background: var(--paper-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--paper-primary);
   --usk-native-range-thumb-radius: .02rem;
   --usk-native-range-thumb-shadow: .08rem .08rem 0 rgb(var(--paper-text-rgb) / .28);
@@ -1699,6 +1700,41 @@ dialog.paper-dialog:not([open]) { display: none; }
 .paper-switch input:checked + .paper-switch-track .paper-switch-thumb { background: var(--paper-sheet-on-blue); }
 .paper-switch input:has(+ .paper-switch-track) { position: absolute; opacity: 0; pointer-events: none; }
 .paper-switch input:not(:has(+ .paper-switch-track)) { pointer-events: auto; }
+/** Message symbols have their own lane, centered against the complete text block. */
+.paper-alert {
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: .25rem .5rem;
+  padding-inline-start: 2.75rem;
+}
+.paper-alert::before {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: .75rem;
+  display: grid;
+  place-items: center;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  min-inline-size: 0;
+  min-block-size: 0;
+  margin: 0;
+  padding: 0;
+  font: 700 1.25rem/1 "Segoe UI Symbol", Arial, sans-serif;
+  transform: translateY(-50%);
+}
+.paper-alert > :is(p, strong, span, div) {
+  min-inline-size: 0;
+  width: auto;
+  margin: 0;
+}
+.paper-alert:has(> button) { grid-template-columns: minmax(0, 1fr) auto; }
+.paper-alert > button {
+  align-self: center;
+  margin: 0;
+}
+
 .paper-spinner, .paper-loading-spinner, [data-ui="paper-editorial"] :where(.ui-spinner,.loading-spinner,[data-loading-spinner]) {
   inline-size: 24px; block-size: 24px; min-width: 24px; padding: 0; border: 2px solid var(--paper-sheet-rule-soft); border-right-color: var(--paper-sheet-blue); border-radius: 50%; background: none; box-shadow: none; clip-path: none; animation: paper-sheet-spin .75s linear infinite;
 }

package/styles/retro-glass.css

@@ -290,7 +290,7 @@
   --usk-native-range-track-shadow: inset 0 1px rgb(255 255 255 / .55);
   --usk-native-range-progress-background: var(--rg-primary);
   --usk-native-range-thumb-size: 1.35rem;
-  --usk-native-range-thumb-background: var(--rg-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--rg-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: inset 0 1px rgb(255 255 255 / .55);
@@ -484,7 +484,8 @@
 /* Theme-responsive component defaults */
 .rg-card, .rg-panel { background: var(--rg-card-bg); }
 .rg-toolbar, .rg-table-wrap { background: var(--rg-control-bg); }
-.rg-button:not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-warning):not(.rg-button-ghost), .rg-icon-button { background: var(--rg-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.rg-button:where(:not([data-ui-variant])):not(.rg-button-primary):not(.rg-button-secondary):not(.rg-button-danger):not(.rg-button-warning):not(.rg-button-ghost), .rg-icon-button { background: var(--rg-control-bg); }
 .rg-button, .rg-icon-button, .rg-badge, .rg-nav-link { font-family: var(--rg-font-control); }
 
 /** All loader APIs share a complete circular track with one rotating accent. */
@@ -806,7 +807,7 @@
   --usk-native-range-track-shadow: inset 0 2px 4px rgb(var(--rg-text-rgb) / .22);
   --usk-native-range-progress-background: linear-gradient(180deg, var(--rg-primary-hover), var(--rg-primary));
   --usk-native-range-thumb-size: 1.2rem;
-  --usk-native-range-thumb-background: radial-gradient(circle at 42% 32%, var(--rg-glass-highlight), transparent 28%), var(--rg-control-material);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--rg-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: inset 0 1px 0 var(--rg-surface-strong), 0 2px 4px rgb(var(--rg-text-rgb) / .28);
@@ -1185,3 +1186,8 @@
   font-weight: 800;
   line-height: 1;
 }
+
+@layer ui-style-kit.retro_glass {
+/** Console content scrolls inside its frame instead of expanding a narrow parent. */
+.rg-console { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; margin-inline: 0; overflow-x: auto; }
+}

package/styles/retrofuturism.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 0 0 10px var(--retro-primary);
   --usk-native-range-progress-background: var(--retro-primary);
   --usk-native-range-thumb-size: 1.55rem;
-  --usk-native-range-thumb-background: var(--retro-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--retro-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 0 10px var(--retro-primary);
@@ -438,7 +438,8 @@
 /* Theme-responsive component defaults */
 .retro-card, .retro-panel { background: var(--retro-card-bg); }
 .retro-toolbar, .retro-table-wrap { background: var(--retro-control-bg); }
-.retro-button:not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-warning):not(.retro-button-ghost), .retro-icon-button { background: var(--retro-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.retro-button:where(:not([data-ui-variant])):not(.retro-button-primary):not(.retro-button-secondary):not(.retro-button-danger):not(.retro-button-warning):not(.retro-button-ghost), .retro-icon-button { background: var(--retro-control-bg); }
 .retro-button, .retro-icon-button, .retro-badge, .retro-nav-link { font-family: var(--retro-font-control); }
 
 
@@ -920,7 +921,7 @@
   --usk-native-range-track-shadow: var(--retro-recess-shadow);
   --usk-native-range-progress-background: var(--retro-calibration-track);
   --usk-native-range-thumb-size: 1.25rem;
-  --usk-native-range-thumb-background: var(--retro-metal-rim);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 3px double var(--retro-metal-edge);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: var(--retro-control-shadow);
@@ -1316,9 +1317,10 @@
 }
 
 .retro-icon-medallion {
-  background: var(--retro-metal-rim);
+  /* Keep chrome on the rim and give the central glyph a paired, stable surface. */
+  background: linear-gradient(var(--retro-surface), var(--retro-surface)) padding-box, var(--retro-metal-rim) border-box;
   color: var(--retro-text);
-  border: 3px double var(--retro-metal-edge);
+  border: 3px double transparent;
   box-shadow: var(--retro-control-shadow);
 }
 

package/styles/tactile.css

@@ -257,7 +257,7 @@
   --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
   --usk-native-range-progress-background: var(--tactile-action-solid);
   --usk-native-range-thumb-size: 1.55rem;
-  --usk-native-range-thumb-background: var(--tactile-thumb-bg);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
   --usk-native-range-thumb-radius: .22rem;
   --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
@@ -467,7 +467,8 @@
 /* Theme-responsive component defaults */
 .tactile-card, .tactile-panel { background: var(--tactile-card-bg); }
 .tactile-toolbar, .tactile-table-wrap { background: var(--tactile-card-bg); }
-.tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-warning):not(.tactile-button-ghost), .tactile-icon-button { background: var(--tactile-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.tactile-button:where(:not([data-ui-variant])):not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-warning):not(.tactile-button-ghost), .tactile-icon-button { background: var(--tactile-control-bg); }
 .tactile-button, .tactile-icon-button, .tactile-badge, .tactile-nav-link { font-family: var(--tactile-font-control); }
 
 
@@ -1059,7 +1060,14 @@
 
 /* Busy indicators preserve the bevel and pressed-depth cues of tactile controls. */
 .tactile-button[aria-busy="true"]::after, .tactile-icon-button[aria-busy="true"]::after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
-  border: .12em solid currentColor; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / .35), transparent 48%); box-shadow: inset .1em .1em .18em rgb(0 0 0 / .3), inset -.08em -.08em .15em rgb(255 255 255 / .32), 0 .08em .16em rgb(0 0 0 / .22); clip-path: circle(50%); animation: tactile-spin .88s cubic-bezier(.2, .8, .2, 1) infinite;
+  border: .14em solid currentColor;
+  border-block-start-color: transparent;
+  border-inline-start-color: transparent;
+  border-radius: 50%;
+  background: none;
+  box-shadow: 0 .08em .16em rgb(0 0 0 / .22);
+  clip-path: none;
+  animation: tactile-spin .88s linear infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1361,7 +1369,7 @@
   --usk-native-range-track-radius: .16rem;
   --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
   --usk-native-range-thumb-size: 1.35rem;
-  --usk-native-range-thumb-background: var(--tactile-thumb-bg);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
   --usk-native-range-thumb-radius: .16rem;
   --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
@@ -1557,7 +1565,8 @@
 
 .tactile-button-ghost {
   background: transparent;
-  color: var(--usk-primary-ink, var(--tactile-primary));
+  /* Unfilled controls and their busy arcs need surface ink, not a copper fill. */
+  color: var(--usk-primary-ink, var(--tactile-link));
   border-color: transparent;
   box-shadow: none;
 }
@@ -1804,7 +1813,8 @@
 .tactile-icon-medallion,
 .tactile-badge-seal {
   background: var(--tactile-sidebar-bg);
-  color: var(--tactile-brass);
+  /* The theme may invert this material; its paired ink follows that inversion. */
+  color: var(--tactile-sidebar-fg);
   border-color: rgb(var(--tactile-keyline-rgb) / .82);
   box-shadow: var(--tactile-button-shadow);
 }

package/styles/technical-blueprint.css

@@ -250,7 +250,8 @@
   --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
   --usk-native-range-thumb-size: 1.02rem;
-  --usk-native-range-thumb-background: var(--blueprint-surface);
+  /** A split marker stays colored against the ruled blueprint track. */
+  --usk-native-range-thumb-background: linear-gradient(135deg, var(--blueprint-primary) 0 55%, var(--blueprint-surface) 55%);
   --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);
@@ -367,7 +368,7 @@
   --usk-native-range-track-shadow: 0 0 0 1px var(--blueprint-primary);
   --usk-native-range-progress-background: var(--blueprint-primary);
   --usk-native-range-thumb-size: 1.2rem;
-  --usk-native-range-thumb-background: var(--blueprint-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--blueprint-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 0 0 1px var(--blueprint-primary);
@@ -554,7 +555,8 @@
 /* Theme-responsive component defaults */
 .blueprint-card, .blueprint-panel { background: var(--blueprint-card-bg); }
 .blueprint-toolbar, .blueprint-table-wrap { background: var(--blueprint-control-bg); }
-.blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning):not(.blueprint-button-ghost), .blueprint-icon-button { background: var(--blueprint-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.blueprint-button:where(:not([data-ui-variant])):not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning):not(.blueprint-button-ghost), .blueprint-icon-button { background: var(--blueprint-control-bg); }
 .blueprint-button, .blueprint-icon-button, .blueprint-badge, .blueprint-nav-link { font-family: var(--blueprint-font-control); }
 
 
@@ -890,7 +892,7 @@
 .blueprint-surface, .blueprint-card, .blueprint-panel, .blueprint-toolbar, .blueprint-table-wrap { border-radius: 0; box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .12); }
 .blueprint-card, .blueprint-panel, .blueprint-toolbar { background-image: linear-gradient(90deg, transparent calc(100% - .55rem), rgb(var(--blueprint-primary-rgb) / .3) calc(100% - .55rem), rgb(var(--blueprint-primary-rgb) / .3) calc(100% - .48rem), transparent calc(100% - .48rem)); }
 .blueprint-button, .blueprint-icon-button { border-radius: 0; box-shadow: none; font-family: var(--blueprint-font-control); text-transform: uppercase; letter-spacing: .06em; }
-.blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning) { background: transparent; }
+.blueprint-button:where(:not([data-ui-variant])):not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning) { background: transparent; }
 .blueprint-nav { border-radius: 0; box-shadow: none; }
 .blueprint-nav-link { border-radius: 0; font-family: var(--blueprint-font-control); font-size: .75rem; text-transform: uppercase; }
 .blueprint-input, .blueprint-textarea, .blueprint-select, .blueprint-badge, .blueprint-alert, .blueprint-metric, .blueprint-well, .blueprint-inset { border-radius: 0; }
@@ -984,7 +986,8 @@
   --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
   --usk-native-range-thumb-size: 1.02rem;
-  --usk-native-range-thumb-background: var(--blueprint-surface);
+  /** A split marker stays colored against the ruled blueprint track. */
+  --usk-native-range-thumb-background: linear-gradient(135deg, var(--blueprint-primary) 0 55%, var(--blueprint-surface) 55%);
   --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);

package/styles/y2k.css

@@ -272,7 +272,7 @@
   --usk-native-range-track-shadow: inset 0 3px rgb(255 255 255 / .55);
   --usk-native-range-progress-background: var(--y2k-primary);
   --usk-native-range-thumb-size: 1.55rem;
-  --usk-native-range-thumb-background: var(--y2k-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--y2k-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: inset 0 3px rgb(255 255 255 / .55);
@@ -466,7 +466,8 @@
 /* Theme-responsive component defaults */
 .y2k-card, .y2k-panel { background: var(--y2k-card-bg); }
 .y2k-toolbar, .y2k-table-wrap { background: var(--y2k-control-bg); }
-.y2k-button:not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-warning):not(.y2k-button-ghost), .y2k-icon-button { background: var(--y2k-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.y2k-button:where(:not([data-ui-variant])):not(.y2k-button-primary):not(.y2k-button-secondary):not(.y2k-button-danger):not(.y2k-button-warning):not(.y2k-button-ghost), .y2k-icon-button { background: var(--y2k-control-bg); }
 .y2k-button, .y2k-icon-button, .y2k-badge, .y2k-nav-link { font-family: var(--y2k-font-control); }
 
 /* Spinner geometry follows the y2k preset's glossy plastic controls. */
@@ -768,7 +769,7 @@
   --usk-native-range-track-shadow: inset 1px 1px 0 rgb(var(--y2k-text-rgb) / .28);
   --usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--y2k-primary) 0 .4rem, var(--y2k-surface) .4rem .48rem);
   --usk-native-range-thumb-size: 1.12rem;
-  --usk-native-range-thumb-background: linear-gradient(135deg, var(--y2k-surface-strong), var(--y2k-surface-soft));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px outset var(--y2k-border);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 1px 1px 0 rgb(var(--y2k-text-rgb) / .24);
@@ -898,7 +899,7 @@
   --usk-native-range-track-shadow: var(--y2k-bevel-recessed);
   --usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--y2k-primary) 0 .5rem, var(--y2k-surface) .5rem .5625rem);
   --usk-native-range-thumb-size: .875rem;
-  --usk-native-range-thumb-background: var(--y2k-surface);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px outset var(--y2k-border);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: var(--y2k-bevel-raised);