@xtyle/core 0.5.0

package/dist/elements/app-shell.d.ts

@@ -0,0 +1,35 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+export declare class XtyleAppShell extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private fragment;
+    static get observedAttributes(): string[];
+    private get mainId();
+    get skipLink(): string | null;
+    set skipLink(value: string | null);
+    private get hasSkipLink();
+    private get skipLinkText();
+    private isResizable;
+    private bound;
+    private clampSide;
+    /** The seed / double-click-reset size for a resizable rail: its `*-size` attr in px, clamped. */
+    private seed;
+    private current;
+    private sizePx;
+    private railStyle;
+    private get bodyStyle();
+    attributeChangedCallback(name: string): void;
+    private get bindings();
+    /** Structure the ops can't patch incrementally: the skip link, the main id, and whether each rail
+     * carries a handle. A change here rebuilds; a size change is a cheap style patch. */
+    private shapeSignature;
+    protected template(): string;
+    protected render(): void;
+    private setSize;
+    private focusViaPointer;
+    private onHandlePointerdown;
+    private onHandleKeydown;
+    private syncHandleValue;
+    private wired;
+    private wireHandles;
+}
+//# sourceMappingURL=app-shell.d.ts.map

package/dist/elements/app-shell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/elements/app-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAOjE,qBAAa,aAAc,SAAQ,YAAY;IAC9C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAKb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAaxC;IAED,OAAO,KAAK,MAAM,GAGjB;IAED,IAAI,QAAQ,IAAI,MAAM,GAAG,IAAI,CAE5B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAGhC;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,YAAY,GAGvB;IAED,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,SAAS;IAIjB,iGAAiG;IACjG,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,OAAO,CAA4D;IAE3E,OAAO,CAAC,MAAM;IAKd,OAAO,CAAC,SAAS;IAQjB,OAAO,KAAK,SAAS,GAKpB;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAO5C,OAAO,KAAK,QAAQ,GASnB;IAED;yFACqF;IACrF,OAAO,CAAC,cAAc;IAItB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;IAOjC,OAAO,CAAC,OAAO;IAYf,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,mBAAmB;IAwB3B,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,KAAK,CAA8B;IAC3C,OAAO,CAAC,WAAW;CAqBnB"}

package/dist/elements/app-shell.js

