@fuzdev/fuz_ui 0.203.0 → 0.204.0

package/dist/Alert.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte';
-	import type {SvelteHTMLElements} from 'svelte/elements';
+	import type {HTMLAttributes, SvelteHTMLElements} from 'svelte/elements';
 
 	import {alert_status_options, type AlertStatus} from './alert.js';
 
@@ -18,21 +18,28 @@
 		onclick,
 		disabled,
 		icon,
+		button_attrs,
+		div_attrs,
 		children,
 		...rest
-	}: SvelteHTMLElements['div'] &
-		SvelteHTMLElements['button'] & {
-			status?: AlertStatus;
-			color?: string;
-			// TODO this API is a mess in part because of the types, maybe an explicit `AlertButton` is better,
-			// or rethink the design because `role="alert"` can't be put on buttons.
-			// $props must be destructured, so we can't use a union with narrowing right?
-			// so `disabled` only makes sense if `onclick` is defined, and we dont get the other HTMLButtonElement attributes
-			onclick?: (() => void) | undefined;
-			disabled?: boolean;
-			icon?: string | Snippet<[icon: string]> | null | undefined; // TODO experimenting with this, gets complex in the impl
-			children: Snippet;
-		} = $props();
+	}: // generic element attrs, the common denominator of the rendered roots -
+	// branch-specific attributes go in `button_attrs`/`div_attrs`
+	HTMLAttributes<HTMLElement> & {
+		status?: AlertStatus;
+		color?: string;
+		// TODO maybe an explicit `AlertButton` is better,
+		// or rethink the design because `role="alert"` can't be put on buttons -
+		// `disabled` and `button_attrs` only make sense when `onclick` is defined
+		/** Renders the alert as a `<button>` when provided. */
+		onclick?: (() => void) | undefined;
+		disabled?: boolean;
+		icon?: string | Snippet<[icon: string]> | null | undefined; // TODO experimenting with this, gets complex in the impl
+		/** Button attributes, applied only when `onclick` renders the alert as a `<button>`. */
+		button_attrs?: SvelteHTMLElements['button'];
+		/** Div attributes, applied only when the alert renders as a `<div>` (no `onclick`). */
+		div_attrs?: SvelteHTMLElements['div'];
+		children: Snippet;
+	} = $props();
 
 	const options = $derived(alert_status_options[status]);
 	// TODO change this to use the hue and put transparency on the borders, or add a borderColor option
@@ -47,15 +54,22 @@
 	<button
 		type="button"
 		{...rest}
-		class="alert {rest.class}"
+		{...button_attrs}
+		class="alert {rest.class} {button_attrs?.class}"
 		style:--text_color={final_color}
 		{onclick}
-		{disabled}
+		disabled={disabled ?? button_attrs?.disabled}
 	>
 		{@render content()}
 	</button>
 {:else}
-	<div role="alert" {...rest} class="alert panel {rest.class}" style:--text_color={final_color}>
+	<div
+		role="alert"
+		{...rest}
+		{...div_attrs}
+		class="alert panel {rest.class} {div_attrs?.class}"
+		style:--text_color={final_color}
+	>
 		{@render content()}
 	</div>
 {/if}

package/dist/Alert.svelte.d.ts

