@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/layout/grid/grid-impl.css

@@ -0,0 +1,62 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * The track expression, which the contract has no way to say.
+ *
+ * A token binding states a property and the role that fills it. This is arithmetic: the width
+ * each of n columns would take at the current gap, weighed against the floor a track may not go
+ * below. There is no token for a sum, and there should not be — what the sum is made of is
+ * already tokens, and the contract binds both of them to custom properties for this file to
+ * read. `--dds-grid-track` is the floor and `--dds-grid-gap` is the measure between cells, so
+ * every number below is still a decision made in the token layer. Only the shape of the
+ * calculation lives here.
+ *
+ * How it resolves. `(100% - (n - 1) * gap) / n` is exactly what one of n columns is worth at
+ * the current width. While that is wider than the floor, `max()` returns it and precisely n
+ * columns are drawn. As the region narrows it falls under the floor, `max()` returns the floor
+ * instead, and the browser fits as many of those as it can — which is fewer. That is the whole
+ * of the component's responsiveness, and there is no breakpoint in it: the layout changes
+ * because the arithmetic changed, not because a width was named.
+ *
+ * `min(100%, ...)` is the guard for a region narrower than the floor itself. Without it the
+ * track keeps its floor, the single column is wider than what holds it, and the grid overflows
+ * rather than shrinking — the failure being sideways scroll on a phone, which nothing reports.
+ *
+ * `auto-fit` rather than `auto-fill` collapses the tracks nothing landed in. Four cards asked to
+ * sit in a field of six are four cards sharing the width rather than four cards and two holes,
+ * because a field drawn around a count its content never reached reads as something missing.
+ * It is also what makes the column count a ceiling rather than a promise.
+ */
+
+:where([data-dds-context="marketing"]) .dds-grid[data-columns="2"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, max(var(--dds-grid-track), calc((100% - 1 * var(--dds-grid-gap)) / 2))), 1fr)
+  );
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-columns="3"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, max(var(--dds-grid-track), calc((100% - 2 * var(--dds-grid-gap)) / 3))), 1fr)
+  );
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-columns="4"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, max(var(--dds-grid-track), calc((100% - 3 * var(--dds-grid-gap)) / 4))), 1fr)
+  );
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-columns="6"] {
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(min(100%, max(var(--dds-grid-track), calc((100% - 5 * var(--dds-grid-gap)) / 6))), 1fr)
+  );
+}

package/dist/components/layout/row/Row.css

@@ -0,0 +1,85 @@
+/* GENERATED from row.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-row {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-align="baseline"] {
+  align-items: baseline;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-align="center"] {
+  align-items: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-align="end"] {
+  align-items: flex-end;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-align="start"] {
+  align-items: flex-start;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-align="stretch"] {
+  align-items: stretch;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-justify="between"] {
+  justify-content: space-between;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-justify="center"] {
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-justify="end"] {
+  justify-content: flex-end;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-justify="start"] {
+  justify-content: flex-start;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-wrap="false"] {
+  flex-wrap: nowrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-wrap="true"] {
+  flex-wrap: wrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="2xl"] {
+  gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="3xl"] {
+  gap: var(--space-gap-3xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="lg"] {
+  gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="md"] {
+  gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="none"] {
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="sm"] {
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="xl"] {
+  gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-row[data-gap="xs"] {
+  gap: var(--space-gap-xs);
+}
+

package/dist/components/layout/row/Row.d.ts

@@ -0,0 +1,32 @@
+import './Row.css';
+import { type RowProps } from './Row.types.js';
+export type { RowProps };
+/**
+ * A line, and one measure between the things on it.
+ *
+ * One element, which is the whole of it. The four axes reach the root as attributes, the
+ * stylesheet reads them there, and the browser does the arranging — there is nothing to compose
+ * and no state to hold.
+ *
+ * `wrap` is written as a string rather than left to React's boolean handling. A `false` boolean on
+ * a `data-` attribute renders as the string "false", which is what the stylesheet matches on, but
+ * relying on that coercion means the rule for the default case hangs on a conversion nobody
+ * declared. Both values are spelled out, so `[data-wrap="false"]` has something to match and the
+ * line is explicitly not wrapping rather than merely not told to.
+ *
+ * Nothing here knows about the viewport. The top three steps of this package's ramp are redefined
+ * below 768px in the stylesheet, so a line asks for a role and gets a narrower measure on a phone
+ * without this file, or the page that used it, containing a breakpoint.
+ *
+ * The defaults are destructured from the generated `rowDefaults` rather than typed here, so the
+ * attribute the stylesheet matches on cannot drift from the value the contract declares. Every
+ * axis is written to the root unconditionally, including when it holds its default: a rule per
+ * value means there is no bare-element case to fall through to, and an attribute left off would
+ * leave the line with no `align-items` at all rather than with the default one.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing — an id, a data attribute,
+ * a ref — and cannot set what is. `className` is not in the type at all, which is the point of the
+ * component: everything this line can be, it can be through the four props, and a page that needs
+ * a fifth thing needs a different primitive rather than a way around this one.
+ */
+export declare function Row({ gap, align, justify, wrap, children, ...rest }: RowProps): import("react").JSX.Element;

