material-plus-ui 1.1.0 → 1.2.0

package/dist/tailwind.css

@@ -958,16 +958,23 @@
     /*
      * Motion.
      *
-     * Six of MD3's sixteen duration tokens and six of its seven easing curves —
-     * the ones something in the library actually reads, on the rule every other
-     * token here follows. `short4` is what a text field's label and outline
-     * transition on; the rest arrived with the `MPAnimate*` components, which
-     * take these as their defaults rather than numbers of their own.
+     * Seven of MD3's sixteen duration tokens and six of its seven easing curves
+     * — the ones something in the library actually reads, on the rule every
+     * other token here follows. `short4` is what a text field's label and
+     * outline transition on; most of the rest arrived with the `MPAnimate*`
+     * components, which take these as their defaults rather than numbers of
+     * their own.
+     *
+     * `short2` is the shortest of them and has one reader: an `MPSlider`'s
+     * handle catching up with a value the keyboard moved. A control the reader
+     * is holding an arrow key on has to arrive before the next press, and 200ms
+     * is longer than a key repeats.
      *
      * Worth knowing if these controls sit beside another library's: 250ms is a
      * common default elsewhere, and a field from here will settle slightly
      * sooner unless `short4` is set to match.
      */
+    --mp-sys-motion-duration-short2: 100ms;
     --mp-sys-motion-duration-short4: 200ms;
     --mp-sys-motion-duration-medium2: 300ms;
     --mp-sys-motion-duration-medium4: 400ms;
@@ -1520,6 +1527,49 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * The calendar's page turn
+ *
+ * A keyframe rather than a transition, for the reason the indicators above are:
+ * what changes when a month is stepped is the *content* of six rows, and there
+ * are no two states for CSS to interpolate between — the weeks that were there
+ * are gone. An animation on the arriving set is the only thing there is to run.
+ *
+ * `internal/Calendar.tsx` supplies the direction as a sign and restarts the
+ * animation by clearing `animation-name` and putting it back, which is the same
+ * move `internal/animate.ts` makes and for the same reason: React cannot rewind
+ * a CSS animation, and a `key` would restart it by unmounting the cell the
+ * reader's focus is standing on.
+ *
+ * The distance is one cell, which is deliberately short. A full grid's width
+ * would be a filmstrip, and the thing being said is only which way the reader
+ * went — a page that comes from the right and settles says that in the first
+ * hundred milliseconds, and the rest of the animation is the numbers arriving
+ * where they can be read.
+ *
+ * Unlayered, like the keyframes above, and switched off for a reader who asked
+ * for less motion. What is left then is the swap the grid did before, which
+ * loses the direction and nothing else.
+ * ------------------------------------------------------------------------- */
+
+@keyframes mp-calendar-page {
+  from {
+    opacity: 0;
+    translate: calc(var(--_mp-calendar-from, 0) * var(--_mp-cell)) 0;
+  }
+}
+
+.mp-calendar__page[data-mp-paged] {
+  animation: mp-calendar-page var(--mp-sys-motion-duration-medium2)
+    var(--mp-sys-motion-easing-emphasized-decelerate);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-calendar__page[data-mp-paged] {
+    animation: none;
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Animation
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-plus-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A React component library implementing Material Design 3 — the components other Material libraries do not ship, and wider versions of the ones they do. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it can coexist with an existing Material setup. ESM only, types included.",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -31,7 +31,7 @@
     "typecheck": "tsc --project tsconfig.prod.json --noEmit && tsc --project test/tsconfig.json && tsc --project docs/tsconfig.json"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=22.0.0"
   },
   "main": "dist/index.js",
   "exports": {
@@ -106,13 +106,13 @@
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
     "@typescript-eslint/parser": "^8.67.0",
-    "@vitejs/plugin-react": "^6.0.5",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitejs/plugin-react": "^6.1.0",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-n": "^18.3.0",
-    "globals": "^17.10.0",
+    "globals": "^17.11.0",
     "jiti": "^2.7.0",
     "playwright": "^1.62.1",
     "postcss": "^8.5.26",
@@ -125,15 +125,15 @@
     "tsx": "^4.23.12",
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.67.0",
-    "vite": "^8.2.1",
+    "vite": "^8.2.2",
     "vitepress": "^1.6.4",
     "vitepress-i18n": "^1.3.5",
-    "vitepress-sidebar": "^1.38.0",
-    "vitest": "^4.1.10",
+    "vitepress-sidebar": "^1.39.0",
+    "vitest": "^4.1.11",
     "vitest-browser-react": "^2.2.0"
   },
   "dependencies": {
-    "lucide-react": "^1.31.0"
+    "lucide-react": "^1.33.0"
   },
   "peerDependencies": {
     "@base-ui/react": "^1.7.0",