@fuzdev/fuz_ui 0.210.4 → 0.212.0

package/dist/Alert.svelte

@@ -22,7 +22,8 @@
 		div_attrs,
 		children,
 		...rest
-	}: // generic element attrs, the common denominator of the rendered roots - // branch-specific attributes go in `button_attrs`/`div_attrs`
+	}: // generic element attrs, the common denominator of the rendered roots;
+		// branch-specific attributes go in `button_attrs` and `div_attrs`
 		HTMLAttributes<HTMLElement> & {
 			status?: AlertStatus;
 			color?: string;
@@ -32,7 +33,11 @@
 			/** 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
+			/**
+			 * A decorative icon, hidden from assistive tech: a string, or a snippet given the
+			 * status's icon. Defaults to the status's icon, and `null` or an empty string is none.
+			 */
+			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`). */
@@ -44,9 +49,7 @@
 	// 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!)
-	);
+	const final_icon = $derived(typeof icon === 'string' ? icon : status_icon);
 </script>
 
 {#if onclick}
@@ -59,7 +62,7 @@
 		{onclick}
 		disabled={disabled ?? button_attrs?.disabled}
 	>
-		{@render content()}
+		{@render alert_content()}
 	</button>
 {:else}
 	<div
@@ -69,21 +72,21 @@
 		class="alert panel {rest.class} {div_attrs?.class}"
 		style:--text_color={final_color}
 	>
-		{@render content()}
+		{@render alert_content()}
 	</div>
 {/if}
 
-{#snippet content()}
-	{#if icon !== null}
-		<div class="icon">
-			{#if !icon || typeof icon === 'string'}
-				{final_icon}
-			{:else}
+{#snippet alert_content()}
+	<!-- the status's icon by default, or one given, and none for `null` or an empty string -->
+	{#if icon === undefined || icon}
+		<div class="icon" aria-hidden="true">
+			{#if typeof icon === 'function'}
 				{@render icon(final_icon)}
+			{:else}
+				{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>

package/dist/Alert.svelte.d.ts

@@ -1,13 +1,17 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 import { type AlertStatus } from './alert.js';
-type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots - // branch-specific attributes go in `button_attrs`/`div_attrs`
+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;
+    /**
+     * A decorative icon, hidden from assistive tech: a string, or a snippet given the
+     * status's icon. Defaults to the status's icon, and `null` or an empty string is none.
+     */
     icon?: string | Snippet<[icon: string]> | null | undefined;
     /** Button attributes, applied only when `onclick` renders the alert as a `<button>`. */
     button_attrs?: SvelteHTMLElements['button'];

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,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAEnE,KAAK,gBAAgB,GACpB,AADwB,uIAAuI;AAC/J,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;AAkEJ,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,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1E,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAEnE,KAAK,gBAAgB,GAEpB,AAFwB,uEAAuE;AAE/F,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;;;OAGG;IACH,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;AAgEJ,QAAA,MAAM,KAAK,sDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/Breadcrumb.svelte

@@ -12,6 +12,7 @@
 	const {
 		path,
 		selected_path,
+		root_path,
 		base_path,
 		separator,
 		children,
@@ -26,6 +27,12 @@
 		 * `null` means none and `undefined` is detected from the current url.
 		 */
 		selected_path?: string | null | undefined;
+		/**
+		 * Where the root link goes, prefixed with a slash and relative to the base path,
+		 * e.g. `'/docs'` on a home page, where linking to the root would link to itself.
+		 * Defaults to the root.
+		 */
+		root_path?: string;
 		/**
 		 * Sets a custom base path of `path` and `selected_path`.
 		 * Defaults to `base` from `$app/paths`.
@@ -53,7 +60,9 @@
 
 	const path_pieces = $derived(parse_path_pieces(final_path));
 
-	const root_path = $derived(ensure_end(final_base_path, '/'));
+	const root_href = $derived(
+		root_path === undefined ? ensure_end(final_base_path, '/') : final_base_path + root_path
+	);
 
 	// TODO animate these
 	// `transition:slide={{axis: 'x'}}`
@@ -61,7 +70,7 @@
 
 <div {...rest} class="breadcrumb {rest.class}">
 	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-	<a href={root_path} class={{ selected: root_path === final_base_path + final_selected_path }}>
+	<a href={root_href} class={{ selected: root_href === final_base_path + final_selected_path }}>
 		{#if children}
 			{@render children()}
 		{:else if icon_data}
@@ -94,12 +103,15 @@
 		align-items: center;
 		font-size: var(--font_size, var(--font_size_md));
 	}
+	/* at least one line of text tall, so a root link holding only an icon is as tall as a
+	 * breadcrumb with path pieces, and the layout around it doesn't shift between pages */
 	a {
 		position: relative;
 		z-index: 1;
 		padding: 0 calc(var(--font_size, var(--font_size_md)) * 0.5);
 		display: flex;
 		align-items: center;
+		min-height: 1lh;
 	}
 	.separator {
 		position: relative;

package/dist/Breadcrumb.svelte.d.ts

@@ -10,6 +10,12 @@ type $$ComponentProps = SvelteHTMLElements['div'] & {
      * `null` means none and `undefined` is detected from the current url.
      */
     selected_path?: string | null | undefined;
+    /**
+     * Where the root link goes, prefixed with a slash and relative to the base path,
+     * e.g. `'/docs'` on a home page, where linking to the root would link to itself.
+     * Defaults to the root.
+     */
+    root_path?: string;
     /**
      * Sets a custom base path of `path` and `selected_path`.
      * Defaults to `base` from `$app/paths`.

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Breadcrumb.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD;;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;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAoEH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Breadcrumb.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Breadcrumb.svelte"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAuEH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Card.svelte

@@ -4,30 +4,47 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
 
+	import { href_is_current_page } from './page_helpers.js';
+
 	// TODO think through Alert+Card APIs together, one can be a button and the other a link atm
 
 	const {
 		href,
 		tag,
-		align = 'left',
+		align = 'start',
 		icon,
 		a_attrs,
 		children,
 		...rest
-	}: // generic element attrs, the common denominator of the rendered roots - // branch-specific attributes go in `a_attrs`
+	}: // 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. */
+			/**
+			 * Renders the card as an `<a>`, marked `selected` while it leads to the current
+			 * page, ignoring a trailing slash, the query, and the hash.
+			 */
 			href?: string | undefined;
-			tag?: string | undefined;
-			align?: 'left' | 'right' | 'above' | 'below';
-			icon?: string | Snippet;
+			/** The element to render, defaulting to `a` with an `href` and `div` without. */
+			tag?: keyof HTMLElementTagNameMap | undefined;
+			/**
+			 * The card's layout: where the icon sits, at the inline start or end beside the
+			 * content or above or below it, and how the content aligns, toward the end for
+			 * `end` and centered for `top` and `bottom`.
+			 * @default 'start'
+			 */
+			align?: 'start' | 'end' | 'top' | 'bottom';
+			/**
+			 * A decorative icon, hidden from assistive tech: a string like an emoji or a glyph,
+			 * or a snippet for anything else. None when absent, null, or empty.
+			 */
+			icon?: string | Snippet | null;
 			/** 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 selected = $derived(!!href && href_is_current_page(href, page.url));
 	// the tag renders through `svelte:element`, so declare the styled one for fuz_css extraction
 	// @fuz-elements a
 	const final_tag = $derived(tag ?? (link ? 'a' : 'div'));
@@ -43,41 +60,38 @@
 			}
 		});
 	}
-
-	const left = $derived(align === 'left');
-	const right = $derived(align === 'right');
-	const above = $derived(align === 'above');
-	const below = $derived(align === 'below');
-
-	const final_icon: string | Snippet = $derived(icon ?? (link ? '🔗' : '🪧'));
 </script>
 
+<!-- a button that isn't told otherwise doesn't submit a form around it -->
 <svelte:element
 	this={final_tag}
+	type={final_tag === 'button' ? 'button' : undefined}
 	{...rest}
 	{...inferred_attrs}
-	class={['card', rest.class, inferred_attrs?.class, { link, selected, left, right, above, below }]}
+	class={['card', align, rest.class, inferred_attrs?.class, { link, selected }]}
 >
-	{#if align === 'left' || align === 'above'}
+	{#if align === 'start' || align === 'top'}
 		{@render icon_snippet()}
 	{/if}
 	<div class="content">
 		{@render children()}
 	</div>
-	{#if align === 'right' || align === 'below'}
+	{#if align === 'end' || align === 'bottom'}
 		{@render icon_snippet()}
 	{/if}
 </svelte:element>
 
-<!-- TODO name? -->
+<!-- an empty string is no icon, so no empty element takes the icon's margin -->
 {#snippet icon_snippet()}
-	<div class="icon">
-		{#if typeof final_icon === 'string'}
-			{final_icon}
-		{:else}
-			{@render final_icon()}
-		{/if}
-	</div>
+	{#if icon}
+		<div class="icon" aria-hidden="true">
+			{#if typeof icon === 'string'}
+				{icon}
+			{:else}
+				{@render icon()}
+			{/if}
+		</div>
+	{/if}
 {/snippet}
 
 <style>
@@ -92,13 +106,13 @@
 		background-color: var(--fg_10);
 		border-radius: var(--border_radius, var(--border_radius_md));
 		text-decoration: none;
-		text-align: left;
+		text-align: start;
 	}
-	.right {
+	.end {
 		justify-content: flex-end;
 	}
-	.above,
-	.below {
+	.top,
+	.bottom {
 		flex-direction: column;
 		text-align: center;
 	}
@@ -128,12 +142,15 @@
 	.link:hover .content {
 		text-decoration: underline;
 	}
-	.left .content {
-		padding-right: var(--space_sm);
+	.end .content {
+		text-align: end;
+	}
+	/* a little room on the side away from the icon */
+	.start:has(> .icon) .content {
+		padding-inline-end: var(--space_sm);
 	}
-	.right .content {
-		text-align: right;
-		padding-left: var(--space_sm);
+	.end:has(> .icon) .content {
+		padding-inline-start: var(--space_sm);
 	}
 	.icon {
 		font-size: var(--icon_size, var(--icon_size_md));
@@ -141,17 +158,16 @@
 		display: flex;
 		justify-content: center;
 	}
-	/* TODO @many remove all :global usage after https://github.com/sveltejs/svelte/issues/10143 */
-	.left :global(.icon) {
-		margin-right: var(--icon_margin);
+	.start .icon {
+		margin-inline-end: var(--icon_margin);
 	}
-	.right :global(.icon) {
-		margin-left: var(--icon_margin);
+	.end .icon {
+		margin-inline-start: var(--icon_margin);
 	}
-	.above :global(.icon) {
+	.top .icon {
 		margin-bottom: var(--icon_margin);
 	}
-	.below :global(.icon) {
+	.bottom .icon {
 		margin-top: var(--icon_margin);
 	}
 	@media (max-width: 460px) {
@@ -159,19 +175,12 @@
 			font-size: var(--font_size_xl);
 		}
 	}
+	/* the icon's size and margin come from the variables, whichever side it is on */
 	@media (max-width: 380px) {
 		.card {
 			--icon_size: var(--icon_size_md);
 			--icon_margin: var(--space_sm);
 			font-size: var(--font_size_lg);
 		}
-		.icon {
-			font-size: var(--icon_size_md);
-			margin-right: var(--space_sm);
-		}
-		.right :global(.icon) {
-			margin-right: 0;
-			margin-left: var(--space_sm);
-		}
 	}
 </style>

package/dist/Card.svelte.d.ts

@@ -1,12 +1,26 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
-type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots - // branch-specific attributes go in `a_attrs`
+type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots;
 HTMLAttributes<HTMLElement> & {
-    /** Renders the card as an `<a>` when provided. */
+    /**
+     * Renders the card as an `<a>`, marked `selected` while it leads to the current
+     * page, ignoring a trailing slash, the query, and the hash.
+     */
     href?: string | undefined;
-    tag?: string | undefined;
-    align?: 'left' | 'right' | 'above' | 'below';
-    icon?: string | Snippet;
+    /** The element to render, defaulting to `a` with an `href` and `div` without. */
+    tag?: keyof HTMLElementTagNameMap | undefined;
+    /**
+     * The card's layout: where the icon sits, at the inline start or end beside the
+     * content or above or below it, and how the content aligns, toward the end for
+     * `end` and centered for `top` and `bottom`.
+     * @default 'start'
+     */
+    align?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * A decorative icon, hidden from assistive tech: a string like an emoji or a glyph,
+     * or a snippet for anything else. None when absent, null, or empty.
+     */
+    icon?: string | Snippet | null;
     /** Anchor attributes, applied only when `href` renders the card as an `<a>`. */
     a_attrs?: SvelteHTMLElements['a'];
     children: Snippet;

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":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,KAAK,gBAAgB,GACpB,AADwB,sHAAsH;AAC9I,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;AAwEJ,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,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIzE,KAAK,gBAAgB,GAEpB,AAFwB,uEAAuE;AAE/F,cAAc,CAAC,WAAW,CAAC,GAAG;IAC7B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,iFAAiF;IACjF,GAAG,CAAC,EAAE,MAAM,qBAAqB,GAAG,SAAS,CAAC;IAC9C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3C;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAC/B,gFAAgF;IAChF,OAAO,CAAC,EAAE,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAsEJ,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/ContextmenuLinkEntry.svelte

@@ -6,6 +6,7 @@
 
 	import { contextmenu_context } from './contextmenu_state.svelte.js';
 	import { icon_external_link, icon_link } from './icons.js';
+	import { href_is_current_page } from './page_helpers.js';
 	import type { SvgData } from './svg.js';
 	import Svg from './Svg.svelte';
 	import ContextmenuIcon from './ContextmenuIcon.svelte';
@@ -53,7 +54,7 @@
 	const external = $derived(!(text[0] === '.' || (text[0] === '/' && text[1] !== '/')));
 	const rel = $derived(external ? external_rel : undefined);
 
-	const current_page = $derived(page.url.pathname === href);
+	const current_page = $derived(href_is_current_page(href, page.url));
 </script>
 
 <li role="none">

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,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAIvC,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;AA2FH,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,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAIvC,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;AA4FH,QAAA,MAAM,oBAAoB,sDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/Docs.svelte

@@ -18,9 +18,30 @@
 
 	const {
 		tomes,
+		primary_nav,
+		secondary_nav_header,
+		secondary_nav_footer,
+		footer,
 		children
 	}: {
 		tomes: Array<Tome>;
+		/**
+		 * Rendered in the primary nav after the breadcrumb, at its end, e.g. links to the
+		 * site's other sections.
+		 */
+		primary_nav?: Snippet;
+		/**
+		 * Rendered above the tome menu in the secondary nav, in the sidebar and in the
+		 * menu dialog of narrow screens, where the primary nav has little room.
+		 */
+		secondary_nav_header?: Snippet;
+		/** Rendered below the tome menu in the secondary nav, in the sidebar and in the menu dialog. */
+		secondary_nav_footer?: Snippet;
+		/**
+		 * Replaces the default footer, a `DocsFooter` with the site's repo and a link to
+		 * fuz.dev, e.g. for a site that isn't part of the Fuz stack.
+		 */
+		footer?: Snippet;
 		children: Snippet;
 	} = $props();
 
@@ -52,6 +73,11 @@
 
 <div class="docs" style:--docs_menu_width={docs_menu_width}>
 	<DocsPrimaryNav>
+		{#if primary_nav}
+			<div class="primary-nav-end">
+				{@render primary_nav()}
+			</div>
+		{/if}
 		<div class="nav-dialog-toggle">
 			<button class="plain" type="button" onclick={() => toggle_secondary_nav_dialog()}>
 				menu
@@ -61,7 +87,7 @@
 	<!-- TODO @many dialog navs -->
 	{#if !innerWidth.current || innerWidth.current > SECONDARY_NAV_BREAKPOINT}
 		<div class="secondary-nav-wrapper">
-			<DocsSecondaryNav {tomes} />
+			<DocsSecondaryNav {tomes} header={secondary_nav_header} footer={secondary_nav_footer} />
 		</div>
 	{/if}
 	<main>
@@ -73,11 +99,15 @@
 			<DocsTertiaryNav {tomes} {tomes_by_slug} />
 		{/if}
 		<section class="box">
-			<DocsFooter repo_url={site.repo_url} root_url={FUZ_DEV_URL}>
-				<div class="mb_xl5">
-					<Breadcrumb />
-				</div>
-			</DocsFooter>
+			{#if footer}
+				{@render footer()}
+			{:else}
+				<DocsFooter repo_url={site.repo_url} root_url={FUZ_DEV_URL}>
+					<div class="mb_xl5">
+						<Breadcrumb />
+					</div>
+				</DocsFooter>
+			{/if}
 		</section>
 	</main>
 </div>
@@ -94,7 +124,12 @@
 					<Breadcrumb />
 				</div>
 				<div class="px_lg pb_xl">
-					<DocsSecondaryNav {tomes} sidebar={false} />
+					<DocsSecondaryNav
+						{tomes}
+						sidebar={false}
+						header={secondary_nav_header}
+						footer={secondary_nav_footer}
+					/>
 					<DocsTertiaryNav {tomes} {tomes_by_slug} sidebar={false} />
 				</div>
 			</div>
@@ -131,6 +166,12 @@
 		display: contents;
 	}
 
+	.primary-nav-end {
+		display: flex;
+		align-items: center;
+		gap: var(--space_md);
+		padding: 0 var(--space_md);
+	}
 	.nav-dialog-toggle {
 		display: none;
 	}

package/dist/Docs.svelte.d.ts

@@ -2,6 +2,23 @@ import type { Snippet } from 'svelte';
 import { Tome } from './tome.js';
 type $$ComponentProps = {
     tomes: Array<Tome>;
+    /**
+     * Rendered in the primary nav after the breadcrumb, at its end, e.g. links to the
+     * site's other sections.
+     */
+    primary_nav?: Snippet;
+    /**
+     * Rendered above the tome menu in the secondary nav, in the sidebar and in the
+     * menu dialog of narrow screens, where the primary nav has little room.
+     */
+    secondary_nav_header?: Snippet;
+    /** Rendered below the tome menu in the secondary nav, in the sidebar and in the menu dialog. */
+    secondary_nav_footer?: Snippet;
+    /**
+     * Replaces the default footer, a `DocsFooter` with the site's repo and a link to
+     * fuz.dev, e.g. for a site that isn't part of the Fuz stack.
+     */
+    footer?: Snippet;
     children: Snippet;
 };
 declare const Docs: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"Docs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Docs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,OAAO,EAAE,IAAI,EAAiB,MAAM,WAAW,CAAC;AAW/C,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAyGH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Docs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Docs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,OAAO,EAAE,IAAI,EAAiB,MAAM,WAAW,CAAC;AAW/C,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gGAAgG;IAChG,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAsHH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/DocsSecondaryNav.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
 	import DocsMenu from './DocsMenu.svelte';
@@ -7,9 +8,15 @@
 	const {
 		tomes,
 		sidebar = true,
+		header,
+		footer,
 		...rest
 	}: SvelteHTMLElements['aside'] & {
 		tomes: Array<Tome>;
+		/** Rendered above the menu, e.g. links to the site's other sections. */
+		header?: Snippet;
+		/** Rendered below the menu. */
+		footer?: Snippet;
 		sidebar?: boolean; // TODO @many dialog navs (this shouldn't exist)
 	} = $props();
 
@@ -18,7 +25,9 @@
 
 <aside {...rest} class={['docs-secondary-nav unstyled', rest.class, { sidebar }]}>
 	<nav aria-label="Secondary nav">
+		{@render header?.()}
 		<DocsMenu {tomes} {expand_width} />
+		{@render footer?.()}
 	</nav>
 </aside>
 

package/dist/DocsSecondaryNav.svelte.d.ts

@@ -1,7 +1,12 @@
+import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 import { Tome } from './tome.js';
 type $$ComponentProps = SvelteHTMLElements['aside'] & {
     tomes: Array<Tome>;
+    /** Rendered above the menu, e.g. links to the site's other sections. */
+    header?: Snippet;
+    /** Rendered below the menu. */
+    footer?: Snippet;
     sidebar?: boolean;
 };
 declare const DocsSecondaryNav: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -1 +1 @@
-{"version":3,"file":"DocsSecondaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSecondaryNav.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEhC,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA0BH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"DocsSecondaryNav.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSecondaryNav.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEhC,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AA+BH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/alert.d.ts

@@ -1,7 +1,7 @@
 export type AlertStatus = 'inform' | 'help' | 'error';
 export interface AlertStatusOptions {
     color: string;
-    icon: string | null;
+    icon: string;
 }
 export declare const alert_status_options: Record<AlertStatus, AlertStatusOptions>;
 //# sourceMappingURL=alert.d.ts.map

package/dist/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/alert.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,WAAW,EAAE,kBAAkB,CAIxE,CAAC"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/alert.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtD,MAAM,WAAW,kBAAkB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,WAAW,EAAE,kBAAkB,CAIxE,CAAC"}

package/dist/page_helpers.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Helpers for relating links to the current page.
+ *
+ * @module
+ */
+/**
+ * Whether `href` leads to the page at `url`: the same origin and pathname, with a
+ * trailing slash, the query, and the hash ignored. A relative `href` resolves
+ * against `url`, as a browser resolves it.
+ *
+ * @param href - a link's `href`, absolute or relative
+ * @param url - the current page's url, e.g. `page.url`
+ * @returns `false` for an `href` that isn't a valid url
+ */
+export declare const href_is_current_page: (href: string, url: URL) => boolean;
+//# sourceMappingURL=page_helpers.d.ts.map

package/dist/page_helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page_helpers.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/page_helpers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB,GAAI,MAAM,MAAM,EAAE,KAAK,GAAG,KAAG,OAO7D,CAAC"}

package/dist/page_helpers.js

@@ -0,0 +1,23 @@
+/**
+ * Helpers for relating links to the current page.
+ *
+ * @module
+ */
+/** A pathname without its trailing slash, except the root's. */
+const strip_trailing_slash = (pathname) => pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+/**
+ * Whether `href` leads to the page at `url`: the same origin and pathname, with a
+ * trailing slash, the query, and the hash ignored. A relative `href` resolves
+ * against `url`, as a browser resolves it.
+ *
+ * @param href - a link's `href`, absolute or relative
+ * @param url - the current page's url, e.g. `page.url`
+ * @returns `false` for an `href` that isn't a valid url
+ */
+export const href_is_current_page = (href, url) => {
+    if (!URL.canParse(href, url))
+        return false;
+    const target = new URL(href, url);
+    return (target.origin === url.origin &&
+        strip_trailing_slash(target.pathname) === strip_trailing_slash(url.pathname));
+};

package/package.json

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

package/src/lib/alert.ts

@@ -4,7 +4,7 @@ export type AlertStatus = 'inform' | 'help' | 'error';
 
 export interface AlertStatusOptions {
 	color: string;
-	icon: string | null;
+	icon: string;
 }
 
 export const alert_status_options: Record<AlertStatus, AlertStatusOptions> = {

package/src/lib/page_helpers.ts

@@ -0,0 +1,27 @@
+/**
+ * Helpers for relating links to the current page.
+ *
+ * @module
+ */
+
+/** A pathname without its trailing slash, except the root's. */
+const strip_trailing_slash = (pathname: string): string =>
+	pathname.length > 1 && pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+
+/**
+ * Whether `href` leads to the page at `url`: the same origin and pathname, with a
+ * trailing slash, the query, and the hash ignored. A relative `href` resolves
+ * against `url`, as a browser resolves it.
+ *
+ * @param href - a link's `href`, absolute or relative
+ * @param url - the current page's url, e.g. `page.url`
+ * @returns `false` for an `href` that isn't a valid url
+ */
+export const href_is_current_page = (href: string, url: URL): boolean => {
+	if (!URL.canParse(href, url)) return false;
+	const target = new URL(href, url);
+	return (
+		target.origin === url.origin &&
+		strip_trailing_slash(target.pathname) === strip_trailing_slash(url.pathname)
+	);
+};