@noctuatech/uswds 0.0.3 → 0.0.5

package/target/lib/accordion/accordion.element.js

@@ -0,0 +1,172 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, listen, query } from "@joist/element";
+let USAAccordionElement = (() => {
+    var _USAAccordionElement_details, _USAAccordionElement_name_accessor_storage, _USAAccordionElement_open_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-accordion",
+            shadowDomOpts: {
+                mode: "open",
+                delegatesFocus: true,
+            },
+            shadowDom: [
+                css `
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: block;
+      }
+
+      :host(:not(:first-child)) summary {
+        margin-top: 0.5rem;
+      }
+
+      summary {
+        align-items: center;
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        justify-content: normal;
+        text-align: left;
+        padding: 0;
+        color: #1b1b1b;
+        background-color: #f0f0f0;
+        cursor: pointer;
+        display: flex;
+        font-weight: 700;
+        margin: 0;
+        padding: 1rem 1.25rem 1rem 1.25rem;
+        text-decoration: none;
+        width: 100%;
+      }
+
+      summary::-webkit-details-marker {
+        display: none;
+      }
+
+      slot[name="heading"] {
+        display: block;
+        flex: 1 1 auto;
+      }
+
+      slot[name="heading"]::slotted(*) {
+        margin: 0;
+      }
+
+      .content {
+        padding-bottom: 1.5rem;
+        padding-left: 1rem;
+        padding-top: 1.5rem;
+      }
+
+      usa-icon[icon="remove"] {
+        display: none;
+      }
+
+      details[open] usa-icon[icon="add"] {
+        display: none;
+      }
+
+      details[open] usa-icon[icon="remove"] {
+        display: block;
+      }
+
+      summary:hover {
+        background-color: #e6e6e6;
+      }
+
+      summary:focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+    `,
+                html `
+      <details>
+        <summary>
+          <slot name="heading"></slot>
+
+          <usa-icon icon="add"></usa-icon>
+          <usa-icon icon="remove"></usa-icon>
+        </summary>
+
+        <div class="content">
+          <slot></slot>
+        </div>
+      </details>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _onClick_decorators;
+    let _onAccordionToggle_decorators;
+    var USAAccordionElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USAAccordionElement_name_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, "")));
+            _USAAccordionElement_open_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _open_initializers, false)));
+            _USAAccordionElement_details.set(this, (__runInitializers(this, _open_extraInitializers), query("details")));
+        }
+        get name() { return __classPrivateFieldGet(this, _USAAccordionElement_name_accessor_storage, "f"); }
+        set name(value) { __classPrivateFieldSet(this, _USAAccordionElement_name_accessor_storage, value, "f"); }
+        get open() { return __classPrivateFieldGet(this, _USAAccordionElement_open_accessor_storage, "f"); }
+        set open(value) { __classPrivateFieldSet(this, _USAAccordionElement_open_accessor_storage, value, "f"); }
+        attributeChangedCallback() {
+            const details = __classPrivateFieldGet(this, _USAAccordionElement_details, "f").call(this);
+            details.open = this.open;
+        }
+        onClick(e) {
+            e.preventDefault();
+            this.dispatchEvent(new USAAccordionToggleEvent(!this.open));
+        }
+        onAccordionToggle(e) {
+            if (e.target.name === this.name) {
+                this.open = e.target === this && e.open;
+            }
+            else if (e.target === this) {
+                this.open = e.open;
+            }
+        }
+    };
+    _USAAccordionElement_details = new WeakMap();
+    _USAAccordionElement_name_accessor_storage = new WeakMap();
+    _USAAccordionElement_open_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USAAccordionElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _name_decorators = [attr()];
+        _open_decorators = [attr()];
+        _onClick_decorators = [listen("click", "summary")];
+        _onAccordionToggle_decorators = [listen("usa::accordion::toggle", () => document.body)];
+        __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, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+        __esDecorate(_classThis, null, _onClick_decorators, { kind: "method", name: "onClick", static: false, private: false, access: { has: obj => "onClick" in obj, get: obj => obj.onClick }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(_classThis, null, _onAccordionToggle_decorators, { kind: "method", name: "onAccordionToggle", static: false, private: false, access: { has: obj => "onAccordionToggle" in obj, get: obj => obj.onAccordionToggle }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAAccordionElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USAAccordionElement = _classThis;
+})();
+export { USAAccordionElement };
+class USAAccordionToggleEvent extends Event {
+    get target() {
+        return super.target;
+    }
+    constructor(open) {
+        super("usa::accordion::toggle", { bubbles: true });
+        this.open = open;
+    }
+}
+//# sourceMappingURL=accordion.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.element.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAuG5D,mBAAmB;;4BA/F/B,OAAO,CAAC;YACP,OAAO,EAAE,eAAe;YACxB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;gBACD,IAAI,CAAA;;;;;;;;;;;;;KAaH;aACF;SACF,CAAC;;;;sBACuC,WAAW;;;;;;;;;;gDAAnB,SAAQ,WAAW;;;YAEzC,sDAFE,mDAAmB,8CAEd,EAAE,IAAC;YAGV,oJAAO,KAAK,IAAC;YAEtB,0FAAW,KAAK,CAAC,SAAS,CAAC,GAAC;QAsB9B,CAAC;QA3BC,IAAS,IAAI,4FAAM;QAAnB,IAAS,IAAI,iGAAM;QAGnB,IAAS,IAAI,4FAAS;QAAtB,IAAS,IAAI,iGAAS;QAItB,wBAAwB;YACtB,MAAM,OAAO,GAAG,uBAAA,IAAI,oCAAS,MAAb,IAAI,CAAW,CAAC;YAChC,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,CAAC;QAGD,OAAO,CAAC,CAAQ;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,IAAI,CAAC,aAAa,CAAC,IAAI,uBAAuB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,CAAC;QAGD,iBAAiB,CAAC,CAA0B;YAC1C,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;YAC1C,CAAC;iBAAM,IAAI,CAAC,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC7B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC;YACrB,CAAC;QACH,CAAC;;;;;;;;4BA3BA,IAAI,EAAE;4BAGN,IAAI,EAAE;+BAUN,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC;yCAO1B,MAAM,CAAC,wBAAwB,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;QAnBtD,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAGnB,uKAAS,IAAI,6BAAJ,IAAI,mFAAS;QAUtB,8KAAA,OAAO,6DAIN;QAGD,4MAAA,iBAAiB,6DAMhB;QA5BH,6KA6BC;;;QA7BY,uDAAmB;;;;SAAnB,mBAAmB;AA+BhC,MAAM,uBAAwB,SAAQ,KAAK;IAGzC,IAAI,MAAM;QACR,OAAO,KAAK,CAAC,MAA6B,CAAC;IAC7C,CAAC;IAED,YAAY,IAAa;QACvB,KAAK,CAAC,wBAAwB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEnD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;CACF"}

package/target/lib/accordion/accordion.stories.d.ts

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

package/target/lib/accordion/accordion.stories.js

@@ -0,0 +1,42 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-accordion",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        Congress shall make no law respecting an establishment of religion, or
+        prohibiting the free exercise thereof; or abridging the freedom of
+        speech, or of the press; or the right of the people peaceably to
+        assemble, and to petition the Government for a redress of grievances.
+      </usa-accordion>
+
+      <usa-accordion id="second" name="ammendment">
+        <h4 slot="heading">Second Ammendment</h4>
+
+        A well regulated Militia, being necessary to the security of a free
+        State, the right of the people to keep and bear Arms, shall not be
+        infringed.
+      </usa-accordion>
+
+      <usa-accordion id="third" name="ammendment">
+        <h4 slot="heading">Third Ammendment</h4>
+
+        No Soldier shall, in time of peace be quartered in any house, without
+        the consent of the Owner, nor in time of war, but in a manner to be
+        prescribed by law.
+      </usa-accordion>
+    `;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=accordion.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,eAAe;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;KAyBV,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;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

@@ -0,0 +1 @@
+import "./accordion.element.js";

package/target/lib/accordion/accordion.test.js

@@ -0,0 +1,113 @@
+import "./accordion.element.js";
+import { fixture, html, assert } from "@open-wc/testing";
+describe("usa-accordion", () => {
+    it("should be accessible", async () => {
+        const accordion = await fixture(html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        <div class="content">
+          Congress shall make no law respecting an establishment of religion, or
+          prohibiting the free exercise thereof; or abridging the freedom of
+          speech, or of the press; or the right of the people peaceably to
+          assemble, and to petition the Government for a redress of grievances.
+        </div>
+      </usa-accordion>
+    `);
+        return assert.isAccessible(accordion);
+    });
+    it("should toggle the open state when clicked", async () => {
+        const accordion = await fixture(html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        <div class="content">
+          Congress shall make no law respecting an establishment of religion, or
+          prohibiting the free exercise thereof; or abridging the freedom of
+          speech, or of the press; or the right of the people peaceably to
+          assemble, and to petition the Government for a redress of grievances.
+        </div>
+      </usa-accordion>
+    `);
+        const heading = accordion.querySelector("h4");
+        const content = accordion.querySelector(".content");
+        heading.click();
+        assert.isTrue(content.checkVisibility());
+    });
+    it("should toggle the open state when clicked", async () => {
+        const accordion = await fixture(html `
+      <usa-accordion id="first" name="ammendment">
+        <h4 slot="heading">First Ammendment</h4>
+
+        <div class="content">
+          Congress shall make no law respecting an establishment of religion, or
+          prohibiting the free exercise thereof; or abridging the freedom of
+          speech, or of the press; or the right of the people peaceably to
+          assemble, and to petition the Government for a redress of grievances.
+        </div>
+      </usa-accordion>
+    `);
+        const heading = accordion.querySelector("h4");
+        const content = accordion.querySelector(".content");
+        assert.isFalse(content.checkVisibility());
+        heading.click();
+        assert.isTrue(content.checkVisibility());
+    });
+    it("should only allow a single accordion in a group to be open", async () => {
+        const el = await fixture(html `
+      <section>
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">First Ammendment</h4>
+          <div class="content">Content for First</div>
+        </usa-accordion>
+
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">Second Ammendment</h4>
+          <div class="content">Content for Second</div>
+        </usa-accordion>
+
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">Third Ammendment</h4>
+          <div class="content">Content for Third</div>
+        </usa-accordion>
+      </section>
+    `);
+        const headings = el.querySelectorAll("h4");
+        const content = Array.from(el.querySelectorAll(".content"));
+        headings[0].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
+        headings[1].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, false]);
+        headings[2].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, false, true]);
+    });
+    it("should not close accordion not in the same group", async () => {
+        const el = await fixture(html `
+      <section>
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">First Ammendment</h4>
+          <div class="content">Content for First</div>
+        </usa-accordion>
+
+        <usa-accordion name="ammendment">
+          <h4 slot="heading">Second Ammendment</h4>
+          <div class="content">Content for Second</div>
+        </usa-accordion>
+
+        <usa-accordion name="different">
+          <h4 slot="heading">Third Ammendment</h4>
+          <div class="content">Content for Third</div>
+        </usa-accordion>
+      </section>
+    `);
+        const headings = el.querySelectorAll("h4");
+        const content = Array.from(el.querySelectorAll(".content"));
+        headings[0].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
+        headings[1].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, false]);
+        headings[2].click();
+        assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, true]);
+    });
+});
+//# sourceMappingURL=accordion.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.test.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.test.ts"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;;;;;;;;;;KAWxD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;;;;;;;;;;KAWxD,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAC,IAAI,CAAE,CAAC;QAC/C,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAiB,UAAU,CAAE,CAAC;QAErE,OAAO,CAAC,KAAK,EAAE,CAAC;QAEhB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,SAAS,GAAG,MAAM,OAAO,CAAsB,IAAI,CAAA;;;;;;;;;;;KAWxD,CAAC,CAAC;QAEH,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAC,IAAI,CAAE,CAAC;QAC/C,MAAM,OAAO,GAAG,SAAS,CAAC,aAAa,CAAiB,UAAU,CAAE,CAAC;QAErE,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;QAE1C,OAAO,CAAC,KAAK,EAAE,CAAC;QAEhB,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4DAA4D,EAAE,KAAK,IAAI,EAAE;QAC1E,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;KAiB5B,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAiB,UAAU,CAAC,CAAC,CAAC;QAE5E,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpB,MAAM,CAAC,SAAS,CACd,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,EACzC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CACrB,CAAC;QAEF,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpB,MAAM,CAAC,SAAS,CACd,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,EACzC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CACrB,CAAC;QAEF,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpB,MAAM,CAAC,SAAS,CACd,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,EACzC,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CACrB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK,IAAI,EAAE;QAChE,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;KAiB5B,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAiB,UAAU,CAAC,CAAC,CAAC;QAE5E,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpB,MAAM,CAAC,SAAS,CACd,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,EACzC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CACrB,CAAC;QAEF,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpB,MAAM,CAAC,SAAS,CACd,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,EACzC,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CACrB,CAAC;QAEF,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC;QAEpB,MAAM,CAAC,SAAS,CACd,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE,CAAC,EACzC,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CACpB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/checkbox/checkbox.element.js

