@edc-motor/ui 0.4.12 → 0.4.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "description": "EdC Motor — componentes públicos Vue 3 + tokens SCSS para webs de juegos de mesa (paquete fuente: lo compila el consumidor con Vite)",
   "license": "GPL-3.0-only",
   "type": "module",

package/scss/components/_app-right-sidebar.scss

@@ -2,28 +2,46 @@
 
 // Barra lateral derecha contextual de la web pública (AppRightSidebar.vue):
 // cada vista la registra con useAppRightSidebar() y App.vue la monta una vez
-// dentro de .site-main (flex row con .site-content). El cascarón fija
-// --app-right-sidebar-top a la altura de su cabecera fija; sin fijarla, la
-// barra arranca en el borde superior.
+// dentro de .site-main. SIEMPRE fija a la derecha, POR DEBAJO de la cabecera
+// fija del cascarón: arranca en --app-right-sidebar-top (el cascarón la fija
+// a la altura real de su cabecera por breakpoint; sin fijarla, el borde
+// superior) y llega hasta abajo. Así ni scrollea con la página ni "se acaba"
+// en el footer, y la cabecera queda siempre a la vista y usable. Cerrada
+// queda fuera de pantalla (translateX) y solo asoma el asa.
+//
+// El cascarón decide el hueco: con `--docked` (desplegada en ancho) da
+// padding-right a .site-content/.app-footer vía body:has() — la cabecera NO
+// lo necesita: la barra ya no la tapa. En estrecho el componente añade telón
+// (también bajo la cabecera) y la barra se superpone (drawer).
+
+// Ancho compartido con el cascarón (el hueco del contenido lo usa).
+:root {
+  --app-right-sidebar-width: 320px;
+}
 
 .app-right-sidebar {
-  position: sticky;
-  top: 0;
-  align-self: flex-start;
-  height: 100dvh;
-  width: 320px;
-  flex-shrink: 0;
-  padding-top: var(--app-right-sidebar-top, 0px);
-  background: $surface;
-  border-left: 1px solid $border;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  transition: width 0.2s ease, transform 0.25s ease;
+  position: fixed;
+  top: var(--app-right-sidebar-top, 0px);
+  right: 0;
+  bottom: 0;
+  z-index: 40; // por debajo de la cabecera fija del cascarón (50)
+  // En viewports mínimos deja sitio al asa (el telón cubre el resto).
+  width: min(var(--app-right-sidebar-width), 100vw - 36px);
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+
+  &--open {
+    transform: translateX(0);
+  }
 
-  &--collapsed {
-    width: 0;
-    border-left: 0;
+  // El panel de verdad (el aside deja overflow visible para el asa).
+  &__panel {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: $surface;
+    border-left: 1px solid $border;
+    overflow: hidden;
   }
 
   &__header {
@@ -31,7 +49,7 @@
     align-items: center;
     gap: $space-2;
     height: 48px;
-    padding: 0 $space-2 0 $space-4;
+    padding: 0 $space-4;
     border-bottom: 1px solid $border;
     flex-shrink: 0;
   }
@@ -46,67 +64,63 @@
     white-space: nowrap;
   }
 
-  // Cerrar como el action-button del modal: sin caja, acento al hover.
-  &__close {
-    display: inline-flex;
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: $space-4;
+  }
+
+  // Asa de abrir/cerrar, anclada al costado izquierdo de la barra (como la
+  // de la RightSidebar del admin): al viajar CON la barra nunca se desancla
+  // de ella. Con la barra cerrada asoma pegada al borde del viewport. El top
+  // es RELATIVO al techo de la barra (que ya arranca bajo la cabecera): por
+  // defecto asoma justo bajo ella; el cascarón puede moverla con
+  // --app-right-sidebar-handle-top.
+  &__handle {
+    position: absolute;
+    top: var(--app-right-sidebar-handle-top, #{$space-4});
+    right: 100%;
+    display: flex;
     align-items: center;
     justify-content: center;
-    width: 32px;
-    height: 32px;
-    border: none;
-    background: none;
-    color: $text-2;
+    width: 28px;
+    height: 48px;
+    padding: 0;
+    background: $surface;
+    border: 1px solid $accent-500;
+    border-right: none;
+    border-radius: $radius-md 0 0 $radius-md;
+    color: $accent-500;
     cursor: pointer;
-    border-radius: $radius-sm;
     transition: background-color 0.15s ease, color 0.15s ease;
 
     &:hover {
-      color: $accent-500;
-      background: color-mix(in srgb, $accent-500 12%, transparent);
+      background: $surface-2;
+      color: $accent-600;
     }
   }
 
-  &__body {
-    flex: 1;
-    overflow-y: auto;
-    padding: $space-4;
-  }
-
   // El contenido registrado (selects de filtros…) se apila a una columna.
   #app-right-sidebar-target {
     display: grid;
     gap: $space-3;
   }
 
-  // Modo drawer (por debajo del umbral del componente): superpuesto al
-  // contenido, bajo la cabecera, con telón y cierre por click fuera/Escape.
-  &--drawer {
-    position: fixed;
-    top: var(--app-right-sidebar-top, 0px);
-    right: 0;
-    bottom: 0;
-    // El align-self: flex-start del modo columna aplica aquí como alineación
-    // de caja posicionada y encogería el alto al contenido en vez de
-    // estirarlo hasta bottom: 0.
-    align-self: auto;
-    height: auto;
-    padding-top: 0;
-    z-index: 60; // por encima de la cabecera fija (50)
-    width: min(320px, 100vw);
-    transform: translateX(100%);
-
-    &.app-right-sidebar--drawer-open {
-      transform: translateX(0);
-    }
+  // Modo drawer (por debajo del umbral del componente): superpuesta al
+  // contenido, con telón y cierre por asa, click fuera o Escape.
+  &--drawer.app-right-sidebar--open {
+    box-shadow: $shadow-lg;
   }
 }
 
+// Telón del drawer: bajo la cabecera (que sigue visible y clicable) y bajo
+// la barra (40).
 .app-right-sidebar-overlay {
   position: fixed;
   top: var(--app-right-sidebar-top, 0px);
-  left: 0;
   right: 0;
   bottom: 0;
+  left: 0;
   background: rgb(0 0 0 / 40%);
-  z-index: 55;
+  z-index: 35;
 }

package/scss/components/_sort-toggles.scss

@@ -1,15 +1,14 @@
 @use "tokens" as *;
 
-// Toggles de ordenación (SortToggles.vue): grupo segmentado a la altura de
-// los inputs (36px); el activo se tiñe de acento y su icono marca el sentido.
+// Toggles de ordenación (SortToggles.vue): dos botones SUELTOS estilo
+// action-button (sin caja ni borde, como los del header del admin), a la
+// altura táctil de los inputs (36px). El icono marca el sentido y el color
+// lo refuerza: activo ASCENDENTE en tinte suave de acento; activo
+// DESCENDENTE relleno de acento pleno (misma familia, otra intensidad —
+// funciona igual en claro y oscuro y con cualquier acento de juego).
 .sort-toggles {
   display: inline-flex;
-  gap: 2px;
-  height: $input-height;
-  padding: 2px;
-  background: $input-bg;
-  border: 1px solid $input-border;
-  border-radius: $input-radius;
+  gap: $space-2;
 
   &__btn {
     display: inline-flex;
@@ -17,19 +16,36 @@
     justify-content: center;
     flex: 1 1 auto;
     min-width: 40px;
+    height: $input-height;
     padding: 0 $space-2;
     border: none;
-    border-radius: $radius-sm;
-    background: transparent;
+    border-radius: $radius-md;
+    background: none;
     color: $text-2;
     cursor: pointer;
     transition: background-color 0.15s ease, color 0.15s ease;
 
-    &:hover { color: $text-1; }
+    &:hover {
+      color: $accent-500;
+      background: color-mix(in srgb, $accent-500 10%, transparent);
+    }
 
+    // Activo ascendente: acento sobre su tinte suave (el activo del tema).
     &.is-active {
-      background: color-mix(in srgb, $accent-500 14%, transparent);
       color: $accent-500;
+      background: color-mix(in srgb, $accent-500 14%, transparent);
+    }
+
+    // Activo descendente: el mismo acento, relleno (texto en $surface,
+    // como el contador de la colección del cascarón).
+    &.is-active.is-desc {
+      color: $surface;
+      background: $accent-500;
+
+      &:hover {
+        color: $surface;
+        background: $accent-600;
+      }
     }
   }
 }

package/src/components/AppRightSidebar.vue

@@ -1,34 +1,46 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted } from 'vue'
-import { X } from '@lucide/vue'
+import { Funnel, X } from '@lucide/vue'
 import { useAppRightSidebar } from '../composables/useAppRightSidebar'
 
 // Barra lateral derecha contextual de la web pública (misma mecánica que la
 // RightSidebar del admin-kit): cada vista la activa con
 // useAppRightSidebar().useRegister(titulo) y teletransporta su contenido
