material-plus-ui 1.0.0 → 1.1.0

package/dist/tailwind.css

@@ -955,14 +955,48 @@
     --mp-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
     --mp-sys-elevation-level3: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 4px 8px 3px rgb(0 0 0 / 0.15);
 
-    /* Motion. MD3's `short4`, which is what a text field's label and outline
-       transition on. 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 this is set to match. */
+    /*
+     * 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.
+     *
+     * 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-short4: 200ms;
+    --mp-sys-motion-duration-medium2: 300ms;
+    --mp-sys-motion-duration-medium4: 400ms;
+    --mp-sys-motion-duration-long2: 500ms;
+    --mp-sys-motion-duration-extra-long4: 1000ms;
+
     /* The spec's `standard` curve: quick to leave, slow to arrive. Read by the
        one thing in the library that actually travels, a switch's thumb. */
     --mp-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --mp-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
+    --mp-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
+    /*
+     * The emphasized set, which is what MD3 asks a *transition* to use — a
+     * standard curve is for a control changing state, an emphasized one for
+     * something arriving on or leaving the screen.
+     *
+     * `emphasized` itself is two curves joined in the middle in the
+     * specification, and CSS has no single value that is both. This is the
+     * one-curve stand-in MD3's own web implementation publishes. Where the
+     * halves genuinely matter — a line rising as another leaves — the two below
+     * are the halves, and they are what the components reach for.
+     */
+    --mp-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+    --mp-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
+    --mp-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
+    /* CSS's own `linear` is a keyword rather than a curve, and a token that
+       cannot be interpolated with the other six is a token that breaks the one
+       place they are swapped. The identity bezier is the same line. */
+    --mp-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
   }
 
   /*
@@ -1139,6 +1173,165 @@
   --ease-mp-standard: var(--mp-sys-motion-easing-standard);
 }
 
+/* ---------------------------------------------------------------------------
+ * The layout grid
+ *
+ * A column is `(100% + gutter) * span / columns - gutter`, and the arithmetic
+ * lives here for the reason the keyframes below do: Tailwind finds classes by
+ * scanning source text, and `columns` is a number the caller picks at runtime.
+ * A class name assembled in JavaScript is a class name Tailwind never sees, so
+ * the per-instance numbers arrive as inline `--_mp-*` slots — exactly as a
+ * `color` reaches a background — and the rules that read them are written once,
+ * here.
+ *
+ * `min(span, columns)` is the clamp: `span={99}` fills its row instead of
+ * running off the page, which is what the caller meant.
+ *
+ * Every slot cascades upward — each window size class falls back through the
+ * ones below it — so `span={{ expanded: 6 }}` sets one custom property and not
+ * five. The chains get long at `extra-large`; that is the cost of keeping the
+ * DOM lean, and it is paid once here rather than on every grid item in a
+ * consumer's application.
+ *
+ * The widths are **MD3's window size classes** — 600, 840, 1200 and 1600dp —
+ * and not Tailwind's breakpoints. See `MPWindowClass` in `src/types.ts`.
+ *
+ * Unlayered, like the two animation classes below and for the same reason: a
+ * layered rule loses to every unlayered one, and a consumer's own page styling
+ * is unlayered. A grid whose widths could be cancelled by a stray `div { }` in
+ * an application's stylesheet is not a grid.
+ * ------------------------------------------------------------------------- */
+
+.mp-grid {
+  --_mp-cols: var(--_mp-cols-compact, 12);
+  --_mp-gap-x: var(--_mp-gap-x-compact, 0px);
+  --_mp-gap-y: var(--_mp-gap-y-compact, 0px);
+}
+
+.mp-grid-item {
+  --_mp-span: var(--_mp-span-compact, var(--_mp-cols, 12));
+  --_mp-offset: var(--_mp-offset-compact, 0);
+
+  /* One column plus one gutter. `--_mp-cols` and `--_mp-gap-x` are inherited
+     from the grid, so this re-resolves on its own at every window class. */
+  --_mp-track: calc((100% + var(--_mp-gap-x, 0px)) / var(--_mp-cols, 12));
+
+  /* Inseparable from the width under them: `flex` stops the row resizing the
+     item, `min-width` stops a long unbroken word doing the same, and
+     `box-sizing` is what makes the percentage mean the whole item. */
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-width: 0;
+  width: calc(var(--_mp-track) * min(var(--_mp-span), var(--_mp-cols, 12)) - var(--_mp-gap-x, 0px));
+  margin-inline-start: calc(var(--_mp-track) * min(var(--_mp-offset), var(--_mp-cols, 12)));
+}
+
+@media (width >= 600px) {
+  .mp-grid {
+    --_mp-cols: var(--_mp-cols-medium, var(--_mp-cols-compact, 12));
+    --_mp-gap-x: var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px));
+    --_mp-gap-y: var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px));
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)));
+    --_mp-offset: var(--_mp-offset-medium, var(--_mp-offset-compact, 0));
+  }
+}
+
+@media (width >= 840px) {
+  .mp-grid {
+    --_mp-cols: var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)));
+    --_mp-gap-x: var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)));
+    --_mp-gap-y: var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)));
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(
+      --_mp-span-expanded,
+      var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)))
+    );
+    --_mp-offset: var(
+      --_mp-offset-expanded,
+      var(--_mp-offset-medium, var(--_mp-offset-compact, 0))
+    );
+  }
+}
+
+@media (width >= 1200px) {
+  .mp-grid {
+    --_mp-cols: var(
+      --_mp-cols-large,
+      var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)))
+    );
+    --_mp-gap-x: var(
+      --_mp-gap-x-large,
+      var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)))
+    );
+    --_mp-gap-y: var(
+      --_mp-gap-y-large,
+      var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)))
+    );
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(
+      --_mp-span-large,
+      var(--_mp-span-expanded, var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12))))
+    );
+    --_mp-offset: var(
+      --_mp-offset-large,
+      var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
+    );
+  }
+}
+
+@media (width >= 1600px) {
+  .mp-grid {
+    --_mp-cols: var(
+      --_mp-cols-extra-large,
+      var(
+        --_mp-cols-large,
+        var(--_mp-cols-expanded, var(--_mp-cols-medium, var(--_mp-cols-compact, 12)))
+      )
+    );
+    --_mp-gap-x: var(
+      --_mp-gap-x-extra-large,
+      var(
+        --_mp-gap-x-large,
+        var(--_mp-gap-x-expanded, var(--_mp-gap-x-medium, var(--_mp-gap-x-compact, 0px)))
+      )
+    );
+    --_mp-gap-y: var(
+      --_mp-gap-y-extra-large,
+      var(
+        --_mp-gap-y-large,
+        var(--_mp-gap-y-expanded, var(--_mp-gap-y-medium, var(--_mp-gap-y-compact, 0px)))
+      )
+    );
+  }
+
+  .mp-grid-item {
+    --_mp-span: var(
+      --_mp-span-extra-large,
+      var(
+        --_mp-span-large,
+        var(
+          --_mp-span-expanded,
+          var(--_mp-span-medium, var(--_mp-span-compact, var(--_mp-cols, 12)))
+        )
+      )
+    );
+    --_mp-offset: var(
+      --_mp-offset-extra-large,
+      var(
+        --_mp-offset-large,
+        var(--_mp-offset-expanded, var(--_mp-offset-medium, var(--_mp-offset-compact, 0)))
+      )
+    );
+  }
+}
+
 /* ---------------------------------------------------------------------------
  * Keyframes
  *
@@ -1326,3 +1519,396 @@
     opacity: 0.6;
   }
 }
+
+/* ---------------------------------------------------------------------------
+ * Animation
+ *
+ * The `MPAnimate*` components. Real CSS for the reason the loading indicators
+ * above are: a keyframe is not a Tailwind variant, so there is nothing to
+ * express one with.
+ *
+ * The whole set is built on one idea. An effect is a single `@keyframes` that
+ * runs from a state written entirely in `--_mp-anim-*` custom properties to the
+ * element's natural one — so `src/internal/animate.ts` never generates CSS, it
+ * only fills slots, and running an effect backwards is `animation-direction:
+ * reverse` rather than a second keyframe. That is what makes `mode="out"` cost
+ * nothing, and it is also what makes it *correct*: CSS mirrors the timing
+ * function along with the keyframes, so an entrance eased on
+ * `emphasized-decelerate` comes back accelerating. MD3 asks for exactly that
+ * pair; the browser supplies the second half of it.
+ *
+ * `fill-mode` is `both` throughout, which is what lets an animation that has
+ * not been triggered yet sit paused on its own first frame. Without it, an
+ * element waiting to be scrolled into view would be fully drawn and then blink
+ * out the moment it arrived.
+ *
+ * This is also where the library's rule against transforms is at its narrowest.
+ * A *control* never moves — that rule is about a button resampling its own
+ * label under the pointer, and it holds without exception. An `MPAnimate*`
+ * moves content the caller asked to have moved, and it moves it with the
+ * independent `translate`, `scale` and `rotate` properties rather than the
+ * `transform` shorthand, so a caller's own transform on the same element
+ * survives.
+ *
+ * Unlayered, like the keyframes above: `@keyframes` takes no part in the
+ * cascade, but the classes do, and a layered class would lose to any unlayered
+ * rule a consumer's own stylesheet happens to have.
+ * ------------------------------------------------------------------------- */
+
+.mp-anim {
+  animation-duration: var(--_mp-anim-duration, var(--mp-sys-motion-duration-medium4));
+  animation-delay: var(--_mp-anim-delay, 0ms);
+  animation-timing-function: var(
+    --_mp-anim-ease,
+    var(--mp-sys-motion-easing-emphasized-decelerate)
+  );
+  animation-iteration-count: var(--_mp-anim-repeat, 1);
+  animation-direction: var(--_mp-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--_mp-anim-state, running);
+}
+
+@keyframes mp-anim-fade {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.mp-anim-fade {
+  animation-name: mp-anim-fade;
+}
+
+/* Grow and Zoom share this one: they are the same arithmetic at two strengths,
+   separated by their defaults and by their origin rather than by their maths. */
+@keyframes mp-anim-scale {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+    scale: var(--_mp-anim-scale, 0.8);
+  }
+
+  to {
+    opacity: 1;
+    scale: 1;
+  }
+}
+
+.mp-anim-scale {
+  animation-name: mp-anim-scale;
+}
+
+@keyframes mp-anim-slide {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+    translate: var(--_mp-anim-x, 0px) var(--_mp-anim-y, 0px);
+  }
+
+  to {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+.mp-anim-slide {
+  animation-name: mp-anim-slide;
+}
+
+/* Two angles rather than one, so the same keyframe covers both the quarter turn
+   something arrives on and the endless one a decorative mark spins through. */
+@keyframes mp-anim-rotate {
+  from {
+    opacity: var(--_mp-anim-opacity, 0);
+    rotate: var(--_mp-anim-angle, -180deg);
+  }
+
+  to {
+    opacity: 1;
+    rotate: var(--_mp-anim-angle-to, 0deg);
+  }
+}
+
+.mp-anim-rotate {
+  animation-name: mp-anim-rotate;
+}
+
+/* Symmetric on purpose: a blink that ended anywhere but where it started would
+   leave the element half drawn whenever the count ran out. */
+@keyframes mp-anim-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: var(--_mp-anim-opacity, 0);
+  }
+}
+
+.mp-anim-blink {
+  animation-name: mp-anim-blink;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /*
+   * The Animate components go the other way from the indicators above, and the
+   * difference is what each of them is saying. A spinner that stops is lying
+   * about whether anything is happening; an entrance that does not play has
+   * still delivered its content, which is the only thing it was ever carrying.
+   *
+   * `animation: none` rather than a zero duration, because the shorthand also
+   * clears `fill-mode` — and it is the fill that was holding an untriggered
+   * element on its own first frame at `opacity: 0`. Left in place, respecting a
+   * reader's preference would blank the page.
+   */
+  .mp-anim {
+    animation: none;
+  }
+}
+
+/*
+ * Lighting: a light travelling around the outside of something.
+ *
+ * The arc is a conic gradient and what moves is its `from` angle, which is only
+ * animatable because the angle is a registered custom property with a type. The
+ * alternative — rotating the pseudo-element itself — swings its corners out
+ * past the element on every quarter turn.
+ *
+ * `z-index: -1` inside an isolated stacking context puts the glow behind the
+ * content but still inside the component, so it reads as light escaping from
+ * under a sheet rather than as a border drawn around one. Nothing inside is
+ * overlaid and nothing is tinted, which is what lets it go around a card or a
+ * button without touching how either is drawn.
+ */
+@property --mp-glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes mp-anim-lighting {
+  to {
+    --mp-glow-angle: 360deg;
+  }
+}
+
+.mp-anim-lighting {
+  position: relative;
+  isolation: isolate;
+}
+
+.mp-anim-lighting::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: calc(-1 * var(--_mp-anim-glow-width, 3px));
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--mp-glow-angle),
+    transparent 0deg,
+    var(--_mp-anim-glow, var(--_mp-accent)) var(--_mp-anim-glow-arc, 50deg),
+    transparent calc(var(--_mp-anim-glow-arc, 50deg) * 2),
+    transparent 360deg
+  );
+  filter: blur(var(--_mp-anim-glow-blur, 4px));
+  animation-name: mp-anim-lighting;
+  animation-duration: var(--_mp-anim-duration, 3s);
+  animation-delay: var(--_mp-anim-delay, 0ms);
+  /* Linear, and not a token: a loop with no beginning has nothing to
+     decelerate into, and an eased revolution reads as the light hesitating at
+     an arbitrary point on a circle that has no arbitrary points. */
+  animation-timing-function: linear;
+  animation-iteration-count: var(--_mp-anim-repeat, infinite);
+  animation-direction: var(--_mp-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--_mp-anim-state, running);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The arc stops travelling and becomes an even glow. The same trade the
+     skeleton makes: the decoration survives, the motion does not — a light
+     that marked the live row still marks it while holding still. */
+  .mp-anim-lighting::before {
+    background: var(--_mp-anim-glow, var(--_mp-accent));
+    animation: none;
+  }
+}
+
+/*
+ * Marquee: two identical copies, both moving by exactly one copy plus the gap.
+ *
+ * Which is the whole trick — when the first copy has travelled its own width,
+ * the second is standing precisely where the first began, so there is no seam
+ * and no frame where the strip is empty. A percentage `translate` resolves
+ * against the element's own box, so neither copy has to be measured for this to
+ * hold; measuring only ever decides how *fast* it goes.
+ */
+@keyframes mp-anim-marquee-x {
+  from {
+    translate: 0 0;
+  }
+
+  to {
+    translate: calc(-100% - var(--_mp-anim-gap, 0px)) 0;
+  }
+}
+
+@keyframes mp-anim-marquee-y {
+  from {
+    translate: 0 0;
+  }
+
+  to {
+    translate: 0 calc(-100% - var(--_mp-anim-gap, 0px));
+  }
+}
+
+.mp-marquee {
+  display: flex;
+  overflow: hidden;
+  gap: var(--_mp-anim-gap, 0px);
+}
+
+.mp-marquee-vertical {
+  flex-direction: column;
+}
+
+.mp-marquee-track {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: var(--_mp-anim-gap, 0px);
+  animation-name: mp-anim-marquee-x;
+  animation-duration: var(--_mp-anim-duration, 12s);
+  animation-delay: var(--_mp-anim-delay, 0ms);
+  /* Linear unless a caller insists otherwise. An eased marquee slows at both
+     ends of a loop that has no ends, which reads as the page stuttering. */
+  animation-timing-function: var(--_mp-anim-ease, linear);
+  animation-iteration-count: var(--_mp-anim-repeat, infinite);
+  animation-direction: var(--_mp-anim-direction, normal);
+  animation-fill-mode: both;
+  animation-play-state: var(--_mp-anim-state, running);
+}
+
+.mp-marquee-vertical .mp-marquee-track {
+  flex-direction: column;
+  animation-name: mp-anim-marquee-y;
+}
+
+.mp-marquee[data-mp-pause-on-hover]:hover .mp-marquee-track {
+  animation-play-state: paused;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Stopped, not slowed. A strip of logos that has stopped scrolling is a strip
+     of logos, and the first copy is fully in frame — which is more than the
+     moving version guarantees at any given moment. */
+  .mp-marquee-track {
+    animation: none;
+  }
+}
+
+/*
+ * Headline: one line replacing another from below.
+ *
+ * Every item is in the same grid cell, so the box is as tall as the tallest of
+ * them from the first frame and never resizes as the reel turns. The ones not
+ * on screen keep their space with `visibility` rather than `display`, which is
+ * what makes that true.
+ *
+ * The two halves take the two halves of MD3's emphasized curve — the line
+ * arriving decelerates into place, the line leaving accelerates away — which is
+ * the one place in the library where both are written out rather than one being
+ * a reversed run of the other. Here they genuinely are two animations on two
+ * elements at the same moment.
+ */
+@keyframes mp-anim-headline-in {
+  from {
+    translate: 0 var(--_mp-anim-rise, 100%);
+    opacity: 0;
+  }
+
+  to {
+    translate: 0 0;
+    opacity: 1;
+  }
+}
+
+@keyframes mp-anim-headline-out {
+  from {
+    translate: 0 0;
+    opacity: 1;
+  }
+
+  to {
+    translate: 0 calc(-1 * var(--_mp-anim-rise, 100%));
+    opacity: 0;
+  }
+}
+
+.mp-headline {
+  display: grid;
+  overflow: hidden;
+}
+
+.mp-headline-item {
+  grid-area: 1 / 1;
+  visibility: hidden;
+  animation-duration: var(--_mp-anim-duration, var(--mp-sys-motion-duration-long2));
+  animation-fill-mode: both;
+}
+
+.mp-headline-item[data-mp-state='active'] {
+  visibility: visible;
+  animation-name: mp-anim-headline-in;
+  animation-timing-function: var(
+    --_mp-anim-ease,
+    var(--mp-sys-motion-easing-emphasized-decelerate)
+  );
+}
+
+.mp-headline-item[data-mp-state='leaving'] {
+  visibility: visible;
+  animation-name: mp-anim-headline-out;
+  animation-timing-function: var(
+    --_mp-anim-ease,
+    var(--mp-sys-motion-easing-emphasized-accelerate)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The reel still turns — it is a set of phrases and stopping on the first
+     would be a different message — but the lines swap rather than travel. */
+  .mp-headline-item {
+    animation: none;
+  }
+}
+
+/* The block after a typewriter. `step-end` rather than a fade, because a caret
+   that eases is a caret that looks like it is being rendered slowly. */
+@keyframes mp-anim-caret {
+  0%,
+  45% {
+    opacity: 1;
+  }
+
+  55%,
+  100% {
+    opacity: 0;
+  }
+}
+
+.mp-typing-caret {
+  display: inline-block;
+  animation: mp-anim-caret 1s step-end infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The whole string is already there under this preference — the caret would
+     be a cursor blinking after text nobody is typing. */
+  .mp-typing-caret {
+    animation: none;
+  }
+}