@navecss/core 0.2.0 → 0.4.0

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@navecss/core",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "license": "MIT",
   "type": "module",
-  "description": "Nave design system — layer architecture, reset, atomic utilities, PostCSS plugin",
+  "description": "Nave design system — layer architecture, reset, atomic utilities, and the Vite, PostCSS and Lightning CSS adapters and a command line for the @nave directive",
   "keywords": [
     "css",
     "design-system",
     "css-layers",
     "atomic-css",
     "postcss-plugin",
+    "vite-plugin",
+    "lightningcss",
     "zero-runtime"
   ],
   "homepage": "https://github.com/navecss/navecss/tree/main/packages/core#readme",
@@ -31,11 +33,37 @@
       "import": "./dist/atoms.js"
     },
     "./postcss": {
-      "types": "./dist/postcss.d.ts",
-      "import": "./dist/postcss.js"
+      "import": {
+        "types": "./dist/postcss.d.ts",
+        "default": "./dist/postcss.js"
+      },
+      "require": {
+        "types": "./dist/postcss.d.cts",
+        "default": "./dist/postcss.cjs"
+      }
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js"
+    },
+    "./lightningcss": {
+      "types": "./dist/lightningcss.d.ts",
+      "import": "./dist/lightningcss.js"
+    },
+    "./standalone": "./dist/standalone.css",
+    "./check": {
+      "types": "./dist/check.d.ts",
+      "import": "./dist/check.js"
+    },
+    "./collect": {
+      "types": "./dist/collect.d.ts",
+      "import": "./dist/collect.js"
     },
     "./package.json": "./package.json"
   },
+  "bin": {
+    "navecss-core": "./dist/bin.js"
+  },
   "files": [
     "dist",
     "CONSUMER-ATOMS.md",
@@ -52,20 +80,31 @@
     }
   },
   "dependencies": {
-    "@navecss/tokens": "^0.2.0"
+    "@navecss/tokens": "^0.4.0"
   },
   "devDependencies": {
-    "@types/node": "^26.6.2",
-    "@vitest/browser": "5.0.1",
-    "@vitest/browser-playwright": "5.0.1",
-    "@vitest/coverage-v8": "5.0.1",
+    "@rmenke/css-tokenizer-tests": "1.4.0",
+    "@sveltejs/vite-plugin-svelte": "7.3.1",
+    "@types/node": "^26.6.4",
+    "@vitejs/plugin-vue": "6.0.9",
+    "@vitest/browser": "5.0.3",
+    "@vitest/browser-playwright": "5.0.3",
+    "@vitest/coverage-v8": "5.0.3",
+    "lightningcss": "1.33.0",
+    "lightningcss-1-24": "npm:lightningcss@1.24.1",
     "playwright": "1.63.0",
     "postcss": "^8.5.28",
     "prettier": "3.9.9",
+    "sass": "1.105.1",
+    "source-map": "^0.8.0",
+    "svelte": "5.57.2",
     "tsup": "^8.5.1",
     "typescript": "6.0.3",
-    "vitest": "5.0.1",
-    "vscode-css-languageservice": "6.3.10"
+    "vite": "8.3.3",
+    "vite-floor": "npm:vite@8.2.1",
+    "vitest": "5.0.3",
+    "vscode-css-languageservice": "6.3.10",
+    "vue": "3.5.43"
   },
   "engines": {
     "node": ">=22.18"
@@ -86,11 +125,10 @@
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
     "typecheck": "tsc --noEmit && tsc --noEmit -p test/browser/tsconfig.json",
-    "lint": "eslint src scripts --max-warnings 0 && stylelint \"src/**/*.css\" --max-warnings 0",
-    "lint:fix": "eslint src scripts --fix && stylelint \"src/**/*.css\" --fix",
-    "test": "node scripts/generate-consumer-theming-fixtures.ts && vitest run",
-    "test:coverage": "node scripts/generate-consumer-theming-fixtures.ts && vitest run --coverage",
-    "test:browser": "node scripts/generate-consumer-theming-fixtures.ts && vitest run --config vitest.browser.config.ts",
-    "check:pack": "node ../../scripts/without-dry-run.mjs publint && node ../../scripts/without-dry-run.mjs attw --pack . --profile esm-only --exclude-entrypoints . layers no-tokens reset atomic"
+    "lint": "eslint src scripts \"test/**/*.ts\" --max-warnings 0 && stylelint \"src/**/*.css\" --max-warnings 0",
+    "lint:fix": "eslint src scripts \"test/**/*.ts\" --fix && stylelint \"src/**/*.css\" --fix",
+    "test": "node scripts/generate-consumer-theming-fixtures.ts && node scripts/generate-vite-plugin-fixtures.ts && vitest run",
+    "test:browser": "node scripts/generate-consumer-theming-fixtures.ts && node scripts/generate-vite-plugin-fixtures.ts && node scripts/generate-lightningcss-fixtures.ts && node scripts/generate-no-bundler-fixture.ts && vitest run --config vitest.browser.config.ts && vitest run --config vitest.chromium.config.ts",
+    "check:pack": "node ../../scripts/without-dry-run.mjs publint && node ../../scripts/without-dry-run.mjs attw --pack . --profile esm-only --exclude-entrypoints . layers no-tokens reset atomic standalone"
   }
 }

