@ruckc/truss-ui 1.3.0 → 1.4.0

package/README.md

@@ -7,7 +7,7 @@ A **Svelte 5 / SvelteKit design system** that blends Material 3's tonal surfaces
 
 **Docs and live demo: <https://truss.ruck.io>**
 
-- **69 components**: forms and pickers (no native `<select>`, date or time inputs), data tables with virtual scrolling, trees, menus, dialogs, an application shell and more.
+- **90+ components**: forms and pickers (no native `<select>`, date or time inputs), data tables with virtual scrolling, trees, menus, dialogs, an application shell and more.
 - **Zero runtime dependencies** in the core (peer: `svelte`). Fonts are bundled and served by *your* build.
 - **Accessible by construction**: names, ARIA, focus and complete keyboard maps, audited for every combination of every component's options.
 - **Themeable**: one set of `--tr-*` CSS tokens, light and dark, drives everything, including charts, graphs and maps.
@@ -102,6 +102,8 @@ Every push to `main` that passes CI is released automatically: the version is wo
 
 Commits that don't follow the format (no `type:` prefix) don't trigger a release on their own. Publishing uses npm [trusted publishing](https://docs.npmjs.com/trusted-publishers) (OIDC from the `ci.yml` workflow), so no npm token is stored anywhere. Each package's trusted publisher on npmjs.com must be for workflow `ci.yml` with the **`npm publish`** action allowed (the default is only `npm stage publish`, which npm rejects with `403 OIDC permission denied for this action`).
 
+A new version can take several minutes to become installable after the release job publishes it, so an install that returns 404 right after a release should be retried rather than republished.
+
 ## Licence
 
 MIT © Curtis Ruck. The bundled Inter and JetBrains Mono fonts are under the SIL Open Font License 1.1.

package/dist/components/Button.svelte

@@ -133,6 +133,7 @@
 <style>
 	.tr-btn {
 		--c: var(--tr-primary);
+		--ct: var(--tr-primary-text, var(--tr-primary));
 		--on: var(--tr-on-primary);
 		--cc: var(--tr-primary-container);
 		--on-cc: var(--tr-on-primary-container);
@@ -160,11 +161,11 @@
 	.tr-btn[data-size='lg'] { height: var(--tr-control-h-lg); min-width: var(--tr-control-h-lg); padding: 0 16px; font-size: var(--tr-text-lg); }
 	.tr-btn[data-icon-only='true'] { padding: 0; }
 
-	.tr-btn[data-intent='neutral'] { --c: var(--tr-on-surface); --on: var(--tr-surface); --cc: var(--tr-surface-container-high); --on-cc: var(--tr-on-surface); }
-	.tr-btn[data-intent='secondary'] { --c: var(--tr-secondary); --on: var(--tr-on-secondary); --cc: var(--tr-secondary-container); --on-cc: var(--tr-on-secondary-container); }
-	.tr-btn[data-intent='success'] { --c: var(--tr-success); --on: var(--tr-on-success); --cc: var(--tr-success-container); --on-cc: var(--tr-on-success-container); }
-	.tr-btn[data-intent='warning'] { --c: var(--tr-warning); --on: var(--tr-on-warning); --cc: var(--tr-warning-container); --on-cc: var(--tr-on-warning-container); }
-	.tr-btn[data-intent='danger'] { --c: var(--tr-danger); --on: var(--tr-on-danger); --cc: var(--tr-danger-container); --on-cc: var(--tr-on-danger-container); }
+	.tr-btn[data-intent='neutral'] { --c: var(--tr-on-surface); --ct: var(--tr-on-surface); --on: var(--tr-surface); --cc: var(--tr-surface-container-high); --on-cc: var(--tr-on-surface); }
+	.tr-btn[data-intent='secondary'] { --c: var(--tr-secondary); --ct: var(--tr-secondary-text, var(--tr-secondary)); --on: var(--tr-on-secondary); --cc: var(--tr-secondary-container); --on-cc: var(--tr-on-secondary-container); }
+	.tr-btn[data-intent='success'] { --c: var(--tr-success); --ct: var(--tr-success); --on: var(--tr-on-success); --cc: var(--tr-success-container); --on-cc: var(--tr-on-success-container); }
+	.tr-btn[data-intent='warning'] { --c: var(--tr-warning); --ct: var(--tr-warning); --on: var(--tr-on-warning); --cc: var(--tr-warning-container); --on-cc: var(--tr-on-warning-container); }
+	.tr-btn[data-intent='danger'] { --c: var(--tr-danger); --ct: var(--tr-danger); --on: var(--tr-on-danger); --cc: var(--tr-danger-container); --on-cc: var(--tr-on-danger-container); }
 
 	/* Primary filled: solid, high contrast */
 	.tr-btn[data-variant='filled'] { background: var(--c); color: var(--on); box-shadow: var(--tr-elevation-1); }
@@ -173,9 +174,9 @@
 	.tr-btn[data-variant='tonal'] { background: var(--cc); color: var(--on-cc); }
 	.tr-btn[data-variant='tonal']:hover:not(:disabled) { background: color-mix(in srgb, var(--on-cc) 10%, var(--cc)); }
 	/* Outlined: precise 1px border */
-	.tr-btn[data-variant='outlined'] { border-color: var(--tr-outline); color: var(--c); background: transparent; }
+	.tr-btn[data-variant='outlined'] { border-color: var(--tr-outline); color: var(--ct); background: transparent; }
 	.tr-btn[data-variant='outlined']:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 8%, transparent); }
