@deriv-com/dds-marketing 1.1.2 → 1.2.0

package/dist/components/blocks/documents/Documents.css

@@ -0,0 +1,90 @@
+/* GENERATED from documents.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-documents {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  max-inline-size: var(--size-measure-heading);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__body {
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__list {
+  display: grid;
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+  column-gap: var(--space-gap-lg);
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-documents__item {
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__inner {
+  display: grid;
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+

package/dist/components/blocks/documents/Documents.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+import './Documents.css';
+import './documents-impl.css';
+import '../block-reveal.css';
+import { type DocumentsProps } from './Documents.types.js';
+export type { DocumentsProps };
+/**
+ * A section of documents — the reference design's DocumentChips and CountryLinkGrid, one block
+ * because they are one job.
+ *
+ * Under `groups` the children are AccordionItems, each holding DocumentLink chips, drawn as one
+ * Accordion: one group open at a time, the documents two to a row from the fold. Under `grid` the
+ * children are DocumentLinks, laid as a list beside the heading. Built from children rather than
+ * records so a page writes the documents it has — and a country's flag is the package's own icon,
+ * not an image fetched from elsewhere.
+ *
+ * It arrives the way every block does: the heading and its line, then the documents. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export declare function Documents({ ground, layout, title, description, children, }: DocumentsProps & {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/blocks/documents/Documents.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useId } from 'react';
+import './Documents.css';
+import './documents-impl.css';
+import '../block-reveal.css';
+import { Accordion } from '../../core/accordion/Accordion.js';
+import { given } from '../../given.js';
+import { arriving, useReveal } from '../use-reveal.js';
+import { documentsDefaults, documentsParts } from './Documents.types.js';
+/**
+ * A section of documents — the reference design's DocumentChips and CountryLinkGrid, one block
+ * because they are one job.
+ *
+ * Under `groups` the children are AccordionItems, each holding DocumentLink chips, drawn as one
+ * Accordion: one group open at a time, the documents two to a row from the fold. Under `grid` the
+ * children are DocumentLinks, laid as a list beside the heading. Built from children rather than
+ * records so a page writes the documents it has — and a country's flag is the package's own icon,
+ * not an image fetched from elsewhere.
+ *
+ * It arrives the way every block does: the heading and its line, then the documents. `'use client'`
+ * for that and for `useId`, which names the region by its heading.
+ */
+export function Documents({ ground = documentsDefaults.ground, layout = documentsDefaults.layout, title, description, children, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    return (_jsx("section", { className: documentsParts.root, "data-ground": ground, "data-layout": layout, "aria-labelledby": titleId, children: _jsxs("div", { className: documentsParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: documentsParts.header, children: [_jsx("h2", { className: documentsParts.title, id: titleId, ...arriving(0), children: title }), given(description) ? (_jsx("p", { className: documentsParts.description, ...arriving(1), children: description })) : null] }), _jsx("div", { className: documentsParts.body, ...arriving(2), children: layout === 'grid' ? (
+                    // `role="list"` spelled out: Safari drops a list's role once its markers are styled away.
+                    _jsx("ul", { className: documentsParts.list, role: "list", children: Children.toArray(children).map((child, at) => (_jsx("li", { className: documentsParts.item, children: child }, at))) })) : (_jsx(Accordion, { children: children })) })] }) }));
+}

