@ultimat3/ui 22.14.0 → 23.0.0

package/src/components/BarChart.tsx

@@ -1,4 +1,5 @@
-// A bar chart of one series — clicks per day, signups per week — as static SVG. No charting
+// A bar chart of one series — clicks per day, signups per week — or two stacked (done, and failed
+// on top), as static SVG. No charting
 // library: the framework's own docs use a sparkline pulling one in as the cautionary example, and
 // a route's JS budget counts raw minified bytes. `<rect>` bars cost nothing to hydrate, so the
 // server-rendered shell IS the chart. Geometry lives in `bar-chart-view.ts`.
@@ -7,7 +8,7 @@ import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import styles from './BarChart.module.scss';
 import type { ChartPoint } from './bar-chart-view';
-import { BAR_CHART, barRects, GRID_STEPS, gridY, maxOf } from './bar-chart-view';
+import { BAR_CHART, barRects, GRID_STEPS, gridY, maxOf, secondaryRects } from './bar-chart-view';
 
 export interface BarChartProps {
   /** The accessible name for the whole chart, already translated. */
@@ -16,11 +17,19 @@ export interface BarChartProps {
   points: readonly ChartPoint[];
   /** Draw the last bar at full strength — the eye lands where the live number is. Default on. */
   highlightLast?: boolean | undefined;
+  /**
+   * Names of the two series, already translated, read by each rect's `<title>`. Give them when a
+   * point carries `secondary`: a stacked bar with no name for its top is two numbers and no key.
+   */
+  seriesLabels?: { readonly primary: string; readonly secondary: string } | undefined;
   class?: string | undefined;
 }
 
 export function BarChart(props: BarChartProps): JSX.Element {
   const rects = (): readonly ReturnType<typeof barRects>[number][] => barRects(props.points);
+  const tops = (): ReturnType<typeof secondaryRects> => secondaryRects(props.points);
+  const named = (label: string | undefined, value: number): string =>
+    label === undefined ? String(value) : `${label} ${value}`;
   const lastIndex = (): number => props.points.length - 1;
   const first = (): ChartPoint | undefined => props.points[0];
   const last = (): ChartPoint | undefined => props.points.at(-1);
@@ -44,20 +53,37 @@ export function BarChart(props: BarChartProps): JSX.Element {
       {props.points.map((point, index) => {
         const rect = rects()[index];
         if (rect === undefined) return null;
+        const top = tops()[index] ?? null;
         return (
-          <rect
-            class={cx(styles['bar'], highlight() && index === lastIndex() && styles['last'])}
-            x={rect.x}
-            y={rect.y}
-            width={rect.width}
-            height={rect.height}
-            rx={2}
-            data-bar="true"
-          >
-            <title>
-              {point.key}: {point.value}
-            </title>
-          </rect>
+          <g>
+            <rect
+              class={cx(styles['bar'], highlight() && index === lastIndex() && styles['last'])}
+              x={rect.x}
+              y={rect.y}
+              width={rect.width}
+              height={rect.height}
+              rx={2}
+              data-bar="true"
+            >
+              <title>{`${point.key}: ${named(props.seriesLabels?.primary, point.value)}`}</title>
+            </rect>
+            {top === null ? null : (
+              <rect
+                class={cx(
+                  styles['secondary'],
+                  highlight() && index === lastIndex() && styles['last'],
+                )}
+                x={top.x}
+                y={top.y}
+                width={top.width}
+                height={top.height}
+                rx={2}
+                data-series="secondary"
+              >
+                <title>{`${point.key}: ${named(props.seriesLabels?.secondary, point.secondary ?? 0)}`}</title>
+              </rect>
+            )}
+          </g>
         );
       })}
       <text class={styles['axis']} x={BAR_CHART.width} y={BAR_CHART.top - 3} text-anchor="end">

package/src/components/Button.tsx

@@ -14,6 +14,7 @@ import type { JSX } from 'solid-js';
 import { ariaBool } from '../a11y';
 import { cx } from '../cx';
 import styles from './Button.module.scss';
+import { buttonClassKeys } from './button-classes';
 import { Spinner } from './Spinner';
 import type { ButtonVariant, Size, Tone } from './variants';
 
@@ -66,14 +67,8 @@ export function Button(props: ButtonProps): JSX.Element {
     <button
       id={props.id}
       type={props.type ?? 'button'}
-      class={cx(
-        styles['button'],
-        styles[`variant-${props.variant ?? 'primary'}`],
-        styles[`tone-${props.tone ?? 'accent'}`],
-        styles[`size-${props.size ?? 'md'}`],
-        props.fullWidth === true && styles['full'],
-        props.class,
-      )}
+      // The keys are `button-classes.ts`'s: `<Link appearance="button">` asks the same function.
+      class={cx(...buttonClassKeys(props).map((key) => styles[key]), props.class)}
       // Only the caller's explicit `disabled` reaches the attribute. `loading` is a state the user
       // is meant to read and wait out, not a control taken away from under them.
       disabled={props.disabled === true ? true : undefined}

package/src/components/Card.module.scss

@@ -17,7 +17,7 @@
 
   &:hover {
     border-color: t.role('accent', 0.4);
-    transform: translateY(-2px);
+    transform: translateY(t.rem(-2px));
     box-shadow: t.shadow(md);
   }
 

package/src/components/Checkbox.module.scss

@@ -34,8 +34,8 @@
     inset-block-start: 0.1rem;
     inline-size: 0.3rem;
     block-size: 0.55rem;
-    border-inline-end: 2px solid t.role('accent-fg');
-    border-block-end: 2px solid t.role('accent-fg');
+    border-inline-end: t.stroke(thick) solid t.role('accent-fg');
+    border-block-end: t.stroke(thick) solid t.role('accent-fg');
     transform: rotate(40deg) scale(0);
     transform-origin: center;
     content: '';
@@ -66,8 +66,8 @@
 }
 
 .input:focus-visible + .box {
-  outline: 2px solid t.role('accent');
-  outline-offset: 2px;
+  outline: t.stroke(thick) solid t.role('accent');
+  outline-offset: t.stroke(thick);
 }
 
 .input[aria-invalid='true'] + .box {

package/src/components/Checkbox.tsx

@@ -12,6 +12,11 @@ export interface CheckboxProps {
   id?: string | undefined;
   name?: string | undefined;
   value?: string | undefined;
+  /**
+   * The id of the `<form>` this box submits with, when it cannot sit inside it — a row checkbox in
+   * a table whose page already holds another form. The platform's own association, no script.
+   */
+  form?: string | undefined;
   checked?: boolean | undefined;
   /** Tri-state for "some children selected". The ONLY thing mirrored to `aria-checked`. */
   indeterminate?: boolean | undefined;
@@ -33,6 +38,7 @@ export function Checkbox(props: CheckboxProps): JSX.Element {
         id={props.id}
         name={props.name}
         value={props.value}
+        form={props.form}
         checked={props.checked === true}
         disabled={props.disabled === true}
         required={props.required === true}

package/src/components/CommandPalette.module.scss

@@ -21,7 +21,7 @@
   z-index: t.z(dialog);
 
   // Transform-only translate keeps the 50% inline offset from fighting `margin-inline`.
-  transform: translateX(-50%) translateY(-4px) scale(0.98);
+  transform: translateX(-50%) translateY(calc(-1 * #{t.space(1)})) scale(0.98);
   opacity: 0;
   visibility: hidden;
   transition:

package/src/components/DataTable.module.scss

@@ -20,6 +20,8 @@
   border-radius: t.radius(sm);
   color: inherit;
   font: inherit;
+  // The link mode renders this class on an anchor: a sort header reads as a header, not a link.
+  text-decoration: none;
   cursor: pointer;
 
   &:hover {

package/src/components/DataTable.tsx

@@ -33,13 +33,12 @@ export interface Column<Row> {
   width?: string | undefined;
 }
 
-export interface DataTableProps<Row> {
+interface DataTableBaseProps<Row> {
   caption: string;
   columns: readonly Column<Row>[];
   rows: readonly Row[];
   rowKey: (row: Row) => string;
   sort?: SortState | undefined;
-  onSortChange?: (sort: SortState | undefined) => void;
   loading?: boolean | undefined;
   /** An UltimateError (or anything shaped like one) from the query. */
   error?: unknown | undefined;
@@ -49,7 +48,6 @@ export interface DataTableProps<Row> {
   /** Opaque cursors from the query result; absent means no further page. */
   nextCursor?: string | undefined;
   prevCursor?: string | undefined;
-  onCursor?: ((cursor: string, direction: 'next' | 'prev') => void) | undefined;
   stickyHeader?: boolean | undefined;
   density?: 'comfortable' | 'compact' | undefined;
   /** Placeholder row count while loading. Match the usual page size. */
@@ -57,6 +55,31 @@ export interface DataTableProps<Row> {
   class?: string | undefined;
 }
 
+/** The pager and the sort headers call back: the table sits in an island. */
+export interface DataTableCallbackProps<Row> extends DataTableBaseProps<Row> {
+  /** Callback paging. Never beside `hrefFor` — the type refuses the pair. */
+  onCursor?: ((cursor: string, direction: 'next' | 'prev') => void) | undefined;
+  /** Callback sorting. Never beside `sortHrefFor` — the type refuses the pair. */
+  onSortChange?: ((sort: SortState | undefined) => void) | undefined;
+  hrefFor?: undefined;
+  sortHrefFor?: undefined;
+}
+
+/** The pager and the sort headers are anchors: a server-rendered table needs no script. */
+export interface DataTableLinkProps<Row> extends DataTableBaseProps<Row> {
+  /** Link paging: the URL of the page a cursor names, handed to `<Pagination hrefFor>`. */
+  hrefFor: (cursor: string, direction: 'next' | 'prev') => string;
+  /**
+   * Link sorting: the URL of the list under the NEXT sort state of a header's cycle (`undefined`
+   * is "unsorted"). Absent, a sortable header is plain text — never a button with no handler.
+   */
+  sortHrefFor?: ((sort: SortState | undefined) => string) | undefined;
+  onCursor?: undefined;
+  onSortChange?: undefined;
+}
+
+export type DataTableProps<Row> = DataTableCallbackProps<Row> | DataTableLinkProps<Row>;
+
 export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
   const ui = useUi();
 
@@ -131,6 +154,68 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
     );
   }
 
+  /** One mode per use, exactly as `Pagination` declares it — the table only hands it through. */
+  const pager = (): JSX.Element =>
+    props.hrefFor === undefined ? (
+      <Pagination
+        nextCursor={props.nextCursor}
+        prevCursor={props.prevCursor}
+        onCursor={props.onCursor}
+      />
+    ) : (
+      <Pagination
+        nextCursor={props.nextCursor}
+        prevCursor={props.prevCursor}
+        hrefFor={props.hrefFor}
+      />
+    );
+
+  const indicator = (key: string): JSX.Element => (
+    <span aria-hidden="true" class={styles['indicator']}>
+      {ariaSortFor(props.sort, key) === 'ascending'
+        ? '▲'
+        : ariaSortFor(props.sort, key) === 'descending'
+          ? '▼'
+          : '↕'}
+    </span>
+  );
+
+  /**
+   * One mode per table, as the pager has: an anchor at the next state's URL when the table is
+   * linked, a button that calls back when it is not. A linked table with no `sortHrefFor` gets the
+   * header text alone — a `<button>` on a page that never hydrates is a control that does nothing.
+   */
+  const sortControl = (column: Column<Row>): JSX.Element => {
+    if (column.sortable !== true) return column.header;
+    const label = `${column.header}: ${sortLabel(column.key)}`;
+    if (props.hrefFor !== undefined) {
+      const sortHrefFor = props.sortHrefFor;
+      if (sortHrefFor === undefined) return column.header;
+      return (
+        <a
+          class={styles['sortButton']}
+          aria-label={label}
+          href={sortHrefFor(nextSortState(props.sort, column.key))}
+        >
+          {column.header}
+          {indicator(column.key)}
+        </a>
+      );
+    }
+    const onSortChange = props.onSortChange;
+    return (
+      <button
+        type="button"
+        class={styles['sortButton']}
+        aria-label={label}
+        onClick={() => onSortChange?.(nextSortState(props.sort, column.key))}
+      >
+        {column.header}
+        {indicator(column.key)}
+      </button>
+    );
+  };
+
   return (
     <div class={cx(styles['wrap'], props.class)}>
       <Table
@@ -147,25 +232,7 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
                 aria-sort={ariaSortFor(props.sort, column.key)}
                 class={column.numeric === true ? styles['numeric'] : undefined}
               >
-                {column.sortable === true ? (
-                  <button
-                    type="button"
-                    class={styles['sortButton']}
-                    aria-label={`${column.header}: ${sortLabel(column.key)}`}
-                    onClick={() => props.onSortChange?.(nextSortState(props.sort, column.key))}
-                  >
-                    {column.header}
-                    <span aria-hidden="true" class={styles['indicator']}>
-                      {ariaSortFor(props.sort, column.key) === 'ascending'
-                        ? '▲'
-                        : ariaSortFor(props.sort, column.key) === 'descending'
-                          ? '▼'
-                          : '↕'}
-                    </span>
-                  </button>
-                ) : (
-                  column.header
-                )}
+                {sortControl(column)}
               </th>
             ))}
           </tr>
@@ -177,13 +244,7 @@ export function DataTable<Row>(props: DataTableProps<Row>): JSX.Element {
           {body()}
         </tbody>
       </Table>
-      {props.nextCursor === undefined && props.prevCursor === undefined ? null : (
-        <Pagination
-          nextCursor={props.nextCursor}
-          prevCursor={props.prevCursor}
-          onCursor={props.onCursor}
-        />
-      )}
+      {props.nextCursor === undefined && props.prevCursor === undefined ? null : pager()}
     </div>
   );
 }

package/src/components/Dialog.module.scss

@@ -3,7 +3,7 @@
 @keyframes ultimate-dialog-in {
   from {
     opacity: 0;
-    translate: 0 8px;
+    translate: 0 t.space(2);
   }
 }
 
@@ -22,7 +22,7 @@
     animation: ultimate-dialog-in t.duration(base) t.easing(out);
   }
 
-  @include t.scrim-backdrop($blur: 2px);
+  @include t.scrim-backdrop($blur: t.rem(2px));
 }
 
 .size-sm {

package/src/components/Dropzone.module.scss

@@ -4,7 +4,7 @@
   @include t.column(t.space(2), center);
   @include t.transition(background-color, border-color);
   position: relative;
-  border: 2px dashed t.role('line');
+  border: t.stroke(thick) dashed t.role('line');
   border-radius: t.radius(lg);
   background: t.role('surface');
   padding-block: t.space(8);
@@ -15,8 +15,8 @@
   // The hidden input keeps the focus, so the ring has to be drawn on the surface around it.
   &:focus-within {
     border-color: t.role('accent');
-    outline: 2px solid t.role('accent');
-    outline-offset: 2px;
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: t.stroke(thick);
   }
 
   &[data-over='true'] {

package/src/components/FileInput.module.scss

@@ -8,7 +8,7 @@
 
   &:focus-within {
     border-color: t.role('accent');
-    outline: 2px solid t.role('accent');
+    outline: t.stroke(thick) solid t.role('accent');
     outline-offset: 1px;
   }
 

package/src/components/Form.module.scss

@@ -7,8 +7,8 @@
 }
 
 .summary:focus {
-  outline: 2px solid t.role('danger');
-  outline-offset: 4px;
+  outline: t.stroke(thick) solid t.role('danger');
+  outline-offset: t.space(1);
 }
 
 .actions {

package/src/components/Input.module.scss

@@ -8,7 +8,7 @@
 
   &:focus-within {
     border-color: t.role('accent');
-    outline: 2px solid t.role('accent');
+    outline: t.stroke(thick) solid t.role('accent');
     outline-offset: 1px;
   }
 

package/src/components/Link.tsx

@@ -1,25 +1,62 @@
 // Anchor primitive. External links get `rel` hardening and a translated
 // "opens in a new tab" hint automatically — never a bare `target="_blank"`.
+// `appearance="button"` is Button's look on the same anchor: a control that navigates is a link.
 
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
+import buttonStyles from './Button.module.scss';
 import styles from './Link.module.scss';
-import { linkTarget } from './link-target';
+import { linkClasses } from './link-classes';
+import { linkRel, linkTarget } from './link-target';
+import type { ButtonVariant, Size, Tone } from './variants';
 
-export interface LinkProps {
+interface LinkBaseProps {
   href: string;
   children: JSX.Element;
   external?: boolean | undefined;
   /** Announced suffix for external links; supply via `t()` at the call site. */
   externalHint?: string | undefined;
-  underline?: 'always' | 'hover' | 'none' | undefined;
-  tone?: 'accent' | 'inherit' | undefined;
+  /** A pager's direction. Joins the hardening an external link always carries, never replaces it. */
+  rel?: 'next' | 'prev' | undefined;
   id?: string | undefined;
   class?: string | undefined;
   'aria-current'?: 'page' | 'step' | 'true' | false | undefined;
   onClick?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent> | undefined;
 }
 
+/** Inline text — the default. */
+export interface TextLinkProps extends LinkBaseProps {
+  /** `button` wears Button's classes on the same `<a>`; the two looks take different props. */
+  appearance?: 'link' | undefined;
+  underline?: 'always' | 'hover' | 'none' | undefined;
+  /** A text link: `accent` or `inherit`. A button-link: any `Tone`. */
+  tone?: 'accent' | 'inherit' | undefined;
+  variant?: undefined;
+  size?: undefined;
+  fullWidth?: undefined;
+  iconStart?: undefined;
+  iconEnd?: undefined;
+}
+
+/** Button's look on an anchor. There is no `href` on `<Button>`: this is that control. */
+export interface ButtonLinkProps extends LinkBaseProps {
+  appearance: 'button';
+  /** `appearance="button"` only. */
+  variant?: ButtonVariant | undefined;
+  tone?: Tone | undefined;
+  /** `appearance="button"` only. */
+  size?: Size | undefined;
+  /** `appearance="button"` only. */
+  fullWidth?: boolean | undefined;
+  /** `appearance="button"` only. */
+  iconStart?: JSX.Element | undefined;
+  /** `appearance="button"` only. */
+  iconEnd?: JSX.Element | undefined;
+  underline?: undefined;
+}
+
+export type LinkProps = TextLinkProps | ButtonLinkProps;
+
 export function Link(props: LinkProps): JSX.Element {
   // Both the href and the external verdict come from ONE decision (`link-target.ts`): a
   // `javascript:` href used to be emitted verbatim AND classified internal, so it lost the
@@ -28,22 +65,37 @@ export function Link(props: LinkProps): JSX.Element {
     linkTarget(props.href, props.external);
   const isExternal = (): boolean => target().external;
 
+  /**
+   * A button-link wraps its label exactly as `<Button>` does — the text truncates inside the
+   * padding, the icons sit outside the truncated run — because the same classes on a different
+   * child structure is a different button.
+   */
+  const content = (): JSX.Element =>
+    props.appearance === 'button'
+      ? [
+          props.iconStart,
+          <span class={buttonStyles['label']}>{props.children}</span>,
+          props.iconEnd,
+        ]
+      : props.children;
+
+  const classes = (): string => {
+    const look = linkClasses(props);
+    const sheet = look.sheet === 'button' ? buttonStyles : styles;
+    return cx(...look.keys.map((key) => sheet[key]), props.class);
+  };
+
   return (
     <a
       id={props.id}
       href={target().href}
       target={isExternal() ? '_blank' : undefined}
-      rel={isExternal() ? 'noopener noreferrer' : undefined}
+      rel={linkRel(isExternal(), props.rel)}
       aria-current={props['aria-current']}
-      class={cx(
-        styles['link'],
-        styles[`underline-${props.underline ?? 'hover'}`],
-        styles[`tone-${props.tone ?? 'accent'}`],
-        props.class,
-      )}
+      class={classes()}
       onClick={props.onClick}
     >
-      {props.children}
+      {content()}
       {isExternal() && props.externalHint !== undefined ? (
         <span class={styles['hint']}>{props.externalHint}</span>
       ) : null}