@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/removable-chip/RemovableChip.d.ts

@@ -0,0 +1,25 @@
+import './RemovableChip.css';
+import { type RemovableChipProps } from './RemovableChip.types.js';
+export type { RemovableChipProps };
+/**
+ * A token for something already in play, which the reader can take away.
+ *
+ * The pill is not a control. The only thing to press is the cross, so making the
+ * token itself pressable would give one act two targets and nest a button inside a
+ * button — one ambiguous hit target with an inner half no keyboard can reach, which
+ * this package forbids across Button, Link and TextInput. The words are words; the
+ * cross is the control.
+ *
+ * It carries a painted brand ground where a FilterChip at rest carries an outline,
+ * which is what says the thing is already in play rather than merely on offer — at
+ * the same height and corner, so the two still stand level in one row. The ground is
+ * the dark brand surface rather than the neutral one a chosen FilterChip takes:
+ * both are painted, and the hue is what keeps a token already applied distinct from
+ * a narrowing the reader has only just switched on.
+ *
+ * The cross is regular weight, not the solid one product reaches for. Solid means
+ * selected in this package, and a dismissal is not a selection: a solid glyph used
+ * for anything else teaches a reader that the weight means nothing, and they carry
+ * that into the product.
+ */
+export declare function RemovableChip({ size, disabled, label, leadingIcon, onRemove, removeLabel, ...rest }: RemovableChipProps): import("react").JSX.Element;

package/dist/components/core/removable-chip/RemovableChip.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XmarkRegularIcon } from '@deriv-com/quill-icons-web';
+import './RemovableChip.css';
+import { Icon } from '../icon/Icon.js';
+import { removableChipDefaults, removableChipGlyphStep, removableChipParts, } from './RemovableChip.types.js';
+/**
+ * A token for something already in play, which the reader can take away.
+ *
+ * The pill is not a control. The only thing to press is the cross, so making the
+ * token itself pressable would give one act two targets and nest a button inside a
+ * button — one ambiguous hit target with an inner half no keyboard can reach, which
+ * this package forbids across Button, Link and TextInput. The words are words; the
+ * cross is the control.
+ *
+ * It carries a painted brand ground where a FilterChip at rest carries an outline,
+ * which is what says the thing is already in play rather than merely on offer — at
+ * the same height and corner, so the two still stand level in one row. The ground is
+ * the dark brand surface rather than the neutral one a chosen FilterChip takes:
+ * both are painted, and the hue is what keeps a token already applied distinct from
+ * a narrowing the reader has only just switched on.
+ *
+ * The cross is regular weight, not the solid one product reaches for. Solid means
+ * selected in this package, and a dismissal is not a selection: a solid glyph used
+ * for anything else teaches a reader that the weight means nothing, and they carry
+ * that into the product.
+ */
+export function RemovableChip({ size = removableChipDefaults.size, disabled = removableChipDefaults.disabled, label, leadingIcon, onRemove, removeLabel = removableChipDefaults.removeLabel, ...rest }) {
+    return (_jsxs("span", { className: removableChipParts.root, ...rest, "data-disabled": String(disabled), "data-size": size, children: [leadingIcon !== undefined && (_jsx("span", { className: removableChipParts.icon, children: _jsx(Icon, { size: removableChipGlyphStep[size], children: leadingIcon }) })), _jsx("span", { className: removableChipParts.label, children: label }), _jsx("button", { type: "button", className: removableChipParts.remove, "aria-label": removeLabel, 
+                /*
+                  The native attribute rather than aria-disabled: there is nothing here to
+                  explain, and this takes the cross out of the tab order instead of
+                  announcing it and refusing. Dimming alone would leave a live control on a
+                  token the reader was told they could not drop.
+                */
+                disabled: disabled, onClick: onRemove, children: _jsx(XmarkRegularIcon, { className: removableChipParts['remove-icon'], "aria-hidden": "true" }) })] }));
+}

