bref-ui 2.0.0 → 2.1.0

package/src/lib/theme/surfaces.svelte

@@ -7,9 +7,12 @@
 		--surface-color: var(--color-foreground, black);
 		--surface-base: var(--color-background, white);
 		--surface-foreground: var(--color-foreground, black);
-		--surface-strength: 0%;
+		--surface-tint: var(--surface-color);
+		--surface-soft-strength: 24%;
+		--surface-neutral-strength: 2%;
+		--surface-strength: var(--surface-neutral-strength);
 		--surface-hover: 0%;
-		--surface-fill: transparent;
+		--surface-fill: color-mix(in srgb, var(--surface-tint) var(--surface-strength), transparent);
 		--surface-border: transparent;
 		--surface-content: var(--surface-color);
 		--surface-neutral-content: color-mix(
@@ -19,16 +22,11 @@
 		);
 		--surface-highlight: 0 0 0 transparent;
 		--surface-shadow: 0 0 0 transparent;
-		--surface-glow: 0 0 0 transparent;
-		--surface-glow-size: 0;
-		--surface-blur: none;
 		box-sizing: border-box;
 		border: 1px solid var(--surface-border);
 		background: var(--surface-fill);
 		color: var(--surface-content);
-		box-shadow: var(--surface-highlight), var(--surface-shadow), var(--surface-glow);
-		-webkit-backdrop-filter: var(--surface-blur);
-		backdrop-filter: var(--surface-blur);
+		box-shadow: var(--surface-highlight), var(--surface-shadow);
 		transition:
 			background-color 150ms ease,
 			border-color 150ms ease,
@@ -49,6 +47,8 @@
 	}
 	:global(.surface-background) {
 		--surface-color: var(--color-background, white);
+		--surface-tint: var(--surface-foreground);
+		--surface-soft-strength: 5%;
 		--surface-content: inherit;
 		--surface-neutral-content: inherit;
 	}
@@ -67,26 +67,14 @@
 	:global(.surface-error) {
 		--surface-color: var(--color-error, red);
 	}
-	:global(.surface-soft),
-	:global(.surface-filled) {
-		--surface-fill: color-mix(
-			in srgb,
-			var(--surface-color) var(--surface-strength),
-			var(--surface-base)
-		);
-		--surface-highlight: inset 0 1px 0
-			color-mix(in srgb, var(--surface-foreground) 16%, transparent);
-	}
 	:global(.surface-soft) {
-		--surface-strength: 16%;
+		--surface-strength: var(--surface-soft-strength);
 		--surface-fill: color-mix(
 			in srgb,
-			color-mix(in srgb, var(--surface-color) var(--surface-strength), var(--surface-base)) 85%,
-			transparent
+			var(--surface-tint) var(--surface-strength),
+			var(--surface-base)
 		);
-		--surface-border: color-mix(in srgb, var(--surface-color) 30%, transparent);
 		--surface-content: color-mix(in srgb, var(--surface-color) 80%, var(--surface-foreground));
-		--surface-blur: blur(0.5rem) saturate(120%);
 	}
 	:global(.surface-filled) {
 		--surface-strength: 100%;
@@ -95,45 +83,35 @@
 			var(--surface-color) var(--surface-strength),
 			var(--surface-foreground)
 		);
-		--surface-border: color-mix(in srgb, var(--surface-color) 68%, var(--surface-foreground));
 		--surface-content: var(--surface-base);
-		--surface-highlight: inset 0 1px 0
-			color-mix(in srgb, var(--surface-foreground) 28%, transparent);
+	}
+	:global(.surface-background.surface-filled) {
+		--surface-fill: color-mix(
+			in srgb,
+			var(--surface-base) var(--surface-strength),
+			var(--surface-foreground)
+		);
 	}
 	:global(.surface-background:is(.surface-soft, .surface-filled)) {
 		--surface-content: var(--surface-foreground);
 	}
 	:global(.surface-shadow-small) {
-		--surface-shadow: 0 2px 6px color-mix(in srgb, var(--surface-foreground) 8%, transparent);
+		--surface-shadow: 0 2px 6px color-mix(in srgb, black 8%, transparent);
 	}
 	:global(.surface-shadow-medium) {
-		--surface-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--surface-foreground) 12%, transparent);
+		--surface-shadow: 0 0.5rem 1.5rem color-mix(in srgb, black 12%, transparent);
 	}
 	:global(.surface-shadow-large) {
-		--surface-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--surface-foreground) 20%, transparent);
+		--surface-shadow: 0 1.5rem 4rem color-mix(in srgb, black 20%, transparent);
 	}
 	:global(.surface-hover-small) {
 		--surface-hover: 2%;
-		--surface-glow-size: 0.5rem;
 	}
 	:global(.surface-hover-medium) {
 		--surface-hover: 4%;
-		--surface-glow-size: 1rem;
 	}
 	:global(.surface-hover-large) {
 		--surface-hover: 8%;
-		--surface-glow-size: 1.5rem;
-	}
-	:global(
-		.surface:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
-				:disabled,
-				[aria-disabled='true'],
-				[data-surface-disabled='true']
-			):is(:hover, :focus-visible, [data-surface-pressed='true'])
-	) {
-		--surface-glow: 0 0 var(--surface-glow-size)
-			color-mix(in srgb, var(--surface-color) 10%, transparent);
-		--surface-border: color-mix(in srgb, var(--surface-color) 40%, transparent);
 	}
 	:global(
 		.surface-soft:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
@@ -142,7 +120,7 @@
 				[data-surface-disabled='true']
 			):is(:hover, :focus-visible, [data-surface-pressed='true'])
 	) {
-		--surface-strength: calc(16% + var(--surface-hover));
+		--surface-strength: calc(var(--surface-soft-strength) + var(--surface-hover));
 	}
 	:global(
 		.surface-filled:is(.surface-hover-small, .surface-hover-medium, .surface-hover-large):not(
@@ -160,7 +138,7 @@
 				[data-surface-disabled='true']
 			):is(:hover, :focus-visible, [data-surface-pressed='true'])
 	) {
-		--surface-fill: color-mix(in srgb, var(--surface-color) var(--surface-hover), transparent);
+		--surface-strength: calc(var(--surface-neutral-strength) + var(--surface-hover));
 		--surface-content: var(--surface-neutral-content);
 	}
 	:global(

package/src/lib/theme/theme.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Colors from './colors.svelte';
 	import Surfaces from './surfaces.svelte';
+	import Glass from './glass.svelte';
 	import Fonts from './fonts.svelte';
 	import Styles from './styles.svelte';
 	import type { ThemeProps } from './types.js';
@@ -10,6 +11,7 @@
 
 <Colors {palette} />
 <Surfaces />
+<Glass />
 <Fonts />
 <Styles />
 

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;