bref-ui 2.0.0 → 2.1.0

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

@@ -26,6 +26,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'> & (TextButtonProps | IconButtonProps) & (HrefButtonProps | ClickButtonProps);

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

package/dist/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/dist/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/dist/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/dist/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/dist/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/dist/pill/content.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { PillProps } from './types.js';
-declare const Content: import("svelte").Component<Pick<PillProps, "size" | "label" | "icon">, {}, "">;
+declare const Content: import("svelte").Component<Pick<PillProps, "label" | "icon">, {}, "">;
 type Content = ReturnType<typeof Content>;
 export default Content;

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