@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/filter-chip/FilterChip.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './FilterChip.css';
+import { Icon } from '../icon/Icon.js';
+import { filterChipDefaults, filterChipGlyphStep, filterChipParts, } from './FilterChip.types.js';
+/**
+ * A token turned on and off in place.
+ *
+ * The chip is the button. That is the whole reason this is its own component rather
+ * than a mode of a shared one: a token pressed to toggle should be the thing that is
+ * pressed, so the state it reports sits on the element carrying the role instead of
+ * on a child of it. A wrapper that was not a control would put `aria-pressed`
+ * somewhere no check could reach.
+ *
+ * Unlike product's, this one has no `dot` content. That slot held a StatusDot, and
+ * this package has no StatusDot to put in it — a marketing index does not accumulate
+ * unread changes behind a filter the way an app view does. The escape hatch covers
+ * anyone who disagrees.
+ *
+ * It takes this package's control ramp rather than a chip scale of its own. There is
+ * one ramp here, its small step was written for a field in a filter row, and a second
+ * scale existing only for chips would be a distinction no marketing page is dense
+ * enough to need.
+ */
+export function FilterChip({ selected = filterChipDefaults.selected, size = filterChipDefaults.size, content = filterChipDefaults.content, label, leadingIcon, trailingIcon, badge, custom, onSelect, onClick, ...rest }) {
+    return (_jsxs("button", { type: "button", className: filterChipParts.root, ...rest, "data-selected": String(selected), "data-size": size, "data-content": content, "aria-pressed": selected, 
+        /*
+          Both, and the consumer's first. `onSelect` reports what the chip is about to
+          become rather than that it was pressed, so a consumer writes the value back
+          without working out which way it went; `onClick` is the one every button has,
+          and swallowing it would leave anything listening the ordinary way with a chip
+          that answered nothing.
+        */
+        onClick: (event) => {
+            onClick?.(event);
+            onSelect?.(!selected);
+        }, children: [leadingIcon !== undefined && (_jsx("span", { className: filterChipParts.icon, children: _jsx(Icon, { size: filterChipGlyphStep[size], children: leadingIcon }) })), _jsx("span", { className: filterChipParts.label, children: label }), content !== 'none' && (_jsx("span", { className: filterChipParts.trailing, children: content === 'icon' ? (_jsx(Icon, { size: filterChipGlyphStep[size], children: trailingIcon })) : content === 'badge' ? (badge) : (custom) }))] }));
+}

package/dist/components/core/filter-chip/FilterChip.types.d.ts

