/* ════════════════════════════════════════════════════════════════════ Milpa — components (el frijol) · @milpa/design Requiere: dist/milpa-tokens.css + primitives/milpa-primitives.css + motion/milpa-motion.css (keyframes milpa-* y contrato reduced-motion). Sigue el molde de primitives/milpa-primitives.css — mismas convenciones. Cascada: este archivo vive en @layer — el CSS del consumidor/plugin gana sin !important (THEMING.md). ════════════════════════════════════════════════════════════════════ */ @layer milpa.tokens, milpa.motion, milpa.primitives, milpa.components, milpa.artifacts, milpa.layouts; @layer milpa.components { /* ════════════════════════════════════════════════════════════════════ cluster · floating ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ Milpa — components · floating (Tooltip + Menu) · @milpa/design Requiere: dist/milpa-tokens.css + motion/milpa-motion.css (aporta @keyframes milpa-scale-in y el contrato global de prefers-reduced-motion) + primitives/milpa-primitives.css (el molde: box-sizing, .mui-btn). ════════════════════════════════════════════════════════════════════ */ /* ---------- Tooltip · .mui-tooltip ---------- CSS-only: el host lleva data-tip="texto" y ::after lo pinta. Inversión de tema token-pure: fondo var(--text) + tinta var(--bg) — el par text/bg ya está verificado AA y el ratio es simétrico (17.2:1 dark · 15.0:1 light). SOLO para info REDUNDANTE/decorativa: attr() no llega de forma fiable al árbol de accesibilidad — el patrón vive en el contrato. */ .mui-tooltip { position: relative; } .mui-tooltip::after { --_center: translateX(-50%); /* centrado estático por posición */ content: attr(data-tip); position: absolute; z-index: var(--z-tooltip); bottom: calc(100% + var(--space-1_5)); left: 50%; width: max-content; max-width: 16rem; padding: var(--space-1_5) var(--space-2); font-family: var(--font-display); font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); white-space: normal; background: var(--text); color: var(--bg); border-radius: var(--radius-sm); pointer-events: none; /* jamás captura el cursor */ opacity: 0; transform: var(--_center) translateY(2px); /* germina: rise de 2px al asentarse */ transition: opacity var(--dur-fast) var(--ease-settle), transform var(--dur-fast) var(--ease-settle); } .mui-tooltip:hover::after, .mui-tooltip:focus-visible::after, .mui-tooltip:focus-within::after { opacity: 1; transform: var(--_center); transition-delay: var(--dur-base); /* intención de hover: delay SOLO a la entrada */ } /* posiciones — top es el default. El rise siempre es vertical: germinar = subir. */ .mui-tooltip--bottom::after { bottom: auto; top: calc(100% + var(--space-1_5)); } .mui-tooltip--start::after { --_center: translateY(-50%); bottom: auto; top: 50%; left: auto; inset-inline-end: calc(100% + var(--space-1_5)); } .mui-tooltip--end::after { --_center: translateY(-50%); bottom: auto; top: 50%; left: auto; inset-inline-start: calc(100% + var(--space-1_5)); } /* ---------- Menu · .mui-menu ---------- Panel de dropdown. bg var(--overlay) + borde var(--border-strong): en dark, border-subtle es el mismo paso de tierra que overlay y border a secas mide 2.17:1 sobre --surface — border-strong asegura el boundary 3:1 sobre --bg y --surface, los fondos típicos de un dropdown (regla 1: el borde define; pares ya gateados en CI). Cerrado con [hidden]; al abrir germina (milpa-scale-in) desde el trigger. El posicionamiento fino y el comportamiento (foco, teclas, click-fuera) los aporta el consumidor — ver contrato a11y.behavior. */ .mui-menu { position: absolute; /* insets auto: cae bajo el trigger hermano dentro de un contenedor position:relative */ z-index: var(--z-dropdown); min-width: 12rem; margin: 0; padding: var(--space-1); list-style: none; /* reset por si el consumidor usa