bref-ui 2.0.1 → 2.1.0

package/src/lib/tree-view/tree-node/chevron-button.svelte

@@ -10,9 +10,6 @@
 </button>
 
 <style>
-	* {
-		transition: all 150ms;
-	}
 	button {
 		position: relative;
 		z-index: 1;
@@ -21,30 +18,33 @@
 		justify-content: center;
 		min-width: var(--tree-action-size);
 		min-height: var(--tree-action-size);
-		padding: 0.25rem 0.5rem;
+		padding: 0;
 		border: 0;
-		border-radius: 999px;
+		border-radius: 50%;
 		background: transparent;
-		color: inherit;
+		color: var(--tree-action-color, inherit);
 		font: inherit;
 		cursor: pointer;
+		transition: background-color 150ms ease;
 	}
 	span {
 		display: inline-flex;
-		font-size: 1.25em;
+		font-size: 1.125em;
+		transition: transform 150ms ease;
 	}
 	button[aria-expanded='true'] span {
 		transform: rotate(90deg);
 	}
 	button:not(:disabled):hover {
-		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+		background: color-mix(in srgb, currentColor 8%, transparent);
 	}
 	button:focus-visible {
 		outline: 2px solid var(--color-primary);
 		outline-offset: -2px;
 	}
 	@media (prefers-reduced-motion: reduce) {
-		* {
+		button,
+		span {
 			transition: none;
 		}
 	}

package/src/lib/tree-view/tree-node/content.svelte

@@ -6,25 +6,29 @@
 </script>
 
 <button {...attributes} type="button" disabled={item.disabled}>
-	{#if item.icon}<Icon {...item.icon} label={undefined} />{/if}
+	{#if item.icon}
+		<Icon
+			{...item.icon}
+			color={attributes['aria-pressed'] === true && !item.disabled ? 'primary' : undefined}
+			label={undefined}
+		/>
+	{/if}
 	<span>{item.label}</span>
 </button>
 
 <style>
-	* {
-		transition: all 150ms;
-	}
 	button {
-		display: inline-flex;
+		display: grid;
+		grid-template-columns: 1em minmax(0, 1fr);
 		align-items: center;
 		justify-content: start;
 		flex: 1;
 		gap: 0.5rem;
 		min-width: 0;
 		min-height: var(--tree-action-size);
-		padding: 0.25rem 0.5rem;
+		padding: 0.125rem 0.375rem;
 		border: 0;
-		border-radius: 999px;
+		border-radius: 0.375rem;
 		outline: none;
 		background: transparent;
 		color: inherit;
@@ -32,6 +36,10 @@
 		text-align: start;
 		cursor: pointer;
 	}
+	span {
+		grid-column: 2;
+		min-width: 0;
+	}
 	button::before {
 		position: absolute;
 		inset: 0;
@@ -46,11 +54,6 @@
 		color: var(--color-muted);
 		cursor: default;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		* {
-			transition: none;
-		}
-	}
 	@media (forced-colors: active) {
 		button:disabled {
 			color: GrayText;

package/src/lib/tree-view/tree-node/delete-button.svelte

@@ -16,17 +16,18 @@
 		justify-content: center;
 		min-width: var(--tree-action-size);
 		min-height: var(--tree-action-size);
-		padding: 0.25rem 0.5rem;
+		padding: 0;
 		border: 0;
-		border-radius: 999px;
+		border-radius: 50%;
 		background: transparent;
-		color: inherit;
+		color: var(--tree-action-color, inherit);
 		font: inherit;
+		font-size: 1.125em;
 		cursor: pointer;
-		transition: all 150ms;
+		transition: background-color 150ms ease;
 	}
 	button:not(:disabled):hover {
-		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+		background: color-mix(in srgb, currentColor 8%, transparent);
 	}
 	button:focus-visible {
 		outline: 2px solid var(--color-primary);

package/src/lib/tree-view/tree-node/tree-node.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { prefersReducedMotion } from 'svelte/motion';
 	import { fly } from 'svelte/transition';
+	import { surface } from '../../theme/surface.js';
 	import ChevronButton from './chevron-button.svelte';
 	import DeleteButton from './delete-button.svelte';
 	import Content from './content.svelte';
@@ -11,6 +12,7 @@
 		item,
 		selection = $bindable(),
 		defaultExpanded = false,
+		glass = false,
 		onDelete,
 		indent = 0
 	}: TreeNodeProps = $props();
@@ -32,10 +34,12 @@
 </script>
 
 <div
-	in:fly|global={{ y: -4, duration: prefersReducedMotion.current ? 0 : 150 }}
+	class={selected ? surface({ variant: 'soft', color: 'primary', glass }) : undefined}
+	in:fly|global={{ x: -8, duration: prefersReducedMotion.current ? 0 : 200 }}
+	out:fly|global={{ x: -8, duration: prefersReducedMotion.current ? 0 : 150 }}
 	data-selected={selected}
 	data-disabled={item.disabled}
-	style:padding-left={`calc(0.25rem + ${indent * 1.25}rem)`}
+	style:padding-left={`calc(0.25rem + ${indent} * var(--tree-action-size))`}
 >
 	{#if item.children?.length}
 		<ChevronButton
@@ -56,18 +60,20 @@
 		/>
 	{/if}
 </div>
-{#if item.children?.length}
-	<div role="group" id={childrenId} hidden={!expanded}>
-		{#each item.children as child (child.id)}
-			<RecursiveNode indent={indent + 1} item={child} bind:selection {defaultExpanded} {onDelete} />
-		{/each}
-	</div>
+{#if item.children?.length && expanded}
+	{#each item.children as child (child.id)}
+		<RecursiveNode
+			indent={indent + 1}
+			item={child}
+			bind:selection
+			{defaultExpanded}
+			{onDelete}
+			{glass}
+		/>
+	{/each}
 {/if}
 
 <style>
-	* {
-		transition: all 150ms;
-	}
 	div[data-selected] {
 		box-sizing: border-box;
 		position: relative;
@@ -79,33 +85,26 @@
 		border: 1px solid transparent;
 		border-radius: 999px;
 		overflow-wrap: anywhere;
+		transition: all 150ms ease;
 	}
 	[data-spacer] {
 		flex: 0 0 var(--tree-action-size);
 	}
-	div[role='group'] {
-		display: contents;
-	}
-	div[hidden] {
-		display: none;
-	}
 	div[data-selected='true'] {
-		border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
-		background: color-mix(in srgb, var(--color-primary) 16%, transparent);
-		color: var(--color-primary);
+		--tree-action-color: var(--color-primary);
 	}
 	div[data-selected='false']:not([data-disabled='true']):hover {
-		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+		background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
 	}
 	@media (prefers-reduced-motion: reduce) {
-		* {
+		div[data-selected] {
 			transition: none;
 		}
 	}
 	@media (forced-colors: active) {
 		div[data-selected='true'] {
-			border-color: Highlight;
-			color: Highlight;
+			outline: 1px solid Highlight;
+			outline-offset: -1px;
 		}
 	}
 </style>

package/src/lib/tree-view/tree-view-section.svelte

@@ -18,13 +18,10 @@
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
-		gap: 0.25rem;
-		padding: 0.75rem 0.5rem 0.25rem;
+		gap: 0.375rem;
+		padding: 1rem 0.75rem 0.75rem;
 		color: var(--color-muted);
-		font-size: 0.8em;
-		font-weight: 600;
-		letter-spacing: 0.06em;
-		text-transform: uppercase;
+		line-height: 1.4;
 		overflow-wrap: anywhere;
 	}
 	div {
@@ -32,11 +29,14 @@
 		align-items: center;
 		gap: 0.5rem;
 		min-width: 0;
+		color: var(--color-foreground);
+		font-size: 0.875em;
+		font-weight: 500;
+		letter-spacing: 0.06em;
+		text-transform: uppercase;
 	}
 	p {
 		margin: 0;
-		font-weight: 400;
-		letter-spacing: normal;
-		text-transform: none;
+		font-size: 0.75em;
 	}
 </style>

package/src/lib/tree-view/tree-view.svelte

@@ -8,6 +8,7 @@
 		sections = [],
 		label = 'Tree view',
 		size = 'medium',
+		glass = false,
 		selection = $bindable(),
 		defaultExpanded = false,
 		onDelete,
@@ -21,7 +22,7 @@
 			{#if node}
 				{@render node(item)}
 			{:else}
-				<TreeNode {item} bind:selection {defaultExpanded} {onDelete} />
+				<TreeNode {item} bind:selection {defaultExpanded} {onDelete} {glass} />
 			{/if}
 		{/each}
 	</div>
@@ -38,28 +39,35 @@
 </div>
 
 <style>
-	div {
-		--tree-height: 2.75rem;
-		--tree-action-size: 2.25rem;
+	div[role='group'] {
+		--tree-height: 2rem;
+		--tree-action-size: 1.5rem;
 		display: grid;
 		gap: 0.375rem;
 		min-width: 0;
 		color: var(--color-foreground);
 		font: inherit;
+		line-height: 1.25;
 	}
 	div[data-size='small'] {
-		--tree-height: 2.5rem;
-		--tree-action-size: 2rem;
+		--tree-height: 1.75rem;
 		font-size: 0.875rem;
 	}
 	div[data-size='large'] {
-		--tree-height: 3.25rem;
-		--tree-action-size: 2.5rem;
+		--tree-height: 2.5rem;
+		--tree-action-size: 2rem;
 		font-size: 1.125rem;
 	}
 	div[data-nodes] {
 		display: flex;
 		flex-direction: column;
-		gap: 0.25rem;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+	@media (pointer: coarse) {
+		div[role='group'] {
+			--tree-height: 2.75rem;
+			--tree-action-size: 2.75rem;
+		}
 	}
 </style>

package/src/lib/tree-view/types.ts

@@ -20,6 +20,7 @@ export interface TreeViewProps {
 	sections?: TreeSectionProps[];
 	label?: string;
 	size?: BaseSize;
+	glass?: boolean;
 	selection?: string | string[];
 	defaultExpanded?: boolean;
 	onDelete?: (id: string) => void;
@@ -28,7 +29,7 @@ export interface TreeViewProps {
 
 export interface TreeNodeProps extends Pick<
 	TreeViewProps,
-	'selection' | 'defaultExpanded' | 'onDelete'
+	'selection' | 'defaultExpanded' | 'onDelete' | 'glass'
 > {
 	item: TreeItemProps;
 	indent?: number;