@deriv-com/dds-marketing 0.1.0 → 1.0.0

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);
+}
+

package/dist/components/core/badge/Badge.d.ts

@@ -0,0 +1,37 @@
+import './Badge.css';
+import './badge-impl.css';
+import { type BadgeProps } from './Badge.types.js';
+export type { BadgeProps };
+/**
+ * A pill with a fill, one or two words, and a glyph if the page has one.
+ *
+ * The label is a prop rather than children, for the reason CardBody's title is
+ * one: a node prop cannot be given text in an examples row, and a badge nobody
+ * can show is worse than one that cannot hold a link.
+ *
+ * The glyph is drawn at the badge's own step rather than the page's. Icon
+ * unwraps one that arrives already sized, so a row of badges cannot quietly
+ * disagree about how big their marks are — which is the whole reason a slot
+ * hands its glyph to the component rather than the other way round.
+ *
+ * The words are not wrapped. A flex row treats bare text as an item, so the gap
+ * falls between the glyph and the label without an element in between to hang it
+ * on — and a span that carried nothing would be a part the stylesheet never names.
+ *
+ * The glyph slot is tested against `null` as well as `undefined`. CardBody's rule
+ * is that a node is not blank-able the way a string is, so `undefined` is enough —
+ * and that is right about blankness and wrong about absence. `null` is how React
+ * writes "no node here", and `icon={hasGlyph ? <GlobeRegularIcon /> : null}` is the
+ * ordinary shape of a conditional glyph. Read as present it renders an empty
+ * sixteen-pixel box and a four-pixel gap in a pill twenty-four tall, which is a
+ * visible dent with nothing in it — cheap in a card body, obvious in a mark.
+ *
+ * The leading inset closes to eight around the glyph, which the stylesheet beside the generated
+ * one does rather than the contract: what decides it is whether a glyph was passed, and a
+ * slot is not a styling axis, so there is no value for a binding to switch on.
+ *
+ * No role and no name. Its words are read in the order they sit on the page,
+ * and the glyph is decorative: what it says is already in the label beside it,
+ * so Icon marks it presentational and a screen reader passes over it.
+ */
+export declare function Badge({ variant, label, icon, ...rest }: BadgeProps): import("react").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Badge.css';
+import './badge-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { badgeDefaults, badgeParts } from './Badge.types.js';
+/**
+ * A pill with a fill, one or two words, and a glyph if the page has one.
+ *
+ * The label is a prop rather than children, for the reason CardBody's title is
+ * one: a node prop cannot be given text in an examples row, and a badge nobody
+ * can show is worse than one that cannot hold a link.
+ *
+ * The glyph is drawn at the badge's own step rather than the page's. Icon
+ * unwraps one that arrives already sized, so a row of badges cannot quietly
+ * disagree about how big their marks are — which is the whole reason a slot
+ * hands its glyph to the component rather than the other way round.
+ *
+ * The words are not wrapped. A flex row treats bare text as an item, so the gap
+ * falls between the glyph and the label without an element in between to hang it
+ * on — and a span that carried nothing would be a part the stylesheet never names.
+ *
+ * The glyph slot is tested against `null` as well as `undefined`. CardBody's rule
+ * is that a node is not blank-able the way a string is, so `undefined` is enough —
+ * and that is right about blankness and wrong about absence. `null` is how React
+ * writes "no node here", and `icon={hasGlyph ? <GlobeRegularIcon /> : null}` is the
+ * ordinary shape of a conditional glyph. Read as present it renders an empty
+ * sixteen-pixel box and a four-pixel gap in a pill twenty-four tall, which is a
+ * visible dent with nothing in it — cheap in a card body, obvious in a mark.
+ *
+ * The leading inset closes to eight around the glyph, which the stylesheet beside the generated
+ * one does rather than the contract: what decides it is whether a glyph was passed, and a
+ * slot is not a styling axis, so there is no value for a binding to switch on.
+ *
+ * No role and no name. Its words are read in the order they sit on the page,
+ * and the glyph is decorative: what it says is already in the label beside it,
+ * so Icon marks it presentational and a screen reader passes over it.
+ */
+export function Badge({ variant = badgeDefaults.variant, label, icon, ...rest }) {
+    return (_jsxs("span", { className: badgeParts.root, "data-variant": variant, ...rest, children: [icon === undefined || icon === null ? null : (_jsx("span", { className: badgeParts.icon, children: _jsx(Icon, { size: "xs", children: icon }) })), label] }));
+}

