@lutra-ui-system/react 0.1.2 → 0.3.0

package/dist/internal/field-support.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field-support.d.ts","sourceRoot":"","sources":["../../src/internal/field-support.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;GAWG;AAEH,wDAAwD;AACxD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,UAAU,aAAa;IACrB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,yFAAyF;IACzF,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,GAAG,QAAQ,CAiB3F;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,cAAc,CAAC;IAC1B,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAmCjB"}
+{"version":3,"file":"field-support.d.ts","sourceRoot":"","sources":["../../src/internal/field-support.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;GAWG;AAEH,wDAAwD;AACxD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;AAE9D,UAAU,aAAa;IACrB,4CAA4C;IAC5C,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED,MAAM,WAAW,QAAQ;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,yFAAyF;IACzF,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,aAAa,GAAG,QAAQ,CAmB3F;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,cAAc,CAAC;IAC1B;;;;;;OAMG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,eAAe,+BAsDjB"}

package/dist/internal/field-support.js

@@ -17,7 +17,9 @@ export function useFieldIds({ id, hasHint, hasError, describedBy }) {
     const hintId = hasHint ? `${controlId}-hint` : undefined;
     const errorId = hasError ? `${controlId}-error` : undefined;
     // Order matters: the consumer's own description first, then the hint, then the error. A screen
-    // reader reads them in this order, and the error is the thing to leave ringing in the ear.
+    // reader reads them in this order, the error is the thing to leave ringing in the ear, and since
+    // supporting text moved below the control this is also the DOM order — reading order and
+    // description order are now the same sequence rather than two orders to keep in step.
     const parts = [describedBy, hintId, errorId].filter((part) => Boolean(part));
     return {
         controlId,
@@ -28,15 +30,41 @@ export function useFieldIds({ id, hasHint, hasError, describedBy }) {
 }
 /**
  * Renders the visible parts around a control, in the documented order:
- * label → hint → control → error.
+ * label → control → hint → error.
  *
- * The hint sits above the control so it is read before the control is operated; the error sits
- * below it, which is where the Figma annotation places it and where Field Group puts its own.
+ * **Supporting text sits below the control**, which is what the Figma component draws and what its
+ * accessibility annotation describes. An earlier implementation placed the hint above the control on
+ * the argument that guidance should be read before typing; the design system decided otherwise, and
+ * the contract is the design system's to set. The `aria-describedby` order is unchanged and now
+ * matches the DOM order exactly — consumer description, then hint, then error.
  *
- * The indicator word is rendered *inside* the `<label>`, so it becomes part of the accessible name
- * and is announced with it rather than being a separate visual flourish the label does not carry.
+ * ## The indicator and the accessible name
+ *
+ * The indicator is rendered inside the `<label>`, so whatever of it is exposed becomes part of the
+ * accessible name. Figma draws `(required *)` and `(optional)` immediately after the label text, and
+ * the visible output is exactly that in every case. What differs is how much of it assistive
+ * technology sees, and the rule is: **expose the indicator only when nothing else carries the same
+ * information.**
+ *
+ * - **`required` indicator with the native `required` attribute** — hidden entirely. The attribute
+ *   already conveys the required state, and repeating the word in the name says the same thing
+ *   twice about one control. This is the ordinary case, because `indicator` defaults to `'required'`
+ *   precisely when `required` is set.
+ * - **`required` indicator without the attribute** — the word stays in the name. A consumer may ask
+ *   for the indicator on a field that is validated elsewhere, and in that case the name is the only
+ *   thing carrying it. Hiding it there would leave the requirement visible-only, which is the defect
+ *   this rule exists to avoid.
+ * - **`optional` indicator** — always stays in the name. There is no native attribute and no ARIA
+ *   state for "optional", so nothing else conveys it and there is no duplication to remove.
+ *
+ * The asterisk is separately `aria-hidden` in the one case where the word is exposed: it is a
+ * decorative convention duplicating the word beside it, and it must never be the only signal.
+ *
+ * How any given screen reader words the required state is its own business and is not asserted here.
  */
-export function FieldShell({ controlId, label, indicator, hint, hintId, error, errorId, disabled, className, children, }) {
-    return (_jsxs("div", { className: className === undefined ? 'lutra-field' : `lutra-field ${className}`, "data-invalid": error ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, children: [_jsxs("label", { className: "lutra-field__label", htmlFor: controlId, children: [label, indicator !== 'none' && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "lutra-field__indicator", "data-indicator": indicator, children: indicator === 'required' ? 'Required' : 'Optional' })] }))] }), hint !== undefined && hint !== null && hint !== false && (_jsx("p", { className: "lutra-field__hint", id: hintId, children: hint })), children, error !== undefined && error !== null && error !== false && (_jsx("p", { className: "lutra-field__error", id: errorId, children: error }))] }));
+export function FieldShell({ controlId, label, indicator, required, hint, hintId, error, errorId, disabled, className, children, }) {
+    // The one case where the indicator says nothing the control has not already said.
+    const indicatorIsRedundant = indicator === 'required' && required;
+    return (_jsxs("div", { className: className === undefined ? 'lutra-field' : `lutra-field ${className}`, "data-invalid": error ? 'true' : undefined, "data-disabled": disabled ? 'true' : undefined, children: [_jsxs("label", { className: "lutra-field__label", htmlFor: controlId, children: [label, indicator !== 'none' && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "lutra-field__indicator", "data-indicator": indicator, "aria-hidden": indicatorIsRedundant || undefined, children: indicator === 'required' ? (_jsxs(_Fragment, { children: ['(required', _jsx("span", { "aria-hidden": "true", children: ' *' }), ')'] })) : ('(optional)') })] }))] }), children, hint !== undefined && hint !== null && hint !== false && (_jsx("p", { className: "lutra-field__hint", id: hintId, children: hint })), error !== undefined && error !== null && error !== false && (_jsx("p", { className: "lutra-field__error", id: errorId, children: error }))] }));
 }
 //# sourceMappingURL=field-support.js.map

