@hraness/design-kit 0.31.1

package/src/appearance-menu.css

@@ -0,0 +1,266 @@
+@layer components.hraness-design-kit.legacy {
+/*
+ * Framework-neutral fallback for the standards-only browser controller.
+ * React ThemeToggle marks its root and owns the same presentation with StyleX,
+ * including its portalled popover. Lantern tokens exist only inside a
+ * data-hraness-material="lantern" island, so each chain falls through to the
+ * palette outside one.
+ */
+.hraness-design-theme-toggle[data-hraness-appearance-menu][data-presentation="menu"]:not([data-hraness-theme-toggle-stylex]) {
+  --hraness-appearance-control-background:
+    var(--hraness-material-plane, var(--ui-background, Canvas));
+  --hraness-appearance-control-foreground:
+    var(--hraness-material-ink, var(--ui-foreground, CanvasText));
+  --hraness-appearance-control-border:
+    var(--hraness-material-seam, var(--ui-input, GrayText));
+  --hraness-appearance-popover-background:
+    var(--hraness-material-plane, var(--ui-popover, Canvas));
+  --hraness-appearance-popover-foreground:
+    var(--hraness-material-ink, var(--ui-popover-foreground, CanvasText));
+  --hraness-appearance-accent:
+    var(--hraness-material-warm-plane, var(--ui-accent, ButtonFace));
+  --hraness-appearance-accent-foreground:
+    var(--hraness-material-ink, var(--ui-accent-foreground, ButtonText));
+  --hraness-appearance-focus:
+    var(--hraness-material-focus, var(--ui-ring, Highlight));
+  position: relative;
+  display: inline-flex;
+  min-inline-size: 0;
+  color: var(--hraness-appearance-control-foreground);
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])[data-ready="false"] {
+  opacity: 0.64;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__trigger {
+  display: inline-grid;
+  inline-size: 2rem;
+  min-inline-size: 2rem;
+  min-block-size: 2rem;
+  padding: 0;
+  border: 1px solid var(
+    --hraness-appearance-control-border,
+    var(--ui-input, GrayText)
+  );
+  border-radius: var(--radius-md, 0.5rem);
+  outline: none;
+  background: var(
+    --hraness-appearance-control-background,
+    var(--ui-background, Canvas)
+  );
+  color: var(
+    --hraness-appearance-control-foreground,
+    var(--ui-foreground, CanvasText)
+  );
+  box-shadow: var(--hraness-material-raised, none);
+  font: inherit;
+  place-items: center;
+  touch-action: manipulation;
+  transition:
+    background-color 120ms cubic-bezier(0.2, 0, 0, 1),
+    border-color 120ms cubic-bezier(0.2, 0, 0, 1),
+    box-shadow 120ms cubic-bezier(0.2, 0, 0, 1),
+    color 120ms cubic-bezier(0.2, 0, 0, 1),
+    transform 120ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__trigger:not(:disabled) {
+  cursor: pointer;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__trigger:where([data-hovered], :hover) {
+  background: var(--hraness-appearance-accent, var(--ui-accent, ButtonFace));
+  color: var(
+    --hraness-appearance-accent-foreground,
+    var(--ui-accent-foreground, ButtonText)
+  );
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__trigger:where([data-pressed], :active) {
+  box-shadow: var(--hraness-material-inset, none);
+  transform: translateY(1px);
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__trigger:where([data-focus-visible], :focus-visible) {
+  outline: 2px solid var(--hraness-appearance-focus, var(--ui-ring, Highlight));
+  outline-offset: 2px;
+  box-shadow: 0 0 0 4px color-mix(
+    in srgb,
+    var(--hraness-appearance-focus, var(--ui-ring, Highlight)) 24%,
+    transparent
+  );
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-appearance-icon,
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-icon,
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__item .hraness-appearance-icon,
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__item .hraness-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__popover {
+  z-index: var(--z-tooltip, 3000);
+  inline-size: min(12rem, calc(100vw - 2rem));
+  max-inline-size: calc(100vw - 2rem);
+  overflow: hidden;
+  border: 1px solid var(
+    --hraness-appearance-control-border,
+    var(--ui-input, GrayText)
+  );
+  border-radius: var(--radius-lg, 0.75rem);
+  outline: none;
+  background: var(
+    --hraness-appearance-popover-background,
+    var(--ui-popover, Canvas)
+  );
+  color: var(
+    --hraness-appearance-popover-foreground,
+    var(--ui-popover-foreground, CanvasText)
+  );
+  box-shadow: var(
+    --hraness-material-lift,
+    var(--elevation-overlay, 0 18px 48px -18px rgb(0 0 0 / 32%))
+  );
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  > .hraness-design-theme-toggle__popover {
+  position: absolute;
+  inset-block-start: calc(100% + 0.375rem);
+  inset-inline-end: 0;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__popover[hidden] {
+  display: none;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__menu {
+  display: grid;
+  max-block-size: min(24rem, 70vh);
+  padding: 0.25rem;
+  overflow: auto;
+  outline: none;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__item {
+  display: grid;
+  min-block-size: 2.5rem;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-md, 0.5rem);
+  outline: none;
+  color: var(
+    --hraness-appearance-popover-foreground,
+    var(--ui-popover-foreground, CanvasText)
+  );
+  cursor: default;
+  font-size: var(--text-label, 0.875rem);
+  line-height: 1.25;
+  user-select: none;
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__item:where(
+  [data-focused],
+  [data-hovered],
+  :focus-visible,
+  :hover
+) {
+  background: var(--hraness-appearance-accent, var(--ui-accent, ButtonFace));
+  color: var(
+    --hraness-appearance-accent-foreground,
+    var(--ui-accent-foreground, ButtonText)
+  );
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__item[data-selected] {
+  font-weight: var(--font-weight-medium, 550);
+}
+
+.hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+  .hraness-design-theme-toggle__item[data-selected]:not(:where(
+  [data-focused],
+  [data-hovered],
+  :focus-visible,
+  :hover
+)) {
+  background: var(--hraness-material-warm-plane, transparent);
+  color: var(
+    --hraness-material-ink,
+    var(--hraness-appearance-popover-foreground, var(--ui-popover-foreground, CanvasText))
+  );
+}
+
+@media (pointer: coarse) {
+  .hraness-design-theme-toggle[data-hraness-appearance-menu][data-presentation="menu"]:not([data-hraness-theme-toggle-stylex])
+    .hraness-design-theme-toggle__trigger {
+    inline-size: 3rem;
+    min-inline-size: 3rem;
+    min-block-size: 3rem;
+  }
+
+  .hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+    .hraness-design-theme-toggle__item {
+    min-block-size: 3rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+    .hraness-design-theme-toggle__trigger {
+    transition-duration: 0.01ms;
+  }
+}
+
+@media (forced-colors: active) {
+  .hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+    .hraness-design-theme-toggle__trigger,
+  .hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+    .hraness-design-theme-toggle__popover {
+    border-color: CanvasText;
+    box-shadow: none;
+    forced-color-adjust: auto;
+  }
+
+  .hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+    .hraness-design-theme-toggle__trigger:where(
+    [data-focus-visible],
+    :focus-visible
+  ) {
+    outline-color: Highlight;
+    box-shadow: none;
+  }
+
+  .hraness-design-theme-toggle[data-hraness-appearance-menu]:not([data-hraness-theme-toggle-stylex])
+    .hraness-design-theme-toggle__item[data-selected] {
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+}

package/src/appearance.ts

@@ -0,0 +1,32 @@
+export const designThemes = ["light", "dark", "system"] as const;
+
+export type DesignTheme = (typeof designThemes)[number];
+export type ConcreteDesignTheme = Exclude<DesignTheme, "system">;
+
+export const defaultDesignTheme: DesignTheme = "system";
+export const designThemeStorageKey = "hraness-design-theme-v1";
+
+export type DesignThemeLabels = Readonly<Partial<Record<DesignTheme, string>>>;
+
+export function isDesignTheme(value: unknown): value is DesignTheme {
+  return typeof value === "string" && designThemes.some((theme) => theme === value);
+}
+
+/** Missing and invalid foreign values resolve to the shared first-visit preference. */
+export function normalizeDesignTheme(value: unknown): DesignTheme {
+  return isDesignTheme(value) ? value : defaultDesignTheme;
+}
+
+export function designThemeLabel(
+  theme: DesignTheme,
+  labels?: DesignThemeLabels,
+): string {
+  return labels?.[theme] ?? `${theme.charAt(0).toUpperCase()}${theme.slice(1)}`;
+}
+
+export function resolveDesignTheme(
+  theme: DesignTheme,
+  systemPrefersDark: boolean,
+): ConcreteDesignTheme {
+  return theme === "system" ? (systemPrefersDark ? "dark" : "light") : theme;
+}

package/src/article-html.ts

@@ -0,0 +1,269 @@
+/**
+ * Framework-neutral static HTML for the article layer. Static-site builders
+ * that do not run React call these functions and load plain-publication.css
+ * (or styles.css). The markup matches the React components in
+ * `@hraness/design-kit/react/server` element for element; tests bind the two.
+ *
+ * Text arguments are escaped. Fields named `*Html` take trusted HTML the site
+ * already rendered, such as the output of its Markdown pipeline. Never pass
+ * reader input through them.
+ */
+import {
+  ARTICLE_BYLINE_PREFIX,
+  ARTICLE_SOURCES_HEADING,
+  ARTICLE_TOC_LABEL,
+  articleProvenanceSentence,
+  assertArticleAuthor,
+  assertArticleCalloutTone,
+  assertArticleDates,
+  assertArticleHref,
+  formatArticleDate,
+  type ArticleAuthor,
+  type ArticleCalloutTone,
+  type ArticleIndexItem,
+  type ArticleIsoDate,
+  type ArticleProvenanceRecord,
+  type ArticleSourceItem,
+  type ArticleTocItem,
+} from "./article.js";
+
+const ROOT_CLASS = "plain-site plain-publication plain-publication--embedded";
+const SEPARATOR = '<span aria-hidden="true"> · </span>';
+
+const ESCAPES: Readonly<Record<string, string>> = {
+  '"': "&quot;",
+  "&": "&amp;",
+  "'": "&#x27;",
+  "<": "&lt;",
+  ">": "&gt;",
+};
+
+/** Escape text for an HTML text node or a double-quoted attribute. */
+export function escapeArticleHtml(value: string): string {
+  return value.replace(/["&'<>]/gu, (character) => ESCAPES[character] ?? character);
+}
+
+function classes(...values: readonly (string | undefined)[]): string {
+  return values.filter((value) => value !== undefined && value !== "").join(" ");
+}
+
+function dateHtml(label: string, value: ArticleIsoDate): string {
+  return `${label} <time dateTime="${escapeArticleHtml(value)}">${escapeArticleHtml(formatArticleDate(value))}</time>`;
+}
+
+function present(value: string | undefined): value is string {
+  return value !== undefined && value !== "";
+}
+
+export function renderArticleBylineHtml(author: ArticleAuthor): string {
+  assertArticleAuthor(author);
+  const name = escapeArticleHtml(author.name);
+  const linked = author.href === undefined
+    ? name
+    : `<a href="${escapeArticleHtml(author.href)}" rel="author">${name}</a>`;
+  return `<span class="plain-publication__byline" data-author-kind="${author.kind}">${ARTICLE_BYLINE_PREFIX} ${linked}</span>`;
+}
+
+export function renderArticleProvenanceHtml(provenance: ArticleProvenanceRecord): string {
+  const sentence = articleProvenanceSentence(provenance);
+  return `<p class="plain-publication__provenance" data-drafting="${escapeArticleHtml(provenance.drafting)}" data-reviewer-type="${escapeArticleHtml(provenance.review?.reviewerType ?? "none")}">${escapeArticleHtml(sentence)}</p>`;
+}
+
+export interface ArticleHtmlInput {
+  /** Trusted HTML placed after the body, such as sources and related links. */
+  readonly afterHtml?: string;
+  readonly author?: ArticleAuthor;
+  /** Trusted HTML for the article body. */
+  readonly bodyHtml: string;
+  readonly className?: string;
+  readonly dek?: string;
+  readonly eyebrow?: string;
+  readonly heading: string;
+  readonly headingId?: string;
+  readonly id?: string;
+  readonly provenance: ArticleProvenanceRecord | null;
+  readonly published: ArticleIsoDate;
+  readonly toc?: readonly ArticleTocItem[];
+  readonly tocLabel?: string;
+  readonly updated?: ArticleIsoDate;
+}
+
+/** The static equivalent of `MarketingArticle`. */
+export function renderArticleHtml(input: ArticleHtmlInput): string {
+  const headingId = input.headingId ?? "article-title";
+  const { published, updated } = input;
+  assertArticleDates(updated === undefined ? { published } : { published, updated });
+  const toc = input.toc ?? [];
+  for (const item of toc) {
+    if (!item.href.startsWith("#") || item.href.length < 2) throw new RangeError("Contents links must point to a heading in this article.");
+  }
+  const tocId = `${headingId}-contents`;
+  const meta = [
+    input.author === undefined ? "" : renderArticleBylineHtml(input.author) + SEPARATOR,
+    dateHtml("Published", published),
+    updated === undefined ? "" : SEPARATOR + dateHtml("Updated", updated),
+  ].join("");
+  const header = [
+    '<header class="plain-publication__article-header">',
+    present(input.eyebrow) ? `<p class="plain-publication__eyebrow">${escapeArticleHtml(input.eyebrow)}</p>` : "",
+    `<h1 id="${escapeArticleHtml(headingId)}">${escapeArticleHtml(input.heading)}</h1>`,
+    present(input.dek) ? `<p class="plain-publication__article-dek">${escapeArticleHtml(input.dek)}</p>` : "",
+    `<p class="plain-publication__article-meta">${meta}</p>`,
+    input.provenance === null ? "" : renderArticleProvenanceHtml(input.provenance),
+    "</header>",
+  ].join("");
+  const nav = toc.length === 0 ? "" : [
+    `<nav aria-labelledby="${escapeArticleHtml(tocId)}" class="plain-publication__toc">`,
+    `<p id="${escapeArticleHtml(tocId)}">${escapeArticleHtml(input.tocLabel ?? ARTICLE_TOC_LABEL)}</p>`,
+    "<ol>",
+    ...toc.map((item) => `<li><a href="${escapeArticleHtml(item.href)}">${escapeArticleHtml(item.label)}</a></li>`),
+    "</ol></nav>",
+  ].join("");
+  return [
+    `<article aria-labelledby="${escapeArticleHtml(headingId)}" class="${escapeArticleHtml(classes(ROOT_CLASS, "plain-publication__article", input.className))}" data-hraness-article="" data-toc="${toc.length > 0 ? "aside" : "none"}"${input.id === undefined ? "" : ` id="${escapeArticleHtml(input.id)}"`}>`,
+    header,
+    '<div class="plain-publication__article-layout">',
+    nav,
+    `<div class="plain-publication__article-body">${input.bodyHtml}</div>`,
+    "</div>",
+    present(input.afterHtml) ? `<footer class="plain-publication__article-footer">${input.afterHtml}</footer>` : "",
+    "</article>",
+  ].join("");
+}
+
+/** The static equivalent of `ArticleSources`. Returns an empty string for no sources. */
+export function renderArticleSourcesHtml({
+  heading = ARTICLE_SOURCES_HEADING,
+  headingId = "article-sources",
+  sources,
+}: Readonly<{ heading?: string; headingId?: string; sources: readonly ArticleSourceItem[] }>): string {
+  if (sources.length === 0) return "";
+  for (const source of sources) assertArticleHref(source.href);
+  return [
+    `<section aria-labelledby="${escapeArticleHtml(headingId)}" class="plain-publication__sources">`,
+    `<h2 id="${escapeArticleHtml(headingId)}">${escapeArticleHtml(heading)}</h2>`,
+    "<ol>",
+    ...sources.map((source) => [
+      `<li><a href="${escapeArticleHtml(source.href)}">${escapeArticleHtml(source.title)}</a>`,
+      "<span>",
+      present(source.publisher) ? escapeArticleHtml(source.publisher) + SEPARATOR : "",
+      dateHtml("Checked", source.checkedOn),
+      "</span></li>",
+    ].join("")),
+    "</ol></section>",
+  ].join("");
+}
+
+/** The static equivalent of `ArticleCallout`. `bodyHtml` is trusted; pass `text` for escaped plain text. */
+export function renderArticleCalloutHtml(input: Readonly<{
+  label?: string;
+  tone?: ArticleCalloutTone;
+} & ({ bodyHtml: string; text?: undefined } | { bodyHtml?: undefined; text: string })>): string {
+  const tone = input.tone ?? "note";
+  assertArticleCalloutTone(tone);
+  const body = input.text === undefined ? input.bodyHtml : `<p>${escapeArticleHtml(input.text)}</p>`;
+  return `<div class="plain-publication__callout" data-tone="${tone}" role="note">${present(input.label) ? `<strong>${escapeArticleHtml(input.label)}</strong>` : ""}${body}</div>`;
+}
+
+export type ArticleRelatedLink = Readonly<{
+  href: string;
+  name: string;
+  /** Transparent product mark, such as a portfolio item's `mark` data URL, drawn before the name. */
+  mark?: string;
+}> & (
+  | Readonly<{
+    /** The product's one-line description, shown under its name. */
+    role: string;
+    /** Not rendered when `role` is present. */
+    relationship?: string;
+  }>
+  | Readonly<{
+    role?: undefined;
+    /** Shown under the name for items that predate `role`. */
+    relationship: string;
+  }>
+);
+
+function assertArticleMark(mark: string): void {
+  if (!mark.startsWith("data:image/svg+xml,")) assertArticleHref(mark);
+}
+
+/**
+ * Related products for static pages, using the plain-publication related
+ * grid: each row shows the product's mark, name, and one-line description.
+ * React hosts use `ArticleRelatedProducts`, which renders the marketing card
+ * row instead.
+ */
+export function renderArticleRelatedHtml({
+  heading = "Related products",
+  headingId = "article-related-products",
+  items,
+}: Readonly<{ heading?: string; headingId?: string; items: readonly ArticleRelatedLink[] }>): string {
+  if (items.length === 0) return "";
+  for (const item of items) {
+    assertArticleHref(item.href);
+    if (present(item.mark)) assertArticleMark(item.mark);
+  }
+  return [
+    `<section aria-labelledby="${escapeArticleHtml(headingId)}" class="plain-publication__related">`,
+    `<div class="plain-publication__section-heading"><h2 id="${escapeArticleHtml(headingId)}">${escapeArticleHtml(heading)}</h2></div>`,
+    '<div class="plain-publication__related-grid">',
+    ...items.map((item) => [
+      `<a href="${escapeArticleHtml(item.href)}">`,
+      present(item.mark)
+        ? `<img alt="" class="plain-publication__related-mark" decoding="async" height="44" src="${escapeArticleHtml(item.mark)}" width="44">`
+        : "",
+      `<span class="plain-publication__related-text"><strong>${escapeArticleHtml(item.name)}</strong>`,
+      `<span>${escapeArticleHtml(item.role ?? item.relationship)}</span></span></a>`,
+    ].join("")),
+    "</div></section>",
+  ].join("");
+}
+
+/** The static equivalent of `ArticleIndex`. */
+export function renderArticleIndexHtml({
+  className,
+  heading,
+  headingId,
+  headingLevel = 2,
+  id,
+  items,
+  summary,
+}: Readonly<{
+  className?: string;
+  heading: string;
+  headingId: string;
+  headingLevel?: 1 | 2 | 3 | 4 | 5;
+  id?: string;
+  items: readonly ArticleIndexItem[];
+  summary?: string;
+}>): string {
+  if (![1, 2, 3, 4, 5].includes(headingLevel)) throw new RangeError("Article index heading level must be 1 to 5.");
+  const hrefs = new Set<string>();
+  for (const item of items) {
+    assertArticleHref(item.href);
+    assertArticleDates(item.updated === undefined ? { published: item.published } : { published: item.published, updated: item.updated });
+    if (hrefs.has(item.href)) throw new RangeError(`Article index lists ${item.href} more than once.`);
+    hrefs.add(item.href);
+  }
+  const heading1 = `h${headingLevel}`;
+  const entry = `h${headingLevel + 1}`;
+  return [
+    `<section aria-labelledby="${escapeArticleHtml(headingId)}" class="${escapeArticleHtml(classes(ROOT_CLASS, "plain-publication__list", className))}" data-hraness-article-index=""${id === undefined ? "" : ` id="${escapeArticleHtml(id)}"`}>`,
+    `<div class="plain-publication__section-heading"><${heading1} id="${escapeArticleHtml(headingId)}">${escapeArticleHtml(heading)}</${heading1}>`,
+    present(summary) ? `<p>${escapeArticleHtml(summary)}</p>` : "",
+    "</div>",
+    '<div class="plain-publication__article-list">',
+    ...items.map((item) => [
+      '<article class="plain-publication__entry">',
+      present(item.eyebrow) ? `<p class="plain-publication__entry-label">${escapeArticleHtml(item.eyebrow)}</p>` : "",
+      `<${entry} class="plain-publication__entry-title"><a href="${escapeArticleHtml(item.href)}">${escapeArticleHtml(item.title)}</a></${entry}>`,
+      `<p class="plain-publication__entry-dek">${escapeArticleHtml(item.dek)}</p>`,
+      '<p class="plain-publication__entry-meta">',
+      dateHtml("Published", item.published),
+      item.updated === undefined ? "" : SEPARATOR + dateHtml("Updated", item.updated),
+      "</p></article>",
+    ].join("")),
+    "</div></section>",
+  ].join("");
+}