@noctuatech/uswds 0.0.1

package/target/lib/input/input.test.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.test.js","sourceRoot":"","sources":["../../../src/lib/input/input.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,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;;;;;;KAM/C,CAAC,CAAC;QAEH,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,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,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAE,CAAC;QAC/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAW,CAAC,aAAa,CAAC,OAAO,CAAE,CAAC;QAC9D,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;QAE1B,MAAM,SAAS,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEtD,MAAM,KAAK,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEjC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/target/lib/input-mask/format.d.ts

@@ -0,0 +1,15 @@
+export declare enum PatternChar {
+    Any = "*",
+    Number = "9",
+    Letter = "A"
+}
+export declare const PATTERN_CHARS: PatternChar[];
+export declare const REG_EXPS: {
+    Letters: RegExp;
+    Numbers: RegExp;
+};
+export interface FormattedResult {
+    raw: string;
+    formatted: string;
+}
+export declare function format(value: string, pattern: string): FormattedResult;

package/target/lib/input-mask/format.js

@@ -0,0 +1,47 @@
+export var PatternChar;
+(function (PatternChar) {
+    PatternChar["Any"] = "*";
+    PatternChar["Number"] = "9";
+    PatternChar["Letter"] = "A";
+})(PatternChar || (PatternChar = {}));
+export const PATTERN_CHARS = Object.values(PatternChar);
+export const REG_EXPS = {
+    Letters: /^[a-z]/i,
+    Numbers: /^[0-9]/i,
+};
+export function format(value, pattern) {
+    const raw = value.replace(/[^a-z0-9]/gi, ""); // remove all special chars
+    const chars = raw.split("");
+    let count = 0;
+    let formatted = "";
+    for (var i = 0; i < pattern.length; i++) {
+        const patternChar = pattern[i];
+        const char = chars[count];
+        if (char && patternChar) {
+            if (patternChar === PatternChar.Any) {
+                // Any letter or number
+                formatted += char;
+                count++;
+            }
+            else if (patternChar === PatternChar.Number) {
+                // Numbers only
+                if (/^[0-9]/i.test(char)) {
+                    formatted += char;
+                }
+                count++;
+            }
+            else if (patternChar === PatternChar.Letter) {
+                // Letters only
+                if (/^[a-z]/i.test(char)) {
+                    formatted += char;
+                }
+                count++;
+            }
+            else {
+                formatted += patternChar;
+            }
+        }
+    }
+    return { raw, formatted };
+}
+//# sourceMappingURL=format.js.map

package/target/lib/input-mask/format.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format.js","sourceRoot":"","sources":["../../../src/lib/input-mask/format.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,wBAAS,CAAA;IACT,2BAAY,CAAA;IACZ,2BAAY,CAAA;AACd,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;AAExD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;CACnB,CAAC;AAOF,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,OAAe;IACnD,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC,CAAC,2BAA2B;IACzE,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IAE5B,IAAI,KAAK,GAAG,CAAC,CAAC;IACd,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACxC,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QAC/B,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,IAAI,IAAI,WAAW,EAAE,CAAC;YACxB,IAAI,WAAW,KAAK,WAAW,CAAC,GAAG,EAAE,CAAC;gBACpC,uBAAuB;gBACvB,SAAS,IAAI,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC;YACV,CAAC;iBAAM,IAAI,WAAW,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;gBAC9C,eAAe;gBACf,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzB,SAAS,IAAI,IAAI,CAAC;gBACpB,CAAC;gBAED,KAAK,EAAE,CAAC;YACV,CAAC;iBAAM,IAAI,WAAW,KAAK,WAAW,CAAC,MAAM,EAAE,CAAC;gBAC9C,eAAe;gBACf,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBACzB,SAAS,IAAI,IAAI,CAAC;gBACpB,CAAC;gBAED,KAAK,EAAE,CAAC;YACV,CAAC;iBAAM,CAAC;gBACN,SAAS,IAAI,WAAW,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC;AAC5B,CAAC"}

package/target/lib/input-mask/input-mask.element.d.ts

@@ -0,0 +1,12 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-input-mask": USAInputMaskElement;
+    }
+}
+export declare class USAInputMaskElement extends HTMLElement {
+    #private;
+    accessor mask: string;
+    connectedCallback(): void;
+    onInput(e: Event): Promise<void>;
+    onKeyDown(e: KeyboardEvent): void;
+}

package/target/lib/input-mask/input-mask.element.js

