@mks2508/sidebar-headless 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MKS2508
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,251 @@
+# @mks2508/sidebar-headless
+
+Headless sidebar component for React with advanced animations, keyboard navigation, and full WAI-ARIA accessibility.
+
+[![npm version](https://img.shields.io/npm/v/@mks2508/sidebar-headless.svg)](https://www.npmjs.com/package/@mks2508/sidebar-headless)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 🎨 **Headless Architecture** - Complete control over styling and behavior
+- ⌨️ **Keyboard Navigation** - Full arrow key, Home/End support
+- ♿ **WAI-ARIA Compliant** - Full accessibility out of the box
+- 🎭 **Advanced Animations** - Fluid hover indicators, glassmorphism effects, 3D transforms
+- 🎯 **TypeScript First** - Full type safety with comprehensive declarations
+- 🪶 **Lightweight** - Minimal dependencies (only clsx + tailwind-merge)
+- 🎨 **Dark/Light Mode** - Automatic theme support via CSS tokens
+- 🔧 **Highly Configurable** - Extensive customization options
+
+## Installation
+
+```bash
+npm install @mks2508/sidebar-headless
+# or
+yarn add @mks2508/sidebar-headless
+# or
+pnpm add @mks2508/sidebar-headless
+# or
+bun add @mks2508/sidebar-headless
+```
+
+### Peer Dependencies
+
+This package requires React 18+:
+
+```bash
+npm install react react-dom
+```
+
+### Optional Dependencies
+
+For advanced liquid glass effects (optional):
+
+```bash
+npm install @liquid-svg-glass/core @liquid-svg-glass/react
+```
+
+## Quick Start
+
+```tsx
+import {
+  Sidebar,
+  SidebarNav,
+  SidebarToggle,
+  SidebarContent,
+  SidebarItem,
+  SidebarIconLibrary
+} from '@mks2508/sidebar-headless'
+import '@mks2508/sidebar-headless/styles.css'
+
+function App() {
+  return (
+    <Sidebar defaultOpen={true}>
+      <SidebarNav>
+        <SidebarToggle iconLibrary={SidebarIconLibrary.LUCIDE} />
+        <SidebarContent>
+          <SidebarItem href="/" icon={<HomeIcon />} label="Home" />
+          <SidebarItem href="/settings" icon={<SettingsIcon />} label="Settings" />
+        </SidebarContent>
+      </SidebarNav>
+    </Sidebar>
+  )
+}
+```
+
+## Core Components
+
+### Sidebar (Root Provider)
+
+The main container that provides context to all child components.
+
+```tsx
+<Sidebar
+  defaultOpen={true}
+  collapseMode="hide"
+  layoutBehaviour="floating"
+>
+  {/* ... */}
+</Sidebar>
+```
+
+### SidebarNav
+
+Navigation container with event management.
+
+```tsx
+<SidebarNav>
+  <SidebarToggle />
+  <SidebarContent>
+    {/* items */}
+  </SidebarContent>
+</SidebarNav>
+```
+
+### SidebarItem
+
+Individual navigation item with optional sub-content.
+
+```tsx
+<SidebarItem
+  href="/dashboard"
+  icon={<DashboardIcon />}
+  label="Dashboard"
+>
+  <SidebarSubContent title="Dashboard">
+    <SidebarSubLink href="/analytics">Analytics</SidebarSubLink>
+    <SidebarSubLink href="/reports">Reports</SidebarSubLink>
+  </SidebarSubContent>
+</SidebarItem>
+```
+
+## Configuration Options
+
+### Collapse Modes
+
+```tsx
+import { SidebarCollapseMode } from '@mks2508/sidebar-headless'
+
+// Collapse to icon-only width
+<Sidebar collapseMode={SidebarCollapseMode.COLLAPSE} />
+
+// Hide completely
+<Sidebar collapseMode={SidebarCollapseMode.HIDE} />
+```
+
+### Layout Behaviours
+
+```tsx
+import { SidebarLayoutBehaviour } from '@mks2508/sidebar-headless'
+
+// Floating sidebar (doesn't push content)
+<Sidebar layoutBehaviour={SidebarLayoutBehaviour.FLOATING} />
+
+// Inline sidebar (pushes content)
+<Sidebar layoutBehaviour={SidebarLayoutBehaviour.INLINE} />
+```
+
+### Custom Dimensions
+
+```tsx
+<Sidebar
+  dimensions={{
+    collapsedWidth: "4rem",
+    expandedWidth: "18rem",
+    indicatorHeight: "3rem",
+    tooltipDistance: "16px"
+  }}
+/>
+```
+
+## Advanced Features
+
+### Fluid Indicators
+
+Enable glassmorphism-style hover indicators:
+
+```tsx
+<Sidebar
+  enableFluidIndicator={true}
+  liquidGlass={{
+    enableLiquidGlassV2: true,
+    enableChromaticAberration: true
+  }}
+/>
+```
+
+### Keyboard Navigation
+
+Built-in keyboard shortcuts:
+
+- **Arrow Up/Down**: Navigate between items
+- **Home**: Jump to first item
+- **End**: Jump to last item
+- **Enter**: Activate focused item
+
+### Render Props
+
+Access sidebar state via render props:
+
+```tsx
+<Sidebar>
+  {({ open, collapsed }) => (
+    <div>
+      <SidebarNav />
+      <p>Sidebar is {open ? 'open' : 'closed'}</p>
+    </div>
+  )}
+</Sidebar>
+```
+
+## Styling
+
+The sidebar uses shadcn-style CSS tokens for theming:
+
+```css
+:root {
+  --sidebar: oklch(98% 0 0);
+  --sidebar-foreground: oklch(20% 0 0);
+  --sidebar-primary: oklch(55% 0.2 250);
+  --sidebar-accent: oklch(95% 0.01 250);
+  --sidebar-border: oklch(90% 0.01 250);
+  --sidebar-ring: oklch(55% 0.2 250);
+}
+
+.dark {
+  --sidebar: oklch(17% 0 0);
+  --sidebar-foreground: oklch(90% 0 0);
+  /* ... */
+}
+```
+
+## TypeScript Support
+
+Full TypeScript support with comprehensive type definitions:
+
+```tsx
+import type {
+  SidebarProps,
+  SidebarItemProps,
+  SidebarContextValue
+} from '@mks2508/sidebar-headless'
+```
+
+## Browser Support
+
+- Chrome/Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+- Modern browsers with ES2020 support
+
+## License
+
+MIT © MKS2508
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Links
+
+- [GitHub Repository](https://github.com/mks2508/sidebar-headless)
+- [Report Issues](https://github.com/mks2508/sidebar-headless/issues)

package/dist/index.css

@@ -0,0 +1,238 @@
+/* src/components/ui/text-cylinder.module.css */
+.container {
+  position: relative;
+  overflow: hidden;
+  perspective: var(--cylinder-perspective, 1000px);
+}
+.cylinder {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transform: rotateX(var(--cylinder-rotation, 0deg));
+}
+.face {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backface-visibility: hidden;
+  transition: opacity 0.3s ease;
+}
+.face.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.face.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.cylinder.animating .face {
+  will-change: opacity;
+}
+.cylinder.animating {
+  will-change: transform;
+}
+
+/* src/animations/tooltip-keyframes.css */
+@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);
+  }
+}
+.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;
+}
+@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;
+  }
+}
+@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;
+  }
+}
+.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;
+}
+.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);
+  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;
+}
+.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);
+}
+.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);
+}
+.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;
+}
+.tooltip-content-grid[data-state=open] {
+  grid-template-rows: 1fr;
+}
+.tooltip-content-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+.tooltip-title-perspective {
+  perspective: 600px;
+  position: relative;
+  width: 100%;
+  height: 2rem;
+  overflow: hidden;
+}
+.tooltip-no-animations * {
+  animation: none !important;
+  transition: none !important;
+}
+[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;
+}
+.sidebar-sublink[data-state],
+.tooltip-title[data-state],
+.title-cube {
+  will-change: transform, opacity;
+}
+.tooltip-content-grid {
+  contain: layout style paint;
+}
+@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;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

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