@xtyle/core 0.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/elements/carousel.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC7C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,UAAU,CAAgC;IAClD,OAAO,CAAC,QAAQ,CAAqC;IACrD,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,WAAW,CAAK;IAGxB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,EAAE,CAA4F;IACtG,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAqB;IACnC,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,OAAO,CAAkC;IACjD,OAAO,CAAC,OAAO,CAAkC;IAEjD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAEzB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,iBAAiB,IAAI,IAAI;IAIzB,oBAAoB,IAAI,IAAI;IAI5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAS5C,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,OAAO;IAuCf,OAAO,CAAC,aAAa;IAiCrB,OAAO,CAAC,aAAa;IASrB,OAAO,CAAC,IAAI;IAiCZ,OAAO,CAAC,aAAa;IAuBrB,OAAO,CAAC,EAAE;IAeV,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,QAAQ;CAShB"}

package/dist/elements/carousel.js

@@ -0,0 +1,265 @@
+import { define } from "./base.js";
+import { renderIcon } from "../icons.js";
+const DEFAULT_INTERVAL = 5000;
+const SETTLE_MS = 600;
+/**
+ * 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 class XtyleCarousel extends HTMLElement {
+    static get observedAttributes() {
+        return ["label", "autoplay", "interval", "loop"];
+    }
+    controller = null;
+    observer = null;
+    autoplayTimer = 0;
+    settleTimer = 0;
+    // Suppresses the observer's index writes while a programmatic scroll is in flight, so a
+    // fast click-through doesn't flutter the active dot as the smooth scroll passes intermediate slides.
+    programmatic = false;
+    mq = typeof matchMedia === "function" ? matchMedia("(prefers-reduced-motion: reduce)") : null;
+    index = 0;
+    slides = [];
+    track = null;
+    dotEls = [];
+    prevBtn = null;
+    nextBtn = null;
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get autoplay() {
+        return this.hasAttribute("autoplay");
+    }
+    set autoplay(value) {
+        this.toggleAttribute("autoplay", value);
+    }
+    get interval() {
+        const raw = Number(this.getAttribute("interval"));
+        return Number.isFinite(raw) && raw > 0 ? raw : DEFAULT_INTERVAL;
+    }
+    set interval(value) {
+        this.setAttribute("interval", String(value));
+    }
+    get loop() {
+        return this.hasAttribute("loop");
+    }
+    set loop(value) {
+        this.toggleAttribute("loop", value);
+    }
+    get controls() {
+        return this.getAttribute("controls") !== "false";
+    }
+    get dots() {
+        return this.getAttribute("dots") !== "false";
+    }
+    connectedCallback() {
+        if (!this.querySelector(":scope > .xtyle-carousel__viewport"))
+            this.enhance();
+    }
+    disconnectedCallback() {
+        this.teardown();
+    }
+    attributeChangedCallback(name) {
+        if (name === "label") {
+            this.setAttribute("aria-label", this.label || "Carousel");
+            this.track?.setAttribute("aria-label", this.label || "Carousel");
+        }
+        else if (this.hasAttribute("data-enhanced")) {
+            this.syncAutoplay();
+        }
+    }
+    get reducedMotion() {
+        return this.mq?.matches ?? false;
+    }
+    enhance() {
+        const slides = Array.from(this.children).filter((n) => n instanceof HTMLElement);
+        if (slides.length === 0)
+            return;
+        this.slides = slides;
+        const viewport = document.createElement("div");
+        viewport.className = "xtyle-carousel__viewport";
+        const track = document.createElement("div");
+        track.className = "xtyle-carousel__track";
+        track.tabIndex = 0;
+        track.setAttribute("role", "group");
+        track.setAttribute("aria-roledescription", "carousel");
+        track.setAttribute("aria-label", this.label || "Carousel");
+        for (const slide of slides)
+            track.appendChild(slide);
+        viewport.appendChild(track);
+        this.track = track;
+        for (const [i, slide] of slides.entries()) {
+            slide.classList.add("xtyle-carousel__slide");
+            slide.setAttribute("role", "group");
+            slide.setAttribute("aria-roledescription", "slide");
+            slide.setAttribute("aria-label", `${i + 1} of ${slides.length}`);
+        }
+        this.setAttribute("role", "region");
+        this.setAttribute("aria-roledescription", "carousel");
+        this.setAttribute("aria-label", this.label || "Carousel");
+        this.append(viewport);
+        if (this.controls || this.dots)
+            this.append(this.buildControls());
+        this.controller = new AbortController();
+        this.wire(this.controller.signal);
+        this.observeSlides();
+        this.setAttribute("data-enhanced", "");
+        this.update();
+        this.syncAutoplay();
+    }
+    buildControls() {
+        const bar = document.createElement("div");
+        bar.className = "xtyle-carousel__controls";
+        if (this.controls) {
+            this.prevBtn = this.controlButton("prev", "Previous slide", "chevron-left");
+            bar.appendChild(this.prevBtn);
+        }
+        if (this.dots) {
+            const dots = document.createElement("div");
+            dots.className = "xtyle-carousel__dots";
+            dots.setAttribute("role", "tablist");
+            dots.setAttribute("aria-label", "Choose slide");
+            this.dotEls = this.slides.map((_, i) => {
+                const dot = document.createElement("button");
+                dot.type = "button";
+                dot.className = "xtyle-carousel__dot";
+                dot.setAttribute("role", "tab");
+                dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
+                dots.appendChild(dot);
+                return dot;
+            });
+            bar.appendChild(dots);
+        }
+        if (this.controls) {
+            this.nextBtn = this.controlButton("next", "Next slide", "chevron-right");
+            bar.appendChild(this.nextBtn);
+        }
+        return bar;
+    }
+    controlButton(kind, label, icon) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = `xtyle-carousel__nav xtyle-carousel__nav--${kind}`;
+        button.setAttribute("aria-label", label);
+        button.innerHTML = renderIcon(icon);
+        return button;
+    }
+    wire(signal) {
+        this.prevBtn?.addEventListener("click", () => this.go(this.index - 1), { signal });
+        this.nextBtn?.addEventListener("click", () => this.go(this.index + 1), { signal });
+        for (const [i, dot] of this.dotEls.entries()) {
+            dot.addEventListener("click", () => this.go(i), { signal });
+        }
+        this.addEventListener("keydown", (event) => {
+            if (event.key === "ArrowLeft") {
+                event.preventDefault();
+                this.go(this.index - 1);
+            }
+            else if (event.key === "ArrowRight") {
+                event.preventDefault();
+                this.go(this.index + 1);
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                this.go(0);
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                this.go(this.slides.length - 1);
+            }
+        }, { signal });
+        this.addEventListener("pointerenter", () => this.stopAutoplay(), { signal });
+        this.addEventListener("focusin", () => this.stopAutoplay(), { signal });
+        this.addEventListener("pointerleave", () => this.resumeAutoplay(), { signal });
+        this.addEventListener("focusout", () => this.resumeAutoplay(), { signal });
+    }
+    observeSlides() {
+        if (typeof IntersectionObserver === "undefined" || !this.track)
+            return;
+        this.observer = new IntersectionObserver((entries) => {
+            if (this.programmatic)
+                return;
+            let best = null;
+            for (const entry of entries) {
+                const i = this.slides.indexOf(entry.target);
+                if (i < 0)
+                    continue;
+                if (entry.isIntersecting && (!best || entry.intersectionRatio > best.ratio)) {
+                    best = { i, ratio: entry.intersectionRatio };
+                }
+            }
+            if (best && best.i !== this.index) {
+                this.index = best.i;
+                this.update();
+            }
+        }, { root: this.track, threshold: [0.5, 0.75, 1] });
+        for (const slide of this.slides)
+            this.observer.observe(slide);
+    }
+    go(target) {
+        const n = this.slides.length;
+        const i = this.loop ? (target + n) % n : Math.max(0, Math.min(n - 1, target));
+        const slide = this.slides[i];
+        if (!slide || !this.track)
+            return;
+        this.programmatic = true;
+        this.track.scrollTo({ left: slide.offsetLeft, behavior: this.reducedMotion ? "auto" : "smooth" });
+        this.index = i;
+        this.update();
+        window.clearTimeout(this.settleTimer);
+        this.settleTimer = window.setTimeout(() => {
+            this.programmatic = false;
+        }, SETTLE_MS);
+    }
+    update() {
+        for (const [i, dot] of this.dotEls.entries()) {
+            const active = i === this.index;
+            dot.setAttribute("aria-selected", active ? "true" : "false");
+            dot.classList.toggle("is-active", active);
+        }
+        if (!this.loop) {
+            if (this.prevBtn)
+                this.prevBtn.disabled = this.index === 0;
+            if (this.nextBtn)
+                this.nextBtn.disabled = this.index === this.slides.length - 1;
+        }
+    }
+    syncAutoplay() {
+        if (this.autoplay && !this.reducedMotion)
+            this.startAutoplay();
+        else
+            this.stopAutoplay();
+    }
+    startAutoplay() {
+        this.stopAutoplay();
+        this.autoplayTimer = window.setInterval(() => this.go(this.index + 1), this.interval);
+    }
+    stopAutoplay() {
+        if (this.autoplayTimer) {
+            window.clearInterval(this.autoplayTimer);
+            this.autoplayTimer = 0;
+        }
+    }
+    resumeAutoplay() {
+        if (this.autoplay && !this.reducedMotion && !this.autoplayTimer)
+            this.startAutoplay();
+    }
+    teardown() {
+        this.controller?.abort();
+        this.controller = null;
+        this.observer?.disconnect();
+        this.observer = null;
+        this.stopAutoplay();
+        window.clearTimeout(this.settleTimer);
+        this.settleTimer = 0;
+    }
+}
+define("xtyle-carousel", XtyleCarousel);
+//# sourceMappingURL=carousel.js.map

package/dist/elements/carousel.js.map

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

package/dist/elements/checkbox.d.ts

@@ -0,0 +1,81 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { Size, FullTone } from "../index.js";
+export declare class XtyleCheckbox extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    static formAssociated: boolean;
+    private internals;
+    private indeterminateValue;
+    private fragment;
+    constructor();
+    static get observedAttributes(): string[];
+    get checked(): boolean;
+    set checked(value: boolean);
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get size(): Size;
+    set size(value: Size);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get value(): string;
+    set value(value: string | null | undefined);
+    private get control();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private onHostClick;
+    attributeChangedCallback(name: string): void;
+    private get bindings();
+    /** Structural state ops can't patch incrementally: the aria naming and the `disabled` boolean attr,
+     * which can't be removed via `setAttr`. A change here rebuilds; `checked` and `indeterminate` are
+     * cheap DOM-property patches the host applies post-update, so toggling never rebuilds and never
+     * loses focus on the live input. */
+    private shapeSignature;
+    private syncForm;
+    /** Name the shadow `<input>` from the visible slotted text when present — the light-DOM
+     * label sibling can't be referenced across the shadow boundary, so its text is mirrored
+     * onto the control. An explicit `labelledby` (consumer-owned) or `label`-only case is left
+     * to the SSR markup. */
+    private nameControl;
+    private warnIfUnnamed;
+    private applyIntent;
+    protected template(): string;
+    protected render(): void;
+}
+/**
+ * A group of checkboxes with a tri-state "select all" heading the group owns: when every item
+ * is checked the heading is checked, some checked shows indeterminate, none clears it; toggling
+ * the heading applies to every (enabled) item. This roll-up is the default — set `manual` to keep
+ * the heading but drive its state yourself.
+ */
+export declare class XtyleCheckboxGroup extends XtyleElement {
+    private labelId;
+    static get observedAttributes(): string[];
+    get label(): string | null;
+    set label(value: string | null | undefined);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get size(): Size;
+    set size(value: Size);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Stop the automatic all/some/none roll-up; the heading stays but its state is yours to drive. */
+    get manual(): boolean;
+    set manual(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private items;
+    private get headingInput();
+    private get headingLabel();
+    /** Recompute the heading from the items: all checked → checked, some → indeterminate, none → off. */
+    sync(): void;
+    private onItemChange;
+    private onHeadingToggle;
+    private warnIfUnnamed;
+    private get markupProps();
+    protected styles(): string;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=checkbox.d.ts.map

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

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

package/dist/elements/checkbox.js

@@ -0,0 +1,293 @@
+import { XtyleElement, define } from "./base.js";
+import { checkboxHostCss, checkboxGroupHostCss, checkboxGroupMarkup, } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/checkbox/source.generated.js";
+export class XtyleCheckbox extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    static formAssociated = true;
+    internals;
+    indeterminateValue = false;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "checkbox", {
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+    });
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+    }
+    static get observedAttributes() {
+        return ["checked", "indeterminate", "disabled", "size", "tone", "name", "value", "label", "labelledby"];
+    }
+    get checked() {
+        return this.hasAttribute("checked");
+    }
+    set checked(value) {
+        this.reflectBoolean("checked", value);
+    }
+    get indeterminate() {
+        return this.indeterminateValue;
+    }
+    set indeterminate(value) {
+        this.indeterminateValue = value;
+        this.reflectBoolean("indeterminate", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.reflectBoolean("disabled", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "accent";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get value() {
+        return this.getAttribute("value") ?? "on";
+    }
+    set value(value) {
+        this.reflectString("value", value);
+    }
+    get control() {
+        return this.root.querySelector("input");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("click", this.onHostClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("click", this.onHostClick);
+    }
+    onHostClick = (event) => {
+        if (this.disabled)
+            return;
+        this.forwardSlottedLabelClick(event, this.control);
+    };
+    attributeChangedCallback(name) {
+        if (name === "indeterminate")
+            this.indeterminateValue = this.hasAttribute("indeterminate");
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            checked: this.checked,
+            indeterminate: this.indeterminate,
+            disabled: this.disabled,
+            size: this.size,
+            tone: this.tone,
+            label: this.getAttribute("label"),
+            labelledby: this.getAttribute("labelledby"),
+        };
+    }
+    /** Structural state ops can't patch incrementally: the aria naming and the `disabled` boolean attr,
+     * which can't be removed via `setAttr`. A change here rebuilds; `checked` and `indeterminate` are
+     * cheap DOM-property patches the host applies post-update, so toggling never rebuilds and never
+     * loses focus on the live input. */
+    shapeSignature() {
+        return `${this.disabled}|${this.getAttribute("label")}|${this.getAttribute("labelledby")}`;
+    }
+    syncForm() {
+        this.internals.setFormValue(this.checked ? this.value : null);
+    }
+    /** Name the shadow `<input>` from the visible slotted text when present — the light-DOM
+     * label sibling can't be referenced across the shadow boundary, so its text is mirrored
+     * onto the control. An explicit `labelledby` (consumer-owned) or `label`-only case is left
+     * to the SSR markup. */
+    nameControl(control) {
+        if (this.getAttribute("labelledby"))
+            return;
+        const slotText = this.textContent?.trim() ?? "";
+        if (slotText)
+            control.setAttribute("aria-label", slotText);
+    }
+    warnIfUnnamed() {
+        const hasLabel = this.getAttribute("label") || this.getAttribute("labelledby") || this.textContent?.trim();
+        if (!hasLabel) {
+            console.warn("xtyle-checkbox: no accessible name. Provide label text in the default slot, or a `label` / `labelledby` attribute.");
+        }
+    }
+    applyIntent(intent, _event) {
+        if (intent.setChecked === undefined)
+            return;
+        this.indeterminate = false;
+        this.checked = intent.setChecked;
+        this.syncForm();
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(checkboxHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        const control = this.control;
+        if (control) {
+            control.checked = this.checked;
+            control.indeterminate = this.indeterminate;
+            this.nameControl(control);
+        }
+        this.warnIfUnnamed();
+        this.syncForm();
+    }
+}
+define("xtyle-checkbox", XtyleCheckbox);
+/**
+ * A group of checkboxes with a tri-state "select all" heading the group owns: when every item
+ * is checked the heading is checked, some checked shows indeterminate, none clears it; toggling
+ * the heading applies to every (enabled) item. This roll-up is the default — set `manual` to keep
+ * the heading but drive its state yourself.
+ */
+export class XtyleCheckboxGroup extends XtyleElement {
+    labelId = `xtyle-checkbox-group-${Math.random().toString(36).slice(2, 8)}-label`;
+    static get observedAttributes() {
+        return ["label", "labelledby", "tone", "size", "disabled", "manual"];
+    }
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        this.reflectString("label", 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 disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.reflectBoolean("disabled", value);
+    }
+    /** Stop the automatic all/some/none roll-up; the heading stays but its state is yours to drive. */
+    get manual() {
+        return this.hasAttribute("manual");
+    }
+    set manual(value) {
+        this.reflectBoolean("manual", value);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("change", this.onItemChange);
+        // Slotted items can arrive after connect (client frameworks), so derive once a microtask later.
+        queueMicrotask(() => {
+            if (!this.manual)
+                this.sync();
+        });
+    }
+    disconnectedCallback() {
+        this.removeEventListener("change", this.onItemChange);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    items() {
+        return Array.from(this.querySelectorAll("xtyle-checkbox"));
+    }
+    get headingInput() {
+        return this.root.querySelector(".xtyle-checkbox-group__heading input");
+    }
+    get headingLabel() {
+        return this.root.querySelector(".xtyle-checkbox-group__heading");
+    }
+    /** Recompute the heading from the items: all checked → checked, some → indeterminate, none → off. */
+    sync() {
+        const input = this.headingInput;
+        const heading = this.headingLabel;
+        if (!input || !heading)
+            return;
+        const items = this.items();
+        const checked = items.filter((item) => item.checked).length;
+        const all = items.length > 0 && checked === items.length;
+        const some = checked > 0 && checked < items.length;
+        input.checked = all;
+        input.indeterminate = some;
+        heading.classList.toggle("xtyle-checkbox--indeterminate", some);
+    }
+    onItemChange = (event) => {
+        // The heading is a native input in the shadow; its change isn't composed and never reaches
+        // here. Only composed item changes (from `xtyle-checkbox`) do, so this only ever rolls up.
+        if (this.manual)
+            return;
+        if (!event.target?.closest("xtyle-checkbox"))
+            return;
+        this.sync();
+    };
+    onHeadingToggle = () => {
+        const input = this.headingInput;
+        if (!input)
+            return;
+        if (!this.manual) {
+            const next = input.checked;
+            for (const item of this.items()) {
+                if (item.disabled)
+                    continue;
+                item.indeterminate = false;
+                item.checked = next;
+            }
+            input.indeterminate = false;
+            this.headingLabel?.classList.remove("xtyle-checkbox--indeterminate");
+        }
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    };
+    warnIfUnnamed() {
+        if (!this.label && !this.getAttribute("labelledby") && !this.getAttribute("aria-label")) {
+            console.warn("xtyle-checkbox-group: no accessible name. Provide a `label`, `labelledby`, or `aria-label` so the group is announced.");
+        }
+    }
+    get markupProps() {
+        return {
+            label: this.label,
+            labelledby: this.getAttribute("labelledby"),
+            tone: this.tone,
+            size: this.size,
+            disabled: this.disabled,
+            labelId: this.labelId,
+        };
+    }
+    styles() {
+        return checkboxGroupHostCss;
+    }
+    template() {
+        return checkboxGroupMarkup(this.markupProps);
+    }
+    render() {
+        super.render();
+        const input = this.headingInput;
+        if (input) {
+            input.disabled = this.disabled;
+            // `render()` rebuilds the shadow, so the input is a fresh node each call — wire it anew.
+            input.addEventListener("change", this.onHeadingToggle);
+        }
+        this.root
+            .querySelector("slot")
+            ?.addEventListener("slotchange", () => {
+            if (!this.manual)
+                this.sync();
+        });
+        if (!this.manual)
+            this.sync();
+        this.warnIfUnnamed();
+    }
+}
+define("xtyle-checkbox-group", XtyleCheckboxGroup);
+//# sourceMappingURL=checkbox.js.map