@ultimat3/ui 29.3.2 → 30.0.0

package/src/components/PullToRefresh.module.scss

@@ -0,0 +1,41 @@
+@use '../tokens' as t;
+
+.root {
+  position: relative;
+  // The pull is ours at the top edge: no browser bounce or native refresh layered on top.
+  overscroll-behavior-y: contain;
+}
+
+.indicator {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  display: flex;
+  justify-content: center;
+  padding-block: t.space(2);
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.root[data-state='pulling'] .indicator,
+.root[data-state='refreshing'] .indicator {
+  opacity: 1;
+}
+
+.content {
+  translate: 0 var(--pull-distance, 0);
+}
+
+.root[data-state='idle'] .content,
+.root[data-state='refreshing'] .content {
+  @include t.transition(translate);
+}
+
+// The content follows the finger only where motion is welcome; the hint still shows.
+@media (prefers-reduced-motion: reduce) {
+  .content {
+    translate: none;
+  }
+}

package/src/components/PullToRefresh.tsx

@@ -0,0 +1,108 @@
+// Pull down at the top of a list to refresh it — the gesture an installed app has no browser to
+// give it. No refresh of its own: `onRefresh` is the caller's (`refresh()` from the page's router,
+// usually), so `ui` never imports `render`.
+//
+// Touch only, and only at the top: a pull mid-list is the page's scroll, and a fine pointer gets
+// nothing — the caller's toolbar button is the way there, and the way for every keyboard. Inert
+// with scripting off; the scroll position stays.
+
+import type { JSX } from 'solid-js';
+import { announce } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import styles from './PullToRefresh.module.scss';
+import { PULL_IDLE, type PullState, pullController } from './pull-refresh-view';
+
+export interface PullToRefreshProps {
+  /** Re-reads the content. Its settling — resolved or rejected — ends the busy state. */
+  onRefresh: () => Promise<void>;
+  /** A rejected refresh, after the busy state ended. Required: a failed refresh is never silent. */
+  onError: (error: unknown) => void;
+  children: JSX.Element;
+  class?: string | undefined;
+}
+
+const finePointer = (): boolean =>
+  typeof matchMedia === 'function' && matchMedia('(pointer: fine)').matches;
+
+const scrolledToTop = (el: HTMLElement): boolean =>
+  el.scrollTop <= 0 && (document.scrollingElement?.scrollTop ?? 0) <= 0;
+
+export function PullToRefresh(props: PullToRefreshProps): JSX.Element {
+  const ui = useUi();
+  const rt = solid();
+  const [state, setState] = rt.createSignal<PullState>(PULL_IDLE);
+  let root: HTMLDivElement | undefined;
+
+  const pull = pullController(
+    () => props.onRefresh(),
+    (next) => {
+      setState(next);
+      if (next.kind === 'refreshing') announce(ui.t(UI_KEYS.refreshBusy));
+    },
+    (error) => props.onError(error),
+  );
+
+  rt.createEffect(() => {
+    const el = root;
+    if (el === undefined) return;
+    let startY = 0;
+    const onStart = (event: TouchEvent): void => {
+      const touch = event.touches[0];
+      if (touch === undefined || event.touches.length !== 1) return;
+      startY = touch.clientY;
+      pull.send({ type: 'start', atTop: scrolledToTop(el), touch: !finePointer() });
+    };
+    const onMove = (event: TouchEvent): void => {
+      const touch = event.touches[0];
+      if (touch === undefined || pull.state().kind !== 'pulling') return;
+      const dy = touch.clientY - startY;
+      // An upward move is the list's scroll, handed back to the browser.
+      if (dy <= 0) return;
+      event.preventDefault();
+      pull.send({ type: 'move', dy });
+    };
+    const onEnd = (): void => pull.send({ type: 'end' });
+    el.addEventListener('touchstart', onStart, { passive: true });
+    el.addEventListener('touchmove', onMove, { passive: false });
+    el.addEventListener('touchend', onEnd);
+    el.addEventListener('touchcancel', onEnd);
+    rt.onCleanup(() => {
+      el.removeEventListener('touchstart', onStart);
+      el.removeEventListener('touchmove', onMove);
+      el.removeEventListener('touchend', onEnd);
+      el.removeEventListener('touchcancel', onEnd);
+    });
+  });
+
+  const hint = (): string => {
+    const now = state();
+    if (now.kind === 'refreshing') return ui.t(UI_KEYS.refreshBusy);
+    if (now.kind === 'pulling' && now.armed) return ui.t(UI_KEYS.refreshRelease);
+    return ui.t(UI_KEYS.refreshPull);
+  };
+  const distance = (): number => {
+    const now = state();
+    return now.kind === 'pulling' ? now.distance : 0;
+  };
+
+  return (
+    <div
+      ref={(el: HTMLDivElement) => {
+        root = el;
+      }}
+      class={cx(styles['root'], props.class)}
+      data-state={state().kind}
+      aria-busy={state().kind === 'refreshing' ? 'true' : undefined}
+      style={{ '--pull-distance': `${distance()}px` }}
+    >
+      {/* Decorative: the announcement and `aria-busy` carry the state to assistive tech. */}
+      <div class={styles['indicator']} aria-hidden="true">
+        {hint()}
+      </div>
+      <div class={styles['content']}>{props.children}</div>
+    </div>
+  );
+}

package/src/components/Radio.module.scss

@@ -85,3 +85,54 @@
   color: t.role('fg-muted');
   font-size: t.text(xs);
 }
