slidev-theme-entaina 0.2.1 → 0.2.2

package/README.md

@@ -21,8 +21,8 @@ Las fuentes (Lato, Comfortaa, JetBrains Mono, pesos 300–700) llegan como defau
 ## Qué incluye
 
 - **`styles/tokens.css`** — la paleta Entaina como defaults en `:root`, más las variantes de pilar: `htmlAttrs: { data-theme: technology | innovation | people }` en el headmatter del deck.
-- **`styles/base.css`** — el look, 100% sobre tokens: atmósfera por layout, escala display, kickers `.eyebrow`/`.cover-kicker`, cover/section/quote estilizados, splits a sangre con `.panel .panel-before/.panel-after`, tablas, la portada oscura `layout: cover` + `class: bleed` (con `.bleed-note`), y el reveal de entrada escalonado (respeta `prefers-reduced-motion` y print).
-- **`global-top.vue`** — chrome de navegación: barra de progreso, bolitas laterales que se expanden al hover mostrando títulos, flechas anterior/siguiente y contador `n / total · %`. Se oculta en export y en modo presentador. Teclado, transiciones, overview (`o`) y export siguen siendo de Slidev.
+- **`styles/base.css`** — el look, 100% sobre tokens: atmósfera por layout, escala display, kickers `.eyebrow`/`.cover-kicker`, cover/section/quote estilizados, splits a sangre con `.panel .panel-before/.panel-after`, tablas, la portada oscura Full-Bleed (`layout: cover` + `class: bleed`) y el reveal de entrada escalonado (respeta `prefers-reduced-motion` y print). Cuando un `src:` import reemplaza la clase raíz, un descendiente `.bleed-note` es el marcador de compatibilidad soportado y activa la misma variante Full-Bleed.
+- **`global-top.vue`** — chrome de navegación: barra de progreso, bolitas laterales que se expanden al hover o foco mostrando títulos y contador `n / total · %`. A partir de 50 diapositivas, el rail pasa automáticamente a modo compacto con scroll, manteniendo navegación por teclado, foco y etiquetas accesibles. Se oculta en export y en modo presentador. Anterior/siguiente, teclado, transiciones, overview (`o`) y export siguen siendo de Slidev (su propia barra de herramientas).
 - **Componentes** (clases sobre HTML plano en las slides):
   - KPI dashboard: `<div class="kpi-grid"><div class="kpi"><b>247</b><span>etiqueta</span></div>…</div>` — cifras display con rotación de colores de pilar, etiquetas mono; valores hero breves (≤6 caracteres).
   - Código: los bloques fenced van en caja navy de marca con tokens oscuros (`setup/shiki.ts`, one-dark-pro en ambos esquemas) y soportan el resaltado de líneas de Slidev (` ```ts {2-3} `). Chip de fichero flotante: `<div class="code-file">worker.ts</div>` justo antes del fence.

package/global-top.vue

@@ -1,8 +1,8 @@
 <!--
   slidev-theme-entaina — deck navigation chrome: top progress bar, right-hand
-  slide dots that expand on hover to show slide titles, prev/next arrows
-  (bottom left) and a counter with reading percent (bottom right). Hidden in
-  print/export and presenter mode. Styled through the theme tokens.
+  slide dots that expand on hover to show slide titles, and a counter with
+  reading percent (bottom right). Prev/next is Slidev's own toolbar's job.
+  Hidden in print/export and presenter mode. Styled through the theme tokens.
 -->
 <script setup lang="ts">
 import { computed } from 'vue'
@@ -11,6 +11,7 @@ import { useNav } from '@slidev/client'
 const nav = useNav()
 const current = computed(() => nav.currentPage.value)
 const total = computed(() => nav.total.value)
+const isCompact = computed(() => total.value >= 50)
 const pct = computed(() => Math.round((current.value / total.value) * 100))
 const hidden = computed(() => nav.isPrintMode.value || (nav as any).isPresenter?.value)
 const titles = computed(() =>
@@ -25,7 +26,7 @@ const titles = computed(() =>
 <template>
   <div v-if="!hidden" class="deck-chrome">
     <div class="deck-progress" :style="{ width: pct + '%' }" />
-    <nav class="deck-dots" aria-label="Navegación por diapositivas">
+    <nav :class="['deck-dots', { 'deck-dots--compact': isCompact }]" aria-label="Navegación por diapositivas">
       <button
         v-for="(t, i) in titles"
         :key="i"
@@ -38,10 +39,6 @@ const titles = computed(() =>
         <span class="deck-dot-label">{{ t }}</span>
       </button>
     </nav>
-    <div class="deck-arrows">
-      <button type="button" class="deck-arrow" :disabled="current <= 1" aria-label="Anterior" @click="nav.prev()">←</button>
-      <button type="button" class="deck-arrow" :disabled="current >= total" aria-label="Siguiente" @click="nav.next()">→</button>
-    </div>
     <div class="deck-counter">{{ current }} / {{ total }} · {{ pct }}%</div>
   </div>
 </template>
@@ -69,7 +66,8 @@ const titles = computed(() =>
   display: flex;
   flex-direction: column;
   gap: 5px;
-  max-height: 70dvh;
+  /* Compensate for Slidev's canvas transform so the rendered rail stays at 70dvh. */
+  max-height: calc(70dvh / var(--slidev-slide-scale, 1));
   overflow: hidden auto;
   padding: 7px;
   pointer-events: auto;
@@ -78,8 +76,9 @@ const titles = computed(() =>
   top: 50%;
   transform: translateY(-50%);
   transition: width 0.2s;
-  width: 34px;
+  width: 38px;
 }
+.deck-dots--compact { gap: 1px; }
 .deck-dots:hover,
 .deck-dots:focus-within {
   border-radius: 16px;
@@ -97,6 +96,7 @@ const titles = computed(() =>
   gap: 0;
   grid-template-columns: 8px minmax(0, 1fr);
   min-height: 24px;
+  min-width: 24px;
   padding: 6px;
   text-align: left;
 }
@@ -119,31 +119,7 @@ const titles = computed(() =>
 .deck-dots:hover .deck-dot-label,
 .deck-dots:focus-within .deck-dot-label { max-width: 200px; opacity: 1; }
 .deck-dot[aria-current='true'] { background: var(--accent-dim); color: var(--accent); }
-.deck-dot:focus-visible,
-.deck-arrow:focus-visible { outline: 3px solid var(--node-b); outline-offset: 2px; }
-
-.deck-arrows {
-  bottom: 12px;
-  display: flex;
-  gap: 6px;
-  left: 20px;
-  pointer-events: auto;
-  position: absolute;
-}
-.deck-arrow {
-  background: color-mix(in srgb, var(--surface-elevated) 80%, transparent);
-  border: 1px solid var(--border-bright);
-  border-radius: 50%;
-  color: var(--accent-dark, var(--accent));
-  cursor: pointer;
-  display: grid;
-  font-size: 14px;
-  height: 30px;
-  place-items: center;
-  width: 30px;
-}
-.deck-arrow:hover:not(:disabled) { background: var(--accent-dim); }
-.deck-arrow:disabled { cursor: default; opacity: 0.35; }
+.deck-dot:focus-visible { outline: 3px solid var(--node-b); outline-offset: 2px; }
 
 .deck-counter {
   bottom: 16px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slidev-theme-entaina",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "packageManager": "npm@11.19.0",
   "publishConfig": {

package/styles/base.css

@@ -232,7 +232,7 @@
 .slidev-layout tr:nth-child(even) td { background: var(--surface-elevated); }
 
 /* ---------- Full-bleed cover variant: `layout: cover` + `class: bleed` ---------- */
-.slidev-layout.cover.bleed {
+.slidev-layout.cover:is(.bleed, :has(.bleed-note)) {
   align-items: flex-start;
   background:
     radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--node-b) 55%, transparent), transparent 30%),
@@ -243,12 +243,13 @@
   padding: 3rem 3.5rem;
   text-align: left;
 }
-.slidev-layout.cover.bleed::before {
+.slidev-layout.cover:is(.bleed, :has(.bleed-note))::before {
   background-image:
     linear-gradient(90deg, transparent 49.3%, rgba(255, 255, 255, 0.6) 49.3%, rgba(255, 255, 255, 0.6) 50.7%, transparent 50.7%),
     linear-gradient(0deg, transparent 49.3%, rgba(255, 255, 255, 0.6) 49.3%, rgba(255, 255, 255, 0.6) 50.7%, transparent 50.7%);
   background-size: 110px 110px;
   content: '';
+  height: auto;
   inset: 0;
   opacity: 0.34;
   pointer-events: none;
@@ -257,9 +258,9 @@
   transform-origin: bottom;
   z-index: 0;
 }
-.slidev-layout.cover.bleed > * { position: relative; z-index: 1; }
-.slidev-layout.cover.bleed > div { margin-bottom: 0; margin-top: auto; }
-.slidev-layout.cover.bleed h1 {
+.slidev-layout.cover:is(.bleed, :has(.bleed-note)) > * { position: relative; z-index: 1; }
+.slidev-layout.cover:is(.bleed, :has(.bleed-note)) > div { margin-bottom: 0; margin-top: auto; }
+.slidev-layout.cover:is(.bleed, :has(.bleed-note)) h1 {
   color: #fff;
   font-size: 2.9rem;
   letter-spacing: -0.04em;
@@ -267,9 +268,9 @@
   max-width: none;
   text-align: left;
 }
-.slidev-layout.cover.bleed p { color: rgba(255, 255, 255, 0.8); }
-.slidev-layout.cover.bleed .cover-kicker,
-.slidev-layout.cover.bleed .eyebrow { color: rgba(255, 255, 255, 0.78); }
+.slidev-layout.cover:is(.bleed, :has(.bleed-note)) p { color: rgba(255, 255, 255, 0.8); }
+.slidev-layout.cover:is(.bleed, :has(.bleed-note)) .cover-kicker,
+.slidev-layout.cover:is(.bleed, :has(.bleed-note)) .eyebrow { color: rgba(255, 255, 255, 0.78); }
 .bleed-note {
   background: rgba(0, 0, 0, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.45);