ui-style-kit-css 1.2.1 → 2.0.1

package/docs/PUBLISHING.md

@@ -0,0 +1,28 @@
+# Publishing Guide
+
+## Dry run
+
+```bash
+npm run check
+npm run pack:dry-run
+```
+
+`npm run check` rebuilds dist CSS, runs stylelint, executes package, class API, shared theme-color, and vendor-prefix unit checks, validates core text/link contrast pairs and filled component `on-*` contrast pairs, and confirms package metadata. `npm run pack:dry-run` shows the exact files that would publish.
+
+## Publish
+
+```bash
+npm publish
+```
+
+For GitHub releases, create or dispatch a release for the matching package tag, such as `v2.0.1`. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, and generated dist banners are aligned before publishing.
+
+## Versioning
+
+```bash
+npm run release:patch
+npm run release:minor
+npm run release:major
+```
+
+Use patch for fixes, minor for new themes/styles, and major for breaking public API changes. The 2.x release line is major because color-scheme authoring moved from per-UI `--<prefix>-*-rgb` blocks to shared `--usk-*-rgb` roles in `styles/theme-colors.css`.

package/docs/STYLE-GUIDE.md

@@ -0,0 +1,30 @@
+# Choosing a UI Style
+
+| UI style | Best for |
+|---|---|
+| Minimal SaaS | Dashboards, admin tools, SaaS apps, documentation, internal systems |
+| Bento UI | Landing pages, portfolio sections, feature pages, product showcases |
+| Maximalist / Playful | Creators, entertainment brands, events, bold client sites |
+| Bauhaus / Swiss Modern | Agencies, artists, editorial pages, design-forward brands |
+| Tactile / Skeuomorphic | Premium sites, distinctive client interfaces, control-panel metaphors |
+| Neumorphism | Soft dashboards, experimental UI, visual demos |
+| Retrofuturism | Futuristic product pages, portfolios, technology showcases |
+| Brutalism | Bold landing pages, anti-template websites, creative brands |
+| Cyberpunk | Security, gaming, encryption, developer demos, nightlife/tech branding |
+| Y2K | Nostalgic, playful, music/fashion/event sites |
+| Retro Glass | Futuristic premium apps, glass dashboards, hero sections |
+
+All styles share the same 10 color schemes through `styles/theme-colors.css`, so changing `data-theme` affects the active color scheme independently from the selected UI treatment.
+
+Use `data-mode="contrast"` for high-contrast variants and pair it with semantic HTML for best accessibility outcomes.
+
+## Visual regression baseline
+
+The repository includes optional Playwright visual smoke checks:
+
+```bash
+npm install
+npm run test:visual
+```
+
+Run visual tests before major releases or after large CSS refactors.

package/docs/TOKENS.md

