@sveltier/ui 0.0.0-stage → 0.1.0-alpha.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sveltier contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,83 @@
-# Temporary Holding Version
+# Sveltier
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The UI framework for AI coding agents, on Svelte 5.
+
+Coding agents do not remember your library, cannot see the screen, and learn by running and
+fixing. Sveltier is designed around all three, and the same choices help every developer.
+
+- **Finds the right information.** Props tables, `llms.txt` and `llms-full.txt` are generated
+  from the TypeScript types, and the typed sources ship in this package. An agent reads the API
+  of the version it installed, not a guess from its training data.
+- **Gets it right the first time.** `variant`, `size`, `density`, `color` and `rounded` mean the
+  same thing on every component, as literal types: a value that does not exist is a type error
+  that lists the ones that do.
+- **Fixes itself when wrong.** Every error has a stable code, says what happened and what to do,
+  and links to its entry in the docs. Development builds also warn about mistakes that types
+  cannot catch.
+- **Accessible without being asked.** Roles, focus and keys follow the WAI-ARIA Authoring
+  Practices, tested in Chromium, Firefox and WebKit.
+
+> **Alpha.** The API may still change between releases.
+
+## Install
+
+```sh
+npm install @sveltier/ui
+```
+
+Svelte 5.40 or later is required.
+
+## Set up
+
+Wrap the app in `UIProvider` with a theme pack, then use the components anywhere inside it.
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script>
+	import { UIProvider } from '@sveltier/ui';
+	import { monolith } from '@sveltier/ui/themes/monolith';
+	let { children } = $props();
+</script>
+
+<!-- Monolith, light or dark following the OS -->
+<UIProvider themes={monolith}>
+	{@render children()}
+</UIProvider>
+```
+
+```svelte
+<script>
+	import { Button, TextField } from '@sveltier/ui';
+	let email = $state('');
+</script>
+
+<TextField label="Email" type="email" required bind:value={email} />
+<Button variant="tonal">Save</Button>
+```
+
+Fonts are not bundled: each theme names its families and falls back to system fonts. See
+[Fonts](https://sveltier.com/getting-started/fonts).
+
+## What is inside
+
+- **Components:** Alert, Avatar, Badge, Button, ButtonGroup, Card, Chip, Divider, Icon, List,
+  ProgressCircular, ProgressLinear, SegmentedControl, Skeleton, Tabs.
+- **Forms:** Form, Field, TextField, Textarea, NumberField and NativeSelect, validated by the
+  HTML constraints first, then your rules.
+- **Primitives** for your own components: focus trap, roving focus, dismissable layers, portal,
+  inert background and scroll lock, anchored positioning, keyboard maps and typeahead, motion,
+  virtual lists.
+- **Theme engine:** five built-in theme packs (Monolith, Heritage, Aurora, Maison and Milano),
+  each in light and dark, with flash-free server rendering. Define your own with `defineTheme`.
+- **Zero runtime dependencies,** and a gzip size budget on every entry.
+
+## Docs
+
+- [sveltier.com](https://sveltier.com)
+- For agents: [llms.txt](https://sveltier.com/llms.txt) and
+  [llms-full.txt](https://sveltier.com/llms-full.txt)
+- [Error codes](https://sveltier.com/errors)
+
+## License
+
+[MIT](./LICENSE)

package/dist/components/Accordion/Accordion.svelte

@@ -0,0 +1,74 @@
+<script lang="ts" generics="T extends string | number">
+	// Sections that open and close, on the platform's <details>. See AccordionProps.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './accordion.css';
+	import type { AccordionDefaults, AccordionItem, AccordionProps } from './types.js';
+
+	let {
+		density,
+		items,
+		panel,
+		multiple = false,
+		value = $bindable(),
+		onchange,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: AccordionProps<T> = $props();
+
+	const resolve = useDefaults<AccordionDefaults>('Accordion', { density: 'default' });
+	const p = $derived(resolve({ density }));
+
+	// The sections of one accordion share a name, so the browser keeps at most one open.
+	const name = $props.id();
+
+	const CHEVRON = 'M5.6 8.6 12 15l6.4-6.4L20 10.2l-8 8-8-8z';
+
+	const list = $derived(Array.isArray(value) ? value : []);
+	const isOpen = (item: AccordionItem<T>) =>
+		multiple ? list.includes(item.value) : value === item.value;
+
+	function change(next: T | null | T[]) {
+		value = next;
+		(onchange as ((value: T | null | T[]) => void) | undefined)?.(next);
+	}
+
+	// The browser has opened or closed a section: its header, finding text in it, or `open` set
+	// from `value`, in which case the state already agrees.
+	function toggle(item: AccordionItem<T>, details: HTMLDetailsElement) {
+		if (details.open === isOpen(item)) return;
+		if (multiple) {
+			change(details.open ? [...list, item.value] : list.filter((other) => other !== item.value));
+		} else if (details.open) {
+			change(item.value);
+		} else if (!ref?.querySelector(':scope > details[open]')) {
+			// Closed because another opened: that one's own event sets the value.
+			change(null);
+		}
+	}
+</script>
+
+<div bind:this={ref} {...rest} class={['sv-accordion', sharedClasses(p, 'Accordion'), className]}>
+	{#each items as item (item.value)}
+		<details
+			class="sv-accordion__item"
+			name={multiple ? undefined : name}
+			open={isOpen(item)}
+			ontoggle={(event) => toggle(item, event.currentTarget)}
+		>
+			<!-- A disabled header takes focus and is announced, but does not toggle. -->
+			<summary
+				class="sv-accordion__header"
+				aria-disabled={item.disabled || undefined}
+				onclick={(event) => item.disabled && event.preventDefault()}
+			>
+				<span class="sv-accordion__title">{item.title}</span>
+				<svg class="sv-accordion__icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+					<path d={CHEVRON} />
+				</svg>
+			</summary>
+			<div class="sv-accordion__panel">{@render panel(item)}</div>
+		</details>
+	{/each}
+</div>

package/dist/components/Accordion/Accordion.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { AccordionProps } from './types.js';
+declare function $$render<T extends string | number>(): {
+    props: AccordionProps<T>;
+    exports: {};
+    bindings: "ref" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends string | number> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "ref" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string | number>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string | number>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Accordion: $$IsomorphicComponent;
+type Accordion<T extends string | number> = InstanceType<typeof Accordion<T>>;
+export default Accordion;

package/dist/components/Accordion/accordion.css

@@ -0,0 +1,88 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* Sections divided by hairlines, the headers as wide as the accordion. */
+	.sv-accordion {
+		border-block-start: var(--sv-hairline) solid var(--sv-color-border);
+	}
+
+	.sv-accordion__item {
+		border-block-end: var(--sv-hairline) solid var(--sv-color-border);
+	}
+
+	.sv-accordion__header {
+		display: flex;
+		gap: var(--sv-space-13);
+		align-items: center;
+		min-block-size: calc(var(--sv-control-lg) * var(--sv-density));
+		padding-block: calc(var(--sv-space-8) * var(--sv-density));
+		padding-inline: var(--sv-space-8);
+		border-radius: var(--sv-radius-sm);
+		box-sizing: border-box;
+		font-weight: var(--sv-weight-medium);
+		line-height: var(--sv-leading-snug);
+		list-style: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.sv-accordion__header::-webkit-details-marker {
+		display: none;
+	}
+
+	@media (hover: hover) {
+		.sv-accordion__header:not([aria-disabled='true']):hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	.sv-accordion__header[aria-disabled='true'] {
+		color: var(--sv-color-text-muted);
+		cursor: not-allowed;
+	}
+
+	.sv-accordion__title {
+		flex: 1;
+		min-inline-size: 0;
+	}
+
+	/* The chevron turns over as the section opens. */
+	.sv-accordion__icon {
+		flex: none;
+		inline-size: 1.272em;
+		block-size: 1.272em;
+		color: var(--sv-color-text-muted);
+		transition: transform var(--sv-duration-normal) var(--sv-ease);
+	}
+
+	.sv-accordion__item[open] > .sv-accordion__header .sv-accordion__icon {
+		transform: rotate(180deg);
+	}
+
+	.sv-accordion__panel {
+		padding-block: calc(var(--sv-space-5) * var(--sv-density))
+			calc(var(--sv-space-21) * var(--sv-density));
+		padding-inline: var(--sv-space-8);
+		color: var(--sv-color-text-muted);
+		line-height: var(--sv-leading-normal);
+	}
+
+	/*
+	 * The content fades in as it opens and out before it closes. The height itself snaps, as
+	 * only opacity and transform are animated; where ::details-content is not supported, the
+	 * section simply opens.
+	 */
+	.sv-accordion__item::details-content {
+		opacity: 0;
+		transform: translateY(calc(var(--sv-space-5) * -1));
+		transition-property: opacity, transform, content-visibility;
+		transition-duration: var(--sv-duration-normal);
+		transition-timing-function: var(--sv-ease);
+		transition-behavior: allow-discrete;
+	}
+
+	.sv-accordion__item[open]::details-content {
+		opacity: 1;
+		transform: none;
+	}
+}

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion.svelte';
+export type { AccordionDefaults, AccordionItem, AccordionProps } from './types.js';

package/dist/components/Accordion/index.js

@@ -0,0 +1 @@
+export { default as Accordion } from './Accordion.svelte';

package/dist/components/Accordion/types.d.ts

@@ -0,0 +1,64 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Density } from '../../core/props/types.js';
+/** The Accordion props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface AccordionDefaults {
+    /**
+     * Multiplies the padding of the headers and panels, never the text.
+     * @default 'default'
+     */
+    density: Density;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Accordion: AccordionDefaults;
+    }
+}
+/** One section: a header that opens and closes it, and the panel the `panel` snippet renders. */
+export interface AccordionItem<T extends string | number = string> {
+    /** Identifies the section in `value`. */
+    value: T;
+    /** The header's text. */
+    title: string;
+    /** Its header no longer opens or closes it; it keeps its state. */
+    disabled?: boolean;
+}
+/** One section open at a time: opening one closes the others. */
+interface Single<T> {
+    /**
+     * Lets several sections be open at once; `value` is then a list.
+     * @default false
+     */
+    multiple?: false;
+    /** The open section, or `null` when all are closed. Bindable. */
+    value?: T | null;
+    /** Called with the new value when the user opens or closes a section. */
+    onchange?: (value: T | null) => void;
+}
+/** Any number of sections open. */
+interface Multiple<T> {
+    multiple: true;
+    /** The open sections. Bindable. */
+    value?: T[];
+    /** Called with the new value when the user opens or closes a section. */
+    onchange?: (value: T[]) => void;
+}
+/**
+ * Sections that open and close under their headers, built on the platform's `<details>`: they
+ * work before scripts load, and finding text in the page opens the section it is in. One opens
+ * at a time unless `multiple` is set. `class`, `style`, `ref` and other attributes go to the
+ * root element.
+ *
+ * @example
+ * <Accordion items={[{ value: 'fees', title: 'Fees' }, { value: 'limits', title: 'Limits' }]} bind:value={open}>
+ *   {#snippet panel(item)}{answers[item.value]}{/snippet}
+ * </Accordion>
+ */
+export type AccordionProps<T extends string | number = string> = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<AccordionDefaults> & {
+    /** The sections, in order. */
+    items: readonly AccordionItem<T>[];
+    /** The content of a section, under its header. */
+    panel: Snippet<[AccordionItem<T>]>;
+} & (Single<T> | Multiple<T>)>;
+export {};

package/dist/components/Accordion/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Alert/Alert.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	// A message with a type, a title, actions and a close button. See AlertProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { useLocale } from '../../core/locale/locale.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './alert.css';
+	import type { AlertDefaults, AlertProps } from './types.js';
+
+	let {
+		variant,
+		color,
+		density,
+		rounded,
+		type,
+		title,
+		icon = true,
+		open = $bindable(true),
+		closable = false,
+		closeLabel,
+		onclose,
+		prepend,
+		actions,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: AlertProps = $props();
+
+	const resolve = useDefaults<AlertDefaults>('Alert', {
+		variant: 'tonal',
+		color: 'info',
+		density: 'default',
+		rounded: true
+	});
+	// A colour passed in wins over the type's.
+	const p = $derived(resolve({ variant, color: color ?? type, density, rounded }));
+	const locale = useLocale();
+
+	// Circles, a triangle and their marks on a 24-unit grid, cut out with evenodd.
+	const RING = 'M12 3a9 9 0 1 0 0 18 9 9 0 1 0 0-18zm0 2a7 7 0 1 1 0 14 7 7 0 1 1 0-14z';
+	const ICONS = {
+		info: `${RING}M11 7h2v2h-2zm0 3h2v7h-2z`,
+		success: `${RING}M7.6 12.3 9 10.9l2 2 4-4 1.4 1.4-5.4 5.4z`,
+		warning: 'M12 2.5 1.8 20.5h20.4zm0 4.1 6.7 11.9H5.3zM11 10h2v4h-2zm0 5h2v2h-2z',
+		error: `${RING}M11 7h2v6h-2zm0 8h2v2h-2z`
+	};
+	const CLOSE =
+		'M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4z';
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+</script>
+
+{#if open}
+	<div
+		bind:this={ref}
+		{...rest}
+		role={type === 'warning' || type === 'error' ? 'alert' : 'status'}
+		class={['sv-alert', sharedClasses(p, 'Alert'), className]}
+	>
+		{#if prepend}
+			<span class="sv-alert__icon">{@render prepend()}</span>
+		{:else if icon && type}
+			<span class="sv-alert__icon">
+				<svg viewBox="0 0 24 24" fill="currentColor" fill-rule="evenodd" aria-hidden="true">
+					<path d={ICONS[type]} />
+				</svg>
+			</span>
+		{/if}
+		<div class="sv-alert__content">
+			{#if title}<div class="sv-alert__title">{title}</div>{/if}
+			{#if children}<div>{@render children()}</div>{/if}
+			{#if actions}<div class="sv-alert__actions">{@render actions()}</div>{/if}
+		</div>
+		{#if closable}
+			<button
+				type="button"
+				class="sv-alert__close"
+				aria-label={closeLabel ?? locale.t('close')}
+				onclick={close}
+			>
+				<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={CLOSE} /></svg>
+			</button>
+		{/if}
+	</div>
+{/if}

package/dist/components/Alert/Alert.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { AlertProps } from './types.js';
+declare const Alert: import("svelte").Component<AlertProps, {}, "ref" | "open">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/Alert/alert.css

@@ -0,0 +1,78 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* Icon, message, close, each only when present; padding on the Fibonacci scale. */
+	.sv-alert {
+		display: flex;
+		gap: var(--sv-space-13);
+		align-items: flex-start;
+		box-sizing: border-box;
+		padding: calc(var(--sv-space-13) * var(--sv-density))
+			calc(var(--sv-space-21) * var(--sv-density));
+		border: var(--sv-hairline) solid var(--sv-variant-border);
+		/* The control radius, never rounder than a card, even where controls are pills. */
+		border-radius: var(--sv-rounded, min(var(--sv-radius-md), var(--sv-radius-lg)));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-variant-shadow);
+		color: var(--sv-variant-fg);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-snug);
+	}
+
+	/* Icons are φ^½ of the text, centred on the first line. */
+	.sv-alert__icon {
+		display: inline-flex;
+		flex: none;
+		block-size: calc(1em * var(--sv-leading-snug));
+		align-items: center;
+	}
+
+	:where(.sv-alert__icon) svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	.sv-alert__content {
+		display: grid;
+		flex: 1;
+		gap: var(--sv-space-5);
+		min-inline-size: 0;
+	}
+
+	.sv-alert__title {
+		font-weight: var(--sv-weight-semibold);
+	}
+
+	.sv-alert__actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--sv-space-8);
+		margin-block-start: var(--sv-space-5);
+	}
+
+	.sv-alert__close {
+		display: inline-grid;
+		flex: none;
+		place-items: center;
+		inline-size: 1.618em;
+		block-size: 1.618em;
+		margin-block: -0.191em;
+		padding: 0;
+		border: 0;
+		border-radius: 50%;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	@media (hover: hover) {
+		.sv-alert__close:hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	.sv-alert__close svg {
+		inline-size: 1em;
+		block-size: 1em;
+	}
+}

package/dist/components/Alert/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.svelte';
+export type { AlertDefaults, AlertProps } from './types.js';

package/dist/components/Alert/index.js

@@ -0,0 +1 @@
+export { default as Alert } from './Alert.svelte';

package/dist/components/Alert/types.d.ts

@@ -0,0 +1,67 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ElementProps } from '../../core/props/element.js';
+import type { Color, Density, Rounded, Variant } from '../../core/props/types.js';
+/** The Alert props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface AlertDefaults {
+    /**
+     * Visual weight.
+     * @default 'tonal'
+     */
+    variant: Variant;
+    /**
+     * The colour, when there is no `type` to take it from.
+     * @default 'info'
+     */
+    color: Color;
+    /**
+     * Multiplies the padding.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../../core/defaults/context.js' {
+    interface ComponentDefaults {
+        Alert: AlertDefaults;
+    }
+}
+/** A message about something that happened or needs attention. */
+export type AlertProps = ElementProps<HTMLDivElement, HTMLAttributes<HTMLDivElement>, Partial<AlertDefaults> & {
+    /**
+     * What kind of message: sets the colour and the icon. Warnings and errors are announced at
+     * once (`role="alert"`), the others politely (`role="status"`).
+     */
+    type?: 'info' | 'success' | 'warning' | 'error';
+    /** A short summary, above the text. */
+    title?: string;
+    /**
+     * Shows the icon of the `type`.
+     * @default true
+     */
+    icon?: boolean;
+    /**
+     * Shown while true; a closable alert sets it to false. Bindable.
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Adds a button that closes the alert and calls `onclose`.
+     * @default false
+     */
+    closable?: boolean;
+    /** The name of the close button. Defaults to the locale's `close`. */
+    closeLabel?: string;
+    /** Called when the close button closes the alert. */
+    onclose?: () => void;
+    /** Content in place of the type's icon. */
+    prepend?: Snippet;
+    /** Buttons or links after the text, such as `Retry`. */
+    actions?: Snippet;
+    /** The message. */
+    children?: Snippet;
+}>;

package/dist/components/Alert/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	// An image with a fallback of initials or an icon. See AvatarProps for the props.
+	import { useDefaults } from '../../core/defaults/context.js';
+	import { sharedClasses } from '../../core/props/classes.js';
+	import './avatar.css';
+	import type { AvatarDefaults, AvatarProps } from './types.js';
+
+	let {
+		size,
+		variant,
+		color,
+		rounded,
+		src,
+		alt,
+		children,
+		class: className,
+		ref = $bindable(null),
+		...rest
+	}: AvatarProps = $props();
+
+	const resolve = useDefaults<AvatarDefaults>('Avatar', {
+		size: 'md',
+		variant: 'tonal',
+		color: 'neutral',
+		rounded: 'full'
+	});
+	const p = $derived(resolve({ size, variant, color, rounded }));
+
+	// The image that failed, so a new src gets its own chance.
+	let failed = $state<string>();
+	const image = $derived(src && src !== failed ? src : undefined);
+</script>
+
+<span
+	bind:this={ref}
+	{...rest}
+	role={alt ? 'img' : undefined}
+	aria-label={alt || undefined}
+	aria-hidden={alt ? undefined : 'true'}
+	class={['sv-avatar', sharedClasses(p, 'Avatar'), className]}
+>
+	{#if image}
+		<img class="sv-avatar__image" src={image} alt="" onerror={() => (failed = image)} />
+	{:else}
+		{@render children?.()}
+	{/if}
+</span>

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

@@ -0,0 +1,4 @@
+import type { AvatarProps } from './types.js';
+declare const Avatar: import("svelte").Component<AvatarProps, {}, "ref">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;