@fuzdev/fuz_ui 0.211.0 → 0.213.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

@@ -103,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/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/Redirect.svelte

@@ -28,7 +28,10 @@
 	const url = $derived(host + path);
 
 	onMount(() => {
-		if (auto) void goto(url, { replaceState: true }); // eslint-disable-line svelte/no-navigation-without-resolve
+		if (!auto) return;
+		// `goto` rejects URLs that aren't routes of this app, like static files, other apps,
+		// and other hosts, which navigate the browser itself
+		goto(url, { replace: true }).catch(() => location.replace(url));
 	});
 </script>
 

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

@@ -1 +1 @@
-{"version":3,"file":"Redirect.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Redirect.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;CAClC,CAAC;AAoCH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Redirect.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Redirect.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE9C,KAAK,gBAAgB,GAAI;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;CAClC,CAAC;AAuCH,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,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/autofocus.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autofocus.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/autofocus.svelte.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,YAAY,KAAG,UAAU,CAAC,WAAW,GAAG,UAAU,CAI5D,CAAC"}
+{"version":3,"file":"autofocus.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/autofocus.svelte.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GACpB,UAAU,YAAY,KAAG,UAAU,CAAC,WAAW,GAAG,UAAU,CAG5D,CAAC"}

package/dist/autofocus.svelte.js

@@ -10,6 +10,5 @@
  * @param options - focus options forwarded to `element.focus()`; defaults to `{focusVisible: true}` to show focus indicators on programmatic focus
  */
 export const autofocus = (options) => (el) => {
-    // focusVisible missing from TS lib.dom.d.ts as of 5.9
     el.focus({ focusVisible: true, ...options });
 };

package/dist/csp.d.ts

@@ -58,7 +58,7 @@ export interface CreateCspDirectivesOptions {
     };
 }
 /**
- * Builds a CSP directives map for use with SvelteKit's `kit.csp.directives` option.
+ * Builds a CSP directives map for use with SvelteKit's `csp.directives` option (passed to `sveltekit()`).
  *
  * Restrictive by default; opt into specific permissions via `extend` (append) or
  * `overrides` (replace). Designed to read as an audit log: every user-added source

package/dist/csp.js

@@ -1,5 +1,5 @@
 /**
- * Builds a CSP directives map for use with SvelteKit's `kit.csp.directives` option.
+ * Builds a CSP directives map for use with SvelteKit's `csp.directives` option (passed to `sveltekit()`).
  *
  * Restrictive by default; opt into specific permissions via `extend` (append) or
  * `overrides` (replace). Designed to read as an audit log: every user-added source

package/dist/docs_helpers.svelte.d.ts

@@ -15,7 +15,7 @@ export declare const docs_links_context: {
  */
 export declare const docs_slugify: (str: string) => string;
 export declare const DOCS_PATH_DEFAULT = "/docs";
