@deriv-com/dds-marketing 1.0.2 → 1.1.1

package/dist/components/core/select/Select.js

@@ -96,7 +96,7 @@ function words(node) {
  * reader tabbing out of a control has said they are done with it.
  */
 export function Select(props) {
-    const { size = selectDefaults.size, status = selectDefaults.status, fixed = selectDefaults.fixed, label, labelTooltip, placeholder, helperText, value, defaultValue, onChange, open, defaultOpen, onOpenChange, searchable = selectDefaults.searchable, emptyLabel, required = selectDefaults.required, requiredMark = selectDefaults.requiredMark, optional = selectDefaults.optional, statusMessage, children, id, ...rest } = props;
+    const { size = selectDefaults.size, status = selectDefaults.status, fixed = selectDefaults.fixed, label, labelTooltip, placeholder, helperText, value, defaultValue, onChange, open, defaultOpen, onOpenChange, searchable = selectDefaults.searchable, emptyLabel, required = selectDefaults.required, requiredMark = selectDefaults.requiredMark, optional = selectDefaults.optional, requiredLabel = selectDefaults.requiredLabel, optionalLabel = selectDefaults.optionalLabel, labelTooltipLabel, searchLabel, statusMessage, children, id, ...rest } = props;
     const fallbackId = useId();
     const rootId = id ?? fallbackId;
     const labelId = `${rootId}-label`;
@@ -473,7 +473,7 @@ export function Select(props) {
            being read for the child ids below and then applied to nothing, so `<Select id="country">`
            put "country" on no element at all and any anchor or `getElementById` naming it found
            nothing. */
-        id: rootId, "data-size": size, "data-status": status, "data-fixed": String(fixed), children: [_jsxs("div", { className: selectParts['label-row'], children: [_jsxs("span", { className: selectParts.label, id: labelId, children: [label, required ? (_jsx("span", { className: selectParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : 'required' })) : null, optional ? _jsx("span", { className: selectParts['optional-mark'], children: "optional" }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: selectParts['label-tooltip'], "aria-label": `About ${label}`, children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsxs("div", { className: selectParts.control, ref: box, children: [_jsxs("button", { ref: trigger, type: "button", className: selectParts.field, role: "combobox", "aria-labelledby": labelId, "aria-controls": listId, "aria-expanded": expanded, "aria-haspopup": "listbox", "aria-activedescendant": expanded && activeIndex !== -1 ? rowId(activeIndex) : undefined, "aria-invalid": status === 'error' || undefined, "aria-required": required || undefined, "aria-busy": checking || undefined, "aria-disabled": fixed || undefined, "aria-describedby": messageId, onClick: fixed ? undefined : () => (expanded ? setOpen(false) : openAt(onTheAnswer())), onKeyDown: fixed ? undefined : onKeyDown, ...rest, children: [_jsxs("span", { className: selectParts.answer, children: [taken?.props.leadingIcon, _jsx("span", { className: selectParts.value, "data-placeholder": taken === undefined || undefined, children: taken?.props.children ?? placeholder })] }), _jsx("span", { className: selectParts['trailing-icon'], "aria-hidden": "true", children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(ChevronDownRegularIcon, { style: expanded ? { rotate: '180deg' } : undefined }) }) })] }), expanded ? (_jsxs("div", { className: selectParts.popup, children: [searchable ? (
+        id: rootId, "data-size": size, "data-status": status, "data-fixed": String(fixed), children: [_jsxs("div", { className: selectParts['label-row'], children: [_jsxs("span", { className: selectParts.label, id: labelId, children: [label, required ? (_jsx("span", { className: selectParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : requiredLabel })) : null, optional ? _jsx("span", { className: selectParts['optional-mark'], children: optionalLabel }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: selectParts['label-tooltip'], "aria-label": labelTooltipLabel ?? `About ${label}`, children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsxs("div", { className: selectParts.control, ref: box, children: [_jsxs("button", { ref: trigger, type: "button", className: selectParts.field, role: "combobox", "aria-labelledby": labelId, "aria-controls": listId, "aria-expanded": expanded, "aria-haspopup": "listbox", "aria-activedescendant": expanded && activeIndex !== -1 ? rowId(activeIndex) : undefined, "aria-invalid": status === 'error' || undefined, "aria-required": required || undefined, "aria-busy": checking || undefined, "aria-disabled": fixed || undefined, "aria-describedby": messageId, onClick: fixed ? undefined : () => (expanded ? setOpen(false) : openAt(onTheAnswer())), onKeyDown: fixed ? undefined : onKeyDown, ...rest, children: [_jsxs("span", { className: selectParts.answer, children: [taken?.props.leadingIcon, _jsx("span", { className: selectParts.value, "data-placeholder": taken === undefined || undefined, children: taken?.props.children ?? placeholder })] }), _jsx("span", { className: selectParts['trailing-icon'], "aria-hidden": "true", children: _jsx(Icon, { size: selectGlyphStep[size], children: _jsx(ChevronDownRegularIcon, { style: expanded ? { rotate: '180deg' } : undefined }) }) })] }), expanded ? (_jsxs("div", { className: selectParts.popup, children: [searchable ? (
                             /* The field the answers are narrowed with, above them rather than in the box — a
                                <ul> may hold options and little else, so this could not live in the list, and the
                                box below is a button, which nothing can be typed into. */
@@ -495,7 +495,7 @@ export function Select(props) {
                                        arrives at without being told what it is for. Clipped rather than drawn, which
                                        is SearchInput's own default — the placeholder below carries the words for an
                                        eye. */
-                                    label: `Search ${label}`, placeholder: `Search ${label}`, clearLabel: "Clear search", value: query, onChange: narrow, "aria-controls": listId, "aria-activedescendant": activeIndex === -1 ? undefined : rowId(activeIndex), onKeyDown: onSearchKeyDown }) })) : null, _jsx("ul", { className: selectParts.listbox, id: listId, role: "listbox", "aria-labelledby": labelId, children: visible.map((option, index) => cloneElement(option, {
+                                    label: searchLabel ?? `Search ${label}`, placeholder: searchLabel ?? `Search ${label}`, clearLabel: "Clear search", value: query, onChange: narrow, "aria-controls": listId, "aria-activedescendant": activeIndex === -1 ? undefined : rowId(activeIndex), onKeyDown: onSearchKeyDown }) })) : null, _jsx("ul", { className: selectParts.listbox, id: listId, role: "listbox", "aria-labelledby": labelId, children: visible.map((option, index) => cloneElement(option, {
                                     key: option.props.value ?? index,
                                     id: rowId(index),
                                     /* Marketing's Option is drawn at two steps where this control has three, so a

package/dist/components/core/select/Select.types.d.ts

@@ -35,10 +35,18 @@ export interface SelectOwnProps {
      * `asterisk` — Long or dense forms where the word repeats down the page and one legend can say it once instead. Only where that legend is visible from the fields it governs
      */
     requiredMark?: 'text' | 'asterisk';
+    /** The word drawn beside the label when requiredMark is text. Translate it with the page: the mark exists to say what it means in the reader's own language, which an English default does not. */
+    requiredLabel?: string;
+    /** The word drawn beside the label of an optional field. Translate it with the page, as requiredLabel is. */
+    optionalLabel?: string;
+    /** The accessible name of the button that opens labelTooltip. Without it the button is named "About" and the label; pass it to translate that with the page. */
+    labelTooltipLabel?: string;
+    /** The name and placeholder of the search field a searchable list opens with. Without it the field reads "Search" and the label; pass it to translate that with the page. */
+    searchLabel?: string;
     /** Allowed: Option */
     children: ReactNode;
 }
-export type SelectProps = SelectOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'size' | 'status' | 'fixed' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'value' | 'defaultValue' | 'onChange' | 'open' | 'defaultOpen' | 'onOpenChange' | 'searchable' | 'emptyLabel' | 'required' | 'requiredMark' | 'optional' | 'statusMessage'> & ({
+export type SelectProps = SelectOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'size' | 'status' | 'fixed' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'value' | 'defaultValue' | 'onChange' | 'open' | 'defaultOpen' | 'onOpenChange' | 'searchable' | 'emptyLabel' | 'required' | 'requiredMark' | 'optional' | 'statusMessage' | 'requiredLabel' | 'optionalLabel' | 'labelTooltipLabel' | 'searchLabel'> & ({
     required?: boolean;
     optional?: false;
 } | {
@@ -87,6 +95,8 @@ export declare const selectDefaults: {
     readonly required: false;
     readonly requiredMark: "text";
     readonly optional: false;
+    readonly requiredLabel: "required";
+    readonly optionalLabel: "optional";
 };
 /** The step this component draws a glyph slot at. Generated — do not retype. */
 export declare const selectGlyphStep: {

package/dist/components/core/select/Select.types.js

@@ -21,6 +21,6 @@ export const selectParts = {
     'message-icon': 'dds-select__message-icon',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const selectDefaults = { size: 'md', status: 'none', fixed: false, searchable: false, required: false, requiredMark: 'text', optional: false };
+export const selectDefaults = { size: 'md', status: 'none', fixed: false, searchable: false, required: false, requiredMark: 'text', optional: false, requiredLabel: 'required', optionalLabel: 'optional' };
 /** The step this component draws a glyph slot at. Generated — do not retype. */
 export const selectGlyphStep = { sm: 'xs', md: 'sm', lg: 'sm' };

package/dist/components/core/tab-list/TabList.js

@@ -88,7 +88,15 @@ export function TabList({ label, value, onChange, children, ...rest }) {
         // offsetLeft is measured from the nearest positioned ancestor, which the
         // contract makes the list — so this is content-relative and travels with the
         // scroll rather than needing it subtracted.
-        setBar({ along: content.offsetLeft, length: content.offsetWidth });
+        //
+        // Measured from the list's inline start, which is where the bar is anchored. offsetLeft
+        // is physical, so in a right-to-left strip it counted from the other edge and the bar sat
+        // a strip-width minus a tab to the right of the words it marks.
+        const rtl = getComputedStyle(list).direction === 'rtl';
+        setBar({
+            along: rtl ? content.offsetLeft + content.offsetWidth - list.clientWidth : content.offsetLeft,
+            length: content.offsetWidth,
+        });
     }, [active]);
     // Layout rather than a plain effect: between the two the bar would be painted
     // at its previous place, which is a frame of the mark under the wrong tab.

package/dist/components/core/table-header-cell/TableHeaderCell.d.ts

@@ -18,4 +18,4 @@ export type { TableHeaderCellProps };
  * than the data. It is also why the mark alone never carries the direction: the indicator is drawn
  * and never announced.
  */
-export declare function TableHeaderCell({ size, align, sortDirection, sortable, dividers, headerCase, onSort, children, ...rest }: TableHeaderCellProps): import("react").JSX.Element;
+export declare function TableHeaderCell({ size, align, scope, sortDirection, sortable, dividers, headerCase, onSort, children, ...rest }: TableHeaderCellProps): import("react").JSX.Element;

package/dist/components/core/table-header-cell/TableHeaderCell.js

@@ -21,7 +21,7 @@ import { tableHeaderCellDefaults, tableHeaderCellParts, } from './TableHeaderCel
  * than the data. It is also why the mark alone never carries the direction: the indicator is drawn
  * and never announced.
  */
-export function TableHeaderCell({ size = tableHeaderCellDefaults.size, align = tableHeaderCellDefaults.align, sortDirection = tableHeaderCellDefaults.sortDirection, sortable = tableHeaderCellDefaults.sortable, dividers = tableHeaderCellDefaults.dividers, headerCase = tableHeaderCellDefaults.headerCase, onSort, children, ...rest }) {
+export function TableHeaderCell({ size = tableHeaderCellDefaults.size, align = tableHeaderCellDefaults.align, scope = tableHeaderCellDefaults.scope, sortDirection = tableHeaderCellDefaults.sortDirection, sortable = tableHeaderCellDefaults.sortable, dividers = tableHeaderCellDefaults.dividers, headerCase = tableHeaderCellDefaults.headerCase, onSort, children, ...rest }) {
     /*
      * A header cell always truncates, so it declares no `overflow` — and the row hands one to every
      * cell it holds, because a data cell's does change. Left in `rest` it reached the element as
@@ -30,5 +30,8 @@ export function TableHeaderCell({ size = tableHeaderCellDefaults.size, align = t
      * the two decisions it answers itself.
      */
     const { overflow: _overflow, ...attrs } = rest;
-    return (_jsx("th", { ...attrs, className: tableHeaderCellParts.root, scope: "col", "data-size": size, "data-align": align, "data-sort-direction": sortDirection, "data-dividers": dividers, "data-header-case": headerCase, "aria-sort": sortable ? sortDirection : undefined, children: !sortable ? (children) : (_jsxs("button", { type: "button", className: tableHeaderCellParts.trigger, onClick: () => onSort?.(), children: [children, _jsx("span", { className: tableHeaderCellParts.indicator, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: sortDirection === 'ascending' ? (_jsx(ChevronUpRegularIcon, {})) : sortDirection === 'descending' ? (_jsx(ChevronDownRegularIcon, {})) : (_jsx(ArrowUpArrowDownRegularIcon, {})) }) })] })) }));
+    return (_jsx("th", { ...attrs, className: tableHeaderCellParts.root, 
+        // `col` names the column beneath it; `row` names the row it opens — the instrument in a list of
+        // them — and a screen reader announces it before every value in that row.
+        scope: scope, "data-size": size, "data-align": align, "data-sort-direction": sortDirection, "data-dividers": dividers, "data-header-case": headerCase, "aria-sort": sortable ? sortDirection : undefined, children: !sortable ? (children) : (_jsxs("button", { type: "button", className: tableHeaderCellParts.trigger, onClick: () => onSort?.(), children: [children, _jsx("span", { className: tableHeaderCellParts.indicator, "aria-hidden": "true", children: _jsx(Icon, { size: "xs", children: sortDirection === 'ascending' ? (_jsx(ChevronUpRegularIcon, {})) : sortDirection === 'descending' ? (_jsx(ChevronDownRegularIcon, {})) : (_jsx(ArrowUpArrowDownRegularIcon, {})) }) })] })) }));
 }

package/dist/components/core/table-header-cell/TableHeaderCell.types.d.ts

@@ -29,10 +29,15 @@ export interface TableHeaderCellOwnProps {
      * `title` — Names drawn as they were written, at font.label.sm — twelve pixels, medium, ordinary tracking. Right where the names are long, are proper nouns whose own capitals capitals would flatten, or are in a script that has no case at all, and right wherever a product has decided its tables read as sentences rather than as labels
      */
     headerCase?: 'upper' | 'title';
+    /**
+     * `col` — The default. A name in the header row, announced before every value beneath it
+     * `row` — The first cell of a data row when that cell is what the row is about — an instrument, a plan, a country — rather than one more value in it. It sits in the body, in a TableRow, where a TableCell would otherwise go
+     */
+    scope?: 'col' | 'row';
     /** Allowed: any content */
     children: ReactNode;
 }
-export type TableHeaderCellProps = TableHeaderCellOwnProps & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className' | 'size' | 'align' | 'sortDirection' | 'dividers' | 'headerCase' | 'sortable' | 'onSort'> & ({
+export type TableHeaderCellProps = TableHeaderCellOwnProps & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className' | 'size' | 'align' | 'sortDirection' | 'dividers' | 'headerCase' | 'scope' | 'sortable' | 'onSort'> & ({
     sortable?: boolean;
     onSort: () => void;
 } | {
@@ -52,5 +57,6 @@ export declare const tableHeaderCellDefaults: {
     readonly sortDirection: "none";
     readonly dividers: "rows";
     readonly headerCase: "upper";
+    readonly scope: "col";
     readonly sortable: false;
 };

package/dist/components/core/table-header-cell/TableHeaderCell.types.js

@@ -6,4 +6,4 @@ export const tableHeaderCellParts = {
     indicator: 'dds-tableheadercell__indicator',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const tableHeaderCellDefaults = { size: 'md', align: 'start', sortDirection: 'none', dividers: 'rows', headerCase: 'upper', sortable: false };
+export const tableHeaderCellDefaults = { size: 'md', align: 'start', sortDirection: 'none', dividers: 'rows', headerCase: 'upper', scope: 'col', sortable: false };

package/dist/components/core/text-area/TextArea.d.ts

@@ -10,4 +10,4 @@ export type { TextAreaProps };
  * `rows` rather than inverting the two.
  */
 export declare function linesFor(content: number, line: number, rows: number, maxRows: number): number;
-export declare function TextArea({ size, status, label, labelTooltip, placeholder, helperText, rows, maxRows, maxLength, statusMessage, required, requiredMark, optional, ...rest }: TextAreaProps): import("react").JSX.Element;
+export declare function TextArea({ size, status, label, labelTooltip, placeholder, helperText, rows, maxRows, maxLength, statusMessage, required, requiredMark, optional, requiredLabel, optionalLabel, labelTooltipLabel, ...rest }: TextAreaProps): import("react").JSX.Element;

package/dist/components/core/text-area/TextArea.js

@@ -35,7 +35,7 @@ const fieldGlyphStep = { sm: 'xs', md: 'xs', lg: 'sm' };
 export function linesFor(content, line, rows, maxRows) {
     return Math.min(Math.max(Math.ceil(content / line), rows), Math.max(maxRows, rows));
 }
-export function TextArea({ size = textAreaDefaults.size, status = textAreaDefaults.status, label, labelTooltip, placeholder, helperText, rows = textAreaDefaults.rows, maxRows = textAreaDefaults.maxRows, maxLength, statusMessage, required = textAreaDefaults.required, requiredMark = textAreaDefaults.requiredMark, optional = textAreaDefaults.optional, ...rest }) {
+export function TextArea({ size = textAreaDefaults.size, status = textAreaDefaults.status, label, labelTooltip, placeholder, helperText, rows = textAreaDefaults.rows, maxRows = textAreaDefaults.maxRows, maxLength, statusMessage, required = textAreaDefaults.required, requiredMark = textAreaDefaults.requiredMark, optional = textAreaDefaults.optional, requiredLabel = textAreaDefaults.requiredLabel, optionalLabel = textAreaDefaults.optionalLabel, labelTooltipLabel, ...rest }) {
     /**
      * One id for the field, and one for whichever line is describing it.
      *
@@ -121,7 +121,7 @@ export function TextArea({ size = textAreaDefaults.size, status = textAreaDefaul
     const mark = status === 'error' || status === 'warning' || status === 'success';
     const describedId = showsMessage ? `${base}-message` : showsHelper ? `${base}-helper` : undefined;
     const counterId = `${base}-count`;
-    return (_jsxs("div", { className: textAreaParts.root, "data-size": size, "data-status": status, children: [_jsxs("div", { className: textAreaParts['label-row'], children: [_jsxs("label", { className: textAreaParts.label, htmlFor: fieldId, children: [label, required ? (_jsx("span", { className: textAreaParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : 'required' })) : null, optional ? _jsx("span", { className: textAreaParts['optional-mark'], children: "optional" }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: textAreaParts['label-tooltip'], "aria-label": `About ${label}`, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsx("div", { className: textAreaParts.control, children: _jsx("textarea", { ref: field, className: textAreaParts.field, id: fieldId, rows: rows, placeholder: placeholder, maxLength: maxLength, ...rest, 
+    return (_jsxs("div", { className: textAreaParts.root, "data-size": size, "data-status": status, children: [_jsxs("div", { className: textAreaParts['label-row'], children: [_jsxs("label", { className: textAreaParts.label, htmlFor: fieldId, children: [label, required ? (_jsx("span", { className: textAreaParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : requiredLabel })) : null, optional ? _jsx("span", { className: textAreaParts['optional-mark'], children: optionalLabel }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: textAreaParts['label-tooltip'], "aria-label": labelTooltipLabel ?? `About ${label}`, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsx("div", { className: textAreaParts.control, children: _jsx("textarea", { ref: field, className: textAreaParts.field, id: fieldId, rows: rows, placeholder: placeholder, maxLength: maxLength, ...rest, 
                     /* After the spread, which is the whole point of it being here. `wrap="hard"` inserts
                        real newlines into the submitted value wherever the text happened to wrap on
                        screen, so what a person wrote and what a server receives differ and nothing warns

package/dist/components/core/text-area/TextArea.types.d.ts

@@ -25,8 +25,14 @@ export interface TextAreaOwnProps {
      * `asterisk` — Long or dense forms, where the word repeats down the page and one legend can say it once instead — and forms whose labels are too tight for a translated word, since "Required" becomes "Erforderlich" and an asterisk is the same width in every language. Only where a legend is visible from the fields it governs: across steps or a long scroll it is not, and the glyph then says nothing
      */
     requiredMark?: 'text' | 'asterisk';
+    /** The word drawn beside the label when requiredMark is text. Translate it with the page: the mark exists to say what it means in the reader's own language, which an English default does not. */
+    requiredLabel?: string;
+    /** The word drawn beside the label of an optional field. Translate it with the page, as requiredLabel is. */
+    optionalLabel?: string;
+    /** The accessible name of the button that opens labelTooltip. Without it the button is named "About" and the label; pass it to translate that with the page. */
+    labelTooltipLabel?: string;
 }
-export type TextAreaProps = TextAreaOwnProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'size' | 'status' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'rows' | 'maxRows' | 'maxLength' | 'statusMessage' | 'required' | 'requiredMark' | 'optional'> & ({
+export type TextAreaProps = TextAreaOwnProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'size' | 'status' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'rows' | 'maxRows' | 'maxLength' | 'statusMessage' | 'required' | 'requiredMark' | 'optional' | 'requiredLabel' | 'optionalLabel' | 'labelTooltipLabel'> & ({
     required?: boolean;
     optional?: false;
 } | {
@@ -64,4 +70,6 @@ export declare const textAreaDefaults: {
     readonly required: false;
     readonly requiredMark: "text";
     readonly optional: false;
+    readonly requiredLabel: "required";
+    readonly optionalLabel: "optional";
 };

package/dist/components/core/text-area/TextArea.types.js

@@ -16,4 +16,4 @@ export const textAreaParts = {
     counter: 'dds-textarea__counter',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const textAreaDefaults = { size: 'md', status: 'none', rows: 3, maxRows: 10, required: false, requiredMark: 'text', optional: false };
+export const textAreaDefaults = { size: 'md', status: 'none', rows: 3, maxRows: 10, required: false, requiredMark: 'text', optional: false, requiredLabel: 'required', optionalLabel: 'optional' };

package/dist/components/core/text-input/TextInput.d.ts

@@ -2,4 +2,4 @@ import './TextInput.css';
 import './text-input-impl.css';
 import { type TextInputProps } from './TextInput.types.js';
 export type { TextInputProps };
-export declare function TextInput({ size, status, type, label, labelTooltip, placeholder, helperText, statusMessage, leadingIcon, prefix, suffix, trailingIcon, clearable, clearLabel, required, requiredMark, optional, ...rest }: TextInputProps): import("react").JSX.Element;
+export declare function TextInput({ size, status, type, label, labelTooltip, placeholder, helperText, statusMessage, leadingIcon, prefix, suffix, trailingIcon, clearable, clearLabel, required, requiredMark, optional, requiredLabel, optionalLabel, labelTooltipLabel, ...rest }: TextInputProps): import("react").JSX.Element;

package/dist/components/core/text-input/TextInput.js

@@ -29,7 +29,7 @@ const statusGlyph = {
  * this is for the two marks the component draws itself, which track the text beside them.
  */
 const fieldGlyphStep = { sm: 'xs', md: 'xs', lg: 'sm' };
-export function TextInput({ size = textInputDefaults.size, status = textInputDefaults.status, type = textInputDefaults.type, label, labelTooltip, placeholder, helperText, statusMessage, leadingIcon, prefix, suffix, trailingIcon, clearable = textInputDefaults.clearable, clearLabel, required = textInputDefaults.required, requiredMark = textInputDefaults.requiredMark, optional = textInputDefaults.optional, ...rest }) {
+export function TextInput({ size = textInputDefaults.size, status = textInputDefaults.status, type = textInputDefaults.type, label, labelTooltip, placeholder, helperText, statusMessage, leadingIcon, prefix, suffix, trailingIcon, clearable = textInputDefaults.clearable, clearLabel, required = textInputDefaults.required, requiredMark = textInputDefaults.requiredMark, optional = textInputDefaults.optional, requiredLabel = textInputDefaults.requiredLabel, optionalLabel = textInputDefaults.optionalLabel, labelTooltipLabel, ...rest }) {
     /**
      * One id for the field, and one for whichever line is describing it.
      *
@@ -103,7 +103,7 @@ export function TextInput({ size = textInputDefaults.size, status = textInputDef
     const showsHelper = given(helperText) && !reporting;
     const described = showsMessage ? 'message' : showsHelper ? 'helper' : undefined;
     const mark = status === 'error' || status === 'warning' || status === 'success';
-    return (_jsxs("div", { className: textInputParts.root, "data-size": size, "data-status": status, children: [_jsxs("div", { className: textInputParts['label-row'], children: [_jsxs("label", { className: textInputParts.label, htmlFor: fieldId, children: [label, required ? (_jsx("span", { className: textInputParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : 'required' })) : null, optional ? _jsx("span", { className: textInputParts['optional-mark'], children: "optional" }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: textInputParts['label-tooltip'], "aria-label": `About ${label}`, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsxs("div", { ref: controlRef, className: textInputParts.control, 
+    return (_jsxs("div", { className: textInputParts.root, "data-size": size, "data-status": status, children: [_jsxs("div", { className: textInputParts['label-row'], children: [_jsxs("label", { className: textInputParts.label, htmlFor: fieldId, children: [label, required ? (_jsx("span", { className: textInputParts['required-mark'], "aria-hidden": "true", children: requiredMark === 'asterisk' ? '*' : requiredLabel })) : null, optional ? _jsx("span", { className: textInputParts['optional-mark'], children: optionalLabel }) : null] }), given(labelTooltip) ? (_jsx(TooltipAnchor, { content: labelTooltip, placement: "top", children: _jsx("button", { type: "button", className: textInputParts['label-tooltip'], "aria-label": labelTooltipLabel ?? `About ${label}`, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleInfoRegularIcon, {}) }) }) })) : null] }), _jsxs("div", { ref: controlRef, className: textInputParts.control, 
                 // The inset belongs to the box, so an affix sits inside it — which leaves a strip
                 // of the box that is not the input, and clicking it would do nothing where a
                 // native input's own padding puts the caret in. Only when the box itself was hit:

package/dist/components/core/text-input/TextInput.types.d.ts

@@ -39,8 +39,14 @@ export interface TextInputOwnProps {
      * `asterisk` — A dense form where the word would repeat down the column, and a legend explains the mark once
      */
     requiredMark?: 'text' | 'asterisk';
+    /** The word drawn beside the label when requiredMark is text. Translate it with the page: the mark exists to say what it means in the reader's own language, which an English default does not. */
+    requiredLabel?: string;
+    /** The word drawn beside the label of an optional field. Translate it with the page, as requiredLabel is. */
+    optionalLabel?: string;
+    /** The accessible name of the button that opens labelTooltip. Without it the button is named "About" and the label; pass it to translate that with the page. */
+    labelTooltipLabel?: string;
 }
-export type TextInputProps = TextInputOwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'status' | 'type' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'leadingIcon' | 'prefix' | 'suffix' | 'trailingIcon' | 'clearable' | 'clearLabel' | 'inputMode' | 'statusMessage' | 'required' | 'requiredMark' | 'optional'> & ({
+export type TextInputProps = TextInputOwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'status' | 'type' | 'label' | 'labelTooltip' | 'placeholder' | 'helperText' | 'leadingIcon' | 'prefix' | 'suffix' | 'trailingIcon' | 'clearable' | 'clearLabel' | 'inputMode' | 'statusMessage' | 'required' | 'requiredMark' | 'optional' | 'requiredLabel' | 'optionalLabel' | 'labelTooltipLabel'> & ({
     status?: 'none' | 'error' | 'warning' | 'success' | 'pending';
     statusMessage: string;
 } | {
@@ -87,6 +93,8 @@ export declare const textInputDefaults: {
     readonly required: false;
     readonly requiredMark: "text";
     readonly optional: false;
+    readonly requiredLabel: "required";
+    readonly optionalLabel: "optional";
 };
 /** The step this component draws a glyph slot at. Generated — do not retype. */
 export declare const textInputGlyphStep: {

package/dist/components/core/text-input/TextInput.types.js

@@ -19,6 +19,6 @@ export const textInputParts = {
     'message-icon': 'dds-textinput__message-icon',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const textInputDefaults = { size: 'md', status: 'none', type: 'text', clearable: false, required: false, requiredMark: 'text', optional: false };
+export const textInputDefaults = { size: 'md', status: 'none', type: 'text', clearable: false, required: false, requiredMark: 'text', optional: false, requiredLabel: 'required', optionalLabel: 'optional' };
 /** The step this component draws a glyph slot at. Generated — do not retype. */
 export const textInputGlyphStep = { sm: 'xs', md: 'sm', lg: 'sm' };

package/dist/components/data-table-data.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The columns a DataTable draws and the rows it fills them with.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it — and a
+ * listing of instruments is exactly that, read from a feed or a spreadsheet rather than written out
+ * as markup.
+ *
+ * Records rather than a component per row, because a row here is words and nothing else: the table
+ * searches every value in it, which it can only do if the values are strings it can read.
+ */
+/** One column: the key its values are read from in every row, and the name drawn over it. */
+export interface DataTableColumn {
+    /** The field each row holds this column's value under. Unique across the columns. */
+    key: string;
+    /**
+     * The column's name, in the header row, as written — "Min spread", "Swap long (pts)". Announced
+     * before every value under it, so it is the whole of how a reader knows what a number means.
+     */
+    label: string;
+    /**
+     * Where the column's values sit, TableCell's own choice. `start` for words, `end` for numbers a
+     * reader compares down the column — which also sets them in tabular figures, so the decimal points
+     * line up. Absent, `start`. The first column is the rows' names and is always at the start.
+     */
+    align?: 'start' | 'center' | 'end';
+}
+/**
+ * One row: each column's value under that column's `key`, as the page would print it — "1:1000",
+ * "-3.00", "Mon–Fri 00:00–21:00". A key the columns do not name is never drawn, and a column the row
+ * has no value for draws an empty cell rather than shifting the rest along.
+ */
+export type DataTableRow = Record<string, string>;

package/dist/components/data-table-data.js

@@ -0,0 +1,12 @@
+/**
+ * The columns a DataTable draws and the rows it fills them with.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` and `banner-data.ts` are: a
+ * block whose content is a list is one whose consumer builds a value before passing it — and a
+ * listing of instruments is exactly that, read from a feed or a spreadsheet rather than written out
+ * as markup.
+ *
+ * Records rather than a component per row, because a row here is words and nothing else: the table
+ * searches every value in it, which it can only do if the values are strings it can read.
+ */
+export {};

package/dist/components/download-banner-data.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The badges a DownloadBanner lays out, and the QR code it sets beside them.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than an element per badge, because a badge is a place to go and the store it is
+ * in — nothing in it is the page's to draw. The artwork is the store's own, and the component
+ * picks it from the platform rather than taking a picture the page might redraw.
+ */
+/**
+ * Where a badge sends the reader, which is also which store's artwork it carries.
+ *
+ * - `app-store` — Apple's App Store, for an iPhone or iPad app.
+ * - `google-play` — Google Play, for an Android app.
+ * - `app-gallery` — Huawei's AppGallery, for an Android app on a Huawei phone.
+ * - `android-apk` — the Android package itself, downloaded directly rather than from a store.
+ * - `mac-app-store` — the Mac App Store, for a desktop app on a Mac.
+ * - `macos-dmg` — the Mac disk image itself, downloaded directly.
+ * - `windows-store` — the Microsoft Store, for a desktop app on Windows.
+ * - `windows-exe` — the Windows installer itself, downloaded directly.
+ * - `linux` — a Linux build, downloaded directly.
+ * - `web` — the product in a browser, for a reader who would rather not install anything.
+ */
+export type DownloadBannerPlatform = 'app-store' | 'google-play' | 'app-gallery' | 'android-apk' | 'mac-app-store' | 'macos-dmg' | 'windows-store' | 'windows-exe' | 'linux' | 'web';
+/** One badge in a DownloadBanner: which store, and where in it. */
+export interface DownloadBannerBadge {
+    /** Which store or download this is. It decides the artwork, and the words the badge is named by. */
+    platform: DownloadBannerPlatform;
+    /** Where the badge goes — the product's own page in that store, or the file itself. */
+    href: string;
+    /**
+     * The badge's accessible name. Without it the badge is named by the words its artwork carries —
+     * "Download on the App Store" — which is what a reader who can see it reads, and what a reader
+     * using speech input says to press it. Give it to add to those words, never to replace them: the
+     * name has to contain the artwork's own words, or a reader saying what they see cannot press it
+     * (WCAG 2.5.3, label in name).
+     */
+    label?: string;
+}
+/** The QR code a DownloadBanner sets beside its heading from the fold, and the line telling the reader to scan it. */
+export interface DownloadBannerQr {
+    /**
+     * The QR code, as an image the page supplies — encoding the same destination the badges reach.
+     * Square, dark on a light quiet zone of its own, so it scans on any ground.
+     */
+    src: string;
+    /** What the code is for, read in its place: "QR code to download the Deriv app". */
+    alt: string;
+    /** The line beside the code telling the reader what to do with it: "Scan to download". */
+    label: string;
+}

package/dist/components/download-banner-data.js

@@ -0,0 +1,11 @@
+/**
+ * The badges a DownloadBanner lays out, and the QR code it sets beside them.
+ *
+ * Exported from the package for the reason `testimonial-row-data.ts` is: a block whose content is a
+ * list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than an element per badge, because a badge is a place to go and the store it is
+ * in — nothing in it is the page's to draw. The artwork is the store's own, and the component
+ * picks it from the platform rather than taking a picture the page might redraw.
+ */
+export {};

package/dist/components/index.d.ts

@@ -4,6 +4,8 @@ export { AccordionItem, type AccordionItemProps } from './core/accordion-item/Ac
 export { accordionItemParts, accordionItemDefaults } from './core/accordion-item/AccordionItem.types.js';
 export { AspectRatio, type AspectRatioProps } from './layout/aspect-ratio/AspectRatio.js';
 export { aspectRatioParts, aspectRatioDefaults } from './layout/aspect-ratio/AspectRatio.types.js';
+export { Awards, type AwardsProps } from './blocks/awards/Awards.js';
+export { awardsParts, awardsDefaults } from './blocks/awards/Awards.types.js';
 export { Background, type BackgroundProps } from './core/background/Background.js';
 export { backgroundParts, backgroundDefaults } from './core/background/Background.types.js';
 export { Badge, type BadgeProps } from './core/badge/Badge.js';
@@ -26,12 +28,20 @@ export { CardButton, type CardButtonProps } from './core/card-button/CardButton.
 export { cardButtonParts, cardButtonDefaults } from './core/card-button/CardButton.types.js';
 export { Checkbox, type CheckboxProps } from './core/checkbox/Checkbox.js';
 export { checkboxParts, checkboxDefaults } from './core/checkbox/Checkbox.types.js';
+export { ComparisonCards, type ComparisonCardsProps } from './blocks/comparison-cards/ComparisonCards.js';
+export { comparisonCardsParts, comparisonCardsDefaults } from './blocks/comparison-cards/ComparisonCards.types.js';
+export { ComparisonTable, type ComparisonTableProps } from './blocks/comparison-table/ComparisonTable.js';
+export { comparisonTableParts, comparisonTableDefaults } from './blocks/comparison-table/ComparisonTable.types.js';
 export { CtaBanner, type CtaBannerProps } from './blocks/cta-banner/CtaBanner.js';
 export { ctaBannerParts, ctaBannerDefaults } from './blocks/cta-banner/CtaBanner.types.js';
 export { CtaBannerSlider, type CtaBannerSliderProps } from './blocks/cta-banner-slider/CtaBannerSlider.js';
 export { ctaBannerSliderParts, ctaBannerSliderDefaults } from './blocks/cta-banner-slider/CtaBannerSlider.types.js';
+export { DataTable, type DataTableProps } from './blocks/data-table/DataTable.js';
+export { dataTableParts, dataTableDefaults } from './blocks/data-table/DataTable.types.js';
 export { Divider, type DividerProps } from './core/divider/Divider.js';
 export { dividerParts, dividerDefaults } from './core/divider/Divider.types.js';
+export { DownloadBanner, type DownloadBannerProps } from './blocks/download-banner/DownloadBanner.js';
+export { downloadBannerParts, downloadBannerDefaults } from './blocks/download-banner/DownloadBanner.types.js';
 export { DropdownMenu, type DropdownMenuProps } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
 export { FaqAccordion, type FaqAccordionProps } from './blocks/faq-accordion/FaqAccordion.js';
@@ -40,10 +50,14 @@ export { FeatureBullets, type FeatureBulletsProps } from './blocks/feature-bulle
 export { featureBulletsParts, featureBulletsDefaults } from './blocks/feature-bullets/FeatureBullets.types.js';
 export { FeatureCards, type FeatureCardsProps } from './blocks/feature-cards/FeatureCards.js';
 export { featureCardsParts, featureCardsDefaults } from './blocks/feature-cards/FeatureCards.types.js';
+export { FeatureCardsCarousel, type FeatureCardsCarouselProps } from './blocks/feature-cards-carousel/FeatureCardsCarousel.js';
+export { featureCardsCarouselParts, featureCardsCarouselDefaults } from './blocks/feature-cards-carousel/FeatureCardsCarousel.types.js';
 export { FeatureScroll, type FeatureScrollProps } from './blocks/feature-scroll/FeatureScroll.js';
 export { featureScrollParts, featureScrollDefaults } from './blocks/feature-scroll/FeatureScroll.types.js';
 export { FeatureSplit, type FeatureSplitProps } from './blocks/feature-split/FeatureSplit.js';
 export { featureSplitParts, featureSplitDefaults } from './blocks/feature-split/FeatureSplit.types.js';
+export { FeatureStack, type FeatureStackProps } from './blocks/feature-stack/FeatureStack.js';
+export { featureStackParts, featureStackDefaults } from './blocks/feature-stack/FeatureStack.types.js';
 export { FilterChip, type FilterChipProps } from './core/filter-chip/FilterChip.js';
 export { filterChipParts, filterChipDefaults } from './core/filter-chip/FilterChip.types.js';
 export { Footer, type FooterProps } from './core/footer/Footer.js';
@@ -58,6 +72,8 @@ export { IllustrationCard, type IllustrationCardProps } from './core/illustratio
 export { illustrationCardParts, illustrationCardDefaults } from './core/illustration-card/IllustrationCard.types.js';
 export { IllustrationScene, type IllustrationSceneProps } from './core/illustration-scene/IllustrationScene.js';
 export { illustrationSceneParts, illustrationSceneDefaults } from './core/illustration-scene/IllustrationScene.types.js';
+export { ImageBanner, type ImageBannerProps } from './blocks/image-banner/ImageBanner.js';
+export { imageBannerParts, imageBannerDefaults } from './blocks/image-banner/ImageBanner.types.js';
 export { LandingHero, type LandingHeroProps } from './blocks/landing-hero/LandingHero.js';
 export { landingHeroParts, landingHeroDefaults } from './blocks/landing-hero/LandingHero.types.js';
 export { Link, type LinkProps } from './core/link/Link.js';
@@ -95,8 +111,12 @@ export { ProductHero, type ProductHeroProps } from './blocks/product-hero/Produc
 export { productHeroParts, productHeroDefaults } from './blocks/product-hero/ProductHero.types.js';
 export { RemovableChip, type RemovableChipProps } from './core/removable-chip/RemovableChip.js';
 export { removableChipParts, removableChipDefaults } from './core/removable-chip/RemovableChip.types.js';
+export { ResourceBanner, type ResourceBannerProps } from './blocks/resource-banner/ResourceBanner.js';
+export { resourceBannerParts, resourceBannerDefaults } from './blocks/resource-banner/ResourceBanner.types.js';
 export { Row, type RowProps } from './layout/row/Row.js';
 export { rowParts, rowDefaults } from './layout/row/Row.types.js';
+export { SceneScroll, type SceneScrollProps } from './blocks/scene-scroll/SceneScroll.js';
+export { sceneScrollParts, sceneScrollDefaults } from './blocks/scene-scroll/SceneScroll.types.js';
 export { Scroller, type ScrollerProps } from './layout/scroller/Scroller.js';
 export { scrollerParts, scrollerDefaults } from './layout/scroller/Scroller.types.js';
 export { SearchInput, type SearchInputProps } from './core/search-input/SearchInput.js';
@@ -113,8 +133,14 @@ export { Spinner, type SpinnerProps } from './core/spinner/Spinner.js';
 export { spinnerParts, spinnerDefaults } from './core/spinner/Spinner.types.js';
 export { Stack, type StackProps } from './layout/stack/Stack.js';
 export { stackParts, stackDefaults } from './layout/stack/Stack.types.js';
+export { Stats, type StatsProps } from './blocks/stats/Stats.js';
+export { statsParts, statsDefaults } from './blocks/stats/Stats.types.js';
 export { StatusDot, type StatusDotProps } from './core/status-dot/StatusDot.js';
 export { statusDotParts, statusDotDefaults } from './core/status-dot/StatusDot.types.js';
+export { Steps, type StepsProps } from './blocks/steps/Steps.js';
+export { stepsParts, stepsDefaults } from './blocks/steps/Steps.types.js';
+export { StickyCards, type StickyCardsProps } from './blocks/sticky-cards/StickyCards.js';
+export { stickyCardsParts, stickyCardsDefaults } from './blocks/sticky-cards/StickyCards.types.js';
 export { SubdomainNavbar, type SubdomainNavbarProps } from './core/subdomain-navbar/SubdomainNavbar.js';
 export { subdomainNavbarParts, subdomainNavbarDefaults } from './core/subdomain-navbar/SubdomainNavbar.types.js';
 export { Tab, type TabProps } from './core/tab/Tab.js';
@@ -134,6 +160,8 @@ export { TableRow, type TableRowProps } from './core/table-row/TableRow.js';
 export { tableRowParts, tableRowDefaults } from './core/table-row/TableRow.types.js';
 export { TabList, type TabListProps } from './core/tab-list/TabList.js';
 export { tabListParts } from './core/tab-list/TabList.types.js';
+export { TeamGrid, type TeamGridProps } from './blocks/team-grid/TeamGrid.js';
+export { teamGridParts, teamGridDefaults } from './blocks/team-grid/TeamGrid.types.js';
 export { TestimonialRow, type TestimonialRowProps } from './blocks/testimonial-row/TestimonialRow.js';
 export { testimonialRowParts, testimonialRowDefaults } from './blocks/testimonial-row/TestimonialRow.types.js';
 export { TestimonialSlider, type TestimonialSliderProps } from './blocks/testimonial-slider/TestimonialSlider.js';
@@ -142,14 +170,31 @@ export { TextArea, type TextAreaProps } from './core/text-area/TextArea.js';
 export { textAreaParts, textAreaDefaults } from './core/text-area/TextArea.types.js';
 export { TextInput, type TextInputProps } from './core/text-input/TextInput.js';
 export { textInputParts, textInputDefaults } from './core/text-input/TextInput.types.js';
+export { TextScroll, type TextScrollProps } from './blocks/text-scroll/TextScroll.js';
+export { textScrollParts, textScrollDefaults } from './blocks/text-scroll/TextScroll.types.js';
+export { Tiers, type TiersProps } from './blocks/tiers/Tiers.js';
+export { tiersParts, tiersDefaults } from './blocks/tiers/Tiers.types.js';
 export { Tooltip, type TooltipProps } from './core/tooltip/Tooltip.js';
 export { tooltipParts, tooltipDefaults } from './core/tooltip/Tooltip.types.js';
 export { useTooltip, useTooltipDefaults, type UseTooltipOptions, type UseTooltipResult } from './core/tooltip/use-tooltip.js';
 export { TooltipAnchor, type TooltipAnchorProps } from './core/tooltip/TooltipAnchor.js';
 export { Typography, type TypographyProps } from './core/typography/Typography.js';
 export { typographyParts, typographyDefaults } from './core/typography/Typography.types.js';
+export type { Award } from './awards-data.js';
 export type { CtaBannerSlide } from './banner-data.js';
+export type { BlockImage } from './block-image-data.js';
+export type { ComparisonCardsCard } from './comparison-cards-data.js';
+export type { ComparisonTableColumn, ComparisonTableRow } from './comparison-table-data.js';
+export type { DataTableColumn, DataTableRow } from './data-table-data.js';
+export type { DownloadBannerBadge, DownloadBannerQr } from './download-banner-data.js';
 export type { LogoTile } from './logo-data.js';
+export type { ResourceBannerLink } from './resource-banner-data.js';
+export type { SceneScrollScene } from './scene-scroll-data.js';
 export type { FeatureScrollStep } from './scroll-data.js';
+export type { StatsFigure } from './stats-data.js';
+export type { StepsItem } from './steps-data.js';
+export type { StickyCardsItem } from './sticky-cards-data.js';
+export type { TeamGridMember } from './team-grid-data.js';
 export type { TestimonialRowReview, TestimonialRowSummary } from './testimonial-row-data.js';
 export type { TestimonialSliderQuote } from './testimonial-slider-data.js';
+export type { TiersItem } from './tiers-data.js';