Exclusivebeta
Narrow Down — <mv-narrow-down>
Guided product finder that asks the most informative question next instead of running a fixed questionnaire. You give it a catalog of candidates with attributes (tents, laptops, plans, templates, integrations, help articles) and a bank of questions tied to those attributes, as properties or a JSON script. At every step it scores each unanswered question by how evenly it splits the remaining candidates (entropy × data coverage, computed client-side) and shows the best one as a large card of real radio tiles: Yes / No / Don't know / Doesn't matter, Probably, or a small option set with ranges ("Under 3 lb", "$200–$400"). The pool beside it shrinks live: ruled-out cards fade out and the survivors slide together in rank order, with a "16 → 5 matches" count. “Don't know” never rules anything out, missing data never eliminates a candidate, soft questions and “Probably” answers re-rank instead of excluding, and an answer that would leave nothing is disabled. “Why this question?” shows how many each answer would keep, a trail of chips lets people change any earlier answer while the others stay, Back undoes the last one, and “See the 5 matches” stops early. The result view ranks the survivors with their reasons (“Matches: storm-rated fly, under 3 lb”, “Misses: stand-up headroom”) and a fit score. Conditional questions (requires), one-sided questions whose “No” only means “not needed”, answer counts, a question limit and restorable answers are built in; mv-answer is cancelable.
| Category | Forms |
|---|---|
| Type | Web Component (<mv-narrow-down>) |
| Status | beta |
| Also installs | button |
| Keywords | exclusive, culture, form, product-finder, recommendation, quiz, questionnaire, guided-selling, wizard, decision-tree, entropy, filter, shortlist, comparison, e-commerce, explainable |
When to use
- Shoppers face a catalog of 10 to a few hundred products they can't compare on specs alone and need to be guided to a shortlist
- A plan, template, integration or support article picker should ask only the questions that matter for the options still in play
- A fixed multi-step quiz asks irrelevant questions and should adapt to each answer and stop as soon as few options remain
- The recommendation must stay transparent: why a question is asked, what each answer rules out and why each result fits
Avoid when
- Users already know the specs they want and should filter a large listing freely, in any order → use Facets instead
- Only two to six options are on screen and the user needs help picking one of them → use Lifelines instead
- The steps are a fixed process (checkout, onboarding) rather than questions that narrow a catalog → use Stepper instead
Install
node scripts/add.mjs narrow-down --out ./src/marvelousAI agent with the Marvelous UI MCP server: install_components({ slugs: ["narrow-down"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).
Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, components/narrow-down/narrow-down.js, components/narrow-down/narrow-down.css, components/button/button.css.
Usage
Canonical markup — start from it and customize with attributes, data-* and CSS variables:
<div id="nd-demo" style="width:min(100%,68rem);margin-inline:auto">
<style>
#nd-demo .nd-top { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; margin:0 0 1.25rem }
#nd-demo .nd-top h3 { margin:0; font-size:1.25rem; letter-spacing:-.015em }
#nd-demo .nd-top p { margin:.25rem 0 0; color:var(--mv-fg-muted); font-size:.875rem }
#nd-demo .nd-controls { display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
#nd-demo .nd-toggle { display:inline-flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--mv-fg-muted); cursor:pointer }
#nd-demo .nd-log { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:1rem 0 0; min-height:1.5rem; color:var(--mv-fg-muted); font-size:.75rem }
#nd-demo .nd-log code { font-family:var(--mv-font-mono); font-size:.6875rem; color:var(--mv-fg) }
</style>
<div class="nd-top">
<div>
<h3 id="nd-title">Find your tent</h3>
<p id="nd-sub">A few questions, only the ones that matter for what's still in the running.</p>
</div>
<div class="nd-controls">
<mv-segmented id="nd-catalog" name="catalog" value="tents" aria-label="Catalog">
<button value="tents">Tents</button>
<button value="laptops">Laptops</button>
</mv-segmented>
<label class="nd-toggle"><input type="checkbox" role="switch" class="mv-switch" id="nd-counts"> Show counts</label>
</div>
</div>
<mv-narrow-down id="nd-finder" label="Tent finder" result-at="3">
<script type="application/json">
{
"answers": { "weight": "light5" },
"questions": [
{ "id": "people", "text": "How many people will sleep in it?", "label": "Sleeps", "attr": "capacity",
"options": [
{ "value": "1", "label": "Just me", "max": 2, "reason": "solo" },
{ "value": "2", "label": "Two", "min": 2, "max": 3, "reason": "sleeps two" },
{ "value": "3-4", "label": "Three or four", "min": 3, "max": 5, "reason": "sleeps 3–4" },
{ "value": "5+", "label": "Five or more", "min": 5, "reason": "family size" }
], "answers": ["any"] },
{ "id": "weight", "text": "How much weight are you willing to carry?", "label": "Weight", "attr": "weight",
"options": [
{ "value": "light3", "label": "As little as possible", "hint": "Under 3 lb, for long trails", "max": 3, "reason": "under 3 lb" },
{ "value": "light5", "label": "A reasonable load", "hint": "Under 5 lb, for weekend hikes", "max": 5, "reason": "under 5 lb" }
], "answers": ["any"] },
{ "id": "snow", "text": "Will you camp in snow or high winds?", "label": "Snow & wind", "attr": "fourSeason",
"hint": "Four-season tents shed snow and wind but run warm in summer.", "reason": "four-season", "reasonNo": "3-season ventilation" },
{ "id": "rain", "text": "Do you expect long, heavy rain?", "label": "Heavy rain", "attr": "stormProof", "oneSided": true,
"reason": "storm-rated fly", "answers": ["yes", "no", "unknown"] },
{ "id": "ground", "text": "Will you pitch on rock, sand or wooden platforms?", "label": "Hard ground", "attr": "freestanding", "oneSided": true,
"hint": "Freestanding tents stand up without stakes.", "reason": "freestanding", "answers": ["yes", "no", "unknown"] },
{ "id": "budget", "text": "What's your budget?", "label": "Budget", "attr": "price",
"options": [
{ "value": "200", "label": "Under $200", "max": 200, "reason": "under $200" },
{ "value": "400", "label": "$200 to $400", "min": 200, "max": 400, "reason": "$200–$400" },
{ "value": "400+", "label": "Over $400", "min": 400, "reason": "premium build" }
], "answers": ["any"] },
{ "id": "headroom", "text": "Would you like to stand up inside?", "label": "Headroom", "attr": "peak", "min": 72,
"soft": true, "oneSided": true, "reason": "stand-up headroom", "answers": ["yes", "no", "any"] },
{ "id": "doors", "text": "Would a door on each side help?", "label": "Two doors", "attr": "doors", "min": 2,
"soft": true, "oneSided": true, "reason": "two doors", "requires": { "people": ["2", "3-4", "5+"] }, "answers": ["yes", "no", "any"] }
],
"items": [
{ "id": "ridgeline-1", "name": "Ridgeline UL 1", "caption": "1P · 2.1 lb · 3-season", "price": 329, "href": "#ridgeline-1", "attrs": { "capacity": 1, "weight": 2.1, "fourSeason": false, "stormProof": false, "freestanding": false, "peak": 40, "doors": 1 } },
{ "id": "ridgeline-2", "name": "Ridgeline UL 2", "caption": "2P · 2.9 lb · 3-season", "price": 399, "href": "#ridgeline-2", "attrs": { "capacity": 2, "weight": 2.9, "fourSeason": false, "stormProof": false, "freestanding": false, "peak": 42, "doors": 2 } },
{ "id": "summit-pass-2", "name": "Summit Pass 2", "caption": "2P · 3.6 lb · 3-season", "price": 449, "href": "#summit-pass-2", "attrs": { "capacity": 2, "weight": 3.6, "fourSeason": false, "stormProof": true, "freestanding": true, "peak": 43, "doors": 2 } },
{ "id": "trailhead-2", "name": "Trailhead 2", "caption": "2P · 4.8 lb · 3-season", "price": 179, "href": "#trailhead-2", "attrs": { "capacity": 2, "weight": 4.8, "fourSeason": false, "stormProof": false, "freestanding": true, "peak": 44, "doors": 2 } },
{ "id": "trailhead-3", "name": "Trailhead 3", "caption": "3P · 5.9 lb · 3-season", "price": 229, "href": "#trailhead-3", "attrs": { "capacity": 3, "weight": 5.9, "fourSeason": false, "stormProof": false, "freestanding": true, "peak": 46, "doors": 2 } },
{ "id": "basecamp-4", "name": "Basecamp 4", "caption": "4P · 9.5 lb · 3-season", "price": 349, "href": "#basecamp-4", "attrs": { "capacity": 4, "weight": 9.5, "fourSeason": false, "stormProof": true, "freestanding": true, "peak": 58, "doors": 2 } },
{ "id": "meadow-6", "name": "Meadow Dome 6", "caption": "6P · 14.2 lb · 3-season", "price": 289, "href": "#meadow-6", "attrs": { "capacity": 6, "weight": 14.2, "fourSeason": false, "stormProof": false, "freestanding": true, "peak": 76, "doors": 1 } },
{ "id": "cabin-6", "name": "Cabin Plus 6", "caption": "6P · 18.7 lb · 3-season", "price": 479, "href": "#cabin-6", "attrs": { "capacity": 6, "weight": 18.7, "fourSeason": false, "stormProof": true, "freestanding": true, "peak": 80, "doors": 2 } },
{ "id": "arete-2", "name": "Arête 2", "caption": "2P · 5.4 lb · 4-season", "price": 699, "href": "#arete-2", "attrs": { "capacity": 2, "weight": 5.4, "fourSeason": true, "stormProof": true, "freestanding": true, "peak": 42, "doors": 2 } },
{ "id": "arete-3", "name": "Arête 3", "caption": "3P · 6.8 lb · 4-season", "price": 799, "href": "#arete-3", "attrs": { "capacity": 3, "weight": 6.8, "fourSeason": true, "stormProof": true, "freestanding": true, "peak": 44, "doors": 2 } },
{ "id": "solo-shelter", "name": "Solo Shelter", "caption": "1P · 1.4 lb · trekking-pole", "price": 249, "href": "#solo-shelter", "attrs": { "capacity": 1, "weight": 1.4, "fourSeason": false, "stormProof": false, "freestanding": false, "peak": 48, "doors": 1 } },
{ "id": "bivy-pro", "name": "Alpine Bivy", "caption": "1P · 1.9 lb · 4-season", "price": 319, "href": "#bivy-pro", "attrs": { "capacity": 1, "weight": 1.9, "fourSeason": true, "stormProof": true, "freestanding": false, "peak": 22, "doors": 1 } },
{ "id": "lakeside-4", "name": "Lakeside 4", "caption": "4P · 11 lb · 3-season", "price": 219, "href": "#lakeside-4", "attrs": { "capacity": 4, "weight": 11, "fourSeason": false, "stormProof": false, "freestanding": true, "peak": 74, "doors": 2 } },
{ "id": "coastline-3", "name": "Coastline 3", "caption": "3P · 4.2 lb · 3-season", "price": 529, "href": "#coastline-3", "attrs": { "capacity": 3, "weight": 4.2, "fourSeason": false, "stormProof": true, "freestanding": true, "peak": 45, "doors": 2 } },
{ "id": "pocket-2", "name": "Pocket 2", "caption": "2P · 2.4 lb · 3-season", "price": 159, "href": "#pocket-2", "attrs": { "capacity": 2, "weight": 2.4, "fourSeason": false, "stormProof": false, "freestanding": false, "peak": 41, "doors": 1 } },
{ "id": "family-hub-8", "name": "Family Hub 8", "caption": "8P · 22 lb · 3-season", "price": 649, "href": "#family-hub-8", "attrs": { "capacity": 8, "weight": 22, "fourSeason": false, "stormProof": true, "freestanding": true, "peak": 82, "doors": 2 } }
]
}
</script>
</mv-narrow-down>
<p class="nd-log" id="nd-log" aria-hidden="true"><span class="mv-badge" data-variant="secondary">event</span><span>Answer a question: events show here</span></p>
<script type="module">
const finder = document.getElementById("nd-finder");
await customElements.whenDefined("mv-narrow-down");
const $ = (id) => document.getElementById(id);
const catalogs = {
tents: { title: "Find your tent", sub: "A few questions, only the ones that matter for what's still in the running.", label: "Tent finder", items: finder.items, questions: finder.questions },
laptops: {
title: "Find your laptop",
sub: "Twelve models, narrowed down by how you'll actually use it.",
label: "Laptop finder",
questions: [
{ id: "use", text: "What will you mostly use it for?", label: "Use", attr: "uses", options: [
{ value: "office", label: "Email, docs and browsing", reason: "great for everyday work" },
{ value: "creative", label: "Photo and video editing", reason: "color-accurate screen" },
{ value: "code", label: "Software development", reason: "fast builds" },
{ value: "gaming", label: "Gaming", reason: "dedicated GPU" },
], answers: ["any"] },
{ id: "os", text: "Which operating system do you want?", label: "System", attr: "os", options: [
{ value: "macos", label: "macOS" }, { value: "windows", label: "Windows" }, { value: "chromeos", label: "ChromeOS" },
], answers: ["any"] },
{ id: "carry", text: "Will you carry it every day?", label: "Daily carry", attr: "weight", max: 3.5, oneSided: true, reason: "under 3.5 lb", answers: ["yes", "no", "unknown"] },
{ id: "budget", text: "What's your budget?", label: "Budget", attr: "price", options: [
{ value: "1000", label: "Under $1,000", max: 1000, reason: "under $1,000" },
{ value: "1800", label: "$1,000 to $1,800", min: 1000, max: 1800, reason: "$1,000–$1,800" },
{ value: "1800+", label: "Over $1,800", min: 1800, reason: "top of the line" },
], answers: ["any"] },
{ id: "screen", text: "Do you prefer a large screen?", label: "Large screen", attr: "screen", min: 15, soft: true, reason: "15-inch or larger", reasonNo: "compact screen", answers: ["yes", "no", "any"] },
{ id: "battery", text: "Do you need all-day battery life?", label: "Battery", attr: "battery", min: 14, soft: true, oneSided: true, reason: "14+ hours battery", answers: ["yes", "probably", "no"] },
],
items: [
{ id: "aero-13", name: "Aero 13", caption: '13.6" · 2.7 lb · 18 h', price: 1099, href: "#aero-13", attrs: { uses: ["office", "code"], os: "macos", weight: 2.7, screen: 13.6, battery: 18 } },
{ id: "aero-15", name: "Aero 15", caption: '15.3" · 3.3 lb · 18 h', price: 1299, href: "#aero-15", attrs: { uses: ["office", "code", "creative"], os: "macos", weight: 3.3, screen: 15.3, battery: 18 } },
{ id: "studio-14", name: "Studio Pro 14", caption: '14.2" · 3.4 lb · 17 h', price: 1999, href: "#studio-14", attrs: { uses: ["creative", "code"], os: "macos", weight: 3.4, screen: 14.2, battery: 17 } },
{ id: "studio-16", name: "Studio Pro 16", caption: '16.2" · 4.7 lb · 21 h', price: 2499, href: "#studio-16", attrs: { uses: ["creative", "code"], os: "macos", weight: 4.7, screen: 16.2, battery: 21 } },
{ id: "vector-14", name: "Vector 14", caption: '14" · 2.9 lb · 12 h', price: 1349, href: "#vector-14", attrs: { uses: ["office", "code"], os: "windows", weight: 2.9, screen: 14, battery: 12 } },
{ id: "vector-16", name: "Vector 16 Creator", caption: '16" · 4.1 lb · 9 h', price: 1899, href: "#vector-16", attrs: { uses: ["creative", "gaming"], os: "windows", weight: 4.1, screen: 16, battery: 9 } },
{ id: "forge-15", name: "Forge 15", caption: '15.6" · 5.1 lb · 6 h', price: 1199, href: "#forge-15", attrs: { uses: ["gaming"], os: "windows", weight: 5.1, screen: 15.6, battery: 6 } },
{ id: "forge-17", name: "Forge 17 Ultra", caption: '17.3" · 6.4 lb · 5 h', price: 2299, href: "#forge-17", attrs: { uses: ["gaming", "creative"], os: "windows", weight: 6.4, screen: 17.3, battery: 5 } },
{ id: "pilot-14", name: "Pilot 14 Business", caption: '14" · 2.5 lb · 15 h', price: 1549, href: "#pilot-14", attrs: { uses: ["office", "code"], os: "windows", weight: 2.5, screen: 14, battery: 15 } },
{ id: "everyday-15", name: "Everyday 15", caption: '15.6" · 3.8 lb · 10 h', price: 649, href: "#everyday-15", attrs: { uses: ["office"], os: "windows", weight: 3.8, screen: 15.6, battery: 10 } },
{ id: "slate-13", name: "Slate 13", caption: '13.3" · 2.4 lb · 12 h', price: 429, href: "#slate-13", attrs: { uses: ["office"], os: "chromeos", weight: 2.4, screen: 13.3, battery: 12 } },
{ id: "canvas-14", name: "Canvas 14 OLED", caption: '14" · 3.1 lb · 13 h', price: 999, href: "#canvas-14", attrs: { uses: ["creative", "office"], os: "windows", weight: 3.1, screen: 14, battery: 13 } },
],
},
};
$("nd-catalog").addEventListener("mv-change", (e) => {
const c = catalogs[e.detail.value];
if (!c) return;
$("nd-title").textContent = c.title;
$("nd-sub").textContent = c.sub;
finder.label = c.label;
finder.items = c.items;
finder.questions = c.questions;
});
$("nd-counts").addEventListener("change", (e) => { finder.counts = e.target.checked; });
const log = $("nd-log");
const show = (name, text, variant = "secondary") => {
const badge = Object.assign(document.createElement("span"), { className: "mv-badge", textContent: name });
badge.dataset.variant = variant;
const code = Object.assign(document.createElement("code"), { textContent: text });
log.replaceChildren(badge, code);
};
finder.addEventListener("mv-answer", (e) => {
const d = e.detail;
show("mv-answer", `${d.question.label ?? d.id}: ${d.label} · ${d.before} → ${d.after}`, "info");
});
finder.addEventListener("mv-result", (e) => {
const d = e.detail;
show("mv-result", `${d.reason} · ${d.items.slice(0, 3).map((i) => i.name).join(", ")}${d.items.length > 3 ? "…" : ""}`, "success");
});
finder.addEventListener("click", (e) => { if (e.target.closest("a[href^='#']")) e.preventDefault(); });
</script>
</div>Cultural reference
Akinator — Elokence (2007, game). A web genie guesses the character you are thinking of by asking one yes / no / don't know / probably question at a time, always the one that best splits the candidates it still believes in, until a single one is left. The component turns it into a product finder: each next question is the one with the best split of the remaining catalog, “don't know” and missing data never eliminate, “probably” only re-ranks, and the shrinking pool and “Why this question?” make the reasoning visible.
API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
result-at | number | 3 | Show the result view as soon as this many candidates (or fewer) remain. It also shows when no remaining question can split the candidates any further. |
max-questions | number | Optional cap on the number of answers before the result view shows (reason "limit"). | |
counts | boolean | false | Show on every answer tile how many candidates it would keep ("5 left"), or how many fit for soft questions ("4 fit"). Answers that would leave nothing always show “None left” and are disabled. |
locale | string | en-US | Locale used to format numeric prices. |
currency | string | USD | Currency used to format numeric prices. |
heading-level | number (2..6) | 3 | Level of the result view heading, to fit your page outline. |
label | string | Guided finder | Accessible name of the region (e.g. "Tent finder"). |
data-view | "ask" | "result" | Set by the component on itself: style the page around the current view. |
Properties
| Name | Type | Description |
|---|---|---|
items | Array<{ id, name, caption?, price?, href?, cta?, attrs }> | The candidate catalog. Attributes are read from item.attrs[key], then item[key]; a value can be a boolean, string, number or an array (multi-valued, e.g. uses: ["coding", "gaming"]). A missing attribute means “no data”: the item is kept whatever the answer. price may be a number (formatted with locale and currency) or a string. Can also come from a child <script type="application/json">{ "items": [...], "questions": [...], "answers"?: {...} }</script>. |
questions | Array<Question> | Question bank. Yes/no question: { id, text, label?, hint?, attr, is? | in? | min? / max? | match?(item), answers?, labels?, soft?, oneSided?, weight?, requires?, reason?, reasonNo? } — Yes means the test passes (attr truthy, equal to is, in the list, or min ≤ value < max). Option question: { id, text, label?, attr, options: [{ value, label, hint?, is? | in? | min? / max? | match?, reason? }], answers?: ["unknown", "any"] } — an option without a test matches attr === value. answers picks the buttons among "yes", "no", "probably", "probably-not", "unknown" (Don't know) and "any" (Doesn't matter). soft: re-ranks, never rules out. oneSided: “No” means “not needed” and rules nothing out. requires: { questionId: value | [values] } asks it only after those answers. weight (default 1) biases the choice. reason / reasonNo / option.reason label the result reasons (default: the question label or option label). |
answers | { [questionId]: value } | Answers so far, in the order given (the trail). Set it to restore a session (e.g. from the URL); invalid entries and answers that would empty the pool are skipped. |
remaining | Array<item> | Read-only: the candidates still in play, best fit first. |
current | Question | null | Read-only: the question on screen (null on the result view). |
view | "ask" | "result" | Read-only: the current view. |
renderItem | (item, { context: "pool" | "result" }) => Node | Custom content for a candidate card (thumbnail, rating…). Return DOM nodes, never an HTML string. |
strings | object | Partial override of every visible text and announcement (English defaults), with {n}-style placeholders. |
resultAt / maxQuestions / counts / locale / currency / headingLevel / label | reflected | Mirror the attributes. |
Methods
| Name | Description |
|---|---|
answer(value) | Answers the current question ("yes", "no", "unknown", "any", "probably", "probably-not" or an option value). Returns false if the value is invalid, would leave nothing, or mv-answer was canceled. |
back() | Undoes the last answer and shows that question again with the answer pre-selected (or cancels an edit). |
edit(questionId) | Re-opens an earlier question to change its answer; the other answers are kept and the pool is recomputed. Same as clicking its chip in the trail. |
showResults() | Stops asking and shows the ranked remaining candidates (reason "early"). |
keepNarrowing() | From the result view, keeps asking informative questions down to a single candidate. Returns false when no question can split them any further. |
reset() | Clears every answer and starts over. |
Events
| Name | Description |
|---|---|
mv-question | A question is shown. detail: { question, id, step, remaining, score, outcomes: [{ answer, label, keeps }] }. Handy for analytics (which questions people can't answer). |
mv-answer | Cancelable, before an answer is applied. detail: { question, id, answer, label, before, after (counts), remaining (ranked items after the answer), answers, editing }. preventDefault() refuses the answer (e.g. to show your own validation). |
mv-result | The result view is shown. detail: { reason: "narrowed" | "exhausted" | "early" | "limit", items (ranked), picks: [{ item, score, matches, misses, considered, fits }], answers }. |
Content structure
| Name | Description |
|---|---|
(json) | Optional <script type="application/json"> child with { items, questions, answers? }, read once at mount when the properties are not set. |
result | An element with slot="result" is moved into the result view footer (e.g. “Compare these” or “Talk to an expert”). |
CSS classes
| Name | Description |
|---|---|
mv-narrow-down-bar / -trail / -chip | Top bar: the trail of answers (each chip re-opens its question; aria-current while editing), Back and Start over. |
mv-narrow-down-card / -question / -answer / -radio / -key / -why | Question card: legend, radio tiles (data-kind="primary | skip", data-disabled, data-chosen during the confirmation), number-key badges and the “Why this question?” disclosure. |
mv-narrow-down-pool / -list / -item / -count | The shrinking pool: a real list; ruled-out cards get data-out, then hidden. The count shows data-changed when it moved. |
mv-narrow-down-result / -pick / -reasons / -fit | Result view: ranked picks (data-rank), reasons (data-kind="matches | misses") and fit bar. |
CSS variables
| Name | Default | Description |
|---|---|---|
--mv-narrow-down-accent | var(--mv-accent) | Selected answer, progress meter, best pick. |
--mv-narrow-down-match | var(--mv-success) | Check marks and fit bars in the results. |
--mv-narrow-down-pool-width | 19rem | Width of the pool column when the component is at least 46rem wide (container query); below that, the pool stacks under the question. |
--mv-narrow-down-sticky-top | var(--mv-space-4) | Sticky offset of the pool column (e.g. under a fixed header). |
Accessibility
The component is a region named by label. Each question is a native <fieldset> whose <legend> is the question, with real radio inputs covering each tile, so screen readers announce the group, the option, its position and its count. A pointer click, a tap, Space or a screen-reader activation answers at once; arrow keys only move the selection (the browser's radio behavior) and Enter confirms, so nobody answers by accident while exploring; number keys 1–9 answer directly (aria-keyshortcuts, and a hint referenced by aria-describedby appears on keyboard focus). After an answer, focus moves to the next question's first option (or the result heading, which is focusable with tabindex=-1), and a polite live region says what happened: “Yes. 5 of 16 left.” Disabled answers (they would leave nothing) are native disabled radios labelled “None left”. The trail is an ordered list of buttons whose accessible name reads “Change your answer to “…” (currently …)”, “Why this question?” is a native <details>, the pool is a real <ul> labelled with its count where ruled-out cards are removed with hidden (the visual count is aria-hidden to avoid double reading), and results are an ordered list with their reasons in text. Reduced motion (prefers-reduced-motion or data-motion="reduce"): no confirmation delay, no slide between questions, no fade or reflow animation in the pool. Forced colors: selection, focus and meters use Highlight. Colors come from tokens and are checked in light and dark themes.