@dorsk/tsumikit 0.38.0 → 0.39.0

package/dist/components/atoms/Dot.svelte.d.ts

@@ -1,13 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
 type Status = 'active' | 'stale' | 'dead' | 'hibernated';
-type $$ComponentProps = {
+type Own = {
     status?: Status;
     color?: string;
     label?: string;
     glow?: boolean;
     ring?: boolean;
+    /** Focusable (`tabindex=0`, `role=img`) so it can anchor a Tooltip. */
+    interactive?: boolean;
     class?: string;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLSpanElement>, keyof Own> & Own;
 declare const Dot: import("svelte").Component<$$ComponentProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;
 export default Dot;

package/dist/components/atoms/Gauge.svelte

@@ -20,24 +20,10 @@
 </script>
 
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
 
-	let {
-		value,
-		variant = 'continuous',
-		segments = 3,
-		tone,
-		warnAt = 70,
-		dangerAt = 90,
-		label,
-		as = 'div',
-		width,
-		height,
-		corner,
-		class: klass = '',
-		style = '',
-		...rest
-	}: {
+	type Own = {
 		value: number;
 		variant?: 'continuous' | 'segments';
 		// `segments` variant only: number of stacked bars, lit bottom-up.
@@ -53,8 +39,23 @@
 		corner?: Snippet;
 		class?: string;
 		style?: string;
-		[key: string]: unknown;
-	} = $props();
+	};
+	let {
+		value,
+		variant = 'continuous',
+		segments = 3,
+		tone,
+		warnAt = 70,
+		dangerAt = 90,
+		label,
+		as = 'div',
+		width,
+		height,
+		corner,
+		class: klass = '',
+		style = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
 	const pct = $derived(clampPct(value));
 	const resolvedTone = $derived(tone ?? gaugeTone(pct, warnAt, dangerAt));

package/dist/components/atoms/Gauge.svelte.d.ts

@@ -2,8 +2,9 @@ export type GaugeTone = 'ok' | 'warn' | 'danger';
 export declare function clampPct(value: number): number;
 export declare function gaugeTone(value: number, warnAt?: number, dangerAt?: number): GaugeTone;
 export declare function litSegments(value: number, segments?: number): number;
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+type Own = {
     value: number;
     variant?: 'continuous' | 'segments';
     segments?: number;
@@ -17,8 +18,8 @@ type $$ComponentProps = {
     corner?: Snippet;
     class?: string;
     style?: string;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Gauge: import("svelte").Component<$$ComponentProps, {}, "">;
 type Gauge = ReturnType<typeof Gauge>;
 export default Gauge;

package/dist/components/atoms/Heading.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	// Heading primitive: the ONLY place an <h1>–<h6> is emitted. `level` picks both
 	// the semantic tag and the default display size; `size` overrides the visual
 	// size independently of the level (e.g. toolbar chrome pinned smaller than its
@@ -7,23 +8,7 @@
 
 	type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
-	let {
-		level = 2,
-		size,
-		tone = 'default',
-		truncate = false,
-		italic = false,
-		nowrap = false,
-		wrap = 'normal',
-		uppercase = false,
-		leading,
-		measure,
-		grow = false,
-		scale = true,
-		class: klass = '',
-		children,
-		...rest
-	}: {
+	type Own = {
 		level?: 1 | 2 | 3 | 4 | 5 | 6;
 		size?: Size;
 		tone?: 'default' | 'muted' | 'faint';
@@ -40,8 +25,24 @@
 		scale?: boolean;
 		class?: string;
 		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
+	};
+	let {
+		level = 2,
+		size,
+		tone = 'default',
+		truncate = false,
+		italic = false,
+		nowrap = false,
+		wrap = 'normal',
+		uppercase = false,
+		leading,
+		measure,
+		grow = false,
+		scale = true,
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLHeadingElement>, keyof Own> & Own = $props();
 
 	// Default display size per rank (h1 biggest). `size` overrides it.
 	const DEFAULT_SIZE: Record<number, Size> = { 1: '2xl', 2: 'xl', 3: 'lg', 4: 'md', 5: 'sm', 6: 'xs' };

package/dist/components/atoms/Heading.svelte.d.ts

@@ -1,6 +1,7 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-type $$ComponentProps = {
+type Own = {
     level?: 1 | 2 | 3 | 4 | 5 | 6;
     size?: Size;
     tone?: 'default' | 'muted' | 'faint';
@@ -15,8 +16,8 @@ type $$ComponentProps = {
     scale?: boolean;
     class?: string;
     children?: Snippet;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLHeadingElement>, keyof Own> & Own;
 declare const Heading: import("svelte").Component<$$ComponentProps, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

package/dist/components/atoms/Icon.svelte

@@ -69,6 +69,13 @@
 		star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />',
 		heart: '<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5" />',
 		fork: '<circle cx="12" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><circle cx="18" cy="6" r="3" /><path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" /><path d="M12 12v3" />',
+		'pull-request': '<circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M13 6h3a2 2 0 0 1 2 2v7" /><line x1="6" x2="6" y1="9" y2="21" />',
+		'git-branch': '<line x1="6" x2="6" y1="3" y2="15" /><circle cx="18" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M18 9a9 9 0 0 1-9 9" />',
+		'git-commit': '<circle cx="12" cy="12" r="3" /><line x1="3" x2="9" y1="12" y2="12" /><line x1="15" x2="21" y1="12" y2="12" />',
+		'key-round': '<path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z" /><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" />',
+		'layout-grid': '<rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" />',
+		palette: '<path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z" /><circle cx="13.5" cy="6.5" r=".5" fill="currentColor" /><circle cx="17.5" cy="10.5" r=".5" fill="currentColor" /><circle cx="6.5" cy="12.5" r=".5" fill="currentColor" /><circle cx="8.5" cy="7.5" r=".5" fill="currentColor" />',
+		'git-merge': '<circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M6 21V9a9 9 0 0 0 9 9" />',
 		live: '<circle cx="12" cy="12" r="5" />',
 		eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /><circle cx="12" cy="12" r="3" />',
 		'eye-off': '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" /><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" /><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" /><path d="m2 2 20 20" />',
@@ -109,16 +116,11 @@
 </script>
 
 <script lang="ts">
+	import type { SVGAttributes } from 'svelte/elements';
 	import type { Snippet } from 'svelte';
+	import { canonicalTone, type Tone } from '../../tone';
 
-	let {
-		name,
-		size,
-		label,
-		spin = false,
-		children,
-		...rest
-	}: {
+	type Own = {
 		/** Named glyph from the registry. Omit when supplying `children`. */
 		name?: IconName;
 		/** Explicit pixel size. Omit to track the surrounding text (1em) — best
@@ -133,17 +135,35 @@
 		/** Raw SVG markup (24×24 viewBox) — overrides `name`. Pass a lucide-svelte
 		 *  component's contents here to render any icon not in the registry. */
 		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
+		/** Force fill (or outline) regardless of the glyph's default. */
+		filled?: boolean;
+		/** Semantic colour. */
+		tone?: Tone;
+		class?: string;
+		style?: string;
+	};
+	let {
+		name,
+		size,
+		label,
+		spin = false,
+		filled: filledProp,
+		tone,
+		children,
+		class: klass = '',
+		style: styleProp = '',
+		...rest
+	}: Omit<SVGAttributes<SVGSVGElement>, keyof Own> & Own = $props();
 
-	const filled = $derived(name ? FILLED.has(name) : false);
+	const filled = $derived(filledProp ?? (name ? FILLED.has(name) : false));
+	const toneColor = $derived(tone && tone !== 'neutral' ? `var(--${canonicalTone(tone)})` : undefined);
 </script>
 
 <svg
 	data-tsu="Icon"
-	class="icon"
+	class="icon {klass}"
 	class:spin
-	style={size ? `font-size: ${size}px` : undefined}
+	style="{size ? `font-size: ${size}px;` : ''}{toneColor ? `color: ${toneColor};` : ''}{styleProp}"
 	viewBox="0 0 24 24"
 	fill={filled ? 'currentColor' : 'none'}
 	stroke={filled ? 'none' : 'currentColor'}

package/dist/components/atoms/Icon.svelte.d.ts

@@ -52,6 +52,13 @@ declare const ICONS: {
     readonly star: "<path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\" />";
     readonly heart: "<path d=\"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5\" />";
     readonly fork: "<circle cx=\"12\" cy=\"18\" r=\"3\" /><circle cx=\"6\" cy=\"6\" r=\"3\" /><circle cx=\"18\" cy=\"6\" r=\"3\" /><path d=\"M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9\" /><path d=\"M12 12v3\" />";
+    readonly 'pull-request': "<circle cx=\"18\" cy=\"18\" r=\"3\" /><circle cx=\"6\" cy=\"6\" r=\"3\" /><path d=\"M13 6h3a2 2 0 0 1 2 2v7\" /><line x1=\"6\" x2=\"6\" y1=\"9\" y2=\"21\" />";
+    readonly 'git-branch': "<line x1=\"6\" x2=\"6\" y1=\"3\" y2=\"15\" /><circle cx=\"18\" cy=\"6\" r=\"3\" /><circle cx=\"6\" cy=\"18\" r=\"3\" /><path d=\"M18 9a9 9 0 0 1-9 9\" />";
+    readonly 'git-commit': "<circle cx=\"12\" cy=\"12\" r=\"3\" /><line x1=\"3\" x2=\"9\" y1=\"12\" y2=\"12\" /><line x1=\"15\" x2=\"21\" y1=\"12\" y2=\"12\" />";
+    readonly 'key-round': "<path d=\"M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z\" /><circle cx=\"16.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />";
+    readonly 'layout-grid': "<rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\" />";
+    readonly palette: "<path d=\"M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z\" /><circle cx=\"13.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\" /><circle cx=\"17.5\" cy=\"10.5\" r=\".5\" fill=\"currentColor\" /><circle cx=\"6.5\" cy=\"12.5\" r=\".5\" fill=\"currentColor\" /><circle cx=\"8.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />";
+    readonly 'git-merge': "<circle cx=\"18\" cy=\"18\" r=\"3\" /><circle cx=\"6\" cy=\"6\" r=\"3\" /><path d=\"M6 21V9a9 9 0 0 0 9 9\" />";
     readonly live: "<circle cx=\"12\" cy=\"12\" r=\"5\" />";
     readonly eye: "<path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\" /><circle cx=\"12\" cy=\"12\" r=\"3\" />";
     readonly 'eye-off': "<path d=\"M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49\" /><path d=\"M14.084 14.158a3 3 0 0 1-4.242-4.242\" /><path d=\"M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143\" /><path d=\"m2 2 20 20\" />";
@@ -77,8 +84,10 @@ declare const ICONS: {
 export type IconName = keyof typeof ICONS;
 /** True when `s` is a registered glyph name (vs. e.g. a raw emoji string). */
 export declare function isIconName(s: string): s is IconName;
+import type { SVGAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+import { type Tone } from '../../tone';
+type Own = {
     /** Named glyph from the registry. Omit when supplying `children`. */
     name?: IconName;
     /** Explicit pixel size. Omit to track the surrounding text (1em) — best
@@ -93,8 +102,14 @@ type $$ComponentProps = {
     /** Raw SVG markup (24×24 viewBox) — overrides `name`. Pass a lucide-svelte
      *  component's contents here to render any icon not in the registry. */
     children?: Snippet;
-    [key: string]: unknown;
+    /** Force fill (or outline) regardless of the glyph's default. */
+    filled?: boolean;
+    /** Semantic colour. */
+    tone?: Tone;
+    class?: string;
+    style?: string;
 };
+type $$ComponentProps = Omit<SVGAttributes<SVGSVGElement>, keyof Own> & Own;
 declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/dist/components/atoms/Input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Text input primitive. Owns its styling from theme tokens; supports
 	// `bind:value` and passes through every native <input> attribute. `mono`
 	// switches to the monospace family (paths, tokens, env values). A wrapper is
@@ -12,7 +13,7 @@
 	// layouts) to expose a height preset instead.
 	type Props = Omit<HTMLInputAttributes, 'size'> & {
 		mono?: boolean;
-		size?: 'sm' | 'md';
+		size?: ControlSize;
 		/** Fill the available width of a flex/Cluster row (flex: 1) instead of
 		 *  needing a raw `style="flex:1"` at the call-site. */
 		grow?: boolean;
@@ -90,6 +91,7 @@
 		class="input {klass}"
 		class:mono
 		class:input-sm={size === 'sm'}
+		class:input-lg={size === 'lg'}
 		class:input-grow={grow}
 		class:input-fixed={!!width && !wrapped}
 		class:input-pill={shape === 'pill'}
@@ -128,7 +130,9 @@
 <style>
 	.input {
 		width: 100%;
-		padding: var(--sp-3);
+		min-height: var(--control-height-default);
+		padding: var(--sp-2) var(--sp-3);
+		line-height: var(--lh-tight);
 		background: var(--bg);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
@@ -139,10 +143,20 @@
 		outline: none;
 		border-color: var(--accent);
 	}
+	.input:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
 	.input-sm {
-		padding: var(--sp-2);
+		min-height: var(--control-height-compact);
+		padding: var(--sp-1) var(--sp-2);
 		font-size: var(--fs-sm);
 	}
+	.input-lg {
+		min-height: var(--control-height-large);
+		padding: var(--sp-3) var(--sp-4);
+		font-size: var(--fs-base);
+	}
 	.input-grow {
 		flex: 1 1 0;
 		width: auto;

package/dist/components/atoms/Input.svelte.d.ts

@@ -1,8 +1,9 @@
+import type { ControlSize } from '../../size';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import { type IconName } from './Icon.svelte';
 type Props = Omit<HTMLInputAttributes, 'size'> & {
     mono?: boolean;
-    size?: 'sm' | 'md';
+    size?: ControlSize;
     /** Fill the available width of a flex/Cluster row (flex: 1) instead of
      *  needing a raw `style="flex:1"` at the call-site. */
     grow?: boolean;

package/dist/components/atoms/Kbd.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Keyboard shortcut chip: `keys="mod+enter"` (or an array of tokens) renders
 	// one <kbd> per key with platform-aware glyphs — `mod` is ⌘ on Mac, Ctrl
 	// elsewhere (Ctrl during SSR).
 	type Props = {
 		keys: string | string[];
-		size?: 'sm' | 'md';
+		size?: ControlSize;
+		grow?: boolean;
+		shrink?: boolean;
+		block?: boolean;
 		class?: string;
 	};
 
-	let { keys, size = 'sm', class: klass = '' }: Props = $props();
+	let { keys, size = 'sm', grow = false, shrink = true, block = false, class: klass = '' }: Props = $props();
 
 	const isMac =
 		typeof navigator !== 'undefined' &&
@@ -59,7 +63,14 @@
 	);
 </script>
 
-<span data-tsu="Kbd" class="kbd-group {klass}" class:kbd-md={size === 'md'}>
+<span
+	data-tsu="Kbd"
+	class="kbd-group {klass}"
+	class:kbd-md={size === 'md'}
+	class:grow={grow}
+	class:no-shrink={!shrink}
+	class:block={block}
+>
 	{#each tokens as token, i (i)}
 		{#if i > 0}<span class="kbd-sep" aria-hidden="true">+</span>{/if}
 		<kbd class="kbd">{token}</kbd>
@@ -67,6 +78,17 @@
 </span>
 
 <style>
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.block {
+		display: flex;
+		width: 100%;
+	}
 	.kbd-group {
 		display: inline-flex;
 		align-items: center;

package/dist/components/atoms/Kbd.svelte.d.ts

@@ -1,6 +1,10 @@
+import type { ControlSize } from '../../size';
 type Props = {
     keys: string | string[];
-    size?: 'sm' | 'md';
+    size?: ControlSize;
+    grow?: boolean;
+    shrink?: boolean;
+    block?: boolean;
     class?: string;
 };
 declare const Kbd: import("svelte").Component<Props, {}, "">;

package/dist/components/atoms/Link.svelte

@@ -1,9 +1,22 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	// Inline text link — underlined accent text with no button chrome. Renders an
 	// <a> when `href` is given, otherwise a <button> (for in-page actions that
 	// read as links, e.g. "Open ChatGPT again").
 	import type { Snippet } from 'svelte';
 
+	type Own = {
+		href?: string;
+		target?: string;
+		rel?: string;
+		download?: string | boolean;
+		tone?: 'accent' | 'info' | 'muted' | 'inherit';
+		underline?: 'always' | 'hover' | 'none';
+		// Text alignment of the <button> form; multi-line titles want `start`.
+		align?: 'start' | 'center';
+		class?: string;
+		children?: Snippet;
+	};
 	let {
 		href,
 		tone = 'accent',
@@ -12,16 +25,7 @@
 		class: klass = '',
 		children,
 		...rest
-	}: {
-		href?: string;
-		tone?: 'accent' | 'info' | 'muted' | 'inherit';
-		underline?: 'always' | 'hover' | 'none';
-		// Text alignment of the <button> form; multi-line titles want `start`.
-		align?: 'start' | 'center';
-		class?: string;
-		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 </script>
 
 {#if href}
@@ -33,10 +37,10 @@
 	>
 {:else}
 	<button
-		type="button"
 		class="link tone-{tone} underline-{underline} align-{align} {klass}"
 		data-tsu="Link"
-		{...rest}>{@render children?.()}</button
+		{...rest}
+		type="button">{@render children?.()}</button
 	>
 {/if}
 

package/dist/components/atoms/Link.svelte.d.ts

@@ -1,13 +1,17 @@
+import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+type Own = {
     href?: string;
+    target?: string;
+    rel?: string;
+    download?: string | boolean;
     tone?: 'accent' | 'info' | 'muted' | 'inherit';
     underline?: 'always' | 'hover' | 'none';
     align?: 'start' | 'center';
     class?: string;
     children?: Snippet;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;