material-plus-ui 1.9.0 → 1.11.0

package/dist/tailwind.css

@@ -95,6 +95,27 @@
  * Only the *derived* colours need it. Everything else here is a literal value
  * with no `var()` to freeze, so plain inheritance from `:root` is enough.
  *
+ * ## Why `*` and `::backdrop`, but not `::before` and `::after`
+ *
+ * The rule reaches every element of the page it is loaded into, not only the
+ * ones this library rendered, so what it costs per element is a cost to the
+ * whole page. A `::before` or `::after` in the selector multiplies it: a
+ * browser has to resolve both pseudo-elements of every element on the page to
+ * find out whether either one draws anything, and resolving each one means
+ * substituting all of the roles below again.
+ *
+ * Neither needs its own copy. A `::before` and an `::after` inherit from the
+ * element they belong to, which already holds the roles as resolved where it
+ * sits, and nothing sets a source colour, a tone stop or a role on a
+ * pseudo-element — so the copy they would compute is the copy they inherit.
+ * `::placeholder` and `::marker` have always been read this way. `::backdrop`
+ * stays, because before 2024 it inherited from nothing at all.
+ *
+ * Measured on a plain page of 1,430 elements with nothing of this library on
+ * it, the first style pass took 164ms in WebKit with the pseudo-elements in the
+ * selector and 21ms without them, against 9ms with no stylesheet at all;
+ * Firefox went from 68ms to 26ms. iOS runs every browser on WebKit.
+ *
  * The computed results are `--_mp-*`: private, read by the components, and not
  * a name to set. Material Web marks its own internal tokens the same way. The
  * indirection is load-bearing — it is what keeps a consumer's
@@ -530,8 +551,6 @@
    * passes the edge by less than 4% of one channel.
    */
   *,
