@deriv-com/dds-marketing 0.1.0 → 0.2.0

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

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRightRegularIcon, ArrowRightSolidIcon, ArrowUpRightRegularIcon, ArrowUpRightSolidIcon, } from '@deriv-com/quill-icons-web';
+import './Link.css';
+import './link-impl.css';
+import { Icon } from '../icon/Icon.js';
+import { linkDefaults, linkParts } from './Link.types.js';
+/**
+ * Words in a sentence that go somewhere.
+ *
+ * An anchor with a real href, which is the whole component: cmd-click opens a
+ * tab, the status bar shows the destination before the press, the address can be
+ * copied, and a screen reader announces a link. `href` is required in the
+ * generated type for that reason — an anchor without one takes no focus and is
+ * announced as plain text, so the destination disappears for anyone not using a
+ * mouse.
+ *
+ * `display: inline`, unlike everything else pressable in this package. A link is
+ * part of a line and has to wrap with it; Button is `inline-flex` because it is
+ * a box the copy flows around, and a link behaving that way would leave a hole
+ * at the end of a line rather than breaking across two.
+ *
+ * The type is inherited rather than set, in the inline variant. A link in a body
+ * paragraph is body copy and a link in a caption is caption, which is the whole
+ * idea — only `standalone` binds a step, because a link on its own line has no
+ * sentence to take one from.
+ *
+ * `external` carries three things that belong together: the target, the rel, and
+ * the mark. The rel is not optional and not the consumer's job — leaving it to
+ * the call site is how a page hands `window.opener` to a site it does not
+ * control — and putting the glyph here is what makes every external link on the
+ * site carry the same one.
+ *
+ * There is no `loading` and no `disabled`, which is where this parts company
+ * with Product's Link and follows Marketing's Button instead. The browser owns a
+ * navigation in flight and shows it in the chrome; and an anchor cannot be
+ * honestly disabled, since dropping the href is the only thing that truly stops
+ * it and that costs the link role and the focus with it.
+ */
+export function Link({ variant = linkDefaults.variant, tone = linkDefaults.tone, href, external = linkDefaults.external, showIcon, iconLeading, children, ...rest }) {
+    /*
+      The trailing mark, and the component owns it. Which arrow it is follows the
+      destination rather than the call site: right for somewhere on this site,
+      up-right for somewhere off it. A page cannot pass one, because an external
+      link wearing a plain right arrow would be telling the reader their tab is
+      about to stay put — and that is the one thing this mark exists to say.
+  
+      An external link is always marked — leaving the site is a fact about the
+      destination, not a flourish a page may decline. Everything else follows
+      `showIcon`, which reaches both variants and defaults to neither: unset, it
+      takes the answer the variant implies.
+  
+      The weight follows the words the mark sits beside, which is the only place
+      an inline link and a standalone one disagree about a glyph.
+  
+      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.
+  
+      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.
+      The mark matches its neighbours either way; only the neighbours change.
+    */
+    const inline = variant === 'inline';
+    /*
+      Unset follows the variant, which is the only sensible default and not one the
+      contract can hold: a contract declares one default per prop and this prop
+      wants three. Only a standalone link is marked unasked — it is alone on its
+      line with nothing else saying it goes anywhere. An inline one would put an
+      arrow after every linked word in a paragraph, and a list one would put a
+      column of them down a footer, where a mark on every row marks nothing.
+    */
+    const marked = showIcon ?? variant !== 'inline';
+    /*
+      A list link's mark waits for the pointer. In a column, a mark on every row
+      marks nothing — but a column with no marks at all has no way of saying which
+      row is live, and its ink cannot change because the ink is the column's. So
+      the arrow is drawn and held at zero, and the pointer brings it in.
+  
+      Not the external one, which stays. That mark is a fact about the destination
+      rather than an affordance, and it is what makes one row in a list of fifty
+      say something before anybody has touched it.
+    */
+    const revealOnHover = variant === 'list' && !external;
+    /*
+      The mark takes the weight of the words beside it, which is a question only two
+      of the three variants can answer.
+  
+      A standalone label is semibold, so its arrow is the solid cut — a regular one
+      beside it reads as a lighter object that happens to be nearby. An inline link
+      is body copy at the regular weight, where solid outweighs every word around
+      it. Both are decided here because both know their own type: the variant sets
+      it.
+  
+      A list link does not. Its whole point is that it takes the ink and the
+      measure of the column it sits in — a footer sets one thing, a navigation
+      panel another — so this component cannot know whether the words beside the
+      mark are semibold or regular, and solid is the wrong guess in every column
+      that is not. Regular is the resting weight the package's own rule names from
+      sm through lg, and the one that costs nothing when it is wrong: it under-
+      rather than over-states, where the solid cut spends a weight that is supposed
+      to mean a selected item and nothing else.
+    */
+    const light = inline || variant === 'list';
+    const trailing = external ? (light ? (_jsx(ArrowUpRightRegularIcon, {})) : (_jsx(ArrowUpRightSolidIcon, {}))) : marked ? (light ? (_jsx(ArrowRightRegularIcon, {})) : (_jsx(ArrowRightSolidIcon, {}))) : null;
+    return (_jsxs("a", { ...rest, className: linkParts.root, href: href, "data-variant": variant, "data-tone": tone, 
+        // Together, always. The rel is what stops the opened page reaching back
+        // through window.opener to this one.
+        target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, children: [inline || iconLeading === undefined || iconLeading === null ? null : (_jsx("span", { className: linkParts['icon-leading'], children: _jsx(Icon, { size: "xs", children: iconLeading }) })), children, trailing === null ? null : (_jsx("span", { className: linkParts['icon-trailing'], 
+                /*
+                  Where the mark travels, handed to the stylesheet because the path is
+                  the only thing that differs and it turns on `external`, which is not
+                  a styling axis and cannot honestly become one.
+      
+                  25% of the sixteen-pixel glyph is the four pixels `motion.translate.hover`
+                  already moves anything else that shifts under a pointer. The external
+                  arrow points up and to the right, so it goes that way rather than
+                  sliding across its own direction — 18% on each axis, which is the
+                  same distance measured along the diagonal rather than four pixels twice.
+                */
+                style: {
+                    ...(external
+                        ? { '--dds-link-arrow-travel': '18% -18%' }
+                        : { '--dds-link-arrow-travel': '25% 0' }),
+                    /*
+                      A list link's mark rests displaced and at zero, and the pointer
+                      brings it to where it belongs — the arrival and the nudge are the
+                      same two declarations read in opposite directions. Leftward, along
+                      the reading direction and along the arrow, so it reads as the mark
+                      catching up with the words rather than as something dropped beside
+                      them.
+                    */
+                    ...(revealOnHover
+                        ? { '--dds-link-arrow-rest-travel': '-60% 0', '--dds-link-arrow-rest': '0' }
+                        : {}),
+                }, children: _jsx(Icon, { size: "xs", children: trailing }) }))] }));
+}