+
+// Segmented: the same native radios as one joined strip. The dot goes; the checked segment fills.
+.appearance-segmented {
+  flex-flow: row wrap;
+  gap: 0;
+
+  .legend {
+    margin-block-end: t.space(2);
+  }
+
+  .row {
+    @include t.padding-inline(t.space(3));
+    align-items: center;
+    min-block-size: t.touch(target);
+    border: 1px solid t.role('line');
+    margin-inline-start: -1px;
+    background: t.role('surface-raised');
+
+    &:first-of-type {
+      margin-inline-start: 0;
+      border-start-start-radius: t.radius(md);
+      border-end-start-radius: t.radius(md);
+    }
+
+    &:last-of-type {
+      border-start-end-radius: t.radius(md);
+      border-end-end-radius: t.radius(md);
+    }
+
+    &:has(.input:checked) {
+      position: relative;
+      border-color: t.role('accent');
+      color: t.role('accent-fg');
+      background: t.role('accent');
+    }
+
+    &:has(.input:focus-visible) {
+      position: relative;
+      outline: t.stroke(thick) solid t.role('accent');
+      outline-offset: t.stroke(thick);
+    }
+  }
+
+  .dot {
+    display: none;
+  }
+
+  .description {
+    color: inherit;
+  }
+}

package/src/components/Radio.tsx

