@mystravil/hardpoint 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 Hardpoint follows semantic versioning. Before 1.0.0, a breaking change raises the minor version.
 
+## 0.2.0 (2026-11-11)
+
+- **Added**:
+  - `Meter`: a measurement inside a known range as separate segments, coloured by `warnAt` and `dangerAt` or by an app-set `tone`, with an optional `marker` and `detail` line.
+  - `Notice`: a persistent message in the page flow with an optional tone mark, title, text, up to two actions and a close button.
+  - `TextArea`: a multi-line text field that grows from `rows` to `maxRows` lines, then scrolls inside, with TextField's label, hint and error.
+  - `RadioGroup`: one choice from a set of rows, each with an optional hint and tag, named by a caps `label` or a `legend`, with a group `error`.
+  - `CheckboxGroup`: `legend` (a name set as written, instead of `label`), `error` and an item `tag`.
+  - `Checkbox`: `tag`. The whole row is now the target: a press on the hint, the tag or the gap counts as a press on the label.
+  - `ListDetail`: a list column beside the open item from `splitFrom` (`medium`, `expanded` by default, or `large`), one pane at a time below it, picked by a bindable `showDetail`.
+  - `ImageViewer`: one image full screen at every width over a Bits Dialog, with pinch zoom, pan, double-tap and wheel zoom, a Download button, a loading spinner, and Close, Escape or a swipe down at scale 1 to leave.
+  - `.hp-prose` in `base.css`, with `.hp-prose-code`, `.hp-prose-copy` and `.hp-prose-scroll`: styles for rendered markdown or sanitised HTML, at zero specificity. It covers headings, lists, task lists, quotes, code blocks with a copy button, tables that scroll inside their wrapper, and images.
+  - Grouped options: `group` on `SelectItem`, `ComboboxItem` and `NativeSelectOption`. Select and Combobox show a sticky heading per group, and NativeSelect renders `<optgroup>`.
+  - The token `--list-detail-width: 320px` (ListDetail's list column).
+- **Changed**:
+  - `--popover-width`, `--tooltip-width` and `--toast-width` can now be set from an app's class and stylesheet rule. Before, the component's own rule won over an app's one-class rule.
+  - The Dialog body sets `scroll-padding-block: var(--space-2)`, so a revealed caret stays 8 px clear of the action row.
+  - Combobox's default filter also matches an item's `group`, drops the heading of a group with no match, and scrolls the list to the top as you type.
+- **Checked**: every exported component, `toast()` and `Motion` run under `style-src 'self'` with no policy violation.
+
 ## 0.1.0 (2026-11-11)
 
 The first public release. It needs Svelte 5.57 or newer.

package/README.md

@@ -8,11 +8,11 @@ The package imports nothing from SvelteKit, so plain Svelte apps can use it. The
 
 ## Components
 
-- Actions and forms: `Button`, `TextField`, `NativeSelect`, `Select`, `Combobox`, `Checkbox`, `CheckboxGroup`, `Switch`.
-- Overlays: `Dialog` (centred, bottom sheet or full screen), `Popover`, `Menu` with `MenuItem`, `MenuCheckboxItem`, `MenuRadioGroup`, `MenuRadioItem`, `MenuGroup` and `MenuSeparator`, `Tooltip` with `TooltipGroup`, and `Toaster` with `toast()`.
-- Navigation: `AppShell` (header, bottom bar or drawer, rail or sidebar), `Tabs`, `Steps`, `Pagination`.
-- Data and display: `Table`, `KeyValueList`, `Stat`, `Tag`, `Timeline`, `MediaFrame` with `MediaImage`, `Disclosure`.
-- Feedback: `Progress`, `Spinner`, `Skeleton`, `LoadRegion`, `EmptyState`, `ErrorState`.
+- Actions and forms: `Button`, `TextField`, `TextArea`, `NativeSelect`, `Select`, `Combobox`, `Checkbox`, `CheckboxGroup`, `RadioGroup`, `Switch`.
+- Overlays: `Dialog` (centred, bottom sheet or full screen), `Popover`, `Menu` with `MenuItem`, `MenuCheckboxItem`, `MenuRadioGroup`, `MenuRadioItem`, `MenuGroup` and `MenuSeparator`, `Tooltip` with `TooltipGroup`, `Toaster` with `toast()`, and `ImageViewer` (one image full screen, with pinch zoom).
+- Navigation and layout: `AppShell` (header, bottom bar or drawer, rail or sidebar), `ListDetail` (a list beside the open item, one pane at a time on narrow screens), `Tabs`, `Steps`, `Pagination`.
+- Data and display: `Table`, `KeyValueList`, `Stat`, `Tag`, `Timeline`, `MediaFrame` with `MediaImage`, `Disclosure`, and `.hp-prose` in `base.css` for rendered markdown.
+- Feedback: `Progress`, `Meter`, `Notice`, `Spinner`, `Skeleton`, `LoadRegion`, `EmptyState`, `ErrorState`.
 
 The source repository has a showcase app with a docs page for each component, the foundations, the motion tokens and a specimen app.
 

package/dist/base.css

@@ -330,6 +330,285 @@ body {
 	}
 }
 
