@optionfactory/fml 9.0.0-rc24 → 9.0.0-rc25

package/dist/ful.mjs

@@ -1358,7 +1358,8 @@ const ownerOf = (el) =>
  *
  * Attributes on the host starting with `form-` are forwarded, without the
  * prefix, to the native form. `autocomplete` is copied onto the native form as
- * well and stays on the host, the fields reading it from either.
+ * well and stays on the host, the fields reading it from either; a
+ * `form-autocomplete` has the last word on the native form.
  * `clear-invalid-on-change` clears the custom validity of a field of this form
  * when a `change` event bubbles from it; the field's form is read from its
  * `form` property, or from `internals.form` for a form-associated element
@@ -1393,8 +1394,8 @@ class Form extends ParsedElement {
         const form = document.createElement('form');
         this.form = form;
         form.setAttribute('novalidate', '');
-        Attributes.forward('form-', this, form);
         Attributes.set(form, 'autocomplete', this.declared('autocomplete'));
+        Attributes.forward('form-', this, form);
         form.replaceChildren(...this.childNodes);
         form.addEventListener('submit', async (e) => {
             e.preventDefault();
@@ -5582,7 +5583,9 @@ const TYPEAHEAD_WINDOW = 500;
  * `items` answers the items in the order they are walked, and is called on
  * every gesture, so a menu that fills itself later needs no rewiring.
  *
- * @param {HTMLElement} invoker the element the menu belongs to, and where the focus goes back
+ * @param {() => HTMLElement|null} invoker answers the element the menu belongs to
+ *   now, where the focus goes back; called on every gesture, so a menu shared
+ *   by several invokers hands the focus back to the one that opened it
  * @param {HTMLElement} menu the `[popover]` holding the items
  * @param {{items: () => HTMLElement[], current?: () => HTMLElement|null|undefined}} conf
  *   `items` answers the items; `current` answers the item an opening focuses
@@ -5592,7 +5595,7 @@ const wireMenuKeys = (invoker, menu, { items, current = () => null }) => {
     let typedAt = 0;
     menu.addEventListener('beforetoggle', (/** @type any */ evt) => {
         if (evt.newState === 'closed' && menu.contains(document.activeElement)) {
-            invoker.focus();
+            invoker()?.focus();
         }
     });
     menu.addEventListener('toggle', (/** @type any */ evt) => {
@@ -5636,11 +5639,11 @@ const wireMenuKeys = (invoker, menu, { items, current = () => null }) => {
             case 'Space': {
                 evt.preventDefault();
                 item.click();
-                invoker.focus();
+                invoker()?.focus();
                 return;
             }
             case 'Escape': {
-                invoker.focus();
+                invoker()?.focus();
                 return;
             }
         }
@@ -5865,7 +5868,7 @@ class ChoiceButton {
     }
     #wire() {
         Anchors.wire(this.#button, this.#menu, { prefix: 'ful-filter-menu', invoke: true, expanded: true });
-        wireMenuKeys(this.#button, this.#menu, {
+        wireMenuKeys(() => this.#button, this.#menu, {
             items: () => this.#items(),
             current: () => this.#items().find((a) => a.getAttribute('value') === this.value),
         });
@@ -7577,11 +7580,15 @@ class Drawer extends ParsedElement {
 }
 
 /**
- * A menu of commands on the native popover platform, opened by the element
- * whose id `for` names. The menu is the popover itself: light dismiss and
- * Escape come from the browser, and it is anchored to its invoker through
+ * A menu of commands on the native popover platform. The menu is the popover
+ * itself: light dismiss and Escape come from the browser.
+ *
+ * A menu naming an invoker by id through `for` belongs to that element: the
+ * invoker toggles it, and it is anchored to the invoker through
  * `Anchors.wire`, placed in script where the platform has no css anchor
- * positioning.
+ * positioning. A menu without `for` is shared: one menu serves many
+ * invokers, such as the "more" button of every row of a list, and a page
+ * opens it beside the invoker it is for with `showFor(invoker)`.
  *
  * The items are the buttons and `a[href]` links written as its direct
  * children, kept as they are. Activation is the item's own click, which the
@@ -7591,34 +7598,44 @@ class Drawer extends ParsedElement {
  * The keyboard is the ARIA menu protocol: the focus moves to the
  * first item as the menu opens, the arrows, Home and End walk the items,
  * typing searches their text, Enter and Space activate the focused one, and
- * Escape and a close from inside the menu hand the focus back to the invoker.
+ * Escape and a close from inside the menu hand the focus back to the invoker
+ * that opened it.
  */
 class Menu extends ParsedElement {
     /** @type {string[]} */
     static attributes = ['for'];
+    /** @type {HTMLElement|null} */
+    #invoker = null;
+    /** @type {HTMLElement|null} */
+    #pressed = null;
     /**
      * Gives the menu the `menu` role and an empty `popover` attribute unless
-     * it already has one, gives the invoker `aria-haspopup="menu"`, an
-     * `aria-expanded` kept in step, and the toggle of the menu, and marks the
-     * items. `for` is read here, once.
+     * it already has one, and marks the items. With `for`, read here once, it
+     * also gives the invoker `aria-haspopup="menu"`, an `aria-expanded` kept
+     * in step, and the toggle of the menu.
      * @returns {void}
-     * @throws {Error} when `for` names no element in the document at the render
+     * @throws {Error} when `for` is given and names no element in the document at the render
      */
     render() {
         const named = this.declared('for');
         const invoker = named ? document.getElementById(named) : null;
-        if (!invoker) {
+        if (named && !invoker) {
             throw new Error(
-                `ful-menu names no invoker: for="${named ?? ''}" must name an element already in the page when the menu upgrades`,
+                `ful-menu names no invoker: for="${named}" must name an element already in the page when the menu upgrades`,
             );
         }
         this.setAttribute('role', 'menu');
         if (!this.hasAttribute('popover')) {
             this.setAttribute('popover', '');
         }
-        invoker.setAttribute('aria-haspopup', 'menu');
-        Anchors.wire(invoker, this, { prefix: 'ful-menu', invoke: true, expanded: true });
-        wireMenuKeys(invoker, this, { items: () => this.items });
+        if (invoker) {
+            this.#invoker = invoker;
+            invoker.setAttribute('aria-haspopup', 'menu');
+            Anchors.wire(invoker, this, { prefix: 'ful-menu', invoke: true, expanded: true });
+        } else {
+            this.#wireShared();
+        }
+        wireMenuKeys(() => this.#invoker, this, { items: () => this.items });
         this.#mark();
         this.addEventListener('click', (evt) => {
             const target = /** @type HTMLElement */ (evt.target);
@@ -7627,6 +7644,43 @@ class Menu extends ParsedElement {
             }
         });
     }
+    /**
+     * Opens a shared menu, one without `for`, beside `invoker`, or moves it
+     * there when it is open for another one. The menu goes below the invoker,
+     * or above it where there is no room below, and is placed once, as
+     * `Anchors.show` places it. The invoker gets `aria-haspopup="menu"` and an
+     * `aria-expanded` that reads true until the menu closes, and the focus
+     * goes back to it on Escape. A call for the invoker whose press has just
+     * closed the menu does nothing, so a second click on the same button
+     * closes the menu rather than opening it again.
+     * @param {HTMLElement} invoker the element the menu opens for
+     * @returns {void}
+     * @throws {Error} when the menu names its invoker through `for`
+     */
+    showFor(invoker) {
+        if (this.declared('for')) {
+            throw new Error('ful-menu: showFor serves a menu without for; a menu with for is opened by its invoker');
+        }
+        const pressed = this.#pressed;
+        this.#pressed = null;
+        if (pressed === invoker) {
+            return;
+        }
+        if (this.#invoker && this.#invoker !== invoker) {
+            this.#invoker.setAttribute('aria-expanded', 'false');
+        }
+        this.#invoker = invoker;
+        invoker.setAttribute('aria-haspopup', 'menu');
+        invoker.setAttribute('aria-expanded', 'true');
+        //the previous placement wrote margin: 0 inline, hiding the stylesheet's gap
+        this.style.margin = '';
+        const gap = Number.parseFloat(getComputedStyle(this).marginBlockStart) || 0;
+        const moving = this.matches(':popover-open');
+        Anchors.show(this, invoker, { flip: true, gap });
+        if (moving) {
+            this.items[0]?.focus();
+        }
+    }
     /**
      * The commands, in the order the arrows walk them: the menu's direct
      * `button` and `a[href]` children, minus those carrying a `disabled` or
@@ -7638,6 +7692,21 @@ class Menu extends ParsedElement {
     get items() {
         return this.#mark().filter((item) => !item.hasAttribute('disabled') && !item.hasAttribute('hidden'));
     }
+    #wireShared() {
+        document.addEventListener(
+            'pointerdown',
+            (evt) => {
+                const target = /** @type Node */ (evt.target);
+                this.#pressed = this.matches(':popover-open') && this.#invoker?.contains(target) ? this.#invoker : null;
+            },
+            true,
+        );
+        this.addEventListener('toggle', (/** @type any */ evt) => {
+            if (evt.newState === 'closed') {
+                this.#invoker?.setAttribute('aria-expanded', 'false');
+            }
+        });
+    }
     /** @returns {HTMLElement[]} every item, disabled and hidden ones included, once marked */
     #mark() {
         const all = /** @type HTMLElement[] */ ([...this.querySelectorAll(':scope > button, :scope > a[href]')]);