@kennycorrea/ui 1.8.0 → 1.8.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 1.8.2 — 2026-10-30
+
+A live validation status on `FormField`.
+
+- **`status` and `statusMessage` on `FormField`**, for checks run as the user types, such as a username being looked up. `checking` shows a spinner and muted text; `valid` shows a check icon and text in `--color-good-ink` (jade-11, at least 4.5:1 on the panel in light and dark); `invalid` looks and behaves like `error`. The icon and the words carry the meaning, not the colour. While shown, the message replaces the hint and is linked through `aria-describedby`. `error` wins when both are set.
+- **`announce`** repeats the message in a polite `role="status"` region. The region starts empty, so nothing is announced on first render, only changes. Off by default.
+- Tests in `test/FormField-status.test.tsx`; demo in `examples/UsernameField.tsx`.
+
+## 1.8.1 — 2026-10-30
+
+TabBar label contrast.
+
+- **`TabBar` is opaque by default.** Over coloured content the translucent bar left its 10px labels below WCAG AA (gray-11 at 3.3:1 in light). The see-through material is now opt-in with `translucent`, which switches labels to step 12 (≥ 6:1 over any backdrop). The active label uses `accent-12` in both modes, because `accent-11` on the canvas fails for eleven accents in light; the icon keeps the brand colour. The active item is also bolder and has an indicator pill, so colour is not the only difference. Checked against saturated backdrops in `test/TabBar-contrast.test.tsx`; demo in `examples/TabBars.tsx`.
+
 ## 1.8.0 — 2026-10-27
 
 An `Accordion` organism.

package/dist/atoms/TabBar/TabBar.d.ts

@@ -26,16 +26,22 @@ export interface TabBarProps {
     onValueChange?: (value: string) => void;
     /** Breakpoint (Radix Themes' scale) from which the bar is hidden. Default `md`. */
     hideFrom?: TabBarBreakpoint;
+    /**
+     * Blurred see-through material instead of the default opaque bar. Labels switch to step 12 so
+     * they stay AA over whatever scrolls beneath.
+     */
+    translucent?: boolean;
     'aria-label'?: string;
     className?: string;
 }
 /**
  * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
- * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * colour, bolder and on an indicator pill, and carries `aria-current="page"`. Opaque unless
+ * `translucent`. Height is `--tabbar-height` (49px + `--safe-bottom`);
  * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
  * Press feedback is `:active`; nothing depends on hover.
  */
