@noctuatech/uswds 0.0.1

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

@@ -0,0 +1,63 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+import { USARadioElement } from "./radio.element.js";
+let USARadioOptionElement = (() => {
+    var _USARadioOptionElement_parent, _USARadioOptionElement_value_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-radio-option",
+            shadowDom: [
+                css `
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    var USARadioOptionElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USARadioOptionElement_value_accessor_storage.set(this, __runInitializers(this, _value_initializers, ""));
+            _USARadioOptionElement_parent.set(this, (__runInitializers(this, _value_extraInitializers), null));
+        }
+        get value() { return __classPrivateFieldGet(this, _USARadioOptionElement_value_accessor_storage, "f"); }
+        set value(value) { __classPrivateFieldSet(this, _USARadioOptionElement_value_accessor_storage, value, "f"); }
+        attributeChangedCallback() {
+            this.slot = this.value;
+        }
+        connectedCallback() {
+            if (this.parentElement instanceof USARadioElement) {
+                __classPrivateFieldSet(this, _USARadioOptionElement_parent, this.parentElement, "f");
+                this.parentElement.onOptionAdded(this);
+            }
+        }
+        disconnectedCallback() {
+            if (__classPrivateFieldGet(this, _USARadioOptionElement_parent, "f")) {
+                __classPrivateFieldGet(this, _USARadioOptionElement_parent, "f").onOptionRemoved(this);
+            }
+        }
+    };
+    _USARadioOptionElement_parent = new WeakMap();
+    _USARadioOptionElement_value_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USARadioOptionElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _value_decorators = [attr()];
+        __esDecorate(_classThis, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USARadioOptionElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USARadioOptionElement = _classThis;
+})();
+export { USARadioOptionElement };
+//# sourceMappingURL=radio-option.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-option.element.js","sourceRoot":"","sources":["../../../src/lib/radio/radio-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;IAoBxC,qBAAqB;;4BAZjC,OAAO,CAAC;YACP,OAAO,EAAE,kBAAkB;YAC3B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;KAKF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACyC,WAAW;;;;kDAAnB,SAAQ,WAAW;;;YAE3C,qGAAQ,EAAE,GAAC;YAEpB,4FAAkC,IAAI,GAAC;QAmBzC,CAAC;QArBC,IAAS,KAAK,+FAAM;QAApB,IAAS,KAAK,oGAAM;QAIpB,wBAAwB;YACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,CAAC;QAED,iBAAiB;YACf,IAAI,IAAI,CAAC,aAAa,YAAY,eAAe,EAAE,CAAC;gBAClD,uBAAA,IAAI,iCAAW,IAAI,CAAC,aAAa,MAAA,CAAC;gBAElC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QAED,oBAAoB;YAClB,IAAI,uBAAA,IAAI,qCAAQ,EAAE,CAAC;gBACjB,uBAAA,IAAI,qCAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;;;;;;6BArBA,IAAI,EAAE;QACP,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAFtB,6KAuBC;;;QAvBY,uDAAqB;;;;SAArB,qBAAqB"}

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

@@ -0,0 +1,2 @@
+import "./radio.element.js";
+import "./radio-option.element.js";

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

@@ -0,0 +1,15 @@
+import "./radio.element.js";
+import "./radio-option.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+describe("usa-radio-option", () => {
+    it("should map value to slot", async () => {
+        const radio = await fixture(html `
+      <usa-radio>
+        <usa-radio-option value="first">First</usa-radio-option>
+      </usa-radio>
+    `);
+        const option = radio.querySelectorAll("usa-radio-option");
+        assert.equal(option[0].value, option[0].slot);
+    });
+});
+//# sourceMappingURL=radio-option.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-option.test.js","sourceRoot":"","sources":["../../../src/lib/radio/radio-option.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACxC,MAAM,KAAK,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;;;KAItD,CAAC,CAAC;QAEH,MAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QAE1D,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,18 @@
+import type { USARadioOptionElement } from "./radio-option.element.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-radio": USARadioElement;
+    }
+}
+export declare class USARadioElement extends HTMLElement {
+    #private;
+    static formAssociated: boolean;
+    accessor value: string;
+    accessor name: string;
+    accessor tiled: boolean;
+    onChange(e: Event): void;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    onOptionAdded(el: USARadioOptionElement): void;
+    onOptionRemoved(el: USARadioOptionElement): void;
+}

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

@@ -0,0 +1,177 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, listen, query } from "@joist/element";
+let USARadioElement = (() => {
+    var _USARadioElement_radios, _USARadioElement_internals, _USARadioElement_value_accessor_storage, _USARadioElement_name_accessor_storage, _USARadioElement_tiled_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-radio",
+            shadowDom: [
+                css `
+      :host {
+        display: block;
+      }
+
+      .radios {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      label {
+        display: flex;
+        cursor: pointer;
+        gap: 0.5rem;
+      }
+
+      input {
+        position: absolute;
+        left: -999em;
+        right: auto;
+      }
+
+      label::before {
+        content: " ";
+        display: block;
+        left: 0;
+        height: 1.25rem;
+        border-radius: 99rem;
+        width: 1.25rem;
+        background: #fff;
+        box-shadow: 0 0 0 2px #1b1b1b;
+      }
+
+      label:has(input:checked)::before {
+        background-color: #005ea2;
+        box-shadow:
+          0 0 0 2px #005ea2,
+          inset 0 0 0 2px #fff;
+      }
+
+      label:has(input:focus)::before {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0.25rem;
+      }
+
+      :host([tiled]) .radios {
+        gap: 0.5rem;
+      }
+
+      :host([tiled]) label {
+        background-color: #fff;
+        border: 2px solid #c9c9c9;
+        color: #1b1b1b;
+        border-radius: 0.25rem;
+        padding: 0.75rem 1rem 0.75rem 0.75rem;
+      }
+
+      :host([tiled]) label:has(input:checked) {
+        background-color: rgba(0, 94, 162, 0.1);
+        border-color: #005ea2;
+      }
+    `,
+                html `
+      <slot></slot>
+
+      <div class="radios"></div>
+    `,
+            ],
+        })];
+    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 _tiled_decorators;
+    let _tiled_initializers = [];
+    let _tiled_extraInitializers = [];
+    let _onChange_decorators;
+    var USARadioElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USARadioElement_value_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _value_initializers, "")));
+            _USARadioElement_name_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _name_initializers, "")));
+            _USARadioElement_tiled_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _tiled_initializers, false)));
+            _USARadioElement_radios.set(this, (__runInitializers(this, _tiled_extraInitializers), query(".radios")));
+            _USARadioElement_internals.set(this, this.attachInternals());
+        }
+        get value() { return __classPrivateFieldGet(this, _USARadioElement_value_accessor_storage, "f"); }
+        set value(value) { __classPrivateFieldSet(this, _USARadioElement_value_accessor_storage, value, "f"); }
+        get name() { return __classPrivateFieldGet(this, _USARadioElement_name_accessor_storage, "f"); }
+        set name(value) { __classPrivateFieldSet(this, _USARadioElement_name_accessor_storage, value, "f"); }
+        get tiled() { return __classPrivateFieldGet(this, _USARadioElement_tiled_accessor_storage, "f"); }
+        set tiled(value) { __classPrivateFieldSet(this, _USARadioElement_tiled_accessor_storage, value, "f"); }
+        onChange(e) {
+            if (e.target instanceof HTMLInputElement) {
+                if (e.target.checked) {
+                    this.value = e.target.value;
+                    __classPrivateFieldGet(this, _USARadioElement_internals, "f").setFormValue(e.target.value);
+                }
+            }
+        }
+        connectedCallback() {
+            if (this.value) {
+                __classPrivateFieldGet(this, _USARadioElement_internals, "f").setFormValue(this.value);
+            }
+        }
+        attributeChangedCallback() {
+            const radios = __classPrivateFieldGet(this, _USARadioElement_radios, "f").call(this);
+            for (let radio of radios.querySelectorAll("input")) {
+                radio.checked = radio.value === this.value;
+                radio.name = this.name;
+            }
+        }
+        onOptionAdded(el) {
+            const radios = __classPrivateFieldGet(this, _USARadioElement_radios, "f").call(this);
+            const radioLabel = document.createElement("label");
+            radioLabel.id = el.value;
+            const input = document.createElement("input");
+            input.type = "radio";
+            input.name = this.name;
+            input.value = el.value;
+            input.checked = this.value === el.value;
+            const slot = document.createElement("slot");
+            slot.name = el.value;
+            radioLabel.append(input, slot);
+            radios.append(radioLabel);
+        }
+        onOptionRemoved(el) {
+            const radios = __classPrivateFieldGet(this, _USARadioElement_radios, "f").call(this);
+            const option = radios.querySelector(`#${el.value}`);
+            if (option) {
+                option.remove();
+            }
+        }
+    };
+    _USARadioElement_radios = new WeakMap();
+    _USARadioElement_internals = new WeakMap();
+    _USARadioElement_value_accessor_storage = new WeakMap();
+    _USARadioElement_name_accessor_storage = new WeakMap();
+    _USARadioElement_tiled_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USARadioElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _value_decorators = [attr()];
+        _name_decorators = [attr()];
+        _tiled_decorators = [attr()];
+        _onChange_decorators = [listen("change")];
+        __esDecorate(_classThis, 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(_classThis, 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(_classThis, 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(_classThis, 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(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 });
+    })();
+    _classThis.formAssociated = true;
+    (() => {
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USARadioElement = _classThis;
+})();
+export { USARadioElement };
+//# sourceMappingURL=radio.element.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/web-components";
+import type { USARadioElement } from "./radio.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    render(args: USARadioElement): import("lit-html").TemplateResult<1>;
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<USARadioElement>;
+export declare const Primary: Story;

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

@@ -0,0 +1,40 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-radio",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
+        <usa-radio-option value="sojourner-truth">
+          Sojourner Truth
+        </usa-radio-option>
+
+        <usa-radio-option value="frederick-douglass">
+          Frederick Douglass
+
+          <usa-description>
+            This is optional text that can be used to describe the label in more
+            detail.
+          </usa-description>
+        </usa-radio-option>
+
+        <usa-radio-option value="booker-t-washington">
+          Booker T. Washington
+        </usa-radio-option>
+
+        <usa-radio-option value="george-washington-carver">
+          George Washington Carver
+        </usa-radio-option>
+      </usa-radio>
+    `;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=radio.stories.js.map

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

@@ -0,0 +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;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBV,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

@@ -0,0 +1,2 @@
+import "./radio.element.js";
+import "./radio-option.element.js";

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

@@ -0,0 +1,147 @@
+import "./radio.element.js";
+import "./radio-option.element.js";
+import { fixture, html, assert } from "@open-wc/testing";
+describe("usa-radio", () => {
+    it("should be accessible", async () => {
+        const radio = await fixture(html `
+      <usa-radio name="historical-figures" value="frederick-douglass" tiled>
+        <usa-radio-option value="sojourner-truth">
+          Sojourner Truth
+        </usa-radio-option>
+
+        <usa-radio-option value="frederick-douglass">
+          Frederick Douglass
+        </usa-radio-option>
+
+        <usa-radio-option value="booker-t-washington">
+          Booker T. Washington
+        </usa-radio-option>
+
+        <usa-radio-option value="george-washington-carver">
+          George Washington Carver
+        </usa-radio-option>
+      </usa-radio>
+    `);
+        return assert.isAccessible(radio);
+    });
+    it("should create local inputs for each option", async () => {
+        const form = await fixture(html `
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+        const nativeInputs = form
+            .querySelector("usa-radio")
+            .shadowRoot.querySelectorAll("input");
+        assert.deepEqual(Array.from(nativeInputs).map((input) => input.value), [
+            "sojourner-truth",
+            "frederick-douglass",
+            "booker-t-washington",
+            "george-washington-carver",
+        ]);
+    });
+    it("should remove inputs when options are removed", async () => {
+        const form = await fixture(html `
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+        const options = form.querySelectorAll("usa-radio-option");
+        options[2].remove();
+        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 () => {
+        const form = await fixture(html `
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+        const value = new FormData(form);
+        const nativeInputs = form
+            .querySelector("usa-radio")
+            .shadowRoot.querySelectorAll("input");
+        assert.equal(nativeInputs[1].checked, true);
+        assert.equal(value.get("historical-figures"), "frederick-douglass");
+    });
+    it("should submit form with changed value", async () => {
+        const form = await fixture(html `
+      <form>
+        <usa-radio name="historical-figures" value="frederick-douglass">
+          <usa-radio-option value="sojourner-truth">
+            Sojourner Truth
+          </usa-radio-option>
+
+          <usa-radio-option value="frederick-douglass">
+            Frederick Douglass
+          </usa-radio-option>
+
+          <usa-radio-option value="booker-t-washington">
+            Booker T. Washington
+          </usa-radio-option>
+
+          <usa-radio-option value="george-washington-carver">
+            George Washington Carver
+          </usa-radio-option>
+        </usa-radio>
+      </form>
+    `);
+        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");
+    });
+});
+//# sourceMappingURL=radio.test.js.map

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

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

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

