Created build-dev script to only build 1 css file for quicker testing enviroment. Added accordion javascript for slide effect. modified the notification scss, and added more demos.

scss/components/_accordion.scss

@@ -10,15 +10,6 @@
     display: block;
     margin-bottom: var(#{$css-var-prefix}spacing);
 
-    &:not([open]) summary ~ * {
-      max-height: 0;
-      overflow: hidden;
-      opacity: 0;
-      transition:
-        max-height var(#{$css-var-prefix}transition),
-        opacity var(#{$css-var-prefix}transition);
-    }
-
     summary {
       line-height: 1rem;
       list-style-type: none;
@@ -108,14 +99,6 @@
         &::after {
           transform: rotate(0);
         }
-
-        ~ * {
-          max-height: 100; /* Initial max height for content */
-          opacity: 1;
-          transition:
-            max-height var(#{$css-var-prefix}transition),
-            opacity var(#{$css-var-prefix}transition);
-        }
       }
     }
   }

scss/components/_notification.scss

@@ -3,8 +3,8 @@
 
 @if map.get($modules, "components/notification") {
   /**
-   * Notification (<dialog>)
-   */
+	 * Notification (<dialog>)
+	 */
 
   dialog[role="alert"] {
     position: fixed;
@@ -30,6 +30,14 @@
     opacity: 0;
     transition: opacity var(#{$css-var-prefix}transition);
     user-select: none;
+
+    //> p, > h1, > h2, > h3, > h4, > h5, > h6 {
+    > * {
+      color: var(#{$css-var-prefix}primary-inverse);
+      font-weight: var(#{$css-var-prefix}font-weight);
+      font-size: var(#{$css-var-prefix}font-size);
+      line-height: var(#{$css-var-prefix}line-height);
+    }
   }
 
   dialog[data-backdrop="false"][role="alert"]::backdrop {