ui-style-kit-css 1.0.4 → 1.2.2

package/CHANGELOG.md

@@ -1,71 +1,30 @@
 # Changelog
 
-All notable changes to this project will be documented in this file.
+All notable changes to **UI Style Kit CSS** will be documented here.
 
-## [1.0.4] - 2026-05-26
-
-### Changed
-
-- Bumped package version to `1.0.4` for a clean npm republish after failed `1.0.2` / `1.0.3` attempts.
-- Synced release metadata in `package.json` and `package-lock.json` to `1.0.4`.
-
-## [1.0.3] - 2026-05-26
-
-### Fixed
-
-- Standardized changelog formatting and version notation for the latest patch release entry.
-- Replaced legacy demo image references with branded assets (`logo.png`, `assets/seo/social-card.png`).
-
-## [1.0.2] - 2026-05-25
+## [1.2.2] - 2026-06-05
 
 ### Added
 
-- `.github/workflows/sync-package-version-with-main.yml` to keep pull request branch versions aligned with `main`.
-- `.github/workflows/release-version-alignment.yml` to enforce matching GitHub tag, `package.json`, changelog entry, and npm publish target version.
+- Added package exports for the optional `interactive-surface-bridge` stylesheet.
+- Added unit, lint, e2e, and dry-run pack scripts expected by CI and release workflows.
 
 ### Changed
 
-- Bumped package version to `1.0.2`.
-- Upgraded `stylelint` from `^16.24.0` to `^17.12.0`.
-- Updated GitHub Actions in CI:
-  - `actions/checkout` from `v4` to `v6`
-  - `actions/setup-node` from `v4` to `v6`
+- Bundled the interactive surface bridge into the generated dist CSS.
+- Aligned release metadata, package checks, and documentation for the `1.2.2` release.
 
-## [1.0.1] - 2026-05-25
+## 0.2.0
 
-### Fixed
-
-- Patched release metadata and demo HTML (`package.json`, `index.html`) for package stability.
-
-## [1.0.0] - 2026-05-24
-
-### Added
+### Changed
 
-- Full project wiki under `wiki/`
-- `CODE_OF_CONDUCT.md`
-- SEO support files for GitHub Pages demo:
-  - `robots.txt`
-  - `sitemap.xml`
-  - `site.webmanifest`
-  - `browserconfig.xml`
-  - `.nojekyll`
-  - `logo.png`
-  - `assets/seo/social-card.png`
-- `llms.txt`
-- Professional repository scaffolding:
-  - `CONTRIBUTING.md`
-  - `SECURITY.md`
-  - `.editorconfig`
-  - `.gitattributes`
-  - `.github/workflows/ci.yml`
-  - GitHub issue and pull request templates
-  - Dependabot config
-- Stylelint configuration:
-  - `.stylelintrc.json`
-  - `.stylelintignore`
-  - package scripts and dev dependencies
+- Added cascade layer wrapping to all UI style systems so consumer CSS can override the library more predictably.
+- Fixed light-mode primary button contrast for `midnight-gold` and `cyber-lime` across all UI systems.
+- Added native HTML and CSS accessibility coverage to `brutalism`, `cyberpunk`, `y2k`, and `retro-glass` for parity with the newer UI systems.
+- Added build, package, and contrast-check scripts.
+- Expanded package exports to include both extensionless and `.css` import paths.
+- Removed runtime dependencies; this is a CSS-only consumer package.
 
-### Changed
+## 0.1.0
 
-- Expanded `index.html` with comprehensive SEO, social metadata, and JSON-LD structured data.
-- Updated README with quality, community, and SEO sections.
+- Initial library package with 11 UI style systems, 10 shared color themes, and light/dark/contrast modes.

package/CONTRIBUTING.md