package/dist/components/core/removable-chip/RemovableChip.types.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface RemovableChipOwnProps {
+    /** The token cannot be removed just now — something else is in progress, or the narrowing is the last one and the index will not show nothing. It dims and takes the cross out of the tab order */
+    disabled?: boolean;
+    /**
+     * `sm` — The default, and the same measure a FilterChip takes at its own default, so a row holding both sits level
+     * `md` — A touch-first layout, level with a FilterChip at its largest. The cross gains room around it rather than growing: it is already at the smallest a target may be
+     */
+    size?: 'sm' | 'md';
+    /** Always, and required on that account — it names the thing the token stands for. Short enough to read at a glance in a row of them */
+    label: string;
+    /** A glyph makes the kind of thing recognisable before the words are read. It sits before the name and never replaces it. Pass the glyph itself rather than one already wrapped in an Icon: the token wraps it at icon.size.xs at sm and icon.size.sm at md. */
+    leadingIcon?: ReactNode;
+    /** Always, and required on that account: removal is the whole of what this component does, and a cross reporting to nobody is the clearest promise a chip can break — the reader presses it more than once before deciding the page is at fault */
+    onRemove: () => void;
+    /** The accessible name of the cross, which announces nothing on its own. Override it to name what is going: a row of buttons all saying Remove leaves a reader who cannot see the tokens unable to tell which one they are about to lose */
+    removeLabel?: string;
+}
+export type RemovableChipProps = RemovableChipOwnProps & Omit<HTMLAttributes<HTMLSpanElement>, 'className' | 'disabled' | 'size' | 'label' | 'leadingIcon' | 'onRemove' | 'removeLabel'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const removableChipParts: {
+    readonly root: "dds-removablechip";
+    readonly icon: "dds-removablechip__icon";
+    readonly label: "dds-removablechip__label";
+    readonly remove: "dds-removablechip__remove";
+    readonly 'remove-icon': "dds-removablechip__remove-icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const removableChipDefaults: {
+    readonly disabled: false;
+    readonly size: "sm";
+    readonly removeLabel: "Remove";
+};
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export declare const removableChipGlyphStep: {
+    readonly sm: "xs";
+    readonly md: "sm";
+};

package/dist/components/core/removable-chip/RemovableChip.types.js

@@ -0,0 +1,13 @@
+// GENERATED from removable-chip.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const removableChipParts = {
+    root: 'dds-removablechip',
+    icon: 'dds-removablechip__icon',
+    label: 'dds-removablechip__label',
+    remove: 'dds-removablechip__remove',
+    'remove-icon': 'dds-removablechip__remove-icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const removableChipDefaults = { disabled: false, size: 'sm', removeLabel: 'Remove' };
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export const removableChipGlyphStep = { sm: 'xs', md: 'sm' };

package/dist/components/core/search-input/SearchInput.css

