@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/core/pagination-dots/PaginationDots.types.d.ts

@@ -0,0 +1,38 @@
+export interface PaginationDotsOwnProps {
+    /**
+     * `default` — The marks take the ink of whatever the row stands on — white on a coral or dark band, near-black on the page — so the row belongs to its ground. The usual choice, and the only one on a band.
+     * `accent` — On the bare page, where the row should carry the brand: the marks are color.fg.brand-accent, the current pill solid coral and the rest the same coral held back. The solid pill clears 3:1 against the page at 3.11:1, just; the resting marks do not, as at the default — so only on the page's own ground, where nothing takes the coral lower.
+     */
+    variant?: 'default' | 'accent';
+    /** Which position the reader is on, counted from 1. The consumer holds it, because the slide or step in view is theirs too and the two are one fact. */
+    page?: number;
+    /** How many positions there are, which is how many marks the row draws. */
+    totalPages?: number;
+    /** Whenever the marks should move anything — called with the position pressed. The row does not move itself; the consumer sets page from it. */
+    onPageChange?: (page: number) => void;
+    /** The sequence should move on its own — a slider of promotions, a hero that rotates. The row advances page through onPageChange every motion.duration.dwell, wrapping from the last position to the first. It holds while `paused` is set, never moves for a reader who asked for less motion, and stops for good once the reader presses a mark. That last is the WAI carousel pattern's rule that a reader who has chosen a position is reading, not watching. That gives a reader a way to stop the rotation, which WCAG 2.2.2 asks for, but not a visible one: nothing says a press will stop it, so a page that needs 2.2.2 met plainly should still offer its own pause, or leave autoplay off. */
+    autoplay?: boolean;
+    /** Whatever holds the row wants the rotation held for now — while the pointer is over the slide or focus is inside it, so a reader is never moved on mid-sentence. It lets go when this goes false. */
+    paused?: boolean;
+    /** The name the row is announced by, as a group. Name what the positions are: 'Slides', 'Steps'. Translate it with the page. */
+    label?: string;
+    /** The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first is the reason a sentence template would be better, and the reason this is not yet one. */
+    itemLabel?: string;
+}
+export type PaginationDotsProps = PaginationDotsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const paginationDotsParts: {
+    readonly root: "dds-paginationdots";
+    readonly dot: "dds-paginationdots__dot";
+    readonly mark: "dds-paginationdots__mark";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const paginationDotsDefaults: {
+    readonly variant: "default";
+    readonly page: 1;
+    readonly totalPages: 1;
+    readonly autoplay: false;
+    readonly paused: false;
+    readonly label: "Slides";
+    readonly itemLabel: "Slide";
+};

package/dist/components/core/pagination-dots/PaginationDots.types.js

@@ -0,0 +1,9 @@
+// GENERATED from pagination-dots.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const paginationDotsParts = {
+    root: 'dds-paginationdots',
+    dot: 'dds-paginationdots__dot',
+    mark: 'dds-paginationdots__mark',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const paginationDotsDefaults = { variant: 'default', page: 1, totalPages: 1, autoplay: false, paused: false, label: 'Slides', itemLabel: 'Slide' };

package/dist/components/core/removable-chip/RemovableChip.css

@@ -56,11 +56,11 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__remove:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__remove:active {
-  background-color: var(--color-bg-active-inverse);
+  background-color: var(--color-bg-active-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__remove:focus-visible {
@@ -120,6 +120,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-removablechip,
-  :where([data-dds-context="marketing"]) .dds-removablechip * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-removablechip * { transition: none !important; }
 }
 

package/dist/components/core/search-input/SearchInput.css

@@ -200,6 +200,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-searchinput,
-  :where([data-dds-context="marketing"]) .dds-searchinput * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-searchinput * { transition: none !important; }
 }
 

package/dist/components/core/segmented-control/SegmentedControl.css

@@ -52,6 +52,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-segmentedcontrol,
-  :where([data-dds-context="marketing"]) .dds-segmentedcontrol * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-segmentedcontrol * { transition: none !important; }
 }
 

package/dist/components/core/segmented-control-item/SegmentedControlItem.css

@@ -146,6 +146,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-segmentedcontrolitem,
-  :where([data-dds-context="marketing"]) .dds-segmentedcontrolitem * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-segmentedcontrolitem * { transition: none !important; }
 }
 

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

