pricing-renderer 0.1.0 → 0.2.0

package/dist/element/pricing-renderer-element.js

@@ -1,27 +1,127 @@
+var _a;
 import { LitElement, html, nothing } from 'lit';
-import { cloneValue, createPricingViewModel, getPricingRendererConfig, mergePresentationOptions, mergeSelection, normalizeAddOnQuantity, normalizePricing, setAtPath, translate, } from '../core/index.js';
-import { loadPricingFromUrl, parsePricingYaml, } from '../yaml/index.js';
-import { renderAddOns, renderBilling, renderCatalogMetadata, renderComparison, renderHeader, renderPendingDialog, renderPlans, renderSummary, renderVariables, } from './renderers.js';
+import { applySelectionChange, cloneValue, compareSelections, createPriceStabilizer, createPricingViewModel, deepEqual, getMessages, getPricingRendererConfig, mergePresentationOptions, mergeSelection, planSelectionChange, reconcileSelection, selectionInEffect, selectionWithAddOnQuantity, selectionWithVariable, translate, } from '../core/index.js';
+import { applySelectionInput } from '../core/apply-selection.js';
+import { planCtaView, summaryActionState } from './cta.js';
+import { currentSelectionDiagnostics, deriveCurrentContext } from './current-selection.js';
+import { inputChanged } from './same-input.js';
+import { loadPricingSource, } from '../yaml/index.js';
+import { pricingSourceError } from '../yaml/source.js';
+import { comparisonRowTotal, DEFAULT_ADDON_FILTER_THRESHOLD, DEFAULT_TOOLBAR_THRESHOLD, renderAddOns, renderBilling, renderCatalogMetadata, renderComparison, renderErrorSlotShell, renderHeader, renderLoadingSlotShell, renderPendingDialog, renderPlans, renderSummary, renderVariables, resolveOnlyDifferences, toolbarThresholdOf, addOnFilterThresholdOf, instanceId, heroTitle, PRICING_SECTION_NAMES, PRICING_SLOT_NAMES, } from './renderers.js';
+import { hiddenNamesOf, sectionsConverter } from './hide-sections.js';
+// Everything after the plans lives in one flex column, so a sticky summary has the whole column as
+// its containing block (a grid item would only have its own row).
+//
+// The summary never sits inside the add-on layout, which is where a pricing with add-ons used to
+// put it. A sticky element is only pinned while its own containing block is on screen, and that
+// layout is one section near the end of the page: the bottom bar it is meant to be existed only
+// after the reader had already scrolled past the comparison and the add-on grid -- furthest away
+// exactly when add-ons are what move the total.
+//
+// At 840px or more, outside the compact layout and with a plan selected, it is the first child of
+// the column and sticks to its top. Otherwise it closes the content, outside the column, where its
+// containing block is everything after the plans and the bottom bar is pinned for that whole scroll.
+export function renderAfterPlans(state, wide = true) {
+    const { selection, compact } = state;
+    const hidden = state.hiddenSections;
+    const summaryHidden = Boolean(hidden?.has('summary'));
+    const docked = !compact && wide && !summaryHidden && selection.planId !== undefined;
+    const summary = summaryHidden ? nothing : renderSummary(state);
+    // The add-on layout never holds the summary now, whatever the width.
+    const inner = { ...state, summaryOutsideAddOns: true };
+    const parts = [
+        docked ? summary : nothing,
+        hidden?.has('comparison') ? nothing : renderComparison(inner),
+        renderAddOns(inner),
+    ];
+    return html `<div class="pr-flow">${parts}</div>
+    ${docked ? nothing : summary}`;
+}
+const breakdownToggleSelector = '[data-pr-part="breakdown-toggle"]';
+const comparisonRowSelector = '[data-pr-part="comparison-row"]';
+const addOnCardSelector = '[data-pr-part="add-on-card"]';
+const breakdownPanelSelector = '[data-pr-part="breakdown"]';
+let breakdownPanelCount = 0;
+// the sentence is chosen by the first error diagnostic.
+// The code prefix is cut off so that no partial code is spelled out: the docs test treats every
+// full code token of the source as a code to document.
+function errorMessageKey(diagnostics) {
+    const first = diagnostics.find((item) => item.severity === 'error');
+    const name = (first?.code ?? '').replace(/^PR_/, '');
+    if (name.startsWith('SOURCE_') || name === 'FETCH_UNAVAILABLE')
+        return 'pricing.errorSource';
+    if (name.startsWith('YAML_') || name === 'INPUT_INVALID')
+        return 'pricing.errorFormat';
+    if (name.startsWith('VERSION_'))
+        return 'pricing.errorVersion';
+    return 'pricing.errorGeneric';
+}
+// absent is automatic, `false` is off, anything else is on
+export const onlyDifferencesConverter = {
+    fromAttribute(value) {
+        if (value === null)
+            return undefined;
+        return value !== 'false';
+    },
+};
+// Whitespace separated; only tokens that exactly match a section name are kept, in order.
+export const hideSectionsConverter = sectionsConverter(PRICING_SECTION_NAMES);
+// A value that is not an array hides nothing, and neither does an item that is not a section name.
+function hiddenSectionsOf(value) {
+    return hiddenNamesOf(PRICING_SECTION_NAMES, value);
+}
+// A value that is not an array requests nothing, and neither does an item that is not a slot name.
+function requestedSlotsOf(value) {
+    const names = new Set();
+    if (!Array.isArray(value))
+        return names;
+    for (const item of value) {
+        if (PRICING_SLOT_NAMES.includes(item)) {
+            names.add(item);
+        }
+    }
+    return names;
+}
+const slotNodeSelector = '[data-pr-slot]';
+const slotOwnerSelector = '[data-pr-root], [data-pr-slot]';
 export class PricingRendererElement extends LitElement {
     constructor() {
         super();
+        this._lastSlotsDispatch = { nodes: [], data: [] };
         this._status = 'idle';
         this._diagnostics = [];
         this._compact = true;
+        this._wide = false;
         this._search = '';
-        this._onlyDifferences = false;
         this._expandedGroups = new Set();
         this._revealedGroups = new Set();
-        this._lastValidPlanPrices = {};
-        this._lastValidAddOnPrices = {};
+        this._addOnSearch = '';
+        this._addOnsRevealed = false;
+        // every view model the element builds goes
+        // through the stabilizer, which keeps the last valid prices and folds the subtotal from the
+        // breakdown, so a removed add-on has no line and no share of the subtotal
+        this._priceStabilizer = createPriceStabilizer();
         this._loadSequence = 0;
         this._loadedOnce = false;
         this._reloadOnPropertyChange = false;
+        this._breakdownOpen = false;
+        // the element renders in light DOM, so ids are global
+        this._instanceNumber = ++breakdownPanelCount;
+        this._breakdownId = `pr-breakdown-${this._instanceNumber}`;
+        // the prefix of every other id of this instance
+        this._idPrefix = `pr-${this._instanceNumber}`;
         this._selectPlan = (planId) => {
+            if (!this._normalized)
+                return;
             const selection = this._effectiveSelection();
             if (!selection)
                 return;
-            this._setSelection({ ...selection, planId });
+            const change = planSelectionChange(this._normalized, selection, { type: 'plan', planId });
+            if (change.kind === 'apply') {
+                this._setSelection(change.selection);
+                return;
+            }
+            this._openChangeDialog(change.pending);
         };
         this._selectBilling = (billingPeriod) => {
             const selection = this._effectiveSelection();
@@ -33,9 +133,7 @@ export class PricingRendererElement extends LitElement {
             const selection = this._effectiveSelection();
             if (!selection)
                 return;
-            const variables = cloneValue(selection.variables);
-            setAtPath(variables, path, value);
-            this._setSelection({ ...selection, variables });
+            this._setSelection(selectionWithVariable(selection, path, value));
         };
         this._resetVariables = () => {
             const selection = this._effectiveSelection();
@@ -43,48 +141,29 @@ export class PricingRendererElement extends LitElement {
                 return;
             this._setSelection({ ...selection, variables: cloneValue(this._normalized.variables) });
         };
+        // the dependencies to add are the transitive closure of
+        // dependsOn, so a two-level chain is added whole
         this._toggleAddOn = (addOnId, selected) => {
             if (!this._normalized)
                 return;
             const selection = this._effectiveSelection();
             if (!selection)
                 return;
-            const addOn = this._normalized.addOns.find((candidate) => candidate.id === addOnId);
-            if (!addOn)
+            // an unknown add-on changes nothing and dispatches no event
+            if (!this._normalized.addOns.some((candidate) => candidate.id === addOnId))
+                return;
+            const change = planSelectionChange(this._normalized, selection, {
+                type: 'addOn',
+                addOnId,
+                selected,
+            });
+            if (change.kind === 'confirm') {
+                this._openChangeDialog(change.pending);
                 return;
-            let addIds = [];
-            let removeIds = [];
-            if (selected) {
-                addIds = [...this._collectDependencies(addOnId)].filter((id) => !selection.addOns[id]?.selected);
-                const conflicts = new Set(addOn.excludes);
-                for (const candidate of this._normalized.addOns) {
-                    if (candidate.excludes.includes(addOnId))
-                        conflicts.add(candidate.id);
-                }
-                for (const dependency of addIds) {
-                    const item = this._normalized.addOns.find((candidate) => candidate.id === dependency);
-                    item?.excludes.forEach((id) => conflicts.add(id));
-                }
-                removeIds = [...conflicts].filter((id) => selection.addOns[id]?.selected);
-            }
-            else {
-                removeIds = this._selectedDependents(addOnId);
-            }
-            const pending = { addOnId, select: selected, addIds, removeIds };
-            if (addIds.length || removeIds.length) {
-                this._pendingAddOnChange = pending;
-                this._previousFocus =
-                    this.ownerDocument.activeElement instanceof HTMLElement
-                        ? this.ownerDocument.activeElement
-                        : undefined;
-                this.requestUpdate();
-                void this.updateComplete.then(() => {
-                    this.querySelector('.pr-dialog button[autofocus]')?.focus();
-                });
-            }
-            else {
-                this._applyAddOnChange(pending);
             }
+            this._pendingAddOnChange = undefined;
+            this._setSelection(change.selection);
+            void this.updateComplete.then(() => this._restoreDialogFocus());
         };
         this._updateAddOnQuantity = (addOnId, quantity) => {
             if (!this._normalized)
@@ -92,19 +171,7 @@ export class PricingRendererElement extends LitElement {
             const selection = this._effectiveSelection();
             if (!selection)
                 return;
-            const current = selection.addOns[addOnId] ?? { selected: true, quantity };
-            const normalized = normalizeAddOnQuantity(this._normalized, addOnId, {
-                ...current,
-                selected: true,
-                quantity,
-            });
-            this._setSelection({
-                ...selection,
-                addOns: {
-                    ...selection.addOns,
-                    [addOnId]: { selected: true, quantity: normalized },
-                },
-            });
+            this._setSelection(selectionWithAddOnQuantity(this._normalized, selection, addOnId, quantity));
         };
         this._confirmAddOnChange = () => {
             if (this._pendingAddOnChange) {
@@ -116,17 +183,23 @@ export class PricingRendererElement extends LitElement {
             this.requestUpdate();
             void this.updateComplete.then(() => this._restoreDialogFocus());
         };
-        this._triggerAction = (actionId, planId, href, metadata) => {
-            const viewModel = this._viewModel();
-            if (!viewModel)
+        this._triggerAction = (actionId, planId, href, metadata, origin) => {
+            // a link CTA sees `false` and cancels its navigation
+            if (this.pendingActionId)
                 return false;
+            const current = this._viewModel();
+            if (!current || !this._normalized)
+                return false;
+            const reconciled = reconcileSelection(this._normalized, current.resolved.selection).selection;
+            const viewModel = this._priceStabilizer.stabilize(createPricingViewModel(this._normalized, reconciled, { ...this._viewModelOptions() }));
             const detail = {
                 actionId,
                 ...(planId ? { planId } : {}),
                 ...(href ? { href } : {}),
-                selection: viewModel.resolved.selection,
+                selection: reconciled,
                 resolved: viewModel.resolved,
                 ...(metadata ? { metadata } : {}),
+                ...(origin ? { relation: origin.relation, source: origin.source } : {}),
             };
             const event = new CustomEvent('pricing-action', {
                 detail,
@@ -152,13 +225,30 @@ export class PricingRendererElement extends LitElement {
                 : new Set();
             this.requestUpdate();
         };
-        this._revealGroup = (groupId) => {
+        // focus moves to the first row the reveal adds
+        this._revealGroup = (groupId, origin, byKeyboard = false) => {
+            const container = origin?.closest('tbody, .pr-comparison-group') ?? undefined;
+            const before = container?.querySelectorAll(comparisonRowSelector).length ?? 0;
             this._revealedGroups = new Set([...this._revealedGroups, groupId]);
             this.requestUpdate();
+            if (!container)
+                return;
+            void this.updateComplete.then(() => {
+                const rows = container.querySelectorAll(comparisonRowSelector);
+                if (rows.length > before)
+                    this._focusRevealed(rows[before], byKeyboard);
+            });
+        };
+        // no selection change resets the open state
+        this._toggleBreakdown = () => {
+            this._breakdownOpen = !this._breakdownOpen;
+            this.requestUpdate();
         };
         this._handleDialogKeyboard = (event) => {
-            if (!this._pendingAddOnChange)
+            if (!this._pendingAddOnChange) {
+                this._closeBreakdownOnEscape(event);
                 return;
+            }
             if (event.key === 'Escape') {
                 event.preventDefault();
                 this._cancelAddOnChange();
@@ -195,14 +285,31 @@ export class PricingRendererElement extends LitElement {
                 this.requestUpdate();
             },
             updateOnlyDifferences: (value) => {
-                this._onlyDifferences = value;
+                this._onlyDifferencesOverride = value;
                 this.requestUpdate();
             },
             toggleGroup: this._toggleGroup,
             setAllGroups: this._setAllGroups,
             revealGroup: this._revealGroup,
+            updateAddOnSearch: (value) => {
+                this._addOnSearch = value;
+                this.requestUpdate();
+            },
+            // focus moves to the first add-on card the reveal adds
+            revealAddOns: (byKeyboard = false) => {
+                const shown = () => [...this.querySelectorAll(addOnCardSelector)];
+                const before = new Set(shown().map((card) => card.dataset.addOnId));
+                this._addOnsRevealed = true;
+                this.requestUpdate();
+                void this.updateComplete.then(() => {
+                    const added = shown().find((card) => !before.has(card.dataset.addOnId));
+                    if (added)
+                        this._focusRevealed(added, byKeyboard);
+                });
+            },
             confirmAddOnChange: this._confirmAddOnChange,
             cancelAddOnChange: this._cancelAddOnChange,
+            toggleBreakdown: this._toggleBreakdown,
         };
         const configuration = getPricingRendererConfig();
         this.locale = configuration.locale;
@@ -215,6 +322,41 @@ export class PricingRendererElement extends LitElement {
         this.layout = 'auto';
         this.visibility = 'public-only';
         this.theme = 'light';
+        this.diagnostics = 'auto';
+        this.toolbarThreshold = DEFAULT_TOOLBAR_THRESHOLD;
+        this.addOnFilterThreshold = DEFAULT_ADDON_FILTER_THRESHOLD;
+    }
+    get density() {
+        return this._density === 'compact' ? 'compact' : 'comfortable';
+    }
+    set density(value) {
+        // The old value is the one read back: Lit takes the first old value as the default that a
+        // removed attribute restores, and it must be comfortable.
+        const previous = this.density;
+        const wasSet = this._density !== undefined && this._density !== null;
+        this._density = value;
+        // Unsetting, for example a React prop that becomes undefined, removes the attribute instead of
+        // reflecting density="comfortable". A value set and unset before the same update is still
+        // reflected, as comfortable.
+        if (value === undefined || value === null) {
+            if (wasSet)
+                this.removeAttribute('density');
+            return;
+        }
+        this.requestUpdate('density', previous);
+    }
+    // The element keeps a deep copy, so a later change of the host's object is not seen until the
+    // host sets the property again, and the getter returns a copy, so a change of what it returns is
+    // not seen either. An equal value keeps the stored copy: a host that assigns its props on every
+    // render does not report the diagnostics again. It never becomes the selection in effect, so
+    // setting it emits no `pricing-selection-change`.
+    get currentSelection() {
+        return cloneValue(this._currentSelection);
+    }
+    set currentSelection(value) {
+        if (deepEqual(value, this._currentSelection))
+            return;
+        this._currentSelection = cloneValue(value);
     }
     createRenderRoot() {
         return this;
@@ -223,6 +365,8 @@ export class PricingRendererElement extends LitElement {
         super.connectedCallback();
         this.setAttribute('data-pr-root', '');
         this.addEventListener('keydown', this._handleDialogKeyboard);
+        if (this.hasUpdated)
+            this._resumeAfterReconnect();
     }
     disconnectedCallback() {
         this._resizeObserver?.disconnect();
@@ -230,7 +374,18 @@ export class PricingRendererElement extends LitElement {
         this.removeEventListener('keydown', this._handleDialogKeyboard);
         super.disconnectedCallback();
     }
-    firstUpdated() {
+    // The disconnect stopped the observer and aborted the load in flight; an aborted load is dropped
+    // without a result, so a status still `loading` would never end. A ready or failed element keeps
+    // what it shows.
+    _resumeAfterReconnect() {
+        this._observeSize();
+        if (this._status === 'loading')
+            void this.reload();
+    }
+    // Observes the size of the element with a new observer and measures its width once.
+    _observeSize() {
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = undefined;
         if (typeof ResizeObserver === 'function') {
             this._resizeObserver = new ResizeObserver((entries) => {
                 const width = entries[0]?.contentRect.width ?? this.getBoundingClientRect().width;
@@ -239,11 +394,18 @@ export class PricingRendererElement extends LitElement {
             this._resizeObserver.observe(this);
         }
         this._updateCompactLayout(this.getBoundingClientRect().width);
+    }
+    firstUpdated() {
+        this._observeSize();
         void this.reload();
         queueMicrotask(() => {
             this._reloadOnPropertyChange = true;
         });
     }
+    willUpdate(changed) {
+        if (changed.has('onlyDifferences'))
+            this._onlyDifferencesOverride = undefined;
+    }
     updated(changed) {
         const inputChanged = changed.has('pricing') ||
             changed.has('yaml') ||
@@ -257,28 +419,80 @@ export class PricingRendererElement extends LitElement {
         if (changed.has('layout')) {
             this._updateCompactLayout(this.getBoundingClientRect().width);
         }
+        this._reportCurrentSelection();
+        this._reportSlots();
+    }
+    // Once per change of the slot nodes this element rendered, of their data-* values or, while a
+    // summary slot node exists, of the selection and the resolved prices. A node that the host or a
+    // nested renderer put inside a slot node has another owner and is not listed.
+    _reportSlots() {
+        const nodes = [...this.querySelectorAll(slotNodeSelector)].filter((node) => node.isConnected && node.parentElement?.closest(slotOwnerSelector) === this);
+        const data = nodes.map((node) => JSON.stringify(Object.entries(node.dataset)));
+        const summary = nodes.some((node) => node.dataset.prSlot === 'summary-actions')
+            ? this._snapshot()
+            : undefined;
+        const last = this._lastSlotsDispatch;
+        if (nodes.length === last.nodes.length &&
+            nodes.every((node, index) => node === last.nodes[index] && data[index] === last.data[index]) &&
+            deepEqual(summary, last.summary)) {
+            return;
+        }
+        this._lastSlotsDispatch = { nodes, data, ...(summary ? { summary } : {}) };
+        this.dispatchEvent(new CustomEvent('pricing-slots-change', {
+            detail: { nodes: [...nodes] },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // The same pricing-action as a click on the plan's built-in CTA, for a host that draws its own.
+    triggerPlanAction(planId) {
+        if (!this.ctaEnabled || this.pendingActionId || !this._isReady())
+            return false;
+        if (hiddenSectionsOf(this.hideSections).has('plans'))
+            return false;
+        const viewModel = this._viewModel();
+        const plan = viewModel?.plans.find((candidate) => candidate.id === planId);
+        if (!viewModel || !plan)
+            return false;
+        const current = deriveCurrentContext(this._normalized, this._currentSelection);
+        const cta = planCtaView(viewModel, plan, {
+            currentPlanId: current?.planId,
+            pendingActionId: this.pendingActionId,
+        });
+        if (cta.disabled)
+            return false;
+        const origin = cta.relation
+            ? { relation: cta.relation, source: 'plan' }
+            : undefined;
+        return this._triggerAction(cta.actionId, plan.id, cta.eventHref, cta.metadata, origin);
+    }
+    // Once per change of the current selection or of the loaded pricing; not in the rendered list.
+    _reportCurrentSelection() {
+        if (!this._isReady())
+            return;
+        if (this._diagnosedSelection === this._currentSelection &&
+            this._diagnosedPricing === this._normalized) {
+            return;
+        }
+        this._diagnosedSelection = this._currentSelection;
+        this._diagnosedPricing = this._normalized;
+        this._dispatchSelectionDiagnostics(currentSelectionDiagnostics(this._normalized, this._currentSelection));
     }
     async reload() {
         this._loadedOnce = true;
-        const sources = [
-            this.pricing !== undefined ? 'pricing' : undefined,
-            this.yaml !== undefined ? 'yaml' : undefined,
-            this.src ? 'src' : undefined,
-        ].filter(Boolean);
-        if (sources.length !== 1) {
-            this._applyLoadResult({
-                ok: false,
-                diagnostics: [
-                    {
-                        code: sources.length === 0 ? 'PR_SOURCE_MISSING' : 'PR_SOURCE_CONFLICT',
-                        severity: 'error',
-                        message: sources.length === 0
-                            ? 'Provide exactly one pricing source: pricing, yaml or src.'
-                            : 'Only one pricing source can be provided at a time.',
-                        path: '$',
-                    },
-                ],
-            });
+        const input = {
+            ...(this.pricing !== undefined ? { pricing: this.pricing } : {}),
+            ...(this.yaml !== undefined ? { yaml: this.yaml } : {}),
+            ...(this.src !== undefined ? { src: this.src } : {}),
+        };
+        const sourceError = pricingSourceError(input);
+        if (sourceError) {
+            // the load in flight must neither finish nor be
+            // applied after this error
+            this._abortController?.abort();
+            this._abortController = undefined;
+            this._loadSequence += 1;
+            this._applyLoadResult(sourceError);
             return;
         }
         this._abortController?.abort();
@@ -287,43 +501,116 @@ export class PricingRendererElement extends LitElement {
         const sequence = ++this._loadSequence;
         this._status = 'loading';
         this.requestUpdate();
-        let result;
-        if (this.pricing !== undefined) {
-            result = normalizePricing(this.pricing, this.normalizeOptions);
+        let result = loadPricingSource(input, {
+            ...(this.request ? { request: this.request } : {}),
+            ...(this.loadPricing ? { loadPricing: this.loadPricing } : {}),
+            ...(this.normalizeOptions ? { normalizeOptions: this.normalizeOptions } : {}),
+            signal: controller.signal,
+        });
+        if (result instanceof Promise) {
+            result = await result;
         }
-        else if (this.yaml !== undefined) {
-            result = parsePricingYaml(this.yaml, {
-                ...(this.normalizeOptions ? { normalize: this.normalizeOptions } : {}),
+        if (sequence !== this._loadSequence || controller.signal.aborted) {
+            return;
+        }
+        this._applyLoadResult(result);
+    }
+    get resolvedState() {
+        return this._snapshot();
+    }
+    applySelection(selection) {
+        if (!this._isReady()) {
+            return this._refuseSelection(undefined, {
+                code: 'PR_SELECTION_NOT_READY',
+                severity: 'error',
+                message: 'The pricing is not ready; applySelection was ignored.',
             });
         }
-        else {
-            result = await loadPricingFromUrl(this.src, {
-                ...(this.request ?? {}),
-                ...(this.loadPricing ? { loadPricing: this.loadPricing } : {}),
-                ...(this.normalizeOptions ? { normalize: this.normalizeOptions } : {}),
-                signal: controller.signal,
+        if (this.selection !== undefined) {
+            return this._refuseSelection(this._snapshot(), {
+                code: 'PR_SELECTION_CONTROLLED',
+                severity: 'error',
+                message: 'The selection property is set; applySelection was ignored.',
             });
         }
-        if (sequence !== this._loadSequence || controller.signal.aborted) {
+        const { removedAddOnIds, diagnostics, ...next } = applySelectionInput(this._normalized, this._selectionInEffect(), cloneValue(selection));
+        this._internalSelection = next.selection;
+        if (this._pendingAddOnChange)
+            this._cancelAddOnChange();
+        this.requestUpdate();
+        const state = this._snapshot();
+        const result = {
+            applied: true,
+            selection: state.selection,
+            resolved: state.resolved,
+            removedAddOnIds,
+            diagnostics,
+        };
+        this._dispatchSelectionDiagnostics(diagnostics);
+        return result;
+    }
+    _isReady() {
+        return this._status === 'ready' && this._normalized !== undefined;
+    }
+    _selectionInEffect() {
+        const selection = this._effectiveSelection();
+        if (!selection || !this._normalized)
+            return selection;
+        return reconcileSelection(this._normalized, selection).selection;
+    }
+    _snapshot() {
+        if (!this._isReady())
+            return undefined;
+        const selection = this._selectionInEffect();
+        if (!selection)
+            return undefined;
+        const { resolved } = this._priceStabilizer.stabilize(createPricingViewModel(this._normalized, selection, { ...this._viewModelOptions() }));
+        return cloneValue({ selection, resolved });
+    }
+    _refuseSelection(state, diagnostic) {
+        const result = {
+            applied: false,
+            selection: state?.selection,
+            resolved: state?.resolved,
+            removedAddOnIds: [],
+            diagnostics: [diagnostic],
+        };
+        this._dispatchSelectionDiagnostics(result.diagnostics);
+        return result;
+    }
+    // the rendered list is left unchanged
+    _dispatchSelectionDiagnostics(diagnostics) {
+        if (diagnostics.length === 0)
             return;
-        }
-        this._applyLoadResult(result);
+        this.dispatchEvent(new CustomEvent('pricing-diagnostic', {
+            detail: { diagnostics: cloneValue(diagnostics) },
+            bubbles: true,
+            composed: true,
+        }));
     }
     _applyLoadResult(result) {
         this._diagnostics = result.diagnostics;
         if (result.value) {
             this._normalized = result.value;
-            this._lastValidPlanPrices = {};
-            this._lastValidAddOnPrices = {};
-            this._internalSelection = mergeSelection(result.value, this.defaultSelection);
+            this._priceStabilizer.reset();
+            this._internalSelection = reconcileSelection(result.value, mergeSelection(result.value, this.defaultSelection)).selection;
             this._expandedGroups = new Set();
+            // the add-on search and reveal state start over with a new pricing
+            this._addOnSearch = '';
+            this._addOnsRevealed = false;
+            this._onlyDifferencesOverride = undefined;
+            this._pendingAddOnChange = undefined;
+            this._previousFocus = undefined;
+            this._breakdownOpen = false;
             const viewModel = createPricingViewModel(result.value, this._effectiveSelection(), this._viewModelOptions());
             if (viewModel.comparisonGroups[0]) {
                 this._expandedGroups.add(viewModel.comparisonGroups[0].id);
             }
             this._status = 'ready';
+            // Ready state and internal selection are set before the dispatch and not assigned after it,
+            // so a listener's applySelection call stays in effect for this load.
             this.dispatchEvent(new CustomEvent('pricing-ready', {
-                detail: { pricing: result.value, diagnostics: result.diagnostics },
+                detail: { pricing: result.value, diagnostics: result.diagnostics, ...this._snapshot() },
                 bubbles: true,
                 composed: true,
             }));
@@ -340,14 +627,15 @@ export class PricingRendererElement extends LitElement {
         }
         this.requestUpdate();
     }
+    // the core treats only `false` as off, the element any
+    // falsy value
     _effectiveSelection() {
         const selection = this.selection ?? this._internalSelection;
-        if (!selection || this.variablesEnabled || !this._normalized)
+        if (!selection || !this._normalized)
             return selection;
-        return {
-            ...selection,
-            variables: cloneValue(this._normalized.variables),
-        };
+        return selectionInEffect(this._normalized, selection, {
+            variablesEnabled: Boolean(this.variablesEnabled),
+        });
     }
     _viewModelOptions() {
         return {
@@ -359,56 +647,39 @@ export class PricingRendererElement extends LitElement {
             ...(this.expressionOptions ? { expression: this.expressionOptions } : {}),
         };
     }
-    _stabilizeResolvedPrices(viewModel) {
-        for (const [id, price] of Object.entries(viewModel.resolved.planPrices)) {
-            if (price.kind === 'amount') {
-                this._lastValidPlanPrices[id] = price;
-            }
-            else if (price.kind === 'error' && this._lastValidPlanPrices[id]) {
-                viewModel.resolved.planPrices[id] = this._lastValidPlanPrices[id];
-            }
-        }
-        for (const [id, price] of Object.entries(viewModel.resolved.addOnPrices)) {
-            if (price.kind === 'amount') {
-                this._lastValidAddOnPrices[id] = price;
-            }
-            else if (price.kind === 'error' && this._lastValidAddOnPrices[id]) {
-                viewModel.resolved.addOnPrices[id] = this._lastValidAddOnPrices[id];
-            }
-        }
-        const planPrice = viewModel.resolved.selection.planId
-            ? viewModel.resolved.planPrices[viewModel.resolved.selection.planId]
-            : undefined;
-        let subtotal = planPrice?.kind === 'amount' ? planPrice.amount : 0;
-        for (const [id, state] of Object.entries(viewModel.resolved.selection.addOns)) {
-            const addOnPrice = viewModel.resolved.addOnPrices[id];
-            if (state.selected && addOnPrice?.kind === 'amount') {
-                subtotal += addOnPrice.amount;
-            }
-        }
-        viewModel.resolved.subtotal = subtotal;
-        return viewModel;
-    }
     _viewModel() {
         if (!this._normalized)
             return undefined;
-        return this._stabilizeResolvedPrices(createPricingViewModel(this._normalized, this._effectiveSelection(), {
+        return this._priceStabilizer.stabilize(createPricingViewModel(this._normalized, this._effectiveSelection(), {
             ...this._viewModelOptions(),
         }));
     }
+    // the relation between the current side and the selection in
+    // effect, both on the loaded pricing
+    _summaryAction(viewModel, pricing) {
+        const { relation } = compareSelections({
+            before: { pricing, selection: this._currentSelection },
+            after: { pricing, selection: viewModel.resolved.selection },
+            ...(this.expressionOptions ? { expression: this.expressionOptions } : {}),
+        });
+        return summaryActionState(viewModel, relation);
+    }
     _updateCompactLayout(width) {
         const next = this.layout === 'compact' ? true : this.layout === 'table' ? false : width < 840;
-        if (next !== this._compact) {
+        const wide = width >= 840;
+        if (next !== this._compact || wide !== this._wide) {
             this._compact = next;
+            this._wide = wide;
             this.requestUpdate();
         }
     }
-    _setSelection(next) {
+    _setSelection(input) {
+        const next = this._normalized ? reconcileSelection(this._normalized, input).selection : input;
         if (this.selection === undefined) {
             this._internalSelection = next;
         }
         const resolved = this._normalized
-            ? this._stabilizeResolvedPrices(createPricingViewModel(this._normalized, next, {
+            ? this._priceStabilizer.stabilize(createPricingViewModel(this._normalized, next, {
                 ...this._viewModelOptions(),
             })).resolved
             : undefined;
@@ -421,36 +692,18 @@ export class PricingRendererElement extends LitElement {
         }
         this.requestUpdate();
     }
-    _collectDependencies(addOnId, collected = new Set()) {
-        if (!this._normalized || collected.has(addOnId))
-            return collected;
-        const addOn = this._normalized.addOns.find((candidate) => candidate.id === addOnId);
-        for (const dependency of addOn?.dependsOn ?? []) {
-            if (!collected.has(dependency)) {
-                collected.add(dependency);
-                this._collectDependencies(dependency, collected);
-            }
-        }
-        return collected;
-    }
-    _selectedDependents(addOnId) {
-        if (!this._normalized)
-            return [];
-        const selection = this._effectiveSelection();
-        const dependents = new Set();
-        let changed = true;
-        while (changed) {
-            changed = false;
-            for (const addOn of this._normalized.addOns) {
-                if (!selection?.addOns[addOn.id]?.selected || dependents.has(addOn.id))
-                    continue;
-                if (addOn.dependsOn.some((id) => id === addOnId || dependents.has(id))) {
-                    dependents.add(addOn.id);
-                    changed = true;
-                }
-            }
-        }
-        return [...dependents];
+    // Keeps the focused element for the cancel and confirm paths, then focuses the dialog's default
+    // button once it is rendered.
+    _openChangeDialog(pending) {
+        this._pendingAddOnChange = pending;
+        this._previousFocus =
+            this.ownerDocument.activeElement instanceof HTMLElement
+                ? this.ownerDocument.activeElement
+                : undefined;
+        this.requestUpdate();
+        void this.updateComplete.then(() => {
+            this.querySelector('.pr-dialog button[autofocus]')?.focus();
+        });
     }
     _applyAddOnChange(change) {
         if (!this._normalized)
@@ -458,35 +711,55 @@ export class PricingRendererElement extends LitElement {
         const selection = this._effectiveSelection();
         if (!selection)
             return;
-        const addOns = { ...selection.addOns };
-        const setState = (id, selected) => {
-            const item = this._normalized.addOns.find((candidate) => candidate.id === id);
-            const current = addOns[id];
-            addOns[id] = {
-                selected,
-                quantity: current?.quantity ?? item?.subscriptionConstraints?.minQuantity ?? 1,
-            };
-        };
-        setState(change.addOnId, change.select);
-        change.addIds.forEach((id) => setState(id, true));
-        change.removeIds.forEach((id) => setState(id, false));
+        const next = applySelectionChange(this._normalized, selection, change);
         this._pendingAddOnChange = undefined;
-        this._setSelection({ ...selection, addOns });
+        this._setSelection(next);
         void this.updateComplete.then(() => this._restoreDialogFocus());
     }
     _restoreDialogFocus() {
         this._previousFocus?.focus();
         this._previousFocus = undefined;
     }
+    _focusRevealed(target, byKeyboard) {
+        if (!target.hasAttribute('tabindex')) {
+            target.setAttribute('tabindex', '-1');
+            // the attribute is only a focus aid for the reveal, so it goes away on blur
+            target.addEventListener('blur', () => target.removeAttribute('tabindex'), { once: true });
+        }
+        // Firefox keeps the cause of the earlier mouse click on the removed button and then skips
+        // :focus-visible for a script focus, so a keyboard activation asks for it explicitly.
+        // lib.dom has no focusVisible member in FocusOptions yet.
+        if (byKeyboard)
+            target.focus({ focusVisible: true });
+        else
+            target.focus();
+    }
+    // Escape closes the panel only from the toggle or from inside the panel; the dialog, which makes
+    // the rest inert, keeps its own Escape handling and leaves the panel as it is.
+    _closeBreakdownOnEscape(event) {
+        if (!this._breakdownOpen || event.key !== 'Escape')
+            return;
+        const target = event.target instanceof Element ? event.target : undefined;
+        const origin = target?.closest(`${breakdownToggleSelector}, ${breakdownPanelSelector}`);
+        if (!origin || !this.contains(origin))
+            return;
+        event.preventDefault();
+        this._breakdownOpen = false;
+        this.querySelector(breakdownToggleSelector)?.focus();
+        this.requestUpdate();
+    }
     render() {
+        const slots = requestedSlotsOf(this.slots);
         if (this._status === 'loading' || this._status === 'idle') {
+            const loadingTitleId = `${this._idPrefix}-loading-title`;
+            const loadingLabel = this.loadingLabel ?? translate(getMessages(this.locale, this.messages), 'pricing.loading');
+            if (slots.has('loading'))
+                return renderLoadingSlotShell(loadingTitleId, loadingLabel);
             return html `
-        <section class="pr-shell pr-shell--loading" aria-labelledby="pr-loading-title">
-          <h2 id="pr-loading-title" class="pr-sr-only">
-            ${this.loadingLabel ?? 'Loading pricing'}
-          </h2>
+        <section class="pr-shell pr-shell--loading" aria-labelledby=${loadingTitleId}>
+          <h2 id=${loadingTitleId} class="pr-sr-only">${loadingLabel}</h2>
           <div class="pr-skeleton" role="status" aria-live="polite">
-            <span>${this.loadingLabel ?? 'Loading pricing…'}</span>
+            <span>${loadingLabel}</span>
             <div></div>
             <div></div>
             <div></div>
@@ -495,23 +768,23 @@ export class PricingRendererElement extends LitElement {
       `;
         }
         if (!this._normalized || this._status === 'error') {
-            const messages = createPricingViewModel({
-                metadata: { syntaxVersion: '3.1', saasName: 'Pricing', tags: [], currency: 'USD' },
-                billing: [],
-                variables: {},
-                features: [],
-                usageLimits: [],
-                plans: [],
-                addOns: [],
-                custom: {},
-                raw: {},
-            }, undefined, { locale: this.locale, messages: this.messages }).messages;
+            if (slots.has('error'))
+                return renderErrorSlotShell(this._diagnostics);
+            const messages = getMessages(this.locale, this.messages);
+            // the codes and messages stay inside a closed details
             return html `
         <section class="pr-shell pr-error" role="alert">
           <h2>${translate(messages, 'pricing.error')}</h2>
-          <ul>
-            ${this._diagnostics.map((item) => html `<li><strong>${item.code}</strong>: ${item.message}</li>`)}
-          </ul>
+          <p>${translate(messages, errorMessageKey(this._diagnostics))}</p>
+          <details class="pr-diagnostics" data-pr-part="diagnostics">
+            <summary>${translate(messages, 'pricing.errorDetails')}</summary>
+            <ul>
+              ${this._diagnostics.map((item) => html `<li>
+                    <strong>${item.code}</strong>:
+                    ${item.message}${item.path ? ` (${item.path})` : ''}
+                  </li>`)}
+            </ul>
+          </details>
           ${this.src
                 ? html `<button
                   class="pr-button pr-button--primary"
@@ -525,44 +798,85 @@ export class PricingRendererElement extends LitElement {
       `;
         }
         const viewModel = this._viewModel();
+        const toolbarThreshold = toolbarThresholdOf(this.toolbarThreshold);
+        // Without a toolbar the user cannot undo a filter, so the search text and the checkbox override
+        // are ignored while it is hidden (the stored values are kept).
+        const toolbarShown = comparisonRowTotal(viewModel) > toolbarThreshold;
+        // a forced value is ignored without the toolbar,
+        // because no checkbox exists to undo it
+        const initialOnlyDifferences = this._onlyDifferencesOverride ??
+            resolveOnlyDifferences(viewModel, this.onlyDifferences, toolbarThreshold);
+        // the pricing, not the visible plans, defines it
+        const current = deriveCurrentContext(this._normalized, this._currentSelection);
+        const hidden = hiddenSectionsOf(this.hideSections);
         const state = {
             viewModel,
+            ...(hidden.size > 0 ? { hiddenSections: hidden } : {}),
+            ...(slots.size > 0 ? { slots } : {}),
             selection: viewModel.resolved.selection,
             compact: this._compact,
-            search: this._search,
-            onlyDifferences: this._onlyDifferences,
+            search: toolbarShown ? this._search : '',
+            onlyDifferences: toolbarShown && initialOnlyDifferences,
+            toolbarThreshold,
             selectionEnabled: this.selectionEnabled,
             ctaEnabled: this.ctaEnabled,
             variablesEnabled: this.variablesEnabled,
             expandedGroups: this._expandedGroups,
             revealedGroups: this._revealedGroups,
+            addOnSearch: this._addOnSearch,
+            addOnsRevealed: this._addOnsRevealed,
+            addOnFilterThreshold: addOnFilterThresholdOf(this.addOnFilterThreshold),
             ...(this._pendingAddOnChange ? { pendingAddOnChange: this._pendingAddOnChange } : {}),
+            breakdownOpen: this._breakdownOpen,
+            breakdownId: this._breakdownId,
+            idPrefix: this._idPrefix,
+            ...(current ? { currentPlanId: current.planId, currentAddOnIds: current.addOnIds } : {}),
+            ...(this.pendingActionId ? { pendingActionId: this.pendingActionId } : {}),
+            ...(current && this.ctaEnabled
+                ? { summaryAction: this._summaryAction(viewModel, this._normalized) }
+                : {}),
             actions: this._actions,
         };
-        const warnings = this._diagnostics.filter((item) => item.severity !== 'info');
+        // auto, the default, keeps warnings out of the page: the pricing rendered, so they are a
+        // developer's concern and stay in the pricing-diagnostic event. Errors are shown because a
+        // visitor can see what they broke. verbose shows both; off shows none.
+        const shownDiagnostics = this.diagnostics === 'off'
+            ? []
+            : this.diagnostics === 'verbose'
+                ? this._diagnostics.filter((item) => item.severity !== 'info')
+                : this._diagnostics.filter((item) => item.severity === 'error');
         return html `
-      <section class="pr-shell" aria-labelledby="pr-title">
+      <section class="pr-shell" aria-labelledby=${instanceId(state, 'title')}>
         <div
           class="pr-content"
           aria-hidden=${this._pendingAddOnChange ? 'true' : nothing}
           ?inert=${Boolean(this._pendingAddOnChange)}
         >
-          ${warnings.length
+          ${shownDiagnostics.length
             ? html `<details class="pr-diagnostics" data-pr-part="diagnostics">
                   <summary>
-                    ${translate(viewModel.messages, 'pricing.warning')} (${warnings.length})
+                    ${translate(viewModel.messages, 'pricing.warning')} (${shownDiagnostics.length})
                   </summary>
                   <ul>
-                    ${warnings.map((item) => html `<li>
+                    ${shownDiagnostics.map((item) => html `<li>
                           <strong>${item.code}</strong>:
                           ${item.message}${item.path ? ` (${item.path})` : ''}
                         </li>`)}
                   </ul>
                 </details>`
             : nothing}
-          ${renderHeader(state)} ${renderCatalogMetadata(state)} ${renderBilling(state)}
-          ${renderVariables(state)} ${renderPlans(state)} ${renderComparison(state)}
-          ${renderAddOns(state)} ${viewModel.addOns.length === 0 ? renderSummary(state) : nothing}
+          ${
+        // the shell stays labelled by the title when the hero is hidden
+        hidden.has('hero')
+            ? html `<h2 class="pr-sr-only" id=${instanceId(state, 'title')}>
+                  ${heroTitle(viewModel)}
+                </h2>`
+            : renderHeader(state)}
+          ${hidden.has('metadata') ? nothing : renderCatalogMetadata(state)}
+          ${hidden.has('billing') ? nothing : renderBilling(state)}
+          ${hidden.has('variables') ? nothing : renderVariables(state)}
+          ${hidden.has('plans') ? nothing : renderPlans(state)}
+          ${renderAfterPlans(state, this._wide)}
         </div>
         ${renderPendingDialog(state)}
         <p class="pr-sr-only" aria-live="polite">
@@ -572,16 +886,26 @@ export class PricingRendererElement extends LitElement {
     `;
     }
 }
+_a = PricingRendererElement;
 PricingRendererElement.properties = {
-    pricing: { attribute: false },
+    // a host that builds these objects in its render
+    // function does not reload on every render; call reload() to force a load. loadPricing, yaml
+    // and src keep the identity compare.
+    pricing: { attribute: false, hasChanged: inputChanged },
     yaml: { attribute: false },
     src: { type: String, reflect: true },
-    request: { attribute: false },
+    request: { attribute: false, hasChanged: inputChanged },
     loadPricing: { attribute: false },
-    normalizeOptions: { attribute: false },
+    normalizeOptions: { attribute: false, hasChanged: inputChanged },
     expressionOptions: { attribute: false },
     selection: { attribute: false },
     defaultSelection: { attribute: false },
+    // the getter returns a copy, so the default identity check would see every set as a change
+    currentSelection: {
+        attribute: false,
+        hasChanged: (value, previous) => !deepEqual(value, previous),
+    },
+    pendingActionId: { type: String, attribute: 'pending-action-id' },
     presentation: { attribute: false },
     locale: { type: String },
     pricingPath: { type: String, attribute: 'pricing-path', reflect: true },
@@ -593,6 +917,28 @@ PricingRendererElement.properties = {
     layout: { type: String, reflect: true },
     visibility: { type: String, reflect: true },
     theme: { type: String, reflect: true },
+    // Which diagnostics reach the page. Warnings mean the pricing rendered anyway, so they are
+    // for whoever builds the page, not for a customer: "verbose" is the one that shows them.
+    diagnostics: { type: String, reflect: true },
+    // The accessor below is the class's own, so Lit reads it on the first update and would reflect
+    // density="comfortable" onto every host; useDefault records that value as the default instead.
+    density: { type: String, reflect: true, noAccessor: true, useDefault: true },
     loadingLabel: { type: String, attribute: 'loading-label' },
+    onlyDifferences: { attribute: 'only-differences', converter: onlyDifferencesConverter },
+    toolbarThreshold: { type: Number, attribute: 'toolbar-threshold' },
+    addOnFilterThreshold: { type: Number, attribute: 'add-on-filter-threshold' },
+    // a host that builds the array in its render function does
+    // not re-render on every render
+    hideSections: {
+        attribute: 'hide-sections',
+        converter: hideSectionsConverter,
+        hasChanged: (value, previous) => !deepEqual(value, previous),
+    },
+    // the slot names the host fills; no attribute
+    slots: { attribute: false },
 };
+(() => {
+    // elementProperties is complete without defining the tag
+    _a.finalize();
+})();
 //# sourceMappingURL=pricing-renderer-element.js.map