ui-style-kit-css 2.6.1 → 2.7.0

package/docs/ECOSYSTEM.md

@@ -14,11 +14,11 @@ Before a UI branch or pull request is expected to validate, verify the reviewed
 
 | Library | Current aligned version | Owns |
 |---|---:|---|
-| `ui-style-kit-css@2.6.1` | current release | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
+| `ui-style-kit-css@2.7.0` | current release candidate | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
 | `interactive-surface-css@1.7.3` | compatible state release | interaction-state primitives, surface behavior, state layers, and input affordances |
 | `layout-style-css@3.2.3` | compatible structural release | structural wrappers, grids, sections, app shells, and layout recipes |
 
-The current combination is `ui-style-kit-css@2.6.1`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.6.1` is the current release; the companion versions are reviewed releases. Layout Style `3.2.3` is the compatible structural release. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
+The current combination is `ui-style-kit-css@2.7.0`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.7.0` is the current release candidate; `2.6.1` remains published on npm. The companion versions are reviewed releases. Layout Style `3.2.3` is the compatible structural release. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
 
 ## Layout-to-visual pairing matrix
 

package/docs/PUBLISHING.md

@@ -1,10 +1,10 @@
 # Publishing Guide
 
-## 2.6.1 release workflow
+## 2.7.0 release workflow
 
-The current checkout is a release candidate. [Release preparation notes](RELEASE-2.6.1.md)
+The current checkout is a release candidate. [Release preparation notes](RELEASE-2.7.0.md)
 record the current local scope and gates; existing visual-QA documents are historical
-evidence, not proof that subsequent edits passed browser validation. The 2.6.1
+evidence, not proof that subsequent edits passed browser validation. The 2.7.0
 changelog entry must carry the approved publication date before tagging.
 
 Update the tracked `wiki/` sources with the README and docs. Publishing those pages
@@ -13,9 +13,9 @@ documentation generator is configured in this package; reusable JavaScript helpe
 use JSDoc-compatible comments, and the checked-in build owns generated CSS, manifests,
 icons, README size measurements, and demo asset hashes.
 
-Prepare `ui-style-kit-css@2.6.1` on its release branch, open a pull request against `main`, and merge only after the fast automated gate is green and any requested manual demo review is complete. The aligned companion releases are `layout-style-css@3.2.3` and `interactive-surface-css@1.7.3`.
+Prepare `ui-style-kit-css@2.7.0` on its release branch, open a pull request against `main`, and merge only after the fast automated gate is green and any requested manual demo review is complete. The aligned companion releases are `layout-style-css@3.2.3` and `interactive-surface-css@1.7.3`.
 
-Do not push `v2.6.1` before the reviewed release commit is on `main`. A pushed version tag runs Release Version Alignment, which validates the tag/package/changelog contract and creates the GitHub Release; publishing that release triggers the protected npm workflow.
+Do not push `v2.7.0` before the reviewed release commit is on `main`. A pushed version tag runs Release Version Alignment, which validates the tag/package/changelog contract and creates the GitHub Release; publishing that release triggers the protected npm workflow.
 
 Release Version Alignment owns the fast automated release gate: lint, build, unit checks, the tagged Chromium release-smoke Playwright suite, and packed ecosystem preflight with `--skip-clean-install`. The visual-baseline suite, full UI matrix, and clean-install ecosystem matrix are manual escalation tools, not default push or publish blockers. The protected npm workflow intentionally does not rerun browser gates; it revalidates the immutable tag, package contracts, browser-free compatibility checks, companion commit reachability, the explicit release preflight with `--skip-clean-install`, npm token presence, npm owner authorization, and registry state before publishing.
 
@@ -76,7 +76,7 @@ npm run check:ecosystem:packs -- --layout-repo ../Layout-Style-CSS --interactive
 npm publish
 ```
 
-`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.6.1`, only after the release PR is merged. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, generated dist banners, and ecosystem pins are aligned before publishing. Dispatch the protected npm workflow from the current `main` workflow file when recovering publication for a release that has already passed Release Version Alignment.
+`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.7.0`, only after the release PR is merged. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, generated dist banners, and ecosystem pins are aligned before publishing. Dispatch the protected npm workflow from the current `main` workflow file when recovering publication for a release that has already passed Release Version Alignment.
 
 The repository `NPM_TOKEN` secret must authenticate to npm as a user that appears in `npm owner ls ui-style-kit-css`. If the token belongs to another npm account or lacks package publish rights, npm may report a misleading registry `E404` at publish time.
 
@@ -88,4 +88,4 @@ npm run release:minor
 npm run release:major
 ```
 
-Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. Version `2.6.1` is the current compatible candidate for self-contained preset delivery and the hardened semantic component API; future feature versioning continues to follow this policy.
+Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. Version `2.7.0` is a minor candidate because it adds shared component presentation and spacing controls while retaining the existing preset and semantic component APIs. Future feature versioning continues to follow this policy.

package/docs/RELEASE-2.7.0.md

@@ -0,0 +1,21 @@
+# v2.7.0 release candidate
+
+UI Style Kit CSS 2.7.0 is the minor release candidate for shared component spacing, link presentation, feedback visibility, and preset variant paint. Its entrypoints, 20 presets, and theme inventory remain available. Version 2.6.1 remains published on npm until the release workflow completes.
+
+## Changed
+
+- Added token-backed card spacing and link presentation controls for consumer markup.
+- Made generic structural elements neutral and contained shared component content at narrow widths.
+- Kept status titles in readable neutral ink while status surfaces, edges, and icons carry success, warning, and danger.
+- Centered Paper Editorial status icons and gave native loading indicators the active preset identity.
+- Guarded legacy neutral fallback paint so a button with both a preset class and `data-ui-variant` retains its selected variant in 17 affected presets.
+- Repaired annotation contrast, star sizing, progress centering, text insets, tooltip variation, controls, and warning actions.
+- The options toolbar stays visible during page scrolling at narrow and wide viewport sizes. Section links land below the toolbar.
+- Optional preset specimen modules load when their preset is selected, reducing the initial demo JavaScript transfer.
+- Theme and mode changes update palette-dependent sections while preserving unrelated demo controls and user-entered values.
+- The toolbar uses shared semantic field and select styles with one neutral platform indicator rule in local CSS.
+- Updated development-only dependency resolutions for fast-uri, postcss-selector-parser, and source-map-js.
+
+## Verification
+
+The 2.7.0 candidate passed the focused UI correction tests, the remaining 43 Chromium release smoke cases, package export admission, affected CSS lint, and a clean npm advisory audit. The complete release workflow will repeat its protected gates from the merged commit. Confirm generated demo asset hashes, package exports, and version surfaces before merging. Tagging, GitHub Release creation, and npm publication follow the protected workflow in [PUBLISHING.md](PUBLISHING.md).

package/manifest.json

@@ -5,7 +5,7 @@
     "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
   },
   "name": "ui-style-kit-css",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "cascadeLayers": [
     "ui-style-kit.theme_colors",
     "ui-style-kit.native_elements",
@@ -733,6 +733,11 @@
           "success",
           "warning",
           "danger"
+        ],
+        ".usk-tooltip": [
+          "primary",
+          "secondary",
+          "accent"
         ]
       }
     },
@@ -1091,6 +1096,9 @@
       "toolbar",
       "tooltip",
       "tooltip-arrow",
+      "tooltip-primary",
+      "tooltip-secondary",
+      "tooltip-accent",
       "tooltip-bottom",
       "tooltip-left",
       "tooltip-right",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",
