@praxisjs/css 0.3.4 → 0.3.5

package/dist/__tests__/styled.test.js

@@ -1,904 +0,0 @@
-var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
-    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
-    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
-    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
-    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
-    var _, done = false;
-    for (var i = decorators.length - 1; i >= 0; i--) {
-        var context = {};
-        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
-        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
-        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
-        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
-        if (kind === "accessor") {
-            if (result === void 0) continue;
-            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
-            if (_ = accept(result.get)) descriptor.get = _;
-            if (_ = accept(result.set)) descriptor.set = _;
-            if (_ = accept(result.init)) initializers.unshift(_);
-        }
-        else if (_ = accept(result)) {
-            if (kind === "field") initializers.unshift(_);
-            else descriptor[key] = _;
-        }
-    }
-    if (target) Object.defineProperty(target, contextIn.name, descriptor);
-    done = true;
-};
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
-// @vitest-environment jsdom
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { StatefulComponent } from "@praxisjs/core";
-import { setComponentAnchor } from "@praxisjs/core/internal";
-import { Component } from "@praxisjs/decorators";
-import { Param } from "../decorators/param";
-import { ReactiveStylesheet, Stylesheet } from "../base/stylesheet";
-import { Styled } from "../decorators/styled";
-beforeEach(() => {
-    document
-        .head
-        .querySelectorAll("style[data-praxis-hash]")
-        .forEach((el) => el.remove());
-});
-afterEach(() => {
-    document
-        .head
-        .querySelectorAll("style[data-praxis-hash]")
-        .forEach((el) => el.remove());
-});
-// ─── CSS class fields ($-prefixed) ────────────────────────────────────────────
-class BtnStyle extends Stylesheet {
-    $base = `display: inline-flex; padding: 8px 16px;`;
-    $primary = `background: var(--accent); color: white;`;
-}
-describe("@Styled — $-prefixed CSS class fields", () => {
-    it("transforms $-fields to scoped class names", () => {
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        const { $btn } = new Comp();
-        expect($btn.$base).toMatch(/^prx-base-/);
-        expect($btn.$primary).toMatch(/^prx-primary-/);
-    });
-    it("class names are distinct for distinct CSS", () => {
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        const { $btn } = new Comp();
-        expect($btn.$base).not.toBe($btn.$primary);
-    });
-    it("same CSS content produces the same hash suffix across different keys", () => {
-        class SA extends Stylesheet {
-            $x = `color: red;`;
-        }
-        class SB extends Stylesheet {
-            $y = `color: red;`;
-        }
-        const hashA = new ((() => {
-            let _$a_decorators;
-            let _$a_initializers = [];
-            let _$a_extraInitializers = [];
-            return class {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$a_decorators = [Styled(SA)];
-                    __esDecorate(null, null, _$a_decorators, { kind: "field", name: "$a", static: false, private: false, access: { has: obj => "$a" in obj, get: obj => obj.$a, set: (obj, value) => { obj.$a = value; } }, metadata: _metadata }, _$a_initializers, _$a_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $a = __runInitializers(this, _$a_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$a_extraInitializers);
-                }
-            };
-        })())().$a.$x.split("-").pop();
-        const hashB = new ((() => {
-            let _$b_decorators;
-            let _$b_initializers = [];
-            let _$b_extraInitializers = [];
-            return class {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$b_decorators = [Styled(SB)];
-                    __esDecorate(null, null, _$b_decorators, { kind: "field", name: "$b", static: false, private: false, access: { has: obj => "$b" in obj, get: obj => obj.$b, set: (obj, value) => { obj.$b = value; } }, metadata: _metadata }, _$b_initializers, _$b_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $b = __runInitializers(this, _$b_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$b_extraInitializers);
-                }
-            };
-        })())().$b.$y.split("-").pop();
-        expect(hashA).toBe(hashB);
-    });
-    it("caches the class map — same object reference across instances", () => {
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        expect(new Comp().$btn).toBe(new Comp().$btn);
-    });
-    it("injects a style element into document.head eagerly at decoration time", () => {
-        // Before any class definition: no style element
-        expect(document.head.querySelector("style[data-praxis-hash]")).toBeNull();
-        // Defining a class with @Styled injects immediately (before any mount)
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        expect(document.head.querySelector("style[data-praxis-hash]")).not.toBeNull();
-        // Style is present even before instantiation or mount
-        void Comp;
-    });
-    it("style is present before onMount is called", () => {
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        // Style injected at decoration time — no mount needed
-        expect(document.head.querySelector("style[data-praxis-hash]")).not.toBeNull();
-        const inst = new Comp();
-        // Still present before mount
-        expect(document.head.querySelector("style[data-praxis-hash]")).not.toBeNull();
-        inst.onMount?.();
-        expect(document.head.querySelector("style[data-praxis-hash]")).not.toBeNull();
-    });
-    it("injected CSS contains the generated class names", () => {
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        const css = document.head.querySelector("style[data-praxis-hash]")?.textContent ?? "";
-        expect(css).toContain(new Comp().$btn.$base);
-    });
-    it("reference-counts — injects once for multiple instances", () => {
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        const i1 = new Comp();
-        const i2 = new Comp();
-        i1.onMount?.();
-        i2.onMount?.();
-        expect(document.head.querySelectorAll("style[data-praxis-hash]").length).toBe(1);
-    });
-    it("style persists after all instances unmount (decoration-time base reference)", () => {
-        // The eager injection at decoration time holds a permanent reference.
-        // Unmounting all instances decrements their ref-count but does not remove the style.
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        inst.onMount?.();
-        inst.onUnmount?.();
-        expect(document.head.querySelector("style[data-praxis-hash]")).not.toBeNull();
-    });
-    it("keeps style when one of two instances unmounts", () => {
-        let Comp = (() => {
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-        })();
-        const i1 = new Comp();
-        const i2 = new Comp();
-        i1.onMount?.();
-        i2.onMount?.();
-        i1.onUnmount?.();
-        expect(document.head.querySelector("style[data-praxis-hash]")).not.toBeNull();
-        i2.onUnmount?.();
-        expect(document.head.querySelector("style[data-praxis-hash]")).not.toBeNull();
-    });
-    it("multiple @Styled fields inject separate stylesheets", () => {
-        class SA extends Stylesheet {
-            $foo = `color: tomato;`;
-        }
-        class SB extends Stylesheet {
-            $bar = `color: steelblue;`;
-        }
-        let Comp = (() => {
-            let _$a_decorators;
-            let _$a_initializers = [];
-            let _$a_extraInitializers = [];
-            let _$b_decorators;
-            let _$b_initializers = [];
-            let _$b_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$a_decorators = [Styled(SA)];
-                    _$b_decorators = [Styled(SB)];
-                    __esDecorate(null, null, _$a_decorators, { kind: "field", name: "$a", static: false, private: false, access: { has: obj => "$a" in obj, get: obj => obj.$a, set: (obj, value) => { obj.$a = value; } }, metadata: _metadata }, _$a_initializers, _$a_extraInitializers);
-                    __esDecorate(null, null, _$b_decorators, { kind: "field", name: "$b", static: false, private: false, access: { has: obj => "$b" in obj, get: obj => obj.$b, set: (obj, value) => { obj.$b = value; } }, metadata: _metadata }, _$b_initializers, _$b_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $a = __runInitializers(this, _$a_initializers, void 0);
-                $b = (__runInitializers(this, _$a_extraInitializers), __runInitializers(this, _$b_initializers, void 0));
-                constructor() {
-                    __runInitializers(this, _$b_extraInitializers);
-                }
-            };
-        })();
-        // Both injected at decoration time
-        expect(document.head.querySelectorAll("style[data-praxis-hash]").length).toBe(2);
-        const inst = new Comp();
-        inst.onMount?.();
-        expect(document.head.querySelectorAll("style[data-praxis-hash]").length).toBe(2);
-        inst.onUnmount?.();
-        expect(document.head.querySelectorAll("style[data-praxis-hash]").length).toBe(2);
-    });
-    it("works with @Component() in the class stack", () => {
-        let Card = (() => {
-            let _classDecorators = [Component()];
-            let _classDescriptor;
-            let _classExtraInitializers = [];
-            let _classThis;
-            let _classSuper = StatefulComponent;
-            let _$btn_decorators;
-            let _$btn_initializers = [];
-            let _$btn_extraInitializers = [];
-            var Card = class extends _classSuper {
-                static { _classThis = this; }
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$btn_decorators = [Styled(BtnStyle)];
-                    __esDecorate(null, null, _$btn_decorators, { kind: "field", name: "$btn", static: false, private: false, access: { has: obj => "$btn" in obj, get: obj => obj.$btn, set: (obj, value) => { obj.$btn = value; } }, metadata: _metadata }, _$btn_initializers, _$btn_extraInitializers);
-                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-                    Card = _classThis = _classDescriptor.value;
-                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                    __runInitializers(_classThis, _classExtraInitializers);
-                }
-                $btn = __runInitializers(this, _$btn_initializers, void 0);
-                render() { return document.createElement("div"); }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _$btn_extraInitializers);
-                }
-            };
-            return Card = _classThis;
-        })();
-        const inst = new Card();
-        expect(inst.$btn.$base).toMatch(/^prx-base-/);
-    });
-    it("skips $-prefixed fields that are neither string nor CSSBuilder", () => {
-        class S extends Stylesheet {
-            $root = 42;
-            $base = `display: flex;`;
-        }
-        let Comp = (() => {
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$s_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        expect(inst.$s.$root).toBeUndefined();
-        expect(inst.$s.$base).toMatch(/^prx-base-/);
-    });
-    it("processes CSSBuilder fields (this.css({}))", () => {
-        class S extends Stylesheet {
-            $root = this.css({ display: "flex", gap: "12px" })
-                .hover({ opacity: 0.9 });
-        }
-        let Comp = (() => {
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                constructor() {
-                    __runInitializers(this, _$s_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        expect(inst.$s.$root).toMatch(/^prx-root-/);
-        const css = document.head.querySelector("style[data-praxis-hash]")?.textContent ?? "";
-        expect(css).toContain("display: flex;");
-        expect(css).toContain("&:hover");
-        inst.onUnmount?.();
-    });
-});
-// ─── @Param() reactive CSS vars ─────────────────────────────────────────────────
-function makeAnchor(parent) {
-    const anchor = document.createComment("[/Comp]");
-    parent.appendChild(anchor);
-    return anchor;
-}
-describe("@Param — reactive CSS custom properties", () => {
-    it("@Param() field exposes a getter/setter on the stylesheet object", () => {
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _color_decorators;
-            let _color_initializers = [];
-            let _color_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _color_decorators = [Param()];
-                    __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                color = __runInitializers(this, _color_initializers, "#3b82f6");
-                $root = (__runInitializers(this, _color_extraInitializers), `background: var(--color);`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _$s_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        expect(inst.$s.color).toBe("#3b82f6");
-        inst.$s.color = "red";
-        expect(inst.$s.color).toBe("red");
-    });
-    it("sets the CSS var on the element when onMount fires", () => {
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _accent_decorators;
-            let _accent_initializers = [];
-            let _accent_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _accent_decorators = [Param()];
-                    __esDecorate(null, null, _accent_decorators, { kind: "field", name: "accent", static: false, private: false, access: { has: obj => "accent" in obj, get: obj => obj.accent, set: (obj, value) => { obj.accent = value; } }, metadata: _metadata }, _accent_initializers, _accent_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                accent = __runInitializers(this, _accent_initializers, "#3b82f6");
-                $root = (__runInitializers(this, _accent_extraInitializers), `color: var(--accent);`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                constructor() {
-                    super();
-                    __runInitializers(this, _$s_extraInitializers);
-                    setComponentAnchor(this, makeAnchor(container));
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-            };
-        })();
-        const inst = new Comp();
-        inst.onMount?.();
-        expect(container.style.getPropertyValue("--accent")).toBe("#3b82f6");
-        container.remove();
-    });
-    it("updates the CSS var reactively when the field is set", () => {
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _color_decorators;
-            let _color_initializers = [];
-            let _color_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _color_decorators = [Param()];
-                    __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                color = __runInitializers(this, _color_initializers, "blue");
-                $root = (__runInitializers(this, _color_extraInitializers), `color: var(--color);`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                constructor() {
-                    super();
-                    __runInitializers(this, _$s_extraInitializers);
-                    setComponentAnchor(this, makeAnchor(container));
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-            };
-        })();
-        const inst = new Comp();
-        inst.onMount?.();
-        expect(container.style.getPropertyValue("--color")).toBe("blue");
-        inst.$s.color = "red";
-        expect(container.style.getPropertyValue("--color")).toBe("red");
-        container.remove();
-    });
-    it("removes CSS vars on onUnmount", () => {
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _size_decorators;
-            let _size_initializers = [];
-            let _size_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _size_decorators = [Param()];
-                    __esDecorate(null, null, _size_decorators, { kind: "field", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                size = __runInitializers(this, _size_initializers, "16px");
-                $root = (__runInitializers(this, _size_extraInitializers), `font-size: var(--size);`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                constructor() {
-                    super();
-                    __runInitializers(this, _$s_extraInitializers);
-                    setComponentAnchor(this, makeAnchor(container));
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-            };
-        })();
-        const inst = new Comp();
-        inst.onMount?.();
-        expect(container.style.getPropertyValue("--size")).toBe("16px");
-        inst.onUnmount?.();
-        expect(container.style.getPropertyValue("--size")).toBe("");
-        container.remove();
-    });
-    it("each instance gets independent signal state", () => {
-        const c1 = document.createElement("div");
-        const c2 = document.createElement("div");
-        document.body.append(c1, c2);
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _color_decorators;
-            let _color_initializers = [];
-            let _color_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _color_decorators = [Param()];
-                    __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                color = __runInitializers(this, _color_initializers, "blue");
-                $root = (__runInitializers(this, _color_extraInitializers), `color: var(--color);`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                constructor(anchor) {
-                    super();
-                    __runInitializers(this, _$s_extraInitializers);
-                    setComponentAnchor(this, anchor);
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-            };
-        })();
-        const i1 = new Comp(makeAnchor(c1));
-        const i2 = new Comp(makeAnchor(c2));
-        i1.onMount?.();
-        i2.onMount?.();
-        i1.$s.color = "red";
-        expect(c1.style.getPropertyValue("--color")).toBe("red");
-        expect(c2.style.getPropertyValue("--color")).toBe("blue");
-        c1.remove();
-        c2.remove();
-    });
-    it("Stylesheet with only @Param() fields (no $ CSS) — no style element injected", () => {
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _color_decorators;
-            let _color_initializers = [];
-            let _color_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _color_decorators = [Param()];
-                    __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                color = __runInitializers(this, _color_initializers, "red");
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _color_extraInitializers);
-                }
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _$s_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        inst.onMount?.();
-        expect(document.head.querySelector("style[data-praxis-hash]")).toBeNull();
-        inst.onUnmount?.();
-    });
-    it("@Param() field with non-string/non-number value is skipped (defensive)", () => {
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _items_decorators;
-            let _items_initializers = [];
-            let _items_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _items_decorators = [Param()];
-                    __esDecorate(null, null, _items_decorators, { kind: "field", name: "items", static: false, private: false, access: { has: obj => "items" in obj, get: obj => obj.items, set: (obj, value) => { obj.items = value; } }, metadata: _metadata }, _items_initializers, _items_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                items = __runInitializers(this, _items_initializers, []);
-                $root = (__runInitializers(this, _items_extraInitializers), `display: flex;`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _$s_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        expect(inst.$s.$root).toMatch(/^prx-root-/);
-        expect(inst.$s.items).toBeUndefined();
-    });
-    it("non-$ non-@Param() fields in Stylesheet are silently ignored", () => {
-        class S extends ReactiveStylesheet {
-            $root = `display: flex;`;
-            description = "a plain field that should be skipped";
-        }
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _$s_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        expect(inst.$s.$root).toMatch(/^prx-root-/);
-        expect(inst.$s.description).toBeUndefined();
-    });
-    it("two @Param() fields on the same class — PARAM_META entry reused", () => {
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _color_decorators;
-            let _color_initializers = [];
-            let _color_extraInitializers = [];
-            let _radius_decorators;
-            let _radius_initializers = [];
-            let _radius_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _color_decorators = [Param()];
-                    _radius_decorators = [Param()];
-                    __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
-                    __esDecorate(null, null, _radius_decorators, { kind: "field", name: "radius", static: false, private: false, access: { has: obj => "radius" in obj, get: obj => obj.radius, set: (obj, value) => { obj.radius = value; } }, metadata: _metadata }, _radius_initializers, _radius_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                color = __runInitializers(this, _color_initializers, "blue");
-                radius = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _radius_initializers, "8px"));
-                $root = (__runInitializers(this, _radius_extraInitializers), `color: var(--color); border-radius: var(--radius);`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _$s_extraInitializers);
-                }
-            };
-        })();
-        const inst = new Comp();
-        expect(inst.$s.color).toBe("blue");
-        expect(inst.$s.radius).toBe("8px");
-    });
-    it("onUnmount removes CSS vars from element when el is present", () => {
-        const container = document.createElement("div");
-        document.body.appendChild(container);
-        let S = (() => {
-            let _classSuper = ReactiveStylesheet;
-            let _color_decorators;
-            let _color_initializers = [];
-            let _color_extraInitializers = [];
-            return class S extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _color_decorators = [Param()];
-                    __esDecorate(null, null, _color_decorators, { kind: "field", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                color = __runInitializers(this, _color_initializers, "red");
-                $root = (__runInitializers(this, _color_extraInitializers), `color: var(--color);`);
-            };
-        })();
-        let Comp = (() => {
-            let _classSuper = StatefulComponent;
-            let _$s_decorators;
-            let _$s_initializers = [];
-            let _$s_extraInitializers = [];
-            return class Comp extends _classSuper {
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _$s_decorators = [Styled(S)];
-                    __esDecorate(null, null, _$s_decorators, { kind: "field", name: "$s", static: false, private: false, access: { has: obj => "$s" in obj, get: obj => obj.$s, set: (obj, value) => { obj.$s = value; } }, metadata: _metadata }, _$s_initializers, _$s_extraInitializers);
-                    if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                }
-                constructor() {
-                    super();
-                    __runInitializers(this, _$s_extraInitializers);
-                    setComponentAnchor(this, makeAnchor(container));
-                }
-                $s = __runInitializers(this, _$s_initializers, void 0);
-                render() { return document.createElement("div"); }
-            };
-        })();
-        const inst = new Comp();
-        inst.onMount?.();
-        expect(container.style.getPropertyValue("--color")).toBe("red");
-        inst.onUnmount?.();
-        expect(container.style.getPropertyValue("--color")).toBe("");
-        container.remove();
-    });
-    it("@Param() cannot be applied outside ReactiveStylesheet — enforced at TypeScript level", () => {
-        expect(() => {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const dec = Param;
-            const fakeCtx = {
-                name: "foo",
-                addInitializer(fn) { fn.call({ constructor: class {
-                    } }); },
-            };
-            dec(undefined, fakeCtx);
-        }).not.toThrow();
-    });
-});
-//# sourceMappingURL=styled.test.js.map