@@ -19,6 +19,7 @@ let USACheckboxElement = (() => {
           Roboto,
           Arial,
           sans-serif;
+        max-width: 30rem;
       }
 
       :host([tiled]) label {
@@ -184,7 +185,9 @@ let USACheckboxElement = (() => {
         _checked_decorators = [attr()];
         _name_decorators = [attr()];
         _value_decorators = [attr()];
-        _tiled_decorators = [attr()];
+        _tiled_decorators = [attr({
+                observed: false,
+            })];
         _onCheckboxChange_decorators = [listen("change", "input[type=checkbox]")];
         __esDecorate(_classThis, 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(_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);

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAuH5D,kBAAkB;;4BA/G9B,OAAO,CAAC;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8FF;gBACD,IAAI,CAAA;;;;;;;;;;KAUH;aACF;SACF,CAAC;;;;sBACsC,WAAW;;;;;;;;;;;;;;;+CAAnB,SAAQ,WAAW;;;YAIxC,wDAJE,mDAAkB,iDAIV,KAAK,IAAC;YAGhB,sJAAO,EAAE,IAAC;YAGV,qJAAQ,EAAE,IAAC;YAGX,sJAAQ,KAAK,IAAC;YAEvB,2FAAY,KAAK,CAAC,OAAO,CAAC,GAAC;YAC3B,wCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;QA8BtC,CAAC;QA1CC,IAAS,OAAO,8FAAS;QAAzB,IAAS,OAAO,mGAAS;QAGzB,IAAS,IAAI,2FAAM;QAAnB,IAAS,IAAI,gGAAM;QAGnB,IAAS,KAAK,4FAAM;QAApB,IAAS,KAAK,iGAAM;QAGpB,IAAS,KAAK,4FAAS;QAAvB,IAAS,KAAK,iGAAS;QAKvB,iBAAiB;YACf,MAAM,QAAQ,GAAG,uBAAA,IAAI,oCAAU,MAAd,IAAI,CAAY,CAAC;YAElC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,uBAAA,IAAI,qCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;YAED,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAChC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QAED,wBAAwB;YACtB,MAAM,QAAQ,GAAG,uBAAA,IAAI,oCAAU,MAAd,IAAI,CAAY,CAAC;YAElC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAChC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QAGD,gBAAgB;YACd,MAAM,QAAQ,GAAG,uBAAA,IAAI,oCAAU,MAAd,IAAI,CAAY,CAAC;YAElC,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,uBAAA,IAAI,qCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACN,uBAAA,IAAI,qCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;;;;;;;;;;+BA1CA,IAAI,EAAE;4BAGN,IAAI,EAAE;6BAGN,IAAI,EAAE;6BAGN,IAAI,EAAE;wCAwBN,MAAM,CAAC,QAAQ,EAAE,sBAAsB,CAAC;QAhCzC,gLAAS,OAAO,6BAAP,OAAO,yFAAS;QAGzB,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAGnB,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAGpB,0KAAS,KAAK,6BAAL,KAAK,qFAAS;QAwBvB,yMAAA,gBAAgB,6DAQf;QA7CH,6KA8CC;;;;IA7CQ,yBAAc,GAAG,IAAI,AAAP,CAAQ;;QADlB,uDAAkB;;;;SAAlB,kBAAkB"}
+{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IAwH5D,kBAAkB;;4BAhH9B,OAAO,CAAC;YACP,OAAO,EAAE,cAAc;YACvB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FF;gBACD,IAAI,CAAA;;;;;;;;;;KAUH;aACF;SACF,CAAC;;;;sBACsC,WAAW;;;;;;;;;;;;;;;+CAAnB,SAAQ,WAAW;;;YAIxC,wDAJE,mDAAkB,iDAIV,KAAK,IAAC;YAGhB,sJAAO,EAAE,IAAC;YAGV,qJAAQ,EAAE,IAAC;YAKX,sJAAQ,KAAK,IAAC;YAEvB,2FAAY,KAAK,CAAC,OAAO,CAAC,GAAC;YAC3B,wCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;QA8BtC,CAAC;QA5CC,IAAS,OAAO,8FAAS;QAAzB,IAAS,OAAO,mGAAS;QAGzB,IAAS,IAAI,2FAAM;QAAnB,IAAS,IAAI,gGAAM;QAGnB,IAAS,KAAK,4FAAM;QAApB,IAAS,KAAK,iGAAM;QAKpB,IAAS,KAAK,4FAAS;QAAvB,IAAS,KAAK,iGAAS;QAKvB,iBAAiB;YACf,MAAM,QAAQ,GAAG,uBAAA,IAAI,oCAAU,MAAd,IAAI,CAAY,CAAC;YAElC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,uBAAA,IAAI,qCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;YAED,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAChC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QAED,wBAAwB;YACtB,MAAM,QAAQ,GAAG,uBAAA,IAAI,oCAAU,MAAd,IAAI,CAAY,CAAC;YAElC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAChC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAC5B,CAAC;QAGD,gBAAgB;YACd,MAAM,QAAQ,GAAG,uBAAA,IAAI,oCAAU,MAAd,IAAI,CAAY,CAAC;YAElC,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,uBAAA,IAAI,qCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3C,CAAC;iBAAM,CAAC;gBACN,uBAAA,IAAI,qCAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;;;;;;;;;;+BA5CA,IAAI,EAAE;4BAGN,IAAI,EAAE;6BAGN,IAAI,EAAE;6BAGN,IAAI,CAAC;gBACJ,QAAQ,EAAE,KAAK;aAChB,CAAC;wCAwBD,MAAM,CAAC,QAAQ,EAAE,sBAAsB,CAAC;QAlCzC,gLAAS,OAAO,6BAAP,OAAO,yFAAS;QAGzB,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAGnB,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAKpB,0KAAS,KAAK,6BAAL,KAAK,qFAAS;QAwBvB,yMAAA,gBAAgB,6DAQf;QA/CH,6KAgDC;;;;IA/CQ,yBAAc,GAAG,IAAI,AAAP,CAAQ;;QADlB,uDAAkB;;;;SAAlB,kBAAkB"}

package/target/lib/define.d.ts

@@ -3,6 +3,7 @@ import "./alert/alert.element.js";
 import "./button/button.element.js";
 import "./checkbox/checkbox.element.js";
 import "./description/description.element.js";
+import "./file-input/file-input.element.js";
 import "./file-input/file-input-preview.element.js";
 import "./icon/icon.element.js";
 import "./input/input.element.js";
@@ -10,5 +11,8 @@ import "./input-mask/input-mask.element.js";
 import "./link/link.element.js";
 import "./radio/radio.element.js";
 import "./radio/radio-option.element.js";
+import "./select/select.element.js";
 import "./select/select-option.element.js";
 import "./tag/tag.element.js";
+import "./accordion/accordion.element.js";
+import "./side-nav/side-nav.element.js";

package/target/lib/define.js

@@ -3,6 +3,7 @@ import "./alert/alert.element.js";
 import "./button/button.element.js";
 import "./checkbox/checkbox.element.js";
 import "./description/description.element.js";
+import "./file-input/file-input.element.js";
 import "./file-input/file-input-preview.element.js";
 import "./icon/icon.element.js";
 import "./input/input.element.js";
@@ -10,6 +11,9 @@ import "./input-mask/input-mask.element.js";
 import "./link/link.element.js";
 import "./radio/radio.element.js";
 import "./radio/radio-option.element.js";
+import "./select/select.element.js";
 import "./select/select-option.element.js";
 import "./tag/tag.element.js";
+import "./accordion/accordion.element.js";
+import "./side-nav/side-nav.element.js";
 //# sourceMappingURL=define.js.map

package/target/lib/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,4CAA4C,CAAC;AACpD,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sBAAsB,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../src/lib/define.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,4CAA4C,CAAC;AACpD,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,gCAAgC,CAAC"}

package/target/lib/link/link.element.js

@@ -7,13 +7,15 @@ let USALinkElement = (() => {
             shadowDom: [
                 css `
       :host {
-        display: inline;
+        display: inline-flex;
         color: #005ea2;
         text-decoration: underline;
       }
 
       a {
         color: inherit;
+        text-decoration: inherit;
+        display: inherit;
       }
     `,
                 html `
@@ -82,7 +84,9 @@ let USALinkElement = (() => {
         _href_decorators = [attr()];
         _target_decorators = [attr()];
         _title_decorators = [attr()];
-        _disabled_decorators = [attr()];
+        _disabled_decorators = [attr({
+                observed: false,
+            })];
         __esDecorate(_classThis, null, _href_decorators, { kind: "accessor", name: "href", static: false, private: false, access: { has: obj => "href" in obj, get: obj => obj.href, set: (obj, value) => { obj.href = value; } }, metadata: _metadata }, _href_initializers, _href_extraInitializers);
         __esDecorate(_classThis, null, _target_decorators, { kind: "accessor", name: "target", static: false, private: false, access: { has: obj => "target" in obj, get: obj => obj.target, set: (obj, value) => { obj.target = value; } }, metadata: _metadata }, _target_initializers, _target_extraInitializers);
         __esDecorate(_classThis, null, _title_decorators, { kind: "accessor", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);

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

@@ -1 +1 @@
-{"version":3,"file":"link.element.js","sourceRoot":"","sources":["../../../src/lib/link/link.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IA6BpD,cAAc;;4BArB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;KAUF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBACkC,WAAW;;;;;;;;;;;;;2CAAnB,SAAQ,WAAW;;;YAEpC,4FAAO,EAAE,GAAC;YAGV,mJAAuD,EAAE,IAAC;YAG1D,mJAAQ,EAAE,IAAC;YAGX,wJAAW,KAAK,IAAC;YAE1B,wFAAU,KAAK,CAAC,GAAG,CAAC,GAAC;QAmBvB,CAAC;QA9BC,IAAS,IAAI,uFAAM;QAAnB,IAAS,IAAI,4FAAM;QAGnB,IAAS,MAAM,yFAAoD;QAAnE,IAAS,MAAM,8FAAoD;QAGnE,IAAS,KAAK,wFAAM;QAApB,IAAS,KAAK,6FAAM;QAGpB,IAAS,QAAQ,2FAAS;QAA1B,IAAS,QAAQ,gGAAS;QAI1B,wBAAwB,CAAC,IAAY;YACnC,MAAM,MAAM,GAAG,uBAAA,IAAI,8BAAQ,MAAZ,IAAI,CAAU,CAAC;YAE9B,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,MAAM;oBACT,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;oBACxB,MAAM;gBAER,KAAK,QAAQ;oBACX,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;oBAC5B,MAAM;gBAER,KAAK,OAAO;oBACV,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;oBAC3B,MAAM;YACV,CAAC;QACH,CAAC;;;;;;;;;;4BA9BA,IAAI,EAAE;8BAGN,IAAI,EAAE;6BAGN,IAAI,EAAE;gCAGN,IAAI,EAAE;QARP,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAGnB,6KAAS,MAAM,6BAAN,MAAM,uFAAoD;QAGnE,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAGpB,mLAAS,QAAQ,6BAAR,QAAQ,2FAAS;QAX5B,6KAgCC;;;QAhCY,uDAAc;;;;SAAd,cAAc"}
+{"version":3,"file":"link.element.js","sourceRoot":"","sources":["../../../src/lib/link/link.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;IA+BpD,cAAc;;4BAvB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;KAYF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC;;;;sBACkC,WAAW;;;;;;;;;;;;;2CAAnB,SAAQ,WAAW;;;YAEpC,4FAAO,EAAE,GAAC;YAGV,mJAAuD,EAAE,IAAC;YAG1D,mJAAQ,EAAE,IAAC;YAKX,wJAAW,KAAK,IAAC;YAE1B,wFAAU,KAAK,CAAC,GAAG,CAAC,GAAC;QAmBvB,CAAC;QAhCC,IAAS,IAAI,uFAAM;QAAnB,IAAS,IAAI,4FAAM;QAGnB,IAAS,MAAM,yFAAoD;QAAnE,IAAS,MAAM,8FAAoD;QAGnE,IAAS,KAAK,wFAAM;QAApB,IAAS,KAAK,6FAAM;QAKpB,IAAS,QAAQ,2FAAS;QAA1B,IAAS,QAAQ,gGAAS;QAI1B,wBAAwB,CAAC,IAAY;YACnC,MAAM,MAAM,GAAG,uBAAA,IAAI,8BAAQ,MAAZ,IAAI,CAAU,CAAC;YAE9B,QAAQ,IAAI,EAAE,CAAC;gBACb,KAAK,MAAM;oBACT,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;oBACxB,MAAM;gBAER,KAAK,QAAQ;oBACX,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;oBAC5B,MAAM;gBAER,KAAK,OAAO;oBACV,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;oBAC3B,MAAM;YACV,CAAC;QACH,CAAC;;;;;;;;;;4BAhCA,IAAI,EAAE;8BAGN,IAAI,EAAE;6BAGN,IAAI,EAAE;gCAGN,IAAI,CAAC;gBACJ,QAAQ,EAAE,KAAK;aAChB,CAAC;QAVF,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAGnB,6KAAS,MAAM,6BAAN,MAAM,uFAAoD;QAGnE,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAKpB,mLAAS,QAAQ,6BAAR,QAAQ,2FAAS;QAb5B,6KAkCC;;;QAlCY,uDAAc;;;;SAAd,cAAc"}

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

@@ -1,12 +1,15 @@
-import { USARadioElement } from "./radio.element.js";
 declare global {
     interface HTMLElementTagNameMap {
-        "usa-radio-option": USARadioElement;
+        "usa-radio-option": USARadioOptionElement;
     }
 }
 export declare class USARadioOptionElement extends HTMLElement {
     #private;
     accessor value: string;
+    accessor name: string;
+    accessor checked: boolean;
+    readonly radio: HTMLLabelElement;
+    constructor();
     attributeChangedCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

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

@@ -1,15 +1,15 @@
 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;
+    var _USARadioOptionElement_input, _USARadioOptionElement_slotEl, _USARadioOptionElement_value_accessor_storage, _USARadioOptionElement_name_accessor_storage, _USARadioOptionElement_checked_accessor_storage;
     let _classDecorators = [element({
             tagName: "usa-radio-option",
             shadowDom: [
                 css `
       :host {
-        display: inline-flex;
+        display: flex;
         flex-direction: column;
+        margin-top: 0.05rem;
       }
     `,
                 html `<slot></slot>`,
@@ -22,36 +22,58 @@ let USARadioOptionElement = (() => {
     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 = [];
     var USARadioOptionElement = _classThis = class extends _classSuper {
+        get value() { return __classPrivateFieldGet(this, _USARadioOptionElement_value_accessor_storage, "f"); }
+        set value(value) { __classPrivateFieldSet(this, _USARadioOptionElement_value_accessor_storage, value, "f"); }
+        get name() { return __classPrivateFieldGet(this, _USARadioOptionElement_name_accessor_storage, "f"); }
+        set name(value) { __classPrivateFieldSet(this, _USARadioOptionElement_name_accessor_storage, value, "f"); }
+        get checked() { return __classPrivateFieldGet(this, _USARadioOptionElement_checked_accessor_storage, "f"); }
+        set checked(value) { __classPrivateFieldSet(this, _USARadioOptionElement_checked_accessor_storage, value, "f"); }
         constructor() {
-            super(...arguments);
+            super();
             _USARadioOptionElement_value_accessor_storage.set(this, __runInitializers(this, _value_initializers, ""));
-            _USARadioOptionElement_parent.set(this, (__runInitializers(this, _value_extraInitializers), null));
+            _USARadioOptionElement_name_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _name_initializers, "")));
+            _USARadioOptionElement_checked_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _checked_initializers, false)));
+            this.radio = (__runInitializers(this, _checked_extraInitializers), document.createElement("label"));
+            _USARadioOptionElement_input.set(this, document.createElement("input"));
+            _USARadioOptionElement_slotEl.set(this, document.createElement("slot"));
+            __classPrivateFieldGet(this, _USARadioOptionElement_input, "f").type = "radio";
+            this.radio.append(__classPrivateFieldGet(this, _USARadioOptionElement_input, "f"), __classPrivateFieldGet(this, _USARadioOptionElement_slotEl, "f"));
         }
-        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;
+            __classPrivateFieldGet(this, _USARadioOptionElement_input, "f").name = this.name;
+            __classPrivateFieldGet(this, _USARadioOptionElement_input, "f").value = this.value;
+            __classPrivateFieldGet(this, _USARadioOptionElement_input, "f").checked = this.checked;
+            __classPrivateFieldGet(this, _USARadioOptionElement_slotEl, "f").name = this.value;
         }
         connectedCallback() {
-            if (this.parentElement instanceof USARadioElement) {
-                __classPrivateFieldSet(this, _USARadioOptionElement_parent, this.parentElement, "f");
-                this.parentElement.onOptionAdded(this);
-            }
+            this.dispatchEvent(new Event("usa::radio::option::added", { bubbles: true }));
         }
         disconnectedCallback() {
-            if (__classPrivateFieldGet(this, _USARadioOptionElement_parent, "f")) {
-                __classPrivateFieldGet(this, _USARadioOptionElement_parent, "f").onOptionRemoved(this);
-            }
+            this.radio.remove();
         }
     };
-    _USARadioOptionElement_parent = new WeakMap();
+    _USARadioOptionElement_input = new WeakMap();
+    _USARadioOptionElement_slotEl = new WeakMap();
     _USARadioOptionElement_value_accessor_storage = new WeakMap();
+    _USARadioOptionElement_name_accessor_storage = new WeakMap();
+    _USARadioOptionElement_checked_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()];
+        _name_decorators = [attr()];
+        _checked_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(_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, _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(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 });

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

@@ -1 +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"}
+{"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;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;;;;;;;;;;kDAAnB,SAAQ,WAAW;QAEpD,IAAS,KAAK,+FAAM;QAApB,IAAS,KAAK,oGAAM;QAGpB,IAAS,IAAI,8FAAM;QAAnB,IAAS,IAAI,mGAAM;QAGnB,IAAS,OAAO,iGAAS;QAAzB,IAAS,OAAO,sGAAS;QAOzB;YACE,KAAK,EAAE,CAAC;YAdD,qGAAQ,EAAE,GAAC;YAGX,uJAAO,EAAE,IAAC;YAGV,4JAAU,KAAK,IAAC;YAEhB,UAAK,yDAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,EAAC;YAExC,uCAAS,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,EAAC;YACzC,wCAAU,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,EAAC;YAKhD,uBAAA,IAAI,oCAAO,CAAC,IAAI,GAAG,OAAO,CAAC;YAE3B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,uBAAA,IAAI,oCAAO,EAAE,uBAAA,IAAI,qCAAQ,CAAC,CAAC;QAC/C,CAAC;QAED,wBAAwB;YACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;YAEvB,uBAAA,IAAI,oCAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC7B,uBAAA,IAAI,oCAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YAC/B,uBAAA,IAAI,oCAAO,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAEnC,uBAAA,IAAI,qCAAQ,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;;;;;;;;;;6BAxCA,IAAI,EAAE;4BAGN,IAAI,EAAE;+BAGN,IAAI,EAAE;QALP,0KAAS,KAAK,6BAAL,KAAK,qFAAM;QAGpB,uKAAS,IAAI,6BAAJ,IAAI,mFAAM;QAGnB,gLAAS,OAAO,6BAAP,OAAO,yFAAS;QAR3B,6KA0CC;;;QA1CY,uDAAqB;;;;SAArB,qBAAqB"}

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

@@ -1,4 +1,3 @@
-import type { USARadioOptionElement } from "./radio-option.element.js";
 declare global {
     interface HTMLElementTagNameMap {
         "usa-radio": USARadioElement;
@@ -10,9 +9,9 @@ export declare class USARadioElement extends HTMLElement {
     accessor value: string;
     accessor name: string;
     accessor tiled: boolean;
+    get shadow(): ShadowRoot;
     onChange(e: Event): void;
     connectedCallback(): void;
     attributeChangedCallback(): void;
-    onOptionAdded(el: USARadioOptionElement): void;
-    onOptionRemoved(el: USARadioOptionElement): void;
+    onOptionAdded(e: Event): void;
 }