ui-style-kit-css 2.1.0 → 2.3.0

package/manifest.json

@@ -1,7 +1,11 @@
 {
   "schemaVersion": 1,
+  "schemaPolicy": {
+    "compatibility": "additive-within-major",
+    "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
+  },
   "name": "ui-style-kit-css",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "cascadeLayers": [
     "ui-style-kit.theme_colors",
     "ui-style-kit.native_elements",
@@ -108,6 +112,87 @@
         "default": "./retro-glass.css",
         "visual": "./visual/retro-glass.css"
       }
+    },
+    {
+      "id": "editorial-luxe",
+      "label": "Editorial Luxe",
+      "prefix": "luxe",
+      "entrypoints": {
+        "default": "./editorial-luxe.css",
+        "visual": "./visual/editorial-luxe.css"
+      }
+    },
+    {
+      "id": "organic-modern",
+      "label": "Organic Modern",
+      "prefix": "organic",
+      "entrypoints": {
+        "default": "./organic-modern.css",
+        "visual": "./visual/organic-modern.css"
+      }
+    },
+    {
+      "id": "industrial-utility",
+      "label": "Industrial Utility",
+      "prefix": "utility",
+      "entrypoints": {
+        "default": "./industrial-utility.css",
+        "visual": "./visual/industrial-utility.css"
+      }
+    },
+    {
+      "id": "technical-blueprint",
+      "label": "Technical Blueprint",
+      "prefix": "blueprint",
+      "entrypoints": {
+        "default": "./technical-blueprint.css",
+        "visual": "./visual/technical-blueprint.css"
+      }
+    },
+    {
+      "id": "art-deco",
+      "label": "Art Deco",
+      "prefix": "deco",
+      "entrypoints": {
+        "default": "./art-deco.css",
+        "visual": "./visual/art-deco.css"
+      }
+    },
+    {
+      "id": "clay",
+      "label": "Clay",
+      "prefix": "clay",
+      "entrypoints": {
+        "default": "./clay.css",
+        "visual": "./visual/clay.css"
+      }
+    },
+    {
+      "id": "data-terminal",
+      "label": "Data Terminal",
+      "prefix": "terminal",
+      "entrypoints": {
+        "default": "./data-terminal.css",
+        "visual": "./visual/data-terminal.css"
+      }
+    },
+    {
+      "id": "paper-editorial",
+      "label": "Paper Editorial",
+      "prefix": "paper",
+      "entrypoints": {
+        "default": "./paper-editorial.css",
+        "visual": "./visual/paper-editorial.css"
+      }
+    },
+    {
+      "id": "neo-noir",
+      "label": "Neo-Noir",
+      "prefix": "noir",
+      "entrypoints": {
+        "default": "./neo-noir.css",
+        "visual": "./visual/neo-noir.css"
+      }
     }
   ],
   "themes": [
@@ -120,13 +205,341 @@
     "desert-sage",
     "rose-quartz",
     "cyber-lime",
-    "arctic-indigo"
+    "arctic-indigo",
+    "chrome-navy",
+    "recycled-emerald",
+    "industrial-orange",
+    "performance-red",
+    "heritage-brass",
+    "service-blue-red",
+    "newsprint-crimson",
+    "foundry-amber",
+    "soft-orchid",
+    "electric-noir"
   ],
   "modes": [
     "light",
     "dark",
     "contrast"
   ],