-// (típicamente sus selects de filtros) a #app-right-sidebar-target. En ancho
-// es una columna pegajosa junto al contenido; por debajo de
-// OVERLAY_BREAKPOINT pasa a drawer superpuesto con cierre por click fuera y
-// Escape. Se abre/cierra con el botón (Funnel) del header, que llama a
-// useAppRightSidebar().toggle(). La monta App.vue una vez, dentro de
-// .site-main; el cascarón fija --app-right-sidebar-top a la altura de su
-// cabecera fija.
+// (típicamente sus selects de filtros) a #app-right-sidebar-target.
+//
+// A diferencia del admin (marco fijo, scrollea el main), aquí el footer va
+// al final del documento: la barra es SIEMPRE fija (por debajo de la
+// cabecera fija del cascarón → bottom 0) para no scrollear con la página ni
+// "acabarse" al llegar al pie; el cascarón fija --app-right-sidebar-top a la
+// altura real de su cabecera por breakpoint. En ANCHO, desplegada, el
+// cascarón le hace hueco al contenido (padding-right de .site-content /
+// .app-footer sobre la clase `--docked`; la cabecera no lo necesita: la
+// barra no la tapa); por debajo de OVERLAY_BREAKPOINT es un drawer
+// superpuesto con telón (también bajo la cabecera, que sigue usable), click
+// fuera y Escape. Se abre y se cierra con el ASA anclada a la propia barra
+// (Funnel cerrada / X abierta), visible solo si la vista registró
+// contenido; el cascarón puede ajustar su altura con
+// --app-right-sidebar-handle-top (relativa al techo de la barra).
+// La monta App.vue una vez, dentro de .site-main.
 // Agnóstica de i18n (DC-29): textos por prop, defaults en castellano.
 
 const props = withDefaults(
   defineProps<{
+    /** Label del asa con la barra cerrada. */
+    openLabel?: string
+    /** Label del asa con la barra abierta. */
     closeLabel?: string
     /** Título por defecto si la vista registra sin título. */
     fallbackTitle?: string
   }>(),
-  { closeLabel: 'Cerrar el panel', fallbackTitle: 'Filtros' },
+  { openLabel: 'Abrir el panel', closeLabel: 'Cerrar el panel', fallbackTitle: 'Filtros' },
 )
 
 const { hasContent, collapsed, mobileOpen, overlay, title, isOpen, toggle, closeMobile } =
   useAppRightSidebar()
 
