@axzydev/axzy_ui_system 1.5.0 → 1.5.1

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/dev.css

@@ -116,19 +116,3 @@ html {
     animation: none;
   }
 }
-
-/* ──────────────────────────────────────────────
-   PANEL DE PROPIEDADES A ANCHO COMPLETO (dev.css)
-   Cuando la vitrina ocupa las 12 columnas, las filas `justify-between` de los
-   controles dejaban la etiqueta a un lado y el control a 800px del otro. Aquí
-   el control se agrupa junto a su etiqueta.
-   ────────────────────────────────────────────── */
-.it-panel-ancho .justify-between {
-  justify-content: flex-start;
-  gap: 0.75rem;
-}
-
-/* Las notas del panel no se estiran a 100+ caracteres por línea. */
-.it-panel-ancho p {
-  max-width: 72ch;
-}

package/src/sandbox/i18n.ts

@@ -72,6 +72,11 @@ export const sandboxMessages: ITMessagesByLocale = {
     "showcase.layout.docs": "Documentación",
     "showcase.layout.eyebrow": "Vitrina de componentes",
     "showcase.layout.gallery": "Variaciones y estados (Galería)",
+    "showcase.layout.galleryTitle": "Variaciones y estados",
+    "showcase.layout.viewCode": "Código",
+    "showcase.layout.hideCode": "Ocultar",
+    "showcase.layout.controls": "Controles",
+    "showcase.layout.api": "API del componente",
     "showcase.layout.jsxCode": "Código JSX",
     "showcase.layout.notes": "Notas",
     "showcase.layout.overview": "Descripción general",
@@ -1013,6 +1018,11 @@ export const sandboxMessages: ITMessagesByLocale = {
     "showcase.layout.docs": "Docs",
     "showcase.layout.eyebrow": "Component showcase",
     "showcase.layout.gallery": "Variations & States (Gallery)",
+    "showcase.layout.galleryTitle": "Variations & states",
+    "showcase.layout.viewCode": "Code",
+    "showcase.layout.hideCode": "Hide",
+    "showcase.layout.controls": "Controls",
+    "showcase.layout.api": "Component API",
     "showcase.layout.jsxCode": "JSX Code",
     "showcase.layout.notes": "Notes",
     "showcase.layout.overview": "Overview",

package/src/sandbox/ui.tsx

@@ -13,7 +13,7 @@
  */
 
 import { useState, type ReactNode } from "react";
-import { FaCheck, FaCopy } from "react-icons/fa";
+import { FaCheck, FaCode, FaCopy } from "react-icons/fa";
 import { useITTranslation } from "@/i18n";
 
 /** Eyebrow mono apagado: encabezados de sección y etiquetas de metadato. */
@@ -367,6 +367,7 @@ export const BloqueCodigo = ({
       />
     </div>
     <pre
+      tabIndex={0}
       className={`overflow-x-auto whitespace-pre-wrap p-4 font-mono text-xs leading-relaxed text-slate-200 ${
         compact ? "max-h-[420px] overflow-y-auto" : ""
       }`}
@@ -375,3 +376,99 @@ export const BloqueCodigo = ({
     </pre>
   </div>
 );
+
+/** Props de `EjemploContenedor`. */
+export interface EjemploContenedorProps {
+  /** Número del ejemplo (`01`, `02`…). Opcional. */
+  numero?: string;
+  /** Título del ejemplo (mono, mayúsculas). */
+  titulo: string;
+  /** El demo. */
+  children: ReactNode;
+  /** Código fuente del ejemplo: si se pasa, aparece el botón «Código». */
+  codigo?: string;
+  /** Nota al pie, bajo el demo. */
+  nota?: string;
+  /** Superficie del demo sin padding (layouts completos). */
+  sangrado?: boolean;
+  /** Clases extra de la superficie del demo. */
+  className?: string;
+}
+
+/**
+ * Contenedor de un ejemplo del sandbox: cabecera con número, título y la acción
+ * de ver el código (siempre visible), superficie del demo y nota opcional. El
+ * código se despliega **dentro** del mismo contenedor, no en una pestaña aparte.
+ *
+ * @example
+ * ```tsx
+ * <EjemploContenedor numero="01" titulo="Con icono" codigo={code}>
+ *   <ITButton icon={<FaSave />}>Guardar</ITButton>
+ * </EjemploContenedor>
+ * ```
+ */
+export const EjemploContenedor = ({
+  numero,
+  titulo,
+  children,
+  codigo,
+  nota,
+  sangrado = false,
+  className = "",
+}: EjemploContenedorProps) => {
+  const { t } = useITTranslation();
+  const [verCodigo, setVerCodigo] = useState(false);
+
+  return (
+    <section className={`overflow-hidden rounded-[10px] border ${FILETE}`}>
+      <header
+        className={`flex flex-wrap items-center gap-x-3 gap-y-2 border-b bg-slate-50/70 px-4 py-2.5 dark:bg-slate-950/40 ${FILETE}`}
+      >
+        {numero && (
+          <span className="font-mono text-[10px] tabular-nums text-slate-400 dark:text-slate-500">
+            {numero}
+          </span>
+        )}
+        <h2 className="min-w-0 flex-1 truncate font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:text-slate-200">
+          {titulo}
+        </h2>
+
+        {codigo && (
+          <button
+            type="button"
+            onClick={() => setVerCodigo(!verCodigo)}
+            aria-expanded={verCodigo}
+            className={`inline-flex items-center gap-1.5 rounded-[8px] border px-2.5 py-1 font-mono text-[10px] uppercase tracking-[0.12em] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500/60 ${
+              verCodigo
+                ? "border-primary-700 text-primary-700 dark:border-primary-500 dark:text-primary-500"
+                : "border-slate-200 text-slate-500 hover:text-slate-900 dark:border-slate-700 dark:text-slate-400 dark:hover:text-white"
+            }`}
+          >
+            <FaCode size={10} />
+            {verCodigo ? t("showcase.layout.hideCode") : t("showcase.layout.viewCode")}
+          </button>
+        )}
+      </header>
+
+      <div
+        className={`bg-white dark:bg-slate-950 ${sangrado ? "" : "p-5 sm:p-6"} ${className}`}
+      >
+        {children}
+      </div>
+
+      {nota && (
+        <p
+          className={`border-t px-4 py-2.5 font-mono text-[11px] leading-relaxed text-slate-500 dark:text-slate-400 ${FILETE}`}
+        >
+          {nota}
+        </p>
+      )}
+
+      {codigo && verCodigo && (
+        <div className={`border-t p-3 ${FILETE}`}>
+          <BloqueCodigo code={codigo} compact />
+        </div>
+      )}
+    </section>
+  );
+};

package/src/showcases/DataShowcases.tsx

@@ -418,7 +418,7 @@ export const TableShowcase = () => {
       gallery={
         <div className="space-y-6">
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCustomCardsHover")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryCustomCardsHover")}</h3>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
               {TABLE_DATA.slice(0, 4).map((row, i) => {
                 const initials = (row.name as string).split(" ").map((w: string) => w[0]).join("");
@@ -455,7 +455,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDefaultCards")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryDefaultCards")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={columns}
@@ -469,7 +469,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCustomCardsPagination")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryCustomCardsPagination")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={columns}
@@ -501,7 +501,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCompactFixed")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryCompactFixed")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 560 }}>
               <ITTable
                 columns={fixedColumns}
@@ -515,7 +515,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryPinnedNameActions")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryPinnedNameActions")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 520 }}>
               <ITTable
                 columns={pinnedColumns}