-	.tr-btn[data-variant='minimal'] { color: var(--c); background: transparent; }
+	.tr-btn[data-variant='minimal'] { color: var(--ct); background: transparent; }
 	.tr-btn[data-variant='minimal']:hover:not(:disabled) { background: color-mix(in srgb, var(--c) 10%, transparent); }
 
 	.tr-btn:active:not(:disabled) { transform: scale(0.98); }

package/dist/components/Card.svelte

@@ -3,6 +3,7 @@
 	import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 
 	type Base = {
+		/** Padding of the body only (the `children` between header and footer): `md` (default) is 16px, `sm` is 8px 12px, `none` removes it so the content can supply its own spacing or a media-only card has none. The header, footer and actions keep their own padding. */
 		padding?: 'none' | 'sm' | 'md';
 		elevation?: 0 | 1 | 2 | 3;
 		/** Edge-to-edge content above the header and body (an image, video or map); clipped by the card's rounded corners. */

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAnchorAttributes, HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
 type Base = {
+    /** Padding of the body only (the `children` between header and footer): `md` (default) is 16px, `sm` is 8px 12px, `none` removes it so the content can supply its own spacing or a media-only card has none. The header, footer and actions keep their own padding. */
     padding?: 'none' | 'sm' | 'md';
     elevation?: 0 | 1 | 2 | 3;
     /** Edge-to-edge content above the header and body (an image, video or map); clipped by the card's rounded corners. */

package/dist/components/DataTable.svelte

@@ -739,7 +739,7 @@
 <style>
 	.bar { display: flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 6px; }
 	.grow { flex: 1; }
-	.sel { font-size: var(--tr-text-sm); font-weight: 600; color: var(--tr-primary); min-width: 80px; }
+	.sel { font-size: var(--tr-text-sm); font-weight: 600; color: var(--tr-primary-text, var(--tr-primary)); min-width: 80px; }
 	.rows { font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); font-variant-numeric: tabular-nums; }
 	.colmenu { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 4px; white-space: nowrap; }
 	.chk { width: 40px; padding: 0 0 0 10px !important; }
@@ -784,7 +784,7 @@
 	.hi { display: flex; align-items: center; gap: 8px; width: 100%; height: var(--tr-control-h); padding: 0 8px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface); font: inherit; text-align: left; cursor: pointer; }
 	.hi:hover:not(:disabled), .hi:focus-visible { outline: none; background: var(--tr-surface-container-highest); }
 	.hi:disabled { opacity: 0.45; cursor: not-allowed; }
-	.hi[data-on='true'] { color: var(--tr-primary); font-weight: 700; }
+	.hi[data-on='true'] { color: var(--tr-primary-text, var(--tr-primary)); font-weight: 700; }
 	.fmenu.inline { padding: 0; max-height: 160px; }
 
 	/* Filter row sits under the header, also frozen */

