@api-client/ui 0.5.18 → 0.5.19

package/build/src/md/dialog/internals/Dialog.d.ts

@@ -15,6 +15,7 @@ export interface UiDialogClosingReason {
     value?: unknown;
 }
 interface DialogEventMap {
+    closing: CustomEvent<UiDialogClosingReason>;
     close: CustomEvent<UiDialogClosingReason>;
 }
 export type RenderFunction = () => TemplateResult;
@@ -64,6 +65,8 @@ export type RenderFunction = () => TemplateResult;
  * @slot title - The slot to place the dialog title. Do not put elements here, just the text.
  * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`
  *  buttons to automatically close the dialog.
+ * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,
+ *  dispatched before the dialog closes. If prevented, the dialog will not close.
  * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.
  */
 export default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {

package/build/src/md/dialog/internals/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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"}

package/build/src/md/dialog/internals/Dialog.js

@@ -403,13 +403,25 @@ let UiDialog = (() => {
             if (!['dismiss', 'confirm'].includes(value)) {
                 return;
             }
-            this.open = false;
             const detail = {
                 cancelled: value === 'dismiss',
             };
             if (this.dialogValue !== undefined) {
                 detail.value = this.dialogValue;
             }
+            // Dispatch cancelable closing event first
+            const closingEvent = new CustomEvent('closing', {
+                cancelable: true,
+                composed: false,
+                bubbles: false,
+                detail,
+            });
+            const canClose = this.dispatchEvent(closingEvent);
+            // Only proceed with closing if the event wasn't canceled
+            if (!canClose) {
+                return;
+            }
+            this.open = false;
             this.dispatchEvent(new CustomEvent('close', {
                 composed: true,
                 detail,
@@ -419,8 +431,31 @@ let UiDialog = (() => {
             if (!this.open) {
                 return;
             }
+            const detail = {
+                cancelled: true,
+            };
+            if (this.dialogValue !== undefined) {
+                detail.value = this.dialogValue;
+            }
+            // Dispatch cancelable closing event first
+            const closingEvent = new CustomEvent('closing', {
+                cancelable: true,
+                composed: false,
+                bubbles: false,
+                detail,
+            });
+            const canClose = this.dispatchEvent(closingEvent);
+            // Only proceed with closing if the event wasn't canceled
+            if (!canClose) {
+                // If closing was prevented, reopen the dialog
+                this.dialog.showModal();
+                return;
+            }
             this.open = false;
-            this.handleInteraction('dismiss');
+            this.dispatchEvent(new CustomEvent('close', {
+                composed: true,
+                detail,
+            }));
         }
         handleDismiss() {
             this.handleInteraction('dismiss');
@@ -591,6 +626,8 @@ let UiDialog = (() => {
  * @slot title - The slot to place the dialog title. Do not put elements here, just the text.
  * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`
  *  buttons to automatically close the dialog.
+ * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,
+ *  dispatched before the dialog closes. If prevented, the dialog will not close.
  * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.
  */
 export default UiDialog;

