feat: add tabs

assets/css/compiled/main.css

@@ -1372,6 +1372,9 @@
   .justify-center {
     justify-content: center;
   }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -1496,6 +1499,10 @@
     border-top-left-radius: var(--radius-lg);
     border-top-right-radius: var(--radius-lg);
   }
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
   .rounded-b-lg {
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
@@ -2412,6 +2419,13 @@
       }
     }
   }
+  .hover\:bg-neutral-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: rgba(var(--color-neutral-200), 1);
+      }
+    }
+  }
   .hover\:bg-primary-100 {
     &:hover {
       @media (hover: hover) {
@@ -3226,6 +3240,15 @@
       }
     }
   }
+  .dark\:hover\:bg-neutral-700 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: rgba(var(--color-neutral-700), 1);
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-primary-400 {
     &:is(.dark *) {
       &:hover {
@@ -3448,6 +3471,17 @@
     text-decoration-line: underline;
   }
 }
+@layer utilities {
+  .tab__button.tab--active {
+    border-bottom: 2px solid rgb(var(--color-primary-500));
+  }
+  .tab__panel {
+    display: none;
+  }
+  .tab__panel.tab--active {
+    display: block;
+  }
+}
 #zen-mode-button {
   cursor: pointer;
 }

assets/css/components/tabs.css

@@ -0,0 +1,9 @@
+.tab__button.tab--active {
+  border-bottom: 2px solid rgb(var(--color-primary-500));
+}
+.tab__panel {
+  display: none;
+}
+.tab__panel.tab--active {
+  display: block;
+}

assets/css/main.css

@@ -4,6 +4,7 @@
 
 @import "tailwindcss";
 @import "./components/chroma.css" layer(utilities);
+@import "./components/tabs.css" layer(utilities);
 @import "./components/zen-mode.css";
 @import "./components/a11y.css";
 

assets/js/shortcodes/tabs.js

@@ -0,0 +1,41 @@
+function initTabs() {
+  tabClickHandler = (event) => {
+    const button = event.target.closest(".tab__button");
+    if (!button) return;
+
+    const container = button.closest(".tab__container");
+    const tabIndex = parseInt(button.dataset.tabIndex);
+    activateTab(container, tabIndex);
+  };
+
+  document.addEventListener("click", tabClickHandler);
+}
+
+function activateTab(container, activeIndex) {
+  const buttons = container.querySelectorAll(".tab__button");
+  const panels = container.querySelectorAll(".tab__panel");
+
+  buttons.forEach((btn, index) => {
+    if (index === activeIndex) {
+      btn.classList.add("tab--active");
+      btn.setAttribute("aria-selected", "true");
+    } else {
+      btn.classList.remove("tab--active");
+      btn.setAttribute("aria-selected", "false");
+    }
+  });
+
+  panels.forEach((panel, index) => {
+    if (index === activeIndex) {
+      panel.classList.add("tab--active");
+    } else {
+      panel.classList.remove("tab--active");
+    }
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initTabs);
+} else {
+  initTabs();
+}