-export declare const DOCS_PATH: string;
+export declare const DOCS_PATH: "/" | "/about" | "/docs" | "/docs/Alert" | "/docs/Breadcrumb" | "/docs/Breadcrumb/a" | "/docs/Breadcrumb/a/b" | "/docs/Breadcrumb/a/b/c" | "/docs/Breadcrumb/a/b/c/d" | "/docs/Card" | "/docs/Contextmenu" | "/docs/Details" | "/docs/Dialog" | "/docs/Docs" | "/docs/HueInput" | "/docs/LibraryDetail" | "/docs/LibrarySummary" | "/docs/Library" | "/docs/PendingAnimation" | "/docs/PendingButton" | "/docs/Redirect" | "/docs/Sparkline" | "/docs/Svg" | "/docs/Teleport" | "/docs/ThemeRoot" | "/docs/api" | "/docs/csp" | "/docs/icons" | "/docs/intersect" | "/docs/introduction" | "/docs/logos" | "/docs/theming" | "/docs/vite_plugin_pkg_json" | "/help" | `/${string}/` | `/${`docs/api/${string}` & {}}` | `/${string}/help` | `/${string}/about` | `/${string}/docs` | `/${string}/docs/Alert` | `/${string}/docs/Breadcrumb` | `/${string}/docs/Breadcrumb/a` | `/${string}/docs/Breadcrumb/a/b` | `/${string}/docs/Breadcrumb/a/b/c` | `/${string}/docs/Breadcrumb/a/b/c/d` | `/${string}/docs/Card` | `/${string}/docs/Contextmenu` | `/${string}/docs/Details` | `/${string}/docs/Dialog` | `/${string}/docs/Docs` | `/${string}/docs/HueInput` | `/${string}/docs/LibraryDetail` | `/${string}/docs/LibrarySummary` | `/${string}/docs/Library` | `/${string}/docs/PendingAnimation` | `/${string}/docs/PendingButton` | `/${string}/docs/Redirect` | `/${string}/docs/Sparkline` | `/${string}/docs/Svg` | `/${string}/docs/Teleport` | `/${string}/docs/ThemeRoot` | `/${string}/docs/api` | `/${string}/${`docs/api/${string}` & {}}` | `/${string}/docs/csp` | `/${string}/docs/icons` | `/${string}/docs/intersect` | `/${string}/docs/introduction` | `/${string}/docs/logos` | `/${string}/docs/theming` | `/${string}/docs/vite_plugin_pkg_json`;
 export declare const DOCS_API_PATH: string;
 export declare const to_docs_path_info: (path_slug: string, pathname: string, root_path?: string) => {
     path: string;

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

@@ -1 +1 @@
-{"version":3,"file":"docs_helpers.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/docs_helpers.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAKzD,eAAO,MAAM,kBAAkB;;;;CAA8B,CAAC;AAE9D;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,KAAG,MAY1C,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAU,CAAC;AACzC,eAAO,MAAM,SAAS,QAAmB,CAAC;AAC1C,eAAO,MAAM,aAAa,QAAqB,CAAC;AAEhD,eAAO,MAAM,iBAAiB,GAC7B,WAAW,MAAM,EACjB,UAAU,MAAM,EAChB,kBAA6B,KAC3B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;CAK7E,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B;AAED,qBAAa,SAAS;;IACrB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAmB;IAgBlE,UAAU,iBA4BP;IAEH,QAAQ,CAAC,kBAAkB,EAAE,SAAS,CAAC,MAAM,CAAC,CAAmB;gBAErD,SAAS,SAAoB;IAIzC,GAAG,CACF,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,GAAG,CAAC,EAAE,WAAW,EACjB,KAAK,SAAI,EACT,SAAS,CAAC,EAAE,MAAM,EAClB,WAAW,CAAC,EAAE,MAAM,GAClB,MAAM;IAkBT,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIxB;;;OAGG;IACH,mBAAmB,IAAI,MAAM;CAG7B"}
+{"version":3,"file":"docs_helpers.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/docs_helpers.svelte.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAKzD,eAAO,MAAM,kBAAkB;;;;CAA8B,CAAC;AAE9D;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,KAAG,MAY1C,CAAC;AAEF,eAAO,MAAM,iBAAiB,UAAU,CAAC;AACzC,eAAO,MAAM,SAAS,6qDAAmB,CAAC;AAC1C,eAAO,MAAM,aAAa,QAAqB,CAAC;AAEhD,eAAO,MAAM,iBAAiB,GAC7B,WAAW,MAAM,EACjB,UAAU,MAAM,EAChB,kBAA6B,KAC3B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;CAK7E,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CAC9B;AAED,qBAAa,SAAS;;IACrB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAE3B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,CAAmB;IAgBlE,UAAU,iBA4BP;IAEH,QAAQ,CAAC,kBAAkB,EAAE,SAAS,CAAC,MAAM,CAAC,CAAmB;gBAErD,SAAS,SAAoB;IAIzC,GAAG,CACF,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,GAAG,CAAC,EAAE,WAAW,EACjB,KAAK,SAAI,EACT,SAAS,CAAC,EAAE,MAAM,EAClB,WAAW,CAAC,EAAE,MAAM,GAClB,MAAM;IAkBT,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAIxB;;;OAGG;IACH,mBAAmB,IAAI,MAAM;CAG7B"}

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. SvelteKit's readonly `page.url`
+ * @returns `false` for an `href` that isn't a valid url
+ */
+export declare const href_is_current_page: (href: string, url: Pick<URL, "href" | "origin" | "pathname">) => 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,GAChC,MAAM,MAAM,EACZ,KAAK,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC,KAC5C,OAOF,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. SvelteKit's readonly `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.href))
+        return false;
+    const target = new URL(href, url.href);
+    return (target.origin === url.origin &&
+        strip_trailing_slash(target.pathname) === strip_trailing_slash(url.pathname));
+};

package/dist/vite_plugin_pkg_json.d.ts

@@ -21,7 +21,7 @@
  *
  * ```ts
  * // vite.config.ts
- * import {vite_plugin_pkg_json} from './vite_plugin_pkg_json.js';
+ * import {vite_plugin_pkg_json} from '@fuzdev/fuz_ui/vite_plugin_pkg_json.ts';
  * export default defineConfig({plugins: [vite_plugin_pkg_json(), sveltekit()]});
  * ```
  *

package/dist/vite_plugin_pkg_json.js