package/build/src/md/dialog/internals/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'\nimport '../../button/ui-button.js'\nimport { bound } from '../../../decorators/bound.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown\n}\n\ninterface DialogEventMap {\n  close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n *\n *  <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n *  buttons to automatically close the dialog.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   *\n   * Setting this value after the dialog was opened has no effect.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor modal = false\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor dismissLabel: string | undefined\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmLabel: string | undefined\n\n  /**\n   * When true, styles the confirm button with error colors to indicate\n   * a destructive action (e.g., delete, remove, etc.).\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor destructive = false\n\n  /**\n   * Part of the imperative access to the element.\n   * When set, it wraps the content in a `<form>` element.\n   * When this is enabled the following will happen:\n   * - The `confirm` button will get `type=\"submit\"`\n   * - The form `method` attribute is set to `dialog`\n   * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.\n   * - The dialog will dispatch the same `submit` event as the form.\n   * - When the `submit` event dispatched by the dialog gets cancelled, then:\n   *  - The original submit event also gets cancelled.\n   *  - The default confirm action is not invoked\n   *  - The dialog stays opened\n   * - When the submit event is not cancelled, then:\n   *  - The default confirm action is invoked.\n   *  - The dialog is closed.\n   *\n   * @deprecated Wrap the content in a `<form>` element instead.\n   */\n  @property({ type: Boolean }) accessor useForm: boolean | undefined\n\n  /**\n   * Only when `confirmLabel` is set.\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmValue: string | undefined\n  /**\n   * When the dialog is wrapped in a form, set this to `true` to close the dialog\n   * when the form is submitted.\n   *\n   * Note that the dialog doesn't perform any validation of the form. It only closes\n   * when the form is submitted, regardless of the application logic. The `submit` event\n   * is dispatched by the dialog when the form is valid.\n   */\n  @property({ type: Boolean }) accessor submitClose: boolean | undefined\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') accessor dialog!: HTMLDialogElement\n\n  @state() protected accessor hasIcon = false\n\n  @state() protected accessor hasTitle = false\n\n  @state() protected accessor hasButton = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  dialogValue?: unknown\n\n  #formId?: string\n\n  /**\n   * @deprecated Use `useForm` instead.\n   */\n  get formId(): string | undefined {\n    return this.#formId\n  }\n\n  /**\n   * @deprecated This will be removed in the future.\n   */\n  @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n  /**\n   * @deprecated This will be removed in the future.\n   */\n  #pendingStyles?: CSSResultOrNative[]\n\n  /**\n   * A reference to the parent form element.\n   * When a form is found, the dialog will hook into the form's submit event\n   * and close the dialog when the form is submitted.\n   * Since the `submit` event is dispatched when the form is valid,\n   * we can use this to close the dialog and not worry about the form validation.\n   */\n  #form: HTMLFormElement | null = null\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  /**\n   * Allows to inject a template into the internals of the element.\n   * This is helpful when working with imperative dialogs.\n   * @param content The content to inject into the body.\n   * @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.\n   */\n  inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {\n    this.#inject = content\n    if (styles) {\n      if (this.shadowRoot) {\n        adoptStyles(this.shadowRoot, styles)\n      } else {\n        if (!this.#pendingStyles) {\n          this.#pendingStyles = []\n        }\n        this.#pendingStyles.push(...styles)\n      }\n    }\n    if (this.shadowRoot && styles) {\n      adoptStyles(this.shadowRoot, styles)\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.#form = this.closest('form')\n    if (this.#form) {\n      this.#form.addEventListener('submit', this.handleFormSubmit)\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.#form) {\n      this.#form.removeEventListener('submit', this.handleFormSubmit)\n      this.#form = null\n    }\n  }\n\n  protected override firstUpdated(): void {\n    const styles = this.#pendingStyles\n    if (styles) {\n      const root = this.shadowRoot as ShadowRoot\n      const all = [...root.adoptedStyleSheets, ...styles]\n      adoptStyles(this.shadowRoot as ShadowRoot, all)\n    }\n  }\n\n  override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('useForm') && this.useForm && !this.#formId) {\n      const r = (Math.random() + 1).toString(36).substring(7)\n      this.#formId = `form-${r}`\n    }\n  }\n\n  @bound\n  protected handleFormSubmit(): void {\n    if (this.submitClose) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    const path = e.composedPath()\n    const { buttons } = this\n    const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n    if (!button) {\n      return\n    }\n    if (button.type === 'submit') {\n      // Adds support for forms.\n      // When a form's submit button is clicked we yield the flow control to the form.\n      // This way the form can handle the submit event.\n      return\n    }\n    const { value = '' } = button\n    this.handleInteraction(value as 'dismiss' | 'confirm')\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e)\n    if (e.defaultPrevented) {\n      return\n    }\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss')\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.#controlVisibility()\n    }\n    super.updated(changedProperties)\n  }\n\n  #controlVisibility(): void {\n    const { dialog, modal, open } = this\n    if (!dialog) {\n      return\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal()\n      } else {\n        dialog.show()\n      }\n    } else {\n      dialog.close()\n    }\n  }\n\n  #handleSlotChange(): void {\n    const { icons, titles, buttons } = this\n    this.hasIcon = !!icons && !!icons.length\n    this.hasTitle = !!titles && !!titles.length\n    this.hasButton = !!buttons && !!buttons.length\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return\n    }\n    this.open = false\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return\n    }\n    this.open = false\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleConfirm(): void {\n    if (!this.useForm) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  #handleSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement\n    const copy = new SyntheticSubmitEvent(event.type, form, {\n      submitter: event.submitter,\n      cancelable: true,\n      bubbles: false,\n      composed: false,\n    })\n    const dispatched = this.dispatchEvent(copy)\n    if (dispatched) {\n      this.handleInteraction('confirm')\n    } else {\n      event.preventDefault()\n    }\n  }\n\n  override render(): TemplateResult {\n    const { useForm, modal } = this\n    const dialogClass = modal ? 'modal' : 'non-modal'\n    return html`\n      <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\" class=\"${dialogClass}\">\n        <div class=\"container\">${useForm ? this.#renderFormContent() : this.renderContent()}</div>\n      </dialog>\n    `\n  }\n\n  protected renderContent(): TemplateResult[] | TemplateResult {\n    return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n  }\n\n  #renderFormContent(): TemplateResult {\n    return html`\n      <form id=\"${ifDefined(this.formId)}\" method=\"dialog\" @submit=\"${this.#handleSubmit}\" part=\"form\">\n        ${this.renderContent()}\n      </form>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      'icon': true,\n      'with-icon': this.hasIcon,\n      'destructive': this.destructive,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"icon\">\n        <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      'title': true,\n      'with-title': this.hasTitle,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"title\">\n        <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderBody(): TemplateResult {\n    let content = this.#inject\n    if (typeof content === 'function') {\n      content = content()\n    }\n    const injected = content || nothing\n    return html` <div class=\"content\" part=\"body\"><slot></slot>${injected}</div> `\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      'buttons': true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"button\">\n        <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n        ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n      </div>\n    `\n  }\n\n  #renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this\n    if (!dismissLabel) {\n      return nothing\n    }\n    return html`\n      <ui-button\n        color=\"text\"\n        value=\"dismiss\"\n        class=\"internal-button\"\n        @click=\"${this.handleDismiss}\"\n        part=\"negative-action\"\n        >${dismissLabel}</ui-button\n      >\n    `\n  }\n\n  #renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this\n    if (!confirmLabel) {\n      return nothing\n    }\n    const type = useForm ? 'submit' : 'button'\n    const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'\n    return html`\n      <ui-button\n        color=\"text\"\n        type=\"${type}\"\n        value=\"${confirmValue}\"\n        class=\"${buttonClass}\"\n        @click=\"${this.handleConfirm}\"\n        part=\"positive-action\"\n        >${confirmLabel}</ui-button\n      >\n    `\n  }\n}\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../../src/md/dialog/internals/Dialog.ts"],"names":[],"mappings":"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","sourcesContent":["import { type CSSResultOrNative, html, nothing, type PropertyValues, type TemplateResult, adoptStyles } from 'lit'\nimport { property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js'\nimport { type ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiButton from '../../button/internals/button.js'\nimport type { TypedEvents } from '../../../core/types.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'\nimport '../../button/ui-button.js'\nimport { bound } from '../../../decorators/bound.js'\n\nexport interface UiDialogClosingReason {\n  /**\n   * Whether the dialog was cancelled by either activating the `dismiss` button\n   * or by pressing escape.\n   */\n  cancelled: boolean\n  /**\n   * This is used in cases when the dialog has more complex purpose.\n   * This is the value expected from the dialog.\n   */\n  value?: unknown\n}\n\ninterface DialogEventMap {\n  closing: CustomEvent<UiDialogClosingReason>\n  close: CustomEvent<UiDialogClosingReason>\n}\n\nexport type RenderFunction = () => TemplateResult\n\n/**\n * Styled dialog using a native `<dialog>` element under the hood.\n * Note, since native dialog renders in the top layer it is not necessary\n * to place the dialog in the `<body>`.\n *\n * **Using Buttons**\n *\n * The dialog automatically recognizes buttons with values `confirm` and `dismiss`\n * to close the dialog and dispatch the `close` event. The event has additional\n * closing reason detail.\n *\n * ```javascript\n * <ui-button color=\"text\" value=\"dismiss\">Cancel</ui-button>\n * <ui-button color=\"text\" value=\"confirm\">Take action</ui-button>\n * ```\n *\n * ```javascript\n * <button value=\"dismiss\">Cancel</button>\n * <button value=\"confirm\">Take action</button>\n * ```\n *\n * The detail object of the `close` event has the following properties:\n * - cancelled - Whether the dialog was cancelled by either activating the `dismiss` button or by pressing escape.\n *\n * The `close` event is only dispatched when the user interact with the dialog. Imperative control of the\n * dialog won't trigger the close button.\n *\n * ** Full example**\n *\n * ```javascript\n * <ui-dialog modal>\n *  <ui-icon slot=\"icon\" icon=\"delete\"></ui-icon>\n *\n *  <span slot=\"title\">Delete photos?</span>\n *  <p>This action will permanently remove the selected pictures from your account.</p>\n *\n *  <ui-button color=\"text\" slot=\"button\" value=\"dismiss\" type=\"text\">Cancel</ui-button>\n *  <ui-button color=\"text\" slot=\"button\" value=\"confirm\" type=\"text\">Confirm</ui-button>\n * </ui-dialog>\n * ```\n *\n * @slot - The slot for the content of the dialog.\n * @slot icon - The slot to place the dialog icon\n * @slot title - The slot to place the dialog title. Do not put elements here, just the text.\n * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`\n *  buttons to automatically close the dialog.\n * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,\n *  dispatched before the dialog closes. If prevented, the dialog will not close.\n * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.\n */\nexport default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Opens the dialog as modal when toggling dialog's open state.\n   *\n   * Setting this value after the dialog was opened has no effect.\n   *\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor modal = false\n\n  /**\n   * Toggles visibility of the dialog.\n   * Note, the dialog is opened asynchronously after the update is performed.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor open = false\n\n  /**\n   * Imperative access to create a dismiss button.\n   * When set this will render a dismiss button at the end of the buttons line, before the `confirmLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor dismissLabel: string | undefined\n\n  /**\n   * Imperative access to create a confirm button.\n   * When set this will render a confirm button at the end of the buttons line, after the `dismissLabel` button.\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmLabel: string | undefined\n\n  /**\n   * When true, styles the confirm button with error colors to indicate\n   * a destructive action (e.g., delete, remove, etc.).\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor destructive = false\n\n  /**\n   * Part of the imperative access to the element.\n   * When set, it wraps the content in a `<form>` element.\n   * When this is enabled the following will happen:\n   * - The `confirm` button will get `type=\"submit\"`\n   * - The form `method` attribute is set to `dialog`\n   * - The form `id` attribute is set to a random string. You can get it from the `formId` getter.\n   * - The dialog will dispatch the same `submit` event as the form.\n   * - When the `submit` event dispatched by the dialog gets cancelled, then:\n   *  - The original submit event also gets cancelled.\n   *  - The default confirm action is not invoked\n   *  - The dialog stays opened\n   * - When the submit event is not cancelled, then:\n   *  - The default confirm action is invoked.\n   *  - The dialog is closed.\n   *\n   * @deprecated Wrap the content in a `<form>` element instead.\n   */\n  @property({ type: Boolean }) accessor useForm: boolean | undefined\n\n  /**\n   * Only when `confirmLabel` is set.\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}\n   * @attribute\n   */\n  @property({ type: String }) accessor confirmValue: string | undefined\n  /**\n   * When the dialog is wrapped in a form, set this to `true` to close the dialog\n   * when the form is submitted.\n   *\n   * Note that the dialog doesn't perform any validation of the form. It only closes\n   * when the form is submitted, regardless of the application logic. The `submit` event\n   * is dispatched by the dialog when the form is valid.\n   */\n  @property({ type: Boolean }) accessor submitClose: boolean | undefined\n\n  /**\n   * A reference to the underlying dialog element.\n   */\n  @query('dialog') accessor dialog!: HTMLDialogElement\n\n  @state() protected accessor hasIcon = false\n\n  @state() protected accessor hasTitle = false\n\n  @state() protected accessor hasButton = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor icons!: HTMLElement[]\n\n  @queryAssignedNodes({ flatten: true, slot: 'title' }) protected accessor titles!: HTMLElement[]\n\n  @queryAssignedElements({ flatten: true, slot: 'button' }) protected accessor buttons!: HTMLElement[]\n\n  /**\n   * To be set by a child class when closing the dialog.\n   * This is passed to the close event.\n   */\n  dialogValue?: unknown\n\n  #formId?: string\n\n  /**\n   * @deprecated Use `useForm` instead.\n   */\n  get formId(): string | undefined {\n    return this.#formId\n  }\n\n  /**\n   * @deprecated This will be removed in the future.\n   */\n  @state() accessor #inject: TemplateResult | RenderFunction | undefined\n\n  /**\n   * @deprecated This will be removed in the future.\n   */\n  #pendingStyles?: CSSResultOrNative[]\n\n  /**\n   * A reference to the parent form element.\n   * When a form is found, the dialog will hook into the form's submit event\n   * and close the dialog when the form is submitted.\n   * Since the `submit` event is dispatched when the form is valid,\n   * we can use this to close the dialog and not worry about the form validation.\n   */\n  #form: HTMLFormElement | null = null\n\n  constructor() {\n    super()\n\n    this.addEventListener('click', this.handleClick)\n    this.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  /**\n   * Allows to inject a template into the internals of the element.\n   * This is helpful when working with imperative dialogs.\n   * @param content The content to inject into the body.\n   * @deprecated This will be removed in the future. To use forms, wrap the content in a `<form>` element.\n   */\n  inject(content?: TemplateResult | RenderFunction, styles?: CSSResultOrNative[]): void {\n    this.#inject = content\n    if (styles) {\n      if (this.shadowRoot) {\n        adoptStyles(this.shadowRoot, styles)\n      } else {\n        if (!this.#pendingStyles) {\n          this.#pendingStyles = []\n        }\n        this.#pendingStyles.push(...styles)\n      }\n    }\n    if (this.shadowRoot && styles) {\n      adoptStyles(this.shadowRoot, styles)\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.#form = this.closest('form')\n    if (this.#form) {\n      this.#form.addEventListener('submit', this.handleFormSubmit)\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    if (this.#form) {\n      this.#form.removeEventListener('submit', this.handleFormSubmit)\n      this.#form = null\n    }\n  }\n\n  protected override firstUpdated(): void {\n    const styles = this.#pendingStyles\n    if (styles) {\n      const root = this.shadowRoot as ShadowRoot\n      const all = [...root.adoptedStyleSheets, ...styles]\n      adoptStyles(this.shadowRoot as ShadowRoot, all)\n    }\n  }\n\n  override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('useForm') && this.useForm && !this.#formId) {\n      const r = (Math.random() + 1).toString(36).substring(7)\n      this.#formId = `form-${r}`\n    }\n  }\n\n  @bound\n  protected handleFormSubmit(): void {\n    if (this.submitClose) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    const path = e.composedPath()\n    const { buttons } = this\n    const button = path.find((i) => buttons.includes(i as HTMLElement)) as HTMLButtonElement | UiButton | undefined\n    if (!button) {\n      return\n    }\n    if (button.type === 'submit') {\n      // Adds support for forms.\n      // When a form's submit button is clicked we yield the flow control to the form.\n      // This way the form can handle the submit event.\n      return\n    }\n    const { value = '' } = button\n    this.handleInteraction(value as 'dismiss' | 'confirm')\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    super.handleKeyDown(e)\n    if (e.defaultPrevented) {\n      return\n    }\n    if (e.key === 'Escape') {\n      this.handleInteraction('dismiss')\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('open')) {\n      this.#controlVisibility()\n    }\n    super.updated(changedProperties)\n  }\n\n  #controlVisibility(): void {\n    const { dialog, modal, open } = this\n    if (!dialog) {\n      return\n    }\n    if (open) {\n      if (modal) {\n        dialog.showModal()\n      } else {\n        dialog.show()\n      }\n    } else {\n      dialog.close()\n    }\n  }\n\n  #handleSlotChange(): void {\n    const { icons, titles, buttons } = this\n    this.hasIcon = !!icons && !!icons.length\n    this.hasTitle = !!titles && !!titles.length\n    this.hasButton = !!buttons && !!buttons.length\n  }\n\n  protected handleInteraction(value: 'dismiss' | 'confirm'): void {\n    if (!['dismiss', 'confirm'].includes(value)) {\n      return\n    }\n\n    const detail: UiDialogClosingReason = {\n      cancelled: value === 'dismiss',\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n\n    // Dispatch cancelable closing event first\n    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n      cancelable: true,\n      composed: false,\n      bubbles: false,\n      detail,\n    })\n    const canClose = this.dispatchEvent(closingEvent)\n\n    // Only proceed with closing if the event wasn't canceled\n    if (!canClose) {\n      return\n    }\n\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDialogClose(): void {\n    if (!this.open) {\n      return\n    }\n\n    const detail: UiDialogClosingReason = {\n      cancelled: true,\n    }\n    if (this.dialogValue !== undefined) {\n      detail.value = this.dialogValue\n    }\n\n    // Dispatch cancelable closing event first\n    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {\n      cancelable: true,\n      composed: false,\n      bubbles: false,\n      detail,\n    })\n    const canClose = this.dispatchEvent(closingEvent)\n\n    // Only proceed with closing if the event wasn't canceled\n    if (!canClose) {\n      // If closing was prevented, reopen the dialog\n      this.dialog.showModal()\n      return\n    }\n\n    this.open = false\n    this.dispatchEvent(\n      new CustomEvent<UiDialogClosingReason>('close', {\n        composed: true,\n        detail,\n      })\n    )\n  }\n\n  protected handleDismiss(): void {\n    this.handleInteraction('dismiss')\n  }\n\n  protected handleConfirm(): void {\n    if (!this.useForm) {\n      this.handleInteraction('confirm')\n    }\n  }\n\n  #handleSubmit(event: SubmitEvent): void {\n    const form = event.target as HTMLFormElement\n    const copy = new SyntheticSubmitEvent(event.type, form, {\n      submitter: event.submitter,\n      cancelable: true,\n      bubbles: false,\n      composed: false,\n    })\n    const dispatched = this.dispatchEvent(copy)\n    if (dispatched) {\n      this.handleInteraction('confirm')\n    } else {\n      event.preventDefault()\n    }\n  }\n\n  override render(): TemplateResult {\n    const { useForm, modal } = this\n    const dialogClass = modal ? 'modal' : 'non-modal'\n    return html`\n      <dialog @close=\"${this.handleDialogClose}\" part=\"dialog\" class=\"${dialogClass}\">\n        <div class=\"container\">${useForm ? this.#renderFormContent() : this.renderContent()}</div>\n      </dialog>\n    `\n  }\n\n  protected renderContent(): TemplateResult[] | TemplateResult {\n    return [this.renderIcon(), this.renderTitle(), this.renderBody(), this.renderButtons()]\n  }\n\n  #renderFormContent(): TemplateResult {\n    return html`\n      <form id=\"${ifDefined(this.formId)}\" method=\"dialog\" @submit=\"${this.#handleSubmit}\" part=\"form\">\n        ${this.renderContent()}\n      </form>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    const classes: ClassInfo = {\n      'icon': true,\n      'with-icon': this.hasIcon,\n      'destructive': this.destructive,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"icon\">\n        <slot name=\"icon\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderTitle(): TemplateResult {\n    const classes: ClassInfo = {\n      'title': true,\n      'with-title': this.hasTitle,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"title\">\n        <slot name=\"title\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderBody(): TemplateResult {\n    let content = this.#inject\n    if (typeof content === 'function') {\n      content = content()\n    }\n    const injected = content || nothing\n    return html` <div class=\"content\" part=\"body\"><slot></slot>${injected}</div> `\n  }\n\n  protected renderButtons(): TemplateResult {\n    const classes: ClassInfo = {\n      'buttons': true,\n      'with-buttons': this.hasButton || !!this.confirmLabel || !!this.dismissLabel,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\" part=\"button\">\n        <slot name=\"button\" @slotchange=\"${this.#handleSlotChange}\"></slot>\n        ${this.#renderDismissButton()} ${this.#renderConfirmButton()}\n      </div>\n    `\n  }\n\n  #renderDismissButton(): TemplateResult | typeof nothing {\n    const { dismissLabel } = this\n    if (!dismissLabel) {\n      return nothing\n    }\n    return html`\n      <ui-button\n        color=\"text\"\n        value=\"dismiss\"\n        class=\"internal-button\"\n        @click=\"${this.handleDismiss}\"\n        part=\"negative-action\"\n        >${dismissLabel}</ui-button\n      >\n    `\n  }\n\n  #renderConfirmButton(): TemplateResult | typeof nothing {\n    const { confirmLabel, confirmValue = 'confirm', useForm, destructive } = this\n    if (!confirmLabel) {\n      return nothing\n    }\n    const type = useForm ? 'submit' : 'button'\n    const buttonClass = destructive ? 'internal-button destructive' : 'internal-button'\n    return html`\n      <ui-button\n        color=\"text\"\n        type=\"${type}\"\n        value=\"${confirmValue}\"\n        class=\"${buttonClass}\"\n        @click=\"${this.handleConfirm}\"\n        part=\"positive-action\"\n        >${confirmLabel}</ui-button\n      >\n    `\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.18",
+  "version": "0.5.19",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/md/dialog/internals/Dialog.ts

@@ -24,6 +24,7 @@ export interface UiDialogClosingReason {
 }
 
 interface DialogEventMap {
+  closing: CustomEvent<UiDialogClosingReason>
   close: CustomEvent<UiDialogClosingReason>
 }
 
@@ -75,6 +76,8 @@ export type RenderFunction = () => TemplateResult
  * @slot title - The slot to place the dialog title. Do not put elements here, just the text.
  * @slot button - The slot to place the dialog buttons. Use the `confirm` or `dismiss`
  *  buttons to automatically close the dialog.
+ * @fires closing - A cancelable, non-bubbling event with the `UiDialogClosingReason` as the detail,
+ *  dispatched before the dialog closes. If prevented, the dialog will not close.
  * @fires close - A non-bubbling, non-cancellable event with the `UiDialogClosingReason` as the detail.
  */
 export default class UiDialog extends UiElement implements TypedEvents<DialogEventMap> {
@@ -349,13 +352,29 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     if (!['dismiss', 'confirm'].includes(value)) {
       return
     }
-    this.open = false
+
     const detail: UiDialogClosingReason = {
       cancelled: value === 'dismiss',
     }
     if (this.dialogValue !== undefined) {
       detail.value = this.dialogValue
     }
+
+    // Dispatch cancelable closing event first
+    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {
+      cancelable: true,
+      composed: false,
+      bubbles: false,
+      detail,
+    })
+    const canClose = this.dispatchEvent(closingEvent)
+
+    // Only proceed with closing if the event wasn't canceled
+    if (!canClose) {
+      return
+    }
+
+    this.open = false
     this.dispatchEvent(
       new CustomEvent<UiDialogClosingReason>('close', {
         composed: true,
@@ -368,8 +387,37 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     if (!this.open) {
       return
     }
+
+    const detail: UiDialogClosingReason = {
+      cancelled: true,
+    }
+    if (this.dialogValue !== undefined) {
+      detail.value = this.dialogValue
+    }
+
+    // Dispatch cancelable closing event first
+    const closingEvent = new CustomEvent<UiDialogClosingReason>('closing', {
+      cancelable: true,
+      composed: false,
+      bubbles: false,
+      detail,
+    })
+    const canClose = this.dispatchEvent(closingEvent)
+
+    // Only proceed with closing if the event wasn't canceled
+    if (!canClose) {
+      // If closing was prevented, reopen the dialog
+      this.dialog.showModal()
+      return
+    }
+
     this.open = false
-    this.handleInteraction('dismiss')
+    this.dispatchEvent(
+      new CustomEvent<UiDialogClosingReason>('close', {
+        composed: true,
+        detail,
+      })
+    )
   }
 
   protected handleDismiss(): void {

package/test/md/dialog/UiDialog.test.ts

@@ -441,5 +441,319 @@ describe('md', () => {
         })
       })
     })
