@noctuatech/uswds 0.0.1

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

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

package/target/lib/button/button.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit";
+import { BUTTON_VARIANTS } from "./button.element.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-button",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <div style="display: inline-flex; flex-direction: column; gap: 1rem">
+        ${BUTTON_VARIANTS.map((variant, i) => html `<usa-button variant=${variant}>Hello World</usa-button> ${i ===
+            BUTTON_VARIANTS.length - 1
+            ? ""
+            : "\n\n"}`)}
+      </div>
+    `;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/lib/button/button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;UAEL,eAAe,CAAC,GAAG,CACnB,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CACb,IAAI,CAAA,uBAAuB,OAAO,6BAA6B,CAAC;YAC9D,eAAe,CAAC,MAAM,GAAG,CAAC;YACxB,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,MAAM,EAAE,CACjB;;KAEJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACwB,CAAC;AAEnC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

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

package/target/lib/button/button.test.js

@@ -0,0 +1,14 @@
+import "./button.element.js";
+import { fixture, html, assert } from "@open-wc/testing";
+import { BUTTON_VARIANTS } from "./button.element.js";
+describe("usa-button", () => {
+    for (let variant of BUTTON_VARIANTS) {
+        it("should be accessible", async () => {
+            const button = await fixture(html `
+        <usa-button variant=${variant}>Hello World</usa-button>
+      `);
+            return assert.isAccessible(button);
+        });
+    }
+});
+//# sourceMappingURL=button.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.test.js","sourceRoot":"","sources":["../../../src/lib/button/button.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAoB,MAAM,qBAAqB,CAAC;AAExE,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,KAAK,IAAI,OAAO,IAAI,eAAe,EAAE,CAAC;QACpC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;YACpC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA;8BAC3B,OAAO;OAC9B,CAAC,CAAC;YAEH,OAAO,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,16 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-checkbox": USACheckboxElement;
+    }
+}
+export declare class USACheckboxElement extends HTMLElement {
+    #private;
+    static formAssociated: boolean;
+    accessor checked: boolean;
+    accessor name: string;
+    accessor value: string;
+    accessor tiled: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    onCheckboxChange(): void;
+}

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

@@ -0,0 +1,205 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, listen, query } from "@joist/element";
+let USACheckboxElement = (() => {
+    var _USACheckboxElement_checkbox, _USACheckboxElement_internals, _USACheckboxElement_checked_accessor_storage, _USACheckboxElement_name_accessor_storage, _USACheckboxElement_value_accessor_storage, _USACheckboxElement_tiled_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-checkbox",
+            shadowDom: [
+                css `
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: inline-block;
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+      }
+
+      :host([tiled]) label {
+        background-color: #fff;
+        border: 2px solid #c9c9c9;
+        border-radius: 0.25rem;
+        color: #1b1b1b;
+        padding: 0.75rem 1rem 0.75rem 0.75rem;
+      }
+
+      label {
+        display: inline-flex;
+        cursor: pointer;
+        font-size: 1.06rem;
+        line-height: 1.3;
+        flex-wrap: wrap;
+      }
+
+      .checkbox {
+        background: #fff;
+        box-shadow: 0 0 0 2px #1b1b1b;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 1.25rem;
+        width: 1.25rem;
+        border-radius: 2px;
+        position: relative;
+        margin-right: 0.75rem;
+      }
+
+      input:checked + .checkbox {
+        background-color: #005ea2;
+        box-shadow: 0 0 0 2px #005ea2;
+      }
+
+      input:checked + .checkbox::after {
+        content: " ";
+        display: block;
+        height: 1rem;
+        width: 0.5rem;
+        border-right: 4px solid rgb(255, 255, 255);
+        border-bottom: 4px solid rgb(255, 255, 255);
+        transform: rotate(45deg) scale(0.65);
+      }
+
+      input {
+        height: 0;
+        width: 0;
+        position: absolute;
+        left: -999em;
+        right: auto;
+      }
+
+      input:focus + .checkbox {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0.25rem;
+      }
+
+      .description {
+        display: block;
+        font-size: 0.93rem;
+        margin-top: 0.5rem;
+      }
+
+      .break {
+        flex-basis: 100%;
+        height: 0;
+      }
+
+      .spacer {
+        height: 1.25rem;
+        width: 1.25rem;
+        margin-right: 0.75rem;
+      }
+
+      :host([tiled]) label:has(input:checked) {
+        background-color: rgba(0, 94, 162, 0.1);
+        border-color: #005ea2;
+      }
+    `,
+                html `
+      <label>
+        <input type="checkbox" />
+
+        <div class="checkbox"></div>
+
+        <div class="title">
+          <slot></slot>
+        </div>
+      </label>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _checked_decorators;
+    let _checked_initializers = [];
+    let _checked_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _tiled_decorators;
+    let _tiled_initializers = [];
+    let _tiled_extraInitializers = [];
+    let _onCheckboxChange_decorators;
+    var USACheckboxElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USACheckboxElement_checked_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _checked_initializers, false)));
+            _USACheckboxElement_name_accessor_storage.set(this, (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _name_initializers, "")));
+            _USACheckboxElement_value_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, "")));
+            _USACheckboxElement_tiled_accessor_storage.set(this, (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _tiled_initializers, false)));
+            _USACheckboxElement_checkbox.set(this, (__runInitializers(this, _tiled_extraInitializers), query("input")));
+            _USACheckboxElement_internals.set(this, this.attachInternals());
+        }
+        get checked() { return __classPrivateFieldGet(this, _USACheckboxElement_checked_accessor_storage, "f"); }
+        set checked(value) { __classPrivateFieldSet(this, _USACheckboxElement_checked_accessor_storage, value, "f"); }
+        get name() { return __classPrivateFieldGet(this, _USACheckboxElement_name_accessor_storage, "f"); }
+        set name(value) { __classPrivateFieldSet(this, _USACheckboxElement_name_accessor_storage, value, "f"); }
+        get value() { return __classPrivateFieldGet(this, _USACheckboxElement_value_accessor_storage, "f"); }
+        set value(value) { __classPrivateFieldSet(this, _USACheckboxElement_value_accessor_storage, value, "f"); }
+        get tiled() { return __classPrivateFieldGet(this, _USACheckboxElement_tiled_accessor_storage, "f"); }
+        set tiled(value) { __classPrivateFieldSet(this, _USACheckboxElement_tiled_accessor_storage, value, "f"); }
+        connectedCallback() {
+            const checkbox = __classPrivateFieldGet(this, _USACheckboxElement_checkbox, "f").call(this);
+            if (this.checked) {
+                __classPrivateFieldGet(this, _USACheckboxElement_internals, "f").setFormValue(this.value);
+            }
+            checkbox.checked = this.checked;
+            checkbox.name = this.name;
+        }
+        attributeChangedCallback() {
+            const checkbox = __classPrivateFieldGet(this, _USACheckboxElement_checkbox, "f").call(this);
+            checkbox.checked = this.checked;
+            checkbox.name = this.name;
+        }
+        onCheckboxChange() {
+            const checkbox = __classPrivateFieldGet(this, _USACheckboxElement_checkbox, "f").call(this);
+            if (checkbox.checked) {
+                __classPrivateFieldGet(this, _USACheckboxElement_internals, "f").setFormValue(this.value);
+            }
+            else {
+                __classPrivateFieldGet(this, _USACheckboxElement_internals, "f").setFormValue(null);
+            }
+        }
+    };
+    _USACheckboxElement_checkbox = new WeakMap();
+    _USACheckboxElement_internals = new WeakMap();
+    _USACheckboxElement_checked_accessor_storage = new WeakMap();
+    _USACheckboxElement_name_accessor_storage = new WeakMap();
+    _USACheckboxElement_value_accessor_storage = new WeakMap();
+    _USACheckboxElement_tiled_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USACheckboxElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _checked_decorators = [attr()];
+        _name_decorators = [attr()];
+        _value_decorators = [attr()];
+        _tiled_decorators = [attr()];
+        _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);
+        __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, _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, _onCheckboxChange_decorators, { kind: "method", name: "onCheckboxChange", static: false, private: false, access: { has: obj => "onCheckboxChange" in obj, get: obj => obj.onCheckboxChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USACheckboxElement = _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 USACheckboxElement = _classThis;
+})();
+export { USACheckboxElement };
+//# sourceMappingURL=checkbox.element.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,31 @@
+import type { StoryObj } from "@storybook/web-components";
+import type { USACheckboxElement } from "./checkbox.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    render(args: USACheckboxElement & {
+        description: string;
+    }): import("lit-html").TemplateResult<1>;
+    argTypes: {
+        name: {
+            control: "text";
+        };
+        value: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        tiled: {
+            control: "boolean";
+        };
+    };
+    args: {
+        name: string;
+        value: string;
+        tiled: false;
+    };
+};
+export default meta;
+type Story = StoryObj<USACheckboxElement>;
+export declare const Primary: Story;