package/dist/internal/field-support.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-support.js","sourceRoot":"","sources":["../../src/internal/field-support.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAoC9B;;;;;;;;;;GAUG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAiB;IAC/E,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,SAAS,GAAG,EAAE,IAAI,eAAe,SAAS,EAAE,CAAC;IAEnD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5D,+FAA+F;IAC/F,2FAA2F;IAC3F,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAkB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7F,OAAO;QACL,SAAS;QACT,MAAM;QACN,OAAO;QACP,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;KAC5D,CAAC;AACJ,CAAC;AAgBD;;;;;;;;;GASG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACQ;IAChB,OAAO,CACL,eACE,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,SAAS,EAAE,kBACjE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBACzB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAE5C,iBAAO,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,SAAS,aACrD,KAAK,EACL,SAAS,KAAK,MAAM,IAAI,CACvB,8BAEyF,GAAG,EAC1F,eAAM,SAAS,EAAC,wBAAwB,oBAAiB,SAAS,YAC/D,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,GAC9C,IACN,CACJ,IACK,EAEP,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,IAAI,CACxD,YAAG,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,MAAM,YACxC,IAAI,GACH,CACL,EAEA,QAAQ,EAER,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,CAC3D,YAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,OAAO,YAC1C,KAAK,GACJ,CACL,IACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"field-support.js","sourceRoot":"","sources":["../../src/internal/field-support.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAoC9B;;;;;;;;;;GAUG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAiB;IAC/E,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,SAAS,GAAG,EAAE,IAAI,eAAe,SAAS,EAAE,CAAC;IAEnD,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,SAAS,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,SAAS,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAE5D,+FAA+F;IAC/F,iGAAiG;IACjG,yFAAyF;IACzF,sFAAsF;IACtF,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAkB,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7F,OAAO;QACL,SAAS;QACT,MAAM;QACN,OAAO;QACP,WAAW,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;KAC5D,CAAC;AACJ,CAAC;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACQ;IAChB,kFAAkF;IAClF,MAAM,oBAAoB,GAAG,SAAS,KAAK,UAAU,IAAI,QAAQ,CAAC;IAElE,OAAO,CACL,eACE,SAAS,EAAE,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,SAAS,EAAE,kBACjE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBACzB,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAE5C,iBAAO,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,SAAS,aACrD,KAAK,EACL,SAAS,KAAK,MAAM,IAAI,CACvB,8BAGoF,GAAG,EACrF,eACE,SAAS,EAAC,wBAAwB,oBAClB,SAAS,iBACZ,oBAAoB,IAAI,SAAS,YAE7C,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,CAC1B,8BACG,WAAW,EAIZ,8BAAkB,MAAM,YAAE,IAAI,GAAQ,EACrC,GAAG,IACH,CACJ,CAAC,CAAC,CAAC,CACF,YAAY,CACb,GACI,IACN,CACJ,IACK,EAEP,QAAQ,EAER,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,IAAI,CACxD,YAAG,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAE,MAAM,YACxC,IAAI,GACH,CACL,EAEA,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,IAAI,CAC3D,YAAG,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,OAAO,YAC1C,KAAK,GACJ,CACL,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/styles.css

@@ -15,18 +15,24 @@
  * The file has two layers, and the order matters:
  *
  * 1. The generated token layer, which declares every Lutra design token as a CSS
- *    custom property on `:root`, plus the dark values on `[data-theme='dark']`.
- *    It is produced from `tokens/source.json` and is not hand-edited.
+ *    custom property on `:root`, plus the dark values on `[data-theme='dark']`
+ *    and the condensed values on `[data-density='condensed']`. Theme and density
+ *    are independent axes and compose freely. It is produced from
+ *    `tokens/source.json` and is not hand-edited.
  * 2. One file per component, which reads those tokens and never a raw value.
  *
  * Rules for anything added here:
  * - Every selector is prefixed with `lutra-`, so the library cannot collide with
  *   a consuming application's styles.
- * - The only global selectors permitted are the token layer's `:root` and
- *   `[data-theme]` blocks, and they declare custom properties and nothing else.
- *   A declaration that paints — a colour, a font, a margin on `body` — must never
- *   appear on a global selector: a library stylesheet does not get to restyle a
- *   page it was merely imported into. See `docs/decisions/0002-design-tokens.md`.
+ * - The only global selectors permitted are the token layer's `:root`,
+ *   `[data-theme]` and `[data-density]` blocks, and they declare custom properties
+ *   and nothing else. A declaration that paints — a colour, a font, a margin on
+ *   `body` — must never appear on a global selector: a library stylesheet does not
+ *   get to restyle a page it was merely imported into. See
+ *   `docs/decisions/0002-design-token-pipeline.md` and
+ *   `docs/decisions/0004-global-density-modes.md`.
+ * - A component rule never matches on `data-theme` or `data-density`. Those are
+ *   global modes resolved once in the token layer; a component reads the tokens.
  * - No component rule may reach for `:root`, an element selector, or `*`.
  * - Sizes use `rem` and unitless line heights, so the library respects the user's
  *   browser font size and keeps working under zoom. Border and outline widths are
@@ -245,6 +251,10 @@
   --lutra-layout-gutter-tablet: 1.5rem;
   --lutra-layout-section-lg: 6rem;
   --lutra-layout-section-sm: 4rem;
+
+  /* Lutra Density */
+  --lutra-control-text-size: 1rem;
+  --lutra-field-spacing: 0.5rem;
 }
 
 /* Dark mode. Every token whose value differs in dark, plus every alias that reaches one — an
@@ -494,6 +504,27 @@
   --lutra-component-tooltip-text: var(--lutra-color-background-canvas);
 }
 
+/* Condensed density. Every token whose value differs between the density modes, plus every
+ * alias that reaches one — an alias is substituted where it is declared, so it has to be
+ * re-declared here to resolve against condensed values rather than inheriting the spacious
+ * result from :root.
+ *
+ * Independent of theme by construction: this block declares no colour and the theme blocks
+ * declare no density value, so `data-theme` and `data-density` compose freely on the same
+ * element or on different ancestors. Density changes composition spacing and control text
+ * size only — never a control height or a target size. */
+[data-density='condensed'] {
+  --lutra-control-text-size: 0.875rem;
+  --lutra-field-spacing: 0.25rem;
+}
+
+/* An explicit spacious region, so a spacious island inside a condensed one is possible. Same
+ * set as above, back at their spacious values. */
+[data-density='spacious'] {
+  --lutra-control-text-size: 1rem;
+  --lutra-field-spacing: 0.5rem;
+}
+
 /*
  * Button.
  *
@@ -2185,10 +2216,16 @@
  * focus and disabled are selected from the platform — `:hover`, `:focus-visible`,
  * `:disabled` — never from a prop.
  *
+ * `data-overflow` is set by the component, not the consumer: it means part of the
+ * value is scrolled out of sight. See the overflow earmark near the bottom of
+ * this file, and `overflow.ts` for how the state is derived.
+ *
  * Colour comes from Figma's `component/input/*` alias layer, so the design system
  * decides what an input surface, its text, its placeholder and each of its border
- * states are. Sizes, spacing and type come from the core scales. The values with
- * no Figma variable behind them are marked.
+ * states are. Geometry and spacing come from the core scales, and the text size
+ * comes from the global density axis — `control/text-size`, inherited through
+ * `data-density`, not a prop and not a function of `size`. The values with no
+ * Figma variable behind them are marked.
  *
  * The error state is styled from `aria-invalid` rather than a `data-*` attribute
  * of its own. There is then no way for the field to look wrong while reporting
@@ -2231,18 +2268,23 @@
   --lutra-input-padding-inline-md: var(--lutra-space-md);
   --lutra-input-padding-inline-lg: var(--lutra-space-lg);
 
-  /* 14px, 16px, 18px. */
-  --lutra-input-font-size-sm: var(--lutra-text-body-small);
-  --lutra-input-font-size-md: var(--lutra-text-body);
-  --lutra-input-font-size-lg: var(--lutra-text-h3);
-
-  /* The leading paired with each size in the type ramp. Figma draws a flat 120%
-   * on this component with no variable behind it; inside a fixed-height control
-   * the two are visually identical, and using the ramp keeps the field consistent
-   * with every other piece of text at the same size. */
-  --lutra-input-line-height-sm: var(--lutra-type-line-height-body-small);
-  --lutra-input-line-height-md: var(--lutra-type-line-height-body);
-  --lutra-input-line-height-lg: var(--lutra-type-line-height-h3);
+  /* Control text size, from the global density axis rather than from `size`.
+   *
+   * Figma binds `control/text-size` to the value text of all eighteen Input
+   * variants, so `size` owns height and inline padding and density owns the
+   * type: 16px in Spacious, 14px in Condensed, the same in sm, md and lg. It is
+   * inherited from whatever `data-density` is in scope and is declared here, on
+   * the control, so a nested `[data-density]` region resolves it correctly.
+   * There is deliberately no density prop — see `docs/design-tokens.md`. */
+  --lutra-input-font-size: var(--lutra-control-text-size);
+
+  /* One leading for one size. Figma draws a flat 120% here with no variable
+   * behind it; the body ramp is used instead because `control/text-size`
+   * resolves to `text/body` in the default mode, and inside a min-height control
+   * the two are visually identical. Condensed keeps this ratio on 14px text,
+   * which is looser than the body-small ramp and is what lets the line still
+   * grow rather than crowd when the reader raises their font size. */
+  --lutra-input-line-height: var(--lutra-type-line-height-body);
 
   /* NO FIGMA VARIABLE. Figma draws inputs at a fixed 36/40/44px; these become
    * `min-block-size` instead, because a fixed height on a text-bearing control
@@ -2255,6 +2297,41 @@
    * vertical breathing room the text needs once the field is free to grow. */
   --lutra-input-padding-block: var(--lutra-space-2xs);
 
