@heyramzi/ui 2.24.0 → 3.0.0

package/src/slides/deck-controller.svelte.ts

@@ -46,13 +46,6 @@ export type ControllerOptions = {
   transition?: (update: () => void) => void;
 };
 
-/* With several decks on a page, keys belong to the one the reader last touched. */
-const live = new Set<DeckController>();
-let active: DeckController | null = null;
-const claimKeys = (deck: DeckController) => {
-  active = deck;
-};
-
 /** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
 
@@ -143,25 +136,13 @@ export class DeckController {
     return () => this.#listeners.delete(listener);
   }
 
-  /** Marks this deck as the one that owns the keys. Mounting does it too. */
-  activate() {
-    claimKeys(this);
-  }
-
   mount(): () => void {
-    live.add(this);
-    claimKeys(this);
-    return () => {
-      live.delete(this);
-      if (active === this) active = null;
-      clearTimeout(this.#timer);
-    };
+    return () => clearTimeout(this.#timer);
   }
 
+  /** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
   get listening() {
-    if (this.options.keyboard === false) return false;
-    const eligible = [...live].filter((deck) => deck.options.keyboard !== false);
-    return eligible.length <= 1 || active === this;
+    return this.options.keyboard !== false;
   }
 
   #write(position: Position) {

package/src/slides/deck-keys.test.ts

@@ -0,0 +1,49 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+import { flushSync, mount, unmount } from "svelte";
+import Deck from "./Deck.svelte";
+
+let app: ReturnType<typeof mount> | null = null;
+
+/* An empty registry draws each slide as its "unknown type" fallback, enough to page through. */
+const slides = ["one", "two", "three"].map((id) => ({ id, type: "plain", content: null }));
+
+function mountDeck() {
+  app = mount(Deck, {
+    target: document.body.appendChild(document.createElement("div")),
+    props: { id: "keys", title: "Keys", slides, registry: {} },
+  });
+  flushSync();
+}
+
+afterEach(() => {
+  if (app) unmount(app);
+  app = null;
+  document.body.innerHTML = "";
+});
+
+const said = () => document.querySelector(".deck__sr")?.textContent?.trim();
+
+function press(target: EventTarget, key: string) {
+  target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  flushSync();
+}
+
+describe("a deck's keys", () => {
+  it("ignores keys pressed outside it, even as the only deck on the page", () => {
+    mountDeck();
+    const before = said();
+    press(document.body, "ArrowRight");
+    press(document.body, " ");
+    expect(said()).toBe(before);
+  });
+
+  it("pages when focus is inside it", () => {
+    mountDeck();
+    const deck = document.querySelector<HTMLElement>(".deck");
+    if (!deck) throw new Error("no deck rendered");
+    deck.focus();
+    const before = said();
+    press(deck, "End");
+    expect(said()).not.toBe(before);
+  });
+});

package/src/slides/theme.css

@@ -1,101 +1,204 @@
+@layer theme, base, components, utilities;
+
 /*
  * Everything global to a deck, in design px since the whole canvas scales, and in flat
  * hex because Chromium's PDF pipeline shifts oklch.
  */
 
-.deck,
-.deck-surface {
-  color-scheme: dark;
-
-  --deck-bg: light-dark(#f2f1ec, #0e1014);
-  --deck-fg: light-dark(#15171b, #f3f1ea);
-  --deck-accent: light-dark(#3e6b00, #c8f15a);
-  --deck-on-accent: light-dark(#f6f6f0, #0e1014);
-  --deck-muted: color-mix(in srgb, var(--deck-fg) 66%, transparent);
-  --deck-line: color-mix(in srgb, var(--deck-fg) 14%, transparent);
-  --deck-surface: color-mix(in srgb, var(--deck-fg) 6%, transparent);
-  --deck-letterbox: color-mix(in srgb, var(--deck-bg) 86%, var(--deck-fg));
-
-  --deck-font: ui-sans-serif, system-ui, sans-serif;
-  --deck-font-display: var(--deck-font);
-
-  --deck-pad: 64px;
-  --deck-text-display: 76px;
-  --deck-text-title: 46px;
-  --deck-text-heading: 28px;
-  --deck-text-lead: 22px;
-  --deck-text-body: 17px;
-  --deck-text-caption: 13px;
-
-  --deck-t-slide: var(--duration-fast, 250ms);
-  --deck-t-morph: var(--duration-slow, 300ms);
-  --deck-t-quick: var(--duration-quick, 150ms);
-  --deck-stagger: var(--duration-stagger, 40ms);
-  --deck-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --deck-shift: var(--distance-medium, 12px);
-}
-.deck--paper {
-  color-scheme: light;
-}
-.deck--auto {
-  color-scheme: light dark;
-}
+@layer components {
+  .deck,
+  .deck-surface {
+    color-scheme: dark;
 
-/* Authored type. Slides use these classes. */
-.deck .deck-display,
-.deck .deck-title,
-.deck .deck-heading {
-  margin: 0;
-  font-family: var(--deck-font-display);
-  color: var(--deck-fg);
-  text-wrap: balance;
-}
-.deck .deck-display {
-  font-size: var(--deck-text-display);
-  font-weight: 800;
-  line-height: 1;
-  letter-spacing: -0.03em;
-}
-.deck .deck-title {
-  font-size: var(--deck-text-title);
-  font-weight: 700;
-  line-height: 1.04;
-  letter-spacing: -0.03em;
-}
-.deck .deck-heading {
-  font-size: var(--deck-text-heading);
-  font-weight: 650;
-  line-height: 1.15;
-  letter-spacing: -0.02em;
-}
-.deck .deck-lead,
-.deck .deck-body,
-.deck .deck-caption {
-  margin: 0;
-  color: var(--deck-muted);
-  text-wrap: pretty;
-}
-.deck .deck-lead {
-  font-size: var(--deck-text-lead);
-  line-height: 1.4;
-}
-.deck .deck-body {
-  font-size: var(--deck-text-body);
-  line-height: 1.5;
-}
-.deck .deck-caption {
-  font-size: var(--deck-text-caption);
-  line-height: 1.4;
-}
-.deck .deck-label {
-  margin: 0;
-  font-size: var(--deck-text-caption);
-  font-weight: 600;
-  letter-spacing: 0.01em;
-  color: var(--deck-accent);
-}
-.deck .deck-accent {
-  color: var(--deck-accent);
+    --deck-bg: light-dark(#f2f1ec, #0e1014);
+    --deck-fg: light-dark(#15171b, #f3f1ea);
+    --deck-accent: light-dark(#3e6b00, #c8f15a);
+    --deck-on-accent: light-dark(#f6f6f0, #0e1014);
+    --deck-muted: color-mix(in srgb, var(--deck-fg) 66%, transparent);
+    --deck-line: color-mix(in srgb, var(--deck-fg) 14%, transparent);
+    --deck-surface: color-mix(in srgb, var(--deck-fg) 6%, transparent);
+    --deck-letterbox: color-mix(in srgb, var(--deck-bg) 86%, var(--deck-fg));
+
+    --deck-font: ui-sans-serif, system-ui, sans-serif;
+    --deck-font-display: var(--deck-font);
+
+    --deck-pad: 64px;
+    --deck-text-display: 76px;
+    --deck-text-title: 46px;
+    --deck-text-heading: 28px;
+    --deck-text-lead: 22px;
+    --deck-text-body: 17px;
+    --deck-text-caption: 13px;
+
+    --deck-t-slide: var(--duration-fast, 250ms);
+    --deck-t-morph: var(--duration-slow, 300ms);
+    --deck-t-quick: var(--duration-quick, 150ms);
+    --deck-stagger: var(--duration-stagger, 40ms);
+    --deck-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --deck-shift: var(--distance-medium, 12px);
+  }
+
+  .deck--paper {
+    color-scheme: light;
+  }
+
+  .deck--auto {
+    color-scheme: light dark;
+  }
+
+  /* Authored type. Slides use these classes. */
+  .deck .deck-display,
+  .deck .deck-title,
+  .deck .deck-heading {
+    margin: 0;
+    font-family: var(--deck-font-display);
+    color: var(--deck-fg);
+    text-wrap: balance;
+  }
+
+  .deck .deck-display {
+    font-size: var(--deck-text-display);
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: -0.03em;
+  }
+
+  .deck .deck-title {
+    font-size: var(--deck-text-title);
+    font-weight: 700;
+    line-height: 1.04;
+    letter-spacing: -0.03em;
+  }
+
+  .deck .deck-heading {
+    font-size: var(--deck-text-heading);
+    font-weight: 650;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+  }
+
+  .deck .deck-lead,
+  .deck .deck-body,
+  .deck .deck-caption {
+    margin: 0;
+    color: var(--deck-muted);
+    text-wrap: pretty;
+  }
+
+  .deck .deck-lead {
+    font-size: var(--deck-text-lead);
+    line-height: 1.4;
+  }
+
+  .deck .deck-body {
+    font-size: var(--deck-text-body);
+    line-height: 1.5;
+  }
+
+  .deck .deck-caption {
+    font-size: var(--deck-text-caption);
+    line-height: 1.4;
+  }
+
+  .deck .deck-label {
+    margin: 0;
+    font-size: var(--deck-text-caption);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    color: var(--deck-accent);
+  }
+
+  .deck .deck-accent {
+    color: var(--deck-accent);
+  }
+
+  .deck[data-transition="fade"] .slide[data-active="true"] .slide__surface {
+    animation-name: deck-fade;
+  }
+
+  .deck[data-transition="slide"] .slide[data-active="true"] .slide__surface {
+    animation-name: deck-slide;
+  }
+
+  .deck[data-transition="zoom"] .slide[data-active="true"] .slide__surface {
+    animation-name: deck-zoom;
+  }
+
+  .deck[data-morphing] .slide__surface {
+    animation: none !important;
+  }
+
+  /* A morph runs on the whole page, so it gets the deck's timing while it plays. */
+  html[data-deck-vt] ::view-transition-group(*) {
+    animation-duration: var(--duration-slow, 300ms);
+    animation-timing-function: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .deck .slide__surface {
+      animation: none !important;
+    }
+    .deck .slide {
+      transition-duration: 0s !important;
+      transition-delay: 0s !important;
+    }
+    html[data-deck-vt] ::view-transition-group(*) {
+      animation-duration: 0s;
+    }
+  }
+
+  /* Print: one canvas per page, every reveal shown, no chrome. The @page size comes from the Deck. */
+  @media print {
+    .deck {
+      position: static !important;
+      display: block !important;
+      width: auto !important;
+      height: auto !important;
+      aspect-ratio: auto !important;
+      overflow: visible !important;
+      background: none !important;
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+    .deck .deck__stage {
+      position: static !important;
+      display: block !important;
+      height: auto !important;
+      overflow: visible !important;
+      background: none !important;
+    }
+    .deck .slide {
+      position: relative !important;
+      display: block !important;
+      visibility: visible !important;
+      width: var(--slide-w) !important;
+      height: var(--slide-h) !important;
+      overflow: hidden !important;
+      transform: none !important;
+      transition: none !important;
+      break-inside: avoid;
+      /* Chrome rounds the page a fraction of a px short of the canvas, which would add a blank last page. */
+      margin-bottom: -1px;
+    }
+    .deck .slide[hidden] {
+      display: none !important;
+    }
+    .deck .slide ~ .slide {
+      break-before: page;
+    }
+    .deck .slide__surface {
+      animation: none !important;
+      border-radius: 0 !important;
+    }
+    .deck .deck-fragment {
+      opacity: 1 !important;
+      transform: none !important;
+      transition: none !important;
+    }
+    .deck .deck__chrome {
+      display: none !important;
+    }
+  }
 }
 
 /* How a slide enters. The slide it replaces stays put underneath, so no frame shows the page behind. */
@@ -105,99 +208,17 @@
     transform: translateY(var(--deck-shift));
   }
 }
+
 @keyframes deck-slide {
   from {
     opacity: 0;
     transform: translateX(calc(var(--deck-dir, 1) * 48px));
   }
 }
+
 @keyframes deck-zoom {
   from {
     opacity: 0;
     transform: scale(var(--scale-large, 0.96));
   }
 }
-.deck[data-transition="fade"] .slide[data-active="true"] .slide__surface {
-  animation-name: deck-fade;
-}
-.deck[data-transition="slide"] .slide[data-active="true"] .slide__surface {
-  animation-name: deck-slide;
-}
-.deck[data-transition="zoom"] .slide[data-active="true"] .slide__surface {
-  animation-name: deck-zoom;
-}
-.deck[data-morphing] .slide__surface {
-  animation: none !important;
-}
-
-/* A morph runs on the whole page, so it gets the deck's timing while it plays. */
-html[data-deck-vt] ::view-transition-group(*) {
-  animation-duration: var(--duration-slow, 300ms);
-  animation-timing-function: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .deck .slide__surface {
-    animation: none !important;
-  }
-  .deck .slide {
-    transition-duration: 0s !important;
-    transition-delay: 0s !important;
-  }
-  html[data-deck-vt] ::view-transition-group(*) {
-    animation-duration: 0s;
-  }
-}
-
-/* Print: one canvas per page, every reveal shown, no chrome. The @page size comes from the Deck. */
-@media print {
-  .deck {
-    position: static !important;
-    display: block !important;
-    width: auto !important;
-    height: auto !important;
-    aspect-ratio: auto !important;
-    overflow: visible !important;
-    background: none !important;
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-  .deck .deck__stage {
-    position: static !important;
-    display: block !important;
-    height: auto !important;
-    overflow: visible !important;
-    background: none !important;
-  }
-  .deck .slide {
-    position: relative !important;
-    display: block !important;
-    visibility: visible !important;
-    width: var(--slide-w) !important;
-    height: var(--slide-h) !important;
-    overflow: hidden !important;
-    transform: none !important;
-    transition: none !important;
-    break-inside: avoid;
-    /* Chrome rounds the page a fraction of a px short of the canvas, which would add a blank last page. */
-    margin-bottom: -1px;
-  }
-  .deck .slide[hidden] {
-    display: none !important;
-  }
-  .deck .slide ~ .slide {
-    break-before: page;
-  }
-  .deck .slide__surface {
-    animation: none !important;
-    border-radius: 0 !important;
-  }
-  .deck .deck-fragment {
-    opacity: 1 !important;
-    transform: none !important;
-    transition: none !important;
-  }
-  .deck .deck__chrome {
-    display: none !important;
-  }
-}

package/src/slides/types.ts

@@ -80,6 +80,7 @@ export type DeckProps = {
   labels?: Partial<DeckLabels>;
   class?: string;
   style?: string;
-  onchange?: (index: number, step: number) => void;
+  /** Called with the new position when the slide or its fragment step changes. */
+  onIndexChange?: (index: number, step: number) => void;
   children?: Snippet;
 };

package/src/status/index.ts

@@ -10,4 +10,3 @@ export type {
   Statuses,
 } from "./status-types.js";
 export { default as StatusPill } from "./status-pill.svelte";
-export { TONE_TINT as PILL_TINT } from "../lib/tone.js";

package/src/status/status-badge.svelte

@@ -21,6 +21,8 @@
 		dot?: boolean;
 		/** Shows a spinner: a background job is still working on the record. */
 		busy?: boolean;
+		/** What a screen reader hears after the label while `busy`, since the spinner is hidden. */
+		busyLabel?: string;
 		/** Capitalizes the first letter of each word. Turn off for a name or a number. */
 		capitalize?: boolean;
 		/** The chip's text, for a caller that already has the word. Wins over `label` and the registry. */
@@ -35,6 +37,7 @@
 		tone,
 		dot = false,
 		busy = false,
+		busyLabel = "working",
 		capitalize = true,
 		children,
 		class: className,
@@ -71,9 +74,8 @@
 	class={cn(capitalize && "capitalize", className)}
 	{...restProps}
 >
-	{#if children}
-		{@render children()}
-	{:else}
-		{resolvedLabel}
-	{/if}
+	<!-- One line: a break before the busy note would read as a space before its comma. -->
+	{#if children}{@render children()}{:else}{resolvedLabel}{/if}{#if busy}<span class="sr-only"
+			>, {busyLabel}</span
+		>{/if}
 </StatusPill>

package/src/status/status-badge.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type Tone } from "../lib/tone.js";
+import type { Statuses } from "./status-types.js";
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+    /** A registry from `defineStatuses`. Supplies the label and tone. */
+    statuses?: Statuses;
+    /** The status id to look up in `statuses`. Leave it out when you pass `children`. */
+    status?: string;
+    /** Override the registry label. */
+    label?: string;
+    /** Override the registry tone. */
+    tone?: Tone;
+    /** Shows a dot in the tone's colour before the label. */
+    dot?: boolean;
+    /** Shows a spinner: a background job is still working on the record. */
+    busy?: boolean;
+    /** What a screen reader hears after the label while `busy`, since the spinner is hidden. */
+    busyLabel?: string;
+    /** Capitalizes the first letter of each word. Turn off for a name or a number. */
+    capitalize?: boolean;
+    /** The chip's text, for a caller that already has the word. Wins over `label` and the registry. */
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/status/status-badge.test.ts

@@ -0,0 +1,44 @@
+import { flushSync, mount, unmount } from "svelte";
+import { Check } from "phosphor-svelte";
+import { describe, expect, it } from "vite-plus/test";
+import StatusBadge from "./status-badge.svelte";
+import StatusIcon from "./status-icon.svelte";
+import { defineStatuses } from "./define-statuses.js";
+
+const statuses = defineStatuses({
+  done: { label: "Done", tone: "success", icon: Check },
+  open: { label: "Open", tone: "neutral" },
+});
+
+function render(start: (target: HTMLElement) => Record<string, unknown>) {
+  const target = document.createElement("div");
+  const app = start(target);
+  flushSync();
+  return { target, done: () => void unmount(app) };
+}
+
+// The 10 Nov audit: the busy spinner was hidden with nothing in its place, and a lone status icon had no name.
+describe("status names", () => {
+  it("says the busy state after the label while the spinner stays hidden", () => {
+    const { target, done } = render((target) =>
+      mount(StatusBadge, { target, props: { statuses, status: "open", busy: true } }),
+    );
+    expect(target.textContent?.replace(/\s+/g, " ").trim()).toBe("Open, working");
+    expect(target.querySelector("svg")?.getAttribute("aria-hidden")).toBe("true");
+    done();
+  });
+
+  it("names a status icon only when given a label", () => {
+    const named = render((target) =>
+      mount(StatusIcon, { target, props: { statuses, status: "done", label: "Done" } }),
+    );
+    expect(named.target.querySelector("span[role=img]")?.getAttribute("aria-label")).toBe("Done");
+    named.done();
+    const plain = render((target) =>
+      mount(StatusIcon, { target, props: { statuses, status: "done" } }),
+    );
+    expect(plain.target.querySelector("span[role=img]")).toBeNull();
+    expect(plain.target.querySelector("svg")?.getAttribute("aria-hidden")).toBe("true");
+    plain.done();
+  });
+});