upgrade fuz_css

.changeset/lemon-houses-remain.md

@@ -0,0 +1,5 @@
+---
+'@fuzdev/fuz_ui': minor
+---
+
+upgrade fuz_css

.gitignore

@@ -1,14 +1,15 @@
 # Deps
-node_modules
+node_modules/
 
 # Output
-/.svelte-kit
-/build
-/dist
-/dist_*
-/target
-/.gro
-/.zzz
+.svelte-kit/
+build/
+dist/
+dist_*/
+target/
+.gro/
+.fuz/
+.zzz/
 
 # Env
 .env*

CLAUDE.md

@@ -2,15 +2,15 @@
 
 > friendly user zystem 🧶
 
-Fuz UI is a Svelte UI library built on the Fuz CSS framework and design system. It provides Svelte
+fuz_ui is a Svelte UI library built on the fuz_css framework and design system. It provides Svelte
 components and TypeScript helpers for building user-friendly and
 resource-efficient websites.
 
 ## Key dependencies
 
 - Svelte 5 - component framework
 - SvelteKit - application framework
-- Fuz CSS (@fuzdev/fuz_css) - CSS framework and design system foundation
+- fuz_css (@fuzdev/fuz_css) - CSS framework and design system foundation
 - fuz_util (@fuzdev/fuz_util) - utility library
 - Gro (@ryanatkn/gro) - build system and CLI
 
@@ -81,7 +81,7 @@ Helper file prefixes (by domain):
 - `module_*` - module path and detection helpers
 - `package_gen_*` - Gro-specific package generation helpers
 
-This naming is consistent across fuz_util, Fuz CSS, and Gro for a unified developer
+This naming is consistent across fuz_util, fuz_css, and Gro for a unified developer
 experience.
 
 Duplicate identifier names across modules fail fast during `gro gen` with clear
@@ -348,7 +348,7 @@ for validation and code generation.
 
 - TypeScript - strict typing throughout
 - Svelte 5 - uses new runes API
-- CSS - plain CSS with Fuz CSS framework and design system
+- CSS - plain CSS with fuz_css framework and design system
 - formatting - Prettier with tabs, 100 char width
 - Node - requires >=22.15
 - tests - located in `src/test/` (not co-located with source)
@@ -398,7 +398,7 @@ Contextmenu:
 
 ### Theming
 
-Built on Fuz CSS custom properties:
+Built on fuz_css custom properties:
 
 - `Themer` class manages theme state
 - `Themed` component provides theme context
@@ -434,7 +434,7 @@ Usage in Fuz:
 </Docs>
 ```
 
-For consumer projects (like Fuz CSS):
+For consumer projects (like fuz_css):
 
 - same setup, just import your local tomes and library
 - optional `breadcrumb_children` snippet for branding

README.md

@@ -4,11 +4,11 @@
 
 > friendly user zystem 🧶 [fuz.dev](https://ui.fuz.dev/)
 
-Fuz UI is a [Svelte](https://svelte.dev/) UI library
+fuz_ui is a [Svelte](https://svelte.dev/) UI library
 with components and helpers for making zippy websites.
 It's in early alpha and it will go through many breaking changes.
 
-Fuz UI is being made to support
+fuz_ui is being made to support
 [my other projects](https://www.ryanatkn.com/)
 that focus on end-users.
 Fuz emphasizes capability and efficiency and tries to be simple for those goals.
@@ -19,9 +19,9 @@ Feel free to take the ideas and code for your own purposes.
 
 The Svelte components and helpers:
 
-- builds on [Fuz CSS](https://github.com/fuzdev/fuz_css)
+- builds on [fuz_css](https://github.com/fuzdev/fuz_css)
 - plain CSS and minimal abstraction
-- near-zero dependencies except for Svelte, SvelteKit, Fuz CSS,
+- near-zero dependencies except for Svelte, SvelteKit, fuz_css,
   and my utility library [`@fuzdev/fuz_util`](https://github.com/fuzdev/fuz_util)
   (not all components require SvelteKit but some do import its modules, needs more consideration)
 - not a fully-featured enterprise-ready set of components,
@@ -36,7 +36,7 @@ The Svelte components and helpers:
 > thank you see [contributing.md](contributing.md), your input is appreciated.
 >
 > If you feel comfortable looking at the source code,
-> Fuz UI is ready to use in your own projects,
+> fuz_ui is ready to use in your own projects,
 > with the major caveat that there will be a lot of breaking changes ahead.
 > The code is significantly incomplete but I think it's stable enough to use
 > if you're willing to keep up with the relatively fast-moving changelog.
@@ -45,17 +45,17 @@ The Svelte components and helpers:
 npm i -D @fuzdev/fuz_ui
 ```
 
