@obvi/blueprint 1.0.9 → 1.0.10

package/README.md

@@ -74,6 +74,9 @@ Reusable primitives promoted from repeated blueprint authoring patterns:
 - `.bp-lede` — narrative lede escape hatch
 - `.bp-decision` — primary decision panel: an inverted `.bp-decision__bar` (kicker `.bp-label` + optional `.bp-decision__status` pill + optional `.bp-decision__meta` provenance with `<time>`), the hero `.bp-decision-stmt`, stacked `.bp-decision__tenets` (a `<dl>`), and a hatched `.bp-decision__revisit` change-condition footer. Add `.bp-decision--collapsible` on a `<details>` whose `<summary>` is the `.bp-decision__bar` (kicker + a compact `.bp-decision__title` left, `.bp-decision__meta` + `.bp-decision__caret` right) for a native, script-free collapsed form: collapsed it is just the bar, and the tenets + revisit footer reveal on expand
 - `<bp-callout type="locked|invariant|ref">` — typed callout element (expands to the `.bp-callout` family below). Drafting-style: four L-shaped corner registration ticks (drawn as background gradients, no extra DOM) bracket the body instead of a box, headed by a `.bp-ctag` label (icon + compact mono caption). `--locked` uses solid ink ticks, `--invariant` adds the hatch fill with heavier ticks, `--ref` uses soft ticks. `label="…"` overrides the caption and `icon="none"` drops the glyph; the raw `.bp-callout--locked` / `--invariant` / `--ref` markup stays valid for hand-built or stored documents
+- `<bp-choice layout="tabs|stack|gallery">` — interactive deliberation for section directions or mockup picks; expands to a CSS-only form (verdict banner, inline rationale, reconsider reset)
+- `<bp-preflight>` — pre-draft decision panel; gates a fenced draft target until required questions are answered
+- `<bp-choice-record>` — compact archive of resolved decisions with optional considered-options disclosure
 - `.bp-deflist` — widened definition-list variant
 - `.bp-option-grid`, `.bp-opt--rec`, `.bp-verdict` — parallel option comparisons
 - `.bp-sequence` — numbered linear pipeline
@@ -109,7 +112,7 @@ an npm token with access to the organization without committing it:
 Pin the exact package version so the stylesheet is immutable across installs:
 
 ```bash
-npm install --save-exact @obvi/blueprint@1.0.9
+npm install --save-exact @obvi/blueprint@1.0.10
 ```
 
 Import the canonical stylesheet from the supported package export:

package/dist/blueprint-choices.js