+  /* Trailing affordance reserve — an internal contract, not public API.
+   *
+   * Two additive slots, both `0px` unless something claims them, added to the
+   * trailing inline padding by each size rule. Additive because they answer to
+   * different owners and can apply at once, and CSS cannot let one custom
+   * property add to itself:
+   *
+   * - `--lutra-input-trailing-reserve` is for a *composition* that puts a
+   *   control at the trailing edge — the Info trigger `Input with Tooltip`
+   *   needs, a password reveal, a clear button. Nothing claims it today. A
+   *   composition sets it on the input to the width it is occupying, and the
+   *   value keeps clear of whatever it placed there.
+   * - `--lutra-input-overflow-reserve` belongs to this file and is claimed by
+   *   the `data-overflow` rule below. It is not the composition's to set.
+   *
+   * Neither is documented for consumers and neither is a prop. If a public
+   * trailing-slot API is ever wanted, it is a decision record, not a rename. */
+  --lutra-input-trailing-reserve: 0px;
+  --lutra-input-overflow-reserve: 0px;
+
+  /* The overflow earmark.
+   *
+   * Size: Figma draws the earmark vector at a flat 8x8 in all eighteen variants
+   * and binds no variable to it, so `space/sm` is the token that equals what is
+   * drawn — the same treatment as the 36/40/44px control heights below.
+   *
+   * Colour: Figma binds the earmark's fill to the *border* token of the current
+   * status — `component/input/border/default`, `/invalid`, and
+   * `color/border/disabled`. Code currently draws it in `color/icon/default` in
+   * every state instead. That is a real disagreement, not a tokenisation
+   * difference, and it is open rather than settled: the earmark's treatment is
+   * being revisited as its own design decision. See `contract.md` §14. */
+  --lutra-input-overflow-mark-size: var(--lutra-space-sm);
+  --lutra-input-overflow-mark: var(--lutra-color-icon-default);
+
   box-sizing: border-box;
   inline-size: 100%;
   max-inline-size: 100%;
