<vadavo-dropdown> es el disparador y el menú que abre. Lo genera dentro de su propio shadow root la pieza que lo usa, donde un selector normal alcanza al dropdown y a todo lo que lo rodea.
La apertura y el cierre, y nada más: el disparador, el panel y las filas son marcado de quien lo genera.
open es un atributo reflejado. Pulsar el hijo directo con clase toggle lo alterna, Escape lo quita, y un clic fuera del dropdown también. Un clic fuera se reconoce con composedPath() del evento, no comprobando si el destino está contenido en el dropdown: un clic escuchado desde el documento llega con su destino sustituido por el host del shadow root donde ocurrió, así que un dropdown dentro de un shadow root leería cada clic propio como un clic fuera.
Un menú puede tener varios niveles: cada uno es un .column con data-branch, y una fila .option con data-opens abre el nivel que ese nombre designa.
Al apuntar una fila, el dropdown deja abierta la ruta de esa fila —el nivel que abre, el que la contiene y todos los de encima— y pliega el resto, de forma que solo hay una ruta abierta a la vez. Sin puntero encima, la ruta que queda es la de la fila marcada con data-selected, y ninguna si no hay ninguna marcada.
La fila que abre un nivel recibe el chevron que lo indica. El chevron es parte del menú, no contenido, y por eso lo añade el elemento en vez de pedírselo a quien escribe las filas.
| Token | Qué es |
|---|---|
--dropdown--radius--trigger | El radio de borde del disparador. |