@tokenoftrust/storefront-runner 2.2.126 → 2.3.1

package/apps/storefront/src/components/compliance/PactActNotice.astro

@@ -1,14 +1,16 @@
 ---
 /**
  * PACT Act (Prevent All Cigarette Trafficking Act, extended to ENDS/vapor in
- * 2021) compliance notice. The federal requirements it summarizes are fixed and
- * authored here — age verification, adult signature on delivery, and no U.S.
- * Postal Service carriage; only whether it renders (and the age) comes from
- * tenant.compliance.pactAct / .minAge. Renders NOTHING when `enabled` is false,
- * so absent data never shows placeholder legal text. Never hand-author this on a
- * marketing page.
+ * 2021) compliance notice. The federal requirements it summarizes are fixed —
+ * age verification, adult signature on delivery, and no U.S. Postal Service
+ * carriage — in `pactActNoticeText`, the one copy the raw-HTML path injects too;
+ * only whether it renders (and the age) comes from tenant.compliance.pactAct /
+ * .minAge. Renders NOTHING when `enabled` is false, so absent data never shows
+ * placeholder legal text. Never hand-author this on a marketing page. Layout.astro
+ * renders it as a footer band on every page.
  */
 import ComplianceNotice from "./ComplianceNotice.astro";
+import { pactActNoticeText } from "@/lib/compliance/rawComplianceNotices";
 
 interface Props {
   /** From tenant.compliance.pactAct. */
@@ -20,10 +22,7 @@ interface Props {
 
 const { enabled = false, minAge = 21, variant = "block" } = Astro.props;
 
-const TEXT =
-  `In compliance with the federal PACT Act, all vapor and nicotine orders require ` +
-  `age verification (${minAge}+) and an adult signature on delivery. These products ` +
-  `cannot be shipped through the U.S. Postal Service.`;
+const TEXT = pactActNoticeText(minAge);
 ---
 
 {

package/apps/storefront/src/components/content/ProseSections.astro

@@ -32,11 +32,11 @@ const rendered = withHeadingIds(normalizeProse(sections));
       switch (s.kind) {
         case "heading":
           return (s.level ?? 2) === 3 ? (
-            <h3 id={s.id} class="mt-6 scroll-mt-24 font-display text-xl font-semibold">
+            <h3 id={s.id} class="mt-6 scroll-mt-24 font-display text-[length:var(--heading-h3,1.25rem)] leading-[1.4] font-semibold">
               {s.text}
             </h3>
           ) : (
-            <h2 id={s.id} class="mt-8 scroll-mt-24 font-display text-2xl font-semibold">
+            <h2 id={s.id} class="mt-8 scroll-mt-24 font-display text-[length:var(--heading-h2,1.5rem)] leading-[1.3333] font-semibold">
               {s.text}
             </h2>
           );

package/apps/storefront/src/components/home/Hero.astro

@@ -13,6 +13,11 @@
  *     visual-parity migrations where the artwork owns the visible copy.
  * The feature image is the merchant's own hero image (block.image) when adopted,
  * else the hero collection's first product.
+ *
+ * `block.notice` renders a status pill (`.hero__notice`) above the eyebrow in
+ * every treatment; the slideshow and banner carry it in a band above the artwork.
+ * The eyebrow (`.hero__eyebrow`) reads `--color-hero-eyebrow` first, so a theme
+ * recolours it with `color.hero-eyebrow` and tenant CSS can target the hook class.
  */
 import type { HeroBlock } from "@/lib/storyblok/content-model";
 import type { CatalogProduct } from "@tot/public-runtime";
@@ -24,8 +29,11 @@ interface Props {
   block: HeroBlock;
   featureProduct?: CatalogProduct | null;
   instanceKey?: string;
+  /** The page's h1 by default; a page that already has its h1 renders the hero headline as h2. */
+  headingLevel?: 1 | 2;
 }
-const { block, featureProduct, instanceKey = "home" } = Astro.props;
+const { block, featureProduct, instanceKey = "home", headingLevel = 1 } = Astro.props;
+const Heading = headingLevel === 2 ? "h2" : "h1";
 const { basePath } = Astro.locals;
 const heroVariant = Astro.locals.tenant?.theme_tokens?.brand?.heroVariant ?? "bold";
 const light = heroVariant === "light";
@@ -37,18 +45,25 @@ const slideshowView = heroSlideshowView(block, instanceKey, basePath);
 const slides = slideshowView.slides;
 const slideshow = slides.length > 0;
 const slideId = slideshowView.id;
+const notice = block.notice?.trim();
 ---
 
 {slideshow ? (
   <section
     class="hero-slideshow bg-[var(--color-bg)]"
+    data-widget="home-hero"
     aria-roledescription="carousel"
     aria-label={block.headline}
     data-hero-slideshow
     data-autoplay={slideshowView.autoplay ? "true" : "false"}
     data-interval={slideshowView.intervalMs}
   >
-    <h1 class="sr-only">{block.headline}</h1>
+    <Heading class="sr-only">{block.headline}</Heading>
+    {notice && (
+      <div class="container-prose py-3">
+        <p class="hero__notice">{notice}</p>
+      </div>
+    )}
     <div class="hero-slideshow__slides">
       {slides.map((slide) => (
         <Fragment>
@@ -79,8 +94,13 @@ const slideId = slideshowView.id;
     )}
   </section>
 ) : banner ? (
-  <section class="bg-[var(--color-bg)]">
-    <h1 class="sr-only">{block.headline}</h1>
+  <section class="bg-[var(--color-bg)]" data-widget="home-hero">
+    <Heading class="sr-only">{block.headline}</Heading>
+    {notice && (
+      <div class="container-prose py-3">
+        <p class="hero__notice">{notice}</p>
+      </div>
+    )}
     {block.ctaHref ? (
       <a
         href={withBase(basePath, block.ctaHref)}
@@ -113,6 +133,7 @@ const slideId = slideshowView.id;
   </section>
 ) : (
 <section
+  data-widget="home-hero"
   class:list={[
     "relative overflow-hidden",
     light
@@ -127,25 +148,26 @@ const slideId = slideshowView.id;
     ]}
   >
     <div data-reveal>
+      {notice && <p class="hero__notice mb-5">{notice}</p>}
       {
         block.eyebrow && (
           <p
             class:list={[
-              "eyebrow eyebrow--tick mb-6",
+              "hero__eyebrow eyebrow eyebrow--tick mb-6",
               light
-                ? "!text-[var(--color-muted)]"
-                : "!text-[color-mix(in_srgb,var(--color-primary-contrast)_72%,transparent)]",
+                ? "text-[var(--color-hero-eyebrow,var(--color-muted))]"
+                : "text-[var(--color-hero-eyebrow,color-mix(in_srgb,var(--color-primary-contrast)_72%,transparent))]",
             ]}
           >
             {block.eyebrow}
           </p>
         )
       }
-      <h1 class="display-hero">
+      <Heading class="display-hero">
         <span class:list={["block", light && "text-[var(--color-primary)]"]}>{block.headline}</span>
         {
           block.headlineAccent && (
-            <span class="relative block w-fit text-[var(--color-accent)]">
+            <span class:list={["relative block w-fit", light ? "text-[var(--color-accent-ink)]" : "text-[var(--color-accent)]"]}>
               {block.headlineAccent}
               <span
                 aria-hidden="true"
@@ -154,7 +176,7 @@ const slideId = slideshowView.id;
             </span>
           )
         }
-      </h1>
+      </Heading>
       {
         block.subhead && (
           <p
@@ -173,7 +195,7 @@ const slideId = slideshowView.id;
         block.ctaLabel && block.ctaHref && (
           <a
             href={withBase(basePath, block.ctaHref)}
-            class="group mt-9 inline-flex items-center gap-2 rounded-full bg-[var(--color-accent)] px-7 py-3 font-display text-[0.95rem] font-semibold text-white transition-transform duration-200 hover:-translate-y-0.5 focus-visible:-translate-y-0.5"
+            class="group mt-9 inline-flex items-center gap-2 rounded-full bg-[var(--color-accent)] px-7 py-3 font-display text-[0.95rem] font-semibold text-[var(--color-accent-contrast)] transition-transform duration-200 hover:-translate-y-0.5 focus-visible:-translate-y-0.5"
           >
             {block.ctaLabel}
             <span aria-hidden="true" class="transition-transform duration-200 group-hover:translate-x-1">
@@ -243,7 +265,7 @@ const slideId = slideshowView.id;
               class="absolute bottom-4 left-4 right-4 flex items-center justify-between rounded-[var(--radius-md)] bg-[var(--color-surface)]/95 px-4 py-3 text-[var(--color-text)] backdrop-blur"
             >
               <span class="font-display text-sm font-medium">{featureProduct.title}</span>
-              <span class="eyebrow !text-[var(--color-accent)]">Shop →</span>
+              <span class="eyebrow text-[var(--color-accent-ink)]">Shop →</span>
             </a>
           </div>
         )

package/apps/storefront/src/components/islands/IsolatedAgeGate.tsx

@@ -48,12 +48,44 @@ function scrollbarGutterWidth(): number {
   return Number.isFinite(width) && width > 0 ? width : 0;
 }
 
-/** Make the storefront behind the gate non-interactive without disturbing prior inert state. */
+const MAIN_LANDMARK = 'main, [role="main"]';
+
+/**
+ * The elements to make inert so everything behind the gate is unreachable while the
+ * page's `<main>` landmark itself stays in the accessibility tree. An element that
+ * is or contains the main landmark is descended into rather than inerted, so only
+ * its contents go inert; every other element is inerted whole. A page with no main
+ * landmark inerts each body child. `containers` are the elements descended into (body,
+ * main, and main's ancestors): content added to one of them later must be inerted too.
+ */
+export function ageGateInertTargets(host: HTMLElement): { targets: HTMLElement[]; containers: Element[] } {
+  const targets: HTMLElement[] = [];
+  const containers: Element[] = [];
+  const visit = (parent: Element) => {
+    containers.push(parent);
+    for (const child of Array.from(parent.children)) {
+      if (!(child instanceof HTMLElement) || child === host || child.hasAttribute("inert")) continue;
+      if (child.matches(MAIN_LANDMARK) || child.querySelector(MAIN_LANDMARK)) visit(child);
+      else targets.push(child);
+    }
+  };
+  visit(document.body);
+  return { targets, containers };
+}
+
+/**
+ * Make the storefront behind the gate non-interactive without disturbing prior inert
+ * state. The gate is an `aria-modal` dialog with a focus trap; inert takes keyboard,
+ * pointer, and assistive-technology reach away from everything else on the page.
+ */
 export function isolateAgeGateBackground(host: HTMLElement): BackgroundIsolation {
   const isolated = new Set<HTMLElement>();
   const previousOverflow = document.documentElement.style.overflow;
   const previousPaddingRight = document.documentElement.style.paddingRight;
   let active = true;
+  // Watches the containers kept out of inert, so a child appended to one later is
+  // inerted as well.
+  const containerObserver = new MutationObserver(() => refresh());
 
   const refresh = () => {
     if (!active) return;
@@ -64,15 +96,17 @@ export function isolateAgeGateBackground(host: HTMLElement): BackgroundIsolation
       document.documentElement.style.paddingRight = `${gutter}px`;
     }
     document.documentElement.style.overflow = "hidden";
-    for (const sibling of Array.from(document.body.children)) {
-      if (!(sibling instanceof HTMLElement) || sibling === host || sibling.hasAttribute("inert")) continue;
-      sibling.setAttribute("inert", "");
-      isolated.add(sibling);
+    const { targets, containers } = ageGateInertTargets(host);
+    for (const target of targets) {
+      target.setAttribute("inert", "");
+      isolated.add(target);
     }
+    for (const container of containers) containerObserver.observe(container, { childList: true });
   };
   const release = () => {
     if (!active) return;
     active = false;
+    containerObserver.disconnect();
     for (const sibling of isolated) sibling.removeAttribute("inert");
     isolated.clear();
     document.documentElement.style.overflow = previousOverflow;

package/apps/storefront/src/components/islands/VariantSelector.tsx

@@ -227,7 +227,7 @@ export default function VariantSelector({
       stockClass = "text-sale";
     } else if (qty !== undefined && qty !== null && qty <= LOW_STOCK_THRESHOLD) {
       stockLabel = `Only ${qty} left`;
-      stockClass = "text-accent";
+      stockClass = "text-accent-ink";
     } else {
       stockLabel = "In stock";
       stockClass = "text-primary";
@@ -300,7 +300,7 @@ export default function VariantSelector({
               {memberApplied && (
                 <span
                   data-member-price
-                  class="rounded-full bg-accent px-2 py-0.5 font-mono text-[0.68rem] uppercase tracking-[0.08em] text-primary-contrast"
+                  class="rounded-full bg-accent px-2 py-0.5 font-mono text-[0.68rem] uppercase tracking-[0.08em] text-accent-contrast"
                 >
                   {pricing?.membershipRule.label ?? "Member"} price
                 </span>
@@ -403,7 +403,7 @@ export default function VariantSelector({
                       {option.label}
                     </span>
                     {"savingsLabel" in option && option.savingsLabel && (
-                      <span class="rounded-full bg-accent px-2 py-0.5 font-mono text-[0.68rem] uppercase tracking-[0.08em] text-primary-contrast">
+                      <span class="rounded-full bg-accent px-2 py-0.5 font-mono text-[0.68rem] uppercase tracking-[0.08em] text-accent-contrast">
                         {option.savingsLabel}
                       </span>
                     )}

package/apps/storefront/src/components/marketing/CardGrid.astro

@@ -21,7 +21,7 @@ const cols =
 const isExternal = (href: string) => /^https?:\/\//i.test(href);
 const hrefOf = (href: string) => (isExternal(href) ? href : withBase(basePath, href));
 ---
-<Section id={block.anchor} eyebrow={block.eyebrow} title={block.title} tone="bg">
+<Section id={block.anchor} eyebrow={block.eyebrow} title={block.title} tone="bg" widget="marketing-card-grid">
   {block.subhead && (
     <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
       {block.subhead}

package/apps/storefront/src/components/marketing/CodeSample.astro

@@ -11,7 +11,7 @@ interface Props {
 }
 const { sample } = Astro.props;
 ---
-<figure class="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-text)]">
+<figure data-widget="marketing-code-sample" class="overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-text)]">
   <figcaption class="flex items-center justify-between border-b border-white/10 px-4 py-2 font-mono text-[0.68rem] uppercase tracking-[0.12em] text-white/60">
     <span>{sample.caption ?? "Example"}</span>
     {sample.language && <span>{sample.language}</span>}

package/apps/storefront/src/components/marketing/CtaBand.astro

@@ -11,7 +11,7 @@ interface Props {
 }
 const { block, basePath } = Astro.props;
 ---
-<section class="bg-[var(--color-surface)] py-[clamp(3.5rem,8vw,6.5rem)]">
+<section data-widget="marketing-cta-band" class="bg-[var(--color-surface)] py-[clamp(3.5rem,8vw,6.5rem)]">
   <div class="container-prose">
     <div class="mx-auto max-w-2xl text-center" data-reveal>
       <h2 class="display-lg">{block.title}</h2>

package/apps/storefront/src/components/marketing/Faq.astro

@@ -23,7 +23,7 @@ const faqLd = {
 };
 const faqJsonLd = safeJsonScriptContent(faqLd);
 ---
-<Section eyebrow={block.eyebrow} title={block.title} tone="surface">
+<Section eyebrow={block.eyebrow} title={block.title} tone="surface" widget="marketing-faq">
   {block.lede && (
     <p class="mb-8 max-w-[42rem] text-[var(--color-muted)]" data-reveal>{block.lede}</p>
   )}

package/apps/storefront/src/components/marketing/Integrations.astro

@@ -16,7 +16,7 @@ interface Props {
 const { block, basePath } = Astro.props;
 const isExternal = (href: string) => /^https?:\/\//i.test(href);
 ---
-<Section eyebrow={block.eyebrow} title={block.title} tone="surface">
+<Section eyebrow={block.eyebrow} title={block.title} tone="surface" widget="marketing-integrations">
   {block.subhead && (
     <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
       {block.subhead}

package/apps/storefront/src/components/marketing/MarketingCtas.astro

@@ -18,7 +18,7 @@ const { ctas = [], basePath, class: className } = Astro.props;
 
 const styles: Record<NonNullable<MarketingCta["variant"]>, string> = {
   primary:
-    "rounded-full bg-accent px-6 py-3 font-display text-sm font-semibold text-[var(--color-primary-contrast)] shadow-[var(--shadow-sm)] transition-transform hover:-translate-y-0.5",
+    "rounded-full bg-accent px-6 py-3 font-display text-sm font-semibold text-accent-contrast shadow-[var(--shadow-sm)] transition-transform hover:-translate-y-0.5",
   secondary:
     "rounded-full border border-[var(--color-border)] bg-[var(--color-surface)] px-6 py-3 font-display text-sm font-semibold text-[var(--color-text)] transition-colors hover:border-[var(--color-primary)]",
   ghost:

package/apps/storefront/src/components/marketing/MarketingHero.astro

@@ -16,7 +16,7 @@ const { block, basePath } = Astro.props;
 const hasPanel = !!block.panel?.lines?.length;
 ---
 
-<section class="bg-[var(--color-bg)] py-[clamp(3.5rem,8vw,7rem)]">
+<section data-widget="marketing-hero" class="bg-[var(--color-bg)] py-[clamp(3.5rem,8vw,7rem)]">
   <div class="container-prose">
     <div
       class:list={[

package/apps/storefront/src/components/marketing/ProofStrip.astro

@@ -10,7 +10,7 @@ interface Props {
 }
 const { block } = Astro.props;
 ---
-<section class="bg-[var(--color-primary)] py-[clamp(3rem,7vw,6rem)] text-[var(--color-primary-contrast)]">
+<section data-widget="marketing-proof-strip" class="bg-[var(--color-primary)] py-[clamp(3rem,7vw,6rem)] text-[var(--color-primary-contrast)]">
   <div class="container-prose">
     <div class="mx-auto max-w-3xl text-center" data-reveal>
       {block.eyebrow && (

package/apps/storefront/src/components/marketing/SplitCompare.astro

@@ -11,7 +11,7 @@ interface Props {
 }
 const { block } = Astro.props;
 ---
-<Section eyebrow={block.eyebrow} title={block.title} tone="bg">
+<Section eyebrow={block.eyebrow} title={block.title} tone="bg" widget="marketing-split-compare">
   {block.subhead && (
     <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
       {block.subhead}

package/apps/storefront/src/components/marketing/Steps.astro

@@ -10,7 +10,7 @@ interface Props {
 }
 const { block } = Astro.props;
 ---
-<Section eyebrow={block.eyebrow} title={block.title} tone="surface">
+<Section eyebrow={block.eyebrow} title={block.title} tone="surface" widget="marketing-steps">
   {block.subhead && (
     <p class="-mt-4 mb-9 max-w-[60ch] text-[var(--color-muted)]" data-reveal>
       {block.subhead}

package/apps/storefront/src/components/marketing/Testimonials.astro

@@ -10,12 +10,12 @@ interface Props {
 }
 const { block } = Astro.props;
 ---
-<Section eyebrow={block.eyebrow} title={block.title} tone="bg">
+<Section eyebrow={block.eyebrow} title={block.title} tone="bg" widget="marketing-testimonials">
   <div class="grid gap-5 md:grid-cols-3" data-reveal>
     {block.quotes.map((q) => (
       <figure class="flex flex-col rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface)] p-6">
         {q.stat && (
-          <p class="font-display text-2xl font-bold text-[var(--color-accent)]">{q.stat}</p>
+          <p class="font-display text-2xl font-bold text-[var(--color-accent-ink)]">{q.stat}</p>
         )}
         <blockquote class="mt-3 flex-1 text-[var(--color-text)]">
           <p>“{q.quote}”</p>

package/apps/storefront/src/components/marketing/TrustBar.astro

@@ -9,7 +9,7 @@ interface Props {
 }
 const { block } = Astro.props;
 ---
-<div class="border-y border-[var(--color-border)] bg-[var(--color-surface)]">
+<div data-widget="marketing-trust-bar" class="border-y border-[var(--color-border)] bg-[var(--color-surface)]">
   <div class="container-prose py-4">
     <ul class="flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-center font-mono text-[0.72rem] uppercase tracking-[0.1em] text-[var(--color-muted)]">
       {block.items.map((item) => (

package/apps/storefront/src/components/membership/TierComparisonTable.astro

@@ -64,7 +64,7 @@ const anyIllustrative = tiers.some((t) => t.figure && isIllustrative(t));
           </caption>
           <thead>
             <tr>
-              <th scope="col" class="w-1/3 p-3 text-left align-bottom" />
+              <th scope="col" class="w-1/3 p-3 text-left align-bottom"><span class="sr-only">Feature</span></th>
               {tiers.map((tier) => {
                 const illustrative = Boolean(tier.figure) && isIllustrative(tier);
                 return (

package/apps/storefront/src/components/plp/ActiveFilters.astro

@@ -47,7 +47,7 @@ const clearHref =
 
 {
   chips.length > 0 && (
-    <div class="mb-5 flex flex-wrap items-center gap-2" data-active-filters>
+    <div class="mb-5 flex flex-wrap items-center gap-2" data-active-filters data-widget="plp-active-filters">
       <span class="sr-only">Active filters:</span>
       {chips.map((chip) => (
         <a

package/apps/storefront/src/components/plp/FacetSidebar.astro

@@ -40,9 +40,9 @@ const clearHref =
   buildQueryString({ sort: query.sort, q: query.q, pageSize: query.pageSize });
 ---
 
-<aside aria-label="Filters" class="text-sm">
+<aside aria-label="Filters" data-widget="plp-facet-sidebar" class="text-sm">
   <div class="mb-4 flex items-center justify-between">
-    <h2 class="eyebrow !text-[var(--color-text)]">Filter</h2>
+    <h2 class="eyebrow text-[var(--color-text)]">Filter</h2>
     {hasActiveFilters && (
       <a href={clearHref} class="text-xs text-[var(--color-muted)] underline underline-offset-2 hover:text-[var(--color-accent-ink)]">
         Clear all
@@ -93,7 +93,7 @@ const clearHref =
                       </span>
                       {fv.value === "all" ? "All items" : fv.value}
                     </span>
-                    <span class:list={["text-xs", isSel ? "opacity-80" : "text-[var(--color-muted)]"]}>
+                    <span class:list={["text-xs", !isSel && "text-[var(--color-muted)]"]}>
                       {fv.count}
                     </span>
                   </a>
@@ -145,7 +145,7 @@ const clearHref =
                     </span>
                     {bucket.label}
                   </span>
-                  <span class:list={["text-xs", isSel ? "opacity-80" : "text-[var(--color-muted)]"]}>
+                  <span class:list={["text-xs", !isSel && "text-[var(--color-muted)]"]}>
                     {fv.count}
                   </span>
                 </a>

package/apps/storefront/src/components/plp/Pagination.astro

@@ -33,7 +33,7 @@ const hasNext = page < pageCount;
 ---
 
 {pageCount > 1 && (
-  <nav aria-label="Pagination" class="mt-12 flex flex-col items-center gap-6">
+  <nav aria-label="Pagination" data-widget="plp-pagination" class="mt-12 flex flex-col items-center gap-6">
     {hasNext && (
       <a
         href={href(page + 1)}

package/apps/storefront/src/components/plp/SortSelect.astro

@@ -34,7 +34,7 @@ const OPTIONS: { value: NonNullable<ListProductsQuery["sort"]>; label: string }[
 const current = query.sort ?? "featured";
 ---
 
-<form method="get" action={basePath} class="flex items-center gap-2 text-sm">
+<form method="get" action={basePath} data-widget="plp-sort-select" class="flex items-center gap-2 text-sm">
   {/* Preserve filters/price/availability/q across a sort change. */}
   {query.q && <input type="hidden" name="q" value={query.q} />}
   {query.availability && query.availability !== "all" && (

package/apps/storefront/src/components/style-guide/StyleGuideNav.astro

@@ -2,9 +2,11 @@
 /**
  * Persistent left-hand navigation for the preview/dev style-guide surfaces.
  *
- * Markup-only (no <style>): the host page owns the `.sg-nav*` styles inside its
- * nonce'd <style> block, so this component stays CSP-clean under the strict
- * inline-style policy (build.inlineStylesheets:"never"). Rendered on the tenant
+ * Owns its `.sg-nav*` styles: a page's own <style> is scoped to the page's
+ * markup and never reaches this component's elements. Like every component
+ * style, the build emits them as an external sheet (inlineStylesheets:"never"),
+ * so the rail stays CSP-clean. It sits on the dark guide rail and meets the bar
+ * the guides enforce: ≥14px text and ≥44px targets. Rendered on the tenant
  * hub, the widget-library guide, and any per-theme guide that wants a persistent
  * rail so the Widget Library Guide is one click away from the top page.
  *
@@ -93,3 +95,16 @@ const toc = headings.filter((h) => h.depth === 2);
     )}
   </ul>
 </nav>
+
+<style>
+  .sg-nav__eyebrow { font: 800 max(.875rem, 14px)/1.2 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7fe3d4; margin: 0 0 12px; padding: 0 10px; }
+  .sg-nav__list { list-style: none; margin: 0; padding: 0; }
+  .sg-nav__list li { margin: 0; }
+  .sg-nav__link { display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: #bfe0ff; text-decoration: none; font-size: max(.92rem, 14px); }
+  .sg-nav__link:hover { background: #16223c; }
+  .sg-nav__link.is-active { background: #16223c; color: #fff; font-weight: 700; }
+  .sg-nav__link--sub { padding-left: 20px; }
+  .sg-nav__toc { list-style: none; margin: 2px 0 8px 16px; padding: 0; border-left: 1px solid #26365a; }
+  .sg-nav__toc-link { display: flex; align-items: center; min-height: 44px; padding: 4px 10px 4px 14px; color: #9fb0c8; font-size: max(.82rem, 14px); text-decoration: none; line-height: 1.3; }
+  .sg-nav__toc-link:hover { color: #e6edf6; }
+</style>

package/apps/storefront/src/components/the-build/TheBuildIndexView.astro

@@ -8,18 +8,20 @@ import Layout from "@/layouts/Layout.astro";
 import PostAccessBadge from "@/components/blog/PostAccessBadge.astro";
 import type { BlogPostSummary } from "@/lib/blog/types.js";
 import type { TheBuildIndexCopy } from "@/lib/the-build/pagination.js";
+import type { BlogPresentation } from "@/lib/blog/presentation.js";
 import { theBuildPagePath } from "@/lib/the-build/pagination.js";
 
 interface Props {
   basePath: string;
   canonicalBase: string;
   copy: TheBuildIndexCopy;
+  presentation: BlogPresentation;
   pagePosts: BlogPostSummary[];
   page: number;
   totalPages: number;
 }
 
-const { basePath, canonicalBase, copy, pagePosts, page, totalPages } = Astro.props;
+const { basePath, canonicalBase, copy, presentation, pagePosts, page, totalPages } = Astro.props;
 
 const href = (path: string) => `${basePath}${path}` || "/";
 const path = theBuildPagePath(page);
@@ -52,11 +54,11 @@ const itemList = {
   jsonLd={itemList}
   pagination={pagination}
 >
-  <header class="blog-hero">
+  <header class:list={["blog-hero", { "blog-hero--plain": !presentation.hero }]}>
     <div class="blog-shell">
-      <p class="eyebrow eyebrow--tick">{copy.eyebrow}</p>
+      {copy.eyebrow && <p class="eyebrow eyebrow--tick">{copy.eyebrow}</p>}
       <h1>{copy.title}</h1>
-      <p>{copy.tagline}</p>
+      {copy.tagline && <p class="blog-hero__tagline">{copy.tagline}</p>}
     </div>
   </header>
 
@@ -150,8 +152,10 @@ const itemList = {
   .blog-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
   .blog-hero { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 5rem); background: linear-gradient(145deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 82%, var(--color-accent))); color: var(--color-primary-contrast); }
   .blog-hero h1 { max-width: 12ch; margin-top: .75rem; color: inherit; font-size: clamp(2.9rem, 7vw, 5.6rem); }
-  .blog-hero p:last-child { max-width: 58ch; margin-top: 1.25rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.12rem; }
+  .blog-hero__tagline { max-width: 58ch; margin-top: 1.25rem; color: color-mix(in srgb, var(--color-primary-contrast) 82%, transparent); font-size: 1.12rem; }
   .blog-hero .eyebrow { color: color-mix(in srgb, var(--color-primary-contrast) 75%, transparent); }
+  .blog-hero--plain { padding: clamp(2rem, 5vw, 3.5rem) 0 0; background: none; color: inherit; }
+  .blog-hero--plain .blog-hero__tagline, .blog-hero--plain .eyebrow { color: var(--color-muted); }
   .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; align-items: start; padding-block: clamp(3rem, 7vw, 6rem); }
   .post-card { height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
   .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }