@eifi1/ui-kit 0.22.0 → 0.24.0

package/src/components/tile-radio.tsx

@@ -51,6 +51,14 @@ import { Tooltip } from "./tooltip";
  * where a tile would hide the text behind a bubble and repeat it.
  *
  * No strings of its own: every name is an item's `label`, the "none" tile's included.
+ *
+ * ## A tile that cannot be chosen
+ *
+ * `disabled` takes a tile out of the choice AND out of reach: the arrow keys skip it
+ * and Tab never lands on it, so a dimmed square says nothing about why. Give it a
+ * `disabledReason` instead and it stays reachable, `aria-disabled`, with the reason in
+ * its bubble and its description — and choosing it does nothing (0.23, the kit's later
+ * list after keksdose K3; {@link Button}'s `disabledReason`, one tile at a time).
  */
 
 /** A tile's size: 28 / 32 / 44px — see {@link TILE_SIZE}. */
@@ -73,7 +81,19 @@ export interface TileItem<T extends string> {
   /** Said after the name, and shown in the bubble under it. Marks the tile with a
    *  dot, so the note is visible without hovering every tile to find it. */
   note?: string;
+  /** Out of the choice and out of reach: natively disabled, skipped by the arrow keys,
+   *  never the tab stop. */
   disabled?: boolean;
+  /**
+   * Why this tile cannot be chosen right now — a colour another category already wears,
+   * a symbol only an owner may set. The tile LOOKS disabled but is `aria-disabled`, not
+   * `disabled`: Tab and the arrow keys still reach it, the reason shows in its bubble
+   * under its name (and its `note`) and describes it, and a click, Space / Enter or an
+   * arrow under automatic activation chooses nothing — the focus moves, the checked
+   * tile stays. Wins over `disabled`, as on {@link Button}; the whole group's
+   * `disabled` still wins over it.
+   */
+  disabledReason?: ReactNode;
 }
 
 export interface TileRadioGroupProps<T extends string> {
@@ -119,6 +139,22 @@ const TILE_IDLE =
   "border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)]";
 const TILE_SELECTED =
   "border-[var(--text-primary)] bg-[var(--bg-surface)] ring-1 ring-[var(--text-primary)]";
+/** A locked tile: the disabled look without `disabled` — dimmed, a not-allowed cursor. */
+const TILE_LOCKED = "cursor-not-allowed opacity-50";
+/** …and no hover offer on an idle one, which cannot be chosen. Not on the selected
+ *  tile, whose frame IS its state. */
+const TILE_LOCKED_IDLE = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
+
+/** `undefined`, `null`, `false` and `""` are no reason — what `cond && "…"` gives. */
+function isLocked(item: TileItem<string>): boolean {
+  const r = item.disabledReason;
+  return r !== undefined && r !== null && r !== false && r !== "";
+}
+
+/** Out of reach: natively disabled. A reason keeps a `disabled` tile reachable. */
+function isOff(item: TileItem<string>): boolean {
+  return Boolean(item.disabled) && !isLocked(item);
+}
 
 /**
  * The tiles of one radio group, without the group element — render them inside a
@@ -139,15 +175,17 @@ export function TileRadioGroup<T extends string>({
 }: TileRadioGroupProps<T>) {
   const refs = useRef<Array<HTMLButtonElement | null>>([]);
   const noteId = useId();
+  const reasonId = useId();
   const s = TILE_SIZE[size];
   const checkedIndex =
     checked === undefined ? -1 : items.findIndex((it) => it.key === checked);
-  // The ONE tab stop: the checked tile, else the first that can be chosen — the APG
-  // rule, so Tab into a group with nothing checked still lands somewhere.
+  // The ONE tab stop: the checked tile, else the first that can be reached — the APG
+  // rule, so Tab into a group with nothing checked still lands somewhere. A locked
+  // tile is reachable: landing on it is how its reason is read.
   const tabStop =
-    checkedIndex >= 0 && !items[checkedIndex].disabled
+    checkedIndex >= 0 && !isOff(items[checkedIndex])
       ? checkedIndex
-      : items.findIndex((it) => !it.disabled);
+      : items.findIndex((it) => !isOff(it));
 
   const onKeyDown = (e: KeyboardEvent<HTMLButtonElement>, index: number) => {
     // Left and right are VISUAL directions: in a right-to-left page the row runs the
@@ -175,7 +213,8 @@ export function TileRadioGroup<T extends string>({
         return;
     }
     e.preventDefault();
-    const enabled = items.map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0);
+    // Locked tiles are in the walk; natively disabled ones are not.
+    const enabled = items.map((it, i) => (isOff(it) ? -1 : i)).filter((i) => i >= 0);
     if (!enabled.length) return;
     const at = enabled.indexOf(index);
     let target: number;
@@ -184,13 +223,17 @@ export function TileRadioGroup<T extends string>({
     // Wrapping, as a native radio group does: the last tile's "next" is the first.
     else target = enabled[(at + step + enabled.length) % enabled.length];
     refs.current[target]?.focus();
-    if (activation === "automatic") onSelect(items[target].key);
+    // Onto a locked tile the focus moves and the choice does not: the checked tile
+    // stays checked, and the next arrow walks on from here.
+    if (activation === "automatic" && !isLocked(items[target])) onSelect(items[target].key);
   };
 
   return (
     <>
       {items.map((item, i) => {
         const selected = i === checkedIndex;
+        const locked = isLocked(item);
+        const describedBy = [item.note && `${noteId}-${i}`, locked && `${reasonId}-${i}`].filter(Boolean).join(" ");
         const button = (
           <button
             ref={(el) => {
@@ -201,18 +244,25 @@ export function TileRadioGroup<T extends string>({
             aria-checked={selected}
             aria-label={item.label}
             // The note is a DESCRIPTION, read after the name and the state, not glued
-            // into the name — the punctuation between the two would be English's.
-            aria-describedby={item.note ? `${noteId}-${i}` : undefined}
+            // into the name — the punctuation between the two would be English's. So
+            // is a lock's reason, after the note.
+            aria-describedby={describedBy || undefined}
             tabIndex={i === tabStop ? 0 : -1}
-            disabled={disabled || item.disabled}
+            // A reason wins over the tile's own `disabled` (as on Button): reachable,
+            // and refusing. The whole group's `disabled` still wins over both.
+            disabled={disabled || isOff(item)}
+            aria-disabled={(locked && !disabled) || undefined}
             // Clicking the checked tile again does nothing: a radio is not a toggle.
-            // "None" is the way back to nothing, and it is a tile of its own.
-            onClick={() => !selected && onSelect(item.key)}
+            // "None" is the way back to nothing, and it is a tile of its own. A locked
+            // tile is never chosen.
+            onClick={() => !selected && !locked && onSelect(item.key)}
             onKeyDown={(e) => onKeyDown(e, i)}
             className={cn(
               TILE_BASE,
               s.tile,
               selected ? TILE_SELECTED : TILE_IDLE,
+              locked && TILE_LOCKED,
+              locked && !selected && TILE_LOCKED_IDLE,
               tileClassName?.(item, selected),
             )}
           >
@@ -236,6 +286,14 @@ export function TileRadioGroup<T extends string>({
                 </span>
               </>
             )}
+            {/* The reason's description is a `hidden` copy, as on a locked Button: the
+                bubble exists only while hovered or focused once portalled, and a
+                description that comes and goes is read inconsistently. */}
+            {locked && (
+              <span id={`${reasonId}-${i}`} hidden>
+                {item.disabledReason}
+              </span>
+            )}
             {selected && <SelectedTick />}
           </button>
         );
