@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/footer-group/FooterGroup.css

@@ -0,0 +1,90 @@
+/* GENERATED from footergroup.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-footergroup {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__heading {
+  display: none;
+  color: var(--color-fg-muted-inverse);
+  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-footergroup .dds-footergroup__trigger {
+  transition-property: outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  inline-size: 100%;
+  justify-content: space-between;
+  outline-style: solid;
+  padding: unset;
+  text-align: start;
+  border-radius: var(--radius-control-sm);
+  gap: var(--space-gap-sm);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  padding-block: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup[data-expanded="false"] .dds-footergroup__list {
+  display: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup[data-expanded="true"] .dds-footergroup__list {
+  display: flex;
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__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-footergroup .dds-footergroup__marker {
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__trigger:focus-visible {
+  outline-color: var(--color-border-focus-inverse);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup[data-expanded="false"] .dds-footergroup__marker {
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+}
+
+:where([data-dds-context="marketing"]) .dds-footergroup[data-expanded="true"] .dds-footergroup__marker {
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-footergroup,
+  :where([data-dds-context="marketing"]) .dds-footergroup * { transition: none; }
+}
+

package/dist/components/core/footer-group/FooterGroup.d.ts

@@ -0,0 +1,32 @@
+import './FooterGroup.css';
+import './footer-group-impl.css';
+import { type FooterGroupProps } from './FooterGroup.types.js';
+export type { FooterGroupProps };
+/**
+ * A named handful of destinations in the footer.
+ *
+ * The word appears twice in the markup and once on the screen. Above the footer's own width the
+ * trigger is not drawn and a plain `heading` carries the label; below it the trigger carries the
+ * label and the heading is not drawn. Both are always mounted and the stylesheet picks one, which
+ * is what lets the element change without React remounting anything — and `display: none` takes the
+ * unused one out of the accessibility tree, so a screen reader is never given the word twice.
+ *
+ * The first build put the label inside the trigger alone, and hiding the trigger on a desktop took
+ * the word with it: six sets of links with no names over them.
+ *
+ * The trigger is a `<button>` at every width it is drawn at, and above the footer's own width it is
+ * not drawn at all. That is the arrangement Navbar already uses for the control it keeps only while collapsed,
+ * and it is the one that avoids every alternative's problem: the element never changes, so React
+ * never remounts it; the list is simply open on a wide page; and there is no control left to
+ * announce, so `aria-expanded` cannot end up disagreeing with what a reader is looking at.
+ *
+ * A button that stayed and did nothing would be worse than it sounds. It would be a tab stop
+ * before every set of links, announced as collapsible, toggling a state the stylesheet overrules —
+ * which is a promise broken for exactly the readers who cannot see that the list was already open.
+ *
+ * The state is still held here at every width, because the width is not this component's to know:
+ * a container query decides it, and a container query cannot be read from JavaScript. Nothing goes
+ * wrong when a wide page holds `expanded: false` — there is no trigger to press and no rule
+ * reading the value.
+ */
+export declare function FooterGroup({ expanded: controlled, label, onExpandedChange, children, ...rest }: FooterGroupProps): import("react").JSX.Element;

