From 40c1f35ad2e248c77280c71d8ef98ffb1752b4ac Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Tue, 7 Jul 2026 15:57:06 -0600
Subject: [PATCH 1/8] feat: add is-preview-feature helper for page-preview
 attribute

---
 src/helpers/is-preview-feature.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/helpers/is-preview-feature.js

diff --git a/src/helpers/is-preview-feature.js b/src/helpers/is-preview-feature.js
new file mode 100644
index 00000000..f94603c8
--- /dev/null
+++ b/src/helpers/is-preview-feature.js
@@ -0,0 +1,26 @@
+'use strict'
+
+// Cache: Map<componentName, Map<url, isPreview>>
+let urlCache = null
+let cachedComponent = null
+
+module.exports = (navUrl, { data: { root } }) => {
+  const { contentCatalog, page } = root
+  if (page.layout === '404') return false
+  if (!contentCatalog) return false
+
+  // Build URL map once per component (O(n) once, then O(1) lookups)
+  if (cachedComponent !== page.component.name) {
+    urlCache = new Map()
+    cachedComponent = page.component.name
+
+    const pages = contentCatalog.findBy({ component: page.component.name, family: 'page' })
+    for (const p of pages) {
+      if (p.pub?.url) {
+        urlCache.set(p.pub.url, !!p.asciidoc?.attributes?.['page-preview'])
+      }
+    }
+  }
+
+  return urlCache.get(navUrl) || false
+}

From 4bd16a091561ccef173f65cf73bfc72d4b8c4347 Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Tue, 7 Jul 2026 15:59:01 -0600
Subject: [PATCH 2/8] feat: render (Preview) pill on nav links for page-preview
 pages

---
 src/css/nav.css           | 7 +++++++
 src/partials/nav-tree.hbs | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/css/nav.css b/src/css/nav.css
index 6265ced0..6a362920 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -673,6 +673,13 @@ html[data-theme="light"] .nav-item-toggle {
   white-space: nowrap;
 }
 
