@nqmcreative/ui 0.2.1 → 0.2.3

package/dist/styles/matte/Sidebar.svelte.d.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte';
+export type SidebarVariant = 'plain' | 'filled' | 'floating';
 export interface SidebarItem {
     /** Stable id used for the active state. Falls back to `href`. */
     id?: string;
@@ -5,17 +7,27 @@ export interface SidebarItem {
     href?: string;
     disabled?: boolean;
     badge?: string | number;
+    /**
+     * Leading glyph, 16px. The one thing a collapsed rail still shows, so
+     * an item that has to survive `collapsed` needs one.
+     */
+    icon?: Snippet;
     /** Nested links — the parent becomes a collapsible group. */
     items?: SidebarItem[];
     /** Open the group on first render. */
     open?: boolean;
+    /**
+     * `false` pins a group open: the parent stops being a button and the
+     * children are always on show. For navigation a reader should not be
+     * able to lose.
+     */
+    collapsible?: boolean;
 }
 export interface SidebarSection {
     /** Small heading above a run of items. */
     label?: string;
     items: SidebarItem[];
 }
-import type { Snippet } from 'svelte';
 import { type Tone } from '../../core/tones.js';
 interface Props {
     sections: SidebarSection[];
@@ -25,6 +37,8 @@ interface Props {
     collapsed?: boolean;
     /** Show the collapse button. */
     collapsible?: boolean;
+    /** Surface treatment: bare, the framed default, or a detached card. */
+    variant?: SidebarVariant;
     tone?: Tone;
     header?: Snippet;
     footer?: Snippet;

package/dist/styles/matte/StatsBand.svelte

@@ -41,7 +41,7 @@
 
 		<div class="grid {cols} {bordered ? 'gap-px border border-hairline bg-hairline' : 'gap-10'}">
 			{#each stats as stat (stat.label)}
-				<div class={bordered ? 'bg-bg p-6' : ''}>
+				<div class={bordered ? 'bg-bg p-5' : ''}>
 					<Stat
 						label={stat.label}
 						value={stat.value}

package/dist/styles/matte/Table.svelte

@@ -77,7 +77,7 @@
 		right: 'text-right'
 	};
 
-	const pad = $derived(compact ? 'px-4 py-2' : 'px-4 py-3');
+	const pad = $derived(compact ? 'px-3.5 py-1.5' : 'px-3.5 py-2.5');
 
 	const sorted = $derived(sortLocally ? sortRows(rows, sort) : rows);
 
@@ -112,7 +112,7 @@
 	<table class="w-full border-collapse font-sans text-[15px]">
 		{#if caption}
 			<caption
-				class="border-b border-hairline px-4 py-3 text-left font-sans text-sm text-text-muted"
+				class="border-b border-hairline px-3.5 py-2.5 text-left font-sans text-sm text-text-muted"
 			>
 				{caption}
 			</caption>
@@ -170,7 +170,7 @@
 				<tr>
 					<td
 						colspan={columns.length + (selectable ? 1 : 0)}
-						class="px-4 py-10 text-center text-sm text-text-muted"
+						class="px-3.5 py-10 text-center text-sm text-text-muted"
 					>
 						{#if empty}{@render empty()}{:else}{t.current.noData}{/if}
 					</td>

package/dist/styles/matte/Testimonial.svelte

@@ -34,8 +34,8 @@
 
 	const variants = $derived({
 		plain: '',
-		card: 'border border-hairline bg-bg p-6',
-		accent: `${toneSurface[tone]} border-l-2 ${toneBorderLeft[tone]} p-6`
+		card: 'border border-hairline bg-bg p-5',
+		accent: `${toneSurface[tone]} border-l-2 ${toneBorderLeft[tone]} p-5`
 	});
 </script>
 

package/dist/styles/matte/Textarea.svelte

@@ -48,7 +48,7 @@
 	bind:value
 	{rows}
 	aria-invalid={invalid ? 'true' : undefined}
-	class="w-full border bg-bg px-4 py-3 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out placeholder:text-text-muted focus:outline-none disabled:pointer-events-none disabled:opacity-50
+	class="w-full border bg-bg px-3.5 py-2.5 font-sans text-[15px] text-text transition-colors duration-150 ease-brand-out placeholder:text-text-muted focus:outline-none disabled:pointer-events-none disabled:opacity-50
 		{autoresize ? 'resize-none overflow-hidden' : 'resize-y'}
 		{invalid ? 'border-danger' : `border-hairline ${toneFocusBorder[tone]}`} {className}"
 	{...rest}></textarea>

package/dist/styles/matte/index.d.ts

@@ -76,7 +76,7 @@ export type { StepItem } from './Steps.svelte';
 export { default as Navbar } from './Navbar.svelte';
 export type { NavItem } from './Navbar.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
-export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
+export type { SidebarVariant, SidebarItem, SidebarSection } from './Sidebar.svelte';
 export { default as Footer } from './Footer.svelte';
 export type { FooterLink, FooterColumn } from './Footer.svelte';
 export { default as HeroSection } from './HeroSection.svelte';

package/dist/styles/paper/CommandPalette.svelte

@@ -21,6 +21,7 @@
 	import { ListCursor, groupItems, matchQuery, revealIndex } from '../../core/list.svelte.js';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { toneSoft, type Tone } from '../../core/tones.js';
+	import { isTypingTarget } from '../../core/trigger.js';
 	import Kbd from './Kbd.svelte';
 
 	interface Props {
@@ -34,6 +35,11 @@
 		 * Pass `null` to wire your own trigger only.
 		 */
 		hotkey?: string | null;
+		/**
+		 * Key that opens the palette on its own, pressed anywhere the reader
+		 * isn't typing. Default `'/'`. Pass `null` to turn it off.
+		 */
+		quickKey?: string | null;
 		onselect?: (item: CommandItem) => void;
 		class?: string;
 	}
@@ -45,6 +51,7 @@
 		emptyText,
 		tone = 'brand',
 		hotkey = 'k',
+		quickKey = '/',
 		onselect,
 		class: className = ''
 	}: Props = $props();
@@ -82,11 +89,27 @@
 	});
 
 	$effect(() => {
-		if (!hotkey) return;
+		if (!hotkey && !quickKey) return;
 		const onKeydown = (event: KeyboardEvent) => {
-			if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === hotkey.toLowerCase()) {
+			const key = event.key.toLowerCase();
+
+			if ((event.metaKey || event.ctrlKey) && key === hotkey?.toLowerCase()) {
 				event.preventDefault();
 				open = !open;
+				return;
+			}
+
+			// A bare key can only open the palette, never close it: while it is
+			// open the keystroke belongs to the query field.
+			if (
+				key === quickKey?.toLowerCase() &&
+				!event.metaKey &&
+				!event.ctrlKey &&
+				!event.altKey &&
+				!isTypingTarget(event.target)
+			) {
+				event.preventDefault();
+				open = true;
 			}
 		};
 		window.addEventListener('keydown', onKeydown);

package/dist/styles/paper/CommandPalette.svelte.d.ts

@@ -24,6 +24,11 @@ interface Props {
      * Pass `null` to wire your own trigger only.
      */
     hotkey?: string | null;
+    /**
+     * Key that opens the palette on its own, pressed anywhere the reader
+     * isn't typing. Default `'/'`. Pass `null` to turn it off.
+     */
+    quickKey?: string | null;
     onselect?: (item: CommandItem) => void;
     class?: string;
 }

package/dist/styles/paper/Modal.svelte

@@ -103,7 +103,15 @@
 			</div>
 		{/if}
 
-		<div class="px-6 py-2 pb-5 font-sans text-sm leading-relaxed text-text-secondary">
+		<!--
+			The body's top padding depends on what sits above it: 8px is the right
+			gap under a header, and far too tight when there is none — a titleless
+			modal, ConfirmDialog among them, would otherwise start against the edge.
+		-->
+		<div
+			class="px-6 pb-5 font-sans text-sm leading-relaxed text-text-secondary
+				{title || closable ? 'pt-2' : 'pt-5'}"
+		>
 			{@render children()}
 		</div>
 

package/dist/styles/paper/Sidebar.svelte

@@ -1,4 +1,8 @@
 <script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export type SidebarVariant = 'plain' | 'filled' | 'floating';
+
 	export interface SidebarItem {
 		/** Stable id used for the active state. Falls back to `href`. */
 		id?: string;
@@ -6,10 +10,21 @@
 		href?: string;
 		disabled?: boolean;
 		badge?: string | number;
+		/**
+		 * Leading glyph, 16px. The one thing a collapsed rail still shows, so
+		 * an item that has to survive `collapsed` needs one.
+		 */
+		icon?: Snippet;
 		/** Nested links — the parent becomes a collapsible group. */
 		items?: SidebarItem[];
 		/** Open the group on first render. */
 		open?: boolean;
+		/**
+		 * `false` pins a group open: the parent stops being a button and the
+		 * children are always on show. For navigation a reader should not be
+		 * able to lose.
+		 */
+		collapsible?: boolean;
 	}
 
 	export interface SidebarSection {
@@ -20,7 +35,6 @@
 </script>
 
 <script lang="ts">
-	import type { Snippet } from 'svelte';
 	import { useLocale } from '../../core/locale.svelte.js';
 	import { focusRing, toneRing, toneSoft, type Tone } from '../../core/tones.js';
 
@@ -32,6 +46,8 @@
 		collapsed?: boolean;
 		/** Show the collapse button. */
 		collapsible?: boolean;
+		/** Surface treatment: bare, the framed default, or a detached card. */
+		variant?: SidebarVariant;
 		tone?: Tone;
 		header?: Snippet;
 		footer?: Snippet;
@@ -44,6 +60,7 @@
 		value = $bindable(''),
 		collapsed = $bindable(false),
 		collapsible = true,
+		variant = 'filled',
 		tone = 'brand',
 		header,
 		footer,
@@ -59,7 +76,8 @@
 	let opened = $state<Record<string, boolean>>({});
 
 	const isOpen = (item: SidebarItem) =>
-		opened[keyOf(item)] ?? (item.open || item.items!.some((child) => keyOf(child) === value));
+		item.collapsible === false ||
+		(opened[keyOf(item)] ?? (item.open || item.items!.some((child) => keyOf(child) === value)));
 
 	function toggle(item: SidebarItem) {
 		opened = { ...opened, [keyOf(item)]: !isOpen(item) };
@@ -71,13 +89,50 @@
 		onnavigate?.(item);
 	}
 
+	const surfaces: Record<SidebarVariant, string> = {
+		plain: 'h-full bg-transparent',
+		filled: 'h-full border-r border-hairline bg-bg-alt',
+		floating: 'm-3 h-[calc(100%-1.5rem)] rounded-lg border border-hairline bg-bg-alt shadow-sm'
+	};
+
 	const row =
 		'flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left font-sans text-sm transition-colors duration-150 ease-brand-out disabled:pointer-events-none disabled:opacity-40';
 </script>
 
+<!-- Nested links. One copy, rendered by both kinds of group. -->
+{#snippet subitems(item: SidebarItem)}
+	<div class="ml-4 flex flex-col gap-0.5 border-l border-hairline pl-2">
+		{#each item.items as child (keyOf(child))}
+			<a
+				href={child.href}
+				onclick={() => go(child)}
+				aria-current={value === keyOf(child) ? 'page' : undefined}
+				class="{row} {focusRing} {toneRing[tone]} {value === keyOf(child)
+					? `${toneSoft[tone]} font-medium`
+					: 'text-text-muted hover:bg-bg-inset hover:text-text'} {child.disabled
+					? 'pointer-events-none opacity-40'
+					: ''}"
+			>
+				{@render glyph(child)}
+				<span class="min-w-0 flex-1 truncate">{child.label}</span>
+				{#if child.badge !== undefined}
+					<span class="shrink-0 text-[11px] tabular-nums">{child.badge}</span>
+				{/if}
+			</a>
+		{/each}
+	</div>
+{/snippet}
+
+<!-- One box for every glyph, so rows line up whether or not an item has one. -->
+{#snippet glyph(item: SidebarItem)}
+	{#if item.icon}
+		<span class="grid size-4 shrink-0 place-items-center *:size-4">{@render item.icon()}</span>
+	{/if}
+{/snippet}
+
 <aside
-	class="flex h-full shrink-0 flex-col border-r border-hairline bg-bg-alt transition-[width] duration-200 ease-brand-out
-		{collapsed ? 'w-16' : 'w-60'} {className}"
+	class="flex shrink-0 flex-col transition-[width] duration-200 ease-brand-out
+		{surfaces[variant]} {collapsed ? 'w-16' : 'w-60'} {className}"
 >
 	{#if header}
 		<div class="flex h-16 shrink-0 items-center gap-3 border-b border-hairline px-3">
@@ -97,16 +152,25 @@
 				{/if}
 
 				{#each section.items as item (keyOf(item))}
-					{#if item.items?.length}
+					{#if item.items?.length && item.collapsible === false}
+						<div class="{row} {collapsed ? 'justify-center' : ''} font-medium text-text-muted">
+							{@render glyph(item)}
+							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
+						</div>
+						{#if isOpen(item) && !collapsed}
+							{@render subitems(item)}
+						{/if}
+					{:else if item.items?.length}
 						<button
 							type="button"
 							onclick={() => toggle(item)}
 							aria-expanded={isOpen(item)}
 							title={collapsed ? item.label : undefined}
-							class="{row} {focusRing} {toneRing[
+							class="{row} {collapsed ? 'justify-center' : ''} {focusRing} {toneRing[
 								tone
 							]} text-text-secondary hover:bg-bg-inset hover:text-text"
 						>
+							{@render glyph(item)}
 							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
 							{#if !collapsed}
 								<svg
@@ -128,25 +192,7 @@
 						</button>
 
 						{#if isOpen(item) && !collapsed}
-							<div class="ml-4 flex flex-col gap-0.5 border-l border-hairline pl-2">
-								{#each item.items as child (keyOf(child))}
-									<a
-										href={child.href}
-										onclick={() => go(child)}
-										aria-current={value === keyOf(child) ? 'page' : undefined}
-										class="{row} {focusRing} {toneRing[tone]} {value === keyOf(child)
-											? `${toneSoft[tone]} font-medium`
-											: 'text-text-muted hover:bg-bg-inset hover:text-text'} {child.disabled
-											? 'pointer-events-none opacity-40'
-											: ''}"
-									>
-										<span class="min-w-0 flex-1 truncate">{child.label}</span>
-										{#if child.badge !== undefined}
-											<span class="shrink-0 text-[11px] tabular-nums">{child.badge}</span>
-										{/if}
-									</a>
-								{/each}
-							</div>
+							{@render subitems(item)}
 						{/if}
 					{:else}
 						<a
@@ -154,12 +200,15 @@
 							onclick={() => go(item)}
 							aria-current={value === keyOf(item) ? 'page' : undefined}
 							title={collapsed ? item.label : undefined}
-							class="{row} {focusRing} {toneRing[tone]} {value === keyOf(item)
+							class="{row} {collapsed ? 'justify-center' : ''} {focusRing} {toneRing[
+								tone
+							]} {value === keyOf(item)
 								? `${toneSoft[tone]} font-medium`
 								: 'text-text-secondary hover:bg-bg-inset hover:text-text'} {item.disabled
 								? 'pointer-events-none opacity-40'
 								: ''}"
 						>
+							{@render glyph(item)}
 							<span class="min-w-0 flex-1 truncate {collapsed ? 'sr-only' : ''}">{item.label}</span>
 							{#if item.badge !== undefined && !collapsed}
 								<span class="shrink-0 text-[11px] text-text-muted tabular-nums">{item.badge}</span>

package/dist/styles/paper/Sidebar.svelte.d.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte';
+export type SidebarVariant = 'plain' | 'filled' | 'floating';
 export interface SidebarItem {
     /** Stable id used for the active state. Falls back to `href`. */
     id?: string;
@@ -5,17 +7,27 @@ export interface SidebarItem {
     href?: string;
     disabled?: boolean;
     badge?: string | number;
+    /**
+     * Leading glyph, 16px. The one thing a collapsed rail still shows, so
+     * an item that has to survive `collapsed` needs one.
+     */
+    icon?: Snippet;
     /** Nested links — the parent becomes a collapsible group. */
     items?: SidebarItem[];
     /** Open the group on first render. */
     open?: boolean;
+    /**
+     * `false` pins a group open: the parent stops being a button and the
+     * children are always on show. For navigation a reader should not be
+     * able to lose.
+     */
+    collapsible?: boolean;
 }
 export interface SidebarSection {
     /** Small heading above a run of items. */
     label?: string;
     items: SidebarItem[];
 }
-import type { Snippet } from 'svelte';
 import { type Tone } from '../../core/tones.js';
 interface Props {
     sections: SidebarSection[];
@@ -25,6 +37,8 @@ interface Props {
     collapsed?: boolean;
     /** Show the collapse button. */
     collapsible?: boolean;
+    /** Surface treatment: bare, the framed default, or a detached card. */
+    variant?: SidebarVariant;
     tone?: Tone;
     header?: Snippet;
     footer?: Snippet;

package/dist/styles/paper/fonts.css

@@ -1,8 +1,8 @@
 /*
- * Optional: Plus Jakarta Sans, the face paper is designed around. Import this
- * only if your project doesn't already self-host or load it another way —
- * without it the tokens fall back to the system stack, which works but reads
- * harder and colder.
+ * Optional: the two faces paper is designed around — Plus Jakarta Sans
+ * (headings) and Work Sans (body). Import this only if your project doesn't
+ * already self-host or load them another way — without it the tokens fall back
+ * to the system stack, which works but reads harder and colder.
  *
  * These are plain `@font-face` rules rather than an `@import` of the Google
  * stylesheet on purpose: `@import` is only valid before every other rule, so a
@@ -11,13 +11,13 @@
  * you put it, and it skips the CSS-to-CSS round trip before the font files
  * start downloading.
  *
- * Two rules rather than matte's eight: this is a variable font, so one file per
- * subset covers every weight from 400 to 700. Latin and Latin Extended only —
- * around 49 kB in total. Add
+ * Four rules for two families: both are variable fonts, so one file per subset
+ * covers every weight from 400 to 700. Latin and Latin Extended only. Add
  * `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>` to
  * your document head to open the connection earlier.
  */
 
+/* --- Plus Jakarta Sans --- */
 /* latin */
 @font-face {
 	font-family: 'Plus Jakarta Sans';
@@ -44,3 +44,30 @@
 		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
 		U+A720-A7FF;
 }
+
+/* --- Work Sans --- */
+/* latin */
+@font-face {
+	font-family: 'Work Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_fKDp.woff2) format('woff2');
+	unicode-range:
+		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+	font-family: 'Work Sans';
+	font-style: normal;
+	font-weight: 400 700;
+	font-display: swap;
+	src: url(https://fonts.gstatic.com/s/worksans/v24/QGYsz_wNahGAdqQ43Rh_cqDpp_k.woff2)
+		format('woff2');
+	unicode-range:
+		U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
+		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
+		U+A720-A7FF;
+}

package/dist/styles/paper/index.d.ts

@@ -76,7 +76,7 @@ export type { StepItem } from './Steps.svelte';
 export { default as Navbar } from './Navbar.svelte';
 export type { NavItem } from './Navbar.svelte';
 export { default as Sidebar } from './Sidebar.svelte';
-export type { SidebarItem, SidebarSection } from './Sidebar.svelte';
+export type { SidebarVariant, SidebarItem, SidebarSection } from './Sidebar.svelte';
 export { default as Footer } from './Footer.svelte';
 export type { FooterLink, FooterColumn } from './Footer.svelte';
 export { default as HeroSection } from './HeroSection.svelte';

package/dist/styles/paper/theme.css

@@ -78,16 +78,19 @@
 
 	/* --- type --- */
 	/*
-	 * Plus Jakarta Sans: rounded terminals, open counters, low contrast. Softer
-	 * than a system stack, which lands on Segoe UI for most readers and gives
-	 * paper's generous spacing nothing warm to sit in.
+	 * Work Sans sets running text in every style, so a project that swaps the
+	 * word after `@nqmcreative/ui/` keeps the same reading rhythm and only the
+	 * headings change voice.
 	 *
-	 * One variable file covers 400 to 700, so this costs a single request per
-	 * subset — see `fonts.css`. Everything degrades to the system stack if that
-	 * file is not imported, so the webfont stays optional.
+	 * Plus Jakarta Sans keeps the headings: rounded terminals, open counters,
+	 * low contrast — softer than a system stack, which lands on Segoe UI for
+	 * most readers and gives paper's generous spacing nothing warm to sit in.
+	 *
+	 * Both are variable files, one request per subset — see `fonts.css`.
+	 * Everything degrades to the system stack if that file is not imported, so
+	 * the webfonts stay optional.
 	 */
-	--font-sans:
-		'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-sans: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	--font-heading:
 		'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

package/dist/styles/sprout/Accordion.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends HTMLAttributes<HTMLDivElement> {
+		children: Snippet;
+	}
+
+	let { class: className = '', children, ...rest }: Props = $props();
+</script>
+
+<div
+	class="flex flex-col overflow-hidden rounded-[20px] border border-hairline bg-bg {className}"
+	{...rest}
+>
+	{@render children()}
+</div>

package/dist/styles/sprout/Accordion.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    children: Snippet;
+}
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/styles/sprout/AccordionItem.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { toneText, type Tone } from '../../core/tones.js';
+
+	interface Props extends HTMLAttributes<HTMLDetailsElement> {
+		title: string;
+		open?: boolean;
+		tone?: Tone;
+		/** Short text on the right of the summary row. */
+		meta?: string;
+		children: Snippet;
+	}
+
+	let {
+		title,
+		open = $bindable(false),
+		tone = 'brand',
+		meta,
+		class: className = '',
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<details bind:open class="group border-b border-hairline last:border-b-0 {className}" {...rest}>
+	<summary
+		class="flex cursor-pointer list-none items-center gap-4 px-4 py-3.5 font-sans text-sm font-medium text-text transition-colors duration-150 ease-brand-out select-none hover:bg-bg-alt focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-current [&::-webkit-details-marker]:hidden"
+	>
+		<span class="flex-1">{title}</span>
+		{#if meta}<span class="text-[13px] font-normal text-text-muted">{meta}</span>{/if}
+		<svg
+			class="size-4 shrink-0 transition-transform duration-200 ease-brand-out group-open:rotate-180 {toneText[
+				tone
+			]}"
+			viewBox="0 0 16 16"
+			fill="none"
+			aria-hidden="true"
+		>
+			<path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+		</svg>
+	</summary>
+	<div class="px-4 pb-4 font-sans text-sm leading-relaxed text-text-secondary">
+		{@render children()}
+	</div>
+</details>

package/dist/styles/sprout/AccordionItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../core/tones.js';
+interface Props extends HTMLAttributes<HTMLDetailsElement> {
+    title: string;
+    open?: boolean;
+    tone?: Tone;
+    /** Short text on the right of the summary row. */
+    meta?: string;
+    children: Snippet;
+}
+declare const AccordionItem: import("svelte").Component<Props, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;