@@ -0,0 +1,24 @@
+# Contributing
+
+## Local workflow
+
+```bash
+npm install
+npm run check
+```
+
+The library is CSS-only for consumers. Build and validation scripts run with Node and do not create runtime dependencies for package users.
+
+## Adding or changing a style system
+
+1. Keep the public `data-ui`, `data-theme`, and `data-mode` API stable.
+2. Preserve class prefixes.
+3. Include the native HTML coverage and accessibility layer.
+4. Run `npm run check` before publishing.
+5. Update `STYLE-MAP.md`, `docs/TOKENS.md`, and `CHANGELOG.md` for public API changes.
+
+## Versioning
+
+- Patch: CSS fixes, docs fixes, small accessibility corrections.
+- Minor: new UI style, new theme, new public utility classes.
+- Major: breaking token names, class names, mode names, or import paths.

package/README.md

@@ -1,101 +1,58 @@
 # UI Style Kit CSS
 
-**UI Style Kit CSS** is a CSS-only theme and visual style preset library for standardizing websites, dashboards, admin tools, and customer-facing pages.
+**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 designed to be separate from, but complementary to, **Interactive Surface CSS**. Use this library for visual identity, color themes, UI style presets, and native HTML coverage. Use Interactive Surface CSS for interaction-state animation systems and surface behavior.
+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.
 
 ## Features
 
 - 11 UI style systems
 - 10 shared color schemes
 - `light`, `dark`, and `contrast` modes
-- one combined CSS entry file
-- optional per-style CSS files
-- CSS-only native HTML element coverage
-- visible focus states
-- reduced-motion support
-- high-contrast and forced-colors support
-- print styles
-- NPM/CDN-friendly package structure
+- Combined CSS bundle and optional per-style imports
+- Scoped native HTML element coverage
+- Visible `:focus-visible` defaults
+- Skip-link and visually-hidden helpers per style prefix
+- Optional bridge tokens for `interactive-surface-css`
+- Reduced-motion, high-contrast, forced-colors, and print support
+- Cascade-layered CSS for easier consumer overrides
+- No runtime dependencies
 
-## Wiki
-
-Extended documentation lives in [`wiki/`](wiki/):
-
-- [`wiki/Home.md`](wiki/Home.md)
-- [`wiki/Installation-and-Setup.md`](wiki/Installation-and-Setup.md)
-- [`wiki/Theming-Model.md`](wiki/Theming-Model.md)
-- [`wiki/Class-API.md`](wiki/Class-API.md)
-- [`wiki/UI-Systems.md`](wiki/UI-Systems.md)
-- [`wiki/Accessibility.md`](wiki/Accessibility.md)
-
-## Community
-
-- [Code of Conduct](CODE_OF_CONDUCT.md)
-- [Contributing Guide](CONTRIBUTING.md)
-- [Security Policy](SECURITY.md)
-
-## Quality
-
-```bash
-npm install
-npm run build
-npm run lint:css
-npm test
-```
-
-Run Playwright tests:
+## Install
 
 ```bash
-npm run test:e2e:install
-npm run test:e2e
+npm install ui-style-kit-css
 ```
 
-Auto-fix style issues:
-
-```bash
-npm run lint:css:fix
-```
+## Import
 
-Full release gate:
+Full bundle:
 
-```bash
-npm run verify
+```js
+import "ui-style-kit-css/dist/ui-style-kit.css";
 ```
 
-## Demo SEO Files
-
-The demo page includes production SEO/social metadata plus supporting files for GitHub Pages:
-
-- `index.html` comprehensive metadata + JSON-LD
-- `robots.txt`
-- `sitemap.xml`
-- `site.webmanifest`
-- `browserconfig.xml`
-- `.nojekyll`
-- `logo.png`
-- `assets/seo/social-card.png`
-
-## Install
+Single style system:
 
-```bash
-npm install ui-style-kit-css
+```js
+import "ui-style-kit-css/styles/minimal-saas.css";
+import "ui-style-kit-css/styles/cyberpunk.css";
 ```
 
-## Import
+Shortcut imports are also exported:
 
 ```js
-import "ui-style-kit-css/dist/ui-style-kit.css";
+import "ui-style-kit-css/minimal-saas.css";
+import "ui-style-kit-css/retro-glass.css";
 ```
 
-Or import one style system only:
+Optional bridge for Interactive Surface CSS:
 
 ```js
-import "ui-style-kit-css/styles/minimal-saas.css";
-import "ui-style-kit-css/styles/cyberpunk.css";
+import "ui-style-kit-css/interactive-surface-bridge";
 ```
 