@@ -0,0 +1,207 @@
+import { XtyleElement, define } from "./base.js";
+import { appShellHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/app-shell/source.generated.js";
+export class XtyleAppShell extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "app-shell", {
+        applyIntent: () => { },
+        // Handles are built by `mount` / reshape, so they may not exist when `render()` runs; wire them
+        // after every apply. A fresh handle wires; an already-wired one no-ops.
+        afterApply: () => this.wireHandles(),
+    });
+    static get observedAttributes() {
+        return [
+            "skip-link",
+            "left-size",
+            "right-size",
+            "main-id",
+            "left-resizable",
+            "right-resizable",
+            "left-min",
+            "left-max",
+            "right-min",
+            "right-max",
+        ];
+    }
+    get mainId() {
+        const explicit = this.getAttribute("main-id");
+        return explicit && explicit.length > 0 ? explicit : "main";
+    }
+    get skipLink() {
+        return this.getAttribute("skip-link");
+    }
+    set skipLink(value) {
+        if (value === null)
+            this.removeAttribute("skip-link");
+        else
+            this.setAttribute("skip-link", value);
+    }
+    get hasSkipLink() {
+        return this.hasAttribute("skip-link");
+    }
+    get skipLinkText() {
+        const explicit = this.skipLink;
+        return explicit && explicit.length > 0 ? explicit : "Skip to main content";
+    }
+    isResizable(side) {
+        return this.hasAttribute(`${side}-resizable`);
+    }
+    bound(side, which) {
+        const raw = this.getAttribute(`${side}-${which}`);
+        if (raw !== null && raw.length > 0) {
+            const n = Number(raw);
+            if (Number.isFinite(n))
+                return n;
+        }
+        return which === "min" ? 160 : 720;
+    }
+    clampSide(side, value) {
+        return Math.min(this.bound(side, "max"), Math.max(this.bound(side, "min"), Math.round(value)));
+    }
+    /** The seed / double-click-reset size for a resizable rail: its `*-size` attr in px, clamped. */
+    seed(side) {
+        const raw = this.getAttribute(`${side}-size`);
+        const parsed = raw === null ? Number.NaN : Number.parseFloat(raw);
+        return this.clampSide(side, Number.isFinite(parsed) ? parsed : side === "left" ? 240 : 320);
+    }
+    // Live rail sizes, lazily seeded from the attribute; the drag / keys own them after that.
+    current = { left: null, right: null };
+    sizePx(side) {
+        if (this.current[side] === null)
+            this.current[side] = this.seed(side);
+        return this.current[side];
+    }
+    railStyle(side, prop) {
+        if (this.isResizable(side))
+            return `${prop}: ${this.sizePx(side)}px`;
+        const raw = this.getAttribute(`${side}-size`);
+        if (raw === null || raw.length === 0)
+            return null;
+        const size = /^\d+$/.test(raw) ? `${raw}px` : raw;
+        return `${prop}: ${size}`;
+    }
+    get bodyStyle() {
+        const style = [this.railStyle("left", "--xtyle-app-left"), this.railStyle("right", "--xtyle-app-right")]
+            .filter(Boolean)
+            .join("; ");
+        return style.length > 0 ? style : null;
+    }
+    attributeChangedCallback(name) {
+        // An external size / bound / resizable change re-seeds the live value on the next render.
+        if (name.startsWith("left-"))
+            this.current.left = null;
+        if (name.startsWith("right-"))
+            this.current.right = null;
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            skipLink: this.hasSkipLink,
+            skipLinkText: this.skipLinkText,
+            bodyStyle: this.bodyStyle,
+            mainId: this.mainId,
+            leftResizable: this.isResizable("left"),
+            rightResizable: this.isResizable("right"),
+        };
+    }
+    /** Structure the ops can't patch incrementally: the skip link, the main id, and whether each rail
+     * carries a handle. A change here rebuilds; a size change is a cheap style patch. */
+    shapeSignature() {
+        return `${this.hasSkipLink}|${this.skipLinkText}|${this.mainId}|${this.isResizable("left")}|${this.isResizable("right")}`;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(appShellHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+    setSize(side, value, emit) {
+        const clamped = this.clampSide(side, value);
+        const changed = clamped !== this.current[side];
+        this.current[side] = clamped;
+        this.fragment.update(this.bindings);
+        this.syncHandleValue(side);
+        if (!changed && emit === "resize")
+            return;
+        this.dispatchEvent(new CustomEvent(emit, { bubbles: true, composed: true, detail: { side, size: clamped } }));
+    }
+    focusViaPointer = false;
+    onHandlePointerdown(side, handle, event) {
+        event.preventDefault();
+        this.focusViaPointer = true;
+        handle.focus();
+        handle.setAttribute("data-active", "");
+        const startX = event.clientX;
+        const startSize = this.sizePx(side);
+        // The right rail grows as the handle moves left; the left rail grows as it moves right.
+        const sign = side === "right" ? -1 : 1;
+        event.target.setPointerCapture?.(event.pointerId);
+        const move = (e) => this.setSize(side, startSize + sign * (e.clientX - startX), "resize");
+        const end = (e) => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", end);
+            window.removeEventListener("pointercancel", end);
+            handle.removeAttribute("data-active");
+            this.focusViaPointer = false;
+            this.setSize(side, startSize + sign * (e.clientX - startX), "resize-end");
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", end);
+        window.addEventListener("pointercancel", end);
+    }
+    onHandleKeydown(side, event) {
+        const step = event.shiftKey ? 40 : 16;
+        const grow = side === "right" ? "ArrowLeft" : "ArrowRight";
+        const shrink = side === "right" ? "ArrowRight" : "ArrowLeft";
+        let next;
+        if (event.key === grow)
+            next = this.sizePx(side) + step;
+        else if (event.key === shrink)
+            next = this.sizePx(side) - step;
+        else if (event.key === "Home")
+            next = this.bound(side, "max");
+        else if (event.key === "End")
+            next = this.bound(side, "min");
+        else
+            return;
+        event.preventDefault();
+        this.setSize(side, next, "resize-end");
+    }
+    syncHandleValue(side) {
+        const handle = this.root.querySelector(`[data-handle="${side}"]`);
+        handle?.setAttribute("aria-valuenow", String(this.sizePx(side)));
+    }
+    wired = new WeakSet();
+    wireHandles() {
+        for (const side of ["left", "right"]) {
+            const handle = this.root.querySelector(`[data-handle="${side}"]`);
+            if (!handle || this.wired.has(handle))
+                continue;
+            this.wired.add(handle);
+            handle.setAttribute("aria-valuemin", String(this.bound(side, "min")));
+            handle.setAttribute("aria-valuemax", String(this.bound(side, "max")));
+            handle.setAttribute("aria-valuenow", String(this.sizePx(side)));
+            handle.addEventListener("pointerdown", (e) => this.onHandlePointerdown(side, handle, e));
+            handle.addEventListener("keydown", (e) => this.onHandleKeydown(side, e));
+            handle.addEventListener("dblclick", () => this.setSize(side, this.seed(side), "resize-end"));
+            handle.addEventListener("focus", () => {
+                if (!this.focusViaPointer)
+                    handle.setAttribute("data-focus-ring", "");
+            });
+            handle.addEventListener("keydown", () => handle.setAttribute("data-focus-ring", ""));
+            handle.addEventListener("blur", () => {
+                handle.removeAttribute("data-focus-ring");
+                this.focusViaPointer = false;
+            });
+        }
+    }
+}
+define("xtyle-app-shell", XtyleAppShell);
+//# sourceMappingURL=app-shell.js.map

package/dist/elements/app-shell.js.map

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

package/dist/elements/avatar-group.d.ts

@@ -0,0 +1,19 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type AvatarGroupSize, type AvatarGroupSpacing } from "../markup/index.js";
+export type { AvatarGroupSize, AvatarGroupSpacing };
+export declare class XtyleAvatarGroup extends XtyleElement {
+    private fragment;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get size(): AvatarGroupSize;
+    set size(value: AvatarGroupSize);
+    get spacing(): AvatarGroupSpacing;
+    set spacing(value: AvatarGroupSpacing);
+    get overflow(): number;
+    set overflow(value: number);
+    attributeChangedCallback(): void;
+    private get bindings();
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=avatar-group.d.ts.map

package/dist/elements/avatar-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/elements/avatar-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAAsB,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAIvG,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC;AAEpD,qBAAa,gBAAiB,SAAQ,YAAY;IACjD,OAAO,CAAC,QAAQ,CAEb;IAEH,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,eAAe,CAG1B;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,eAAe,EAE9B;IAED,IAAI,OAAO,IAAI,kBAAkB,CAGhC;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,kBAAkB,EAEpC;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAEzB;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAOnB;IAED,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAKjC"}

package/dist/elements/avatar-group.js

@@ -0,0 +1,58 @@
+import { XtyleElement, define } from "./base.js";
+import { avatarGroupHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/avatar-group/source.generated.js";
+export class XtyleAvatarGroup extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "avatar-group", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["size", "spacing", "overflow", "label"];
+    }
+    get size() {
+        const raw = this.getAttribute("size");
+        return raw === "sm" || raw === "lg" || raw === "xl" ? raw : "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get spacing() {
+        const raw = this.getAttribute("spacing");
+        return raw === "snug" || raw === "loose" ? raw : "normal";
+    }
+    set spacing(value) {
+        this.setAttribute("spacing", value);
+    }
+    get overflow() {
+        const n = Math.trunc(Number(this.getAttribute("overflow")));
+        return Number.isFinite(n) && n > 0 ? n : 0;
+    }
+    set overflow(value) {
+        this.setAttribute("overflow", String(value));
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            size: this.getAttribute("size"),
+            spacing: this.getAttribute("spacing"),
+            overflow: this.overflow,
+            label: this.getAttribute("label"),
+        };
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(avatarGroupHostCss);
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-avatar-group", XtyleAvatarGroup);
+//# sourceMappingURL=avatar-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","sourceRoot":"","sources":["../../src/elements/avatar-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAiD,MAAM,oBAAoB,CAAC;AACvG,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAIzF,MAAM,OAAO,gBAAiB,SAAQ,YAAY;IACzC,QAAQ,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,cAAc,EAAE;QACzF,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;KACrB,CAAC,CAAC;IAEH,IAAuB,SAAS;QAC/B,OAAO,MAAM,CAAC;IACf,CAAC;IAED,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,IAAI;QACP,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACtC,OAAO,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAClE,CAAC;IACD,IAAI,IAAI,CAAC,KAAsB;QAC9B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,OAAO;QACV,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;QACzC,OAAO,GAAG,KAAK,MAAM,IAAI,GAAG,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC3D,CAAC;IACD,IAAI,OAAO,CAAC,KAAyB;QACpC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,QAAQ;QACX,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;QAC5D,OAAO,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,CAAC;IACD,IAAI,QAAQ,CAAC,KAAa;QACzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C,CAAC;IAED,wBAAwB;QACvB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IAED,IAAY,QAAQ;QACnB,OAAO;YACN,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAC/B,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC;YACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;SACjC,CAAC;IACH,CAAC;IAES,QAAQ;QACjB,OAAO,EAAE,CAAC;IACX,CAAC;IAEkB,MAAM;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC;QACjD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;CACD;AAED,MAAM,CAAC,oBAAoB,EAAE,gBAAgB,CAAC,CAAC"}

package/dist/elements/avatar.d.ts

@@ -0,0 +1,35 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { FullTone, Tone } from "../index.js";
+export type AvatarSize = "sm" | "md" | "lg" | "xl";
+export type AvatarShape = "circle" | "square";
+export declare class XtyleAvatar extends XtyleElement {
+    private fragment;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get src(): string | null;
+    set src(value: string | null | undefined);
+    get alt(): string | null;
+    set alt(value: string | null | undefined);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get size(): AvatarSize;
+    set size(value: AvatarSize);
+    get shape(): AvatarShape;
+    set shape(value: AvatarShape);
+    get status(): Tone | null;
+    set status(value: Tone | null | undefined);
+    get statusLabel(): string | null;
+    get pulse(): "" | "slow" | "fast" | null;
+    set pulse(value: boolean | "slow" | "fast" | null | undefined);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** A signature of the state ops can't express incrementally — the `<img>` source
+     * (`src`) and the status-dot (`status`). The `src` value (not just its presence) is
+     * folded in so a URL change forces a full rebuild: this both updates the rendered
+     * image and resurrects an `<img>` that removed itself via `onerror`. */
+    private shapeSignature;
+    private warnIfUnnamed;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/elements/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAKlD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,qBAAa,WAAY,SAAQ,YAAY;IAC5C,OAAO,CAAC,QAAQ,CAEb;IAEH,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,GAAG,IAAI,MAAM,GAAG,IAAI,CAEvB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEvC;IAED,IAAI,GAAG,IAAI,MAAM,GAAG,IAAI,CAEvB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEvC;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,IAAI,IAAI,IAAI,UAAU,CAErB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,EAEzB;IAED,IAAI,KAAK,IAAI,WAAW,CAEvB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,WAAW,EAE3B;IAED,IAAI,MAAM,IAAI,IAAI,GAAG,IAAI,CAExB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,EAExC;IAED,IAAI,WAAW,IAAI,MAAM,GAAG,IAAI,CAE/B;IAED,IAAI,KAAK,IAAI,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAEvC;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAI5D;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAWnB;IAED;;;4EAGwE;IACxE,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAMrB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}

package/dist/elements/avatar.js

@@ -0,0 +1,105 @@
+import { XtyleElement, define } from "./base.js";
+import { avatarHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/avatar/source.generated.js";
+export class XtyleAvatar extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "avatar", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["src", "alt", "tone", "size", "shape", "status", "status-label", "pulse"];
+    }
+    get src() {
+        return this.getAttribute("src");
+    }
+    set src(value) {
+        this.reflectString("src", value);
+    }
+    get alt() {
+        return this.getAttribute("alt");
+    }
+    set alt(value) {
+        this.reflectString("alt", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "neutral";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get shape() {
+        return this.getAttribute("shape") ?? "circle";
+    }
+    set shape(value) {
+        this.setAttribute("shape", value);
+    }
+    get status() {
+        return this.getAttribute("status");
+    }
+    set status(value) {
+        this.reflectString("status", value);
+    }
+    get statusLabel() {
+        return this.getAttribute("status-label");
+    }
+    get pulse() {
+        return this.getAttribute("pulse");
+    }
+    set pulse(value) {
+        if (value === true)
+            this.setAttribute("pulse", "");
+        else if (!value)
+            this.removeAttribute("pulse");
+        else
+            this.setAttribute("pulse", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            src: this.src,
+            alt: this.alt,
+            tone: this.tone,
+            size: this.size,
+            shape: this.shape,
+            status: this.status,
+            statusLabel: this.statusLabel,
+            pulse: this.pulse,
+        };
+    }
+    /** A signature of the state ops can't express incrementally — the `<img>` source
+     * (`src`) and the status-dot (`status`). The `src` value (not just its presence) is
+     * folded in so a URL change forces a full rebuild: this both updates the rendered
+     * image and resurrects an `<img>` that removed itself via `onerror`. */
+    shapeSignature() {
+        return `${this.src ?? ""}|${this.status != null}`;
+    }
+    warnIfUnnamed() {
+        if (this.src !== null && !this.alt) {
+            console.warn("xtyle-avatar: an avatar with `src` has no `alt`. Provide one so the image is announced.");
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(avatarHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+    }
+}
+define("xtyle-avatar", XtyleAvatar);
+//# sourceMappingURL=avatar.js.map

package/dist/elements/avatar.js.map

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

package/dist/elements/badge.d.ts

@@ -0,0 +1,41 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { FullTone, Size } from "../index.js";
+type BadgeVariant = "solid" | "soft" | "outline";
+type BadgePulse = "slow" | "fast" | null;
+export declare class XtyleBadge extends XtyleElement {
+    private fragment;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get variant(): BadgeVariant;
+    set variant(value: BadgeVariant);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get size(): Size;
+    set size(value: Size);
+    get dot(): boolean;
+    set dot(value: boolean);
+    /** Mirrors Progress's pulse: a bare `pulse` (or `slow`) breathes on the 1.8s cadence, `fast` on 0.9s. */
+    get pulse(): BadgePulse;
+    set pulse(value: BadgePulse | boolean);
+    get count(): string | null;
+    set count(value: string | number | null | undefined);
+    get removable(): boolean;
+    set removable(value: boolean);
+    attributeChangedCallback(): void;
+    /** The dismiss button's name. An explicit `remove-label` wins; otherwise it's composed from
+     * the badge's own text ("Remove design") so a row of removable badges doesn't read as
+     * "Remove, Remove, Remove". */
+    private get removeLabel();
+    private get bindings();
+    /** A signature of the state ops can't express incrementally — the presence of the dot, count,
+     * remove button, and the tone's screen-reader word all add or drop child nodes a class `setAttr`
+     * can't reach. The status word is folded in by resolved text, not mere presence, so switching
+     * between status-bearing tones (success/warn/danger/info) rebuilds the stale SR span. When the
+     * signature changes, the structure is rebuilt rather than patched. */
+    private shapeSignature;
+    private warnIfRemoveUnnamed;
+    protected template(): string;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/elements/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAKlD,KAAK,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AACjD,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AASzC,qBAAa,UAAW,SAAQ,YAAY;IAC3C,OAAO,CAAC,QAAQ,CAEb;IAEH,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,OAAO,IAAI,YAAY,CAE1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,YAAY,EAE9B;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,GAAG,IAAI,OAAO,CAEjB;IACD,IAAI,GAAG,CAAC,KAAK,EAAE,OAAO,EAErB;IAED,yGAAyG;IACzG,IAAI,KAAK,IAAI,UAAU,CAItB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,EAIpC;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAGlD;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,wBAAwB,IAAI,IAAI;IAIhC;;mCAE+B;IAC/B,OAAO,KAAK,WAAW,GAKtB;IAED,OAAO,KAAK,QAAQ,GAWnB;IAED;;;;0EAIsE;IACtE,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,mBAAmB;IAQ3B,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}