@mks2508/sidebar-headless 0.2.1 → 0.3.1

package/dist/tooltip-keyframes.css

@@ -1,329 +0,0 @@
-/**
- * Tooltip Transition Keyframes
- *
- * Sistema de animaciones CSS para transiciones de tooltip con:
- * - Items staggered enter/exit
- * - Grid-based height transitions
- * - 3D title rotations
- *
- * Performance: GPU-accelerated (transform + opacity only)
- */
-
-/* ============================================================================
-   ITEMS ANIMATIONS - Staggered Enter/Exit
-   ============================================================================ */
-
-@keyframes tooltip-item-enter {
-  from {
-    opacity: 0;
-    transform: translateX(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes tooltip-item-exit {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-4px);
-  }
-}
-
-/**
- * Item States con CSS Custom Properties
- *
- * Uso: <div style="--animation-order: 0" data-state="entering">
- */
-.sidebar-sublink[data-state="entering"] {
-  animation: tooltip-item-enter 150ms cubic-bezier(0.4, 0, 0.2, 1);
-  animation-delay: calc(var(--animation-order, 0) * 30ms + 150ms);
-  animation-fill-mode: both;
-}
-
-.sidebar-sublink[data-state="leaving"] {
-  animation: tooltip-item-exit 100ms cubic-bezier(0.4, 0, 0.6, 1);
-  animation-delay: calc(var(--animation-order, 0) * 20ms);
-  animation-fill-mode: both;
-}
-
-/* ============================================================================
-   TITLE 3D ROTATIONS
-   ============================================================================ */
-
-/**
- * Title Rotate Up (direction-aware)
- * Usado cuando navegamos hacia arriba en el sidebar
- */
-@keyframes tooltip-title-rotate-up {
-  from {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  to {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes tooltip-title-enter-from-below {
-  from {
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-/**
- * Title Rotate Down (direction-aware)
- * Usado cuando navegamos hacia abajo en el sidebar
- */
-@keyframes tooltip-title-rotate-down {
-  from {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-  to {
-    transform: rotateX(90deg);
-    opacity: 0;
-  }
-}
-
-@keyframes tooltip-title-enter-from-above {
-  from {
-    transform: rotateX(-90deg);
-    opacity: 0;
-  }
-  to {
-    transform: rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-/**
- * Title States
- */
-.tooltip-title[data-direction="up"][data-state="leaving"] {
-  animation: tooltip-title-rotate-up 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="up"][data-state="entering"] {
-  animation: tooltip-title-enter-from-below 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="down"][data-state="leaving"] {
-  animation: tooltip-title-rotate-down 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-.tooltip-title[data-direction="down"][data-state="entering"] {
-  animation: tooltip-title-enter-from-above 250ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-/* ============================================================================
-   3D CUBE FACES (Enfoque A: Multi-cara)
-   ============================================================================ */
-
-/**
- * Cubo 3D con 6 caras para títulos
- *
- * Estructura:
- * .title-scene (perspective)
- *   └─ .title-cube (preserve-3d)
- *       ├─ .title-face--front
- *       ├─ .title-face--back
- *       ├─ .title-face--top
- *       ├─ .title-face--bottom
- *       ├─ .title-face--left
- *       └─ .title-face--right
- */
-
-.title-scene {
-  perspective: 600px;
-  position: relative;
-  width: 100%;
-  height: 2rem;
-}
-
-.title-cube {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
-  /* Empujar hacia atrás para evitar blur en texto */
-  transform: translateZ(-1rem);
-}
-
-.title-face {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 0 1rem;
-  font-weight: 500;
-}
-
-/* Posicionamiento de caras - Vertical rotation (rotateX) */
-.title-face--front {
-  transform: rotateX(0deg) translateZ(1rem);
-}
-
-.title-face--top {
-  transform: rotateX(90deg) translateZ(1rem);
-}
-
-.title-face--bottom {
-  transform: rotateX(-90deg) translateZ(1rem);
-}
-
-.title-face--back {
-  transform: rotateX(180deg) translateZ(1rem);
-}
-
-/* Estados del cubo - Direction-aware */
-.title-cube[data-face="front"] {
-  transform: translateZ(-1rem) rotateX(0deg);
-}
-
-.title-cube[data-face="top"] {
-  transform: translateZ(-1rem) rotateX(-90deg);
-}
-
-.title-cube[data-face="bottom"] {
-  transform: translateZ(-1rem) rotateX(90deg);
-}
-
-.title-cube[data-face="back"] {
-  transform: translateZ(-1rem) rotateX(180deg);
-}
-
-/* ============================================================================
-   GRID HEIGHT TRANSITION (Grid Trick)
-   ============================================================================ */
-
-/**
- * Grid trick para height: auto transitions
- *
- * Técnica: grid-template-rows: 0fr → 1fr
- * Browser support: Chrome 107+, Firefox 117+, Safari 16.4+
- */
-
-.tooltip-content-grid {
-  display: grid;
-  grid-template-rows: 0fr;
-  transition: grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition-delay: 50ms; /* Empieza después del fade-out de items */
-}
-
-.tooltip-content-grid[data-state="open"] {
-  grid-template-rows: 1fr;
-}
-
-.tooltip-content-inner {
-  overflow: hidden;
-  min-height: 0; /* Crítico para que grid trick funcione */
-}
-
-/* ============================================================================
-   UTILITY CLASSES
-   ============================================================================ */
-
-/**
- * Contenedor con perspective para títulos crossfade
- */
-.tooltip-title-perspective {
-  perspective: 600px;
-  position: relative;
-  width: 100%;
-  height: 2rem;
-  overflow: hidden;
-}
-
-/**
- * Disable animations durante hover rápido (opcional)
- * Usar con cuidado: puede causar flickering
- */
-.tooltip-no-animations * {
-  animation: none !important;
-  transition: none !important;
-}
-
-/* ============================================================================
-   DEBUG HELPERS
-   ============================================================================ */
-
-/**
- * Visualización de estados en debug mode
- */
-[data-tooltip-debug="true"] .sidebar-sublink[data-state]::before {
-  content: attr(data-state);
-  position: absolute;
-  top: 0;
-  right: 0;
-  font-size: 8px;
-  background: rgba(255, 0, 0, 0.8);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 1000;
-}
-
-[data-tooltip-debug="true"] .tooltip-title[data-direction]::after {
-  content: "dir:" attr(data-direction);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  font-size: 8px;
-  background: rgba(0, 0, 255, 0.8);
-  color: white;
-  padding: 2px 4px;
-  border-radius: 2px;
-  pointer-events: none;
-  z-index: 1000;
-}
-
-/* ============================================================================
-   PERFORMANCE OPTIMIZATIONS
-   ============================================================================ */
-
-/**
- * GPU acceleration hints
- */
-.sidebar-sublink[data-state],
-.tooltip-title[data-state],
-.title-cube {
-  will-change: transform, opacity;
-}
-
-/**
- * Contain layout/paint/style para mejor performance
- */
-.tooltip-content-grid {
-  contain: layout style paint;
-}
-
-/**
- * Reduce motion para accesibilidad
- */
-@media (prefers-reduced-motion: reduce) {
-  .sidebar-sublink[data-state],
-  .tooltip-title[data-state],
-  .title-cube,
-  .tooltip-content-grid {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}