neba 1.11.0 → 1.13.0

package/dist/tailwind.css

@@ -172,6 +172,13 @@
      as a move. Nothing else may use it. */
   --neba-duration-window: 240ms;
 
+  /* How high every portalled surface sits: a menu, a dialog, a drawer, a
+     tooltip, a toast. One number, because they are all the same kind of thing
+     — something drawn over the page the reader was looking at — and because
+     the value a host needs is its own. A site whose fixed header is at 1200
+     sets this once rather than beating fourteen `z-50`s with a selector. */
+  --neba-z-portal: 50;
+
   /* Color families -------------------------------------------------------
      Chroma sits just under the sRGB gamut boundary for each family's lightness
      — around 90% of the maximum, close enough to be vivid and far enough that
@@ -1391,7 +1398,57 @@
 }
 
 /* ---------------------------------------------------------------------------
- * Grid
+ * Breakpoints
+ *
+ * The five widths the whole library branches on, taken from Tailwind's theme
+ * rather than written out — `theme()` resolves at build time, in whichever
+ * Tailwind build compiles this file, so a consumer who redeclares
+ * `--breakpoint-md` in their own `@theme` moves the media queries below, the
+ * `md:` variants the components spell out, and the JavaScript that reads the
+ * tokens here, all at once. That is the whole mechanism: a breakpoint is a
+ * build-time decision, because `@media` cannot read a custom property and no
+ * amount of runtime configuration can change that.
+ *
+ * `xs` has no token because its floor is `0`: it is the value with no media
+ * query around it, and there is nothing for JavaScript to look up.
+ *
+ * Tailwind does not emit `--breakpoint-*` into `:root` — they are compile-time
+ * values to it — so the four are copied under a name of the library's own,
+ * which is what `internal/media.ts` reads to build its `matchMedia` queries.
+ * Declared once, on `:root` alone: a width is not a theme-dependent value, so
+ * the rule about repeating derived tokens per theme root does not apply.
+ * ------------------------------------------------------------------------- */
+
+:root {
+  --neba-breakpoint-sm: theme(--breakpoint-sm);
+  --neba-breakpoint-md: theme(--breakpoint-md);
+  --neba-breakpoint-lg: theme(--breakpoint-lg);
+  --neba-breakpoint-xl: theme(--breakpoint-xl);
+}
+
+/* ---------------------------------------------------------------------------
+ * Responsive slots
+ *
+ * Every value in the library that changes at a breakpoint resolves here: one
+ * cascade per slot name, each breakpoint falling back through the ones below
+ * it, so `span={{ md: 6 }}` sets one custom property and not five. A media
+ * query can change an inherited custom property without React hearing about
+ * it, which is the whole reason this is CSS — the alternative is re-rendering
+ * the tree at every breakpoint to say the same thing.
+ *
+ * Nothing here *applies* a value except the grid's own width arithmetic. The
+ * components read the resolved slot through an ordinary Tailwind utility —
+ * `gap-x-(--n-gap-x)`, `max-w-(--n-max-w)` — so a caller's own class fights
+ * that utility on equal terms, exactly as it did before the value was
+ * responsive. A real declaration in this file would win that fight, because
+ * this sheet is loaded after the utilities.
+ *
+ * The chains get long at `xl`; 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 app. It is
+ * also why the list of responsive axes is deliberately short — four media
+ * blocks per slot cannot be generated, so each new one is a decision.
+ *
+ * The grid ------------------------------------------------------------------
  *
  * A column is `(100% + gap) * span / columns - gap` wide, and an offset shifts
  * it by `(100% + gap) * offset / columns`. Both are exact rather than
@@ -1409,21 +1466,121 @@
  * `min(span, columns)` is the clamp: a `span={99}` fills its row instead of
  * overflowing the page, which is what the caller meant.
  *
- * Every slot cascades upward — each breakpoint falls back through the ones
- * below it — so `span={{ md: 6 }}` sets one custom property and not five. The
- * chains get long at `xl`; 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 app.
- *
- * The widths are Tailwind's own breakpoints, so a Neba grid and a `md:` utility
- * change at the same moment.
+ * The widths are read from Tailwind's theme, so a Neba grid and a `md:` utility
+ * change at the same moment — including when a consumer has moved them.
  * ------------------------------------------------------------------------- */
 
