svelte-docsmith 0.2.0 → 0.4.0

package/dist/ui/markdown/h3.svelte

@@ -5,9 +5,13 @@
 	const { children, ...attrs }: HeadingProps = $props();
 </script>
 
-<h3 {...attrs} class="flex gap-2 items-center group">
+<h3 {...attrs} class="group flex items-center gap-2">
 	{@render children()}
-	<a href="#{attrs.id}" class="opacity-0 group-hover:opacity-100 transition-opacity">
-		<Link class="size-5 text-primary" />
+	<a
+		href="#{attrs.id}"
+		aria-label="Link to this section"
+		class="opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+	>
+		<Link class="text-primary size-5" />
 	</a>
 </h3>

package/dist/ui/markdown/pre.svelte

@@ -20,24 +20,6 @@
 		<pre class="not-prose shiki max-h-[32rem] flex shrink" use:clipboard.readText>
 			{@render children()}
 		</pre>
-
-		<!-- Scroll indicators with increased fade intensity -->
-		<div
-			class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-t from-muted via-muted/70 to-transparent pointer-events-none"
-			aria-hidden="true"
-		></div>
-		<div
-			class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-b from-muted via-muted/70 to-transparent pointer-events-none"
-			aria-hidden="true"
-		></div>
-		<div
-			class="absolute top-0 bottom-0 right-0 w-4 bg-gradient-to-l from-muted via-muted/70 to-transparent pointer-events-none"
-			aria-hidden="true"
-		></div>
-		<div
-			class="absolute top-0 bottom-0 left-0 w-4 bg-gradient-to-r from-muted via-muted/70 to-transparent pointer-events-none"
-			aria-hidden="true"
-		></div>
 	</ScrollArea>
 </div>
 
@@ -46,7 +28,7 @@
 	 * Plain CSS (not @apply): these style Shiki's output and ship inside the
 	 * published package, where the consumer's Tailwind theme context isn't
 	 * available to resolve @apply (Tailwind v4 compiles scoped styles in
-	 * isolation). See PLAN.md §2.5.
+	 * isolation).
 	 */
 	:global(pre code) {
 		display: block;
@@ -62,27 +44,95 @@
 		padding-inline: 1rem;
 	}
 
+	/* Two tiers of annotation. EMPHASIS (highlight, word) tints with the theme's
+	   --primary, so it reads as the brand pointing at a line and recolors with
+	   the active theme. SEMANTIC (diff, error, warning) uses fixed OKLCH hues so
+	   green/red/amber stay legible on any theme. All are translucent washes over
+	   the code background via color-mix. */
+
+	/* --- Line highlight (// [!code highlight] and {1,3} meta) --- */
 	:global(pre span.line.highlighted) {
-		background-color: rgb(254 240 138 / 0.5);
+		background: color-mix(in oklch, var(--primary) 12%, transparent);
 	}
-
 	:global(.dark pre span.line.highlighted) {
-		background-color: rgb(250 204 21 / 0.2);
+		background: color-mix(in oklch, var(--primary) 20%, transparent);
 	}
 
+	/* --- Diff (// [!code ++] / [!code --]) with +/- gutter glyphs --- */
+	:global(pre span.line.diff) {
+		position: relative;
+	}
 	:global(pre span.line.diff.add) {
-		background-color: rgb(134 239 172 / 0.5);
+		background: color-mix(in oklch, oklch(0.7 0.16 150) 15%, transparent);
 	}
-
 	:global(pre span.line.diff.remove) {
-		background-color: rgb(252 165 165 / 0.5);
+		background: color-mix(in oklch, oklch(0.62 0.2 25) 14%, transparent);
 	}
-
 	:global(.dark pre span.line.diff.add) {
-		background-color: rgb(22 163 74 / 0.2);
+		background: color-mix(in oklch, oklch(0.7 0.16 150) 22%, transparent);
 	}
