@xtyle/core 0.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../src/elements/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAkC,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACzF,OAAO,EASN,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,YAAY,EACjB,MAAM,oBAAoB,CAAC;AAI5B,0DAA0D;AAC1D,MAAM,WAAW,YAAY;IAC5B,2EAA2E;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kGAAkG;IAClG,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,qBAAa,UAAW,SAAQ,YAAY;IAC3C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAEb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,SAAS,GAAG,IAAI,CAE3B;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,GAAG,SAAS,EAE3C;IAED,IAAI,QAAQ,IAAI,aAAa,GAAG,IAAI,CAEnC;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,EAEnD;IAED,IAAI,OAAO,IAAI,YAAY,CAE1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,YAAY,EAE9B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GASnB;IAED;6EACyE;IACzE,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,WAAW;IAWnB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAMjC;AAED;;;;;GAKG;AACH,qBAAa,gBAAiB,SAAQ,YAAY;IACjD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,MAAM,CAAsC;IAEpD,IAAI,SAAS,IAAI,MAAM,CAEtB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,EAE1B;IAED,IAAI,GAAG,IAAI,MAAM,CAGhB;IAED,wBAAwB,IAAI,IAAI;IAIhC;;;OAGG;IACH,KAAK,CAAC,IAAI,EAAE,YAAY,GAAG,WAAW;IA6CtC,OAAO,KAAK,QAAQ,GAEnB;IAED,OAAO,CAAC,GAAG;IAQX,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,UAAU;IAUlB,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B,OAAO,KAAK,WAAW,GAKtB;IAED,SAAS,CAAC,QAAQ,IAAI,MAAM;CAG5B"}

package/dist/elements/toast.js

