@ultimat3/ui 29.4.0 → 30.1.0

package/src/components/DataTable.tsx

@@ -15,8 +15,10 @@ import { ariaBool } from '../a11y';
 import { cx } from '../cx';
 import { UI_KEYS } from '../i18n-keys';
 import { useUi } from '../theme/context';
+import { type Accessor, solid } from '../theme/solid-adapter';
 import { type AsyncBranch, asyncBranch, isBusyBranch } from './async-branch';
 import styles from './DataTable.module.scss';
+import { keyedRows } from './data-table-rows';
 import {
   type ColumnPriority,
   columnPriority,
@@ -58,6 +60,12 @@ interface DataTableBaseProps<Row> {
   caption: string;
   columns: readonly Column<Row>[];
   rows: readonly Row[];
+  /**
+   * The row's identity: its primary key — unique within `rows` and stable across updates, never an
+   * index or a value that can change. A live update keeps the `<tr>` of every key it still holds:
+   * the same object runs nothing, so focus and an open "more" stay put; a new object redraws that
+   * row's cells. Two rows under one key are `X_UI_INVALID_VALUE`.
+   */
   rowKey: (row: Row) => string;
   sort?: SortState | undefined;
   loading?: boolean | undefined;
@@ -66,9 +74,12 @@ interface DataTableBaseProps<Row> {
   onRetry?: (() => void) | undefined;
   emptyTitle?: string | undefined;
   emptyDescription?: string | undefined;
-  /** Opaque cursors from the query result; absent means no further page. */
-  nextCursor?: string | undefined;
-  prevCursor?: string | undefined;
+  /**
+   * Opaque cursors from the query result; `null` or absent means no further page, so a framework
+   * `Page`'s `nextCursor` is handed straight through. A keyset `Page` has no `prevCursor`.
+   */
+  nextCursor?: string | null | undefined;
+  prevCursor?: string | null | undefined;
   stickyHeader?: boolean | undefined;
   /** Pins the first column while the table scrolls sideways. */
   stickyFirstColumn?: boolean | undefined;
@@ -86,8 +97,11 @@ export interface DataTableCallbackProps<Row> extends DataTableBaseProps<Row> {
   onCursor?: ((cursor: string, direction: 'next' | 'prev') => void) | undefined;
   /** Callback sorting. Never beside `sortHrefFor` — the type refuses the pair. */
   onSortChange?: ((sort: SortState | undefined) => void) | undefined;
+  /** Back to the first page: the pager's "First" button. Pass it only past the first page. */
+  onFirst?: (() => void) | undefined;
   hrefFor?: undefined;
   sortHrefFor?: undefined;
+  firstHref?: undefined;
 }
 
 /** The pager and the sort headers are anchors: a server-rendered table needs no script. */
@@ -99,14 +113,18 @@ export interface DataTableLinkProps<Row> extends DataTableBaseProps<Row> {
    * is "unsorted"). Absent, a sortable header is plain text — never a button with no handler.
    */
   sortHrefFor?: ((sort: SortState | undefined) => string) | undefined;
+  /** The first page's URL, for the pager's "First" anchor — `listUrl().firstHref`. */
+  firstHref?: string | undefined;
   onCursor?: undefined;
   onSortChange?: undefined;
+  onFirst?: undefined;
 }
 
 export type DataTableProps<Row> = DataTableCallbackProps<Row> | DataTableLinkProps<Row>;
 
 export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
   const ui = useUi();
+  const rt = solid();
 
   const sortLabel = (key: string): string =>
     ariaSortFor(props.sort, key) === 'ascending'
@@ -152,9 +170,10 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
 
   /**
    * The hidden columns' values, each entry shown only over the widths its own cell is hidden —
-   * a `<details>`, so it opens with scripting off.
+   * a `<details>`, so it opens with scripting off. Only the values read the row: a new object
+   * under the same key redraws them and leaves the `<details>` — and whether it is open — alone.
    */
-  const disclosure = (more: MoreColumn<Column<Row>>, row: Row): JSX.Element => (
+  const disclosure = (more: MoreColumn<Column<Row>>, row: Accessor<Row>): JSX.Element => (
     <td role={TABLE_ROLES.cell} class={styles['more']} data-more={more.until}>
       <details class={styles['disclosure']}>
         <summary class={styles['summary']}>{ui.t(UI_KEYS.more)}</summary>
@@ -162,7 +181,7 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
           {more.columns.map((column) => (
             <div class={styles['entry']} data-priority={priorityOf(column)}>
               <dt>{column.header}</dt>
-              <dd>{column.cell(row)}</dd>
+              <dd>{column.cell(row())}</dd>
             </div>
           ))}
         </dl>
@@ -170,6 +189,29 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
     </td>
   );
 
+  /** One `<tr>` per key, built once; only what reads `row()` redraws when its object changes. */
+  const rowNode = (row: Accessor<Row>, key: string): JSX.Element => {
+    const more = moreColumn(props.columns);
+    return (
+      <tr role={TABLE_ROLES.row} class={styles['row']} data-row={key}>
+        {props.columns.map((column) => (
+          <td
+            role={TABLE_ROLES.cell}
+            class={cx(styles['cell'], column.numeric === true && styles['numeric'])}
+            data-priority={priorityOf(column)}
+          >
+            {cellContent(column, row())}
+          </td>
+        ))}
+        {more === undefined ? null : disclosure(more, row)}
+      </tr>
+    );
+  };
+
+  // Built in the component body, once: the cache must outlive every run of `body()`, and the
+  // owner here is what disposes every row with the table.
+  const rowNodes = keyedRows<Row, JSX.Element>(rt, (row) => props.rowKey(row), rowNode);
+
   const body = (): JSX.Element => {
     if (branch().kind === 'pending') {
       // `Array.from({ length: NaN })` is `[]`, so a busy tbody with no placeholders in it is the
@@ -192,23 +234,16 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
         </tr>
       ));
     }
-    const more = moreColumn(props.columns);
-    return props.rows.map((row) => (
-      <tr role={TABLE_ROLES.row} class={styles['row']} data-row={props.rowKey(row)}>
-        {props.columns.map((column) => (
-          <td
-            role={TABLE_ROLES.cell}
-            class={cx(styles['cell'], column.numeric === true && styles['numeric'])}
-            data-priority={priorityOf(column)}
-          >
-            {cellContent(column, row)}
-          </td>
-        ))}
-        {more === undefined ? null : disclosure(more, row)}
-      </tr>
-    ));
+    return rowNodes(props.rows);
   };
 
+  /** No cursor either way and no way back is a single page: no pager at all. */
+  const hasPager = (): boolean =>
+    props.nextCursor != null ||
+    props.prevCursor != null ||
+    props.firstHref !== undefined ||
+    props.onFirst !== undefined;
+
   /** One mode per use, exactly as `Pagination` declares it — the table only hands it through. */
   const pager = (): JSX.Element =>
     props.hrefFor === undefined ? (
@@ -216,12 +251,14 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
         nextCursor={props.nextCursor}
         prevCursor={props.prevCursor}
         onCursor={props.onCursor}
+        onFirst={props.onFirst}
       />
     ) : (
       <Pagination
         nextCursor={props.nextCursor}
         prevCursor={props.prevCursor}
         hrefFor={props.hrefFor}
+        firstHref={props.firstHref}
       />
     );
 
@@ -314,7 +351,13 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
     );
   };
 
