orbital-ds 0.6.0 → 0.7.0

package/dist/themes/tactile.css

@@ -21,6 +21,14 @@
   --ds-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --ds-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
   --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.5rem;
+  --ds-sidebar-icon-stroke: 2.1;
+  --ds-sidebar-rail-w: 5rem;
+  --ds-sidebar-rail-item: 3rem;
+  --ds-sidebar-logo: 2.5rem;
+  --ds-sidebar-sep-inset: -0.5rem;
   --ds-heading-tracking: -0.01em;
 
   --background: #f6f0e3;
@@ -37,7 +45,7 @@
   --secondary-foreground: #2a2233;
   --muted: #ede3cd;
   --muted-foreground: rgba(42, 34, 51, 0.7);
-  --accent: rgba(242, 179, 61, 0.3);
+  --accent: color-mix(in srgb, var(--primary) 30%, transparent);
   --accent-foreground: #2a2233;
   --destructive: #b53a22;
   --destructive-foreground: #fffcf4;
@@ -61,13 +69,13 @@
   --sidebar-border: rgba(42, 34, 51, 0.26);
   --sidebar-ring: #17624f;
 
-  --danger: #b53a22;
+  --danger: #ae3821;
   --danger-soft: rgba(214, 69, 43, 0.13);
   --warning: #7a5200;
   --warning-soft: rgba(242, 179, 61, 0.3);
   --success: #17624f;
   --success-soft: rgba(23, 98, 79, 0.12);
-  --info: #2f6fb0;
+  --info: #2a649e;
   --info-soft: rgba(47, 111, 176, 0.12);
   --neutral: rgba(42, 34, 51, 0.72);
   --neutral-soft: rgba(42, 34, 51, 0.08);
@@ -121,7 +129,7 @@
   --ds-sidebar-ring: 0px;
   --ds-sidebar-edge: 2px solid var(--sidebar-border);
   --ds-sidebar-item-radius: 14px;
-  --ds-sidebar-item-h: 2.75rem;
+  --ds-sidebar-item-h: 3rem;
 
   /* Baldosas de icono: grandes, tintadas y con relleno duotono suave */
   --ds-icon-tile-sm: 2.25rem;
@@ -133,7 +141,7 @@
   /* Privadas de tactile */
   --zw-outline: #2a2233;
   --zw-edge: rgba(42, 34, 51, 0.26);
-  --zw-mark: rgba(242, 179, 61, 0.62);
+  --zw-mark: color-mix(in srgb, var(--primary) 62%, transparent);
 }
 
 /* ── VARIABLES · PIEL OSCURA («noche») ───────────────────────────────────── */
@@ -152,7 +160,7 @@
   --secondary-foreground: #f4ebda;
   --muted: #25202e;
   --muted-foreground: rgba(244, 235, 218, 0.72);
-  --accent: rgba(242, 179, 61, 0.18);
+  --accent: color-mix(in srgb, var(--primary) 18%, transparent);
   --accent-foreground: #f7c566;
   --destructive: #ff8266;
   --destructive-foreground: #1d1824;
@@ -199,7 +207,7 @@
 
   --zw-outline: rgba(244, 235, 218, 0.92);
   --zw-edge: rgba(244, 235, 218, 0.26);
-  --zw-mark: rgba(242, 179, 61, 0.45);
+  --zw-mark: color-mix(in srgb, var(--primary) 45%, transparent);
 }
 
 /* ── PERSONALIDAD ────────────────────────────────────────────────────────────
@@ -382,18 +390,40 @@
     box-decoration-break: clone;
   }
 
-  /* Sidebar: filas como teclas; la activa, elevada */
+  /* Sidebar: filas como teclas */
   [data-sidebar='menu-button'] {
     border: 2px solid transparent;
     border-radius: 14px;
     font-weight: 600;
+    font-size: 1rem;
   }
+  /* Señalada: la tecla se asoma (papel de tarjeta, contorno de tinta y arista); pulsada, se hunde */
   [data-sidebar='menu-button']:hover:not([data-active='true']) {
     background: var(--card);
+    border-color: var(--zw-outline);
+    border-bottom-width: 4px;
   }
