@mystravil/hardpoint 0.0.0-stage → 0.2.0

package/dist/components/Notice.svelte

@@ -0,0 +1,262 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/** `ok`, `warn` or `danger`; absent means neutral information. The tone sets the mark's glyph and colour, never the text's. */
+	export type NoticeTone = 'ok' | 'warn' | 'danger';
+
+	/** The title's element: `p` by default, a heading where the notice names a region of the page. */
+	export type NoticeTitleElement = 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+	export type NoticeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+		tone?: NoticeTone;
+		/** A short line, as written, never transformed. A notice has a title, text, or both. */
+		title?: string;
+		/** The title's element. Defaults to `p`. */
+		titleAs?: NoticeTitleElement;
+		/** The text, in the muted ink. It may hold links and inline code. */
+		children?: Snippet;
+		/**
+		 * The app's `Button`s: at most two, the primary one last, and at most one
+		 * primary. A notice in a view that already shows its solid group uses
+		 * secondary or tertiary buttons.
+		 */
+		actions?: Snippet;
+		/** Adds a close button that calls this. The app removes the notice. */
+		onclose?: () => void;
+		/** The close button's accessible name. Defaults to `Dismiss`. */
+		closeLabel?: string;
+		/** The root `div`. */
+		ref?: HTMLDivElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import Button from './Button.svelte';
+
+	let {
+		tone,
+		title,
+		titleAs = 'p',
+		children,
+		actions,
+		onclose,
+		closeLabel = 'Dismiss',
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: NoticeProps = $props();
+</script>
+
+<!--
+	A persistent message in the page flow: something the user should know or
+	act on, which stays until the app removes it (the app renders it while
+	it applies and gives it `onclose` when the user may dismiss it). A
+	confirmation is a Toast and a failed view is an ErrorState.
+
+	The Toaster's box in the flow: black, the control boundary, square, as
+	wide as its container. A 16px outlined square before the first line
+	carries the tone: "i" (neutral, muted), a check (ok), "!" (warn, danger).
+	It is decorative, so the words carry the status. The title is 16px
+	weight 500 in the text ink, never caps; the text below it is muted, 16px
+	on touch and 14px with a mouse. The actions sit 12px under the text. A
+	notice with a title and actions but no text puts the actions at the end
+	of the title row, and wraps them under it when they do not fit. The close
+	button is at the top end.
+
+	It is not a live region. Pass `role="status"` for a notice that appears
+	while the user is on the page, `role="alert"` for an urgent one and
+	`role="note"` for supplementary content present from the start. It has
+	no motion: it appears and goes at once. Extra attributes and `class` go
+	to the root `div.hp-notice`.
+-->
+<div
+	bind:this={ref}
+	{...rest}
+	class={['hp-notice', className]}
+	data-tone={tone}
+	data-titled={title ? '' : undefined}
+	data-row={title && !children && actions ? '' : undefined}
+>
+	<span class="hp-notice-mark" aria-hidden="true">
+		<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor">
+			<path d="M1.5 1.5h13v13h-13z" />
+			{#if tone === 'ok'}
+				<path d="M4.5 8.2l2.7 2.7 4.3-5" stroke-width="2" />
+			{:else if tone}
+				<path d="M8 4v4M8 10v2" stroke-width="2" />
+			{:else}
+				<path d="M8 4v2M8 8v4" stroke-width="2" />
+			{/if}
+		</svg>
+	</span>
+	<div class="hp-notice-main">
+		{#if title || children}
+			<div class="hp-notice-content">
+				{#if title}
+					<svelte:element this={titleAs} class="hp-notice-title">{title}</svelte:element>
+				{/if}
+				{#if children}
+					<div class="hp-notice-body">{@render children()}</div>
+				{/if}
+			</div>
+		{/if}
+		{#if actions}
+			<div class="hp-notice-actions" data-after={children ? '' : undefined}>{@render actions()}</div>
+		{/if}
+	</div>
+	{#if onclose}
+		<Button
+			type="button"
+			variant="tertiary"
+			icon
+			class="hp-notice-close"
+			aria-label={closeLabel}
+			onclick={() => onclose()}
+		>
+			<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>
+	{/if}
+</div>
+
+<style>
+	/* The Toaster's box in the flow: black, the control boundary, square.
+	   --notice-line is the first line's height (the title's 24px, or the
+	   text's line when there is no title); --notice-lift is how far a
+	   control is taller than that line, halved. */
+	.hp-notice {
+		--notice-line: 24px;
+		--notice-text-line: 24px;
+		--notice-lift: calc((var(--control-height) - var(--notice-line)) / 2);
+
+		display: flex;
+		align-items: flex-start;
+		gap: var(--space-2);
+		box-sizing: border-box;
+		min-width: 0;
+		padding: var(--space-3);
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--text);
+		font-family: var(--sans);
+		font-size: var(--type-body);
+		line-height: var(--notice-text-line);
+	}
+
+	/* 16px where a coarse pointer reads it, the dense 14px on fine pointers. */
+	@media (pointer: fine) {
+		.hp-notice {
+			--notice-text-line: 20px;
+
+			font-size: var(--type-dense);
+		}
+	}
+
+	.hp-notice:not([data-titled]) {
+		--notice-line: var(--notice-text-line);
+	}
+
+	/* ---- The mark: an outlined square on the first line --------------- */
+
+	.hp-notice-mark {
+		display: flex;
+		flex: none;
+		align-items: center;
+		height: var(--notice-line);
+		color: var(--muted);
+	}
+	.hp-notice-mark svg {
+		display: block;
+	}
+	.hp-notice[data-tone='ok'] .hp-notice-mark {
+		color: var(--ok);
+	}
+	.hp-notice[data-tone='warn'] .hp-notice-mark {
+		color: var(--warn);
+	}
+	.hp-notice[data-tone='danger'] .hp-notice-mark {
+		color: var(--danger);
+	}
+
+	/* ---- Title, text and actions -------------------------------------- */
+
+	/* Wraps the actions under the content when they do not fit beside it. */
+	.hp-notice-main {
+		display: flex;
+		flex: 1 1 auto;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		gap: var(--space-3) var(--space-4);
+		min-width: 0;
+	}
+
+	.hp-notice-content {
+		display: grid;
+		flex: 1 1 auto;
+		gap: var(--space-1);
+		min-width: 0;
+	}
+
+	.hp-notice-title {
+		max-width: 100%;
+		color: var(--text);
+		font-size: var(--type-body);
+		font-weight: 500;
+		line-height: 24px;
+		overflow-wrap: anywhere;
+	}
+
+	.hp-notice-body {
+		max-width: var(--measure);
+		color: var(--muted);
+		overflow-wrap: anywhere;
+	}
+	.hp-notice-body :global(a) {
+		color: var(--text);
+	}
+	.hp-notice-body :global(p + p) {
+		margin-top: var(--space-2);
+	}
+
+	.hp-notice-actions {
+		display: flex;
+		flex: none;
+		flex-wrap: wrap;
+		gap: var(--space-2);
+		max-width: 100%;
+	}
+	/* Text above them: they take their own row. */
+	.hp-notice-actions[data-after] {
+		flex-basis: 100%;
+	}
+
+	/* ---- The close button: the Toaster's, at the top end -------------- */
+
+	/* Centred on the first line; the tertiary button has no edge, so it
+	   reaches into the padding. */
+	.hp-notice :global(.hp-notice-close) {
+		flex: none;
+		margin: calc(-1 * var(--notice-lift)) calc(-1 * var(--space-2)) 0 0;
+	}
+
+	/* A title row with actions is a control high, so the mark, the title and
+	   the close button centre on it. */
+	.hp-notice[data-row] .hp-notice-mark {
+		margin-top: var(--notice-lift);
+	}
+	.hp-notice[data-row] .hp-notice-content {
+		padding-top: var(--notice-lift);
+	}
+	.hp-notice[data-row] :global(.hp-notice-close) {
+		margin-top: 0;
+	}
+</style>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** `ok`, `warn` or `danger`; absent means neutral information. The tone sets the mark's glyph and colour, never the text's. */
+export type NoticeTone = 'ok' | 'warn' | 'danger';
+/** The title's element: `p` by default, a heading where the notice names a region of the page. */
+export type NoticeTitleElement = 'p' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type NoticeProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    tone?: NoticeTone;
+    /** A short line, as written, never transformed. A notice has a title, text, or both. */
+    title?: string;
+    /** The title's element. Defaults to `p`. */
+    titleAs?: NoticeTitleElement;
+    /** The text, in the muted ink. It may hold links and inline code. */
+    children?: Snippet;
+    /**
+     * The app's `Button`s: at most two, the primary one last, and at most one
+     * primary. A notice in a view that already shows its solid group uses
+     * secondary or tertiary buttons.
+     */
+    actions?: Snippet;
+    /** Adds a close button that calls this. The app removes the notice. */
+    onclose?: () => void;
+    /** The close button's accessible name. Defaults to `Dismiss`. */
+    closeLabel?: string;
+    /** The root `div`. */
+    ref?: HTMLDivElement | null;
+};
+declare const Notice: import("svelte").Component<NoticeProps, {}, "ref">;
+type Notice = ReturnType<typeof Notice>;
+export default Notice;

package/dist/components/Pagination.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** The current page, from 1. Bindable. */
+		page?: number;
+		/** The number of items. */
+		count: number;
+		/** Items per page. With the default 1, `count` is the number of pages. */
+		perPage?: number;
+		/** The navigation landmark's accessible name. */
+		label?: string;
+		/** The caps label before the page figure. */
+		pageLabel?: string;
+		previousLabel?: string;
+		nextLabel?: string;
+	};
+</script>
+
+<script lang="ts">
+	import { Pagination as BitsPagination } from 'bits-ui';
+
+	let {
+		page = $bindable(1),
+		count,
+		perPage = 1,
+		label = 'Pages',
+		pageLabel = 'Page',
+		previousLabel = 'Previous page',
+		nextLabel = 'Next page',
+		class: className,
+		...rest
+	}: PaginationProps = $props();
+
+	const pages = $derived(Math.max(1, Math.ceil(count / perPage)));
+
+	// Fewer items (a filter) can leave the page past the end; keep it in range.
+	$effect.pre(() => {
+		if (page > pages) page = pages;
+	});
+</script>
+
+<!--
+	The list view's one group of solid blocks: square titanium steps with
+	black arrows. Bits UI Pagination supplies the behaviour: disabled ends and
+	arrow keys between the steps.
+-->
+<BitsPagination.Root bind:page {count} {perPage}>
+	{#snippet child({ props, currentPage })}
+		<nav {...rest} {...props} class={['hp-pagination', className]} aria-label={label}>
+			<span class="hp-label">{pageLabel}</span>
+			<span class="figure" aria-live="polite">{currentPage} / {pages}</span>
+			<span class="steps">
+				<BitsPagination.PrevButton>
+					{#snippet child({ props })}
+						<button {...props} class="step" data-direction="previous" aria-label={previousLabel}
+						></button>
+					{/snippet}
+				</BitsPagination.PrevButton>
+				<BitsPagination.NextButton>
+					{#snippet child({ props })}
+						<button {...props} class="step" data-direction="next" aria-label={nextLabel}></button>
+					{/snippet}
+				</BitsPagination.NextButton>
+			</span>
+		</nav>
+	{/snippet}
+</BitsPagination.Root>
+
+<style>
+	.hp-pagination {
+		display: flex;
+		align-items: center;
+		gap: var(--space-4);
+	}
+	.figure {
+		font-family: var(--mono);
+		font-variant-numeric: tabular-nums;
+	}
+	/* 8px apart, so a focus contour (4px out) never overlaps the neighbour. */
+	.steps {
+		display: flex;
+		gap: var(--space-2);
+		margin-left: var(--space-2);
+	}
+
+	/* 24px on fine pointers, 44px on coarse ones (--hit-target). A
+	   disabled step drops to the band grey. */
+	.step {
+		display: grid;
+		place-items: center;
+		width: var(--hit-target);
+		height: var(--hit-target);
+		padding: 0;
+		border: 0;
+		background: var(--accent);
+		color: var(--canvas);
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+	.step::before {
+		content: '';
+		width: 6px;
+		height: 8px;
+		background: currentColor;
+	}
+	@media (pointer: coarse) {
+		.step::before {
+			width: 8px;
+			height: 12px;
+		}
+	}
+	.step[data-direction='previous']::before {
+		clip-path: polygon(100% 0, 0 50%, 100% 100%);
+	}
+	.step[data-direction='next']::before {
+		clip-path: polygon(0 0, 100% 50%, 0 100%);
+	}
+	.step:disabled {
+		background: var(--surface-band);
+		color: var(--muted);
+		cursor: default;
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.step:not(:disabled):hover {
+			background: var(--muted);
+		}
+	}
+	.step:not(:disabled):active {
+		background: var(--muted);
+	}
+</style>

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** The current page, from 1. Bindable. */
+    page?: number;
+    /** The number of items. */
+    count: number;
+    /** Items per page. With the default 1, `count` is the number of pages. */
+    perPage?: number;
+    /** The navigation landmark's accessible name. */
+    label?: string;
+    /** The caps label before the page figure. */
+    pageLabel?: string;
+    previousLabel?: string;
+    nextLabel?: string;
+};
+declare const Pagination: import("svelte").Component<PaginationProps, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Popover.svelte

@@ -0,0 +1,222 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+	import { Popover as BitsPopover } from 'bits-ui';
+
+	export type PopoverTriggerSnippetProps = {
+		/** Spread onto the button that opens the popover. */
+		props: Record<string, unknown>;
+	};
+
+	export type PopoverActionsSnippetProps = {
+		/** Closes the popover; focus returns to the trigger. */
+		close: () => void;
+	};
+
+	/**
+	 * Attributes and handlers not listed here go to the panel (Bits UI
+	 * `Popover.Content`), among them `side` (default `bottom`), `align`
+	 * (default `start`), `sideOffset`, `onOpenAutoFocus`, `onCloseAutoFocus`,
+	 * `onEscapeKeydown` and `onInteractOutside`. The placement props apply
+	 * from 600px only; below it the panel is a bottom sheet.
+	 */
+	export type PopoverProps = Omit<
+		BitsPopover.ContentProps,
+		'child' | 'children' | 'forceMount' | 'ref' | 'title'
+	> & {
+		open?: boolean;
+		/** The caps title, and the panel's accessible name. */
+		title: string;
+		/** The button the panel is anchored to: spread `props` onto it. */
+		trigger: Snippet<[PopoverTriggerSnippetProps]>;
+		/** The body, under the title. */
+		children: Snippet;
+		/** The action row at the bottom, primary action last. */
+		actions?: Snippet<[PopoverActionsSnippetProps]>;
+		/** The sheet's close button's accessible name (below 600px). */
+		closeLabel?: string;
+		/** The panel element. */
+		ref?: HTMLElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { MediaQuery } from 'svelte/reactivity';
+	import { pop } from '../motion/index.js';
+	import Sheet from './internal/Sheet.svelte';
+
+	const uid = $props.id();
+
+	let {
+		open = $bindable(false),
+		title,
+		trigger,
+		children,
+		actions,
+		closeLabel = 'Close',
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: PopoverProps = $props();
+
+	const titleId = `${uid}-title`;
+
+	// The form follows the width (BRIEF, Apps and phones: Overlays): a panel
+	// anchored to the trigger from 600px, the shared bottom sheet below it.
+	const wide = new MediaQuery('min-width: 600px', true);
+	const form = $derived(wide.current ? 'popover' : 'sheet');
+
+	function close() {
+		open = false;
+	}
+</script>
+
+<!--
+	Bits UI gives the trigger aria-haspopup="dialog", aria-expanded and
+	aria-controls; the panel takes role="dialog" and its title as its name.
+	Focus moves into the panel on open (to the sheet's close button on
+	compact) and returns to the trigger on close. Escape, a press outside,
+	the trigger and, on compact, the close button and a swipe down close it.
+-->
+<BitsPopover.Root bind:open>
+	<BitsPopover.Trigger>
+		{#snippet child({ props })}
+			{@render trigger({ props })}
+		{/snippet}
+	</BitsPopover.Trigger>
+
+	<BitsPopover.Portal>
+		{#if wide.current}
+			<BitsPopover.Content
+				forceMount
+				bind:ref
+				role="dialog"
+				aria-labelledby={titleId}
+				side="bottom"
+				align="start"
+				sideOffset={8}
+				collisionPadding={8}
+				{...rest}
+			>
+				{#snippet child({ wrapperProps, props, open: shown })}
+					{#if shown}
+						<div {...wrapperProps}>
+							<div {...props} class={['hp-popover', className]} data-form="popover" transition:pop>
+								<p id={titleId} class="hp-popover-title hp-label">{title}</p>
+								{@render body()}
+								{#if actions}
+									{@render actionRow()}
+								{/if}
+							</div>
+						</div>
+					{/if}
+				{/snippet}
+			</BitsPopover.Content>
+		{:else}
+			<BitsPopover.ContentStatic forceMount preventScroll bind:ref role="dialog" aria-labelledby={titleId} {...rest}>
+				{#snippet child({ props, open: shown })}
+					<Sheet
+						{...props}
+						class={['hp-popover', className]}
+						data-form="sheet"
+						open={shown}
+						layer="popover"
+						{title}
+						{titleId}
+						{closeLabel}
+						onclose={close}
+						footer={actions ? actionRow : undefined}
+					>
+						{@render body()}
+					</Sheet>
+				{/snippet}
+			</BitsPopover.ContentStatic>
+		{/if}
+	</BitsPopover.Portal>
+</BitsPopover.Root>
+
+{#snippet body()}
+	<div class="hp-popover-body" data-form={form} data-end={actions ? undefined : ''}>
+		{@render children()}
+	</div>
+{/snippet}
+
+{#snippet actionRow()}
+	<div class="hp-popover-actions" data-form={form}>
+		{@render actions?.({ close })}
+	</div>
+{/snippet}
+
+<style>
+	/* ---- Popover (600px and up): a black panel under its trigger --------- */
+
+	/* On the popover layer (tokens.css), over the shell and over an open
+	   dialog. Bits UI copies the z-index to the positioned wrapper. As wide
+	   as its content up to --popover-width, 360px unless set (an app sets it
+	   with a class on the Popover and a rule in its stylesheet; the default
+	   is the var() fallback, so any rule wins whatever its specificity; the
+	   sheet ignores it), and as tall as the space beside the trigger; the
+	   body scrolls inside. */
+	.hp-popover {
+		position: relative;
+		z-index: var(--layer-popover);
+		display: flex;
+		flex-direction: column;
+		box-sizing: border-box;
+		width: max-content;
+		max-width: min(var(--popover-width, 360px), var(--bits-popover-content-available-width));
+		max-height: var(--bits-popover-content-available-height);
+		border: 1px solid var(--border-control);
+		background: var(--canvas);
+		color: var(--text);
+		overscroll-behavior: contain;
+	}
+
+	/* A caps label names the panel, in the main ink, so the muted caps
+	   labels of fields inside it read as one level down. */
+	.hp-popover-title {
+		flex: none;
+		margin: 0;
+		padding: var(--space-3) var(--space-4) 0;
+	}
+
+	/* ---- Body and actions, in both forms -------------------------------- */
+
+	/* The top padding keeps a first control's focus contour (4px out, 2px
+	   wide) inside the scrolling box. */
+	.hp-popover-body {
+		display: grid;
+		align-content: start;
+		gap: var(--space-4);
+		min-width: 0;
+		font-size: var(--type-body);
+		line-height: 24px;
+	}
+	.hp-popover-body[data-form='popover'] {
+		flex: 1 1 auto;
+		min-height: 0;
+		padding: var(--space-3) var(--space-4);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+	/* The sheet's body scrolls itself. */
+	.hp-popover-body[data-form='sheet'] {
+		padding: var(--space-2) var(--gutter);
+	}
+	/* Without an action row the body ends the panel. */
+	.hp-popover-body[data-end] {
+		padding-bottom: var(--space-4);
+	}
+
+	/* Actions sit at the end, primary last, 8px apart. */
+	.hp-popover-actions {
+		flex: none;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: var(--space-2);
+		padding: var(--space-4) var(--gutter);
+	}
+	.hp-popover-actions[data-form='popover'] {
+		padding: var(--space-1) var(--space-4) var(--space-4);
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import { Popover as BitsPopover } from 'bits-ui';
+export type PopoverTriggerSnippetProps = {
+    /** Spread onto the button that opens the popover. */
+    props: Record<string, unknown>;
+};
+export type PopoverActionsSnippetProps = {
+    /** Closes the popover; focus returns to the trigger. */
+    close: () => void;
+};
+/**
+ * Attributes and handlers not listed here go to the panel (Bits UI
+ * `Popover.Content`), among them `side` (default `bottom`), `align`
+ * (default `start`), `sideOffset`, `onOpenAutoFocus`, `onCloseAutoFocus`,
+ * `onEscapeKeydown` and `onInteractOutside`. The placement props apply
+ * from 600px only; below it the panel is a bottom sheet.
+ */
+export type PopoverProps = Omit<BitsPopover.ContentProps, 'child' | 'children' | 'forceMount' | 'ref' | 'title'> & {
+    open?: boolean;
+    /** The caps title, and the panel's accessible name. */
+    title: string;
+    /** The button the panel is anchored to: spread `props` onto it. */
+    trigger: Snippet<[PopoverTriggerSnippetProps]>;
+    /** The body, under the title. */
+    children: Snippet;
+    /** The action row at the bottom, primary action last. */
+    actions?: Snippet<[PopoverActionsSnippetProps]>;
+    /** The sheet's close button's accessible name (below 600px). */
+    closeLabel?: string;
+    /** The panel element. */
+    ref?: HTMLElement | null;
+};
+declare const Popover: import("svelte").Component<PopoverProps, {}, "ref" | "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;