feat: add separate events for opening, closing, opened, and closed in accordion

Author: hperrin

packages/accordion/src/Accordion.svelte

@@ -10,7 +10,7 @@
   on:SMUIAccordionPanel:mount={handlePanelMount}
   on:SMUIAccordionPanel:unmount={handlePanelUnmount}
   on:SMUIAccordionPanel:activate={handlePanelActivate}
-  on:SMUIAccordionPanel:opened={handlePanelOpened}
+  on:SMUIAccordionPanel:opening={handlePanelOpening}
   {...$$restProps}
 >
   <slot />
@@ -82,7 +82,7 @@
     accessor.setOpen(!accessor.open);
   }
 
-  function handlePanelOpened(
+  function handlePanelOpening(
     event: CustomEvent<{ accessor: SMUIAccordionPanelAccessor }>
   ) {
     const { accessor } = event.detail;

packages/accordion/src/Panel.svelte

@@ -84,6 +84,7 @@
               if (content) {
                 content.style.height = '';
               }
+              dispatch(getElement(), 'SMUIAccordionPanel:opened', { accessor });
             },
             { once: true }
           );
@@ -95,6 +96,7 @@
             if (content) {
               content.style.height = '';
             }
+            dispatch(getElement(), 'SMUIAccordionPanel:closed', { accessor });
           });
         }
 
@@ -105,7 +107,7 @@
 
     dispatch(
       getElement(),
-      open ? 'SMUIAccordionPanel:opened' : 'SMUIAccordionPanel:closed',
+      open ? 'SMUIAccordionPanel:opening' : 'SMUIAccordionPanel:closing',
       { accessor }
     );
   }

packages/accordion/src/ambient.d.ts

@@ -12,7 +12,7 @@ declare namespace svelte.JSX {
     ['onSMUIAccordionPanel:activate']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
-    ['onSMUIAccordionPanel:opened']?: (
+    ['onSMUIAccordionPanel:opening']?: (
       event: CustomEvent<any> & { target: T }
     ) => any;
   }