deployment

.well-known/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanatkn/fuz",
-  "version": "0.91.2",
+  "version": "0.91.3",
   "description": "Svelte UI library and CSS design system",
   "icon": "🧶",
   "public": true,
@@ -155,6 +155,11 @@
       "default": "./dist/Copy_To_Clipboard.svelte",
       "types": "./dist/Copy_To_Clipboard.svelte.d.ts"
     },
+    "./Details.svelte": {
+      "svelte": "./dist/Details.svelte",
+      "default": "./dist/Details.svelte",
+      "types": "./dist/Details.svelte.d.ts"
+    },
     "./Devmode_Controls.svelte": {
       "svelte": "./dist/Devmode_Controls.svelte",
       "default": "./dist/Devmode_Controls.svelte",

.well-known/src.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanatkn/fuz",
-  "version": "0.91.2",
+  "version": "0.91.3",
   "modules": {
     "./Alert.svelte": {
       "path": "Alert.svelte",
@@ -157,6 +157,10 @@
       "path": "Copy_To_Clipboard.svelte",
       "declarations": []
     },
+    "./Details.svelte": {
+      "path": "Details.svelte",
+      "declarations": []
+    },
     "./Devmode_Controls.svelte": {
       "path": "Devmode_Controls.svelte",
       "declarations": []

.well-known/src/lib/Details.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let lazy = true;
+	export let open: boolean | null | undefined = undefined;
+</script>
+
+<!-- TODO svelte5 splat attrs -->
+<details bind:open>
+	{#if lazy}
+		<slot name="summary" />
+		{#if open}
+			<slot />
+		{/if}
+	{:else}
+		<slot name="summary" />
+		<slot />
+	{/if}
+</details>

.well-known/src/lib/semantic_classes.css

@@ -1,3 +1,5 @@
+/* @ryanatkn/fuz/semantic_classes.css */
+
 /*
 The name `.prose` was copied from Tailwind's @tailwindcss/typography -
 https://tailwindcss.com/docs/typography-plugin

.well-known/src/lib/utility_classes.css

@@ -1,3 +1,5 @@
+/* @ryanatkn/fuz/utility_classes.css */
+
 /* TODO @multiple docs in library */
 
 /*

.well-known/src/lib/variable_classes.css

@@ -1,3 +1,5 @@
+/* @ryanatkn/fuz/variable_classes.css */
+
 /* TODO @multiple docs in library */
 
 /*

.well-known/src/routes/library/classes/+page.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import Code from '@ryanatkn/fuz_code/Code.svelte';
+
+	import Tome_Detail from '$lib/Tome_Detail.svelte';
+	import {get_tome} from '$lib/tome.js';
+	import utility_classes_text from '$lib/utility_classes.css?raw';
+	import variable_classes_text from '$lib/variable_classes.css?raw';
+	import semantic_classes_text from '$lib/semantic_classes.css?raw';
+	import Details from '$lib/Details.svelte';
+
+	const LIBRARY_ITEM_NAME = 'classes';
+
+	const tome = get_tome(LIBRARY_ITEM_NAME);
+</script>
+
+<Tome_Detail {tome}>
+	<div class="prose">
+		<section>
+			Fuz provides an arbitrary subset of utility classes for CSS, and defers to CSS in <a
+				href="https://svelte.dev/docs/svelte-components#style">Svelte's <code>{'<'}style></code></a
+			> for complex and uncommon patterns. This may change depending on build tool sophistication, like
+			a compiler or Vite plugin to remove unused styles.
+		</section>
+		<section>
+			<h3>Raw CSS</h3>
+			<Details>
+				<summary slot="summary">utility classes</summary>
+				<Code content={utility_classes_text} lang="css" />
+			</Details>
+			<Details>
+				<summary slot="summary">variable classes</summary>
+				<Code content={variable_classes_text} lang="css" />
+			</Details>
+			<Details>
+				<summary slot="summary">semantic classes</summary>
+				<Code content={semantic_classes_text} lang="css" />
+			</Details>
+		</section>
+	</div>
+</Tome_Detail>

.well-known/src/routes/library/tomes.ts

@@ -3,6 +3,7 @@ import colors from '$routes/library/colors/+page.svelte';
 import buttons from '$routes/library/buttons/+page.svelte';
 import forms from '$routes/library/forms/+page.svelte';
 import elements from '$routes/library/elements/+page.svelte';
+import classes from '$routes/library/classes/+page.svelte';
 import typography from '$routes/library/typography/+page.svelte';
 import themes from '$routes/library/themes/+page.svelte';
 import variables from '$routes/library/variables/+page.svelte';
@@ -82,7 +83,15 @@ export const tomes: Tome[] = [
 		pathname: '',
 		category: 'styles',
 		component: elements,
-		related: ['buttons', 'forms', 'prose', 'typography', 'borders', 'layout'],
+		related: ['buttons', 'forms', 'classes', 'prose', 'typography', 'borders', 'layout'],
+	},
+	{
+		name: 'classes',
+		slug: 'classes',
+		pathname: '',
+		category: 'styles',
+		component: classes,
+		related: ['elements'],
 	},
 	{
 		name: 'prose',

.well-known/src/routes/package.ts

@@ -5,7 +5,7 @@ import type {Src_Json} from '@ryanatkn/gro/src_json.js';
 
 export const package_json = {
 	name: '@ryanatkn/fuz',
-	version: '0.91.2',
+	version: '0.91.3',
 	description: 'Svelte UI library and CSS design system',
 	icon: '🧶',
 	public: true,
@@ -115,6 +115,11 @@ export const package_json = {
 			default: './dist/Copy_To_Clipboard.svelte',
 			types: './dist/Copy_To_Clipboard.svelte.d.ts',
 		},
+		'./Details.svelte': {
+			svelte: './dist/Details.svelte',
+			default: './dist/Details.svelte',
+			types: './dist/Details.svelte.d.ts',
+		},
 		'./Devmode_Controls.svelte': {
 			svelte: './dist/Devmode_Controls.svelte',
 			default: './dist/Devmode_Controls.svelte',
@@ -270,7 +275,7 @@ export const package_json = {
 
 export const src_json = {
 	name: '@ryanatkn/fuz',
-	version: '0.91.2',
+	version: '0.91.3',
 	modules: {
 		'./Alert.svelte': {path: 'Alert.svelte', declarations: []},
 		'./alert.js': {
@@ -322,6 +327,7 @@ export const src_json = {
 			],
 		},
 		'./Copy_To_Clipboard.svelte': {path: 'Copy_To_Clipboard.svelte', declarations: []},
+		'./Details.svelte': {path: 'Details.svelte', declarations: []},
 		'./Devmode_Controls.svelte': {path: 'Devmode_Controls.svelte', declarations: []},
 		'./devmode.js': {
 			path: 'devmode.ts',