@sveltier/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/components/Menu/types.d.ts

@@ -0,0 +1,90 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density } from '../../core/props/types.js';
+import type { Align, Side } from '../../primitives/anchored/anchored.js';
+/** The Menu props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface MenuDefaults {
+    /**
+     * Multiplies the height and padding of the items, never the text.
+     * @default 'default'
+     */
+    density: Density;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Menu: MenuDefaults;
+    }
+}
+/** An item the user can choose. */
+export interface MenuAction {
+    /** What the item says; typing its first letters moves to it. */
+    label: string;
+    /** An identifier for `onselect` to tell the items apart. */
+    value?: string;
+    /**
+     * An icon before the label: an SVG path on a 24×24 grid, as icon sets such as Material Design
+     * Icons export them (`mdiPencil`).
+     */
+    icon?: string;
+    /** A keyboard shortcut shown at the end, such as `Ctrl+C`. Showing it does not bind it. */
+    shortcut?: string;
+    /** Shown but not chosen, and skipped by the arrow keys. */
+    disabled?: boolean;
+    /** In the error colour, for an action that deletes or cannot be undone. */
+    danger?: boolean;
+}
+/** A line between groups of items. */
+export interface MenuSeparator {
+    separator: true;
+}
+/** A heading that names the items after it, up to the next heading or separator. */
+export interface MenuHeading {
+    heading: string;
+}
+/** An entry of `items`: an action, a separator or a heading. */
+export type MenuItem = MenuAction | MenuSeparator | MenuHeading;
+/**
+ * A list of actions that opens from a control, as the APG menu button pattern describes. Arrow
+ * keys move through the items and wrap, Home and End jump to the ends, typing moves to the item
+ * that starts with it, Enter and Space choose, Escape closes and gives focus back, and Tab closes
+ * and moves on. `class`, `style`, `ref` and other attributes go to the menu.
+ *
+ * @example
+ * <Menu
+ *   items={[
+ *     { label: 'Rename', value: 'rename', shortcut: 'F2' },
+ *     { separator: true },
+ *     { label: 'Delete', value: 'delete', danger: true }
+ *   ]}
+ *   onselect={(item) => run(item.value)}
+ * >
+ *   {#snippet trigger(attributes)}<Button {...attributes}>Actions</Button>{/snippet}
+ * </Menu>
+ */
+export type MenuProps = ElementProps<HTMLDivElement, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover' | 'role'>, Partial<MenuDefaults> & {
+    /** The entries, in order. */
+    items: readonly MenuItem[];
+    /** Called with the item the user chooses, after the menu has closed. */
+    onselect?: (item: MenuAction) => void;
+    /** The control that opens it. Spread the attributes it receives onto it. */
+    trigger: Snippet<[TriggerAttributes]>;
+    /**
+     * Whether it is open. Bindable; it sets this to `false` when it closes itself.
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * The side of the control it opens on, moved to the opposite side when there is no room.
+     * @default 'bottom'
+     */
+    side?: Side;
+    /**
+     * Its alignment along that side.
+     * @default 'start'
+     */
+    align?: Align;
+    /** Called when it closes itself, with the reason; `'action'` after a choice. */
+    onclose?: (reason: CloseReason) => void;
+}>;

