bref-ui 0.3.0 → 2.0.0

package/src/lib/icon/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "icon",
+	"files": ["icon.svelte"],
+	"exports": { "Icon": "icon.svelte" },
+	"dependencies": ["theme"]
+}

package/src/lib/icon/types.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Color, Size } from '../types.js';
+import type { IconName } from './names.js';
+
+export type { IconName } from './names.js';
+
+export interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
+	/** Material Symbols identifier. */
+	name: IconName;
+	/** Use the filled glyph variant. */
+	filled?: boolean;
+	/** Accessible name; omit for decorative icons. */
+	label?: string;
+	/** Omitted sizes inherit the surrounding font size. */
+	size?: Size;
+	/** Omitted colors inherit the surrounding text color. */
+	color?: Color;
+}

package/src/lib/index.ts

@@ -0,0 +1,20 @@
+export { default as Button } from './button/button.svelte';
+export { default as Combobox } from './combobox/combobox.svelte';
+export { default as Icon } from './icon/icon.svelte';
+export { default as Surface } from './surface/surface.svelte';
+export { surface } from './theme/surface.js';
+export { default as Theme } from './theme/theme.svelte';
+export { default as ThemeModeToggle } from './theme/theme-mode-toggle.svelte';
+export { default as Checkbox } from './checkbox/checkbox.svelte';
+export { default as Switch } from './switch/switch.svelte';
+export { default as Progress } from './progress/progress.svelte';
+export { default as Spinner } from './spinner/spinner.svelte';
+export { default as Dialog } from './dialog/dialog.svelte';
+export { default as Popover } from './popover/popover.svelte';
+export { default as TextInput } from './text-input/text-input.svelte';
+export { default as TextArea } from './text-area/text-area.svelte';
+export { default as TreeView } from './tree-view/tree-view.svelte';
+export { default as Pill } from './pill/pill.svelte';
+export { default as PillGroup } from './pill-group/pill-group.svelte';
+export { default as PillChoiceGroup } from './pill-choice-group/pill-choice-group.svelte';
+export { default as Select } from './select/select.svelte';

