@noahbaumgartner/svelte-ui 0.0.4 → 0.0.5

package/README.md

@@ -62,14 +62,14 @@ See [`src/lib/styles/tokens.css`](src/lib/styles/tokens.css) for every token.
 
 ## Components
 
-| Category   | Components                                                                                     |
-| ---------- | ---------------------------------------------------------------------------------------------- |
-| Actions    | `Button`, `ButtonGroup`, `Toggle`, `Link`                                                      |
-| Forms      | `Input`, `InputGroup`, `Textarea`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `Field` family |
-| Pickers    | `Calendar`, `TimePicker`, `ColorPicker`                                                        |
-| Overlays   | `Dialog`, `AlertDialog`, `Popover`, `Tooltip`, `ContextMenu`, `Toaster` + `toast()`            |
-| Navigation | `Navbar`, `NavigationMenu`, `Sidebar` family, `Breadcrumb`                                     |
-| Display    | `Card` family, `Table`, `Avatar`, `Badge`, `Kbd`, `Separator`, `Skeleton`, `Spinner`           |
+| Category   | Components                                                                                                                                 |
+| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| Actions    | `Button`, `ButtonGroup`, `Toggle`, `Link`                                                                                                  |
+| Forms      | `Input`, `InputGroup`, `Textarea`, `Select`, `NumberStepper`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `Field` family                  |
+| Pickers    | `Calendar`, `TimePicker`, `ColorPicker`                                                                                                    |
+| Overlays   | `Dialog`, `AlertDialog`, `Drawer`, `Popover`, `Tooltip`, `ContextMenu`, `Toaster` + `toast()`                                              |
+| Navigation | `Navbar`, `NavigationMenu`, `Sidebar` family, `Breadcrumb`, `Tabs`                                                                         |
+| Display    | `Card` family, `Table`, `Accordion`, `Avatar`, `AvatarGroup`, `Badge`, `EmptyState`, `Kbd`, `Progress`, `Separator`, `Skeleton`, `Spinner` |
 
 Every component is documented in Storybook, with one story per prop.
 