package/dist/components/Menu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Modal/Modal.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	// A modal <dialog> in the top layer with a panel: the shell of Dialog and Sheet. See
+	// ModalProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { DEV, warnUnnamed } from '#dev';
+	import { useLocale } from '../../core/locale/locale.js';
+	import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+	import { getToasts } from '../../core/toast/toast.svelte.js';
+	import ToastOutlet from '../../core/toast/ToastOutlet.svelte';
+	import { focusTrap } from '../../primitives/focus/focus-trap.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import { fade } from '../../primitives/motion/motion.js';
+	import { scrollLock } from '../../primitives/scroll-lock/scroll-lock.js';
+	import './modal.css';
+	import type { ModalProps } from './types.js';
+
+	let {
+		component,
+		placement,
+		panelClass,
+		enter,
+		open = $bindable(false),
+		title,
+		children,
+		actions,
+		trigger,
+		persistent = false,
+		closable = false,
+		closeLabel,
+		fullscreen = false,
+		onclose,
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ModalProps = $props();
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+	const locale = useLocale();
+
+	const CLOSE =
+		'M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4z';
+
+	// The control that opened it: focus goes back to it, as Safari does not focus a clicked
+	// button by itself.
+	let opener = $state<HTMLElement | null>(null);
+	const capture: Attachment<HTMLElement> = (node) => {
+		opener = node;
+		return () => {
+			if (opener === node) opener = null;
+		};
+	};
+	const OPENER = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-haspopup': 'dialog',
+		'aria-controls': open ? id : undefined,
+		onclick: () => (open = true),
+		[OPENER]: capture
+	});
+
+	function close(reason: CloseReason) {
+		if (!open) return;
+		open = false;
+		onclose?.(reason);
+	}
+
+	// The top layer, with the rest of the page inert.
+	const modal: Attachment<HTMLDialogElement> = (dialog) => {
+		dialog.showModal();
+		if (DEV) warnUnnamed(component, dialog, 'a title');
+	};
+
+	// The rest of the page is inert under a modal dialog, toasts included, so they show in the
+	// dialog while it is open, and go back to the page as soon as it starts to close.
+	const toasts = getToasts();
+	const outlet = {};
+	let toastRegion = $state<HTMLElement | null>(null);
+	$effect(() => {
+		if (open && toasts) return toasts.register(outlet);
+	});
+
+	// Escape is left to the layer stack, so nested layers close one at a time. The browser may
+	// still close the dialog itself: Chrome does after repeated presses, and a form with
+	// method="dialog" does on submit. Either way the state follows, with the likely reason.
+	let escaped = false;
+	function cancel(event: Event) {
+		event.preventDefault();
+		escaped = true;
+	}
+</script>
+
+{#if trigger}{@render trigger(triggerAttributes)}{/if}
+
+{#if open}
+	<dialog
+		bind:this={ref}
+		aria-labelledby={title ? `${id}-title` : undefined}
+		{...rest}
+		{id}
+		class={['sv-modal', `sv-modal--${placement}`, fullscreen && 'sv-modal--fullscreen', className]}
+		{@attach modal}
+		{@attach scrollLock()}
+		{@attach focusTrap({ returnFocus: opener ?? true })}
+		oncancel={cancel}
+		onclose={() => close(escaped ? 'escape' : 'action')}
+		transition:fade
+	>
+		<!-- The scrim is the dialog itself, so a press beside the panel is a press outside it. -->
+		<div
+			class={['sv-modal__panel', panelClass]}
+			{@attach dismissable({
+				onDismiss: close,
+				escape: !persistent,
+				outside: !persistent,
+				inside: () => [toastRegion]
+			})}
+			transition:enter
+		>
+			{#if title || closable}
+				<header class="sv-modal__header">
+					{#if title}<h2 class="sv-modal__title" id="{id}-title">{title}</h2>{/if}
+					{#if closable}
+						<button
+							type="button"
+							class="sv-modal__close"
+							aria-label={closeLabel ?? locale.t('close')}
+							onclick={() => close('action')}
+						>
+							<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"
+								><path d={CLOSE} /></svg
+							>
+						</button>
+					{/if}
+				</header>
+			{/if}
+			{#if children}<div class="sv-modal__body">{@render children()}</div>{/if}
+			{#if actions}
+				<footer class="sv-modal__actions">
+					{@render actions({ close: () => close('action') })}
+				</footer>
+			{/if}
+		</div>
+		{#if toasts}<ToastOutlet {toasts} {outlet} bind:ref={toastRegion} />{/if}
+	</dialog>
+{/if}

package/dist/components/Modal/Modal.svelte.d.ts

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

package/dist/components/Modal/modal.css

@@ -0,0 +1,150 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * The <dialog> is the whole viewport: a scrim with the panel on it, so a press beside the panel
+	 * is a press outside it. The scrim comes with the theme: its ink over a light theme,
+	 * its background over a dark one, so custom themes get one in their own tone too.
+	 */
+	.sv-modal {
+		position: fixed;
+		inset: 0;
+		box-sizing: border-box;
+		display: grid;
+		place-items: center;
+		inline-size: 100%;
+		max-inline-size: none;
+		block-size: 100%;
+		max-block-size: none;
+		margin: 0;
+		padding: var(--sv-space-21);
+		overflow: hidden;
+		border: 0;
+		background: var(--sv-color-scrim);
+		color: var(--sv-color-text);
+		overscroll-behavior: contain;
+	}
+
+	.sv-modal::backdrop {
+		background: transparent;
+	}
+
+	/* The panel: a large surface, as wide as its size allows, as tall as the screen at most. */
+	.sv-modal__panel {
+		--sv-modal-pad: calc(var(--sv-space-21) * var(--sv-density));
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		inline-size: 100%;
+		max-inline-size: var(--sv-modal-width);
+		max-block-size: 100%;
+		border-radius: var(--sv-rounded, var(--sv-radius-xl));
+		background-color: var(--sv-color-surface);
+		box-shadow: var(--sv-shadow);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-text-md);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/* Widths on a half step of φ: 21, 27, 34, 44 and 55rem. */
+	.sv-modal__panel.sv-size-xs {
+		--sv-modal-width: 21rem;
+	}
+
+	.sv-modal__panel.sv-size-sm {
+		--sv-modal-width: 27rem;
+	}
+
+	.sv-modal__panel.sv-size-md {
+		--sv-modal-width: 34rem;
+	}
+
+	.sv-modal__panel.sv-size-lg {
+		--sv-modal-width: 44rem;
+	}
+
+	.sv-modal__panel.sv-size-xl {
+		--sv-modal-width: 55rem;
+	}
+
+	.sv-modal__header {
+		display: flex;
+		flex: none;
+		gap: var(--sv-space-13);
+		align-items: flex-start;
+		padding: var(--sv-modal-pad) var(--sv-modal-pad) 0;
+	}
+
+	/* The heading in the theme's display voice, as a Card title. */
+	.sv-modal__title {
+		flex: 1;
+		min-inline-size: 0;
+		margin: 0;
+		font: var(--sv-weight-display) var(--sv-text-xl) / var(--sv-leading-snug) var(--sv-font-display);
+		letter-spacing: var(--sv-tracking-display);
+	}
+
+	.sv-modal__close {
+		display: inline-grid;
+		flex: none;
+		place-items: center;
+		inline-size: 2.058rem;
+		block-size: 2.058rem;
+		margin-block: -0.236rem;
+		margin-inline-end: -0.382rem;
+		padding: 0;
+		border: 0;
+		border-radius: var(--sv-radius-full);
+		background: transparent;
+		color: var(--sv-color-text-muted);
+		cursor: pointer;
+	}
+
+	@media (hover: hover) {
+		.sv-modal__close:hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	.sv-modal__close svg {
+		inline-size: 1.272rem;
+		block-size: 1.272rem;
+	}
+
+	/* The body scrolls; the heading and the actions stay. */
+	.sv-modal__body {
+		flex: 1;
+		min-block-size: 0;
+		padding: var(--sv-modal-pad);
+		overflow-y: auto;
+		overscroll-behavior: contain;
+	}
+
+	.sv-modal__header + .sv-modal__body {
+		padding-block-start: var(--sv-space-13);
+	}
+
+	.sv-modal__actions {
+		display: flex;
+		flex: none;
+		flex-wrap: wrap;
+		gap: var(--sv-space-8);
+		justify-content: flex-end;
+		padding: 0 var(--sv-modal-pad) var(--sv-modal-pad);
+	}
+
+	.sv-modal__header:last-child,
+	.sv-modal__body:last-child {
+		padding-block-end: var(--sv-modal-pad);
+	}
+
+	.sv-modal--fullscreen {
+		padding: 0;
+	}
+
+	.sv-modal--fullscreen > .sv-modal__panel {
+		max-inline-size: none;
+		block-size: 100%;
+		border-radius: 0;
+	}
+}

package/dist/components/Modal/types.d.ts

@@ -0,0 +1,54 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue, HTMLDialogAttributes } from 'svelte/elements';
+import type { TransitionConfig } from 'svelte/transition';
+import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+import type { ElementProps } from '../../core/props/element.js';
+import type { SheetSide } from '../Sheet/types.js';
+/** The props Dialog and Sheet share. */
+export interface ModalContentProps {
+    /**
+     * Whether it is open. Bindable; it sets this to `false` when it closes itself.
+     * @default false
+     */
+    open?: boolean;
+    /** The heading, which also names it. Without it, name it with `aria-label`. */
+    title?: string;
+    /** The body. */
+    children?: Snippet;
+    /** Buttons at the end. `close()` closes it with the reason `'action'`. */
+    actions?: Snippet<[{
+        close: () => void;
+    }]>;
+    /** The control that opens it. Spread the attributes it receives onto it. */
+    trigger?: Snippet<[TriggerAttributes]>;
+    /**
+     * Escape and a press on the backdrop do not close it: an answer is needed.
+     * @default false
+     */
+    persistent?: boolean;
+    /**
+     * Adds a close button to the heading.
+     * @default false
+     */
+    closable?: boolean;
+    /**
+     * The accessible name of the close button.
+     * @default 'Close' (from the locale)
+     */
+    closeLabel?: string;
+    /** Called when it closes itself, with the reason. */
+    onclose?: (reason: CloseReason) => void;
+}
+/** A modal `<dialog>` with a panel, the shell of Dialog and Sheet. Internal. */
+export type ModalProps = ElementProps<HTMLDialogElement, Omit<HTMLDialogAttributes, 'open' | 'title' | 'children'>, ModalContentProps & {
+    /** The component's name, for development warnings. */
+    component: string;
+    /** Where the panel sits: in the centre (a dialog) or against an edge (a sheet). */
+    placement: 'center' | SheetSide;
+    /** The shared-prop classes of the panel. */
+    panelClass: ClassValue;
+    /** How the panel comes in and goes: a dialog pops, a sheet slides. */
+    enter: (node: Element) => TransitionConfig;
+    /** The panel fills the screen. */
+    fullscreen?: boolean;
+}>;

package/dist/components/Modal/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Popover/Popover.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	// A non-modal panel next to the control that opens it. See PopoverProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { checkValue, DEV, warnUnnamed } from '#dev';
+	import { useDefaults } from '../../core/defaults/context.js';
+	import type { CloseReason, TriggerAttributes } from '../../core/overlay/types.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import { ALIGNS, anchored, SIDES } from '../../primitives/anchored/anchored.js';
+	import { tabbable } from '../../primitives/focus/tabbable.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import { pop } from '../../primitives/motion/motion.js';
+	import './popover.css';
+	import type { PopoverDefaults, PopoverProps } from './types.js';
+
+	let {
+		size,
+		density,
+		rounded,
+		trigger,
+		open = $bindable(false),
+		title,
+		children,
+		actions,
+		side = 'bottom',
+		align = 'start',
+		offset = 8,
+		persistent = false,
+		onclose,
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: PopoverProps = $props();
+
+	const resolve = useDefaults<PopoverDefaults>('Popover', {
+		size: 'md',
+		density: 'default',
+		rounded: true
+	});
+	const p = $derived(resolve({ size, density, rounded }));
+
+	if (DEV) {
+		$effect(() => checkValue('Popover', 'side', side, SIDES));
+		$effect(() => checkValue('Popover', 'align', align, ALIGNS));
+	}
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+
+	// The control that opens it: the panel is placed against it, and focus goes back to it.
+	let anchor = $state<HTMLElement | null>(null);
+	const capture: Attachment<HTMLElement> = (node) => {
+		anchor = node;
+		return () => {
+			if (anchor === node) anchor = null;
+		};
+	};
+	const ANCHOR = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-haspopup': 'dialog',
+		'aria-expanded': open,
+		'aria-controls': open ? id : undefined,
+		onclick: () => (open ? close('action') : (open = true)),
+		[ANCHOR]: capture
+	});
+
+	function close(reason: CloseReason) {
+		if (!open) return;
+		// Closed from inside, focus goes back to the control; a press or a Tab elsewhere has
+		// already chosen where it goes.
+		if (ref?.contains(document.activeElement)) anchor?.focus({ preventScroll: true });
+		open = false;
+		onclose?.(reason);
+	}
+
+	// In the top layer, with focus on the element marked autofocus, else the first that takes
+	// it, else the panel itself.
+	const show: Attachment<HTMLElement> = (panel) => {
+		panel.showPopover();
+		if (DEV) warnUnnamed('Popover', panel, 'a title');
+		const target = panel.querySelector<HTMLElement>('[autofocus]') ?? tabbable(panel)[0] ?? panel;
+		target.focus({ preventScroll: true });
+	};
+</script>
+
+{@render trigger(triggerAttributes)}
+
+{#if open}
+	<div
+		bind:this={ref}
+		aria-labelledby={title ? `${id}-title` : undefined}
+		tabindex="-1"
+		{...rest}
+		{id}
+		role="dialog"
+		popover="manual"
+		class={['sv-popover', sharedClasses(p, 'Popover'), className]}
+		{@attach show}
+		{@attach anchored({ anchor, side, align, offset })}
+		{@attach dismissable({
+			onDismiss: close,
+			escape: !persistent,
+			outside: !persistent,
+			focusOutside: !persistent,
+			inside: () => [anchor]
+		})}
+		transition:pop
+	>
+		{#if title}<div class="sv-popover__title" id="{id}-title">{title}</div>{/if}
+		{#if children}<div class="sv-popover__body">{@render children()}</div>{/if}
+		{#if actions}
+			<div class="sv-popover__actions">{@render actions({ close: () => close('action') })}</div>
+		{/if}
+	</div>
+{/if}

package/dist/components/Popover/Popover.svelte.d.ts

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

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover.svelte';
+export type { PopoverDefaults, PopoverProps } from './types.js';

package/dist/components/Popover/index.js

@@ -0,0 +1 @@
+export { default as Popover } from './Popover.svelte';

package/dist/components/Popover/popover.css

@@ -0,0 +1,67 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * A raised surface beside its control, as wide as its content up to its size and never wider
+	 * or taller than the screen, scrolling inside when its content is longer.
+	 */
+	.sv-popover {
+		--sv-popover-pad: calc(var(--sv-space-13) * var(--sv-density));
+		box-sizing: border-box;
+		display: grid;
+		gap: var(--sv-space-13);
+		inline-size: max-content;
+		max-inline-size: min(var(--sv-popover-width), 100vw - 2 * var(--sv-space-8));
+		max-block-size: calc(100dvh - 2 * var(--sv-space-8));
+		padding: var(--sv-popover-pad);
+		overflow: auto;
+		overscroll-behavior: contain;
+		border: var(--sv-hairline) solid var(--sv-color-border-soft);
+		border-radius: var(--sv-rounded, var(--sv-radius-lg));
+		outline: none;
+		background-color: var(--sv-color-surface);
+		box-shadow: var(--sv-shadow);
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/* Widths on the φ series: 13, 17, 21, 27 and 34rem. */
+	.sv-popover.sv-size-xs {
+		--sv-popover-width: 13rem;
+	}
+
+	.sv-popover.sv-size-sm {
+		--sv-popover-width: 17rem;
+	}
+
+	.sv-popover.sv-size-md {
+		--sv-popover-width: 21rem;
+	}
+
+	.sv-popover.sv-size-lg {
+		--sv-popover-width: 27rem;
+	}
+
+	.sv-popover.sv-size-xl {
+		--sv-popover-width: 34rem;
+	}
+
+	/* The heading in the theme's display voice, a step above the body. */
+	.sv-popover__title {
+		font: var(--sv-weight-display) var(--sv-text-md) / var(--sv-leading-snug) var(--sv-font-display);
+		letter-spacing: var(--sv-tracking-display);
+	}
+
+	.sv-popover__body {
+		min-inline-size: 0;
+	}
+
+	.sv-popover__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sv-space-8);
+		justify-content: flex-end;
+	}
+}