@edc-motor/ui 0.5.3 → 0.5.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "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

@@ -26,7 +26,11 @@
   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);
+  // OJO: 100% y no 100vw — el ancho porcentual de un fixed resuelve contra
+  // el viewport REAL (sin la barra de scroll del navegador); con 100vw la
+  // scrollbar, cuando aparece, robaba su ancho y el asa/cierre quedaba
+  // fuera de pantalla en el tamaño más estrecho.
+  width: min(var(--app-right-sidebar-width), 100% - 36px);
   transform: translateX(100%);
   transition: transform 0.25s ease;
 

package/scss/components/_base-pagination.scss

@@ -37,6 +37,10 @@
   }
 
   // Números de página clicables; el actual, marcado con aria-current.
+  // Los que NO son el actual van en caja como prev/next (fondo semiopaco +
+  // borde visibles ya en reposo); al hover, acento sutil: tinte de acento
+  // al 12% de fondo y el número en color de acento. El actual, como
+  // siempre: relleno de acento con texto de contraste.
   &__number {
     display: inline-flex;
     align-items: center;
@@ -44,17 +48,19 @@
     min-width: 32px;
     height: 32px;
     padding: 0 $space-1;
-    background: none;
-    border: 1px solid transparent;
+    background: color-mix(in srgb, $surface 65%, transparent);
+    border: 1px solid $border;
     border-radius: $radius-sm;
     color: $text-2;
     font-size: $fs-13;
+    // Más peso sin tocar el tamaño de la caja (32px se quedan como están).
+    font-weight: $k-fw-semibold;
     font-variant-numeric: tabular-nums;
-    transition: color 0.15s ease, border-color 0.15s ease;
+    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
 
     &:hover {
-      color: $text-1;
-      border-color: $border;
+      color: $accent-500;
+      background: color-mix(in srgb, $accent-500 12%, transparent);
     }
 
     &[aria-current="page"] {

package/scss/components/_multi-select.scss

@@ -17,6 +17,15 @@
     padding-block: 4px;
   }
 
+  // Variante compacta (prop compactTrigger): alto FIJO del select simple y
+  // resumen en una línea (el .base-select__value de arriba ya elipsa); las
+  // elegidas se pintan fuera (chips del consumidor), no dentro del trigger.
+  &--compact .base-select__trigger {
+    height: $input-height;
+    min-height: 0;
+    padding-block: 0;
+  }
+
   &__tags {
     display: flex;
     flex-wrap: wrap;

package/scss/components/_palette-color-picker.scss

@@ -32,9 +32,23 @@
     background: var(--swatch-color);
     color: #fff;
     cursor: pointer;
-    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
+    transition: box-shadow 0.15s, border-color 0.15s;
 
-    &:hover { transform: scale(1.06); }
+    // Realce al hover: SOLO halo (sombra), nunca transform — el
+    // scale(1.06) de antes rasterizaba el swatch (y sus 2px de borde) en
+    // fracciones de píxel durante la transición: al pasear el ratón por
+    // el formulario del modal de bloque la fila entera «bailaba» y los
+    // bordes finos vecinos parpadeaban (peor aún con zoom/DPI
+    // fraccionario). El halo se pinta fuera de la caja y no toca ni
+    // layout ni raster de los vecinos.
+    // (el seleccionado conserva su anillo: el halo solo aplica sin marcar)
+    &:hover:not(#{&}--selected) {
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--swatch-color) 40%, transparent);
+    }
+
+    &--custom-idle:hover:not(#{&}--selected) {
+      box-shadow: 0 0 0 3px color-mix(in srgb, #3b82f6 40%, transparent);
+    }
 
     &--selected { box-shadow: 0 0 0 2px $surface, 0 0 0 4px var(--swatch-color); }
 

package/src/components/AppRightSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import { Funnel, X } from '@lucide/vue'
 import { useAppRightSidebar } from '../composables/useAppRightSidebar'
 
@@ -17,7 +17,11 @@ import { useAppRightSidebar } from '../composables/useAppRightSidebar'
 // .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
+// fuera y Escape. Con `overlayAlways` el modo drawer vale para TODAS las
+// anchuras: la barra se superpone siempre al contenido (nunca le roba ancho
+// al main) y se abre/cierra igual que el drawer estrecho — para juegos que
+// prefieren no hacer hueco ni en escritorio. 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).
@@ -32,8 +36,19 @@ const props = withDefaults(
     closeLabel?: string
     /** Título por defecto si la vista registra sin título. */
     fallbackTitle?: string
+    /**
+     * Drawer superpuesto en TODAS las anchuras: nunca "atraca" (docked) ni
+     * le hace hueco el cascarón — siempre telón + superposición, como en
+     * estrecho. Por defecto, solo por debajo del corte de 900px.
+     */
+    overlayAlways?: boolean
   }>(),
-  { openLabel: 'Abrir el panel', closeLabel: 'Cerrar el panel', fallbackTitle: 'Filtros' },
+  {
+    openLabel: 'Abrir el panel',
+    closeLabel: 'Cerrar el panel',
+    fallbackTitle: 'Filtros',
+    overlayAlways: false,
+  },
 )
 
 const { hasContent, collapsed, mobileOpen, overlay, title, isOpen, toggle, closeMobile } =