+  "tokens": {
+    "sharedSemantic": [
+      {
+        "name": "--ui-color-bg",
+        "type": "<color>",
+        "namespacedSource": "rgb(var(--usk-bg-rgb))",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-surface",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-surface-strong)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-text",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-text)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-muted",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-text-muted)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-primary",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-primary)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-on-primary",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-on-primary)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-color-border",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-border)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-radius-control",
+        "type": "<length>",
+        "namespacedSource": "var(--usk-native-radius)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-shadow-control",
+        "type": "<shadow-list>",
+        "namespacedSource": "var(--usk-native-shadow)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-focus-color",
+        "type": "<color>",
+        "namespacedSource": "var(--usk-native-focus)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-motion-duration",
+        "type": "<time>",
+        "namespacedSource": "var(--usk-motion-duration)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      },
+      {
+        "name": "--ui-motion-easing",
+        "type": "<easing-function>",
+        "namespacedSource": "var(--usk-motion-easing)",
+        "producerScope": "[data-ui][data-theme][data-mode]",
+        "standaloneExpectation": "available-with-ui-style-kit-entrypoints"
+      }
+    ]
+  },
+  "semanticComponentApi": {
+    "presetSwitchAttribute": "data-ui",
+    "selectorsByRole": {
+      "button": [
+        {
+          "selector": ".ui-button",
+          "sourceSuffix": "button"
+        },
+        {
+          "selector": ".ui-icon-button",
+          "sourceSuffix": "icon-button"
+        }
+      ],
+      "card": [
+        {
+          "selector": ".ui-card",
+          "sourceSuffix": "card"
+        }
+      ],
+      "form": [
+        {
+          "selector": ".ui-field",
+          "sourceSuffix": "field"
+        },
+        {
+          "selector": ".ui-label",
+          "sourceSuffix": "label"
+        },
+        {
+          "selector": ".ui-help-text",
+          "sourceSuffix": "help-text"
+        },
+        {
+          "selector": ".ui-input",
+          "sourceSuffix": "input"
+        },
+        {
+          "selector": ".ui-select",
+          "sourceSuffix": "select"
+        },
+        {
+          "selector": ".ui-textarea",
+          "sourceSuffix": "textarea"
+        },
+        {
+          "selector": ".ui-check",
+          "sourceSuffix": "check"
+        },
+        {
+          "selector": ".ui-check-control",
+          "sourceSuffix": "check-control"
+        },
+        {
+          "selector": ".ui-radio",
+          "sourceSuffix": "radio"
+        },
+        {
+          "selector": ".ui-radio-control",
+          "sourceSuffix": "radio-control"
+        },
+        {
+          "selector": ".ui-switch",
+          "sourceSuffix": "switch"
+        },
+        {
+          "selector": ".ui-switch-track",
+          "sourceSuffix": "switch-track"
+        },
+        {
+          "selector": ".ui-switch-thumb",
+          "sourceSuffix": "switch-thumb"
+        }
+      ],
+      "badge": [
+        {
+          "selector": ".ui-badge",
+          "sourceSuffix": "badge"
+        }
+      ],
+      "alert": [
+        {
+          "selector": ".ui-alert",
+          "sourceSuffix": "alert"
+        },
+        {
+          "selector": ".ui-alert-title",
+          "sourceSuffix": "alert-title"
+        },
+        {
+          "selector": ".ui-alert-body",
+          "sourceSuffix": "alert-body"
+        }
+      ],
+      "navigation": [
+        {
+          "selector": ".ui-nav",
+          "sourceSuffix": "nav"
+        },
+        {
+          "selector": ".ui-nav-link",
+          "sourceSuffix": "nav-link"
+        }
+      ],
+      "table": [
+        {
+          "selector": ".ui-table",
+          "sourceSuffix": "table"
+        },
+        {
+          "selector": ".ui-table-wrap",
+          "sourceSuffix": "table-wrap"
+        }
+      ],
+      "progress": [
+        {
+          "selector": ".ui-progress",
+          "sourceSuffix": "progress"
+        },
+        {
+          "selector": ".ui-progress-bar",
+          "sourceSuffix": "progress-bar"
+        }
+      ],
+      "toolbar": [
+        {
+          "selector": ".ui-toolbar",
+          "sourceSuffix": "toolbar"
+        }
+      ],
+      "loading": [
+        {
+          "selector": ".ui-spinner",
+          "sourceSuffix": "spinner"
+        }
+      ],
+      "tooltip": [
+        {
+          "selector": ".ui-tooltip",
+          "sourceSuffix": "tooltip"
+        }
+      ]
+    },
+    "variantAttribute": {
+      "name": "data-ui-variant",
+      "neutral": "omitted",
+      "valuesBySelector": {
+        ".ui-button": [
+          "primary",
+          "secondary",
+          "danger",
+          "ghost"
+        ],
+        ".ui-badge": [
+          "primary",
+          "secondary",
+          "success",
+          "warning",
+          "danger"
+        ],
+        ".ui-alert": [
+          "success",
+          "warning",
+          "danger"
+        ]
+      }
+    },
+    "nativeFallbacks": [
+      {
+        "roles": [
+          "modal",
+          "dialog"
+        ],
+        "element": "dialog",
+        "genericSelectors": []
+      }
+    ],
+    "presetPrefixedClasses": {
+      "status": "supported",
+      "uses": [
+        "compatibility",
+        "advanced"
+      ]
+    },
+    "implementationStatus": {
+      "retained": {
+        "status": "implemented",
+        "selectors": [
+          ".ui-spinner",
+          ".ui-tooltip"
+        ]
+      },
+      "implemented": {
+        "status": "implemented",
+        "selectors": [
+          ".ui-button",
+          ".ui-icon-button",
+          ".ui-card",
+          ".ui-field",
+          ".ui-label",
+          ".ui-help-text",
+          ".ui-input",
+          ".ui-select",
+          ".ui-textarea",
+          ".ui-check",
+          ".ui-check-control",
+          ".ui-radio",
+          ".ui-radio-control",
+          ".ui-switch",
+          ".ui-switch-track",
+          ".ui-switch-thumb",
+          ".ui-badge",
+          ".ui-alert",
+          ".ui-alert-title",
+          ".ui-alert-body",
+          ".ui-nav",
+          ".ui-nav-link",
+          ".ui-table",
+          ".ui-table-wrap",
+          ".ui-progress",
+          ".ui-progress-bar",
+          ".ui-toolbar"
+        ]
+      },
+      "pending": {
+        "status": "pending",
+        "targetTask": 11,
+        "selectors": []
+      }
+    }
+  },
   "nativeElements": {
     "fullyThemed": [
       "a",
@@ -269,6 +682,7 @@
       "badge",
       "badge-danger",
       "badge-primary",
+      "badge-seal",
       "badge-secondary",
       "badge-success",
       "badge-warning",
@@ -276,27 +690,39 @@
       "bg-secondary",
       "border",
       "button",
+      "button-cut",
       "button-danger",
       "button-ghost",
+      "button-outline-heavy",
       "button-pill",
       "button-primary",
       "button-secondary",
+      "callout-bar",
       "card",
+      "card-accent-edge",
+      "card-feature",
+      "card-media",
+      "card-service",
       "check",
       "check-control",
       "copy",
       "disabled",
       "divider",
+      "eyebrow",
+      "feature-item",
+      "feature-strip",
       "field",
       "heading",
       "help-text",
       "hover-lift",
       "icon-button",
+      "icon-medallion",
       "input",
       "inset",
       "kicker",
       "label",
       "loading-spinner",
+      "media-scrim",
       "nav",
       "nav-link",
       "panel",
@@ -387,6 +813,60 @@
       ],
       "retro-glass": [
         "console"
+      ],
+      "editorial-luxe": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "organic-modern": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "industrial-utility": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "technical-blueprint": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "art-deco": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "clay": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "data-terminal": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "paper-editorial": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
+      ],
+      "neo-noir": [
+        "empty-state",
+        "metric",
+        "metric-label",
+        "metric-value"
       ]
     },
     "deprecatedStructuralSuffixes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.1.0",
