@dile/ui 3.15.0 → 3.16.2

package/components/drop-file/drop-file.spec.js

@@ -109,4 +109,106 @@ describe('dile-drop-file', () => {
     expect(eventDetail).toBeTruthy();
     expect(eventDetail.file).toBeNull();
   });
+
+  describe('multiple mode', () => {
+    function createFile(name, content = 'content') {
+      return new File([content], name, { lastModified: 1 });
+    }
+
+    function dropFiles(el, files) {
+      const dataTransfer = new DataTransfer();
+      files.forEach(file => dataTransfer.items.add(file));
+      const dropZone = el.shadowRoot.querySelector('#dropZone');
+      dropZone.dispatchEvent(new DragEvent('drop', { dataTransfer, bubbles: true, cancelable: true }));
+      return el.updateComplete;
+    }
+
+    it('renders the file input with the multiple attribute', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      expect(el.shadowRoot.querySelector('input[type="file"]').hasAttribute('multiple')).toBe(true);
+    });
+
+    it('does not render the multiple attribute by default', async () => {
+      const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+      expect(el.shadowRoot.querySelector('input[type="file"]').hasAttribute('multiple')).toBe(false);
+    });
+
+    it('accepts several dropped files and renders a preview for each one', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      let eventDetail = null;
+      el.addEventListener('dile-drop-file-changed', (e) => { eventDetail = e.detail; });
+
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(2);
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(el.getFiles().length).toBe(2);
+      expect(el.shadowRoot.querySelector('#fileInput').files.length).toBe(2);
+      expect(eventDetail.files.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(eventDetail.file.name).toBe('a.txt');
+    });
+
+    it('accumulates files between selections without duplicates', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt')]);
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(2);
+    });
+
+    it('removes a single file with removeFile', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt'), createFile('c.txt')]);
+
+      el.removeFile(1);
+      await el.updateComplete;
+
+      expect(el.value.map(file => file.name)).toEqual(['a.txt', 'c.txt']);
+      expect(el.shadowRoot.querySelector('#fileInput').files.length).toBe(2);
+    });
+
+    it('removes a file when its preview clear link is clicked', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      const preview = el.shadowRoot.querySelectorAll('dile-file-preview')[0];
+      await preview.updateComplete;
+      preview.shadowRoot.querySelector('a').click();
+      await el.updateComplete;
+
+      expect(el.value.map(file => file.name)).toEqual(['b.txt']);
+    });
+
+    it('discards files with invalid extensions and keeps the valid ones', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      el.allowedExtensions = ['pdf'];
+      await dropFiles(el, [createFile('a.pdf'), createFile('b.exe')]);
+
+      expect(el.value.map(file => file.name)).toEqual(['a.pdf']);
+      expect(el.errored).toBe(true);
+      expect(el.shadowRoot.querySelector('.message.errored-msg')).toBeTruthy();
+    });
+
+    it('clears all the files', async () => {
+      const el = await renderDropFile('<dile-drop-file multiple></dile-drop-file>');
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      el.clear();
+      await el.updateComplete;
+
+      expect(el.value).toEqual([]);
+      expect(el.shadowRoot.querySelectorAll('dile-file-preview').length).toBe(0);
+    });
+
+    it('sets all the files as form value', async () => {
+      document.body.innerHTML = '<form><dile-drop-file name="docs" multiple></dile-drop-file></form>';
+      const el = document.querySelector('dile-drop-file');
+      await el.updateComplete;
+      await dropFiles(el, [createFile('a.txt'), createFile('b.txt')]);
+
+      const formData = new FormData(document.querySelector('form'));
+      expect(formData.getAll('docs').map(file => file.name)).toEqual(['a.txt', 'b.txt']);
+    });
+  });
 });

package/components/drop-file/src/DileDropFile.js

@@ -64,6 +64,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       name: { type: String, reflect: true },
       accept: { type: String },
       capture: { type: String },
+      multiple: { type: Boolean, reflect: true },
+      files: { state: true },
     };
   }
 
@@ -83,6 +85,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     this.allowedExtensions = [];
     this.accept = '';
     this.capture = '';
+    this.multiple = false;
+    this.files = [];
     this.internals = this.attachInternals();
   } 
 
