ui-style-kit-css 2.0.1 → 2.0.3

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 All notable changes to **UI Style Kit CSS** will be documented here.
 
+## [2.0.3] - 2026-07-11
+
+### Added
+
+- Added an active theme and mode token workbench to the demo for editing concrete `--usk-*-rgb` values live and copying drop-in theme override CSS.
+- Added copy buttons with clipboard icons and tooltips to demo code blocks.
+- Added README Mermaid diagrams for the three-library ecosystem and the shared token flow.
+- Added demo resource links for GitHub, GitHub Wiki, npm, Interactive Surface CSS, and Layout Style CSS.
+- Added search, social sharing, web manifest, sitemap, and structured-data metadata for the published demo.
+
+### Changed
+
+- Aligned package metadata for `2.0.3` after the manual `2.0.2` npm release.
+- Split duplicated demo CSS and JavaScript into shared `demo/demo.css` and `demo/demo.js` entrypoint assets.
+- Expanded stylelint coverage to include extracted demo CSS.
+- Updated the demo HTML with static fallback content so crawlers and no-JavaScript users can read the core library description before JavaScript renders the interactive showcase.
+
+### Removed
+
+- Removed unused tracked image assets and stale local release/test artifacts from the repo.
+
+## [2.0.2] - 2026-07-08
+
+### Added
+
+- Added the demo favicon pack, root Pages manifest wiring, and package-demo manifest wiring so release demos have consistent browser icons.
+
+### Changed
+
+- Clarified the UI systems wiki with the full style matrix, core class suffixes, utility tiers, generic loading and tooltip hooks, and Interactive Surface bridge hooks.
+- Polished README release guidance, CDN pinning, and token-model wording for the `2.0.2` maintenance release.
+- Refreshed development tooling for style linting and Playwright verification without changing the public CSS API.
+
+### Security
+
+- Added dependency maintenance coverage for the transitive development-only `js-yaml` advisory path used by stylelint configuration loading.
+
 ## [2.0.1] - 2026-06-22
 
 ### Added

package/README.md

@@ -1,12 +1,48 @@
 # UI Style Kit CSS
 
+[![npm package](https://img.shields.io/npm/v/ui-style-kit-css.svg)](https://www.npmjs.com/package/ui-style-kit-css)
+[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
+
 **UI Style Kit CSS** is a CSS-only theme and UI style preset library for accessible websites, dashboards, admin interfaces, and customer-facing pages.
 
 It is separate from, but complementary to, **Interactive Surface 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.
 
 ## Current Release
 
-`v2.0.1` is the current v2 release. It centralizes color schemes in `styles/theme-colors.css`, centralizes native HTML fallback styling in `styles/native-elements.css`, keeps style-specific component APIs prefix-bound, and ships the Interactive Surface bridge as an opt-in import.
+`v2.0.3` is the current v2 patch release. It keeps the `v2.0.1` shared color-scheme and native-element model, adds a demo theme-override workbench, improves copyable documentation examples, and refreshes release metadata without changing the CSS API.
+
+[Showcase website](https://foscat.github.io/ui-style-kit-css/)
+
+## How the library fits together
+
+UI Style Kit CSS owns visual identity: themes, component paint, native HTML styling, and the prefixed class API. It can be used alone, or paired with the sibling libraries when a project needs structural layout primitives or richer interaction-state behavior.
+
+```mermaid
+flowchart LR
+  App["Application markup"] --> Attrs["data-ui + data-theme + data-mode"]
+  Attrs --> USK["ui-style-kit-css"]
+  USK --> Themes["Shared --usk-* theme roles"]
+  USK --> Components["Prefixed component classes"]
+  USK --> Native["Scoped native HTML fallback"]
+  Layout["layout-style-css"] --> App
+  Surface["interactive-surface-css"] --> Bridge["Optional bridge bundle"]
+  Bridge --> USK
+  Components --> UI["Branded UI surface"]
+  Native --> UI
+  Themes --> UI
+```
+
+```mermaid
+flowchart TB
+  Theme["styles/theme-colors.css"] --> Rgb["Concrete --usk-*-rgb channels"]
+  Rgb --> Modes["Light, dark, and contrast modes"]
+  Modes --> Prefixes["Per-style prefixed aliases"]
+  Prefixes --> Rules["Component, utility, and native rules"]
+  Demo["Demo token workbench"] --> Overrides["Copyable :where([data-ui][data-theme][data-mode]) override block"]
+  Overrides --> Rgb
+```
+
+The demo page documents this flow directly: it shows computed RGB color tokens for the active theme and mode, lets developers edit them live, and copies the exact override block to drop into an app stylesheet.
 
 ## Features
 
@@ -18,7 +54,7 @@ It is separate from, but complementary to, **Interactive Surface CSS**. Use **UI
 - Scoped native HTML element coverage, including semantic containers and inline text elements
 - Visible `:focus-visible` defaults
 - Skip-link and visually-hidden helpers per style prefix
-- Compact shared palette → prefixed alias → UI-rule token model
+- Compact shared palette -> prefixed alias -> UI-rule token model
 - Theme-driven card, panel, control, page-background, and spinner defaults
 - Visible tooltip classes and native `[role="tooltip"]` styling inside each UI scope
 - Font-family override variables for body, headings, controls, and mono text
@@ -41,7 +77,7 @@ Use a single style import for production apps that use one visual system:
 import "ui-style-kit-css/minimal-saas.css";
 ```
 
-In `v2.0.1`, standalone style files import the shared color-scheme layer from `styles/theme-colors.css` and the shared native-element fallback layer from `styles/native-elements.css`. Bundlers that understand CSS `@import` will resolve them automatically. If your build pipeline does not resolve CSS imports, import the shared dependencies before the style file:
+In `v2.0.3`, standalone style files import the shared color-scheme layer from `styles/theme-colors.css` and the shared native-element fallback layer from `styles/native-elements.css`. Bundlers that understand CSS `@import` will resolve them automatically. If your build pipeline does not resolve CSS imports, import the shared dependencies before the style file:
 
 ```js
 import "ui-style-kit-css/theme-colors.css";
@@ -100,7 +136,7 @@ After publishing to NPM:
 For production, pin a version:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.0.1/dist/ui-style-kit.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.0.3/dist/ui-style-kit.min.css" />
 ```
 
 ## Basic usage
@@ -288,10 +324,10 @@ ui-style-kit-css/
     TOKENS.md
     STYLE-GUIDE.md
     PUBLISHING.md
-  demo/
-    index.html
 ```
 
+The checked-in demo, favicon pack, and social preview image stay in the repository for GitHub Pages, but they are intentionally excluded from the npm tarball so installs only receive the CSS library, docs, and metadata.
+
 ## Development checks
 
 ```bash

package/dist/ui-style-kit.css

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.0.1
+ * UI Style Kit CSS v2.0.3
  * CSS theme and UI style preset library.
  * License: MIT
  */