fix: only overflow hidden whilst closed or transitioning

.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<link rel="shortcut icon" href="/icon.svg">
+<link rel="icon" type="image/png" href="/icon.svg" sizes="192x192">

.storybook/manager.ts

@@ -0,0 +1,13 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+import logo from './logo.svg';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    brandTitle: 'Diamond UI',
+    brandUrl: 'https://diamond.etch.co',
+    brandImage: logo,
+  })
+});

components/composition/Collapse/Collapse.stories.ts

@@ -49,14 +49,18 @@ export const Collapse: StoryObj = {
       </p>
     </diamond-collapse>
     <script>
-      document.addEventListener('DOMContentLoaded', () => {
-        const button = document.getElementById('toggle');
-        button.addEventListener('click', () => {
-          const collapse = document.querySelector('diamond-collapse');
-          collapse.open = !collapse.open;
-          button.setAttribute('aria-expanded', collapse.open.toString());
-        });
-      });
+      document.addEventListener(
+        'DOMContentLoaded',
+        () => {
+          const button = document.getElementById('toggle');
+          button.addEventListener('click', () => {
+            const collapse = document.querySelector('diamond-collapse');
+            collapse.open = !collapse.open;
+            button.setAttribute('aria-expanded', collapse.open.toString());
+          });
+        },
+        { once: true },
+      );
     </script>
   `,
 };

components/composition/Collapse/Collapse.ts

@@ -13,24 +13,39 @@ export class Collapse extends LitElement {
 
   static readonly styles = [
     css`
+      @keyframes diamond-collapse-overflow {
+        0%,
+        99% {
+          overflow: hidden;
+        }
+        100% {
+          overflow: visible;
+        }
+      }
       :host {
         content-visibility: hidden;
         display: grid;
         grid-template-rows: 0fr;
         overflow: hidden;
         transition:
           grid-template-rows var(--diamond-transition),
-          content-visibility var(--diamond-transition);
+          content-visibility var(--diamond-transition),
+          overflow var(--diamond-transition);
         transition-behavior: allow-discrete;
       }
 
+      .diamond-collapse__content {
+        overflow: hidden;
+      }
+
       :host([open]:not([open='false'])) {
+        animation: diamond-collapse-overflow var(--diamond-transition) forwards;
         content-visibility: visible;
         grid-template-rows: 1fr;
       }
 
-      .diamond-collapse__content {
-        overflow: hidden;
+      :host([open]:not([open='false'])) .diamond-collapse__content {
+        animation: diamond-collapse-overflow var(--diamond-transition) forwards;
       }
     `,
   ];