@deriv-com/dds-marketing 0.2.0 → 1.0.1

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

@@ -2,9 +2,9 @@ import type { AnchorHTMLAttributes, ReactNode } from 'react';
 export interface ButtonIconOwnProps {
     /**
      * `primary` — The one glyph-alone press a section is built around — a play control over a hero, the single action a band exists for. Carries the brand fill, which is what makes it findable at a glance and what makes it meaningless once there are two.
-     * `secondary` — The ordinary case for these, because they usually arrive several at a time — a footer's social row, a carousel's two directions, a bar's dismiss. An outline rather than a quiet fill, for Button's reason: 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. It keeps the circle, the mark and the target and gives up only the fill.
-     * `inverse` — A section that paints its own ground — a brand-coloured band, a photo, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral edge is the wrong ink over a photograph, 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.
-     * `plain` — The control sits on a surface that has already said what it is — the exit on a sheet, a step in a set of marks — and a ring around it would be the loudest thing there. It keeps the target and the states and gives up only the edge, so what a reader presses is unchanged and what they see is the glyph.
+     * `secondary` — The ordinary case for these, because they usually arrive several at a time — a footer's social row, a carousel's two directions, a bar's dismiss. Button's secondary, drawn as a circle: the lightest tint the ramp offers, color.bg.subtle, with hover and press layered over the fill as a background-image rather than replacing it, so a glyph-alone control and a labelled one beside it read as one family. On the dark band, tone="inverse" keeps the fill and turns it white.
+     * `inverse` — A section that paints its own ground — a brand-coloured band, a photo, a dark takeover. There the brand fill is invisible against the fill behind it and a neutral tint is lost over a photograph, 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.
+     * `plain` — The control sits on a surface that has already said what it is — the exit on a sheet, a step in a set of marks — and a tint behind it would be the loudest thing there. It keeps the target and the states and gives up only the fill, so what a reader presses is unchanged and what they see is the glyph.
      */
     variant?: 'primary' | 'secondary' | 'inverse' | 'plain';
     /**
@@ -15,7 +15,7 @@ export interface ButtonIconOwnProps {
     size?: 'sm' | 'md' | 'lg';
     /**
      * `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 mark in a navigation bar standing on a dark hero. The ink and the tints move together; nothing else does
+     * `inverse` — The control stands on the dark band, color.bg.brand-strong — a mark in a navigation bar on a hero, a social mark in a footer — which is the same near-black in light and dark. The ink and the tints move to the band's fixed roles; nothing else does
      */
     tone?: 'default' | 'inverse';
     /** Always — the glyph is the whole control, so it is required rather than a slot that may be empty. Pass the glyph itself, from the icon package, rather than one already sized: the size a mark takes in this circle is this component's decision, at icon.control.md on md and icon.control.lg on lg, and the width and height the glyph shipped with are overridden by the class this component clones onto it. */

package/dist/components/core/card/Card.css

@@ -9,13 +9,13 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="accent-strong"] {
-  background-color: var(--color-bg-brand-strong);
+  background-color: var(--color-bg-surface-card-strong);
   color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="accent"] {
   background-color: var(--color-bg-brand);
-  color: var(--color-fg-on-solid);
+  color: var(--color-fg-on-brand);
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="plain"] {
@@ -23,8 +23,13 @@
   color: var(--color-fg-default);
 }
 
+:where([data-dds-context="marketing"]) .dds-card[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light);
+  color: var(--color-fg-on-surface-card-light);
+}
+
 :where([data-dds-context="marketing"]) .dds-card[data-variant="surface-raised"] {
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-surface-card-raised);
   color: var(--color-fg-default);
 }
 
@@ -45,12 +50,16 @@
   color: var(--color-fg-on-brand-strong);
 }
 
