neba 1.12.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
@@ -1463,6 +1470,82 @@
  * change at the same moment — including when a consumer has moved them.
  * ------------------------------------------------------------------------- */
 
+/* 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.
 
@@ -1506,13 +1589,30 @@
      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)));
 }
 
@@ -1538,6 +1638,8 @@
 
   .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));
   }
 }
@@ -1564,6 +1666,8 @@
 
   .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)));
   }
 }
@@ -1596,6 +1700,11 @@
       --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))));
   }
 }
@@ -1640,6 +1749,17 @@
       --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))))
@@ -2304,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;
 }
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "neba",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "A comprehensive React UI component library — buttons, fields, menus, dialogs, tables and much more — accessible and themeable, sharing one prop vocabulary and a translucent acrylic design language. ESM only, types included, dark mode built in.",
   "type": "module",
   "types": "dist/index.d.ts",
   "sideEffects": [
     "**/*.css"
   ],
-  "author": "CDGet <jooy2.contact@gmail.com>",
+  "author": "CDGet (https://cdget.com)",
   "license": "MIT",
   "homepage": "https://neba.cdget.com",
   "repository": {