@@ -0,0 +1,207 @@
+import { XtyleElement, define, escapeHtml, escapeAttr } from "./base.js";
+import { ASSERTIVE_SEVERITIES, CLOSE_ICON, toastHostCss, toastIconMarkup, toastRegionHostCss, toastRegionMarkup, toastSeverity, } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/toast/source.generated.js";
+/**
+ * A single toast notification. Renders a status-toned card; the live-region
+ * announcement is owned by the enclosing {@link XtyleToastRegion}, so a standalone
+ * toast also carries its own `role`/`aria-live` for declarative use.
+ */
+export class XtyleToast extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "toast", {
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+    });
+    static get observedAttributes() {
+        return ["tone", "severity", "variant", "closable", "close-label", "action-label"];
+    }
+    get tone() {
+        return this.getAttribute("tone");
+    }
+    set tone(value) {
+        this.reflectString("tone", value);
+    }
+    get severity() {
+        return this.getAttribute("severity");
+    }
+    set severity(value) {
+        this.reflectString("severity", value);
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "soft";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get closable() {
+        return this.hasAttribute("closable");
+    }
+    set closable(value) {
+        this.reflectBoolean("closable", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            tone: this.tone,
+            severity: this.severity,
+            variant: this.variant,
+            closable: this.closable || !this.hasAttribute("closable"),
+            closeLabel: this.getAttribute("close-label") ?? "Dismiss",
+            actionLabel: this.getAttribute("action-label") ?? null,
+        };
+    }
+    /** Structural state ops can't patch incrementally: whether the close and action buttons exist.
+     * A change here rebuilds; a `tone` / `variant` swap is a cheap patch. */
+    shapeSignature() {
+        const closable = this.closable || !this.hasAttribute("closable");
+        return `${closable}|${this.getAttribute("action-label")}|${this.getAttribute("close-label")}`;
+    }
+    dismiss() {
+        const event = new CustomEvent("dismiss", { bubbles: true, composed: true, cancelable: true });
+        const proceed = this.dispatchEvent(event);
+        if (proceed)
+            this.remove();
+    }
+    applyIntent(intent, event) {
+        if (intent.dismiss) {
+            event.stopPropagation();
+            this.dismiss();
+            return;
+        }
+        if (intent.emit) {
+            this.dispatchEvent(new CustomEvent(intent.emit.type, { bubbles: true, composed: true }));
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(toastHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+/**
+ * The live-region container that holds and announces transient toasts. It never
+ * steals focus: it is an `aria-live` region whose politeness follows the most
+ * urgent toast pushed (assertive for `danger`/`warn`, polite otherwise). Push a
+ * toast imperatively with {@link toast}.
+ */
+export class XtyleToastRegion extends XtyleElement {
+    static get observedAttributes() {
+        return ["placement", "max", "label"];
+    }
+    timers = new WeakMap();
+    get placement() {
+        return this.getAttribute("placement") ?? "bottom-right";
+    }
+    set placement(value) {
+        this.setAttribute("placement", value);
+    }
+    get max() {
+        const raw = Number.parseInt(this.getAttribute("max") ?? "", 10);
+        return Number.isFinite(raw) && raw > 0 ? raw : 5;
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    /**
+     * Push a toast into the region. Returns the created element so callers can
+     * dismiss it early. Auto-dismiss pauses while the pointer is over the toast.
+     */
+    toast(opts) {
+        const variant = opts.variant ?? "soft";
+        const severity = toastSeverity(opts.tone, opts.severity);
+        const color = opts.tone ?? severity ?? "info";
+        const assertive = ASSERTIVE_SEVERITIES.has(severity);
+        const duration = opts.duration ?? 5000;
+        const closable = opts.closable ?? true;
+        const item = document.createElement("div");
+        item.className = `xtyle-toast xtyle-toast--${variant} xtyle-toast--${color || "info"}${severity ? "" : " xtyle-toast--noicon"} xtyle-toast--enter`;
+        item.setAttribute("part", "toast");
+        item.setAttribute("role", assertive ? "alert" : "status");
+        item.setAttribute("aria-atomic", "true");
+        const action = opts.actionLabel
+            ? `<button class="xtyle-toast__action" part="action" type="button">${escapeHtml(opts.actionLabel)}</button>`
+            : "";
+        const close = closable
+            ? `<button class="xtyle-toast__close" part="close" type="button" aria-label="${escapeAttr(opts.closeLabel ?? "Dismiss")}">${CLOSE_ICON}</button>`
+            : "";
+        item.innerHTML = `${toastIconMarkup(severity)}<div class="xtyle-toast__body" part="body"><span class="xtyle-toast__message" part="message">${escapeHtml(opts.message)}</span>${action}</div>${close}`;
+        const region = this.regionEl;
+        region?.appendChild(item);
+        this.enforceMax();
+        requestAnimationFrame(() => item.classList.remove("xtyle-toast--enter"));
+        const dismiss = () => this.dismiss(item);
+        item.querySelector(".xtyle-toast__close")?.addEventListener("click", dismiss);
+        item.querySelector(".xtyle-toast__action")?.addEventListener("click", () => {
+            opts.onAction?.();
+            dismiss();
+        });
+        if (duration > 0) {
+            this.arm(item, duration);
+            item.addEventListener("pointerenter", () => this.clear(item));
+            item.addEventListener("pointerleave", () => this.arm(item, duration));
+            item.addEventListener("focusin", () => this.clear(item));
+            item.addEventListener("focusout", () => this.arm(item, duration));
+        }
+        return item;
+    }
+    get regionEl() {
+        return this.root.querySelector(".xtyle-toast-region");
+    }
+    arm(item, duration) {
+        this.clear(item);
+        this.timers.set(item, window.setTimeout(() => this.dismiss(item), duration));
+    }
+    clear(item) {
+        const timer = this.timers.get(item);
+        if (timer !== undefined) {
+            window.clearTimeout(timer);
+            this.timers.delete(item);
+        }
+    }
+    dismiss(item) {
+        this.clear(item);
+        const event = new CustomEvent("dismiss", { bubbles: true, composed: true, cancelable: true });
+        const proceed = item.dispatchEvent(event);
+        if (!proceed)
+            return;
+        item.classList.add("xtyle-toast--leave");
+        const remove = () => item.remove();
+        item.addEventListener("transitionend", remove, { once: true });
+        window.setTimeout(remove, 600);
+    }
+    enforceMax() {
+        const region = this.regionEl;
+        if (!region)
+            return;
+        const items = region.querySelectorAll(".xtyle-toast");
+        const overflow = items.length - this.max;
+        for (let i = 0; i < overflow; i += 1) {
+            this.dismiss(items[i]);
+        }
+    }
+    styles() {
+        return toastRegionHostCss;
+    }
+    get markupProps() {
+        return {
+            placement: this.placement,
+            label: this.getAttribute("label") ?? undefined,
+        };
+    }
+    template() {
+        return toastRegionMarkup(this.markupProps);
+    }
+}
+define("xtyle-toast", XtyleToast);
+define("xtyle-toast-region", XtyleToastRegion);
+//# sourceMappingURL=toast.js.map

package/dist/elements/toast.js.map

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

package/dist/elements/toc.d.ts

@@ -0,0 +1,32 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type TocItem } from "../markup/index.js";
+export type { TocItem };
+export declare class XtyleToc extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private fragment;
+    private observer;
+    private visible;
+    private activeId;
+    static get observedAttributes(): string[];
+    get items(): TocItem[];
+    set items(value: TocItem[]);
+    get label(): string;
+    set label(value: string | null | undefined);
+    get sticky(): boolean;
+    set sticky(value: boolean);
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** A signature of the list structure the `update` hook can't patch — the items. When the
+     * rows change, the list is rebuilt (a `mount`) rather than patched. */
+    private shapeSignature;
+    private get links();
+    private setActive;
+    /** Apply the active-link classes for the current `activeId`. Idempotent, so it can
+     * re-assert the highlight after the async fragment paint populates the links. */
+    private paintActive;
+    private initSpy;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=toc.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toc.d.ts","sourceRoot":"","sources":["../../src/elements/toc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAI9D,YAAY,EAAE,OAAO,EAAE,CAAC;AAExB,qBAAa,QAAS,SAAQ,YAAY;IACzC,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAGb;IACH,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,QAAQ,CAAuB;IAEvC,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,KAAK,IAAI,OAAO,EAAE,CASrB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,EAEzB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAEnB;IAED;2EACuE;IACvE,OAAO,CAAC,cAAc;IAItB,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,SAAS;IAMjB;qFACiF;IACjF,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,OAAO;IA2Bf,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}

package/dist/elements/toc.js

@@ -0,0 +1,122 @@
+import { XtyleElement, define } from "./base.js";
+import { tocHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/toc/source.generated.js";
+export class XtyleToc extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "toc", {
+        applyIntent: () => { },
+        afterApply: () => this.paintActive(),
+    });
+    observer = null;
+    visible = new Set();
+    activeId = null;
+    static get observedAttributes() {
+        return ["items", "label", "sticky"];
+    }
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    set items(value) {
+        this.setAttribute("items", JSON.stringify(value));
+    }
+    get label() {
+        return this.getAttribute("label") ?? "On this page";
+    }
+    set label(value) {
+        this.reflectString("label", value);
+    }
+    get sticky() {
+        return this.hasAttribute("sticky");
+    }
+    set sticky(value) {
+        this.reflectBoolean("sticky", value);
+    }
+    disconnectedCallback() {
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return { items: this.items, label: this.label, sticky: this.sticky };
+    }
+    /** A signature of the list structure the `update` hook can't patch — the items. When the
+     * rows change, the list is rebuilt (a `mount`) rather than patched. */
+    shapeSignature() {
+        return JSON.stringify(this.items);
+    }
+    get links() {
+        return Array.from(this.root.querySelectorAll(".xtyle-toc__link"));
+    }
+    setActive(id) {
+        if (id === this.activeId)
+            return;
+        this.activeId = id;
+        this.paintActive();
+    }
+    /** Apply the active-link classes for the current `activeId`. Idempotent, so it can
+     * re-assert the highlight after the async fragment paint populates the links. */
+    paintActive() {
+        for (const link of this.links) {
+            const active = link.dataset.tocLink === this.activeId;
+            link.classList.toggle("is-active", active);
+            if (active)
+                link.setAttribute("aria-current", "true");
+            else
+                link.removeAttribute("aria-current");
+        }
+    }
+    initSpy() {
+        this.observer?.disconnect();
+        this.observer = null;
+        this.visible.clear();
+        this.activeId = null;
+        if (typeof IntersectionObserver === "undefined")
+            return;
+        const targets = this.items
+            .map((item) => document.getElementById(item.id))
+            .filter((el) => el !== null);
+        if (targets.length === 0)
+            return;
+        this.observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    this.visible.add(entry.target.id);
+                else
+                    this.visible.delete(entry.target.id);
+            }
+            const first = targets.find((t) => this.visible.has(t.id));
+            if (first)
+                this.setActive(first.id);
+        }, { rootMargin: "-15% 0px -70% 0px", threshold: 0 });
+        for (const t of targets)
+            this.observer.observe(t);
+        this.setActive(targets[0]?.id ?? null);
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(tocHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.initSpy();
+    }
+}
+define("xtyle-toc", XtyleToc);
+//# sourceMappingURL=toc.js.map