+  "version": "2.3.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",
@@ -141,7 +141,52 @@
     "./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",
-    "./manifest.json": "./manifest.json"
+    "./manifest.json": "./manifest.json",
+    "./visual/editorial-luxe.css": "./dist/visual/editorial-luxe.css",
+    "./styles/editorial-luxe": "./styles/editorial-luxe.css",
+    "./styles/editorial-luxe.css": "./styles/editorial-luxe.css",
+    "./editorial-luxe": "./styles/editorial-luxe.css",
+    "./editorial-luxe.css": "./styles/editorial-luxe.css",
+    "./visual/organic-modern.css": "./dist/visual/organic-modern.css",
+    "./styles/organic-modern": "./styles/organic-modern.css",
+    "./styles/organic-modern.css": "./styles/organic-modern.css",
+    "./organic-modern": "./styles/organic-modern.css",
+    "./organic-modern.css": "./styles/organic-modern.css",
+    "./visual/industrial-utility.css": "./dist/visual/industrial-utility.css",
+    "./styles/industrial-utility": "./styles/industrial-utility.css",
+    "./styles/industrial-utility.css": "./styles/industrial-utility.css",
+    "./industrial-utility": "./styles/industrial-utility.css",
+    "./industrial-utility.css": "./styles/industrial-utility.css",
+    "./visual/technical-blueprint.css": "./dist/visual/technical-blueprint.css",
+    "./styles/technical-blueprint": "./styles/technical-blueprint.css",
+    "./styles/technical-blueprint.css": "./styles/technical-blueprint.css",
+    "./technical-blueprint": "./styles/technical-blueprint.css",
+    "./technical-blueprint.css": "./styles/technical-blueprint.css",
+    "./visual/art-deco.css": "./dist/visual/art-deco.css",
+    "./styles/art-deco": "./styles/art-deco.css",
+    "./styles/art-deco.css": "./styles/art-deco.css",
+    "./art-deco": "./styles/art-deco.css",
+    "./art-deco.css": "./styles/art-deco.css",
+    "./visual/clay.css": "./dist/visual/clay.css",
+    "./styles/clay": "./styles/clay.css",
+    "./styles/clay.css": "./styles/clay.css",
+    "./clay": "./styles/clay.css",
+    "./clay.css": "./styles/clay.css",
+    "./visual/data-terminal.css": "./dist/visual/data-terminal.css",
+    "./styles/data-terminal": "./styles/data-terminal.css",
+    "./styles/data-terminal.css": "./styles/data-terminal.css",
+    "./data-terminal": "./styles/data-terminal.css",
+    "./data-terminal.css": "./styles/data-terminal.css",
+    "./visual/paper-editorial.css": "./dist/visual/paper-editorial.css",
+    "./styles/paper-editorial": "./styles/paper-editorial.css",
+    "./styles/paper-editorial.css": "./styles/paper-editorial.css",
+    "./paper-editorial": "./styles/paper-editorial.css",
+    "./paper-editorial.css": "./styles/paper-editorial.css",
+    "./visual/neo-noir.css": "./dist/visual/neo-noir.css",
+    "./styles/neo-noir": "./styles/neo-noir.css",
+    "./styles/neo-noir.css": "./styles/neo-noir.css",
+    "./neo-noir": "./styles/neo-noir.css",
+    "./neo-noir.css": "./styles/neo-noir.css"
   },
   "repository": {
     "type": "git",
@@ -150,22 +195,43 @@
   "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"
   },