-## Browser / CDN usage
+## CDN usage
 
 After publishing to NPM:
 
@@ -103,10 +60,10 @@ After publishing to NPM:
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@latest/dist/ui-style-kit.min.css" />
 ```
 
-Local usage:
+For production, pin a version:
 
 ```html
-<link rel="stylesheet" href="dist/ui-style-kit.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@1.2.2/dist/ui-style-kit.min.css" />
 ```
 
 ## Basic usage
@@ -118,53 +75,81 @@ Local usage:
       <article class="saas-card">
         <h1 class="saas-title">UI Style Kit CSS</h1>
         <p class="saas-subtitle">Switch UI systems, themes, and modes with attributes.</p>
+        <button class="saas-button saas-button-primary">Primary Action</button>
       </article>
     </section>
   </main>
 </body>
 ```
 
+## Dynamic switching
+
+```js
+document.body.dataset.ui = "cyberpunk";
+document.body.dataset.theme = "midnight-gold";
+document.body.dataset.mode = "dark";
+```
+
 ## UI systems
 
-| UI style | `data-ui` | Class prefix |
-|---|---:|---:|
-| Minimal SaaS | `minimal-saas` | `saas` |
-| Bento UI | `bento` | `bento` |
-| Maximalist / Playful | `maximalist` | `max` |
-| Bauhaus / Swiss Modern | `bauhaus` | `bau` |
-| Skeuomorphic / Tactile | `tactile` | `tactile` |
-| Neumorphism | `neumorphism` | `neo` |
-| Retrofuturism | `retrofuturism` | `retro` |
-| Brutalism | `brutalism` | `brutal` |
-| Cyberpunk | `cyberpunk` | `cyber` |
-| Y2K | `y2k` | `y2k` |
-| Retro Glass | `retro-glass` | `rg` |
+| UI style | `data-ui` | Class prefix | Best for |
+|---|---:|---:|---|
+| Minimal SaaS | `minimal-saas` | `saas` | dashboards, admin tools, SaaS apps |
+| Bento UI | `bento` | `bento` | landing pages, feature sections, showcases |
+| Maximalist / Playful | `maximalist` | `max` | creators, entertainment, bold client sites |
+| Bauhaus / Swiss Modern | `bauhaus` | `bau` | agencies, editorial layouts, design-forward brands |
+| Skeuomorphic / Tactile | `tactile` | `tactile` | premium tactile interfaces, control panels |
+| Neumorphism | `neumorphism` | `neo` | soft dashboards, experimental UI |
+| Retrofuturism | `retrofuturism` | `retro` | futuristic portfolios and product pages |
+| Brutalism | `brutalism` | `brutal` | bold creative websites |
+| Cyberpunk | `cyberpunk` | `cyber` | security, gaming, encryption, tech demos |
+| Y2K | `y2k` | `y2k` | nostalgic, playful, fashion/music/event sites |
+| Retro Glass | `retro-glass` | `rg` | futuristic glass dashboards and hero sections |
 
 ## Color themes
 
-- `midnight-gold`
-- `ocean-steel`
-- `forest-moss`
-- `sunset-ember`
-- `royal-plum`
-- `graphite-cyan`
-- `desert-sage`
-- `rose-quartz`
-- `cyber-lime`
-- `arctic-indigo`
+```txt
+midnight-gold
+ocean-steel
+forest-moss
+sunset-ember
+royal-plum
+graphite-cyan
+desert-sage
+rose-quartz
+cyber-lime
+arctic-indigo
+```
 
 ## Modes
 
-- `light`
-- `dark`
-- `contrast`
+```txt
+light
+dark
+contrast
+```
+
+## Native HTML coverage
 
-## Dynamic switching
+Each style system scopes defaults under `[data-ui="..."]` and covers common native elements, including:
 