-.neba-grid {
-  --n-cols: var(--n-cols-xs, 12);
+/* Every breakpoint slot is cleared on the element that reads it, and that is
+   what keeps a nested component from reading its ancestor's layout.
+
+   A custom property inherits, and a slot the element did not write is
+   therefore whatever the nearest ancestor wrote — so a grid inside a grid item
+   resolved the *item's* `--n-span-md` and came out a third of the width it had
+   asked for. Only the breakpoints a caller names are emitted, which is what
+   keeps the inline style to one property, so there is nothing on the element
+   to overwrite the inherited value with.
+
+   An inline style wins over this rule, so a component that really did name a
+   breakpoint is untouched. What is deliberately *not* cleared is the resolved
+   slot beside each of these: `--n-cols` and `--n-gap-x` are read by a grid's
+   items rather than by the grid, and inheriting is how they get there. */
+.neba-grid,
+.neba-flex {
+  --n-gap-x-xs: initial;
+  --n-gap-x-sm: initial;
+  --n-gap-x-md: initial;
+  --n-gap-x-lg: initial;
+  --n-gap-x-xl: initial;
+  --n-gap-y-xs: initial;
+  --n-gap-y-sm: initial;
+  --n-gap-y-md: initial;
+  --n-gap-y-lg: initial;
+  --n-gap-y-xl: initial;
+}
+
+.neba-grid,
+.neba-gallery {
+  --n-cols-xs: initial;
+  --n-cols-sm: initial;
+  --n-cols-md: initial;
+  --n-cols-lg: initial;
+  --n-cols-xl: initial;
+}
+
+.neba-flex {
+  --n-flex-dir-xs: initial;
+  --n-flex-dir-sm: initial;
+  --n-flex-dir-md: initial;
+  --n-flex-dir-lg: initial;
+  --n-flex-dir-xl: initial;
+}
+
+.neba-measure {
+  --n-max-w-xs: initial;
+  --n-max-w-sm: initial;
+  --n-max-w-md: initial;
+  --n-max-w-lg: initial;
+  --n-max-w-xl: initial;
+}
+
+.neba-grid-item {
+  --n-span-xs: initial;
+  --n-span-sm: initial;
+  --n-span-md: initial;
+  --n-span-lg: initial;
+  --n-span-xl: initial;
+  --n-span-w-xs: initial;
+  --n-span-w-sm: initial;
+  --n-span-w-md: initial;
+  --n-span-w-lg: initial;
+  --n-span-w-xl: initial;
+  --n-grow-xs: initial;
+  --n-grow-sm: initial;
+  --n-grow-md: initial;
+  --n-grow-lg: initial;
+  --n-grow-xl: initial;
+  --n-offset-xs: initial;
+  --n-offset-sm: initial;
+  --n-offset-md: initial;
+  --n-offset-lg: initial;
+  --n-offset-xl: initial;
+}
+
+/* The two gutters, shared: a GridContainer and a Flex ask the same question
+   and `spacing` has to mean the same number on both.
+
+   `--n-cols` is shared with a Gallery one rule down for that same reason: how
+   many columns a row is cut into is one question, and a second cascade for it
+   would be four more media blocks saying the thing this one already says. The
+   `12` fallback is a grid's; a Gallery always emits its own `xs`, so it never
+   reaches. */
+.neba-grid,
+.neba-flex {
   --n-gap-x: var(--n-gap-x-xs, 0px);
   --n-gap-y: var(--n-gap-y-xs, 0px);
 }
 
+.neba-grid,
+.neba-gallery {
+  --n-cols: var(--n-cols-xs, 12);
+}
+
+/* A Flex, whose other responsive value is which way the row runs. `row` is the
+   fallback so a `<Flex>` with no direction at all is still a row. */
+.neba-flex {
+  --n-flex-dir: var(--n-flex-dir-xs, row);
+}
+
+/* A Container, a Header and a Footer, whose one responsive value is how wide
+   the content on them is allowed to get. The slot is applied by a
+   `max-w-(--n-max-w)` utility on the component rather than by a rule here, so
+   the component's measure stays exactly as overridable by a caller's own
+   `max-w-*` as it was when it was a `max-w-[48rem]` — a custom property is
+   invisible to that fight, and a real class in this file would have won it. */
+.neba-measure {
+  --n-max-w: var(--n-max-w-xs, none);
+}
+
 .neba-grid-item {
   --n-span: var(--n-span-xs, var(--n-cols, 12));
   --n-offset: var(--n-offset-xs, 0);
@@ -1432,64 +1589,136 @@
      the container, so this re-resolves on its own at every breakpoint. */
   --n-track: calc((100% + var(--n-gap-x, 0px)) / var(--n-cols, 12));
 
-  /* Inseparable from the width above it: `flex` stops the row from resizing
-     the item, `min-width` stops a long unbroken word from doing the same, and
-     `box-sizing` is what makes the percentage mean the whole item. */
+  /* What a span that is a share of the row works out to, named rather than
+     written into `width` so that a breakpoint which goes back to a number can
+     point at it. */
+  --n-col-width: calc(var(--n-track) * min(var(--n-span), var(--n-cols, 12)) - var(--n-gap-x, 0px));
+
+  /* `auto` and `grow` are the two widths a column count cannot reach — the
+     contents' own width, with and without the space left over in the row — so
+     they are a cascade of their own rather than a value inside the one above.
+     A caller who names a number at a wider breakpoint points this back at the
+     arithmetic, which is what lets the two mix in one map. */
+  --n-span-w: var(--n-span-w-xs, var(--n-col-width));
+  --n-grow: var(--n-grow-xs, 0);
+
+  /* Inseparable from the width above it: the row must not resize the item,
+     `min-width` stops a long unbroken word from doing the same, `max-width`
+     holds an `auto` item inside the row it is in, and `box-sizing` is what
+     makes the percentage mean the whole item. */
   box-sizing: border-box;
-  flex: 0 0 auto;
+  flex-grow: var(--n-grow);
+  flex-shrink: 0;
+  flex-basis: auto;
   min-width: 0;
-  width: calc(var(--n-track) * min(var(--n-span), var(--n-cols, 12)) - var(--n-gap-x, 0px));
+  max-width: 100%;
+  width: var(--n-span-w);
   margin-inline-start: calc(var(--n-track) * min(var(--n-offset), var(--n-cols, 12)));
 }
 
-@media (width >= 40rem) {
-  .neba-grid {
-    --n-cols: var(--n-cols-sm, var(--n-cols-xs, 12));
+@media (width >= theme(--breakpoint-sm)) {
+  .neba-measure {
+    --n-max-w: var(--n-max-w-sm, var(--n-max-w-xs, none));
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(--n-gap-x-sm, var(--n-gap-x-xs, 0px));
     --n-gap-y: var(--n-gap-y-sm, var(--n-gap-y-xs, 0px));
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(--n-cols-sm, var(--n-cols-xs, 12));
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(--n-flex-dir-sm, var(--n-flex-dir-xs, row));
+  }
+
   .neba-grid-item {
     --n-span: var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12)));
+    --n-span-w: var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width)));
+    --n-grow: var(--n-grow-sm, var(--n-grow-xs, 0));
     --n-offset: var(--n-offset-sm, var(--n-offset-xs, 0));
   }
 }
 