@@ -0,0 +1,507 @@
+// blueprint-choices.js — interactive choice / preflight Web Components.
+//
+// Authoring shrinks to a small set of elements; each component expands to
+// light-DOM markup styled by blueprint.css. Interaction is CSS-only (radio /
+// checkbox + :has() + native form reset). Per-instance scoped rules are
+// injected only where value-specific selectors are required (tab panels,
+// verdict labels, preflight gate).
+//
+//   <bp-choice layout="tabs" verdict="Adopted">
+//     <bp-choice-option value="a" tab="Draft A" title="Phased rollout">
+//       <p>…</p>
+//       <bp-rationale><p><strong>Trade-off.</strong> …</p></bp-rationale>
+//     </bp-choice-option>
+//   </bp-choice>
+//
+// layout:  tabs | stack | gallery
+// verdict: kicker on the committed banner (default "Chosen")
+// adopt:   tabs-only commit button label (default "Adopt this direction")
+// hint:    footer hint; reconsider: reset button label (default "Reconsider")
+// compare: gallery-only <details> summary (omit to skip compare block)
+
+/** @typedef {'tabs' | 'stack' | 'gallery'} ChoiceLayout */
+
+let choiceSeq = 0
+
+/** @param {string} prefix */
+function nextId(prefix) {
+  choiceSeq += 1
+  return `${prefix}-${choiceSeq}`
+}
+
+/** @param {ParentNode} root */
+function extractRationale(root) {
+  const node = root.querySelector(':scope > bp-rationale')
+  if (!node) return null
+  const wrap = node.ownerDocument.createElement('div')
+  wrap.className = 'bp-choice-rationale'
+  wrap.append(...node.childNodes)
+  return wrap
+}
+
+/** @param {Element} root */
+function bodyWithoutRationale(root) {
+  const frag = root.ownerDocument.createDocumentFragment()
+  for (const child of root.childNodes) {
+    if (child instanceof Element && child.tagName === 'BP-RATIONALE') continue
+    if (child instanceof Element && child.getAttribute('slot') === 'frame') continue
+    frag.append(child.cloneNode(true))
+  }
+  return frag
+}
+
+/** @param {Element} root */
+function frameContent(root) {
+  const slotted = root.querySelector(':scope > [slot="frame"]')
+  if (slotted) {
+    const frame = slotted.cloneNode(true)
+    frame.removeAttribute('slot')
+    return frame
+  }
+  return null
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} tag
+ * @param {string} [className]
+ */
+function el(doc, tag, className) {
+  const node = doc.createElement(tag)
+  if (className) node.className = className
+  return node
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} text
+ * @param {string} [className]
+ */
+function label(doc, text, className) {
+  const node = el(doc, 'span', className ?? 'bp-label')
+  node.textContent = text
+  return node
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} kicker
+ * @param {Array<{ value: string, title: string }>} options
+ */
+function buildVerdict(doc, kicker, options) {
+  const verdict = el(doc, 'div', 'bp-choice__verdict')
+  verdict.append(label(doc, kicker))
+  for (const opt of options) {
+    const pick = el(doc, 'p', 'bp-choice__verdict-pick')
+    pick.dataset.for = opt.value
+    pick.textContent = opt.title
+    verdict.append(pick)
+  }
+  const meta = el(doc, 'span', 'bp-choice__verdict-meta')
+  meta.textContent = 'You · just now'
+  verdict.append(meta)
+  return verdict
+}
+
+/**
+ * @param {Document} doc
+ * @param {string} hint
+ * @param {string} reconsider
+ */
+function buildFooter(doc, hint, reconsider) {
+  const actions = el(doc, 'div', 'bp-choice__actions')
+  if (hint) {
+    const hintEl = el(doc, 'span', 'bp-choice__hint')
+    hintEl.textContent = hint
+    actions.append(hintEl)
+  }
+  const reset = el(doc, 'button', 'bp-choice__reset')
+  reset.type = 'reset'
+  reset.textContent = reconsider
+  actions.append(reset)
+  return actions
+}
+
+/**
+ * @param {string} scope
+ * @param {string} viewName
+ * @param {string} pickName
+ * @param {Array<{ value: string, title: string }>} options
+ */
+function scopedTabRules(scope, viewName, pickName, options) {
+  const lines = options.map(
+    (opt) =>
+      `${scope}:has([name="${viewName}"][value="${opt.value}"]:checked) .bp-choice__panel[data-value="${opt.value}"]{display:block}` +
+      `${scope}:has([name="${pickName}"][value="${opt.value}"]:checked) .bp-choice__verdict-pick[data-for="${opt.value}"]{display:block}`
+  )
+  return lines.join('\n')
+}
+
+/** @param {HTMLElement} host */
+function readOptions(host) {
+  return [...host.querySelectorAll(':scope > bp-choice-option')].map((node) => ({
+    el: node,
+    value: node.getAttribute('value') ?? '',
+    tab: node.getAttribute('tab') ?? node.getAttribute('label') ?? node.getAttribute('value') ?? '',
+    title: node.getAttribute('title') ?? node.getAttribute('caption') ?? node.getAttribute('tab') ?? '',
+    optionLabel: node.getAttribute('label') ?? node.getAttribute('tab') ?? '',
+    caption: node.getAttribute('caption') ?? node.getAttribute('title') ?? '',
+  }))
+}
+
+class BlueprintRationaleElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+    this.classList.add('bp-choice-rationale')
+  }
+}
+
+class BlueprintChoiceOptionElement extends HTMLElement {}
+
+class BlueprintChoiceElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+
+    const doc = this.ownerDocument
+    /** @type {ChoiceLayout} */
+    const layout = (this.getAttribute('layout') || 'stack').toLowerCase()
+    const verdictKicker = this.getAttribute('verdict') ?? 'Chosen'
+    const adoptLabel = this.getAttribute('adopt') ?? 'Adopt this direction'
+    const hint = this.getAttribute('hint') ?? ''
+    const reconsider = this.getAttribute('reconsider') ?? 'Reconsider'
+    const compareSummary = this.getAttribute('compare')
+    const compareBody = this.querySelector(':scope > [slot="compare"]')
+
+    const options = readOptions(this)
+    const scopeId = nextId('bp-choice')
+    const viewName = `${scopeId}-view`
+    const pickName = `${scopeId}-pick`
+
+    const form = el(doc, 'form', `bp-choice bp-choice--${layout}`)
+    form.dataset.bpChoice = scopeId
+
+    const titleOpts = options.map((o) => ({ value: o.value, title: o.title }))
+    form.append(buildVerdict(doc, verdictKicker, titleOpts))
+
+    if (layout === 'tabs') {
+      const seg = el(doc, 'div', 'bp-choice__seg')
+      seg.setAttribute('role', 'tablist')
+      for (const [index, opt] of options.entries()) {
+        const segOpt = el(doc, 'label', 'bp-choice__seg-opt')
+        const input = doc.createElement('input')
+        input.type = 'radio'
+        input.name = viewName
+        input.value = opt.value
+        input.className = 'bp-choice__view'
+        if (index === 0) input.checked = true
+        segOpt.append(input, doc.createTextNode(opt.tab))
+        seg.append(segOpt)
+      }
+      form.append(seg)
+
+      const panels = el(doc, 'div', 'bp-choice__panels')
+      for (const opt of options) {
+        const panel = el(doc, 'div', 'bp-choice__panel')
+        panel.dataset.value = opt.value
+        const h3 = el(doc, 'h3')
+        h3.textContent = opt.title
+        panel.append(h3)
+        panel.append(bodyWithoutRationale(opt.el))
+        const rationale = extractRationale(opt.el)
+        if (rationale) panel.append(rationale)
+
+        const actions = el(doc, 'div', 'bp-choice__actions')
+        const adopt = el(doc, 'label', 'bp-choice__adopt')
+        const commit = doc.createElement('input')
+        commit.type = 'radio'
+        commit.name = pickName
+        commit.value = opt.value
+        commit.className = 'bp-choice__commit'
+        adopt.append(commit, doc.createTextNode(adoptLabel))
+        actions.append(adopt)
+        panel.append(actions)
+        panels.append(panel)
+      }
+      form.append(panels)
+
+      const style = el(doc, 'style')
+      style.textContent = scopedTabRules(`[data-bp-choice="${scopeId}"]`, viewName, pickName, titleOpts)
+      form.prepend(style)
+
+      form.append(
+        buildFooter(
+          doc,
+          hint || 'Switch tabs to preview · adopt to commit',
+          reconsider
+        )
+      )
+    }
+
+    if (layout === 'stack') {
+      const stack = el(doc, 'div', 'bp-choice__stack')
+      for (const opt of options) {
+        const card = el(doc, 'label', 'bp-choice__card')
+        const input = doc.createElement('input')
+        input.type = 'radio'
+        input.name = pickName
+        input.value = opt.value
+        input.className = 'bp-choice__pick'
+        card.append(input)
+
+        const head = el(doc, 'div', 'bp-choice__card-head')
+        if (opt.optionLabel) head.append(label(doc, opt.optionLabel))
+        const chosen = el(doc, 'span', 'bp-choice__tag bp-choice__tag--ink bp-choice__card-chosen')
+        chosen.textContent = '✓ Chosen'
+        const rejected = el(doc, 'span', 'bp-choice__tag bp-choice__tag--out bp-choice__card-rejected')
+        rejected.textContent = 'Not chosen'
+        head.append(chosen, rejected)
+        card.append(head)
+
+        const h4 = el(doc, 'h4')
+        h4.textContent = opt.title
+        card.append(h4)
+        card.append(bodyWithoutRationale(opt.el))
+        const rationale = extractRationale(opt.el)
+        if (rationale) card.append(rationale)
+        stack.append(card)
+      }
+      form.append(stack)
+      form.append(
+        buildFooter(
+          doc,
+          hint || 'Select a card to commit · rejected drafts stay readable below',
+          reconsider
+        )
+      )
+    }
+
+    if (layout === 'gallery') {
+      const gallery = el(doc, 'div', 'bp-choice__gallery')
+      for (const opt of options) {
+        const mock = el(doc, 'label', 'bp-choice__mock')
+        const input = doc.createElement('input')
+        input.type = 'radio'
+        input.name = pickName
+        input.value = opt.value
+        input.className = 'bp-choice__pick'
+        mock.append(input)
+
+        const frame = el(doc, 'div', 'bp-choice__mock-frame')
+        const frameInner = frameContent(opt.el)
+        if (frameInner) frame.append(frameInner)
+        mock.append(frame)
+
+        const cap = el(doc, 'div', 'bp-choice__mock-cap')
+        const h4 = el(doc, 'h4')
+        h4.textContent = opt.caption
+        cap.append(h4)
+        const chosen = el(doc, 'span', 'bp-choice__tag bp-choice__tag--ink bp-choice__mock-pick bp-choice__mock-chosen')
+        chosen.textContent = '✓ Chosen'
+        const rejected = el(doc, 'span', 'bp-choice__tag bp-choice__tag--out bp-choice__mock-pick bp-choice__mock-rejected')
+        rejected.textContent = 'Not chosen'
+        cap.append(chosen, rejected)
+        mock.append(cap)
+        gallery.append(mock)
+      }
+      form.append(gallery)
+
+      if (compareSummary && compareBody) {
+        const details = el(doc, 'details', 'bp-choice__compare')
+        const summary = el(doc, 'summary')
+        summary.textContent = compareSummary
+        details.append(summary)
+        const body = el(doc, 'div', 'bp-choice__compare-body')
+        body.append(compareBody.cloneNode(true))
+        details.append(body)
+        form.append(details)
+      }
+
+      form.append(
+        buildFooter(doc, hint || 'Select a mockup to track the decision', reconsider)
+      )
+    }
+
+    this.replaceChildren(form)
+  }
+}
+
+class BlueprintPreflightAElement extends HTMLElement {}
+
+class BlueprintPreflightQElement extends HTMLElement {}
+
+class BlueprintPreflightElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+
+    const doc = this.ownerDocument
+    const title = this.getAttribute('title') ?? 'Before drafting'
+    const draftName = this.getAttribute('draft') ?? 'section'
+    const hint = this.getAttribute('hint') ?? 'Answer all questions to unlock · choices stay editable'
+    const reconsider = this.getAttribute('reconsider') ?? 'Reset answers'
+    const scopeId = nextId('bp-preflight')
+
+    const questions = [...this.querySelectorAll(':scope > bp-preflight-q')]
+    const form = el(doc, 'form')
+    const panel = el(doc, 'div', 'bp-preflight')
+    panel.dataset.bpPreflight = scopeId
+
+    const bar = el(doc, 'div', 'bp-preflight__bar')
+    bar.append(label(doc, title))
+    const count = el(doc, 'span', 'bp-preflight__count')
+    count.textContent = `${questions.length} required`
+    bar.append(count)
+    panel.append(bar)
+
+    const list = el(doc, 'div', 'bp-preflight__questions')
+    /** @type {string[]} */
+    const gateSelectors = []
+
+    for (const qNode of questions) {
+      const qName = qNode.getAttribute('name') ?? nextId('q')
+      const kind = (qNode.getAttribute('kind') || 'one').toLowerCase()
+      const prompt = qNode.getAttribute('prompt') ?? ''
+      const answers = [...qNode.querySelectorAll(':scope > bp-preflight-a')]
+
+      const q = el(doc, 'div', 'bp-preflight__q')
+      const promptEl = el(doc, 'p', 'bp-preflight__prompt')
+      promptEl.append(doc.createTextNode(prompt))
+      const kindEl = el(doc, 'span', 'bp-preflight__kind')
+      kindEl.textContent = kind === 'many' ? '· choose any' : '· choose one'
+      promptEl.append(kindEl)
+      const resolved = el(doc, 'span', 'bp-choice__tag bp-choice__tag--ink bp-preflight__resolved')
+      resolved.textContent = '✓ Resolved'
+      promptEl.append(resolved)
+      q.append(promptEl)
+
+      const chips = el(doc, 'div', 'bp-preflight__chips')
+      for (const aNode of answers) {
+        const chip = el(doc, 'label', 'bp-preflight__chip')
+        const input = doc.createElement('input')
+        input.type = kind === 'many' ? 'checkbox' : 'radio'
+        input.name = qName
+        input.value = aNode.getAttribute('value') ?? aNode.textContent?.trim() ?? ''
+        chip.append(input, doc.createTextNode(aNode.textContent?.trim() ?? ''))
+        chips.append(chip)
+      }
+      q.append(chips)
+
+      const rationale = extractRationale(qNode)
+      if (rationale) q.append(rationale)
+      list.append(q)
+      gateSelectors.push(`[name="${qName}"]:checked`)
+    }
+    panel.append(list)
+
+    const gateWrap = el(doc, 'div')
+    gateWrap.style.padding = 'var(--bp-space-3)'
+    const gate = el(doc, 'div', 'bp-preflight__gate')
+    const locked = el(doc, 'div', 'bp-preflight__gate-locked')
+    const lockedTag = el(doc, 'span', 'bp-choice__tag')
+    lockedTag.textContent = `⌧ Section fenced — resolve the ${questions.length} decisions above to draft`
+    locked.append(lockedTag)
+    const ready = el(doc, 'div', 'bp-preflight__gate-ready')
+    const readyP = el(doc, 'p')
+    readyP.style.margin = '0 0 var(--bp-space-1)'
+    readyP.textContent = 'All decisions resolved.'
+    const draftBtn = el(doc, 'span', 'bp-preflight__draft')
+    draftBtn.textContent = `Draft “${draftName}” →`
+    ready.append(readyP, draftBtn)
+    gate.append(locked, ready)
+    gateWrap.append(gate)
+    panel.append(gateWrap)
+
+    const style = el(doc, 'style')
+    const gateRule = gateSelectors.map((sel) => `:has(${sel})`).join('')
+    style.textContent =
+      `[data-bp-preflight="${scopeId}"]${gateRule}{--bp-preflight-ready:1}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule}{border-color:var(--bp-ink-line)}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate{background-image:none;border-style:solid}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate-locked{display:none}` +
+      `[data-bp-preflight="${scopeId}"]${gateRule} .bp-preflight__gate-ready{display:block}`
+    panel.prepend(style)
+
+    const footer = el(doc, 'div', 'bp-preflight__footer')
+    const hintEl = el(doc, 'span', 'bp-choice__hint')
+    hintEl.textContent = hint
+    const reset = el(doc, 'button', 'bp-choice__reset')
+    reset.type = 'reset'
+    reset.textContent = reconsider
+    footer.append(hintEl, reset)
+
+    form.append(panel, footer)
+    this.replaceChildren(form)
+  }
+}
+
+class BlueprintChoiceRecordRowElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+
+    const doc = this.ownerDocument
+    const rowLabel = this.getAttribute('label') ?? ''
+    const value = this.getAttribute('value') ?? ''
+    const alts = this.getAttribute('alts') ?? ''
+
+    const dl = el(doc, 'dl', 'bp-choice-record__row')
+    const dt = el(doc, 'dt')
+    dt.textContent = rowLabel
+    const dd = el(doc, 'dd')
+    dd.textContent = value
+    dl.append(dt, dd)
+    if (alts) {
+      const tag = el(doc, 'span', 'bp-choice__tag bp-choice__tag--out')
+      tag.textContent = alts
+      dl.append(tag)
+    }
+
+    const considered = this.querySelector(':scope > [slot="considered"]')
+    const nodes = [dl]
+    if (considered) {
+      const details = el(doc, 'details', 'bp-choice__compare')
+      details.style.marginTop = 'var(--bp-space-2)'
+      const summary = el(doc, 'summary')
+      summary.textContent = '＋ Show the options considered'
+      details.append(summary)
+      const body = el(doc, 'div', 'bp-choice__compare-body')
+      body.append(considered.cloneNode(true))
+      details.append(body)
+      nodes.push(details)
+    }
+    this.replaceChildren(...nodes)
+  }
+}
+
+class BlueprintChoiceRecordElement extends HTMLElement {
+  connectedCallback() {
+    if (this.dataset.bpRendered) return
+    this.dataset.bpRendered = '1'
+    const wrap = this.ownerDocument.createElement('div')
+    wrap.className = 'bp-choice-record'
+    wrap.append(...this.childNodes)
+    this.replaceChildren(wrap)
+  }
+}
+
+/** @param {string} name @param {typeof HTMLElement} ctor */
+function define(name, ctor) {
+  if (typeof customElements !== 'undefined' && !customElements.get(name)) {
+    customElements.define(name, ctor)
+  }
+}
+
+export function registerBlueprintChoiceElements() {
+  define('bp-rationale', BlueprintRationaleElement)
+  define('bp-choice-option', BlueprintChoiceOptionElement)
+  define('bp-choice', BlueprintChoiceElement)
+  define('bp-preflight-a', BlueprintPreflightAElement)
+  define('bp-preflight-q', BlueprintPreflightQElement)
+  define('bp-preflight', BlueprintPreflightElement)
+  define('bp-choice-record-row', BlueprintChoiceRecordRowElement)
+  define('bp-choice-record', BlueprintChoiceRecordElement)
+}
+
+registerBlueprintChoiceElements()

