@hraness/design-kit 0.35.1 → 0.35.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.35.1",
+  "version": "0.35.2",
   "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",

package/portfolio-inventory.json

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

package/src/article-html.ts

@@ -83,6 +83,8 @@ export interface ArticleHtmlInput {
   readonly id?: string;
   readonly provenance: ArticleProvenanceRecord | null;
   readonly published: ArticleIsoDate;
+  /** Show publication and update dates. Defaults to true; dates remain required and validated when hidden. */
+  readonly showDates?: boolean;
   readonly toc?: readonly ArticleTocItem[];
   readonly tocLabel?: string;
   readonly updated?: ArticleIsoDate;
@@ -91,7 +93,7 @@ export interface ArticleHtmlInput {
 /** The static equivalent of `MarketingArticle`. */
 export function renderArticleHtml(input: ArticleHtmlInput): string {
   const headingId = input.headingId ?? "article-title";
-  const { published, updated } = input;
+  const { published, updated, showDates = true } = input;
   assertArticleDates(updated === undefined ? { published } : { published, updated });
   const toc = input.toc ?? [];
   for (const item of toc) {
@@ -99,16 +101,16 @@ export function renderArticleHtml(input: ArticleHtmlInput): string {
   }
   const tocId = `${headingId}-contents`;
   const meta = [
-    input.author === undefined ? "" : renderArticleBylineHtml(input.author) + SEPARATOR,
-    dateHtml("Published", published),
-    updated === undefined ? "" : SEPARATOR + dateHtml("Updated", updated),
-  ].join("");
+    input.author === undefined ? "" : renderArticleBylineHtml(input.author),
+    showDates ? dateHtml("Published", published) : "",
+    showDates && updated !== undefined ? dateHtml("Updated", updated) : "",
+  ].filter(Boolean).join(SEPARATOR);
   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>`,
+    meta === "" ? "" : `<p class="plain-publication__article-meta">${meta}</p>`,
     input.provenance === null ? "" : renderArticleProvenanceHtml(input.provenance),
     "</header>",
   ].join("");
@@ -135,21 +137,35 @@ export function renderArticleHtml(input: ArticleHtmlInput): string {
 export function renderArticleSourcesHtml({
   heading = ARTICLE_SOURCES_HEADING,
   headingId = "article-sources",
+  showDates = true,
   sources,
-}: Readonly<{ heading?: string; headingId?: string; sources: readonly ArticleSourceItem[] }>): string {
+}: Readonly<{
+  heading?: string;
+  headingId?: string;
+  /** Show check dates. Defaults to true; checkedOn remains required and validated when hidden. */
+  showDates?: boolean;
+  sources: readonly ArticleSourceItem[];
+}>): string {
   if (sources.length === 0) return "";
-  for (const source of sources) assertArticleHref(source.href);
+  for (const source of sources) {
+    assertArticleHref(source.href);
+    formatArticleDate(source.checkedOn);
+  }
   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("")),
+    ...sources.map((source) => {
+      const meta = [
+        present(source.publisher) ? escapeArticleHtml(source.publisher) : "",
+        showDates ? dateHtml("Checked", source.checkedOn) : "",
+      ].filter(Boolean).join(SEPARATOR);
+      return [
+        `<li><a href="${escapeArticleHtml(source.href)}">${escapeArticleHtml(source.title)}</a>`,
+        meta === "" ? "" : `<span>${meta}</span>`,
+        "</li>",
+      ].join("");
+    }),
     "</ol></section>",
   ].join("");
 }
@@ -228,6 +244,7 @@ export function renderArticleIndexHtml({
   headingLevel = 2,
   id,
   items,
+  showDates = true,
   summary,
 }: Readonly<{
   className?: string;
@@ -236,6 +253,8 @@ export function renderArticleIndexHtml({
   headingLevel?: 1 | 2 | 3 | 4 | 5;
   id?: string;
   items: readonly ArticleIndexItem[];
+  /** Show publication and update dates. Defaults to true; item dates remain required and validated when hidden. */
+  showDates?: boolean;
   summary?: string;
 }>): string {
   if (![1, 2, 3, 4, 5].includes(headingLevel)) throw new RangeError("Article index heading level must be 1 to 5.");
@@ -259,10 +278,13 @@ export function renderArticleIndexHtml({
       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>",
+      showDates ? [
+        '<p class="plain-publication__entry-meta">',
+        dateHtml("Published", item.published),
+        item.updated === undefined ? "" : SEPARATOR + dateHtml("Updated", item.updated),
+        "</p>",
+      ].join("") : "",
+      "</article>",
     ].join("")),
     "</div></section>",
   ].join("");

package/src/react/article.tsx

@@ -93,6 +93,8 @@ export interface MarketingArticleProps {
   /** Required so every article decides its drafting note. Pass null only for writing with no AI involvement and no review record. */
   readonly provenance: ArticleProvenanceRecord | null;
   readonly published: ArticleIsoDate;
+  /** Show publication and update dates. Defaults to true; dates remain required and validated when hidden. */
+  readonly showDates?: boolean;
   readonly toc?: readonly ArticleTocItem[];
   readonly tocLabel?: string;
   readonly updated?: ArticleIsoDate;
@@ -116,6 +118,7 @@ export function MarketingArticle({
   id,
   provenance,
   published,
+  showDates = true,
   toc,
   tocLabel = ARTICLE_TOC_LABEL,
   updated,
@@ -138,11 +141,13 @@ export function MarketingArticle({
         {eyebrow === undefined || eyebrow === "" ? null : <p className="plain-publication__eyebrow">{eyebrow}</p>}
         <h1 id={headingId}>{heading}</h1>
         {dek === undefined || dek === "" ? null : <p className="plain-publication__article-dek">{dek}</p>}
-        <p className="plain-publication__article-meta">
-          {author === undefined ? null : <><ArticleByline author={author} /><Separator /></>}
-          <ArticleDate label="Published" value={published} />
-          {updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={updated} /></>}
-        </p>
+        {author === undefined && !showDates ? null : (
+          <p className="plain-publication__article-meta">
+            {author === undefined ? null : <><ArticleByline author={author} />{showDates ? <Separator /> : null}</>}
+            {showDates ? <ArticleDate label="Published" value={published} /> : null}
+            {!showDates || updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={updated} /></>}
+          </p>
+        )}
         {provenance === null ? null : <ArticleProvenance provenance={provenance} />}
       </header>
       <div className="plain-publication__article-layout">
@@ -165,14 +170,20 @@ export function MarketingArticle({
 export function ArticleSources({
   heading = ARTICLE_SOURCES_HEADING,
   headingId = "article-sources",
+  showDates = true,
   sources,
 }: Readonly<{
   heading?: string;
   headingId?: string;
+  /** Show check dates. Defaults to true; checkedOn remains required and validated when hidden. */
+  showDates?: boolean;
   sources: readonly ArticleSourceItem[];
 }>) {
   if (sources.length === 0) return null;
-  for (const source of sources) assertArticleHref(source.href);
+  for (const source of sources) {
+    assertArticleHref(source.href);
+    formatArticleDate(source.checkedOn);
+  }
   return (
     <section aria-labelledby={headingId} className="plain-publication__sources">
       <h2 id={headingId}>{heading}</h2>
@@ -180,10 +191,12 @@ export function ArticleSources({
         {sources.map((source) => (
           <li key={`${source.href}-${source.title}`}>
             <a href={source.href}>{source.title}</a>
-            <span>
-              {source.publisher === undefined || source.publisher === "" ? null : <>{source.publisher}<Separator /></>}
-              <ArticleDate label="Checked" value={source.checkedOn} />
-            </span>
+            {!showDates && (source.publisher === undefined || source.publisher === "") ? null : (
+              <span>
+                {source.publisher === undefined || source.publisher === "" ? null : <>{source.publisher}{showDates ? <Separator /> : null}</>}
+                {showDates ? <ArticleDate label="Checked" value={source.checkedOn} /> : null}
+              </span>
+            )}
           </li>
         ))}
       </ol>
@@ -253,6 +266,7 @@ export function ArticleIndex({
   headingLevel = 2,
   id,
   items,
+  showDates = true,
   summary,
 }: Readonly<{
   className?: string;
@@ -261,6 +275,8 @@ export function ArticleIndex({
   headingLevel?: 1 | 2 | 3 | 4 | 5;
   id?: string;
   items: readonly ArticleIndexItem[];
+  /** Show publication and update dates. Defaults to true; item dates remain required and validated when hidden. */
+  showDates?: boolean;
   summary?: string;
 }>) {
   if (![1, 2, 3, 4, 5].includes(headingLevel)) throw new RangeError("Article index heading level must be 1 to 5.");
@@ -290,10 +306,12 @@ export function ArticleIndex({
             {item.eyebrow === undefined || item.eyebrow === "" ? null : <p className="plain-publication__entry-label">{item.eyebrow}</p>}
             <EntryTag className="plain-publication__entry-title"><a href={item.href}>{item.title}</a></EntryTag>
             <p className="plain-publication__entry-dek">{item.dek}</p>
-            <p className="plain-publication__entry-meta">
-              <ArticleDate label="Published" value={item.published} />
-              {item.updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={item.updated} /></>}
-            </p>
+            {showDates ? (
+              <p className="plain-publication__entry-meta">
+                <ArticleDate label="Published" value={item.published} />
+                {item.updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={item.updated} /></>}
+              </p>
+            ) : null}
           </article>
         ))}
       </div>

package/src/react/design-gallery.tsx

@@ -678,6 +678,7 @@ export function DesignSystemGallery({
           after={(
             <ArticleSources
               headingId="gallery-article-sources"
+              showDates={false}
               sources={[
                 { checkedOn: "2026-09-20", href: "#articles", publisher: "Relay", title: "Relay 2.4 release notes" },
               ]}
@@ -693,6 +694,7 @@ export function DesignSystemGallery({
             review: { reviewer: "an independent AI editorial review", reviewerType: "ai" },
           }}
           published="2026-09-10"
+          showDates={false}
           toc={[
             { href: "#gallery-article-problem", label: "The problem" },
             { href: "#gallery-article-approach", label: "The approach" },