fix: fix open/close event emitting in Safari (#7551)

**Related Issue:** #7180

## Summary

This updates how `onToggleOpenCloseComponent` determines the duration
for the `openTransitionProp` to be more robust to work consistently
across browsers.

The previous approach relied on the computed `transition` property
having all associated transition values laid out per prop, which didn't
work in Safari since it won't include all values if shared.

This change should be covered by existing tests.

cc @Elijbet

packages/calcite-components/src/utils/openCloseComponent.ts

@@ -98,11 +98,18 @@ function emitImmediately(component: OpenCloseComponent, nonOpenCloseComponent =
 export function onToggleOpenCloseComponent(component: OpenCloseComponent, nonOpenCloseComponent = false): void {
   readTask((): void => {
     if (component.transitionEl) {
-      const allTransitionPropsArray = getComputedStyle(component.transitionEl).transition.split(" ");
-      const openTransitionPropIndex = allTransitionPropsArray.findIndex(
-        (item) => item === component.openTransitionProp
+      const { transitionDuration: allDurations, transitionProperty: allProps } = getComputedStyle(
+        component.transitionEl
       );
-      const transitionDuration = allTransitionPropsArray[openTransitionPropIndex + 1];
+      const allTransitionDurationsArray = allDurations.split(",");
+      const allTransitionPropsArray = allProps.split(",");
+      const openTransitionPropIndex = allTransitionPropsArray.indexOf(component.openTransitionProp);
+
+      const transitionDuration =
+        allTransitionDurationsArray[openTransitionPropIndex] ??
+        /* Safari will have a single transition value if multiple props share it,
+        so we fall back to it if there's no matching prop duration */
+        allTransitionDurationsArray[0];
 
       if (transitionDuration === "0s") {
         emitImmediately(component, nonOpenCloseComponent);