@mystravil/hardpoint 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,72 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type ComboboxItem = {
+    value: string;
+    /** The option's text: what the default filter matches, and the field's text once chosen. */
+    label: string;
+    /** A second line in `--muted`. */
+    description?: string;
+    /**
+     * The heading the option sits under, as written; the default filter
+     * matches it too. Options with the same group share one heading, in the
+     * order each group first appears; options without one come first.
+     */
+    group?: string;
+    disabled?: boolean;
+};
+export type ComboboxItemSnippetProps = {
+    item: ComboboxItem;
+    selected: boolean;
+    highlighted: boolean;
+};
+export type ComboboxLabelBeside = boolean | 'medium' | 'expanded' | 'large';
+/** Whether an item stays in the list for the typed text (trimmed, never empty). */
+export type ComboboxFilter = (item: ComboboxItem, query: string) => boolean;
+/**
+ * Attributes and handlers not listed here go to the field control: the
+ * text input from 600px, the button that opens the sheet below.
+ */
+export type ComboboxProps = Omit<HTMLAttributes<HTMLElement>, 'children' | 'id'> & {
+    items: ComboboxItem[];
+    /** The chosen item's `value`; `''` for none. It changes only by choosing from the list. */
+    value?: string;
+    open?: boolean;
+    /** The caps field label above the field, and the sheet's title on compact widths. */
+    label: string;
+    /** Shown in `--muted` in the empty field and in the sheet's search input. Never the only label. */
+    placeholder?: string;
+    /** Guidance under the field in `--muted`, linked by `aria-describedby`. */
+    hint?: string;
+    /**
+     * The error to show under the field, with an icon, linked by
+     * `aria-describedby`; it sets `aria-invalid`. Say how to fix it.
+     */
+    error?: string;
+    disabled?: boolean;
+    /** Submits the value with a form, through a hidden input. */
+    name?: string;
+    /**
+     * The label beside the field instead of above it: always (`true`), or
+     * from a breakpoint up (`medium` 600px, `expanded` 900px, `large` 1200px).
+     * The hint and the error stay under the field.
+     */
+    labelBeside?: ComboboxLabelBeside;
+    /**
+     * Replaces the default filter: the label or the group contains the text,
+     * ignoring case and accents.
+     */
+    filter?: ComboboxFilter;
+    /** Shown in place of the options when nothing matches. */
+    emptyText?: string;
+    /** The sheet's close button name. */
+    closeLabel?: string;
+    /** The field control's id; the label points at it. */
+    id?: string;
+    /** The field control: the text input from 600px, the button below. */
+    ref?: HTMLElement | null;
+    /** Renders an option's content in place of its label and description. */
+    item?: Snippet<[ComboboxItemSnippetProps]>;
+};
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "ref" | "open">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/components/Dialog.svelte