@@ -248,10 +306,13 @@ export function TileRadioGroup<T extends string>({
           <Tooltip
             key={item.key ?? "\u0000none"}
             label={
-              item.note ? (
+              item.note || locked ? (
                 <>
                   <span className="block">{item.label}</span>
-                  <span className="block font-normal text-[var(--text-muted)]">{item.note}</span>
+                  {item.note && <span className="block font-normal text-[var(--text-muted)]">{item.note}</span>}
+                  {/* The reason in the body colour: it is the news, the note is
+                      standing context. */}
+                  {locked && <span className="block font-normal">{item.disabledReason}</span>}
                 </>
               ) : (
                 item.label

package/src/components/toggle-group.tsx

@@ -5,7 +5,7 @@ import { horizontalStep } from "../lib/direction";
 import { FIELD_INVALID, FloatingField, Label } from "./ui";
 import { Tooltip } from "./tooltip";
 import { useCommitReason } from "./write-lock";
-import { hasContent, LabelStrip } from "./field-anatomy";
+import { hasContent, LabelStrip } from "./field-parts";
 
 export interface ToggleOption<T extends string> {
   value: T;
@@ -524,7 +524,7 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
   }
   if (strip) {
     return (
-      <LabelStrip labelId={labelId} label={label} hint={hint} disabled={dimmed} pad="toggle" className={className}>
+      <LabelStrip labelId={labelId} label={label} hint={hint} disabled={dimmed} pad="field" className={className}>
         {group}
         {captionEl}
         {errorEl}

package/src/components/trigger-aria.ts

@@ -14,6 +14,9 @@ export interface TriggerAria {
   "aria-labelledby"?: string;
   "aria-describedby"?: string;
   "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
+  /** 0.23.0: a form library's `required` (RhfMonthPicker) is announced on the trigger,
+   *  not lost on the wrapper. */
+  "aria-required"?: boolean | "true" | "false";
 }
 
 /** Split a field's props into what its trigger takes and what its wrapper takes. */
@@ -26,6 +29,7 @@ export function splitTriggerAria<T extends TriggerAria>(
     "aria-labelledby": labelledBy,
     "aria-describedby": describedBy,
     "aria-invalid": invalid,
+    "aria-required": required,
     ...rest
   } = props;
   return [
@@ -35,6 +39,7 @@ export function splitTriggerAria<T extends TriggerAria>(
       "aria-labelledby": labelledBy,
       "aria-describedby": describedBy,
       "aria-invalid": invalid,
+      "aria-required": required,
     },
     rest,
   ];

package/src/components/ui.tsx

@@ -17,9 +17,16 @@ import {
   LockedReason,
   useFieldHint,
   useLockReason,
+  FLOATING_LABEL_STATIC,
+  STATIC_LABEL_TYPE,
   type FieldHintParts,
 } from "./field-parts";
 
+// The static label lives in field-parts since 0.23 (it is what the field anatomy
+// there draws, and field-parts must not import this file); public from here as before.
+export { FieldLabel, FLOATING_LABEL_STATIC } from "./field-parts";
+export type { FieldLabelProps } from "./field-parts";
+
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
 
 // Shared base ring for every button-styled element. Kept as a named const so the
@@ -1483,22 +1490,6 @@ const FLOATING_ROW_CLASS = cn(
   "peer-disabled:opacity-50",
 );
 
-// The TYPE of the small static label, without any placement. Split out so the
-// label and anything sharing its line (see `hint` on {@link FloatingField}) are
-// laid out by one flex row instead of by two absolute offsets guessing at the
-// same baseline — which is what put dev#468's "?" three pixels above the word it
-// belongs to.
-const STATIC_LABEL_TYPE =
-  "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
-
-// A field that always has a value (select / dropdown trigger) keeps the label
-// permanently in the floated position — small, in the top strip, value below.
-export const FLOATING_LABEL_STATIC = cn(
-  "pointer-events-none absolute start-3 top-1",
-  STATIC_LABEL_TYPE,
-  "max-w-[calc(100%-1.5rem)] truncate",
-);
-
 /**
  * The one place that assembles a labelled field: a `relative` wrapper around the
  * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`
@@ -1650,23 +1641,6 @@ export function FieldHint({
   );
 }
 
-/**
- * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a
- * button not a labelable input). Same placement as {@link FloatingField}'s static label,
- * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.
- */
-export interface FieldLabelProps extends ComponentPropsWithoutRef<"span"> {
-  children: ReactNode;
-}
-
-export function FieldLabel({ children, className, ...rest }: FieldLabelProps) {
-  return (
-    <span {...rest} className={cn(FLOATING_LABEL_STATIC, "z-10", className)}>
-      {children}
-    </span>
-  );
-}
-
 export interface LabelProps extends ComponentPropsWithoutRef<"label"> {
   /** Draw the required mark after the text. The mark is `aria-hidden`: what a
    *  screen reader hears is the control's own `required` / `aria-required`, which
@@ -2527,6 +2501,109 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
 });
 Select.displayName = "Select";
 
+/**
+ * The backdrop of a labelled {@link Textarea}'s label strip (Kurvenschmiede, 0.24).
+ *
+ * The report: paste a long table into ColumnMapper, the field scrolls, and the floated
+ * "Paste a table" / "Tabelle einfügen" sits ON the first visible line of text — on
+ * desktop and on a phone. Not a ColumnMapper bug: every labelled textarea that scrolls
+ * did it. An `<input>` has one line that never moves, so the strip FIELD_FLOATING_PAD
+ * leaves for the label is always empty there; a textarea's top padding is part of its
+ * SCROLLING area, and once the content scrolls the lines travel up through the strip
+ * and under the label.
+ *
+ * The fix makes that padding stay put: this layer is a later sibling of the textarea
+ * (so `peer-*` reaches it, and as a positioned box it paints above the textarea's
+ * text), the label paints above it in turn, and it covers exactly the top padding —
+ * `top-px` / `inset-x-px` inside the 1px border, `h-4` = `pt-4`. At rest it covers
+ * padding and nothing else, so no pixel of an unscrolled line is ever hidden; scrolled
+ * text slides out of sight under it instead of through the label.
+ *
+ * Why a layer and not "start the scrolling area below the strip" (a wrapper that draws
+ * the border and background, the textarea transparent inside it): the box would stop
+ * being the textarea. Its focus outline, its brand border on focus, the invalid ring,
+ * the disabled and read-only greys and every caller's `[&_textarea]:…` would all have
+ * to be rebuilt on the wrapper with `focus-within:` / `has-[…]:`, and a caller's
+ * `style={{ height }}` would size the scroller rather than the field. The layer leaves
+ * all of that exactly where it was.
+ *
+ * What it has to match, it matches from the same tokens the field uses: the surface is
+ * FIELD_BASE's `--bg-surface`, and `--bg-surface-2` for `disabled` and `[readonly]` —
+ * on the same ATTRIBUTE selector FIELD_BASE uses, for the reason given there. Focus and
+ * `invalid` change only the border and the ring, which are outside the layer, so they
+ * need nothing. Both themes come with the variables. The inner corners are the field's
+ * radius (`rounded-md`, 6px) less the 1px border, so the rounded border is never cut
+ * into — a literal 5px rather than `var(--radius-md)`, which Tailwind emits only where
+ * a utility uses it and the kit's token check refuses (token-vars-declared).
+ *
+ * Hidden (`display: none`) until the label floats: an empty, unfocused field has
+ * nothing that could scroll, and it renders exactly as it did before 0.24. Pointer
+ * events pass through, so a click on the strip still lands in the field.
+ *
+ * The one thing CSS cannot know is a classic scrollbar's width, and a strip across the
+ * whole inner width would hide the scrollbar's top arrow — see {@link TextareaLabelStrip}.
+ */
+const TEXTAREA_LABEL_STRIP = cn(
+  "pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[5px] bg-[var(--bg-surface)]",
+  "peer-focus:block peer-[:not(:placeholder-shown)]:block",
+  "peer-disabled:bg-[var(--bg-surface-2)] peer-[[readonly]]:bg-[var(--bg-surface-2)]",
+);
+
+/**
+ * {@link TEXTAREA_LABEL_STRIP}, stopped short of a classic scrollbar.
+ *
+ * A Windows / Linux desktop draws a textarea's vertical scrollbar INSIDE the border, in
+ * a gutter it takes from the content box (15px in Chromium); a strip across the full
+ * inner width would sit on top of the scrollbar's up arrow. So the gutter is measured —
+ * border box less client width less the borders — and the strip ends where it begins.
+ * On whichever side it is: `clientLeft` includes a gutter on the LEFT, which is where
+ * Chromium and Firefox put it in a right-to-left field. The side is applied as an
+ * inline-start / inline-end inset, so when `dir` flips afterwards and the scrollbar
+ * follows it to the other edge, the strip does too without a re-measure. That corner
+ * also loses its rounding, since it no longer meets the border.
+ *
+ * Overlay scrollbars (macOS, phones) take no gutter: the measurement is zero and the
+ * strip spans the field. A ResizeObserver on the textarea re-measures when the
+ * scrollbar comes or goes (it takes the content box with it) and when the field is
+ * resized by hand. Not laid out — hidden in a closed panel, or jsdom — the CSS insets
+ * stand until it is.
+ */
+function TextareaLabelStrip() {
+  const ref = useRef<HTMLSpanElement>(null);
+  useLayoutEffect(() => {
+    const strip = ref.current;
+    const field = strip?.previousElementSibling;
+    if (!strip || !(field instanceof HTMLTextAreaElement)) return;
+    const fit = () => {
+      if (field.offsetWidth === 0) return;
+      const style = getComputedStyle(field);
+      const borderLeft = parseFloat(style.borderLeftWidth) || 0;
+      const borderRight = parseFloat(style.borderRightWidth) || 0;
+      const gutter = field.offsetWidth - field.clientWidth - borderLeft - borderRight;
+      // offsetWidth and clientWidth are whole pixels, so a field with no scrollbar can
+      // read ±1 here; no scrollbar is that thin.
+      const bar = gutter > 1.5;
+      const onLeft = field.clientLeft - borderLeft > 1.5;
+      // Kept as a LOGICAL side: a `dir` flipped later (a language switch) moves the
+      // scrollbar across without resizing anything, so nothing would re-measure —
+      // but it stays at the inline end, and so does an inline-end inset.
+      const rtl = style.direction === "rtl";
+      const atEnd = onLeft === rtl;
+      const border = (end: boolean) => (end === rtl ? borderLeft : borderRight);
+      strip.style.insetInlineEnd = bar && atEnd ? `${border(true) + gutter}px` : "";
+      strip.style.insetInlineStart = bar && !atEnd ? `${border(false) + gutter}px` : "";
+      strip.style.borderStartEndRadius = bar && atEnd ? "0" : "";
+      strip.style.borderStartStartRadius = bar && !atEnd ? "0" : "";
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(fit);
+    observer.observe(field);
+    return () => observer.disconnect();
+  }, []);
+  return <span ref={ref} aria-hidden data-slot="label-strip" className={TEXTAREA_LABEL_STRIP} />;
+}
+
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   label?: ReactNode;
   /** See {@link Input}'s `invalid`. */
@@ -2617,6 +2694,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
             isInvalid && FIELD_INVALID,
           )}
         />
+        {/* Between the textarea and the label, on purpose: after the textarea so it
+            is its `peer` and paints over its text, before the label so the label
+            paints over it. See TEXTAREA_LABEL_STRIP. */}
+        <TextareaLabelStrip />
       </FloatingField>
     </FieldGroup>
   );