ui-style-kit-css 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to **UI Style Kit CSS** will be documented here.
 
+## [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,17 @@
 # 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.2` is the current v2 patch release. It keeps the `v2.0.1` shared color-scheme and native-element model, documents the public UI-system contracts more clearly, and refreshes development tooling without changing the CSS API.
+
+[Showcase website](https://foscat.github.io/ui-style-kit-css/)
 
 ## Features
 
@@ -18,7 +23,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 +46,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.2`, 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 +105,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.2/dist/ui-style-kit.min.css" />
 ```
 
 ## Basic usage
@@ -290,6 +295,9 @@ ui-style-kit-css/
     PUBLISHING.md
   demo/
     index.html
+    assets/
+      favicon.svg
+      site.webmanifest
 ```
 
 ## Development checks

package/demo/assets/README.md

@@ -0,0 +1,23 @@
+# UI Style Kit CSS favicon pack
+
+Generated for the UI Style Kit CSS demo site.
+
+## Install
+
+1. Keep this folder at `demo/assets/` for the checked-in demo site.
+2. Paste the contents of `favicon-head-snippet.html` into a demo document that also has an `assets/` folder beside it.
+3. If copying the pack into another public root, update the snippet paths to match that app's deployed base path.
+
+## Included files
+
+- `favicon.ico` with 16, 32, and 48 px embedded sizes
+- `favicon.svg` scalable gradient icon
+- PNG favicons: 16, 32, 48, 64, 96, 128, 256 px
+- `apple-touch-icon.png` at 180 px
+- `android-chrome-192x192.png` and `android-chrome-512x512.png`
+- `mstile-150x150.png` and `browserconfig.xml`
+- `safari-pinned-tab.svg`
+- `site.webmanifest`
+
+Theme color: `#070b24`
+Accent color: `#6e56ff`

package/demo/assets/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square150x150logo src="mstile-150x150.png"/>
+      <TileColor>#070b24</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/demo/assets/favicon-head-snippet.html

@@ -0,0 +1,11 @@
+<!-- UI Style Kit CSS favicon pack -->
+<link rel="icon" href="assets/favicon.ico" sizes="any">
+<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
+<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
+<link rel="manifest" href="assets/site.webmanifest">
+<link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#6e56ff">
+<meta name="msapplication-TileColor" content="#070b24">
+<meta name="msapplication-config" content="assets/browserconfig.xml">
+<meta name="theme-color" content="#070b24">

package/demo/assets/favicon.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-labelledby="title desc">
+  <title id="title">UI Style Kit CSS favicon</title>
+  <desc id="desc">Layered gradient rounded-square icon with a white U.</desc>
+  <defs>
+    <linearGradient id="g1" x1="12%" y1="86%" x2="88%" y2="14%">
+      <stop offset="0%" stop-color="#ff8a4c"/>
+      <stop offset="37%" stop-color="#8b5cff"/>
+      <stop offset="72%" stop-color="#5f6cff"/>
+      <stop offset="100%" stop-color="#22d8d1"/>
+    </linearGradient>
+    <linearGradient id="g2" x1="0%" y1="100%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#ff7b55"/>
+      <stop offset="45%" stop-color="#9b5cff"/>
+      <stop offset="100%" stop-color="#22cfff"/>
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="150%">
+      <feDropShadow dx="18" dy="28" stdDeviation="22" flood-color="#03071f" flood-opacity="0.38"/>
+    </filter>
+  </defs>
+  <g filter="url(#shadow)">
+    <rect x="132" y="226" width="610" height="610" rx="126" transform="rotate(-7 437 531)" fill="url(#g1)" opacity="0.82"/>
+    <rect x="184" y="158" width="650" height="650" rx="130" transform="rotate(-4 509 483)" fill="url(#g2)" opacity="0.92"/>
+    <rect x="196" y="104" width="660" height="660" rx="136" transform="rotate(-4 526 434)" fill="url(#g1)"/>
+  </g>
+  <text x="512" y="668" text-anchor="middle" font-family="Inter, Arial, Helvetica, sans-serif" font-size="560" font-weight="900" fill="#ffffff">U</text>
+</svg>

package/demo/assets/safari-pinned-tab.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+  <path fill="#000000" d="M200 160H360V510C360 610 410 650 512 650C614 650 664 610 664 510V160H824V525C824 700 700 800 512 800C324 800 200 700 200 525Z"/>
+</svg>

package/demo/assets/site.webmanifest

@@ -0,0 +1,25 @@
+{
+  "name": "UI Style Kit CSS Demo",
+  "short_name": "UI Style Kit",
+  "description": "Demo site for the UI Style Kit CSS library.",
+  "id": "../",
+  "start_url": "../",
+  "scope": "../",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "theme_color": "#070b24",
+  "background_color": "#070b24",
+  "display": "standalone"
+}

package/demo/index.html

@@ -4,6 +4,17 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>UI Style Kit CSS Demo</title>
+  <!-- Relative favicon paths keep the npm-packaged demo portable from any install location. -->
+  <link rel="icon" href="assets/favicon.ico" sizes="any">
+  <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
+  <link rel="manifest" href="assets/site.webmanifest">
+  <link rel="mask-icon" href="assets/safari-pinned-tab.svg" color="#6e56ff">
+  <meta name="msapplication-TileColor" content="#070b24">
+  <meta name="msapplication-config" content="assets/browserconfig.xml">
+  <meta name="theme-color" content="#070b24">
   <link id="styleKitStylesheet" rel="stylesheet" href="../dist/ui-style-kit.css">
   <style>
     .demo-controls {

package/dist/ui-style-kit.css

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