@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/color-picker/ColorPicker.svelte

@@ -3,13 +3,29 @@
 	import Input from '../input/Input.svelte';
 
 	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLDivElement | null;
 		/** Bindable, `#rrggbb` like `<input type="color">`. */
 		value?: string;
 		/** Called on every change while dragging or typing. */
 		onselect?: (value: string) => void;
+		/** Accessible names of the controls, e.g. to translate them. */
+		labels?: {
+			area?: string;
+			areaValue?: (saturation: number, brightness: number) => string;
+			hue?: string;
+			hex?: string;
+		};
 	};
 
-	let { value = $bindable('#000000'), onselect, class: className, ...rest }: Props = $props();
+	let {
+		ref = $bindable(null),
+		value = $bindable('#000000'),
+		onselect,
+		labels,
+		class: className,
+		...rest
+	}: Props = $props();
 
 	type Hsv = { h: number; s: number; v: number };
 
@@ -105,14 +121,15 @@
 	}
 </script>
 
-<div {...rest} class={['color-picker', className]}>
+<div {...rest} bind:this={ref} class={['color-picker', className]}>
 	<div
 		class="color-picker-area"
 		role="slider"
 		tabindex="0"
-		aria-label="Saturation and brightness"
+		aria-label={labels?.area ?? 'Saturation and brightness'}
 		aria-valuenow={Math.round(hsv.s * 100)}
-		aria-valuetext="Saturation {Math.round(hsv.s * 100)}%, brightness {Math.round(hsv.v * 100)}%"
+		aria-valuetext={labels?.areaValue?.(Math.round(hsv.s * 100), Math.round(hsv.v * 100)) ??
+			`Saturation ${Math.round(hsv.s * 100)}%, brightness ${Math.round(hsv.v * 100)}%`}
 		style:--hue={hsv.h}
 		onpointerdown={(event) => drag(event, (x, y) => emit({ h: hsv.h, s: x, v: 1 - y }))}
 		onkeydown={areaKeydown}
@@ -129,7 +146,7 @@
 		class="color-picker-hue"
 		role="slider"
 		tabindex="0"
-		aria-label="Hue"
+		aria-label={labels?.hue ?? 'Hue'}
 		aria-valuemin={0}
 		aria-valuemax={360}
 		aria-valuenow={Math.round(hsv.h)}
@@ -145,89 +162,125 @@
 
 	<div class="color-picker-footer">
 		<span class="color-picker-swatch" style:background-color={value}></span>
-		<Input value={hexText} aria-label="Hex color" spellcheck="false" oninput={hexInput} />
+		<Input
+			value={hexText}
+			aria-label={labels?.hex ?? 'Hex color'}
+			spellcheck="false"
+			oninput={hexInput}
+		/>
 	</div>
 </div>
 
 <style>