+.nav-link.cloud-preview::after {
+  display: inline;
+  content: '(Preview)';
+  margin-left: 4px;
+  white-space: nowrap;
+}
+
 .nav-link.cloud-limited-availability::after {
   display: inline;
   content: '(Limited)';
diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs
index 985574be..514cdfae 100644
--- a/src/partials/nav-tree.hbs
+++ b/src/partials/nav-tree.hbs
@@ -5,7 +5,7 @@
     {{#if ./content}}
     <div class="item {{#if (eq ./url @root.page.url)}}is-current-page{{/if}} {{#if ./items.length}}dropdown{{/if}}">
     {{#if ./url}}
-    <a class="nav-link {{~#if (is-beta-feature ./url)}} cloud-beta{{~/if}}{{~#if (is-limited-availability-feature ./url)}} cloud-limited-availability{{~/if}}{{~#unless @root.page.attributes.adp}}{{~#if (is-byoc-feature ./url)}} cloud-byoc{{~/if}}{{~#if (is-cloud-feature ./url)}} cloud-only{{~/if}}{{~/unless}}" href="
+    <a class="nav-link {{~#if (is-beta-feature ./url)}} cloud-beta{{~/if}}{{~#if (is-preview-feature ./url)}} cloud-preview{{~/if}}{{~#if (is-limited-availability-feature ./url)}} cloud-limited-availability{{~/if}}{{~#unless @root.page.attributes.adp}}{{~#if (is-byoc-feature ./url)}} cloud-byoc{{~/if}}{{~#if (is-cloud-feature ./url)}} cloud-only{{~/if}}{{~/unless}}" href="
       {{~#if (eq ./urlType 'internal')}}{{{relativize ./url}}}
       {{~else}}{{{./url}}}{{~/if}}">{{{./content}}} </a>
     {{else}}

From e46df0ff513d913f1aea9882e473eb4f2e880e47 Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Tue, 7 Jul 2026 16:02:02 -0600
Subject: [PATCH 3/8] feat: add Preview status badge with tooltip to sticky
 page header

---
 src/partials/article.hbs | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index 0a19d237..8f22a0aa 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -28,6 +28,9 @@
     {{#if page.attributes.beta}}
     <span class="status-badge status-badge--beta" data-tippy-content="{{#if page.attributes.beta-text}}{{page.attributes.beta-text}}{{else}}This feature is in beta and may change.{{/if}}">beta</span>
     {{/if}}
+    {{#if page.attributes.preview}}
+    <span class="status-badge status-badge--preview" data-tippy-content="{{#if page.attributes.preview-text}}{{page.attributes.preview-text}}{{else}}This feature is in preview and may change.{{/if}}">Preview</span>
+    {{/if}}
     {{#if page.attributes.limited-availability}}
     <span class="status-badge status-badge--la" {{#if page.attributes.limited-availability-text}}data-tippy-content="{{page.attributes.limited-availability-text}}"{{/if}}>
       <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@@ -113,7 +116,7 @@
   {{!-- Metadata now shown in sticky bar above --}}
 </div>
 {{/unless}}
-{{#if (or page.attributes.beta page.attributes.limited-availability page.attributes.byoc page.attributes.cloud-only page.attributes.context-switcher)}}
+{{#if (or page.attributes.beta page.attributes.preview page.attributes.limited-availability page.attributes.byoc page.attributes.cloud-only page.attributes.context-switcher)}}
   <script>
   document.addEventListener("DOMContentLoaded", () => {
     const stickyHeader = document.querySelector(".component-indicator-sticky");
@@ -134,6 +137,18 @@
         appendTo: () => document.body,
       });
     }
+    const previewBadge = stickyHeader?.querySelector(".status-badge--preview");
+    if (previewBadge) {
+      tippy(previewBadge, {
+        content: previewBadge.dataset.tippyContent,
+        animation: "scale",
+        theme: "redpanda-term",
+        touch: "hold",
+        interactive: true,
+        allowHTML: true,
+        appendTo: () => document.body,
+      });
+    }
     if (navBetaBadge) {
       tippy(navBetaBadge, {
         content: "{{page.attributes.beta-text}}",

From 07dd269cefc2a57cb5d33202c75f24263b0ff89f Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Tue, 7 Jul 2026 16:05:43 -0600
Subject: [PATCH 4/8] feat: styling for Preview status pill and badge--preview
 macro badge

---
 src/css/doc.css      | 12 ++++++++++++
 src/css/metadata.css | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/css/doc.css b/src/css/doc.css
index fa97b04a..21d0c564 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -460,6 +460,12 @@ html[data-theme="dark"] .component-indicator-sticky .sm-ver-pill-caret {
   border: 1px solid #fcd34d;
 }
 
+.status-badge--preview {
+  background: #1f2937;
+  color: #f9fafb;
+  border: 1px solid #111827;
+}
+
 .status-badge--la {
   background: #ede9fe;
   color: #5b21b6;
@@ -472,6 +478,12 @@ html[data-theme="dark"] .status-badge--beta {
   border-color: rgba(251, 191, 36, 0.3);
 }
 
+html[data-theme="dark"] .status-badge--preview {
+  background: rgba(148, 163, 184, 0.15);
+  color: #cbd5e1;
+  border-color: rgba(148, 163, 184, 0.3);
+}
+
 html[data-theme="dark"] .status-badge--la {
   background: rgba(139, 92, 246, 0.15);
   color: #c4b5fd;
diff --git a/src/css/metadata.css b/src/css/metadata.css
index 637ae915..62acc637 100644
--- a/src/css/metadata.css
+++ b/src/css/metadata.css
@@ -167,6 +167,18 @@
   color: var(--beta-label-color);
 }
 
+/* Preview */
+.badge--preview {
+  color: #1f2937;
+  font-weight: bold;
+  background-color: var(--link-highlight-background-color);
+}
+
+.badge--large.badge--preview {
+  background-color: #1f2937;
+  color: #f9fafb;
+}
+
 .beta-label {
   display: inline-flex;
   margin: 0;

From 77dd0d1ce94dd303801b2d89cf525afe72bbb580 Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Tue, 7 Jul 2026 16:09:15 -0600
Subject: [PATCH 5/8] test: preview page exercising the Preview status badge

---
 preview-src/preview-status-test.adoc | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 preview-src/preview-status-test.adoc

diff --git a/preview-src/preview-status-test.adoc b/preview-src/preview-status-test.adoc
new file mode 100644
index 00000000..a1ef4d38
--- /dev/null
+++ b/preview-src/preview-status-test.adoc
@@ -0,0 +1,16 @@
+= Preview Status Test Page
+:page-preview: true
+:description: This page tests the Preview status badge in the UI preview.
+
+This page demonstrates the **Preview** status badge.
+
+== Badge locations
+
+1. **In the sticky header** below the title: a dark "Preview" pill
+2. **In the left nav**: "(Preview)" after the page title (only when a content catalog is available; may not render in the gulp preview)
+
+== Test the tooltip
+
+Hover the Preview pill. Default text:
+
+_"This feature is in preview and may change."_

From 6b1c71b9f99c2d4fb5877ccbf3a57adaff946938 Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Tue, 7 Jul 2026 16:19:16 -0600
Subject: [PATCH 6/8] fix: theme-variable colors for badge--preview dark mode;
 mention Preview in status-badge comment

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/css/metadata.css     | 6 +++---
 src/css/vars.css         | 5 +++++
 src/partials/article.hbs | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/css/metadata.css b/src/css/metadata.css
index 62acc637..171ba054 100644
--- a/src/css/metadata.css
+++ b/src/css/metadata.css
@@ -169,14 +169,14 @@
 
 /* Preview */
 .badge--preview {
-  color: #1f2937;
+  color: var(--preview-label-background);
   font-weight: bold;
   background-color: var(--link-highlight-background-color);
 }
 
 .badge--large.badge--preview {
-  background-color: #1f2937;
-  color: #f9fafb;
+  background-color: var(--preview-label-background);
+  color: var(--preview-label-color);
 }
 
 .beta-label {
diff --git a/src/css/vars.css b/src/css/vars.css
index fe4615e0..8b94408f 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -127,6 +127,8 @@ html[data-theme=dark] {
   --beta-label-color: #fff;
   --beta-label-background: var(--link-highlight-color);
   --beta-label-border: var(--slate-800);
+  --preview-label-background: #1f2937;
+  --preview-label-color: #f9fafb;
   --limited-availability-label-color: #fff;
   --limited-availability-label-background: var(--default-header-color);
   --limited-availability-label-border: var(--amber-800);
@@ -196,6 +198,9 @@ html[data-theme=dark] {
   --byoc-label-color: #101828;
   --byoc-label-background: #4da8da;
   --byoc-highlight-background-color: rgba(77, 168, 218, 0.15);
+  /* Preview badge - dark mode */
+  --preview-label-background: #cbd5e1;
+  --preview-label-color: #1f2937;
   /* Cloud badge - brighter purple for dark mode visibility with dark text for contrast */
   --cloud-label-color: #101828;
   --cloud-label-background: #9d97ff;
diff --git a/src/partials/article.hbs b/src/partials/article.hbs
index 8f22a0aa..936dcdf7 100644
--- a/src/partials/article.hbs
+++ b/src/partials/article.hbs
@@ -24,7 +24,7 @@
     </div>
     {{/with}}
     {{> version-selector}}
-    {{!-- Status badges: Beta, Limited Availability --}}
+    {{!-- Status badges: Beta, Preview, Limited Availability --}}
     {{#if page.attributes.beta}}
     <span class="status-badge status-badge--beta" data-tippy-content="{{#if page.attributes.beta-text}}{{page.attributes.beta-text}}{{else}}This feature is in beta and may change.{{/if}}">beta</span>
     {{/if}}

From acde98d44575d5f4ebfbe7527370c4bbdacdade8 Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Wed, 8 Jul 2026 08:30:19 -0600
Subject: [PATCH 7/8] test: add Preview Status Test page to the preview nav
 tree

---
 preview-src/ui-model.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index 740c3faf..ab0bf31c 100644
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -451,6 +451,9 @@ page:
       - content: Limited Availability Test
         url: /streaming/24.3/limited-availability-test.html
         urlType: internal
+      - content: Preview Status Test
+        url: /preview-status-test.html
+        urlType: internal
     - content: Dev Tools
       url: '#'
       urlType: internal

From 4c004893476cf266ed0271b929c89daee09998d3 Mon Sep 17 00:00:00 2001
From: micheleRP <michele@redpanda.com>
Date: Wed, 8 Jul 2026 10:07:10 -0600
Subject: [PATCH 8/8] test: move status-badge test pages under Quickstart and
 fix LA test link

Quickstart is expanded by default, so the Preview Status Test and
Limited Availability Test pages are easier to find there. Also corrects
the Limited Availability Test URL, which pointed at /streaming/24.3/
while the page is served at the site root.
---
 preview-src/ui-model.yml | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml
index ab0bf31c..38a5c01f 100644
--- a/preview-src/ui-model.yml
+++ b/preview-src/ui-model.yml
@@ -232,6 +232,12 @@ page:
       - content: Home page
         url: /streaming/24.3/home.html
         urlType: internal
+      - content: Limited Availability Test
+        url: /limited-availability-test.html
+        urlType: internal
+      - content: Preview Status Test
+        url: /preview-status-test.html
+        urlType: internal
     - content: Get Started
       url: '#'
       urlType: internal
@@ -448,12 +454,6 @@ page:
       - content: Data Loss Prevention
         url: '#'
         urlType: internal
-      - content: Limited Availability Test
-        url: /streaming/24.3/limited-availability-test.html
-        urlType: internal
-      - content: Preview Status Test
-        url: /preview-status-test.html
-        urlType: internal
     - content: Dev Tools
       url: '#'
       urlType: internal