-  ::before,
-  ::after,
   ::backdrop {
     /*
      * The grey each accent tone sits on, in linear light: an OKLCh lightness
@@ -2045,8 +2064,6 @@
     }
 
     *,
-    ::before,
-    ::after,
     ::backdrop {
       --_mp-color-primary: var(
         --mp-sys-color-primary,
@@ -2333,12 +2350,12 @@
     /*
      * Motion.
      *
-     * 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.
+     * Six of MD3's sixteen duration tokens, and its six standard and emphasized
+     * easing curves with `linear` beside them — 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
@@ -3100,40 +3117,70 @@
  *
  * MD3's indeterminate bar is a long sweep followed by a short one that catches
  * up — the second is what keeps the track from being empty for most of the
- * cycle. Both are written as `inset-inline-*` rather than as a translate so
- * that the whole thing runs the other way under RTL without a second rule.
+ * cycle. What makes a sweep read as one is that its two edges do not move
+ * together: the head leaves first and settles, the tail lingers and then
+ * hurries after it, so the bar stretches across the track and gathers itself
+ * up at the far end. So each edge is an animation of its own, on a curve of its
+ * own, and a bar wears two of them.
+ *
+ * The curves are the library's tokens rather than numbers of this rule's own —
+ * `standard` for a head, which leaves quickly and arrives slowly, and
+ * `standard-accelerate` for a tail — and the cycle is two `extra-long4`s. A
+ * page that retunes its motion retunes this with it.
+ *
+ * Every edge runs the full cycle, with its pauses written as keyframes that
+ * hold, so the four stay in step however long a cycle is. A bar is zero wide
+ * at both ends of the cycle, which is what lets each loop start over without a
+ * visible jump.
+ *
+ * Both edges are `inset-inline-*` rather than a translate, so that the whole
+ * thing runs the other way under RTL without a second rule.
  */
-@keyframes mp-progress-linear-lead {
+@keyframes mp-progress-linear-lead-head {
   0% {
-    inset-inline-start: -35%;
     inset-inline-end: 100%;
   }
 
-  60% {
-    inset-inline-start: 100%;
-    inset-inline-end: -90%;
+  50%,
+  100% {
+    inset-inline-end: 0%;
+  }
+}
+
+@keyframes mp-progress-linear-lead-tail {
+  0%,
+  20% {
+    inset-inline-start: 0%;
   }
 
+  70%,
   100% {
     inset-inline-start: 100%;
-    inset-inline-end: -90%;
   }
 }
 
-@keyframes mp-progress-linear-trail {
-  0% {
-    inset-inline-start: -200%;
+/* The catch-up: it sets off as the first bar slows at the far end, and covers
+   the same track in a little over half the time. */
+@keyframes mp-progress-linear-trail-head {
+  0%,
+  50% {
     inset-inline-end: 100%;
   }
 
-  60% {
-    inset-inline-start: 107%;
-    inset-inline-end: -8%;
+  80%,
+  100% {
+    inset-inline-end: 0%;
+  }
+}
+
+@keyframes mp-progress-linear-trail-tail {
+  0%,
+  62% {
+    inset-inline-start: 0%;
   }
 
   100% {
-    inset-inline-start: 107%;
-    inset-inline-end: -8%;
+    inset-inline-start: 100%;
   }
 }
 
@@ -3196,13 +3243,20 @@
   }
 }
 
+.mp-progress-linear-lead,
+.mp-progress-linear-trail {
+  animation-duration: calc(var(--mp-sys-motion-duration-extra-long4) * 2);
+  animation-timing-function:
+    var(--mp-sys-motion-easing-standard), var(--mp-sys-motion-easing-standard-accelerate);
+  animation-iteration-count: infinite;
+}
+
 .mp-progress-linear-lead {
-  animation: mp-progress-linear-lead 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  animation-name: mp-progress-linear-lead-head, mp-progress-linear-lead-tail;
 }
 
 .mp-progress-linear-trail {
-  animation: mp-progress-linear-trail 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
-  animation-delay: 1.15s;
+  animation-name: mp-progress-linear-trail-head, mp-progress-linear-trail-tail;
 }
 
 .mp-progress-circular-turn {
@@ -3849,6 +3903,21 @@
   }
 }
 
+/*
+ * And the same for a page read without JavaScript.
+ *
+ * An entrance waiting for `trigger="visible"`, `manual` or `hover` sits paused
+ * on its first frame until script starts it, and with no script that is
+ * forever: the content was in the markup and drawn at `opacity: 0`, invisible
+ * to the reader and present for nobody but a crawler. With scripting off the
+ * entrance is dropped and the content shown, which is what it was carrying.
+ */
+@media (scripting: none) {
+  .mp-anim {
+    animation: none;
+  }
+}
+
 /*
  * Lighting: a light travelling around the outside of something.
  *
@@ -3917,6 +3986,23 @@
   }
 }
 
+/*
+ * The endless loops, held while they are off screen.
+ *
+ * `data-mp-offscreen` is written by the component while its element is out of
+ * the viewport. A loop nobody can see is still one the browser runs — a style
+ * pass a frame for the glow's angle, and a layout pass a frame for the linear
+ * indicator, whose bars move by `inset`. Paused, each carries on from where it
+ * stopped when it comes back, which for a loop is no difference at all.
+ */
+.mp-anim-lighting[data-mp-offscreen]::before,
+.mp-progress-linear[data-mp-offscreen] .mp-progress-linear-lead,
+.mp-progress-linear[data-mp-offscreen] .mp-progress-linear-trail,
+.mp-progress-circular[data-mp-offscreen] .mp-progress-circular-turn,
+.mp-progress-circular[data-mp-offscreen] .mp-progress-circular-arc {
+  animation-play-state: paused;
+}
+
 /*
  * Marquee: two identical copies, both moving by exactly one copy plus the gap.
  *
@@ -4469,3 +4555,66 @@
   inline-size: calc(var(--_mp-tree-indent) / 2 - 2px);
   border-block-start: 1px solid var(--_mp-color-outline-variant);
 }
+
+/* ---------------------------------------------------------------------------
+ * A fixed header's room, before the layout has measured it
+ *
+ * `MPPageLayout` keeps a fixed `MPHeader` from covering the top of the page by
+ * measuring the bar and padding the page by its height. The measurement is an
+ * effect, so on a server-rendered page the content was drawn under the bar and
+ * then pushed down by its height once the page had hydrated — a layout shift
+ * of a whole header's worth, on every page with one.
+ *
+ * These give the padding a first answer that needs no script: a fixed bar's
+ * height is its size's rung on the ladder, plus a pixel for the rule an
+ * `outlined` one draws under itself. The measurement still wins the moment it
+ * arrives, and it then moves nothing unless the bar's content made it taller
+ * than its rung. Only a bar that is the layout's own header is counted — the
+ * slot it sits in when the header spans the page, or the content column's when
+ * it does not — so a layout nested inside another does not answer for it.
+ *
+ * In a browser without `:has()` there is no first answer, which is how every
+ * browser behaved before.
+ * ------------------------------------------------------------------------- */
+
+.mp-page-layout:is(
+  :has(> .mp-header[data-mp-position='fixed'][data-mp-variant='outlined']),
+  :has(> div > div > .mp-header[data-mp-position='fixed'][data-mp-variant='outlined'])
+) {
+  --_mp-layout-header-rule: 1px;
+}
+
+.mp-page-layout:is(
+  :has(> .mp-header[data-mp-position='fixed'][data-mp-size='xs']),
+  :has(> div > div > .mp-header[data-mp-position='fixed'][data-mp-size='xs'])
+) {
+  --_mp-layout-header-seed: calc(3rem + var(--_mp-layout-header-rule, 0px));
+}
+
+.mp-page-layout:is(
+  :has(> .mp-header[data-mp-position='fixed'][data-mp-size='sm']),
+  :has(> div > div > .mp-header[data-mp-position='fixed'][data-mp-size='sm'])
+) {
+  --_mp-layout-header-seed: calc(3.5rem + var(--_mp-layout-header-rule, 0px));
+}
+
+.mp-page-layout:is(
+  :has(> .mp-header[data-mp-position='fixed'][data-mp-size='md']),
+  :has(> div > div > .mp-header[data-mp-position='fixed'][data-mp-size='md'])
+) {
+  --_mp-layout-header-seed: calc(4rem + var(--_mp-layout-header-rule, 0px));
+}
+
+.mp-page-layout:is(
+  :has(> .mp-header[data-mp-position='fixed'][data-mp-size='lg']),
+  :has(> div > div > .mp-header[data-mp-position='fixed'][data-mp-size='lg'])
+) {
+  --_mp-layout-header-seed: calc(5rem + var(--_mp-layout-header-rule, 0px));
+}
+
+.mp-page-layout:is(
+  :has(> .mp-header[data-mp-position='fixed'][data-mp-size='xl']),
+  :has(> div > div > .mp-header[data-mp-position='fixed'][data-mp-size='xl'])
+) {
+  --_mp-layout-header-seed: calc(6rem + var(--_mp-layout-header-rule, 0px));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-plus-ui",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "A React component library written from the Material Design 3 specification and extended past it — wider versions of the components it names, and the charts, data table and command palette it does not. Built on Base UI and Tailwind CSS v4, themed with CSS custom properties so it coexists with an existing Material setup. ESM only, types included.",
   "type": "module",
   "sideEffects": [