@xtyle/core 0.5.0

package/dist/elements/breadcrumb.d.ts

@@ -0,0 +1,24 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type BreadcrumbItem } from "../markup/index.js";
+import type { Size, FullTone } from "../index.js";
+export declare class XtyleBreadcrumb extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private fragment;
+    private applyIntent;
+    static get observedAttributes(): string[];
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get size(): Size;
+    set size(value: Size);
+    get separator(): string;
+    set separator(value: string | null | undefined);
+    get label(): string;
+    set label(value: string | null | undefined);
+    get items(): BreadcrumbItem[];
+    attributeChangedCallback(): void;
+    private get bindings();
+    private shapeSignature;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../src/elements/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,EAAqB,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIlD,qBAAa,eAAgB,SAAQ,YAAY;IAChD,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAEb;IAEH,OAAO,CAAC,WAAW;IAYnB,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;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,SAAS,IAAI,MAAM,CAEtB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAE7C;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,KAAK,IAAI,cAAc,EAAE,CAU5B;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,CAAC,cAAc;IAItB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAMjC"}

package/dist/elements/breadcrumb.js

@@ -0,0 +1,89 @@
+import { XtyleElement, define } from "./base.js";
+import { breadcrumbHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/breadcrumb/source.generated.js";
+export class XtyleBreadcrumb extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "breadcrumb", {
+        applyIntent: (intent) => this.applyIntent(intent),
+    });
+    applyIntent(intent) {
+        if (intent.select === undefined)
+            return;
+        const index = this.items.findIndex((item) => item.value === intent.select);
+        this.dispatchEvent(new CustomEvent("select", {
+            detail: { value: intent.select, index },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    static get observedAttributes() {
+        return ["items", "separator", "tone", "size", "label"];
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "accent";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get separator() {
+        return this.getAttribute("separator") ?? "/";
+    }
+    set separator(value) {
+        this.reflectString("separator", value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Breadcrumb";
+    }
+    set label(value) {
+        this.reflectString("label", 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-breadcrumb: `items` is not valid JSON; rendering the default slot instead.");
+            return [];
+        }
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            items: this.items,
+            separator: this.separator,
+            tone: this.tone,
+            size: this.size,
+            label: this.label,
+        };
+    }
+    shapeSignature() {
+        return JSON.stringify({ items: this.items, separator: this.separator });
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(breadcrumbHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-breadcrumb", XtyleBreadcrumb);
+//# sourceMappingURL=breadcrumb.js.map

package/dist/elements/breadcrumb.js.map

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

package/dist/elements/button.d.ts

@@ -0,0 +1,42 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { ButtonVariant, ButtonAlign, Size, FullTone } from "../index.js";
+type ButtonSize = Size | "xs";
+export declare class XtyleButton extends XtyleElement {
+    private fragment;
+    private ariaLabelValue;
+    private ariaLabelledbyValue;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get variant(): ButtonVariant;
+    set variant(value: ButtonVariant);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get size(): ButtonSize;
+    set size(value: ButtonSize);
+    get align(): ButtonAlign;
+    set align(value: ButtonAlign);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get loading(): boolean;
+    set loading(value: boolean);
+    get block(): boolean;
+    set block(value: boolean);
+    get iconOnly(): boolean;
+    set iconOnly(value: boolean);
+    get pressed(): boolean | null;
+    set pressed(value: boolean | null);
+    get selected(): boolean | null;
+    set selected(value: boolean | null);
+    get href(): string | null;
+    attributeChangedCallback(name?: string): void;
+    private get bindings();
+    /** A signature of the state ops can't express incrementally — the tag (`href`) and the
+     * blocked state (`disabled` / `loading`, which add a boolean attr a `setAttr` can't remove).
+     * When it changes, the structure is rebuilt rather than patched. */
+    private shapeSignature;
+    private warnIfUnnamed;
+    protected template(): string;
+    protected render(): void;
+}
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/elements/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAK9E,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9B,qBAAa,WAAY,SAAQ,YAAY;IAC5C,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,mBAAmB,CAAuB;IAElD,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,OAAO,IAAI,aAAa,CAE3B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,EAE/B;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,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,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,OAAO,IAAI,OAAO,GAAG,IAAI,CAI5B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAGhC;IAED,IAAI,QAAQ,IAAI,OAAO,GAAG,IAAI,CAI7B;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,EAGjC;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IAED,wBAAwB,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI;IAe7C,OAAO,KAAK,QAAQ,GAiBnB;IAED;;wEAEoE;IACpE,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,aAAa;IAiBrB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}

package/dist/elements/button.js

@@ -0,0 +1,158 @@
+import { XtyleElement, define } from "./base.js";
+import { buttonHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/button/source.generated.js";
+export class XtyleButton extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "button", {
+        applyIntent: () => { },
+    });
+    ariaLabelValue = null;
+    ariaLabelledbyValue = null;
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["variant", "tone", "size", "align", "type", "href", "disabled", "loading", "block", "icon-only", "pressed", "selected", "aria-label", "aria-labelledby"];
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "solid";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "accent";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get align() {
+        return this.getAttribute("align") ?? "center";
+    }
+    set align(value) {
+        this.setAttribute("align", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.reflectBoolean("disabled", value);
+    }
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.reflectBoolean("loading", value);
+    }
+    get block() {
+        return this.hasAttribute("block");
+    }
+    set block(value) {
+        this.reflectBoolean("block", value);
+    }
+    get iconOnly() {
+        return this.hasAttribute("icon-only");
+    }
+    set iconOnly(value) {
+        this.reflectBoolean("icon-only", value);
+    }
+    get pressed() {
+        const value = this.getAttribute("pressed");
+        if (value === null)
+            return null;
+        return value !== "false";
+    }
+    set pressed(value) {
+        if (value === null)
+            this.removeAttribute("pressed");
+        else
+            this.setAttribute("pressed", String(value));
+    }
+    get selected() {
+        const value = this.getAttribute("selected");
+        if (value === null)
+            return null;
+        return value !== "false";
+    }
+    set selected(value) {
+        if (value === null)
+            this.removeAttribute("selected");
+        else
+            this.setAttribute("selected", String(value));
+    }
+    get href() {
+        return this.getAttribute("href");
+    }
+    attributeChangedCallback(name) {
+        // `aria-label`/`aria-labelledby` are prohibited on the roleless host and never reach the
+        // inner control, so capture them off the host and forward them onto the `<button>`/`<a>`.
+        if (name === "aria-label" || name === "aria-labelledby") {
+            const value = this.getAttribute(name);
+            if (value !== null) {
+                if (name === "aria-label")
+                    this.ariaLabelValue = value;
+                else
+                    this.ariaLabelledbyValue = value;
+                this.removeAttribute(name);
+                return;
+            }
+        }
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            variant: this.variant,
+            tone: this.tone,
+            size: this.size,
+            align: this.align,
+            type: this.getAttribute("type") ?? "button",
+            href: this.href,
+            disabled: this.disabled,
+            loading: this.loading,
+            block: this.block,
+            iconOnly: this.iconOnly,
+            pressed: this.pressed,
+            selected: this.selected,
+            ariaLabel: this.ariaLabelValue,
+            ariaLabelledby: this.ariaLabelledbyValue,
+        };
+    }
+    /** A signature of the state ops can't express incrementally — the tag (`href`) and the
+     * blocked state (`disabled` / `loading`, which add a boolean attr a `setAttr` can't remove).
+     * When it changes, the structure is rebuilt rather than patched. */
+    shapeSignature() {
+        return `${this.href != null}|${this.disabled || this.loading}`;
+    }
+    warnIfUnnamed() {
+        // The name may still be on the host as an unprocessed attribute: on upgrade the attributes
+        // fire in DOM order, so a render (and this check) can run before `aria-label` (spread last by
+        // the bindings) has been captured onto `ariaLabelValue` and stripped. Honor the live attribute
+        // too, or a correctly-labelled icon-only button warns spuriously mid-upgrade.
+        const named = this.ariaLabelValue ||
+            this.ariaLabelledbyValue ||
+            this.getAttribute("aria-label") ||
+            this.getAttribute("aria-labelledby");
+        if (this.iconOnly && !named) {
+            console.warn("xtyle-button: an icon-only button has no accessible name. Provide an `aria-label` so it is announced.");
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(buttonHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+    }
+}
+define("xtyle-button", XtyleButton);
+//# sourceMappingURL=button.js.map

package/dist/elements/button.js.map

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

package/dist/elements/card-link.d.ts

@@ -0,0 +1,23 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+export declare class XtyleCardLink extends XtyleElement {
+    private fragment;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get href(): string | null;
+    set href(value: string | null | undefined);
+    get interactive(): boolean;
+    set interactive(value: boolean);
+    get overlay(): boolean;
+    set overlay(value: boolean);
+    get compact(): boolean;
+    set compact(value: boolean);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** A signature of the state ops can't express incrementally — the optional `target` / `rel`
+     * attributes, which a `setAttr` can add but never remove. When either value changes — added,
+     * removed, or swapped for a different value — the anchor is rebuilt rather than patched. */
+    private shapeSignature;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=card-link.d.ts.map

package/dist/elements/card-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-link.d.ts","sourceRoot":"","sources":["../../src/elements/card-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAKjE,qBAAa,aAAc,SAAQ,YAAY;IAC9C,OAAO,CAAC,QAAQ,CAEb;IAEH,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAExC;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,EAE7B;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,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GASnB;IAED;;gGAE4F;IAC5F,OAAO,CAAC,cAAc;IAItB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAMjC"}

package/dist/elements/card-link.js

@@ -0,0 +1,70 @@
+import { XtyleElement, define } from "./base.js";
+import { cardLinkHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/card-link/source.generated.js";
+export class XtyleCardLink extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "card-link", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["href", "target", "rel", "interactive", "overlay", "compact"];
+    }
+    get href() {
+        return this.getAttribute("href");
+    }
+    set href(value) {
+        this.reflectString("href", value);
+    }
+    get interactive() {
+        return !this.hasAttribute("interactive") || this.getAttribute("interactive") !== "false";
+    }
+    set interactive(value) {
+        this.setAttribute("interactive", value ? "true" : "false");
+    }
+    get overlay() {
+        return this.hasAttribute("overlay");
+    }
+    set overlay(value) {
+        this.reflectBoolean("overlay", value);
+    }
+    get compact() {
+        return this.hasAttribute("compact");
+    }
+    set compact(value) {
+        this.reflectBoolean("compact", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            href: this.href,
+            target: this.getAttribute("target"),
+            rel: this.getAttribute("rel"),
+            interactive: this.interactive,
+            overlay: this.overlay,
+            compact: this.compact,
+        };
+    }
+    /** A signature of the state ops can't express incrementally — the optional `target` / `rel`
+     * attributes, which a `setAttr` can add but never remove. When either value changes — added,
+     * removed, or swapped for a different value — the anchor is rebuilt rather than patched. */
+    shapeSignature() {
+        return `${this.getAttribute("target")}|${this.getAttribute("rel")}`;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(cardLinkHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-card-link", XtyleCardLink);
+//# sourceMappingURL=card-link.js.map

package/dist/elements/card-link.js.map

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

package/dist/elements/card.d.ts

@@ -0,0 +1,34 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+export declare class XtyleCard extends XtyleElement {
+    private fragment;
+    private wiredCard;
+    private spaceHeld;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get tone(): string | null;
+    set tone(value: string | null | undefined);
+    get overlay(): boolean;
+    set overlay(value: boolean);
+    get interactive(): boolean;
+    set interactive(value: boolean);
+    get action(): boolean;
+    set action(value: boolean);
+    get compact(): boolean;
+    set compact(value: boolean);
+    attributeChangedCallback(): void;
+    private get bindings();
+    private get cardEl();
+    /** An `action` card is itself the button: it carries no inner control, so it takes `role="button"`,
+     * a tab stop, and keyboard activation. Keep it off the shadow part otherwise, so an `interactive`
+     * card that wraps its own `<a>`/`<button>` stays a plain container and the inner control is the
+     * one tab stop. */
+    private syncButtonRole;
+    /** Translate Enter/Space into the same click path a pointer takes, so a consumer's `onclick` on the
+     * host fires from the keyboard. Enter activates on press; Space activates on release (and suppresses
+     * its default page scroll on press), mirroring a native `<button>`. */
+    private onKeydown;
+    private onKeyup;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/elements/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAKjE,qBAAa,SAAU,SAAQ,YAAY;IAC1C,OAAO,CAAC,QAAQ,CAEb;IAEH,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,SAAS,CAAS;IAE1B,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAExC;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,EAE7B;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAQnB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED;;;uBAGmB;IACnB,OAAO,CAAC,cAAc;IAiBtB;;2EAEuE;IACvE,OAAO,CAAC,SAAS,CASf;IAEF,OAAO,CAAC,OAAO,CAIb;IAEF,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAMjC"}

package/dist/elements/card.js

@@ -0,0 +1,119 @@
+import { XtyleElement, define } from "./base.js";
+import { cardHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/card/source.generated.js";
+export class XtyleCard extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "card", {
+        applyIntent: () => { },
+    });
+    wiredCard = null;
+    spaceHeld = false;
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["overlay", "interactive", "action", "compact", "tone"];
+    }
+    get tone() {
+        return this.getAttribute("tone");
+    }
+    set tone(value) {
+        this.reflectString("tone", value);
+    }
+    get overlay() {
+        return this.hasAttribute("overlay");
+    }
+    set overlay(value) {
+        this.reflectBoolean("overlay", value);
+    }
+    get interactive() {
+        return this.hasAttribute("interactive");
+    }
+    set interactive(value) {
+        this.reflectBoolean("interactive", value);
+    }
+    get action() {
+        return this.hasAttribute("action");
+    }
+    set action(value) {
+        this.reflectBoolean("action", value);
+    }
+    get compact() {
+        return this.hasAttribute("compact");
+    }
+    set compact(value) {
+        this.reflectBoolean("compact", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            overlay: this.overlay,
+            interactive: this.interactive,
+            action: this.action,
+            compact: this.compact,
+            tone: this.tone,
+        };
+    }
+    get cardEl() {
+        return this.root.querySelector('[part="card"]');
+    }
+    /** An `action` card is itself the button: it carries no inner control, so it takes `role="button"`,
+     * a tab stop, and keyboard activation. Keep it off the shadow part otherwise, so an `interactive`
+     * card that wraps its own `<a>`/`<button>` stays a plain container and the inner control is the
+     * one tab stop. */
+    syncButtonRole() {
+        const card = this.cardEl;
+        if (!card)
+            return;
+        if (this.action) {
+            card.setAttribute("role", "button");
+            if (!card.hasAttribute("tabindex"))
+                card.setAttribute("tabindex", "0");
+            if (card !== this.wiredCard) {
+                this.wiredCard = card;
+                card.addEventListener("keydown", this.onKeydown);
+                card.addEventListener("keyup", this.onKeyup);
+            }
+        }
+        else {
+            card.removeAttribute("role");
+            card.removeAttribute("tabindex");
+        }
+    }
+    /** Translate Enter/Space into the same click path a pointer takes, so a consumer's `onclick` on the
+     * host fires from the keyboard. Enter activates on press; Space activates on release (and suppresses
+     * its default page scroll on press), mirroring a native `<button>`. */
+    onKeydown = (event) => {
+        if (event.target !== this.cardEl)
+            return;
+        if (event.key === "Enter") {
+            event.preventDefault();
+            this.cardEl?.click();
+        }
+        else if (event.key === " ") {
+            event.preventDefault();
+            this.spaceHeld = true;
+        }
+    };
+    onKeyup = (event) => {
+        if (event.key !== " " || !this.spaceHeld)
+            return;
+        this.spaceHeld = false;
+        if (event.target === this.cardEl)
+            this.cardEl?.click();
+    };
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(cardHostCss);
+        this.fragment.update(this.bindings);
+        this.syncButtonRole();
+    }
+}
+define("xtyle-card", XtyleCard);
+//# sourceMappingURL=card.js.map

package/dist/elements/card.js.map

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

package/dist/elements/carousel.d.ts

@@ -0,0 +1,50 @@
+/**
+ * A scroll-snap carousel of slotted slides. It is a standalone light-DOM element
+ * (like `table`): the slides are the consumer's own children, decorated in place
+ * rather than projected through a shadow slot, so framework content stays live.
+ * The native scroll-snap track works with no JavaScript; the prev/next controls,
+ * the pagination dots, the keyboard nav, and autoplay are enhancements wired only
+ * when the runtime is present.
+ */
+export declare class XtyleCarousel extends HTMLElement {
+    static get observedAttributes(): string[];
+    private controller;
+    private observer;
+    private autoplayTimer;
+    private settleTimer;
+    private programmatic;
+    private mq;
+    private index;
+    private slides;
+    private track;
+    private dotEls;
+    private prevBtn;
+    private nextBtn;
+    get label(): string;
+    set label(value: string);
+    get autoplay(): boolean;
+    set autoplay(value: boolean);
+    get interval(): number;
+    set interval(value: number);
+    get loop(): boolean;
+    set loop(value: boolean);
+    get controls(): boolean;
+    get dots(): boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private get reducedMotion();
+    private enhance;
+    private buildControls;
+    private controlButton;
+    private wire;
+    private observeSlides;
+    private go;
+    private update;
+    private syncAutoplay;
+    private startAutoplay;
+    private stopAutoplay;
+    private resumeAutoplay;
+    private teardown;
+}
+//# sourceMappingURL=carousel.d.ts.map