@nxgt/material 3.93.0 → 3.95.0

package/dist/lib/components/ui/fields/index.d.ts

@@ -10,6 +10,7 @@ export * from './form-section/index.js';
 export * from './inline-edit/index.js';
 export * from './input-group-field/index.js';
 export * from './localized-text-fields/index.js';
+export * from './markdown-textarea-field/index.js';
 export * from './number-field/index.js';
 export * from './opening-hours/index.js';
 export * from './otp-field/index.js';

package/dist/lib/components/ui/fields/markdown-textarea-field/index.d.ts

@@ -0,0 +1,2 @@
+export * from './markdown-textarea-field.js';
+export * from './markdown-textarea-form-field.js';

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-preview.d.ts

@@ -0,0 +1,6 @@
+/** The body of the Preview tab: the rendered Markdown, or a hint when empty. */
+export declare function MarkdownPreview({ text, math, mermaid, }: {
+    text: string;
+    math: boolean;
+    mermaid: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-syntax-help.d.ts

@@ -0,0 +1,4 @@
+/** The short syntax reminder under a Markdown textarea, collapsed by default. */
+export declare function MarkdownSyntaxHelp({ id }: {
+    id: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-tabs.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+type MarkdownTabsProps = {
+    /** The textarea (the Write tab). */
+    children: ReactNode;
+    text: string;
+    minRows: number;
+    math: boolean;
+    mermaid: boolean;
+    previewClassName?: string;
+};
+/** The Write / Preview tab list and its two panels. */
+export declare function MarkdownTabs({ children, text, minRows, math, mermaid, previewClassName, }: MarkdownTabsProps): import("react").JSX.Element;
+export {};

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-textarea-field.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode } from 'react';
+export type MarkdownTextareaProps = {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: boolean;
+    /** Minimum height of the textarea, in lines. Default 6. */
+    minRows?: number;
+    /** Show the character counter. Default: when `maxLength` is set. */
+    showCount?: boolean;
+    /** Render `$...$` and `$$...$$` with KaTeX in the preview. Default `true`. */
+    math?: boolean;
+    /** Draw ```` ```mermaid ```` fences as diagrams in the preview. Default `false`. */
+    mermaid?: boolean;
+    /** Show the collapsible syntax help. Default `true`. */
+    showHelp?: boolean;
+    /** Class of the preview panel. */
+    previewClassName?: string;
+} & ComponentProps<'textarea'>;
+/**
+ * A textarea for Markdown with a Write / Preview tab list. The preview is
+ * rendered with `Markdown` (raw HTML is never rendered).
+ */
+export declare function MarkdownTextareaField({ error, helperText, label, className, minRows, showCount, maxLength, math, mermaid, showHelp, previewClassName, value, defaultValue, onChange, ...props }: MarkdownTextareaProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/markdown-textarea-form-field.d.ts

@@ -0,0 +1,3 @@
+import { UseControllerProps } from 'react-hook-form';
+import { MarkdownTextareaProps } from './markdown-textarea-field.js';
+export declare function MarkdownTextareaFormField<T extends Record<string, any>>({ control, name, ...props }: Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<MarkdownTextareaProps, 'name'>): import("react").JSX.Element;

package/dist/lib/components/ui/fields/markdown-textarea-field/use-text-value.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEventHandler, ComponentProps } from 'react';
+/** The text of a textarea that may be controlled or not, for the counter and the preview. */
+export declare function useTextValue(value: ComponentProps<'textarea'>['value'], defaultValue: ComponentProps<'textarea'>['defaultValue'], onChange: ComponentProps<'textarea'>['onChange']): {
+    text: string;
+    handleChange: ChangeEventHandler<HTMLTextAreaElement>;
+};

package/dist/lib/components/ui/fields/number-field/number-control.d.ts

@@ -1,10 +1,17 @@
+import { ReactNode } from 'react';
 import { NumberFieldProps } from './number-field.types.js';
 /**
- * A NumberField's row: the "Decrease" button, the text input, the "Increase"
- * button; a suffix sits inside the input's box, as its end adornment. The
+ * A NumberField's box, an InputGroup (role "group"): the value end-aligned in
+ * tabular figures, the suffix hugging it, then the "Decrease" and "Increase"
+ * buttons as a tinted round pair inside the box at the end (tab order: input,
+ * Decrease, Increase). The
  * field's label, its help and its ids are the caller's.
  */
-export declare function NumberControl({ error, disabled, value, defaultValue, onChange, onBlur, min, max, step, hideSteppers, suffix, stepperName, ...input }: Omit<NumberFieldProps, 'label' | 'helperText' | 'className'> & {
+export declare function NumberControl({ error, disabled, value, defaultValue, onChange, onBlur, min, max, step, hideSteppers, suffix, stepperName, endAdornment, valueAlign, ...input }: Omit<NumberFieldProps, 'label' | 'helperText' | 'className'> & {
     /** The field's plain-text name, appended to the steppers' own ("Increase Quantity"). */
     stepperName?: string;
+    /** A part of the same box between the value and the steppers (QuantityField's unit chip). */
+    endAdornment?: ReactNode;
+    /** Where the value reads: `end` (default) or `start`, when a part follows it. */
+    valueAlign?: 'start' | 'end';
 }): import("react").JSX.Element;

package/dist/lib/components/ui/fields/number-field/number-field-base.d.ts

@@ -0,0 +1,2 @@
+import { NumberFieldProps } from './number-field.types.js';
+export declare function NumberFieldBase({ label, helperText, error, required, className, name, id, 'aria-describedby': ariaDescribedBy, variant: _variant, tone: _tone, locked: _locked, lockedReason: _lockedReason, ...control }: NumberFieldProps): import("react").JSX.Element;

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

@@ -1,2 +1,8 @@
 import { NumberFieldProps } from './number-field.types.js';
-export declare function NumberField({ label, helperText, error, required, className, name, id, 'aria-describedby': ariaDescribedBy, ...control }: NumberFieldProps): import("react").JSX.Element;
+/**
+ * A number field. `variant="score"` draws a big value out of its max; the
+ * default is the boxed field (`NumberFieldBase`, which a field that never
+ * scores, such as CalculatorField, imports on its own to keep the score code
+ * out of its bundle).
+ */
+export declare function NumberField(props: NumberFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/number-field/number-field.types.d.ts

@@ -1,4 +1,5 @@
 import { FocusEventHandler, ReactNode, Ref } from 'react';
+import { Tone } from '../../tones.js';
 export type NumberFieldProps = {
     label?: ReactNode;
     helperText?: ReactNode;
@@ -17,6 +18,18 @@ export type NumberFieldProps = {
     max?: number;
     step?: number;
     hideSteppers?: boolean;
+    /**
+     * `default` is the boxed field with its steppers. `score` is a big tabular
+     * value with its maximum (`suffix`, "/ 20") on the same baseline, no box at
+     * rest, no steppers.
+     */
+    variant?: 'default' | 'score';
+    /** `score` only: the caller-set tone, drawn as text colour plus a shape marker (never colour alone). */
+    tone?: Tone;
+    /** `score` only: read-only and muted, a dashed frame and a lock. */
+    locked?: boolean;
+    /** `score` only: why it is locked, shown under the value and wired by `aria-describedby`. */
+    lockedReason?: ReactNode;
     suffix?: ReactNode;
     /** Names the input when it has no `label` of its own (a part of a larger field). */
     'aria-label'?: string;

package/dist/lib/components/ui/fields/number-field/number-score-control.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { NumberFieldProps } from './number-field.types.js';
+/** The marker of a tone: success a circle, warning a triangle, error a diamond, any other a square. */
+export declare function scoreShape(tone: string | undefined): "circle" | "square" | "diamond" | "triangle";
+/**
+ * The `score` variant's box: a big tabular value with its maximum (`suffix`,
+ * "/ 20") on the same baseline, no box at rest, a hairline on hover and the
+ * focus ring on focus. A tone is the caller's: its text colour plus a shape
+ * marker (never colour alone). A locked score is read-only, muted, dashed, with
+ * a lock; its reason is wired by `aria-describedby` (`reasonId`).
+ */
+export declare function NumberScoreControl({ error, disabled, locked, reasonId, tone, value, defaultValue, onChange, onBlur, min, max, step, suffix, hideSteppers: _hideSteppers, ...input }: Omit<NumberFieldProps, 'label' | 'helperText' | 'className' | 'variant'> & {
+    reasonId?: string;
+}): import("react").JSX.Element;
+/** Why a score is locked, under the value; the input names it in `aria-describedby`. */
+export declare function ScoreReason({ id, children, }: {
+    id: string;
+    children?: ReactNode;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/fields/number-field/number-stepper.d.ts

@@ -9,11 +9,25 @@ export declare function stepperTooltipMayOpen({ hovered, focused, focusVisible,
     focused: boolean;
     focusVisible: boolean;
 }): boolean;
-/** A NumberField's "Decrease" or "Increase" button. */
-export declare function NumberStepper({ direction, label, disabled, onStep, }: {
+/** A NumberField's "Decrease" or "Increase" button: one of the tinted round pair at the end of its box. */
+export declare function NumberStepper({ direction, label, disabled, atLimit, onStep, className, }: {
+    className?: string;
     direction: -1 | 1;
     label: string;
+    /** The whole field is disabled (native `disabled`). */
     disabled?: boolean;
+    /** At `min` / `max`: `aria-disabled`, so a held button keeps focus and its tooltip. */
+    atLimit?: boolean;
+    onStep: (direction: -1 | 1) => void;
+}): import("react").JSX.Element;
+/** The "Decrease" and "Increase" buttons as a tinted round pair (DurationField's look, field-stepper.css), one addon at the end of the NumberField's box. */
+export declare function NumberStepperPair({ decreaseLabel, increaseLabel, atMin, atMax, fieldDisabled, onStep, }: {
+    decreaseLabel: string;
+    increaseLabel: string;
+    atMin?: boolean;
+    atMax?: boolean;
+    /** The whole field is disabled: native `disabled`, and the circles lose their tint. */
+    fieldDisabled?: boolean;
     onStep: (direction: -1 | 1) => void;
 }): import("react").JSX.Element;
 /** The steppers' names: "Increase Quantity" once the field has a name, else "Increase". */

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

@@ -1,8 +1,9 @@
 import { QuantityFieldProps } from './types.js';
 /**
  * One labelled field holding an amount and its unit: a group named by the one
- * label, a NumberField's number (locale decimal, min, max, step, steppers named
- * after the field), a unit picker (or a typed unit), and one message under the
- * pair. The value is `{ value, unit }`.
+ * label, and ONE field box holding a NumberField's number (locale decimal, min,
+ * max, step, steppers named after the field), the unit as a chip that opens a
+ * menu (a search and a typed unit with `allowCustomUnit`), and one message
+ * under the box. The value is `{ value, unit }`.
  */
 export declare function QuantityField({ label, helperText, className, value, defaultValue, onChange, unitLabel, 'aria-label': ariaLabel, ...props }: QuantityFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/quantity-field/quantity-row.d.ts

@@ -6,17 +6,13 @@ type QuantityRowProps = Pick<QuantityFieldProps, 'name' | 'id' | 'placeholder' |
     ariaLabel?: string;
     describedBy?: string;
     unitName: string;
+    unitNamed?: boolean;
     stepperName?: string;
 };
 /**
- * The longest label of `units`: an invisible copy of it, in the unit part's
- * grid cell, makes the part as wide as that label (plus the trigger's padding
- * and chevron) with no inline style. The part is never under 7rem nor over 55%
- * of the row, and it shrinks before the number does (the number's cell keeps
- * 9rem: two 44px steppers and a 44px input), so the input stays a tap target at
- * 375px; the select truncates and titles its value beyond the cap.
+ * The value, the unit chip and the steppers in ONE field box: the value at the
+ * start in tabular figures, the unit as a soft chip (capped at 52% of the box,
+ * it truncates before the value does), then the tinted round −/+ pair.
  */
-export declare function longestUnitLabel(units?: QuantityFieldProps['units']): string;
-/** The pair on one line: the unit part shrinks first, the number (NumberControl's row) keeps 9rem. */
-export declare function QuantityRow({ name, current, change, labelId, ariaLabel, describedBy, unitName, stepperName, unitPlaceholder, units, allowCustomUnit, ...props }: QuantityRowProps): import("react").JSX.Element;
+export declare function QuantityRow({ name, current, change, labelId, ariaLabel, describedBy, unitName, unitNamed, stepperName, unitPlaceholder, units, allowCustomUnit, ...props }: QuantityRowProps): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/fields/quantity-field/quantity-unit-menu.d.ts

@@ -0,0 +1,19 @@
+import { QuantityUnit } from './types.js';
+/**
+ * The unit menu: a listbox of `units` with the chosen one checked. With
+ * `allowCustom` a search input sits on top and a "Use “x”" item offers what
+ * was typed. cmdk gives the arrows, Enter and the filter.
+ */
+export declare function QuantityUnitMenu({ units, unit, allowCustom, name, onPick, rootRef, }: {
+    units: QuantityUnit[];
+    unit: string;
+    allowCustom?: boolean;
+    /** Names the listbox. */
+    name: string;
+    onPick: (unit: string) => void;
+    rootRef: (element: HTMLDivElement | null) => void;
+}): import("react").JSX.Element;
+/** The popover around the menu, end-aligned; focus lands on the search or the list. */
+export declare function QuantityUnitPopup({ label, onPick, ...menu }: Omit<Parameters<typeof QuantityUnitMenu>[0], 'name' | 'rootRef'> & {
+    label: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/fields/quantity-field/quantity-unit.d.ts

@@ -1,12 +1,19 @@
 import { QuantityFieldProps } from './types.js';
-type QuantityUnitProps = Pick<QuantityFieldProps, 'units' | 'allowCustomUnit' | 'disabled' | 'required' | 'error'> & {
+type QuantityUnitProps = Pick<QuantityFieldProps, 'units' | 'allowCustomUnit' | 'disabled'> & {
     unit: string;
     onUnit: (unit: string) => void;
     name?: string;
+    /** Names the unit part ("Dose unit"): the menu's name, and the chip's when `chipName` is set. */
     label: string;
+    /** The chip's own prefix when the caller named the part (`unitLabel`). */
+    named?: boolean;
     placeholder?: string;
-    describedBy?: string;
 };
-/** A quantity's unit: a picker over `units`, or a text input suggesting them. */
-export declare function QuantityUnitPicker({ units, allowCustomUnit, disabled, required, error, unit, onUnit, name, label, placeholder, describedBy, }: QuantityUnitProps): import("react").JSX.Element;
+/**
+ * A quantity's unit as a soft chip inside the field's box, before the steppers.
+ * It opens a menu end-aligned under it: a listbox of `units`, or with
+ * `allowCustomUnit` a search input and a "Use “x”" item. A unit outside
+ * `units` shows as typed. The chip is named "Unit: <label>".
+ */
+export declare function QuantityUnitChip({ units, allowCustomUnit, disabled, unit, onUnit, name, label, named, placeholder, }: QuantityUnitProps): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/fields/quantity-field/use-unit-chip-name.d.ts

@@ -0,0 +1,14 @@
+import { QuantityUnit } from './types.js';
+/** What the unit chip shows, and its accessible name ("Unit: mg", "Age unit: months"). */
+export declare function useUnitChipName({ units, unit, label, named, placeholder, }: {
+    units: QuantityUnit[];
+    unit: string;
+    label: string;
+    named?: boolean;
+    placeholder?: string;
+}): {
+    known: QuantityUnit | undefined;
+    shown: string;
+    text: string;
+    name: string;
+};

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

@@ -6,11 +6,11 @@ export type SwitchRowProps = {
     text: ReactNode;
     isChecked: boolean;
     error?: boolean;
-    /** `plain` draws the row without the field box: no border, no tint. */
+    /** `plain` draws the row without the field box: no border. */
     variant?: 'box' | 'plain';
     className?: string;
     /** The switch itself. */
     children: ReactNode;
 };
-/** The bordered row (or, `plain`, the unboxed one): its text, tinted while checked, then the switch. */
+/** The bordered row (or, `plain`, the unboxed one): its text, then the switch. The row carries `data-checked`; the checked state shows in the track, the thumb and the primary label. */
 export declare function SwitchRow({ id, rowTextId, text, isChecked, error, variant, className, children, }: SwitchRowProps): import("react").JSX.Element;

package/dist/lib/components/ui/fields/switch/switch.d.ts

@@ -6,9 +6,9 @@ export type SwitchProps = {
     helperText?: ReactNode;
     placeholder?: ReactNode;
     /**
-     * How a labelled switch is drawn: `box` (default) is the bordered, tinted
+     * How a labelled switch is drawn: `box` (default) is the bordered
      * row of an input; `plain` keeps the label beside the switch with no
-     * border and no tint. Without a `label` or `placeholder` it changes nothing.
+     * border. Without a `label` or `placeholder` it changes nothing.
      */
     variant?: 'box' | 'plain';
 } & SwitchControlProps;

package/dist/lib/components/ui/fields/text-field/text-field-units.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { InputProps } from '../../primitives/input/input.js';
+/**
+ * What the hidden mirror measures: the value (the caller's when controlled,
+ * what was typed when not, the default after a form reset), else the
+ * placeholder. A password is measured as bullets, never as its text.
+ */
+export declare function mirrorText(type: string | undefined, value: string, placeholder: string | undefined): string;
+/**
+ * The field box of a TextField with a text unit ("#", "/ 20", "kg"): a flex
+ * row of leading, input and trailing, all inside one box. Each side is an
+ * `InputGroupAddon` (a click on it focuses the input); a text unit is muted,
+ * 0.25rem from the value, and an element (an icon, an icon button) keeps its
+ * 32px (44px on a touch screen) size. With a trailing unit the input is sized
+ * to its content (a hidden mirror in the same grid cell, so it needs no
+ * `field-sizing`), which puts the unit right after the last character;
+ * without one the input fills the row. Internal.
+ */
+export declare function TextFieldUnits({ leading, trailing, ...props }: InputProps & {
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}): import("react").JSX.Element;

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

@@ -3,7 +3,16 @@ import { InputProps } from '../../primitives/input/input.js';
 export type TextFieldProps = {
     label?: ReactNode;
     helperText?: ReactNode;
+    /**
+     * Before the value. An element (an icon, an icon button) is muted, with no
+     * well fill; text ("#") is a muted unit that hugs the value.
+     */
     leading?: ReactNode;
+    /**
+     * After the value. An element (an icon, an icon button) is muted, with no
+     * well fill; text ("/ 20", "kg") is a muted unit that sits right after the
+     * value, which the input is sized to.
+     */
     trailing?: ReactNode;
     error?: boolean;
 } & InputProps;

package/dist/lib/components/ui/fields/verification-code/partials/code-surface.d.ts

@@ -1,12 +1,19 @@
 /**
  * The look the code field's two controls share, the six slots and the
- * recovery code's text input: a tinted fill (`foreground` at 6%, 10% in dark)
+ * recovery code's text input: the field card fill
  * inside a hairline ring that holds 3:1 against the card in both themes
- * (WCAG 1.4.11), a 2px primary ring over the page background while active,
+ * (WCAG 1.4.11; the field border tokens, firmer on hover), a 1px primary ring
+ * with the 4px field halo over the page background while active,
  * and a soft error tint. The ring is a transparent border in forced colours,
  * where a box-shadow is dropped.
  */
-export declare const SURFACE = "border border-transparent bg-foreground/6 ring-1 ring-inset ring-foreground/50 transition-[box-shadow,background-color,color] duration-150 dark:bg-foreground/10 dark:ring-foreground/45 forced-colors:border-[ButtonText]";
-export declare const SURFACE_ACTIVE = "bg-background ring-2 ring-primary-indicator dark:bg-background forced-colors:border-[Highlight]";
-export declare const SURFACE_ERROR = "bg-error/10 text-error-text ring-error/75 dark:bg-error/20 dark:ring-error/90 forced-colors:border-[LinkText]";
-export declare const SURFACE_LOCKED = "bg-foreground/4 text-muted-foreground ring-foreground/20 dark:bg-foreground/6 dark:ring-foreground/20 forced-colors:border-[GrayText]";
+export declare const SURFACE = "border border-transparent bg-(--nxgt-field-bg) ring-1 ring-inset ring-(--nxgt-field-border) hover:ring-(--nxgt-field-border-hover) transition-[box-shadow,background-color,color] duration-150 forced-colors:border-[ButtonText]";
+/** The focus of a slot (the active one): the field box's 1px border and 4px halo. */
+export declare const SURFACE_ACTIVE = "bg-background ring-1 ring-(--nxgt-field-focus) hover:ring-(--nxgt-field-focus) shadow-[0_0_0_4px_var(--nxgt-field-halo)] dark:bg-background forced-colors:border-[Highlight]";
+/** The same focus on an input (the recovery code), on `:focus-visible`. */
+export declare const FOCUS = "focus-visible:bg-background focus-visible:ring-(--nxgt-field-focus) focus-visible:shadow-[0_0_0_4px_var(--nxgt-field-halo)]";
+export declare const SURFACE_ERROR = "bg-error/10 text-error-text ring-(--nxgt-field-error) hover:ring-(--nxgt-field-error) dark:bg-error/20 forced-colors:border-[LinkText]";
+/** An error's focus: the error ring and its halo, no primary. */
+export declare const SURFACE_ACTIVE_ERROR = "ring-(--nxgt-field-error) hover:ring-(--nxgt-field-error) shadow-[0_0_0_4px_var(--nxgt-field-halo-invalid)]";
+export declare const FOCUS_ERROR = "focus-visible:ring-(--nxgt-field-error) focus-visible:shadow-[0_0_0_4px_var(--nxgt-field-halo-invalid)]";
+export declare const SURFACE_LOCKED = "bg-foreground/4 text-muted-foreground ring-(--nxgt-field-border-disabled) hover:ring-(--nxgt-field-border-disabled) dark:bg-foreground/6 forced-colors:border-[GrayText]";

package/dist/lib/components/ui/fields/verification-code/partials/recovery-input.d.ts

@@ -2,6 +2,6 @@ import { ComponentProps } from 'react';
 type Props = {
     state: 'idle' | 'error' | 'locked';
 } & Omit<ComponentProps<'input'>, 'type'>;
-/** The recovery code's text input, with the slots' tinted fill and ring. */
+/** The recovery code's text input, with the slots' card fill and ring. */
 export declare function RecoveryInput({ state, className, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/lib/components/ui/layout/app-shell/app-sidebar-group.d.ts

@@ -0,0 +1,12 @@
+import { AppShellLinkComponent, MenuItem } from './types.js';
+/**
+ * An entry of the expanded sidebar whose `children` fold (`defaultExpanded`
+ * set): the entry's row with a chevron button after it, then the children
+ * nested, hidden (out of the tab order too) while folded. The state is local, and a folded group opens at first when its current page is a child:
+ * the server render and the first client render both follow `defaultExpanded`.
+ */
+export declare function AppSidebarGroup({ item, activeUrl, linkComponent, }: {
+    item: MenuItem;
+    activeUrl?: string;
+    linkComponent: AppShellLinkComponent;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/types.d.ts

@@ -66,6 +66,13 @@ export type MenuItem = {
      * like the expanded sidebar. Ignored without `children`.
      */
     childrenIn?: 'sidebar';
+    /**
+     * Makes the `children` collapsible in the expanded sidebar: a chevron
+     * button after the entry folds and unfolds them. `true`: open at first;
+     * `false`: folded at first, unless the current page is one of them. Unset: they are always listed. The phone's menu
+     * sheet and the other presets ignore it. Ignored without `children` and with `display: 'icon'`.
+     */
+    defaultExpanded?: boolean;
     /** The section this entry belongs to, already translated: the drawer draws one section per group. */
     group?: string;
     /** Whether a bottom navigation bar shows this entry (the others go under "More"): the bar and the floating toolbar. */

package/dist/lib/components/ui/primitives/input-group/input-group.d.ts

@@ -10,7 +10,7 @@ declare function InputGroupButton({ className, type, variant, ...props }: IconBu
 declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
 /**
  * The control of an InputGroup: a bare `<input>`, the group is the field
- * box (it reads the control's `:placeholder-shown` for its tint).
+ * box (it reads the control's `:placeholder-shown` for `data-filled`).
  */
 declare function InputGroupInput({ className, type, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;

package/dist/lib/components/ui/widgets/education/questions/index.d.ts

@@ -2,4 +2,4 @@ export { QuestionCard } from './question.js';
 export { answerParts, isAnswerCorrect, isAnswered, parseAnswerNumber, } from './question.utils.js';
 export { QuestionMediaView } from './question-media-view.js';
 export type { QuestionMediaFile, QuestionMediaViewProps, } from './question-media-view.types.js';
-export type { Question, QuestionAnswer, QuestionCodeField, QuestionImage, QuestionKind, QuestionMedia, QuestionMediaKind, QuestionOption, QuestionPoints, QuestionProps, QuestionVerdict, } from './types.js';
+export type { Question, QuestionAnswer, QuestionCodeField, QuestionExample, QuestionImage, QuestionKind, QuestionMedia, QuestionMediaKind, QuestionOption, QuestionPoints, QuestionProps, QuestionReference, QuestionVerdict, } from './types.js';

package/dist/lib/components/ui/widgets/education/questions/partials/question-hints.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hints revealed one at a time. The button names the next one ("Show hint 2
+ * of 3"); the revealed hint takes the focus, and a status line keeps the count
+ * ("Hint 2 of 3") for a screen reader.
+ */
+export declare function QuestionHints({ hints, markdown, }: {
+    hints: string[];
+    markdown?: boolean;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/education/questions/partials/question-reveal.d.ts

@@ -0,0 +1,13 @@
+import { Question } from '../types.js';
+/** Why each option is right or wrong, for the options that carry an `explanation`. */
+export declare function QuestionOptionExplanations({ question, }: {
+    question: Question;
+}): import("react").JSX.Element | null;
+/** The sources of a question: a labelled list, a link when there is a safe `url`. */
+export declare function QuestionReferences({ question }: {
+    question: Question;
+}): import("react").JSX.Element | null;
+/** A `code` question's examples: a table with an input and an expected column. */
+export declare function QuestionExamples({ question }: {
+    question: Question;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/widgets/education/questions/partials/rich-text.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { Question } from '../types.js';
+/**
+ * A question's text: plain, or Markdown with math when the question's
+ * `markdown` is on. Raw HTML is never rendered; mermaid is off. `inline` keeps
+ * it to phrasing content (the prompt, a label, a sentence).
+ */
+export declare function RichText({ markdown, inline, children, className, }: {
+    markdown?: boolean;
+    inline?: boolean;
+    children: string;
+    className?: string;
+}): import("react").JSX.Element;
+/** An option label: inline Markdown only when it is a string and the question asks for it. */
+export declare function richLabel(label: ReactNode, markdown?: boolean): ReactNode;
+/** The answer parts of a sentence ("Correct answer: …"): option labels as inline Markdown, typed answers as they are. */
+export declare function richParts(question: Question, parts: ReactNode[]): ReactNode[];

package/dist/lib/components/ui/widgets/education/questions/types.d.ts

@@ -38,6 +38,22 @@ export type QuestionOption = {
     description?: ReactNode;
     /** A picture: the options of the question become picture cards. */
     image?: QuestionImage;
+    /**
+     * Why this option is right or wrong, shown once the card is revealed (and in
+     * a `preview`), in a list under the question. Markdown when the question's
+     * `markdown` is on.
+     */
+    explanation?: string;
+};
+/** A source quoted in the reveal: a plain title, or a link when it has a `url`. */
+export type QuestionReference = {
+    title: string;
+    url?: string;
+};
+/** A visible example of a `code` question: what goes in and what must come out. */
+export type QuestionExample = {
+    input: string;
+    expected: string;
 };
 /** A choice id, the ids of a multi, the text (or the number as text) typed. */
 export type QuestionAnswer = string | string[] | null;
@@ -47,14 +63,37 @@ export type Question = {
     kind: QuestionKind;
     options?: QuestionOption[];
     correct?: string | string[];
+    /** Markdown when `markdown` is on. */
     explanation?: string;
     required?: boolean;
     placeholder?: string;
     exact?: boolean;
     /** A picture shown with the prompt; give it an `alt` unless decorative. */
     media?: QuestionMedia;
-    /** Shown on demand, behind a "Show hint" button. */
+    /**
+     * Draws the `prompt`, the string option labels, the `explanation`, the
+     * option explanations and the hints as Markdown with math (`$x^2$`), through
+     * the library's safe `Markdown` (raw HTML is not rendered, mermaid is off).
+     * Default `false`: plain text, as before.
+     */
+    markdown?: boolean;
+    /**
+     * Shown on demand, behind a "Show hint" button.
+     * @deprecated Use `hints`. Ignored when `hints` is not empty.
+     */
     hint?: string;
+    /**
+     * Hints revealed one at a time, in order, behind a "Show hint 1 of N" button
+     * that moves the focus to the hint it reveals. Hidden once the card is
+     * revealed.
+     */
+    hints?: string[];
+    /** Sources listed in the reveal; a `url` makes an external link (`rel="noopener noreferrer"`). */
+    references?: QuestionReference[];
+    /** `code`: the code field starts with this when there is no draft (`value` is null or undefined). */
+    starterCode?: string;
+    /** `code`: examples shown as a table (input, expected output) above the field. */
+    examples?: QuestionExample[];
     /** `number`: how far off an answer may be and still count (default 0). */
     tolerance?: number;
     /** `number`: the unit shown after the field ("km", "%"). */

package/dist/lib/i18n/resources/en/en.d.ts

@@ -375,6 +375,17 @@ export declare const en: {
             hint: string;
             "show-hint": string;
             "hide-hint": string;
+            rich: {
+                hints: string;
+                "show-next-hint": string;
+                "hint-n": string;
+                "option-explanations": string;
+                references: string;
+                "new-tab": string;
+                examples: string;
+                "example-input": string;
+                "example-expected": string;
+            };
             correct: string;
             incorrect: string;
             unanswered: string;
@@ -1353,8 +1364,24 @@ export declare const en: {
             "increase-named": string;
         };
         "quantity-field": {
+            search: string;
             unit: string;
+            "unit-chip": string;
             "unit-named": string;
+            "use-typed": string;
+        };
+        "markdown-textarea-field": {
+            write: string;
+            preview: string;
+            mode: string;
+            empty: string;
+            help: string;
+            "help-bold": string;
+            "help-list": string;
+            "help-code": string;
+            "help-inline-math": string;
+            "help-block-math": string;
+            "help-escape": string;
         };
         "textarea-field": {
             count: string;
@@ -3518,6 +3545,8 @@ export declare const en: {
             "rail-toggle": string;
             "panel-collapse": string;
             "panel-expand": string;
+            "group-collapse": string;
+            "group-expand": string;
         };
         dashboard: {
             edit: string;