package/dist/components/layout/row/Row.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Row.css';
+import { rowDefaults, rowParts } from './Row.types.js';
+/**
+ * A line, and one measure between the things on it.
+ *
+ * One element, which is the whole of it. The four axes reach the root as attributes, the
+ * stylesheet reads them there, and the browser does the arranging — there is nothing to compose
+ * and no state to hold.
+ *
+ * `wrap` is written as a string rather than left to React's boolean handling. A `false` boolean on
+ * a `data-` attribute renders as the string "false", which is what the stylesheet matches on, but
+ * relying on that coercion means the rule for the default case hangs on a conversion nobody
+ * declared. Both values are spelled out, so `[data-wrap="false"]` has something to match and the
+ * line is explicitly not wrapping rather than merely not told to.
+ *
+ * Nothing here knows about the viewport. The top three steps of this package's ramp are redefined
+ * below 768px in the stylesheet, so a line asks for a role and gets a narrower measure on a phone
+ * without this file, or the page that used it, containing a breakpoint.
+ *
+ * The defaults are destructured from the generated `rowDefaults` rather than typed here, so the
+ * attribute the stylesheet matches on cannot drift from the value the contract declares. Every
+ * axis is written to the root unconditionally, including when it holds its default: a rule per
+ * value means there is no bare-element case to fall through to, and an attribute left off would
+ * leave the line with no `align-items` at all rather than with the default one.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing — an id, a data attribute,
+ * a ref — and cannot set what is. `className` is not in the type at all, which is the point of the
+ * component: everything this line can be, it can be through the four props, and a page that needs
+ * a fifth thing needs a different primitive rather than a way around this one.
+ */
+export function Row({ gap = rowDefaults.gap, align = rowDefaults.align, justify = rowDefaults.justify, wrap = rowDefaults.wrap, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: rowParts.root, "data-gap": gap, "data-align": align, "data-justify": justify, "data-wrap": wrap ? 'true' : 'false', children: children }));
+}

