@xtyle/core 0.5.0

package/dist/elements/tabs.js

@@ -0,0 +1,194 @@
+import { XtyleElement, define, readAttrOrProp, readBoolAttrOrProp } from "./base.js";
+import { tabsHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/tabs/source.generated.js";
+let tabsSeq = 0;
+export class XtyleTabs extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    uid = `xtyle-tabs-${tabsSeq++}`;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "tabs", {
+        context: (handler) => (handler === "navKeydown" ? this.navContext() : undefined),
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+    });
+    static get observedAttributes() {
+        return ["variant", "size", "activation", "value", "label", "labelledby", "items", "sticky", "tablist"];
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "underline";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get activation() {
+        return this.getAttribute("activation") === "manual" ? "manual" : "automatic";
+    }
+    set activation(value) {
+        this.setAttribute("activation", value);
+    }
+    get value() {
+        return this.getAttribute("value");
+    }
+    set value(value) {
+        this.reflectString("value", value);
+    }
+    get sticky() {
+        return this.hasAttribute("sticky");
+    }
+    set sticky(value) {
+        this.reflectBoolean("sticky", value);
+    }
+    get tablist() {
+        return this.hasAttribute("tablist");
+    }
+    set tablist(value) {
+        this.reflectBoolean("tablist", value);
+    }
+    get items() {
+        const raw = this.getAttribute("items");
+        if (!raw)
+            return [];
+        try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            console.warn("xtyle-tabs: `items` is not valid JSON; reading the light-DOM tabs instead.");
+            return [];
+        }
+    }
+    settleHandle = 0;
+    connectedCallback() {
+        super.connectedCallback();
+        this.scheduleSettle();
+    }
+    disconnectedCallback() {
+        if (this.settleHandle && typeof cancelAnimationFrame !== "undefined") {
+            cancelAnimationFrame(this.settleHandle);
+        }
+        this.settleHandle = 0;
+    }
+    /**
+     * Re-assert the panel↔slot mapping once the DOM settles after connect. A view-transition
+     * swap (Astro's ClientRouter) or a framework re-render can connect this element while a
+     * stale panel from the outgoing tree is still present, inflating the panel query and
+     * shifting the index-based slot assignment by one — which leaves the last panel unslotted,
+     * and an unslotted node inherits nothing, so its themed content renders unstyled until the
+     * next render. A second pass on the next frame runs against the settled child set.
+     */
+    scheduleSettle() {
+        if (typeof requestAnimationFrame === "undefined")
+            return;
+        if (this.settleHandle)
+            cancelAnimationFrame(this.settleHandle);
+        this.settleHandle = requestAnimationFrame(() => {
+            this.settleHandle = 0;
+            if (this.isConnected && this.root.firstChild)
+                this.render();
+        });
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get pairs() {
+        let tabs = Array.from(this.querySelectorAll(':scope > [slot="tab"]'));
+        let panels = Array.from(this.querySelectorAll(':scope > [slot="panel"], :scope > [slot^="panel-"]'));
+        if (tabs.length === 0) {
+            const direct = Array.from(this.children);
+            tabs = direct.filter((el) => el.tagName === "BUTTON");
+            panels = direct.filter((el) => el.tagName !== "BUTTON");
+        }
+        return tabs.map((tab, i) => ({
+            tab,
+            panel: panels[i] ?? null,
+            disabled: readBoolAttrOrProp(tab, "disabled") || tab.getAttribute("aria-disabled") === "true",
+        }));
+    }
+    /**
+     * Project each light-DOM panel through its own named slot so live framework
+     * content stays mounted and reactive — the snapshot path would freeze it to
+     * static HTML and strip handlers and effects.
+     */
+    assignPanelSlots() {
+        if (this.tablist || this.items.length > 0)
+            return;
+        this.pairs.forEach((pair, i) => pair.panel?.setAttribute("slot", `panel-${i}`));
+    }
+    get markupItems() {
+        const fromAttr = this.items;
+        if (fromAttr.length > 0)
+            return fromAttr;
+        return this.pairs.map((pair, i) => ({
+            label: pair.tab.innerHTML,
+            panel: "",
+            panelSlot: `panel-${i}`,
+            value: readAttrOrProp(pair.tab, "value") ?? String(i),
+            disabled: pair.disabled,
+        }));
+    }
+    get bindings() {
+        return {
+            tabs: this.markupItems.map((item, i) => ({
+                key: item.value ?? String(i),
+                label: item.label,
+                panelSlot: item.panelSlot,
+                panel: item.panel ?? "",
+                disabled: item.disabled,
+            })),
+            activeId: this.value,
+            variant: this.variant,
+            size: this.size,
+            sticky: this.sticky,
+            tablist: this.tablist,
+            label: this.getAttribute("label"),
+            labelledby: this.getAttribute("labelledby"),
+            uid: this.uid,
+        };
+    }
+    navContext() {
+        const items = this.markupItems;
+        const keys = items.map((item, i) => item.value ?? String(i));
+        const enabledKeys = items
+            .map((item, i) => ({ key: item.value ?? String(i), disabled: item.disabled }))
+            .filter((entry) => !entry.disabled)
+            .map((entry) => entry.key);
+        return { keys, enabledKeys, activation: this.activation };
+    }
+    applyIntent(intent, event) {
+        if (intent.preventDefault)
+            event.preventDefault();
+        if (intent.select !== undefined) {
+            this.setAttribute("value", intent.select);
+            this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { value: intent.select } }));
+        }
+        if (intent.focus !== undefined) {
+            const tab = this.root.querySelector(`[role="tab"][data-key="${CSS.escape(intent.focus)}"]`);
+            tab?.focus();
+        }
+    }
+    warnIfUnnamed() {
+        if (!this.getAttribute("label") && !this.getAttribute("labelledby")) {
+            console.warn("xtyle-tabs: no accessible name. Provide a `label` or `labelledby` so the tablist is announced.");
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.assignPanelSlots();
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(tabsHostCss);
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+    }
+}
+define("xtyle-tabs", XtyleTabs);
+//# sourceMappingURL=tabs.js.map

