ui-style-kit-css 2.6.1 → 2.7.1

package/styles/brutalism.css

@@ -262,7 +262,7 @@
   --usk-native-range-track-shadow: 4px 4px 0 var(--brutal-border);
   --usk-native-range-progress-background: var(--brutal-primary);
   --usk-native-range-thumb-size: 1.45rem;
-  --usk-native-range-thumb-background: var(--brutal-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--brutal-border);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 4px 4px 0 var(--brutal-border);
@@ -432,7 +432,8 @@
 
 [data-ui="brutalism"][data-mode] { background: var(--brutal-theme-bg); background-size: var(--brutal-theme-bg-size); }
 
-[data-ui="brutalism"] a { color: var(--brutal-link); text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; font-weight: 800; }
+/** Inline-link ink must not override the foreground paired with an action surface. */
+[data-ui="brutalism"] a:where(:not(.brutal-button):not(.brutal-icon-button)) { color: var(--brutal-link); text-decoration-thickness: 0.14em; text-underline-offset: 0.16em; font-weight: 800; }
 [data-ui="brutalism"] ::selection { background: var(--brutal-primary); color: var(--brutal-on-primary); }
 
 /* Spinner geometry follows the brutalism preset's blunt mechanical edges. */
@@ -524,7 +525,9 @@
 /* Theme-responsive component defaults */
 .brutal-card, .brutal-panel { background: var(--brutal-card-bg); }
 .brutal-toolbar, .brutal-table-wrap { background: var(--brutal-control-bg); }
-.brutal-button:not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-warning):not(.brutal-button-ghost), .brutal-icon-button { background: var(--brutal-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.brutal-button:where(:not([data-ui-variant])):not(.brutal-button-primary):not(.brutal-button-secondary):not(.brutal-button-danger):not(.brutal-button-warning):not(.brutal-button-ghost):not(.brutal-button-outline-heavy), .brutal-icon-button { background: var(--brutal-control-bg); }
 .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link { font-family: var(--brutal-font-control); }
 
 
@@ -638,7 +641,7 @@
 .brutal-button.brutal-button-outline-heavy,
 .brutal-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--brutal-primary));
+  color: var(--usk-primary-ink, var(--brutal-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--brutal-primary);
@@ -835,7 +838,7 @@
   --usk-native-range-track-shadow: inset 0 0 0 2px var(--brutal-surface-strong);
   --usk-native-range-progress-background: repeating-linear-gradient(90deg, var(--brutal-primary) 0 .9rem, var(--brutal-warning) .9rem 1.05rem);
   --usk-native-range-thumb-size: 1.24rem;
-  --usk-native-range-thumb-background: var(--brutal-text);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 3px solid var(--brutal-warning);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: .14rem .14rem 0 var(--brutal-primary);

package/styles/clay.css

@@ -259,7 +259,7 @@
   --usk-native-range-track-shadow: inset 0 4px rgb(255 255 255 / .3);
   --usk-native-range-progress-background: var(--clay-primary);
   --usk-native-range-thumb-size: 1.65rem;
-  --usk-native-range-thumb-background: var(--clay-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--clay-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: inset 0 4px rgb(255 255 255 / .3);
@@ -445,7 +445,9 @@
 /* Theme-responsive component defaults */
 .clay-card, .clay-panel { background: var(--clay-card-bg); }
 .clay-toolbar, .clay-table-wrap { background: var(--clay-control-bg); }
-.clay-button:not(.clay-button-primary):not(.clay-button-secondary):not(.clay-button-danger):not(.clay-button-warning):not(.clay-button-ghost), .clay-icon-button { background: var(--clay-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.clay-button:where(:not([data-ui-variant])):not(.clay-button-primary):not(.clay-button-secondary):not(.clay-button-danger):not(.clay-button-warning):not(.clay-button-ghost):not(.clay-button-outline-heavy), .clay-icon-button { background: var(--clay-control-bg); }
 .clay-button, .clay-icon-button, .clay-badge, .clay-nav-link { font-family: var(--clay-font-control); }
 
 
@@ -637,7 +639,7 @@
 .clay-button.clay-button-outline-heavy,
 .clay-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--clay-primary));
+  color: var(--usk-primary-ink, var(--clay-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--clay-primary);
@@ -894,7 +896,8 @@
   --clay-molded-track: var(--clay-grain-image), linear-gradient(180deg, var(--clay-material-contact), transparent 46%), var(--clay-material-inset);
   --clay-molded-raised: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-material-raised);
   --clay-molded-thumb: var(--clay-grain-image), radial-gradient(circle at 34% 24%, var(--clay-material-highlight), transparent 46%), linear-gradient(176deg, var(--clay-material-highlight), transparent 44%), var(--clay-thumb-material);
-  --clay-molded-primary: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-primary);
+  /** Raised highlights stay above the label, preserving the pigment's paired ink. */
+  --clay-molded-primary: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 20%), var(--clay-pigment-primary);
   --clay-molded-success: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-success);
   --clay-molded-warning: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-warning);
   --clay-molded-danger: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-danger);
