bref-ui 2.0.1 → 2.1.0

package/dist/text-input/text-input.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	/* eslint-disable max-lines -- Keep the native control and its scoped style recipe together. */
 	import Icon from '../icon/icon.svelte';
+	import { surface } from '../theme/surface.js';
 	import type { TextInputProps } from './types.js';
 
 	let {
@@ -9,7 +9,8 @@
 		icon,
 		size = 'medium',
 		wide = false,
-		variant = 'neutral',
+		variant = 'soft',
+		glass = false,
 		oninput,
 		defaultValue,
 		...attributes
@@ -22,7 +23,17 @@
 	};
 </script>
 
-<div data-size={size} data-variant={variant} data-wide={wide || undefined}>
+<div
+	class={surface({
+		color: 'background',
+		variant,
+		glass,
+		hover: variant === 'soft' && !attributes.disabled ? 'small' : undefined
+	})}
+	data-size={size}
+	data-variant={variant}
+	data-wide={wide || undefined}
+>
 	{#if icon}
 		<span><Icon {...icon} label={undefined} /></span>
 	{/if}
@@ -37,75 +48,38 @@
 <style>
 	div {
 		--internal-height: 2.5rem;
-		--internal-padding: 0.85rem;
+		--internal-padding: 1rem;
 		--internal-icon-size: 1.25rem;
-		--internal-tint: var(--color-foreground, black);
-		--internal-strength-light: 3%;
-		--internal-strength-dark: 3%;
-		--internal-opacity: 15%;
-		--internal-border: transparent;
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
+		--internal-placeholder: color-mix(in srgb, var(--color-muted,) 35%, var(--color-foreground));
 		box-sizing: border-box;
 		display: inline-flex;
 		align-items: center;
 		align-self: start;
-		gap: 0.6rem;
+		gap: 0.625rem;
 		width: min(100%, 18rem);
 		min-width: 0;
 		max-width: 100%;
 		min-height: var(--internal-height);
 		padding-inline: var(--internal-padding);
-		border: 1px solid var(--internal-border);
-		border-radius: 0.5rem;
-		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)
-					)
-				)
-				var(--internal-opacity),
-			transparent
-		);
-		color: var(--color-foreground, black);
-		transition: all 150ms ease;
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
+		border-radius: 0.625rem;
 	}
 	div[data-wide] {
 		width: 100%;
 	}
 	div[data-size='small'] {
 		--internal-height: 2rem;
-		--internal-padding: 0.65rem;
+		--internal-padding: 0.75rem;
 		--internal-icon-size: 1rem;
 	}
 	div[data-size='large'] {
 		--internal-height: 3rem;
-		--internal-padding: 1rem;
+		--internal-padding: 1.125rem;
 		--internal-icon-size: 1.5rem;
 	}
