@vit-foundation/ui 0.7.0 → 0.10.0

package/dist/components/ui/Button.svelte

@@ -1,52 +1,147 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLButtonAttributes {
+	interface CommonProps {
 		/**
-		 * The submitting count of the remote form this button posts, or `null`
-		 * for a control that genuinely has no pending state — the classic
-		 * `action="?/…"` post, which has no count to read.
-		 *
-		 * Required and explicitly nullable, for the reason **field constraint**
-		 * gives: optional made "this control cannot be pending" and "nobody
-		 * thought about it" one value, and two submits had already taken the
-		 * second — both logout, both double-submittable. A count rather than a
-		 * boolean because that is what kit hands back, and `> 0` was the rule
-		 * twelve call sites re-derived. It belongs here, once.
+		 * A closed named set, not orthogonal booleans (the PageShell rationale).
+		 * `primary` is the brand fill and the default — the only look this
+		 * component had before variants existed, so old call sites render
+		 * byte-identically. `navy` and `ghost` come from the admin app.
 		 */
-		pending: number | null;
+		variant?: 'primary' | 'navy' | 'ghost';
+		size?: 'md' | 'sm';
 		children: Snippet;
 	}
 
-	let { pending, children, type = 'button', disabled = false, ...rest }: Props = $props();
+	type ButtonProps = CommonProps &
+		Omit<HTMLButtonAttributes, 'type'> & {
+			type?: 'button' | 'submit' | 'reset';
+			/**
+			 * The submitting count of the remote form this button posts, or `null`
+			 * for a control that genuinely has no pending state — the classic
+			 * `action="?/…"` post, which has no count to read.
+			 *
+			 * Required and explicitly nullable, for the reason **field constraint**
+			 * gives: optional made "this control cannot be pending" and "nobody
+			 * thought about it" one value, and two submits had already taken the
+			 * second — both logout, both double-submittable. A count rather than a
+			 * boolean because that is what kit hands back, and `> 0` was the rule
+			 * twelve call sites re-derived. It belongs here, once.
+			 */
+			pending: number | null;
+			href?: never;
+			download?: never;
+		};
+
+	type AnchorProps = CommonProps &
+		Omit<HTMLAnchorAttributes, 'download' | 'type'> & {
+			/**
+			 * Renders an anchor styled as a button (downloads, external tools).
+			 * An anchor has no form behind it, so the branch admits no `pending`
+			 * and no `disabled` — an unavailable action is a button's business.
+			 */
+			href: string;
+			download?: boolean;
+			pending?: never;
+			disabled?: never;
+			type?: never;
+		};
+
+	type Props = ButtonProps | AnchorProps;
+
+	let {
+		variant = 'primary',
+		size = 'md',
+		pending = null,
+		href = undefined,
+		download = false,
+		children,
+		type = 'button',
+		disabled = false,
+		...rest
+	}: Props = $props();
 
 	// `disabled` stays a separate prop: a button can be unavailable for a reason
 	// of its own — the Google button before consent — as well as while posting.
 	const isPending = $derived((pending ?? 0) > 0);
 </script>
 
-<button {type} {...rest} disabled={disabled || isPending} aria-busy={isPending || undefined}>
-	{@render children()}
-</button>
+{#if href !== undefined}
+	<a
+		class="button {variant} {size}"
+		{href}
+		download={download ? '' : undefined}
+		{...rest as HTMLAnchorAttributes}
+	>
+		{@render children()}
+	</a>
+{:else}
+	<button
+		class="button {variant} {size}"
+		{type}
+		{...rest as HTMLButtonAttributes}
+		disabled={disabled || isPending}
+		aria-busy={isPending || undefined}
+	>
+		{@render children()}
+	</button>
+{/if}
 
 <style>
-	button {
+	/* The `primary md` declarations reproduce the pre-variant component
+	   exactly — consumers of the old single look must not repaint. */
+	.button {
 		padding: var(--space-2) var(--space-4);
 		border: none;
 		border-radius: var(--radius);
-		background: var(--color-brand);
-		color: var(--color-surface);
 		font-weight: 600;
 		cursor: pointer;
-		transition: background var(--transition-fast);
+		transition:
+			background var(--transition-fast),
+			filter var(--transition-fast);
+	}
+
+	a.button {
+		display: inline-block;
+		text-decoration: none;
+		text-align: center;
+	}
+
+	.sm {
+		padding: var(--space-1) var(--space-3);
+		font-size: var(--text-sm);
 	}
 
-	button:hover {
+	.primary {
+		background: var(--color-brand);
+		color: var(--color-surface);
+	}
+
+	.primary:hover:not(:disabled) {
+		background: var(--color-navy);
+	}
+
+	.navy {
 		background: var(--color-navy);
+		color: var(--color-surface);
+	}
+
+	.navy:hover:not(:disabled) {
+		filter: brightness(1.25);
+	}
+
+	.ghost {
+		background: transparent;
+		color: var(--color-ink);
+		border: 1px solid var(--color-ink);
+	}
+
+	.ghost:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-ink) 8%, transparent);
 	}
 
-	button:disabled {
+	.button:disabled {
 		opacity: 0.6;
 		cursor: default;
 	}

package/dist/components/ui/Button.svelte.d.ts

@@ -1,6 +1,18 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
-interface Props extends HTMLButtonAttributes {
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+interface CommonProps {
+    /**
+     * A closed named set, not orthogonal booleans (the PageShell rationale).
+     * `primary` is the brand fill and the default — the only look this
+     * component had before variants existed, so old call sites render
+     * byte-identically. `navy` and `ghost` come from the admin app.
+     */
+    variant?: 'primary' | 'navy' | 'ghost';
+    size?: 'md' | 'sm';
+    children: Snippet;
+}
+type ButtonProps = CommonProps & Omit<HTMLButtonAttributes, 'type'> & {
+    type?: 'button' | 'submit' | 'reset';
     /**
      * The submitting count of the remote form this button posts, or `null`
      * for a control that genuinely has no pending state — the classic
@@ -14,8 +26,22 @@ interface Props extends HTMLButtonAttributes {
      * twelve call sites re-derived. It belongs here, once.
      */
     pending: number | null;
-    children: Snippet;
-}
+    href?: never;
+    download?: never;
+};
+type AnchorProps = CommonProps & Omit<HTMLAnchorAttributes, 'download' | 'type'> & {
+    /**
+     * Renders an anchor styled as a button (downloads, external tools).
+     * An anchor has no form behind it, so the branch admits no `pending`
+     * and no `disabled` — an unavailable action is a button's business.
+     */
+    href: string;
+    download?: boolean;
+    pending?: never;
+    disabled?: never;
+    type?: never;
+};
+type Props = ButtonProps | AnchorProps;
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/ui/Field.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { FieldConstraint } from '../../content/types.js';
+	import ActionLabel from '../../edit/ActionLabel.svelte';
+	import type { EditDescriptor } from '../../edit/types.js';
 
 	/** Attributes the control must spread (`{...attrs}`) to stay wired. */
 	interface ControlAttrs {
@@ -46,18 +48,37 @@
 		constraint: FieldConstraint | null;
 		/** Render the label visually hidden (surrounding context already labels it). */
 		hideLabel?: boolean;
+		/**
+		 * Edit descriptor for the LABEL's wording. While editing, only the
+		 * label swaps for editable text — an editable span is not a <label>,
+		 * so clicking it no longer focuses the control, and the control itself
+		 * stays rendered and live. Hidden labels are never offered.
+		 */
+		labelEdit?: EditDescriptor;
 		/** The input/textarea/select, spreading the given attrs. */
 		children: Snippet<[ControlAttrs]>;
 	}
 
-	let { id, label, field, constraint, hideLabel = false, children }: Props = $props();
+	let {
+		id,
+		label,
+		field,
+		constraint,
+		hideLabel = false,
+		labelEdit = undefined,
+		children
+	}: Props = $props();
 
 	const errorMessage = $derived(field.issues()?.[0]?.message);
 	const showError = $derived(errorMessage !== undefined);
 </script>
 
 <div class="field">
-	<label class:visually-hidden={hideLabel} for={id}>{label}</label>
+	<ActionLabel edit={hideLabel ? undefined : labelEdit} value={label}>
+		{#snippet control()}
+			<label class:visually-hidden={hideLabel} for={id}>{label}</label>
+		{/snippet}
+	</ActionLabel>
 	{@render children({
 		id,
 		'aria-describedby': showError ? `${id}-error` : undefined,

package/dist/components/ui/Field.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { FieldConstraint } from '../../content/types.js';
+import type { EditDescriptor } from '../../edit/types.js';
 /** Attributes the control must spread (`{...attrs}`) to stay wired. */
 interface ControlAttrs {
     id: string;
@@ -47,6 +48,13 @@ interface Props {
     constraint: FieldConstraint | null;
     /** Render the label visually hidden (surrounding context already labels it). */
     hideLabel?: boolean;
+    /**
+     * Edit descriptor for the LABEL's wording. While editing, only the
+     * label swaps for editable text — an editable span is not a <label>,
+     * so clicking it no longer focuses the control, and the control itself
+     * stays rendered and live. Hidden labels are never offered.
+     */
+    labelEdit?: EditDescriptor;
     /** The input/textarea/select, spreading the given attrs. */
     children: Snippet<[ControlAttrs]>;
 }

package/dist/components/ui/FilterChips.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import ActionLabel from '../../edit/ActionLabel.svelte';
+	import type { EditDescriptor } from '../../edit/types.js';
 	import GhostButton from './GhostButton.svelte';
 
 	interface Chip {
@@ -13,9 +15,16 @@
 		label: string;
 		/** Called with the toggled value, or null when the active chip is unselected. */
 		onchange: (value: string | null) => void;
+		/**
+		 * Edit descriptors for the chip LABELS — a function because the host
+		 * owns what a chip's wording is (a theme's localized name, a category
+		 * message). While editing, a chip with a descriptor renders as
+		 * editable text instead of a button (see ActionLabel).
+		 */
+		editFor?: (chip: Chip) => EditDescriptor | undefined;
 	}
 
-	let { chips, selected, label, onchange }: Props = $props();
+	let { chips, selected, label, onchange, editFor = undefined }: Props = $props();
 
 	function toggle(value: string): void {
 		onchange(selected === value ? null : value);
@@ -24,13 +33,17 @@
 
 <div class="chips" role="group" aria-label={label}>
 	{#each chips as chip (chip.value)}
-		<GhostButton
-			variant="chip"
-			aria-pressed={selected === chip.value}
-			onclick={() => toggle(chip.value)}
-		>
-			{chip.label}
-		</GhostButton>
+		<ActionLabel edit={editFor?.(chip)} value={chip.label}>
+			{#snippet control()}
+				<GhostButton
+					variant="chip"
+					aria-pressed={selected === chip.value}
+					onclick={() => toggle(chip.value)}
+				>
+					{chip.label}
+				</GhostButton>
+			{/snippet}
+		</ActionLabel>
 	{/each}
 </div>
 

package/dist/components/ui/FilterChips.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { EditDescriptor } from '../../edit/types.js';
 interface Chip {
     value: string;
     label: string;
@@ -9,6 +10,13 @@ interface Props {
     label: string;
     /** Called with the toggled value, or null when the active chip is unselected. */
     onchange: (value: string | null) => void;
+    /**
+     * Edit descriptors for the chip LABELS — a function because the host
+     * owns what a chip's wording is (a theme's localized name, a category
+     * message). While editing, a chip with a descriptor renders as
+     * editable text instead of a button (see ActionLabel).
+     */
+    editFor?: (chip: Chip) => EditDescriptor | undefined;
 }
 declare const FilterChips: import("svelte").Component<Props, {}, "">;
 type FilterChips = ReturnType<typeof FilterChips>;

package/dist/components/ui/Icon.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	/** Stroke-based 24×24 icon paths. A closed set: extending it is a package
+	 * change, so every consumer's `IconName` stays honest. */
+	const PATHS = {
+		home: 'M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z',
+		clock: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4v5l3.5 2',
+		gear: 'M12 9.5A2.5 2.5 0 1 0 12 14.5 2.5 2.5 0 0 0 12 9.5zm8-.5-1.8-.5a6.6 6.6 0 0 0-.6-1.4l.9-1.6-1.9-1.9-1.6.9c-.5-.3-.9-.5-1.4-.6L13 2h-2l-.5 1.8c-.5.2-1 .4-1.4.6l-1.6-.9-1.9 1.9.9 1.6c-.3.5-.5.9-.6 1.4L4 9v2l1.8.5c.2.5.4 1 .6 1.4l-.9 1.6 1.9 1.9 1.6-.9c.5.3.9.5 1.4.6L11 22h2l.5-1.8c.5-.2 1-.4 1.4-.6l1.6.9 1.9-1.9-.9-1.6c.3-.5.5-.9.6-1.4L20 15z',
+		pencil: 'M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19zm10.5-13.5l3 3',
+		trash:
+			'M5 7h14M10 7V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2m3 0v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7m3 4v6m4-6v6',
+		duplicate: 'M9 9h10v12H9zM5 15V3h10',
+		plus: 'M12 5v14M5 12h14',
+		'chevron-right': 'M9 5l7 7-7 7',
+		'chevron-left': 'M15 5l-7 7 7 7',
+		close: 'M6 6l12 12M18 6L6 18',
+		globe:
+			'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c-2.5 2.4-3.8 5.5-3.8 9s1.3 6.6 3.8 9c2.5-2.4 3.8-5.5 3.8-9S14.5 5.4 12 3z',
+		logout: 'M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 8l-4 4 4 4M6 12h10'
+	} as const;
+
+	export type IconName = keyof typeof PATHS;
+</script>
+
+<script lang="ts">
+	interface Props {
+		name: IconName;
+		size?: number;
+	}
+
+	let { name, size = 20 }: Props = $props();
+</script>
+
+<svg
+	viewBox="0 0 24 24"
+	width={size}
+	height={size}
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.8"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	aria-hidden="true"
+	focusable="false"
+>
+	<path d={PATHS[name]} />
+</svg>

package/dist/components/ui/Icon.svelte.d.ts

@@ -0,0 +1,24 @@
+/** Stroke-based 24×24 icon paths. A closed set: extending it is a package
+ * change, so every consumer's `IconName` stays honest. */
+declare const PATHS: {
+    readonly home: "M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-4v-6h-6v6H5a1 1 0 0 1-1-1z";
+    readonly clock: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 4v5l3.5 2";
+    readonly gear: "M12 9.5A2.5 2.5 0 1 0 12 14.5 2.5 2.5 0 0 0 12 9.5zm8-.5-1.8-.5a6.6 6.6 0 0 0-.6-1.4l.9-1.6-1.9-1.9-1.6.9c-.5-.3-.9-.5-1.4-.6L13 2h-2l-.5 1.8c-.5.2-1 .4-1.4.6l-1.6-.9-1.9 1.9.9 1.6c-.3.5-.5.9-.6 1.4L4 9v2l1.8.5c.2.5.4 1 .6 1.4l-.9 1.6 1.9 1.9 1.6-.9c.5.3.9.5 1.4.6L11 22h2l.5-1.8c.5-.2 1-.4 1.4-.6l1.6.9 1.9-1.9-.9-1.6c.3-.5.5-.9.6-1.4L20 15z";
+    readonly pencil: "M4 20l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L8 19zm10.5-13.5l3 3";
+    readonly trash: "M5 7h14M10 7V5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2m3 0v12a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7m3 4v6m4-6v6";
+    readonly duplicate: "M9 9h10v12H9zM5 15V3h10";
+    readonly plus: "M12 5v14M5 12h14";
+    readonly 'chevron-right': "M9 5l7 7-7 7";
+    readonly 'chevron-left': "M15 5l-7 7 7 7";
+    readonly close: "M6 6l12 12M18 6L6 18";
+    readonly globe: "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM3 12h18M12 3c-2.5 2.4-3.8 5.5-3.8 9s1.3 6.6 3.8 9c2.5-2.4 3.8-5.5 3.8-9S14.5 5.4 12 3z";
+    readonly logout: "M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4M10 8l-4 4 4 4M6 12h10";
+};
+export type IconName = keyof typeof PATHS;
+interface Props {
+    name: IconName;
+    size?: number;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/ui/IconButton.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import Icon, { type IconName } from './Icon.svelte';
+
+	interface Props {
+		icon: IconName;
+		/** Accessible name — icon-only buttons must say what they do. */
+		label: string;
+		disabled?: boolean;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let { icon, label, disabled = false, onclick }: Props = $props();
+</script>
+
+<button type="button" aria-label={label} title={label} {disabled} {onclick}>
+	<Icon name={icon} size={18} />
+</button>
+
+<style>
+	button {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.35rem;
+		border: none;
+		border-radius: 6px;
+		background: transparent;
+		color: var(--color-ink);
+		cursor: pointer;
+		transition: background var(--transition-fast);
+	}
+
+	button:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-ink) 8%, transparent);
+	}
+
+	button:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/ui/IconButton.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type IconName } from './Icon.svelte';
+interface Props {
+    icon: IconName;
+    /** Accessible name — icon-only buttons must say what they do. */
+    label: string;
+    disabled?: boolean;
+    onclick?: (event: MouseEvent) => void;
+}
+declare const IconButton: import("svelte").Component<Props, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/components/ui/Logo.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	interface Props {
+		/** Height of the head mark in px. */
+		size?: number;
+		/** Adds the "Brain VIT" wordmark under the mark. */
+		withWordmark?: boolean;
+	}
+
+	let { size = 32, withWordmark = false }: Props = $props();
+</script>
+
+<span class="logo">
+	<svg
+		viewBox="0 0 48 56"
+		width={size * (48 / 56)}
+		height={size}
+		aria-hidden={withWordmark ? undefined : true}
+		role={withWordmark ? 'img' : undefined}
+		focusable="false"
+	>
+		{#if withWordmark}<title>Brain VIT</title>{/if}
+		<path
+			d="M25 2c11.6 0 21 9.4 21 21 0 6.9-3.3 13-8.5 16.8V54H17v-9h-4.5A4.5 4.5 0 0 1 8 40.5V34H4.2c-1.7 0-2.7-1.9-1.7-3.3L8 22.4C9 11 16.2 2 25 2Z"
+			fill="currentColor"
+		/>
+		<g stroke="var(--color-surface)" stroke-width="3.2" stroke-linecap="round">
+			<line x1="26" y1="13" x2="26" y2="31" />
+			<line x1="18.2" y1="17.5" x2="33.8" y2="26.5" />
+			<line x1="18.2" y1="26.5" x2="33.8" y2="17.5" />
+		</g>
+	</svg>
+	{#if withWordmark}
+		<span class="wordmark"><em>Brain</em> <strong>VIT</strong></span>
+	{/if}
+</span>
+
+<style>
+	.logo {
+		display: inline-flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-2);
+		color: var(--color-ink);
+	}
+
+	.wordmark {
+		font-family: var(--font-serif);
+		font-size: 2.5rem;
+		line-height: 1;
+		letter-spacing: 0.01em;
+		white-space: nowrap;
+	}
+
+	.wordmark em {
+		color: var(--color-brand);
+		font-style: italic;
+		font-weight: 600;
+	}
+
+	.wordmark strong {
+		font-weight: 600;
+	}
+</style>

package/dist/components/ui/Logo.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Height of the head mark in px. */
+    size?: number;
+    /** Adds the "Brain VIT" wordmark under the mark. */
+    withWordmark?: boolean;
+}
+declare const Logo: import("svelte").Component<Props, {}, "">;
+type Logo = ReturnType<typeof Logo>;
+export default Logo;

package/dist/components/ui/Modal.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import IconButton from './IconButton.svelte';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		onclose: () => void;
+		/** Accessible name of the close control. A prop, not a UiMessages key:
+		 * `messages` is replaced wholesale by hosts, and a new required key
+		 * would break every existing catalog. */
+		closeLabel?: string;
+		children: Snippet;
+	}
+
+	let { open, title, onclose, closeLabel = 'Tanca', children }: Props = $props();
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	// Native <dialog>: showModal() traps focus and layers the backdrop; the
+	// cancel event covers Escape.
+	$effect(() => {
+		if (!dialog) return;
+		if (open && !dialog.open) dialog.showModal();
+		if (!open && dialog.open) dialog.close();
+	});
+
+	function onclick(event: MouseEvent) {
+		// Backdrop click: the dialog element itself is the target only outside
+		// the panel content.
+		if (event.target === dialog) onclose();
+	}
+</script>
+
+<dialog bind:this={dialog} oncancel={onclose} {onclick}>
+	<div class="panel">
+		<div class="top">
+			<h2>{title}</h2>
+			<IconButton icon="close" label={closeLabel} onclick={onclose} />
+		</div>
+		{@render children()}
+	</div>
+</dialog>
+
+<style>
+	dialog {
+		margin: auto;
+		border: none;
+		border-radius: var(--radius);
+		padding: 0;
+		background: var(--color-surface);
+		box-shadow: var(--shadow-2);
+		min-width: min(34rem, 90vw);
+	}
+
+	dialog::backdrop {
+		background: color-mix(in srgb, var(--color-ink) 45%, transparent);
+	}
+
+	.panel {
+		padding: var(--space-4) var(--space-5) var(--space-5);
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-4);
+	}
+
+	.top {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--space-3);
+	}
+
+	h2 {
+		font-weight: 600;
+		font-size: var(--text-lg);
+		margin: 0;
+	}
+</style>

package/dist/components/ui/Modal.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    open: boolean;
+    title: string;
+    onclose: () => void;
+    /** Accessible name of the close control. A prop, not a UiMessages key:
+     * `messages` is replaced wholesale by hosts, and a new required key
+     * would break every existing catalog. */
+    closeLabel?: string;
+    children: Snippet;
+}
+declare const Modal: import("svelte").Component<Props, {}, "">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;