-
 	:global(.dark pre span.line.diff.remove) {
-		background-color: rgb(220 38 38 / 0.2);
+		background: color-mix(in oklch, oklch(0.62 0.2 25) 22%, transparent);
+	}
+	:global(pre span.line.diff::before) {
+		position: absolute;
+		left: 0.45rem;
+		font-weight: 600;
+	}
+	:global(pre span.line.diff.add::before) {
+		content: '+';
+		color: oklch(0.6 0.15 150);
+	}
+	:global(pre span.line.diff.remove::before) {
+		content: '−';
+		color: oklch(0.58 0.19 25);
+	}
+	:global(.dark pre span.line.diff.add::before) {
+		color: oklch(0.78 0.17 150);
+	}
+	:global(.dark pre span.line.diff.remove::before) {
+		color: oklch(0.72 0.18 25);
+	}
+
+	/* --- Error / warning severity (// [!code error] / [!code warning]).
+	   No gutter glyph, so they stay distinct from the +/- diff lines. --- */
+	:global(pre span.line.highlighted.error) {
+		background: color-mix(in oklch, oklch(0.62 0.2 25) 18%, transparent);
+	}
+	:global(pre span.line.highlighted.warning) {
+		background: color-mix(in oklch, oklch(0.8 0.13 85) 22%, transparent);
+	}
+	:global(.dark pre span.line.highlighted.error) {
+		background: color-mix(in oklch, oklch(0.62 0.2 25) 26%, transparent);
+	}
+	:global(.dark pre span.line.highlighted.warning) {
+		background: color-mix(in oklch, oklch(0.8 0.13 85) 20%, transparent);
+	}
+
+	/* --- Focus (// [!code focus]): dim the other lines and restore on hover.
+	   A clean opacity fade reads calmer than a muddy blur. `:has` recreates
+	   Shiki's stripped container flag from the line classes alone. --- */
+	:global(pre code:has(span.line.focused) span.line:not(.focused)) {
+		opacity: 0.42;
+		transition: opacity 0.25s ease;
+	}
+	:global(pre:hover code:has(span.line.focused) span.line:not(.focused)) {
+		opacity: 1;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:global(pre code:has(span.line.focused) span.line:not(.focused)) {
+			transition: none;
+		}
+	}
+
+	/* --- Word highlight (// [!code word:name]): a primary-tinted inline pill --- */
+	:global(pre .highlighted-word) {
+		border-radius: 0.3rem;
+		padding: 0.1rem 0.3rem;
+		background: color-mix(in oklch, var(--primary) 16%, transparent);
+		box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 35%, transparent);
+	}
+	:global(.dark pre .highlighted-word) {
+		background: color-mix(in oklch, var(--primary) 24%, transparent);
 	}
 </style>

package/dist/ui/prop.svelte

@@ -14,7 +14,7 @@
 		type?: string;
 		/** Mark the property as required. */
 		required?: boolean;
-		/** Default value, shown in its own column. */
+		/** Default value, shown alongside the type. */
 		default?: string;
 		/** Description. */
 		children?: Snippet;
@@ -22,7 +22,8 @@
 
 	// Split a union into per-value chips so long ones wrap as a tidy pill group
 	// instead of ugly broken text. Skip splitting when the type is a generic
