ui-style-kit-css 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -4,6 +4,69 @@ All notable changes to **UI Style Kit CSS** will be documented here.
 
 ## [Unreleased]
 
+## [2.5.0] - 2026-09-26
+
+### Added
+
+- Promoted 46 reusable Tier A and Tier B selectors for tabs, pagination, breadcrumb, skeleton, empty state, metric, chip, avatar, stepper, toast, popover, menu, segmented control, file upload, dropzone, and listbox patterns.
+- Added semantic chip and toast variants plus explicit skeleton-shape and step-state hooks.
+- Added deterministic generic-markup coverage for every promoted selector across all 20 runtime-selectable presets.
+
+### Changed
+
+- Extended the generated universal component foundation so each promoted semantic selector resolves through preset-native paint tokens without moving behavioral state into CSS.
+- Reclassified promoted suffixes from preset-only extras into the universal class inventory while retaining existing prefixed compatibility classes.
+- Aligned the current compatibility matrix with the reviewed `interactive-surface-css@1.7.3` and `layout-style-css@3.2.3` release commits.
+
+### Fixed
+
+- Recalibrated the pairwise identity snapshot metric to retain subtle palette differences and use viewport-specific component floors, replacing accumulating pair exceptions with one documented comparison contract.
+
+### Tests
+
+- Added a focused promotion contract covering manifest roles, universal source suffixes, implementation status, variants, and state hooks.
+- Expanded semantic alias, fixture, and declaration-artifact checks for the 75-selector stable component API.
+- Verified all approved desktop and mobile component and native-control snapshot pairs against the repaired identity contract.
+
+## [2.4.2] - 2026-09-24
+
+### Changed
+
+- Aligned the local candidate matrix with `interactive-surface-css@1.7.1` and `layout-style-css@3.2.1` while retaining the published minimum support floor.
+- Expanded migration guidance for preset-prefixed hooks, preset-private tokens, and legacy `variant-*` state classes without adding a public variant API.
+- Restored Organic Modern's authored select indicator, preserved Y2K's indicator through its late field material, aligned Retro Glass info icons with their semantic status color, and strengthened small Art Deco copy over layered dark cards.
+- Scoped Bento's retained Soft Mosaic tokens to its sheet, and restored state-specific specificity for its invalid and read-only controls.
+- Capped Art Deco's 12rem action measure at the available flex width so 200% text zoom remains contained.
+- Preserved distinct Y2K invalid and read-only paint for both prefixed and unclassed native fields after its late bevel reset.
+
+### Tests
+
+- Added focused Chromium coverage for semantic cards at 320px and 390px with native controls, long content, internally scrolling wide tables, and icon-only actions.
+- Added a short-height fixture proving consumer-owned sticky positioning and internal scrolling survive the visual bundle.
+- Added representative preset coverage proving icon-only actions retain neutral or subtle paint rather than inheriting primary action treatment.
+- Added an exact-version coordinated-candidate preflight so unpublished local companion packages can be verified without weakening the registry-backed minimum matrix.
+- Made WebKit's exhaustive Neumorphism pass use an engine-appropriate timeout and sampled Technical Blueprint connector geometry atomically to avoid cross-frame reflow noise.
+- Refreshed the fixed visual baselines after the verified identity corrections and calibrated pairwise comparison floors against the closest valid preset pairs.
+- Extended the visual state probes to include material-bearing pseudo-elements, covering Neo Noir's themed and pressed action faces.
+- Verified the complete 4,500-case preset, theme, mode, and browser matrix with resumable one-case recovery for the Y2K state regression.
+
+## [2.4.1] - 2026-09-20
+
+### Added
+
+- Added five gap-filling shared color themes—`signal-yellow`, `botanical-green`, `cobalt-electric`, `stone-graphite`, and `walnut-clay`—with complete light, dark, and contrast role sets.
+
+### Changed
+
+- Expanded the manifest-driven browser matrix to 20 presets × 25 themes × 3 modes × 3 engines (4,500 combinations).
+- Refreshed demo search, Open Graph, Twitter, JSON-LD, sitemap, web-manifest, favicon, and social-preview metadata for the current 20-system and 25-theme inventory.
+
+### Fixed
+
+- Preserved vivid Signal Yellow fills while giving primary and accent text readable light-mode ink across prefixed and semantic components.
+- Extended theme-owned ink selection to every light theme while keeping decorative fills vivid, and corrected demo utility surfaces and Minimal SaaS alert copy across every shared theme and mode.
+- Pinned patched `colord` and `js-yaml` transitive tooling releases after the final release audit identified newly disclosed denial-of-service advisories.
+
 ## [2.4.0] - 2026-09-08
 
 ### Added

