@noahbaumgartner/svelte-ui 0.0.5 → 0.0.7

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

@@ -1,20 +1,35 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { LucideIcon } from '@lucide/svelte';
-	import Check from '@lucide/svelte/icons/check';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import type { IconComponent } from '../../icon.js';
+	import Check from '../../internal/icons/Check.svelte';
 	import { getMenuContext } from './context.js';
 
-	type Props = {
-		/** Any Lucide icon (import from `svelte-ui/icons`). */
-		icon?: LucideIcon;
+	type Props = Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'role' | 'type'> & {
+		/** The button element. Bindable. */
+		ref?: HTMLButtonElement | null;
+		/** Any icon component, e.g. from `@lucide/svelte`. */
+		icon?: IconComponent;
 		/** Makes the item a radio option; `true` marks it as the current choice. */
 		selected?: boolean;
 		disabled?: boolean;
 		onclick?: () => void;
+		/** Shown at the end of the item, e.g. a keyboard shortcut. */
+		trailing?: Snippet;
 		children: Snippet;
 	};
 
-	let { icon: Icon, selected, disabled = false, onclick, children }: Props = $props();
+	let {
+		ref = $bindable(null),
+		icon: Icon,
+		selected,
+		disabled = false,
+		onclick,
+		trailing,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 
 	const menu = getMenuContext();
 
@@ -25,16 +40,19 @@
 </script>
 
 <button
+	{...rest}
+	bind:this={ref}
 	type="button"
 	tabindex="-1"
 	role={selected === undefined ? 'menuitem' : 'menuitemradio'}
 	aria-checked={selected}
 	{disabled}
-	class={['context-menu-item', { 'context-menu-item--selected': selected }]}
+	class={['context-menu-item', { 'context-menu-item--selected': selected }, className]}
 	onclick={handleClick}
 >
 	{#if Icon}<Icon class="context-menu-item-icon" aria-hidden="true" />{/if}
 	<span class="context-menu-item-label">{@render children()}</span>
+	{@render trailing?.()}
 	{#if selected !== undefined}
 		<span class="context-menu-item-check">
 			{#if selected}<Check aria-hidden="true" />{/if}
@@ -43,63 +61,90 @@
 </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;
-	}
+	@layer svelte-ui {
+		.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: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:disabled {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
 
-	.context-menu-item--selected {
-		background-color: var(--color-surface);
-		font-weight: 600;
-	}
+		.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--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 :global(.context-menu-item-icon) {
+			width: 16px;
+			height: 16px;
+			flex-shrink: 0;
+		}
 
-	.context-menu-item-label {
-		flex-grow: 1;
-	}
+		.context-menu-item-label {
+			flex-grow: 1;
+		}
 
-	.context-menu-item-check {
-		display: flex;
-		width: 14px;
-		height: 14px;
-		flex-shrink: 0;
-	}
+		.context-menu-item-check {
+			display: flex;
+			width: 14px;
+			height: 14px;
+			flex-shrink: 0;
+		}
+
+		.context-menu-item-check :global(svg) {
+			width: 14px;
+			height: 14px;
+		}
+
+		@media (pointer: coarse) {
+			.context-menu-item {
+				min-height: 44px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.context-menu-item:hover:not(:disabled),
+			.context-menu-item:focus-visible {
+				outline: 2px solid Highlight;
+				outline-offset: -2px;
+			}
+
+			.context-menu-item:disabled {
+				color: GrayText;
+				opacity: 1;
+			}
+		}
 
-	.context-menu-item-check :global(svg) {
-		width: 14px;
-		height: 14px;
+		@media (prefers-reduced-motion: reduce) {
+			.context-menu-item {
+				transition: none;
+			}
+		}
 	}
 </style>

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

@@ -1,14 +1,19 @@
 import type { Snippet } from 'svelte';
-import type { LucideIcon } from '@lucide/svelte';
-type Props = {
-    /** Any Lucide icon (import from `svelte-ui/icons`). */
-    icon?: LucideIcon;
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { IconComponent } from '../../icon.js';
+type Props = Omit<HTMLButtonAttributes, 'children' | 'onclick' | 'role' | 'type'> & {
+    /** The button element. Bindable. */
+    ref?: HTMLButtonElement | null;
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
     /** Makes the item a radio option; `true` marks it as the current choice. */
     selected?: boolean;
     disabled?: boolean;
     onclick?: () => void;
+    /** Shown at the end of the item, e.g. a keyboard shortcut. */
+    trailing?: Snippet;
     children: Snippet;
 };
-declare const ContextMenuItem: import("svelte").Component<Props, {}, "">;
+declare const ContextMenuItem: import("svelte").Component<Props, {}, "ref">;
 type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
 export default ContextMenuItem;

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> & {
+		/** The label element. Bindable. */
+		ref?: HTMLDivElement | null;
+		children: Snippet;
+	};
+
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
+</script>
+
+<div {...rest} bind:this={ref} role="presentation" class={['context-menu-label', className]}>
+	{@render children()}
+</div>
+
+<style>
+	@layer svelte-ui {
+		.context-menu-label {
+			padding: 6px 10px 4px;
+			font-size: 11px;
+			font-weight: 500;
+			letter-spacing: 0.02em;
+			color: var(--color-text-muted);
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> & {
+    /** The label element. Bindable. */
+    ref?: HTMLDivElement | null;
+    children: Snippet;
+};
+declare const ContextMenuLabel: import("svelte").Component<Props, {}, "ref">;
+type ContextMenuLabel = ReturnType<typeof ContextMenuLabel>;
+export default ContextMenuLabel;

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> & {
+		/** The separator element. Bindable. */
+		ref?: HTMLDivElement | null;
+	};
+
+	let { ref = $bindable(null), class: className, ...rest }: Props = $props();
+</script>
+
+<div {...rest} bind:this={ref} role="separator" class={['context-menu-separator', className]}></div>
+
+<style>
+	@layer svelte-ui {
+		.context-menu-separator {
+			height: 1px;
+			margin: 2px 0;
+			flex-shrink: 0;
+			background-color: var(--color-border);
+		}
+
+		@media (forced-colors: active) {
+			.context-menu-separator {
+				background-color: CanvasText;
+			}
+		}
+	}
+</style>

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

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> & {
+    /** The separator element. Bindable. */
+    ref?: HTMLDivElement | null;
+};
+declare const ContextMenuSeparator: import("svelte").Component<Props, {}, "ref">;
+type ContextMenuSeparator = ReturnType<typeof ContextMenuSeparator>;
+export default ContextMenuSeparator;

package/dist/components/dialog/Dialog.svelte

@@ -7,11 +7,17 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { X } from '@lucide/svelte';
+	import type { HTMLDialogAttributes } from 'svelte/elements';
+	import X from '../../internal/icons/X.svelte';
 	import Button from '../button/Button.svelte';
 	import Spinner from '../spinner/Spinner.svelte';
 
-	type Props = {
+	type Props = Omit<
+		HTMLDialogAttributes,
+		'open' | 'title' | 'children' | 'aria-labelledby' | 'aria-describedby'
+	> & {
+		/** The dialog element. Bindable. */
+		ref?: HTMLDialogElement | null;
 		/** Whether the dialog is open. Bindable. Escape, the close button and a click on the backdrop close it. */
 		open?: boolean;
 		title: string;
@@ -24,20 +30,25 @@
 		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;
+		/** Accessible name of the close button. */
+		closeLabel?: string;
 	};
 
 	let {
+		ref = $bindable(null),
 		open = $bindable(false),
 		title,
 		description,
 		trigger,
 		children,
 		actions,
-		loading = false
+		loading = false,
+		closeLabel = 'Close',
+		class: className,
+		...rest
 	}: Props = $props();
 
 	const id = $props.id();
-	let dialogEl: HTMLDialogElement;
 
 	const triggerProps: DialogTriggerProps = {
 		onclick: () => (open = true),
@@ -49,10 +60,11 @@
 	}
 
 	$effect(() => {
-		if (open && !dialogEl.open) {
-			dialogEl.showModal();
-		} else if (!open && dialogEl.open) {
-			dialogEl.close();
+		if (!ref) return;
+		if (open && !ref.open) {
+			ref.showModal();
+		} else if (!open && ref.open) {
+			ref.close();
 		}
 	});
 </script>
@@ -60,11 +72,12 @@
 {@render trigger?.(triggerProps)}
 
 <dialog
-	bind:this={dialogEl}
+	{...rest}
+	bind:this={ref}
 	aria-labelledby="{id}-title"
 	aria-describedby={description ? `${id}-description` : undefined}
 	aria-busy={loading || undefined}
-	class="dialog"
+	class={['dialog', className]}
 	onkeydown={(event) => {
 		if (event.key !== 'Escape') return;
 		event.preventDefault();
@@ -77,8 +90,8 @@
 	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();
+		if (event.target !== ref || !ref) return;
+		const rect = ref.getBoundingClientRect();
 		const inside =
 			event.clientX >= rect.left &&
 			event.clientX <= rect.right &&
@@ -105,121 +118,149 @@
 		<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} />
+	<Button
+		class="dialog-close"
+		variant="ghost"
+		size="sm"
+		icon={X}
+		label={closeLabel}
+		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;
-	}
+	@layer svelte-ui {
+		/* 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 {
+			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[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::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);
-	}
+		.dialog[open]::backdrop {
+			background-color: rgba(0, 0, 0, 0.4);
+		}
 
-	@starting-style {
-		.dialog[open] {
-			opacity: 0;
-			scale: 0.95;
+		@starting-style {
+			.dialog[open] {
+				opacity: 0;
+				scale: 0.95;
+			}
+
+			.dialog[open]::backdrop {
+				background-color: rgba(0, 0, 0, 0);
+			}
 		}
 
-		.dialog[open]::backdrop {
-			background-color: rgba(0, 0, 0, 0);
+		.dialog-content,
+		.dialog-actions {
+			transition: opacity 140ms ease;
 		}
-	}
 
-	.dialog-content,
-	.dialog-actions {
-		transition: opacity 140ms ease;
-	}
+		.dialog-content {
+			min-height: 0;
+			padding: 20px;
+			overflow-y: auto;
+		}
 
-	.dialog-content {
-		min-height: 0;
-		padding: 20px;
-		overflow-y: auto;
-	}
+		.dialog-title {
+			margin: 0;
+			padding-right: 32px;
+			font-size: 15px;
+			font-weight: 600;
+		}
 
-	.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-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-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-actions {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: flex-end;
-		gap: 4px;
-		padding: 16px;
-		border-top: 1px solid var(--color-border);
-	}
+		@media (prefers-reduced-motion: reduce) {
+			.dialog,
+			.dialog::backdrop,
+			.dialog-content,
+			.dialog-actions {
+				transition: none;
+			}
+		}
 
-	.dialog-dimmed {
-		opacity: 0.4;
-		user-select: none;
-	}
+		@media (forced-colors: active) {
+			.dialog {
+				border-color: CanvasText;
+			}
 
-	.dialog :global(.dialog-spinner) {
-		position: absolute;
-		inset: 0;
-		margin: auto;
-	}
+			.dialog-actions {
+				border-top-color: CanvasText;
+			}
+		}
 
-	.dialog :global(.dialog-close) {
-		position: absolute;
-		top: 14px;
-		right: 14px;
+		.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

@@ -3,7 +3,10 @@ export type DialogTriggerProps = {
     'aria-haspopup': 'dialog';
 };
 import type { Snippet } from 'svelte';
-type Props = {
+import type { HTMLDialogAttributes } from 'svelte/elements';
+type Props = Omit<HTMLDialogAttributes, 'open' | 'title' | 'children' | 'aria-labelledby' | 'aria-describedby'> & {
+    /** The dialog element. Bindable. */
+    ref?: HTMLDialogElement | null;
     /** Whether the dialog is open. Bindable. Escape, the close button and a click on the backdrop close it. */
     open?: boolean;
     title: string;
@@ -16,7 +19,9 @@ type Props = {
     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;
+    /** Accessible name of the close button. */
+    closeLabel?: string;
 };
-declare const Dialog: import("svelte").Component<Props, {}, "open">;
+declare const Dialog: import("svelte").Component<Props, {}, "ref" | "open">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;