-	// (`Array<A | B>`) where a top-level `|` split would be wrong.
+	// (`Array<A | B>`) or a signature (`() => …`) where a top-level `|` split
+	// would be wrong — those render as one chip that wraps on its own.
 	const typeParts = $derived.by(() => {
 		if (!type) return [];
 		if (/[<(]/.test(type)) return [type];
@@ -31,46 +32,64 @@
 			.map((s) => s.trim())
 			.filter(Boolean);
 	});
+	const solo = $derived(typeParts.length === 1);
 </script>
 
-<tr>
-	<td class="prop-name">
-		<code>{name}</code>
+<div class="prop-row">
+	<div class="prop-head">
+		<code class="prop-name">{name}</code>
 		{#if required}<span class="prop-required">required</span>{/if}
-	</td>
-	<td class="prop-type">
-		{#each typeParts as part (part)}
-			<code class="type-chip">{part}</code>
-		{/each}
-	</td>
-	<td class="prop-default">
+
+		{#if type}
+			<span class="prop-types">
+				{#each typeParts as part (part)}
+					<code class="type-chip" class:type-chip-solo={solo}>{part}</code>
+				{/each}
+			</span>
+		{/if}
+
 		{#if defaultValue !== undefined}
-			<code>{defaultValue}</code>
-		{:else}
-			<span class="prop-none" aria-hidden="true">—</span>
+			<span class="prop-default">
+				<span class="prop-default-label">default</span>
+				<code>{defaultValue}</code>
+			</span>
 		{/if}
-	</td>
-	<td class="prop-desc">
-		{#if children}{@render children()}{/if}
-	</td>
-</tr>
+	</div>
+
+	{#if children}
+		<div class="prop-desc">{@render children()}</div>
+	{/if}
+</div>
 
 <style>
+	.prop-row {
+		padding: 0.95rem 1rem;
+		border-top: 1px solid var(--border);
+	}
+	.prop-row:first-child {
+		border-top: none;
+	}
+
+	/* Name + required + type + default flow on one wrapping line. */
+	.prop-head {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.4rem 0.6rem;
+		min-width: 0;
+	}
+
 	/* Name is the anchor you scan for: mono, ink, medium weight. */
 	.prop-name {
-		white-space: nowrap;
-	}
-	.prop-name code {
 		font-family: var(--font-mono, ui-monospace, monospace);
 		font-size: 0.8125rem;
 		font-weight: 600;
 		color: var(--foreground);
 	}
+
 	/* Solid brand pill — the sanctioned primary-foreground-on-primary pairing,
 	   so it stays legible in both themes (terracotta-on-tint fails AA in light). */
 	.prop-required {
-		display: inline-block;
-		margin-left: 0.45rem;
 		padding: 0.05rem 0.4rem;
 		border-radius: 9999px;
 		background: var(--primary);
@@ -78,17 +97,18 @@
 		font-size: 0.625rem;
 		font-weight: 600;
 		letter-spacing: 0.02em;
-		vertical-align: 0.1em;
+		text-transform: uppercase;
 	}
 
 	/* Type values as chips: a union wraps as a neat pill group, each token
-	   unbroken. Single types render as one chip. */
-	.prop-type {
-		max-width: 26rem;
+	   unbroken. A lone signature/generic wraps within itself on narrow screens. */
+	.prop-types {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.3rem;
+		min-width: 0;
 	}
 	.type-chip {
-		display: inline-block;
-		margin: 0.1rem 0.3rem 0.1rem 0;
 		padding: 0.05rem 0.4rem;
 		border-radius: 0.4rem;
 		border: 1px solid var(--border);
@@ -98,22 +118,36 @@
 		color: var(--foreground);
 		white-space: nowrap;
 	}
+	.type-chip-solo {
+		white-space: normal;
+		overflow-wrap: anywhere;
+		max-width: 100%;
+	}
 
+	/* Default sits at the end of the line, pushed right when there's room. */
 	.prop-default {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 0.35rem;
+		margin-left: auto;
 		white-space: nowrap;
 	}
+	.prop-default-label {
+		font-size: 0.7rem;
+		color: var(--muted-foreground);
+	}
 	.prop-default code {
 		font-family: var(--font-mono, ui-monospace, monospace);
-		font-size: 0.8125rem;
+		font-size: 0.78rem;
 		color: var(--foreground);
 	}
-	.prop-none {
-		color: var(--muted-foreground);
-	}
 
 	.prop-desc {
-		color: var(--foreground);
+		margin-top: 0.5rem;
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
 		line-height: 1.55;
+		max-width: 68ch;
 	}
 	.prop-desc :global(code) {
 		font-family: var(--font-mono, ui-monospace, monospace);
@@ -121,6 +155,7 @@
 		padding: 0.05em 0.3em;
 		border-radius: 0.3rem;
 		background: color-mix(in oklch, var(--muted) 60%, transparent);
+		color: var(--foreground);
 	}
 	.prop-desc :global(a) {
 		color: var(--primary);

package/dist/ui/prop.svelte.d.ts

@@ -6,7 +6,7 @@ type $$ComponentProps = {
     type?: string;
     /** Mark the property as required. */
     required?: boolean;
-    /** Default value, shown in its own column. */
+    /** Default value, shown alongside the type. */
     default?: string;
     /** Description. */
     children?: Snippet;

package/dist/ui/props-table.svelte

@@ -18,6 +18,9 @@
 	    <Prop name="variant" type="'a' | 'b'" default="'a'">Visual intent.</Prop>
 	    <Prop name="href" type="string" required>Turns it into a link.</Prop>
 	  </PropsTable>
+
+	Rows stack (name/type/default on one line, description below) so long type
+	signatures never force a horizontal scroll or crush the description.
 -->
 <div class="props-table not-prose">
 	{#if title}
@@ -26,20 +29,8 @@
 			<span class="props-table-caption-name">{title}</span>
 		</div>
 	{/if}
-	<div class="props-table-scroll">
-		<table>
-			<thead>
-				<tr>
-					<th class="col-prop">Prop</th>
-					<th class="col-type">Type</th>
-					<th class="col-default">Default</th>
-					<th class="col-desc">Description</th>
-				</tr>
-			</thead>
-			<tbody>
-				{@render children()}
-			</tbody>
-		</table>
+	<div class="props-list">
+		{@render children()}
 	</div>
 </div>
 
@@ -49,12 +40,11 @@
 		border: 1px solid var(--border);
 		border-radius: var(--radius);
 		background: var(--card);
-		/* Clip the scroll region to the rounded corners. */
 		overflow: hidden;
 	}
 
-	/* Caption = which component. Mono + ink weight, distinct from the quiet
-	   column-header row below it so the two never read as one grey slab. */
+	/* Caption = which component. Mono + ink weight, distinct from the rows below
+	   it so the header never reads as one grey slab. */
 	.props-table-caption {
 		display: flex;
 		align-items: center;
@@ -78,50 +68,8 @@
 		color: var(--foreground);
 	}
 
-	.props-table-scroll {
-		overflow-x: auto;
-	}
-	.props-table table {
-		width: 100%;
-		border-collapse: collapse;
-		font-size: 0.875rem;
-	}
-
-	/* Column headers: quiet labels, no fill — the caption owns the emphasis. */
-	.props-table :global(thead th) {
-		text-align: left;
-		font-size: 0.75rem;
-		font-weight: 500;
-		color: var(--muted-foreground);
-		padding: 0.55rem 1rem;
-		border-bottom: 1px solid var(--border);
-		white-space: nowrap;
-	}
-	/* Prop / Default shrink to their content; Type flexes; Description holds width. */
-	.props-table :global(.col-prop),
-	.props-table :global(.col-default) {
-		width: 1%;
-	}
-	.props-table :global(.col-desc) {
-		width: 40%;
-	}
-
-	.props-table :global(tbody td) {
-		padding: 0.7rem 1rem;
-		vertical-align: baseline;
-		border-top: 1px solid var(--border);
-		transition: background-color 120ms ease;
-	}
-	.props-table :global(tbody tr:first-child td) {
-		border-top: none;
-	}
-	.props-table :global(tbody tr:hover td) {
-		background: color-mix(in oklch, var(--muted) 45%, transparent);
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.props-table :global(tbody td) {
-			transition: none;
-		}
+	/* Each child <Prop> is a `.prop-row` with its own border-top. */
+	.props-list {
+		min-width: 0;
 	}
 </style>

package/dist/ui/search-trigger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import SearchIcon from '@lucide/svelte/icons/search';
+	import { useSearch } from '../search/context.svelte.js';
+
+	const { class: className = '' }: { class?: string } = $props();
+
+	const search = useSearch();
+
+	// Resolve the modifier label client-side so SSR stays platform-neutral.
+	let isMac = $state(false);
+	$effect(() => {
+		isMac = navigator.platform.toLowerCase().includes('mac');
+	});
+</script>
+
+{#if search}
+	<button
+		type="button"
+		onclick={() => (search.open = true)}
+		class="text-muted-foreground hover:text-foreground border-border/50 bg-muted/40 hover:bg-muted focus-visible:ring-ring inline-flex h-8 items-center gap-2 rounded-md border px-2.5 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none {className}"
+	>
+		<SearchIcon class="size-4 shrink-0" />
+		<span class="hidden sm:inline">Search</span>
+		<kbd
+			class="border-border/60 bg-background text-muted-foreground pointer-events-none ml-2 hidden h-5 items-center gap-0.5 rounded border px-1.5 font-mono text-[10px] font-medium sm:inline-flex"
+		>
+			{isMac ? '⌘' : 'Ctrl'}K
+		</kbd>
+		<span class="sr-only">Search documentation</span>
+	</button>
+{/if}

package/dist/ui/search-trigger.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    class?: string;
+};
+declare const SearchTrigger: import("svelte").Component<$$ComponentProps, {}, "">;
+type SearchTrigger = ReturnType<typeof SearchTrigger>;
+export default SearchTrigger;

package/dist/ui/search.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import * as Command from './shadcn/command/index.js';
+	import { useSearch } from '../search/context.svelte.js';
+	import type { SearchDoc } from '../config.js';
+	import type { SearchEngine } from '../search/create-search.js';
+	import CornerDownLeft from '@lucide/svelte/icons/corner-down-left';
+	import FileText from '@lucide/svelte/icons/file-text';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import SearchIcon from '@lucide/svelte/icons/search';
+
+	const {
+		load,
+		placeholder = 'Search documentation...'
+	}: {
+		/**
+		 * Lazily provide the generated search records. Wired by the consumer so the
+		 * index is code-split and only fetched when the palette first opens, e.g.
+		 * `() => import('svelte-docsmith/search').then((m) => m.docs)`.
+		 */
+		load: () => Promise<SearchDoc[]>;
+		placeholder?: string;
+	} = $props();
+
+	const search = useSearch();
+
+	let query = $state('');
+	let engine = $state<SearchEngine | null>(null);
+	let status = $state<'idle' | 'loading' | 'error'>('idle');
+
+	const trimmed = $derived(query.trim());
+	const results = $derived(engine && trimmed ? engine.search(query) : []);
+
+	// Build the index the first time the palette opens; keep it for later opens.
+	async function ensureEngine() {
+		if (engine || status === 'loading') return;
+		status = 'loading';
+		try {
+			const [{ createSearchEngine }, docs] = await Promise.all([
+				import('../search/create-search.js'),
+				load()
+			]);
+			engine = createSearchEngine(docs);
+			status = 'idle';
+		} catch (error) {
+			console.error('[svelte-docsmith] failed to load the search index', error);
+			status = 'error';
+		}
+	}
+
+	$effect(() => {
+		if (search?.open) ensureEngine();
+	});
+
+	function onWindowKeydown(event: KeyboardEvent) {
+		if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+			event.preventDefault();
+			if (search) search.open = !search.open;
+		}
+	}
+
+	function select(path: string) {
+		if (search) search.open = false;
+		query = '';
+		goto(path);
+	}
+</script>
+
+<svelte:window onkeydown={onWindowKeydown} />
+
+{#if search}
+	<Command.Dialog
+		bind:open={search.open}
+		shouldFilter={false}
+		title="Search"
+		description="Search the documentation"
+		class="ring-border/70 shadow-2xl ring-1 sm:max-w-xl"
+	>
+		<Command.Input bind:value={query} {placeholder} />
+
+		<div class="bg-border/50 -mx-1 mt-1 h-px"></div>
+
+		<Command.List class="scrollbar-slim max-h-[min(24rem,60vh)] px-2 py-2">
+			{#if status === 'loading'}
+				<div class="text-muted-foreground flex items-center justify-center gap-2 py-10 text-sm">
+					<LoaderCircle class="size-4 animate-spin" />
+					Loading search…
+				</div>
+			{:else if status === 'error'}
+				<div class="text-muted-foreground px-4 py-10 text-center text-sm">
+					Search is unavailable right now.
+				</div>
+			{:else if !trimmed}
+				<div
+					class="text-muted-foreground flex flex-col items-center gap-3 px-4 py-10 text-center text-sm"
+				>
+					<span
+						class="bg-muted/60 text-muted-foreground flex size-11 items-center justify-center rounded-full"
+					>
+						<SearchIcon class="size-5" />
+					</span>
+					<span>Search across every page of the documentation.</span>
+				</div>
+			{:else if results.length === 0}
+				<div class="text-muted-foreground px-4 py-10 text-center text-sm">
+					No results for <span class="text-foreground font-medium">“{trimmed}”</span>.
+				</div>
+			{:else}
+				{#each results as result (result.path)}
+					<Command.LinkItem
+						href={result.path}
+						onSelect={() => select(result.path)}
+						class="group/result mb-0.5 flex items-center gap-3 rounded-lg px-2.5 py-2 aria-selected:bg-accent aria-selected:text-accent-foreground"
+					>
+						<span
+							class="border-border/60 bg-muted/40 text-muted-foreground group-aria-selected/result:border-accent-foreground/20 group-aria-selected/result:text-accent-foreground flex size-8 shrink-0 items-center justify-center rounded-md border"
+						>
+							<FileText class="size-4" />
+						</span>
+
+						<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+							<span class="flex items-center gap-2">
+								<span class="truncate font-medium">{result.title}</span>
+								{#if result.section}
+									<span
+										class="border-border/60 text-muted-foreground group-aria-selected/result:border-accent-foreground/20 group-aria-selected/result:text-accent-foreground/80 ml-auto shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-medium tracking-wide uppercase"
+									>
+										{result.section}
+									</span>
+								{/if}
+							</span>
+							{#if result.snippet}
+								<span
+									class="text-muted-foreground group-aria-selected/result:text-accent-foreground/80 line-clamp-1 text-xs"
+								>
+									{result.snippet}
+								</span>
+							{/if}
+						</span>
+
+						<CornerDownLeft
+							class="text-muted-foreground group-aria-selected/result:text-accent-foreground size-4 shrink-0 opacity-0 group-aria-selected/result:opacity-100"
+						/>
+					</Command.LinkItem>
+				{/each}
+			{/if}
+		</Command.List>
+
+		<div
+			class="border-border/50 text-muted-foreground -mx-1 flex items-center gap-4 border-t px-4 py-2 text-[11px]"
+		>
+			<span class="flex items-center gap-1.5">
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">↑</kbd>
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">↓</kbd>
+				to navigate
+			</span>
+			<span class="flex items-center gap-1.5">
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">↵</kbd>
+				to open
+			</span>
+			<span class="ml-auto flex items-center gap-1.5">
+				<kbd class="border-border/60 bg-muted/40 rounded border px-1.5 py-0.5 font-sans">esc</kbd>
+				to close
+			</span>
+		</div>
+	</Command.Dialog>
+{/if}

package/dist/ui/search.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { SearchDoc } from '../config.js';
+type $$ComponentProps = {
+    /**
+     * Lazily provide the generated search records. Wired by the consumer so the
+     * index is code-split and only fetched when the palette first opens, e.g.
+     * `() => import('svelte-docsmith/search').then((m) => m.docs)`.
+     */
+    load: () => Promise<SearchDoc[]>;
+    placeholder?: string;
+};
+declare const Search: import("svelte").Component<$$ComponentProps, {}, "">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/ui/shadcn/accordion/accordion.svelte.d.ts

@@ -1,4 +1,4 @@
 import { Accordion as AccordionPrimitive } from 'bits-ui';
-declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "ref" | "value">;
+declare const Accordion: import("svelte").Component<AccordionPrimitive.RootProps, {}, "value" | "ref">;
 type Accordion = ReturnType<typeof Accordion>;
 export default Accordion;