package/README.md

@@ -7,11 +7,13 @@
 
 It is separate from, but complementary to, **Interactive Surface CSS** and **Layout Style CSS**. Use **UI Style Kit CSS** for visual identity, color themes, UI presets, layout mood, and native HTML styling. Use **Interactive Surface CSS** for interaction-state animation systems and surface behavior. Use **Layout Style CSS** for responsive layout wrappers, grid systems, macro-structure positioning, and container scaffolding.
 
-## Current release target
+## Current release
 
-`v2.4.0` gives all 20 UI style systems a complete native-control identity across selects, choices, ranges, progress, meters, file/color/date launch controls, indicators, and scrollbars. Existing themes, modes, selectors, default/focused/visual/bridge entrypoints, and the 3,600-case browser matrix remain compatible, and parser-based minification remains exactly pinned.
+Version `v2.5.0` is a backward-compatible semantic-component release. It promotes reusable tabs, pagination, breadcrumb, skeleton, empty-state, metric, chip, avatar, stepper, toast, popover, menu, segmented-control, file-upload, dropzone, and listbox patterns into the stable `.ui-*` API while preserving preset-owned paint.
 
-This is the local 2.4.0 release candidate, not a claim of npm publication. It also adds native light/dark/contrast palettes when `data-theme` is omitted, a palette-aware color workbench, and a unified demo with style-specific components. See the [2.4.0 release preparation notes](docs/RELEASE-2.4.0.md) for scope and verification boundaries.
+The available browser matrix continues to cover 20 presets × 25 themes × 3 modes × 3 engines (4,500 combinations). The `v2.4.1` theme additions and Signal Yellow contrast corrections remain unchanged.
+
+The `v2.4.0` baseline introduced complete native-control identities, native light/dark/contrast palettes when `data-theme` is omitted, a palette-aware color workbench, a unified demo with style-specific components, and exactly pinned parser-based minification. See the [2.5.0 release notes](docs/RELEASE-2.5.0.md) for the release scope and verification boundaries.
 
 [Showcase website](https://foscat.github.io/ui-style-kit-css/)
 
@@ -54,11 +56,11 @@ These libraries stay standalone, but the current aligned set is:
 
 | Library | Aligned version | Owns |
 |---|---:|---|
-| `ui-style-kit-css@2.4.0` | current release target | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
-| `interactive-surface-css@1.7.0` | compatible state release | interaction-state primitives, surface behavior, state layers, and input affordances |
-| `layout-style-css@3.1.0` | compatible structural release | structural wrappers, grids, sections, app shells, and layout recipes |
+| `ui-style-kit-css@2.5.0` | current release | 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 |
 
-UI Style Kit `2.4.0` is the current release target and is verified with Interactive Surface `1.7.0`. Layout Style `3.1.0` 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`.
+UI Style Kit `2.5.0` is the current release and is aligned with the reviewed Interactive Surface `1.7.3` and Layout Style `3.2.3` releases. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
 
 Use one, two, or all three depending on the project. UI Style Kit does not require the sibling libraries, and the optional bridge only maps shared `--usk-*` roles into Interactive Surface tokens when consumers import it.
 
@@ -71,7 +73,7 @@ For import order, ownership boundaries, and adoption paths, see the [Ecosystem g
 ## Features
 
 - 20 UI style systems
-- 20 shared color schemes
+- 25 shared color schemes
 - `light`, `dark`, and `contrast` modes
 - Native preset colors when no shared theme is selected
 - Combined CSS bundle and per-style production imports
@@ -113,7 +115,7 @@ Use the generated default bundle for semantic components that can switch across
 import "ui-style-kit-css";
 ```
 
-Use `ui-style-kit-css/visual.css` for the same 29-selector semantic runtime API without the deprecated prefixed layout selectors. The generated default, visual, and with-bridge bundles all support all 20 `data-ui` values.
+Use `ui-style-kit-css/visual.css` for the same 75-selector semantic runtime API without the deprecated prefixed layout selectors. The generated default, visual, and with-bridge bundles all support all 20 `data-ui` values.
 
 Applications fixed to one preset can use a generated focused visual entrypoint. It includes semantic aliases scoped to that preset only:
 
@@ -167,15 +169,15 @@ When the bridge is attached, add `.interactive-surface` to interactable elements
 
 | Import | Raw | Gzip | Best for |
 |---|---:|---:|---|
-| `ui-style-kit-css/dist/ui-style-kit.min.css` | ~1978 KB | ~379 KB | Compatible runtime UI-system switchers and demos |
-| `ui-style-kit-css/visual.min.css` | ~1962 KB | ~377 KB | Runtime visual switching with consumer-owned layout |
-| `ui-style-kit-css/with-bridge.css` | ~2309 KB | ~400 KB | Deprecated runtime switcher plus stateful bridge |
-| `ui-style-kit-css/theme-colors.css` | ~50 KB | ~6 KB | Shared color schemes for standalone style imports |
+| `ui-style-kit-css/dist/ui-style-kit.min.css` | ~2151 KB | ~394 KB | Compatible runtime UI-system switchers and demos |
+| `ui-style-kit-css/visual.min.css` | ~2135 KB | ~392 KB | Runtime visual switching with consumer-owned layout |
+| `ui-style-kit-css/with-bridge.css` | ~2494 KB | ~418 KB | Deprecated runtime switcher plus stateful bridge |
+| `ui-style-kit-css/theme-colors.css` | ~64 KB | ~8 KB | Shared color schemes for standalone style imports |
 | `ui-style-kit-css/native-elements.css` | ~31 KB | ~5 KB | Shared native HTML fallback styling |
 | `ui-style-kit-css/content-overflow.css` | ~20 KB | ~3 KB | Shared long-text containment for standalone style imports |
 | `ui-style-kit-css/interactive-surface-theme.css` | ~9 KB | ~1 KB | Canonical token-and-paint bridge for Interactive Surface state core |
-| `ui-style-kit-css/visual/minimal-saas.css` | ~205 KB | ~30 KB | Focused Minimal SaaS, including semantic aliases and shared foundations |
-| `ui-style-kit-css/visual/industrial-utility.css` | ~278 KB | ~39 KB | Focused Industrial Utility, including its instrumentation styles |
+| `ui-style-kit-css/visual/minimal-saas.css` | ~334 KB | ~43 KB | Focused Minimal SaaS, including semantic aliases and shared foundations |
+| `ui-style-kit-css/visual/industrial-utility.css` | ~409 KB | ~53 KB | Focused Industrial Utility, including its instrumentation styles |
 
 ## CDN usage
 
@@ -188,7 +190,7 @@ Use the latest published NPM package:
 For production, pin the exact approved release rather than relying on `latest`:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.4.0/dist/ui-style-kit.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.4.1/dist/ui-style-kit.min.css" />
 ```
 
 ## Basic usage
@@ -232,7 +234,7 @@ The demo labels this choice **None — style defaults**. Do not assign the liter
 
 ## Semantic component API
 
-`manifest.json#semanticComponentApi` is the authoritative specification for the implemented generic component API. Its 29 selectors keep the same class names while `data-ui` changes across all 20 presets. `implementationStatus` records the two retained `.ui-spinner` and `.ui-tooltip` hooks, the 27 generated semantic aliases, and an empty pending set.
+`manifest.json#semanticComponentApi` is the authoritative specification for the implemented generic component API. Its 75 selectors keep the same class names while `data-ui` changes across all 20 presets. `implementationStatus` records the two retained `.ui-spinner` and `.ui-tooltip` hooks, the 73 generated semantic aliases, and an empty pending set.
 
 | Role | Generic selectors | Switching coverage |
 |---|---|---|
@@ -246,15 +248,34 @@ The demo labels this choice **None — style defaults**. Do not assign the liter
 | Table | `.ui-table`, `.ui-table-wrap` | all 20 presets |
 | Progress | `.ui-progress`, `.ui-progress-bar` | all 20 presets |
 | Toolbar | `.ui-toolbar` | all 20 presets |
+| Tabs | `.ui-tabs`, `.ui-tab-list`, `.ui-tab`, `.ui-tab-panel` | all 20 presets |
+| Pagination | `.ui-pagination`, `.ui-pagination-item`, `.ui-pagination-link` | all 20 presets |
+| Breadcrumb | `.ui-breadcrumb`, `.ui-breadcrumb-list`, `.ui-breadcrumb-item`, `.ui-breadcrumb-link`, `.ui-breadcrumb-separator` | all 20 presets |
+| Skeleton | `.ui-skeleton` | all 20 presets |
+| Empty state | `.ui-empty-state`, `.ui-empty-state-icon`, `.ui-empty-state-title`, `.ui-empty-state-body`, `.ui-empty-state-actions` | all 20 presets |
+| Metric | `.ui-metric`, `.ui-metric-label`, `.ui-metric-value`, `.ui-metric-detail` | all 20 presets |
+| Chip | `.ui-chip`, `.ui-chip-group` | all 20 presets |
+| Avatar | `.ui-avatar`, `.ui-avatar-group` | all 20 presets |
+| Stepper | `.ui-stepper`, `.ui-step`, `.ui-step-marker`, `.ui-step-label` | all 20 presets |
+| Toast | `.ui-toast-stack`, `.ui-toast`, `.ui-toast-title`, `.ui-toast-body`, `.ui-toast-actions` | all 20 presets |
+| Popover | `.ui-popover` | all 20 presets |
+| Menu | `.ui-menu`, `.ui-menu-item`, `.ui-menu-group`, `.ui-menu-separator` | all 20 presets |
+| Segmented control | `.ui-segmented-control`, `.ui-segment` | all 20 presets |
+| File upload | `.ui-file-upload`, `.ui-dropzone` | all 20 presets |
+| Listbox | `.ui-listbox`, `.ui-listbox-option` | all 20 presets |
 | Existing generic hooks | `.ui-spinner`, `.ui-tooltip` | all 20 presets |
 
-The only new attribute is context-constrained `data-ui-variant`. Omit it for the neutral treatment.
+Semantic paint variants use context-constrained `data-ui-variant`. Omit it for the neutral treatment.
 
 | Selector | `data-ui-variant` values |
 |---|---|
-| `.ui-button` | `primary`, `secondary`, `danger`, `ghost` |
+| `.ui-button` | `primary`, `secondary`, `warning`, `danger`, `ghost` |
 | `.ui-badge` | `primary`, `secondary`, `success`, `warning`, `danger` |
 | `.ui-alert` | `success`, `warning`, `danger` |
+| `.ui-chip` | `primary`, `secondary`, `success`, `warning`, `danger` |
+| `.ui-toast` | `info`, `success`, `warning`, `danger` |
+
+Skeleton shape uses `data-shape="text|circle|block"`. Step workflow presentation uses `data-state="complete|current|upcoming|error"`; React and application code remain responsible for behavior and ARIA state.
 
 ```html
 <body data-ui="minimal-saas" data-theme="arctic-indigo" data-mode="light">
@@ -337,10 +358,17 @@ newsprint-crimson
 foundry-amber
 soft-orchid
 electric-noir
+signal-yellow
+botanical-green
+cobalt-electric
+stone-graphite
+walnut-clay
 ```
 
 Color schemes are defined once in `styles/theme-colors.css` as shared `--usk-*` RGB roles. Each UI style maps those shared roles back to its public prefix, so existing component rules still consume variables such as `--saas-primary`, `--bau-surface`, and `--rg-on-primary`.
 
+See the [color-theme reference](docs/COLOR-THEMES.md) for the five gap-filling palettes, their intended roles, and representative light/dark values.
+
 ## Commercial component modifiers
 
 The cross-style API also includes reusable marketing and service-site patterns. These suffixes are available for all 20 UI systems and inherit the active `data-theme` / `data-mode` palette:

package/STYLE-MAP.md

@@ -96,6 +96,11 @@ The bridge inherits from shared `--usk-*` color roles, then applies `.interactiv
 - `foundry-amber`
 - `soft-orchid`
 - `electric-noir`
+- `signal-yellow`
+- `botanical-green`
+- `cobalt-electric`
+- `stone-graphite`
+- `walnut-clay`
 
 ## Modes