package/skills/navecss/SKILL.md

@@ -58,6 +58,8 @@ built-in atom it names, and `cx()` takes built-in atoms and nothing else.
 Its type check is TypeScript only: a JavaScript consumer gets none of it. A type error from
 `cx()` means the name is wrong: it is never a reason to reach for `cx.raw()` or a cast.
 
+In a project whose Vite config uses `navePlugin()` from `@navecss/core/vite`, the build reads every `cx()` call and fails on one whose atoms it cannot list. Pass names it can read (a literal, a condition between literals, a `const` in the same file); to choose by a value, call `cx()` once per case and pick between the results; pass a name known only at run time to `cx.dynamic()`, with its atoms in `keep`. The build's report names its remedies, most preferred first: take the first one that fits. Never set `atomic: 'all'`, never build a `nave-` class from pieces, and never apply a class taken from `@navecss/core/atoms`, to make a report go away. The dev server serves the atoms the build would ship, chosen from the code it has read, so a `nave-*` class with no rule in dev is written where the build cannot see it: move it into code the build reads, or list its atom in `keep`.
+
 ## `cx.raw()`
 
 `cx.raw()` is for a class from outside any system Nave sees, the project’s own classes
@@ -139,7 +141,7 @@ a name that is in neither is not used, so do not invent one.
 | Atom            | Declarations                                                                                                              | Variants                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | --------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `interactive`   | `cursor: pointer;`<br>`-webkit-user-select: none;`<br>`user-select: none;`<br>`-webkit-tap-highlight-color: transparent;` | —                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `focusRing`     | `outline: none;`                                                                                                          | `:focus-visible` — `outline: var(--nave-border-width-focus) solid var(--nave-color-border-focus);`<br>`outline-offset: 2px;`                                                                                                                                                                                                                                                                                                                                   |
+| `focusRing`     | `outline: none;`                                                                                                          | `:focus-visible` — `outline-style: solid;`<br>`outline-width: var(--nave-border-width-focus, 2px);`<br>`outline-color: var(--nave-color-border-focus, currentColor);`<br>`outline-offset: 2px;`                                                                                                                                                                                                                                                                |
 | `disabledState` | —                                                                                                                         | `:disabled, [aria-disabled="true"]` — `color: var(--nave-color-content-disabled);`<br>`border-color: var(--nave-color-border-disabled);`<br>`pointer-events: none;`<br>On the aria-disabled branch the element stays focusable by design: this atom only blocks pointer activation (pointer-events: none), so the component's own activation handler must also check the attribute and no-op on Enter and Space, since CSS cannot prevent keyboard activation. |
 
 ### Visual
@@ -184,12 +186,15 @@ renders nothing.
 
 - `--nave-border-width-focus`: Focus ring indicator outline width
 - `--nave-border-width-lg`
+- `--nave-border-width-mark`: Strokes of glyphs drawn in CSS: check marks, indeterminate bars
 - `--nave-border-width-none`
 - `--nave-border-width-sm`: Default border / divider
+- `--nave-color-action-highlight`: Fill for a control under the pointer, the keyboard or a press: a highlighted list or menu item, or a ghost button. Never the only cue for focus or for a state such as selected, checked, open or current, and not for disabled controls.
 - `--nave-color-action-primary`
 - `--nave-color-action-primary-active`
 - `--nave-color-action-primary-hover`
 - `--nave-color-action-secondary`
+- `--nave-color-backdrop-modal`: Translucent layer between a modal panel and the page, which it recedes. Only behind a fully modal panel; never under text, a control or a focus indicator the reader can reach.
 - `--nave-color-border-control`: Identifying boundary for a control (inputs, form boundaries, and the secondary action control).
 - `--nave-color-border-default`: Decorative dividers and card edges.
 - `--nave-color-border-disabled`
@@ -260,7 +265,7 @@ renders nothing.
 - `--nave-motion-easing-standard`: General-purpose — enters and exits
 - `--nave-opacity-disabled`: Opacity multiplier for muting content that is inert and contains nothing focusable (e.g. a disabled icon or illustration). Nave's own interactive-disabled state is expressed through content.disabled and border.disabled instead, not this token: opacity composites everything an element paints, including a focus indicator inside it.
 - `--nave-radius-card`: Cards, panels, dialogs
-- `--nave-radius-control`: Inputs, buttons, tags
+- `--nave-radius-control`: Inputs, buttons, tags, and the popovers, menus and select lists anchored to a control
 - `--nave-radius-full`: Pill / badge shape
 - `--nave-radius-none`
 - `--nave-radius-overlay`: Modals, drawers, sheets