@noahbaumgartner/svelte-ui 0.0.5 → 0.0.7

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

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { LucideIcon } from '@lucide/svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+	import type { IconComponent } from '../../icon.js';
 
-	type Props = {
+	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. */
@@ -10,12 +11,14 @@
 		description?: string;
 		/** Muted text below, e.g. a date. */
 		meta?: string;
-		/** Any Lucide icon (import from `svelte-ui/icons`), shown in the top-left corner of the media. */
-		icon?: LucideIcon;
+		/** 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;
-		class?: string;
+		/** Custom description content instead of `description`. */
+		children?: Snippet;
+		ref?: HTMLElement | null;
 	};
 
 	let {
@@ -26,12 +29,17 @@
 		icon: Icon,
 		orientation = 'vertical',
 		media,
-		class: className
+		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]}
 >
@@ -43,8 +51,8 @@
 	</div>
 	<div class="preview-card-info">
 		<p class="preview-card-headline">
-			<span class="preview-card-title">{title}{description ? ':' : ''}</span>
-			{description}
+			<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>
@@ -53,114 +61,124 @@
 </svelte:element>
 
 <style>
-	.preview-card {
-		display: flex;
-		gap: 20px;
-		color: var(--color-text);
-		text-decoration: none;
-		border-radius: 14px;
-		outline: none;
-	}
+	@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;
-	}
+		a.preview-card:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: 2px;
+		}
 
-	.preview-card--vertical {
-		flex-direction: column;
-	}
+		.preview-card--vertical {
+			flex-direction: column;
+			max-width: 380px;
+		}
 
-	.preview-card--horizontal {
-		align-items: center;
-	}
+		.preview-card--horizontal {
+			align-items: center;
+		}
 
-	.preview-card-media {
-		position: relative;
-		flex-shrink: 0;
-		aspect-ratio: 1;
-		overflow: hidden;
-		border-radius: 14px;
-	}
+		.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--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;
-	}
+		.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);
-	}
+		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: 14px 0 0 0;
-	}
+		.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-icon :global(svg) {
+			width: 20px;
+			height: 20px;
+		}
 
-	.preview-card--horizontal .preview-card-icon {
-		width: 32px;
-		height: 32px;
-	}
+		.preview-card--horizontal .preview-card-icon {
+			width: 32px;
+			height: 32px;
+		}
 
-	.preview-card--horizontal .preview-card-icon :global(svg) {
-		width: 16px;
-		height: 16px;
-	}
+		.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-info {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			min-width: 0;
+		}
 
-	.preview-card-headline {
-		margin: 0;
-		font-size: 16px;
-	}
+		.preview-card-headline {
+			margin: 0;
+			font-size: 16px;
+		}
 
-	.preview-card-title {
-		font-weight: 600;
-	}
+		.preview-card-title {
+			font-weight: 600;
+		}
 
-	.preview-card-meta {
-		font-size: 14px;
-		color: var(--color-text-muted);
-	}
+		.preview-card-meta {
+			font-size: 14px;
+			color: var(--color-text-muted);
+		}
 
-	@media (min-width: 640px) {
-		.preview-card--horizontal .preview-card-media {
-			width: 168px;
+		@media (min-width: 640px) {
+			.preview-card--horizontal .preview-card-media {
+				width: 168px;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.preview-card-media > :global(*) {
+				transition: none;
+			}
 		}
-	}
 
-	@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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
-import type { LucideIcon } from '@lucide/svelte';
-type Props = {
+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. */
@@ -8,13 +9,15 @@ type Props = {
     description?: string;
     /** Muted text below, e.g. a date. */
     meta?: string;
-    /** Any Lucide icon (import from `svelte-ui/icons`), shown in the top-left corner of the media. */
-    icon?: LucideIcon;
+    /** 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;
-    class?: string;
+    /** Custom description content instead of `description`. */
+    children?: Snippet;
+    ref?: HTMLElement | null;
 };
-declare const PreviewCard: import("svelte").Component<Props, {}, "">;
+declare const PreviewCard: import("svelte").Component<Props, {}, "ref">;
 type PreviewCard = ReturnType<typeof PreviewCard>;
 export default PreviewCard;

package/dist/components/progress/Progress.svelte

@@ -8,15 +8,25 @@
 		size?: 'sm' | 'md';
 		/** Accessible name, e.g. what is loading. */
 		label?: string;
+		ref?: HTMLDivElement | null;
 	};
 
-	let { value, max = 100, size = 'md', label, class: className, ...rest }: Props = $props();
+	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}
@@ -36,53 +46,66 @@
 </div>
 
 <style>
-	.progress {
-		width: 100%;
-		overflow: hidden;
-		background-color: var(--color-surface);
-		border-radius: 999px;
-	}
-
-	.progress--sm {
-		height: 4px;
-	}
+	@layer svelte-ui {
+		.progress {
+			width: 100%;
+			overflow: hidden;
+			background-color: var(--color-surface);
+			border-radius: 999px;
+		}
 
-	.progress--md {
-		height: 8px;
-	}
+		.progress--sm {
+			height: 4px;
+		}
 
-	.progress-bar {
-		height: 100%;
-		background-color: var(--color-accent);
-		border-radius: inherit;
-		transition: width 300ms ease;
-	}
+		.progress--md {
+			height: 8px;
+		}
 
-	.progress--indeterminate .progress-bar {
-		width: 40%;
-		animation: progress-slide 1.4s ease-in-out infinite;
-	}
+		.progress-bar {
+			height: 100%;
+			background-color: var(--color-accent);
+			border-radius: inherit;
+			transition: width 300ms ease;
+		}
 
-	@keyframes progress-slide {
-		from {
-			translate: -100% 0;
+		.progress--indeterminate .progress-bar {
+			width: 40%;
+			animation: progress-slide 1.4s ease-in-out infinite;
 		}
 
-		to {
-			translate: 250% 0;
+		@keyframes progress-slide {
+			from {
+				translate: -100% 0;
+			}
+
+			to {
+				translate: 250% 0;
+			}
 		}
-	}
 
-	@media (prefers-reduced-motion: reduce) {
-		.progress-bar {
-			transition: none;
+		@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;
+			}
 		}
 
-		/* 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>