♻️ (dropdown): Integra Dropdown con accessible-menu

Renombra `dropdown.init.js` a `basic.dropdown.init.js` y añade cierre
cruzado entre menús abiertos y cierre al clicar fuera. Corrige el icono
de apertura/cierre y el estado cerrado por defecto de dropdown-menu.
Migra `with_item` de `ChildOp` a `TypedOp<dropdown::Item>`.

assets/css/basic.css

@@ -365,18 +365,14 @@ input:disabled + label {
     cursor: pointer;
 }
 .dropdown-toggle::after {
-    content: "";
+    content: "\25BC";
     display: inline-block;
-    width: 0.4em;
-    height: 0.4em;
     margin-left: 0.35em;
-    border-right: 0.125em solid currentColor;
+    font-size: 0.8em;
-    border-bottom: 0.125em solid currentColor;
-    transform: rotate(45deg);
     transition: transform .15s ease-in-out;
 }
 .dropdown:has(> .dropdown-menu.show) > .dropdown-toggle::after {
-    transform: rotate(-135deg);
+    transform: rotate(180deg);
 }
 
 .dropdown-menu {
@@ -392,10 +388,12 @@ input:disabled + label {
     border: 1px solid color-mix(in srgb, var(--val-color--border) 15%, var(--val-color--bg));
     border-radius: 0.375rem;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
-}
+    /* Closed by default */
-.dropdown-menu.hide {
     display: none;
 }
+.dropdown-menu.show {
+    display: block;
+}
 
 .dropdown-item {
     display: block;

assets/js/basic.dropdown.init.js

@@ -0,0 +1,66 @@
+// Conecta cada `Dropdown` (standalone o embebido en un `Nav`) con `accessible-menu` (ver
+// basic.menu.min.js), que añade los roles ARIA, el `aria-expanded` y la navegación por teclado
+// sobre el marcado ya generado en el servidor. Selecciona por clase, no por etiqueta, porque el
+// disparador es un `<button>` en un `Dropdown` independiente y un `<a>` cuando cuelga de un
+// `nav::Item::dropdown()`.
+document.querySelectorAll(".dropdown > .dropdown-toggle").forEach(function (toggle) {
+    var container = toggle.parentElement;
+    var menu = container.querySelector(":scope > .dropdown-menu");
+    if (!menu) {
+        return;
+    }
+
+    new TopLinkDisclosureMenu({
+        menuElement: menu,
+        containerElement: container,
+        controllerElement: toggle,
+        // `Header`/`Divider`/`Label` no son interactivos: se excluyen de `menuItemSelector`
+        // (si no, la librería asume que todo `<li>` tiene un enlace y lanza un TypeError al
+        // intentar añadirle listeners de foco).
+        menuItemSelector: "li:has(> a.dropdown-item, > button.dropdown-item)",
+        menuLinkSelector: "a.dropdown-item, button.dropdown-item",
+        // La navegación con flechas/Home/End es opcional en la librería (`false` por defecto);
+        // se activa para igualar el comportamiento habitual de un menú desplegable.
+        optionalKeySupport: true,
+    });
+});
+
+// Cada `TopLinkDisclosureMenu` es independiente: al hacer clic fuera sólo cierra su propio menú
+// (ver `_handleClick()` en accessible-menu), así que abrir un desplegable no cierra otro que ya
+// estuviera abierto en otra parte de la página. Se corrige aquí escuchando `accessibleMenuExpand`
+// -evento que la librería emite en cada apertura- y cerrando el resto de menús de nivel superior
+// ya registrados, vía `window.AccessibleMenu.menus`, el registro global que la propia librería
+// mantiene con todas las instancias (incluye las de `basic.menu.init.js`).
+document.addEventListener("accessibleMenuExpand", function (event) {
+    var openedToggle = event.detail.toggle;
+    var menus = (window.AccessibleMenu && window.AccessibleMenu.menus) || {};
+    Object.values(menus).forEach(function (menu) {
+        var controller = menu.elements.controller;
+        if (controller && controller !== openedToggle) {
+            controller.close();
+        }
+    });
+});
+
+// El cierre "al hacer clic fuera" que trae la librería no funciona para un `controllerElement` de
+// nivel superior como el nuestro: en `toggleToggle()` (accessible-menu), al abrir, hace
+// `menu.focusState = "self"` y a continuación `toggle.elements.controlledMenu.focusState =
+// "none"` -pensado para cuando el toggle abre un submenú hijo distinto del menú que lo contiene-,
+// pero aquí `menu` y `toggle.elements.controlledMenu` son el mismo objeto: la segunda asignación
+// deshace la primera. El cierre nativo de la librería depende de `focusState !== "none"`, así que
+// nunca se dispara aunque el menú esté abierto (`isOpen` sí queda correcto). Se sustituye aquí por
+// una comprobación propia basada sólo en `isOpen` y en la posición del clic.
+document.addEventListener("click", function (event) {
+    var menus = (window.AccessibleMenu && window.AccessibleMenu.menus) || {};
+    Object.values(menus).forEach(function (menu) {
+        var controller = menu.elements.controller;
+        if (
+            controller &&
+            controller.isOpen &&
+            !menu.dom.menu.contains(event.target) &&
+            !controller.dom.toggle.contains(event.target)
+        ) {
+            controller.close();
+        }
+    });
+});

assets/js/dropdown.init.js

@@ -1,26 +0,0 @@
-// Conecta cada `Dropdown` (standalone o embebido en un `Nav`) con `accessible-menu` (ver
-// basic.menu.min.js), que añade los roles ARIA, el `aria-expanded` y la navegación por teclado
-// sobre el marcado ya generado en el servidor. Selecciona por clase, no por etiqueta, porque el
-// disparador es un `<button>` en un `Dropdown` independiente y un `<a>` cuando cuelga de un
-// `nav::Item::dropdown()`.
-document.querySelectorAll(".dropdown > .dropdown-toggle").forEach(function (toggle) {
-    var container = toggle.parentElement;
-    var menu = container.querySelector(":scope > .dropdown-menu");
-    if (!menu) {
-        return;
-    }
-
-    new TopLinkDisclosureMenu({
-        menuElement: menu,
-        containerElement: container,
-        controllerElement: toggle,
-        // `Header`/`Divider`/`Label` no son interactivos: se excluyen de `menuItemSelector`
-        // (si no, la librería asume que todo `<li>` tiene un enlace y lanza un TypeError al
-        // intentar añadirle listeners de foco).
-        menuItemSelector: "li:has(> a.dropdown-item, > button.dropdown-item)",
-        menuLinkSelector: "a.dropdown-item, button.dropdown-item",
-        // La navegación con flechas/Home/End es opcional en la librería (`false` por defecto);
-        // se activa para igualar el comportamiento habitual de un menú desplegable.
-        optionalKeySupport: true,
-    });
-});

src/base/component/dropdown.rs

@@ -4,4 +4,4 @@ mod component;
 pub use component::Dropdown;
 
 mod item;
-pub use item::Item;
+pub use item::{Item, ItemKind};

src/base/component/dropdown/component.rs

@@ -1,6 +1,6 @@
 use crate::prelude::*;
 
-/// Componente para crear un **menú de acciones desplegable**.
+/// Componente para crear un **menú desplegable**.
 ///
 /// Renderiza un botón (único o desdoblado, ver [`with_button_split()`](Self::with_button_split))
 /// que despliega u oculta una lista de elementos [`dropdown::Item`](super::Item).
@@ -29,7 +29,7 @@ pub struct Dropdown {
     props: Props,
     /// Devuelve el título del menú desplegable.
     title: Lc,
-    /// Devuelve si el botón se desdobla (*split*) en botón de acción + *toggle*.
+    /// Devuelve si el botón se desdobla (*split*) en botón de acción más *toggle*.
     button_split: bool,
     /// Devuelve la lista de elementos del menú.
     items: Children,
@@ -119,28 +119,31 @@ impl Dropdown {
         self
     }
 
-    /// Activa/desactiva el modo *split* (botón de acción + *toggle*).
+    /// Activa/desactiva el modo *split* (botón de acción más *toggle*).
     #[builder_fn]
     pub fn with_button_split(mut self, split: bool) -> Self {
         self.button_split = split;
         self
     }
 
-    /// Añade un nuevo elemento al menú o modifica la lista de elementos del menú con una
+    /// Añade un nuevo elemento al menú o modifica la lista de elementos del menú con una operación
-    /// operación [`ChildOp`].
+    /// [`TypedOp`].
     ///
     /// # Ejemplo
     ///
-    /// ```rust,ignore
+    /// ```rust,no_run
-    /// dropdown.with_item(dropdown::Item::link("Opción", "/ruta"));
+    /// use pagetop::prelude::*;
-    /// dropdown.with_item(ChildOp::AddMany(vec![
+    ///
-    ///     dropdown::Item::link(...).into(),
+    /// let dd = dropdown::Dropdown::new()
-    ///     dropdown::Item::divider().into(),
+    ///     .with_item(dropdown::Item::link(Lc::n("Option"), "/path/to/option"))
-    ///     dropdown::Item::link(...).into(),
+    ///     .with_item(TypedOp::AddMany(vec![
+    ///         dropdown::Item::link(Lc::n("Other"), "/path/to/other"),
+    ///         dropdown::Item::divider(),
+    ///         dropdown::Item::link(Lc::n("Home"), "/"),
     ///     ]));
     /// ```
     #[builder_fn]
-    pub fn with_item(mut self, op: impl Into<ChildOp>) -> Self {
+    pub fn with_item(mut self, op: impl Into<TypedOp<dropdown::Item>>) -> Self {
         self.items.alter_child(op.into());
         self
     }

src/base/theme/basic.rs

@@ -28,7 +28,7 @@ impl Theme for Basic {
             JavaScript::defer("/pagetop/js/basic.menu.min.js").with_version("4.4.0"),
         ))
         .alter_assets(AssetsOp::AddJavaScript(
-            JavaScript::defer("/pagetop/js/dropdown.init.js").with_version(PAGETOP_VERSION),
+            JavaScript::defer("/pagetop/js/basic.dropdown.min.js").with_version(PAGETOP_VERSION),
         ))
         .alter_assets(AssetsOp::AddJavaScript(
             JavaScript::defer("/pagetop/js/basic.dialog.min.js").with_version(PAGETOP_VERSION),