bref-ui 2.0.1 → 2.1.0

package/src/lib/dialog/dialog.svelte

@@ -4,6 +4,7 @@
 	import { fly } from 'svelte/transition';
 	import { prefersReducedMotion } from 'svelte/motion';
 	import { MediaQuery } from 'svelte/reactivity';
+	import { surface } from '../theme/surface.js';
 	import Header from './header.svelte';
 	import Footer from './footer.svelte';
 	import type { DialogProps } from './types.js';
@@ -71,6 +72,7 @@
 	{#if open}
 		<div
 			data-surface
+			class={surface({ color: 'background', glass: true, shadow: 'large' })}
 			use:showModal
 			transition:fly|global={{
 				y: prefersReducedMotion.current ? 0 : 16,
@@ -104,11 +106,7 @@
 		display: flex;
 		flex-direction: column;
 		max-height: calc(100dvh - 2rem);
-		border: 1px solid color-mix(in srgb, var(--color-foreground, black) 18%, transparent);
-		border-radius: 0.75rem;
-		background: var(--color-background, white);
-		color: var(--color-foreground, black);
-		box-shadow: 0 1.5rem 4rem color-mix(in srgb, var(--color-foreground, black) 20%, transparent);
+		border-radius: 1rem;
 	}
 	dialog[open] {
 		display: flex;
@@ -127,26 +125,30 @@
 		--internal-width: 72rem;
 	}
 	dialog::backdrop {
-		background: color-mix(in srgb, var(--color-foreground, black) 48%, transparent);
-		opacity: 0;
+		background: color-mix(in srgb, var(--color-background, white) 48%, transparent);
+		-webkit-backdrop-filter: blur(0);
 		backdrop-filter: blur(0);
+		opacity: 0;
 		transition:
 			opacity 300ms ease,
+			-webkit-backdrop-filter 300ms ease,
 			backdrop-filter 300ms ease;
 	}
 	dialog[data-visible='true']::backdrop {
-		opacity: 1;
+		-webkit-backdrop-filter: blur(0.25rem);
 		backdrop-filter: blur(0.25rem);
+		opacity: 1;
 	}
 	@starting-style {
 		dialog[data-visible='true']::backdrop {
-			opacity: 0;
+			-webkit-backdrop-filter: blur(0);
 			backdrop-filter: blur(0);
+			opacity: 0;
 		}
 	}
 	[data-content] {
 		min-height: 0;
-		padding: 1.5rem;
+		padding: 1.25rem 1.75rem 1.5rem;
 		overflow: auto;
 	}
 	dialog[data-size='full-screen'] {
@@ -172,11 +174,12 @@
 	}
 	@media (forced-colors: active) {
 		[data-surface] {
-			border-color: CanvasText;
-			box-shadow: none;
+			border: 1px solid CanvasText;
 		}
 		dialog::backdrop {
 			background: Canvas;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
 		}
 	}
 </style>

package/src/lib/dialog/footer.svelte

@@ -20,7 +20,7 @@
 		align-items: center;
 		justify-content: flex-end;
 		flex-wrap: wrap;
-		gap: 0.5rem;
-		padding: 0.75rem 1.5rem 1.5rem;
+		gap: 0.75rem;
+		padding: 0 1.75rem 1.5rem;
 	}
 </style>

package/src/lib/dialog/header.svelte

@@ -29,7 +29,7 @@
 		display: flex;
 		align-items: flex-start;
 		gap: 1rem;
-		padding: 1.5rem 1.5rem 0;
+		padding: 1.75rem 1.75rem 0;
 	}
 	header > div {
 		flex: 1;
@@ -44,9 +44,9 @@
 	h2 {
 		margin: 0;
 		font: inherit;
-		font-size: 1.375rem;
-		font-weight: 600;
-		line-height: 1.4;
+		font-size: 1.5rem;
+		font-weight: 400;
+		line-height: 1.3;
 	}
 	p {
 		margin: 0.5rem 0 0;

package/src/lib/icon/icon.svelte

@@ -29,6 +29,8 @@
 		height: 1em;
 		align-items: center;
 		justify-content: center;
+		flex-shrink: 0;
+		vertical-align: middle;
 		font-family: 'Material Symbols Outlined';
 		font-style: normal;
 		font-weight: 100;
@@ -51,11 +53,11 @@
 	}
 
 	.x-small {
-		font-size: 0.875rem;
+		font-size: 1rem;
 	}
 
 	.small {
-		font-size: 1rem;
+		font-size: 1.25rem;
 	}
 
 	.medium {
@@ -63,11 +65,11 @@
 	}
 
 	.large {
-		font-size: 2.5rem;
+		font-size: 2rem;
 	}
 
 	.x-large {
-		font-size: 5rem;
+		font-size: 2.5rem;
 	}
 
 	.primary {

package/src/lib/pill/content.svelte

@@ -3,21 +3,28 @@
 	import Icon from '../icon/icon.svelte';
 	import type { PillProps } from './types.js';
 
-	let { label, icon, size }: Pick<PillProps, 'label' | 'icon' | 'size'> = $props();
+	let { label, icon }: Pick<PillProps, 'label' | 'icon'> = $props();
 </script>
 
 {#if icon}
 	{#key icon.name}
-		<span data-icon in:fly>
-			<Icon {...icon} label={undefined} {size} color={undefined} />
-		</span>
+		<i data-icon in:fly>
+			<Icon {...icon} label={undefined} size={undefined} color={undefined} />
+		</i>
 	{/key}
 {/if}
 <span>{label}</span>
 
 <style>
 	[data-icon] {
+		all: unset;
 		display: inline-flex;
 		align-items: center;
+		flex-shrink: 0;
+		font-size: var(--pill-icon-size, 1.125rem);
+	}
+	span {
+		flex: 1;
+		text-justify: left;
 	}
 </style>

package/src/lib/pill/on-delete.svelte

@@ -1,26 +1,55 @@
 <script lang="ts">
-	import Button from '../button/button.svelte';
+	import Icon from '../icon/icon.svelte';
 	import type { PillProps } from './types.js';
 
 	let { label, onDelete }: Required<Pick<PillProps, 'label' | 'onDelete'>> = $props();
 </script>
 
-<span data-delete>
-	<Button
-		icon={{ name: 'close', label: `Remove ${label}` }}
-		size="x-small"
-		rounded
-		onClick={(event) => {
-			event.stopPropagation();
-			onDelete();
-		}}
-	/>
-</span>
+<button
+	type="button"
+	aria-label={`Remove ${label}`}
+	onclick={(event) => {
+		event.stopPropagation();
+		onDelete();
+	}}
+>
+	<Icon name="close" />
+</button>
 
 <style>
-	[data-delete] {
+	button {
+		box-sizing: border-box;
 		position: relative;
 		z-index: 1;
 		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: var(--pill-delete-size, 1.5rem);
+		height: var(--pill-delete-size, 1.5rem);
+		padding: 0;
+		border: 0;
+		border-radius: 50%;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: var(--pill-icon-size, 1.125rem);
+		cursor: pointer;
+	}
+	button:hover {
+		background: color-mix(in srgb, currentColor 8%, transparent);
+	}
+	button:active {
+		background: color-mix(in srgb, currentColor 16%, transparent);
+	}
+	button:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: -2px;
+	}
+	@media (pointer: coarse) {
+		button {
+			min-width: 44px;
+			min-height: 44px;
+		}
 	}
 </style>

package/src/lib/pill/pill.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	/* eslint-disable max-lines -- Component recipe and animation remain colocated. */
 	import type { PillProps } from './types.js';
+	import { surface } from '../theme/surface.js';
 	import Content from './content.svelte';
 	import OnDelete from './on-delete.svelte';
 
@@ -15,32 +16,46 @@
 		size = 'medium',
 		variant = 'neutral',
 		wide = false,
+		class: className,
+		glass,
 		...attributes
 	}: PillProps = $props();
+
+	const nativeAttributes = $derived({
+		...attributes,
+		onclick: onClick,
+		role: onClick ? 'button' : attributes.role,
+		tabindex: onClick ? (attributes.tabindex ?? 0) : attributes.tabindex,
+		'aria-label': attributes['aria-labelledby']
+			? undefined
+			: (attributes['aria-label'] ?? (onClick ? label : undefined)),
+		onkeydown: onClick
+			? (event: KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement }) => {
+					attributes.onkeydown?.(event);
+					if (
+						!event.defaultPrevented &&
+						event.target === event.currentTarget &&
+						(event.key === 'Enter' || event.key === ' ')
+					) {
+						event.preventDefault();
+						if (!event.repeat) event.currentTarget.click();
+					}
+				}
+			: attributes.onkeydown
+	});
 </script>
 
-<!-- svelte-ignore a11y_no_noninteractive_tabindex (The button role and tab stop are enabled together.) -->
 <div
-	{...attributes}
-	onclick={onClick}
-	role={onClick ? 'button' : attributes.role}
-	tabindex={onClick ? (attributes.tabindex ?? 0) : attributes.tabindex}
-	aria-label={attributes['aria-labelledby']
-		? undefined
-		: (attributes['aria-label'] ?? (onClick ? label : undefined))}
-	onkeydown={onClick
-		? (event) => {
-				attributes.onkeydown?.(event);
-				if (
-					!event.defaultPrevented &&
-					event.target === event.currentTarget &&
-					(event.key === 'Enter' || event.key === ' ')
-				) {
-					event.preventDefault();
-					if (!event.repeat) event.currentTarget.click();
-				}
-			}
-		: attributes.onkeydown}
+	{...nativeAttributes}
+	class={[
+		surface({
+			color,
+			variant,
+			glass,
+			hover: onClick || onDelete ? 'small' : undefined
+		}),
+		className
+	]}
 	data-swoosh={swoosh || undefined}
 	data-clickable={onClick ? '' : undefined}
 	data-icon={icon ? '' : undefined}
@@ -48,85 +63,69 @@
 	data-color={color}
 	data-size={size}
 	data-variant={variant}
-	style:--pill-color={`var(--color-${color}, var(--color-foreground))`}
 	data-wide={wide}
 >
-	<Content {label} {icon} {size} />
+	<Content {label} {icon} />
 	{@render children?.()}
+	<!-- todo: the on delete should always be at right msot of the pill, content has to "fill the parent" -->
 	{#if onDelete}<OnDelete {label} {onDelete} />{/if}
 </div>
 
 <style>
 	div {
-		--pill-tint: 3%;
-		--pill-background: color-mix(
-			in srgb,
-			color-mix(in srgb, var(--pill-color) var(--pill-tint), var(--color-background, white)) 85%,
-			transparent
-		);
-		--pill-border: color-mix(in srgb, var(--pill-color) 20%, transparent);
-		--pill-highlight: color-mix(in srgb, var(--color-foreground, black) 16%, transparent);
-		--pill-content: var(--pill-color);
-		--pill-padding: 1.125rem;
-		--pill-height: 3rem;
+		--pill-glint: color-mix(in srgb, var(--color-foreground, black) 8%, transparent);
+		--pill-padding: 0.75rem;
+		--pill-height: 2rem;
+		--pill-icon-size: 1.125rem;
+		--pill-delete-size: 1.5rem;
 		box-sizing: border-box;
 		display: inline-flex;
 		position: relative;
 		isolation: isolate;
 		align-items: center;
-		gap: 0.5rem;
-		justify-content: center;
+		gap: 0.375rem;
+		justify-content: flex-start;
 		min-width: 0;
+		width: fit-content;
 		max-width: 100%;
 		min-height: var(--pill-height);
-		padding: 0.25rem var(--pill-padding);
-		border: 1px solid var(--pill-border);
+		padding: 0.125rem var(--pill-padding);
 		border-radius: 999px;
-		background: var(--pill-background);
-		box-shadow:
-			inset 0 1px 0 var(--pill-highlight),
-			0 2px 6px color-mix(in srgb, var(--color-foreground, black) 8%, transparent);
-		-webkit-backdrop-filter: blur(0.5rem) saturate(120%);
-		backdrop-filter: blur(0.5rem) saturate(120%);
-		transition: all 150ms;
-		color: var(--pill-content);
 		font: inherit;
 		line-height: 1.25;
-		text-align: center;
+		text-align: left;
 		white-space: normal;
 		overflow-wrap: anywhere;
 		overflow: hidden;
 		user-select: none;
 	}
 	div[data-size='x-small'] {
-		--pill-height: 1.75rem;
+		--pill-height: 1.5rem;
 		--pill-padding: 0.5rem;
-		font-size: 0.8rem;
+		--pill-icon-size: 0.875rem;
+		font-size: 0.8125rem;
 	}
 	div[data-size='small'] {
-		--pill-height: 2.5rem;
-		--pill-padding: 0.875rem;
+		--pill-height: 1.75rem;
+		--pill-padding: 0.625rem;
+		--pill-icon-size: 1rem;
+		font-size: 0.875rem;
 	}
 	div[data-size='large'] {
-		--pill-height: 4rem;
-		--pill-padding: 1.5rem;
-		font-size: 1.25rem;
+		--pill-height: 2.25rem;
+		--pill-padding: 0.875rem;
+		--pill-icon-size: 1.25rem;
+		--pill-delete-size: 1.75rem;
 	}
 	div[data-size='x-large'] {
-		--pill-height: 5rem;
-		--pill-padding: 2rem;
-		font-size: 1.5rem;
-	}
-	div[data-variant='soft'] {
-		--pill-tint: 16%;
-		--pill-border: color-mix(in srgb, var(--pill-color) 30%, transparent);
-		--pill-content: color-mix(in srgb, var(--pill-color) 80%, var(--color-foreground, black));
+		--pill-height: 2.5rem;
+		--pill-padding: 1rem;
+		--pill-icon-size: 1.375rem;
+		--pill-delete-size: 2rem;
+		font-size: 1.125rem;
 	}
 	div[data-variant='filled'] {
-		--pill-tint: 88%;
-		--pill-border: color-mix(in srgb, var(--pill-color) 68%, var(--color-foreground, black));
-		--pill-highlight: color-mix(in srgb, var(--color-foreground, black) 28%, transparent);
-		--pill-content: color-mix(in srgb, var(--color-background, white) 90%, var(--pill-color));
+		--pill-glint: color-mix(in srgb, var(--surface-color) 28%, transparent);
 	}
 	div[data-icon] {
 		padding-left: calc(var(--pill-padding) * 0.6);
@@ -134,12 +133,8 @@
 	div[data-removable] {
 		padding-right: calc(var(--pill-padding) / 2);
 	}
-	div[data-clickable] {
-		cursor: pointer;
-	}
-	div[data-clickable]:focus-visible {
-		outline: 2px solid var(--color-primary, currentColor);
-		outline-offset: 3px;
+	div[data-wide='true'] {
+		width: 100%;
 	}
 	div[data-swoosh]::before {
 		position: absolute;
@@ -148,21 +143,13 @@
 		inset-inline-start: -45%;
 		width: 40%;
 		content: '';
-		background: linear-gradient(
-			90deg,
-			transparent,
-			color-mix(in srgb, var(--pill-color) 28%, transparent),
-			transparent
-		);
+		background: linear-gradient(90deg, transparent, var(--pill-glint), transparent);
 		filter: blur(0.3rem);
 		opacity: 0;
 		pointer-events: none;
 		transform: skewX(-18deg);
 		animation: pill-swoosh 2s ease-in-out infinite;
 	}
-	div[data-wide='true'] {
-		width: 100%;
-	}
 	@keyframes pill-swoosh {
 		0%,
 		20% {
@@ -179,22 +166,15 @@
 			transform: translateX(400%) skewX(-18deg);
 		}
 	}
-	@media (prefers-reduced-motion: reduce) {
-		div {
-			transition: none;
+	@media (pointer: coarse) {
+		div[data-clickable] {
+			min-width: 44px;
+			min-height: 44px;
 		}
+	}
+	@media (prefers-reduced-motion: reduce) {
 		div[data-swoosh]::before {
 			animation: none;
 		}
 	}
-	@media (forced-colors: active) {
-		div {
-			border-color: CanvasText;
-			color: CanvasText;
-			background: Canvas;
-			box-shadow: none;
-			-webkit-backdrop-filter: none;
-			backdrop-filter: none;
-		}
-	}
 </style>

package/src/lib/pill/registry.json

@@ -2,5 +2,5 @@
 	"id": "pill",
 	"files": ["pill.svelte", "content.svelte", "on-delete.svelte"],
 	"exports": { "Pill": "pill.svelte" },
-	"dependencies": ["theme", "icon", "button"]
+	"dependencies": ["theme", "icon"]
 }

package/src/lib/pill/types.ts

@@ -19,4 +19,5 @@ export type PillProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color
 		onDelete?: () => void;
 		swoosh?: boolean;
 		wide?: boolean;
+		glass?: boolean;
 	};

package/src/lib/pill-choice-group/pill-choice-group.svelte

@@ -12,6 +12,7 @@
 		size = 'medium',
 		variant = 'neutral',
 		color = 'foreground',
+		glass,
 		animateSelected = false,
 		...attributes
 	}: PillChoiceGroupProps = $props();
@@ -80,6 +81,7 @@
 				label={item.label}
 				icon={item.icon}
 				{color}
+				{glass}
 				swoosh={selected && animateSelected}
 				variant={selected ? selectedVariant : variant}
 				{size}
@@ -110,6 +112,15 @@
 		clip-path: inset(50%);
 		overflow: hidden;
 	}
+	div:has(input:checked) {
+		--pill-choice-emphasis: 18%;
+	}
+	div:not([data-disabled]):is(:hover, :has(input:focus-visible)) {
+		--pill-choice-hover: 2%;
+	}
+	div:not([data-disabled]):active {
+		--pill-choice-hover: 4%;
+	}
 	div:has(input:focus-visible) {
 		outline: 2px solid var(--color-primary, currentColor);
 		outline-offset: 3px;
@@ -122,6 +133,14 @@
 		opacity: 0.45;
 		cursor: not-allowed;
 	}
+	@media (pointer: coarse) {
+		div {
+			display: inline-grid;
+			min-width: 44px;
+			min-height: 44px;
+			align-items: stretch;
+		}
+	}
 	@media (forced-colors: active) {
 		div:has(input:checked) {
 			outline: 2px solid Highlight;

package/src/lib/pill-choice-group/types.ts

@@ -10,5 +10,6 @@ export type PillChoiceGroupProps = Omit<HTMLAttributes<HTMLUListElement>, 'child
 	size?: Size;
 	variant?: Exclude<Variant, 'filled'>;
 	color?: PillProps['color'];
+	glass?: PillProps['glass'];
 	animateSelected?: boolean;
 };

package/src/lib/pill-group/pill-group.svelte

@@ -9,6 +9,7 @@
 		color = 'foreground',
 		size = 'medium',
 		variant = 'neutral',
+		glass,
 		...attributes
 	}: PillGroupProps = $props();
 </script>
@@ -21,6 +22,7 @@
 			{color}
 			{size}
 			{variant}
+			{glass}
 			onDelete={onDelete ? () => onDelete?.(item.id) : undefined}
 		/>
 	{/snippet}

package/src/lib/pill-group/types.ts

@@ -8,6 +8,7 @@ export type PillGroupProps = Omit<HTMLAttributes<HTMLUListElement>, 'children' |
 	color?: PillProps['color'];
 	size?: PillProps['size'];
 	variant?: PillProps['variant'];
+	glass?: PillProps['glass'];
 };
 export type PillGroupContainerProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> &
 	Pick<PillGroupProps, 'items' | 'size'> & {

package/src/lib/popover/popover.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { fly } from 'svelte/transition';
+	import { cubicOut } from 'svelte/easing';
 	import { prefersReducedMotion } from 'svelte/motion';
+	import type { TransitionConfig } from 'svelte/transition';
 	import Surface from '../surface/surface.svelte';
 	import type { PopoverProps } from './types.js';
+	import type { SurfaceProps } from '../surface/types.ts';
 
 	let {
 		trigger,
@@ -15,11 +17,27 @@
 	let anchor: HTMLDivElement;
 	let returnFocus: HTMLElement | null = null;
 
+	const flyGlass: (node: Element) => TransitionConfig = () => ({
+		duration: prefersReducedMotion.current ? 0 : 250,
+		easing: cubicOut,
+		css: (t: number, u: number) =>
+			`--surface-motion-offset: ${u * 10}px; --surface-motion-opacity: ${t}`
+	});
+
 	const showPopover = (node: HTMLDivElement) => {
 		if (node.matches(':popover-open')) return;
 		returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		node.showPopover({ source: anchor.firstElementChild as HTMLElement });
 	};
+
+	const surfacePropsWithDefaults: SurfaceProps = $derived({
+		variant: 'soft',
+		spacing: 'medium',
+		radius: 'small',
+		shadow: 'medium',
+		...surfaceProps,
+		glass: true
+	});
 </script>
 
 <div data-trigger bind:this={anchor}>
@@ -30,7 +48,8 @@
 		use:showPopover
 		{id}
 		popover="auto"
-		transition:fly={{ y: 10, duration: prefersReducedMotion.current ? 0 : 250 }}
+		data-width={surfaceProps.width}
+		transition:flyGlass
 		onintrostart={(event) => showPopover(event.currentTarget)}
 		onoutrostart={(event) => {
 			if (!event.currentTarget.matches(':popover-open')) return;
@@ -42,7 +61,7 @@
 				open = false;
 		}}
 	>
-		<Surface {...surfaceProps}>
+		<Surface {...surfacePropsWithDefaults} data-surface-motion>
 			<div data-content>{@render children()}</div>
 		</Surface>
 	</div>
@@ -59,17 +78,23 @@
 		inset: auto;
 		position-area: block-end;
 		position-try-fallbacks: flip-block;
-		width: anchor-size(width);
+		width: fit-content;
+		min-width: min(anchor-size(width), calc(100vw - 1rem));
 		max-width: calc(100vw - 1rem);
 		max-height: min(24rem, calc(100% - 0.75rem));
 		margin: 0.375rem 0;
 		padding: 0;
 		overflow: visible;
-		overflow-wrap: anywhere;
+		overflow-wrap: break-word;
 		border: 0;
 		background: transparent;
 		color: var(--color-foreground, black);
-		transition: all var(--internal-duration) allow-discrete;
+		transition:
+			display var(--internal-duration) allow-discrete,
+			overlay var(--internal-duration) allow-discrete;
+	}
+	div[popover][data-width='fill'] {
+		width: anchor-size(width);
 	}
 	div:popover-open {
 		display: flex;