Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637<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"]; class?: string; children: Snippet; }
let { title, icon = Plus, connected, class: className, children }: Props = $props();
const slot = $derived(formStep({ connected, spacing: "none", markerAlign: "middle" })); const Icon = $derived(icon);</script>
<details class={className}> <summary class={slot.root({ class: "cursor-pointer list-none items-center" })}> <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-4" })}> {@render children()} </div> </div></details>