@@ -248,7 +248,7 @@
   },
   "overrides": {
     "colord": "2.9.4",
-    "fast-uri": "3.1.8",
+    "fast-uri": "3.1.9",
     "js-yaml": "4.3.2",
     "nanoid": "3.3.18",
     "postcss": "8.5.23"

package/styles/art-deco.css

@@ -251,7 +251,7 @@
   --usk-native-range-track-shadow: 0 0 0 2px var(--deco-surface-strong);
   --usk-native-range-progress-background: var(--deco-primary);
   --usk-native-range-thumb-size: 1.35rem;
-  --usk-native-range-thumb-background: var(--deco-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid var(--deco-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: 0 0 0 2px var(--deco-surface-strong);
@@ -437,7 +437,8 @@
 /* Theme-responsive component defaults */
 .deco-card, .deco-panel { background: var(--deco-card-bg); }
 .deco-toolbar, .deco-table-wrap { background: var(--deco-control-bg); }
-.deco-button:not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost), .deco-icon-button { background: var(--deco-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.deco-button:where(:not([data-ui-variant])):not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost), .deco-icon-button { background: var(--deco-control-bg); }
 .deco-button, .deco-icon-button, .deco-badge, .deco-nav-link { font-family: var(--deco-font-control); }
 
 
@@ -858,7 +859,7 @@
   --usk-native-range-track-shadow: inset 0 0 0 1px rgb(var(--deco-surface-strong-rgb) / .72);
   --usk-native-range-progress-background: linear-gradient(90deg, var(--deco-primary), var(--deco-warning));
   --usk-native-range-thumb-size: 1.18rem;
-  --usk-native-range-thumb-background: linear-gradient(135deg, var(--deco-warning), var(--deco-primary));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 3px double var(--deco-border);
   --usk-native-range-thumb-radius: 0;
   --usk-native-range-thumb-shadow: 0 0 0 2px rgb(var(--deco-surface-strong-rgb) / .72);
@@ -1035,8 +1036,7 @@
   --usk-native-range-track-background:
     linear-gradient(90deg, var(--deco-surface-soft), rgb(var(--deco-metal-rgb) / .52), var(--deco-surface-soft));
   --usk-native-range-progress-background: var(--deco-jewel-primary);
-  --usk-native-range-thumb-background:
-    linear-gradient(135deg, var(--deco-jewel-warning), var(--deco-jewel-primary));
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-progress-size: .625rem;
   --usk-native-progress-value-background: var(--deco-jewel-primary);
   --usk-native-meter-optimum-background: var(--deco-jewel-success);
@@ -1524,7 +1524,7 @@
   text-indent: 0;
 }
 
-.deco-button:not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost),
+.deco-button:where(:not([data-ui-variant])):not(.deco-button-primary):not(.deco-button-secondary):not(.deco-button-danger):not(.deco-button-warning):not(.deco-button-ghost),
 .deco-icon-button {
   background-color: var(--deco-surface-strong);
   background-image: none;
@@ -1839,7 +1839,7 @@
   --usk-native-choice-checked-background: var(--deco-secondary);
   --usk-native-choice-mark-color: var(--deco-on-secondary);
   --usk-native-range-progress-background: var(--deco-secondary);
-  --usk-native-range-thumb-background: var(--deco-secondary);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-progress-value-background: var(--deco-secondary);
 }
 /** Decorative layers retain stepped borders without clipping focus or content. */
@@ -1901,7 +1901,7 @@
 .deco-icon-button { width: 36px; min-width: 36px; padding: 0; font-family: "Segoe UI Symbol", Arial, sans-serif; font-size: 16px; line-height: 1; }
 .deco-button-loading { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 152px; }
 .deco-button[aria-busy="true"]::after, .deco-icon-button[aria-busy="true"]::after,
-[data-ui="art-deco"] :where(button[aria-busy="true"])::after { content: ""; position: static; display: inline-block; box-sizing: border-box; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; background: var(--deco-spinner-segmented-background); border: 3px double var(--deco-metal); box-shadow: none; border-radius: 50%; -webkit-mask: none; mask: none; animation: deco-spin 1.4s linear infinite; }
+[data-ui="art-deco"] :where(button[aria-busy="true"])::after { content: ""; position: static; display: inline-block; box-sizing: border-box; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; background: repeating-conic-gradient(currentColor 0 8deg, transparent 8deg 16deg, currentColor 16deg 24deg, transparent 24deg 30deg); border: 3px double var(--deco-metal); box-shadow: none; border-radius: 50%; -webkit-mask: none; mask: none; animation: deco-spin 1.4s linear infinite; }
 /** One loader silhouette across prefixed, native, and generated semantic surfaces. */
 .deco-spinner, .deco-loading-spinner, [data-ui="art-deco"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { position: relative; display: inline-block; width: 48px; height: 48px; flex: 0 0 48px; border: 3px double var(--deco-metal); border-radius: 50%; background: var(--deco-spinner-segmented-background); box-shadow: none; clip-path: none; animation: deco-spin 1.4s linear infinite; }
 .deco-spinner::before, .deco-loading-spinner::before, [data-ui="art-deco"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner])::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(var(--deco-metal) 0deg 22deg, transparent 22deg 36deg); -webkit-mask: radial-gradient(transparent 49%, #000 51%); mask: radial-gradient(transparent 49%, #000 51%); }

package/styles/bauhaus.css

@@ -264,7 +264,7 @@
   --usk-native-range-track-shadow: none;
   --usk-native-range-progress-background: var(--bau-primary);
   --usk-native-range-thumb-size: 1.55rem;
-  --usk-native-range-thumb-background: var(--bau-primary);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--bau-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: var(--bau-control-shadow-pressed);
@@ -463,7 +463,8 @@
 /* Theme-responsive component defaults */
 .bau-card, .bau-panel { background: var(--bau-card-bg); }
 .bau-toolbar, .bau-table-wrap { background: var(--bau-control-bg); }
-.bau-button:not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-warning):not(.bau-button-ghost):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover), .bau-icon-button { background: var(--bau-control-bg); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+.bau-button:where(:not([data-ui-variant])):not(.bau-button-primary):not(.bau-button-secondary):not(.bau-button-danger):not(.bau-button-warning):not(.bau-button-ghost):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover), .bau-icon-button { background: var(--bau-control-bg); }
 .bau-button, .bau-icon-button, .bau-badge, .bau-nav-link { font-family: var(--bau-font-control); }
 
 
