1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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>
|