package/dist/blueprint.css

@@ -1472,7 +1472,8 @@
   }
   :where(.bp-opt--rec) {
     background: var(--bp-fill-amb);
-    box-shadow: inset 3px 0 0 var(--bp-ink);
+    outline: 2px solid var(--bp-ink);
+    outline-offset: -2px;
   }
   :where(.bp-verdict) {
     display: inline-block;
@@ -1548,6 +1549,523 @@
     background-image: var(--bp-hatch);
   }
 
+  /* ---- Interactive choice family ----------------------------------
+     CSS-only deliberation primitives (radio / checkbox + :has() +
+     native form reset). Author with <bp-choice>, <bp-preflight>, and
+     related elements; blueprint-choices.js expands them to this markup.
+     Selected items always get a full ink border — never a left-bar only. */
+
+  :where(bp-choice),
+  :where(bp-preflight),
+  :where(bp-choice-record) {
+    display: block;
+  }
+
+  :where(.bp-choice) {
+    margin: var(--bp-space-4) 0;
+  }
+
+  /* Verdict banner — hidden until a choice is committed. */
+  :where(.bp-choice__verdict) {
+    display: none;
+    align-items: center;
+    gap: var(--bp-space-2);
+    padding: var(--bp-space-2) var(--bp-space-3);
+    background: var(--bp-ink);
+    color: var(--bp-paper);
+    border-radius: var(--bp-radius-4);
+    margin-bottom: var(--bp-space-3);
+  }
+  :where(.bp-choice:has(.bp-choice__commit:checked)) .bp-choice__verdict,
+  :where(.bp-choice:has(.bp-choice__pick:checked)) .bp-choice__verdict {
+    display: flex;
+  }
+  :where(.bp-choice__verdict) > :where(.bp-label) {
+    margin: 0;
+    color: var(--bp-paper);
+    font-size: var(--bp-label-lg);
+    letter-spacing: var(--bp-label-lg-ls);
+  }
+  :where(.bp-choice__verdict-pick) {
+    font-family: var(--bp-sans);
+    font-weight: var(--bp-weight-strong);
+    font-size: var(--bp-text-h4);
+    margin: 0;
+  }
+  :where(.bp-choice__verdict-pick[data-for]) {
+    display: none;
+  }
+  :where(.bp-choice__verdict-meta) {
+    margin: 0 0 0 auto;
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: color-mix(in oklch, var(--bp-paper) 72%, transparent);
+  }
+
+  :where(.bp-choice-rationale) {
+    margin-top: var(--bp-space-2);
+    font-size: var(--bp-text-small);
+    line-height: var(--bp-lh-small);
+    color: var(--bp-text-secondary);
+  }
+  :where(.bp-choice-rationale) > :where(* + *) {
+    margin-top: var(--bp-space-1);
+  }
+
+  :where(.bp-choice__actions) {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-space-3);
+    margin-top: var(--bp-space-3);
+  }
+  :where(.bp-choice__hint) {
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: var(--bp-text-secondary);
+  }
+  :where(.bp-choice__reset) {
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: var(--bp-text-secondary);
+    text-decoration: underline dotted;
+    text-underline-offset: 3px;
+  }
+  :where(.bp-choice__reset:hover) {
+    color: var(--bp-ink);
+  }
+
+  :where(.bp-choice__tag) {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-sm);
+    letter-spacing: var(--bp-label-sm-ls);
+    text-transform: uppercase;
+    color: var(--bp-text-secondary);
+  }
+  :where(.bp-choice__tag--ink) {
+    color: var(--bp-paper);
+    background: var(--bp-ink);
+    padding: 2px 8px;
+  }
+  :where(.bp-choice__tag--out) {
+    color: var(--bp-ink);
+    border: 1px solid var(--bp-ink-faint);
+    padding: 1px 7px;
+  }
+
+  /* ---- layout: tabs (preview drafts, then adopt) ------------------- */
+  :where(.bp-choice--tabs) :where(.bp-choice__seg) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    border: 1px solid var(--bp-ink-line);
+    border-radius: var(--bp-radius-4);
+    overflow: hidden;
+    margin: 0 0 var(--bp-space-3);
+    width: fit-content;
+  }
+  :where(.bp-choice__seg-opt) {
+    position: relative;
+    cursor: pointer;
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: var(--bp-text-secondary);
+    padding: 6px 14px;
+    border-right: 1px solid var(--bp-ink-line);
+  }
+  :where(.bp-choice__seg-opt:last-child) {
+    border-right: 0;
+  }
+  :where(.bp-choice__seg-opt) :where(input) {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  :where(.bp-choice__seg-opt:has(input:checked)) {
+    background: var(--bp-ink);
+    color: var(--bp-paper);
+  }
+  :where(.bp-choice--tabs) :where(.bp-choice__panel) {
+    display: none;
+  }
+  :where(.bp-choice__panel > h3:first-child) {
+    margin-top: 0;
+  }
+  :where(.bp-choice__adopt) {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    border: 1px solid var(--bp-ink);
+    border-radius: var(--bp-radius-4);
+    padding: 6px 14px;
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: var(--bp-ink);
+    background: var(--bp-paper);
+  }
+  :where(.bp-choice__adopt:hover) {
+    background: var(--bp-fill-hi);
+  }
+  :where(.bp-choice__adopt) :where(input) {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  :where(.bp-choice__panel:has(.bp-choice__commit:checked)) {
+    border: 1px solid var(--bp-ink);
+    background: var(--bp-fill-amb);
+    padding: var(--bp-space-3);
+    margin-left: calc(-1 * var(--bp-space-3));
+    margin-right: calc(-1 * var(--bp-space-3));
+    border-radius: var(--bp-radius-4);
+  }
+  :where(.bp-choice__panel:has(.bp-choice__commit:checked)) :where(.bp-choice__adopt) {
+    background: var(--bp-ink);
+    color: var(--bp-paper);
+  }
+
+  /* ---- layout: stack (all cards visible) --------------------------- */
+  :where(.bp-choice--stack) :where(.bp-choice__stack) {
+    display: grid;
+    gap: var(--bp-space-3);
+  }
+  :where(.bp-choice__card) {
+    display: block;
+    position: relative;
+    border: 1px solid var(--bp-edge);
+    border-radius: var(--bp-radius-4);
+    padding: var(--bp-space-3);
+    cursor: pointer;
+    background: var(--bp-paper);
+  }
+  :where(.bp-choice__card:hover) {
+    border-color: var(--bp-ink-line);
+  }
+  :where(.bp-choice__card) > :where(input.bp-choice__pick) {
+    position: absolute;
+    top: var(--bp-space-3);
+    right: var(--bp-space-3);
+    accent-color: var(--bp-ink);
+    width: 16px;
+    height: 16px;
+  }
+  :where(.bp-choice__card-head) {
+    display: flex;
+    align-items: baseline;
+    gap: var(--bp-space-2);
+    margin-bottom: var(--bp-space-1);
+  }
+  :where(.bp-choice__card) :where(h4) {
+    margin: 0;
+    padding-right: var(--bp-space-4);
+  }
+  :where(.bp-choice__card-chosen),
+  :where(.bp-choice__card-rejected) {
+    display: none;
+  }
+  :where(.bp-choice__card:has(.bp-choice__pick:checked)) {
+    border: 2px solid var(--bp-ink);
+    background: var(--bp-fill-amb);
+  }
+  :where(.bp-choice__card:has(.bp-choice__pick:checked)) :where(.bp-choice__card-chosen) {
+    display: inline-flex;
+  }
+  :where(.bp-choice--stack:has(.bp-choice__pick:checked)) :where(.bp-choice__card:not(:has(.bp-choice__pick:checked))) {
+    opacity: 0.62;
+    background-image: var(--bp-hatch);
+  }
+  :where(.bp-choice--stack:has(.bp-choice__pick:checked)) :where(.bp-choice__card:not(:has(.bp-choice__pick:checked))) :where(.bp-choice__card-rejected) {
+    display: inline-flex;
+  }
+
+  /* ---- layout: gallery (mockup pick) ------------------------------- */
+  :where(.bp-choice--gallery) :where(.bp-choice__gallery) {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--bp-space-3);
+  }
+  :where(.bp-choice__mock) {
+    display: block;
+    position: relative;
+    cursor: pointer;
+    border: 1px solid var(--bp-edge);
+    border-radius: var(--bp-radius-4);
+    overflow: hidden;
+    background: var(--bp-paper);
+  }
+  :where(.bp-choice__mock:hover) {
+    border-color: var(--bp-ink-line);
+  }
+  :where(.bp-choice__mock) > :where(input.bp-choice__pick) {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+  :where(.bp-choice__mock-frame) {
+    aspect-ratio: 4 / 3;
+    border-bottom: 1px solid var(--bp-edge);
+    background: var(--bp-bg);
+    padding: 10px;
+    display: grid;
+    gap: 6px;
+  }
+  :where(.bp-choice__mock-cap) {
+    display: flex;
+    align-items: baseline;
+    gap: var(--bp-space-2);
+    padding: var(--bp-space-2) var(--bp-space-3);
+  }
+  :where(.bp-choice__mock-cap) :where(h4) {
+    margin: 0;
+    font-size: var(--bp-text-body);
+  }
+  :where(.bp-choice__mock-pick) {
+    margin-left: auto;
+  }
+  :where(.bp-choice__mock-chosen),
+  :where(.bp-choice__mock-rejected) {
+    display: none;
+  }
+  :where(.bp-choice__mock:has(.bp-choice__pick:checked)) {
+    border: 2px solid var(--bp-ink);
+  }
+  :where(.bp-choice__mock:has(.bp-choice__pick:checked)) :where(.bp-choice__mock-chosen) {
+    display: inline-flex;
+  }
+  :where(.bp-choice--gallery:has(.bp-choice__pick:checked)) :where(.bp-choice__mock:not(:has(.bp-choice__pick:checked))) {
+    opacity: 0.5;
+  }
+  :where(.bp-choice--gallery:has(.bp-choice__pick:checked)) :where(.bp-choice__mock:not(:has(.bp-choice__pick:checked))) :where(.bp-choice__mock-frame) {
+    background-image: var(--bp-hatch);
+  }
+  :where(.bp-choice--gallery:has(.bp-choice__pick:checked)) :where(.bp-choice__mock:not(:has(.bp-choice__pick:checked))) :where(.bp-choice__mock-rejected) {
+    display: inline-flex;
+  }
+
+  :where(.bp-choice__compare) {
+    margin-top: var(--bp-space-3);
+    border: 1px solid var(--bp-edge);
+    border-radius: var(--bp-radius-4);
+  }
+  :where(.bp-choice__compare > summary) {
+    cursor: pointer;
+    list-style: none;
+    padding: var(--bp-space-2) var(--bp-space-3);
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: var(--bp-text-secondary);
+  }
+  :where(.bp-choice__compare > summary)::-webkit-details-marker {
+    display: none;
+  }
+  :where(.bp-choice__compare-body) {
+    padding: var(--bp-space-3);
+    border-top: 1px solid var(--bp-edge);
+  }
+
+  /* ---- Pre-flight (decisions before drafting) ---------------------- */
+  :where(.bp-preflight) {
+    border: 1px solid var(--bp-ink-line);
+    border-radius: var(--bp-radius-6);
+    overflow: hidden;
+    margin: var(--bp-space-4) 0;
+  }
+  :where(.bp-preflight__bar) {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-space-2);
+    padding: var(--bp-space-2) var(--bp-space-3);
+    background: var(--bp-ink);
+    color: var(--bp-paper);
+  }
+  :where(.bp-preflight__bar) > :where(.bp-label) {
+    margin: 0;
+    color: var(--bp-paper);
+  }
+  :where(.bp-preflight__count) {
+    margin-left: auto;
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: color-mix(in oklch, var(--bp-paper) 78%, transparent);
+  }
+  :where(.bp-preflight__questions) {
+    counter-reset: bp-preflight-q;
+  }
+  :where(.bp-preflight__q) {
+    counter-increment: bp-preflight-q;
+    padding: var(--bp-space-3) var(--bp-space-3) var(--bp-space-3) calc(var(--bp-space-6) + 4px);
+    position: relative;
+    border-bottom: 1px solid var(--bp-edge);
+  }
+  :where(.bp-preflight__q::before) {
+    content: counter(bp-preflight-q, decimal-leading-zero);
+    position: absolute;
+    left: var(--bp-space-3);
+    top: var(--bp-space-3);
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-lg);
+    letter-spacing: 0.08em;
+    color: var(--bp-ink-soft);
+  }
+  :where(.bp-preflight__q:has(input:checked)::before) {
+    color: var(--bp-ink);
+  }
+  :where(.bp-preflight__prompt) {
+    font-family: var(--bp-sans);
+    font-weight: var(--bp-weight-strong);
+    font-size: var(--bp-text-h4);
+    margin: 0 0 var(--bp-space-1);
+    display: flex;
+    align-items: baseline;
+    gap: var(--bp-space-2);
+  }
+  :where(.bp-preflight__kind) {
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-sm);
+    letter-spacing: var(--bp-label-sm-ls);
+    text-transform: uppercase;
+    color: var(--bp-text-secondary);
+    font-weight: var(--bp-weight-body);
+  }
+  :where(.bp-preflight__resolved) {
+    display: none;
+    margin-left: auto;
+  }
+  :where(.bp-preflight__q:has(input:checked)) :where(.bp-preflight__resolved) {
+    display: inline-flex;
+  }
+  :where(.bp-preflight__chips) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--bp-space-2);
+    margin-top: var(--bp-space-2);
+  }
+  :where(.bp-preflight__chip) {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    cursor: pointer;
+    border: 1px solid var(--bp-ink-faint);
+    border-radius: var(--bp-radius-pill);
+    padding: 5px 12px;
+    font-size: var(--bp-text-small);
+    background: var(--bp-paper);
+  }
+  :where(.bp-preflight__chip:hover) {
+    border-color: var(--bp-ink-line);
+  }
+  :where(.bp-preflight__chip) :where(input) {
+    accent-color: var(--bp-ink);
+    margin: 0;
+  }
+  :where(.bp-preflight__chip:has(input:checked)) {
+    background: var(--bp-ink);
+    color: var(--bp-paper);
+    border-color: var(--bp-ink);
+  }
+  :where(.bp-preflight__gate) {
+    margin: var(--bp-space-3);
+    border: 1px dashed var(--bp-ink-line);
+    border-radius: var(--bp-radius-6);
+    padding: var(--bp-space-4);
+    text-align: center;
+    background-image: var(--bp-hatch);
+    color: var(--bp-text-secondary);
+  }
+  :where(.bp-preflight__gate-ready) {
+    display: none;
+  }
+  :where(.bp-preflight--ready) :where(.bp-preflight__gate) {
+    background-image: none;
+    border-style: solid;
+    border-color: var(--bp-ink-line);
+  }
+  :where(.bp-preflight--ready) :where(.bp-preflight__gate-locked) {
+    display: none;
+  }
+  :where(.bp-preflight--ready) :where(.bp-preflight__gate-ready) {
+    display: block;
+  }
+  :where(.bp-preflight__draft) {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: 1px solid var(--bp-ink);
+    border-radius: var(--bp-radius-4);
+    padding: 8px 16px;
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    background: var(--bp-ink);
+    color: var(--bp-paper);
+    cursor: pointer;
+    margin-top: var(--bp-space-2);
+  }
+  :where(.bp-preflight__footer) {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-space-3);
+    margin-top: var(--bp-space-3);
+  }
+
+  /* ---- Choice record (static decided archive) ---------------------- */
+  :where(.bp-choice-record) {
+    margin: var(--bp-space-4) 0;
+  }
+  :where(.bp-choice-record__row) {
+    border: 1px solid var(--bp-edge);
+    border-radius: var(--bp-radius-4);
+    padding: var(--bp-space-2) var(--bp-space-3);
+    display: grid;
+    grid-template-columns: minmax(8rem, 14rem) 1fr auto;
+    gap: var(--bp-space-2) var(--bp-space-3);
+    align-items: baseline;
+  }
+  :where(.bp-choice-record__row + .bp-choice-record__row) {
+    margin-top: var(--bp-space-2);
+  }
+  :where(.bp-choice-record__row) :where(dt) {
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-md);
+    letter-spacing: var(--bp-label-md-ls);
+    text-transform: uppercase;
+    color: var(--bp-text-secondary);
+    margin: 0;
+  }
+  :where(.bp-choice-record__row) :where(dd) {
+    margin: 0;
+    font-weight: var(--bp-weight-medium);
+  }
+  @media (max-width: 700px) {
+    :where(.bp-choice-record__row) {
+      grid-template-columns: 1fr;
+      gap: 2px;
+    }
+  }
+
   /* ---- Data-table wrap: let wide tables break past the prose measure */
   :where(.bp-table-wrap) {
     max-width: 100%;

package/dist/blueprint.js

@@ -1,4 +1,8 @@
 // Optional behavior for TOC current state and reading progress.
+import { registerBlueprintChoiceElements } from './blueprint-choices.js'
+
+registerBlueprintChoiceElements()
+
 export function initializeBlueprintRuntime(doc = document, win = window) {
   const root = doc.documentElement
   if (root.dataset.blueprintRuntime === 'ready') return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obvi/blueprint",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "A classless-first CSS design system for beautiful technical blueprint documents.",
   "license": "MIT",
   "type": "module",
@@ -23,6 +23,7 @@
   "exports": {
     ".": "./dist/blueprint.css",
     "./blueprint.js": "./dist/blueprint.js",
+    "./blueprint-choices.js": "./dist/blueprint-choices.js",
     "./blueprint.css": "./dist/blueprint.css",
     "./styles.css": "./dist/blueprint.css",
     "./code-highlighting.css": "./dist/code-highlighting/blueprint-code.css",