@noahbaumgartner/svelte-ui 0.0.4 → 0.0.6

package/dist/components/avatar/Avatar.svelte

@@ -1,27 +1,40 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import { User } from '@lucide/svelte';
+	import User from '../../internal/icons/User.svelte';
 
 	type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLSpanElement | null;
 		src?: string;
 		/** Describes the person; also the accessible name when the fallback is shown. */
 		alt: string;
 		/** Shown when there is no `src` or the image fails to load, e.g. initials. Defaults to a user icon. */
-		fallback?: string;
+		fallback?: string | Snippet;
 		size?: 'sm' | 'md' | 'lg';
 	};
 
-	let { src, alt, fallback, size = 'md', class: className, ...rest }: Props = $props();
+	let {
+		ref = $bindable(null),
+		src,
+		alt,
+		fallback,
+		size = 'md',
+		class: className,
+		...rest
+	}: Props = $props();
 
 	let failedSrc = $state<string>();
 </script>
 
-<span {...rest} class={['avatar', `avatar--${size}`, className]}>
+<span {...rest} bind:this={ref} class={['avatar', `avatar--${size}`, className]}>
 	{#if src && src !== failedSrc}
 		<img class="avatar-image" {src} {alt} onerror={() => (failedSrc = src)} />
 	{:else}
 		<span class="avatar-fallback" role="img" aria-label={alt}>
-			{#if fallback}
+			{#if typeof fallback === 'function'}
+				{@render fallback()}
+			{:else if fallback}
 				{fallback}
 			{:else}
 				<User class="avatar-icon" aria-hidden="true" />
@@ -31,55 +44,64 @@
 </span>
 
 <style>
-	.avatar {
-		display: inline-flex;
-		flex-shrink: 0;
-		overflow: hidden;
-		background-color: var(--color-surface);
-		color: var(--color-text-secondary);
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.avatar {
+			display: inline-flex;
+			flex-shrink: 0;
+			overflow: hidden;
+			background-color: var(--color-surface);
+			color: var(--color-text-secondary);
+			user-select: none;
+		}
 
-	.avatar--sm {
-		width: 24px;
-		height: 24px;
-		border-radius: 8px;
-		font-size: 10px;
-	}
+		.avatar--sm {
+			width: 24px;
+			height: 24px;
+			border-radius: 8px;
+			font-size: 10px;
+		}
 
-	.avatar--md {
-		width: 32px;
-		height: 32px;
-		border-radius: 10px;
-		font-size: 12px;
-	}
+		.avatar--md {
+			width: 32px;
+			height: 32px;
+			border-radius: 10px;
+			font-size: 12px;
+		}
 
-	.avatar--lg {
-		width: 40px;
-		height: 40px;
-		border-radius: 12px;
-		font-size: 14px;
-	}
+		.avatar--lg {
+			width: 40px;
+			height: 40px;
+			border-radius: 12px;
+			font-size: 14px;
+		}
 
-	.avatar-image {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
+		.avatar-image {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
 
-	.avatar-fallback {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 100%;
-		height: 100%;
-		font-family: inherit;
-		font-weight: 500;
-		text-transform: uppercase;
-	}
+		.avatar-fallback {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+			font-family: inherit;
+			font-weight: 500;
+			text-transform: uppercase;
+		}
+
+		.avatar-fallback :global(.avatar-icon) {
+			width: 60%;
+			height: 60%;
+		}
 
-	.avatar-fallback :global(.avatar-icon) {
-		width: 60%;
-		height: 60%;
+		@media (forced-colors: active) {
+			.avatar {
+				border: 1px solid CanvasText;
+				box-sizing: border-box;
+			}
+		}
 	}
 </style>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -1,12 +1,15 @@
+import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLSpanElement | null;
     src?: string;
     /** Describes the person; also the accessible name when the fallback is shown. */
     alt: string;
     /** Shown when there is no `src` or the image fails to load, e.g. initials. Defaults to a user icon. */
-    fallback?: string;
+    fallback?: string | Snippet;
     size?: 'sm' | 'md' | 'lg';
 };
-declare const Avatar: import("svelte").Component<Props, {}, "">;
+declare const Avatar: import("svelte").Component<Props, {}, "ref">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/avatar-group/AvatarGroup.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLDivElement | null;
+		/** Accessible name for the group, e.g. "Members". */
+		label?: string;
+		/** How many more there are than the Avatars shown; rendered as "+3" at the end. */
+		more?: number;
+		/** Size of the "+3"; match it to the Avatars' `size`. */
+		size?: 'sm' | 'md' | 'lg';
+		/** Replaces the "+3" content, given the `more` count. */
+		overflow?: Snippet<[count: number]>;
+		/** Avatars, overlapping each other. */
+		children: Snippet;
+	};
+
+	let {
+		ref = $bindable(null),
+		label,
+		more = 0,
+		size = 'md',
+		overflow,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
+</script>
+
+<div {...rest} bind:this={ref} role="group" aria-label={label} class={['avatar-group', className]}>
+	{@render children()}
+	{#if more > 0}
+		<span class={['avatar-group-more', `avatar-group-more--${size}`]}>
+			{#if overflow}{@render overflow(more)}{:else}+{more}{/if}
+		</span>
+	{/if}
+</div>
+
+<style>
+	@layer svelte-ui {
+		.avatar-group {
+			display: inline-flex;
+			align-items: center;
+		}
+
+		/* The ring in the page colour separates the overlapping avatars */
+		.avatar-group > :global(*) {
+			box-shadow: 0 0 0 2px var(--color-bg);
+		}
+
+		.avatar-group > :global(:not(:first-child)) {
+			margin-inline-start: -6px;
+		}
+
+		.avatar-group-more {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+			flex-shrink: 0;
+			padding: 0 6px;
+			font-weight: 500;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-text-secondary);
+			background-color: var(--color-surface);
+			user-select: none;
+		}
+
+		/* Same sizes and corners as Avatar */
+		.avatar-group-more--sm {
+			min-width: 24px;
+			height: 24px;
+			border-radius: 8px;
+			font-size: 10px;
+		}
+
+		.avatar-group-more--md {
+			min-width: 32px;
+			height: 32px;
+			border-radius: 10px;
+			font-size: 12px;
+		}
+
+		.avatar-group-more--lg {
+			min-width: 40px;
+			height: 40px;
+			border-radius: 12px;
+			font-size: 14px;
+		}
+
+		@media (forced-colors: active) {
+			.avatar-group > :global(*) {
+				outline: 2px solid Canvas;
+			}
+
+			.avatar-group-more {
+				border: 1px solid CanvasText;
+			}
+		}
+	}
+</style>

package/dist/components/avatar-group/AvatarGroup.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLDivElement | null;
+    /** Accessible name for the group, e.g. "Members". */
+    label?: string;
+    /** How many more there are than the Avatars shown; rendered as "+3" at the end. */
+    more?: number;
+    /** Size of the "+3"; match it to the Avatars' `size`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Replaces the "+3" content, given the `more` count. */
+    overflow?: Snippet<[count: number]>;
+    /** Avatars, overlapping each other. */
+    children: Snippet;
+};
+declare const AvatarGroup: import("svelte").Component<Props, {}, "ref">;
+type AvatarGroup = ReturnType<typeof AvatarGroup>;
+export default AvatarGroup;

package/dist/components/badge/Badge.svelte

@@ -1,49 +1,71 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
-	import type { LucideIcon } from '@lucide/svelte';
+	import type { IconComponent } from '../../icon.js';
 
 	type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+		/** The root element. Bindable. */
+		ref?: HTMLSpanElement | null;
 		variant?: 'primary' | 'secondary';
-		/** Any Lucide icon (import from `svelte-ui/icons`). */
-		icon?: LucideIcon;
+		/** Any icon component, e.g. from `@lucide/svelte`. */
+		icon?: IconComponent;
 		children: Snippet;
 	};
 
-	let { variant = 'secondary', icon: Icon, class: className, children, ...rest }: Props = $props();
+	let {
+		ref = $bindable(null),
+		variant = 'secondary',
+		icon: Icon,
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<span {...rest} class={['badge', `badge--${variant}`, className]}>
+<span {...rest} bind:this={ref} class={['badge', `badge--${variant}`, className]}>
 	{#if Icon}<Icon class="badge-icon" aria-hidden="true" />{/if}
 	{@render children()}
 </span>
 
 <style>
-	.badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 4px;
-		width: fit-content;
-		padding: 2px 8px;
-		font-family: inherit;
-		font-size: 12px;
-		border-radius: 6px;
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.badge {
+			display: inline-flex;
+			align-items: center;
+			gap: 4px;
+			width: fit-content;
+			padding: 2px 8px;
+			font-family: inherit;
+			font-size: 12px;
+			border-radius: 6px;
+			user-select: none;
+		}
 
-	.badge--primary {
-		background-color: var(--color-accent);
-		color: var(--color-accent-foreground);
-	}
+		.badge--primary {
+			background-color: var(--color-accent);
+			color: var(--color-accent-foreground);
+		}
 
-	.badge--secondary {
-		background-color: var(--color-surface);
-		color: var(--color-text);
-	}
+		.badge--secondary {
+			background-color: var(--color-surface);
+			color: var(--color-text);
+		}
+
+		.badge :global(.badge-icon) {
+			width: 12px;
+			height: 12px;
+			flex-shrink: 0;
+		}
+
+		@media (forced-colors: active) {
+			.badge {
+				border: 1px solid ButtonText;
+			}
 
-	.badge :global(.badge-icon) {
-		width: 12px;
-		height: 12px;
-		flex-shrink: 0;
+			.badge--primary {
+				border-color: Highlight;
+				border-width: 2px;
+			}
+		}
 	}
 </style>

package/dist/components/badge/Badge.svelte.d.ts

@@ -1,12 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { LucideIcon } from '@lucide/svelte';
+import type { IconComponent } from '../../icon.js';
 type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    /** The root element. Bindable. */
+    ref?: HTMLSpanElement | null;
     variant?: 'primary' | 'secondary';
-    /** Any Lucide icon (import from `svelte-ui/icons`). */
-    icon?: LucideIcon;
+    /** Any icon component, e.g. from `@lucide/svelte`. */
+    icon?: IconComponent;
     children: Snippet;
 };
-declare const Badge: import("svelte").Component<Props, {}, "">;
+declare const Badge: import("svelte").Component<Props, {}, "ref">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/dist/components/breadcrumb/Breadcrumb.svelte

@@ -3,35 +3,39 @@
 	import type { HTMLAttributes } from 'svelte/elements';
 
 	type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+		/** The nav element. Bindable. */
+		ref?: HTMLElement | null;
 		/** `BreadcrumbItem`s and `BreadcrumbEllipsis`es. */
 		children: Snippet;
 	};
 
-	let { class: className, children, ...rest }: Props = $props();
+	let { ref = $bindable(null), class: className, children, ...rest }: Props = $props();
 </script>
 
-<nav aria-label="Breadcrumb" {...rest} class={['breadcrumb', className]}>
+<nav aria-label="Breadcrumb" {...rest} bind:this={ref} class={['breadcrumb', className]}>
 	<ol class="breadcrumb-list">
 		{@render children()}
 	</ol>
 </nav>
 
 <style>
-	.breadcrumb-list {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 6px;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		font-size: 13px;
-		color: var(--color-text-muted);
-		overflow-wrap: anywhere;
-	}
+	@layer svelte-ui {
+		.breadcrumb-list {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 6px;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			font-size: 13px;
+			color: var(--color-text-muted);
+			overflow-wrap: anywhere;
+		}
 
-	/* Each item renders its own trailing separator; the last one has nothing to separate */
-	.breadcrumb-list :global(.breadcrumb-separator:last-child) {
-		display: none;
+		/* Each item renders its own trailing separator; the last one has nothing to separate */
+		.breadcrumb-list :global(.breadcrumb-separator:last-child) {
+			display: none;
+		}
 	}
 </style>

package/dist/components/breadcrumb/Breadcrumb.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /** The nav element. Bindable. */
+    ref?: HTMLElement | null;
     /** `BreadcrumbItem`s and `BreadcrumbEllipsis`es. */
     children: Snippet;
 };
-declare const Breadcrumb: import("svelte").Component<Props, {}, "">;
+declare const Breadcrumb: import("svelte").Component<Props, {}, "ref">;
 type Breadcrumb = ReturnType<typeof Breadcrumb>;
 export default Breadcrumb;

package/dist/components/breadcrumb/BreadcrumbEllipsis.svelte

@@ -1,21 +1,30 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import Ellipsis from '@lucide/svelte/icons/ellipsis';
+	import type { HTMLLiAttributes } from 'svelte/elements';
+	import Ellipsis from '../../internal/icons/Ellipsis.svelte';
 	import Button from '../button/Button.svelte';
 	import ContextMenu from '../context-menu/ContextMenu.svelte';
 	import BreadcrumbSeparator from './BreadcrumbSeparator.svelte';
 
-	type Props = {
+	type Props = Omit<HTMLLiAttributes, 'children'> & {
+		/** The li element. Bindable. */
+		ref?: HTMLLIElement | null;
 		/** Accessible name of the menu trigger. */
 		label?: string;
 		/** `ContextMenuItem`s for the collapsed items. */
 		children: Snippet;
 	};
 
-	let { label = 'More', children }: Props = $props();
+	let {
+		ref = $bindable(null),
+		label = 'More',
+		class: className,
+		children,
+		...rest
+	}: Props = $props();
 </script>
 
-<li class="breadcrumb-ellipsis">
+<li {...rest} bind:this={ref} class={['breadcrumb-ellipsis', className]}>
 	<ContextMenu>
 		{#snippet trigger(props)}
 			<Button {...props} variant="ghost" size="sm" icon={Ellipsis} {label} />
@@ -26,7 +35,9 @@
 <BreadcrumbSeparator />
 
 <style>
-	.breadcrumb-ellipsis {
-		display: inline-flex;
+	@layer svelte-ui {
+		.breadcrumb-ellipsis {
+			display: inline-flex;
+		}
 	}
 </style>

package/dist/components/breadcrumb/BreadcrumbEllipsis.svelte.d.ts

@@ -1,10 +1,13 @@
 import type { Snippet } from 'svelte';
-type Props = {
+import type { HTMLLiAttributes } from 'svelte/elements';
+type Props = Omit<HTMLLiAttributes, 'children'> & {
+    /** The li element. Bindable. */
+    ref?: HTMLLIElement | null;
     /** Accessible name of the menu trigger. */
     label?: string;
     /** `ContextMenuItem`s for the collapsed items. */
     children: Snippet;
 };
-declare const BreadcrumbEllipsis: import("svelte").Component<Props, {}, "">;
+declare const BreadcrumbEllipsis: import("svelte").Component<Props, {}, "ref">;
 type BreadcrumbEllipsis = ReturnType<typeof BreadcrumbEllipsis>;
 export default BreadcrumbEllipsis;