package/dist/components/core/link/Link.types.d.ts

@@ -0,0 +1,41 @@
+import type { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface LinkOwnProps {
+    /**
+     * `brand` — The default. The brand primary — the same coral the buttons are filled with — so a standalone link and a call to action are recognisably the same colour of intent, and a reader scanning for the way onward finds both.
+  
+  It is 3.39:1 against the page, below the 4.5:1 that normal text is held to. This package already carries an unsigned waiver for that pairing on a button's label, and this is the second thing leaning on it. What makes it survivable is that it is never the only signal — a standalone link sits on its own line beside a mark — but the ink alone does not carry it, and if the waiver is ever refused this is the binding that moves. color.bg.brand-active is the same hue at 5.56:1 and is what it would move to.
+     * `inherit` — A standalone link on a ground that has already set its ink — a brand card, a dark band, a scrim over an image. There the brand ink is either invisible or wrong, and the mark is left to carry the link alone. It is the same argument CardBody makes for setting no colour in its regions.
+     */
+    tone?: 'brand' | 'inherit';
+    /** The destination is off this site. Sets `target="_blank"` and `rel="noopener noreferrer"` together — the rel is not optional and not the consumer's job, which is how a page ends up handing `window.opener` to a site it does not control. It also fills the trailing slot with the box-and-arrow, so every external link on the site is marked the same way */
+    external?: boolean;
+    /** Always. An anchor without one is not a link: it takes no focus, is announced as plain text, and none of the browser's navigation affordances work — so there is no default that could stand in for one, and it is required for exactly that reason */
+    href: string;
+    /** Whether the link carries a mark after its words. It reaches both variants: a standalone link on its own line, and an inline one that wants the arrow inside a sentence.
+  
+  Left unset it follows the variant, which is the only sensible default and is not one a contract can write: a standalone link is marked, because it is alone on its line with nothing else saying it goes anywhere, and an inline link is not, because an arrow after every linked word would interrupt every sentence carrying one. Set it either way to override that — false for a footer column, where a column of arrows is a column of noise; true for a sentence whose link is the thing being pointed at.
+  
+  An external link draws its mark whether or not this is set, and draws a different one. */
+    showIcon?: boolean;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type LinkProps = LinkOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'variant' | 'tone' | 'external' | 'href' | 'iconLeading' | 'showIcon'> & ({
+    variant?: 'standalone' | 'list' | 'inline';
+    iconLeading?: undefined;
+} | {
+    variant?: Exclude<'standalone' | 'list' | 'inline', 'inline'>;
+    iconLeading?: ReactNode;
+});
+/** The class each part carries. Apply these — do not retype them. */
+export declare const linkParts: {
+    readonly root: "dds-link";
+    readonly 'icon-leading': "dds-link__icon-leading";
+    readonly 'icon-trailing': "dds-link__icon-trailing";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const linkDefaults: {
+    readonly variant: "standalone";
+    readonly tone: "brand";
+    readonly external: false;
+};

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

@@ -0,0 +1,9 @@
+// GENERATED from link.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const linkParts = {
+    root: 'dds-link',
+    'icon-leading': 'dds-link__icon-leading',
+    'icon-trailing': 'dds-link__icon-trailing',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const linkDefaults = { variant: 'standalone', tone: 'brand', external: false };

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

@@ -0,0 +1,168 @@
+/*
+ * 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.
+ */
+
+/* Implementation CSS that the contract's staticCss cannot express. */
+
+/*
+ * An inline link's mark scales with the sentence, and sits on its optical centre.
+ *
+ * Two problems with one cause. A standalone link sets its own type, so a sixteen-pixel glyph
+ * beside a sixteen-pixel label is right by construction — and it can be a flex line, which
+ * centres the mark exactly. An inline link can be neither: it takes whatever type the
+ * paragraph is, and it has to stay `display: inline` so it breaks across lines with the
+ * sentence it belongs to. A flex box does not wrap.
+ *
+ * So the glyph was a fixed sixteen inside copy of any size, which is undersized in a
+ * twenty-pixel line and oversized in a fourteen-pixel one — and `vertical-align` could not
+ * correct for it, because the error changed with the ratio between the two. Measured: the
+ * ink sat 1.36px low at fourteen, 1.41px at sixteen and 2.02px at twenty, and no single
+ * offset fixes three different ratios.
+ *
+ * An em-based box makes the mark track the copy the way everything else about this variant
+ * does. Once it does, one offset works everywhere, because everything is proportional.
+ *
+ * `1.1em` rather than `1em`, and the extra tenth is not padding. A Quill glyph fills about
+ * six tenths of its own box, so a one-em box put 9.60px of ink beside text whose capitals are
+ * 10.59px — a mark a tenth smaller than the letters it sits among, which is what reads as
+ * undersized. At 1.1em the ink is 10.56px against 10.59, and 13.20 against 13.23 at twenty:
+ * the arrow is the size of the capitals either side of it, which is the thing being matched.
+ *
+ * `-0.225em` is measured rather than reasoned. `middle` aligns a box to the baseline plus
+ * half the x-height, which is below the optical centre of cap-height text; this is the value
+ * that brings the ink's centre onto the text's, and it holds to within 0.2px at fourteen,
+ * sixteen and twenty. It moved with the box: at 1em the answer was -0.175em, and a taller
+ * box has to sit lower to keep the same ink in the same place — so the two numbers here are
+ * one decision and changing either alone breaks it.
+ */
+:where([data-dds-context="marketing"]) .dds-link[data-variant='inline'] .dds-link__icon-trailing {
+  block-size: 1.1em;
+  inline-size: 1.1em;
+  vertical-align: -0.225em;
+}
+
+/*
+ * And the glyph fills that box rather than keeping the step Icon set on it. Three classes
+ * deep because Icon's own `[data-size]` rule is two, and an override that ties loses.
+ */
+:where([data-dds-context="marketing"]) .dds-link[data-variant='inline'] .dds-link__icon-trailing .dds-icon {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+/*
+ * A link whose ink belongs to the ground gets its underline back under the pointer.
+ *
+ * A standalone link at `tone: inherit` — one on a brand card, a dark band, a scrim. It takes
+ * the colour around it, so the colour cannot change under the pointer, and
+ * `text-decoration-thickness` thickens a line that is not there. Without this it had no hover
+ * affordance at all.
+ *
+ * The list variant had the same hole and answers it differently, below: it has a mark to
+ * bring in, and a column of rows that underline one at a time reads as a table of contents
+ * being corrected.
+ *
+ * Product reaches the same conclusion from the other end: its standalone drops the underline
+ * except at `tone: inherit`, "because the link is the same colour as the text around it and
+ * the rule is the only thing left saying it is a link". It keeps the line at all times. These
+ * designs have no line at rest — a footer of fifty underlined rows is a wall — so it arrives
+ * with the pointer instead, which is the same argument applied to a denser page.
+ *
+ * Here rather than in the contract because `structure` carries no state: it says what a
+ * variant looks like, not what it looks like while a pointer is over it.
+ */
+:where([data-dds-context="marketing"]) .dds-link[data-variant='standalone'][data-tone='inherit']:hover {
+  text-decoration-line: underline;
+}
+
+/*
+ * The mark moves a little way in the direction it is already pointing, and stays there.
+ *
+ * A transition rather than a keyframe animation, which is what the rest of this package
+ * does for a hover: ButtonIcon transitions its background and its outline over
+ * `motion.duration.normal` on `motion.easing.standard`, and there is no reason a mark
+ * should reach for a different mechanism to travel four pixels. What was here before was
+ * a two-curve `@keyframes` that sent the arrow out of its own box, faded it to nothing,
+ * and brought it back from the other side — a gesture with a beginning, a middle and an
+ * end, for a link.
+ *
+ * Losing the keyframes loses three things worth naming, all of them deliberate: the split
+ * `exit`/`enter` curves, which only exist because a round trip has two halves; the fade at
+ * the edges, which only exists because something was leaving; and the bespoke
+ * `prefers-reduced-motion` block, because the generated sheet already sets
+ * `transition: none` on `.dds-link *` and a transition is what this now is. The reduce
+ * block below is smaller than the one it replaces and covers more: it takes the
+ * displacement away as well as the tween, so a reader who asked for less movement gets
+ * none rather than an instant four-pixel jump.
+ *
+ * It travels along the arrow it is carrying. A right arrow goes right; the external one
+ * points up and to the right and goes that way, because a mark that slid sideways while
+ * pointing diagonally would be moving across its own direction. Both ends of that path
+ * arrive as custom properties the component sets — `external` is not a styling axis, and
+ * making it one to reach a rule would have the contract declare a difference the component
+ * does not have. TabList sets its indicator's travel the same way and for the same reason.
+ *
+ * Percentages rather than pixels, because the glyph is not always the same size: an inline
+ * link's mark is `1.1em` and tracks the paragraph, so a fixed nudge would be proportionally
+ * large in fourteen-pixel copy and small in twenty. 25% of a sixteen-pixel mark is 4px,
+ * which is the distance `motion.translate.hover` already moves anything else that shifts
+ * under a pointer.
+ *
+ * A list link's mark travels the other way, and that is the whole of its arrival. It rests
+ * displaced to the left and at zero opacity, and the pointer carries it to the same place
+ * every other hovered mark ends up — thirteen and a half pixels rather than four, because it
+ * starts further back. One mechanism, read in two directions, with nothing to keep in step. Opacity rather than rendering it on hover: the box
+ * is there either way, so the row does not change width when the pointer arrives and the
+ * column does not shift under it.
+ */
+/*
+ * The box fades; the glyph travels. Two elements because they are two different boxes, and
+ * only one of them is square.
+ *
+ * A percentage in `translate` resolves against the element's own border box — width for the
+ * inline axis, height for the block one. The mark's box is not square: it carries the gap
+ * between the words and the arrow as padding, so it measures twenty by sixteen around a
+ * sixteen-pixel glyph. Measured on that box, `25% 0` moved five pixels rather than four, and
+ * the external arrow's `18% -18%` came out as 3.6 across and 2.88 up — a travel at 39 degrees
+ * for a mark pointing at 45, which is the one thing the whole direction argument exists to
+ * avoid. On the glyph the same two numbers are four pixels, and 2.88 on both axes.
+ */
+:where([data-dds-context="marketing"]) .dds-link__icon-trailing {
+  opacity: var(--dds-link-arrow-rest, 1);
+  transition-property: opacity;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-link:hover .dds-link__icon-trailing {
+  opacity: 1;
+}
+
+:where([data-dds-context="marketing"]) .dds-link__icon-trailing .dds-icon {
+  translate: var(--dds-link-arrow-rest-travel, 0 0);
+  transition-property: translate;
+  transition-duration: var(--motion-duration-normal);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-link:hover .dds-link__icon-trailing .dds-icon {
+  translate: var(--dds-link-arrow-travel, 0 0);
+}
+
+/*
+ * Less movement means none of this, not a faster version of it. The generated sheet stops
+ * the tween; this stops the displacement, so the mark sits where it belongs at rest and
+ * stays there under the pointer. A list link's still appears — that is opacity, and a mark
+ * that never shows up is a row with no affordance at all.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-link__icon-trailing .dds-icon,
+  :where([data-dds-context="marketing"]) .dds-link:hover .dds-link__icon-trailing .dds-icon {
+    translate: none;
+  }
+}

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

@@ -0,0 +1,70 @@
+/* GENERATED from menuitem.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-menuitem {
+  transition-property: background-color, color, opacity, outline-color, outline-width;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  inline-size: 100%;
+  list-style: none;
+  outline-style: solid;
+  position: relative;
+  user-select: none;
+  border-radius: var(--radius-menu-item);
+  color: var(--color-fg-default);
+  gap: var(--space-gap-sm);
+  min-block-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+  padding-block: var(--space-inset-xs);
+  padding-inline: var(--space-inset-xs);
+  transition-duration: var(--motion-duration-fast);
+  transition-timing-function: var(--motion-easing-standard);
+}
+
+:where([data-dds-context="marketing"]) .dds-menuitem .dds-menuitem__icon {
+  display: flex;
+  flex: none;
+}
+
+:where([data-dds-context="marketing"]) .dds-menuitem .dds-menuitem__label {
+  flex: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  line-height: var(--font-body-md-line-height);
+}
+
+:where([data-dds-context="marketing"]) .dds-menuitem:hover {
+  background-color: var(--color-bg-hover);
+}
+
+:where([data-dds-context="marketing"]) .dds-menuitem:active {
+  background-color: var(--color-bg-active);
+}
+
+:where([data-dds-context="marketing"]) .dds-menuitem:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-menuitem[data-disabled="true"] {
+  color: var(--color-fg-disabled);
+  opacity: var(--opacity-disabled);
+}
+
+:where([data-dds-context="marketing"]) .dds-menuitem[data-size="sm"] .dds-menuitem__label {
+  font-family: var(--font-body-sm-family);
+  font-size: var(--font-body-sm-size);
+  font-weight: var(--font-body-sm-weight);
+  line-height: var(--font-body-sm-line-height);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-menuitem,
+  :where([data-dds-context="marketing"]) .dds-menuitem * { transition: none; }
+}
+

package/dist/components/core/menu-item/MenuItem.d.ts

@@ -0,0 +1,11 @@
+import './MenuItem.css';
+import { type MenuItemProps } from './MenuItem.types.js';
+export type { MenuItemProps };
+/**
+ * One command in a menu.
+ *
+ * It renders the row and nothing around it. Focus, the arrow keys and shutting the menu are the
+ * menu's, and there is no menu here yet — so what this ships as is a row that looks right and,
+ * outside an element whose role is `menu`, announces wrong. DropdownMenu is what finishes it.
+ */
+export declare function MenuItem({ size, disabled, icon, onSelect, children, ...rest }: MenuItemProps): import("react").JSX.Element;

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './MenuItem.css';
+import { Icon } from '../icon/Icon.js';
+import { menuItemDefaults, menuItemParts } from './MenuItem.types.js';
+/**
+ * One command in a menu.
+ *
+ * It renders the row and nothing around it. Focus, the arrow keys and shutting the menu are the
+ * menu's, and there is no menu here yet — so what this ships as is a row that looks right and,
+ * outside an element whose role is `menu`, announces wrong. DropdownMenu is what finishes it.
+ */
+export function MenuItem({ size = menuItemDefaults.size, disabled = menuItemDefaults.disabled, icon, onSelect, children, ...rest }) {
+    return (_jsxs("li", { className: menuItemParts.root, "data-size": size, "data-disabled": String(disabled), role: "menuitem", "aria-disabled": disabled || undefined, 
+        // Focus is the menu's to move, and it moves it here: every row is reachable by arrow key and
+        // none of them is a tab stop, which is what the menu role promises.
+        tabIndex: -1, ...rest, onClick: (event) => {
+            rest.onClick?.(event);
+            if (disabled)
+                return;
+            onSelect?.();
+        }, children: [icon === undefined || icon === null ? null : (
+            // Decorative: the words beside it say the same thing, and a mark that had to be read would
+            // be a command whose name was a picture.
+            _jsx("span", { className: menuItemParts.icon, "aria-hidden": "true", children: _jsx(Icon, { size: size === 'sm' ? 'xs' : 'sm', children: icon }) })), _jsx("span", { className: menuItemParts.label, children: children })] }));
+}

package/dist/components/core/menu-item/MenuItem.types.d.ts

@@ -0,0 +1,28 @@
+import type { LiHTMLAttributes, ReactNode } from 'react';
+export interface MenuItemOwnProps {
+    /**
+     * `sm` — The row of a small menu — one opened from a navigation bar or a footer, where the trigger sits in a row of links
+     * `md` — The default, and the row of every other menu
+     */
+    size?: 'sm' | 'md';
+    /** The command cannot be used from here — a language not published yet, a page beyond the set. It stays and recedes, because a menu whose rows come and go is a menu a reader cannot learn */
+    disabled?: boolean;
+    /** A mark before the words, for a set read by shape as much as by reading — a flag beside a language, a glyph beside a region. All of them or none: one row with a mark in a set without them reads as the important one */
+    icon?: ReactNode;
+    /** Always, and it is required for that reason — running something is the whole of what a command is, and this is the only way it does */
+    onSelect: () => void;
+    /** Allowed: text */
+    children: ReactNode;
+}
+export type MenuItemProps = MenuItemOwnProps & Omit<LiHTMLAttributes<HTMLLIElement>, 'className' | 'size' | 'disabled' | 'icon' | 'onSelect'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const menuItemParts: {
+    readonly root: "dds-menuitem";
+    readonly icon: "dds-menuitem__icon";
+    readonly label: "dds-menuitem__label";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const menuItemDefaults: {
+    readonly size: "md";
+    readonly disabled: false;
+};

package/dist/components/core/menu-item/MenuItem.types.js

@@ -0,0 +1,9 @@
+// GENERATED from menu-item.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const menuItemParts = {
+    root: 'dds-menuitem',
+    icon: 'dds-menuitem__icon',
+    label: 'dds-menuitem__label',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const menuItemDefaults = { size: 'md', disabled: false };

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

@@ -0,0 +1,135 @@
+/* GENERATED from navbar.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-navbar {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  inset-block-start: 0;
+  justify-content: center;
+  position: sticky;
+  background-color: var(--color-bg-transparent);
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__inner {
+  align-items: center;
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: space-between;
+  min-inline-size: 0;
+  position: relative;
+  gap: var(--space-gap-md);
+  min-block-size: var(--size-bar-height);
+  padding-block: var(--space-inset-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__ground {
+  inset: 0;
+  position: absolute;
+  background-color: var(--color-bg-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__brand {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  block-size: var(--icon-size-md);
+  border-radius: var(--radius-pill);
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__nav {
+  align-items: center;
+  display: flex;
+  position: relative;
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__preferences {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__utilities {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  border-radius: var(--radius-pill);
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__compact-action {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__trigger {
+  align-items: center;
+  appearance: none;
+  border-style: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  outline-style: solid;
+  padding: 0;
+  background-color: var(--color-bg-transparent);
+  border-radius: var(--radius-control-sm);
+  min-block-size: var(--size-target-min);
+  min-inline-size: var(--size-target-min);
+  outline-width: var(--border-width-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__panel-host {
+  display: contents;
+  color: var(--color-fg-default);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__cluster {
+  align-items: center;
+  display: flex;
+  position: relative;
+  background-color: var(--color-bg-surface-raised);
+  border-radius: var(--radius-pill);
+  box-shadow: var(--elevation-surface-floating);
+  gap: var(--space-gap-md);
+  min-block-size: var(--size-control-lg);
+  padding-block: var(--space-inset-2xs);
+  padding-inline: var(--space-inset-2xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__trigger:focus-visible {
+  outline-color: var(--color-border-focus);
+  outline-width: var(--border-width-focus);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar .dds-navbar__ground[data-condensed="true"] {
+  box-shadow: var(--elevation-surface-sticky);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] {
+  color: var(--color-fg-on-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__cluster {
+  background-color: var(--color-bg-surface-raised-inverse);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__ground {
+  background-color: var(--color-bg-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-navbar[data-tone="inverse"] .dds-navbar__trigger:focus-visible {
+  outline-color: var(--color-border-focus-inverse);
+}
+