@ultimat3/ui 29.3.2 → 30.0.0

package/src/components/Calendar.module.scss

@@ -0,0 +1,118 @@
+@use '../tokens' as t;
+
+.calendar {
+  display: inline-grid;
+  gap: t.space(2);
+  max-inline-size: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: t.space(2);
+}
+
+.title {
+  flex: 1;
+  margin: 0;
+  color: t.role('fg-strong');
+  font-weight: t.weight(semibold);
+  text-align: center;
+}
+
+.nav {
+  @include t.touch-target;
+  display: inline-grid;
+  place-items: center;
+  border: 0;
+  border-radius: t.radius(md);
+  color: t.role('fg');
+  background: transparent;
+  cursor: pointer;
+
+  &:hover {
+    background: t.role('bg-soft');
+  }
+
+  &:focus-visible {
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: calc(-1 * #{t.stroke(thick)});
+  }
+}
+
+// The chevrons point the way the month moves, which is the other way under `dir="rtl"`.
+:global([dir='rtl']) .nav {
+  transform: scaleX(-1);
+}
+
+.grid {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.weekday {
+  padding-block-end: t.space(1);
+  color: t.role('fg-muted');
+  font-size: t.text(xs);
+  font-weight: t.weight(medium);
+  text-align: center;
+}
+
+.cell {
+  padding: 0;
+  text-align: center;
+}
+
+// 44 px at 320 px wide: seven of them fit, and each is a finger's target.
+.day,
+.outside {
+  display: inline-grid;
+  place-items: center;
+  inline-size: t.touch(target);
+  block-size: t.touch(target);
+  border: 0;
+  border-radius: t.radius(md);
+  font-size: t.text(sm);
+  font-variant-numeric: tabular-nums;
+}
+
+.day {
+  color: t.role('fg');
+  background: transparent;
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    background: t.role('bg-soft');
+  }
+
+  &:focus-visible {
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: calc(-1 * #{t.stroke(thick)});
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: t.role('fg-muted');
+    text-decoration: line-through;
+    background: transparent;
+    cursor: not-allowed;
+  }
+}
+
+.outside {
+  color: t.role('fg-muted');
+  opacity: 0.5;
+}
+
+.cell[aria-selected='true'] .day,
+.day[aria-current='date'] {
+  color: t.role('accent-fg');
+  background: t.role('accent');
+}
+
+.cell[data-span='inside'] .day {
+  color: t.role('accent-strong');
+  background: t.role('accent', 0.12);
+}

package/src/components/Calendar.tsx

@@ -0,0 +1,246 @@
+// A month you can pick a day from. Server-rendered and correct with no effect run: in link mode
+// every day is a link (`hrefFor`), in select mode an APG grid with one tab stop. Inline on a
+// booking page, and what `DatePicker`/`DateRangePicker` open. Rules: `calendar-view.ts`.
+
+import { addPlainMonths, now, type PlainDate, plainDateIn } from '@ultimat3/time';
+import type { JSX } from 'solid-js';
+import { useId } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { iconChevronLeft } from '../icons/glyphs/chevron-left';
+import { iconChevronRight } from '../icons/glyphs/chevron-right';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import styles from './Calendar.module.scss';
+import {
+  assertBounds,
+  type CalendarDay,
+  dayLabel,
+  firstOfMonth,
+  monthGrid,
+  monthLabel,
+  optionalDateProp as optionalDate,
+  rovingDay,
+  stepDay,
+  type Weekday,
+  weekdayLabels,
+  weekStartOf,
+} from './calendar-view';
+import { type DateRange, spanPosition } from './date-range-view';
+import { Icon } from './Icon';
+
+interface CalendarBaseProps {
+  /** The chosen day, `YYYY-MM-DD`. */
+  value?: string | undefined;
+  /** A span to mark selected — what `DateRangePicker` passes. */
+  range?: DateRange | undefined;
+  /** The month shown first; defaults to `value`'s, then `min`'s, then today's in `useUi().timeZone`. */
+  month?: string | undefined;
+  min?: string | undefined;
+  max?: string | undefined;
+  isDisabled?: ((date: PlainDate) => boolean) | undefined;
+  /** Overrides the locale's week start (`Intl.Locale#getWeekInfo`). 1 is Monday, 7 Sunday. */
+  weekStart?: Weekday | undefined;
+  class?: string | undefined;
+}
+
+/** Link mode: every enabled day is a link. Works with scripting off. */
+export interface CalendarLinkProps extends CalendarBaseProps {
+  hrefFor: (date: PlainDate) => string;
+  /** The previous and next month's links; omitted, the month does not change. */
+  monthHrefFor?: ((month: PlainDate) => string) | undefined;
+  onSelect?: undefined;
+}
+
+/** Select mode: `role="grid"`, one tab stop, arrows and PageUp/PageDown. An island's. */
+export interface CalendarSelectProps extends CalendarBaseProps {
+  onSelect: (date: PlainDate) => void;
+  hrefFor?: undefined;
+  monthHrefFor?: undefined;
+}
+
+export type CalendarProps = CalendarLinkProps | CalendarSelectProps;
+
+export function Calendar(props: CalendarProps): JSX.Element {
+  const rt = solid();
+  const ui = useUi();
+  const titleId = useId('calendar');
+  const bounds = () => {
+    const resolved = {
+      min: optionalDate('Calendar min', props.min),
+      max: optionalDate('Calendar max', props.max),
+      isDisabled: props.isDisabled,
+    };
+    assertBounds('Calendar', resolved);
+    return resolved;
+  };
+  const value = (): PlainDate | undefined => optionalDate('Calendar value', props.value);
+  // With nothing to open on, the month of today in the context's zone — an explicit IANA zone,
+  // the request's or the provider's, never the device's.
+  const start =
+    optionalDate('Calendar month', props.month) ??
+    value() ??
+    bounds().min ??
+    plainDateIn(now(), ui.timeZone);
+  const [month, setMonth] = rt.createSignal<PlainDate>(firstOfMonth(start));
+  const [focused, setFocused] = rt.createSignal<PlainDate | undefined>(undefined);
+  const weekStart = (): Weekday => weekStartOf(ui.locale, props.weekStart);
+  const grid = (): readonly (readonly CalendarDay[])[] => monthGrid(month(), weekStart(), bounds());
+  const stop = (): PlainDate | undefined =>
+    rovingDay(grid(), [focused(), value(), props.range?.from]);
+  let table: HTMLTableElement | undefined;
+
+  const selected = (date: PlainDate): boolean =>
+    date === value() ||
+    (props.range !== undefined && spanPosition(date, props.range) !== undefined);
+
+  const moveTo = (date: PlainDate): void => {
+    if (firstOfMonth(date) !== month()) setMonth(firstOfMonth(date));
+    setFocused(date);
+    const buttons = table === undefined ? [] : [...table.querySelectorAll<HTMLElement>('button')];
+    buttons.find((button) => button.dataset['date'] === date)?.focus();
+  };
+
+  const onKeyDown = (event: KeyboardEvent): void => {
+    const from = (event.target as HTMLElement | null)?.dataset?.['date'];
+    if (from === undefined || props.onSelect === undefined) return;
+    const next = stepDay(from as PlainDate, event.key, {
+      ...bounds(),
+      dir: ui.dir,
+      weekStart: weekStart(),
+      shiftKey: event.shiftKey,
+    });
+    if (next === undefined) return;
+    event.preventDefault();
+    moveTo(next);
+  };
+
+  const cell = (day: CalendarDay): JSX.Element => {
+    if (!day.inMonth) {
+      return (
+        <span class={styles['outside']} aria-hidden="true">
+          {day.day}
+        </span>
+      );
+    }
+    const onSelect = props.onSelect;
+    if (onSelect !== undefined) {
+      return (
+        <button
+          type="button"
+          class={styles['day']}
+          data-date={day.date}
+          aria-label={dayLabel(day.date, ui.locale)}
+          tabIndex={stop() === day.date ? 0 : -1}
+          disabled={day.disabled}
+          onClick={() => {
+            setFocused(day.date);
+            onSelect(day.date);
+          }}
+        >
+          {day.day}
+        </button>
+      );
+    }
+    const hrefFor = props.hrefFor;
+    if (day.disabled || hrefFor === undefined) {
+      return (
+        <span class={styles['day']} aria-disabled="true">
+          {day.day}
+        </span>
+      );
+    }
+    return (
+      <a
+        class={styles['day']}
+        href={hrefFor(day.date)}
+        aria-label={dayLabel(day.date, ui.locale)}
+        aria-current={selected(day.date) ? 'date' : undefined}
+      >
+        {day.day}
+      </a>
+    );
+  };
+
+  /** A month control: a link in link mode (when the caller gave months a URL), a button otherwise. */
+  const monthControl = (step: -1 | 1): JSX.Element => {
+    const target = (): PlainDate => addPlainMonths(month(), step);
+    const label = ui.t(step === 1 ? UI_KEYS.dateNextMonth : UI_KEYS.datePreviousMonth);
+    const glyph = step === 1 ? iconChevronRight : iconChevronLeft;
+    if (props.onSelect === undefined) {
+      const monthHrefFor = props.monthHrefFor;
+      if (monthHrefFor === undefined) return null;
+      return (
+        <a class={styles['nav']} href={monthHrefFor(target())} aria-label={label}>
+          <Icon glyph={glyph} size="sm" />
+        </a>
+      );
+    }
+    return (
+      <button
+        type="button"
+        class={styles['nav']}
+        aria-label={label}
+        onClick={() => setMonth(target())}
+      >
+        <Icon glyph={glyph} size="sm" />
+      </button>
+    );
+  };
+
+  return (
+    <div class={cx(styles['calendar'], props.class)}>
+      <div class={styles['header']}>
+        {monthControl(-1)}
+        <p class={styles['title']} id={titleId} aria-live="polite">
+          {monthLabel(month(), ui.locale)}
+        </p>
+        {monthControl(1)}
+      </div>
+      <table
+        class={styles['grid']}
+        role={props.onSelect === undefined ? undefined : 'grid'}
+        aria-labelledby={titleId}
+        onKeyDown={onKeyDown}
+        ref={(el: HTMLTableElement) => {
+          table = el;
+        }}
+      >
+        <thead>
+          <tr>
+            {weekdayLabels(ui.locale, weekStart()).map((weekday) => (
+              <th scope="col" abbr={weekday.long} class={styles['weekday']}>
+                {weekday.short}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {grid().map((week) => (
+            <tr>
+              {week.map((day) => (
+                // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-selected is set only with role="gridcell"
+                <td
+                  class={styles['cell']}
+                  role={props.onSelect === undefined ? undefined : 'gridcell'}
+                  aria-selected={
+                    props.onSelect === undefined || !day.inMonth
+                      ? undefined
+                      : selected(day.date)
+                        ? 'true'
+                        : 'false'
+                  }
+                  data-span={
+                    props.range === undefined ? undefined : spanPosition(day.date, props.range)
+                  }
+                >
+                  {cell(day)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/components/ChartFrame.module.scss

@@ -18,6 +18,18 @@
       --series: #{t.role('chart-#{$slot}')};
     }
   }
+
+  // A `tone` replaces the slot's colour — after the slots, so it wins on the same element. The
+  // series keeps its dash and marker: the tone is a meaning, never the only cue.
+  [data-tone='neutral'] {
+    --series: #{t.role('fg-strong')};
+  }
+
+  @each $tone in (accent, success, warning, danger, info) {
+    [data-tone='#{$tone}'] {
+      --series: #{t.role($tone)};
+    }
+  }
 }
 
 .caption {
@@ -109,6 +121,27 @@
   fill: var(--series);
 }
 
+// --- Reference rules ---------------------------------------------------------
+.reference {
+  stroke: var(--series, #{t.role('fg-strong')});
+  stroke-width: 1.5;
+  stroke-dasharray: 6 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.referenceLabel {
+  @include t.data-text;
+  position: absolute;
+  inset-block-start: var(--y);
+  inset-inline-end: 0;
+  translate: 0 -100%;
+  padding-inline: t.space(1);
+  color: var(--series, #{t.role('fg-strong')});
+  font-size: t.text(xs);
+  line-height: t.leading(tight);
+  pointer-events: none;
+}
+
 // --- The keyboard layer ------------------------------------------------------
 // Over the plot box, which every chart sheet makes `position: relative`. The layer lets the
 // pointer through to nothing in particular; only the points themselves are targets.
@@ -155,21 +188,25 @@
   opacity: 0;
   transition: opacity t.duration(fast) t.easing(out);
 
+  // `:focus`, not only `:focus-visible`: a tap focuses the point without a visible-focus match,
+  // and on a phone the tap is the only way to ask for a reading.
   .hit:hover > &,
-  .hit:focus-visible > & {
+  .hit:focus > & {
     visibility: visible;
     opacity: 1;
   }
 
   // A point at the edge of the plot opens its readout inward, so it never leaves the box.
+  // Anchored at the point's CENTRE, not the hit's edge: an outermost point sits `pad` inside the
+  // plot, and the hit box around it reaches past the plot's edge, so a readout from the box's edge
+  // started outside the plot (measured at 390px: 4px).
   .hit[data-edge='start'] > & {
-    inset-inline-start: 0;
     justify-content: flex-start;
   }
 
   .hit[data-edge='end'] > & {
     inset-inline-start: auto;
-    inset-inline-end: 0;
+    inset-inline-end: 50%;
     justify-content: flex-end;
   }
 }

package/src/components/ChartFrame.tsx

@@ -5,9 +5,15 @@
 
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
+import type { Accessor } from '../theme/solid-adapter';
+import { solid } from '../theme/solid-adapter';
 import styles from './ChartFrame.module.scss';
 import type { ChartTable, SeriesStyle } from './chart-frame-view';
-import { markerPath } from './chart-frame-view';
+import { cssPercent, markerPath } from './chart-frame-view';
+import type { ReferenceLine } from './chart-reference-view';
+import { keyedRows } from './data-table-rows';
+import { thunk } from './thunk';
+import type { Tone } from './variants';
 
 export interface ChartLegendItem {
   /** The series' name, already translated. */
@@ -22,6 +28,8 @@ export interface ChartLegendItem {
 
 /** One focusable point over the plot: where it sits, and what it reads. */
 export interface ChartHit {
+  /** Stable across ticks (`hitIds`): the node, and the focus on it, follow the id. */
+  readonly id: string;
   /** CSS percentages of the plot box (`cssPercent`). */
   readonly x: string;
   readonly y: string;
@@ -112,10 +120,16 @@ function chartTableNode(table: ChartTable): JSX.Element {
   );
 }
 
-/** A legend key for a line series: its dash, its marker, its colour slot. */
-export function seriesSwatch(style: SeriesStyle): JSX.Element {
+/** A legend key for a line series: its dash, its marker, its colour slot — or its tone. */
+export function seriesSwatch(style: SeriesStyle, tone?: Tone | undefined): JSX.Element {
   return (
-    <svg class={styles['key']} viewBox="0 0 24 12" data-series={style.slot} aria-hidden="true">
+    <svg
+      class={styles['key']}
+      viewBox="0 0 24 12"
+      data-series={style.slot}
+      data-tone={tone}
+      aria-hidden="true"
+    >
       <path class={styles['keyLine']} d="M1,6 L23,6" stroke-dasharray={style.dash} />
       <path class={styles['keyMarker']} d={markerPath(style.marker, 12, 6, 4)} />
     </svg>
@@ -124,32 +138,74 @@ export function seriesSwatch(style: SeriesStyle): JSX.Element {
 
 /**
  * The keyboard layer: one focusable point per datum, over the plot, each reading its own value on
- * `:hover` and `:focus-visible` — CSS only, so a chart that asks for it still ships no JS. DOM
- * order is the tab order, and the caller passes them in reading order.
+ * `:hover`, focus and a tap — CSS only, so a chart that asks for it still ships no JS. DOM order is
+ * the tab order, and the caller passes them in reading order.
+ *
+ * KEYED by `ChartHit.id` (`data-table-rows.ts`'s rule): a live tick that moves a point moves its
+ * node, so a focused point keeps focus and its readout. Rebuilt per tick, focus fell to `<body>`.
  */
-export function chartHits(hits: readonly ChartHit[]): JSX.Element {
+export function ChartHits(props: { hits: readonly ChartHit[] }): JSX.Element {
+  const nodes = keyedRows<ChartHit, JSX.Element>(solid(), (hit) => hit.id, hitNode);
+  return <div class={styles['hits']}>{thunk(() => nodes(props.hits))}</div>;
+}
+
+function hitNode(hit: Accessor<ChartHit>): JSX.Element {
   return (
-    <div class={styles['hits']}>
-      {hits.map((hit) => (
-        // A datum is an image of one value: `img` is the role that names it and nothing more.
-        <span
-          class={styles['hit']}
-          role="img"
-          tabindex={0}
-          aria-label={hit.label}
-          data-hit="true"
-          data-edge={hit.edge}
-          style={{ '--x': hit.x, '--y': hit.y }}
-        >
-          {/* A zero-width anchor that centres the bubble over the point with flex, not a
-              percentage translate: that one lands a whole width off under `dir="rtl"`. */}
-          <span class={styles['readout']} aria-hidden="true">
-            <span class={styles['bubble']} data-readout="true">
-              {hit.label}
-            </span>
-          </span>
+    // A datum is an image of one value: `img` is the role that names it and nothing more.
+    <span
+      class={styles['hit']}
+      role="img"
+      tabindex={0}
+      aria-label={hit().label}
+      data-hit={hit().id}
+      data-edge={hit().edge}
+      style={{ '--x': hit().x, '--y': hit().y }}
+    >
+      {/* A zero-width anchor that centres the bubble over the point with flex, not a
+          percentage translate: that one lands a whole width off under `dir="rtl"`. */}
+      <span class={styles['readout']} aria-hidden="true">
+        <span class={styles['bubble']} data-readout="true">
+          {hit().label}
         </span>
-      ))}
-    </div>
+      </span>
+    </span>
   );
 }
+
+/** Reference rules inside a chart's svg: dashed in every tone, so a rule never reads as a series. */
+export function ReferenceRules(props: {
+  lines: readonly ReferenceLine[];
+  width: number;
+}): JSX.Element {
+  return props.lines.map((line) => (
+    <line
+      class={styles['reference']}
+      data-reference="true"
+      data-tone={line.tone}
+      x1={0}
+      x2={props.width}
+      y1={line.y}
+      y2={line.y}
+    />
+  ));
+}
+
+/**
+ * Each rule's label as HTML over the plot's inline end — text in a viewBox scales to a speck — and
+ * NOT hidden: "Target 120" is a fact the picture states and the table has no row for.
+ */
+export function ReferenceLabels(props: {
+  lines: readonly ReferenceLine[];
+  height: number;
+  format: (value: number) => string;
+}): JSX.Element {
+  return props.lines.map((line) => (
+    <span
+      class={styles['referenceLabel']}
+      data-tone={line.tone}
+      style={{ '--y': cssPercent(line.y, props.height) }}
+    >
+      {`${line.label} ${props.format(line.value)}`}
+    </span>
+  ));
+}

package/src/components/CodeBlock.module.scss

@@ -0,0 +1,101 @@
+@use '../tokens' as t;
+
+// The code surface is `bg-soft`; every run colour is a role measured AA on it
+// (`contrast-pairs.ts`, "a code token on the code surface"), so a theme recolours code for free.
+.block {
+  position: relative;
+  border: t.stroke(hairline) solid t.role('line');
+  border-radius: t.radius(md);
+  background: t.role('bg-soft');
+}
+
+.bar {
+  @include t.row(t.space(1), center, flex-end);
+  padding-block: t.space(1);
+  padding-inline: t.space(2);
+  border-block-end: t.stroke(hairline) solid t.role('line');
+}
+
+// Wrap and copy need script; without it the text is still there and selectable.
+.block:not([data-enhanced='true']) .bar {
+  display: none;
+}
+
+.toggle {
+  @include t.focus-ring;
+  border: 0;
+  border-radius: t.radius(sm);
+  background: transparent;
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+  cursor: pointer;
+  min-block-size: t.touch(target);
+
+  &[aria-pressed='true'] {
+    color: t.role('accent');
+  }
+}
+
+.pre {
+  @include t.focus-ring;
+  margin: 0;
+  padding: t.space(3);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: t.text(sm);
+  line-height: t.leading(normal);
+  color: t.role('fg');
+  text-align: start;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.block[data-wrap='true'] .pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.tok-plain {
+  color: inherit;
+}
+.tok-keyword {
+  color: t.role('accent-strong');
+}
+.tok-string {
+  color: t.role('success');
+}
+.tok-number {
+  color: t.role('warning');
+}
+.tok-comment {
+  color: t.role('fg-muted');
+  font-style: italic;
+}
+.tok-type {
+  color: t.role('info');
+}
+.tok-function {
+  color: t.role('fg-strong');
+}
+.tok-property {
+  color: t.role('info');
+}
+.tok-tag {
+  color: t.role('danger');
+}
+.tok-attribute {
+  color: t.role('warning');
+}
+.tok-operator,
+.tok-punctuation {
+  color: t.role('fg');
+}
+.tok-inserted {
+  color: t.role('success');
+}
+.tok-deleted {
+  color: t.role('danger');
+}
+.tok-meta {
+  color: t.role('fg-muted');
+}