ui-style-kit-css 2.6.0 → 2.7.0

package/styles/components.css

@@ -1340,7 +1340,7 @@
 :where(.saas-tabs, .bento-tabs, .max-tabs, .bau-tabs, .tactile-tabs, .neo-tabs, .retro-tabs, .brutal-tabs, .cyber-tabs, .y2k-tabs, .rg-tabs, .luxe-tabs, .organic-tabs, .utility-tabs, .blueprint-tabs, .deco-tabs, .clay-tabs, .terminal-tabs, .paper-tabs, .noir-tabs) { display: grid; gap: .75rem; }
 :where(.saas-tab-list, .bento-tab-list, .max-tab-list, .bau-tab-list, .tactile-tab-list, .neo-tab-list, .retro-tab-list, .brutal-tab-list, .cyber-tab-list, .y2k-tab-list, .rg-tab-list, .luxe-tab-list, .organic-tab-list, .utility-tab-list, .blueprint-tab-list, .deco-tab-list, .clay-tab-list, .terminal-tab-list, .paper-tab-list, .noir-tab-list) { display: flex; flex-wrap: wrap; gap: .25rem; border-block-end: var(--usk-native-border-width) solid var(--usk-native-border); }
 :where(.saas-tab, .bento-tab, .max-tab, .bau-tab, .tactile-tab, .neo-tab, .retro-tab, .brutal-tab, .cyber-tab, .y2k-tab, .rg-tab, .luxe-tab, .organic-tab, .utility-tab, .blueprint-tab, .deco-tab, .clay-tab, .terminal-tab, .paper-tab, .noir-tab) { min-block-size: 44px; padding: .6rem .9rem; color: var(--usk-native-text-muted); background: transparent; border: 0; border-block-end: calc(var(--usk-native-border-width) * 2) solid transparent; font: inherit; cursor: pointer; }