@@ -0,0 +1,276 @@
+# Token Contract
+
+Each UI style uses its own prefix, but concrete color schemes are shared. The 2.0 token model is deliberately compact:
+
+```txt
+shared scheme channels -> prefixed aliases -> UI rules
+```
+
+`styles/theme-colors.css` defines the active scheme and mode once as `--usk-*` RGB channels. Each UI style maps those shared channels to its public prefix, then component rules consume prefixed functional variables. `styles/native-elements.css` owns native HTML fallback selectors and consumes `--usk-native-*` tokens that each preset maps back to its own public variables.
+
+## Prefixes
+
+| UI style | Prefix |
+|---|---:|
+| Minimal SaaS | `saas` |
+| Bento UI | `bento` |
+| Maximalist / Playful | `max` |
+| Bauhaus / Swiss Modern | `bau` |
+| Skeuomorphic / Tactile | `tactile` |
+| Neumorphism | `neo` |
+| Retrofuturism | `retro` |
+| Brutalism | `brutal` |
+| Cyberpunk | `cyber` |
+| Y2K | `y2k` |
+| Retro Glass | `rg` |
+
+## Stable functional tokens
+
+Replace `<prefix>` with the style prefix:
+
+```css
+--<prefix>-bg
+--<prefix>-fg
+--<prefix>-surface
+--<prefix>-surface-fg
+--<prefix>-surface-strong
+--<prefix>-surface-soft
+--<prefix>-text
+--<prefix>-text-muted
+--<prefix>-muted
+--<prefix>-border
+--<prefix>-control-bg
+--<prefix>-control-fg
+--<prefix>-primary
+--<prefix>-primary-hover
+--<prefix>-secondary
+--<prefix>-secondary-hover
+--<prefix>-accent
+--<prefix>-success
+--<prefix>-warning
+--<prefix>-danger
+--<prefix>-link
+--<prefix>-focus
+--<prefix>-theme-bg
+--<prefix>-theme-bg-size
+--<prefix>-card-bg
+--<prefix>-spinner-track
+--<prefix>-spinner-stroke
+--<prefix>-spinner-accent
+```
+
+## Filled-surface text aliases
+
+Filled UI uses compact `on-*` aliases instead of a large foreground-token matrix:
+
+```css
+--<prefix>-on-primary
+--<prefix>-on-secondary
+--<prefix>-on-accent
+--<prefix>-on-success
+--<prefix>-on-warning
+--<prefix>-on-danger
+```
+
+Backward-compatible aliases `--<prefix>-primary-text` and `--<prefix>-secondary-text` remain available and point to the same filled-surface text colors.
+
+## Shared RGB palette channels
+
+Concrete theme/mode blocks now live in `styles/theme-colors.css` and expose shared RGB channels:
+
+```css
+--usk-bg-rgb
+--usk-surface-rgb
+--usk-surface-strong-rgb
+--usk-surface-soft-rgb
+--usk-text-rgb
+--usk-text-muted-rgb
+--usk-border-rgb
+--usk-primary-rgb
+--usk-primary-hover-rgb
+--usk-primary-text-rgb
+--usk-secondary-rgb
+--usk-secondary-hover-rgb
+--usk-secondary-text-rgb
+--usk-accent-rgb
+--usk-accent-text-rgb
+--usk-success-rgb
+--usk-success-text-rgb
+--usk-warning-rgb
+--usk-warning-text-rgb
+--usk-danger-rgb
+--usk-danger-text-rgb
+--usk-link-rgb
+--usk-focus-rgb
+```
+
+Each standalone style file imports the shared color and native layers, then aliases those roles back to the style prefix:
+
+```css
+[data-ui="minimal-saas"][data-theme][data-mode] {
+  --saas-bg-rgb: var(--usk-bg-rgb);
+  --saas-primary-rgb: var(--usk-primary-rgb);
+  --saas-primary-text-rgb: var(--usk-primary-text-rgb);
+}
+```
+
+## Native fallback tokens
+
+Native HTML coverage is shared in `styles/native-elements.css` to avoid repeating the same semantic selector blocks in every preset. Preset files provide visual mappings for these stable native-layer tokens:
+
+```css
+--usk-native-surface
+--usk-native-surface-strong
+--usk-native-surface-soft
+--usk-native-card-bg
+--usk-native-control-bg
+--usk-native-text
+--usk-native-text-muted
+--usk-native-border
+--usk-native-primary
+--usk-native-primary-hover
+--usk-native-on-primary
+--usk-native-focus
+--usk-native-success
+--usk-native-warning
+--usk-native-danger
+--usk-native-link
+--usk-native-font-body
+--usk-native-font-heading
+--usk-native-font-control
+--usk-native-font-mono
+--usk-native-radius-sm
+--usk-native-radius
+--usk-native-radius-lg
+--usk-native-shadow
+--usk-native-shadow-md
+--usk-native-focus-ring
+```
+
+Consumers usually override the prefixed public tokens, not these internal bridge tokens. Use `--usk-native-*` only when intentionally customizing native fallback styling across every UI preset.
+
+Use prefixed RGB aliases for component-local alpha effects:
+
+```css
+.my-component {
+  border-color: rgb(var(--saas-primary-rgb) / 0.35);
+}
+```
+
+Use shared `--usk-*` roles when defining or overriding a scheme:
+
+```css
+:where([data-ui][data-theme="arctic-indigo"][data-mode="light"]) {
+  --usk-primary-rgb: 72 91 255;
+  --usk-primary-hover-rgb: 55 75 230;
+  --usk-primary-text-rgb: 255 255 255;
+}
+```
+
+## Theme-composition tokens
+
+The library derives larger visual defaults from the active theme:
+
+```css
+--<prefix>-theme-bg       /* page-level background layers */
+--<prefix>-theme-bg-size  /* matching background-size list */
+--<prefix>-card-bg        /* default card/panel background */
+--<prefix>-control-bg     /* default neutral button/toolbar/table-wrap background */
+```
+
+These tokens make color themes visually distinct by changing page atmosphere, card tinting, and neutral control surfaces when `data-theme` or `data-mode` changes.
+
+## Spinner tokens
+
+Loading indicators use theme variables by default:
+
+```css
+--<prefix>-spinner-track
+--<prefix>-spinner-stroke
+--<prefix>-spinner-accent
+```
+
+The class utilities are `<prefix>-spinner`, `<prefix>-loading-spinner`, `<prefix>-spinner-sm`, and `<prefix>-spinner-lg`. Native buttons and prefixed buttons also render an inline spinner when `aria-busy="true"` is present.
+
+## Interactive Surface bridge tokens
+
+The opt-in bridge maps shared `--usk-*` roles directly to `--interactive-surface-*` tokens. It avoids per-UI token maps so the bridge follows the same shared scheme -> mode role -> component rule flow as the main bundle.
+
+Use `.interactive-surface` with `data-surface-variant` for semantic intent and `data-surface-level` for visual depth:
+
+```html
+<button class="interactive-surface" data-surface-variant="primary" data-surface-level="2">
+  Save changes
+</button>
+```
+
+Stable bridge attributes:
+
+```txt
+data-surface-variant="primary|secondary|accent|subtle|warning|danger"
+data-surface-level="1|2|3"
+```
+
+The bridge defines visible state layer tokens for hover, active, and focus plus level tokens such as `--interactive-surface-level-1-bg`, `--interactive-surface-level-2-bg`, and `--interactive-surface-level-3-bg`.
+
+## Typography tokens
+
+Each style exposes broad and granular font variables:
+
+```css
+--<prefix>-font-sans
+--<prefix>-font-display
+--<prefix>-font-body
+--<prefix>-font-heading
+--<prefix>-font-control
+--<prefix>-font-mono
+```
+
+`--<prefix>-font-body`, `--<prefix>-font-heading`, and `--<prefix>-font-control` default back to `font-sans` or `font-display`, so existing overrides continue to work.
+
+## Palette utilities vs filled UI
+
+Semantic text utility classes use direct palette colors:
+
+```css
+.saas-text-primary { color: var(--saas-primary); }
+.saas-text-warning { color: var(--saas-warning); }
+```
+
+Filled UI uses the matching `on-*` alias:
+
+```css
+.saas-button-primary {
+  background: var(--saas-primary);
+  color: var(--saas-on-primary);
+}
+
+.saas-badge-warning {
+  background: var(--saas-warning);
+  color: var(--saas-on-warning);
+}
+```
+
+## Override example
+
+```css
+/* Consumer CSS is unlayered, so it overrides the library's layered rules cleanly. */
+[data-ui="minimal-saas"][data-theme="arctic-indigo"] {
+  --saas-radius-md: 1rem;
+  --saas-font-sans: Inter, system-ui, sans-serif;
+  --saas-font-display: Inter, system-ui, sans-serif;
+}
+
+:where([data-ui][data-theme="arctic-indigo"][data-mode="light"]) {
+  --usk-primary-rgb: 72 91 255;
+  --usk-primary-hover-rgb: 55 75 230;
+  --usk-primary-text-rgb: 255 255 255;
+}
+```
+
+## 2.x compatibility notes
+
+- Component-facing prefixed tokens remain available.
+- Concrete color authoring moved to `--usk-*` shared roles.
+- Bundled CSS inlines `theme-colors.css`; standalone style files import it.
+- If a consumer build system ignores CSS `@import`, import `ui-style-kit-css/theme-colors.css` before the standalone style file.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-style-kit-css",
-  "version": "1.2.1",
-  "description": "A CSS-only UI style and color theme kit with 11 visual systems, 10 shared color schemes, light/dark/contrast modes, and accessibility-focused native HTML coverage. Designed for easy integration into any web project, it provides a comprehensive set of styles and themes to create visually stunning and accessible user interfaces without the need for JavaScript.",
+  "version": "2.0.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",
   "unpkg": "dist/ui-style-kit.min.css",
