ui-style-kit-css 2.0.4 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.0.4",
+  "version": "2.2.0",
   "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",
@@ -13,6 +13,7 @@
     "README.md",
     "LICENSE",
     "CHANGELOG.md",
+    "manifest.json",
     "STYLE-MAP.md",
     "CONTRIBUTING.md",
     "SECURITY.md"
@@ -57,6 +58,20 @@
     "./css.css": "./dist/ui-style-kit.css",
     "./min": "./dist/ui-style-kit.min.css",
     "./min.css": "./dist/ui-style-kit.min.css",
+    "./visual": "./dist/ui-style-kit.visual.css",
+    "./visual.css": "./dist/ui-style-kit.visual.css",
+    "./visual.min.css": "./dist/ui-style-kit.visual.min.css",
+    "./visual/minimal-saas.css": "./dist/visual/minimal-saas.css",
+    "./visual/bento.css": "./dist/visual/bento.css",
+    "./visual/maximalist.css": "./dist/visual/maximalist.css",
+    "./visual/bauhaus.css": "./dist/visual/bauhaus.css",
+    "./visual/tactile.css": "./dist/visual/tactile.css",
+    "./visual/neumorphism.css": "./dist/visual/neumorphism.css",
+    "./visual/retrofuturism.css": "./dist/visual/retrofuturism.css",
+    "./visual/brutalism.css": "./dist/visual/brutalism.css",
+    "./visual/cyberpunk.css": "./dist/visual/cyberpunk.css",
+    "./visual/y2k.css": "./dist/visual/y2k.css",
+    "./visual/retro-glass.css": "./dist/visual/retro-glass.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",
@@ -116,6 +131,8 @@
     "./styles/retro-glass.css": "./styles/retro-glass.css",
     "./retro-glass": "./styles/retro-glass.css",
     "./retro-glass.css": "./styles/retro-glass.css",
+    "./interactive-surface-theme": "./styles/interactive-surface-theme.css",
+    "./interactive-surface-theme.css": "./styles/interactive-surface-theme.css",
     "./styles/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",
@@ -123,7 +140,8 @@
     "./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"
