Add `closable` property to UUIModalElement

[iOvergaard]

Summary

UUIModalElement (and by extension UUIModalDialogElement / UUIModalSidebarElement) should support a closable boolean property (default true) that controls whether the modal can be dismissed by pressing ESC.

Motivation

In Umbraco CMS, the auth modal must not be dismissable — the user must complete authentication. Currently, the native <dialog> fires cancel on ESC, which UUI maps to close() in _openModal():

_openModal() {
  this.isOpen = true;
  this._dialogElement?.showModal();
  this._dialogElement?.addEventListener("cancel", this.close);
}

There is no way to opt out of this behavior without subclassing UUIModalDialogElement and duplicating the _openModal internals, which couples consumers to UUI's implementation details.

This is a general-purpose need — any modal framework should support non-dismissable modals.

Proposed Solution

Add a closable property to UUIModalElement:

@property({ type: Boolean }) closable = true;

_openModal() {
  this.isOpen = true;
  this._dialogElement?.showModal();
  if (this.closable) {
    this._dialogElement?.addEventListener('cancel', this.close);
  } else {
    this._dialogElement?.addEventListener('cancel', (e) => e.preventDefault());
  }
}

When closable is false:

• ESC does not dismiss the dialog (the cancel event is prevented)
• The modal can still be closed programmatically via close() or forceClose()

Current Workaround

In umbraco/Umbraco-CMS#21846 we work around this by subclassing UUIModalDialogElement, overriding _openModal(), and intercepting ESC at the keydown level. This works but is fragile — it duplicates parent internals and will break if _openModal is refactored.

Context

• UUI version: 1.17.x
• CMS PR: Auth: Split auth modal into reusable view and introduce new non-dismissable modal type (closes #19628) Umbraco-CMS#21846