@@ -532,7 +532,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryAutoCards")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryAutoCards")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 420 }}>
               <ITTable
                 columns={columns}
@@ -545,7 +545,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryVirtualized")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryVirtualized")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={virtualColumns}
@@ -563,7 +563,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryColumnFilters")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryColumnFilters")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={filterDemoColumns}
@@ -579,7 +579,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDesignOverrides")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryDesignOverrides")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={columns}
@@ -609,7 +609,7 @@ export const TableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryPerColumnDesign")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryPerColumnDesign")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITTable
                 columns={columns.map((col: any) =>
@@ -1062,7 +1062,7 @@ export const DataTableShowcase = () => {
       gallery={
         <div className="space-y-6">
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryCustomCardsHover")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryCustomCardsHover")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <GalleryDataTable
                 title={t("showcase.data.teamMembers")}
@@ -1105,7 +1105,7 @@ export const DataTableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDefaultCardsPagination")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryDefaultCardsPagination")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <GalleryDataTable
                 size="sm"
@@ -1116,7 +1116,7 @@ export const DataTableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryDesignOverrides")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryDesignOverrides")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITDataTable
                 columns={userColumns}
@@ -1140,7 +1140,7 @@ export const DataTableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryPinnedIdActive")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryPinnedIdActive")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800" style={{ maxWidth: 520 }}>
               <ITDataTable
                 columns={pinnedColumns}
