neba 1.17.0 → 1.18.0

package/dist/tailwind.css

@@ -1025,32 +1025,6 @@
   background-image: linear-gradient(var(--n-soft-hover), var(--n-soft-hover));
 }
 
-/* ---------------------------------------------------------------------------
- * Sheet titles
- *
- * A `title` is styled by the element the component renders around it — Card,
- * Alert and Dialog all do this — so a plain string needs nothing. But a sheet
- * that belongs in the document outline has to be given a real heading,
- * `title={<h2>…</h2>}`, and that heading arrives with the browser's own 1.5em
- * bold and its margins, which would ignore the type scale just set.
- *
- * This is in CSS rather than in Tailwind because the selector is the point:
- * `[&_:where(h1,h2,h3,h4,h5,h6)]:[font:inherit]` is expressible and nobody
- * would want to read it twice.
- *
- * The class is written twice for `neba-link`'s reason. One class plus a
- * `:where()` is one class, and `.prose h2` and `.vp-doc h2` are one class plus a
- * tag — so the browser's own bold was being replaced by the *article's*, and a
- * `<Card title={<h2>…</h2>}>` inside rendered Markdown came out at 24px where
- * the card asked for 15px. Two classes clears both and still loses to anything
- * a caller writes with two of their own.
- * ------------------------------------------------------------------------- */
-
-.neba-title.neba-title :where(h1, h2, h3, h4, h5, h6) {
-  font: inherit;
-  margin: 0;
-}
-
 /* ---------------------------------------------------------------------------
  * ScrollArea's edge fade
  *
@@ -1122,40 +1096,6 @@
   --n-fade-end: var(--n-fade);
 }
 
-/* ---------------------------------------------------------------------------
- * Links
- *
- * `<a>` is, with `<td>`, one of the two tags a host stylesheet still styles by
- * name — Tailwind Typography's `.prose a`, VitePress's own `.vp-doc a`, every
- * CSS framework ever written — and always as a class plus a type, which is a
- * specificity a one-class utility cannot reach. Table answered this by moving
- * its cell padding inline. A link cannot: half of what it draws only exists on
- * `:hover`, and inline styles have no `:hover`.
- *
- * So the selector is doubled instead. `.neba-link.neba-link` is two classes and
- * matches nothing extra, which puts these declarations above a host's `a` rule
- * and still below anything a caller writes with two classes of their own. Only
- * the invariants are here — the parts of a TextLink that no prop changes. The
- * colour and whether the line is drawn at all stay in the component, written
- * through the same doubled class.
- *
- * The thickness has a `max()` floor because a hairline that lands between two
- * device pixels is antialiased into a grey smudge: 0.055em is a real line from
- * about 18px up, and 1px below that.
- * ------------------------------------------------------------------------- */
-
-.neba-link.neba-link {
-  font-weight: inherit;
-  text-decoration-thickness: max(1px, 0.055em);
-  text-underline-offset: 0.2em;
-  text-underline-position: from-font;
-  text-decoration-color: var(--n-underline);
-}
-
-.neba-link.neba-link:hover {
-  text-decoration-color: var(--n-underline-hover);
-}
-
 /* ---------------------------------------------------------------------------
  * Text a finger types into, on iOS
  *
@@ -1168,7 +1108,8 @@
  * `-webkit-touch-callout` is the property only WebKit on iOS and iPadOS has,
  * which keeps every other browser, and desktop Safari, at the size the design
  * set. `1em` is the size the field inherits from its shell, so a field already
- * over 16px keeps its own; the doubled class is `.neba-link`'s reason.
+ * over 16px keeps its own. The class is doubled because a host's `input` rule
+ * is a class plus a tag, which one class would not clear.
  * ------------------------------------------------------------------------- */
 
 @supports (-webkit-touch-callout: none) {
@@ -2392,6 +2333,46 @@
   min-inline-size: 0;
 }
 