@@ -0,0 +1,205 @@
+/* GENERATED from searchinput.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-searchinput {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__label {
+  transition-property: color;
+  align-items: center;
+  display: flex;
+  color: var(--color-fg-default);
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__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;
+  background-color: var(--color-bg-field);
+  border-color: var(--color-border-default);
+  border-width: var(--border-width-default);
+  gap: var(--space-gap-sm);
+  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-searchinput .dds-searchinput__search-icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  color: var(--color-fg-muted);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__field {
+  background-color: transparent;
+  block-size: 100%;
+  border-style: none;
+  box-sizing: border-box;
+  flex: auto;
+  min-inline-size: 0;
+  outline-style: solid;
+  padding: unset;
+  color: var(--color-fg-default);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__clear {
+  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-searchinput .dds-searchinput__field::placeholder {
+  color: var(--color-fg-tertiary);
+  font-weight: var(--font-body-md-weight);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__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-searchinput .dds-searchinput__clear:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__control:hover:where(:not(:has(.dds-searchinput__field:disabled))) {
+  box-shadow: var(--elevation-ring-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__clear:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput .dds-searchinput__clear:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput:has(.dds-searchinput__field:focus-visible) .dds-searchinput__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-searchinput:has(.dds-searchinput__field[readonly]) .dds-searchinput__control {
+  background-color: var(--color-bg-readonly);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput:has(.dds-searchinput__field:disabled:not(:where(:disabled *))) .dds-searchinput__control {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput:has(.dds-searchinput__field:disabled) .dds-searchinput__helper {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput:has(.dds-searchinput__field:disabled) .dds-searchinput__label {
+  color: var(--color-fg-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput[data-size="lg"] .dds-searchinput__control {
+  block-size: var(--size-control-lg);
+  border-radius: var(--radius-control-lg);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput[data-size="lg"] .dds-searchinput__field {
+  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-searchinput[data-size="lg"] .dds-searchinput__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-searchinput[data-size="md"] .dds-searchinput__control {
+  block-size: var(--size-control-md);
+  border-radius: var(--radius-control-md);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput[data-size="md"] .dds-searchinput__field {
+  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-searchinput[data-size="md"] .dds-searchinput__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-searchinput[data-size="sm"] .dds-searchinput__control {
+  block-size: var(--size-control-sm);
+  border-radius: var(--radius-control-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-searchinput[data-size="sm"] .dds-searchinput__field {
+  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-searchinput[data-size="sm"] .dds-searchinput__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-searchinput .dds-searchinput__field:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-searchinput,
+  :where([data-dds-context="marketing"]) .dds-searchinput * { transition: none; }
+}
+

package/dist/components/core/search-input/SearchInput.d.ts

@@ -0,0 +1,5 @@
+import './SearchInput.css';
+import './search-input-impl.css';
+import { type SearchInputProps } from './SearchInput.types.js';
+export type { SearchInputProps };
+export declare function SearchInput(props: SearchInputProps): import("react").JSX.Element;

package/dist/components/core/search-input/SearchInput.js

@@ -0,0 +1,81 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { CircleXmarkSolidIcon, MagnifyingGlassRegularIcon } from '@deriv-com/quill-icons-web';
+import './SearchInput.css';
+import './search-input-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { given } from '../../given.js';
+import { visuallyHidden } from '../../visually-hidden.js';
+import { searchInputDefaults, searchInputParts } from './SearchInput.types.js';
+/** The step the two marks this component draws itself take, against the query beside them. */
+const fieldGlyphStep = { sm: 'xs', md: 'xs', lg: 'sm' };
+export function SearchInput(props) {
+    const { size = searchInputDefaults.size, label, showLabel = searchInputDefaults.showLabel, placeholder, helperText, value, defaultValue, onChange, onSearch, clearLabel, ...rest } = props;
+    /**
+     * One id for the field, and one for the helper.
+     *
+     * `useId` rather than a prop, because a marketing page renders a search in the header and
+     * again on the page it lands on, and two fields sharing a `for` means clicking the second
+     * label focuses the first.
+     */
+    const base = useId();
+    const fieldId = `${base}-field`;
+    const field = useRef(null);
+    /**
+     * The query, held here only when nobody else is holding it.
+     *
+     * Unlike the other two fields in this package, this one owns the value: the clear button and
+     * Escape both empty it, and neither can be expressed as a change the consumer made unless the
+     * component knows what the query currently is.
+     */
+    const controlled = 'value' in props;
+    const [held, setHeld] = useState(defaultValue ?? '');
+    const query = controlled ? (value ?? '') : held;
+    const report = (next) => {
+        if (!controlled)
+            setHeld(next);
+        onChange?.(next);
+    };
+    return (_jsxs("div", { className: searchInputParts.root, "data-size": size, children: [_jsx("label", { className: searchInputParts.label, htmlFor: fieldId, style: showLabel ? undefined : visuallyHidden, children: label }), _jsxs("div", { className: searchInputParts.control, 
+                // Only when the box itself was hit: the inset belongs to the box, so there is a strip
+                // of it that is not the input, and clicking it would otherwise do nothing where a
+                // native input's own padding puts the caret in.
+                onMouseDown: (event) => {
+                    if (event.target === event.currentTarget)
+                        field.current?.focus();
+                }, children: [_jsx("span", { className: searchInputParts['search-icon'], "aria-hidden": "true", children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(MagnifyingGlassRegularIcon, {}) }) }), _jsx("input", { ref: field, className: searchInputParts.field, id: fieldId, 
+                        /* What makes this a searchbox rather than a textbox, and half the reason the component
+                           exists apart from TextInput. The browser's own clear chrome arrives with it and is
+                           suppressed in search-input-impl.css. */
+                        type: "search", placeholder: placeholder, value: query, ...rest, onChange: (event) => report(event.currentTarget.value), 
+                        /* Escape empties, Enter commits — the two gestures TextInput cannot have.
+                           Escape is the one that could not live in a form field: losing a half-typed query
+                           costs a keystroke, and losing a half-typed name costs the name. */
+                        onKeyDown: (event) => {
+                            // Theirs first, and honoured if it stops the event. A handler that runs second and
+                            // only sometimes is worse than one that does not run at all: a page listening for
+                            // Escape to close its search panel would lose it on any field holding a query and
+                            // keep it on every empty one.
+                            rest.onKeyDown?.(event);
+                            if (event.defaultPrevented)
+                                return;
+                            if (event.key === 'Escape' && query !== '') {
+                                event.preventDefault();
+                                report('');
+                                return;
+                            }
+                            // Only where there is something to commit to. Preventing the default on Enter
+                            // regardless would stop a search inside a form from ever submitting it — the
+                            // browser's own behaviour, taken from every consumer who never asked for onSearch.
+                            if (event.key === 'Enter' && onSearch !== undefined) {
+                                event.preventDefault();
+                                onSearch(query);
+                            }
+                        }, "aria-describedby": [given(helperText) ? `${base}-helper` : undefined, rest['aria-describedby']]
+                            .filter(Boolean)
+                            .join(' ') || undefined }), query !== '' && rest.disabled !== true ? (_jsx("button", { type: "button", className: searchInputParts.clear, "aria-label": clearLabel, onClick: () => {
+                            report('');
+                            field.current?.focus();
+                        }, children: _jsx(Icon, { size: fieldGlyphStep[size], children: _jsx(CircleXmarkSolidIcon, {}) }) })) : null] }), given(helperText) ? (_jsx("span", { className: searchInputParts.helper, id: `${base}-helper`, children: helperText })) : null] }));
+}