package/dist/components/blocks/documents/Documents.types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+export interface DocumentsOwnProps {
+    /**
+     * `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them — and the ground a reader is already on
+     * `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice — the reference design's slate FAQ. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section.
+     * `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough. The documents turn round with it: white group headings, a muted chevron, rules in the band's own veil and a focus ring drawn for the dark, fixed like the band
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /**
+     * `groups` — The default: the documents under headings that expand, one group open at a time — AccordionItem children, each holding DocumentLink chips, two to a row from the fold. The reference design's DocumentChips
+     * `grid` — Many short entries of one kind — a document per country, each behind its flag — DocumentLink children with `variant="plain"`, in a grid beside the heading from 62rem and under it below. The reference design's CountryLinkGrid
+     */
+    layout?: 'groups' | 'grid';
+    /** Always. What the documents are, in a few words — "Regulatory documents", "Licences by country". It names the section */
+    title: string;
+    /** A line under the heading saying what the documents are for or who they apply to */
+    description?: string;
+    /** Allowed: AccordionItem, DocumentLink */
+    children: ReactNode;
+}
+export type DocumentsProps = DocumentsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const documentsParts: {
+    readonly root: "dds-documents";
+    readonly inner: "dds-documents__inner";
+    readonly title: "dds-documents__title";
+    readonly header: "dds-documents__header";
+    readonly description: "dds-documents__description";
+    readonly body: "dds-documents__body";
+    readonly list: "dds-documents__list";
+    readonly item: "dds-documents__item";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const documentsDefaults: {
+    readonly ground: "page";
+    readonly layout: "groups";
+};

package/dist/components/blocks/documents/Documents.types.js

@@ -0,0 +1,14 @@
+// GENERATED from documents.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const documentsParts = {
+    root: 'dds-documents',
+    inner: 'dds-documents__inner',
+    title: 'dds-documents__title',
+    header: 'dds-documents__header',
+    description: 'dds-documents__description',
+    body: 'dds-documents__body',
+    list: 'dds-documents__list',
+    item: 'dds-documents__item',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const documentsDefaults = { ground: 'page', layout: 'groups' };

package/dist/components/blocks/documents/documents-impl.css

@@ -0,0 +1,103 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `groups`: the heading is centred from the fold over the groups it names, FaqAccordion's rule; and
+ * inside an open group the documents stand two to a row from 62rem, a lone one across the whole row
+ * rather than half of it with a hole beside it. `62rem` longhand because `var()` is not permitted in
+ * a container query condition; it is the reference's 992px.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="groups"] .dds-documents__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-documents .dds-accordionitem__content:has(> .dds-documentlink) {
+  display: grid;
+  gap: var(--space-gap-sm);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-documents .dds-accordionitem__content:has(> .dds-documentlink) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-documents .dds-accordionitem__content > .dds-documentlink:only-child {
+    grid-column: 1 / -1;
+  }
+}
+
+/* On the strong band, the accordion takes the band's inks, as FaqAccordion's does. */
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] .dds-accordionitem {
+  border-color: var(--color-border-subtle-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] .dds-accordionitem .dds-accordionitem__trigger {
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-documents[data-ground="strong"] .dds-accordionitem .dds-accordionitem__marker {
+  color: var(--color-fg-muted-inverse);
+}
+
+/*
+ * `grid`: the heading over the entries below 62rem and beside them from there, the two columns
+ * sharing the width; the entries two across on a phone, three from 35rem and four from 48rem, then
+ * two again from 62rem, where they share the width with the heading, and three from 75rem — the
+ * reference's own measured steps, each the narrowest at which a country's name keeps to one line.
+ */
+:where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@container (min-width: 35rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 62rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__inner {
+    align-items: start;
+    column-gap: var(--space-grid-gutter);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container (min-width: 75rem) {
+  :where([data-dds-context="marketing"]) .dds-documents[data-layout="grid"] .dds-documents__list {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/*
+ * And the focus ring with them, as FaqAccordion's does: color.border.focus is near-black in light
+ * mode, a ring nobody can see on the dark band. A chip keeps its own light fill, so only the group
+ * headings and a plain entry change.
+ */
+:where([data-dds-context="marketing"])
+  .dds-documents[data-ground="strong"]
+  .dds-accordionitem
+  .dds-accordionitem__trigger:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"])
+  .dds-documents[data-ground="strong"]
+  .dds-documentlink[data-variant="plain"]
+  .dds-documentlink__link:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}

package/dist/components/blocks/download-banner/DownloadBanner.css

@@ -195,7 +195,7 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-downloadbanner[data-ground="strong"] .dds-downloadbanner__card {
-  background-color: var(--color-bg-surface-card-strong);
+  background-color: var(--color-bg-surface-card-strong-on-brand-strong);
   color: var(--color-fg-on-brand-strong);
 }
 

package/dist/components/blocks/download-banner/DownloadBanner.types.d.ts

@@ -4,7 +4,7 @@ export interface DownloadBannerOwnProps {
     /**
      * `page` — The default, and the page's own white. The card is the recessed gray that sets it off — the reference design's light-2
      * `subtle` — The grey band, with the card white on it — the reference design's light. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
-     * `strong` — `color.bg.brand-strong`, the dark band, with the card at color.bg.surface-card-strong and white words on it — the reference design's dark. For a download section a reader should arrive at; the badges are black and keep their own edge on it
+     * `strong` — `color.bg.brand-strong`, the dark band, with the card at color.bg.surface-card-strong-on-brand-strong and white words on it — the reference design's dark. For a download section a reader should arrive at; the badges are black and keep their own edge on it
      */
     ground?: 'page' | 'subtle' | 'strong';
     /** The featured card only: the app itself — a screenshot of it in a phone, the page's own image. It stands at the card's end, rising out of the card's top edge and resting on its bottom one, so the card reads as the app being held out to the reader. On a phone it sits under the badges. */

package/dist/components/blocks/estimator/Estimator.css

@@ -0,0 +1,206 @@
+/* GENERATED from estimator.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-estimator {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow-wrap: anywhere;
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-3xl);
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+  row-gap: var(--space-heading-content);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__header {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2-size);
+  font-weight: var(--font-h2-weight);
+  letter-spacing: var(--font-h2-letter-spacing);
+  line-height: var(--font-h2-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__tool {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__panels {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  column-gap: var(--space-gap-xl);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inputs {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__inputs-label {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__results {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  background-color: var(--color-bg-surface-card-raised);
+  border-radius: var(--radius-surface-compact);
+  box-shadow: var(--elevation-surface-floating);
+  padding-block: var(--space-inset-card);
+  padding-inline: var(--space-inset-card);
+  row-gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__results-label {
+  margin-block: 0;
+  font-family: var(--font-h5-family);
+  font-size: var(--font-h5-size);
+  font-weight: var(--font-h5-weight);
+  letter-spacing: var(--font-h5-letter-spacing);
+  line-height: var(--font-h5-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__list {
+  display: flex;
+  flex-direction: column;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  column-gap: var(--space-gap-2xl);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result {
+  border-block-end-style: solid;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  border-block-end-width: var(--border-width-default);
+  border-color: var(--color-border-subtle);
+  padding-block: var(--space-inset-md);
+  row-gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-value {
+  margin-inline: 0;
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4-size);
+  font-weight: var(--font-h4-weight);
+  letter-spacing: var(--font-h4-letter-spacing);
+  line-height: var(--font-h4-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-note {
+  margin-inline: 0;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__empty {
+  margin-block: 0;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__action {
+  display: flex;
+  margin-block-start: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__input-actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  margin-block-start: var(--space-gap-sm);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-layout="split"] .dds-estimator__header {
+  align-items: flex-start;
+  text-align: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-layout="stacked"] .dds-estimator__header {
+  align-items: center;
+  text-align: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator .dds-estimator__result-label {
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="page"] {
+  background-color: var(--color-bg-page);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="strong"] {
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-estimator[data-ground="subtle"] {
+  background-color: var(--color-bg-page);
+  background-image: linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+  color: var(--color-fg-default);
+}
+

package/dist/components/blocks/estimator/Estimator.d.ts

@@ -0,0 +1,27 @@
+import './Estimator.css';
+import './estimator-impl.css';
+import '../block-reveal.css';
+import { type EstimatorProps } from './Estimator.types.js';
+export type { EstimatorProps };
+/**
+ * A section that turns a reader's inputs into figures — the trading calculators, the crypto
+ * converter and the affiliate income estimate of the reference design, as one block.
+ *
+ * It lays the tool out and works nothing out. The page passes its own fields as `inputs` and the
+ * figures it has computed from them as `results`; a live feed, a formula, a currency conversion are
+ * all the page's, so the block is the same on every page that uses it and in every test, and none
+ * of it reaches the network. What the block owns is the part every such tool gets wrong once:
+ *
+ * - The figures are a description list, so a value is announced with the label it answers.
+ * - The results panel is a polite live region from the first paint, so a reader using a screen
+ *   reader hears each new set of figures once, after they stop typing, without being interrupted —
+ *   and it is there before the first change, which is the only way a live region is listened to.
+ * - Each value is isolated (`<bdi>`), so '-12.40 USD' or '0.0214 BTC' keeps its order in a
+ *   right-to-left line, where a sign or a currency is neutral and moves to the far end.
+ * - Before there are figures the panel says what it is waiting for, rather than showing a row of
+ *   dashes or a zero that reads as an answer.
+ *
+ * The tool is a Card at its `surface` variant, the same object as every other card on the page; the
+ * ground it stands on decides its fill, in the stylesheet, as ComparisonCards' cards do.
+ */
+export declare function Estimator({ ground, layout, title, description, inputsLabel, inputs, inputActions, onCalculate, resultsLabel, results, emptyMessage, action, }: EstimatorProps): import("react").JSX.Element;

package/dist/components/blocks/estimator/Estimator.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './Estimator.css';
+import './estimator-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { Card } from '../../core/card/Card.js';
+import { estimatorDefaults, estimatorParts } from './Estimator.types.js';
+/**
+ * A section that turns a reader's inputs into figures — the trading calculators, the crypto
+ * converter and the affiliate income estimate of the reference design, as one block.
+ *
+ * It lays the tool out and works nothing out. The page passes its own fields as `inputs` and the
+ * figures it has computed from them as `results`; a live feed, a formula, a currency conversion are
+ * all the page's, so the block is the same on every page that uses it and in every test, and none
+ * of it reaches the network. What the block owns is the part every such tool gets wrong once:
+ *
+ * - The figures are a description list, so a value is announced with the label it answers.
+ * - The results panel is a polite live region from the first paint, so a reader using a screen
+ *   reader hears each new set of figures once, after they stop typing, without being interrupted —
+ *   and it is there before the first change, which is the only way a live region is listened to.
+ * - Each value is isolated (`<bdi>`), so '-12.40 USD' or '0.0214 BTC' keeps its order in a
+ *   right-to-left line, where a sign or a currency is neutral and moves to the far end.
+ * - Before there are figures the panel says what it is waiting for, rather than showing a row of
+ *   dashes or a zero that reads as an answer.
+ *
+ * The tool is a Card at its `surface` variant, the same object as every other card on the page; the
+ * ground it stands on decides its fill, in the stylesheet, as ComparisonCards' cards do.
+ */
+export function Estimator({ ground = estimatorDefaults.ground, layout = estimatorDefaults.layout, title, description, inputsLabel, inputs, inputActions, onCalculate, resultsLabel, results, emptyMessage, action, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const figures = Array.isArray(results) ? results : [];
+    /*
+      Enter in a field asks for the figures, which is what a reader expects of a calculator — the
+      page's Calculate button calls the same `onCalculate` from its own press. Only a plain field:
+      Enter in a picker's search chooses an answer, and in a text area it starts a line, and both
+      are theirs to keep.
+    */
+    const calculateOnEnter = (event) => {
+        if (event.key !== 'Enter' || onCalculate === undefined)
+            return;
+        const field = event.target;
+        if (!(field instanceof HTMLInputElement))
+            return;
+        if (/^(checkbox|radio|button|submit|reset|file)$/.test(field.type))
+            return;
+        if (field.closest('[role="listbox"], [role="dialog"], [aria-haspopup], [aria-autocomplete]') !== null)
+            return;
+        event.preventDefault();
+        onCalculate();
+    };
+    // The fields are a form, and its submit never leaves the page. A form with one field submits on
+    // Enter by itself, and without this a reader pressing it would reload the page from under the tool.
+    const stay = (event) => event.preventDefault();
+    return (_jsx("section", { className: estimatorParts.root, "data-ground": ground, "data-layout": layout, "aria-labelledby": titleId, children: _jsxs("div", { className: estimatorParts.inner, ref: band, "data-revealed": revealed, children: [_jsxs("div", { className: estimatorParts.header, children: [_jsx("h2", { className: estimatorParts.title, ...arriving(0), id: titleId, children: title }), given(description) ? (_jsx("p", { className: estimatorParts.description, ...arriving(1), children: description })) : null] }), _jsx("div", { className: estimatorParts.tool, "data-theme": ground === 'strong' ? 'dark' : undefined, ...arriving(2), children: _jsx(Card, { variant: "surface", children: _jsxs("div", { className: estimatorParts.panels, children: [_jsxs("form", { className: estimatorParts.inputs, onSubmit: stay, onKeyDown: calculateOnEnter, children: [given(inputsLabel) ? _jsx("h3", { className: estimatorParts['inputs-label'], children: inputsLabel }) : null, inputs, inputActions ? _jsx("div", { className: estimatorParts['input-actions'], children: inputActions }) : null] }), _jsxs("div", { className: estimatorParts.results, "aria-live": "polite", children: [given(resultsLabel) ? _jsx("h3", { className: estimatorParts['results-label'], children: resultsLabel }) : null, figures.length > 0 ? (_jsx("dl", { className: estimatorParts.list, children: figures.map((figure) => (
+                                            // A figure's label is its identity: a tool never shows the same figure twice.
+                                            _jsxs("div", { className: estimatorParts.result, children: [_jsx("dt", { className: estimatorParts['result-label'], children: figure.label }), _jsx("dd", { className: estimatorParts['result-value'], children: _jsx("bdi", { children: figure.value }) }), given(figure.note) ? (_jsx("dd", { className: estimatorParts['result-note'], children: figure.note })) : null] }, figure.label))) })) : given(emptyMessage) ? (_jsx("p", { className: estimatorParts.empty, children: emptyMessage })) : null, action ? _jsx("div", { className: estimatorParts.action, children: action }) : null] })] }) }) })] }) }));
+}