@hraness/design-kit 0.36.5 → 0.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.36.5",
+  "version": "0.39.0",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",
@@ -128,7 +128,8 @@
       "import": "./dist/testing.js"
     },
     "./marketing-comparison.css": "./src/marketing-comparison.css",
-    "./marketing-diagram.css": "./src/marketing-diagram.css"
+    "./marketing-diagram.css": "./src/marketing-diagram.css",
+    "./marketing-marquee.css": "./src/marketing-marquee.css"
   },
   "main": "./dist/index.js",
   "types": "./src/index.ts",
@@ -310,7 +311,10 @@
     "src/diagrams.ts",
     "src/react/marketing-diagram.tsx",
     "src/react/marketing-diagram.stylex.ts",
-    "src/marketing-diagram.css"
+    "src/marketing-diagram.css",
+    "src/marketing-marquee.ts",
+    "src/marketing-marquee.css",
+    "src/react/marketing-marquee.tsx"
   ],
   "scripts": {
     "build": "bun run ./scripts/build.ts",
@@ -323,8 +327,8 @@
     "test": "bun test --preload ./scripts/register-stylex-test-transform.ts ./src",
     "browser:install": "bun ./node_modules/playwright-core/cli.js install chromium",
     "test:browser": "bun run test:browser:marketing && bun run test:browser:rest",
-    "test:browser:marketing": "bun run ./scripts/product-marketing-browser.ts && bun run ./scripts/marketing-header-browser.ts",
-    "test:browser:rest": "bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
+    "test:browser:marketing": "bun run ./scripts/product-marketing-browser.ts",
+    "test:browser:rest": "bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/marketing-marquee-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
     "test:package": "bun run ./scripts/package-smoke.ts && bun run ./scripts/mockups-import.ts",
     "kb:refresh": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell refresh --root kb",
     "kb:check:lane": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell check --root kb --no-catalog",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.36.5"
+      "version": "0.39.0"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/compiler-foundation.css

@@ -13,6 +13,8 @@
 @import "./plain-publication.css";
 @import "./reading.css";
 @import "./status-page.css";
+@import "./marketing-marquee.css";
 @import "./product-marketing-foundation.css";
 @import "./design-gallery.css";
+@import "./mockups.css";
 @import "./lantern-material.css";

package/src/design-gallery.css

@@ -7,6 +7,18 @@
 }
 
 @layer components.hraness-design-kit.legacy {
+  .design-gallery__walkthrough-preview { display: grid; gap: 1rem; padding: 1.5rem; font-size: 0.875rem; }
+  .design-gallery__walkthrough-context { margin: 0; color: var(--hkm-muted); font-size: 0.75rem; letter-spacing: 0.06em; }
+  .design-gallery__walkthrough-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; font-size: 1.125rem; font-weight: 600; }
+  .design-gallery__walkthrough-state { padding: 0.25rem 0.5rem; border: 1px solid var(--hkm-line); border-radius: 0.375rem; color: var(--hkm-muted); font-size: 0.75rem; font-weight: 500; }
+  .design-gallery__walkthrough-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
+  .design-gallery__walkthrough-facts dt { margin-block-end: 0.25rem; color: var(--hkm-muted); font-size: 0.75rem; }
+  .design-gallery__walkthrough-facts dd { margin: 0; }
+  .design-gallery__walkthrough-checks { margin: 0; padding: 0; list-style: none; }
+  .design-gallery__walkthrough-checks li { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; border-block-start: 1px solid var(--hkm-line); }
+  .design-gallery__walkthrough-checks li > :last-child { color: var(--hkm-muted); }
+  .design-gallery__walkthrough-result { display: grid; gap: 0.375rem; padding: 1rem; border: 1px solid var(--hkm-line); border-radius: 0.625rem; background: var(--hkm-surface); }
+  .design-gallery__walkthrough-result > span { color: var(--hkm-muted); font-size: 0.75rem; }
   .design-gallery__lantern-intro {
     margin: 0;
     max-inline-size: 60ch;

package/src/index.ts

@@ -8,6 +8,7 @@ export * from "./article-html.js";
 export * from "./status-page.js";
 export * from "./status-page-html.js";
 export * from "./provider-marks.js";
+export * from "./marketing-marquee.js";
 export * from "./platforms.js";
 export * from "./relative-time.js";
 export * from "./agent-setup.js";

package/src/marketing-marquee.css

@@ -0,0 +1,281 @@
+/* Raw HTML counterpart to MarketingMarquee and renderMarketingMarqueeHtml.
+ * The static layout is the default: a wrapped list with hidden duplicates.
+ * Motion is added only on screens whose readers allow it, so reduced motion,
+ * print, and unsupported media all keep every name readable in place. */
+@layer components.hraness-design-kit.legacy {
+.hraness-marketing-marquee {
+  --_hraness-marquee-ink: var(--hraness-marketing-ink, var(--foreground, CanvasText));
+  --_hraness-marquee-muted: var(--hraness-marketing-muted, var(--muted, GrayText));
+  --_hraness-marquee-line: var(--hraness-marketing-line, color-mix(in srgb, var(--_hraness-marquee-ink) 12%, transparent));
+  --_hraness-marquee-line-strong: var(--hraness-marketing-line-strong, color-mix(in srgb, var(--_hraness-marquee-ink) 22%, transparent));
+  --_hraness-marquee-gap: clamp(1.75rem, 3vw, 2.5rem);
+  --_hraness-marquee-fade: clamp(1.5rem, 6vw, 4.5rem);
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: "header header" "viewport control";
+  align-items: center;
+  gap: 1rem 0.75rem;
+  box-sizing: border-box;
+  inline-size: min(100%, var(--hraness-marketing-measure, 72rem));
+  min-inline-size: 0;
+  margin-inline: auto;
+  padding-block: clamp(1.5rem, 3vw, 2.25rem);
+  padding-inline: var(--hraness-marketing-gutter, clamp(1.25rem, 4vw, 3rem));
+  color: var(--_hraness-marquee-muted);
+  font-family: var(--hraness-marketing-text-font, var(--font-text, inherit));
+}
+
+.hraness-marketing-marquee__header {
+  grid-area: header;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.25rem 1rem;
+  min-inline-size: 0;
+}
+
+.hraness-marketing-marquee[data-align="center"] .hraness-marketing-marquee__header {
+  justify-content: center;
+  text-align: center;
+}
+
+.hraness-marketing-marquee__label {
+  margin: 0;
+  color: var(--_hraness-marquee-ink);
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5;
+  text-wrap: balance;
+}
+
+.hraness-marketing-marquee__count {
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+
+.hraness-marketing-marquee__action {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 1.5rem;
+  color: var(--_hraness-marquee-muted);
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.hraness-marketing-marquee__action:hover {
+  color: var(--_hraness-marquee-ink);
+}
+
+.hraness-marketing-marquee__viewport {
+  grid-area: viewport;
+  min-inline-size: 0;
+}
+
+.hraness-marketing-marquee__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem var(--_hraness-marquee-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.hraness-marketing-marquee[data-align="center"] .hraness-marketing-marquee__list {
+  justify-content: center;
+}
+
+.hraness-marketing-marquee__list[aria-hidden="true"] {
+  display: none;
+}
+
+.hraness-marketing-marquee__item {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--_hraness-marquee-muted);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.hraness-marketing-marquee__mark {
+  flex: none;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  fill: currentColor;
+}
+
+.hraness-marketing-marquee__monogram {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  border: 1.5px solid currentColor;
+  border-radius: 0.3125rem;
+  font-size: 0.5625rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+.hraness-marketing-marquee__sprite {
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  overflow: hidden;
+}
+
+.hraness-marketing-marquee__toggle,
+.hraness-marketing-marquee__control {
+  display: none;
+}
+
+.hraness-marketing-marquee__control-text {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.hraness-marketing-marquee__control-icon {
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.hraness-marketing-marquee__control-icon[data-icon="play"],
+.hraness-marketing-marquee__toggle:checked ~ .hraness-marketing-marquee__control .hraness-marketing-marquee__control-icon[data-icon="pause"] {
+  display: none;
+}
+
+.hraness-marketing-marquee__toggle:checked ~ .hraness-marketing-marquee__control .hraness-marketing-marquee__control-icon[data-icon="play"] {
+  display: block;
+}
+
+/* About 3.75 seconds per item, so long and short lists move at a similar pace. */
+.hraness-marketing-marquee__list:has(> :nth-child(8)) { --_hraness-marquee-duration: 30s; }
+.hraness-marketing-marquee__list:has(> :nth-child(10)) { --_hraness-marquee-duration: 38s; }
+.hraness-marketing-marquee__list:has(> :nth-child(12)) { --_hraness-marquee-duration: 45s; }
+.hraness-marketing-marquee__list:has(> :nth-child(14)) { --_hraness-marquee-duration: 53s; }
+.hraness-marketing-marquee__list:has(> :nth-child(16)) { --_hraness-marquee-duration: 60s; }
+.hraness-marketing-marquee__list:has(> :nth-child(18)) { --_hraness-marquee-duration: 68s; }
+.hraness-marketing-marquee__list:has(> :nth-child(20)) { --_hraness-marquee-duration: 75s; }
+.hraness-marketing-marquee__list:has(> :nth-child(24)) { --_hraness-marquee-duration: 90s; }
+.hraness-marketing-marquee__list:has(> :nth-child(28)) { --_hraness-marquee-duration: 105s; }
+.hraness-marketing-marquee__list:has(> :nth-child(32)) { --_hraness-marquee-duration: 120s; }
+.hraness-marketing-marquee__list:has(> :nth-child(40)) { --_hraness-marquee-duration: 150s; }
+.hraness-marketing-marquee__list:has(> :nth-child(48)) { --_hraness-marquee-duration: 180s; }
+.hraness-marketing-marquee__list:has(> :nth-child(56)) { --_hraness-marquee-duration: 210s; }
+
+@media screen and (prefers-reduced-motion: no-preference) {
+.hraness-marketing-marquee__viewport {
+  overflow: hidden;
+  mask-image: linear-gradient(to right, transparent, #000 var(--_hraness-marquee-fade), #000 calc(100% - var(--_hraness-marquee-fade)), transparent);
+}
+
+.hraness-marketing-marquee__track {
+  display: flex;
+  inline-size: max-content;
+}
+
+.hraness-marketing-marquee__list,
+.hraness-marketing-marquee__list[aria-hidden="true"] {
+  display: flex;
+  flex: none;
+  flex-wrap: nowrap;
+  padding-inline-end: var(--_hraness-marquee-gap);
+  animation: hraness-marketing-marquee var(--hraness-marketing-marquee-duration, var(--_hraness-marquee-duration, 26s)) linear infinite;
+  will-change: transform;
+}
+
+.hraness-marketing-marquee[data-align="center"] .hraness-marketing-marquee__list {
+  justify-content: flex-start;
+}
+
+:is([dir="rtl"] .hraness-marketing-marquee__list, .hraness-marketing-marquee__list:dir(rtl)) {
+  animation-name: hraness-marketing-marquee-rtl;
+}
+
+.hraness-marketing-marquee__toggle {
+  display: block;
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  appearance: none;
+}
+
+.hraness-marketing-marquee__control {
+  grid-area: control;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  border: 1px solid var(--_hraness-marquee-line);
+  border-radius: 999px;
+  color: var(--_hraness-marquee-muted);
+  cursor: pointer;
+}
+
+.hraness-marketing-marquee__control:hover {
+  border-color: var(--_hraness-marquee-line-strong);
+  color: var(--_hraness-marquee-ink);
+}
+
+.hraness-marketing-marquee__toggle:focus-visible ~ .hraness-marketing-marquee__control {
+  outline: 2px solid var(--hraness-marketing-accent, var(--focus, Highlight));
+  outline-offset: 2px;
+}
+
+.hraness-marketing-marquee__toggle:checked ~ .hraness-marketing-marquee__viewport .hraness-marketing-marquee__list {
+  animation-play-state: paused;
+}
+}
+
+@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) {
+.hraness-marketing-marquee__viewport:hover .hraness-marketing-marquee__list {
+  animation-play-state: paused;
+}
+}
+
+@media (pointer: coarse) {
+.hraness-marketing-marquee__action {
+  min-block-size: 2.75rem;
+}
+}
+
+@media (forced-colors: active) {
+.hraness-marketing-marquee__viewport {
+  mask-image: none;
+}
+
+.hraness-marketing-marquee__control {
+  border-color: ButtonBorder;
+  color: ButtonText;
+}
+}
+
+@keyframes hraness-marketing-marquee {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+@keyframes hraness-marketing-marquee-rtl {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+}

package/src/marketing-marquee.ts

@@ -0,0 +1,206 @@
+/**
+ * Framework-neutral provider marquee: a quiet, slowly scrolling band of
+ * provider marks and names under a label that states how many there are.
+ * `resolveMarketingMarquee` validates the input once; the static renderer here
+ * and `MarketingMarquee` in `@hraness/design-kit/react/server` emit identical
+ * markup from that model, styled by `marketing-marquee.css` (included in
+ * `styles.css`).
+ *
+ * The band moves only with `prefers-reduced-motion: no-preference` on screen.
+ * Otherwise, and in print, it is a wrapped static list. A native checkbox
+ * pauses the motion without JavaScript, hovering pauses it, and duplicate
+ * copies that fill the loop are hidden from assistive technology.
+ */
+import { assertArticleHref } from "./article.js";
+import { escapeArticleHtml as escape } from "./article-html.js";
+import { providerMark, providerMarkMonogram, type ProviderMarkDescriptor } from "./provider-marks.js";
+
+/** The placeholder a label must contain once; it renders as the item count. */
+export const MARKETING_MARQUEE_COUNT_TOKEN = "{count}";
+export const MARKETING_MARQUEE_MAX_ITEMS = 64;
+export const MARKETING_MARQUEE_DEFAULT_PAUSE_LABEL = "Pause scrolling";
+
+/** Each loop renders at least this many items after its first copy, so wide viewports never show a gap. */
+const MIN_LOOP_ITEMS = 20;
+const MAX_NAME_LENGTH = 64;
+const MAX_LABEL_LENGTH = 120;
+const ID_PATTERN = /^[A-Za-z][A-Za-z0-9_-]{0,63}$/u;
+const FORBIDDEN_ARTWORK = /<script|<foreignObject|on[a-z]+\s*=|javascript:/iu;
+const ROOT_CLASS = "hraness-marketing-marquee";
+
+export type MarketingMarqueeAlign = "start" | "center";
+
+export interface MarketingMarqueeItem {
+  /** The visible name, which is also the item's accessible text. */
+  readonly name: string;
+  /**
+   * A registered provider mark id, display name, or alias, or a descriptor
+   * from the provider registry. Defaults to `name`. Identities outside the
+   * registry show a two-letter monogram instead of invented artwork.
+   */
+  readonly mark?: ProviderMarkDescriptor | string;
+}
+
+export interface MarketingMarqueeAction {
+  readonly href: string;
+  readonly label: string;
+}
+
+export interface MarketingMarqueeInput {
+  /** A unique element id; the label, pause control, and mark symbols derive their ids from it. */
+  readonly id: string;
+  /** One sentence containing `{count}` exactly once, such as "Works with {count} services". */
+  readonly label: string;
+  readonly items: readonly MarketingMarqueeItem[];
+  /** An optional link beside the label, such as the full provider list. */
+  readonly action?: MarketingMarqueeAction;
+  readonly align?: MarketingMarqueeAlign;
+  readonly className?: string;
+  /** The pause checkbox's accessible name. */
+  readonly pauseLabel?: string;
+}
+
+export interface MarketingMarqueeSymbol {
+  readonly id: string;
+  readonly viewBox: string;
+  readonly body: string;
+}
+
+export type MarketingMarqueeMark =
+  | Readonly<{ kind: "glyph"; symbolId: string }>
+  | Readonly<{ kind: "monogram"; monogram: string }>;
+
+export interface ResolvedMarketingMarqueeItem {
+  readonly name: string;
+  readonly mark: MarketingMarqueeMark;
+}
+
+export interface ResolvedMarketingMarquee {
+  readonly id: string;
+  readonly labelId: string;
+  readonly toggleId: string;
+  readonly className: string;
+  readonly align: MarketingMarqueeAlign;
+  /** The label split around the rendered count. */
+  readonly label: Readonly<{ before: string; count: string; after: string }>;
+  readonly items: readonly ResolvedMarketingMarqueeItem[];
+  /** One symbol per distinct glyph, referenced by every copy. */
+  readonly symbols: readonly MarketingMarqueeSymbol[];
+  /** Total list copies: the accessible list plus hidden duplicates that fill the loop. */
+  readonly copies: number;
+  readonly action: MarketingMarqueeAction | null;
+  readonly pauseLabel: string;
+}
+
+/** SVG paths for the pause control, drawn in a 16-unit square. */
+export const MARKETING_MARQUEE_CONTROL_ICONS = {
+  pause: "M5 3.25a1 1 0 0 1 1 1v7.5a1 1 0 0 1-2 0v-7.5a1 1 0 0 1 1-1Zm6 0a1 1 0 0 1 1 1v7.5a1 1 0 0 1-2 0v-7.5a1 1 0 0 1 1-1Z",
+  play: "M5.25 3.6v8.8a.75.75 0 0 0 1.14.64l7.04-4.4a.75.75 0 0 0 0-1.28L6.39 2.96a.75.75 0 0 0-1.14.64Z",
+} as const;
+
+function requireText(value: string, field: string, limit: number): string {
+  const text = value.trim();
+  if (text === "") throw new RangeError(`Marketing marquee ${field} must not be empty.`);
+  if (text.length > limit) throw new RangeError(`Marketing marquee ${field} must be at most ${limit} characters.`);
+  return text;
+}
+
+function resolveMark(mark: ProviderMarkDescriptor | string | undefined, name: string): ProviderMarkDescriptor | undefined {
+  if (mark === undefined) return providerMark(name);
+  if (typeof mark === "string") return providerMark(mark);
+  return mark;
+}
+
+/** Validate marquee input and compute everything both renderers need. */
+export function resolveMarketingMarquee(input: MarketingMarqueeInput): ResolvedMarketingMarquee {
+  if (!ID_PATTERN.test(input.id)) throw new RangeError("Marketing marquee id must start with a letter and use at most 64 letters, digits, hyphens, or underscores.");
+  const label = requireText(input.label, "label", MAX_LABEL_LENGTH);
+  const parts = label.split(MARKETING_MARQUEE_COUNT_TOKEN);
+  if (parts.length !== 2) throw new RangeError(`Marketing marquee label must contain ${MARKETING_MARQUEE_COUNT_TOKEN} exactly once.`);
+  if (input.items.length === 0) throw new RangeError("Marketing marquee needs at least one item.");
+  if (input.items.length > MARKETING_MARQUEE_MAX_ITEMS) throw new RangeError(`Marketing marquee shows at most ${MARKETING_MARQUEE_MAX_ITEMS} items.`);
+  if (input.align !== undefined && input.align !== "start" && input.align !== "center") throw new RangeError("Marketing marquee align must be start or center.");
+
+  const names = new Set<string>();
+  const symbols: MarketingMarqueeSymbol[] = [];
+  const symbolIds = new Map<string, string>();
+  const items = input.items.map((item): ResolvedMarketingMarqueeItem => {
+    const name = requireText(item.name, "item name", MAX_NAME_LENGTH);
+    if (names.has(name)) throw new RangeError(`Marketing marquee lists ${JSON.stringify(name)} more than once.`);
+    names.add(name);
+    const descriptor = resolveMark(item.mark, name);
+    if (descriptor === undefined || descriptor.glyph.body === "") {
+      return { name, mark: { kind: "monogram", monogram: descriptor?.monogram ?? providerMarkMonogram(name) } };
+    }
+    const { viewBox, body } = descriptor.glyph;
+    if (FORBIDDEN_ARTWORK.test(body) || /["<>]/u.test(viewBox)) throw new RangeError(`Marketing marquee artwork for ${JSON.stringify(name)} contains unsupported markup.`);
+    const key = `${viewBox}\n${body}`;
+    let symbolId = symbolIds.get(key);
+    if (symbolId === undefined) {
+      symbolId = `${input.id}-mark-${symbols.length}`;
+      symbolIds.set(key, symbolId);
+      symbols.push({ body, id: symbolId, viewBox });
+    }
+    return { name, mark: { kind: "glyph", symbolId } };
+  });
+
+  let action: MarketingMarqueeAction | null = null;
+  if (input.action !== undefined) {
+    assertArticleHref(input.action.href);
+    action = { href: input.action.href, label: requireText(input.action.label, "action label", MAX_LABEL_LENGTH) };
+  }
+
+  return {
+    action,
+    align: input.align ?? "start",
+    className: [ROOT_CLASS, input.className?.trim()].filter(Boolean).join(" "),
+    copies: Math.max(2, 1 + Math.ceil(MIN_LOOP_ITEMS / items.length)),
+    id: input.id,
+    items,
+    label: { after: parts[1] ?? "", before: parts[0] ?? "", count: String(items.length) },
+    labelId: `${input.id}-label`,
+    pauseLabel: requireText(input.pauseLabel ?? MARKETING_MARQUEE_DEFAULT_PAUSE_LABEL, "pause label", MAX_LABEL_LENGTH),
+    symbols,
+    toggleId: `${input.id}-pause`,
+  };
+}
+
+function itemHtml(item: ResolvedMarketingMarqueeItem): string {
+  const mark = item.mark.kind === "glyph"
+    ? `<svg aria-hidden="true" class="${ROOT_CLASS}__mark" fill="currentColor" focusable="false" height="20" width="20"><use href="#${item.mark.symbolId}"></use></svg>`
+    : `<span aria-hidden="true" class="${ROOT_CLASS}__monogram">${escape(item.mark.monogram)}</span>`;
+  return `<li class="${ROOT_CLASS}__item">${mark}<span class="${ROOT_CLASS}__name">${escape(item.name)}</span></li>`;
+}
+
+function controlIconHtml(icon: keyof typeof MARKETING_MARQUEE_CONTROL_ICONS): string {
+  return `<svg aria-hidden="true" class="${ROOT_CLASS}__control-icon" data-icon="${icon}" fill="currentColor" focusable="false" height="16" viewBox="0 0 16 16" width="16"><path d="${MARKETING_MARQUEE_CONTROL_ICONS[icon]}"></path></svg>`;
+}
+
+/** Static HTML for a provider marquee. Pair it with `marketing-marquee.css` or `styles.css`. */
+export function renderMarketingMarqueeHtml(input: MarketingMarqueeInput): string {
+  const marquee = resolveMarketingMarquee(input);
+  const items = marquee.items.map(itemHtml).join("");
+  const lists = Array.from({ length: marquee.copies }, (_, index) => (
+    `<ul${index === 0 ? "" : ' aria-hidden="true"'} class="${ROOT_CLASS}__list">${items}</ul>`
+  )).join("");
+  const sprite = marquee.symbols.length === 0
+    ? ""
+    : `<svg aria-hidden="true" class="${ROOT_CLASS}__sprite" focusable="false" height="0" width="0">${marquee.symbols.map((symbol) => (
+      `<symbol id="${symbol.id}" viewBox="${symbol.viewBox}">${symbol.body}</symbol>`
+    )).join("")}</svg>`;
+  const action = marquee.action === null
+    ? ""
+    : `<a class="${ROOT_CLASS}__action hraness-text-link" href="${escape(marquee.action.href)}">${escape(marquee.action.label)}</a>`;
+  return [
+    `<section aria-labelledby="${marquee.labelId}" class="${escape(marquee.className)}" data-align="${marquee.align}" data-hraness-marketing="marquee" id="${marquee.id}">`,
+    sprite,
+    `<div class="${ROOT_CLASS}__header">`,
+    `<p class="${ROOT_CLASS}__label" id="${marquee.labelId}">${escape(marquee.label.before)}<strong class="${ROOT_CLASS}__count">${marquee.label.count}</strong>${escape(marquee.label.after)}</p>`,
+    action,
+    "</div>",
+    `<input class="${ROOT_CLASS}__toggle" id="${marquee.toggleId}" type="checkbox"/>`,
+    `<div class="${ROOT_CLASS}__viewport"><div class="${ROOT_CLASS}__track">${lists}</div></div>`,
+    `<label class="${ROOT_CLASS}__control" for="${marquee.toggleId}"><span class="${ROOT_CLASS}__control-text">${escape(marquee.pauseLabel)}</span>${controlIconHtml("pause")}${controlIconHtml("play")}</label>`,
+    "</section>",
+  ].join("");
+}