Merge branch 'feature/visually-hidden' of https://github.com/bjarnef/…

…Umbraco.UI into feature/visually-hidden

package.json

@@ -86,7 +86,7 @@
     "element-internals-polyfill": "1.3.5",
     "esbuild": "0.17.18",
     "eslint": "8.45.0",
-    "eslint-config-prettier": "8.9.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-import-resolver-typescript": "3.5.5",
     "eslint-plugin-html": "7.1.0",
     "eslint-plugin-import": "2.27.5",
@@ -100,7 +100,7 @@
     "lint-staged": "13.2.3",
     "npm-check-updates": "16.10.16",
     "plop": "3.1.2",
-    "postcss": "8.4.26",
+    "postcss": "8.4.31",
     "postcss-advanced-variables": "3.0.1",
     "postcss-cli": "10.1.0",
     "postcss-color-function": "4.1.0",

packages/uui-modal/lib/uui-modal.element.ts

@@ -18,11 +18,11 @@ export class UUIModalElement extends LitElement {
 
   private _transitionDuration = 250;
 
-  @property()
+  @property({ type: Number, attribute: 'transition-duration' })
   public get transitionDuration() {
     return this._transitionDuration;
   }
-  public set transitionDuration(value) {
+  public set transitionDuration(value: number) {
     this._transitionDuration = value;
     this.style.setProperty(
       '--uui-modal-transition-duration',
@@ -45,7 +45,6 @@ export class UUIModalElement extends LitElement {
     event?.stopImmediatePropagation();
 
     const openEvent = new CustomEvent('open', {
-      bubbles: true,
       cancelable: true,
     });
 
@@ -60,7 +59,6 @@ export class UUIModalElement extends LitElement {
     event?.stopImmediatePropagation();
 
     const closeEvent = new CustomEvent('close', {
-      bubbles: true,
       cancelable: true,
     });
     this.dispatchEvent(closeEvent);
@@ -80,6 +78,9 @@ export class UUIModalElement extends LitElement {
     this.isClosing = true;
     this.isOpen = false;
     this._dialogElement?.close();
+
+    this.dispatchEvent(new CustomEvent('close-end'));
+
     this.remove();
   }
 

packages/uui-modal/lib/uui-modal.mdx

@@ -91,6 +91,10 @@ Dispatched on first render. This will set open to true and show the modal. Can b
 Dispatched when the modal is closed. Can be cancelled if you want to prevent the modal from closing. But then you'll have to manually call `_closeModal()` when you want to close the modal.
 This is used in the `uui-modal-sidebar` to wait for the animation to finish before removing the modal from the DOM.
 
+#### `close-end`
+
+This event is triggered before removing the component from the DOM, either after animations or delays or when `_closeModal()` is manually invoked.
+
 ### CSS Variables
 
 ---