-```js
-document.body.dataset.ui = "cyberpunk";
-document.body.dataset.theme = "midnight-gold";
-document.body.dataset.mode = "dark";
+- headings, paragraphs, links, lists, blockquotes, code, pre, mark, abbr
+- images, media, figures, captions
+- forms, fieldsets, labels, inputs, textareas, selects, checkboxes, radios, range, color, file inputs
+- buttons and submit/reset controls
+- tables and captions
+- `details`, `summary`, `dialog`, `progress`, and `meter`
+
+CSS improves accessibility presentation, but it cannot guarantee accessibility by itself. Use semantic HTML, real labels, keyboard-safe JavaScript, meaningful link/button text, and correct ARIA state management.
+
+## Cascade layers
+
+The library styles are wrapped in `@layer ui-style-kit.*`. Unlayered consumer CSS can override the library without specificity fights:
+
+```css
+[data-ui="minimal-saas"][data-theme="arctic-indigo"] {
+  --saas-primary-rgb: 72 91 255;
+}
 ```
 
 ## File structure
@@ -173,27 +158,9 @@ document.body.dataset.mode = "dark";
 ui-style-kit-css/
   package.json
   README.md
-  CONTRIBUTING.md
-  SECURITY.md
-  CODE_OF_CONDUCT.md
   LICENSE
-  index.html
-  logo.png
-  llms.txt
-  robots.txt
-  sitemap.xml
-  site.webmanifest
-  browserconfig.xml
-  assets/
-    seo/
-      social-card.png
-  .stylelintrc.json
-  .stylelintignore
-  .editorconfig
-  .gitattributes
-  .github/
-    workflows/
-      ci.yml
+  CHANGELOG.md
+  STYLE-MAP.md
   dist/
     ui-style-kit.css
     ui-style-kit.min.css
@@ -209,28 +176,23 @@ ui-style-kit-css/
     cyberpunk.css
     y2k.css
     retro-glass.css
-  wiki/
-    Home.md
-    Installation-and-Setup.md
-    Theming-Model.md
-    Class-API.md
-    UI-Systems.md
-    Accessibility.md
+    interactive-surface-bridge.css
+  docs/
+    TOKENS.md
+    STYLE-GUIDE.md
+    PUBLISHING.md
+  demo/
+    index.html
 ```
 
-## Accessibility scope
+## Development checks
 
-UI Style Kit CSS includes CSS-only accessibility presentation helpers:
-
-- scoped native HTML defaults
-- visible `:focus-visible` styles
-- `prefers-reduced-motion` support
-- `prefers-contrast: more` support
-- `forced-colors: active` support
-- print styles
-- skip-link and visually-hidden utilities per style prefix
+```bash
+npm run check
+npm run pack:dry-run
+```
 
-CSS cannot guarantee accessibility by itself. Use semantic HTML, real labels, keyboard-safe JavaScript, and correct ARIA state management for interactive components.
+`npm run check` rebuilds the bundle, runs stylelint, verifies package metadata, and checks core contrast pairs. Optional Playwright visual smoke tests are available through `npm run test:visual` after installing dev dependencies.
 
 ## License
 

package/SECURITY.md

@@ -0,0 +1,18 @@
+# Security Policy
+
+UI Style Kit CSS is a CSS-only package. It does not execute client-side JavaScript and does not collect or transmit data.
+
+Report potential vulnerabilities privately via GitHub Security Advisories (Security tab → Report a vulnerability), or through the preferred private contact channel once configured.
+
+## Scope
+
+In scope:
+
+- Supply-chain/package integrity concerns
+- Malicious or unexpected files in published package contents
+- Unsafe generated demo code
+
+Out of scope:
+
+- Accessibility bugs that do not create a security issue
+- Visual rendering inconsistencies across browsers

package/STYLE-MAP.md

