Exclusivobeta
Prep List <mv-prep-list>
Tarjeta de preparación “Before you start” para flujos largos o delicados (solicitudes de préstamo, de visado o de seguro, verificación de identidad, declaración de impuestos, incorporación de empleados, una migración de base de datos, un despliegue a producción). Enumera todo lo que el usuario va a necesitar (documentos, números, accesos, dispositivos, decisiones, otras personas), con el motivo de cada cosa, dónde encontrarla (“In your bank app, under Account details”, con los enlaces conservados) y qué paso la usa, con enlace directo. Los usuarios marcan lo que ya tienen o marcan un elemento como “I’ll get it later”: no es un error, el flujo simplemente se detiene en ese paso. Una estimación de tiempo honesta suma la duración propia del flujo al tiempo necesario para reunir lo que no está listo (“About 35 min · 15 min with everything at hand, plus 20 min to gather 2 items”), y un medidor segmentado (sólido para lo listo, rayado para lo pendiente) muestra de un vistazo el grado de preparación. Los detalles se pliegan a medida que los elementos están listos, así que el puesto se despeja mientras te preparas. El botón Start siempre explica su estado (“2 items not ready yet. You can still begin…”) y solo bloquea mientras falta un elemento necesario para empezar; en ese caso, al pulsarlo salta a ese elemento en lugar de fallar en silencio. Una vez empezado, la tarjeta se reduce a un chip compacto “Prepared · 5 of 7 ready · 1 for later” que vuelve a abrir la lista para poder marcar elementos a mitad del flujo. El flujo lee el estado (ready, canStart, missing, later, getState()) y escucha mv-prep-change; mv-start es cancelable, y el progreso se conserva por navegador con una clave de almacenamiento opcional, sincronizada entre pestañas.
| Categoría | Formularios |
|---|---|
| Tipo | Web Component (<mv-prep-list>) |
| Estado | beta |
| Kit | Formularios que no pierden a nadie |
| También instala | button, checkbox |
| Keywords | exclusive, culture, checklist, prerequisites, before-you-start, preparation, readiness, onboarding, application, kyc, verification, tax, runbook, release, time-estimate, defer, resume, persistence, local-storage, form |
When to use
- A long application or verification flow fails midway when users lack a document, number or login they could have gathered first
- Users should see an honest time estimate and what to prepare before committing to a tax filing, visa or insurance form
- An onboarding, migration or release runbook needs its prerequisites confirmed, with only a few truly blocking the start
- The flow can pause at a step and resume later, so a missing item should be deferred instead of blocking everything
Avoid when
- The user is already inside the flow and needs to see or move between its steps → use Stepper instead
- The goal is to nudge a user who is stuck on a form, not to prepare before starting → use Insist instead
- The flow takes under a minute and needs nothing the user doesn’t already know: a checklist only adds friction
Instalación
node scripts/add.mjs prep-list --out ./src/marvelousAgente de IA con el servidor MCP de Marvelous UI: install_components({ slugs: ["prep-list"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Archivos copiados (dependencias incluidas): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, components/prep-list/prep-list.js, components/prep-list/prep-list.css, components/button/button.css, components/checkbox/checkbox.css.
Uso
Inicio rápido, el marcado mínimo que funciona:
<mv-prep-list heading="Before you apply" duration="15m" start-label="Start application">
<div data-prep="photo-id" data-prep-kind="document" data-prep-requirement="required-to-start"><strong>Photo ID</strong><p data-prep-why>We match it with a selfie.</p></div>
<div data-prep="iban" data-prep-kind="number" data-prep-time="3m"><strong>Your bank account number</strong><p data-prep-where>In your bank app, under Account details.</p></div>
</mv-prep-list>Marcado de referencia: parte de él y personalízalo con atributos, data-* y variables CSS:
<div id="pl-demo" style="width:min(100%,66rem);margin-inline:auto">
<style>
#pl-demo { display:grid; gap:2.5rem }
#pl-demo .pl-layout { display:grid; grid-template-columns:minmax(0,1fr) 19rem; gap:1.25rem; align-items:start }
#pl-demo .pl-flow { position:sticky; top:1rem; display:grid; gap:1rem; padding:1.125rem; border:1px solid var(--mv-border); border-radius:var(--mv-radius-xl); background:var(--mv-surface-raised); box-shadow:var(--mv-shadow-sm); font-size:.8125rem }
#pl-demo .pl-flow-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem }
#pl-demo .pl-flow-head h4 { margin:0; font-size:.875rem; font-weight:600; letter-spacing:-.01em }
#pl-demo .pl-k { margin:0; color:var(--mv-fg-muted); font-size:.6875rem; letter-spacing:.04em; text-transform:uppercase; font-weight:600 }
#pl-demo .pl-steps { display:grid; gap:.25rem; margin:0; padding:0; list-style:none; counter-reset:pl }
#pl-demo .pl-step { display:grid; grid-template-columns:1.5rem minmax(0,1fr) auto; gap:.125rem .625rem; align-items:center; padding:.5rem .5rem; border-radius:var(--mv-radius-md); transition:background-color var(--mv-duration-normal) var(--mv-ease-out), box-shadow var(--mv-duration-normal) var(--mv-ease-out) }
#pl-demo .pl-step::before { counter-increment:pl; content:counter(pl); display:grid; place-items:center; width:1.5rem; height:1.5rem; border-radius:50%; background:var(--mv-bg-muted); color:var(--mv-fg-muted); font-size:.6875rem; font-weight:600; font-variant-numeric:tabular-nums }
#pl-demo .pl-step[data-current]::before { background:var(--mv-accent); color:var(--mv-fg-on-accent) }
#pl-demo .pl-step[data-flash] { background:var(--mv-accent-subtle); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--mv-accent) 40%, transparent) }
#pl-demo .pl-step b { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#pl-demo .pl-step small { grid-column:2 / -1; color:var(--mv-fg-muted); font-size:.75rem; line-height:1.35 }
#pl-demo .pl-step small:empty { display:none }
#pl-demo .pl-find { padding:0; border:0; background:none; color:var(--mv-accent); font:inherit; font-weight:500; text-decoration:underline; text-underline-offset:2px; cursor:pointer; border-radius:var(--mv-radius-xs) }
#pl-demo .pl-find:focus-visible { outline:none; box-shadow:var(--mv-focus-ring) }
#pl-demo .pl-sep { height:1px; margin:0; border:0; background:var(--mv-border) }
#pl-demo .pl-state { display:grid; grid-template-columns:auto 1fr; gap:.25rem .75rem; margin:0; font-size:.75rem }
#pl-demo .pl-state dt { color:var(--mv-fg-muted) }
#pl-demo .pl-state dd { margin:0; font-family:var(--mv-font-mono); font-size:.6875rem; text-align:end; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#pl-demo .pl-log { min-height:2.5rem; margin:0; padding:.5rem .625rem; border-radius:var(--mv-radius-md); background:var(--mv-bg-subtle); color:var(--mv-fg-muted); font:.6875rem/1.5 var(--mv-font-mono); overflow-wrap:anywhere }
#pl-demo .pl-controls { display:grid; gap:.625rem }
#pl-demo .pl-controls .mv-choice { font-size:.8125rem }
#pl-demo .pl-row { display:flex; gap:.5rem; flex-wrap:wrap }
#pl-demo .pl-section-head { display:grid; gap:.25rem; margin:0 0 1rem }
#pl-demo .pl-section-head h3 { margin:0; font-size:1rem; letter-spacing:-.01em }
#pl-demo .pl-section-head p { margin:0; color:var(--mv-fg-muted); font-size:.8125rem; max-width:44rem }
#pl-demo .pl-release { max-width:46rem }
@media (max-width:56rem) {
#pl-demo .pl-layout { grid-template-columns:minmax(0,1fr) }
#pl-demo .pl-flow { position:static }
}
</style>
<!-- Main: a personal loan application. Two items are ready to find, one is set aside for later. -->
<div class="pl-layout">
<mv-prep-list id="pl-loan" heading="Before you apply for your personal loan" heading-level="3" duration="15m" start-label="Start application">
<p slot="intro">The application itself takes about 15 minutes when you have everything below. Nothing is submitted until you sign, and you can stop at any step.</p>
<div data-prep="amount" data-prep-kind="decision" data-prep-time="5m" data-prep-step="Step 1 · Loan amount" data-prep-href="#pl-step-1" data-prep-state="ready">
<strong>How much to borrow, and over how long</strong>
<p data-prep-why>Your rate depends on both. You can still adjust them until you sign.</p>
<p data-prep-where>Use the loan calculator on the previous page. Most people choose 36 or 60 months.</p>
</div>
<div data-prep="phone" data-prep-kind="device" data-prep-requirement="required-to-start" data-prep-step="Step 2 · Identity" data-prep-href="#pl-step-2" data-prep-state="ready">
<strong>Your mobile phone</strong>
<p data-prep-why>We text a 6-digit code to confirm it’s you, and again when you e-sign.</p>
<p data-prep-where>Use the number your bank has on file, so the check goes through instantly.</p>
</div>
<div data-prep="photo-id" data-prep-kind="document" data-prep-time="2m" data-prep-requirement="required-to-start" data-prep-step="Step 2 · Identity" data-prep-href="#pl-step-2" data-prep-state="ready">
<strong>A photo ID</strong>
<p data-prep-why>We match it against a quick selfie, so no one can apply in your name.</p>
<p data-prep-where>Driver’s license, state ID or passport: the physical card, not a photocopy or a picture of it.</p>
</div>
<div data-prep="ssn" data-prep-kind="number" data-prep-time="5m" data-prep-step="Step 3 · About you" data-prep-href="#pl-step-3">
<strong>Your Social Security number</strong>
<p data-prep-why>It’s used for a soft credit check that won’t affect your score.</p>
<p data-prep-where>On your Social Security card, or on last year’s tax return (<b>Form 1040</b>, page 1).</p>
</div>
<div data-prep="paystubs" data-prep-kind="document" data-prep-time="10m" data-prep-step="Step 4 · Income" data-prep-href="#pl-step-4">
<strong>Your two most recent pay stubs</strong>
<p data-prep-why>They confirm your income, which sets how much you can borrow.</p>
<p data-prep-where>Your employer’s payroll portal, usually under <b>Pay › Statements</b>. PDFs or clear photos both work.</p>
</div>
<div data-prep="bank" data-prep-kind="number" data-prep-time="3m" data-prep-step="Step 5 · Payout" data-prep-href="#pl-step-5" data-prep-state="later">
<strong>Bank account and routing numbers</strong>
<p data-prep-why>The loan is paid into this account, and repayments come out of it.</p>
<p data-prep-where>In your bank app under <b>Account details</b>, or printed at the bottom of a check.</p>
</div>
<div data-prep="co-applicant" data-prep-kind="person" data-prep-requirement="optional" data-prep-step="Step 3 · About you" data-prep-href="#pl-step-3">
<strong>Your co-applicant’s details</strong>
<p data-prep-why>Only if you apply jointly: their name, date of birth and income.</p>
<p data-prep-where>Ask them beforehand; they’ll receive a text to confirm.</p>
</div>
</mv-prep-list>
<aside class="pl-flow" aria-label="Application flow (demo)">
<div class="pl-flow-head">
<h4>Your application</h4>
<span class="mv-badge" data-variant="secondary" id="pl-flow-badge">Not started</span>
</div>
<ol class="pl-steps" id="pl-steps">
<li class="pl-step" id="pl-step-1" data-items="amount"><b>Loan amount</b><span></span><small></small></li>
<li class="pl-step" id="pl-step-2" data-items="phone photo-id"><b>Identity</b><span></span><small></small></li>
<li class="pl-step" id="pl-step-3" data-items="ssn co-applicant"><b>About you</b><span></span><small></small></li>
<li class="pl-step" id="pl-step-4" data-items="paystubs"><b>Income</b><span></span><small></small></li>
<li class="pl-step" id="pl-step-5" data-items="bank"><b>Payout account</b><span></span><small></small></li>
<li class="pl-step" id="pl-step-6" data-items=""><b>Review & e-sign</b><span></span><small></small></li>
</ol>
<hr class="pl-sep">
<p class="pl-k">What the flow reads</p>
<dl class="pl-state">
<dt>ready</dt><dd id="pl-ready">…</dd>
<dt>canStart</dt><dd id="pl-can">…</dd>
<dt>later</dt><dd id="pl-later">…</dd>
</dl>
<p class="pl-log" id="pl-log" aria-live="polite">Tick an item, set one aside, or press Start.</p>
<div class="pl-controls">
<label class="mv-choice"><input type="checkbox" role="switch" class="mv-switch" id="pl-remember"> Remember progress on this device</label>
<div class="pl-row">
<button type="button" class="mv-button" data-variant="outline" data-size="sm" id="pl-upload">Pay stubs uploaded in the flow</button>
<button type="button" class="mv-button" data-variant="ghost" data-size="sm" id="pl-reset">Reset</button>
</div>
</div>
</aside>
</div>
<!-- Variant: a release runbook. One required-to-start item is missing, so Start explains and points to it. -->
<section>
<div class="pl-section-head">
<h3>Blocked only by what truly blocks</h3>
<p>Only the deploy permission is required to start. Press Start anyway: it points you to what’s missing instead of failing silently. The rollback plan is set aside for later; the release will pause at step 5.</p>
</div>
<mv-prep-list id="pl-release" class="pl-release" heading="Before you deploy v4.12" duration="40m" start-label="Start release">
<p slot="intro">Thursday release window, 2:00-3:00 PM. Four services, one schema migration.</p>
<a slot="footer" class="mv-button" data-variant="ghost" href="#pl-release">View runbook</a>
<div data-prep="deploy-access" data-prep-kind="access" data-prep-time="10m" data-prep-requirement="required-to-start" data-prep-step="Step 1 · Deploy">
<strong>Production deploy permission</strong>
<p data-prep-why>The pipeline asks for approval from someone holding deploy rights before anything ships.</p>
<p data-prep-where>Access portal › <b>Engineering</b> › <b>Production deploy</b>. Approval usually takes a few minutes.</p>
</div>
<div data-prep="snapshot" data-prep-kind="document" data-prep-time="15m" data-prep-step="Step 3 · Migrate" data-prep-state="ready">
<strong>Today’s database snapshot</strong>
<p data-prep-why>Step 3 runs a schema migration; the snapshot is your way back.</p>
<p data-prep-where>Cloud console › Databases › orders-prod › Snapshots. Take a manual one if the latest is over 24 hours old.</p>
</div>
<div data-prep="rollback" data-prep-kind="decision" data-prep-time="5m" data-prep-step="Step 5 · Verify" data-prep-state="later">
<strong>Rollback owner and trigger</strong>
<p data-prep-why>Decide who rolls back, and at what error rate, before anyone is tired.</p>
<p data-prep-where>Write both in the release ticket. Team default: 2% of requests failing for 5 minutes.</p>
</div>
<div data-prep="on-call" data-prep-kind="person" data-prep-time="2m" data-prep-requirement="optional">
<strong>On-call engineer in the loop</strong>
<p data-prep-why>They won’t be surprised by alerts during the release window.</p>
<p data-prep-where>Post the window in the team’s incidents channel and tag whoever is on call.</p>
</div>
</mv-prep-list>
</section>
<script type="module">
await customElements.whenDefined("mv-prep-list");
const prep = document.getElementById("pl-loan");
const release = document.getElementById("pl-release");
const steps = [...document.querySelectorAll("#pl-steps .pl-step")];
const badge = document.getElementById("pl-flow-badge");
const log = document.getElementById("pl-log");
const remember = document.getElementById("pl-remember");
const out = (id, v) => { document.getElementById(id).textContent = v; };
const say = (text) => { log.textContent = text; };
const labelOf = (id) => prep.items.find((it) => it.id === id)?.label ?? id;
// The flow reads the checklist: which steps will pause, which are covered.
function render() {
out("pl-ready", String(prep.ready));
out("pl-can", String(prep.canStart));
out("pl-later", prep.later.length ? JSON.stringify(prep.later) : "[]");
const started = prep.started;
badge.textContent = started ? "In progress" : "Not started";
badge.dataset.variant = started ? "info" : "secondary";
steps.forEach((li, i) => {
const ids = li.dataset.items.split(" ").filter(Boolean);
const needed = ids.filter((id) => prep.items.find((it) => it.id === id)?.requirement !== "optional");
const later = needed.filter((id) => prep.getState(id) === "later");
const missing = needed.filter((id) => prep.getState(id) === "missing");
const tag = li.querySelector("span");
const note = li.querySelector("small");
tag.replaceChildren();
note.replaceChildren();
li.toggleAttribute("data-current", started && i === 0);
if (!needed.length) return;
const b = document.createElement("span");
b.className = "mv-badge";
b.dataset.size = "sm";
if (later.length) { b.dataset.variant = "warning"; b.textContent = "Pauses here"; }
else if (missing.length) { b.dataset.variant = "secondary"; b.textContent = `${missing.length} missing`; }
else { b.dataset.variant = "success"; b.textContent = "Covered"; }
tag.append(b);
const first = later[0] ?? missing[0];
if (first) {
const find = document.createElement("button");
find.type = "button";
find.className = "pl-find";
find.textContent = "Show in checklist";
find.addEventListener("click", () => prep.focusItem(first));
note.append(`Needs ${labelOf(first).replace(/^Your /, "your ")}. `, find);
}
});
}
prep.addEventListener("mv-prep-change", (e) => {
const d = e.detail;
say(d.id ? `mv-prep-change · ${d.id}: ${d.previous} → ${d.state} (${d.source})` : `mv-prep-change · synced from another tab`);
render();
});
prep.addEventListener("mv-start", (e) => {
const d = e.detail;
say(`mv-start · ${d.counts.ready} of ${d.counts.total} ready, pauses at: ${d.later.join(", ") || "none"}`);
requestAnimationFrame(render);
});
// Deep links stay in the page here: highlight the step instead of jumping.
prep.addEventListener("mv-prep-goto", (e) => {
e.preventDefault();
const li = document.querySelector(e.detail.href);
if (!li) return;
li.setAttribute("data-flash", "");
setTimeout(() => li.removeAttribute("data-flash"), 1200);
say(`mv-prep-goto · ${e.detail.id} → ${e.detail.step}`);
});
remember.addEventListener("change", () => {
prep.storageKey = remember.checked ? "pl-demo-loan" : null;
say(remember.checked ? "Progress is now kept in this browser (storage-key)." : "Progress is no longer stored.");
});
document.getElementById("pl-upload").addEventListener("click", () => prep.setItem("paystubs", "ready"));
document.getElementById("pl-reset").addEventListener("click", () => {
prep.reset();
render();
say("Reset to the initial checklist.");
});
render();
</script>
</div>Referencia cultural
Kitchen Confidential, Anthony Bourdain (2000, libro). Un cocinero de línea prepara su mise en place, cada ingrediente y cada utensilio listo y al alcance en su puesto antes del servicio, porque descubrir que falta algo en plena avalancha es un desastre. En la interfaz, un flujo largo o delicado se abre con una tarjeta de preparación que enumera lo que el usuario va a necesitar, por qué y dónde encontrarlo, le permite marcar lo que tiene a mano o dejar elementos para más tarde, y da una estimación honesta antes de un Start que tiene en cuenta el grado de preparación.
API
Attributes
| Name | Tipo | Default | Description |
|---|---|---|---|
heading | string | Before you start | Card title. |
heading-level | 1-6 | 3 | Level of the title element (h1-h6), to fit the page outline. |
duration | time ("15m", "1h30m", "90s", ms number) | How long the flow itself takes with everything at hand. The total estimate adds the gathering time (data-prep-time) of every non-optional item that isn’t ready. Without it, only the gathering time is shown. | |
start-label | string | Start | Text of the Start button (“Start application”, “Start release”…). |
start-href | URL | Navigates there once mv-start was not canceled (state is saved first). Without it, handle mv-start yourself. | |
storage-key | string | Opt-in persistence: item states and the started flag are kept in localStorage under “mv-prep-list:<key>” and synced across tabs. Nothing is stored without it. | |
started | boolean | Reflects (and sets) the started state: the card becomes a compact “Prepared” chip whose list opens on demand. Setting it directly emits no mv-start. | |
data-readiness | ready | partial | blocked | Set by the component on the host (styleable): everything ready, some items missing or for later, or a required-to-start item missing. | |
data-prep | string (item id) | On an authored child element: declares an item, the value is its id. Its first <strong>/<b>/heading (or [data-prep-label]) is the label; [data-prep-why] and [data-prep-where] children give the reason and where to find it (inline markup such as links is kept, moved as nodes, never re-parsed). | |
data-prep-kind | document | number | access | device | decision | person | time | any | item | On an item: icon and kind label. Other values are shown as-is with a neutral icon. |
data-prep-time | time | On an item: honest time to gather it when it isn’t at hand (“~10 min to get”), added to the total until it is ready. | |
data-prep-requirement | required-to-start | needed | optional | needed | On an item: required-to-start blocks Start until ready (and cannot be deferred); needed can be marked “I’ll get it later”; optional never counts toward readiness. |
data-prep-step / data-prep-href | string / URL | On an item: the flow step that uses it (“Step 4 · Income”), shown as “Used in …” and in the later note; with an href it becomes a deep link (mv-prep-goto). | |
data-prep-state | ready | later | missing | missing | On an item: initial state (also what reset() returns to). Stored progress overrides it. |
Properties
| Name | Tipo | Description |
|---|---|---|
ready | boolean | True when every non-optional item is ready (read-only). |
canStart | boolean | True when no required-to-start item is missing (read-only). |
missing | string[] | Ids of non-optional items not ready yet, missing or later (read-only). |
later | string[] | Ids of items set aside for later: the flow should pause at their step (read-only). |
states | Record<string, "ready" | "later" | "missing"> | State of every item. Setting it applies the given entries silently (no event), e.g. from your server. |
items | Array<{ id, label, why?, where?, kind?, time?, requirement?, step?, href?, state? }> | Read the items with their current state, or set them from data instead of markup (why/where as plain text). States of ids that still exist are kept. |
strings | Partial<Record<string, string>> | Overrides for every visible text and announcement (heading, start, later, whereLabel, requiredTag, optionalTag, usedIn, gather, laterNote, laterNoteNoStep, count, countLater, timeTotal, timeDetail, timeFlowOnly, timeGatherOnly, statusReady, statusPartial, statusBlocked, statusStarted, chipTitle, chipAll, oneItem, manyItems, underMinute, minutes, hours, hoursMinutes, announce*, kind*). English defaults. |
Methods
| Name | Description |
|---|---|
getState(id) / isReady(id) | State of one item (null if unknown) / whether it is ready. Use it in the flow to decide whether to pause at a step. |
setItem(id, state) | Changes one item from code (e.g. the document was uploaded in the flow) and emits mv-prep-change with source "api". Returns false if nothing changed. |
start() | Same as pressing Start: refused while blocked (returns false), otherwise emits the cancelable mv-start and switches to the started chip. Returns true once started. |
reset() | Back to the authored initial states and not started; clears the stored progress. |
focusItem(id) | Scrolls to an item, focuses its checkbox and highlights it briefly (opens the list when started). For a “Paused: you need …” message in the flow. |
expand() / collapse() | Opens or folds the list under the Prepared chip (started state). |
Events
| Name | Description |
|---|---|
mv-prep-change | An item changed. detail: { id, state, previous, source: "user" | "api" | "storage", ready, canStart, missing, later, counts: { ready, later, missing, total, blocking }, states }. For storage (another tab), id and state are null. |
mv-start | Cancelable, when Start is pressed (or start() called) and nothing blocks. detail: { source, ready, canStart, missing, later, counts, states }. preventDefault() keeps the card as it is. |
mv-prep-goto | Cancelable, when an item’s “Used in …” deep link is followed. detail: { id, step, href, state }. preventDefault() stops the navigation (route it yourself). |
Content structure
| Name | Description |
|---|---|
intro | Children with slot="intro" are moved under the title (context, reassurance, a privacy note). |
footer | Children with slot="footer" are placed before the Start button (e.g. a “Save and come back later” link). |
CSS classes
| Name | Description |
|---|---|
mv-prep-list-card | The card (<section> labelled by the title, a size container): -head, -icon, -heading, -intro, -overview (-time, -count, -meter with one -seg per item), -items, -foot. |
mv-prep-list-item | One row: data-state (ready | later | missing), data-requirement, data-kind, data-blocking, data-attention while highlighted. Parts: -check (native .mv-checkbox), -label, -tag, -meta (-kind, -gather, -step), -details (-why, -where), -note (later), -later (aria-pressed toggle). |
mv-prep-list-status / mv-prep-list-start | Readiness explanation (referenced by the Start button’s aria-describedby) and the Start .mv-button (aria-disabled while blocked). |
mv-prep-list-chip | Compact “Prepared” summary button shown once started (aria-expanded, controls the card): -chip-icon, -chip-title, -chip-meta, -chip-chevron. |
CSS variables
| Name | Default | Description |
|---|---|---|
--mv-prep-list-ready | var(--mv-success) | Ready items: checkbox, meter segment, row tint and edge, chip icon. |
--mv-prep-list-later | var(--mv-warning) | Items for later: hatched meter segment and edge, pressed toggle, pause note. |
--mv-prep-list-required | var(--mv-accent) | “Needed to start” tag and the highlight shown when a blocked Start is pressed. |
Accessibility
The card is a <section> labelled by its heading (level configurable). Each item is a real <input type="checkbox"> with a <label> (the item name) and aria-describedby pointing to its requirement tag (“Needed to start”, “Optional”), the reason, the where-to-find-it text and, when deferred, the later note (“We’ll pause at Step 4 · Income until you add it”). “I’ll get it later” is a toggle <button aria-pressed> whose accessible name includes the item (“I’ll get it later, Your bank account number”). The time estimate is plain text, never only a graphic; the segmented meter is aria-hidden and duplicated by the “5 of 7 ready · 1 for later” text. The Start button’s aria-describedby points to the status sentence, so its state is always explained in words; while a required-to-start item is missing it is aria-disabled (still focusable), and activating it moves focus to the first blocking checkbox, highlights it and announces what is needed instead of doing nothing. A polite live region gives a debounced count after ticking (“4 of 7 ready.”), announces when everything is ready or when Start becomes available, and confirms the start; after starting, focus moves to the “Prepared” chip, a button with aria-expanded controlling the card. States are never color-only: ready rows are checked and their details fold, later rows carry a hatched edge, a pressed toggle and a text note, blocking items a lock icon and a text tag. Ready details stay in the accessibility tree and unfold on focus-within. Reduced motion (OS or data-motion="reduce"): segments, folds and the chip appear without transition, the highlight is a static ring. Forced colors: the meter uses Highlight and hatched CanvasText, row edges and the pressed toggle stay visible.