@@ -9,80 +9,118 @@
   "files": [
     "dist",
     "styles",
-    "index.html",
+    "demo",
+    "docs",
     "README.md",
     "LICENSE",
     "CHANGELOG.md",
-    "CODE_OF_CONDUCT.md"
+    "STYLE-MAP.md",
+    "CONTRIBUTING.md",
+    "SECURITY.md"
   ],
   "keywords": [
     "css",
     "ui",
     "themes",
+    "theme-system",
     "style-kit",
     "design-system",
+    "css-library",
     "accessibility",
     "color-themes",
+    "dark-mode",
+    "light-mode",
+    "high-contrast",
+    "dashboard",
+    "admin-panel",
+    "web-design",
+    "responsive-design",
+    "css-variables",
+    "custom-properties",
     "bento",
-    "saas",
+    "minimal-saas",
     "glassmorphism",
+    "skeuomorphism",
     "neumorphism",
     "cyberpunk",
     "y2k",
     "brutalism",
-    "retrofuturism"
+    "retrofuturism",
+    "bauhaus"
   ],
-  "scripts": {
-    "build": "node scripts/build-css.js",
-    "lint": "npm run lint:css",
-    "lint:css": "stylelint \"styles/**/*.css\"",
-    "lint:css:fix": "stylelint \"styles/**/*.css\" --fix",
-    "prepublishOnly": "npm run lint && npm run build && npm run test:unit",
-    "test": "npm run test:unit",
-    "test:ci": "npm run lint && npm run build && npm run test:unit && npm run test:e2e",
-    "test:e2e": "node scripts/playwright-cli.js test",
-    "test:e2e:headed": "node scripts/playwright-cli.js test --headed",
-    "test:e2e:install": "node scripts/playwright-cli.js install chromium",
-    "test:e2e:install:ci": "node scripts/playwright-cli.js install --with-deps chromium",
-    "test:e2e:ui": "node scripts/playwright-cli.js test --ui",
-    "test:unit": "node --test tests/package-integrity.test.js",
-    "verify": "npm run lint && npm run build && npm run test:unit && npm run test:e2e"
-  },
   "license": "MIT",
