bref-ui 0.1.7 → 0.1.9

package/README.md

@@ -1,12 +1,12 @@
-# Bref: a truly Svelte-esque UI Component Library
+# Bref: a Svelte UI Component Library
 
 **[Live Demo](https://feuersteiner.github.io/bref/)**
 
-Bref is a Svelte UI component library designed to be minimal, flexible, and easy to use.
-Think of it as, what if `Shadcn/ui` was built specifically for Svelte, used only CSS styling and no Tailwind CSS, fully embracing Svelte's unique capabilities and idioms.
+Bref is a Svelte UI component library designed to be minimal, flexible, and easy to use. It uses Svelte's built-in scoped CSS for styling, no external CSS frameworks required.
 
 ## What We Promise
 
+- **Pure CSS with scoped styles**: Uses Svelte's native styling system for clean, maintainable components
 - **Base UI components with escape hatches**: Access raw CSS properties when you need full control
 - **Clear naming conventions**: Component names resemble HTML as much as possible to avoid confusion
 - **Section-based components**: For more complex UI needs like navbars, modals, and cards
@@ -32,11 +32,7 @@ npm install bref-ui
 
 ## Why Bref?
 
-There are excellent Svelte component libraries out there. [Flowbite Svelte](https://github.com/themesberg/flowbite-svelte) and [shadcn-svelte](https://github.com/huntabyte/shadcn-svelte) are doing great work, and you should check them out.
-
-Bref takes a different approach:
-
-- **Pure CSS**: Uses Svelte's built-in scoped styling instead of Tailwind CSS. If you chose Svelte for its elegant styling solution, Bref keeps that promise.
+- **Scoped CSS**: Uses Svelte's built-in scoped styling, each component's styles are encapsulated and won't leak or conflict.
 - **Minimal**: Only essential components, nothing extra.
 - **Flexible**: Use as an npm package or copy components directly into your project with our CLI tool (WIP).
 - **Batteries included theming**: Just provide your base colors and we handle the rest (see below).

package/dist/base/tree-view/tree-node.svelte

@@ -2,7 +2,16 @@
 	import type { TreeNodeProps } from './types.js';
 	import Icon from '../icon/icon.svelte';
 	import TreeNode from './tree-node.svelte';
-	const { node, level, size, onSelect, selectedIds, filledIcon, wide }: TreeNodeProps = $props();
+	const {
+		node,
+		level,
+		size,
+		onSelect,
+		selectedIds,
+		filledIcon,
+		wide,
+		expandOnSelect
+	}: TreeNodeProps = $props();
 
 	let expanded: boolean = $state(false);
 	let selected: boolean = $derived(selectedIds?.has(node.id) ?? false);
@@ -14,7 +23,12 @@
 		if (hasChildren) expanded = !expanded;
 	};
 
-	const handleSelect = () => onSelect(node.id);
+	const handleSelect = () => {
+		onSelect(node.id);
+		if (expandOnSelect && hasChildren) expanded = true;
+	};
+
+	const nextLevel = $derived(level + 1);
 </script>
 
 <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -48,7 +62,16 @@
 
 {#if expanded && hasChildren}
 	{#each node.children as child (child.id)}
-		<TreeNode node={child} level={level + 1} {size} {onSelect} {selectedIds} {filledIcon} {wide} />
+		<TreeNode
+			node={child}
+			level={nextLevel}
+			{size}
+			{onSelect}
+			{selectedIds}
+			{filledIcon}
+			{wide}
+			{expandOnSelect}
+		/>
 	{/each}
 {/if}
 

package/dist/base/tree-view/tree-view.svelte

@@ -2,12 +2,29 @@
 	import type { TreeViewProps } from './types.js';
 	import TreeNode from './tree-node.svelte';
 
-	let { data, size = 'medium', onSelect, selectedIds, wide, filledIcon }: TreeViewProps = $props();
+	let {
+		data,
+		size = 'medium',
+		onSelect,
+		selectedIds,
+		wide,
+		filledIcon,
+		expandOnSelect
+	}: TreeViewProps = $props();
 </script>
 
 <div role="tree" class={size} class:wide>
 	{#each data as node (node.id)}
-		<TreeNode {node} level={0} {size} {onSelect} {selectedIds} {wide} {filledIcon} />
+		<TreeNode
+			{node}
+			level={0}
+			{size}
+			{onSelect}
+			{selectedIds}
+			{wide}
+			{filledIcon}
+			{expandOnSelect}
+		/>
 	{/each}
 </div>
 

package/dist/base/tree-view/types.d.ts

@@ -12,6 +12,7 @@ export interface BaseTreeProps {
     size?: Size;
     filledIcon?: IconProps['filled'];
     wide?: boolean;
+    expandOnSelect?: boolean;
 }
 export interface TreeViewProps extends BaseTreeProps {
     data: NodeDataProps[];

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

@@ -24,7 +24,14 @@
 <div class="container">
 	<Logo />
 	<div class="content">
-		<TreeView wide size="small" {selectedIds} {onSelect} data={PAGES.map(pageToNode)} />
+		<TreeView
+			wide
+			size="small"
+			{selectedIds}
+			{onSelect}
+			data={PAGES.map(pageToNode)}
+			expandOnSelect
+		/>
 	</div>
 	<Footer />
 </div>

package/dist/internal/layout/types.js

@@ -60,12 +60,6 @@ export const PAGES = [
                 description: 'Multi-line text area input fields with labels and placeholders',
                 href: '/text-inputs/area-text-input',
                 icon: 'notes'
-            },
-            {
-                title: 'Multi Author',
-                description: 'Input field for adding multiple authors for highlighting and collaboration',
-                href: '/text-inputs/multi-author',
-                icon: 'group'
             }
         ]
     },

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "bref-ui",
-	"version": "0.1.7",
-	"description": "A truly Svelte-esque UI component library - minimal, flexible, pure CSS, no Tailwind",
+	"version": "0.1.9",
+	"description": "A Svelte UI component library using scoped CSS - minimal and flexible",
 	"license": "MIT",
 	"author": "feuerstein",
 	"repository": {