@ultimat3/ui 23.0.0 → 25.0.0

package/src/components/ChartFrame.tsx

@@ -0,0 +1,155 @@
+// The frame every chart stands in: a `<figure>` named by its `<figcaption>`, the plot, a legend
+// that wraps under the plot on a narrow container and stands beside it on a wide one, and a
+// visually-hidden `<table>` of the same numbers — what a screen reader and a reader who cannot
+// tell the colours apart get instead of the picture. Server-rendered HTML: no island, no JS.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import styles from './ChartFrame.module.scss';
+import type { ChartTable, SeriesStyle } from './chart-frame-view';
+import { markerPath } from './chart-frame-view';
+
+export interface ChartLegendItem {
+  /** The series' name, already translated. */
+  readonly label: string;
+  /** A figure beside the name — a donut segment's value. Already formatted. */
+  readonly value?: string | undefined;
+  /** A second, quieter figure — the segment's share. Already formatted. */
+  readonly detail?: string | undefined;
+  /** The key: the same colour slot, dash and marker the plot draws this series with. */
+  readonly swatch: JSX.Element;
+}
+
+/** One focusable point over the plot: where it sits, and what it reads. */
+export interface ChartHit {
+  /** CSS percentages of the plot box (`cssPercent`). */
+  readonly x: string;
+  readonly y: string;
+  /** The accessible name AND the visible readout — one string, so the two never disagree. */
+  readonly label: string;
+  /** Which way the readout opens, so a point at the edge keeps its readout inside the box. */
+  readonly edge: 'start' | 'middle' | 'end';
+}
+
+export interface ChartFrameProps {
+  /** The chart's name, already translated: the `<figcaption>`, and the data table's caption. */
+  label: string;
+  /** The plot — the chart's own svg and HTML axis labels. */
+  children: JSX.Element;
+  /**
+   * Show the caption above the plot. Off by default: a chart usually sits under a Card's own
+   * heading, and the caption names the figure for assistive tech either way.
+   */
+  showCaption?: boolean | undefined;
+  /** One entry per series. Omitted or empty renders no legend. */
+  legend?: readonly ChartLegendItem[] | undefined;
+  /** The same data as rows, rendered visually hidden (`chartTable`). */
+  table?: ChartTable | undefined;
+  /** Lands on the root `<figure>`. */
+  class?: string | undefined;
+}
+
+export function ChartFrame(props: ChartFrameProps): JSX.Element {
+  const legend = (): readonly ChartLegendItem[] => props.legend ?? [];
+  return (
+    <figure class={cx(styles['frame'], props.class)}>
+      <figcaption class={props.showCaption === true ? styles['caption'] : styles['hidden']}>
+        {props.label}
+      </figcaption>
+      <div class={cx(styles['layout'], legend().length > 0 && styles['withLegend'])}>
+        <div class={styles['plot']}>{props.children}</div>
+        {legend().length === 0 ? null : (
+          <ul class={styles['legend']}>
+            {legend().map((item) => (
+              <li class={styles['item']}>
+                <span class={styles['swatch']} aria-hidden="true">
+                  {item.swatch}
+                </span>
+                <span class={styles['name']} data-legend="name">
+                  {item.label}
+                </span>
+                {item.value === undefined ? null : (
+                  <span class={styles['value']}>{item.value}</span>
+                )}
+                {item.detail === undefined ? null : (
+                  <span class={styles['detail']}>{item.detail}</span>
+                )}
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+      {props.table === undefined ? null : chartTableNode(props.table)}
+    </figure>
+  );
+}
+
+function chartTableNode(table: ChartTable): JSX.Element {
+  const [corner = '', ...heads] = table.head;
+  return (
+    <table class={styles['hidden']}>
+      <caption>{table.caption}</caption>
+      <thead>
+        <tr>
+          {/* An empty corner is a <td>: a header cell with no text names nothing. */}
+          {corner === '' ? <td /> : <th scope="col">{corner}</th>}
+          {heads.map((head) => (
+            <th scope="col">{head}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {table.rows.map((row) => (
+          <tr>
+            <th scope="row">{row.key}</th>
+            {row.cells.map((cell) => (
+              <td>{cell}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+/** A legend key for a line series: its dash, its marker, its colour slot. */
+export function seriesSwatch(style: SeriesStyle): JSX.Element {
+  return (
+    <svg class={styles['key']} viewBox="0 0 24 12" data-series={style.slot} 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>
+  );
+}
+
+/**
+ * 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.
+ */
+export function chartHits(hits: readonly 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>
+        </span>
+      ))}
+    </div>
+  );
+}

package/src/components/CommandPalette.module.scss

@@ -3,10 +3,14 @@
 .palette {
   position: fixed;
   inset-block-start: 12vh;
-  inset-inline-start: 50%;
+  // Centred by auto margins between two zero insets, never by a 50% inset and a -50% translate:
+  // the inset is logical and the translate physical, so under `dir="rtl"` that pair puts the
+  // palette a whole width off-centre (`rtl-sheets.test.ts`).
+  inset-inline: 0;
   inline-size: min(32rem, calc(100vw - #{t.space(8)}));
   max-block-size: 60vh;
-  margin: 0;
+  margin-block: 0;
+  margin-inline: auto;
   padding: 0;
   border: 1px solid t.role('line');
   border-radius: t.radius(lg);
@@ -20,8 +24,7 @@
   overflow: hidden;
   z-index: t.z(dialog);
 
-  // Transform-only translate keeps the 50% inline offset from fighting `margin-inline`.
-  transform: translateX(-50%) translateY(calc(-1 * #{t.space(1)})) scale(0.98);
+  transform: translateY(calc(-1 * #{t.space(1)})) scale(0.98);
   opacity: 0;
   visibility: hidden;
   transition:
@@ -30,7 +33,7 @@
     visibility t.duration(fast) t.easing(out);
 
   &[open] {
-    transform: translateX(-50%) translateY(0) scale(1);
+    transform: translateY(0) scale(1);
     opacity: 1;
     visibility: visible;
     transition-duration: t.duration(base);

package/src/components/Container.tsx

@@ -17,13 +17,50 @@ export interface ContainerProps {
 }
 
 export function Container(props: ContainerProps): JSX.Element {
-  const Tag = props.as ?? 'div';
-  return (
-    <Tag
-      class={cx(styles['container'], styles[`size-${props.size ?? 'lg'}`], props.class)}
-      style={{ '--container-gutter': `var(--space-${props.gutter ?? 4})` }}
-    >
-      {props.children}
-    </Tag>
-  );
+  const cls = (): string =>
+    cx(styles['container'], styles[`size-${props.size ?? 'lg'}`], props.class);
+  const style = (): JSX.CSSProperties => ({
+    '--container-gutter': `var(--space-${props.gutter ?? 4})`,
+  });
+
+  // One intrinsic per case, never `const Tag = props.as; <Tag>`: the island build compiles a
+  // capitalised tag to `createComponent(Tag)` and calls the string (#488, `intrinsic-root.test.ts`).
+  switch (props.as ?? 'div') {
+    case 'main':
+      return (
+        <main class={cls()} style={style()}>
+          {props.children}
+        </main>
+      );
+    case 'section':
+      return (
+        <section class={cls()} style={style()}>
+          {props.children}
+        </section>
+      );
+    case 'article':
+      return (
+        <article class={cls()} style={style()}>
+          {props.children}
+        </article>
+      );
+    case 'header':
+      return (
+        <header class={cls()} style={style()}>
+          {props.children}
+        </header>
+      );
+    case 'footer':
+      return (
+        <footer class={cls()} style={style()}>
+          {props.children}
+        </footer>
+      );
+    case 'div':
+      return (
+        <div class={cls()} style={style()}>
+          {props.children}
+        </div>
+      );
+  }
 }

package/src/components/DataTable.module.scss

@@ -1,9 +1,22 @@
+@use 'sass:map';
 @use '../tokens' as t;
 
+// The table's OWN width decides its layout, never the viewport's: the same table is a card list
+// in a sidebar and a full table in a wide main column. The rungs are the one breakpoint ladder,
+// read as container widths.
+$sm: map.get(t.$breakpoints, 'sm');
+$md: map.get(t.$breakpoints, 'md');
+$lg: map.get(t.$breakpoints, 'lg');
+
 .wrap {
+  @include t.container(datatable);
   display: flex;
   flex-direction: column;
   gap: t.space(3);
+  // Inline-size containment sizes the box without its content, so it must take its width from
+  // the parent: a shrink-to-fit container would otherwise collapse to nothing.
+  inline-size: 100%;
+  min-inline-size: 0;
 }
 
 // Numbers align to the trailing edge in both writing directions.
@@ -40,3 +53,180 @@
   opacity: 0.6;
   transition: opacity t.duration(fast) t.easing(out);
 }
+
+// --- What hides at which width -------------------------------------------------------------------
+// A lower-priority cell hides while the table is narrow, and the row's disclosure shows exactly
+// the entries whose cells are hidden: at every width each value is on screen once.
+
+.cell > [data-label],
+.more,
+.entry {
+  display: none;
+}
+
+@container datatable (width < #{$lg}) {
+  .wrap .cell[data-priority='3'],
+  .wrap .heading[data-priority='3'] {
+    display: none;
+  }
+
+  .wrap .more[data-more='lg'] {
+    display: table-cell;
+  }
+
+  .wrap .entry[data-priority='3'] {
+    display: grid;
+  }
+}
+
+@container datatable (width < #{$md}) {
+  .wrap .cell[data-priority],
+  .wrap .heading[data-priority] {
+    display: none;
+  }
+
+  .wrap .more {
+    display: table-cell;
+  }
+
+  .wrap .entry {
+    display: grid;
+  }
+}
+
+.disclosure {
+  white-space: normal;
+}
+
+.summary {
+  @include t.focus-ring;
+  border-radius: t.radius(sm);
+  color: t.role('accent');
+  cursor: pointer;
+}
+
+.entries {
+  display: grid;
+  gap: t.space(1);
+  margin: 0;
+  margin-block-start: t.space(2);
+}
+
+.entry {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+  gap: t.space(3);
+
+  :global(dt) {
+    color: t.role('fg-muted');
+  }
+
+  :global(dd) {
+    margin: 0;
+  }
+}
+
+// --- Cards ---------------------------------------------------------------------------------------
+// Below `sm` a row is a card and each cell a labelled line. Every element still carries its table
+// role (the markup declares them), because WebKit drops table semantics on a `display` change. The
+// header row stays in the accessibility tree — it is what names each cell — and shows only the
+// headers that are sort controls, as a row of chips above the cards.
+
+@container datatable (width < #{$sm}) {
+  .wrap[data-narrow='cards'] {
+    :global(table),
+    :global(caption),
+    .body {
+      display: block;
+    }
+
+    .head {
+      display: block;
+      border-block-end: 1px solid t.role('line');
+    }
+
+    .head:not([data-sortable]) {
+      @include t.visually-hidden;
+    }
+
+    .head :global(tr) {
+      display: flex;
+      flex-wrap: wrap;
+      gap: t.space(2);
+      padding-block: t.space(3);
+      padding-inline: t.space(4);
+    }
+
+    .heading {
+      display: block;
+      position: static;
+      padding: 0;
+      border: 0;
+      background: none;
+    }
+
+    .heading:not([data-sort-control]) {
+      @include t.visually-hidden;
+    }
+
+    .heading[data-sort-control] {
+      padding-block: t.space(1);
+      padding-inline: t.space(3);
+      border: 1px solid t.role('line');
+      border-radius: t.radius(pill);
+    }
+
+    .row {
+      display: grid;
+      gap: t.space(2);
+      padding-block: t.space(3);
+      padding-inline: t.space(4);
+      border-block-end: 1px solid t.role('line');
+    }
+
+    .body .row:last-child {
+      border-block-end: 0;
+    }
+
+    // `:first-child` matches the specificity the sticky-column rule pins it with, so a card is
+    // never a sticky cell.
+    .cell,
+    .cell:first-child {
+      display: grid;
+      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+      align-items: baseline;
+      gap: t.space(3);
+      position: static;
+      padding: 0;
+      border: 0;
+      background: none;
+      white-space: normal;
+      text-align: start;
+    }
+
+    .cell.numeric {
+      text-align: end;
+    }
+
+    .cell > [data-label] {
+      display: block;
+      text-align: start;
+      color: t.role('fg-muted');
+      font-size: t.text(xs);
+      font-weight: t.weight(medium);
+    }
+
+    // Every value is a line of the card already: the disclosure has nothing left to hold, and no
+    // priority hides anything.
+    .more {
+      display: none;
+    }
+
+    .cell[data-priority] {
+      display: grid;
+    }
+
+    .heading[data-priority] {
+      display: block;
+    }
+  }
+}