@fuzdev/fuz_ui 0.191.4 → 0.193.0

package/dist/DocsPrimaryNav.svelte

@@ -25,7 +25,7 @@
 </script>
 
 {#if enabled}
-	<div {...rest} class="docs_primary_nav {rest.class}" class:scrolled>
+	<div {...rest} class="docs-primary-nav {rest.class}" class:scrolled>
 		<div class="background" aria-hidden="true"></div>
 		<div class="content">
 			<nav aria-label="Primary nav">
@@ -43,7 +43,7 @@
 {/if}
 
 <style>
-	.docs_primary_nav {
+	.docs-primary-nav {
 		position: sticky;
 		top: 0;
 		z-index: 10;

package/dist/DocsSecondaryNav.svelte

@@ -16,14 +16,14 @@
 	const expand_width = $derived(!sidebar);
 </script>
 
-<aside {...rest} class="docs_secondary_nav unstyled {rest.class}" class:sidebar>
+<aside {...rest} class="docs-secondary-nav unstyled {rest.class}" class:sidebar>
 	<nav aria-label="Secondary nav">
 		<DocsMenu {tomes} {expand_width} />
 	</nav>
 </aside>
 
 <style>
-	.docs_secondary_nav {
+	.docs-secondary-nav {
 		/* TODO @many lots of duplicate code between `DocsSecondaryNav` and `DocsTertiaryNav` */
 		position: fixed;
 		left: 0;
@@ -48,7 +48,7 @@
 
 	/* sync this breakpoint with `Docs` */
 	@media (max-width: 800px) {
-		.docs_secondary_nav {
+		.docs-secondary-nav {
 			position: static;
 			background-color: initial;
 			align-items: initial;
@@ -56,7 +56,7 @@
 		}
 	}
 	/* TODO @many dialog navs  */
-	.docs_secondary_nav:not(.sidebar) {
+	.docs-secondary-nav:not(.sidebar) {
 		position: static;
 		background-color: initial;
 		align-items: initial;

package/dist/DocsTertiaryNav.svelte

@@ -3,7 +3,7 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import DocsPageLinks from './DocsPageLinks.svelte';
-	import {to_tome_pathname, Tome} from './tome.js';
+	import {tome_to_pathname, Tome} from './tome.js';
 	import {docs_links_context} from './docs_helpers.svelte.js';
 	import {library_context} from './library.svelte.js';
 	import TomeLink from './TomeLink.svelte';
@@ -12,20 +12,20 @@
 
 	const {
 		tomes,
-		tomes_by_name,
+		tomes_by_slug,
 		sidebar = true,
 		...rest
 	}: SvelteHTMLElements['aside'] & {
 		tomes: Array<Tome>;
-		tomes_by_name: Map<string, Tome>;
+		tomes_by_slug: Map<string, Tome>;
 		sidebar?: boolean; // TODO @many dialog navs (this shouldn't exist)
 	} = $props();
 
-	const selected_tome = $derived(tomes.find((t) => to_tome_pathname(t) === page.url.pathname));
+	const selected_tome = $derived(tomes.find((t) => tome_to_pathname(t) === page.url.pathname));
 
 	const tomes_related_to_selected = $derived(
 		selected_tome?.related_tomes
-			.map((name) => tomes_by_name.get(name))
+			.map((slug) => tomes_by_slug.get(slug))
 			.filter((t) => t !== undefined) ?? [],
 	);
 
@@ -49,22 +49,22 @@
 </script>
 
 <!-- TODO probably add a `nav` wrapper? around which? -->
-<aside {...rest} class="docs_tertiary_nav unstyled {rest.class}">
+<aside {...rest} class="docs-tertiary-nav unstyled {rest.class}">
 	{#if should_show_page_links}
 		<DocsPageLinks {sidebar} expand_width />
 	{/if}
 	{#if tomes_related_to_selected.length}
-		<section class="related_section">
+		<section class="related-section">
 			<h4 class="mb_sm">related tomes</h4>
 			<ul class="unstyled">
-				{#each tomes_related_to_selected as tome (tome.name)}
-					<li><TomeLink name={tome.name} class="menuitem" /></li>
+				{#each tomes_related_to_selected as tome (tome.slug)}
+					<li><TomeLink slug={tome.slug} class="menuitem" /></li>
 				{/each}
 			</ul>
 		</section>
 	{/if}
 	{#if modules_related_to_selected.length}
-		<section class="related_section">
+		<section class="related-section">
 			<h4 class="mb_sm">related modules</h4>
 			<ul class="unstyled">
 				{#each modules_related_to_selected as module (module.path)}
@@ -74,7 +74,7 @@
 		</section>
 	{/if}
 	{#if declarations_related_to_selected.length}
-		<section class="related_section">
+		<section class="related-section">
 			<h4 class="mb_sm">related declarations</h4>
 			<ul class="unstyled">
 				{#each declarations_related_to_selected as declaration (declaration.name)}
@@ -86,7 +86,7 @@
 </aside>
 
 <style>
-	.docs_tertiary_nav {
+	.docs-tertiary-nav {
 		/* TODO @many lots of duplicate code between `DocsSecondaryNav` and `DocsTertiaryNav` */
 		position: fixed;
 		right: 0;
@@ -104,7 +104,7 @@
 
 	/* sync this breakpoint with `/docs/+layout` */
 	@media (max-width: 1000px) {
-		.docs_tertiary_nav {
+		.docs-tertiary-nav {
 			position: static;
 			background-color: initial;
 			overflow: initial;

package/dist/DocsTertiaryNav.svelte.d.ts

@@ -2,7 +2,7 @@ import type { SvelteHTMLElements } from 'svelte/elements';
 import { Tome } from './tome.js';
 type $$ComponentProps = SvelteHTMLElements['aside'] & {
     tomes: Array<Tome>;
-    tomes_by_name: Map<string, Tome>;
+    tomes_by_slug: Map<string, Tome>;
     sidebar?: boolean;
 };
 declare const DocsTertiaryNav: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/GithubLink.svelte

@@ -75,7 +75,7 @@
 
 <!-- TODO -next-line doesnt work? -->
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
-<a {...rest} {href} class="github_link white-space:nowrap {rest.class}" rel="noopener"
+<a {...rest} {href} class="github-link white-space:nowrap {rest.class}" rel="noopener"
 	><Svg data={logo_github} inline size="var(--icon_size_xs)" class="mx_xs3 vertical-align:middle" />
 	{#if typeof final_children === 'string'}
 		<span class="font_family_mono">{final_children}</span>

package/dist/Hashlink.svelte

@@ -7,7 +7,7 @@
 <a {...rest} class="hashlink {rest.class}" href="#{fragment}" aria-label="hashlink"
 	>{#if children}{@render children()}{:else}#{/if}</a
 >
-<span class="hashlink_scroll_target" id={fragment} aria-hidden="true"></span>
+<span class="hashlink-scroll-target" id={fragment} aria-hidden="true"></span>
 
 <style>
 	/* TODO @many how can this be done generically so it's composable? currently using `:global` at usage site - ideally we'd continue to use :hover instead of JS */
@@ -21,7 +21,7 @@
 		transition: opacity var(--duration_2);
 	}
 
-	.hashlink_scroll_target {
+	.hashlink-scroll-target {
 		position: absolute;
 		top: calc(var(--font_size, var(--font_size_md)) * -4);
 		left: 0;

package/dist/HueInput.svelte

@@ -32,7 +32,7 @@
 		update_hue(parsed);
 	};
 
-	let el: HTMLInputElement | undefined = $state();
+	let el: HTMLInputElement | undefined = $state.raw();
 
 	const set_hue_from_minimap = (e: MouseEvent & {currentTarget: EventTarget & HTMLElement}) => {
 		const rect = e.currentTarget.getBoundingClientRect();
@@ -43,7 +43,7 @@
 </script>
 
 <!-- TODO consider making this a text input or otherwise editable directly -->
-<div {...rest} class="hue_input {rest.class}" style:--hue={value}>
+<div {...rest} class="hue-input {rest.class}" style:--hue={value}>
 	<label class="unstyled">
 		{#if children}<div class="title">{@render children()}</div>{/if}
 		<div class="preview">
@@ -51,7 +51,7 @@
 			<input type="number" step="0" class="hue" {value} oninput={on_input_event} />
 		</div>
 	</label>
-	<div class="minimap_wrapper">
+	<div class="minimap-wrapper">
 		<div class="minimap" onclick={set_hue_from_minimap} aria-hidden="true"></div>
 	</div>
 	<input
@@ -66,7 +66,7 @@
 </div>
 
 <style>
-	.hue_input {
+	.hue-input {
 		--outline_color: hsl(var(--hue) 50% 60%);
 		/* TODO @many figure these variables out so they're easily customized (similar pattern in a lot of places) */
 		/* --thumb_background_color: hsl(var(--hue) 50% 50%); */
@@ -84,7 +84,7 @@
 		border-top-left-radius: var(--border_radius, var(--border_radius_md));
 		border-top-right-radius: var(--border_radius, var(--border_radius_md));
 	}
-	.minimap_wrapper {
+	.minimap-wrapper {
 		padding: 0 var(--input_padding_x);
 		background: hsl(0 50% 50%) 0%;
 	}

package/dist/LibraryDetail.svelte

@@ -45,7 +45,7 @@
 
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
 
-<div class="library_detail">
+<div class="library-detail">
 	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
 	<div class="info">
 		<div class="display:flex flex:1">
@@ -55,7 +55,7 @@
 					{#if repo_name}
 						{@render repo_name(library.repo_name)}
 					{:else}
-						<div class="repo_name">
+						<div class="repo-name">
 							{library.repo_name}{#if package_json.glyph}&nbsp;{package_json.glyph}{/if}
 						</div>
 					{/if}
@@ -79,7 +79,7 @@
 					{#if npm_url}
 						{@render npm_url(library.npm_url)}
 					{:else}
-						<blockquote class="npm_url">npm i -D {package_json.name}</blockquote>
+						<blockquote class="npm-url">npm i -D {package_json.name}</blockquote>
 					{/if}
 				{/if}
 				<!-- TODO accessible HTML -->
@@ -175,7 +175,7 @@
 						class:css={module_is_css(module.path)}
 						class:json={module_is_json(module.path)}
 					>
-						<div class="module_content">
+						<div class="module-content">
 							<span class="font_size_xl">
 								<ModuleLink module_path={module.path}>
 									{module.path}
@@ -204,7 +204,7 @@
 <!-- TODO better rendering, also show author, etc -->
 
 <style>
-	.library_detail {
+	.library-detail {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
@@ -232,12 +232,12 @@
 		width: 100%;
 		margin-bottom: var(--space_lg);
 	}
-	.repo_name {
+	.repo-name {
 		font-family: var(--font_family_serif);
 		font-size: var(--font_size_xl2);
 		font-weight: 400;
 	}
-	.npm_url {
+	.npm-url {
 		font-family: var(--font_family_mono);
 		text-align: center;
 		margin-bottom: var(--space_lg);
@@ -269,7 +269,7 @@
 		margin-bottom: var(--space_xs);
 		--link_color: var(--text_70);
 	}
-	.module_content {
+	.module-content {
 		background-color: var(--shade_10);
 		border-radius: var(--border_radius_sm);
 		padding: var(--space_xs);

package/dist/LibrarySummary.svelte

@@ -29,13 +29,13 @@
 	const {package_json} = $derived(library);
 </script>
 
-<div class="library_summary">
+<div class="library-summary">
 	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
 	<header class="box mb_lg">
 		{#if repo_name}
 			{@render repo_name(library.repo_name)}
 		{:else}
-			<div class="repo_name">{library.repo_name}</div>
+			<div class="repo-name">{library.repo_name}</div>
 		{/if}
 		<!-- TODO maybe add `icon_alt` to package.json -->
 		<!-- TODO what about svg logos? maybe a package.json logo url that defaults to favicon? -->
@@ -118,14 +118,14 @@
 <!-- TODO better rendering, also show author, etc -->
 
 <style>
-	.library_summary {
+	.library-summary {
 		padding: var(--space_lg);
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		max-width: var(--max_width, var(--distance_sm));
 	}
-	.repo_name {
+	.repo-name {
 		font-family: var(--font_family_serif);
 		font-size: var(--font_size_xl2);
 		font-weight: 400;

package/dist/MdnLink.svelte

@@ -28,7 +28,7 @@
 
 <!-- TODO -next-line doesnt work? -->
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
-<a {...rest} {href} class="mdn_link white-space:nowrap {rest.class}" rel="noopener"
+<a {...rest} {href} class="mdn-link white-space:nowrap {rest.class}" rel="noopener"
 	><Svg data={logo_mdn} inline size="var(--icon_size_xs)" class="mx_xs3 vertical-align:middle" />
 	{#if typeof final_children === 'string'}
 		<span class="font_family_mono">{final_children}</span>

package/dist/ModuleLink.svelte

@@ -33,7 +33,7 @@
 	<!-- eslint-disable svelte/no-navigation-without-resolve -->
 	<a
 		{...rest}
-		class="module_link {class_prop} {color_class}"
+		class="module-link {class_prop} {color_class}"
 		href={module.url_api + (hash ? ensure_start(hash, '#') : '')}
 		{@attach contextmenu_attachment(contextmenu_entries)}
 	>

package/dist/PasteFromClipboard.svelte

@@ -20,7 +20,7 @@
 	type="button"
 	title="paste from clipboard"
 	{...rest}
-	class="paste_from_clipboard {rest.class}"
+	class="paste-from-clipboard {rest.class}"
 	onclick={async () => {
 		try {
 			const text = await navigator.clipboard.readText();

package/dist/PendingAnimation.svelte

@@ -21,7 +21,7 @@
 
 <span
 	{...rest}
-	class="pending_animation {rest.class} {inline
+	class="pending-animation {rest.class} {inline
 		? 'display:inline-flex align-items:center'
 		: 'display:flex'}"
 	class:running
@@ -35,7 +35,7 @@
 >
 
 <style>
-	.pending_animation span {
+	.pending-animation span {
 		font-size: var(--font_size, inherit);
 		display: inline-block;
 		transform: scale3d(var(--scale_x, 0.4), var(--scale_y, 0.4), var(--scale_z, 0.4));

package/dist/PendingButton.svelte

@@ -20,7 +20,7 @@
 		children: Snippet;
 	} = $props();
 
-	let el: HTMLButtonElement | undefined = $state();
+	let el: HTMLButtonElement | undefined = $state.raw();
 
 	export const focus = (options?: FocusOptions): void => el?.focus(options);
 
@@ -31,7 +31,7 @@
 	bind:this={el}
 	type="button"
 	{...rest}
-	class="pending_button {rest.class}"
+	class="pending-button {rest.class}"
 	disabled={disabled_prop ?? pending}
 	title={title_prop}
 	class:pending

package/dist/ProjectLinks.svelte

@@ -55,8 +55,8 @@
 	<a class="thumbnail row shade_00 px_md py_xs border_radius_sm mb_lg" href={project_item.url}
 		><Svg shrink={false} data={project_item.logo} size="var(--icon_size_lg)" />
 		<div class="pl_lg width_atmost_sm">
-			<div class="thumbnail_name {project_item.color_class}">{project_item.name}</div>
-			<div class="thumbnail_description font_size_md text_70 font-weight:500">
+			<div class="thumbnail-name {project_item.color_class}">{project_item.name}</div>
+			<div class="thumbnail-description font_size_md text_70 font-weight:500">
 				{project_item.description}
 				{project_item.glyph}
 			</div>
@@ -83,10 +83,10 @@
 
 		/* show the underline only on the name, not the description */
 		text-decoration: none;
-		.thumbnail_name {
+		.thumbnail-name {
 			text-decoration: underline;
 		}
-		.thumbnail_description {
+		.thumbnail-description {
 			text-decoration: none;
 		}
 	}

package/dist/Teleport.svelte

@@ -16,7 +16,7 @@
 		children: Snippet;
 	} = $props();
 
-	let el: HTMLElement | undefined | null = $state();
+	let el: HTMLElement | undefined | null = $state.raw();
 
 	$effect(() => {
 		if (el && to) {
@@ -24,7 +24,7 @@
 		}
 	});
 
-	let moved = $state(false);
+	let moved = $state.raw(false);
 
 	const move = (el: HTMLElement, to: HTMLElement): void => {
 		moved = true;

package/dist/ThemeInput.svelte

@@ -28,14 +28,14 @@
 	} = $props();
 </script>
 
-<menu {...rest} class="theme_input unstyled {rest.class}">
+<menu {...rest} class="theme-input unstyled {rest.class}">
 	{#each themes as theme (theme.name)}
 		<!-- TODO @many proper equality check, won't work when we allow editing, need an id or unique names and a deep equality check -->
 		{@const selected = theme.name === selected_theme.theme.name}
 		<li class="row" role="none">
 			<button
 				type="button"
-				class="theme_button color_a"
+				class="theme-button color_a"
 				role="menuitemradio"
 				aria-label="{theme.name} theme"
 				aria-checked={selected}
@@ -64,15 +64,15 @@
 </menu>
 
 <style>
-	.theme_button {
+	.theme-button {
 		flex: 1;
 		border-radius: 0;
 	}
-	li:first-child .theme_button {
+	li:first-child .theme-button {
 		border-top-left-radius: var(--border_radius_sm);
 		border-top-right-radius: var(--border_radius_sm);
 	}
-	li:last-child .theme_button {
+	li:last-child .theme-button {
 		border-bottom-left-radius: var(--border_radius_sm);
 		border-bottom-right-radius: var(--border_radius_sm);
 	}

package/dist/TomeContent.svelte

@@ -5,7 +5,7 @@
 
 	import TomeHeader from './TomeHeader.svelte';
 	import {tome_context, type Tome} from './tome.js';
-	import {DOCS_PATH_DEFAULT, docs_links_context, docs_slugify} from './docs_helpers.svelte.js';
+	import {DOCS_PATH_DEFAULT, docs_links_context} from './docs_helpers.svelte.js';
 	import {intersect} from './intersect.svelte.js';
 
 	const {
@@ -24,13 +24,13 @@
 
 	tome_context.set(() => tome);
 
-	const fragment = $derived(docs_slugify(tome.name));
+	const fragment = $derived(tome.slug);
 
 	const at_root = $derived(page.url.pathname === resolve(docs_path as any));
 </script>
 
 <section
-	class="tome_content width_atmost_md mb_xl9"
+	class="tome-content width_atmost_md mb_xl9"
 	{@attach intersect(() =>
 		at_root
 			? ({intersecting}) => {

package/dist/TomeHeader.svelte

@@ -3,45 +3,46 @@
 	import {DEV} from 'esm-env';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {tome_context} from './tome.js';
+	import {tome_context, tome_to_title} from './tome.js';
 	import Hashlink from './Hashlink.svelte';
-	import {docs_links_context, docs_slugify, to_docs_path_info} from './docs_helpers.svelte.js';
+	import {docs_links_context, to_docs_path_info} from './docs_helpers.svelte.js';
 
 	// eslint-disable-next-line @typescript-eslint/no-duplicate-type-constituents
 	const props: SvelteHTMLElements['h1'] | SvelteHTMLElements['h2'] = $props();
 
 	const get_tome = tome_context.get();
-	if (DEV && !get_tome) throw Error('TomeHeader expects a tome in context'); // eslint-disable-line @typescript-eslint/no-unnecessary-condition
+	if (DEV && !get_tome) throw Error('TomeHeader expects a tome in context');
 	const tome = $derived(get_tome());
 
 	const docs_links = docs_links_context.get();
 
-	const fragment = $derived(docs_slugify(tome.name));
-	const path_slug = $derived(docs_slugify(tome.name));
+	// The slug is the route segment + anchor fragment; only the visible label uses `title`.
+	const fragment = $derived(tome.slug);
+	const title = $derived(tome_to_title(tome));
 	$effect(() => {
-		const id = docs_links.add(fragment, tome.name, page.url.pathname);
+		const id = docs_links.add(fragment, title, page.url.pathname);
 		return () => docs_links.remove(id);
 	});
 
-	const {path, path_is_selected} = $derived(to_docs_path_info(path_slug, page.url.pathname));
+	const {path, path_is_selected} = $derived(to_docs_path_info(fragment, page.url.pathname));
 </script>
 
-<svelte:element this={path_is_selected ? 'h1' : 'h2'} {...props} class="tome_header">
+<svelte:element this={path_is_selected ? 'h1' : 'h2'} {...props} class="tome-header">
 	{#if path_is_selected}
-		{@render content(tome.name)}
+		{@render content(title)}
 	{:else}
 		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-		<a href={path}>{@render content(tome.name)}</a>
+		<a href={path}>{@render content(title)}</a>
 	{/if}
 	<Hashlink {fragment} />
 </svelte:element>
 
-{#snippet content(name: string)}
-	{name}
+{#snippet content(text: string)}
+	{text}
 {/snippet}
 
 <style>
-	.tome_header {
+	.tome-header {
 		position: relative;
 		display: flex;
 		align-items: center;
@@ -49,7 +50,7 @@
 		margin-top: var(--space_xl4);
 	}
 	/* TODO @many how can this be done composably? currently using `:global` at usage site - ideally we'd continue to use :hover instead of JS */
-	.tome_header:hover :global(.hashlink) {
+	.tome-header:hover :global(.hashlink) {
 		opacity: 1;
 	}
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"TomeHeader.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeHeader.svelte"],"names":[],"mappings":"AA0DA,QAAA,MAAM,UAAU,kGAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"TomeHeader.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeHeader.svelte"],"names":[],"mappings":"AA2DA,QAAA,MAAM,UAAU,kGAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/TomeLink.svelte

@@ -2,18 +2,18 @@
 	import {DEV} from 'esm-env';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {get_tome_by_name, to_tome_pathname} from './tome.js';
+	import {tome_get_by_slug, tome_to_pathname, tome_to_title, tomes_context} from './tome.js';
 	import {DOCS_PATH_DEFAULT} from './docs_helpers.svelte.js';
 
 	const {
-		name,
+		slug,
 		docs_path = DOCS_PATH_DEFAULT,
 		hash,
 		children,
 		class: class_prop = 'chip',
 		...rest
 	}: SvelteHTMLElements['a'] & {
-		name: string; // TODO type, generate from `tomes`?
+		slug: string; // TODO type, generate from `tomes`?
 		docs_path?: string;
 		/** URL fragment to append, with or without the `#`. */
 		hash?: string;
@@ -21,14 +21,21 @@
 
 	if (DEV) {
 		$effect(() => {
-			get_tome_by_name(name); // throws if not found
+			tome_get_by_slug(slug); // throws if not found
 		});
 	}
 
+	// Default link text is the tome's display title, falling back to its `slug`.
+	const get_tomes = tomes_context.get_maybe();
+	const label = $derived.by(() => {
+		const tome = get_tomes?.().get(slug);
+		return tome ? tome_to_title(tome) : slug;
+	});
+
 	// TODO add contextmenu behavior
 </script>
 
 <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-<a {...rest} class="tome_link {class_prop}" href={to_tome_pathname(name, docs_path, hash)}
-	>{#if children}{@render children()}{:else}{name}{/if}</a
+<a {...rest} class="tome-link {class_prop}" href={tome_to_pathname(slug, docs_path, hash)}
+	>{#if children}{@render children()}{:else}{label}{/if}</a
 >

package/dist/TomeLink.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['a'] & {
-    name: string;
+    slug: string;
     docs_path?: string;
     /** URL fragment to append, with or without the `#`. */
     hash?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"TomeLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeLink.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AA+BH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TomeLink.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/TomeLink.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,GAAG,CAAC,GAAG;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAsCH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/TomeSection.svelte

@@ -39,7 +39,7 @@
 	// Provide own section ID to direct children (header) via context
 	section_id_context.set(section_id);
 
-	let get_fragment: (() => string) | undefined = $state();
+	let get_fragment: (() => string) | undefined = $state.raw();
 
 	register_section_header_context.set((gf) => {
 		if (DEV && get_fragment !== undefined) {