@@ -1,12 +1,18 @@
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 import { type AlertStatus } from './alert.js';
-type $$ComponentProps = SvelteHTMLElements['div'] & SvelteHTMLElements['button'] & {
+type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots -
+HTMLAttributes<HTMLElement> & {
     status?: AlertStatus;
     color?: string;
+    /** Renders the alert as a `<button>` when provided. */
     onclick?: (() => void) | undefined;
     disabled?: boolean;
     icon?: string | Snippet<[icon: string]> | null | undefined;
+    /** Button attributes, applied only when `onclick` renders the alert as a `<button>`. */
+    button_attrs?: SvelteHTMLElements['button'];
+    /** Div attributes, applied only when the alert renders as a `<div>` (no `onclick`). */
+    div_attrs?: SvelteHTMLElements['div'];
     children: Snippet;
 };
 declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Alert.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Alert.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAuB,KAAK,WAAW,EAAC,MAAM,YAAY,CAAC;AAEjE,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GACjD,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAC9B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3D,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAgEJ,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Alert.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Alert.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,cAAc,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExE,OAAO,EAAuB,KAAK,WAAW,EAAC,MAAM,YAAY,CAAC;AAEjE,KAAK,gBAAgB,GAErB,AAFyB,wEAAwE;AAEjG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,uDAAuD;IACvD,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3D,wFAAwF;IACxF,YAAY,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IAC5C,uFAAuF;IACvF,SAAS,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAkEH,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Card.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import {page} from '$app/state';
+	import {DEV} from 'esm-env';
 	import type {Snippet} from 'svelte';
-	import type {SvelteHTMLElements} from 'svelte/elements';
+	import type {HTMLAttributes, SvelteHTMLElements} from 'svelte/elements';
 
 	// TODO think through Alert+Card APIs together, one can be a button and the other a link atm
 
@@ -10,20 +11,37 @@
 		tag,
 		align = 'left',
 		icon,
+		a_attrs,
 		children,
 		...rest
-	}: SvelteHTMLElements['div'] &
-		SvelteHTMLElements['a'] & {
-			tag?: string | undefined;
-			align?: 'left' | 'right' | 'above' | 'below';
-			icon?: string | Snippet;
-			children: Snippet;
-		} = $props();
+	}: // generic element attrs, the common denominator of the rendered roots -
+	// branch-specific attributes go in `a_attrs`
+	HTMLAttributes<HTMLElement> & {
+		/** Renders the card as an `<a>` when provided. */
+		href?: string | undefined;
+		tag?: string | undefined;
+		align?: 'left' | 'right' | 'above' | 'below';
+		icon?: string | Snippet;
+		/** Anchor attributes, applied only when `href` renders the card as an `<a>`. */
+		a_attrs?: SvelteHTMLElements['a'];
+		children: Snippet;
+	} = $props();
 
 	const link = $derived(!!href);
 	const selected = $derived(link && page.url.pathname === href);
 	const final_tag = $derived(tag ?? (link ? 'a' : 'div'));
-	const inferred_attrs = $derived(link ? {href} : undefined);
+	const inferred_attrs = $derived(link ? {...a_attrs, href} : undefined);
+
+	if (DEV) {
+		$effect(() => {
+			if (href && final_tag !== 'a') {
+				// eslint-disable-next-line no-console
+				console.error(
+					`Card received href "${href}" with tag "${final_tag}" - href renders only on an anchor`,
+				);
+			}
+		});
+	}
 
 	const left = $derived(align === 'left');
 	const right = $derived(align === 'right');
@@ -37,7 +55,7 @@
 	this={final_tag}
 	{...rest}
 	{...inferred_attrs}
-	class="card {rest.class}"
+	class="card {rest.class} {inferred_attrs?.class}"
 	class:link
 	class:selected
 	class:left

package/dist/Card.svelte.d.ts

@@ -1,9 +1,14 @@
 import type { Snippet } from 'svelte';
