ui-style-kit-css 2.6.1 → 2.7.1

package/docs/COMPONENT-SPACING.md

@@ -0,0 +1,154 @@
+# Shared component spacing and structural composition
+
+UI Style Kit owns component appearance and internal geometry. Layout Style CSS
+owns page arrangement, measures, gutters and section rhythm. Interactive Surface
+CSS owns state feedback. React exposes those contracts without another paint layer.
+
+## Choose the existing owner
+
+| Need | Public configuration |
+| --- | --- |
+| Paragraph hyperlink | A classless native anchor, or `data-link-presentation="inline"` on a classed anchor |
+| Aligned navigation action | `data-link-presentation="control"`; use the navigation component for current-page semantics |
+| Card content inset | `data-card-spacing="flush\|compact\|normal\|comfortable"` on `.usk-card` or `.ui-card` |
+| Structural shell, article or aside | `data-ui-structure="neutral"` with the optional component-composition stylesheet |
+| Wider content lane | Layout `.ly-wrapper--content`, `--wide`, `--workspace`, `--full` or `--breakout` |
+| Screen gutter | Layout `--ly-wrapper-gutter`; the wrapper incorporates the device safe area |
+| Section block spacing | Layout `.ly-section`, `--compact` or `--flush` |
+| Centering or wrapping actions | Layout center/cluster primitives and their public alignment/gap options |
+
+React candidates expose `Link presentation`, `Card spacing`, `Layout.Wrapper
+measure`, and `Layout.Section spacing`. Undecorated Layout article/aside semantics
+carry the neutral structural hook. Existing wrapper and section APIs require no
+new Layout release.
+
+## Inline links
+
+```html
+<p>Read <a href="/guide">the guide</a>, then continue.</p>
+<a class="usk-link" data-link-presentation="inline" href="/guide">
+  <span class="usk-link__label">A long wrapping guide title</span>
+</a>
+```
+
+The link and label have no independent margin, padding, border or control fill.
+Focus and theme colors remain available. Omitting the presentation attribute on
+an existing classed link retains its preset defaults. Control presentation adds
+inline alignment and uses `--usk-link-gap`; it does not turn navigation into a
+button action or replace the application's accessible name.
+
+## Card density
+
+```html
+<div class="usk-card" data-card-spacing="comfortable">
+  <article data-ui-structure="neutral">Structural content inside one card.</article>
+</div>
+```
+
+| Density | Default inset | Optional token |
+| --- | --- | --- |
+| flush | 0 | No inset |
+| compact | .75rem | `--usk-card-padding-compact` |
+| normal | 1rem | `--usk-card-padding-normal` |
+| comfortable | `clamp(1.25rem, 2.5vw, 2rem)` | `--usk-card-padding-comfortable` |
+
+Omitting density preserves the preset's card inset. Configure the density token
+at an application boundary when product composition needs another measure;
+avoid descendant `.usk-card` padding overrides. Compound card regions remain
+available for media and content composition.
+
+Native article/aside decoration remains the default. Neutral structure is an
+explicit opt-in, so existing standalone semantic panels retain their appearance.
+The same hook is available on div, main, section, header, footer and navigation
+boundaries to prevent the element floor from accumulating through a nested shell.
+Layout's later structural layer continues to own configured gutters and section
+padding. React's neutral Layout article/aside treatment is automatic; other
+neutral shell boundaries remain explicit native data attributes.
+
+## Compact components and feedback
+
+Empty-state symbols use `--usk-empty-state-icon-size` (default `2.75rem`) so
+compact preset typography does not reduce the illustration to body-text size.
+Chip, tab and segment frames use `--usk-compact-content-padding-block` (`.35rem`)
+and `--usk-compact-content-padding-inline` (`.65rem`). Status badges use
+`--usk-badge-padding-block` (`.22rem`) and `--usk-badge-padding-inline` (`.6rem`).
+These are frame insets; compound labels and icons do not add another inset.
+Popover, menu and listbox frames use `--usk-overlay-padding` (`.5rem`);
+menu items and listbox options use `--usk-option-padding-block` (`.55rem`)
+and `--usk-option-padding-inline` (`.7rem`) to keep their text clear of edges.
+
+Progress tracks and fills do not inherit the element-spacing floor. Switch
+thumbs use `--usk-switch-thumb-size` (`1.125rem`) and remain centered inside the
+track at either end. Presets continue to supply their silhouettes and materials;
+native slider thumbs use the preset's action color.
+
+A toast with a direct title places that title above its content, across the full
+available row. Title and body text wrap at word boundaries rather than splitting
+letters into a narrow side column. The toast owns its content inset through
+`--usk-toast-padding` (`1rem`). Page columns and the surrounding card layout remain
+Layout Style CSS or application responsibilities.
+
+Tooltip tone and placement are independent:
+
+```html
+<span class="usk-tooltip" data-ui-variant="primary" role="tooltip">Primary tip</span>
+<span class="usk-tooltip" data-ui-variant="secondary" role="tooltip">Context cue</span>
+<span class="usk-tooltip" data-ui-variant="accent" role="tooltip">Action hint</span>
+```
+
+Primary uses the paired action fill and ink. Secondary uses an outlined context
+treatment, and accent uses a double edge and the paired accent colors. Existing
+unqualified tooltips keep their preset defaults. Advanced prefixed markup can
+combine, for example, `saas-tooltip saas-tooltip-right saas-tooltip-secondary`.
+
+Secondary buttons use paired secondary fill and ink to remain distinct from ghost
+actions. Warning buttons and badges use the warm warning palette and a slow
+brightness pulse; text stays opaque. `--usk-warning-attention-duration` defaults
+to `1.8s`. Reduced-motion users receive the static warm treatment. Disabled radios
+use muted paint and a dashed edge; forced-color mode retains system colors.
+
+These contracts are covered by `tests/e2e/demo-annotation-regressions.spec.js`.
+
+Status messages retain success, warning and danger tints after preset material
+rules. Titles and body copy use the same readable message ink. Status color
+remains in the surface tint, leading edge and symbol; title hierarchy comes from
+the preset's weight and typography. Small titles do not need text shadows or
+outlines to compensate for a low-contrast foreground.
+Browsers without `color-mix()` retain solid status fills with paired readable
+foregrounds; the tinted treatment is a guarded enhancement.
+
+Icon tiles pair their ink with the painted face, including inverted theme
+materials and translucent plates. Metallic rims remain decorative around a
+stable glyph surface. Busy indicators retain preset geometry while using visible
+paint against the actual button face; palette accent fill alone is insufficient
+for a small moving mark. The shared coverage is in
+`tests/e2e/feedback-visibility.spec.js`.
+
+Paper Editorial message symbols occupy a fixed 24px lane and stay centered
+against the full message, including wrapped copy. Text and optional dismiss
+buttons occupy separate grid columns. Native loader hooks must retain the active
+preset's geometry, paint and animation, including decorative pseudo-elements.
+These contracts are covered by `tests/e2e/feedback-layout.spec.js`.
+
+## Migration and validation
+
+The inline link and component-label fixes correct the global element spacing
+floor. Optional component composition also owns modal auto margins, avatar
+fallback centering and chip-label containment. Edge drawers retain their
+placement contract. These contracts have focused browser regressions in
+`tests/e2e/css-ownership-composition.spec.js`.
+
+Consumer migrations must be checked against the exact packed candidate artifacts.
+An unchanged published dependency pin does not mean these candidate contracts
+are present in that installed release. Publish UI Style Kit before adopting the
+React/consumer release pair; temporary tarball references belong only in ignored
+integration fixtures.
+
+## React variant attributes and prefixed classes
+
+React buttons may combine a semantic class, a preset class and
+`data-ui-variant`. Legacy neutral-only paint rules exclude attribute-selected
+variants through `:where(:not([data-ui-variant]))`. This keeps their specificity
+stable while allowing the selected primary, secondary, danger or ghost surface
+to retain its paired foreground and decoration. The mixed-class regression
+checks all presets, palettes, modes and pressed states.

