entasis 0.11.0 → 0.12.0

package/dist/components/Accordion/Accordion.svelte

@@ -1,17 +1,15 @@
 <script lang="ts" generics="Item extends Record<string, unknown>">
-	import { getters } from 'melt';
-	import { Accordion } from 'melt/builders';
-	import { SvelteSet } from 'svelte/reactivity';
 	import type { AccordionProps } from './accordion.props.js';
 	import { useAccordionMotion, useAccordionTheme } from './accordion.theme.js';
+	import AccordionPanel from './AccordionPanel.svelte';
 	import Slot from '../Slot/Slot.svelte';
 	import type { Slot as SlotContent } from '../Slot/slot.js';
-	import { slide } from '../../transitions/transition.js';
 	import { caretDownIcon } from '../Icons/caretDown.js';
 	import { plusIcon } from '../Icons/plus.js';
 	import { minusIcon } from '../Icons/minus.js';
-	import { untrack } from 'svelte';
 	import { createBindableValue } from '../../utils/state.svelte.js';
+	import { createOpenChangeDetails, type OpenChangeInit } from '../../utils/openChange.js';
+	import { openStateAttributes } from '../../utils/stateAttributes.js';
 
 	let {
 		items: itemsWithoutIds = $bindable([]),
@@ -20,8 +18,14 @@
 		titleKey,
 		contentKey,
 		descriptionKey,
+		disabledKey,
+		disabled = false,
 		oneAtATime = true,
-		onItemOpenChange: ot,
+		hiddenUntilFound = false,
+		keepMounted = false,
+		onItemOpenChange,
+		onItemAfterOpen,
+		onItemAfterClose,
 		onValueChange,
 		icon = 'chevron',
 		variant = 'classic',
@@ -34,7 +38,6 @@
 		description,
 		content,
 		transition,
-		accessible = true,
 		headingLevel = 3,
 		...attachments
 	}: AccordionProps<Item> = $props();
@@ -48,22 +51,20 @@
 
 	const id = $props.id();
 	const classes = $derived(useAccordionTheme(theme));
-	const currentValue = $derived(valueState.value);
+	// One-at-a-time shows only the first requested id, whatever a parent bound.
+	const expandedIds = $derived(oneAtATime ? valueState.value.slice(0, 1) : valueState.value);
 
 	// Motion preset from `accordionTheme.motion`, through the override ladder
 	// (registry → `setAccordionTheme` → instance `theme.motion` → `transition` prop).
 	const resolveMotion = useAccordionMotion();
-	const split = $derived(resolveMotion(undefined, { motion: theme?.motion, transition }));
-	// slide is a factory: it captures the theme context at init because Svelte
-	// runs transition functions outside component initialisation.
-	const slideTransition = slide();
+	const motion = $derived(resolveMotion(undefined, { motion: theme?.motion, transition }));
 
 	const resolve = (item: Item, key: keyof Item) => {
 		return item[key] as SlotContent<{ item: Item }> | undefined;
 	};
 
 	// Prefer the item's own id (stable across reorder/filter), but disambiguate
-	// duplicates — melt keys by id, so collisions would toggle items together.
+	// duplicates, since the expanded ids would otherwise toggle items together.
 	const items = $derived.by(() => {
 		// eslint-disable-next-line svelte/prefer-svelte-reactivity -- Local duplicate counts are rebuilt for each immutable item snapshot.
 		const seen = new Map<string, number>();
@@ -75,51 +76,27 @@
 		}) as (Item & { id: string })[];
 	});
 
-	let prevOpen: string[] = untrack(() => [...currentValue]);
-	let isSyncingValue = false;
-	const accordion = new Accordion({
-		...getters({
-			get multiple() {
-				return !oneAtATime;
-			}
-		}),
-		onValueChange(nextValue) {
-			const next = normalizeValue(nextValue);
-			const changed = [...next, ...prevOpen].find(
-				(id) => next.includes(id) !== prevOpen.includes(id)
-			);
-			prevOpen = next;
-			valueState.value = next;
-			if (isSyncingValue) return;
-			onValueChange?.(next);
-			if (changed === undefined) return;
-			const index = items.findIndex((i) => i.id === changed);
-			if (index === -1) return;
-			ot?.({ item: itemsWithoutIds[index], index, open: next.includes(changed) });
-		}
-	});
-
-	$effect(() => {
-		const requested = oneAtATime ? currentValue.slice(0, 1) : [...currentValue];
-		const current = normalizeValue(accordion.value);
-		if (
-			current.length === requested.length &&
-			current.every((id, index) => id === requested[index])
-		) {
-			return;
-		}
-		prevOpen = requested;
-		isSyncingValue = true;
-		try {
-			accordion.value = oneAtATime ? requested[0] : new SvelteSet(requested);
-		} finally {
-			isSyncingValue = false;
-		}
-	});
+	const isDisabled = (item: Item) =>
+		disabled || item[(disabledKey ?? 'disabled') as keyof Item] === true;
+	const kept = $derived(hiddenUntilFound || keepMounted);
+	const triggerId = (index: number) => `${id}-trigger-${index}`;
+	const panelId = (index: number) => `${id}-panel-${index}`;
 
-	function normalizeValue(current: string | Iterable<string> | null | undefined): string[] {
-		if (current == null) return [];
-		return typeof current === 'string' ? [current] : [...current];
+	// The one path to a change: `onItemOpenChange` runs first and may cancel, then the expanded
+	// ids update and `onValueChange` reports them.
+	function requestChange(index: number, open: boolean, init: OpenChangeInit) {
+		const target = items[index];
+		if (!target || open === expandedIds.includes(target.id)) return;
+		const details = createOpenChangeDetails(init);
+		onItemOpenChange?.({ item: itemsWithoutIds[index], index, open, details });
+		if (details.isCanceled) return;
+		const next = open
+			? oneAtATime
+				? [target.id]
+				: [...expandedIds, target.id]
+			: expandedIds.filter((expandedId) => expandedId !== target.id);
+		valueState.value = next;
+		onValueChange?.(next);
 	}
 </script>
 
@@ -134,7 +111,7 @@
 {/snippet}
 
 <div
-	{...accordion.root}
+	data-slot="accordion"
 	data-size={size}
 	data-density={density}
 	data-variant={variant}
@@ -142,67 +119,90 @@
 	class={classes.root({ size, density, variant, splitted, className })}
 	{...attachments}
 >
-	{#each items as accordionItem (accordionItem.id)}
-		{@const accordionControl = accordion.getItem(accordionItem)}
+	{#each items as accordionItem, index (accordionItem.id)}
+		{@const expanded = expandedIds.includes(accordionItem.id)}
+		{@const itemDisabled = isDisabled(accordionItem)}
 		<div
+			data-slot="accordion-item"
+			data-index={index}
+			data-disabled={itemDisabled ? '' : undefined}
+			{...openStateAttributes(expanded)}
 			class={classes.item({
 				size,
 				density,
 				variant,
 				splitted,
-				expanded: accordionControl.isExpanded
+				expanded
 			})}
 		>
-			<button {...accordionControl.trigger} class={classes.trigger({ size, density, variant })}>
-				<div
-					{...accordionControl.heading}
-					aria-level={headingLevel}
-					class={classes.header({ size, density })}
+			<svelte:element this={`h${headingLevel}`} class={classes.heading()}>
+				<button
+					type="button"
+					id={triggerId(index)}
+					aria-expanded={expanded}
+					aria-controls={expanded || kept ? panelId(index) : undefined}
+					disabled={itemDisabled}
+					data-slot="accordion-trigger"
+					data-index={index}
+					data-state={expanded ? 'open' : 'closed'}
+					data-disabled={itemDisabled ? '' : undefined}
+					{...openStateAttributes(expanded)}
+					class={classes.trigger({ size, density, variant })}
+					onclick={(event) => {
+						if (itemDisabled) return;
+						requestChange(index, !expanded, {
+							reason: 'trigger-press',
+							event,
+							trigger: event.currentTarget
+						});
+					}}
 				>
-					<Slot
-						render={title || resolve(accordionItem, titleKey || 'title')}
-						class={classes.title({ size })}
-						payload={{ item: accordionItem }}
-					/>
-					<Slot
-						render={description || resolve(accordionItem, descriptionKey || 'description')}
-						class={classes.description({ size })}
-						payload={{ item: accordionItem }}
-					/>
-				</div>
-				{#if icon !== 'none'}
-					<span
-						data-slot="accordion-icon-wrapper"
-						aria-hidden="true"
-						class={classes.iconWrapper({
-							expanded: icon === 'chevron' && accordionControl.isExpanded
-						})}
-					>
-						{@render renderIcon(accordionControl.isExpanded)}
-					</span>
-				{/if}
-			</button>
+					<div class={classes.header({ size, density })}>
+						<Slot
+							render={title || resolve(accordionItem, titleKey || 'title')}
+							class={classes.title({ size })}
+							payload={{ item: accordionItem }}
+						/>
+						<Slot
+							render={description || resolve(accordionItem, descriptionKey || 'description')}
+							class={classes.description({ size })}
+							payload={{ item: accordionItem }}
+						/>
+					</div>
+					{#if icon !== 'none'}
+						<span
+							data-slot="accordion-icon-wrapper"
+							aria-hidden="true"
+							class={classes.iconWrapper({
+								expanded: icon === 'chevron' && expanded
+							})}
+						>
+							{@render renderIcon(expanded)}
+						</span>
+					{/if}
+				</button>
+			</svelte:element>
 
-			{#if accordionControl.isExpanded}
-				<div
-					in:slideTransition={split.in}
-					out:slideTransition={split.out}
-					{...accordionControl.content}
-					class={classes.content({ size, density, variant })}
-				>
-					<Slot
-						render={content || resolve(accordionItem, contentKey || 'content')}
-						payload={{ item: accordionItem }}
-					/>
-				</div>
-			{:else if accessible}
-				<span class="sr-only">
-					<Slot
-						render={content || resolve(accordionItem, contentKey || 'content')}
-						payload={{ item: accordionItem }}
-					/>
-				</span>
-			{/if}
+			<AccordionPanel
+				id={panelId(index)}
+				labelledby={triggerId(index)}
+				open={expanded}
+				hiddenUntilFound={hiddenUntilFound && !itemDisabled}
+				keepMounted={keepMounted || (hiddenUntilFound && itemDisabled)}
+				{motion}
+				class={classes.content({ size, density, variant })}
+				onBeforeMatch={(event) => {
+					// A disabled item cannot be toggled, so find-in-page must not open it either.
+					if (!itemDisabled) requestChange(index, true, { reason: 'find-in-page', event });
+				}}
+				onAfterOpen={() => onItemAfterOpen?.({ item: itemsWithoutIds[index], index })}
+				onAfterClose={() => onItemAfterClose?.({ item: itemsWithoutIds[index], index })}
+			>
+				<Slot
+					render={content || resolve(accordionItem, contentKey || 'content')}
+					payload={{ item: accordionItem }}
+				/>
+			</AccordionPanel>
 		</div>
 	{/each}
 </div>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -1,4 +1,3 @@
-import { Accordion } from 'melt/builders';
 import type { AccordionProps } from './accordion.props.js';
 declare function $$render<Item extends Record<string, unknown>>(): {
     props: AccordionProps<Item>;

package/dist/components/Accordion/AccordionPanel.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		disclosurePanel,
+		type DisclosurePanelMotion
+	} from '../../attachments/disclosurePanel.svelte.js';
+
+	// One item's panel. The disclosure panel controller is created per item, so every item
+	// keeps its own `hidden` state, height animation and completion callbacks.
+	let {
+		id,
+		labelledby,
+		open,
+		hiddenUntilFound,
+		keepMounted,
+		motion,
+		class: className,
+		onBeforeMatch,
+		onAfterOpen,
+		onAfterClose,
+		children
+	}: {
+		id: string;
+		/** The id of the trigger that labels the region. */
+		labelledby: string;
+		open: boolean;
+		hiddenUntilFound?: boolean;
+		keepMounted?: boolean;
+		motion?: DisclosurePanelMotion;
+		/** Classes of the content element inside the panel. */
+		class?: string;
+		onBeforeMatch: (event: Event) => void;
+		onAfterOpen?: () => void;
+		onAfterClose?: () => void;
+		children: Snippet;
+	} = $props();
+
+	const panel = disclosurePanel({
+		open: () => open,
+		hiddenUntilFound: () => hiddenUntilFound,
+		keepMounted: () => keepMounted,
+		motion: () => motion,
+		onBeforeMatch: (event) => onBeforeMatch(event),
+		onAfterOpen: () => onAfterOpen?.(),
+		onAfterClose: () => onAfterClose?.()
+	});
+</script>
+
+{#if panel.rendered}
+	<!-- The panel stays bare: while it hides until found, only its content is skipped, so the
+	     padding of the content slot lives on the element inside. -->
+	<div
+		{id}
+		role="region"
+		aria-labelledby={labelledby}
+		data-slot="accordion-panel"
+		{...panel.attributes}
+		{@attach panel.attach}
+	>
+		<div class={className} data-open={open ? '' : undefined} data-closed={open ? undefined : ''}>
+			{@render children()}
+		</div>
+	</div>
+{/if}

package/dist/components/Accordion/AccordionPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import { type DisclosurePanelMotion } from '../../attachments/disclosurePanel.svelte.js';
+type $$ComponentProps = {
+    id: string;
+    /** The id of the trigger that labels the region. */
+    labelledby: string;
+    open: boolean;
+    hiddenUntilFound?: boolean;
+    keepMounted?: boolean;
+    motion?: DisclosurePanelMotion;
+    /** Classes of the content element inside the panel. */
+    class?: string;
+    onBeforeMatch: (event: Event) => void;
+    onAfterOpen?: () => void;
+    onAfterClose?: () => void;
+    children: Snippet;
+};
+declare const AccordionPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type AccordionPanel = ReturnType<typeof AccordionPanel>;
+export default AccordionPanel;

package/dist/components/Accordion/accordion.attributes.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The styling hooks an Accordion exposes. Attributes are presence attributes (`''` while the
+ * state holds, omitted otherwise) unless the description says they carry a value.
+ */
+export declare const accordionDataAttributes: {
+    readonly 'data-open': "On an item, its trigger, its panel and the panel's content: present while the item is expanded.";
+    readonly 'data-closed': "On an item, its trigger, its panel and the panel's content: present while the item is collapsed, including during the exit transition.";
+    readonly 'data-entering': "On a panel: present while its opening animation plays.";
+    readonly 'data-exiting': "On a panel: present while its closing animation plays.";
+    readonly 'data-disabled': "On an item and its trigger: present while the item is disabled.";
+    readonly 'data-state': "On a trigger: `open` or `closed` (kept for compatibility; prefer `data-open` / `data-closed`).";
+    readonly 'data-index': "On an item and its trigger: the item index.";
+    readonly 'data-slot': "The part: `accordion`, `accordion-item`, `accordion-trigger`, `accordion-icon-wrapper` or `accordion-panel`.";
+    readonly 'data-size': "On the root: the resolved `size`.";
+    readonly 'data-density': "On the root: the resolved `density`.";
+    readonly 'data-variant': "On the root: the resolved `variant`.";
+};
+/** The name of an Accordion data attribute. */
+export type AccordionDataAttribute = keyof typeof accordionDataAttributes;
+export declare const accordionCssVariables: {
+    readonly '--disclosure-panel-height': "On a panel: its measured height in px while it animates, `auto` once open and `0px` once closed.";
+};
+/** The name of an Accordion CSS variable. */
+export type AccordionCssVariable = keyof typeof accordionCssVariables;

package/dist/components/Accordion/accordion.attributes.js

@@ -0,0 +1,20 @@
+/**
+ * The styling hooks an Accordion exposes. Attributes are presence attributes (`''` while the
+ * state holds, omitted otherwise) unless the description says they carry a value.
+ */
+export const accordionDataAttributes = {
+    'data-open': "On an item, its trigger, its panel and the panel's content: present while the item is expanded.",
+    'data-closed': "On an item, its trigger, its panel and the panel's content: present while the item is collapsed, including during the exit transition.",
+    'data-entering': 'On a panel: present while its opening animation plays.',
+    'data-exiting': 'On a panel: present while its closing animation plays.',
+    'data-disabled': 'On an item and its trigger: present while the item is disabled.',
+    'data-state': 'On a trigger: `open` or `closed` (kept for compatibility; prefer `data-open` / `data-closed`).',
+    'data-index': 'On an item and its trigger: the item index.',
+    'data-slot': 'The part: `accordion`, `accordion-item`, `accordion-trigger`, `accordion-icon-wrapper` or `accordion-panel`.',
+    'data-size': 'On the root: the resolved `size`.',
+    'data-density': 'On the root: the resolved `density`.',
+    'data-variant': 'On the root: the resolved `variant`.'
+};
+export const accordionCssVariables = {
+    '--disclosure-panel-height': 'On a panel: its measured height in px while it animates, `auto` once open and `0px` once closed.'
+};

package/dist/components/Accordion/accordion.mcp.d.ts

@@ -1 +1 @@
-export declare const accordionDescription = "\n# Accordion Component\n\nThe Accordion component provides an interactive collapsible container for organizing content. It supports single or multiple expanded items, various visual styles, and customizable transitions.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n</script>\n\n<Accordion \n\titems={[\n\t\t{ title: 'Section 1', content: 'Content 1' },\n\t\t{ title: 'Section 2', content: 'Content 2' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: Array<Item> (bindable) - Array of accordion items to display\n- **value**: string[] (bindable) - Expanded item ids\n- **defaultValue**: string[] - Initially expanded item ids when value is omitted\n- **titleKey**: string - Key to extract title from items (default: 'title')\n- **contentKey**: string - Key to extract content from items (default: 'content')\n- **descriptionKey**: string - Key to extract description from items (default: 'description')\n\n### Layout Props\n- **variant**: 'classic' | 'card' | 'outline' (default: 'classic')\n  - classic: flat rows separated by a muted border (nova/shadcn look) \u2014 the title underlines on hover, the chevron rotates\n  - card: the rows wrapped in a raised surface (rows inset with px-4)\n  - outline: the rows wrapped in a muted border (rows inset with px-4)\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Scales typography only: title, description and content text sizes plus the icon size. Spacing is controlled by density.\n\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal')\n  - Scales paddings and gaps only: trigger vertical padding, content bottom padding, header gap, and the gap between splitted items. Combine freely with size.\n\n- **splitted**: boolean (default: false) - Breaks the list into one surface per item with a gap: each item gets its own raised card (card), its own border (outline), or its own underline (classic)\n\n### Event Props\n- **onValueChange**: (value: string[]) => void - Called once when expanded item ids change\n- **onItemOpenChange**: (options: { item: Item; index: number; open: boolean }) => void - Called after one item's open state changes\n\n### Slot Props\n- **title**: Snippet - Custom title rendering\n- **description**: Snippet - Custom description rendering\n- **content**: Snippet - Custom content rendering\n- **icon**: Snippet - Custom icon rendering\n\n### Behavior Props\n- **oneAtATime**: boolean (default: true) - Whether only one item can be expanded at a time\n\n### Visual Props\n- **icon**: 'chevron' | 'plus-minus' | 'none' | Snippet (default: 'chevron')\n  - chevron: Down chevron that rotates\n  - plus-minus: Plus/minus glyph\n  - none: Hide the indicator\n  - Custom snippet for custom icons\n\n- **transition**: ResponsiveProps<FSOProps> - Slide transition override for the expanded content; beats the `motion` theme slot\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Accordion>\n\t<AccordionItem>\n\t\t<AccordionTrigger>\n\t\t\t<AccordionHeader>\n\t\t\t\t<Title />\n\t\t\t\t<Description />\n\t\t\t</AccordionHeader>\n\t\t\t<Icon />\n\t\t</AccordionTrigger>\n\t\t<AccordionContent />\n\t</AccordionItem>\n</Accordion>\n```\n\n## Examples\n\n### Basic Example\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'What is Svelte?', content: 'Svelte is a radical new approach to building user interfaces.' },\n\t\t{ title: 'Why use Svelte?', content: 'Svelte offers better performance and smaller bundle sizes.' }\n\t];\n</script>\n\n<Accordion {items} />\n```\n\n### Multiple Expanded Items\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' },\n\t\t{ title: 'Section 2', content: 'Content 2' }\n\t];\n</script>\n\n<Accordion \n\t{items}\n\toneAtATime={false}\n/>\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ \n\t\t\ttitle: 'Getting Started',\n\t\t\tdescription: 'Learn the basics',\n\t\t\tcontent: 'Start by installing Svelte...'\n\t\t}\n\t];\n</script>\n\n<Accordion {items} />\n```\n\n### Different Variants\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Item 1', content: 'Content 1' }\n\t];\n</script>\n\n<!-- Default flat look -->\n<Accordion {items} />\n\n<!-- Raised card container -->\n<Accordion variant=\"card\" {items} />\n\n<!-- Bordered container -->\n<Accordion variant=\"outline\" {items} />\n\n<!-- One surface per item -->\n<Accordion variant=\"card\" splitted {items} />\n```\n\n### Different Icons\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\timport { starIcon } from 'entasis/icons/star';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n</script>\n\n<!-- Chevron icon -->\n<Accordion icon=\"chevron\" {items} />\n\n<!-- Plus/minus icon -->\n<Accordion icon=\"plus-minus\" {items} />\n\n<!-- Custom icon (a snippet, no payload) -->\n<Accordion {items}>\n\t{#snippet icon()}\n\t\t{@render starIcon()}\n\t{/snippet}\n</Accordion>\n```\n\n### With Custom Keys\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet faqs = [\n\t\t{ question: 'How to install?', answer: 'Run npm install...' }\n\t];\n</script>\n\n<Accordion \n\titems={faqs}\n\ttitleKey=\"question\"\n\tcontentKey=\"answer\"\n/>\n```\n\n### With Event Handler\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n\t\n\tfunction handleToggle({ item, index, open }) {\n\t\tconsole.log(`Item ${item.title} at index ${index} is now ${open ? 'open' : 'closed'}`);\n\t}\n</script>\n\n<Accordion \n\t{items}\n\tonItemOpenChange={handleToggle}\n/>\n```\n\n### Custom Content Rendering\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n</script>\n\n<Accordion {items}>\n\t{#snippet title({ item })}\n\t\t<strong>{item.title}</strong>\n\t{/snippet}\n\t\n\t{#snippet content({ item })}\n\t\t<div class=\"p-4\">\n\t\t\t{@html item.content}\n\t\t</div>\n\t{/snippet}\n</Accordion>\n```\n\n## Accessibility\n\n- Automatically handles ARIA attributes\n- Keyboard navigation support (Enter/Space to toggle)\n- Focus management for expanded items\n- Screen reader friendly with proper roles\n\n## Notes\n\n- Items are automatically assigned IDs if not provided\n- Uses Melt UI's Accordion builder for accessibility\n- Smooth transitions with the library's themed slide transition\n- Supports bindable items for dynamic updates\n\n## Theme Customization\n\nThe Accordion component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main accordion container styles\n- **item**: Individual accordion item styles\n- **trigger**: Accordion trigger button styles\n- **header**: Header section styles (contains title and description)\n- **title**: Title text styles\n- **description**: Description text styles\n- **icon**: Expand/collapse icon styles\n- **content**: Content panel styles\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Gap between splitted items (via compounds)\n  - variant: 'classic' | 'card' | 'outline' - Container surface (raised / bordered / none)\n  - splitted: boolean - Gap layout for per-item surfaces\n\n**item**:\n- base: Base classes for individual items (muted separator when not splitted; own surface when splitted)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Item size\n  - density: 'compact' | 'normal' | 'comfortable'\n  - variant: 'classic' | 'card' | 'outline' - Per-item surface when splitted\n  - splitted: boolean\n  - expanded: boolean - Expanded state styling\n\n**trigger**:\n- base: Base classes for trigger button\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Vertical padding\n  - variant: 'classic' | 'card' | 'outline' - Horizontal inset on contained variants\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Gap between title and description\n\n**title**:\n- base: Base classes for title text (underlines on trigger hover)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**icon**:\n- base: Base classes for expand/collapse icon (muted, rotates for the chevron)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**content**:\n- base: Base classes for content panel\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - density: 'compact' | 'normal' | 'comfortable' - Bottom padding\n  - variant: 'classic' | 'card' | 'outline' - Horizontal inset on contained variants\n\n### Usage Examples\n\n**Bordered look (composition)**:\n```svelte\n<Accordion\n  items={items}\n  class=\"rounded-lg border border-neutral-muted\"\n  theme={{\n    item: { base: 'px-4' },\n    content: { base: 'px-4' }\n  }}\n/>\n```\n\n**Basic Theme Override**:\n```svelte\n<Accordion\n  items={items}\n  theme={{\n    trigger: {\n      base: 'state-layer'\n    },\n    item: {\n      expanded: {\n        true: 'bg-primary/5'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setAccordionTheme } from './index.ts';\n\n  setAccordionTheme({\n    trigger: {\n      base: 'transition-colors',\n      density: {\n        normal: 'px-4 py-3'\n      }\n    }\n  });\n</script>\n```\n\n## Motion\n\n- **motion** theme slot: a slide keyed by `axis` (`y` by default, `x` for a horizontal list).\n- Takes `in` / `out` slide params plus a `duration` / `easing` motion token.\n- Ladder: `<Theme components={{ accordion: { motion } }}>` \u2192 `setAccordionTheme({ motion })` \u2192\n  `theme.motion` \u2192 the `transition` prop. Reduced motion collapses it to 0.\n";
+export declare const accordionDescription = "\n# Accordion Component\n\nThe Accordion component provides an interactive collapsible container for organizing content. It supports single or multiple expanded items, various visual styles, and customizable transitions.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n</script>\n\n<Accordion \n\titems={[\n\t\t{ title: 'Section 1', content: 'Content 1' },\n\t\t{ title: 'Section 2', content: 'Content 2' }\n\t]}\n/>\n```\n\n## Props\n\n### Core Props\n- **items**: Array<Item> (bindable) - Array of accordion items to display\n- **value**: string[] (bindable) - Expanded item ids\n- **defaultValue**: string[] - Initially expanded item ids when value is omitted\n- **titleKey**: string - Key to extract title from items (default: 'title')\n- **contentKey**: string - Key to extract content from items (default: 'content')\n- **descriptionKey**: string - Key to extract description from items (default: 'description')\n- **disabledKey**: string - Key whose boolean disables one item (default: 'disabled')\n- **disabled**: boolean (default: false) - Disables every item\n- **headingLevel**: 2 | 3 | 4 | 5 | 6 (default: 3) - Level of the heading element that wraps each trigger\n\n### Layout Props\n- **variant**: 'classic' | 'card' | 'outline' (default: 'classic')\n  - classic: flat rows separated by a muted border (nova/shadcn look) \u2014 the title underlines on hover, the chevron rotates\n  - card: the rows wrapped in a raised surface (rows inset with px-4)\n  - outline: the rows wrapped in a muted border (rows inset with px-4)\n\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - Scales typography only: title, description and content text sizes plus the icon size. Spacing is controlled by density.\n\n- **density**: 'compact' | 'normal' | 'comfortable' (default: 'normal')\n  - Scales paddings and gaps only: trigger vertical padding, content bottom padding, header gap, and the gap between splitted items. Combine freely with size.\n\n- **splitted**: boolean (default: false) - Breaks the list into one surface per item with a gap: each item gets its own raised card (card), its own border (outline), or its own underline (classic)\n\n### Event Props\n- **onValueChange**: (value: string[]) => void - Called once after the expanded item ids change, with the new ids. Not called for initialization or for ids a parent assigns.\n- **onItemOpenChange**: (payload: { item: Item; index: number; open: boolean; details: OpenChangeDetails }) => void - Called before one item opens or closes. `details.reason` is `'trigger-press'` or `'find-in-page'`, `details.event` carries the DOM event, and `details.cancel()` keeps the item as it was (`onValueChange` is then not called). See `entasis/types` for `OpenChangeDetails`.\n- **onItemAfterOpen**: (payload: { item: Item; index: number }) => void - Called once each time an item finishes opening: after its slide, or at once when no animation plays (reduced motion, zero duration, find-in-page). Not called for items open at the start.\n- **onItemAfterClose**: (payload: { item: Item; index: number }) => void - Called once each time an item finishes closing, also when no animation plays or the panel is removed mid-close.\n\n### Slot Props\n- **title**: Snippet - Custom title rendering\n- **description**: Snippet - Custom description rendering\n- **content**: Snippet - Custom content rendering\n- **icon**: Snippet - Custom icon rendering\n\n### Behavior Props\n- **oneAtATime**: boolean (default: true) - Whether only one item can be expanded at a time\n- **hiddenUntilFound**: boolean (default: false) - Keeps collapsed panels in the DOM under `hidden=\"until-found\"`, so the browser's find-in-page, text fragments and `#id` links reach their content and open the item (reason `find-in-page`, no animation). Collapsed content stays out of the accessibility tree and the tab order until then. A disabled item is not findable: its collapsed panel stays under plain `hidden`.\n- **keepMounted**: boolean (default: false) - Keeps collapsed panels mounted under `hidden`, preserving their state (form values, scroll). Not findable by the browser.\n\n### Visual Props\n- **icon**: 'chevron' | 'plus-minus' | 'none' | Snippet (default: 'chevron')\n  - chevron: Down chevron that rotates\n  - plus-minus: Plus/minus glyph\n  - none: Hide the indicator\n  - Custom snippet for custom icons\n\n- **transition**: ResponsiveProps<FSOProps> - Slide transition override for the expanded content; beats the `motion` theme slot\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<Accordion>\n\t<AccordionItem>\n\t\t<Heading>                       <!-- h2 to h6, headingLevel -->\n\t\t\t<AccordionTrigger>          <!-- button: id, aria-expanded, aria-controls, data-index -->\n\t\t\t\t<AccordionHeader>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Description />\n\t\t\t\t</AccordionHeader>\n\t\t\t\t<Icon />\n\t\t\t</AccordionTrigger>\n\t\t</Heading>\n\t\t<AccordionContent />            <!-- region: id, aria-labelledby the trigger -->\n\t</AccordionItem>\n</Accordion>\n```\n\nThe heading wraps the button, as the WAI-ARIA accordion pattern asks, so assistive technology lists the headings. A collapsed item has no panel in the DOM unless `hiddenUntilFound` or `keepMounted` is set, so its content is neither read nor tabbable; `aria-controls` is present while the panel exists.\n\n## Examples\n\n### Basic Example\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'What is Svelte?', content: 'Svelte is a radical new approach to building user interfaces.' },\n\t\t{ title: 'Why use Svelte?', content: 'Svelte offers better performance and smaller bundle sizes.' }\n\t];\n</script>\n\n<Accordion {items} />\n```\n\n### Multiple Expanded Items\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' },\n\t\t{ title: 'Section 2', content: 'Content 2' }\n\t];\n</script>\n\n<Accordion \n\t{items}\n\toneAtATime={false}\n/>\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ \n\t\t\ttitle: 'Getting Started',\n\t\t\tdescription: 'Learn the basics',\n\t\t\tcontent: 'Start by installing Svelte...'\n\t\t}\n\t];\n</script>\n\n<Accordion {items} />\n```\n\n### Different Variants\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Item 1', content: 'Content 1' }\n\t];\n</script>\n\n<!-- Default flat look -->\n<Accordion {items} />\n\n<!-- Raised card container -->\n<Accordion variant=\"card\" {items} />\n\n<!-- Bordered container -->\n<Accordion variant=\"outline\" {items} />\n\n<!-- One surface per item -->\n<Accordion variant=\"card\" splitted {items} />\n```\n\n### Different Icons\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\timport { starIcon } from 'entasis/icons/star';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n</script>\n\n<!-- Chevron icon -->\n<Accordion icon=\"chevron\" {items} />\n\n<!-- Plus/minus icon -->\n<Accordion icon=\"plus-minus\" {items} />\n\n<!-- Custom icon (a snippet, no payload) -->\n<Accordion {items}>\n\t{#snippet icon()}\n\t\t{@render starIcon()}\n\t{/snippet}\n</Accordion>\n```\n\n### With Custom Keys\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet faqs = [\n\t\t{ question: 'How to install?', answer: 'Run npm install...' }\n\t];\n</script>\n\n<Accordion \n\titems={faqs}\n\ttitleKey=\"question\"\n\tcontentKey=\"answer\"\n/>\n```\n\n### Find-in-page and disabled items\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\n\tlet items = [\n\t\t{ title: 'Shipping', content: 'Orders ship within two days.' },\n\t\t{ title: 'Returns', content: 'Free returns for 30 days.', disabled: true }\n\t];\n</script>\n\n<!-- Ctrl+F finds \"two days\" and opens Shipping; Returns is skipped by Tab. -->\n<Accordion {items} hiddenUntilFound />\n```\n\n### With Event Handler\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n\t\n\tfunction handleToggle({ item, index, open, details }) {\n\t\tconsole.log(`Item ${item.title} at index ${index} is opening: ${open} (${details.reason})`);\n\t\t// details.cancel() would keep it as it was.\n\t}\n</script>\n\n<Accordion \n\t{items}\n\tonItemOpenChange={handleToggle}\n/>\n```\n\n### Custom Content Rendering\n\n```svelte\n<script>\n\timport { Accordion } from 'entasis/accordion';\n\t\n\tlet items = [\n\t\t{ title: 'Section 1', content: 'Content 1' }\n\t];\n</script>\n\n<Accordion {items}>\n\t{#snippet title({ item })}\n\t\t<strong>{item.title}</strong>\n\t{/snippet}\n\t\n\t{#snippet content({ item })}\n\t\t<div class=\"p-4\">\n\t\t\t{@html item.content}\n\t\t</div>\n\t{/snippet}\n</Accordion>\n```\n\n## Styling hooks\n\nEvery item, trigger and panel carries its own open state.\n\nAttributes are presence attributes (set while the state holds, omitted otherwise) unless they carry a value.\n\n**Data attributes**\n- `data-open`: On an item, its trigger, its panel and the panel's content: present while the item is expanded.\n- `data-closed`: On an item, its trigger, its panel and the panel's content: present while the item is collapsed, including during the exit transition.\n- `data-entering`: On a panel: present while its opening animation plays.\n- `data-exiting`: On a panel: present while its closing animation plays.\n- `data-disabled`: On an item and its trigger: present while the item is disabled.\n- `data-state`: On a trigger: `open` or `closed` (kept for compatibility; prefer `data-open` / `data-closed`).\n- `data-index`: On an item and its trigger: the item index.\n- `data-slot`: The part: `accordion`, `accordion-item`, `accordion-trigger`, `accordion-icon-wrapper` or `accordion-panel`.\n- `data-size`: On the root: the resolved `size`.\n- `data-density`: On the root: the resolved `density`.\n- `data-variant`: On the root: the resolved `variant`.\n\n**CSS variables**\n- `--disclosure-panel-height`: On a panel: its measured height in px while it animates, `auto` once open and `0px` once closed.\n\nThe typed maps `accordionDataAttributes` and `accordionCssVariables` (from `entasis/accordion`) list each name with its meaning.\n\n## Accessibility\n\n- Each trigger is a native `<button>` inside a heading element (`headingLevel`), with `aria-expanded` and, while its panel exists, `aria-controls`.\n- Each panel is a `role=\"region\"` labelled by its trigger.\n- Enter and Space toggle an item. Tab moves between triggers and into open content; arrow, Home and End keys are left to the page (they neither move focus nor block scrolling), following the current WAI-ARIA guidance.\n- A disabled item's trigger has the native `disabled` attribute: it is skipped by Tab and announced as unavailable.\n- Collapsed content is not copied anywhere for screen readers. Use `hiddenUntilFound` to make it findable.\n- Migration: the `accessible` prop is removed (collapsed content is no longer duplicated into screen-reader-only text).\n\n## Notes\n\n- Items are automatically assigned IDs if not provided\n- Expanded ids are tracked by the component itself; there is no builder dependency\n- Panels animate their height through the shared disclosure panel (`--disclosure-panel-height` is set on the panel)\n- Styling hooks: `data-open` / `data-closed` on the item, trigger and content, `data-disabled`, `data-index`, and `data-entering` / `data-exiting` on the panel\n- Supports bindable items for dynamic updates\n\n## Theme Customization\n\nThe Accordion component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **root**: Main accordion container styles\n- **item**: Individual accordion item styles\n- **trigger**: Accordion trigger button styles\n- **heading**: The `h2`-`h6` element that wraps each trigger (margin-free by default)\n- **header**: Header section styles (contains title and description, inside the trigger)\n- **title**: Title text styles\n- **description**: Description text styles\n- **icon**: Expand/collapse icon styles\n- **content**: Content styles, on the element inside the region panel (so a hidden-until-found panel reserves no space)\n\n### Available Variants\n\n**root**:\n- base: Base classes for main container\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Gap between splitted items (via compounds)\n  - variant: 'classic' | 'card' | 'outline' - Container surface (raised / bordered / none)\n  - splitted: boolean - Gap layout for per-item surfaces\n\n**item**:\n- base: Base classes for individual items (muted separator when not splitted; own surface when splitted)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Item size\n  - density: 'compact' | 'normal' | 'comfortable'\n  - variant: 'classic' | 'card' | 'outline' - Per-item surface when splitted\n  - splitted: boolean\n  - expanded: boolean - Expanded state styling\n\n**trigger**:\n- base: Base classes for trigger button\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Vertical padding\n  - variant: 'classic' | 'card' | 'outline' - Horizontal inset on contained variants\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large'\n  - density: 'compact' | 'normal' | 'comfortable' - Gap between title and description\n\n**title**:\n- base: Base classes for title text (underlines on trigger hover)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**icon**:\n- base: Base classes for expand/collapse icon (muted, rotates for the chevron)\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Icon size\n\n**content**:\n- base: Base classes for content panel\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n  - density: 'compact' | 'normal' | 'comfortable' - Bottom padding\n  - variant: 'classic' | 'card' | 'outline' - Horizontal inset on contained variants\n\n### Usage Examples\n\n**Bordered look (composition)**:\n```svelte\n<Accordion\n  items={items}\n  class=\"rounded-lg border border-neutral-muted\"\n  theme={{\n    item: { base: 'px-4' },\n    content: { base: 'px-4' }\n  }}\n/>\n```\n\n**Basic Theme Override**:\n```svelte\n<Accordion\n  items={items}\n  theme={{\n    trigger: {\n      base: 'state-layer'\n    },\n    item: {\n      expanded: {\n        true: 'bg-primary/5'\n      }\n    }\n  }}\n/>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setAccordionTheme } from './index.ts';\n\n  setAccordionTheme({\n    trigger: {\n      base: 'transition-colors',\n      density: {\n        normal: 'px-4 py-3'\n      }\n    }\n  });\n</script>\n```\n\n## Motion\n\n- **motion** theme slot: the panel's height animation. `duration`, `delay` and `easing` apply; the preset's slide offsets and opacity do not (panels collapse along their height only).\n- Takes `in` / `out` params plus a `duration` / `easing` motion token.\n- Ladder: `<Theme components={{ accordion: { motion } }}>` \u2192 `setAccordionTheme({ motion })` \u2192\n  `theme.motion` \u2192 the `transition` prop. Reduced motion collapses it to 0.\n";