-	.color-picker {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-		width: 224px;
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.color-picker {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+			width: 224px;
+			user-select: none;
+		}
 
-	.color-picker-area {
-		position: relative;
-		height: 150px;
-		border-radius: 8px;
-		background:
-			linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
-			hsl(var(--hue) 100% 50%);
-		outline: none;
-		cursor: crosshair;
-		touch-action: none;
-	}
+		.color-picker-area {
+			position: relative;
+			height: 150px;
+			border-radius: 8px;
+			background:
+				linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
+				hsl(var(--hue) 100% 50%);
+			outline: none;
+			cursor: crosshair;
+			touch-action: none;
+		}
 
-	.color-picker-hue {
-		position: relative;
-		height: 12px;
-		margin: 0 6px;
-		border-radius: 999px;
-		background: linear-gradient(
-			to right,
-			#f00 0%,
-			#ff0 17%,
-			#0f0 33%,
-			#0ff 50%,
-			#00f 67%,
-			#f0f 83%,
-			#f00 100%
-		);
-		outline: none;
-		cursor: pointer;
-		touch-action: none;
-	}
+		.color-picker-hue {
+			position: relative;
+			height: 12px;
+			margin: 0 6px;
+			border-radius: 999px;
+			background: linear-gradient(
+				to right,
+				#f00 0%,
+				#ff0 17%,
+				#0f0 33%,
+				#0ff 50%,
+				#00f 67%,
+				#f0f 83%,
+				#f00 100%
+			);
+			outline: none;
+			cursor: pointer;
+			touch-action: none;
+		}
 
-	/* Let the hue thumb reach both ends of the rounded track */
-	.color-picker-hue::before {
-		content: '';
-		position: absolute;
-		inset: 0 -6px;
-	}
+		/* Let the hue thumb reach both ends of the rounded track */
+		.color-picker-hue::before {
+			content: '';
+			position: absolute;
+			inset: 0 -6px;
+		}
 
-	.color-picker-thumb {
-		position: absolute;
-		top: 50%;
-		width: 14px;
-		height: 14px;
-		box-sizing: border-box;
-		border: 2px solid #fff;
-		border-radius: 999px;
-		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
-		transform: translate(-50%, -50%);
-		pointer-events: none;
-	}
+		.color-picker-thumb {
+			position: absolute;
+			top: 50%;
+			width: 14px;
+			height: 14px;
+			box-sizing: border-box;
+			border: 2px solid #fff;
+			border-radius: 999px;
+			box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+			transform: translate(-50%, -50%);
+			pointer-events: none;
+		}
 
-	.color-picker-area:focus-visible .color-picker-thumb,
-	.color-picker-hue:focus-visible .color-picker-thumb {
-		outline: 2px solid var(--color-accent);
-		outline-offset: 2px;
-	}
+		.color-picker-area:focus-visible .color-picker-thumb,
+		.color-picker-hue:focus-visible .color-picker-thumb {
+			outline: 2px solid var(--color-accent);
+			outline-offset: 2px;
+		}
 
-	.color-picker-footer {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
+		@media (pointer: coarse) {
+			.color-picker-hue::before {
+				inset: -16px -6px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.color-picker-area,
+			.color-picker-hue {
+				border: 1px solid CanvasText;
+			}
+
+			.color-picker-thumb {
+				forced-color-adjust: none;
+				border-color: Canvas;
+				box-shadow: 0 0 0 2px CanvasText;
+			}
 
-	.color-picker-swatch {
-		flex-shrink: 0;
-		width: 32px;
-		height: 32px;
-		box-sizing: border-box;
-		border: 1px solid var(--color-border);
-		border-radius: 10px;
+			.color-picker-area:focus-visible .color-picker-thumb,
+			.color-picker-hue:focus-visible .color-picker-thumb {
+				outline-color: Highlight;
+			}
+
+			.color-picker-swatch {
+				forced-color-adjust: none;
+				border-color: CanvasText;
+			}
+		}
+
+		.color-picker-footer {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.color-picker-swatch {
+			flex-shrink: 0;
+			width: 32px;
+			height: 32px;
+			box-sizing: border-box;
+			border: 1px solid var(--color-border);
+			border-radius: 10px;
+		}
 	}
 </style>

package/dist/components/color-picker/ColorPicker.svelte.d.ts

@@ -1,10 +1,19 @@
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLDivElement | null;
     /** Bindable, `#rrggbb` like `<input type="color">`. */
     value?: string;
     /** Called on every change while dragging or typing. */
     onselect?: (value: string) => void;
+    /** Accessible names of the controls, e.g. to translate them. */
+    labels?: {
+        area?: string;
+        areaValue?: (saturation: number, brightness: number) => string;
+        hue?: string;
+        hex?: string;
+    };
 };
-declare const ColorPicker: import("svelte").Component<Props, {}, "value">;
+declare const ColorPicker: import("svelte").Component<Props, {}, "ref" | "value">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

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

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { tick, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { scale } from 'svelte/transition';
 	import { setMenuContext, type ContextMenuTriggerProps } from './context.js';
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The wrapper element around the trigger and menu. Bindable. */
+		ref?: HTMLDivElement | null;
 		/** Whether the menu is open. Bindable. */
 		open?: boolean;
 		/** Horizontal alignment of the menu relative to the trigger. */
@@ -13,11 +16,21 @@
 		children: Snippet;
 	};
 
-	let { open = $bindable(false), align = 'start', trigger, children }: Props = $props();
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		align = 'start',
+		trigger,
+		children,
+		class: className,
+		...rest
+	}: Props = $props();
 
 	const id = $props.id();
+
+	const reducedMotion = () =>
+		typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 	let side: 'top' | 'bottom' = $state('bottom');
-	let wrapperEl: HTMLDivElement;
 	let contentEl: HTMLDivElement | undefined = $state();
 
 	function items() {
@@ -36,7 +49,7 @@
 
 	function close({ restoreFocus = false } = {}) {
 		open = false;
-		if (restoreFocus) wrapperEl.querySelector<HTMLElement>('[aria-haspopup="menu"]')?.focus();
+		if (restoreFocus) ref?.querySelector<HTMLElement>('[aria-haspopup="menu"]')?.focus();
 	}
 
 	setMenuContext({ close: () => close({ restoreFocus: true }) });
@@ -78,7 +91,8 @@
 
 		tick().then(() => {
 			if (!contentEl) return;
-			const triggerRect = wrapperEl.getBoundingClientRect();
+			if (!ref) return;
+			const triggerRect = ref.getBoundingClientRect();
 			const contentHeight = contentEl.offsetHeight;
 			const spaceBelow = window.innerHeight - triggerRect.bottom;
 			side =
@@ -86,7 +100,7 @@
 		});
 
 		function handlePointerDown(event: PointerEvent) {
-			if (!wrapperEl.contains(event.target as Node)) close();
+			if (!ref?.contains(event.target as Node)) close();
 		}
 
 		function handleKeydown(event: KeyboardEvent) {
@@ -109,7 +123,7 @@
 	});
 </script>
 
-<div class="context-menu" bind:this={wrapperEl}>
+<div {...rest} class={['context-menu', className]} bind:this={ref}>
 	{@render trigger(triggerProps)}
 
 	{#if open}
@@ -124,7 +138,7 @@
 			]}
 			bind:this={contentEl}
 			onkeydown={handleMenuKeydown}
-			transition:scale={{ duration: 140, start: 0.95 }}
+			transition:scale={{ duration: reducedMotion() ? 0 : 140, start: 0.95 }}
 		>
 			{@render children()}
 		</div>
@@ -132,70 +146,73 @@
 </div>
 
 <style>
-	.context-menu {
-		position: relative;
-		display: inline-flex;
-		height: fit-content;
-	}
+	@layer svelte-ui {
+		.context-menu {
+			position: relative;
+			display: inline-flex;
+			height: fit-content;
+		}
 
-	.context-menu-content {
-		position: absolute;
-		z-index: 60;
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		min-width: 160px;
-		padding: 4px;
-		background-color: var(--color-bg);
-		border: 1px solid var(--color-border);
-		border-radius: 10px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-		outline: none;
-		user-select: none;
-	}
+		.context-menu-content {
+			position: absolute;
+			z-index: 60;
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			width: max-content;
+			min-width: 160px;
+			padding: 4px;
+			background-color: var(--color-bg);
+			border: 1px solid var(--color-border);
+			border-radius: 10px;
+			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+			outline: none;
+			user-select: none;
+		}
 
-	.context-menu-content--bottom {
-		top: calc(100% + 8px);
-	}
+		.context-menu-content--bottom {
+			top: calc(100% + 8px);
+		}
 
-	.context-menu-content--top {
-		bottom: calc(100% + 8px);
-	}
+		.context-menu-content--top {
+			bottom: calc(100% + 8px);
+		}
 
-	.context-menu-content--start {
-		left: 0;
-	}
+		.context-menu-content--start {
+			left: 0;
+		}
 
-	.context-menu-content--center {
-		left: 50%;
-		transform: translateX(-50%);
-	}
+		.context-menu-content--center {
+			left: 50%;
+			transform: translateX(-50%);
+		}
 
-	.context-menu-content--end {
-		right: 0;
-	}
+		.context-menu-content--end {
+			right: 0;
+		}
 
-	.context-menu-content--bottom.context-menu-content--start {
-		transform-origin: top left;
-	}
+		.context-menu-content--bottom.context-menu-content--start {
+			transform-origin: top left;
+		}
 
-	.context-menu-content--bottom.context-menu-content--center {
-		transform-origin: top center;
-	}
+		.context-menu-content--bottom.context-menu-content--center {
+			transform-origin: top center;
+		}
 
-	.context-menu-content--bottom.context-menu-content--end {
-		transform-origin: top right;
-	}
+		.context-menu-content--bottom.context-menu-content--end {
+			transform-origin: top right;
+		}
 
-	.context-menu-content--top.context-menu-content--start {
-		transform-origin: bottom left;
-	}
+		.context-menu-content--top.context-menu-content--start {
+			transform-origin: bottom left;
+		}
 
-	.context-menu-content--top.context-menu-content--center {
-		transform-origin: bottom center;
-	}
+		.context-menu-content--top.context-menu-content--center {
+			transform-origin: bottom center;
+		}
 
-	.context-menu-content--top.context-menu-content--end {
-		transform-origin: bottom right;
+		.context-menu-content--top.context-menu-content--end {
+			transform-origin: bottom right;
+		}
 	}
 </style>

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

@@ -1,6 +1,9 @@
 import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import { type ContextMenuTriggerProps } from './context.js';
-type Props = {
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The wrapper element around the trigger and menu. Bindable. */
+    ref?: HTMLDivElement | null;
     /** Whether the menu is open. Bindable. */
     open?: boolean;
     /** Horizontal alignment of the menu relative to the trigger. */
@@ -9,6 +12,6 @@ type Props = {
     trigger: Snippet<[ContextMenuTriggerProps]>;
     children: Snippet;
 };
-declare const ContextMenu: import("svelte").Component<Props, {}, "open">;
+declare const ContextMenu: import("svelte").Component<Props, {}, "ref" | "open">;
 type ContextMenu = ReturnType<typeof ContextMenu>;
 export default ContextMenu;

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { IconComponent } from '../../icon.js';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> & {
+		/** The info row element. Bindable. */
+		ref?: HTMLDivElement | null;
+		/** Any icon component, e.g. from `@lucide/svelte`. */
+		icon?: IconComponent;
+		/** Second, smaller line below the main text, e.g. an email address. */
+		description?: string;
+		/** Replaces the icon with custom content, e.g. an `Avatar`. */
+		leading?: Snippet;
+		/** Shown at the end of the row, e.g. a value. */
+		trailing?: Snippet;
+		children: Snippet;
+	};
+
+	let {
+		ref = $bindable(null),
+		icon: Icon,
+		description,
+		leading,
+		trailing,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div
+	{...rest}
+	bind:this={ref}
+	role="presentation"
+	class={['context-menu-info', { 'context-menu-info--leading': leading }, className]}
+>
+	{#if leading}
+		{@render leading()}
+	{:else if Icon}
+		<Icon class="context-menu-info-icon" aria-hidden="true" />
+	{/if}
+	<span class="context-menu-info-text">
+		<span class={['context-menu-info-label', { 'context-menu-info-label--title': description }]}>
+			{@render children()}
+		</span>
+		{#if description}<span class="context-menu-info-description">{description}</span>{/if}
+	</span>
+	{@render trailing?.()}
+</div>
+
+<style>
+	@layer svelte-ui {
+		.context-menu-info {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			padding: 8px 10px;
+			font-size: 13px;
+			color: var(--color-text-muted);
+			cursor: default;
+		}
+
+		.context-menu-info--leading {
+			gap: 14px;
+			padding: 10px;
+		}
+
+		.context-menu-info :global(.context-menu-info-icon) {
+			width: 16px;
+			height: 16px;
+			flex-shrink: 0;
+		}
+
+		.context-menu-info-text {
+			display: flex;
+			flex-direction: column;
+			flex-grow: 1;
+			min-width: 0;
+		}
+
+		.context-menu-info-label--title {
+			font-weight: 500;
+			color: var(--color-text);
+		}
+
+		.context-menu-info-description {
+			font-size: 12px;
+		}
+	}
+</style>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { IconComponent } from '../../icon.js';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'> & {
+    /** The info row element. Bindable. */
+    ref?: HTMLDivElement | null;
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
+    /** Second, smaller line below the main text, e.g. an email address. */
+    description?: string;
+    /** Replaces the icon with custom content, e.g. an `Avatar`. */
+    leading?: Snippet;
+    /** Shown at the end of the row, e.g. a value. */
+    trailing?: Snippet;
+    children: Snippet;
+};
+declare const ContextMenuInfo: import("svelte").Component<Props, {}, "ref">;
+type ContextMenuInfo = ReturnType<typeof ContextMenuInfo>;
+export default ContextMenuInfo;