package/dist/components/core/badge/Badge.types.d.ts

@@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface BadgeOwnProps {
+    /**
+     * `accent` — The default, and the one a marketing page nearly always wants. A brand-coloured mark rather than a coral block: the tint carries the colour and the ink carries the words, which is what lets a badge sit on a card without competing with the card
+     * `neutral` — The badge is naming a kind rather than making a claim — a category on an article, a market type on a card. It marks without asking, which is what lets a page use several without the set becoming loud
+     */
+    variant?: 'accent' | 'neutral';
+    /** Always — it is the whole component. One or two words: 'New', 'Most popular', 'Save 20%'. 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 badge nobody can show is worse than one that cannot hold a link */
+    label: string;
+    /** A glyph that says what the badge is about faster than its word does — a globe on a badge reading 'For platforms', a spark on one reading 'New'. Pass the glyph; the badge draws it at its own step. Alongside the label and never instead of it.
+  
+  The regular weight, always: `GlobeRegularIcon` rather than `GlobeSolidIcon` or `GlobeLightIcon`. Icon has no weight prop and cannot have one — a Quill glyph's weight is chosen when it is imported — so this is the call site's to get right and there is nothing that will catch it */
+    icon?: ReactNode;
+}
+export type BadgeProps = BadgeOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'variant' | 'label' | 'icon'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const badgeParts: {
+    readonly root: "dds-badge";
+    readonly icon: "dds-badge__icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const badgeDefaults: {
+    readonly variant: "accent";
+};

package/dist/components/core/badge/Badge.types.js

@@ -0,0 +1,8 @@
+// GENERATED from badge.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const badgeParts = {
+    root: 'dds-badge',
+    icon: 'dds-badge__icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const badgeDefaults = { variant: 'accent' };

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

@@ -0,0 +1,32 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines the rule without contributing
+ * specificity, so what it overrides it overrides on its own terms: one class for
+ * `.dds-badge` and one for the `:has()` argument, against the generated rule's one.
+ */
+
+/*
+ * The leading inset closes up around a glyph.
+ *
+ * The root is inset twelve either side, which is the measure for words: at `radius.pill`
+ * the corner is half a twenty-four-pixel height, so the ends curve through twelve and a
+ * shorter inset would start the first letter inside the arc.
+ *
+ * A glyph is not a letter, and it does not need the same room. It arrives as a sixteen-pixel
+ * box with its mark drawn inside it, so it carries a margin a letter does not and twelve in
+ * front of it reads as more air than the label's own end has. Eight is the step below, and it
+ * is the one the badge was inset by before words and glyph were told apart — tighter than the
+ * label without collapsing onto the curve, which four does: four is the block inset, and an
+ * inline inset that matches it puts the mark hard against the arc at the one place the pill is
+ * narrowest.
+ *
+ * Here rather than in the contract because what decides it is whether the page passed an
+ * icon, and an icon is a slot rather than a styling axis: there is no value for a binding's
+ * `when` to name. `:has()` asks the question the DOM can answer — this badge, containing the
+ * part that is only rendered when there is a glyph — which is the same move BottomSheet's
+ * header makes about its leading end.
+ */
+:where([data-dds-context="marketing"]) .dds-badge:has(.dds-badge__icon) {
+  padding-inline-start: var(--space-inset-xs);
+}

package/dist/components/core/bottom-sheet/BottomSheet.css