@@ -0,0 +1,53 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface FilterChipOwnProps {
+    /** The narrowing currently applies. It is the consumer's to hold, because the list and the chip are one fact — a chip keeping its own copy is how the two come to disagree */
+    selected?: boolean;
+    /**
+     * `sm` — The default. A step under the button or field it stands beside rather than level with it, which is what keeps a row of narrowings from reading as a row of calls to action
+     * `md` — A touch-first layout, or a filter row in a hero band where the chips carry more weight. It still sits a step under a large button, which is the cost of a chip that cannot be mistaken for one — where the target matters more than the distinction, the control wanted is a button
+     */
+    size?: 'sm' | 'md';
+    /** Always, and required on that account — it is the whole of what the chip says. Short enough to read at a glance: a token carrying a sentence has stopped being one */
+    label: string;
+    /** A glyph makes the kind of narrowing faster to recognise than its name alone. It sits before the words and never replaces them. Pass the glyph itself rather than one already wrapped in an Icon: the chip wraps it at icon.size.xs at sm and icon.size.sm at md. */
+    leadingIcon?: ReactNode;
+    /** What hears the press. It reports what the chip is about to become rather than that it was pressed, so a consumer writes the value back without working out which way it went */
+    onSelect?: (selected: boolean) => void;
+}
+export type FilterChipProps = FilterChipOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'selected' | 'size' | 'content' | 'label' | 'leadingIcon' | 'trailingIcon' | 'badge' | 'custom' | 'onSelect'> & ({
+    content?: 'none' | 'icon' | 'badge' | 'custom';
+    trailingIcon: ReactNode;
+} | {
+    content?: Exclude<'none' | 'icon' | 'badge' | 'custom', 'icon'>;
+    trailingIcon?: ReactNode;
+}) & ({
+    content?: 'none' | 'icon' | 'badge' | 'custom';
+    badge: ReactNode;
+} | {
+    content?: Exclude<'none' | 'icon' | 'badge' | 'custom', 'badge'>;
+    badge?: ReactNode;
+}) & ({
+    content?: 'none' | 'icon' | 'badge' | 'custom';
+    custom: ReactNode;
+} | {
+    content?: Exclude<'none' | 'icon' | 'badge' | 'custom', 'custom'>;
+    custom?: ReactNode;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const filterChipParts: {
+    readonly root: "dds-filterchip";
+    readonly icon: "dds-filterchip__icon";
+    readonly label: "dds-filterchip__label";
+    readonly trailing: "dds-filterchip__trailing";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const filterChipDefaults: {
+    readonly selected: false;
+    readonly size: "sm";
+    readonly content: "none";
+};
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export declare const filterChipGlyphStep: {
+    readonly sm: "xs";
+    readonly md: "sm";
+};

package/dist/components/core/filter-chip/FilterChip.types.js

@@ -0,0 +1,12 @@
+// GENERATED from filter-chip.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const filterChipParts = {
+    root: 'dds-filterchip',
+    icon: 'dds-filterchip__icon',
+    label: 'dds-filterchip__label',
+    trailing: 'dds-filterchip__trailing',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const filterChipDefaults = { selected: false, size: 'sm', content: 'none' };
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export const filterChipGlyphStep = { sm: 'xs', md: 'sm' };

package/dist/components/core/footer/Footer.css

@@ -0,0 +1,104 @@
+/* GENERATED from footer.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-footer {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+  padding-block: var(--space-section-compact);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  gap: var(--space-heading-content);
+  max-inline-size: var(--size-content-max);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__masthead {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__brand {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__social {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__endorsement {
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__body {
+  align-items: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__nav {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__aside {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__bottom {
+  border-block-start-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-block-start-width: var(--border-width-hairline);
+  border-color: var(--color-border-subtle-inverse);
+  gap: var(--space-gap-lg);
+  padding-block-start: var(--space-inset-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__disclaimer {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  gap: var(--space-gap-lg);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__copyright {
+  margin: 0;
+  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);
+}
+

package/dist/components/core/footer/Footer.d.ts

@@ -0,0 +1,43 @@
+import './Footer.css';
+import './footer-impl.css';
+import { type FooterProps } from './Footer.types.js';
+export type { FooterProps };
+/**
+ * The band that closes a marketing page.
+ *
+ * Three blocks, in the order they are read: the masthead, the destinations, and the record that
+ * ends the document. What goes in them is what the page composes — the links, the groups they fall
+ * into, the disclaimer's paragraphs — because the foot of a marketing site is written by the site.
+ * What is owned here is the band itself: the ground, the measure, the order, and the space between.
+ *
+ * `root` spans the full width and `inner` holds the measure. The two are separate elements for one
+ * reason: a ground that stopped at the measure would read as a wide card sitting at the foot of the
+ * page rather than as the page ending. The centring is on the outer element, the cap on the inner.
+ *
+ * The ground is dark, and the ink is set once on the root and inherited by everything inside it. A
+ * link, a group label and a line of small print are one decision rather than three, which is the
+ * package's rule about a section that paints a ground — set the ground without the ink and the text
+ * keeps whatever the page was using and disappears.
+ *
+ * `nav` is a landmark rather than a div, and it is the part that carries the name. A page has two
+ * sets of destinations — the bar at the top and this — and a reader moving between landmarks is
+ * told which is which only if both are named. The name goes here rather than on the `<footer>`,
+ * which is already the contentinfo landmark and needs nothing said about it.
+ *
+ * `aside` sits outside that landmark deliberately. The rail holds an offer rather than a way
+ * onward, and announcing an app card as part of the navigation is telling a reader it is somewhere
+ * they can go.
+ *
+ * The columns are laid out by a `Grid` this renders, not by one the page supplies. The count is the
+ * footer's and arrives as `columns`; the arithmetic that turns a count into tracks which fold as the
+ * region narrows is Grid's, and reimplementing it here would be a second copy of a calculation that
+ * is hard to get right once. Composing it is how the family stays closed — `<Footer>` takes
+ * `FooterGroup`s and `Link`s directly, the way Table takes rows and Navbar takes items, rather than
+ * asking every caller to wrap them in something first.
+ *
+ * Every region is optional, the closing line included. It was required once, on the reading that a
+ * marketing page always carries a notice — true of most and not of all, and a required prop is the
+ * component insisting on a sentence it cannot write. Absence is the switch and an empty string is
+ * absence, which is what `given` is for.
+ */
+export declare function Footer({ label, columns, copyright, brand, social, endorsement, aside, disclaimer, children, }: FooterProps): import("react").JSX.Element;

package/dist/components/core/footer/Footer.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from 'react';
+import './Footer.css';
+import './footer-impl.css';
+import { given } from '../../given.js';
+import { Grid } from '../../layout/grid/Grid.js';
+import { Link } from '../link/Link.js';
+import { footerDefaults, footerParts } from './Footer.types.js';
+/**
+ * The band that closes a marketing page.
+ *
+ * Three blocks, in the order they are read: the masthead, the destinations, and the record that
+ * ends the document. What goes in them is what the page composes — the links, the groups they fall
+ * into, the disclaimer's paragraphs — because the foot of a marketing site is written by the site.
+ * What is owned here is the band itself: the ground, the measure, the order, and the space between.
+ *
+ * `root` spans the full width and `inner` holds the measure. The two are separate elements for one
+ * reason: a ground that stopped at the measure would read as a wide card sitting at the foot of the
+ * page rather than as the page ending. The centring is on the outer element, the cap on the inner.
+ *
+ * The ground is dark, and the ink is set once on the root and inherited by everything inside it. A
+ * link, a group label and a line of small print are one decision rather than three, which is the
+ * package's rule about a section that paints a ground — set the ground without the ink and the text
+ * keeps whatever the page was using and disappears.
+ *
+ * `nav` is a landmark rather than a div, and it is the part that carries the name. A page has two
+ * sets of destinations — the bar at the top and this — and a reader moving between landmarks is
+ * told which is which only if both are named. The name goes here rather than on the `<footer>`,
+ * which is already the contentinfo landmark and needs nothing said about it.
+ *
+ * `aside` sits outside that landmark deliberately. The rail holds an offer rather than a way
+ * onward, and announcing an app card as part of the navigation is telling a reader it is somewhere
+ * they can go.
+ *
+ * The columns are laid out by a `Grid` this renders, not by one the page supplies. The count is the
+ * footer's and arrives as `columns`; the arithmetic that turns a count into tracks which fold as the
+ * region narrows is Grid's, and reimplementing it here would be a second copy of a calculation that
+ * is hard to get right once. Composing it is how the family stays closed — `<Footer>` takes
+ * `FooterGroup`s and `Link`s directly, the way Table takes rows and Navbar takes items, rather than
+ * asking every caller to wrap them in something first.
+ *
+ * Every region is optional, the closing line included. It was required once, on the reading that a
+ * marketing page always carries a notice — true of most and not of all, and a required prop is the
+ * component insisting on a sentence it cannot write. Absence is the switch and an empty string is
+ * absence, which is what `given` is for.
+ */
+export function Footer({ label, columns = footerDefaults.columns, copyright, brand, social, endorsement, aside, disclaimer, children, }) {
+    return (_jsx("footer", { className: footerParts.root, children: _jsxs("div", { className: footerParts.inner, children: [_jsxs("div", { className: footerParts.masthead, children: [brand ? _jsx("div", { className: footerParts.brand, children: brand }) : null, social ? _jsx("div", { className: footerParts.social, children: social }) : null, endorsement ? _jsx("div", { className: footerParts.endorsement, children: endorsement }) : null] }), _jsxs("div", { className: footerParts.body, children: [_jsx("nav", { className: footerParts.nav, "aria-label": label, children: _jsx(Grid, { columns: columns, min: "sm", align: "start", gap: "xl", children: Children.map(children, (child) => isValidElement(child) && child.type === Link
+                                    ? cloneElement(child, {
+                                        variant: child.props.variant ?? 'list',
+                                    })
+                                    : child) }) }), aside ? _jsx("div", { className: footerParts.aside, children: aside }) : null] }), _jsxs("div", { className: footerParts.bottom, children: [disclaimer ? _jsx("div", { className: footerParts.disclaimer, children: disclaimer }) : null, given(copyright) ? _jsx("p", { className: footerParts.copyright, children: copyright }) : null] })] }) }));
+}

package/dist/components/core/footer/Footer.types.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react';
+export interface FooterOwnProps {
+    /** Always — it names the navigation landmark, and a page with two unnamed ones tells a screen-reader user there is navigation in both places without saying how they differ. Name the set rather than the act: 'Footer', not 'Footer navigation' — the role already supplies the word, and a name carrying it is announced twice */
+    label: string;
+    /**
+     * `2` — A short footer, or one whose sets run long
+     * `3` — The middle case, and the one a site with a rail beside its columns often wants
+     * `4` — The default, and the widest the band goes. With the rail beside them that is five regions across
+     */
+    columns?: '2' | '3' | '4';
+    /** The line the band closes on, where the site carries one. Pass the sentence the site uses, the year included: this formats nothing and computes nothing.
+  
+  Optional, which it did not used to be. The argument for requiring it was that a marketing page has one whether or not anyone remembered to pass it, and a footer that rendered without it looks finished while missing the one sentence it exists to carry. That holds for a page that has a notice to give — it does not hold for a site that puts its ownership somewhere else, and a required prop is the component insisting on a sentence it cannot write. */
+    copyright?: string;
+    /** The footer opens with the site's mark, which is the common case — usually the logo, often with a line about the company under it */
+    brand?: ReactNode;
+    /** The accounts the company keeps elsewhere, at the head of the band beside the mark. They are about the company rather than about the site, which is why they sit with the mark and not among the destinations */
+    social?: ReactNode;
+    /** A mark somebody else awarded — an accreditation, a standard the company holds. At the far end of the masthead, away from the company's own mark, because a badge beside a logo reads as part of the logo */
+    endorsement?: ReactNode;
+    /** The rail beside the destinations: the app cards, a download, a partner mark. The one part of the band that is an offer rather than a way onward, which is why it is kept out of the columns instead of being a set among them */
+    aside?: ReactNode;
+    /** The site is obliged to carry regulatory or legal wording — the risk warning, the licensing statement, the entity that holds the licence. Passed as nodes rather than a string because it runs to paragraphs and usually carries links */
+    disclaimer?: ReactNode;
+    /** Allowed: FooterGroup, Stack, Link */
+    children: ReactNode;
+}
+export type FooterProps = FooterOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const footerParts: {
+    readonly root: "dds-footer";
+    readonly inner: "dds-footer__inner";
+    readonly masthead: "dds-footer__masthead";
+    readonly brand: "dds-footer__brand";
+    readonly social: "dds-footer__social";
+    readonly endorsement: "dds-footer__endorsement";
+    readonly body: "dds-footer__body";
+    readonly nav: "dds-footer__nav";
+    readonly aside: "dds-footer__aside";
+    readonly bottom: "dds-footer__bottom";
+    readonly disclaimer: "dds-footer__disclaimer";
+    readonly copyright: "dds-footer__copyright";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const footerDefaults: {
+    readonly columns: "4";
+};

package/dist/components/core/footer/Footer.types.js

@@ -0,0 +1,18 @@
+// GENERATED from footer.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const footerParts = {
+    root: 'dds-footer',
+    inner: 'dds-footer__inner',
+    masthead: 'dds-footer__masthead',
+    brand: 'dds-footer__brand',
+    social: 'dds-footer__social',
+    endorsement: 'dds-footer__endorsement',
+    body: 'dds-footer__body',
+    nav: 'dds-footer__nav',
+    aside: 'dds-footer__aside',
+    bottom: 'dds-footer__bottom',
+    disclaimer: 'dds-footer__disclaimer',
+    copyright: 'dds-footer__copyright',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const footerDefaults = { columns: '4' };

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

@@ -0,0 +1,218 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+@container (min-width: 48rem) {
+  /*
+   * Wide enough for rows.
+   *
+   * The band declares `container-type`, so this asks the footer's own width rather than the
+   * window's — a footer placed in a narrow region of a wide page stays stacked, which a media
+   * query could not tell. `48rem` longhand because `var()` is not allowed in a container query
+   * condition, and it is the same width the groups stop collapsing at: one fold for the whole
+   * band rather than two that can drift apart.
+   *
+   * Written a class deeper than they look, which is what bottom-sheet-impl.css does and for the
+   * same reason: three classes against the generated rules' two, so these win on weight rather
+   * than on which sheet the bundler happened to write last. The extra class is `inner`, which is
+   * genuinely the parent of both — it narrows nothing and selects nothing new.
+   *
+   * An attribute would have been shorter and was wrong: `columns` is a prop the footer hands to
+   * Grid, not a styling axis, so no `data-columns` reaches the root and a selector naming one
+   * matches nothing at all.
+   */
+  /*
+   * Three cells, and the middle one is centred on the band.
+   *
+   * `space-between` was the first answer and only looks centred when the two outer regions happen
+   * to be the same width. They are not: a wordmark is fifty-nine pixels and the badge beside it is
+   * a card, so the marks sat left of centre by half the difference — off by enough to read as a
+   * mistake and not by enough to read as a decision.
+   *
+   * `1fr auto 1fr` makes the outer cells equal whatever is in them, so the middle is centred on the
+   * band rather than on the space the other two leave. Each region names its own column, which is
+   * what keeps it true when one of them is absent — both ends are optional, and with auto-placement
+   * a missing mark would slide the social row into the first cell.
+   */
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner .dds-footer__masthead {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner .dds-footer__brand {
+    grid-column: 1;
+    justify-self: start;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner .dds-footer__social {
+    grid-column: 2;
+    justify-self: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner .dds-footer__endorsement {
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  /*
+   * Five equal cells, four for the sets and one for the rail.
+   *
+   * A flex row gave the rail whatever width it was told to take and let the sets divide the rest,
+   * so the band had two rhythms: link columns at 195 and a rail at 320. As a grid of `1fr` the
+   * fifth cell is the same width as the other four, and the only thing holding that true is that
+   * `body` steps by the same `space.gap.xl` the grid inside `nav` uses — at a narrower step the
+   * rail's cell comes out nine pixels wider than a column.
+   *
+   * `nav` spans the first four rather than the rail being placed last, because the rail is the
+   * optional one: with it absent the sets should still have the whole band, which a span gives and
+   * an explicit fifth column would not.
+   */
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner .dds-footer__body {
+    align-items: start;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner .dds-footer__nav {
+    grid-column: span 4;
+  }
+
+  /*
+   * And the whole band when there is no rail.
+   *
+   * A span of four in a five-track grid leaves the fifth track sitting there at its equal share:
+   * with `aside` absent the sets took four fifths of the band and a fifth of it was nothing, plus
+   * the gap. The span was chosen precisely so the sets would spread — it does not, and the comment
+   * above claiming it did was wrong until this rule existed.
+   *
+   * `:not(:has())` asks the question the DOM can answer: this body, holding no rail.
+   */
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__inner .dds-footer__body:not(:has(.dds-footer__aside)) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+@container (max-width: 47.9375rem) {
+  /*
+   * The sets close up against each other once they are a single column.
+   *
+   * Stacked, each set is one row a reader scans down — and the grid's own step between groups is
+   * sized for the space beside a column, not the space under a row. Twenty-four of it beneath a
+   * thirty-six-pixel row put sixty pixels between one word and the next, which is six sets that no
+   * longer read as a list. Eight was the correction and went too far the other way, closing the
+   * rows up until the column read as one block; sixteen is the step between, and it is the same
+   * one the open list uses between its own destinations.
+   *
+   * This reaches into `.dds-grid`, which is a component styling another component's root, and it is
+   * the one rule here that should not have to exist. Grid takes a single `gap` that sets both axes,
+   * so a footer that wants columns held apart and rows held together has no prop to say it with.
+   * The proper fix is a `rowGap` on Grid; until that exists this is the honest version of the
+   * workaround, named rather than hidden behind a `> *` that would depend on the same thing while
+   * looking like it did not.
+   *
+   * `.dds-stack` for the same reason and the same cost. A column of this footer holds two or three
+   * sets grouped in a Stack — that is what the contract allows and what the real arrangement needs
+   * — and a Stack has one `gap` for an axis that only ever runs one way. Without this the sets
+   * inside a column kept twenty-four on a phone while the sets between columns took sixteen, which
+   * is one list at two rhythms.
+   */
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__nav .dds-grid,
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__nav .dds-stack {
+    /*
+     * One column, said rather than arrived at.
+     *
+     * The grid would drop to one on its own only if its track floor happened to be wider than half
+     * the screen, which is a layout holding because of a sum nobody wrote down — and it broke the
+     * moment the floor had to come down so four columns and the rail could fit at full width. A
+     * stacked band is one column because that is the design, not because of an inequality.
+     */
+    grid-template-columns: 1fr;
+    row-gap: var(--space-gap-md);
+  }
+}
+
+/*
+ * The marks in the social row rest a little back, and come forward under the pointer.
+ *
+ * Opacity rather than ink, which is the one case this package's own guidance does not cover: a
+ * quiet thing is supposed to say so in a colour role, and these cannot. A brand mark is somebody
+ * else's artwork with its own colours fixed into it — there is no ink to quieten — so the only
+ * lever left is how much of the band shows through it.
+ *
+ * Solid is written as `1` rather than a role. There is no `--opacity-100` custom property — only
+ * the semantic roles are emitted, and `opacity.100` is a primitive — so naming one would have been
+ * an undefined variable quietly falling back to the initial value, which is the same number by
+ * accident. One is the absence of transparency, the way `0` is the absence of a length.
+ *
+ * On the row's children rather than on the row, because what is hovered is one mark and not the
+ * set. They are nodes the page passes rather than parts this contract declares, which is why the
+ * rule reaches for `> *` instead of a class: whatever a page puts in this slot, the treatment is
+ * the slot's.
+ */
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__social > * {
+  opacity: var(--opacity-muted);
+  transition-property: opacity;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__social > *:hover {
+  opacity: 1;
+}
+
+/*
+ * A touch screen reports a hover that never ends, so the last mark tapped would stay solid while
+ * the rest sat back — a row saying a reader is somewhere they left. Where there is no pointer the
+ * marks are simply all solid, which is the honest reading of a set nobody is pointing at.
+ */
+@media (hover: none) {
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__social > * {
+    opacity: 1;
+  }
+}
+
+/* The transition above is hand-written, so the reduced-motion block the generated stylesheet
+   writes from its bindings does not cover it. A reader who asked for less movement asked for this
+   too — the opacity still changes, it simply arrives rather than travels. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-footer .dds-footer__social > * {
+    transition: none;
+  }
+}
+
+/*
+ * A region with nothing in it takes no room.
+ *
+ * `masthead` and `bottom` are always in the markup, because every region inside them is optional
+ * and `presentWhen` names a single prop — the contract has no way to say "present when any of
+ * these", and an implementation that conditioned them anyway would be markup disagreeing with its
+ * own contract, which the generated behaviour test refuses outright.
+ *
+ * So the folding happens here. `:not(:has(*))` is "holds no element", which is exactly the case:
+ * both are containers of other parts and never of bare text. Left drawn, an empty `bottom` is the
+ * band's only hairline rule with nothing above or below it, and an empty `masthead` is the inner
+ * column's own step of air at the top of the band.
+ */
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__masthead:not(:has(*)),
+:where([data-dds-context="marketing"]) .dds-footer .dds-footer__bottom:not(:has(*)) {
+  display: none;
+}
+
+/*
+ * A focus ring the band cannot show.
+ *
+ * Link draws its ring in `color.border.focus`, which is #0C0C0C — near-black, chosen against a
+ * white page. On this band that is 1.05:1, which is not a faint ring but no ring at all, and a
+ * keyboard reader loses their place the moment they enter the footer. FooterGroup's trigger binds
+ * the inverse role already; the destinations were reached through Link and so were missed.
+ *
+ * Here rather than in either contract because neither can say it: Link cannot know what it has
+ * been put on, and Footer cannot bind a property of a component it does not declare.
+ */
+:where([data-dds-context="marketing"]) .dds-footer .dds-link:focus-visible {
+  outline-color: var(--color-border-focus-inverse);
+}