package/dist/components/accordion/Accordion.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setAccordionContext } from './context.js';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Lets several items be open at once. By default opening one closes the others. */
+		multiple?: boolean;
+		/** AccordionItems. */
+		children: Snippet;
+	};
+
+	let { multiple = false, class: className, children, ...rest }: Props = $props();
+
+	const name = $props.id();
+
+	setAccordionContext({
+		get name() {
+			return multiple ? undefined : name;
+		}
+	});
+</script>
+
+<div {...rest} class={['accordion', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.accordion {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+</style>

package/dist/components/accordion/Accordion.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Lets several items be open at once. By default opening one closes the others. */
+    multiple?: boolean;
+    /** AccordionItems. */
+    children: Snippet;
+};
+declare const Accordion: import("svelte").Component<Props, {}, "">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/accordion/AccordionItem.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLDetailsAttributes } from 'svelte/elements';
+	import { ChevronDown } from '@lucide/svelte';
+	import { getAccordionContext } from './context.js';
+
+	type Props = Omit<HTMLDetailsAttributes, 'children' | 'title' | 'name'> & {
+		/** Whether the item is expanded. Bindable. */
+		open?: boolean;
+		/** The always visible heading that toggles the item. */
+		title: string;
+		/** The content shown while the item is open. */
+		children: Snippet;
+	};
+
+	let { open = $bindable(false), title, class: className, children, ...rest }: Props = $props();
+
+	const accordion = getAccordionContext();
+</script>
+
+<details {...rest} bind:open name={accordion.name} class={['accordion-item', className]}>
+	<summary class="accordion-trigger">
+		<span class="accordion-title">{title}</span>
+		<ChevronDown class="accordion-chevron" aria-hidden="true" />
+	</summary>
+	<div class="accordion-content">{@render children()}</div>
+</details>
+
+<style>
+	.accordion-item {
+		font-size: 13px;
+		color: var(--color-text);
+		border-bottom: 1px solid var(--color-border);
+		/* Lets the height animate to and from `auto` where the browser supports it */
+		interpolate-size: allow-keywords;
+	}
+
+	.accordion-item:last-child {
+		border-bottom: 0;
+	}
+
+	.accordion-trigger {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 12px;
+		padding: 14px 0;
+		font-weight: 500;
+		list-style: none;
+		border-radius: 6px;
+		outline: none;
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.accordion-trigger::-webkit-details-marker {
+		display: none;
+	}
+
+	.accordion-trigger:hover .accordion-title {
+		text-decoration: underline;
+		text-underline-offset: 3px;
+	}
+
+	.accordion-trigger:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: 2px;
+	}
+
+	.accordion-trigger :global(.accordion-chevron) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+		color: var(--color-text-muted);
+		transition: rotate 200ms ease;
+	}
+
+	.accordion-item[open] > .accordion-trigger :global(.accordion-chevron) {
+		rotate: 180deg;
+	}
+
+	.accordion-item::details-content {
+		block-size: 0;
+		overflow: clip;
+		transition:
+			block-size 200ms ease,
+			content-visibility 200ms allow-discrete;
+	}
+
+	.accordion-item[open]::details-content {
+		block-size: auto;
+	}
+
+	.accordion-content {
+		padding-bottom: 14px;
+		line-height: 1.5;
+		color: var(--color-text-secondary);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.accordion-item::details-content,
+		.accordion-trigger :global(.accordion-chevron) {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/accordion/AccordionItem.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLDetailsAttributes } from 'svelte/elements';
+type Props = Omit<HTMLDetailsAttributes, 'children' | 'title' | 'name'> & {
+    /** Whether the item is expanded. Bindable. */
+    open?: boolean;
+    /** The always visible heading that toggles the item. */
+    title: string;
+    /** The content shown while the item is open. */
+    children: Snippet;
+};
+declare const AccordionItem: import("svelte").Component<Props, {}, "open">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

package/dist/components/accordion/context.d.ts

@@ -0,0 +1,5 @@
+export type AccordionContext = {
+    /** Shared `name` of the items' <details>, so the browser keeps only one open. Undefined with `multiple`. */
+    readonly name: string | undefined;
+};
+export declare const getAccordionContext: () => AccordionContext, setAccordionContext: (context: AccordionContext) => AccordionContext;

package/dist/components/accordion/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'svelte';
+export const [getAccordionContext, setAccordionContext] = createContext();

package/dist/components/avatar-group/AvatarGroup.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Accessible name for the group, e.g. "Members". */
+		label?: string;
+		/** How many more there are than the Avatars shown; rendered as "+3" at the end. */
+		more?: number;
+		/** Size of the "+3"; match it to the Avatars' `size`. */
+		size?: 'sm' | 'md' | 'lg';
+		/** Avatars, overlapping each other. */
+		children: Snippet;
+	};
+
+	let { label, more = 0, size = 'md', class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} role="group" aria-label={label} class={['avatar-group', className]}>
+	{@render children()}
+	{#if more > 0}
+		<span class={['avatar-group-more', `avatar-group-more--${size}`]}>+{more}</span>
+	{/if}
+</div>
+
+<style>
+	.avatar-group {
+		display: inline-flex;
+		align-items: center;
+	}
+
+	/* The ring in the page colour separates the overlapping avatars */
+	.avatar-group > :global(*) {
+		box-shadow: 0 0 0 2px var(--color-bg);
+	}
+
+	.avatar-group > :global(:not(:first-child)) {
+		margin-inline-start: -6px;
+	}
+
+	.avatar-group-more {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		flex-shrink: 0;
+		padding: 0 6px;
+		font-weight: 500;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-text-secondary);
+		background-color: var(--color-surface);
+		user-select: none;
+	}
+
+	/* Same sizes and corners as Avatar */
+	.avatar-group-more--sm {
+		min-width: 24px;
+		height: 24px;
+		border-radius: 8px;
+		font-size: 10px;
+	}
+
+	.avatar-group-more--md {
+		min-width: 32px;
+		height: 32px;
+		border-radius: 10px;
+		font-size: 12px;
+	}
+
+	.avatar-group-more--lg {
+		min-width: 40px;
+		height: 40px;
+		border-radius: 12px;
+		font-size: 14px;
+	}
+</style>