+
+    describe('closing event', () => {
+      it('dispatches the closing event before close event when dismissing', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched')
+        assert.isTrue(closingSpy.calledBefore(closeSpy), 'closing event was dispatched before close event')
+      })
+
+      it('dispatches the closing event before close event when confirming', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched')
+        assert.isTrue(closingSpy.calledBefore(closeSpy), 'closing event was dispatched before close event')
+      })
+
+      it('dispatches the closing event when pressing Escape', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        const button = element.querySelector('ui-button')!
+        button.focus()
+        await UiMock.keyPress(element, 'Escape', { key: 'Escape' })
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched')
+        assert.isTrue(closingSpy.calledBefore(closeSpy), 'closing event was dispatched before close event')
+      })
+
+      it('dispatches the closing event with correct detail for dismiss action', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        const event = closingSpy.args[0][0] as CustomEvent<UiDialogClosingReason>
+        assert.isTrue(event.detail.cancelled, 'cancelled flag is true for dismiss action')
+        assert.isUndefined(event.detail.value, 'value is undefined when no dialogValue is set')
+      })
+
+      it('dispatches the closing event with correct detail for confirm action', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        const event = closingSpy.args[0][0] as CustomEvent<UiDialogClosingReason>
+        assert.isFalse(event.detail.cancelled, 'cancelled flag is false for confirm action')
+        assert.isUndefined(event.detail.value, 'value is undefined when no dialogValue is set')
+      })
+
+      it('includes dialogValue in closing event detail', async () => {
+        const element = await buttonFixture()
+        element.dialogValue = 'test-value'
+        const closingSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        const event = closingSpy.args[0][0] as CustomEvent<UiDialogClosingReason>
+        assert.equal(event.detail.value, 'test-value', 'dialogValue is included in event detail')
+      })
+
+      it('prevents dialog closing when closing event is cancelled', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+      })
+
+      it('prevents dialog closing when confirming and closing event is cancelled', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+
+        const button = element.querySelector('ui-button[value="confirm"]') as UiButton
+        button.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+      })
+
+      it('prevents dialog closing when pressing Escape and closing event is cancelled', async () => {
+        const element = await buttonFixture()
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+
+        const button = element.querySelector('ui-button')!
+        button.focus()
+        await UiMock.keyPress(element, 'Escape', { key: 'Escape' })
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+      })
+
+      it('prevents native dialog close and reopens when closing event is cancelled', async () => {
+        const element = await modalFixture()
+        const closingSpy = sinon.spy()
+        const showModalSpy = sinon.spy(element.dialog, 'showModal')
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault() // Cancel the closing
+        })
+
+        element.open = true
+        await element.updateComplete
+        assert.isTrue(element.open, 'dialog is initially open')
+        assert.isTrue(element.dialog.open, 'native dialog is open')
+
+        // Reset the spy count after initial open
+        showModalSpy.resetHistory()
+
+        // Simulate native dialog close event (e.g., clicking backdrop)
+        element.dialog.dispatchEvent(new Event('close'))
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isTrue(element.open, 'dialog remains open when closing is prevented')
+        assert.isTrue(showModalSpy.calledOnce, 'showModal was called to reopen the dialog')
+      })
+
+      it('verifies closing event properties', async () => {
+        const element = await buttonFixture()
+        let closingEvent: CustomEvent<UiDialogClosingReason>
+
+        element.addEventListener('closing', (event) => {
+          closingEvent = event as CustomEvent<UiDialogClosingReason>
+        })
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        assert.isDefined(closingEvent!, 'closing event was dispatched')
+        assert.isTrue(closingEvent!.cancelable, 'closing event is cancelable')
+        assert.isFalse(closingEvent!.bubbles, 'closing event does not bubble')
+        assert.isFalse(closingEvent!.composed, 'closing event is not composed')
+        assert.equal(closingEvent!.type, 'closing', 'event type is "closing"')
+      })
+
+      it('works with imperative dismiss and confirm buttons', async () => {
+        const element = await basicFixture()
+        element.dismissLabel = 'Cancel'
+        element.confirmLabel = 'OK'
+        await element.updateComplete
+
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+        element.addEventListener('closing', closingSpy)
+        element.addEventListener('close', closeSpy)
+
+        // Test dismiss button
+        const dismissButton = element.shadowRoot!.querySelector('.internal-button[value="dismiss"]') as UiButton
+        dismissButton.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched for dismiss')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched for dismiss')
+
+        // Reset spies and test confirm button
+        closingSpy.resetHistory()
+        closeSpy.resetHistory()
+        element.open = true
+        await element.updateComplete
+
+        const confirmButton = element.shadowRoot!.querySelector('.internal-button[value="confirm"]') as UiButton
+        confirmButton.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched for confirm')
+        assert.isTrue(closeSpy.calledOnce, 'close event was dispatched for confirm')
+      })
+
+      it('can prevent closing with imperative buttons', async () => {
+        const element = await basicFixture()
+        element.dismissLabel = 'Cancel'
+        await element.updateComplete
+
+        const closingSpy = sinon.spy()
+        const closeSpy = sinon.spy()
+
+        element.addEventListener('closing', (event) => {
+          closingSpy()
+          event.preventDefault()
+        })
+        element.addEventListener('close', closeSpy)
+
+        element.open = true
+        await element.updateComplete
+
+        const dismissButton = element.shadowRoot!.querySelector('.internal-button[value="dismiss"]') as UiButton
+        dismissButton.click()
+
+        assert.isTrue(closingSpy.calledOnce, 'closing event was dispatched')
+        assert.isFalse(closeSpy.called, 'close event was not dispatched')
+        assert.isTrue(element.open, 'dialog remains open')
+      })
+    })
+
+    describe('accessibility', () => {
+      it('meets accessibility standards in closed state', async () => {
+        const element = await basicFixture()
+        await assert.isAccessible(element)
+      })
+
+      it('meets accessibility standards when open', async () => {
+        const element = await basicFixture()
+        element.open = true
+        await element.updateComplete
+        await assert.isAccessible(element)
+      })
+
+      it('meets accessibility standards with modal dialog', async () => {
+        const element = await modalFixture()
+        element.open = true
+        await element.updateComplete
+        await assert.isAccessible(element)
+      })
+
+      it('meets accessibility standards with full content', async () => {
+        const element: UiDialog = await fixture(html`
+          <ui-dialog modal open>
+            <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
+            <span slot="title">Delete confirmation</span>
+            <p>Are you sure you want to delete this item?</p>
+            <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+            <ui-button color="text" slot="button" value="confirm">Delete</ui-button>
+          </ui-dialog>
+        `)
+        await element.updateComplete
+        await assert.isAccessible(element)
+      })
+
+      it('maintains accessibility when closing is prevented', async () => {
+        const element = await buttonFixture()
+        element.addEventListener('closing', (event) => {
+          event.preventDefault()
+        })
+
+        element.open = true
+        await element.updateComplete
+
+        const button = element.querySelector('ui-button[value="dismiss"]') as UiButton
+        button.click()
+
+        // Dialog should remain open and accessible
+        assert.isTrue(element.open, 'dialog remains open')
+        await assert.isAccessible(element)
+      })
+    })
   })
 })