@@ -1158,7 +1158,7 @@ export const DataTableShowcase = () => {
           </div>
 
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.data.galleryServerVirtualization", { page: dtVirtualized ? 200 : 10 })}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.data.galleryServerVirtualization", { page: dtVirtualized ? 200 : 10 })}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITDataTable
                 key={dtVirtualized ? "dt-virt-on" : "dt-virt-off"}

package/src/showcases/FormShowcases.tsx

@@ -33,7 +33,7 @@ const CodeExampleBlock = ({ title, desc, code, children }: { title: string; desc
       <div className="px-6 py-4 border-b border-slate-200 dark:border-slate-700">
         <ITFlex justify="between" align="center">
           <div>
-            <h3 className="text-sm font-bold text-slate-800 dark:text-white">{title}</h3>
+            <h3 className="w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{title}</h3>
             <p className="text-xs text-slate-500 mt-1">{desc}</p>
           </div>
           <ITButton variant="outlined" color="gray" size="sm" onClick={() => setShowCode(!showCode)}>
@@ -150,7 +150,7 @@ export const ButtonShowcase = () => {
       gallery={
         <div className="space-y-6">
           <div>
-            <h3 className="text-sm font-bold text-slate-700 mb-3">{t("showcase.forms.galleryWithIcon")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.forms.galleryWithIcon")}</h3>
             <div className="flex flex-wrap gap-3">
               <ITButton label={t("showcase.common.save")} icon={<FaSave />} color="success" />
               <ITButton label={t("showcase.common.edit")} icon={<FaEdit />} color="info" />
@@ -159,7 +159,7 @@ export const ButtonShowcase = () => {
             </div>
           </div>
           <div>
-            <h3 className="text-sm font-bold text-slate-700 mb-3">{t("showcase.forms.galleryVariants")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.forms.galleryVariants")}</h3>
             <div className="flex flex-wrap gap-3">
               <ITButton label="Filled" variant="filled" />
               <ITButton label="Outlined" variant="outlined" />
@@ -170,7 +170,7 @@ export const ButtonShowcase = () => {
             </div>
           </div>
           <div>
-            <h3 className="text-sm font-bold text-slate-700 mb-3">{t("showcase.forms.gallerySemanticColors")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.forms.gallerySemanticColors")}</h3>
             <div className="flex flex-wrap gap-3">
               <ITButton label="Primary" color="primary" />
               <ITButton label="Secondary" color="secondary" />
@@ -2006,7 +2006,7 @@ const MaskedDemo = ({
   const [complete, setComplete] = useState<string | null>(null);
   return (
     <div>
-      <h3 className="text-sm font-bold text-slate-700 mb-2">{title}</h3>
+      <h3 className="mb-2 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{title}</h3>
       <ITMaskedInput
         name={title.toLowerCase().replace(/\s+/g, "_")}
         label={mask}

package/src/showcases/LayoutPrimitivesShowcases.tsx

@@ -1347,7 +1347,7 @@ export const GridShowcase = () => {
 
   return (
     <ShowcaseLayout
-      demoAncho="completo"
+      demoMinAncho={780}
       title={t("showcase.layoutPrimitives.screensTitle")}
       description={t("showcase.layoutPrimitives.screensSubtitle")}
       code={code}
@@ -1458,7 +1458,7 @@ export const ScreenFormShowcase = () => {
 
   return (
     <ShowcaseLayout
-      demoAncho="completo"
+      demoMinAncho={780}
       title={t("showcase.layoutPrimitives.screensTitle")}
       description={t("showcase.layoutPrimitives.screensSubtitle")}
       code={formCode}

package/src/showcases/PageShowcases.tsx

@@ -219,7 +219,7 @@ export const PageHeaderShowcase = () => {
         <ITStack spacing={6}>
           {/* 1. Team management — full header + search + filter bar + user rows */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryTeamManagement")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryTeamManagement")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
               <div className="p-5 pb-3">
                 <ITPageHeader
@@ -282,7 +282,7 @@ export const PageHeaderShowcase = () => {
 
           {/* 2. Detail page — back + breadcrumbs + back button + save/cancel */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryDetailEdit")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryDetailEdit")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
               <div className="p-5 pb-3">
                 <ITPageHeader
@@ -319,7 +319,7 @@ export const PageHeaderShowcase = () => {
 
           {/* 3. Dashboard header — icon + title + desc + date range + refresh */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryDashboard")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryDashboard")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
               <div className="p-5">
                 <ITPageHeader
@@ -345,7 +345,7 @@ export const PageHeaderShowcase = () => {
 
           {/* 4. Settings header — no icon, no breadcrumbs, just title + desc + save */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.gallerySettingsPrefs")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.gallerySettingsPrefs")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
               <div className="p-5">
                 <ITPageHeader
@@ -364,7 +364,7 @@ export const PageHeaderShowcase = () => {
 
           {/* 5. Users list — icon + breadcrumbs + search in actions + add button */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryUsersList")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryUsersList")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-950">
               <div className="p-5">
                 <ITPageHeader
@@ -712,7 +712,7 @@ export const PageShowcase = () => {
         <ITStack spacing={6}>
           {/* 1. Users list with ITTable */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryUsersTable")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryUsersTable")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITPage
                 horizontalPadding={hPaddingValue}
@@ -740,7 +740,7 @@ export const PageShowcase = () => {
 
           {/* 2. Product detail */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryProductDetail")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryProductDetail")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITPage
                 horizontalPadding={hPaddingValue}
@@ -788,7 +788,7 @@ export const PageShowcase = () => {
 
           {/* 3. Edit profile form */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryEditProfile")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryEditProfile")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITPage
                 horizontalPadding={hPaddingValue}
@@ -839,7 +839,7 @@ export const PageShowcase = () => {
 
           {/* 4. Orders with table */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.galleryOrdersTable")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.galleryOrdersTable")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITPage
                 horizontalPadding={hPaddingValue}
@@ -892,7 +892,7 @@ export const PageShowcase = () => {
 
           {/* 5. Settings with tabs */}
           <div>
-            <h3 className="mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400">{t("showcase.pages.gallerySettings")}</h3>
+            <h3 className="mb-3 w-fit border-l-2 border-primary-700 pl-2.5 font-mono text-[11px] font-medium uppercase tracking-[0.14em] text-slate-700 dark:border-primary-500 dark:text-slate-200">{t("showcase.pages.gallerySettings")}</h3>
             <div className="overflow-hidden rounded-[10px] border border-slate-200 dark:border-slate-800">
               <ITPage
                 horizontalPadding={hPaddingValue}