From d2e54ab83d232b7d8ed894d2383a85e4a6bc1520 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 5 Jun 2026 16:36:34 +0200
Subject: [PATCH 1/4] sbx-cli: render experimental indicators for commands and
 flags

Mirrors the Docker CLI layout: commands with experimental: true get a
magenta callout block, experimental flags get an amber badge in the
options tables, and experimental subcommands get the badge in the
Commands table.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/sbx-cli.html | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/layouts/sbx-cli.html b/layouts/sbx-cli.html
index 0b10f5e0fa6a..a8da28e9b6cb 100644
--- a/layouts/sbx-cli.html
+++ b/layouts/sbx-cli.html
@@ -28,6 +28,22 @@ <h1>{{ .Title }}</h1>
       </table>
     </div>
 
+    {{- /* Experimental callout (command-level) */ -}}
+    {{ if $data.experimental }}
+      <div class="px-4 border-l-2 border-l-magenta-light dark:border-l-magenta-dark">
+        <p class="not-prose flex gap-2 items-center text-magenta-light dark:text-magenta-dark">
+          <span class="icon-svg pb-1">{{ partialCached "icon" "beaker" "beaker" }}</span>
+          <strong>{{ i18n "experimental" }}</strong>
+        </p>
+        <p><strong>This command is experimental.</strong></p>
+        <p>
+          Experimental features are intended for testing and feedback as their
+          functionality or design may change between releases without warning or
+          can be removed entirely in a future release.
+        </p>
+      </div>
+    {{ end }}
+
     {{- /* Description */ -}}
     {{ with $data.description }}
       {{ $heading := dict "level" 2 "text" "Description" }}
@@ -54,7 +70,12 @@ <h1>{{ .Title }}</h1>
               {{ $child := index hugo.Data.sbx_cli .Params.datafile }}
               <tr>
                 <td class="text-left"><a class="link" href="{{ .Permalink }}"><code>{{ .Title }}</code></a></td>
-                <td class="text-left">{{ $child.synopsis }}</td>
+                <td class="text-left">
+                  {{ if $child.experimental }}
+                    {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental") "sbx-exp" }}
+                  {{ end }}
+                  {{ $child.synopsis }}
+                </td>
               </tr>
             {{ end }}
           {{ end }}
@@ -91,6 +112,9 @@ <h1>{{ .Title }}</h1>
                     {{ end }}
                   </td>
                   <td>
+                    {{ with .experimental }}
+                      {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental") "sbx-exp" }}
+                    {{ end }}
                     {{ with .usage }}
                       {{ strings.TrimSpace . }}
                     {{ end }}
@@ -132,6 +156,9 @@ <h1>{{ .Title }}</h1>
                     {{ end }}
                   </td>
                   <td>
+                    {{ with .experimental }}
+                      {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental") "sbx-exp" }}
+                    {{ end }}
                     {{ with .usage }}
                       {{ strings.TrimSpace . }}
                     {{ end }}

From 615fd67563df22429ec5c207e02243410f1c94da Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 5 Jun 2026 16:41:02 +0200
Subject: [PATCH 2/4] sbx-cli: use violet badge color and fix badge/text
 spacing

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/sbx-cli.html | 38 ++++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/layouts/sbx-cli.html b/layouts/sbx-cli.html
index a8da28e9b6cb..77c59e9e47ca 100644
--- a/layouts/sbx-cli.html
+++ b/layouts/sbx-cli.html
@@ -71,10 +71,12 @@ <h1>{{ .Title }}</h1>
               <tr>
                 <td class="text-left"><a class="link" href="{{ .Permalink }}"><code>{{ .Title }}</code></a></td>
                 <td class="text-left">
-                  {{ if $child.experimental }}
-                    {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental") "sbx-exp" }}
-                  {{ end }}
-                  {{ $child.synopsis }}
+                  <span class="inline-flex items-center gap-2">
+                    {{ if $child.experimental }}
+                      {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+                    {{ end }}
+                    {{ $child.synopsis }}
+                  </span>
                 </td>
               </tr>
             {{ end }}
@@ -112,12 +114,14 @@ <h1>{{ .Title }}</h1>
                     {{ end }}
                   </td>
                   <td>
-                    {{ with .experimental }}
-                      {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental") "sbx-exp" }}
-                    {{ end }}
-                    {{ with .usage }}
-                      {{ strings.TrimSpace . }}
-                    {{ end }}
+                    <span class="inline-flex items-center gap-2">
+                      {{ with .experimental }}
+                        {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+                      {{ end }}
+                      {{ with .usage }}
+                        {{ strings.TrimSpace . }}
+                      {{ end }}
+                    </span>
                   </td>
                 </tr>
               {{ end }}
@@ -156,12 +160,14 @@ <h1>{{ .Title }}</h1>
                     {{ end }}
                   </td>
                   <td>
-                    {{ with .experimental }}
-                      {{ partialCached "components/badge.html" (dict "color" "amber" "content" "experimental") "sbx-exp" }}
-                    {{ end }}
-                    {{ with .usage }}
-                      {{ strings.TrimSpace . }}
-                    {{ end }}
+                    <span class="inline-flex items-center gap-2">
+                      {{ with .experimental }}
+                        {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+                      {{ end }}
+                      {{ with .usage }}
+                        {{ strings.TrimSpace . }}
+                      {{ end }}
+                    </span>
                   </td>
                 </tr>
               {{ end }}

From 171a0bed011d5d459da057cc71062d3d70bdd369 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 5 Jun 2026 16:54:27 +0200
Subject: [PATCH 3/4] sbx-cli: add experimental badge next to page title

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/sbx-cli.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/layouts/sbx-cli.html b/layouts/sbx-cli.html
index 77c59e9e47ca..621742ef4d1d 100644
--- a/layouts/sbx-cli.html
+++ b/layouts/sbx-cli.html
@@ -6,6 +6,9 @@
     {{ partial "breadcrumbs.html" . }}
     <div class="flex items-start justify-between gap-4">
       <h1>{{ .Title }}</h1>
+      {{ if $data.experimental }}
+        {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+      {{ end }}
     </div>
 
     {{- /* Summary table */ -}}

From 40e3e0ac2be14f26bc2f623c609afcd618b0c6f7 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 5 Jun 2026 16:56:04 +0200
Subject: [PATCH 4/4] sbx-cli: move experimental badge inside h1 for inline
 alignment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 layouts/sbx-cli.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/layouts/sbx-cli.html b/layouts/sbx-cli.html
index 621742ef4d1d..d5df812bc595 100644
--- a/layouts/sbx-cli.html
+++ b/layouts/sbx-cli.html
@@ -5,10 +5,12 @@
   <article class="prose min-w-0 max-w-4xl dark:prose-invert">
     {{ partial "breadcrumbs.html" . }}
     <div class="flex items-start justify-between gap-4">
-      <h1>{{ .Title }}</h1>
-      {{ if $data.experimental }}
-        {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
-      {{ end }}
+      <h1 class="inline-flex items-baseline gap-3">
+        {{ .Title }}
+        {{ if $data.experimental }}
+          {{ partialCached "components/badge.html" (dict "color" "violet" "content" "experimental") "sbx-exp" }}
+        {{ end }}
+      </h1>
     </div>
 
     {{- /* Summary table */ -}}