@heyramzi/ui 2.23.0 → 3.0.0

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 { PILL_TINT } from "./pill-tint.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();
+  });
+});

package/src/status/status-dot.svelte

@@ -135,23 +135,63 @@
 {/if}
 
 <style>
-	.sd {
-		flex-shrink: 0;
-	}
+	@layer theme, base, components, utilities;
 
-	/* The tick and cross read as cut out of the disc. A host sets the mark to its own ground. */
-	.sd-mark {
-		stroke: var(--status-dot-mark, white);
-	}
+	@layer components {
+		.sd {
+			flex-shrink: 0;
+		}
 
-	/* 12 dashes that close evenly: 2 * PI * 5.5 = 34.56, cut into 12 periods of 2.88. */
-	.sd-dashed {
-		stroke-dasharray: 1.3 1.58;
-	}
+		/* The tick and cross read as cut out of the disc. A host sets the mark to its own ground. */
+		.sd-mark {
+			stroke: var(--status-dot-mark, white);
+		}
+
+		/* 12 dashes that close evenly: 2 * PI * 5.5 = 34.56, cut into 12 periods of 2.88. */
+		.sd-dashed {
+			stroke-dasharray: 1.3 1.58;
+		}
+
+		.sd-fill {
+			transform-origin: 7px 7px;
+			animation: sd-fill-in var(--duration-slow) var(--ease-smooth-out) forwards;
+		}
+
+		.sd-pop {
+			transform-origin: 7px 7px;
+			animation: sd-pop-in var(--duration-medium) var(--ease-smooth-out) forwards;
+		}
+
+		.sd-check {
+			stroke-dasharray: 12;
+			stroke-dashoffset: 12;
+			animation: sd-trace var(--duration-medium) var(--ease-smooth-out) var(--duration-quick)
+				forwards;
+		}
+
+		.sd-cross {
+			stroke-dasharray: 6;
+			stroke-dashoffset: 6;
+			animation: sd-trace calc(var(--duration-fast) / 2) var(--ease-smooth-out)
+				var(--duration-quick) forwards;
+		}
+
+		.sd-cross-second {
+			animation-delay: calc(var(--duration-quick) + var(--duration-fast) / 2);
+		}
 
-	.sd-fill {
-		transform-origin: 7px 7px;
-		animation: sd-fill-in var(--duration-slow) var(--ease-smooth-out) forwards;
+		@media (prefers-reduced-motion: reduce) {
+			.sd-fill,
+			.sd-pop,
+			.sd-check,
+			.sd-cross {
+				animation: none;
+			}
+			.sd-check,
+			.sd-cross {
+				stroke-dashoffset: 0;
+			}
+		}
 	}
 
 	@keyframes sd-fill-in {
@@ -165,11 +205,6 @@
 		}
 	}
 
-	.sd-pop {
-		transform-origin: 7px 7px;
-		animation: sd-pop-in var(--duration-medium) var(--ease-smooth-out) forwards;
-	}
-
 	@keyframes sd-pop-in {
 		from {
 			transform: scale(0.4);
@@ -181,39 +216,9 @@
 		}
 	}
 
-	.sd-check {
-		stroke-dasharray: 12;
-		stroke-dashoffset: 12;
-		animation: sd-trace var(--duration-medium) var(--ease-smooth-out) var(--duration-quick) forwards;
-	}
-
-	.sd-cross {
-		stroke-dasharray: 6;
-		stroke-dashoffset: 6;
-		animation: sd-trace calc(var(--duration-fast) / 2) var(--ease-smooth-out) var(--duration-quick)
-			forwards;
-	}
-
-	.sd-cross-second {
-		animation-delay: calc(var(--duration-quick) + var(--duration-fast) / 2);
-	}
-
 	@keyframes sd-trace {
 		to {
 			stroke-dashoffset: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.sd-fill,
-		.sd-pop,
-		.sd-check,
-		.sd-cross {
-			animation: none;
-		}
-		.sd-check,
-		.sd-cross {
-			stroke-dashoffset: 0;
-		}
-	}
 </style>

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

@@ -0,0 +1,16 @@
+import type { StatusDotVariant, Statuses } from "./status-types.js";
+interface Props {
+    /** A registry from `defineStatuses`. Resolves color, variant and progress. */
+    statuses?: Statuses;
+    status?: string;
+    /** Explicit color, overrides the registry and tone. */
+    color?: string;
+    variant?: StatusDotVariant;
+    progress?: number;
+    size?: number;
+    animate?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;