+/* ---- Prose ------------------------------------------------------------- */
+
+/* Rendered markdown or sanitised HTML that an app cannot scope styles into:
+   put .hp-prose on its container. Every rule is :where(.hp-prose) …, so it
+   has no specificity and any app rule wins. Sizes in em follow the font
+   size the app sets on the container (16px on 24px lines by default); the
+   two heading sizes are the type tokens. Blocks do not stop at --measure:
+   the container's width decides, so give it a readable one.
+
+   Gaps: 1em between blocks, 0.5em between a heading and what it
+   introduces, 0.5em between blocks inside a list item and 0.25em between
+   items, so each gap between blocks is at least twice the gap inside one.
+
+   The ink is --text, with --muted for markers, quotes and the small
+   headings. Nothing here is a hue. */
+
+:where(.hp-prose) {
+	/* In a flex or grid column the box may shrink below a long word. */
+	min-width: 0;
+	font-family: var(--sans);
+	font-size: var(--type-body);
+	line-height: 1.5;
+	/* A long address or word breaks inside the column; tables and code
+	   blocks set their own rules below. */
+	overflow-wrap: anywhere;
+}
+
+/* Block gaps: space above each block, none below, so the first and last
+   child need no special case and a margin never doubles. */
+:where(.hp-prose) :where(p, ul, ol, pre, blockquote, table, h1, h2, h3, h4, h5, h6, .hp-prose-code, .hp-prose-scroll) {
+	margin-block: 1em 0;
+	margin-inline: 0;
+}
+:where(.hp-prose) :where(p) {
+	max-width: none;
+}
+
+/* Headings as written, never caps. h1 and h2 take the page-title and
+   section-title roles; h3 to h6 stay at body size and step down in weight,
+   then in ink. More space above a heading than below it groups it with what
+   follows. */
+:where(.hp-prose) :where(h1) {
+	margin-block-start: 1.5em;
+	font-size: var(--type-page);
+	font-weight: 500;
+	line-height: 1.25;
+	line-height: round(up, 1.25em, 4px);
+	letter-spacing: -0.015em;
+}
+:where(.hp-prose) :where(h2) {
+	margin-block-start: 1.6em;
+	font-size: var(--type-section);
+	font-weight: 500;
+	line-height: 1.25;
+	line-height: round(up, 1.25em, 4px);
+	letter-spacing: -0.01em;
+}
+:where(.hp-prose) :where(h3, h4, h5, h6) {
+	margin-block-start: 1.5em;
+	font-size: 1em;
+	font-weight: 500;
+}
+:where(.hp-prose) :where(h3) {
+	font-weight: 600;
+}
+:where(.hp-prose) :where(h5, h6) {
+	color: var(--muted);
+}
+
+:where(.hp-prose) :where(strong, b) {
+	font-weight: 600;
+}
+:where(.hp-prose) :where(del, s) {
+	text-decoration-line: line-through;
+	text-decoration-thickness: 1px;
+}
+
+/* Lists: square markers on bulleted lists (square corners everywhere),
+   tabular figures on numbered ones, both in --muted. The markers hang
+   outside the text, so the text edge lines up with the paragraphs. A
+   start number comes from the list's own attribute. */
+:where(.hp-prose) :where(ul, ol) {
+	padding-inline-start: 1.5em;
+}
+:where(.hp-prose) :where(ol) {
+	padding-inline-start: 2em;
+	list-style-type: decimal;
+}
+:where(.hp-prose) :where(ul) {
+	list-style-type: square;
+}
+:where(.hp-prose li)::marker {
+	color: var(--muted);
+}
+:where(.hp-prose ol > li)::marker {
+	font-variant-numeric: tabular-nums;
+}
+/* Tight inside a list: items 0.25em apart, a nested list 0.25em under its
+   item's text, other blocks in an item 0.5em apart. */
+:where(.hp-prose li) + :where(li) {
+	margin-block-start: 0.25em;
+}
+:where(.hp-prose li > * + *) {
+	margin-block-start: 0.5em;
+}
+
+/* Task lists. A checkbox in an item is drawn as Hardpoint's checkbox box
+   in its disabled form: a black box with the quiet --border edge and a
+   --muted mark, and it takes the marker's place. It is out of the flow,
+   so the item's text keeps the list's text edge. */
+:where(.hp-prose li:has(> input[type='checkbox'], > p:first-child > input[type='checkbox'])) {
+	position: relative;
+	list-style: none;
+}
+:where(.hp-prose li input[type='checkbox']) {
+	appearance: none;
+	position: absolute;
+	inset-block-start: calc((1lh - 1.25em) / 2);
+	inset-inline-start: -1.5em;
+	display: grid;
+	place-items: center;
+	box-sizing: border-box;
+	width: 1.25em;
+	height: 1.25em;
+	margin: 0;
+	padding: 0;
+	border: 1px solid var(--border);
+	border-radius: 0;
+	background: var(--canvas);
+	color: var(--muted);
+}
+/* The mark is the box's 12px check as a clipped square, so it takes the
+   text colour and needs no image. */
+:where(.hp-prose li input[type='checkbox']:checked)::before {
+	content: '';
+	width: 0.75em;
+	height: 0.75em;
+	background: currentColor;
+	clip-path: polygon(6.6% 60.1%, 37.5% 91%, 93.4% 35.1%, 81.6% 23.3%, 37.5% 67.4%, 18.4% 48.3%);
+}
+
+/* Quotes: a 3px edge in --border, since titanium marks selection, and the
+   text in --muted. */
+:where(.hp-prose) :where(blockquote) {
+	padding-inline-start: 0.75em;
+	border-inline-start: 3px solid var(--border);
+	color: var(--muted);
+}
+
+:where(.hp-prose) :where(hr) {
+	height: 0;
+	margin-block: 1.5em;
+	margin-inline: 0;
+	border: 0;
+	border-block-start: 1px solid var(--border);
+}
+
+/* A markdown image sits in a paragraph, which has its own gap; one that
+   sits directly in the container gets the block gap too. */
+:where(.hp-prose) :where(img) {
+	display: block;
+	max-width: 100%;
+	height: auto;
+}
+:where(.hp-prose) > :where(img) {
+	margin-block-start: 1em;
+}
+
+/* Code. Inline code is a little smaller than the text around it, because
+   Geist Mono looks larger at the same size. A block is Geist Mono on a 20px
+   rhythm, never wraps and scrolls sideways inside its own box. It has a
+   1px --border hairline instead of a fill: --surface-hover cannot be seen
+   on black, --surface-band is heavy under a long listing, and the line
+   reads in both themes and marks where the scrolling area ends. */
+:where(.hp-prose) :where(code, kbd, samp) {
+	font-size: 0.875em;
+}
+:where(.hp-prose) :where(pre) {
+	padding: var(--space-3);
+	overflow-x: auto;
+	overscroll-behavior-x: contain;
+	border: 1px solid var(--border);
+	font-size: 0.875em;
+	line-height: calc(20 / 14);
+	white-space: pre;
+	overflow-wrap: normal;
+	tab-size: 4;
+}
+:where(.hp-prose pre) :where(code, kbd, samp) {
+	font-size: inherit;
+}
+
+/* A code block with a copy button: wrap the pre and the app's Button
+   (class hp-prose-copy) in .hp-prose-code. The wrapper draws the hairline and
+   the button sits at the top end, outside the text, so a renderer that
+   replaces the pre keeps it. The pre leaves a column for the button, so
+   text, which scrolls sideways under any overlay, never runs beneath it. */
+:where(.hp-prose .hp-prose-code) {
+	position: relative;
+	border: 1px solid var(--border);
+}
+:where(.hp-prose .hp-prose-code > pre) {
+	margin: 0;
+	margin-inline-end: calc(var(--control-height) + var(--space-2));
+	border: 0;
+}
+:where(.hp-prose .hp-prose-copy) {
+	position: absolute;
+	inset-block-start: var(--space-1);
+	inset-inline-end: var(--space-1);
+}
+
+/* Tables. The header band is --surface-band with cells as written, never
+   caps. Cells are Geist, not Geist Mono: they hold words. Text that wraps
+   makes rows of several lines, and without a line between rows the eye
+   cannot tell where one ends, so every row has a 1px --border divider (the
+   table's ruled form), and no zebra. A table is as wide as its content or
+   its box, whichever is wider; wrap each in .hp-prose-scroll and a table
+   wider than the column scrolls sideways inside it. Alignment comes from
+   the cell's align attribute or its own text-align. */
+:where(.hp-prose .hp-prose-scroll) {
+	max-width: 100%;
+	overflow-x: auto;
+	overscroll-behavior-x: contain;
+}
+:where(.hp-prose) :where(table) {
+	min-width: 100%;
+	border-collapse: collapse;
+	font-variant-numeric: tabular-nums;
+}
+:where(.hp-prose) :where(th, td) {
+	padding: var(--space-2) var(--space-3);
+	border-block-end: 1px solid var(--border);
+	overflow-wrap: normal;
+	text-align: start;
+	vertical-align: top;
+}
+:where(.hp-prose th) {
+	border-block-end: 0;
+	background: var(--surface-band);
+	font-weight: 500;
+}
+/* The cell's align attribute: the browser maps it to text-align at the
+   lowest priority, so the start alignment above would hide it. */
+:where(.hp-prose :is(th, td)[align='left']) {
+	text-align: left;
+}
+:where(.hp-prose :is(th, td)[align='center']) {
+	text-align: center;
+}
+:where(.hp-prose :is(th, td)[align='right']) {
+	text-align: right;
+}
+
+@media (pointer: fine) {
+	:where(.hp-prose pre, .hp-prose .hp-prose-scroll) {
+		scrollbar-width: thin;
+	}
+}
+
+/* Gaps that depend on neighbours come last, so they win over the block gap:
+   a heading keeps 0.5em from what it introduces, and the first and last
+   child of any box touch its edges. */
+:where(.hp-prose) :where(h1, h2, h3, h4, h5, h6) + * {
+	margin-block-start: 0.5em;
+}
+:where(.hp-prose :first-child) {
+	margin-block-start: 0;
+}
+:where(.hp-prose :last-child) {
+	margin-block-end: 0;
+}
+
+/* A nested list follows its item's text, which is not an element, so it is
+   that item's first child: it takes its 0.25em back after the rule above. */
+:where(.hp-prose li > :is(ul, ol)) {
+	margin-block-start: 0.25em;
+}
+
 /* ---- Utilities --------------------------------------------------------- */
 
 /* Hidden from sight, kept in the accessibility tree. */