@@ -928,7 +931,7 @@
   --usk-native-range-track-shadow: var(--clay-carved-shadow);
   --usk-native-range-progress-background: var(--clay-molded-primary);
   --usk-native-range-thumb-size: 1.32rem;
-  --usk-native-range-thumb-background: var(--clay-molded-thumb);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--clay-material-seam);
   --usk-native-range-thumb-radius: 43% 57% 47% 53% / 52% 45% 55% 48%;
   --usk-native-range-thumb-shadow: inset 0 0 0 1px var(--clay-material-seam), var(--clay-filled-shadow);
@@ -1072,11 +1075,12 @@
 }
 
 /** Gives every button the shallow relief and debossed lettering shown in the reference. */
+/** Action and icon labels use the control surface; thumb pigment belongs to movable parts. */
 .clay-button, .clay-icon-button,
 [data-ui="clay"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
   min-height: 2rem;
   padding: .34rem .64rem;
-  background-color: var(--clay-thumb-material);
+  background-color: var(--clay-control-bg);
   background-image: var(--clay-grain-image), linear-gradient(174deg, var(--clay-material-highlight), transparent 34%);
   background-size: var(--clay-grain-size), auto;
   border: 1px solid var(--clay-material-seam);
@@ -1101,7 +1105,8 @@
   text-shadow: var(--clay-label-relief);
 }
 .clay-button-primary { background: var(--clay-molded-primary); color: var(--clay-pigment-ink); border-color: var(--clay-pigment-primary); }
-.clay-button-primary:hover { background-color: var(--clay-pigment-primary-hover); border-color: var(--clay-pigment-primary-hover); }
+/** Hover changes the relief and edge without lightening the pigment beneath its label. */
+.clay-button-primary:hover { background: var(--clay-molded-primary); border-color: var(--clay-pigment-primary-hover); }
 .clay-button-secondary { background: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), var(--clay-pigment-secondary); color: var(--clay-on-secondary); border-color: var(--clay-pigment-secondary); }
 .clay-button-secondary:hover { background-color: var(--clay-pigment-secondary); border-color: var(--clay-pigment-secondary); }
 .clay-button-danger { background: var(--clay-molded-danger); color: rgb(var(--clay-danger-text-rgb)); border-color: var(--clay-pigment-danger); }
@@ -1126,7 +1131,7 @@
 }
 .clay-button.clay-button-outline-heavy, .clay-button-outline-heavy {
   background-color: var(--clay-material-raised);
-  color: var(--usk-primary-ink, var(--clay-primary));
+  color: var(--usk-primary-ink, var(--clay-text));
   border: 2px solid var(--clay-primary);
   clip-path: var(--clay-chip-clip);
 }
@@ -1228,7 +1233,8 @@
   .clay-badge-danger { background: var(--clay-grain-image), linear-gradient(176deg, var(--clay-material-highlight), transparent 42%), color-mix(in srgb, var(--clay-pigment-danger) 28%, var(--clay-material-raised)); color: var(--clay-material-ink); border-color: color-mix(in srgb, var(--clay-pigment-danger), var(--clay-material-seam) 52%); }
 }
 .clay-nav { gap: 0; padding: .18rem; background: var(--clay-material-inset); border-color: var(--clay-material-seam); border-radius: .48rem .6rem .52rem .56rem; box-shadow: var(--clay-carved-shadow); clip-path: var(--clay-control-clip); filter: var(--clay-edge-filter); }
-.clay-nav-link { min-height: 2.1rem; padding: .42rem .62rem; border-radius: .3rem .38rem .32rem .36rem; clip-path: var(--clay-control-clip); font-weight: 500; text-shadow: var(--clay-label-relief); }
+/** Navigation labels retain full surface ink over the textured clay slab. */
+.clay-nav-link { min-height: 2.1rem; padding: .42rem .62rem; border-radius: .3rem .38rem .32rem .36rem; clip-path: var(--clay-control-clip); font-weight: 500; color: var(--clay-text); text-shadow: var(--clay-label-relief); }
 .clay-nav-link[aria-current="page"], .clay-nav-link.is-active { background: var(--clay-molded-primary); color: var(--clay-pigment-ink); box-shadow: var(--clay-filled-shadow); clip-path: var(--clay-control-clip); filter: var(--clay-edge-filter); }
 
 .clay-alert { padding: .7rem .82rem; background-color: var(--clay-material-raised); background-image: var(--clay-grain-image), linear-gradient(170deg, var(--clay-material-highlight), transparent 42%); background-size: var(--clay-grain-size), auto; border: 1px solid var(--clay-material-seam); border-inline-start-width: .28rem; border-radius: .42rem .55rem .46rem .52rem; box-shadow: var(--clay-relief-shadow); clip-path: var(--clay-control-clip); filter: var(--clay-edge-filter); }
