bref-ui 0.1.0 → 0.1.3

package/dist/base/button/button.svelte

@@ -163,13 +163,13 @@
 
 	.foreground {
 		--internal-current-color: var(--color-foreground);
-		--internal-current-color-soft: var(--color-foreground-soft);
+		--internal-current-color-soft: var(--color-background-saturated);
 		--internal-current-contrast: var(--color-background);
 	}
 
 	.background {
 		--internal-current-color: var(--color-background);
-		--internal-current-color-soft: var(--color-background-soft);
+		--internal-current-color-soft: var(--color-foreground-saturated);
 		--internal-current-contrast: var(--color-foreground);
 	}
 
@@ -230,4 +230,21 @@
 			var(--color-background)
 		);
 	}
+
+	/* Background color ghost variant needs inverted hover colors */
+	.background.ghost:not(:disabled):hover {
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground) var(--internal-btn-ghost-hover-opacity),
+			var(--color-background)
+		);
+	}
+
+	.background.ghost:not(:disabled):active {
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground) var(--internal-btn-ghost-active-opacity),
+			var(--color-background)
+		);
+	}
 </style>

package/dist/base/button/icon-button.svelte

@@ -130,13 +130,13 @@
 
 	.foreground {
 		--internal-current-color: var(--color-foreground);
-		--internal-current-color-soft: var(--color-foreground-soft);
+		--internal-current-color-soft: var(--color-background-saturated);
 		--internal-current-contrast: var(--color-background);
 	}
 
 	.background {
 		--internal-current-color: var(--color-background);
-		--internal-current-color-soft: var(--color-background-soft);
+		--internal-current-color-soft: var(--color-foreground-saturated);
 		--internal-current-contrast: var(--color-foreground);
 	}
 
@@ -205,4 +205,21 @@
 			var(--color-background)
 		);
 	}
+
+	/* Background color ghost variant needs inverted hover colors */
+	.background.ghost:not(:disabled):hover {
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground) var(--internal-btn-ghost-hover-opacity),
+			var(--color-background)
+		);
+	}
+
+	.background.ghost:not(:disabled):active {
+		background-color: color-mix(
+			in srgb,
+			var(--color-foreground) var(--internal-btn-ghost-active-opacity),
+			var(--color-background)
+		);
+	}
 </style>

package/dist/base/loading/morphing-shapes-loading.svelte

@@ -1,16 +1,28 @@
 <script lang="ts">
-	import type { LoadingProps } from './types.js';
-
-	const { size = 'medium', color = 'primary' }: LoadingProps = $props();
+	import type { MorphingShapesLoadingProps } from './types.js';
+
+	const {
+		size = 'medium',
+		color = 'primary',
+		speed = 'normal',
+		isGradient = false,
+		pulseShadow = false
+	}: MorphingShapesLoadingProps = $props();
 </script>
 
-<div class={`${size} ${color}`} role="status" aria-label="Loading">
+<div
+	class={`holder ${size} ${speed} ${isGradient ? 'gradient' : color} ${pulseShadow ? 'pulse-shadow' : ''}`}
+	role="status"
+	aria-label="Loading"
+>
 	<div class="shape"></div>
 </div>
 
 <style>