@@ -23,6 +23,11 @@ export interface RadioProps {
   disabled?: boolean | undefined;
   required?: boolean | undefined;
   direction?: 'row' | 'column' | undefined;
+  /**
+   * `segmented` draws the options as one joined strip of buttons — still native radios, so arrows,
+   * a form post and scripting off are the platform's. One prop, not a second component.
+   */
+  appearance?: 'default' | 'segmented' | undefined;
   class?: string | undefined;
   'aria-describedby'?: string | undefined;
   onChange?: JSX.EventHandlerUnion<HTMLInputElement, Event> | undefined;
@@ -32,7 +37,13 @@ export function Radio(props: RadioProps): JSX.Element {
   const group = useId('radio');
   return (
     <fieldset
-      class={cx(styles['group'], styles[`direction-${props.direction ?? 'column'}`], props.class)}
+      class={cx(
+        styles['group'],
+        props.appearance === 'segmented'
+          ? styles['appearance-segmented']
+          : styles[`direction-${props.direction ?? 'column'}`],
+        props.class,
+      )}
       disabled={props.disabled === true}
       aria-describedby={props['aria-describedby']}
     >

package/src/components/SearchableSelect.module.scss

@@ -0,0 +1,216 @@
+@use '../tokens' as t;
+
+.root {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+}
+
+// The no-script control: `Select`'s look, so the swap moves nothing on screen.
+.native {
+  @include t.control;
+  display: inline-flex;
+  align-items: center;
+
+  &:focus-within {
+    border-color: t.role('accent');
+  }
+}
+
+.select {
+  flex: 1;
+  min-inline-size: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  outline: none;
+}
+
+.enhanced {
+  @include t.column(t.space(1));
+}
+
+.control {
+  @include t.control;
+  display: flex;
+  align-items: center;
+
+  &:focus-within {
+    border-color: t.role('accent');
+  }
+}
+
+// `md` is the 16px floor: below it a phone zooms the page on focus (`wiki/Interface-Rules.md`).
+.input {
+  flex: 1;
+  min-inline-size: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: t.text(md);
+  outline: none;
+}
+
+.clear {
+  @include t.focus-ring;
+  @include t.touch-target(true);
+  flex: none;
+  padding: 0 t.space(1);
+  border: 0;
+  background: none;
+  color: t.role('fg-muted');
+  font: inherit;
+  font-size: t.text(sm);
+  cursor: pointer;
+
+  &:hover {
+    color: t.role('fg');
+  }
+}
+
+.listbox {
+  @include t.surface('surface-raised', 'md');
+  @include t.custom-scrollbar;
+  position: absolute;
+  z-index: t.z(dropdown);
+  inset-block-start: 100%;
+  inset-inline: 0;
+  max-block-size: min(t.rem(320px), 50vh);
+  margin-block-start: t.space(1);
+  padding-block: t.space(1);
+  overflow-y: auto;
+  border: 1px solid t.role('line');
+  border-radius: t.radius(md);
+
+  &[hidden] {
+    display: none;
+  }
+}
+
+.group {
+  @include t.label-caps;
+  padding: t.space(2) t.space(3) t.space(1);
+  color: t.role('fg-muted');
+}
+
+.option {
+  @include t.touch-target;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-inline: t.space(3);
+  cursor: pointer;
+
+  &[data-active='true'] {
+    background: t.role('accent-soft');
+    outline: t.stroke(thick) solid t.role('accent');
+    outline-offset: calc(-1 * #{t.stroke(thick)});
+  }
+
+  &[aria-selected='true'] .optionLabel {
+    font-weight: t.weight(medium);
+  }
+
+  &[aria-disabled='true'] {
+    @include t.disabled;
+    cursor: default;
+  }
+}
+
+.optionLabel {
+  color: t.role('fg');
+}
+
+.description {
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+}
+
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: t.space(1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: t.space(1);
+  padding-inline-start: t.space(2);
+  border: 1px solid t.role('line');
+  border-radius: t.radius(pill);
+  background: t.role('surface-raised');
+  font-size: t.text(sm);
+}
+
+.chipLabel {
+  @include t.truncate;
+}
+
+.chipRemove {
+  @include t.focus-ring;
+  @include t.touch-target(true);
+  display: inline-grid;
+  place-items: center;
+  inline-size: t.space(5);
+  block-size: t.space(5);
+  padding: 0;
+  border: 0;
+  border-radius: t.radius(pill);
+  background: none;
+  color: t.role('fg-muted');
+  cursor: pointer;
+
+  &:hover {
+    color: t.role('fg');
+  }
+}
+
+// Two strokes: a cross drawn from tokens, never a glyph from a font.
+.cross {
+  position: relative;
+  inline-size: t.space(3);
+  block-size: t.space(3);
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline: 0;
+    border-block-start: t.stroke(thick) solid currentcolor;
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    transform: rotate(-45deg);
+  }
+}
+
+.status {
+  margin: 0;
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+}
+
+.quiet {
+  @include t.visually-hidden;
+}
+
+.size-sm {
+  padding-block: t.space(1);
+}
+
+.size-md {
+  padding-block: t.space(2);
+}
+
+.size-lg {
+  padding-block: t.space(3);
+  font-size: t.text(lg);
+}