-  const table = (decided: AsyncBranch<readonly Row[]>): JSX.Element => [
+  /** Read inside the attributes, so a refresh restyles the tbody instead of rebuilding it. */
+  const stale = (): boolean => {
+    const decided = branch();
+    return decided.kind === 'ready' && decided.busy;
+  };
+
+  const table = (): JSX.Element => (
     <Table
       caption={props.caption}
       stickyHeader={props.stickyHeader !== false}
@@ -325,36 +368,52 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
       {header()}
       <tbody
         role={TABLE_ROLES.rowgroup}
-        class={cx(styles['body'], decided.kind === 'ready' && decided.busy && styles['stale'])}
-        aria-busy={ariaBool(isBusyBranch(decided))}
+        class={cx(styles['body'], stale() && styles['stale'])}
+        aria-busy={ariaBool(isBusyBranch(branch()))}
       >
         {body()}
       </tbody>
-    </Table>,
-    props.nextCursor === undefined && props.prevCursor === undefined ? null : pager(),
-  ];
+    </Table>
+  );
 
   /**
    * The branch is decided INSIDE the returned JSX, as `AsyncRegion` does: a component body runs
    * once, so a decision taken there is the decision for the island's whole life — a table that
    * first rendered its error state kept it after the query recovered.
+   *
+   * And only the KIND is decided here, through a memo: a live update that stays `ready` must not
+   * rebuild the `<table>`, or every kept `<tr>` is detached and re-attached — and a detached node
+   * drops focus, which is the defect keyed rows exist to fix. The rows, the busy state and the
+   * pager each track the data on their own.
    */