@@ -0,0 +1,111 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, listen } from "@joist/element";
+import { format, PATTERN_CHARS, PatternChar, REG_EXPS } from "./format.js";
+let USAInputMaskElement = (() => {
+    var _USAInputMaskElement_instances, _USAInputMaskElement_getMaskFor, _USAInputMaskElement_mask_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-input-mask",
+            shadowDom: [
+                css `
+      :host {
+        display: contents;
+      }
+    `,
+                html `<slot></slot>`,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _mask_decorators;
+    let _mask_initializers = [];
+    let _mask_extraInitializers = [];
+    let _onInput_decorators;
+    let _onKeyDown_decorators;
+    var USAInputMaskElement = _classThis = class extends _classSuper {
+        get mask() { return __classPrivateFieldGet(this, _USAInputMaskElement_mask_accessor_storage, "f"); }
+        set mask(value) { __classPrivateFieldSet(this, _USAInputMaskElement_mask_accessor_storage, value, "f"); }
+        connectedCallback() {
+            for (let input of this.querySelectorAll("[mask]")) {
+                const { formatted } = format(input.value, __classPrivateFieldGet(this, _USAInputMaskElement_instances, "m", _USAInputMaskElement_getMaskFor).call(this, input));
+                input.value = formatted;
+            }
+        }
+        async onInput(e) {
+            const input = e.target;
+            const selectionStart = input.selectionStart || 0;
+            const prev = input.value;
+            const mask = __classPrivateFieldGet(this, _USAInputMaskElement_instances, "m", _USAInputMaskElement_getMaskFor).call(this, input);
+            const { formatted } = format(input.value, mask);
+            input.value = formatted;
+            const offset = input.value.length - prev.length;
+            const maskChar = mask[selectionStart - 1];
+            // This is a hack to make sure that changes are propagated appropriately
+            await Promise.resolve();
+            // check if the current value is not a space for characters and has an offset greater then 0
+            if (maskChar && !PATTERN_CHARS.includes(maskChar) && offset > 0) {
+                input.setSelectionRange(selectionStart + offset, selectionStart + offset);
+            }
+            else {
+                input.setSelectionRange(selectionStart, selectionStart);
+            }
+            if (prev !== input.value) {
+                input.dispatchEvent(new Event("input", { bubbles: true }));
+            }
+        }
+        onKeyDown(e) {
+            const input = e.target;
+            const mask = __classPrivateFieldGet(this, _USAInputMaskElement_instances, "m", _USAInputMaskElement_getMaskFor).call(this, input);
+            const patternChar = mask[input.selectionStart || 0];
+            if (e.key.length === 1 && /^[a-z0-9]/i.test(e.key)) {
+                // check that the key is a single character and that it is a letter or number
+                if (input.value.length >= mask.length) {
+                    // prevent default once value is the same as the mask length
+                    e.preventDefault();
+                }
+                else if (patternChar === PatternChar.Number) {
+                    if (!REG_EXPS.Numbers.test(e.key)) {
+                        // if pattern char specifies number and is not
+                        e.preventDefault();
+                    }
+                }
+                else if (patternChar === PatternChar.Letter) {
+                    if (!REG_EXPS.Letters.test(e.key)) {
+                        // if pattern char specifies letter and is not
+                        e.preventDefault();
+                    }
+                }
+            }
+        }
+        constructor() {
+            super(...arguments);
+            _USAInputMaskElement_instances.add(this);
+            _USAInputMaskElement_mask_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _mask_initializers, "")));
+            __runInitializers(this, _mask_extraInitializers);
+        }
+    };
+    _USAInputMaskElement_instances = new WeakSet();
+    _USAInputMaskElement_mask_accessor_storage = new WeakMap();
+    _USAInputMaskElement_getMaskFor = function _USAInputMaskElement_getMaskFor(input) {
+        return this.mask || input.getAttribute("mask") || "";
+    };
+    __setFunctionName(_classThis, "USAInputMaskElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _mask_decorators = [attr()];
+        _onInput_decorators = [listen("input")];
+        _onKeyDown_decorators = [listen("keydown")];
+        __esDecorate(_classThis, null, _mask_decorators, { kind: "accessor", name: "mask", static: false, private: false, access: { has: obj => "mask" in obj, get: obj => obj.mask, set: (obj, value) => { obj.mask = value; } }, metadata: _metadata }, _mask_initializers, _mask_extraInitializers);
+        __esDecorate(_classThis, null, _onInput_decorators, { kind: "method", name: "onInput", static: false, private: false, access: { has: obj => "onInput" in obj, get: obj => obj.onInput }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(_classThis, null, _onKeyDown_decorators, { kind: "method", name: "onKeyDown", static: false, private: false, access: { has: obj => "onKeyDown" in obj, get: obj => obj.onKeyDown }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAInputMaskElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USAInputMaskElement = _classThis;
+})();
+export { USAInputMaskElement };
+//# sourceMappingURL=input-mask.element.js.map

package/target/lib/input-mask/input-mask.element.js.map

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

package/target/lib/input-mask/input-mask.stories.d.ts

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

package/target/lib/input-mask/input-mask.stories.js

@@ -0,0 +1,31 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "input-mask",
+    tags: ["autodocs"],
+    render(args) {
+        return html `
+      <usa-input-mask>
+        <usa-input
+          name="phone"
+          placeholder=${args.mask}
+          autocomplete="off"
+          mask=${args.mask}
+          value="3042616138"
+        >
+          Phone:
+        </usa-input>
+      </usa-input-mask>
+    `;
+    },
+    argTypes: {},
+    args: {
+        mask: "(999) 999-9999",
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {},
+};
+//# sourceMappingURL=input-mask.stories.js.map

package/target/lib/input-mask/input-mask.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-mask.stories.js","sourceRoot":"","sources":["../../../src/lib/input-mask/input-mask.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAI3B,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA;;;;wBAIS,IAAI,CAAC,IAAI;;iBAEhB,IAAI,CAAC,IAAI;;;;;;KAMrB,CAAC;IACJ,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;KACvB;CACkC,CAAC;AAEtC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC"}

package/target/lib/input-mask/input-mask.test.d.ts

@@ -0,0 +1,2 @@
+import "./input-mask.element.js";
+import "../input/input.element.js";

package/target/lib/input-mask/input-mask.test.js

@@ -0,0 +1,85 @@
+import "./input-mask.element.js";
+import "../input/input.element.js";
+import { assert, fixture, html } from "@open-wc/testing";
+import { format } from "./format.js";
+describe("format", () => {
+    it("should retrn the correct raw value", () => {
+        assert.deepEqual(format("(123) 456 7890", "(***) ***-****"), {
+            raw: "1234567890",
+            formatted: "(123) 456-7890",
+        });
+    });
+    it("should return a formatted phone number (***) ***-****", () => {
+        assert.deepEqual(format("1234567890", "(***) ***-****"), {
+            raw: "1234567890",
+            formatted: "(123) 456-7890",
+        });
+    });
+    it("should return a formatted phone number ***-***-****", () => {
+        assert.deepEqual(format("1234567890", "***-***-****"), {
+            raw: "1234567890",
+            formatted: "123-456-7890",
+        });
+    });
+    it("should only allow numbers", () => {
+        assert.deepEqual(format("304213abcd", "999-999-9999"), {
+            raw: "304213abcd",
+            formatted: "304-213-",
+        });
+    });
+    it("should only allow a mix of letters and numbers", () => {
+        assert.deepEqual(format("C94749", "A-99999"), {
+            raw: "C94749",
+            formatted: "C-94749",
+        });
+    });
+});
+describe("usa-input-mask", () => {
+    it("should format default value", async () => {
+        const el = await fixture(html `
+      <usa-input-mask mask="(999) 999-9999">
+        <input name="phone" value="1234567890" mask />
+      </usa-input-mask>
+    `);
+        const input = el.querySelector("input");
+        assert.equal(input.value, "(123) 456-7890");
+    });
+    it("should update value when on input event", async () => {
+        const el = await fixture(html `
+      <usa-input-mask>
+        <input name="phone" mask="(999) 999-9999" />
+      </usa-input-mask>
+    `);
+        const input = el.querySelector("input");
+        input.value = "8888888888";
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        assert.equal(input.value, "(888) 888-8888");
+    });
+});
+describe("usa-input-mask with usa-input", () => {
+    it("should format default value", async () => {
+        const el = await fixture(html `
+      <usa-input-mask mask="(999) 999-9999">
+        <usa-input name="phone" value="1234567890" id="TEST" mask></usa-input>
+      </usa-input-mask>
+    `);
+        const input = el.querySelector("usa-input");
+        assert.equal(input.value, "(123) 456-7890");
+    });
+    it("should update value when on input event", async () => {
+        const el = await fixture(html `
+      <usa-input-mask>
+        <usa-input
+          name="phone"
+          value="1234567890"
+          mask="(999) 999-9999"
+        ></usa-input>
+      </usa-input-mask>
+    `);
+        const input = el.querySelector("usa-input");
+        input.value = "8888888888";
+        input.dispatchEvent(new Event("input", { bubbles: true }));
+        assert.equal(input.value, "(888) 888-8888");
+    });
+});
+//# sourceMappingURL=input-mask.test.js.map

package/target/lib/input-mask/input-mask.test.js.map

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

package/target/lib/input-mask/maskable.element.d.ts

@@ -0,0 +1,5 @@
+export interface MaskableElement extends HTMLElement {
+    value: string;
+    selectionStart: number | null;
+    setSelectionRange(start: number, end: number): void;
+}

package/target/lib/input-mask/maskable.element.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=maskable.element.js.map

package/target/lib/input-mask/maskable.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"maskable.element.js","sourceRoot":"","sources":["../../../src/lib/input-mask/maskable.element.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,13 @@
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-link": USALinkElement;
+    }
+}
+export declare class USALinkElement extends HTMLElement {
+    #private;
+    accessor href: string;
+    accessor target: "_blank" | "_parent" | "_self" | "_top" | "";
+    accessor title: string;
+    accessor disabled: boolean;
+    attributeChangedCallback(attr: string): void;
+}

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

@@ -0,0 +1,98 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, query } from "@joist/element";
+let USALinkElement = (() => {
+    var _USALinkElement_anchor, _USALinkElement_href_accessor_storage, _USALinkElement_target_accessor_storage, _USALinkElement_title_accessor_storage, _USALinkElement_disabled_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-link",
+            shadowDom: [
+                css `
+      :host {
+        display: inline;
+        color: #005ea2;
+        text-decoration: underline;
+      }
+
+      a {
+        color: inherit;
+      }
+    `,
+                html `
+      <a>
+        <slot></slot>
+      </a>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _href_decorators;
+    let _href_initializers = [];
+    let _href_extraInitializers = [];
+    let _target_decorators;
+    let _target_initializers = [];
+    let _target_extraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var USALinkElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USALinkElement_href_accessor_storage.set(this, __runInitializers(this, _href_initializers, ""));
+            _USALinkElement_target_accessor_storage.set(this, (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers, "")));
+            _USALinkElement_title_accessor_storage.set(this, (__runInitializers(this, _target_extraInitializers), __runInitializers(this, _title_initializers, "")));
+            _USALinkElement_disabled_accessor_storage.set(this, (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _disabled_initializers, false)));
+            _USALinkElement_anchor.set(this, (__runInitializers(this, _disabled_extraInitializers), query("a")));
+        }
+        get href() { return __classPrivateFieldGet(this, _USALinkElement_href_accessor_storage, "f"); }
+        set href(value) { __classPrivateFieldSet(this, _USALinkElement_href_accessor_storage, value, "f"); }
+        get target() { return __classPrivateFieldGet(this, _USALinkElement_target_accessor_storage, "f"); }
+        set target(value) { __classPrivateFieldSet(this, _USALinkElement_target_accessor_storage, value, "f"); }
+        get title() { return __classPrivateFieldGet(this, _USALinkElement_title_accessor_storage, "f"); }
+        set title(value) { __classPrivateFieldSet(this, _USALinkElement_title_accessor_storage, value, "f"); }
+        get disabled() { return __classPrivateFieldGet(this, _USALinkElement_disabled_accessor_storage, "f"); }
+        set disabled(value) { __classPrivateFieldSet(this, _USALinkElement_disabled_accessor_storage, value, "f"); }
+        attributeChangedCallback(attr) {
+            const anchor = __classPrivateFieldGet(this, _USALinkElement_anchor, "f").call(this);
+            switch (attr) {
+                case "href":
+                    anchor.href = this.href;
+                    break;
+                case "target":
+                    anchor.target = this.target;
+                    break;
+                case "title":
+                    anchor.target = this.title;
+                    break;
+            }
+        }
+    };
+    _USALinkElement_anchor = new WeakMap();
+    _USALinkElement_href_accessor_storage = new WeakMap();
+    _USALinkElement_target_accessor_storage = new WeakMap();
+    _USALinkElement_title_accessor_storage = new WeakMap();
+    _USALinkElement_disabled_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USALinkElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _href_decorators = [attr()];
+        _target_decorators = [attr()];
+        _title_decorators = [attr()];
+        _disabled_decorators = [attr()];
+        __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);
+        __esDecorate(_classThis, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USALinkElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USALinkElement = _classThis;
+})();
+export { USALinkElement };
+//# sourceMappingURL=link.element.js.map

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

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

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

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

package/target/lib/link/link.stories.js

@@ -0,0 +1,23 @@
+import { html } from "lit";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-link",
+    tags: ["autodocs"],
+    render(args) {
+        return html `<usa-link href="${args.href}">Hello World</usa-link>`;
+    },
+    argTypes: {
+        href: {
+            type: "string",
+        },
+    },
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {
+        href: "www.google.com",
+    },
+};
+//# sourceMappingURL=link.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/lib/link/link.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;IAClB,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA,mBAAmB,IAAI,CAAC,IAAI,0BAA0B,CAAC;IACpE,CAAC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;SACf;KACF;IACD,IAAI,EAAE,EAAE;CACsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,gBAAgB;KACvB;CACF,CAAC"}

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

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