+  [data-sidebar='menu-button']:active:not([data-active='true']) {
+    border-bottom-width: 2px;
+    transform: translateY(2px);
+  }
+  /* Activa: la tecla pulsada y rellena con el color principal */
   [data-sidebar='menu-button'][data-active='true'] {
-    background: var(--card);
+    background: var(--primary);
+    color: var(--primary-foreground);
     border-color: var(--zw-outline);
     border-bottom-width: 5px;
   }
+  /* Tooltips: etiqueta de tinta con arista inferior, como una tecla invertida */
+  [data-slot='tooltip-content'] {
+    background: var(--foreground);
+    color: var(--background);
+    border-radius: 12px;
+    border-bottom: 4px solid var(--zw-edge);
+    font-weight: 700;
+  }
+  /* Sin flecha: un rombo de tinta tapaba la primera letra de la etiqueta */
+  [data-slot='tooltip-arrow'] {
+    display: none;
+  }
 }

package/dist/themes/tactile.scoped.css

@@ -15,12 +15,20 @@
  */
 
 /* ── VARIABLES · PIEL CLARA («papel») ────────────────────────────────────── */
-:root[data-theme='tactile'] {
+:root:where([data-theme='tactile']) {
   --radius: 16px;
 
   --ds-font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
   --ds-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
   --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.5rem;
+  --ds-sidebar-icon-stroke: 2.1;
+  --ds-sidebar-rail-w: 5rem;
+  --ds-sidebar-rail-item: 3rem;
+  --ds-sidebar-logo: 2.5rem;
+  --ds-sidebar-sep-inset: -0.5rem;
   --ds-heading-tracking: -0.01em;
 
   --background: #f6f0e3;
@@ -37,7 +45,7 @@
   --secondary-foreground: #2a2233;
   --muted: #ede3cd;
   --muted-foreground: rgba(42, 34, 51, 0.7);
-  --accent: rgba(242, 179, 61, 0.3);
+  --accent: color-mix(in srgb, var(--primary) 30%, transparent);
   --accent-foreground: #2a2233;
   --destructive: #b53a22;
   --destructive-foreground: #fffcf4;
@@ -61,13 +69,13 @@
   --sidebar-border: rgba(42, 34, 51, 0.26);
   --sidebar-ring: #17624f;
 
-  --danger: #b53a22;
+  --danger: #ae3821;
   --danger-soft: rgba(214, 69, 43, 0.13);
   --warning: #7a5200;
   --warning-soft: rgba(242, 179, 61, 0.3);
   --success: #17624f;
   --success-soft: rgba(23, 98, 79, 0.12);
-  --info: #2f6fb0;
+  --info: #2a649e;
   --info-soft: rgba(47, 111, 176, 0.12);
   --neutral: rgba(42, 34, 51, 0.72);
   --neutral-soft: rgba(42, 34, 51, 0.08);
@@ -121,7 +129,7 @@
   --ds-sidebar-ring: 0px;
   --ds-sidebar-edge: 2px solid var(--sidebar-border);
   --ds-sidebar-item-radius: 14px;
-  --ds-sidebar-item-h: 2.75rem;
+  --ds-sidebar-item-h: 3rem;
 
   /* Baldosas de icono: grandes, tintadas y con relleno duotono suave */
   --ds-icon-tile-sm: 2.25rem;
@@ -133,11 +141,11 @@
   /* Privadas de tactile */
   --zw-outline: #2a2233;
   --zw-edge: rgba(42, 34, 51, 0.26);
-  --zw-mark: rgba(242, 179, 61, 0.62);
+  --zw-mark: color-mix(in srgb, var(--primary) 62%, transparent);
 }
 
 /* ── VARIABLES · PIEL OSCURA («noche») ───────────────────────────────────── */
-:root[data-theme='tactile'].dark {
+:where(:root[data-theme='tactile']).dark {
   --background: #1d1824;
   --foreground: #f4ebda;
 
@@ -152,7 +160,7 @@
   --secondary-foreground: #f4ebda;
   --muted: #25202e;
   --muted-foreground: rgba(244, 235, 218, 0.72);
-  --accent: rgba(242, 179, 61, 0.18);
+  --accent: color-mix(in srgb, var(--primary) 18%, transparent);
   --accent-foreground: #f7c566;
   --destructive: #ff8266;
   --destructive-foreground: #1d1824;
@@ -199,14 +207,14 @@
 
   --zw-outline: rgba(244, 235, 218, 0.92);
   --zw-edge: rgba(244, 235, 218, 0.26);
-  --zw-mark: rgba(242, 179, 61, 0.45);
+  --zw-mark: color-mix(in srgb, var(--primary) 45%, transparent);
 }
 
 /* ── PERSONALIDAD ────────────────────────────────────────────────────────────
  * Sin capa: gana a las utilidades de los componentes. Solo variables. No usa
  * box-shadow en los controles, así el anillo de foco sigue funcionando.
  */
-:root[data-theme='tactile'] {
+:root:where([data-theme='tactile']) {
   /* Teclas: contorno de tinta y arista inferior; al pulsar, se hunden */
   [data-slot='button'] {
     border: 2px solid var(--zw-outline);
@@ -382,18 +390,40 @@
     box-decoration-break: clone;
   }
 
-  /* Sidebar: filas como teclas; la activa, elevada */
+  /* Sidebar: filas como teclas */
   [data-sidebar='menu-button'] {
     border: 2px solid transparent;
     border-radius: 14px;
     font-weight: 600;
+    font-size: 1rem;
   }
+  /* Señalada: la tecla se asoma (papel de tarjeta, contorno de tinta y arista); pulsada, se hunde */
   [data-sidebar='menu-button']:hover:not([data-active='true']) {
     background: var(--card);
+    border-color: var(--zw-outline);
+    border-bottom-width: 4px;
   }
+  [data-sidebar='menu-button']:active:not([data-active='true']) {
+    border-bottom-width: 2px;
+    transform: translateY(2px);
+  }
+  /* Activa: la tecla pulsada y rellena con el color principal */
   [data-sidebar='menu-button'][data-active='true'] {
-    background: var(--card);
+    background: var(--primary);
+    color: var(--primary-foreground);
     border-color: var(--zw-outline);
     border-bottom-width: 5px;
   }
+  /* Tooltips: etiqueta de tinta con arista inferior, como una tecla invertida */
+  [data-slot='tooltip-content'] {
+    background: var(--foreground);
+    color: var(--background);
+    border-radius: 12px;
+    border-bottom: 4px solid var(--zw-edge);
+    font-weight: 700;
+  }
+  /* Sin flecha: un rombo de tinta tapaba la primera letra de la etiqueta */
+  [data-slot='tooltip-arrow'] {
+    display: none;
+  }
 }

package/dist/themes/twitter.css

@@ -22,6 +22,14 @@
   --ds-font-sans: 'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --ds-font-display: var(--ds-font-sans);
   --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.5rem;
+  --ds-sidebar-icon-stroke: 2;
+  --ds-sidebar-rail-w: 4.5rem;
+  --ds-sidebar-rail-item: 3rem;
+  --ds-sidebar-logo: 2.25rem;
+  --ds-sidebar-sep-inset: 0rem;
   --ds-heading-tracking: normal;
 
   /* Color */
@@ -41,7 +49,7 @@
   --muted-foreground: #536471;
   --accent: rgba(29, 155, 240, 0.1);
   --accent-foreground: #1a8cd8;
-  --destructive: #f4212e;
+  --destructive: #e51f2b;
   --destructive-foreground: #ffffff;
 
   --border: #eff3f4;
@@ -67,9 +75,9 @@
   --danger-soft: rgba(244, 33, 46, 0.1);
   --warning: #8a6d00;
   --warning-soft: rgba(255, 212, 0, 0.2);
-  --success: #00875a;
+  --success: #007c53;
   --success-soft: rgba(0, 186, 124, 0.12);
-  --info: #1a8cd8;
+  --info: #1573b1;
   --info-soft: rgba(29, 155, 240, 0.1);
   --neutral: #536471;
   --neutral-soft: #eff3f4;
@@ -151,7 +159,7 @@
   --muted-foreground: #8b98a5;
   --accent: rgba(29, 155, 240, 0.15);
   --accent-foreground: #4db3f5;
-  --destructive: #f4212e;
+  --destructive: #e51f2b;
   --destructive-foreground: #ffffff;
 
   --border: #38444d;

package/dist/themes/twitter.meta.json

@@ -2,13 +2,60 @@
   "name": "twitter",
   "label": "Twitter (2021)",
   "essence": "Plano y de alto contraste: filetes de 1px, píldoras, sin sombras.",
-  "signature": ["filetes de 1px", "botones en píldora de peso 700", "sidebar a ras con filas en píldora"],
-  "fonts": { "display": "Chirp (sistema como respaldo)", "body": "Chirp (sistema como respaldo)", "file": "twitter.fonts.css", "distributable": false },
-  "palette": { "light": { "background": "#FFFFFF", "foreground": "#0F1419", "primary": "#1D9BF0" }, "dark": { "background": "#15202B" } },
-  "radii": [16, 999],
+  "signature": [
+    "filetes de 1px",
+    "botones en píldora de peso 700",
+    "sidebar a ras con filas en píldora"
+  ],
+  "fonts": {
+    "display": "Chirp (sistema como respaldo)",
+    "body": "Chirp (sistema como respaldo)",
+    "file": "twitter.fonts.css",
+    "distributable": false
+  },
+  "palette": {
+    "light": {
+      "background": "#FFFFFF",
+      "foreground": "#0F1419",
+      "primary": "#1D9BF0"
+    },
+    "dark": {
+      "background": "#15202B"
+    }
+  },
+  "radii": [
+    16,
+    999
+  ],
   "references": [
-    { "name": "Twitter (2021)", "tookFromIt": "estructura plana, azul de marca, filetes", "source": "memoria; azul y fuente documentados" }
+    {
+      "name": "Twitter (2021)",
+      "tookFromIt": "estructura plana, azul de marca, filetes",
+      "source": "memoria; azul y fuente documentados"
+    }
   ],
-  "status": { "verified": ["azul #1D9BF0", "fuente Chirp"], "approximate": ["grises", "bordes", "fondos de Dim"], "designed": [], "pending": ["contrastar con captura de referencia"] },
-  "guide": "twitter.guide.md"
+  "status": {
+    "verified": [
+      "azul #1D9BF0",
+      "fuente Chirp"
+    ],
+    "approximate": [
+      "grises",
+      "bordes",
+      "fondos de Dim"
+    ],
+    "designed": [],
+    "pending": [
+      "contrastar con captura de referencia"
+    ]
+  },
+  "guide": "twitter.guide.md",
+  "a11y": {
+    "level": "AA",
+    "exceptions": [
+      "primary-foreground/primary",
+      "sidebar-primary-foreground/sidebar-primary"
+    ],
+    "note": "El azul de marca confirmado (#1D9BF0) con texto blanco da 3:1; la acción primaria puede ir en tinta."
+  }
 }

package/dist/themes/twitter.scoped.css

@@ -16,12 +16,20 @@
  */
 
 /* ── VARIABLES · PIEL CLARA ──────────────────────────────────────────────── */
-:root[data-theme='twitter'] {
+:root:where([data-theme='twitter']) {
   --radius: 16px;
 
   --ds-font-sans: 'Chirp', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --ds-font-display: var(--ds-font-sans);
   --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.5rem;
+  --ds-sidebar-icon-stroke: 2;
+  --ds-sidebar-rail-w: 4.5rem;
+  --ds-sidebar-rail-item: 3rem;
+  --ds-sidebar-logo: 2.25rem;
+  --ds-sidebar-sep-inset: 0rem;
   --ds-heading-tracking: normal;
 
   /* Color */
@@ -41,7 +49,7 @@
   --muted-foreground: #536471;
   --accent: rgba(29, 155, 240, 0.1);
   --accent-foreground: #1a8cd8;
-  --destructive: #f4212e;
+  --destructive: #e51f2b;
   --destructive-foreground: #ffffff;
 
   --border: #eff3f4;
@@ -67,9 +75,9 @@
   --danger-soft: rgba(244, 33, 46, 0.1);
   --warning: #8a6d00;
   --warning-soft: rgba(255, 212, 0, 0.2);
-  --success: #00875a;
+  --success: #007c53;
   --success-soft: rgba(0, 186, 124, 0.12);
-  --info: #1a8cd8;
+  --info: #1573b1;
   --info-soft: rgba(29, 155, 240, 0.1);
   --neutral: #536471;
   --neutral-soft: #eff3f4;
@@ -134,7 +142,7 @@
 }
 
 /* ── VARIABLES · PIEL OSCURA («Dim») ─────────────────────────────────────── */
-:root[data-theme='twitter'].dark {
+:where(:root[data-theme='twitter']).dark {
   --background: #15202b;
   --foreground: #f7f9f9;
 
@@ -151,7 +159,7 @@
   --muted-foreground: #8b98a5;
   --accent: rgba(29, 155, 240, 0.15);
   --accent-foreground: #4db3f5;
-  --destructive: #f4212e;
+  --destructive: #e51f2b;
   --destructive-foreground: #ffffff;
 
   --border: #38444d;
@@ -198,7 +206,7 @@
 /* ── PERSONALIDAD ────────────────────────────────────────────────────────────
  * Sin capa: gana a las utilidades de los componentes. Solo variables.
  */
-:root[data-theme='twitter'] {
+:root:where([data-theme='twitter']) {
   /* Botones: píldora en peso 700; primario en azul; contorno con filete */
   [data-slot='button'] {
     border-radius: 9999px;

package/dist/themes/zyro.css

@@ -26,6 +26,14 @@
   --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
   --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
   --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.25rem;
+  --ds-sidebar-icon-stroke: 2;
+  --ds-sidebar-rail-w: 4.5rem;
+  --ds-sidebar-rail-item: 2.75rem;
+  --ds-sidebar-logo: 2.25rem;
+  --ds-sidebar-sep-inset: 0rem;
   --ds-heading-tracking: -0.01em;
 
   /* Color */
@@ -45,7 +53,7 @@
   --muted-foreground: rgba(14, 22, 48, 0.66);
   --accent: rgba(3, 73, 254, 0.09);
   --accent-foreground: #0349fe;
-  --destructive: #eb1919;
+  --destructive: #e61919;
   --destructive-foreground: #ffffff;
 
   --border: rgba(168, 190, 235, 0.3);
@@ -69,13 +77,13 @@
 
   --danger: #c21414;
   --danger-soft: rgba(235, 25, 25, 0.1);
-  --warning: #9a6e00;
+  --warning: #845f00;
   --warning-soft: rgba(255, 179, 0, 0.16);
-  --success: #0e8f34;
+  --success: #0b742a;
   --success-soft: rgba(20, 189, 68, 0.12);
-  --info: #136ba8;
+  --info: #1267a1;
   --info-soft: rgba(42, 147, 213, 0.12);
-  --neutral: rgba(14, 22, 48, 0.6);
+  --neutral: rgba(14, 22, 48, 0.63);
   --neutral-soft: rgba(14, 22, 48, 0.06);
 
   --link: #0349fe;
@@ -164,7 +172,7 @@
   --muted-foreground: rgba(255, 255, 255, 0.68);
   --accent: rgba(54, 179, 237, 0.16);
   --accent-foreground: #36b3ed;
-  --destructive: #eb1919;
+  --destructive: #e61919;
   --destructive-foreground: #ffffff;
 
   --border: rgba(255, 255, 255, 0.07);
@@ -190,9 +198,9 @@
   --danger-soft: rgba(235, 25, 25, 0.2);
   --warning: #ffb300;
   --warning-soft: rgba(255, 179, 0, 0.18);
-  --success: #14bd44;
+  --success: #3cc864;
   --success-soft: rgba(20, 189, 68, 0.18);
-  --info: #2a93d5;
+  --info: #70b7e3;
   --info-soft: rgba(42, 147, 213, 0.2);
   --neutral: rgba(255, 255, 255, 0.6);
   --neutral-soft: rgba(255, 255, 255, 0.08);

package/dist/themes/zyro.scoped.css

@@ -19,13 +19,21 @@
  */
 
 /* ── 1. VARIABLES · PIEL CLARA ───────────────────────────────────────────── */
-:root[data-theme='zyro'] {
+:root:where([data-theme='zyro']) {
   --radius: 18px;
 
   /* Tipografía: Montserrat (titulares) + Roboto (cuerpo) */
   --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
   --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
   --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.25rem;
+  --ds-sidebar-icon-stroke: 2;
+  --ds-sidebar-rail-w: 4.5rem;
+  --ds-sidebar-rail-item: 2.75rem;
+  --ds-sidebar-logo: 2.25rem;
+  --ds-sidebar-sep-inset: 0rem;
   --ds-heading-tracking: -0.01em;
 
   /* Color */
@@ -45,7 +53,7 @@
   --muted-foreground: rgba(14, 22, 48, 0.66);
   --accent: rgba(3, 73, 254, 0.09);
   --accent-foreground: #0349fe;
-  --destructive: #eb1919;
+  --destructive: #e61919;
   --destructive-foreground: #ffffff;
 
   --border: rgba(168, 190, 235, 0.3);
@@ -69,13 +77,13 @@
 
   --danger: #c21414;
   --danger-soft: rgba(235, 25, 25, 0.1);
-  --warning: #9a6e00;
+  --warning: #845f00;
   --warning-soft: rgba(255, 179, 0, 0.16);
-  --success: #0e8f34;
+  --success: #0b742a;
   --success-soft: rgba(20, 189, 68, 0.12);
-  --info: #136ba8;
+  --info: #1267a1;
   --info-soft: rgba(42, 147, 213, 0.12);
-  --neutral: rgba(14, 22, 48, 0.6);
+  --neutral: rgba(14, 22, 48, 0.63);
   --neutral-soft: rgba(14, 22, 48, 0.06);
 
   --link: #0349fe;
@@ -147,7 +155,7 @@
 }
 
 /* ── 1b. VARIABLES · PIEL OSCURA ─────────────────────────────────────────── */
-:root[data-theme='zyro'].dark {
+:where(:root[data-theme='zyro']).dark {
   --background: #0e3148;
   --foreground: rgba(255, 255, 255, 0.94);
 
@@ -164,7 +172,7 @@
   --muted-foreground: rgba(255, 255, 255, 0.68);
   --accent: rgba(54, 179, 237, 0.16);
   --accent-foreground: #36b3ed;
-  --destructive: #eb1919;
+  --destructive: #e61919;
   --destructive-foreground: #ffffff;
 
   --border: rgba(255, 255, 255, 0.07);
@@ -190,9 +198,9 @@
   --danger-soft: rgba(235, 25, 25, 0.2);
   --warning: #ffb300;
   --warning-soft: rgba(255, 179, 0, 0.18);
-  --success: #14bd44;
+  --success: #3cc864;
   --success-soft: rgba(20, 189, 68, 0.18);
-  --info: #2a93d5;
+  --info: #70b7e3;
   --info-soft: rgba(42, 147, 213, 0.2);
   --neutral: rgba(255, 255, 255, 0.6);
   --neutral-soft: rgba(255, 255, 255, 0.08);
@@ -236,7 +244,7 @@
 /* ── 2. PERSONALIDAD ─────────────────────────────────────────────────────────
  * Sin capa: gana a las utilidades de los componentes. Solo variables.
  */
-:root[data-theme='zyro'] {
+:root:where([data-theme='zyro']) {
   /* Botones: píldora. Acción primaria con degradado de marca y brillo. */
   [data-slot='button'] {
     border-radius: 9999px;
@@ -343,7 +351,7 @@
 }
 
 /* Ajustes de personalidad (vistos en el banco de pruebas) */
-:root[data-theme='zyro'] {
+:root:where([data-theme='zyro']) {
   /* Grupos de botones: píldora solo en los extremos, el interior recto */
   [data-slot='button-group'] [data-slot='button'] {
     border-radius: 0;
@@ -365,7 +373,7 @@
 
 /* Fondo vivo: los degradados derivan despacio (aproximación ligera, sin WebGL de la
    malla original). `prefers-reduced-motion` ya detiene la animación en la estructura. */
-:root[data-theme='zyro'] {
+:root:where([data-theme='zyro']) {
   body {
     background-size: 160% 160%;
     animation: zy-drift 40s ease-in-out infinite alternate;

package/dist/ui/sidebar.js

@@ -26,7 +26,7 @@ const SIDEBAR_COOKIE_NAME = "sidebar_state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "17.5rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
-const SIDEBAR_WIDTH_ICON = "4rem";
+const SIDEBAR_WIDTH_ICON = "var(--ds-sidebar-rail-w, 4rem)";
 const SIDEBAR_KEYBOARD_SHORTCUT = "b";
 const SidebarContext = React.createContext(null);
 function useSidebar() {
@@ -180,7 +180,7 @@ function Sidebar({
             "data-slot": "sidebar-container",
             "data-side": side,
             className: cn(
-              "fixed inset-y-0 z-(--ds-z-raised) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              "fixed inset-y-0 z-(--ds-z-sidebar) hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-(--ds-motion-base) ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
               // Adjust the padding for floating and inset variants.
               variant === "floating" || variant === "inset" ? "p-(--ds-sidebar-pad) group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(var(--ds-sidebar-pad)*2)+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className
@@ -421,7 +421,7 @@ function SidebarMenuItem({ className, ...props }) {
   );
 }
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-(--ds-sidebar-item-radius) px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-(--ds-sidebar-item-radius) px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {

package/dist/ui/tooltip.js

@@ -48,7 +48,7 @@ function TooltipContent({
           ...props,
           children: [
             children,
-            /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "z-(--ds-z-overlay) size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]" })
+            /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { "data-slot": "tooltip-arrow", className: "z-(--ds-z-overlay) size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]" })
           ]
         }
       )

package/docs/CONTRACT.md

@@ -74,9 +74,10 @@ Los define la estructura con un valor neutro; un tema los sobrescribe si quiere.
 | Sombras | `--shadow-card`, `--shadow-card-hover`, `--shadow-control`, `--shadow-raised`, `--shadow-overlay`, `--shadow-popover` |
 | Altura de controles | `--ds-control-h-sm`, `-md`, `-lg` |
 | Espaciado interno | `--ds-card-spacing`, `--ds-card-spacing-sm`, `--ds-field-px`, `--ds-cell-p`, `--ds-overlay-p`, `--ds-overlay-gap`, `--ds-popover-p`, `--ds-menu-p`, `--ds-menu-item-px`, `--ds-menu-item-py`, `--ds-button-px-sm/md/lg`, `--ds-badge-px` |
-| Capas | `--ds-z-raised`, `--ds-z-sticky`, `--ds-z-overlay` |
+| Capas | `--ds-z-raised`, `--ds-z-sticky`, `--ds-z-sidebar` (sobre la cabecera sticky), `--ds-z-overlay` |
 | Movimiento | `--ds-motion-fast`, `--ds-motion-base`, `--ds-motion-slow`, `--ds-motion-blink` |
 | Foco | `--ds-ring-width` |
+| Lateral | `--ds-sidebar-icon`, `--ds-sidebar-icon-stroke` (iconos), `--ds-sidebar-rail-w` (ancho contraído), `--ds-sidebar-rail-item` (tecla del raíl), `--ds-sidebar-logo` (logo y avatar), `--ds-sidebar-sep-inset` (separadores; negativo = de borde a borde). **Todo tema los define** (contrato) |
 | Velo | `--color-scrim` |
 | **Materiales** | `--ds-card-backdrop`, `--ds-overlay-backdrop`, `--ds-field-backdrop`, `--ds-sidebar-backdrop` (un `backdrop-filter` completo; por defecto `none`) y `--ds-page-backdrop` (un `background-image` para el fondo de la página; por defecto `none`) |