-@media (width >= 48rem) {
-  .neba-grid {
-    --n-cols: var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12)));
+@media (width >= theme(--breakpoint-md)) {
+  .neba-measure {
+    --n-max-w: var(--n-max-w-md, var(--n-max-w-sm, var(--n-max-w-xs, none)));
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(--n-gap-x-md, var(--n-gap-x-sm, var(--n-gap-x-xs, 0px)));
     --n-gap-y: var(--n-gap-y-md, var(--n-gap-y-sm, var(--n-gap-y-xs, 0px)));
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12)));
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(--n-flex-dir-md, var(--n-flex-dir-sm, var(--n-flex-dir-xs, row)));
+  }
+
   .neba-grid-item {
     --n-span: var(--n-span-md, var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12))));
+    --n-span-w: var(--n-span-w-md, var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width))));
+    --n-grow: var(--n-grow-md, var(--n-grow-sm, var(--n-grow-xs, 0)));
     --n-offset: var(--n-offset-md, var(--n-offset-sm, var(--n-offset-xs, 0)));
   }
 }
 
-@media (width >= 64rem) {
-  .neba-grid {
-    --n-cols: var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))));
+@media (width >= theme(--breakpoint-lg)) {
+  .neba-measure {
+    --n-max-w: var(--n-max-w-lg, var(--n-max-w-md, var(--n-max-w-sm, var(--n-max-w-xs, none))));
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(--n-gap-x-lg, var(--n-gap-x-md, var(--n-gap-x-sm, var(--n-gap-x-xs, 0px))));
     --n-gap-y: var(--n-gap-y-lg, var(--n-gap-y-md, var(--n-gap-y-sm, var(--n-gap-y-xs, 0px))));
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))));
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(
+      --n-flex-dir-lg,
+      var(--n-flex-dir-md, var(--n-flex-dir-sm, var(--n-flex-dir-xs, row)))
+    );
+  }
+
   .neba-grid-item {
     --n-span: var(
       --n-span-lg,
       var(--n-span-md, var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12))))
     );