@@ -0,0 +1,11 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-select-option": USASelecOptionElement;
+    }
+}
+export declare class USASelecOptionElement extends HTMLElement {
+    #private;
+    accessor value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

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

@@ -0,0 +1,58 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element } from "@joist/element";
+import { USASelectElement } from "./select.element.js";
+let USASelecOptionElement = (() => {
+    var _USASelecOptionElement_parent, _USASelecOptionElement_value_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-select-option",
+            shadowDom: [
+                css `
+      :host {
+        display: none;
+      }
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    var USASelecOptionElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USASelecOptionElement_value_accessor_storage.set(this, __runInitializers(this, _value_initializers, ""));
+            _USASelecOptionElement_parent.set(this, (__runInitializers(this, _value_extraInitializers), null));
+        }
+        get value() { return __classPrivateFieldGet(this, _USASelecOptionElement_value_accessor_storage, "f"); }
+        set value(value) { __classPrivateFieldSet(this, _USASelecOptionElement_value_accessor_storage, value, "f"); }
+        connectedCallback() {
+            if (this.parentElement instanceof USASelectElement) {
+                __classPrivateFieldSet(this, _USASelecOptionElement_parent, this.parentElement, "f");
+                this.parentElement.onOptionAdded(this);
+            }
+        }
+        disconnectedCallback() {
+            if (__classPrivateFieldGet(this, _USASelecOptionElement_parent, "f")) {
+                __classPrivateFieldGet(this, _USASelecOptionElement_parent, "f").onOptionRemoved(this);
+            }
+        }
+    };
+    _USASelecOptionElement_parent = new WeakMap();
+    _USASelecOptionElement_value_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USASelecOptionElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _value_decorators = [attr()];
+        __esDecorate(_classThis, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USASelecOptionElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USASelecOptionElement = _classThis;
+})();
+export { USASelecOptionElement };
+//# sourceMappingURL=select-option.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.element.js","sourceRoot":"","sources":["../../../src/lib/select/select-option.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;IAkB1C,qBAAqB;;4BAVjC,OAAO,CAAC;YACP,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;aACF;SACF,CAAC;;;;sBACyC,WAAW;;;;kDAAnB,SAAQ,WAAW;;;YAE3C,qGAAQ,EAAE,GAAC;YAEpB,4FAAmC,IAAI,GAAC;QAe1C,CAAC;QAjBC,IAAS,KAAK,+FAAM;QAApB,IAAS,KAAK,oGAAM;QAIpB,iBAAiB;YACf,IAAI,IAAI,CAAC,aAAa,YAAY,gBAAgB,EAAE,CAAC;gBACnD,uBAAA,IAAI,iCAAW,IAAI,CAAC,aAAa,MAAA,CAAC;gBAElC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QAED,oBAAoB;YAClB,IAAI,uBAAA,IAAI,qCAAQ,EAAE,CAAC;gBACjB,uBAAA,IAAI,qCAAQ,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;;;;;;6BAjBA,IAAI,EAAE;QACP,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAFtB,6KAmBC;;;QAnBY,uDAAqB;;;;SAArB,qBAAqB"}

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

@@ -0,0 +1,16 @@
+import type { USASelecOptionElement } from "./select-option.element.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-select": USASelectElement;
+    }
+}
+export declare class USASelectElement extends HTMLElement {
+    #private;
+    static formAssociated: boolean;
+    accessor value: string;
+    accessor name: string;
+    connectedCallback(): void;
+    onSelectChange(): void;
+    onOptionAdded(el: USASelecOptionElement): void;
+    onOptionRemoved(el: USASelecOptionElement): void;
+}