@noctuatech/uswds 0.0.28 → 0.0.30

package/target/lib/card/card.element.js

@@ -0,0 +1,79 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html } from "@joist/element";
+let USACardElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-card",
+            shadowDom: [
+                css `
+      :host {
+        color: #1b1b1b;
+        background-color: #fff;
+        font-size: 1.06rem;
+        line-height: 1.5;
+        border-width: 2px;
+        border-color: #e6e6e6;
+        border-style: solid;
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        border-radius: 0.25rem;
+      }
+
+      :host([variant="flag"]) {
+        padding-left: 15rem;
+      }
+
+      :host([variant="flag"]) ::slotted(usa-card-media) {
+        position: absolute;
+        bottom: 0;
+        top: 0;
+        left: 0;
+        width: 15rem;
+      }
+
+      :host([variant="flag"]) ::slotted(usa-card-media[variant="inset"]) {
+        padding-bottom: 1.5rem;
+        padding-right: 0;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _role_decorators;
+    let _role_initializers = [];
+    let _role_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    var USACardElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _role_decorators = [attr()];
+            _variant_decorators = [attr()];
+            __esDecorate(this, null, _role_decorators, { kind: "accessor", name: "role", static: false, private: false, access: { has: obj => "role" in obj, get: obj => obj.role, set: (obj, value) => { obj.role = value; } }, metadata: _metadata }, _role_initializers, _role_extraInitializers);
+            __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            USACardElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #role_accessor_storage = __runInitializers(this, _role_initializers, "listitem");
+        get role() { return this.#role_accessor_storage; }
+        set role(value) { this.#role_accessor_storage = value; }
+        #variant_accessor_storage = (__runInitializers(this, _role_extraInitializers), __runInitializers(this, _variant_initializers, "default"));
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _variant_extraInitializers);
+        }
+    };
+    return USACardElement = _classThis;
+})();
+export { USACardElement };
+//# sourceMappingURL=card.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.element.js","sourceRoot":"","sources":["../../../src/lib/card/card.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;IA8C7C,cAAc;4BAtC1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BF;gBACD,IAAI,CAAA,eAAe;aACpB;SACF,CAAC;;;;sBACkC,WAAW;;;;;;;8BAAnB,SAAQ,WAAW;;;;gCAC5C,IAAI,EAAE;mCAGN,IAAI,EAAE;YAFP,iKAAS,IAAI,6BAAJ,IAAI,mFAAc;YAG3B,0KAAS,OAAO,6BAAP,OAAO,yFAAiC;YALnD,6KAMC;;;YANY,uDAAc;;QAEzB,qEAAgB,UAAU,EAAC;QAA3B,IAAS,IAAI,0CAAc;QAA3B,IAAS,IAAI,gDAAc;QAG3B,8HAAuC,SAAS,GAAC;QAAjD,IAAS,OAAO,6CAAiC;QAAjD,IAAS,OAAO,mDAAiC;;;;;;;;SALtC,cAAc"}

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

@@ -0,0 +1,12 @@
+import type { StoryObj } from "@storybook/web-components";
+import type { USACardElement } from "./card.element.js";
+declare const meta: {
+    title: string;
+    tags: string[];
+    argTypes: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<USACardElement>;
+export declare const Primary: Story;
+export declare const Flag: Story;

package/target/lib/card/card.stories.js

@@ -0,0 +1,126 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-card",
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    render() {
+        return html `
+      <usa-card-group>
+        <usa-card>
+          <usa-card-header>Card</usa-card-header>
+
+          <usa-card-body>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+            earum tenetur quo cupiditate, eaque qui officia recusandae.
+          </usa-card-body>
+
+          <usa-card-footer>
+            <usa-button>Visit Florida Keys</usa-button>
+          </usa-card-footer>
+        </usa-card>
+
+        <usa-card>
+          <usa-card-media>
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
+          </usa-card-media>
+
+          <usa-card-header>Card with media</usa-card-header>
+
+          <usa-card-body>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+            earum tenetur quo cupiditate, eaque qui officia recusandae.
+          </usa-card-body>
+
+          <usa-card-footer>
+            <usa-button>Visit Florida Keys</usa-button>
+          </usa-card-footer>
+        </usa-card>
+
+        <usa-card>
+          <usa-card-header>Media with heaer first</usa-card-header>
+
+          <usa-card-media>
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
+          </usa-card-media>
+
+          <usa-card-body>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
+            possimus similique nemo odit doloremque laudantium?
+          </usa-card-body>
+
+          <usa-card-footer>
+            <usa-button>Visit Florida Keys</usa-button>
+          </usa-card-footer>
+        </usa-card>
+
+        <usa-card>
+          <usa-card-media variant="inset">
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
+          </usa-card-media>
+
+          <usa-card-header>Inset media</usa-card-header>
+
+          <usa-card-body>
+            Etiam vitae sodales metus. Fusce id orci dignissim, efficitur risus
+            eget, tempus odio. Donec lectus ante, auctor eget cursus sed,
+            convallis quis magna. Orci varius natoque penatibus et magnis dis
+            parturient montes, nascetur ridiculus mus. Mauris mattis tellus
+            bibendum aliquet malesuada.
+          </usa-card-body>
+
+          <usa-card-footer>
+            <usa-button>Visit Florida Keys</usa-button>
+          </usa-card-footer>
+        </usa-card>
+      </usa-card-group>
+    `;
+    },
+};
+export const Flag = {
+    render() {
+        return html `
+      <usa-card-group variant="flag">
+        <usa-card variant="flag">
+          <usa-card-media>
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
+          </usa-card-media>
+
+          <usa-card-header>Card with media</usa-card-header>
+
+          <usa-card-body>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+            earum tenetur quo cupiditate, eaque qui officia recusandae.
+          </usa-card-body>
+
+          <usa-card-footer>
+            <usa-button>Visit Florida Keys</usa-button>
+          </usa-card-footer>
+        </usa-card>
+
+        <usa-card variant="flag">
+          <usa-card-media variant="inset">
+            <img src="./img/built-to-grow--alt.jpg" alt="A placeholder image" />
+          </usa-card-media>
+
+          <usa-card-header>Card with media</usa-card-header>
+
+          <usa-card-body>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+            earum tenetur quo cupiditate, eaque qui officia recusandae.
+          </usa-card-body>
+
+          <usa-card-footer>
+            <usa-button>Visit Florida Keys</usa-button>
+          </usa-card-footer>
+        </usa-card>
+      </usa-card-group>
+    `;
+    },
+};
+//# sourceMappingURL=card.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.stories.js","sourceRoot":"","sources":["../../../src/lib/card/card.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqEV,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCV,CAAC;IACJ,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,6 @@
+import "./card.element.js";
+import "./card-body/card-body.element.js";
+import "./card-footer/card-footer.element.js";
+import "./card-group/card-group.element.js";
+import "./card-header/card-header.element.js";
+import "./card-media/card-media.element.js";

package/target/lib/card/card.test.js

@@ -0,0 +1,33 @@
+import "./card.element.js";
+import "./card-body/card-body.element.js";
+import "./card-footer/card-footer.element.js";
+import "./card-group/card-group.element.js";
+import "./card-header/card-header.element.js";
+import "./card-media/card-media.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+describe("usa-card", () => {
+    it("should be accessible", async () => {
+        const card = await fixture(html `
+      <usa-card-group>
+        <usa-card>
+          <usa-card-media>
+            <img src="/img/built-to-grow--alt.jpg" alt="A placeholder image" />
+          </usa-card-media>
+
+          <usa-card-header>Card with media</usa-card-header>
+
+          <usa-card-body>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
+            earum tenetur quo cupiditate, eaque qui officia recusandae.
+          </usa-card-body>
+
+          <usa-card-footer>
+            <usa-button>Visit Florida Keys</usa-button>
+          </usa-card-footer>
+        </usa-card>
+      </usa-card-group>
+    `);
+        return assert.isAccessible(card);
+    });
+});
+//# sourceMappingURL=card.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.test.js","sourceRoot":"","sources":["../../../src/lib/card/card.test.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;KAmB9C,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,17 @@
+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 required: boolean;
+    accessor tiled: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    onCheckboxChange(): void;
+}

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

@@ -0,0 +1,206 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { attr, css, element, html, listen, query } from "@joist/element";
+let USACheckboxElement = (() => {
+    let _classDecorators = [element({
+            tagName: "usa-checkbox",
+            shadowDom: [
+                css `
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        display: inline-block;
+        max-width: 30rem;
+        position: relative;
+      }
+
+      :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 {
+        position: absolute;
+      }
+
+      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" tabindex="0"/>
+
+        <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 _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _tiled_decorators;
+    let _tiled_initializers = [];
+    let _tiled_extraInitializers = [];
+    let _onCheckboxChange_decorators;
+    var USACheckboxElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _checked_decorators = [attr()];
+            _name_decorators = [attr()];
+            _value_decorators = [attr()];
+            _required_decorators = [attr()];
+            _tiled_decorators = [attr({
+                    observed: false,
+                })];
+            _onCheckboxChange_decorators = [listen("change", "input[type=checkbox]")];
+            __esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(this, null, _tiled_decorators, { kind: "accessor", name: "tiled", static: false, private: false, access: { has: obj => "tiled" in obj, get: obj => obj.tiled, set: (obj, value) => { obj.tiled = value; } }, metadata: _metadata }, _tiled_initializers, _tiled_extraInitializers);
+            __esDecorate(this, null, _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 });
+        }
+        static formAssociated = true;
+        #checked_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _checked_initializers, false));
+        get checked() { return this.#checked_accessor_storage; }
+        set checked(value) { this.#checked_accessor_storage = value; }
+        #name_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _name_initializers, ""));
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ""));
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #required_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _required_initializers, false));
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        #tiled_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _tiled_initializers, false));
+        get tiled() { return this.#tiled_accessor_storage; }
+        set tiled(value) { this.#tiled_accessor_storage = value; }
+        #checkbox = (__runInitializers(this, _tiled_extraInitializers), query("input"));
+        #internals = this.attachInternals();
+        connectedCallback() {
+            const checkbox = this.#checkbox();
+            checkbox.checked = this.checked;
+            checkbox.name = this.name;
+            this.#syncFormState();
+        }
+        attributeChangedCallback() {
+            const checkbox = this.#checkbox();
+            checkbox.checked = this.checked;
+            checkbox.name = this.name;
+            this.#syncFormState();
+        }
+        onCheckboxChange() {
+            const checkbox = this.#checkbox();
+            this.checked = checkbox.checked;
+            this.#syncFormState();
+        }
+        #syncFormState() {
+            const checkbox = this.#checkbox();
+            if (checkbox.checked) {
+                this.#internals.setFormValue(this.value);
+            }
+            else {
+                this.#internals.setFormValue(null);
+            }
+            if (this.required && !checkbox.checked) {
+                this.#internals.setValidity({ valueMissing: true }, "Please check this box if you want to proceed", this.#checkbox());
+            }
+            else {
+                this.#internals.setValidity({});
+            }
+        }
+        static {
+            __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":"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"}

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,52 @@
+import "./checkbox.element.js";
+import { assert, fixture, html } 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");
+        if (nativeInput) {
+            nativeInput.click();
+        }
+        const value = new FormData(form);
+        assert.equal(value.get("enabled"), "test");
+    });
+    it("should not submit when not valid", async () => {
+        const form = await fixture(html `
+      <form>
+        <usa-checkbox name="enabled" value="test" required>
+          Hello World
+        </usa-checkbox>
+
+        <button>Submit</button>
+      </form>
+    `);
+        assert.equal(form.checkValidity(), false);
+    });
+});
+//# 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,MAAM,EAAE,OAAO,EAAE,IAAI,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,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAEjE,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,KAAK,EAAE,CAAC;QACtB,CAAC;QAED,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,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAkB,IAAI,CAAA;;;;;;;;KAQ/C,CAAC,CAAC;QAEH,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+export declare class USAConfig {
+    iconPath: string;
+}
+export declare class USAConfigElement extends HTMLElement {
+    accessor iconPath: string;
+}