+:where([data-dds-context="marketing"]) .dds-card[data-variant="surface-light"][data-compact="true"] {
+  border-radius: var(--radius-surface-compact);
+}
+
 :where([data-dds-context="marketing"]) .dds-card[data-variant="surface-raised"][data-compact="true"] {
   border-radius: var(--radius-surface-compact);
 }
 
 :where([data-dds-context="marketing"]) .dds-card[data-variant="surface-raised"][data-tone="inverse"] {
-  background-color: var(--color-bg-surface-raised-inverse);
+  background-color: var(--color-bg-surface-raised-on-brand-strong);
   color: var(--color-fg-on-brand-strong);
 }
 

package/dist/components/core/card/Card.types.d.ts

@@ -2,12 +2,13 @@ import type { HTMLAttributes, ReactNode } from 'react';
 export interface CardOwnProps {
     /**
      * `surface` — The default, and right for a card on the page. The marketing page is white and this is a step off it, so the card is told apart by being recessed — no shadow and no border, because the fill is already the edge
+     * `surface-light` — A light card among dark ones that has to stay light in both themes — a row mixing a dark, a coral and a grey card, where the grey one flipping to dark in dark mode would make two dark cards and break the set. gray.50 with gray.950 text, fixed. For an ordinary card that follows the theme, surface.
      * `surface-raised` — The card sits on a color.bg.subtle band rather than on the page. There the recessed fill is only 1.09:1 against its ground and all but disappears; this one is 1.23:1 the other way, lifting off the band instead of sinking into it
      * `plain` — An editorial card — an article, a post, a story — where the picture and the headline are what separate one card from the next. It paints no background, so it shows whatever is under it: the page, a subtle band, or a section that has taken a colour. The corner and the clip are still the card's, so a picture at the top of it meets a rounded edge rather than squaring one off It takes no corner either: radius.surface is the shape of a fill, and with no fill there is nothing to round — a rounded picture sitting on the page reads as a floating tile rather than as the art leading an article.
      * `accent` — One card in a set is the promotional one and the page has already earned the colour. The coral is the loudest ground here, so a row of them is a row of nothing louder than the rest
      * `accent-strong` — A card carrying more weight than its neighbours, where the coral would be too loud and the page ground too quiet. The darkest of the four, and the one that takes white at 20.55:1 — the most legible ground a marketing card has
      */
-    variant?: 'surface' | 'surface-raised' | 'plain' | 'accent' | 'accent-strong';
+    variant?: 'surface' | 'surface-light' | 'surface-raised' | 'plain' | 'accent' | 'accent-strong';
     /**
      * `default` — The page is light, which is nearly every page. The fills are opaque and the ink is dark
      * `inverse` — The card sits on a band that paints its own dark ground. The neutral fills become a veil of white over that ground rather than a sheet of paper on top of it, which is what keeps a card on a dark band from reading as a hole cut in it. The two neutral variants stay two steps apart: `surface` is the quiet one a panel wants, `surface-raised` the stronger lift that suits something the size of a control.

package/dist/components/core/card-body/CardBody.css

@@ -37,11 +37,11 @@
   transition-property: color;
   margin: 0;
   text-transform: uppercase;
-  font-family: var(--font-eyebrow-family);
-  font-size: var(--font-eyebrow-size);
-  font-weight: var(--font-eyebrow-weight);
-  letter-spacing: var(--font-eyebrow-letter-spacing);
-  line-height: var(--font-eyebrow-line-height);
+  font-family: var(--font-eyebrow-sm-family);
+  font-size: var(--font-eyebrow-sm-size);
+  font-weight: var(--font-eyebrow-sm-weight);
+  letter-spacing: var(--font-eyebrow-sm-letter-spacing);
+  line-height: var(--font-eyebrow-sm-line-height);
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__title {
@@ -64,6 +64,11 @@
   line-height: var(--font-body-md-line-height);
 }
 
+:where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__link {
+  display: flex;
+  margin-block-start: var(--space-heading-description-actions);
+}
+
 :where([data-dds-context="marketing"]) .dds-cardbody .dds-cardbody__media-frame {
   display: block;
   flex: auto;
@@ -134,6 +139,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-cardbody,
-  :where([data-dds-context="marketing"]) .dds-cardbody * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-cardbody * { transition: none !important; }
 }
 

package/dist/components/core/card-body/CardBody.d.ts

@@ -59,4 +59,4 @@ export type { CardBodyProps };
  * inherits, so the same title is `fg.on-solid` on the brand fill and
  * `fg.default` on the page without this component knowing which card it is in.
  */
-export declare function CardBody({ eyebrow, title, description, mark, src, alt, aspect, mediaPosition, overMedia, flush, compact, tone, zoomOnHover, children: _children, ...rest }: CardBodyProps): import("react").JSX.Element;
+export declare function CardBody({ eyebrow, title, description, link, mark, src, alt, aspect, mediaPosition, overMedia, flush, compact, tone, zoomOnHover, children: _children, ...rest }: CardBodyProps): import("react").JSX.Element;

package/dist/components/core/card-body/CardBody.js

@@ -61,7 +61,7 @@ import { cardBodyDefaults, cardBodyParts } from './CardBody.types.js';
  * inherits, so the same title is `fg.on-solid` on the brand fill and
  * `fg.default` on the page without this component knowing which card it is in.
  */
-export function CardBody({ eyebrow, title, description, mark, src, alt, aspect, mediaPosition = cardBodyDefaults.mediaPosition, overMedia = cardBodyDefaults.overMedia, flush = cardBodyDefaults.flush, compact = cardBodyDefaults.compact, tone = cardBodyDefaults.tone, zoomOnHover = cardBodyDefaults.zoomOnHover, children: _children, ...rest }) {
+export function CardBody({ eyebrow, title, description, link, mark, src, alt, aspect, mediaPosition = cardBodyDefaults.mediaPosition, overMedia = cardBodyDefaults.overMedia, flush = cardBodyDefaults.flush, compact = cardBodyDefaults.compact, tone = cardBodyDefaults.tone, zoomOnHover = cardBodyDefaults.zoomOnHover, children: _children, ...rest }) {
     // Pulled out of `rest` and deliberately unused. `HTMLAttributes` carries a
     // `children` the contract does not declare, and the generator only omits props
     // it knows about — so the type accepts children this component has no slot for,
@@ -85,7 +85,7 @@ export function CardBody({ eyebrow, title, description, mark, src, alt, aspect,
         // frame arrived: the ratio is a fact about the box, and the picture inside it
         // fills that box at 100% and covers.
         style: aspect === undefined ? undefined : { flex: 'none', aspectRatio: aspect }, children: _jsx("img", { className: cardBodyParts.media, src: src, alt: alt }) })) : null;
-    const content = (_jsxs("div", { className: cardBodyParts.content, children: [mark !== undefined ? (_jsx("div", { className: cardBodyParts.mark, children: _jsx(Icon, { size: "lg", children: mark }) })) : null, given(eyebrow) ? _jsx("p", { className: cardBodyParts.eyebrow, children: eyebrow }) : null, given(title) ? _jsx("h3", { className: cardBodyParts.title, children: title }) : null, given(description) ? (_jsx("p", { className: cardBodyParts.description, children: description })) : null] }));
+    const content = (_jsxs("div", { className: cardBodyParts.content, children: [mark !== undefined ? (_jsx("div", { className: cardBodyParts.mark, children: _jsx(Icon, { size: "lg", children: mark }) })) : null, given(eyebrow) ? _jsx("p", { className: cardBodyParts.eyebrow, children: eyebrow }) : null, given(title) ? _jsx("h3", { className: cardBodyParts.title, children: title }) : null, given(description) ? (_jsx("p", { className: cardBodyParts.description, children: description })) : null, link ? _jsx("div", { className: cardBodyParts.link, children: link }) : null] }));
     if (overMedia) {
         return (
         // Both values, never just the set one. The stylesheet selects on

package/dist/components/core/card-body/CardBody.types.d.ts

@@ -23,6 +23,8 @@ export interface CardBodyOwnProps {
     title?: string;
     /** What the title means, usually a sentence or two. It takes the default body step, because a card's copy is copy rather than a caption. A string rather than a node, for the reason the title is one — a node prop cannot be given text in an examples row, and a card nobody can show is worse than a sentence that cannot hold a link. */
     description?: string;
+    /** The card's own way on — "Learn more" — under the line, for a card in a Card rather than a CardButton: the card is read and the link is what is pressed. A standalone Link. On a card that paints its own ground, accent or accent-strong, give it tone="inherit" so it takes the card's white; on a light card it keeps its coral. */
+    link?: ReactNode;
     /** The card leads with a glyph — a badge, a shield, a small piece of art that makes the feature recognisable before the title is read. Set it on every card in a set or on none of them: one card in a row carrying a mark reads as the important one, which is a claim the mark was not meant to make. Pass the glyph; the body draws it at its own step, and an Icon passed already sized is unwrapped rather than obeyed */
     mark?: ReactNode;
     /** The card shows a picture — a photograph, a product render, a screenshot of the thing being described. Absent is the ordinary case: most cards are words */
@@ -37,7 +39,7 @@ export interface CardBodyOwnProps {
      */
     mediaPosition?: 'below' | 'above';
 }
-export type CardBodyProps = CardBodyOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'overMedia' | 'flush' | 'zoomOnHover' | 'compact' | 'tone' | 'eyebrow' | 'title' | 'description' | 'mark' | 'src' | 'alt' | 'aspect' | 'mediaPosition'>;
+export type CardBodyProps = CardBodyOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'overMedia' | 'flush' | 'zoomOnHover' | 'compact' | 'tone' | 'eyebrow' | 'title' | 'description' | 'link' | 'mark' | 'src' | 'alt' | 'aspect' | 'mediaPosition'>;
 /** The class each part carries. Apply these — do not retype them. */
 export declare const cardBodyParts: {
     readonly root: "dds-cardbody";
@@ -47,6 +49,7 @@ export declare const cardBodyParts: {
     readonly eyebrow: "dds-cardbody__eyebrow";
     readonly title: "dds-cardbody__title";
     readonly description: "dds-cardbody__description";
+    readonly link: "dds-cardbody__link";
     readonly 'media-frame': "dds-cardbody__media-frame";
     readonly media: "dds-cardbody__media";
 };

package/dist/components/core/card-body/CardBody.types.js

@@ -8,6 +8,7 @@ export const cardBodyParts = {
     eyebrow: 'dds-cardbody__eyebrow',
     title: 'dds-cardbody__title',
     description: 'dds-cardbody__description',
+    link: 'dds-cardbody__link',
     'media-frame': 'dds-cardbody__media-frame',
     media: 'dds-cardbody__media',
 };

package/dist/components/core/card-button/CardButton.css

@@ -27,13 +27,13 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="accent-strong"] {
-  background-color: var(--color-bg-brand-strong);
+  background-color: var(--color-bg-surface-card-strong);
   color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="accent"] {
   background-color: var(--color-bg-brand);
-  color: var(--color-fg-on-solid);
+  color: var(--color-fg-on-brand);
 }
 
 :where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="plain"] {
@@ -41,8 +41,13 @@
   color: var(--color-fg-default);
 }
 
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-light"] {
+  background-color: var(--color-bg-surface-card-light);
+  color: var(--color-fg-on-surface-card-light);
+}
+
 :where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-raised"] {
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-surface-card-raised);
   color: var(--color-fg-default);
 }
 
@@ -59,6 +64,10 @@
   translate: var(--motion-translate-hover);
 }
 
