feat(accordion): add modern style

example/index.html

@@ -203,36 +203,36 @@ <h1>Accordion</h1>
         <bl-accordion-item>
           <bl-accordion-header>Accordion item 1</bl-accordion-header>
           <bl-accordion-body id="panel-1">
-            <p>
+            <div>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Assumenda atque consectetur consequatur debitis dolorum, eos
               eveniet in iste magnam, nihil.
               <input />
               <input />
-            </p>
+            </div>
           </bl-accordion-body>
         </bl-accordion-item>
         <bl-accordion-item>
           <bl-accordion-header>Accordion item 2</bl-accordion-header>
           <bl-accordion-body id="panel-2">
-            <p>
+            <div>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Assumenda atque consectetur consequatur debitis dolorum, eos
               eveniet in iste magnam, nihil.
               <input />
-            </p>
+            </div>
           </bl-accordion-body>
         </bl-accordion-item>
         <bl-accordion-item>
           <bl-accordion-header>Accordion item 3</bl-accordion-header>
           <bl-accordion-body id="panel-3">
-            <p>
+            <div>
               <input />
               <input />
               Lorem ipsum dolor sit amet, consectetur adipisicing elit.
               Assumenda atque consectetur consequatur debitis dolorum, eos
               eveniet in iste magnam, nihil.
-            </p>
+            </div>
           </bl-accordion-body>
         </bl-accordion-item>
       </bl-accordion>

example/src/example.css

@@ -41,3 +41,8 @@ body {
 .member-job {
   color: #555;
 }
+
+p {
+  padding: 0;
+  margin: 1rem 0 0;
+}

src/accordion/modern.css

@@ -0,0 +1,39 @@
+.bl-accordion {
+  .bl-accordion-item {
+    border-top: 1px solid var(--bl-clr-gray-200);
+    display: grid;
+  }
+
+  .bl-accordion-header > button {
+    appearance: none;
+    background: none;
+    border: 0;
+    font-size: inherit;
+    font-family: inherit;
+    padding: 0.625rem;
+    cursor: pointer;
+    display: block;
+    transition: all 150ms ease-in-out;
+    width: 100%;
+    text-align: left;
+
+    &:hover {
+      background-color: var(--bl-clr-gray-100);
+      z-index: 2;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--bl-clr-primary);
+      z-index: 3;
+    }
+  }
+
+  .bl-accordion-item:last-of-type {
+    border-bottom: 1px solid var(--bl-clr-gray-200);
+  }
+
+  .bl-accordion-body {
+    --bl-collapse-padding: 0.625rem;
+  }
+}

src/collapse/Collapse.ts

@@ -31,7 +31,10 @@ export class Collapse extends HTMLElement {
     this.setAttribute("aria-hidden", "true");
     const wrapper = document.createElement("div");
     wrapper.classList.add("bl-collapse-wrapper");
-    wrapper.append(...this.childNodes);
+    const paddingWrapper = document.createElement("div");
+    paddingWrapper.classList.add("bl-collapse-padding");
+    paddingWrapper.append(...this.childNodes);
+    wrapper.append(paddingWrapper);
     this.append(wrapper);
     this.hide();
   }

src/collapse/style.css

@@ -1,4 +1,5 @@
 .bl-collapse {
+  --bl-collapse-padding: 0;
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.3s ease-in-out;
@@ -7,6 +8,10 @@
     overflow: hidden;
   }
 
+  .bl-collapse-padding {
+    padding: var(--bl-collapse-padding);
+  }
+
   &.show {
     grid-template-rows: 1fr;
   }

src/modern.css

@@ -3,6 +3,7 @@
 @import "./modal/modern.css";
 @import "./toast/modern.css";
 @import "./close/modern.css";
+@import "./accordion/modern.css";
 
 :root {
   --bl-clr-primary: #0284c7;