-  "engines": {
-    "node": ">=18.18.0"
-  },
   "sideEffects": [
     "*.css"
   ],
   "exports": {
     ".": "./dist/ui-style-kit.css",
     "./css": "./dist/ui-style-kit.css",
+    "./css.css": "./dist/ui-style-kit.css",
     "./min": "./dist/ui-style-kit.min.css",
+    "./min.css": "./dist/ui-style-kit.min.css",
+    "./dist/ui-style-kit.css": "./dist/ui-style-kit.css",
+    "./dist/ui-style-kit.min.css": "./dist/ui-style-kit.min.css",
+    "./package.json": "./package.json",
+    "./styles/theme-colors": "./styles/theme-colors.css",
+    "./styles/theme-colors.css": "./styles/theme-colors.css",
+    "./theme-colors": "./styles/theme-colors.css",
+    "./theme-colors.css": "./styles/theme-colors.css",
+    "./styles/native-elements": "./styles/native-elements.css",
+    "./styles/native-elements.css": "./styles/native-elements.css",
+    "./native-elements": "./styles/native-elements.css",
+    "./native-elements.css": "./styles/native-elements.css",
     "./styles/minimal-saas": "./styles/minimal-saas.css",
+    "./styles/minimal-saas.css": "./styles/minimal-saas.css",
     "./minimal-saas": "./styles/minimal-saas.css",
+    "./minimal-saas.css": "./styles/minimal-saas.css",
     "./styles/bento": "./styles/bento.css",
+    "./styles/bento.css": "./styles/bento.css",
     "./bento": "./styles/bento.css",
+    "./bento.css": "./styles/bento.css",
     "./styles/maximalist": "./styles/maximalist.css",
+    "./styles/maximalist.css": "./styles/maximalist.css",
     "./maximalist": "./styles/maximalist.css",
+    "./maximalist.css": "./styles/maximalist.css",
     "./styles/bauhaus": "./styles/bauhaus.css",
+    "./styles/bauhaus.css": "./styles/bauhaus.css",
     "./bauhaus": "./styles/bauhaus.css",
+    "./bauhaus.css": "./styles/bauhaus.css",
     "./styles/tactile": "./styles/tactile.css",
+    "./styles/tactile.css": "./styles/tactile.css",
     "./tactile": "./styles/tactile.css",
+    "./tactile.css": "./styles/tactile.css",
     "./styles/neumorphism": "./styles/neumorphism.css",
+    "./styles/neumorphism.css": "./styles/neumorphism.css",
     "./neumorphism": "./styles/neumorphism.css",
+    "./neumorphism.css": "./styles/neumorphism.css",
     "./styles/retrofuturism": "./styles/retrofuturism.css",
+    "./styles/retrofuturism.css": "./styles/retrofuturism.css",
     "./retrofuturism": "./styles/retrofuturism.css",
+    "./retrofuturism.css": "./styles/retrofuturism.css",
     "./styles/brutalism": "./styles/brutalism.css",
+    "./styles/brutalism.css": "./styles/brutalism.css",
     "./brutalism": "./styles/brutalism.css",
+    "./brutalism.css": "./styles/brutalism.css",
     "./styles/cyberpunk": "./styles/cyberpunk.css",
+    "./styles/cyberpunk.css": "./styles/cyberpunk.css",
     "./cyberpunk": "./styles/cyberpunk.css",
+    "./cyberpunk.css": "./styles/cyberpunk.css",
     "./styles/y2k": "./styles/y2k.css",
+    "./styles/y2k.css": "./styles/y2k.css",
     "./y2k": "./styles/y2k.css",
+    "./y2k.css": "./styles/y2k.css",
     "./styles/retro-glass": "./styles/retro-glass.css",
+    "./styles/retro-glass.css": "./styles/retro-glass.css",
     "./retro-glass": "./styles/retro-glass.css",
+    "./retro-glass.css": "./styles/retro-glass.css",
     "./styles/interactive-surface-bridge": "./styles/interactive-surface-bridge.css",
-    "./interactive-surface-bridge": "./styles/interactive-surface-bridge.css"
+    "./styles/interactive-surface-bridge.css": "./styles/interactive-surface-bridge.css",
+    "./interactive-surface-bridge": "./styles/interactive-surface-bridge.css",
+    "./interactive-surface-bridge.css": "./styles/interactive-surface-bridge.css",
+    "./with-bridge": "./dist/ui-style-kit.with-bridge.css",
+    "./with-bridge.css": "./dist/ui-style-kit.with-bridge.css",
+    "./dist/ui-style-kit.with-bridge.css": "./dist/ui-style-kit.with-bridge.css",
+    "./dist/ui-style-kit.with-bridge.min.css": "./dist/ui-style-kit.with-bridge.min.css"
   },
   "repository": {
     "type": "git",
@@ -92,110 +130,34 @@
     "url": "https://github.com/Foscat/ui-style-kit-css/issues"
   },
   "homepage": "https://github.com/Foscat/ui-style-kit-css#readme",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
   "devDependencies": {
-    "@playwright/test": "^1.54.0",
-    "lightningcss": "^1.30.2",
+    "@playwright/test": "^1.60.0",
     "stylelint": "^17.12.0"
   },
