@noctuatech/uswds 0.0.22 → 0.0.24

package/target/lib/input/input.element.js

@@ -21,6 +21,7 @@ let USATextInputElement = (() => {
         font-weight: 400;
         max-width: 30rem;
         margin-bottom: 1.5rem;
+        position: relative;
       }
 
       input {
@@ -42,12 +43,43 @@ let USATextInputElement = (() => {
         outline: 0.25rem solid #2491ff;
         outline-offset: 0;
       }
+
+      slot[name="detail"]::slotted(*) {
+        color: #757575;
+      }
+
+      slot[name="detail"]::slotted(usa-icon) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+
+      slot[name="detail"] {
+        display: block;
+        position: absolute;
+        bottom: 0.21rem;
+        left: 0.5rem;
+      }
+
+      :host([detail="pfx"]) input {
+        padding-left: 2.5rem;
+      }
+
+      :host([detail="sfx"]) input {
+        padding-right: 2.5rem;
+      }
+
+      :host([detail="sfx"]) slot[name="detail"] {
+        right: 0.5rem;
+        left: auto;
+      }
     `,
                 html `
       <label>
+        <slot name="detail"></slot>
+
         <slot></slot>
 
-        <input />
+        <input tabindex="0" />
       </label>
     `,
             ],
@@ -66,6 +98,12 @@ let USATextInputElement = (() => {
     let _placeholder_decorators;
     let _placeholder_initializers = [];
     let _placeholder_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _detail_decorators;
+    let _detail_initializers = [];
+    let _detail_extraInitializers = [];
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
@@ -85,6 +123,10 @@ let USATextInputElement = (() => {
             _name_decorators = [attr()];
             _autocomplete_decorators = [attr()];
             _placeholder_decorators = [attr()];
+            _required_decorators = [attr()];
+            _detail_decorators = [attr({
+                    observed: false,
+                })];
             _value_decorators = [attr({
                     reflect: false,
                 }), observe()];
@@ -96,6 +138,8 @@ let USATextInputElement = (() => {
             __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, _detail_decorators, { kind: "accessor", name: "detail", static: false, private: false, access: { has: obj => "detail" in obj, get: obj => obj.detail, set: (obj, value) => { obj.detail = value; } }, metadata: _metadata }, _detail_initializers, _detail_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, _selectionStart_decorators, { kind: "accessor", name: "selectionStart", static: false, private: false, access: { has: obj => "selectionStart" in obj, get: obj => obj.selectionStart, set: (obj, value) => { obj.selectionStart = value; } }, metadata: _metadata }, _selectionStart_initializers, _selectionStart_extraInitializers);
             __esDecorate(this, null, _selectionEnd_decorators, { kind: "accessor", name: "selectionEnd", static: false, private: false, access: { has: obj => "selectionEnd" in obj, get: obj => obj.selectionEnd, set: (obj, value) => { obj.selectionEnd = value; } }, metadata: _metadata }, _selectionEnd_initializers, _selectionEnd_extraInitializers);
@@ -116,7 +160,13 @@ let USATextInputElement = (() => {
         #placeholder_accessor_storage = (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _placeholder_initializers, ""));
         get placeholder() { return this.#placeholder_accessor_storage; }
         set placeholder(value) { this.#placeholder_accessor_storage = value; }
-        #value_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        #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; }
+        #detail_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _detail_initializers, ""));
+        get detail() { return this.#detail_accessor_storage; }
+        set detail(value) { this.#detail_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _detail_extraInitializers), __runInitializers(this, _value_initializers, ""));
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
         #selectionStart_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selectionStart_initializers, null));
@@ -131,18 +181,25 @@ let USATextInputElement = (() => {
             const input = this.#input();
             input.autofocus = this.autofocus;
         }
-        onChange() {
+        connectedCallback() {
+            this.#syncFormState();
+        }
+        onChange(changes) {
             const input = this.#input();
             input.value = this.value;
-            input.selectionStart = this.selectionStart;
-            input.selectionEnd = this.selectionEnd;
+            if (changes.has("selectionStart")) {
+                input.selectionStart = this.selectionStart;
+            }
+            if (changes.has("selectionEnd")) {
+                input.selectionEnd = this.selectionEnd;
+            }
+            this.#syncFormState();
         }
         onInputChange() {
             const input = this.#input();
             this.value = input.value;
             this.selectionStart = input.selectionStart;
             this.selectionEnd = input.selectionEnd;
-            this.#internals.setFormValue(input.value);
         }
         attributeChangedCallback(attr) {
             const input = this.#input();
@@ -156,10 +213,16 @@ let USATextInputElement = (() => {
                 case "name":
                     input.name = this.name;
                     break;
-                case "value":
-                    input.value = this.value;
-                    this.#internals.setFormValue(this.value);
-                    break;
+            }
+        }
+        #syncFormState() {
+            const input = this.#input();
+            this.#internals.setFormValue(input.value);
+            if (this.required && !input.value) {
+                this.#internals.setValidity({ valueMissing: true }, "Required", input);
+            }
+            else {
+                this.#internals.setValidity({});
             }
         }
         static {

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

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

package/target/lib/input/input.stories.js

@@ -6,7 +6,9 @@ const meta = {
     render() {
         return html `
       <form>
-        <usa-input name="fname" value="Danny" autocomplete="off">
+        <usa-input name="fname" value="Danny" autocomplete="off" detail="pfx">
+          <usa-icon icon="credit_card" slot="detail"></usa-icon>
+
           First name
         </usa-input>
 

package/target/lib/input/input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../../src/lib/input/input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}
+{"version":3,"file":"input.stories.js","sourceRoot":"","sources":["../../../src/lib/input/input.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;KAUV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CAC2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC"}

package/target/lib/input/input.test.js

@@ -1,6 +1,6 @@
 import "./input.element.js";
-import { fixture, html, assert } from "@open-wc/testing";
 import { fireEvent } from "@noctuatech-uswds/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-input", () => {
     it("should be accessible", async () => {
         const form = await fixture(html `
@@ -28,11 +28,23 @@ describe("usa-input", () => {
       </form>
     `);
         const input = form.querySelector("usa-input");
-        const nativeInput = input.shadowRoot.querySelector("input");
-        nativeInput.value = "Bar";
-        await fireEvent.input(nativeInput, { bubbles: true });
+        const nativeInput = input?.shadowRoot?.querySelector("input");
+        if (nativeInput) {
+            nativeInput.value = "Bar";
+            await fireEvent.input(nativeInput, { bubbles: true });
+        }
         const value = new FormData(form);
         assert.equal(value.get("fname"), "Bar");
     });
+    it("should not submit when not valid", async () => {
+        const form = await fixture(html `
+      <form>
+        <usa-input name="fname" required>Hello World</usa-input>
+
+        <button>Submit</button>
+      </form>
+    `);
+        assert.equal(form.checkValidity(), false);
+    });
 });
 //# sourceMappingURL=input.test.js.map

package/target/lib/input/input.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.test.js","sourceRoot":"","sources":["../../../src/lib/input/input.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;KAE/C,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAE,CAAC;QAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QAC9D,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;QAE1B,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEtD,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"input.test.js","sourceRoot":"","sources":["../../../src/lib/input/input.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;KAE/C,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC9C,MAAM,WAAW,GAAG,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAE9D,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;YAE1B,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACxD,CAAC;QAED,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/input-mask/format.js

@@ -14,7 +14,7 @@ export function format(value, pattern) {
     const chars = raw.split("");
     let count = 0;
     let formatted = "";
-    for (var i = 0; i < pattern.length; i++) {
+    for (let i = 0; i < pattern.length; i++) {
         const patternChar = pattern[i];
         const char = chars[count];
         if (char && patternChar) {

package/target/lib/input-mask/input-mask.element.d.ts

@@ -7,6 +7,6 @@ export declare class USAInputMaskElement extends HTMLElement {
     #private;
     accessor mask: string;
     connectedCallback(): void;
-    onInput(e: Event): Promise<void>;
+    onInput(e: Event): void;
     onKeyDown(e: KeyboardEvent): void;
 }

package/target/lib/input-mask/input-mask.element.js

@@ -1,6 +1,6 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { attr, css, element, html, listen } from "@joist/element";
-import { format, PATTERN_CHARS, PatternChar, REG_EXPS } from "./format.js";
+import { PATTERN_CHARS, PatternChar, REG_EXPS, format } from "./format.js";
 let USAInputMaskElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-input-mask",
@@ -42,12 +42,14 @@ let USAInputMaskElement = (() => {
         get mask() { return this.#mask_accessor_storage; }
         set mask(value) { this.#mask_accessor_storage = value; }
         connectedCallback() {
-            for (let input of this.querySelectorAll("[mask]")) {
+            for (const input of this.querySelectorAll("[mask]")) {
                 const { formatted } = format(input.value, this.#getMaskFor(input));
-                input.value = formatted;
+                if (formatted) {
+                    input.value = formatted;
+                }
             }
         }
-        async onInput(e) {
+        onInput(e) {
             const input = e.target;
             const selectionStart = input.selectionStart || 0;
             const prev = input.value;
@@ -65,9 +67,6 @@ let USAInputMaskElement = (() => {
                 input.selectionStart = selectionStart;
                 input.selectionEnd = selectionStart;
             }
-            if (prev !== input.value) {
-                input.dispatchEvent(new Event("input", { bubbles: true }));
-            }
         }
         onKeyDown(e) {
             const input = e.target;

package/target/lib/input-mask/input-mask.element.js.map

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

package/target/lib/input-mask/input-mask.test.js

@@ -42,7 +42,7 @@ describe("usa-input-mask", () => {
       </usa-input-mask>
     `);
         const input = el.querySelector("input");
-        assert.equal(input.value, "(123) 456-7890");
+        assert.equal(input?.value, "(123) 456-7890");
     });
     it("should update value when on input event", async () => {
         const el = await fixture(html `
@@ -51,9 +51,11 @@ describe("usa-input-mask", () => {
       </usa-input-mask>
     `);
         const input = el.querySelector("input");
-        input.value = "8888888888";
-        input.dispatchEvent(new Event("input", { bubbles: true }));
-        assert.equal(input.value, "(888) 888-8888");
+        if (input) {
+            input.value = "8888888888";
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        assert.equal(input?.value, "(888) 888-8888");
     });
 });
 describe("usa-input-mask with usa-input", () => {
@@ -64,7 +66,7 @@ describe("usa-input-mask with usa-input", () => {
       </usa-input-mask>
     `);
         const input = el.querySelector("usa-input");
-        assert.equal(input.value, "(123) 456-7890");
+        assert.equal(input?.value, "(123) 456-7890");
     });
     it("should update value when on input event", async () => {
         const el = await fixture(html `
@@ -77,9 +79,11 @@ describe("usa-input-mask with usa-input", () => {
       </usa-input-mask>
     `);
         const input = el.querySelector("usa-input");
-        input.value = "8888888888";
-        input.dispatchEvent(new Event("input", { bubbles: true }));
-        assert.equal(input.value, "(888) 888-8888");
+        if (input) {
+            input.value = "8888888888";
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+        }
+        assert.equal(input?.value, "(888) 888-8888");
     });
 });
 //# sourceMappingURL=input-mask.test.js.map

package/target/lib/input-mask/input-mask.test.js.map

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

package/target/lib/modal/modal-close/modal-close.test.js

@@ -1,5 +1,5 @@
 import "./modal-close.element.js";
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal-close", () => {
     it("should be accessible", async () => {
         const modalClose = await fixture(html `

package/target/lib/modal/modal-close/modal-close.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-close.test.js","sourceRoot":"","sources":["../../../../src/lib/modal/modal-close/modal-close.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,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;;KAE1D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"modal-close.test.js","sourceRoot":"","sources":["../../../../src/lib/modal/modal-close/modal-close.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;;KAE1D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/modal/modal-heading/modal-heading.test.js

@@ -1,5 +1,5 @@
 import "./modal-heading.element.js";
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal-heading", () => {
     it("should be accessible", async () => {
         const modalHeading = await fixture(html `

package/target/lib/modal/modal-heading/modal-heading.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-heading.test.js","sourceRoot":"","sources":["../../../../src/lib/modal/modal-heading/modal-heading.test.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,YAAY,GAAG,MAAM,OAAO,CAAyB,IAAI,CAAA;;KAE9D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"modal-heading.test.js","sourceRoot":"","sources":["../../../../src/lib/modal/modal-heading/modal-heading.test.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,YAAY,GAAG,MAAM,OAAO,CAAyB,IAAI,CAAA;;KAE9D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/modal/modal.test.js

@@ -1,7 +1,7 @@
 import "./modal.element.js";
 import "./modal-heading/modal-heading.element.js";
 import "./modal-close/modal-close.element.js";
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-modal", () => {
     it("should be accessible", async () => {
         const modal = await fixture(html `

package/target/lib/modal/modal.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.test.js","sourceRoot":"","sources":["../../../src/lib/modal/modal.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0CAA0C,CAAC;AAClD,OAAO,sCAAsC,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;;;;;KAUhD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"modal.test.js","sourceRoot":"","sources":["../../../src/lib/modal/modal.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0CAA0C,CAAC;AAClD,OAAO,sCAAsC,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;;;;;KAUhD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/radio/context.d.ts

@@ -0,0 +1,7 @@
+import { StaticToken } from "@joist/di";
+export interface RadioContainer extends Node {
+    name: string;
+    value: string;
+    addRadioOption(el: HTMLElement): void;
+}
+export declare const RADIO_CTX: StaticToken<RadioContainer>;

package/target/lib/radio/context.js

@@ -0,0 +1,3 @@
+import { StaticToken } from "@joist/di";
+export const RADIO_CTX = new StaticToken("RADIO_CTX");
+//# sourceMappingURL=context.js.map

package/target/lib/radio/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/lib/radio/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAQxC,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,WAAW,CAAiB,WAAW,CAAC,CAAC"}

package/target/lib/radio/radio-option/radio-option.element.d.ts

@@ -6,11 +6,7 @@ declare global {
 export declare class USARadioOptionElement extends HTMLElement {
     #private;
     accessor value: string;
-    accessor name: string;
-    accessor checked: boolean;
-    readonly radio: HTMLLabelElement;
-    constructor();
     attributeChangedCallback(): void;
-    connectedCallback(): void;
+    onInjected(): void;
     disconnectedCallback(): void;
 }

package/target/lib/radio/radio-option/radio-option.element.js

@@ -1,7 +1,11 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html } from "@joist/element";
+import { attr, css, element, html, query } from "@joist/element";
+import { inject, injectable, injected } from "@joist/di";
+import { RADIO_CTX } from "../context.js";
 let USARadioOptionElement = (() => {
-    let _classDecorators = [element({
+    let _classDecorators = [injectable({
+            name: "usa-radio-option-ctx",
+        }), element({
             tagName: "usa-radio-option",
             shadowDom: [
                 css `
@@ -11,66 +15,72 @@ let USARadioOptionElement = (() => {
         margin-top: 0.05rem;
       }
     `,
-                html `<slot></slot>`,
+                html `
+      <!-- This label will be moved to the shadow dom of its parent -->
+      <label>
+        <input type="radio" tabindex="0" />
+        <slot name="reserved"></slot>
+      </label>
+
+      <slot></slot>
+    `,
             ],
         })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
-    let _name_decorators;
-    let _name_initializers = [];
-    let _name_extraInitializers = [];
-    let _checked_decorators;
-    let _checked_initializers = [];
-    let _checked_extraInitializers = [];
+    let _onInjected_decorators;
     var USARadioOptionElement = 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()];
-            _checked_decorators = [attr()];
+            _onInjected_decorators = [injected()];
             __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, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
+            __esDecorate(this, null, _onInjected_decorators, { kind: "method", name: "onInjected", static: false, private: false, access: { has: obj => "onInjected" in obj, get: obj => obj.onInjected }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USARadioOptionElement = _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, "");
+        #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, ""));
-        get name() { return this.#name_accessor_storage; }
-        set name(value) { this.#name_accessor_storage = value; }
-        #checked_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _checked_initializers, false));
-        get checked() { return this.#checked_accessor_storage; }
-        set checked(value) { this.#checked_accessor_storage = value; }
-        radio = (__runInitializers(this, _checked_extraInitializers), document.createElement("label"));
-        #input = document.createElement("input");
-        #slotEl = document.createElement("slot");
-        constructor() {
-            super();
-            this.#input.type = "radio";
-            this.radio.append(this.#input, this.#slotEl);
-        }
+        #label = (__runInitializers(this, _value_extraInitializers), query("label"));
+        #input = query("input");
+        #slot = query("slot");
+        #radio = inject(RADIO_CTX);
+        #observer = new MutationObserver(() => {
+            const input = this.#input();
+            const radio = this.#radio();
+            input.name = radio.name;
+            input.checked = radio.value === this.value;
+        });
         attributeChangedCallback() {
+            const input = this.#input();
+            const slot = this.#slot();
             this.slot = this.value;
-            this.#input.name = this.name;
-            this.#input.value = this.value;
-            this.#input.checked = this.checked;
-            this.#slotEl.name = this.value;
+            slot.name = this.value;
+            input.value = this.value;
         }
-        connectedCallback() {
-            this.dispatchEvent(new Event("usa::radio::option::added", { bubbles: true }));
+        onInjected() {
+            const input = this.#input();
+            const radio = this.#radio();
+            radio.addRadioOption(this.#label());
+            input.name = radio.name;
+            input.checked = radio.value === this.value;
+            this.#observer.observe(radio, {
+                attributeFilter: ["value", "name"],
+            });
         }
         disconnectedCallback() {
-            this.radio.remove();
+            this.#label().remove();
+            this.#observer.disconnect();
         }
     };
     return USARadioOptionElement = _classThis;

package/target/lib/radio/radio-option/radio-option.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-option.element.js","sourceRoot":"","sources":["../../../../src/lib/radio/radio-option/radio-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAqB7C,qBAAqB;4BAbjC,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;KAMF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACyC,WAAW;;;;;;;;;;qCAAnB,SAAQ,WAAW;;;;iCACnD,IAAI,EAAE;gCAGN,IAAI,EAAE;mCAGN,IAAI,EAAE;YALP,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAGpB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAGnB,0KAAS,OAAO,6BAAP,OAAO,yFAAS;YAR3B,6KA0CC;;;YA1CY,uDAAqB;;QAEhC,uEAAiB,EAAE,EAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAGpB,yHAAgB,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAGnB,8HAAmB,KAAK,GAAC;QAAzB,IAAS,OAAO,6CAAS;QAAzB,IAAS,OAAO,mDAAS;QAEhB,KAAK,yDAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,EAAC;QAExC,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACzC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAElD;YACE,KAAK,EAAE,CAAC;YAER,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,OAAO,CAAC;YAE3B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAC/C,CAAC;QAED,wBAAwB;YACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YAEvB,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAEnC,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,CAAC;QAED,iBAAiB;YACf,IAAI,CAAC,aAAa,CAChB,IAAI,KAAK,CAAC,2BAA2B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAC1D,CAAC;QACJ,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QACtB,CAAC;;;;SAzCU,qBAAqB"}
+{"version":3,"file":"radio-option.element.js","sourceRoot":"","sources":["../../../../src/lib/radio/radio-option/radio-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;IAgC7B,qBAAqB;4BAxBjC,UAAU,CAAC;YACV,IAAI,EAAE,sBAAsB;SAC7B,CAAC,EACD,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;KAMF;gBACD,IAAI,CAAA;;;;;;;;KAQH;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;;;qCAAnB,SAAQ,WAAW;;;;iCACnD,IAAI,EAAE;sCA0BN,QAAQ,EAAE;YAzBX,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YA0BpB,iLAAA,UAAU,6DAYT;YAxCH,6KA+CC;;;YA/CY,uDAAqB;;QAEhC,2BAFW,mDAAqB,+CAEf,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEpB,MAAM,uDAAG,KAAK,CAAC,OAAO,CAAC,EAAC;QACxB,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;QACxB,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;QACtB,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAE3B,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACpC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YACxB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEH,wBAAwB;YACtB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;YAE1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YAEvB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YACvB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,CAAC;QAGD,UAAU;YACR,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC5B,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE5B,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;YAEpC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;YACxB,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAE3C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE;gBAC5B,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;aACnC,CAAC,CAAC;QACL,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,MAAM,EAAE,CAAC,MAAM,EAAE,CAAC;YAEvB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;QAC9B,CAAC;;;;SA9CU,qBAAqB"}

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

@@ -1,17 +1,17 @@
+import { type RadioContainer } from "./context.js";
 declare global {
     interface HTMLElementTagNameMap {
         "usa-radio": USARadioElement;
     }
 }
-export declare class USARadioElement extends HTMLElement {
+export declare class USARadioElement extends HTMLElement implements RadioContainer {
     #private;
     static formAssociated: boolean;
     accessor value: string;
     accessor name: string;
+    accessor required: boolean;
     accessor tiled: boolean;
-    get shadow(): ShadowRoot;
-    onChange(e: Event): void;
     connectedCallback(): void;
-    attributeChangedCallback(): void;
-    onOptionAdded(e: Event): void;
+    addRadioOption(el: HTMLElement): void;
+    onChange(e: Event): void;
 }