-	div[data-variant='soft'] {
-		--internal-strength-light: 4%;
-		--internal-strength-dark: 16%;
-		--internal-opacity: 85%;
-		--internal-border: light-dark(
-			color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
-			color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
-		);
-		box-shadow: inset 0 1px 0 var(--internal-highlight);
-	}
 	span {
 		display: inline-flex;
 		flex: 0 0 auto;
-		color: var(--color-muted, #666);
+		color: var(--color-muted);
 		font-size: var(--internal-icon-size);
 		pointer-events: none;
 	}
@@ -121,7 +95,7 @@
 		font: inherit;
 		font-size: 1rem;
 		font-weight: 200;
-		line-height: 1.4;
+		line-height: 1.5;
 	}
 	input {
 		height: calc(var(--internal-height) - 2px);
@@ -136,41 +110,27 @@
 		margin: 0;
 	}
 	input::placeholder {
-		color: var(--color-muted, #666);
-	}
-	div[data-variant='soft']:hover:not(:has(:disabled)) {
-		--internal-border: light-dark(
-			color-mix(in srgb, var(--color-foreground, black) 18%, transparent),
-			color-mix(in srgb, var(--color-foreground, black) 38%, transparent)
-		);
-		--internal-strength-light: 6%;
-		--internal-strength-dark: 20%;
+		color: var(--internal-placeholder);
+		opacity: 1;
 	}
 	div:has(input:focus) {
-		--internal-tint: var(--color-primary, blue);
-		--internal-strength-light: 6%;
-		--internal-strength-dark: 12%;
-		--internal-border: color-mix(in srgb, var(--internal-tint) 55%, transparent);
-		box-shadow:
-			inset 0 1px 0 var(--internal-highlight),
-			0 0 0 3px color-mix(in srgb, var(--internal-tint) 16%, transparent);
-	}
-	div:has(input:invalid, [aria-invalid='true']) {
-		--internal-tint: var(--color-error, #bc2436);
-		--internal-border: color-mix(in srgb, var(--internal-tint) 65%, transparent);
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+	div:has(input:user-invalid, input[aria-invalid='true']) {
+		--surface-border: var(--color-error);
+		outline-color: var(--color-error);
 	}
 	div:has(:disabled) {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
+	div[data-variant='soft']:has(input:disabled):hover {
+		--surface-strength: var(--surface-soft-strength);
+	}
 	input:disabled {
 		cursor: inherit;
 	}
-	@media (prefers-reduced-motion: reduce) {
-		div {
-			transition: none;
-		}
-	}
 	@media (forced-colors: active) {
 		div {
 			border-color: ButtonText;

package/dist/text-input/types.d.ts

@@ -8,4 +8,5 @@ export type TextInputProps = Omit<HTMLInputAttributes, 'value' | 'size'> & {
     size?: BaseSize;
     wide?: boolean;
     variant?: Exclude<Variant, 'filled'>;
+    glass?: boolean;
 };

package/dist/theme/cli-theme.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	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';
 
@@ -10,6 +11,7 @@
 
 <Colors />
 <Surfaces />
+<Glass />
 <Fonts />
 <Styles />
 

package/dist/theme/glass.svelte

@@ -0,0 +1,60 @@
+<style>
+	:global(.glass) {
+		--glass-paint: var(--surface-fill, var(--color-background, white));
+		--glass-opacity: 20%;
+		--glass-blur: blur(0.75rem) saturate(120%);
+	}
+	/* Three class selectors keep opt-in material above ordinary scoped component paint.
+	   Inline styles and explicit selectors can still override it. */
+	:global(.glass.glass.glass) {
+		background: var(--glass-paint);
+		color: var(--surface-content, var(--color-foreground, black));
+		box-shadow:
+			inset 0 1px 0 color-mix(in srgb, var(--color-foreground, black) 8%, transparent),
+			var(--surface-shadow, 0 0.5rem 1.5rem color-mix(in srgb, black 12%, transparent));
+	}
+	:global(.glass:where(.surface-neutral)) {
+		--glass-paint: color-mix(
+			in srgb,
+			var(--surface-tint) var(--surface-strength),
+			var(--surface-base)
+		);
+	}
+	:global(.glass:where(.surface-soft)) {
+		--glass-opacity: 40%;
+	}
+	:global(.glass:where(.surface-filled)) {
+		--glass-opacity: 65%;
+	}
+	@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+		:global(.glass.glass.glass) {
+			background: color-mix(in srgb, var(--glass-paint) var(--glass-opacity), transparent);
+			-webkit-backdrop-filter: var(--glass-blur);
+			backdrop-filter: var(--glass-blur);
+		}
+	}
+	@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+		:global(.glass.glass.glass) {
+			background: var(--glass-paint);
+			box-shadow: var(--surface-shadow, 0 0 0 transparent);
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+	}
+	@media (forced-colors: active) {
+		:global(.glass.glass.glass) {
+			border-color: CanvasText;
+			background: Canvas;
+			color: CanvasText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		:global(
+			.glass.glass.glass:is(:disabled, [aria-disabled='true'], [data-surface-disabled='true'])
+		) {
+			color: GrayText;
+			opacity: 1;
+		}
+	}
+</style>

package/dist/theme/glass.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Glass;
+type Glass = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Glass: $$__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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/theme/registry.json

@@ -4,6 +4,7 @@
 		"cli-theme.svelte",
 		"colors.svelte",
 		"surfaces.svelte",
+		"glass.svelte",
 		"fonts.svelte",
 		"styles.svelte",
 		"surface.ts"

package/dist/theme/styles.svelte

@@ -1,7 +1,13 @@
 <style>
+	:global(:root) {
+		--font-sans:
+			ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	}
+
 	:global(body) {
 		background: var(--color-background);
 		color: var(--color-foreground);
+		font-family: var(--font-text, var(--font-sans));
 	}
 
 	:global(*) {

package/dist/theme/surface.d.ts

@@ -1,3 +1,3 @@
 import type { SurfaceBaseProps } from '../types.js';
 /** Compose typed surface classes; render Theme once to load their paint recipes. */
-export declare const surface: ({ variant, color, shadow, hover }?: SurfaceBaseProps) => string;
+export declare const surface: ({ variant, color, shadow, hover, glass }?: SurfaceBaseProps) => string;

package/dist/theme/surface.js

@@ -1,10 +1,11 @@
 /** Compose typed surface classes; render Theme once to load their paint recipes. */
-export const surface = ({ variant = 'neutral', color = 'foreground', shadow, hover } = {}) => [
+export const surface = ({ variant = 'neutral', color = 'foreground', shadow, hover, glass = false } = {}) => [
     'surface',
     `surface-${variant}`,
     `surface-${color}`,
     shadow && `surface-shadow-${shadow === true ? 'medium' : shadow}`,
-    hover && `surface-hover-${hover}`
+    hover && `surface-hover-${hover}`,
+    glass && 'glass'
 ]
     .filter(Boolean)
     .join(' ');

package/dist/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/dist/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/dist/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/dist/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/dist/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);