bref-ui 0.3.1 → 2.0.0

package/dist/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/dist/combobox/input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxInputProps } from './types.js';
+declare const Input: import("svelte").Component<ComboboxInputProps, {}, "open" | "input" | "activeId">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/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/dist/combobox/list.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxListProps } from './types.js';
+declare const List: import("svelte").Component<ComboboxListProps, {}, "">;
+type List = ReturnType<typeof List>;
+export default List;

package/dist/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/dist/combobox/option.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxOptionProps } from './types.js';
+declare const Option: import("svelte").Component<ComboboxOptionProps, {}, "">;
+type Option = ReturnType<typeof Option>;
+export default Option;

package/dist/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"]
+}

package/dist/combobox/types.d.ts

@@ -0,0 +1,61 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { SelectProps, SelectOptionDataProps, SelectEmptyProps } from '../select/types.js';
+import type { Variant } from '../types.js';
+export type ComboboxNativeProps = Pick<HTMLInputAttributes, 'title' | 'autocomplete' | 'autofocus' | 'tabindex' | 'readonly' | 'name' | 'form' | 'required' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage' | 'oninput' | 'onkeydown' | 'onblur' | 'onfocus' | 'onclick' | 'oncompositionstart' | 'oncompositionend'>;
+export interface ComboboxProps extends SelectProps, ComboboxNativeProps {
+    wide?: boolean;
+    variant?: Exclude<Variant, 'filled'>;
+}
+export interface ComboboxInputProps {
+    attributes: ComboboxNativeProps;
+    id: string;
+    placeholder: string;
+    size: NonNullable<SelectProps['size']>;
+    disabled: boolean;
+    wide: boolean;
+    variant: NonNullable<ComboboxProps['variant']>;
+    display: string;
+    selected: readonly SelectOptionDataProps[];
+    editing: boolean;
+    results: readonly SelectOptionDataProps[];
+    listId: string;
+    open: boolean;
+    activeId?: string;
+    input?: HTMLInputElement;
+    onSearch: (query: string) => void;
+    onSelect: (id: string) => void;
+    onCancel: () => void;
+}
+export interface ComboboxListProps {
+    id: string;
+    items: readonly SelectOptionDataProps[];
+    selectedIds: readonly string[];
+    activeId?: string;
+    multiple: boolean;
+    size: NonNullable<SelectProps['size']>;
+    emptyMessage: SelectEmptyProps;
+    'aria-label'?: HTMLInputAttributes['aria-label'];
+    'aria-labelledby'?: HTMLInputAttributes['aria-labelledby'];
+    onSelect: (id: string) => void;
+}
+export interface ComboboxOptionProps {
+    id: string;
+    item: SelectOptionDataProps;
+    selected: boolean;
+    active: boolean;
+    onSelect: () => void;
+}
+export interface ComboboxFormProps {
+    items: readonly SelectOptionDataProps[];
+    selectedIds: readonly string[];
+    value?: string | string[];
+    name?: HTMLInputAttributes['name'];
+    form?: HTMLInputAttributes['form'];
+    required?: HTMLInputAttributes['required'];
+    disabled: boolean;
+    multiple: boolean;
+    placeholder: string;
+    input?: HTMLInputElement;
+    display: string;
+    onReset: () => void;
+}

