@optionfactory/fml 9.0.0-rc22 → 9.0.0-rc24

package/dist/ful.mjs

@@ -693,6 +693,11 @@ class Bindings {
      * `rest` being the remainder of the path (`''` on an exact match) that a
      * composite can use to route the problem to an inner control.
      *
+     * A control counts only when it can show a problem, through a
+     * `setCustomValidity` of its own: a form-associated element that has none is
+     * skipped, so its problems fall to a shorter prefix or to the banner instead
+     * of being dropped.
+     *
      * Every other problem, and a field problem naming no control, is shown in
      * each `ful-errors` banner of the form: the banner gets `role="alert"`, is
      * revealed and holds the reasons one per line. With no such problem the
@@ -731,7 +736,7 @@ class Bindings {
             const parts = name.split('.');
             for (let i = parts.length; i !== 0; --i) {
                 const prefix = parts.slice(0, i).join('.');
-                const targets = named.get(prefix) ?? [];
+                const targets = (named.get(prefix) ?? []).filter((el) => typeof el.setCustomValidity === 'function');
                 if (targets.length === 0) {
                     continue;
                 }
@@ -1189,6 +1194,14 @@ class Field extends ParsedElement {
      *   accessibility tree.
      * - `also` are further controls that mirror `disabled` and `readOnly`
      *   beside the claim target.
+     *
+     * The pieces are elements the field rendered itself, native controls or
+     * wrappers of its own. A ful field is not one: it has no `readOnly`, its
+     * host's role takes no aria, and a label's `for` names its host rather than
+     * its control. A composite built from ful fields answers the inner field as
+     * `control`, which forwards `focus()`, lets it render its own label with
+     * `label` and `announces` null, and forwards the claims in its setters,
+     * calling super first.
      * @param {{ slots: Record<string, DocumentFragment> | undefined }} conf
      * @returns {any} the pieces, or a promise of them
      * @throws {Error} when the subclass does not implement it
@@ -1463,11 +1476,13 @@ class Form extends ParsedElement {
      * A call while a submit is in flight returns at once, doing nothing.
      * @param {HTMLElement} [submitter] the button that submitted, if any; it is
      * the only button whose name and value are submitted
-     * @returns {Promise<void>} settling once the submit has finished, whatever its outcome
+     * @returns {Promise<boolean>} settling once the submit has finished: true
+     * after `submit:success`, false when it failed, was cancelled or was dropped
+     * for one in flight
      */
     async submit(submitter) {
         if (this.#submitting) {
-            return;
+            return false;
         }
         this.#submitting = true;
         this.spinner(true);
@@ -1484,7 +1499,7 @@ class Form extends ParsedElement {
                 detail: { submitter, values, request },
             });
             if (!this.dispatchEvent(se)) {
-                return;
+                return false;
             }
             this.errors = [];
             const sre = new CustomEvent('submit:requested', {
@@ -1507,6 +1522,7 @@ class Form extends ParsedElement {
                     detail: { submitter, values, request, response: mapped },
                 }),
             );
+            return true;
         } catch (e) {
             this.dispatchEvent(
                 new CustomEvent('submit:failure', {
@@ -1520,11 +1536,27 @@ class Form extends ParsedElement {
             } else {
                 console.warn('failed to submit form', this, 'reason:', e);
             }
+            return false;
         } finally {
             this.#submitting = false;
             this.spinner(false);
         }
     }
+    /**
+     * Saves the unsaved edits, for a page action that would lose them, such as
+     * one reloading the page: under `track-changes` it submits only while the
+     * form is dirty, and without it always submits.
+     * @param {HTMLElement} [submitter] as `submit` takes it
+     * @returns {Promise<boolean>} whether no unsaved edit is left: false when
+     * the submit did not succeed, or when the user edited the form while it
+     * was in flight
+     */
+    async save(submitter) {
+        if (this.#tracking && !this.dirty) {
+            return true;
+        }
+        return (await this.submit(submitter)) && !this.dirty;
+    }
     /**
      * Resets the native form, each field returning to its default value. Under
      * `track-changes` every control counts as edited: the form is dirty if the
@@ -1597,12 +1629,14 @@ class Form extends ParsedElement {
         }
     }
     /**
-     * Counts a control as edited by the user, for a value the page writes on
+     * Counts controls as edited by the user, for values the page writes on
      * the user's behalf: assigning `value` reports nothing, as 0019 wants.
-     * @param {Element} el the control, or an element inside it
+     * @param {...Element} els each a control, or an element inside one
      */
-    edited(el) {
-        this.#touch(el);
+    edited(...els) {
+        for (const el of els) {
+            this.#touch(el);
+        }
     }
     /**
      * @param {Map<string, string>} saved
@@ -4555,7 +4589,7 @@ class RadioGroup extends Field {
             return;
         }
         /** @type {HTMLInputElement|null} */
-        const el = this.querySelector(`input[type=radio][value=${CSS.escape(String(value))}]`);
+        const el = this.querySelector(`input[type=radio][value="${CSS.escape(String(value))}"]`);
         if (el === null) {
             clear();
             return;
@@ -6704,6 +6738,8 @@ class DialogSections {
     #error;
     #requests = new SectionRequests();
     #updates = new Claims();
+    /** @type {Promise<boolean>|null} */
+    #confirming = null;
     /**
      * @param {HTMLElement} host the element the section requests are dispatched on
      * @param {DocumentFragment} fragment the rendered template, holding a
@@ -6727,17 +6763,53 @@ class DialogSections {
     get section() {
         return this.#section;
     }
+    /**
+     * Whether a `ful-form` of this dialog, not one of a dialog nested in it,
+     * holds unsaved edits (see `Form.dirty`).
+     * @returns {boolean}
+     */
+    get dirty() {
+        return Array.from(this.#dialog.querySelectorAll('ful-form')).some(
+            (form) => form.closest('dialog') === this.#dialog && /** @type {any} */ (form).dirty,
+        );
+    }
     /**
      * Dispatches the dismissal on the host and calls `close` unless a listener
-     * prevented it. A dismissal that is not cancelable announces a close the
-     * platform makes whatever the page does, so `close` is not called for it.
+     * prevented it or, with `confirm` given and the dialog `dirty`, `confirm`
+     * answers false. A dismissal that is not cancelable announces a close the
+     * platform makes whatever the page does, so nothing is asked and `close` is
+     * not called for it. While `confirm` is pending a further dismissal waits
+     * for the same answer, and a dialog closed meanwhile is not closed again.
      * @param {CustomEvent} asked
      * @param {() => void} close
+     * @param {(() => Promise<boolean>)|null} confirm asks whether to drop the unsaved edits
+     * @returns {Promise<boolean>} whether the dismissal closes the dialog
      */
-    dismiss(asked, close) {
-        if (this.#host.dispatchEvent(asked) && asked.cancelable) {
+    dismiss(asked, close, confirm) {
+        if (this.#confirming) {
+            return this.#confirming;
+        }
+        if (!this.#host.dispatchEvent(asked)) {
+            return Promise.resolve(false);
+        }
+        if (!asked.cancelable) {
+            return Promise.resolve(true);
+        }
+        if (!confirm || !this.dirty) {
             close();
+            return Promise.resolve(true);
         }
+        this.#confirming = confirm()
+            .then((drop) => {
+                if (drop && this.#dialog.open) {
+                    close();
+                }
+                return drop;
+            })
+            .finally(() => {
+                this.#confirming = null;
+            });
+        return this.#confirming;
     }
     /**
      * Calls `dismiss` when a press and its release both land on the backdrop,
@@ -6791,11 +6863,12 @@ class DialogSections {
      * `show`, and fills the content with what the callback resolves to. A
      * rejection is shown, as the problems' reasons, in the error section, and
      * the content is hidden. When a newer `update()` starts before the callback
-     * settles, this call paints nothing: it resolves with the section regardless,
-     * and still rejects with the callback's error.
+     * settles, this call paints nothing and resolves `null`, the section being
+     * the newer call's; it still rejects with the callback's error.
      * @param {() => Node|string|Promise<Node|string>} cb producing the content
      * @param {() => void} show opens the dialog when it is closed
-     * @returns {Promise<HTMLElement>} the content section
+     * @returns {Promise<HTMLElement|null>} the content section, or `null` for a
+     * call a newer one overtook
      * @throws {any} what the callback threw or rejected with
      */
     async update(cb, show) {
@@ -6808,7 +6881,7 @@ class DialogSections {
         try {
             const delivered = await cb();
             if (claim.stale) {
-                return this.#section;
+                return null;
             }
             this.#section.replaceChildren(delivered);
             this.#loading?.setAttribute('hidden', '');
@@ -6877,21 +6950,24 @@ const wireTargets = () => {
  * and a press and release both on the backdrop close the dialog, each as a
  * dismissal, as Escape does.
  *
- * Before any of those three gestures closes it, the element dispatches a
- * cancelable, non-bubbling `dialog:dismiss` with `detail: { reason }`, the
- * reason being `button`, `backdrop` or `escape`; a listener calling
- * `preventDefault()` keeps it open, to guard unsaved edits. A `data-result`
- * button, `close-on-submit` and `close()` answer rather than dismiss, and
- * dispatch none.
+ * Those three gestures go through `dismiss(reason)`, the reason being
+ * `button`, `backdrop` or `escape`: before it closes the dialog, the element
+ * dispatches a cancelable, non-bubbling `dialog:dismiss` with
+ * `detail: { reason }`, and a listener calling `preventDefault()` keeps it
+ * open. Under `guard-dismiss`, a dismissal nobody refused, while a `ful-form`
+ * of the dialog holds unsaved edits (see `Form.dirty`), first asks the user,
+ * through `Dialog.confirm`, whether to close and drop them. A `data-result`
+ * button, `close-on-submit`, `close()` and `update()` are answers or the page
+ * deciding: they dispatch nothing and ask nothing.
  *
  * The platform lets a page refuse Escape once per user interaction: a second
  * Escape with no click or keystroke in between closes the dialog whatever the
- * page does, `requires-answer` included. That close is still announced by a
- * `dialog:dismiss`, which is then not cancelable.
+ * page does, `requires-answer` and `guard-dismiss` included. That close is
+ * still announced by a `dialog:dismiss`, which is then not cancelable.
  *
  * `requires-answer` withholds the close button and refuses Escape and the
  * backdrop, so the dialog is closed only by a button carrying `data-result`
- * or from code through `close()`.
+ * or from code, through `close()` or `dismiss()`.
  *
  * `close-on-submit` closes the dialog when a `ful-form` that is a direct child
  * of the body dispatches `submit:success`, answering with its
@@ -6911,7 +6987,7 @@ const wireTargets = () => {
  * in a form needs.
  */
 class Dialog extends ParsedElement {
-    static attributes = ['header', 'requires-answer:presence', 'close-on-submit:presence'];
+    static attributes = ['header', 'requires-answer:presence', 'close-on-submit:presence', 'guard-dismiss:presence'];
     static slots = true;
     static template = `
         <dialog data-ref="dialog" class="ful-dialog">
@@ -6961,15 +7037,10 @@ class Dialog extends ParsedElement {
                 this.#dialog.close(result);
             }
         });
-        const dismiss = (/** @type {'button'|'backdrop'|'escape'} */ reason, platformCloses = false) =>
-            this.#sections.dismiss(
-                new CustomEvent('dialog:dismiss', { cancelable: !platformCloses, detail: { reason } }),
-                () => this.#dialog.close(''),
-            );
         if (!requiresAnswer) {
-            this.#sections.onBackdrop(() => dismiss('backdrop'));
+            this.#sections.onBackdrop(() => this.dismiss('backdrop'));
         }
-        fragment.querySelector('[data-ref=close]')?.addEventListener('click', () => dismiss('button'));
+        fragment.querySelector('[data-ref=close]')?.addEventListener('click', () => this.dismiss('button'));
         if (closeOnSubmit) {
             this.#sections.onSubmitted((response) => {
                 this.#answer = { dismissed: false, result: null, response };
@@ -6979,12 +7050,12 @@ class Dialog extends ParsedElement {
         this.#dialog.addEventListener('cancel', (/** @type any */ e) => {
             if (!e.cancelable) {
                 this.#dialog.returnValue = '';
-                dismiss('escape', true);
+                this.#dismiss('escape', false);
                 return;
             }
             e.preventDefault();
             if (!requiresAnswer) {
-                dismiss('escape');
+                this.dismiss('escape');
             }
         });
         this.replaceChildren(fragment);
@@ -7056,11 +7127,12 @@ class Dialog extends ParsedElement {
      *
      * No `section:requested` is dispatched, and no `ask()` waiter is added:
      * listen for the `close` event to learn how the dialog ended. When a newer
-     * `update()` starts before the callback settles, this call paints nothing:
-     * it resolves with the body regardless, and still rejects with the
-     * callback's error.
+     * `update()` starts before the callback settles, this call paints nothing
+     * and resolves `null`, the body being the newer call's; it still rejects
+     * with the callback's error.
      * @param {() => Node|string|Promise<Node|string>} cb producing the body content
-     * @returns {Promise<Element>} the body section, in the document
+     * @returns {Promise<Element|null>} the body section, in the document, or
+     * `null` for a call a newer one overtook
      * @throws {any} what the callback threw or rejected with
      */
     async update(cb) {
@@ -7076,6 +7148,34 @@ class Dialog extends ParsedElement {
     refresh() {
         return this.#sections.request();
     }
+    /**
+     * Dismisses the dialog as the user would: dispatches the cancelable
+     * `dialog:dismiss` with `detail: { reason }` and, under `guard-dismiss`,
+     * asks before dropping unsaved edits, closing the dialog as a dismissal
+     * unless either refused. `requires-answer` does not refuse it, as it does
+     * not refuse `close()`. Does nothing on a closed dialog.
+     * @param {string} reason why it is dismissed, such as `navigation`
+     * @returns {Promise<boolean>} whether the dialog is closed, false when a
+     * listener or the user kept it open
+     */
+    dismiss(reason) {
+        if (!this.#dialog.open) {
+            return Promise.resolve(true);
+        }
+        return this.#dismiss(reason, true);
+    }
+    /**
+     * @param {string} reason
+     * @param {boolean} cancelable false for a close the platform makes anyway
+     * @returns {Promise<boolean>}
+     */
+    #dismiss(reason, cancelable) {
+        return this.#sections.dismiss(
+            new CustomEvent('dialog:dismiss', { cancelable, detail: { reason } }),
+            () => this.#dialog.close(''),
+            this.declared('guard-dismiss') ? discardEdits : null,
+        );
+    }
     /**
      * Closes an open dialog, doing nothing on a closed one. A non-empty result
      * answers as the button carrying that `data-result` would; no result, or
@@ -7175,6 +7275,19 @@ class Dialog extends ParsedElement {
     }
 }
 
+/**
+ * Asks, through `Dialog.confirm`, whether to close and drop the unsaved edits,
+ * with the localized `dialog.discard.*` texts.
+ * @returns {Promise<boolean>} true to drop them
+ */
+const discardEdits = () => {
+    const l10n = Localization.of();
+    return Dialog.confirm(l10n.t('dialog.discard.header'), l10n.t('dialog.discard.body'), {
+        confirm: l10n.t('dialog.discard.confirm'),
+        cancel: l10n.t('dialog.discard.cancel'),
+    });
+};
+
 /**
  * A side panel on the native `<dialog>`, shown as a modal: a header holding
  * the title and a localized close button, then loading, error and content
@@ -7187,17 +7300,23 @@ class Dialog extends ParsedElement {
  * default, when absent) or `start`, following the writing direction.
  *
  * The close button, Escape, and a press and release both on the backdrop all
- * go through `close()`, once a cancelable, non-bubbling `drawer:dismiss` with
- * `detail: { reason }` (`button`, `backdrop` or `escape`) has been dispatched
- * on the element and no listener prevented it: `preventDefault()` keeps the
- * drawer open, to guard unsaved edits. `close()` and `close-on-submit`
- * dispatch none. The platform lets a page refuse Escape once per user
+ * go through `dismiss(reason)`, the reason being `button`, `backdrop` or
+ * `escape`: before it closes the drawer, the element dispatches a cancelable,
+ * non-bubbling `drawer:dismiss` with `detail: { reason }`, and a listener
+ * calling `preventDefault()` keeps it open. Under `guard-dismiss`, a dismissal
+ * nobody refused, while a `ful-form` of the drawer holds unsaved edits (see
+ * `Form.dirty`), first asks the user, through `Dialog.confirm`, whether to
+ * close and drop them. A `data-result` button, `close-on-submit`, `close()`
+ * and `update()` are answers or the page deciding: they dispatch nothing and
+ * ask nothing. The platform lets a page refuse Escape once per user
  * interaction: a second Escape with no click or keystroke in between closes
- * the drawer at once, without the slide, and its `drawer:dismiss` is then not
- * cancelable. Every close dispatches a non-bubbling `close` event on
- * the element with `detail: { dismissed, response }`: `{ dismissed: false,
- * response }` when a form closed it under `close-on-submit`, and
- * `{ dismissed: true, response: null }` for any other close.
+ * the drawer at once, without the slide, `guard-dismiss` included, and its
+ * `drawer:dismiss` is then not cancelable.
+ *
+ * Any button inside the drawer carrying `data-result` closes it with that
+ * result, an empty one being a dismissal. Every close dispatches a
+ * non-bubbling `close` event on the element carrying the `DialogOutcome` as
+ * `detail`, before the pending `ask()` calls resolve.
  *
  * `close-on-submit` closes the drawer when a `ful-form` that is a direct child
  * of the content section dispatches `submit:success`, carrying its
@@ -7209,7 +7328,7 @@ class Dialog extends ParsedElement {
  * element's id calls `open()` on click.
  */
 class Drawer extends ParsedElement {
-    static attributes = ['header', 'placement', 'close-on-submit:presence'];
+    static attributes = ['header', 'placement', 'close-on-submit:presence', 'guard-dismiss:presence'];
     static slots = true;
     static template = `
         <dialog data-ref="dialog" class="ful-drawer">
@@ -7226,8 +7345,9 @@ class Drawer extends ParsedElement {
     #dialog;
     #title;
     #sections;
-    /** @type {{ dismissed: boolean, response: any }|null} */
+    /** @type {{ dismissed: boolean, result: string|null, response: any }|null} */
     #answer = null;
+    #resolvers = [];
     #closing = false;
     #slideOutEnded = (/** @type AnimationEvent */ e) => {
         if (e.target === this.#dialog) {
@@ -7250,32 +7370,33 @@ class Drawer extends ParsedElement {
         if (placement) {
             this.#dialog.setAttribute('placement', placement);
         }
-        const dismiss = (/** @type {'button'|'backdrop'|'escape'} */ reason, platformCloses = false) =>
-            this.#sections.dismiss(
-                new CustomEvent('drawer:dismiss', { cancelable: !platformCloses, detail: { reason } }),
-                () => this.close(),
-            );
         /** @type {HTMLElement} */ (fragment.querySelector('[data-ref=close]')).addEventListener('click', () =>
-            dismiss('button'),
+            this.dismiss('button'),
         );
-        this.#sections.onBackdrop(() => dismiss('backdrop'));
+        this.#sections.onBackdrop(() => this.dismiss('backdrop'));
         this.#dialog.addEventListener('cancel', (e) => {
             if (!e.cancelable) {
                 this.#stopSlidingOut();
-                dismiss('escape', true);
+                this.#dismiss('escape', false);
                 return;
             }
             e.preventDefault();
-            dismiss('escape');
+            this.dismiss('escape');
+        });
+        this.#dialog.addEventListener('click', (/** @type any */ e) => {
+            const result = e.target.closest('button[data-result]')?.dataset.result;
+            if (result !== undefined) {
+                this.close(result);
+            }
         });
         this.#dialog.addEventListener('close', () => {
-            this.dispatchEvent(
-                new CustomEvent('close', { detail: this.#answer ?? { dismissed: true, response: null } }),
-            );
+            const outcome = this.#outcome();
+            this.dispatchEvent(new CustomEvent('close', { detail: outcome }));
+            this.#settle(outcome);
         });
         if (this.declared('close-on-submit')) {
             this.#sections.onSubmitted((response) => {
-                this.#answer = { dismissed: false, response };
+                this.#answer = { dismissed: false, result: null, response };
                 this.close();
             });
         }
@@ -7301,12 +7422,13 @@ class Drawer extends ParsedElement {
      * which has `role="alert"`, and the content is hidden.
      *
      * No `section:requested` is dispatched. When a newer `update()` starts
-     * before the callback settles, this call paints nothing: it resolves with
-     * the content section regardless, and still rejects with the callback's
-     * error.
+     * before the callback settles, this call paints nothing and resolves
+     * `null`, the content section being the newer call's; it still rejects with
+     * the callback's error.
      * @param {string} header the title, set as text
      * @param {() => Node|string|Promise<Node|string>} cb producing the content
-     * @returns {Promise<Element>} the content section, in the document
+     * @returns {Promise<Element|null>} the content section, in the document, or
+     * `null` for a call a newer one overtook
      * @throws {any} what the callback threw or rejected with
      */
     async update(header, cb) {
@@ -7323,9 +7445,36 @@ class Drawer extends ParsedElement {
     refresh() {
         return this.#sections.request();
     }
+    /** @returns {{ dismissed: boolean, result: string|null, response: any }} */
+    #outcome() {
+        return this.#answer ?? { dismissed: true, result: null, response: null };
+    }
+    /** @param {{ dismissed: boolean, result: string|null, response: any }} outcome */
+    #settle(outcome) {
+        const resolvers = this.#resolvers;
+        this.#resolvers = [];
+        for (const resolve of resolvers) {
+            resolve(outcome);
+        }
+    }
     /**
-     * Shows the drawer as a modal. On a drawer already open nothing happens,
-     * except that one sliding out stops and stays open.
+     * Resolves every pending `ask()` and `open()` with the outcome so far,
+     * a dismissal for a drawer still open, so that no caller waits on a drawer
+     * that left the document. The native dialog is not closed and no `close`
+     * event is dispatched.
+     */
+    disconnectedCallback() {
+        this.#settle(this.#outcome());
+    }
+    /**
+     * The same as `ask()`.
+     * @returns {Promise<{ dismissed: boolean, result: string|null, response: any }>}
+     */
+    open() {
+        return this.ask();
+    }
+    /**
+     * Shows the drawer as a modal and resolves with how it ends.
      *
      * The call that opens the drawer resets the outcome of the previous
      * opening, hides the error and loading sections, and dispatches
@@ -7333,26 +7482,67 @@ class Drawer extends ParsedElement {
      * `detail: { section, first, name: null, index: null }`, `section` being
      * the content section and `first` true only on the first answered request),
      * so a listener can fill the content. A failed request is painted into the
-     * content section.
+     * content section and does not reject. On a drawer already open nothing is
+     * shown or requested, except that one sliding out stops and stays open, and
+     * the call waits for the same ending as the calls before it, which is how
+     * a caller learns the outcome of the opening an `update()` made.
+     * @returns {Promise<{ dismissed: boolean, result: string|null, response: any }>} resolving on
+     * close, or on removal from the document with a dismissal
      */
-    open() {
-        if (!this.#show()) {
-            return;
+    ask() {
+        if (this.#show()) {
+            this.#sections.restChrome();
+            this.#sections.request();
         }
-        this.#sections.restChrome();
-        this.#sections.request();
+        return new Promise((resolve) => {
+            this.#resolvers.push(resolve);
+        });
+    }
+    /**
+     * Dismisses the drawer as the user would: dispatches the cancelable
+     * `drawer:dismiss` with `detail: { reason }` and, under `guard-dismiss`,
+     * asks before dropping unsaved edits, sliding the drawer out as a
+     * dismissal unless either refused. Does nothing on a drawer that is closed
+     * or already sliding out.
+     * @param {string} reason why it is dismissed, such as `navigation`
+     * @returns {Promise<boolean>} whether the drawer is closed or closing,
+     * false when a listener or the user kept it open
+     */
+    dismiss(reason) {
+        if (this.#closing || !this.#dialog.open) {
+            return Promise.resolve(true);
+        }
+        return this.#dismiss(reason, true);
+    }
+    /**
+     * @param {string} reason
+     * @param {boolean} cancelable false for a close the platform makes anyway
+     * @returns {Promise<boolean>}
+     */
+    #dismiss(reason, cancelable) {
+        return this.#sections.dismiss(
+            new CustomEvent('drawer:dismiss', { cancelable, detail: { reason } }),
+            () => this.close(),
+            this.declared('guard-dismiss') ? discardEdits : null,
+        );
     }
     /**
      * Slides the drawer out and closes it when the animation ends, setting the
      * `closing` attribute on the native dialog meanwhile; the `close` event is
      * dispatched then, after this call has returned. Where the user prefers
-     * reduced motion, or no animation runs, it closes at once. Does nothing on
-     * a drawer that is closed or already sliding out.
+     * reduced motion, or no animation runs, it closes at once. A non-empty
+     * result answers as the button carrying that `data-result` would; no
+     * result, or an empty one, is a dismissal. Does nothing on a drawer that is
+     * closed or already sliding out.
+     * @param {string} [result]
      */
-    close() {
+    close(result) {
         if (this.#closing || !this.#dialog.open) {
             return;
         }
+        if (result) {
+            this.#answer = { dismissed: false, result, response: null };
+        }
         if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
             this.#dialog.close();
             return;
@@ -8064,6 +8254,10 @@ var en = {
     'dialog.close': 'Close',
     'dialog.confirm': 'Confirm',
     'dialog.cancel': 'Cancel',
+    'dialog.discard.header': 'Unsaved changes',
+    'dialog.discard.body': 'There are unsaved changes: close anyway?',
+    'dialog.discard.confirm': 'Close without saving',
+    'dialog.discard.cancel': 'Keep editing',
     'drawer.close': 'Close',
     'spinner.loading': 'Loading…',
     'toast.region': 'Notifications',
@@ -8109,6 +8303,10 @@ var it = {
     'dialog.close': 'Chiudi',
     'dialog.confirm': 'Conferma',
     'dialog.cancel': 'Annulla',
+    'dialog.discard.header': 'Modifiche non salvate',
+    'dialog.discard.body': 'Ci sono modifiche non salvate: chiudere comunque?',
+    'dialog.discard.confirm': 'Chiudi senza salvare',
+    'dialog.discard.cancel': 'Continua a modificare',
     'drawer.close': 'Chiudi',
     'spinner.loading': 'Caricamento…',
     'toast.region': 'Notifiche',
@@ -8157,6 +8355,10 @@ var es = {
     'dialog.close': 'Cerrar',
     'dialog.confirm': 'Confirmar',
     'dialog.cancel': 'Cancelar',
+    'dialog.discard.header': 'Cambios sin guardar',
+    'dialog.discard.body': 'Hay cambios sin guardar: ¿cerrar de todos modos?',
+    'dialog.discard.confirm': 'Cerrar sin guardar',
+    'dialog.discard.cancel': 'Seguir editando',
     'drawer.close': 'Cerrar',
     'spinner.loading': 'Cargando…',
     'toast.region': 'Notificaciones',
@@ -8205,6 +8407,10 @@ var fr = {
     'dialog.close': 'Fermer',
     'dialog.confirm': 'Confirmer',
     'dialog.cancel': 'Annuler',
+    'dialog.discard.header': 'Modifications non enregistrées',
+    'dialog.discard.body': 'Des modifications ne sont pas enregistrées : fermer quand même ?',
+    'dialog.discard.confirm': 'Fermer sans enregistrer',
+    'dialog.discard.cancel': 'Continuer à modifier',
     'drawer.close': 'Fermer',
     'spinner.loading': 'Chargement…',
     'toast.region': 'Notifications',