+:where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-light"]:hover:where(:not(:disabled)) {
+  translate: var(--motion-translate-hover);
+}
+
 :where([data-dds-context="marketing"]) .dds-cardbutton[data-variant="surface-raised"]:hover:where(:not(:disabled)) {
   translate: var(--motion-translate-hover);
 }
@@ -68,6 +77,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-cardbutton { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-cardbutton { transition: none !important; }
 }
 

package/dist/components/core/card-button/CardButton.types.d.ts

@@ -2,12 +2,13 @@ import type { ButtonHTMLAttributes, ReactNode } from 'react';
 export interface CardButtonOwnProps {
     /**
      * `surface` — The default, and right for a pressable card on the page. The same recessed step off the white page that Card takes, so a row mixing pressable and plain cards reads as one row
+     * `surface-light` — A light card among dark ones that has to stay light in both themes — a row mixing a dark, a coral and a grey card, where the grey one flipping to dark in dark mode would make two dark cards. gray.50 with gray.950 text, fixed. For an ordinary card that follows the theme, surface.
      * `surface-raised` — The card sits on a color.bg.subtle band rather than on the page, where the recessed fill all but disappears and this one lifts off the band instead
      * `accent` — One card in a set is the promotional one and the page has already earned the colour
      * `accent-strong` — A card carrying more weight than its neighbours. The darkest of the four, and the one that takes white at 20.55:1 — the most legible ground a marketing card has
      * `plain` — An editorial card that goes somewhere — an article, a post, a release note. No fill, no corner and no lift: what marks it out is its picture and the gap to the next one, the way a column of articles is told apart on a page rather than the way a row of tiles is. The same ground Card's own plain variant takes, so a pressable article card and a static one sit in one column without a seam
      */
-    variant?: 'surface' | 'surface-raised' | 'accent' | 'accent-strong' | 'plain';
+    variant?: 'surface' | 'surface-light' | 'surface-raised' | 'accent' | 'accent-strong' | 'plain';
     /** The press goes somewhere with a URL of its own. It makes this an anchor rather than a button, which is what gives a reader cmd-click, a visible destination and a copyable link — none of which mean anything for a press that opens a dialog. This is the ordinary case on a marketing page, where most cards point at a page */
     href?: string;
     /** Allowed: any content */

package/dist/components/core/checkbox/Checkbox.css

@@ -48,7 +48,6 @@
   justify-content: center;
   pointer-events: none;
   block-size: var(--icon-size-2xs);
-  color: var(--color-fg-on-solid);
   inline-size: var(--icon-size-2xs);
 }
 