package/dist/components/Eyebrow.svelte

@@ -14,7 +14,7 @@
 <svelte:element this={as} class="eb {klass}" data-tone={tone} {...rest}>{@render children?.()}</svelte:element>
 
 <style>
-	.eb { margin: 0; font-family: var(--tr-font-display, var(--tr-font-sans)); font-size: var(--tr-text-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-primary); }
+	.eb { margin: 0; font-family: var(--tr-font-display, var(--tr-font-sans)); font-size: var(--tr-text-sm); font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tr-primary-text, var(--tr-primary)); }
 	.eb[data-tone='muted'] { color: var(--tr-on-surface-variant); }
 	.eb[data-tone='default'] { color: var(--tr-on-surface); }
 </style>

package/dist/components/FileUpload.svelte

@@ -126,7 +126,7 @@
 	.zone:focus-visible { outline: none; border-color: var(--tr-primary); box-shadow: var(--tr-focus-ring); }
 	.zone[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
 	strong { color: var(--tr-on-surface); }
-	.link { color: var(--tr-primary); font-weight: 600; text-decoration: underline; }
+	.link { color: var(--tr-primary-text, var(--tr-primary)); font-weight: 600; text-decoration: underline; }
 	.ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tr-primary-container); color: var(--tr-on-primary-container); }
 	.hint { font-size: var(--tr-text-sm); }
 	.list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }

package/dist/components/Footer.svelte

@@ -6,8 +6,12 @@
 		start,
 		center,
 		end,
+		brand,
+		meta,
+		links,
 		children,
 		variant = 'plain',
+		contained = false,
 		class: klass,
 		...rest
 	}: {
@@ -17,18 +21,31 @@
 		center?: Snippet;
 		/** Trailing region (e.g. social links). */
 		end?: Snippet;
+		/** Identity (e.g. a logo) at the start. With `brand`, `meta` or `links`, `start`/`center`/`end` are ignored. */
+		brand?: Snippet;
+		/** Small print (e.g. copyright) stacked directly under `brand`. */
+		meta?: Snippet;
+		/** One or more link groups, right-aligned on the same row when wide. */
+		links?: Snippet;
 		/** Free-form content; replaces the three regions. */
 		children?: Snippet;
 		/** `bordered` adds a top border. */
 		variant?: 'plain' | 'bordered';
+		/** Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`. */
+		contained?: boolean | 'sm' | 'md' | 'lg';
 		class?: string;
 	} & Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'> = $props();
 </script>
 
 <!-- A page-level <footer> is the contentinfo landmark; keep a single one per page. -->
