@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/showcases/ShowcaseLayout.tsx

@@ -1,62 +1,136 @@
+/**
+ * Marco de las páginas de componente del sandbox (`#ui-system/<grupo>/<item>`):
+ * cabecera de la hoja, vitrina interactiva (vista previa / código), panel de
+ * propiedades y documentación, y galería de variaciones.
+ *
+ * Sigue `DESIGN.md` (AXZY Console): el bloque lo separan filetes de 1px, no
+ * cajas dentro de cajas; los controles vienen del kit compartido
+ * (`@/sandbox/ui` y `@/sandbox/controls`) para que el marco no introduzca
+ * colores que no pasan AA.
+ */
+
 import React, { useState } from "react";
-import { FaCheck, FaCopy, FaBookOpen, FaCog, FaCode, FaEye } from "react-icons/fa";
+import { FaBookOpen, FaCheck, FaCode, FaCog, FaCopy, FaEye } from "react-icons/fa";
 import ITGrid from "../components/atoms/grid/grid";
 import { useITTheme } from "../components/theme-provider/themeProvider";
+import { ControlSegmentado } from "@/sandbox/controls";
+import { EYEBROW, FILETE, FOCO_CTA } from "@/sandbox/ui";
+import { useITTranslation } from "@/i18n";
 
+/**
+ * Bloque de código con botón de copiar. Fondo tinta, mono y el acento de señal
+ * (`cyan-400`) reservado a la etiqueta, como manda el spec.
+ *
+ * @example
+ * ```tsx
+ * <CodeViewer code={`<ITButton>Guardar</ITButton>`} compact />
+ * ```
+ */
 export const CodeViewer: React.FC<{ code: string; compact?: boolean }> = ({ code, compact }) => {
+  const { t } = useITTranslation();
   const [copied, setCopied] = useState(false);
+
   const handleCopy = () => {
-    navigator.clipboard.writeText(code);
+    navigator.clipboard?.writeText(code);
     setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
+    window.setTimeout(() => setCopied(false), 2000);
   };
+
   return (
-    <div className="relative rounded-xl overflow-hidden bg-slate-950 text-slate-200 border border-slate-800 shadow-inner">
-      <div className="flex justify-between items-center px-4 py-2 bg-slate-900 border-b border-slate-800">
-        <span className="text-[10px] uppercase font-bold tracking-wider text-slate-400 font-mono">JSX Code</span>
+    <div className="relative overflow-hidden rounded-[10px] border border-slate-800 bg-slate-950 text-slate-200">
+      <div className="flex items-center justify-between border-b border-slate-800 px-4 py-2.5">
+        <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-cyan-400">
+          {t("showcase.layout.jsxCode")}
+        </span>
         <button
+          type="button"
           onClick={handleCopy}
-          className="text-slate-400 hover:text-white transition-colors flex items-center gap-1.5 text-xs py-1 px-2 rounded hover:bg-slate-800"
+          className={`flex items-center gap-1.5 rounded-[6px] px-2 py-1 font-mono text-[10px] uppercase tracking-[0.12em] text-slate-400 transition-colors hover:bg-slate-800 hover:text-white ${FOCO_CTA}`}
         >
-          {copied ? <FaCheck size={11} className="text-emerald-500" /> : <FaCopy size={11} />}
-          <span>{copied ? "Copied!" : "Copy"}</span>
+          {copied ? <FaCheck size={11} className="text-cyan-400" /> : <FaCopy size={11} />}
+          <span>{copied ? t("showcase.layout.copied") : t("showcase.layout.copy")}</span>
         </button>
       </div>
-      <pre className={`p-4 text-xs font-mono overflow-x-auto leading-relaxed whitespace-pre-wrap ${compact ? "max-h-[420px]" : ""} overflow-y-auto`}>
+      <pre
+        className={`overflow-x-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed ${
+          compact ? "max-h-[420px]" : ""
+        } overflow-y-auto`}
+      >
         <code>{code}</code>
       </pre>
     </div>
   );
 };
 
