@ruckc/truss-ui 1.2.0 → 1.4.0

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/Menu.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { tick } from 'svelte';
 	import Icon from '../icons/Icon.svelte';
+	import Kbd from './Kbd.svelte';
 	import Menu from './Menu.svelte';
 	import type { MenuEntry, MenuItem } from '../types.js';
 
@@ -69,7 +70,7 @@
 					<a href={it.href} data-i={i} role="menuitem" data-danger={it.danger} onclick={(e) => follow(e, it)}>
 						<span class="lead">{#if it.icon}<Icon name={it.icon} />{/if}</span>
 						<span class="lbl">{it.label}</span>
-						{#if it.shortcut}<kbd>{it.shortcut}</kbd>{/if}
+						{#if it.shortcut}<Kbd keys={it.shortcut} />{/if}
 					</a>
 				{:else}
 				<button
@@ -79,7 +80,7 @@
 				>
 					<span class="lead">{#if it.checked}<Icon name="tick" />{:else if it.icon}<Icon name={it.icon} />{/if}</span>
 					<span class="lbl">{it.label}</span>
-					{#if it.shortcut}<kbd>{it.shortcut}</kbd>{/if}
+					{#if it.shortcut}<Kbd keys={it.shortcut} />{/if}
 					{#if it.items}<Icon name="chevron-right" />{/if}
 				</button>
 				{/if}
@@ -102,7 +103,7 @@
 	button[data-danger='true'], a[data-danger='true'] { color: var(--tr-danger); }
 	.lead { display: inline-flex; width: 16px; flex: none; }
 	.lbl { flex: 1; }
-	kbd { font: var(--tr-text-xs) var(--tr-font-mono); color: var(--tr-on-surface-variant); }
+	.menu :global(.tr-kbd) { color: var(--tr-on-surface-variant); }
 	.sep { height: 1px; margin: 4px 0; background: var(--tr-outline-variant); }
 	.heading { padding: 6px 8px 2px; font-size: var(--tr-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tr-on-surface-variant); }
 	.sub { position: absolute; top: -5px; left: calc(100% + 2px); z-index: 60; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-2); }

package/dist/components/MultiSelect.svelte

@@ -121,8 +121,8 @@
 
 <style>
 	.multi { flex-wrap: wrap; padding: 3px 6px; gap: 4px; cursor: text; }
-	.multi .tr-bare { flex: 1 1 80px; height: 24px; }
-	.chip { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 2px 0 8px; border-radius: var(--tr-radius-pill); background: var(--tr-primary-container); color: var(--tr-on-primary-container); font-size: var(--tr-text-sm); font-weight: 600; }
+	.multi .tr-bare { flex: 1 1 80px; height: var(--tr-control-h-sm); }
+	.chip { display: inline-flex; align-items: center; gap: 2px; height: var(--tr-control-h-sm); padding: 0 2px 0 8px; border-radius: var(--tr-radius-pill); background: var(--tr-primary-container); color: var(--tr-on-primary-container); font-size: var(--tr-text-sm); font-weight: 600; }
 	.chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
 	.chip button:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
 	.chip button:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }

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/Panel.svelte

@@ -42,9 +42,9 @@
 
 <style>
 	.pnl { background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-1); overflow: hidden; }
-	header { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 12px; background: var(--tr-surface-container); }
+	header { display: flex; align-items: center; gap: 8px; min-height: calc(var(--tr-control-h) + 8px); padding: 0 8px 0 12px; background: var(--tr-surface-container); }
 	.pnl:has(.body) header { border-bottom: 1px solid var(--tr-outline-variant); }
-	.tog { display: flex; align-items: center; gap: 8px; flex: 1; min-height: 40px; margin-left: -4px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+	.tog { display: flex; align-items: center; gap: 8px; flex: 1; min-height: calc(var(--tr-control-h) + 8px); margin-left: -4px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
 	.tog:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
 	.tog :global(svg) { transition: transform var(--tr-dur) var(--tr-ease); }
 	.tog[aria-expanded='true'] :global(svg) { transform: rotate(90deg); }

package/dist/components/Popover.svelte

@@ -13,6 +13,7 @@
 		align = 'start',
 		fixed = false,
 		anchor,
+		placement,
 		children
 	}: {
 		open?: boolean;
@@ -22,11 +23,14 @@
 		/** Viewport-fixed positioning against `anchor`. */
 		fixed?: boolean;
 		anchor?: HTMLElement | null;
+		/** Side of the anchor to open on (flips to the opposite side when there is no room). Applies to `fixed` popovers only; unset keeps the default below-the-anchor placement with `align`. */
+		placement?: 'top' | 'bottom' | 'left' | 'right';
 		children: Snippet;
 	} = $props();
 
 	let el = $state<HTMLDivElement>();
 	let flip = $state(false);
+	let side = $state<string>();
 	let pos = $state({ top: 0, left: 0, minWidth: 0 });
 
 	function close(refocus: boolean) {
@@ -41,6 +45,19 @@
 			const r = host.getBoundingClientRect();
 			const h = el!.offsetHeight, w = el!.offsetWidth;
 			const above = r.bottom + h + 8 > window.innerHeight && r.top > h + 8;
+			if (fixed && placement) {
+				let p = placement;
+				if (p === 'top' && r.top < h + 8 && r.bottom + h + 8 <= window.innerHeight) p = 'bottom';
+				else if (p === 'bottom' && r.bottom + h + 8 > window.innerHeight && r.top >= h + 8) p = 'top';
+				else if (p === 'left' && r.left < w + 8 && r.right + w + 8 <= window.innerWidth) p = 'right';
+				else if (p === 'right' && r.right + w + 8 > window.innerWidth && r.left >= w + 8) p = 'left';
+				const horizontal = p === 'left' || p === 'right';
+				const left = horizontal ? (p === 'left' ? r.left - w - 4 : r.right + 4) : align === 'end' ? r.right - w : r.left;
+				const top = horizontal ? r.top : p === 'top' ? r.top - h - 4 : r.bottom + 4;
+				pos = { top: Math.min(Math.max(4, top), Math.max(4, window.innerHeight - h - 4)), left: Math.min(Math.max(4, left), Math.max(4, window.innerWidth - w - 4)), minWidth: horizontal ? 0 : r.width };
+				side = p;
+				return;
+			}
 			if (fixed) {
 				const left = align === 'end' ? r.right - w : r.left;
 				pos = { top: above ? r.top - h - 4 : r.bottom + 4, left: Math.min(Math.max(4, left), window.innerWidth - w - 4), minWidth: r.width };
@@ -58,7 +75,11 @@
 		const keyTarget: EventTarget = fixed ? window : host;
 		keyTarget.addEventListener('keydown', key as EventListener);
 		if (fixed) { window.addEventListener('scroll', place, true); window.addEventListener('resize', place); }
+		// Content that changes size while open (e.g. loaded asynchronously) moves the edge it grows from
+		const ro = fixed && placement && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(place) : undefined;
+		ro?.observe(el);
 		return () => {
+			ro?.disconnect();
 			window.removeEventListener('pointerdown', down);
 			keyTarget.removeEventListener('keydown', key as EventListener);
 			if (fixed) { window.removeEventListener('scroll', place, true); window.removeEventListener('resize', place); }
@@ -68,7 +89,7 @@
 
 {#if open}
 	<div
-		class="tr-popover" bind:this={el} data-flip={flip} data-align={align} data-fixed={fixed}
+		class="tr-popover" bind:this={el} data-flip={flip} data-align={align} data-fixed={fixed} data-placement={placement ? side : undefined}
 		style:top={fixed ? `${pos.top}px` : undefined} style:left={fixed ? `${pos.left}px` : undefined} style:min-width={fixed ? `${pos.minWidth}px` : undefined}
 	>{@render children()}</div>
 {/if}

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

@@ -7,6 +7,8 @@ type $$ComponentProps = {
     /** Viewport-fixed positioning against `anchor`. */
     fixed?: boolean;
     anchor?: HTMLElement | null;
+    /** Side of the anchor to open on (flips to the opposite side when there is no room). Applies to `fixed` popovers only; unset keeps the default below-the-anchor placement with `align`. */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
     children: Snippet;
 };
 declare const Popover: import("svelte").Component<$$ComponentProps, {}, "open">;

package/dist/components/RadioGroup.svelte

@@ -29,7 +29,7 @@
 	.rg { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
 	.rg[data-orientation='horizontal'] { flex-flow: row wrap; gap: 4px 16px; }
 	.rg legend { padding: 0; }
-	.opt { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; }
+	.opt { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tr-control-h-sm); cursor: pointer; }
 	.opt[data-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
 	.dot { flex: none; width: 18px; height: 18px; border: 1px solid var(--tr-outline); border-radius: 50%; background: var(--tr-surface-container-low); display: grid; place-items: center; transition: box-shadow var(--tr-dur) var(--tr-ease); }
 	.dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tr-primary); transform: scale(0); transition: transform var(--tr-dur-fast) var(--tr-ease); }

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/Shell.svelte

@@ -22,6 +22,7 @@
 		asideOpen = $bindable(true),
 		asideWidth = $bindable(320),
 		theme = $bindable('system'),
+		density,
 		breakpoint = 840,
 		navLabel = 'Navigation',
 		asideLabel = 'Details'
@@ -43,6 +44,8 @@
 		asideWidth?: number;
 		/** 'system' follows the OS; otherwise forces data-theme on <html>. */
 		theme?: 'system' | 'light' | 'dark';
+		/** Global density: sets `data-density` on <html>. Leave unset to keep the default (or your own attribute). */
+		density?: 'compact' | 'default' | 'comfortable';
 		/** px below which the sidebar becomes a drawer. */
 		breakpoint?: number;
 		navLabel?: string;
@@ -63,6 +66,14 @@
 		else el.dataset.theme = theme;
 	});
 
+	$effect(() => {
+		if (!density) return;
+		const el = document.documentElement;
+		const prev = el.dataset.density;
+		el.dataset.density = density;
+		return () => { if (prev === undefined) delete el.dataset.density; else el.dataset.density = prev; };
+	});
+
 	const toggleSidebar = () => (narrow ? (sidebarOpen = !sidebarOpen) : (sidebarCollapsed = !sidebarCollapsed));
 	const toggleTheme = () => {
 		const dark = theme === 'dark' || (theme === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);
@@ -133,7 +144,7 @@
 	main { grid-area: main; min-width: 0; min-height: 0; overflow: auto; outline: none; }
 	.as { grid-area: as; position: relative; width: var(--aside-w); min-height: 0; background: var(--tr-surface-container-low); border-left: 1px solid var(--tr-outline-variant); }
 	.as-body { height: 100%; overflow: auto; padding: 12px; }
-	.ft { grid-area: ft; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 24px; padding: 0 12px; background: var(--tr-surface-container); border-top: 1px solid var(--tr-outline-variant); font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); }
+	.ft { grid-area: ft; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: var(--tr-control-h-sm); padding: 0 var(--tr-space-3); background: var(--tr-surface-container); border-top: 1px solid var(--tr-outline-variant); font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); }
 	.grip { position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 5; touch-action: none; }
 	.grip::after { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background-color var(--tr-dur) var(--tr-ease); }
 	.grip:hover::after, .grip:focus-visible::after, .shell[data-resizing='true'] .grip::after { background: var(--tr-primary); }

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

@@ -26,6 +26,8 @@ type $$ComponentProps = {
     asideWidth?: number;
     /** 'system' follows the OS; otherwise forces data-theme on <html>. */
     theme?: 'system' | 'light' | 'dark';
+    /** Global density: sets `data-density` on <html>. Leave unset to keep the default (or your own attribute). */
+    density?: 'compact' | 'default' | 'comfortable';
     /** px below which the sidebar becomes a drawer. */
     breakpoint?: number;
     navLabel?: string;

package/dist/components/ShortcutSheet.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import Dialog from './Dialog.svelte';
+	import Kbd from './Kbd.svelte';
+	import { hotkeys } from '../hotkeys.svelte.js';
+
+	let {
+		open = $bindable(false),
+		shortcut = '?',
+		title = 'Keyboard shortcuts'
+	}: {
+		open?: boolean;
+		/** Key combination that toggles the sheet; `null` disables the built-in binding. */
+		shortcut?: string | null;
+		title?: string;
+	} = $props();
+
+	$effect(() => {
+		if (!shortcut) return;
+		const off = [
+			hotkeys.register(shortcut, () => (open = !open), { description: 'Show keyboard shortcuts', group: 'General' }),
+			hotkeys.register(shortcut, () => (open = false), { scope: 'shortcuts' })
+		];
+		return () => off.forEach((f) => f());
+	});
+	$effect(() => { if (open) return hotkeys.pushScope('shortcuts'); });
+
+	const groups = $derived.by(() => {
+		if (!open) return [];
+		const m = new Map<string, { shortcut: string; description: string }[]>();
+		for (const b of hotkeys.described) {
+			if (b.scope !== 'global' || (b.when && !b.when())) continue;
+			const g = b.group ?? 'General';
+			(m.get(g) ?? m.set(g, []).get(g)!).push({ shortcut: b.shortcut, description: b.description! });
+		}
+		return [...m].map(([name, items]) => ({ name, items }));
+	});
+</script>
+
+<Dialog bind:open {title}>
+	{#each groups as g (g.name)}
+		<section>
+			<h3>{g.name}</h3>
+			<dl>
+				{#each g.items as it}
+					<dt>{it.description}</dt>
+					<dd><Kbd keys={it.shortcut} /></dd>
+				{/each}
+			</dl>
+		</section>
+	{:else}
+		<p class="none">No shortcuts are registered.</p>
+	{/each}
+</Dialog>
+
+<style>
+	section + section { margin-top: 16px; }
+	h3 { margin: 0 0 4px; font-size: var(--tr-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tr-on-surface-variant); }
+	dl { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 0; }
+	dt, dd { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--tr-outline-variant); }
+	dd { justify-self: end; }
+	.none { margin: 0; color: var(--tr-on-surface-variant); }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    open?: boolean;
+    /** Key combination that toggles the sheet; `null` disables the built-in binding. */
+    shortcut?: string | null;
+    title?: string;
+};
+declare const ShortcutSheet: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ShortcutSheet = ReturnType<typeof ShortcutSheet>;
+export default ShortcutSheet;

package/dist/components/Sidebar.svelte

@@ -69,7 +69,7 @@
 	.sb > ul { flex: 1; overflow-y: auto; }
 	.head { padding: 12px 10px 4px; font-size: var(--tr-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tr-on-surface-variant); }
 	.rule { display: block; height: 1px; background: var(--tr-outline-variant); margin: 4px 4px; }
-	.item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: var(--tr-radius-pill); background: none; color: var(--tr-on-surface-variant); font: 500 var(--tr-text-md) var(--tr-font-sans); text-decoration: none; text-align: left; cursor: pointer; }
+	.item { display: flex; align-items: center; gap: 10px; width: 100%; height: calc(var(--tr-control-h) + 4px); padding: 0 10px; border: 0; border-radius: var(--tr-radius-pill); background: none; color: var(--tr-on-surface-variant); font: 500 var(--tr-text-md) var(--tr-font-sans); text-decoration: none; text-align: left; cursor: pointer; }
 	.sb[data-collapsed='true'] .item { justify-content: center; padding: 0; width: 40px; }
 	.sb[data-collapsed='true'] li { display: flex; justify-content: center; }
 	.item:hover { background: var(--tr-surface-container-high); color: var(--tr-on-surface); }
@@ -78,7 +78,7 @@
 	.lbl { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 	.sub { margin: 2px 0 2px 20px; padding-left: 8px; border-left: 1px solid var(--tr-outline-variant); }
 	.child { height: 30px; font-size: var(--tr-text-sm); }
-	.collapse { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-top: 1px solid var(--tr-outline-variant); border-radius: 0; background: none; color: var(--tr-on-surface-variant); font: 500 var(--tr-text-sm) var(--tr-font-sans); cursor: pointer; }
+	.collapse { display: flex; align-items: center; gap: 10px; height: calc(var(--tr-control-h) + 4px); padding: 0 10px; border: 0; border-top: 1px solid var(--tr-outline-variant); border-radius: 0; background: none; color: var(--tr-on-surface-variant); font: 500 var(--tr-text-sm) var(--tr-font-sans); cursor: pointer; }
 	.collapse:hover { color: var(--tr-on-surface); }
 	.collapse:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--tr-primary); }
 </style>

package/dist/components/Skeleton.svelte

@@ -3,23 +3,97 @@
 		variant = 'text',
 		lines = 1,
 		width,
-		height
-	}: { variant?: 'text' | 'rect' | 'circle'; lines?: number; width?: string | number; height?: string | number } = $props();
+		height,
+		rows,
+		cols,
+		label = 'Loading'
+	}: {
+		/** `text`, `rect` and `circle` are single bars; `table`, `tree`, `card` and `header` are layout presets sized from the density tokens. */
+		variant?: 'text' | 'rect' | 'circle' | 'table' | 'tree' | 'card' | 'header';
+		lines?: number;
+		width?: string | number;
+		height?: string | number;
+		/** Preset rows: table body rows (default 5), tree rows (6) or card text lines (3). */
+		rows?: number;
+		/** Table columns (default 4). */
+		cols?: number;
+		/** Visually hidden text announced to assistive tech while loading. */
+		label?: string;
+	} = $props();
 	const px = (v?: string | number) => (typeof v === 'number' ? `${v}px` : v);
+	const count = (n: number | undefined, d: number) => Math.max(1, Math.floor(n ?? d));
+	const preset = $derived(['table', 'tree', 'card', 'header'].includes(variant));
+	const nRows = $derived(count(rows, variant === 'tree' ? 6 : variant === 'card' ? 3 : 5));
+	const nCols = $derived(count(cols, 4));
+	// Tree depth cycles so the indent reads like a real outline; 18px per level matches Tree.
+	const depths = [0, 1, 2, 2, 1, 0, 1, 2];
+	const barW = (r: number, c: number) => `${55 + ((r * 7 + c * 13) % 5) * 9}%`;
+	const treeW = (r: number) => `${40 + ((r * 11) % 4) * 14}%`;
 </script>
 
-<span class="sk-wrap" aria-hidden="true">
-	{#each Array.from({ length: variant === 'text' ? lines : 1 }) as _, i}
-		<span class="sk" data-variant={variant} style:width={px(width) ?? (variant === 'text' && lines > 1 && i === lines - 1 ? '60%' : undefined)} style:height={px(height)}></span>
-	{/each}
+<span class="sk-root" role="status" aria-busy="true" style:width={preset && variant !== 'header' ? px(width) : undefined}>
+	<span class="vh">{label}</span>
+	<span class="sk-wrap" data-variant={preset ? variant : undefined} aria-hidden="true">
+		{#if variant === 'table'}
+			<span class="row head" style:grid-template-columns="repeat({nCols}, minmax(0, 1fr))">
+				{#each Array.from({ length: nCols }) as _, c}<span class="sk" data-variant="text" style:width="{45 + (c % 3) * 10}%"></span>{/each}
+			</span>
+			{#each Array.from({ length: nRows }) as _, r}
+				<span class="row" style:grid-template-columns="repeat({nCols}, minmax(0, 1fr))">
+					{#each Array.from({ length: nCols }) as _, c}<span class="sk" data-variant="text" style:width={barW(r, c)}></span>{/each}
+				</span>
+			{/each}
+		{:else if variant === 'tree'}
+			{#each Array.from({ length: nRows }) as _, r}
+				<span class="trow" style:padding-left="{depths[r % depths.length] * 18}px">
+					<span class="sk" data-variant="icon"></span>
+					<span class="sk" data-variant="text" style:width={treeW(r)}></span>
+				</span>
+			{/each}
+		{:else if variant === 'card'}
+			<span class="sk" data-variant="rect" style:height={px(height)}></span>
+			<span class="card-body">
+				<span class="sk" data-variant="title"></span>
+				{#each Array.from({ length: nRows }) as _, i}<span class="sk" data-variant="text" style:width={i === nRows - 1 ? '60%' : undefined}></span>{/each}
+			</span>
+		{:else if variant === 'header'}
+			<span class="hd">
+				<span class="hd-text">
+					<span class="sk" data-variant="title" style:width="40%"></span>
+					<span class="sk" data-variant="text" style:width="65%"></span>
+				</span>
+				<span class="hd-actions">
+					<span class="sk" data-variant="action"></span>
+					<span class="sk" data-variant="action"></span>
+				</span>
+			</span>
+		{:else}
+			{#each Array.from({ length: variant === 'text' ? lines : 1 }) as _, i}
+				<span class="sk" data-variant={variant} style:width={px(width) ?? (variant === 'text' && lines > 1 && i === lines - 1 ? '60%' : undefined)} style:height={px(height)}></span>
+			{/each}
+		{/if}
+	</span>
 </span>
 
 <style>
+	.sk-root { display: block; }
+	.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 	.sk-wrap { display: flex; flex-direction: column; gap: 8px; }
+	.sk-wrap[data-variant='table'], .sk-wrap[data-variant='tree'] { gap: 0; }
 	.sk { display: block; background: linear-gradient(90deg, var(--tr-surface-container-high) 25%, var(--tr-surface-container-highest) 50%, var(--tr-surface-container-high) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--tr-radius-sm); }
 	.sk[data-variant='text'] { height: 12px; }
 	.sk[data-variant='rect'] { height: 80px; border-radius: var(--tr-radius-md); }
 	.sk[data-variant='circle'] { width: 40px; height: 40px; border-radius: 50%; }
+	.sk[data-variant='title'] { height: 20px; }
+	.sk[data-variant='icon'] { flex: none; width: var(--tr-icon-sm); height: var(--tr-icon-sm); }
+	.sk[data-variant='action'] { width: calc(var(--tr-control-h) * 2.5); height: var(--tr-control-h); }
+	.row { display: grid; align-items: center; column-gap: var(--tr-space-3); height: var(--tr-row-h); padding: 0 var(--tr-space-3); border-bottom: 1px solid var(--tr-outline-variant); }
+	.row.head { height: var(--tr-row-h-head); }
+	.trow { display: flex; align-items: center; gap: var(--tr-space-2); height: var(--tr-tree-row-h); }
+	.card-body { display: flex; flex-direction: column; gap: var(--tr-space-2); }
+	.hd { display: flex; align-items: center; justify-content: space-between; gap: var(--tr-space-4); }
+	.hd-text { display: flex; flex-direction: column; gap: var(--tr-space-2); flex: 1; min-width: 0; }
+	.hd-actions { display: flex; gap: var(--tr-gap); flex: none; }
 	@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
 	@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
 </style>

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

@@ -1,8 +1,15 @@
 type $$ComponentProps = {
-    variant?: 'text' | 'rect' | 'circle';
+    /** `text`, `rect` and `circle` are single bars; `table`, `tree`, `card` and `header` are layout presets sized from the density tokens. */
+    variant?: 'text' | 'rect' | 'circle' | 'table' | 'tree' | 'card' | 'header';
     lines?: number;
     width?: string | number;
     height?: string | number;
+    /** Preset rows: table body rows (default 5), tree rows (6) or card text lines (3). */
+    rows?: number;
+    /** Table columns (default 4). */
+    cols?: number;
+    /** Visually hidden text announced to assistive tech while loading. */
+    label?: string;
 };
 declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;

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/Switch.svelte

@@ -11,7 +11,7 @@
 </label>
 
 <style>
-	.sw { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; cursor: pointer; }
+	.sw { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tr-control-h-sm); cursor: pointer; }
 	.sw[data-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
 	.track { position: relative; flex: none; width: 32px; height: 18px; border: 1px solid var(--tr-outline); border-radius: var(--tr-radius-pill); background: var(--tr-surface-container-highest); transition: background-color var(--tr-dur) var(--tr-ease); }
 	.thumb { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--tr-outline); transition: transform var(--tr-dur) var(--tr-ease), background-color var(--tr-dur) var(--tr-ease); }