package/target/lib/checkbox/checkbox.stories.js

@@ -0,0 +1,46 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { when } from "lit/directives/when.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-checkbox",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-checkbox
+        name=${args.name}
+        value=${ifDefined(args.value)}
+        checked=${ifDefined(args.checked)}
+        ?tiled=${args.tiled}
+      >
+        Hello World
+        ${when(args.description, () => html `<usa-description>${args.description}</usa-description>`)}
+      </usa-checkbox>
+    `;
+    },
+    argTypes: {
+        name: {
+            control: "text",
+        },
+        value: {
+            control: "text",
+        },
+        description: {
+            control: "text",
+        },
+        tiled: {
+            control: "boolean",
+        },
+    },
+    args: {
+        name: "toc",
+        value: "agree",
+        tiled: false,
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=checkbox.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAI9C,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,cAAc;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;eAEA,IAAI,CAAC,IAAI;gBACR,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;kBACnB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;iBACxB,IAAI,CAAC,KAAK;;;UAGjB,IAAI,CACJ,IAAI,CAAC,WAAW,EAChB,GAAG,EAAE,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,WAAW,oBAAoB,CACnE;;KAEJ,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;SAChB;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;SAChB;QACD,KAAK,EAAE;YACL,OAAO,EAAE,SAAS;SACnB;KACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,OAAO;QACd,KAAK,EAAE,KAAK;KACb;CAC2D,CAAC;AAE/D,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

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

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

package/target/lib/checkbox/checkbox.test.js

@@ -0,0 +1,38 @@
+import "./checkbox.element.js";
+import { fixture, html, assert } from "@open-wc/testing";
+describe("usa-checkbox", () => {
+    it("should be accessible", async () => {
+        const form = await fixture(html `
+      <usa-checkbox name="fname" value="Foo">Hello World</usa-checkbox>
+    `);
+        return assert.isAccessible(form);
+    });
+    it("should submit form with default values", async () => {
+        const form = await fixture(html `
+      <form>
+        <usa-checkbox name="enabled" value="test" checked>
+          Hello World
+        </usa-checkbox>
+
+        <button>Submit</button>
+      </form>
+    `);
+        const value = new FormData(form);
+        assert.equal(value.get("enabled"), "test");
+    });
+    it("should update form value as input value changed", async () => {
+        const form = await fixture(html `
+      <form>
+        <usa-checkbox name="enabled" value="test">Hello World</usa-checkbox>
+
+        <button>Submit</button>
+      </form>
+    `);
+        const checkbox = form.querySelector("usa-checkbox");
+        const nativeInput = checkbox.shadowRoot.querySelector("input");
+        nativeInput.click();
+        const value = new FormData(form);
+        assert.equal(value.get("enabled"), "test");
+    });
+});
+//# sourceMappingURL=checkbox.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.test.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.test.ts"],"names":[],"mappings":"AAAA,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAEzD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;KAE/C,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;;;KAQ/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QAC/D,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAE,CAAC;QACrD,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QACjE,WAAW,CAAC,KAAK,EAAE,CAAC;QAEpB,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,8 @@
+export declare class USAConfig {
+    spriteSheet: string;
+}
+export declare class USAConfigElement extends HTMLElement implements USAConfig {
+    #private;
+    accessor spriteSheet: string;
+    connectedCallback(): void;
+}

package/target/lib/config/config.element.js

@@ -0,0 +1,57 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { inject, injectable, Injector } from "@joist/di";
+import { attr, css, element, html } from "@joist/element";
+export class USAConfig {
+    constructor() {
+        this.spriteSheet = "";
+    }
+}
+let USAConfigElement = (() => {
+    var _USAConfigElement_injector, _USAConfigElement_spriteSheet_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-config",
+            shadowDom: [
+                css `
+      :host {
+        display: contents;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        }), injectable()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _spriteSheet_decorators;
+    let _spriteSheet_initializers = [];
+    let _spriteSheet_extraInitializers = [];
+    var USAConfigElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USAConfigElement_spriteSheet_accessor_storage.set(this, __runInitializers(this, _spriteSheet_initializers, "/assets/img/sprite.svg"));
+            _USAConfigElement_injector.set(this, (__runInitializers(this, _spriteSheet_extraInitializers), inject(Injector)));
+        }
+        get spriteSheet() { return __classPrivateFieldGet(this, _USAConfigElement_spriteSheet_accessor_storage, "f"); }
+        set spriteSheet(value) { __classPrivateFieldSet(this, _USAConfigElement_spriteSheet_accessor_storage, value, "f"); }
+        connectedCallback() {
+            const { providers } = __classPrivateFieldGet(this, _USAConfigElement_injector, "f").call(this);
+            providers.push({ provide: USAConfig, factory: () => this });
+        }
+    };
+    _USAConfigElement_injector = new WeakMap();
+    _USAConfigElement_spriteSheet_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USAConfigElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _spriteSheet_decorators = [attr()];
+        __esDecorate(_classThis, null, _spriteSheet_decorators, { kind: "accessor", name: "spriteSheet", static: false, private: false, access: { has: obj => "spriteSheet" in obj, get: obj => obj.spriteSheet, set: (obj, value) => { obj.spriteSheet = value; } }, metadata: _metadata }, _spriteSheet_initializers, _spriteSheet_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAConfigElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USAConfigElement = _classThis;
+})();
+export { USAConfigElement };
+//# sourceMappingURL=config.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.element.js","sourceRoot":"","sources":["../../../src/lib/config/config.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE1D,MAAM,OAAO,SAAS;IAAtB;QACE,gBAAW,GAAG,EAAE,CAAC;IACnB,CAAC;CAAA;IAcY,gBAAgB;;4BAZ5B,OAAO,CAAC;YACP,OAAO,EAAE,YAAY;YACrB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;KAIF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC,EACD,UAAU,EAAE;;;;sBACyB,WAAW;;;;6CAAnB,SAAQ,WAAW;;;YAEtC,4GAAc,wBAAwB,GAAC;YAEhD,+FAAY,MAAM,CAAC,QAAQ,CAAC,GAAC;QAO/B,CAAC;QATC,IAAS,WAAW,gGAA4B;QAAhD,IAAS,WAAW,qGAA4B;QAIhD,iBAAiB;YACf,MAAM,EAAE,SAAS,EAAE,GAAG,uBAAA,IAAI,kCAAU,MAAd,IAAI,CAAY,CAAC;YAEvC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,CAAC;QAC9D,CAAC;;;;;;;mCATA,IAAI,EAAE;QACP,4LAAS,WAAW,6BAAX,WAAW,iGAA4B;QAFlD,6KAWC;;;QAXY,uDAAgB;;;;SAAhB,gBAAgB"}

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

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