package/src/lib/pill/content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import Icon from '../icon/icon.svelte';
+	import type { PillProps } from './types.js';
+
+	let { label, icon, size }: Pick<PillProps, 'label' | 'icon' | 'size'> = $props();
+</script>
+
+{#if icon}
+	{#key icon.name}
+		<span data-icon in:fly>
+			<Icon {...icon} label={undefined} {size} color={undefined} />
+		</span>
+	{/key}
+{/if}
+<span>{label}</span>
+
+<style>
+	[data-icon] {
+		display: inline-flex;
+		align-items: center;
+	}
+</style>

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

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Button from '../button/button.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>
+
+<style>
+	[data-delete] {
+		position: relative;
+		z-index: 1;
+		display: inline-flex;
+	}
+</style>

package/src/lib/pill/pill.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+	/* eslint-disable max-lines -- Component recipe and animation remain colocated. */
+	import type { PillProps } from './types.js';
+	import Content from './content.svelte';
+	import OnDelete from './on-delete.svelte';
+
+	let {
+		children,
+		label,
+		icon,
+		onClick,
+		onDelete,
+		swoosh = false,
+		color = 'foreground',
+		size = 'medium',
+		variant = 'neutral',
+		wide = false,
+		...attributes
+	}: PillProps = $props();
+</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}
+	data-swoosh={swoosh || undefined}
+	data-clickable={onClick ? '' : undefined}
+	data-icon={icon ? '' : undefined}
+	data-removable={onDelete ? '' : undefined}
+	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} />
+	{@render children?.()}
+	{#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;
+		box-sizing: border-box;
+		display: inline-flex;
+		position: relative;
+		isolation: isolate;
+		align-items: center;
+		gap: 0.5rem;
+		justify-content: center;
+		min-width: 0;
+		max-width: 100%;
+		min-height: var(--pill-height);
+		padding: 0.25rem var(--pill-padding);
+		border: 1px solid var(--pill-border);
+		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;
+		white-space: normal;
+		overflow-wrap: anywhere;
+		overflow: hidden;
+		user-select: none;
+	}
+	div[data-size='x-small'] {
+		--pill-height: 1.75rem;
+		--pill-padding: 0.5rem;
+		font-size: 0.8rem;
+	}
+	div[data-size='small'] {
+		--pill-height: 2.5rem;
+		--pill-padding: 0.875rem;
+	}
+	div[data-size='large'] {
+		--pill-height: 4rem;
+		--pill-padding: 1.5rem;
+		font-size: 1.25rem;
+	}
+	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));
+	}
+	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));
+	}
+	div[data-icon] {
+		padding-left: calc(var(--pill-padding) * 0.6);
+	}
+	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-swoosh]::before {
+		position: absolute;
+		z-index: -1;
+		inset-block: -50%;
+		inset-inline-start: -45%;
+		width: 40%;
+		content: '';
+		background: linear-gradient(
+			90deg,
+			transparent,
+			color-mix(in srgb, var(--pill-color) 28%, transparent),
+			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% {
+			opacity: 0;
+			transform: translateX(0) skewX(-18deg);
+		}
+		45%,
+		60% {
+			opacity: 0.75;
+		}
+		80%,
+		100% {
+			opacity: 0;
+			transform: translateX(400%) skewX(-18deg);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		div {
+			transition: none;
+		}
+		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

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

package/src/lib/pill/types.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Color, Size, Variant } from '../types.js';
+import type { IconProps } from '../icon/types.js';
+
+export interface PillDataProps {
+	id: string;
+	label: string;
+	icon?: Omit<IconProps, 'label' | 'size' | 'color'>;
+}
+
+export type PillProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color' | 'onclick'> &
+	Pick<PillDataProps, 'label' | 'icon'> & {
+		children?: Snippet;
+		color?: Exclude<Color, 'background'>;
+		size?: Size;
+		variant?: Variant;
+		onClick?: (event: MouseEvent) => void;
+		onDelete?: () => void;
+		swoosh?: boolean;
+		wide?: boolean;
+	};

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

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import Pill from '../pill/pill.svelte';
+	import Container from '../pill-group/container.svelte';
+	import type { PillChoiceGroupProps } from './types.js';
+
+	let {
+		items,
+		onDelete,
+		selection = $bindable(),
+		disabled = false,
+		size = 'medium',
+		variant = 'neutral',
+		color = 'foreground',
+		animateSelected = false,
+		...attributes
+	}: PillChoiceGroupProps = $props();
+
+	const radioName = $props.id();
+	const multiple = $derived(Array.isArray(selection));
+
+	const initialSelection = untrack(() => (Array.isArray(selection) ? [...selection] : selection));
+
+	const attachReset = (element: HTMLUListElement) => {
+		const form = element.closest('form');
+		if (!form) return;
+		let timer: ReturnType<typeof setTimeout>;
+		const reset = (event: Event) => {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				if (event.defaultPrevented) return;
+				selection = Array.isArray(initialSelection) ? [...initialSelection] : initialSelection;
+				element.querySelectorAll('input').forEach((input) => {
+					input.checked = Array.isArray(initialSelection)
+						? initialSelection.includes(input.value)
+						: input.value === initialSelection;
+				});
+			}, 0);
+		};
+		form.addEventListener('reset', reset);
+		return () => {
+			clearTimeout(timer);
+			form.removeEventListener('reset', reset);
+		};
+	};
+
+	const select = (id: string, checked: boolean) => {
+		if (disabled) return;
+		selection = Array.isArray(selection)
+			? checked
+				? [...selection.filter((selected) => selected !== id), id]
+				: selection.filter((selected) => selected !== id)
+			: id;
+	};
+
+	const selectedVariant = $derived(variant === 'soft' ? 'filled' : 'soft');
+</script>
+
+<Container
+	{@attach attachReset}
+	{...attributes}
+	{items}
+	{size}
+	role={multiple ? 'group' : 'radiogroup'}
+>
+	{#snippet renderItem(item)}
+		{@const selected = multiple ? (selection as string[]).includes(item.id) : selection === item.id}
+		<div data-disabled={disabled || undefined}>
+			<input
+				id={`${radioName}-${item.id}`}
+				aria-label={item.label}
+				type={multiple ? 'checkbox' : 'radio'}
+				name={multiple ? undefined : radioName}
+				value={item.id}
+				checked={selected}
+				{disabled}
+				onchange={(event) => select(item.id, event.currentTarget.checked)}
+			/>
+			<Pill
+				label={item.label}
+				icon={item.icon}
+				{color}
+				swoosh={selected && animateSelected}
+				variant={selected ? selectedVariant : variant}
+				{size}
+				onDelete={onDelete && !disabled ? () => onDelete?.(item.id) : undefined}
+			>
+				<label for={`${radioName}-${item.id}`}></label>
+			</Pill>
+		</div>
+	{/snippet}
+</Container>
+
+<style>
+	div {
+		display: inline-flex;
+		max-width: 100%;
+		min-width: 0;
+	}
+	label {
+		position: absolute;
+		inset: 0;
+		cursor: pointer;
+	}
+	input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		clip-path: inset(50%);
+		overflow: hidden;
+	}
+	div:has(input:focus-visible) {
+		outline: 2px solid var(--color-primary, currentColor);
+		outline-offset: 3px;
+		border-radius: 999px;
+	}
+	div[data-disabled] label {
+		pointer-events: none;
+	}
+	div[data-disabled] {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	@media (forced-colors: active) {
+		div:has(input:checked) {
+			outline: 2px solid Highlight;
+			border-radius: 999px;
+		}
+	}
+</style>

package/src/lib/pill-choice-group/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "pill-choice-group",
+	"files": ["pill-choice-group.svelte"],
+	"exports": { "PillChoiceGroup": "pill-choice-group.svelte" },
+	"dependencies": ["pill-group"]
+}

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

