@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/README.md

@@ -1,17 +1,20 @@
-# @deriv/dds-marketing
+# @deriv-com/dds-marketing
 
 Components and design tokens from the Deriv Design System, for marketing sites — landing
 pages, pricing, sign-up.
 
+**Working with an AI agent?** Point it at [`AGENTS.md`](./AGENTS.md) in this package. It is
+the short version of everything below and says which of the `.llm/` documents to open.
+
 > **This package has no components yet.** Its tokens are real and its stylesheet is
 > complete; the component surface is still being authored. Until it lands, installing this
 > gets you the marketing token layer and an empty barrel. Product apps want
-> [`@deriv/dds-product`](https://www.npmjs.com/package/@deriv/dds-product).
+> [`@deriv-com/dds-product`](https://www.npmjs.com/package/@deriv-com/dds-product).
 
 ## Install
 
 ```bash
-npm install @deriv/dds-marketing
+npm install @deriv-com/dds-marketing
 ```
 
 React 19 and the Quill icon set are peer dependencies, so install them alongside it if
@@ -23,34 +26,79 @@ npm install react react-dom @deriv-com/quill-icons-web
 
 ## Use
 
-Import the stylesheet once, at the root of your app. It defines every token this package's
-components bind to — without it they render unstyled.
+Import the stylesheet once, at the root of your app:
 
 ```tsx
-import '@deriv/dds-marketing/marketing.css'
+import '@deriv-com/dds-marketing/marketing.css'
 ```
 
-Then import components by name:
+That is the whole of the setup, and today it is the whole of the package: the token layer
+is complete and the barrel is empty, so there is nothing yet to import by name. When
+components land, each will bring its own stylesheet with it and nothing else will need
+importing.
+
+Product apps want [`@deriv-com/dds-product`](https://www.npmjs.com/package/@deriv-com/dds-product),
+which has the components.
+
+## Fonts
+
+The system is designed for [Inter](https://rsms.me/inter/) (all text) and
+[Red Hat Mono](https://github.com/RedHatOfficial/RedHatFont) (code).
+`marketing.css` names them but cannot carry them — if nothing loads the fonts, every role
+silently falls back to the system typeface, and any weight the page is missing gets faked
+by the browser. Pick one of the two paths:
+
+**Let the package supply them.** One import next to `marketing.css`:
 
 ```tsx
-import { Button } from '@deriv/dds-marketing'
+import '@deriv-com/dds-marketing/fonts.css'
+import '@deriv-com/dds-marketing/marketing.css'
+```
+
+This self-hosts both faces from the package (variable-weight WOFF2, subset per script,
+~260 KB total across all scripts — a page only downloads the subsets its text uses). Both
+fonts are under the SIL Open Font License; the licenses ship in `dist/fonts/`.
+
+**Load them yourself.** If your app already hosts the fonts — `next/font`, Fontsource, or
+your own `@font-face` — skip `fonts.css` and point the two family variables at what you
+loaded:
+
+```css
+:root {
+  --font-family-sans: var(--your-inter-variable), system-ui, sans-serif;
+  --font-family-mono: var(--your-mono-variable), ui-monospace, monospace;
+}
 ```
 
-Each component brings its own stylesheet with it, so nothing else needs importing.
+Every type role reads its family from these two variables, so this redirects the whole
+system at once. Load weights 400–700 for Inter (a variable font covers this in one file);
+a missing weight does not fall back visibly — the browser synthesises a faux bold instead.
 
-## Light and dark
+## One theme, and a viewport axis
 
-`marketing.css` defines both themes. Dark is selected by `data-theme="dark"` on any
-ancestor — usually `<html>`:
+`marketing.css` ships light only. It contains no `[data-theme="dark"]` block, so setting
+that attribute — anywhere, including on `<html>` for the rest of your app — leaves these
+components light. There is nothing to configure and nothing to guard against.
 
-```html
-<html data-theme="dark">
+A dark palette is authored in the token source and held to the same role names as light,
+so turning it on later is a decision rather than a rewrite. The package states what it
+publishes in its own manifest:
+
+```json
+"dds": { "modes": ["light"] }
 ```
 
-Marketing also carries a mobile viewport axis: seven roles take different values below
+Marketing does carry a mobile viewport axis: seven roles take different values below
 768px, applied automatically and overridable with `data-dds-viewport="mobile"` or
 `"desktop"` when a page renders a device frame inside a wider window.
 
+## Documentation
+
+- [`AGENTS.md`](./AGENTS.md) — the front door: setup, the rules that span components, and
+  what this package currently has.
+- `.llm/rules.md` — the constraints no single component can state.
+- `.llm/tokens.md` — the token vocabulary, including the mobile viewport axis above.
+
 ## Versioning
 
 Pre-1.0. Minor versions may contain breaking changes while the component surface settles;

package/dist/components/core/accordion/Accordion.css

@@ -0,0 +1,10 @@
+/* GENERATED from accordion.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-accordion {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  border-width: var(--border-width-none);
+}
+

package/dist/components/core/accordion/Accordion.d.ts

@@ -0,0 +1,20 @@
+import './Accordion.css';
+import { type AccordionProps } from './Accordion.types.js';
+export type { AccordionProps };
+/**
+ * A set of rows, and the two things about them that belong to the set rather than to any row:
+ * how deep they sit in the outline, and which one is open.
+ *
+ * The level is pushed down rather than set per row because every row of one accordion is at one
+ * depth by definition — a set whose rows disagreed would describe a hierarchy the design does
+ * not have, and a reader navigating by heading would be told it exists.
+ *
+ * One open row is not a setting here, which is where this parts company with Product's. A
+ * marketing page is read by scrolling, and a set that could hold every row open is the long page
+ * the accordion was put there to shorten. So the set always holds the answer: a row cannot see
+ * its siblings, and left to themselves they would all open.
+ *
+ * Seeded from whichever row arrived open, so a set that opens showing one keeps it. A row's own
+ * handler still runs — it is how a page learns what was pressed, and the only way it could.
+ */
+export declare function Accordion({ headingLevel, children, ...rest }: AccordionProps): import("react").JSX.Element;

package/dist/components/core/accordion/Accordion.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement, useState } from 'react';
+import './Accordion.css';
+import { accordionDefaults, accordionParts } from './Accordion.types.js';
+/**
+ * Both handlers, the row's own first.
+ *
+ * `cloneElement` replaces rather than merges, so a row already reporting its own state would
+ * silently stop — and that is the handler a page is most likely to have written, since it is
+ * how they learn which row was opened.
+ */
+function chain(theirs, ours) {
+    if (theirs === undefined)
+        return ours;
+    return (expanded) => {
+        theirs(expanded);
+        ours(expanded);
+    };
+}
+/**
+ * A set of rows, and the two things about them that belong to the set rather than to any row:
+ * how deep they sit in the outline, and which one is open.
+ *
+ * The level is pushed down rather than set per row because every row of one accordion is at one
+ * depth by definition — a set whose rows disagreed would describe a hierarchy the design does
+ * not have, and a reader navigating by heading would be told it exists.
+ *
+ * One open row is not a setting here, which is where this parts company with Product's. A
+ * marketing page is read by scrolling, and a set that could hold every row open is the long page
+ * the accordion was put there to shorten. So the set always holds the answer: a row cannot see
+ * its siblings, and left to themselves they would all open.
+ *
+ * Seeded from whichever row arrived open, so a set that opens showing one keeps it. A row's own
+ * handler still runs — it is how a page learns what was pressed, and the only way it could.
+ */
+export function Accordion({ headingLevel = accordionDefaults.headingLevel, children, ...rest }) {
+    const rows = Children.toArray(children).filter(isValidElement);
+    const [open, setOpen] = useState(() => {
+        const first = rows.findIndex((row) => row.props.expanded === true);
+        return first === -1 ? null : first;
+    });
+    return (_jsx("div", { className: accordionParts.root, ...rest, children: rows.map((row, index) => {
+            const props = row.props;
+            /*
+             * A DOM element is left exactly as it arrived.
+             *
+             * `cloneElement` hands its second argument to whatever it is given, and an
+             * intrinsic element does not know what `expanded` is — React warns three times
+             * and puts `headinglevel="3"` in the markup. `allowedChildren` already says this
+             * is misuse, but a contract is not a runtime and the reader who did it by
+             * accident deserves a stray div rather than a console full of noise.
+             *
+             * Keyed on the type being a string, which is what an intrinsic element's is, so a
+             * page's own wrapper component still receives the set's answer and can forward
+             * it. Comparing against AccordionItem itself would refuse those too, and a
+             * component that renders a row is a reasonable thing for a page to have written.
+             */
+            if (typeof row.type === 'string')
+                return row;
+            return cloneElement(row, {
+                key: row.key ?? index,
+                headingLevel,
+                expanded: open === index,
+                onExpandedChange: chain(props.onExpandedChange, (expanded) => {
+                    setOpen(expanded ? index : null);
+                }),
+            });
+        }) }));
+}

package/dist/components/core/accordion/Accordion.types.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface AccordionOwnProps {
+    /**
+     * `2` — The rows are the page's own sections, sitting directly under its title — a page that is nothing but questions is the case
+     * `3` — The default. The set sits under a section heading of its own, which is where an accordion usually is
+     * `4` — The set is inside a subsection that already carries a heading above it
+     */
+    headingLevel?: '2' | '3' | '4';
+    /** Allowed: AccordionItem */
+    children: ReactNode;
+}
+export type AccordionProps = AccordionOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'headingLevel'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const accordionParts: {
+    readonly root: "dds-accordion";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const accordionDefaults: {
+    readonly headingLevel: "3";
+};

package/dist/components/core/accordion/Accordion.types.js

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

package/dist/components/core/accordion-item/AccordionItem.css

@@ -0,0 +1,98 @@
+/* GENERATED from accordionitem.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-accordionitem {
+  border-block-start-style: solid;
+  box-sizing: border-box;
+  display: block;
+  border-color: var(--color-border-subtle);
+  border-width: var(--border-width-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__heading {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger {
+  transition-property: color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background: none;
+  border-style: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  inline-size: 100%;
+  outline-style: solid;
+  padding-inline: 0;
+  text-align: start;
+  color: var(--color-fg-default);
+  gap: var(--space-gap-md);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  padding-block: var(--space-inset-md);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__title {
+  text-align: start;
+  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-accordionitem .dds-accordionitem__panel {
+  overflow: hidden;
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__content {
+  overflow: hidden;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  line-height: var(--font-body-md-line-height);
+  padding-block-end: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="false"] .dds-accordionitem__panel {
+  display: none;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="true"] .dds-accordionitem__panel {
+  display: grid;
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__marker {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:hover:where(:not(:disabled)) {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem .dds-accordionitem__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="false"] .dds-accordionitem__marker {
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded="true"] .dds-accordionitem__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-accordionitem,
+  :where([data-dds-context="marketing"]) .dds-accordionitem * { transition: none; }
+}
+

package/dist/components/core/accordion-item/AccordionItem.d.ts

@@ -0,0 +1,44 @@
+import './AccordionItem.css';
+import './accordion-item-impl.css';
+import { type AccordionItemProps } from './AccordionItem.types.js';
+export type { AccordionItemProps };
+/**
+ * One row: a heading that stays, and the detail under it that does not.
+ *
+ * It works alone and it works in a set, and the difference is only who holds the
+ * answer. Alone, the row keeps its own — `expanded` is read once as the state it
+ * opens in, and every press after that is its own business. Inside an Accordion
+ * the set injects `expanded` on every render, so the row stops deciding and
+ * starts reporting: a row cannot see its siblings, which is exactly the fact that
+ * makes one-at-a-time impossible to arrange from here.
+ *
+ * `useState` seeded from the prop rather than derived from it. A row that read
+ * the prop every render would be uncontrolled and unable to move; one that
+ * ignored it could not be opened by the set. Holding both and preferring the
+ * injected value is what lets the same component be either — and it is why
+ * `expanded` declares no default: absent has to stay distinguishable from false,
+ * because absent is the only way a row knows nobody is controlling it.
+ *
+ * The heading is a `<div role="heading">` with the level as a number, not an
+ * `<h3>`. The level is a prop, and an element cannot be picked at runtime without
+ * six branches saying the same thing — the role and `aria-level` say it once.
+ *
+ * `aria-expanded` sits on the button rather than the panel, because that is what
+ * the reader is about to press: the state belongs to the thing they act on, not
+ * to a region they cannot see until it opens.
+ *
+ * The panel is a named region, and the name is the heading that opened it. A
+ * `region` is a landmark, and an unnamed one is worse than none — it fills a
+ * screen reader's landmark list with anonymous entries nobody can choose between.
+ * Naming it is what makes it worth having: a reader who has found the question
+ * can jump straight to the answer. Product declines the role instead, which is
+ * also correct and is the other way to avoid the same fault; it can afford to
+ * because its rows open independently and a set of them would proliferate
+ * landmarks, where only one of these is ever open.
+ *
+ * The panel stays mounted when shut. Unmounting it would take its height with it,
+ * so there would be nothing to move between — and it would take the words out of
+ * the browser's own find-on-page, which is how a reader looks for an answer they
+ * half remember.
+ */
+export declare function AccordionItem({ expanded, onExpandedChange, title, headingLevel, children, ...rest }: AccordionItemProps): import("react").JSX.Element;

package/dist/components/core/accordion-item/AccordionItem.js

@@ -0,0 +1,63 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { ChevronDownRegularIcon } from '@deriv-com/quill-icons-web';
+import { Icon } from '../icon/Icon.js';
+import './AccordionItem.css';
+import './accordion-item-impl.css';
+import { accordionItemDefaults, accordionItemParts, } from './AccordionItem.types.js';
+/**
+ * One row: a heading that stays, and the detail under it that does not.
+ *
+ * It works alone and it works in a set, and the difference is only who holds the
+ * answer. Alone, the row keeps its own — `expanded` is read once as the state it
+ * opens in, and every press after that is its own business. Inside an Accordion
+ * the set injects `expanded` on every render, so the row stops deciding and
+ * starts reporting: a row cannot see its siblings, which is exactly the fact that
+ * makes one-at-a-time impossible to arrange from here.
+ *
+ * `useState` seeded from the prop rather than derived from it. A row that read
+ * the prop every render would be uncontrolled and unable to move; one that
+ * ignored it could not be opened by the set. Holding both and preferring the
+ * injected value is what lets the same component be either — and it is why
+ * `expanded` declares no default: absent has to stay distinguishable from false,
+ * because absent is the only way a row knows nobody is controlling it.
+ *
+ * The heading is a `<div role="heading">` with the level as a number, not an
+ * `<h3>`. The level is a prop, and an element cannot be picked at runtime without
+ * six branches saying the same thing — the role and `aria-level` say it once.
+ *
+ * `aria-expanded` sits on the button rather than the panel, because that is what
+ * the reader is about to press: the state belongs to the thing they act on, not
+ * to a region they cannot see until it opens.
+ *
+ * The panel is a named region, and the name is the heading that opened it. A
+ * `region` is a landmark, and an unnamed one is worse than none — it fills a
+ * screen reader's landmark list with anonymous entries nobody can choose between.
+ * Naming it is what makes it worth having: a reader who has found the question
+ * can jump straight to the answer. Product declines the role instead, which is
+ * also correct and is the other way to avoid the same fault; it can afford to
+ * because its rows open independently and a set of them would proliferate
+ * landmarks, where only one of these is ever open.
+ *
+ * The panel stays mounted when shut. Unmounting it would take its height with it,
+ * so there would be nothing to move between — and it would take the words out of
+ * the browser's own find-on-page, which is how a reader looks for an answer they
+ * half remember.
+ */
+export function AccordionItem({ expanded, onExpandedChange, title, headingLevel = accordionItemDefaults.headingLevel, children, ...rest }) {
+    // Seeded from the prop rather than derived from it, and `false` rather than a default the
+    // contract no longer declares: `expanded` is genuinely absent when nobody is controlling
+    // the row, and a default would have said it always holds a value.
+    const [held, setHeld] = useState(expanded ?? false);
+    // The set's answer wins while there is one. `undefined` is the row standing alone,
+    // which is a different thing from a set saying the row is shut.
+    const open = expanded ?? held;
+    const id = useId();
+    const panelId = `${id}-panel`;
+    const triggerId = `${id}-trigger`;
+    return (_jsxs("div", { className: accordionItemParts.root, "data-expanded": String(open), ...rest, children: [_jsx("div", { className: accordionItemParts.heading, role: "heading", "aria-level": Number(headingLevel), children: _jsxs("button", { type: "button", className: accordionItemParts.trigger, id: triggerId, "aria-expanded": open, "aria-controls": panelId, onClick: () => {
+                        setHeld(!open);
+                        onExpandedChange?.(!open);
+                    }, children: [_jsx("span", { className: accordionItemParts.title, children: title }), _jsx(Icon, { size: "sm", children: _jsx(ChevronDownRegularIcon, { className: accordionItemParts.marker }) })] }) }), _jsx("div", { className: accordionItemParts.panel, id: panelId, role: "region", "aria-labelledby": triggerId, hidden: !open, children: _jsx("div", { className: accordionItemParts.content, children: children }) })] }));
+}

package/dist/components/core/accordion-item/AccordionItem.types.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface AccordionItemOwnProps {
+    /** Whether the panel is showing. Inside an Accordion this is injected on every render and the set owns it — a row cannot see its siblings, so it cannot know it is the one that should close. Left off, the row owns itself: absent is not the same as false here, and that difference is the whole of how one component is both. `false` is a set saying the row is shut; absent is nobody saying anything, and the row answers its own presses from there */
+    expanded?: boolean;
+    /** The page needs to know the row was pressed — to record which question was asked, or to hold the answer itself. Inside an Accordion the set chains its own handler after this one, so a page keeps its report whether or not it is also controlling the row */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Always — it is the half of the row that is always on screen. A question in the reader's own words, or the name of the thing the panel details. A string rather than a node, for the reason CardBody's title is one: a node prop cannot be given text in an examples row, and a row nobody can show is worse than a heading that cannot hold a link */
+    title: string;
+    /**
+     * `2` — The rows are the page's own sections. Set on the Accordion rather than here, which pushes it down
+     * `3` — The default, and where an accordion usually sits — under a section heading of its own
+     * `4` — The set is inside a subsection that already carries a heading
+     */
+    headingLevel?: '2' | '3' | '4';
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type AccordionItemProps = AccordionItemOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'expanded' | 'onExpandedChange' | 'title' | 'headingLevel'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const accordionItemParts: {
+    readonly root: "dds-accordionitem";
+    readonly heading: "dds-accordionitem__heading";
+    readonly trigger: "dds-accordionitem__trigger";
+    readonly title: "dds-accordionitem__title";
+    readonly marker: "dds-accordionitem__marker";
+    readonly panel: "dds-accordionitem__panel";
+    readonly content: "dds-accordionitem__content";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const accordionItemDefaults: {
+    readonly headingLevel: "3";
+};

package/dist/components/core/accordion-item/AccordionItem.types.js

@@ -0,0 +1,13 @@
+// GENERATED from accordion-item.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const accordionItemParts = {
+    root: 'dds-accordionitem',
+    heading: 'dds-accordionitem__heading',
+    trigger: 'dds-accordionitem__trigger',
+    title: 'dds-accordionitem__title',
+    marker: 'dds-accordionitem__marker',
+    panel: 'dds-accordionitem__panel',
+    content: 'dds-accordionitem__content',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const accordionItemDefaults = { headingLevel: '3' };

package/dist/components/core/accordion-item/accordion-item-impl.css

@@ -0,0 +1,107 @@
+/*
+ * 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 — several here are written a class deeper than they look in order to
+ * match generated CSS, and a scope that carried weight would break all of them.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * The separator is between rows, so the first row has none.
+ *
+ * The rule is declared on every row — a border width binds all four sides at once and only the
+ * block-start edge is styled to draw — which makes the first row the exception rather than every
+ * other row the rule. Left in, it would draw a line across the top of a set that is a list rather
+ * than a box, and the set draws none under the last row for the same reason.
+ */
+:where([data-dds-context="marketing"]) .dds-accordionitem:first-child {
+  border-block-start-style: none;
+}
+
+/*
+ * The words take the room the mark does not.
+ *
+ * The trigger is a flex row of two things and only the title may wrap. Without a basis of its
+ * own a flex item will not shrink below its content, so a long question pushed the chevron off
+ * the end of the row instead of wrapping under itself.
+ */
+:where([data-dds-context="marketing"]) .dds-accordionitem__title {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+/*
+ * The row opens and shuts on its own height.
+ *
+ * A height is the only thing here worth animating. A fade tells a reader the panel arrived; the
+ * rows below it still jump to their new place in one frame, which is the movement they would
+ * actually notice — a set is a column, and opening one row moves every row under it.
+ *
+ * The panel is a grid of a single track and the track is what moves. `0fr` is a track with no
+ * space in it and `1fr` is a track with all of it, which on a grid of automatic height resolves
+ * to exactly the height of what is inside. That is the point: a number here would be a guess at
+ * how long an answer is, and the one thing a panel's height cannot be is known.
+ *
+ * Both boxes clip, and they are doing different jobs. The one on the content is what makes the
+ * collapse possible at all: a grid item's automatic minimum size down the block axis is its
+ * min-content height, so `0fr` alone is a track told to take no space and stopping at however
+ * tall the words are. An item that is a scroll container has an automatic minimum of zero, and
+ * `overflow: hidden` is what makes it one. The one on the panel clips the stub the collapse
+ * leaves behind, because the content's own inset renders outside a box of no height.
+ *
+ * `display` transitions too, and that is what makes the shut state real rather than merely
+ * short. This is the part the first version got wrong: it forced `display: grid` back on to keep
+ * the panel animatable and hid it with `visibility` instead, and `visibility: hidden` does not
+ * take a box out of the layout. A grid of no height is still a box — and the track is not even
+ * no height, because a flex factor under one is treated as one when the container's own height
+ * is indefinite, so the track keeps the item's base size and the content's bottom inset showed
+ * as a band of empty space under every shut row.
+ *
+ * So `hidden` stays on the panel and keeps its `display: none`, which is also what takes the
+ * contents out of the tab order and out of a screen reader. `allow-discrete` defers the flip to
+ * the end of the collapse rather than applying it in the first frame and cutting the animation
+ * off before it starts. Opening runs the other way — display flips first and the track then has
+ * somewhere to travel from, which is what `@starting-style` supplies: an element arriving from
+ * `display: none` has no previous style to interpolate out of, so without it the first frame is
+ * already the last one.
+ *
+ * A transition rather than a keyframe, because this is reversible and has to be interruptible: a
+ * reader who shuts a row halfway through opening it should have it travel back from where it is.
+ * The duration and the curve are tokens the contract binds per side of the axis.
+ */
+:where([data-dds-context="marketing"]) .dds-accordionitem__panel {
+  grid-template-rows: 0fr;
+  transition-property: grid-template-rows, display;
+  transition-behavior: allow-discrete;
+}
+
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded='true'] .dds-accordionitem__panel {
+  grid-template-rows: 1fr;
+}
+
+@starting-style {
+  .dds-accordionitem[data-expanded='true'] .dds-accordionitem__panel {
+    grid-template-rows: 0fr;
+  }
+}
+
+/*
+ * The chevron points where the row is going.
+ *
+ * Turned rather than swapped: a swap replaces the mark between frames and there is nothing to
+ * watch, where the turn is itself the movement that says which way the fold went. A rotation is
+ * not a property the contract can bind, which is the whole reason it is written here — the
+ * duration and the curve above it are tokens.
+ */
+:where([data-dds-context="marketing"]) .dds-accordionitem[data-expanded='true'] .dds-accordionitem__marker {
+  rotate: 180deg;
+}
+
+/*
+ * Reduced motion is answered by the generated sheet, which sets `transition: none` on this row
+ * and everything in it. Nothing is needed here, and a second rule saying the same thing weaker
+ * would be one more place to keep in step.
+ */

package/dist/components/core/badge/Badge.css

@@ -0,0 +1,37 @@
+/* GENERATED from badge.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-badge {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  inline-size: fit-content;
+  white-space: nowrap;
+  border-radius: var(--radius-pill);
+  font-family: var(--font-label-medium-sm-family);
+  font-size: var(--font-label-medium-sm-size);
+  font-weight: var(--font-label-medium-sm-weight);
+  gap: var(--space-gap-xs);
+  letter-spacing: var(--font-label-medium-sm-letter-spacing);
+  line-height: var(--font-label-medium-sm-line-height);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-badge .dds-badge__icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-badge[data-variant="accent"] {
+  background-color: var(--color-bg-brand-subtle);
+  color: var(--color-fg-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-badge[data-variant="neutral"] {
+  background-color: var(--color-bg-subtle);
+  color: var(--color-fg-default);
+}
+