@fuzdev/fuz_ui 0.169.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Ryan Atkinson <mail@ryanatkn.com> <https://ryanatkn.com/>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,93 @@
+# Fuz
+
+[<img src="static/logo.svg" alt="a friendly brown spider facing you" align="right" width="192" height="192">](https://www.fuz.dev/)
+
+> friendly user zystem 🧶 [fuz.dev](https://www.fuz.dev/)
+
+Fuz is a [Svelte](https://svelte.dev/) UI library
+with components and helpers for making modern websites.
+It's in early alpha and it will go through many breaking changes.
+
+Fuz is being made to support
+[my other projects](https://www.ryanatkn.com/)
+that focus on end-users.
+Fuz emphasizes capability and efficiency and tries to be simple for those goals.
+Compared to most UI libraries, Fuz has fewer conventional features and more opinions.
+
+To learn more see [the docs](https://www.fuz.dev/docs) and [contributing.md](contributing.md).
+Feel free to take the ideas and code for your own purposes.
+
+The Svelte components and helpers:
+
+- builds on my CSS framework [Moss](https://github.com/fuzdev/fuz_css)
+- plain CSS and minimal abstraction
+- near-zero dependencies except for Svelte, SvelteKit, Moss,
+  and my utility library [`@fuzdev/fuz_util`](https://github.com/fuzdev/fuz_util)
+  (not all components require SvelteKit but some do import its modules, needs more consideration)
+- not a fully-featured enterprise-ready set of components,
+  it's being developed for the needs of specific projects, though eventually it will fill out
+- should be easy to copy/paste into your projects when you need full control like
+  [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte),
+  I'll look into smoothing this pattern out in the future
+
+## Usage
+
+> ⚠️ Expect a lot of breaking changes. If you want to help stabilize the API,
+> thank you see [contributing.md](contributing.md), your input is appreciated.
+>
+> If you feel comfortable looking at the source code,
+> Fuz is ready to use in your own projects,
+> with the major caveat that there will be a lot of breaking changes ahead.
+> The code is significantly incomplete but I think it's stable enough to use
+> if you're willing to keep up with the relatively fast-moving changelog.
+
+```bash
+npm i -D @ryanatkn/fuz
+```
+
+Fuz uses my style framework [Moss](https://github.com/fuzdev/fuz_css).
+Import modules at their full paths:
+
+```ts
+// Moss has one main plain CSS stylesheet:
+import '@fuzdev/fuz_css/style.css';
+
+// and import a Moss theme:
+import '@fuzdev/fuz_css/theme.css'; // or bring your own
+
+// using Gro generates Moss' utility classes stylesheet by default:
+import '$routes/moss.css';
+
+// then import Fuz Svelte components:
+import Themed from '@ryanatkn/fuz/Themed.svelte';
+
+// and Fuz TypeScript modules:
+import {type Theme, themer_context} from '@ryanatkn/fuz/themer.svelte.js';
+```
+
+See [the library](https://www.fuz.dev/docs) for more.
+
+## Contributing
+
+See [contributing.md](contributing.md).
+
+## Develop
+
+```bash
+npm i # node >=20.10
+
+# development
+npm run dev
+
+# production
+npm run build
+npm start
+```
+
+Fuz uses [Gro](https://github.com/ryanatkn/gro),
+my CLI and toolkit that I use to run tasks in all of my projects.
+If you're not allergic it's handy to install globally.
+
+## License 🐦
+
+[MIT](LICENSE)

package/dist/Alert.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {HTMLAttributes} from 'svelte/elements';
+
+	import {alert_status_options, type AlertStatus} from './alert.js';
+
+	/**
+	 * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+	 */
+
+	// TODO think through Alert+Card APIs together, one can be a button and the other a link atm
+
+	const {
+		status = 'inform',
+		color,
+		onclick,
+		disabled,
+		attrs,
+		icon,
+		children,
+	}: {
+		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;
+		attrs?: HTMLAttributes<HTMLElement> | undefined;
+		icon?: string | Snippet<[icon: string]> | null | undefined; // TODO experimenting with this, gets complex in the impl
+		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
+	const {color: status_color, icon: status_icon} = $derived(options);
+	const final_color = $derived(color ?? status_color);
+	const final_icon = $derived(
+		typeof icon === 'string' ? icon : (status_icon ?? alert_status_options.inform.icon!),
+	);
+</script>
+
+{#if onclick}
+	<button
+		class="message"
+		type="button"
+		style:--text_color={final_color}
+		{onclick}
+		{disabled}
+		{...attrs}
+	>
+		{@render content()}
+	</button>
+{:else}
+	<div role="alert" class="message panel" style:--text_color={final_color} {...attrs}>
+		{@render content()}
+	</div>
+{/if}
+
+{#snippet content()}
+	{#if icon !== null}
+		<div class="icon">
+			{#if !icon || typeof icon === 'string'}
+				{final_icon}
+			{:else}
+				{@render icon(final_icon)}
+			{/if}
+		</div>
+	{/if}
+	<!-- TODO conflict in the names of content as the snippet and this inner div -->
+	<div class="content">
+		{@render children()}
+	</div>
+{/snippet}
+
+<style>
+	.message {
+		min-height: var(--message_min_height);
+		width: 100%;
+		color: var(--text_color);
+		font-size: var(--font_size_md);
+		border-width: var(--border_width_1);
+		border-style: var(--border_style);
+		border-color: var(--text_color);
+		display: flex;
+		justify-content: flex-start; /* override button horizontal centering */
+		align-items: center;
+		padding: var(--space_xs2) var(--space_lg) var(--space_xs2) var(--space_xs);
+		margin-bottom: var(--space_lg);
+	}
+	.message:last-child {
+		margin-bottom: 0;
+	}
+	.icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: var(--space_md);
+		font-size: var(--font_size_xl2);
+		min-width: var(--font_size_xl2);
+		text-align: center;
+	}
+	.content {
+		text-align: left;
+		flex: 1;
+	}
+</style>

package/dist/Alert.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AlertStatus } from './alert.js';
+type $$ComponentProps = {
+    status?: AlertStatus;
+    color?: string;
+    onclick?: (() => void) | undefined;
+    disabled?: boolean;
+    attrs?: HTMLAttributes<HTMLElement> | undefined;
+    icon?: string | Snippet<[icon: string]> | null | undefined;
+    children: Snippet;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;
+//# sourceMappingURL=Alert.svelte.d.ts.map

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

@@ -0,0 +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,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAEpD,OAAO,EAAuB,KAAK,WAAW,EAAC,MAAM,YAAY,CAAC;AAEjE,KAAK,gBAAgB,GAAI;IACxB,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,KAAK,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,GAAG,SAAS,CAAC;IAChD,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;AA8DH,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/ApiDeclarationList.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type {Declaration} from './declaration.svelte.js';
+	import DeclarationDetail from './DeclarationDetail.svelte';
+	import TomeSection from './TomeSection.svelte';
+	import TomeSectionHeader from './TomeSectionHeader.svelte';
+
+	const {
+		declarations,
+		search_query = '',
+	}: {
+		declarations: Array<Declaration>;
+		search_query?: string;
+	} = $props();
+</script>
+
+{#if declarations.length === 0}
+	<section>
+		{#if search_query}
+			<p>No declarations found matching "{search_query}"</p>
+		{:else}
+			<p>No declarations</p>
+		{/if}
+	</section>
+{:else}
+	{#each declarations as declaration (`${declaration.module_path}:${declaration.name}`)}
+		<TomeSection>
+			<TomeSectionHeader text={declaration.name}>
+				<div class="word_break_break_all">{declaration.name}</div>
+			</TomeSectionHeader>
+			<article id={declaration.name}>
+				<DeclarationDetail {declaration} />
+			</article>
+		</TomeSection>
+	{/each}
+{/if}

package/dist/ApiDeclarationList.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Declaration } from './declaration.svelte.js';
+type $$ComponentProps = {
+    declarations: Array<Declaration>;
+    search_query?: string;
+};
+declare const ApiDeclarationList: import("svelte").Component<$$ComponentProps, {}, "">;
+type ApiDeclarationList = ReturnType<typeof ApiDeclarationList>;
+export default ApiDeclarationList;
+//# sourceMappingURL=ApiDeclarationList.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiDeclarationList.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiDeclarationList.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAKxD,KAAK,gBAAgB,GAAI;IACxB,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAoCH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/ApiIndex.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import {library_context, type Library} from './library.svelte.js';
+	import {get_tome_by_name, type Tome} from './tome.js';
+	import TomeContent from './TomeContent.svelte';
+	import TomeSection from './TomeSection.svelte';
+	import TomeLink from './TomeLink.svelte';
+	import TomeSectionHeader from './TomeSectionHeader.svelte';
+	import DocsSearch from './DocsSearch.svelte';
+	import ApiDeclarationList from './ApiDeclarationList.svelte';
+	import {create_declaration_search} from './api_search.svelte.js';
+
+	const {
+		library = library_context.get(),
+		tome = get_tome_by_name('api'),
+		minimal = false,
+	}: {
+		/**
+		 * The library instance to render API docs for.
+		 * Defaults to getting from library_context.
+		 */
+		library?: Library;
+		/**
+		 * The tome for the API docs page.
+		 * Defaults to looking up the 'api' tome.
+		 */
+		tome?: Tome;
+		/**
+		 * Whether to show minimal content (just a link to full API docs).
+		 * Used when the API index is shown on a parent docs page.
+		 */
+		minimal?: boolean;
+	} = $props();
+
+	const search = create_declaration_search(library);
+</script>
+
+<svelte:head>
+	<title>API docs - {library.package_json.name}</title>
+</svelte:head>
+
+<TomeContent {tome}>
+	{#if minimal}
+		<section>
+			<p>Browse the full <TomeLink name="api" /> docs.</p>
+		</section>
+	{:else}
+		<TomeSection>
+			<TomeSectionHeader text="Declarations" />
+
+			<section>
+				<p>{library.package_json.description}</p>
+
+				{#if search.all.length > 1}
+					<DocsSearch
+						total_count={search.all.length}
+						result_count={search.filtered.length}
+						bind:search_query={search.query}
+					/>
+				{/if}
+			</section>
+
+			<ApiDeclarationList declarations={search.filtered} search_query={search.query} />
+		</TomeSection>
+	{/if}
+</TomeContent>

package/dist/ApiIndex.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Library } from './library.svelte.js';
+import { type Tome } from './tome.js';
+type $$ComponentProps = {
+    /**
+     * The library instance to render API docs for.
+     * Defaults to getting from library_context.
+     */
+    library?: Library;
+    /**
+     * The tome for the API docs page.
+     * Defaults to looking up the 'api' tome.
+     */
+    tome?: Tome;
+    /**
+     * Whether to show minimal content (just a link to full API docs).
+     * Used when the API index is shown on a parent docs page.
+     */
+    minimal?: boolean;
+};
+declare const ApiIndex: import("svelte").Component<$$ComponentProps, {}, "">;
+type ApiIndex = ReturnType<typeof ApiIndex>;
+export default ApiIndex;
+//# sourceMappingURL=ApiIndex.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiIndex.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiIndex.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AASrD,KAAK,gBAAgB,GAAI;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAiDH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/ApiModule.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+	import {library_context, type Library} from './library.svelte.js';
+	import {get_tome_by_name, type Tome} from './tome.js';
+	import TomeContent from './TomeContent.svelte';
+	import TomeSection from './TomeSection.svelte';
+	import TomeSectionHeader from './TomeSectionHeader.svelte';
+	import DocsSearch from './DocsSearch.svelte';
+	import ModuleLink from './ModuleLink.svelte';
+	import Mdz from './Mdz.svelte';
+	import ApiDeclarationList from './ApiDeclarationList.svelte';
+	import {create_module_declaration_search} from './api_search.svelte.js';
+
+	const {
+		module_path: module_path_param,
+		library = library_context.get(),
+		tome = get_tome_by_name('api'),
+	}: {
+		/**
+		 * The module path parameter from the route (e.g., "lib/Button.svelte").
+		 */
+		module_path: string | Array<string>;
+		/**
+		 * The library instance to render API docs for.
+		 * Defaults to getting from library_context.
+		 */
+		library?: Library;
+		/**
+		 * The tome for the API docs page.
+		 * Defaults to looking up the 'api' tome.
+		 */
+		tome?: Tome;
+	} = $props();
+
+	// normalize module_path to string (could be array from [...module_path] route param)
+	const module_path = $derived(
+		Array.isArray(module_path_param) ? module_path_param.join('/') : module_path_param,
+	);
+
+	// find the module using the lookup helper
+	const module = $derived(library.lookup_module(module_path));
+
+	// fallback for 404
+	const module_name = $derived(module?.path || '[missing module]');
+
+	const search = $derived(create_module_declaration_search(module?.declarations ?? []));
+
+	// GitHub source URL for the module
+	const source_url = $derived(module?.url_github);
+</script>
+
+<svelte:head>
+	<title>{module_name} - API docs - {library.package_json.name}</title>
+</svelte:head>
+
+<TomeContent {tome}>
+	{#snippet header()}
+		<h1 class="mt_xl4">{module_name}</h1>
+	{/snippet}
+
+	{#if !module}
+		<section>
+			<p>Module not found: {module_path}</p>
+		</section>
+	{:else}
+		<!-- Declarations Section -->
+		<TomeSection>
+			<TomeSectionHeader text="Declarations" />
+
+			<section>
+				{#if module.module_comment}
+					<blockquote>
+						<Mdz content={module.module_comment} />
+					</blockquote>
+				{/if}
+
+				{#if search.all.length > 1}
+					<DocsSearch
+						placeholder="search declarations in this module..."
+						total_count={search.all.length}
+						result_count={search.filtered.length}
+						bind:search_query={search.query}
+					/>
+				{/if}
+
+				{#if source_url}
+					<p>
+						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+						<a href={source_url} class="chip" target="_blank" rel="noopener">view source</a>
+					</p>
+				{/if}
+			</section>
+
+			<ApiDeclarationList declarations={search.filtered} search_query={search.query} />
+		</TomeSection>
+
+		<!-- Depends on Section -->
+		{#if module.dependencies}
+			<TomeSection>
+				<TomeSectionHeader text="Depends on" />
+				<ul>
+					{#each module.dependencies as dep_path (dep_path)}
+						<li>
+							<ModuleLink module_path={dep_path} />
+						</li>
+					{/each}
+				</ul>
+			</TomeSection>
+		{/if}
+
+		<!-- Imported by Section -->
+		{#if module.dependents}
+			<TomeSection>
+				<TomeSectionHeader text="Imported by" />
+				<ul>
+					{#each module.dependents as dependent_path (dependent_path)}
+						<li>
+							<ModuleLink module_path={dependent_path} />
+						</li>
+					{/each}
+				</ul>
+			</TomeSection>
+		{/if}
+	{/if}
+</TomeContent>

package/dist/ApiModule.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Library } from './library.svelte.js';
+import { type Tome } from './tome.js';
+type $$ComponentProps = {
+    /**
+     * The module path parameter from the route (e.g., "lib/Button.svelte").
+     */
+    module_path: string | Array<string>;
+    /**
+     * The library instance to render API docs for.
+     * Defaults to getting from library_context.
+     */
+    library?: Library;
+    /**
+     * The tome for the API docs page.
+     * Defaults to looking up the 'api' tome.
+     */
+    tome?: Tome;
+};
+declare const ApiModule: import("svelte").Component<$$ComponentProps, {}, "">;
+type ApiModule = ReturnType<typeof ApiModule>;
+export default ApiModule;
+//# sourceMappingURL=ApiModule.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApiModule.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ApiModule.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAClE,OAAO,EAAmB,KAAK,IAAI,EAAC,MAAM,WAAW,CAAC;AAUrD,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,WAAW,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;CACZ,CAAC;AA4GH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/Breadcrumb.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import {parse_path_pieces} from '@fuzdev/fuz_util/path.js';
+	import {resolve} from '$app/paths';
+	import {page} from '$app/state';
+	import type {Snippet} from 'svelte';
+	import {strip_start, ensure_end} from '@fuzdev/fuz_util/string.js';
+
+	const {
+		path,
+		selected_path,
+		base_path,
+		separator,
+		children,
+	}: {
+		/**
+		 * Prefixed with a slash and relative to the base path.
+		 */
+		path?: string | undefined;
+		/**
+		 * Prefixed with a slash and relative to the base path.
+		 * `null` means none and `undefined` is detected from the current url.
+		 */
+		selected_path?: string | null | undefined;
+		/**
+		 * Sets a custom base path of `path` and `selected_path`.
+		 * Defaults to `base` from `$app/paths`.
+		 */
+		base_path?: string;
+		separator?: Snippet;
+		children?: Snippet;
+	} = $props();
+
+	const final_base_path = $derived(base_path ?? resolve('/').slice(0, -1));
+
+	const final_path = $derived(path ?? strip_start(page.url.pathname, final_base_path));
+
+	const final_selected_path = $derived(
+		selected_path === null ? null : (selected_path ?? final_path),
+	);
+
+	const path_pieces = $derived(parse_path_pieces(final_path));
+
+	const root_path = $derived(ensure_end(final_base_path, '/'));
+
+	// TODO animate these
+	// `transition:slide={{axis: 'x'}}`
+</script>
+
+<div class="breadcrumb">
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+	<a href={root_path} class:selected={root_path === final_base_path + final_selected_path}
+		>{#if children}{@render children()}{:else}•{/if}</a
+	>{#each path_pieces as path_piece (path_piece)}{#if path_piece.type === 'piece'}<!-- eslint-disable-next-line svelte/no-navigation-without-resolve --><a
+				href={final_base_path + path_piece.path}
+				class:selected={path_piece.path === final_selected_path}>{path_piece.name}</a
+			>{:else}<span class="separator"
+				>{#if separator}{@render separator()}{:else}/{/if}</span
+			>{/if}{/each}
+</div>
+
+<style>
+	.breadcrumb {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		font-size: var(--font_size, var(--font_size_md));
+	}
+	a {
+		position: relative;
+		z-index: 1;
+		padding: 0 calc(var(--font_size, var(--font_size_md)) * 0.5);
+		display: flex;
+		align-items: center;
+	}
+	.separator {
+		position: relative;
+		z-index: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 0;
+	}
+</style>

package/dist/Breadcrumb.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /**
+     * Prefixed with a slash and relative to the base path.
+     */
+    path?: string | undefined;
+    /**
+     * Prefixed with a slash and relative to the base path.
+     * `null` means none and `undefined` is detected from the current url.
+     */
+    selected_path?: string | null | undefined;
+    /**
+     * Sets a custom base path of `path` and `selected_path`.
+     * Defaults to `base` from `$app/paths`.
+     */
+    base_path?: string;
+    separator?: Snippet;
+    children?: Snippet;
+};
+declare const Breadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;
+//# sourceMappingURL=Breadcrumb.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Breadcrumb.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAGnC,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAyCH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}