-  const content = (): JSX.Element => {
+  const view = rt.createMemo((): 'failed' | 'empty' | 'table' => {
+    const kind = branch().kind;
+    return kind === 'failed' || kind === 'empty' ? kind : 'table';
+  });
+
+  const failure = (): unknown => {
     const decided = branch();
-    if (decided.kind === 'failed') {
-      return <ErrorState error={decided.error} onRetry={props.onRetry} />;
-    }
+    return decided.kind === 'failed' ? decided.error : undefined;
+  };
+
+  const content = (): JSX.Element => {
+    const kind = view();
+    if (kind === 'failed') return <ErrorState error={failure()} onRetry={props.onRetry} />;
     // Unreachable while pending, by the shape of `AsyncBranch` rather than by the order of two
     // ifs: "No results" under a first page in flight is the bug that ordering used to stop.
-    if (decided.kind === 'empty') {
+    if (kind === 'empty') {
       return <EmptyState title={props.emptyTitle} description={props.emptyDescription} />;
     }
-    return table(decided);
+    return table();
   };
 
+  /** Beside the table and outside its memo: a new cursor redraws the pager and nothing else. */
+  const pagerSlot = (): JSX.Element => (view() === 'table' && hasPager() ? pager() : null);
+
   return (
     <div class={cx(styles['wrap'], props.class)} data-narrow={props.narrow ?? 'cards'}>
       {content()}
+      {pagerSlot()}
     </div>
   );
 }

package/src/components/DatePicker.module.scss

@@ -0,0 +1,37 @@
+@use '../tokens' as t;
+
+.picker {
+  display: inline-flex;
+  align-items: center;
+  gap: t.space(1);
+  max-inline-size: 100%;
+}
+
+.field {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.open {
+  @include t.touch-target;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid t.role('line');
+  border-radius: t.radius(md);
+  color: t.role('fg');
+  background: t.role('surface-raised');
+  cursor: pointer;
+
+  &:hover {
+    background: t.role('bg-soft');
+  }
+
+  &:focus-visible {
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: t.stroke(thick);
+  }
+
+  &:disabled {
+    @include t.disabled;
+  }
+}

package/src/components/DatePicker.tsx

@@ -0,0 +1,134 @@
+// A date field that is a native `<input type="date">` first, always: on the server, with scripting
+// off and on a coarse pointer it is all there is, and it is the value either way, so the form posts
+// the same thing. A fine pointer with a script also gets a button opening a `Calendar` popover.
+
+import type { PlainDate } from '@ultimat3/time';
+import type { JSX } from 'solid-js';
+import { ariaBool, useId } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { iconCalendar } from '../icons/glyphs/calendar';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import { Calendar } from './Calendar';
+import { assertBounds, optionalDateProp, type Weekday } from './calendar-view';
+import styles from './DatePicker.module.scss';
+import { enhancesWithCalendar, inputDate, opensPicker, writeInputDate } from './date-picker-view';
+import { Icon } from './Icon';
+import inputStyles from './Input.module.scss';
+import { Popover } from './Popover';
+
+export interface DatePickerProps {
+  /** The form field name: the post is the native input's, `YYYY-MM-DD`. */
+  name: string;
+  id?: string | undefined;
+  /** `YYYY-MM-DD`; anything else is `X_UI_INVALID_VALUE`. */
+  value?: string | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
+  /** Days the calendar refuses. The native input cannot express it; validate on the server too. */
+  isDisabled?: ((date: PlainDate) => boolean) | undefined;
+  weekStart?: Weekday | undefined;
+  required?: boolean | undefined;
+  disabled?: boolean | undefined;
+  /** The month the calendar opens on with no value; else today's in `useUi().timeZone`. */
+  month?: string | undefined;
+  'aria-label'?: string | undefined;
+  'aria-describedby'?: string | undefined;
+  'aria-invalid'?: boolean | undefined;
+  onChange?: ((date: PlainDate | undefined) => void) | undefined;
+  class?: string | undefined;
+}
+
+export function DatePicker(props: DatePickerProps): JSX.Element {
+  const rt = solid();
+  const ui = useUi();
+  const fallbackId = useId('date');
+  assertBounds('DatePicker', {
+    min: optionalDateProp('DatePicker min', props.min),
+    max: optionalDateProp('DatePicker max', props.max),
+  });
+  const [enhanced, setEnhanced] = rt.createSignal(false);
+  const [open, setOpen] = rt.createSignal(false);
+  const [current, setCurrent] = rt.createSignal<PlainDate | undefined>(
+    optionalDateProp('DatePicker value', props.value),
+  );
+  let input: HTMLInputElement | undefined;
+
+  // After mount, never during render: the first client render equals the server's input.
+  rt.createEffect(() => {
+    setEnhanced(enhancesWithCalendar(typeof matchMedia === 'function' ? matchMedia : undefined));
+  });
+
+  const pick = (date: PlainDate): void => {
+    if (input !== undefined) writeInputDate(input, date);
+    setCurrent(date);
+    setOpen(false);
+  };
+
+  return (
+    <span class={cx(styles['picker'], props.class)}>
+      <span class={cx(inputStyles['wrap'], inputStyles['size-md'], styles['field'])}>
+        <input
+          ref={(el: HTMLInputElement) => {
+            input = el;
+          }}
+          class={inputStyles['input']}
+          type="date"
+          id={props.id ?? fallbackId}
+          name={props.name}
+          value={props.value ?? ''}
+          min={props.min}
+          max={props.max}
+          required={props.required === true}
+          disabled={props.disabled === true}
+          aria-label={props['aria-label']}
+          aria-describedby={props['aria-describedby']}
+          aria-invalid={ariaBool(props['aria-invalid'])}
+          onKeyDown={(event: KeyboardEvent) => {
+            if (!enhanced() || !opensPicker(event)) return;
+            event.preventDefault();
+            setOpen(true);
+          }}
+          onChange={(event: Event) => {
+            const date = inputDate((event.currentTarget as HTMLInputElement).value);
+            setCurrent(date);
+            props.onChange?.(date);
+          }}
+        />
+      </span>
+      {enhanced() ? (
+        <Popover
+          open={open()}
+          onOpenChange={setOpen}
+          label={ui.t(UI_KEYS.dateOpen)}
+          trigger={(control) => (
+            <button
+              type="button"
+              class={styles['open']}
+              id={control.id}
+              aria-expanded={ariaBool(control['aria-expanded'])}
+              aria-controls={control['aria-controls']}
+              aria-haspopup="dialog"
+              aria-label={ui.t(UI_KEYS.dateOpen)}
+              disabled={props.disabled === true}
+              onClick={() => setOpen(!open())}
+            >
+              <Icon glyph={iconCalendar} size="sm" />
+            </button>
+          )}
+        >
+          <Calendar
+            value={current()}
+            month={current() ?? props.month ?? props.min}
+            min={props.min}
+            max={props.max}
+            isDisabled={props.isDisabled}
+            weekStart={props.weekStart}
+            onSelect={pick}
+          />
+        </Popover>
+      ) : null}
+    </span>
+  );
+}

package/src/components/DateRangePicker.module.scss

@@ -0,0 +1,54 @@
+@use '../tokens' as t;
+
+.range {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-inline-size: 0;
+}
+
+.legend {
+  margin-block-end: t.space(2);
+  color: t.role('fg-strong');
+  font-size: t.text(sm);
+  font-weight: t.weight(medium);
+}
+
+// Two inputs side by side, wrapping onto two lines when the row cannot hold them.
+.ends {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: t.space(3);
+}
+
+.end {
+  display: grid;
+  gap: t.space(1);
+  min-inline-size: 0;
+}
+
+.label {
+  color: t.role('fg-muted');
+  font-size: t.text(xs);
+}
+
+.open {
+  @include t.touch-target;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid t.role('line');
+  border-radius: t.radius(md);
+  color: t.role('fg');
+  background: t.role('surface-raised');
+  cursor: pointer;
+
+  &:hover {
+    background: t.role('bg-soft');
+  }
+
+  &:focus-visible {
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: t.stroke(thick);
+  }
+}

package/src/components/DateRangePicker.tsx

@@ -0,0 +1,156 @@
+// A date range as two native date inputs — `fromName` and `toName` — so a GET filter or a POST
+// works with scripting off and on a phone. A fine pointer with a script also gets one calendar:
+// the first pick sets the start, the second completes the range. Rules: `date-range-view.ts`.
+
+import type { PlainDate } from '@ultimat3/time';
+import type { JSX } from 'solid-js';
+import { ariaBool, useId } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { iconCalendarRange } from '../icons/glyphs/calendar-range';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import { Calendar } from './Calendar';
+import { assertBounds, optionalDateProp, type Weekday } from './calendar-view';
+import styles from './DateRangePicker.module.scss';
+import { enhancesWithCalendar, inputDate, opensPicker, writeInputDate } from './date-picker-view';
+import { type DateRange, orderedRange, pickRange } from './date-range-view';
+import { Icon } from './Icon';
+import inputStyles from './Input.module.scss';
+import { Popover } from './Popover';
+
+export interface DateRangePickerProps {
+  /** Already-translated name for the pair, rendered as the `<legend>`. */
+  legend: string;
+  fromName: string;
+  toName: string;
+  /** `YYYY-MM-DD` each; anything else is `X_UI_INVALID_VALUE`. */
+  from?: string | undefined;
+  to?: string | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
+  isDisabled?: ((date: PlainDate) => boolean) | undefined;
+  weekStart?: Weekday | undefined;
+  /** The month the calendar opens on with no `from`; else today's in `useUi().timeZone`. */
+  month?: string | undefined;
+  /** Called with the range in order whenever either end changes. */
+  onChange?: ((range: DateRange) => void) | undefined;
+  class?: string | undefined;
+}
+
+export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
+  const rt = solid();
+  const ui = useUi();
+  const id = useId('range');
+  assertBounds('DateRangePicker', {
+    min: optionalDateProp('DateRangePicker min', props.min),
+    max: optionalDateProp('DateRangePicker max', props.max),
+  });
+  const [enhanced, setEnhanced] = rt.createSignal(false);
+  const [open, setOpen] = rt.createSignal(false);
+  const [range, setRange] = rt.createSignal<DateRange>(
+    orderedRange({
+      from: optionalDateProp('DateRangePicker from', props.from),
+      to: optionalDateProp('DateRangePicker to', props.to),
+    }),
+  );
+  let fromInput: HTMLInputElement | undefined;
+  let toInput: HTMLInputElement | undefined;
+
+  rt.createEffect(() => {
+    setEnhanced(enhancesWithCalendar(typeof matchMedia === 'function' ? matchMedia : undefined));
+  });
+
+  const commit = (next: DateRange): void => {
+    setRange(next);
+    props.onChange?.(next);
+  };
+
+  const pick = (date: PlainDate): void => {
+    const next = pickRange(range(), date);
+    if (fromInput !== undefined && next.range.from !== undefined) {
+      writeInputDate(fromInput, next.range.from);
+    }
+    if (toInput !== undefined) {
+      if (next.range.to === undefined) toInput.value = '';
+      else writeInputDate(toInput, next.range.to);
+    }
+    commit(next.range);
+    if (next.complete) setOpen(false);
+  };
+
+  const onKeyDown = (event: KeyboardEvent): void => {
+    if (!enhanced() || !opensPicker(event)) return;
+    event.preventDefault();
+    setOpen(true);
+  };
+
+  const field = (end: 'from' | 'to'): JSX.Element => (
+    <span class={styles['end']}>
+      <label class={styles['label']} for={`${id}-${end}`}>
+        {ui.t(end === 'from' ? UI_KEYS.rangeFrom : UI_KEYS.rangeTo)}
+      </label>
+      <span class={cx(inputStyles['wrap'], inputStyles['size-md'])}>
+        <input
+          ref={(el: HTMLInputElement) => {
+            if (end === 'from') fromInput = el;
+            else toInput = el;
+          }}
+          class={inputStyles['input']}
+          type="date"
+          id={`${id}-${end}`}
+          name={end === 'from' ? props.fromName : props.toName}
+          value={(end === 'from' ? props.from : props.to) ?? ''}
+          min={props.min}
+          max={props.max}
+          onKeyDown={onKeyDown}
+          onChange={(event: Event) => {
+            const date = inputDate((event.currentTarget as HTMLInputElement).value);
+            commit(orderedRange({ ...range(), [end]: date }));
+          }}
+        />
+      </span>
+    </span>
+  );
+
+  return (
+    <fieldset class={cx(styles['range'], props.class)}>
+      <legend class={styles['legend']}>{props.legend}</legend>
+      <div class={styles['ends']}>
+        {field('from')}
+        {field('to')}
+        {enhanced() ? (
+          <Popover
+            open={open()}
+            onOpenChange={setOpen}
+            label={ui.t(UI_KEYS.rangeOpen)}
+            trigger={(control) => (
+              <button
+                type="button"
+                class={styles['open']}
+                id={control.id}
+                aria-expanded={ariaBool(control['aria-expanded'])}
+                aria-controls={control['aria-controls']}
+                aria-haspopup="dialog"
+                aria-label={ui.t(UI_KEYS.rangeOpen)}
+                onClick={() => setOpen(!open())}
+              >
+                <Icon glyph={iconCalendarRange} size="sm" />
+              </button>
+            )}
+          >
+            <Calendar
+              range={range()}
+              month={range().from ?? props.month ?? props.min}
+              min={props.min}
+              max={props.max}
+              isDisabled={props.isDisabled}
+              weekStart={props.weekStart}
+              onSelect={pick}
+            />
+          </Popover>
+        ) : null}
+      </div>
+    </fieldset>
+  );
+}

package/src/components/DescriptionList.module.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../tokens' as t;
+
+// The list's own width decides whether a term sits beside its detail: the same facts are a column
+// in a sidebar and two columns in a wide main.
+$sm: map.get(t.$breakpoints, 'sm');
+
+.wrap {
+  @include t.container(descriptionlist);
+}
+
+.list {
+  display: grid;
+  gap: t.space(3);
+  margin: 0;
+}
+
+.group {
+  display: grid;
+  gap: t.space(1);
+}
+
+.layout-columns .group {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+  gap: t.space(4);
+  align-items: baseline;
+}
+
+@container descriptionlist (width < #{$sm}) {
+  .layout-columns .group {
+    grid-template-columns: minmax(0, 1fr);
+    gap: t.space(1);
+  }
+}
+
+.term {
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+  font-weight: t.weight(medium);
+}
+
+.detail {
+  margin: 0;
+  color: t.role('fg');
+  overflow-wrap: anywhere;
+}