@deriv-com/dds-marketing 0.1.0 → 1.0.0

package/dist/components/core/pagination-dots/PaginationDots.types.d.ts

@@ -0,0 +1,38 @@
+export interface PaginationDotsOwnProps {
+    /**
+     * `default` — The marks take the ink of whatever the row stands on — white on a coral or dark band, near-black on the page — so the row belongs to its ground. The usual choice, and the only one on a band.
+     * `accent` — On the bare page, where the row should carry the brand: the marks are color.fg.brand-accent, the current pill solid coral and the rest the same coral held back. The solid pill clears 3:1 against the page at 3.11:1, just; the resting marks do not, as at the default — so only on the page's own ground, where nothing takes the coral lower.
+     */
+    variant?: 'default' | 'accent';
+    /** Which position the reader is on, counted from 1. The consumer holds it, because the slide or step in view is theirs too and the two are one fact. */
+    page?: number;
+    /** How many positions there are, which is how many marks the row draws. */
+    totalPages?: number;
+    /** Whenever the marks should move anything — called with the position pressed. The row does not move itself; the consumer sets page from it. */
+    onPageChange?: (page: number) => void;
+    /** The sequence should move on its own — a slider of promotions, a hero that rotates. The row advances page through onPageChange every motion.duration.dwell, wrapping from the last position to the first. It holds while `paused` is set, never moves for a reader who asked for less motion, and stops for good once the reader presses a mark. That last is the WAI carousel pattern's rule that a reader who has chosen a position is reading, not watching. That gives a reader a way to stop the rotation, which WCAG 2.2.2 asks for, but not a visible one: nothing says a press will stop it, so a page that needs 2.2.2 met plainly should still offer its own pause, or leave autoplay off. */
+    autoplay?: boolean;
+    /** Whatever holds the row wants the rotation held for now — while the pointer is over the slide or focus is inside it, so a reader is never moved on mid-sentence. It lets go when this goes false. */
+    paused?: boolean;
+    /** The name the row is announced by, as a group. Name what the positions are: 'Slides', 'Steps'. Translate it with the page. */
+    label?: string;
+    /** The word each mark is named by, before its number — 'Slide 2'. Translate it with the page; a language that puts the number first is the reason a sentence template would be better, and the reason this is not yet one. */
+    itemLabel?: string;
+}
+export type PaginationDotsProps = PaginationDotsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const paginationDotsParts: {
+    readonly root: "dds-paginationdots";
+    readonly dot: "dds-paginationdots__dot";
+    readonly mark: "dds-paginationdots__mark";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const paginationDotsDefaults: {
+    readonly variant: "default";
+    readonly page: 1;
+    readonly totalPages: 1;
+    readonly autoplay: false;
+    readonly paused: false;
+    readonly label: "Slides";
+    readonly itemLabel: "Slide";
+};

package/dist/components/core/pagination-dots/PaginationDots.types.js

@@ -0,0 +1,9 @@
+// GENERATED from pagination-dots.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const paginationDotsParts = {
+    root: 'dds-paginationdots',
+    dot: 'dds-paginationdots__dot',
+    mark: 'dds-paginationdots__mark',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const paginationDotsDefaults = { variant: 'default', page: 1, totalPages: 1, autoplay: false, paused: false, label: 'Slides', itemLabel: 'Slide' };

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

@@ -0,0 +1,125 @@
+/* GENERATED from removablechip.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-removablechip {
+  transition-property: opacity;
+  align-items: center;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: default;
+  display: inline-flex;
+  max-inline-size: 100%;
+  background-color: var(--color-bg-brand-strong);
+  border-color: var(--color-bg-brand-strong);
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-default);
+  color: var(--color-fg-on-brand-strong);
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__remove {
+  transition-property: background-color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  outline-style: solid;
+  padding: unset;
+  border-radius: var(--radius-pill);
+  color: var(--color-fg-on-brand-strong);
+  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-removablechip .dds-removablechip__remove-icon {
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__remove:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__remove:active {
+  background-color: var(--color-bg-active-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip .dds-removablechip__remove:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-disabled="true"] {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="md"] {
+  block-size: var(--size-control-md);
+  padding-inline-end: var(--space-inset-sm);
+  padding-inline-start: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="md"] .dds-removablechip__icon {
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="md"] .dds-removablechip__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="md"] .dds-removablechip__remove-icon {
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="sm"] {
+  block-size: var(--size-control-sm);
+  padding-inline-end: var(--space-inset-xs);
+  padding-inline-start: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="sm"] .dds-removablechip__icon {
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="sm"] .dds-removablechip__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-removablechip[data-size="sm"] .dds-removablechip__remove-icon {
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-removablechip,
+  :where([data-dds-context="marketing"]) .dds-removablechip * { transition: none !important; }
+}
+

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 !important; }
+}
+

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