+    "./dist/ui-style-kit.with-bridge.min.css": "./dist/ui-style-kit.with-bridge.min.css",
+    "./manifest.json": "./manifest.json"
   },
   "repository": {
     "type": "git",
@@ -132,29 +150,47 @@
   "bugs": {
     "url": "https://github.com/Foscat/ui-style-kit-css/issues"
   },
-  "homepage": "https://github.com/Foscat/ui-style-kit-css#readme",
+  "homepage": "https://foscat.github.io/ui-style-kit-css/",
   "engines": {
     "node": ">=20"
   },
   "type": "module",
   "devDependencies": {
+    "@axe-core/playwright": "4.12.1",
     "@playwright/test": "~1.61.1",
+    "css-tree": "3.2.1",
     "lightningcss": "1.33.0",
+    "pixelmatch": "7.2.0",
+    "pngjs": "7.0.0",
     "stylelint": "~17.14.0"
   },
+  "overrides": {
+    "fast-uri": "3.1.5",
+    "js-yaml": "4.3.1",
+    "nanoid": "3.3.17",
+    "postcss": "8.5.23"
+  },
   "scripts": {
     "build": "node scripts/build.mjs",
     "lint": "stylelint \"styles/**/*.css\" \"demo/**/*.css\"",
     "check:contrast": "node scripts/check-contrast.mjs",
+    "check:ownership": "node scripts/check-css-ownership.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",
+    "test:axe": "playwright test --config playwright.config.js tests/e2e/accessibility.spec.js",
+    "test:matrix": "playwright test --config playwright.matrix.config.js",
+    "test:e2e:install:ci": "playwright install --with-deps chromium firefox webkit",
+    "check:ecosystem:current": "node scripts/check-ecosystem-packs.mjs --matrix current",
+    "check:ecosystem:minimum": "node scripts/check-ecosystem-packs.mjs --matrix minimum --skip-docs",
+    "check:ecosystem:packs": "npm run check:ecosystem:current && npm run check:ecosystem:minimum",
+    "test:ecosystem:clean-install": "node --test tests/clean-install-ecosystem-contract.integration.mjs",
+    "release:preflight": "npm run build && node scripts/release-preflight.mjs --layout-repo ../Layout-Style-CSS --interactive-repo ../Interactive-Surface-CSS --layout-docs-repo ../Layout-Style-CSS --interactive-docs-repo ../Interactive-Surface-CSS",
+    "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:ownership && npm run check:package",
     "pack:dry-run": "npm pack --dry-run",
     "prepack": "npm run check",
-    "release:verify": "npm run check && npm run test:e2e && npm run test:visual && npm audit --audit-level=moderate && npm run pack:dry-run",
+    "release:verify": "npm run check && npm run test:e2e && npm run test:axe && npm run test:visual && npm run test:matrix && npm run release:preflight -- --candidate-package ui-style-kit-css && npm audit --audit-level=moderate && npm run pack:dry-run",
     "prepublishOnly": "npm run release:verify",
     "release:patch": "npm version patch && npm publish",
     "release:minor": "npm version minor && npm publish",

package/styles/compat-layout.css

@@ -0,0 +1,88 @@
+/* =========================================================
+   UI Style Kit CSS - Deprecated Compatibility Layout
+
+   These selectors preserve the v2 prefixed layout helpers.
+   New layouts should use layout-style-css; this selector set is frozen.
+========================================================= */
+
+@layer ui-style-kit.compat_layout {
+[data-ui][data-theme][data-mode] :where(
+  [class~="saas-page"],
+  [class~="saas-container"],
+  [class~="saas-section"],
+  [class~="saas-grid"],
+  [class~="saas-stack"],
+  [class~="saas-cluster"],
+  [class~="saas-split"],
+  [class~="bento-page"],
+  [class~="bento-container"],
+  [class~="bento-section"],
+  [class~="bento-grid"],
+  [class~="bento-stack"],
+  [class~="bento-cluster"],
+  [class~="bento-split"],
+  [class~="max-page"],
+  [class~="max-container"],
+  [class~="max-section"],
+  [class~="max-grid"],
+  [class~="max-stack"],
+  [class~="max-cluster"],
+  [class~="max-split"],
+  [class~="bau-page"],
+  [class~="bau-container"],
+  [class~="bau-section"],
+  [class~="bau-grid"],
+  [class~="bau-stack"],
+  [class~="bau-cluster"],
+  [class~="bau-split"],
+  [class~="tactile-page"],
+  [class~="tactile-container"],
+  [class~="tactile-section"],
+  [class~="tactile-grid"],
+  [class~="tactile-stack"],
+  [class~="tactile-cluster"],
+  [class~="tactile-split"],
+  [class~="neo-page"],
+  [class~="neo-container"],
+  [class~="neo-section"],
+  [class~="neo-grid"],
+  [class~="neo-stack"],
+  [class~="neo-cluster"],
+  [class~="neo-split"],
+  [class~="retro-page"],
+  [class~="retro-container"],
+  [class~="retro-section"],
+  [class~="retro-grid"],
+  [class~="retro-stack"],
+  [class~="retro-cluster"],
+  [class~="retro-split"],
+  [class~="brutal-page"],
+  [class~="brutal-container"],
+  [class~="brutal-section"],
+  [class~="brutal-grid"],
+  [class~="brutal-stack"],
+  [class~="brutal-cluster"],
+  [class~="cyber-page"],
+  [class~="cyber-container"],
+  [class~="cyber-section"],
+  [class~="cyber-grid"],
+  [class~="cyber-stack"],
+  [class~="cyber-cluster"],
+  [class~="y2k-page"],
+  [class~="y2k-container"],
+  [class~="y2k-section"],
+  [class~="y2k-grid"],
+  [class~="y2k-stack"],
+  [class~="y2k-cluster"],
+  [class~="rg-page"],
+  [class~="rg-container"],
+  [class~="rg-section"],
+  [class~="rg-grid"],
+  [class~="rg-stack"],
+  [class~="rg-cluster"]
+) {
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+}