package/target/lib/config/config.test.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"config.test.js","sourceRoot":"","sources":["../../../src/lib/config/config.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA;;KAElD,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/define.d.ts

@@ -0,0 +1,14 @@
+import "./config/config.element.js";
+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-preview.element.js";
+import "./icon/icon.element.js";
+import "./input/input.element.js";
+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-option.element.js";
+import "./tag/tag.element.js";

package/target/lib/define.js

@@ -0,0 +1,15 @@
+import "./config/config.element.js";
+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-preview.element.js";
+import "./icon/icon.element.js";
+import "./input/input.element.js";
+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-option.element.js";
+import "./tag/tag.element.js";
+//# sourceMappingURL=define.js.map

package/target/lib/define.js.map

@@ -0,0 +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"}

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

@@ -0,0 +1,7 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-description": USADescriptionElement;
+    }
+}
+export declare class USADescriptionElement extends HTMLElement {
+}

package/target/lib/description/description.element.js

@@ -0,0 +1,34 @@
+import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { css, element, html } from "@joist/element";
+let USADescriptionElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-description",
+            shadowDom: [
+                css `
+      :host {
+        display: block;
+        font-size: 0.93rem;
+        margin-top: 0.5rem;
+      }
+    `,
+                html ` <slot></slot> `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    var USADescriptionElement = _classThis = class extends _classSuper {
+    };
+    __setFunctionName(_classThis, "USADescriptionElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USADescriptionElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USADescriptionElement = _classThis;
+})();
+export { USADescriptionElement };
+//# sourceMappingURL=description.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"description.element.js","sourceRoot":"","sources":["../../../src/lib/description/description.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IAqBvC,qBAAqB;4BAbjC,OAAO,CAAC;YACP,OAAO,EAAE,iBAAiB;YAC1B,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;KAMF;gBACD,IAAI,CAAA,iBAAiB;aACtB;SACF,CAAC;;;;sBACyC,WAAW;kDAAnB,SAAQ,WAAW;;;;;QAAtD,6KAAyD;;;QAA5C,uDAAqB;;;;SAArB,qBAAqB"}

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

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

package/target/lib/description/description.test.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"description.test.js","sourceRoot":"","sources":["../../../src/lib/description/description.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,WAAW,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;KAE5D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/file-input/file-input-preview.element.d.ts

@@ -0,0 +1,11 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-file-input-preview": USAFileInputPreviewElement;
+    }
+}
+export declare class USAFileInputPreviewElement extends HTMLElement {
+    #private;
+    accessor files: FileList | null;
+    connectedCallback(): void;
+    onChange(): void;
+}