add --show-duration and --hide-duration to select (#1344)

packages/webawesome/docs/docs/components/select.md

@@ -366,7 +366,7 @@ Here's a comprehensive example showing different lazy loading scenarios:
 
     const option = document.createElement('wa-option');
     option.setAttribute('value', 'foo');
-    option.selected = true
+    option.selected = true;
     option.innerText = 'Foo';
 
     // For the multiple select with existing selected options, make the new option selected
@@ -403,4 +403,4 @@ Here's a comprehensive example showing different lazy loading scenarios:
 
 :::info
 The key principle is that the select component prioritizes user interactions and explicit selections over programmatic changes, ensuring a predictable user experience even with dynamically loaded content.
-:::
+:::

packages/webawesome/docs/docs/resources/changelog.md

@@ -19,6 +19,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - 🚨 BREAKING: Renamed the `icon-position` attribute to `icon-placement` in `<wa-details>` [discuss:1340]
 - 🚨 BREAKING: Removed the `size` attribute from `<wa-button-group>` as it only set the initial size and gets out of sync when buttons are updated (apply a `size` to each button instead)
 - Added the Hindi translation [pr:1307]
+- Added `--show-duration` and `--hide-duration` to `<wa-select>` [issue:1281]
 - Fixed incorrectly named exported tooltip parts in `<wa-slider>` [pr:1277]
 - Fixed a bug in `<wa-dropdown>` that caused menus to overflow the viewport instead of resizing [issue:1267]
 - Fixed a bug in `<wa-dropdown>` that prevented keyboard selection of items when nested in shadow roots [issue:1270]

packages/webawesome/src/components/select/select.css

@@ -1,5 +1,7 @@
 :host {
   --tag-max-size: 10ch;
+  --show-duration: 100ms;
+  --hide-duration: 100ms;
 }
 
 /* Add ellipses to multi select options */
@@ -30,6 +32,10 @@
   position: relative;
   vertical-align: middle;
 
+  /* Pass through from select to the popup */
+  --show-duration: inherit;
+  --hide-duration: inherit;
+
   &::part(popup) {
     z-index: 900;
   }

packages/webawesome/src/components/select/select.ts

@@ -74,6 +74,8 @@ import styles from './select.css';
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
  *
+ * @cssproperty [--show-duration=100ms] - The duration of the show animation.
+ * @cssproperty [--hide-duration=100ms] - The duration of the hide animation.
  * @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.
  *
  * @cssstate blank - The select is empty.