pricing-renderer 0.1.0 → 0.2.0

package/dist/element/renderers.js

@@ -1,8 +1,78 @@
 import { html, nothing } from 'lit';
-import { deepEqual, formatCurrency, formatDate, getAtPath, getPlanCta, getPlanHighlightSummary, humanizeIdentifier, isSafeLink, translate, unwrapValue, } from '../core/index.js';
+import { keyed as keyedBy } from 'lit/directives/keyed.js';
+import { live } from 'lit/directives/live.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { deepEqual, formatCurrency, formatDate, getAtPath, getPlanHighlightSummary, humanizeIdentifier, isSafeLink, normalizeAddOnQuantity, translate, unwrapValue, } from '../core/index.js';
+import { maxQuantityOnGrid } from '../core/resolve.js';
+import { blockingAddOnIds } from '../core/selection-change.js';
+import { addOnProvidesForPlan, isAddOnOnlyRow } from '../core/view-model.js';
+import { formatUnit } from '../core/units.js';
+import { isPendingActionId, planCtaView } from './cta.js';
+// the sections a host can hide
+export const PRICING_SECTION_NAMES = [
+    'hero',
+    'metadata',
+    'billing',
+    'variables',
+    'plans',
+    'comparison',
+    'addOns',
+    'summary',
+    // Pieces of the hero, for a page that already has its own title or lead paragraph.
+    'saasName',
+    'description',
+    'tags',
+];
+// the slots a host can request
+export const PRICING_SLOT_NAMES = ['plan-cta', 'summary-actions', 'loading', 'error'];
+// ids are global in the light DOM, so every id carries the
+// instance prefix. The data part (a path, a group or add-on id) keeps [A-Za-z0-9]; every other
+// code point becomes _<lowercase hex>_, so distinct data never yields the same id.
+export function instanceId(state, name, data) {
+    const base = `${state.idPrefix ?? 'pr'}-${name}`;
+    if (data === undefined)
+        return base;
+    const escaped = data.replace(/[^A-Za-z0-9]/gu, (char) => `_${char.codePointAt(0)?.toString(16)}_`);
+    return `${base}-${escaped}`;
+}
+export const DEFAULT_TOOLBAR_THRESHOLD = 40;
+export const AUTO_DIFFERENCES_MIN_ROWS = 100;
+export const ADDON_DENSE_THRESHOLD = 8;
+export const ADDON_VISIBLE_CAP = 8;
+export const DEFAULT_ADDON_FILTER_THRESHOLD = 13;
+export function comparisonRowTotal(viewModel) {
+    return viewModel.comparisonGroups.reduce((total, group) => total + group.rows.length, 0);
+}
+// a missing, non-finite or negative value gives 40
+export function toolbarThresholdOf(value) {
+    return typeof value === 'number' && Number.isFinite(value) && value >= 0
+        ? value
+        : DEFAULT_TOOLBAR_THRESHOLD;
+}
+// a missing, non-finite or negative value gives 13
+export function addOnFilterThresholdOf(value) {
+    return typeof value === 'number' && Number.isFinite(value) && value >= 0
+        ? value
+        : DEFAULT_ADDON_FILTER_THRESHOLD;
+}
+// An explicit initial state wins. Otherwise a long comparison with several plans starts with only
+// the differences, as long as the toolbar is there to switch the filter off.
+export function resolveOnlyDifferences(viewModel, initial, toolbarThreshold = DEFAULT_TOOLBAR_THRESHOLD) {
+    if (initial !== undefined)
+        return initial;
+    const total = comparisonRowTotal(viewModel);
+    return (total > AUTO_DIFFERENCES_MIN_ROWS &&
+        viewModel.plans.length >= 2 &&
+        total > toolbarThresholdOf(toolbarThreshold));
+}
 function t(viewModel, key, parameters) {
     return translate(viewModel.messages, key, parameters);
 }