@@ -2267,7 +2344,9 @@
   background-color: var(--lutra-input-surface);
   color: var(--lutra-input-text);
   font-family: var(--lutra-input-font-family);
+  font-size: var(--lutra-input-font-size);
   font-weight: var(--lutra-input-font-weight);
+  line-height: var(--lutra-input-line-height);
 
   /* Strips the platform's own field chrome — notably iOS Safari's inner shadow
    * and rounded corners — so the token values are what shows. */
@@ -2275,29 +2354,40 @@
 }
 
 /* Sizes.
+ *
+ * Geometry only — height and inline padding. Type comes from the density axis
+ * above and is identical across the three, which is what Figma encodes.
  *
  * `min-block-size` rather than `height`: it reproduces the Figma height at the
- * default font size and lets the field grow when the reader raises theirs. */
+ * default font size and lets the field grow when the reader raises theirs. That
+ * is also why Condensed cannot shrink a control: it lowers the text size inside
+ * a minimum that density never touches. */
 
 .lutra-input[data-size='sm'] {
   min-block-size: var(--lutra-input-min-height-sm);
-  padding-inline: var(--lutra-input-padding-inline-sm);
-  font-size: var(--lutra-input-font-size-sm);
-  line-height: var(--lutra-input-line-height-sm);
+  padding-inline-start: var(--lutra-input-padding-inline-sm);
+  padding-inline-end: calc(
+    var(--lutra-input-padding-inline-sm) + var(--lutra-input-trailing-reserve) +
+      var(--lutra-input-overflow-reserve)
+  );
 }
 
 .lutra-input[data-size='md'] {
   min-block-size: var(--lutra-input-min-height-md);
-  padding-inline: var(--lutra-input-padding-inline-md);
-  font-size: var(--lutra-input-font-size-md);
-  line-height: var(--lutra-input-line-height-md);
+  padding-inline-start: var(--lutra-input-padding-inline-md);
+  padding-inline-end: calc(
+    var(--lutra-input-padding-inline-md) + var(--lutra-input-trailing-reserve) +
+      var(--lutra-input-overflow-reserve)
+  );
 }
 
 .lutra-input[data-size='lg'] {
   min-block-size: var(--lutra-input-min-height-lg);
-  padding-inline: var(--lutra-input-padding-inline-lg);
-  font-size: var(--lutra-input-font-size-lg);
-  line-height: var(--lutra-input-line-height-lg);
+  padding-inline-start: var(--lutra-input-padding-inline-lg);
+  padding-inline-end: calc(
+    var(--lutra-input-padding-inline-lg) + var(--lutra-input-trailing-reserve) +
+      var(--lutra-input-overflow-reserve)
+  );
 }
 
 /* Placeholder.
@@ -2384,6 +2474,94 @@
   -webkit-text-fill-color: var(--lutra-input-disabled-text);
 }
 
+/* The overflow earmark.
+ *
+ * A single-line input scrolls its value rather than wrapping, and gives no sign
+ * that it is doing so — `…@an-unusually-long-` looks exactly like a value that
+ * ends there. `data-overflow` is set by the component when part of the value is
+ * outside the visible area, and this draws a small folded corner to say so.
+ *
+ * ## Why a background rather than an element
+ *
+ * An `<input>` is a replaced element and cannot render `::before` or `::after`,
+ * so a mark inside the control is either a background or a sibling in a wrapper.
+ * A background needs no wrapper, no extra node and no change to what Input
+ * renders — and it is decorative by construction: there is nothing to give a
+ * role, nothing to focus, nothing in the accessibility tree, and no way for it
+ * to touch the accessible name or value. Select has a wrapper because its
+ * chevron must be a token-coloured mask; this needs no mask.
+ *
+ * ## The shape
+ *
+ * `linear-gradient(to bottom left, … 50%, transparent 50%)` in a square placed
+ * at the top right. The gradient axis runs toward the bottom-left corner, so the
+ * hard stop at 50% is a line from the square's top-left to its bottom-right and
+ * the filled half is the one nearest the top-right corner. That yields a
+ * triangle whose two flat edges lie along the top and right edges of the field
+ * with the diagonal facing inward, toward the content — a folded corner, not an
+ * arrow pointing out of it.
+ *
+ * The size is `space/sm` (8px), which the field's own `radius/md` corner then
+ * rounds off at the tip. That is deliberate: a mark flush with a rounded corner
+ * has to follow it, and the result reads as a fold rather than a pasted-on
+ * triangle.
+ *
+ * Figma draws the same triangle: an 8x8 `Overflow earmark` vector in all
+ * eighteen variants, pinned to the top-right corner by MAX/MIN constraints,
+ * whose path `M 0 0 L 8 0 L 8 8 L 0 0 Z` has its vertices at the box's
+ * top-left, top-right and bottom-right. Flat top, flat right, diagonal facing
+ * inward — the shape this gradient produces.
+ *
+ * ## Colour — currently disagreeing with Figma
+ *
+ * Figma binds the earmark's fill to the border token of the current status, so
+ * it turns red on an invalid field. This draws it in `color/icon/default` in
+ * every state instead, on the argument that it reports a fact about the viewport
+ * rather than a problem with the value and must not read as a validation
+ * indicator.
+ *
+ * That argument may lose. The earmark's treatment has been identified as too
+ * subtle and is being revisited as its own design decision, and the state
+ * colouring belongs to that decision rather than to this file. **Do not
+ * reconcile it either way here** — `contract.md` §14 records it.
+ *
+ * ## Clearance
+ *
+ * The mark claims `--lutra-input-overflow-reserve`, which the size rules add to
+ * the trailing padding, so the value's scroll area stops before the corner
+ * instead of running under it. The reserve exists only while the mark does, so a
+ * field that fits wastes nothing. Measuring against the reduced width is what
+ * keeps that stable: once the mark is showing, the value has to shrink past the
+ * reserve to lose it, so a value sitting on the boundary cannot flicker.
+ *
+ * Figma's own Value layers are set to `textTruncation: ENDING`, which reserves
+ * no trailing space — its static text is already cut off with an ellipsis before
+ * the corner. The runtime reserves the space because its text *scrolls*, so
+ * without it the value would pass under the mark as the caret moved. See
+ * `contract.md` §6.
+ *
+ * Forced-colours modes drop background images, so the mark is absent there. It
+ * is a discoverability cue rather than information, the value is still reachable
+ * by caret and by assistive technology, and painting a substitute would mean
+ * inventing a border treatment the design system has not got. */
+
+.lutra-input[data-overflow='true'] {
+  --lutra-input-overflow-reserve: var(--lutra-input-overflow-mark-size);
+
+  background-image: linear-gradient(
+    to bottom left,
+    var(--lutra-input-overflow-mark) 50%,
+    transparent 50%
+  );
+  background-repeat: no-repeat;
+  background-position: top right;
+  background-size: var(--lutra-input-overflow-mark-size) var(--lutra-input-overflow-mark-size);
+}
+
+.lutra-input[data-overflow='true']:disabled {
+  --lutra-input-overflow-mark: var(--lutra-input-disabled-text);
+}
+
 /* Read-only keeps the normal visual treatment. It stays focusable and its value
  * stays selectable and copyable, which is the behaviour that distinguishes it
  * from disabled, so it must not be dressed up to look unavailable. */
