@mystravil/hardpoint 0.0.0-stage → 0.1.0

package/dist/components/EmptyState.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/**
+	 * `standard` (default): the title at the section-title size. `display`:
+	 * the title in Geist Pixel Square, as the screen's one display line.
+	 */
+	export type EmptyStateVariant = 'standard' | 'display';
+
+	/** The title's element: `p` by default, a heading where the state names a region of the page. */
+	export type EmptyStateTitleElement = 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+	export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		/** What is empty, as a short fixed line: `No projects yet`. Never transformed. */
+		title: string;
+		/** Why it is empty or what fills it, in the muted ink. */
+		description?: string;
+		/** The one clear next action: render a `Button` here. */
+		action?: Snippet;
+		titleAs?: EmptyStateTitleElement;
+		variant?: EmptyStateVariant;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		description,
+		action,
+		titleAs = 'p',
+		variant = 'standard',
+		class: className,
+		...rest
+	}: EmptyStateProps = $props();
+</script>
+
+<!--
+	A data view with nothing to show (BRIEF, Apps and phones: States): a title,
+	an optional description and one clear next action, aligned to the text
+	edge with no box around them. It sets no outer margin; the page or the
+	Table's `empty` snippet places it. Extra attributes and `class` go to the
+	root `div.hp-empty-state`.
+-->
+<div {...rest} class={['hp-empty-state', className]} data-variant={variant}>
+	<svelte:element
+		this={titleAs}
+		class={['hp-empty-state-title', variant === 'display' ? 'hp-pixel' : 'hp-section-title']}
+		>{title}</svelte:element
+	>
+	{#if description}
+		<p class="hp-empty-state-description">{description}</p>
+	{/if}
+	{#if action}
+		<div class="hp-empty-state-action">{@render action()}</div>
+	{/if}
+</div>
+
+<style>
+	.hp-empty-state {
+		display: grid;
+		justify-items: start;
+		min-width: 0;
+	}
+
+	.hp-empty-state-title {
+		max-width: 100%;
+		overflow-wrap: anywhere;
+	}
+
+	/* Reading text: 16px at every width, in the reading measure. */
+	.hp-empty-state-description {
+		max-width: var(--measure);
+		margin-top: var(--space-2);
+		color: var(--muted);
+		font-size: var(--type-body);
+		line-height: 24px;
+		overflow-wrap: anywhere;
+	}
+
+	/* The action is its own group: three times the gap inside the text. */
+	.hp-empty-state-action {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-2);
+		margin-top: var(--space-6);
+	}
+</style>

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

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * `standard` (default): the title at the section-title size. `display`:
+ * the title in Geist Pixel Square, as the screen's one display line.
+ */
+export type EmptyStateVariant = 'standard' | 'display';
+/** The title's element: `p` by default, a heading where the state names a region of the page. */
+export type EmptyStateTitleElement = 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type EmptyStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** What is empty, as a short fixed line: `No projects yet`. Never transformed. */
+    title: string;
+    /** Why it is empty or what fills it, in the muted ink. */
+    description?: string;
+    /** The one clear next action: render a `Button` here. */
+    action?: Snippet;
+    titleAs?: EmptyStateTitleElement;
+    variant?: EmptyStateVariant;
+};
+declare const EmptyState: import("svelte").Component<EmptyStateProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/components/ErrorState.svelte

