@sveltier/ui 0.0.0-stage → 0.1.0-alpha.1

package/dist/components/List/ListItem.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	// A row of a List: text, a link or a button. See ListItemProps for the props.
+	import './list.css';
+	import type { ListItemProps } from './types.js';
+
+	let {
+		title,
+		subtitle,
+		href,
+		target,
+		rel,
+		onclick,
+		active = false,
+		disabled = false,
+		prepend,
+		append,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: ListItemProps = $props();
+
+	const tag = $derived(href != null ? 'a' : onclick ? 'button' : 'div');
+</script>
+
+<li
+	bind:this={ref}
+	{...rest}
+	class={[
+		'sv-list-item',
+		active && 'sv-list-item--active',
+		disabled && 'sv-list-item--disabled',
+		className
+	]}
+>
+	<svelte:element
+		this={tag}
+		class="sv-list-item__main"
+		href={tag === 'a' && !disabled ? href : undefined}
+		target={tag === 'a' ? target : undefined}
+		rel={tag === 'a' ? rel : undefined}
+		type={tag === 'button' ? 'button' : undefined}
+		role={tag === 'a' && disabled ? 'link' : undefined}
+		disabled={(tag === 'button' && disabled) || undefined}
+		aria-disabled={(tag === 'a' && disabled) || undefined}
+		aria-current={tag === 'a' && active ? 'page' : undefined}
+		onclick={tag === 'button' ? onclick : undefined}
+	>
+		{#if prepend}<span class="sv-list-item__prepend">{@render prepend()}</span>{/if}
+		<span class="sv-list-item__text">
+			{#if title}<span class="sv-list-item__title">{title}</span>{/if}
+			{#if subtitle}<span class="sv-list-item__subtitle">{subtitle}</span>{/if}
+			{@render children?.()}
+		</span>
+	</svelte:element>
+	{#if append}<span class="sv-list-item__append">{@render append()}</span>{/if}
+</li>

package/dist/components/List/ListItem.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as List } from './List.svelte';
+export { default as ListItem } from './ListItem.svelte';
+export type { ListDefaults, ListItemProps, ListProps } from './types.js';

package/dist/components/List/index.js

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

package/dist/components/List/list.css

@@ -0,0 +1,127 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	.sv-list {
+		display: grid;
+		margin: 0;
+		padding: calc(var(--sv-space-5) * var(--sv-density)) 0;
+		list-style: none;
+	}
+
+	.sv-list-item {
+		display: flex;
+		align-items: center;
+		min-inline-size: 0;
+	}
+
+	/* The row: a control tall, its text a φ step from what is before it. */
+	.sv-list-item__main {
+		position: relative;
+		isolation: isolate;
+		display: flex;
+		flex: 1;
+		gap: var(--sv-space-13);
+		align-items: center;
+		box-sizing: border-box;
+		min-inline-size: 0;
+		min-block-size: calc(var(--sv-control-md) * var(--sv-density));
+		margin: 0;
+		padding: calc(var(--sv-space-5) * var(--sv-density))
+			calc(var(--sv-space-13) * var(--sv-density));
+		border: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-snug);
+		text-align: start;
+		text-decoration: none;
+	}
+
+	/* Rows that act share Button's state layer. */
+	:is(a, button).sv-list-item__main {
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	:is(a, button).sv-list-item__main::before {
+		content: '';
+		position: absolute;
+		inset: 0;
+		z-index: -1;
+		border-radius: inherit;
+		background-color: currentColor;
+		opacity: 0;
+		pointer-events: none;
+		transition: opacity var(--sv-duration-fast) var(--sv-ease);
+	}
+
+	@media (hover: hover) {
+		.sv-list-item:not(.sv-list-item--disabled) :is(a, button).sv-list-item__main:hover::before {
+			opacity: var(--sv-state-hover);
+		}
+	}
+
+	.sv-list-item:not(.sv-list-item--disabled) :is(a, button).sv-list-item__main:active::before {
+		opacity: var(--sv-state-press);
+	}
+
+	/* Navigation: rounded rows, set in from the edges. */
+	.sv-list--nav {
+		padding-inline: var(--sv-space-5);
+	}
+
+	.sv-list--nav .sv-list-item__main {
+		border-radius: var(--sv-radius-md);
+	}
+
+	.sv-list-item--active .sv-list-item__main {
+		background-color: color-mix(in oklch, var(--sv-color) var(--sv-tonal-wash), transparent);
+		color: color-mix(in oklch, var(--sv-color) var(--sv-tonal-text-mix), var(--sv-color-text));
+		font-weight: var(--sv-weight-medium);
+	}
+
+	.sv-list-item--disabled {
+		opacity: 0.382;
+	}
+
+	.sv-list-item--disabled .sv-list-item__main {
+		cursor: not-allowed;
+	}
+
+	.sv-list-item__prepend,
+	.sv-list-item__append {
+		display: flex;
+		flex: none;
+		align-items: center;
+	}
+
+	.sv-list-item__append {
+		padding-inline-end: calc(var(--sv-space-13) * var(--sv-density));
+		font-size: var(--sv-text-sm);
+	}
+
+	:where(.sv-list-item__prepend, .sv-list-item__append) svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	.sv-list-item__text {
+		display: grid;
+		flex: 1;
+		gap: var(--sv-space-2);
+		min-inline-size: 0;
+	}
+
+	.sv-list-item__title {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.sv-list-item__subtitle {
+		color: var(--sv-color-text-subtle);
+		font-size: var(--sv-text-xs);
+		font-weight: var(--sv-weight-regular);
+	}
+}

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

@@ -0,0 +1,67 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLAttributes, HTMLLiAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density } from '../../core/props/types.js';
+/** The List props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ListDefaults {
+    /**
+     * Multiplies the height and padding of its items.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * The colour of the active item.
+     * @default 'primary'
+     */
+    color: Color;
+    /**
+     * Rounded rows set in from the edges, for navigation.
+     * @default false
+     */
+    nav: boolean;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        List: ListDefaults;
+    }
+}
+/** A list of rows: `ListItem`s. Density and colour are set here, for every item. */
+export type ListProps = ElementProps<HTMLUListElement, HTMLAttributes<HTMLUListElement>, Partial<ListDefaults> & {
+    /** The `ListItem`s. */
+    children?: Snippet;
+}>;
+/**
+ * A row of a `List`. With `href` it is a link and with `onclick` a button, filling the row;
+ * `append` stays outside it, so it can hold controls of its own.
+ */
+export type ListItemProps = ElementProps<HTMLLIElement, HTMLLiAttributes, {
+    /** The main line. */
+    title?: string;
+    /** A second line, under the title. */
+    subtitle?: string;
+    /** Makes the row a link. */
+    href?: string;
+    /** Where a link opens, as on `<a>`. */
+    target?: HTMLAnchorAttributes['target'];
+    /** The relationship of a link, as on `<a>`. */
+    rel?: string;
+    /** Makes the row a button that calls this. */
+    onclick?: (event: MouseEvent) => void;
+    /**
+     * The current page or the selected row: tinted in the list's colour, and
+     * `aria-current="page"` on a link.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * A disabled row cannot be pressed; a disabled link loses its `href`.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content before the text, such as an avatar or an icon. */
+    prepend?: Snippet;
+    /** Content after the row's link or button, such as a value or a menu button. */
+    append?: Snippet;
+    /** More content under the title and subtitle. */
+    children?: Snippet;
+}>;

package/dist/components/List/types.js

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

package/dist/components/Menu/Menu.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	// A list of actions that opens from a control. See MenuProps.
+	import { createAttachmentKey, type Attachment } from 'svelte/attachments';
+	import { checkValue, DEV } 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 { rovingFocus } from '../../primitives/focus/roving-focus.js';
+	import { typeahead } from '../../primitives/keyboard/typeahead.js';
+	import { dismissable } from '../../primitives/layer/dismissable.js';
+	import { pop } from '../../primitives/motion/motion.js';
+	import './menu.css';
+	import type { MenuAction, MenuDefaults, MenuProps } from './types.js';
+
+	let {
+		density,
+		items,
+		onselect,
+		trigger,
+		open = $bindable(false),
+		side = 'bottom',
+		align = 'start',
+		onclose,
+		id: idProp,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: MenuProps = $props();
+
+	const resolve = useDefaults<MenuDefaults>('Menu', { density: 'default' });
+	const p = $derived(resolve({ density }));
+
+	if (DEV) {
+		$effect(() => checkValue('Menu', 'side', side, SIDES));
+		$effect(() => checkValue('Menu', 'align', align, ALIGNS));
+	}
+
+	const uid = $props.id();
+	const id = $derived(idProp ?? uid);
+
+	// Runs of actions. A heading starts a named group, which a separator or the next heading ends.
+	interface Group {
+		heading?: string;
+		actions: MenuAction[];
+	}
+	const blocks = $derived.by(() => {
+		const list: Array<Group | 'separator'> = [];
+		let group: Group | undefined;
+		for (const item of items) {
+			if ('separator' in item) {
+				list.push('separator');
+				group = undefined;
+			} else if ('heading' in item) {
+				group = { heading: item.heading, actions: [] };
+				list.push(group);
+			} else {
+				if (!group) list.push((group = { actions: [] }));
+				group.actions.push(item);
+			}
+		}
+		return list;
+	});
+
+	// The control that opens it: the menu is placed against it, named by it, and gives focus back.
+	let anchor = $state<HTMLElement | null>(null);
+	const capture: Attachment<HTMLElement> = (node) => {
+		node.id ||= `${uid}-trigger`;
+		anchor = node;
+		return () => {
+			if (anchor === node) anchor = null;
+		};
+	};
+
+	// Which item takes focus as the menu opens: the last after ArrowUp, else the first.
+	let from: 'first' | 'last' = 'first';
+	function show(start: 'first' | 'last') {
+		from = start;
+		if (open && ref) focusEnd(ref);
+		open = true;
+	}
+
+	const ANCHOR = createAttachmentKey();
+	const triggerAttributes: TriggerAttributes = $derived({
+		'aria-haspopup': 'menu',
+		'aria-expanded': open,
+		'aria-controls': open ? id : undefined,
+		onclick: () => (open ? close('action') : show('first')),
+		onkeydown: (event) => {
+			if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+			event.preventDefault();
+			show(event.key === 'ArrowUp' ? 'last' : 'first');
+		},
+		[ANCHOR]: capture
+	});
+
+	function close(reason: CloseReason) {
+		if (!open) return;
+		// Escape and a choice give focus back to the control; Tab, a press or focus elsewhere
+		// have already chosen where it goes.
+		if ((reason === 'escape' || reason === 'action') && ref?.contains(document.activeElement)) {
+			anchor?.focus({ preventScroll: true });
+		}
+		open = false;
+		onclose?.(reason);
+	}
+
+	function choose(item: MenuAction) {
+		close('action');
+		onselect?.(item);
+	}
+
+	function focusEnd(menu: HTMLElement) {
+		const enabled = menu.querySelectorAll<HTMLElement>('[data-sv-item]:not(:disabled)');
+		(from === 'last' ? enabled[enabled.length - 1] : enabled[0])?.focus({ preventScroll: true });
+	}
+
+	const enter: Attachment<HTMLElement> = (menu) => {
+		menu.showPopover();
+		focusEnd(menu);
+	};
+
+	// Tab and Shift+Tab close the menu once focus has moved on: the menu turns inert as it fades,
+	// and the move must not start from there.
+	function tab(event: KeyboardEvent) {
+		if (event.key === 'Tab') setTimeout(() => close('focus'));
+	}
+
+	// The pointer and the keyboard share one highlight: the item under the pointer takes focus.
+	function follow(event: PointerEvent & { currentTarget: HTMLButtonElement }) {
+		if (document.activeElement !== event.currentTarget) {
+			event.currentTarget.focus({ preventScroll: true });
+		}
+	}
+</script>
+
+{#snippet action(item: MenuAction)}
+	<button
+		type="button"
+		role="menuitem"
+		tabindex="-1"
+		disabled={item.disabled}
+		data-sv-item
+		data-sv-label={item.label}
+		class={['sv-menu__item', item.danger && 'sv-menu__item--danger']}
+		onclick={() => choose(item)}
+		onpointermove={follow}
+	>
+		{#if item.icon}
+			<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={item.icon} /></svg>
+		{/if}
+		<span class="sv-menu__label">{item.label}</span>
+		{#if item.shortcut}<kbd class="sv-menu__shortcut">{item.shortcut}</kbd>{/if}
+	</button>
+{/snippet}
+
+{@render trigger(triggerAttributes)}
+
+{#if open}
+	<div
+		bind:this={ref}
+		aria-labelledby={anchor?.id}
+		tabindex="-1"
+		{...rest}
+		{id}
+		role="menu"
+		popover="manual"
+		class={['sv-menu', sharedClasses(p, 'Menu'), className]}
+		{@attach anchored({ anchor, side, align })}
+		{@attach dismissable({ onDismiss: close, inside: () => [anchor], focusOutside: true })}
+		{@attach rovingFocus({ orientation: 'vertical' })}
+		{@attach typeahead()}
+		{@attach enter}
+		onkeydown={tab}
+		transition:pop
+	>
+		{#each blocks as block, index (index)}
+			{#if block === 'separator'}
+				<div role="separator" class="sv-menu__separator"></div>
+			{:else}
+				<div
+					role={block.heading ? 'group' : 'none'}
+					aria-labelledby={block.heading ? `${id}-${index}` : undefined}
+				>
+					{#if block.heading}
+						<div role="presentation" id="{id}-{index}" class="sv-menu__heading">
+							{block.heading}
+						</div>
+					{/if}
+					{#each block.actions as item, i (i)}{@render action(item)}{/each}
+				</div>
+			{/if}
+		{/each}
+	</div>
+{/if}

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

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

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

@@ -0,0 +1,2 @@
+export { default as Menu } from './Menu.svelte';
+export type { MenuAction, MenuDefaults, MenuHeading, MenuItem, MenuProps, MenuSeparator } from './types.js';

package/dist/components/Menu/index.js

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

package/dist/components/Menu/menu.css

@@ -0,0 +1,103 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* A raised surface of rows, as wide as its longest item within a short line. */
+	.sv-menu {
+		--sv-menu-pad: var(--sv-space-5);
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		min-inline-size: 13rem;
+		max-inline-size: min(21rem, 100vw - 2 * var(--sv-space-8));
+		max-block-size: calc(100dvh - 2 * var(--sv-space-8));
+		padding: var(--sv-menu-pad);
+		overflow: auto;
+		overscroll-behavior: contain;
+		border: var(--sv-hairline) solid var(--sv-color-border-soft);
+		border-radius: 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-snug);
+	}
+
+	/* A row a small control tall, rounded to sit inside the menu's corner. */
+	.sv-menu__item {
+		display: flex;
+		gap: var(--sv-space-13);
+		align-items: center;
+		box-sizing: border-box;
+		inline-size: 100%;
+		min-block-size: calc(var(--sv-control-sm) * var(--sv-density));
+		margin: 0;
+		padding: calc(var(--sv-space-5) * var(--sv-density)) var(--sv-space-8);
+		border: 0;
+		border-radius: max(0px, var(--sv-radius-lg) - var(--sv-menu-pad));
+		outline: none;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		text-align: start;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	/* The pointer focuses the item under it, so one highlight serves both. */
+	.sv-menu__item:focus {
+		background-color: color-mix(in oklch, currentColor var(--sv-state-press), transparent);
+	}
+
+	.sv-menu__item:disabled {
+		opacity: 0.382;
+		cursor: not-allowed;
+	}
+
+	.sv-menu__item--danger {
+		color: var(--sv-color-error);
+	}
+
+	.sv-menu__item svg {
+		flex: none;
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	.sv-menu__label {
+		flex: 1;
+		min-inline-size: 0;
+		overflow-wrap: anywhere;
+	}
+
+	.sv-menu__shortcut {
+		margin-inline-start: auto;
+		color: var(--sv-color-text-muted);
+		font: inherit;
+		font-size: var(--sv-text-xs);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.sv-menu__item--danger .sv-menu__shortcut {
+		color: inherit;
+	}
+
+	.sv-menu__separator {
+		flex: none;
+		block-size: var(--sv-hairline);
+		margin-block: var(--sv-menu-pad);
+		margin-inline: calc(-1 * var(--sv-menu-pad));
+		background-color: var(--sv-color-border-soft);
+	}
+
+	/* The theme's label voice, muted, above the items it names. */
+	.sv-menu__heading {
+		padding: var(--sv-space-8) var(--sv-space-8) var(--sv-space-3);
+		color: var(--sv-color-text-muted);
+		font-size: var(--sv-label-size);
+		font-weight: var(--sv-weight-medium);
+		letter-spacing: var(--sv-label-tracking);
+		text-transform: var(--sv-label-transform);
+	}
+}

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 {};