rewrite DocsCollapsible

now with disabled js support and less broken animations

src/components/Accordion.astro

@@ -0,0 +1,55 @@
+---
+import "@styles/components/accordion.css"
+---
+<details class=`accordion ${Astro.props.class ?? ""}` {...Astro.props}>
+  <summary>
+    <slot name="header"/>
+  </summary>
+  <div class="accordion-container">
+    <div>
+      <slot/>
+    </div>
+  </div>
+</details>
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    document.querySelectorAll(".accordion").forEach(element => {
+      const accordion = element as HTMLDetailsElement;
+      const summary = accordion.querySelector("summary")!;
+      const body = accordion.querySelector(".accordion-container") as HTMLDivElement;
+
+      summary.addEventListener("click", event => {
+        event.preventDefault();
+        body.classList.toggle("animate", true);
+
+        if (!accordion.open || accordion.classList.contains("closing")) {
+          accordion.classList.toggle("closing", false);
+          body.style.setProperty("--height", "0px");
+
+          requestAnimationFrame(() => {
+            accordion.open = true;
+            body.style.setProperty("--height", body.scrollHeight + "px");
+          });
+        } else {
+          body.style.setProperty("--height", body.scrollHeight + "px");
+
+          requestAnimationFrame(() => {
+            accordion.classList.toggle("closing", true);
+            body.style.setProperty("--height", "0px");
+          });
+        }
+      });
+
+      body.addEventListener("transitionend", event => {
+        if ((event as TransitionEvent).propertyName == "max-height") {
+          body.classList.toggle("animate", false);
+
+          if (accordion.classList.contains("closing")) {
+            accordion.classList.toggle("closing", false);
+            accordion.open = false;
+          }
+        }
+      });
+    });
+  });
+</script>

src/components/Collapsible.astro

@@ -0,0 +1,16 @@
+---
+import Accordion from "./Accordion.astro"
+import collapsibleMarker from "@icons/collapsible-marker.svg?raw"
+
+interface Props {
+  title: string
+}
+const { title } = Astro.props;
+---
+<Accordion class="docs-collapsible">
+  <div slot="header">
+    <Fragment set:html={collapsibleMarker}/>
+    {title}
+  </div>
+  <slot>
+</Accordion>

src/components/Collapsible.tsx

@@ -1,18 +0,0 @@
-import { Collapsible } from "@ark-ui/solid";
-import type { Component, JSX } from "solid-js";
-import { CaretCircleRight } from "@icons";
-
-export const DocsCollapsible: Component<{
-  title: string;
-  children: JSX.Element;
-}> = props => {
-  return (
-    <Collapsible.Root>
-      <Collapsible.Trigger>
-        <CaretCircleRight />
-        {props.title}
-      </Collapsible.Trigger>
-      <Collapsible.Content>{props.children}</Collapsible.Content>
-    </Collapsible.Root>
-  );
-};