material-plus-ui 1.9.0 → 1.10.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,
@@ -3849,6 +3866,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 +3949,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 +4518,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.10.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": [