+/** Una fila de la tabla de props. */
 export interface PropDocEntry {
+  /** Nombre del prop. */
   name: string;
+  /** Tipo TypeScript. */
   type: string;
+  /** Valor por defecto. */
   default?: string;
+  /** Descripción para el panel de documentación. */
   description: string;
+  /** Marca el prop como obligatorio. */
   required?: boolean;
 }
 
+/** Documentación de un componente, si el showcase la declara. */
 export interface ComponentDoc {
+  /** Resumen de una línea. */
   summary: string;
+  /** Descripción larga opcional. */
   description?: string;
+  /** Ejemplos de uso (código). */
   examples?: string[];
+  /** Tabla de props. */
   props: PropDocEntry[];
+  /** Notas al pie. */
   notes?: string[];
 }
 
+/** Props de `ShowcaseLayout`. */
 export interface ShowcaseLayoutProps {
+  /** Nombre del componente. */
   title: string;
+  /** Descripción corta bajo el título. */
   description: string;
+  /** Demo interactiva. */
   demo: React.ReactNode;
-  controls: React.ReactNode;
+  /**
+   * Panel de controles (lo construye cada showcase). Si se omite, la vitrina
+   * ocupa todo el ancho y no se pinta panel: para páginas que solo muestran un
+   * ejemplo o una receta.
+   */
+  controls?: React.ReactNode;
+  /** Código fuente que se muestra en la pestaña de código. */
   code: string;
+  /** Galería de variaciones y estados. */
   gallery?: React.ReactNode;
+  /** Documentación opcional (añade la pestaña "Docs"). */
   doc?: ComponentDoc;
+  /**
+   * Ancho de la vitrina. `"columna"` (por defecto) la deja en 8/12 columnas con
+   * el panel al lado; `"completo"` la lleva a las 12 y baja el panel, para demos
+   * que son un layout entero (ITLayout, pantallas de ejemplo) y se recortaban.
+   * @default "columna"
+   */
+  demoAncho?: "columna" | "completo";
 }
 
 type SandboxView = "preview" | "code";
 