@@ -2498,13 +2676,14 @@
   --lutra-select-padding-inline-md: var(--lutra-space-md);
   --lutra-select-padding-inline-lg: var(--lutra-space-lg);
 
-  --lutra-select-font-size-sm: var(--lutra-text-body-small);
-  --lutra-select-font-size-md: var(--lutra-text-body);
-  --lutra-select-font-size-lg: var(--lutra-text-h3);
-
-  --lutra-select-line-height-sm: var(--lutra-type-line-height-body-small);
-  --lutra-select-line-height-md: var(--lutra-type-line-height-body);
-  --lutra-select-line-height-lg: var(--lutra-type-line-height-h3);
+  /* Control text size, from the global density axis rather than from `size` —
+   * exactly as Input does it, and for the same reason: Figma binds
+   * `control/text-size` to the value text of every Select variant, so the
+   * placeholder and the selected value are 16px in Spacious and 14px in
+   * Condensed at all three sizes. Declared here on the control so a nested
+   * `[data-density]` region resolves it. There is no density prop. */
+  --lutra-select-font-size: var(--lutra-control-text-size);
+  --lutra-select-line-height: var(--lutra-type-line-height-body);
 
   /* NO FIGMA VARIABLE. Figma draws 36/40/44px fixed heights; these become `min-block-size` so the
    * control grows with the reader's font size instead of clipping at 200% zoom. */