package/dist/components/core/footer-group/FooterGroup.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useId, useState } from 'react';
+import { ChevronDownRegularIcon } from '@deriv-com/quill-icons-web';
+import './FooterGroup.css';
+import './footer-group-impl.css';
+import { Link } from '../link/Link.js';
+import { footerGroupDefaults, footerGroupParts } from './FooterGroup.types.js';
+/**
+ * A named handful of destinations in the footer.
+ *
+ * The word appears twice in the markup and once on the screen. Above the footer's own width the
+ * trigger is not drawn and a plain `heading` carries the label; below it the trigger carries the
+ * label and the heading is not drawn. Both are always mounted and the stylesheet picks one, which
+ * is what lets the element change without React remounting anything — and `display: none` takes the
+ * unused one out of the accessibility tree, so a screen reader is never given the word twice.
+ *
+ * The first build put the label inside the trigger alone, and hiding the trigger on a desktop took
+ * the word with it: six sets of links with no names over them.
+ *
+ * The trigger is a `<button>` at every width it is drawn at, and above the footer's own width it is
+ * not drawn at all. That is the arrangement Navbar already uses for the control it keeps only while collapsed,
+ * and it is the one that avoids every alternative's problem: the element never changes, so React
+ * never remounts it; the list is simply open on a wide page; and there is no control left to
+ * announce, so `aria-expanded` cannot end up disagreeing with what a reader is looking at.
+ *
+ * A button that stayed and did nothing would be worse than it sounds. It would be a tab stop
+ * before every set of links, announced as collapsible, toggling a state the stylesheet overrules —
+ * which is a promise broken for exactly the readers who cannot see that the list was already open.
+ *
+ * The state is still held here at every width, because the width is not this component's to know:
+ * a container query decides it, and a container query cannot be read from JavaScript. Nothing goes
+ * wrong when a wide page holds `expanded: false` — there is no trigger to press and no rule
+ * reading the value.
+ */
+export function FooterGroup({ expanded: controlled, label, onExpandedChange, children, ...rest }) {
+    const base = useId();
+    const listId = `${base}-list`;
+    const headingId = `${base}-heading`;
+    /**
+     * Held here unless the page holds it.
+     *
+     * A footer of eleven groups has no reason to tell its page which ones a reader opened, so the
+     * uncontrolled form is the one nearly every site wants. Controlled when the prop is supplied at all, which
+     * here means not `undefined` — `false` is a page driving this shut, and reading that as "not
+     * supplied" would make a controlled group uncontrollable the moment somebody closed it.
+     */
+    const driven = controlled !== undefined;
+    const [held, setHeld] = useState(footerGroupDefaults.expanded);
+    const open = driven ? controlled : held;
+    const toggle = () => {
+        if (!driven)
+            setHeld(!open);
+        onExpandedChange?.(!open);
+    };
+    return (_jsxs("div", { className: footerGroupParts.root, "data-expanded": String(open), ...rest, children: [_jsx("div", { className: footerGroupParts.heading, id: headingId, children: label }), _jsxs("button", { type: "button", className: footerGroupParts.trigger, "aria-expanded": open, "aria-controls": listId, onClick: toggle, children: [_jsx("span", { className: footerGroupParts.label, children: label }), _jsx(ChevronDownRegularIcon, { className: footerGroupParts.marker, "aria-hidden": "true", style: open ? { rotate: '180deg' } : undefined })] }), _jsx("ul", { className: footerGroupParts.list, id: listId, "aria-labelledby": headingId, children: Children.toArray(children).map((child) => {
+                    const link = isValidElement(child) && child.type === Link;
+                    return (_jsx("li", { children: link
+                            ? cloneElement(child, {
+                                variant: child.props.variant ?? 'list',
+                            })
+                            : child }, child.key));
+                }) })] }));
+}