-  "dependencies": {
-    "ajv": "~8.20.0",
-    "ansi-regex": "~5.0.1",
-    "ansi-styles": "~4.3.0",
-    "argparse": "~2.0.1",
-    "array-union": "~2.1.0",
-    "astral-regex": "~2.0.0",
-    "balanced-match": "~2.0.0",
-    "braces": "~3.0.3",
-    "cacheable": "~2.3.5",
-    "callsites": "~3.1.0",
-    "color-convert": "~2.0.1",
-    "color-name": "~1.1.4",
-    "colord": "~2.9.3",
-    "cosmiconfig": "~9.0.1",
-    "css-functions-list": "~3.3.3",
-    "css-tree": "~3.2.1",
-    "cssesc": "~3.0.0",
-    "debug": "~4.4.3",
-    "dir-glob": "~3.0.1",
-    "emoji-regex": "~8.0.0",
-    "env-paths": "~2.2.1",
-    "error-ex": "~1.3.4",
-    "fast-deep-equal": "~3.1.3",
-    "fast-glob": "~3.3.3",
-    "fast-uri": "~3.1.2",
-    "fastest-levenshtein": "~1.0.16",
-    "fastq": "~1.20.1",
-    "file-entry-cache": "~11.1.3",
-    "fill-range": "~7.1.1",
-    "flat-cache": "~6.1.22",
-    "flatted": "~3.4.2",
-    "glob-parent": "~5.1.2",
-    "global-modules": "~2.0.0",
-    "global-prefix": "~3.0.0",
-    "globby": "~11.1.0",
-    "globjoin": "~0.1.4",
-    "has-flag": "~4.0.0",
-    "hashery": "~1.5.1",
-    "hookified": "~1.15.1",
-    "html-tags": "~3.3.1",
-    "ignore": "~7.0.5",
-    "import-fresh": "~3.3.1",
-    "imurmurhash": "~0.1.4",
-    "ini": "~1.3.8",
-    "is-arrayish": "~0.2.1",
-    "is-extglob": "~2.1.1",
-    "is-fullwidth-code-point": "~3.0.0",
-    "is-glob": "~4.0.3",
-    "is-number": "~7.0.0",
-    "is-plain-object": "~5.0.0",
-    "isexe": "~2.0.0",
-    "js-tokens": "~4.0.0",
-    "js-yaml": "~4.1.1",
-    "json-parse-even-better-errors": "~2.3.1",
-    "json-schema-traverse": "~1.0.0",
-    "keyv": "~5.6.0",
-    "kind-of": "~6.0.3",
-    "known-css-properties": "~0.37.0",
-    "lines-and-columns": "~1.2.4",
-    "lodash.truncate": "~4.4.2",
-    "mathml-tag-names": "~2.1.3",
-    "mdn-data": "~2.27.1",
-    "meow": "~13.2.0",
-    "merge2": "~1.4.1",
-    "micromatch": "~4.0.8",
-    "ms": "~2.1.3",
-    "nanoid": "~3.3.12",
-    "normalize-path": "~3.0.0",
-    "parent-module": "~1.0.1",
-    "parse-json": "~5.2.0",
-    "path-type": "~4.0.0",
-    "picocolors": "~1.1.1",
-    "picomatch": "~2.3.2",
-    "postcss": "~8.5.15",
-    "postcss-resolve-nested-selector": "~0.1.6",
-    "postcss-safe-parser": "~7.0.1",
-    "postcss-selector-parser": "~7.1.1",
-    "postcss-value-parser": "~4.2.0",
-    "qified": "~0.10.1",
-    "queue-microtask": "~1.2.3",
-    "require-from-string": "~2.0.2",
-    "resolve-from": "~5.0.0",
-    "reusify": "~1.1.0",
-    "run-parallel": "~1.2.0",
-    "signal-exit": "~4.1.0",
-    "slash": "~3.0.0",
-    "slice-ansi": "~4.0.0",
-    "source-map-js": "~1.2.1",
-    "string-width": "~4.2.3",
-    "strip-ansi": "~6.0.1",
-    "supports-color": "~7.2.0",
-    "supports-hyperlinks": "~3.2.0",
-    "svg-tags": "~1.0.0",
-    "table": "~6.9.0",
-    "to-regex-range": "~5.0.1",
-    "util-deprecate": "~1.0.2",
-    "which": "~1.3.1",
-    "write-file-atomic": "~5.0.1"
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "lint": "stylelint \"styles/**/*.css\"",
+    "check:contrast": "node scripts/check-contrast.mjs",
+    "check:package": "node scripts/check-package.mjs",
+    "test": "npm run test:unit",
+    "test:unit": "node --test tests/*.test.js",
+    "test:e2e": "playwright test --config playwright.config.js",
+    "test:e2e:install:ci": "playwright install --with-deps chromium",
+    "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:package",
+    "pack:dry-run": "npm pack --dry-run",
+    "prepack": "npm run check",
+    "prepublishOnly": "npm run check",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish",
+    "test:visual": "playwright test --config playwright.config.mjs tests/demo-visual.spec.mjs"
   },
-  "author": "Foscat"
+  "author": "Kyle Foster",
+  "publishConfig": {
+    "access": "public"
+  }
 }