neba 1.16.1 → 1.17.0

package/dist/tailwind.css

@@ -1177,6 +1177,267 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+ * The notch
+ *
+ * A field whose label stands on its top edge: `labelPlacement` `notch` or
+ * `float`. The shell drops its own edge, and `internal/notch.tsx` draws one in
+ * three pieces on a grid: the start, as wide as the corner's radius; the gap,
+ * as wide as the label because the label sits in its column; and the end, which
+ * takes the rest. The gap has no top line, and that missing line is the notch.
+ *
+ * Every piece reads its colour out of `--n-notch-line` and its top light out of
+ * `--n-notch-top`, which the rules below set from the variant and from the state
+ * of the element the notch sits in: the shell, or for a Select the frame that
+ * holds the notch beside its trigger. The ring
+ * is each piece's `::before`, two pixels outside it, and like every ring in the
+ * library it is declared at no width and arrives in colour.
+ *
+ * It is CSS rather than Tailwind because the conditions are relations between
+ * three elements — the holder's hover and focus, the control's emptiness and
+ * the notch itself — and the Tailwind spelling of "a later sibling of an empty
+ * input whose parent has no focus" is not something anybody should have to read.
+ * ------------------------------------------------------------------------- */
+
+/* The shell, and the label's width under it at no height, in one cell. */
+.neba-notch-frame {
+  position: relative;
+  display: grid;
+}
+
+.neba-notch-frame > * {
+  grid-area: 1 / 1;
+}
+
+.neba-notch-sizer {
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  white-space: nowrap;
+  padding-inline: calc(var(--n-notch-r) + var(--n-notch-gap));
+  font-size: var(--n-float-size);
+}
+
+.neba-notch-sizer[data-sample]::before {
+  content: attr(data-sample);
+}
+
+/* The same label at the size it rests at, where it starts where the text
+   would and stops short of what is drawn at the end. */
+.neba-notch-sizer.neba-notch-sizer-rest {
+  font-size: var(--n-rest-size);
+  padding-inline: calc(var(--n-notch-r) + var(--n-notch-gap) + var(--n-rest-x))
+    calc(var(--n-notch-r) + var(--n-notch-gap) + var(--n-rest-end, 0px));
+}
+
+.neba-notch {
+  position: absolute;
+  inset: var(--n-notch-inset, 0);
+  display: grid;
+  grid-template-columns:
+    var(--n-notch-r)
+    fit-content(calc(100% - 2 * var(--n-notch-r) - var(--n-label-less, 0px)))
+    minmax(var(--n-notch-r), 1fr);
+  grid-template-rows: 100%;
+  border-radius: inherit;
+  pointer-events: none;
+
+  /* The label on the edge, and the gap open under it. A resting label swaps
+     every one of these below. */
+  --n-label-top: calc(0.5px - var(--n-float-leading) / 2);
+  --n-label-x: 0px;
+  --n-label-size: var(--n-float-size);
+  --n-label-leading: var(--n-float-leading);
+  --n-gap-line: transparent;
+  --n-gap-top: transparent;
+}
+
+.neba-notch[data-variant='outline'] {
+  --n-notch-line: var(--n-line);
+  --n-notch-top: var(--neba-plate-top);
+}
+
+.neba-notch[data-variant='solid'] {
+  --n-notch-line: var(--neba-plate-edge);
+  --n-notch-top: var(--neba-plate-top);
+}
+
+@media (hover: hover) {
+  :hover > .neba-notch[data-variant='outline']:not([data-state]) {
+    --n-notch-line: var(--n-line-hover);
+  }
+}
+
+/* After the hover rule and at its specificity, so a pointer resting on a
+   focused field leaves the edge the colour of the ring it is flush against. */
+:focus-within > .neba-notch[data-variant='outline']:not([data-state]) {
+  --n-notch-line: var(--n-ring);
+}
+
+.neba-notch[data-state='disabled'] {
+  --n-notch-top: transparent;
+}
+
+.neba-notch[data-state='disabled'][data-variant='outline'] {
+  --n-notch-line: var(--neba-disabled-border);
+}
+
+.neba-notch[data-state='disabled'][data-variant='solid'] {
+  --n-notch-line: transparent;
+}
+
+.neba-notch-start,
+.neba-notch-gap,
+.neba-notch-end {
+  position: relative;
+  grid-row: 1;
+  border: 0 solid var(--n-notch-line, transparent);
+  border-block-width: 1px;
+  box-shadow: inset 0 1px 0 var(--n-notch-top, transparent);
+  transition:
+    border-color var(--neba-duration) var(--neba-ease),
+    box-shadow var(--neba-duration) var(--neba-ease);
+}
+
+.neba-notch-start {
+  grid-column: 1;
+  border-inline-start-width: 1px;
+  border-start-start-radius: inherit;
+  border-end-start-radius: inherit;
+}
+
+.neba-notch-gap {
+  grid-column: 2;
+  border-top-color: var(--n-gap-line);
+  box-shadow: inset 0 1px 0 var(--n-gap-top);
+}
+
+.neba-notch-end {
+  grid-column: 3;
+  border-inline-end-width: 1px;
+  border-start-end-radius: inherit;
+  border-end-end-radius: inherit;
+}
+
+/* The ring, drawn over the two pixels outside each piece. The radius is the
+   corner's plus the ring's own width, so its inner edge meets the hairline. */
+.neba-notch-start::before,
+.neba-notch-gap::before,
+.neba-notch-end::before {
+  content: '';
+  position: absolute;
+  inset-block: -3px;
+  border: 0 solid transparent;
+  transition: border-color var(--neba-duration) var(--neba-ease);
+}
+
+.neba-notch-start::before {
+  inset-inline: -3px 0;
+  border-start-start-radius: calc(var(--n-notch-r) + 2px);
+  border-end-start-radius: calc(var(--n-notch-r) + 2px);
+}
+
+.neba-notch-gap::before {
+  inset-inline: 0;
+}
+
+.neba-notch-end::before {
+  inset-inline: 0 -3px;
+  border-start-end-radius: calc(var(--n-notch-r) + 2px);
+  border-end-end-radius: calc(var(--n-notch-r) + 2px);
+}
+
+/* Only the bottom of the gap: a field with the focus in it has its label on
+   the edge, so the top of the gap is always open when the ring is drawn. */
+:has(:focus-visible) > .neba-notch > .neba-notch-start::before {
+  border-color: var(--n-ring);
+  border-block-width: 2px;
+  border-inline-start-width: 2px;
+}
+
+:has(:focus-visible) > .neba-notch > .neba-notch-gap::before {
+  border-color: var(--n-ring);
+  border-block-end-width: 2px;
+}
+
+:has(:focus-visible) > .neba-notch > .neba-notch-end::before {
+  border-color: var(--n-ring);
+  border-block-width: 2px;
+  border-inline-end-width: 2px;
+}
+
+/*
+ * The label, centred on the edge line. It moves on `top` and
+ * `inset-inline-start` and changes size on `font-size`, never on a transform:
+ * it is set again at every size on the way rather than scaled, so no frame of
+ * it is a resampled picture of the word.
+ *
+ * A press goes straight through it to what is underneath. A resting label
+ * covers most of the control, and a Select opens on the pointer going down on
+ * its trigger, which a `<label>` in front of it would swallow; the input
+ * under a field's label is where the caret belongs anyway.
+ */
+.neba-notch-label {
+  grid-area: 1 / 2;
+  align-self: start;
+  position: relative;
+  top: var(--n-label-top);
+  inset-inline-start: var(--n-label-x);
+  min-width: 0;
+  padding-inline: var(--n-notch-gap);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--n-label-size);
+  line-height: var(--n-label-leading);
+  transition-property: top, inset-inline-start, font-size, line-height, color;
+  transition-duration: var(--neba-duration);
+  transition-timing-function: var(--neba-ease);
+}
+
+/*
+ * A `float` label at rest: set in the control's own text, where the text would
+ * start, with the gap closed over it. Three ways to know the field is empty,
+ * one per kind of control — an input's `:placeholder-shown`, a trigger's
+ * `data-placeholder`, and `data-empty` from a component that has no control to
+ * ask — and the same rule for all three: nothing inside the holder has the
+ * focus and nothing is open. Autofill counts as a value before the reader has
+ * accepted it, because the text is already drawn where the label would be.
+ */
+:not(:focus-within) > .neba-float-control:placeholder-shown:not(:autofill) ~ .neba-notch-float,
+:not(:focus-within)
+  > .neba-float-control[data-placeholder]:not([data-popup-open])
+  ~ .neba-notch-float,
+:not(:focus-within) > .neba-notch-float[data-empty] {
+  --n-label-top: var(--n-rest-top);
+  --n-label-x: var(--n-rest-x);
+  --n-label-size: var(--n-rest-size);
+  --n-label-leading: var(--n-rest-leading);
+  --n-label-ink: var(--neba-muted-fg);
+  /* The label is moved along by where the text starts, and must stop where
+     the end adornments begin, so its column gives up both. */
+  --n-label-less: calc(var(--n-rest-x) + var(--n-rest-end, 0px));
+  --n-gap-line: var(--n-notch-line, transparent);
+  --n-gap-top: var(--n-notch-top, transparent);
+}
+
+/* And the placeholder it is standing in for, which comes back with the focus.
+   Everything inside a trigger's placeholder as well as the placeholder itself:
+   a DateRangePicker's is two words and an arrow, each with an ink of its own.
+   Spelled out rather than as `:is([data-placeholder] *)`, which would also match
+   the chevron — a Select's trigger carries `data-placeholder` itself. */
+.neba-float-control::placeholder,
+.neba-float-control [data-placeholder],
+.neba-float-control [data-placeholder] * {
+  transition: color var(--neba-duration) var(--neba-ease);
+}
+
+.neba-float-control:not(:focus)::placeholder,
+.neba-float-control:not(:focus):not([data-popup-open]) [data-placeholder],
+.neba-float-control:not(:focus):not([data-popup-open]) [data-placeholder] * {
+  color: transparent;
+}
+
 /* ---------------------------------------------------------------------------
  * Forced colours
  *
@@ -1200,6 +1461,13 @@
     outline-offset: -1px;
   }
 
+  /* A forced palette paints a transparent line too, so a notched shell's own
+     border and the closed top of the gap are both drawn through the label.
+     The page under a forced palette is opaque, and so is this. */
+  .neba-notch-label.neba-notch-label {
+    background-color: Canvas;
+  }
+
   /* Behind `@supports` as well, which every browser that can be in a forced
      palette passes: a colour that cannot opt out of the palette would be
      replaced by it, and a fill the same colour as its track says nothing. */
