bref-ui 0.3.0 → 2.0.0

package/src/lib/combobox/types.ts

@@ -0,0 +1,89 @@
+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/src/lib/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/src/lib/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/src/lib/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/src/lib/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/src/lib/dialog/types.ts

@@ -0,0 +1,35 @@
+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';
+};

package/src/lib/icon/icon.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+	import type { IconProps } from './types.js';
+
+	let {
+		class: className,
+		color,
+		filled = false,
+		label,
+		name,
+		size,
+		...attributes
+	}: IconProps = $props();
+</script>
+
+<span
+	{...attributes}
+	class={[className, size, color, { filled }]}
+	role={label ? 'img' : undefined}
+	aria-hidden={label ? undefined : 'true'}
+	aria-label={label}
+>
+	{name}
+</span>
+
+<style>
+	span {
+		display: inline-flex;
+		width: 1em;
+		height: 1em;
+		align-items: center;
+		justify-content: center;
+		font-family: 'Material Symbols Outlined';
+		font-style: normal;
+		font-weight: 100;
+		line-height: 1;
+		color: inherit;
+		letter-spacing: normal;
+		font-size: inherit;
+		text-transform: none;
+		white-space: nowrap;
+		font-feature-settings: 'liga';
+		font-variation-settings:
+			'FILL' 0,
+			'wght' 100;
+	}
+
+	.filled {
+		font-variation-settings:
+			'FILL' 1,
+			'wght' 100;
+	}
+
+	.x-small {
+		font-size: 0.875rem;
+	}
+
+	.small {
+		font-size: 1rem;
+	}
+
+	.medium {
+		font-size: 1.5rem;
+	}
+
+	.large {
+		font-size: 2.5rem;
+	}
+
+	.x-large {
+		font-size: 5rem;
+	}
+
+	.primary {
+		color: var(--color-primary);
+	}
+
+	.secondary {
+		color: var(--color-secondary);
+	}
+
+	.foreground {
+		color: var(--color-foreground);
+	}
+
+	.background {
+		color: var(--color-background);
+	}
+
+	.muted {
+		color: var(--color-muted);
+	}
+
+	.info {
+		color: var(--color-info);
+	}
+
+	.success {
+		color: var(--color-success);
+	}
+
+	.warning {
+		color: var(--color-warning);
+	}
+
+	.error {
+		color: var(--color-error);
+	}
+</style>