bref-ui 0.3.0 → 2.0.0

package/src/lib/checkbox/checkbox.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+	import Icon from '../icon/icon.svelte';
+	import type { CheckboxProps } from './types.js';
+
+	let { size = 'medium', checked = $bindable(), ...attributes }: CheckboxProps = $props();
+</script>
+
+<div data-checkbox data-size={size}>
+	<input {...attributes} type="checkbox" bind:checked />
+	{#if checked}
+		<span aria-hidden="true" transition:fly|global={{ duration: 350, y: -6, easing: elasticOut }}>
+			<Icon name="check" style="font-variation-settings: 'wght' 500" />
+		</span>
+	{/if}
+</div>
+
+<style>
+	div {
+		--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-highlight: color-mix(in srgb, var(--color-foreground, black) 12%, transparent);
+		box-sizing: border-box;
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 auto;
+		inline-size: var(--internal-size);
+		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);
+		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%);
+	}
+	input {
+		position: absolute;
+		z-index: 1;
+		inset: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+	span {
+		display: inline-flex;
+		pointer-events: none;
+	}
+	div[data-size='x-small'] {
+		--internal-size: 0.875rem;
+	}
+	div[data-size='small'] {
+		--internal-size: 1rem;
+	}
+	div[data-size='large'] {
+		--internal-size: 1.5rem;
+	}
+	div[data-size='x-large'] {
+		--internal-size: 1.75rem;
+	}
+	div:has(input:hover:not(:disabled):not(:checked)) {
+		--internal-strength-light: 6%;
+		--internal-strength-dark: 20%;
+	}
+	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));
+	}
+	div:has(input:checked:hover:not(:disabled)) {
+		--internal-strength-light: 92%;
+		--internal-strength-dark: 92%;
+	}
+	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);
+	}
+	div:has(input:disabled) {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	input:disabled {
+		cursor: inherit;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		div {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		div {
+			border-color: ButtonText;
+			background: Canvas;
+			color: CanvasText;
+			box-shadow: none;
+			-webkit-backdrop-filter: none;
+			backdrop-filter: none;
+		}
+		div:has(input:checked) {
+			background: Highlight;
+			color: HighlightText;
+		}
+		div:has(input:focus-visible) {
+			outline: 2px solid Highlight;
+			outline-offset: 3px;
+		}
+	}
+</style>

package/src/lib/checkbox/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "checkbox",
+	"files": ["checkbox.svelte", "types.ts"],
+	"exports": { "Checkbox": "checkbox.svelte" },
+	"dependencies": ["icon"]
+}

package/src/lib/checkbox/types.ts

@@ -0,0 +1,7 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { Size } from '../types.js';
+
+export type CheckboxProps = Omit<HTMLInputAttributes, 'type' | 'size' | 'checked'> & {
+	size?: Size;
+	checked?: boolean;
+};

package/src/lib/combobox/combobox.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import Popover from '../popover/popover.svelte';
+	import Input from './input.svelte';
+	import List from './list.svelte';
+	import Form from './form.svelte';
+	import type { ComboboxProps } from './types.js';
+
+	const generatedId = $props.id();
+	let {
+		items,
+		value = $bindable(),
+		onChange,
+		id = generatedId,
+		placeholder = 'Select…',
+		size = 'medium',
+		disabled = false,
+		wide = false,
+		variant = 'soft',
+		emptyMessage = { message: 'No options found' },
+		...attributes
+	}: ComboboxProps = $props();
+	const listId = `${generatedId}-options`;
+	const initialValue = Array.isArray(value) ? [...value] : value;
+	let query = $state('');
+	let editing = $state(false);
+	let open = $state(false);
+	let activeId = $state<string>();
+	let input = $state<HTMLInputElement>();
+	const selectedIds = $derived(Array.isArray(value) ? value : value === undefined ? [] : [value]);
+	const multiple = $derived(Array.isArray(value));
+	const selected = $derived(items.filter((item) => selectedIds.includes(item.id)));
+	const results = $derived(
+		editing
+			? items.filter((item) =>
+					item.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())
+				)
+			: items
+	);
+	const display = $derived(editing ? query : selected.map((item) => item.label).join(', '));
+
+	const cancel = () => {
+		open = false;
+		query = '';
+		editing = false;
+		activeId = undefined;
+	};
+	const setOpen = (next: boolean) => {
+		if (next) open = true;
+		else cancel();
+	};
+	$effect(() => {
+		if (activeId && !results.some((item) => item.id === activeId && !item.disabled))
+			activeId = undefined;
+	});
+	const search = (next: string) => {
+		if (disabled || attributes.readonly) return;
+		query = next;
+		editing = true;
+		activeId = undefined;
+		open = true;
+	};
+	const commit = (id: string) => {
+		if (
+			disabled ||
+			attributes.readonly ||
+			!results.some((item) => item.id === id && !item.disabled)
+		)
+			return;
+		const next = multiple
+			? selectedIds.includes(id)
+				? selectedIds.filter((selectedId) => selectedId !== id)
+				: [...selectedIds, id]
+			: id;
+		if (Array.isArray(next) || next !== value) {
+			value = next;
+			onChange?.(next);
+		}
+		if (!multiple) cancel();
+		input?.focus({ preventScroll: true });
+	};
+	const reset = () => {
+		value = Array.isArray(initialValue) ? [...initialValue] : initialValue;
+		cancel();
+	};
+</script>
+
+<div
+	onfocusout={(event) => {
+		if (!event.currentTarget.contains(event.relatedTarget as Node | null)) cancel();
+	}}
+>
+	<Popover
+		bind:open={() => open, setOpen}
+		variant="filled"
+		spacing="small"
+		radius="small"
+		shadow
+		scroll
+		disabled={disabled || !!attributes.readonly}
+	>
+		{#snippet trigger()}
+			<Input
+				{attributes}
+				{id}
+				{placeholder}
+				{size}
+				{disabled}
+				{wide}
+				{variant}
+				{display}
+				{selected}
+				{editing}
+				{results}
+				{listId}
+				bind:open
+				bind:activeId
+				bind:input
+				onSearch={search}
+				onSelect={commit}
+				onCancel={cancel}
+			/>
+		{/snippet}
+		<List
+			id={listId}
+			items={results}
+			{selectedIds}
+			{activeId}
+			{multiple}
+			{size}
+			{emptyMessage}
+			aria-label={attributes['aria-label']}
+			aria-labelledby={attributes['aria-labelledby']}
+			onSelect={commit}
+		/>
+	</Popover>
+	<Form
+		{items}
+		{selectedIds}
+		{value}
+		{multiple}
+		{disabled}
+		{placeholder}
+		{input}
+		{display}
+		name={attributes.name}
+		form={attributes.form}
+		required={attributes.required}
+		onReset={reset}
+	/>
+</div>
+
+<style>
+	div {
+		display: contents;
+	}
+</style>

package/src/lib/combobox/form.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { onMount, tick } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import type { ComboboxFormProps } from './types.js';
+
+	let {
+		items,
+		selectedIds,
+		value,
+		name,
+		form,
+		required,
+		disabled,
+		multiple,
+		placeholder,
+		input,
+		display,
+		onReset
+	}: ComboboxFormProps = $props();
+	let select: HTMLSelectElement;
+	onMount(() => {
+		const owner = select.form;
+		const timers = new SvelteSet<ReturnType<typeof setTimeout>>();
+		const reset = (event: Event) => {
+			const timer = setTimeout(async () => {
+				timers.delete(timer);
+				if (!event.defaultPrevented) onReset();
+				await tick();
+				if (input) input.value = display;
+			}, 0);
+			timers.add(timer);
+		};
+		owner?.addEventListener('reset', reset);
+		return () => {
+			for (const timer of timers) clearTimeout(timer);
+			owner?.removeEventListener('reset', reset);
+		};
+	});
+</script>
+
+<select
+	bind:this={select}
+	hidden
+	{name}
+	{form}
+	{required}
+	{disabled}
+	{multiple}
+	tabindex={-1}
+	oninvalid={(event) => {
+		event.preventDefault();
+		input?.focus();
+	}}
+>
+	{#if !multiple}<option value="" selected={value === undefined}>{placeholder}</option>{/if}
+	{#each items as item (item.id)}
+		<option value={item.id} selected={selectedIds.includes(item.id)} disabled={item.disabled}>
+			{item.label}
+		</option>
+	{/each}
+</select>

package/src/lib/combobox/input.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { createAttachmentKey } from 'svelte/attachments';
+	import TextInput from '../text-input/text-input.svelte';
+	import type { ComboboxInputProps } from './types.js';
+
+	let {
+		attributes,
+		id,
+		placeholder,
+		size,
+		disabled,
+		wide,
+		variant,
+		display,
+		selected,
+		editing,
+		results,
+		listId,
+		open = $bindable(),
+		activeId = $bindable(),
+		input = $bindable(),
+		onSearch,
+		onSelect,
+		onCancel
+	}: ComboboxInputProps = $props();
+	const attachmentKey = createAttachmentKey();
+	const attachment = {
+		[attachmentKey]: (element: HTMLInputElement) => {
+			input = element;
+			return () => {
+				if (input === element) input = undefined;
+			};
+		}
+	};
+	const native = $derived({ ...attributes, name: undefined, form: undefined, required: undefined });
+	const activeIndex = $derived(results.findIndex((item) => item.id === activeId && !item.disabled));
+	let composing = false;
+	let pointing = false;
+
+	const show = () => {
+		if (!disabled && !attributes.readonly) open = true;
+	};
+	const move = (step: number) => {
+		const enabled = results.filter((item) => !item.disabled);
+		if (!enabled.length) return;
+		const index = enabled.findIndex((item) => item.id === activeId);
+		activeId =
+			enabled[
+				index < 0
+					? step > 0
+						? 0
+						: enabled.length - 1
+					: (index + step + enabled.length) % enabled.length
+			].id;
+	};
+	const keydown = (event: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) => {
+		if (!disabled && !attributes.readonly && !event.isComposing && !composing)
+			if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+				event.preventDefault();
+				show();
+				move(event.key === 'ArrowDown' ? 1 : -1);
+			} else if ((event.key === 'Home' || event.key === 'End') && open) {
+				event.preventDefault();
+				const enabled = results.filter((item) => !item.disabled);
+				activeId = enabled[event.key === 'Home' ? 0 : enabled.length - 1]?.id;
+			} else if (event.key === 'Enter' && open && activeId) {
+				event.preventDefault();
+				onSelect(activeId);
+			} else if (event.key === 'Escape' && (open || editing)) {
+				event.preventDefault();
+				onCancel();
+			}
+
+		attributes.onkeydown?.(event);
+	};
+</script>
+
+<TextInput
+	{...native}
+	{...attachment}
+	{id}
+	{placeholder}
+	{disabled}
+	{size}
+	{variant}
+	{wide}
+	icon={editing
+		? undefined
+		: selected.length === 1 && selected[0].icon
+			? { ...selected[0].icon }
+			: undefined}
+	value={display}
+	role="combobox"
+	aria-autocomplete="list"
+	aria-haspopup="listbox"
+	aria-controls={listId}
+	aria-expanded={open}
+	aria-activedescendant={open && activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined}
+	aria-required={attributes.required || undefined}
+	onChange={onSearch}
+	onkeydown={keydown}
+	onpointerdown={() => (pointing = true)}
+	onpointerup={() => (pointing = false)}
+	onpointercancel={() => (pointing = false)}
+	onfocus={(event) => {
+		if (
+			!pointing &&
+			!(
+				event.relatedTarget instanceof Node &&
+				document.getElementById(listId)?.closest('[popover]')?.contains(event.relatedTarget)
+			)
+		)
+			show();
+		attributes.onfocus?.(event);
+	}}
+	onclick={(event) => {
+		event.preventDefault();
+		// Native light dismissal can precede the queued toggle update.
+		open = false;
+		show();
+		attributes.onclick?.(event);
+	}}
+	onblur={attributes.onblur}
+	oncompositionstart={(event) => {
+		composing = true;
+		attributes.oncompositionstart?.(event);
+	}}
+	oncompositionend={(event) => {
+		composing = false;
+		attributes.oncompositionend?.(event);
+	}}
+/>

package/src/lib/combobox/list.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import Icon from '../icon/icon.svelte';
+	import Option from './option.svelte';
+	import type { ComboboxListProps } from './types.js';
+
+	let {
+		id,
+		items,
+		selectedIds,
+		activeId,
+		multiple,
+		size,
+		emptyMessage,
+		'aria-label': ariaLabel,
+		'aria-labelledby': ariaLabelledby,
+		onSelect
+	}: ComboboxListProps = $props();
+	let list: HTMLDivElement;
+	$effect(() => {
+		const index = items.findIndex((item) => item.id === activeId);
+		if (index >= 0)
+			void tick().then(() =>
+				list
+					?.querySelector(`#${CSS.escape(`${id}-${index}`)}`)
+					?.scrollIntoView({ block: 'nearest' })
+			);
+	});
+</script>
+
+<div
+	bind:this={list}
+	{id}
+	role="listbox"
+	data-size={size}
+	aria-multiselectable={multiple || undefined}
+	aria-label={ariaLabel}
+	aria-labelledby={ariaLabelledby}
+>
+	{#each items as item, index (item.id)}
+		<Option
+			id={`${id}-${index}`}
+			{item}
+			selected={selectedIds.includes(item.id)}
+			active={item.id === activeId}
+			onSelect={() => onSelect(item.id)}
+		/>
+	{:else}
+		<p>
+			{#if emptyMessage.icon}<Icon {...emptyMessage.icon} />{/if}{emptyMessage.message}
+		</p>
+	{/each}
+</div>
+
+<style>
+	div {
+		--internal-height: 2.5rem;
+		--internal-icon-size: 1.25rem;
+		display: grid;
+		gap: 0.375rem;
+	}
+	div[data-size='small'] {
+		--internal-height: 2rem;
+		--internal-icon-size: 1rem;
+	}
+	div[data-size='large'] {
+		--internal-height: 3rem;
+		--internal-icon-size: 1.5rem;
+	}
+	p {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		margin: 0;
+		padding-block: 0.5rem;
+		color: var(--color-muted);
+	}
+</style>

package/src/lib/combobox/option.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import Icon from '../icon/icon.svelte';
+	import type { ComboboxOptionProps } from './types.js';
+
+	let { id, item, selected, active, onSelect }: ComboboxOptionProps = $props();
+</script>
+
+<button
+	{id}
+	type="button"
+	role="option"
+	tabindex={-1}
+	aria-selected={selected}
+	data-active={active || undefined}
+	disabled={item.disabled}
+	onmousedown={(event) => event.preventDefault()}
+	onclick={onSelect}
+>
+	{#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}
+</button>
+
+<style>
+	button {
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		width: 100%;
+		min-height: var(--internal-height);
+		padding: 0.375rem 0.65rem;
+		border: 0;
+		border-radius: 0.4rem;
+		background: transparent;
+		color: var(--color-foreground);
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+	}
+	[data-label] {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	[data-icon] {
+		display: inline-flex;
+		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);
+		color: var(--color-primary);
+	}
+	button[data-active],
+	button:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	@media (forced-colors: active) {
+		button[data-active],
+		button:focus-visible {
+			outline-color: Highlight;
+		}
+		button[aria-selected='true'] {
+			outline: 1px solid Highlight;
+		}
+	}
+</style>

package/src/lib/combobox/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "combobox",
+	"files": ["combobox.svelte", "input.svelte", "list.svelte", "option.svelte", "form.svelte"],
+	"exports": { "Combobox": "combobox.svelte" },
+	"dependencies": ["text-input", "popover", "icon"]
+}