@@ -99,6 +99,7 @@
   align-items: center;
   display: flex;
   flex: none;
+  transition-property: rotate;
   color: var(--color-fg-muted);
   transition-duration: var(--motion-duration-fast);
   transition-timing-function: var(--motion-easing-standard);
@@ -395,6 +396,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-select,
-  :where([data-dds-context="marketing"]) .dds-select * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-select * { transition: none !important; }
 }
 

package/dist/components/core/select-chip/SelectChip.css

@@ -46,6 +46,7 @@
 
 :where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__chevron {
   flex: none;
+  transition-property: rotate;
   transition-duration: var(--motion-duration-fast);
   transition-timing-function: var(--motion-easing-standard);
 }
@@ -94,12 +95,6 @@
   outline-width: var(--border-width-focus);
 }
 
-:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-chosen="true"] {
-  background-color: var(--color-bg-strong);
-  border-color: var(--color-bg-strong);
-  color: var(--color-fg-on-strong);
-}
-
 :where([data-dds-context="marketing"]) .dds-selectchip[data-disabled="true"] {
   opacity: var(--opacity-disabled);
 }
@@ -148,8 +143,20 @@
   line-height: var(--font-label-sm-line-height);
 }
 
+:where([data-dds-context="marketing"]) .dds-selectchip[data-emphasis="highlight"] .dds-selectchip__trigger[data-chosen="true"] {
+  background-color: var(--color-bg-strong);
+  border-color: var(--color-bg-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-emphasis="quiet"] .dds-selectchip__trigger[data-chosen="true"] {
+  background-color: var(--color-bg-surface-raised);
+  border-color: var(--color-border-default);
+  color: var(--color-fg-default);
+}
+
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-selectchip,
-  :where([data-dds-context="marketing"]) .dds-selectchip * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-selectchip * { transition: none !important; }
 }
 

package/dist/components/core/select-chip/SelectChip.d.ts

@@ -17,4 +17,4 @@ export type { SelectChipProps };
  * not a tab stop, and a list of twenty would otherwise be twenty presses on the way to
  * whatever follows the row.
  */
-export declare function SelectChip({ size, disabled, alignment, label, value, defaultValue, onChange, open, defaultOpen, onOpenChange, leadingIcon, children, ...rest }: SelectChipProps): import("react").JSX.Element;
+export declare function SelectChip({ size, disabled, alignment, emphasis, label, value, defaultValue, onChange, open, defaultOpen, onOpenChange, leadingIcon, children, ...rest }: SelectChipProps): import("react").JSX.Element;

package/dist/components/core/select-chip/SelectChip.js

@@ -68,7 +68,7 @@ const TYPING_WINDOW = 500;
  * not a tab stop, and a list of twenty would otherwise be twenty presses on the way to
  * whatever follows the row.
  */
