allow null

docs/getting-started/customizing.md

@@ -111,7 +111,7 @@ Not all components expose CSS custom properties. For those that do, they can be
 
 Some components use animation, such as when a dialog is shown or hidden. Animations are performed using the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) rather than CSS. However, you can still customize them through Shoelace's animation registry. If a component has customizable animations, they'll be listed in the "Animation" section of its documentation.
 
-To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes` and `options`.
+To customize a default animation, use the `setDefaultAnimation()` method. The function accepts an animation name (found in the component's docs) and an object with `keyframes` and `options` or `null` to disable the animation.
 
 This example will make all dialogs use a custom show animation.
 

docs/resources/changelog.md

@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 ## Next
 
+- Allow `null` to be passed to disable animations in `setDefaultAnimation()` and `setAnimation()`
 - Fixed a bug in `sl-dropdown` where a `keydown` listener wasn't cleaned up properly
 - Fixed a bug in `sl-select` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456)
 - Fixed a bug in `sl-select` where no selection with `multiple` resulted in an incorrect value [#457](https://github.com/shoelace-style/shoelace/issues/457)

src/utilities/animation-registry.ts

@@ -10,22 +10,26 @@ interface ElementAnimationMap {
 const defaultAnimationRegistry = new Map<String, ElementAnimation>();
 const customAnimationRegistry = new WeakMap<Element, ElementAnimationMap>();
 
+function ensureAnimation(animation: ElementAnimation | null) {
+  return animation ?? { keyframes: [], options: { duration: 0 } };
+}
+
 //
 // Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
 // for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
 //
-export function setDefaultAnimation(animationName: string, animation: ElementAnimation) {
-  defaultAnimationRegistry.set(animationName, animation);
+export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null) {
+  defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
 }
 
 //
 // Sets a custom animation for the specified element.
 //
-export function setAnimation(el: Element, animationName: string, animation: ElementAnimation) {
+export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null) {
   customAnimationRegistry.set(
     el,
     Object.assign({}, customAnimationRegistry.get(el), {
-      [animationName]: animation
+      [animationName]: ensureAnimation(animation)
     })
   );
 }