-Fuz uses my style framework [Fuz CSS](https://github.com/fuzdev/fuz_css).
+Fuz uses my style framework [fuz_css](https://github.com/fuzdev/fuz_css).
 Import modules at their full paths:
 
 ```ts
-// Fuz CSS has one main plain CSS stylesheet:
+// fuz_css has one main plain CSS stylesheet:
 import '@fuzdev/fuz_css/style.css';
 
-// and import a Fuz CSS theme:
+// and import a fuz_css theme:
 import '@fuzdev/fuz_css/theme.css'; // or bring your own
 
-// using Gro generates Fuz CSS' utility classes stylesheet by default:
+// using Gro generates fuz_css' utility classes stylesheet by default:
 import '$routes/fuz.css';
 
 // then import Fuz Svelte components:

package.json

@@ -62,8 +62,8 @@
   "devDependencies": {
     "@changesets/changelog-git": "^0.2.1",
     "@fuzdev/fuz_code": "^0.39.0",
-    "@fuzdev/fuz_css": "^0.42.1",
-    "@fuzdev/fuz_util": "^0.45.1",
+    "@fuzdev/fuz_css": "^0.44.0",
+    "@fuzdev/fuz_util": "^0.45.3",
     "@jridgewell/trace-mapping": "^0.3.31",
     "@ryanatkn/eslint-config": "^0.9.0",
     "@ryanatkn/gro": "^0.183.0",
@@ -72,6 +72,7 @@
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/node": "^24.10.1",
+    "@webref/css": "^8.2.0",
     "eslint": "^9.39.1",
     "eslint-plugin-svelte": "^3.13.1",
     "esm-env": "^1.2.2",

src/lib/ApiDeclarationList.svelte

@@ -25,7 +25,7 @@
 	{#each declarations as declaration (`${declaration.module_path}:${declaration.name}`)}
 		<TomeSection>
 			<TomeSectionHeader text={declaration.name}>
-				<div class="word_break_break_all">{declaration.name}</div>
+				<div class="word-break:break-all">{declaration.name}</div>
 			</TomeSectionHeader>
 			<article id={declaration.name}>
 				<DeclarationDetail {declaration} />

src/lib/DeclarationDetail.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <!-- Metadata -->
-<p class="row justify_content_space_between">
+<p class="row justify-content:space-between">
 	<ModuleLink module_path={declaration.module_path} />
 	{#if declaration.url_github}
 		<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->

src/lib/DocsContent.svelte

@@ -22,7 +22,7 @@
 	} = $props();
 </script>
 
-<div {...rest} class="width_upto_md {rest.class}">
+<div {...rest} class="width_atmost_md {rest.class}">
 	{#if header}
 		{@render header()}
 	{:else}

src/lib/DocsPageLinks.svelte

@@ -30,7 +30,7 @@
 </DocsList>
 
 {#snippet content()}
-	<nav aria-label="on this page" class="width_100">
+	<nav aria-label="on this page" class="width:100%">
 		<ul class="unstyled">
 			{#each docs_links.docs_links as item (item.id)}
 				<li

src/lib/DocsSearch.svelte

@@ -23,12 +23,12 @@
 	const has_search = $derived(search_query.trim().length > 0);
 </script>
 
-<label class="display_block position_relative">
+<label class="display:block position:relative">
 	<input {...rest} type="search" {placeholder} bind:value={search_query} />
 	{#if has_search}
 		<button
 			type="button"
-			class="plain icon_button position_absolute right_0 top_0"
+			class="plain icon_button position:absolute right:0 top:0"
 			onclick={() => {
 				search_query = '';
 			}}

src/lib/GithubLink.svelte

@@ -63,8 +63,8 @@
 
 <!-- TODO -next-line doesnt work? -->
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
-<a {...rest} {href} class="github_link white_space_nowrap {rest.class}" rel="noopener"
-	><Svg data={logo_github} inline size="var(--icon_size_xs)" class="mx_xs3 vertical_align_middle" />
+<a {...rest} {href} class="github_link white-space:nowrap {rest.class}" rel="noopener"
+	><Svg data={logo_github} inline size="var(--icon_size_xs)" class="mx_xs3 vertical-align:middle" />
 	{#if typeof final_children === 'string'}
 		<span class="font_family_mono">{final_children}</span>
 	{:else if final_children}

src/lib/Glyph.svelte

@@ -18,7 +18,7 @@
 
 <span
 	{...rest}
-	class="glyph display_inline_block text_align_center line_height_1 white_space_nowrap font_weight_400 {rest.class}"
+	class="glyph display:inline-block text-align:center line-height:1 white-space:nowrap font-weight:400 {rest.class}"
 	style:width={final_size}
 	style:height={final_size}
 	style:min-width={final_size}

src/lib/ImgOrSvg.svelte

@@ -44,7 +44,7 @@
 		style:width={final_width}
 		style:height={final_height}
 	>
-		<image href={src} class="width_100 height_100" />
+		<image href={src} class="width:100% height:100%" />
 	</svg>
 {:else}
 	<img

src/lib/LibraryDetail.svelte

@@ -48,7 +48,7 @@
 <div class="library_detail">
 	<!-- TODO maybe continue this snippet pattern, or maybe simplify? -->
 	<div class="info">
-		<div class="display_flex flex_1">
+		<div class="display:flex flex:1">
 			<!-- add yet another wrapper so it flows like we want -->
 			<div>
 				<header>

src/lib/LibrarySummary.svelte

@@ -65,7 +65,7 @@
 		{#if description}
 			{@render description(package_json.description, package_json.glyph)}
 		{:else}
-			<p class="text_align_center">
+			<p class="text-align:center">
 				{package_json.description}
 				{#if !package_json.motto}
 					{package_json.glyph}

src/lib/MdnLink.svelte

@@ -24,8 +24,8 @@
 
 <!-- TODO -next-line doesnt work? -->
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
-<a {...rest} {href} class="mdn_link white_space_nowrap {rest.class}" rel="noopener"
-	><Svg data={logo_mdn} inline size="var(--icon_size_xs)" class="mx_xs3 vertical_align_middle" />
+<a {...rest} {href} class="mdn_link white-space:nowrap {rest.class}" rel="noopener"
+	><Svg data={logo_mdn} inline size="var(--icon_size_xs)" class="mx_xs3 vertical-align:middle" />
 	{#if typeof final_children === 'string'}
 		<span class="font_family_mono">{final_children}</span>
 	{:else}

src/lib/Mdz.svelte

@@ -21,8 +21,7 @@
 <svelte:element
 	this={inline ? 'span' : 'div'}
 	{...rest}
-	class:white_space_pre={nowrap}
-	class:white_space_pre_wrap={!nowrap}
+	class="{rest.class} {nowrap ? 'white-space:pre' : 'white-space:pre-wrap'}"
 >
 	{#each nodes as node (node)}
 		<MdzNodeView {node} />

src/lib/PendingAnimation.svelte

@@ -21,11 +21,10 @@
 
 <span
 	{...rest}
-	class="pending_animation {rest.class}"
+	class="pending_animation {rest.class} {inline
+		? 'display:inline-flex align-items:center'
+		: 'display:flex'}"
 	class:running
-	class:display_flex={!inline}
-	class:display_inline_flex={inline}
-	class:align_items_center={inline}
 	><span {...item_attrs} style:animation-delay="0s"
 		>{#if children}{@render children(0)}{:else}•{/if}</span
 	><span {...item_attrs} style:animation-delay="0.09s"

src/lib/ProjectLinks.svelte

@@ -46,9 +46,9 @@
 	<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 	<a class="thumbnail row bg 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_upto_sm">
+		<div class="pl_lg width_atmost_sm">
 			<div class="thumbnail_name {project_item.color_class}">{project_item.name}</div>
-			<div class="thumbnail_description font_size_md text_color_3 font_weight_500">
+			<div class="thumbnail_description font_size_md text_color_3 font-weight:500">
 				{project_item.description}
 				{project_item.glyph}
 			</div>