package/dist/components/core/footer-group/FooterGroup.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface FooterGroupOwnProps {
+    /** Whether the set is open, on a page narrow enough for it to close. Left alone the group holds this itself, which is what a footer of eleven groups wants — the page has no reason to know which ones a reader has opened */
+    expanded?: boolean;
+    /** Always — it is the word the set is under, and the control that opens it on a narrow page. One or two words naming a kind: 'Markets', 'Partner with us' */
+    label: string;
+    /** Told when a set opens or shuts, for a page that drives them from outside — one open at a time, or a set opened by a link somebody followed */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Allowed: Link */
+    children: ReactNode;
+}
+export type FooterGroupProps = FooterGroupOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'expanded' | 'label' | 'onExpandedChange'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const footerGroupParts: {
+    readonly root: "dds-footergroup";
+    readonly heading: "dds-footergroup__heading";
+    readonly trigger: "dds-footergroup__trigger";
+    readonly label: "dds-footergroup__label";
+    readonly marker: "dds-footergroup__marker";
+    readonly list: "dds-footergroup__list";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const footerGroupDefaults: {
+    readonly expanded: false;
+};

package/dist/components/core/footer-group/FooterGroup.types.js

@@ -0,0 +1,12 @@
+// GENERATED from footer-group.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const footerGroupParts = {
+    root: 'dds-footergroup',
+    heading: 'dds-footergroup__heading',
+    trigger: 'dds-footergroup__trigger',
+    label: 'dds-footergroup__label',
+    marker: 'dds-footergroup__marker',
+    list: 'dds-footergroup__list',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const footerGroupDefaults = { expanded: false };

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

@@ -0,0 +1,78 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each still ties or beats exactly what it did before.
+ */
+
+@container (min-width: 48rem) {
+  /*
+   * Wide enough, and there is nothing to open.
+   *
+   * The footer's band is the container, not the window — a footer in a narrow region of a wide page
+   * is a narrow footer, and asking the viewport would collapse the wrong one.
+   *
+   * `48rem` and not the `64rem` the navbar bends at, because the two are answering different
+   * questions. A bar needs room for a row of destinations across the whole width; a column of
+   * links needs far less, and four tracks of `min="sm"` with their gutters come to a little over
+   * seven hundred pixels. Forty-eight rem is `size.breakpoint.md` — the width at which this
+   * package's own token layer stops calling the page a phone — so the footer folds where
+   * everything else in the package folds.
+   *
+   * Written longhand because `var()` is not allowed in a container query condition; that role is
+   * the value to read, never the condition to write, and Navbar's sheet writes its number out for
+   * the same reason.
+   *
+   * The trigger goes rather than being disabled or hidden from the pointer alone. A control that
+   * stayed would be a tab stop before every set of links, announced as collapsible, toggling a
+   * state this rule overrules — so it leaves the accessibility tree with `display: none`, and the
+   * label it carried is not lost, because the label is what the list is titled by either way.
+   */
+  :where([data-dds-context="marketing"]) .dds-footergroup[data-expanded] .dds-footergroup__trigger {
+    display: none;
+  }
+
+  /*
+   * And the word it was carrying is drawn by the heading instead.
+   *
+   * Two classes and an attribute against the generated rule's two classes, so it wins on weight
+   * rather than on which stylesheet the bundler wrote last. `data-expanded` is on the root at
+   * every width, so the attribute selects without narrowing anything — it is there to outrank the
+   * `display: none` the part carries by default, not to ask a question.
+   */
+  :where([data-dds-context="marketing"]) .dds-footergroup[data-expanded] .dds-footergroup__heading {
+    display: block;
+  }
+
+  /*
+   * And the list is open whatever the group thinks.
+   *
+   * It outranks the generated `[data-expanded="false"]` rule on weight rather than on order: that
+   * selector is two classes and an attribute, this is two classes inside a container query, so the
+   * `display: none` it overrules is the one the collapsed state sets. Written as `flex` and not
+   * `revert`, because the part's own layout is a column of rows and reverting would hand it back
+   * to the browser's `<ul>`.
+   */
+  :where([data-dds-context="marketing"]) .dds-footergroup[data-expanded='false'] .dds-footergroup__list {
+    display: flex;
+  }
+}
+
+@container (max-width: 47.9375rem) {
+  /*
+   * Below the fold the set is a disclosure, and a disclosure closes up.
+   *
+   * The root's `space.gap.lg` is the step between a heading and the list it names on a desktop,
+   * where the label is a signpost standing over an open column and wants the air. Here the label is
+   * the row a reader just pressed and the list is what appeared underneath it: twenty-four between
+   * them, on top of the trigger's own padding, put the first destination thirty-two pixels from the
+   * word that revealed it, which reads as two things rather than one opening.
+   *
+   * The same width the band folds at, written as its complement so there is no gap between the two
+   * — `47.9375rem` is one sixteenth below `48rem`, which is the smallest step that cannot leave a
+   * width answering to neither.
+   */
+  :where([data-dds-context="marketing"]) .dds-footergroup[data-expanded] {
+    gap: var(--space-gap-sm);
+  }
+}

package/dist/components/core/icon/Icon.css

@@ -0,0 +1,40 @@
+/* GENERATED from icon.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-icon {
+  display: inline-block;
+  flex: none;
+  transition-property: rotate;
+  vertical-align: middle;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-icon[data-size="lg"] {
+  height: var(--icon-size-lg);
+  width: var(--icon-size-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-icon[data-size="md"] {
+  height: var(--icon-size-md);
+  width: var(--icon-size-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-icon[data-size="sm"] {
+  height: var(--icon-size-sm);
+  width: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-icon[data-size="xl"] {
+  height: var(--icon-size-xl);
+  width: var(--icon-size-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-icon[data-size="xs"] {
+  height: var(--icon-size-xs);
+  width: var(--icon-size-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-icon { transition: none; }
+}
+

package/dist/components/core/icon/Icon.d.ts

@@ -0,0 +1,23 @@
+import './Icon.css';
+import { type IconProps } from './Icon.types.js';
+export type { IconProps };
+/**
+ * Icon clones the glyph it is given rather than wrapping it.
+ *
+ * A wrapper would leave the size on the wrong element: every Quill glyph ships
+ * `width` and `height` attributes defaulting to 24, and sizing a parent does
+ * nothing to them. Cloning puts the part's class on the `<svg>` itself, where a
+ * CSS width beats a presentation attribute and `icon.size.*` decides the measure.
+ *
+ * This is not a hypothetical here. Marketing had three components drawing glyphs
+ * by hand before this existed — Breadcrumb's separator, AccordionItem's chevron
+ * and CardBody's mark — and the third had to answer the same problem with an
+ * impl sheet reaching into a child, because it wraps rather than clones and a box
+ * with a measure has no effect on the SVG inside it.
+ *
+ * Nothing here sets a colour. The glyph paints with `fill="currentColor"`, so it
+ * inherits whatever the surrounding text uses — which is what makes an Icon on a
+ * brand card pick up `color.fg.on-solid` without being told, the same way
+ * CardBody's regions do.
+ */
+export declare function Icon({ size, label, children }: IconProps): import("react").JSX.Element;

package/dist/components/core/icon/Icon.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import { given } from '../../given.js';
+import './Icon.css';
+import { iconDefaults, iconParts } from './Icon.types.js';
+/**
+ * Icon clones the glyph it is given rather than wrapping it.
+ *
+ * A wrapper would leave the size on the wrong element: every Quill glyph ships
+ * `width` and `height` attributes defaulting to 24, and sizing a parent does
+ * nothing to them. Cloning puts the part's class on the `<svg>` itself, where a
+ * CSS width beats a presentation attribute and `icon.size.*` decides the measure.
+ *
+ * This is not a hypothetical here. Marketing had three components drawing glyphs
+ * by hand before this existed — Breadcrumb's separator, AccordionItem's chevron
+ * and CardBody's mark — and the third had to answer the same problem with an
+ * impl sheet reaching into a child, because it wraps rather than clones and a box
+ * with a measure has no effect on the SVG inside it.
+ *
+ * Nothing here sets a colour. The glyph paints with `fill="currentColor"`, so it
+ * inherits whatever the surrounding text uses — which is what makes an Icon on a
+ * brand card pick up `color.fg.on-solid` without being told, the same way
+ * CardBody's regions do.
+ */
+export function Icon({ size = iconDefaults.size, label, children }) {
+    /**
+     * An Icon handed an Icon is unwrapped, and this one's size is the one that survives.
+     *
+     * A glyph slot takes the glyph and its component draws it, so the step is the
+     * component's and a page has no way to set another — except by passing an Icon it
+     * sized itself. Left alone the outcome is the worst available: React clones the inner
+     * `Icon` element and hands it `className` and `data-size`, which `Icon` does not read,
+     * so the props are dropped in silence and the glyph draws at the page's measure inside
+     * a component that had decided otherwise. Nothing reports it.
+     *
+     * So the outer one absorbs the inner and keeps going with what was inside it. Nesting
+     * has no other reading — Icon clones a glyph, and an Icon is not one.
+     *
+     * A loop rather than a single unwrap, because two is no more meaningful than one and a
+     * component that handled one level would fail on the level after it.
+     *
+     * The name is carried out, and that is the one thing here not merely about size: these
+     * slots are decorative and pass no label, but Icon is shared, and an accessible name
+     * dropped on the way through would be a convenience paid for with real harm. An outer
+     * label still wins — it is the nearer decision.
+     */
+    let glyph = children;
+    let named = label;
+    while (isValidElement(glyph) && glyph.type === Icon) {
+        named = named ?? glyph.props.label;
+        glyph = glyph.props.children;
+    }
+    /*
+     * Decorative unless it is named. An icon-only control passes `label`; a glyph beside
+     * words that already say the same thing must not, or it is announced twice.
+     *
+     * Read through `given`, which is where this parts company with Product's. There the
+     * name is passed straight through, so `label=""` leaves `aria-label=""` on an element
+     * already marked presentational — a name of no characters rather than no name, which
+     * is a thing an audit flags and nothing wants. A label of spaces is the same case: it
+     * is not a name, and the switch here is presence rather than truthiness.
+     */
+    const names = given(named);
+    const applied = {
+        'data-size': size,
+        role: names ? 'img' : 'presentation',
+        'aria-label': names ? named : undefined,
+    };
+    // Anything that is not a single element cannot be cloned. Wrapping it keeps the
+    // size and the colour on something rather than throwing: the preview hands every
+    // component the string "Sample content" and cannot know this one wants an element.
+    if (!isValidElement(glyph)) {
+        return (_jsx("span", { className: iconParts.root, ...applied, children: glyph }));
+    }
+    return cloneElement(glyph, {
+        className: [iconParts.root, glyph.props.className].filter(Boolean).join(' '),
+        ...applied,
+    });
+}

package/dist/components/core/icon/Icon.types.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+export interface IconOwnProps {
+    /**
+     * `xs` — Inline and supporting content — a separator in a trail, a mark against small text
+     * `sm` — A mark beside text that must not outweigh it: the chevron on a list row, an affordance next to a label
+     * `md` — The default. Body content and lists, where the glyph sits with the words rather than above them
+     * `lg` — Cards and content sections — the mark a feature card leads with, read before its title is
+     * `xl` — The largest step, for a callout or a highlighted block where the glyph does as much work as the copy
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** The glyph is the only thing naming its control — an icon-only button, a mark with no words beside it */
+    label?: string;
+    /** Allowed: QuillSystemIcon */
+    children: ReactNode;
+}
+export type IconProps = IconOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const iconParts: {
+    readonly root: "dds-icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const iconDefaults: {
+    readonly size: "md";
+};

package/dist/components/core/icon/Icon.types.js

@@ -0,0 +1,7 @@
+// GENERATED from icon.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const iconParts = {
+    root: 'dds-icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const iconDefaults = { size: 'md' };

package/dist/components/core/link/Link.css

@@ -0,0 +1,89 @@
+/* GENERATED from link.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-link {
+  transition-property: color, outline-color, outline-width, text-decoration-thickness;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  outline-style: solid;
+  border-radius: var(--radius-subtle);
+  outline-width: var(--border-width-none);
+  text-decoration-thickness: var(--border-width-default);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-link .dds-link__icon-leading {
+  align-items: center;
+  display: inline-flex;
+  vertical-align: middle;
+  padding-inline-end: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-link .dds-link__icon-trailing {
+  align-items: center;
+  display: inline-flex;
+  vertical-align: middle;
+  padding-inline-start: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-link[data-variant="inline"] {
+  color: inherit;
+  text-decoration-line: underline;
+}
+
+:where([data-dds-context="marketing"]) .dds-link[data-variant="list"] {
+  color: inherit;
+  display: inline-flex;
+  text-decoration-line: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-link[data-variant="standalone"] {
+  display: inline-flex;
+  text-decoration-line: none;
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-link[data-variant="standalone"][data-tone="inherit"] {
+  color: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-link:hover {
+  text-decoration-thickness: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-link:active {
+  text-decoration-thickness: var(--border-width-emphasis);
+}
+
+:where([data-dds-context="marketing"]) .dds-link:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-link[data-variant="standalone"][data-tone="brand"] {
+  color: var(--color-bg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-link[data-variant="standalone"][data-tone="brand"]:hover {
+  color: var(--color-bg-brand-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-link[data-variant="standalone"][data-tone="brand"]:active {
+  color: var(--color-bg-brand-active);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-link,
+  :where([data-dds-context="marketing"]) .dds-link * { transition: none; }
+}
+

package/dist/components/core/link/Link.d.ts

@@ -0,0 +1,37 @@
+import './Link.css';
+import './link-impl.css';
+import { type LinkProps } from './Link.types.js';
+export type { LinkProps };
+/**
+ * Words in a sentence that go somewhere.
+ *
+ * An anchor with a real href, which is the whole component: cmd-click opens a
+ * tab, the status bar shows the destination before the press, the address can be
+ * copied, and a screen reader announces a link. `href` is required in the
+ * generated type for that reason — an anchor without one takes no focus and is
+ * announced as plain text, so the destination disappears for anyone not using a
+ * mouse.
+ *
+ * `display: inline`, unlike everything else pressable in this package. A link is
+ * part of a line and has to wrap with it; Button is `inline-flex` because it is
+ * a box the copy flows around, and a link behaving that way would leave a hole
+ * at the end of a line rather than breaking across two.
+ *
+ * The type is inherited rather than set, in the inline variant. A link in a body
+ * paragraph is body copy and a link in a caption is caption, which is the whole
+ * idea — only `standalone` binds a step, because a link on its own line has no
+ * sentence to take one from.
+ *
+ * `external` carries three things that belong together: the target, the rel, and
+ * the mark. The rel is not optional and not the consumer's job — leaving it to
+ * the call site is how a page hands `window.opener` to a site it does not
+ * control — and putting the glyph here is what makes every external link on the
+ * site carry the same one.
+ *
+ * There is no `loading` and no `disabled`, which is where this parts company
+ * with Product's Link and follows Marketing's Button instead. The browser owns a
+ * navigation in flight and shows it in the chrome; and an anchor cannot be
+ * honestly disabled, since dropping the href is the only thing that truly stops
+ * it and that costs the link role and the focus with it.
+ */
+export declare function Link({ variant, tone, href, external, showIcon, iconLeading, children, ...rest }: LinkProps): import("react").JSX.Element;