@ultimat3/ui 22.15.0 → 24.0.0

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'] {
@@ -25,8 +25,10 @@
     background: t.role('bg-soft');
   }
 
+  // Dimmed directly: `@include t.disabled` appends `:disabled`, which a `<label>` carrying a data
+  // flag can never be, so the rule it compiled to matched nothing (`disabled-dim.test.ts`).
   &[data-disabled='true'] {
-    @include t.disabled;
+    opacity: 0.55;
     background: t.role('bg-soft');
     cursor: not-allowed;
   }

package/src/components/Dropzone.tsx

@@ -12,7 +12,7 @@ import { useUi } from '../theme/context';
 import { solid } from '../theme/solid-adapter';
 import styles from './Dropzone.module.scss';
 import type { FileSelection } from './file-input-view';
-import { adoptDroppedFiles, progressPercent, selectFiles } from './file-input-view';
+import { adoptAcceptedFiles, progressPercent, selectFiles } from './file-input-view';
 
 export interface DropzoneProps {
   /** Already-translated instruction. Required — it is the control's accessible name. */
@@ -49,8 +49,12 @@ export function Dropzone(props: DropzoneProps): JSX.Element {
   const inputId = (): string => props.id ?? fallbackId;
   const percent = (): number => progressPercent(props.progress ?? 0);
 
-  const offer = (files: FileList | null | undefined): void => {
-    props.onSelect(selectFiles([...(files ?? [])], props));
+  // The input first, then the callback: a drop that only reaches `onSelect` leaves the real
+  // control empty, and a refused file left in it is posted by the form anyway.
+  const offer = (files: FileList | null | undefined, origin: 'drop' | 'pick'): void => {
+    const selection = selectFiles([...(files ?? [])], props);
+    adoptAcceptedFiles(input, files, selection, origin);
+    props.onSelect(selection);
   };
 
   // `dragover` must be cancelled on every tick or the browser refuses the drop and navigates to
@@ -74,10 +78,7 @@ export function Dropzone(props: DropzoneProps): JSX.Element {
         event.preventDefault();
         setOver(false);
         if (props.disabled === true) return;
-        // The input first, then the callback: a drop that only reaches `onSelect` leaves the real
-        // control empty, and the form the label sits in submits nothing.
-        adoptDroppedFiles(input, event.dataTransfer?.files);
-        offer(event.dataTransfer?.files);
+        offer(event.dataTransfer?.files, 'drop');
       }}
     >
       <span class={styles['label']}>{props.label}</span>
@@ -96,7 +97,7 @@ export function Dropzone(props: DropzoneProps): JSX.Element {
         disabled={props.disabled === true}
         aria-describedby={props['aria-describedby']}
         aria-invalid={ariaBool(props['aria-invalid'])}
-        onChange={(event) => offer(event.currentTarget.files)}
+        onChange={(event) => offer(event.currentTarget.files, 'pick')}
       />
       {props.progress === undefined ? null : (
         <span

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;
   }
 
@@ -51,8 +51,10 @@
     border-color: t.role('accent');
   }
 
+  // Dimmed directly: a pseudo-element is never itself `:disabled`, so `@include t.disabled` here
+  // compiled to a selector nothing matches (`disabled-dim.test.ts`).
   &:disabled::file-selector-button {
-    @include t.disabled;
+    opacity: 0.55;
     cursor: not-allowed;
   }
 }

package/src/components/FileInput.tsx

@@ -10,7 +10,7 @@ import { UI_KEYS } from '../i18n-keys';
 import { useUi } from '../theme/context';
 import styles from './FileInput.module.scss';
 import type { FileSelection } from './file-input-view';
-import { progressPercent, selectFiles } from './file-input-view';
+import { adoptAcceptedFiles, progressPercent, selectFiles } from './file-input-view';
 import type { Size } from './variants';
 
 export interface FileInputProps {
@@ -61,7 +61,11 @@ export function FileInput(props: FileInputProps): JSX.Element {
         aria-invalid={ariaBool(props['aria-invalid'])}
         onBlur={props.onBlur}
         onChange={(event) => {
-          props.onSelect?.(selectFiles([...(event.currentTarget.files ?? [])], props));
+          const selection = selectFiles([...(event.currentTarget.files ?? [])], props);
+          // `accept` only steers the picker; "All files" gets past it, and the form would post
+          // what this control just refused.
+          adoptAcceptedFiles(event.currentTarget, event.currentTarget.files, selection, 'pick');
+          props.onSelect?.(selection);
         }}
       />
       {props.progress === undefined ? null : (

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}

package/src/components/Meter.tsx

@@ -9,7 +9,7 @@
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import styles from './Meter.module.scss';
-import { meterShare, meterWidth } from './meter-view';
+import { meterAria, meterShare, meterWidth } from './meter-view';
 import type { Tone } from './variants';
 
 export interface MeterProps {
@@ -49,8 +49,8 @@ export function Meter(props: MeterProps): JSX.Element {
       role="meter"
       aria-label={props.label}
       aria-valuemin={0}
-      aria-valuemax={props.max}
-      aria-valuenow={props.value}
+      aria-valuemax={meterAria(props.value, props.max).max}
+      aria-valuenow={meterAria(props.value, props.max).now}
     >
       {bars()}
     </svg>

package/src/components/Pagination.tsx

@@ -1,32 +1,63 @@
 // Cursor-first pagination — the only shape a Postgres-backed list should use.
 // Numbered mode exists for prerendered archives where the total is known.
+// One mode per use: callbacks (`onCursor` / `onPage`) for an island, or `hrefFor` for a
+// server-rendered list — anchors the browser follows, with no script on the page.
 
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import { UI_KEYS } from '../i18n-keys';
 import { useUi } from '../theme/context';
 import { Button } from './Button';
+import { Link } from './Link';
 import styles from './Pagination.module.scss';
 
-export interface PaginationProps {
+type PageDirection = 'next' | 'prev';
+
+interface PaginationBaseProps {
   /** Opaque cursor for the following page; absent disables "next". */
   nextCursor?: string | undefined;
   prevCursor?: string | undefined;
+  /** Already-translated; falls back to the ui.* catalog keys. */
+  labelPrevious?: string | undefined;
+  labelNext?: string | undefined;
+  class?: string | undefined;
+}
+
+/** Callback mode: the page is an island and pages itself. */
+export interface PaginationCallbackProps extends PaginationBaseProps {
+  /** Callback mode. Never beside `hrefFor` — the type refuses the pair. */
   onCursor?: ((cursor: string, direction: 'next' | 'prev') => void) | undefined;
   /** Numbered mode: 1-based page and total. Ignored when cursors are present. */
   page?: number | undefined;
   totalPages?: number | undefined;
   onPage?: ((page: number) => void) | undefined;
-  /** Already-translated; falls back to the ui.* catalog keys. */
-  labelPrevious?: string | undefined;
-  labelNext?: string | undefined;
-  class?: string | undefined;
+  hrefFor?: undefined;
 }
 
+/** Link mode: each cursor is a URL, so the pager works with scripting off. */
+export interface PaginationLinkProps extends PaginationBaseProps {
+  /**
+   * Link mode: the URL of the page a cursor names. Renders `<a rel="next|prev">` and attaches no
+   * handler, so it needs no island. Cursor paging only — never beside `onCursor`, `onPage`,
+   * `page` or `totalPages`.
+   */
+  hrefFor: (cursor: string, direction: 'next' | 'prev') => string;
+  onCursor?: undefined;
+  page?: undefined;
+  totalPages?: undefined;
+  onPage?: undefined;
+}
+
+export type PaginationProps = PaginationCallbackProps | PaginationLinkProps;
+
 export function Pagination(props: PaginationProps): JSX.Element {
   const ui = useUi();
-  const previous = (): string => props.labelPrevious ?? ui.t(UI_KEYS.previous);
-  const next = (): string => props.labelNext ?? ui.t(UI_KEYS.next);
+  const label = (direction: PageDirection): string =>
+    direction === 'prev'
+      ? (props.labelPrevious ?? ui.t(UI_KEYS.previous))
+      : (props.labelNext ?? ui.t(UI_KEYS.next));
+  const cursor = (direction: PageDirection): string | undefined =>
+    direction === 'prev' ? props.prevCursor : props.nextCursor;
   // A cursor present means cursor mode, exactly as `page`'s own doc says. The inverted form —
   // "cursor mode when a number is MISSING" — silently dropped the cursor and paged by number the
   // moment a caller passed both, which is the shape a list that knows its total naturally has.
@@ -36,23 +67,62 @@ export function Pagination(props: PaginationProps): JSX.Element {
     props.page === undefined ||
     props.totalPages === undefined;
 
-  return (
-    <nav class={cx(styles['pagination'], props.class)} aria-label={ui.t(UI_KEYS.page)}>
+  const exhausted = (direction: PageDirection): boolean => {
+    if (cursorMode()) return cursor(direction) === undefined;
+    return direction === 'prev'
+      ? (props.page ?? 1) <= 1
+      : (props.page ?? 1) >= (props.totalPages ?? 1);
+  };
+
+  const go = (direction: PageDirection): void => {
+    const to = cursor(direction);
+    if (cursorMode()) {
+      if (to !== undefined) props.onCursor?.(to, direction);
+    } else if (direction === 'prev') {
+      props.onPage?.(Math.max(1, (props.page ?? 1) - 1));
+    } else {
+      props.onPage?.(Math.min(props.totalPages ?? 1, (props.page ?? 1) + 1));
+    }
+  };
+
+  /**
+   * One side of the pager. In link mode a side WITH a cursor is an anchor and a side without one
+   * is the same disabled button callback mode shows: an anchor with nowhere to go is a dead
+   * control that still takes a tab stop, and dropping the side would move the other one between
+   * the first page and the second.
+   */
+  const side = (direction: PageDirection): JSX.Element => {
+    const to = cursor(direction);
+    if (props.hrefFor !== undefined && to !== undefined) {
+      return (
+        <Link
+          appearance="button"
+          variant="secondary"
+          size="sm"
+          tone="neutral"
+          rel={direction}
+          href={props.hrefFor(to, direction)}
+        >
+          {label(direction)}
+        </Link>
+      );
+    }
+    return (
       <Button
         variant="secondary"
         size="sm"
         tone="neutral"
-        disabled={cursorMode() ? props.prevCursor === undefined : (props.page ?? 1) <= 1}
-        onClick={() => {
-          if (cursorMode()) {
-            if (props.prevCursor !== undefined) props.onCursor?.(props.prevCursor, 'prev');
-          } else {
-            props.onPage?.(Math.max(1, (props.page ?? 1) - 1));
-          }
-        }}
+        disabled={exhausted(direction)}
+        onClick={props.hrefFor === undefined ? () => go(direction) : undefined}
       >
-        {previous()}
+        {label(direction)}
       </Button>
+    );
+  };
+
+  return (
+    <nav class={cx(styles['pagination'], props.class)} aria-label={ui.t(UI_KEYS.page)}>
+      {side('prev')}
 
       {cursorMode() ? null : (
         <span class={styles['status']} aria-live="polite">
@@ -60,25 +130,7 @@ export function Pagination(props: PaginationProps): JSX.Element {
         </span>
       )}
 
-      <Button
-        variant="secondary"
-        size="sm"
-        tone="neutral"
-        disabled={
-          cursorMode()
-            ? props.nextCursor === undefined
-            : (props.page ?? 1) >= (props.totalPages ?? 1)
-        }
-        onClick={() => {
-          if (cursorMode()) {
-            if (props.nextCursor !== undefined) props.onCursor?.(props.nextCursor, 'next');
-          } else {
-            props.onPage?.(Math.min(props.totalPages ?? 1, (props.page ?? 1) + 1));
-          }
-        }}
-      >
-        {next()}
-      </Button>
+      {side('next')}
     </nav>
   );
 }

package/src/components/Popover.module.scss

@@ -33,27 +33,24 @@
   inset-block-start: 0;
 }
 
-.align-start {
-  inset-inline-start: 0;
-}
-
-.align-end {
-  inset-inline-end: 0;
-}
-
-.align-center {
-  inset-inline-start: 50%;
-  translate: -50% 0;
-}
+// Alignment is along the anchor's inline edge, so it exists only for the block placements. An
+// inline placement owns both inline insets itself; an align rule that reached it (and the reset
+// that used to undo one) wiped the placement's own inset and dropped the panel over the anchor.
+.placement-block-end,
+.placement-block-start {
+  &.align-start {
+    inset-inline-start: 0;
+  }
 
-// Inline placements own their own inline axis; alignment must not fight them.
-.placement-inline-end,
-.placement-inline-start {
-  &.align-start,
-  &.align-center,
   &.align-end {
-    inset-inline-start: auto;
-    inset-inline-end: auto;
-    translate: none;
+    inset-inline-end: 0;
+  }
+
+  // Auto margins inside an inset band far wider than any panel: centred in either direction. A 50%
+  // logical inset with a -50% physical translate is a whole width off under `dir="rtl"`.
+  &.align-center {
+    inset-inline: -100vw;
+    margin-inline: auto;
+    inline-size: fit-content;
   }
 }

package/src/components/Popover.tsx

@@ -1,6 +1,6 @@
 // Non-modal anchored panel. Positioning is CSS-only (a relatively positioned
-// anchor plus logical insets), so there is no measure/reflow loop and the panel
-// flips sides automatically under `dir="rtl"`.
+// anchor plus logical insets and auto-margin centring), so there is no measure/reflow
+// loop and the panel mirrors under `dir="rtl"` — `rtl-sheets.test.ts` holds that.
 
 import type { JSX } from 'solid-js';
 import { createFocusTrap, useId } from '../a11y';
@@ -13,11 +13,14 @@ export type Placement = 'block-end' | 'block-start' | 'inline-end' | 'inline-sta
 export interface PopoverProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  /** The anchor. Wire its onClick to `onOpenChange` in the caller. */
+  /**
+   * The anchor. Wire its onClick to `onOpenChange` in the caller. `aria-controls` is present only
+   * while the panel is mounted: an IDREF to an element not in the document names nothing.
+   */
   trigger: (control: {
     id: string;
     'aria-expanded': boolean;
-    'aria-controls': string;
+    'aria-controls': string | undefined;
   }) => JSX.Element;
   children: JSX.Element;
   /** Already-translated accessible name for the panel. */
@@ -63,7 +66,11 @@ export function Popover(props: PopoverProps): JSX.Element {
         root = el;
       }}
     >
-      {props.trigger({ id: triggerId, 'aria-expanded': props.open, 'aria-controls': panelId })}
+      {props.trigger({
+        id: triggerId,
+        'aria-expanded': props.open,
+        'aria-controls': props.open ? panelId : undefined,
+      })}
       {props.open ? (
         <div
           ref={(el: HTMLDivElement) => {

package/src/components/Radio.module.scss

@@ -67,8 +67,8 @@
 }
 
 .input:focus-visible + .dot {
-  outline: 2px solid t.role('accent');
-  outline-offset: 2px;
+  outline: t.stroke(thick) solid t.role('accent');
+  outline-offset: t.stroke(thick);
 }
 
 .text {

package/src/components/Select.module.scss

@@ -30,9 +30,9 @@
   inset-inline-end: t.space(3);
   inline-size: 0.4rem;
   block-size: 0.4rem;
-  border-inline-end: 2px solid t.role('fg-muted');
-  border-block-end: 2px solid t.role('fg-muted');
-  transform: translateY(-2px) rotate(45deg);
+  border-inline-end: t.stroke(thick) solid t.role('fg-muted');
+  border-block-end: t.stroke(thick) solid t.role('fg-muted');
+  transform: translateY(t.rem(-2px)) rotate(45deg);
   pointer-events: none;
 }
 

package/src/components/Skeleton.module.scss

@@ -24,7 +24,7 @@
       t.role('bg-soft') 63%
     )
     0 0 / 200% 100%;
-  animation: ultimate-shimmer 1.4s linear infinite;
+  animation: ultimate-shimmer calc(#{t.duration(slower)} * 2) linear infinite;
 }
 
 .shape-text {

package/src/components/Spinner.module.scss

@@ -8,10 +8,10 @@
 
 .spinner {
   display: inline-block;
-  border: 2px solid t.role('line');
+  border: t.stroke(thick) solid t.role('line');
   border-block-start-color: t.role('accent');
   border-radius: t.radius(full);
-  animation: ultimate-spin 700ms linear infinite;
+  animation: ultimate-spin t.duration(slower) linear infinite;
   // Reduced motion is handled globally in reset.scss; the ring still reads as
   // a distinct shape when the animation is neutralised.
 }
@@ -29,5 +29,5 @@
 .size-lg {
   inline-size: 2rem;
   block-size: 2rem;
-  border-width: 3px;
+  border-width: t.stroke(heavy);
 }

package/src/components/Switch.module.scss

@@ -57,8 +57,8 @@
 }
 
 .input:focus-visible + .track {
-  outline: 2px solid t.role('accent');
-  outline-offset: 2px;
+  outline: t.stroke(thick) solid t.role('accent');
+  outline-offset: t.stroke(thick);
 }
 
 .text {

package/src/components/Table.module.scss

@@ -10,8 +10,8 @@
   background: t.role('surface');
 
   &:focus-visible {
-    outline: 2px solid t.role('accent');
-    outline-offset: -2px;
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: calc(-1 * #{t.stroke(thick)});
   }
 }