package/dist/components/Checkbox.svelte

@@ -4,10 +4,17 @@
 	/** Attributes and handlers not listed here go to the checkbox button. */
 	export type CheckboxProps = Omit<BitsCheckbox.RootProps, 'child' | 'children' | 'ref'> & {
 		/**
-		 * The text beside the box, as written (never caps). Pressing it toggles
-		 * the box. Without it, give the box an accessible name with `aria-label`.
+		 * The text beside the box, as written (never caps). Pressing it, or
+		 * anywhere on the box's row, toggles the box. Without it, give the box
+		 * an accessible name with `aria-label`.
 		 */
 		label?: string;
+		/**
+		 * A Tag after the label, such as "Recommended": a short fixed string the
+		 * app defines, set in caps. It is part of the box's accessible name and
+		 * shows only with a `label`.
+		 */
+		tag?: string;
 		/** A second line in `--muted` under the label, read out as the box's description. */
 		hint?: string;
 		/** The checkbox button. */
@@ -16,12 +23,15 @@
 </script>
 
 <script lang="ts">
+	import Tag from './Tag.svelte';
+
 	const uid = $props.id();
 
 	let {
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
 		label,
+		tag,
 		hint,
 		id = uid,
 		ref = $bindable(null),
@@ -37,9 +47,10 @@
 <!--
 	A Bits UI Checkbox: a <button role="checkbox"> with aria-checked true,
 	false or mixed, and its state in data-state (checked, unchecked,
-	indeterminate) and data-disabled. Pressing the box or its label toggles it;
-	an indeterminate box becomes checked. Inside a CheckboxGroup, give it a
-	`value`. Attributes, handlers and `class` go to the button.
+	indeterminate) and data-disabled. Pressing the box or anywhere on its row
+	(the label, the tag, the hint) toggles it; an indeterminate box becomes
+	checked. Inside a CheckboxGroup, give it a `value`. Attributes, handlers
+	and `class` go to the button.
 -->
 <div class="hp-checkbox">
 	<span class="control">
@@ -53,7 +64,9 @@
 		</BitsCheckbox.Root>
 	</span>
 	{#if label}
-		<label class="hp-dense" for={id}>{label}</label>
+		<label class="hp-dense" class:tagged={!!tag} for={id}
+			>{label}{#if tag}{' '}<Tag as="span">{tag}</Tag>{/if}</label
+		>
 	{/if}
 	{#if hint}
 		<p class="hint hp-caption" id={hintId}>{hint}</p>
@@ -65,14 +78,21 @@
 	   band (24px fine, 44px coarse): the box sits centred in it and the
 	   label's first line too, so a label that wraps keeps the box beside its
 	   first line. The hint runs under the label, aligned with its text.
-	   Without a label the root is as wide as the box. */
+	   The root is as wide as its content (without a label, as the box), and
+	   with a label all of it is the target: the label's ::after covers the
+	   root, so a press on the hint, the tag or the space between them is a
+	   press on the label. The box sits above that cover with its own hit
+	   area. */
 	.hp-checkbox {
 		/* The label's line height, as .hp-dense sets it. */
 		--_line: 24px;
+		position: relative;
 		display: grid;
 		grid-template-columns: auto;
 		justify-content: start;
 		align-items: start;
+		width: fit-content;
+		max-width: 100%;
 	}
 	.hp-checkbox:has(> label) {
 		grid-template-columns: auto minmax(0, 1fr);
@@ -86,6 +106,7 @@
 
 	.control {
 		position: relative;
+		z-index: 1;
 		display: flex;
 		align-items: center;
 		height: var(--hit-target);
@@ -152,6 +173,19 @@
 		cursor: pointer;
 		-webkit-tap-highlight-color: transparent;
 	}
+	label::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+	}
+	/* The tag sits after the label when both fit on one line; otherwise it
+	   wraps under the label whole. */
+	.tagged {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--space-1) var(--space-2);
+	}
 
 	/* Under the label's text; without a label, under the box. */
 	.hint {
@@ -159,7 +193,7 @@
 		color: var(--muted);
 	}
 
-	/* ---- Hover: fine pointers only, over the box or its label ---------- */
+	/* ---- Hover: fine pointers only, over any part of the row ----------- */
 
 	@media (hover: hover) and (pointer: fine) {
 		.box {
@@ -184,7 +218,7 @@
 		background-color: var(--surface-raised);
 	}
 
-	/* ---- Disabled: the quieter --border and muted ink ------------------ */
+	/* ---- Disabled: the quieter --border and muted ink, the tag too ----- */
 
 	.box:disabled {
 		border-color: var(--border);
@@ -195,4 +229,7 @@
 		color: var(--muted);
 		cursor: not-allowed;
 	}
+	.hp-checkbox:has(.box:disabled) label > :global(.hp-tag) {
+		background: var(--muted);
+	}
 </style>

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

@@ -2,10 +2,17 @@ import { Checkbox as BitsCheckbox } from 'bits-ui';
 /** Attributes and handlers not listed here go to the checkbox button. */
 export type CheckboxProps = Omit<BitsCheckbox.RootProps, 'child' | 'children' | 'ref'> & {
     /**
-     * The text beside the box, as written (never caps). Pressing it toggles
-     * the box. Without it, give the box an accessible name with `aria-label`.
+     * The text beside the box, as written (never caps). Pressing it, or
+     * anywhere on the box's row, toggles the box. Without it, give the box
+     * an accessible name with `aria-label`.
      */
     label?: string;
+    /**
+     * A Tag after the label, such as "Recommended": a short fixed string the
+     * app defines, set in caps. It is part of the box's accessible name and
+     * shows only with a `label`.
+     */
+    tag?: string;
     /** A second line in `--muted` under the label, read out as the box's description. */
     hint?: string;
     /** The checkbox button. */