package/dist/components/core/search-input/SearchInput.types.d.ts

@@ -0,0 +1,43 @@
+import type { InputHTMLAttributes } from 'react';
+export interface SearchInputOwnProps {
+    /**
+     * `sm` — A search that is one control among several — a filter bar above a list, or a navigation row. Desktop layouts only: at thirty-two it is below what a finger reliably hits
+     * `md` — The default — a search in a help centre's header, or above an index the page already holds
+     * `lg` — A search that is the reason the section exists: a knowledge base landing page whose one job is to take a query
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /** Always — a field announced as a searchbox still needs a name, and "Search" alone does not say what is being searched. "Search transactions", not "Search". Hide it with showLabel where the page has no room; it stays in the accessible tree either way */
+    label: string;
+    /** Drawing the label, for a page-level search with a line to spend on it — a help centre, a directory. The exception rather than the rule: a toolbar and a table header show a magnifier and a placeholder. Drawing it also changes what the placeholder is for, since the label then says what is searched */
+    showLabel?: boolean;
+    /** Making the field’s purpose legible while the label is clipped, which is the default and so the usual case: "Card, bank or wallet" on a payment method search. Draw the label and that job moves to it, leaving this free to show what a query looks like — "Skrill, Neteller, Maestro" */
+    placeholder?: string;
+    /** Saying what the query matches when it is not obvious — "Searches names and symbols" on a field that looks like it searches only names. Stays on screen, unlike the placeholder */
+    helperText?: string;
+    /** The page owns the query and passes it in — the controlled form, and the usual one here, because a query is normally held wherever the filtering happens */
+    value?: string;
+    /** A query the field starts on — a filter restored from a URL or a saved view. Absent means an empty field */
+    defaultValue?: string;
+    /** Filtering as the user types. It reports the query as a string rather than the event, which is what every caller wanted from the event anyway — and it reports the same way whether the query was typed, cleared with the button or cleared with Escape */
+    onChange?: (query: string) => void;
+    /** Committing the query — Enter, and a query worth a round trip. A search that costs a request wants asking for, where one that filters a list already on screen can follow every keystroke through onChange */
+    onSearch?: (query: string) => void;
+    /** Naming the clear button, which is always offered here rather than asked for. The glyph is a cross and says nothing on its own, so this is the button’s only name — "Clear search", in the consumer’s own words */
+    clearLabel: string;
+}
+export type SearchInputProps = SearchInputOwnProps & Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'size' | 'label' | 'showLabel' | 'placeholder' | 'helperText' | 'value' | 'defaultValue' | 'onChange' | 'onSearch' | 'clearLabel'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const searchInputParts: {
+    readonly root: "dds-searchinput";
+    readonly label: "dds-searchinput__label";
+    readonly control: "dds-searchinput__control";
+    readonly 'search-icon': "dds-searchinput__search-icon";
+    readonly field: "dds-searchinput__field";
+    readonly clear: "dds-searchinput__clear";
+    readonly helper: "dds-searchinput__helper";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const searchInputDefaults: {
+    readonly size: "md";
+    readonly showLabel: false;
+};

package/dist/components/core/search-input/SearchInput.types.js

@@ -0,0 +1,13 @@
+// GENERATED from search-input.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const searchInputParts = {
+    root: 'dds-searchinput',
+    label: 'dds-searchinput__label',
+    control: 'dds-searchinput__control',
+    'search-icon': 'dds-searchinput__search-icon',
+    field: 'dds-searchinput__field',
+    clear: 'dds-searchinput__clear',
+    helper: 'dds-searchinput__helper',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const searchInputDefaults = { size: 'md', showLabel: false };

package/dist/components/core/search-input/search-input-impl.css

@@ -0,0 +1,20 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines the rule without contributing specificity.
+ */
+
+/*
+ * The browser's own clear control, removed.
+ *
+ * `type="search"` is what makes this a searchbox rather than a textbox, and WebKit throws in a
+ * cancel button with it — unstyleable, in the same corner as the clear button this component
+ * draws, so the field ends up offering the same action twice in two different shapes. Nothing
+ * a contract can say: these are vendor pseudo-elements, and `appearance` on them is a keyword
+ * rather than a token.
+ */
+:where([data-dds-context="marketing"]) .dds-searchinput__field::-webkit-search-cancel-button,
+:where([data-dds-context="marketing"]) .dds-searchinput__field::-webkit-search-decoration {
+  appearance: none;
+  display: none;
+}

package/dist/components/core/segmented-control/SegmentedControl.css

@@ -0,0 +1,57 @@
+/* GENERATED from segmentedcontrol.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol {
+  transition-property: opacity;
+  align-items: stretch;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
+  background-color: var(--color-bg-track);
+  border-radius: var(--radius-pill);
+  gap: var(--space-gap-xs);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol .dds-segmentedcontrol__indicator {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  position: absolute;
+  background-color: var(--color-bg-surface-raised);
+  border-radius: var(--radius-pill);
+  box-shadow: var(--elevation-surface-raised);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-disabled="true"] {
+  pointer-events: none;
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-layout="fill"] {
+  inline-size: 100%;
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-layout="hug"] {
+  inline-size: fit-content;
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-size="lg"] {
+  block-size: var(--size-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-size="md"] {
+  block-size: var(--size-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-segmentedcontrol[data-size="sm"] {
+  block-size: var(--size-control-sm);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-segmentedcontrol,
+  :where([data-dds-context="marketing"]) .dds-segmentedcontrol * { transition: none; }
+}
+

package/dist/components/core/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,37 @@
+import "./SegmentedControl.css";
+import "./segmented-control-impl.css";
+import { type SegmentedControlProps } from "./SegmentedControl.types.js";
+export type { SegmentedControlProps };
+/**
+ * A row of mutually exclusive values, and the three things about them that belong to the
+ * row rather than to any one segment: which is chosen, how tall they all are, and
+ * whether the choice can be made at all.
+ *
+ * It measures one thing — where the chosen segment sits — so the pill can travel to it.
+ * That is the whole reason the pill is a single element this component positions rather
+ * than a ground each segment paints: two grounds cross-fading always reads as two
+ * grounds, and no selector can answer where a sibling is. No container query reaches it
+ * either, the question being about a sibling's position rather than a box's own width.
+ *
+ * The measurement is deliberately small: one element per change, read for its offset and
+ * its size. Not the whole row, not on scroll, not per frame.
+ *
+ * It measures the segment itself rather than a wrapper around it, which is where this
+ * parts company with Product's. `offsetLeft` is read from the nearest positioned
+ * ancestor, and the segment's is this element — the groove is `position: relative` and
+ * the segment, though positioned itself, has nothing positioned between the two. Product
+ * wraps each segment in a box of its own because its own layout decisions live there;
+ * here the row divides itself, so the wrapper would be a part with nothing to bind and
+ * one more element between the pill and the thing it is measuring.
+ *
+ * What it does own is the radio pattern, which stops being optional the moment the
+ * segments carry `role="radio"`. One tab stop for the whole row, the arrow keys inside
+ * it, and selection following focus — because there is always exactly one answer, so
+ * moving focus without changing the answer would leave the reader looking at one segment
+ * while another is in force.
+ *
+ * A `value` naming no segment chooses none of them. Falling back to the first would tell
+ * the reader a value is in force that the page never set, and hide whatever caused the
+ * mismatch — a stale piece of state, a segment that has not loaded yet.
+ */
+export declare function SegmentedControl({ layout, size, disabled, label, value, onChange, children, ...rest }: SegmentedControlProps): import("react").JSX.Element;