@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/core/breadcrumb-item/BreadcrumbItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { given } from '../../given.js';
+import './BreadcrumbItem.css';
+import { breadcrumbItemDefaults, breadcrumbItemParts, } from './BreadcrumbItem.types.js';
+/**
+ * One level of a trail: a link back to it, or the current page as plain text.
+ *
+ * `current` wins over `href`. The two together ask for a link from the page to
+ * itself — a tab stop that goes nowhere — so the component declines.
+ *
+ * `aria-current="page"` is what identifies the current level to a screen reader.
+ */
+export function BreadcrumbItem({ label, href, current = breadcrumbItemDefaults.current, ...rest }) {
+    return (_jsx("li", { className: breadcrumbItemParts.root, ...rest, children: current ? (_jsx("span", { className: breadcrumbItemParts.current, "aria-current": "page", children: label })) : given(href) ? (_jsx("a", { className: breadcrumbItemParts.link, href: href, children: label })) : (label) }));
+}

package/dist/components/core/breadcrumb-item/BreadcrumbItem.types.d.ts

@@ -0,0 +1,22 @@
+import type { LiHTMLAttributes } from 'react';
+export interface BreadcrumbItemOwnProps {
+    /** Always — it is the level's name, and the item renders nothing without it. The word the parent level would use for this place: "Forex", not "Forex markets and instruments" */
+    label: string;
+}
+export type BreadcrumbItemProps = BreadcrumbItemOwnProps & Omit<LiHTMLAttributes<HTMLLIElement>, 'className' | 'label' | 'href' | 'current'> & ({
+    current?: boolean;
+    href?: undefined;
+} | {
+    current?: false;
+    href?: string;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const breadcrumbItemParts: {
+    readonly root: "dds-breadcrumbitem";
+    readonly link: "dds-breadcrumbitem__link";
+    readonly current: "dds-breadcrumbitem__current";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const breadcrumbItemDefaults: {
+    readonly current: false;
+};

package/dist/components/core/breadcrumb-item/BreadcrumbItem.types.js

@@ -0,0 +1,9 @@
+// GENERATED from breadcrumb-item.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const breadcrumbItemParts = {
+    root: 'dds-breadcrumbitem',
+    link: 'dds-breadcrumbitem__link',
+    current: 'dds-breadcrumbitem__current',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const breadcrumbItemDefaults = { current: false };

package/dist/components/core/button/Button.css

@@ -0,0 +1,141 @@
+/* GENERATED from button.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-button {
+  transition-property: background-color, background-image, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  outline-style: solid;
+  position: relative;
+  text-decoration-line: none;
+  white-space: nowrap;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  gap: var(--space-gap-sm);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-button .dds-button__label {
+  display: block;
+}
+
+:where([data-dds-context="marketing"]) .dds-button .dds-button__icon {
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"][data-tone="inherit"] {
+  border-color: currentcolor;
+  color: inherit;
+}
+
+:where([data-dds-context="marketing"]) .dds-button:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="lg"] {
+  block-size: var(--size-control-lg);
+  padding-inline: var(--space-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="lg"] .dds-button__icon {
+  block-size: var(--icon-control-lg);
+  inline-size: var(--icon-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="lg"] .dds-button__label {
+  font-family: var(--font-label-md-family);
+  font-size: var(--font-label-md-size);
+  font-weight: var(--font-label-md-weight);
+  letter-spacing: var(--font-label-md-letter-spacing);
+  line-height: var(--font-label-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="md"] {
+  block-size: var(--size-control-md);
+  padding-inline: var(--space-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="md"] .dds-button__icon {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="md"] .dds-button__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="sm"] {
+  block-size: var(--size-control-sm);
+  padding-inline: var(--space-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="sm"] .dds-button__icon {
+  block-size: var(--icon-control-sm);
+  inline-size: var(--icon-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-size="sm"] .dds-button__label {
+  font-family: var(--font-label-sm-family);
+  font-size: var(--font-label-sm-size);
+  font-weight: var(--font-label-sm-weight);
+  letter-spacing: var(--font-label-sm-letter-spacing);
+  line-height: var(--font-label-sm-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"] {
+  background-color: var(--color-bg-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"] {
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-solid);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"] {
+  border-color: var(--color-border-strong);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"]:hover {
+  background-image: linear-gradient(var(--color-bg-hover-inverse), var(--color-bg-hover-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"]:hover {
+  background-color: var(--color-bg-brand-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"]:hover {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="inverse"]:active {
+  background-image: linear-gradient(var(--color-bg-active-inverse), var(--color-bg-active-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="primary"]:active {
+  background-color: var(--color-bg-brand-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-button[data-variant="secondary"]:active {
+  background-color: var(--color-bg-active);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-button,
+  :where([data-dds-context="marketing"]) .dds-button * { transition: none; }
+}
+

package/dist/components/core/button/Button.d.ts

@@ -0,0 +1,25 @@
+import './Button.css';
+import './button-impl.css';
+import { type ButtonProps } from './Button.types.js';
+export type { ButtonProps };
+/**
+ * Three parts, declared in the contract and styled by the generated stylesheet.
+ * The classes come from `buttonParts` rather than being typed here — the CSS is
+ * generated from the same anatomy, and a class retyped slightly differently
+ * renders a part bare with its rule sitting unused.
+ *
+ * An anchor, not a button, and that is the whole shape of this component. It
+ * navigates a visitor to the next step of a funnel, so the element has to be the
+ * one the browser already knows how to navigate with: cmd-click and middle-click
+ * open a new tab, the status bar shows the destination on hover, and assistive
+ * tech announces a link rather than a control that fires something in place.
+ * `href` is required in the generated type for the same reason — an anchor
+ * without one is not focusable and is announced as plain text, so the control
+ * simply disappears for anyone not using a mouse.
+ *
+ * There is no `loading` and no `disabled`, unlike product's Button. Neither has
+ * an honest anchor form: the browser owns the pending state and shows it in the
+ * chrome, and `aria-disabled` on a link still follows the link when pressed, so
+ * a disabled prop here would style a control that keeps working.
+ */
+export declare function Button({ variant, size, tone, href, showIcon, children, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/components/core/button/Button.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightRegularIcon } from '@deriv-com/quill-icons-web';
+import './Button.css';
+import './button-impl.css';
+import { buttonDefaults, buttonParts } from './Button.types.js';
+/**
+ * Three parts, declared in the contract and styled by the generated stylesheet.
+ * The classes come from `buttonParts` rather than being typed here — the CSS is
+ * generated from the same anatomy, and a class retyped slightly differently
+ * renders a part bare with its rule sitting unused.
+ *
+ * An anchor, not a button, and that is the whole shape of this component. It
+ * navigates a visitor to the next step of a funnel, so the element has to be the
+ * one the browser already knows how to navigate with: cmd-click and middle-click
+ * open a new tab, the status bar shows the destination on hover, and assistive
+ * tech announces a link rather than a control that fires something in place.
+ * `href` is required in the generated type for the same reason — an anchor
+ * without one is not focusable and is announced as plain text, so the control
+ * simply disappears for anyone not using a mouse.
+ *
+ * There is no `loading` and no `disabled`, unlike product's Button. Neither has
+ * an honest anchor form: the browser owns the pending state and shows it in the
+ * chrome, and `aria-disabled` on a link still follows the link when pressed, so
+ * a disabled prop here would style a control that keeps working.
+ */
+export function Button({ variant = buttonDefaults.variant, size = buttonDefaults.size, tone = buttonDefaults.tone, href, showIcon = buttonDefaults.showIcon, children, ...rest }) {
+    return (_jsxs("a", { className: buttonParts.root, href: href, "data-variant": variant, "data-tone": tone, "data-size": size, ...rest, children: [_jsx("span", { className: buttonParts.label, children: children }), showIcon ? (_jsx(ArrowRightRegularIcon, { className: buttonParts.icon, "aria-hidden": "true" })) : null] }));
+}

package/dist/components/core/button/Button.types.d.ts

@@ -0,0 +1,40 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface ButtonOwnProps {
+    /**
+     * `primary` — The step the page was built to produce. Carries the brand fill, which is what makes it findable at a glance and what makes it meaningless once there are two — a section offering two brand fills has said nothing about either.
+     * `secondary` — A real destination that is not the one being pushed — compare plans, read the docs, talk to sales. An outline rather than a quiet fill: this package has color.bg.hover for the wash but no hover partner for color.bg.subtle, so a filled secondary would get lighter on hover instead of darker. The outline keeps the shape, the inset and the target size, and gives up only the fill.
+     * `inverse` — A section that paints its own ground — a brand-coloured hero, a photo band, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral edge is the wrong ink, so the only thing that reads is a solid at the far end of the neutral ramp: pure black in light, pure white in dark. It outranks everything near it, which is what makes it right there and wrong anywhere else.
+     */
+    variant?: 'primary' | 'secondary' | 'inverse';
+    /**
+     * `sm` — A dense band where the button is one control among several — a filter row, a utility bar, an action beside body copy. size.control.sm tall against space.control.sm on the sides, half of it as at every step. The label holds at font.label.sm, md's own 14px: the label ramp has no step below it, so what separates these two is the box. Desktop only — at thirty-two it is below what a finger reliably hits.
+     * `md` — The default, and everything that is not a hero — navigation bars, pricing rows, feature sections, footer bands. size.control.md tall against space.control.md on the sides, which is half of it, and font.label.sm — the 14px step, so the label matches product's default button rather than running a size above it.
+     * `lg` — A hero, or a full-width conversion band that is the only control in view. size.control.lg tall against space.control.lg on the sides, again half the height, so the label starts where the pill's curve stops. font.label.md at 16px, product's own large-button measure. One per page, usually: a page of lg CTAs has no hero.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * `default` — The page's own ground, which sets the ink this component was drawn against — every button on a white page
+     * `inherit` — A section that painted its own ground and set its own ink: a dark hero, a brand band, a photo. The button stops naming a colour and takes the one around it, so the edge and the label are whatever the band decided was legible on itself
+     */
+    tone?: 'default' | 'inherit';
+    /** Always. The destination is the component — an anchor without an href is not a link, is not reachable by keyboard, and is announced as plain text, so there is no default that could stand in for one. It takes no default and is not optional for exactly that reason. */
+    href: string;
+    /** Where the destination continues a sequence rather than being simply somewhere else to go — the hero CTA that starts a signup, the button at the foot of a step. Named for the part it renders rather than for the mark inside it: which glyph that is belongs to the component, the way showClose and showTitle name their parts elsewhere. Today it is a forward arrow, and it slides on hover. */
+    showIcon?: boolean;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type ButtonProps = ButtonOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'variant' | 'size' | 'tone' | 'href' | 'showIcon'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const buttonParts: {
+    readonly root: "dds-button";
+    readonly label: "dds-button__label";
+    readonly icon: "dds-button__icon";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const buttonDefaults: {
+    readonly variant: "primary";
+    readonly size: "lg";
+    readonly tone: "default";
+    readonly showIcon: false;
+};

package/dist/components/core/button/Button.types.js

@@ -0,0 +1,9 @@
+// GENERATED from button.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const buttonParts = {
+    root: 'dds-button',
+    label: 'dds-button__label',
+    icon: 'dds-button__icon',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const buttonDefaults = { variant: 'primary', size: 'lg', tone: 'default', showIcon: false };

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

@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+
+/**
+ * One rule the contract has no way to write.
+ *
+ * The arrow slides forward while the *button* is hovered, and `tokens` are keyed on the part
+ * the state is declared on: the contract can say "the arrow is hovered" and cannot say "the
+ * button is". Bound in the contract it generated `.dds-button__icon:hover`, which moves the
+ * mark only while the pointer sits on the sixteen pixels of the arrow itself — a hover the
+ * reader would find by accident and never on purpose. NotificationItem's archive control took
+ * this same division for the same reason, and records it in its own impl file.
+ *
+ * The transition lives here too, and has to. The generated sheet puts duration and easing on
+ * the root, and transition properties do not inherit — so the icon carried a transition
+ * property with no duration and jumped the four pixels instead of travelling them.
+ *
+ * Every value is a token. The distance is the smallest gap step, which is the same measure
+ * that separates the arrow from the words: the mark moves by exactly the space it sits in.
+ */
+:where([data-dds-context="marketing"]) .dds-button .dds-button__icon {
+  transition-property: translate;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon {
+  translate: var(--space-gap-xs);
+}
+
+/**
+ * A reader who asked for less motion gets none, rather than the same distance travelled
+ * instantly. The generated sheet already drops the transition under this query, which on its
+ * own would leave the four-pixel jump — the movement, minus the part that made it legible.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-button:hover .dds-button__icon {
+    translate: 0;
+  }
+}

package/dist/components/core/button-icon/ButtonIcon.css

@@ -0,0 +1,135 @@
+/* GENERATED from buttonicon.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-buttonicon {
+  transition-property: background-color, background-image, outline-color, outline-width;
+  align-items: center;
+  background-color: transparent;
+  border-color: transparent;
+  border-style: solid;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  flex: none;
+  font-family: inherit;
+  justify-content: center;
+  outline-style: solid;
+  padding: 0;
+  text-decoration-line: none;
+  border-radius: var(--radius-pill);
+  border-width: var(--border-width-emphasis);
+  outline-width: var(--border-width-none);
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon .dds-buttonicon__icon {
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="lg"] {
+  block-size: var(--size-control-lg);
+  inline-size: var(--size-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="lg"] .dds-buttonicon__icon {
+  block-size: var(--icon-control-lg);
+  inline-size: var(--icon-control-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="md"] {
+  block-size: var(--size-control-md);
+  inline-size: var(--size-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="md"] .dds-buttonicon__icon {
+  block-size: var(--icon-control-md);
+  inline-size: var(--icon-control-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="sm"] {
+  block-size: var(--size-control-sm);
+  inline-size: var(--size-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-size="sm"] .dds-buttonicon__icon {
+  block-size: var(--icon-control-sm);
+  inline-size: var(--icon-control-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="inverse"] {
+  background-color: var(--color-bg-strong);
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"] {
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="primary"] {
+  background-color: var(--color-bg-brand);
+  color: var(--color-fg-on-solid);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"] {
+  border-color: var(--color-border-strong);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="inverse"]:hover:where(:not(:disabled)) {
+  background-image: linear-gradient(var(--color-bg-hover-inverse), var(--color-bg-hover-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="primary"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-brand-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="inverse"]:active {
+  background-image: linear-gradient(var(--color-bg-active-inverse), var(--color-bg-active-inverse));
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"]:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="primary"]:active {
+  background-color: var(--color-bg-brand-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="secondary"]:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-tone="inverse"]:focus-visible {
+  outline-color: var(--color-border-focus-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"][data-tone="inverse"] {
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"][data-tone="inverse"]:hover:where(:not(:disabled)) {
+  background-color: var(--color-bg-hover-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-buttonicon[data-variant="plain"][data-tone="inverse"]:active {
+  background-color: var(--color-bg-active-inverse);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-buttonicon,
+  :where([data-dds-context="marketing"]) .dds-buttonicon * { transition: none; }
+}
+

package/dist/components/core/button-icon/ButtonIcon.d.ts

@@ -0,0 +1,34 @@
+import './ButtonIcon.css';
+import { type ButtonIconProps } from './ButtonIcon.types.js';
+export type { ButtonIconProps };
+/**
+ * One press carried by a glyph alone.
+ *
+ * Which element it renders is decided by `href` and nothing else, which is CardButton's
+ * shape rather than Button's. Button could not take it: its job is defined as moving a
+ * visitor along a funnel, so it is an anchor always. A glyph-alone control has no such
+ * single job — a footer's social row goes somewhere and a promotional bar's dismiss does
+ * not, and both are one press with one mark. An `<a>` gives cmd-click, a destination in
+ * the status bar and a copyable link; a `<button>` answers Space and does what the page
+ * says. Two components for that would be two names for one gesture.
+ *
+ * The classes come from `buttonIconParts` rather than being typed here — the stylesheet is
+ * generated from the same anatomy, and a class retyped slightly differently renders a part
+ * bare with its rule sitting unused.
+ *
+ * It is typed against `AnchorHTMLAttributes`, which is the branch it takes in the ordinary
+ * case, and it is what puts `target` and `rel` in reach — a marketing destination leaves the
+ * site often enough that the pairing is the consumer's decision rather than an axis of this
+ * component, which is the ruling Button already recorded. The generator takes one interface,
+ * so this is a choice rather than a union: what it gives up is the form-participation
+ * attributes a `<button>` carries — `form`, `name`, `value` — which an icon-only control in a
+ * form wants far less often than an external link wants `rel="noopener"`. `type` survives as
+ * a string, so an intentional submit still compiles.
+ *
+ * There is no `loading` and no `disabled`, which is where this stops following product's
+ * ButtonIcon. Neither has an honest anchor form: the browser owns a link's pending state
+ * and shows it in the chrome, and `aria-disabled` on a link still follows the link when it
+ * is pressed. A prop that meant one thing on one branch and nothing on the other would be
+ * worse than its absence.
+ */
+export declare function ButtonIcon({ icon, label, variant, size, tone, href, ...rest }: ButtonIconProps): import("react").JSX.Element;

package/dist/components/core/button-icon/ButtonIcon.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from 'react';
+import './ButtonIcon.css';
+import { buttonIconDefaults, buttonIconParts } from './ButtonIcon.types.js';
+/**
+ * One press carried by a glyph alone.
+ *
+ * Which element it renders is decided by `href` and nothing else, which is CardButton's
+ * shape rather than Button's. Button could not take it: its job is defined as moving a
+ * visitor along a funnel, so it is an anchor always. A glyph-alone control has no such
+ * single job — a footer's social row goes somewhere and a promotional bar's dismiss does
+ * not, and both are one press with one mark. An `<a>` gives cmd-click, a destination in
+ * the status bar and a copyable link; a `<button>` answers Space and does what the page
+ * says. Two components for that would be two names for one gesture.
+ *
+ * The classes come from `buttonIconParts` rather than being typed here — the stylesheet is
+ * generated from the same anatomy, and a class retyped slightly differently renders a part
+ * bare with its rule sitting unused.
+ *
+ * It is typed against `AnchorHTMLAttributes`, which is the branch it takes in the ordinary
+ * case, and it is what puts `target` and `rel` in reach — a marketing destination leaves the
+ * site often enough that the pairing is the consumer's decision rather than an axis of this
+ * component, which is the ruling Button already recorded. The generator takes one interface,
+ * so this is a choice rather than a union: what it gives up is the form-participation
+ * attributes a `<button>` carries — `form`, `name`, `value` — which an icon-only control in a
+ * form wants far less often than an external link wants `rel="noopener"`. `type` survives as
+ * a string, so an intentional submit still compiles.
+ *
+ * There is no `loading` and no `disabled`, which is where this stops following product's
+ * ButtonIcon. Neither has an honest anchor form: the browser owns a link's pending state
+ * and shows it in the chrome, and `aria-disabled` on a link still follows the link when it
+ * is pressed. A prop that meant one thing on one branch and nothing on the other would be
+ * worse than its absence.
+ */
+export function ButtonIcon({ icon, label, variant = buttonIconDefaults.variant, size = buttonIconDefaults.size, tone = buttonIconDefaults.tone, href, ...rest }) {
+    /*
+      What both branches carry. Spread after `rest` so none of it can be written over from
+      the call site: the classes are how the generated stylesheet finds its parts, and the
+      accessible name is the only name this control has.
+    */
+    const shared = {
+        className: buttonIconParts.root,
+        // Read from data attributes rather than folded into the class, the way Button and Card do.
+        'data-variant': variant,
+        'data-tone': tone,
+        'data-size': size,
+        /*
+          The entire accessible name. Button gets one from its children; this draws no text, so
+          without this attribute there is nothing to announce and the control is a shape with a
+          press on it.
+        */
+        'aria-label': label,
+    };
+    /*
+      aria-hidden because the mark names nothing: `label` has already named the control, and a
+      footer row of these would otherwise announce the picture on every one.
+    */
+    const applied = { 'aria-hidden': 'true' };
+    /*
+      The glyph, cloned rather than wrapped.
+  
+      The class has to reach the `<svg>` itself. Every glyph in the icon package ships `width`
+      and `height` presentation attributes defaulting to 24, so a box around it keeps its own
+      measure and the mark keeps the package's — and the only thing that overrides an attribute
+      is a CSS length on the element carrying it. Product's Icon clones for exactly this reason
+      and says so; Marketing Button puts its arrow's class in the same place, the difference
+      being only that Button chose its own glyph and so had the element in hand.
+  
+      A wrapper was the first shape here and it was wrong twice: the mark stood at whatever size
+      it was imported at, and the hand-written rule dragging it back to the box's measure was a
+      second place the size was decided — in a file beside the generated one, where the next
+      person to change `icon.control.*` would not think to look.
+  
+      Not a clone that injects a size, which is the thing product's ButtonIcon pulled out: that
+      reached only glyphs which happen to read a `size` prop and did nothing for a bare one. A
+      className reaches every element in the package, and any the caller set is kept.
+  
+      Nor Marketing's own Icon, which Badge and Tab wrap their glyphs in. Icon draws from
+      `icon.size`, and that ramp steps 16 then 20 while the control ramp is 18 then 20 — so
+      there is no step an md control could ask it for, and rounding to either neighbour would
+      put this mark a measure away from the same glyph beside a label in the same band. The
+      contract's `icon` part records the same reasoning.
+    */
+    const mark = isValidElement(icon) ? (cloneElement(icon, {
+        className: [buttonIconParts.icon, icon.props.className].filter(Boolean).join(' '),
+        ...applied,
+    })) : (
+    /*
+      Anything that is not a single element cannot be cloned, and the preview hands every node
+      slot a sample string. Product's Icon keeps a box for that case rather than throwing —
+      `Children.only` took the whole preview down there — so the class lands on something and
+      the part is still findable.
+    */
+    _jsx("span", { className: buttonIconParts.icon, ...applied, children: icon }));
+    if (href !== undefined) {
+        // No cast: `rest` is already the anchor's own attribute set, so `target` and `rel`
+        // arrive typed and land on the element that understands them.
+        return (_jsx("a", { ...rest, ...shared, href: href, children: mark }));
+    }
+    return (
+    /*
+      A button, not a submit. The element's own default is `submit`, so one of these dropped
+      into a newsletter form would send it — and a dismiss that submitted a form is the kind
+      of fault nobody looks for in an icon.
+
+      Above the spread rather than below it, which is where this differs from CardButton: an
+      icon-only submit beside an email field is a real thing to want, so a consumer who says
+      so still wins. A card is never a form's submit, which is why it can afford to force it.
+
+      The cast is on this branch rather than the other, which is the mirror of CardButton and
+      follows from the props being the anchor's: an `<a>`'s `type` is the destination's MIME
+      type and so is a plain string, which a `<button>`'s own `type` will not accept. Runtime
+      is unaffected — a consumer writing "submit" still gets a submit — but the two elements
+      disagree about what the word means, and TypeScript is right to say so.
+    */
+    _jsx("button", { type: "button", ...rest, ...shared, children: mark }));
+}