@@ -0,0 +1,135 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/**
+	 * `standard` (default): the title at the section-title size. `display`:
+	 * the title in Geist Pixel Square, as the screen's one display line.
+	 */
+	export type ErrorStateVariant = 'standard' | 'display';
+
+	/** The title's element: `p` by default, a heading where the state names a region of the page. */
+	export type ErrorStateTitleElement = 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+	export type ErrorStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		/** What failed, as a short line: `Couldn't load projects`. Never transformed. */
+		title: string;
+		/** How to fix it: `Check your connection, then try again.` Errors never apologise. */
+		description?: string;
+		/** Shows a retry button that calls this. */
+		onretry?: () => void;
+		/** The retry button's label. Defaults to `Try again`. */
+		retryLabel?: string;
+		/** A fix that is not a retry, such as signing in again: render a `Button` here. It follows the retry button. */
+		action?: Snippet;
+		titleAs?: ErrorStateTitleElement;
+		variant?: ErrorStateVariant;
+	};
+</script>
+
+<script lang="ts">
+	import Button from './Button.svelte';
+
+	let {
+		title,
+		description,
+		onretry,
+		retryLabel = 'Try again',
+		action,
+		titleAs = 'p',
+		variant = 'standard',
+		class: className,
+		...rest
+	}: ErrorStateProps = $props();
+</script>
+
+<!--
+	A data view that failed to load, shown where its content would be (BRIEF,
+	Apps and phones: States): what failed, how to fix it, and a retry action.
+	The title carries an outlined square with a "!" in the status red, so the
+	state never rests on colour alone; the text stays in the two inks. The
+	title and description sit in a role="alert" region, so a screen reader
+	announces the failure when the state replaces the content; the actions
+	stay outside it. It sets no outer margin. Extra attributes and `class` go
+	to the root `div.hp-error-state`.
+-->
+<div {...rest} class={['hp-error-state', className]} data-variant={variant}>
+	<div class="hp-error-state-message" role="alert">
+		<svelte:element
+			this={titleAs}
+			class={['hp-error-state-title', variant === 'display' ? 'hp-pixel' : 'hp-section-title']}
+		>
+			<span class="hp-error-state-icon" aria-hidden="true">
+				<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor">
+					<path d="M1.5 1.5h13v13h-13z" />
+					<path d="M8 4v4M8 10v2" stroke-width="2" />
+				</svg>
+			</span>
+			<span>{title}</span>
+		</svelte:element>
+		{#if description}
+			<p class="hp-error-state-description">{description}</p>
+		{/if}
+	</div>
+	{#if onretry || action}
+		<div class="hp-error-state-actions">
+			{#if onretry}
+				<!-- type="button", so a retry inside a form never submits it. -->
+				<Button type="button" onclick={onretry}>{retryLabel}</Button>
+			{/if}
+			{@render action?.()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.hp-error-state {
+		display: grid;
+		justify-items: start;
+		min-width: 0;
+	}
+
+	.hp-error-state-message {
+		display: grid;
+		justify-items: start;
+		gap: var(--space-2);
+		max-width: 100%;
+	}
+
+	/* The icon hangs before the title's first line, as on a field error. */
+	.hp-error-state-title {
+		display: flex;
+		gap: var(--space-2);
+		max-width: 100%;
+		overflow-wrap: anywhere;
+	}
+	/* One line box high, so the icon centres on the first line of the title
+	   however it wraps. */
+	.hp-error-state-icon {
+		display: flex;
+		flex: none;
+		align-items: center;
+		height: 1lh;
+		color: var(--danger);
+	}
+	.hp-error-state-icon svg {
+		display: block;
+	}
+
+	/* Reading text: 16px at every width, in the reading measure. */
+	.hp-error-state-description {
+		max-width: var(--measure);
+		color: var(--muted);
+		font-size: var(--type-body);
+		line-height: 24px;
+		overflow-wrap: anywhere;
+	}
+
+	/* The actions are their own group: three times the gap inside the text. */
+	.hp-error-state-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-2);
+		margin-top: var(--space-6);
+	}
+</style>

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * `standard` (default): the title at the section-title size. `display`:
+ * the title in Geist Pixel Square, as the screen's one display line.
+ */
+export type ErrorStateVariant = 'standard' | 'display';
+/** The title's element: `p` by default, a heading where the state names a region of the page. */
+export type ErrorStateTitleElement = 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type ErrorStateProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    /** What failed, as a short line: `Couldn't load projects`. Never transformed. */
+    title: string;
+    /** How to fix it: `Check your connection, then try again.` Errors never apologise. */
+    description?: string;
+    /** Shows a retry button that calls this. */
+    onretry?: () => void;
+    /** The retry button's label. Defaults to `Try again`. */
+    retryLabel?: string;
+    /** A fix that is not a retry, such as signing in again: render a `Button` here. It follows the retry button. */
+    action?: Snippet;
+    titleAs?: ErrorStateTitleElement;
+    variant?: ErrorStateVariant;
+};
+declare const ErrorState: import("svelte").Component<ErrorStateProps, {}, "">;
+type ErrorState = ReturnType<typeof ErrorState>;
+export default ErrorState;

package/dist/components/KeyValueList.svelte

@@ -0,0 +1,114 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type KeyValueItem = {
+		/** The caps label in the first column. A fixed string the app defines. */
+		key: string;
+		/** The value in Geist Mono. */
+		value: string | number;
+	};
+
+	/** Items may carry extra fields (an `href`, a status) that the `value` snippet reads. */
+	export type KeyValueListProps<T extends KeyValueItem = KeyValueItem> = Omit<
+		HTMLAttributes<HTMLDListElement>,
+		'children'
+	> & {
+		items: T[];
+		/**
+		 * The label column's width from 600px up: any CSS width. Defaults to
+		 * `9rem`. Below 600px the label stacks over the value.
+		 */
+		keyWidth?: string;
+		/** Renders one value, for a link or a status. Default: the text. */
+		value?: Snippet<[T]>;
+	};
+</script>
+
+<script lang="ts" generics="T extends KeyValueItem = KeyValueItem">
+	import { onMount, untrack } from 'svelte';
+	import { useMotion } from '../motion/index.js';
+
+	let { items, keyWidth, value, class: className, ...rest }: KeyValueListProps<T> = $props();
+
+	// Expressive stagger (motion rule 7), as in Table: only the items of the
+	// first render enter, by their index. Any change to `items` (a new array
+	// or a changed length) ends the entrance, and so does its last animation.
+	const motion = useMotion();
+	const firstItems = untrack(() => items);
+	const firstCount = untrack(() => items.length);
+	let entering = $state.raw(motion.expressive);
+	let root: HTMLDListElement;
+
+	$effect.pre(() => {
+		if (items !== firstItems || items.length !== firstCount) entering = false;
+	});
+
+	onMount(() => {
+		if (!entering) return;
+		const running = root
+			.getAnimations({ subtree: true })
+			.filter((a) => a instanceof CSSAnimation && a.animationName === 'hp-enter');
+		Promise.allSettled(running.map((a) => a.finished)).then(() => {
+			entering = false;
+		});
+	});
+</script>
+
+<!--
+	A caps label column and a Geist Mono value column, without separators
+	(BRIEF, visual rule 6; da3-53). Compact widths stack each label over its
+	value. Extra attributes and `class` go to the <dl>.
+-->
+<dl
+	{...rest}
+	bind:this={root}
+	class={['hp-key-value-list', className]}
+	style:--key-value-list-key-width={keyWidth}
+>
+	{#each items as item, i}
+		<div class={[entering && 'hp-enter']} style:--i={entering ? i : undefined}>
+			<dt class="hp-label">{item.key}</dt>
+			<dd>{#if value}{@render value(item)}{:else}{item.value}{/if}</dd>
+		</div>
+	{/each}
+</dl>
+
+<style>
+	.hp-key-value-list {
+		display: grid;
+		gap: var(--space-3);
+	}
+	div {
+		display: grid;
+		/* matches the approved specimen */
+		gap: 2px;
+	}
+	dt {
+		color: var(--muted);
+	}
+	/* 16px on touch, the dense 14px on fine pointers. A long identifier or
+	   path breaks anywhere rather than widen the page. */
+	dd {
+		font-family: var(--mono);
+		font-size: var(--type-body);
+		line-height: 24px;
+		overflow-wrap: anywhere;
+	}
+	@media (pointer: fine) {
+		dd {
+			font-size: var(--type-dense);
+			line-height: 20px;
+		}
+	}
+	@media (min-width: 600px) {
+		.hp-key-value-list {
+			gap: var(--space-2);
+		}
+		div {
+			grid-template-columns: var(--key-value-list-key-width, 9rem) minmax(0, 1fr);
+			align-items: baseline;
+			gap: var(--space-4);
+		}
+	}
+</style>

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

@@ -0,0 +1,43 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type KeyValueItem = {
+    /** The caps label in the first column. A fixed string the app defines. */
+    key: string;
+    /** The value in Geist Mono. */
+    value: string | number;
+};
+/** Items may carry extra fields (an `href`, a status) that the `value` snippet reads. */
+export type KeyValueListProps<T extends KeyValueItem = KeyValueItem> = Omit<HTMLAttributes<HTMLDListElement>, 'children'> & {
+    items: T[];
+    /**
+     * The label column's width from 600px up: any CSS width. Defaults to
+     * `9rem`. Below 600px the label stacks over the value.
+     */
+    keyWidth?: string;
+    /** Renders one value, for a link or a status. Default: the text. */
+    value?: Snippet<[T]>;
+};
+declare function $$render<T extends KeyValueItem = KeyValueItem>(): {
+    props: KeyValueListProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends KeyValueItem = KeyValueItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends KeyValueItem = KeyValueItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends KeyValueItem = KeyValueItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const KeyValueList: $$IsomorphicComponent;
+type KeyValueList<T extends KeyValueItem = KeyValueItem> = InstanceType<typeof KeyValueList<T>>;
+export default KeyValueList;

package/dist/components/LoadRegion.svelte

@@ -0,0 +1,219 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type LoadRegionProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'placeholder'> & {
+		/** True while the content loads: the region shows `placeholder` and is `aria-busy`. */
+		loading: boolean;
+		/**
+		 * The text of the status line, such as `Loading tasks`, then `5 tasks`.
+		 * The line is visually hidden, stays mounted outside the region and is
+		 * a `role="status"` region, so each change is announced. Leave it empty
+		 * while an error state announces itself.
+		 */
+		status: string;
+		/**
+		 * The skeleton layout shown while loading, rendered inside an
+		 * `aria-hidden`, `inert` wrapper. Give it the content's own layout
+		 * container: during a reveal it lies under the content in a box of its
+		 * own, so a grid or gap set on the region would not reach it.
+		 */
+		placeholder: Snippet;
+		/** The content, and also any empty or error state. */
+		children: Snippet;
+		/** The region element. A page moves focus here when the content replaces the focused control. */
+		ref?: HTMLDivElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { duration } from '../motion/transitions.js';
+
+	let {
+		loading,
+		status,
+		placeholder,
+		children,
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: LoadRegionProps = $props();
+
+	// ---- Reveal (BRIEF, motion rule 2) -------------------------------------
+
+	// When a load ends after its skeletons became visible and --dur-reveal is
+	// more than 0ms, the content crossfades in over the skeletons for
+	// --dur-reveal on --settle. The placeholder stays mounted under the
+	// content, unchanged. The content lies on top on an opaque backdrop (the
+	// colour behind the region) and fades in from 0, so every pixel moves in
+	// a straight line from the placeholder's to the content's: a bar turns
+	// into its text, and a part drawn the same in both layers (a tag, a
+	// label, a table's band) does not change at all. Then the placeholder
+	// goes. At 0ms, for a load that ends within --skeleton-delay, on the
+	// first render and for any change that is not a load ending, the content
+	// replaces the placeholder in one frame. Opacity only: the skeletons
+	// mirror the layout, so nothing moves. Quiet motion, so it runs in both
+	// tiers; it is only a fade, so reduced motion keeps it.
+
+	type Phase = 'loading' | 'reveal' | 'content';
+	let phase = $state<Phase>(untrack(() => (loading ? 'loading' : 'content')));
+	// Counts loads. A new load remounts the placeholder, so its skeletons
+	// wait out --skeleton-delay again, also when it cuts a reveal short.
+	let load = $state(0);
+
+	/** When the running load began, or null between loads. */
+	let began: number | null = untrack(() => (loading ? performance.now() : null));
+	/** --skeleton-delay when the load began, as the skeletons read it; null until read. */
+	let delay: number | null = null;
+	/** The running reveal's timing, read from the region when the load ended. */
+	let timing: KeyframeAnimationOptions = {};
+
+	// Before the DOM update, so a reveal keeps the placeholder mounted (its
+	// skeletons stay visible) while the content mounts on top. Only `loading`
+	// is tracked.
+	$effect.pre(() => {
+		const busy = loading;
+		untrack(() => {
+			const node = ref;
+			if (busy) {
+				if (phase !== 'loading') {
+					began = performance.now();
+					delay = node ? duration(node, '--skeleton-delay') : null;
+					load += 1;
+					phase = 'loading';
+				}
+				return;
+			}
+			if (phase !== 'loading') return;
+			const elapsed = began === null ? -1 : performance.now() - began;
+			began = null;
+			// Read now, so a token retuned during the load applies.
+			const ms = node ? duration(node, '--dur-reveal') : 0;
+			const wait = delay ?? (node ? duration(node, '--skeleton-delay') : 0);
+			if (!node || ms <= 0 || elapsed < wait) {
+				phase = 'content';
+				return;
+			}
+			const settle = getComputedStyle(node).getPropertyValue('--settle').trim();
+			timing = {
+				duration: ms,
+				easing: CSS.supports('transition-timing-function', settle) ? settle : 'ease-out'
+			};
+			phase = 'reveal';
+		});
+	});
+
+	/** The solid colour behind `node`: the first background colour up the tree that is not transparent. */
+	function backdrop(node: Element): string {
+		for (let el: Element | null = node; el; el = el.parentElement) {
+			const colour = getComputedStyle(el).backgroundColor;
+			// Transparent is `rgba(…, 0)`, or `… / 0)` in the newer colour syntaxes.
+			if (colour !== 'transparent' && !/^rgba\(.*,\s*0\)$|\/\s*0\)$/.test(colour)) return colour;
+		}
+		// Nothing paints: the browser's canvas shows through.
+		return 'Canvas';
+	}
+
+	// After the DOM update, in the same flush, so the content's first frame
+	// is already at opacity 0. The cleanup cancels the fade when a new load
+	// starts or the region goes away.
+	$effect(() => {
+		if (phase !== 'reveal') return;
+		return untrack(() => {
+			const node = ref;
+			const content = node?.querySelector<HTMLElement>(':scope > .hp-load-region-content');
+			if (!node || !content) {
+				phase = 'content';
+				return;
+			}
+			content.style.backgroundColor = backdrop(node);
+			const fade = content.animate([{ opacity: 0 }, { opacity: 1 }], timing);
+			fade.onfinish = () => (phase = 'content');
+			return () => {
+				fade.cancel();
+				content.style.removeProperty('background-color');
+			};
+		});
+	});
+</script>
+
+<!--
+	A region that loads (BRIEF, motion rule 2): skeleton blocks while the
+	content loads, then the content. It owns the loading pattern of the
+	states docs: a visually hidden `role="status"` line before the region
+	that stays mounted, `aria-busy` on the region while `loading`, and the
+	`placeholder` in an `aria-hidden`, `inert` wrapper. When a load that
+	showed skeletons ends and `--dur-reveal` is more than 0ms, the content
+	crossfades in over the skeletons; see the script. Both layers are
+	`display: contents` at rest, so they add no box. During a reveal the
+	region is `position: relative`, the placeholder lies under the content
+	(`position: absolute; inset: 0`) and the content is a block on the
+	colour behind the region, so keep the region's own layout inside the
+	snippets and give their roots no outer margin. Focus is the page's job:
+	when the content replaces the focused control, the page moves focus to
+	`ref` or to the control needed next. Extra attributes and `class` go to
+	the region, `div.hp-load-region` (`tabindex="-1"`), which carries
+	`data-revealing` during a reveal.
+-->
+<p class="hp-visually-hidden" role="status">{status}</p>
+<div
+	{...rest}
+	bind:this={ref}
+	class={['hp-load-region', className]}
+	tabindex="-1"
+	aria-busy={loading}
+	data-revealing={phase === 'reveal' ? '' : undefined}
+>
+	{#key load}
+		{#if phase !== 'content'}
+			<div class="hp-load-region-placeholder" aria-hidden="true" inert>
+				{@render placeholder()}
+			</div>
+		{/if}
+	{/key}
+	{#if !loading}
+		<div class="hp-load-region-content">
+			{@render children()}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Focus lands here only from the page's own code, when the content
+	   replaces the focused control, as <main> takes it from the skip link:
+	   no contour, since the region is not a control. */
+	.hp-load-region:focus {
+		outline: none;
+	}
+	/* At rest neither layer adds a box. */
+	.hp-load-region-placeholder,
+	.hp-load-region-content {
+		display: contents;
+	}
+
+	/* ---- Reveal: the content over the placeholder ------------------------ */
+
+	.hp-load-region[data-revealing] {
+		position: relative;
+	}
+	/* Under the content, over the content's area. Its own stacking context
+	   keeps a sticky table band (z-index) under the content too. Taller
+	   placeholder rows are cut at the region's bottom edge; a band's bleed
+	   into the gutter stays. */
+	.hp-load-region[data-revealing] > .hp-load-region-placeholder {
+		display: block;
+		position: absolute;
+		inset: 0;
+		isolation: isolate;
+		overflow-x: visible;
+		overflow-y: clip;
+	}
+	/* A box for the fade, painted after the placeholder. The script gives it
+	   the colour behind the region, so it covers the placeholder as it fades
+	   in. */
+	.hp-load-region[data-revealing] > .hp-load-region-content {
+		display: block;
+		position: relative;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+export type LoadRegionProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'placeholder'> & {
+    /** True while the content loads: the region shows `placeholder` and is `aria-busy`. */
+    loading: boolean;
+    /**
+     * The text of the status line, such as `Loading tasks`, then `5 tasks`.
+     * The line is visually hidden, stays mounted outside the region and is
+     * a `role="status"` region, so each change is announced. Leave it empty
+     * while an error state announces itself.
+     */
+    status: string;
+    /**
+     * The skeleton layout shown while loading, rendered inside an
+     * `aria-hidden`, `inert` wrapper. Give it the content's own layout
+     * container: during a reveal it lies under the content in a box of its
+     * own, so a grid or gap set on the region would not reach it.
+     */
+    placeholder: Snippet;
+    /** The content, and also any empty or error state. */
+    children: Snippet;
+    /** The region element. A page moves focus here when the content replaces the focused control. */
+    ref?: HTMLDivElement | null;
+};
+declare const LoadRegion: import("svelte").Component<LoadRegionProps, {}, "ref">;
+type LoadRegion = ReturnType<typeof LoadRegion>;
+export default LoadRegion;