@nxgt/material 3.92.0 → 3.94.0

package/dist/{empty-state-Bs44jnWk.js → empty-state-sRVjgCis.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./use-material-translation-DA5ECZfA.js";
+import { t } from "./use-material-translation-Cx5u36V5.js";
 import { t as n } from "./typography-CYEquVeb.js";
 import { a as r, c as i, i as a, n as o, o as s, r as c, t as l, u } from "./state-scenes-BX03WmSu.js";
 import { Suspense as d } from "react";

package/dist/{financial-variant-B5iZ3pYf.js → financial-variant-Bqo9-swy.js}

@@ -1,12 +1,12 @@
-import { d as e, n as t, r as n, t as r } from "./tabs-BideU0Rb.js";
-import { t as i } from "./use-material-translation-DA5ECZfA.js";
-import { r as a, t as o } from "./currency-field-D0UQb5pn.js";
-import { t as s } from "./percent-field-DuoZieW9.js";
+import { d as e, n as t, r as n, t as r } from "./tabs-DyiFTy5g.js";
+import { t as i } from "./use-material-translation-Cx5u36V5.js";
+import { r as a, t as o } from "./currency-field-IcEMAcAw.js";
+import { t as s } from "./percent-field-DrI4_J7x.js";
 import { n as c } from "./calculator-context-BugcKuVG.js";
 import { t as l } from "./calculator-announce-DRd2c6Dq.js";
 import { n as u, t as d } from "./calculator-panel-announce-AZSnZUSr.js";
 import { t as f } from "./currency-B-r3ig11.js";
-import { t as p } from "./calculator-segment-CyB9IhEq.js";
+import { t as p } from "./calculator-segment-BsaxUtzL.js";
 import { useId as m, useMemo as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import { currencyFractionDigits as y } from "@nxgt/material-core/currency-digits";

package/dist/{hooks-CJtRFDYD.js → hooks-BTj_WJm9.js}

@@ -1,5 +1,5 @@
-import { i as e } from "./translate-material-d8Q5K5a_.js";
-import { n as t } from "./use-heading-spy-DHd5TScW.js";
+import { i as e } from "./translate-material-DlMetRSJ.js";
+import { n as t } from "./use-heading-spy-17B5xa7B.js";
 import { t as n } from "./number.utils-CSueQZcv.js";
 import { useCallback as r, useEffect as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
 import { jsx as l } from "react/jsx-runtime";

package/dist/hooks.js

@@ -1,9 +1,9 @@
 import { t as e } from "./use-ssr-media-query-C6M5m8sf.js";
 import { a as t, i as n, o as r, r as i, s as a } from "./theme-store-BdPp43cV.js";
 import { n as o, t as s } from "./use-theme-BCLireTd.js";
-import { a as c, i as l, m as u, o as d, r as f, s as p, t as m } from "./use-heading-spy-DHd5TScW.js";
+import { a as c, i as l, m as u, o as d, r as f, s as p, t as m } from "./use-heading-spy-17B5xa7B.js";
 import { r as h } from "./use-csp-nonce-ZKs9k-ov.js";
 import { t as g } from "./use-mobile-BDro060N.js";
 import { t as _ } from "./use-scroll-away-PQRFZkT2.js";
-import { _ as v, a as y, c as b, d as x, f as S, g as C, h as w, i as T, l as E, m as D, n as O, o as k, p as A, r as j, s as M, t as N, u as P, v as F } from "./hooks-CJtRFDYD.js";
+import { _ as v, a as y, c as b, d as x, f as S, g as C, h as w, i as T, l as E, m as D, n as O, o as k, p as A, r as j, s as M, t as N, u as P, v as F } from "./hooks-BTj_WJm9.js";
 export { i as DEFAULT_THEME, n as applyResolvedTheme, t as applyThemeName, M as buildOptions, l as busySettler, D as clearDrafts, c as createSubmitGuard, b as extractNode, v as isLeaving, r as resolveTheme, a as resolveThemeName, F as shouldBlockNavigation, k as startPoll, C as useAllowedTransitions, f as useCountdown, h as useCspNonce, O as useDiscardGuard, w as useDrafts, p as useFocusOnMount, A as useFormatters, m as useHeadingSpy, o as useIsClient, g as useIsMobile, u as useLocalizedDate, x as useNavigationHandler, S as useNavigationHandlers, P as useNumberFormatter, E as useOptions, y as usePoll, T as useReactRouterBlock, _ as useScrollAway, j as useSearchParam, e as useSsrMediaQuery, d as useSubmitOnce, s as useTheme, N as useUnsavedGuard };

package/dist/{hover-card-B8PYUsv_.js → hover-card-BZU1DWGY.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t } from "./dist-DVRQkaTK.js";
 import { i as n, r, t as i } from "./dist-DWZXlCZR.js";
-import { S as a, d as o, f as s, l as c, p as l, x as u } from "./spinner-CHWFXCfd.js";
+import { S as a, d as o, f as s, l as c, p as l, x as u } from "./spinner-D7ol2n_-.js";
 import { a as d, i as f } from "./dist-DHdUUM1w.js";
 import { t as p } from "./in-dialog-D61Yeaol.js";
 import { i as m } from "./escape-owner-DpaP0lm1.js";

package/dist/i18n.js

@@ -1,8 +1,8 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { c as t, d as n, i as r, l as i, n as a, o, r as s, t as c, u as l } from "./translator-CxyFsfO0.js";
-import { i as u, n as d, r as f, t as p } from "./translate-material-d8Q5K5a_.js";
+import { c as t, d as n, i as r, l as i, n as a, o, r as s, t as c, u as l } from "./translator-VtzVrnLm.js";
+import { i as u, n as d, r as f, t as p } from "./translate-material-DlMetRSJ.js";
 import { o as m, t as h } from "./merge-BCZE6HGq.js";
-import { t as g } from "./use-material-translation-DA5ECZfA.js";
+import { t as g } from "./use-material-translation-Cx5u36V5.js";
 import { useCallback as _ } from "react";
 //#region lib/i18n/merge-resources.ts
 function v(e, t, n = "") {

package/dist/{icon-badge-YT98b2Vx.js → icon-badge-CXgvqMsM.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./icon-button-BylI02aX.js";
+import { t } from "./icon-button-B9WjQ3RO.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region lib/components/ui/actions/icon-button/icon-badge.tsx
 function r({ children: r, className: i, ...a }) {

package/dist/{icon-button-BylI02aX.js → icon-button-B9WjQ3RO.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t } from "./use-shape-morph-BKA_R5P5.js";
 import { n, t as r } from "./dist-DVRQkaTK.js";
-import { n as i, t as a } from "./spinner-CHWFXCfd.js";
+import { n as i, t as a } from "./spinner-D7ol2n_-.js";
 import { t as o } from "./dist-DkQbkF9T.js";
 import { a as s, i as c, n as l, o as u, r as d, s as f, t as p } from "./use-click-lock-Bwg_caHO.js";
 import { t as m } from "./is-production-GLw59WU8.js";

package/dist/{input-group-CiayHfBN.js → input-group-Df9vp2EZ.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DkQbkF9T.js";
-import { t as n } from "./icon-button-BylI02aX.js";
+import { t as n } from "./icon-button-B9WjQ3RO.js";
 import { a as r, o as i } from "./input-CC2joTjB.js";
 import { jsx as a } from "react/jsx-runtime";
 //#region lib/components/ui/primitives/input-group/input-group.tsx

package/dist/lib/components/ui/collections/day-grouped-list/index.d.ts

@@ -1 +1,7 @@
 export { type DateGroup, type GroupByDateOptions, groupByDate, } from '@nxgt/material-core/day-math';
+export type { DayGroupedListProps } from './day-grouped-list.js';
+export { DayGroupedList } from './day-grouped-list.js';
+export type { DayGroup, DayGroupDate, DayGroupKey, } from './day-groups.js';
+export { DAY_GROUP_ORDER, dayGroupOf, groupByDay } from './day-groups.js';
+export type { DayGroupsOptions, ResolvedDayGroup } from './use-day-groups.js';
+export { useDayGroups } from './use-day-groups.js';

package/dist/lib/components/ui/display/entity-header/entity-metadata.d.ts

@@ -4,10 +4,5 @@ type EntityMetadataProps = {
         value: React.ReactNode;
     }[];
 };
-/**
- * The facts under an EntityHeader's title: a quiet label beside its value, in
- * a description list so assistive tech reads the pairs. Empty values drop out.
- * A link in a value takes the primary text colour, not the prose link's info.
- */
 export declare function EntityMetadata({ data }: EntityMetadataProps): import("react").JSX.Element | null;
 export {};

package/dist/lib/components/ui/display/entity-header/entity-stats.d.ts

@@ -11,6 +11,7 @@ export declare const hasStatValue: (stat: EntityStat) => boolean;
  * The figures of an EntityHeader (counts, a mean) as compact StatCard tiles in
  * a StatCardGroup: 2×2 on a phone, a row that wraps beside. A tile with a `tone` is tonal; without one it is outlined.
  */
-export declare function EntityStats({ data }: {
+export declare function EntityStats({ data, className, }: {
     data: EntityStat[];
+    className?: string;
 }): import("react").JSX.Element | null;

package/dist/lib/components/ui/display/event-chip/event-chip-badges.d.ts

@@ -0,0 +1,21 @@
+import { Tone } from '../../tones.js';
+/** A small label an event carries, drawn after its title. */
+export type EventChipBadge = {
+    label: string;
+    tone?: Tone;
+};
+/** The `badge` then the further `badges`: the one place that order is made. */
+export declare function eventChipBadges(badge?: EventChipBadge, badges?: EventChipBadge[]): EventChipBadge[];
+/** Every badge as a pill or a tone dot. */
+export declare function ChipBadges({ badges, tight, }: {
+    badges: EventChipBadge[];
+    tight: boolean;
+}): import("react").JSX.Element;
+/**
+ * The badges as a wrapping row of small pills, for a place with room (an
+ * agenda row, an event preview): the same pill as in a chip, never the dot.
+ */
+export declare function ChipBadgeList({ badges, className, }: {
+    badges: EventChipBadge[];
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/display/event-chip/event-chip-content.d.ts

@@ -1,9 +1,4 @@
-import { Tone } from '../../tones.js';
-/** A small label an event carries, drawn after its title. */
-export type EventChipBadge = {
-    label: string;
-    tone?: Tone;
-};
+import { EventChipBadge } from './event-chip-badges.js';
 type ContentProps = {
     title: string;
     /** The start time alone, shown before the title when compact. */
@@ -14,7 +9,10 @@ type ContentProps = {
     compact: boolean;
     tight: boolean;
     solid: boolean;
-    badge?: EventChipBadge;
+    /** Already merged by `eventChipBadges`. */
+    badges?: EventChipBadge[];
+    /** The event is cancelled: the title is struck through and "Cancelled" joins its name. */
+    cancelled?: boolean;
 };
 /** What a chip says: the title and its time, on one line when `compact`. */
 export declare function EventChipContent(props: ContentProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/event-chip/event-chip-title.d.ts

@@ -0,0 +1,9 @@
+/**
+ * An event's title: struck through (`<del>`) and followed by a hidden
+ * "Cancelled" (the chip's own translated word) when `cancelled`, so the state
+ * is spoken and not only drawn.
+ */
+export declare function ChipTitle({ title, cancelled, }: {
+    title: string;
+    cancelled?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/display/event-chip/event-chip.classes.d.ts

@@ -1,3 +1,12 @@
 export type EventChipVariant = 'soft' | 'solid' | 'outline';
 /** Each variant's surface; the colour comes from `--event-color`. */
 export declare const EVENT_CHIP_VARIANTS: Record<EventChipVariant, string>;
+/** The classes of the chip's button: its variant, shape, size and, when cancelled, the muted dashed look. */
+export declare function eventChipClass({ variant, color, compact, cancelled, continuesBefore, continuesAfter, }: {
+    variant: EventChipVariant;
+    color: string;
+    compact: boolean;
+    cancelled: boolean;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+}): string;

package/dist/lib/components/ui/display/event-chip/event-chip.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties, MouseEventHandler } from 'react';
+import { Tone } from '../../tones.js';
 import { EventChipVariant } from './event-chip.classes.js';
-import { EventChipBadge } from './event-chip-content.js';
+import { EventChipBadge } from './event-chip-badges.js';
 export type { EventChipVariant } from './event-chip.classes.js';
 export type { EventChipBadge };
 export type EventChipProps = {
@@ -11,6 +12,16 @@ export type EventChipProps = {
     endTime?: string;
     /** Any CSS colour. Default: the primary colour. */
     color?: string;
+    /**
+     * A tone of the library (or one an app declared) the chip is drawn in when
+     * it sets no `color`.
+     */
+    tone?: Tone;
+    /**
+     * The event is cancelled: a muted chip with a dashed outline, the title
+     * struck through (`<del>`) and "Cancelled" in its accessible name.
+     */
+    cancelled?: boolean;
     allDay?: boolean;
     /** One line, the time before the title (a month cell, a short slot). */
     compact?: boolean;
@@ -20,6 +31,8 @@ export type EventChipProps = {
     variant?: EventChipVariant;
     /** A small label (and tone) after the title; hidden but still named where the box is tiny. */
     badge?: EventChipBadge;
+    /** Further badges after `badge` (a status, then a priority). */
+    badges?: EventChipBadge[];
     selected?: boolean;
     disabled?: boolean;
     continuesBefore?: boolean;
@@ -34,4 +47,4 @@ export type EventChipProps = {
  * is set from script (a CSS custom property), never as inline style in server
  * markup.
  */
-export declare function EventChip({ title, time, endTime, color, allDay, compact, tight, variant, badge, selected, disabled, continuesBefore, continuesAfter, onClick, className, style, }: EventChipProps): import("react").JSX.Element;
+export declare function EventChip({ title, time, endTime, color: ownColor, tone, cancelled, allDay, compact, tight, variant, badge, badges, selected, disabled, continuesBefore, continuesAfter, onClick, className, style, }: EventChipProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/markdown/markdown.d.ts

@@ -5,8 +5,8 @@ export type MarkdownProps = {
     emojis?: EmojiItem[];
     /**
      * Render `$...$` and `$$...$$` with KaTeX. Default `true`. Under a strict CSP
-     * it needs nothing on a client render; server-rendered math needs
-     * `style-src-attr 'unsafe-inline'` (csp.md).
+     * it needs no `style-src-attr`: KaTeX's inline styles become classes and one
+     * `<style>` that takes the `NonceProvider` nonce (csp.md).
      */
     math?: boolean;
     /**

package/dist/lib/components/ui/display/markdown/rehype-katex-classes.d.ts

@@ -0,0 +1,21 @@
+import { Root } from 'hast';
+/**
+ * Replaces the inline `style="…"` attributes KaTeX puts on its markup with
+ * classes, and appends one `<style>` (given the CSP nonce) holding their
+ * rules. A `style` attribute needs `style-src-attr 'unsafe-inline'`, which a
+ * server-rendered page cannot avoid otherwise (hydration does not rewrite it);
+ * a nonce'd `<style>` element is allowed by `style-src-elem 'nonce-…'`.
+ *
+ * Runs after `rehype-katex`. A class names one declaration list, by hash, so
+ * the server and the client render the same markup. A declaration that is not
+ * a plain `property:value` (a quote, a brace, `url(`, a backslash, `@`) is
+ * dropped, so no markup can smuggle a rule out of the sheet.
+ */
+export type RehypeKatexClassesOptions = {
+    nonce?: string;
+};
+/** FNV-1a, base 36: short and stable between server and client. */
+export declare function hashDeclarations(text: string): string;
+/** The declarations of a `style` value that are safe to put in a sheet. */
+export declare function safeDeclarations(style: string): string[];
+export declare function rehypeKatexClasses(options?: RehypeKatexClassesOptions): (tree: Root) => void;

package/dist/lib/components/ui/fields/attributes/attribute-values-form-field-set/attribute-values-form-field-set.d.ts

@@ -13,4 +13,4 @@ export interface AttributeValuesFormFieldSetProps<T extends Record<string, any>>
     /** Keep `label` as the group's accessible name but draw nothing, e.g. under a `FormSection` that already titles it. */
     hideLabel?: boolean;
 }
-export declare function AttributeValuesFormFieldSet<T extends Record<string, Attribute>>({ attributes, defaultValues, name, control, label, hideLabel, className, }: AttributeValuesFormFieldSetProps<T>): import("react").JSX.Element;
+export declare function AttributeValuesFormFieldSet<T extends Record<string, any>>({ attributes, defaultValues, name, control, label, hideLabel, className, }: AttributeValuesFormFieldSetProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-control.d.ts

@@ -11,7 +11,7 @@ export type ChoiceListControlProps = Pick<ChoiceListFieldProps, 'min' | 'rowLabe
     setIds?: (next: ChoiceRow[]) => void;
     t: ReturnType<typeof useMaterialTranslation>['t'];
     label: ReturnType<typeof defaultRowLabel>;
-    props: Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'onBlur'>;
+    props: Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'rowDetailErrors' | 'onBlur'>;
 };
 /** The list itself, with the group and per-row errors of the field. */
 export declare function ChoiceListControl({ rows, error, focus, setIds, onChange, t, label, min, selection, rowLabel, disabled, props, }: ChoiceListControlProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-field.d.ts

@@ -10,4 +10,4 @@ export type { ChoiceListFieldProps } from './types.js';
  * new one, with one call of `onAssignIds` (default: `onChange`) on mount.
  * `ChoiceListFormField` wires it to react-hook-form.
  */
-export declare function ChoiceListField({ value, onChange, onAssignIds, selection, rowLabel, reorderable, rowErrors, disabled, onBlur, ref, ...props }: ChoiceListFieldProps): import("react").JSX.Element;
+export declare function ChoiceListField({ value, onChange, onAssignIds, selection, rowLabel, reorderable, rowErrors, rowDetail, rowDetailErrors, disabled, onBlur, ref, ...props }: ChoiceListFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-focus.d.ts

@@ -10,6 +10,9 @@ export type ArrayError = {
         text?: {
             message?: string;
         };
+        explanation?: {
+            message?: string;
+        };
     } | undefined;
 };
 /**
@@ -43,7 +46,7 @@ export declare function useRefusedFocus(error: () => ArrayError | undefined, bla
 };
 /**
  * The handle React Hook Form gets as the `ref` of a row path
- * (`choices.<i>.text`): `setFocus` and `setError(…, { shouldFocus })` on that
- * path call its `focus()`, which goes to the row's text input.
+ * (`choices.<i>.text`, or `.explanation`): `setFocus` and `setError(…, { shouldFocus })` on that
+ * path call its `focus()`, which goes to the row's text input (the detail textarea for `.explanation`).
  */
-export declare function rowFocus(list: RefObject<Element | null>, position: number): FocusHandle;
+export declare function rowFocus(list: RefObject<Element | null>, position: number, field?: 'text' | 'explanation'): FocusHandle;

package/dist/lib/components/ui/fields/choice-list/choice-list-form-field.d.ts

@@ -1,6 +1,6 @@
 import { FieldValues, UseControllerProps } from 'react-hook-form';
 import { ChoiceListFieldProps } from './types.js';
-export type ChoiceListFormFieldProps<T extends FieldValues> = Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'onBlur'> & {
+export type ChoiceListFormFieldProps<T extends FieldValues> = Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<ChoiceListFieldProps, 'value' | 'onChange' | 'onAssignIds' | 'error' | 'rowErrors' | 'rowDetailErrors' | 'onBlur'> & {
     /**
      * The built-in rules ask for one marked row at least. `false` lets a list
      * with none pass (a poll). Default true.
@@ -16,4 +16,4 @@ export type ChoiceListFormFieldProps<T extends FieldValues> = Pick<UseController
  * way: `choices.2.text` under row 3, `choices` under the list. Ids given on
  * mount do not make the form dirty when a `FormProvider` is above.
  */
-export declare function ChoiceListFormField<T extends FieldValues>({ control, name, min, selection, requireCorrect, rowLabel, disabled, ...props }: ChoiceListFormFieldProps<T>): import("react").JSX.Element;
+export declare function ChoiceListFormField<T extends FieldValues>({ control, name, min, selection, requireCorrect, rowLabel, disabled, rowDetail, ...props }: ChoiceListFormFieldProps<T>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/choice-list-names.d.ts

@@ -5,6 +5,8 @@ type Translate = ReturnType<typeof useMaterialTranslation>['t'];
 export declare const defaultRowLabel: (t: Translate) => string;
 /** A row's text field label: "Answer 2". */
 export declare const textLabel: (label: string, position: number) => string;
+/** A row's detail textarea label: "Explanation 2". */
+export declare const detailLabel: (label: string | undefined, t: Translate, position: number) => string;
 /** The visible word beside the mark. */
 export declare const correctText: (t: Translate) => string;
 /** The mark's accessible name, which starts with its visible word. */

package/dist/lib/components/ui/fields/choice-list/choice-list.utils.d.ts

@@ -12,6 +12,8 @@ export declare function setCorrect(rows: readonly ChoiceRow[], id: string, corre
 /** The rows with one more at the end; in `single` it is marked when none is. */
 export declare function addChoice(rows: readonly ChoiceRow[], selection: ChoiceListSelection): ChoiceRow[];
 export declare function setText(rows: readonly ChoiceRow[], id: string, text: string): ChoiceRow[];
+/** Sets a row's detail text, keeping its other fields. */
+export declare function setExplanation(rows: readonly ChoiceRow[], id: string, explanation: string): ChoiceRow[];
 export declare const removeAt: (rows: readonly ChoiceRow[], index: number) => ChoiceRow[];
 export declare function moveRow(rows: readonly ChoiceRow[], from: number, to: number): ChoiceRow[];
 export type ChoiceListIssue = 'too-few' | 'too-many' | 'none-correct' | 'blank';

package/dist/lib/components/ui/fields/choice-list/index.d.ts

@@ -1,3 +1,3 @@
 export * from './choice-list-field.js';
 export * from './choice-list-form-field.js';
-export type { ChoiceListSelection, ChoiceRow } from './types.js';
+export type { ChoiceListSelection, ChoiceRow, ChoiceRowDetail } from './types.js';

package/dist/lib/components/ui/fields/choice-list/partials/choice-row.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ChoiceListSelection, ChoiceRow as Row } from '../types.js';
+import { ChoiceListSelection, ChoiceRowDetail, ChoiceRow as Row } from '../types.js';
 export type ChoiceRowProps = {
     row: Row;
     position: number;
@@ -7,6 +7,11 @@ export type ChoiceRowProps = {
     selection: ChoiceListSelection;
     disabled?: boolean;
     error?: ReactNode;
+    /** The detail textarea under the row; absent: none. */
+    detail?: ChoiceRowDetail & {
+        name: string;
+        error?: ReactNode;
+    };
     names: {
         text: (position: number) => string;
         correctText: string;
@@ -14,6 +19,7 @@ export type ChoiceRowProps = {
     };
     onText: (text: string) => void;
     onCorrect: (correct: boolean) => void;
+    onDetail?: (explanation: string) => void;
 };
-/** One row's fields: the answer's text, then its mark. */
-export declare function ChoiceListRow({ row, position, radioName, selection, disabled, error, names, onText, onCorrect, }: ChoiceRowProps): import("react").JSX.Element;
+/** One row's fields: the answer's text, its mark, then its detail when asked. */
+export declare function ChoiceListRow({ row, position, radioName, selection, disabled, error, detail, names, onText, onCorrect, onDetail, }: ChoiceRowProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/choice-list/types.d.ts

@@ -6,6 +6,19 @@ export type ChoiceRow = {
     id: string;
     text: string;
     correct: boolean;
+    /**
+     * A detail about the choice (why it is right or wrong), edited when the
+     * list has `rowDetail`. Absent until a user types in it.
+     */
+    explanation?: string;
+};
+/** The optional detail textarea under each row (`ChoiceRow.explanation`). */
+export type ChoiceRowDetail = {
+    /** The textarea's label, before the row's number. Default "Explanation", translated. */
+    label?: string;
+    placeholder?: string;
+    /** Limits the text and shows a counter. */
+    maxLength?: number;
 };
 /**
  * `single` marks one row (radios; marking a row unmarks the others) and
@@ -35,6 +48,13 @@ export type ChoiceListFieldProps = Omit<ComponentProps<'div'>, 'children' | 'onC
     error?: ReactNode;
     /** An error per row, by id: `{ [row.id]: 'Enter the answer' }`. */
     rowErrors?: Readonly<Record<string, ReactNode>>;
+    /**
+     * Adds a textarea under each row, stored as `ChoiceRow.explanation`
+     * (`true` for its defaults). Absent: no detail, rows unchanged.
+     */
+    rowDetail?: boolean | ChoiceRowDetail;
+    /** An error per row's detail, by id. */
+    rowDetailErrors?: Readonly<Record<string, ReactNode>>;
     /**
      * Called when the focus leaves the whole list, for a field used alone;
      * inside a `FieldBlur` the list's root is registered and this is not