package/dist/elements/tabs.js.map

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

package/dist/elements/text.d.ts

@@ -0,0 +1,32 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { FullTone } from "../vocab.js";
+export type TextAs = "p" | "span";
+export type TextSize = "xs" | "sm" | "body" | "lg";
+export type TextWeight = "normal" | "medium" | "semibold" | "bold";
+export type TextLeading = "tight" | "snug" | "loose";
+export type TextTone = "default" | "muted" | "subtle" | FullTone;
+export declare class XtyleText extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private fragment;
+    static get observedAttributes(): string[];
+    get as(): TextAs;
+    set as(value: TextAs);
+    get size(): TextSize;
+    set size(value: TextSize);
+    get weight(): TextWeight;
+    set weight(value: TextWeight);
+    get leading(): TextLeading;
+    set leading(value: TextLeading);
+    get tone(): TextTone;
+    set tone(value: TextTone);
+    get mono(): boolean;
+    set mono(value: boolean);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** A signature of the state ops can't express incrementally — the element tag (`as`), which a
+     * `setAttr` class patch can't switch. When it changes, the structure is rebuilt rather than patched. */
+    private shapeSignature;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/elements/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK5C,MAAM,MAAM,MAAM,GAAG,GAAG,GAAG,MAAM,CAAC;AAClC,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;AACnD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AACnE,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEjE,qBAAa,SAAU,SAAQ,YAAY;IAC1C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAEb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,EAAE,IAAI,MAAM,CAEf;IACD,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAEnB;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,IAAI,MAAM,IAAI,UAAU,CAEvB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,UAAU,EAE3B;IAED,IAAI,OAAO,IAAI,WAAW,CAEzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,WAAW,EAE7B;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GASnB;IAED;4GACwG;IACxG,OAAO,CAAC,cAAc;IAItB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAMjC"}

package/dist/elements/text.js