@@ -111,6 +110,14 @@
   color: var(--color-fg-warning);
 }
 
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="accent"] .dds-checkbox__indicator {
+  color: var(--color-fg-on-brand);
+}
+
+:where([data-dds-context="marketing"]) .dds-checkbox[data-tone="standard"] .dds-checkbox__indicator {
+  color: var(--color-fg-on-strong);
+}
+
 :where([data-dds-context="marketing"]) .dds-checkbox[data-checked="unchecked"][data-status="error"] .dds-checkbox__box {
   border-color: var(--color-border-danger);
 }

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

@@ -30,6 +30,15 @@
   transition-timing-function: var(--motion-easing-standard);
 }
 
+:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__chevron {
+  transition-property: rotate;
+  block-size: var(--icon-control-lg);
+  color: var(--color-fg-muted);
+  inline-size: var(--icon-control-lg);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
 :where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__surface {
   border-style: solid;
   box-sizing: border-box;
@@ -66,14 +75,6 @@
   inset-inline-start: 0;
 }
 
-:where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__chevron {
-  block-size: var(--icon-control-lg);
-  color: var(--color-fg-muted);
-  inline-size: var(--icon-control-lg);
-  transition-duration: var(--motion-duration-fast);
-  transition-timing-function: var(--motion-easing-standard);
-}
-
 :where([data-dds-context="marketing"]) .dds-dropdownmenu .dds-dropdownmenu__icon {
   block-size: var(--icon-control-lg);
   inline-size: var(--icon-control-lg);
@@ -124,15 +125,15 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:hover:where(:not(:disabled)) {
-  background-color: var(--color-bg-hover-inverse);
+  background-color: var(--color-bg-hover-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:active {
-  background-color: var(--color-bg-active-inverse);
+  background-color: var(--color-bg-active-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-tone="inverse"] .dds-dropdownmenu__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-dropdownmenu[data-variant="plain"][data-size="sm"] .dds-dropdownmenu__trigger {
@@ -141,6 +142,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-dropdownmenu,
-  :where([data-dds-context="marketing"]) .dds-dropdownmenu * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-dropdownmenu * { transition: none !important; }
 }
 

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

@@ -11,10 +11,12 @@ export type { DropdownMenuProps };
  * 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
+ * menu of the same name. That was forced rather than chosen: when this was built, this package's
+ * Button was an anchor with a required `href`, so it was 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.
+ * needs words, and nothing here drew a button with words. Button now renders a `<button>` when it
+ * has no href, so whether it should become the trigger is an open question rather than a settled one.
  *
  * 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.

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

@@ -16,10 +16,12 @@ import { dropdownMenuDefaults, dropdownMenuParts } from './DropdownMenu.types.js
  * 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
+ * menu of the same name. That was forced rather than chosen: when this was built, this package's
+ * Button was an anchor with a required `href`, so it was 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.
+ * needs words, and nothing here drew a button with words. Button now renders a `<button>` when it
+ * has no href, so whether it should become the trigger is an open question rather than a settled one.
  *
  * 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.

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

@@ -37,6 +37,7 @@
   align-items: center;
   display: flex;
   flex: none;
+  transition-property: rotate;
   transition-duration: var(--motion-duration-fast);
   transition-timing-function: var(--motion-easing-standard);
 }
@@ -144,6 +145,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-filterchip,
-  :where([data-dds-context="marketing"]) .dds-filterchip * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-filterchip * { transition: none !important; }
 }
 

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

@@ -214,5 +214,5 @@
  * been put on, and Footer cannot bind a property of a component it does not declare.
  */
 :where([data-dds-context="marketing"]) .dds-footer .dds-link:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }

package/dist/components/core/footer-group/FooterGroup.css

@@ -38,6 +38,12 @@
   padding-block: var(--space-gap-sm);
 }
 
+:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__marker {
+  transition-property: rotate;
+  block-size: var(--icon-size-xs);
+  inline-size: var(--icon-size-xs);
+}
+
 :where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__list {
   display: flex;
   flex-direction: column;
@@ -63,13 +69,8 @@
   line-height: var(--font-label-md-line-height);
 }
 
-:where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__marker {
-  block-size: var(--icon-size-xs);
-  inline-size: var(--icon-size-xs);
-}
-
 :where([data-dds-context="marketing"]) .dds-footergroup .dds-footergroup__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
   outline-width: var(--border-width-focus);
 }
 