@@ -44,10 +59,13 @@ const { hasContent, collapsed, mobileOpen, overlay, title, isOpen, toggle, close
 const OVERLAY_BREAKPOINT = 900
 
 function checkOverlay() {
-  overlay.value = window.innerWidth < OVERLAY_BREAKPOINT
+  overlay.value = props.overlayAlways || window.innerWidth < OVERLAY_BREAKPOINT
   if (!overlay.value) mobileOpen.value = false
 }
 
+// Si el consumidor cambia el modo en caliente, el estado se recalcula.
+watch(() => props.overlayAlways, checkOverlay)
+
 // En el drawer, Escape cierra (el click fuera lo cubre el telón).
 function onKeydown(e: KeyboardEvent) {
   if (e.key === 'Escape' && overlay.value && mobileOpen.value) closeMobile()

package/src/components/MultiSelect.vue

@@ -13,6 +13,11 @@ import type { SelectOption } from './BaseSelect.vue'
 // BaseSelect). El trigger pinta las elegidas como etiquetas con aspa: se
 // quitan desde ahí sin abrir el panel (también con Backspace); así no
 // hace falta ningún texto "N seleccionadas" que traducir.
+// Con `compactTrigger` (opt-in) el trigger NO crece: mantiene el alto fijo
+// del select simple y, en vez de etiquetas, pinta un resumen en una línea
+// (las elegidas separadas por comas, con elipsis); quitar una elegida
+// queda para fuera (el consumidor pinta sus propios chips) o para el
+// propio panel/Backspace. Sin la prop, todo sigue como siempre.
 const props = withDefaults(
   defineProps<{
     modelValue?: (string | number)[]
@@ -20,12 +25,17 @@ const props = withDefaults(
     options: SelectOption[]
     /** Texto en reposo (sin nada marcado), p. ej. "Todas". */
     placeholder?: string
+    /**
+     * Trigger compacto de alto fijo: resumen en una línea (labels con
+     * comas y elipsis) en lugar de etiquetas con aspa dentro del trigger.
+     */
+    compactTrigger?: boolean
     error?: string
     hint?: string
     disabled?: boolean
     id?: string
   }>(),
-  { modelValue: () => [], disabled: false },
+  { modelValue: () => [], disabled: false, compactTrigger: false },
 )
 
 const emit = defineEmits<{ 'update:modelValue': [value: string[]] }>()
@@ -44,6 +54,9 @@ const selectedValues = computed(() => new Set(props.modelValue.map((v) => String
 const isSelected = (option: SelectOption) => selectedValues.value.has(String(option.value))
 const selectedOptions = computed(() => props.options.filter((o) => isSelected(o)))
 
+/** Resumen de una línea del trigger compacto: labels separadas por comas. */
+const summary = computed(() => selectedOptions.value.map((o) => o.label).join(', '))
+
 /** Quita una elegida desde su etiqueta del trigger, sin tocar el panel. */
 function removeOption(option: SelectOption) {
   if (props.disabled) return
@@ -166,7 +179,7 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onOutside))
     <div
       ref="root"
       class="form-field__select-wrapper base-select multi-select"
-      :class="{ 'is-open': open }"
+      :class="{ 'is-open': open, 'multi-select--compact': compactTrigger }"
     >
       <button
         :id="selectId"
@@ -180,9 +193,13 @@ onBeforeUnmount(() => document.removeEventListener('mousedown', onOutside))
         @click="toggle"
         @keydown="onKeydown"
       >
+        <!-- Trigger compacto (opt-in): resumen en una línea, sin etiquetas -->
+        <span v-if="compactTrigger && selectedOptions.length" class="base-select__value">
+          {{ summary }}
+        </span>
         <!-- Elegidas como etiquetas con aspa (el aspa NO abre el panel);
              span con role=button porque un button no puede anidar otro -->
-        <span v-if="selectedOptions.length" class="multi-select__tags">
+        <span v-else-if="selectedOptions.length" class="multi-select__tags">
           <span v-for="option in selectedOptions" :key="option.value" class="multi-select__tag">
             {{ option.label }}
             <span