@loidolt/theme-svelte 0.5.0 → 0.6.0

package/dist/components/SignaturePad.svelte

@@ -0,0 +1,317 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { Attachment } from 'svelte/attachments';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import {
+    strokesToSvg,
+    validateSignature,
+    type SignaturePoint,
+    type SignatureStroke,
+    type SignatureValue,
+  } from '../signature.js';
+  import { cx } from '../utils.js';
+  import Button from './Button.svelte';
+  import Input from './Input.svelte';
+  import RadioGroup from './RadioGroup.svelte';
+  import ToggleGroup from './ToggleGroup.svelte';
+
+  type Mode = 'draw' | 'type';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The accepted signature, or `null` while there is none. Bindable. */
+    value?: SignatureValue | null;
+    onValueChange?: (value: SignatureValue | null) => void;
+    /** Names the pad for assistive tech, e.g. "Customer signature". */
+    label: string;
+    /**
+     * Ways to sign. Typing is the keyboard- and switch-accessible alternative to drawing (WCAG
+     * 2.1.1, 2.5.1); drop it only if you offer another route to the same outcome.
+     */
+    modes?: Mode[];
+    mode?: Mode;
+    strokeWidth?: number;
+    /** Ink colour. Defaults to the text colour, so it follows the theme. */
+    strokeColor?: string;
+    /** Fonts offered in `type` mode. Load them yourself; the default is the system script face. */
+    fonts?: Array<{ family: string; label: string }>;
+    /** Drawn length, in pixels, below which a signature does not count. */
+    minStrokeLength?: number;
+    minTypedLength?: number;
+    /** Submits the PNG data URL with a form. */
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    modeLabel?: string;
+    drawLabel?: string;
+    typeLabel?: string;
+    typePlaceholder?: string;
+    fontLabel?: string;
+    clearLabel?: string;
+    undoLabel?: string;
+    /** Guidance under the drawing area. */
+    drawHint?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  const generatedId = $props.id();
+
+  let {
+    value = $bindable(null),
+    onValueChange,
+    label,
+    modes = ['draw', 'type'],
+    mode = $bindable(modes[0] ?? 'draw'),
+    strokeWidth = 2.5,
+    strokeColor,
+    fonts = [{ family: 'cursive', label: 'Script' }],
+    minStrokeLength = 20,
+    minTypedLength = 2,
+    name,
+    required = false,
+    disabled = false,
+    modeLabel = 'Signature method',
+    drawLabel = 'Draw',
+    typeLabel = 'Type',
+    typePlaceholder = 'Type your full name',
+    fontLabel = 'Style',
+    clearLabel = 'Clear',
+    undoLabel = 'Undo',
+    drawHint = 'Sign with a mouse, pen or finger.',
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  // Raw, not a deep proxy: points are pushed onto the live stroke while drawing, and the array
+  // is reassigned to publish each change.
+  let strokes = $state.raw<SignatureStroke[]>([]);
+  let typedName = $state('');
+  let font = $state(untrack(() => fonts[0]?.family ?? 'cursive'));
+  let canvas = $state<HTMLCanvasElement | null>(null);
+  let size = { width: 0, height: 0 };
+
+  const ink = () => strokeColor ?? (canvas ? getComputedStyle(canvas).color : '') ?? '#20231d';
+
+  function paint() {
+    const context = canvas?.getContext('2d');
+    if (!canvas || !context) return;
+    const ratio = canvas.width / (size.width || 1);
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.clearRect(0, 0, size.width, size.height);
+    context.strokeStyle = ink();
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    for (const stroke of strokes) {
+      const { points } = stroke;
+      if (!points.length) continue;
+      context.lineWidth = stroke.width;
+      context.beginPath();
+      context.moveTo(points[0].x, points[0].y);
+      for (let index = 1; index < points.length - 1; index++) {
+        const [point, next] = [points[index], points[index + 1]];
+        context.quadraticCurveTo(point.x, point.y, (point.x + next.x) / 2, (point.y + next.y) / 2);
+      }
+      const last = points[points.length - 1];
+      context.lineTo(last.x + (points.length === 1 ? 0.01 : 0), last.y);
+      context.stroke();
+    }
+  }
+
+  function snapshot(target: HTMLCanvasElement | null): string {
+    try {
+      return target?.toDataURL('image/png') ?? '';
+    } catch {
+      return '';
+    }
+  }
+
+  function emit(next: SignatureValue | null) {
+    value = next;
+    onValueChange?.(next);
+  }
+
+  function commitDrawing() {
+    const check = validateSignature({ mode: 'draw', strokes }, { minStrokeLength });
+    if (!check.valid) return emit(null);
+    emit({
+      mode: 'draw',
+      strokes: strokes.map((stroke) => ({ ...stroke, points: [...stroke.points] })),
+      dataUrl: snapshot(canvas),
+      svg: strokesToSvg(strokes, { ...size, color: ink() }),
+      ...size,
+    });
+  }
+
+  function commitTyped() {
+    const check = validateSignature({ mode: 'type', typedName }, { minTypedLength });
+    if (!check.valid) return emit(null);
+    // Set the name in the chosen face on an offscreen canvas, so both modes yield a PNG.
+    const width = 480;
+    const height = 140;
+    let dataUrl = '';
+    if (typeof document !== 'undefined') {
+      const offscreen = document.createElement('canvas');
+      offscreen.width = width * 2;
+      offscreen.height = height * 2;
+      const context = offscreen.getContext('2d');
+      if (context) {
+        context.scale(2, 2);
+        context.fillStyle = ink();
+        context.textBaseline = 'middle';
+        context.font = `48px ${font}`;
+        context.fillText(typedName.trim(), 16, height / 2, width - 32);
+        dataUrl = snapshot(offscreen);
+      }
+    }
+    emit({ mode: 'type', typedName: typedName.trim(), font, dataUrl, width, height });
+  }
+
+  /** Sizes the backing store to the element and device pixels, and wires the pointer. */
+  const pad: Attachment<HTMLCanvasElement> = (node) => {
+    const resize = () => {
+      const box = node.getBoundingClientRect();
+      size = { width: box.width, height: box.height };
+      const ratio = window.devicePixelRatio || 1;
+      node.width = Math.max(1, Math.round(box.width * ratio));
+      node.height = Math.max(1, Math.round(box.height * ratio));
+      paint();
+    };
+    // Untracked: painting reads the strokes, and an attachment that depends on them would tear
+    // down and re-wire the pointer on every stroke.
+    untrack(resize);
+    const observer = new ResizeObserver(resize);
+    observer.observe(node);
+
+    let current: SignatureStroke | null = null;
+    const point = (event: PointerEvent): SignaturePoint => {
+      const box = node.getBoundingClientRect();
+      return {
+        x: event.clientX - box.left,
+        y: event.clientY - box.top,
+        pressure: event.pressure || 0.5,
+      };
+    };
+    const down = (event: PointerEvent) => {
+      if (disabled || event.button > 0) return;
+      event.preventDefault();
+      node.setPointerCapture?.(event.pointerId);
+      current = { points: [point(event)], width: strokeWidth };
+      strokes = [...strokes, current];
+      paint();
+    };
+    const move = (event: PointerEvent) => {
+      if (!current) return;
+      current.points.push(point(event));
+      strokes = [...strokes];
+      paint();
+    };
+    const up = () => {
+      if (!current) return;
+      current = null;
+      commitDrawing();
+    };
+    node.addEventListener('pointerdown', down);
+    node.addEventListener('pointermove', move);
+    node.addEventListener('pointerup', up);
+    node.addEventListener('pointercancel', up);
+    return () => {
+      observer.disconnect();
+      node.removeEventListener('pointerdown', down);
+      node.removeEventListener('pointermove', move);
+      node.removeEventListener('pointerup', up);
+      node.removeEventListener('pointercancel', up);
+    };
+  };
+
+  /** Removes everything drawn or typed. */
+  export function clear() {
+    strokes = [];
+    typedName = '';
+    paint();
+    emit(null);
+  }
+
+  /** Removes the last stroke. */
+  export function undo() {
+    strokes = strokes.slice(0, -1);
+    paint();
+    commitDrawing();
+  }
+
+  function switchMode(next: Mode) {
+    mode = next;
+    if (next === 'draw') commitDrawing();
+    else commitTyped();
+  }
+
+  const hintId = `${generatedId}-hint`;
+  const hasInk = $derived(strokes.some((stroke) => stroke.points.length));
+</script>
+
+<div
+  bind:this={ref}
+  class={cx('ldt-signature', className)}
+  role="group"
+  aria-label={label}
+  data-disabled={disabled ? '' : undefined}
+  {...rest}
+>
+  {#if modes.length > 1}
+    <ToggleGroup
+      label={modeLabel}
+      size="sm"
+      value={mode}
+      {disabled}
+      options={modes.map((one) => ({ value: one, label: one === 'draw' ? drawLabel : typeLabel }))}
+      onValueChange={(next) => typeof next === 'string' && next && switchMode(next as Mode)}
+    />
+  {/if}
+
+  {#if mode === 'draw'}
+    <!-- The picture is named on a wrapper: a canvas cannot take an image role itself. -->
+    <div class="ldt-signature__surface" role="img" aria-label={label} aria-describedby={hintId}>
+      <canvas bind:this={canvas} class="ldt-signature__canvas" {@attach pad}></canvas>
+    </div>
+    <p class="ldt-signature__hint" id={hintId}>{drawHint}</p>
+  {:else}
+    <div class="ldt-signature__typed">
+      <Input
+        boxed
+        aria-label={label}
+        placeholder={typePlaceholder}
+        autocomplete="name"
+        {disabled}
+        bind:value={typedName}
+        oninput={commitTyped}
+      />
+      <p class="ldt-signature__preview" style:font-family={font} aria-hidden="true">
+        {typedName || ' '}
+      </p>
+      {#if fonts.length > 1}
+        <RadioGroup
+          label={fontLabel}
+          options={fonts.map((one) => ({ value: one.family, label: one.label }))}
+          bind:value={font}
+          onValueChange={commitTyped}
+        />
+      {/if}
+    </div>
+  {/if}
+
+  <div class="ldt-signature__actions">
+    {#if mode === 'draw'}<Button
+        size="sm"
+        variant="quiet"
+        disabled={disabled || !hasInk}
+        onclick={undo}>{undoLabel}</Button
+      >{/if}
+    <Button
+      size="sm"
+      variant="quiet"
+      disabled={disabled || (mode === 'draw' ? !hasInk : !typedName)}
+      onclick={clear}>{clearLabel}</Button
+    >
+  </div>
+  {#if name}<input type="hidden" {name} value={value?.dataUrl ?? ''} {required} />{/if}
+</div>

package/dist/components/SignaturePad.svelte.d.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type SignatureValue } from '../signature.js';
+type Mode = 'draw' | 'type';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The accepted signature, or `null` while there is none. Bindable. */
+    value?: SignatureValue | null;
+    onValueChange?: (value: SignatureValue | null) => void;
+    /** Names the pad for assistive tech, e.g. "Customer signature". */
+    label: string;
+    /**
+     * Ways to sign. Typing is the keyboard- and switch-accessible alternative to drawing (WCAG
+     * 2.1.1, 2.5.1); drop it only if you offer another route to the same outcome.
+     */
+    modes?: Mode[];
+    mode?: Mode;
+    strokeWidth?: number;
+    /** Ink colour. Defaults to the text colour, so it follows the theme. */
+    strokeColor?: string;
+    /** Fonts offered in `type` mode. Load them yourself; the default is the system script face. */
+    fonts?: Array<{
+        family: string;
+        label: string;
+    }>;
+    /** Drawn length, in pixels, below which a signature does not count. */
+    minStrokeLength?: number;
+    minTypedLength?: number;
+    /** Submits the PNG data URL with a form. */
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    modeLabel?: string;
+    drawLabel?: string;
+    typeLabel?: string;
+    typePlaceholder?: string;
+    fontLabel?: string;
+    clearLabel?: string;
+    undoLabel?: string;
+    /** Guidance under the drawing area. */
+    drawHint?: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+declare const SignaturePad: import("svelte").Component<Props, {
+    clear: () => void;
+    undo: () => void;
+}, "value" | "ref" | "mode">;
+type SignaturePad = ReturnType<typeof SignaturePad>;
+export default SignaturePad;

package/dist/components/Skeleton.svelte

@@ -3,6 +3,14 @@
   import { cx } from '../utils.js';
 
   interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The shape standing in for content. `block` (the default) is sized by `width` and `height`;
+     * the others take the metrics of what they replace — a line of body text, a heading, an
+     * avatar, a button, a card.
+     */
+    variant?: 'block' | 'text' | 'title' | 'avatar' | 'button' | 'card';
+    /** For `text`: how many lines. The last one is shorter, as a paragraph's usually is. */
+    lines?: number;
     /** Number is treated as pixels; strings pass through as CSS. */
     width?: string | number;
     height?: string | number;
@@ -10,17 +18,40 @@
     ref?: HTMLSpanElement | null;
   }
 
-  let { width, height, class: className, ref = $bindable(null), ...rest }: Props = $props();
+  let {
+    variant = 'block',
+    lines = 1,
+    width,
+    height,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
 
   const size = (value: string | number | undefined) =>
     typeof value === 'number' ? `${value}px` : value;
 </script>
 
-<span
-  bind:this={ref}
-  class={cx('ldt-skeleton', className)}
-  style:width={size(width)}
-  style:height={size(height)}
-  aria-hidden="true"
-  {...rest}
-></span>
+{#if variant === 'text' && lines > 1}
+  <span
+    bind:this={ref}
+    class={cx('ldt-skeleton-lines', className)}
+    style:width={size(width)}
+    aria-hidden="true"
+    {...rest}
+  >
+    {#each { length: lines }, index (index)}<span
+        class="ldt-skeleton ldt-skeleton--text"
+        style:width={index === lines - 1 ? '60%' : undefined}
+      ></span>{/each}
+  </span>
+{:else}
+  <span
+    bind:this={ref}
+    class={cx('ldt-skeleton', variant !== 'block' && `ldt-skeleton--${variant}`, className)}
+    style:width={size(width)}
+    style:height={size(height)}
+    aria-hidden="true"
+    {...rest}
+  ></span>
+{/if}

package/dist/components/Skeleton.svelte.d.ts

@@ -1,5 +1,13 @@
 import type { HTMLAttributes } from 'svelte/elements';
 interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The shape standing in for content. `block` (the default) is sized by `width` and `height`;
+     * the others take the metrics of what they replace — a line of body text, a heading, an
+     * avatar, a button, a card.
+     */
+    variant?: 'block' | 'text' | 'title' | 'avatar' | 'button' | 'card';
+    /** For `text`: how many lines. The last one is shorter, as a paragraph's usually is. */
+    lines?: number;
     /** Number is treated as pixels; strings pass through as CSS. */
     width?: string | number;
     height?: string | number;

package/dist/components/SkipLink.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+    /** Id of the element to skip to — usually `<main>`. */
+    targetId: string;
+    /** Link text, when `children` is not given. */
+    label?: string;
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLAnchorElement | null;
+  }
+
+  let {
+    targetId,
+    label = 'Skip to main content',
+    children,
+    onclick,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLAnchorElement }) {
+    onclick?.(event);
+    if (event.defaultPrevented) return;
+    const destination = document.getElementById(targetId);
+    if (!destination) return;
+    // Following the fragment scrolls, but only moves focus if the target is focusable. A
+    // `<main>` is not, so without this the next Tab starts again from the top of the page.
+    if (!destination.matches('a[href], button, input, select, textarea, [tabindex]')) {
+      destination.tabIndex = -1;
+    }
+    destination.focus();
+  }
+</script>
+
+<a
+  bind:this={ref}
+  class={cx('ldt-skip-link', className)}
+  href={`#${targetId}`}
+  {...rest}
+  onclick={handleClick}
+>
+  {#if children}{@render children()}{:else}{label}{/if}
+</a>

package/dist/components/SkipLink.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLAnchorAttributes, 'href'> {
+    /** Id of the element to skip to — usually `<main>`. */
+    targetId: string;
+    /** Link text, when `children` is not given. */
+    label?: string;
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLAnchorElement | null;
+}
+declare const SkipLink: import("svelte").Component<Props, {}, "ref">;
+type SkipLink = ReturnType<typeof SkipLink>;
+export default SkipLink;

package/dist/components/Slider.svelte

@@ -0,0 +1,148 @@
+<script lang="ts" generics="V extends number | number[] = number">
+  import { Slider as SliderPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import type { Orientation } from '../types.js';
+  import { cx } from '../utils.js';
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** A number for one thumb, an array for a range — one thumb per entry. */
+    value?: V;
+    min?: number;
+    max?: number;
+    /** The increment, or an explicit list of the only values allowed. */
+    step?: number | number[];
+    orientation?: Orientation;
+    disabled?: boolean;
+    /** Accessible name. With two or more thumbs each is named from it by `thumbLabel`. */
+    label: string;
+    thumbLabel?: (index: number, count: number) => string;
+    /** Spoken (`aria-valuetext`) and shown for each value — add units here: `(v) => \`${v} mm\``. */
+    formatValue?: (value: number) => string;
+    /** Show the formatted value beside the track. */
+    showValue?: boolean;
+    /** Mark every step along the track. Sensible only for a coarse `step`. */
+    ticks?: boolean;
+    /** Submits each value as a hidden input under this name. */
+    name?: string;
+    /** Every change, while dragging too. */
+    onValueChange?: (value: V) => void;
+    /** Only when the user lets go or finishes a key press — the moment to save. */
+    onValueCommit?: (value: V) => void;
+    /** Rendered after the track, e.g. min/max captions. */
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+  }
+
+  let {
+    value = $bindable(0 as V),
+    min = 0,
+    max = 100,
+    step = 1,
+    orientation = 'horizontal',
+    disabled = false,
+    label,
+    thumbLabel = (index, count) =>
+      count === 1 ? label : `${label}, ${index === 0 ? 'minimum' : 'maximum'}`,
+    formatValue = String,
+    showValue = false,
+    ticks = false,
+    name,
+    onValueChange,
+    onValueCommit,
+    children,
+    class: className,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const values = $derived<number[]>(Array.isArray(value) ? value : [value as number]);
+  const multiple = $derived(Array.isArray(value));
+</script>
+
+{#snippet parts({
+  thumbItems,
+  tickItems,
+}: {
+  thumbItems: { index: number; value: number }[];
+  tickItems: { index: number }[];
+})}
+  <span class="ldt-slider__track"><SliderPrimitive.Range class="ldt-slider__range" /></span>
+  {#if ticks}
+    {#each tickItems as tick (tick.index)}<SliderPrimitive.Tick
+        class="ldt-slider__tick"
+        index={tick.index}
+      />{/each}
+  {/if}
+  {#each thumbItems as thumb (thumb.index)}
+    <SliderPrimitive.Thumb
+      class="ldt-slider__thumb"
+      index={thumb.index}
+      aria-label={thumbLabel(thumb.index, thumbItems.length)}
+      aria-valuetext={formatValue(thumb.value)}
+    />
+  {/each}
+{/snippet}
+
+<div
+  bind:this={ref}
+  class={cx('ldt-slider', orientation === 'vertical' && 'ldt-slider--vertical', className)}
+  data-disabled={disabled ? '' : undefined}
+  {...rest}
+>
+  <!--
+    `exact` positioning: the thumb's centre sits on the value and the wrapper's padding keeps it
+    inside the box. The default measures the thumb in the browser, which shifts it after
+    hydration.
+  -->
+  {#if multiple}
+    <SliderPrimitive.Root
+      type="multiple"
+      bind:value={() => value as number[], (next) => (value = next as V)}
+      {min}
+      {max}
+      {step}
+      {orientation}
+      {disabled}
+      thumbPositioning="exact"
+      class="ldt-slider__control"
+      onValueChange={(next) => onValueChange?.(next as V)}
+      onValueCommit={(next) => onValueCommit?.(next as V)}
+    >
+      {#snippet children({ thumbItems, tickItems })}{@render parts({
+          thumbItems,
+          tickItems,
+        })}{/snippet}
+    </SliderPrimitive.Root>
+  {:else}
+    <SliderPrimitive.Root
+      type="single"
+      bind:value={() => value as number, (next) => (value = next as V)}
+      {min}
+      {max}
+      {step}
+      {orientation}
+      {disabled}
+      thumbPositioning="exact"
+      class="ldt-slider__control"
+      onValueChange={(next) => onValueChange?.(next as V)}
+      onValueCommit={(next) => onValueCommit?.(next as V)}
+    >
+      {#snippet children({ thumbItems, tickItems })}{@render parts({
+          thumbItems,
+          tickItems,
+        })}{/snippet}
+    </SliderPrimitive.Root>
+  {/if}
+  {#if showValue}
+    <!-- The thumbs already speak their values; this is the sighted copy. -->
+    <output class="ldt-slider__value" aria-hidden="true"
+      >{values.map((one) => formatValue(one)).join(' – ')}</output
+    >
+  {/if}
+  {#if name}
+    {#each values as one, index (index)}<input type="hidden" {name} value={one} />{/each}
+  {/if}
+  {#if children}{@render children()}{/if}
+</div>