-// Por debajo de este ancho la barra se superpone (drawer) en vez de ocupar
-// columna: coincide con el corte móvil del header público (900px).
+// Por debajo de este ancho la barra se superpone (drawer) en vez de hacer
+// hueco: coincide con el corte móvil del header público (900px).
 const OVERLAY_BREAKPOINT = 900
 
 function checkOverlay() {
@@ -53,12 +65,12 @@ onBeforeUnmount(() => {
 })
 
 const panelTitle = computed(() => title.value || props.fallbackTitle)
+const handleLabel = computed(() => (isOpen.value ? props.closeLabel : props.openLabel))
 
-function handleClose(e: MouseEvent) {
-  // Evita dejar el foco dentro de un subárbol inert.
-  ;(e.currentTarget as HTMLElement | null)?.blur()
-  toggle()
-}
+// Desplegada en ANCHO: el cascarón le hace hueco (body:has en su scss).
+// hasContent va en la clase porque v-show (display: none) no saca al aside
+// de los selectores :has.
+const docked = computed(() => hasContent.value && !overlay.value && !collapsed.value)
 </script>
 
 <template>
@@ -72,26 +84,33 @@ function handleClose(e: MouseEvent) {
     v-show="hasContent"
     class="app-right-sidebar"
     :class="{
-      'app-right-sidebar--collapsed': collapsed && !overlay,
+      'app-right-sidebar--open': hasContent && isOpen,
+      'app-right-sidebar--docked': docked,
       'app-right-sidebar--drawer': overlay,
-      'app-right-sidebar--drawer-open': overlay && mobileOpen,
     }"
-    :inert="!isOpen"
   >
-    <div class="app-right-sidebar__header">
-      <span class="app-right-sidebar__title">{{ panelTitle }}</span>
-      <button
-        type="button"
-        class="app-right-sidebar__close"
-        :aria-label="closeLabel"
-        @click="handleClose"
-      >
-        <X :size="18" />
-      </button>
-    </div>
+    <!-- Asa anclada a la barra (viaja con ella al abrir/cerrar): fuera del
+         panel inerte para poder abrirla con la barra cerrada. -->
+    <button
+      type="button"
+      class="app-right-sidebar__handle"
+      :aria-label="handleLabel"
+      :title="handleLabel"
+      :aria-expanded="isOpen"
+      @click="toggle"
+    >
+      <X v-if="isOpen" :size="18" />
+      <Funnel v-else :size="18" />
+    </button>
+
+    <div class="app-right-sidebar__panel" :inert="!isOpen">
+      <div class="app-right-sidebar__header">
+        <span class="app-right-sidebar__title">{{ panelTitle }}</span>
+      </div>
 
-    <div class="app-right-sidebar__body">
-      <div id="app-right-sidebar-target" />
+      <div class="app-right-sidebar__body">
+        <div id="app-right-sidebar-target" />
+      </div>
     </div>
   </aside>
 </template>

package/src/components/SortToggles.vue

@@ -5,7 +5,10 @@ import { ArrowDownAZ, ArrowDownZA, CalendarArrowDown, CalendarArrowUp } from '@l
 // Par de toggles de ordenación de los index: fecha (latest ⇄ oldest) y
 // alfabético (name ⇄ name_desc). Pulsar el inactivo lo activa en su primer
 // estado; pulsar el activo invierte el sentido. Los valores casan con el
-// ?sort del catálogo público del core.
+// ?sort del catálogo público del core. Botones SUELTOS estilo action-button
+// (scss): el activo se tiñe de acento y `is-desc` marca el sentido
+// DESCENDENTE (latest = más recientes primero, name_desc = Z-A) para que el
+// color lo refuerce además del icono.
 // Agnóstico de i18n (DC-29): textos por prop, defaults en castellano.
 
 export type SortValue = 'latest' | 'oldest' | 'name' | 'name_desc'
@@ -55,7 +58,7 @@ function toggleAlpha() {
     <button
       type="button"
       class="sort-toggles__btn"
-      :class="{ 'is-active': dateActive }"
+      :class="{ 'is-active': dateActive, 'is-desc': modelValue === 'latest' }"
       :aria-pressed="dateActive"
       :aria-label="dateLabel"
       :title="dateLabel"
@@ -67,7 +70,7 @@ function toggleAlpha() {
     <button
       type="button"
       class="sort-toggles__btn"
-      :class="{ 'is-active': alphaActive }"
+      :class="{ 'is-active': alphaActive, 'is-desc': modelValue === 'name_desc' }"
       :aria-pressed="alphaActive"
       :aria-label="alphaLabel"
       :title="alphaLabel"

package/src/composables/useAppRightSidebar.ts

@@ -7,12 +7,12 @@ import { computed, onBeforeUnmount, ref } from 'vue'
  * Estado singleton a nivel de módulo (como useToast/useConfirm: los juegos
  * consumen el paquete como fuente con `optimizeDeps.exclude` para que solo
  * exista una copia):
- *   - escritorio: columna junto al contenido cuando la vista actual registra
- *     contenido; se puede plegar con `collapsed`.
+ *   - escritorio: barra fija a la derecha cuando la vista actual registra
+ *     contenido (el cascarón le hace hueco); se pliega con `collapsed`.
  *   - estrecho: oculta; entra como drawer superpuesto cuando `mobileOpen`.
  *
- * El botón del header (Funnel) llama a `toggle()`, que despliega/pliega según
- * el modo; `overlay` lo mantiene el componente AppRightSidebar con el ancho.
+ * El asa anclada a la propia barra llama a `toggle()`, que despliega/pliega
+ * según el modo; `overlay` lo mantiene AppRightSidebar con el ancho.
  *
  * La propiedad se rastrea con un token opaco para que el `unregister` de una
  * vista saliente nunca borre el contenido cuando otra vista ya ha registrado
@@ -46,7 +46,7 @@ export function useAppRightSidebar() {
     mobileOpen.value = !mobileOpen.value
   }
 
-  /** Abre/cierra según el modo: el botón del header no distingue anchos. */
+  /** Abre/cierra según el modo: el asa de la barra no distingue anchos. */
   function toggle() {
     if (overlay.value) toggleMobile()
     else toggleCollapsed()