@edc-motor/ui 0.5.4 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edc-motor/ui",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "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/_form-field.scss

@@ -87,6 +87,23 @@ $icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000
     cursor: pointer;
   }
 
+  // MITIGACIÓN del «baile» al hover en el modal de bloque (DPI fraccionario):
+  // dentro de un modal, el realce de hover/focus es INSTANTÁNEO. La
+  // transición de border-color/box-shadow fuerza ~10 repintados seguidos con
+  // un área de invalidación mayor que el propio input (el box-shadow pinta
+  // fuera de su caja) y, con las filas del esquema en columnas de ancho
+  // fraccional (auto-fit 1fr) y un devicePixelRatio no entero (125%/150%),
+  // esa re-rasterización repetida puede hacer temblar los campos VECINOS.
+  // Un único repintado por cambio de estado elimina el tembleque sin tocar
+  // la geometría ni el aspecto final.
+  .modal & {
+    &__input,
+    &__textarea,
+    &__select {
+      transition: none;
+    }
+  }
+
   &--error &__input,
   &--error &__textarea,
   &--error &__select {

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,20 @@ 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 || (typeof window !== 'undefined' && window.innerWidth < OVERLAY_BREAKPOINT)
   if (!overlay.value) mobileOpen.value = false
 }
 
+// EAGER, en el propio setup (no esperar a mounted): que no exista NI UN
+// frame en el que overlayAlways pudiera pintarse como columna atracada
+// (p. ej. si el singleton del composable se recrea en caliente con HMR y
+// `overlay` vuelve a su valor inicial `false`).
+checkOverlay()
+
+// 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()
@@ -69,8 +94,13 @@ const handleLabel = computed(() => (isOpen.value ? props.closeLabel : props.open
 
 // 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)
+// de los selectores :has. Con `overlayAlways`, `--docked` es imposible por
+// construcción (aunque `overlay` aún no se hubiera recalculado): el
+// cascarón no puede hacerle hueco JAMÁS y el drawer estrecho es la única
+// versión que existe.
+const docked = computed(
+  () => !props.overlayAlways && hasContent.value && !overlay.value && !collapsed.value,
+)
 </script>
 
 <template>