@xtyle/core 0.5.0

package/dist/elements/swatch.js

@@ -0,0 +1,144 @@
+import { XtyleElement, define } from "./base.js";
+import { placeOverlay } from "./overlay-position.js";
+import { formatColor, parseColor } from "../index.js";
+import { swatchHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/swatch/source.generated.js";
+const DETAIL_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+export class XtyleSwatch extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["color", "label", "value", "size", "interactive", "selected", "details"];
+    }
+    detailsId = `xtyle-swatch-details-${Math.random().toString(36).slice(2, 8)}`;
+    detailsWired = false;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "swatch", {
+        context: (handler) => (handler === "select" ? this.selectContext() : undefined),
+        applyIntent: (intent) => this.applyIntent(intent),
+    });
+    get color() {
+        return this.getAttribute("color");
+    }
+    set color(value) {
+        this.reflectString("color", value);
+    }
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        this.reflectString("label", value);
+    }
+    get value() {
+        return this.getAttribute("value");
+    }
+    set value(value) {
+        this.reflectString("value", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get interactive() {
+        return this.hasAttribute("interactive");
+    }
+    set interactive(value) {
+        this.reflectBoolean("interactive", value);
+    }
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+    set selected(value) {
+        this.reflectBoolean("selected", value);
+    }
+    get details() {
+        return this.hasAttribute("details");
+    }
+    set details(value) {
+        this.reflectBoolean("details", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    showsDetails() {
+        return this.details && parseColor(this.color ?? "") !== null;
+    }
+    /** Flip the details popover below the chip when there's no room above (it defaults above),
+     * and clamp it horizontally so a chip near the right edge doesn't push the panel off-screen.
+     * No arrow to keep aligned, so the cross-axis is a plain inline-`left` offset from `placeOverlay`. */
+    repositionDetails = () => {
+        if (!this.showsDetails())
+            return;
+        const swatch = this.root.querySelector(".xtyle-swatch");
+        const details = this.root.querySelector(".xtyle-swatch__details");
+        if (!swatch || !details)
+            return;
+        const rect = swatch.getBoundingClientRect();
+        const { placement, left } = placeOverlay({
+            anchor: rect,
+            content: { width: details.offsetWidth, height: details.offsetHeight },
+            viewport: { width: window.innerWidth, height: window.innerHeight },
+            preferred: "top",
+            align: "start",
+            gap: 8,
+        });
+        swatch.toggleAttribute("data-details-below", placement === "bottom");
+        details.style.left = `${Math.round(left - rect.left)}px`;
+    };
+    detailRows() {
+        if (!this.details || !this.color)
+            return [];
+        const rgb = parseColor(this.color);
+        if (!rgb)
+            return [];
+        return DETAIL_FORMATS.map((format) => ({ model: format, value: formatColor(rgb, format) }));
+    }
+    get bindings() {
+        return {
+            color: this.color,
+            label: this.label,
+            value: this.value,
+            size: this.size,
+            interactive: this.interactive,
+            selected: this.selected,
+            showsDetails: this.showsDetails(),
+            detailRows: this.detailRows(),
+            detailsId: this.detailsId,
+        };
+    }
+    /** Structural state ops can't patch incrementally: the tag (`interactive` → `<button>` vs `<span>`),
+     * whether the label / value / details spans exist, and the parsed detail rows (built only on mount).
+     * A change here rebuilds; a `selected` toggle or a `color` repaint is a cheap patch. */
+    shapeSignature() {
+        const rows = this.showsDetails() ? this.detailRows().map((row) => row.value).join("|") : "";
+        return `${this.interactive}|${!!this.label}|${!!this.value}|${this.showsDetails()}|${rows}`;
+    }
+    selectContext() {
+        return { color: this.color, label: this.label, value: this.value };
+    }
+    applyIntent(intent) {
+        if (!intent.emit)
+            return;
+        this.dispatchEvent(new CustomEvent(intent.emit.type, { bubbles: true, composed: true, detail: intent.emit.detail }));
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(swatchHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        if (!this.detailsWired) {
+            this.detailsWired = true;
+            this.addEventListener("pointerenter", this.repositionDetails);
+            this.addEventListener("focusin", this.repositionDetails);
+        }
+    }
+}
+define("xtyle-swatch", XtyleSwatch);
+//# sourceMappingURL=swatch.js.map

package/dist/elements/swatch.js.map

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

package/dist/elements/switch.d.ts

@@ -0,0 +1,40 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { Size, FullTone } from "../index.js";
+export declare class XtyleSwitch extends XtyleElement {
+    static formAssociated: boolean;
+    protected get styleMode(): StyleMode;
+    private internals;
+    private elementId;
+    private fragment;
+    static get observedAttributes(): string[];
+    constructor();
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get size(): Size;
+    set size(value: Size);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get shape(): "pill" | "square";
+    set shape(value: "pill" | "square");
+    get orientation(): "horizontal" | "vertical";
+    set orientation(value: "horizontal" | "vertical");
+    get reverse(): boolean;
+    set reverse(value: boolean);
+    get labelSide(): "start" | "end";
+    set labelSide(value: "start" | "end");
+    get value(): string;
+    set value(value: string | null | undefined);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** Structural state ops can't patch incrementally: the `disabled` boolean attr and whether
+     * the label / state spans exist. A change here rebuilds; a `checked` toggle is a cheap patch. */
+    private shapeSignature;
+    private syncForm;
+    private warnIfUnnamed;
+    private applyIntent;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/elements/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKlD,qBAAa,WAAY,SAAQ,YAAY;IAC5C,MAAM,CAAC,cAAc,UAAQ;IAE7B,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,SAAS,CAA4D;IAC7E,OAAO,CAAC,QAAQ,CAEb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;;IASD,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,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,QAAQ,CAE7B;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,EAEjC;IAED,IAAI,WAAW,IAAI,YAAY,GAAG,UAAU,CAE3C;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,YAAY,GAAG,UAAU,EAE/C;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,SAAS,IAAI,OAAO,GAAG,KAAK,CAE/B;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,EAEnC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAgBnB;IAED;qGACiG;IACjG,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,WAAW;IAQnB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAQjC"}

package/dist/elements/switch.js

@@ -0,0 +1,141 @@
+import { XtyleElement, define } from "./base.js";
+import { switchHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/switch/source.generated.js";
+export class XtyleSwitch extends XtyleElement {
+    static formAssociated = true;
+    get styleMode() {
+        return "auto";
+    }
+    internals = null;
+    elementId = `xtyle-switch-${Math.random().toString(36).slice(2, 8)}`;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "switch", {
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+    });
+    static get observedAttributes() {
+        return ["checked", "disabled", "size", "tone", "shape", "orientation", "reverse", "label-side", "label", "labelledby", "on-label", "off-label", "name", "value"];
+    }
+    constructor() {
+        super();
+        if (typeof this.attachInternals === "function") {
+            this.internals = this.attachInternals();
+        }
+    }
+    get checked() {
+        return this.hasAttribute("checked");
+    }
+    set checked(value) {
+        this.reflectBoolean("checked", 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 shape() {
+        return this.getAttribute("shape") === "square" ? "square" : "pill";
+    }
+    set shape(value) {
+        this.setAttribute("shape", value);
+    }
+    get orientation() {
+        return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+    }
+    set orientation(value) {
+        this.setAttribute("orientation", value);
+    }
+    get reverse() {
+        return this.hasAttribute("reverse");
+    }
+    set reverse(value) {
+        this.reflectBoolean("reverse", value);
+    }
+    get labelSide() {
+        return this.getAttribute("label-side") === "end" ? "end" : "start";
+    }
+    set labelSide(value) {
+        this.setAttribute("label-side", value);
+    }
+    get value() {
+        return this.getAttribute("value") ?? "on";
+    }
+    set value(value) {
+        this.reflectString("value", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            checked: this.checked,
+            disabled: this.disabled,
+            size: this.size,
+            tone: this.tone,
+            shape: this.shape,
+            orientation: this.orientation,
+            reverse: this.reverse,
+            labelSide: this.labelSide,
+            label: this.getAttribute("label"),
+            labelledby: this.getAttribute("labelledby"),
+            onLabel: this.getAttribute("on-label"),
+            offLabel: this.getAttribute("off-label"),
+            elementId: this.elementId,
+        };
+    }
+    /** Structural state ops can't patch incrementally: the `disabled` boolean attr and whether
+     * the label / state spans exist. A change here rebuilds; a `checked` toggle is a cheap patch. */
+    shapeSignature() {
+        const hasState = this.getAttribute("on-label") != null || this.getAttribute("off-label") != null;
+        return `${this.disabled}|${this.getAttribute("label") != null}|${hasState}`;
+    }
+    syncForm() {
+        if (!this.internals)
+            return;
+        this.internals.setFormValue(this.checked ? this.value : null);
+    }
+    warnIfUnnamed() {
+        const hasName = this.getAttribute("labelledby") ||
+            this.getAttribute("label") ||
+            this.getAttribute("on-label") ||
+            this.getAttribute("off-label");
+        if (!hasName) {
+            console.warn("xtyle-switch: no accessible name. Provide a `label`, `labelledby`, or `on-label`/`off-label` so the toggle is announced.");
+        }
+    }
+    applyIntent(intent, event) {
+        if (intent.preventDefault)
+            event.preventDefault();
+        if (!intent.toggleChecked)
+            return;
+        this.checked = !this.checked;
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        this.syncForm();
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(switchHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+        this.syncForm();
+    }
+}
+define("xtyle-switch", XtyleSwitch);
+//# sourceMappingURL=switch.js.map

package/dist/elements/switch.js.map

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

package/dist/elements/table.d.ts

@@ -0,0 +1,35 @@
+type TableVariant = "default" | "striped" | "bordered";
+type TableSize = "normal" | "compact";
+export declare class XtyleTable extends HTMLElement {
+    static get observedAttributes(): string[];
+    get variant(): TableVariant;
+    set variant(value: TableVariant);
+    get size(): TableSize;
+    set size(value: TableSize);
+    get hover(): boolean;
+    set hover(value: boolean);
+    get sticky(): boolean;
+    set sticky(value: boolean);
+    private overflowObserver;
+    private contentObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** `decorate()` classes the light-DOM `<table>` once. A reactive framework recreating rows
+     * (a new keyed `{#each}` page, appended columns, live rows) leaves them undecorated, so watch
+     * the subtree and re-decorate when it changes. `decorate()` disconnects this while it runs, so
+     * its own class/attribute writes and the header-wrapper append can't re-trigger the observer. */
+    private observeContent;
+    attributeChangedCallback(): void;
+    /** The wrapper has `overflow: auto`, so it scrolls whenever its table outgrows it — by a
+     * capped height or just by wide content. That can't be known from markup, so detect it live
+     * and make the scroll region keyboard-reachable only when it actually scrolls. */
+    private observeOverflow;
+    private updateScrollAffordance;
+    private reflectBoolean;
+    private get computedTableClass();
+    private decorate;
+    private decorateTable;
+    private decorateHeader;
+}
+export {};
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/elements/table.ts"],"names":[],"mappings":"AAEA,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AACvD,KAAK,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAItC,qBAAa,UAAW,SAAQ,WAAW;IAC1C,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,OAAO,IAAI,YAAY,CAE1B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,YAAY,EAE9B;IAED,IAAI,IAAI,IAAI,SAAS,CAEpB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,EAExB;IAED,IAAI,KAAK,IAAI,OAAO,CAEnB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,OAAO,EAEvB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,OAAO,CAAC,gBAAgB,CAA+B;IACvD,OAAO,CAAC,eAAe,CAAiC;IAExD,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAO5B;;;qGAGiG;IACjG,OAAO,CAAC,cAAc;IAQtB,wBAAwB,IAAI,IAAI;IAIhC;;sFAEkF;IAClF,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,sBAAsB;IAS9B,OAAO,CAAC,cAAc;IAKtB,OAAO,KAAK,kBAAkB,GAQ7B;IAED,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,aAAa;IA6CrB,OAAO,CAAC,cAAc;CActB"}

package/dist/elements/table.js

@@ -0,0 +1,176 @@
+import { define } from "./base.js";
+const SORT_GLYPH = `<span class="xtyle-table__sort" aria-hidden="true"><svg viewBox="0 0 24 24" width="1em" height="1em"><path fill="currentColor" d="M12 8l5 6H7l5-6Z" /></svg></span>`;
+export class XtyleTable extends HTMLElement {
+    static get observedAttributes() {
+        return ["variant", "size", "hover", "sticky", "max-height"];
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "default";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "normal";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get hover() {
+        return this.hasAttribute("hover");
+    }
+    set hover(value) {
+        this.reflectBoolean("hover", value);
+    }
+    get sticky() {
+        return this.hasAttribute("sticky");
+    }
+    set sticky(value) {
+        this.reflectBoolean("sticky", value);
+    }
+    overflowObserver = null;
+    contentObserver = null;
+    connectedCallback() {
+        this.decorate();
+        this.observeOverflow();
+        this.observeContent();
+    }
+    disconnectedCallback() {
+        this.overflowObserver?.disconnect();
+        this.overflowObserver = null;
+        this.contentObserver?.disconnect();
+        this.contentObserver = null;
+    }
+    /** `decorate()` classes the light-DOM `<table>` once. A reactive framework recreating rows
+     * (a new keyed `{#each}` page, appended columns, live rows) leaves them undecorated, so watch
+     * the subtree and re-decorate when it changes. `decorate()` disconnects this while it runs, so
+     * its own class/attribute writes and the header-wrapper append can't re-trigger the observer. */
+    observeContent() {
+        if (typeof MutationObserver === "undefined" || this.contentObserver)
+            return;
+        this.contentObserver = new MutationObserver(() => {
+            if (this.isConnected)
+                this.decorate();
+        });
+        this.contentObserver.observe(this, { childList: true, subtree: true });
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.decorate();
+    }
+    /** The wrapper has `overflow: auto`, so it scrolls whenever its table outgrows it — by a
+     * capped height or just by wide content. That can't be known from markup, so detect it live
+     * and make the scroll region keyboard-reachable only when it actually scrolls. */
+    observeOverflow() {
+        const check = () => this.updateScrollAffordance();
+        if (typeof requestAnimationFrame === "function")
+            requestAnimationFrame(check);
+        else
+            check();
+        if (typeof ResizeObserver !== "undefined" && !this.overflowObserver) {
+            this.overflowObserver = new ResizeObserver(check);
+            this.overflowObserver.observe(this);
+            const table = this.querySelector("table");
+            if (table)
+                this.overflowObserver.observe(table);
+        }
+    }
+    updateScrollAffordance() {
+        const scrolls = this.scrollWidth > this.clientWidth + 1 || this.scrollHeight > this.clientHeight + 1;
+        if (scrolls) {
+            if (!this.hasAttribute("tabindex"))
+                this.setAttribute("tabindex", "0");
+        }
+        else if (this.getAttribute("tabindex") === "0") {
+            this.removeAttribute("tabindex");
+        }
+    }
+    reflectBoolean(name, value) {
+        if (value)
+            this.setAttribute(name, "");
+        else
+            this.removeAttribute(name);
+    }
+    get computedTableClass() {
+        return [
+            "xtyle-table",
+            this.variant !== "default" && `xtyle-table--${this.variant}`,
+            this.size === "compact" && "xtyle-table--compact",
+            this.hover && "xtyle-table--hover",
+            this.sticky && "xtyle-table--sticky",
+        ].filter(Boolean);
+    }
+    decorate() {
+        this.contentObserver?.disconnect();
+        try {
+            this.decorateTable();
+        }
+        finally {
+            if (this.contentObserver && this.isConnected) {
+                this.contentObserver.observe(this, { childList: true, subtree: true });
+            }
+        }
+    }
+    decorateTable() {
+        this.classList.add("xtyle-table-wrap");
+        this.setAttribute("part", "wrap");
+        const maxHeight = this.getAttribute("max-height");
+        if (maxHeight)
+            this.style.setProperty("--xtyle-table-max-height", maxHeight);
+        else
+            this.style.removeProperty("--xtyle-table-max-height");
+        this.updateScrollAffordance();
+        const table = this.querySelector("table");
+        if (!table) {
+            console.warn("xtyle-table: no `<table>` child to style. Author a real table and the wrapper styles it.");
+            return;
+        }
+        table.classList.add("xtyle-table");
+        for (const cls of this.computedTableClass)
+            table.classList.add(cls);
+        table.setAttribute("part", "table");
+        if (!table.getAttribute("aria-label") && !table.querySelector("caption") && !this.getAttribute("aria-label")) {
+            console.warn("xtyle-table: no `<caption>` or `aria-label` — the table has no accessible name. Add one so it is announced.");
+        }
+        if (!table.getAttribute("aria-label") && this.getAttribute("aria-label")) {
+            table.setAttribute("aria-label", this.getAttribute("aria-label"));
+        }
+        table.querySelector("thead")?.classList.add("xtyle-table__head");
+        table.querySelector("tbody")?.classList.add("xtyle-table__body");
+        for (const row of Array.from(table.querySelectorAll("tr")))
+            row.classList.add("xtyle-table__row");
+        for (const cell of Array.from(table.querySelectorAll("td")))
+            cell.classList.add("xtyle-table__cell");
+        for (const header of Array.from(table.querySelectorAll("th"))) {
+            header.classList.add("xtyle-table__header-cell");
+            this.decorateHeader(header);
+        }
+        for (const caption of Array.from(table.querySelectorAll("caption"))) {
+            caption.classList.add("xtyle-table__caption");
+        }
+        for (const footCell of Array.from(table.querySelectorAll("tfoot td, tfoot th"))) {
+            footCell.classList.remove("xtyle-table__cell", "xtyle-table__header-cell");
+            footCell.classList.add("xtyle-table__footer-cell");
+        }
+    }
+    decorateHeader(header) {
+        const sortable = header.hasAttribute("data-sortable") || header.hasAttribute("aria-sort");
+        if (!sortable)
+            return;
+        header.classList.add("xtyle-table__header-cell--sortable");
+        if (!header.hasAttribute("tabindex"))
+            header.setAttribute("tabindex", "0");
+        if (!header.hasAttribute("aria-sort"))
+            header.setAttribute("aria-sort", "none");
+        if (!header.querySelector(".xtyle-table__header-content")) {
+            const content = document.createElement("span");
+            content.className = "xtyle-table__header-content";
+            while (header.firstChild)
+                content.appendChild(header.firstChild);
+            content.insertAdjacentHTML("beforeend", SORT_GLYPH);
+            header.appendChild(content);
+        }
+    }
+}
+define("xtyle-table", XtyleTable);
+//# sourceMappingURL=table.js.map

package/dist/elements/table.js.map

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

package/dist/elements/tabs.d.ts

@@ -0,0 +1,50 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { Size } from "../index.js";
+import { type TabItemData, type TabsVariant, type TabsActivation } from "../markup/index.js";
+export declare class XtyleTabs extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    private uid;
+    private fragment;
+    static get observedAttributes(): string[];
+    get variant(): TabsVariant;
+    set variant(value: TabsVariant);
+    get size(): Size;
+    set size(value: Size);
+    get activation(): TabsActivation;
+    set activation(value: TabsActivation);
+    get value(): string | null;
+    set value(value: string | null | undefined);
+    get sticky(): boolean;
+    set sticky(value: boolean);
+    get tablist(): boolean;
+    set tablist(value: boolean);
+    get items(): TabItemData[];
+    private settleHandle;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * 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.
+     */
+    private scheduleSettle;
+    attributeChangedCallback(): void;
+    private get pairs();
+    /**
+     * 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.
+     */
+    private assignPanelSlots;
+    private get markupItems();
+    private get bindings();
+    private navContext;
+    private applyIntent;
+    private warnIfUnnamed;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/elements/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA8C,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACrG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAe,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAkB1G,qBAAa,SAAU,SAAQ,YAAY;IAC1C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,GAAG,CAA6B;IACxC,OAAO,CAAC,QAAQ,CAGb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,OAAO,IAAI,WAAW,CAEzB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,WAAW,EAE7B;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,UAAU,IAAI,cAAc,CAE/B;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,cAAc,EAEnC;IAED,IAAI,KAAK,IAAI,MAAM,GAAG,IAAI,CAEzB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACD,IAAI,MAAM,CAAC,KAAK,EAAE,OAAO,EAExB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,KAAK,IAAI,WAAW,EAAE,CAUzB;IAED,OAAO,CAAC,YAAY,CAAK;IAEhB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAO5B;;;;;;;OAOG;IACH,OAAO,CAAC,cAAc;IAStB,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,KAAK,GAahB;IAED;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAKxB,OAAO,KAAK,WAAW,GAUtB;IAED,OAAO,KAAK,QAAQ,GAkBnB;IAED,OAAO,CAAC,UAAU;IAUlB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAQrB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAOjC"}