-import type { SvelteHTMLElements } from 'svelte/elements';
-type $$ComponentProps = SvelteHTMLElements['div'] & SvelteHTMLElements['a'] & {
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots -
+HTMLAttributes<HTMLElement> & {
+    /** Renders the card as an `<a>` when provided. */
+    href?: string | undefined;
     tag?: string | undefined;
     align?: 'left' | 'right' | 'above' | 'below';
     icon?: string | Snippet;
+    /** Anchor attributes, applied only when `href` renders the card as an `<a>`. */
+    a_attrs?: SvelteHTMLElements['a'];
     children: Snippet;
 };
 declare const Card: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Card.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GACjD,kBAAkB,CAAC,GAAG,CAAC,GAAG;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAyDJ,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Card.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,cAAc,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvE,KAAK,gBAAgB,GAErB,AAFyB,wEAAwE;AAEjG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC7B,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,gFAAgF;IAChF,OAAO,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAsEH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/ContextmenuEntry.svelte

@@ -4,6 +4,8 @@
 
 	import PendingAnimation from './PendingAnimation.svelte';
 	import {contextmenu_context, type ContextmenuRun} from './contextmenu_state.svelte.js';
+	import type {SvgData} from './svg.js';
+	import ContextmenuIcon from './ContextmenuIcon.svelte';
 
 	const {
 		run,
@@ -12,7 +14,7 @@
 		disabled: disabled_prop = false,
 	}: {
 		run: ContextmenuRun;
-		icon?: string | Snippet;
+		icon?: SvgData | string | Snippet;
 		children: Snippet;
 		disabled?: boolean;
 	} = $props();
@@ -65,11 +67,7 @@
 >
 	<div class="content">
 		<div class="icon">
-			{#if typeof icon === 'string'}
-				{icon}
-			{:else if icon}
-				{@render icon()}
-			{/if}
+			<ContextmenuIcon {icon} />
 		</div>
 		<div class="title">{@render children()}</div>
 		{#if pending}<PendingAnimation />{:else if error_message}⚠️{/if}

package/dist/ContextmenuEntry.svelte.d.ts

@@ -1,8 +1,9 @@
 import { type Snippet } from 'svelte';
 import { type ContextmenuRun } from './contextmenu_state.svelte.js';
+import type { SvgData } from './svg.js';
 type $$ComponentProps = {
     run: ContextmenuRun;
-    icon?: string | Snippet;
+    icon?: SvgData | string | Snippet;
     children: Snippet;
     disabled?: boolean;
 };

package/dist/ContextmenuEntry.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAI/C,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEtF,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkEH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ContextmenuEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAI/C,OAAO,EAAsB,KAAK,cAAc,EAAC,MAAM,+BAA+B,CAAC;AACvF,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAgEH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ContextmenuIcon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+
+	import type {SvgData} from './svg.js';
+	import Svg from './Svg.svelte';
+
+	/**
+	 * Renders a contextmenu entry's `icon` value, shared by `ContextmenuEntry`,
+	 * `ContextmenuSubmenu`, and `ContextmenuLinkEntry`. Renders nothing when
+	 * `icon` is `undefined`.
+	 *
+	 * @module
+	 */
+
+	const {
+		icon,
+	}: {
+		icon?: SvgData | string | Snippet;
+	} = $props();
+</script>
+
+{#if typeof icon === 'string'}
+	{icon}
+{:else if typeof icon === 'object'}
+	<!-- `SvgData` is a plain object; detect it positively by shape rather than
+	     introspecting the snippet (whose runtime form is opaque/unsupported). -->
+	<Svg data={icon} />
+{:else if icon}
+	{@render icon()}
+{/if}

package/dist/ContextmenuIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { SvgData } from './svg.js';
+type $$ComponentProps = {
+    icon?: SvgData | string | Snippet;
+};
+declare const ContextmenuIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextmenuIcon = ReturnType<typeof ContextmenuIcon>;
+export default ContextmenuIcon;
+//# sourceMappingURL=ContextmenuIcon.svelte.d.ts.map

package/dist/ContextmenuIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextmenuIcon.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuIcon.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AA+BH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ContextmenuLinkEntry.svelte

@@ -8,6 +8,7 @@
 	import {icon_external_link, icon_link} from './icons.js';
 	import type {SvgData} from './svg.js';
 	import Svg from './Svg.svelte';
+	import ContextmenuIcon from './ContextmenuIcon.svelte';
 
 	const {
 		href,
@@ -92,15 +93,7 @@
 		<div class="content">
 			<div class="icon">
 				{#if icon}
-					{#if typeof icon === 'string'}
-						{icon}
-					{:else if typeof icon === 'object'}
-						<!-- `SvgData` is a plain object; detect it positively by shape rather than
-						     introspecting the snippet (whose runtime form is opaque/unsupported). -->
-						<Svg data={icon} />
-					{:else}
-						{@render icon()}
-					{/if}
+					<ContextmenuIcon {icon} />
 				{:else}
 					<Svg data={external ? icon_external_link : icon_link} />
 				{/if}

package/dist/ContextmenuLinkEntry.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AA+FH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ContextmenuLinkEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuLinkEntry.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAIrC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAyFH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/ContextmenuSubmenu.svelte

@@ -5,13 +5,15 @@
 	import {contextmenu_context, contextmenu_dimensions_context} from './contextmenu_state.svelte.js';
 	import {contextmenu_calculate_submenu_translate} from './contextmenu_helpers.js';
 	import type {Dimensions} from './dimensions.svelte.js';
+	import type {SvgData} from './svg.js';
+	import ContextmenuIcon from './ContextmenuIcon.svelte';
 
 	const {
 		icon,
 		menu,
 		children,
 	}: {
-		icon?: Snippet;
+		icon?: SvgData | string | Snippet;
 		menu: Snippet;
 		children: Snippet;
 	} = $props();
@@ -87,7 +89,7 @@
 	>
 		<div class="content">
 			<div class="icon">
-				{@render icon?.()}
+				<ContextmenuIcon {icon} />
 			</div>
 			<div class="title">{@render children()}</div>
 		</div>

package/dist/ContextmenuSubmenu.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type Snippet } from 'svelte';
+import type { SvgData } from './svg.js';
 type $$ComponentProps = {
-    icon?: Snippet;
+    icon?: SvgData | string | Snippet;
     menu: Snippet;
     children: Snippet;
 };

package/dist/ContextmenuSubmenu.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuSubmenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuSubmenu.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAO9C,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA6FH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"ContextmenuSubmenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuSubmenu.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAY,KAAK,OAAO,EAAC,MAAM,QAAQ,CAAC;AAM/C,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA+FH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/ContextmenuTextEntry.svelte

@@ -1,25 +1,23 @@
 <script lang="ts">
+	import type {Snippet} from 'svelte';
+
 	import type {SvgData} from './svg.js';
-	import Svg from './Svg.svelte';
 	import ContextmenuEntry from './ContextmenuEntry.svelte';
 	import type {ContextmenuRun} from './contextmenu_state.svelte.js';
 
 	const {
 		run,
 		content,
-		icon: icon_value,
+		icon,
 	}: {
 		run: ContextmenuRun;
 		content: string; // TODO @many rethink this API
-		icon: SvgData | string;
+		icon?: SvgData | string | Snippet;
 	} = $props();
 
 	// TODO consider making this the implicit default entry, so consumers can simply declare `{run, content}`
 </script>
 
-<ContextmenuEntry {run}>
-	{#snippet icon()}{#if typeof icon_value === 'string'}{icon_value}{:else}<Svg
-				data={icon_value}
-			/>{/if}{/snippet}
+<ContextmenuEntry {run} {icon}>
 	{content}
 </ContextmenuEntry>

package/dist/ContextmenuTextEntry.svelte.d.ts

@@ -1,9 +1,10 @@
+import type { Snippet } from 'svelte';
 import type { SvgData } from './svg.js';
 import type { ContextmenuRun } from './contextmenu_state.svelte.js';
 type $$ComponentProps = {
     run: ContextmenuRun;
     content: string;
-    icon: SvgData | string;
+    icon?: SvgData | string | Snippet;
 };
 declare const ContextmenuTextEntry: import("svelte").Component<$$ComponentProps, {}, "">;
 type ContextmenuTextEntry = ReturnType<typeof ContextmenuTextEntry>;

package/dist/ContextmenuTextEntry.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextmenuTextEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuTextEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAGtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEjE,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;CACvB,CAAC;AAuBH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"ContextmenuTextEntry.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ContextmenuTextEntry.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAEtC,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,+BAA+B,CAAC;AAEjE,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,cAAc,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC;AAuBH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/CopyToClipboard.svelte

@@ -17,6 +17,7 @@
 		allow_copying_empty_string,
 		icon_button = true,
 		oncopy,
+		onclick,
 		disabled: disabled_prop,
 		children,
 		...rest
@@ -70,7 +71,10 @@
 	class:copied
 	class:failed
 	class:color_c={failed}
-	onclick={copy}
+	onclick={(e) => {
+		onclick?.(e); // before the internal handler, which is async
+		void copy(e);
+	}}
 	disabled={disabled_prop ?? (allow_copying_empty_string ? text === null : !text)}
 >
 	{#if children}

package/dist/CopyToClipboard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboard.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/CopyToClipboard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAMvD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACvD,CAAC;AAkEH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"CopyToClipboard.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/CopyToClipboard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAMvD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;CACvD,CAAC;AAsEH,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/DocsLink.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte';
+	import type {HTMLAttributes, SvelteHTMLElements} from 'svelte/elements';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
 
 	import ModuleLink from './ModuleLink.svelte';
 	import DeclarationLink from './DeclarationLink.svelte';
@@ -11,12 +13,21 @@
 		reference,
 		hash,
 		display_text,
+		a_attrs,
+		code_attrs,
 		children: children_prop,
-	}: {
+		...rest
+	}: // generic element attrs, the common denominator of the rendered roots -
+	// assignable to the anchor rest of `DeclarationLink`/`ModuleLink` and exact for `<code>`
+	OmitStrict<HTMLAttributes<HTMLElement>, 'children'> & {
 		reference: string;
 		/** URL fragment to append, with or without the `#`. */
 		hash?: string;
 		display_text?: string | null;
+		/** Anchor attributes, applied only when the reference resolves to a declaration or module link. */
+		a_attrs?: SvelteHTMLElements['a'];
+		/** Code attributes, applied only to the fallback `<code>` when the reference doesn't resolve. */
+		code_attrs?: SvelteHTMLElements['code'];
 		children?: Snippet<[Declaration | undefined, Module | undefined]>;
 	} = $props();
 
@@ -29,15 +40,15 @@
 </script>
 
 {#if declaration}
-	<DeclarationLink name={reference} {hash}>
+	<DeclarationLink {...rest} {...a_attrs} name={reference} {hash}>
 		{@render children()}
 	</DeclarationLink>
 {:else if module}
-	<ModuleLink module_path={module.path} {hash}>
+	<ModuleLink {...rest} {...a_attrs} module_path={module.path} {hash}>
 		{@render children()}
 	</ModuleLink>
 {:else}
-	<code>{@render children()}</code>
+	<code {...rest} {...code_attrs}>{@render children()}</code>
 {/if}
 
 {#snippet children()}{#if children_prop}{@render children_prop(

package/dist/DocsLink.svelte.d.ts

@@ -1,11 +1,18 @@
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
 import type { Declaration } from './declaration.svelte.js';
 import type { Module } from './module.svelte.js';
-type $$ComponentProps = {
+type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots -
+OmitStrict<HTMLAttributes<HTMLElement>, 'children'> & {
     reference: string;
     /** URL fragment to append, with or without the `#`. */
     hash?: string;
     display_text?: string | null;
+    /** Anchor attributes, applied only when the reference resolves to a declaration or module link. */
+    a_attrs?: SvelteHTMLElements['a'];
+    /** Code attributes, applied only to the fallback `<code>` when the reference doesn't resolve. */
+    code_attrs?: SvelteHTMLElements['code'];
     children?: Snippet<[Declaration | undefined, Module | undefined]>;
 };
 declare const DocsLink: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/DocsLink.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsLink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CAClE,CAAC;AA4CH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DocsLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsLink.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,cAAc,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACxE,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAK1D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAE9C,KAAK,gBAAgB,GAErB,AAFyB,wEAAwE;AAEjG,UAAU,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,mGAAmG;IACnG,OAAO,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAClC,iGAAiG;IACjG,UAAU,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;CAClE,CAAC;AAiDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/DocsMenu.svelte

@@ -29,7 +29,7 @@
 
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
 
-<DocsList {...rest} {expand_width} margin={false} class="docs-menu">
+<DocsList {...rest} {expand_width} margin={false} class="docs-menu {rest.class}">
 	<ul class="unstyled">
 		{#each Object.entries(tomes_by_category) as [category, tomes] (category)}
 			<li class="category">

package/dist/DocsPageLinks.svelte

@@ -20,7 +20,7 @@
 	const hash = $derived(page.url.hash.slice(1));
 </script>
 
-<DocsList {...rest} {expand_width} class="docs-page-links">
+<DocsList {...rest} {expand_width} class="docs-page-links {rest.class}">
 	<h4 class="mb_sm">on this page</h4>
 	{#if sidebar}
 		<div class="sidebar-wrapper">{@render content()}</div>

package/dist/EcosystemLinks.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">
+	import type {SvelteHTMLElements} from 'svelte/elements';
+
 	import {FUZ_DEV_URL} from './constants.js';
 
 	const {
 		selected,
-	}: {
+		...rest
+	}: SvelteHTMLElements['ul'] & {
 		selected?: 'fuz.dev';
 	} = $props();
 </script>
 
-<ul>
+<ul {...rest}>
 	<li>
 		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 		<a rel="me" href={FUZ_DEV_URL} class:selected={selected === 'fuz.dev'}>fuz.dev</a>

package/dist/EcosystemLinks.svelte.d.ts

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['ul'] & {
     selected?: 'fuz.dev';
 };
 declare const EcosystemLinks: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/EcosystemLinks.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EcosystemLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/EcosystemLinks.svelte"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAwBH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"EcosystemLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/EcosystemLinks.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAIvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,IAAI,CAAC,GAAG;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AA2BH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/EcosystemLinksPanel.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import EcosystemLinks from './EcosystemLinks.svelte';
 	import ProjectLinks from './ProjectLinks.svelte';
 
 	const {
 		children,
-	}: {
+		...rest
+	}: SvelteHTMLElements['section'] & {
 		children?: Snippet;
 	} = $props();
 </script>
 
-<section class="panel p_lg">
+<section {...rest} class="panel p_lg {rest.class}">
 	{#if children}
 		{@render children()}
 	{:else}

package/dist/EcosystemLinksPanel.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+import type { SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = SvelteHTMLElements['section'] & {
     children?: Snippet;
 };
 declare const EcosystemLinksPanel: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/EcosystemLinksPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EcosystemLinksPanel.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/EcosystemLinksPanel.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKnC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA4BH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"EcosystemLinksPanel.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/EcosystemLinksPanel.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,SAAS,CAAC,GAAG;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA8BH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/Hashlink.svelte

@@ -4,7 +4,7 @@
 	const {fragment, children, ...rest}: SvelteHTMLElements['a'] & {fragment: string} = $props();
 </script>
 
-<a {...rest} class="hashlink {rest.class}" href="#{fragment}" aria-label="hashlink"
+<a aria-label="hashlink" {...rest} class="hashlink {rest.class}" href="#{fragment}"
 	>{#if children}{@render children()}{:else}#{/if}</a
 >
 <span class="hashlink-scroll-target" id={fragment} aria-hidden="true"></span>

package/dist/ImgOrSvg.svelte

@@ -10,7 +10,9 @@
 		svg_attrs,
 		img_attrs,
 		...rest
-	}: SvelteHTMLElements['img'] &
+	}: // the intersection makes rest shared attributes valid for whichever branch renders -
+	// branch-specific attributes go in `svg_attrs`/`img_attrs`
+	SvelteHTMLElements['img'] &
 		SvelteHTMLElements['svg'] & {
 			src: string;
 			label?: string;
@@ -28,7 +30,6 @@
 			height?: string;
 			svg_attrs?: SvelteHTMLElements['svg'];
 			img_attrs?: SvelteHTMLElements['img'];
-			/** Shared attributes for both img and svg. */
 		} = $props();
 
 	const final_width = $derived(width ?? size);
@@ -38,9 +39,9 @@
 {#if src.endsWith('.svg')}
 	<svg
 		role="img"
-		{...rest as SvelteHTMLElements['svg']}
+		{...rest}
 		{...svg_attrs}
-		aria-label={label}
+		aria-label={label ?? svg_attrs?.['aria-label'] ?? rest['aria-label']}
 		style:width={final_width}
 		style:height={final_height}
 	>
@@ -51,7 +52,7 @@
 		{...rest}
 		{...img_attrs}
 		{src}
-		alt={label}
+		alt={label ?? img_attrs?.alt ?? rest.alt}
 		style:width={final_width}
 		style:height={final_height}
 	/>

package/dist/ImgOrSvg.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
-type $$ComponentProps = SvelteHTMLElements['img'] & SvelteHTMLElements['svg'] & {
+type $$ComponentProps = // the intersection makes rest shared attributes valid for whichever branch renders -
+SvelteHTMLElements['img'] & SvelteHTMLElements['svg'] & {
     src: string;
     label?: string;
     /**

package/dist/ImgOrSvg.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImgOrSvg.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ImgOrSvg.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GACjD,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CAEtC,CAAC;AA6BJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ImgOrSvg.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ImgOrSvg.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAErB,AAFyB,qFAAqF;AAE9G,kBAAkB,CAAC,KAAK,CAAC,GACxB,kBAAkB,CAAC,KAAK,CAAC,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IACtC,SAAS,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;CACtC,CAAC;AA6BJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/LibraryDetail.svelte

@@ -10,7 +10,9 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 <script lang="ts">
 	import {page} from '$app/state';
 	import {format_url} from '@fuzdev/fuz_util/url.js';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
 	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import {library_context, type Library} from './library.svelte.js';
 	import ImgOrSvg from './ImgOrSvg.svelte';
@@ -28,7 +30,8 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 		npm_url,
 		homepage_url,
 		children,
-	}: {
+		...rest
+	}: OmitStrict<SvelteHTMLElements['div'], 'children'> & {
 		library: Library;
 		/**
 		 * Link the module/declaration index to the library's own deployed docs
@@ -57,7 +60,7 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
 
-<div class="library-detail">
+<div {...rest} class="library-detail {rest.class}">
 	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
 	<div class="info">
 		<div class="display:flex flex:1">

package/dist/LibraryDetail.svelte.d.ts

@@ -1,6 +1,8 @@
+import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
 import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
 import { type Library } from './library.svelte.js';
-type $$ComponentProps = {
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['div'], 'children'> & {
     library: Library;
     /**
      * Link the module/declaration index to the library's own deployed docs

package/dist/LibraryDetail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAEpC,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAOjE,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AAmKH;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAOjE,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AAsKH;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/LibrarySummary.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import {page} from '$app/state';
 	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
 	import {format_url} from '@fuzdev/fuz_util/url.js';
 
 	import type {Library} from './library.svelte.js';
@@ -15,7 +16,8 @@
 		npm_url,
 		homepage_url,
 		children,
-	}: {
+		...rest
+	}: SvelteHTMLElements['div'] & {
 		library: Library;
 		repo_name?: Snippet<[repo_name: string]>;
 		logo?: Snippet<[logo_url: string, logo_alt: string]>;
@@ -29,7 +31,7 @@
 	const {pkg_json} = $derived(library);
 </script>
 
-<div class="library-summary">
+<div {...rest} class="library-summary {rest.class}">
 	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
 	<header class="box mb_lg">
 		{#if repo_name}

package/dist/LibrarySummary.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
 import type { Library } from './library.svelte.js';
-type $$ComponentProps = {
+type $$ComponentProps = SvelteHTMLElements['div'] & {
     library: Library;
     repo_name?: Snippet<[repo_name: string]>;
     logo?: Snippet<[logo_url: string, logo_alt: string]>;

package/dist/LibrarySummary.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LibrarySummary.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibrarySummary.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAGhD,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA2GH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LibrarySummary.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibrarySummary.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAGhD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,IAAI,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6GH,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/PasteFromClipboard.svelte

@@ -6,6 +6,7 @@
 	const {
 		onclipboardtext,
 		onerror,
+		onclick,
 		children,
 		...rest
 	}: SvelteHTMLElements['button'] & {
@@ -21,7 +22,8 @@
 	title="paste from clipboard"
 	{...rest}
 	class="paste-from-clipboard {rest.class}"
-	onclick={async () => {
+	onclick={async (e) => {
+		onclick?.(e); // before the await, so it stays in the user gesture context
 		try {
 			const text = await navigator.clipboard.readText();
 			onclipboardtext(text);

package/dist/PasteFromClipboard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PasteFromClipboard.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PasteFromClipboard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACjC,CAAC;AA6BH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"PasteFromClipboard.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PasteFromClipboard.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACjC,CAAC;AA+BH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/PendingButton.svelte

@@ -8,7 +8,6 @@
 		pending,
 		onclick,
 		running,
-		title: title_prop,
 		disabled: disabled_prop,
 		animation,
 		children,
@@ -33,7 +32,6 @@
 	{...rest}
 	class="pending-button {rest.class}"
 	disabled={disabled_prop ?? pending}
-	title={title_prop}
 	class:pending
 	{onclick}
 >

package/dist/PendingButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PendingButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PendingButton.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA4CH,QAAA,MAAM,aAAa;sBAxBQ,YAAY,KAAG,IAAI;MAwBa,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"PendingButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PendingButton.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA2CH,QAAA,MAAM,aAAa;sBAxBQ,YAAY,KAAG,IAAI;MAwBa,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/StyleVariableButton.svelte

@@ -8,6 +8,7 @@
 		name,
 		inline = false,
 		plain = true,
+		onclick,
 		children,
 		...rest
 	}: SvelteHTMLElements['button'] & {
@@ -32,7 +33,10 @@
 	{...rest}
 	class:inline
 	class:plain
-	onclick={() => (selected_variable.value = variable)}
+	onclick={(e) => {
+		selected_variable.value = variable;
+		onclick?.(e);
+	}}
 	>{#if children}{@render children()}{:else}<span class="font_family_mono">{name}</span
 		>{/if}</button
 >

package/dist/StyleVariableButton.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyleVariableButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/StyleVariableButton.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAgCH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"StyleVariableButton.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/StyleVariableButton.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IACvD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAoCH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/Svg.svelte

@@ -78,7 +78,7 @@
 <svg
 	viewBox={data.viewBox ?? '0 0 100 100'}
 	{...rest}
-	aria-label={label ?? data.label}
+	aria-label={label ?? data.label ?? rest['aria-label']}
 	class:inline
 	style:width={final_width}
 	style:height={final_height}

package/dist/TomeContent.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte';
+	import type {SvelteHTMLElements} from 'svelte/elements';
 	import {page} from '$app/state';
 	import {resolve} from '$app/paths';
 
@@ -13,7 +14,8 @@
 		docs_path = DOCS_PATH_DEFAULT,
 		header,
 		children,
-	}: {
+		...rest
+	}: SvelteHTMLElements['section'] & {
 		tome: Tome;
 		docs_path?: string;
 		header?: Snippet;
@@ -30,7 +32,8 @@
 </script>
 
 <section
-	class="tome-content width_atmost_md mb_xl9"
+	{...rest}
+	class="tome-content width_atmost_md mb_xl9 {rest.class}"
 	{@attach intersect(() =>
 		at_root
 			? ({intersecting}) => {

package/dist/TomeContent.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
 import { type Tome } from './tome.js';
-type $$ComponentProps = {
+type $$ComponentProps = SvelteHTMLElements['section'] & {
     tome: Tome;
     docs_path?: string;
     header?: Snippet;

package/dist/TomeContent.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TomeContent.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeContent.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,EAAe,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAIjD,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA4DH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TomeContent.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeContent.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKxD,OAAO,EAAe,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAIjD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,SAAS,CAAC,GAAG;IACxD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AA8DH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/TypeLink.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Code from '@fuzdev/fuz_code/Code.svelte';
+	import type {HTMLAttributes, SvelteHTMLElements} from 'svelte/elements';
 
 	import DeclarationLink from './DeclarationLink.svelte';
 	import {library_context} from './library.svelte.js';
@@ -7,21 +8,29 @@
 	const {
 		type,
 		hash,
-	}: {
+		a_attrs,
+		code_attrs,
+		...rest
+	}: // generic element attrs, the common denominator of the rendered roots -
+	// assignable to the anchor rest of `DeclarationLink` and the code rest of `Code`
+	HTMLAttributes<HTMLElement> & {
 		type: string;
 		/** URL fragment to append, with or without the `#`. */
 		hash?: string;
+		/** Anchor attributes, applied only when the type resolves to a declaration link. */
+		a_attrs?: SvelteHTMLElements['a'];
+		/** Code attributes, applied only to the fallback `Code` when the type doesn't resolve. */
+		code_attrs?: SvelteHTMLElements['code'];
 	} = $props();
 
 	const get_library = library_context.get();
 	const library = $derived(get_library());
 
-	// TODO is not extensible
 	// TODO maybe better name?
 </script>
 
 {#if library.declaration_by_name.has(type)}
-	<DeclarationLink name={type} {hash} />
+	<DeclarationLink {...rest} {...a_attrs} name={type} {hash} />
 {:else}
-	<Code lang="ts" content={type} inline />
+	<Code {...rest} {...code_attrs} lang="ts" content={type} inline />
 {/if}

package/dist/TypeLink.svelte.d.ts

@@ -1,7 +1,13 @@
-type $$ComponentProps = {
+import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
+type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots -
+HTMLAttributes<HTMLElement> & {
     type: string;
     /** URL fragment to append, with or without the `#`. */
     hash?: string;
+    /** Anchor attributes, applied only when the type resolves to a declaration link. */
+    a_attrs?: SvelteHTMLElements['a'];
+    /** Code attributes, applied only to the fallback `Code` when the type doesn't resolve. */
+    code_attrs?: SvelteHTMLElements['code'];
 };
 declare const TypeLink: import("svelte").Component<$$ComponentProps, {}, "">;
 type TypeLink = ReturnType<typeof TypeLink>;

package/dist/TypeLink.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TypeLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TypeLink.svelte"],"names":[],"mappings":"AAQC,KAAK,gBAAgB,GAAI;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AA2BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TypeLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TypeLink.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAE,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvE,KAAK,gBAAgB,GAErB,AAFyB,wEAAwE;AAEjG,cAAc,CAAC,WAAW,CAAC,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oFAAoF;IACpF,OAAO,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAClC,0FAA0F;IAC1F,UAAU,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;CACxC,CAAC;AA8BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_ui",
-  "version": "0.203.0",
+  "version": "0.204.0",
   "description": "Svelte UI library",
   "tagline": "friendly user zystem",
   "glyph": "🧶",