@@ -0,0 +1,178 @@
+/* GENERATED from bottomsheet.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet {
+  transition-property: opacity, visibility;
+  align-items: flex-end;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: fixed;
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__scrim {
+  inset: 0;
+  position: absolute;
+  background-color: var(--color-bg-overlay);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__frame {
+  transition-property: translate;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  max-block-size: 100%;
+  min-block-size: 0;
+  position: relative;
+  max-inline-size: var(--size-sheet-max);
+  transition-duration: var(--motion-duration-slow);
+  transition-timing-function: var(--motion-easing-enter);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__surface {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  max-block-size: 100%;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-surface-modal);
+  border-start-end-radius: var(--radius-surface);
+  border-start-start-radius: var(--radius-surface);
+  box-shadow: var(--elevation-surface-modal);
+  color: var(--color-fg-default);
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__handle {
+  align-self: center;
+  flex-shrink: 0;
+  touch-action: none;
+  background-color: var(--color-bg-track);
+  block-size: var(--size-sheet-handle-height);
+  border-radius: var(--radius-pill);
+  inline-size: var(--size-sheet-handle-width);
+  margin-block-start: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__header {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  touch-action: none;
+  padding-block-start: var(--space-inset-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__leading {
+  align-items: center;
+  display: flex;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__heading {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  min-inline-size: 0;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__title {
+  inline-size: 100%;
+  margin: 0;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-fg-default);
+  font-family: var(--font-title-family);
+  font-size: var(--font-title-size);
+  font-weight: var(--font-title-weight);
+  letter-spacing: var(--font-title-letter-spacing);
+  line-height: var(--font-title-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__trailing {
+  align-items: center;
+  display: flex;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__description {
+  box-sizing: border-box;
+  margin: 0;
+  overflow: hidden;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet .dds-bottomsheet__body {
+  box-sizing: border-box;
+  min-block-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-block-end: var(--space-inset-md);
+  padding-block-start: var(--space-inset-xs);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-open="false"] {
+  pointer-events: none;
+  visibility: hidden;
+  opacity: var(--opacity-hidden);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-open="true"] {
+  pointer-events: auto;
+  visibility: visible;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="full"] .dds-bottomsheet__frame {
+  block-size: 100%;
+  max-inline-size: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="tall"] .dds-bottomsheet__frame {
+  block-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="full"] .dds-bottomsheet__surface {
+  block-size: 100%;
+  border-start-end-radius: var(--radius-none);
+  border-start-start-radius: var(--radius-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="tall"] .dds-bottomsheet__surface {
+  block-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-height="tall"] {
+  padding-block-start: var(--size-sheet-peek);
+}
+
+:where([data-dds-context="marketing"]) .dds-bottomsheet[data-open="false"] .dds-bottomsheet__frame {
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-exit);
+  translate: var(--motion-translate-enter);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-bottomsheet,
+  :where([data-dds-context="marketing"]) .dds-bottomsheet * { transition: none !important; }
+}
+

package/dist/components/core/bottom-sheet/BottomSheet.d.ts

@@ -0,0 +1,22 @@
+import './BottomSheet.css';
+import './bottom-sheet-impl.css';
+import { type BottomSheetProps } from './BottomSheet.types.js';
+export type { BottomSheetProps };
+/**
+ * A panel that rises from the bottom edge to hold one focused task.
+ *
+ * Mounted whether it is open or not, which is the decision everything else here follows from.
+ * A sheet that mounts on opening has no previous state to animate out of, so the reveal would
+ * be a jump — and the contract's `open` axis is what the stylesheet varies, which it cannot do
+ * to an element that is not there. What keeps a shut sheet out of the reading order and out of
+ * the tab order is `visibility: hidden` in the generated CSS rather than anything written here:
+ * an `aria-hidden` or an `inert` set from this file would say the same thing twice, and the two
+ * would disagree the first time one of them changed.
+ *
+ * It owns none of its own openness. Every way out — the close button, the scrim, Escape, the
+ * drag — reports through `onOpenChange` and changes nothing, so a page that does not answer that
+ * callback has a sheet that cannot be closed. That is the same shape every other controlled
+ * component in this package takes, and the reason is the same: two things holding one fact
+ * disagree eventually, and the consumer is the one that has to win.
+ */
+export declare function BottomSheet(props: BottomSheetProps): import("react").JSX.Element;