@optionfactory/fml 9.0.0-rc12 → 9.0.0-rc13

package/dist/fml.iife.js

@@ -8531,7 +8531,18 @@ var fml = (function (exports) {
             if (invoke) {
                 //popovertarget needs a target that can be named
                 popover.id = popover.id || uid;
-                invoker.setAttribute('popovertarget', popover.id);
+                if (invoker.localName === 'button' || invoker.localName === 'input') {
+                    invoker.setAttribute('popovertarget', popover.id);
+                } else {
+                    invoker.addEventListener('click', () => popover.togglePopover());
+                    invoker.addEventListener('keydown', (/** @type any */ evt) => {
+                        if (evt.key !== 'Enter' && evt.key !== ' ') {
+                            return;
+                        }
+                        evt.preventDefault();
+                        popover.togglePopover();
+                    });
+                }
             }
             const anchor = `--${uid}`;
             invoker.style.anchorName = anchor;
@@ -9143,7 +9154,7 @@ var fml = (function (exports) {
                 //the select's: a tooltip marker slotted into `info`, a button a page
                 //put in an affix. Without this, reading the note beside a select
                 //also stole the focus and dropped the dropdown over the note
-                const elsewhere = e.target.closest('button, a[href], input, select, textarea');
+                const elsewhere = e.target.closest('button, [role="button"], a[href], input, select, textarea');
                 if (elsewhere && elsewhere !== this.#input) {
                     return;
                 }
@@ -11074,7 +11085,6 @@ var fml = (function (exports) {
      */
     class InFilter extends Select {
         static attributes = ['operator'];
-        /** the selection as the array the wire takes, whether one key was chosen or many */
         #keys() {
             const chosen = super.value;
             if (this.multiple) {
@@ -11095,8 +11105,6 @@ var fml = (function (exports) {
         set value(v) {
             const operator = this.declared('operator');
             let keys = v === null || v === undefined ? [] : Array.isArray(v) ? v : [v];
-            //what the getter answers has to be assignable back, and it carries the
-            //operator in front of the keys
             if (operator && keys[0] === operator) {
                 keys = keys.slice(1);
             }
@@ -11243,7 +11251,7 @@ var fml = (function (exports) {
             icon: 'info-circle-fill',
         };
         static template = `
-        <button type="button" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></button>
+        <span role="button" tabindex="0" class="ful-tip" data-ref="trigger" data-tpl-aria-label="#l10n:t('info.tooltip')"><ful-icon data-tpl-name="icon ?? config.icon" aria-hidden="true"></ful-icon></span>
         <ful-note popover data-ref="content">{{{{ slots.default }}}}</ful-note>
     `;
         render({ slots }) {
@@ -11352,10 +11360,18 @@ var fml = (function (exports) {
                 this.dispatchEvent(new CustomEvent('close', { detail: outcome }));
                 this.#settle(outcome);
             });
+            let pressedOutside = false;
+            this.#dialog.addEventListener('mousedown', (/** @type any */ e) => {
+                pressedOutside = e.target === this.#dialog;
+            });
             this.#dialog.addEventListener('click', (/** @type any */ e) => {
                 const result = e.target.closest('button[data-result]')?.dataset.result;
                 if (result !== undefined) {
                     this.#dialog.close(result);
+                    return;
+                }
+                if (!requiresAnswer && pressedOutside && e.target === this.#dialog) {
+                    this.#dialog.close('');
                 }
             });
             //dismissal, not an answer: the waiters are settled with a dismissal, as
@@ -11557,6 +11573,15 @@ var fml = (function (exports) {
                 this.#dialog.setAttribute('placement', placement);
             }
             fragment.querySelector('[data-ref=close]').addEventListener('click', () => this.close());
+            let pressedOutside = false;
+            this.#dialog.addEventListener('mousedown', (e) => {
+                pressedOutside = e.target === this.#dialog;
+            });
+            this.#dialog.addEventListener('click', (e) => {
+                if (pressedOutside && e.target === this.#dialog) {
+                    this.close();
+                }
+            });
             this.#dialog.addEventListener('close', () => {
                 this.dispatchEvent(
                     new CustomEvent('close', { detail: this.#answer ?? { dismissed: true, response: null } }),