package/dist/components/avatar-group/AvatarGroup.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Accessible name for the group, e.g. "Members". */
+    label?: string;
+    /** How many more there are than the Avatars shown; rendered as "+3" at the end. */
+    more?: number;
+    /** Size of the "+3"; match it to the Avatars' `size`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Avatars, overlapping each other. */
+    children: Snippet;
+};
+declare const AvatarGroup: import("svelte").Component<Props, {}, "">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,368 @@
+<script module lang="ts">
+	export type DrawerTriggerProps = {
+		onclick: () => void;
+		'aria-haspopup': 'dialog';
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { X } from '@lucide/svelte';
+
+	type Props = {
+		/**
+		 * Whether the drawer is open. Bindable. A sheet from the bottom on phones, a panel on the right from 768px up.
+		 * Escape, the handle or close button, dragging it away and a click on the backdrop close it.
+		 */
+		open?: boolean;
+		title: string;
+		description?: string;
+		/** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. Omit to control `open` yourself. */
+		trigger?: Snippet<[DrawerTriggerProps]>;
+		/** The drawer's content; scrolls when it is taller than the screen. The first focusable element in it gets the focus on open. */
+		children?: Snippet;
+		/** Optional Buttons in the footer, stacked at full width with the primary one last; it ends up on top. Call `close` to close the drawer. */
+		actions?: Snippet<[close: () => void]>;
+	};
+
+	let { open = $bindable(false), title, description, trigger, children, actions }: Props = $props();
+
+	const id = $props.id();
+	let dialogEl: HTMLDialogElement;
+
+	const triggerProps: DrawerTriggerProps = {
+		onclick: () => (open = true),
+		'aria-haspopup': 'dialog'
+	};
+
+	function close() {
+		open = false;
+	}
+
+	$effect(() => {
+		if (open && !dialogEl.open) {
+			dialogEl.showModal();
+		} else if (!open && dialogEl.open) {
+			dialogEl.close();
+		}
+	});
+
+	/* Dragging the header towards the edge moves the drawer along; letting go far enough or fast enough closes it */
+	const slop = 4;
+	let offset = $state(0);
+	let dragging = $state(false);
+	/* Matches the media query below: the panel on the right leaves sideways */
+	let sideways = $state(false);
+	let dragged = false;
+
+	function startDrag(event: PointerEvent) {
+		if (event.button !== 0) return;
+		sideways = window.matchMedia('(min-width: 768px)').matches;
+		const start = sideways ? event.clientX : event.clientY;
+		const startTime = event.timeStamp;
+
+		function move(e: PointerEvent) {
+			const distance = (sideways ? e.clientX : e.clientY) - start;
+			if (!dragging && Math.abs(distance) < slop) return;
+			dragging = true;
+			dragged = true;
+			offset = Math.max(0, distance);
+		}
+
+		function end(e: PointerEvent) {
+			window.removeEventListener('pointermove', move);
+			window.removeEventListener('pointerup', end);
+			window.removeEventListener('pointercancel', end);
+			if (!dragging) return;
+			const velocity = offset / Math.max(1, e.timeStamp - startTime);
+			const dismiss =
+				e.type === 'pointerup' &&
+				(offset > (sideways ? dialogEl.offsetWidth : dialogEl.offsetHeight) / 3 || velocity > 0.5);
+			dragging = false;
+			offset = 0;
+			if (dismiss) close();
+			// The click that follows a drag ending on the handle must not count as a tap on it
+			setTimeout(() => (dragged = false));
+		}
+
+		window.addEventListener('pointermove', move);
+		window.addEventListener('pointerup', end);
+		window.addEventListener('pointercancel', end);
+	}
+</script>
+
+{@render trigger?.(triggerProps)}
+
+<dialog
+	bind:this={dialogEl}
+	aria-labelledby="{id}-title"
+	aria-describedby={description ? `${id}-description` : undefined}
+	class={['drawer', { 'drawer--dragging': dragging }]}
+	style:translate={dragging ? (sideways ? `${offset}px 0` : `0 ${offset}px`) : undefined}
+	onkeydown={(event) => {
+		if (event.key !== 'Escape') return;
+		event.preventDefault();
+		close();
+	}}
+	oncancel={(event) => {
+		event.preventDefault();
+		close();
+	}}
+	onclose={() => (open = false)}
+	onclick={(event) => {
+		// Clicks on the ::backdrop target the <dialog> itself, outside its box
+		if (event.target !== dialogEl) return;
+		const rect = dialogEl.getBoundingClientRect();
+		const inside =
+			event.clientX >= rect.left &&
+			event.clientX <= rect.right &&
+			event.clientY >= rect.top &&
+			event.clientY <= rect.bottom;
+		if (!inside) close();
+	}}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="drawer-header" onpointerdown={startDrag}>
+		<h2 id="{id}-title" class="drawer-title">{title}</h2>
+		{#if description}
+			<p id="{id}-description" class="drawer-description">{description}</p>
+		{/if}
+	</div>
+	{#if children}
+		<div class="drawer-body">{@render children()}</div>
+	{/if}
+	{#if actions}
+		<div class="drawer-actions">{@render actions(close)}</div>
+	{/if}
+	<!-- Last in the DOM so the content, not the handle, gets the initial focus -->
+	<button
+		type="button"
+		class="drawer-handle"
+		aria-label="Close"
+		onpointerdown={startDrag}
+		onclick={() => {
+			if (!dragged) close();
+		}}
+	>
+		<span class="drawer-handle-bar"></span>
+		<X class="drawer-handle-icon" aria-hidden="true" />
+	</button>
+</dialog>
+
+<style>
+	/* Locks page scrolling while open; the gutter keeps the layout from shifting */
+	:global(html:has(.drawer[open])) {
+		overflow: hidden;
+		scrollbar-gutter: stable;
+	}
+
+	.drawer {
+		box-sizing: border-box;
+		width: 100%;
+		max-width: 560px;
+		max-height: calc(100dvh - 48px);
+		flex-direction: column;
+		/* Pinned to the bottom edge */
+		margin: auto auto 0;
+		padding: 0 0 env(safe-area-inset-bottom);
+		overflow: hidden;
+		background-color: var(--color-bg);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-bottom: 0;
+		border-radius: 16px 16px 0 0;
+		box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
+		outline: none;
+		translate: 0 100%;
+		transition:
+			translate 260ms cubic-bezier(0.32, 0.72, 0, 1),
+			display 260ms allow-discrete,
+			overlay 260ms allow-discrete;
+	}
+
+	.drawer[open] {
+		display: flex;
+		translate: 0 0;
+	}
+
+	/* Follows the finger directly */
+	.drawer--dragging {
+		transition: none;
+	}
+
+	.drawer::backdrop {
+		background-color: rgba(0, 0, 0, 0);
+		transition:
+			background-color 260ms ease,
+			display 260ms allow-discrete,
+			overlay 260ms allow-discrete;
+	}
+
+	.drawer[open]::backdrop {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	@starting-style {
+		.drawer[open] {
+			translate: 0 100%;
+		}
+
+		.drawer[open]::backdrop {
+			background-color: rgba(0, 0, 0, 0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.drawer,
+		.drawer::backdrop {
+			transition-duration: 0ms;
+		}
+	}
+
+	.drawer-header {
+		flex-shrink: 0;
+		/* Room for the handle */
+		padding: 28px 20px 12px;
+		cursor: grab;
+		user-select: none;
+		/* Dragging must not scroll the page or get cancelled by the browser */
+		touch-action: none;
+	}
+
+	.drawer--dragging .drawer-header,
+	.drawer--dragging .drawer-handle {
+		cursor: grabbing;
+	}
+
+	.drawer-title {
+		margin: 0;
+		font-size: 15px;
+		font-weight: 600;
+	}
+
+	.drawer-description {
+		margin: 6px 0 0;
+		font-size: 13px;
+		line-height: 1.5;
+		color: var(--color-text-muted);
+	}
+
+	.drawer-body {
+		min-height: 0;
+		padding: 4px 20px 20px;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		font-size: 13px;
+	}
+
+	/* Stacked, the primary action (last in the markup) on top */
+	.drawer-actions {
+		display: flex;
+		flex-shrink: 0;
+		flex-direction: column-reverse;
+		gap: 8px;
+		padding: 4px 20px 20px;
+	}
+
+	.drawer-actions :global(.button) {
+		width: 100%;
+	}
+
+	.drawer-handle {
+		position: absolute;
+		top: 0;
+		left: 50%;
+		padding: 10px 24px;
+		background: none;
+		border: 0;
+		border-radius: 8px;
+		cursor: grab;
+		translate: -50% 0;
+		touch-action: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.drawer-handle:focus-visible {
+		outline: 2px solid var(--color-accent);
+		outline-offset: -4px;
+	}
+
+	.drawer-handle-bar {
+		display: block;
+		width: 36px;
+		height: 4px;
+		background-color: var(--color-border-strong);
+		border-radius: 2px;
+		transition: background-color 120ms ease;
+	}
+
+	.drawer-handle:hover .drawer-handle-bar {
+		background-color: var(--color-text-faint);
+	}
+
+	.drawer-handle :global(.drawer-handle-icon) {
+		display: none;
+		width: 16px;
+		height: 16px;
+	}
+
+	/* Larger screens: a floating panel on the right, with a close button instead of the handle */
+	@media (min-width: 768px) {
+		.drawer {
+			width: 400px;
+			max-width: calc(100% - 48px);
+			height: calc(100dvh - 2 * var(--drawer-inset));
+			max-height: none;
+			/* Floats with a gap to the screen edges */
+			--drawer-inset: 8px;
+			margin: var(--drawer-inset) var(--drawer-inset) var(--drawer-inset) auto;
+			padding: 0;
+			border: 1px solid var(--color-border);
+			border-radius: 20px;
+			box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
+			translate: calc(100% + var(--drawer-inset)) 0;
+		}
+
+		@starting-style {
+			.drawer[open] {
+				translate: calc(100% + var(--drawer-inset)) 0;
+			}
+		}
+
+		.drawer-header {
+			padding: 20px 56px 12px 20px;
+		}
+
+		/* Pushes the actions to the bottom */
+		.drawer-body {
+			flex: 1;
+		}
+
+		.drawer-handle {
+			top: 14px;
+			right: 14px;
+			left: auto;
+			padding: 6px;
+			color: var(--color-text-muted);
+			cursor: pointer;
+			translate: none;
+		}
+
+		.drawer-handle:hover {
+			color: var(--color-text);
+			background-color: var(--color-surface);
+		}
+
+		.drawer-handle:focus-visible {
+			outline-offset: 2px;
+		}
+
+		.drawer-handle-bar {
+			display: none;
+		}
+
+		.drawer-handle :global(.drawer-handle-icon) {
+			display: block;
+		}
+	}
+</style>

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,23 @@
+export type DrawerTriggerProps = {
+    onclick: () => void;
+    'aria-haspopup': 'dialog';
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    /**
+     * Whether the drawer is open. Bindable. A sheet from the bottom on phones, a panel on the right from 768px up.
+     * Escape, the handle or close button, dragging it away and a click on the backdrop close it.
+     */
+    open?: boolean;
+    title: string;
+    description?: string;
+    /** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. Omit to control `open` yourself. */
+    trigger?: Snippet<[DrawerTriggerProps]>;
+    /** The drawer's content; scrolls when it is taller than the screen. The first focusable element in it gets the focus on open. */
+    children?: Snippet;
+    /** Optional Buttons in the footer, stacked at full width with the primary one last; it ends up on top. Call `close` to close the drawer. */
+    actions?: Snippet<[close: () => void]>;
+};
+declare const Drawer: import("svelte").Component<Props, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;