@mystravil/hardpoint 0.1.0 → 0.2.0

package/dist/components/TextArea.svelte

@@ -0,0 +1,272 @@
+<script lang="ts" module>
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	/** Attributes and handlers not listed here go to the `<textarea>`. */
+	export type TextAreaProps = Omit<HTMLTextareaAttributes, 'value' | 'children' | 'rows'> & {
+		/** The caps field label above the well. Required: a placeholder is never the only label. */
+		label: string;
+		/** The text. Bindable. */
+		value?: string;
+		/** Guidance under the well in `--muted`, linked by `aria-describedby`. */
+		hint?: string;
+		/**
+		 * The error to show under the well, with an icon, linked by
+		 * `aria-describedby`; it sets `aria-invalid`. Say how to fix the
+		 * problem. The app validates; the field shows what it is given.
+		 */
+		error?: string;
+		/** The height of the empty well, in lines. */
+		rows?: number;
+		/**
+		 * The well grows with its text up to this many lines, then scrolls
+		 * inside. Never less than `rows`.
+		 */
+		maxRows?: number;
+		/** The `<textarea>`, for example to focus the first error on submit. */
+		ref?: HTMLTextAreaElement | null;
+	};
+</script>
+
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { Label } from 'bits-ui';
+	import { fadeIn } from './internal/fade-in.js';
+
+	const uid = $props.id();
+
+	let {
+		label,
+		value = $bindable(''),
+		hint,
+		error,
+		rows = 3,
+		maxRows = 10,
+		id = uid,
+		disabled,
+		readonly,
+		ref = $bindable(null),
+		class: className,
+		'aria-describedby': describedBy,
+		'aria-invalid': ariaInvalid,
+		...rest
+	}: TextAreaProps = $props();
+
+	const hintId = $derived(`${id}-hint`);
+	const errorId = $derived(`${id}-error`);
+	// The error first, so a screen reader reads it before the hint.
+	const describedByIds = $derived(
+		[error ? errorId : undefined, hint ? hintId : undefined, describedBy].filter(Boolean).join(' ') ||
+			undefined
+	);
+
+	// ---- Short motion: the error (BRIEF, --dur-message) --------------------
+
+	// As TextField: an error that appears after the first render fades in
+	// from 0 over --dur-message, and the well's edge fades to --danger with
+	// it (the CSS below). An error that clears goes at once, and so does the
+	// red edge. A field that renders or mounts with an error shows it at once.
+	let root: HTMLDivElement | null = $state(null);
+	let errorShown = untrack(() => !!error);
+	$effect(() => {
+		const shown = !!error;
+		untrack(() => {
+			const appeared = shown && !errorShown;
+			errorShown = shown;
+			const message = appeared ? root?.querySelector(':scope > .error') : null;
+			if (message) fadeIn(message, '--dur-message');
+		});
+	});
+
+	// ---- Growth ------------------------------------------------------------
+
+	// Where the browser has field-sizing (Chromium 123+), CSS alone sizes the
+	// well between its rows and maxRows heights. Elsewhere the height comes
+	// from scrollHeight whenever the text, the line counts or the width
+	// change, written through element.style, never a style attribute.
+	const sizesItself = typeof CSS !== 'undefined' && CSS.supports('field-sizing', 'content');
+
+	function fit(field: HTMLTextAreaElement) {
+		// The well collapses to its content to measure it. Holding the root's
+		// height meanwhile keeps the page from getting shorter, which would
+		// move its scroll position. Without a scrollbar while it measures, the
+		// text wraps at the width it has once it fits.
+		if (root) root.style.minHeight = `${root.offsetHeight}px`;
+		field.style.overflowY = 'hidden';
+		field.style.height = 'auto';
+		const borders = field.offsetHeight - field.clientHeight;
+		field.style.height = `${field.scrollHeight + borders}px`;
+		field.style.overflowY = '';
+		if (root) root.style.minHeight = '';
+	}
+
+	$effect(() => {
+		const field = ref;
+		if (sizesItself || !field) return;
+		// Read so the effect runs again when they change. A new `style` from
+		// the app replaces the element's inline height, so it refits too.
+		void [value, rows, maxRows, rest.style];
+		fit(field);
+	});
+
+	$effect(() => {
+		const field = ref;
+		if (sizesItself || !field) return;
+		let width = field.clientWidth;
+		const observer = new ResizeObserver(() => {
+			if (field.clientWidth === width) return;
+			width = field.clientWidth;
+			fit(field);
+		});
+		observer.observe(field);
+		return () => observer.disconnect();
+	});
+</script>
+
+<!--
+	Multi-line text in the black well, with a plain caps label above it (Bits
+	UI Label), an optional hint and an inline error below. The well starts
+	`rows` lines high, grows with its text up to `maxRows` lines, then scrolls
+	inside. Extra attributes (`name`, `placeholder`, `required`, `maxlength`,
+	`autocomplete`, `enterkeyhint`), handlers and `class` go to the
+	<textarea>. The textarea is never re-created and its value is written
+	only when it differs, so the text, the caret and focus survive any
+	re-render around it.
+-->
+<div
+	bind:this={root}
+	class="hp-text-area"
+	data-invalid={error ? '' : undefined}
+	data-disabled={disabled ? '' : undefined}
+	data-readonly={readonly ? '' : undefined}
+	style:--text-area-rows={Math.max(1, rows)}
+	style:--text-area-max-rows={Math.max(1, maxRows)}
+>
+	<Label.Root for={id}>
+		{#snippet child({ props })}
+			<label {...props} class="hp-label">{label}</label>
+		{/snippet}
+	</Label.Root>
+	<textarea
+		{...rest}
+		bind:this={ref}
+		bind:value
+		{id}
+		rows={Math.max(1, rows)}
+		{disabled}
+		{readonly}
+		class={['hp-well', className]}
+		aria-describedby={describedByIds}
+		aria-invalid={error ? true : ariaInvalid}
+	></textarea>
+	{#if hint}
+		<p class="hint hp-caption" id={hintId}>{hint}</p>
+	{/if}
+	{#if error}
+		<p class="error hp-caption" id={errorId}>
+			<span class="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>{error}</span>
+		</p>
+	{/if}
+</div>
+
+<style>
+	.hp-text-area {
+		display: grid;
+		gap: var(--space-1);
+		min-width: 0;
+	}
+	label {
+		color: var(--muted);
+	}
+
+	/* The well, in lines of 24px. Its heights are the line count times the
+	   line, plus 12px of padding at the top and bottom and the two 1px
+	   borders: 98px empty and 266px at most by default. The root sets the
+	   line counts from `rows` and `maxRows`; the fallbacks are the defaults,
+	   for a page whose policy blocks the style attribute of server-rendered
+	   markup. The text is 16px at every width, from .hp-well. */
+	textarea {
+		display: block;
+		width: 100%;
+		min-width: 0;
+		height: auto;
+		min-height: calc(var(--text-area-rows, 3) * 24px + 2 * var(--space-3) + 2px);
+		max-height: calc(var(--text-area-max-rows, 10) * 24px + 2 * var(--space-3) + 2px);
+		padding: var(--space-3);
+		line-height: 24px;
+		field-sizing: content;
+		resize: none;
+		overflow-y: auto;
+		/* Once it scrolls, the browser keeps the caret's line clear of the
+		   padding, so the line being typed never sits on the edge. */
+		scroll-padding-block: var(--space-3);
+		/* As the other scrolling parts: a thin bar on fine pointers; touch
+		   shows its own while it scrolls. */
+		scrollbar-width: thin;
+	}
+	textarea::placeholder {
+		color: var(--muted);
+		opacity: 1;
+	}
+
+	/* Read-only: muted text as when disabled, and no hover fill, because
+	   nothing here can change. It keeps the 3:1 boundary: the field still
+	   takes focus and its text can be selected and copied, so it stays a
+	   control (WCAG 1.4.11 exempts only inactive ones). */
+	textarea[readonly] {
+		color: var(--muted);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		textarea[readonly]:hover {
+			background-color: var(--canvas);
+		}
+	}
+
+	/* Invalid: as TextField. The boundary turns --danger, never alone: the
+	   icon and the message say what is wrong. Keyed on the root's
+	   data-invalid, set by `error`. The edge fades to --danger over
+	   --dur-message with the message and goes back at once when the error
+	   clears. A disabled well keeps --border. */
+	[data-invalid] textarea {
+		border-color: var(--danger);
+		transition:
+			background-color var(--dur-hover) var(--settle),
+			border-color var(--dur-message) var(--settle);
+	}
+	[data-invalid] textarea:disabled {
+		border-color: var(--border);
+	}
+
+	.hint {
+		margin: 0;
+		color: var(--muted);
+	}
+	.error {
+		display: flex;
+		gap: var(--space-2);
+		margin: 0;
+		color: var(--danger);
+	}
+	/* The first message starts 8px under the well, clear of the focus
+	   contour (2px, drawn 4px outside the well). */
+	textarea + .hint,
+	textarea + .error {
+		margin-top: var(--space-1);
+	}
+	/* One line box high, so the icon centres on the first line of the
+	   message however it wraps. */
+	.icon {
+		display: flex;
+		flex: none;
+		align-items: center;
+		height: 1lh;
+	}
+	.icon svg {
+		display: block;
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+/** Attributes and handlers not listed here go to the `<textarea>`. */
+export type TextAreaProps = Omit<HTMLTextareaAttributes, 'value' | 'children' | 'rows'> & {
+    /** The caps field label above the well. Required: a placeholder is never the only label. */
+    label: string;
+    /** The text. Bindable. */
+    value?: string;
+    /** Guidance under the well in `--muted`, linked by `aria-describedby`. */
+    hint?: string;
+    /**
+     * The error to show under the well, with an icon, linked by
+     * `aria-describedby`; it sets `aria-invalid`. Say how to fix the
+     * problem. The app validates; the field shows what it is given.
+     */
+    error?: string;
+    /** The height of the empty well, in lines. */
+    rows?: number;
+    /**
+     * The well grows with its text up to this many lines, then scrolls
+     * inside. Never less than `rows`.
+     */
+    maxRows?: number;
+    /** The `<textarea>`, for example to focus the first error on submit. */
+    ref?: HTMLTextAreaElement | null;
+};
+declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value" | "ref">;
+type TextArea = ReturnType<typeof TextArea>;
+export default TextArea;

package/dist/components/Toaster.svelte

@@ -341,16 +341,16 @@
 
 <style>
 	/* The Tooltip's box at the bottom centre: black, the control boundary,
-	   square. As wide as its text up to --toast-width (an app passes
-	   style="--toast-width: …" for another cap), inside the page gutters and
-	   the safe areas, so it never meets a screen edge. Bits UI sets
+	   square. As wide as its text up to --toast-width, 30rem unless set (an
+	   app sets it with a class on the Toaster and a rule in its stylesheet;
+	   the default is the var() fallback, so any rule wins whatever its
+	   specificity), inside the page gutters and the safe areas, so it never
+	   meets a screen edge. Bits UI sets
 	   pointer-events: none on <body> while a dialog or a list is open; the
 	   toast takes presses anyway. A drag along either axis is the swipe's,
 	   so it never scrolls the page under the toast; pinch zoom stays the
 	   browser's. */
 	.hp-toaster {
-		--toast-width: 30rem;
-
 		position: fixed;
 		right: calc(var(--gutter) + env(safe-area-inset-right));
 		bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
@@ -360,7 +360,7 @@
 		align-items: center;
 		box-sizing: border-box;
 		width: fit-content;
-		max-width: var(--toast-width);
+		max-width: var(--toast-width, 30rem);
 		margin: 0 auto;
 		border: 1px solid var(--border-control);
 		background: var(--canvas);

package/dist/components/Tooltip.svelte

@@ -169,16 +169,16 @@
 	/* On the tooltip layer (tokens.css), over popovers, menus and dialogs.
 	   Bits UI copies the z-index to the positioned wrapper. A black box with
 	   the control boundary, like the popover, as wide as its text up to
-	   --tooltip-width (an app passes style="--tooltip-width: …" for another
-	   cap) and never wider than the space beside the trigger. */
+	   --tooltip-width, 280px unless set (an app sets it with a class on the
+	   Tooltip and a rule in its stylesheet; the default is the var()
+	   fallback, so any rule wins whatever its specificity) and never wider
+	   than the space beside the trigger. */
 	.hp-tooltip {
-		--tooltip-width: 280px;
-
 		position: relative;
 		z-index: var(--layer-tooltip);
 		box-sizing: border-box;
 		width: max-content;
-		max-width: min(var(--tooltip-width), var(--bits-tooltip-content-available-width));
+		max-width: min(var(--tooltip-width, 280px), var(--bits-tooltip-content-available-width));
 		padding: var(--space-1) var(--space-2);
 		border: 1px solid var(--border-control);
 		background: var(--canvas);

package/dist/components/internal/groups.d.ts

@@ -0,0 +1,14 @@
+export type OptionGroup<T> = {
+    name: string;
+    items: T[];
+};
+export type GroupedOptions<T> = {
+    /** The items without a group, in their order. */
+    loose: T[];
+    groups: OptionGroup<T>[];
+    /** Every item in the order the list shows them. */
+    ordered: T[];
+};
+export declare function groupOptions<T extends {
+    group?: string;
+}>(items: readonly T[]): GroupedOptions<T>;

package/dist/components/internal/groups.js

@@ -0,0 +1,23 @@
+// Options in named groups, in one list (Select, Combobox, NativeSelect).
+// Items without a group come first, before any heading; then each group,
+// in the order its first item appears. Items keep their order inside a
+// group. An empty `group` counts as none, because a heading needs text.
+export function groupOptions(items) {
+    const loose = [];
+    const byName = new Map();
+    for (const item of items) {
+        if (!item.group) {
+            loose.push(item);
+            continue;
+        }
+        const members = byName.get(item.group);
+        if (members)
+            members.push(item);
+        else
+            byName.set(item.group, [item]);
+    }
+    if (!byName.size)
+        return { loose, groups: [], ordered: loose };
+    const groups = Array.from(byName, ([name, members]) => ({ name, items: members }));
+    return { loose, groups, ordered: loose.concat(...groups.map((g) => g.items)) };
+}

package/dist/index.d.ts

@@ -4,25 +4,31 @@ export { default as Pagination, type PaginationProps } from './components/Pagina
 export { default as Select, type SelectItem, type SelectItemSnippetProps, type SelectLabelBeside, type SelectProps } from './components/Select.svelte';
 export { default as Table, type Column, type TableBreakpoint, type TableMark, type TableStack, type TableVariant } from './components/Table.svelte';
 export { default as AppShell, type AppShellCompactNav, type AppShellDestination, type AppShellProps, type AppShellWideNav } from './components/AppShell.svelte';
+export { default as ListDetail, type ListDetailBreakpoint, type ListDetailProps, type ListDetailSnippetProps } from './components/ListDetail.svelte';
 export { default as Dialog, type DialogActionsSnippetProps, type DialogProps, type DialogTriggerSnippetProps } from './components/Dialog.svelte';
 export { default as Tag, type TagElement, type TagProps } from './components/Tag.svelte';
 export { default as KeyValueList, type KeyValueItem, type KeyValueListProps } from './components/KeyValueList.svelte';
 export { default as Timeline, type TimelineEvent, type TimelineProps, type TimelineTone } from './components/Timeline.svelte';
 export { default as MediaFrame, type MediaFrameProps } from './components/MediaFrame.svelte';
 export { default as MediaImage, type MediaImageProps } from './components/MediaImage.svelte';
+export { default as ImageViewer, type ImageViewerProps, type ImageViewerTriggerSnippetProps } from './components/ImageViewer.svelte';
 export { default as TextField, type TextFieldBreakpoint, type TextFieldProps, type TextFieldType } from './components/TextField.svelte';
+export { default as TextArea, type TextAreaProps } from './components/TextArea.svelte';
 export { default as Tabs, type TabsItem, type TabsProps } from './components/Tabs.svelte';
 export { default as Checkbox, type CheckboxProps } from './components/Checkbox.svelte';
 export { default as CheckboxGroup, type CheckboxGroupItem, type CheckboxGroupProps } from './components/CheckboxGroup.svelte';
+export { default as RadioGroup, type RadioGroupItem, type RadioGroupProps } from './components/RadioGroup.svelte';
 export { default as Switch, type SwitchProps } from './components/Switch.svelte';
 export { default as Stat, type StatProps, type StatTone, type StatVariant } from './components/Stat.svelte';
 export { default as Steps, type StepsBreakpoint, type StepsItem, type StepsProps, type StepsState } from './components/Steps.svelte';
 export { default as Progress, type ProgressProps } from './components/Progress.svelte';
+export { default as Meter, type MeterProps, type MeterTone } from './components/Meter.svelte';
 export { default as Spinner, type SpinnerProps } from './components/Spinner.svelte';
 export { default as Skeleton, type SkeletonProps, type SkeletonVariant } from './components/Skeleton.svelte';
 export { default as LoadRegion, type LoadRegionProps } from './components/LoadRegion.svelte';
 export { default as EmptyState, type EmptyStateProps, type EmptyStateTitleElement, type EmptyStateVariant } from './components/EmptyState.svelte';
 export { default as ErrorState, type ErrorStateProps, type ErrorStateTitleElement, type ErrorStateVariant } from './components/ErrorState.svelte';
+export { default as Notice, type NoticeProps, type NoticeTitleElement, type NoticeTone } from './components/Notice.svelte';
 export { default as Popover, type PopoverActionsSnippetProps, type PopoverProps, type PopoverTriggerSnippetProps } from './components/Popover.svelte';
 export { default as Menu, type MenuProps, type MenuTriggerSnippetProps } from './components/Menu.svelte';
 export { default as MenuItem, type MenuItemProps, type MenuItemVariant } from './components/MenuItem.svelte';

package/dist/index.js

@@ -4,25 +4,31 @@ export { default as Pagination } from './components/Pagination.svelte';
 export { default as Select } from './components/Select.svelte';
 export { default as Table } from './components/Table.svelte';
 export { default as AppShell } from './components/AppShell.svelte';
+export { default as ListDetail } from './components/ListDetail.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as Tag } from './components/Tag.svelte';
 export { default as KeyValueList } from './components/KeyValueList.svelte';
 export { default as Timeline } from './components/Timeline.svelte';
 export { default as MediaFrame } from './components/MediaFrame.svelte';
 export { default as MediaImage } from './components/MediaImage.svelte';
+export { default as ImageViewer } from './components/ImageViewer.svelte';
 export { default as TextField } from './components/TextField.svelte';
+export { default as TextArea } from './components/TextArea.svelte';
 export { default as Tabs } from './components/Tabs.svelte';
 export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as CheckboxGroup } from './components/CheckboxGroup.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Stat } from './components/Stat.svelte';
 export { default as Steps } from './components/Steps.svelte';
 export { default as Progress } from './components/Progress.svelte';
+export { default as Meter } from './components/Meter.svelte';
 export { default as Spinner } from './components/Spinner.svelte';
 export { default as Skeleton } from './components/Skeleton.svelte';
 export { default as LoadRegion } from './components/LoadRegion.svelte';
 export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as ErrorState } from './components/ErrorState.svelte';
+export { default as Notice } from './components/Notice.svelte';
 export { default as Popover } from './components/Popover.svelte';
 export { default as Menu } from './components/Menu.svelte';
 export { default as MenuItem } from './components/MenuItem.svelte';

package/dist/tokens.css

@@ -179,6 +179,10 @@
 	--rail-width: 80px;
 	--sidebar-width: 240px;
 	--drawer-width: 320px;
+	/* ListDetail: the list pane's width side by side, gutters included. The
+	   narrowest phone's width, so a list laid out for the phone screen fits
+	   the column as it is. */
+	--list-detail-width: 320px;
 }
 
 /* Light palette (2026-11-11). An app picks the theme with data-theme on

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mystravil/hardpoint",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "Hardpoint: a Svelte 5 design system on Bits UI. AMOLED black, titanium ink, Geist, square solid blocks, banded mono tables, opt-in expressive motion, dark and light themes.",
 	"license": "MIT",
 	"author": "MYSTRAVIL",