@joist/element 4.0.0-next.4 → 4.0.0-next.41

package/target/lib/attr.test.js

@@ -1,194 +1,257 @@
 import { __esDecorate, __propKey, __runInitializers } from "tslib";
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect } from 'chai';
 import { attr } from './attr.js';
 import { element } from './element.js';
-describe('@attr()', () => {
-    it('should read and parse the correct values', async () => {
-        let MyElement = (() => {
-            let _classDecorators = [element({
-                    tagName: 'attr-test-1'
-                })];
-            let _classDescriptor;
-            let _classExtraInitializers = [];
-            let _classThis;
-            let _classSuper = HTMLElement;
-            let _value1_decorators;
-            let _value1_initializers = [];
-            let _value1_extraInitializers = [];
-            let _value2_decorators;
-            let _value2_initializers = [];
-            let _value2_extraInitializers = [];
-            let _value3_decorators;
-            let _value3_initializers = [];
-            let _value3_extraInitializers = [];
-            let _value4_decorators;
-            let _value4_initializers = [];
-            let _value4_extraInitializers = [];
-            var MyElement = class extends _classSuper {
-                static { _classThis = this; }
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _value1_decorators = [attr()];
-                    _value2_decorators = [attr()];
-                    _value3_decorators = [attr()];
-                    _value4_decorators = [attr()];
-                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
-                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
-                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
-                    __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
-                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-                    MyElement = _classThis = _classDescriptor.value;
-                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                    __runInitializers(_classThis, _classExtraInitializers);
-                }
-                #value1_accessor_storage = __runInitializers(this, _value1_initializers, 100);
-                get value1() { return this.#value1_accessor_storage; }
-                set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
-                get value2() { return this.#value2_accessor_storage; }
-                set value2(value) { this.#value2_accessor_storage = value; }
-                #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, false));
-                get value3() { return this.#value3_accessor_storage; }
-                set value3(value) { this.#value3_accessor_storage = value; }
-                #value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, 'hello'));
-                get value4() { return this.#value4_accessor_storage; }
-                set value4(value) { this.#value4_accessor_storage = value; }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _value4_extraInitializers);
-                }
-            };
-            return MyElement = _classThis;
-        })();
-        const el = await fixture(html `<attr-test-1 value2="2" value3 value4="world"></attr-test-1>`);
-        expect(el.value1).to.equal(100);
-        expect(el.value2).to.equal(2);
-        expect(el.value3).to.equal(true);
-        expect(el.value4).to.equal('world');
-    });
-    it('should not write falsy props to attributes', async () => {
-        let MyElement = (() => {
-            let _classDecorators = [element({
-                    tagName: 'attr-test-2'
-                })];
-            let _classDescriptor;
-            let _classExtraInitializers = [];
-            let _classThis;
-            let _classSuper = HTMLElement;
-            let _value1_decorators;
-            let _value1_initializers = [];
-            let _value1_extraInitializers = [];
-            let _value2_decorators;
-            let _value2_initializers = [];
-            let _value2_extraInitializers = [];
-            let _value3_decorators;
-            let _value3_initializers = [];
-            let _value3_extraInitializers = [];
-            var MyElement = class extends _classSuper {
-                static { _classThis = this; }
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _value1_decorators = [attr()];
-                    _value2_decorators = [attr()];
-                    _value3_decorators = [attr()];
-                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
-                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
-                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
-                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-                    MyElement = _classThis = _classDescriptor.value;
-                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                    __runInitializers(_classThis, _classExtraInitializers);
-                }
-                #value1_accessor_storage = __runInitializers(this, _value1_initializers, undefined);
-                get value1() { return this.#value1_accessor_storage; }
-                set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, null));
-                get value2() { return this.#value2_accessor_storage; }
-                set value2(value) { this.#value2_accessor_storage = value; }
-                #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, ''));
-                get value3() { return this.#value3_accessor_storage; }
-                set value3(value) { this.#value3_accessor_storage = value; }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _value3_extraInitializers);
-                }
-            };
-            return MyElement = _classThis;
-        })();
-        const el = await fixture(html `<attr-test-2></attr-test-2>`);
-        expect(el.hasAttribute('value1')).to.be.false;
-        expect(el.hasAttribute('value2')).to.be.false;
-        expect(el.hasAttribute('value3')).to.be.false;
-    });
-    it('should update attributes when props are changed', async () => {
-        let MyElement = (() => {
-            let _classDecorators = [element({
-                    tagName: 'attr-test-3'
-                })];
-            let _classDescriptor;
-            let _classExtraInitializers = [];
-            let _classThis;
-            let _classSuper = HTMLElement;
-            let _value1_decorators;
-            let _value1_initializers = [];
-            let _value1_extraInitializers = [];
-            let _value2_decorators;
-            let _value2_initializers = [];
-            let _value2_extraInitializers = [];
-            let _value3_decorators;
-            let _value3_initializers = [];
-            let _value3_extraInitializers = [];
-            let _value4_decorators;
-            let _value4_initializers = [];
-            let _value4_extraInitializers = [];
-            var MyElement = class extends _classSuper {
-                static { _classThis = this; }
-                static {
-                    const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    _value1_decorators = [attr()];
-                    _value2_decorators = [attr()];
-                    _value3_decorators = [attr()];
-                    _value4_decorators = [attr()];
-                    __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
-                    __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
-                    __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
-                    __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
-                    __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-                    MyElement = _classThis = _classDescriptor.value;
-                    if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                    __runInitializers(_classThis, _classExtraInitializers);
-                }
-                #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
-                get value1() { return this.#value1_accessor_storage; }
-                set value1(value) { this.#value1_accessor_storage = value; }
-                #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
-                get value2() { return this.#value2_accessor_storage; }
-                set value2(value) { this.#value2_accessor_storage = value; }
-                #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, true));
-                get value3() { return this.#value3_accessor_storage; }
-                set value3(value) { this.#value3_accessor_storage = value; }
-                #value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, false));
-                get value4() { return this.#value4_accessor_storage; }
-                set value4(value) { this.#value4_accessor_storage = value; }
-                constructor() {
-                    super(...arguments);
-                    __runInitializers(this, _value4_extraInitializers);
-                }
-            };
-            return MyElement = _classThis;
-        })();
-        const el = await fixture(html `<attr-test-3></attr-test-3>`);
-        el.value1 = 'world';
-        el.value2 = 100;
-        el.value3 = false;
-        el.value4 = true;
-        expect(el.getAttribute('value1')).to.equal('world');
-        expect(el.getAttribute('value2')).to.equal('100');
-        expect(el.hasAttribute('value3')).to.be.false;
-        expect(el.hasAttribute('value4')).to.be.true;
-    });
-    it('should normalize attribute names', async () => {
-        const value3 = Symbol('Value from SYMBOL');
+it('should read and parse the correct values', () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'attr-test-1'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value1_decorators;
+        let _value1_initializers = [];
+        let _value1_extraInitializers = [];
+        let _value2_decorators;
+        let _value2_initializers = [];
+        let _value2_extraInitializers = [];
+        let _value3_decorators;
+        let _value3_initializers = [];
+        let _value3_extraInitializers = [];
+        let _value4_decorators;
+        let _value4_initializers = [];
+        let _value4_extraInitializers = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value1_decorators = [attr()];
+                _value2_decorators = [attr()];
+                _value3_decorators = [attr()];
+                _value4_decorators = [attr()];
+                __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
+                __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
+                __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
+                __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value1_accessor_storage = __runInitializers(this, _value1_initializers, 100);
+            get value1() { return this.#value1_accessor_storage; }
+            set value1(value) { this.#value1_accessor_storage = value; }
+            #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
+            get value2() { return this.#value2_accessor_storage; }
+            set value2(value) { this.#value2_accessor_storage = value; }
+            #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, false));
+            get value3() { return this.#value3_accessor_storage; }
+            set value3(value) { this.#value3_accessor_storage = value; }
+            #value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, 'hello'));
+            get value4() { return this.#value4_accessor_storage; }
+            set value4(value) { this.#value4_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _value4_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const container = document.createElement('div');
+    container.innerHTML = `
+    <attr-test-1 value2="2" value3 value4="world"></attr-test-1>
+  `;
+    document.body.append(container);
+    const el = document.querySelector('attr-test-1');
+    expect(el.value1).to.equal(100);
+    expect(el.value2).to.equal(2);
+    expect(el.value3).to.equal(true);
+    expect(el.value4).to.equal('world');
+    container.remove();
+});
+it('should not write falsy props to attributes', async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'attr-test-2'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value1_decorators;
+        let _value1_initializers = [];
+        let _value1_extraInitializers = [];
+        let _value2_decorators;
+        let _value2_initializers = [];
+        let _value2_extraInitializers = [];
+        let _value3_decorators;
+        let _value3_initializers = [];
+        let _value3_extraInitializers = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value1_decorators = [attr()];
+                _value2_decorators = [attr()];
+                _value3_decorators = [attr()];
+                __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
+                __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
+                __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value1_accessor_storage = __runInitializers(this, _value1_initializers, undefined);
+            get value1() { return this.#value1_accessor_storage; }
+            set value1(value) { this.#value1_accessor_storage = value; }
+            #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, null));
+            get value2() { return this.#value2_accessor_storage; }
+            set value2(value) { this.#value2_accessor_storage = value; }
+            #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, ''));
+            get value3() { return this.#value3_accessor_storage; }
+            set value3(value) { this.#value3_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _value3_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    expect(el.hasAttribute('value1')).to.be.false;
+    expect(el.hasAttribute('value2')).to.be.false;
+    expect(el.hasAttribute('value3')).to.be.false;
+});
+it('should update attributes when props are changed', async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'attr-test-3'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value1_decorators;
+        let _value1_initializers = [];
+        let _value1_extraInitializers = [];
+        let _value2_decorators;
+        let _value2_initializers = [];
+        let _value2_extraInitializers = [];
+        let _value3_decorators;
+        let _value3_initializers = [];
+        let _value3_extraInitializers = [];
+        let _value4_decorators;
+        let _value4_initializers = [];
+        let _value4_extraInitializers = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value1_decorators = [attr()];
+                _value2_decorators = [attr()];
+                _value3_decorators = [attr()];
+                _value4_decorators = [attr()];
+                __esDecorate(this, null, _value1_decorators, { kind: "accessor", name: "value1", static: false, private: false, access: { has: obj => "value1" in obj, get: obj => obj.value1, set: (obj, value) => { obj.value1 = value; } }, metadata: _metadata }, _value1_initializers, _value1_extraInitializers);
+                __esDecorate(this, null, _value2_decorators, { kind: "accessor", name: "value2", static: false, private: false, access: { has: obj => "value2" in obj, get: obj => obj.value2, set: (obj, value) => { obj.value2 = value; } }, metadata: _metadata }, _value2_initializers, _value2_extraInitializers);
+                __esDecorate(this, null, _value3_decorators, { kind: "accessor", name: "value3", static: false, private: false, access: { has: obj => "value3" in obj, get: obj => obj.value3, set: (obj, value) => { obj.value3 = value; } }, metadata: _metadata }, _value3_initializers, _value3_extraInitializers);
+                __esDecorate(this, null, _value4_decorators, { kind: "accessor", name: "value4", static: false, private: false, access: { has: obj => "value4" in obj, get: obj => obj.value4, set: (obj, value) => { obj.value4 = value; } }, metadata: _metadata }, _value4_initializers, _value4_extraInitializers);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value1_accessor_storage = __runInitializers(this, _value1_initializers, 'hello');
+            get value1() { return this.#value1_accessor_storage; }
+            set value1(value) { this.#value1_accessor_storage = value; }
+            #value2_accessor_storage = (__runInitializers(this, _value1_extraInitializers), __runInitializers(this, _value2_initializers, 0));
+            get value2() { return this.#value2_accessor_storage; }
+            set value2(value) { this.#value2_accessor_storage = value; }
+            #value3_accessor_storage = (__runInitializers(this, _value2_extraInitializers), __runInitializers(this, _value3_initializers, true));
+            get value3() { return this.#value3_accessor_storage; }
+            set value3(value) { this.#value3_accessor_storage = value; }
+            #value4_accessor_storage = (__runInitializers(this, _value3_extraInitializers), __runInitializers(this, _value4_initializers, false));
+            get value4() { return this.#value4_accessor_storage; }
+            set value4(value) { this.#value4_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _value4_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    el.value1 = 'world';
+    el.value2 = 100;
+    el.value3 = false;
+    el.value4 = true;
+    expect(el.getAttribute('value1')).to.equal('world');
+    expect(el.getAttribute('value2')).to.equal('100');
+    expect(el.hasAttribute('value3')).to.be.false;
+    expect(el.hasAttribute('value4')).to.be.true;
+});
+it('should normalize attribute names', async () => {
+    const value3 = Symbol('Value from SYMBOL');
+    let MyElement = (() => {
+        var _a;
+        let _classDecorators = [element({
+                tagName: 'attr-test-4'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _Value1_decorators;
+        let _Value1_initializers = [];
+        let _Value1_extraInitializers = [];
+        let _member_decorators;
+        let _member_initializers = [];
+        let _member_extraInitializers = [];
+        let _member_decorators_1;
+        let _member_initializers_1 = [];
+        let _member_extraInitializers_1 = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                __esDecorate(this, null, _Value1_decorators, { kind: "accessor", name: "Value1", static: false, private: false, access: { has: obj => "Value1" in obj, get: obj => obj.Value1, set: (obj, value) => { obj.Value1 = value; } }, metadata: _metadata }, _Value1_initializers, _Value1_extraInitializers);
+                __esDecorate(this, null, _member_decorators, { kind: "accessor", name: 'Value 2', static: false, private: false, access: { has: obj => 'Value 2' in obj, get: obj => obj['Value 2'], set: (obj, value) => { obj['Value 2'] = value; } }, metadata: _metadata }, _member_initializers, _member_extraInitializers);
+                __esDecorate(this, null, _member_decorators_1, { kind: "accessor", name: _a, static: false, private: false, access: { has: obj => _a in obj, get: obj => obj[_a], set: (obj, value) => { obj[_a] = value; } }, metadata: _metadata }, _member_initializers_1, _member_extraInitializers_1);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #Value1_accessor_storage = __runInitializers(this, _Value1_initializers, 'hello');
+            get Value1() { return this.#Value1_accessor_storage; }
+            set Value1(value) { this.#Value1_accessor_storage = value; }
+            #_a_accessor_storage = (__runInitializers(this, _Value1_extraInitializers), __runInitializers(this, _member_initializers, 0));
+            get ['Value 2']() { return this.#_a_accessor_storage; }
+            set ['Value 2'](value) { this.#_a_accessor_storage = value; }
+            #_b_accessor_storage = (__runInitializers(this, _member_extraInitializers), __runInitializers(this, _member_initializers_1, true));
+            get [(_Value1_decorators = [attr()], _member_decorators = [attr()], _member_decorators_1 = [attr()], _a = __propKey(value3))]() { return this.#_b_accessor_storage; }
+            set [_a](value) { this.#_b_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _member_extraInitializers_1);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    document.body.append(el);
+    expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
+        'value1',
+        'value-2',
+        'value-from-symbol'
+    ]);
+    el.remove();
+});
+it('should throw an error for symbols with no description', async () => {
+    expect(() => {
+        const value = Symbol();
         let MyElement = (() => {
             var _a;
             let _classDecorators = [element({
@@ -198,87 +261,146 @@ describe('@attr()', () => {
             let _classExtraInitializers = [];
             let _classThis;
             let _classSuper = HTMLElement;
-            let _Value1_decorators;
-            let _Value1_initializers = [];
-            let _Value1_extraInitializers = [];
             let _member_decorators;
             let _member_initializers = [];
             let _member_extraInitializers = [];
-            let _member_decorators_1;
-            let _member_initializers_1 = [];
-            let _member_extraInitializers_1 = [];
             var MyElement = class extends _classSuper {
                 static { _classThis = this; }
                 static {
                     const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                    __esDecorate(this, null, _Value1_decorators, { kind: "accessor", name: "Value1", static: false, private: false, access: { has: obj => "Value1" in obj, get: obj => obj.Value1, set: (obj, value) => { obj.Value1 = value; } }, metadata: _metadata }, _Value1_initializers, _Value1_extraInitializers);
-                    __esDecorate(this, null, _member_decorators, { kind: "accessor", name: 'Value 2', static: false, private: false, access: { has: obj => 'Value 2' in obj, get: obj => obj['Value 2'], set: (obj, value) => { obj['Value 2'] = value; } }, metadata: _metadata }, _member_initializers, _member_extraInitializers);
-                    __esDecorate(this, null, _member_decorators_1, { kind: "accessor", name: _a, static: false, private: false, access: { has: obj => _a in obj, get: obj => obj[_a], set: (obj, value) => { obj[_a] = value; } }, metadata: _metadata }, _member_initializers_1, _member_extraInitializers_1);
+                    __esDecorate(this, null, _member_decorators, { kind: "accessor", name: _a, static: false, private: false, access: { has: obj => _a in obj, get: obj => obj[_a], set: (obj, value) => { obj[_a] = value; } }, metadata: _metadata }, _member_initializers, _member_extraInitializers);
                     __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
                     MyElement = _classThis = _classDescriptor.value;
                     if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
                     __runInitializers(_classThis, _classExtraInitializers);
                 }
-                #Value1_accessor_storage = __runInitializers(this, _Value1_initializers, 'hello');
-                get Value1() { return this.#Value1_accessor_storage; }
-                set Value1(value) { this.#Value1_accessor_storage = value; }
-                #_a_accessor_storage = (__runInitializers(this, _Value1_extraInitializers), __runInitializers(this, _member_initializers, 0));
-                get ['Value 2']() { return this.#_a_accessor_storage; }
-                set ['Value 2'](value) { this.#_a_accessor_storage = value; }
-                #_b_accessor_storage = (__runInitializers(this, _member_extraInitializers), __runInitializers(this, _member_initializers_1, true));
-                get [(_Value1_decorators = [attr()], _member_decorators = [attr()], _member_decorators_1 = [attr()], _a = __propKey(value3))]() { return this.#_b_accessor_storage; }
-                set [_a](value) { this.#_b_accessor_storage = value; }
+                #_a_accessor_storage = __runInitializers(this, _member_initializers, true);
+                get [(_member_decorators = [attr()], _a = __propKey(value))]() { return this.#_a_accessor_storage; }
+                set [_a](value) { this.#_a_accessor_storage = value; }
                 constructor() {
                     super(...arguments);
-                    __runInitializers(this, _member_extraInitializers_1);
+                    __runInitializers(this, _member_extraInitializers);
                 }
             };
             return MyElement = _classThis;
         })();
-        const el = await fixture(html `<attr-test-4></attr-test-4>`);
-        expect([...el.attributes].map((attr) => attr.name)).to.deep.equal([
-            'value1',
-            'value-2',
-            'value-from-symbol'
-        ]);
-    });
-    it('should throw an error for symbols with no description', async () => {
-        expect(() => {
-            const value = Symbol();
-            let MyElement = (() => {
-                var _a;
-                let _classDecorators = [element({
-                        tagName: 'attr-test-4'
+        new MyElement();
+    }).to.throw('Cannot handle Symbol property without description');
+});
+it('should not reflect property to attribute', async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'attr-test-5'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value_decorators;
+        let _value_initializers = [];
+        let _value_extraInitializers = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value_decorators = [attr({ reflect: false })];
+                __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value_accessor_storage = __runInitializers(this, _value_initializers, 'foo');
+            get value() { return this.#value_accessor_storage; }
+            set value(value) { this.#value_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _value_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    el.value = 'bar';
+    expect(el.value).to.equal('bar');
+    expect(el.hasAttribute('value')).to.be.false;
+});
+it('non reflective attributes should still read new attribute values', async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'attr-test-6'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value_decorators;
+        let _value_initializers = [];
+        let _value_extraInitializers = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value_decorators = [attr({ reflect: false })];
+                __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value_accessor_storage = __runInitializers(this, _value_initializers, 'foo');
+            get value() { return this.#value_accessor_storage; }
+            set value(value) { this.#value_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _value_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    el.setAttribute('value', 'bar');
+    expect(el.value).to.equal('bar');
+});
+it('should allow a manually defined attribute name', async () => {
+    let MyElement = (() => {
+        let _classDecorators = [element({
+                tagName: 'attr-test-7'
+            })];
+        let _classDescriptor;
+        let _classExtraInitializers = [];
+        let _classThis;
+        let _classSuper = HTMLElement;
+        let _value_decorators;
+        let _value_initializers = [];
+        let _value_extraInitializers = [];
+        var MyElement = class extends _classSuper {
+            static { _classThis = this; }
+            static {
+                const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+                _value_decorators = [attr({
+                        name: 'aria-label'
                     })];
-                let _classDescriptor;
-                let _classExtraInitializers = [];
-                let _classThis;
-                let _classSuper = HTMLElement;
-                let _member_decorators;
-                let _member_initializers = [];
-                let _member_extraInitializers = [];
-                var MyElement = class extends _classSuper {
-                    static { _classThis = this; }
-                    static {
-                        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-                        __esDecorate(this, null, _member_decorators, { kind: "accessor", name: _a, static: false, private: false, access: { has: obj => _a in obj, get: obj => obj[_a], set: (obj, value) => { obj[_a] = value; } }, metadata: _metadata }, _member_initializers, _member_extraInitializers);
-                        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-                        MyElement = _classThis = _classDescriptor.value;
-                        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-                        __runInitializers(_classThis, _classExtraInitializers);
-                    }
-                    #_a_accessor_storage = __runInitializers(this, _member_initializers, true);
-                    get [(_member_decorators = [attr()], _a = __propKey(value))]() { return this.#_a_accessor_storage; }
-                    set [_a](value) { this.#_a_accessor_storage = value; }
-                    constructor() {
-                        super(...arguments);
-                        __runInitializers(this, _member_extraInitializers);
-                    }
-                };
-                return MyElement = _classThis;
-            })();
-            new MyElement();
-        }).to.throw('Cannot handle Symbol property without description');
-    });
+                __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+                __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+                MyElement = _classThis = _classDescriptor.value;
+                if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+                __runInitializers(_classThis, _classExtraInitializers);
+            }
+            #value_accessor_storage = __runInitializers(this, _value_initializers, '');
+            get value() { return this.#value_accessor_storage; }
+            set value(value) { this.#value_accessor_storage = value; }
+            constructor() {
+                super(...arguments);
+                __runInitializers(this, _value_extraInitializers);
+            }
+        };
+        return MyElement = _classThis;
+    })();
+    const el = new MyElement();
+    el.setAttribute('aria-label', 'TEST');
+    document.body.append(el);
+    expect(el.value).to.equal('TEST');
+    el.remove();
 });
 //# sourceMappingURL=attr.test.js.map