@@ -2525,15 +2704,20 @@
   background-color: var(--lutra-select-surface);
   color: var(--lutra-select-text);
   font-family: var(--lutra-select-font-family);
+  font-size: var(--lutra-select-font-size);
   font-weight: var(--lutra-select-font-weight);
+  line-height: var(--lutra-select-line-height);
   cursor: pointer;
 
   /* Removes the platform's own dropdown arrow, so the Figma chevron is the only one drawn. */
   appearance: none;
 }
 
-/* Sizes. `min-block-size` rather than `height`, so the control grows with the reader's font size.
- * Trailing padding reserves room for the chevron. */
+/* Sizes. Geometry only — height, inline padding and the chevron reserve. Type comes from the density
+ * axis and is the same across the three.
+ *
+ * `min-block-size` rather than `height`, so the control grows with the reader's font size. Trailing
+ * padding reserves room for the chevron. */
 
 .lutra-select[data-size='sm'] {
   min-block-size: var(--lutra-select-min-height-sm);
@@ -2542,8 +2726,6 @@
       var(--lutra-select-padding-inline-sm) + var(--lutra-select-chevron-size) +
         var(--lutra-select-chevron-gap)
     );
-  font-size: var(--lutra-select-font-size-sm);
-  line-height: var(--lutra-select-line-height-sm);
 }
 
 .lutra-select[data-size='md'] {
@@ -2553,8 +2735,6 @@
       var(--lutra-select-padding-inline-md) + var(--lutra-select-chevron-size) +
         var(--lutra-select-chevron-gap)
     );
