@fuzdev/fuz_ui 0.208.0 → 0.210.0

package/dist/ApiModulesList.svelte

@@ -25,7 +25,7 @@
 	<TomeSection>
 		<TomeSectionHeader text="Modules" />
 		{#if modules.length === 0}
-			<p class="color_c">No modules match your search.</p>
+			<p class="negative_60">No modules match your search.</p>
 		{:else}
 			<ul class="modules-list">
 				{#each modules as module (module.path)}

package/dist/ColorSchemeInput.svelte

@@ -1,64 +1,26 @@
 <script lang="ts">
-	import { swallow } from '@fuzdev/fuz_util/dom.ts';
 	import { color_schemes, type ColorScheme } from '@fuzdev/fuz_css/theme.ts';
+	import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
 	import { theme_state_context } from './theme_state.svelte.js';
+	import RadioMenu from './RadioMenu.svelte';
 
 	const get_theme_state = theme_state_context.get();
 
 	const {
 		value = get_theme_state(),
 		...rest
-	}: SvelteHTMLElements['menu'] & {
+	}: OmitStrict<SvelteHTMLElements['menu'], 'title' | 'children' | 'onselect'> & {
 		value?: { color_scheme: ColorScheme };
 	} = $props();
 </script>
 
-<!-- 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}">
-	{#each color_schemes as color_scheme (color_scheme)}
-		{@const selected = color_scheme === value.color_scheme}
-		<button
-			type="button"
-			class={['color-scheme color_a', { selected }]}
-			role="menuitemradio"
-			title={selected
-				? `${color_scheme} color scheme is selected`
-				: `select ${color_scheme} color scheme`}
-			aria-checked={selected}
-			onclick={(e) => {
-				swallow(e);
-				value.color_scheme = color_scheme;
-			}}
-		>
-			<div class="content">{color_scheme}</div>
-		</button>
-	{/each}
-</menu>
-
-<style>
-	.color-scheme-control {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-	}
-	.content {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		padding: 0 var(--space_lg);
-	}
-	.color-scheme {
-		border-radius: 0;
-	}
-	.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 {
-		border-top-right-radius: var(--border_radius, var(--border_radius_md));
-		border-bottom-right-radius: var(--border_radius, var(--border_radius_md));
-	}
-</style>
+<RadioMenu
+	{...rest}
+	options={color_schemes}
+	bind:value={value.color_scheme}
+	label={(color_scheme) => color_scheme}
+	title={(color_scheme, selected) =>
+		selected ? `${color_scheme} color scheme is selected` : `select ${color_scheme} color scheme`}
+/>

package/dist/ColorSchemeInput.svelte.d.ts

@@ -1,6 +1,7 @@
 import { type ColorScheme } from '@fuzdev/fuz_css/theme.ts';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
 import type { SvelteHTMLElements } from 'svelte/elements';
-type $$ComponentProps = SvelteHTMLElements['menu'] & {
+type $$ComponentProps = OmitStrict<SvelteHTMLElements['menu'], 'title' | 'children' | 'onselect'> & {
     value?: {
         color_scheme: ColorScheme;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ColorSchemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,KAAK,CAAC,EAAE;QAAE,YAAY,EAAE,WAAW,CAAA;KAAE,CAAC;CACtC,CAAC;AAmCH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ColorSchemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ColorSchemeInput.svelte"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAKzD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IACpG,KAAK,CAAC,EAAE;QAAE,YAAY,EAAE,WAAW,CAAA;KAAE,CAAC;CACtC,CAAC;AAsBH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/CopyToClipboard.svelte

@@ -69,7 +69,7 @@
 	class={[
 		'copy-to-clipboard',
 		rest.class,
-		{ icon_button: children ? false : icon_button, copied, failed, color_c: failed }
+		{ icon_button: children ? false : icon_button, copied, failed, palette_c: failed }
 	]}
 	onclick={(e) => {
 		onclick?.(e); // before the internal handler, which is async

package/dist/Dialog.svelte

@@ -196,9 +196,13 @@
 		overflow: auto;
 		overscroll-behavior: contain;
 	}
-	/* the native backdrop is the dim background; fade it in on open */
+	/* the native backdrop is the dim background; fade it in on open. It reads
+		fuz_css's `--backdrop_color` like a plain dialog's does, then its default
+		`--darken_60` for a variable set without it. Older browsers don't let
+		::backdrop inherit custom properties from the page, so the last fallback
+		is that value as a literal */
 	.dialog::backdrop {
-		background-color: var(--dialog_bg, var(--darken_60));
+		background-color: var(--backdrop_color, var(--darken_60, #000000a6));
 		transition: background-color var(--duration_2) ease;
 	}
 	@starting-style {

package/dist/DialogContent.svelte

@@ -68,8 +68,8 @@
 		max_width?: string;
 		/**
 		 * The close button floating just outside the content surface's top-right
-		 * corner. `true` (the default) renders an absolutely-positioned `.sm.plain.icon_button`
-		 * that closes the dialog; `false` removes it. It renders after
+		 * corner. `true` (the default) renders an absolutely-positioned
+		 * `.sized_sm.plain.icon_button` that closes the dialog; `false` removes it. It renders after
 		 * `children`, so a content control (or an `autofocus` element) takes initial
 		 * focus on open rather than the close button.
 		 *
@@ -107,7 +107,7 @@
 	// into the consumer's snippet, which carries its own style scope
 	const close_button_attrs: DialogCloseButtonAttrs = {
 		type: 'button',
-		class: 'sm plain icon_button',
+		class: 'sized_sm plain icon_button',
 		style: 'position: absolute; top: 0; right: 0;',
 		onclick: dialog.close,
 		title: 'close',

package/dist/DialogContent.svelte.d.ts

@@ -33,8 +33,8 @@ type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     max_width?: string;
     /**
      * The close button floating just outside the content surface's top-right
-     * corner. `true` (the default) renders an absolutely-positioned `.sm.plain.icon_button`
-     * that closes the dialog; `false` removes it. It renders after
+     * corner. `true` (the default) renders an absolutely-positioned
+     * `.sized_sm.plain.icon_button` that closes the dialog; `false` removes it. It renders after
      * `children`, so a content control (or an `autofocus` element) takes initial
      * focus on open rather than the close button.
      *

package/dist/DocsFooter.svelte

@@ -64,7 +64,7 @@
 		border: var(--border_width) double var(--border_color);
 	}
 	.logo a:hover {
-		--border_color: var(--color_a_50);
+		--border_color: var(--palette_a_50);
 	}
 	.root-url {
 		/* TODO messy */

package/dist/EcosystemLinks.svelte

@@ -14,8 +14,8 @@
 <ul {...rest}>
 	<li>
 		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-		<a rel="me" href={FUZ_DEV_URL} class={{ selected: selected === 'fuz.dev' }}>fuz.dev</a>
-		- the Fuz stack homepage{#if selected === 'fuz.dev'}, you are here{/if}
+		<a rel="me" href={FUZ_DEV_URL} class={{ selected: selected === 'fuz.dev' }}>fuz.dev</a> - the
+		Fuz stack homepage{#if selected === 'fuz.dev'}, you are here{/if}
 	</li>
 	<li>
 		GitHub as <a rel="me" href="https://github.com/fuzdev">@fuzdev</a>

package/dist/HueInput.svelte

@@ -67,12 +67,12 @@
 
 <style>
 	.hue-input {
-		--outline_color: hsl(var(--hue) 50% 60%);
+		--outline_color: oklch(0.65 0.13 var(--hue));
 		/* TODO @many figure these variables out so they're easily customized (similar pattern in a lot of places) */
-		/* --thumb_background_color: hsl(var(--hue) 50% 50%); */
+		/* --thumb_background_color: oklch(0.6 0.13 var(--hue)); */
 	}
 	.preview {
-		background-color: hsl(var(--hue) 50% 50%);
+		background-color: oklch(0.6 0.13 var(--hue));
 		/* mirror the `min-height: var(--input_height)` that fuz_css gives the sibling inputs,
 		so the preview tracks their height even when `--input_height` is customized */
 		min-height: var(--input_height);
@@ -88,22 +88,14 @@
 	}
 	.minimap-wrapper {
 		padding: 0 var(--input_padding_x);
-		background: hsl(0 50% 50%) 0%;
 	}
 	.minimap {
+		/* sweep the OKLCH hue circle at constant lightness/chroma so the strip
+			matches what the hue knobs actually produce */
 		background: linear-gradient(
-			90deg,
-			hsl(0 50% 50%) 0%,
-			hsl(36 50% 50%) 10%,
-			hsl(72 50% 50%) 20%,
-			hsl(108 50% 50%) 30%,
-			hsl(144 50% 50%) 40%,
-			hsl(180 50% 50%) 50%,
-			hsl(216 50% 50%) 60%,
-			hsl(252 50% 50%) 70%,
-			hsl(288 50% 50%) 80%,
-			hsl(324 50% 50%) 90%,
-			hsl(360 50% 50%) 100%
+			90deg in oklch longer hue,
+			oklch(0.6 0.13 0) 0%,
+			oklch(0.6 0.13 360) 100%
 		);
 		height: var(--space_lg);
 	}

package/dist/LibraryDetail.svelte

@@ -282,16 +282,16 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 	}
 	/* TODO probably add variables/classes for these */
 	.ts {
-		--link_color: var(--color_a_50);
+		--link_color: var(--palette_a_50);
 	}
 	.svelte {
-		--link_color: var(--color_h_50);
+		--link_color: var(--palette_h_50);
 	}
 	.css {
-		--link_color: var(--color_b_50);
+		--link_color: var(--palette_b_50);
 	}
 	.json {
-		--link_color: var(--color_f_50);
+		--link_color: var(--palette_f_50);
 	}
 	/* TODO extract */
 	.declarations {

package/dist/ModuleLink.svelte

@@ -34,7 +34,7 @@
 	// the site-local path if `homepage_url` is unavailable.
 	const url_api = $derived((full && module?.url_api_full) || module?.url_api);
 
-	const color_class = $derived(module_path.endsWith('.svelte') ? 'color_h' : '');
+	const color_class = $derived(module_path.endsWith('.svelte') ? 'palette_h' : '');
 
 	const contextmenu_entries = $derived(module ? create_module_contextmenu(module) : undefined);
 </script>

package/dist/ProjectLinks.svelte

@@ -1,15 +1,6 @@
 <script lang="ts">
 	import Svg from './Svg.svelte';
-	import Sparkline from './Sparkline.svelte';
 	import { project_items, type ProjectItem } from './projects.js';
-	import { project_stats_data } from './project_stats_data.js';
-	import { project_stats_label, project_stats_to_monthly_series } from './project_stats.js';
-
-	const { series, max } = project_stats_to_monthly_series(project_stats_data);
-	const series_by_name = new Map(series.map((s) => [s.name, s.counts]));
-	const label_by_name = new Map(
-		project_stats_data.projects.map((p) => [p.name, project_stats_label(p)])
-	);
 </script>
 
 <h2 class="mt_0 mb_xl2">Packages</h2>
@@ -18,36 +9,19 @@
 		{@render package_thumbnail(project_item)}
 	{/each}
 </menu>
-<small class="display:block text-align:right">
-	the charts show public commit activity<br />since Gro started in August 2019 -<br />most of the
-	repos created in 2023-2024 are<br />history-resetting forks from 2020~2023 attempts
-</small>
 
 {#snippet package_thumbnail(project_item: ProjectItem)}
-	{@const counts = series_by_name.get(project_item.name)}
-	<!-- eslint-disable svelte/no-navigation-without-resolve -->
-	<a
-		class="thumbnail row align-items:start shade_00 px_md py_xs border_radius_sm mb_lg"
-		href={project_item.url}
-	>
+	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+	<a class="thumbnail row shade_00 px_md py_xs border_radius_sm mb_lg" href={project_item.url}>
 		<Svg shrink={false} data={project_item.logo} size="var(--icon_size_lg)" />
 		<div class="pl_lg width_atmost_sm">
-			<div class="thumbnail-name row {project_item.color_class}">
-				{project_item.name}
-				{#if counts}
-					{@const stats_label = label_by_name.get(project_item.name)}
-					<div class="thumbnail-sparkline pl_md {project_item.color_class}" title={stats_label}>
-						<Sparkline values={counts} {max} scale={1 / 3} end_dot label={stats_label} />
-					</div>
-				{/if}
-			</div>
+			<div class="thumbnail-name {project_item.color_class}">{project_item.name}</div>
 			<div class="thumbnail-description font_size_md text_70 font-weight:500">
 				{project_item.description}
 				{project_item.glyph}
 			</div>
 		</div>
 	</a>
-	<!-- eslint-enable svelte/no-navigation-without-resolve -->
 {/snippet}
 
 <style>
@@ -84,7 +58,4 @@
 				transparent
 			);
 	}
-	.thumbnail-sparkline {
-		margin-left: auto;
-	}
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"ProjectLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ProjectLinks.svelte"],"names":[],"mappings":"AA8DA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;;kBAA+E,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ProjectLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ProjectLinks.svelte"],"names":[],"mappings":"AAoCA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;;kBAA+E,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/dist/RadioMenu.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" generics="T">
+	import { swallow } from '@fuzdev/fuz_util/dom.ts';
+	import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+	import type { Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	/**
+	 * A horizontal menu of joined `menuitemradio` buttons with one selected -
+	 * the shape `ColorSchemeInput` takes, and any other few-way pick where the
+	 * options should sit one glance apart rather than behind a `select`.
+	 *
+	 * @module
+	 */
+
+	let {
+		options,
+		value = $bindable(),
+		onselect,
+		label,
+		title,
+		key = (option: T): unknown => label(option),
+		children,
+		...rest
+	}: OmitStrict<SvelteHTMLElements['menu'], 'title' | 'children' | 'onselect'> & {
+		options: Array<T>;
+		/** The selected option, compared by identity; bindable. */
+		value: T;
+		/** Called after a click selects an option. */
+		onselect?: (option: T) => void;
+		/** The display text of an option - also the default `title` and `key` source. */
+		label: (option: T) => string;
+		/** The button title, defaulting to "select X" / "X is selected" from `label`. */
+		title?: (option: T, selected: boolean) => string;
+		/** Keys the options list; defaults to the label. */
+		key?: (option: T) => unknown;
+		/** Custom button content in place of the label text. */
+		children?: Snippet<[option: T, selected: boolean]>;
+	} = $props();
+
+	const title_of = (option: T, selected: boolean): string =>
+		title
+			? title(option, selected)
+			: selected
+				? `${label(option)} is selected`
+				: `select ${label(option)}`;
+</script>
+
+<menu {...rest} class={['radio-menu unstyled', rest.class]}>
+	{#each options as option (key(option))}
+		{@const selected = option === value}
+		<button
+			type="button"
+			class={['radio-menu-item palette_a', { selected }]}
+			role="menuitemradio"
+			title={title_of(option, selected)}
+			aria-checked={selected}
+			onclick={(e) => {
+				swallow(e);
+				value = option;
+				onselect?.(option);
+			}}
+		>
+			<div class="content">
+				{#if children}
+					{@render children(option, selected)}
+				{:else}
+					{label(option)}
+				{/if}
+			</div>
+		</button>
+	{/each}
+</menu>
+
+<style>
+	.radio-menu {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+	.content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 var(--space_lg);
+	}
+	.radio-menu-item {
+		border-radius: 0;
+	}
+	.radio-menu-item:first-child {
+		border-top-left-radius: var(--border_radius, var(--border_radius_md));
+		border-bottom-left-radius: var(--border_radius, var(--border_radius_md));
+	}
+	.radio-menu-item:last-child {
+		border-top-right-radius: var(--border_radius, var(--border_radius_md));
+		border-bottom-right-radius: var(--border_radius, var(--border_radius_md));
+	}
+</style>

package/dist/RadioMenu.svelte.d.ts

@@ -0,0 +1,41 @@
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: OmitStrict<import("svelte/elements").HTMLMenuAttributes, "children" | "title" | "onselect"> & {
+        options: Array<T>;
+        /** The selected option, compared by identity; bindable. */
+        value: T;
+        /** Called after a click selects an option. */
+        onselect?: (option: T) => void;
+        /** The display text of an option - also the default `title` and `key` source. */
+        label: (option: T) => string;
+        /** The button title, defaulting to "select X" / "X is selected" from `label`. */
+        title?: (option: T, selected: boolean) => string;
+        /** Keys the options list; defaults to the label. */
+        key?: (option: T) => unknown;
+        /** Custom button content in place of the label text. */
+        children?: Snippet<[option: T, selected: boolean]>;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioMenu: $$IsomorphicComponent;
+type RadioMenu<T> = InstanceType<typeof RadioMenu<T>>;
+export default RadioMenu;
+//# sourceMappingURL=RadioMenu.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioMenu.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/RadioMenu.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,iBAAS,QAAQ,CAAC,CAAC;;iBAMR,KAAK,CAAC,CAAC,CAAC;QACjB,2DAA2D;eACpD,CAAC;QACR,8CAA8C;mBACnC,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI;QAC9B,iFAAiF;eAC1E,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM;QAC5B,iFAAiF;gBACzE,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM;QAChD,oDAAoD;cAC9C,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO;QAC5B,wDAAwD;mBAC7C,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;;;;;;EAoD0E;AAC9H,cAAM,iBAAiB,CAAC,CAAC;IACrB,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC5X,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3H,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,SAAS,EAAE,qBAAmC,CAAC;AACnC,KAAK,SAAS,CAAC,CAAC,IAAI,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACxD,eAAe,SAAS,CAAC"}

package/dist/Spiders.svelte

@@ -15,16 +15,16 @@
 
 	const {
 		spiders = [
-			'var(--color_a_50)',
-			'var(--color_b_50)',
-			'var(--color_c_50)',
-			'var(--color_d_50)',
-			'var(--color_e_50)',
-			'var(--color_f_50)',
-			'var(--color_g_50)',
-			'var(--color_h_50)',
-			'var(--color_i_50)',
-			'var(--color_j_50)'
+			'var(--palette_a_50)',
+			'var(--palette_b_50)',
+			'var(--palette_c_50)',
+			'var(--palette_d_50)',
+			'var(--palette_e_50)',
+			'var(--palette_f_50)',
+			'var(--palette_g_50)',
+			'var(--palette_h_50)',
+			'var(--palette_i_50)',
+			'var(--palette_j_50)'
 		],
 		seed = minute_of_day(),
 		random = create_random_alea(seed),

package/dist/ThemeInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { swallow } from '@fuzdev/fuz_util/dom.ts';
-	import type { Theme } from '@fuzdev/fuz_css/theme.ts';
+	import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 	import { default_themes } from '@fuzdev/fuz_css/themes.ts';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 
@@ -35,7 +35,7 @@
 		<li class="row" role="none">
 			<button
 				type="button"
-				class={['theme-button color_a', { selected }]}
+				class={['theme-button palette_a', { selected }]}
 				role="menuitemradio"
 				aria-label="{theme.name} theme"
 				aria-checked={selected}

package/dist/ThemeInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '@fuzdev/fuz_css/theme.ts';
+import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['menu'] & {
     selected_theme?: {

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC,CAAC;AAqDH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ThemeInput.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeInput.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIzD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,MAAM,CAAC,GAAG;IACrD,cAAc,CAAC,EAAE;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC;IAClC,MAAM,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,GAAG,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAChC,CAAC;AAqDH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/ThemeRoot.svelte

@@ -4,7 +4,8 @@
 
 <script lang="ts">
 	import { onMount, type Snippet } from 'svelte';
-	import { render_theme_style, type Theme } from '@fuzdev/fuz_css/theme.ts';
+	import { render_theme_style } from '@fuzdev/fuz_css/theme.ts';
+	import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 	import { DEFAULT_THEME } from '@fuzdev/fuz_css/themes.ts';
 	import { DEV } from 'esm-env';
 

package/dist/ThemeRoot.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Snippet } from 'svelte';
-import { type Theme } from '@fuzdev/fuz_css/theme.ts';
+import type { Theme } from '@fuzdev/fuz_css/variable.ts';
 import { load_color_scheme as default_load_color_scheme, save_color_scheme as default_save_color_scheme, sync_color_scheme as default_sync_color_scheme, save_theme as default_save_theme, load_theme as default_load_theme, ThemeState } from './theme_state.svelte.js';
 type $$ComponentProps = {
     sync_color_scheme?: typeof default_sync_color_scheme;

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

@@ -1 +1 @@
-{"version":3,"file":"ThemeRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeRoot.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAsB,KAAK,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAI1E,OAAO,EACL,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,UAAU,IAAI,kBAAkB,EAChC,UAAU,IAAI,kBAAkB,EAEhC,UAAU,EACV,MAAM,yBAAyB,CAAC;AAGjC,KAAK,gBAAgB,GAAI;IACxB,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACvC,cAAc,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,QAAQ,EAAE,OAAO,CAChB;QAAC,WAAW,EAAE,UAAU;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI;QAAE,gBAAgB,EAAE,MAAM,GAAG,IAAI;KAAC,CAChF,CAAC;CACF,CAAC;AAoFH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ThemeRoot.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/ThemeRoot.svelte"],"names":[],"mappings":"AAMA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE/C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,6BAA6B,CAAC;AAIzD,OAAO,EACL,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,iBAAiB,IAAI,yBAAyB,EAC9C,UAAU,IAAI,kBAAkB,EAChC,UAAU,IAAI,kBAAkB,EAEhC,UAAU,EACV,MAAM,yBAAyB,CAAC;AAGjC,KAAK,gBAAgB,GAAI;IACxB,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,iBAAiB,CAAC,EAAE,OAAO,yBAAyB,CAAC;IACrD,UAAU,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,kBAAkB,CAAC;IACvC,cAAc,CAAC,EAAE,KAAK,GAAG,SAAS,CAAC;IACnC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,QAAQ,EAAE,OAAO,CAChB;QAAC,WAAW,EAAE,UAAU;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI;QAAE,gBAAgB,EAAE,MAAM,GAAG,IAAI;KAAC,CAChF,CAAC;CACF,CAAC;AAqFH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/alert.js

@@ -1,6 +1,6 @@
 // TODO move to module context?
 export const alert_status_options = {
     inform: { color: 'var(--text_70)', icon: '✻' },
-    help: { color: 'var(--color_b_50)', icon: '➺' },
-    error: { color: 'var(--color_c_50)', icon: '!?' }
+    help: { color: 'var(--palette_b_50)', icon: '➺' },
+    error: { color: 'var(--negative_50)', icon: '!?' }
 };

package/dist/logos.d.ts

@@ -55,7 +55,7 @@ export declare const logo_fuz_mastodon: {
         d: string;
     }[];
 };
-export declare const logo_fuz_gitops: {
+export declare const logo_fuz_repos: {
     label: string;
     fill: string;
     paths: {

package/dist/logos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logos.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/logos.ts"],"names":[],"mappings":"AAqBA,eAAO,MAAM,QAAQ;;;;;;CAgCF,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;CAIN,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;;CAKN,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;CAIL,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAIX,CAAC;AAEpB,eAAO,MAAM,eAAe;;;;;;CAIT,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,mBAAmB;;;;;;CAQb,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAQX,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAwBP,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;;;;CAWL,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC"}
+{"version":3,"file":"logos.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/logos.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,QAAQ;;;;;;CAgCF,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;CAIN,CAAC;AAEpB,eAAO,MAAM,YAAY;;;;;;;CAKN,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;CAIL,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAIX,CAAC;AAEpB,eAAO,MAAM,cAAc;;;;;;CAIR,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAIP,CAAC;AAEpB,eAAO,MAAM,mBAAmB;;;;;;CAQb,CAAC;AAEpB,eAAO,MAAM,iBAAiB;;;;;;CAQX,CAAC;AAEpB,eAAO,MAAM,aAAa;;;;;;CAwBP,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC;AAEpB,eAAO,MAAM,WAAW;;;;;;;;;CAWL,CAAC;AAEpB,eAAO,MAAM,QAAQ;;;;;;CAQF,CAAC"}

package/dist/logos.js

@@ -1,18 +1,20 @@
 // TODO these can be optimized during builds, helpers and gen files?
 /*
 
-Logo colors are the midpoint between the light and dark versions of color variant 5:
+Logo colors are frozen brand values, originally derived as the midpoint
+between the light and dark mid-stops of fuz_css's pre-OKLCH palette
+(today's `--palette_X_50`), and deliberately not re-derived since:
 
 ```css
---color_a: #6199d1;
---color_b: #3db33d;
---color_c: #d93636;
---color_d: #8866cc;
---color_e: #d8bc31;
---color_f: #84522a; // TODO this one isn't the midpoint bc fuz_css's color needs tweaking, too light in dark mode
---color_g: #e55d95;
---color_h: #f4672f;
---color_i: #36e2e2;
+#6199d1 (blue, a)
+#3db33d (green, b)
+#d93636 (red, c)
+#8866cc (purple, d)
+#d8bc31 (yellow, e)
+#84522a (brown, f)
+#e55d95 (pink, g)
+#f4672f (orange, h)
+#36e2e2 (cyan, i)
 ```
 */
 export const logo_gro = {
@@ -88,7 +90,7 @@ export const logo_fuz_mastodon = {
     fill: '#8866cc',
     paths: logo_fuz.paths
 };
-export const logo_fuz_gitops = {
+export const logo_fuz_repos = {
     label: 'a friendly blue spider facing you',
     fill: '#6199d1',
     paths: logo_fuz.paths
@@ -142,7 +144,7 @@ export const logo_fuz_util = {
     ]
 };
 export const logo_tsv = {
-    label: 'a pixelated orange quill drawing a straight line',
+    label: 'a pixelated orange quill drawing a precise line',
     fill: '#f4672f',
     paths: [
         {