ui-style-kit-css 2.0.3 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.0.3",
+  "version": "2.1.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",
@@ -68,6 +83,10 @@
     "./styles/native-elements.css": "./styles/native-elements.css",
     "./native-elements": "./styles/native-elements.css",
     "./native-elements.css": "./styles/native-elements.css",
+    "./styles/content-overflow": "./styles/content-overflow.css",
+    "./styles/content-overflow.css": "./styles/content-overflow.css",
+    "./content-overflow": "./styles/content-overflow.css",
+    "./content-overflow.css": "./styles/content-overflow.css",
     "./styles/minimal-saas": "./styles/minimal-saas.css",
     "./styles/minimal-saas.css": "./styles/minimal-saas.css",
     "./minimal-saas": "./styles/minimal-saas.css",
@@ -112,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",
@@ -119,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",
@@ -134,7 +156,10 @@
   },
   "type": "module",
   "devDependencies": {
+    "@axe-core/playwright": "4.12.1",
     "@playwright/test": "~1.61.1",
+    "css-tree": "3.2.1",
+    "lightningcss": "1.33.0",
     "stylelint": "~17.14.0"
   },
   "scripts": {
@@ -145,11 +170,15 @@
     "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",
+    "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:packs": "node scripts/check-ecosystem-packs.mjs",
     "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:verify": "npm run check && npm run test:e2e && npm run test:axe && npm run test:visual && npm run test:matrix && npm run check:ecosystem:packs && 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",
     "release:major": "npm version major && npm publish",

package/styles/bauhaus.css

@@ -13,6 +13,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.bauhaus {
 :root {

package/styles/bento.css

@@ -13,6 +13,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.bento {
 :root {

package/styles/brutalism.css

@@ -14,6 +14,7 @@
 
 @import url("./theme-colors.css");
 @import url("./native-elements.css");
+@import url("./content-overflow.css");
 
 @layer ui-style-kit.brutalism {
 :root {
@@ -356,7 +357,7 @@
 .brutal-button-primary:hover { background: var(--brutal-primary-hover); }
 .brutal-button-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); box-shadow: 6px 6px 0 var(--brutal-primary); }
 .brutal-button-secondary:hover { background: var(--brutal-secondary-hover); }
-.brutal-button-danger { background: var(--brutal-danger); color: #fff; }
+.brutal-button-danger { background: var(--brutal-danger); color: var(--brutal-on-danger); }
 .brutal-icon-button { width: 2.85rem; padding: 0; }
 .brutal-button:disabled, .brutal-icon-button:disabled, .brutal-disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
 
@@ -377,9 +378,9 @@
 .brutal-badge { display: inline-flex; align-items: center; min-height: 1.8rem; padding: 0.35rem 0.75rem; background: var(--brutal-surface-strong); color: var(--brutal-text); border: 3px solid var(--brutal-border); box-shadow: 4px 4px 0 var(--brutal-accent); font-size: 0.8rem; font-weight: 900; }
 .brutal-badge-primary { background: var(--brutal-primary); color: var(--brutal-on-primary); }
 .brutal-badge-secondary { background: var(--brutal-secondary); color: var(--brutal-on-secondary); }
-.brutal-badge-success { background: var(--brutal-success); color: #fff; }
-.brutal-badge-warning { background: var(--brutal-warning); color: #111; }
-.brutal-badge-danger { background: var(--brutal-danger); color: #fff; }
+.brutal-badge-success { background: var(--brutal-success); color: var(--brutal-on-success); }
+.brutal-badge-warning { background: var(--brutal-warning); color: var(--brutal-on-warning); }
+.brutal-badge-danger { background: var(--brutal-danger); color: var(--brutal-on-danger); }
 
 .brutal-nav { display: flex; flex-wrap: wrap; gap: var(--brutal-space-2); padding: var(--brutal-space-2); background: var(--brutal-surface-strong); border: 3px solid var(--brutal-border); box-shadow: 8px 8px 0 var(--brutal-primary); }
 .brutal-nav-link { display: inline-flex; min-height: 2.5rem; align-items: center; padding: 0.65rem 1rem; color: var(--brutal-text); border: 3px solid transparent; font-weight: 900; text-decoration: none; }
@@ -389,7 +390,7 @@
 /* Tooltips use compact contrast surfaces that stay readable across theme modes. */
 .brutal-tooltip, [data-ui="brutalism"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
   display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .58rem .78rem;
-  background: var(--brutal-warning); color: #111; border: 3px solid var(--brutal-border); border-radius: 0; box-shadow: .28rem .28rem 0 var(--brutal-primary);
+  background: var(--brutal-warning); color: var(--brutal-on-warning); border: 3px solid var(--brutal-border); border-radius: 0; box-shadow: .28rem .28rem 0 var(--brutal-primary);
   font-size: .82rem; font-weight: 950; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em;
 }
 .brutal-tooltip-arrow { inline-size: .6rem; block-size: .6rem; flex: 0 0 auto; background: var(--brutal-danger); border: 3px solid var(--brutal-border); transform: rotate(45deg); }

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;
+}
+}