package/dist/components/layout/row/Row.types.d.ts

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface RowOwnProps {
+    /**
+     * `none` — No gap at all, for a line whose marks are meant to read as one object rather than as a list of controls. The only step here that is a decision rather than a measure
+     * `xs` — The tightest gap between related elements: a glyph and its label, a pair of words read as one, inline text pairs
+     * `sm` — The default, and what the token names for a line of sibling controls — buttons in a row, a label and the field beside it
+     * `md` — The step the token names for stacked items — form fields, feature list items, pricing features — taken across: peers that are not controls, where the control step would make them read as one object
+     * `lg` — Between content groups — feature cards, footer columns, one pricing plan beside the next
+     * `xl` — Between the parts of a card, or between a heading and the block beside it. Drops one step below 768px, a phone having a third of the width to spend
+     * `2xl` — Between one section of a page and the next, set side by side. Drops one step below 768px, a phone having a third of the width to spend
+     * `3xl` — The largest gap, for separating whole movements of a page laid out across. Drops one step below 768px, a phone having a third of the width to spend
+     */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * `start` — Items keep their own height and sit against the top of the line — a label beside a paragraph that runs to several lines, where centring would set the label against the middle of the block
+     * `center` — The default. Items are centred across the line, which is what things of different heights want — a glyph beside a label, a badge beside a title, an avatar beside a name
+     * `end` — Items keep their own height and sit against the bottom of the line
+     * `stretch` — Every item takes the full height of the line, which is what a line of cards or panels wants when they should finish level however much is in each
+     * `baseline` — The first line of text in each item sits on one line. The one alignment that exists only across a row, and the only one that holds when the items are set at different sizes — a figure and its unit, a name and the smaller label after it
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * `start` — The default. Items sit at the leading edge, and a line with no width of its own is exactly as wide as they are
+     * `center` — Items sit together in the middle of a line wider than they are
+     * `end` — Items sit against the trailing edge — the shape the actions closing a dialog or a form take, that being where a flow ends
+     * `between` — The first item at the leading edge, the last at the trailing, and whatever room is spare shared between them — a title on one side and its action on the other
+     */
+    justify?: 'start' | 'center' | 'end' | 'between';
+    /** The line may break onto another when it runs out of room, rather than squashing its items or running off the edge. For a set whose length the page cannot predict — chips a reader has added, tags on a record, a group of filters */
+    wrap?: boolean;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type RowProps = RowOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'gap' | 'align' | 'justify' | 'wrap'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const rowParts: {
+    readonly root: "dds-row";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const rowDefaults: {
+    readonly gap: "sm";
+    readonly align: "center";
+    readonly justify: "start";
+    readonly wrap: false;
+};

package/dist/components/layout/row/Row.types.js

@@ -0,0 +1,7 @@
+// GENERATED from row.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const rowParts = {
+    root: 'dds-row',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const rowDefaults = { gap: 'sm', align: 'center', justify: 'start', wrap: false };

package/dist/components/layout/scroller/Scroller.css

@@ -0,0 +1,59 @@
+/* GENERATED from scroller.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-scroller {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  min-inline-size: 0;
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-align="center"] {
+  align-items: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-align="end"] {
+  align-items: flex-end;
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-align="start"] {
+  align-items: flex-start;
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-align="stretch"] {
+  align-items: stretch;
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="2xl"] {
+  gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="3xl"] {
+  gap: var(--space-gap-3xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="lg"] {
+  gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="md"] {
+  gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="none"] {
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="sm"] {
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="xl"] {
+  gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-gap="xs"] {
+  gap: var(--space-gap-xs);
+}
+

package/dist/components/layout/scroller/Scroller.d.ts

@@ -0,0 +1,34 @@
+import './Scroller.css';
+import './scroller-impl.css';
+import { type ScrollerProps } from './Scroller.types.js';
+export type { ScrollerProps };
+/**
+ * A rail, and one measure between the things on it.
+ *
+ * One element, which is the whole of it. The two styling axes reach the root as attributes, the
+ * stylesheet reads them there, and the browser does the scrolling — there is no scroll handler, no
+ * measurement and no state. Arrow keys, Home and End all work on a focused scroll container
+ * already; this component's job is to make sure the reader can get focus onto it, not to
+ * reimplement what the platform does.
+ *
+ * `tabIndex={0}` is the whole point and the thing most rails get wrong. A scroll container whose
+ * children are all inert — cards that are not links, chips that are not buttons, pictures — gets no
+ * tab stop from the browser, so everything past the edge is unreachable by anyone not using a
+ * pointer. It is written unconditionally rather than only when the children happen to be inert,
+ * because this component cannot see what it was given: children arrive as opaque nodes, and a
+ * guess that inspected them would be wrong the first time one rendered a link of its own. An extra
+ * stop is one keypress; an unreachable region is content a reader never learns exists.
+ *
+ * `role="group"` with `aria-label` is what makes that stop mean something. Landing on an unnamed
+ * div announces nothing useful, so the name is required by the type rather than encouraged by a
+ * document.
+ *
+ * `data-snap` is written as a string rather than left to React's boolean handling, for the same
+ * reason Row spells out its `wrap`: the impl rules key on `[data-snap="true"]`, and a rule that
+ * depended on a coercion nobody declared is a rule one refactor away from silently not matching.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing and cannot set what is —
+ * the role, the name and the tab stop are all written after it, because a rail that let itself be
+ * made unfocusable would be a rail with an accessibility guarantee it does not keep.
+ */
+export declare function Scroller({ gap, align, snap, label, children, ...rest }: ScrollerProps): import("react").JSX.Element;

package/dist/components/layout/scroller/Scroller.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Scroller.css';
+import './scroller-impl.css';
+import { scrollerDefaults, scrollerParts } from './Scroller.types.js';
+/**
+ * A rail, and one measure between the things on it.
+ *
+ * One element, which is the whole of it. The two styling axes reach the root as attributes, the
+ * stylesheet reads them there, and the browser does the scrolling — there is no scroll handler, no
+ * measurement and no state. Arrow keys, Home and End all work on a focused scroll container
+ * already; this component's job is to make sure the reader can get focus onto it, not to
+ * reimplement what the platform does.
+ *
+ * `tabIndex={0}` is the whole point and the thing most rails get wrong. A scroll container whose
+ * children are all inert — cards that are not links, chips that are not buttons, pictures — gets no
+ * tab stop from the browser, so everything past the edge is unreachable by anyone not using a
+ * pointer. It is written unconditionally rather than only when the children happen to be inert,
+ * because this component cannot see what it was given: children arrive as opaque nodes, and a
+ * guess that inspected them would be wrong the first time one rendered a link of its own. An extra
+ * stop is one keypress; an unreachable region is content a reader never learns exists.
+ *
+ * `role="group"` with `aria-label` is what makes that stop mean something. Landing on an unnamed
+ * div announces nothing useful, so the name is required by the type rather than encouraged by a
+ * document.
+ *
+ * `data-snap` is written as a string rather than left to React's boolean handling, for the same
+ * reason Row spells out its `wrap`: the impl rules key on `[data-snap="true"]`, and a rule that
+ * depended on a coercion nobody declared is a rule one refactor away from silently not matching.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing and cannot set what is —
+ * the role, the name and the tab stop are all written after it, because a rail that let itself be
+ * made unfocusable would be a rail with an accessibility guarantee it does not keep.
+ */
+export function Scroller({ gap = scrollerDefaults.gap, align = scrollerDefaults.align, snap = scrollerDefaults.snap, label, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: scrollerParts.root, "data-gap": gap, "data-align": align, "data-snap": snap ? 'true' : 'false', role: "group", "aria-label": label, tabIndex: 0, children: children }));
+}