@@ -0,0 +1,359 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import { Dialog as BitsDialog } from 'bits-ui';
+
+	export type DialogTriggerSnippetProps = {
+		/** Spread onto the button that opens the dialog. */
+		props: Record<string, unknown>;
+	};
+
+	export type DialogActionsSnippetProps = {
+		/** Closes the dialog; focus returns to what had it before. */
+		close: () => void;
+	};
+
+	/**
+	 * Attributes and handlers not listed here go to the dialog element (Bits
+	 * UI `Dialog.Content`), among them `onOpenAutoFocus`, `onCloseAutoFocus`,
+	 * `onEscapeKeydown` and `onInteractOutside`.
+	 */
+	export type DialogProps = Omit<
+		BitsDialog.ContentProps,
+		'child' | 'children' | 'forceMount' | 'ref' | 'title'
+	> & {
+		open?: boolean;
+		/** The caps title and the dialog's accessible name. */
+		title: string;
+		/** A line in `--muted` under the title, and the accessible description. */
+		description?: string;
+		/**
+		 * Below 600px, a full-screen dialog instead of a bottom sheet: for long
+		 * or complex forms. While the on-screen keyboard is up, it fills the
+		 * space above it. From 600px the dialog is centred either way. In
+		 * every form a press outside does not close it, so typed input is not
+		 * lost by accident; Escape and the close button still do.
+		 */
+		fullscreen?: boolean;
+		/** The button that opens the dialog: spread `props` onto it. */
+		trigger?: Snippet<[DialogTriggerSnippetProps]>;
+		/** The body, under the title and description. */
+		children?: Snippet;
+		/** The action row at the bottom, primary action last. */
+		actions?: Snippet<[DialogActionsSnippetProps]>;
+		/** The close button's accessible name. */
+		closeLabel?: string;
+		/** The dialog element. */
+		ref?: HTMLElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
+	import { fade, sheet } from '../motion/index.js';
+	import Scrim from './internal/Scrim.svelte';
+	import Sheet from './internal/Sheet.svelte';
+	import { followVisualViewport } from './internal/visual-viewport.svelte.js';
+
+	const uid = $props.id();
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		fullscreen = false,
+		trigger,
+		children,
+		actions,
+		closeLabel = 'Close',
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: DialogProps = $props();
+
+	const titleId = `${uid}-title`;
+	const descriptionId = `${uid}-description`;
+
+	// The form follows the width (BRIEF, Apps and phones: Overlays): a bottom
+	// sheet below 600px, or a full-screen dialog when asked; centred from
+	// 600px.
+	const wide = new MediaQuery('min-width: 600px', true);
+	const form = $derived(wide.current ? 'centred' : fullscreen ? 'fullscreen' : 'sheet');
+
+	let bodyNode = $state<HTMLElement | null>(null);
+
+	// The full-screen form follows the visual viewport while it is open, as
+	// the Sheet does (decided 2026-11-10; internal/visual-viewport.svelte.ts):
+	// while the on-screen keyboard shortens it, the panel's top sits on its
+	// top and the panel takes its height, so the title row, the body and the
+	// action row stay above the keyboard, and the focused field in the body
+	// stays in sight. A form that changes while open drops the keyboard line.
+	const viewport = followVisualViewport(
+		() => open && form === 'fullscreen',
+		() => (form === 'fullscreen' ? bodyNode : null)
+	);
+	const lifted = $derived(form === 'fullscreen' ? viewport.current : null);
+
+	// A fullscreen form ignores presses outside, so typed input is not lost;
+	// an app can override it through rest props. Bits UI also hands the
+	// option on in the content snippet's props; the snippet drops it there,
+	// because it is not an HTML attribute.
+
+	function close() {
+		open = false;
+	}
+
+	// The centred dialog fades in place; the full-screen one slides up like
+	// a sheet. Both at the dialog timing; reduced motion fades both.
+	function panel(node: Element) {
+		return form === 'fullscreen' ? sheet(node) : fade(node);
+	}
+</script>
+
+<BitsDialog.Root bind:open>
+	{#if trigger}
+		<BitsDialog.Trigger>
+			{#snippet child({ props })}
+				{@render trigger({ props })}
+			{/snippet}
+		</BitsDialog.Trigger>
+	{/if}
+
+	<BitsDialog.Portal>
+		<BitsDialog.Content
+			forceMount
+			bind:ref
+			aria-labelledby={titleId}
+			aria-describedby={description ? descriptionId : undefined}
+			interactOutsideBehavior={fullscreen ? 'ignore' : 'close'}
+			{...rest}
+		>
+			{#snippet child({ props: { interactOutsideBehavior: _, ...props }, open: shown })}
+				{#if form === 'sheet'}
+					<Sheet
+						{...props}
+						class={['hp-dialog', className]}
+						data-form="sheet"
+						open={shown}
+						layer="dialog"
+						{title}
+						{titleId}
+						titleTag="h2"
+						{closeLabel}
+						onclose={close}
+						footer={actions ? actionRow : undefined}
+					>
+						{@render body()}
+					</Sheet>
+				{:else}
+					<Scrim open={shown} layer="dialog" />
+					{#if shown}
+						<div
+							{...props}
+							class={['hp-dialog', className]}
+							data-form={form}
+							style:top={lifted ? `${lifted.top}px` : undefined}
+							style:bottom={lifted ? 'auto' : undefined}
+							style:height={lifted ? `${lifted.height}px` : undefined}
+							style:padding-bottom={lifted ? '0px' : undefined}
+							transition:panel
+						>
+							<div class="hp-dialog-head" data-form={form}>
+								<h2 id={titleId} class="hp-dialog-title hp-view-title">{title}</h2>
+								<button type="button" class="hp-dialog-close" aria-label={closeLabel} onclick={close}>
+									<svg
+										viewBox="0 0 16 16"
+										fill="none"
+										stroke="currentColor"
+										stroke-width="1.5"
+										stroke-linecap="square"
+										aria-hidden="true"
+									>
+										<path d="M3 3l10 10M13 3L3 13" />
+									</svg>
+								</button>
+							</div>
+							{@render body()}
+							{#if actions}
+								{@render actionRow()}
+							{/if}
+						</div>
+					{/if}
+				{/if}
+			{/snippet}
+		</BitsDialog.Content>
+	</BitsDialog.Portal>
+</BitsDialog.Root>
+
+{#snippet body()}
+	<div
+		class="hp-dialog-body"
+		data-form={form}
+		data-end={actions ? undefined : ''}
+		bind:this={bodyNode}
+	>
+		{#if description}
+			<p id={descriptionId} class="hp-dialog-description">{description}</p>
+		{/if}
+		{@render children?.()}
+	</div>
+{/snippet}
+
+{#snippet actionRow()}
+	<div class="hp-dialog-actions" data-form={form}>
+		{@render actions?.({ close })}
+	</div>
+{/snippet}
+
+<style>
+	/* ---- Centred (600px and up) and full screen (compact) --------------- */
+
+	.hp-dialog[data-form='centred'],
+	.hp-dialog[data-form='fullscreen'] {
+		position: fixed;
+		z-index: var(--layer-dialog);
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		background: var(--canvas);
+		color: var(--text);
+		overscroll-behavior: contain;
+		/* Bits UI may have turned pointer events off on <body>. */
+		pointer-events: auto;
+	}
+
+	/* A square black panel with a 3:1 boundary, centred in the safe area. */
+	.hp-dialog[data-form='centred'] {
+		inset: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+			env(safe-area-inset-left);
+		width: min(560px, 100% - 2 * var(--gutter));
+		height: fit-content;
+		max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2 * var(--space-8));
+		margin: auto;
+		border: 1px solid var(--border-control);
+	}
+
+	/* The whole screen, inside the safe areas. While the on-screen keyboard
+	   is up, the visual viewport above it, without the bottom safe area,
+	   which the keyboard covers (set inline). */
+	.hp-dialog[data-form='fullscreen'] {
+		inset: 0;
+		padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+			env(safe-area-inset-left);
+	}
+
+	/* Title row: the caps title, then the close button at the end. A long
+	   title wraps (200 percent zoom) and the button stays on its first line:
+	   the title's padding centres that line on the button, so a single line
+	   sits where the row centred it before. The title's clip stays: it keeps
+	   the first glyph's antialiasing inside the text edge, as before. */
+	.hp-dialog-head {
+		flex: none;
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) auto;
+		align-items: start;
+		gap: var(--space-2);
+	}
+	.hp-dialog-head[data-form='centred'] {
+		padding: var(--space-4) var(--space-4) 0 var(--space-6);
+	}
+	/* The shell header's height, so the form reads as its own view. */
+	.hp-dialog-head[data-form='fullscreen'] {
+		min-height: var(--header-height);
+		padding: 0 var(--space-1) 0 var(--gutter);
+	}
+	.hp-dialog-title {
+		overflow: hidden;
+		padding-block: calc((var(--control-height) - 1lh) / 2);
+		overflow-wrap: anywhere;
+	}
+	.hp-dialog-head[data-form='fullscreen'] .hp-dialog-title {
+		padding-block: calc((var(--header-height) - 1lh) / 2);
+	}
+	.hp-dialog-head[data-form='fullscreen'] .hp-dialog-close {
+		margin-block: calc((var(--header-height) - var(--control-height)) / 2);
+	}
+
+	.hp-dialog-close {
+		display: grid;
+		place-items: center;
+		/* 36px on fine pointers, 44px on coarse. */
+		width: var(--control-height);
+		height: var(--control-height);
+		padding: 0;
+		border: 0;
+		background: transparent;
+		color: var(--text);
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.hp-dialog-close svg {
+		width: var(--space-4);
+		height: var(--space-4);
+	}
+	.hp-dialog-close:active {
+		background: var(--surface-raised);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.hp-dialog-close {
+			transition: background-color var(--dur-hover) var(--settle);
+		}
+		.hp-dialog-close:hover {
+			background: var(--surface-hover);
+		}
+		.hp-dialog-close:active {
+			background: var(--surface-raised);
+			transition-duration: var(--dur-press);
+		}
+	}
+
+	/* ---- Body and actions, in every form -------------------------------- */
+
+	/* The top padding keeps a first field's focus contour (4px out, 2px
+	   wide) inside the scrolling box. The scroll padding keeps a focused
+	   field's caret 8px clear of the action row when the browser reveals it,
+	   as when a TextArea grows while someone types. */
+	.hp-dialog-body {
+		display: grid;
+		align-content: start;
+		gap: var(--space-4);
+		min-width: 0;
+		padding: var(--space-2) var(--gutter);
+		scroll-padding-block: var(--space-2);
+		font-size: var(--type-body);
+		line-height: 24px;
+	}
+	/* The sheet's body scrolls itself; these scroll inside the panel. */
+	.hp-dialog-body[data-form='centred'],
+	.hp-dialog-body[data-form='fullscreen'] {
+		flex: 1 1 auto;
+		min-height: 0;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+	.hp-dialog-body[data-form='centred'] {
+		padding-inline: var(--space-6);
+	}
+	/* Without an action row the body ends the panel. */
+	.hp-dialog-body[data-end] {
+		padding-bottom: var(--space-4);
+	}
+	.hp-dialog-body[data-form='centred'][data-end] {
+		padding-bottom: var(--space-6);
+	}
+	.hp-dialog-description {
+		color: var(--muted);
+	}
+
+	/* Actions sit at the end, primary last, 8px apart. */
+	.hp-dialog-actions {
+		flex: none;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: var(--space-2);
+		padding: var(--space-4) var(--gutter);
+	}
+	.hp-dialog-actions[data-form='centred'] {
+		padding: var(--space-6);
+	}
+</style>

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import { Dialog as BitsDialog } from 'bits-ui';
+export type DialogTriggerSnippetProps = {
+    /** Spread onto the button that opens the dialog. */
+    props: Record<string, unknown>;
+};
+export type DialogActionsSnippetProps = {
+    /** Closes the dialog; focus returns to what had it before. */
+    close: () => void;
+};
+/**
+ * Attributes and handlers not listed here go to the dialog element (Bits
+ * UI `Dialog.Content`), among them `onOpenAutoFocus`, `onCloseAutoFocus`,
+ * `onEscapeKeydown` and `onInteractOutside`.
+ */
+export type DialogProps = Omit<BitsDialog.ContentProps, 'child' | 'children' | 'forceMount' | 'ref' | 'title'> & {
+    open?: boolean;
+    /** The caps title and the dialog's accessible name. */
+    title: string;
+    /** A line in `--muted` under the title, and the accessible description. */
+    description?: string;
+    /**
+     * Below 600px, a full-screen dialog instead of a bottom sheet: for long
+     * or complex forms. While the on-screen keyboard is up, it fills the
+     * space above it. From 600px the dialog is centred either way. In
+     * every form a press outside does not close it, so typed input is not
+     * lost by accident; Escape and the close button still do.
+     */
+    fullscreen?: boolean;
+    /** The button that opens the dialog: spread `props` onto it. */
+    trigger?: Snippet<[DialogTriggerSnippetProps]>;
+    /** The body, under the title and description. */
+    children?: Snippet;
+    /** The action row at the bottom, primary action last. */
+    actions?: Snippet<[DialogActionsSnippetProps]>;
+    /** The close button's accessible name. */
+    closeLabel?: string;
+    /** The dialog element. */
+    ref?: HTMLElement | null;
+};
+declare const Dialog: import("svelte").Component<DialogProps, {}, "ref" | "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Disclosure.svelte

@@ -0,0 +1,201 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { Collapsible } from 'bits-ui';
+
+	export type DisclosureTitleElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+	/**
+	 * Attributes and handlers not listed here (`id`, `aria-*`, `data-*`,
+	 * `onOpenChange`) go to the root element.
+	 */
+	export type DisclosureProps = Omit<Collapsible.RootProps, 'child' | 'children' | 'open' | 'ref' | 'title'> & {
+		/** The trigger's text, as written. It never takes caps. */
+		title: string;
+		/** Whether the content shows. Bindable. */
+		open?: boolean;
+		/**
+		 * Wraps the trigger in a heading of this level, so the section shows
+		 * in a screen reader's heading list. Pick the level that fits the
+		 * page's outline. Without it the trigger stands alone.
+		 */
+		titleAs?: DisclosureTitleElement;
+		disabled?: boolean;
+		/** The root element. */
+		ref?: HTMLDivElement | null;
+		/** The content. */
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Collapsible as BitsCollapsible } from 'bits-ui';
+	import { duration } from '../motion/transitions.js';
+
+	let {
+		title,
+		open = $bindable(false),
+		titleAs,
+		disabled = false,
+		ref = $bindable(null),
+		class: className,
+		children,
+		...rest
+	}: DisclosureProps = $props();
+
+	let body = $state<HTMLDivElement>();
+	/** The last `open` this component saw, so only a change fades. */
+	let was = untrack(() => open);
+
+	// Height snaps: the content is there at its full size on the first
+	// frame, and its text fades in. Opacity only, so it also runs under
+	// reduced motion. Never on first render: `was` starts at the first
+	// value of `open`. The duration and the curve are read now, so a token
+	// retuned on <html> applies. A fade that is still running when the
+	// section closes is cancelled, so closing is a cut.
+	$effect(() => {
+		const now = open;
+		if (now === was) return;
+		was = now;
+		untrack(() => {
+			if (!body) return;
+			for (const a of body.getAnimations()) a.cancel();
+			if (!now) return;
+			const ms = duration(body, '--dur-expand');
+			if (ms <= 0) return;
+			const settle = getComputedStyle(body).getPropertyValue('--settle').trim();
+			body.animate(
+				{ opacity: [0, 1] },
+				{ duration: ms, easing: CSS.supports('transition-timing-function', settle) ? settle : 'ease-out' }
+			);
+		});
+	});
+</script>
+
+{#snippet trigger()}
+	<BitsCollapsible.Trigger class="hp-disclosure-trigger hp-dense">{title}</BitsCollapsible.Trigger>
+{/snippet}
+
+<!--
+	One expandable section on Bits UI Collapsible. The trigger is a button
+	with aria-expanded and aria-controls (the WAI disclosure pattern); with
+	`titleAs` it sits inside a heading. Opening snaps the height and fades
+	the content in over --dur-expand; closing cuts. Closed content stays in
+	the document as hidden="until-found", so a browser that supports it finds
+	text in it and opens the section (Bits UI's beforematch handler). A browser
+	without it treats the attribute as plain hidden: the closed content is
+	not searchable, and the trigger is the only way in. The attribute is set
+	here, not by Bits UI, so closing hides the content in the same frame.
+-->
+<BitsCollapsible.Root bind:open bind:ref {disabled} class={['hp-disclosure', className]} {...rest}>
+	{#if titleAs}
+		<svelte:element this={titleAs} class="heading">{@render trigger()}</svelte:element>
+	{:else}
+		{@render trigger()}
+	{/if}
+	<BitsCollapsible.Content hiddenUntilFound>
+		{#snippet child({ props })}
+			<div {...props} hidden={open ? undefined : 'until-found'} class="hp-disclosure-content">
+				<div class="body" bind:this={body}>
+					{@render children?.()}
+				</div>
+			</div>
+		{/snippet}
+	</BitsCollapsible.Content>
+</BitsCollapsible.Root>
+
+<style>
+	/* Stacked disclosures sit 8px apart. No dividers: structure from
+	   alignment. */
+	:global(.hp-disclosure + .hp-disclosure) {
+		margin-top: var(--space-2);
+	}
+
+	.heading {
+		margin: 0;
+		font: inherit;
+	}
+
+	/* A full-width row, title at the start, chevron at the end. The hover
+	   tint and the focus contour reach --bleed past the text edge, as table
+	   bands do, and the padding keeps the title on the page edge. It wraps
+	   a long title; it never truncates. */
+	:global(.hp-disclosure-trigger) {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--space-4);
+		box-sizing: border-box;
+		width: calc(100% + 2 * var(--bleed));
+		min-height: var(--control-height);
+		margin: 0 calc(-1 * var(--bleed));
+		padding: var(--space-2) var(--bleed);
+		border: 0;
+		background: transparent;
+		color: var(--text);
+		font-family: var(--sans);
+		font-weight: 500;
+		text-align: start;
+		overflow-wrap: anywhere;
+		cursor: pointer;
+		touch-action: manipulation;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	/* The select well's chevron: the same mask, 16px, --muted; it points up
+	   while open, with the list's timing (--dur-pop opening, --dur-pop-exit
+	   closing) and no turn under reduced motion. */
+	:global(.hp-disclosure-trigger::after) {
+		content: '';
+		flex: none;
+		width: 16px;
+		height: 16px;
+		background-color: var(--muted);
+		mask: var(--select-chevron) center / 16px 16px no-repeat;
+		transition: transform var(--dur-pop-exit) var(--settle);
+	}
+	:global(.hp-disclosure-trigger[aria-expanded='true']::after) {
+		transform: rotate(180deg);
+		transition-duration: var(--dur-pop);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		:global(.hp-disclosure-trigger::after) {
+			transition: none;
+		}
+	}
+
+	/* Hover: fine pointers only. The tint alone barely shows (1.03:1), so the
+	   title also underlines, as a tertiary Button's does. */
+	@media (hover: hover) and (pointer: fine) {
+		:global(.hp-disclosure-trigger) {
+			transition: background-color var(--dur-hover) var(--settle);
+		}
+		:global(.hp-disclosure-trigger:active:not(:disabled)) {
+			transition-duration: var(--dur-press);
+		}
+		:global(.hp-disclosure-trigger:hover:not(:disabled)) {
+			background-color: var(--surface-hover);
+			text-decoration: underline;
+			text-decoration-thickness: 1px;
+			text-underline-offset: 0.3em;
+		}
+	}
+	/* One step past the hover tint, so a press reads on a phone too. */
+	:global(.hp-disclosure-trigger:active:not(:disabled)) {
+		background-color: var(--surface-raised);
+	}
+
+	:global(.hp-disclosure-trigger:disabled) {
+		color: var(--muted);
+		cursor: not-allowed;
+	}
+	:global(.hp-disclosure-trigger:disabled::after) {
+		background-color: var(--border);
+	}
+
+	/* The padding sits on the inner box: closed content is hidden, and a
+	   hidden box still shows its own padding. */
+	.body {
+		padding: var(--space-1) 0 var(--space-3);
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { Collapsible } from 'bits-ui';
+export type DisclosureTitleElement = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+/**
+ * Attributes and handlers not listed here (`id`, `aria-*`, `data-*`,
+ * `onOpenChange`) go to the root element.
+ */
+export type DisclosureProps = Omit<Collapsible.RootProps, 'child' | 'children' | 'open' | 'ref' | 'title'> & {
+    /** The trigger's text, as written. It never takes caps. */
+    title: string;
+    /** Whether the content shows. Bindable. */
+    open?: boolean;
+    /**
+     * Wraps the trigger in a heading of this level, so the section shows
+     * in a screen reader's heading list. Pick the level that fits the
+     * page's outline. Without it the trigger stands alone.
+     */
+    titleAs?: DisclosureTitleElement;
+    disabled?: boolean;
+    /** The root element. */
+    ref?: HTMLDivElement | null;
+    /** The content. */
+    children?: Snippet;
+};
+declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "ref" | "open">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;