bref-ui 2.0.1 → 2.1.0

package/src/lib/popover/types.ts

@@ -1,7 +1,22 @@
 import type { SurfaceProps } from '../surface/types.ts';
 import type { Snippet } from 'svelte';
 
-export interface PopoverProps extends SurfaceProps {
+export interface PopoverProps extends Pick<
+	SurfaceProps,
+	| 'as'
+	| 'variant'
+	| 'color'
+	| 'shadow'
+	| 'hover'
+	| 'spacing'
+	| 'orientation'
+	| 'width'
+	| 'height'
+	| 'radius'
+	| 'scroll'
+	| 'class'
+	| 'style'
+> {
 	trigger: Snippet;
 	children: Snippet;
 	open?: boolean;

package/src/lib/progress/progress.svelte

@@ -75,24 +75,15 @@
 				onpointercancel?.(event);
 			}}
 		/>
-		<span style:inset-inline-start={`${percentage}%`} aria-hidden="true"></span>
+		<span class={['glass']} style:inset-inline-start={`${percentage}%`} aria-hidden="true"></span>
 	{/if}
 </div>
 
 <style>
 	div {
 		--progress-height: 0.375rem;
-		--progress-track: color-mix(
-			in srgb,
-			color-mix(in srgb, var(--color-foreground) 16%, var(--color-background)) 85%,
-			transparent
-		);
-		--progress-fill: color-mix(
-			in srgb,
-			color-mix(in srgb, var(--color-primary) 88%, var(--color-background)) 85%,
-			transparent
-		);
-		--progress-highlight: color-mix(in srgb, var(--color-foreground) 28%, transparent);
+		--progress-track: color-mix(in srgb, var(--color-foreground) 22%, var(--color-background));
+		--progress-fill: var(--color-primary);
 		position: relative;
 		display: block;
 		width: 100%;
@@ -112,11 +103,6 @@
 		border-radius: 999px;
 		appearance: none;
 		background: var(--progress-track);
-		box-shadow:
-			inset 0 1px 0 color-mix(in srgb, var(--color-foreground) 16%, transparent),
-			0 2px 6px color-mix(in srgb, var(--color-foreground) 8%, transparent);
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
 		overflow: hidden;
 	}
 	progress::-webkit-progress-bar {
@@ -125,12 +111,10 @@
 	progress::-webkit-progress-value {
 		background: var(--progress-fill);
 		border-radius: 999px;
-		box-shadow: inset 0 1px 0 var(--progress-highlight);
 	}
 	progress::-moz-progress-bar {
 		background: var(--progress-fill);
 		border-radius: 999px;
-		box-shadow: inset 0 1px 0 var(--progress-highlight);
 	}
 	div[data-unknown='true'] progress::-webkit-progress-value {
 		background: transparent;
@@ -142,14 +126,13 @@
 		content: '';
 		position: absolute;
 		top: calc(50% - var(--progress-height) / 2);
-		left: 0;
-		width: 100%;
+		inset-inline: 0 100%;
 		height: var(--progress-height);
 		border-radius: 999px;
 		background: var(--progress-fill);
-		box-shadow: inset 0 1px 0 var(--progress-highlight);
-		transform-origin: left center;
-		animation: sweep 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+		animation:
+			sweep-leading 2s cubic-bezier(0.15, 0, 0.45, 1) infinite,
+			sweep-trailing 2s cubic-bezier(0.55, 0, 0.85, 1) infinite;
 		pointer-events: none;
 	}
 	div[data-seekable='true'] {
@@ -160,6 +143,10 @@
 	div[data-seekable='true'] progress {
 		pointer-events: none;
 	}
+	div:has(input:disabled) {
+		--progress-fill: var(--color-muted);
+		filter: grayscale(1);
+	}
 	input {
 		position: absolute;
 		inset: 0;
@@ -174,19 +161,15 @@
 		cursor: not-allowed;
 	}
 	span {
+		--glass-paint: color-mix(in srgb, var(--color-background) 92%, var(--progress-fill));
+		--surface-shadow: 0 2px 6px color-mix(in srgb, var(--color-foreground) 18%, transparent);
 		box-sizing: border-box;
 		position: absolute;
 		top: 50%;
 		width: 1.25rem;
 		height: 1.25rem;
+		border: 3px solid var(--progress-fill);
 		border-radius: 50%;
-		background: color-mix(in srgb, var(--color-background) 25%, transparent);
-		border: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
-		box-shadow:
-			inset 0 1px 0 var(--progress-highlight),
-			0 2px 6px color-mix(in srgb, var(--color-foreground) 12%, transparent);
-		-webkit-backdrop-filter: blur(0.125rem) saturate(120%);
-		backdrop-filter: blur(0.125rem) saturate(120%);
 		transform: translate(var(--internal-thumb-offset, -50%), -50%);
 		transition:
 			transform 150ms ease,
@@ -196,37 +179,30 @@
 	@media (hover: hover) {
 		input:not(:disabled):hover + span {
 			transform: translate(var(--internal-thumb-offset, -50%), -50%) scale(1.3);
-			box-shadow:
-				inset 0 1px 0 var(--progress-highlight),
-				0 3px 10px color-mix(in srgb, var(--color-foreground) 20%, transparent);
+			--surface-shadow: 0 3px 10px color-mix(in srgb, var(--color-foreground) 22%, transparent);
 		}
 	}
 	input:not(:disabled):active + span {
 		transform: translate(var(--internal-thumb-offset, -50%), -50%) scale(1.5);
-		box-shadow:
-			inset 0 1px 0 var(--progress-highlight),
+		--surface-shadow:
 			0 4px 14px color-mix(in srgb, var(--color-foreground) 24%, transparent),
-			0 0 0 4px color-mix(in srgb, var(--color-foreground) 12%, transparent);
+			0 0 0 4px color-mix(in srgb, var(--progress-fill) 18%, transparent);
 	}
 	span:dir(rtl) {
 		--internal-thumb-offset: 50%;
 	}
 	input:focus-visible + span {
-		outline: 2px solid var(--color-foreground);
+		outline: 2px solid var(--color-primary);
 		outline-offset: 3px;
 	}
-	input:disabled + span {
-		opacity: 0.5;
-	}
-	@keyframes sweep {
-		0% {
-			transform: translateX(0) scaleX(0);
+	@keyframes sweep-leading {
+		to {
+			inset-inline-end: 0;
 		}
-		50% {
-			transform: translateX(25%) scaleX(0.5);
-		}
-		100% {
-			transform: translateX(100%) scaleX(0);
+	}
+	@keyframes sweep-trailing {
+		to {
+			inset-inline-start: 100%;
 		}
 	}
 	@media (prefers-reduced-motion: reduce) {
@@ -235,22 +211,33 @@
 		}
 		div[data-unknown='true']::after {
 			animation: none;
-			transform: translateX(32.5%) scaleX(0.35);
+			inset-inline: 35%;
 		}
 	}
 	@media (forced-colors: active) {
+		div {
+			--progress-track: Canvas;
+			--progress-fill: Highlight;
+		}
+		div:has(input:disabled) {
+			--progress-fill: GrayText;
+			filter: none;
+		}
+		div[data-unknown='true']::after {
+			forced-color-adjust: none;
+		}
+		input:focus-visible + span {
+			outline-color: Highlight;
+		}
 		progress {
+			forced-color-adjust: none;
 			border: 1px solid CanvasText;
 			box-shadow: none;
-			-webkit-backdrop-filter: none;
-			backdrop-filter: none;
 		}
 		span {
 			background: Highlight;
-			border-color: HighlightText;
+			border: 1px solid HighlightText;
 			box-shadow: none;
-			-webkit-backdrop-filter: none;
-			backdrop-filter: none;
 		}
 	}
 </style>

package/src/lib/select/empty.svelte

@@ -14,9 +14,8 @@
 	p {
 		display: flex;
 		align-items: center;
-		flex-direction: column;
-		justify-content: center;
-		gap: 0.5rem;
+		justify-content: flex-start;
+		gap: 0.6rem;
 		min-height: fit-content;
 		margin: 0;
 		padding: 0.5rem;

package/src/lib/select/list.svelte

@@ -21,7 +21,8 @@
 <style>
 	div {
 		display: grid;
-		gap: 0.375rem;
+		grid-template-columns: minmax(0, 1fr);
+		gap: 0.125rem;
 		min-width: 0;
 	}
 </style>

package/src/lib/select/option.svelte

@@ -8,7 +8,7 @@
 <button type="button" aria-pressed={selected} {disabled} onclick={onSelect}>
 	{#if icon}<span data-icon><Icon {...icon} /></span>{/if}
 	<span data-label>{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>
@@ -18,15 +18,17 @@
 		align-items: center;
 		gap: 0.6rem;
 		width: 100%;
-		min-height: var(--internal-height);
+		min-width: 0;
+		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;
@@ -40,11 +42,18 @@
 		flex: 0 0 auto;
 		font-size: var(--internal-icon-size);
 	}
-	button:hover:not(:disabled),
-	button[aria-pressed='true'] {
-		background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+	[data-check] {
 		color: var(--color-primary);
 	}
+	button[aria-pressed='true'] {
+		background: color-mix(in srgb, var(--color-primary) 8%, transparent);
+	}
+	button:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-foreground) 6%, transparent);
+	}
+	button[aria-pressed='true']:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--color-primary) 14%, transparent);
+	}
 	button:focus-visible {
 		outline: 2px solid var(--color-primary);
 		outline-offset: -2px;
@@ -53,6 +62,11 @@
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
+	@media (prefers-reduced-motion: reduce) {
+		button {
+			transition: none;
+		}
+	}
 	@media (forced-colors: active) {
 		button:focus-visible {
 			outline-color: Highlight;

package/src/lib/select/select.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <div data-size={size}>
-	<Popover bind:open variant="filled" spacing="small" radius="small" shadow scroll {disabled}>
+	<Popover bind:open spacing="x-small" radius="0.75rem" width="fill" shadow scroll {disabled}>
 		{#snippet trigger()}
 			<Trigger
 				{id}
@@ -51,7 +51,8 @@
 <style>
 	div {
 		--internal-height: 2.5rem;
-		--internal-padding: 0.85rem;
+		--internal-row-height: 2.125rem;
+		--internal-padding: 1rem;
 		--internal-icon-size: 1.25rem;
 		position: relative;
 		width: 100%;
@@ -59,12 +60,14 @@
 	}
 	div[data-size='small'] {
 		--internal-height: 2rem;
-		--internal-padding: 0.65rem;
+		--internal-row-height: 1.875rem;
+		--internal-padding: 0.75rem;
 		--internal-icon-size: 1rem;
 	}
 	div[data-size='large'] {
 		--internal-height: 3rem;
-		--internal-padding: 1rem;
+		--internal-row-height: 2.375rem;
+		--internal-padding: 1.125rem;
 		--internal-icon-size: 1.5rem;
 	}
 </style>

package/src/lib/select/trigger.svelte

@@ -9,13 +9,12 @@
 <button {id} type="button" data-size={size} {disabled} aria-expanded={open} onclick={onToggle}>
 	<Surface
 		as="span"
-		variant="soft"
+		variant="neutral"
 		color="foreground"
 		orientation="horizontal"
-		radius="small"
+		radius="0.625rem"
 		width="fill"
 		height="fill"
-		hover={disabled ? undefined : 'small'}
 	>
 		{#if selected.length === 1 && selected[0].icon}
 			<span data-icon><Icon {...selected[0].icon} /></span>
@@ -23,7 +22,7 @@
 		<span data-value data-placeholder={selected.length === 0 || undefined}>
 			{selected.length ? selected.map((item) => item.label).join(', ') : placeholder}
 		</span>
-		<span data-icon><Icon name="arrow_drop_down" /></span>
+		<span data-icon data-chevron><Icon name="keyboard_arrow_down" /></span>
 	</Surface>
 </button>
 
@@ -35,12 +34,16 @@
 		height: var(--internal-height);
 		padding: 0;
 		border: 0;
-		border-radius: 0.5rem;
-		background: transparent;
+		border-radius: 0.625rem;
+		background: light-dark(
+			color-mix(in srgb, var(--color-foreground) 6%, var(--color-background)),
+			color-mix(in srgb, var(--color-foreground) 10%, var(--color-background))
+		);
 		color: var(--color-foreground);
 		font: inherit;
 		text-align: left;
 		cursor: pointer;
+		transition: background-color 150ms ease;
 	}
 	span:first-child {
 		margin-inline-start: var(--internal-padding);
@@ -61,7 +64,9 @@
 		font-weight: 200;
 		line-height: 1.4;
 	}
-	[data-placeholder],
+	[data-placeholder] {
+		color: color-mix(in srgb, var(--color-muted) 90%, var(--color-foreground));
+	}
 	[data-icon] {
 		color: var(--color-muted);
 	}
@@ -70,6 +75,18 @@
 		flex: 0 0 auto;
 		font-size: var(--internal-icon-size);
 	}
+	button:hover:not(:disabled) {
+		background: light-dark(
+			color-mix(in srgb, var(--color-foreground) 8%, var(--color-background)),
+			color-mix(in srgb, var(--color-foreground) 12%, var(--color-background))
+		);
+	}
+	[data-chevron] {
+		transition: transform 150ms ease;
+	}
+	button[aria-expanded='true'] [data-chevron] {
+		transform: rotate(180deg);
+	}
 	button:focus-visible {
 		outline: 2px solid var(--color-primary);
 		outline-offset: 2px;
@@ -78,6 +95,12 @@
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
+	@media (prefers-reduced-motion: reduce) {
+		button,
+		[data-chevron] {
+			transition: none;
+		}
+	}
 	@media (forced-colors: active) {
 		button:focus-visible {
 			outline-color: Highlight;

package/src/lib/spinner/spinner.svelte

@@ -16,23 +16,15 @@
 		initial-value: 90deg;
 	}
 	div {
-		--spinner-track: color-mix(
-			in srgb,
-			color-mix(in srgb, var(--color-foreground) 16%, var(--color-background)) 85%,
-			transparent
-		);
-		--spinner-fill: color-mix(
-			in srgb,
-			color-mix(in srgb, var(--color-primary) 88%, var(--color-background)) 85%,
-			transparent
-		);
+		--spinner-track: color-mix(in srgb, currentColor 18%, transparent);
+		--spinner-fill: currentColor;
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		width: 1em;
 		height: 1em;
 		font-size: inherit;
-		color: var(--color-primary);
+		color: inherit;
 	}
 	div[data-size='x-small'] {
 		font-size: 0.875rem;
@@ -53,14 +45,11 @@
 		box-sizing: border-box;
 		width: 80%;
 		height: 80%;
-		padding: max(2px, 0.12em);
+		padding: max(1px, 0.055em);
 		background: conic-gradient(
 			var(--spinner-fill) 0deg var(--spinner-sweep),
 			var(--spinner-track) var(--spinner-sweep) 360deg
 		);
-		box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-foreground) 28%, transparent);
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
 		mask:
 			linear-gradient(black, black) content-box,
 			linear-gradient(black, black);
@@ -85,8 +74,8 @@
 			transform: rotate(0deg);
 		}
 		50% {
-			--spinner-sweep: 270deg;
-			transform: rotate(180deg);
+			--spinner-sweep: 210deg;
+			transform: rotate(90deg);
 		}
 		100% {
 			--spinner-sweep: 30deg;
@@ -95,6 +84,7 @@
 	}
 	@media (prefers-reduced-motion: reduce) {
 		span {
+			--spinner-sweep: 90deg;
 			animation: none;
 		}
 	}
@@ -102,13 +92,10 @@
 		span {
 			padding: 0;
 			mask: none;
-			border: max(2px, 0.12em) solid CanvasText;
+			border: max(1px, 0.055em) solid CanvasText;
 			border-color: CanvasText;
 			border-top-color: Highlight;
 			background: none;
-			box-shadow: none;
-			-webkit-backdrop-filter: none;
-			backdrop-filter: none;
 		}
 	}
 </style>

package/src/lib/surface/surface.svelte

@@ -7,6 +7,7 @@
 		children,
 		color = 'background',
 		variant = 'neutral',
+		glass = false,
 		spacing,
 		orientation = 'vertical',
 		width = 'fill',
@@ -35,7 +36,7 @@
 	this={as}
 	{...attributes}
 	data-surface
-	class={[surface({ variant, color, shadow, hover }), className]}
+	class={[surface({ variant, color, glass, shadow, hover }), className]}
 	data-variant={variant}
 	data-spacing={spacing}
 	data-orientation={orientation}
@@ -64,6 +65,10 @@
 		border-radius: var(--surface-radius, 0);
 		overflow: visible;
 	}
+	[data-surface][data-surface-motion] {
+		opacity: var(--surface-motion-opacity, 1);
+		translate: 0 var(--surface-motion-offset, 0px);
+	}
 	[data-orientation='horizontal'] {
 		flex-direction: row;
 		align-items: center;

package/src/lib/surface/types.ts

@@ -11,6 +11,8 @@ export interface SurfaceBaseProps {
 	shadow?: BaseSize | boolean;
 	/** Optional hover treatment strength. */
 	hover?: BaseSize;
+	/** Enable translucent paint and backdrop blur. */
+	glass?: boolean;
 }
 
 export interface SurfaceProps extends SurfaceBaseProps, Omit<HTMLAttributes<HTMLElement>, 'color'> {

package/src/lib/switch/switch.svelte

@@ -11,9 +11,9 @@
 
 <style>
 	[data-switch] {
-		--track-width: 3.25rem;
-		--track-height: 2rem;
-		--thumb-size: 1.5rem;
+		--track-width: 2.75rem;
+		--track-height: 1.625rem;
+		--thumb-size: 1.125rem;
 		--inset: 0.25rem;
 		position: relative;
 		display: inline-flex;
@@ -35,43 +35,24 @@
 
 	[data-switch] > span {
 		--internal-tint: var(--color-foreground, black);
-		--internal-strength-light: 4%;
-		--internal-strength-dark: 16%;
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 16%, transparent);
+		--internal-strength: 48%;
+		--internal-fill: color-mix(
+			in srgb,
+			var(--internal-tint) var(--internal-strength),
+			var(--color-background, white)
+		);
+		--internal-border: var(--internal-fill);
 		box-sizing: border-box;
 		position: relative;
 		width: 100%;
 		height: 100%;
-		border: 1px solid
-			light-dark(
-				color-mix(in srgb, var(--color-foreground, black) 12%, transparent),
-				color-mix(in srgb, var(--color-foreground, black) 30%, transparent)
-			);
+		border: 1px solid var(--internal-border);
 		border-radius: 999px;
-		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),
-			0 2px 6px color-mix(in srgb, black 8%, transparent);
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
+		background: var(--internal-fill);
 		pointer-events: none;
-		transition: all 150ms ease;
+		transition:
+			background-color 150ms ease,
+			border-color 150ms ease;
 	}
 
 	[data-switch] > span > span {
@@ -84,27 +65,42 @@
 		width: var(--thumb-size);
 		height: var(--thumb-size);
 		border-radius: 50%;
-		background: var(--color-foreground);
-		color: var(--color-background);
+		background: var(--color-background, white);
+		color: var(--color-foreground, black);
+		box-shadow: 0 1px 2px color-mix(in srgb, var(--color-background, white) 12%, transparent);
 		font-size: calc(var(--thumb-size) * 0.7);
 		transform: translateY(-50%);
-		transition:
-			left 150ms ease,
-			background 150ms ease;
+		transition: left 150ms ease;
+	}
+
+	input:hover:not(:disabled) + span {
+		--internal-strength: 52%;
+	}
+
+	input:active:not(:disabled) + span {
+		--internal-strength: 56%;
 	}
 
 	input:checked + span {
 		--internal-tint: var(--color-primary, blue);
-		--internal-strength-light: 88%;
-		--internal-strength-dark: 88%;
-		--internal-highlight: color-mix(in srgb, var(--color-foreground, black) 28%, transparent);
-		border-color: color-mix(in srgb, var(--internal-tint) 68%, var(--color-foreground, black));
+		--internal-strength: 88%;
+	}
+
+	input:checked:hover:not(:disabled) + span {
+		--internal-strength: 92%;
+	}
+
+	input:checked:active:not(:disabled) + span {
+		--internal-strength: 96%;
 	}
 
 	input:checked + span > span {
 		left: calc(100% - var(--thumb-size) - var(--inset));
-		background: var(--color-background);
-		color: var(--color-foreground);
+	}
+
+	input:user-invalid + span,
+	input[aria-invalid='true'] + span {
+		--internal-border: var(--color-error, #bc2436);
 	}
 
 	input:focus-visible + span {
@@ -121,15 +117,15 @@
 	}
 
 	[data-size='small'] {
-		--track-width: 2.75rem;
-		--track-height: 1.75rem;
-		--thumb-size: 1.25rem;
+		--track-width: 2.25rem;
+		--track-height: 1.375rem;
+		--thumb-size: 0.875rem;
 	}
 
 	[data-size='large'] {
-		--track-width: 3.75rem;
-		--track-height: 2.25rem;
-		--thumb-size: 1.625rem;
+		--track-width: 3.25rem;
+		--track-height: 1.875rem;
+		--thumb-size: 1.375rem;
 	}
 
 	@media (prefers-reduced-motion: reduce) {
@@ -150,6 +146,7 @@
 		[data-switch] > span > span {
 			background: ButtonText;
 			color: Canvas;
+			box-shadow: none;
 		}
 		input:checked + span {
 			background: Highlight;

package/src/lib/text-area/registry.json

@@ -4,5 +4,5 @@
 	"exports": {
 		"TextArea": "text-area.svelte"
 	},
-	"dependencies": ["icon"]
+	"dependencies": ["icon", "theme"]
 }