@fuzdev/fuz_ui 0.205.0 → 0.205.2

package/dist/Docs.svelte

@@ -5,16 +5,16 @@
 	import {page} from '$app/state';
 
 	import Breadcrumb from './Breadcrumb.svelte';
-	import {Tome, tomes_context} from './tome.js';
+	import {Tome, tomes_context} from './tome.ts';
 	import DocsPrimaryNav from './DocsPrimaryNav.svelte';
 	import DocsSecondaryNav from './DocsSecondaryNav.svelte';
 	import DocsTertiaryNav from './DocsTertiaryNav.svelte';
 	import Dialog from './Dialog.svelte';
 	import DialogContent from './DialogContent.svelte';
 	import DocsFooter from './DocsFooter.svelte';
-	import {site_context} from './site.svelte.js';
-	import {FUZ_DEV_URL} from './constants.js';
-	import {DocsLinks, docs_links_context} from './docs_helpers.svelte.js';
+	import {site_context} from './site.svelte.ts';
+	import {FUZ_DEV_URL} from './constants.ts';
+	import {DocsLinks, docs_links_context} from './docs_helpers.svelte.ts';
 
 	const {
 		tomes,

package/dist/Docs.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import { Tome } from './tome.js';
+import { Tome } from './tome.ts';
 type $$ComponentProps = {
     tomes: Array<Tome>;
     children: Snippet;

package/dist/DocsContent.svelte

@@ -2,8 +2,8 @@
 	import type {Snippet} from 'svelte';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import type {Library} from './library.svelte.js';
-	import type {Tome} from './tome.js';
+	import type {Library} from './library.svelte.ts';
+	import type {Tome} from './tome.ts';
 	import LibrarySummary from './LibrarySummary.svelte';
 
 	const {

package/dist/DocsContent.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import type { Library } from './library.svelte.js';
-import type { Tome } from './tome.js';
+import type { Library } from './library.svelte.ts';
+import type { Tome } from './tome.ts';
 type $$ComponentProps = SvelteHTMLElements['div'] & {
     tomes: Array<Tome>;
     library: Library;

package/dist/DocsFooter.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import {format_url, type Url} from '@fuzdev/fuz_util/url.js';
+	import {format_url, type Url} from '@fuzdev/fuz_util/url.ts';
 	import type {Snippet} from 'svelte';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import Svg from './Svg.svelte';
-	import {logo_github} from './logos.js';
+	import {logo_github} from './logos.ts';
 
 	const {
 		repo_url,

package/dist/DocsFooter.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Url } from '@fuzdev/fuz_util/url.js';
+import { type Url } from '@fuzdev/fuz_util/url.ts';
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['footer'] & {

package/dist/DocsLink.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte';
 	import type {HTMLAttributes, SvelteHTMLElements} from 'svelte/elements';
-	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.ts';
 
 	import ModuleLink from './ModuleLink.svelte';
 	import DeclarationLink from './DeclarationLink.svelte';
-	import {library_context} from './library.svelte.js';
-	import type {Declaration} from './declaration.svelte.js';
-	import type {Module} from './module.svelte.js';
+	import {library_context} from './library.svelte.ts';
+	import type {Declaration} from './declaration.svelte.ts';
+	import type {Module} from './module.svelte.ts';
 
 	const {
 		reference,

package/dist/DocsLink.svelte.d.ts

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, SvelteHTMLElements } from 'svelte/elements';
-import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
-import type { Declaration } from './declaration.svelte.js';
-import type { Module } from './module.svelte.js';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
+import type { Declaration } from './declaration.svelte.ts';
+import type { Module } from './module.svelte.ts';
 type $$ComponentProps = // generic element attrs, the common denominator of the rendered roots -
 OmitStrict<HTMLAttributes<HTMLElement>, 'children'> & {
     reference: string;

package/dist/DocsList.svelte

@@ -14,7 +14,7 @@
 	} = $props();
 </script>
 
-<div {...rest} class="docs-list {rest.class}" class:expand-width={expand_width} class:margin>
+<div {...rest} class={['docs-list', rest.class, {'expand-width': expand_width, margin}]}>
 	{@render children()}
 </div>
 

package/dist/DocsMenu.svelte

@@ -5,7 +5,7 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import DocsList from './DocsList.svelte';
-	import {tome_to_pathname, tome_to_title, type Tome} from './tome.js';
+	import {tome_to_pathname, tome_to_title, type Tome} from './tome.ts';
 	import DocsMenuHeader from './DocsMenuHeader.svelte';
 
 	const {
@@ -39,7 +39,7 @@
 					{#each tomes as item (item)}
 						{@const pathname = tome_to_pathname(item)}
 						<li role="none" transition:slide>
-							<a class="menuitem" href={pathname} class:selected={pathname === page.url.pathname}
+							<a class={['menuitem', {selected: pathname === page.url.pathname}]} href={pathname}
 								><div class="ellipsis">{tome_to_title(item)}</div></a
 							>
 						</li>

package/dist/DocsMenu.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import { type Tome } from './tome.js';
+import { type Tome } from './tome.ts';
 type $$ComponentProps = SvelteHTMLElements['div'] & {
     tomes: Array<Tome>;
     children?: Snippet<[category: string]>;

package/dist/DocsPageLinks.svelte

@@ -4,7 +4,7 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import DocsList from './DocsList.svelte';
-	import {docs_links_context} from './docs_helpers.svelte.js';
+	import {docs_links_context} from './docs_helpers.svelte.ts';
 
 	const {
 		sidebar = true,
@@ -36,16 +36,17 @@
 				<li
 					role="none"
 					transition:slide
-					class:pl_xl={item.depth === 2}
-					class:pl_xl2={item.depth === 3}
-					class:pl_xl3={item.depth >= 4}
+					class={{pl_xl: item.depth === 2, pl_xl2: item.depth === 3, pl_xl3: item.depth >= 4}}
 				>
 					<a
-						class="menuitem"
-						href="#{item.fragment}"
-						class:selected={item.fragment === hash}
-						class:highlighted={docs_links.fragments_onscreen.has(item.fragment)}
-						><div class="ellipsis">{item.text}</div></a
+						class={[
+							'menuitem',
+							{
+								selected: item.fragment === hash,
+								highlighted: docs_links.fragments_onscreen.has(item.fragment),
+							},
+						]}
+						href="#{item.fragment}"><div class="ellipsis">{item.text}</div></a
 					>
 				</li>
 			{/each}

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

@@ -1 +1 @@
-{"version":3,"file":"DocsPageLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsPageLinks.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA6CH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DocsPageLinks.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsPageLinks.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAmDH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/DocsPrimaryNav.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import {is_iframed} from '@fuzdev/fuz_util/dom.js';
+	import {is_iframed} from '@fuzdev/fuz_util/dom.ts';
 	import type {Snippet} from 'svelte';
 	import {scrollY} from 'svelte/reactivity/window';
 	import type {SvelteHTMLElements} from 'svelte/elements';
@@ -20,7 +20,7 @@
 </script>
 
 {#if enabled}
-	<div {...rest} class="docs-primary-nav {rest.class}" class:scrolled>
+	<div {...rest} class={['docs-primary-nav', rest.class, {scrolled}]}>
 		<div class="background" aria-hidden="true"></div>
 		<div class="content">
 			<nav aria-label="Primary nav">

package/dist/DocsSearch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {icon_close} from './icons.js';
+	import {icon_close} from './icons.ts';
 	import Svg from './Svg.svelte';
 
 	let {

package/dist/DocsSecondaryNav.svelte

@@ -2,7 +2,7 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import DocsMenu from './DocsMenu.svelte';
-	import {Tome} from './tome.js';
+	import {Tome} from './tome.ts';
 
 	const {
 		tomes,
@@ -16,7 +16,7 @@
 	const expand_width = $derived(!sidebar);
 </script>
 
-<aside {...rest} class="docs-secondary-nav unstyled {rest.class}" class:sidebar>
+<aside {...rest} class={['docs-secondary-nav unstyled', rest.class, {sidebar}]}>
 	<nav aria-label="Secondary nav">
 		<DocsMenu {tomes} {expand_width} />
 	</nav>

package/dist/DocsSecondaryNav.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
-import { Tome } from './tome.js';
+import { Tome } from './tome.ts';
 type $$ComponentProps = SvelteHTMLElements['aside'] & {
     tomes: Array<Tome>;
     sidebar?: boolean;

package/dist/DocsTertiaryNav.svelte

@@ -3,9 +3,9 @@
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import DocsPageLinks from './DocsPageLinks.svelte';
-	import {tome_to_pathname, Tome} from './tome.js';
-	import {docs_links_context} from './docs_helpers.svelte.js';
-	import {library_context} from './library.svelte.js';
+	import {tome_to_pathname, Tome} from './tome.ts';
+	import {docs_links_context} from './docs_helpers.svelte.ts';
+	import {library_context} from './library.svelte.ts';
 	import TomeLink from './TomeLink.svelte';
 	import ModuleLink from './ModuleLink.svelte';
 	import DeclarationLink from './DeclarationLink.svelte';

package/dist/DocsTertiaryNav.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
-import { Tome } from './tome.js';
+import { Tome } from './tome.ts';
 type $$ComponentProps = SvelteHTMLElements['aside'] & {
     tomes: Array<Tome>;
     tomes_by_slug: Map<string, Tome>;

package/dist/EcosystemLinks.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {FUZ_DEV_URL} from './constants.js';
+	import {FUZ_DEV_URL} from './constants.ts';
 
 	const {
 		selected,
@@ -14,7 +14,7 @@
 <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>
+		<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>

package/dist/GithubLink.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import {ensure_start, strip_start} from '@fuzdev/fuz_util/string.js';
+	import {ensure_start, strip_start} from '@fuzdev/fuz_util/string.ts';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 	import {DEV} from 'esm-env';
 
 	import Svg from './Svg.svelte';
-	import {logo_github} from './logos.js';
+	import {logo_github} from './logos.ts';
 
 	const {
 		path,

package/dist/HueInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type {Hue} from '@fuzdev/fuz_util/colors.js';
+	import type {Hue} from '@fuzdev/fuz_util/colors.ts';
 	import type {Snippet} from 'svelte';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 

package/dist/HueInput.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Hue } from '@fuzdev/fuz_util/colors.js';
+import type { Hue } from '@fuzdev/fuz_util/colors.ts';
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = SvelteHTMLElements['div'] & {

package/dist/LibraryDetail.svelte

@@ -9,16 +9,16 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 -->
 <script lang="ts">
 	import {page} from '$app/state';
-	import {format_url} from '@fuzdev/fuz_util/url.js';
-	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
+	import {format_url} from '@fuzdev/fuz_util/url.ts';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.ts';
 	import type {Snippet} from 'svelte';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {library_context, type Library} from './library.svelte.js';
+	import {library_context, type Library} from './library.svelte.ts';
 	import ImgOrSvg from './ImgOrSvg.svelte';
 	import DeclarationLink from './DeclarationLink.svelte';
 	import ModuleLink from './ModuleLink.svelte';
-	import {url_github_file} from '@fuzdev/fuz_util/package_helpers.js';
+	import {url_github_file} from '@fuzdev/fuz_util/package_helpers.ts';
 	import {isTypescript, isSvelte, isCss, isJson} from 'svelte-docinfo/source.js';
 
 	const {
@@ -106,8 +106,7 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 							<span class="title">homepage</span>
 							<div class="content">
 								<a
-									class="chip"
-									class:selected={library.homepage_url === page.url.href}
+									class={['chip', {selected: library.homepage_url === page.url.href}]}
 									href={library.homepage_url}
 								>
 									{#if library.logo_url}
@@ -168,11 +167,15 @@ with file-type coloring. Uses svelte-docinfo's file type predicates for module c
 				{#each library.modules as module (module.path)}
 					<!-- TODO improve rendering and enrich data - start with the type (not just extension - mime?) -->
 					<li
-						class="module"
-						class:ts={isTypescript(module.path)}
-						class:svelte={isSvelte(module.path)}
-						class:css={isCss(module.path)}
-						class:json={isJson(module.path)}
+						class={[
+							'module',
+							{
+								ts: isTypescript(module.path),
+								svelte: isSvelte(module.path),
+								css: isCss(module.path),
+								json: isJson(module.path),
+							},
+						]}
 					>
 						<div class="module-content">
 							<span class="font_size_xl">

package/dist/LibraryDetail.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import { type Library } from './library.svelte.js';
+import { type Library } from './library.svelte.ts';
 type $$ComponentProps = OmitStrict<SvelteHTMLElements['div'], 'children'> & {
     library: Library;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAOjE,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AAsKH;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"LibraryDetail.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/LibraryDetail.svelte"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,EAAkB,KAAK,OAAO,EAAC,MAAM,qBAAqB,CAAC;AAOjE,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,OAAO,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;IACrC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;CACvC,CAAC;AA8KH;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/LibrarySummary.svelte

@@ -2,9 +2,9 @@
 	import {page} from '$app/state';
 	import type {Snippet} from 'svelte';
 	import type {SvelteHTMLElements} from 'svelte/elements';
-	import {format_url} from '@fuzdev/fuz_util/url.js';
+	import {format_url} from '@fuzdev/fuz_util/url.ts';
 
-	import type {Library} from './library.svelte.js';
+	import type {Library} from './library.svelte.ts';
 	import ImgOrSvg from './ImgOrSvg.svelte';
 
 	const {
@@ -83,8 +83,7 @@
 			<div class="mb_lg">
 				<!-- eslint-disable svelte/no-navigation-without-resolve -->
 				<a
-					class="chip"
-					class:selected={library.homepage_url === page.url.href}
+					class={['chip', {selected: library.homepage_url === page.url.href}]}
 					href={library.homepage_url}>{format_url(library.homepage_url)}</a
 				>
 				<!-- eslint-enable svelte/no-navigation-without-resolve -->

package/dist/LibrarySummary.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import type { Library } from './library.svelte.js';
+import type { Library } from './library.svelte.ts';
 type $$ComponentProps = SvelteHTMLElements['div'] & {
     library: Library;
     repo_name?: Snippet<[repo_name: string]>;

package/dist/MdnLink.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import {ensure_start, strip_end, strip_start} from '@fuzdev/fuz_util/string.js';
+	import {ensure_start, strip_end, strip_start} from '@fuzdev/fuz_util/string.ts';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import Svg from './Svg.svelte';
-	import {logo_mdn} from './logos.js';
+	import {logo_mdn} from './logos.ts';
 
 	const {
 		path,

package/dist/ModuleLink.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type {SvelteHTMLElements} from 'svelte/elements';
-	import {ensure_start} from '@fuzdev/fuz_util/string.js';
+	import {ensure_start} from '@fuzdev/fuz_util/string.ts';
 
-	import {library_context} from './library.svelte.js';
-	import {contextmenu_attachment} from './contextmenu_state.svelte.js';
-	import {create_module_contextmenu} from './module_contextmenu.js';
+	import {library_context} from './library.svelte.ts';
+	import {contextmenu_attachment} from './contextmenu_state.svelte.ts';
+	import {create_module_contextmenu} from './module_contextmenu.ts';
 
 	const {
 		module_path,

package/dist/PendingAnimation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type {OmitStrict} from '@fuzdev/fuz_util/types.js';
+	import type {OmitStrict} from '@fuzdev/fuz_util/types.ts';
 	import type {Snippet} from 'svelte';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
@@ -21,10 +21,12 @@
 
 <span
 	{...rest}
-	class="pending-animation {rest.class} {inline
-		? 'display:inline-flex align-items:center'
-		: 'display:flex'}"
-	class:running
+	class={[
+		'pending-animation',
+		rest.class,
+		inline ? 'display:inline-flex align-items:center' : 'display:flex',
+		{running},
+	]}
 	><span {...item_attrs} style:animation-delay="0s"
 		>{#if children}{@render children(0)}{:else}•{/if}</span
 	><span {...item_attrs} style:animation-delay="0.09s"

package/dist/PendingAnimation.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { OmitStrict } from '@fuzdev/fuz_util/types.js';
+import type { OmitStrict } from '@fuzdev/fuz_util/types.ts';
 import type { Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
 type $$ComponentProps = OmitStrict<SvelteHTMLElements['span'], 'children'> & {

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

@@ -1 +1 @@
-{"version":3,"file":"PendingAnimation.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PendingAnimation.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;CACpC,CAAC;AAyBH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"PendingAnimation.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/PendingAnimation.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,UAAU,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;CACpC,CAAC;AA4BH,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/PendingButton.svelte

@@ -30,9 +30,8 @@
 	bind:this={el}
 	type="button"
 	{...rest}
-	class="pending-button {rest.class}"
+	class={['pending-button', rest.class, {pending}]}
 	disabled={disabled_prop ?? pending}
-	class:pending
 	{onclick}
 >
 	<span class="content">

package/dist/ProjectLinks.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Svg from './Svg.svelte';
-	import type {SvgData} from './svg.js';
+	import type {SvgData} from './svg.ts';
 	import {
 		// TODO when fuz.dev is ready
 		// logo_fuz,
@@ -16,7 +16,7 @@
 		logo_fuz_docs,
 		logo_svelte_docinfo,
 		logo_fuz_app,
-	} from './logos.js';
+	} from './logos.ts';
 
 	// TODO refactor
 	interface ProjectItem {

package/dist/Redirect.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import {page} from '$app/state';
-	import {strip_start} from '@fuzdev/fuz_util/string.js';
+	import {strip_start} from '@fuzdev/fuz_util/string.ts';
 	import {goto} from '$app/navigation';
 	import {onMount, type Snippet} from 'svelte';
 

package/dist/Spiders.svelte

@@ -6,12 +6,12 @@
 </script>
 
 <script lang="ts">
-	import {random_int, shuffle} from '@fuzdev/fuz_util/random.js';
-	import {create_random_alea} from '@fuzdev/fuz_util/random_alea.js';
+	import {random_int, shuffle} from '@fuzdev/fuz_util/random.ts';
+	import {create_random_alea} from '@fuzdev/fuz_util/random_alea.ts';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
 	import Svg from './Svg.svelte';
-	import {logo_fuz} from './logos.js';
+	import {logo_fuz} from './logos.ts';
 
 	const {
 		spiders = [

package/dist/StyleVariableButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type {SvelteHTMLElements} from 'svelte/elements';
-	import {default_variables} from '@fuzdev/fuz_css/variables.js';
+	import {default_variables} from '@fuzdev/fuz_css/variables.ts';
 
-	import {selected_variable_context} from './style_variable_helpers.svelte.js';
+	import {selected_variable_context} from './style_variable_helpers.svelte.ts';
 
 	const {
 		name,
@@ -31,8 +31,7 @@
 <button
 	type="button"
 	{...rest}
-	class:inline
-	class:plain
+	class={[rest.class, {inline, plain}]}
 	onclick={(e) => {
 		selected_variable.value = variable;
 		onclick?.(e);

package/dist/Svg.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import {ensure_end} from '@fuzdev/fuz_util/string.js';
+	import {ensure_end} from '@fuzdev/fuz_util/string.ts';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import type {SvgData} from './svg.js';
+	import type {SvgData} from './svg.ts';
 
 	/**
 	 * Renders an `SvgData` icon definition to inline `svg` markup, never via `@html`.
@@ -30,7 +30,7 @@
 	const {
 		data,
 		fill,
-		size = 'var(--font_size, auto)',
+		size = 'var(--font_size, 1em)',
 		width,
 		height,
 		label,
@@ -79,7 +79,7 @@
 	viewBox={data.viewBox ?? '0 0 100 100'}
 	{...rest}
 	aria-label={label ?? data.label ?? rest['aria-label']}
-	class:inline
+	class={[rest.class, {inline}]}
 	style:width={final_width}
 	style:height={final_height}
 	style:flex-shrink={shrink ? 1 : 0}

package/dist/Svg.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { SvelteHTMLElements } from 'svelte/elements';
-import type { SvgData } from './svg.js';
+import type { SvgData } from './svg.ts';
 type $$ComponentProps = SvelteHTMLElements['svg'] & {
     data: SvgData;
     /**

package/dist/ThemeInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import {swallow} from '@fuzdev/fuz_util/dom.js';
-	import type {Theme} from '@fuzdev/fuz_css/theme.js';
-	import {default_themes} from '@fuzdev/fuz_css/themes.js';
+	import {swallow} from '@fuzdev/fuz_util/dom.ts';
+	import type {Theme} from '@fuzdev/fuz_css/theme.ts';
+	import {default_themes} from '@fuzdev/fuz_css/themes.ts';
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
-	import {theme_state_context} from './theme_state.svelte.js';
+	import {theme_state_context} from './theme_state.svelte.ts';
 
 	const get_theme_state = theme_state_context.get();
 
@@ -35,11 +35,10 @@
 		<li class="row" role="none">
 			<button
 				type="button"
-				class="theme-button color_a"
+				class={['theme-button color_a', {selected}]}
 				role="menuitemradio"
 				aria-label="{theme.name} theme"
 				aria-checked={selected}
-				class:selected
 				onclick={(e) => {
 					swallow(e);
 					if (select?.(theme) !== false) {

package/dist/ThemeInput.svelte.d.ts

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