feat(modal): dispatch transitionend event

COMPONENT_INDEX.md

@@ -660,12 +660,12 @@ None.
 ### Events
 
 | Event name    | Type       | Detail                          |
-| :------------ | :--------- | :----- |
+| :------------ | :--------- | :------------------------------ |
+| transitionend | dispatched | <code>{ open: boolean; }</code> |
 | click         | forwarded  | --                              |
 | mouseover     | forwarded  | --                              |
 | mouseenter    | forwarded  | --                              |
 | mouseleave    | forwarded  | --                              |
-| transitionend | forwarded  | --     |
 | submit        | dispatched | --                              |
 | close         | dispatched | --                              |
 | open          | dispatched | --                              |
@@ -2042,7 +2042,8 @@ None.
 ### Events
 
 | Event name              | Type       | Detail                          |
-| :---------------------- | :--------- | :----- |
+| :---------------------- | :--------- | :------------------------------ |
+| transitionend           | dispatched | <code>{ open: boolean; }</code> |
 | keydown                 | forwarded  | --                              |
 | click                   | forwarded  | --                              |
 | mouseover               | forwarded  | --                              |

docs/src/COMPONENT_API.json

@@ -1713,11 +1713,15 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "transitionend",
+          "detail": "{ open: boolean; }"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "forwarded", "name": "transitionend", "element": "div" },
         { "type": "dispatched", "name": "submit" },
         { "type": "dispatched", "name": "close" },
         { "type": "dispatched", "name": "open" }
@@ -5618,6 +5622,11 @@
         }
       ],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "transitionend",
+          "detail": "{ open: boolean; }"
+        },
         { "type": "forwarded", "name": "keydown", "element": "div" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },

src/ComposedModal/ComposedModal.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the composed modal
    * @type {"xs" | "sm" | "lg"}
@@ -102,8 +106,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
-  on:transitionend
-  on:transitionend="{({ currentTarget }) => {
+  on:transitionend="{({ propertyName, currentTarget }) => {
+    if (propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+
     if (didOpen) {
       focus(currentTarget);
       didOpen = false;

src/Modal/Modal.svelte

@@ -1,4 +1,8 @@
 <script>
+  /**
+   * @event {{ open: boolean; }} transitionend
+   */
+
   /**
    * Set the size of the modal
    * @type {"xs" | "sm" | "lg"}
@@ -151,6 +155,11 @@
   on:mouseover
   on:mouseenter
   on:mouseleave
+  on:transitionend="{(e) => {
+    if (e.propertyName === 'transform') {
+      dispatch('transitionend', { open });
+    }
+  }}"
 >
   <div
     bind:this="{innerModal}"

types/ComposedModal/ComposedModal.d.ts

@@ -49,11 +49,11 @@ export default class ComposedModal {
     default: {};
   };
 
+  $on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void;
   $on(eventname: "submit", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: "open", cb: (event: CustomEvent<any>) => void): () => void;

types/Modal/Modal.d.ts

@@ -120,6 +120,7 @@ export default class Modal {
     label: {};
   };
 
+  $on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
   $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;