@@ -0,0 +1,36 @@
+# UI Style Kit CSS Style Map
+
+## UI systems
+
+| UI style | `data-ui` | Prefix | File |
+|---|---:|---:|---|
+| Minimal SaaS | `minimal-saas` | `saas` | `styles/minimal-saas.css` |
+| Bento UI | `bento` | `bento` | `styles/bento.css` |
+| Maximalist / Playful | `maximalist` | `max` | `styles/maximalist.css` |
+| Bauhaus / Swiss Modern | `bauhaus` | `bau` | `styles/bauhaus.css` |
+| Skeuomorphic / Tactile | `tactile` | `tactile` | `styles/tactile.css` |
+| Neumorphism | `neumorphism` | `neo` | `styles/neumorphism.css` |
+| Retrofuturism | `retrofuturism` | `retro` | `styles/retrofuturism.css` |
+| Brutalism | `brutalism` | `brutal` | `styles/brutalism.css` |
+| Cyberpunk | `cyberpunk` | `cyber` | `styles/cyberpunk.css` |
+| Y2K | `y2k` | `y2k` | `styles/y2k.css` |
+| Retro Glass | `retro-glass` | `rg` | `styles/retro-glass.css` |
+
+## Themes
+
+- `midnight-gold`
+- `ocean-steel`
+- `forest-moss`
+- `sunset-ember`
+- `royal-plum`
+- `graphite-cyan`
+- `desert-sage`
+- `rose-quartz`
+- `cyber-lime`
+- `arctic-indigo`
+
+## Modes
+
+- `light`
+- `dark`
+- `contrast`

package/{index.html → demo/index.html}

@@ -1,123 +1,10 @@
-<!doctype html>
-<html lang="en-US">
+<!doctype html>
+<html lang="en">
 <head>
   <meta charset="utf-8" />
