@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/segmented-control-item/SegmentedControlItem.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+import "./SegmentedControlItem.css";
+import "./segmented-control-item-impl.css";
+import { segmentedControlItemDefaults, segmentedControlItemParts, } from "./SegmentedControlItem.types.js";
+/**
+ * One segment in a row, as a radio.
+ *
+ * A `<button>` carrying `role="radio"` rather than an `<input type="radio">`, and the
+ * reason is the label: a real radio input cannot hold a glyph beside its text, so the
+ * mark and the words would have to live in a sibling `<label>` and the box the reader
+ * presses would stop being the box that paints. The role and `aria-checked` give a
+ * screen reader everything the input would have, and `SegmentedControl` supplies the
+ * rest of the pattern — one tab stop, and the arrow keys inside it.
+ *
+ * Two of the props are the row's rather than the consumer's. `selected` is, because only
+ * one segment may be chosen and a segment cannot see its siblings; `size` is, because a
+ * row at mixed heights is not a row. Both are overwritten on every render of the group.
+ * `disabled` is the consumer's, and bars this one option while the rest still answer.
+ *
+ * It declares no height. The row fixes its own to the control ramp and stretches its
+ * segments inside it, so a segment is whatever the control is less the inset either
+ * side — which is what spares this package the second size ramp Product keeps in step
+ * with the first by hand.
+ *
+ * `disabled` is `aria-disabled` and a data attribute, never the native attribute. A
+ * native `disabled` removes the button from the accessibility tree, so a reader would
+ * not be told the option is there and unavailable — they would never learn it exists,
+ * which is the one outcome this prop is for. Being non-native it has to be enforced
+ * here, so `onClick` is swallowed while it holds. The stylesheet reads `data-disabled`
+ * for the same reason: `:disabled` would never match, and a rule written against it is
+ * one the browser discards in silence.
+ *
+ * Both data attributes are written in either direction rather than omitted when false.
+ * A styling axis is read by attribute selectors both ways — the hover tint is bound on
+ * `selected: false` and `disabled: false` — and an attribute absent when false matches
+ * neither.
+ *
+ * The spread goes before the attributes this component decides rather than after, which
+ * is the opposite of Tab in this package. Those are attributes the component owns, so a
+ * consumer overriding one meant to; these *are* the component. A `data-selected` from
+ * outside would repaint the segment into a state its own prop contradicts, and an
+ * `aria-checked` from outside would tell the reader a different value is in force.
+ * `tabIndex` is deliberately left in the spread, because that one is the row's to set —
+ * it is how the roving tab stop arrives.
+ *
+ * `value` is destructured rather than left in the rest spread even though it is read
+ * here: on a `<button>` a `value` attribute means something else entirely, and the row
+ * reads this one off the element's props without it ever needing to reach the DOM.
+ */
+export function SegmentedControlItem({ selected = segmentedControlItemDefaults.selected, disabled = segmentedControlItemDefaults.disabled, size = segmentedControlItemDefaults.size, value, label, icon, onSelect, onClick, ...rest }) {
+    /*
+      The glyph, cloned rather than wrapped — the same shape ButtonIcon uses here, and for
+      the same reason. Every glyph in the icon package ships `width` and `height`
+      presentation attributes defaulting to 24, and the only thing that overrides a
+      presentation attribute is a CSS length on the element carrying it. A box around the
+      mark would keep its own measure while the mark kept the package's.
+  
+      Not Marketing's own Icon, which Tab and Badge wrap their glyphs in: Icon draws from
+      `icon.size.*`, and that ramp has no step an md segment could ask for — it goes 16
+      then 20 where the control ramp goes 16, 18, 20 — so the mark would land a measure
+      away from the same glyph in the Button beside it.
+  
+      `aria-hidden`, because the mark names nothing the label has not already named.
+    */
+    const mark = icon === undefined || icon === null ? null : isValidElement(icon) ? (cloneElement(icon, {
+        className: [segmentedControlItemParts.icon, icon.props.className]
+            .filter(Boolean)
+            .join(" "),
+        "aria-hidden": "true",
+    })) : (
+    /*
+      Anything that is not a single element cannot be cloned, and the preview hands
+      every node slot a sample string. A box keeps the class on something, so the part
+      stays findable and the generated test still sees it.
+    */
+    _jsx("span", { className: segmentedControlItemParts.icon, "aria-hidden": "true", children: icon }));
+    return (_jsxs("button", { ...rest, 
+        /*
+          Never a submit. The element's own default is `submit`, so a segment inside a
+          signup form would post it — a navigation nobody asked for, and the one default
+          worth overriding.
+        */
+        type: "button", role: "radio", className: segmentedControlItemParts.root, "data-selected": String(selected), "data-disabled": String(disabled), "data-size": size, "aria-checked": selected, "aria-disabled": disabled ? true : undefined, 
+        /*
+          Both handlers, the consumer's first — the same chaining TabList does for its tabs.
+          A page's own `onClick` replacing this one wholesale would mean a segment that
+          logged its own press stopped telling the row it had been pressed, and the
+          selection silently stopped moving.
+  
+          Swallowed entirely while barred, because `aria-disabled` is a word to a screen
+          reader and nothing at all to the browser.
+        */
+        onClick: disabled
+            ? undefined
+            : (event) => {
+                onClick?.(event);
+                onSelect?.(value);
+            }, children: [mark, _jsxs("span", { className: segmentedControlItemParts.label, children: [label, _jsx("span", { className: segmentedControlItemParts.sizer, "aria-hidden": "true", children: label })] })] }));
+}