@@ -21,7 +21,7 @@
  *
  * ```ts
  * // vite.config.ts
- * import {vite_plugin_pkg_json} from './vite_plugin_pkg_json.js';
+ * import {vite_plugin_pkg_json} from '@fuzdev/fuz_ui/vite_plugin_pkg_json.ts';
  * export default defineConfig({plugins: [vite_plugin_pkg_json(), sveltekit()]});
  * ```
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_ui",
-  "version": "0.211.0",
+  "version": "0.213.0",
   "description": "Svelte UI library",
   "tagline": "friendly user zystem",
   "glyph": "🧶",
@@ -29,6 +29,10 @@
     "deploy": "gro deploy"
   },
   "type": "module",
+  "imports": {
+    "#lib/*": "./src/lib/*",
+    "#routes/*": "./src/routes/*"
+  },
   "engines": {
     "node": ">=24.14"
   },
@@ -36,9 +40,9 @@
     "@fuzdev/fuz_code": ">=0.46.0",
     "@fuzdev/fuz_css": ">=0.65.0",
     "@fuzdev/fuz_util": ">=0.72.0",
-    "@fuzdev/gro": ">=0.204.0",
+    "@fuzdev/gro": ">=0.214.0",
     "@fuzdev/mdz": ">=0.2.0",
-    "@sveltejs/kit": "^2.47.3",
+    "@sveltejs/kit": "^3",
     "esm-env": "^1",
     "svelte": "^5",
     "zod": "^4.1.12"
@@ -64,28 +68,28 @@
     "@changesets/changelog-git": "^0.2.1",
     "@fuzdev/blake3-wasm": "^0.2.0",
     "@fuzdev/fuz_code": "^0.50.0",
-    "@fuzdev/fuz_css": "^0.66.0",
+    "@fuzdev/fuz_css": "^0.66.1",
     "@fuzdev/fuz_util": "^0.72.0",
-    "@fuzdev/gro": "^0.213.0",
-    "@fuzdev/mdz": "^0.3.0",
-    "@ryanatkn/eslint-config": "^0.12.2",
-    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.69.1",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@fuzdev/gro": "^0.214.0",
+    "@fuzdev/mdz": "^0.4.0",
+    "@ryanatkn/eslint-config": "^0.12.3",
+    "@sveltejs/adapter-static": "^4.0.0",
+    "@sveltejs/kit": "^3.0.1",
+    "@sveltejs/package": "^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@types/node": "^24.10.1",
     "@webref/css": "^8.2.0",
     "eslint": "^9.39.4",
     "eslint-plugin-svelte": "^3.19.0",
     "esm-env": "^1.2.2",
     "jsdom": "^29.1.1",
-    "svelte": "^5.56.4",
-    "svelte-check": "^4.7.2",
-    "svelte-docinfo": "^0.8.0",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.6",
+    "svelte-docinfo": "^0.8.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.60.0",
-    "vite": "^7.3.6",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.71.1",
+    "vite": "^8.3.4",
     "vitest": "^5.0.0",
     "zod": "^4.3.6"
   },

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/autofocus.svelte.ts

@@ -15,6 +15,5 @@ import type { Attachment } from 'svelte/attachments';
 export const autofocus =
 	(options?: FocusOptions): Attachment<HTMLElement | SVGElement> =>
 	(el) => {
-		// focusVisible missing from TS lib.dom.d.ts as of 5.9
-		el.focus({ focusVisible: true, ...options } as FocusOptions);
+		el.focus({ focusVisible: true, ...options });
 	};

package/src/lib/csp.ts

@@ -65,7 +65,7 @@ export interface CreateCspDirectivesOptions {
 }
 
 /**
- * Builds a CSP directives map for use with SvelteKit's `kit.csp.directives` option.
+ * Builds a CSP directives map for use with SvelteKit's `csp.directives` option (passed to `sveltekit()`).
  *
  * Restrictive by default; opt into specific permissions via `extend` (append) or
  * `overrides` (replace). Designed to read as an audit log: every user-added source

package/src/lib/page_helpers.ts

@@ -0,0 +1,30 @@
+/**
+ * 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. SvelteKit's readonly `page.url`
+ * @returns `false` for an `href` that isn't a valid url
+ */
+export const href_is_current_page = (
+	href: string,
+	url: Pick<URL, 'href' | 'origin' | 'pathname'>
+): boolean => {
+	if (!URL.canParse(href, url.href)) return false;
+	const target = new URL(href, url.href);
+	return (
+		target.origin === url.origin &&
+		strip_trailing_slash(target.pathname) === strip_trailing_slash(url.pathname)
+	);
+};