onboardme-sdk 0.0.1

package/src/__tests__/week3-day1.test.ts

@@ -0,0 +1,169 @@
+/**
+ * Week 3 Day 1 — Progress Tracker (storage layer)
+ *
+ * Verifies all five functions in src/storage/progress-tracker.ts:
+ *   loadProgress   — reads from localStorage, returns default when absent/corrupt
+ *   saveProgress   — persists completedSteps + timestamp
+ *   markStepComplete — idempotent write; no duplicate step IDs
+ *   isStepComplete — boolean check against stored completedSteps
+ *   clearProgress  — removes the key entirely
+ *
+ * Storage key format: onboardme_progress_{productId}_{flowId}
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import {
+  loadProgress,
+  saveProgress,
+  markStepComplete,
+  isStepComplete,
+  clearProgress,
+} from '../storage/progress-tracker.js';
+
+const PID = 'test-product';
+const FID = 'flow-1';
+const KEY = `onboardme_progress_${PID}_${FID}`;
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+// ---------------------------------------------------------------------------
+// loadProgress
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 1 — loadProgress', () => {
+  it('returns { completedSteps: [], lastUpdated: 0 } when key is absent', () => {
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toEqual([]);
+    expect(result.lastUpdated).toBe(0);
+  });
+
+  it('returns the empty default when stored value is corrupted JSON', () => {
+    localStorage.setItem(KEY, '%%not-valid-json%%');
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toEqual([]);
+    expect(result.lastUpdated).toBe(0);
+  });
+
+  it('does not throw when localStorage contains corrupted JSON', () => {
+    localStorage.setItem(KEY, '{broken:');
+    expect(() => loadProgress(PID, FID)).not.toThrow();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// saveProgress
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 1 — saveProgress', () => {
+  it('writes data under the correct localStorage key', () => {
+    saveProgress(PID, FID, ['step-1']);
+    expect(localStorage.getItem(KEY)).not.toBeNull();
+  });
+
+  it('persists the completedSteps array', () => {
+    saveProgress(PID, FID, ['step-1', 'step-2']);
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toEqual(['step-1', 'step-2']);
+  });
+
+  it('stores a non-zero lastUpdated timestamp', () => {
+    const before = Date.now();
+    saveProgress(PID, FID, ['step-1']);
+    const result = loadProgress(PID, FID);
+    expect(result.lastUpdated).toBeGreaterThanOrEqual(before);
+  });
+
+  it('overwrites previous progress for the same productId + flowId', () => {
+    saveProgress(PID, FID, ['step-1', 'step-2']);
+    saveProgress(PID, FID, ['step-3']);
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toEqual(['step-3']);
+  });
+
+  it('correctly persists an empty completedSteps array', () => {
+    saveProgress(PID, FID, []);
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toEqual([]);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// markStepComplete
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 1 — markStepComplete', () => {
+  it('adds the stepId to completedSteps', () => {
+    markStepComplete(PID, FID, 'step-a');
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toContain('step-a');
+  });
+
+  it('calling twice with the same stepId does not create a duplicate', () => {
+    markStepComplete(PID, FID, 'step-a');
+    markStepComplete(PID, FID, 'step-a');
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps.filter((id) => id === 'step-a')).toHaveLength(1);
+  });
+
+  it('accumulates multiple different step IDs', () => {
+    markStepComplete(PID, FID, 'step-a');
+    markStepComplete(PID, FID, 'step-b');
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toEqual(['step-a', 'step-b']);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// isStepComplete
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 1 — isStepComplete', () => {
+  it('returns true for a step that has been marked complete', () => {
+    markStepComplete(PID, FID, 'step-x');
+    expect(isStepComplete(PID, FID, 'step-x')).toBe(true);
+  });
+
+  it('returns false for a step that has not been marked complete', () => {
+    expect(isStepComplete(PID, FID, 'step-x')).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// clearProgress
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 1 — clearProgress', () => {
+  it('removes the localStorage key entirely', () => {
+    saveProgress(PID, FID, ['step-1']);
+    clearProgress(PID, FID);
+    expect(localStorage.getItem(KEY)).toBeNull();
+  });
+
+  it('loadProgress returns the empty default after clearProgress', () => {
+    saveProgress(PID, FID, ['step-1', 'step-2']);
+    clearProgress(PID, FID);
+    const result = loadProgress(PID, FID);
+    expect(result.completedSteps).toEqual([]);
+    expect(result.lastUpdated).toBe(0);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Isolation
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 1 — isolation', () => {
+  it('progress is isolated per productId — saving for product A does not affect product B', () => {
+    saveProgress('product-a', FID, ['step-1']);
+    const resultB = loadProgress('product-b', FID);
+    expect(resultB.completedSteps).toEqual([]);
+  });
+
+  it('progress is isolated per flowId — saving for flow A does not affect flow B', () => {
+    saveProgress(PID, 'flow-a', ['step-1']);
+    const resultB = loadProgress(PID, 'flow-b');
+    expect(resultB.completedSteps).toEqual([]);
+  });
+});

package/src/__tests__/week3-day2.test.ts

@@ -0,0 +1,267 @@
+/**
+ * Week 3 Day 2 — Checklist HTML Structure (checklist.ts)
+ *
+ * Verifies renderChecklist() builds the correct DOM inside a Shadow DOM root:
+ *   ✓ Panel appended to shadow root with correct class
+ *   ✓ Header shows "Getting started" title + collapse button
+ *   ✓ Progress label reflects completedSteps count
+ *   ✓ Progress bar fill width reflects required-item completion ratio
+ *   ✓ Items rendered in order field sequence (not array order)
+ *   ✓ Completed items get .om-checklist__item--done
+ *   ✓ optional items (required: false) get .om-checklist__item--optional + "Optional" badge
+ *   ✓ Required items have no optional badge
+ *   ✓ >7 items → console.warn fired, all items still rendered
+ *   ✓ CSS injected into shadow root style element (not document.head)
+ *   ✓ Calling renderChecklist twice replaces panel (no duplicate)
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderChecklist } from '../components/checklist.js';
+import { getShadowRoot } from '../components/shadow-host.js';
+import type { FlowConfig, FlowStep, ChecklistItem } from '@onboardme/types';
+import type { Progress } from '../storage/progress-tracker.js';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function makeItem(overrides: Partial<ChecklistItem> = {}): ChecklistItem {
+  return {
+    id: 'item-1',
+    label: 'Do the thing',
+    order: 1,
+    ...overrides,
+  };
+}
+
+function makeFlow(items: ChecklistItem[]): FlowConfig {
+  const checklistStep: FlowStep = {
+    id: 'cl-step',
+    type: 'checklist',
+    order: 1,
+    title: 'Getting started',
+    body: '',
+    items,
+    trigger: { type: 'page_load' },
+    completionGoal: 'onboarding_complete',
+  } as unknown as FlowStep;
+
+  return {
+    id: 'flow-1',
+    name: 'Onboarding',
+    steps: [checklistStep],
+    completionGoal: 'onboarding_complete',
+    priority: 1,
+  };
+}
+
+const EMPTY_PROGRESS: Progress = { completedSteps: [], lastUpdated: 0 };
+
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+
+let shadowRoot: ShadowRoot;
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+  shadowRoot = getShadowRoot();
+});
+
+// ---------------------------------------------------------------------------
+// Panel structure
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — renderChecklist panel structure', () => {
+  it('appends .om-checklist panel to the shadow root', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    const panel = shadowRoot.querySelector('.om-checklist');
+    expect(panel).not.toBeNull();
+  });
+
+  it('panel has data-onboardme="checklist" attribute', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    const panel = shadowRoot.querySelector('[data-onboardme="checklist"]');
+    expect(panel).not.toBeNull();
+  });
+
+  it('header contains the title "Getting started"', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    const title = shadowRoot.querySelector('.om-checklist__title');
+    expect(title?.textContent).toBe('Getting started');
+  });
+
+  it('header contains a collapse button', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    const btn = shadowRoot.querySelector('[data-onboardme="checklist-collapse"]');
+    expect(btn).not.toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Progress label + bar
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — progress label', () => {
+  it('shows "0 of N complete" when no items are done', () => {
+    const items = [makeItem({ id: 'a', order: 1 }), makeItem({ id: 'b', order: 2 })];
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot);
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('0 of 2 complete');
+  });
+
+  it('shows "X of N complete" when some items are done', () => {
+    const items = [makeItem({ id: 'a', order: 1 }), makeItem({ id: 'b', order: 2 }), makeItem({ id: 'c', order: 3 })];
+    const progress: Progress = { completedSteps: ['a', 'b'], lastUpdated: 1 };
+    renderChecklist(makeFlow(items), progress, shadowRoot);
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('2 of 3 complete');
+  });
+
+  it('progress bar fill width reflects required completion ratio', () => {
+    const items = [
+      makeItem({ id: 'a', order: 1, required: true }),
+      makeItem({ id: 'b', order: 2, required: true }),
+      makeItem({ id: 'c', order: 3, required: false }),
+    ];
+    // 1 of 2 required done = 50%
+    const progress: Progress = { completedSteps: ['a'], lastUpdated: 1 };
+    renderChecklist(makeFlow(items), progress, shadowRoot);
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(fill?.style.width).toBe('50%');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Item ordering
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — item ordering', () => {
+  it('renders items in order field sequence regardless of array order', () => {
+    const items = [
+      makeItem({ id: 'c', label: 'Third', order: 3 }),
+      makeItem({ id: 'a', label: 'First', order: 1 }),
+      makeItem({ id: 'b', label: 'Second', order: 2 }),
+    ];
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot);
+    const rendered = shadowRoot.querySelectorAll('.om-checklist__item');
+    expect(rendered[0]?.getAttribute('data-item-id')).toBe('a');
+    expect(rendered[1]?.getAttribute('data-item-id')).toBe('b');
+    expect(rendered[2]?.getAttribute('data-item-id')).toBe('c');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Done state
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — done state', () => {
+  it('completed item has .om-checklist__item--done', () => {
+    const items = [makeItem({ id: 'done-item', order: 1 })];
+    const progress: Progress = { completedSteps: ['done-item'], lastUpdated: 1 };
+    renderChecklist(makeFlow(items), progress, shadowRoot);
+    const li = shadowRoot.querySelector('[data-item-id="done-item"]');
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(true);
+  });
+
+  it('uncompleted item does NOT have .om-checklist__item--done', () => {
+    const items = [makeItem({ id: 'todo-item', order: 1 })];
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot);
+    const li = shadowRoot.querySelector('[data-item-id="todo-item"]');
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Optional badge
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — optional badge', () => {
+  it('item with required: false has .om-checklist__item--optional class', () => {
+    const items = [makeItem({ id: 'opt', order: 1, required: false })];
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot);
+    const li = shadowRoot.querySelector('[data-item-id="opt"]');
+    expect(li?.classList.contains('om-checklist__item--optional')).toBe(true);
+  });
+
+  it('item with required: false shows "Optional" badge in the DOM', () => {
+    const items = [makeItem({ id: 'opt', order: 1, required: false })];
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot);
+    const badge = shadowRoot.querySelector('[data-item-id="opt"] .om-badge');
+    expect(badge?.textContent).toBe('Optional');
+  });
+
+  it('required item does NOT have the optional badge', () => {
+    const items = [makeItem({ id: 'req', order: 1, required: true })];
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot);
+    const badge = shadowRoot.querySelector('[data-item-id="req"] .om-badge');
+    expect(badge).toBeNull();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// >7 items warning
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — >7 items warning', () => {
+  it('logs a console.warn when more than 7 items are present (debug mode)', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const items = Array.from({ length: 8 }, (_, i) =>
+      makeItem({ id: `item-${i}`, label: `Item ${i}`, order: i + 1 }),
+    );
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot, true);
+    expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('more than 7 items'));
+    warnSpy.mockRestore();
+  });
+
+  it('still renders all items even when >7 are present', () => {
+    const items = Array.from({ length: 8 }, (_, i) =>
+      makeItem({ id: `item-${i}`, label: `Item ${i}`, order: i + 1 }),
+    );
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot, true);
+    const rendered = shadowRoot.querySelectorAll('.om-checklist__item');
+    expect(rendered).toHaveLength(8);
+  });
+
+  it('does NOT warn when 7 or fewer items are present', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const items = Array.from({ length: 7 }, (_, i) =>
+      makeItem({ id: `item-${i}`, label: `Item ${i}`, order: i + 1 }),
+    );
+    renderChecklist(makeFlow(items), EMPTY_PROGRESS, shadowRoot, true);
+    expect(warnSpy).not.toHaveBeenCalled();
+    warnSpy.mockRestore();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Style isolation
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — style isolation', () => {
+  it('injects CSS into the shadow root style element', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    const style = shadowRoot.querySelector('style');
+    expect(style?.textContent).toContain('.om-checklist');
+  });
+
+  it('does not inject checklist CSS into document.head', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    const headStyles = document.head.querySelectorAll('style');
+    const leaked = Array.from(headStyles).some((s) => s.textContent?.includes('.om-checklist'));
+    expect(leaked).toBe(false);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Re-render deduplication
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 2 — re-render deduplication', () => {
+  it('calling renderChecklist twice does not create a duplicate panel', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    renderChecklist(makeFlow([makeItem()]), EMPTY_PROGRESS, shadowRoot);
+    const panels = shadowRoot.querySelectorAll('[data-onboardme="checklist"]');
+    expect(panels).toHaveLength(1);
+  });
+});

package/src/__tests__/week3-day3.test.ts

@@ -0,0 +1,213 @@
+/**
+ * Week 3 Day 3 — Checklist Interactivity + Persistence
+ *
+ * Verifies the click and collapse behaviour added to checklist.ts:
+ *   ✓ Clicking unchecked item → adds .om-checklist__item--done + check mark
+ *   ✓ Clicking unchecked item → calls markStepComplete (verified via isStepComplete)
+ *   ✓ Clicking unchecked item → updates progress label
+ *   ✓ Clicking unchecked item → updates progress bar fill
+ *   ✓ Clicking already-done item → no change (progress is additive, not a toggle)
+ *   ✓ Clicking already-done item → no duplicate in completedSteps
+ *   ✓ Collapse button → adds .om-checklist--collapsed to the panel
+ *   ✓ Clicking collapsed panel → removes .om-checklist--collapsed
+ *   ✓ Collapsed pill shows correct "X / N" count
+ *   ✓ Collapse state is NOT persisted — renderChecklist always renders expanded
+ */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { renderChecklist } from '../components/checklist.js';
+import { getShadowRoot } from '../components/shadow-host.js';
+import { isStepComplete, clearProgress } from '../storage/progress-tracker.js';
+import type { FlowConfig, FlowStep, ChecklistItem } from '@onboardme/types';
+import type { Progress } from '../storage/progress-tracker.js';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const PID = 'day3-product';
+const FID = 'day3-flow';
+
+function makeItem(overrides: Partial<ChecklistItem> = {}): ChecklistItem {
+  return { id: 'item-1', label: 'Do the thing', order: 1, ...overrides };
+}
+
+function makeFlow(items: ChecklistItem[]): FlowConfig {
+  const step: FlowStep = {
+    id: 'cl-step',
+    type: 'checklist',
+    order: 1,
+    title: 'Getting started',
+    body: '',
+    items,
+    trigger: { type: 'page_load' },
+    completionGoal: 'done',
+  } as unknown as FlowStep;
+  return { id: FID, name: 'Onboarding', steps: [step], completionGoal: 'done', priority: 1 };
+}
+
+const EMPTY: Progress = { completedSteps: [], lastUpdated: 0 };
+
+function click(el: Element | null): void {
+  el?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+}
+
+// ---------------------------------------------------------------------------
+// Setup
+// ---------------------------------------------------------------------------
+
+let shadowRoot: ShadowRoot;
+
+beforeEach(() => {
+  document.body.innerHTML = '';
+  localStorage.clear();
+  shadowRoot = getShadowRoot();
+});
+
+// ---------------------------------------------------------------------------
+// Item click — visual
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 3 — item click (visual)', () => {
+  it('clicking an unchecked item adds .om-checklist__item--done', () => {
+    renderChecklist(makeFlow([makeItem({ id: 'a' })]), EMPTY, shadowRoot);
+    const li = shadowRoot.querySelector('[data-item-id="a"]');
+    click(li);
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(true);
+  });
+
+  it('clicking an unchecked item shows the check mark inside the circle', () => {
+    renderChecklist(makeFlow([makeItem({ id: 'a' })]), EMPTY, shadowRoot);
+    const li = shadowRoot.querySelector('[data-item-id="a"]');
+    click(li);
+    const checkEl = li?.querySelector('.om-checklist__item-check');
+    expect(checkEl?.textContent).toBe('✓');
+  });
+
+  it('clicking an already-done item does not change its classes', () => {
+    const progress: Progress = { completedSteps: ['a'], lastUpdated: 1 };
+    renderChecklist(makeFlow([makeItem({ id: 'a' })]), progress, shadowRoot);
+    const li = shadowRoot.querySelector('[data-item-id="a"]');
+    click(li);
+    // Still has done class — nothing was removed
+    expect(li?.classList.contains('om-checklist__item--done')).toBe(true);
+    // classList length is the same as before the click
+    const classList = Array.from(li?.classList ?? []);
+    expect(classList.filter((c) => c === 'om-checklist__item--done')).toHaveLength(1);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Item click — persistence
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 3 — item click (persistence)', () => {
+  it('clicking an unchecked item calls markStepComplete (isStepComplete returns true)', () => {
+    renderChecklist(makeFlow([makeItem({ id: 'step-a' })]), EMPTY, shadowRoot, false, PID, FID);
+    click(shadowRoot.querySelector('[data-item-id="step-a"]'));
+    expect(isStepComplete(PID, FID, 'step-a')).toBe(true);
+  });
+
+  it('clicking the same item twice does not add a duplicate to completedSteps', () => {
+    clearProgress(PID, FID);
+    renderChecklist(makeFlow([makeItem({ id: 'step-b' })]), EMPTY, shadowRoot, false, PID, FID);
+    click(shadowRoot.querySelector('[data-item-id="step-b"]'));
+    click(shadowRoot.querySelector('[data-item-id="step-b"]'));
+    // Read progress directly from localStorage via loadProgress indirection
+    // We can verify via the label — should still say "1 of 1 complete"
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('1 of 1 complete');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Item click — progress bar + label
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 3 — item click (progress updates)', () => {
+  it('clicking an item updates the progress label', () => {
+    const items = [makeItem({ id: 'a', order: 1 }), makeItem({ id: 'b', order: 2 })];
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot);
+    click(shadowRoot.querySelector('[data-item-id="a"]'));
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(label?.textContent).toBe('1 of 2 complete');
+  });
+
+  it('clicking an item updates the progress bar fill', () => {
+    const items = [
+      makeItem({ id: 'a', order: 1, required: true }),
+      makeItem({ id: 'b', order: 2, required: true }),
+    ];
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot);
+    click(shadowRoot.querySelector('[data-item-id="a"]'));
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    expect(fill?.style.width).toBe('50%');
+  });
+
+  it('optional items count in the label but not in the required bar fill', () => {
+    const items = [
+      makeItem({ id: 'req', order: 1, required: true }),
+      makeItem({ id: 'opt', order: 2, required: false }),
+    ];
+    // Complete the optional item — bar should stay at 0%, label says 1 of 2
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot);
+    click(shadowRoot.querySelector('[data-item-id="opt"]'));
+    const fill = shadowRoot.querySelector<HTMLElement>('.om-checklist__progress-bar-fill');
+    const label = shadowRoot.querySelector('[data-onboardme="progress-label"]');
+    expect(fill?.style.width).toBe('0%');
+    expect(label?.textContent).toBe('1 of 2 complete');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Collapse / expand
+// ---------------------------------------------------------------------------
+
+describe('Week 3 Day 3 — collapse / expand', () => {
+  it('collapse button adds .om-checklist--collapsed to the panel', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY, shadowRoot);
+    const btn = shadowRoot.querySelector('[data-onboardme="checklist-collapse"]');
+    click(btn);
+    const panel = shadowRoot.querySelector('[data-onboardme="checklist"]');
+    expect(panel?.classList.contains('om-checklist--collapsed')).toBe(true);
+  });
+
+  it('clicking the collapsed panel removes .om-checklist--collapsed', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY, shadowRoot);
+    const btn = shadowRoot.querySelector('[data-onboardme="checklist-collapse"]');
+    const panel = shadowRoot.querySelector('[data-onboardme="checklist"]');
+    click(btn);
+    expect(panel?.classList.contains('om-checklist--collapsed')).toBe(true);
+    click(panel);
+    expect(panel?.classList.contains('om-checklist--collapsed')).toBe(false);
+  });
+
+  it('collapsed pill shows correct "X / N" count', () => {
+    const items = [makeItem({ id: 'a', order: 1 }), makeItem({ id: 'b', order: 2 })];
+    const progress: Progress = { completedSteps: ['a'], lastUpdated: 1 };
+    renderChecklist(makeFlow(items), progress, shadowRoot);
+    const countEl = shadowRoot.querySelector('[data-onboardme="collapsed-count"]');
+    expect(countEl?.textContent).toBe('1 / 2');
+  });
+
+  it('collapsed count updates when an item is checked then collapsed', () => {
+    const items = [makeItem({ id: 'a', order: 1 }), makeItem({ id: 'b', order: 2 })];
+    renderChecklist(makeFlow(items), EMPTY, shadowRoot);
+    // Check item a
+    click(shadowRoot.querySelector('[data-item-id="a"]'));
+    // Now collapse
+    click(shadowRoot.querySelector('[data-onboardme="checklist-collapse"]'));
+    const countEl = shadowRoot.querySelector('[data-onboardme="collapsed-count"]');
+    expect(countEl?.textContent).toBe('1 / 2');
+  });
+
+  it('collapse state is not persisted — renderChecklist always renders expanded', () => {
+    renderChecklist(makeFlow([makeItem()]), EMPTY, shadowRoot);
+    // Collapse it
+    click(shadowRoot.querySelector('[data-onboardme="checklist-collapse"]'));
+    // Re-render (simulates page reload)
+    renderChecklist(makeFlow([makeItem()]), EMPTY, shadowRoot);
+    const panel = shadowRoot.querySelector('[data-onboardme="checklist"]');
+    expect(panel?.classList.contains('om-checklist--collapsed')).toBe(false);
+  });
+});