@reddb-io/ui-kit 0.3.3 → 0.3.5

package/vendor/ds/kits/base/src/OneTimeCodeInput.svelte

@@ -0,0 +1,176 @@
+<!-- A visibly named OTP group composed from Fieldset and the canonical Input recipe.
+     Each segment remains native while paste and focus move across the code. -->
+<script lang="ts">
+  import { untrack } from "svelte";
+  import type { HTMLFieldsetAttributes } from "svelte/elements";
+  import Fieldset from "./Fieldset.svelte";
+  import { oneTimeCodeInput } from "./one-time-code-input.variants";
+  import { codeLength, codeCharacters, codeSegments, type OneTimeCodeInputMode } from "./core/one-time-code";
+  import { afterFormReset, associatedForm } from "./core/native-controls";
+
+  interface Props extends Omit<HTMLFieldsetAttributes, "children" | "class"> {
+    /** The required visible accessible name rendered as the native legend. */
+    label: string;
+    /** Native form name receiving the complete code. */
+    name?: string;
+    /** Positive integer number of one-character segments. Defaults to 6. */
+    length?: number;
+    /** Complete code, bindable by controlled consumers. */
+    value?: string;
+    /** Initial uncontrolled code, restored by native form reset. Defaults to empty. */
+    defaultValue?: string;
+    /** Supporting text associated with every segment. */
+    help?: string;
+    /** Current validation error announced and associated with every segment. */
+    error?: string;
+    /** Applies native required validation to every segment. */
+    required?: boolean;
+    /** Input mode used by every segment. */
+    inputmode?: OneTimeCodeInputMode;
+    /** Native pattern used by every segment. */
+    pattern?: string;
+    /** Prefix for segment ids; otherwise Svelte supplies a stable generated one. */
+    id?: string;
+    /** Called when every segment contains a character. */
+    oncomplete?: (value: string) => void;
+    /** Called with the new value whenever it changes (ADR 0026's value dialect). */
+    onvaluechange?: (value: string) => void;
+    /** Extra classes merged onto the native fieldset. */
+    class?: string;
+    /** Extra classes merged onto every native segment. */
+    segmentClass?: string;
+  }
+
+  const generatedId = $props.id();
+  let {
+    label,
+    name,
+    length = 6,
+    value = $bindable(),
+    defaultValue = "",
+    help,
+    error,
+    required = false,
+    inputmode = "numeric",
+    pattern = "[0-9]*",
+    id,
+    oncomplete,
+    onvaluechange,
+    class: className,
+    segmentClass,
+    ...rest
+  }: Props = $props();
+
+  const idPrefix = $derived(id ?? `${generatedId}-segment`);
+  const helpId = $derived(`${idPrefix}-help`);
+  const errorId = $derived(`${idPrefix}-error`);
+  const describedBy = $derived([help ? helpId : undefined, error ? errorId : undefined].filter(Boolean).join(" ") || undefined);
+  const count = $derived(codeLength(length));
+  const initial = untrack(() => (value ?? defaultValue).slice(0, count));
+  const current = $derived((value ?? initial).slice(0, count));
+  let segmentValues = $state(untrack(() => codeSegments(initial, count)));
+  let controls = $state<HTMLInputElement[]>([]);
+  const styles = oneTimeCodeInput();
+
+  $effect(() => {
+    const joined = segmentValues.join("");
+    if (current !== joined || segmentValues.length !== count) {
+      segmentValues = codeSegments(current, count);
+    }
+  });
+
+  $effect(() => {
+    return afterFormReset(associatedForm(controls[0], rest.form), () => {
+      value = initial.slice(0, count); segmentValues = codeSegments(value, count);
+      segmentValues.forEach((character, index) => { if (controls[index]) controls[index]!.value = character; });
+    });
+  });
+
+  function publish(): void {
+    const before = current;
+    value = segmentValues.join("");
+    if (value !== before) onvaluechange?.(value);
+    if (segmentValues.every(Boolean)) oncomplete?.(value);
+  }
+
+  function focus(index: number): void {
+    controls[Math.max(0, Math.min(index, count - 1))]?.focus();
+  }
+
+  function handleInput(event: Event, index: number): void {
+    const input = event.currentTarget as HTMLInputElement;
+    const character = codeCharacters(input.value, input.value.length).at(-1) ?? "";
+    input.value = character;
+    segmentValues[index] = character;
+    publish();
+    if (character) focus(index + 1);
+  }
+
+  function handlePaste(event: ClipboardEvent, index: number): void {
+    const pasted = event.clipboardData?.getData("text") ?? "";
+    const characters = codeCharacters(pasted, count - index);
+    if (characters.length === 0) return;
+
+    event.preventDefault();
+    for (const [offset, character] of characters.entries()) {
+      segmentValues[index + offset] = character;
+    }
+    publish();
+    focus(index + characters.length - 1);
+  }
+
+  function handleKeydown(event: KeyboardEvent, index: number): void {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      focus(index - 1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      focus(index + 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      focus(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      focus(count - 1);
+    } else if (event.key === "Backspace" && !segmentValues[index]) {
+      focus(index - 1);
+    }
+  }
+</script>
+
+<Fieldset
+  {...rest}
+  legend={label}
+  class={styles.root({ class: className })}
+  data-one-time-code-input
+  aria-invalid={error ? "true" : undefined}
+>
+  <div class={styles.list()} data-otp-list>
+    {#each segmentValues as character, index}
+      <input
+        bind:this={controls[index]}
+        id={`${idPrefix}-${index}`}
+        type="text"
+        value={character}
+        maxlength={1}
+        {inputmode}
+        {pattern}
+        autocomplete={index === 0 ? "one-time-code" : "off"}
+        {required}
+        form={rest.form}
+        aria-label={`Digit ${index + 1} of ${count}`}
+        aria-describedby={describedBy}
+        aria-invalid={error ? "true" : undefined}
+        data-otp-segment
+        class={styles.segment({ class: segmentClass })}
+        oninput={(event) => handleInput(event, index)}
+        onpaste={(event) => handlePaste(event, index)}
+        onkeydown={(event) => handleKeydown(event, index)}
+      />
+    {/each}
+  </div>
+
+  {#if name}<input type="hidden" {name} value={current} form={rest.form} />{/if}
+  {#if help}<p class={styles.help()} id={helpId}>{help}</p>{/if}
+  {#if error}<p class={styles.error()} id={errorId} role="alert">{error}</p>{/if}
+</Fieldset>

package/vendor/ds/kits/base/src/Pagination.svelte

@@ -0,0 +1,40 @@
+<script module lang="ts">
+  export type { PaginationPage } from "./core/pagination";
+</script>
+
+<script lang="ts">
+  import type { PaginationPage } from "./core/pagination";
+  import Link from "./Link.svelte";
+  import { pagination } from "./pagination.variants";
+  import { quietControl } from "./quiet-control.variants";
+
+  interface Props {
+    /**
+     * The page links in display order; each carries its page number and `href`, and `current`
+     * marks the page being viewed.
+     */
+    pages: readonly PaginationPage[];
+    /** Accessible name of the navigation landmark; defaults to `Pagination`. */
+    label?: string;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  let { pages, label = "Pagination", class: className }: Props = $props();
+  const styles = pagination();
+</script>
+
+<nav aria-label={label} data-pagination class={styles.root({ class: className })}>
+  <ul class={styles.list()}>
+    {#each pages as item (item.page)}
+      <li>
+        <Link
+          href={item.href}
+          aria-label={item.current ? `Page ${item.page}, current page` : `Go to page ${item.page}`}
+          aria-current={item.current ? "page" : undefined}
+          class={quietControl({ ink: "foreground", class: styles.page() })}
+        >{item.page}</Link>
+      </li>
+    {/each}
+  </ul>
+</nav>

package/vendor/ds/kits/base/src/PhoneInput.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import type { HTMLInputAttributes } from "svelte/elements";
+  import Field from "./Field.svelte";
+  import SearchSelect from "./SearchSelect.svelte";
+  import { input as inputStyle } from "./input.variants";
+  import { phoneInput } from "./phone-input.variants";
+  import type { PhoneInputContract, PhoneCountry } from "./core/contracts/phoneinput";
+  import { bindPhoneEditing, phoneCountries, phoneCountryName, phoneFlag, phoneInvalid, phoneOptions, phoneProblem, phoneState, type PhoneState } from "./core/phone-input";
+  import { afterFormReset, associatedForm } from "./core/native-controls";
+
+  interface Props extends PhoneInputContract {
+    /** Additional classes on the field root. */
+    class?: string;
+    /** Reports unmasked international values after user edits and native form reset. */
+    onvaluechange?: (value: string) => void;
+    /** Reports country changes from selection or an international paste. */
+    oncountrychange?: (country: PhoneCountry) => void;
+  }
+  let { label, value = $bindable(), defaultValue = "", defaultCountry = "US", countries, locale = "en",
+    name, form, id, help, error, required = false, disabled = false, presentation = "input", sourceLabel,
+    emptyLabel = "No phone number", placeholder, autoComplete = "tel-national", countryLabel = "Country",
+    searchPlaceholder = "Search countries", emptyText = "No matching countries", requiredMessage = "Enter a phone number.",
+    invalidMessage = "Enter a complete phone number for an allowed country.", controlSize = "md", class: className,
+    onvaluechange, oncountrychange }: Props = $props();
+  const initial = untrack(() => phoneState(value ?? defaultValue, phoneCountries(countries).includes(defaultCountry) ? defaultCountry : phoneCountries(countries)[0]!));
+  let localized = $state(false);
+  onMount(() => { localized = true; });
+  let local = $state(initial.value), draft = $state<PhoneState>(initial), invalid = $state(false);
+  let element = $state<HTMLInputElement>(), hidden = $state<HTMLInputElement>();
+  let editing: ReturnType<typeof bindPhoneEditing> | undefined;
+  const allowed = $derived(phoneCountries(countries));
+  const currentValue = $derived(value ?? local);
+  const current = $derived(currentValue === draft.value ? draft : phoneState(currentValue, draft.country));
+  const options = $derived(phoneOptions(allowed, current.country, locale, localized));
+  const problem = $derived(phoneProblem(current, allowed, required, requiredMessage, invalidMessage));
+  const fieldError = $derived(error || (invalid ? problem : undefined));
+  const slots = phoneInput();
+  const uid = $props.id();
+  function change(next: PhoneState, previous = current) {
+    draft = next;
+    if (next.value !== previous.value) { local = next.value; value = next.value; onvaluechange?.(next.value); }
+    if (next.country !== previous.country) oncountrychange?.(next.country);
+  }
+  function countryChange(country: string) {
+    if (!allowed.includes(country as PhoneCountry) || element?.matches(":disabled")) return;
+    change(phoneState(current.display, country as PhoneCountry));
+    element?.focus();
+  }
+  $effect(() => {
+    const node = element;
+    if (!node) return;
+    const binding = bindPhoneEditing(node, untrack(() => current), change); editing = binding;
+    return () => { binding.destroy(); if (editing === binding) editing = undefined; };
+  });
+  $effect(() => { editing?.sync(current); element?.setCustomValidity(problem); });
+  $effect(() => {
+    const node = hidden;
+    if (!node) return;
+    return afterFormReset(associatedForm(node, form), () => {
+      const previous = current;
+      draft = { ...initial }; local = initial.value; value = initial.value; invalid = false;
+      onvaluechange?.(initial.value);
+      if (previous.country !== initial.country) oncountrychange?.(initial.country);
+    });
+  });
+</script>
+
+<div data-phone-input data-presentation={presentation} class={slots.root({ class: className })}>
+  <input bind:this={hidden} type="hidden" {name} {form} value={current.value} {disabled} />
+  {#if presentation === "text"}
+    <div role="group" aria-labelledby={`${uid}-label`} class={slots.read()}>
+      <span id={`${uid}-label`} class={slots.label()}>{label}</span>
+      <span data-phone-value class={slots.value()}>
+        {#if current.value}<span aria-hidden="true" class={slots.flag()}>{phoneFlag(current.country)}</span>{/if}
+        <span class={slots.number()}>{current.international || emptyLabel}</span>
+      </span>
+      {#if sourceLabel}<span class={slots.help()}>{sourceLabel}</span>{/if}
+      {#if help}<span class={slots.help()}>{help}</span>{/if}
+      {#if error}<span role="alert" class={slots.error()}>{error}</span>{/if}
+    </div>
+  {:else}
+    <Field {label} {help} error={fieldError} {required} {id}>
+      {#snippet children(control)}
+        <div class={slots.row()}>
+          <SearchSelect label={`${countryLabel}: ${localized ? phoneCountryName(current.country, locale) : current.country}`} {options} value={current.country}
+            onvaluechange={countryChange} clearable={false} {disabled} {controlSize} {searchPlaceholder} {emptyText}
+            class={slots.country()} contentClass={slots.popup()} />
+          <input {...control} bind:this={element} type="tel" inputmode="tel" autocomplete={autoComplete as HTMLInputAttributes["autocomplete"]} {form} {disabled}
+            {placeholder} value={initial.display} class={inputStyle({ size: controlSize, class: slots.input() })}
+            onblur={() => { invalid = true; }} oninvalid={event => { event.preventDefault(); invalid = true; phoneInvalid(event.currentTarget); }} />
+        </div>
+      {/snippet}
+    </Field>
+  {/if}
+</div>

package/vendor/ds/kits/base/src/PhoneMockup.svelte

@@ -0,0 +1,42 @@
+<!-- A decorative phone body whose viewport belongs entirely to the caller. -->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import AspectRatio from "./AspectRatio.svelte";
+  import { DEFAULT_PHONE_MOCKUP_RATIO, phoneMockup } from "./phone-mockup.variants";
+
+  interface Props
+    extends Omit<
+      HTMLAttributes<HTMLDivElement>,
+      "aria-hidden" | "aria-label" | "children" | "class" | "role"
+    > {
+    /** Width divided by viewport height. */
+    ratio?: number;
+    /** Extra classes merged onto the decorative phone body. */
+    class?: string;
+    /** Caller-owned screenshot, live embed, code sample, or other content. */
+    children: Snippet;
+  }
+
+  const {
+    ratio = DEFAULT_PHONE_MOCKUP_RATIO,
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+  const styles = $derived(phoneMockup());
+</script>
+
+<div
+  {...(rest as Record<string, unknown>)}
+  data-phone-mockup
+  role="presentation"
+  class={styles.root({ class: className })}
+>
+  <div data-phone-mockup-chrome aria-hidden="true" class={styles.chrome()}>
+    <span class={styles.speaker()}></span>
+  </div>
+  <AspectRatio data-phone-mockup-viewport {ratio} class={styles.viewport()}>
+    {@render children()}
+  </AspectRatio>
+</div>

package/vendor/ds/kits/base/src/Popover.svelte

@@ -0,0 +1,116 @@
+<!-- A collision-aware, non-modal anchored dialog with a canonical Button trigger. -->
+<script lang="ts">
+  import { trapScopeTab } from "./core/focus-scope";
+  import { portalAppearance } from "./portal-appearance.svelte";
+  import type { PopoverContract } from "./core/contracts/popover";
+  import type { Snippet } from "svelte";
+  import { Popover as Bits } from "bits-ui";
+  import Button from "./Button.svelte";
+  import type { ButtonSize, ButtonVariant } from "./button.variants";
+  import { popover as popoverAppearance } from "./popover.variants";
+
+  type Side = "top" | "right" | "bottom" | "left";
+  type Align = "start" | "center" | "end";
+
+  interface Props extends PopoverContract {
+    /**
+     * Optional custom Button content; `triggerLabel` stays its accessible name, so words it shows
+     * must appear, in order, in `triggerLabel`, ideally first (WCAG 2.5.3, Label in Name).
+     */
+    trigger?: Snippet;
+    /** Caller-owned Popover content. */
+    children?: Snippet;
+    /** Extra classes merged onto the anchored surface. */
+    class?: string;
+    /** Called with the next open state whenever the Popover opens or closes. */
+    onopenchange?: (open: boolean) => void;
+  }
+
+  let {
+    triggerLabel,
+    contentLabel,
+    open = $bindable(false),
+    disabled = false,
+    variant = "secondary",
+    size = "md",
+    side = "bottom",
+    align = "start",
+    sideOffset = 8,
+    collisionPadding = 8,
+    trigger,
+    children,
+    class: className,
+    triggerClass,
+    onopenchange,
+  }: Props = $props();
+
+  const uid = $props.id();
+  const contentId = `${uid}-content`;
+  let surface: HTMLElement;
+
+  const focusableSelector = [
+    "button:not([disabled])",
+    "a[href]",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "textarea:not([disabled])",
+    '[tabindex]:not([tabindex="-1"])',
+  ].join(",");
+
+  function handleOpenAutoFocus(event: Event): void {
+    event.preventDefault();
+    (surface.querySelector<HTMLElement>(focusableSelector) ?? surface).focus();
+  }
+  const portal = portalAppearance(() => open);
+</script>
+
+<Bits.Root bind:open onOpenChange={onopenchange}>
+  <Bits.Trigger>
+    {#snippet child({ props })}
+      <Button
+        {...props}
+        {...portal.anchor}
+        data-popover-trigger
+        aria-label={triggerLabel}
+        {disabled}
+        {variant}
+        {size}
+        class={triggerClass}
+      >
+        {#if trigger}{@render trigger()}{:else}{triggerLabel}{/if}
+      </Button>
+    {/snippet}
+  </Bits.Trigger>
+
+  <Bits.Portal to={portal.container}>
+    <Bits.Content
+      id={contentId}
+      {side}
+      {align}
+      {sideOffset}
+      avoidCollisions={true}
+      {collisionPadding}
+      trapFocus={true}
+      onOpenAutoFocus={handleOpenAutoFocus}
+    >
+      {#snippet child({ props, wrapperProps })}
+        <div {...wrapperProps} {...portal.attributes}>
+          <div
+            bind:this={surface}
+            {@attach trapScopeTab}
+            {...props}
+            id={contentId}
+            data-popover-surface data-ds-focus-scope
+            data-avoid-collisions="true"
+            data-collision-padding={collisionPadding}
+            role="dialog"
+            aria-label={contentLabel}
+            class={popoverAppearance({ class: className })}
+          >
+            {@render children?.()}
+          </div>
+        </div>
+      {/snippet}
+    </Bits.Content>
+  </Bits.Portal>
+</Bits.Root>

package/vendor/ds/kits/base/src/Progress.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import {
+    formatPercent,
+    isDeterminate,
+    normalizeRange,
+  } from "./progress.behavior";
+  import { progress } from "./progress.variants";
+  import type { Tone } from "./tone";
+
+  import { segmentGeometry } from "./core/segments";
+  import { segments as segmentStyles } from "./segments.variants";
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    /** Omit the value for indeterminate work. */
+    value?: number | null;
+    /** Lower bound of the scale, exposed as `aria-valuemin`; defaults to `0`. */
+    min?: number;
+    /**
+     * Upper bound of the scale, exposed as `aria-valuemax`; defaults to `100`. A `max` not above
+     * `min` is widened to one unit.
+     */
+    max?: number;
+    /** Complete accessible name for the progress bar. */
+    label?: string;
+    /** Show the label and normalized value beside the track. */
+    summary?: boolean;
+    /** Audible value text; receives the clamped value. */
+    formatValue?: (value: number) => string;
+    /** What the progress means: the shared tone vocabulary (ADR 0026). Defaults to `neutral` (ink). */
+    tone?: Tone;
+    /** Decorative divisions, bounded to 128; omitted, uses the continuous track. The exact value remains accessible. */
+    segments?: number;
+    /** Maximum segments per row; omitted, keeps one row. */
+    segmentColumns?: number;
+    /** Extra classes, merged over the root slot's own. */
+    class?: string;
+  }
+
+  const {
+    value,
+    min = 0,
+    max = 100,
+    label = "Progress",
+    summary = false,
+    formatValue,
+    tone = "neutral",
+    segments,
+    segmentColumns,
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const determinate = $derived(isDeterminate(value));
+  const range = $derived(
+    normalizeRange(isDeterminate(value) ? value : min, min, max),
+  );
+  const valueText = $derived(
+    determinate
+      ? (formatValue?.(range.value) ?? formatPercent(range))
+      : "In progress",
+  );
+  const slots = $derived(progress({ tone, indeterminate: !determinate }));
+  const discrete = $derived(
+    segments === undefined
+      ? undefined
+      : segmentGeometry(segments, range.percent, segmentColumns),
+  );
+  const discreteSlots = segmentStyles();
+</script>
+
+<div
+  {...rest as Record<string, unknown>}
+  data-progress
+  data-state={determinate ? "determinate" : "indeterminate"}
+  class={slots.root({ class: className })}
+  role="progressbar"
+  aria-label={label}
+  aria-valuemin={range.min}
+  aria-valuemax={range.max}
+  aria-valuenow={determinate ? range.value : undefined}
+  aria-valuetext={valueText}
+>
+  {#if summary}
+    <div data-progress-summary class={slots.summary()} aria-hidden="true">
+      <span class={slots.label()}>{label}</span>
+      <span class={slots.value()}>{valueText}</span>
+    </div>
+  {/if}
+  {#if discrete && determinate}
+    <div
+      data-progress-track
+      data-segmented
+      data-aggregated={discrete.aggregated || undefined}
+      class={discreteSlots.track()}
+      style:grid-template-columns={`repeat(${discrete.columns}, minmax(0, 1fr))`}
+      aria-hidden="true"
+    >
+      {#each discrete.fills as fill, i (i)}<div class={discreteSlots.cell()}>
+          <div
+            data-segment-fill
+            class={slots.indicator({ class: discreteSlots.fill() })}
+            style:width={`${fill}%`}
+          ></div>
+        </div>{/each}
+    </div>
+  {:else}
+    <div data-progress-track class={slots.track()} aria-hidden="true">
+      <div
+        data-progress-indicator
+        class={slots.indicator()}
+        style:width={determinate ? `${range.percent}%` : undefined}
+      ></div>
+    </div>
+  {/if}
+</div>

package/vendor/ds/kits/base/src/Prose.svelte

@@ -0,0 +1,40 @@
+<!--
+  Rendered long-form HTML — CommonMark and GFM — on the Theme's type roles
+  (ADR 0025, 0027). It styles its children from the outside, so a Markdown
+  renderer's output (or `{@html}` the caller has sanitised) reads as a document.
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { prose, type ProseElement, type ProseMeasure } from "./prose.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLElement>, "class"> {
+    /** The reading width, on DS-named widths: `prose` (65ch of the body size, the default), `content` or `full`. */
+    measure?: ProseMeasure;
+    /** Tint every other body row of the document's tables, for long tables read across. */
+    striped?: boolean;
+    /** The element rendered: `div` (default), `article` or `section`. */
+    as?: ProseElement;
+    /** Extra classes merged onto the document root, such as the caller's own inset. */
+    class?: string;
+    /** The rendered document: unclassed CommonMark or GFM markup, or sanitised `{@html}`. */
+    children?: Snippet;
+  }
+
+  const {
+    measure = "prose",
+    striped = false,
+    as = "div",
+    class: className,
+    children,
+    ...rest
+  }: Props = $props();
+</script>
+
+<svelte:element
+  this={as}
+  {...rest}
+  data-prose
+  data-prose-measure={measure}
+  class={prose({ measure, striped, class: className })}
+>{@render children?.()}</svelte:element>

package/vendor/ds/kits/base/src/QuoteSlide.svelte

@@ -0,0 +1,60 @@
+<!-- A pull quote with its attribution, filling the slide (ADR 0027). -->
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import SlideFrame from "./SlideFrame.svelte";
+  import Text from "./Text.svelte";
+  import type { SlideSurface } from "./slide-frame.variants";
+  import { slideLayout } from "./slide-layout.variants";
+
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "role"> {
+    /** The quotation, without quotation marks: the slide sets them. Set in the title role. */
+    quote: string;
+    /** Who said it. */
+    attribution: string;
+    /** Where or in what capacity they said it, after the attribution. */
+    source?: string;
+    /** The slide's accessible name. Defaults to "Quote from" and the attribution. */
+    label?: string;
+    /** The slide's position in its deck, shown in the bottom margin when given. */
+    number?: number;
+    /** How many slides the deck has; shown after `number` when both are given. */
+    total?: number;
+    /** The ground the slide is set on: the page `background` (default) or the `raised` elevation. */
+    surface?: SlideSurface;
+    /** Extra classes merged onto the frame. */
+    class?: string;
+  }
+
+  const {
+    quote,
+    attribution,
+    source,
+    label,
+    number,
+    total,
+    surface = "background",
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const slots = slideLayout();
+</script>
+
+<SlideFrame
+  {...rest}
+  label={label ?? `Quote from ${attribution}`}
+  {number}
+  {total}
+  {surface}
+  class={className}
+  data-quote-slide
+>
+  <div class={slots.body()}>
+    <figure data-slide-quote class={slots.quote()}>
+      <blockquote><p class={slots.quoteText()}>&ldquo;{quote}&rdquo;</p></blockquote>
+      <figcaption>
+        <Text as="span">{attribution}</Text>{#if source}<Text as="span" ink="muted">, {source}</Text>{/if}
+      </figcaption>
+    </figure>
+  </div>
+</SlideFrame>