-:where(.saas-tab[aria-selected="true"], .bento-tab[aria-selected="true"], .max-tab[aria-selected="true"], .bau-tab[aria-selected="true"], .tactile-tab[aria-selected="true"], .neo-tab[aria-selected="true"], .retro-tab[aria-selected="true"], .brutal-tab[aria-selected="true"], .cyber-tab[aria-selected="true"], .y2k-tab[aria-selected="true"], .rg-tab[aria-selected="true"], .luxe-tab[aria-selected="true"], .organic-tab[aria-selected="true"], .utility-tab[aria-selected="true"], .blueprint-tab[aria-selected="true"], .deco-tab[aria-selected="true"], .clay-tab[aria-selected="true"], .terminal-tab[aria-selected="true"], .paper-tab[aria-selected="true"], .noir-tab[aria-selected="true"]) { color: var(--usk-primary-ink, var(--usk-native-primary)); border-block-end-color: var(--usk-native-primary); }
+:where(.saas-tab[aria-selected="true"], .bento-tab[aria-selected="true"], .max-tab[aria-selected="true"], .bau-tab[aria-selected="true"], .tactile-tab[aria-selected="true"], .neo-tab[aria-selected="true"], .retro-tab[aria-selected="true"], .brutal-tab[aria-selected="true"], .cyber-tab[aria-selected="true"], .y2k-tab[aria-selected="true"], .rg-tab[aria-selected="true"], .luxe-tab[aria-selected="true"], .organic-tab[aria-selected="true"], .utility-tab[aria-selected="true"], .blueprint-tab[aria-selected="true"], .deco-tab[aria-selected="true"], .clay-tab[aria-selected="true"], .terminal-tab[aria-selected="true"], .paper-tab[aria-selected="true"], .noir-tab[aria-selected="true"]) { color: var(--usk-native-text); border-block-end-color: var(--usk-native-primary); }
 :where(.saas-tab-panel, .bento-tab-panel, .max-tab-panel, .bau-tab-panel, .tactile-tab-panel, .neo-tab-panel, .retro-tab-panel, .brutal-tab-panel, .cyber-tab-panel, .y2k-tab-panel, .rg-tab-panel, .luxe-tab-panel, .organic-tab-panel, .utility-tab-panel, .blueprint-tab-panel, .deco-tab-panel, .clay-tab-panel, .terminal-tab-panel, .paper-tab-panel, .noir-tab-panel) { padding-block: .75rem; color: var(--usk-native-text); }
 
 :where(.saas-pagination, .saas-breadcrumb-list, .saas-chip-group, .saas-avatar-group, .bento-pagination, .bento-breadcrumb-list, .bento-chip-group, .bento-avatar-group, .max-pagination, .max-breadcrumb-list, .max-chip-group, .max-avatar-group, .bau-pagination, .bau-breadcrumb-list, .bau-chip-group, .bau-avatar-group, .tactile-pagination, .tactile-breadcrumb-list, .tactile-chip-group, .tactile-avatar-group, .neo-pagination, .neo-breadcrumb-list, .neo-chip-group, .neo-avatar-group, .retro-pagination, .retro-breadcrumb-list, .retro-chip-group, .retro-avatar-group, .brutal-pagination, .brutal-breadcrumb-list, .brutal-chip-group, .brutal-avatar-group, .cyber-pagination, .cyber-breadcrumb-list, .cyber-chip-group, .cyber-avatar-group, .y2k-pagination, .y2k-breadcrumb-list, .y2k-chip-group, .y2k-avatar-group, .rg-pagination, .rg-breadcrumb-list, .rg-chip-group, .rg-avatar-group, .luxe-pagination, .luxe-breadcrumb-list, .luxe-chip-group, .luxe-avatar-group, .organic-pagination, .organic-breadcrumb-list, .organic-chip-group, .organic-avatar-group, .utility-pagination, .utility-breadcrumb-list, .utility-chip-group, .utility-avatar-group, .blueprint-pagination, .blueprint-breadcrumb-list, .blueprint-chip-group, .blueprint-avatar-group, .deco-pagination, .deco-breadcrumb-list, .deco-chip-group, .deco-avatar-group, .clay-pagination, .clay-breadcrumb-list, .clay-chip-group, .clay-avatar-group, .terminal-pagination, .terminal-breadcrumb-list, .terminal-chip-group, .terminal-avatar-group, .paper-pagination, .paper-breadcrumb-list, .paper-chip-group, .paper-avatar-group, .noir-pagination, .noir-breadcrumb-list, .noir-chip-group, .noir-avatar-group) { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
@@ -1362,7 +1362,7 @@
 @media (prefers-reduced-motion: reduce) { :where(.saas-skeleton, .bento-skeleton, .max-skeleton, .bau-skeleton, .tactile-skeleton, .neo-skeleton, .retro-skeleton, .brutal-skeleton, .cyber-skeleton, .y2k-skeleton, .rg-skeleton, .luxe-skeleton, .organic-skeleton, .utility-skeleton, .blueprint-skeleton, .deco-skeleton, .clay-skeleton, .terminal-skeleton, .paper-skeleton, .noir-skeleton) { animation: none; } }
 
 :where(.saas-empty-state, .bento-empty-state, .max-empty-state, .bau-empty-state, .tactile-empty-state, .neo-empty-state, .retro-empty-state, .brutal-empty-state, .cyber-empty-state, .y2k-empty-state, .rg-empty-state, .luxe-empty-state, .organic-empty-state, .utility-empty-state, .blueprint-empty-state, .deco-empty-state, .clay-empty-state, .terminal-empty-state, .paper-empty-state, .noir-empty-state) { display: grid; justify-items: center; gap: .75rem; max-inline-size: 42rem; padding: clamp(1.25rem, 4vw, 3rem); color: var(--usk-native-text); background: var(--usk-native-surface); border: var(--usk-native-border-width) solid var(--usk-native-border); border-radius: var(--usk-native-radius); text-align: center; }
-:where(.saas-empty-state-icon, .bento-empty-state-icon, .max-empty-state-icon, .bau-empty-state-icon, .tactile-empty-state-icon, .neo-empty-state-icon, .retro-empty-state-icon, .brutal-empty-state-icon, .cyber-empty-state-icon, .y2k-empty-state-icon, .rg-empty-state-icon, .luxe-empty-state-icon, .organic-empty-state-icon, .utility-empty-state-icon, .blueprint-empty-state-icon, .deco-empty-state-icon, .clay-empty-state-icon, .terminal-empty-state-icon, .paper-empty-state-icon, .noir-empty-state-icon) { display: grid; place-items: center; color: var(--usk-primary-ink, var(--usk-native-primary)); }
+:where(.saas-empty-state-icon, .bento-empty-state-icon, .max-empty-state-icon, .bau-empty-state-icon, .tactile-empty-state-icon, .neo-empty-state-icon, .retro-empty-state-icon, .brutal-empty-state-icon, .cyber-empty-state-icon, .y2k-empty-state-icon, .rg-empty-state-icon, .luxe-empty-state-icon, .organic-empty-state-icon, .utility-empty-state-icon, .blueprint-empty-state-icon, .deco-empty-state-icon, .clay-empty-state-icon, .terminal-empty-state-icon, .paper-empty-state-icon, .noir-empty-state-icon) { display: grid; place-items: center; color: var(--usk-native-link); }
 :where(.saas-empty-state-title, .saas-toast-title, .bento-empty-state-title, .bento-toast-title, .max-empty-state-title, .max-toast-title, .bau-empty-state-title, .bau-toast-title, .tactile-empty-state-title, .tactile-toast-title, .neo-empty-state-title, .neo-toast-title, .retro-empty-state-title, .retro-toast-title, .brutal-empty-state-title, .brutal-toast-title, .cyber-empty-state-title, .cyber-toast-title, .y2k-empty-state-title, .y2k-toast-title, .rg-empty-state-title, .rg-toast-title, .luxe-empty-state-title, .luxe-toast-title, .organic-empty-state-title, .organic-toast-title, .utility-empty-state-title, .utility-toast-title, .blueprint-empty-state-title, .blueprint-toast-title, .deco-empty-state-title, .deco-toast-title, .clay-empty-state-title, .clay-toast-title, .terminal-empty-state-title, .terminal-toast-title, .paper-empty-state-title, .paper-toast-title, .noir-empty-state-title, .noir-toast-title) { margin: 0; color: var(--usk-native-text); font-weight: 750; }
 :where(.saas-empty-state-body, .saas-toast-body, .saas-metric-detail, .bento-empty-state-body, .bento-toast-body, .bento-metric-detail, .max-empty-state-body, .max-toast-body, .max-metric-detail, .bau-empty-state-body, .bau-toast-body, .bau-metric-detail, .tactile-empty-state-body, .tactile-toast-body, .tactile-metric-detail, .neo-empty-state-body, .neo-toast-body, .neo-metric-detail, .retro-empty-state-body, .retro-toast-body, .retro-metric-detail, .brutal-empty-state-body, .brutal-toast-body, .brutal-metric-detail, .cyber-empty-state-body, .cyber-toast-body, .cyber-metric-detail, .y2k-empty-state-body, .y2k-toast-body, .y2k-metric-detail, .rg-empty-state-body, .rg-toast-body, .rg-metric-detail, .luxe-empty-state-body, .luxe-toast-body, .luxe-metric-detail, .organic-empty-state-body, .organic-toast-body, .organic-metric-detail, .utility-empty-state-body, .utility-toast-body, .utility-metric-detail, .blueprint-empty-state-body, .blueprint-toast-body, .blueprint-metric-detail, .deco-empty-state-body, .deco-toast-body, .deco-metric-detail, .clay-empty-state-body, .clay-toast-body, .clay-metric-detail, .terminal-empty-state-body, .terminal-toast-body, .terminal-metric-detail, .paper-empty-state-body, .paper-toast-body, .paper-metric-detail, .noir-empty-state-body, .noir-toast-body, .noir-metric-detail) { margin: 0; color: var(--usk-native-text-muted); }
 :where(.saas-empty-state-actions, .saas-toast-actions, .bento-empty-state-actions, .bento-toast-actions, .max-empty-state-actions, .max-toast-actions, .bau-empty-state-actions, .bau-toast-actions, .tactile-empty-state-actions, .tactile-toast-actions, .neo-empty-state-actions, .neo-toast-actions, .retro-empty-state-actions, .retro-toast-actions, .brutal-empty-state-actions, .brutal-toast-actions, .cyber-empty-state-actions, .cyber-toast-actions, .y2k-empty-state-actions, .y2k-toast-actions, .rg-empty-state-actions, .rg-toast-actions, .luxe-empty-state-actions, .luxe-toast-actions, .organic-empty-state-actions, .organic-toast-actions, .utility-empty-state-actions, .utility-toast-actions, .blueprint-empty-state-actions, .blueprint-toast-actions, .deco-empty-state-actions, .deco-toast-actions, .clay-empty-state-actions, .clay-toast-actions, .terminal-empty-state-actions, .terminal-toast-actions, .paper-empty-state-actions, .paper-toast-actions, .noir-empty-state-actions, .noir-toast-actions) { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
@@ -1411,5 +1411,265 @@
 :where(.saas-file-upload, .bento-file-upload, .max-file-upload, .bau-file-upload, .tactile-file-upload, .neo-file-upload, .retro-file-upload, .brutal-file-upload, .cyber-file-upload, .y2k-file-upload, .rg-file-upload, .luxe-file-upload, .organic-file-upload, .utility-file-upload, .blueprint-file-upload, .deco-file-upload, .clay-file-upload, .terminal-file-upload, .paper-file-upload, .noir-file-upload) { display: grid; gap: .75rem; }
 :where(.saas-dropzone, .bento-dropzone, .max-dropzone, .bau-dropzone, .tactile-dropzone, .neo-dropzone, .retro-dropzone, .brutal-dropzone, .cyber-dropzone, .y2k-dropzone, .rg-dropzone, .luxe-dropzone, .organic-dropzone, .utility-dropzone, .blueprint-dropzone, .deco-dropzone, .clay-dropzone, .terminal-dropzone, .paper-dropzone, .noir-dropzone) { display: grid; place-items: center; gap: .5rem; min-block-size: 8rem; padding: 1.25rem; color: var(--usk-native-text-muted); background: var(--usk-native-surface-soft); border: calc(var(--usk-native-border-width) * 2) dashed var(--usk-native-border); border-radius: var(--usk-native-radius); text-align: center; }
 :where(.saas-dropzone[data-drag-active="true"], .bento-dropzone[data-drag-active="true"], .max-dropzone[data-drag-active="true"], .bau-dropzone[data-drag-active="true"], .tactile-dropzone[data-drag-active="true"], .neo-dropzone[data-drag-active="true"], .retro-dropzone[data-drag-active="true"], .brutal-dropzone[data-drag-active="true"], .cyber-dropzone[data-drag-active="true"], .y2k-dropzone[data-drag-active="true"], .rg-dropzone[data-drag-active="true"], .luxe-dropzone[data-drag-active="true"], .organic-dropzone[data-drag-active="true"], .utility-dropzone[data-drag-active="true"], .blueprint-dropzone[data-drag-active="true"], .deco-dropzone[data-drag-active="true"], .clay-dropzone[data-drag-active="true"], .terminal-dropzone[data-drag-active="true"], .paper-dropzone[data-drag-active="true"], .noir-dropzone[data-drag-active="true"]) { color: var(--usk-primary-ink, var(--usk-native-primary)); border-color: var(--usk-native-primary); }
+}
+@layer ui-style-kit.clean_defaults {
+/** Empty-state symbols remain prominent independently of each preset's body font. */
+[data-ui][data-mode] :where(.saas-empty-state-icon, .bento-empty-state-icon, .max-empty-state-icon, .bau-empty-state-icon, .tactile-empty-state-icon, .neo-empty-state-icon, .retro-empty-state-icon, .brutal-empty-state-icon, .cyber-empty-state-icon, .y2k-empty-state-icon, .rg-empty-state-icon, .luxe-empty-state-icon, .organic-empty-state-icon, .utility-empty-state-icon, .blueprint-empty-state-icon, .deco-empty-state-icon, .clay-empty-state-icon, .terminal-empty-state-icon, .paper-empty-state-icon, .noir-empty-state-icon) {
+  display: grid;
+  place-items: center;
+  font-size: var(--usk-empty-state-icon-size, 2.75rem);
+  line-height: 1;
+  min-inline-size: 1em;
+  min-block-size: 1em;
+  margin: 0;
+  padding: 0;
+}
+
+/** Thin progress tracks own their inset; the fill never inherits element spacing. */
+[data-ui][data-mode] :where(.saas-progress, .bento-progress, .max-progress, .bau-progress, .tactile-progress, .neo-progress, .retro-progress, .brutal-progress, .cyber-progress, .y2k-progress, .rg-progress, .luxe-progress, .organic-progress, .utility-progress, .blueprint-progress, .deco-progress, .clay-progress, .terminal-progress, .paper-progress, .noir-progress) {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin: 0;
+  padding: 0;
+}
+[data-ui][data-mode] :where(.saas-progress-bar, .bento-progress-bar, .max-progress-bar, .bau-progress-bar, .tactile-progress-bar, .neo-progress-bar, .retro-progress-bar, .brutal-progress-bar, .cyber-progress-bar, .y2k-progress-bar, .rg-progress-bar, .luxe-progress-bar, .organic-progress-bar, .utility-progress-bar, .blueprint-progress-bar, .deco-progress-bar, .clay-progress-bar, .terminal-progress-bar, .paper-progress-bar, .noir-progress-bar) {
+  box-sizing: border-box;
+  flex: 0 1 auto;
+  align-self: center;
+  min-inline-size: 0;
+  min-block-size: 0;
+  max-inline-size: 100%;
+  block-size: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+/** Status surfaces keep their signal after preset material and border shorthands. */
+
+[data-ui][data-mode] :where(.saas-alert-success, .bento-alert-success, .max-alert-success, .bau-alert-success, .tactile-alert-success, .neo-alert-success, .retro-alert-success, .brutal-alert-success, .cyber-alert-success, .y2k-alert-success, .rg-alert-success, .luxe-alert-success, .organic-alert-success, .utility-alert-success, .blueprint-alert-success, .deco-alert-success, .clay-alert-success, .terminal-alert-success, .paper-alert-success, .noir-alert-success) {
+  --usk-message-tone: var(--usk-native-success);
+  background: var(--usk-message-tone);
+  color: var(--usk-native-on-success);
+  border-color: var(--usk-message-tone);
+}
+[data-ui][data-mode] :where(.saas-alert-success, .bento-alert-success, .max-alert-success, .bau-alert-success, .tactile-alert-success, .neo-alert-success, .retro-alert-success, .brutal-alert-success, .cyber-alert-success, .y2k-alert-success, .rg-alert-success, .luxe-alert-success, .organic-alert-success, .utility-alert-success, .blueprint-alert-success, .deco-alert-success, .clay-alert-success, .terminal-alert-success, .paper-alert-success, .noir-alert-success) :where(.saas-alert-title, .bento-alert-title, .max-alert-title, .bau-alert-title, .tactile-alert-title, .neo-alert-title, .retro-alert-title, .brutal-alert-title, .cyber-alert-title, .y2k-alert-title, .rg-alert-title, .luxe-alert-title, .organic-alert-title, .utility-alert-title, .blueprint-alert-title, .deco-alert-title, .clay-alert-title, .terminal-alert-title, .paper-alert-title, .noir-alert-title) {
+  color: inherit;
+  text-shadow: none;
+}
+[data-ui][data-mode] :where(.saas-alert-success, .bento-alert-success, .max-alert-success, .bau-alert-success, .tactile-alert-success, .neo-alert-success, .retro-alert-success, .brutal-alert-success, .cyber-alert-success, .y2k-alert-success, .rg-alert-success, .luxe-alert-success, .organic-alert-success, .utility-alert-success, .blueprint-alert-success, .deco-alert-success, .clay-alert-success, .terminal-alert-success, .paper-alert-success, .noir-alert-success) :where(.saas-alert-body, .bento-alert-body, .max-alert-body, .bau-alert-body, .tactile-alert-body, .neo-alert-body, .retro-alert-body, .brutal-alert-body, .cyber-alert-body, .y2k-alert-body, .rg-alert-body, .luxe-alert-body, .organic-alert-body, .utility-alert-body, .blueprint-alert-body, .deco-alert-body, .clay-alert-body, .terminal-alert-body, .paper-alert-body, .noir-alert-body) {
+  color: inherit;
+}
+@supports (color: color-mix(in srgb, #000, #fff)) {
+  [data-ui][data-mode] :where(.saas-alert-success, .bento-alert-success, .max-alert-success, .bau-alert-success, .tactile-alert-success, .neo-alert-success, .retro-alert-success, .brutal-alert-success, .cyber-alert-success, .y2k-alert-success, .rg-alert-success, .luxe-alert-success, .organic-alert-success, .utility-alert-success, .blueprint-alert-success, .deco-alert-success, .clay-alert-success, .terminal-alert-success, .paper-alert-success, .noir-alert-success) {
+    background: color-mix(in srgb, var(--usk-message-tone) 18%, var(--usk-native-bg));
+    color: var(--usk-native-text);
+  }
+}
+
+[data-ui][data-mode] :where(.saas-alert-warning, .bento-alert-warning, .max-alert-warning, .bau-alert-warning, .tactile-alert-warning, .neo-alert-warning, .retro-alert-warning, .brutal-alert-warning, .cyber-alert-warning, .y2k-alert-warning, .rg-alert-warning, .luxe-alert-warning, .organic-alert-warning, .utility-alert-warning, .blueprint-alert-warning, .deco-alert-warning, .clay-alert-warning, .terminal-alert-warning, .paper-alert-warning, .noir-alert-warning) {
+  --usk-message-tone: var(--usk-native-warning);
+  background: var(--usk-message-tone);
+  color: var(--usk-native-on-warning);
+  border-color: var(--usk-message-tone);
+}
+[data-ui][data-mode] :where(.saas-alert-warning, .bento-alert-warning, .max-alert-warning, .bau-alert-warning, .tactile-alert-warning, .neo-alert-warning, .retro-alert-warning, .brutal-alert-warning, .cyber-alert-warning, .y2k-alert-warning, .rg-alert-warning, .luxe-alert-warning, .organic-alert-warning, .utility-alert-warning, .blueprint-alert-warning, .deco-alert-warning, .clay-alert-warning, .terminal-alert-warning, .paper-alert-warning, .noir-alert-warning) :where(.saas-alert-title, .bento-alert-title, .max-alert-title, .bau-alert-title, .tactile-alert-title, .neo-alert-title, .retro-alert-title, .brutal-alert-title, .cyber-alert-title, .y2k-alert-title, .rg-alert-title, .luxe-alert-title, .organic-alert-title, .utility-alert-title, .blueprint-alert-title, .deco-alert-title, .clay-alert-title, .terminal-alert-title, .paper-alert-title, .noir-alert-title) {
+  color: inherit;
+  text-shadow: none;
+}
+[data-ui][data-mode] :where(.saas-alert-warning, .bento-alert-warning, .max-alert-warning, .bau-alert-warning, .tactile-alert-warning, .neo-alert-warning, .retro-alert-warning, .brutal-alert-warning, .cyber-alert-warning, .y2k-alert-warning, .rg-alert-warning, .luxe-alert-warning, .organic-alert-warning, .utility-alert-warning, .blueprint-alert-warning, .deco-alert-warning, .clay-alert-warning, .terminal-alert-warning, .paper-alert-warning, .noir-alert-warning) :where(.saas-alert-body, .bento-alert-body, .max-alert-body, .bau-alert-body, .tactile-alert-body, .neo-alert-body, .retro-alert-body, .brutal-alert-body, .cyber-alert-body, .y2k-alert-body, .rg-alert-body, .luxe-alert-body, .organic-alert-body, .utility-alert-body, .blueprint-alert-body, .deco-alert-body, .clay-alert-body, .terminal-alert-body, .paper-alert-body, .noir-alert-body) {
+  color: inherit;
+}
+@supports (color: color-mix(in srgb, #000, #fff)) {
+  [data-ui][data-mode] :where(.saas-alert-warning, .bento-alert-warning, .max-alert-warning, .bau-alert-warning, .tactile-alert-warning, .neo-alert-warning, .retro-alert-warning, .brutal-alert-warning, .cyber-alert-warning, .y2k-alert-warning, .rg-alert-warning, .luxe-alert-warning, .organic-alert-warning, .utility-alert-warning, .blueprint-alert-warning, .deco-alert-warning, .clay-alert-warning, .terminal-alert-warning, .paper-alert-warning, .noir-alert-warning) {
+    background: color-mix(in srgb, var(--usk-message-tone) 18%, var(--usk-native-bg));
+    color: var(--usk-native-text);
+  }
+}
+
+[data-ui][data-mode] :where(.saas-alert-danger, .bento-alert-danger, .max-alert-danger, .bau-alert-danger, .tactile-alert-danger, .neo-alert-danger, .retro-alert-danger, .brutal-alert-danger, .cyber-alert-danger, .y2k-alert-danger, .rg-alert-danger, .luxe-alert-danger, .organic-alert-danger, .utility-alert-danger, .blueprint-alert-danger, .deco-alert-danger, .clay-alert-danger, .terminal-alert-danger, .paper-alert-danger, .noir-alert-danger) {
+  --usk-message-tone: var(--usk-native-danger);
+  background: var(--usk-message-tone);
+  color: var(--usk-native-on-danger);
+  border-color: var(--usk-message-tone);
+}
+[data-ui][data-mode] :where(.saas-alert-danger, .bento-alert-danger, .max-alert-danger, .bau-alert-danger, .tactile-alert-danger, .neo-alert-danger, .retro-alert-danger, .brutal-alert-danger, .cyber-alert-danger, .y2k-alert-danger, .rg-alert-danger, .luxe-alert-danger, .organic-alert-danger, .utility-alert-danger, .blueprint-alert-danger, .deco-alert-danger, .clay-alert-danger, .terminal-alert-danger, .paper-alert-danger, .noir-alert-danger) :where(.saas-alert-title, .bento-alert-title, .max-alert-title, .bau-alert-title, .tactile-alert-title, .neo-alert-title, .retro-alert-title, .brutal-alert-title, .cyber-alert-title, .y2k-alert-title, .rg-alert-title, .luxe-alert-title, .organic-alert-title, .utility-alert-title, .blueprint-alert-title, .deco-alert-title, .clay-alert-title, .terminal-alert-title, .paper-alert-title, .noir-alert-title) {
+  color: inherit;
+  text-shadow: none;
+}
+[data-ui][data-mode] :where(.saas-alert-danger, .bento-alert-danger, .max-alert-danger, .bau-alert-danger, .tactile-alert-danger, .neo-alert-danger, .retro-alert-danger, .brutal-alert-danger, .cyber-alert-danger, .y2k-alert-danger, .rg-alert-danger, .luxe-alert-danger, .organic-alert-danger, .utility-alert-danger, .blueprint-alert-danger, .deco-alert-danger, .clay-alert-danger, .terminal-alert-danger, .paper-alert-danger, .noir-alert-danger) :where(.saas-alert-body, .bento-alert-body, .max-alert-body, .bau-alert-body, .tactile-alert-body, .neo-alert-body, .retro-alert-body, .brutal-alert-body, .cyber-alert-body, .y2k-alert-body, .rg-alert-body, .luxe-alert-body, .organic-alert-body, .utility-alert-body, .blueprint-alert-body, .deco-alert-body, .clay-alert-body, .terminal-alert-body, .paper-alert-body, .noir-alert-body) {
+  color: inherit;
+}
+@supports (color: color-mix(in srgb, #000, #fff)) {
+  [data-ui][data-mode] :where(.saas-alert-danger, .bento-alert-danger, .max-alert-danger, .bau-alert-danger, .tactile-alert-danger, .neo-alert-danger, .retro-alert-danger, .brutal-alert-danger, .cyber-alert-danger, .y2k-alert-danger, .rg-alert-danger, .luxe-alert-danger, .organic-alert-danger, .utility-alert-danger, .blueprint-alert-danger, .deco-alert-danger, .clay-alert-danger, .terminal-alert-danger, .paper-alert-danger, .noir-alert-danger) {
+    background: color-mix(in srgb, var(--usk-message-tone) 18%, var(--usk-native-bg));
+    color: var(--usk-native-text);
+  }
+}
+
+/** Compact status and selection frames provide a readable inset around their text. */
+[data-ui][data-mode] :where(.saas-chip, .saas-tab, .saas-segment, .bento-chip, .bento-tab, .bento-segment, .max-chip, .max-tab, .max-segment, .bau-chip, .bau-tab, .bau-segment, .tactile-chip, .tactile-tab, .tactile-segment, .neo-chip, .neo-tab, .neo-segment, .retro-chip, .retro-tab, .retro-segment, .brutal-chip, .brutal-tab, .brutal-segment, .cyber-chip, .cyber-tab, .cyber-segment, .y2k-chip, .y2k-tab, .y2k-segment, .rg-chip, .rg-tab, .rg-segment, .luxe-chip, .luxe-tab, .luxe-segment, .organic-chip, .organic-tab, .organic-segment, .utility-chip, .utility-tab, .utility-segment, .blueprint-chip, .blueprint-tab, .blueprint-segment, .deco-chip, .deco-tab, .deco-segment, .clay-chip, .clay-tab, .clay-segment, .terminal-chip, .terminal-tab, .terminal-segment, .paper-chip, .paper-tab, .paper-segment, .noir-chip, .noir-tab, .noir-segment) {
+  box-sizing: border-box;
+  padding-block: var(--usk-compact-content-padding-block, .35rem);
+  padding-inline: var(--usk-compact-content-padding-inline, .65rem);
+}
+
+/** Public component frames shrink within their parent instead of adding an outer inset. */
+[data-ui][data-mode] :where(.saas-tabs, .saas-tab-list, .saas-tab-panel, .saas-toast-stack, .saas-toast, .saas-popover, .saas-menu, .saas-segmented-control, .bento-tabs, .bento-tab-list, .bento-tab-panel, .bento-toast-stack, .bento-toast, .bento-popover, .bento-menu, .bento-segmented-control, .max-tabs, .max-tab-list, .max-tab-panel, .max-toast-stack, .max-toast, .max-popover, .max-menu, .max-segmented-control, .bau-tabs, .bau-tab-list, .bau-tab-panel, .bau-toast-stack, .bau-toast, .bau-popover, .bau-menu, .bau-segmented-control, .tactile-tabs, .tactile-tab-list, .tactile-tab-panel, .tactile-toast-stack, .tactile-toast, .tactile-popover, .tactile-menu, .tactile-segmented-control, .neo-tabs, .neo-tab-list, .neo-tab-panel, .neo-toast-stack, .neo-toast, .neo-popover, .neo-menu, .neo-segmented-control, .retro-tabs, .retro-tab-list, .retro-tab-panel, .retro-toast-stack, .retro-toast, .retro-popover, .retro-menu, .retro-segmented-control, .brutal-tabs, .brutal-tab-list, .brutal-tab-panel, .brutal-toast-stack, .brutal-toast, .brutal-popover, .brutal-menu, .brutal-segmented-control, .cyber-tabs, .cyber-tab-list, .cyber-tab-panel, .cyber-toast-stack, .cyber-toast, .cyber-popover, .cyber-menu, .cyber-segmented-control, .y2k-tabs, .y2k-tab-list, .y2k-tab-panel, .y2k-toast-stack, .y2k-toast, .y2k-popover, .y2k-menu, .y2k-segmented-control, .rg-tabs, .rg-tab-list, .rg-tab-panel, .rg-toast-stack, .rg-toast, .rg-popover, .rg-menu, .rg-segmented-control, .luxe-tabs, .luxe-tab-list, .luxe-tab-panel, .luxe-toast-stack, .luxe-toast, .luxe-popover, .luxe-menu, .luxe-segmented-control, .organic-tabs, .organic-tab-list, .organic-tab-panel, .organic-toast-stack, .organic-toast, .organic-popover, .organic-menu, .organic-segmented-control, .utility-tabs, .utility-tab-list, .utility-tab-panel, .utility-toast-stack, .utility-toast, .utility-popover, .utility-menu, .utility-segmented-control, .blueprint-tabs, .blueprint-tab-list, .blueprint-tab-panel, .blueprint-toast-stack, .blueprint-toast, .blueprint-popover, .blueprint-menu, .blueprint-segmented-control, .deco-tabs, .deco-tab-list, .deco-tab-panel, .deco-toast-stack, .deco-toast, .deco-popover, .deco-menu, .deco-segmented-control, .clay-tabs, .clay-tab-list, .clay-tab-panel, .clay-toast-stack, .clay-toast, .clay-popover, .clay-menu, .clay-segmented-control, .terminal-tabs, .terminal-tab-list, .terminal-tab-panel, .terminal-toast-stack, .terminal-toast, .terminal-popover, .terminal-menu, .terminal-segmented-control, .paper-tabs, .paper-tab-list, .paper-tab-panel, .paper-toast-stack, .paper-toast, .paper-popover, .paper-menu, .paper-segmented-control, .noir-tabs, .noir-tab-list, .noir-tab-panel, .noir-toast-stack, .noir-toast, .noir-popover, .noir-menu, .noir-segmented-control) {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  margin-inline: 0;
+}
+
+/** Overlay frames retain their content inset after the native element-spacing floor. */
+[data-ui][data-mode] :where(.saas-popover, .saas-menu, .saas-listbox, .bento-popover, .bento-menu, .bento-listbox, .max-popover, .max-menu, .max-listbox, .bau-popover, .bau-menu, .bau-listbox, .tactile-popover, .tactile-menu, .tactile-listbox, .neo-popover, .neo-menu, .neo-listbox, .retro-popover, .retro-menu, .retro-listbox, .brutal-popover, .brutal-menu, .brutal-listbox, .cyber-popover, .cyber-menu, .cyber-listbox, .y2k-popover, .y2k-menu, .y2k-listbox, .rg-popover, .rg-menu, .rg-listbox, .luxe-popover, .luxe-menu, .luxe-listbox, .organic-popover, .organic-menu, .organic-listbox, .utility-popover, .utility-menu, .utility-listbox, .blueprint-popover, .blueprint-menu, .blueprint-listbox, .deco-popover, .deco-menu, .deco-listbox, .clay-popover, .clay-menu, .clay-listbox, .terminal-popover, .terminal-menu, .terminal-listbox, .paper-popover, .paper-menu, .paper-listbox, .noir-popover, .noir-menu, .noir-listbox) {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding: var(--usk-overlay-padding, .5rem);
+}
+[data-ui][data-mode] :where(.saas-menu-item, .saas-listbox-option, .bento-menu-item, .bento-listbox-option, .max-menu-item, .max-listbox-option, .bau-menu-item, .bau-listbox-option, .tactile-menu-item, .tactile-listbox-option, .neo-menu-item, .neo-listbox-option, .retro-menu-item, .retro-listbox-option, .brutal-menu-item, .brutal-listbox-option, .cyber-menu-item, .cyber-listbox-option, .y2k-menu-item, .y2k-listbox-option, .rg-menu-item, .rg-listbox-option, .luxe-menu-item, .luxe-listbox-option, .organic-menu-item, .organic-listbox-option, .utility-menu-item, .utility-listbox-option, .blueprint-menu-item, .blueprint-listbox-option, .deco-menu-item, .deco-listbox-option, .clay-menu-item, .clay-listbox-option, .terminal-menu-item, .terminal-listbox-option, .paper-menu-item, .paper-listbox-option, .noir-menu-item, .noir-listbox-option) {
+  box-sizing: border-box;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  padding-block: var(--usk-option-padding-block, .55rem);
+  padding-inline: var(--usk-option-padding-inline, .7rem);
+}
+
+/** A typed tab root stacks its header and panel; legacy direct-button bars keep their own layout. */
+[data-ui][data-mode] :where(.saas-tabs:has(> .saas-tab-list), .bento-tabs:has(> .bento-tab-list), .max-tabs:has(> .max-tab-list), .bau-tabs:has(> .bau-tab-list), .tactile-tabs:has(> .tactile-tab-list), .neo-tabs:has(> .neo-tab-list), .retro-tabs:has(> .retro-tab-list), .brutal-tabs:has(> .brutal-tab-list), .cyber-tabs:has(> .cyber-tab-list), .y2k-tabs:has(> .y2k-tab-list), .rg-tabs:has(> .rg-tab-list), .luxe-tabs:has(> .luxe-tab-list), .organic-tabs:has(> .organic-tab-list), .utility-tabs:has(> .utility-tab-list), .blueprint-tabs:has(> .blueprint-tab-list), .deco-tabs:has(> .deco-tab-list), .clay-tabs:has(> .clay-tab-list), .terminal-tabs:has(> .terminal-tab-list), .paper-tabs:has(> .paper-tab-list), .noir-tabs:has(> .noir-tab-list)) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-flow: row;
+}
+
+/** A direct toast title owns the full row; words are never squeezed into a side column. */
+[data-ui][data-mode] :where(.saas-toast:has(> strong), .bento-toast:has(> strong), .max-toast:has(> strong), .bau-toast:has(> strong), .tactile-toast:has(> strong), .neo-toast:has(> strong), .retro-toast:has(> strong), .brutal-toast:has(> strong), .cyber-toast:has(> strong), .y2k-toast:has(> strong), .rg-toast:has(> strong), .luxe-toast:has(> strong), .organic-toast:has(> strong), .utility-toast:has(> strong), .blueprint-toast:has(> strong), .deco-toast:has(> strong), .clay-toast:has(> strong), .terminal-toast:has(> strong), .paper-toast:has(> strong), .noir-toast:has(> strong)) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: .5rem;
+  padding: var(--usk-toast-padding, 1rem);
+}
+[data-ui][data-mode] :where(.saas-toast-title, .saas-toast-body, .saas-toast-actions, .bento-toast-title, .bento-toast-body, .bento-toast-actions, .max-toast-title, .max-toast-body, .max-toast-actions, .bau-toast-title, .bau-toast-body, .bau-toast-actions, .tactile-toast-title, .tactile-toast-body, .tactile-toast-actions, .neo-toast-title, .neo-toast-body, .neo-toast-actions, .retro-toast-title, .retro-toast-body, .retro-toast-actions, .brutal-toast-title, .brutal-toast-body, .brutal-toast-actions, .cyber-toast-title, .cyber-toast-body, .cyber-toast-actions, .y2k-toast-title, .y2k-toast-body, .y2k-toast-actions, .rg-toast-title, .rg-toast-body, .rg-toast-actions, .luxe-toast-title, .luxe-toast-body, .luxe-toast-actions, .organic-toast-title, .organic-toast-body, .organic-toast-actions, .utility-toast-title, .utility-toast-body, .utility-toast-actions, .blueprint-toast-title, .blueprint-toast-body, .blueprint-toast-actions, .deco-toast-title, .deco-toast-body, .deco-toast-actions, .clay-toast-title, .clay-toast-body, .clay-toast-actions, .terminal-toast-title, .terminal-toast-body, .terminal-toast-actions, .paper-toast-title, .paper-toast-body, .paper-toast-actions, .noir-toast-title, .noir-toast-body, .noir-toast-actions) {
+  grid-column: 1 / -1;
+  grid-row: auto;
+  min-inline-size: 0;
+  inline-size: auto;
+  max-inline-size: 100%;
+  margin: 0;
+  overflow-wrap: normal;
+  word-break: normal;
+  white-space: normal;
+  hyphens: none;
+}
+/** Switch faces have one inset owner and remain centered at either end of the track. */
+[data-ui][data-mode] :where(.saas-switch-track, .bento-switch-track, .max-switch-track, .bau-switch-track, .tactile-switch-track, .neo-switch-track, .retro-switch-track, .brutal-switch-track, .cyber-switch-track, .y2k-switch-track, .rg-switch-track, .luxe-switch-track, .organic-switch-track, .utility-switch-track, .blueprint-switch-track, .deco-switch-track, .clay-switch-track, .terminal-switch-track, .paper-switch-track, .noir-switch-track) {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-flex;
+  flex: 0 0 auto;
+  min-inline-size: 2.75rem;
+  min-block-size: 1.625rem;
+  padding: 0;
+}
+[data-ui][data-mode] :where(.saas-switch-thumb, .bento-switch-thumb, .max-switch-thumb, .bau-switch-thumb, .tactile-switch-thumb, .neo-switch-thumb, .retro-switch-thumb, .brutal-switch-thumb, .cyber-switch-thumb, .y2k-switch-thumb, .rg-switch-thumb, .luxe-switch-thumb, .organic-switch-thumb, .utility-switch-thumb, .blueprint-switch-thumb, .deco-switch-thumb, .clay-switch-thumb, .terminal-switch-thumb, .paper-switch-thumb, .noir-switch-thumb) {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  inset-block-start: 50%;
+  inset-block-end: auto;
+  inset-inline-start: .125rem;
+  inset-inline-end: auto;
+  inline-size: var(--usk-switch-thumb-size, 1.125rem);
+  block-size: var(--usk-switch-thumb-size, 1.125rem);
+  min-inline-size: 0;
+  min-block-size: 0;
+  margin: 0;
+  padding: 0;
+  translate: none;
+  transform: translateY(-50%);
+}
+[data-ui][data-mode] :where(.saas-switch input:checked + .saas-switch-track .saas-switch-thumb, .bento-switch input:checked + .bento-switch-track .bento-switch-thumb, .max-switch input:checked + .max-switch-track .max-switch-thumb, .bau-switch input:checked + .bau-switch-track .bau-switch-thumb, .tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb, .neo-switch input:checked + .neo-switch-track .neo-switch-thumb, .retro-switch input:checked + .retro-switch-track .retro-switch-thumb, .brutal-switch input:checked + .brutal-switch-track .brutal-switch-thumb, .cyber-switch input:checked + .cyber-switch-track .cyber-switch-thumb, .y2k-switch input:checked + .y2k-switch-track .y2k-switch-thumb, .rg-switch input:checked + .rg-switch-track .rg-switch-thumb, .luxe-switch input:checked + .luxe-switch-track .luxe-switch-thumb, .organic-switch input:checked + .organic-switch-track .organic-switch-thumb, .utility-switch input:checked + .utility-switch-track .utility-switch-thumb, .blueprint-switch input:checked + .blueprint-switch-track .blueprint-switch-thumb, .deco-switch input:checked + .deco-switch-track .deco-switch-thumb, .clay-switch input:checked + .clay-switch-track .clay-switch-thumb, .terminal-switch input:checked + .terminal-switch-track .terminal-switch-thumb, .paper-switch input:checked + .paper-switch-track .paper-switch-thumb, .noir-switch input:checked + .noir-switch-track .noir-switch-thumb) {
+  inset-inline-start: auto;
+  inset-inline-end: .125rem;
+  transform: translateY(-50%);
+}
+
+/** A drawn check retains preset ink while Art Deco keeps its own enamel marker. */
+[data-ui][data-mode]:where(:not([data-ui="art-deco"])) :where(.saas-check input:checked + .saas-check-control, .bento-check input:checked + .bento-check-control, .max-check input:checked + .max-check-control, .bau-check input:checked + .bau-check-control, .tactile-check input:checked + .tactile-check-control, .neo-check input:checked + .neo-check-control, .retro-check input:checked + .retro-check-control, .brutal-check input:checked + .brutal-check-control, .cyber-check input:checked + .cyber-check-control, .y2k-check input:checked + .y2k-check-control, .rg-check input:checked + .rg-check-control, .luxe-check input:checked + .luxe-check-control, .organic-check input:checked + .organic-check-control, .utility-check input:checked + .utility-check-control, .blueprint-check input:checked + .blueprint-check-control, .deco-check input:checked + .deco-check-control, .clay-check input:checked + .clay-check-control, .terminal-check input:checked + .terminal-check-control, .paper-check input:checked + .paper-check-control, .noir-check input:checked + .noir-check-control)::after {
+  content: "";
+  position: static;
+  inset: auto;
+  clip-path: none;
+  translate: none;
+  display: block;
+  box-sizing: border-box;
+  inline-size: .35em;
+  block-size: .65em;
+  margin: 0 0 .15em;
+  padding: 0;
+  border: solid var(--usk-native-choice-mark-color);
+  border-width: 0 max(2px, var(--usk-native-border-width)) max(2px, var(--usk-native-border-width)) 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  transform: rotate(45deg);
+}
+
+/** Tooltip tone is independent of its position and keeps each preset's silhouette. */
+[data-ui][data-mode] :where(.saas-tooltip-primary, .bento-tooltip-primary, .max-tooltip-primary, .bau-tooltip-primary, .tactile-tooltip-primary, .neo-tooltip-primary, .retro-tooltip-primary, .brutal-tooltip-primary, .cyber-tooltip-primary, .y2k-tooltip-primary, .rg-tooltip-primary, .luxe-tooltip-primary, .organic-tooltip-primary, .utility-tooltip-primary, .blueprint-tooltip-primary, .deco-tooltip-primary, .clay-tooltip-primary, .terminal-tooltip-primary, .paper-tooltip-primary, .noir-tooltip-primary) {
+  background: var(--usk-native-primary);
+  color: var(--usk-native-on-primary);
+  border-color: var(--usk-native-primary);
+  border-style: solid;
+}
+[data-ui][data-mode] :where(.saas-tooltip-secondary, .bento-tooltip-secondary, .max-tooltip-secondary, .bau-tooltip-secondary, .tactile-tooltip-secondary, .neo-tooltip-secondary, .retro-tooltip-secondary, .brutal-tooltip-secondary, .cyber-tooltip-secondary, .y2k-tooltip-secondary, .rg-tooltip-secondary, .luxe-tooltip-secondary, .organic-tooltip-secondary, .utility-tooltip-secondary, .blueprint-tooltip-secondary, .deco-tooltip-secondary, .clay-tooltip-secondary, .terminal-tooltip-secondary, .paper-tooltip-secondary, .noir-tooltip-secondary) {
+  background: var(--usk-native-surface);
+  color: var(--usk-native-text);
+  border: max(1px, var(--usk-native-border-width)) dashed var(--usk-native-primary);
+}
+[data-ui][data-mode] :where(.saas-tooltip-accent, .bento-tooltip-accent, .max-tooltip-accent, .bau-tooltip-accent, .tactile-tooltip-accent, .neo-tooltip-accent, .retro-tooltip-accent, .brutal-tooltip-accent, .cyber-tooltip-accent, .y2k-tooltip-accent, .rg-tooltip-accent, .luxe-tooltip-accent, .organic-tooltip-accent, .utility-tooltip-accent, .blueprint-tooltip-accent, .deco-tooltip-accent, .clay-tooltip-accent, .terminal-tooltip-accent, .paper-tooltip-accent, .noir-tooltip-accent) {
+  background: var(--usk-native-accent);
+  color: var(--usk-native-on-accent);
+  border: 3px double var(--usk-native-accent);
+}
+
+/** Secondary actions have a framed supporting surface rather than ghost paint. */
+[data-ui][data-mode] :where(.saas-button-secondary, .bento-button-secondary, .max-button-secondary, .bau-button-secondary, .tactile-button-secondary, .neo-button-secondary, .retro-button-secondary, .brutal-button-secondary, .cyber-button-secondary, .y2k-button-secondary, .rg-button-secondary, .luxe-button-secondary, .organic-button-secondary, .utility-button-secondary, .blueprint-button-secondary, .deco-button-secondary, .clay-button-secondary, .terminal-button-secondary, .paper-button-secondary, .noir-button-secondary) {
+  background: var(--usk-native-secondary);
+  color: var(--usk-native-on-secondary);
+  border-color: var(--usk-native-primary);
+}
+
+/** Status badges retain an inset without changing seal or medallion dimensions. */
+[data-ui][data-mode] :where(.saas-badge, .bento-badge, .max-badge, .bau-badge, .tactile-badge, .neo-badge, .retro-badge, .brutal-badge, .cyber-badge, .y2k-badge, .rg-badge, .luxe-badge, .organic-badge, .utility-badge, .blueprint-badge, .deco-badge, .clay-badge, .terminal-badge, .paper-badge, .noir-badge) {
+  padding-block: var(--usk-badge-padding-block, .22rem);
+  padding-inline: var(--usk-badge-padding-inline, .6rem);
+}
+
+/** Warning actions and statuses use paired amber/orange roles while retaining opaque text. */
+[data-ui][data-mode] :where(.saas-button-warning, .saas-badge-warning, .bento-button-warning, .bento-badge-warning, .max-button-warning, .max-badge-warning, .bau-button-warning, .bau-badge-warning, .tactile-button-warning, .tactile-badge-warning, .neo-button-warning, .neo-badge-warning, .retro-button-warning, .retro-badge-warning, .brutal-button-warning, .brutal-badge-warning, .cyber-button-warning, .cyber-badge-warning, .y2k-button-warning, .y2k-badge-warning, .rg-button-warning, .rg-badge-warning, .luxe-button-warning, .luxe-badge-warning, .organic-button-warning, .organic-badge-warning, .utility-button-warning, .utility-badge-warning, .blueprint-button-warning, .blueprint-badge-warning, .deco-button-warning, .deco-badge-warning, .clay-button-warning, .clay-badge-warning, .terminal-button-warning, .terminal-badge-warning, .paper-button-warning, .paper-badge-warning, .noir-button-warning, .noir-badge-warning) {
+  background: var(--usk-native-warning);
+  color: var(--usk-native-on-warning);
+  border-color: var(--usk-native-warning);
+  text-shadow: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  [data-ui][data-mode] :where(.saas-button-warning, .saas-badge-warning, .bento-button-warning, .bento-badge-warning, .max-button-warning, .max-badge-warning, .bau-button-warning, .bau-badge-warning, .tactile-button-warning, .tactile-badge-warning, .neo-button-warning, .neo-badge-warning, .retro-button-warning, .retro-badge-warning, .brutal-button-warning, .brutal-badge-warning, .cyber-button-warning, .cyber-badge-warning, .y2k-button-warning, .y2k-badge-warning, .rg-button-warning, .rg-badge-warning, .luxe-button-warning, .luxe-badge-warning, .organic-button-warning, .organic-badge-warning, .utility-button-warning, .utility-badge-warning, .blueprint-button-warning, .blueprint-badge-warning, .deco-button-warning, .deco-badge-warning, .clay-button-warning, .clay-badge-warning, .terminal-button-warning, .terminal-badge-warning, .paper-button-warning, .paper-badge-warning, .noir-button-warning, .noir-badge-warning) {
+    animation: usk-warning-attention var(--usk-warning-attention-duration, 1.8s) ease-in-out infinite;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-ui][data-mode] :where(.saas-button-warning, .saas-badge-warning, .bento-button-warning, .bento-badge-warning, .max-button-warning, .max-badge-warning, .bau-button-warning, .bau-badge-warning, .tactile-button-warning, .tactile-badge-warning, .neo-button-warning, .neo-badge-warning, .retro-button-warning, .retro-badge-warning, .brutal-button-warning, .brutal-badge-warning, .cyber-button-warning, .cyber-badge-warning, .y2k-button-warning, .y2k-badge-warning, .rg-button-warning, .rg-badge-warning, .luxe-button-warning, .luxe-badge-warning, .organic-button-warning, .organic-badge-warning, .utility-button-warning, .utility-badge-warning, .blueprint-button-warning, .blueprint-badge-warning, .deco-button-warning, .deco-badge-warning, .clay-button-warning, .clay-badge-warning, .terminal-button-warning, .terminal-badge-warning, .paper-button-warning, .paper-badge-warning, .noir-button-warning, .noir-badge-warning) {
+    animation: none;
+  }
+}
+@keyframes usk-warning-attention {
+  50% { filter: brightness(1.16); }
+}
+
 }
 /* END GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */

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);
@@ -477,7 +477,8 @@
 /* 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. */
+.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), .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. */
@@ -775,7 +776,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 +799,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 +904,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);
@@ -2411,3 +2413,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,8 @@
 /* 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. */
+.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(.is-active):not([aria-pressed="true"]),
 .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); }
 
@@ -873,7 +874,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 +1692,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,8 @@
 /* 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. */
+.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), .luxe-icon-button { background: var(--luxe-control-bg); }
 .luxe-button, .luxe-icon-button, .luxe-badge, .luxe-nav-link { font-family: var(--luxe-font-control); }
 
 
@@ -779,7 +780,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 +864,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 +1073,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,8 @@
 /* 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. */
+.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-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); }
 
 
@@ -865,7 +866,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);
@@ -2300,6 +2301,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);
@@ -451,7 +451,8 @@
 /* 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. */
+.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 +866,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 +1081,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 +1372,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);
@@ -444,7 +444,8 @@
 /* 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. */
+.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), .saas-icon-button { background: var(--saas-control-bg); }
 .saas-button, .saas-icon-button, .saas-badge, .saas-nav-link { font-family: var(--saas-font-control); }