Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142<script lang="ts"> import type { Component, Snippet } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import Plus from "$icon/plus"; import { formStep, type FormStepVariants } from "$lib/components/ui/FormStep.svelte"; import StepMarker from "$lib/components/ui/StepMarker.svelte";
interface Props { title: string; icon?: Component<SvelteHTMLElements["svg"]>; connected?: FormStepVariants["connected"]; last?: FormStepVariants["last"]; class?: string; children: Snippet; }
let { title, icon = Plus, connected, last, class: className, children }: Props = $props();
const slot = $derived(formStep({ connected, last, spacing: "none", markerAlign: "middle" })); const Icon = $derived(icon);</script>
<details class={["group/step", className]}> <summary class={slot.root({ class: "cursor-pointer list-none items-center group-open/step:[border-image:none]" })} > <StepMarker class={slot.marker()}> <Icon class="size-4" aria-hidden="true" /> </StepMarker> <div class={slot.body()}> <h2 class={slot.title()}>{title}</h2> </div> </summary> <div class={slot.root()}> <div class={slot.body({ class: "pt-md" })}> {@render children()} </div> </div></details>