-  <meta http-equiv="x-ua-compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-  <title>UI Style Kit CSS Demo | 11 UI Systems, 10 Themes, Light/Dark/Contrast</title>
-  <meta
-    name="description"
-    content="Interactive demo for UI Style Kit CSS: a CSS-only style library with 11 visual UI systems, 10 shared color themes, light/dark/contrast modes, and accessibility-focused native HTML coverage."
-  />
-  <meta
-    name="keywords"
-    content="ui style kit, css design system, css theme library, ui components css, accessible css, minimal saas, bento ui, neumorphism, cyberpunk css, y2k ui"
-  />
-  <meta name="title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes, Light/Dark/Contrast" />
-  <meta name="subject" content="CSS UI style library demo" />
-  <meta name="copyright" content="Kyle Foster" />
-  <meta name="url" content="https://foscat.github.io/ui-style-kit-css/" />
-  <meta name="identifier-URL" content="https://foscat.github.io/ui-style-kit-css/" />
-  <meta name="category" content="technology" />
-  <meta name="coverage" content="Worldwide" />
-  <meta name="target" content="all" />
-  <meta name="author" content="Kyle Foster" />
-  <meta name="creator" content="Kyle Foster" />
-  <meta name="publisher" content="UI Style Kit CSS" />
-  <meta name="application-name" content="UI Style Kit CSS Demo" />
-  <meta name="generator" content="UI Style Kit CSS" />
-  <meta name="referrer" content="strict-origin-when-cross-origin" />
-  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
-  <meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
-  <meta name="bingbot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
-  <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
-  <meta name="rating" content="general" />
-  <meta name="distribution" content="global" />
-  <meta name="language" content="English" />
-  <meta http-equiv="content-language" content="en-US" />
-  <meta name="revisit-after" content="7 days" />
-  <meta name="HandheldFriendly" content="true" />
-  <meta name="apple-touch-fullscreen" content="yes" />
-  <meta name="color-scheme" content="light dark" />
-  <meta name="theme-color" content="#0b0f19" />
-  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7ff" />
-  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0b0f19" />
-  <link rel="canonical" href="https://foscat.github.io/ui-style-kit-css/" />
-  <link rel="shortlink" href="https://foscat.github.io/ui-style-kit-css/" />
-  <link rel="alternate" href="https://foscat.github.io/ui-style-kit-css/" hreflang="en" />
-  <link rel="alternate" href="https://foscat.github.io/ui-style-kit-css/" hreflang="x-default" />
-  <link rel="license" href="https://github.com/Foscat/ui-style-kit-css/blob/main/LICENSE" />
-  <link rel="manifest" href="site.webmanifest" />
-  <link rel="stylesheet" href="styles/minimal-saas.css" />
-  <link rel="stylesheet" href="styles/bento.css" />
-  <link rel="stylesheet" href="styles/maximalist.css" />
-  <link rel="stylesheet" href="styles/bauhaus.css" />
-  <link rel="stylesheet" href="styles/tactile.css" />
-  <link rel="stylesheet" href="styles/neumorphism.css" />
-  <link rel="stylesheet" href="styles/retrofuturism.css" />
-  <link rel="stylesheet" href="styles/brutalism.css" />
-  <link rel="stylesheet" href="styles/cyberpunk.css" />
-  <link rel="stylesheet" href="styles/y2k.css" />
-  <link rel="stylesheet" href="styles/retro-glass.css" />
-  <link rel="icon" href="logo.png" type="image/png" sizes="1254x1254" />
-  <link rel="apple-touch-icon" href="logo.png" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-title" content="UI Style Kit CSS" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-  <meta name="mobile-web-app-capable" content="yes" />
-  <meta name="msapplication-TileColor" content="#0b0f19" />
-  <meta name="msapplication-config" content="browserconfig.xml" />
-  <meta name="msapplication-starturl" content="/ui-style-kit-css/" />
-  <meta name="msapplication-navbutton-color" content="#0b0f19" />
-  <meta property="og:type" content="website" />
-  <meta property="og:locale" content="en_US" />
-  <meta property="og:site_name" content="UI Style Kit CSS" />
-  <meta property="og:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
-  <meta
-    property="og:description"
-    content="Try every UI Style Kit CSS visual system, switch shared themes and modes, and preview native element coverage."
-  />
-  <meta property="og:url" content="https://foscat.github.io/ui-style-kit-css/" />
-  <meta property="og:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
-  <meta property="og:image:secure_url" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
-  <meta property="og:image:type" content="image/png" />
-  <meta property="og:image:alt" content="UI Style Kit CSS social preview image" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="UI Style Kit CSS Demo | 11 UI Systems, 10 Themes" />
-  <meta
-    name="twitter:description"
-    content="CSS-only UI style library demo with multi-style switching, shared themes, and accessibility-focused native HTML coverage."
-  />
-  <meta name="twitter:image" content="https://foscat.github.io/ui-style-kit-css/assets/seo/social-card.png" />
-  <meta name="twitter:image:alt" content="UI Style Kit CSS social preview image" />
-  <script type="application/ld+json">
-    {
-      "@context": "https://schema.org",
-      "@graph": [
-        {
-          "@type": "WebSite",
-          "name": "UI Style Kit CSS",
-          "url": "https://foscat.github.io/ui-style-kit-css/",
-          "description": "A CSS-only UI style library with 11 visual systems, 10 themes, and light/dark/contrast modes.",
-          "inLanguage": "en-US",
-          "publisher": {
-            "@type": "Person",
-            "name": "Kyle Foster"
-          }
-        },
-        {
-          "@type": "SoftwareSourceCode",
-          "name": "UI Style Kit CSS",
-          "codeRepository": "https://github.com/Foscat/ui-style-kit-css",
-          "url": "https://foscat.github.io/ui-style-kit-css/",
-          "license": "https://github.com/Foscat/ui-style-kit-css/blob/main/LICENSE",
-          "programmingLanguage": "CSS",
-          "description": "CSS-only visual style and color theme library for modern web interfaces.",
-          "keywords": "css, ui, style-kit, design-system, accessibility, themes"
-        }
-      ]
-    }
-  </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>UI Style Kit CSS Demo</title>
+  <link rel="stylesheet" href="../dist/ui-style-kit.css" />
   <style>
     .demo-controls { position: sticky; top: 0; z-index: 1000; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; padding: 1rem; background: Canvas; color: CanvasText; border-bottom: 1px solid color-mix(in srgb, CanvasText 20%, transparent); }
     .demo-controls label { display: grid; gap: .25rem; font: 700 .85rem system-ui; }
@@ -167,7 +54,7 @@
                 <button class="${p}-button ${p}-button-primary">Primary</button>
                 <button class="${p}-button ${p}-button-secondary">Secondary</button>
                 <button class="${p}-button">Neutral</button>
-                <button class="${p}-icon-button" aria-label="Icon button">&#9733;</button>
+                <button class="${p}-icon-button" aria-label="Icon button">★</button>
                 <span class="${p}-badge ${p}-badge-primary">Primary</span>
                 <span class="${p}-badge ${p}-badge-warning">Warning</span>
               </div>