@ripple-ui/svelte 0.0.0-stage → 0.8.2

package/dist/organisms/OptionList.svelte

@@ -0,0 +1,269 @@
+<!--
+  OptionList.svelte: a selectable set of options (single = radio, multiple =
+  checkbox). Pure presentation: the owner holds selection and gets onSelect(id).
+  Layouts:
+    - 'list' (default) and 'grid': button rows with a SelectionIndicator, or a
+      Lucide `icon` slug in a tinted tile. OrganismRenderer's option-list uses these.
+    - 'cards': choice tiles for flow steps (SelectLayout). Each tile wraps a REAL
+      sr-only <input type=radio|checkbox>, so Tab, Space and screen readers are
+      native. `icon` here must be a CHOICE_ICONS key (data-kit/icons.ts); any
+      other name is ignored and choiceIconKey guesses from the label, then the
+      description; no match = no icon. Grid is container-query driven: 1 column,
+      2 from 480px, 3 when there are 3 or 6 short options.
+  Invariant (cards, single): onSelect is a COMMIT, and in a flow a commit
+  advances the step. Arrow keys move the native radio selection without
+  committing; click, Enter, or Space commit exactly once.
+-->
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Icon from '../widgets/display/Icon.svelte';
+  import SelectionIndicator from '../molecules/SelectionIndicator.svelte';
+  import Check from '@lucide/svelte/icons/check';
+  import { CHOICE_ICONS, ICON, choiceIconKey } from '../widgets/data-kit/icons.js';
+
+  interface Option {
+    id: string;
+    /** Primary label. `label` is accepted as an alias for `text`. */
+    text?: string;
+    label?: string;
+    description?: string;
+    /** list/grid: a Lucide slug. cards: a CHOICE_ICONS key (anything else is ignored). */
+    icon?: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    options: Option[];
+    selection?: 'single' | 'multiple';
+    layout?: 'list' | 'grid' | 'cards';
+    /** Accessible name of the group. */
+    label?: string;
+    /** A string id (single) or array of ids (multiple). */
+    selected?: string | string[];
+    onSelect?: (id: string) => void;
+    class?: string;
+  }
+
+  let {
+    options,
+    selection = 'single',
+    layout = 'list',
+    selected = selection === 'multiple' ? [] : '',
+    onSelect,
+    label,
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+
+  function isSelected(id: string): boolean {
+    if (selection === 'multiple') {
+      return Array.isArray(selected) && selected.includes(id);
+    }
+    return selected === id;
+  }
+
+  function labelOf(option: Option): string {
+    return option.text ?? option.label ?? option.id;
+  }
+
+  function handleSelect(option: Option) {
+    if (option.disabled) return;
+    onSelect?.(option.id);
+  }
+
+  // ── cards ──────────────────────────────────────────────────────────────
+  // Local mirror of `selected`: native arrow keys move the radio without a
+  // commit, and the tile has to follow the input, not wait for the owner.
+  let current = $derived<string | string[]>(selected);
+  let arrowing = false;
+
+  const isOn = (id: string) =>
+    selection === 'multiple' ? Array.isArray(current) && current.includes(id) : current === id;
+
+  // Three across only when they fit: 3 or 6 options, short labels and hints.
+  const threeUp = $derived(
+    (options.length === 3 || options.length === 6) &&
+      options.every((o) => labelOf(o).length <= 18 && (o.description?.length ?? 0) <= 40),
+  );
+
+  function onCardChange(e: Event, option: Option) {
+    const input = e.currentTarget as HTMLInputElement;
+    if (selection === 'multiple') {
+      const arr = Array.isArray(current) ? current : [];
+      current = input.checked ? [...arr, option.id] : arr.filter((v) => v !== option.id);
+    } else {
+      current = option.id;
+      if (arrowing) return; // arrow keys browse; they never commit
+    }
+    handleSelect(option);
+  }
+
+  function onCardKeydown(e: KeyboardEvent, option: Option) {
+    const input = e.currentTarget as HTMLInputElement;
+    if (e.key.startsWith('Arrow')) {
+      if (selection === 'single') {
+        arrowing = true; // the native radio moves; onkeyup clears the flag
+        return;
+      }
+      // Checkboxes have no native arrow keys: move focus only.
+      e.preventDefault();
+      const boxes = [...(input.closest('[data-slot="option-cards"]')?.querySelectorAll<HTMLInputElement>('input:not(:disabled)') ?? [])];
+      const d = e.key === 'ArrowDown' || e.key === 'ArrowRight' ? 1 : -1;
+      boxes[(boxes.indexOf(input) + d + boxes.length) % boxes.length]?.focus();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      if (selection === 'multiple') input.click();
+      else {
+        current = option.id;
+        handleSelect(option);
+      }
+    } else if (e.key === ' ' && selection === 'single' && input.checked) {
+      // Space on the already-checked radio fires no change event: commit here.
+      e.preventDefault();
+      handleSelect(option);
+    }
+  }
+
+  const containerClass = $derived(
+    layout === 'grid'
+      ? 'grid grid-cols-1 gap-3 sm:grid-cols-2'
+      : 'flex flex-col gap-3',
+  );
+</script>
+
+{#if layout === 'cards'}
+<div class="@container" data-slot="option-cards">
+  <div
+    role={selection === 'single' ? 'radiogroup' : 'group'}
+    aria-label={label}
+    class={cn('grid grid-cols-1 gap-2 @min-[480px]:grid-cols-2', threeUp && '@min-[480px]:grid-cols-3', className)}
+  >
+    {#each options as option, i (option.id)}
+      {@const on = isOn(option.id)}
+      {@const key = choiceIconKey(labelOf(option), option.icon, option.description)}
+      {@const CardIcon = key ? CHOICE_ICONS[key] : undefined}
+      <label
+        data-option-card={option.id}
+        data-selected={on || undefined}
+        class={cn(
+          'relative flex min-w-0 gap-3 rounded-ripple border p-3 pr-9 text-left transition-[background-color,border-color,box-shadow,transform] duration-150 ease-out',
+          threeUp ? 'items-start @min-[480px]:flex-col' : 'items-start',
+          'has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-ripple-ring',
+          option.disabled
+            ? 'cursor-not-allowed opacity-50'
+            : 'cursor-pointer',
+          on
+            ? 'border-ripple-accent bg-ripple-accent/10 ring-1 ring-inset ring-ripple-accent/30'
+            : 'border-ripple-border/70 bg-ripple-surface',
+          !on && !option.disabled && 'hover:-translate-y-0.5 hover:border-ripple-accent/50 hover:shadow-sm motion-reduce:hover:translate-y-0',
+        )}
+      >
+        <input
+          class="sr-only"
+          type={selection === 'single' ? 'radio' : 'checkbox'}
+          name={uid}
+          value={option.id}
+          checked={on}
+          disabled={option.disabled}
+          aria-labelledby="{uid}-{i}"
+          aria-describedby={option.description ? `${uid}-${i}-d` : undefined}
+          onchange={(e) => onCardChange(e, option)}
+          onkeydown={(e) => onCardKeydown(e, option)}
+          onkeyup={() => (arrowing = false)}
+        />
+        {#if CardIcon}
+          <span
+            data-choice-icon={key}
+            aria-hidden="true"
+            class={cn(
+              'flex size-9 shrink-0 items-center justify-center rounded-lg transition-colors',
+              on ? 'bg-ripple-accent/15 text-ripple-accent' : 'bg-ripple-muted text-muted-foreground',
+            )}
+          >
+            <CardIcon {...ICON.tile} />
+          </span>
+        {/if}
+        <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span
+            id="{uid}-{i}"
+            class={cn('font-medium leading-snug', on ? 'text-ripple-accent' : 'text-ripple-surface-foreground')}
+          >{labelOf(option)}</span>
+          {#if option.description}
+            <span id="{uid}-{i}-d" class="text-sm leading-snug text-muted-foreground">{option.description}</span>
+          {/if}
+        </span>
+        <span
+          aria-hidden="true"
+          class={cn(
+            'absolute right-3 top-3 flex size-5 items-center justify-center border-2 transition-colors',
+            selection === 'single' ? 'rounded-full' : 'rounded-md',
+            on ? 'border-ripple-accent bg-ripple-accent text-ripple-accent-foreground' : 'border-muted-foreground/30',
+          )}
+        >
+          {#if on}<Check size={12} strokeWidth={3} />{/if}
+        </span>
+      </label>
+    {/each}
+  </div>
+</div>
+{:else}
+<div
+  class={cn(containerClass, className)}
+  role={selection === 'single' ? 'radiogroup' : 'group'}
+>
+  {#each options as option (option.id)}
+    {@const active = isSelected(option.id)}
+    <button
+      type="button"
+      role={selection === 'single' ? 'radio' : 'checkbox'}
+      aria-checked={active}
+      disabled={option.disabled}
+      onclick={() => handleSelect(option)}
+      class={cn(
+        'group/option flex w-full items-center gap-3 rounded-ripple border p-4 text-left transition-all duration-200',
+        'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+        option.disabled && 'cursor-not-allowed opacity-50',
+        active
+          ? 'border-ripple-accent bg-ripple-accent/10 ring-1 ring-inset ring-ripple-accent/30'
+          : 'border-ripple-border/70 bg-ripple-surface hover:-translate-y-0.5 hover:border-ripple-accent/50 hover:shadow-md',
+      )}
+    >
+      {#if option.icon}
+        <div
+          class={cn(
+            'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg transition-colors',
+            active
+              ? 'bg-ripple-accent/15 text-ripple-accent'
+              : 'bg-ripple-muted text-muted-foreground group-hover/option:text-ripple-accent',
+          )}
+        >
+          <Icon name={option.icon} size={20} />
+        </div>
+      {:else}
+        <SelectionIndicator selected={active} mode={selection} />
+      {/if}
+
+      <div class="min-w-0 flex-1">
+        <p
+          class={cn(
+            'truncate font-medium leading-tight',
+            active ? 'text-ripple-accent' : 'text-ripple-surface-foreground',
+          )}
+        >
+          {labelOf(option)}
+        </p>
+        {#if option.description}
+          <p class="mt-0.5 truncate text-sm text-muted-foreground">
+            {option.description}
+          </p>
+        {/if}
+      </div>
+
+      {#if option.icon}
+        <SelectionIndicator selected={active} mode={selection} size="sm" />
+      {/if}
+    </button>
+  {/each}
+</div>
+{/if}

package/dist/organisms/OptionList.svelte.d.ts

@@ -0,0 +1,24 @@
+interface Option {
+    id: string;
+    /** Primary label. `label` is accepted as an alias for `text`. */
+    text?: string;
+    label?: string;
+    description?: string;
+    /** list/grid: a Lucide slug. cards: a CHOICE_ICONS key (anything else is ignored). */
+    icon?: string;
+    disabled?: boolean;
+}
+interface Props {
+    options: Option[];
+    selection?: 'single' | 'multiple';
+    layout?: 'list' | 'grid' | 'cards';
+    /** Accessible name of the group. */
+    label?: string;
+    /** A string id (single) or array of ids (multiple). */
+    selected?: string | string[];
+    onSelect?: (id: string) => void;
+    class?: string;
+}
+declare const OptionList: import("svelte").Component<Props, {}, "">;
+type OptionList = ReturnType<typeof OptionList>;
+export default OptionList;

package/dist/organisms/OrganismRenderer.svelte

@@ -0,0 +1,86 @@
+<!--
+  OrganismRenderer.svelte — RIPPLE-NATIVE organism dispatcher (Wave 2: organisms).
+  Created 2026-06-07.
+  Adapted from ocean-flow's organisms/OrganismRenderer.svelte. Rewired to ripple's
+  organism set and Svelte 5 dynamic-component idiom (capitalised derived component
+  used directly, like NodeRenderer's WidgetComponent — no deprecated
+  <svelte:component>). Callbacks are mapped per-organism instead of genesis's
+  spread-everything approach, so each organism only receives the events it owns.
+
+  The 3rd dispatch tier alongside NodeRenderer (widgets) and IntentRenderer
+  (layouts): given `{ organism, props }` it renders the matching organism. Lets a
+  spec reference an organism by name instead of inlining a full widget tree. Pure
+  presentation — props in, UI out. No data fetching.
+  2026-09-17 (fix/port-gaps): status-coloured text moved onto the readable
+  text tokens (text-ripple-{error,success,warning,info}-text; red text that
+  read text-destructive now reads text-ripple-error-text, the same hue since
+  --ripple-error aliases --destructive). The raw tones are fill colours and
+  measured 1.7-3.3:1 as text in light mode. Fills and tints are unchanged.
+-->
+<script lang="ts">
+  import OptionList from './OptionList.svelte';
+  import FormSection from './FormSection.svelte';
+  import ResultsSummary from './ResultsSummary.svelte';
+  import QuizQuestion from './QuizQuestion.svelte';
+  import SourcesRow from './SourcesRow.svelte';
+  import type { OrganismType } from './schema.js';
+
+  interface Props {
+    organism: OrganismType;
+    props?: Record<string, unknown>;
+    /** Fired when the organism completes a user action (select/answer/etc.). */
+    onComplete?: (data: unknown) => void;
+  }
+
+  let { organism, props = {}, onComplete }: Props = $props();
+
+  const ORGANISMS = {
+    'option-list': OptionList,
+    'form-section': FormSection,
+    'results-summary': ResultsSummary,
+    'quiz-question': QuizQuestion,
+    'sources-row': SourcesRow,
+  } as const;
+
+  // Cast the union of concrete organism components to a generic component type:
+  // spreading `{...props} {...handlers}` cannot satisfy every member's Props at once
+  // (e.g. OptionList requires `options`), and the runtime contract is "pass through
+  // whatever this organism needs". Updated 2026-07-08 for svelte-check.
+  const Component = $derived(
+    ORGANISMS[organism] as unknown as import('svelte').Component<Record<string, unknown>>,
+  );
+
+  // Per-organism callback wiring. Each organism gets only the event it owns,
+  // all funnelled through onComplete so the host has a single completion hook.
+  const handlers = $derived.by(() => {
+    switch (organism) {
+      case 'option-list':
+        return { onSelect: (id: string) => onComplete?.({ selected: id }) };
+      case 'quiz-question':
+        return {
+          onAnswer: (id: string, correct: boolean) =>
+            onComplete?.({ id, correct }),
+        };
+      case 'form-section':
+        return {
+          onChange: (id: string, value: unknown) =>
+            onComplete?.({ field: id, value }),
+        };
+      case 'sources-row':
+        return { onSourceClick: (source: unknown) => onComplete?.({ source }) };
+      default:
+        return {};
+    }
+  });
+</script>
+
+{#if Component}
+  <Component {...props} {...handlers} />
+{:else}
+  <div
+    class="rounded-ripple border border-ripple-error/30 bg-ripple-error/10 p-4 text-sm text-ripple-error-text"
+    role="alert"
+  >
+    Unknown organism: {organism}
+  </div>
+{/if}

package/dist/organisms/OrganismRenderer.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { OrganismType } from './schema.js';
+interface Props {
+    organism: OrganismType;
+    props?: Record<string, unknown>;
+    /** Fired when the organism completes a user action (select/answer/etc.). */
+    onComplete?: (data: unknown) => void;
+}
+declare const OrganismRenderer: import("svelte").Component<Props, {}, "">;
+type OrganismRenderer = ReturnType<typeof OrganismRenderer>;
+export default OrganismRenderer;

package/dist/organisms/QuizQuestion.svelte

@@ -0,0 +1,147 @@
+<!--
+  QuizQuestion.svelte — RIPPLE-NATIVE organism (Wave 2: organisms).
+  Created 2026-06-07.
+  Adapted from ocean-flow's organisms/QuizQuestion.svelte, rewired off genesis
+  IconWidget/shadcn onto ripple's display/Icon + the SelectionIndicator molecule
+  and design tokens. Educational intent: a single-select question with
+  correct/incorrect feedback after submission.
+
+  Before submission it borrows OptionList semantics (radio rows + SelectionIndicator).
+  After submission it can't delegate to OptionList — it must paint per-option
+  correct/incorrect result chrome — so it renders the result state itself. The
+  host owns nothing; selection + submitted are local UI state, and the verdict is
+  surfaced via onAnswer(optionId, isCorrect). Pure presentation, no data fetching.
+-->
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Icon from '../widgets/display/Icon.svelte';
+  import SelectionIndicator from '../molecules/SelectionIndicator.svelte';
+
+  interface QuizOption {
+    id: string;
+    text: string;
+    correct?: boolean;
+  }
+
+  interface Props {
+    question: string;
+    questionNumber?: number;
+    totalQuestions?: number;
+    options: QuizOption[];
+    /** When true, reveal correct/incorrect chrome after submitting. */
+    showFeedback?: boolean;
+    submitLabel?: string;
+    onAnswer?: (optionId: string, isCorrect: boolean) => void;
+    class?: string;
+  }
+
+  let {
+    question,
+    questionNumber,
+    totalQuestions,
+    options,
+    showFeedback = true,
+    submitLabel = 'Submit answer',
+    onAnswer,
+    class: className,
+  }: Props = $props();
+
+  let selectedId = $state<string | null>(null);
+  let submitted = $state(false);
+
+  function selectOption(id: string) {
+    if (submitted) return;
+    selectedId = id;
+  }
+
+  function submitAnswer() {
+    if (!selectedId || submitted) return;
+    submitted = true;
+    const option = options.find((o) => o.id === selectedId);
+    onAnswer?.(selectedId, option?.correct ?? false);
+  }
+
+  function optionClass(option: QuizOption): string {
+    const base =
+      'flex w-full items-center gap-3 rounded-ripple border p-4 text-left transition-all duration-200';
+    if (!submitted) {
+      return cn(
+        base,
+        selectedId === option.id
+          ? 'border-ripple-accent bg-ripple-accent/10 ring-1 ring-inset ring-ripple-accent/30'
+          : 'border-ripple-border/70 bg-ripple-surface hover:border-ripple-accent/50 hover:bg-ripple-muted/40',
+      );
+    }
+    if (option.correct) {
+      return cn(base, 'border-ripple-success bg-ripple-success/10');
+    }
+    if (selectedId === option.id && !option.correct) {
+      return cn(base, 'border-ripple-error bg-ripple-error/10');
+    }
+    return cn(base, 'border-ripple-border/70 opacity-50');
+  }
+</script>
+
+<div class={cn('flex flex-col gap-6', className)}>
+  <div class="flex flex-col gap-2">
+    {#if questionNumber && totalQuestions}
+      <p class="text-sm font-medium text-muted-foreground">
+        Question {questionNumber} of {totalQuestions}
+      </p>
+    {/if}
+    <h2 class="text-xl font-semibold tracking-tight text-ripple-surface-foreground">
+      {question}
+    </h2>
+  </div>
+
+  <div class="flex flex-col gap-3" role="radiogroup" aria-label={question}>
+    {#each options as option (option.id)}
+      <button
+        type="button"
+        role="radio"
+        aria-checked={selectedId === option.id}
+        class={optionClass(option)}
+        onclick={() => selectOption(option.id)}
+        disabled={submitted}
+      >
+        {#if submitted && showFeedback}
+          {#if option.correct}
+            <span
+              class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ripple-success text-ripple-accent-foreground"
+            >
+              <Icon name="check" size={14} />
+            </span>
+          {:else if selectedId === option.id}
+            <span
+              class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-ripple-error text-ripple-accent-foreground"
+            >
+              <Icon name="x" size={14} />
+            </span>
+          {:else}
+            <span class="h-6 w-6 shrink-0 rounded-full border-2 border-muted-foreground/30"></span>
+          {/if}
+        {:else}
+          <SelectionIndicator selected={selectedId === option.id} mode="single" />
+        {/if}
+
+        <span class="flex-1 text-ripple-surface-foreground">{option.text}</span>
+      </button>
+    {/each}
+  </div>
+
+  {#if !submitted}
+    <button
+      type="button"
+      class={cn(
+        'w-full rounded-ripple px-6 py-3 font-semibold transition-all duration-200',
+        selectedId
+          ? 'bg-ripple-accent text-ripple-accent-foreground hover:opacity-90'
+          : 'cursor-not-allowed bg-ripple-muted text-muted-foreground',
+      )}
+      onclick={submitAnswer}
+      disabled={!selectedId}
+    >
+      {submitLabel}
+    </button>
+  {/if}
+</div>

package/dist/organisms/QuizQuestion.svelte.d.ts

@@ -0,0 +1,19 @@
+interface QuizOption {
+    id: string;
+    text: string;
+    correct?: boolean;
+}
+interface Props {
+    question: string;
+    questionNumber?: number;
+    totalQuestions?: number;
+    options: QuizOption[];
+    /** When true, reveal correct/incorrect chrome after submitting. */
+    showFeedback?: boolean;
+    submitLabel?: string;
+    onAnswer?: (optionId: string, isCorrect: boolean) => void;
+    class?: string;
+}
+declare const QuizQuestion: import("svelte").Component<Props, {}, "">;
+type QuizQuestion = ReturnType<typeof QuizQuestion>;
+export default QuizQuestion;

package/dist/organisms/ResultsSummary.svelte

@@ -0,0 +1,97 @@
+<!--
+  ResultsSummary.svelte — RIPPLE-NATIVE organism (Wave 2: organisms).
+  Created 2026-06-07.
+  Adapted from ocean-flow's organisms/ResultsSummary.svelte, rewired off genesis
+  IconWidget/shadcn onto ripple's display/Icon + design tokens. The genesis
+  quiz-score block is intentionally dropped here — that lives in QuizQuestion; this
+  organism is the domain-agnostic confirm/review summary the SummaryLayout composes.
+
+  A labelled key→value review: a card of summary rows (optional leading icon,
+  optional highlight) plus an optional emphasised total row. Pure presentation —
+  props in, UI out. No data fetching, no services.
+-->
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import Icon from '../widgets/display/Icon.svelte';
+
+  interface SummaryItem {
+    label: string;
+    value: string;
+    /** Lucide icon slug (kebab-case) for the leading tile. */
+    icon?: string;
+    /** Render the value in the accent colour. */
+    highlight?: boolean;
+  }
+
+  interface TotalRow {
+    label: string;
+    value: string;
+  }
+
+  interface Props {
+    title?: string;
+    items: SummaryItem[];
+    /** Optional emphasised total row pinned below the items. */
+    total?: TotalRow;
+    class?: string;
+  }
+
+  let { title, items, total, class: className }: Props = $props();
+</script>
+
+<div class={cn('flex flex-col gap-4', className)}>
+  {#if title}
+    <h3 class="text-lg font-semibold tracking-tight text-ripple-surface-foreground">
+      {title}
+    </h3>
+  {/if}
+
+  {#if items.length > 0}
+    <div
+      class="divide-y divide-ripple-border/40 overflow-hidden rounded-ripple border border-ripple-border/60 bg-ripple-surface shadow-sm"
+      role="list"
+      aria-label={title ?? 'Summary'}
+    >
+      {#each items as item (item.label)}
+        <div
+          class="group flex items-center justify-between gap-4 px-5 py-3.5 transition-colors hover:bg-ripple-muted/40"
+          role="listitem"
+        >
+          <div class="flex min-w-0 flex-1 items-center gap-3">
+            {#if item.icon}
+              <div
+                class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-ripple-muted text-muted-foreground transition-transform duration-200 group-hover:scale-105"
+              >
+                <Icon name={item.icon} size={18} />
+              </div>
+            {/if}
+            <span class="truncate text-sm font-medium text-muted-foreground">
+              {item.label}
+            </span>
+          </div>
+
+          <span
+            class={cn(
+              'shrink-0 text-right text-base font-semibold',
+              item.highlight ? 'text-ripple-accent' : 'text-ripple-surface-foreground',
+            )}
+          >
+            {item.value}
+          </span>
+        </div>
+      {/each}
+
+      {#if total}
+        <div
+          class="flex items-center justify-between gap-4 bg-ripple-muted/30 px-5 py-4"
+          role="listitem"
+        >
+          <span class="text-sm font-semibold text-ripple-surface-foreground">
+            {total.label}
+          </span>
+          <span class="text-lg font-bold text-ripple-accent">{total.value}</span>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/dist/organisms/ResultsSummary.svelte.d.ts

@@ -0,0 +1,22 @@
+interface SummaryItem {
+    label: string;
+    value: string;
+    /** Lucide icon slug (kebab-case) for the leading tile. */
+    icon?: string;
+    /** Render the value in the accent colour. */
+    highlight?: boolean;
+}
+interface TotalRow {
+    label: string;
+    value: string;
+}
+interface Props {
+    title?: string;
+    items: SummaryItem[];
+    /** Optional emphasised total row pinned below the items. */
+    total?: TotalRow;
+    class?: string;
+}
+declare const ResultsSummary: import("svelte").Component<Props, {}, "">;
+type ResultsSummary = ReturnType<typeof ResultsSummary>;
+export default ResultsSummary;