-	div {
+	.holder {
 		--internal-shape-size: 2rem;
+		--internal-morph-duration: 4s;
+		--internal-rotate-duration: 5s;
 		width: var(--internal-shape-size);
 		height: var(--internal-shape-size);
 	}
@@ -18,61 +30,112 @@
 	.shape {
 		width: 100%;
 		height: 100%;
-		background-color: var(--internal-current-color);
+		background: var(--internal-current-color);
+		animation:
+			morph var(--internal-morph-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite,
+			rotate var(--internal-rotate-duration) cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+	}
+
+	.gradient .shape {
+		background: linear-gradient(
+			135deg,
+			var(--color-primary),
+			var(--color-secondary),
+			var(--color-success),
+			var(--color-info),
+			var(--color-warning),
+			var(--color-danger),
+			var(--color-primary)
+		);
+		background-size: 600% 600%;
 		animation:
-			morph 4s ease-in-out infinite,
-			rotate 8s linear infinite;
+			morph var(--internal-morph-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite,
+			rotate var(--internal-rotate-duration) cubic-bezier(0.22, 0.61, 0.36, 1) infinite,
+			gradient-flow 12s ease-in-out infinite;
 	}
 
-	@keyframes morph {
+	@keyframes gradient-flow {
 		0% {
-			/* Circle */
+			background-position: 0% 50%;
+		}
+		50% {
+			background-position: 100% 50%;
+		}
+		100% {
+			background-position: 0% 50%;
+		}
+	}
+
+	@keyframes morph {
+		0%,
+		100% {
 			border-radius: 50%;
 			corner-shape: round;
+			transform: scale(1);
 		}
-		14% {
-			/* Squircle */
-			border-radius: 35%;
+		8% {
+			border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
 			corner-shape: squircle;
+			transform: scale(1.02);
+		}
+		18% {
+			border-radius: 30%;
+			corner-shape: notch;
+			transform: scale(0.96);
 		}
 		28% {
-			/* Blob with bevel corners */
 			border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
-			corner-shape: bevel;
-		}
-		42% {
-			/* Scoop corners */
-			border-radius: 40%;
-			corner-shape: scoop;
-		}
-		57% {
-			/* Organic blob */
-			border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
 			corner-shape: round;
+			transform: scale(1.04);
 		}
-		71% {
-			/* Notched */
-			border-radius: 30%;
-			corner-shape: notch;
+		40% {
+			border-radius: 35%;
+			corner-shape: scoop;
+			transform: scale(0.98);
 		}
-		85% {
-			/* Another blob with squircle */
-			border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
+		52% {
+			border-radius: 70% 30% 70% 30% / 30% 52% 48% 70%;
 			corner-shape: squircle;
+			transform: scale(1.03);
 		}
-		100% {
-			/* Back to circle */
-			border-radius: 50%;
+		64% {
+			border-radius: 25% 75% 25% 75% / 75% 25% 75% 25%;
+			corner-shape: bevel;
+			transform: scale(0.95);
+		}
+		76% {
+			border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%;
 			corner-shape: round;
+			transform: scale(1.05);
+		}
+		88% {
+			border-radius: 40% 60% 50% 50% / 50% 60% 40% 50%;
+			corner-shape: squircle;
+			transform: scale(0.97);
 		}
 	}
 
 	@keyframes rotate {
-		from {
-			transform: rotate(0deg);
+		0% {
+			rotate: 0deg;
+		}
+		15% {
+			rotate: 75deg;
+		}
+		30% {
+			rotate: 110deg;
+		}
+		50% {
+			rotate: 200deg;
+		}
+		65% {
+			rotate: 280deg;
 		}
-		to {
-			transform: rotate(360deg);
+		80% {
+			rotate: 320deg;
+		}
+		100% {
+			rotate: 360deg;
 		}
 	}
 
@@ -129,4 +192,47 @@
 	.background {
 		--internal-current-color: var(--color-background);
 	}
+
+	/* Speed mappings */
+	.slow {
+		--internal-morph-duration: 6s;
+		--internal-rotate-duration: 7.5s;
+	}
+
+	.normal {
+		--internal-morph-duration: 4s;
+		--internal-rotate-duration: 5s;
+	}
+
+	.fast {
+		--internal-morph-duration: 2.4s;
+		--internal-rotate-duration: 3s;
+	}
+
+	/* Pulse shadow */
+	.pulse-shadow .shape {
+		--internal-shadow-size: calc(var(--internal-shape-size) * 0.5);
+		animation:
+			morph var(--internal-morph-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite,
+			rotate var(--internal-rotate-duration) cubic-bezier(0.22, 0.61, 0.36, 1) infinite,
+			pulse-shadow 2s ease-in-out infinite;
+	}
+
+	.pulse-shadow.gradient .shape {
+		animation:
+			morph var(--internal-morph-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite,
+			rotate var(--internal-rotate-duration) cubic-bezier(0.22, 0.61, 0.36, 1) infinite,
+			gradient-flow 12s ease-in-out infinite,
+			pulse-shadow 2s ease-in-out infinite;
+	}
+
+	@keyframes pulse-shadow {
+		0%,
+		100% {
+			box-shadow: 0 0 var(--internal-shadow-size) color-mix(in srgb, var(--color-foreground) 15%, transparent);
+		}
+		50% {
+			box-shadow: 0 0 var(--internal-shadow-size) color-mix(in srgb, var(--color-foreground) 35%, transparent);
+		}
+	}
 </style>

package/dist/base/loading/morphing-shapes-loading.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { LoadingProps } from './types.ts';
-declare const MorphingShapesLoading: import("svelte").Component<LoadingProps, {}, "">;
+import type { MorphingShapesLoadingProps } from './types.ts';
+declare const MorphingShapesLoading: import("svelte").Component<MorphingShapesLoadingProps, {}, "">;
 type MorphingShapesLoading = ReturnType<typeof MorphingShapesLoading>;
 export default MorphingShapesLoading;

package/dist/base/loading/types.d.ts

@@ -9,3 +9,8 @@ export interface TextualLoadingProps extends LoadingProps {
     typeSpeed?: Speed;
     pauseSpeed?: Speed;
 }
+export interface MorphingShapesLoadingProps extends LoadingProps {
+    speed?: Speed;
+    isGradient?: boolean;
+    pulseShadow?: boolean;
+}

package/dist/internal/layout/code-snippet.svelte

@@ -25,9 +25,9 @@
 	<IconButton
 		{onClick}
 		size="x-small"
-		color={hasCopied ? 'success' : 'primary'}
-		variant={hasCopied ? 'filled' : 'soft'}
-        filled
+		color={hasCopied ? 'success' : 'foreground'}
+		variant={hasCopied ? 'filled' : 'ghost'}
+		rounded
 		name={hasCopied ? 'check' : 'copy_all'}
 		disabled={hasCopied}
 	/>
@@ -59,7 +59,8 @@
 	code,
 	pre {
 		width: 100%;
-		flex: 1; align-self: center;
+		flex: 1;
+		align-self: center;
 		height: fit-content;
 	}
 	pre {

package/dist/internal/layout/sidebar/logo.svelte

@@ -1,9 +1,13 @@
+<script lang="ts">
+	import { asset } from '$app/paths';
+</script>
+
 <div class="logo">
 	<div class="icon">
-		<img src={'favicon.svg'} alt="Logo" />
+		<img src={asset('/favicon.svg')} alt="Logo" />
 		<span>Bref</span>
 	</div>
-	
+
 	<p>A truly Svelte-esque UI Component Library.</p>
 </div>
 

package/dist/internal/layout/sidebar/logo.svelte.d.ts

@@ -1,18 +1,5 @@
-export default Logo;
-type Logo = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Logo: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: {
@@ -24,3 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
+declare const Logo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Logo = InstanceType<typeof Logo>;
+export default Logo;

package/dist/internal/layout/sidebar/sidebar.svelte

@@ -5,7 +5,7 @@
 	import { page } from '$app/state';
 	import TreeView from '../../../base/tree-view/tree-view.svelte';
 	import type { NodeDataProps } from '../../../index.js';
-	import { goto } from '$app/navigation';
+	import navigateTo from '../../../internal/navigate.js';
 
 	const pageToNode = (page: PageProps): NodeDataProps => ({
 		id: page.href,
@@ -18,7 +18,7 @@
 		return allPages.find((p) => page.url.pathname.endsWith(p.href)) ?? PAGES[0];
 	});
 	const selectedIds = $derived(new Set([selectedPage.href]));
-	const onSelect = (href: string) => goto(href);
+	const onSelect = (href: string) => navigateTo(href);
 </script>
 
 <div class="container">

package/dist/internal/layout/types.js

@@ -7,77 +7,77 @@ export const PAGES = [
     },
     {
         title: 'Theming',
-        description: 'Customize colors and modes',
+        description: "Bref's theming system uses CSS custom properties for complete flexibility",
         href: '/theming',
         icon: 'palette'
     },
     {
         title: 'Generic Types',
-        description: 'Shared types for components',
+        description: 'Shared TypeScript types used across components for consistent styling and behavior',
         href: '/types',
         icon: 'data_object'
     },
     {
         title: 'Icon',
-        description: 'Material Symbols icons with various sizes, colors, and fill options',
+        description: 'Icons with customizable size, color, and fill. Based on Google Material Symbols',
         href: '/icon',
         icon: 'emoji_symbols'
     },
     {
         title: 'Buttons',
-        description: '2 types of buttons: Icon Button and a `Normal` Button',
+        description: 'Full-featured buttons with labels and icons, or compact icon-only buttons',
         href: '/buttons',
         icon: 'touch_app',
         children: [
             {
-                title: 'Icon Button',
-                description: 'Icon Button for buttons with only an icon',
-                href: '/icon-button',
-                icon: 'adjust'
+                title: 'Button',
+                description: 'Buttons with customizable size, color, variant, and optional icons',
+                href: '/buttons/button',
+                icon: 'buttons_alt'
             },
             {
-                title: '(Normal) Button',
-                description: 'A button with label and optional icon',
-                href: '/button',
-                icon: 'buttons_alt'
+                title: 'Icon Button',
+                description: 'Icon buttons with customizable size, color, variant, and shape',
+                href: '/buttons/icon-button',
+                icon: 'adjust'
             }
         ]
     },
     {
         title: 'Loading',
-        description: 'Loading indicators to a state that content is being loaded',
+        description: 'Multiple loading indicator styles for different visual contexts',
         href: '/loadings',
         icon: 'hourglass_empty',
         children: [
             {
                 title: 'Circular',
-                description: 'A spinning circular indicator for general loading states with customizable size and color',
-                href: '/circular-loading',
+                description: 'A classic spinning circle indicator for loading states',
+                href: '/loadings/circular',
                 icon: 'autorenew'
             },
             {
                 title: 'Pulsing Dots',
-                description: 'Animated dots that pulse in sequence, ideal for chat or messaging interfaces',
-                href: '/pulsing-dots-loading',
+                description: 'Three dots that pulse in sequence to indicate loading',
+                href: '/loadings/pulsing-dots',
                 icon: 'more_horiz'
             },
             {
                 title: 'Morphing Shapes',
-                description: 'Smooth shape transitions creating a fluid animation effect for creative loading states',
-                href: '/morphing-shapes-loading',
+                description: 'A shape that transforms through organic forms while rotating',
+                href: '/loadings/morphing-shapes',
                 icon: 'animation'
             },
             {
                 title: 'Textual',
-                description: 'Text-based loading indicator with customizable messages and animated ellipsis',
-                href: '/textual-loading',
+                description: 'Animated text with a typewriter effect that cycles through words',
+                href: '/loadings/textual',
                 icon: 'text_fields'
             }
         ]
     },
     {
-        title: 'TreeView',
-        description: 'Hierarchical tree component for displaying nested data structures with expandable nodes',
+        title: 'Tree View',
+        description: 'A hierarchical tree component for displaying nested data structures',
         href: '/tree-view',
         icon: 'account_tree'
     }

package/dist/internal/navigate.d.ts

@@ -0,0 +1,2 @@
+declare const navigateTo: (href: string) => any;
+export default navigateTo;

package/dist/internal/navigate.js

@@ -0,0 +1,4 @@
+import { goto } from "$app/navigation";
+import { resolve } from "$app/paths";
+const navigateTo = (href) => goto(resolve(href));
+export default navigateTo;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "0.1.0",
+	"version": "0.1.3",
 	"description": "A truly Svelte-esque UI component library - minimal, flexible, pure CSS, no Tailwind",
 	"license": "MIT",
 	"author": "feuerstein",