@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/popover/Popover.svelte

@@ -16,11 +16,13 @@
 
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import { scale } from 'svelte/transition';
 
 	type Side = 'top' | 'right' | 'bottom' | 'left';
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
 		/** Whether the popover is open. Bindable. */
 		open?: boolean;
 		/** Opens on hover and keyboard focus instead of on click, like a hover card. */
@@ -36,6 +38,8 @@
 		/** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. */
 		trigger: Snippet<[PopoverTriggerProps]>;
 		children?: Snippet;
+		/** The popup element, only set while open. Bindable. */
+		ref?: HTMLDivElement | null;
 	};
 
 	let {
@@ -47,7 +51,10 @@
 		title,
 		description,
 		trigger,
-		children
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
 	}: Props = $props();
 
 	const id = $props.id();
@@ -58,7 +65,6 @@
 
 	let wrapperEl: HTMLSpanElement;
 	let triggerEl: HTMLElement | undefined;
-	let contentEl: HTMLDivElement | undefined = $state();
 	let placement: Side = $state('bottom');
 	let position = $state({ top: 0, left: 0 });
 	let timer: ReturnType<typeof setTimeout> | undefined;
@@ -126,9 +132,9 @@
 	}
 
 	function place() {
-		if (!triggerEl || !contentEl) return;
+		if (!triggerEl || !ref) return;
 		const rect = triggerEl.getBoundingClientRect();
-		const { offsetWidth: width, offsetHeight: height } = contentEl;
+		const { offsetWidth: width, offsetHeight: height } = ref;
 		const s =
 			fits(rect, width, height, side) || !fits(rect, width, height, opposite[side])
 				? side
@@ -190,23 +196,29 @@
 
 	{#if open}
 		<div
+			{...rest}
 			id="{id}-popover"
 			role={hover ? undefined : 'dialog'}
 			aria-labelledby={title ? `${id}-title` : undefined}
 			aria-describedby={description ? `${id}-description` : undefined}
 			tabindex="-1"
 			popover="manual"
-			class={['popover-content', `popover-content--${placement}`, `popover-content--${align}`]}
+			class={[
+				'popover-content',
+				`popover-content--${placement}`,
+				`popover-content--${align}`,
+				className
+			]}
 			style:top="{position.top}px"
 			style:left="{position.left}px"
-			bind:this={contentEl}
+			bind:this={ref}
 			onpointerenter={() => hover && clearTimeout(timer)}
 			onpointerleave={() => hover && schedule(false, closeDelay)}
 			onfocusout={(event) => {
 				if (leftWrapper(event)) close();
 			}}
 			{@attach popover}
-			transition:scale={{ duration: 140, start: 0.95 }}
+			transition:scale={{ duration: prefersReducedMotion.current ? 0 : 140, start: 0.95 }}
 		>
 			{#if title}
 				<h3 id="{id}-title" class="popover-title">{title}</h3>
@@ -222,74 +234,82 @@
 </span>
 
 <style>
-	.popover {
-		display: inline-flex;
-		height: fit-content;
-	}
+	@layer svelte-ui {
+		.popover {
+			display: inline-flex;
+			height: fit-content;
+		}
 
-	.popover-content {
-		position: fixed;
-		inset: auto;
-		box-sizing: border-box;
-		width: 288px;
-		max-width: calc(100vw - 16px);
-		margin: 0;
-		padding: 16px;
-		overflow: visible;
-		font-size: 13px;
-		line-height: 1.5;
-		background-color: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 12px;
-		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-		outline: none;
-	}
+		.popover-content {
+			position: fixed;
+			inset: auto;
+			box-sizing: border-box;
+			width: 288px;
+			max-width: calc(100vw - 16px);
+			margin: 0;
+			padding: 16px;
+			overflow: visible;
+			font-size: 13px;
+			line-height: 1.5;
+			background-color: var(--color-bg);
+			color: var(--color-text);
+			border: 1px solid var(--color-border);
+			border-radius: 12px;
+			box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+			outline: none;
+		}
 
-	.popover-title {
-		margin: 0;
-		font-size: 14px;
-		font-weight: 600;
-	}
+		.popover-title {
+			margin: 0;
+			font-size: 14px;
+			font-weight: 600;
+		}
 
-	.popover-description {
-		margin: 4px 0 0;
-		color: var(--color-text-muted);
-	}
+		.popover-description {
+			margin: 4px 0 0;
+			color: var(--color-text-muted);
+		}
 
-	:is(.popover-title, .popover-description) + .popover-body {
-		margin-top: 14px;
-	}
+		:is(.popover-title, .popover-description) + .popover-body {
+			margin-top: 14px;
+		}
 
-	.popover-content--bottom {
-		transform-origin: top center;
-	}
+		.popover-content--bottom {
+			transform-origin: top center;
+		}
 
-	.popover-content--top {
-		transform-origin: bottom center;
-	}
+		.popover-content--top {
+			transform-origin: bottom center;
+		}
 
-	.popover-content--left {
-		transform-origin: center right;
-	}
+		.popover-content--left {
+			transform-origin: center right;
+		}
 
-	.popover-content--right {
-		transform-origin: center left;
-	}
+		.popover-content--right {
+			transform-origin: center left;
+		}
 
-	.popover-content--bottom.popover-content--start {
-		transform-origin: top left;
-	}
+		.popover-content--bottom.popover-content--start {
+			transform-origin: top left;
+		}
 
-	.popover-content--bottom.popover-content--end {
-		transform-origin: top right;
-	}
+		.popover-content--bottom.popover-content--end {
+			transform-origin: top right;
+		}
 
-	.popover-content--top.popover-content--start {
-		transform-origin: bottom left;
-	}
+		.popover-content--top.popover-content--start {
+			transform-origin: bottom left;
+		}
 
-	.popover-content--top.popover-content--end {
-		transform-origin: bottom right;
+		.popover-content--top.popover-content--end {
+			transform-origin: bottom right;
+		}
+
+		@media (forced-colors: active) {
+			.popover-content {
+				border-color: CanvasText;
+			}
+		}
 	}
 </style>

package/dist/components/popover/Popover.svelte.d.ts

@@ -11,8 +11,9 @@ export type PopoverTriggerProps = {
     [key: symbol]: Attachment<HTMLElement>;
 };
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Side = 'top' | 'right' | 'bottom' | 'left';
-type Props = {
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
     /** Whether the popover is open. Bindable. */
     open?: boolean;
     /** Opens on hover and keyboard focus instead of on click, like a hover card. */
@@ -28,7 +29,9 @@ type Props = {
     /** Renders the trigger. Spread the given props onto it, e.g. `<Button {...props} />`. */
     trigger: Snippet<[PopoverTriggerProps]>;
     children?: Snippet;
+    /** The popup element, only set while open. Bindable. */
+    ref?: HTMLDivElement | null;
 };
-declare const Popover: import("svelte").Component<Props, {}, "open">;
+declare const Popover: import("svelte").Component<Props, {}, "ref" | "open">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/preview-card/PreviewCard.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { IconComponent } from '../../icon.js';
+
+	type Props = Omit<HTMLAnchorAttributes, 'children' | 'title' | 'href' | 'media'> & {
+		/** Makes the whole card a link. */
+		href?: string;
+		/** Bold lead-in before the description, followed by a colon. */
+		title: string;
+		description?: string;
+		/** Muted text below, e.g. a date. */
+		meta?: string;
+		/** Any icon component, e.g. from `@lucide/svelte`, shown in the top-left corner of the media. */
+		icon?: IconComponent;
+		orientation?: 'vertical' | 'horizontal';
+		/** Square media that fills the frame, e.g. a MeshGradient or an `<img>`. */
+		media: Snippet;
+		/** Custom description content instead of `description`. */
+		children?: Snippet;
+		ref?: HTMLElement | null;
+	};
+
+	let {
+		href,
+		title,
+		description,
+		meta,
+		icon: Icon,
+		orientation = 'vertical',
+		media,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'div'}
+	{...rest}
+	bind:this={ref}
+	{href}
+	class={['preview-card', `preview-card--${orientation}`, className]}
+>
+	<div class="preview-card-media">
+		{@render media()}
+		{#if Icon}
+			<span class="preview-card-icon"><Icon aria-hidden="true" /></span>
+		{/if}
+	</div>
+	<div class="preview-card-info">
+		<p class="preview-card-headline">
+			<span class="preview-card-title">{title}{description || children ? ':' : ''}</span>
+			{#if children}{@render children()}{:else}{description}{/if}
+		</p>
+		{#if meta}
+			<span class="preview-card-meta">{meta}</span>
+		{/if}
+	</div>
+</svelte:element>
+
+<style>
+	@layer svelte-ui {
+		.preview-card {
+			display: flex;
+			gap: 20px;
+			color: var(--color-text);
+			text-decoration: none;
+			border-radius: 10px;
+			outline: none;
+		}
+
+		a.preview-card:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: 2px;
+		}
+
+		.preview-card--vertical {
+			flex-direction: column;
+			max-width: 380px;
+		}
+
+		.preview-card--horizontal {
+			align-items: center;
+		}
+
+		.preview-card-media {
+			position: relative;
+			flex-shrink: 0;
+			aspect-ratio: 1;
+			overflow: hidden;
+			border-radius: 10px;
+		}
+
+		.preview-card--horizontal .preview-card-media {
+			width: 140px;
+		}
+
+		.preview-card-media > :global(:not(.preview-card-icon)) {
+			position: absolute;
+			inset: 0;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			border-radius: inherit;
+			transition: transform 300ms ease;
+		}
+
+		a.preview-card:hover .preview-card-media > :global(:not(.preview-card-icon)) {
+			transform: scale(1.05);
+		}
+
+		.preview-card-icon {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 40px;
+			height: 40px;
+			color: var(--color-base);
+			background-color: var(--color-ink);
+			border-radius: 10px 0 0 0;
+		}
+
+		.preview-card-icon :global(svg) {
+			width: 20px;
+			height: 20px;
+		}
+
+		.preview-card--horizontal .preview-card-icon {
+			width: 32px;
+			height: 32px;
+		}
+
+		.preview-card--horizontal .preview-card-icon :global(svg) {
+			width: 16px;
+			height: 16px;
+		}
+
+		.preview-card-info {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			min-width: 0;
+		}
+
+		.preview-card-headline {
+			margin: 0;
+			font-size: 16px;
+		}
+
+		.preview-card-title {
+			font-weight: 600;
+		}
+
+		.preview-card-meta {
+			font-size: 14px;
+			color: var(--color-text-muted);
+		}
+
+		@media (min-width: 640px) {
+			.preview-card--horizontal .preview-card-media {
+				width: 168px;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.preview-card-media > :global(*) {
+				transition: none;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.preview-card-icon {
+				outline: 1px solid CanvasText;
+				outline-offset: -1px;
+			}
+		}
+	}
+</style>

package/dist/components/preview-card/PreviewCard.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import type { IconComponent } from '../../icon.js';
+type Props = Omit<HTMLAnchorAttributes, 'children' | 'title' | 'href' | 'media'> & {
+    /** Makes the whole card a link. */
+    href?: string;
+    /** Bold lead-in before the description, followed by a colon. */
+    title: string;
+    description?: string;
+    /** Muted text below, e.g. a date. */
+    meta?: string;
+    /** Any icon component, e.g. from `@lucide/svelte`, shown in the top-left corner of the media. */
+    icon?: IconComponent;
+    orientation?: 'vertical' | 'horizontal';
+    /** Square media that fills the frame, e.g. a MeshGradient or an `<img>`. */
+    media: Snippet;
+    /** Custom description content instead of `description`. */
+    children?: Snippet;
+    ref?: HTMLElement | null;
+};
+declare const PreviewCard: import("svelte").Component<Props, {}, "ref">;
+type PreviewCard = ReturnType<typeof PreviewCard>;
+export default PreviewCard;

package/dist/components/progress/Progress.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** Progress between 0 and `max`. Omit while the amount is unknown: the bar then runs back and forth. */
+		value?: number;
+		max?: number;
+		size?: 'sm' | 'md';
+		/** Accessible name, e.g. what is loading. */
+		label?: string;
+		ref?: HTMLDivElement | null;
+	};
+
+	let {
+		value,
+		max = 100,
+		size = 'md',
+		label,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: Props = $props();
+
+	let fraction = $derived(value === undefined ? undefined : Math.min(Math.max(value / max, 0), 1));
+</script>
+
+<div
+	{...rest}
+	bind:this={ref}
+	role="progressbar"
+	aria-label={label}
+	aria-valuemin={0}
+	aria-valuemax={max}
+	aria-valuenow={fraction === undefined ? undefined : fraction * max}
+	class={[
+		'progress',
+		`progress--${size}`,
+		{ 'progress--indeterminate': fraction === undefined },
+		className
+	]}
+>
+	<div
+		class="progress-bar"
+		style:width={fraction === undefined ? undefined : `${fraction * 100}%`}
+	></div>
+</div>
+
+<style>
+	@layer svelte-ui {
+		.progress {
+			width: 100%;
+			overflow: hidden;
+			background-color: var(--color-surface);
+			border-radius: 999px;
+		}
+
+		.progress--sm {
+			height: 4px;
+		}
+
+		.progress--md {
+			height: 8px;
+		}
+
+		.progress-bar {
+			height: 100%;
+			background-color: var(--color-accent);
+			border-radius: inherit;
+			transition: width 300ms ease;
+		}
+
+		.progress--indeterminate .progress-bar {
+			width: 40%;
+			animation: progress-slide 1.4s ease-in-out infinite;
+		}
+
+		@keyframes progress-slide {
+			from {
+				translate: -100% 0;
+			}
+
+			to {
+				translate: 250% 0;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.progress-bar {
+				transition: none;
+			}
+
+			/* A full, dimmed bar instead of the movement */
+			.progress--indeterminate .progress-bar {
+				width: 100%;
+				opacity: 0.4;
+				animation: none;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.progress {
+				border: 1px solid CanvasText;
+			}
+
+			.progress-bar {
+				forced-color-adjust: none;
+				background-color: Highlight;
+			}
+		}
+	}
+</style>

package/dist/components/progress/Progress.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** Progress between 0 and `max`. Omit while the amount is unknown: the bar then runs back and forth. */
+    value?: number;
+    max?: number;
+    size?: 'sm' | 'md';
+    /** Accessible name, e.g. what is loading. */
+    label?: string;
+    ref?: HTMLDivElement | null;
+};
+declare const Progress: import("svelte").Component<Props, {}, "ref">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/radio-group/RadioGroup.svelte

@@ -11,6 +11,7 @@
 		disabled?: boolean;
 		required?: boolean;
 		orientation?: 'vertical' | 'horizontal';
+		ref?: HTMLDivElement | null;
 		/** Horizontal Fields, each with a RadioGroupItem and a Label. */
 		children: Snippet;
 	};
@@ -21,6 +22,7 @@
 		disabled = false,
 		required = false,
 		orientation = 'vertical',
+		ref = $bindable(null),
 		class: className,
 		children,
 		...rest
@@ -49,6 +51,7 @@
 
 <div
 	{...rest}
+	bind:this={ref}
 	role="radiogroup"
 	aria-disabled={disabled || undefined}
 	aria-required={required || undefined}
@@ -59,28 +62,30 @@
 </div>
 
 <style>
-	.radio-group {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
+	@layer svelte-ui {
+		.radio-group {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
 
-	.radio-group--horizontal {
-		flex-direction: row;
-		flex-wrap: wrap;
-		gap: 12px 24px;
-	}
+		.radio-group--horizontal {
+			flex-direction: row;
+			flex-wrap: wrap;
+			gap: 12px 24px;
+		}
 
-	.radio-group--horizontal > :global(.field) {
-		width: auto;
-	}
+		.radio-group--horizontal > :global(.field) {
+			width: auto;
+		}
 
-	/* aria-invalid is not allowed on a radio, so the group carries it */
-	.radio-group[aria-invalid='true'] :global(.radio input) {
-		border-color: var(--color-destructive);
-	}
+		/* aria-invalid is not allowed on a radio, so the group carries it */
+		.radio-group[aria-invalid='true'] :global(.radio input) {
+			border-color: var(--color-destructive);
+		}
 
-	.radio-group[aria-invalid='true'] :global(.label) {
-		color: var(--color-destructive);
+		.radio-group[aria-invalid='true'] :global(.label) {
+			color: var(--color-destructive);
+		}
 	}
 </style>

package/dist/components/radio-group/RadioGroup.svelte.d.ts

@@ -8,9 +8,10 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     disabled?: boolean;
     required?: boolean;
     orientation?: 'vertical' | 'horizontal';
+    ref?: HTMLDivElement | null;
     /** Horizontal Fields, each with a RadioGroupItem and a Label. */
     children: Snippet;
 };
-declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+declare const RadioGroup: import("svelte").Component<Props, {}, "ref" | "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;