@@ -0,0 +1,81 @@
+import { XtyleElement, define } from "./base.js";
+import { textHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/text/source.generated.js";
+export class XtyleText extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "text", {
+        applyIntent: () => { },
+    });
+    static get observedAttributes() {
+        return ["as", "size", "weight", "leading", "tone", "mono"];
+    }
+    get as() {
+        return this.getAttribute("as") ?? "p";
+    }
+    set as(value) {
+        this.setAttribute("as", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "body";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get weight() {
+        return this.getAttribute("weight") ?? "normal";
+    }
+    set weight(value) {
+        this.setAttribute("weight", value);
+    }
+    get leading() {
+        return this.getAttribute("leading") ?? "snug";
+    }
+    set leading(value) {
+        this.setAttribute("leading", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "default";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get mono() {
+        return this.hasAttribute("mono");
+    }
+    set mono(value) {
+        this.reflectBoolean("mono", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            as: this.as,
+            size: this.size,
+            weight: this.weight,
+            leading: this.leading,
+            tone: this.tone,
+            mono: this.mono,
+        };
+    }
+    /** A signature of the state ops can't express incrementally — the element tag (`as`), which a
+     * `setAttr` class patch can't switch. When it changes, the structure is rebuilt rather than patched. */
+    shapeSignature() {
+        return this.as;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(textHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-text", XtyleText);
+//# sourceMappingURL=text.js.map

package/dist/elements/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/elements/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AAEjE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAQjF,MAAM,OAAO,SAAU,SAAQ,YAAY;IAC1C,IAAuB,SAAS;QAC/B,OAAO,MAAM,CAAC;IACf,CAAC;IAEO,QAAQ,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,EAAE;QACjF,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;KACrB,CAAC,CAAC;IAEH,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5D,CAAC;IAED,IAAI,EAAE;QACL,OAAQ,IAAI,CAAC,YAAY,CAAC,IAAI,CAAY,IAAI,GAAG,CAAC;IACnD,CAAC;IACD,IAAI,EAAE,CAAC,KAAa;QACnB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAChC,CAAC;IAED,IAAI,IAAI;QACP,OAAQ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAc,IAAI,MAAM,CAAC;IAC1D,CAAC;IACD,IAAI,IAAI,CAAC,KAAe;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,MAAM;QACT,OAAQ,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAgB,IAAI,QAAQ,CAAC;IAChE,CAAC;IACD,IAAI,MAAM,CAAC,KAAiB;QAC3B,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,OAAO;QACV,OAAQ,IAAI,CAAC,YAAY,CAAC,SAAS,CAAiB,IAAI,MAAM,CAAC;IAChE,CAAC;IACD,IAAI,OAAO,CAAC,KAAkB;QAC7B,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,IAAI;QACP,OAAQ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAc,IAAI,SAAS,CAAC;IAC7D,CAAC;IACD,IAAI,IAAI,CAAC,KAAe;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,IAAI;QACP,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IACD,IAAI,IAAI,CAAC,KAAc;QACtB,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,wBAAwB;QACvB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IAED,IAAY,QAAQ;QACnB,OAAO;YACN,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;SACf,CAAC;IACH,CAAC;IAED;4GACwG;IAChG,cAAc;QACrB,OAAO,IAAI,CAAC,EAAE,CAAC;IAChB,CAAC;IAES,QAAQ;QACjB,OAAO,EAAE,CAAC;IACX,CAAC;IAEkB,MAAM;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;CACD;AAED,MAAM,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC"}

package/dist/elements/textarea.d.ts

@@ -0,0 +1,46 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { Size } from "../index.js";
+import { type TextareaResize } from "../markup/index.js";
+export type { TextareaResize };
+export declare class XtyleTextarea extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    static formAssociated: boolean;
+    private internals;
+    private textareaNumber;
+    private fieldId;
+    private errorId;
+    private fragment;
+    static get observedAttributes(): string[];
+    get mono(): boolean;
+    set mono(value: boolean);
+    get value(): string;
+    set value(value: string | null | undefined);
+    get rows(): number;
+    set rows(value: number);
+    get resize(): TextareaResize;
+    set resize(value: TextareaResize);
+    get size(): Size;
+    set size(value: Size);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    private get field();
+    attributeChangedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private get bindings();
+    /** Drive the native field's live form properties — the boolean attrs (`disabled`,
+     * `required`) and value-bearing props a fragment op can't toggle off, plus the form value
+     * the element owns. The fragment hook owns the field's presentational state (classes,
+     * label/error text, `aria-invalid`); these stay on the host so focus and form association survive. */
+    private syncField;
+    private warnIfUnnamed;
+    private applyIntent;
+    private projectContent;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../src/elements/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAmB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAK1E,YAAY,EAAE,cAAc,EAAE,CAAC;AAI/B,qBAAa,aAAc,SAAQ,YAAY;IAC9C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,cAAc,CAAqB;IAC3C,OAAO,CAAC,OAAO,CAA2C;IAC1D,OAAO,CAAC,OAAO,CAAiD;IAChE,OAAO,CAAC,QAAQ,CAMb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAgBxC;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,IAAI,IAAI,MAAM,CAIjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,MAAM,IAAI,cAAc,CAE3B;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,cAAc,EAE/B;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,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,wBAAwB,IAAI,IAAI;IAIhC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,OAAO,KAAK,QAAQ,GAWnB;IAED;;;0GAGsG;IACtG,OAAO,CAAC,SAAS;IAgCjB,OAAO,CAAC,aAAa;IAWrB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,cAAc;IAMtB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}

package/dist/elements/textarea.js

@@ -0,0 +1,194 @@
+import { XtyleElement, define } from "./base.js";
+import { textareaHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/textarea/source.generated.js";
+import { NATIVE_INPUT_ATTRS, forwardNativeInputAttrs } from "./native-input-attrs.js";
+let textareaCounter = 0;
+export class XtyleTextarea extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    static formAssociated = true;
+    internals = this.attachInternals();
+    textareaNumber = ++textareaCounter;
+    fieldId = `xtyle-textarea-${this.textareaNumber}`;
+    errorId = `xtyle-textarea-error-${this.textareaNumber}`;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "textarea", {
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+        afterApply: () => {
+            this.projectContent();
+            this.syncField();
+        },
+    });
+    static get observedAttributes() {
+        return [
+            "label",
+            "value",
+            "rows",
+            "resize",
+            "placeholder",
+            "size",
+            "disabled",
+            "invalid",
+            "required",
+            "error",
+            "name",
+            "mono",
+            ...NATIVE_INPUT_ATTRS,
+        ];
+    }
+    get mono() {
+        return this.hasAttribute("mono");
+    }
+    set mono(value) {
+        this.reflectBoolean("mono", value);
+    }
+    get value() {
+        return this.field?.value ?? this.getAttribute("value") ?? "";
+    }
+    set value(value) {
+        this.reflectStringLive("value", value, () => this.field);
+    }
+    get rows() {
+        const raw = this.getAttribute("rows");
+        const n = raw === null ? NaN : Number(raw);
+        return Number.isFinite(n) && n > 0 ? n : 3;
+    }
+    set rows(value) {
+        this.setAttribute("rows", String(value));
+    }
+    get resize() {
+        return this.getAttribute("resize") ?? "vertical";
+    }
+    set resize(value) {
+        this.setAttribute("resize", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.reflectBoolean("disabled", value);
+    }
+    get invalid() {
+        return this.hasAttribute("invalid");
+    }
+    set invalid(value) {
+        this.reflectBoolean("invalid", value);
+    }
+    get required() {
+        return this.hasAttribute("required");
+    }
+    set required(value) {
+        this.reflectBoolean("required", value);
+    }
+    get field() {
+        return this.root.querySelector("textarea");
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    formResetCallback() {
+        const initial = this.getAttribute("value") ?? "";
+        if (this.field)
+            this.field.value = initial;
+        this.internals.setFormValue(initial);
+    }
+    formDisabledCallback(disabled) {
+        if (this.field)
+            this.field.disabled = disabled;
+    }
+    get bindings() {
+        return {
+            fieldId: this.fieldId,
+            errorId: this.errorId,
+            label: this.getAttribute("label"),
+            error: this.getAttribute("error"),
+            size: this.size,
+            resize: this.resize,
+            invalid: this.invalid,
+            mono: this.mono,
+        };
+    }
+    /** Drive the native field's live form properties — the boolean attrs (`disabled`,
+     * `required`) and value-bearing props a fragment op can't toggle off, plus the form value
+     * the element owns. The fragment hook owns the field's presentational state (classes,
+     * label/error text, `aria-invalid`); these stay on the host so focus and form association survive. */
+    syncField() {
+        const field = this.field;
+        if (!field)
+            return;
+        field.disabled = this.disabled;
+        field.required = this.required;
+        field.rows = this.rows;
+        forwardNativeInputAttrs(this, field);
+        const placeholder = this.getAttribute("placeholder");
+        if (placeholder !== null)
+            field.placeholder = placeholder;
+        else
+            field.removeAttribute("placeholder");
+        const value = this.getAttribute("value");
+        if (value !== null && field.value !== value)
+            field.value = value;
+        this.internals.setFormValue(field.value);
+        if (this.required)
+            field.setAttribute("aria-required", "true");
+        else
+            field.removeAttribute("aria-required");
+        const name = this.getAttribute("name");
+        if (name !== null)
+            field.name = name;
+        const errorText = this.getAttribute("error") ?? "";
+        if (this.invalid && errorText.length > 0)
+            field.setAttribute("aria-describedby", this.errorId);
+        else
+            field.removeAttribute("aria-describedby");
+        const labelText = this.getAttribute("label") ?? "";
+        if (labelText.length === 0)
+            this.warnIfUnnamed(field);
+        else
+            field.removeAttribute("aria-label");
+    }
+    warnIfUnnamed(field) {
+        const aria = this.getAttribute("aria-label") ?? this.getAttribute("aria-labelledby");
+        if (aria) {
+            field.setAttribute(this.hasAttribute("aria-label") ? "aria-label" : "aria-labelledby", aria);
+            return;
+        }
+        console.warn("xtyle-textarea: a textarea with no `label` has no accessible name. Provide a `label` or `aria-label` so it is announced.");
+    }
+    applyIntent(intent, _event) {
+        if (typeof intent.value === "string") {
+            this.internals.setFormValue(intent.value);
+            if (intent.commitValue)
+                this.setAttribute("value", intent.value);
+        }
+        if (intent.emit)
+            this.dispatchEvent(new Event(intent.emit.type, { bubbles: true, composed: true }));
+    }
+    projectContent() {
+        if (this.getAttribute("value") !== null)
+            return;
+        const text = this.textContent?.trim() ?? "";
+        if (text.length > 0 && this.field)
+            this.field.value = text;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(textareaHostCss);
+        this.fragment.update(this.bindings);
+        this.projectContent();
+        this.syncField();
+    }
+}
+define("xtyle-textarea", XtyleTextarea);
+//# sourceMappingURL=textarea.js.map

package/dist/elements/textarea.js.map

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

package/dist/elements/toast.d.ts

@@ -0,0 +1,78 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type ToastSeverity, type ToastTone, type ToastVariant } from "../markup/index.js";
+/** Options accepted by {@link XtyleToastRegion.toast}. */
+export interface ToastOptions {
+    /** The message body. Required — it carries the accessible announcement. */
+    message: string;
+    /** Color — any semantic role, accent variant, or named hue. Defaults to the severity color. */
+    tone?: ToastTone;
+    /** Meaning — drives the glyph + politeness, independent of color. Omit for a color-only toast. */
+    severity?: ToastSeverity;
+    /** Visual treatment. Defaults to `soft`. */
+    variant?: ToastVariant;
+    /** Auto-dismiss delay in milliseconds. `0` disables auto-dismiss. Defaults to `5000`. */
+    duration?: number;
+    /** Optional action button label. */
+    actionLabel?: string;
+    /** Invoked when the action button is pressed; the toast dismisses afterward. */
+    onAction?: () => void;
+    /** Whether to render a close button. Defaults to `true`. */
+    closable?: boolean;
+    /** Accessible label for the close button. Defaults to `Dismiss`. */
+    closeLabel?: string;
+}
+/**
+ * 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 declare class XtyleToast extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private fragment;
+    static get observedAttributes(): string[];
+    get tone(): ToastTone | null;
+    set tone(value: ToastTone | null | undefined);
+    get severity(): ToastSeverity | null;
+    set severity(value: ToastSeverity | null | undefined);
+    get variant(): ToastVariant;
+    set variant(value: ToastVariant);
+    get closable(): boolean;
+    set closable(value: boolean);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** 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. */
+    private shapeSignature;
+    private dismiss;
+    private applyIntent;
+    protected template(): string;
+    protected render(): void;
+}
+/**
+ * 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 declare class XtyleToastRegion extends XtyleElement {
+    static get observedAttributes(): string[];
+    private timers;
+    get placement(): string;
+    set placement(value: string);
+    get max(): number;
+    attributeChangedCallback(): void;
+    /**
+     * 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: ToastOptions): HTMLElement;
+    private get regionEl();
+    private arm;
+    private clear;
+    private dismiss;
+    private enforceMax;
+    protected styles(): string;
+    private get markupProps();
+    protected template(): string;
+}
+//# sourceMappingURL=toast.d.ts.map