@noctuatech/uswds 1.3.2 → 1.3.4

package/target/lib/search/search.element.test.js

@@ -0,0 +1,52 @@
+import './search.element.js';
+import '../input/input.element.js';
+import '../button/button.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-search', () => {
+    it('should be accessible', async () => {
+        const search = await fixture(html `<usa-search name="search">Hello World</usa-search>`);
+        return assert.isAccessible(search);
+    });
+    it('should have default attribute values', async () => {
+        const search = await fixture(html `<usa-search></usa-search>`);
+        assert.equal(search.name, 'search');
+        assert.equal(search.placeholder, 'Search');
+        assert.equal(search.required, false);
+        assert.equal(search.disabled, false);
+        assert.equal(search.autocomplete, 'off');
+        assert.equal(search.value, '');
+    });
+    it('should update attributes when changed', async () => {
+        const search = await fixture(html `<usa-search></usa-search>`);
+        search.name = 'custom-name';
+        search.placeholder = 'Custom Placeholder';
+        search.required = true;
+        search.disabled = true;
+        search.autocomplete = 'on';
+        search.value = 'test value';
+        assert.equal(search.name, 'custom-name');
+        assert.equal(search.placeholder, 'Custom Placeholder');
+        assert.equal(search.required, true);
+        assert.equal(search.disabled, true);
+        assert.equal(search.autocomplete, 'on');
+        assert.equal(search.value, 'test value');
+    });
+    it('should handle form submission', async () => {
+        const search = await fixture(html `<usa-search></usa-search>`);
+        let submitted = false;
+        search.addEventListener('submit', (e) => {
+            e.preventDefault();
+            submitted = true;
+        });
+        const form = search.shadowRoot?.querySelector('form');
+        form?.dispatchEvent(new Event('submit', { bubbles: true, composed: true }));
+        assert.isTrue(submitted);
+    });
+    it('should update value on input change', async () => {
+        const search = await fixture(html `<usa-search></usa-search>`);
+        const input = search.shadowRoot?.querySelector('usa-input');
+        input?.dispatchEvent(new Event('input', { bubbles: true }));
+        assert.equal(search.value, '');
+    });
+});
+//# sourceMappingURL=search.element.test.js.map

package/target/lib/search/search.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"search.element.test.js","sourceRoot":"","sources":["../../../src/lib/search/search.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAKzD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA,sDAAsD,CAAC,CAAC;QAE3G,OAAO,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAElF,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAElF,MAAM,CAAC,IAAI,GAAG,aAAa,CAAC;QAC5B,MAAM,CAAC,WAAW,GAAG,oBAAoB,CAAC;QAC1C,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;QACvB,MAAM,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,MAAM,CAAC,KAAK,GAAG,YAAY,CAAC;QAE5B,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,oBAAoB,CAAC,CAAC;QACvD,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAElF,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACtC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACtD,IAAI,EAAE,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAE5E,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA,6BAA6B,CAAC,CAAC;QAElF,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;QAC5D,KAAK,EAAE,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAE5D,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/select/select.element.d.ts

@@ -1,7 +1,8 @@
-import { type SelectContainer } from "./context.js";
+import '@joist/templating/define.js';
+import { type SelectContainer } from './context.js';
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-select": USASelectElement;
+        'usa-select': USASelectElement;
     }
 }
 export declare class USASelectElement extends HTMLElement implements SelectContainer {
@@ -11,7 +12,7 @@ export declare class USASelectElement extends HTMLElement implements SelectConta
     accessor name: string;
     accessor required: boolean;
     connectedCallback(): void;
-    attributeChangedCallback(): void;
+    onChange(): void;
     onSelectChange(): void;
     addSelectOption(option: HTMLOptionElement): void;
 }

package/target/lib/select/select.element.js