package/dist/elements/toc.js.map

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

package/dist/elements/toolbar.d.ts

@@ -0,0 +1,27 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { Size } from "../index.js";
+export declare class XtyleToolbar extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private fragment;
+    static get observedAttributes(): string[];
+    get heading(): string | null;
+    set heading(value: string | null | undefined);
+    get href(): string | null;
+    get size(): Size;
+    set size(value: Size);
+    get landmark(): boolean;
+    set landmark(value: boolean);
+    get sticky(): boolean;
+    set sticky(value: boolean);
+    get bare(): boolean;
+    set bare(value: boolean);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** A signature of the state ops can't express incrementally — the landmark tag (`header` vs `div`)
+     * and the title mode (absent / `<span>` / `<a>`). When it changes, the structure is rebuilt rather
+     * than patched. */
+    private shapeSignature;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=toolbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/elements/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAKxC,qBAAa,YAAa,SAAQ,YAAY;IAC7C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAEb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,IAAI,CAE3B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAE3C;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GASnB;IAED;;uBAEmB;IACnB,OAAO,CAAC,cAAc;IAItB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAMjC"}

package/dist/elements/toolbar.js

@@ -0,0 +1,79 @@
+import { XtyleElement, define } from "./base.js";
+import { toolbarHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/toolbar/source.generated.js";
+export class XtyleToolbar extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "toolbar", {
+        applyIntent: () => { },
+    });
+    static get observedAttributes() {
+        return ["heading", "href", "size", "landmark", "sticky", "bare"];
+    }
+    get heading() {
+        return this.getAttribute("heading");
+    }
+    set heading(value) {
+        this.reflectString("heading", value);
+    }
+    get href() {
+        return this.getAttribute("href");
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get landmark() {
+        return this.hasAttribute("landmark");
+    }
+    set landmark(value) {
+        this.reflectBoolean("landmark", value);
+    }
+    get sticky() {
+        return this.hasAttribute("sticky");
+    }
+    set sticky(value) {
+        this.reflectBoolean("sticky", value);
+    }
+    get bare() {
+        return this.hasAttribute("bare");
+    }
+    set bare(value) {
+        this.reflectBoolean("bare", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            heading: this.heading,
+            href: this.href,
+            size: this.size,
+            landmark: this.landmark,
+            sticky: this.sticky,
+            bare: this.bare,
+        };
+    }
+    /** A signature of the state ops can't express incrementally — the landmark tag (`header` vs `div`)
+     * and the title mode (absent / `<span>` / `<a>`). When it changes, the structure is rebuilt rather
+     * than patched. */
+    shapeSignature() {
+        return `${this.landmark}|${this.heading !== null}|${this.heading !== null && this.href !== null}`;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(toolbarHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-toolbar", XtyleToolbar);
+//# sourceMappingURL=toolbar.js.map

package/dist/elements/toolbar.js.map

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

package/dist/elements/tooltip.d.ts

@@ -0,0 +1,63 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type TooltipPlacement } from "../markup/index.js";
+type Placement = TooltipPlacement;
+export declare class XtyleTooltip extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private contentId;
+    private hideTimer;
+    private wiredTriggers;
+    private wiredContent;
+    private rootWired;
+    private fragment;
+    static get observedAttributes(): string[];
+    get text(): string | null;
+    set text(value: string);
+    get placement(): Placement;
+    set placement(value: Placement);
+    get tone(): string | null;
+    set tone(value: string);
+    get variant(): string | null;
+    set variant(value: string);
+    get mode(): string | null;
+    set mode(value: string);
+    get size(): string | null;
+    set size(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    private get triggerSlot();
+    private get content();
+    attributeChangedCallback(name: string): void;
+    private get bindings();
+    /** Structural state ops can't patch incrementally: whether the tip body is bound `text` or a
+     * `content` slot. A change here rebuilds; placement and `open` are cheap `setAttr` patches. */
+    private shapeSignature;
+    /** The trigger element(s) wrapped by the tooltip. In shadow DOM the trigger is projected through
+     * the default `<slot>`, so read its `assignedElements`. In light DOM the scaffold's `<slot>` was
+     * replaced by the trigger at compose time, so it's a direct child of `[data-root]` — every element
+     * child except the content panel. */
+    private triggerEls;
+    private show;
+    /** Flip to the placement that fits the viewport, then clamp the cross-axis so the tip never
+     * spills past a viewport edge — shifting the content via `--xtyle-tt-shift` and counter-shifting
+     * the arrow via `--xtyle-tt-arrow` so it keeps pointing at the anchor. Keeps the CSS-absolute
+     * model and the arrow (the chosen side's modifier class drives both); with the vars unset the
+     * scaffold's centered no-JS/SSR layout is unchanged. */
+    private reposition;
+    private scheduleHide;
+    private hide;
+    private onKeydown;
+    private syncOpen;
+    /** Wire the trigger and content listeners the fragment scaffold can't express as shadow-DOM
+     * handlers: hover/focus on the slotted light-DOM trigger and on the content panel itself. Guarded
+     * per element so re-renders don't double-bind; a remount-rebuilt content panel re-attaches. */
+    private wireTriggers;
+    /** A tip is "empty" only when it has neither bound `text` nor `content`. Read the live panel rather
+     * than `[slot="content"]` — SSR composition strips the `slot` attribute as it folds the content in,
+     * so the attribute check would false-warn on every composed content tooltip. Anything in the panel
+     * beyond the arrow and the (empty) bound-text node counts as content. */
+    private warnIfEmpty;
+    protected template(): string;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/elements/tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjE,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3E,KAAK,SAAS,GAAG,gBAAgB,CAAC;AAIlC,qBAAa,YAAa,SAAQ,YAAY;IAC7C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,SAAS,CAA6D;IAC9E,OAAO,CAAC,SAAS,CAAK;IACtB,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,QAAQ,CAEb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,SAAS,IAAI,SAAS,CAEzB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAE7B;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,OAAO,IAAI,MAAM,GAAG,IAAI,CAE3B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,EAExB;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,OAAO,GAElB;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAS5C,OAAO,KAAK,QAAQ,GAWnB;IAED;mGAC+F;IAC/F,OAAO,CAAC,cAAc;IAItB;;;yCAGqC;IACrC,OAAO,CAAC,UAAU;IAiBlB,OAAO,CAAC,IAAI,CAIV;IAEF;;;;4DAIwD;IACxD,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,IAAI,CAGV;IAEF,OAAO,CAAC,SAAS,CAKf;IAEF,OAAO,CAAC,QAAQ;IAKhB;;mGAE+F;IAC/F,OAAO,CAAC,YAAY;IAsBpB;;;6EAGyE;IACzE,OAAO,CAAC,WAAW;IAiBnB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CASjC"}