+function addOnNames(viewModel, ids) {
+    return ids
+        .map((id) => viewModel.addOns.find((addOn) => addOn.id === id)?.name ?? humanizeIdentifier(id))
+        .join(', ');
+}
 const interactiveCardContent = 'a, button, input, select, textarea, label, summary, details, [contenteditable="true"]';
 function selectFromCard(event, select) {
     if (event.defaultPrevented || event.button !== 0)
@@ -28,7 +98,7 @@ function renderPrice(viewModel, price, unit) {
         : nothing}
   `;
 }
-function renderValue(viewModel, value, unit) {
+function renderValue(viewModel, value, unit, addOnOnly = false) {
     if (value === true) {
         return html `<span class="pr-value pr-value--included"
       ><span aria-hidden="true">✓</span
@@ -36,6 +106,12 @@ function renderValue(viewModel, value, unit) {
     >`;
     }
     if (value === false || value === null || value === undefined) {
+        if (addOnOnly) {
+            return html `<span class="pr-value pr-value--addon"
+        ><span aria-hidden="true">${t(viewModel, 'pricing.addOnOnly')}</span
+        ><span class="pr-sr-only">${t(viewModel, 'pricing.addOnOnlySr')}</span></span
+      >`;
+        }
         return html `<span class="pr-value pr-value--excluded"
       ><span aria-hidden="true">—</span
       ><span class="pr-sr-only">${t(viewModel, 'pricing.notIncluded')}</span></span
@@ -49,7 +125,10 @@ function renderValue(viewModel, value, unit) {
     }
     if (typeof value === 'number') {
         const formatted = new Intl.NumberFormat(viewModel.locale).format(value);
-        return html `<span class="pr-value">${formatted}${unit ? ` ${unit}` : ''}</span>`;
+        const label = unit
+            ? ` ${formatUnit(unit, value, viewModel.locale, viewModel.presentation.unitLabels)}`
+            : '';
+        return html `<span class="pr-value">${formatted}${label}</span>`;
     }
     if (Array.isArray(value)) {
         return html `<span class="pr-value">${value.map(String).join(', ')}</span>`;
@@ -63,6 +142,13 @@ function resolvedValuesDiffer(row) {
     const values = row.values.map((cell) => cell.value);
     return values.some((value) => !deepEqual(value, values[0]));
 }
+// A description that is empty or only repeats the row name adds nothing, so it is not rendered.
+function rowDescription(row) {
+    const description = row.description?.trim();
+    if (!description)
+        return undefined;
+    return description.toLowerCase() === row.name.trim().toLowerCase() ? undefined : row.description;
+}
 function renderRowMetadata(viewModel, row) {
     if (viewModel.mode !== 'catalog')
         return nothing;
@@ -79,18 +165,30 @@ function renderRowMetadata(viewModel, row) {
         ? html `<span class="pr-row-metadata">${metadata.join(' · ')}</span>`
         : nothing;
 }
+// also the text of the title that stays when the hero is hidden
+export function heroTitle(viewModel) {
+    return (viewModel.presentation.title ??
+        viewModel.pricing.metadata.saasName ??
+        t(viewModel, 'pricing.title'));
+}
 export function renderHeader(state) {
     const { viewModel } = state;
-    const title = viewModel.presentation.title ??
-        viewModel.pricing.metadata.saasName ??
-        t(viewModel, 'pricing.title');
+    const hidden = state.hiddenSections;
+    const title = heroTitle(viewModel);
     const subtitle = viewModel.presentation.subtitle ?? t(viewModel, 'pricing.description');
+    // The title carries the id that labels the shell, so hiding the name keeps it for screen
+    // readers instead of dropping the element.
+    const titleHidden = hidden?.has('saasName') === true;
     return html `
     <header class="pr-hero" data-pr-part="hero">
-      <div class="pr-hero__eyebrow">${t(viewModel, 'pricing.title')}</div>
-      <h2 class="pr-hero__title" id="pr-title">${title}</h2>
-      ${subtitle ? html `<p class="pr-hero__subtitle">${subtitle}</p>` : nothing}
-      ${viewModel.pricing.metadata.tags.length
+      ${titleHidden ? nothing : html `<div class="pr-hero__eyebrow">${t(viewModel, 'pricing.title')}</div>`}
+      <h2 class=${titleHidden ? 'pr-sr-only' : 'pr-hero__title'} id=${instanceId(state, 'title')}>
+        ${title}
+      </h2>
+      ${subtitle && hidden?.has('description') !== true
+        ? html `<p class="pr-hero__subtitle">${subtitle}</p>`
+        : nothing}
+      ${viewModel.pricing.metadata.tags.length && hidden?.has('tags') !== true
         ? html `<ul class="pr-tag-list" aria-label="${t(viewModel, 'pricing.tags')}">
               ${viewModel.pricing.metadata.tags.map((tag) => html `<li class="pr-tag">${tag}</li>`)}
             </ul>`
@@ -113,7 +211,7 @@ export function renderBilling(state) {
             <label class="pr-segmented__option">
               <input
                 type="radio"
-                name="pr-billing"
+                name=${instanceId(state, 'billing')}
                 value=${period.id}
                 .checked=${selection.billingPeriod === period.id}
                 @change=${() => actions.selectBilling(period.id)}
@@ -129,14 +227,105 @@ export function renderBilling(state) {
     </fieldset>
   `;
 }
+// the pending text replaces the label of the busy control
+function renderCtaLabel(viewModel, label, pending) {
+    return pending
+        ? html `<span data-pr-part="cta-pending">${t(viewModel, 'pricing.pending')}</span>`
+        : label;
+}
+// aria-disabled replaces disabled while an action is pending, so
+// the control that became pending keeps the focus
+function renderPlanCta(state, plan) {
+    const { viewModel, actions } = state;
+    const cta = planCtaView(viewModel, plan, {
+        currentPlanId: state.currentPlanId,
+        pendingActionId: state.pendingActionId,
+    });
+    // data-kind agrees with the pr-button--<kind> class
+    const kind = cta.kind === 'secondary' ? 'secondary' : 'primary';
+    const origin = cta.relation
+        ? { relation: cta.relation, source: 'plan' }
+        : undefined;
+    const content = renderCtaLabel(viewModel, cta.label, cta.pending);
+    // The plan the visitor is already on has nothing to press. A disabled button invites a click
+    // that will never work and repeats the "your plan" badge in the shape of an action, so the
+    // slot keeps its height with plain text instead.
+    if (cta.disabled && cta.relation === 'current') {
+        return html `<p
+      class="pr-plan-card__current"
+      data-pr-part="cta"
+      data-kind=${kind}
+      data-relation="current"
+    >
+      ${content}
+    </p>`;
+    }
+    const trigger = () => actions.triggerAction(cta.actionId, plan.id, cta.eventHref, cta.metadata, origin);
+    return cta.href
+        ? html `<a
+        class="pr-button pr-button--${kind}"
+        data-pr-part="cta"
+        data-kind=${kind}
+        data-relation=${cta.relation ?? nothing}
+        data-pending=${cta.pending ? 'true' : nothing}
+        aria-busy=${cta.pending ? 'true' : nothing}
+        aria-disabled=${cta.ariaDisabled ? 'true' : nothing}
+        aria-label=${cta.ariaLabel ?? nothing}
+        href=${cta.href}
+        target=${cta.target ?? '_self'}
+        rel=${cta.target === '_blank' ? 'noopener noreferrer' : nothing}
+        @click=${(event) => {
+            if (!trigger())
+                event.preventDefault();
+        }}
+        >${content}</a
+      >`
+        : html `<button
+        class="pr-button pr-button--${kind}"
+        data-pr-part="cta"
+        data-kind=${kind}
+        data-relation=${cta.relation ?? nothing}
+        data-pending=${cta.pending ? 'true' : nothing}
+        aria-busy=${cta.pending ? 'true' : nothing}
+        aria-disabled=${cta.ariaDisabled ? 'true' : nothing}
+        aria-label=${cta.ariaLabel ?? nothing}
+        type="button"
+        ?disabled=${cta.disabled}
+        @click=${trigger}
+      >
+        ${content}
+      </button>`;
+}
+// An empty node the host fills; it carries the state of the built-in CTA and card as data-*. The
+// keyed directive gives each plan its own node, so a node never moves to another plan.
+function renderPlanCtaSlot(state, plan, selected, current) {
+    const cta = planCtaView(state.viewModel, plan, {
+        currentPlanId: state.currentPlanId,
+        pendingActionId: state.pendingActionId,
+    });
+    return keyedBy(plan.id, html `<div
+      data-pr-slot="plan-cta"
+      data-pr-part="plan-cta-slot"
+      data-plan-id=${plan.id}
+      data-plan-name=${plan.name}
+      data-label=${cta.label}
+      data-href=${cta.href ?? nothing}
+      data-relation=${cta.relation ?? nothing}
+      data-selected=${String(selected)}
+      data-current=${current ? 'true' : nothing}
+      data-pending=${cta.pending ? 'true' : nothing}
+      data-any-pending=${cta.ariaDisabled ? 'true' : nothing}
+    ></div>`);
+}
 export function renderPlans(state) {
     const { viewModel, selection, selectionEnabled, ctaEnabled, actions } = state;
+    const titleId = instanceId(state, 'plans-title');
     return html `
-    <section class="pr-section" aria-labelledby="pr-plans-title" data-pr-part="plans">
+    <section class="pr-section" aria-labelledby=${titleId} data-pr-part="plans">
       <div class="pr-section__heading">
         <div>
           <p class="pr-section__eyebrow">${t(viewModel, 'pricing.plans')}</p>
-          <h3 id="pr-plans-title">${t(viewModel, 'pricing.plans')}</h3>
+          <h3 id=${titleId}>${t(viewModel, 'pricing.plansTitle')}</h3>
         </div>
       </div>
       ${viewModel.plans.length === 0
@@ -144,28 +333,37 @@ export function renderPlans(state) {
         : html `<div
               class="pr-plan-grid"
               role=${selectionEnabled ? 'radiogroup' : nothing}
-              aria-labelledby=${selectionEnabled ? 'pr-plans-title' : nothing}
+              aria-labelledby=${selectionEnabled ? titleId : nothing}
             >
               ${viewModel.plans.map((plan) => {
             const selected = selection.planId === plan.id;
-            const cta = getPlanCta(viewModel.presentation, plan.id);
+            const current = state.currentPlanId === plan.id;
             const highlightSummary = getPlanHighlightSummary(viewModel, plan.id);
             const featured = highlightSummary.badges.some((badge) => badge.emphasize);
-            const actionId = cta?.id ?? `choose-${plan.id}`;
             return html `
                   <article
                     class="pr-plan-card ${selectionEnabled ? 'pr-selectable-card' : ''} ${selected ? 'is-selected' : ''} ${featured ? 'is-featured' : ''}"
                     data-pr-part="plan-card"
                     data-plan-id=${plan.id}
                     data-selected=${String(selected)}
+                    data-current=${current ? 'true' : nothing}
+                    data-featured=${String(featured)}
                     @click=${(event) => selectionEnabled
                 ? selectFromCard(event, () => actions.selectPlan(plan.id))
                 : undefined}
                   >
                     <div class="pr-plan-card__top">
-                      ${highlightSummary.badges.length > 0 || selectionEnabled
+                      ${highlightSummary.badges.length > 0 || selectionEnabled || current
                 ? html `<div class="pr-plan-card__status">
                               <div class="pr-plan-card__badges">
+                                ${current
+                    ? html `<span
+                                        class="pr-badge"
+                                        data-pr-part="current-badge"
+                                        data-tone="success"
+                                        >${t(viewModel, 'pricing.currentPlanBadge')}</span
+                                      >`
+                    : nothing}
                                 ${highlightSummary.badges.map((badge) => html `<span
                                       class="pr-badge"
                                       data-pr-part="plan-badge"
@@ -174,19 +372,21 @@ export function renderPlans(state) {
                                       >${badge.label}</span
                                     >`)}
                               </div>
-                              ${selectionEnabled
+                              ${
+                // live() resets the radio on cancel
+                selectionEnabled
                     ? html `<label
                                       class="pr-selection-control pr-plan-card__selector"
                                       data-pr-part="selection-control"
                                     >
                                       <input
                                         type="radio"
-                                        name="pr-plan"
+                                        name=${instanceId(state, 'plan')}
                                         value=${plan.id}
                                         aria-label=${t(viewModel, 'pricing.choosePlan', {
                         plan: plan.name,
                     })}
-                                        .checked=${selected}
+                                        .checked=${live(selected)}
                                         @change=${() => actions.selectPlan(plan.id)}
                                       />
                                       <span
@@ -195,7 +395,13 @@ export function renderPlans(state) {
                                       ></span>
                                       <span class="pr-selection-control__label" aria-hidden="true"
                                         >${selected
-                        ? t(viewModel, 'pricing.selected')
+                        ? // On the contract's own plan the "your plan" badge
+                            // already says it, and the radio is visibly checked:
+                            // a third "Selected" adds nothing. It comes back as
+                            // soon as the visitor selects a different plan.
+                            current
+                                ? nothing
+                                : t(viewModel, 'pricing.selected')
                         : t(viewModel, 'pricing.select')}</span
                                       >
                                     </label>`
@@ -225,7 +431,14 @@ export function renderPlans(state) {
                                 <span class="pr-highlight-list__icon" aria-hidden="true">✓</span>
                                 <span>${row.name}</span>
                                 <span class="pr-highlight-list__value"
-                                  >${renderValue(viewModel, value, row.unit)}</span
+                                  >${
+                    // The bullet already means "included", so a plain true adds
+                    // no visible information; only its screen-reader text stays.
+                    value === true
+                        ? html `<span class="pr-sr-only"
+                                          >${t(viewModel, 'pricing.included')}</span
+                                        >`
+                        : renderValue(viewModel, value, row.unit)}</span
                                 >
                               </li>`;
                 })}
@@ -233,32 +446,9 @@ export function renderPlans(state) {
                 : nothing}
                     ${!ctaEnabled
                 ? nothing
-                : cta?.href && isSafeLink(cta.href)
-                    ? html `<a
-                              class="pr-button ${cta.kind === 'secondary'
-                        ? 'pr-button--secondary'
-                        : 'pr-button--primary'}"
-                              data-pr-part="cta"
-                              href=${cta.href}
-                              target=${cta.target ?? '_self'}
-                              rel=${cta.target === '_blank' ? 'noopener noreferrer' : nothing}
-                              @click=${(event) => {
-                        if (!actions.triggerAction(actionId, plan.id, cta.href, cta.metadata)) {
-                            event.preventDefault();
-                        }
-                    }}
-                              >${cta.label}</a
-                            >`
-                    : html `<button
-                              class="pr-button ${cta?.kind === 'secondary'
-                        ? 'pr-button--secondary'
-                        : 'pr-button--primary'}"
-                              data-pr-part="cta"
-                              type="button"
-                              @click=${() => actions.triggerAction(actionId, plan.id, cta?.href, cta?.metadata)}
-                            >
-                              ${cta?.label ?? t(viewModel, 'pricing.choosePlan', { plan: plan.name })}
-                            </button>`}
+                : state.slots?.has('plan-cta')
+                    ? renderPlanCtaSlot(state, plan, selected, current)
+                    : renderPlanCta(state, plan)}
                   </article>
                 `;
         })}
@@ -269,12 +459,16 @@ export function renderPlans(state) {
 function controlInput(state, control, invalid) {
     const { selection, actions } = state;
     const value = getAtPath(selection.variables, control.path);
-    const id = `pr-variable-${control.path.replace(/[^\w-]+/g, '-')}`;
+    const id = instanceId(state, 'variable', control.path);
+    const describedBy = [control.description ? `${id}-help` : '', invalid ? `${id}-error` : '']
+        .filter(Boolean)
+        .join(' ') || nothing;
     if (control.type === 'boolean') {
         return html `<label class="pr-switch" for=${id}>
       <input
-        id=${id}
+        id="${id}"
         type="checkbox"
+        aria-describedby="${describedBy}"
         aria-invalid=${invalid}
         .checked=${Boolean(value)}
         @change=${(event) => actions.updateVariable(control.path, event.currentTarget.checked)}
@@ -284,7 +478,8 @@ function controlInput(state, control, invalid) {
     }
     if (control.type === 'select') {
         return html `<select
-      id=${id}
+      id="${id}"
+      aria-describedby="${describedBy}"
       aria-invalid=${invalid}
       .value=${String(value ?? '')}
       @change=${(event) => {
@@ -302,8 +497,9 @@ function controlInput(state, control, invalid) {
         const numericValue = typeof value === 'number' ? value : Number(value) || 0;
         return html `<div class="pr-slider">
       <input
-        id=${id}
+        id="${id}"
         type="range"
+        aria-describedby="${describedBy}"
         aria-invalid=${invalid}
         .value=${String(numericValue)}
         min=${control.min ?? 0}
@@ -313,6 +509,7 @@ function controlInput(state, control, invalid) {
       />
       <input
         type="number"
+        aria-describedby="${describedBy}"
         aria-invalid=${invalid}
         aria-label=${control.label ?? control.path}
         .value=${String(numericValue)}
@@ -325,7 +522,8 @@ function controlInput(state, control, invalid) {
     }
     const isNumber = control.type === 'number';
     return html `<input
-    id=${id}
+    id="${id}"
+    aria-describedby="${describedBy}"
     aria-invalid=${invalid}
     type=${isNumber ? 'number' : 'text'}
     .value=${String(value ?? '')}
@@ -342,17 +540,18 @@ export function renderVariables(state) {
     const { viewModel, variablesEnabled, actions } = state;
     if (!variablesEnabled || viewModel.variableControls.length === 0)
         return nothing;
+    const titleId = instanceId(state, 'variables-title');
     return html `
-    <section class="pr-configurator" aria-labelledby="pr-variables-title" data-pr-part="variables">
+    <section class="pr-configurator" aria-labelledby=${titleId} data-pr-part="variables">
       <div class="pr-section__heading">
-        <h3 id="pr-variables-title">${t(viewModel, 'pricing.variables')}</h3>
+        <h3 id=${titleId}>${t(viewModel, 'pricing.variables')}</h3>
         <button class="pr-button pr-button--quiet" type="button" @click=${actions.resetVariables}>
           ${t(viewModel, 'pricing.reset')}
         </button>
       </div>
       <div class="pr-variable-grid">
         ${viewModel.variableControls.map((control) => {
-        const id = `pr-variable-${control.path.replace(/[^\w-]+/g, '-')}`;
+        const id = instanceId(state, 'variable', control.path);
         const invalid = viewModel.resolved.diagnostics.some((item) => {
             const planMatch = item.path?.match(/^plans\.([^.]+)\.price$/)?.[1];
             const addOnMatch = item.path?.match(/^addOns\.([^.]+)\.price$/)?.[1];
@@ -369,7 +568,7 @@ export function renderVariables(state) {
               ${control.description ? html `<p id="${id}-help">${control.description}</p>` : nothing}
               ${controlInput(state, control, invalid)}
               ${invalid
-            ? html `<p class="pr-field__error" role="alert">
+            ? html `<p id="${id}-error" class="pr-field__error" role="alert">
                       ${t(viewModel, 'pricing.variableError')}
                     </p>`
             : nothing}
@@ -397,10 +596,24 @@ function filterGroups(state) {
 function visibleRows(state, group) {
     return state.revealedGroups.has(group.id) ? group.rows : group.rows.slice(0, 30);
 }
-function renderComparisonToolbar(state, totalRows) {
-    if (state.viewModel.comparisonGroups.flatMap((group) => group.rows).length <= 40)
-        return nothing;
+function isHeaderless(group) {
+    return group.kind === 'untagged';
+}
+// a group with no header cannot be toggled
+function isGroupExpanded(state, group) {
+    return isHeaderless(group) || state.expandedGroups.has(group.id) || Boolean(state.search);
+}
+// The rows that are on the page: those of expanded groups, after the cap per group.
+function renderedRowCount(state, groups) {
+    return groups.reduce((count, group) => count + (isGroupExpanded(state, group) ? visibleRows(state, group).length : 0), 0);
+}
+function renderComparisonToolbar(state, groups) {
     const { viewModel, actions } = state;
+    const total = comparisonRowTotal(viewModel);
+    // a short comparison gets no toolbar and looks as before
+    if (total <= toolbarThresholdOf(state.toolbarThreshold))
+        return nothing;
+    const shown = renderedRowCount(state, groups);
     return html `
     <div class="pr-comparison-toolbar" data-pr-part="comparison-toolbar">
       <label class="pr-search">
@@ -420,15 +633,17 @@ function renderComparisonToolbar(state, totalRows) {
         />
         <span>${t(viewModel, 'pricing.onlyDifferences')}</span>
       </label>
-      <div class="pr-toolbar-actions">
-        <button type="button" @click=${() => actions.setAllGroups(true)}>
-          ${t(viewModel, 'pricing.expandAll')}
-        </button>
-        <button type="button" @click=${() => actions.setAllGroups(false)}>
-          ${t(viewModel, 'pricing.collapseAll')}
-        </button>
-      </div>
-      <span aria-live="polite">${t(viewModel, 'pricing.rowsShown', { count: totalRows })}</span>
+      ${viewModel.comparisonGroups.every(isHeaderless)
+        ? nothing
+        : html `<div class="pr-toolbar-actions">
+              <button type="button" @click=${() => actions.setAllGroups(true)}>
+                ${t(viewModel, 'pricing.expandAll')}
+              </button>
+              <button type="button" @click=${() => actions.setAllGroups(false)}>
+                ${t(viewModel, 'pricing.collapseAll')}
+              </button>
+            </div>`}
+      <span aria-live="polite">${t(viewModel, 'pricing.rowsShownOf', { shown, total })}</span>
     </div>
   `;
 }
@@ -436,50 +651,58 @@ function renderCompactComparison(state, groups) {
     const { viewModel, actions } = state;
     return html `<div class="pr-compact-comparison">
     ${groups.map((group) => {
-        const expanded = state.expandedGroups.has(group.id) || Boolean(state.search);
+        const expanded = isGroupExpanded(state, group);
         const rows = visibleRows(state, group);
         return html `
         <section class="pr-comparison-group">
-          <h4>
-            <button
-              type="button"
-              aria-expanded=${expanded}
-              aria-controls="pr-group-${group.id}"
-              @click=${() => actions.toggleGroup(group.id)}
-            >
-              <span>${group.name}</span><span aria-hidden="true">${expanded ? '−' : '+'}</span>
-            </button>
-          </h4>
+          ${isHeaderless(group)
+            ? nothing
+            : html `<h4>
+                  <button
+                    type="button"
+                    aria-expanded=${expanded}
+                    aria-controls=${expanded ? instanceId(state, 'group', group.id) : nothing}
+                    @click=${() => actions.toggleGroup(group.id)}
+                  >
+                    <span>${group.name}</span
+                    ><span aria-hidden="true">${expanded ? '−' : '+'}</span>
+                  </button>
+                </h4>`}
           ${expanded
-            ? html `<div id="pr-group-${group.id}">
-                  ${rows.map((row) => html `
+            ? html `<div id="${instanceId(state, 'group', group.id)}">
+                  ${rows.map((row) => {
+                const addOnOnly = isAddOnOnlyRow(viewModel, row);
+                return html `
                       <article class="pr-feature-card" data-pr-part="comparison-row">
                         <div>
                           <h5>${row.name}</h5>
-                          ${row.description ? html `<p>${row.description}</p>` : nothing}
+                          ${rowDescription(row) ? html `<p>${rowDescription(row)}</p>` : nothing}
                           ${renderRowMetadata(viewModel, row)}
                           ${row.docUrl && isSafeLink(row.docUrl)
-                ? html `<a href=${row.docUrl} target="_blank" rel="noopener noreferrer"
+                    ? html `<a href=${row.docUrl} target="_blank" rel="noopener noreferrer"
                                   >${t(viewModel, 'pricing.documentation')}</a
                                 >`
-                : nothing}
+                    : nothing}
                         </div>
                         <dl>
                           ${row.values.map((cell) => {
-                const plan = viewModel.plans.find((candidate) => candidate.id === cell.planId);
-                return html `<div>
+                    const plan = viewModel.plans.find((candidate) => candidate.id === cell.planId);
+                    return html `<div>
                               <dt>${plan?.name ?? cell.planId}</dt>
-                              <dd>${renderValue(viewModel, cell.value, row.unit)}</dd>
+                              <dd>
+                                ${renderValue(viewModel, cell.value, row.unit, addOnOnly && addOnProvidesForPlan(viewModel, row, cell.planId))}
+                              </dd>
                             </div>`;
-            })}
+                })}
                         </dl>
                       </article>
-                    `)}
+                    `;
+            })}
                   ${group.rows.length > rows.length
                 ? html `<button
                           class="pr-button pr-button--quiet"
                           type="button"
-                          @click=${() => actions.revealGroup(group.id)}
+                          @click=${(event) => actions.revealGroup(group.id, event.currentTarget, event.detail === 0)}
                         >
                           ${t(viewModel, 'pricing.showRemaining', {
                     count: group.rows.length - rows.length,
@@ -513,33 +736,42 @@ function renderTableComparison(state, groups) {
           </tr>
         </thead>
         ${groups.map((group) => {
-        const expanded = state.expandedGroups.has(group.id) || Boolean(state.search);
+        const expanded = isGroupExpanded(state, group);
         const rows = visibleRows(state, group);
         return html `
             <tbody>
-              <tr class="pr-category-row">
-                <th colspan=${viewModel.plans.length + 1}>
-                  <button
-                    type="button"
-                    aria-expanded=${expanded}
-                    @click=${() => actions.toggleGroup(group.id)}
-                  >
-                    <span>${group.name}</span
-                    ><span aria-hidden="true">${expanded ? '−' : '+'}</span>
-                  </button>
-                </th>
-              </tr>
+              ${isHeaderless(group)
+            ? nothing
+            : html `<tr class="pr-category-row">
+                      <th colspan=${viewModel.plans.length + 1}>
+                        <button
+                          type="button"
+                          aria-expanded=${expanded}
+                          @click=${() => actions.toggleGroup(group.id)}
+                        >
+                          <span>${group.name}</span
+                          ><span aria-hidden="true">${expanded ? '−' : '+'}</span>
+                        </button>
+                      </th>
+                    </tr>`}
               ${expanded
-            ? rows.map((row) => html `
+            ? rows.map((row) => {
+                const addOnOnly = isAddOnOnlyRow(viewModel, row);
+                return html `
                         <tr data-pr-part="comparison-row">
                           <th scope="row">
                             <span>${row.name}</span>
-                            ${row.description ? html `<small>${row.description}</small>` : nothing}
+                            ${rowDescription(row)
+                    ? html `<small>${rowDescription(row)}</small>`
+                    : nothing}
                             ${renderRowMetadata(viewModel, row)}
                           </th>
-                          ${row.values.map((cell) => html `<td>${renderValue(viewModel, cell.value, row.unit)}</td>`)}
+                          ${row.values.map((cell) => html `<td>
+                                ${renderValue(viewModel, cell.value, row.unit, addOnOnly && addOnProvidesForPlan(viewModel, row, cell.planId))}
+                              </td>`)}
                         </tr>
-                      `)
+                      `;
+            })
             : nothing}
               ${expanded && group.rows.length > rows.length
             ? html `<tr>
@@ -547,7 +779,7 @@ function renderTableComparison(state, groups) {
                         <button
                           class="pr-button pr-button--quiet"
                           type="button"
-                          @click=${() => actions.revealGroup(group.id)}
+                          @click=${(event) => actions.revealGroup(group.id, event.currentTarget, event.detail === 0)}
                         >
                           ${t(viewModel, 'pricing.showRemaining', {
                 count: group.rows.length - rows.length,
@@ -566,32 +798,67 @@ function renderTableComparison(state, groups) {
 export function renderComparison(state) {
     const { viewModel } = state;
     const groups = filterGroups(state);
-    const totalRows = groups.reduce((total, group) => total + group.rows.length, 0);
     if (viewModel.comparisonGroups.length === 0)
         return nothing;
+    const titleId = instanceId(state, 'comparison-title');
     return html `
-    <section
-      class="pr-section pr-comparison"
-      aria-labelledby="pr-comparison-title"
-      data-pr-part="comparison"
-    >
+    <section class="pr-section pr-comparison" aria-labelledby=${titleId} data-pr-part="comparison">
       <div class="pr-section__heading">
         <div>
           <p class="pr-section__eyebrow">${t(viewModel, 'pricing.details')}</p>
-          <h3 id="pr-comparison-title">${t(viewModel, 'pricing.comparison')}</h3>
+          <h3 id=${titleId}>${t(viewModel, 'pricing.comparison')}</h3>
         </div>
       </div>
-      ${renderComparisonToolbar(state, totalRows)}
-      ${state.compact
-        ? renderCompactComparison(state, groups)
-        : renderTableComparison(state, groups)}
+      ${viewModel.plans.length === 0
+        ? html `<p class="pr-empty">${t(viewModel, 'pricing.noComparison')}</p>`
+        : html `${renderComparisonToolbar(state, groups)}
+            ${groups.length === 0
+            ? html `<p class="pr-empty" role="status" data-pr-part="comparison-empty">
+                    ${t(viewModel, 'pricing.noMatches')}
+                  </p>`
+            : state.compact
+                ? renderCompactComparison(state, groups)
+                : renderTableComparison(state, groups)}`}
     </section>
   `;
 }
 function addOnAvailability(addOn, planId) {
     return (addOn.availableFor.length === 0 || (planId !== undefined && addOn.availableFor.includes(planId)));
 }
-function renderAddOnEffects(viewModel, addOn) {
+function hasAddOnNotes(addOn) {
+    return addOn.availableFor.length > 0 || addOn.dependsOn.length > 0 || addOn.excludes.length > 0;
+}
+// The availability, dependency and exclusion paragraphs of an add-on card. The quantity relation
+// is not here: it governs what the reader can pick, so it belongs on the face of the card, which
+// renderAddOnCard draws, not behind the disclosure this prose sits in when the grid is dense.
+function renderAddOnNotes(viewModel, addOn) {
+    return html `
+    ${addOn.availableFor.length
+        ? html `<p>
+            ${t(viewModel, 'pricing.availableFor', {
+            plans: addOn.availableFor
+                .map((id) => viewModel.pricing.plans.find((plan) => plan.id === id)?.name ?? id)
+                .join(', '),
+        })}
+          </p>`
+        : nothing}
+    ${addOn.dependsOn.length
+        ? html `<p>
+            ${t(viewModel, 'pricing.dependsOn', {
+            items: addOnNames(viewModel, addOn.dependsOn),
+        })}
+          </p>`
+        : nothing}
+    ${addOn.excludes.length
+        ? html `<p>
+            ${t(viewModel, 'pricing.excludes', {
+            items: addOnNames(viewModel, addOn.excludes),
+        })}
+          </p>`
+        : nothing}
+  `;
+}
+function renderAddOnEffects(viewModel, addOn, dense = false) {
     const effects = [
         ...Object.entries(addOn.features).map(([id, value]) => ({
             kind: t(viewModel, 'pricing.featureEffect'),
@@ -609,6 +876,27 @@ function renderAddOnEffects(viewModel, addOn) {
             value: unwrapValue(value),
         })),
     ];
+    if (dense) {
+        // the paragraphs join the effects behind one disclosure
+        if (effects.length === 0 && !hasAddOnNotes(addOn))
+            return nothing;
+        return html `
+      <details class="pr-addon-effects">
+        <summary>${t(viewModel, 'pricing.moreDetails')}</summary>
+        ${hasAddOnNotes(addOn)
+            ? html `<div class="pr-addon-notes">${renderAddOnNotes(viewModel, addOn)}</div>`
+            : nothing}
+        ${effects.length
+            ? html `<dl>
+                ${effects.map((effect) => html `<div>
+                      <dt>${effect.kind}: ${humanizeIdentifier(effect.id)}</dt>
+                      <dd>${renderValue(viewModel, effect.value)}</dd>
+                    </div>`)}
+              </dl>`
+            : nothing}
+      </details>
+    `;
+    }
     if (effects.length === 0)
         return nothing;
     return html `
@@ -623,157 +911,369 @@ function renderAddOnEffects(viewModel, addOn) {
     </details>
   `;
 }
-export function renderAddOns(state) {
+function renderAddOnCard(state, addOn, dense) {
     const { viewModel, selection, selectionEnabled, actions } = state;
-    if (viewModel.addOns.length === 0)
+    const selected = selection.addOns[addOn.id]?.selected ?? false;
+    const addOnSelection = selection.addOns[addOn.id];
+    const quantity = addOnSelection
+        ? normalizeAddOnQuantity(viewModel.pricing, addOn.id, {
+            ...addOnSelection,
+            selected: true,
+        })
+        : (addOn.subscriptionConstraints?.minQuantity ?? 1);
+    const availableForPlan = addOnAvailability(addOn, selection.planId);
+    // A selected add-on is never blocked: it has to stay operable, or there would be no way to
+    // remove the very thing that is blocking the others.
+    const blockedBy = selected ? [] : blockingAddOnIds(viewModel.pricing, selection, addOn.id);
+    const available = availableForPlan && blockedBy.length === 0;
+    const constraints = addOn.subscriptionConstraints;
+    const current = state.currentAddOnIds?.has(addOn.id) ?? false;
+    // data-available is the negation of is-unavailable
+    const helpId = instanceId(state, 'addon-help', addOn.id);
+    return html `
+    <article
+      class="pr-addon-card ${selectionEnabled && available ? 'pr-selectable-card' : ''} ${selected ? 'is-selected' : ''} ${available ? '' : 'is-unavailable'}${dense ? ' pr-addon-card--dense' : ''}"
+      data-pr-part="add-on-card"
+      data-add-on-id=${addOn.id}
+      data-selected=${String(selected)}
+      data-current=${current ? 'true' : nothing}
+      data-available=${String(available)}
+      @click=${(event) => selectionEnabled && available
+        ? selectFromCard(event, () => actions.toggleAddOn(addOn.id, !selected))
+        : undefined}
+    >
+      <div class="pr-addon-card__heading">
+        <div>
+          ${current
+        ? html `<span class="pr-badge" data-pr-part="current-add-on-badge" data-tone="success"
+                  >${t(viewModel, 'pricing.currentAddOn')}</span
+                >`
+        : nothing}
+          <h4>${addOn.name}</h4>
+          ${addOn.description ? html `<p>${addOn.description}</p>` : nothing}
+        </div>
+        ${selectionEnabled
+        ? html `<label
+                class="pr-selection-control pr-addon-card__check"
+                data-pr-part="selection-control"
+              >
+                <input
+                  type="checkbox"
+                  .checked=${selected}
+                  ?disabled=${!available}
+                  aria-label=${t(viewModel, selected ? 'pricing.removeAddOn' : 'pricing.addAddOn', {
+            addOn: addOn.name,
+        })}
+                  aria-describedby="${helpId}"
+                  @change=${(event) => actions.toggleAddOn(addOn.id, event.currentTarget.checked)}
+                />
+                <span class="pr-selection-control__icon" aria-hidden="true"></span>
+                <span class="pr-selection-control__label" aria-hidden="true"
+                  >${selected ? t(viewModel, 'pricing.added') : t(viewModel, 'pricing.add')}</span
+                >
+              </label>`
+        : nothing}
+      </div>
+      <div class="pr-price pr-price--addon">
+        ${renderPrice(viewModel, viewModel.resolved.addOnPrices[addOn.id], addOn.unit)}
+      </div>
+      <div id="${helpId}" class="pr-addon-card__details">
+        ${!availableForPlan
+        ? html `<p class="pr-status" data-pr-part="add-on-status" data-reason="plan">
+                ${t(viewModel, 'pricing.notAvailable')}
+              </p>`
+        : blockedBy.length > 0
+            ? // the add-ons that block it by name: the reader needs to know what to drop, not
+                // the whole list of what this one excludes
+                html `<p class="pr-status" data-pr-part="add-on-status" data-reason="excluded">
+                  ${t(viewModel, 'pricing.notAvailableWith', {
+                    items: addOnNames(viewModel, blockedBy),
+                })}
+                </p>`
+            : nothing}
+        ${renderQuantityConstraints(viewModel, constraints)}
+        ${dense ? nothing : renderAddOnNotes(viewModel, addOn)}
+      </div>
+      ${renderAddOnEffects(viewModel, addOn, dense)}
+      ${selectionEnabled && selected && constraints
+        ? html `<div class="pr-stepper" data-pr-part="add-on-quantity">
+              <span>${t(viewModel, 'pricing.addOnQuantity', { addOn: addOn.name })}</span>
+              <div>
+                <button
+                  type="button"
+                  aria-label=${t(viewModel, 'pricing.decrease', { item: addOn.name })}
+                  @click=${() => actions.updateAddOnQuantity(addOn.id, quantity - constraints.quantityStep)}
+                >
+                  −
+                </button>
+                <input
+                  type="number"
+                  aria-label=${t(viewModel, 'pricing.addOnQuantity', { addOn: addOn.name })}
+                  .value=${String(quantity)}
+                  min=${constraints.minQuantity}
+                  max=${maxQuantityOnGrid(constraints) ?? nothing}
+                  step=${constraints.quantityStep}
+                  @change=${(event) => actions.updateAddOnQuantity(addOn.id, Number(event.currentTarget.value))}
+                />
+                <button
+                  type="button"
+                  aria-label=${t(viewModel, 'pricing.increase', { item: addOn.name })}
+                  @click=${() => actions.updateAddOnQuantity(addOn.id, quantity + constraints.quantityStep)}
+                >
+                  +
+                </button>
+              </div>
+            </div>`
+        : nothing}
+    </article>
+  `;
+}
+function renderAddOnGrid(state, addOns, dense, keyed = false) {
+    // The visible cards of the filter mode change with the search and show-more, so they are keyed
+    // by id: an open disclosure or the focus stays with its add-on.
+    return html `<div class="pr-addon-grid${dense ? ' pr-addon-grid--dense' : ''}">
+    ${keyed
+        ? repeat(addOns, (addOn) => addOn.id, (addOn) => renderAddOnCard(state, addOn, dense))
+        : addOns.map((addOn) => renderAddOnCard(state, addOn, dense))}
+  </div>`;
+}
+function renderFilteredAddOns(state, dense) {
+    const { viewModel, selection, actions } = state;
+    const all = viewModel.addOns;
+    const search = (state.addOnSearch ?? '').trim().toLowerCase();
+    const isSelected = (addOn) => selection.addOns[addOn.id]?.selected ?? false;
+    let visible;
+    if (search) {
+        visible = all.filter((addOn) => isSelected(addOn) ||
+            addOn.name.toLowerCase().includes(search) ||
+            (addOn.description ?? '').toLowerCase().includes(search));
+    }
+    else if (state.addOnsRevealed) {
+        visible = [...all];
+    }
+    else {
+        visible = all.filter((addOn, index) => index < ADDON_VISIBLE_CAP || isSelected(addOn));
+    }
+    const hidden = all.length - visible.length;
+    const label = t(viewModel, 'pricing.searchAddOns');
+    const counter = t(viewModel, 'pricing.rowsShownOf', { shown: visible.length, total: all.length });
+    return html `<div class="pr-addon-main">
+    <div class="pr-addon-toolbar" data-pr-part="addon-toolbar">
+      <label class="pr-search">
+        <span class="pr-sr-only">${label}</span>
+        <input
+          type="search"
+          placeholder=${label}
+          .value=${state.addOnSearch ?? ''}
+          @input=${(event) => actions.updateAddOnSearch?.(event.currentTarget.value)}
+        />
+      </label>
+      <span aria-live="polite">${counter}</span>
+    </div>
+    ${visible.length === 0
+        ? html `<p class="pr-empty" role="status" data-pr-part="addon-empty">
+            ${t(viewModel, 'pricing.noMatches')}
+          </p>`
+        : renderAddOnGrid(state, visible, dense, true)}
+    ${!search && hidden > 0
+        ? html `<button
+            class="pr-button pr-button--quiet"
+            type="button"
+            @click=${(event) => actions.revealAddOns?.(event?.detail === 0)}
+          >
+            ${t(viewModel, 'pricing.showRemaining', { count: hidden })}
+          </button>`
+        : nothing}
+  </div>`;
+}
+// Only the parts that actually constrain. A minimum of one and a step of one say nothing, and
+// a line reading "Quantity 1-100000000, in steps of 1" is noise around a single useful number.
+// A missing maximum is already unbounded: normalizePricing drops a YAML `.inf` as non-finite.
+function renderQuantityConstraints(viewModel, constraints) {
+    if (!constraints)
+        return nothing;
+    const { minQuantity, maxQuantity, quantityStep } = constraints;
+    const plain = minQuantity <= 1 && quantityStep <= 1;
+    if (plain && maxQuantity === undefined)
         return nothing;
+    const num = (value) => new Intl.NumberFormat(viewModel.locale).format(value);
+    const parts = [];
+    if (plain) {
+        parts.push(t(viewModel, 'pricing.quantityUpTo', { max: num(maxQuantity) }));
+    }
+    else {
+        parts.push(t(viewModel, 'pricing.quantityConstraints', {
+            min: num(minQuantity),
+            max: maxQuantity === undefined ? t(viewModel, 'pricing.unbounded') : num(maxQuantity),
+        }));
+    }
+    if (quantityStep > 1) {
+        parts.push(t(viewModel, 'pricing.quantityInSteps', { step: num(quantityStep) }));
+    }
+    return html `<p>${parts.join(', ')}</p>`;
+}
+export function renderAddOns(state) {
+    const { viewModel } = state;
+    if (viewModel.addOns.length === 0 || state.hiddenSections?.has('addOns'))
+        return nothing;
+    const dense = viewModel.addOns.length > ADDON_DENSE_THRESHOLD;
+    const filtered = viewModel.addOns.length > addOnFilterThresholdOf(state.addOnFilterThreshold);
+    const titleId = instanceId(state, 'addons-title');
     return html `
-    <section class="pr-section" aria-labelledby="pr-addons-title" data-pr-part="add-ons">
+    <section class="pr-section" aria-labelledby=${titleId} data-pr-part="add-ons">
       <div class="pr-section__heading">
         <div>
           <p class="pr-section__eyebrow">${t(viewModel, 'pricing.addOns')}</p>
-          <h3 id="pr-addons-title">${t(viewModel, 'pricing.addOns')}</h3>
+          <h3 id=${titleId}>${t(viewModel, 'pricing.addOnsTitle')}</h3>
         </div>
       </div>
-      <div class="pr-addon-layout">
-        <div class="pr-addon-grid">
-          ${viewModel.addOns.map((addOn) => {
-        const selected = selection.addOns[addOn.id]?.selected ?? false;
-        const quantity = selection.addOns[addOn.id]?.quantity ??
-            addOn.subscriptionConstraints?.minQuantity ??
-            1;
-        const available = addOnAvailability(addOn, selection.planId);
-        const constraints = addOn.subscriptionConstraints;
-        return html `
-              <article
-                class="pr-addon-card ${selectionEnabled && available ? 'pr-selectable-card' : ''} ${selected ? 'is-selected' : ''} ${available ? '' : 'is-unavailable'}"
-                data-pr-part="add-on-card"
-                data-add-on-id=${addOn.id}
-                data-selected=${String(selected)}
-                @click=${(event) => selectionEnabled && available
-            ? selectFromCard(event, () => actions.toggleAddOn(addOn.id, !selected))
-            : undefined}
-              >
-                <div class="pr-addon-card__heading">
-                  <div>
-                    <h4>${addOn.name}</h4>
-                    ${addOn.description ? html `<p>${addOn.description}</p>` : nothing}
-                  </div>
-                  ${selectionEnabled
-            ? html `<label
-                          class="pr-selection-control pr-addon-card__check"
-                          data-pr-part="selection-control"
-                        >
-                          <input
-                            type="checkbox"
-                            .checked=${selected}
-                            ?disabled=${!available}
-                            aria-label=${t(viewModel, selected ? 'pricing.removeAddOn' : 'pricing.addAddOn', { addOn: addOn.name })}
-                            aria-describedby="pr-addon-help-${addOn.id}"
-                            @change=${(event) => actions.toggleAddOn(addOn.id, event.currentTarget.checked)}
-                          />
-                          <span class="pr-selection-control__icon" aria-hidden="true"></span>
-                          <span class="pr-selection-control__label" aria-hidden="true"
-                            >${selected ? t(viewModel, 'pricing.added') : t(viewModel, 'pricing.add')}</span
-                          >
-                        </label>`
-            : nothing}
-                </div>
-                <div class="pr-price pr-price--addon">
-                  ${renderPrice(viewModel, viewModel.resolved.addOnPrices[addOn.id], addOn.unit)}
-                </div>
-                <div id="pr-addon-help-${addOn.id}" class="pr-addon-card__details">
-                  ${!available
-            ? html `<p class="pr-status">${t(viewModel, 'pricing.notAvailable')}</p>`
-            : nothing}
-                  ${addOn.availableFor.length
-            ? html `<p>
-                          ${t(viewModel, 'pricing.availableFor', {
-                plans: addOn.availableFor
-                    .map((id) => viewModel.pricing.plans.find((plan) => plan.id === id)?.name ??
-                    id)
-                    .join(', '),
-            })}
-                        </p>`
-            : nothing}
-                  ${addOn.dependsOn.length
-            ? html `<p>
-                          ${t(viewModel, 'pricing.dependsOn', {
-                items: addOn.dependsOn.join(', '),
-            })}
-                        </p>`
-            : nothing}
-                  ${addOn.excludes.length
-            ? html `<p>
-                          ${t(viewModel, 'pricing.excludes', {
-                items: addOn.excludes.join(', '),
-            })}
-                        </p>`
-            : nothing}
-                  ${constraints
-            ? html `<p>
-                          ${t(viewModel, 'pricing.quantityConstraints', {
-                min: constraints.minQuantity,
-                max: constraints.maxQuantity ?? t(viewModel, 'pricing.unbounded'),
-                step: constraints.quantityStep,
-            })}
-                        </p>`
-            : nothing}
-                </div>
-                ${renderAddOnEffects(viewModel, addOn)}
-                ${selectionEnabled && selected && constraints
-            ? html `<div class="pr-stepper" data-pr-part="add-on-quantity">
-                        <span>${t(viewModel, 'pricing.addOnQuantity', { addOn: addOn.name })}</span>
-                        <div>
-                          <button
-                            type="button"
-                            aria-label=${t(viewModel, 'pricing.decrease', { item: addOn.name })}
-                            @click=${() => actions.updateAddOnQuantity(addOn.id, quantity - constraints.quantityStep)}
-                          >
-                            −
-                          </button>
-                          <input
-                            type="number"
-                            aria-label=${t(viewModel, 'pricing.addOnQuantity', {
-                addOn: addOn.name,
-            })}
-                            .value=${String(quantity)}
-                            min=${constraints.minQuantity}
-                            max=${constraints.maxQuantity ?? nothing}
-                            step=${constraints.quantityStep}
-                            @change=${(event) => actions.updateAddOnQuantity(addOn.id, Number(event.currentTarget.value))}
-                          />
-                          <button
-                            type="button"
-                            aria-label=${t(viewModel, 'pricing.increase', { item: addOn.name })}
-                            @click=${() => actions.updateAddOnQuantity(addOn.id, quantity + constraints.quantityStep)}
-                          >
-                            +
-                          </button>
-                        </div>
-                      </div>`
-            : nothing}
-              </article>
-            `;
-    })}
-        </div>
-        ${renderSummary(state)}
+      <div
+        class="pr-addon-layout"
+        data-pr-summary=${state.summaryOutsideAddOns ? 'outside' : nothing}
+      >
+        ${filtered
+        ? renderFilteredAddOns(state, dense)
+        : renderAddOnGrid(state, viewModel.addOns, dense)}
+        ${state.summaryOutsideAddOns || state.hiddenSections?.has('summary')
+        ? nothing
+        : renderSummary(state)}
       </div>
     </section>
   `;
 }
+// The formula of a priced line, or the label or the quote note of a line that needs a quote.
+function breakdownDetail(viewModel, line) {
+    const { currency } = viewModel.resolved.breakdown;
+    if (line.requiresQuote || line.unitAmount === undefined || line.amount === undefined) {
+        return line.label ?? t(viewModel, 'pricing.requiresQuote');
+    }
+    const numbers = new Intl.NumberFormat(viewModel.locale);
+    return t(viewModel, 'pricing.breakdownFormula', {
+        unitPrice: formatCurrency(line.unitAmount, currency, viewModel.locale),
+        quantity: numbers.format(line.quantity),
+        multiplier: numbers.format(line.billingMultiplier),
+        amount: formatCurrency(line.amount, currency, viewModel.locale),
+    });
+}
+function renderBreakdownLine(viewModel, line) {
+    return html `<li
+    class="pr-breakdown__line"
+    data-pr-part="breakdown-line"
+    data-line-kind=${line.kind}
+    data-line-id=${line.id}
+  >
+    <div class="pr-breakdown__name">${line.name}</div>
+    <div class="pr-breakdown__detail">${breakdownDetail(viewModel, line)}</div>
+  </li>`;
+}
+// The panel is rendered from the element's open state whatever the selection, as a labelled group
+// of a list and a definition list. The closed panel is a template without bindings in its content, so it has no child nodes.
+function renderBreakdownPanel(state) {
+    const { viewModel, breakdownOpen, breakdownId } = state;
+    if (!breakdownOpen) {
+        return html `<div id=${breakdownId} data-pr-part="breakdown" hidden></div>`;
+    }
+    const { breakdown } = viewModel.resolved;
+    const lines = [...(breakdown.plan ? [breakdown.plan] : []), ...breakdown.addOns];
+    const period = viewModel.pricing.billing.length > 1 ? breakdown.billingPeriod : undefined;
+    const periodLabel = period
+        ? (viewModel.presentation.billingLabels?.[period.id] ?? period.label)
+        : undefined;
+    return html `
+    <div
+      class="pr-breakdown"
+      id=${breakdownId}
+      data-pr-part="breakdown"
+      role="group"
+      aria-labelledby="${breakdownId}-title"
+    >
+      <p class="pr-breakdown__title" id="${breakdownId}-title">
+        ${t(viewModel, 'pricing.breakdownTitle')}
+      </p>
+      <ul class="pr-breakdown__lines">
+        ${lines.map((line) => renderBreakdownLine(viewModel, line))}
+      </ul>
+      <dl class="pr-breakdown__totals">
+        ${periodLabel !== undefined
+        ? html `<div>
+                <dt>${t(viewModel, 'pricing.billing')}</dt>
+                <dd>${periodLabel}</dd>
+              </div>`
+        : nothing}
+        <div>
+          <dt>${t(viewModel, 'pricing.currency')}</dt>
+          <dd>${breakdown.currency}</dd>
+        </div>
+        <div class="pr-breakdown__total">
+          <dt>
+            ${breakdown.requiresQuote ? t(viewModel, 'pricing.subtotal') : t(viewModel, 'pricing.total')}
+          </dt>
+          <dd>${formatCurrency(breakdown.subtotal, breakdown.currency, viewModel.locale)}</dd>
+        </div>
+      </dl>
+      ${breakdown.requiresQuote
+        ? html `<p class="pr-breakdown__quote">${t(viewModel, 'pricing.requiresQuote')}</p>`
+        : nothing}
+    </div>
+  `;
+}
+// Rendered outside the live region, so a change of label is not announced by the summary.
+function renderSummaryAction(state) {
+    const { viewModel, summaryAction, pendingActionId, selection, actions } = state;
+    // The slot node stands in for the summary action with or without a current plan; data-pending
+    // follows aria-disabled of the built-in action (any pending action), not its own-id state.
+    if (state.ctaEnabled && state.slots?.has('summary-actions')) {
+        return html `<div
+      data-pr-slot="summary-actions"
+      data-pr-part="summary-actions-slot"
+      data-relation=${summaryAction?.relation ?? nothing}
+      data-pending=${pendingActionId !== undefined ? 'true' : nothing}
+    ></div>`;
+    }
+    if (!state.ctaEnabled || !summaryAction)
+        return nothing;
+    const pending = isPendingActionId(pendingActionId, summaryAction.actionId);
+    const origin = { relation: summaryAction.relation, source: 'summary' };
+    const trigger = () => actions.triggerAction(summaryAction.actionId, selection.planId, undefined, undefined, origin);
+    return html `<button
+    class="pr-button pr-button--primary"
+    data-pr-part="summary-action"
+    data-relation=${summaryAction.relation}
+    data-pending=${pending ? 'true' : nothing}
+    aria-busy=${pending ? 'true' : nothing}
+    aria-disabled=${pendingActionId !== undefined ? 'true' : nothing}
+    type="button"
+    ?disabled=${summaryAction.disabled}
+    @click=${trigger}
+  >
+    ${renderCtaLabel(viewModel, summaryAction.label, pending)}
+  </button>`;
+}
 export function renderSummary(state) {
-    const { viewModel } = state;
+    const { viewModel, breakdownOpen, breakdownId, actions } = state;
     const subtotal = formatCurrency(viewModel.resolved.subtotal, viewModel.pricing.metadata.currency, viewModel.locale);
     return html `
-    <aside class="pr-summary" data-pr-part="summary" aria-live="polite">
-      <p>
-        ${viewModel.resolved.requiresQuote ? t(viewModel, 'pricing.subtotal') : t(viewModel, 'pricing.total')}
-      </p>
-      <strong>${subtotal}</strong>
-      ${viewModel.resolved.requiresQuote
+    <aside class="pr-summary" data-pr-part="summary">
+      <div class="pr-summary__live" aria-live="polite">
+        <p>
+          ${viewModel.resolved.requiresQuote ? t(viewModel, 'pricing.subtotal') : t(viewModel, 'pricing.total')}
+        </p>
+        <strong>${subtotal}</strong>
+        ${viewModel.resolved.requiresQuote
         ? html `<span>${t(viewModel, 'pricing.requiresQuote')}</span>`
         : nothing}
+      </div>
+      ${renderSummaryAction(state)}
+      <button
+        class="pr-breakdown-toggle"
+        data-pr-part="breakdown-toggle"
+        type="button"
+        aria-label=${t(viewModel, 'pricing.breakdownToggle')}
+        aria-expanded=${String(breakdownOpen)}
+        aria-controls=${breakdownId}
+        @click=${actions.toggleBreakdown}
+      ></button>
+      ${renderBreakdownPanel(state)}
     </aside>
   `;
 }
@@ -782,9 +1282,10 @@ export function renderCatalogMetadata(state) {
     if (viewModel.mode !== 'catalog')
         return nothing;
     const metadata = viewModel.pricing.metadata;
+    const titleId = instanceId(state, 'metadata-title');
     return html `
-    <section class="pr-metadata" aria-labelledby="pr-metadata-title" data-pr-part="metadata">
-      <h3 id="pr-metadata-title">${t(viewModel, 'pricing.details')}</h3>
+    <section class="pr-metadata" aria-labelledby=${titleId} data-pr-part="metadata">
+      <h3 id=${titleId}>${t(viewModel, 'pricing.details')}</h3>
       <dl>
         <div>
           <dt>${t(viewModel, 'pricing.version')}</dt>
@@ -814,32 +1315,63 @@ export function renderCatalogMetadata(state) {
     </section>
   `;
 }
+// the shell keeps its labelled heading; the slot node replaces the skeleton
+export function renderLoadingSlotShell(titleId, label) {
+    return html `
+    <section class="pr-shell pr-shell--loading" aria-labelledby=${titleId}>
+      <h2 id=${titleId} class="pr-sr-only">${label}</h2>
+      <div data-pr-slot="loading" data-pr-part="loading-slot"></div>
+    </section>
+  `;
+}
+// The slot node is the only child; the diagnostics travel as JSON in data-diagnostics.
+export function renderErrorSlotShell(diagnostics) {
+    const entries = diagnostics.map((item) => ({
+        code: item.code,
+        severity: item.severity,
+        message: item.message,
+        ...(item.path !== undefined ? { path: item.path } : {}),
+    }));
+    return html `<section class="pr-shell pr-error" role="alert">
+    <div
+      data-pr-slot="error"
+      data-pr-part="error-slot"
+      data-diagnostics=${JSON.stringify(entries)}
+    ></div>
+  </section>`;
+}
 export function renderPendingDialog(state) {
     const pending = state.pendingAddOnChange;
     if (!pending)
         return nothing;
     const { viewModel, actions } = state;
+    const titleId = instanceId(state, 'dialog-title');
+    const descriptionId = instanceId(state, 'dialog-description');
     return html `
     <div class="pr-dialog-backdrop">
       <div
         class="pr-dialog"
         role="dialog"
         aria-modal="true"
-        aria-labelledby="pr-dialog-title"
-        aria-describedby="pr-dialog-description"
+        aria-labelledby=${titleId}
+        aria-describedby=${descriptionId}
         @keydown=${(event) => {
         if (event.key === 'Escape')
             actions.cancelAddOnChange();
     }}
       >
-        <h3 id="pr-dialog-title">${t(viewModel, 'pricing.confirmChanges')}</h3>
-        <p id="pr-dialog-description">${t(viewModel, 'pricing.confirmChangesDescription')}</p>
+        <h3 id=${titleId}>${t(viewModel, 'pricing.confirmChanges')}</h3>
+        <p id=${descriptionId}>${t(viewModel, 'pricing.confirmChangesDescription')}</p>
         ${pending.addIds.length
-        ? html `<p>${t(viewModel, 'pricing.willAdd', { items: pending.addIds.join(', ') })}</p>`
+        ? html `<p>
+                ${t(viewModel, 'pricing.willAdd', { items: addOnNames(viewModel, pending.addIds) })}
+              </p>`
         : nothing}
         ${pending.removeIds.length
         ? html `<p>
-                ${t(viewModel, 'pricing.willRemove', { items: pending.removeIds.join(', ') })}
+                ${t(viewModel, 'pricing.willRemove', {
+            items: addOnNames(viewModel, pending.removeIds),
+        })}
               </p>`
         : nothing}
         <div class="pr-dialog__actions">