package/dist/dialog/dialog.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	/* eslint-disable max-lines -- Keep the native dialog lifecycle and transition styles together. */
+	import { tick } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import { MediaQuery } from 'svelte/reactivity';
+	import Header from './header.svelte';
+	import Footer from './footer.svelte';
+	import type { DialogProps } from './types.js';
+
+	let {
+		open = $bindable(false),
+		header,
+		children,
+		footer,
+		dismissible = true,
+		size = 'medium',
+		onclose,
+		oncancel,
+		...attributes
+	}: DialogProps = $props();
+
+	let dialog: HTMLDialogElement;
+	let returnFocus: HTMLElement | null = null;
+	const id = $props.id();
+	const smallScreen = new MediaQuery('(max-width: 36rem)', false);
+	const effectiveSize = $derived(smallScreen.current ? 'full-screen' : size);
+
+	const showModal = (node: HTMLElement) => {
+		const modal = node.closest('dialog');
+		if (!modal || modal.open) return;
+		returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		modal.showModal();
+	};
+
+	const requestClose = () => {
+		if (dismissible) open = false;
+	};
+
+	const handleCancel = (event: Event & { currentTarget: EventTarget & HTMLDialogElement }) => {
+		oncancel?.(event);
+		const prevented = event.defaultPrevented;
+		event.preventDefault();
+		if (dismissible && !prevented) open = false;
+	};
+
+	const handleClose = (event: Event & { currentTarget: EventTarget & HTMLDialogElement }) => {
+		open = false;
+		onclose?.(event);
+		tick().then(() => {
+			if (open && dialog?.isConnected) {
+				showModal(dialog);
+				return;
+			}
+			if (returnFocus?.isConnected) returnFocus.focus();
+			returnFocus = null;
+		});
+	};
+</script>
+
+<dialog
+	bind:this={dialog}
+	{...attributes}
+	data-size={effectiveSize}
+	data-visible={open}
+	aria-labelledby={`${id}-title`}
+	aria-describedby={header.description ? `${id}-description` : undefined}
+	oncancel={handleCancel}
+	onclose={handleClose}
+>
+	{#if open}
+		<div
+			data-surface
+			use:showModal
+			transition:fly|global={{
+				y: prefersReducedMotion.current ? 0 : 16,
+				duration: prefersReducedMotion.current ? 0 : 300
+			}}
+			onoutroend={() => {
+				if (!open) dialog.close();
+			}}
+		>
+			<Header {...header} {dismissible} {id} onDismiss={requestClose} />
+			<div data-content>{@render children()}</div>
+			{#if footer}<Footer {footer} />{/if}
+		</div>
+	{/if}
+</dialog>
+
+<style>
+	dialog {
+		--internal-width: 42rem;
+		box-sizing: border-box;
+		width: min(calc(100% - 2rem), var(--internal-width));
+		max-width: var(--internal-width);
+		max-height: calc(100dvh - 2rem);
+		margin: auto;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		overflow: visible;
+	}
+	[data-surface] {
+		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);
+	}
+	dialog[open] {
+		display: flex;
+		flex-direction: column;
+	}
+	dialog[data-size='x-small'] {
+		--internal-width: 20rem;
+	}
+	dialog[data-size='small'] {
+		--internal-width: 28rem;
+	}
+	dialog[data-size='large'] {
+		--internal-width: 56rem;
+	}
+	dialog[data-size='x-large'] {
+		--internal-width: 72rem;
+	}
+	dialog::backdrop {
+		background: color-mix(in srgb, var(--color-foreground, black) 48%, transparent);
+		opacity: 0;
+		backdrop-filter: blur(0);
+		transition:
+			opacity 300ms ease,
+			backdrop-filter 300ms ease;
+	}
+	dialog[data-visible='true']::backdrop {
+		opacity: 1;
+		backdrop-filter: blur(0.25rem);
+	}
+	@starting-style {
+		dialog[data-visible='true']::backdrop {
+			opacity: 0;
+			backdrop-filter: blur(0);
+		}
+	}
+	[data-content] {
+		min-height: 0;
+		padding: 1.5rem;
+		overflow: auto;
+	}
+	dialog[data-size='full-screen'] {
+		inset: 0.5rem;
+		width: calc(100% - 1rem);
+		height: calc(100dvh - 1rem);
+		max-width: none;
+		max-height: calc(100dvh - 1rem);
+		margin: 0;
+	}
+	dialog[data-size='full-screen'] > [data-surface] {
+		box-sizing: border-box;
+		height: 100%;
+		max-height: 100%;
+	}
+	dialog[data-size='full-screen'] [data-content] {
+		flex: 1;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		dialog::backdrop {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		[data-surface] {
+			border-color: CanvasText;
+			box-shadow: none;
+		}
+		dialog::backdrop {
+			background: Canvas;
+		}
+	}
+</style>

package/dist/dialog/dialog.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogProps } from './types.js';
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/dialog/footer.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Button from '../button/button.svelte';
+	import type { DialogProps } from './types.js';
+
+	let { footer }: { footer: NonNullable<DialogProps['footer']> } = $props();
+</script>
+
+<footer>
+	{#if typeof footer === 'function'}
+		{@render footer()}
+	{:else}
+		<Button {...footer.secondary} size="small" variant="neutral" />
+		<Button {...footer.primary} size="small" variant="filled" />
+	{/if}
+</footer>
+
+<style>
+	footer {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		padding: 0.75rem 1.5rem 1.5rem;
+	}
+</style>

package/dist/dialog/footer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DialogProps } from './types.js';
+type $$ComponentProps = {
+    footer: NonNullable<DialogProps['footer']>;
+};
+declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/dialog/header.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import Button from '../button/button.svelte';
+	import Icon from '../icon/icon.svelte';
+	import type { DialogHeaderProps } from './types.js';
+
+	let { title, description, icon, dismissible, id, onDismiss }: DialogHeaderProps = $props();
+</script>
+
+<header>
+	<div>
+		<div data-title>
+			{#if icon}<Icon {...icon} size="medium" color="foreground" label={undefined} />{/if}
+			<h2 id={`${id}-title`}>{title}</h2>
+		</div>
+		{#if description}<p id={`${id}-description`}>{description}</p>{/if}
+	</div>
+	{#if dismissible}
+		<Button
+			rounded
+			icon={{ name: 'close', label: 'Close dialog' }}
+			size="small"
+			onClick={onDismiss}
+		/>
+	{/if}
+</header>
+
+<style>
+	header {
+		display: flex;
+		align-items: flex-start;
+		gap: 1rem;
+		padding: 1.5rem 1.5rem 0;
+	}
+	header > div {
+		flex: 1;
+		min-width: 0;
+	}
+	[data-title] {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		min-height: 2.5rem;
+	}
+	h2 {
+		margin: 0;
+		font: inherit;
+		font-size: 1.375rem;
+		font-weight: 600;
+		line-height: 1.4;
+	}
+	p {
+		margin: 0.5rem 0 0;
+		color: var(--color-muted, #555);
+		line-height: 1.5;
+	}
+</style>

package/dist/dialog/header.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DialogHeaderProps } from './types.js';
+declare const Header: import("svelte").Component<DialogHeaderProps, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;

package/dist/dialog/registry.json

@@ -0,0 +1,6 @@
+{
+	"id": "dialog",
+	"files": ["dialog.svelte", "header.svelte", "footer.svelte"],
+	"exports": { "Dialog": "dialog.svelte" },
+	"dependencies": ["theme", "button", "icon"]
+}

package/dist/dialog/types.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDialogAttributes } from 'svelte/elements';
+import type { ButtonProps, IconProps, Size, StatusColor } from '../types.js';
+export interface DialogHeaderDataProps {
+    title: string;
+    description?: string;
+    icon?: Omit<IconProps, 'label' | 'size' | 'color'>;
+}
+export interface DialogHeaderProps extends DialogHeaderDataProps {
+    id: string;
+    dismissible: boolean;
+    onDismiss: () => void;
+}
+export type DialogActionProps = Pick<Extract<ButtonProps, {
+    label: string;
+    href?: never;
+}>, 'label' | 'icon' | 'disabled'> & {
+    onClick: (event: MouseEvent) => void;
+    color?: StatusColor;
+};
+export type DialogProps = Omit<HTMLDialogAttributes, 'open' | 'children' | 'aria-labelledby' | 'aria-describedby'> & {
+    open?: boolean;
+    header: DialogHeaderDataProps;
+    children: Snippet;
+    footer?: Snippet | {
+        primary: DialogActionProps;
+        secondary: DialogActionProps;
+    };
+    dismissible?: boolean;
+    size?: Size | 'full-screen';
+};