-export declare function TabBar({ items, value, onValueChange, hideFrom, className, 'aria-label': ariaLabel, }: TabBarProps): import("react").JSX.Element;
+export declare function TabBar({ items, value, onValueChange, hideFrom, translucent, className, 'aria-label': ariaLabel, }: TabBarProps): import("react").JSX.Element;
 /** Reserves the bar's height in the flow, hidden at the same breakpoint as the bar. */
 export declare function TabBarSpacer({ hideFrom }: {
     hideFrom?: TabBarBreakpoint;

package/dist/atoms/TabBar/TabBar.js

@@ -8,12 +8,13 @@ function badgeText(badge) {
 }
 /**
  * A fixed bottom navigation bar for small screens. 3–5 items; the active one is in the brand
- * colour and carries `aria-current="page"`. Height is `--tabbar-height` (49px + `--safe-bottom`);
+ * colour, bolder and on an indicator pill, and carries `aria-current="page"`. Opaque unless
+ * `translucent`. Height is `--tabbar-height` (49px + `--safe-bottom`);
  * render a {@link TabBarSpacer} (or pad by that variable) so content is not covered.
  * Press feedback is `:active`; nothing depends on hover.
  */
-export function TabBar({ items, value, onValueChange, hideFrom = 'md', className, 'aria-label': ariaLabel, }) {
-    return (_jsx("nav", { className: ['ui-tabbar', className].filter(Boolean).join(' '), "data-hide-from": hideFrom, "aria-label": ariaLabel, children: items.map((item) => {
+export function TabBar({ items, value, onValueChange, hideFrom = 'md', translucent = false, className, 'aria-label': ariaLabel, }) {
+    return (_jsx("nav", { className: ['ui-tabbar', className].filter(Boolean).join(' '), "data-hide-from": hideFrom, "data-material": translucent ? 'translucent' : 'opaque', "aria-label": ariaLabel, children: items.map((item) => {
             const active = item.value === value;
             const text = badgeText(item.badge);
             const children = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "ui-tabbar__icon", "aria-hidden": "true", children: [active && item.activeIcon ? item.activeIcon : item.icon, text !== null && (_jsx("span", { className: "ui-tabbar__badge", "data-dot": text === '' ? 'true' : undefined, children: text }))] }), _jsx("span", { className: "ui-tabbar__label", children: item.label })] }));

package/dist/molecules/FormField/FormField.d.ts

@@ -12,6 +12,19 @@ export interface FormFieldProps {
     hint?: ReactNode;
     /** The validation message. Marks the control invalid and is linked with `aria-describedby`. */
     error?: ReactNode;
+    /**
+     * A live check's state — a username looked up as it is typed. `checking` shows a spinner,
+     * `valid` a check, `invalid` the same red state as `error`. `error` wins when both are set.
+     * While shown, `statusMessage` replaces the hint.
+     */
+    status?: FormFieldStatus;
+    /** The words for `status`. The icon and these carry the meaning, never the colour alone. */
+    statusMessage?: ReactNode;
+    /**
+     * Repeat `statusMessage` in a polite live region (`role="status"`). Only changes are
+     * announced, never what was there on first render.
+     */
+    announce?: boolean;
     required?: boolean;
     /** Defaults to a generated id. */
     id?: string;
@@ -28,6 +41,7 @@ export interface FormFieldProps {
     children: ReactElement | ((control: FormFieldControlProps) => ReactNode);
     className?: string;
 }
+export type FormFieldStatus = 'checking' | 'valid' | 'invalid';
 /**
  * A label, a control, a hint and an error, wired together: the label names the control, the
  * hint and error describe it, and the error marks it invalid.
@@ -35,7 +49,7 @@ export interface FormFieldProps {
  * The error is text with an icon, never colour alone. It is not a live region: announcing each
  * field's error as it appears is noisy, and `ErrorSummary` says it once, on submit.
  */
-export declare function FormField({ label, hint, error, required, id: idProp, layout, children, className, }: FormFieldProps): import("react").JSX.Element;
+export declare function FormField({ label, hint, error, status, statusMessage, announce, required, id: idProp, layout, children, className, }: FormFieldProps): import("react").JSX.Element;
 export interface FormFieldsetProps {
     /** Names the group: "Notifications", "Plan". */
     legend: ReactNode;

package/dist/molecules/FormField/FormField.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
-import { cloneElement, isValidElement, useId } from 'react';
+import { CheckCircledIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Spinner as ThemedSpinner } from '@radix-ui/themes';
+import { cloneElement, isValidElement, useEffect, useId, useRef, useState, } from 'react';
 import { Input } from '../../atoms/Input/Input.js';
 import { Label } from '../../atoms/Label/Label.js';
 import { Select } from '../../atoms/Select/Select.js';
@@ -14,16 +15,29 @@ const INVALID_PROP = new Set([Input, Textarea, Select, PasswordInput]);
  * The error is text with an icon, never colour alone. It is not a live region: announcing each
  * field's error as it appears is noisy, and `ErrorSummary` says it once, on submit.
  */
-export function FormField({ label, hint, error, required, id: idProp, layout = 'stacked', children, className, }) {
+export function FormField({ label, hint, error, status, statusMessage, announce, required, id: idProp, layout = 'stacked', children, className, }) {
     const auto = useId();
     const id = idProp ?? auto;
     const hintId = `${id}-hint`;
     const errorId = `${id}-error`;
-    const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(' ');
+    const statusId = `${id}-status`;
+    // The error wins; a status with words stands in for the hint while it is shown.
+    const shownStatus = !error && status ? status : undefined;
+    const showStatus = !!shownStatus && statusMessage != null && statusMessage !== false;
+    const showHint = !!hint && !showStatus;
+    const invalid = !!error || shownStatus === 'invalid';
+    const describedBy = [
+        showHint ? hintId : null,
+        showStatus ? statusId : null,
+        error ? errorId : null,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const announced = useAnnouncement(showStatus ? statusMessage : null, shownStatus, statusMessage);
     const control = {
         id,
         'aria-describedby': describedBy || undefined,
-        'aria-invalid': error ? true : undefined,
+        'aria-invalid': invalid ? true : undefined,
         required: required || undefined,
     };
     let rendered;
@@ -35,7 +49,7 @@ export function FormField({ label, hint, error, required, id: idProp, layout = '
         // Passing the key at all, even as undefined, would override theirs, so it is left out.
         const { 'aria-invalid': ariaInvalid, ...rest } = control;
         const props = INVALID_PROP.has(children.type)
-            ? { ...rest, invalid: !!error }
+            ? { ...rest, invalid }
             : { ...rest, ...(ariaInvalid ? { 'aria-invalid': ariaInvalid } : {}) };
         rendered = cloneElement(children, props);
     }
@@ -43,13 +57,40 @@ export function FormField({ label, hint, error, required, id: idProp, layout = '
         rendered = children;
     }
     const labelEl = (_jsx(Label, { htmlFor: id, required: required, children: label }));
-    const hintEl = hint ? (_jsx("p", { id: hintId, className: "ui-field__hint", children: hint })) : null;
-    const errorEl = error ? _jsx(FieldError, { id: errorId, children: error }) : null;
-    return (_jsx("div", { className: ['ui-field', className].filter(Boolean).join(' '), "data-layout": layout, children: layout === 'inline' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-field__control", children: rendered }), _jsxs("span", { className: "ui-field__text", children: [labelEl, hintEl, errorEl] })] })) : (_jsxs(_Fragment, { children: [labelEl, hintEl, rendered, errorEl] })) }));
+    const hintEl = showHint ? (_jsx("p", { id: hintId, className: "ui-field__hint", children: hint })) : null;
+    const errorEl = error ? (_jsx(FieldError, { id: errorId, children: error })) : showStatus && shownStatus ? (_jsx(FieldStatus, { id: statusId, status: shownStatus, children: statusMessage })) : null;
+    // Always mounted while opted in, so a change is a change to an existing region.
+    const liveEl = announce ? (_jsx("span", { role: "status", className: "ui-sr-only", children: announced })) : null;
+    return (_jsx("div", { className: ['ui-field', className].filter(Boolean).join(' '), "data-layout": layout, children: layout === 'inline' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "ui-field__control", children: rendered }), _jsxs("span", { className: "ui-field__text", children: [labelEl, hintEl, errorEl] }), liveEl] })) : (_jsxs(_Fragment, { children: [labelEl, hintEl, rendered, errorEl, liveEl] })) }));
 }
 function FieldError({ id, children }) {
     return (_jsxs("p", { id: id, className: "ui-field__error", children: [_jsx(ExclamationTriangleIcon, { "aria-hidden": "true" }), _jsx("span", { children: children })] }));
 }
+function FieldStatus({ id, status, children, }) {
+    if (status === 'invalid')
+        return _jsx(FieldError, { id: id, children: children });
+    return (_jsxs("p", { id: id, className: "ui-field__status", "data-status": status, children: [status === 'checking' ? (_jsx("span", { "aria-hidden": "true", className: "ui-field__status-icon", children: _jsx(ThemedSpinner, { size: "1" }) })) : (_jsx(CheckCircledIcon, { "aria-hidden": "true" })), _jsx("span", { children: children })] }));
+}
+/**
+ * What the live region holds: empty on first render, then the message whenever the status or
+ * message changes. A region that mounts with text is announced by some screen readers and not
+ * others, so it mounts empty and only ever receives changes.
+ */
+function useAnnouncement(message, status, source) {
+    const [text, setText] = useState(null);
+    const first = useRef(true);
+    const latest = useRef(message);
+    latest.current = message;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: keyed on what changed, read through the ref.
+    useEffect(() => {
+        if (first.current) {
+            first.current = false;
+            return;
+        }
+        setText(latest.current);
+    }, [status, source]);
+    return text;
+}
 /**
  * A `fieldset` for controls that answer one question together. The legend names the group;
  * hint and error describe it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kennycorrea/ui",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "A React + TypeScript component library built on Radix Themes: atoms, a Tailwind token bridge and theming.",
   "private": false,
   "type": "module",

package/tokens.css

@@ -796,18 +796,32 @@
 :root { --tabbar-height: calc(49px + var(--safe-bottom, 0px)); }
 .ui-tabbar { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; box-sizing: border-box;
   height: var(--tabbar-height); padding: 0 var(--safe-right, 0px) var(--safe-bottom, 0px) var(--safe-left, 0px);
-  background-color: var(--material-bar); -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter);
+  background-color: var(--canvas-grouped, var(--color-panel-solid, #fff));
   box-shadow: inset 0 0.5px 0 var(--color-hairline); }
+/* Opaque by default: gray-11 on the canvas is AA whatever scrolls underneath. `translucent` brings
+   the material back; 80% canvas over saturated content leaves gray-11 at 3.3:1 and accent-11 at
+   2.5:1 in light, so the labels step up to 12 there (≥ 6:1 over any backdrop). Numbers in
+   `test/TabBar-contrast.test.tsx`. */
+.ui-tabbar[data-material="translucent"] { background-color: var(--material-bar);
+  -webkit-backdrop-filter: var(--material-bar-filter); backdrop-filter: var(--material-bar-filter); }
+.ui-tabbar[data-material="translucent"] .ui-tabbar__item { color: var(--gray-12); }
+.ui-tabbar[data-material="translucent"] .ui-tabbar__item[data-active="true"] { color: var(--accent-12); }
 .ui-tabbar-spacer { height: var(--tabbar-height); flex: none; }
 .ui-tabbar__cell { flex: 1 1 0; min-width: 0; display: flex; }
 .ui-tabbar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
   min-width: 44px; padding: 0; border: 0; background: none; font: inherit; color: var(--gray-11); text-decoration: none;
   cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
 .ui-tabbar__item[data-active="true"] { color: var(--accent-11); }
+/* Not by colour alone: the active item is bolder and its icon sits on an indicator pill. The icon
+   keeps the brand step; the 10px label takes 12, since accent-11 on gray-3 is under 4.5:1 for
+   eleven of the accents in light. */
+.ui-tabbar__item[data-active="true"] .ui-tabbar__label { font-weight: 700; color: var(--accent-12); }
+.ui-tabbar__item[data-active="true"] .ui-tabbar__icon::before { content: ''; position: absolute; inset: -2px -12px; z-index: -1;
+  border-radius: 999px; background: var(--accent-a4); }
 .ui-tabbar__item { border-radius: 8px; transition: transform var(--press-duration) ease-out, background-color var(--press-duration) ease-out; }
 .ui-tabbar__item:active { background: var(--gray-a3); transform: scale(var(--press-scale)); }
 .ui-tabbar__item:focus-visible { outline: 2px solid var(--focus-8); outline-offset: -2px; border-radius: 8px; }
-.ui-tabbar__icon { position: relative; display: inline-flex; font-size: 24px; line-height: 1; }
+.ui-tabbar__icon { position: relative; isolation: isolate; display: inline-flex; font-size: 24px; line-height: 1; }
 .ui-tabbar__label { font-size: 10px; line-height: 12px; font-weight: 500; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ui-tabbar__badge { position: absolute; top: -4px; left: calc(100% - 8px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
   border-radius: 8px; background: var(--red-9); color: white; font-size: 11px; line-height: 16px; font-weight: 600; text-align: center; }
@@ -1260,6 +1274,10 @@
 .ui-field__hint { margin: 0; font-size: 13px; color: var(--color-ink-muted); }
 .ui-field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; font-weight: 500; color: var(--red-11); }
 .ui-field__error svg { flex: none; margin-block-start: 2px; }
+.ui-field__status { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13px; color: var(--color-ink-muted); }
+.ui-field__status[data-status="valid"] { font-weight: 500; color: var(--color-good-ink); }
+.ui-field__status svg, .ui-field__status-icon { flex: none; margin-block-start: 2px; }
+.ui-field__status-icon { display: inline-flex; }
 .ui-fieldset { display: flex; flex-direction: column; gap: 8px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
 .ui-fieldset__legend { padding: 0; margin-block-end: 2px; font-size: 14px; font-weight: 500; color: var(--color-ink); }