@@ -1,16 +1,19 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { injectable } from "@joist/di";
-import { attr, css, element, html, listen, query } from "@joist/element";
-import { SELECT_CONTEXT } from "./context.js";
+import '@joist/templating/define.js';
+import { injectable } from '@joist/di';
+import { attr, css, element, html, listen, query } from '@joist/element';
+import { bind } from '@joist/templating';
+import { SELECT_CONTEXT } from './context.js';
+import { effect } from '@joist/observable';
 let USASelectElement = (() => {
     let _classDecorators = [injectable({
-            name: "usa-select-ctx",
+            name: 'usa-select-ctx',
             provideSelfAs: [SELECT_CONTEXT],
         }), element({
-            tagName: "usa-select",
+            tagName: 'usa-select',
             shadowDom: [
                 css `:host{display:block;line-height:1.3;position:relative;width:100%;max-width:30rem;margin-bottom:1.5rem}select{font-size:1.06rem;appearance:none;border-width:1px;border-color:#5c5c5c;border-style:solid;border-radius:0;color:#1b1b1b;background-color:#fff;display:block;height:2.5rem;margin-top:.5rem;padding:.5rem;width:100%}select:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}select:disabled{background-color:#fff;border-color:#757575;color:#757575}usa-icon{position:absolute;right:.5rem;bottom:12%;height:1.5rem;width:1.5rem}`,
-                html `<usa-icon icon="unfold_more"></usa-icon><label><div class="label" part="label"><slot></slot></div><select part="select"></select></label>`,
+                html `<usa-icon icon="unfold_more"></usa-icon><label><div class="label" part="label"><slot></slot></div><j-bind props="value,name,required"><select part="select"></select></j-bind></label>`,
             ],
         })];
     let _classDescriptor;
@@ -27,64 +30,60 @@ let USASelectElement = (() => {
     let _required_decorators;
     let _required_initializers = [];
     let _required_extraInitializers = [];
+    let _onChange_decorators;
     let _onSelectChange_decorators;
     var USASelectElement = 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_decorators = [attr()];
-            _required_decorators = [attr()];
-            _onSelectChange_decorators = [listen("change")];
+            _value_decorators = [attr(), bind()];
+            _name_decorators = [attr(), bind()];
+            _required_decorators = [attr(), bind()];
+            _onChange_decorators = [effect()];
+            _onSelectChange_decorators = [listen('change')];
             __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(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
             __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(this, null, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onSelectChange_decorators, { kind: "method", name: "onSelectChange", static: false, private: false, access: { has: obj => "onSelectChange" in obj, get: obj => obj.onSelectChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USASelectElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         static formAssociated = true;
-        #value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ""));
+        #value_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, ''));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
-        #name_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _name_initializers, ""));
+        #name_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _name_initializers, ''));
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
         #required_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _required_initializers, false));
         get required() { return this.#required_accessor_storage; }
         set required(value) { this.#required_accessor_storage = value; }
-        #select = (__runInitializers(this, _required_extraInitializers), query("select"));
+        #select = (__runInitializers(this, _required_extraInitializers), query('select'));
         #internals = this.attachInternals();
         connectedCallback() {
-            this.#select({
-                value: this.value,
-                name: this.name,
-                required: this.required,
-            });
             this.#syncFormState();
         }
-        attributeChangedCallback() {
-            this.#select({
-                value: this.value,
-                name: this.name,
-                required: this.required,
-            });
+        onChange() {
             this.#syncFormState();
         }
         onSelectChange() {
             const select = this.#select();
             this.value = select.value;
-            this.#syncFormState();
         }
         addSelectOption(option) {
             const select = this.#select();
+            if (!this.value && !select.children.length) {
+                this.value = option.value;
+            }
             select.append(option);
         }
-        #syncFormState() {
+        async #syncFormState() {
             const select = this.#select();
             this.#internals.setFormValue(this.value);
             this.#internals.setValidity({});
+            await Promise.resolve();
             if (select.validationMessage) {
                 this.#internals.setValidity({ customError: true }, select.validationMessage, select);
             }

package/target/lib/select/select.element.js.map

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

package/target/lib/select/select.element.test.d.ts

@@ -0,0 +1,2 @@
+import './select.element.js';
+import './select-option/select-option.element.js';

package/target/lib/select/{select.test.js → select.element.test.js}

@@ -1,46 +1,42 @@
-import "./select.element.js";
-import "./select-option/select-option.element.js";
-import { assert, fixture, html } from "@open-wc/testing";
-import { userEvent } from "@testing-library/user-event";
-describe("usa-select", () => {
-    it("should be accessible", async () => {
+import './select.element.js';
+import './select-option/select-option.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+import { userEvent } from '@testing-library/user-event';
+describe('usa-select', () => {
+    it('should be accessible', async () => {
         const el = await fixture(html `<usa-select name="example">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select>`);
         return assert.isAccessible(el);
     });
-    it("should create local select options", async () => {
+    it('should create local select options', async () => {
         const form = await fixture(html `<form><usa-select name="example">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
-        const nativeInputs = form
-            .querySelector("usa-select")
-            ?.shadowRoot?.querySelectorAll("option");
-        assert.deepEqual(Array.from(nativeInputs ?? []).map((input) => input.value), ["first", "second", "third"]);
+        const nativeInputs = form.querySelector('usa-select')?.shadowRoot?.querySelectorAll('option');
+        assert.deepEqual(Array.from(nativeInputs ?? []).map((input) => input.value), ['first', 'second', 'third']);
     });
-    it("should remove select options when options are removed", async () => {
+    it('should remove select options when options are removed', async () => {
         const form = await fixture(html `<form><usa-select name="example">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
-        const options = form.querySelectorAll("usa-select-option");
+        const options = form.querySelectorAll('usa-select-option');
         options[1].remove();
-        const nativeInputs = form
-            .querySelector("usa-select")
-            ?.shadowRoot?.querySelectorAll("option");
-        assert.deepEqual(Array.from(nativeInputs ?? []).map((input) => input.value), ["first", "third"]);
+        const nativeInputs = form.querySelector('usa-select')?.shadowRoot?.querySelectorAll('option');
+        assert.deepEqual(Array.from(nativeInputs ?? []).map((input) => input.value), ['first', 'third']);
     });
-    it("should submit form with default values", async () => {
+    it('should submit form with default values', async () => {
         const form = await fixture(html `<form><usa-select name="example" value="second">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
         const value = new FormData(form);
-        assert.equal(value.get("example"), "second");
+        assert.equal(value.get('example'), 'second');
     });
-    it("should update form value as select value changed", async () => {
+    it('should update form value as select value changed', async () => {
         const form = await fixture(html `<form><usa-select name="example" value="second">Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
-        const select = form.querySelector("usa-select");
-        const nativeSelect = select?.shadowRoot?.querySelector("select");
+        const select = form.querySelector('usa-select');
+        const nativeSelect = select?.shadowRoot?.querySelector('select');
         if (nativeSelect) {
-            await userEvent.selectOptions(nativeSelect, "third");
+            await userEvent.selectOptions(nativeSelect, 'third');
         }
         const value = new FormData(form);
-        assert.equal(value.get("example"), "third");
+        assert.equal(value.get('example'), 'third');
     });
-    it("should not submit when not valid", async () => {
-        const form = await fixture(html `<form><usa-select name="example" required>Hello World<usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
+    it('should not submit when not valid', async () => {
+        const form = await fixture(html `<form><usa-select id="TEST" name="example" required>Hello World<usa-select-option value="">-Select One -</usa-select-option><usa-select-option value="first">First</usa-select-option><usa-select-option value="second">Second</usa-select-option><usa-select-option value="third">Third</usa-select-option></usa-select></form>`);
         assert.equal(form.checkValidity(), false);
     });
 });
-//# sourceMappingURL=select.test.js.map
+//# sourceMappingURL=select.element.test.js.map

package/target/lib/select/select.element.test.js.map

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

package/target/lib/services/{icon.service.test.js → icon.service.element.test.js}

@@ -49,4 +49,4 @@ describe('IconService', () => {
         assert.equal(callCount, 1);
     });
 });
-//# sourceMappingURL=icon.service.test.js.map
+//# sourceMappingURL=icon.service.element.test.js.map

package/target/lib/services/icon.service.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.service.element.test.js","sourceRoot":"","sources":["../../../src/lib/services/icon.service.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,IAAI,SAAS,GAAG,CAAC,CAAC;QAElB,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC;YACvB,SAAS,EAAE;gBACT;oBACE,WAAW;oBACX;wBACE,GAAG,EAAE,KAAM,SAAQ,WAAW;4BAC5B,KAAK,CAAC,KAAK;gCACT,SAAS,EAAE,CAAC;gCACZ,OAAO,IAAI,QAAQ,CAAC,aAAa,CAAC,CAAC;4BACrC,CAAC;yBACF;qBACF;iBACF;aACF;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAErC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,MAAa,CAAC,CAAC;QAE9C,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,IAAI,SAAS,GAAG,CAAC,CAAC;QAElB,MAAM,GAAG,GAAG,IAAI,QAAQ,CAAC;YACvB,SAAS,EAAE;gBACT;oBACE,WAAW;oBACX;wBACE,GAAG,EAAE,KAAM,SAAQ,WAAW;4BAC5B,KAAK,CAAC,KAAK;gCACT,SAAS,EAAE,CAAC;gCACZ,OAAO,IAAI,QAAQ,CAAC,aAAa,CAAC,CAAC;4BACrC,CAAC;yBACF;qBACF;iBACF;aACF;SACF,CAAC,CAAC;QAEH,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAErC,MAAM,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAExC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAEpD,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAClC,MAAM,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/side-nav/side-nav.element.test.d.ts

@@ -0,0 +1,3 @@
+import '../link/link.element.js';
+import './side-nav.element.js';
+import './side-nav-item/side-nav-item.element.js';

package/target/lib/side-nav/{side-nav.test.js → side-nav.element.test.js}

@@ -1,17 +1,17 @@
-import "../link/link.element.js";
-import "./side-nav.element.js";
-import "./side-nav-item/side-nav-item.element.js";
-import { assert, fixture, html } from "@open-wc/testing";
-describe("usa-side-nav", () => {
-    it("should be accessible", async () => {
+import '../link/link.element.js';
+import './side-nav.element.js';
+import './side-nav-item/side-nav-item.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-side-nav', () => {
+    it('should be accessible', async () => {
         const sideNav = await fixture(html `<usa-side-nav><usa-side-nav-item current><usa-link href="#">Current Page</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Child</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item></usa-side-nav>`);
         return assert.isAccessible(sideNav);
     });
-    it("should set child padding correctly", async () => {
+    it('should set child padding correctly', async () => {
         const sideNav = await fixture(html `<usa-side-nav><usa-side-nav-item current><usa-link href="#">Current Page</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Child</usa-link><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children" current><usa-link href="#">Grandchild</usa-link></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Grandchild</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item slot="children"><usa-link href="#">Child</usa-link></usa-side-nav-item></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item><usa-side-nav-item><usa-link href="#">Parent</usa-link></usa-side-nav-item></usa-side-nav>`);
-        const items = sideNav.querySelectorAll("usa-side-nav-item");
-        assert.equal(getComputedStyle(items[1]).getPropertyValue("--usa-nav-item-padding-left"), "2rem");
-        assert.equal(getComputedStyle(items[3]).getPropertyValue("--usa-nav-item-padding-left"), "3rem");
+        const items = sideNav.querySelectorAll('usa-side-nav-item');
+        assert.equal(getComputedStyle(items[1]).getPropertyValue('--usa-nav-item-padding-left'), '2rem');
+        assert.equal(getComputedStyle(items[3]).getPropertyValue('--usa-nav-item-padding-left'), '3rem');
     });
 });
-//# sourceMappingURL=side-nav.test.js.map
+//# sourceMappingURL=side-nav.element.test.js.map

package/target/lib/side-nav/side-nav.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-nav.element.test.js","sourceRoot":"","sources":["../../../src/lib/side-nav/side-nav.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,OAAO,GAAG,MAAM,OAAO,CAAoB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCpD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;QAClD,MAAM,OAAO,GAAG,MAAM,OAAO,CAAoB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsCpD,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,OAAO,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAE5D,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,EAAE,MAAM,CAAC,CAAC;QAEjG,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,EAAE,MAAM,CAAC,CAAC;IACnG,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/step-indicator/step/step.element.d.ts

@@ -1,10 +1,10 @@
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-step": USAStepIndicatorStepElement;
+        'usa-step': USAStepIndicatorStepElement;
     }
 }
 export declare class USAStepIndicatorStepElement extends HTMLElement {
-    accessor state: "complete" | "current" | "";
+    accessor state: 'complete' | 'current' | '';
     accessor role: string;
     onStateAttrChanged(): void;
 }

package/target/lib/step-indicator/step/step.element.js

@@ -1,10 +1,10 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, attrChanged, css, element, html } from "@joist/element";
+import { attr, attrChanged, css, element, html } from '@joist/element';
 let USAStepIndicatorStepElement = (() => {
     let _classDecorators = [element({
-            tagName: "usa-step",
+            tagName: 'usa-step',
             shadowDom: [
-                css `:host{color:#5c5c5c;display:block;flex:1 1 0%;position:relative;counter-increment:usa-step-indicator}:host([counter]):after{content:counter(usa-step-indicator);height:2.5rem;border-radius:99rem;width:2.5rem;background-color:#fff;box-shadow:inset 0 0 0 .25rem #919191,0 0 0 .25rem #fff;color:#5c5c5c;display:flex;align-items:center;justify-content:center;font-weight:700;left:0;line-height:.9;padding:calc((2.5rem - 2ex * .9) * .5);position:absolute;z-index:100;top:0;transform:translateY(-40%);box-sizing:border-box}:host([state=complete]){color:#162e51}:host([state=complete])::before{background-color:#162e51}:host([state=current]){color:#005ea2;font-weight:700}:host([state=current])::before{background-color:#005ea2}:host:before{background-color:#919191;content:"";display:block;height:.5rem}.label{display:block;font-size:1.06rem;margin-top:.5rem;padding-right:2rem;text-align:left}:host([counter]) .label{margin-top:1.5rem}:host([counter][state=complete]):after{background-color:#162e51;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter][state=current]):after{background-color:#005ea2;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter=small]):after{height:1.5rem;width:1.5rem;font-size:.93rem}:host([counter]:last-child):before{width:0}`,
+                css `:host{color:#5c5c5c;display:block;flex:1 1 0%;position:relative;counter-increment:usa-step-indicator}:host([counter]):after{content:counter(usa-step-indicator);height:2.5rem;border-radius:99rem;width:2.5rem;background-color:#fff;box-shadow:inset 0 0 0 .25rem #919191,0 0 0 .25rem #fff;color:#5c5c5c;display:flex;align-items:center;justify-content:center;font-weight:700;left:0;line-height:.9;padding:calc((2.5rem - 2ex * .9) * .5);position:absolute;z-index:100;top:0;transform:translateY(-40%);box-sizing:border-box}:host([state=complete]){color:#162e51}:host([state=complete])::before{background-color:#162e51}:host([state=current]){color:#005ea2;font-weight:700}:host([state=current])::before{background-color:#005ea2}:host:before{background-color:#919191;content:'';display:block;height:.5rem}.label{display:block;font-size:1.06rem;margin-top:.5rem;padding-right:2rem;text-align:left}:host([counter]) .label{margin-top:1.5rem}:host([counter][state=complete]):after{background-color:#162e51;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter][state=current]):after{background-color:#005ea2;box-shadow:0 0 0 .25rem #fff;color:#fff}:host([counter=small]):after{height:1.5rem;width:1.5rem;font-size:.93rem}:host([counter]:last-child):before{width:0}`,
                 html `<div class="label"><slot></slot></div>`,
             ],
         })];
@@ -26,7 +26,7 @@ let USAStepIndicatorStepElement = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _state_decorators = [attr()];
             _role_decorators = [attr()];
-            _onStateAttrChanged_decorators = [attrChanged("state")];
+            _onStateAttrChanged_decorators = [attrChanged('state')];
             __esDecorate(this, null, _state_decorators, { kind: "accessor", name: "state", static: false, private: false, access: { has: obj => "state" in obj, get: obj => obj.state, set: (obj, value) => { obj.state = value; } }, metadata: _metadata }, _state_initializers, _state_extraInitializers);
             __esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
             __esDecorate(this, null, _onStateAttrChanged_decorators, { kind: "method", name: "onStateAttrChanged", static: false, private: false, access: { has: obj => "onStateAttrChanged" in obj, get: obj => obj.onStateAttrChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -35,15 +35,15 @@ let USAStepIndicatorStepElement = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #state_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _state_initializers, ""));
+        #state_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _state_initializers, ''));
         get state() { return this.#state_accessor_storage; }
         set state(value) { this.#state_accessor_storage = value; }
-        #role_accessor_storage = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _role_initializers, "listitem"));
+        #role_accessor_storage = (__runInitializers(this, _state_extraInitializers), __runInitializers(this, _role_initializers, 'listitem'));
         get role() { return this.#role_accessor_storage; }
         set role(value) { this.#role_accessor_storage = value; }
         onStateAttrChanged() {
-            if (this.state === "current") {
-                this.ariaCurrent = "step";
+            if (this.state === 'current') {
+                this.ariaCurrent = 'step';
             }
         }
         constructor() {

package/target/lib/step-indicator/step-indicator.element.test.d.ts

@@ -0,0 +1,2 @@
+import './step-indicator.element.js';
+import './step/step.element.js';

package/target/lib/step-indicator/{step-indicator.test.js → step-indicator.element.test.js}

@@ -1,10 +1,10 @@
-import "./step-indicator.element.js";
-import "./step/step.element.js";
-import { assert, fixture, html } from "@open-wc/testing";
-describe("usa-step-indicator", () => {
-    it("should be accessible", async () => {
+import './step-indicator.element.js';
+import './step/step.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-step-indicator', () => {
+    it('should be accessible', async () => {
         const stepIndicator = await fixture(html `<usa-step-indicator><usa-step state="complete" counter="on">Personal information</usa-step><usa-step state="complete" counter="on">Household status</usa-step><usa-step state="current" counter="on">Supporting documents</usa-step><usa-step counter="on">Signature</usa-step><usa-step counter="on">Review and submit</usa-step></usa-step-indicator>`);
         return assert.isAccessible(stepIndicator);
     });
 });
-//# sourceMappingURL=step-indicator.test.js.map
+//# sourceMappingURL=step-indicator.element.test.js.map

package/target/lib/step-indicator/step-indicator.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"step-indicator.element.test.js","sourceRoot":"","sources":["../../../src/lib/step-indicator/step-indicator.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,6BAA6B,CAAC;AACrC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,aAAa,GAAG,MAAM,OAAO,CAA0B,IAAI,CAAA;;;;;;;;KAQhE,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/summary-box/summary-box.element.test.d.ts

@@ -0,0 +1 @@
+import './summary-box.element.js';

package/target/lib/summary-box/summary-box.element.test.js

@@ -0,0 +1,9 @@
+import './summary-box.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-summary-box', () => {
+    it('should be accessible', async () => {
+        const summaryBox = await fixture(html `<usa-summary-box>Hello World</usa-summary-box>`);
+        return assert.isAccessible(summaryBox);
+    });
+});
+//# sourceMappingURL=summary-box.element.test.js.map

package/target/lib/summary-box/summary-box.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"summary-box.element.test.js","sourceRoot":"","sources":["../../../src/lib/summary-box/summary-box.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,UAAU,GAAG,MAAM,OAAO,CAAuB,IAAI,CAAA,kDAAkD,CAAC,CAAC;QAE/G,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/tag/tag.element.test.d.ts

@@ -0,0 +1 @@
+import './tag.element.js';

package/target/lib/tag/tag.element.test.js

@@ -0,0 +1,9 @@
+import './tag.element.js';
+import { assert, fixture, html } from '@open-wc/testing';
+describe('usa-tag', () => {
+    it('should be accessible', async () => {
+        const tag = await fixture(html `<usa-tag>Hello World</usa-tag>`);
+        return assert.isAccessible(tag);
+    });
+});
+//# sourceMappingURL=tag.element.test.js.map

package/target/lib/tag/tag.element.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.element.test.js","sourceRoot":"","sources":["../../../src/lib/tag/tag.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,GAAG,GAAG,MAAM,OAAO,CAAgB,IAAI,CAAA,kCAAkC,CAAC,CAAC;QAEjF,OAAO,MAAM,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/textarea/textarea.element.d.ts

@@ -1,3 +1,4 @@
+import '@joist/templating/define.js';
 declare global {
     interface HTMLElementTagNameMap {
         'usa-textarea': USATextareaElement;
@@ -10,9 +11,8 @@ export declare class USATextareaElement extends HTMLElement {
     accessor autocomplete: AutoFill;
     accessor placeholder: string;
     accessor required: boolean;
+    accessor autofocus: boolean;
     accessor value: string;
-    onReady(): void;
-    attributeChangedCallback(): void;
     connectedCallback(): void;
     onChange(): void;
     onInputChange(): void;

package/target/lib/textarea/textarea.element.js

@@ -1,12 +1,14 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html, listen, query, ready } from '@joist/element';
-import { effect, observe } from '@joist/observable';
+import '@joist/templating/define.js';
+import { attr, css, element, html, listen, query } from '@joist/element';
+import { effect } from '@joist/observable';
+import { bind } from '@joist/templating';
 let USATextareaElement = (() => {
     let _classDecorators = [element({
             tagName: 'usa-textarea',
             shadowDom: [
                 css `*{box-sizing:border-box}:host{font-size:1.06rem;line-height:1.3;display:flex;flex-direction:column;font-weight:400;margin-bottom:1.5rem;max-width:30rem;position:relative;height:9lh;gap:.5rem}textarea{font-family:inherit;font-size:inherit;border-radius:0;color:#1b1b1b;display:block;padding:.5rem;border-width:1px;border-color:#5c5c5c;border-style:solid;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;resize:none;flex-grow:1}textarea:not(:disabled):focus{outline:.25rem solid #2491ff;outline-offset:0}textarea:disabled{background-color:#fff;border-color:#757575;color:#757575}`,
-                html `<label for="textarea" part="label"><slot></slot></label> <textarea id="textarea" part="textarea"></textarea>`,
+                html `<j-bind attrs="for:name"><label part="label"><slot></slot></label></j-bind><j-bind props="name,placeholder,autocomplete,required,value,id:name"><textarea id="textarea" part="textarea"></textarea></j-bind>`,
             ],
         })];
     let _classDescriptor;
@@ -26,32 +28,34 @@ let USATextareaElement = (() => {
     let _required_decorators;
     let _required_initializers = [];
     let _required_extraInitializers = [];
+    let _autofocus_decorators;
+    let _autofocus_initializers = [];
+    let _autofocus_extraInitializers = [];
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
-    let _onReady_decorators;
     let _onChange_decorators;
     let _onInputChange_decorators;
     var USATextareaElement = class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _name_decorators = [attr()];
-            _autocomplete_decorators = [attr()];
-            _placeholder_decorators = [attr()];
-            _required_decorators = [attr()];
+            _name_decorators = [attr(), bind()];
+            _autocomplete_decorators = [attr(), bind()];
+            _placeholder_decorators = [attr(), bind()];
+            _required_decorators = [attr(), bind()];
+            _autofocus_decorators = [attr(), bind()];
             _value_decorators = [attr({
                     reflect: false,
-                }), observe()];
-            _onReady_decorators = [ready()];
+                }), bind()];
             _onChange_decorators = [effect()];
             _onInputChange_decorators = [listen('input')];
             __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
             __esDecorate(this, null, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
             __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
             __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(this, null, _autofocus_decorators, { kind: "accessor", name: "autofocus", static: false, private: false, access: { has: obj => "autofocus" in obj, get: obj => obj.autofocus, set: (obj, value) => { obj.autofocus = value; } }, metadata: _metadata }, _autofocus_initializers, _autofocus_extraInitializers);
             __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(this, null, _onReady_decorators, { kind: "method", name: "onReady", static: false, private: false, access: { has: obj => "onReady" in obj, get: obj => obj.onReady }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _onInputChange_decorators, { kind: "method", name: "onInputChange", static: false, private: false, access: { has: obj => "onInputChange" in obj, get: obj => obj.onInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
@@ -71,27 +75,18 @@ let USATextareaElement = (() => {
         #required_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _required_initializers, false));
         get required() { return this.#required_accessor_storage; }
         set required(value) { this.#required_accessor_storage = value; }
-        #value_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _value_initializers, ''));
+        #autofocus_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _autofocus_initializers, false));
+        get autofocus() { return this.#autofocus_accessor_storage; }
+        set autofocus(value) { this.#autofocus_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _autofocus_extraInitializers), __runInitializers(this, _value_initializers, ''));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
         #internals = (__runInitializers(this, _value_extraInitializers), this.attachInternals());
         #input = query('textarea');
-        onReady() {
-            this.#input({ autofocus: this.autofocus });
-        }
-        attributeChangedCallback() {
-            this.#input({
-                name: this.name,
-                placeholder: this.placeholder,
-                autocomplete: this.autocomplete,
-                required: this.required,
-            });
-        }
         connectedCallback() {
             this.#syncFormState();
         }
         onChange() {
-            this.#input({ value: this.value });
             this.#syncFormState();
         }
         onInputChange() {