@@ -85,6 +86,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-footergroup,
-  :where([data-dds-context="marketing"]) .dds-footergroup * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-footergroup * { transition: none !important; }
 }
 

package/dist/components/core/icon/Icon.css

@@ -35,6 +35,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  :where([data-dds-context="marketing"]) .dds-icon { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-icon { transition: none !important; }
 }
 

package/dist/components/core/link/Link.css

@@ -84,6 +84,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-link,
-  :where([data-dds-context="marketing"]) .dds-link * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-link * { transition: none !important; }
 }
 

package/dist/components/core/link/Link.js

@@ -55,14 +55,14 @@ export function Link({ variant = linkDefaults.variant, tone = linkDefaults.tone,
   
       A standalone link sets its label at font.label.md — semibold — and beside
       that the regular cut's strokes read as a smudge rather than a direction, so
-      the arrow is solid. That is a deliberate exception to
-      `icon-solid-marks-selection`, which reserves the weight for a selected item:
-      this is not selection, and what earns it is legibility at sixteen pixels
-      against a heavier neighbour.
+      the arrow is solid. That is no exception to `icon-weight-within-a-set`,
+      which reserves the weight for the current one of a set: the arrow sits in
+      no set, and what earns it is legibility at sixteen pixels against a heavier
+      neighbour.
   
       An inline link has no label of its own — it takes the paragraph's type, which
       is body copy at the regular weight. A solid arrow there is heavier than every
-      word around it, so the exception does not apply and the regular cut is right.
+      word around it, so legibility does not ask for solid and the regular cut is right.
       The mark matches its neighbours either way; only the neighbours change.
     */
     const inline = variant === 'inline';

package/dist/components/core/menu-item/MenuItem.css

@@ -65,6 +65,6 @@
 
 @media (prefers-reduced-motion: reduce) {
   :where([data-dds-context="marketing"]) .dds-menuitem,
-  :where([data-dds-context="marketing"]) .dds-menuitem * { transition: none; }
+  :where([data-dds-context="marketing"]) .dds-menuitem * { transition: none !important; }
 }
 

package/dist/components/core/navbar/Navbar.css

@@ -29,7 +29,7 @@
 :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__ground {
   inset: 0;
   position: absolute;
-  background-color: var(--color-bg-page);
+  background-color: var(--color-bg-surface-translucent);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__brand {
@@ -45,7 +45,6 @@
 :where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__nav {
   align-items: center;
   display: flex;
-  position: relative;
   gap: var(--space-gap-none);
 }
 
@@ -99,11 +98,11 @@
   align-items: center;
   display: flex;
   position: relative;
-  background-color: var(--color-bg-surface-raised);
+  background-color: var(--color-bg-surface-translucent);
   border-radius: var(--radius-pill);
   box-shadow: var(--elevation-surface-floating);
   gap: var(--space-gap-md);
-  min-block-size: var(--size-control-lg);
+  min-block-size: var(--size-control-md);
   padding-block: var(--space-inset-2xs);
   padding-inline: var(--space-inset-2xs);
 }
@@ -118,18 +117,18 @@
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] {
-  color: var(--color-fg-on-strong);
+  color: var(--color-fg-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__cluster {
-  background-color: var(--color-bg-surface-raised-inverse);
+  background-color: var(--color-bg-surface-translucent-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__ground {
-  background-color: var(--color-bg-strong);
+  background-color: var(--color-bg-surface-translucent-on-brand-strong);
 }
 
 :where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__trigger:focus-visible {
-  outline-color: var(--color-border-focus-inverse);
+  outline-color: var(--color-border-focus-on-brand-strong);
 }
 

package/dist/components/core/navbar/Navbar.d.ts

@@ -1,5 +1,7 @@
+import { type ReactNode } from 'react';
 import './Navbar.css';
 import './navbar-impl.css';
+import './navbar-material.css';
 import { type NavbarProps } from './Navbar.types.js';
 export type { NavbarProps };
 /**
@@ -11,6 +13,20 @@ export type { NavbarProps };
  * and which way round — is exactly the part that was wrong before and would be wrong again quietly.
  */
 export declare function gathered(was: boolean, offset: number): boolean;
+/**
+ * A slot's contents as one flat list, with every fragment opened.
+ *
+ * A page hands a pair of actions over as `<>…</>` and a list of switchers the same way, and
+ * `Children.map` does not look inside a fragment — so a fragment reached anything that matched on
+ * type, NavbarPanel's switcher-to-row swap included, as one opaque element. Opened here, once,
+ * each control is a child of its own wherever the slot is drawn.
+ *
+ * Every element comes out with a key unique across the whole list. `Children.toArray` keys each
+ * level from `.0` again, so the children of two fragments side by side would share keys and React
+ * could hand one control's state — an open switcher, say — to another. Each key is prefixed with
+ * the path of fragments it came through, the way React keys nested arrays itself.
+ */
+export declare function flattened(node: ReactNode, path?: string): ReactNode[];
 /**
  * The bar across the top of a marketing page: the mark, the places the site has,
  * and the things a reader reaches for rather than navigates to.
@@ -33,4 +49,4 @@ export declare function gathered(was: boolean, offset: number): boolean;
  * landmark, and writing it as well says so a second time in a way that goes stale
  * if the element is ever nested.
  */
-export declare function Navbar({ tone, label, menuLabel, closeLabel, brand, utilities, compactAction, preferences, menuOpen, onMenuOpenChange, children, ...rest }: NavbarProps): import("react").JSX.Element;
+export declare function Navbar({ tone, label, menuLabel, closeLabel, brand, utilities, compactAction, preferences, showThemeToggle, theme, onThemeChange, themeToggleLabel, menuOpen, onMenuOpenChange, children, ...rest }: NavbarProps): import("react").JSX.Element;