package/dist/components/core/segmented-control-item/SegmentedControlItem.types.d.ts

@@ -0,0 +1,37 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export interface SegmentedControlItemOwnProps {
+    /**
+     * `sm` — A control seated in something already dense — a filter row, a picker in a navigation bar. Desktop only: below what a finger reliably hits
+     * `md` — The default. Sized to a medium control, so the row lines up with the fields and buttons next to it
+     * `lg` — A choice in a hero or a conversion band, where the control is the point of the section rather than an adjustment within it
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Always. It names this segment for a group that is told which value is in force from outside, and it is what reaches the consumer's onChange when the segment is pressed */
+    value: string;
+    /** Always — it is the segment's accessible name as well as its words, and a radio with no name is announced as a control with nothing in it. One or two words: a row is scanned across, and the segment that needs a phrase is a choice that wanted a list */
+    label: string;
+    /** The glyph tells the modes apart faster than the words do — a card and a bank beside two payment methods. Import it from @deriv-com/quill-icons-web and pass the element */
+    icon?: ReactNode;
+    /** This segment reports its own presses — logging which plan a visitor looked at, say. It is called with this segment's value, and SegmentedControl chains its own handler after it rather than replacing it */
+    onSelect?: (value: string) => void;
+}
+export type SegmentedControlItemProps = SegmentedControlItemOwnProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'selected' | 'disabled' | 'size' | 'value' | 'label' | 'icon' | 'onSelect'> & ({
+    selected?: boolean;
+    disabled?: false;
+} | {
+    selected?: false;
+    disabled?: boolean;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const segmentedControlItemParts: {
+    readonly root: "dds-segmentedcontrolitem";
+    readonly icon: "dds-segmentedcontrolitem__icon";
+    readonly label: "dds-segmentedcontrolitem__label";
+    readonly sizer: "dds-segmentedcontrolitem__sizer";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const segmentedControlItemDefaults: {
+    readonly selected: false;
+    readonly disabled: false;
+    readonly size: "md";
+};

package/dist/components/core/segmented-control-item/SegmentedControlItem.types.js

@@ -0,0 +1,10 @@
+// GENERATED from segmented-control-item.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const segmentedControlItemParts = {
+    root: 'dds-segmentedcontrolitem',
+    icon: 'dds-segmentedcontrolitem__icon',
+    label: 'dds-segmentedcontrolitem__label',
+    sizer: 'dds-segmentedcontrolitem__sizer',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const segmentedControlItemDefaults = { selected: false, disabled: false, size: 'md' };

package/dist/components/core/segmented-control-item/segmented-control-item-impl.css

@@ -0,0 +1,69 @@
+/*
+ * 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 pointer belongs to the segment, not to what is drawn inside it.
+ *
+ * A glyph and a label are both hit targets of their own as far as pointer events are
+ * concerned, and a click landing on the label reports the label as its target. That
+ * matters here rather than only in theory: SegmentedControl answers an arrow key by
+ * focusing a segment and clicking it, and it finds the segment by its own class — so a
+ * target that is the label instead is a lookup that quietly returns nothing.
+ *
+ * The root is deliberately absent from this list. Its ground is bound on `:hover`, and a
+ * box that refuses the pointer is never hovered; its children being inert is what keeps
+ * the pointer over the label reporting the button underneath it.
+ */
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem__icon,
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem__label {
+  pointer-events: none;
+}
+
+/*
+ * The dim is instant; the hover tint and the focus ring are not.
+ *
+ * The generated list is every property that varies by an axis, and `opacity` varies by
+ * `disabled` — so becoming unavailable was being animated because it could be, not
+ * because anyone chose it. Becoming unavailable is a change of state rather than a
+ * movement: there is nowhere for it to travel to, and easing it leaves the segment
+ * reading as half available for as long as it runs.
+ *
+ * One class is enough here, unlike the label's rule below: the generated selector for a
+ * root part is the bare component class, so this ties on specificity and wins on load
+ * order.
+ */
+:where([data-dds-context="marketing"]) .dds-segmentedcontrolitem {
+  transition-property: background-color, outline-color, outline-width;
+}
+
+/*
+ * The label fades its colour and steps its weight without easing it.
+ *
+ * The generated `transition-property` lists everything that varies, and both the ink and
+ * the weight do. The face ships as separate cuts rather than a variable one, so an
+ * interpolated weight lands between two of them and snaps anyway — and weight is the
+ * property that changes the word's width, so easing it would drag the segment's
+ * neighbours along on every press and move the box the row is measuring its pill
+ * against. Fading the ink while the shape steps is the honest version of that.
+ *
+ * Written here because the list is computed: a contract can say how long a change takes
+ * and on what curve, and cannot say which of the changes it applies to.
+ *
+ * Two classes deep to match what it overrides. The generated rule is
+ * `.dds-segmentedcontrolitem .dds-segmentedcontrolitem__label`, so a bare class here
+ * would lose on specificity however late it loaded — the quiet way an override of
+ * generated CSS fails.
+ */
+:where([data-dds-context="marketing"])
+  .dds-segmentedcontrolitem
+  .dds-segmentedcontrolitem__label {
+  transition-property: color;
+}

package/dist/components/core/select/Select.css

@@ -0,0 +1,400 @@
+/* GENERATED from select.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__label-row {
+  align-items: center;
+  display: flex;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__label {
+  transition-property: color;
+  align-items: center;
+  display: flex;
+  color: var(--color-fg-default);
+  gap: var(--space-gap-xs);
+  min-block-size: var(--size-target-min);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__label-tooltip {
+  transition-property: background-color, color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  outline-style: solid;
+  padding: unset;
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-muted);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__control {
+  transition-property: background-color, border-color, box-shadow, opacity, outline-color, outline-width;
+  align-items: center;
+  border-style: solid;
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  outline-style: solid;
+  position: relative;
+  background-color: var(--color-bg-field);
+  border-color: var(--color-border-default);
+  border-width: var(--border-width-default);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__field {
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  block-size: 100%;
+  border-style: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  flex: auto;
+  inline-size: 100%;
+  justify-content: space-between;
+  min-inline-size: 0;
+  outline-style: solid;
+  padding-block: 0;
+  text-align: start;
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__answer {
+  align-items: center;
+  display: flex;
+  flex: auto;
+  min-inline-size: 0;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__value {
+  flex: auto;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__trailing-icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  color: var(--color-fg-muted);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__popup {
+  border-style: solid;
+  box-sizing: border-box;
+  inset-block-start: 100%;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  overflow-y: auto;
+  position: absolute;
+  background-color: var(--color-bg-surface-raised);
+  border-color: var(--color-border-subtle);
+  border-radius: var(--radius-menu);
+  border-width: var(--border-width-default);
+  box-shadow: var(--elevation-surface-floating);
+  margin-block-start: var(--space-gap-sm);
+  max-block-size: var(--size-menu-max);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__search {
+  box-sizing: border-box;
+  inset-block-start: 0;
+  position: sticky;
+  background-color: var(--color-bg-field);
+  padding-block-end: var(--space-inset-2xs);
+  padding-block-start: var(--space-inset-xs);
+  padding-inline: var(--space-inset-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__listbox {
+  list-style: none;
+  margin: 0;
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__message {
+  transition-property: color;
+  align-items: flex-start;
+  display: flex;
+  overflow-wrap: anywhere;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  gap: var(--space-gap-xs);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__message-icon {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  font-size: var(--font-body-sm-size);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-fixed="true"] .dds-select__trailing-icon {
+  display: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__empty {
+  color: var(--color-fg-muted);
+  padding-block: var(--space-inset-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__helper {
+  transition-property: color;
+  color: var(--color-fg-muted);
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  letter-spacing: var(--font-body-sm-letter-spacing);
+  line-height: var(--font-body-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__optional-mark {
+  transition-property: color;
+  color: var(--color-fg-muted);
+  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-select .dds-select__required-mark {
+  transition-property: color;
+  color: var(--color-fg-required);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__label-tooltip:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__label-tooltip:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__label-tooltip:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-select:has(.dds-select__field:focus-visible) .dds-select__control {
+  border-color: var(--color-border-focus);
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-hairline);
+}
+
+:where([data-dds-context="marketing"]) .dds-select:has(.dds-select__field:disabled:not(:where(:disabled *))) .dds-select__control {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-select:has(.dds-select__field:disabled) .dds-select__helper {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-select:has(.dds-select__field:disabled) .dds-select__label {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-select:has(.dds-select__field:disabled) .dds-select__message {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-select:has(.dds-select__field:disabled) .dds-select__optional-mark {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-select:has(.dds-select__field:disabled) .dds-select__required-mark {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-fixed="true"] .dds-select__control {
+  background-color: var(--color-bg-readonly);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="lg"] .dds-select__control {
+  block-size: var(--size-control-lg);
+  border-radius: var(--radius-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="lg"] .dds-select__empty {
+  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-select[data-size="lg"] .dds-select__field {
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="lg"] .dds-select__label {
+  font-family: var(--font-field-label-lg-family);
+  font-size: var(--font-field-label-lg-size);
+  font-weight: var(--font-field-label-lg-weight);
+  letter-spacing: var(--font-field-label-lg-letter-spacing);
+  line-height: var(--font-field-label-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="lg"] .dds-select__value {
+  font-family: var(--font-body-lg-family);
+  font-size: var(--font-body-lg-size);
+  font-weight: var(--font-body-lg-weight);
+  letter-spacing: var(--font-body-lg-letter-spacing);
+  line-height: var(--font-body-lg-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="md"] .dds-select__control {
+  block-size: var(--size-control-md);
+  border-radius: var(--radius-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="md"] .dds-select__empty {
+  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-select[data-size="md"] .dds-select__field {
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="md"] .dds-select__label {
+  font-family: var(--font-field-label-md-family);
+  font-size: var(--font-field-label-md-size);
+  font-weight: var(--font-field-label-md-weight);
+  letter-spacing: var(--font-field-label-md-letter-spacing);
+  line-height: var(--font-field-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="md"] .dds-select__value {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="sm"] .dds-select__control {
+  block-size: var(--size-control-sm);
+  border-radius: var(--radius-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="sm"] .dds-select__empty {
+  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-select[data-size="sm"] .dds-select__field {
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="sm"] .dds-select__label {
+  font-family: var(--font-field-label-md-family);
+  font-size: var(--font-field-label-md-size);
+  font-weight: var(--font-field-label-md-weight);
+  letter-spacing: var(--font-field-label-md-letter-spacing);
+  line-height: var(--font-field-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-size="sm"] .dds-select__value {
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="error"] .dds-select__control {
+  border-color: var(--color-border-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="error"] .dds-select__message {
+  color: var(--color-fg-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="pending"] .dds-select__message {
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="success"] .dds-select__control {
+  border-color: var(--color-border-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="success"] .dds-select__message {
+  color: var(--color-fg-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="warning"] .dds-select__control {
+  border-color: var(--color-border-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="warning"] .dds-select__message {
+  color: var(--color-fg-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-fixed="false"] .dds-select__control:hover:where(:not(:has(.dds-select__field:disabled))) {
+  box-shadow: var(--elevation-ring-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="error"]:has(.dds-select__field:focus-visible) .dds-select__control {
+  border-color: var(--color-border-danger);
+  outline-color: var(--color-border-danger);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="success"]:has(.dds-select__field:focus-visible) .dds-select__control {
+  border-color: var(--color-border-success);
+  outline-color: var(--color-border-success);
+}
+
+:where([data-dds-context="marketing"]) .dds-select[data-status="warning"]:has(.dds-select__field:focus-visible) .dds-select__control {
+  border-color: var(--color-border-warning);
+  outline-color: var(--color-border-warning);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__label-tooltip:disabled {
+  cursor: not-allowed;
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__field:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-select,
+  :where([data-dds-context="marketing"]) .dds-select * { transition: none; }
+}
+

package/dist/components/core/select/Select.d.ts

@@ -0,0 +1,29 @@
+import './Select.css';
+import './select-impl.css';
+import { type SelectProps } from './Select.types.js';
+export type { SelectProps };
+/**
+ * A control for choosing one answer from a set the reader scans.
+ *
+ * Built as marketing's TextInput is built — a box that draws the border and the fill, and one
+ * element inside it holding the value — because that is what makes a form of mixed controls line
+ * up. The difference is the element inside: a text field's is an `<input>`, which can hold
+ * nothing, so its ornaments sit beside it and part of its box is not the field. Here it is a
+ * `<button>`, which can hold what it needs, so the whole box presses.
+ *
+ * Announced as a combobox, which is the name for a control that owns a list of answers whether
+ * or not anything can be typed into it. That role replaces the button's own activation on the
+ * way in, so Enter and Space are written here rather than inherited.
+ *
+ * Focus never leaves the box. Nothing here takes the caret — not even the search field, which is
+ * reachable with a pointer and otherwise fed from the box: every letter typed at the control goes
+ * into the query, so a keyboard never needs to be in the field to narrow the list. The rows are
+ * not focusable either, and the box says through `aria-activedescendant` which one the arrow keys
+ * are resting on; moving focus into the list would cost a tab stop per answer, which on a
+ * marketing page is a tab stop between the visitor and the button that submits the form.
+ *
+ * So Tab is one stop whether the list is open or shut. Open, it shuts the list on the way past
+ * rather than walking into the surface — the field and its clear button are furniture, and a
+ * reader tabbing out of a control has said they are done with it.
+ */
+export declare function Select(props: SelectProps): import("react").JSX.Element;