@@ -1228,6 +1496,22 @@
     .neba-switch.neba-switch[data-checked] .neba-switch-thumb {
       background-color: HighlightText;
     }
+
+    /* The chosen option of a set, which said so only in a fill. A radio's dot
+       is mounted only while its option is chosen. */
+    .neba-radio-dot.neba-radio-dot {
+      forced-color-adjust: none;
+      background-color: Highlight;
+    }
+
+    .neba-segment.neba-segment[data-checked]:not([data-disabled]),
+    .neba-toggle.neba-toggle[data-pressed]:not([data-disabled]),
+    .neba-calendar-cell.neba-calendar-cell[aria-selected='true']:not([aria-disabled]),
+    .neba-nav-item.neba-nav-item[aria-current='page'] {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+    }
   }
 }
 
@@ -2457,10 +2741,10 @@
  *
  * The whole set is built on one idea. An effect is a single `@keyframes` that
  * runs from a state written entirely in `--n-anim-*` custom properties to the
- * element's natural one — so `src/internal/animate.ts` never generates CSS, it
+ * element's natural one — so `src/internal/animate.tsx` 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 on all six.
+ * nothing on any of them.
  *
  * `fill-mode` is `both` throughout, which is what lets an animation that has
  * not been triggered yet simply sit paused on its own first frame. Without it,
