@noctuatech/uswds 0.0.1

package/target/lib/icon/icon-types.js

@@ -0,0 +1,262 @@
+export const ICON_TYPES = [
+    "accessibility_new",
+    "accessible_forward",
+    "account_balance",
+    "account_box",
+    "account_circle",
+    "add",
+    "add_circle",
+    "add_circle_outline",
+    "alarm",
+    "alternate_email",
+    "announcement",
+    "arrow_back",
+    "arrow_downward",
+    "arrow_drop_down",
+    "arrow_drop_up",
+    "arrow_forward",
+    "arrow_upward",
+    "api",
+    "assessment",
+    "attach_file",
+    "attach_money",
+    "autorenew",
+    "backpack",
+    "bathtub",
+    "bedding",
+    "bookmark",
+    "bug_report",
+    "build",
+    "calendar_today",
+    "campaign",
+    "camping",
+    "cancel",
+    "chat",
+    "check",
+    "check_box_outline_blank",
+    "check_circle",
+    "check_circle_outline",
+    "checkroom",
+    "clean_hands",
+    "clothes",
+    "close",
+    "closed_caption",
+    "cloud",
+    "code",
+    "comment",
+    "connect_without_contact",
+    "construction",
+    "construction_worker",
+    "contact_page",
+    "content_copy",
+    "coronavirus",
+    "credit_card",
+    "deck",
+    "delete",
+    "device_thermostat",
+    "directions",
+    "directions_bike",
+    "directions_bus",
+    "directions_car",
+    "directions_walk",
+    "do_not_disturb",
+    "do_not_touch",
+    "drag_handle",
+    "eco",
+    "edit",
+    "electrical_services",
+    "emoji_events",
+    "error",
+    "error_outline",
+    "event",
+    "expand_less",
+    "expand_more",
+    "facebook",
+    "fast_forward",
+    "fast_rewind",
+    "favorite",
+    "favorite_border",
+    "fax",
+    "file_download",
+    "file_present",
+    "file_upload",
+    "filter_alt",
+    "filter_list",
+    "fingerprint",
+    "first_page",
+    "flag",
+    "flickr",
+    "flight",
+    "flooding",
+    "folder",
+    "folder_open",
+    "format_quote",
+    "format_size",
+    "forum",
+    "github",
+    "grid_view",
+    "group_add",
+    "groups",
+    "hearing",
+    "help",
+    "help_outline",
+    "highlight_off",
+    "history",
+    "home",
+    "hospital",
+    "hotel",
+    "hourglass_empty",
+    "hurricane",
+    "identification",
+    "image",
+    "info",
+    "info_outline",
+    "insights",
+    "instagram",
+    "keyboard",
+    "label",
+    "language",
+    "last_page",
+    "launch",
+    "lightbulb",
+    "lightbulb_outline",
+    "link",
+    "link_off",
+    "linkedin",
+    "list",
+    "local_cafe",
+    "local_fire_department",
+    "local_gas_station",
+    "local_grocery_store",
+    "local_hospital",
+    "local_laundry_service",
+    "local_library",
+    "local_offer",
+    "local_parking",
+    "local_pharmacy",
+    "local_police",
+    "local_taxi",
+    "location_city",
+    "location_on",
+    "lock",
+    "lock_open",
+    "lock_outline",
+    "login",
+    "logout",
+    "loop",
+    "mail",
+    "mail_outline",
+    "map",
+    "masks",
+    "medical_services",
+    "menu",
+    "military_tech",
+    "more_horiz",
+    "more_vert",
+    "my_location",
+    "navigate_before",
+    "navigate_next",
+    "navigate_far_before",
+    "navigate_far_next",
+    "near_me",
+    "notifications",
+    "notifications_active",
+    "notifications_none",
+    "notifications_off",
+    "park",
+    "people",
+    "person",
+    "pets",
+    "phone",
+    "photo_camera",
+    "print",
+    "priority_high",
+    "public",
+    "push_pin",
+    "radio_button_unchecked",
+    "rain",
+    "reduce_capacity",
+    "remove",
+    "remove_circle",
+    "report",
+    "restaurant",
+    "rss_feed",
+    "safety_divider",
+    "sanitizer",
+    "severe_weather",
+    "save_alt",
+    "schedule",
+    "school",
+    "science",
+    "search",
+    "security",
+    "send",
+    "sentiment_dissatisfied",
+    "sentiment_neutral",
+    "sentiment_satisfied",
+    "sentiment_satisfied_alt",
+    "sentiment_very_dissatisfied",
+    "settings",
+    "share",
+    "shield",
+    "shopping_basket",
+    "snow",
+    "soap",
+    "social_distance",
+    "sort_arrow",
+    "spellcheck",
+    "star",
+    "star_half",
+    "star_outline",
+    "store",
+    "support",
+    "support_agent",
+    "text_fields",
+    "thumb_down_alt",
+    "thumb_up_alt",
+    "timer",
+    "toggle_off",
+    "toggle_on",
+    "topic",
+    "tornado",
+    "translate",
+    "trending_down",
+    "trending_up",
+    "twitter",
+    "undo",
+    "unfold_less",
+    "unfold_more",
+    "update",
+    "upload_file",
+    "verified",
+    "verified_user",
+    "visibility",
+    "visibility_off",
+    "volume_off",
+    "warning",
+    "wash",
+    "wifi",
+    "work",
+    "x",
+    "youtube",
+    "zoom_in",
+    "zoom_out_map",
+    "zoom_out",
+    "visibility",
+    "home",
+    "print",
+    "search",
+    "check_circle",
+    "warning",
+    "info",
+    "cancel",
+    "check_circle",
+    "warning",
+    "info",
+    "cancel",
+    "help",
+    "people",
+    "mail",
+    "support",
+];
+//# sourceMappingURL=icon-types.js.map

