@fuzdev/fuz_ui 0.191.4 → 0.193.0

package/dist/ApiIndex.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import {library_context, type Library} from './library.svelte.js';
-	import {get_tome_by_name, type Tome} from './tome.js';
+	import {tome_get_by_slug, type Tome} from './tome.js';
 	import TomeContent from './TomeContent.svelte';
 	import TomeLink from './TomeLink.svelte';
 	import DocsSearch from './DocsSearch.svelte';
@@ -10,7 +10,7 @@
 
 	const {
 		library = library_context.get(),
-		tome = get_tome_by_name('api'),
+		tome = tome_get_by_slug('api'),
 		minimal = false,
 	}: {
 		/**
@@ -40,7 +40,7 @@
 <TomeContent {tome}>
 	{#if minimal}
 		<section>
-			<p>Browse the full <TomeLink name="api" /> docs.</p>
+			<p>Browse the full <TomeLink slug="api" /> docs.</p>
 		</section>
 	{:else}
 		<section>

package/dist/ApiModule.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import {library_context, type Library} from './library.svelte.js';
-	import {get_tome_by_name, type Tome} from './tome.js';
+	import {tome_get_by_slug, type Tome} from './tome.js';
 	import TomeContent from './TomeContent.svelte';
 	import TomeSection from './TomeSection.svelte';
 	import TomeSectionHeader from './TomeSectionHeader.svelte';
@@ -13,7 +13,7 @@
 	const {
 		module_path: module_path_param,
 		library = library_context.get(),
-		tome = get_tome_by_name('api'),
+		tome = tome_get_by_slug('api'),
 	}: {
 		/**
 		 * The module path parameter from the route (e.g., "lib/Button.svelte").

package/dist/ApiModulesList.svelte

@@ -27,7 +27,7 @@
 		{#if modules.length === 0}
 			<p class="color_c">No modules match your search.</p>
 		{:else}
-			<ul class="modules_list">
+			<ul class="modules-list">
 				{#each modules as module (module.path)}
 					<li>
 						<ModuleLink module_path={module.path} />
@@ -39,14 +39,14 @@
 {/if}
 
 <style>
-	.modules_list {
+	.modules-list {
 		display: flex;
 		flex-wrap: wrap;
 		gap: var(--space_xs);
 		padding: 0;
 		list-style: none;
 	}
-	.modules_list li {
+	.modules-list li {
 		margin: 0;
 	}
 </style>

package/dist/ColorSchemeInput.svelte

@@ -17,12 +17,12 @@
 
 <!-- TODO maybe support menubar aria
 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_role -->
-<menu {...rest} class="color_scheme_control unstyled {rest.class}">
+<menu {...rest} class="color-scheme-control unstyled {rest.class}">
 	{#each color_schemes as color_scheme (color_scheme)}
 		{@const selected = color_scheme === value.color_scheme}
 		<button
 			type="button"
-			class="color_scheme color_a"
+			class="color-scheme color_a"
 			role="menuitemradio"
 			title={selected
 				? `${color_scheme} color scheme is selected`
@@ -40,7 +40,7 @@ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_ro
 </menu>
 
 <style>
-	.color_scheme_control {
+	.color-scheme-control {
 		display: flex;
 		flex-direction: row;
 		justify-content: center;
@@ -51,14 +51,14 @@ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menubar_ro
 		justify-content: center;
 		padding: 0 var(--space_lg);
 	}
-	.color_scheme {
+	.color-scheme {
 		border-radius: 0;
 	}
-	.color_scheme:first-child {
+	.color-scheme:first-child {
 		border-top-left-radius: var(--border_radius, var(--border_radius_md));
 		border-bottom-left-radius: var(--border_radius, var(--border_radius_md));
 	}
-	.color_scheme:last-child {
+	.color-scheme:last-child {
 		border-top-right-radius: var(--border_radius, var(--border_radius_md));
 		border-bottom-right-radius: var(--border_radius, var(--border_radius_md));
 	}

package/dist/ContextmenuLinkEntry.svelte

@@ -23,7 +23,7 @@
 	const get_contextmenu = contextmenu_context.get();
 	const contextmenu = $derived(get_contextmenu());
 
-	let anchor_el: HTMLAnchorElement | undefined = $state();
+	let anchor_el: HTMLAnchorElement | undefined = $state.raw();
 
 	// Register with state management for keyboard navigation
 	// When activated via keyboard, programmatically click the anchor to trigger navigation

package/dist/ContextmenuRoot.svelte

@@ -113,7 +113,7 @@
 
 	if (DEV) contextmenu_check_global_root(() => scoped); // TODO @many is this import tree-shaken?
 
-	let el: HTMLElement | undefined = $state();
+	let el: HTMLElement | undefined = $state.raw();
 
 	const {layout} = $derived(contextmenu);
 
@@ -128,11 +128,11 @@
 
 	// State for tap-then-longpress bypass detection.
 	// These values are `undefined` when unused, and `null` after being reset.
-	let touch_x: number | undefined | null = $state();
-	let touch_y: number | undefined | null = $state();
-	let first_tap_time: number | undefined | null = $state();
-	let longpress_bypass: boolean | undefined = $state();
-	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state();
+	let touch_x: number | undefined | null = $state.raw();
+	let touch_y: number | undefined | null = $state.raw();
+	let first_tap_time: number | undefined | null = $state.raw();
+	let longpress_bypass: boolean | undefined = $state.raw();
+	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state.raw();
 
 	const on_window_contextmenu = (e: MouseEvent) => {
 		// Handle the tap-then-longpress bypass gesture
@@ -273,7 +273,7 @@
 
 {#if scoped}
 	<div
-		class="contextmenu_root"
+		class="contextmenu-root"
 		role="region"
 		oncontextmenu={on_window_contextmenu}
 		ontouchstartcapture={!bypass_with_tap_then_longpress ? undefined : touchstart}
@@ -287,7 +287,7 @@
 
 {#if !contextmenu.has_custom_layout}
 	<div
-		class="contextmenu_layout"
+		class="contextmenu-layout"
 		bind:clientWidth={layout.width}
 		bind:clientHeight={layout.height}
 		aria-hidden="true"
@@ -335,7 +335,7 @@
 {/snippet}
 
 <style>
-	.contextmenu_root {
+	.contextmenu-root {
 		display: contents;
 	}
 	.contextmenu {
@@ -356,7 +356,7 @@
 		border-radius: var(--contextmenu_border_radius, var(--border_radius_xs));
 	}
 
-	.contextmenu_layout {
+	.contextmenu-layout {
 		z-index: -200;
 		position: fixed;
 		inset: 0;

package/dist/ContextmenuRootForSafariCompatibility.svelte

@@ -127,7 +127,7 @@
 
 	if (DEV) contextmenu_check_global_root(() => scoped); // TODO @many is this import tree-shaken?
 
-	let el: HTMLElement | undefined = $state();
+	let el: HTMLElement | undefined = $state.raw();
 
 	const {layout} = $derived(contextmenu);
 
@@ -144,34 +144,34 @@
 
 	// State for tap-then-longpress bypass detection.
 	// These values are `undefined` when unused, and `null` after being reset.
-	let touch_x: number | undefined | null = $state();
-	let touch_y: number | undefined | null = $state();
-	let first_tap_time: number | undefined | null = $state();
-	let longpress_timeout: NodeJS.Timeout | undefined | null = $state();
-	let longpress_opened: boolean | undefined = $state();
-	let longpress_bypass: boolean | undefined = $state();
-	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state();
+	let touch_x: number | undefined | null = $state.raw();
+	let touch_y: number | undefined | null = $state.raw();
+	let first_tap_time: number | undefined | null = $state.raw();
+	let longpress_timeout: NodeJS.Timeout | undefined | null = $state.raw();
+	let longpress_opened: boolean | undefined = $state.raw();
+	let longpress_bypass: boolean | undefined = $state.raw();
+	let tap_tracking_timeout: NodeJS.Timeout | undefined | null = $state.raw();
 
 	/**
 	 * Blocks the next click event. Set to true when a longpress completes to prevent
 	 * iOS's synthesized click from activating the first menu item.
 	 */
-	let block_next_click = $state(false);
+	let block_next_click = $state.raw(false);
 
 	/**
-	 * Adds contextmenu_pending class to body during longpress tracking.
+	 * Adds contextmenu-pending class to body during longpress tracking.
 	 * This applies aggressive user-select/touch-callout blocking via CSS
 	 * to give iOS the earliest possible signal to not show selection UI.
 	 */
 	const add_contextmenu_pending_class = (): void => {
-		document.body.classList.add('contextmenu_pending');
+		document.body.classList.add('contextmenu-pending');
 	};
 
 	/**
-	 * Removes contextmenu_pending class from body when tracking ends.
+	 * Removes contextmenu-pending class from body when tracking ends.
 	 */
 	const remove_contextmenu_pending_class = (): void => {
-		document.body.classList.remove('contextmenu_pending');
+		document.body.classList.remove('contextmenu-pending');
 	};
 
 	/**
@@ -206,7 +206,7 @@
 	 * Resets all state - both longpress and tap tracking.
 	 */
 	const reset_all = (): void => {
-		reset_longpress_timeout(); // Also removes contextmenu_pending class
+		reset_longpress_timeout(); // Also removes contextmenu-pending class
 		reset_tap_tracking();
 	};
 
@@ -419,7 +419,7 @@
 
 {#if scoped}
 	<div
-		class="contextmenu_root"
+		class="contextmenu-root"
 		role="region"
 		oncontextmenu={on_window_contextmenu}
 		{@attach touch_event_attachment}
@@ -432,7 +432,7 @@
 
 {#if !contextmenu.has_custom_layout}
 	<div
-		class="contextmenu_layout"
+		class="contextmenu-layout"
 		bind:clientWidth={layout.width}
 		bind:clientHeight={layout.height}
 		aria-hidden="true"
@@ -487,7 +487,7 @@
 {/snippet}
 
 <style>
-	:global(body.contextmenu_pending) {
+	:global(body.contextmenu-pending) {
 		/* Applied during active longpress tracking.
 		   Aggressive blocking to give iOS earliest possible signal to not show selection UI.
 		   Combined with preventDefault() in touchmove for defense in depth. */
@@ -496,7 +496,7 @@
 		-webkit-touch-callout: none !important;
 	}
 
-	.contextmenu_root {
+	.contextmenu-root {
 		display: contents;
 	}
 	.contextmenu {
@@ -525,7 +525,7 @@
 	}
 
 	/* TODO better way to do this? */
-	.contextmenu_layout {
+	.contextmenu-layout {
 		z-index: -200;
 		position: fixed;
 		inset: 0;

package/dist/ContextmenuSeparator.svelte

@@ -4,12 +4,12 @@
 	const {...rest}: SvelteHTMLElements['li'] = $props();
 </script>
 
-<li role="separator" aria-orientation="vertical" {...rest} class:contextmenu_separator={true}></li>
+<li role="separator" aria-orientation="vertical" {...rest} class:contextmenu-separator={true}></li>
 
 <style>
-	.contextmenu_separator {
+	.contextmenu-separator {
 		height: var(--border_width);
-		margin: var(--spacing_xs) var(--spacing_sm);
+		margin: var(--space_xs) var(--space_sm);
 		background-color: var(--border_color_10);
 		list-style: none;
 	}

package/dist/ContextmenuSubmenu.svelte

@@ -25,13 +25,13 @@
 
 	const {selected} = $derived(submenu);
 
-	let el: HTMLElement | undefined = $state();
+	let el: HTMLElement | undefined = $state.raw();
 
 	const parent_dimensions = contextmenu_dimensions_context.get();
 	const dimensions = contextmenu_dimensions_context.set();
 
-	let translate_x = $state(0);
-	let translate_y = $state(0);
+	let translate_x = $state.raw(0);
+	let translate_y = $state.raw(0);
 	$effect(() => {
 		if (el) update_position(el, layout, parent_dimensions);
 	});

package/dist/CopyToClipboard.svelte

@@ -30,8 +30,8 @@
 	} = $props();
 
 	// These are for visual feedback
-	let copied = $state(false);
-	let failed = $state(false);
+	let copied = $state.raw(false);
+	let failed = $state.raw(false);
 	let copy_timeout: NodeJS.Timeout | undefined;
 
 	const copy = async (e: MouseEvent) => {
@@ -62,7 +62,7 @@
 	type="button"
 	title="copy to clipboard"
 	{...rest}
-	class="copy_to_clipboard {rest.class}"
+	class="copy-to-clipboard {rest.class}"
 	class:icon_button={children ? false : icon_button}
 	class:copied
 	class:failed

package/dist/DeclarationLink.svelte

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

package/dist/Dialog.svelte

@@ -58,7 +58,7 @@
 	const ROOT_SELECTOR = 'body'; // TODO make configurable
 	const CONTAINER_ID = 'fuz_dialog';
 
-	let container_el: HTMLElement | undefined = $state();
+	let container_el: HTMLElement | undefined = $state.raw();
 	$effect(() => {
 		update_container_el(container);
 	});
@@ -83,8 +83,8 @@
 		}
 	};
 
-	let dialog_el: HTMLElement | undefined = $state();
-	let content_el: HTMLElement | undefined = $state();
+	let dialog_el: HTMLElement | undefined = $state.raw();
+	let content_el: HTMLElement | undefined = $state.raw();
 
 	const close = (e?: Event) => {
 		if (e) swallow(e);
@@ -106,7 +106,7 @@
 
 	// The dialog isn't "ready" until the teleport moves it.
 	// Rendering the the dialog's children only once it's ready fixes things like `autofocus`.
-	let ready = $state(false);
+	let ready = $state.raw(false);
 </script>
 
 <svelte:window onkeydown={active ? on_window_keydown : undefined} />
@@ -129,16 +129,16 @@
 	<div
 		class="dialog"
 		class:ready
-		class:layout_page={layout === 'page'}
+		class:layout-page={layout === 'page'}
 		role="dialog"
 		aria-modal="true"
 		bind:this={dialog_el}
 		tabindex="-1"
 		style:z-index={100 + index}
 	>
-		<div class="dialog_layout">
+		<div class="dialog-layout">
 			<div
-				class="dialog_wrapper"
+				class="dialog-wrapper"
 				role="none"
 				onmousedown={(e) => {
 					// Close if clicking outside `content_el` but inside the wrapper
@@ -153,8 +153,8 @@
 					}
 				}}
 			>
-				<div class="dialog_bg" aria-hidden="true"></div>
-				<div class="dialog_content" bind:this={content_el}>
+				<div class="dialog-bg" aria-hidden="true"></div>
+				<div class="dialog-content" bind:this={content_el}>
 					<!-- mount the content only after teleporting to avoid issues -->
 					{#if ready}{@render children(close)}{/if}
 				</div>
@@ -180,18 +180,18 @@
 		overscroll-behavior: contain;
 	}
 
-	.dialog_wrapper {
+	.dialog-wrapper {
 		position: relative; /* for the surface */
 		min-height: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
-	.layout_page .dialog_wrapper {
+	.layout-page .dialog-wrapper {
 		align-items: start;
 	}
 
-	.dialog_bg {
+	.dialog-bg {
 		position: absolute;
 		inset: 0;
 		z-index: 0;
@@ -199,23 +199,23 @@
 		transition: opacity var(--duration_3) ease;
 		background-color: var(--dialog_bg, var(--darken_60));
 	}
-	.ready .dialog_bg {
+	.ready .dialog-bg {
 		opacity: 1;
 	}
 
-	.dialog_layout {
+	.dialog-layout {
 		height: 100%;
 		/* makes the content overflow downwards instead of upwards+downwards because it's centered */
 		max-height: 100%;
 	}
 
-	.dialog_content {
+	.dialog-content {
 		width: 100%;
 		transform: scale(0.99);
 		transition: transform var(--duration_1) ease;
 		padding: 40px;
 	}
-	.ready .dialog_content {
+	.ready .dialog-content {
 		transform: scale(1);
 	}
 </style>

package/dist/Docs.svelte

@@ -27,8 +27,8 @@
 	} = $props();
 
 	// TODO this API is messy, inconsistent usage of props/context
-	const tomes_by_name = $derived(new Map(tomes.map((t) => [t.name, t])));
-	tomes_context.set(() => tomes_by_name);
+	const tomes_by_slug = $derived(new Map(tomes.map((t) => [t.slug, t])));
+	tomes_context.set(() => tomes_by_slug);
 
 	// TODO @many dialog navs - this is messy to satisfy SSR with the current design that puts the secondary nav in a dialog
 	const TERTIARY_NAV_BREAKPOINT = 1000;
@@ -36,7 +36,7 @@
 
 	const docs_menu_width = '180px';
 
-	let show_secondary_nav_dialog = $state(false);
+	let show_secondary_nav_dialog = $state.raw(false);
 	const toggle_secondary_nav_dialog = (show?: boolean): void => {
 		show_secondary_nav_dialog = show ?? !show_secondary_nav_dialog;
 	};
@@ -52,14 +52,14 @@
 
 <div class="docs" style:--docs_menu_width={docs_menu_width}>
 	<DocsPrimaryNav {library} {breadcrumb_children}>
-		<div class="nav_dialog_toggle">
+		<div class="nav-dialog-toggle">
 			<button class="plain" type="button" onclick={() => toggle_secondary_nav_dialog()}>menu</button
 			>
 		</div>
 	</DocsPrimaryNav>
 	<!-- TODO @many dialog navs -->
 	{#if !innerWidth.current || innerWidth.current > SECONDARY_NAV_BREAKPOINT}
-		<div class="secondary_nav_wrapper">
+		<div class="secondary-nav-wrapper">
 			<DocsSecondaryNav {tomes} />
 		</div>
 	{/if}
@@ -69,7 +69,7 @@
 		{/key}
 		<!-- TODO @many dialog navs -->
 		{#if !innerWidth.current || innerWidth.current > TERTIARY_NAV_BREAKPOINT}
-			<DocsTertiaryNav {tomes} {tomes_by_name} />
+			<DocsTertiaryNav {tomes} {tomes_by_slug} />
 		{/if}
 		<section class="box">
 			<DocsFooter {library} root_url="https://www.fuz.dev/">
@@ -102,7 +102,7 @@
 			</div>
 			<div class="px_lg pb_xl">
 				<DocsSecondaryNav {tomes} sidebar={false} />
-				<DocsTertiaryNav {tomes} {tomes_by_name} sidebar={false} />
+				<DocsTertiaryNav {tomes} {tomes_by_slug} sidebar={false} />
 			</div>
 		</div>
 	</Dialog>
@@ -133,14 +133,14 @@
 		overflow: hidden; /* TODO maybe heavy handed */
 	}
 
-	.secondary_nav_wrapper {
+	.secondary-nav-wrapper {
 		display: contents;
 	}
 
-	.nav_dialog_toggle {
+	.nav-dialog-toggle {
 		display: none;
 	}
-	.nav_dialog_toggle button {
+	.nav-dialog-toggle button {
 		padding-left: var(--space_xl3);
 		padding-right: var(--space_xl3);
 		border-radius: 0;
@@ -155,7 +155,7 @@
 			margin-right: 0;
 		}
 
-		.nav_dialog_toggle {
+		.nav-dialog-toggle {
 			display: contents;
 		}
 	}
@@ -168,7 +168,7 @@
 			margin-left: 0;
 		}
 
-		.secondary_nav_wrapper {
+		.secondary-nav-wrapper {
 			display: none;
 		}
 	}

package/dist/DocsFooter.svelte

@@ -38,7 +38,7 @@
 		{@render logo_footer?.()}
 	</div>
 	{#if root_url}
-		<div class="root_url">
+		<div class="root-url">
 			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 			<a href={root_url}>{format_url(root_url)}</a>
 		</div>
@@ -58,7 +58,7 @@
 	.logo a:hover {
 		--border_color: var(--color_a_50);
 	}
-	.root_url {
+	.root-url {
 		/* TODO messy */
 		margin-top: var(--space_md);
 	}

package/dist/DocsList.svelte

@@ -14,31 +14,31 @@
 	} = $props();
 </script>
 
-<div {...rest} class="docs_list {rest.class}" class:expand_width class:margin>
+<div {...rest} class="docs-list {rest.class}" class:expand-width={expand_width} class:margin>
 	{@render children()}
 </div>
 
 <style>
-	.docs_list {
+	.docs-list {
 		width: var(--docs_menu_width);
 		min-width: var(--docs_menu_width);
 	}
-	.docs_list.expand_width {
+	.docs-list.expand-width {
 		width: 100%;
 		max-width: var(--distance_md);
 	}
-	.docs_list.margin {
+	.docs-list.margin {
 		margin: var(--space_xl6) 0;
 	}
 
 	/* TODO should be fixed upstream in fuz_css */
-	.docs_list :global(a.highlighted) {
+	.docs-list :global(a.highlighted) {
 		background-color: var(--fg_10);
 	}
-	.docs_list :global(a:hover) {
+	.docs-list :global(a:hover) {
 		background-color: var(--fg_10);
 	}
-	.docs_list :global(a:is(:active, .selected)) {
+	.docs-list :global(a:is(:active, .selected)) {
 		background-color: var(--fg_20);
 	}
 </style>

package/dist/DocsMenu.svelte

@@ -5,7 +5,7 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import DocsList from './DocsList.svelte';
-	import {to_tome_pathname, type Tome} from './tome.js';
+	import {tome_to_pathname, tome_to_title, type Tome} from './tome.js';
 	import DocsMenuHeader from './DocsMenuHeader.svelte';
 
 	const {
@@ -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">
 	<ul class="unstyled">
 		{#each Object.entries(tomes_by_category) as [category, tomes] (category)}
 			<li class="category">
@@ -37,10 +37,10 @@
 					>{/if}
 				<ul class="unstyled">
 					{#each tomes as item (item)}
-						{@const pathname = to_tome_pathname(item)}
+						{@const pathname = tome_to_pathname(item)}
 						<li role="none" transition:slide>
 							<a class="menuitem" href={pathname} class:selected={pathname === page.url.pathname}
-								><div class="ellipsis">{item.name}</div></a
+								><div class="ellipsis">{tome_to_title(item)}</div></a
 							>
 						</li>
 					{/each}

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

@@ -1 +1 @@
-{"version":3,"file":"DocsMenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsMenu.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAGrD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAkDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DocsMenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsMenu.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAGxD,OAAO,EAAkC,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAGpE,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAkDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/DocsPageLinks.svelte

@@ -20,10 +20,10 @@
 	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">
 	<h4 class="mb_sm">on this page</h4>
 	{#if sidebar}
-		<div class="sidebar_wrapper">{@render content()}</div>
+		<div class="sidebar-wrapper">{@render content()}</div>
 	{:else}
 		{@render content()}
 	{/if}
@@ -54,8 +54,8 @@
 {/snippet}
 
 <style>
-	/* this is needed because `.docs_page_links` needs to be a block to collapse the vertical margin */
-	.sidebar_wrapper {
+	/* this is needed because `.docs-page-links` needs to be a block to collapse the vertical margin */
+	.sidebar-wrapper {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;