@@ -1434,7 +1440,8 @@
   flex: 0 0 auto;
   border: 0;
   background:
-    radial-gradient(circle at 50% 8%, var(--clay-material-highlight) 0 3%, var(--clay-pigment-primary) 4% 9%, transparent 10%),
+    /* The leading bead stays visible on every button fill; other beads retain their pigments. */
+    radial-gradient(circle at 50% 8%, var(--clay-material-highlight) 0 3%, currentColor 4% 9%, transparent 10%),
     radial-gradient(circle at 80% 20%, var(--clay-material-highlight) 0 3%, var(--clay-accent) 4% 9%, transparent 10%),
     radial-gradient(circle at 92% 50%, var(--clay-material-highlight) 0 3%, var(--clay-pigment-secondary) 4% 9%, transparent 10%),
     radial-gradient(circle at 80% 80%, var(--clay-material-highlight) 0 3%, var(--clay-pigment-success) 4% 9%, transparent 10%),

package/styles/clean-defaults.css

@@ -48,6 +48,26 @@
 }
 
 @layer ui-style-kit.clean_defaults {
+/** Inline hyperlinks and their labels must not inherit the control spacing floor. */
+[data-ui][data-mode] :where(a:not([class]), a[data-link-presentation="inline"], a[data-link-presentation="inline"] > .usk-link__label, a[data-link-presentation="inline"] > .usk-link__icon) {
+  display: inline;
+  min-block-size: 0;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+/** Explicit control links preserve a wrapping, aligned action composition. */
+[data-ui][data-mode] :where(a[data-link-presentation="control"]) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--usk-link-gap, .5rem);
+}
+
 /** Keeps semantic state paint paired when a preset also owns broad anchor or input rules. */
 [data-ui][data-mode] :where(
   [class~="usk-pagination-link"][aria-current="page"],

package/styles/component-composition.css

@@ -5,6 +5,69 @@
    classes. Visual paint remains preset-owned.
 ========================================================= */
 
+@layer ui-style-kit.clean_defaults {
+/** Long chip content shrinks and wraps before it can displace the separate remove action. */
+[data-ui][data-mode] .usk-chip > .usk-chip__label {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+/** Avatar initials fill the containing avatar instead of using a font-relative centering offset. */
+[data-ui][data-mode] .usk-avatar > .usk-avatar__fallback {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  inline-size: auto;
+  block-size: auto;
+  margin: 0;
+  padding: 0;
+  translate: none;
+}
+
+/** Centered dialogs retain auto margins; edge drawers keep their own placement contract. */
+[data-ui][data-mode] :where(.usk-modal:not(.usk-drawer)) {
+  margin: auto;
+}
+
+/** Compound controls own their gap; labels and decorative icons have no separate inset. */
+[data-ui][data-mode] :where(.usk-button__label, .usk-button__icon, .usk-nav-link__label, .usk-nav-link__icon, .usk-link__label, .usk-link__icon) {
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/** Explicit card density overrides preset padding through one shared token. */
+[data-ui][data-mode] :where([class~="usk-card"], [class~="ui-card"])[data-card-spacing="flush"] {
+  --usk-card-padding: 0;
+}
+
+[data-ui][data-mode] :where([class~="usk-card"], [class~="ui-card"])[data-card-spacing="compact"] {
+  --usk-card-padding: var(--usk-card-padding-compact, .75rem);
+}
+
+[data-ui][data-mode] :where([class~="usk-card"], [class~="ui-card"])[data-card-spacing="normal"] {
+  --usk-card-padding: var(--usk-card-padding-normal, 1rem);
+}
+
+[data-ui][data-mode] :where([class~="usk-card"], [class~="ui-card"])[data-card-spacing="comfortable"] {
+  --usk-card-padding: var(--usk-card-padding-comfortable, clamp(1.25rem, 2.5vw, 2rem));
+}
+
+[data-ui][data-mode] :where([class~="usk-card"], [class~="ui-card"]):is([data-card-spacing="flush"], [data-card-spacing="compact"], [data-card-spacing="normal"], [data-card-spacing="comfortable"]) {
+  padding: var(--usk-card-padding);
+}
+
+/** Explicit structural boundaries opt out of element insets and panel paint without a global reset. */
+[data-ui][data-mode] :where(div, main, section, header, footer, nav, article, aside)[data-ui-structure="neutral"] {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+}
+
 @layer ui-style-kit.components {
 /* Shared component composition keeps icon content aligned without overriding preset paint. */
 .usk-button__icon {

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 */