package/target/lib/icon/icon-types.js.map

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

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

@@ -0,0 +1,12 @@
+import { USAIcon } from "./icon-types.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-icon": USAIconElement;
+    }
+}
+export declare class USAIconElement extends HTMLElement {
+    #private;
+    accessor icon: USAIcon;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+}

package/target/lib/icon/icon.element.js

@@ -0,0 +1,84 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, query } from "@joist/element";
+import { inject, injectable } from "@joist/di";
+import { USAConfig } from "../config/config.element.js";
+let USAIconElement = (() => {
+    var _USAIconElement_instances, _USAIconElement_use, _USAIconElement_config, _USAIconElement_connected, _USAIconElement_updateIcon, _USAIconElement_icon_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-icon",
+            shadowDom: [
+                css `
+      :host {
+        display: inline-block;
+        height: 2rem;
+        position: relative;
+        width: 2rem;
+      }
+
+      svg {
+        fill: currentColor;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+                html `
+      <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+        <use></use>
+      </svg>
+    `,
+            ],
+        }), injectable()];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _icon_decorators;
+    let _icon_initializers = [];
+    let _icon_extraInitializers = [];
+    var USAIconElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USAIconElement_instances.add(this);
+            _USAIconElement_icon_accessor_storage.set(this, __runInitializers(this, _icon_initializers, "accessibility_new"));
+            _USAIconElement_use.set(this, (__runInitializers(this, _icon_extraInitializers), query("use")));
+            _USAIconElement_config.set(this, inject(USAConfig));
+            _USAIconElement_connected.set(this, false);
+        }
+        get icon() { return __classPrivateFieldGet(this, _USAIconElement_icon_accessor_storage, "f"); }
+        set icon(value) { __classPrivateFieldSet(this, _USAIconElement_icon_accessor_storage, value, "f"); }
+        connectedCallback() {
+            __classPrivateFieldSet(this, _USAIconElement_connected, true, "f");
+            __classPrivateFieldGet(this, _USAIconElement_instances, "m", _USAIconElement_updateIcon).call(this);
+        }
+        attributeChangedCallback() {
+            if (__classPrivateFieldGet(this, _USAIconElement_connected, "f")) {
+                __classPrivateFieldGet(this, _USAIconElement_instances, "m", _USAIconElement_updateIcon).call(this);
+            }
+        }
+    };
+    _USAIconElement_use = new WeakMap();
+    _USAIconElement_config = new WeakMap();
+    _USAIconElement_connected = new WeakMap();
+    _USAIconElement_instances = new WeakSet();
+    _USAIconElement_icon_accessor_storage = new WeakMap();
+    _USAIconElement_updateIcon = function _USAIconElement_updateIcon() {
+        const config = __classPrivateFieldGet(this, _USAIconElement_config, "f").call(this);
+        const use = __classPrivateFieldGet(this, _USAIconElement_use, "f").call(this);
+        if (this.icon !== use.getAttribute("href")) {
+            use.setAttribute("href", `${config.spriteSheet}#${this.icon}`);
+        }
+    };
+    __setFunctionName(_classThis, "USAIconElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _icon_decorators = [attr()];
+        __esDecorate(_classThis, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USAIconElement = _classThis = _classDescriptor.value;
+        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        __runInitializers(_classThis, _classExtraInitializers);
+    })();
+    return USAIconElement = _classThis;
+})();
+export { USAIconElement };
+//# sourceMappingURL=icon.element.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.element.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG/C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;IAiC3C,cAAc;;4BAzB1B,OAAO,CAAC;YACP,OAAO,EAAE,UAAU;YACnB,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;KAaF;gBACD,IAAI,CAAA;;;;KAIH;aACF;SACF,CAAC,EACD,UAAU,EAAE;;;;sBACuB,WAAW;;;;2CAAnB,SAAQ,WAAW;;;;YAEpC,4FAAgB,mBAAmB,GAAC;YAE7C,iFAAO,KAAK,CAAC,KAAK,CAAC,GAAC;YACpB,iCAAU,MAAM,CAAC,SAAS,CAAC,EAAC;YAC5B,oCAAa,KAAK,EAAC;QAqBrB,CAAC;QAzBC,IAAS,IAAI,uFAAgC;QAA7C,IAAS,IAAI,4FAAgC;QAM7C,iBAAiB;YACf,uBAAA,IAAI,6BAAc,IAAI,MAAA,CAAC;YACvB,uBAAA,IAAI,6DAAY,MAAhB,IAAI,CAAc,CAAC;QACrB,CAAC;QAED,wBAAwB;YACtB,IAAI,uBAAA,IAAI,iCAAW,EAAE,CAAC;gBACpB,uBAAA,IAAI,6DAAY,MAAhB,IAAI,CAAc,CAAC;YACrB,CAAC;QACH,CAAC;;;;;;;;QAGC,MAAM,MAAM,GAAG,uBAAA,IAAI,8BAAQ,MAAZ,IAAI,CAAU,CAAC;QAC9B,MAAM,GAAG,GAAG,uBAAA,IAAI,2BAAK,MAAT,IAAI,CAAO,CAAC;QAExB,IAAI,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3C,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;;;;4BAzBA,IAAI,EAAE;QACP,uKAAS,IAAI,6BAAJ,IAAI,mFAAgC;QAF/C,6KA2BC;;;QA3BY,uDAAc;;;;SAAd,cAAc"}

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

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

package/target/lib/icon/icon.stories.js

@@ -0,0 +1,39 @@
+import { html } from "lit";
+import { ICON_TYPES } from "./icon-types.js";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: "usa-icon",
+    tags: [],
+    render(args) {
+        return html `<usa-icon icon=${args.icon}></usa-icon>`;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+export const AllIcons = {
+    render() {
+        async function copyIcon(icon) {
+            try {
+                await navigator.clipboard.writeText(`<usa-icon icon=${icon}></usa-icon>`);
+                alert(`copied markup for ${icon}`);
+            }
+            catch (err) {
+                console.error("Failed to copy: ", err);
+            }
+        }
+        return html `<div style="display: flex; flex-wrap: wrap; gap: .75rem;">
+      ${html `${ICON_TYPES.map((icon) => html `
+          <button
+            @click=${() => copyIcon(icon)}
+            style="padding: .5rem 1rem .5rem .5rem; cursor: pointer; background: #fff; border-radius: 4px; gap: .5rem; display: flex; align-items: center"
+          >
+            <usa-icon icon=${icon}></usa-icon>
+
+            ${icon}
+          </button>
+        `)}`}
+    </div>`;
+    },
+};
+//# sourceMappingURL=icon.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.stories.js","sourceRoot":"","sources":["../../../src/lib/icon/icon.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,kFAAkF;AAClF,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,UAAU;IACjB,IAAI,EAAE,EAAE;IACR,MAAM,CAAC,IAAI;QACT,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,cAAc,CAAC;IACvD,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACsB,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM;QACJ,KAAK,UAAU,QAAQ,CAAC,IAAY;YAClC,IAAI,CAAC;gBACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CACjC,kBAAkB,IAAI,cAAc,CACrC,CAAC;gBACF,KAAK,CAAC,qBAAqB,IAAI,EAAE,CAAC,CAAC;YACrC,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;QACP,IAAI,CAAA,GAAG,UAAU,CAAC,GAAG,CACrB,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;qBAED,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;;;6BAGZ,IAAI;;cAEnB,IAAI;;SAET,CACF,EAAE;WACE,CAAC;IACV,CAAC;CACF,CAAC"}

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

@@ -0,0 +1,19 @@
+import { MaskableElement } from "../input-mask/maskable.element.js";
+declare global {
+    interface HTMLElementTagNameMap {
+        "usa-input": USATextInputElement;
+    }
+}
+export declare class USATextInputElement extends HTMLElement implements MaskableElement {
+    #private;
+    static formAssociated: boolean;
+    accessor name: string;
+    accessor autocomplete: AutoFill;
+    accessor placeholder: string;
+    accessor value: string;
+    get selectionStart(): number | null;
+    setSelectionRange(start: number, end: number): void;
+    onChange(): void;
+    onInputChange(): void;
+    attributeChangedCallback(attr: string): void;
+}

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

@@ -0,0 +1,166 @@
+import { __classPrivateFieldGet, __classPrivateFieldSet, __esDecorate, __runInitializers, __setFunctionName } from "tslib";
+import { attr, css, element, html, listen, query } from "@joist/element";
+import { effect, observe } from "@joist/observable";
+let USATextInputElement = (() => {
+    var _USATextInputElement_internals, _USATextInputElement_input, _USATextInputElement_name_accessor_storage, _USATextInputElement_autocomplete_accessor_storage, _USATextInputElement_placeholder_accessor_storage, _USATextInputElement_value_accessor_storage;
+    let _classDecorators = [element({
+            tagName: "usa-input",
+            shadowDom: [
+                css `
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        font-family:
+          Source Sans Pro Web,
+          Helvetica Neue,
+          Helvetica,
+          Roboto,
+          Arial,
+          sans-serif;
+        font-size: 1.06rem;
+        line-height: 1.3;
+        display: block;
+        font-weight: 400;
+        max-width: 30rem;
+        margin-bottom: 1.5rem;
+      }
+
+      input {
+        border-width: 1px;
+        border-color: #5c5c5c;
+        border-style: solid;
+        border-radius: 0;
+        color: #1b1b1b;
+        display: block;
+        height: 2.5rem;
+        line-height: 1.3;
+        font-size: 1.06rem;
+        margin-top: 0.5rem;
+        padding: 0.5rem;
+        width: 100%;
+      }
+
+      input:not(:disabled):focus {
+        outline: 0.25rem solid #2491ff;
+        outline-offset: 0;
+      }
+    `,
+                html `
+      <label>
+        <slot></slot>
+
+        <input />
+      </label>
+    `,
+            ],
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _autocomplete_decorators;
+    let _autocomplete_initializers = [];
+    let _autocomplete_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _onChange_decorators;
+    let _onInputChange_decorators;
+    var USATextInputElement = _classThis = class extends _classSuper {
+        constructor() {
+            super(...arguments);
+            _USATextInputElement_name_accessor_storage.set(this, (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, "")));
+            _USATextInputElement_autocomplete_accessor_storage.set(this, (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _autocomplete_initializers, "on")));
+            _USATextInputElement_placeholder_accessor_storage.set(this, (__runInitializers(this, _autocomplete_extraInitializers), __runInitializers(this, _placeholder_initializers, "")));
+            _USATextInputElement_value_accessor_storage.set(this, (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _value_initializers, "")));
+            _USATextInputElement_internals.set(this, (__runInitializers(this, _value_extraInitializers), this.attachInternals()));
+            _USATextInputElement_input.set(this, query("input"));
+        }
+        get name() { return __classPrivateFieldGet(this, _USATextInputElement_name_accessor_storage, "f"); }
+        set name(value) { __classPrivateFieldSet(this, _USATextInputElement_name_accessor_storage, value, "f"); }
+        get autocomplete() { return __classPrivateFieldGet(this, _USATextInputElement_autocomplete_accessor_storage, "f"); }
+        set autocomplete(value) { __classPrivateFieldSet(this, _USATextInputElement_autocomplete_accessor_storage, value, "f"); }
+        get placeholder() { return __classPrivateFieldGet(this, _USATextInputElement_placeholder_accessor_storage, "f"); }
+        set placeholder(value) { __classPrivateFieldSet(this, _USATextInputElement_placeholder_accessor_storage, value, "f"); }
+        get value() { return __classPrivateFieldGet(this, _USATextInputElement_value_accessor_storage, "f"); }
+        set value(value) { __classPrivateFieldSet(this, _USATextInputElement_value_accessor_storage, value, "f"); }
+        get selectionStart() {
+            const { selectionStart } = __classPrivateFieldGet(this, _USATextInputElement_input, "f").call(this);
+            return selectionStart;
+        }
+        setSelectionRange(start, end) {
+            const input = __classPrivateFieldGet(this, _USATextInputElement_input, "f").call(this);
+            input.setSelectionRange(start, end);
+        }
+        onChange() {
+            const input = __classPrivateFieldGet(this, _USATextInputElement_input, "f").call(this);
+            input.value = this.value;
+        }
+        onInputChange() {
+            const input = __classPrivateFieldGet(this, _USATextInputElement_input, "f").call(this);
+            __classPrivateFieldGet(this, _USATextInputElement_internals, "f").setFormValue(input.value);
+            this.value = input.value;
+        }
+        attributeChangedCallback(attr) {
+            const input = __classPrivateFieldGet(this, _USATextInputElement_input, "f").call(this);
+            switch (attr) {
+                case "autocomplete":
+                    input.autocomplete = this.autocomplete;
+                    break;
+                case "placeholder":
+                    input.placeholder = this.placeholder;
+                    break;
+                case "name":
+                    input.name = this.name;
+                    break;
+                case "value":
+                    input.value = this.value;
+                    __classPrivateFieldGet(this, _USATextInputElement_internals, "f").setFormValue(this.value);
+                    break;
+            }
+        }
+    };
+    _USATextInputElement_internals = new WeakMap();
+    _USATextInputElement_input = new WeakMap();
+    _USATextInputElement_name_accessor_storage = new WeakMap();
+    _USATextInputElement_autocomplete_accessor_storage = new WeakMap();
+    _USATextInputElement_placeholder_accessor_storage = new WeakMap();
+    _USATextInputElement_value_accessor_storage = new WeakMap();
+    __setFunctionName(_classThis, "USATextInputElement");
+    (() => {
+        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+        _name_decorators = [attr()];
+        _autocomplete_decorators = [attr()];
+        _placeholder_decorators = [attr()];
+        _value_decorators = [attr({
+                reflect: false,
+            }), observe()];
+        _onChange_decorators = [effect()];
+        _onInputChange_decorators = [listen("input")];
+        __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, _autocomplete_decorators, { kind: "accessor", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_extraInitializers);
+        __esDecorate(_classThis, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_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, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(_classThis, null, _onInputChange_decorators, { kind: "method", name: "onInputChange", static: false, private: false, access: { has: obj => "onInputChange" in obj, get: obj => obj.onInputChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+        USATextInputElement = _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 USATextInputElement = _classThis;
+})();
+export { USATextInputElement };
+//# sourceMappingURL=input.element.js.map

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

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

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

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

package/target/lib/input/input.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-input",
+    tags: ["autodocs"],
+    render() {
+        return html `
+      <form>
+        <usa-input name="fname" value="Danny" autocomplete="off" foo="test">
+          First name
+        </usa-input>
+
+        <usa-button type="submit">Submit</usa-button>
+      </form>
+    `;
+    },
+    argTypes: {},
+    args: {},
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {};
+//# sourceMappingURL=input.stories.js.map

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

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

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

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