-<footer {...rest} class={['ft', klass]} data-variant={variant}>
+<footer {...rest} class={['ft', klass]} data-variant={variant} data-contained={contained === true ? 'lg' : contained || undefined}>
 	{#if children}
 		<div class="in free">{@render children()}</div>
+	{:else if brand || meta || links}
+		<div class="in sem">
+			{#if brand || meta}<div class="bm">{#if brand}{@render brand()}{/if}{#if meta}<div class="meta">{@render meta()}</div>{/if}</div>{/if}
+			{#if links}<div class="l">{@render links()}</div>{/if}
+		</div>
 	{:else}
 		<div class="in">
 			<div class="s">{#if start}{@render start()}{/if}</div>
@@ -42,13 +59,23 @@
 	.ft { container-type: inline-size; background: var(--tr-surface-container); color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); }
 	.ft[data-variant='bordered'] { border-top: 1px solid var(--tr-outline-variant); }
 	.in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 16px; padding: 16px var(--tr-gutter, clamp(16px, 4vw, 32px)); }
+	.ft[data-contained] { --_w: var(--tr-container-max); }
+	.ft[data-contained='sm'] { --_w: 40rem; }
+	.ft[data-contained='md'] { --_w: 56rem; }
+	.ft[data-contained] .in { padding-inline: max(var(--tr-gutter, 16px), calc((100% - var(--_w)) / 2 + var(--tr-gutter, 16px))); }
+	.in.sem { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
+	.bm { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
+	.l { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; min-width: 0; }
 	.in.free { display: block; }
 	.s, .c, .e { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-width: 0; }
 	.c { justify-content: center; }
 	.e { justify-content: flex-end; }
 	.s:empty, .c:empty, .e:empty { display: none; }
+	/* each region keeps its own column, so an empty centre doesn't pull `end` into the middle */
+	.s { grid-column: 1; } .c { grid-column: 2; } .e { grid-column: 3; }
 	@container (max-width: 640px) {
 		.in:not(.free) { grid-template-columns: minmax(0, 1fr); justify-items: start; }
-		.c, .e { justify-content: flex-start; }
+		.s, .c, .e { grid-column: auto; }
+		.c, .e, .l { justify-content: flex-start; }
 	}
 </style>

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

@@ -7,10 +7,18 @@ type $$ComponentProps = {
     center?: Snippet;
     /** Trailing region (e.g. social links). */
     end?: Snippet;
+    /** Identity (e.g. a logo) at the start. With `brand`, `meta` or `links`, `start`/`center`/`end` are ignored. */
+    brand?: Snippet;
+    /** Small print (e.g. copyright) stacked directly under `brand`. */
+    meta?: Snippet;
+    /** One or more link groups, right-aligned on the same row when wide. */
+    links?: Snippet;
     /** Free-form content; replaces the three regions. */
     children?: Snippet;
     /** `bordered` adds a top border. */
     variant?: 'plain' | 'bordered';
+    /** Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`. */
+    contained?: boolean | 'sm' | 'md' | 'lg';
     class?: string;
 } & Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'>;
 declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/Link.svelte

@@ -31,7 +31,7 @@
 </a>
 
 <style>
-	.ln { color: var(--tr-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; border-radius: var(--tr-radius-sm); }
+	.ln { color: var(--tr-primary-text, var(--tr-primary)); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; border-radius: var(--tr-radius-sm); }
 	.ln:hover { text-decoration-thickness: 2px; }
 	.ln:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 2px; }
 	.ic { display: inline-flex; vertical-align: -0.15em; margin-left: 0.2em; }

package/dist/components/List.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/**
+	 * A prose list: a real `ul` (or `ol` when `ordered`) with spacing and marker styling from tokens.
+	 *
+	 * Markers: `disc` (default) and `ordered` numbering use native `list-style-type`, so they are
+	 * drawn by the browser. `check` and `dash` hide the native marker and draw one with `::before`.
+	 * `none` removes it. Ordered lists always number their items; `marker="none"` removes the numbers.
+	 * When the marker is removed or replaced (`check`, `dash`, `none`), `role="list"` is set so
+	 * Safari and VoiceOver still announce the list.
+	 *
+	 * Customise with CSS custom properties on the list or any ancestor:
+	 * `--tr-list-marker-color` (default `--tr-primary`) and `--tr-list-indent` (default `1.25rem`).
+	 * The default marker colour is the primary token, which reaches at least 3:1 contrast against
+	 * `--tr-surface` in both the light and the dark theme. A custom colour must meet that bar too.
+	 */
+	let {
+		ordered = false,
+		marker = 'disc',
+		gap = 2,
+		size = 'md',
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		/** Render an `ol` with numbered items instead of a `ul`. */
+		ordered?: boolean;
+		/** Marker style. Ordered lists number their items, so only `none` changes them. */
+		marker?: 'disc' | 'check' | 'dash' | 'none';
+		/** Space between items, from the `--tr-space-*` scale. */
+		gap?: 1 | 2 | 3 | 4 | 5 | 6;
+		size?: 'sm' | 'md';
+		class?: string;
+		/** `ListItem`s, or plain `li` elements. */
+		children?: Snippet;
+	} & HTMLAttributes<HTMLUListElement | HTMLOListElement> = $props();
+
+	const effective = $derived(ordered ? (marker === 'none' ? 'none' : 'decimal') : marker);
+	const customMarker = $derived(effective === 'check' || effective === 'dash' || effective === 'none');
+</script>
+
+<svelte:element
+	this={ordered ? 'ol' : 'ul'}
+	class="list {klass}"
+	role={customMarker ? 'list' : undefined}
+	data-marker={effective}
+	data-size={size}
+	data-gap={gap}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.list {
+		margin: 0;
+		padding: 0 0 0 var(--tr-list-indent, 1.25rem);
+		color: var(--tr-on-surface);
+		font-size: var(--tr-text-md);
+		line-height: 1.5;
+		list-style-position: outside;
+	}
+	.list[data-size='sm'] { font-size: var(--tr-text-sm); }
+
+	.list[data-marker='disc'] { list-style-type: disc; }
+	.list[data-marker='decimal'] { list-style-type: decimal; }
+	.list[data-marker='none'],
+	.list[data-marker='check'],
+	.list[data-marker='dash'] { list-style-type: none; }
+
+	/* the native marker takes the marker colour */
+	.list[data-marker='disc'] > :global(li)::marker,
+	.list[data-marker='decimal'] > :global(li)::marker {
+		color: var(--tr-list-marker-color, var(--tr-primary));
+	}
+
+	/* spacing: space between items, from the token scale */
+	.list > :global(li + li) { margin-block-start: var(--tr-list-gap, 0); }
+	.list[data-gap='1'] { --tr-list-gap: var(--tr-space-1); }
+	.list[data-gap='2'] { --tr-list-gap: var(--tr-space-2); }
+	.list[data-gap='3'] { --tr-list-gap: var(--tr-space-3); }
+	.list[data-gap='4'] { --tr-list-gap: var(--tr-space-4); }
+	.list[data-gap='5'] { --tr-list-gap: var(--tr-space-5); }
+	.list[data-gap='6'] { --tr-list-gap: var(--tr-space-6); }
+
+	/* drawn markers for check and dash */
+	.list > :global(li) { position: relative; }
+	.list[data-marker='check'] > :global(li)::before,
+	.list[data-marker='dash'] > :global(li)::before {
+		content: '';
+		position: absolute;
+		left: calc(-1 * var(--tr-list-indent, 1.25rem));
+		top: 0.3em;
+		width: 1em;
+		height: 1em;
+		background-color: var(--tr-list-marker-color, var(--tr-primary));
+	}
+	.list[data-marker='check'] > :global(li)::before {
+		width: 0.9em;
+		height: 0.9em;
+		top: 0.3em;
+		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+	}
+	.list[data-marker='dash'] > :global(li)::before {
+		left: calc(-1 * var(--tr-list-indent, 1.25rem) + 0.1em);
+		top: 0.7em;
+		width: 0.8em;
+		height: 2px;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    /** Render an `ol` with numbered items instead of a `ul`. */
+    ordered?: boolean;
+    /** Marker style. Ordered lists number their items, so only `none` changes them. */
+    marker?: 'disc' | 'check' | 'dash' | 'none';
+    /** Space between items, from the `--tr-space-*` scale. */
+    gap?: 1 | 2 | 3 | 4 | 5 | 6;
+    size?: 'sm' | 'md';
+    class?: string;
+    /** `ListItem`s, or plain `li` elements. */
+    children?: Snippet;
+} & HTMLAttributes<HTMLUListElement | HTMLOListElement>;
+declare const List: import("svelte").Component<$$ComponentProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/components/ListItem.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+
+	/** An item of a `List`. Plain `li` elements inside a `List` work too. */
+	let { class: klass = '', children, ...rest }: { class?: string; children?: Snippet } & HTMLLiAttributes = $props();
+</script>
+
+<li class="item {klass}" {...rest}>{@render children?.()}</li>
+
+<style>
+	.item { min-width: 0; overflow-wrap: anywhere; }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLLiAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    class?: string;
+    children?: Snippet;
+} & HTMLLiAttributes;
+declare const ListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;

package/dist/components/Navbar.svelte

@@ -13,6 +13,8 @@
 		elevated = true,
 		collapseBelow,
 		menu,
+		menuAlign = 'center',
+		contained = false,
 		menuLabel = 'Menu',
 		class: klass,
 		...rest
@@ -27,8 +29,12 @@
 		elevated?: boolean;
 		/** Viewport width (px, or any CSS length such as `48rem`) at or below which `menu` moves into a drawer behind a menu button. */
 		collapseBelow?: string | number;
-		/** Primary navigation (usually a `<NavList>`). Shown in the centre region when wide, in a drawer when collapsed. */
+		/** Primary navigation (usually a `<NavList>`). Shown in the centre region (or at the end, see `menuAlign`) when wide, in a drawer when collapsed. */
 		menu?: Snippet;
+		/** Where `menu` sits when the bar is wide: the centre region, or at the trailing edge just before the `end` content. */
+		menuAlign?: 'center' | 'end';
+		/** Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`. */
+		contained?: boolean | 'sm' | 'md' | 'lg';
 		/** Accessible name of the menu button and the drawer title. */
 		menuLabel?: string;
 		class?: string;
@@ -63,10 +69,11 @@
 	});
 </script>
 
-<header {...rest} class={['nb', klass]} data-sticky={sticky} data-variant={variant} data-elevated={elevated}>
+<header {...rest} class={['nb', klass]} data-sticky={sticky} data-variant={variant} data-elevated={elevated} data-contained={contained === true ? 'lg' : contained || undefined}>
 	<div class="s">{#if start}{@render start()}{/if}</div>
-	<div class="c">{#if menu && !collapsed}{@render menu()}{/if}{#if center}{@render center()}{/if}</div>
+	<div class="c">{#if menu && !collapsed && menuAlign !== 'end'}{@render menu()}{/if}{#if center}{@render center()}{/if}</div>
 	<div class="e">
+		{#if menu && !collapsed && menuAlign === 'end'}{@render menu()}{/if}
 		{#if end}{@render end()}{/if}
 		{#if menu && collapsed}
 			<span class="mb" bind:this={trigger}>
@@ -85,6 +92,9 @@
 
 <style>
 	.nb { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: var(--tr-navbar-h, 48px); padding: 0 12px; background: var(--tr-surface-container-low); border-bottom: 1px solid var(--tr-outline-variant); box-shadow: var(--tr-elevation-1); z-index: 20; font-family: var(--tr-font-display, var(--tr-font-sans)); letter-spacing: var(--tr-display-tracking, normal); text-transform: var(--tr-display-transform, none); }
+	.nb[data-contained] { --_w: var(--tr-container-max); padding-inline: max(var(--tr-gutter), calc((100% - var(--_w)) / 2 + var(--tr-gutter))); }
+	.nb[data-contained='sm'] { --_w: 40rem; }
+	.nb[data-contained='md'] { --_w: 56rem; }
 	.nb[data-sticky='true'] { position: sticky; top: 0; }
 	.nb[data-elevated='false'] { box-shadow: none; }
 	/* Without backdrop-filter the surface stays nearly opaque so content beneath cannot hurt legibility. */

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

@@ -11,8 +11,12 @@ type $$ComponentProps = {
     elevated?: boolean;
     /** Viewport width (px, or any CSS length such as `48rem`) at or below which `menu` moves into a drawer behind a menu button. */
     collapseBelow?: string | number;
-    /** Primary navigation (usually a `<NavList>`). Shown in the centre region when wide, in a drawer when collapsed. */
+    /** Primary navigation (usually a `<NavList>`). Shown in the centre region (or at the end, see `menuAlign`) when wide, in a drawer when collapsed. */
     menu?: Snippet;
+    /** Where `menu` sits when the bar is wide: the centre region, or at the trailing edge just before the `end` content. */
+    menuAlign?: 'center' | 'end';
+    /** Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`. */
+    contained?: boolean | 'sm' | 'md' | 'lg';
     /** Accessible name of the menu button and the drawer title. */
     menuLabel?: string;
     class?: string;

package/dist/components/Select.svelte

@@ -198,7 +198,7 @@
 	li { display: flex; align-items: center; gap: 8px; height: var(--tr-control-h); padding: 0 8px; border-radius: var(--tr-radius-sm); cursor: pointer; }
 	li span { flex: 1; }
 	li[data-active='true'] { background: var(--tr-surface-container-highest); }
-	li[aria-selected='true'] { color: var(--tr-primary); font-weight: 600; }
+	li[aria-selected='true'] { color: var(--tr-primary-text, var(--tr-primary)); font-weight: 600; }
 	li[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
 	li.empty { color: var(--tr-on-surface-variant); cursor: default; }
 </style>

package/dist/components/Slider.svelte

@@ -106,7 +106,7 @@
 	.sl[data-disabled='true'] { opacity: 0.5; }
 	.head { display: flex; justify-content: space-between; margin: 0 -8px 4px; }
 	.head .tr-label { margin: 0; }
-	.val { font: 600 var(--tr-text-sm) var(--tr-font-sans); font-variant-numeric: tabular-nums; color: var(--tr-primary); }
+	.val { font: 600 var(--tr-text-sm) var(--tr-font-sans); font-variant-numeric: tabular-nums; color: var(--tr-primary-text, var(--tr-primary)); }
 	.track { position: relative; height: 24px; cursor: pointer; touch-action: none; }
 	.sl[data-disabled='true'] .track { cursor: not-allowed; }
 	.rail, .fill { position: absolute; top: 10px; height: 4px; border-radius: 2px; }

package/dist/components/Tabs.svelte

@@ -255,7 +255,7 @@
 	[role='tab']:hover:not(:disabled) { background: var(--tr-surface-container-high); color: var(--tr-on-surface); }
 	[role='tab']:disabled { opacity: 0.45; cursor: not-allowed; }
 	[role='tab']:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
-	[role='tab'][aria-selected='true'] { color: var(--tr-primary); }
+	[role='tab'][aria-selected='true'] { color: var(--tr-primary-text, var(--tr-primary)); }
 	[role='tab'][aria-selected='true']::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--tr-primary); }
 	.panel { padding: 16px 4px; outline: none; }
 	.panel:focus-visible { box-shadow: var(--tr-focus-ring); border-radius: var(--tr-radius-sm); }

package/dist/components/Tag.svelte

@@ -43,14 +43,14 @@
 </span>
 
 <style>
-	.tag { --c: var(--tr-on-surface-variant); --cc: var(--tr-surface-container-high); --on: var(--tr-on-surface); display: inline-flex; align-items: center; gap: 4px; height: var(--tr-control-h-sm); padding: 0 8px; border-radius: var(--tr-radius-sm); background: var(--cc); color: var(--on); font: 600 var(--tr-text-sm) var(--tr-font-display); letter-spacing: var(--tr-display-tracking); text-transform: var(--tr-display-transform); white-space: nowrap; }
+	.tag { --c: var(--tr-on-surface-variant); --ct: var(--c); --cc: var(--tr-surface-container-high); --on: var(--tr-on-surface); display: inline-flex; align-items: center; gap: 4px; height: var(--tr-control-h-sm); padding: 0 8px; border-radius: var(--tr-radius-sm); background: var(--cc); color: var(--on); font: 600 var(--tr-text-sm) var(--tr-font-display); letter-spacing: var(--tr-display-tracking); text-transform: var(--tr-display-transform); white-space: nowrap; }
 	.tag[data-size='sm'] { height: 20px; padding: 0 6px; font-size: var(--tr-text-xs); }
-	.tag[data-intent='primary'] { --c: var(--tr-primary); --cc: var(--tr-primary-container); --on: var(--tr-on-primary-container); }
-	.tag[data-intent='secondary'] { --c: var(--tr-secondary); --cc: var(--tr-secondary-container); --on: var(--tr-on-secondary-container); }
-	.tag[data-intent='success'] { --c: var(--tr-success); --cc: var(--tr-success-container); --on: var(--tr-on-success-container); }
-	.tag[data-intent='warning'] { --c: var(--tr-warning); --cc: var(--tr-warning-container); --on: var(--tr-on-warning-container); }
-	.tag[data-intent='danger'] { --c: var(--tr-danger); --cc: var(--tr-danger-container); --on: var(--tr-on-danger-container); }
-	.tag[data-variant='outlined'] { background: transparent; box-shadow: inset 0 0 0 1px var(--c); color: var(--c); }
+	.tag[data-intent='primary'] { --c: var(--tr-primary); --ct: var(--tr-primary-text, var(--tr-primary)); --cc: var(--tr-primary-container); --on: var(--tr-on-primary-container); }
+	.tag[data-intent='secondary'] { --c: var(--tr-secondary); --ct: var(--tr-secondary-text, var(--tr-secondary)); --cc: var(--tr-secondary-container); --on: var(--tr-on-secondary-container); }
+	.tag[data-intent='success'] { --c: var(--tr-success); --ct: var(--tr-success); --cc: var(--tr-success-container); --on: var(--tr-on-success-container); }
+	.tag[data-intent='warning'] { --c: var(--tr-warning); --ct: var(--tr-warning); --cc: var(--tr-warning-container); --on: var(--tr-on-warning-container); }
+	.tag[data-intent='danger'] { --c: var(--tr-danger); --ct: var(--tr-danger); --cc: var(--tr-danger-container); --on: var(--tr-on-danger-container); }
+	.tag[data-variant='outlined'] { background: transparent; box-shadow: inset 0 0 0 1px var(--c); color: var(--ct); }
 	.main { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
 	.tag:has(.main:hover) { background: color-mix(in srgb, var(--on) 10%, var(--cc)); }
 	.main:focus-visible, .x:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); border-radius: var(--tr-radius-sm); }

package/dist/components/Text.svelte

@@ -27,7 +27,7 @@
 	.tx[data-size='lg'] { font-size: var(--tr-text-lg); }
 	.tx[data-size='xl'] { font-size: var(--tr-text-xl); }
 	.tx[data-tone='muted'] { color: var(--tr-on-surface-variant); }
-	.tx[data-tone='primary'] { color: var(--tr-primary); }
+	.tx[data-tone='primary'] { color: var(--tr-primary-text, var(--tr-primary)); }
 	.tx[data-tone='success'] { color: var(--tr-success); }
 	.tx[data-tone='warning'] { color: var(--tr-warning); }
 	.tx[data-tone='danger'] { color: var(--tr-danger); }

package/dist/index.d.ts

@@ -43,6 +43,8 @@ export { default as Image } from './components/Image.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as DescriptionTerm } from './components/DescriptionTerm.svelte';
 export { default as DescriptionDetail } from './components/DescriptionDetail.svelte';
+export { default as List } from './components/List.svelte';
+export { default as ListItem } from './components/ListItem.svelte';
 export { default as Container } from './components/Container.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Cluster } from './components/Cluster.svelte';

package/dist/index.js

@@ -43,6 +43,8 @@ export { default as Image } from './components/Image.svelte';
 export { default as DescriptionList } from './components/DescriptionList.svelte';
 export { default as DescriptionTerm } from './components/DescriptionTerm.svelte';
 export { default as DescriptionDetail } from './components/DescriptionDetail.svelte';
+export { default as List } from './components/List.svelte';
+export { default as ListItem } from './components/ListItem.svelte';
 export { default as Container } from './components/Container.svelte';
 export { default as Stack } from './components/Stack.svelte';
 export { default as Cluster } from './components/Cluster.svelte';

package/dist/styles/tokens.css

@@ -66,6 +66,7 @@
 	--tr-dur: 160ms;
 
 	/* Color roles — light */
+	/* --tr-primary-text / --tr-secondary-text are optional: unset, text follows the fill colour (also on a re-themed subtree). Set them when a brand fill is too light for small text. */
 	--tr-primary: #1f5fbf;
 	--tr-on-primary: #ffffff;
 	--tr-primary-container: #d8e4ff;

package/package.json

@@ -68,10 +68,11 @@
     "url": "git+https://github.com/ruckc/truss-ui.git"
   },
   "scripts": {
+    "check:contrast": "node scripts/check-contrast.mjs",
     "build": "npm run docs && vite build",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && node scripts/component-count.mjs --check",
     "dev": "vite dev",
-    "docs": "node scripts/extract-api.mjs",
+    "docs": "node scripts/extract-api.mjs && node scripts/component-count.mjs",
     "package": "svelte-kit sync && svelte-package",
     "package:all": "npm run package && npm run package --workspaces",
     "preview": "vite preview",
@@ -86,7 +87,7 @@
   "svelte": "./dist/index.js",
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "workspaces": [
     "packages/*"
   ]