@@ -2504,7 +2788,7 @@
 }
 
 /*
- * The same eleven effects, driven by where the element is rather than by when.
+ * The same 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

package/dist/types.d.ts

@@ -179,6 +179,24 @@ export type NebaVariant = 'solid' | 'outline' | 'text';
  * pressing removes one, so a flat control still answers a press without moving.
  */
 export type NebaElevation = 0 | 1 | 2 | 3;
+/**
+ * Where a field-shaped component draws its label.
+ *
+ * - `top` — above the field, in a line of its own. The default.
+ * - `notch` — on the field's top edge, in a gap cut out of the border.
+ * - `float` — inside the field, where the placeholder would be, while the field
+ *   is empty and nothing in it has the focus; it rises into the notch the
+ *   moment either stops being true.
+ *
+ * `notch` and `float` take no height of their own. The label stands half a
+ * line above the field's top edge instead of a line above it, so a column of
+ * notched fields is shorter than the same column with their labels on top.
+ *
+ * A field that draws something at its start — a `startIcon`, the split
+ * steppers of a NumberField — keeps a `float` label in the notch, because the
+ * place it would rest is taken.
+ */
+export type NebaLabelPlacement = 'top' | 'notch' | 'float';
 /**
  * The seven effects the `transition` prop takes, which is the **entrance**
  * vocabulary: everything a component can be given to arrive on.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neba",
-  "version": "1.16.1",
+  "version": "1.17.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",
@@ -20,7 +20,7 @@
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
     "build": "npm run clean && npm run format:fix && tsc --project tsconfig.prod.json && node scripts/annotate-pure.mjs && npm run minify && node scripts/build-styles.mjs && node scripts/build-catalog.mjs",
-    "lint": "eslint . --report-unused-disable-directives",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --report-unused-disable-directives --fix",
     "minify": "node scripts/minify.mjs",
     "size": "node scripts/measure-bundle.mjs",
@@ -39,7 +39,13 @@
     "docs:catalog": "node scripts/build-catalog.mjs --docs"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.20.0"
+  },
+  "devEngines": {
+    "runtime": {
+      "name": "node",
+      "version": ">=22.12.0"
+    }
   },
   "main": "dist/index.js",
   "exports": {
@@ -154,15 +160,15 @@
     "@a2ui/react": "^0.11.1",
     "@a2ui/web_core": "^0.11.0",
     "@eslint/js": "^9.39.1",
-    "@mdn/browser-compat-data": "^8.1.1",
+    "@mdn/browser-compat-data": "^8.1.3",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.4.1",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
-    "@typescript-eslint/parser": "^8.69.0",
+    "@types/node": "^26.6.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript-eslint/parser": "^8.70.1",
     "@vitejs/plugin-react": "^6.1.1",
-    "@vitest/browser": "^5.0.0",
-    "@vitest/browser-playwright": "^5.0.0",
+    "@vitest/browser": "^5.0.2",
+    "@vitest/browser-playwright": "^5.0.2",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-n": "^18.3.0",
@@ -171,20 +177,20 @@
     "jiti": "^2.7.0",
     "playwright": "^1.63.0",
     "postcss": "^8.5.28",
-    "prettier": "^3.9.6",
+    "prettier": "^3.9.9",
     "prettier-plugin-tailwindcss": "^0.8.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tailwindcss": "^4.3.3",
     "terser": "^5.51.2",
-    "tsx": "^4.23.13",
+    "tsx": "^4.23.15",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.69.0",
-    "vite": "^8.2.2",
+    "typescript-eslint": "^8.70.1",
+    "vite": "^8.3.1",
     "vitepress": "^1.6.4",
     "vitepress-i18n": "^1.4.0",
     "vitepress-sidebar": "^1.40.0",
-    "vitest": "^5.0.0",
+    "vitest": "^5.0.2",
     "vitest-browser-react": "^2.3.0",
     "zod": "^3.25.76"
   },