package/dist/components/layout/scroller/Scroller.types.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface ScrollerOwnProps {
+    /**
+     * `none` — No gap at all, for a rail whose marks are meant to read as one object rather than as a set. The only step here that is a decision rather than a measure
+     * `xs` — The tightest gap between related elements, for a rail read as one strip rather than as separate items
+     * `sm` — The step the token names for sibling controls — a rail of chips, filters or small marks
+     * `md` — The step the token names for stacked items, taken across: items that are peers but not controls, where the control step would run them together
+     * `lg` — The default, and what the token names for feature cards, footer columns and pricing plans — the rail of cards this is most often reached for
+     * `xl` — Between the parts of a card, taken along a rail — items that each hold a picture as well as words. Drops one step below 768px, a phone having a third of the width to spend
+     * `2xl` — Between one section of a page and the next, laid along a rail. Drops one step below 768px, a phone having a third of the width to spend
+     * `3xl` — The largest gap, for separating whole movements of a page laid along a rail. Drops one step below 768px, a phone having a third of the width to spend
+     */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * `start` — Items keep their own height and sit against the top of the rail, so a short item ends early rather than being drawn out to match its neighbours
+     * `center` — Items keep their own height and sit in the middle of the rail
+     * `end` — Items keep their own height and sit against the bottom of the rail
+     * `stretch` — The default. Every item takes the full height of the rail, so a run of cards finishes level however much is in each
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /** Each stop lands an item against the leading edge rather than wherever the gesture ended. For a rail of items of one size that the reader steps through — cards, slides, a set of positions */
+    snap?: boolean;
+    /** Always. The rail is a focusable region, so it is announced when a reader arrives at it — and without a name it announces "group" and nothing else, telling them something is there but not what. Name the set rather than the component: "Markets", "Recent trades", not "Carousel" */
+    label: string;
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type ScrollerProps = ScrollerOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'gap' | 'align' | 'snap' | 'label'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const scrollerParts: {
+    readonly root: "dds-scroller";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const scrollerDefaults: {
+    readonly gap: "lg";
+    readonly align: "stretch";
+    readonly snap: false;
+};

package/dist/components/layout/scroller/Scroller.types.js

@@ -0,0 +1,7 @@
+// GENERATED from scroller.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const scrollerParts = {
+    root: 'dds-scroller',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const scrollerDefaults = { gap: 'lg', align: 'stretch', snap: false };

package/dist/components/layout/scroller/scroller-impl.css

@@ -0,0 +1,45 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * The items do not shrink, which the contract has no way to say.
+ *
+ * The children are whatever the page passed — a card, a chip, a figure — so there is no part
+ * here to put a class on, and a rule for them is a relationship between this element and its own
+ * children rather than a property of either. `> *` is the only way to state it, and it is the
+ * same positional fact AspectRatio states about the one thing it holds.
+ *
+ * It is also the difference between a rail and a squashed Row. A flex item shrinks to fit before
+ * it ever overflows, so without this the set narrows to the width available and the rail never
+ * scrolls at all — the component doing precisely what it was reached for to prevent, and doing it
+ * with no error, no warning and nothing on screen to say a decision was reversed.
+ */
+:where([data-dds-context="marketing"]) .dds-scroller > * {
+  flex: 0 0 auto;
+}
+
+/*
+ * Snapping, which the contract cannot hold for a duller reason: `scroll-snap-type` takes two
+ * keywords — an axis and a strictness — and a structural value here is a single identifier.
+ *
+ * `inline` rather than `x`, so the axis follows the writing direction and a rail in Arabic snaps
+ * the way its reader scrolls. `mandatory` rather than `proximity` because the prop is a decision
+ * that each item is a position: proximity snaps only when the gesture happens to end near one,
+ * which reads as the rail catching at random and is worse than not snapping at all.
+ *
+ * The alignment belongs to the items and not to the rail, so it is a `> *` for the same reason as
+ * the rule above. `start` puts each item against the leading edge — the only value that keeps the
+ * rail's own reading order, where `center` would leave the first and last items unable to reach
+ * their own stops.
+ */
+:where([data-dds-context="marketing"]) .dds-scroller[data-snap="true"] {
+  scroll-snap-type: inline mandatory;
+}
+
+:where([data-dds-context="marketing"]) .dds-scroller[data-snap="true"] > * {
+  scroll-snap-align: start;
+}

package/dist/components/layout/stack/Stack.css

@@ -0,0 +1,73 @@
+/* GENERATED from stack.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-stack {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-align="center"] {
+  align-items: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-align="end"] {
+  align-items: flex-end;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-align="start"] {
+  align-items: flex-start;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-align="stretch"] {
+  align-items: stretch;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-justify="between"] {
+  justify-content: space-between;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-justify="center"] {
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-justify="end"] {
+  justify-content: flex-end;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-justify="start"] {
+  justify-content: flex-start;
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="2xl"] {
+  gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="3xl"] {
+  gap: var(--space-gap-3xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="lg"] {
+  gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="md"] {
+  gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="none"] {
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="sm"] {
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="xl"] {
+  gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-stack[data-gap="xs"] {
+  gap: var(--space-gap-xs);
+}
+

package/dist/components/layout/stack/Stack.d.ts

@@ -0,0 +1,28 @@
+import './Stack.css';
+import { type StackProps } from './Stack.types.js';
+export type { StackProps };
+/**
+ * A column, and one measure between its rows.
+ *
+ * One element, which is the whole of it. There is nothing to compose and nothing to hold state
+ * for: the three axes reach the root as attributes, the stylesheet reads them there, and the
+ * browser does the arranging. A layout primitive that rendered a wrapper around its children, or
+ * cloned them to hand each one a margin, would be paying for at render what a `gap` already does
+ * for nothing — and would break the moment a child was a fragment.
+ *
+ * Nothing here knows about the viewport. The top three steps of this package's ramp are redefined
+ * below 768px in the stylesheet, so a column asks for a role and gets a narrower measure on a
+ * phone without this file, or the page that used it, containing a breakpoint.
+ *
+ * The defaults are destructured from the generated `stackDefaults` rather than typed here, so the
+ * attribute the stylesheet matches on cannot drift from the value the contract declares. Every
+ * axis is written to the root unconditionally, including when it holds its default: a rule per
+ * value means there is no bare-element case to fall through to, and an attribute left off would
+ * leave the column with no `align-items` at all rather than with the default one.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing — an id, a data attribute,
+ * a ref — and cannot set what is. `className` is not in the type at all, which is the point of the
+ * component: everything this column can be, it can be through the three props, and a page that
+ * needs a fourth thing needs a different primitive rather than a way around this one.
+ */
+export declare function Stack({ gap, align, justify, children, ...rest }: StackProps): import("react").JSX.Element;

package/dist/components/layout/stack/Stack.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Stack.css';
+import { stackDefaults, stackParts } from './Stack.types.js';
+/**
+ * A column, and one measure between its rows.
+ *
+ * One element, which is the whole of it. There is nothing to compose and nothing to hold state
+ * for: the three axes reach the root as attributes, the stylesheet reads them there, and the
+ * browser does the arranging. A layout primitive that rendered a wrapper around its children, or
+ * cloned them to hand each one a margin, would be paying for at render what a `gap` already does
+ * for nothing — and would break the moment a child was a fragment.
+ *
+ * Nothing here knows about the viewport. The top three steps of this package's ramp are redefined
+ * below 768px in the stylesheet, so a column asks for a role and gets a narrower measure on a
+ * phone without this file, or the page that used it, containing a breakpoint.
+ *
+ * The defaults are destructured from the generated `stackDefaults` rather than typed here, so the
+ * attribute the stylesheet matches on cannot drift from the value the contract declares. Every
+ * axis is written to the root unconditionally, including when it holds its default: a rule per
+ * value means there is no bare-element case to fall through to, and an attribute left off would
+ * leave the column with no `align-items` at all rather than with the default one.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing — an id, a data attribute,
+ * a ref — and cannot set what is. `className` is not in the type at all, which is the point of the
+ * component: everything this column can be, it can be through the three props, and a page that
+ * needs a fourth thing needs a different primitive rather than a way around this one.
+ */
+export function Stack({ gap = stackDefaults.gap, align = stackDefaults.align, justify = stackDefaults.justify, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: stackParts.root, "data-gap": gap, "data-align": align, "data-justify": justify, children: children }));
+}