@noctuatech/uswds 0.0.21 → 0.0.23

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;
 }

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

@@ -1,7 +1,12 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { attr, css, element, html, listen } from "@joist/element";
+import { injectable } from "@joist/di";
+import { attr, css, element, html, listen, query } from "@joist/element";
+import { RADIO_CTX } from "./context.js";
 let USARadioElement = (() => {
-    let _classDecorators = [element({
+    let _classDecorators = [injectable({
+            name: "usa-radio-ctx",
+            provideSelfAs: [RADIO_CTX],
+        }), element({
             tagName: "usa-radio",
             shadowDom: [
                 css `
@@ -17,12 +22,11 @@ let USARadioElement = (() => {
         display: flex;
         cursor: pointer;
         gap: 0.5rem;
+        position: relative;
       }
 
       input {
         position: absolute;
-        left: -999em;
-        right: auto;
       }
 
       label::before {
@@ -35,6 +39,8 @@ let USARadioElement = (() => {
         background: #fff;
         box-shadow: 0 0 0 2px #1b1b1b;
         flex: 0 0 1.25rem;
+        position: relative;
+        z-index: 1000;
       }
 
       label:has(input:checked)::before {
@@ -70,7 +76,11 @@ let USARadioElement = (() => {
         display: flex;
       }
     `,
-                html `<slot id="main"></slot>`,
+                html `
+      <slot name="legend" id="legend" tabindex="-1"></slot>
+
+      <slot></slot>
+    `,
             ],
         })];
     let _classDescriptor;
@@ -84,27 +94,29 @@ let USARadioElement = (() => {
     let _name_decorators;
     let _name_initializers = [];
     let _name_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
     let _tiled_decorators;
     let _tiled_initializers = [];
     let _tiled_extraInitializers = [];
     let _onChange_decorators;
-    let _onOptionAdded_decorators;
     var USARadioElement = 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()];
             _tiled_decorators = [attr({
                     observed: false,
                 })];
             _onChange_decorators = [listen("change")];
-            _onOptionAdded_decorators = [listen("usa::radio::option::added", (el) => el)];
             __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, _tiled_decorators, { kind: "accessor", name: "tiled", static: false, private: false, access: { has: obj => "tiled" in obj, get: obj => obj.tiled, set: (obj, value) => { obj.tiled = value; } }, metadata: _metadata }, _tiled_initializers, _tiled_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, _onOptionAdded_decorators, { kind: "method", name: "onOptionAdded", static: false, private: false, access: { has: obj => "onOptionAdded" in obj, get: obj => obj.onOptionAdded }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USARadioElement = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
@@ -116,39 +128,37 @@ let USARadioElement = (() => {
         #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; }
-        #tiled_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _tiled_initializers, false));
+        #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; }
+        #tiled_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _tiled_initializers, false));
         get tiled() { return this.#tiled_accessor_storage; }
         set tiled(value) { this.#tiled_accessor_storage = value; }
-        get shadow() {
-            return this.shadowRoot;
-        }
         #internals = (__runInitializers(this, _tiled_extraInitializers), this.attachInternals());
+        #legend = query("#legend");
+        connectedCallback() {
+            this.#syncFormState();
+        }
+        addRadioOption(el) {
+            this.shadowRoot?.append(el);
+            this.#syncFormState();
+        }
         onChange(e) {
             if (e.target instanceof HTMLInputElement) {
                 if (e.target.checked) {
                     this.value = e.target.value;
-                    this.#internals.setFormValue(e.target.value);
+                    this.#syncFormState();
                 }
             }
         }
-        connectedCallback() {
-            if (this.value) {
-                this.#internals.setFormValue(this.value);
+        #syncFormState() {
+            this.#internals.setFormValue(this.value);
+            this.#internals.setValidity({});
+            if (this.required && !this.value) {
+                const input = this.shadowRoot?.querySelector("input");
+                this.#internals.setValidity({ valueMissing: true }, "Please select an option if you want to proceed", input ?? this.#legend());
             }
         }
-        attributeChangedCallback() {
-            for (let radio of this.shadow.querySelectorAll("usa-radio-option")) {
-                radio.checked = radio.value === this.value;
-                radio.name = this.name;
-            }
-        }
-        onOptionAdded(e) {
-            e.stopPropagation();
-            const target = e.target;
-            target.checked = target.value === this.value;
-            target.name = this.name;
-            this.shadow.append(target.radio);
-        }
         static {
             __runInitializers(_classThis, _classExtraInitializers);
         }

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

@@ -1 +1 @@
-{"version":3,"file":"radio.element.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;IAkFrD,eAAe;4BAxE3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiEF;gBACD,IAAI,CAAA,yBAAyB;aAC9B;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;;;;;;;+BAAnB,SAAQ,WAAW;;;;iCAG7C,IAAI,EAAE;gCAGN,IAAI,EAAE;iCAGN,IAAI,CAAC;oBACJ,QAAQ,EAAE,KAAK;iBAChB,CAAC;oCASD,MAAM,CAAC,QAAQ,CAAC;yCAuBhB,MAAM,CAAC,2BAA2B,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC;YAvChD,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAGpB,iKAAS,IAAI,6BAAJ,IAAI,mFAAM;YAKnB,oKAAS,KAAK,6BAAL,KAAK,qFAAS;YASvB,2KAAA,QAAQ,6DAOP;YAgBD,0LAAA,aAAa,6DASZ;YArDH,6KAsDC;;;;QArDC,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC;QAG7B,2BAJW,mDAAe,+CAIT,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAGpB,yHAAgB,EAAE,GAAC;QAAnB,IAAS,IAAI,0CAAM;QAAnB,IAAS,IAAI,gDAAM;QAKnB,0HAAiB,KAAK,GAAC;QAAvB,IAAS,KAAK,2CAAS;QAAvB,IAAS,KAAK,iDAAS;QAEvB,IAAI,MAAM;YACR,OAAO,IAAI,CAAC,UAAW,CAAC;QAC1B,CAAC;QAED,UAAU,uDAAG,IAAI,CAAC,eAAe,EAAE,EAAC;QAGpC,QAAQ,CAAC,CAAQ;YACf,IAAI,CAAC,CAAC,MAAM,YAAY,gBAAgB,EAAE,CAAC;gBACzC,IAAI,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;oBACrB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oBAC5B,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;QACH,CAAC;QAED,iBAAiB;YACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;QACH,CAAC;QAED,wBAAwB;YACtB,KAAK,IAAI,KAAK,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE,CAAC;gBACnE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;gBAC3C,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACzB,CAAC;QACH,CAAC;QAGD,aAAa,CAAC,CAAQ;YACpB,CAAC,CAAC,eAAe,EAAE,CAAC;YAEpB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA+B,CAAC;YAEjD,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAC7C,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAExB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC;;YArDU,uDAAe;;;;;SAAf,eAAe"}
+{"version":3,"file":"radio.element.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.element.ts"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK;;;;;;;;;;YAUf,IAAI,CACJ,IAAI,CAAC,WAAW,EAChB,GAAG,EAAE,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,WAAW,oBAAoB,CACnE;;;;;;;;;;;KAWN,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,WAAW,EACT,8EAA8E;KACjF;CACwD,CAAC;AAE5D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}
+{"version":3,"file":"radio.stories.js","sourceRoot":"","sources":["../../../src/lib/radio/radio.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAG9C,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK;;;;;;;;;;YAUf,IAAI,CACJ,IAAI,CAAC,WAAW,EAChB,GAAG,EAAE,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,WAAW,oBAAoB,CACnE;;;;;;;;;;;KAWN,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,WAAW,EACT,8EAA8E;KACjF;CACwD,CAAC;AAE5D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/radio/radio.test.js

@@ -1,6 +1,6 @@
 import "./radio.element.js";
 import "./radio-option/radio-option.element.js";
-import { fixture, html, assert } from "@open-wc/testing";
+import { assert, fixture, html } from "@open-wc/testing";
 describe("usa-radio", () => {
     it("should be accessible", async () => {
         const radio = await fixture(html `
@@ -46,9 +46,8 @@ describe("usa-radio", () => {
         </usa-radio>
       </form>
     `);
-        const nativeInputs = form
-            .querySelector("usa-radio")
-            .shadowRoot.querySelectorAll("input");
+        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+            [];
         assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), [
             "sojourner-truth",
             "frederick-douglass",
@@ -80,9 +79,8 @@ describe("usa-radio", () => {
     `);
         const options = form.querySelectorAll("usa-radio-option");
         options[2].remove();
-        const nativeInputs = form
-            .querySelector("usa-radio")
-            .shadowRoot.querySelectorAll("input");
+        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+            [];
         assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), ["sojourner-truth", "frederick-douglass", "george-washington-carver"]);
     });
     it("should submit form with default values", async () => {
@@ -108,9 +106,8 @@ describe("usa-radio", () => {
       </form>
     `);
         const value = new FormData(form);
-        const nativeInputs = form
-            .querySelector("usa-radio")
-            .shadowRoot.querySelectorAll("input");
+        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+            [];
         assert.equal(nativeInputs[1].checked, true);
         assert.equal(value.get("historical-figures"), "frederick-douglass");
     });
@@ -136,9 +133,8 @@ describe("usa-radio", () => {
         </usa-radio>
       </form>
     `);
-        const nativeInputs = form
-            .querySelector("usa-radio")
-            .shadowRoot.querySelectorAll("input");
+        const nativeInputs = form.querySelector("usa-radio")?.shadowRoot?.querySelectorAll("input") ??
+            [];
         nativeInputs[3].click();
         const value = new FormData(form);
         assert.equal(value.get("historical-figures"), "george-washington-carver");

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

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

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

@@ -0,0 +1,6 @@
+import { StaticToken } from "@joist/di";
+export interface SelectContainer extends Node {
+    value: string;
+    addSelectOption: (el: HTMLOptionElement) => void;
+}
+export declare const SELECT_CONTEXT: StaticToken<SelectContainer>;

package/target/lib/select/context.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/lib/select/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAOxC,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,WAAW,CAC3C,gBAAgB,CACjB,CAAC"}

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

@@ -4,10 +4,11 @@ declare global {
     }
 }
 export declare class USASelecOptionElement extends HTMLElement {
+    #private;
     accessor value: string;
     readonly option: HTMLOptionElement;
     attributeChangedCallback(): void;
-    connectedCallback(): void;
+    onInjected(): void;
     onSlotChange(): void;
     disconnectedCallback(): void;
 }

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

@@ -1,5 +1,7 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { attr, css, element, html, listen } from "@joist/element";
+import { inject, injectable, injected } from "@joist/di";
+import { SELECT_CONTEXT } from "../context.js";
 let USASelecOptionElement = (() => {
     let _classDecorators = [element({
             tagName: "usa-select-option",
@@ -11,7 +13,7 @@ let USASelecOptionElement = (() => {
     `,
                 html `<slot></slot>`,
             ],
-        })];
+        }), injectable()];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
@@ -20,14 +22,17 @@ let USASelecOptionElement = (() => {
     let _value_decorators;
     let _value_initializers = [];
     let _value_extraInitializers = [];
+    let _onInjected_decorators;
     let _onSlotChange_decorators;
     var USASelecOptionElement = 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()];
+            _onInjected_decorators = [injected()];
             _onSlotChange_decorators = [listen("slotchange")];
             __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, _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(this, null, _onSlotChange_decorators, { kind: "method", name: "onSlotChange", static: false, private: false, access: { has: obj => "onSlotChange" in obj, get: obj => obj.onSlotChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             USASelecOptionElement = _classThis = _classDescriptor.value;
@@ -38,16 +43,28 @@ let USASelecOptionElement = (() => {
         get value() { return this.#value_accessor_storage; }
         set value(value) { this.#value_accessor_storage = value; }
         option = (__runInitializers(this, _value_extraInitializers), document.createElement("option"));
+        #select = inject(SELECT_CONTEXT);
+        #observer = new MutationObserver(() => {
+            const { value } = this.#select();
+            this.option.selected = value === this.value;
+        });
         attributeChangedCallback() {
             this.option.value = this.value;
         }
-        connectedCallback() {
-            this.dispatchEvent(new Event("usa::select::option::added", { bubbles: true }));
+        onInjected() {
+            const select = this.#select();
+            this.option.selected = select.value === this.value;
+            select.addSelectOption(this.option);
+            this.#observer.observe(select, {
+                attributes: true,
+                attributeFilter: ["value"],
+            });
         }
         onSlotChange() {
             this.option.textContent = this.textContent;
         }
         disconnectedCallback() {
+            this.#observer.disconnect();
             this.option.remove();
         }
     };

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

@@ -1 +1 @@
-{"version":3,"file":"select-option.element.js","sourceRoot":"","sources":["../../../../src/lib/select/select-option/select-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;IAmBrD,qBAAqB;4BAXjC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACyC,WAAW;;;;;;qCAAnB,SAAQ,WAAW;;;;iCACnD,IAAI,EAAE;wCAeN,MAAM,CAAC,YAAY,CAAC;YAdrB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAepB,uLAAA,YAAY,6DAEX;YAnBH,6KAwBC;;;YAxBY,uDAAqB;;QAEhC,2BAFW,mDAAqB,+CAEf,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEX,MAAM,uDAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC;QAEnD,wBAAwB;YACtB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,CAAC;QAED,iBAAiB;YACf,IAAI,CAAC,aAAa,CAChB,IAAI,KAAK,CAAC,4BAA4B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAC3D,CAAC;QACJ,CAAC;QAGD,YAAY;YACV,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7C,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACvB,CAAC;;;;SAvBU,qBAAqB"}
+{"version":3,"file":"select-option.element.js","sourceRoot":"","sources":["../../../../src/lib/select/select-option/select-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAElE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;IAoBlC,qBAAqB;4BAZjC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC,EACD,UAAU,EAAE;;;;sBAC8B,WAAW;;;;;;;qCAAnB,SAAQ,WAAW;;;;iCACnD,IAAI,EAAE;sCAiBN,QAAQ,EAAE;wCAcV,MAAM,CAAC,YAAY,CAAC;YA9BrB,oKAAS,KAAK,6BAAL,KAAK,qFAAM;YAiBpB,iLAAA,UAAU,6DAWT;YAGD,uLAAA,YAAY,6DAEX;YAnCH,6KA0CC;;;YA1CY,uDAAqB;;QAEhC,2BAFW,mDAAqB,+CAEf,EAAE,GAAC;QAApB,IAAS,KAAK,2CAAM;QAApB,IAAS,KAAK,iDAAM;QAEX,MAAM,uDAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAC;QAEnD,OAAO,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;QAEjC,SAAS,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACpC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAEjC,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAC9C,CAAC,CAAC,CAAC;QAEH,wBAAwB;YACtB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,CAAC;QAGD,UAAU;YACR,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;YAE9B,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAEnD,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAEpC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE;gBAC7B,UAAU,EAAE,IAAI;gBAChB,eAAe,EAAE,CAAC,OAAO,CAAC;aAC3B,CAAC,CAAC;QACL,CAAC;QAGD,YAAY;YACV,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;QAC7C,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;YAE5B,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACvB,CAAC;;;;SAzCU,qBAAqB"}

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

@@ -1,14 +1,17 @@
+import { type SelectContainer } from "./context.js";
 declare global {
     interface HTMLElementTagNameMap {
         "usa-select": USASelectElement;
     }
 }
-export declare class USASelectElement extends HTMLElement {
+export declare class USASelectElement extends HTMLElement implements SelectContainer {
     #private;
     static formAssociated: boolean;
     accessor value: string;
     accessor name: string;
+    accessor required: boolean;
     connectedCallback(): void;
+    attributeChangedCallback(): void;
     onSelectChange(): void;
-    onOptionAdded(e: Event): void;
+    addSelectOption(option: HTMLOptionElement): void;
 }

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

@@ -1,19 +1,17 @@
 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";
 let USASelectElement = (() => {
-    let _classDecorators = [element({
+    let _classDecorators = [injectable({
+            name: "usa-select-ctx",
+            provideSelfAs: [SELECT_CONTEXT],
+        }), element({
             tagName: "usa-select",
             shadowDom: [
                 css `
       :host {
         display: block;
-        font-family:
-          Source Sans Pro Web,
-          Helvetica Neue,
-          Helvetica,
-          Roboto,
-          Arial,
-          sans-serif;
         line-height: 1.3;
         position: relative;
         width: 100%;
@@ -73,20 +71,22 @@ let USASelectElement = (() => {
     let _name_decorators;
     let _name_initializers = [];
     let _name_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
     let _onSelectChange_decorators;
-    let _onOptionAdded_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")];
-            _onOptionAdded_decorators = [listen("usa::select::option::added")];
             __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, _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(this, null, _onOptionAdded_decorators, { kind: "method", name: "onOptionAdded", static: false, private: false, access: { has: obj => "onOptionAdded" in obj, get: obj => obj.onOptionAdded }, 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 });
@@ -98,23 +98,38 @@ let USASelectElement = (() => {
         #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; }
-        #select = (__runInitializers(this, _name_extraInitializers), query("select"));
+        #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"));
         #internals = this.attachInternals();
         connectedCallback() {
             const select = this.#select();
             select.value = this.value;
             select.name = this.name;
-            this.#internals.setFormValue(this.value);
+            this.#syncFormState();
+        }
+        attributeChangedCallback() {
+            const select = this.#select();
+            select.value = this.value;
+            select.name = this.name;
+            this.#syncFormState();
         }
         onSelectChange() {
             const select = this.#select();
-            this.#internals.setFormValue(select.value);
+            this.value = select.value;
+            this.#syncFormState();
         }
-        onOptionAdded(e) {
-            const target = e.target;
-            e.stopPropagation();
+        addSelectOption(option) {
             const select = this.#select();
-            select.append(target.option);
+            select.append(option);
+        }
+        #syncFormState() {
+            this.#internals.setFormValue(this.value);
+            this.#internals.setValidity({});
+            if (this.required && !this.value) {
+                this.#internals.setValidity({ valueMissing: true }, "Please select an option", this.#select());
+            }
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);