package/docs/DEMO-SHOWCASE.md

@@ -4,6 +4,22 @@ The default `index.html` and `demo/index.html` present one shared library showca
 semantic components, overview, color tokens, prefixed components, native HTML,
 the Interactive Surface bridge, and usage examples.
 
+## Interaction contrast
+
+Hover, press, and keyboard focus must preserve readable labels. A filled action
+keeps its paired foreground and background; an inline-link rule must not recolor
+a button or navigation component. Gloss and grain remain decorative rather than
+replacing the label's underlying paint.
+
+The release regressions check 20 presets, 25 named palettes plus native palettes,
+three modes, and five interaction states, including hover on pressed buttons.
+They cover prefixed, semantic, and mixed React class models, anchor buttons,
+native controls, disclosures, navigation, and table labels. The
+contrast probe samples the central label lane and accounts for translucent paint
+and full-face pseudo-elements; positioned dropdown arrows are outside that lane.
+
+Recheck the rendered demo after changing palette values in the workbench.
+
 ## Preview state and palette editing
 
 Use `?ui=tactile&theme=None&mode=dark` to preview a native palette. The `personality`

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.1` | current UI version | 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.1`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.7.1` is the current UI version. 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.1 release workflow
 
-The current checkout is a release candidate. [Release preparation notes](RELEASE-2.6.1.md)
+This guide prepares version `2.7.1`. [Release preparation notes](RELEASE-2.7.1.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.1
 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.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`.
 