+  "browserslist": [
+    "last 2 Chrome major versions",
+    "last 2 Edge major versions",
+    "last 2 Firefox major versions",
+    "Safari >= 16",
+    "iOS >= 16",
+    "not dead"
+  ],
   "type": "module",
   "devDependencies": {
     "@axe-core/playwright": "4.12.1",
     "@playwright/test": "~1.61.1",
+    "browserslist": "4.28.8",
     "css-tree": "3.2.1",
     "lightningcss": "1.33.0",
-    "stylelint": "~17.14.0"
+    "pixelmatch": "7.2.0",
+    "pngjs": "7.0.0",
+    "stylelint": "~17.14.1"
+  },
+  "overrides": {
+    "fast-uri": "3.1.5",
+    "js-yaml": "4.3.1",
+    "nanoid": "3.3.18",
+    "postcss": "8.5.23"
   },
   "scripts": {
+    "generate:content-overflow": "node scripts/generate-content-overflow.mjs",
+    "generate:components": "node scripts/generate-expanded-components.mjs",
     "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:compat": "node scripts/check-browser-compatibility.mjs",
     "check:package": "node scripts/check-package.mjs",
     "test": "npm run test:unit",
     "test:unit": "node --test tests/*.test.js",
@@ -173,11 +239,15 @@
     "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",
+    "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-spec interactive-surface-css@1.6.0 --layout-docs-repo ../Layout-Style-CSS",
+    "check": "npm run build && npm run lint && npm run test:unit && npm run check:contrast && npm run check:compat && 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:axe && npm run test:visual && npm run test:matrix && npm run check:ecosystem:packs && 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",