Avatar

<script lang="ts" module>
	export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
	export type AvatarShape = 'circle' | 'square';
	export type AvatarStatus = 'online' | 'away' | 'offline';
	export type AvatarFallback = 'initials' | 'icon';

	/*
	 * Initials and the fallback colour are pure functions of the name, so the server and the
	 * browser agree and the same person keeps the same colour on every page. Both are exported
	 * for an avatar group or a member list that needs the same answer.
	 */
	const LETTER = /[\p{L}\p{N}]/u;
	/* Scripts whose names are one character per syllable: one character is the convention. */
	const CJK = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
	/* Scripts whose letters join; a zero-width non-joiner keeps two initials as two letters. */
	const JOINING = /[\p{Script=Arabic}\p{Script=Syriac}\p{Script=Nko}\p{Script=Mongolian}]/u;

	/*
	 * Grapheme clusters keep a combining mark or a conjunct with its letter. Segmentation is the
	 * same in every language, so it runs with the root locale rather than the host's default.
	 */
	const segmenter =
		typeof Intl.Segmenter === 'function'
			? new Intl.Segmenter('und', { granularity: 'grapheme' })
			: undefined;

	const graphemes = (text: string): string[] =>
		segmenter ? Array.from(segmenter.segment(text), (s) => s.segment) : Array.from(text);

	const firstLetter = (word: string) => graphemes(word).find((g) => LETTER.test(g)) ?? '';

	/*
	 * Without a locale, uppercase the same way on every machine so SSR and hydration match. An
	 * empty or malformed language tag falls back to that rather than throwing.
	 */
	const upper = (text: string, locale?: string) => {
		if (!locale) return text.toUpperCase();
		try {
			return text.toLocaleUpperCase(locale);
		} catch {
			return text.toUpperCase();
		}
	};

	/** First letters of the first and last words; one letter for one word or a CJK name. */
	export function avatarInitials(name: string, locale?: string): string {
		const words = name
			.normalize('NFC')
			.trim()
			.split(/\s+/)
			.filter((word) => LETTER.test(word));
		if (words.length === 0) return '';
		const first = firstLetter(words[0]);
		if (words.length === 1 || CJK.test(first)) return upper(first, locale);
		const last = firstLetter(words[words.length - 1]);
		const joiner = JOINING.test(first) && JOINING.test(last) ? '‌' : '';
		return upper(first + joiner + last, locale);
	}

	/** A stable index into a palette of `count` colours: FNV-1a over the normalised name. */
	export function avatarToneIndex(name: string, count: number): number {
		let hash = 0x811c9dc5;
		for (const unit of name.normalize('NFC').trim()) {
			hash ^= unit.codePointAt(0) ?? 0;
			hash = Math.imul(hash, 0x01000193);
		}
		return (hash >>> 0) % count;
	}
</script>

<script lang="ts">
	interface Props {
		/** The person's or organisation's name: the accessible name and the source of the initials. */
		name: string;
		/** Image URL. Omitted, or failing to load, the initials show instead. */
		src?: string;
		/** Fixed size step: 24, 32, 40, 48 or 64 px. */
		size?: AvatarSize;
		/** Circle for people, rounded square for organisations. */
		shape?: AvatarShape;
		/** Set when the name is visible beside the avatar, so it is not read twice. */
		decorative?: boolean;
		/** Presence dot, with its word available to screen readers. */
		status?: AvatarStatus;
		/** The status word read by screen readers, for other languages. Defaults to Online, Away or Offline. */
		statusLabel?: string;
		/** Override the derived initials, for a name the rule gets wrong. */
		initials?: string;
		/** What shows without an image: initials, or a generic person or building icon. */
		fallback?: AvatarFallback;
		/** Language of the name; uppercases initials for it (Turkish i becomes İ) and sets lang. */
		lang?: string;
		/** Extra classes on the root, for margins. */
		class?: string;
	}

	let {
		name,
		src,
		size = 'md',
		shape = 'circle',
		decorative = false,
		status,
		statusLabel,
		initials,
		fallback = 'initials',
		lang,
		class: className
	}: Props = $props();

	/*
	 * One frame for all three fillings. Each step sets the box, the initials size, the square's
	 * corner, the status dot and the width of the cut-out around it; the initials sit at about
	 * 0.4 of the box. Complete class names, never interpolated.
	 */
	const SIZES: Record<AvatarSize, { root: string; px: number }> = {
		xs: {
			root: '[--_box:1.5rem] [--_corner:0.375rem] [--_dot:0.5rem] [--_cut:2px] text-[0.625rem]',
			px: 24
		},
		sm: {
			root: '[--_box:2rem] [--_corner:0.375rem] [--_dot:0.625rem] [--_cut:2px] text-[0.8125rem]',
			px: 32
		},
		md: {
			root: '[--_box:2.5rem] [--_corner:0.5rem] [--_dot:0.75rem] [--_cut:2px] text-base',
			px: 40
		},
		lg: {
			root: '[--_box:3rem] [--_corner:0.5rem] [--_dot:0.875rem] [--_cut:2px] text-lg',
			px: 48
		},
		xl: {
			root: '[--_box:4rem] [--_corner:0.75rem] [--_dot:1rem] [--_cut:3px] text-2xl',
			px: 64
		}
	};

	/* --_r is the corner the status dot sits on: half the box for a circle, the corner for a square. */
	const SHAPES: Record<AvatarShape, string> = {
		circle: 'avatar--circle',
		square: 'avatar--square'
	};

	/*
	 * Initials fills, picked by a hash of the name. Each is one --avatar-tone-N fill and its
	 * --avatar-tone-N-ink; every default pair clears 7:1, and none is so saturated that a list
	 * of members reads as confetti. Complete class names, never interpolated.
	 */
	const TONES = [
		'bg-(--_tone-1) text-(--_tone-1-ink)',
		'bg-(--_tone-2) text-(--_tone-2-ink)',
		'bg-(--_tone-3) text-(--_tone-3-ink)',
		'bg-(--_tone-4) text-(--_tone-4-ink)',
		'bg-(--_tone-5) text-(--_tone-5-ink)',
		'bg-(--_tone-6) text-(--_tone-6-ink)',
		'bg-(--_tone-7) text-(--_tone-7-ink)',
		'bg-(--_tone-8) text-(--_tone-8-ink)'
	];

	const STATUS: Record<AvatarStatus, { dot: string; label: string }> = {
		online: { dot: 'bg-(--_online)', label: 'Online' },
		away: { dot: 'avatar__status--away', label: 'Away' },
		offline: { dot: 'avatar__status--offline bg-(--_surface)', label: 'Offline' }
	};

	const step = $derived(SIZES[size] ?? SIZES.md);
	const letters = $derived((initials ?? avatarInitials(name, lang)).trim());
	const cjk = $derived(CJK.test(letters));
	const tone = $derived(TONES[avatarToneIndex(name, TONES.length)]);

	/* Reset whenever src changes, so a new or restored URL gets its own attempt. */
	let failed = $derived.by(() => {
		void src;
		return false;
	});
	const showImage = $derived(Boolean(src) && !failed);
	const showInitials = $derived(!showImage && fallback === 'initials' && letters !== '');
	const presence = $derived(status ? STATUS[status] : undefined);
	/* A blank name has nothing to announce, so the frame is hidden as if decorative. */
	const hidden = $derived(decorative || name.trim() === '');
</script>

<span
	class={[
		'avatar relative inline-flex size-(--_box) shrink-0 align-middle',
		SHAPES[shape] ?? SHAPES.circle,
		step.root,
		className
	]}
>
	<span
		class={[
			'avatar__frame relative grid size-full place-items-center overflow-hidden',
			shape === 'square' ? 'rounded-(--_corner)' : 'rounded-full',
			showInitials ? tone : 'bg-(--_fill) text-(--_muted)'
		]}
		role={hidden ? undefined : 'img'}
		aria-label={hidden ? undefined : name}
		aria-hidden={hidden ? 'true' : undefined}
		lang={lang || undefined}
	>
		{#if showImage}
			<!-- The frame carries the name, so the image itself is unlabelled: a broken image then
			     draws nothing before the initials replace it. -->
			<img
				class="size-full object-cover"
				{src}
				alt=""
				width={step.px}
				height={step.px}
				decoding="async"
				onerror={() => (failed = true)}
			/>
		{:else if showInitials}
			<span
				class="avatar__initials leading-none font-medium tracking-normal whitespace-nowrap select-none"
				data-cjk={cjk ? '' : undefined}>{letters}</span
			>
		{:else if shape === 'square'}
			<!-- A building for an organisation without a mark. -->
			<svg class="size-[62.5%]" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
				<path
					d="M6 3.5A1.5 1.5 0 0 1 7.5 2h9A1.5 1.5 0 0 1 18 3.5V20h1.25a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1 0-1.5H6V3.5Zm4 14.25V20h4v-2.25a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75ZM9 5.5v1.5h2V5.5H9Zm4 0v1.5h2V5.5h-2Zm-4 3.5v1.5h2V9H9Zm4 0v1.5h2V9h-2Zm-4 3.5V14h2v-1.5H9Zm4 0V14h2v-1.5h-2Z"
				/>
			</svg>
		{:else}
			<!-- A head and shoulders, cropped by the frame like a portrait. -->
			<svg class="mt-[18%] size-full" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
				<circle cx="12" cy="8.5" r="4.25" />
				<path d="M2.5 24c.6-5.6 4.6-9.25 9.5-9.25s8.9 3.65 9.5 9.25H2.5Z" />
			</svg>
		{/if}
	</span>
	{#if presence}
		<span class={['avatar__status absolute size-(--_dot) rounded-full', presence.dot]}>
			<span class="sr-only">{statusLabel ?? presence.label}</span>
		</span>
	{/if}
</span>

<style>
	/*
	 * Public tokens: set --avatar-* on the avatar or any ancestor to retone it. --avatar-surface
	 * is the page colour behind the avatar, used for the cut-out around the status dot.
	 */
	.avatar {
		--_fill: var(--avatar-fill, #f4f4f5);
		--_muted: var(--avatar-muted, #71717a);
		--_hairline: var(--avatar-hairline, rgb(0 0 0 / 0.08));
		--_surface: var(--avatar-surface, #ffffff);
		--_online: var(--avatar-online, #059669);
		--_away: var(--avatar-away, #d97706);
		--_offline: var(--avatar-offline, #71717a);

		/* Initials fills and their ink: sky, emerald, amber, rose, violet, lime, orange, indigo. */
		--_tone-1: var(--avatar-tone-1, #dff2fe);
		--_tone-1-ink: var(--avatar-tone-1-ink, #024a70);
		--_tone-2: var(--avatar-tone-2, #d0fae5);
		--_tone-2-ink: var(--avatar-tone-2-ink, #004f3b);
		--_tone-3: var(--avatar-tone-3, #fef3c6);
		--_tone-3-ink: var(--avatar-tone-3-ink, #7b3306);
		--_tone-4: var(--avatar-tone-4, #ffe4e6);
		--_tone-4-ink: var(--avatar-tone-4-ink, #8b0836);
		--_tone-5: var(--avatar-tone-5, #ede9fe);
		--_tone-5-ink: var(--avatar-tone-5-ink, #4d179a);
		--_tone-6: var(--avatar-tone-6, #ecfcca);
		--_tone-6-ink: var(--avatar-tone-6-ink, #35530e);
		--_tone-7: var(--avatar-tone-7, #ffedd4);
		--_tone-7-ink: var(--avatar-tone-7-ink, #7e2a0c);
		--_tone-8: var(--avatar-tone-8, #e0e7ff);
		--_tone-8-ink: var(--avatar-tone-8-ink, #312c85);
	}

	/* The corner the dot sits on, for the dot's position formula below. */
	.avatar--circle {
		--_r: calc(var(--_box) / 2);
	}

	.avatar--square {
		--_r: var(--_corner);
	}

	/*
	 * Hairline over every filling, so a pale photo or a light tint keeps its edge on a white
	 * page. Drawn above the image as a pseudo-element because an inset shadow on the frame
	 * would sit beneath it.
	 */
	.avatar__frame::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: inset 0 0 0 1px var(--_hairline);
		pointer-events: none;
	}

	/*
	 * The dot's centre sits on the frame's edge at 45 degrees: r(1 − cos 45°) in from the
	 * corner of the box. The page-coloured ring cuts it out of the photo beneath.
	 */
	.avatar__status {
		inset-inline-end: calc(var(--_r) * 0.2929 - var(--_dot) / 2);
		inset-block-end: calc(var(--_r) * 0.2929 - var(--_dot) / 2);
		box-shadow: 0 0 0 var(--_cut) var(--_surface);
	}

	/*
	 * Each state has its own shape as well as its colour: online is a full dot, away a crescent
	 * (the dot with a page-coloured bite out of its top start) and offline a ring.
	 */
	.avatar__status--away {
		background: radial-gradient(
			circle at 12% 12%,
			var(--_surface) 0 44%,
			var(--_away) calc(44% + 0.5px)
		);
	}

	.avatar__status--away:dir(rtl) {
		background: radial-gradient(
			circle at 88% 12%,
			var(--_surface) 0 44%,
			var(--_away) calc(44% + 0.5px)
		);
	}

	.avatar__status--offline {
		box-shadow:
			inset 0 0 0 calc(var(--_dot) * 0.2) var(--_offline),
			0 0 0 var(--_cut) var(--_surface);
	}

	/*
	 * Latin capitals centre on their cap height rather than the line box, which otherwise sits
	 * them a little low. CJK characters fill the em square and are already centred.
	 */
	@supports (text-box: trim-both cap alphabetic) {
		.avatar__initials:not([data-cjk]) {
			text-box: trim-both cap alphabetic;
		}
	}
</style>

<script lang="ts" module>
	export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
	export type AvatarShape = 'circle' | 'square';
	export type AvatarStatus = 'online' | 'away' | 'offline';
	export type AvatarFallback = 'initials' | 'icon';

	/*
	 * Initials and the fallback colour are pure functions of the name, so the server and the
	 * browser agree and the same person keeps the same colour on every page. Both are exported
	 * for an avatar group or a member list that needs the same answer.
	 */
	const LETTER = /[\p{L}\p{N}]/u;
	/* Scripts whose names are one character per syllable: one character is the convention. */
	const CJK = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
	/* Scripts whose letters join; a zero-width non-joiner keeps two initials as two letters. */
	const JOINING = /[\p{Script=Arabic}\p{Script=Syriac}\p{Script=Nko}\p{Script=Mongolian}]/u;

	/*
	 * Grapheme clusters keep a combining mark or a conjunct with its letter. Segmentation is the
	 * same in every language, so it runs with the root locale rather than the host's default.
	 */
	const segmenter =
		typeof Intl.Segmenter === 'function'
			? new Intl.Segmenter('und', { granularity: 'grapheme' })
			: undefined;

	const graphemes = (text: string): string[] =>
		segmenter ? Array.from(segmenter.segment(text), (s) => s.segment) : Array.from(text);

	const firstLetter = (word: string) => graphemes(word).find((g) => LETTER.test(g)) ?? '';

	/*
	 * Without a locale, uppercase the same way on every machine so SSR and hydration match. An
	 * empty or malformed language tag falls back to that rather than throwing.
	 */
	const upper = (text: string, locale?: string) => {
		if (!locale) return text.toUpperCase();
		try {
			return text.toLocaleUpperCase(locale);
		} catch {
			return text.toUpperCase();
		}
	};

	/** First letters of the first and last words; one letter for one word or a CJK name. */
	export function avatarInitials(name: string, locale?: string): string {
		const words = name
			.normalize('NFC')
			.trim()
			.split(/\s+/)
			.filter((word) => LETTER.test(word));
		if (words.length === 0) return '';
		const first = firstLetter(words[0]);
		if (words.length === 1 || CJK.test(first)) return upper(first, locale);
		const last = firstLetter(words[words.length - 1]);
		const joiner = JOINING.test(first) && JOINING.test(last) ? '‌' : '';
		return upper(first + joiner + last, locale);
	}

	/** A stable index into a palette of `count` colours: FNV-1a over the normalised name. */
	export function avatarToneIndex(name: string, count: number): number {
		let hash = 0x811c9dc5;
		for (const unit of name.normalize('NFC').trim()) {
			hash ^= unit.codePointAt(0) ?? 0;
			hash = Math.imul(hash, 0x01000193);
		}
		return (hash >>> 0) % count;
	}
</script>

<script lang="ts">
	interface Props {
		/** The person's or organisation's name: the accessible name and the source of the initials. */
		name: string;
		/** Image URL. Omitted, or failing to load, the initials show instead. */
		src?: string;
		/** Fixed size step: 24, 32, 40, 48 or 64 px. */
		size?: AvatarSize;
		/** Circle for people, rounded square for organisations. */
		shape?: AvatarShape;
		/** Set when the name is visible beside the avatar, so it is not read twice. */
		decorative?: boolean;
		/** Presence dot, with its word available to screen readers. */
		status?: AvatarStatus;
		/** The status word read by screen readers, for other languages. Defaults to Online, Away or Offline. */
		statusLabel?: string;
		/** Override the derived initials, for a name the rule gets wrong. */
		initials?: string;
		/** What shows without an image: initials, or a generic person or building icon. */
		fallback?: AvatarFallback;
		/** Language of the name; uppercases initials for it (Turkish i becomes İ) and sets lang. */
		lang?: string;
		/** Extra classes on the root, for margins. */
		class?: string;
	}

	let {
		name,
		src,
		size = 'md',
		shape = 'circle',
		decorative = false,
		status,
		statusLabel,
		initials,
		fallback = 'initials',
		lang,
		class: className
	}: Props = $props();

	/*
	 * One frame for all three fillings. Each step sets the box, the initials size, the square's
	 * corner, the status dot and the width of the cut-out around it; the initials sit at about
	 * 0.4 of the box. Complete class names, never interpolated.
	 */
	const SIZES: Record<AvatarSize, { root: string; px: number }> = {
		xs: {
			root: '[--_box:1.5rem] [--_corner:0.375rem] [--_dot:0.5rem] [--_cut:2px] text-[0.625rem]',
			px: 24
		},
		sm: {
			root: '[--_box:2rem] [--_corner:0.375rem] [--_dot:0.625rem] [--_cut:2px] text-[0.8125rem]',
			px: 32
		},
		md: {
			root: '[--_box:2.5rem] [--_corner:0.5rem] [--_dot:0.75rem] [--_cut:2px] text-base',
			px: 40
		},
		lg: {
			root: '[--_box:3rem] [--_corner:0.5rem] [--_dot:0.875rem] [--_cut:2px] text-lg',
			px: 48
		},
		xl: {
			root: '[--_box:4rem] [--_corner:0.75rem] [--_dot:1rem] [--_cut:3px] text-2xl',
			px: 64
		}
	};

	/* --_r is the corner the status dot sits on: half the box for a circle, the corner for a square. */
	const SHAPES: Record<AvatarShape, string> = {
		circle: 'avatar--circle',
		square: 'avatar--square'
	};

	/*
	 * Initials fills, picked by a hash of the name. Each is one --avatar-tone-N fill and its
	 * --avatar-tone-N-ink; every default pair clears 7:1, and none is so saturated that a list
	 * of members reads as confetti. Complete class names, never interpolated.
	 */
	const TONES = [
		'bg-(--_tone-1) text-(--_tone-1-ink)',
		'bg-(--_tone-2) text-(--_tone-2-ink)',
		'bg-(--_tone-3) text-(--_tone-3-ink)',
		'bg-(--_tone-4) text-(--_tone-4-ink)',
		'bg-(--_tone-5) text-(--_tone-5-ink)',
		'bg-(--_tone-6) text-(--_tone-6-ink)',
		'bg-(--_tone-7) text-(--_tone-7-ink)',
		'bg-(--_tone-8) text-(--_tone-8-ink)'
	];

	const STATUS: Record<AvatarStatus, { dot: string; label: string }> = {
		online: { dot: 'bg-(--_online)', label: 'Online' },
		away: { dot: 'avatar__status--away', label: 'Away' },
		offline: { dot: 'avatar__status--offline bg-(--_surface)', label: 'Offline' }
	};

	const step = $derived(SIZES[size] ?? SIZES.md);
	const letters = $derived((initials ?? avatarInitials(name, lang)).trim());
	const cjk = $derived(CJK.test(letters));
	const tone = $derived(TONES[avatarToneIndex(name, TONES.length)]);

	/* Reset whenever src changes, so a new or restored URL gets its own attempt. */
	let failed = $derived.by(() => {
		void src;
		return false;
	});
	const showImage = $derived(Boolean(src) && !failed);
	const showInitials = $derived(!showImage && fallback === 'initials' && letters !== '');
	const presence = $derived(status ? STATUS[status] : undefined);
	/* A blank name has nothing to announce, so the frame is hidden as if decorative. */
	const hidden = $derived(decorative || name.trim() === '');
</script>

<span
	class={[
		'avatar relative inline-flex size-(--_box) shrink-0 align-middle',
		SHAPES[shape] ?? SHAPES.circle,
		step.root,
		className
	]}
>
	<span
		class={[
			'avatar__frame relative grid size-full place-items-center overflow-hidden',
			shape === 'square' ? 'rounded-(--_corner)' : 'rounded-full',
			showInitials ? tone : 'bg-(--_fill) text-(--_muted)'
		]}
		role={hidden ? undefined : 'img'}
		aria-label={hidden ? undefined : name}
		aria-hidden={hidden ? 'true' : undefined}
		lang={lang || undefined}
	>
		{#if showImage}
			<!-- The frame carries the name, so the image itself is unlabelled: a broken image then
			     draws nothing before the initials replace it. -->
			<img
				class="size-full object-cover"
				{src}
				alt=""
				width={step.px}
				height={step.px}
				decoding="async"
				onerror={() => (failed = true)}
			/>
		{:else if showInitials}
			<span
				class="avatar__initials leading-none font-medium tracking-normal whitespace-nowrap select-none"
				data-cjk={cjk ? '' : undefined}>{letters}</span
			>
		{:else if shape === 'square'}
			<!-- A building for an organisation without a mark. -->
			<svg class="size-[62.5%]" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
				<path
					d="M6 3.5A1.5 1.5 0 0 1 7.5 2h9A1.5 1.5 0 0 1 18 3.5V20h1.25a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1 0-1.5H6V3.5Zm4 14.25V20h4v-2.25a.75.75 0 0 0-.75-.75h-2.5a.75.75 0 0 0-.75.75ZM9 5.5v1.5h2V5.5H9Zm4 0v1.5h2V5.5h-2Zm-4 3.5v1.5h2V9H9Zm4 0v1.5h2V9h-2Zm-4 3.5V14h2v-1.5H9Zm4 0V14h2v-1.5h-2Z"
				/>
			</svg>
		{:else}
			<!-- A head and shoulders, cropped by the frame like a portrait. -->
			<svg class="mt-[18%] size-full" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
				<circle cx="12" cy="8.5" r="4.25" />
				<path d="M2.5 24c.6-5.6 4.6-9.25 9.5-9.25s8.9 3.65 9.5 9.25H2.5Z" />
			</svg>
		{/if}
	</span>
	{#if presence}
		<span class={['avatar__status absolute size-(--_dot) rounded-full', presence.dot]}>
			<span class="sr-only">{statusLabel ?? presence.label}</span>
		</span>
	{/if}
</span>

<style>
	/*
	 * Public tokens: set --avatar-* on the avatar or any ancestor to retone it. --avatar-surface
	 * is the page colour behind the avatar, used for the cut-out around the status dot.
	 */
	.avatar {
		--_fill: var(--avatar-fill, #f4f4f5);
		--_muted: var(--avatar-muted, #71717a);
		--_hairline: var(--avatar-hairline, rgb(0 0 0 / 0.08));
		--_surface: var(--avatar-surface, #ffffff);
		--_online: var(--avatar-online, #059669);
		--_away: var(--avatar-away, #d97706);
		--_offline: var(--avatar-offline, #71717a);

		/* Initials fills and their ink: sky, emerald, amber, rose, violet, lime, orange, indigo. */
		--_tone-1: var(--avatar-tone-1, #dff2fe);
		--_tone-1-ink: var(--avatar-tone-1-ink, #024a70);
		--_tone-2: var(--avatar-tone-2, #d0fae5);
		--_tone-2-ink: var(--avatar-tone-2-ink, #004f3b);
		--_tone-3: var(--avatar-tone-3, #fef3c6);
		--_tone-3-ink: var(--avatar-tone-3-ink, #7b3306);
		--_tone-4: var(--avatar-tone-4, #ffe4e6);
		--_tone-4-ink: var(--avatar-tone-4-ink, #8b0836);
		--_tone-5: var(--avatar-tone-5, #ede9fe);
		--_tone-5-ink: var(--avatar-tone-5-ink, #4d179a);
		--_tone-6: var(--avatar-tone-6, #ecfcca);
		--_tone-6-ink: var(--avatar-tone-6-ink, #35530e);
		--_tone-7: var(--avatar-tone-7, #ffedd4);
		--_tone-7-ink: var(--avatar-tone-7-ink, #7e2a0c);
		--_tone-8: var(--avatar-tone-8, #e0e7ff);
		--_tone-8-ink: var(--avatar-tone-8-ink, #312c85);
	}

	/* The corner the dot sits on, for the dot's position formula below. */
	.avatar--circle {
		--_r: calc(var(--_box) / 2);
	}

	.avatar--square {
		--_r: var(--_corner);
	}

	/*
	 * Hairline over every filling, so a pale photo or a light tint keeps its edge on a white
	 * page. Drawn above the image as a pseudo-element because an inset shadow on the frame
	 * would sit beneath it.
	 */
	.avatar__frame::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow: inset 0 0 0 1px var(--_hairline);
		pointer-events: none;
	}

	/*
	 * The dot's centre sits on the frame's edge at 45 degrees: r(1 − cos 45°) in from the
	 * corner of the box. The page-coloured ring cuts it out of the photo beneath.
	 */
	.avatar__status {
		inset-inline-end: calc(var(--_r) * 0.2929 - var(--_dot) / 2);
		inset-block-end: calc(var(--_r) * 0.2929 - var(--_dot) / 2);
		box-shadow: 0 0 0 var(--_cut) var(--_surface);
	}

	/*
	 * Each state has its own shape as well as its colour: online is a full dot, away a crescent
	 * (the dot with a page-coloured bite out of its top start) and offline a ring.
	 */
	.avatar__status--away {
		background: radial-gradient(
			circle at 12% 12%,
			var(--_surface) 0 44%,
			var(--_away) calc(44% + 0.5px)
		);
	}

	.avatar__status--away:dir(rtl) {
		background: radial-gradient(
			circle at 88% 12%,
			var(--_surface) 0 44%,
			var(--_away) calc(44% + 0.5px)
		);
	}

	.avatar__status--offline {
		box-shadow:
			inset 0 0 0 calc(var(--_dot) * 0.2) var(--_offline),
			0 0 0 var(--_cut) var(--_surface);
	}

	/*
	 * Latin capitals centre on their cap height rather than the line box, which otherwise sits
	 * them a little low. CJK characters fill the em square and are already centred.
	 */
	@supports (text-box: trim-both cap alphabetic) {
		.avatar__initials:not([data-cjk]) {
			text-box: trim-both cap alphabetic;
		}
	}
</style>