@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/dist/components/core/checkbox/Checkbox.js

@@ -0,0 +1,97 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useId } from 'react';
+import { CircleCheckSolidIcon, CircleExclamationSolidIcon, TriangleExclamationSolidIcon, } from '@deriv-com/quill-icons-web';
+import './Checkbox.css';
+import './checkbox-impl.css';
+import { given } from '../../given.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+import { Icon } from '../icon/Icon.js';
+import { checkboxDefaults, checkboxParts } from './Checkbox.types.js';
+/**
+ * What each reported status looks like.
+ *
+ * Circle for error, triangle for warning: the two colours are close enough that a
+ * red-green deficiency can converge them, so the shape is what separates the pair at a
+ * glance and neither should be varied to match the other.
+ *
+ * Declared here rather than imported, which is this package's shape — marketing has no
+ * shared glyph module and TextInput states the same three the same way. A fourth copy
+ * would be the point at which one is worth making; three is not it yet.
+ */
+const statusGlyph = {
+    error: _jsx(CircleExclamationSolidIcon, {}),
+    warning: _jsx(TriangleExclamationSolidIcon, {}),
+    success: _jsx(CircleCheckSolidIcon, {}),
+};
+/**
+ * A real `<input type="checkbox">`, invisible, with the box the user sees drawn as
+ * its sibling.
+ *
+ * The tick lives inside `box`, which is a `<span>`, and the input covers the box rather
+ * than containing anything. So every part here is a real element the generator can name,
+ * *and* the control is native: it submits with a form, it takes the keyboard for free,
+ * and it carries the mixed state properly.
+ *
+ * That is why nothing below writes `role` or `aria-checked` by hand. The element is
+ * already a checkbox and already announces its state.
+ *
+ * It carries its own status and its own description. A lone consent is the case with
+ * nothing above it to hold either, and one that cannot show its own error is a form the
+ * reader cannot be told they failed.
+ */
+export function Checkbox({ tone = checkboxDefaults.tone, checked = checkboxDefaults.checked, status = checkboxDefaults.status, label, showLabel = checkboxDefaults.showLabel, description, statusMessage, id, onChange, ...rest }) {
+    const generatedId = useId();
+    // The label is a sibling rather than a wrapper, so the two need an id to be tied
+    // together. A consumer's own id wins — theirs may be what a form's error summary
+    // links to.
+    const fieldId = id ?? generatedId;
+    // Gated on the status rather than on the message having text. A box reporting an error
+    // with an empty message is a state the contract forbids, and empty is the honest
+    // rendering of a broken state.
+    const reporting = status !== 'none';
+    const showsMessage = reporting && given(statusMessage);
+    /*
+     * `given` rather than `!== undefined`, and the shared one rather than a fourth copy:
+     * absence is the switch for these props, so an empty or whitespace string has to count
+     * as absent. The preview's controls set '' when a designer clears a field rather than
+     * dropping the prop, which is how an empty line and the gap above it get left behind.
+     */
+    const describes = given(description);
+    /*
+     * Both, and in the order they are read on screen. A description says what ticking the
+     * box commits you to; a message says what is wrong with the answer — different things,
+     * so they stack rather than replace one another.
+     *
+     * A consumer's own reference is merged in rather than overwritten, so one they added
+     * cannot be dropped by this component having something to say.
+     */
+    const describedBy = [
+        describes ? `${fieldId}-description` : null,
+        showsMessage ? `${fieldId}-message` : null,
+        rest['aria-describedby'],
+    ]
+        .filter(Boolean)
+        .join(' ') || undefined;
+    /*
+     * `indeterminate` is a DOM property with no HTML attribute, so JSX cannot set it and
+     * this callback is the only way in.
+     *
+     * Deliberately not `aria-checked="mixed"` alongside it: a native checkbox already
+     * announces mixed from this property, and the explicit attribute would both repeat it
+     * and be free to contradict it — it does not clear itself when the property does.
+     */
+    const fieldRef = useCallback((node) => {
+        if (node !== null)
+            node.indeterminate = checked === 'indeterminate';
+    }, [checked]);
+    return (_jsxs("div", { className: checkboxParts.root, "data-tone": tone, "data-checked": checked, "data-status": status, children: [_jsxs("div", { className: checkboxParts.control, children: [_jsxs("span", { className: checkboxParts.box, children: [_jsx("input", { ...rest, ref: fieldRef, id: fieldId, type: "checkbox", className: checkboxParts.field, checked: checked === 'checked', onChange: onChange, 
+                                // React warns that a checked field without a handler is read-only, and it is
+                                // right: the state is the consumer's, and one that passes no handler has built
+                                // a checkbox nobody can change. Saying so is better than the warning.
+                                readOnly: onChange === undefined ? true : undefined, "aria-invalid": status === 'error' || undefined, "aria-describedby": describedBy }), _jsx("span", { className: checkboxParts.indicator, "aria-hidden": "true", children: checked === 'unchecked' ? null : (_jsx("svg", { viewBox: "0 0 24 24", width: "100%", height: "100%", fill: "none", focusable: "false", children: _jsx("path", { 
+                                        // A tick when chosen; a dash when the boxes this one summarises disagree.
+                                        // One horizontal stroke rather than a smaller square, because a filled box
+                                        // with something smaller inside it reads as a radio button gone wrong.
+                                        d: checked === 'checked' ? 'M5 12.5 10 17.5 19 7' : 'M6 12h12', stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), _jsxs("div", { className: checkboxParts.text, children: [_jsx("label", { className: checkboxParts.label, htmlFor: fieldId, style: showLabel ? undefined : visuallyHidden, children: label }), describes ? (_jsx("span", { id: `${fieldId}-description`, className: checkboxParts['description-text'], children: description })) : null] })] }), showsMessage ? (_jsxs("span", { id: `${fieldId}-message`, className: checkboxParts.message, children: [_jsx(Icon, { size: "xs", children: statusGlyph[status] }), statusMessage] })) : null] }));
+}

package/dist/components/core/checkbox/Checkbox.types.d.ts

@@ -0,0 +1,46 @@
+import type { InputHTMLAttributes } from 'react';
+export interface CheckboxOwnProps {
+    /**
+     * `standard` — The default, and almost always right — the ticked box fills with the neutral that outranks everything around it, so the choice is legible before any colour is read and it is the fill every other chosen control in this package takes, which is what lets a form of them read as one set of answers
+     * `accent` — The checkbox is the brand moment of the view — a single consent the design is deliberately drawing the eye to — and the surrounding design already carries brand red
+     */
+    tone?: 'standard' | 'accent';
+    /**
+     * `unchecked` — The default — the choice has not been made, or has been made against
+     * `checked` — The user has made this choice, or it arrives pre-made and they may change it
+     * `indeterminate` — A box that summarises others, where some but not all of them are ticked — a Select all above a partly selected list
+     */
+    checked?: 'unchecked' | 'checked' | 'indeterminate';
+    /** Always — it states what ticking the box agrees to, and the box shows nothing on its own. A phrase the user can read as a claim they are agreeing with: "Send me trade confirmations", not "Confirmations". Sentence case, and no full stop — a label is a phrase rather than a sentence, and a stop at the end of one reads as the start of prose. In a set, phrase every box the same way, so a reader compares the answers rather than the grammar */
+    label: string;
+    /** Drawing the words, which is nearly always. A checkbox on its own is a question, and a question with no words is not one */
+    showLabel?: boolean;
+    /** Ticking the box commits the user to something the label cannot carry without becoming a sentence — what it costs, how often it happens, what it applies to. On a box that summarises others it is where the summary belongs: "Four of six are on" says what an indeterminate tick cannot */
+    description?: string;
+}
+export type CheckboxProps = CheckboxOwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'tone' | 'checked' | 'status' | 'label' | 'showLabel' | 'description' | 'statusMessage'> & ({
+    status?: 'none' | 'error' | 'warning' | 'success';
+    statusMessage: string;
+} | {
+    status?: Exclude<'none' | 'error' | 'warning' | 'success', 'error' | 'warning'>;
+    statusMessage?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const checkboxParts: {
+    readonly root: "dds-checkbox";
+    readonly control: "dds-checkbox__control";
+    readonly box: "dds-checkbox__box";
+    readonly field: "dds-checkbox__field";
+    readonly indicator: "dds-checkbox__indicator";
+    readonly text: "dds-checkbox__text";
+    readonly label: "dds-checkbox__label";
+    readonly 'description-text': "dds-checkbox__description-text";
+    readonly message: "dds-checkbox__message";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const checkboxDefaults: {
+    readonly tone: "standard";
+    readonly checked: "unchecked";
+    readonly status: "none";
+    readonly showLabel: true;
+};

package/dist/components/core/checkbox/Checkbox.types.js

@@ -0,0 +1,15 @@
+// GENERATED from checkbox.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const checkboxParts = {
+    root: 'dds-checkbox',
+    control: 'dds-checkbox__control',
+    box: 'dds-checkbox__box',
+    field: 'dds-checkbox__field',
+    indicator: 'dds-checkbox__indicator',
+    text: 'dds-checkbox__text',
+    label: 'dds-checkbox__label',
+    'description-text': 'dds-checkbox__description-text',
+    message: 'dds-checkbox__message',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const checkboxDefaults = { tone: 'standard', checked: 'unchecked', status: 'none', showLabel: true };

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

@@ -0,0 +1,90 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines this rule without contributing
+ * specificity, so the override below still ties or beats exactly what it did before —
+ * it is written a class deeper than it looks in order to match generated CSS, and a
+ * scope that carried weight would break it.
+ */
+
+/*
+ * Implementation CSS the contract cannot express.
+ *
+ * A `structure` rule's `when` must name a styling axis, and `description` is not one.
+ * Making it one would emit a rule per value and multiply every cell of the variant grid
+ * for a single alignment declaration.
+ *
+ * What it decides is where the box sits against the words, and the answer differs by what
+ * the second line is. Flush with the first line is right when the label wrapped: a box
+ * floating to the middle of three lines is level with none of them, and the line it names
+ * is the first. Centred is right when the second line is a description, because then the
+ * box belongs to the pair rather than to the first half of it.
+ *
+ * `:has()` is what makes that possible and also the limit of it. CSS can see that a
+ * description exists; it cannot see that the label took two lines. So a wrapping label
+ * that *also* carries a description centres, which is the one arrangement of the four
+ * this rule gets wrong. Written down because it is a known edge rather than an oversight
+ * — the fix would be a line count, and there is no such selector.
+ *
+ * Three classes deep deliberately. The generated rule that sets flex-start is two, and
+ * `:has()` takes the specificity of its argument, so a two-class selector here would tie
+ * and leave source order to decide it.
+ */
+:where([data-dds-context='marketing'])
+  .dds-checkbox
+  .dds-checkbox__control:has(.dds-checkbox__description-text) {
+  align-items: center;
+}
+
+/*
+ * And where the box sits on the line, which is the other thing no token can say.
+ *
+ * Product's label is font.body.md at fourteen, so its line box is twenty-one and the
+ * twenty-pixel square is half a pixel off the middle of it — near enough that nothing
+ * carries the difference. Marketing's body.md is sixteen. The line is twenty-four, the
+ * square is still twenty, and `align-items: flex-start` puts the box's top edge on the
+ * line box's top edge, which leaves it two pixels above the letters it belongs to.
+ *
+ * The square stays twenty because that is the mark's size, not the line's: at
+ * twenty-four it filled the line and read as a panel beside the words rather than a box
+ * in front of them. So the measure is left alone and the position is corrected.
+ *
+ * Half the difference between the line and the box, taken from the two of them rather
+ * than written down: `1lh` is the box's own computed line-height, which it inherits from
+ * the row and which is the label's, and the token is the box's own. Retune either and
+ * this follows. A browser without `lh` drops the declaration and gets the two pixels
+ * back, which is the behaviour this replaces rather than something worse.
+ *
+ * Only where the row is not already centred. With a description the control centres the
+ * box on the pair, and an offset on top of that would push it below the middle it was
+ * just put in.
+ */
+:where([data-dds-context='marketing'])
+  .dds-checkbox
+  .dds-checkbox__control:not(:has(.dds-checkbox__description-text))
+  > .dds-checkbox__box {
+  margin-block-start: calc((1lh - var(--size-checkbox-box)) / 2);
+}
+
+/*
+ * And the same correction for the mark beside the message, for the same reason.
+ *
+ * `align-items: flex-start` on the message is the contract's, and right: a message that
+ * runs to two lines wants its glyph on the first of them rather than floating to the
+ * middle of the pair. What it aligns is the top edges, though, and the glyph is sixteen
+ * against a line box of twenty-one — so the mark sat two and a half pixels above the
+ * words it belongs to, on every status.
+ *
+ * Product's message is font.body-strong.sm at twelve, an eighteen-pixel line, so the
+ * same glyph is a pixel out there and nobody reads it. This package sets the message in
+ * font.body.sm at fourteen, which is what makes the difference visible — the same step
+ * up that put the box two pixels off its label.
+ *
+ * `1lh` is the line the glyph is sitting in, read from the message it inherits from.
+ * `--icon-size-xs` is the step the component asks Icon for a few lines above; the two
+ * have to be changed together, which is worth saying out loud because nothing here
+ * enforces it.
+ */
+:where([data-dds-context='marketing']) .dds-checkbox .dds-checkbox__message > .dds-icon {
+  margin-block-start: calc((1lh - var(--icon-size-xs)) / 2);
+}

package/dist/components/core/divider/Divider.css

@@ -0,0 +1,41 @@
+/* GENERATED from divider.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-divider {
+  align-items: center;
+  display: flex;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider .dds-divider__line {
+  flex: auto;
+  flex-basis: 0;
+  background-color: var(--color-border-subtle);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider .dds-divider__label {
+  white-space: nowrap;
+  color: var(--color-fg-tertiary);
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="horizontal"] {
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="vertical"] {
+  align-self: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="horizontal"] .dds-divider__line {
+  block-size: var(--border-width-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-divider[data-orientation="vertical"] .dds-divider__line {
+  inline-size: var(--border-width-default);
+}
+

package/dist/components/core/divider/Divider.d.ts

@@ -0,0 +1,46 @@
+import './Divider.css';
+import { type DividerProps } from './Divider.types.js';
+export type { DividerProps };
+/**
+ * A rule between two groups, and one shape for both the bare case and the labelled one.
+ *
+ * The line is a child rather than a border on the root, because a labelled divider
+ * needs two of them and a border cannot be halved. That makes the bare case one
+ * element more than an `<hr>` would be, and buys a component whose ink and thickness
+ * are bound in exactly one place — and a labelled divider that is this component
+ * rather than a second one wearing the same name.
+ *
+ * Three renderings, and the difference between them is entirely what reaches the
+ * accessibility tree:
+ *
+ * A bare divider is `role="separator"`, which is what says the groups either side of
+ * it are different groups. Vertical adds `aria-orientation`, and horizontal
+ * deliberately does not: a separator is horizontal by default, so writing it there
+ * would be stating the default out loud.
+ *
+ * A labelled divider is not a separator at all. A non-focusable separator's children
+ * are presentational to a screen reader — the ARIA spec's own list — so a word inside
+ * one is drawn and never announced, which is the exact opposite of why anybody puts a
+ * word in a divider. With the role dropped, the word is ordinary text on the page and
+ * is read as such, and the two lines either side of it are decoration, which is all
+ * they ever were. `aria-orientation` goes with the role rather than staying behind: an
+ * orientation on a box that is not a separator describes nothing.
+ *
+ * A decorative divider is hidden outright. `aria-hidden` rather than
+ * `role="presentation"`: the bare case has no children to worry about, so the two
+ * would be equivalent here — but this component can hold a child, and
+ * `role="presentation"` does not travel to one. The type makes that pairing
+ * impossible, and the attribute that survives a future where it is not is the one to
+ * write now.
+ *
+ * The label is read for truth rather than for presence. `presentWhen` in the contract
+ * names the prop, and the generated test renders `label=""` and asserts the part is
+ * *not* there — an empty string is a word nobody typed, and a span holding nothing
+ * would still open the root's gap on both sides of it and split the rule in two
+ * around a space.
+ *
+ * The spread goes first, so a consumer can override what is not load-bearing and
+ * cannot override what is. Everything this component decides about semantics is
+ * written after it.
+ */
+export declare function Divider({ orientation, decorative, label, ...rest }: DividerProps): import("react").JSX.Element;

package/dist/components/core/divider/Divider.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import './Divider.css';
+import { dividerDefaults, dividerParts } from './Divider.types.js';
+/**
+ * A rule between two groups, and one shape for both the bare case and the labelled one.
+ *
+ * The line is a child rather than a border on the root, because a labelled divider
+ * needs two of them and a border cannot be halved. That makes the bare case one
+ * element more than an `<hr>` would be, and buys a component whose ink and thickness
+ * are bound in exactly one place — and a labelled divider that is this component
+ * rather than a second one wearing the same name.
+ *
+ * Three renderings, and the difference between them is entirely what reaches the
+ * accessibility tree:
+ *
+ * A bare divider is `role="separator"`, which is what says the groups either side of
+ * it are different groups. Vertical adds `aria-orientation`, and horizontal
+ * deliberately does not: a separator is horizontal by default, so writing it there
+ * would be stating the default out loud.
+ *
+ * A labelled divider is not a separator at all. A non-focusable separator's children
+ * are presentational to a screen reader — the ARIA spec's own list — so a word inside
+ * one is drawn and never announced, which is the exact opposite of why anybody puts a
+ * word in a divider. With the role dropped, the word is ordinary text on the page and
+ * is read as such, and the two lines either side of it are decoration, which is all
+ * they ever were. `aria-orientation` goes with the role rather than staying behind: an
+ * orientation on a box that is not a separator describes nothing.
+ *
+ * A decorative divider is hidden outright. `aria-hidden` rather than
+ * `role="presentation"`: the bare case has no children to worry about, so the two
+ * would be equivalent here — but this component can hold a child, and
+ * `role="presentation"` does not travel to one. The type makes that pairing
+ * impossible, and the attribute that survives a future where it is not is the one to
+ * write now.
+ *
+ * The label is read for truth rather than for presence. `presentWhen` in the contract
+ * names the prop, and the generated test renders `label=""` and asserts the part is
+ * *not* there — an empty string is a word nobody typed, and a span holding nothing
+ * would still open the root's gap on both sides of it and split the rule in two
+ * around a space.
+ *
+ * The spread goes first, so a consumer can override what is not load-bearing and
+ * cannot override what is. Everything this component decides about semantics is
+ * written after it.
+ */
+export function Divider({ orientation = dividerDefaults.orientation, decorative = dividerDefaults.decorative, label, ...rest }) {
+    // A word, rather than a prop that was passed. See above: "" is not a label.
+    const labelled = typeof label === 'string' && label !== '';
+    const separator = !decorative && !labelled;
+    return (_jsxs("div", { ...rest, className: dividerParts.root, "data-orientation": orientation, role: separator ? 'separator' : undefined, "aria-orientation": separator && orientation === 'vertical' ? 'vertical' : undefined, "aria-hidden": decorative ? true : undefined, children: [_jsx("span", { className: dividerParts.line }), labelled ? (_jsxs(_Fragment, { children: [_jsx("span", { className: dividerParts.label, children: label }), _jsx("span", { className: dividerParts.line })] })) : null] }));
+}

package/dist/components/core/divider/Divider.types.d.ts

@@ -0,0 +1,25 @@
+export interface DividerOwnProps {
+    /**
+     * `horizontal` — The default, and nearly every divider: a rule across a stack, separating what is above it from what is below. It takes all of whatever contains it rather than waiting to be stretched, so it spans a block, a flex column and a centred grid cell alike — and in a flex row, where it has no business being, it takes the row's whole width rather than a share of it, which is the sign that the rule wanted the other axis
+     * `vertical` — A rule down a row, separating items beside one another. It stretches to the height of the row rather than declaring one, so it is exactly as tall as what it stands between — and in a container with no height of its own it draws nothing, which is the mirror of the horizontal case and the same thing to check first
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+export type DividerProps = DividerOwnProps & ({
+    decorative?: boolean;
+    label?: undefined;
+} | {
+    decorative?: false;
+    label?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const dividerParts: {
+    readonly root: "dds-divider";
+    readonly line: "dds-divider__line";
+    readonly label: "dds-divider__label";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const dividerDefaults: {
+    readonly orientation: "horizontal";
+    readonly decorative: false;
+};

package/dist/components/core/divider/Divider.types.js

@@ -0,0 +1,9 @@
+// GENERATED from divider.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const dividerParts = {
+    root: 'dds-divider',
+    line: 'dds-divider__line',
+    label: 'dds-divider__label',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const dividerDefaults = { orientation: 'horizontal', decorative: false };

package/dist/components/core/dropdown-menu/DropdownMenu.css

@@ -0,0 +1,147 @@
+/* GENERATED from dropdownmenu.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu {
+  display: inline-flex;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger {
+  transition-property: background-color, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  outline-style: solid;
+  position: relative;
+  white-space: nowrap;
+  block-size: var(--size-control-md);
+  border-color: var(--color-border-strong);
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  color: var(--color-fg-default);
+  gap: var(--space-gap-sm);
+  outline-width: var(--border-width-none);
+  padding-inline: var(--space-control-md);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__chevron {
+  transition-property: rotate;
+  block-size: var(--icon-control-lg);
+  color: var(--color-fg-muted);
+  inline-size: var(--icon-control-lg);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__surface {
+  border-style: solid;
+  box-sizing: border-box;
+  inline-size: max-content;
+  inset-block-start: 100%;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 100%;
+  overflow-y: auto;
+  position: absolute;
+  background-color: var(--color-bg-surface-raised);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-menu);
+  border-width: var(--border-width-default);
+  box-shadow: var(--elevation-surface-floating);
+  margin-block-start: var(--space-gap-sm);
+  max-block-size: var(--size-menu-max);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-variant="plain"] .dds-dropdownmenu__trigger {
+  color: inherit;
+  border-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-alignment="end"] .dds-dropdownmenu__surface {
+  inset-inline-end: 0;
+  inset-inline-start: auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-alignment="start"] .dds-dropdownmenu__surface {
+  inset-inline-end: auto;
+  inset-inline-start: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__icon {
+  block-size: var(--icon-control-lg);
+  inline-size: var(--icon-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__chevron {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__icon {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-size="sm"] .dds-dropdownmenu__trigger {
+  block-size: var(--size-control-sm);
+  padding-inline: var(--space-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:active {
+  background-color: var(--color-bg-active-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:focus-visible {
+  outline-color: var(--color-border-focus-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-dropdownmenu[data-variant="plain"][data-size="sm"] .dds-dropdownmenu__trigger {
+  block-size: var(--size-control-md);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-dropdownmenu,
+  :where([data-dds-context="marketing"]) .dds-dropdownmenu * { transition: none !important; }
+}
+

package/dist/components/core/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,24 @@
+import './DropdownMenu.css';
+import './dropdown-menu-impl.css';
+import { type DropdownMenuProps } from './DropdownMenu.types.js';
+export type { DropdownMenuProps };
+/**
+ * A button that opens a short set of destinations.
+ *
+ * It is the host MenuItem was written against: a row whose role is `menuitem` announces wrong
+ * outside an element whose role is `menu`, so what this adds is everything a row cannot know about
+ * itself — that there is a set, how long it is, which one the visitor is on, and that Escape puts
+ * them back on the button they pressed.
+ *
+ * The trigger is drawn here rather than passed in, which is where this parts company with product's
+ * menu of the same name. That was forced rather than chosen: when this was built, this package's
+ * Button was an anchor with a required `href`, so it was a link and a link that opens a menu does not
+ * navigate; ButtonIcon is a
+ * real button and takes no words. A set of destinations is chosen by reading it, so the trigger
+ * needs words, and nothing here drew a button with words. Button now renders a `<button>` when it
+ * has no href, so whether it should become the trigger is an open question rather than a settled one.
+ *
+ * Focus moves to the rows themselves rather than being described from the trigger. A menu's rows are
+ * things to take, and a visitor pressing Enter should be pressing the thing they are on.
+ */
+export declare function DropdownMenu(props: DropdownMenuProps): import("react").JSX.Element;