@deriv-com/dds-marketing 0.1.0 → 0.2.0

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

@@ -0,0 +1,114 @@
+/*
+ * 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.
+ */
+
+/*
+ * The four things about this control the contract cannot hold.
+ *
+ * A stacking order, which is an integer with no unit; the ink of a placeholder, which is the
+ * same element in another state rather than a part of its own; a sentence shown only while
+ * nothing matches, which is the same again; and a keyframed entrance, the element not having
+ * been there a moment earlier. Everything with a measure is a token, read through the custom
+ * properties the generated stylesheet reads.
+ */
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__popup {
+  /* Over whatever follows the control. An absolutely positioned box already paints above the
+     in-flow content of its own stacking context, which is enough until the next thing on the
+     page is positioned too — and on a form the next thing is another of these.
+
+     `layer.popup` is the role this package gives anything that leaves the flow and floats over
+     the page, and DropdownMenu's panel already reads it. Two floating surfaces on one page
+     whose order depends on which stylesheet the bundler wrote last is not an order anybody
+     chose. */
+  z-index: var(--layer-popup);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__value[data-placeholder] {
+  /* The instruction that stands in for an answer, in the ink an unanswered control deserves —
+     `color.fg.tertiary`, which is what TextInput gives its own placeholder, so the two say
+     "nothing here yet" the same way on one form.
+
+     Not a part of its own, because it is never on screen at the same time as the answer it
+     replaces: two parts that cannot coexist are one part in two states. */
+  color: var(--color-fg-tertiary);
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__empty {
+  /* Absent from the layout while anything matches, rather than absent from the DOM. A list under
+     a query is a live thing, and a row arriving on one keystroke and going on the next is a row
+     a reader cannot read — where `display: none` is out of the accessibility tree and out of the
+     layout, which is the whole of what removing it would have bought. */
+  display: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__empty[data-shown] {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__message-icon {
+  /* The glyph on the line, rather than two and a half pixels above it.
+   *
+   * The message is `align-items: flex-start`, because a status can wrap and a mark centred
+   * against three lines of it sits in the middle of a paragraph. So the icon box is top-aligned
+   * against the first line, and its height decides where the glyph lands.
+   *
+   * That height was the glyph's own. This part is a flex container, so its block size comes from
+   * its flex line — sixteen pixels of mark — and a flex container has no strut, which is the
+   * thing a line-height would need in order to mean anything here. The `font-size` and
+   * `line-height` the contract binds on this part were put there to give the box the line's
+   * height and were doing nothing at all: sixteen against a twenty-one-pixel line box centres the
+   * mark two and a half pixels above the words.
+   *
+   * `1lh` is what reads them. It is the element's own line-height — the bound one, 1.5 against a
+   * bound 14px — so the box is exactly as tall as the line beside it and cannot drift from it: a
+   * change to `font.body.sm` moves both or neither. A pixel figure here would be the same number
+   * today and a silent disagreement the first time that role is retuned.
+   *
+   * Here rather than in the contract because `staticCss` takes keywords, `100%` and `0`, and
+   * rightly so — everything with a measure is a token. This is not a measure anyone chose; it is
+   * one length written in terms of another the contract already names. */
+  min-block-size: 1lh;
+}
+
+/*
+ * The surface arriving.
+ *
+ * An animation rather than a transition, because the element is not there a moment earlier — it
+ * is absent when the list is shut, so there is no previous value for a transition to run from.
+ * An animation runs on the element appearing, which is exactly the event.
+ *
+ * Scaling from `motion.scale.enter` with `motion.easing.enter`, which decelerates into place,
+ * over `motion.duration.normal` — the roles this package already names for something entering
+ * the viewport. Anchored at the top edge, so the list grows downward out of the box rather than
+ * outward from its own middle, which is the whole of what the motion says: this came from there.
+ *
+ * There is no exit. React removes the element when the list shuts, so nothing remains to
+ * animate — and keeping it mounted to animate out would cost the two things its absence buys: a
+ * shut control covers nothing, and no row is reachable by a reader running past it.
+ */
+@keyframes dds-select-popup-in {
+  from {
+    opacity: 0;
+    scale: var(--motion-scale-enter);
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-select .dds-select__popup {
+  transform-origin: top center;
+  animation: dds-select-popup-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/* The reduce block the generated stylesheet writes covers transitions and not this, because it
+   is written from the bindings and this is not one. A reader who has asked for less movement has
+   asked for this too. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-select .dds-select__popup {
+    animation: none;
+  }
+}

package/dist/components/core/select-chip/SelectChip.css

@@ -0,0 +1,155 @@
+/* GENERATED from selectchip.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-selectchip {
+  transition-property: opacity;
+  display: inline-flex;
+  position: relative;
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger {
+  transition-property: background-color, background-image, border-color, color, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  max-inline-size: 100%;
+  outline-style: solid;
+  background-color: var(--color-bg-surface-raised);
+  border-color: var(--color-border-default);
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-default);
+  color: var(--color-fg-default);
+  gap: var(--space-gap-xs);
+  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-selectchip .dds-selectchip__trigger-icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger-label {
+  font-variant-numeric: tabular-nums;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__chevron {
+  flex: none;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__listbox {
+  border-style: solid;
+  box-sizing: border-box;
+  inline-size: max-content;
+  inset-block-start: 100%;
+  inset-inline-end: 0;
+  inset-inline-start: 0;
+  list-style: none;
+  margin: 0;
+  min-inline-size: 100%;
+  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-xs);
+  max-block-size: var(--size-menu-max);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-alignment="end"] .dds-selectchip__listbox {
+  inset-inline-start: auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-alignment="start"] .dds-selectchip__listbox {
+  inset-inline-end: auto;
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover), var(--color-bg-hover));
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger:active {
+  background-image: linear-gradient(var(--color-bg-active), var(--color-bg-active));
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-chosen="true"] {
+  background-color: var(--color-bg-strong);
+  border-color: var(--color-bg-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-disabled="true"] {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-size="md"] .dds-selectchip__chevron {
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-size="md"] .dds-selectchip__trigger {
+  block-size: var(--size-control-md);
+  padding-inline: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-size="md"] .dds-selectchip__trigger-icon {
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-size="md"] .dds-selectchip__trigger-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-selectchip[data-size="sm"] .dds-selectchip__chevron {
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-size="sm"] .dds-selectchip__trigger {
+  block-size: var(--size-control-sm);
+  padding-inline: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-size="sm"] .dds-selectchip__trigger-icon {
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-selectchip[data-size="sm"] .dds-selectchip__trigger-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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-selectchip,
+  :where([data-dds-context="marketing"]) .dds-selectchip * { transition: none; }
+}
+

package/dist/components/core/select-chip/SelectChip.d.ts

@@ -0,0 +1,20 @@
+import './SelectChip.css';
+import './select-chip-impl.css';
+import { type SelectChipProps } from './SelectChip.types.js';
+export type { SelectChipProps };
+/**
+ * A chip that opens a list of answers and keeps the one chosen.
+ *
+ * It renders its own chip rather than taking one. The chip has to say what is chosen,
+ * whether the list is open, and which answer the arrow keys are resting on — three
+ * facts that only this component can see, and a consumer holding a chip of their own
+ * would have to be handed all three and keep them in step. So the trigger is not a
+ * slot, which is where this parts company with this package's DropdownMenu.
+ *
+ * Focus stays on the chip while the list is open, and the active answer is named from
+ * there through `aria-activedescendant`. That is the other thing separating the two:
+ * a menu's items are things to do and therefore things to focus, where an answer is
+ * not a tab stop, and a list of twenty would otherwise be twenty presses on the way to
+ * whatever follows the row.
+ */
+export declare function SelectChip({ size, disabled, alignment, label, value, defaultValue, onChange, open, defaultOpen, onOpenChange, leadingIcon, children, ...rest }: SelectChipProps): import("react").JSX.Element;

package/dist/components/core/select-chip/SelectChip.js

@@ -0,0 +1,273 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, cloneElement, isValidElement, useEffect, useId, useRef, useState, } from 'react';
+import { ChevronDownRegularIcon } from '@deriv-com/quill-icons-web';
+import './SelectChip.css';
+import './select-chip-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { selectChipDefaults, selectChipGlyphStep, selectChipParts, } from './SelectChip.types.js';
+/**
+ * The answers, as a list this control can index.
+ *
+ * Levelled out of `children` rather than assumed to be an array: a set built from
+ * data arrives through a `.map()`, and one with a condition in it arrives with a
+ * `false` among the rows. `Children.toArray` flattens arrays and drops the falsy
+ * entries, which is why it is the way in.
+ *
+ * It does not flatten fragments, though — a `<>` comes back as one child of type
+ * Fragment, and a set written by hand inside one is the ordinary way to write it.
+ * Left alone, every answer would disappear into a single unindexable child: the list
+ * would render nothing selectable, the ids would land on an element that cannot hold
+ * them, and `aria-activedescendant` would point at nothing. So fragments are opened
+ * here, recursively, because one may hold another.
+ */
+function optionsOf(children) {
+    return Children.toArray(children).flatMap((child) => {
+        if (!isValidElement(child))
+            return [];
+        if (child.type === Fragment) {
+            return optionsOf(child.props.children);
+        }
+        return [child];
+    });
+}
+/**
+ * An option's words, flattened enough to match a letter against, and to show on the chip.
+ *
+ * Anything that is not a string or a number contributes nothing rather than throwing:
+ * a row nobody can type their way to is a smaller failure than a list that cannot render.
+ */
+function words(node) {
+    if (typeof node === 'string')
+        return node;
+    if (typeof node === 'number')
+        return String(node);
+    if (Array.isArray(node))
+        return node.map(words).join('');
+    return '';
+}
+/**
+ * How long a run of keystrokes stays one search rather than starting the next.
+ *
+ * Long enough that two letters typed on purpose join up, short enough that a letter
+ * pressed a beat later starts again.
+ */
+const TYPING_WINDOW = 500;
+/**
+ * A chip that opens a list of answers and keeps the one chosen.
+ *
+ * It renders its own chip rather than taking one. The chip has to say what is chosen,
+ * whether the list is open, and which answer the arrow keys are resting on — three
+ * facts that only this component can see, and a consumer holding a chip of their own
+ * would have to be handed all three and keep them in step. So the trigger is not a
+ * slot, which is where this parts company with this package's DropdownMenu.
+ *
+ * Focus stays on the chip while the list is open, and the active answer is named from
+ * there through `aria-activedescendant`. That is the other thing separating the two:
+ * a menu's items are things to do and therefore things to focus, where an answer is
+ * not a tab stop, and a list of twenty would otherwise be twenty presses on the way to
+ * whatever follows the row.
+ */
+export function SelectChip({ size = selectChipDefaults.size, disabled = selectChipDefaults.disabled, alignment = selectChipDefaults.alignment, label, value, defaultValue, onChange, open, defaultOpen, onOpenChange, leadingIcon, children, ...rest }) {
+    const options = optionsOf(children);
+    const rootId = useId();
+    const listId = `${rootId}-list`;
+    const rowId = (at) => `${rootId}-option-${at}`;
+    const root = useRef(null);
+    const typed = useRef({ text: '', at: 0 });
+    // Held only for the uncontrolled case. When `value` or `open` is passed the prop is
+    // the answer and this is never read, which is what keeps a controlled chip from
+    // drifting out of step.
+    const [ownValue, setOwnValue] = useState(defaultValue ?? '');
+    const [ownOpen, setOwnOpen] = useState(defaultOpen ?? false);
+    const [activeIndex, setActiveIndex] = useState(-1);
+    const chosen = value ?? ownValue;
+    /**
+     * Shut whenever the chip cannot be used, whichever prop says otherwise.
+     *
+     * The trigger carries the native `disabled`, so a reader cannot open it — no click,
+     * no key, and no tab stop to reach it from. What that does not cover is a consumer
+     * passing `open` or `defaultOpen` alongside it, which asks for a list of answers on
+     * a control that cannot take one. The generated type refuses the pair, and this is
+     * the runtime half of the same refusal.
+     */
+    const expanded = disabled ? false : (open ?? ownOpen);
+    const indexOf = (of) => options.findIndex((option) => option.props.value === of);
+    const setOpen = (next) => {
+        if (open === undefined)
+            setOwnOpen(next);
+        onOpenChange?.(next);
+    };
+    /**
+     * The next answer that can be taken, walking in `by` and wrapping.
+     *
+     * Refusals are stepped over rather than landed on: an arrow key that stops on an
+     * answer nobody may take reads as the control being broken rather than as it being
+     * careful.
+     */
+    const step = (from, by) => {
+        for (let i = 1; i <= options.length; i += 1) {
+            const at = (from + by * i + options.length * options.length) % options.length;
+            if (options[at]?.props.disabled !== true)
+                return at;
+        }
+        return from;
+    };
+    const firstOpen = () => step(-1, 1);
+    const lastOpen = () => step(options.length, -1);
+    const onTheAnswer = () => (chosen === '' ? firstOpen() : indexOf(chosen));
+    const openAt = (at) => {
+        setActiveIndex(at);
+        setOpen(true);
+    };
+    /**
+     * Taking the answer the arrow keys are resting on.
+     *
+     * `onChange` is not called when the answer is the one already held — a reader
+     * reopening the list and pressing what they chose last time has changed nothing, and
+     * a page narrowing its index on that fires a request for a set it is already showing.
+     */
+    const take = (at) => {
+        const option = options[at];
+        if (option === undefined || option.props.disabled === true)
+            return;
+        const next = option.props.value ?? '';
+        if (next !== chosen) {
+            if (value === undefined)
+                setOwnValue(next);
+            onChange?.(next);
+        }
+        setOpen(false);
+    };
+    /**
+     * The first answer whose words begin with what has been typed, searched circularly
+     * from `after` — which is what makes a letter pressed twice walk through the answers
+     * beginning with it instead of returning to the first one each time.
+     */
+    const matching = (query, after) => {
+        for (let i = 1; i <= options.length; i += 1) {
+            const at = (after + i + options.length * i) % options.length;
+            const option = options[at];
+            if (option?.props.disabled === true)
+                continue;
+            if (words(option?.props.children).trim().toLowerCase().startsWith(query))
+                return at;
+        }
+        return -1;
+    };
+    /** A letter, and what it means given what came just before it. */
+    const typeAhead = (key) => {
+        const now = Date.now();
+        const run = now - typed.current.at > TYPING_WINDOW ? key : typed.current.text + key;
+        typed.current = { text: run, at: now };
+        const repeated = run.length > 1 && [...run].every((each) => each === run[0]);
+        const query = (repeated ? run[0] : run).toLowerCase();
+        const found = matching(query, repeated ? activeIndex : Math.max(activeIndex - 1, -1));
+        if (found === -1)
+            return;
+        if (!expanded)
+            openAt(found);
+        else
+            setActiveIndex(found);
+    };
+    /**
+     * A key that is a letter somebody typed, rather than a command.
+     *
+     * Space is excluded, and it has to be: here it does what Enter does, so a space that
+     * started a search would be a space that stopped taking the answer.
+     */
+    const printable = (event) => event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey;
+    const onKeyDown = (event) => {
+        const key = event.key;
+        if (!expanded) {
+            if (key === 'Enter' || key === ' ' || key === 'ArrowDown') {
+                event.preventDefault();
+                openAt(onTheAnswer());
+                return;
+            }
+            if (key === 'ArrowUp') {
+                event.preventDefault();
+                openAt(chosen === '' ? lastOpen() : indexOf(chosen));
+                return;
+            }
+            if (printable(event)) {
+                // Typing at a shut chip opens it on the match rather than answering outright.
+                // A native select replaces the answer, which is how brushing a key while
+                // tabbing past one changes a narrowing nobody meant to touch.
+                event.preventDefault();
+                typeAhead(key);
+            }
+            return;
+        }
+        if (key === 'ArrowDown') {
+            event.preventDefault();
+            setActiveIndex(step(activeIndex, 1));
+        }
+        else if (key === 'ArrowUp') {
+            event.preventDefault();
+            setActiveIndex(step(activeIndex, -1));
+        }
+        else if (key === 'Home') {
+            event.preventDefault();
+            setActiveIndex(firstOpen());
+        }
+        else if (key === 'End') {
+            event.preventDefault();
+            setActiveIndex(lastOpen());
+        }
+        else if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            take(activeIndex);
+        }
+        else if (key === 'Escape') {
+            // The answer is left alone. Escape is a reader saying they did not mean to open
+            // the list, not that they have changed their mind about what they already answered.
+            event.preventDefault();
+            setOpen(false);
+        }
+        else if (printable(event)) {
+            event.preventDefault();
+            typeAhead(key);
+        }
+    };
+    /**
+     * Shutting on a press elsewhere, which is the only way out that is not a keystroke.
+     *
+     * Bound while open and unbound the moment it shuts. `pointerdown` rather than
+     * `click`, so the list is gone before whatever was underneath it has moved.
+     */
+    useEffect(() => {
+        if (!expanded)
+            return;
+        const onPointerDown = (event) => {
+            if (root.current?.contains(event.target) === true)
+                return;
+            setOpen(false);
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => document.removeEventListener('pointerdown', onPointerDown);
+    });
+    const taken = options[indexOf(chosen)];
+    // The chip carries the answer once there is one, and the name of the narrowing until
+    // then — which is what makes a row of these read as a list of decisions rather than a
+    // list of filters.
+    const shown = taken === undefined ? label : words(taken.props.children);
+    return (_jsxs("div", { className: selectChipParts.root, ...rest, ref: root, "data-size": size, "data-alignment": alignment, "data-disabled": String(disabled), children: [_jsxs("button", { type: "button", className: selectChipParts.trigger, 
+                // The platform's own, which is the whole of the behaviour: a disabled button
+                // takes no click, answers no key, and is not a tab stop — so there is nothing
+                // here to gate by hand.
+                disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": expanded, "aria-controls": expanded ? listId : undefined, "aria-activedescendant": expanded && activeIndex !== -1 ? rowId(activeIndex) : undefined, "data-chosen": String(taken !== undefined), "data-expanded": String(expanded), onKeyDown: onKeyDown, onClick: () => (expanded ? setOpen(false) : openAt(onTheAnswer())), children: [leadingIcon === undefined ? null : (_jsx("span", { className: selectChipParts['trigger-icon'], children: _jsx(Icon, { size: selectChipGlyphStep[size], children: leadingIcon }) })), _jsx("span", { className: selectChipParts['trigger-label'], children: shown }), _jsx(ChevronDownRegularIcon, { className: selectChipParts.chevron, style: expanded ? { rotate: '180deg' } : undefined, "aria-hidden": "true" })] }), expanded ? (_jsx("ul", { className: selectChipParts.listbox, id: listId, role: "listbox", "aria-label": label, children: options.map((option, at) => cloneElement(option, {
+                    id: rowId(at),
+                    size,
+                    selected: option.props.value === chosen && chosen !== '',
+                    active: at === activeIndex,
+                    // `onMouseDown` rather than `onClick`: the document handler above shuts
+                    // the list on pointerdown, and a click handler here would fire after the
+                    // row had already gone.
+                    onMouseDown: (event) => {
+                        event.preventDefault();
+                        take(at);
+                    },
+                    onMouseEnter: () => setActiveIndex(at),
+                })) })) : null] }));
+}

package/dist/components/core/select-chip/SelectChip.types.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+export interface SelectChipOwnProps {
+    /**
+     * `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, or a filter row in a hero band where the chips carry more weight
+     */
+    size?: 'sm' | 'md';
+    /**
+     * `start` — The list's leading edge lines up with the chip's. The default, because a reader reads from that edge and the answers begin where the chip's own words began
+     * `end` — Its trailing edge lines up instead, for a chip near the end of a row where a list opening the other way would run off the screen
+     */
+    alignment?: 'start' | 'end';
+    /** Always, and required on that account — it names what is being chosen, and it is what the chip shows until something has been. Short enough to read at a glance in a row of other chips */
+    label: string;
+    /** The page owns the answer — it arrives from a URL, is shared with something else on screen, or has to survive the chip unmounting. Passed, this is the answer, and onChange is the only way it moves */
+    value?: string;
+    /** An answer the chip arrives carrying, which the reader is then free to change. The uncontrolled half of the pair, and what almost every use wants */
+    defaultValue?: string;
+    /** Always, and it is required for that reason. It hands back the value of the answer taken, each time one is taken. It is also the only way the answer reaches the page: this renders a div, a button and a list, so there is no form field carrying the choice and no name to submit it under — and a narrowing the page never learns about narrows nothing. The chip goes on showing it either way, which is what makes the omission quiet */
+    onChange: (value: string) => void;
+    /** The list is showing when the chip arrives, and the chip owns it from there */
+    defaultOpen?: boolean;
+    /** Something outside the chip has to know the list opened or shut — closing another one beside it, or reporting the interaction */
+    onOpenChange?: (open: boolean) => void;
+    /** A glyph makes the kind of narrowing faster to recognise than its name alone. It sits before the words and never replaces them. Pass the glyph itself rather than one already wrapped in an Icon: the chip wraps it at icon.size.xs at sm and icon.size.sm at md, the same step its chevron takes */
+    leadingIcon?: ReactNode;
+    /** Allowed: Option */
+    children: ReactNode;
+}
+export type SelectChipProps = SelectChipOwnProps & ({
+    disabled?: boolean;
+    open?: false;
+} | {
+    disabled?: false;
+    open?: boolean;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const selectChipParts: {
+    readonly root: "dds-selectchip";
+    readonly trigger: "dds-selectchip__trigger";
+    readonly 'trigger-icon': "dds-selectchip__trigger-icon";
+    readonly 'trigger-label': "dds-selectchip__trigger-label";
+    readonly chevron: "dds-selectchip__chevron";
+    readonly listbox: "dds-selectchip__listbox";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const selectChipDefaults: {
+    readonly disabled: false;
+    readonly size: "sm";
+    readonly alignment: "start";
+};
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export declare const selectChipGlyphStep: {
+    readonly sm: "xs";
+    readonly md: "sm";
+};

package/dist/components/core/select-chip/SelectChip.types.js

@@ -0,0 +1,14 @@
+// GENERATED from select-chip.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const selectChipParts = {
+    root: 'dds-selectchip',
+    trigger: 'dds-selectchip__trigger',
+    'trigger-icon': 'dds-selectchip__trigger-icon',
+    'trigger-label': 'dds-selectchip__trigger-label',
+    chevron: 'dds-selectchip__chevron',
+    listbox: 'dds-selectchip__listbox',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const selectChipDefaults = { disabled: false, size: 'sm', alignment: 'start' };
+/** The step this component draws a glyph slot at. Generated — do not retype. */
+export const selectChipGlyphStep = { sm: 'xs', md: 'sm' };

package/dist/components/core/select-chip/select-chip-impl.css

@@ -0,0 +1,38 @@
+/*
+ * 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 — both here are written a class deeper than they look in order to match
+ * generated CSS, and a scope that carried weight would break them.
+ */
+
+/*
+ * Implementation CSS the contract cannot express.
+ *
+ * A token binding carries one state, and these are two at once. `chosen` is a state rather than
+ * an axis because whether an answer has been taken is derived from the value rather than passed
+ * in — so it cannot be a `when`, and a binding cannot say "chosen, and hovered" in one breath.
+ *
+ * Nothing here is a value. Every measure comes from the same tokens the bindings use, which is
+ * what keeps these two rules honest: they are the cascade the contract could not reach, not a
+ * second opinion about what the chip should look like.
+ */
+
+/* The chosen chip's own hover, which would otherwise fall back to the unchosen one and wash the
+   fill in the wrong direction — a black alpha over a ground that is already near-black shows
+   nothing at all. This is the case color.bg.hover-inverse exists for. */
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-chosen="true"]:hover {
+  background-image: linear-gradient(
+    var(--color-bg-hover-inverse),
+    var(--color-bg-hover-inverse)
+  );
+}
+
+/* An open chip borrows the heavier edge, but only while nothing is chosen. Said of both, it would
+   be a second rule as specific as the one it argues with, and the cascade would settle it by
+   source order — so the exclusion is written rather than left to whichever sorted last. A chosen
+   chip already carries a painted edge, so there is nothing for opening to add. */
+:where([data-dds-context="marketing"]) .dds-selectchip .dds-selectchip__trigger[data-expanded="true"]:not([data-chosen="true"]) {
+  border-color: var(--color-border-strong);
+}