@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,309 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownRegularIcon } from '@deriv-com/quill-icons-web';
+import { Children, cloneElement, isValidElement, useEffect, useId, useRef, useState } from 'react';
+import './DropdownMenu.css';
+// Second, and it adds rather than corrects: the arrival, which a binding cannot express.
+import './dropdown-menu-impl.css';
+import { useHoverOpen } from '../../hover-open.js';
+import { dropdownMenuDefaults, dropdownMenuParts } from './DropdownMenu.types.js';
+/**
+ * A button that opens a short set of destinations.
+ *
+ * It is the host MenuItem was written against: a row whose role is `menuitem` announces wrong
+ * outside an element whose role is `menu`, so what this adds is everything a row cannot know about
+ * itself — that there is a set, how long it is, which one the visitor is on, and that Escape puts
+ * them back on the button they pressed.
+ *
+ * The trigger is drawn here rather than passed in, which is where this parts company with product's
+ * menu of the same name. That is forced rather than chosen: this package's Button is an anchor with
+ * a required `href`, so it is a link and a link that opens a menu does not navigate; ButtonIcon is a
+ * real button and takes no words. A set of destinations is chosen by reading it, so the trigger
+ * needs words, and nothing here draws a button with words.
+ *
+ * Focus moves to the rows themselves rather than being described from the trigger. A menu's rows are
+ * things to take, and a visitor pressing Enter should be pressing the thing they are on.
+ */
+export function DropdownMenu(props) {
+    const { size = dropdownMenuDefaults.size, label, icon, trigger, variant = dropdownMenuDefaults.variant, tone = dropdownMenuDefaults.tone, chevron = dropdownMenuDefaults.chevron, openOnHover = dropdownMenuDefaults.openOnHover, alignment = dropdownMenuDefaults.alignment, open, defaultOpen, onOpenChange, children, ...rest } = props;
+    // One id, two names derived from it — the shape product's menu uses. Two `useId` calls would
+    // work and mint two unrelated bases for a pair that belongs together.
+    const generated = useId();
+    const menuId = `${generated}-menu`;
+    const triggerId = `${generated}-trigger`;
+    const root = useRef(null);
+    /*
+      The trigger is held rather than looked up, which is the one place this is simpler than
+      product's. There the button is somebody else's element, so it has to be found in the DOM
+      afterwards — and `useId` returns a string a CSS selector cannot hold, so finding it by its own
+      id threw and took a whole page blank. Drawing the button means having it, and the id is left to
+      do the one job an id can always do: being pointed at by `aria-labelledby`.
+    */
+    const triggerEl = useRef(null);
+    /*
+      What the passed trigger already carried, so this component can add to it rather than write over
+      it. Read here rather than inline, because `trigger` is typed as a node and narrowing it twice at
+      the call site reads as two different questions being asked.
+    */
+    const triggerProps = (isValidElement(trigger) ? trigger.props : {});
+    const driven = 'open' in props;
+    const [showing, setShowing] = useState(defaultOpen ?? false);
+    const expanded = driven ? (open ?? false) : showing;
+    /**
+     * Which row focus is on, as an index into the ones that can be used.
+     *
+     * Held rather than read off the document, because it has to be known *before* the row exists: a
+     * menu opened with ArrowUp starts on the last destination, and the surface is not in the DOM
+     * until the render that opens it. So the index is set with the opening and the effect below puts
+     * focus where it says.
+     */
+    const [at, setAt] = useState(0);
+    const rows = Children.toArray(children).filter((child) => isValidElement(child));
+    /**
+     * The rows a visitor can actually reach.
+     *
+     * A disabled one stays in the menu and is announced as unavailable — a set that changes shape
+     * between openings is one a visitor has to learn twice — but the arrow keys step over it, because
+     * stopping on a row that does nothing is a keystroke that reports nothing happened.
+     */
+    const reachable = rows
+        .map((row, index) => ({ row, index }))
+        .filter(({ row }) => row.props.disabled !== true);
+    const setOpen = (next) => {
+        if (!driven)
+            setShowing(next);
+        onOpenChange?.(next);
+    };
+    /*
+      And the pointer, where the page asked for it. The behaviour is shared with NavbarMenu rather
+      than written twice: what is subtle about it — that a tap is not a hover, that only what hover
+      opened may be closed by hover, and that an armed close must be dropped the moment something
+      else shuts the menu — is subtle in both, and two copies would be two places to get it wrong.
+    */
+    const hover = useHoverOpen(openOnHover, expanded, setOpen);
+    /**
+     * Shutting, and giving focus back to where the visitor was.
+     *
+     * A menu that shuts and leaves focus where the surface was drops a keyboard visitor at the top of
+     * the document, several tabs from the button they pressed. `focus()` on the trigger is the whole
+     * of the fix and the thing most menus forget.
+     */
+    const shut = (returnFocus = true) => {
+        setOpen(false);
+        if (returnFocus)
+            triggerEl.current?.focus();
+    };
+    const run = (index) => {
+        // Shut first, then run. A destination that closed its own menu would be one every page closed
+        // differently — and running first means a handler that moves focus fights this one for it.
+        shut();
+        const row = rows[index];
+        if (row?.props.disabled !== true) {
+            const onSelect = row?.props?.onSelect;
+            onSelect?.();
+        }
+    };
+    /**
+     * What the last render was, so focus moves on a change rather than on every render.
+     *
+     * Initialised to the first render's own values, which is what keeps a menu that opens *already*
+     * open from taking focus. `defaultOpen` is for a specimen — a documentation page, the preview's
+     * own stage — and a specimen that grabs focus on mount is worse than it sounds: the browser
+     * scrolls whatever gains focus into view, so a page of open menus ends up scrolled to the last of
+     * them with nothing having thrown.
+     */
+    const before = useRef({ expanded, at });
+    /**
+     * Focus follows the index, once the row it names exists.
+     *
+     * No dependency array: the rows arrive and leave with the menu, so the effect has to run on the
+     * render that changed either the index or whether there is a menu at all — and the comparison
+     * above is what tells those renders from the rest.
+     */
+    useEffect(() => {
+        const changed = before.current.expanded !== expanded || before.current.at !== at;
+        before.current = { expanded, at };
+        if (!expanded || !changed)
+            return;
+        const items = root.current?.querySelectorAll('[role="menuitem"]');
+        items?.[at]?.focus();
+    });
+    /**
+     * Shutting on a press elsewhere.
+     *
+     * `pointerdown` rather than `click`, so the menu is gone before whatever was underneath it has
+     * moved. Without returning focus: the visitor has pressed something else, and putting focus back
+     * on the trigger would take it from whatever they pressed.
+     */
+    useEffect(() => {
+        if (!expanded)
+            return;
+        const onPointerDown = (event) => {
+            if (root.current?.contains(event.target) === true)
+                return;
+            shut(false);
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        return () => document.removeEventListener('pointerdown', onPointerDown);
+    });
+    const step = (by) => {
+        if (reachable.length === 0)
+            return;
+        const here = reachable.findIndex(({ index }) => index === at);
+        const next = (here + by + reachable.length) % reachable.length;
+        setAt(reachable[next].index);
+    };
+    const onTriggerKeyDown = (event) => {
+        const key = event.key;
+        if (key === 'ArrowDown' || key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            setAt(reachable[0]?.index ?? 0);
+            setOpen(true);
+            return;
+        }
+        // Opening at the end, for a visitor reaching for the thing at the bottom.
+        if (key === 'ArrowUp') {
+            event.preventDefault();
+            setAt(reachable[reachable.length - 1]?.index ?? 0);
+            setOpen(true);
+        }
+    };
+    const onMenuKeyDown = (event) => {
+        const key = event.key;
+        if (key === 'ArrowDown') {
+            event.preventDefault();
+            step(1);
+        }
+        else if (key === 'ArrowUp') {
+            event.preventDefault();
+            step(-1);
+        }
+        else if (key === 'Home') {
+            event.preventDefault();
+            setAt(reachable[0]?.index ?? 0);
+        }
+        else if (key === 'End') {
+            event.preventDefault();
+            setAt(reachable[reachable.length - 1]?.index ?? 0);
+        }
+        else if (key === 'Enter' || key === ' ') {
+            event.preventDefault();
+            run(at);
+        }
+        else if (key === 'Escape') {
+            event.preventDefault();
+            shut();
+        }
+        else if (key === 'Tab') {
+            // Not prevented: the visitor asked to leave, and taking Tab would trap them in a menu. It
+            // shuts and lets the browser move on from the trigger, which is where focus goes back to.
+            shut();
+        }
+        else if (key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            // A letter jumps to the next destination beginning with it, for a set read by eye and reached
+            // by hand. From the one after the current row, so pressing the same letter walks the matches.
+            const from = reachable.findIndex(({ index }) => index === at);
+            const found = [...reachable.slice(from + 1), ...reachable.slice(0, from + 1)].find(({ row }) => String(row.props.children ?? '')
+                .trim()
+                .toLowerCase()
+                .startsWith(key.toLowerCase()));
+            if (found !== undefined)
+                setAt(found.index);
+        }
+    };
+    /*
+      The consumer's mark, cloned rather than wrapped.
+  
+      The class has to reach the `<svg>` itself: every glyph in the icon package ships `width` and
+      `height` attributes defaulting to 24, and the only thing that overrides a presentation attribute
+      is a CSS length on the element carrying it. A box around it would keep its own measure and leave
+      the mark at whatever size it was imported at — the finding Button and ButtonIcon both record.
+  
+      The span is for anything that cannot be cloned. The preview hands every node slot a sample
+      string, and a class has to land on something or the part is not findable.
+    */
+    const mark = icon === undefined || icon === null ? null : isValidElement(icon) ? (cloneElement(icon, {
+        className: [dropdownMenuParts.icon, icon.props.className].filter(Boolean).join(' '),
+        'aria-hidden': 'true',
+    })) : (_jsx("span", { className: dropdownMenuParts.icon, "aria-hidden": "true", children: icon }));
+    return (_jsxs("div", { className: dropdownMenuParts.root, "data-variant": variant, "data-tone": tone, "data-size": size, "data-alignment": alignment, ref: root, ...rest, onPointerEnter: (event) => {
+            rest.onPointerEnter?.(event);
+            hover.onPointerEnter(event);
+        }, onPointerLeave: (event) => {
+            rest.onPointerLeave?.(event);
+            hover.onPointerLeave(event);
+        }, children: [!isValidElement(trigger) ? (_jsxs("button", { type: "button", 
+                /*
+                  `type` above the element's own default of submit, which is what a language picker dropped
+                  into a newsletter band would otherwise do on the way to opening.
+                */
+                ref: triggerEl, id: triggerId, className: dropdownMenuParts.trigger, "aria-haspopup": "menu", "aria-expanded": expanded, "aria-controls": expanded ? menuId : undefined, onClick: () => {
+                    if (expanded)
+                        shut(false);
+                    else {
+                        setAt(reachable[0]?.index ?? 0);
+                        setOpen(true);
+                    }
+                }, onKeyDown: onTriggerKeyDown, children: [mark, _jsx("span", { className: dropdownMenuParts.label, children: label }), chevron && (_jsx(ChevronDownRegularIcon, { className: dropdownMenuParts.chevron, style: expanded ? { rotate: '180deg' } : undefined, "aria-hidden": "true" }))] })) : (
+            /*
+              The trigger somebody else drew, wired rather than replaced.
+    
+              Everything below is what this component knows and the page cannot: that the control
+              announces a menu, whether that menu is open, which element it is, and that Escape and the
+              arrow keys reach the rows. The element itself — what it is, what it looks like, whether it
+              is a button at all — stays the caller's.
+    
+              No chevron goes into it. Product injects one, having a Button with a trailing slot to put
+              it in; nothing here has that slot, and the case this arrived for is an icon-only control
+              that product's own guidance says should not carry one anyway. A passed trigger is drawn by
+              whoever passed it, chevron included if they want one.
+            */
+            cloneElement(trigger, {
+                ref: triggerEl,
+                // The caller's id where they set one, so an aria-describedby or a label elsewhere on the
+                // page still points at something. Only the fallback is ours, and the surface is named by
+                // whichever it turns out to be.
+                id: triggerProps.id ?? triggerId,
+                'aria-haspopup': 'menu',
+                'aria-expanded': expanded,
+                'aria-controls': expanded ? menuId : undefined,
+                // Composed rather than replaced. A trigger that came with an analytics handler or a
+                // keyboard shortcut of its own keeps it: this component adds what only it knows — that a
+                // menu exists and whether it is open — and takes nothing away.
+                onClick: (event) => {
+                    triggerProps.onClick?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    if (expanded)
+                        shut(false);
+                    else {
+                        setAt(reachable[0]?.index ?? 0);
+                        setOpen(true);
+                    }
+                },
+                onKeyDown: (event) => {
+                    triggerProps.onKeyDown?.(event);
+                    if (event.defaultPrevented)
+                        return;
+                    onTriggerKeyDown(event);
+                },
+            })), expanded ? (_jsx("ul", { className: dropdownMenuParts.surface, id: menuId, role: "menu", "aria-labelledby": triggerProps.id ?? triggerId, onKeyDown: onMenuKeyDown, children: rows.map((row, index) => cloneElement(row, {
+                    key: index,
+                    /*
+                      The menu sizes its rows, which is the only way a set stays one set. MenuItem takes
+                      the axis and never sets it: a row written on its own cannot know what the rest of
+                      the set is doing, and a menu whose rows disagree reads as two groups rather than one
+                      list. Passed after the row's own props for that reason — this is not a default the
+                      call site may override.
+                    */
+                    size,
+                    /*
+                      Its `onSelect` rather than its `onClick`. A cloned `onClick` would run *beside* the
+                      row's own handler rather than instead of it — the row calls whatever onClick it was
+                      given and then calls its own onSelect, so the destination ran twice on one press,
+                      and it ran ahead of the row's disabled guard. Taking over onSelect puts this behind
+                      that guard and in place of the original, which `run` then calls itself.
+                    */
+                    onSelect: () => run(index),
+                })) })) : null] }));
+}

package/dist/components/core/dropdown-menu/DropdownMenu.types.d.ts

@@ -0,0 +1,62 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface DropdownMenuOwnProps {
+    /**
+     * `outlined` — The control stands on its own — a switcher in a toolbar, a filter above a table, anywhere a reader has to find it before they can use it. The edge is what says there is something here to press
+     * `plain` — The control sits among others that have already said what they are — a locale beside a row of sections in a navigation bar, where every neighbour is words and a mark and an edge around one of them would make it the loudest thing in the set. It keeps the target, the ground it takes under a pointer and the ring it takes under focus, and gives up only the edge
+     */
+    variant?: 'outlined' | 'plain';
+    /**
+     * `sm` — Beside body copy rather than above it — a language picker in a navigation bar or a footer, where the trigger is one item in a row of links and should not outweigh them
+     * `md` — The default, and nearly every other page. The same height as a default Button, so the two line up when they sit in the same band
+     */
+    size?: 'sm' | 'md';
+    /**
+     * `start` — The menu's leading edge lines up with the trigger's. The default, because a visitor reads from that edge and the destinations begin where the button's own words began
+     * `end` — Its trailing edge lines up instead, which is what a trigger near the end of a row needs — a footer's language picker aligned to the start would run off the screen
+     */
+    alignment?: 'start' | 'end';
+    /**
+     * `default` — The control is on a light ground, which is every surface this package paints by default
+     * `inverse` — The control is on a ground that runs against the mode — a navigation bar standing on a dark hero. Only the tints move: the ink is the surrounding ink already under `variant="plain"`, and the words and the mark were never this component's to colour. NavbarItem and NavbarMenu take the same tone for the same reason, and a switcher among them that did not would be the one item in the row whose hover disappeared
+     */
+    tone?: 'default' | 'inverse';
+    /** Always — the words on the trigger, and the whole of what a visitor has to go on before they press it. "Language", "Region", "More pages". Required because a trigger drawn by this component has no children to fall back on, and a menu button reading nothing is a menu nobody opens.
+  
+  It names the menu as well as the button. The surface points at the trigger for its own accessible name rather than taking a second string, so the two cannot drift — product needs a separate one only because its trigger is opaque to it, and this one is not. */
+    label: string;
+    /** A mark before the trigger's words, where the set is read by shape as much as by reading — a globe beside "Language", a flag beside the region a visitor is already in */
+    icon?: ReactNode;
+    /** A chevron in the trigger, pointing down while the menu is shut and up while it is open. On by default because it is the visual form of aria-expanded — the same fact the attribute carries, drawn — and this component is the only thing that knows it. Product's DropdownMenu names the same prop for the same reason */
+    chevron?: boolean;
+    /** The menu is one of several things on a bar that open, and the others open on hover — a switcher beside a row of navigation sections, where a reader who has learned that the sections open under the pointer meets one control that does not and reads it as broken. Off everywhere else: a filter above a table or a switcher in a toolbar is a deliberate act, and a menu that opened as the pointer crossed it on the way somewhere else is a menu in the way */
+    openOnHover?: boolean;
+    /** A control this component should open rather than draw — one whose mark is the whole of it, with no words to read. A ButtonIcon is the obvious candidate and not the only one: Pagination's break between two runs of page numbers passes a button of its own, because it has to match the numbered targets either side of it and this package's ButtonIcon has no transparent form to do that with. Given one, `icon` and `label`'s words go unused: what is drawn is what was passed. What this component still supplies is the half a page gets wrong — that the control announces a menu and whether it is open, that Escape returns focus to it, and that the arrow keys move through the rows. */
+    trigger?: ReactNode;
+    /** The page holds whether the menu is open, and this component stops holding it. For the case where something outside has to shut it — a navigation bar that closes its menu when another one opens. Pair it with onOpenChange, or the menu is open forever */
+    open?: boolean;
+    /** A specimen — a documentation page, the preview's own stage — where the menu has to be on screen to be looked at. This component still holds the state afterwards */
+    defaultOpen?: boolean;
+    /** Something outside has to know — a navigation bar shutting its other menus, a page that dims behind an open one. Required in practice alongside open, which is the only way a driven menu ever closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Allowed: MenuItem */
+    children: ReactNode;
+}
+export type DropdownMenuProps = DropdownMenuOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'variant' | 'size' | 'alignment' | 'tone' | 'label' | 'icon' | 'chevron' | 'openOnHover' | 'trigger' | 'open' | 'defaultOpen' | 'onOpenChange'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const dropdownMenuParts: {
+    readonly root: "dds-dropdownmenu";
+    readonly trigger: "dds-dropdownmenu__trigger";
+    readonly icon: "dds-dropdownmenu__icon";
+    readonly label: "dds-dropdownmenu__label";
+    readonly chevron: "dds-dropdownmenu__chevron";
+    readonly surface: "dds-dropdownmenu__surface";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const dropdownMenuDefaults: {
+    readonly variant: "outlined";
+    readonly size: "md";
+    readonly alignment: "start";
+    readonly tone: "default";
+    readonly chevron: true;
+    readonly openOnHover: false;
+};

package/dist/components/core/dropdown-menu/DropdownMenu.types.js

@@ -0,0 +1,12 @@
+// GENERATED from dropdown-menu.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const dropdownMenuParts = {
+    root: 'dds-dropdownmenu',
+    trigger: 'dds-dropdownmenu__trigger',
+    icon: 'dds-dropdownmenu__icon',
+    label: 'dds-dropdownmenu__label',
+    chevron: 'dds-dropdownmenu__chevron',
+    surface: 'dds-dropdownmenu__surface',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const dropdownMenuDefaults = { variant: 'outlined', size: 'md', alignment: 'start', tone: 'default', chevron: true, openOnHover: false };

package/dist/components/core/dropdown-menu/dropdown-menu-impl.css

@@ -0,0 +1,70 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so the override below still ties or beats exactly what it did before —
+ * it is written a class deeper than it looks in order to match generated CSS, and a
+ * scope that carried weight would break it.
+ */
+
+/*
+ * Implementation CSS the contract cannot express.
+ *
+ * An animation is a keyframe and a name, and a token binding is one property with one
+ * value — so this cannot be a binding however much it wants to be. What it can do is
+ * take every measure from the same tokens the bindings use, which is what it does:
+ * nothing here is a number.
+ */
+@keyframes dds-dropdownmenu-surface-in {
+  from {
+    opacity: var(--opacity-hidden);
+    scale: var(--motion-scale-enter);
+  }
+}
+
+:where([data-dds-context='marketing']) .dds-dropdownmenu .dds-dropdownmenu__surface {
+  /* From the top, because that is the edge it is pinned to — it grows out of the trigger
+     rather than swelling from its own middle. Centred across, and not from the aligned
+     edge: there is no logical keyword for a corner, so naming one would be right in one
+     writing direction and the wrong corner in the other. At this scale the far edge moves
+     a pixel or two, which is less than the cost of a mirror-image mistake. */
+  transform-origin: top center;
+  animation: dds-dropdownmenu-surface-in var(--motion-duration-normal) var(--motion-easing-enter);
+}
+
+/*
+ * Above the page it floats over.
+ *
+ * `position: absolute` alone leaves the panel at `z-index: auto`, which paints in tree order
+ * among positioned elements — so any positioned sibling declared later covers it. Every
+ * DropdownMenu root is `position: relative`, which makes the next menu on the page exactly
+ * such a sibling: the first menu's panel opened *underneath* the second menu's trigger, which
+ * is how this was found. A navigation bar with a language picker and a region picker is the
+ * ordinary case, not a contrived one.
+ *
+ * A stacking order is an integer with no unit, so no token binding can carry it and no
+ * `staticCss` entry may — this is one of the handful of things that belong in a file like
+ * this. `layer.popup` rather than a number chosen here, which is the role Tooltip opened and
+ * whose own description reserves it for "a tooltip, and whatever menu or panel this package
+ * grows next". This is that panel.
+ *
+ * On the surface rather than the root, so it lasts exactly as long as the panel does: the
+ * surface is absent when the menu is shut, and a root left permanently raised would outrank
+ * its neighbours for nothing.
+ *
+ * It does not make the panel immune. A z-index only orders siblings within a stacking context,
+ * so an ancestor that creates one — a transform, a filter, an opacity below 1, an isolation —
+ * still traps the panel inside it however high this goes. The same caveat Tooltip records.
+ */
+:where([data-dds-context='marketing']) .dds-dropdownmenu .dds-dropdownmenu__surface {
+  z-index: var(--layer-popup);
+}
+
+/* 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 visitor who has asked for less
+   movement has asked for this too. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context='marketing']) .dds-dropdownmenu .dds-dropdownmenu__surface {
+    animation: none;
+  }
+}

package/dist/components/core/filter-chip/FilterChip.css

@@ -0,0 +1,149 @@
+/* GENERATED from filterchip.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-filterchip {
+  transition-property: background-color, background-image, border-color, color, opacity, outline-color, outline-width;
+  align-items: center;
+  appearance: none;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  max-inline-size: 100%;
+  outline-style: solid;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-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-filterchip .dds-filterchip__icon {
+  align-items: center;
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip .dds-filterchip__label {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip .dds-filterchip__trailing {
+  align-items: center;
+  display: flex;
+  flex: none;
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip:disabled:not(:where(:disabled *)) {
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-selected="false"] {
+  background-color: var(--color-bg-surface-raised);
+  border-color: var(--color-border-default);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-selected="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-filterchip[data-size="md"] {
+  block-size: var(--size-control-md);
+  padding-inline-end: var(--space-inset-md);
+  padding-inline-start: var(--space-inset-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="md"] .dds-filterchip__icon {
+  block-size: var(--icon-size-sm);
+  inline-size: var(--icon-size-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="md"] .dds-filterchip__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-filterchip[data-size="sm"] {
+  block-size: var(--size-control-sm);
+  padding-inline-end: var(--space-inset-sm);
+  padding-inline-start: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="sm"] .dds-filterchip__icon {
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="sm"] .dds-filterchip__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-filterchip[data-selected="false"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover), var(--color-bg-hover));
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-selected="true"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-inverse), var(--color-bg-hover-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-selected="false"]:active {
+  background-image: linear-gradient(var(--color-bg-active), var(--color-bg-active));
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-selected="true"]:active {
+  background-image: linear-gradient(var(--color-bg-active-inverse), var(--color-bg-active-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="md"][data-content="badge"] {
+  padding-inline-end: var(--space-inset-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="md"][data-content="custom"] {
+  padding-inline-end: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="md"][data-content="icon"] {
+  padding-inline-end: var(--space-inset-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="sm"][data-content="badge"] {
+  padding-inline-end: var(--space-inset-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="sm"][data-content="custom"] {
+  padding-inline-end: var(--space-inset-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip[data-size="sm"][data-content="icon"] {
+  padding-inline-end: var(--space-inset-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-filterchip:disabled {
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-filterchip,
+  :where([data-dds-context="marketing"]) .dds-filterchip * { transition: none; }
+}
+

package/dist/components/core/filter-chip/FilterChip.d.ts

@@ -0,0 +1,23 @@
+import './FilterChip.css';
+import { type FilterChipProps } from './FilterChip.types.js';
+export type { FilterChipProps };
+/**
+ * A token turned on and off in place.
+ *
+ * The chip is the button. That is the whole reason this is its own component rather
+ * than a mode of a shared one: a token pressed to toggle should be the thing that is
+ * pressed, so the state it reports sits on the element carrying the role instead of
+ * on a child of it. A wrapper that was not a control would put `aria-pressed`
+ * somewhere no check could reach.
+ *
+ * Unlike product's, this one has no `dot` content. That slot held a StatusDot, and
+ * this package has no StatusDot to put in it — a marketing index does not accumulate
+ * unread changes behind a filter the way an app view does. The escape hatch covers
+ * anyone who disagrees.
+ *
+ * It takes this package's control ramp rather than a chip scale of its own. There is
+ * one ramp here, its small step was written for a field in a filter row, and a second
+ * scale existing only for chips would be a distinction no marketing page is dense
+ * enough to need.
+ */
+export declare function FilterChip({ selected, size, content, label, leadingIcon, trailingIcon, badge, custom, onSelect, onClick, ...rest }: FilterChipProps): import("react").JSX.Element;