@@ -863,7 +864,7 @@
   --usk-native-range-track-shadow: inset 0 -2px 0 rgb(var(--bau-text-rgb) / .3);
   --usk-native-range-progress-background: var(--bau-primary);
   --usk-native-range-thumb-size: 1.58rem;
-  --usk-native-range-thumb-background: var(--bau-primary);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 2px solid var(--bau-border);
   --usk-native-range-thumb-radius: 50%;
   --usk-native-range-thumb-shadow: .16rem .16rem 0 rgb(var(--bau-text-rgb) / .7);

package/styles/bento.css

@@ -261,7 +261,7 @@
   --usk-native-range-track-shadow: inset 0 1px 2px rgb(var(--bento-text-rgb) / .12);
   --usk-native-range-progress-background: var(--bento-primary);
   --usk-native-range-thumb-size: 1.35rem;
-  --usk-native-range-thumb-background: var(--bento-surface-strong);
+  --usk-native-range-thumb-background: var(--usk-native-primary);
   --usk-native-range-thumb-border: 1px solid rgb(var(--bento-primary-rgb) / .28);
   --usk-native-range-thumb-radius: .5rem;
   --usk-native-range-thumb-shadow: 0 .35rem .8rem rgb(var(--bento-text-rgb) / .18), inset 0 1px 0 rgb(var(--bento-surface-strong-rgb) / .78);