-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.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.
 
 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.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.
 
 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.1` is a patch release because it repairs interaction paint and contrast while retaining the 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/docs/RELEASE-2.7.1.md

@@ -0,0 +1,21 @@
+# v2.7.1 interaction contrast patch
+
+This compatible patch preserves the 20 presets, 25 named color themes, native palettes, three modes, and existing public entrypoints.
+
+## Corrections
+
+- Neutral hover rules no longer replace filled action backgrounds while retaining their foregrounds.
+- Outlined CTAs retain readable surface ink at rest and their paired primary fill on hover. Neutral defaults exclude these paint-owning modifiers; Clay icon buttons use the control surface beneath their labels.
+- Inline-link presentation excludes prefixed and semantic action classes. The build generates semantic aliases only for selectors that positively select a promoted component; exclusions alone cannot introduce a competing component rule. Variant exclusions also cover mixed prefixed/semantic markup used by React consumers.
+- Primary, danger, warning, and current-navigation labels retain a matched foreground and background. Decorative reflections stay outside the central label lane.
+- Neumorphism table values use readable surface ink, and Bento success and warning badge labels remain readable on translucent tints.
+- Neo Noir warning paint belongs to its skewed face, preserving the component geometry.
+- Y2K cut modifiers preserve primary action paint, and the compact trust seal contains its full number and caption.
+
+## Verification boundary
+
+Focused Chromium regressions cover all presets, native plus named palettes, all modes, and rest, hover, active, keyboard-focus, and pressed-hover states. Fixtures include prefixed buttons, both semantic namespaces, mixed React class models, anchor actions, marketing CTAs, icon actions, native fields, disclosures, navigation, and tables. The React paint check asserts the real theme IDs visited, preventing a repeated native palette from masquerading as named-theme coverage.
+
+Manual demo interaction uses the connected local Opera browser because Gnomie Browser Commander's runtime is unavailable in this session. Local evidence, protected GitHub release checks, npm publication, and live demo verification remain separate gates. No jsdoc2md generator is configured in this CSS package; JSDoc-compatible comments and the repository build maintain the generated artifacts.
+
+Publication follows [PUBLISHING.md](PUBLISHING.md). The aligned companions remain Interactive Surface CSS 1.7.3 and Layout Style CSS 3.2.3.

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.1",
   "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.1",
   "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,9 @@
 /* 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. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.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):not(.deco-button-outline-heavy), .deco-icon-button { background: var(--deco-control-bg); }
 .deco-button, .deco-icon-button, .deco-badge, .deco-nav-link { font-family: var(--deco-font-control); }
 
 
@@ -629,7 +631,7 @@
 .deco-button.deco-button-outline-heavy,
 .deco-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--deco-primary));
+  color: var(--usk-primary-ink, var(--deco-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--deco-primary);
@@ -858,7 +860,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 +1037,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);
@@ -1058,6 +1059,12 @@
   }
 }
 
+/** Named palettes preserve their tested primary paint pair instead of tempering only the fill. */
+[data-ui="art-deco"][data-theme][data-mode] :is(.deco-button-primary, .deco-nav-link[aria-current="page"], .deco-nav-link.is-active) {
+  background-color: var(--deco-primary);
+  color: var(--deco-on-primary);
+}
+
 /**
  * Lets explicit runtime token edits render exact user-supplied action colors
  * while untouched shared themes keep the tempered Art Deco jewel paint.
@@ -1524,7 +1531,9 @@
   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),
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+
+.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):not(.deco-button-outline-heavy),
 .deco-icon-button {
   background-color: var(--deco-surface-strong);
   background-image: none;
@@ -1839,7 +1848,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 +1910,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,9 @@
 /* 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. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.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(.bau-button-outline-heavy):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); }
 
 
@@ -661,7 +663,7 @@
 .bau-button.bau-button-outline-heavy,
 .bau-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--bau-primary));
+  color: var(--usk-primary-ink, var(--bau-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--bau-primary);
@@ -863,7 +865,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);
@@ -949,7 +951,8 @@
 .bau-button-primary { background: var(--bau-primary); color: var(--bau-on-primary); border-color: var(--bau-primary); }
 .bau-button-secondary { background: var(--bau-secondary); color: var(--bau-on-secondary); border-color: var(--bau-secondary); }
 .bau-button-danger { background: var(--bau-danger); color: var(--bau-on-danger); border-color: var(--bau-danger); }
-.bau-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--bau-primary)); border-color: transparent; }
+/** Native palettes need surface ink when the primary fill is too dark for an unfilled action. */
+.bau-button-ghost { background: transparent; color: var(--usk-primary-ink, var(--bau-text)); border-color: transparent; }
 }
 
 @layer ui-style-kit.bauhaus {

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);
@@ -454,7 +454,8 @@
 /* Theme-responsive component defaults */
 .bento-card, .bento-panel { background: var(--bento-card-bg); }
 .bento-toolbar, .bento-table-wrap { background: var(--bento-control-bg); }
-.bento-button:where(: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-hover):not(.is-busy)), .bento-icon-button { background: var(--bento-control-bg); }
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+.bento-button:where(:not(.bento-button-primary):not(.bento-button-secondary):not(.bento-button-danger):not(.bento-button-warning):not(.bento-button-ghost):not(.bento-button-outline-heavy):not(.is-primary):not(.is-secondary):not(.is-danger):not(.is-ghost):not(.is-hover):not(.is-busy)), .bento-icon-button { background: var(--bento-control-bg); }
 .bento-button, .bento-icon-button, .bento-badge, .bento-nav-link { font-family: var(--bento-font-control); }
 
 
@@ -500,8 +501,9 @@
 .bento-badge { display: inline-flex; align-items: center; gap: var(--bento-space-1); min-height: 1.75rem; padding: .38rem .72rem; background: var(--bento-tile-secondary-bg); color: var(--bento-text); border: 1px solid var(--bento-tile-edge); border-radius: var(--bento-radius-sm); box-shadow: inset 0 1px 0 rgb(var(--bento-surface-strong-rgb) / .62); font-size: .8125rem; font-weight: 800; line-height: 1; }
 .bento-badge-primary { background: var(--bento-primary); color: var(--bento-on-primary); border-color: var(--bento-primary); }
 .bento-badge-secondary { background: rgb(var(--bento-primary-rgb) / .10); color: var(--usk-primary-ink, var(--bento-primary)); border-color: transparent; }
-.bento-badge-success { background: rgb(var(--bento-success-rgb) / .14); color: var(--bento-success); border-color: transparent; }
-.bento-badge-warning { background: rgb(var(--bento-warning-rgb) / .14); color: var(--bento-warning); border-color: transparent; }
+/** Warning and success tints use surface text rather than their solid signal fill as ink. */
+.bento-badge-success { background: rgb(var(--bento-success-rgb) / .14); color: var(--bento-text); border-color: transparent; }
+.bento-badge-warning { background: rgb(var(--bento-warning-rgb) / .14); color: var(--bento-text); border-color: transparent; }
 .bento-badge-danger { background: rgb(var(--bento-danger-rgb) / .14); color: var(--bento-danger); border-color: transparent; }
 
 .bento-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bento-space-2); padding: var(--bento-space-2); background: var(--bento-card-bg); border: 1px solid var(--bento-tile-edge); border-radius: var(--bento-tile-radius); box-shadow: var(--bento-tile-shadow); }
@@ -674,7 +676,7 @@
 .bento-button.bento-button-outline-heavy,
 .bento-button-outline-heavy {
   background: transparent;
-  color: var(--usk-primary-ink, var(--bento-primary));
+  color: var(--usk-primary-ink, var(--bento-text));
   border-style: solid;
   border-width: 2px;
   border-color: var(--bento-primary);
@@ -793,7 +795,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);
@@ -816,7 +819,7 @@
 }
 .bento-button.bento-button-outline-heavy, .bento-button-outline-heavy {
   background: rgb(var(--bento-surface-strong-rgb) / var(--bento-panel-alpha));
-  color: var(--usk-primary-ink, var(--bento-primary));
+  color: var(--usk-primary-ink, var(--bento-text));
   border-width: 1px;
   border-color: rgb(var(--bento-primary-rgb) / .32);
   border-radius: var(--bento-control-radius);
@@ -1209,7 +1212,6 @@
 
 [data-ui=bento][data-mode] :is(.bento-button, .bento-icon-button) {
   align-items: center;
-  background: var(--bento-mosaic-panel-soft);
   border: 1px solid var(--bento-mosaic-line);
   border-radius: 8px;
   display: inline-flex;
@@ -1220,6 +1222,8 @@
   padding: 0 16px;
   transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
 }
+/** Mosaic neutral paint yields to the outlined CTA's paired hover fill. */
+[data-ui=bento][data-mode] :is(.bento-button, .bento-icon-button):where(:not(.bento-button-outline-heavy)) { background: var(--bento-mosaic-panel-soft); }
 [data-ui=bento][data-mode] .bento-button:hover:not(:disabled) { transform: translateY(-1px); }
 [data-ui=bento][data-mode] .bento-button:active:not(:disabled) { transform: translateY(1px); }
 [data-ui=bento][data-mode] .bento-button.is-primary,
@@ -1334,6 +1338,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 +1382,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 +1450,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 +1597,9 @@
 [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. */
+/** Neutral defaults exclude outlined actions so their hover fill and ink remain paired. */
+[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(.bento-button-outline-heavy):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 +1683,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 +1697,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. */