-export function SelectChip({ size = selectChipDefaults.size, disabled = selectChipDefaults.disabled, alignment = selectChipDefaults.alignment, label, value, defaultValue, onChange, open, defaultOpen, onOpenChange, leadingIcon, children, ...rest }) {
+export function SelectChip({ size = selectChipDefaults.size, disabled = selectChipDefaults.disabled, alignment = selectChipDefaults.alignment, emphasis = selectChipDefaults.emphasis, label, value, defaultValue, onChange, open, defaultOpen, onOpenChange, leadingIcon, children, ...rest }) {
     const options = optionsOf(children);
     const rootId = useId();
     const listId = `${rootId}-list`;
@@ -250,9 +250,12 @@ export function SelectChip({ size = selectChipDefaults.size, disabled = selectCh
     const taken = options[indexOf(chosen)];
     // The chip carries the answer once there is one, and the name of the narrowing until
     // then — which is what makes a row of these read as a list of decisions rather than a
-    // list of filters.
-    const shown = taken === undefined ? label : words(taken.props.children);
-    return (_jsxs("div", { className: selectChipParts.root, ...rest, ref: root, "data-size": size, "data-alignment": alignment, "data-disabled": String(disabled), children: [_jsxs("button", { type: "button", className: selectChipParts.trigger, 
+    // list of filters. A quiet chip keeps the name in front of the answer: it has no fill
+    // to say a narrowing is on, so the words carry both, as one thing to read — "Sort:
+    // Most read".
+    const answer = taken === undefined ? undefined : words(taken.props.children);
+    const shown = answer === undefined ? label : emphasis === 'quiet' ? `${label}: ${answer}` : answer;
+    return (_jsxs("div", { className: selectChipParts.root, ...rest, ref: root, "data-size": size, "data-alignment": alignment, "data-emphasis": emphasis, "data-disabled": String(disabled), children: [_jsxs("button", { type: "button", className: selectChipParts.trigger, 
                 // The platform's own, which is the whole of the behaviour: a disabled button
                 // takes no click, answers no key, and is not a tab stop — so there is nothing
                 // here to gate by hand.

package/dist/components/core/select-chip/SelectChip.types.d.ts

@@ -10,7 +10,12 @@ export interface SelectChipOwnProps {
      * `end` — Its trailing edge lines up instead, for a chip near the end of a row where a list opening the other way would run off the screen
      */
     alignment?: 'start' | 'end';
-    /** Always, and required on that account — it names what is being chosen, and it is what the chip shows until something has been. Short enough to read at a glance in a row of other chips */
+    /**
+     * `highlight` — A filter. Choosing an answer hides part of the list, like a category, a topic or a product line. The chip fills to show a filter is on
+     * `quiet` — A setting that only changes how the page is shown, like a sort order, a language or a layout. Nothing is hidden, so the chip stays plain and reads "Label: Value". Always give it a starting value with value or defaultValue
+     */
+    emphasis?: 'highlight' | 'quiet';
+    /** Always, and required on that account — it names what is being chosen, and it is what the chip shows until something has been, and what a quiet chip goes on showing ahead of the answer. Short enough to read at a glance in a row of other chips */
     label: string;
     /** The page owns the answer — it arrives from a URL, is shared with something else on screen, or has to survive the chip unmounting. Passed, this is the answer, and onChange is the only way it moves */
     value?: string;
@@ -48,6 +53,7 @@ export declare const selectChipDefaults: {
     readonly disabled: false;
     readonly size: "sm";
     readonly alignment: "start";
+    readonly emphasis: "highlight";
 };
 /** The step this component draws a glyph slot at. Generated — do not retype. */
 export declare const selectChipGlyphStep: {

package/dist/components/core/select-chip/SelectChip.types.js

@@ -9,6 +9,6 @@ export const selectChipParts = {
     listbox: 'dds-selectchip__listbox',
 };
 /** Generated so defaults cannot drift from the contract. */
-export const selectChipDefaults = { disabled: false, size: 'sm', alignment: 'start' };
+export const selectChipDefaults = { disabled: false, size: 'sm', alignment: 'start', emphasis: 'highlight' };
 /** The step this component draws a glyph slot at. Generated — do not retype. */
 export const selectChipGlyphStep = { sm: 'xs', md: 'sm' };

package/dist/components/core/select-chip/select-chip-impl.css

@@ -22,7 +22,7 @@
 /* The chosen chip's own hover, which would otherwise fall back to the unchosen one and wash the
    fill in the wrong direction — a black alpha over a ground that is already near-black shows
    nothing at all. This is the case color.bg.hover-inverse exists for. */
-:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-chosen="true"]:hover {
+:where([data-dds-context="marketing"]) .dds-selectchip[data-emphasis="highlight"] .dds-selectchip__trigger[data-chosen="true"]:hover {
   background-image: linear-gradient(
     var(--color-bg-hover-inverse),
     var(--color-bg-hover-inverse)
@@ -32,7 +32,18 @@
 /* An open chip borrows the heavier edge, but only while nothing is chosen. Said of both, it would
    be a second rule as specific as the one it argues with, and the cascade would settle it by
    source order — so the exclusion is written rather than left to whichever sorted last. A chosen
-   chip already carries a painted edge, so there is nothing for opening to add. */
-:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-expanded="true"]:not([data-chosen="true"]) {
+   chip already carries a painted edge, so there is nothing for opening to add — unless it is
+   quiet, which never takes that edge, and so borrows this one whether or not anything is chosen. */
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-expanded="true"]:not([data-chosen="true"]),
+:where([data-dds-context="marketing"]) .dds-selectchip[data-emphasis="quiet"] .dds-selectchip__trigger[data-expanded="true"] {
   border-color: var(--color-border-strong);
 }
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__listbox {
+  /* Over whatever follows the chip. An absolutely positioned box already paints above the
+     in-flow content of its own stacking context, which is enough until the next thing on the
+     page is positioned too — and in a row of chips the next thing is another chip, whose
+     relative root painted over this list in source order. `layer.popup`, the role
+     DropdownMenu and NavbarMenu already read for a panel that floats over the page. */
+  z-index: var(--layer-popup);
+}

package/dist/components/core/status-dot/StatusDot.css

@@ -38,6 +38,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-statusdot { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-statusdot { transition: none !important; }
 }
 

package/dist/components/core/subdomain-navbar/SubdomainNavbar.css

@@ -79,11 +79,11 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-subdomainnavbar[data-tone="inverse"] {
-  background-color: var(--color-bg-strong);
-  color: var(--color-fg-on-strong);
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-subdomainnavbar[data-tone="inverse"] .dds-subdomainnavbar__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 

package/dist/components/core/tab/Tab.css

@@ -108,6 +108,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-tab,
-  :where([data-dds-context="marketing"]) .dds-tab * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-tab * { transition: none !important; }
 }
 

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

@@ -35,6 +35,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-tablist,
-  :where([data-dds-context="marketing"]) .dds-tablist * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-tablist * { transition: none !important; }
 }
 

package/dist/components/core/table/table-impl.css

@@ -41,14 +41,20 @@
  * It has to be opaque, and that is the whole difficulty. A table paints nothing: the surface
  * belongs to whatever put it there, which is the right arrangement everywhere except here, where a
  * cell that stays put while the rest slides under it shows the sliding through itself. So the
- * pinned cell paints the ground its card holds — the one colour it can name that a page will have
- * put behind it.
+ * pinned cell paints the ground its card holds.
  *
- * The row's own states cannot simply be inherited through it, because both are alpha: selected is
- * eight percent black and hover is five, and a translucent cell over scrolled content is the same
- * failure with a tint on it. So each is restated here over the opaque floor, the selected one as a
- * colour and the hover one as an image layered above it. That is the arrangement FilterChip makes
- * for exactly the same reason, and the second time this package has needed it.
+ * That ground is no longer one colour it can name. A raised card is see-through in dark —
+ * color.bg.surface-card-raised is white at six — so what a reader sees is the card over the band
+ * it stands on over the page. The cell rebuilds that stack: the page as an opaque floor, then the
+ * band and the card laid over it as images, the topmost listed first. It is the arrangement a
+ * raised card is documented for — on a color.bg.band-subtle band — and in light all three are
+ * opaque, so the stack is simply white. Naming color.bg.surface-raised instead, as this did,
+ * painted a solid grey the card no longer is.
+ *
+ * The row's own states go on top of the stack rather than instead of it, because both are alpha:
+ * selected is eight percent and hover four, and either painted as the cell's colour would let the
+ * scrolled columns show through the pinned one. That is the layering FilterChip uses, for the
+ * same reason.
  *
  * The stacking order is an integer with no unit and no token to name it — this package has one
  * layer role and it is for popups, which this is not. One is enough: the pinned cell has to paint
@@ -58,18 +64,34 @@
   position: sticky;
   inset-inline-start: 0;
   z-index: 1;
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-page);
+  background-image:
+    linear-gradient(var(--color-bg-surface-card-raised), var(--color-bg-surface-card-raised)),
+    linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
   border-inline-end-width: var(--border-width-hairline);
 }
 
-/* The chosen row keeps its ground where it is pinned, restated because an alpha cannot be inherited
-   onto a cell that has scrolled content behind it. */
+/* The chosen row keeps its ground where it is pinned, laid over the stack rather than replacing it. */
 :where([data-dds-context="marketing"]) .dds-table[data-pin-first-column='true'] .dds-tablerow[data-selected='true'] > :first-child {
-  background-color: var(--color-bg-selected);
+  background-image:
+    linear-gradient(var(--color-bg-selected), var(--color-bg-selected)),
+    linear-gradient(var(--color-bg-surface-card-raised), var(--color-bg-surface-card-raised)),
+    linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
 }
 
-/* And the pointer's wash, as an image over the floor rather than instead of it — the layering
-   FilterChip uses, for the same reason: the token tints what it lands on rather than replacing it. */
+/* And the pointer's wash, the same way. */
 :where([data-dds-context="marketing"]) .dds-table[data-pin-first-column='true'] .dds-tablerow[data-hoverable='true']:hover > :first-child {
-  background-image: linear-gradient(var(--color-bg-hover), var(--color-bg-hover));
+  background-image:
+    linear-gradient(var(--color-bg-hover), var(--color-bg-hover)),
+    linear-gradient(var(--color-bg-surface-card-raised), var(--color-bg-surface-card-raised)),
+    linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
+}
+
+/* Both at once: the wash over the chosen ground, over the stack. */
+:where([data-dds-context="marketing"]) .dds-table[data-pin-first-column='true'] .dds-tablerow[data-selected='true'][data-hoverable='true']:hover > :first-child {
+  background-image:
+    linear-gradient(var(--color-bg-hover), var(--color-bg-hover)),
+    linear-gradient(var(--color-bg-selected), var(--color-bg-selected)),
+    linear-gradient(var(--color-bg-surface-card-raised), var(--color-bg-surface-card-raised)),
+    linear-gradient(var(--color-bg-band-subtle), var(--color-bg-band-subtle));
 }

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

@@ -49,11 +49,11 @@
 
 :where([data-dds-context="marketing"]) .dds-tableheadercell[data-header-case="upper"] {
   text-transform: uppercase;
-  font-family: var(--font-eyebrow-family);
-  font-size: var(--font-eyebrow-size);
-  font-weight: var(--font-eyebrow-weight);
-  letter-spacing: var(--font-eyebrow-letter-spacing);
-  line-height: var(--font-eyebrow-line-height);
+  font-family: var(--font-eyebrow-sm-family);
+  font-size: var(--font-eyebrow-sm-size);
+  font-weight: var(--font-eyebrow-sm-weight);
+  letter-spacing: var(--font-eyebrow-sm-letter-spacing);
+  line-height: var(--font-eyebrow-sm-line-height);
 }
 
 :where([data-dds-context="marketing"]) .dds-tableheadercell[data-align="center"] .dds-tableheadercell__trigger {

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

@@ -320,6 +320,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-textarea,
-  :where([data-dds-context="marketing"]) .dds-textarea * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-textarea * { transition: none !important; }
 }
 

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

@@ -395,6 +395,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-textinput,
-  :where([data-dds-context="marketing"]) .dds-textinput * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-textinput * { transition: none !important; }
 }
 

package/dist/components/core/tooltip/Tooltip.css

@@ -96,6 +96,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-tooltip,
-  :where([data-dds-context="marketing"]) .dds-tooltip * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-tooltip * { transition: none !important; }
 }
 

package/dist/components/core/typography/Typography.css

@@ -6,11 +6,11 @@
 
 :where([data-dds-context="marketing"]) .dds-typography[data-variant="eyebrow"] {
   text-transform: uppercase;
-  font-family: var(--font-eyebrow-family);
-  font-size: var(--font-eyebrow-size);
-  font-weight: var(--font-eyebrow-weight);
-  letter-spacing: var(--font-eyebrow-letter-spacing);
-  line-height: var(--font-eyebrow-line-height);
+  font-family: var(--font-eyebrow-sm-family);
+  font-size: var(--font-eyebrow-sm-size);
+  font-weight: var(--font-eyebrow-sm-weight);
+  letter-spacing: var(--font-eyebrow-sm-letter-spacing);
+  line-height: var(--font-eyebrow-sm-line-height);
 }
 
 :where([data-dds-context="marketing"]) .dds-typography[data-variant="figure"] {

package/dist/components/index.d.ts

@@ -24,10 +24,24 @@ 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 { 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 { Divider, type DividerProps } from './core/divider/Divider.js';
 export { dividerParts, dividerDefaults } from './core/divider/Divider.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';
+export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
+export { FeatureBullets, type FeatureBulletsProps } from './blocks/feature-bullets/FeatureBullets.js';
+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 { 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 { 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';
@@ -38,8 +52,14 @@ export { Grid, type GridProps } from './layout/grid/Grid.js';
 export { gridParts, gridDefaults } from './layout/grid/Grid.types.js';
 export { Icon, type IconProps } from './core/icon/Icon.js';
 export { iconParts, iconDefaults } from './core/icon/Icon.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';
 export { linkParts, linkDefaults } from './core/link/Link.types.js';
+export { LogoColumns, type LogoColumnsProps } from './blocks/logo-columns/LogoColumns.js';
+export { logoColumnsParts, logoColumnsDefaults } from './blocks/logo-columns/LogoColumns.types.js';
+export { LogoRows, type LogoRowsProps } from './blocks/logo-rows/LogoRows.js';
+export { logoRowsParts, logoRowsDefaults } from './blocks/logo-rows/LogoRows.types.js';
 export { MenuItem, type MenuItemProps } from './core/menu-item/MenuItem.js';
 export { menuItemParts, menuItemDefaults } from './core/menu-item/MenuItem.types.js';
 export { Navbar, type NavbarProps } from './core/navbar/Navbar.js';
@@ -59,8 +79,14 @@ export { NavbarSwitcherOption, type NavbarSwitcherOptionProps } from './core/nav
 export { navbarSwitcherOptionParts, navbarSwitcherOptionDefaults } from './core/navbar-switcher-option/NavbarSwitcherOption.types.js';
 export { Option, type OptionProps } from './core/option/Option.js';
 export { optionParts, optionDefaults } from './core/option/Option.types.js';
+export { PageHeader, type PageHeaderProps } from './blocks/page-header/PageHeader.js';
+export { pageHeaderParts, pageHeaderDefaults } from './blocks/page-header/PageHeader.types.js';
 export { Pagination, type PaginationProps } from './core/pagination/Pagination.js';
 export { paginationParts, paginationDefaults } from './core/pagination/Pagination.types.js';
+export { PaginationDots, type PaginationDotsProps } from './core/pagination-dots/PaginationDots.js';
+export { paginationDotsParts, paginationDotsDefaults } from './core/pagination-dots/PaginationDots.types.js';
+export { ProductHero, type ProductHeroProps } from './blocks/product-hero/ProductHero.js';
+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 { Row, type RowProps } from './layout/row/Row.js';
@@ -102,6 +128,10 @@ 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 { 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';
+export { testimonialSliderParts, testimonialSliderDefaults } from './blocks/testimonial-slider/TestimonialSlider.types.js';
 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';
@@ -112,3 +142,8 @@ export { useTooltip, useTooltipDefaults, type UseTooltipOptions, type UseTooltip
 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 { CtaBannerSlide } from './banner-data.js';
+export type { LogoTile } from './logo-data.js';
+export type { FeatureScrollStep } from './scroll-data.js';
+export type { TestimonialRowReview, TestimonialRowSummary } from './testimonial-row-data.js';
+export type { TestimonialSliderQuote } from './testimonial-slider-data.js';

package/dist/components/index.js

@@ -25,10 +25,24 @@ export { CardButton } from './core/card-button/CardButton.js';
 export { cardButtonParts, cardButtonDefaults } from './core/card-button/CardButton.types.js';
 export { Checkbox } from './core/checkbox/Checkbox.js';
 export { checkboxParts, checkboxDefaults } from './core/checkbox/Checkbox.types.js';
+export { CtaBanner } from './blocks/cta-banner/CtaBanner.js';
+export { ctaBannerParts, ctaBannerDefaults } from './blocks/cta-banner/CtaBanner.types.js';
+export { CtaBannerSlider } from './blocks/cta-banner-slider/CtaBannerSlider.js';
+export { ctaBannerSliderParts, ctaBannerSliderDefaults } from './blocks/cta-banner-slider/CtaBannerSlider.types.js';
 export { Divider } from './core/divider/Divider.js';
 export { dividerParts, dividerDefaults } from './core/divider/Divider.types.js';
 export { DropdownMenu } from './core/dropdown-menu/DropdownMenu.js';
 export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { FaqAccordion } from './blocks/faq-accordion/FaqAccordion.js';
+export { faqAccordionParts, faqAccordionDefaults } from './blocks/faq-accordion/FaqAccordion.types.js';
+export { FeatureBullets } from './blocks/feature-bullets/FeatureBullets.js';
+export { featureBulletsParts, featureBulletsDefaults } from './blocks/feature-bullets/FeatureBullets.types.js';
+export { FeatureCards } from './blocks/feature-cards/FeatureCards.js';
+export { featureCardsParts, featureCardsDefaults } from './blocks/feature-cards/FeatureCards.types.js';
+export { FeatureScroll } from './blocks/feature-scroll/FeatureScroll.js';
+export { featureScrollParts, featureScrollDefaults } from './blocks/feature-scroll/FeatureScroll.types.js';
+export { FeatureSplit } from './blocks/feature-split/FeatureSplit.js';
+export { featureSplitParts, featureSplitDefaults } from './blocks/feature-split/FeatureSplit.types.js';
 export { FilterChip } from './core/filter-chip/FilterChip.js';
 export { filterChipParts, filterChipDefaults } from './core/filter-chip/FilterChip.types.js';
 export { Footer } from './core/footer/Footer.js';
@@ -39,8 +53,14 @@ export { Grid } from './layout/grid/Grid.js';
 export { gridParts, gridDefaults } from './layout/grid/Grid.types.js';
 export { Icon } from './core/icon/Icon.js';
 export { iconParts, iconDefaults } from './core/icon/Icon.types.js';
+export { LandingHero } from './blocks/landing-hero/LandingHero.js';
+export { landingHeroParts, landingHeroDefaults } from './blocks/landing-hero/LandingHero.types.js';
 export { Link } from './core/link/Link.js';
 export { linkParts, linkDefaults } from './core/link/Link.types.js';
+export { LogoColumns } from './blocks/logo-columns/LogoColumns.js';
+export { logoColumnsParts, logoColumnsDefaults } from './blocks/logo-columns/LogoColumns.types.js';
+export { LogoRows } from './blocks/logo-rows/LogoRows.js';
+export { logoRowsParts, logoRowsDefaults } from './blocks/logo-rows/LogoRows.types.js';
 export { MenuItem } from './core/menu-item/MenuItem.js';
 export { menuItemParts, menuItemDefaults } from './core/menu-item/MenuItem.types.js';
 export { Navbar } from './core/navbar/Navbar.js';
@@ -60,8 +80,14 @@ export { NavbarSwitcherOption } from './core/navbar-switcher-option/NavbarSwitch
 export { navbarSwitcherOptionParts, navbarSwitcherOptionDefaults } from './core/navbar-switcher-option/NavbarSwitcherOption.types.js';
 export { Option } from './core/option/Option.js';
 export { optionParts, optionDefaults } from './core/option/Option.types.js';
+export { PageHeader } from './blocks/page-header/PageHeader.js';
+export { pageHeaderParts, pageHeaderDefaults } from './blocks/page-header/PageHeader.types.js';
 export { Pagination } from './core/pagination/Pagination.js';
 export { paginationParts, paginationDefaults } from './core/pagination/Pagination.types.js';
+export { PaginationDots } from './core/pagination-dots/PaginationDots.js';
+export { paginationDotsParts, paginationDotsDefaults } from './core/pagination-dots/PaginationDots.types.js';
+export { ProductHero } from './blocks/product-hero/ProductHero.js';
+export { productHeroParts, productHeroDefaults } from './blocks/product-hero/ProductHero.types.js';
 export { RemovableChip } from './core/removable-chip/RemovableChip.js';
 export { removableChipParts, removableChipDefaults } from './core/removable-chip/RemovableChip.types.js';
 export { Row } from './layout/row/Row.js';
@@ -103,6 +129,10 @@ export { TableRow } from './core/table-row/TableRow.js';
 export { tableRowParts, tableRowDefaults } from './core/table-row/TableRow.types.js';
 export { TabList } from './core/tab-list/TabList.js';
 export { tabListParts } from './core/tab-list/TabList.types.js';
+export { TestimonialRow } from './blocks/testimonial-row/TestimonialRow.js';
+export { testimonialRowParts, testimonialRowDefaults } from './blocks/testimonial-row/TestimonialRow.types.js';
+export { TestimonialSlider } from './blocks/testimonial-slider/TestimonialSlider.js';
+export { testimonialSliderParts, testimonialSliderDefaults } from './blocks/testimonial-slider/TestimonialSlider.types.js';
 export { TextArea } from './core/text-area/TextArea.js';
 export { textAreaParts, textAreaDefaults } from './core/text-area/TextArea.types.js';
 export { TextInput } from './core/text-input/TextInput.js';

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

@@ -0,0 +1,24 @@
+/**
+ * The logos a LogoColumns wall or a LogoRows section carries.
+ *
+ * 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.
+ *
+ * A record rather than a component per logo, because a logo is a picture and the name of whose it
+ * is — nothing in it is an element a page composes — and a set of them is what a partner feed or a
+ * CMS hands over.
+ */
+/** One logo on a LogoColumns wall or a LogoRows row: the mark, and the name it stands for. */
+export interface LogoTile {
+    /**
+     * Whose mark it is — "Visa", "Skrill". It is the picture's alternative text, so it is what a
+     * screen reader hears for the logo, and it has to be the name rather than "logo".
+     */
+    name: string;
+    /**
+     * The mark itself, as a path or a URL. Drawn whole inside its tile — contained, never cropped —
+     * so a wide wordmark and a square badge both show all of themselves. A mark drawn for the ground
+     * it sits on: a white wordmark for the dark band, a full-colour one for a light ground.
+     */
+    src: string;
+}

package/dist/components/logo-data.js

@@ -0,0 +1,11 @@
+/**
+ * The logos a LogoColumns wall or a LogoRows section carries.
+ *
+ * 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.
+ *
+ * A record rather than a component per logo, because a logo is a picture and the name of whose it
+ * is — nothing in it is an element a page composes — and a set of them is what a partner feed or a
+ * CMS hands over.
+ */
+export {};