tweak durations

src/components/details/details.styles.ts

@@ -9,8 +9,8 @@ export default css`
     --border-width: var(--wa-panel-border-width);
     --icon-color: var(--wa-color-text-quiet);
     --padding: var(--wa-space-m);
-    --show-duration: 250ms;
-    --hide-duration: 250ms;
+    --show-duration: 200ms;
+    --hide-duration: 200ms;
 
     display: block;
   }

src/components/dropdown/dropdown.styles.ts

@@ -6,8 +6,6 @@ export default css`
   }
 
   .dropdown::part(popup) {
-    --show-duration: 100ms;
-    --hide-duration: 100ms;
     z-index: var(--wa-z-index-dropdown);
   }
 

src/components/popup/popup.styles.ts

@@ -4,8 +4,8 @@ export default css`
   :host {
     --arrow-color: black;
     --arrow-size: var(--wa-tooltip-arrow-size);
-    --show-duration: 150ms;
-    --hide-duration: 150ms;
+    --show-duration: 100ms;
+    --hide-duration: 100ms;
 
     /*
      * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant

src/components/popup/popup.ts

@@ -50,8 +50,8 @@ function isVirtualElement(e: unknown): e is VirtualElement {
  * @cssproperty [--auto-size-available-height] - A read-only custom property that determines the amount of height the
  *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
  *  available when using `auto-size`.
- * @cssproperty [--show-duration=150ms] - The show duration to use when applying built-in animation classes.
- * @cssproperty [--hide-duration=150ms] - The hide duration to use when applying built-in animation classes.
+ * @cssproperty [--show-duration=100ms] - The show duration to use when applying built-in animation classes.
+ * @cssproperty [--hide-duration=100ms] - The hide duration to use when applying built-in animation classes.
  */
 @customElement('wa-popup')
 export default class WaPopup extends WebAwesomeElement {