-  font-size: var(--lutra-select-font-size-md);
-  line-height: var(--lutra-select-line-height-md);
 }
 
 .lutra-select[data-size='lg'] {
@@ -2564,8 +2744,6 @@
       var(--lutra-select-padding-inline-lg) + var(--lutra-select-chevron-size) +
         var(--lutra-select-chevron-gap)
     );
-  font-size: var(--lutra-select-font-size-lg);
-  line-height: var(--lutra-select-line-height-lg);
 }
 
 /* The chevron sits at the same inset as the control's own padding, per size. */
@@ -3177,18 +3355,28 @@
  * These classes are shared: `Field` and `SelectField` render the same shell around different
  * controls, so both use `.lutra-field*`. The control inside brings its own styling.
  *
- * Order is label → hint → control → error, expressed as source order in a vertical stack rather
+ * Order is label → control → hint → error, expressed as source order in a vertical stack rather
  * than by any reordering property, so the visual order and the DOM order — which is the order a
- * screen reader and the Tab key follow — are the same thing.
- *
- * Figma composes the field with 4px auto-layout spacing and draws its supporting text below the
- * control, because the component models one supporting slot that becomes the error when invalid.
- * The accessibility annotation is the behavioural contract and puts the error below the control
- * while a hint is guidance read before typing, so the implementation splits them. See `field.md`.
+ * screen reader and the Tab key follow — are the same thing. Nothing here uses `order`,
+ * `flex-direction: column-reverse` or `grid-row`, and nothing should: a field whose visual order
+ * differed from its DOM order would read in one sequence and look like another.
+ *
+ * Figma binds the field's auto-layout `itemSpacing` and its supporting text's indent to
+ * `field/spacing`, the global density variable — 8px in Spacious, 4px in Condensed. Both come from
+ * the one token here, so the vertical rhythm and the indent cannot drift apart, and neither is a
+ * component property: density is inherited from `data-density`. See `docs/design-tokens.md`.
+ *
+ * Figma draws one supporting slot, below the control, that becomes the error when invalid. Code
+ * keeps hint and error as separate slots because both can be present at once, and renders them in
+ * that order underneath the control. See `field.md`.
  */
 
 .lutra-field {
-  --lutra-field-gap: var(--lutra-space-xs);
+  /* Density-owned. Declared on the field rather than inherited pre-resolved from `:root`, so a
+   * `[data-density]` region anywhere above it re-substitutes and takes effect. */
+  --lutra-field-gap: var(--lutra-field-spacing);
+  --lutra-field-support-indent: var(--lutra-field-spacing);
+
   --lutra-field-label-color: var(--lutra-color-text-primary);
   --lutra-field-label-size: var(--lutra-text-body-small);
   --lutra-field-label-line-height: var(--lutra-type-line-height-body-small);
@@ -3214,7 +3402,8 @@
 
 /* Normal inline flow rather than flex, so the indicator wraps inline with the label text the way
  * the annotation describes, and so the space between them is a real text space that the accessible
- * name includes. A flex `gap` would look right and read as "Email addressRequired". */
+ * name includes. A flex `gap` would look right and read as "Email address(required)". Figma builds
+ * the same result with a `Label Row` frame set to WRAP; the DOM gets it from text flow. */
 
 .lutra-field__label {
   display: block;
@@ -3241,9 +3430,20 @@
   color: var(--lutra-field-indicator-required-color);
 }
 
+/* Supporting text.
+ *
+ * The indent sets the supporting and error text in from the label and the control edge, which is
+ * what Figma draws. Figma expresses it as `paragraphIndent` because a Figma TEXT node has no
+ * padding; `padding-inline-start` is the runtime equivalent and is deliberately not `text-indent`,
+ * which would indent only the first line and leave a wrapped error message ragged against its own
+ * left edge. Logical property, so it flips with the writing mode.
+ *
+ * Nothing here sets a height or prevents wrapping — a long message grows the field. */
+
 .lutra-field__hint,
 .lutra-field__error {
   margin: 0;
+  padding-inline-start: var(--lutra-field-support-indent);
   font-size: var(--lutra-field-label-size);
   line-height: var(--lutra-field-label-line-height);
   font-weight: var(--lutra-field-hint-weight);

package/dist/tokens.json

@@ -3,7 +3,7 @@
   "figma": {
     "fileKey": "3I29aswJJqsIwh8jO1uBje",
     "fileName": "Lutra UI",
-    "readAt": "2026-08-09 (dark danger ramp resynced after the contrast study)"
+    "readAt": "2026-09-02 (Lutra Density collection added; Spacious is the default mode)"
   },
   "tokens": {
     "--lutra-color-background-canvas": {
@@ -996,6 +996,20 @@
       "figmaName": "layout/section/sm",
       "value": "4rem",
       "themed": false
+    },
+    "--lutra-control-text-size": {
+      "figmaName": "control/text-size",
+      "spacious": "1rem",
+      "condensed": "0.875rem",
+      "themed": false,
+      "density": true
+    },
+    "--lutra-field-spacing": {
+      "figmaName": "field/spacing",
+      "spacious": "0.5rem",
+      "condensed": "0.25rem",
+      "themed": false,
+      "density": true
     }
   }
 }

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@lutra-ui-system/react",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "Accessible React components and design tokens for Lutra UI",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/my-h-duong/lutra-ui.git",
+    "url": "git+https://github.com/my-h-duong-labs/lutra-ui.git",
     "directory": "packages/react"
   },
-  "homepage": "https://github.com/my-h-duong/lutra-ui/tree/main/packages/react#readme",
+  "homepage": "https://github.com/my-h-duong-labs/lutra-ui/tree/main/packages/react#readme",
   "bugs": {
-    "url": "https://github.com/my-h-duong/lutra-ui/issues"
+    "url": "https://github.com/my-h-duong-labs/lutra-ui/issues"
   },
   "keywords": [
     "lutra-ui",
@@ -47,13 +47,15 @@
   "scripts": {
     "build": "node ./scripts/clean-dist.mjs && node ./scripts/generate-tokens.mjs && tsc --project tsconfig.build.json && node ./scripts/build-assets.mjs",
     "generate:tokens": "node ./scripts/generate-tokens.mjs",
+    "generate:health": "node ./scripts/generate-component-health.mjs",
     "pack:verify": "node ./scripts/verify-pack.mjs",
     "typecheck": "tsc --project tsconfig.json --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
     "lint": "eslint .",
     "storybook": "storybook dev --port 6006 --no-open",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "storybook:verify": "node ./scripts/verify-manager-bundle.mjs"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",