apex-grid 3.4.0 → 3.5.0

package/docs/media/_tokens.scss

@@ -7,16 +7,18 @@
 // This is the single rebrand surface: override ~12 values on `apex-grid` and
 // the whole grid re-skins. Values fall back to self-contained literals, so a
 // grid mounted with zero consumer CSS already looks premium; the brand tokens
-// additionally re-tint from the igniteui palette when it is present.
+// additionally re-tint from an Ignite UI palette when one is present.
 // No `!important`, no downstream hardcoded numerics — every rule resolves here.
 // ─────────────────────────────────────────────────────────────────────────
 
 :host {
     // ── Brand ────────────────────────────────────────────────────────────
-    // Re-tints from the igniteui palette when its CSS is loaded (so the grid
-    // auto-matches an igniteui host app), and falls back to the self-contained
-    // premium blue otherwise. This igniteui hook used to live in the per-theme
-    // files; folding it here keeps that integration without named themes.
+    // Re-tints from an Ignite UI palette when its CSS is loaded (so the grid
+    // auto-matches such a host app), and falls back to the self-contained
+    // premium blue otherwise. `--ig-primary-*` is the whole integration: it is
+    // what an Ignite UI theme actually defines, and reading it costs nothing
+    // when absent. This hook used to live in the per-theme files; folding it
+    // here keeps the integration without named themes.
     --ag-brand: var(--ig-primary-500, #0d6fd3); /* primary blue */
     --ag-brand-strong: var(--ig-primary-700, #0a56b8); /* hover / pressed */
 
@@ -111,14 +113,14 @@
 // Built-in dark theme. Opt in with `<apex-grid theme="dark">`.
 // Only color/surface tokens are flipped to a neutral slate palette; geometry,
 // typography, motion, and the brand hue (which still auto-tints from the
-// igniteui palette when present) are inherited from the light block above.
+// Ignite UI palette when present) are inherited from the light block above.
 // `theme~='dark'` matches a space-separated word so `theme="dark compact"`
 // style stacking keeps working. These tokens inherit across the shadow
 // boundary to every child component, so the whole grid re-skins from here.
 // ─────────────────────────────────────────────────────────────────────────
 :host([theme~='dark']) {
     // ── Brand ── brighter fallbacks so the accent reads on a dark surface;
-    // still re-tints from the igniteui palette first when it is present.
+    // still re-tints from an Ignite UI palette first when it is present.
     --ag-brand: var(--ig-primary-500, #3b82f6);
     --ag-brand-strong: var(--ig-primary-400, #60a5fa);
 
@@ -169,7 +171,7 @@
 // little brand into the surfaces/gridlines so the grid wears its brand even
 // at rest, a brand-tinted variant. Because every value is `color-mix(... var
 // (--ag-brand) ...)`, it follows whatever brand is in effect (including the
-// igniteui auto-tint) with no per-brand CSS.
+// Ignite UI auto-tint) with no per-brand CSS.
 // The light variant mixes into the white neutrals; the dark variant (higher
 // specificity, so it wins under `theme="dark tinted"`) mixes the SAME token
 // set into the slate neutrals. Body row surface stays untinted for legibility.
@@ -191,3 +193,22 @@
     --ag-row-hover: color-mix(in srgb, var(--ag-brand) 12%, var(--ag-surface));
     --ag-text-muted: color-mix(in srgb, var(--ag-brand) 28%, #94a3b8);
 }
+
+// ─────────────────────────────────────────────────────────────────────────
+// Reduced motion. Every transition in the grid is declared with one of the
+// three `--ag-dur-*` tokens (nothing hardcodes a duration, and there are no
+// keyframe animations), so zeroing them here is the whole opt-out: hover
+// washes, focus rings, chevron rotation and bar fills all become instant while
+// the end states stay identical. `prefers-reduced-motion` is a user request,
+// not a preference we can override, hence no `--ag-*` escape hatch.
+// A consumer that adds its own transitions inside the grid should either use
+// these tokens or guard them the same way. Row reorder / expansion animations
+// live in JS and already bail out (`internal/flip.ts`).
+// ─────────────────────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+    :host {
+        --ag-dur-fast: 0ms;
+        --ag-dur-med: 0ms;
+        --ag-dur-slow: 0ms;
+    }
+}

package/docs/media/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apex-grid",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Web component data grid following open-wc recommendations",
   "keywords": [
     "lit",
@@ -30,7 +30,8 @@
   },
   "scripts": {
     "analyze": "cem analyze --litelement --globs \"src/**/*.{js,ts}\" --exclude \"src/styles/**/*\"",
-    "build": "npm run analyze && node scripts/build.js && npm run typedoc",
+    "cem:check": "node scripts/check-cem-drift.js",
+    "build": "npm run analyze && npm run cem:check && node scripts/build.js && npm run typedoc",
     "build:tsc": "tsc",
     "dev:vite": "vite build",
     "format": "biome check --fix && npm run format:stylelint",
@@ -52,8 +53,6 @@
   "dependencies": {
     "@lit-labs/virtualizer": "^2.1.0",
     "@lit/context": "^1.1.5",
-    "igniteui-theming": "~19.1.0",
-    "igniteui-webcomponents": "~6.1.0",
     "lit": "^3.3.0"
   },
   "devDependencies": {

package/docs/media/state-persistence.html

@@ -54,7 +54,6 @@
       }
       apex-grid {
         min-height: 420px;
-        --ig-size: 2;
       }
       .snapshot {
         margin: 0;
@@ -79,15 +78,6 @@
         letter-spacing: 0.04em;
       }
     </style>
-    <script type="module">
-      try {
-        const resp = await fetch('https://cdn.jsdelivr.net/npm/igniteui-webcomponents@5/themes/light/bootstrap.css');
-        const css = await resp.text();
-        const style = document.createElement('style');
-        style.textContent = css.replaceAll(':root', 'apex-grid');
-        document.head.appendChild(style);
-      } catch (e) { /* theme is cosmetic */ }
-    </script>
   </head>
   <body>
     <h2>State Persistence — getState / setState</h2>