@@ -109,12 +113,23 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
         ${this.dropLabelTemplate}
       </div>
       ${this.messageTemplate}
-      <input type="file" id="fileInput" @change=${this._handleFileInput} accept=${ifDefined(this.accept || undefined)} capture=${ifDefined(this.capture || undefined)}>
-      <dile-file-preview 
-        fileName="${this.fileName}"
-        selectedFileLabel="${this.selectedFileLabel}"
-        @dile-file-clear=${this.clear}
-      ></dile-file-preview>
+      <input type="file" id="fileInput" ?multiple=${this.multiple} @change=${this._handleFileInput} accept=${ifDefined(this.accept || undefined)} capture=${ifDefined(this.capture || undefined)}>
+      ${this.multiple
+        ? this.files.map((file, index) => html`
+          <dile-file-preview
+            fileName="${file.name}"
+            selectedFileLabel="${this.selectedFileLabel}"
+            @dile-file-clear=${() => this.removeFile(index)}
+          ></dile-file-preview>
+        `)
+        : html`
+          <dile-file-preview 
+            fileName="${this.fileName}"
+            selectedFileLabel="${this.selectedFileLabel}"
+            @dile-file-clear=${this.clear}
+          ></dile-file-preview>
+        `
+      }
     `;
   }
 
@@ -167,6 +182,10 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   }
 
   _processFile(files) {
+    if (this.multiple) {
+      this._processMultipleFiles(files);
+      return;
+    }
     this.internals.setFormValue(files.length > 0 ? files[0] : null);
     if (files.length > 0) {
       this.fileName = files[0].name;
@@ -183,6 +202,56 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
     }
   }
 
+  _processMultipleFiles(files) {
+    const incoming = Array.from(files);
+    if (incoming.length === 0) {
+      // Restore the input files, as a canceled dialog empties it
+      this._syncFileInput();
+      return;
+    }
+    const validFiles = incoming.filter(file => this._isValidExtension(file.name));
+    const newFiles = validFiles.filter(file => !this.files.some(current => this._isSameFile(current, file)));
+    this.files = [...this.files, ...newFiles];
+    if (validFiles.length < incoming.length) {
+      this.message = `${this.extensionErrorMessage} ${this.allowedExtensions.join(', ')}`;
+      this.errored = true;
+    } else {
+      this.message = this.firstMessage || '';
+      this.errored = false;
+    }
+    this._syncFiles();
+  }
+
+  _isSameFile(a, b) {
+    return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+  }
+
+  _syncFileInput() {
+    if (!this.fileInput) return;
+    const dataTransfer = new DataTransfer();
+    this.files.forEach(file => dataTransfer.items.add(file));
+    this.fileInput.files = dataTransfer.files;
+  }
+
+  _syncFiles() {
+    this._syncFileInput();
+    if (this.files.length > 0) {
+      const formData = new FormData();
+      this.files.forEach(file => formData.append(this.name || 'files', file));
+      this.internals.setFormValue(formData);
+    } else {
+      this.internals.setFormValue(null);
+    }
+    this.emmitChange();
+    this._emitDropFileChanged(this.files[0] || null);
+  }
+
+  removeFile(index) {
+    if (index < 0 || index >= this.files.length) return;
+    this.files = this.files.filter((_, i) => i !== index);
+    this._syncFiles();
+  }
+
   _isValidExtension(fileName) {
     if(this.allowedExtensions.length === 0) {
       return true;
@@ -216,7 +285,8 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
       bubbles: true,
       composed: true,
       detail: {
-        file: file
+        file: file,
+        files: this.multiple ? [...this.files] : (file ? [file] : []),
       }
     }));
   }
@@ -228,16 +298,23 @@ export class DileDropFile extends DileEmmitChange(LitElement) {
   clear() {
     this.fileInput.value = "";
     this.fileName = "";
+    this.files = [];
     this.internals.setFormValue(null);
     this._emitDropFileChanged(null);
     this.emmitChange();
   }
 
   getFiles() {
+    if (this.multiple) {
+      return [...this.files];
+    }
     return this.fileInput.files;
   }
 
   get value() {
+    if (this.multiple) {
+      return [...this.files];
+    }
     if(this.fileInput) {
       return this.fileInput.files[0];
     } else {

package/components/modal/modal.spec.js

@@ -43,4 +43,208 @@ describe('dile-modal', () => {
     expect(el.opened).toBe(false);
     expect(closed).toBe(true);
   });
+
+  it('releases the background layer immediately when the animation duration is 0s', async () => {
+    const el = await renderModal('<dile-modal style="--dile-modal-animation-duration: 0s">Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    el.close();
+    await el.updateComplete;
+
+    const section = el.shadowRoot.querySelector('section');
+    expect(getComputedStyle(section).display).toBe('none');
+  });
+
+  it('releases the background layer after the close animation even without transitionend', async () => {
+    const el = await renderModal('<dile-modal style="--dile-modal-animation-duration: 0.1s">Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    el.close();
+    await el.updateComplete;
+    const section = el.shadowRoot.querySelector('section');
+    expect(getComputedStyle(section).pointerEvents).toBe('none');
+
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await el.updateComplete;
+    expect(getComputedStyle(section).display).toBe('none');
+  });
+
+  it('ignores transitionend events coming from inner elements', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+    el.close();
+    await el.updateComplete;
+
+    const section = el.shadowRoot.querySelector('section');
+    const content = el.shadowRoot.querySelector('.content');
+    content.dispatchEvent(new TransitionEvent('transitionend', { bubbles: true, propertyName: 'opacity' }));
+    await el.updateComplete;
+
+    expect(section.classList.contains('opened')).toBe(true);
+  });
+
+  it('dispatches dile-modal-closed and animates when the opened property is set to false', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.opened = true;
+    await el.updateComplete;
+
+    let closed = false;
+    el.addEventListener('dile-modal-closed', () => { closed = true; });
+
+    el.opened = false;
+    await el.updateComplete;
+
+    expect(closed).toBe(true);
+    expect(el.shadowRoot.querySelector('section').classList.contains('opened')).toBe(true);
+  });
+
+  it('opens and closes through the opened attribute', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    let closed = false;
+    el.addEventListener('dile-modal-closed', () => { closed = true; });
+
+    el.setAttribute('opened', '');
+    await el.updateComplete;
+    expect(el.opened).toBe(true);
+
+    el.removeAttribute('opened');
+    await el.updateComplete;
+    expect(el.opened).toBe(false);
+    expect(closed).toBe(true);
+  });
+
+  it('reflects the opened property to the attribute', async () => {
+    const el = await renderModal('<dile-modal opened>Modal content</dile-modal>');
+    el.close();
+    await el.updateComplete;
+    expect(el.hasAttribute('opened')).toBe(false);
+
+    el.setAttribute('opened', '');
+    await el.updateComplete;
+    expect(el.opened).toBe(true);
+  });
+
+  it('closes a blocking modal when Esc is pressed', async () => {
+    const el = await renderModal('<dile-modal blocking>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await el.updateComplete;
+
+    expect(el.opened).toBe(false);
+  });
+
+  it('closes only the topmost modal when Esc is pressed', async () => {
+    document.body.innerHTML = '<dile-modal id="first">First</dile-modal><dile-modal id="second">Second</dile-modal>';
+    const first = document.getElementById('first');
+    const second = document.getElementById('second');
+    await first.updateComplete;
+    await second.updateComplete;
+    first.open();
+    second.open();
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(second.opened).toBe(false);
+    expect(first.opened).toBe(true);
+
+    window.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    expect(first.opened).toBe(false);
+  });
+
+  it('exposes the content as an accessible modal dialog', async () => {
+    const el = await renderModal('<dile-modal label="Settings">Modal content</dile-modal>');
+    const dialog = el.shadowRoot.querySelector('[role="dialog"]');
+
+    expect(dialog).not.toBeNull();
+    expect(dialog.getAttribute('aria-modal')).toBe('true');
+    expect(dialog.getAttribute('aria-label')).toBe('Settings');
+  });
+
+  it('renders the close icon as an accessible button', async () => {
+    const el = await renderModal('<dile-modal showCloseIcon closeLabel="Cerrar">Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    const button = el.shadowRoot.querySelector('button.closebutton');
+    expect(button.getAttribute('aria-label')).toBe('Cerrar');
+
+    button.click();
+    expect(el.opened).toBe(false);
+  });
+
+  it('moves the focus into the modal and restores it on close', async () => {
+    document.body.innerHTML = '<button id="opener">Open</button><dile-modal>Modal content</dile-modal>';
+    const opener = document.getElementById('opener');
+    const el = document.querySelector('dile-modal');
+    await el.updateComplete;
+
+    opener.focus();
+    el.open();
+    await el.updateComplete;
+    expect(el.shadowRoot.activeElement).toBe(el.shadowRoot.querySelector('.content'));
+
+    el.close();
+    expect(document.activeElement).toBe(opener);
+  });
+
+  it('keeps the focus on content focused by the user when opening', async () => {
+    const el = await renderModal('<dile-modal><input id="field"></dile-modal>');
+    const field = document.getElementById('field');
+
+    el.open();
+    await el.updateComplete;
+    field.focus();
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(document.activeElement).toBe(field);
+  });
+
+  it('dispatches dile-modal-opened when opened', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    let opened = false;
+    el.addEventListener('dile-modal-opened', () => { opened = true; });
+
+    el.open();
+    expect(opened).toBe(true);
+  });
+
+  it('becomes opaque after opening', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    const section = el.shadowRoot.querySelector('section');
+    await expect.poll(() => section.classList.contains('opaque')).toBe(true);
+  });
+
+  it('locks the page scroll while any modal is opened', async () => {
+    document.body.innerHTML = '<dile-modal id="first">First</dile-modal><dile-modal id="second">Second</dile-modal>';
+    const first = document.getElementById('first');
+    const second = document.getElementById('second');
+    await second.updateComplete;
+    const root = document.documentElement;
+
+    first.open();
+    second.open();
+    expect(root.style.overflow).toBe('hidden');
+
+    second.close();
+    expect(root.style.overflow).toBe('hidden');
+
+    first.close();
+    expect(root.style.overflow).toBe('');
+  });
+
+  it('unlocks the page scroll when an opened modal is removed from the document', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    expect(document.documentElement.style.overflow).toBe('hidden');
+
+    el.remove();
+    expect(document.documentElement.style.overflow).toBe('');
+  });
 });

package/components/modal/src/DileModal.js

@@ -1,33 +1,72 @@
 import { LitElement, html, css } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
 import '../../icon/icon.js';
 import { closeIcon } from '@dile/icons/index.js'
 import { DileCloseOnEscPressed } from '../../../mixins/close-on-esc-pressed/index.js'
 
+// Opened modals, in opening order. The last one is the topmost modal.
+const openedModals = [];
+// Escape keydown events already handled by a modal.
+const handledEscEvents = new WeakSet();
+// Inline styles of the document before locking the page scroll.
+let scrollLockBackup = null;
+
+// Locks the page scroll while any modal is opened.
+function updateScrollLock() {
+  const root = document.documentElement;
+  if (openedModals.length && !scrollLockBackup) {
+    const scrollbarWidth = window.innerWidth - root.clientWidth;
+    scrollLockBackup = {
+      overflow: root.style.overflow,
+      paddingRight: root.style.paddingRight,
+    };
+    root.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      // Avoids the layout shift caused by the scrollbar disappearing.
+      const paddingRight = parseFloat(getComputedStyle(root).paddingRight) || 0;
+      root.style.paddingRight = `${paddingRight + scrollbarWidth}px`;
+    }
+  } else if (!openedModals.length && scrollLockBackup) {
+    root.style.overflow = scrollLockBackup.overflow;
+    root.style.paddingRight = scrollLockBackup.paddingRight;
+    scrollLockBackup = null;
+  }
+}
+
 export class DileModal extends DileCloseOnEscPressed(LitElement) {
   static get properties() {
     return {
-      _toChange: { type: Boolean },
+      _toChange: { state: true },
       /**
        * If true the modal box is in opened status.
        */
-      opened: { type: Boolean },
+      opened: { type: Boolean, reflect: true, noAccessor: true },
       /**
        * If true the modal box displays a close icon
        */
       showCloseIcon: { type: Boolean },
       /**
-       * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box do not close.
+       * If true the modal box blocks the screen. That is, when you click in the background layer, the modal box does not close.
        */
       blocking: { type: Boolean },
+      /**
+       * Accessible name of the modal box, announced by screen readers when it opens.
+       */
+      label: { type: String },
+      /**
+       * Accessible label of the close icon button.
+       */
+      closeLabel: { type: String },
     };
   }
 
   constructor() {
     super();
     this._toChange = false;
-    this.opened = false;
+    this._opened = false;
     this.showCloseIcon = false;
     this.blocking = false;
+    this.closeLabel = 'Close';
   }
 
   static get styles() {
@@ -52,11 +91,10 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
           left: 0;
           top: 0;
           height: 100vh;
+          height: 100dvh;
           width: 100vw;
           display: none;
           transition: opacity var(--dile-modal-animation-duration, 0.3s) ease-in;
-          -webkit-transition: opacity var(--dile-modal-animation-duration, 0.3s)
-            ease-in;
           align-items: center;
           justify-content: center;
           z-index: var(--dile-modal-z-index, 100);
@@ -87,13 +125,13 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
         }
         article {
           overflow: auto;
-          max-height: 100%;
           padding-right: var(--dile-modal-content-padding, 1em);
           height: var(--dile-modal-height, auto);
           max-height: var(--dile-modal-max-height, 90vh);
         }
         .transparent {
           opacity: 0;
+          pointer-events: none;
         }
         .opaque {
           opacity: 1;
@@ -102,12 +140,20 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
         .opened {
           display: flex !important;
         }
-        dile-icon {
+        .content:focus {
+          outline: none;
+        }
+        .closebutton {
           position: absolute;
-          display: inline-block;
+          display: inline-flex;
           top: var(--dile-modal-close-icon-top, 5px);
           right: var(--dile-modal-close-icon-right, 18px);
           z-index: 1002;
+          padding: 0;
+          margin: 0;
+          border: none;
+          background: none;
+          color: inherit;
           cursor: var(--dile-modal-close-icon-cursor, pointer);
         }
         .contentIconSeparation {
@@ -125,9 +171,17 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
         @transitionend="${this.animationEnd}"
         id="backgroundmodal"
       >
-        <div class="content" @click="${this.contentClick}">
+        <div
+          class="content"
+          role="dialog"
+          aria-modal="true"
+          aria-label="${ifDefined(this.label)}"
+          tabindex="-1"
+        >
           ${this.showCloseIcon
-            ? html`<dile-icon .icon="${closeIcon}" @click="${this.close}" class="closeicon"></dile-icon>`
+            ? html`<button type="button" class="closebutton" aria-label="${this.closeLabel}" @click="${this.close}">
+                <dile-icon .icon="${closeIcon}" class="closeicon"></dile-icon>
+              </button>`
             : ""}
           <article class="${this.showCloseIcon ? "contentIconSeparation" : ""}">
             <slot></slot>
@@ -153,12 +207,29 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
     return '';
   }
 
+  get opened() {
+    return this._opened;
+  }
+
+  // The opened property can be changed by open() / close(), or directly
+  // by the property or the attribute. All ways run the same transitions.
+  set opened(value) {
+    const oldValue = this._opened;
+    value = Boolean(value);
+    if (value === oldValue) {
+      return;
+    }
+    this._opened = value;
+    this.requestUpdate('opened', oldValue);
+    if (value) {
+      this._startOpening();
+    } else {
+      this._startClosing();
+    }
+  }
+
   open() {
     this.opened = true;
-    this._toChange = true;
-    setTimeout(() => {
-      this._toChange = false;
-    }, 50);
   }
 
   _backgroundModalClick(e) {
@@ -175,22 +246,166 @@ export class DileModal extends DileCloseOnEscPressed(LitElement) {
   }
 
   close() {
-    if(this.opened) {
-      this.opened = false;
-      this._toChange = true;
-      this.dispatchEvent(
-        new CustomEvent("dile-modal-closed", {
-          bubbles: true,
-          composed: true,
-          detail: this,
-        })
-      );
+    this.opened = false;
+  }
+
+  _startOpening() {
+    this._clearCloseTimeout();
+    this._removeFromOpenedModals();
+    if (this.isConnected) {
+      this._addToOpenedModals();
+    }
+    this._toChange = true;
+    this._cancelOpenFrame();
+    // Waits for the layer to be painted with opacity 0, so the fade-in transition runs.
+    this.updateComplete.then(() => {
+      this._openFrame = requestAnimationFrame(() => {
+        this._openFrame = requestAnimationFrame(() => {
+          this._openFrame = null;
+          if (this.opened) {
+            this._toChange = false;
+          }
+        });
+      });
+    });
+    this._previousFocus = this._getDeepActiveElement();
+    this.updateComplete.then(() => this._focusContent());
+    this.dispatchEvent(
+      new CustomEvent("dile-modal-opened", {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      })
+    );
+  }
+
+  _cancelOpenFrame() {
+    if (this._openFrame) {
+      cancelAnimationFrame(this._openFrame);
+      this._openFrame = null;
+    }
+  }
+
+  // Moves the focus inside the modal, unless the content already took it.
+  _focusContent() {
+    if (!this.opened || this.matches(':focus-within')) {
+      return;
+    }
+    this.shadowRoot.querySelector('.content')?.focus({ preventScroll: true });
+  }
+
+  // Returns the focus to the element that had it before opening the modal.
+  _restoreFocus() {
+    const previousFocus = this._previousFocus;
+    this._previousFocus = null;
+    const active = this._getDeepActiveElement();
+    const focusLost = !active || active === document.body;
+    if (!previousFocus?.isConnected || !(focusLost || this.matches(':focus-within'))) {
+      return;
+    }
+    previousFocus.focus({ preventScroll: true });
+  }
+
+  _getDeepActiveElement() {
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement) {
+      active = active.shadowRoot.activeElement;
+    }
+    return active;
+  }
+
+  _startClosing() {
+    this._cancelOpenFrame();
+    this._removeFromOpenedModals();
+    this._toChange = true;
+    this._restoreFocus();
+    this._scheduleCloseEnd();
+    this.dispatchEvent(
+      new CustomEvent("dile-modal-closed", {
+        bubbles: true,
+        composed: true,
+        detail: this,
+      })
+    );
+  }
+
+  _removeFromOpenedModals() {
+    const index = openedModals.indexOf(this);
+    if (index !== -1) {
+      openedModals.splice(index, 1);
+      updateScrollLock();
+    }
+  }
+
+  _addToOpenedModals() {
+    if (!openedModals.includes(this)) {
+      openedModals.push(this);
+      updateScrollLock();
+    }
+  }
+
+  // Only the topmost modal reacts to the Esc key.
+  escClose(e) {
+    if (e.key !== "Escape" || !this.opened || handledEscEvents.has(e)) {
+      return;
+    }
+    if (openedModals[openedModals.length - 1] !== this) {
+      return;
     }
+    handledEscEvents.add(e);
+    this.close();
   }
 
-  animationEnd() {
+  animationEnd(e) {
+    if (e && (e.target !== e.currentTarget || e.propertyName !== 'opacity')) {
+      return;
+    }
+    this._clearCloseTimeout();
     this._toChange = false;
   }
 
-  
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.opened) {
+      this._addToOpenedModals();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._clearCloseTimeout();
+    this._cancelOpenFrame();
+    this._removeFromOpenedModals();
+  }
+
+  // transitionend is not fired when the transition duration is 0 (or the
+  // transition is interrupted), so the background layer is also released by a timer.
+  _scheduleCloseEnd() {
+    this._clearCloseTimeout();
+    const duration = this._getAnimationDuration();
+    if (duration <= 0) {
+      this.animationEnd();
+      return;
+    }
+    this._closeTimeout = setTimeout(() => this.animationEnd(), duration + 50);
+  }
+
+  _clearCloseTimeout() {
+    if (this._closeTimeout) {
+      clearTimeout(this._closeTimeout);
+      this._closeTimeout = null;
+    }
+  }
+
+  _getAnimationDuration() {
+    const section = this.shadowRoot?.querySelector('section');
+    if (!section) {
+      return 0;
+    }
+    const durations = getComputedStyle(section).transitionDuration.split(',');
+    return Math.max(...durations.map((value) => {
+      const time = parseFloat(value) || 0;
+      return value.trim().endsWith('ms') ? time : time * 1000;
+    }));
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.15.0",
+  "version": "3.16.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5ef91e1892e270fade848c64082184fa3fbddb53"
+  "gitHead": "0f1a6553d287b706db6f42c7001a25fdebc3bd3a"
 }