Optimize `transition-default` Tailwind util to not target all properties

[jcfranco]

Description

Our current transition-default Tailwind utility applies transitions to all properties, leading to potential performance impact. We should revisit the util to target specific properties.

As a first step, we could look into targeting a reduced set of essential/common transition properties.

Proposed Advantages

Improved performance by having browser transition relevant, or common, CSS properties.

Which Component

All components using transition-default:

• alert
• checkbox
• chip
• date-picker-day
• date-picker-month-header
• inline-editable
• input-message
• input-number
• input-text
• input
• link
• modal
• navigation-logo
• navigation-user
• notice
• pagination
• radio-button
• rating
• shell-panel
• split-button
• tab-title
• tile-select
• tree-item
• x-button (functional component)

Relevant Info

List of all animatable CSS properties

See https://vallek.github.io/animatable-css/#anim 1. **Colors** - `color` - `background-color` - `border-color` - `outline-color` - `fill` - `stroke` 2. **Dimensions** - `width` - `height` - `max-width` - `max-height` - `min-width` - `min-height` 3. **Margins, Padding, and Borders** - `margin` - `margin-top` - `margin-right` - `margin-bottom` - `margin-left` - `padding` - `padding-top` - `padding-right` - `padding-bottom` - `padding-left` - `border-width` - `border-top-width` - `border-right-width` - `border-bottom-width` - `border-left-width` - `border-spacing` 4. **Positioning** - `top` - `right` - `bottom` - `left` - `z-index` 5. **Backgrounds** - `background-size` - `background-position` 6. **Fonts and Text** - `font-size` - `font-weight` - `line-height` - `letter-spacing` - `text-indent` - `text-shadow` - `word-spacing` 7. **Transforms** - `transform` (includes transformations like `translate`, `scale`, `rotate`, `skew`) 8. **Opacity, Visibility, and Display** - `opacity` - `visibility` 9. **Filters** - `filter` (includes functions like `blur`, `brightness`, `contrast`, `drop-shadow`, `grayscale`, `hue-rotate`, `invert`, `saturate`, `sepia`) 10. **Box and Text Shadows** - `box-shadow` - `text-shadow` 11. **Outline** - `outline-width` - `outline-offset` 12. **Clip Paths** - `clip-path` 13. **Object Position** - `object-position` 14. **Flexbox and Grid** - `flex-grow` - `flex-shrink` - `flex-basis` - `grid-template-columns` - `grid-template-rows` - `grid-gap` - `grid-row-gap` - `grid-column-gap` 15. **Others** - `column-count` - `column-gap` - `column-width` - `perspective` - `perspective-origin` - `scroll-margin` - `scroll-padding`

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified