@xtyle/core 0.5.0

package/dist/manifest/avatar-group.manifest.js

@@ -0,0 +1,180 @@
+const htmlExample = `<xtyle-avatar-group label="Contributors" overflow="3">
+	<xtyle-avatar alt="Ada Lovelace" tone="accent">AL</xtyle-avatar>
+	<xtyle-avatar alt="Alan Turing" tone="success">AT</xtyle-avatar>
+	<xtyle-avatar alt="Grace Hopper" tone="warn">GH</xtyle-avatar>
+	<xtyle-avatar alt="Katherine Johnson" tone="info">KJ</xtyle-avatar>
+</xtyle-avatar-group>`;
+const svelteExample = `<script lang="ts">
+	import { AvatarGroup, Avatar } from "@xtyle/svelte";
+
+	const people = [
+		{ name: "Ada Lovelace", initials: "AL", tone: "accent" },
+		{ name: "Alan Turing", initials: "AT", tone: "success" },
+		{ name: "Grace Hopper", initials: "GH", tone: "warn" },
+		{ name: "Katherine Johnson", initials: "KJ", tone: "info" },
+	];
+	const shown = people.slice(0, 4);
+</script>
+
+<AvatarGroup label="Contributors" overflow={people.length - shown.length + 3}>
+	{#each shown as p}
+		<Avatar alt={p.name} tone={p.tone}>{p.initials}</Avatar>
+	{/each}
+</AvatarGroup>`;
+const astroExample = `---
+import { AvatarGroup, Avatar } from "@xtyle/astro";
+const people = [
+	{ name: "Ada Lovelace", initials: "AL", tone: "accent" },
+	{ name: "Alan Turing", initials: "AT", tone: "success" },
+	{ name: "Grace Hopper", initials: "GH", tone: "warn" },
+	{ name: "Katherine Johnson", initials: "KJ", tone: "info" },
+];
+---
+
+<AvatarGroup label="Contributors" overflow={3}>
+	{people.map((p) => <Avatar alt={p.name} tone={p.tone}>{p.initials}</Avatar>)}
+</AvatarGroup>`;
+const sizeHtmlExample = `<xtyle-avatar-group size="sm" spacing="snug" overflow="12" label="Viewers">
+	<xtyle-avatar alt="Ada" tone="accent" size="sm">AD</xtyle-avatar>
+	<xtyle-avatar alt="Alan" tone="success" size="sm">AL</xtyle-avatar>
+	<xtyle-avatar alt="Grace" tone="warn" size="sm">GR</xtyle-avatar>
+</xtyle-avatar-group>`;
+const sizeSvelteExample = `<script lang="ts">
+	import { AvatarGroup, Avatar } from "@xtyle/svelte";
+</script>
+
+<AvatarGroup size="sm" spacing="snug" overflow={12} label="Viewers">
+	<Avatar alt="Ada" tone="accent" size="sm">AD</Avatar>
+	<Avatar alt="Alan" tone="success" size="sm">AL</Avatar>
+	<Avatar alt="Grace" tone="warn" size="sm">GR</Avatar>
+</AvatarGroup>`;
+const sizeAstroExample = `---
+import { AvatarGroup, Avatar } from "@xtyle/astro";
+---
+
+<AvatarGroup size="sm" spacing="snug" overflow={12} label="Viewers">
+	<Avatar alt="Ada" tone="accent" size="sm">AD</Avatar>
+	<Avatar alt="Alan" tone="success" size="sm">AL</Avatar>
+	<Avatar alt="Grace" tone="warn" size="sm">GR</Avatar>
+</AvatarGroup>`;
+export const avatarGroupManifest = {
+    id: "avatar-group",
+    name: "Avatar Group",
+    since: "0.4.0",
+    category: "media",
+    summary: "A row of overlapping avatars with a trailing `+N` overflow chip, for a contributor, attendee, or reviewer stack.",
+    description: "Avatar Group overlaps a set of `Avatar` children into a compact stack, the shape a contributor list, an attendee row, or a \"who's viewing\" strip takes. Each avatar carries a ring in the page background so the overlap reads as distinct faces rather than a blur, and later avatars sit over earlier ones. Slot the avatars you want shown and set `overflow` to the number of people beyond them, and the group renders a trailing `+N` chip in the neutral tone (its accessible name reads \"N more\"). `size` matches the chip to the avatars you used, and `spacing` tightens or loosens the overlap. It's a `role=\"group\"`; give it a `label` to name the set. The overflow count is explicit rather than auto-counted so the stack renders identically with no JavaScript, on the server, and in the browser.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "group",
+            description: "The `role=\"group\"` row that overlaps its slotted avatars.",
+            selector: ".xtyle-avatar-group",
+            tokens: ["--space-3"],
+        },
+        {
+            name: "overflow",
+            description: "The trailing `+N` chip summarizing the avatars beyond the shown set.",
+            selector: ".xtyle-avatar-group__overflow",
+            tokens: ["--neutral-bg", "--neutral-text", "--bg-0", "--border-thick", "--radius-full"],
+        },
+    ],
+    props: [
+        {
+            name: "overflow",
+            type: "number",
+            description: "How many people beyond the slotted avatars to summarize. A positive value renders a trailing `+N` chip (named \"N more\" for assistive tech); zero or omitted renders no chip. Explicit rather than auto-counted, so the stack is identical with no JavaScript.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: '"sm" | "md" | "lg" | "xl"',
+            default: "md",
+            description: "Sizes the `+N` chip to match the avatars you slotted (each `Avatar` still sets its own size).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg", "xl"],
+        },
+        {
+            name: "spacing",
+            type: '"snug" | "normal" | "loose"',
+            default: "normal",
+            description: "How far the avatars overlap: `snug` stacks them tighter, `loose` spreads them out.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["snug", "normal", "loose"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "An accessible name for the group, since it is a set of people (e.g. \"Contributors\").",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "Compact, for dense lists.", className: "xtyle-avatar-group--sm" },
+        { name: "md", description: "Default.", className: "xtyle-avatar-group", isDefault: true },
+        { name: "lg", description: "Large, for headers.", className: "xtyle-avatar-group--lg" },
+        { name: "xl", description: "Extra large.", className: "xtyle-avatar-group--xl" },
+    ],
+    states: [
+        {
+            name: "avatar-hover",
+            description: "Hovering or focusing an avatar raises it above its neighbours so a covered face reads in full.",
+            selector: ".xtyle-avatar-group ::slotted(*:hover)",
+            tokens: [],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The `Avatar` children to overlap, in stacking order (the first sits at the bottom of the stack).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--bg-0",
+        "--neutral-bg",
+        "--neutral-text",
+        "--border-thick",
+        "--radius-full",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-6",
+        "--space-7",
+        "--space-8",
+        "--font-sans",
+        "--text-xs",
+        "--text-sm",
+        "--text-body",
+        "--text-lg",
+        "--weight-semibold",
+        "--leading-tight",
+    ],
+    composition: [
+        "Slot the avatars to show and pass `overflow` as the remainder: a consumer holding 20 people shows the first 4 (`avatars.slice(0, 4)`) and sets `overflow={16}`, so the row reads `● ● ● ● +16`.",
+        "Each avatar keeps its own `tone`, `src`, `shape`, and `size`; the group only lays them out, so a group of image avatars, initial-fallback avatars, or a mix all stack the same way.",
+        "The ring around each avatar is the page background (`--bg-0`), so a group over a `Panel` or `Card` needs no change: it's the surface token the algorithm already produced. Pair it with a `Cluster` to sit a group beside a count or a label.",
+        "Because the faces overlap, a leading avatar is partly covered by the next; hovering or focusing one raises it above its neighbours so its full face (and initials) reads, no attribute needed.",
+    ],
+    a11y: [
+        "The row is a `role=\"group\"`; a `label` names it so assistive tech announces the set (\"Contributors\").",
+        "The `+N` chip is a `role=\"img\"` with an accessible name of \"N more\", so the hidden count is spoken rather than read as a bare `+16` glyph.",
+        "Each slotted `Avatar` keeps its own accessible name (its `alt` or status), so the people in the stack are individually announced.",
+    ],
+    examples: [
+        {
+            id: "group",
+            title: "A contributor stack",
+            description: "Overlapping avatars with a `+N` chip for the rest; each keeps its own tone.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "size",
+            title: "Sizes and spacing",
+            description: "`size` matches the chip to the avatars and `spacing=\"snug\"` tightens the overlap for a dense viewer strip.",
+            source: { html: sizeHtmlExample, svelte: sizeSvelteExample, astro: sizeAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=avatar-group.manifest.js.map

package/dist/manifest/avatar-group.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.manifest.js","sourceRoot":"","sources":["../../src/manifest/avatar-group.manifest.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG;;;;;sBAKE,CAAC;AAEvB,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;eAgBP,CAAC;AAEhB,MAAM,YAAY,GAAG;;;;;;;;;;;;eAYN,CAAC;AAEhB,MAAM,eAAe,GAAG;;;;sBAIF,CAAC;AAEvB,MAAM,iBAAiB,GAAG;;;;;;;;eAQX,CAAC;AAEhB,MAAM,gBAAgB,GAAG;;;;;;;;eAQV,CAAC;AAEhB,MAAM,CAAC,MAAM,mBAAmB,GAAsB;IACrD,EAAE,EAAE,cAAc;IAClB,IAAI,EAAE,cAAc;IACpB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,kHAAkH;IAC3H,WAAW,EACV,4xBAA4xB;IAC7xB,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,6DAA6D;YAC1E,QAAQ,EAAE,qBAAqB;YAC/B,MAAM,EAAE,CAAC,WAAW,CAAC;SACrB;QACD;YACC,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,sEAAsE;YACnF,QAAQ,EAAE,+BAA+B;YACzC,MAAM,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,EAAE,eAAe,CAAC;SACvF;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,QAAQ;YACd,WAAW,EACV,iQAAiQ;YAClQ,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,2BAA2B;YACjC,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,+FAA+F;YAC5G,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;SACjC;QACD;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,6BAA6B;YACnC,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,oFAAoF;YACjG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACpC;QACD;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,wFAAwF;YACrG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE;QACN,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,2BAA2B,EAAE,SAAS,EAAE,wBAAwB,EAAE;QAC7F,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,oBAAoB,EAAE,SAAS,EAAE,IAAI,EAAE;QACzF,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,qBAAqB,EAAE,SAAS,EAAE,wBAAwB,EAAE;QACvF,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,wBAAwB,EAAE;KAChF;IACD,MAAM,EAAE;QACP;YACC,IAAI,EAAE,cAAc;YACpB,WAAW,EAAE,gGAAgG;YAC7G,QAAQ,EAAE,wCAAwC;YAClD,MAAM,EAAE,EAAE;SACV;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,kGAAkG;YAC/G,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE;QACf,QAAQ;QACR,cAAc;QACd,gBAAgB;QAChB,gBAAgB;QAChB,eAAe;QACf,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,aAAa;QACb,WAAW;QACX,WAAW;QACX,aAAa;QACb,WAAW;QACX,mBAAmB;QACnB,iBAAiB;KACjB;IACD,WAAW,EAAE;QACZ,iMAAiM;QACjM,qLAAqL;QACrL,+OAA+O;QAC/O,gMAAgM;KAChM;IACD,IAAI,EAAE;QACL,2GAA2G;QAC3G,gJAAgJ;QAChJ,mIAAmI;KACnI;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,OAAO;YACX,KAAK,EAAE,qBAAqB;YAC5B,WAAW,EAAE,6EAA6E;YAC1F,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;QACD;YACC,EAAE,EAAE,MAAM;YACV,KAAK,EAAE,mBAAmB;YAC1B,WAAW,EAAE,8GAA8G;YAC3H,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,gBAAgB,EAAE;SACrF;KACD;CACD,CAAC"}

package/dist/manifest/avatar.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const avatarManifest: ComponentManifest;
+//# sourceMappingURL=avatar.manifest.d.ts.map

package/dist/manifest/avatar.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/avatar.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAiDpD,eAAO,MAAM,cAAc,EAAE,iBA6M5B,CAAC"}

package/dist/manifest/avatar.manifest.js

@@ -0,0 +1,249 @@
+import { FULL_TONES, TONES } from "../vocab.js";
+const htmlExample = `<xtyle-avatar alt="Ada Lovelace" src="/avatars/ada.jpg"></xtyle-avatar>
+
+<xtyle-avatar alt="Grace Hopper" tone="info" size="lg">GH</xtyle-avatar>
+
+<xtyle-avatar alt="Project Apollo" tone="purple" shape="square" status="success"></xtyle-avatar>
+
+<xtyle-avatar alt="Unknown user" size="xl">
+	<svg slot="icon" viewBox="0 0 24 24" aria-hidden="true">
+		<path fill="currentColor" d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6Z" />
+	</svg>
+</xtyle-avatar>`;
+const svelteExample = `<script lang="ts">
+	import { Avatar } from "@xtyle/svelte";
+</script>
+
+<Avatar alt="Ada Lovelace" src="/avatars/ada.jpg" />
+
+<Avatar alt="Grace Hopper" tone="info" size="lg">GH</Avatar>
+
+<Avatar alt="Project Apollo" tone="purple" shape="square" status="success" />
+
+<Avatar alt="Unknown user" size="xl">
+	{#snippet icon()}
+		<svg viewBox="0 0 24 24" aria-hidden="true">
+			<path fill="currentColor" d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6Z" />
+		</svg>
+	{/snippet}
+</Avatar>`;
+const astroExample = `---
+import { Avatar } from "@xtyle/astro";
+---
+
+<Avatar alt="Ada Lovelace" src="/avatars/ada.jpg" />
+
+<Avatar alt="Grace Hopper" tone="info" size="lg">GH</Avatar>
+
+<Avatar alt="Project Apollo" tone="purple" shape="square" status="success" />
+
+<Avatar alt="Unknown user" size="xl">
+	<svg slot="icon" viewBox="0 0 24 24" aria-hidden="true">
+		<path fill="currentColor" d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 6v2h18v-2c0-3.5-4-6-9-6Z" />
+	</svg>
+</Avatar>`;
+export const avatarManifest = {
+    id: "avatar",
+    name: "Avatar",
+    category: "media",
+    summary: "An identity chip: a photo when one loads, a tinted initials-or-icon fallback when it doesn't.",
+    description: "Avatar presents a person or entity as a compact square or circle. Given a `src`, it shows the image, cover-cropped to fill; if the image is absent or fails to load, it falls back to the slotted content (initials as text, or an icon via the `icon` slot) on a soft, hue-tinted background. The fallback tint follows `tone`, which accepts any of the six semantic roles or the twelve named hues, so a deterministic per-user color is a one-attribute choice. Four sizes (sm, md, lg, xl), two shapes (circle, square), and an optional corner status dot in any semantic tone round out the surface. `alt` names the image; the fallback text stays in the accessibility tree so the avatar is announced either way.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "avatar",
+            description: "The root chip carrying the size, shape, and tone classes; sizes the image and fallback and anchors the status dot.",
+            selector: ".xtyle-avatar",
+            tokens: [
+                "--space-7",
+                "--font-sans",
+                "--text-sm",
+                "--weight-semibold",
+                "--leading-tight",
+                "--neutral-text",
+                "--radius-full",
+            ],
+        },
+        {
+            name: "image",
+            description: "The portrait image, cover-cropped to fill the chip and clipped to the chip's shape.",
+            selector: ".xtyle-avatar__image",
+        },
+        {
+            name: "fallback",
+            description: "The initials-or-icon stand-in shown when no image is present, painted with the tone's soft tint.",
+            selector: ".xtyle-avatar__fallback",
+            tokens: ["--neutral-bg", "--neutral-text", "--space-0"],
+        },
+        {
+            name: "status-dot",
+            description: "The optional corner indicator, ringed in the surface color so it reads against any background.",
+            selector: ".xtyle-avatar__status-dot",
+            tokens: ["--space-2", "--neutral", "--radius-full", "--border-thick", "--bg-1"],
+        },
+    ],
+    props: [
+        {
+            name: "src",
+            type: "string",
+            description: "The image URL. When absent or failed, the fallback content shows instead.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "alt",
+            type: "string",
+            description: "Accessible name for the image. Required when `src` is set; also labels the fallback.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "neutral",
+            description: "Soft-tint color for the fallback background: any semantic role, accent variant, or named hue.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "size",
+            type: "AvatarSize",
+            default: "md",
+            description: "Chip size.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg", "xl"],
+        },
+        {
+            name: "shape",
+            type: "AvatarShape",
+            default: "circle",
+            description: "Outline shape: a circle or a rounded square.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["circle", "square"],
+        },
+        {
+            name: "status",
+            type: "Tone",
+            description: "When set, shows a corner status dot in this semantic tone.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["accent", "neutral", "danger", "success", "warn", "info"],
+        },
+        {
+            name: "statusLabel",
+            type: "string",
+            description: "Accessible name for the status dot (e.g. \"Online\"); announced as additional avatar text.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "pulse",
+            type: 'boolean | "slow" | "fast"',
+            description: "Breathe the status dot for a live / online presence: a bare `true` pulses slow, `\"fast\"` quick. A no-op without `status`, and held still under `prefers-reduced-motion`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "circle",
+            description: "Fully rounded, the default identity shape.",
+            className: "xtyle-avatar",
+            tokens: ["--radius-full"],
+        },
+        {
+            name: "square",
+            description: "A rounded square, for entities and projects rather than people.",
+            className: "xtyle-avatar--square",
+            tokens: ["--radius-md", "--radius-sm", "--radius-lg"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact, for dense lists.", className: "xtyle-avatar--sm" },
+        { name: "md", description: "Default.", className: "xtyle-avatar", isDefault: true },
+        { name: "lg", description: "Large, for headers.", className: "xtyle-avatar--lg" },
+        { name: "xl", description: "Extra large, for profile hero.", className: "xtyle-avatar--xl" },
+    ],
+    states: [
+        {
+            name: "fallback",
+            description: "No image: the tinted initials-or-icon stand-in fills the chip.",
+            selector: ".xtyle-avatar__fallback",
+            tokens: ["--neutral-bg", "--neutral-text"],
+        },
+        {
+            name: "status",
+            description: "A corner dot conveys presence; its color is the chosen status tone, ringed in the surface.",
+            selector: ".xtyle-avatar__status-dot",
+            tokens: ["--neutral", "--border-thick", "--bg-1"],
+        },
+        {
+            name: "pulse",
+            description: "With `pulse`, the status dot breathes on a soft opacity loop so the avatar reads as live, at a slow or fast cadence; held still under reduced-motion.",
+            selector: ".xtyle-avatar--pulse-slow .xtyle-avatar__status-dot",
+            tokens: ["--ease-standard"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "Fallback initials shown when no image loads.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "icon",
+            description: "An icon fallback, used in place of initials when no image loads.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--space-0",
+        "--space-2",
+        "--space-4",
+        "--space-6",
+        "--space-7",
+        "--space-8",
+        "--font-sans",
+        "--text-xs",
+        "--text-sm",
+        "--text-body",
+        "--text-lg",
+        "--weight-semibold",
+        "--leading-tight",
+        "--radius-sm",
+        "--radius-md",
+        "--radius-lg",
+        "--radius-full",
+        "--border-thick",
+        "--bg-1",
+        "--ease-standard",
+        ...FULL_TONES.flatMap((t) => [`--${t}-bg`, `--${t}-text`]),
+        ...TONES.map((t) => `--${t}`),
+    ],
+    composition: [
+        "Stack a row of avatars into an avatar group; negative inline margin overlaps them.",
+        "Pair with Badge for a labeled identity row, or with the status dot for presence.",
+        "Feed `tone` a hash of the user id to get a stable, distinct fallback color per person.",
+    ],
+    a11y: [
+        "The image carries `alt`; the binding warns at runtime when `src` is set without it.",
+        "When the image is absent or errors, the fallback initials or `aria-label`'d icon remain in the accessibility tree so the avatar is still announced.",
+        "The decorative status dot is `aria-hidden`; its meaning rides on `statusLabel` as visually-hidden text in the accessibility tree.",
+        "`pulse` is decorative motion only, never the carrier of meaning: put the live state in `statusLabel` (\"Online\") so it reads the same to assistive tech and under `prefers-reduced-motion`, where the pulse holds still.",
+        "The fallback icon slot is decorative. Provide `alt` (or fallback initials) so the avatar still has a name.",
+    ],
+    examples: [
+        {
+            id: "image-fallback-status",
+            title: "Image, fallback, and status",
+            description: "A photo when one loads, tinted initials or an icon when it doesn't, with an optional presence dot.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "live-presence",
+            title: "Live presence",
+            description: "A pulsing status dot reads as online in real time; `statusLabel` carries the meaning for assistive tech.",
+            source: {
+                html: '<xtyle-avatar alt="Grace Hopper" status="success" status-label="Online" pulse>GH</xtyle-avatar>',
+                svelte: '<Avatar alt="Grace Hopper" status="success" statusLabel="Online" pulse>GH</Avatar>',
+                astro: '<Avatar alt="Grace Hopper" status="success" statusLabel="Online" pulse>GH</Avatar>',
+            },
+        },
+    ],
+};
+//# sourceMappingURL=avatar.manifest.js.map

package/dist/manifest/avatar.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.manifest.js","sourceRoot":"","sources":["../../src/manifest/avatar.manifest.ts"],"names":[],"mappings":"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"}

package/dist/manifest/badge.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const badgeManifest: ComponentManifest;
+//# sourceMappingURL=badge.manifest.d.ts.map

package/dist/manifest/badge.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/badge.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA8DpD,eAAO,MAAM,aAAa,EAAE,iBAuO3B,CAAC"}