+    --n-span-w: var(
+      --n-span-w-lg,
+      var(--n-span-w-md, var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width))))
+    );
+    --n-grow: var(--n-grow-lg, var(--n-grow-md, var(--n-grow-sm, var(--n-grow-xs, 0))));
     --n-offset: var(--n-offset-lg, var(--n-offset-md, var(--n-offset-sm, var(--n-offset-xs, 0))));
   }
 }
 
-@media (width >= 80rem) {
-  .neba-grid {
-    --n-cols: var(
-      --n-cols-xl,
-      var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))))
+@media (width >= theme(--breakpoint-xl)) {
+  .neba-measure {
+    --n-max-w: var(
+      --n-max-w-xl,
+      var(--n-max-w-lg, var(--n-max-w-md, var(--n-max-w-sm, var(--n-max-w-xs, none))))
     );
+  }
+
+  .neba-grid,
+  .neba-flex {
     --n-gap-x: var(
       --n-gap-x-xl,
       var(--n-gap-x-lg, var(--n-gap-x-md, var(--n-gap-x-sm, var(--n-gap-x-xs, 0px))))
@@ -1500,11 +1729,37 @@
     );
   }
 
+  .neba-grid,
+  .neba-gallery {
+    --n-cols: var(
+      --n-cols-xl,
+      var(--n-cols-lg, var(--n-cols-md, var(--n-cols-sm, var(--n-cols-xs, 12))))
+    );
+  }
+
+  .neba-flex {
+    --n-flex-dir: var(
+      --n-flex-dir-xl,
+      var(--n-flex-dir-lg, var(--n-flex-dir-md, var(--n-flex-dir-sm, var(--n-flex-dir-xs, row))))
+    );
+  }
+
   .neba-grid-item {
     --n-span: var(
       --n-span-xl,
       var(--n-span-lg, var(--n-span-md, var(--n-span-sm, var(--n-span-xs, var(--n-cols, 12)))))
     );
+    --n-span-w: var(
+      --n-span-w-xl,
+      var(
+        --n-span-w-lg,
+        var(--n-span-w-md, var(--n-span-w-sm, var(--n-span-w-xs, var(--n-col-width))))
+      )
+    );
+    --n-grow: var(
+      --n-grow-xl,
+      var(--n-grow-lg, var(--n-grow-md, var(--n-grow-sm, var(--n-grow-xs, 0))))
+    );
     --n-offset: var(
       --n-offset-xl,
       var(--n-offset-lg, var(--n-offset-md, var(--n-offset-sm, var(--n-offset-xs, 0))))
@@ -1512,6 +1767,31 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * A justified gallery's last row
+ *
+ * `layout="justified"` is a wrapping flex row where every tile grows in
+ * proportion to its own aspect ratio, which is what makes each row fill the
+ * width exactly and every tile in it come out the same height. The arithmetic
+ * is the browser's; nothing is measured and nothing re-renders on a resize.
+ *
+ * The one thing it gets wrong on its own is the last row, which has fewer tiles
+ * to share the same width and blows them up to fill it — five photographs
+ * ending in one the size of a poster. A generated box with an absurd
+ * `flex-grow` takes that leftover instead, so the last row keeps the height the
+ * rows above it have.
+ *
+ * It is `::after` rather than an element because the gallery is a `<ul>`, and a
+ * spacer `<span>` between the `<li>`s is markup that says a list item is
+ * something it is not.
+ * ------------------------------------------------------------------------- */
+
+.neba-gallery-justified::after {
+  content: '';
+  flex-grow: 1000000000;
+  min-inline-size: 0;
+}
+
 /* ---------------------------------------------------------------------------
  * Tree guides
  *
@@ -1858,6 +2138,27 @@
   animation-play-state: var(--n-anim-state, running);
 }
 
+/*
+ * The same eleven effects, driven by where the element is rather than by when.
+ *
+ * Two declarations and nothing else, which is the whole reason this is a prop
+ * and not a component: every keyframe already runs from a start state to the
+ * element's own, so pointing it at a scroll timeline instead of the clock needs
+ * no new keyframe and no JavaScript. A `timeline` of `view` fills the slot; the
+ * default `auto` is the clock, and the three declarations above go on meaning
+ * what they meant.
+ *
+ * Guarded, because a browser without `animation-timeline` must not be handed an
+ * animation with no clock to run on: unsupported, the whole block is skipped and
+ * the effect plays once on the timeline it always had. Degraded, never blank.
+ */
+@supports (animation-timeline: view()) {
+  .neba-anim {
+    animation-timeline: var(--n-anim-timeline, auto);
+    animation-range: var(--n-anim-range, normal);
+  }
+}
+
 @keyframes neba-anim-fade {
   from {
     opacity: var(--n-anim-opacity, 0);
@@ -1936,6 +2237,81 @@
   animation-name: neba-anim-blink;
 }
 
+/*
+ * Reveal: an edge travelling across something that is already there.
+ *
+ * `clip-path` rather than a mask, and rather than a wrapper with `overflow`.
+ * A mask would need a gradient whose direction is a fourth thing to keep in
+ * step with the side; a wrapper would be an element in the layout that the
+ * effect had no other reason to add. An inset is one property, it is animatable,
+ * and `inset(0)` — the resting state — is exactly "nothing clipped".
+ *
+ * The opacity slot defaults to `1` here rather than to `0`: a reveal is not a
+ * fade, and something wiped in while also fading has had the wipe wasted on it.
+ * Pass `fade` and it is both.
+ */
+@keyframes neba-anim-reveal {
+  from {
+    opacity: var(--n-anim-opacity, 1);
+    clip-path: var(--n-anim-clip, inset(0 100% 0 0));
+  }
+  to {
+    opacity: 1;
+    clip-path: inset(0);
+  }
+}
+
+.neba-anim-reveal {
+  animation-name: neba-anim-reveal;
+}
+
+/* Float: a slow drift with nowhere to get to. Asymmetric on purpose — it starts
+   where the element sits, so an element whose animation is interrupted is left
+   where the layout put it rather than half a centimetre above it. */
+@keyframes neba-anim-float {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: var(--n-anim-x, 0px) var(--n-anim-y, -0.5rem);
+  }
+}
+
+.neba-anim-float {
+  animation-name: neba-anim-float;
+}
+
+/*
+ * Shake: the one effect in the set that says *no*.
+ *
+ * Five stops rather than two, and the last two are smaller than the first two,
+ * because a shake that ends as hard as it began reads as a loop that was cut
+ * off. It starts and ends at zero for the reason `blink` is symmetric: an
+ * interrupted run must not leave the element off its own mark.
+ */
+@keyframes neba-anim-shake {
+  0%,
+  100% {
+    translate: 0 0;
+  }
+  20% {
+    translate: calc(var(--n-anim-x, 6px) * -1) 0;
+  }
+  40% {
+    translate: var(--n-anim-x, 6px) 0;
+  }
+  60% {
+    translate: calc(var(--n-anim-x, 6px) * -0.55) 0;
+  }
+  80% {
+    translate: calc(var(--n-anim-x, 6px) * 0.55) 0;
+  }
+}
+
+.neba-anim-shake {
+  animation-name: neba-anim-shake;
+}
+
 /*
  * Lighting: a light travelling around the outside of something.
  *
@@ -2048,7 +2424,12 @@
   animation-name: neba-anim-marquee-y;
 }
 
-.neba-marquee[data-pause-on-hover]:hover .neba-marquee-track {
+/* `:focus-within` beside `:hover` for the same reason the prop exists at all. A
+   pointer stops the strip so a link on it can be aimed at; a keyboard reaches
+   that link by tabbing to it, and a strip that kept moving would be carrying the
+   focused element off the screen. */
+.neba-marquee[data-pause-on-hover]:hover .neba-marquee-track,
+.neba-marquee[data-pause-on-hover]:focus-within .neba-marquee-track {
   animation-play-state: paused;
 }