@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Size, Variant } from '../types.js';
+import type { PillDataProps, PillProps } from '../pill/types.js';
+
+export type PillChoiceGroupProps = Omit<HTMLAttributes<HTMLUListElement>, 'children' | 'color'> & {
+	items: readonly PillDataProps[];
+	onDelete?: (id: string) => void;
+	selection: string | string[];
+	disabled?: boolean;
+	size?: Size;
+	variant?: Exclude<Variant, 'filled'>;
+	color?: PillProps['color'];
+	animateSelected?: boolean;
+};

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

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { PillGroupContainerProps } from './types.ts';
+
+	let { items, renderItem, size = 'medium', ...attributes }: PillGroupContainerProps = $props();
+</script>
+
+<ul {...attributes} data-size={size}>
+	{#each items as item (item.id)}
+		<li>{@render renderItem(item)}</li>
+	{/each}
+</ul>
+
+<style>
+	ul {
+		--pill-group-gap: 0.5rem;
+		list-style: none;
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--pill-group-gap);
+		margin: 0;
+		padding: 0;
+	}
+	ul[data-size='x-small'] {
+		--pill-group-gap: 0.25rem;
+	}
+	ul[data-size='small'] {
+		--pill-group-gap: 0.375rem;
+	}
+	ul[data-size='large'] {
+		--pill-group-gap: 0.75rem;
+	}
+	ul[data-size='x-large'] {
+		--pill-group-gap: 1rem;
+	}
+	li {
+		display: inline-flex;
+		max-width: 100%;
+		min-width: 0;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Pill from '../pill/pill.svelte';
+	import Container from './container.svelte';
+	import type { PillGroupProps } from './types.js';
+
+	let {
+		items,
+		onDelete,
+		color = 'foreground',
+		size = 'medium',
+		variant = 'neutral',
+		...attributes
+	}: PillGroupProps = $props();
+</script>
+
+<Container {...attributes} {items} {size}>
+	{#snippet renderItem(item)}
+		<Pill
+			label={item.label}
+			icon={item.icon}
+			{color}
+			{size}
+			{variant}
+			onDelete={onDelete ? () => onDelete?.(item.id) : undefined}
+		/>
+	{/snippet}
+</Container>

package/src/lib/pill-group/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "pill-group",
+	"files": ["pill-group.svelte", "container.svelte", "types.ts"],
+	"exports": { "PillGroup": "pill-group.svelte" },
+	"dependencies": ["pill"]
+}

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

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { PillDataProps, PillProps } from '../pill/types.js';
+import type { Snippet } from 'svelte';
+
+export type PillGroupProps = Omit<HTMLAttributes<HTMLUListElement>, 'children' | 'color'> & {
+	items: readonly PillDataProps[];
+	onDelete?: (id: string) => void;
+	color?: PillProps['color'];
+	size?: PillProps['size'];
+	variant?: PillProps['variant'];
+};
+export type PillGroupContainerProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> &
+	Pick<PillGroupProps, 'items' | 'size'> & {
+		renderItem: Snippet<[PillDataProps]>;
+	};

package/src/lib/popover/popover.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import Surface from '../surface/surface.svelte';
+	import type { PopoverProps } from './types.js';
+
+	let {
+		trigger,
+		children,
+		open = $bindable(false),
+		disabled = false,
+		...surfaceProps
+	}: PopoverProps = $props();
+	const id = $props.id();
+	let anchor: HTMLDivElement;
+	let returnFocus: HTMLElement | null = null;
+
+	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 });
+	};
+</script>
+
+<div data-trigger bind:this={anchor}>
+	{@render trigger()}
+</div>
+{#if open && !disabled}
+	<div
+		use:showPopover
+		{id}
+		popover="auto"
+		transition:fly={{ y: 10, duration: prefersReducedMotion.current ? 0 : 250 }}
+		onintrostart={(event) => showPopover(event.currentTarget)}
+		onoutrostart={(event) => {
+			if (!event.currentTarget.matches(':popover-open')) return;
+			if (document.activeElement === document.body && returnFocus?.isConnected) returnFocus.focus();
+			event.currentTarget.hidePopover();
+		}}
+		ontoggle={(event) => {
+			if (event.newState === 'closed' && !event.currentTarget.matches(':popover-open'))
+				open = false;
+		}}
+	>
+		<Surface {...surfaceProps}>
+			<div data-content>{@render children()}</div>
+		</Surface>
+	</div>
+{/if}
+
+<style>
+	div[data-trigger] {
+		display: contents;
+	}
+	div[popover] {
+		--internal-duration: 250ms;
+		box-sizing: border-box;
+		position: fixed;
+		inset: auto;
+		position-area: block-end;
+		position-try-fallbacks: flip-block;
+		width: anchor-size(width);
+		max-width: calc(100vw - 1rem);
+		max-height: min(24rem, calc(100% - 0.75rem));
+		margin: 0.375rem 0;
+		padding: 0;
+		overflow: visible;
+		overflow-wrap: anywhere;
+		border: 0;
+		background: transparent;
+		color: var(--color-foreground, black);
+		transition: all var(--internal-duration) allow-discrete;
+	}
+	div:popover-open {
+		display: flex;
+	}
+	div[data-content] {
+		flex: none;
+		min-width: 0;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		div[popover] {
+			transition: none;
+		}
+	}
+</style>

package/src/lib/popover/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "popover",
+	"files": ["popover.svelte"],
+	"exports": { "Popover": "popover.svelte" },
+	"dependencies": ["surface", "theme"]
+}

package/src/lib/popover/types.ts

@@ -0,0 +1,9 @@
+import type { SurfaceProps } from '../surface/types.ts';
+import type { Snippet } from 'svelte';
+
+export interface PopoverProps extends SurfaceProps {
+	trigger: Snippet;
+	children: Snippet;
+	open?: boolean;
+	disabled?: boolean;
+}