@noahbaumgartner/svelte-ui 0.0.1

package/dist/components/context-menu/ContextMenuItem.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LucideIcon } from '@lucide/svelte';
+	import Check from '@lucide/svelte/icons/check';
+	import { getMenuContext } from './context.js';
+
+	type Props = {
+		/** Any Lucide icon (import from `svelte-ui/icons`). */
+		icon?: LucideIcon;
+		/** Makes the item a radio option; `true` marks it as the current choice. */
+		selected?: boolean;
+		disabled?: boolean;
+		onclick?: () => void;
+		children: Snippet;
+	};
+
+	let { icon: Icon, selected, disabled = false, onclick, children }: Props = $props();
+
+	const menu = getMenuContext();
+
+	function handleClick() {
+		onclick?.();
+		menu.close();
+	}
+</script>
+
+<button
+	type="button"
+	tabindex="-1"
+	role={selected === undefined ? 'menuitem' : 'menuitemradio'}
+	aria-checked={selected}
+	{disabled}
+	class={['context-menu-item', { 'context-menu-item--selected': selected }]}
+	onclick={handleClick}
+>
+	{#if Icon}<Icon class="context-menu-item-icon" aria-hidden="true" />{/if}
+	<span class="context-menu-item-label">{@render children()}</span>
+	{#if selected !== undefined}
+		<span class="context-menu-item-check">
+			{#if selected}<Check aria-hidden="true" />{/if}
+		</span>
+	{/if}
+</button>
+
+<style>
+	.context-menu-item {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		width: 100%;
+		padding: 8px 10px;
+		background-color: transparent;
+		border: none;
+		border-radius: 6px;
+		font: inherit;
+		font-size: 13px;
+		color: var(--color-text);
+		text-align: left;
+		outline: none;
+		cursor: pointer;
+		transition: background-color 150ms ease;
+	}
+
+	.context-menu-item:hover:not(:disabled),
+	.context-menu-item:focus-visible {
+		background-color: var(--color-surface);
+	}
+
+	.context-menu-item:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.context-menu-item--selected {
+		background-color: var(--color-surface);
+		font-weight: 600;
+	}
+
+	.context-menu-item--selected:hover,
+	.context-menu-item--selected:focus-visible {
+		background-color: var(--color-surface-hover);
+	}
+
+	.context-menu-item :global(.context-menu-item-icon) {
+		width: 16px;
+		height: 16px;
+		flex-shrink: 0;
+	}
+
+	.context-menu-item-label {
+		flex-grow: 1;
+	}
+
+	.context-menu-item-check {
+		display: flex;
+		width: 14px;
+		height: 14px;
+		flex-shrink: 0;
+	}
+
+	.context-menu-item-check :global(svg) {
+		width: 14px;
+		height: 14px;
+	}
+</style>

package/dist/components/context-menu/ContextMenuItem.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { LucideIcon } from '@lucide/svelte';
+type Props = {
+    /** Any Lucide icon (import from `svelte-ui/icons`). */
+    icon?: LucideIcon;
+    /** Makes the item a radio option; `true` marks it as the current choice. */
+    selected?: boolean;
+    disabled?: boolean;
+    onclick?: () => void;
+    children: Snippet;
+};
+declare const ContextMenuItem: import("svelte").Component<Props, {}, "">;
+type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
+export default ContextMenuItem;

package/dist/components/context-menu/context.d.ts

@@ -0,0 +1,14 @@
+export type ContextMenuTriggerProps = {
+    onclick: () => void;
+    onkeydown: (event: KeyboardEvent) => void;
+    'aria-haspopup': 'menu';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+};
+export declare const getMenuContext: () => {
+    close: () => void;
+}, setMenuContext: (context: {
+    close: () => void;
+}) => {
+    close: () => void;
+};

package/dist/components/context-menu/context.js

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

package/dist/components/dialog/Dialog.svelte

@@ -0,0 +1,225 @@
+<script module lang="ts">
+	export type DialogTriggerProps = {
+		onclick: () => void;
+		'aria-haspopup': 'dialog';
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { X } from '@lucide/svelte';
+	import Button from '../button/Button.svelte';
+	import Spinner from '../spinner/Spinner.svelte';
+
+	type Props = {
+		/** Whether the dialog is open. Bindable. Escape, the close button 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<[DialogTriggerProps]>;
+		/** The dialog's content. The first focusable element in it gets the focus on open. */
+		children?: Snippet;
+		/** Optional Buttons in the footer, right-aligned with the primary one last (rightmost). Call `close` to close the dialog. */
+		actions?: Snippet<[close: () => void]>;
+		/** Grays out the content and actions, makes them inert and shows a centered Spinner. The close button keeps working. */
+		loading?: boolean;
+	};
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		trigger,
+		children,
+		actions,
+		loading = false
+	}: Props = $props();
+
+	const id = $props.id();
+	let dialogEl: HTMLDialogElement;
+
+	const triggerProps: DialogTriggerProps = {
+		onclick: () => (open = true),
+		'aria-haspopup': 'dialog'
+	};
+
+	function close() {
+		open = false;
+	}
+
+	$effect(() => {
+		if (open && !dialogEl.open) {
+			dialogEl.showModal();
+		} else if (!open && dialogEl.open) {
+			dialogEl.close();
+		}
+	});
+</script>
+
+{@render trigger?.(triggerProps)}
+
+<dialog
+	bind:this={dialogEl}
+	aria-labelledby="{id}-title"
+	aria-describedby={description ? `${id}-description` : undefined}
+	aria-busy={loading || undefined}
+	class="dialog"
+	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();
+	}}
+>
+	<div class="dialog-content" class:dialog-dimmed={loading} inert={loading}>
+		<h2 id="{id}-title" class="dialog-title">{title}</h2>
+		{#if description}
+			<p id="{id}-description" class="dialog-description">{description}</p>
+		{/if}
+		{#if children}
+			<div class="dialog-body">{@render children()}</div>
+		{/if}
+	</div>
+	{#if actions}
+		<div class="dialog-actions" class:dialog-dimmed={loading} inert={loading}>
+			{@render actions(close)}
+		</div>
+	{/if}
+	{#if loading}
+		<Spinner class="dialog-spinner" size="lg" />
+	{/if}
+	<!-- Last in the DOM so the content, not the close button, gets the initial focus -->
+	<Button class="dialog-close" variant="ghost" size="sm" icon={X} label="Close" onclick={close} />
+</dialog>
+
+<style>
+	/* Locks page scrolling while open; the gutter keeps the layout from shifting */
+	:global(html:has(.dialog[open])) {
+		overflow: hidden;
+		scrollbar-gutter: stable;
+	}
+
+	.dialog {
+		box-sizing: border-box;
+		width: calc(100% - 32px);
+		max-width: 480px;
+		max-height: calc(100% - 32px);
+		flex-direction: column;
+		padding: 0;
+		overflow: hidden;
+		background-color: var(--color-bg);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-radius: 14px;
+		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
+		outline: none;
+		opacity: 0;
+		scale: 0.95;
+		transition:
+			opacity 140ms ease,
+			scale 140ms ease,
+			display 140ms allow-discrete,
+			overlay 140ms allow-discrete;
+	}
+
+	.dialog[open] {
+		display: flex;
+		opacity: 1;
+		scale: 1;
+	}
+
+	.dialog::backdrop {
+		background-color: rgba(0, 0, 0, 0);
+		transition:
+			background-color 140ms ease,
+			display 140ms allow-discrete,
+			overlay 140ms allow-discrete;
+	}
+
+	.dialog[open]::backdrop {
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	@starting-style {
+		.dialog[open] {
+			opacity: 0;
+			scale: 0.95;
+		}
+
+		.dialog[open]::backdrop {
+			background-color: rgba(0, 0, 0, 0);
+		}
+	}
+
+	.dialog-content,
+	.dialog-actions {
+		transition: opacity 140ms ease;
+	}
+
+	.dialog-content {
+		min-height: 0;
+		padding: 20px;
+		overflow-y: auto;
+	}
+
+	.dialog-title {
+		margin: 0;
+		padding-right: 32px;
+		font-size: 15px;
+		font-weight: 600;
+	}
+
+	.dialog-description {
+		margin: 6px 0 0;
+		font-size: 13px;
+		line-height: 1.5;
+		color: var(--color-text-muted);
+	}
+
+	.dialog-body {
+		margin-top: 16px;
+		font-size: 13px;
+	}
+
+	.dialog-actions {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-end;
+		gap: 4px;
+		padding: 16px;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.dialog-dimmed {
+		opacity: 0.4;
+		user-select: none;
+	}
+
+	.dialog :global(.dialog-spinner) {
+		position: absolute;
+		inset: 0;
+		margin: auto;
+	}
+
+	.dialog :global(.dialog-close) {
+		position: absolute;
+		top: 14px;
+		right: 14px;
+	}
+</style>

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

@@ -0,0 +1,22 @@
+export type DialogTriggerProps = {
+    onclick: () => void;
+    'aria-haspopup': 'dialog';
+};
+import type { Snippet } from 'svelte';
+type Props = {
+    /** Whether the dialog is open. Bindable. Escape, the close button 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<[DialogTriggerProps]>;
+    /** The dialog's content. The first focusable element in it gets the focus on open. */
+    children?: Snippet;
+    /** Optional Buttons in the footer, right-aligned with the primary one last (rightmost). Call `close` to close the dialog. */
+    actions?: Snippet<[close: () => void]>;
+    /** Grays out the content and actions, makes them inert and shows a centered Spinner. The close button keeps working. */
+    loading?: boolean;
+};
+declare const Dialog: import("svelte").Component<Props, {}, "open">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/field/Field.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** `responsive` is vertical and switches to horizontal when the surrounding FieldGroup is wider than 448px. */
+		orientation?: 'vertical' | 'horizontal' | 'responsive';
+		/** A Label, the control, and optionally FieldDescription and FieldError. Horizontal fields wrap label and description in a FieldContent. */
+		children: Snippet;
+	};
+
+	let { orientation = 'vertical', class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} role="group" class={['field', `field--${orientation}`, className]}>
+	{@render children()}
+</div>
+
+<style>
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+		font-size: 13px;
+		color: var(--color-text);
+	}
+
+	.field--horizontal {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.field--horizontal > :global(.label) {
+		flex: auto;
+	}
+
+	.field--horizontal:has(> :global(.field-content)) {
+		align-items: flex-start;
+	}
+
+	.field--horizontal:has(> :global(.field-content)) > :global(:is(.checkbox, .radio)) {
+		margin-top: 2px;
+	}
+
+	@container field-group (min-width: 448px) {
+		.field--responsive {
+			flex-direction: row;
+			align-items: center;
+		}
+
+		.field--responsive > :global(:is(.label, .field-content)) {
+			flex: auto;
+		}
+
+		.field--responsive:has(> :global(.field-content)) {
+			align-items: flex-start;
+		}
+	}
+
+	/* State follows the control, so there is no invalid or disabled prop to keep in sync */
+	.field:has(:global([aria-invalid='true'])) :global(.label) {
+		color: var(--color-destructive);
+	}
+
+	.field:has(:global(:is(.checkbox, .radio, .switch))) :global(.label) {
+		cursor: pointer;
+	}
+
+	/* The control dims itself */
+	.field:has(:global(:disabled)) > :global(:is(.label, .field-description, .field-content)) {
+		opacity: 0.5;
+	}
+
+	.field:has(:global(:disabled)) :global(.label) {
+		cursor: not-allowed;
+	}
+</style>

package/dist/components/field/Field.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** `responsive` is vertical and switches to horizontal when the surrounding FieldGroup is wider than 448px. */
+    orientation?: 'vertical' | 'horizontal' | 'responsive';
+    /** A Label, the control, and optionally FieldDescription and FieldError. Horizontal fields wrap label and description in a FieldContent. */
+    children: Snippet;
+};
+declare const Field: import("svelte").Component<Props, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

package/dist/components/field/FieldContent.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Label, FieldDescription and FieldError next to the control in a horizontal Field. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['field-content', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.field-content {
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		gap: 4px;
+		min-width: 0;
+	}
+</style>

package/dist/components/field/FieldContent.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Label, FieldDescription and FieldError next to the control in a horizontal Field. */
+    children: Snippet;
+};
+declare const FieldContent: import("svelte").Component<Props, {}, "">;
+type FieldContent = ReturnType<typeof FieldContent>;
+export default FieldContent;

package/dist/components/field/FieldDescription.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & {
+		/** Give it an id and reference it from the control's `aria-describedby`. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<p {...rest} class={['field-description', className]}>
+	{@render children()}
+</p>
+
+<style>
+	.field-description {
+		margin: 0;
+		font-size: 12px;
+		line-height: 1.5;
+		color: var(--color-text-muted);
+	}
+
+	.field-description :global(a) {
+		color: inherit;
+		text-decoration: underline;
+		text-underline-offset: 3px;
+	}
+
+	.field-description :global(a:hover) {
+		color: var(--color-text);
+	}
+</style>

package/dist/components/field/FieldDescription.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLParagraphElement>, 'children'> & {
+    /** Give it an id and reference it from the control's `aria-describedby`. */
+    children: Snippet;
+};
+declare const FieldDescription: import("svelte").Component<Props, {}, "">;
+type FieldDescription = ReturnType<typeof FieldDescription>;
+export default FieldDescription;

package/dist/components/field/FieldError.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Messages from validation. Duplicates are dropped, several render as a list. */
+		errors?: (string | undefined)[];
+		/** Custom content instead of `errors`. */
+		children?: Snippet;
+	};
+
+	let { errors = [], class: className, children, ...rest }: Props = $props();
+
+	let messages = $derived([...new Set(errors.filter(Boolean))]);
+</script>
+
+{#if children || messages.length}
+	<div {...rest} role="alert" class={['field-error', className]}>
+		{#if children}
+			{@render children()}
+		{:else if messages.length === 1}
+			{messages[0]}
+		{:else}
+			<ul>
+				{#each messages as message (message)}<li>{message}</li>{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.field-error {
+		font-size: 12px;
+		line-height: 1.5;
+		color: var(--color-destructive);
+	}
+
+	ul {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin: 0;
+		padding-left: 16px;
+	}
+</style>

package/dist/components/field/FieldError.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Messages from validation. Duplicates are dropped, several render as a list. */
+    errors?: (string | undefined)[];
+    /** Custom content instead of `errors`. */
+    children?: Snippet;
+};
+declare const FieldError: import("svelte").Component<Props, {}, "">;
+type FieldError = ReturnType<typeof FieldError>;
+export default FieldError;

package/dist/components/field/FieldGroup.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Fields, FieldSets and FieldSeparators. */
+		children: Snippet;
+	};
+
+	let { class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} class={['field-group', className]}>
+	{@render children()}
+</div>
+
+<style>
+	.field-group {
+		container: field-group / inline-size;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+		width: 100%;
+	}
+
+	/* Tighter spacing for lists of checkboxes or radios */
+	.field-group:has(> :global(.field--horizontal)):not(:has(> :global(:not(.field--horizontal)))) {
+		gap: 12px;
+	}
+</style>

package/dist/components/field/FieldGroup.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Fields, FieldSets and FieldSeparators. */
+    children: Snippet;
+};
+declare const FieldGroup: import("svelte").Component<Props, {}, "">;
+type FieldGroup = ReturnType<typeof FieldGroup>;
+export default FieldGroup;

package/dist/components/field/FieldLegend.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLLegendElement>, 'children'> & {
+		/** `label` matches a Label, for a group of checkboxes or radios. */
+		variant?: 'legend' | 'label';
+		children: Snippet;
+	};
+
+	let { variant = 'legend', class: className, children, ...rest }: Props = $props();
+</script>
+
+<legend {...rest} class={['field-legend', `field-legend--${variant}`, className]}>
+	{@render children()}
+</legend>
+
+<style>
+	.field-legend {
+		margin-bottom: 12px;
+		padding: 0;
+		font-weight: 600;
+		line-height: 1.4;
+	}
+
+	.field-legend--legend {
+		font-size: 15px;
+	}
+
+	.field-legend--label {
+		font-size: 13px;
+		font-weight: 500;
+	}
+</style>