+/**
+ * Página de un componente del sandbox: cabecera, vitrina con vista previa y
+ * código, panel lateral de propiedades/documentación y galería.
+ *
+ * @example
+ * ```tsx
+ * <ShowcaseLayout title="ITButton" description="…" demo={<ITButton>Guardar</ITButton>}
+ *   controls={<ITSelect … />} code={code} gallery={<Gallery />} doc={doc} />
+ * ```
+ */
 export const ShowcaseLayout: React.FC<ShowcaseLayoutProps> = ({
   title,
   description,
@@ -64,238 +138,218 @@ export const ShowcaseLayout: React.FC<ShowcaseLayoutProps> = ({
   controls,
   code,
   gallery,
-  doc
+  doc,
+  demoAncho = "columna",
 }) => {
+  const completo = demoAncho === "completo";
+  const { t } = useITTranslation();
   const { resolvedTheme } = useITTheme();
-  const [activeTab, setActiveTab] = useState<"controls" | "docs">("controls");
+  const [activeTab, setActiveTab] = useState<"controls" | "docs">(controls ? "controls" : "docs");
   const [sandboxView, setSandboxView] = useState<SandboxView>("preview");
-  return (
-    <div className="space-y-6 animate-fadeIn">
-      {/* Title block */}
-      <div className="flex flex-col md:flex-row md:items-start justify-between gap-4">
-        <div className="flex-1 min-w-0">
-          <h1 className="text-3xl font-extrabold text-slate-800 dark:text-white tracking-tight flex items-center gap-3">
-            {title}
-          </h1>
-          <p className="text-slate-500 dark:text-slate-400 mt-1.5 text-sm md:text-base">{description}</p>
-        </div>
+  // Sin controles la vitrina se queda con todo el ancho.
+  const hayPanel = Boolean(controls) || Boolean(doc);
 
+  return (
+    <div className="animate-fadeIn pb-4">
+      {/* ─── CABECERA DE LA HOJA ─── */}
+      <header className={`border-b pb-7 ${FILETE}`}>
+        <p className={EYEBROW}>{t("showcase.layout.eyebrow")}</p>
+        <h1 className="mt-2.5 font-display text-[32px] font-bold tracking-[-0.02em] text-slate-900 dark:text-white sm:text-[40px]">
+          {title}
+        </h1>
+        <p className="mt-3 max-w-[70ch] text-[15px] leading-relaxed text-slate-600 dark:text-slate-300">
+          {description}
+        </p>
+      </header>
 
-      </div>
+      <div className="pt-8">
+        <ITGrid container columns={12} spacing={8}>
+          {/* ── VITRINA ── */}
+          <ITGrid item xs={12} md={completo || !hayPanel ? 12 : 8}>
+            <section
+              aria-label={t("showcase.layout.sandbox")}
+              className={`overflow-hidden rounded-[10px] border ${FILETE}`}
+            >
+              {/* Barra de la vitrina */}
+              <div className={`flex flex-wrap items-center justify-between gap-3 border-b px-4 py-2.5 ${FILETE}`}>
+                <h2 className={EYEBROW}>{t("showcase.layout.sandbox")}</h2>
 
-      <ITGrid container columns={12} spacing={6}>
-        {/* ── MAIN: Unified Sandbox (Preview / Code tabs) ── */}
-        <ITGrid item as="main" xs={12} md={8} className="space-y-4">
-          {/* Unified Sandbox */}
-          <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
-            {/* Sandbox header */}
-            <div className="flex items-center justify-between px-4 py-2 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50">
-              <div className="flex items-center gap-2">
-                <span className="w-2 h-2 rounded-full bg-red-400" />
-                <span className="w-2 h-2 rounded-full bg-amber-400" />
-                <span className="w-2 h-2 rounded-full bg-emerald-400" />
-                <span className="ml-2 text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">
-                  Interactive Sandbox
-                </span>
+                <ControlSegmentado
+                  etiqueta={t("showcase.layout.sandbox")}
+                  valor={sandboxView}
+                  onChange={(value) => setSandboxView(value === "code" ? "code" : "preview")}
+                  opciones={[
+                    {
+                      value: "preview",
+                      label: t("showcase.layout.preview"),
+                      icono: <FaEye size={10} />,
+                    },
+                    { value: "code", label: t("showcase.layout.code"), icono: <FaCode size={10} /> },
+                  ]}
+                />
               </div>
 
-              {/* View toggle: Preview / Code */}
-              <div className="flex items-center gap-1 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 p-0.5 rounded-lg">
-                <button
-                  onClick={() => setSandboxView("preview")}
-                  className={`flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-semibold rounded-md transition-all ${
-                    sandboxView === "preview"
-                      ? "bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300"
-                      : "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
-                  }`}
-                >
-                  <FaEye size={10} />
-                  Preview
-                </button>
-                <button
-                  onClick={() => setSandboxView("code")}
-                  className={`flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-semibold rounded-md transition-all ${
-                    sandboxView === "code"
-                      ? "bg-primary-100 dark:bg-primary-900/40 text-primary-700 dark:text-primary-300"
-                      : "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
-                  }`}
+              {/* Contenido */}
+              {sandboxView === "preview" ? (
+                <div
+                  data-theme={resolvedTheme}
+                  className="flex min-h-[280px] items-center justify-center overflow-x-auto bg-white p-6 dark:bg-slate-950 md:p-10"
                 >
-                  <FaCode size={10} />
-                  Code
-                </button>
-              </div>
-            </div>
-
-            {/* Sandbox content */}
-            {sandboxView === "preview" ? (
-              <div
-                data-theme={resolvedTheme}
-                className="p-6 md:p-10 min-h-[320px] flex items-center justify-center transition-all duration-300 bg-white dark:bg-slate-950"
-              >
-                <div className="w-full flex justify-center">{demo}</div>
-              </div>
-            ) : (
-              <div className="p-3 bg-slate-50 dark:bg-slate-800/50">
-                <CodeViewer code={code} compact />
-              </div>
-            )}
-          </div>
-        </ITGrid>
-
-        {/* ── RIGHT SIDEBAR: Configs / Docs ── */}
-        <ITGrid item as="aside" xs={12} md={4}>
-          <div className="md:sticky md:top-4">
-            <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
-              {/* Tab bar */}
-              {doc ? (
-                <div className="flex border-b border-slate-200 dark:border-slate-700">
-                  <button
-                    onClick={() => setActiveTab("controls")}
-                    className={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold transition-colors ${
-                      activeTab === "controls"
-                        ? "text-primary-600 border-b-2 border-primary-600 bg-primary-50/40 dark:bg-primary-950/20 dark:text-primary-400 dark:border-primary-400"
-                        : "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
-                    }`}
-                  >
-                    <FaCog size={11} />
-                    Properties
-                  </button>
-                  <button
-                    onClick={() => setActiveTab("docs")}
-                    className={`flex-1 flex items-center justify-center gap-1.5 py-2.5 text-xs font-semibold transition-colors ${
-                      activeTab === "docs"
-                        ? "text-primary-600 border-b-2 border-primary-600 bg-primary-50/40 dark:bg-primary-950/20 dark:text-primary-400 dark:border-primary-400"
-                        : "text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
-                    }`}
-                  >
-                    <FaBookOpen size={11} />
-                    Docs
-                  </button>
+                  <div className="flex w-full justify-center">{demo}</div>
                 </div>
-              ) : null}
-
-              {/* Controls Tab */}
-              {activeTab === "controls" && (
-                <div className="p-4 space-y-4 max-h-[calc(100vh-160px)] overflow-y-auto">
-                  <div className="space-y-4">{controls}</div>
+              ) : (
+                <div className="p-3">
+                  <CodeViewer code={code} compact />
                 </div>
               )}
+            </section>
+          </ITGrid>
 
-              {/* Documentation Tab */}
-              {doc && activeTab === "docs" && (
-                <div className="p-4 space-y-5 max-h-[calc(100vh-160px)] overflow-y-auto">
-                  {/* Description */}
-                  <div>
-                    <h3 className="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">
-                      Overview
-                    </h3>
-                    <p className="text-xs text-slate-700 dark:text-slate-300 leading-relaxed">
-                      {doc.summary}
-                    </p>
-                    {doc.description && (
-                      <p className="text-[11px] text-slate-500 dark:text-slate-400 leading-relaxed mt-2">
-                        {doc.description}
-                      </p>
-                    )}
+          {/* ── PANEL LATERAL ── */}
+          {hayPanel && (
+          <ITGrid item xs={12} md={completo ? 12 : 4}>
+            <div className={completo ? "" : "md:sticky md:top-4"}>
+              <section
+                aria-label={t("showcase.layout.properties")}
+                className={`overflow-hidden rounded-[10px] border ${FILETE} ${
+                  completo ? "max-w-[880px]" : ""
+                }`}
+              >
+                {doc ? (
+                  <div
+                    role="tablist"
+                    aria-label={t("showcase.layout.properties")}
+                    className={`flex items-stretch gap-1 border-b px-2 ${FILETE}`}
+                  >
+                    {(
+                      [
+                        { id: "controls", label: t("showcase.layout.properties"), icono: <FaCog size={10} /> },
+                        { id: "docs", label: t("showcase.layout.docs"), icono: <FaBookOpen size={10} /> },
+                      ] as const
+                    ).map((tab) => {
+                      const activa = activeTab === tab.id;
+                      return (
+                        <button
+                          key={tab.id}
+                          type="button"
+                          role="tab"
+                          aria-selected={activa}
+                          onClick={() => setActiveTab(tab.id)}
+                          className={`-mb-px inline-flex items-center gap-2 border-b-2 px-3 py-2.5 font-mono text-[10px] font-medium uppercase tracking-[0.14em] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/60 ${
+                            activa
+                              ? "border-primary-700 text-primary-700 dark:border-primary-500 dark:text-primary-500"
+                              : "border-transparent text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white"
+                          }`}
+                        >
+                          {tab.icono}
+                          {tab.label}
+                        </button>
+                      );
+                    })}
                   </div>
+                ) : null}
 
-                  {/* Props Table */}
-                  <div>
-                    <h3 className="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">
-                      Props
-                    </h3>
-                    <div className="overflow-x-auto rounded-lg border border-slate-200 dark:border-slate-700">
-                      <table className="w-full text-[11px]">
-                        <thead>
-                          <tr className="bg-slate-50 dark:bg-slate-800">
-                            <th className="text-left px-2 py-1.5 font-semibold text-slate-600 dark:text-slate-300 whitespace-nowrap">Prop</th>
-                            <th className="text-left px-2 py-1.5 font-semibold text-slate-600 dark:text-slate-300 whitespace-nowrap">Type</th>
-                            <th className="text-left px-2 py-1.5 font-semibold text-slate-600 dark:text-slate-300 whitespace-nowrap">Default</th>
-                          </tr>
-                        </thead>
-                        <tbody>
-                          {doc.props.map((prop, i) => (
-                            <tr
-                              key={prop.name}
-                              className={`border-t border-slate-100 dark:border-slate-800 ${
-                                i % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-slate-50/50 dark:bg-slate-800/50"
-                              }`}
-                            >
-                              <td className="px-2 py-1.5 font-mono font-semibold text-primary-700 dark:text-primary-400 whitespace-nowrap">
-                                {prop.name}
-                                {prop.required ? <span className="text-danger-500 ml-0.5">*</span> : null}
-                              </td>
-                              <td className="px-2 py-1.5 font-mono text-slate-600 dark:text-slate-400 text-[10px]">
-                                {prop.type}
-                              </td>
-                              <td className="px-2 py-1.5 font-mono text-slate-400 dark:text-slate-500 text-[10px]">
-                                {prop.default || "—"}
-                              </td>
-                            </tr>
-                          ))}
-                        </tbody>
-                      </table>
-                    </div>
-                    {/* Detailed descriptions below the compact table */}
-                    <div className="mt-2 space-y-1.5">
-                      {doc.props.map((prop) => (
-                        <div key={prop.name} className="text-[11px]">
-                          <span className="font-mono font-semibold text-primary-700 dark:text-primary-400">{prop.name}</span>
-                          <span className="text-slate-500 dark:text-slate-400"> — {prop.description}</span>
-                        </div>
-                      ))}
-                    </div>
+                {activeTab === "controls" && (
+                  <div
+                    className={`max-h-[calc(100vh-200px)] space-y-4 overflow-y-auto p-5 ${
+                      completo ? "it-panel-ancho max-w-[880px]" : ""
+                    }`}
+                  >
+                    {controls}
                   </div>
+                )}
 
-                  {/* Usage Examples */}
-                  {doc.examples && doc.examples.length > 0 && (
+                {doc && activeTab === "docs" && (
+                  <div
+                    className={`max-h-[calc(100vh-200px)] space-y-6 overflow-y-auto p-5 ${
+                      completo ? "it-panel-ancho max-w-[880px]" : ""
+                    }`}
+                  >
                     <div>
-                      <h3 className="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">
-                        Usage Examples
-                      </h3>
-                      {doc.examples.map((example, i) => (
-                        <div key={i} className="mb-2 last:mb-0">
-                          <pre className="p-2 rounded-lg bg-slate-950 text-slate-200 text-[10px] font-mono overflow-x-auto leading-relaxed">
-                            <code>{example}</code>
-                          </pre>
-                        </div>
-                      ))}
+                      <h2 className={EYEBROW}>{t("showcase.layout.overview")}</h2>
+                      <p className="mt-2.5 text-[13px] leading-relaxed text-slate-700 dark:text-slate-300">
+                        {doc.summary}
+                      </p>
+                      {doc.description && (
+                        <p className="mt-2 text-[12px] leading-relaxed text-slate-500 dark:text-slate-400">
+                          {doc.description}
+                        </p>
+                      )}
                     </div>
-                  )}
 
-                  {/* Notes */}
-                  {doc.notes && doc.notes.length > 0 && (
                     <div>
-                      <h3 className="text-[10px] font-bold uppercase tracking-wider text-slate-400 dark:text-slate-500 mb-2">
-                        Notes
-                      </h3>
-                      <ul className="space-y-1">
-                        {doc.notes.map((note, i) => (
-                          <li key={i} className="text-[11px] text-slate-600 dark:text-slate-400 flex items-start gap-2">
-                            <span className="text-primary-500 mt-0.5 shrink-0">•</span>
-                            <span>{note}</span>
-                          </li>
+                      <h2 className={EYEBROW}>{t("showcase.layout.props")}</h2>
+                      <dl className={`mt-3 border-t ${FILETE}`}>
+                        {doc.props.map((prop) => (
+                          <div key={prop.name} className={`border-b py-3 ${FILETE}`}>
+                            <dt className="flex flex-wrap items-baseline gap-x-2 font-mono text-[11px] font-semibold text-primary-700 dark:text-primary-500">
+                              {prop.name}
+                              {prop.required ? (
+                                <span className="text-danger-500" title={t("showcase.common.required")}>
+                                  *
+                                </span>
+                              ) : null}
+                              <span className="font-mono text-[10px] font-normal text-slate-500 dark:text-slate-400">
+                                {prop.type}
+                              </span>
+                              <span className="font-mono text-[10px] font-normal text-slate-500 dark:text-slate-400">
+                                {`= ${prop.default || "—"}`}
+                              </span>
+                            </dt>
+                            <dd className="mt-1.5 text-[12px] leading-relaxed text-slate-600 dark:text-slate-300">
+                              {prop.description}
+                            </dd>
+                          </div>
                         ))}
-                      </ul>
+                      </dl>
                     </div>
-                  )}
-                </div>
-              )}
+
+                    {doc.examples && doc.examples.length > 0 && (
+                      <div>
+                        <h2 className={EYEBROW}>{t("showcase.layout.usageExamples")}</h2>
+                        <div className="mt-3 space-y-2">
+                          {doc.examples.map((example, i) => (
+                            <pre
+                              key={i}
+                              className="overflow-x-auto rounded-[10px] border border-slate-800 bg-slate-950 p-3 font-mono text-[10px] leading-relaxed text-slate-200"
+                            >
+                              <code>{example}</code>
+                            </pre>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {doc.notes && doc.notes.length > 0 && (
+                      <div>
+                        <h2 className={EYEBROW}>{t("showcase.layout.notes")}</h2>
+                        <ul className={`mt-3 border-t ${FILETE}`}>
+                          {doc.notes.map((note, i) => (
+                            <li
+                              key={i}
+                              className={`border-b py-2.5 text-[12px] leading-relaxed text-slate-600 dark:text-slate-300 ${FILETE}`}
+                            >
+                              {note}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </section>
             </div>
-          </div>
+          </ITGrid>
+          )}
         </ITGrid>
-      </ITGrid>
+      </div>
 
-      {/* Gallery */}
+      {/* ─── GALERÍA ─── */}
       {gallery && (
-        <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm overflow-hidden">
-          <div className="px-4 py-2 border-b border-slate-200 dark:border-slate-700">
-            <span className="text-[10px] font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400">Variations & States (Gallery)</span>
-          </div>
-          <div className="p-4">
-            {gallery}
-          </div>
-        </div>
+        <section className={`mt-12 border-t pt-8 ${FILETE}`} aria-label={t("showcase.layout.gallery")}>
+          <h2 className={EYEBROW}>{t("showcase.layout.gallery")}</h2>
+          <div className="mt-5">{gallery}</div>
+        </section>
       )}
     </div>
   );