@@ -793,7 +793,8 @@
 .bento-card-feature { background: var(--bento-tile-accent-bg); border-radius: var(--bento-tile-radius); }
 .bento-icon-medallion {
   background: rgb(var(--bento-primary-rgb) / .10);
-  color: var(--usk-primary-ink, var(--bento-primary));
+  /* Translucent tiles use readable surface ink when no shared palette is active. */
+  color: var(--usk-primary-ink, var(--bento-link));
   border: 1px solid rgb(var(--bento-primary-rgb) / .20);
   border-radius: var(--bento-radius-md);
   box-shadow: var(--bento-shadow-sm);
@@ -1334,6 +1335,9 @@
 [data-ui=bento][data-mode] .bento-stepper > i { background: var(--bento-mosaic-line-strong); height: 2px; width: 23px; }
 
 [data-ui=bento][data-mode] .bento-segment { background: var(--bento-mosaic-panel-soft); border: 1px solid var(--bento-mosaic-line); border-radius: 7px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; }
+/** The public segment button is distinct from the legacy three-column segment container. */
+[data-ui=bento][data-mode] button.bento-segment { display: inline-flex; grid-template-columns: none; align-items: center; justify-content: center; }
+[data-ui=bento][data-mode] button.bento-segment[aria-pressed="true"] { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
 [data-ui=bento][data-mode] .bento-segment button { background: transparent; border: 0; border-radius: 5px; color: var(--bento-mosaic-muted); font-size: 12px; min-height: 24px; }
 [data-ui=bento][data-mode] .bento-segment button.is-active { background: var(--bento-mosaic-panel-raised); box-shadow: 0 2px 8px rgba(24, 35, 72, 0.1); color: var(--usk-primary-ink, var(--bento-mosaic-primary)); font-weight: 800; }
 
@@ -1375,7 +1379,7 @@
 
 [data-ui=bento][data-mode] .bento-loading { align-items: center; display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto 1fr; }
 [data-ui=bento][data-mode] .bento-loading > header { width: 100%; }
-[data-ui=bento][data-mode] .bento-spinner { color: var(--usk-primary-ink, var(--bento-mosaic-primary)); height: 31px; width: 31px; }
+[data-ui=bento][data-mode] .bento-spinner { color: var(--usk-primary-ink, var(--bento-link)); height: 31px; width: 31px; }
 [data-ui=bento][data-mode] .bento-spin { animation: bento-mosaic-spin 1s linear infinite; }
 @keyframes bento-mosaic-spin { to { transform: rotate(360deg); } }
 [data-ui=bento][data-mode] .bento-skeleton { display: grid; gap: 5px; }
@@ -1443,10 +1447,10 @@
 [data-ui=bento][data-mode] .bento-dialog-zone { background: var(--bento-primary); border-color: var(--bento-primary); display: grid; grid-template-rows: auto 1fr; padding: 0; }
 [data-ui=bento][data-mode] .bento-sheet[data-mode="dark"] .bento-dialog-zone { background: var(--bento-primary); border-color: var(--bento-border); }
 [data-ui=bento][data-mode] .bento-dialog-toolbar { align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.15); display: flex; justify-content: space-between; padding: 7px 11px; }
-[data-ui=bento][data-mode] .bento-tabs { display: flex; gap: 3px; }
-[data-ui=bento][data-mode] .bento-tabs button,
+[data-ui=bento][data-mode] .bento-dialog-toolbar .bento-tabs { display: flex; gap: 3px; }
+[data-ui=bento][data-mode] .bento-dialog-toolbar .bento-tabs button,
 [data-ui=bento][data-mode] .bento-dialog-toolbar > button { background: transparent; border: 0; border-radius: 6px; color: var(--bento-on-primary); font-size: 12px; min-height: 26px; padding: 0 8px; }
-[data-ui=bento][data-mode] .bento-tabs button.is-active { background: rgba(255, 255, 255, 0.13); color: var(--bento-on-primary); font-weight: 800; }
+[data-ui=bento][data-mode] .bento-dialog-toolbar .bento-tabs button.is-active { background: rgba(255, 255, 255, 0.13); color: var(--bento-on-primary); font-weight: 800; }
 [data-ui=bento][data-mode] .bento-dialog-surface { align-items: center; display: flex; justify-content: center; padding: 16px; }
 [data-ui=bento][data-mode] .bento-dialog-surface dialog { background: var(--bento-mosaic-panel-raised); border: 1px solid var(--bento-mosaic-line); border-radius: 14px; box-shadow: var(--bento-mosaic-shadow-raised); color: var(--bento-mosaic-text); display: block; margin: 0; max-width: 315px; padding: 26px; position: relative; width: 100%; }
 [data-ui=bento][data-mode] .bento-dialog-surface dialog:not([open]) { display: none; }
@@ -1590,7 +1594,8 @@
 [data-ui=bento][data-mode] .bento-feature-strip, [data-ui=bento][data-mode] .bento-callout-bar { border-radius: 17px; box-shadow: var(--bento-mosaic-shadow); }
 [data-ui=bento][data-mode] .bento-card, [data-ui=bento][data-mode] .bento-panel { padding: 16px; }
 [data-ui=bento][data-mode] .bento-button, [data-ui=bento][data-mode] .bento-icon-button { border-radius: 8px; box-shadow: none; font-weight: 750; text-shadow: none; }
-[data-ui=bento][data-mode] .bento-button:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-warning):not(.bento-button-ghost):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover) { background: var(--bento-surface-soft); }
+/** Attribute-selected variants bypass the legacy neutral-only paint fallback. */
+[data-ui=bento][data-mode] .bento-button:where(:not([data-ui-variant])):not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-warning):not(.bento-button-ghost):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-busy):not(.is-hover) { background: var(--bento-surface-soft); }
 [data-ui=bento][data-mode] .bento-button.bento-button-primary, [data-ui=bento][data-mode] .bento-button.is-primary, [data-ui=bento][data-mode] .bento-button.is-busy { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
 [data-ui=bento][data-mode] .bento-button.bento-button-secondary, [data-ui=bento][data-mode] .bento-button.is-secondary { background: transparent; color: var(--bento-link); border-color: var(--bento-primary); }
 [data-ui=bento][data-mode] .bento-button.bento-button-danger, [data-ui=bento][data-mode] .bento-button.is-danger { background: var(--bento-mosaic-danger-soft); color: var(--bento-text); border-color: var(--bento-danger); }
@@ -1674,7 +1679,7 @@
 [data-ui=bento][data-mode] .bento-segment button.is-active,
 [data-ui=bento][data-mode] .bento-listbox button[aria-selected="true"] { color: var(--bento-link); }
 [data-ui=bento][data-mode] .bento-media-scrim > :where(figcaption, [data-media-caption]) * { color: inherit; }
-[data-ui=bento][data-mode] .bento-tabs button.is-active { background: var(--bento-surface); color: var(--bento-text); }
+[data-ui=bento][data-mode] .bento-dialog-toolbar .bento-tabs button.is-active { background: var(--bento-surface); color: var(--bento-text); }
 [data-ui=bento][data-mode] .bento-switch-row { min-height: 32px; }
 [data-ui=bento][data-mode] .bento-sheet .bento-switch:where(button, span) { flex: 0 0 37px; padding: 2px; min-height: 20px; }
 [data-ui=bento][data-mode] .bento-segment button { min-height: 36px; padding: 4px; }
@@ -1688,8 +1693,10 @@
 [data-ui=bento][data-mode] .bento-loading-spinner,
 [data-ui=bento][data-mode] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
 [data-ui=bento][data-mode] .bento-sheet .bento-spinner { border: 2px solid currentColor; border-top-color: transparent; background: transparent; clip-path: none; border-radius: 50%; box-shadow: none; animation: bento-mosaic-spin 1s linear infinite; width: 28px; height: 28px; inline-size: 28px; block-size: 28px; flex: 0 0 auto; }
-/** Keeps semantic spinner paint aligned with the prefixed readable ink treatment. */
-[data-ui=bento][data-mode] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--usk-primary-ink, var(--bento-spinner-stroke)); }
+/** Every loading entry point uses the same readable ink, including native palettes. */
+[data-ui=bento][data-mode] .bento-spinner,
+[data-ui=bento][data-mode] .bento-loading-spinner,
+[data-ui=bento][data-mode] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--usk-primary-ink, var(--bento-link)); }
 [data-ui=bento][data-mode] .bento-spinner-sm { width: 16px; height: 16px; inline-size: 16px; block-size: 16px; }
 [data-ui=bento][data-mode] .bento-spinner-lg { width: 40px; height: 40px; inline-size: 40px; block-size: 40px; }
 /** Keeps native busy controls on the same Soft Mosaic ring as authored button aliases. */

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);
@@ -524,7 +524,8 @@
 /* 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. */
+.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), .brutal-icon-button { background: var(--brutal-control-bg); }
 .brutal-button, .brutal-icon-button, .brutal-badge, .brutal-nav-link { font-family: var(--brutal-font-control); }
 
 
@@ -835,7 +836,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,8 @@
 /* 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. */
+.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), .clay-icon-button { background: var(--clay-control-bg); }
 .clay-button, .clay-icon-button, .clay-badge, .clay-nav-link { font-family: var(--clay-font-control); }
 
 
@@ -928,7 +929,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);
@@ -1434,7 +1435,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 {