@xtyle/core 0.5.0

package/dist/elements/badge.js

@@ -0,0 +1,129 @@
+import { XtyleElement, define } from "./base.js";
+import { badgeHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/badge/source.generated.js";
+const STATUS_WORD = {
+    success: "Success",
+    warn: "Warning",
+    danger: "Danger",
+    info: "Info",
+};
+export class XtyleBadge extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "badge", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["variant", "tone", "size", "dot", "pulse", "count", "removable", "remove-label"];
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "soft";
+    }
+    set variant(value) {
+        this.setAttribute("variant", 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 dot() {
+        return this.hasAttribute("dot");
+    }
+    set dot(value) {
+        this.reflectBoolean("dot", value);
+    }
+    /** Mirrors Progress's pulse: a bare `pulse` (or `slow`) breathes on the 1.8s cadence, `fast` on 0.9s. */
+    get pulse() {
+        const raw = this.getAttribute("pulse");
+        if (raw === null)
+            return null;
+        return raw === "fast" ? "fast" : "slow";
+    }
+    set pulse(value) {
+        if (value === true)
+            this.setAttribute("pulse", "slow");
+        else if (!value)
+            this.removeAttribute("pulse");
+        else
+            this.setAttribute("pulse", value);
+    }
+    get count() {
+        return this.getAttribute("count");
+    }
+    set count(value) {
+        if (value === null || value === undefined)
+            this.removeAttribute("count");
+        else
+            this.setAttribute("count", String(value));
+    }
+    get removable() {
+        return this.hasAttribute("removable");
+    }
+    set removable(value) {
+        this.reflectBoolean("removable", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    /** 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". */
+    get removeLabel() {
+        const explicit = this.getAttribute("remove-label");
+        if (explicit)
+            return explicit;
+        const text = this.fragment.slottedText();
+        return text ? `Remove ${text}` : "Remove";
+    }
+    get bindings() {
+        return {
+            variant: this.variant,
+            tone: this.tone,
+            size: this.size,
+            dot: this.dot,
+            pulse: this.pulse,
+            count: this.count,
+            removable: this.removable,
+            removeLabel: this.removeLabel,
+        };
+    }
+    /** 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. */
+    shapeSignature() {
+        const count = this.count;
+        const hasCount = count !== null && count !== "" && count !== "undefined";
+        const statusWord = STATUS_WORD[this.tone] ?? "";
+        return `${this.dot}|${hasCount}|${count}|${this.removable}|${this.removeLabel}|${statusWord}`;
+    }
+    warnIfRemoveUnnamed() {
+        if (this.removable && !this.getAttribute("remove-label") && !this.fragment.slottedText()) {
+            console.warn("xtyle-badge: a removable badge has no `remove-label` and no text to compose one from. The dismiss button defaults to \"Remove\"; set `remove-label` for a specific name.");
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(badgeHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.warnIfRemoveUnnamed();
+    }
+}
+define("xtyle-badge", XtyleBadge);
+//# sourceMappingURL=badge.js.map

package/dist/elements/badge.js.map

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

package/dist/elements/bar.d.ts

@@ -0,0 +1,35 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type BarSeries, type BarScheme } from "../markup/index.js";
+export type { BarSeries, BarScheme };
+export declare class XtyleBar extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private seriesProp;
+    private categoriesProp;
+    private schemeProp;
+    private fragment;
+    static get observedAttributes(): string[];
+    /** Which axis drives the palette. `auto` (default) colors by category for a single series so the
+     * scheme still varies, and by series once there's more than one. */
+    private resolvedColorBy;
+    get series(): BarSeries[];
+    set series(value: BarSeries[]);
+    get categories(): string[];
+    set categories(value: string[]);
+    get scheme(): BarScheme;
+    set scheme(value: BarScheme);
+    get reverse(): boolean;
+    set reverse(value: boolean);
+    get stacked(): boolean;
+    set stacked(value: boolean);
+    get selectable(): boolean;
+    set selectable(value: boolean);
+    attributeChangedCallback(name: string): void;
+    /** Reads the schemes' tokens off the live cascade, so the palette tracks the applied theme. */
+    private paletteRegister;
+    private colors;
+    private get bindings();
+    private wireInteraction;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar.d.ts","sourceRoot":"","sources":["../../src/elements/bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAsB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAC7E,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAMhF,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AAWrC,qBAAa,QAAS,SAAQ,YAAY;IACzC,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,cAAc,CAAyB;IAC/C,OAAO,CAAC,UAAU,CAA0B;IAC5C,OAAO,CAAC,QAAQ,CAGb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED;wEACoE;IACpE,OAAO,CAAC,eAAe;IAMvB,IAAI,MAAM,IAAI,SAAS,EAAE,CAExB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAG5B;IAED,IAAI,UAAU,IAAI,MAAM,EAAE,CAEzB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,EAG7B;IAED,IAAI,MAAM,IAAI,SAAS,CAMtB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,SAAS,EAG1B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAO5C,+FAA+F;IAC/F,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,MAAM;IAOd,OAAO,KAAK,QAAQ,GAkBnB;IAED,OAAO,CAAC,eAAe;IAiEvB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAKjC"}

package/dist/elements/bar.js

@@ -0,0 +1,204 @@
+import { XtyleElement, define, escapeHtml } from "./base.js";
+import { barHostCss } from "../markup/index.js";
+import { seriesPalette, seriesColorsFor, SERIES_SCHEMES, SERIES_TOKENS } from "../series.js";
+import { FragmentHost } from "./fragment-host.js";
+import { readLiveRegister } from "./live-register.js";
+import { manifest, fragmentSources } from "./fragments/bar/source.generated.js";
+function parseJson(raw) {
+    if (!raw)
+        return null;
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return null;
+    }
+}
+export class XtyleBar extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    seriesProp = null;
+    categoriesProp = null;
+    schemeProp = null;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "bar", {
+        applyIntent: () => { },
+        afterApply: () => this.wireInteraction(),
+    });
+    static get observedAttributes() {
+        return ["series", "categories", "scheme", "reverse", "color-by", "orientation", "stacked", "show-values", "legend", "height", "label", "selectable"];
+    }
+    /** Which axis drives the palette. `auto` (default) colors by category for a single series so the
+     * scheme still varies, and by series once there's more than one. */
+    resolvedColorBy() {
+        const raw = this.getAttribute("color-by");
+        if (raw === "series" || raw === "category")
+            return raw;
+        return this.series.length <= 1 ? "category" : "series";
+    }
+    get series() {
+        return this.seriesProp ?? parseJson(this.getAttribute("series")) ?? [];
+    }
+    set series(value) {
+        this.seriesProp = value;
+        if (this.root.firstChild)
+            this.render();
+    }
+    get categories() {
+        return this.categoriesProp ?? parseJson(this.getAttribute("categories")) ?? [];
+    }
+    set categories(value) {
+        this.categoriesProp = value;
+        if (this.root.firstChild)
+            this.render();
+    }
+    get scheme() {
+        if (this.schemeProp)
+            return this.schemeProp;
+        const raw = this.getAttribute("scheme");
+        if (!raw)
+            return "accents";
+        if (raw.startsWith("["))
+            return parseJson(raw) ?? "accents";
+        return raw;
+    }
+    set scheme(value) {
+        this.schemeProp = value;
+        if (this.root.firstChild)
+            this.render();
+    }
+    get reverse() {
+        return this.hasAttribute("reverse");
+    }
+    set reverse(value) {
+        this.reflectBoolean("reverse", value);
+    }
+    get stacked() {
+        return this.hasAttribute("stacked");
+    }
+    set stacked(value) {
+        this.reflectBoolean("stacked", value);
+    }
+    get selectable() {
+        return this.hasAttribute("selectable");
+    }
+    set selectable(value) {
+        this.reflectBoolean("selectable", value);
+    }
+    attributeChangedCallback(name) {
+        if (name === "series")
+            this.seriesProp = null;
+        if (name === "categories")
+            this.categoriesProp = null;
+        if (name === "scheme")
+            this.schemeProp = null;
+        if (this.root.firstChild)
+            this.render();
+    }
+    /** Reads the schemes' tokens off the live cascade, so the palette tracks the applied theme. */
+    paletteRegister() {
+        return readLiveRegister(this, SERIES_TOKENS, () => {
+            if (this.root.firstChild)
+                this.render();
+        });
+    }
+    colors(items) {
+        const scheme = this.scheme;
+        if (Array.isArray(scheme))
+            return seriesPalette(scheme, items.length, {}, { reverse: this.reverse });
+        const resolved = SERIES_SCHEMES.includes(scheme) ? scheme : "accents";
+        return seriesColorsFor(resolved, items, this.paletteRegister(), { reverse: this.reverse });
+    }
+    get bindings() {
+        const series = this.series;
+        const colorBy = this.resolvedColorBy();
+        const colorItems = colorBy === "category" ? this.categories.map(() => ({})) : series;
+        return {
+            series,
+            categories: this.categories,
+            colors: this.colors(colorItems),
+            colorBy,
+            orientation: this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical",
+            stacked: this.stacked,
+            showValues: this.hasAttribute("show-values"),
+            legend: this.getAttribute("legend") !== "false",
+            height: this.getAttribute("height") ? Number(this.getAttribute("height")) : 320,
+            title: this.getAttribute("label"),
+            ariaLabel: this.getAttribute("label"),
+            selectable: this.selectable,
+        };
+    }
+    wireInteraction() {
+        const chart = this.root.querySelector(".xtyle-bar");
+        const tooltip = this.root.querySelector(".xtyle-bar__tooltip");
+        if (!chart || !tooltip)
+            return;
+        const bars = [...this.root.querySelectorAll(".xtyle-bar__bar")];
+        const series = this.series;
+        const categories = this.categories;
+        const show = (bar) => {
+            const si = Number(bar.dataset.si);
+            const ci = Number(bar.dataset.ci);
+            const name = series[si]?.name ?? "";
+            const value = series[si]?.values[ci] ?? 0;
+            const category = categories[ci] ?? "";
+            tooltip.innerHTML = `<span class="xtyle-bar__tooltip-name">${escapeHtml(category)}${name ? ` · ${escapeHtml(name)}` : ""}</span> <span class="xtyle-bar__tooltip-value">${escapeHtml(String(value))}</span>`;
+            const chartRect = chart.getBoundingClientRect();
+            const barRect = bar.getBoundingClientRect();
+            tooltip.style.left = `${barRect.left + barRect.width / 2 - chartRect.left}px`;
+            tooltip.style.top = `${barRect.top - chartRect.top}px`;
+            tooltip.hidden = false;
+            chart.classList.add("xtyle-bar--hovering");
+            for (const b of bars)
+                b.classList.toggle("is-active", b === bar);
+        };
+        const hide = () => {
+            tooltip.hidden = true;
+            chart.classList.remove("xtyle-bar--hovering");
+            for (const b of bars)
+                b.classList.remove("is-active");
+        };
+        for (const bar of bars) {
+            bar.addEventListener("pointerenter", () => show(bar));
+            bar.addEventListener("focus", () => show(bar));
+            bar.addEventListener("pointerleave", hide);
+            bar.addEventListener("blur", hide);
+        }
+        if (!this.selectable)
+            return;
+        const emitSelect = (bar) => {
+            const si = Number(bar.dataset.si);
+            const ci = Number(bar.dataset.ci);
+            this.dispatchEvent(new CustomEvent("select", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    series: series[si]?.name ?? "",
+                    category: categories[ci] ?? "",
+                    value: series[si]?.values[ci] ?? 0,
+                    seriesIndex: si,
+                    categoryIndex: ci,
+                },
+            }));
+        };
+        for (const bar of bars) {
+            bar.addEventListener("click", () => emitSelect(bar));
+            bar.addEventListener("keydown", (event) => {
+                if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault();
+                    emitSelect(bar);
+                }
+            });
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(barHostCss);
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-bar", XtyleBar);
+//# sourceMappingURL=bar.js.map

package/dist/elements/bar.js.map

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

package/dist/elements/base.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The base every xtyle element extends — and the blessed base for consumer
+ * subclasses too. The `protected` members below are the stable extension contract:
+ * extend a shipped element (e.g. `XtyleButton`) to add behavior or state, or extend
+ * `XtyleElement` directly for a fully custom element that still rides the shared token
+ * sheet and the coverage contract. See the "Extending components" docs.
+ *
+ * To subclass: widen `observedAttributes` (spread `super.observedAttributes`), add
+ * your getters/setters, override `template()` (and `styles()` if needed), and call
+ * `render()` on the changes you care about. A subclass that consumes new theme tokens
+ * still declares them in its manifest like any first-party element.
+ */
+/** The xript slot styling mode an element renders under. `isolated` attaches a shadow
+ * root so host styles can't reach the fragment; `inherit` / `scoped` render into light DOM
+ * so the shared component sheet (already global) styles them and no per-instance CSS ships. */
+export type StyleMode = "inherit" | "isolated" | "scoped" | "auto";
+export declare abstract class XtyleElement extends HTMLElement {
+    /** The render root. Under `isolated` it's a real shadow root; under `inherit` / `scoped`
+     * it's the element itself (light DOM), typed as `ShadowRoot` so the shadow elements keep
+     * their shape — a light element only ever touches the shared `querySelector` / `innerHTML`
+     * / `addEventListener` surface both have. Subclasses read/write it via `template()` / `render()`. */
+    protected root: ShadowRoot;
+    private hydrated;
+    /** Which `StyleMode` this element renders under, mirroring the `style` its host slot declares
+     * in `component-host.json`. `isolated` attaches a shadow root and adopts the shared component
+     * sheet; `inherit` / `scoped` render into light DOM so the already-global sheet styles them;
+     * `auto` resolves per-instance (light when upgrading over pre-rendered structure, shadow when
+     * created bare). An element overrides this getter to pick a non-default mode. */
+    protected get styleMode(): StyleMode;
+    constructor();
+    /** The element's shadow markup. Required; a subclass overrides it to re-shape output. */
+    protected abstract template(): string;
+    /** Per-element host-layout rules only (e.g. `:host { display: ... }`). The component's visual styling comes from the shared `@xtyle/core/css` sheet. */
+    protected styles(): string;
+    connectedCallback(): void;
+    /** Paint the render root. Under `isolated`, adopt the shared component sheet and inline
+     * the host-layout `styles()` so the shadow is self-contained. Under `inherit` / `scoped`,
+     * the global sheet already styles the light DOM, so neither is written. Call after a state
+     * change to re-render. */
+    protected render(): void;
+    /** Adopt the shared component sheet onto the render root when it's a real shadow root;
+     * a light-DOM root leans on the already-global sheet, so the `in` guard skips it. */
+    protected adoptComponentSheet(): void;
+    /**
+     * Forward a click on slotted (light-DOM) label content to a shadow-DOM control. A native
+     * `<label>` only activates its control for clicks inside its own tree, so slotted label text
+     * never reaches a control rendered in the shadow root — clicking the visible label does
+     * nothing. Call from a host `click` listener: it no-ops on direct control hits (the box
+     * already toggled, so the toggle never doubles) and only forwards when the click passed
+     * through a `<slot>`.
+     */
+    protected forwardSlottedLabelClick(event: Event, control: HTMLElement | null | undefined): void;
+    /** Reflect a boolean prop to a bare attribute (present/absent). */
+    protected reflectBoolean(name: string, value: boolean): void;
+    /**
+     * Reflect a string prop to an attribute, removing it when nullish or empty.
+     * A framework that assigns `el.prop = undefined` (Svelte sets custom-element
+     * properties) would otherwise stamp the literal `"undefined"` via `setAttribute`.
+     */
+    protected reflectString(name: string, value: string | null | undefined): void;
+    /**
+     * Reflect a string prop to an attribute and drive the inner control's live `.value`
+     * property. A user-modified control is dirty — its `.value` no longer tracks the
+     * content attribute — so `reflectString` alone leaves stale text when programmatically
+     * clearing the field. The live element is resolved via a getter *after* the attribute
+     * write because `reflectString` can trigger a synchronous `attributeChangedCallback`
+     * that rebuilds the DOM; reading the element before that write would capture a
+     * potentially stale reference.
+     */
+    protected reflectStringLive(name: string, value: string | null | undefined, getLiveElement: () => {
+        value: string;
+    } | null | undefined): void;
+}
+export declare function define(name: string, ctor: CustomElementConstructor): void;
+/**
+ * Read a light-DOM control attribute that a framework may have set as a DOM property
+ * instead — Svelte sets `value`/`open`/`disabled` as properties on a plain element
+ * rather than attributes, so an attribute-only read misses them. Astro and hand-written
+ * HTML set real attributes; this accepts both.
+ */
+export declare function readAttrOrProp(el: HTMLElement, name: string): string | null;
+/** The boolean counterpart of `readAttrOrProp` — present attribute or `true` property. */
+export declare function readBoolAttrOrProp(el: HTMLElement, name: string): boolean;
+export declare function escapeHtml(value: string): string;
+export declare function escapeAttr(value: string): string;
+//# sourceMappingURL=base.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/elements/base.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH;;+FAE+F;AAC/F,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEnE,8BAAsB,YAAa,SAAQ,WAAW;IACrD;;;yGAGqG;IACrG,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC;IAE3B,OAAO,CAAC,QAAQ,CAAS;IAEzB;;;;qFAIiF;IACjF,SAAS,KAAK,SAAS,IAAI,SAAS,CAEnC;;IAuBD,yFAAyF;IACzF,SAAS,CAAC,QAAQ,CAAC,QAAQ,IAAI,MAAM;IAErC,wJAAwJ;IACxJ,SAAS,CAAC,MAAM,IAAI,MAAM;IAI1B,iBAAiB,IAAI,IAAI;IAazB;;;8BAG0B;IAC1B,SAAS,CAAC,MAAM,IAAI,IAAI;IASxB;yFACqF;IACrF,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAOrC;;;;;;;OAOG;IACH,SAAS,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;IAO/F,mEAAmE;IACnE,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAK5D;;;;OAIG;IACH,SAAS,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;IAK7E;;;;;;;;OAQG;IACH,SAAS,CAAC,iBAAiB,CAC1B,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,cAAc,EAAE,MAAM;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,GAAG,SAAS,GACxD,IAAI;CAMP;AAED,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,wBAAwB,GAAG,IAAI,CAGzE;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAK3E;AAED,0FAA0F;AAC1F,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAGzE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD"}

package/dist/elements/base.js

@@ -0,0 +1,157 @@
+import { componentStyleSheet } from "../css/index.js";
+export class XtyleElement extends HTMLElement {
+    /** The render root. Under `isolated` it's a real shadow root; under `inherit` / `scoped`
+     * it's the element itself (light DOM), typed as `ShadowRoot` so the shadow elements keep
+     * their shape — a light element only ever touches the shared `querySelector` / `innerHTML`
+     * / `addEventListener` surface both have. Subclasses read/write it via `template()` / `render()`. */
+    root;
+    hydrated = false;
+    /** Which `StyleMode` this element renders under, mirroring the `style` its host slot declares
+     * in `component-host.json`. `isolated` attaches a shadow root and adopts the shared component
+     * sheet; `inherit` / `scoped` render into light DOM so the already-global sheet styles them;
+     * `auto` resolves per-instance (light when upgrading over pre-rendered structure, shadow when
+     * created bare). An element overrides this getter to pick a non-default mode. */
+    get styleMode() {
+        return "isolated";
+    }
+    constructor() {
+        super();
+        // `isolated` reuses a declarative shadow root the SSR binding emitted (DSD), so the
+        // element upgrades in place over its server-rendered markup instead of throwing on a
+        // second `attachShadow`, and falls back to attaching one when created client-side
+        // (the Svelte binding, `document.createElement`). `inherit` / `scoped` render into the
+        // element's own light DOM — no shadow, no boundary, the global sheet reaches in.
+        // `auto` resolves per-instance: an element upgrading over pre-rendered light-DOM structure
+        // (`[data-root]`, composed by the Astro SSR binding) stays light and adopts it; one created
+        // bare (a framework client-render, raw markup) attaches a shadow root and projects the
+        // consumer's framework-owned children via native `<slot>`. A forced mode keeps its behavior.
+        // `:scope >` matters: the composed scaffold's `[data-root]` is always a direct child, while a
+        // nested auto component (e.g. a `<xtyle-text>` inside a slotted panel) carries its own deeper
+        // `[data-root]` — a bare `querySelector` would mistake that for this element's own scaffold.
+        const mode = this.styleMode;
+        const light = mode === "auto" ? this.querySelector(":scope > [data-root]") !== null : mode !== "isolated";
+        this.root = light
+            ? this
+            : (this.shadowRoot ?? this.attachShadow({ mode: "open" }));
+    }
+    /** Per-element host-layout rules only (e.g. `:host { display: ... }`). The component's visual styling comes from the shared `@xtyle/core/css` sheet. */
+    styles() {
+        return "";
+    }
+    connectedCallback() {
+        // Render once on first connect — whether the shadow is empty (client-created,
+        // e.g. the Svelte binding) or already holds a server-rendered declarative shadow
+        // (the Astro DSD binding). For DSD this replaces the zero-JS inline shadow with
+        // an identical client render that adopts the one shared `componentStyleSheet`
+        // (the hybrid: inline CSS for the no-JS first paint, shared sheet once hydrated)
+        // and runs the element's event wiring — so an interactive control hydrated from
+        // DSD is live, not just styled.
+        if (this.hydrated)
+            return;
+        this.hydrated = true;
+        this.render();
+    }
+    /** Paint the render root. Under `isolated`, adopt the shared component sheet and inline
+     * the host-layout `styles()` so the shadow is self-contained. Under `inherit` / `scoped`,
+     * the global sheet already styles the light DOM, so neither is written. Call after a state
+     * change to re-render. */
+    render() {
+        if (this.styleMode === "isolated") {
+            this.adoptComponentSheet();
+            this.root.innerHTML = `<style>${this.styles()}</style>${this.template()}`;
+            return;
+        }
+        this.root.innerHTML = this.template();
+    }
+    /** Adopt the shared component sheet onto the render root when it's a real shadow root;
+     * a light-DOM root leans on the already-global sheet, so the `in` guard skips it. */
+    adoptComponentSheet() {
+        const sheet = componentStyleSheet();
+        if (sheet && "adoptedStyleSheets" in this.root) {
+            this.root.adoptedStyleSheets = [sheet];
+        }
+    }
+    /**
+     * Forward a click on slotted (light-DOM) label content to a shadow-DOM control. A native
+     * `<label>` only activates its control for clicks inside its own tree, so slotted label text
+     * never reaches a control rendered in the shadow root — clicking the visible label does
+     * nothing. Call from a host `click` listener: it no-ops on direct control hits (the box
+     * already toggled, so the toggle never doubles) and only forwards when the click passed
+     * through a `<slot>`.
+     */
+    forwardSlottedLabelClick(event, control) {
+        if (!control)
+            return;
+        const path = event.composedPath();
+        if (path.includes(control))
+            return;
+        if (path.some((node) => node instanceof HTMLSlotElement))
+            control.click();
+    }
+    /** Reflect a boolean prop to a bare attribute (present/absent). */
+    reflectBoolean(name, value) {
+        if (value)
+            this.setAttribute(name, "");
+        else
+            this.removeAttribute(name);
+    }
+    /**
+     * Reflect a string prop to an attribute, removing it when nullish or empty.
+     * A framework that assigns `el.prop = undefined` (Svelte sets custom-element
+     * properties) would otherwise stamp the literal `"undefined"` via `setAttribute`.
+     */
+    reflectString(name, value) {
+        if (value == null || value === "")
+            this.removeAttribute(name);
+        else
+            this.setAttribute(name, value);
+    }
+    /**
+     * Reflect a string prop to an attribute and drive the inner control's live `.value`
+     * property. A user-modified control is dirty — its `.value` no longer tracks the
+     * content attribute — so `reflectString` alone leaves stale text when programmatically
+     * clearing the field. The live element is resolved via a getter *after* the attribute
+     * write because `reflectString` can trigger a synchronous `attributeChangedCallback`
+     * that rebuilds the DOM; reading the element before that write would capture a
+     * potentially stale reference.
+     */
+    reflectStringLive(name, value, getLiveElement) {
+        const next = value == null ? "" : String(value);
+        this.reflectString(name, next);
+        const el = getLiveElement();
+        if (el && el.value !== next)
+            el.value = next;
+    }
+}
+export function define(name, ctor) {
+    if (typeof customElements === "undefined")
+        return;
+    if (!customElements.get(name))
+        customElements.define(name, ctor);
+}
+/**
+ * Read a light-DOM control attribute that a framework may have set as a DOM property
+ * instead — Svelte sets `value`/`open`/`disabled` as properties on a plain element
+ * rather than attributes, so an attribute-only read misses them. Astro and hand-written
+ * HTML set real attributes; this accepts both.
+ */
+export function readAttrOrProp(el, name) {
+    const attr = el.getAttribute(name);
+    if (attr !== null)
+        return attr;
+    const prop = el[name];
+    return typeof prop === "string" ? prop : null;
+}
+/** The boolean counterpart of `readAttrOrProp` — present attribute or `true` property. */
+export function readBoolAttrOrProp(el, name) {
+    if (el.hasAttribute(name))
+        return true;
+    return el[name] === true;
+}
+export function escapeHtml(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+export function escapeAttr(value) {
+    return escapeHtml(value).replace(/"/g, "&quot;");
+}
+//# sourceMappingURL=base.js.map

package/dist/elements/base.js.map

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