bref-ui 2.0.1 → 2.1.0

package/dist/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/dist/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/dist/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/dist/tree-view/types.d.ts

@@ -17,12 +17,13 @@ export interface TreeViewProps {
     sections?: TreeSectionProps[];
     label?: string;
     size?: BaseSize;
+    glass?: boolean;
     selection?: string | string[];
     defaultExpanded?: boolean;
     onDelete?: (id: string) => void;
     node?: Snippet<[TreeItemProps]>;
 }
-export interface TreeNodeProps extends Pick<TreeViewProps, 'selection' | 'defaultExpanded' | 'onDelete'> {
+export interface TreeNodeProps extends Pick<TreeViewProps, 'selection' | 'defaultExpanded' | 'onDelete' | 'glass'> {
     item: TreeItemProps;
     indent?: number;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bref-ui",
-	"version": "2.0.1",
+	"version": "2.1.0",
 	"description": "A Svelte-first, human-first, agent-first UI library for building beautiful sites and apps with components you can make your own.",
 	"license": "MIT",
 	"repository": {

package/readme.md

@@ -86,7 +86,9 @@ Button use the same paint recipe; apply it to native HTML with the typed helper:
 
 All options are optional: variant defaults to neutral and color to foreground;
 shadow and hover accept small, medium or large. Shadow also accepts true for medium
-and false for none. SurfaceProps extends SurfaceBaseProps with component props.
+and false for none. Set `glass: true` for translucent paint and backdrop blur, or use
+`<Surface glass>` and `<Button glass>`; glass defaults to false.
+SurfaceProps extends SurfaceBaseProps with component props.
 Supply padding, radius and layout
 in element styles. The helper adds classes only; Theme loads their CSS. SurfaceBaseProps
 is available from `bref-ui/types`. Copied components include the helper in

package/src/lib/button/button.svelte

@@ -3,12 +3,13 @@
 	import Icon from '../icon/icon.svelte';
 	import { surface } from '../theme/surface.js';
 	import type { ButtonProps } from './types.js';
-	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	let {
 		color = 'foreground',
 		size = 'medium',
 		variant = 'neutral',
+		glass = false,
 		label,
 		icon,
 		trailingIcon,
@@ -22,9 +23,8 @@
 	}: ButtonProps = $props();
 
 	const isIcon = $derived(label === undefined);
-	const isLink = $derived(href !== undefined);
 	const common = $derived({
-		class: ['button', surface({ variant, color, shadow: 'small', hover: 'medium' }), className],
+		class: ['button', surface({ variant, color, glass, hover: 'medium' }), className],
 		'aria-label': attributes['aria-label'] ?? (isIcon ? (icon?.label ?? icon?.name) : undefined),
 		'data-color': color,
 		'data-size': size,
@@ -33,9 +33,24 @@
 		'data-wide': wide && !isIcon ? '' : undefined,
 		'data-rounded': rounded && isIcon ? '' : undefined
 	});
+	const native = $derived(
+		href !== undefined
+			? {
+					href: disabled ? undefined : href,
+					'aria-disabled': disabled ? true : attributes['aria-disabled'],
+					tabindex: disabled ? -1 : attributes.tabindex
+				}
+			: { type: (attributes as HTMLButtonAttributes).type ?? 'button', disabled }
+	);
 </script>
 
-{#snippet content()}
+<svelte:element
+	this={href !== undefined ? 'a' : 'button'}
+	{...attributes}
+	{...common}
+	{...native}
+	onclick={disabled && href !== undefined ? (event: MouseEvent) => event.preventDefault() : onClick}
+>
 	{#if icon}
 		<span><Icon {...icon} color={undefined} label={undefined} /></span>
 	{/if}
@@ -45,77 +60,64 @@
 			<span><Icon {...trailingIcon} color={undefined} label={undefined} /></span>
 		{/if}
 	{/if}
-{/snippet}
-
-{#if isLink}
-	<!-- eslint-disable svelte/no-navigation-without-resolve -- Native library links also support consumers outside SvelteKit. -->
-	<a
-		{...attributes as HTMLAnchorAttributes}
-		{...common}
-		href={disabled ? undefined : href}
-		aria-disabled={disabled ? true : attributes['aria-disabled']}
-		tabindex={disabled ? -1 : attributes.tabindex}
-		onclick={disabled ? (event) => event.preventDefault() : onClick}
-	>
-		{@render content()}
-	</a>
-	<!-- eslint-enable svelte/no-navigation-without-resolve -->
-{:else}
-	<button
-		{...attributes as HTMLButtonAttributes}
-		{...common}
-		type={(attributes as HTMLButtonAttributes).type ?? 'button'}
-		{disabled}
-		onclick={onClick}
-	>
-		{@render content()}
-	</button>
-{/if}
+</svelte:element>
 
 <style>
 	.button {
-		--internal-height: max(48px, 3rem);
-		--internal-padding: 1.125rem;
-		--internal-icon-size: calc(var(--internal-height) / 2 + 0.25rem);
+		--internal-height: max(40px, 2.5rem);
+		--internal-target: 24px;
+		--internal-padding: 1rem;
+		--internal-icon-size: 1.25rem;
+		--internal-font-size: 1rem;
 		box-sizing: border-box;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		text-transform: capitalize;
 		gap: 0.5rem;
-		min-height: var(--internal-height);
-		min-width: 24px;
+		min-height: max(var(--internal-height), var(--internal-target));
+		min-width: var(--internal-target);
 		padding: 0.25rem var(--internal-padding);
-		border-radius: 0.45rem;
+		border-radius: 0.625rem;
 		font: inherit;
-		font-size: 1rem;
+		font-size: var(--internal-font-size);
+		line-height: 1.25;
 		text-decoration: none;
 	}
 	.button[data-size='x-small'] {
 		--internal-height: max(28px, 1.75rem);
-		--internal-padding: 0.5rem;
+		--internal-padding: 0.625rem;
+		--internal-icon-size: 1rem;
+		--internal-font-size: 0.8125rem;
 	}
 	.button[data-size='small'] {
-		--internal-height: max(40px, 2.5rem);
-		--internal-padding: 0.875rem;
+		--internal-height: max(32px, 2rem);
+		--internal-padding: 0.75rem;
+		--internal-icon-size: 1.125rem;
+		--internal-font-size: 0.875rem;
 	}
 	.button[data-size='large'] {
-		--internal-height: max(64px, 4rem);
-		--internal-padding: 1.5rem;
+		--internal-height: max(48px, 3rem);
+		--internal-padding: 1.25rem;
+		--internal-icon-size: 1.5rem;
 	}
 	.button[data-size='x-large'] {
-		--internal-height: max(80px, 5rem);
-		--internal-padding: 2rem;
+		--internal-height: max(56px, 3.5rem);
+		--internal-padding: 1.5rem;
+		--internal-icon-size: 1.75rem;
+		--internal-font-size: 1.125rem;
 	}
 	.button[data-kind='icon'] {
-		width: var(--internal-height);
-		height: var(--internal-height);
+		width: max(var(--internal-height), var(--internal-target));
+		height: max(var(--internal-height), var(--internal-target));
 		padding: 0;
 		font-size: var(--internal-icon-size);
 	}
 	span {
 		display: inline-flex;
+		align-items: center;
+		flex-shrink: 0;
 		font-size: var(--internal-icon-size);
+		line-height: 1;
 	}
 	.button[data-wide] {
 		width: 100%;
@@ -123,4 +125,22 @@
 	.button[data-rounded] {
 		border-radius: 50%;
 	}
+	.button:is(:disabled, [aria-disabled='true']) {
+		--surface-color: var(--color-muted, gray);
+	}
+	.button[data-variant='filled']:not(:disabled, [aria-disabled='true']):is(:hover, :focus-visible) {
+		filter: brightness(1.1);
+	}
+	.button[data-variant='filled']:not(:disabled, [aria-disabled='true']):is(
+			:active,
+			[aria-pressed='true'],
+			[data-surface-pressed='true']
+		) {
+		filter: brightness(0.85);
+	}
+	@media (pointer: coarse) {
+		.button {
+			--internal-target: 44px;
+		}
+	}
 </style>

package/src/lib/button/types.ts

@@ -35,6 +35,7 @@ export type ButtonProps = {
 	color?: Exclude<Color, 'background'>;
 	size?: Size;
 	variant?: Variant;
+	glass?: boolean;
 	disabled?: boolean;
 	onClick?: DOMAttributes<HTMLButtonElement | HTMLAnchorElement>['onclick'];
 } & Omit<DOMAttributes<HTMLButtonElement | HTMLAnchorElement>, 'children' | 'onclick'> &

package/src/lib/checkbox/checkbox.svelte

@@ -21,12 +21,24 @@
 		--internal-size: 1.25rem;
 		--internal-tint: var(--color-foreground, black);
 		--internal-strength-light: 4%;
-		--internal-strength-dark: 16%;
-		--internal-border: light-dark(
-			color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
-			color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
+		--internal-strength-dark: 8%;
+		--internal-fill: light-dark(
+			color-mix(
+				in srgb,
+				var(--internal-tint) var(--internal-strength-light),
+				var(--color-background, white)
+			),
+			color-mix(
+				in srgb,
+				var(--internal-tint) var(--internal-strength-dark),
+				var(--color-background, white)
+			)
+		);
+		--internal-border: color-mix(
+			in srgb,
+			var(--color-foreground, black) 48%,
+			var(--color-background, white)
 		);
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
 		box-sizing: border-box;
 		position: relative;
 		display: inline-flex;
@@ -37,30 +49,14 @@
 		block-size: var(--internal-size);
 		border: 1px solid var(--internal-border);
 		border-radius: calc(var(--internal-size) * 0.2);
-		background: color-mix(
-			in srgb,
-			light-dark(
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-light),
-						var(--color-background, white)
-					),
-					color-mix(
-						in srgb,
-						var(--internal-tint) var(--internal-strength-dark),
-						var(--color-background, white)
-					)
-				)
-				85%,
-			transparent
-		);
-		box-shadow: inset 0 1px 0 var(--internal-highlight);
+		background: var(--internal-fill);
 		color: var(--color-foreground, black);
 		font-size: calc(var(--internal-size) * 0.8);
 		vertical-align: middle;
-		transition: all 150ms ease;
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease,
+			color 150ms ease;
 	}
 	input {
 		position: absolute;
@@ -89,26 +85,35 @@
 		--internal-size: 1.75rem;
 	}
 	div:has(input:hover:not(:disabled):not(:checked)) {
-		--internal-strength-light: 6%;
-		--internal-strength-dark: 20%;
+		--internal-strength-light: 8%;
+		--internal-strength-dark: 12%;
 	}
 	div:has(input:checked) {
 		--internal-tint: var(--color-primary, blue);
 		--internal-strength-light: 88%;
 		--internal-strength-dark: 88%;
-		--internal-border: color-mix(in srgb, var(--internal-tint) 68%, var(--color-foreground, black));
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 28%, transparent);
-		color: color-mix(in srgb, var(--color-background, white) 90%, var(--internal-tint));
+		--internal-border: var(--internal-fill);
+		color: var(--color-background, white);
 	}
 	div:has(input:checked:hover:not(:disabled)) {
 		--internal-strength-light: 92%;
 		--internal-strength-dark: 92%;
 	}
+	div:has(input:active:not(:disabled)) {
+		--internal-strength-light: 12%;
+		--internal-strength-dark: 16%;
+	}
+	div:has(input:checked:active:not(:disabled)) {
+		--internal-strength-light: 96%;
+		--internal-strength-dark: 96%;
+	}
+	div:has(input:user-invalid),
+	div:has(input[aria-invalid='true']) {
+		--internal-border: var(--color-error, #bc2436);
+	}
 	div:has(input:focus-visible) {
-		--internal-border: color-mix(in srgb, var(--color-primary, blue) 55%, transparent);
-		box-shadow:
-			inset 0 1px 0 var(--internal-highlight),
-			0 0 0 3px color-mix(in srgb, var(--color-primary, blue) 16%, transparent);
+		outline: 2px solid var(--color-primary, blue);
+		outline-offset: 3px;
 	}
 	div:has(input:disabled) {
 		opacity: 0.5;

package/src/lib/combobox/combobox.svelte

@@ -91,9 +91,8 @@
 >
 	<Popover
 		bind:open={() => open, setOpen}
-		variant="filled"
-		spacing="small"
-		radius="small"
+		spacing="x-small"
+		radius="0.75rem"
 		shadow
 		scroll
 		disabled={disabled || !!attributes.readonly}

package/src/lib/combobox/input.svelte

@@ -88,7 +88,7 @@
 		? undefined
 		: selected.length === 1 && selected[0].icon
 			? { ...selected[0].icon }
-			: undefined}
+			: { name: 'unfold_more' }}
 	value={display}
 	role="combobox"
 	aria-autocomplete="list"

package/src/lib/combobox/list.svelte

@@ -54,17 +54,17 @@
 
 <style>
 	div {
-		--internal-height: 2.5rem;
+		--internal-row-height: 2.125rem;
 		--internal-icon-size: 1.25rem;
 		display: grid;
-		gap: 0.375rem;
+		gap: 0.125rem;
 	}
 	div[data-size='small'] {
-		--internal-height: 2rem;
+		--internal-row-height: 1.875rem;
 		--internal-icon-size: 1rem;
 	}
 	div[data-size='large'] {
-		--internal-height: 3rem;
+		--internal-row-height: 2.375rem;
 		--internal-icon-size: 1.5rem;
 	}
 	p {
@@ -72,7 +72,7 @@
 		align-items: center;
 		gap: 0.6rem;
 		margin: 0;
-		padding-block: 0.5rem;
+		padding: 0.5rem;
 		color: var(--color-muted);
 	}
 </style>

package/src/lib/combobox/option.svelte

@@ -18,7 +18,7 @@
 >
 	{#if item.icon}<span data-icon><Icon {...item.icon} /></span>{/if}
 	<span data-label>{item.label}</span>
-	{#if selected}<span data-icon><Icon name="check" /></span>{/if}
+	{#if selected}<span data-icon data-check><Icon name="check" /></span>{/if}
 </button>
 
 <style>
@@ -28,15 +28,16 @@
 		align-items: center;
 		gap: 0.6rem;
 		width: 100%;
-		min-height: var(--internal-height);
+		min-height: var(--internal-row-height);
 		padding: 0.375rem 0.65rem;
 		border: 0;
-		border-radius: 0.4rem;
+		border-radius: 0.5rem;
 		background: transparent;
 		color: var(--color-foreground);
 		font: inherit;
 		text-align: left;
 		cursor: pointer;
+		transition: background-color 150ms ease;
 	}
 	[data-label] {
 		flex: 1;
@@ -50,13 +51,24 @@
 		flex: 0 0 auto;
 		font-size: var(--internal-icon-size);
 	}
-	button:hover:not(:disabled),
-	button[aria-selected='true'],
-	button[data-active] {
-		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	[data-check] {
 		color: var(--color-primary);
 	}
-	button[data-active],
+	button[aria-selected='true'] {
+		background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+	}
+	button:hover:not(:disabled, [data-active]) {
+		background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
+	}
+	button[aria-selected='true']:hover:not(:disabled, [data-active]) {
+		background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+	}
+	button[data-active] {
+		background: color-mix(in srgb, var(--color-foreground) 12%, transparent);
+	}
+	button[aria-selected='true'][data-active] {
+		background: color-mix(in srgb, var(--color-primary) 18%, transparent);
+	}
 	button:focus-visible {
 		outline: 2px solid var(--color-primary);
 		outline-offset: -2px;
@@ -65,8 +77,16 @@
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
+	@media (prefers-reduced-motion: reduce) {
+		button {
+			transition: none;
+		}
+	}
 	@media (forced-colors: active) {
-		button[data-active],
+		button[data-active] {
+			outline: 2px solid Highlight;
+			outline-offset: -2px;
+		}
 		button:focus-visible {
 			outline-color: Highlight;
 		}