+/* ---------------------------------------------------------------------------
+ * A segmented button before its tile is placed
+ *
+ * The tile that slides under the chosen segment is placed by measuring that
+ * segment, which only a browser running the component can do. Until it has
+ * been, the chosen segment carries the same fill itself, so a server-rendered
+ * page says which one is taken from the first paint — and a `solid` set's
+ * on-fill label has a fill under it — rather than drawing a dot in the corner
+ * and a white label on the groove.
+ *
+ * On a pseudo-element rather than on the segment's own background, because the
+ * background has a transition: the moment the tile is placed this goes and the
+ * tile arrives in the same frame, where a background would fade out under it.
+ * The root's `data-placed` is what says the tile is there, and `--n-seg-bg` and
+ * `--n-seg-plate` are set inline per variant, as the tile's own classes are.
+ * ------------------------------------------------------------------------- */
+
+.neba-segmented:not([data-placed]) .neba-segment[data-checked]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  background-color: var(--n-seg-bg);
+  background-image: var(--neba-grain), var(--neba-sheen);
+  background-blend-mode: overlay, normal;
+  box-shadow: var(--neba-shadow-1), var(--n-seg-plate);
+  backdrop-filter: var(--neba-blur);
+  /* The segment's pointer light lives on this pseudo-element too, resting at
+     nothing and fading in on hover. Until the tile is placed it is the fill,
+     and once it is the light has it back with nothing to fade. */
+  opacity: 1;
+  transition: none;
+}
+
+.neba-segmented:not([data-placed]) .neba-segment[data-checked][data-disabled]::before {
+  background-color: var(--neba-disabled-bg);
+  box-shadow: none;
+}
+
 /* ---------------------------------------------------------------------------
  * Tree guides
  *
@@ -2592,23 +2573,32 @@
 /*
  * The indeterminate bar: a short segment crossing the groove.
  *
- * `inset-inline-start` rather than a transform, so it runs the other way under
- * RTL without being told. The cost is a layout pass per frame, confined to a
- * box a few pixels tall — which is the trade that makes the rule affordable
- * here rather than an exception to it.
+ * On `translate`, not on `inset-inline-start`. A box that moves by a layout
+ * property is a layout shift as far as the browser is concerned, reported on
+ * every frame for as long as it runs, and the CLS a consumer's page is scored on
+ * adds them up — a placeholder sweeping on `inset-inline-start` scored 0.27 on
+ * an idle page. `translate` moves the painted box and nothing else, so it is no
+ * shift, and no layout pass either.
+ *
+ * The segment is pinned to the start edge and travels its own width times the
+ * ratio below: from one width before the groove to the far end of it, which is
+ * exactly the path the inset used to take. `translate` is physical, so the
+ * direction comes from `--n-sweep-dir`, set under RTL further down.
  */
 @keyframes neba-sweep {
   from {
-    inset-inline-start: -45%;
+    translate: calc(var(--n-sweep-dir, 1) * -100%) 0;
   }
   to {
-    inset-inline-start: 100%;
+    /* 100% of the groove, in widths of a segment that is 45% of it. */
+    translate: calc(var(--n-sweep-dir, 1) * 222.222%) 0;
   }
 }
 
 .neba-sweep {
   position: absolute;
   inset-block: 0;
+  inset-inline-start: 0;
   inline-size: 45%;
   animation: neba-sweep 1.15s var(--neba-ease) infinite;
 }
@@ -2679,9 +2669,10 @@
 /*
  * The highlight travelling across a placeholder.
  *
- * `inset-inline-start` rather than a transform, the same trade `neba-sweep`
- * makes and for the same reason: it runs the other way under RTL without being
- * told, and the layout pass it costs is confined to a box with nothing in it.
+ * On `translate`, for the reason `neba-sweep` gives. This is the one that
+ * mattered: a placeholder is drawn exactly while a page is loading, and is
+ * often a large box, so the shifts it reported on `inset-inline-start` were the
+ * largest thing in a consumer's CLS.
  *
  * A pseudo-element rather than a child, so a Skeleton is one element per shape
  * and a stack of ten lines is ten nodes rather than twenty. The gradient is
@@ -2689,10 +2680,11 @@
  */
 @keyframes neba-skeleton-sweep {
   from {
-    inset-inline-start: -60%;
+    translate: calc(var(--n-sweep-dir, 1) * -100%) 0;
   }
   to {
-    inset-inline-start: 100%;
+    /* 100% of the placeholder, in widths of a highlight that is 60% of it. */
+    translate: calc(var(--n-sweep-dir, 1) * 166.667%) 0;
   }
 }
 
@@ -2700,11 +2692,38 @@
   content: '';
   position: absolute;
   inset-block: 0;
+  inset-inline-start: 0;
   inline-size: 60%;
   background-image: linear-gradient(90deg, transparent, var(--n-panel-press), transparent);
   animation: neba-skeleton-sweep 1.5s var(--neba-ease) infinite;
 }
 
+/*
+ * Under RTL the start edge is on the right, so both sweeps travel leftwards.
+ *
+ * `:dir()` decides wherever it exists: it resolves the nearest direction, a
+ * `direction` set in CSS included, and the two rules for it come last so they
+ * override the attribute. The attribute rule is for the browsers in the
+ * supported range that have no `:dir()`, which then get every sweep inside a
+ * `dir="rtl"` element running leftwards — an LTR island inside it as well. It
+ * has to be a rule of its own: a selector list with a pseudo-class the browser
+ * does not know is thrown away whole.
+ */
+[dir='rtl'] .neba-sweep,
+[dir='rtl'] .neba-skeleton {
+  --n-sweep-dir: -1;
+}
+
+.neba-sweep:dir(rtl),
+.neba-skeleton:dir(rtl) {
+  --n-sweep-dir: -1;
+}
+
+.neba-sweep:dir(ltr),
+.neba-skeleton:dir(ltr) {
+  --n-sweep-dir: 1;
+}
+
 /* The reduced-motion stand-in: the highlight stops travelling and the whole
    placeholder breathes instead. Colour, which is the axis every other state in
    the library already uses. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neba",
-  "version": "1.17.0",
+  "version": "1.18.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",
@@ -204,7 +204,7 @@
     "react-dom": "^18.0.0 || ^19.0.0",
     "@a2ui/react": "^0.11.0",
     "@a2ui/web_core": "^0.11.0",
-    "zod": "^3.25.76"
+    "zod": "^3.25.76 || ^4.0.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {