1 files changed, 35 insertions, 0 deletions
diff --git a/apps/web-shared/src/components/details.svelte b/apps/web-shared/src/components/details.svelte
new file mode 100644
index 0000000..6ccacb0
--- /dev/null
+++ b/apps/web-shared/src/components/details.svelte
@@ -0,0 +1,35 @@
+<script>
+	import {random_string} from "$shared/lib/helpers";
+
+	let open = false;
+	export let summary;
+	const id = "details-" + random_string(4);
+
+	function on_toggle(event) {
+		open = event.target.open;
+	}
+</script>
+
+<details class="details margin-bottom-sm"
+         on:toggle={on_toggle}
+         id={id}>
+    <summary class="details__summary"
+             aria-controls={id}
+             aria-expanded={open}>
+        <span class="flex items-center">
+            <svg
+                    class="icon icon--xxs margin-right-xxxs"
+                    aria-hidden="true"
+                    viewBox="0 0 12 12">
+                <path
+                        d="M2.783.088A.5.5,0,0,0,2,.5v11a.5.5,0,0,0,.268.442A.49.49,0,0,0,2.5,12a.5.5,0,0,0,.283-.088l8-5.5a.5.5,0,0,0,0-.824Z"/>
+            </svg>
+            <span>{summary}</span>
+        </span>
+    </summary>
+    <div
+            class="details__content text-component margin-top-xs"
+            aria-hidden={!open}>
+        <slot/>
+    </div>
+</details>